/* ============================================================ Vision Technology · School ERP — shared design system Used by all pages under /school-erp/ Wrapper class: .se-page (applied to ) Version: 1 ============================================================ */ /* ---- Color tokens (primary #371c9f + soft-blue family) ---- */ :root { --se-brand: #371c9f; --se-brand-dark: #27157a; --se-brand-darker: #1b0f5a; /* Soft pastel tints, derived from #371c9f (same hue, raised lightness) */ --se-blue-50: #f3f1fb; --se-blue-100: #e6e1f5; --se-blue-200: #cec4ea; --se-blue-300: #a89bd9; --se-blue-400: #7f6fc4; --se-blue-500: #5d4cb0; /* Neutrals */ --se-ink: #0f1222; --se-ink-soft: #4b5160; --se-ink-mute: #9aa0b0; --se-line: #e5e7eb; --se-line-soft: #f1f3f7; --se-paper: #ffffff; --se-paper-soft: #fafbfc; /* Red only for "before" label (intentional contrast, nothing else) */ --se-danger: #c94343; } /* ============================================================ BASE TYPOGRAPHY Light weights, generous line-height, fluid sizes ============================================================ */ .se-page { font-weight: 300; color: var(--se-ink-soft); line-height: 1.75; font-size: 1.15rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .se-page p { font-weight: 300; font-size: 1.2rem; line-height: 1.8; color: var(--se-ink-soft); } .se-page strong { font-weight: 500; color: var(--se-ink); } .se-page a { color: var(--se-brand); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s ease; } .se-page a:hover { color: var(--se-brand-dark); border-bottom-color: var(--se-brand); } .se-page h1, .se-page h2, .se-page h3, .se-page h4, .se-page h5 { font-weight: 600; color: var(--se-ink); letter-spacing: -0.02em; } .se-page h1 { font-size: clamp(2.75rem, 5vw, 4.25rem); line-height: 1.1; } .se-page h2 { font-size: clamp(2.25rem, 4vw, 3.5rem); line-height: 1.15; margin-bottom: 0.5rem; } .se-page h3 { font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1.25; } .se-page h4 { font-size: 1.4rem; line-height: 1.35; } .se-page h5 { font-size: 1.2rem; line-height: 1.4; } .se-page .lead-intro { font-size: 1.45rem; line-height: 1.65; color: var(--se-ink-soft); font-weight: 300; } /* ============================================================ SECTION RHYTHM + DIVIDERS ============================================================ */ .se-page section { padding-top: 5rem; padding-bottom: 5rem; } @media (min-width: 992px) { .se-page section { padding-top: 6.5rem; padding-bottom: 6.5rem; } } /* ---- Wider desktop container for full-width sections ---- */ /* Apply .se-container-wide to hero / grids / full-width sections. Keep regular .container on prose sections (8-col reading width). */ .se-page .se-container-wide { width: 100%; padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5); padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5); margin-right: auto; margin-left: auto; max-width: 1440px; } @media (min-width: 1600px) { .se-page .se-container-wide { max-width: 1440px; } } .se-section-divider { border: 0; border-top: 1px solid var(--se-line); margin: 0; } .se-bg-soft { background: var(--se-paper-soft); } .se-bg-whisper { background: var(--se-blue-50); } /* ============================================================ BIG BOLD SECTION NUMBERS — the new hero of the design Cycles through 5 soft-pastel blues across sections ============================================================ */ .se-section-head { margin-bottom: 2.5rem; } .se-section-head.center { text-align: center; } .se-number { display: block; font-size: clamp(5rem, 10vw, 10rem); font-weight: 700; line-height: 1; letter-spacing: -0.04em; margin-bottom: 0.6rem; color: var(--se-blue-200); font-feature-settings: "tnum" 1; } /* Cycling colors — apply .n-1 through .n-5 per section */ .se-number.n-1 { color: var(--se-blue-200); } .se-number.n-2 { color: var(--se-blue-300); } .se-number.n-3 { color: var(--se-blue-400); } .se-number.n-4 { color: var(--se-blue-500); } .se-number.n-5 { color: var(--se-brand); opacity: 0.85; } /* Mobile: slightly less aggressive weight (600 instead of 700) */ @media (max-width: 767px) { .se-number { font-size: clamp(4rem, 14vw, 6rem); font-weight: 600; letter-spacing: -0.03em; } } /* Kicker label sits just below the number */ .se-kicker { font-size: 1rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--se-brand); display: inline-flex; align-items: center; gap: 0.9rem; margin-bottom: 1.4rem; } .se-kicker::before { content: ''; width: 40px; height: 1px; background: var(--se-brand); } .se-section-head.center .se-kicker { justify-content: center; } /* ============================================================ DROP CAPS for editorial prose sections ============================================================ */ .se-dropcap::first-letter { float: left; font-size: 5rem; line-height: 0.9; font-weight: 600; color: var(--se-brand); margin: 0.4rem 0.9rem -0.2rem 0; } @media (max-width: 767px) { .se-dropcap::first-letter { font-size: 3.8rem; } } /* ============================================================ HERO (clean, no gradient) ============================================================ */ .se-hero { background: var(--se-paper); border-bottom: 1px solid var(--se-line); } .se-hero-badge { display: inline-block; padding: 0.55rem 1.15rem; background: var(--se-blue-100); color: var(--se-brand); border-radius: 50px; font-size: 0.92rem; font-weight: 500; letter-spacing: 0.05em; margin-bottom: 1.8rem; } /* ============================================================ IMAGE CAPTIONS (design reference strip) ============================================================ */ .se-img-wrap { display: block; width: 100%; } .se-img-wrap img { display: block; width: 100%; height: auto; border-radius: 6px; } .se-img-caption { display: block; font-size: 0.8rem; color: var(--se-ink-mute); margin-top: 0.7rem; letter-spacing: 0.03em; } /* ============================================================ BUTTONS Scoped to .se-page to beat the generic .se-page a rule ============================================================ */ .se-page a.se-btn-primary, .se-page a.se-btn-outline { text-decoration: none; border-bottom: none !important; display: inline-flex; align-items: center; gap: 0.65rem; padding: 1rem 2rem; border-radius: 50px; font-weight: 600; font-size: 1.08rem; letter-spacing: 0.02em; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; cursor: pointer; } /* ---- Primary: solid brand fill, white text ---- */ .se-page a.se-btn-primary { background: var(--se-brand); color: #ffffff !important; border: 1px solid var(--se-brand); } .se-page a.se-btn-primary:hover, .se-page a.se-btn-primary:focus { background: var(--se-brand-dark); color: #ffffff !important; border-color: var(--se-brand-dark); box-shadow: 0 6px 18px rgba(55, 28, 159, 0.22); } /* ---- Outline: soft-blue fill + brand border, so it's visible on white ---- */ .se-page a.se-btn-outline { background: var(--se-blue-50); color: var(--se-brand) !important; border: 1px solid var(--se-blue-200); } .se-page a.se-btn-outline:hover, .se-page a.se-btn-outline:focus { background: var(--se-blue-100); color: var(--se-brand-dark) !important; border-color: var(--se-brand); } /* ============================================================ AGE CARDS · 2px top border + thin icon circle ============================================================ */ .se-age-card { background: var(--se-paper); border: 1px solid var(--se-line); border-top: 2px solid var(--se-brand); border-radius: 10px; padding: 2.25rem 1.75rem; text-align: center; transition: transform 0.25s ease, border-top-color 0.25s ease; height: 100%; } .se-age-card:hover { transform: translateY(-4px); } /* Cycling top-border blues */ .se-age-card.t-1 { border-top-color: var(--se-blue-300); } .se-age-card.t-2 { border-top-color: var(--se-blue-400); } .se-age-card.t-3 { border-top-color: var(--se-blue-500); } .se-age-card.t-4 { border-top-color: var(--se-brand); } .se-age-icon { width: 74px; height: 74px; border-radius: 50%; border: 1px solid var(--se-line); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1.35rem; color: var(--se-brand); font-size: 1.75rem; background: var(--se-blue-50); } .se-age-card h5 { font-weight: 500; font-size: 1.35rem; margin-bottom: 0.25rem; } .se-age-range { color: var(--se-ink-mute); font-size: 0.92rem; letter-spacing: 0.03em; display: block; margin-bottom: 0.9rem; } .se-age-card p { font-size: 1.05rem; line-height: 1.65; margin: 0; } /* ============================================================ DAY TIMELINE · left line + dots ============================================================ */ .se-timeline { border-left: 1px solid var(--se-line); padding-left: 2.75rem; position: relative; } .se-timeline .tl-item { position: relative; padding: 1.1rem 0 2.25rem; } .se-timeline .tl-item::before { content: ''; position: absolute; left: -3.2rem; top: 1.7rem; width: 13px; height: 13px; border-radius: 50%; background: var(--se-paper); border: 2px solid var(--se-brand); } .se-timeline .tl-item:nth-child(odd)::before { border-color: var(--se-blue-400); } .se-timeline .tl-item:nth-child(3n)::before { border-color: var(--se-blue-300); } .se-timeline .tl-time { font-size: 0.88rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--se-brand); display: block; margin-bottom: 0.5rem; } .se-timeline .tl-title { font-size: 1.35rem; font-weight: 500; color: var(--se-ink); margin-bottom: 0.5rem; line-height: 1.35; } .se-timeline .tl-body { font-size: 1.08rem; color: var(--se-ink-soft); margin: 0; line-height: 1.7; } @media (max-width: 767px) { .se-timeline { padding-left: 2rem; } .se-timeline .tl-item::before { left: -2.45rem; top: 1.5rem; } .se-timeline .tl-title { font-size: 1.15rem; } .se-timeline .tl-body { font-size: 1rem; } } /* ============================================================ BEFORE / AFTER CARDS with point-based lists ============================================================ */ .se-ba-card { background: var(--se-paper); border: 1px solid var(--se-line); padding: 2.5rem 2rem; height: 100%; border-radius: 8px; } .se-ba-card.before { border-left: 3px solid var(--se-danger); } .se-ba-card.after { border-left: 3px solid var(--se-brand); } .se-ba-label { font-size: 0.92rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 1.2rem; display: inline-flex; align-items: center; gap: 0.55rem; } .se-ba-card.before .se-ba-label { color: var(--se-danger); } .se-ba-card.after .se-ba-label { color: var(--se-brand); } .se-ba-card h4 { font-size: 1.55rem; font-weight: 500; margin-bottom: 1.5rem; line-height: 1.35; } .se-ba-list { list-style: none; padding: 0; margin: 0; } .se-ba-list li { position: relative; padding: 1rem 0 1rem 2.3rem; font-size: 1.08rem; line-height: 1.7; color: var(--se-ink-soft); border-bottom: 1px solid var(--se-line); } .se-ba-list li:last-child { border-bottom: none; padding-bottom: 0.3rem; } .se-ba-list li::before { position: absolute; left: 0; top: 1.15rem; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 0.95rem; width: 1.3rem; text-align: center; } .se-ba-card.before .se-ba-list li::before { content: "\f00d"; color: var(--se-danger); } .se-ba-card.after .se-ba-list li::before { content: "\f00c"; color: var(--se-brand); } .se-ba-list li strong { color: var(--se-ink); font-weight: 500; } @media (max-width: 767px) { .se-ba-card { padding: 2rem 1.4rem; } .se-ba-card h4 { font-size: 1.3rem; } .se-ba-list li { font-size: 1rem; padding-left: 2rem; } } /* ============================================================ PARENT-APP FEATURE CARDS (asymmetric grid) ============================================================ */ .se-feat-large { background: var(--se-paper); border: 1px solid var(--se-line); padding: 2.5rem; height: 100%; border-radius: 8px; } .se-feat-small { background: var(--se-paper); border: 1px solid var(--se-line); padding: 1.5rem 1.75rem; transition: border-color 0.25s ease; border-radius: 8px; } .se-feat-small:hover { border-color: var(--se-brand); } .se-feat-small h6 { font-size: 1.15rem; font-weight: 500; color: var(--se-ink); margin: 0 0 0.4rem 0; } .se-feat-small p { font-size: 1rem; color: var(--se-ink-soft); margin: 0; line-height: 1.6; } .se-feat-icon-sm { color: var(--se-brand); font-size: 1.2rem; margin-bottom: 0.7rem; display: block; } /* ============================================================ NUMBERED OWNER BENEFITS ============================================================ */ .se-benefit { border-left: 1px solid var(--se-line); padding: 0.5rem 0 0.5rem 1.9rem; position: relative; } .se-benefit .se-benefit-num { font-size: 3rem; font-weight: 300; color: var(--se-blue-300); line-height: 1; display: block; margin-bottom: 0.7rem; } .se-benefit h5 { font-size: 1.35rem; font-weight: 500; margin-bottom: 0.5rem; } .se-benefit p { font-size: 1.08rem; line-height: 1.7; margin: 0; } /* ============================================================ PHONE FRAME (clean) ============================================================ */ .se-phone { max-width: 360px; margin: 0 auto; background: var(--se-paper); border: 1px solid var(--se-line); border-radius: 28px; padding: 1.75rem 1.5rem; } .se-phone .phone-header { font-size: 0.82rem; color: var(--se-ink-mute); letter-spacing: 0.08em; margin-bottom: 1rem; } .se-phone h5 { font-size: 1.2rem; font-weight: 500; margin-bottom: 1rem; } .se-phone hr { border: 0; border-top: 1px solid var(--se-line); margin: 0.9rem 0; } .se-phone .phone-line { font-size: 0.98rem; color: var(--se-ink-soft); margin: 0.5rem 0; line-height: 1.55; } .se-phone .phone-line i { color: var(--se-brand); margin-right: 0.55rem; width: 18px; } /* ============================================================ FIT SPLIT — asymmetric layout Left (good fit): large 8-col card with image, rich content Right (bad fit): smaller 4-col terse card ============================================================ */ .se-fit-good { background: var(--se-paper); border: 1px solid var(--se-line); border-top: 3px solid var(--se-brand); padding: 3rem; height: 100%; border-radius: 10px; position: relative; overflow: hidden; } .se-fit-good::before { content: ''; position: absolute; top: 0; right: 0; width: 180px; height: 180px; background: var(--se-blue-50); border-radius: 50%; transform: translate(60px, -60px); pointer-events: none; } .se-fit-good-inner { position: relative; z-index: 1; } .se-fit-good .fit-label { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--se-brand); background: var(--se-blue-100); padding: 0.5rem 1rem; border-radius: 50px; margin-bottom: 1.5rem; } .se-fit-good h3 { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 600; margin-bottom: 1rem; line-height: 1.2; color: var(--se-ink); } .se-fit-good > .se-fit-good-inner > p.lead { font-size: 1.15rem; font-weight: 300; line-height: 1.65; color: var(--se-ink-soft); margin-bottom: 2rem; } .se-fit-good ul { list-style: none; padding: 0; margin: 0; } .se-fit-good li { display: flex; gap: 0.9rem; padding: 0.9rem 0; border-bottom: 1px solid var(--se-line-soft); font-size: 1.05rem; line-height: 1.65; color: var(--se-ink-soft); } .se-fit-good li:last-child { border-bottom: none; } .se-fit-good li i { color: var(--se-brand); font-size: 1rem; margin-top: 0.35rem; flex-shrink: 0; } .se-fit-good li strong { color: var(--se-ink); font-weight: 600; } /* ---- Bad fit · terse narrow card ---- */ .se-fit-bad { background: var(--se-paper-soft); border: 1px solid var(--se-line); padding: 2.25rem 2rem; height: 100%; border-radius: 10px; } .se-fit-bad .fit-label-bad { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--se-ink-mute); margin-bottom: 1rem; } .se-fit-bad h4 { font-size: 1.3rem; font-weight: 500; color: var(--se-ink); margin-bottom: 0.6rem; line-height: 1.3; } .se-fit-bad p.hint { font-size: 0.98rem; color: var(--se-ink-soft); margin-bottom: 1.5rem; } .se-fit-bad ul { list-style: none; padding: 0; margin: 0; } .se-fit-bad li { padding: 0.75rem 0; border-bottom: 1px dashed var(--se-line); font-size: 0.98rem; line-height: 1.55; color: var(--se-ink-soft); } .se-fit-bad li:last-child { border-bottom: none; } .se-fit-bad li a { color: var(--se-brand); font-weight: 600; } @media (max-width: 991px) { .se-fit-good { padding: 2.25rem 1.75rem; } .se-fit-good::before { display: none; } } /* ============================================================ FAQ · flat accordion ============================================================ */ .se-faq { border-top: 1px solid var(--se-line); margin-top: 2.5rem; } .se-faq .faq-row { padding: 2rem 0; border-bottom: 1px solid var(--se-line); } .se-faq .faq-q { font-size: 1.35rem; font-weight: 500; color: var(--se-ink); display: flex; justify-content: space-between; align-items: flex-start; gap: 1.1rem; margin-bottom: 0.9rem; line-height: 1.4; } .se-faq .faq-q .q-num { font-size: 0.95rem; color: var(--se-brand); font-weight: 600; letter-spacing: 0.1em; min-width: 2.8rem; } .se-faq .faq-q .q-text { flex: 1; } .se-faq .faq-a { font-size: 1.1rem; line-height: 1.8; color: var(--se-ink-soft); padding-left: 2.8rem; margin: 0; } @media (max-width: 767px) { .se-faq .faq-q { font-size: 1.15rem; gap: 0.75rem; } .se-faq .faq-q .q-num { min-width: 2.1rem; } .se-faq .faq-a { font-size: 1.02rem; padding-left: 2.1rem; } } /* ============================================================ QUOTE BLOCK ============================================================ */ .se-quote { border-left: 2px solid var(--se-brand); padding: 0.5rem 0 0.5rem 2.2rem; margin: 2.25rem 0; } .se-quote p { font-size: 1.55rem; font-weight: 300; font-style: italic; color: var(--se-ink); line-height: 1.55; margin-bottom: 0.9rem; } .se-quote cite { font-size: 1rem; color: var(--se-ink-soft); font-style: normal; letter-spacing: 0.03em; } .se-quote-center { border-left: none; border-top: 1px solid var(--se-line); padding: 3rem 0 0 0; text-align: center; } .se-quote-center p { font-size: 1.75rem; line-height: 1.55; } /* ============================================================ BREADCRUMB — small, bold, brand-colored ============================================================ */ .se-breadcrumb-bar { background: var(--se-paper); border-bottom: 1px solid var(--se-line); padding: 0.85rem 0; } .se-page .breadcrumb { margin: 0; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; } .se-page .breadcrumb-item + .breadcrumb-item::before { content: "›"; color: var(--se-blue-300); padding: 0 0.4rem; font-weight: 600; } .se-page .breadcrumb a { color: var(--se-brand); text-decoration: none; border-bottom: none; transition: color 0.2s ease; } .se-page .breadcrumb a:hover { color: var(--se-brand-dark); border-bottom: none; } .se-page .breadcrumb .breadcrumb-item.active { color: var(--se-ink); font-weight: 700; } @media (max-width: 767px) { .se-page .breadcrumb { font-size: 0.76rem; } .se-breadcrumb-bar { padding: 0.7rem 0; } } /* ============================================================ AOS defaults (optional custom easing) ============================================================ */ [data-aos] { pointer-events: none; } [data-aos].aos-animate { pointer-events: auto; } /* ============================================================ MODULE GRID (used on all-modules.php) ============================================================ */ .se-module-grid-heading { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--se-brand); padding-bottom: 1rem; border-bottom: 1px solid var(--se-line); margin-top: 3rem; margin-bottom: 1.8rem; display: flex; align-items: center; gap: 0.75rem; } .se-module-grid-heading i { color: var(--se-blue-400); font-size: 0.75rem; } .se-module-card { display: block; background: var(--se-paper); border: 1px solid var(--se-line); border-radius: 10px; padding: 1.5rem 1.5rem 1.6rem; height: 100%; text-decoration: none !important; border-bottom: none !important; transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; position: relative; } .se-module-card:hover { transform: translateY(-4px); border-color: var(--se-brand); box-shadow: 0 10px 30px rgba(55, 28, 159, 0.08); } .se-module-card .se-mod-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--se-blue-50); border: 1px solid var(--se-blue-200); color: var(--se-brand); display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; margin-bottom: 1rem; } .se-module-card h6 { font-size: 1.08rem; font-weight: 600; color: var(--se-ink); margin: 0 0 0.4rem 0; line-height: 1.35; } .se-module-card p { font-size: 0.9rem; color: var(--se-ink-soft); margin: 0 0 0.9rem 0; line-height: 1.55; } .se-module-card .se-mod-arrow { color: var(--se-brand); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 0.5rem; transition: gap 0.25s ease; } .se-module-card:hover .se-mod-arrow { gap: 0.8rem; } /* ============================================================ MOBILE GLOBAL TWEAKS ============================================================ */ @media (max-width: 767px) { .se-page { font-size: 1.08rem; } .se-page p { font-size: 1.1rem; } .se-page .lead-intro { font-size: 1.2rem; } .se-page section { padding-top: 4rem; padding-bottom: 4rem; } .se-kicker { font-size: 0.9rem; gap: 0.7rem; margin-bottom: 1rem; } .se-kicker::before { width: 28px; } .se-section-head { margin-bottom: 2rem; } .se-hero-badge { font-size: 0.82rem; padding: 0.45rem 0.95rem; } .se-btn-primary, .se-btn-outline { padding: 0.85rem 1.6rem; font-size: 0.98rem; } }