/* ===================================================================== ORIENTAL ACADEMY — DESIGN SYSTEM Shared across every page. Home page is the reference implementation. --------------------------------------------------------------------- Voice: a respected, established, WELCOMING school a Jammu parent trusts. Premium in quality, warm in mood — heritage + human, never luxury-cold. --------------------------------------------------------------------- Brand locks: - Navy #1B2A4A (primary) · Deep Navy #16243F · Blue #223A66 - Gold #C9A84C (accent, SPARINGLY) · Dark Gold #B08D3A - Warm Paper #FBF8F1 / Off-White #F5F0E8 · White · Ink #1c1c1c - Playfair Display (headlines) · Inter (body/UI) · Noto Devanagari/Nastaliq - Gold pairs with NAVY for text. Never gold text on a light background. ===================================================================== */ /* ===== Self-hosted typography — heritage identity (Spectral · Tiro Devanagari Hindi · Gulzar) ===== */ @font-face{font-family:"Spectral";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/spectral-400.woff2") format("woff2")} @font-face{font-family:"Spectral";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/spectral-500.woff2") format("woff2")} @font-face{font-family:"Spectral";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/spectral-600.woff2") format("woff2")} @font-face{font-family:"Spectral";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/spectral-700.woff2") format("woff2")} @font-face{font-family:"Spectral";font-style:italic;font-weight:600;font-display:swap;src:url("fonts/spectral-600-italic.woff2") format("woff2")} @font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/inter-400.woff2") format("woff2")} @font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/inter-500.woff2") format("woff2")} @font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/inter-600.woff2") format("woff2")} @font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/inter-700.woff2") format("woff2")} @font-face{font-family:"Source Serif 4";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/sourceserif-400.woff2") format("woff2")} @font-face{font-family:"Source Serif 4";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/sourceserif-600.woff2") format("woff2")} @font-face{font-family:"Source Serif 4";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/sourceserif-400-italic.woff2") format("woff2")} @font-face{font-family:"Tiro Devanagari Hindi";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/tiro-deva-400.woff2") format("woff2")} @font-face{font-family:"Tiro Devanagari Hindi";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/tiro-deva-400-italic.woff2") format("woff2")} @font-face{font-family:"Gulzar";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/gulzar-400.woff2") format("woff2")} :root{ /* — Typography (self-hosted heritage identity) — */ --font-display:"Spectral", Georgia, "Times New Roman", serif; --font-prose:"Source Serif 4", Georgia, serif; --font-ui:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-body:var(--font-ui); --font-deva:"Tiro Devanagari Hindi", "Noto Sans Devanagari", serif; --font-urdu:"Gulzar", "Noto Nastaliq Urdu", serif; /* — Brand palette — */ --navy: #1B2A4A; --navy-deep: #16243F; --navy-ink: #0E1726; /* near-black navy — gradient foot / light-field floor */ --blue: #223A66; --gold: #C9A84C; --gold-dark: #886715; --focus-ring: var(--gold-dark); /* focus outline: AA-safe on light grounds; overridden on dark components below */ /* gold TEXT on light grounds — darkened for WCAG-AA (was #B08D3A = 2.95:1; now ~4.9:1) */ --gold-light: #E6C868; --gold-deep: #A9842F; /* Metallic gold gradients — give gold dimension instead of flat mustard */ --gold-grad: linear-gradient(180deg, #E6C868 0%, #C9A84C 52%, #A9842F 100%); --gold-grad-h: linear-gradient(180deg, #EED27E 0%, #CDAB50 52%, #976F25 100%); --paper: #FBF8F1; /* warm paper — primary surface */ --offwhite: #F5F0E8; /* alternate warm surface */ --white: #FFFFFF; --ink: #1c1c1c; /* — Derived text tones (warm, never pure black) — */ --text: #2A3142; /* body text on light */ --text-soft: #5A6172; /* secondary text on light */ --text-muted: #726D5A; /* tertiary / labels on light — darkened for WCAG-AA (was #8A8576 = 3.48:1; now ~4.9:1) */ --on-navy: #F3EFE6; /* body text on navy */ --on-navy-soft:#C8D0DE; /* secondary text on navy (AA on navy) */ /* — Lines / borders — */ --rule: #E4DCCB; /* hairline on paper */ --rule-strong: #D6CBB3; --rule-navy: rgba(255,255,255,.14); /* — Spacing scale (8px base) — */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; /* — Radii (restrained — dignified, not bubbly) — */ --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-pill: 999px; /* — Shadows (soft, warm-tinted) — */ --shadow-sm: 0 1px 2px rgba(22,36,63,.06), 0 2px 6px rgba(22,36,63,.05); --shadow-md: 0 6px 18px -8px rgba(22,36,63,.18), 0 2px 6px rgba(22,36,63,.06); --shadow-lg: 0 24px 48px -22px rgba(22,36,63,.30), 0 8px 18px -10px rgba(22,36,63,.12); --maxw: 1200px; --header-h: 84px; } *,*::before,*::after{ box-sizing:border-box; } /* NOTE: do NOT put overflow-x:clip/hidden on — it breaks position:sticky (the About gate scroll-scrub stops pinning → a huge empty gap). The horizontal- overflow guard lives on below (clip, which is sticky-safe) instead. */ html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } } body{ margin:0; font-family:var(--font-body); background:var(--paper); color:var(--text); font-size:17px; line-height:1.65; font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip; /* clip, NOT hidden: `hidden` coerces overflow-y→auto, making body a scroll container that breaks position:sticky (the About gate scrub). `clip` contains horizontal overflow without that side effect. The actual gutter source is also clipped at .bg-navy below. */ } /* height:auto is REQUIRED here: the HTML width/height attributes map to CSS as presentational hints, so without it a constrained image keeps its literal pixel height and stretches vertically. Scoped rules (e.g. .fc-media img{height:100%}) still win on specificity. */ img{ display:block; max-width:100%; height:auto; } figure{ margin:0; } a{ color:inherit; } ::selection{ background:var(--navy); color:var(--paper); } /* ---------- Typography primitives ---------- */ .serif{ font-family:var(--font-display); } h1,h2,h3,h4{ font-family:var(--font-display); color:var(--navy-deep); font-weight:600; line-height:1.1; letter-spacing:-0.01em; margin:0; } h1{ font-weight:700; } p{ margin:0; } .devanagari{ font-family:var(--font-deva); } .nastaliq{ font-family:var(--font-urdu); line-height:2.1; } /* Eyebrow / kicker label — Inter, uppercase, tracked. Gold ONLY on navy. */ .kicker{ font-family:var(--font-ui); font-size:12.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-dark); display:inline-flex; align-items:center; gap:10px; } .kicker::before{ content:""; width:26px; height:2px; background:var(--gold); display:inline-block; } .kicker.center::before{ display:none; } .on-navy .kicker, .kicker.on-navy{ color:var(--gold); } /* ---------- Layout helpers ---------- */ .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; } .wrap-narrow{ max-width:820px; margin:0 auto; padding:0 28px; } .section{ padding:clamp(64px,9vw,112px) 0; } .section-tight{ padding:clamp(48px,6vw,72px) 0; } /* §5D — a barely-perceptible paper tooth so the ivory grounds read as warm paper, not a flat fill */ .bg-paper, .bg-offwhite{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.04'/%3E%3C/svg%3E"); } .bg-paper{ background-color:var(--paper); } .bg-offwhite{ background-color:var(--offwhite); } /* Heritage zone — warm "aged paper" surfaces on the PAST-TENSE pages (About, Legacy, Moments, Through the Years, Our Founder); present/conversion pages keep the crisp paper. Council rule: the surface matches the tense of the content. Slightly stronger grain here for an aged feel. */ /* --gold-dark and --text-muted were tuned to ~4.9:1 against the DEFAULT #FBF8F1 surface. This zone darkens the ground, which drops them to ~4.0-4.3:1 — under AA. Retune both here so the heritage pages keep the same contrast promise as the rest of the site. */ body[data-zone="heritage"]{ --paper:#F1E9D5; --offwhite:#ECE2CB; --gold-dark:#7C5E13; /* 4.66:1 on #ECE2CB */ --text-muted:#6A6553; /* 4.60:1 on #ECE2CB */ } body[data-zone="heritage"] .bg-paper, body[data-zone="heritage"] .bg-offwhite{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='gh'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23gh)' opacity='0.06'/%3E%3C/svg%3E"); } .bg-white{ background:var(--white); } /* §5A navy depth: vertical gradient to near-Ink at the foot + a soft foot vignette so the section reads as a lit hall, not a flat slab. The single off-centre gold light-field stays the job of the .lit-left/.lit-right modifiers. §5B: one faint monogram watermark bleeding off the lower-right edge. */ .bg-navy{ background: radial-gradient(120% 75% at 50% 100%, rgba(11,18,38,.55), transparent 60%), linear-gradient(180deg, var(--navy) 0%, var(--navy) 42%, var(--navy-ink) 100%); color:var(--on-navy); position:relative; overflow-x:clip; } /* clip contains the corner watermark below so it can't bleed past the right edge and expand the mobile viewport (the "white gutter"). overflow-x:clip (not hidden) → no scroll container, no sticky/scrub fallout. */ .bg-navy::after{ content:""; position:absolute; right:-90px; bottom:-70px; width:460px; height:460px; z-index:0; background:url("oa-monogram-gold.svg") right bottom/contain no-repeat; opacity:.05; pointer-events:none; } .bg-navy > *{ position:relative; z-index:1; } .bg-navy.section{ border-top:1px solid rgba(201,168,76,.42); } /* gold thread on every navy anchor */ .bg-navy h1,.bg-navy h2,.bg-navy h3,.bg-navy h4{ color:var(--white); } .bg-navy-deep{ background:var(--navy-deep); color:var(--on-navy); } .bg-navy-deep h1,.bg-navy-deep h2,.bg-navy-deep h3,.bg-navy-deep h4{ color:var(--white); } .bg-navy-deep .lede{ color:var(--on-navy-soft); } /* --- Make ANY section safely retintable to full navy (brand anchors, §A) --- */ .bg-navy .kicker{ color:var(--gold); } .bg-navy .kicker::before{ background:var(--gold); } .bg-navy .lede,.bg-navy .section-head .lede{ color:var(--on-navy-soft); } .bg-navy .prose p{ color:var(--on-navy-soft); } .bg-navy .prose p.lead{ color:var(--white); } .bg-navy .prose strong{ color:var(--white); } .bg-navy .note-quote{ color:var(--white); } .bg-navy .note-body p{ color:var(--on-navy-soft); } .bg-navy .note-body p strong{ color:var(--white); } .bg-navy .note-sign{ border-top-color:var(--rule-navy); } .bg-navy .note-sign .nm{ color:var(--white); } .bg-navy .note-sign .role{ color:var(--on-navy-soft); } .bg-navy .note-figure img{ filter:grayscale(.12); } .bg-navy .tlink{ color:var(--white); } .bg-navy .devanagari{ color:var(--gold-glow,#D8BE73); } .bg-navy .topper-card .tp-name{ color:var(--white); } .bg-navy .topper-card .tp-pos{ color:var(--gold); } /* WCAG-AA: gold small-cap labels keep --gold on navy (gold-dark would fail there) */ .bg-navy .feature-card .fc-kicker, .bg-navy .feature-card .fc-more .arrow{ color:var(--gold); } /* --- Crest watermark: the real detailed crest as a robust (§A) --- */ .has-crest{ position:relative; overflow:hidden; } .has-crest .wrap{ position:relative; z-index:1; } .crest-watermark{ position:absolute; z-index:0; pointer-events:none; user-select:none; right:-60px; top:50%; transform:translateY(-50%); width:min(620px,56%); height:auto; opacity:.08; } .hero .crest-watermark{ opacity:.05; right:-20px; width:min(520px,50%); } @media(max-width:760px){ .crest-watermark{ right:-26%; opacity:.06; width:92%; } .hero .crest-watermark{ opacity:.045; } } /* --- Official heritage seal (About page only — content, not chrome) --- */ .official-seal{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:clamp(26px,3.5vw,40px); } /* Premium embossed medallion — ivory disc, engraved gold rim, soft depth */ .seal-stage{ position:relative; display:grid; place-items:center; width:clamp(290px,34vw,392px); aspect-ratio:1/1; border-radius:50%; background:radial-gradient(circle at 50% 34%, #ffffff 0%, #f6efe3 62%, #ece1cd 100%); box-shadow: 0 28px 56px -22px rgba(22,36,63,.40), 0 8px 20px -10px rgba(22,36,63,.20), inset 0 2px 5px rgba(255,255,255,.95), inset 0 0 0 2px var(--gold), inset 0 0 0 4px rgba(255,255,255,.7), inset 0 0 0 5.5px rgba(176,141,58,.55); } .seal-stage::before{ content:""; position:absolute; inset:14px; border-radius:50%; border:1px solid rgba(201,168,76,.30); pointer-events:none; } .seal-stage::after{ content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none; background:radial-gradient(circle at 50% 18%, rgba(255,255,255,.5), transparent 42%); } .official-seal .seal-img{ position:relative; width:63%; height:auto; filter:drop-shadow(0 8px 16px rgba(22,36,63,.22)); } .official-seal .seal-copy{ max-width:60ch; } .official-seal .seal-copy .kicker{ margin-bottom:14px; white-space:nowrap; } .official-seal .seal-copy h3{ font-size:clamp(24px,3vw,34px); margin-bottom:14px; } .official-seal .seal-copy p{ color:var(--text-soft); font-size:clamp(16px,1.5vw,18px); line-height:1.7; } /* --- White cards keep their dark headings on navy anchors (fix §A bug) --- */ .bg-navy .feature-card h3, .bg-navy .step h3, .bg-navy .facility .fac-cap h3, .bg-navy .form-card h3, .bg-navy .future-slot h3, .bg-navy .rt-stat .l{ color:var(--navy-deep); } .section-head{ max-width:760px; margin:0 0 clamp(36px,5vw,56px); } .section-head.center{ margin-left:auto; margin-right:auto; text-align:center; } .section-head .kicker{ margin-bottom:18px; } .section-head h2{ font-size:clamp(30px,4.4vw,46px); margin:0 0 16px; } .section-head .lede{ font-size:clamp(17px,1.5vw,19px); color:var(--text-soft); line-height:1.6; max-width:60ch; } .section-head.center .lede{ margin-inline:auto; } /* Standalone lede — the ONE intro-copy scale, usable outside .section-head */ .lede{ font-size:clamp(17px,1.5vw,19px); color:var(--text-soft); line-height:1.65; max-width:60ch; } .lede.sm{ font-size:16px; } /* Secondary heading scales — replace ad-hoc inline clamps */ .prose h2{ font-size:clamp(26px,3.4vw,38px); margin:14px 0 18px; } .h2-feature{ font-size:clamp(28px,4vw,42px); margin-top:16px; } /* Editorial serif body — story prose only (About story, founder/principal notes, Legacy intro). Never on UI copy, cards or forms. */ .prose-serif p{ font-family:var(--font-prose); font-size:18px; line-height:1.78; } .prose-serif p.lead{ font-family:var(--font-display); font-size:clamp(20px,2.2vw,26px); line-height:1.45; } .note-body.prose-serif p, .prose-serif.note-body p{ font-family:var(--font-prose); font-size:17px; line-height:1.75; } /* Thin gold rule used sparingly as an accent divider */ .gold-rule{ width:54px; height:3px; background:var(--gold); border-radius:2px; } /* ===================================================================== BUTTONS - Primary : solid navy, white text - Accent : solid gold, NAVY text (the approved gold pairing) — key CTAs - Ghost : navy outline on light / light outline on navy ===================================================================== */ .btn{ --btn-bg:var(--navy); --btn-fg:var(--white); --btn-bd:var(--navy); display:inline-flex; align-items:center; gap:10px; font-family:var(--font-ui); font-size:15px; font-weight:600; letter-spacing:.01em; line-height:1; padding:15px 26px; min-height:48px; border-radius:var(--r-sm); background:var(--btn-bg); color:var(--btn-fg); border:1.5px solid var(--btn-bd); text-decoration:none; cursor:pointer; white-space:nowrap; transition:background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease, box-shadow .22s ease; } .btn[hidden]{ display:none; } .btn .arrow{ transition:transform .22s ease; } .btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); } .btn:hover .arrow{ transform:translateX(4px); } .btn:focus-visible{ outline:3px solid var(--gold); box-shadow:0 0 0 6px rgba(11,18,32,.55); outline-offset:3px; } .btn:disabled{ opacity:.65; cursor:wait; transform:none; box-shadow:none; } .btn:hover{ background:var(--navy-deep); border-color:var(--navy-deep); } .btn.accent{ background:var(--gold-grad); color:var(--navy-deep); border-color:var(--gold-deep); font-weight:700; } .btn.accent:hover{ background:var(--gold-grad-h); border-color:var(--gold-deep); color:var(--navy-deep); } .btn.ghost{ --btn-bg:transparent; --btn-fg:var(--navy); --btn-bd:var(--rule-strong); } .btn.ghost:hover{ background:var(--navy); color:var(--white); border-color:var(--navy); } .on-navy .btn.ghost, .btn.ghost.on-navy{ --btn-fg:var(--white); --btn-bd:rgba(255,255,255,.4); } .on-navy .btn.ghost:hover, .btn.ghost.on-navy:hover{ background:var(--white); color:var(--navy-deep); border-color:var(--navy-deep); } /* Glass — frosted secondary for DARK / PHOTO surfaces only (never the gold primary, never light backgrounds). Solid navy fallback where blur is absent. */ .btn.glass{ --btn-bg:rgba(255,255,255,.13); --btn-fg:var(--white); --btn-bd:rgba(255,255,255,.36); -webkit-backdrop-filter:blur(12px) saturate(1.25); backdrop-filter:blur(12px) saturate(1.25); box-shadow:inset 0 1px 0 rgba(255,255,255,.24), 0 8px 24px rgba(0,0,0,.22); } .btn.glass:hover{ background:rgba(255,255,255,.22); color:var(--white); border-color:rgba(255,255,255,.55); } @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .btn.glass{ --btn-bg:rgba(28,42,74,.88); } } .btn.sm{ padding:11px 18px; min-height:44px; font-size:14px; } /* Text link with animated gold underline */ .tlink{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:15px; color:var(--navy); text-decoration:none; position:relative; } .tlink::after{ content:""; position:absolute; left:0; bottom:-3px; height:2px; width:100%; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .25s ease; } .tlink:hover::after{ transform:scaleX(1); } .tlink:hover .arrow{ transform:translateX(4px); } .tlink .arrow{ transition:transform .22s ease; } .tlink:focus-visible{ outline:3px solid var(--gold); box-shadow:0 0 0 6px rgba(11,18,32,.55); outline-offset:3px; border-radius:2px; } /* ===================================================================== ANNOUNCEMENT RIBBON — top-of-site, brand-forward (gold → navy → paper) ===================================================================== */ .oa-announce{ background:var(--navy-deep); color:var(--on-navy); border-bottom:1px solid rgba(201,168,76,.32); transition:opacity .4s ease, transform .4s cubic-bezier(.22,1,.36,1); position:relative; overflow:hidden; } .oa-announce .ann-emblem{ height:26px; width:auto; display:inline-block; vertical-align:middle; flex:none; } .oa-announce .wrap{ display:flex; gap:10px 16px; align-items:center; justify-content:center; min-height:42px; padding-block:9px; text-align:center; flex-wrap:wrap; } .oa-announce .ann-star{ color:var(--gold); } .oa-announce span{ font-size:13px; font-weight:500; letter-spacing:.01em; color:var(--on-navy); } .oa-announce strong{ font-weight:700; color:#fff; } .oa-announce a{ font-size:inherit; color:var(--gold); font-weight:700; text-decoration:none; white-space:nowrap; display:inline-flex; align-items:center; gap:6px; border-bottom:1.5px solid rgba(201,168,76,.5); } .oa-announce a:hover{ border-bottom-color:var(--gold); } @media(max-width:560px){ .oa-announce span{ font-size:12px; } .oa-announce .wrap{ gap:6px 14px; } } /* The ribbon rotates between two messages of DIFFERENT LENGTH every 6 seconds. Left to lay out freely, the longer one wraps to an extra line on a phone and the strip grows 80px -> 119px, so the entire page below it — hero, both CTAs, everything — jumps 39px twice a minute, and the second hero CTA slides down behind the fixed Enquire/WhatsApp/Call bar. (It is also why a measurement taken before the first rotation and a screenshot taken after it disagreed: the page genuinely has two different layouts depending on the second you look at it.) Pin the height so a rotation is a crossfade, never a reflow. */ @media(max-width:760px){ .oa-announce .wrap{ height:60px; min-height:0; padding-block:0; flex-wrap:nowrap; gap:0 10px; } .oa-announce span{ min-width:0; text-align:left; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } .oa-announce a{ flex:none; } .oa-announce .ann-emblem{ height:22px; } .oa-announce .ann-star{ flex:none; } } /* a slow gold sheen sweeps the ribbon — draws the eye without shouting */ .oa-announce::after{ content:""; position:absolute; top:0; bottom:0; left:0; width:55%; pointer-events:none; z-index:1; transform:translateX(-180%) skewX(-20deg); background:linear-gradient(100deg, transparent 34%, rgba(255,231,165,.30) 50%, transparent 66%); animation:ann-shimmer 3.5s ease-in-out infinite; } @keyframes ann-shimmer{ 0%{ transform:translateX(-180%) skewX(-20deg); } 55%,100%{ transform:translateX(320%) skewX(-20deg); } } @media(prefers-reduced-motion:reduce){ .oa-announce::after{ display:none; } } /* ===================================================================== HERITAGE STRIP — slim top bar ===================================================================== */ .heritage-strip{ background:var(--navy-deep); color:var(--on-navy-soft); border-bottom:1px solid rgba(201,168,76,.35); } .heritage-strip .wrap{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; min-height:38px; padding-block:8px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:500; } .heritage-strip strong{ color:var(--gold); font-weight:600; } .heritage-strip .sep{ color:var(--gold); opacity:.7; } /* one fact = one unbreakable flex item, so the strip wraps BETWEEN facts, never inside one */ .heritage-strip .hs-i{ white-space:nowrap; } @media(max-width:560px){ /* Four facts cannot sit on one phone line, so the strip always wraps — and letting flex decide where gave first a dangling ★ at the end of line one, then a lone orphan on line two. A 2x2 grid fixes the break instead of hoping for it: two facts per row at every phone width. The stars go, since a grid cell boundary already separates them. */ /* Left, not centred: on Home this band sits directly under the hero copy column, and a centred grid there introduces a second alignment axis against the h1, lede and actions that all start at the 28px gutter. One shared edge for the whole navy block. */ .heritage-strip .wrap{ display:grid; grid-template-columns:repeat(2,auto); justify-content:start; justify-items:start; gap:7px 22px; font-size:10px; letter-spacing:.12em; } .heritage-strip .sep{ display:none; } } /* The facts are nowrap, so the two columns have a hard floor: the widest pair plus the gap is ~299px, and a 320px viewport only offers 264px between the gutters. Below that the grid has to drop to one column or it pushes the page 3px wider than the viewport. */ @media(max-width:359px){ .heritage-strip .wrap{ grid-template-columns:1fr; } } /* ===================================================================== HEADER / NAV — sticky, warm, parent-facing ===================================================================== */ .site-header{ position:sticky; top:0; z-index:60; background:rgba(14,23,38,.98); /* no backdrop-filter on this sticky bar — iOS Safari mis-composites fixed/sticky backdrop-filter layers as a stray black rectangle; the bar is opaque anyway. */ border-bottom:1px solid var(--gold); box-shadow:0 2px 10px -4px rgba(0,0,0,.4); transition:box-shadow .25s ease, background .25s ease; } .site-header.scrolled{ box-shadow:0 8px 26px -10px rgba(0,0,0,.6); background:rgba(14,23,38,.99); } .header-inner{ max-width:var(--maxw); margin:0 auto; padding:12px 28px; display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:var(--header-h); } .brand{ display:flex; align-items:center; gap:14px; text-decoration:none; color:inherit; } .brand > img{ height:54px; width:auto; object-fit:contain; flex:none; } .brand-text{ display:flex; flex-direction:column; line-height:1.05; } .brand-name{ font-family:var(--font-display); font-weight:700; font-size:21px; color:var(--white); letter-spacing:-0.01em; } .brand-sub{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); font-weight:600; margin-top:3px; } .main-nav{ display:flex; align-items:center; gap:22px; } .main-nav a{ font-size:15px; font-weight:500; color:var(--on-navy); text-decoration:none; position:relative; padding:4px 0; transition:color .2s ease; white-space:nowrap; } .main-nav a::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--gold); transform:scaleX(0); transform-origin:center; transition:transform .22s ease; } .main-nav a:hover{ color:var(--white); } .main-nav a:hover::after, .main-nav a[aria-current="page"]::after{ transform:scaleX(1); } .main-nav a[aria-current="page"]{ color:var(--white); font-weight:600; } .header-cta{ display:flex; align-items:center; gap:14px; } /* ===================================================================== TOP BAR + FULL NAME LOCKUP (owner, 24 Sep 2026: "header should look like the design") --------------------------------------------------------------------- A slim navy utility bar above the sticky header on every page: the 66-years line in the middle, the address, the admissions number and Instagram / Facebook / YouTube on the right. It scrolls away; only the header below it sticks. The school name reads as the full three-line lockup: ORIENTAL ACADEMY / Senior Secondary School / Light to Enlighten. The header runs wider than the 1200px content column so the name never wraps beside the nav. ===================================================================== */ :root{ --tb-h:39px; } @media(max-width:760px){ :root{ --tb-h:41px; } } .oa-topbar{ background:var(--navy-deep); color:var(--on-navy); border-bottom:1px solid rgba(201,168,76,.3); font-family:var(--font-ui); font-size:12.5px; line-height:1.3; position:relative; z-index:61; } .tb-inner{ max-width:1360px; margin:0 auto; padding:0 28px; min-height:38px; display:flex; align-items:center; gap:10px 24px; } .tb-msg{ margin:0 auto; display:flex; align-items:center; gap:10px; min-width:0; white-space:nowrap; } .tb-emblem{ height:22px; width:auto; flex:none; } .tb-msg strong{ color:#fff; font-weight:600; } .tb-msg a{ color:var(--gold); font-weight:600; text-decoration:none; border-bottom:1px solid rgba(201,168,76,.5); padding:4px 0 1px; } .tb-msg a:hover{ border-bottom-color:var(--gold); } .tb-util{ list-style:none; margin:0; padding:0; display:flex; align-items:center; flex:none; } .tb-util > li{ display:flex; align-items:center; padding:0 16px; } .tb-util > li + li{ border-left:1px solid rgba(255,255,255,.16); } .tb-util > li:last-child{ padding-right:0; } .tb-util a{ display:inline-flex; align-items:center; gap:7px; color:var(--on-navy-soft); text-decoration:none; white-space:nowrap; transition:color .2s ease; } .tb-util a:hover{ color:#fff; } .tb-util svg{ width:14px; height:14px; flex:none; color:var(--gold); } .tb-soc{ gap:4px; } .tb-soc a{ width:30px; height:30px; justify-content:center; border-radius:50%; } .tb-soc a svg{ width:16px; height:16px; color:currentColor; } .tb-soc a:hover{ background:rgba(255,255,255,.08); } .oa-topbar a:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; border-radius:3px; } @media(max-width:1160px){ .tb-addr{ display:none !important; } } @media(max-width:760px){ .tb-inner{ padding:0 14px 0 18px; min-height:40px; gap:8px; } .tb-msg{ margin:0; gap:8px; font-size:12px; } .tb-yrs, .tb-tel{ display:none !important; } .tb-util > li{ padding:0; } .tb-util > li + li{ border-left:0; } .tb-util{ margin-left:auto; } } @media(max-width:520px){ .tb-cel{ display:none; } } @media(max-width:380px){ .tb-emblem{ display:none; } .tb-msg{ font-size:11.5px; } .tb-soc a{ width:28px; } } @media(max-width:350px){ .tb-msg a{ display:none; } } .header-inner{ max-width:1360px; } .brand-text{ align-items:center; line-height:1; } .brand-name{ font-size:23px; text-transform:uppercase; letter-spacing:.012em; white-space:nowrap; line-height:1.05; } .brand-sub{ margin-top:5px; font-size:10px; letter-spacing:.21em; font-weight:500; color:var(--on-navy-soft); white-space:nowrap; } .brand-motto{ display:flex; align-items:center; gap:7px; margin-top:5px; font:600 9px/1 var(--font-ui); letter-spacing:.26em; text-transform:uppercase; color:var(--gold); white-space:nowrap; } .brand-motto::before, .brand-motto::after{ content:""; width:16px; height:1px; background:currentColor; opacity:.55; } body.chrome-light .brand-sub{ color:#3A4763; } body.chrome-light .brand-motto{ color:var(--gold-dark); } @media(min-width:1161px) and (max-width:1320px){ .brand-name{ font-size:20px; } .brand-sub{ font-size:9px; letter-spacing:.18em; } .brand-motto{ font-size:8.5px; letter-spacing:.22em; } .main-nav{ gap:16px; } .main-nav a, .main-nav .nav-dd > summary{ font-size:14.5px; } .header-cta .btn.sm{ padding:10px 14px; } } @media(min-width:1161px) and (max-width:1250px){ /* the last few widths before the nav folds into the menu button */ .header-inner{ gap:16px; padding-left:20px; padding-right:20px; } .brand{ gap:10px; } .brand > img{ height:48px; } .brand-name{ font-size:18px; } .brand-sub{ font-size:8.5px; letter-spacing:.15em; } .brand-motto{ font-size:8px; letter-spacing:.2em; } .main-nav{ gap:13px; } .main-nav a, .main-nav .nav-dd > summary{ font-size:14px; } } /* Mobile nav toggle */ .nav-toggle{ display:none; flex-direction:column; gap:5px; justify-content:center; width:46px; height:46px; border:1.5px solid rgba(255,255,255,.32); border-radius:var(--r-sm); background:transparent; cursor:pointer; padding:0; } .nav-toggle span{ width:20px; height:2px; background:var(--white); margin:0 auto; transition:.25s; } .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; } .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } .nav-toggle:focus-visible{ outline:3px solid var(--gold); box-shadow:0 0 0 6px rgba(11,18,32,.55); outline-offset:2px; } /* Header breakpoint is 1100, not 980: between 981 and ~1150 the full horizontal nav does not fit beside the wordmark, so 'Oriental Academy' wrapped to two lines and 'Home' printed on top of 'Academy' — visible on every page at iPad width. The four header blocks and their min-width:1101px desktop counterpart must move together. */ @media(max-width:1160px){ .main-nav{ position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; background:var(--navy-deep); border-bottom:1px solid rgba(201,168,76,.3); box-shadow:var(--shadow-md); max-height:0; overflow:hidden; transition:max-height .3s ease; } .main-nav.open{ max-height:70vh; } .main-nav a{ padding:15px 28px; border-top:1px solid var(--rule-navy); font-size:16px; } .main-nav a::after{ display:none; } .nav-toggle{ display:flex; } .header-cta .btn:not(.nav-toggle){ display:none; } /* drawer items settle in with a soft cascade when the menu opens (JS-gated; instant close) */ .oa-js .main-nav > *{ opacity:0; transform:translateY(-7px); transition:opacity .26s ease, transform .26s ease; } .oa-js .main-nav.open > *{ opacity:1; transform:none; } .oa-js .main-nav.open > *:nth-child(2){ transition-delay:.03s; } .oa-js .main-nav.open > *:nth-child(3){ transition-delay:.06s; } .oa-js .main-nav.open > *:nth-child(4){ transition-delay:.09s; } .oa-js .main-nav.open > *:nth-child(5){ transition-delay:.12s; } .oa-js .main-nav.open > *:nth-child(6){ transition-delay:.15s; } .oa-js .main-nav.open > *:nth-child(7){ transition-delay:.18s; } .oa-js .main-nav.open > *:nth-child(n+8){ transition-delay:.21s; } } /* ============================================================ HEADER DROPDOWNS — native
menus (no custom mega-menu JS). Desktop: click-to-open paper panel; Mobile: inline accordion in the hamburger. Panel is a self-contained paper card so it reads under the navy OR light header. ============================================================ */ .main-nav .nav-dd{ position:relative; } .main-nav .nav-dd > summary{ list-style:none; cursor:pointer; white-space:nowrap; display:inline-flex; align-items:center; gap:7px; font-size:15px; font-weight:500; color:var(--on-navy); padding:4px 0; transition:color .2s ease; -webkit-tap-highlight-color:transparent; } .main-nav .nav-dd > summary::-webkit-details-marker{ display:none; } .main-nav .nav-dd > summary::after{ content:""; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform .22s ease; opacity:.75; } .main-nav .nav-dd[open] > summary::after{ transform:rotate(-135deg) translateY(1px); } .main-nav .nav-dd > summary:hover{ color:var(--white); } .main-nav .nav-dd > summary:focus-visible{ outline:3px solid var(--gold); box-shadow:0 0 0 6px rgba(11,18,32,.55); outline-offset:3px; border-radius:3px; } .main-nav .nav-dd > summary[data-current]{ color:var(--white); font-weight:600; } body.chrome-light .main-nav .nav-dd > summary{ color:#33415C; } body.chrome-light .main-nav .nav-dd > summary:hover, body.chrome-light .main-nav .nav-dd > summary[data-current]{ color:var(--navy-deep); } .main-nav .nav-dd-panel{ position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%); min-width:250px; max-width:calc(100vw - 24px); background:var(--paper); border:1px solid var(--rule-strong); border-radius:var(--r-md); box-shadow:var(--shadow-lg); padding:8px; z-index:70; display:flex; flex-direction:column; } .main-nav .nav-dd-panel::before{ content:""; position:absolute; top:-1px; left:16px; right:16px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--gold-dark),var(--gold) 50%,var(--gold-dark)); } .main-nav .nav-dd-panel a{ display:flex; align-items:center; gap:4px; padding:11px 14px; min-height:44px; border-radius:var(--r-sm); font-size:14.5px; font-weight:500; color:var(--navy-deep); white-space:nowrap; text-decoration:none; transition:background .15s ease, color .15s ease; } .main-nav .nav-dd-panel a::after{ display:none; } .main-nav .nav-dd-panel a:hover, .main-nav .nav-dd-panel a:focus-visible{ background:var(--offwhite); color:var(--navy-deep); outline:none; } .main-nav .nav-dd-panel a[aria-current="page"]{ background:var(--offwhite); color:var(--navy-deep); font-weight:700; } .main-nav .nav-dd-ext{ color:var(--gold-dark); font-size:11px; } @media(max-width:1160px){ /* inline accordion inside the open hamburger menu — display:flex (NOT the desktop inline-flex) so the row stretches full width: the divider runs edge to edge and the chevron sits flush right */ .main-nav .nav-dd > summary{ display:flex; width:100%; padding:15px 28px; font-size:16px; justify-content:space-between; border-top:1px solid var(--rule-navy); color:var(--on-navy); } body.chrome-light .main-nav .nav-dd > summary{ border-top:1px solid var(--rule); color:#33415C; } .main-nav .nav-dd-panel{ position:static; transform:none; min-width:0; max-width:none; background:transparent; border:0; box-shadow:none; border-radius:0; padding:0; } .main-nav .nav-dd-panel::before{ display:none; } .main-nav .nav-dd-panel a{ padding:13px 28px 13px 46px; min-height:0; border-radius:0; border-top:1px solid var(--rule-navy); color:var(--on-navy); font-size:15px; } body.chrome-light .main-nav .nav-dd-panel a{ border-top:1px solid var(--rule); color:#33415C; } } @media(max-width:560px){ .brand img{ width:48px; height:48px; } .brand-name{ font-size:18px; } .brand-sub{ font-size:8.5px; letter-spacing:.17em; margin-top:4px; } .brand-motto{ display:none; } .header-inner{ padding:10px 18px; } } @media(max-width:374px){ .header-inner{ gap:10px; padding-left:14px; padding-right:14px; } .brand{ gap:8px; } .brand img{ width:40px; height:40px; } .brand-name{ font-size:16px; } .brand-sub{ font-size:7.5px; letter-spacing:.14em; } } @media(max-width:340px){ .brand-name{ font-size:15px; } } /* ===================================================================== HERO ===================================================================== */ .hero{ background:linear-gradient(180deg,var(--paper) 0%, var(--offwhite) 100%); position:relative; overflow:hidden; } .hero-inner{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,72px); align-items:center; padding:clamp(48px,7vw,92px) 0 clamp(56px,7vw,96px); } .hero-copy{ max-width:560px; } /* Timely announcement chip */ .hero h1{ font-size:clamp(38px,5.6vw,66px); line-height:1.04; letter-spacing:-0.02em; margin:22px 0 0; color:var(--navy-deep); } .hero h1 em{ font-style:italic; font-weight:600; color:var(--blue); } .hero-lede{ font-size:clamp(17px,1.6vw,20px); color:var(--text-soft); line-height:1.6; margin:22px 0 0; max-width:48ch; } .hero-ctas{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; } .hero-trust{ display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:34px; padding-top:26px; border-top:1px solid var(--rule); } .hero-trust .ht{ display:flex; align-items:baseline; gap:8px; } .hero-trust .ht b{ font-family:var(--font-display); font-size:22px; font-weight:700; color:var(--navy-deep); } .hero-trust .ht span{ font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); font-weight:500; } /* Hero image — framed warm photo with a quiet gold hairline */ .hero-figure{ position:relative; } .hero-figure .photo-frame{ position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg); border:1px solid var(--rule-strong); } .hero-figure .photo-frame::after{ content:""; position:absolute; inset:10px; border:1px solid rgba(201,168,76,.55); border-radius:6px; pointer-events:none; } .hero-figure img{ width:100%; aspect-ratio:4/3.1; object-fit:cover; object-position:center 28%; } .hero-figure figcaption{ position:absolute; left:0; right:0; bottom:0; padding:34px 22px 16px; background:linear-gradient(0deg, rgba(22,36,63,.82), transparent); color:var(--on-navy); font-size:13px; letter-spacing:.02em; } .hero-figure figcaption .cap-year{ color:var(--gold); font-weight:600; } /* Small crest medallion overlapping the photo */ .hero-medallion{ position:absolute; top:-22px; left:-22px; width:84px; height:84px; background:var(--paper); border-radius:var(--r-pill); display:grid; place-items:center; box-shadow:var(--shadow-md); border:1px solid var(--rule); } .hero-medallion img{ width:62px; height:62px; object-fit:contain; } @media(max-width:880px){ .hero-inner{ grid-template-columns:1fr; gap:40px; padding-top:40px; } .hero-figure{ order:-1; max-width:560px; } .hero-medallion{ width:68px; height:68px; top:-16px; left:-16px; } .hero-medallion img{ width:50px; height:50px; } } @media(max-width:560px){ .hero-figure img{ aspect-ratio:4/3.4; } .hero-trust{ gap:8px 18px; } .hero-trust .ht b{ font-size:19px; } } /* ===================================================================== STAT BAND — plain trust signals on navy ===================================================================== */ .stat-band{ background:var(--navy); color:var(--on-navy); border-top:3px solid var(--gold); } .stat-grid{ display:grid; grid-template-columns:repeat(3,1fr); } @media(min-width:761px){ .stat-cell:nth-child(3n){ border-right:none; } } .stat-cell{ padding:clamp(32px,4vw,52px) 24px; text-align:center; border-right:1px solid var(--rule-navy); display:flex; flex-direction:column; gap:10px; align-items:center; } .stat-cell:last-child{ border-right:none; } .stat-num{ font-family:var(--font-display); font-weight:700; font-size:clamp(38px,5vw,58px); line-height:1; color:var(--white); letter-spacing:-0.02em; } .stat-num .plus{ color:var(--gold); } .stat-num.text{ font-size:clamp(30px,3.6vw,44px); } .stat-label{ font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--on-navy-soft); font-weight:500; } @media(max-width:760px){ .stat-grid{ grid-template-columns:repeat(2,1fr); } /* 2-col grid: kill the right border on every right-column (even) cell — the old :nth-child(2) rule left cell 4 with a spurious vertical line. Row dividers run under rows 1 & 2 (cells 1-4), never trailing under the last row. */ .stat-cell:nth-child(even){ border-right:none; } .stat-cell:nth-child(-n+4){ border-bottom:1px solid var(--rule-navy); } /* An odd number of stats leaves the last one alone in the left column with an empty cell beside it. Let it span the row and centre, and drop the divider that would trail under it. */ .stat-grid > .stat-cell:last-child:nth-child(odd){ grid-column:1 / -1; border-bottom:none; } } @media(max-width:400px){ .stat-cell{ padding-inline:12px; } .stat-label{ letter-spacing:.1em; } } /* ---- Phone: three stats in a 2-column grid always leaves the third alone. Spanning and centring it (the rule above) removed the empty cell but left a 2-then-1 shape where the last stat reads as an afterthought, with a vertical rule between the first pair and a horizontal one above the third. Three is not a grid on a 334px column — it is a list. Number column and label column, hairline between rows, aligned to the same 28px gutter as the hero and the heritage strip. Also SHORTER than the 2+1 it replaces. ---- */ @media(max-width:560px){ .stat-grid{ grid-template-columns:1fr; } .stat-cell{ flex-direction:row; align-items:baseline; gap:16px; text-align:left; padding:18px 0; border-right:0; border-bottom:1px solid var(--rule-navy); } .stat-cell:last-child{ border-bottom:0; } /* undo the span/centre hack — there is only one column now */ .stat-grid > .stat-cell:last-child:nth-child(odd){ grid-column:auto; } .stat-cell:nth-child(-n+4){ border-bottom:1px solid var(--rule-navy); } /* a fixed measure on the numeral puts every label on one shared left edge */ /* the reserve must clear the WIDEST numeral ('1,500+'), or that row alone pushes its label right and the shared label edge is lost again */ .stat-num{ font-size:34px; flex:none; min-width:8.2ch; } .stat-label{ letter-spacing:.1em; line-height:1.35; } } /* ===================================================================== FEATURE CARDS — "Why families choose us" ===================================================================== */ .card-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; } .card-grid.cols-3{ grid-template-columns:repeat(3,1fr); } .feature-card{ display:flex; flex-direction:column; background:var(--white); border:1px solid var(--rule); border-radius:var(--r-md); overflow:hidden; text-decoration:none; color:inherit; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .feature-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--rule-strong); } .feature-card:focus-visible{ outline:3px solid var(--gold); box-shadow:0 0 0 6px rgba(11,18,32,.55); outline-offset:3px; } .feature-card .fc-media{ aspect-ratio:3/2; background:var(--offwhite); overflow:hidden; position:relative; } .feature-card .fc-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; } .feature-card:hover .fc-media img{ transform:scale(1.05); } .feature-card .fc-body{ padding:22px 22px 24px; display:flex; flex-direction:column; gap:10px; flex:1; } .feature-card .fc-kicker{ font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-dark); font-weight:600; } .feature-card h3{ font-size:22px; } .feature-card p{ color:var(--text-soft); font-size:15.5px; line-height:1.55; } .feature-card .fc-more{ margin-top:auto; padding-top:8px; font-weight:600; font-size:14.5px; color:var(--navy); display:inline-flex; align-items:center; gap:8px; } .feature-card .fc-more .arrow{ transition:transform .22s ease; color:var(--gold-dark); } .feature-card:hover .fc-more .arrow{ transform:translateX(4px); } /* Photo-less card variant — premium editorial, no stock imagery */ .feature-card.plain{ position:relative; overflow:hidden; padding:34px 28px 26px; gap:0; display:flex; flex-direction:column; } .feature-card.plain::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--gold-dark),var(--gold) 50%,var(--gold-dark)); } .feature-card.plain .fc-mark{ width:56px; height:56px; border-radius:var(--r-pill); background:var(--navy); color:var(--gold); display:grid; place-items:center; flex:none; font-family:var(--font-display); font-weight:700; font-size:21px; box-shadow:inset 0 0 0 1.5px rgba(201,168,76,.55); margin-bottom:22px; } .feature-card.plain .fc-mark svg{ width:28px; height:28px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; } .feature-card.plain .fc-mark svg .fill{ fill:currentColor; stroke:none; } .feature-card.plain .fc-body{ padding:0; display:flex; flex-direction:column; flex:1; gap:0; } .feature-card.plain .fc-kicker{ margin-bottom:11px; } .feature-card.plain h3{ font-size:23px; line-height:1.16; margin:0 0 11px; color:var(--navy-deep); } .feature-card.plain p{ color:var(--text-soft); font-size:15.5px; line-height:1.62; } .feature-card.plain .fc-more{ margin-top:22px; padding-top:18px; border-top:1px solid var(--rule); font-weight:600; font-size:14.5px; color:var(--navy); display:inline-flex; align-items:center; justify-content:space-between; gap:8px; } .feature-card.plain .fc-more .arrow{ color:var(--gold-dark); } @media(max-width:980px){ .card-grid, .card-grid.cols-3{ grid-template-columns:repeat(2,1fr); } } @media(max-width:540px){ .card-grid, .card-grid.cols-3{ grid-template-columns:1fr; } } /* ===================================================================== LEGACY WALL — "Where Afghan Street Leads" (honour roll on navy) Repeatable, data-driven. All names/outcomes live in the HTML. ===================================================================== */ .legacy-statline{ display:flex; flex-wrap:wrap; gap:26px 56px; align-items:flex-start; padding-bottom:34px; margin-bottom:40px; border-bottom:1px solid rgba(201,168,76,.3); } .legacy-statline .ls{ display:flex; flex-direction:column; gap:14px; } .legacy-statline .ls b{ font-family:var(--font-display); font-weight:700; font-size:clamp(38px,5vw,54px); color:var(--gold); line-height:1; letter-spacing:-0.01em; white-space:nowrap; } .legacy-statline .ls .ls-label{ font-size:12.5px; line-height:1.3; letter-spacing:.16em; text-transform:uppercase; color:var(--on-navy-soft); font-weight:500; } .legacy-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; } .legacy-grid.cols-3{ grid-template-columns:repeat(3,1fr); } .legacy-card{ display:flex; align-items:center; gap:16px; padding:18px 20px; border-radius:var(--r-md); background:rgba(255,255,255,.045); border:1px solid rgba(201,168,76,.22); transition:transform .25s ease, border-color .25s ease, background .25s ease; } .legacy-card:hover{ transform:translateY(-4px); border-color:rgba(201,168,76,.58); background:rgba(255,255,255,.07); } .legacy-avatar{ width:62px; height:62px; border-radius:var(--r-pill); flex:none; overflow:hidden; display:grid; place-items:center; background:var(--navy-deep); color:var(--gold); border:1.5px solid rgba(201,168,76,.5); } .legacy-avatar svg{ width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; opacity:.95; } .legacy-avatar svg .fill{ fill:currentColor; stroke:none; } .legacy-card{ position:relative; overflow:hidden; } .legacy-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(var(--gold), var(--gold-dark)); opacity:.85; } .legacy-card .legacy-info{ padding-left:2px; } .legacy-avatar img{ width:100%; height:100%; object-fit:cover; } /* Wall of Fame tiering (Alumni): the verified tier (first grid) gets a fuller gold ring on its monogram. The "wall continues" tier stays at full opacity (the old .82 fade dropped its text to about 3.7:1). Restrained: a ring, not a badge. */ .legacy-grid.is-verified .legacy-avatar{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,168,76,.16); } .legacy-info{ min-width:0; } .legacy-info .lg-name{ font-family:var(--font-display); font-weight:600; font-size:17px; color:var(--white); line-height:1.18; } .legacy-info .lg-outcome{ font-size:14px; color:var(--on-navy-soft); margin-top:4px; line-height:1.4; } .legacy-info .lg-outcome .role{ color:var(--gold); font-weight:600; } .legacy-info .lg-meta{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-glow,#D8BE73); font-weight:600; margin-top:8px; } .legacy-foot{ display:flex; justify-content:center; margin-top:40px; } @media(max-width:1040px){ .legacy-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:980px){ .legacy-grid.cols-3{ grid-template-columns:repeat(2,1fr); } } /* Light-ground Legacy Wall variant (Alumni) — warm, less navy, cards pop */ .legacy-light .legacy-statline{ border-bottom-color:var(--rule-strong); } .legacy-light .legacy-statline .ls b{ color:var(--gold-dark); } .legacy-light .legacy-statline .ls .ls-label{ color:var(--text-muted); } .legacy-light .legacy-card{ background:var(--white); border:1px solid var(--rule); box-shadow:var(--shadow-sm); } .legacy-light .legacy-card:hover{ border-color:var(--gold); background:var(--white); box-shadow:var(--shadow-md); } .legacy-light .legacy-info .lg-name{ color:var(--navy-deep); } .legacy-light .legacy-info .lg-outcome{ color:var(--text-soft); } .legacy-light .legacy-info .lg-outcome .role{ color:var(--gold-dark); } .legacy-light .legacy-info .lg-meta{ color:var(--gold-dark); } .legacy-light .legacy-avatar{ background:var(--navy-deep); color:var(--gold); border-color:rgba(201,168,76,.5); } @media(max-width:560px){ .legacy-grid, .legacy-grid.cols-3{ grid-template-columns:1fr; } } /* named-alumni monogram placeholder (until real portraits are added) */ .legacy-avatar .lg-mono{ font-family:var(--font-display); font-weight:600; font-size:21px; letter-spacing:.02em; color:inherit; line-height:1; } /* Wall of Fame — text honour roll (Tier 2/3 names) */ .honour-roll{ margin-top:48px; padding-top:34px; border-top:1px solid var(--rule-strong); } .honour-roll .hr-title{ font-family:var(--font-display); font-weight:600; font-size:clamp(22px,3vw,30px); color:var(--navy-deep); text-align:center; margin:0; } .honour-roll .hr-note{ text-align:center; color:var(--text-muted); max-width:62ch; margin:10px auto 28px; font-size:14px; line-height:1.55; } .honour-roll .hr-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:26px 30px; } .honour-roll .hr-col h4{ font-family:var(--font-ui); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-dark); border-bottom:1px solid var(--rule); padding-bottom:9px; margin:0 0 13px; } .honour-roll .hr-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; } .honour-roll .hr-col li{ font-size:14px; color:var(--text-soft); line-height:1.4; } .honour-roll .hr-col li b{ color:var(--navy-deep); font-weight:600; } /* ===================================================================== RESULTS TEASER ===================================================================== */ .results-teaser{ background:var(--offwhite); } .rt-grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(36px,5vw,64px); align-items:center; } .rt-stats{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:28px 0 30px; } .rt-stat{ background:var(--white); border:1px solid var(--rule); border-radius:var(--r-md); padding:22px 22px; } .rt-stat .n{ font-family:var(--font-display); font-weight:700; font-size:clamp(32px,4vw,44px); color:var(--navy-deep); line-height:1; } .rt-stat .n .pct,.rt-stat .n .plus{ color:var(--gold-dark); } .rt-stat .l{ font-size:13px; color:var(--text-soft); margin-top:8px; line-height:1.4; } /* Faces row */ .faces{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .face{ position:relative; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--rule-strong); background:var(--navy); box-shadow:var(--shadow-sm); } .face img{ width:100%; aspect-ratio:3/3.6; object-fit:cover; object-position:center 22%; } .face .face-meta{ position:absolute; inset:auto 0 0 0; padding:24px 12px 10px; background:linear-gradient(0deg,rgba(22,36,63,.9),transparent); color:var(--white); } .face .face-name{ font-family:var(--font-display); font-weight:600; font-size:15px; line-height:1.1; } .face .face-pos{ font-size:11px; color:var(--gold); letter-spacing:.06em; margin-top:3px; } .face .face-pct{ position:absolute; top:10px; right:10px; background:var(--gold); color:var(--navy-deep); font-weight:700; font-size:12.5px; padding:3px 8px; border-radius:var(--r-sm); } @media(max-width:880px){ .rt-grid{ grid-template-columns:1fr; gap:36px; } } @media(max-width:420px){ .faces{ grid-template-columns:repeat(2,1fr); } } /* ===================================================================== PULL-QUOTE / NOTE (founder & principal) ===================================================================== */ .note{ } .note-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(36px,5vw,64px); align-items:center; } /* The two leadership notes put the portrait in DIFFERENT columns (Principal: text then figure; Vice Principal and the founder note on Home: figure then text), so the same component was rendering a 612px-wide portrait in one section and a 452px one in the next — and the taller frame, centred against only two lines of text, left a column of dead cream with the caption badge apparently floating in it. Cap the frame and push it to the outer edge instead, so every leadership portrait on the site is the same size wherever it sits in the grid. */ .note-figure{ max-width:420px; width:100%; } .note-grid > .note-figure:first-child{ justify-self:start; } .note-grid > .note-figure:last-child{ justify-self:end; } @media(max-width:840px){ .note-figure{ max-width:none; } .note-grid > .note-figure{ justify-self:stretch; } } .note-figure{ position:relative; } /* base .photo-frame — the scoped variants below still override where they apply */ .photo-frame{ position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg); border:1px solid var(--rule-strong); } .photo-frame > img, .photo-frame > picture > img{ display:block; width:100%; height:auto; } .note-figure .photo-frame{ border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg); border:1px solid var(--rule-strong); position:relative; } .note-figure .photo-frame::after{ content:""; position:absolute; inset:9px; border:1px solid rgba(201,168,76,.5); border-radius:6px; pointer-events:none; } .note-figure img{ width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 20%; filter:grayscale(.15); } /* Founder archival portrait carries a baked-in gold "Sh. Ved Parkash Chauhan" caption at the bottom-right — frame it at its true 714:985 ratio so the whole portrait + caption show uncropped. */ .note-figure img.archival-img{ aspect-ratio:auto; height:auto; object-fit:fill; } .note-figure .note-badge{ position:absolute; bottom:-14px; right:18px; background:var(--navy); color:var(--gold); font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; padding:8px 16px; border-radius:var(--r-sm); box-shadow:var(--shadow-md); } .note-quote{ font-family:var(--font-display); font-style:italic; font-weight:500; font-size:clamp(24px,3vw,34px); line-height:1.32; color:var(--navy-deep); margin:18px 0 22px; letter-spacing:-0.01em; } .note-body p{ color:var(--text-soft); font-size:16.5px; line-height:1.7; margin-bottom:16px; } .note-body p strong{ color:var(--navy-deep); font-weight:600; } .note-sign{ margin-top:26px; padding-top:20px; border-top:1px solid var(--rule); display:flex; flex-direction:column; gap:3px; } .note-sign .nm{ font-family:var(--font-display); font-weight:600; font-size:20px; color:var(--navy-deep); } .note-sign .role{ font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-soft); font-weight:500; } /* text-soft, not text-muted: muted measured 4.49:1 on the heritage band (About) */ @media(max-width:840px){ .note-grid{ grid-template-columns:1fr; gap:48px; } .note-figure{ max-width:420px; } } /* ===================================================================== CTA BAND ===================================================================== */ .cta-band{ background:var(--navy-deep); color:var(--on-navy); position:relative; overflow:hidden; } .cta-band::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; background:radial-gradient(ellipse 60% 80% at 85% 0%, rgba(201,168,76,.16), transparent 60%); } .cta-inner{ display:flex; align-items:center; justify-content:space-between; gap:36px; flex-wrap:wrap; position:relative; } .cta-inner h2{ color:var(--white); font-size:clamp(28px,3.6vw,42px); max-width:18ch; } .cta-inner .cta-sub{ color:var(--on-navy-soft); margin-top:14px; font-size:17px; max-width:46ch; } .cta-actions{ display:flex; flex-wrap:wrap; gap:14px; } /* ===================================================================== CHALLENGE / ALUMNI TEASER ===================================================================== */ .challenge{ background:var(--offwhite); } .challenge-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(36px,5vw,64px); align-items:center; } .challenge-figure .photo-frame{ border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg); border:1px solid var(--rule-strong); } .challenge-figure img{ width:100%; aspect-ratio:5/3.4; object-fit:cover; filter:sepia(.12); } .hashtag{ font-family:var(--font-display); font-style:italic; font-weight:600; font-size:clamp(20px,2.4vw,28px); color:var(--blue); margin:20px 0 26px; } .share-row{ display:flex; flex-wrap:wrap; gap:12px; } .share-btn{ display:inline-flex; align-items:center; gap:9px; padding:12px 18px; border-radius:var(--r-sm); border:1.5px solid var(--rule-strong); background:var(--white); color:var(--navy); font-weight:600; font-size:14px; text-decoration:none; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .share-btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--gold); } .share-btn:focus-visible{ outline:3px solid var(--gold); box-shadow:0 0 0 6px rgba(11,18,32,.55); outline-offset:3px; } .share-btn svg{ width:18px; height:18px; } @media(max-width:840px){ .challenge-grid{ grid-template-columns:1fr; gap:40px; } .challenge-figure{ order:-1; } } /* ===================================================================== SLIDESHOW — "Life at Oriental Academy" (reusable, data-driven via JS) Crossfade slides; never depends on JS to SHOW content (first slide is visible by default; autoplay/controls are enhancement). ===================================================================== */ .slideshow{ position:relative; } .ss-stage{ position:relative; width:100%; aspect-ratio:16/8; border-radius:var(--r-lg); overflow:hidden; background:var(--navy-deep); box-shadow:var(--shadow-lg); border:1px solid var(--rule-strong); } .ss-slide{ position:absolute; inset:0; opacity:0; transition:opacity .9s ease; } .ss-slide:first-child{ opacity:1; } /* visible without JS */ .oa-js .ss-slide{ opacity:0; } .oa-js .ss-slide.active{ opacity:1; } .ss-slide.active{ opacity:1; } /* dots/arrows still work when reduced-motion skips .oa-js */ .ss-slide img{ width:100%; height:100%; object-fit:cover; object-position:center 38%; } /* wrappers participate transparently in slide/grid layouts */ .ss-slide picture, .gallery .g-item picture, .facility .fac-media picture, .split-media picture, .faculty-card .fac-photo picture{ display:contents; } .facility .fac-media{ overflow:hidden; } .facility .fac-media img{ width:100%; height:100%; object-fit:cover; } .ss-slide .ss-cap{ position:absolute; left:0; right:0; bottom:0; /* the caption is text, so it stops at the same column every other line of text obeys (.wrap = 1200px + 28px gutter) instead of running to within 28px of the viewport edge */ padding:48px max(28px, calc((100% - 1200px) / 2 + 28px)) 22px; background:linear-gradient(0deg, rgba(15,22,40,.86), rgba(15,22,40,.2) 60%, transparent); color:var(--white); } .ss-cap .ss-tag{ display:block; font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); font-weight:600; } .ss-cap .ss-title{ display:block; font-family:var(--font-display); font-weight:600; font-size:clamp(20px,2.4vw,28px); margin-top:6px; line-height:1.2; } /* Placeholder slide — branded "awaiting photograph" frame on navy */ .ss-slide.placeholder{ background:radial-gradient(ellipse 80% 90% at 50% 40%, #20305422, transparent), var(--navy-deep); position:relative; display:grid; place-items:center; text-align:center; color:var(--on-navy-soft); } .ss-slide.placeholder::after{ content:""; position:absolute; inset:18px; border:1px solid rgba(201,168,76,.32); border-radius:8px; pointer-events:none; } .ss-slide.placeholder::before{ content:""; position:absolute; width:240px; height:240px; right:-40px; bottom:-50px; background:url("oa-monogram-gold.svg") no-repeat center/contain; opacity:.07; pointer-events:none; } .ss-slide.placeholder .ph-note{ position:relative; max-width:30ch; } .ss-slide.placeholder .ph-note::before{ content:""; display:block; width:38px; height:38px; margin:0 auto 16px; background:var(--gold); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 4H3a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1zM8.5 8a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zM4 18l4.5-4.5 2.5 2.5L15 12l5 5v1H4z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 4H3a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1zM8.5 8a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zM4 18l4.5-4.5 2.5 2.5L15 12l5 5v1H4z'/%3E%3C/svg%3E") center/contain no-repeat; } .ss-slide.placeholder .ph-note .ph-k{ font-family:var(--font-ui); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:8px; font-weight:700; } .ss-slide.placeholder .ph-note .ph-t{ font-family:var(--font-display); font-size:clamp(20px,2.4vw,28px); color:var(--white); } /* arrows */ .ss-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:48px; height:48px; border-radius:var(--r-pill); background:rgba(251,248,241,.9); color:var(--navy-deep); border:none; cursor:pointer; display:grid; place-items:center; font-size:20px; box-shadow:var(--shadow-md); transition:background .2s, transform .2s; } .ss-arrow:hover{ background:var(--white); transform:translateY(-50%) scale(1.06); } .ss-arrow:focus-visible{ outline:3px solid var(--gold); box-shadow:0 0 0 6px rgba(11,18,32,.55); outline-offset:2px; } .ss-arrow.prev{ left:16px; } .ss-arrow.next{ right:16px; } /* dots */ :root{ --ss-strip: 76px; } /* 44px toggle + ~20px bottom offset + clearance */ .ss-dots{ display:flex; justify-content:center; align-items:center; gap:10px; margin-top:18px; } .ss-dot{ width:10px; height:10px; border-radius:var(--r-pill); border:none; cursor:pointer; background:var(--rule-strong); padding:0; transition:background .2s, transform .2s; } .ss-dot.active{ background:var(--gold-dark); transform:scale(1.2); } .ss-dot:focus-visible{ outline:3px solid var(--gold); box-shadow:0 0 0 6px rgba(11,18,32,.55); outline-offset:3px; } .ss-toggle{ min-width:44px; height:44px; margin-left:4px; padding:0; display:grid; place-items:center; border:1px solid var(--rule-strong); border-radius:var(--r-pill); background:var(--paper); color:var(--navy-deep); font-size:11px; line-height:1; cursor:pointer; transition:background .2s ease, color .2s ease, border-color .2s ease; } .ss-toggle:hover{ background:var(--navy); color:var(--white); border-color:var(--navy); } .ss-toggle:focus-visible{ outline:3px solid var(--gold); box-shadow:0 0 0 6px rgba(11,18,32,.55); outline-offset:3px; } @media(max-width:640px){ .ss-stage{ aspect-ratio:3/2; } .ss-arrow{ width:40px; height:40px; } } /* ===================================================================== MAP / VISIT ===================================================================== */ .visit-grid{ display:grid; grid-template-columns:1.3fr .9fr; gap:clamp(28px,4vw,48px); align-items:stretch; } .visit-grid>*{ min-width:0; } /* let columns shrink below content on tiny phones (no 320px overflow) */ .map-frame{ border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--rule-strong); box-shadow:var(--shadow-md); min-height:340px; position:relative; /* Branded loading field: a navy + gold-glow placeholder so the Google embed never flashes blank white while it fetches (it paints over this once loaded). */ background:radial-gradient(120% 100% at 50% 38%, rgba(201,168,76,.12), transparent 60%), var(--navy-deep); } .map-frame::before{ content:"Loading map\2026"; position:absolute; inset:0; z-index:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-ui); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:rgba(230,210,150,.55); } .map-frame iframe{ position:relative; z-index:1; width:100%; height:100%; min-height:340px; border:0; display:block; filter:saturate(.92); } .visit-card{ background:var(--white); border:1px solid var(--rule); border-radius:var(--r-lg); padding:clamp(24px,3vw,34px); box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:18px; } .visit-row{ display:flex; flex-direction:column; gap:3px; padding-bottom:16px; border-bottom:1px solid var(--rule); } .visit-row:last-of-type{ border-bottom:none; padding-bottom:0; } .visit-row .vr-k{ font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-dark); font-weight:600; } .visit-row .vr-v{ font-size:16.5px; color:var(--navy-deep); font-weight:500; overflow-wrap:anywhere; } /* Permanent gold underline so phone/email/social read as tappable on touch (was navy = body text with a hover-only colour change — invisible on a phone). */ .visit-row .vr-v a{ color:var(--navy-deep); text-decoration:none; border-bottom:1.5px solid rgba(201,168,76,.55); padding-bottom:1px; transition:color .2s ease, border-color .2s ease; } .visit-row .vr-v a:hover,.visit-row .vr-v a:focus-visible{ color:var(--gold-dark); border-bottom-color:var(--gold-dark); } .visit-row .vr-v a:focus-visible{ outline:3px solid var(--gold); box-shadow:0 0 0 6px rgba(11,18,32,.55); outline-offset:3px; border-radius:2px; } @media(max-width:780px){ .visit-grid{ grid-template-columns:1fr; } .map-frame{ min-height:280px; order:2; } } /* ===================================================================== FORM CARD + SUCCESS (system component; used on Admissions/Contact/Alumni) ===================================================================== */ .form-card{ background:var(--white); border:1px solid var(--rule); /* concentric: the card's corner = field radius + card padding, so the fields sit true inside it */ padding:24px; border-radius:calc(var(--r-sm) + 24px); box-shadow:var(--shadow-md); } @media(min-width:761px){ .form-card{ padding:32px; border-radius:calc(var(--r-sm) + 32px); } } .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; } .field{ display:flex; flex-direction:column; gap:7px; } .field.full{ grid-column:1 / -1; } .field label{ font-size:13px; font-weight:600; color:var(--navy-deep); letter-spacing:.02em; } .field label .req{ color:var(--gold-dark); } .field input,.field select,.field textarea{ width:100%; max-width:100%; /* keep every control inside the card — no horizontal overflow on mobile */ font-family:var(--font-ui); font-size:16px; color:var(--text); /* 16px min — iOS zooms the page on focus below this */ padding:13px 14px; border:1.5px solid var(--rule-strong); border-radius:var(--r-sm); min-height:48px; /* selects rendered 50px from the same padding — one control height */ background:var(--paper); transition:border-color .2s ease, box-shadow .2s ease; } .field textarea{ resize:vertical; min-height:96px; } .field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(27,42,74,.12); } /* Keyboard users get a real, always-visible ring (survives even if box-shadow is overridden). */ .field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{ outline:2px solid var(--navy); outline-offset:2px; } .field .hp{ position:absolute; left:-9999px; } /* honeypot */ .form-foot{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-top:24px; } .form-fine{ font-size:14px; color:var(--text-muted); max-width:42ch; } .form-consent{ flex-basis:100%; order:1; font-size:14px; color:var(--text-muted); line-height:1.55; margin:8px 0 0; } .form-consent a{ color:inherit; text-decoration:underline; text-underline-offset:2px; } .form-error{ margin:22px 0 0; padding:13px 15px; border:1px solid #D99A7D; border-left:4px solid #A84432; border-radius:var(--r-sm); background:#FFF4EE; color:#743125; font-size:14px; line-height:1.55; } .form-error:focus{ outline:3px solid rgba(168,68,50,.2); outline-offset:2px; } /* the field the server rejected (set by oa-system.js fail(), cleared on the next keystroke) */ .field [aria-invalid="true"]{ border-color:#A84432; } /* in-page anchor jumps clear the sticky header */ :target{ scroll-margin-top:96px; } /* ---------- Featured video panels (About founder film · Results result-day) — poster-first, tap-to-play ---------- */ .founder-film .ff-grid{ display:grid; grid-template-columns:1fr minmax(220px,300px); gap:clamp(28px,5vw,60px); align-items:center; } .founder-film .ff-note{ font-family:var(--font-ui); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-dark); margin:16px 0 0; } .ff-player{ margin:0; } .ff-video{ display:block; width:100%; max-width:300px; aspect-ratio:9/16; height:auto; margin-inline:auto; border-radius:18px; background:#0b1220; box-shadow:0 24px 60px rgba(11,18,32,.34); object-fit:cover; } @media(max-width:760px){ .founder-film .ff-grid{ grid-template-columns:1fr; } } .result-films .rf-grid{ display:flex; flex-wrap:wrap; gap:clamp(18px,3.5vw,40px); justify-content:center; align-items:flex-start; } .result-films .rf-item{ margin:0; } .rf-video{ display:block; height:min(62vh,520px); width:auto; max-width:100%; border-radius:16px; background:#0b1220; box-shadow:0 22px 56px rgba(0,0,0,.42); } .rf-cap{ margin-top:12px; text-align:center; font-family:var(--font-ui); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--on-navy-soft); } @media(max-width:600px){ .rf-video{ height:auto; width:100%; max-width:min(440px,94vw); } } /* Lazy poster facade — a button shows the poster; the real