/* ===================================================================================== ScoreMarch · site-wide stylesheet ("Modern Ivy" system), linked on every page by partials/head-common.html. Page-specific sections live in /assets/css/pages/.css, linked after this file (home: pages/home.css). ------------------------------------------------------------------------------------- 0 Tokens 5 Tally component 20 Footer 1 Base & reset 6 Header & menu (+ active 21 Waitlist modal, seats & forms 2 Layout & grid nav, [data-theme-only]) 23 Motion system (reveals, tilt, magnetic) 3 Type (+ --fs-label 8 Marquee · cursor glow Toasts · 24 Fill view · 25 Media floor) 19 FAQ (Numbers keep the original home order; 7, 9–18 and the final CTA + dossier live in pages/home.css.) 26–43 Design-system components + Academy theme (appended below; see their own index). ===================================================================================== */ /* ---------- 0 · Tokens ---------- */ :root { /* Brand (BRIEF §3, exact) */ --maroon: #0f4034; --maroon-deep: #0a2e25; --maroon-ink: #071f19; --maroon-bright: #1b5e4c; --gold: #D8A444; --gold-light: #E9C77E; --gold-deep: #A87A22; /* large text and ornaments on light only */ --gold-ink: #8A6418; /* small gold text on light: 4.8:1 on ivory, 5.0:1 on paper */ --gold-ink-deep: #74540F; /* small gold text on the deeper paper ground (--paper-deep): 5.8:1 */ --ivory: #F7F2E8; --ivory-2: #EEE5D3; --ink: #171213; --muted: #6E625A; --white: #FAF9F9; --navy: #111A2B; --navy-deep: #0B1220; --navy-2: #1A2640; --silver-hi: #E6E8EC; --silver: #B1B2B6; --silver-lo: #8D8F91; --steel: #666667; /* Surfaces */ --paper: #FBF7EF; /* warm paper: cards and panels on ivory */ --card: #FCF9F2; --paper-deep: #F1E9D8; /* a deeper paper ground (FAQ, notebook) */ --line: rgba(23, 18, 19, .10); --line-2: rgba(23, 18, 19, .16); --line-dark: rgba(250, 249, 249, .12); --line-gold: rgba(216, 164, 68, .38); /* Fonts (fonts.css) */ --font-display: "Anton", "Anton Fallback", Impact, "Arial Narrow", sans-serif; --font-serif: "Cormorant Garamond", "Cormorant Fallback", "Times New Roman", Georgia, serif; --font-sans: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-label: "Montserrat", "Montserrat Fallback", "Segoe UI", Arial, sans-serif; /* Rhythm */ --maxw: 1240px; --gutter: clamp(20px, 4.6vw, 64px); --gap: clamp(16px, 1.9vw, 28px); --section-y: clamp(88px, 10.5vw, 160px); /* Type floor for tracked uppercase labels: never below 12px (DESIGN-SYSTEM §3.4). Chips may use --fs-label-sm (11px) only with weight 600+. */ --fs-label: .75rem; --fs-label-sm: .6875rem; --header-h: 76px; --header-h-solid: 64px; /* the compact header once the page scrolls (every anchor jump lands under it) */ --anchor-gap: 16px; /* space between the compact header and an anchor target */ --shield-r: clamp(40px, 6vw, 104px); --shield-r-card: 26px; --shield-r-btn: 16px; /* Motion (BRIEF §5) */ --ease: cubic-bezier(.2, .7, .1, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); /* Elevation (layered, warm) */ --shadow-1: 0 1px 1px rgba(7, 31, 25, .04), 0 2px 6px rgba(7, 31, 25, .04); --shadow-2: 0 1px 1px rgba(7, 31, 25, .04), 0 4px 10px rgba(7, 31, 25, .05), 0 18px 40px -16px rgba(7, 31, 25, .16); --shadow-3: 0 2px 2px rgba(7, 31, 25, .05), 0 10px 24px rgba(7, 31, 25, .08), 0 40px 80px -24px rgba(7, 31, 25, .28); --focus: var(--maroon); color-scheme: light; } @media (max-width: 1179px) { :root { --header-h: 68px; } } @media (max-width: 599px) { :root { --header-h: 62px; } } /* ---------- 1 · Base & reset ---------- */ *, *::before, *::after { box-sizing: border-box; } /* The one anchor offset: deep links, :target jumps, scrollIntoView and focus scrolling land --anchor-gap under the compact header. Elements add only an extra scroll-margin-top when they want more room. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h-solid) + var(--anchor-gap)); } html:not(.lenis) { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html:not(.lenis) { scroll-behavior: auto; } } body { margin: 0; background: var(--ivory); color: var(--ink); font: 400 1.0625rem/1.62 var(--font-sans); font-feature-settings: "cv11", "ss01"; font-variant-numeric: lining-nums; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; } @media (max-width: 599px) { body { font-size: 1rem; } } img, svg, video { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } p, h1, h2, h3, h4, h5, h6, figure, blockquote, dl, dd, ol, ul { margin: 0; } :where(ul[class], ol[class]) { list-style: none; padding: 0; } :where(h1, h2, h3, h4, h5, h6) { font-weight: inherit; } [hidden] { display: none !important; } ::selection { background: rgba(216, 164, 68, .35); color: inherit; } .icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } main:focus { outline: none; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; } [data-tone="dark"], .site-header[data-tone="dark"], .modal__head { --focus: var(--gold-light); } [data-tone="light"] { --focus: var(--maroon); } .nowrap { white-space: nowrap; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: fixed; left: 16px; top: 12px; z-index: 100; padding: 12px 18px; background: var(--gold); color: var(--maroon-ink); font: 600 .8rem/1 var(--font-label); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; border-radius: 2px 2px 2px 12px; transform: translateY(-160%); transition: transform .3s var(--ease); } .skip-link:focus { transform: none; } .skip-link:not(:focus) { clip-path: inset(50%); } /* never peeks out (full-page captures, no-JS layouts) until focused */ body.theme-academy .skip-link { background: var(--silver-hi); color: var(--navy); } /* Paper grain: a pre-rendered 180px noise tile (the same fractal noise the old inline feTurbulence SVG drew, baked once into /assets/img/brand/grain.webp, ~9 KB, cached 30 days): no per-tile filter rasterization while scrolling. */ .grain { position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: url("/assets/img/brand/grain.webp"); background-size: 180px 180px; opacity: .055; mix-blend-mode: multiply; } [data-tone="dark"] > .grain, .hero .grain, .begin-panel__bg .grain { opacity: .09; mix-blend-mode: overlay; } /* ---------- 2 · Layout & grid ---------- */ .wrap { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; } .section { position: relative; padding-block: var(--section-y); isolation: isolate; } .section > .wrap { position: relative; z-index: 1; } .section--ivory { background: var(--ivory); } .section--ivory2 { background: var(--ivory-2); } .section--paper { background: var(--paper-deep); } /* --gold-ink measures 4.4:1 on --paper-deep: small labels and numerals there take the deeper gold (Group only; the Academy's --metal-text is already 6:1). */ body:not(.theme-academy) :is(.section--paper, .surface-paper) { --c-num: var(--gold-ink-deep); --c-label: var(--gold-ink-deep); } /* Adjacent sections on the same light ground: half the top padding plus a hairline at the content edge, so the seam reads as a deliberate chapter break rather than 300px of padding. */ :is(.section--ivory + .section--ivory, .section--paper + .section--paper, .section--ivory2 + .section--ivory2) { padding-top: calc(var(--section-y) * .5); } :is(.section--ivory + .section--ivory, .section--paper + .section--paper, .section--ivory2 + .section--ivory2)::before { content: ""; position: absolute; top: 0; left: 50%; z-index: 1; width: min(100% - 2 * var(--gutter), var(--maxw)); height: 1px; transform: translateX(-50%); background: var(--line-2); } /* Sections that close on a short link row need less bottom padding */ .section--trim-end { padding-bottom: calc(var(--section-y) * .6); } .section--white { background: var(--paper); } /* kept for inner pages: warm paper, never plain white */ .section--maroon { background: radial-gradient(120% 80% at 50% 0%, #14503f 0%, var(--maroon) 46%, #0c3329 100%); color: var(--white); } .section--ink { background: radial-gradient(120% 70% at 20% 0%, #0a2921 0%, var(--maroon-ink) 50%, #05150f 100%); color: var(--white); } .section--navy { background: radial-gradient(120% 80% at 70% 0%, #19253c 0%, var(--navy) 48%, var(--navy-deep) 100%); color: var(--silver-hi); } .section-head { margin-bottom: clamp(44px, 5.2vw, 80px); } .section-head--split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 20px; align-items: end; } .section-head--split .section-head__main { grid-column: 1 / span 7; } .section-head--split .lede { grid-column: 9 / span 4; padding-bottom: .45em; } .section-head--center { text-align: center; max-width: 820px; margin-inline: auto; } .section-head--center .lede { margin-inline: auto; } @media (max-width: 959px) { .section-head--split .section-head__main, .section-head--split .lede { grid-column: 1 / -1; } .section-head--split .lede { padding-bottom: 0; } } /* ---------- 3 · Type ---------- */ .eyebrow { display: inline-block; font: 600 var(--fs-label)/1.3 var(--font-label); letter-spacing: .28em; text-transform: uppercase; color: var(--maroon); } .eyebrow::before { content: ""; display: inline-block; width: 2px; height: 1.1em; margin-right: 13px; vertical-align: -.22em; background: currentColor; opacity: .9; } [data-tone="dark"] .eyebrow, .modal__head .eyebrow { color: var(--gold); } .section--navy .eyebrow { color: var(--silver); } /* Chapter opener (heritage): Roman numeral · Montserrat eyebrow · gold hairline, on every section */ .chapter { display: flex; align-items: center; gap: 16px; min-width: 0; } .chapter .eyebrow { flex: 0 1 auto; min-width: 0; } .chapter .eyebrow::before { display: none; } .chapter::after { content: ""; flex: 1 1 24px; min-width: 24px; height: 1px; background: linear-gradient(90deg, rgba(168, 122, 34, .55), var(--line-2) 55%, transparent); } .chapter__num { flex: none; min-width: 1.3em; font: italic 500 1.4rem/1 var(--font-serif); letter-spacing: .02em; color: var(--c-num, var(--gold-ink)); } [data-tone="dark"] .chapter__num, .begin-panel .chapter__num { color: var(--gold); } [data-tone="dark"] .chapter::after, .begin-panel .chapter::after { background: linear-gradient(90deg, rgba(216, 164, 68, .6), rgba(250, 249, 249, .14) 55%, transparent); } .section--navy .chapter__num { color: var(--silver-hi); } .section--navy .chapter::after { background: linear-gradient(90deg, rgba(230, 232, 236, .5), rgba(230, 232, 236, .12) 55%, transparent); } .section-head--split > .chapter { grid-column: 1 / -1; margin-bottom: 4px; } .section-head--center .chapter::before { content: ""; flex: 1 1 24px; min-width: 24px; height: 1px; order: -1; background: linear-gradient(270deg, rgba(168, 122, 34, .55), var(--line-2) 55%, transparent); } /* Phones: long eyebrows wrap; the hairline would shrink to a stray dash, so it drops and the tracking tightens. Short labels swap in through .chapter__short (the long one is .chapter__long). */ .chapter__short { display: none; } @media (max-width: 599px) { .chapter { flex-wrap: wrap; gap: 12px; } .chapter .eyebrow { letter-spacing: .2em; } .chapter::after, .section-head--center .chapter::before { display: none; } .chapter__long { display: none; } .chapter__short { display: inline; } } .chapter + .h2, .chapter + .section-head__main .h2, .section-head--split > .chapter + .section-head__main > .h2 { margin-top: clamp(18px, 2vw, 28px); } .h2 { margin-top: 18px; font: 500 clamp(2.45rem, 1.35rem + 3.2vw, 4.5rem)/1.02 var(--font-serif); letter-spacing: -.014em; font-variant-numeric: lining-nums; text-wrap: balance; } .h2 + .lede { margin-top: 22px; } .h2 em, .hero__title em, .philosophy__title em, .footer-tagline em, .modal__title em { font-style: italic; font-weight: 500; } [data-tone="light"] .h2 em { color: var(--maroon); } [data-tone="dark"] .h2 em { color: var(--gold-light); } .section--navy .h2 em { color: var(--silver-hi); } .lede { max-width: 46ch; color: var(--muted); font-size: clamp(1.02rem, .96rem + .25vw, 1.15rem); line-height: 1.6; text-wrap: pretty; } [data-tone="dark"] .lede { color: rgba(250, 249, 249, .74); } .section--navy .lede { color: rgba(230, 232, 236, .72); } .tm { font-size: .78rem; line-height: 1.5; color: var(--muted); } /* ---------- 4 · Buttons & links ---------- */ .btn { --btn-h: 50px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: var(--btn-h); padding: 0 26px; border: 1px solid transparent; border-radius: 0 0 0 var(--shield-r-btn); /* flat, with only the crest's bottom-left shield corner */ font: 600 .74rem/1 var(--font-label); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), box-shadow .45s var(--ease), translate .5s var(--ease-out); -webkit-tap-highlight-color: transparent; } .btn > * { position: relative; z-index: 1; } .btn--sm { --btn-h: 44px; padding: 0 18px; font-size: .68rem; gap: 10px; } .btn--lg { --btn-h: 56px; padding: 0 30px; } .btn--block { width: 100%; } .btn__icon { width: 18px; height: 18px; flex: none; transition: transform .45s var(--ease); } .btn:hover .btn__icon { transform: translateX(4px); } .btn--gold { background: var(--gold); color: var(--maroon-ink); } .btn--gold:hover { background: var(--gold-light); } .btn--outline { border-color: rgba(216, 164, 68, .62); color: var(--white); background: transparent; } .btn--outline:hover { border-color: var(--gold); background: rgba(216, 164, 68, .12); } [data-tone="light"] .btn--outline { border-color: var(--maroon); color: var(--maroon); background: transparent; } [data-tone="light"] .btn--outline:hover { background: rgba(15, 64, 52, .06); } .btn--maroon { background: var(--maroon); color: var(--white); } .btn--maroon:hover { background: var(--maroon-bright); } .btn--silver { background: var(--silver-hi); color: var(--navy); } .btn--silver:hover { background: #fff; } .btn--ghost { border-color: var(--line-2); color: var(--ink); background: transparent; } .btn--ghost:hover { border-color: var(--maroon); color: var(--maroon); } /* Pulsing dot inside the waitlist button (decorative, aria-hidden) */ .seat-dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex: none; } .seat-dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--gold); opacity: 0; animation: seat-pulse 2.4s var(--ease-out) 3; /* capped: WCAG 2.2.2 */ } @keyframes seat-pulse { 0% { transform: scale(.4); opacity: .9; } 80%, 100% { transform: scale(1.5); opacity: 0; } } /* The "Few seats" chip is retired (owner, 2026-10-02): this only hides stale markup until every page drops it. */ .seat-chip { display: none !important; } [data-tone="light"] .seat-dot { background: var(--maroon); } [data-tone="light"] .seat-dot::after { border-color: var(--maroon); } /* Arrow links */ .link-arrow { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0; border: 0; background: none; font: 600 .74rem/1.2 var(--font-label); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--maroon); } .link-arrow span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 3px; transition: background-size .5s var(--ease); } .link-arrow:hover span { background-size: 100% 1px; } .link-arrow svg { width: 18px; height: 18px; flex: none; transition: transform .45s var(--ease); } .link-arrow:hover svg { transform: translateX(4px); } [data-tone="dark"] .link-arrow, .link-arrow--light { color: var(--gold-light); } .link-arrow--silver, .section--navy .link-arrow { color: var(--silver-hi); } .link-arrow--button { cursor: pointer; } /* Badges */ .badge-ride { display: inline-flex; align-items: center; vertical-align: .18em; margin-left: 8px; padding: 5px 8px 4px; background: var(--gold); color: var(--maroon-ink); border-radius: 2px 2px 2px 8px; font: 700 var(--fs-label)/1 var(--font-label); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; } /* ---------- 5 · Tally component (inline, CSS-drawn; aria-hidden) ---------- */ .tally { --th: 26px; --tw: 3px; --tg: 5px; display: inline-flex; align-items: center; gap: calc(var(--tg) * 2.4); color: var(--maroon); } .tally__gate { position: relative; display: inline-flex; gap: var(--tg); padding-inline: 2px; } .tally__gate i { display: block; width: var(--tw); height: var(--th); background: currentColor; transform-origin: 50% 100%; } .tally__gate b { position: absolute; left: -20%; top: 50%; width: 140%; height: var(--tw); margin-top: calc(var(--tw) / -2); background: currentColor; transform: rotate(-26deg); transform-origin: 0 50%; } .tally--md { --th: 30px; --tw: 3px; --tg: 6px; } .tally--sm { --th: 22px; --tw: 2.5px; --tg: 5px; } .tally--xs { --th: 14px; --tw: 2px; --tg: 3px; } [data-tone="dark"] .tally { color: var(--gold); } /* ---------- 6 · Header & menu ---------- */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--header-h); border-bottom: 1px solid transparent; transition: background-color .5s var(--ease), border-color .5s var(--ease), height .4s var(--ease), box-shadow .5s var(--ease), translate .5s var(--ease); } .site-header__inner { height: 100%; display: flex; align-items: center; gap: clamp(20px, 3vw, 44px); } html.no-js .site-header { position: absolute; } html.no-js .menu-toggle { display: none; } /* without JS the footer carries every link… */ /* …and a plain "Menu" link jumps to it below the desktop breakpoint */ .menu-fallback { display: none; } @media (max-width: 1179px) { html.no-js .menu-fallback { display: inline-flex; align-items: center; min-height: 44px; padding-left: 8px; font: 600 .7rem/1 var(--font-label); letter-spacing: .2em; text-transform: uppercase; color: var(--white); text-decoration: none; } html.no-js .site-header[data-tone="light"] .menu-fallback { color: var(--ink); } } html.no-js .dotmap, html.no-js .map-shell__caption { display: none; } .site-header[data-state="solid"] { --header-h: var(--header-h-solid); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); } .site-header[data-state="solid"][data-tone="dark"] { background: rgba(7, 28, 23, .76); border-color: rgba(216, 164, 68, .16); } .site-header[data-state="solid"][data-tone="light"] { background: rgba(250, 247, 240, .94); border-color: var(--line); box-shadow: 0 10px 30px -24px rgba(7, 31, 25, .35); } .brand { position: relative; display: grid; flex: none; padding: 4px 0; border-radius: 2px; } /* The logo is an inline (tools/sync-partials.mjs, one per house). Its wordmark (.brand__wm) and tagline (.brand__tag) recolour for light headers; the crest keeps its own colours. */ .brand__svg { grid-area: 1 / 1; display: block; width: auto; height: 40px; transition: height .4s var(--ease); } .site-header[data-state="solid"] .brand__svg { height: 36px; } .brand__wm, .brand__tag { transition: fill .45s var(--ease); } .site-header[data-tone="light"] .brand__wm { fill: #171213; } .site-header[data-tone="light"] .brand__tag { fill: #A87A22; } body.theme-academy .site-header[data-tone="light"] .brand__wm { fill: #111A2B; } body.theme-academy .site-header[data-tone="light"] .brand__tag { fill: #666667; } .nav { margin-right: auto; } .nav__list { display: flex; gap: clamp(18px, 2.3vw, 34px); } .nav__link { position: relative; display: inline-flex; align-items: center; min-height: 44px; font: 500 .92rem/1 var(--font-sans); letter-spacing: .005em; text-decoration: none; white-space: nowrap; color: rgba(250, 249, 249, .84); transition: color .3s; } .nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); } .nav__link:hover { color: var(--white); } .nav__link:hover::after { transform: scaleX(1); transform-origin: left; } .site-header[data-tone="light"] .nav__link { color: rgba(23, 18, 19, .78); } .site-header[data-tone="light"] .nav__link:hover { color: var(--ink); } .site-header[data-tone="light"] .nav__link::after { background: var(--maroon); } .header-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; } /* Language switch (EN / RU): markup generated per page by tools/sync-partials.mjs (). Header (desktop), mobile menu and footer; plain links, so it works without JS. */ .lang-switch { display: inline-flex; align-items: center; font: 600 var(--fs-label)/1 var(--font-label); letter-spacing: .16em; } .lang-switch__opt { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 44px; padding: 0 5px; color: rgba(250, 249, 249, .72); text-decoration: none; transition: color .3s; } .lang-switch__opt + .lang-switch__opt { border-left: 1px solid rgba(250, 249, 249, .28); min-height: 14px; height: 14px; margin-block: 15px; } .lang-switch__opt:hover { color: var(--white); } .lang-switch__opt[aria-current] { color: var(--gold); } .lang-switch__opt:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .site-header[data-tone="light"] .lang-switch__opt { color: rgba(23, 18, 19, .66); } .site-header[data-tone="light"] .lang-switch__opt + .lang-switch__opt { border-color: rgba(23, 18, 19, .22); } .site-header[data-tone="light"] .lang-switch__opt:hover { color: var(--ink); } .site-header[data-tone="light"] .lang-switch__opt[aria-current] { color: var(--maroon); } body.theme-academy .site-header[data-tone="light"] .lang-switch__opt[aria-current] { color: var(--navy); } .header-actions > .lang-switch { margin-right: 2px; } .menu__inner > .lang-switch { justify-self: start; margin: 0 0 4px -5px; } .footer-legal > .lang-switch { margin-left: -5px; } .site-header[data-tone="light"] .header-actions__waitlist { border-color: rgba(15, 64, 52, .3); color: var(--maroon); background: transparent; } .site-header[data-tone="light"] .header-actions__waitlist .seat-dot { background: var(--maroon); } .site-header[data-tone="light"] .header-actions__waitlist .seat-dot::after { border-color: var(--maroon); } .menu-toggle { display: none; align-items: center; gap: 10px; min-height: 44px; min-width: 44px; padding: 0 4px 0 12px; border: 0; background: none; color: var(--white); font: 600 .7rem/1 var(--font-label); letter-spacing: .2em; text-transform: uppercase; } .menu-toggle__bars { position: relative; width: 22px; height: 12px; display: grid; align-content: space-between; } .menu-toggle__bars i { display: block; height: 1.5px; background: currentColor; transition: transform .45s var(--ease), width .45s var(--ease); } .menu-toggle__bars i:last-child { width: 14px; justify-self: end; } .menu-toggle[aria-expanded="true"] .menu-toggle__bars i:first-child { transform: translateY(5.25px) rotate(45deg); } .menu-toggle[aria-expanded="true"] .menu-toggle__bars i:last-child { width: 22px; transform: translateY(-5.25px) rotate(-45deg); } .site-header[data-tone="light"] .menu-toggle { color: var(--ink); } @media (max-width: 1179px) { .nav, .header-actions__waitlist, .header-actions > .lang-switch { display: none; } .menu-toggle { display: inline-flex; } } /* Phones keep a compact primary CTA beside Menu (the page is ~30 screens long). */ .header-actions__short { display: none; } @media (max-width: 639px) { .header-actions { gap: 6px; } .header-actions__book { --btn-h: 40px; padding: 0 16px; } .header-actions__long { display: none; } .header-actions__short { display: inline; } html.menu-open .header-actions__book { visibility: hidden; } } @media (max-width: 399px) { .menu-toggle__text { display: none; } .menu-toggle { padding-left: 8px; } } /* 320px (= 400% zoom at 1280): brand + Book + Menu must fit inside the gutters (WCAG 1.4.10). */ @media (max-width: 359px) { .site-header__inner { gap: 10px; } .brand__svg, .site-header[data-state="solid"] .brand__svg { height: 32px; } .header-actions__book { padding: 0 12px; } .menu-toggle { padding-left: 4px; gap: 6px; } } /* Russian header (:lang(ru) only; English is untouched). Russian labels run ~25% longer, so the desktop bar uses tighter gaps and the short primary CTA («Записаться» / «Заявка») until the full label fits (1400px+); the waitlist button carries the short «Лист ожидания» in partials/ru/header.html. Phones get a narrower CTA so brand + CTA + Menu stay inside the gutters. */ @media (min-width: 1180px) { :lang(ru) .site-header__inner { gap: clamp(18px, 2.2vw, 32px); } :lang(ru) .nav__list { gap: clamp(16px, 1.6vw, 24px); } :lang(ru) .header-actions { gap: 10px; } } @media (min-width: 1180px) and (max-width: 1399px) { :lang(ru) .header-actions__long { display: none; } :lang(ru) .header-actions__short { display: inline; } } @media (max-width: 639px) { :lang(ru) .header-actions__book { padding: 0 12px; letter-spacing: .1em; } } @media (max-width: 399px) { :lang(ru) .site-header__inner { gap: 10px; } :lang(ru) .brand__svg, :lang(ru) .site-header[data-state="solid"] .brand__svg { height: 34px; } :lang(ru) .header-actions__book { padding: 0 10px; letter-spacing: .06em; } } @media (max-width: 359px) { :lang(ru) .brand__svg, :lang(ru) .site-header[data-state="solid"] .brand__svg { height: 28px; } :lang(ru) .header-actions { gap: 4px; } } /* Russian body copy on phones: only long words (12+ letters, 5 before / 4 after the break) may hyphenate, instead of leaving ragged gaps or pushing a narrow column wider. Paragraph copy only: never headings, eyebrows, labels, buttons or display numerals. */ @media (max-width: 639px) { :lang(ru) :is(p, dd, figcaption):not(.eyebrow, .chapter, .display, [class*="label"], [class*="eyebrow"]) { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 12 5 4; } } .menu { position: fixed; inset: 0; z-index: 55; overflow-y: auto; overscroll-behavior: contain; padding-top: var(--header-h); background: radial-gradient(120% 70% at 80% 0%, #0d3229 0%, var(--maroon-ink) 55%, #04130e 100%); color: var(--white); opacity: 0; transition: opacity .4s var(--ease); } .menu.is-open { opacity: 1; } .menu__inner { display: grid; gap: 34px; padding-block: 28px 40px; min-height: calc(100% - 1px); align-content: start; } .menu__list { border-top: 1px solid var(--line-dark); } .menu__list li { border-bottom: 1px solid var(--line-dark); } .menu__link { display: grid; gap: 4px; padding: 16px 0; text-decoration: none; transform: translateY(10px); opacity: 0; transition: transform .6s var(--ease), opacity .6s var(--ease); } .menu.is-open .menu__link { transform: none; opacity: 1; } .menu.is-open li:nth-child(2) .menu__link { transition-delay: .05s; } .menu.is-open li:nth-child(3) .menu__link { transition-delay: .1s; } .menu.is-open li:nth-child(4) .menu__link { transition-delay: .15s; } .menu__label { font: 500 clamp(1.9rem, 1.4rem + 2vw, 2.6rem)/1.05 var(--font-serif); } .menu__desc { font-size: .88rem; color: rgba(250, 249, 249, .62); } .menu__actions { display: grid; gap: 12px; max-width: 480px; } .menu__scarcity { font-size: .86rem; color: rgba(250, 249, 249, .7); } .menu__contact-label { font: 600 var(--fs-label)/1.3 var(--font-label); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; } .menu__contact-list { display: grid; gap: 8px; } .menu__contact-list a { display: inline-flex; min-height: 44px; align-items: center; color: var(--white); } .menu__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 22px; border-top: 1px solid var(--line-dark); font: 600 var(--fs-label)/1.4 var(--font-label); letter-spacing: .2em; text-transform: uppercase; color: rgba(250, 249, 249, .55); } /* Active page (aria-current set by main.js from location): the gold rule stays drawn */ .nav__link[aria-current] { color: var(--white); } .nav__link[aria-current]::after { transform: scaleX(1); } .site-header[data-tone="light"] .nav__link[aria-current] { color: var(--ink); } .menu__link[aria-current] .menu__label { color: var(--gold); } /* House theme: [data-theme-only] shows only under its house (body.theme-group is the default, body.theme-academy swaps the header logo, the primary CTA and anything else marked) */ body:not(.theme-academy) [data-theme-only="academy"], body.theme-academy [data-theme-only="group"] { display: none !important; } html.menu-open { overflow: hidden; } html.menu-open .site-header { background: transparent !important; border-color: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; } /* ---------- 8 · Admits marquee ---------- */ .admits { position: relative; background: var(--maroon-ink); color: var(--white); padding: 30px 0 34px; border-top: 1px solid rgba(216, 164, 68, .16); border-bottom: 1px solid rgba(216, 164, 68, .16); overflow: hidden; } .admits__head { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-bottom: 18px; } .admits__head:has(.marquee-toggle[hidden]) { display: none; } .admits .eyebrow { color: var(--gold); font-size: var(--fs-label); } .marquee-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid rgba(216, 164, 68, .3); border-radius: 2px 2px 2px 12px; background: transparent; color: rgba(250, 249, 249, .8); font: 600 var(--fs-label)/1 var(--font-label); letter-spacing: .2em; text-transform: uppercase; } .marquee-toggle svg { width: 14px; height: 14px; } .marquee-toggle:hover { border-color: var(--gold); color: var(--white); } .marquee { position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .marquee__track { display: flex; width: max-content; } .marquee__list { display: flex; align-items: center; flex: none; } .marquee__list li { display: inline-flex; align-items: center; white-space: nowrap; font: 500 clamp(1.45rem, 1.1rem + 1.1vw, 2.1rem)/1.2 var(--font-serif); color: rgba(250, 249, 249, .92); } .marquee__list li::after { content: ""; width: 2px; height: .78em; margin-inline: clamp(24px, 2.8vw, 44px); background: var(--gold); opacity: .85; } .marquee__list .badge-ride { margin-left: 12px; } html.js .marquee.is-running .marquee__track { animation: marquee var(--marquee-dur, 120s) linear infinite; } html.js .marquee.is-paused .marquee__track { animation-play-state: paused; } @keyframes marquee { to { transform: translate3d(calc(-1 * var(--marquee-shift, 50%)), 0, 0); } } html:not(.js) .marquee, .marquee.is-static { -webkit-mask-image: none; mask-image: none; } html:not(.js) .marquee__track, .marquee.is-static .marquee__track { display: block; width: auto; } html:not(.js) .marquee__list, .marquee.is-static .marquee__list { flex-wrap: wrap; row-gap: 10px; width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; } html:not(.js) .marquee__list li, .marquee.is-static .marquee__list li { font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem); } html:not(.js) .marquee__list li::after, .marquee.is-static .marquee__list li::after { margin-inline: 18px; } html:not(.js) .marquee__list li:last-child::after, .marquee.is-static .marquee__list li:last-child::after { display: none; } /* Cursor-aware glow (data-glow; --mx/--my set by main.js) */ [data-glow] { position: relative; } [data-glow]::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), var(--glow, rgba(216, 164, 68, .16)), transparent 62%); opacity: 0; transition: opacity .6s var(--ease); } [data-glow].is-glow::before { opacity: 1; } [data-glow] > * { position: relative; z-index: 1; } /* ---------- 19 · FAQ ---------- */ /* DOM order: heading → questions → "Ask it in your consultation" (.faq__more), so phones and screen readers meet the questions first; on desktop .faq__more sits under the heading. */ .faq__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: var(--gap); } .faq__aside { grid-column: 1 / span 4; grid-row: 1; align-self: stretch; } /* stretch: the sticky heading inside needs the full row */ .faq__sticky { position: sticky; top: calc(var(--header-h) + 40px); } .faq__more { grid-column: 1 / span 4; grid-row: 2; align-self: start; position: sticky; top: calc(var(--header-h) + 40px); display: grid; justify-items: start; gap: 16px; margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line); } .faq__more p { font: italic 500 1.2rem/1.35 var(--font-serif); color: var(--ink); } .faq-list { grid-column: 6 / span 7; grid-row: 1 / span 2; align-self: start; border-top: 1px solid var(--line-2); } .faq-item { border-bottom: 1px solid var(--line-2); } .faq-item__q { margin: 0; } .faq-q { display: grid; grid-template-columns: 44px 1fr 40px; align-items: center; gap: 8px; width: 100%; min-height: 76px; padding: 18px 0; border: 0; background: none; text-align: left; color: var(--ink); } /* The numeral is CSS-generated (counter, empty alt text), so it is not part of the heading text that crawlers, snippets and screen readers read. A legacy .faq-q__n span still renders the same way. */ .faq-list { counter-reset: faq; } .faq-item { counter-increment: faq; } .faq-q__n, .faq-q:not(:has(.faq-q__n))::before { font: italic 600 1.05rem/1 var(--font-serif); color: var(--c-num); } .faq-q:not(:has(.faq-q__n))::before { content: counter(faq, upper-roman); content: counter(faq, upper-roman) / ""; } .faq-q__text { font: 500 clamp(1.25rem, 1.08rem + .55vw, 1.6rem)/1.25 var(--font-serif); transition: color .3s; } .faq-q:hover .faq-q__text { color: var(--maroon); } .faq-q__icon { justify-self: end; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line-2); border-radius: 50%; color: var(--maroon); transition: transform .5s var(--ease), background .3s, border-color .3s; } .faq-q__icon svg { width: 16px; height: 16px; } .faq-q[aria-expanded="true"] .faq-q__icon { transform: rotate(45deg); background: var(--maroon); border-color: var(--maroon); color: var(--white); } .faq-a { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .55s var(--ease); } .faq-a__inner { overflow: hidden; } .faq-a__inner p { padding: 0 48px 26px 52px; max-width: 64ch; color: var(--muted); } html.js .faq-q[aria-expanded="false"] + * , html.js .faq-item.is-closed .faq-a { grid-template-rows: 0fr; } @media (max-width: 959px) { .faq__aside, .faq-list, .faq__more { grid-column: 1 / -1; grid-row: auto; } .faq__sticky, .faq__more { position: static; } .faq-list { margin-top: 36px; } .faq-a__inner p { padding: 0 0 24px 52px; } } @media (max-width: 599px) { .faq-q { grid-template-columns: 34px 1fr 36px; } .faq-a__inner p { padding-left: 42px; } } /* ---------- 20 · Footer ---------- */ /* Contact rows whose value is not configured yet stay hidden (shown in the ?fill=1 owner view). */ html:not(.fill-view) [data-contact-row][data-unset] { display: none; } .site-footer { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(100% 80% at 0% 0%, #0b2b23 0%, var(--maroon-ink) 45%, #04110d 100%); color: rgba(250, 249, 249, .8); padding-top: clamp(64px, 8vw, 112px); } .site-footer > .wrap { position: relative; z-index: 1; } .footer-top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px var(--gap); padding-bottom: 56px; } .footer-brand { grid-column: 1 / span 3; } .footer-brand__mark { display: inline-flex; align-items: flex-start; gap: 18px; text-decoration: none; color: var(--white); border-radius: 2px; } .footer-brand__crest { display: grid; justify-items: center; width: 92px; flex: none; } .footer-brand__shield { width: 66px; --crest-dark: #0d0d0d; --crest-light: #f4f4f2; --crest-frame: #f4f4f2; } .footer-brand__motto { width: 92px; margin-top: 2px; color: rgba(250, 249, 249, .88); } .footer-brand__words { display: grid; gap: 8px; padding-top: 8px; } .footer-brand__wm { width: 168px; color: var(--white); } .footer-brand__group { width: 80px; margin-left: 44px; color: var(--gold); } .footer-tagline { margin-top: 26px; font: 500 clamp(1.7rem, 1.4rem + 1vw, 2.3rem)/1.1 var(--font-serif); color: var(--white); } .footer-tagline em { color: var(--gold-light); } .footer-blurb { margin-top: 14px; max-width: 42ch; font-size: .9rem; line-height: 1.6; color: rgba(250, 249, 249, .62); } .footer-cols { grid-column: 4 / span 6; align-self: start; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px var(--gap); } .footer-col__title { font: 600 var(--fs-label)/1.3 var(--font-label); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; } .footer-col .footer-col__title { margin-bottom: 8px; white-space: nowrap; } .footer-col a { text-wrap: balance; } .footer-col ul { display: grid; gap: 2px; list-style: none; padding: 0; } .footer-col a, .footer-contact a { display: inline-flex; align-items: center; min-height: 34px; font-size: .9rem; color: rgba(250, 249, 249, .78); text-decoration: none; transition: color .3s; } .footer-col a:hover, .footer-contact a:hover { color: var(--white); text-decoration: underline; text-decoration-color: var(--gold); } .footer-contact { grid-column: 10 / span 3; } .footer-contact__list { display: grid; gap: 14px; } .footer-contact__list dt { font: 600 var(--fs-label)/1.3 var(--font-label); letter-spacing: .22em; text-transform: uppercase; color: rgba(250, 249, 249, .5); } .footer-contact__list dd { margin-top: 3px; font-size: .9rem; color: rgba(250, 249, 249, .86); overflow-wrap: anywhere; } .footer-contact__list dd a { min-height: 0; } .footer-contact__list small { display: block; margin-top: 2px; font-size: .74rem; color: rgba(250, 249, 249, .5); } @media (pointer: coarse) { .footer-col a { min-height: 44px; } } .footer-contact__note { margin-top: 18px; font: italic 500 1rem/1.3 var(--font-serif); color: rgba(250, 249, 249, .62); } .footer-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 28px; padding-block: 22px; border-top: 1px solid rgba(216, 164, 68, .2); font-size: .8rem; color: rgba(250, 249, 249, .6); } .footer-legal__links { display: flex; flex-wrap: wrap; gap: 4px 24px; } .footer-legal__links a { display: inline-flex; align-items: center; min-height: 44px; color: rgba(250, 249, 249, .74); text-decoration: none; } .footer-legal__links a:hover { color: var(--white); text-decoration: underline; text-decoration-color: var(--gold); } .footer-disclaimers { display: grid; gap: 6px; padding-bottom: 36px; font-size: .74rem; line-height: 1.5; color: rgba(250, 249, 249, .58); } @media (max-width: 1099px) { .footer-brand { grid-column: 1 / -1; } .footer-cols { grid-column: 1 / span 8; } .footer-contact { grid-column: 9 / span 4; } } @media (max-width: 759px) { .footer-cols { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; } .footer-contact { grid-column: 1 / -1; } } /* ---------- 21 · Waitlist modal & forms ---------- */ /* Seats indicator (waitlist dialog; the home final CTA reuses it) */ .seats { margin-top: 26px; } .seats__empty { display: inline-flex; align-items: center; gap: 12px; font: 600 var(--fs-label)/1.4 var(--font-label); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-light); } .seats__empty::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(216, 164, 68, .2); } .seats__label { font: 600 var(--fs-label)/1 var(--font-label); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); } .seats__bar { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 12px; color: var(--gold); } .seats__bar .tally { color: inherit; --th: 24px; --tw: 3px; --tg: 5px; } .seats__bar .tally__gate i { opacity: .22; } .seats__bar .tally__gate i.is-left { opacity: 1; } .seats__bar .tally__gate b { opacity: .22; } .seats__bar .tally__gate b.is-left { opacity: 1; } .seats__line { margin-top: 10px; font-size: .92rem; color: rgba(250, 249, 249, .85); } .seats__aside { margin-top: 8px; font: italic 500 1.08rem/1.3 var(--font-serif); color: rgba(250, 249, 249, .7); } .modal { width: min(600px, 100% - 24px); max-width: none; max-height: none; margin: auto; padding: 0; border: 0; border-radius: 6px 6px 6px 32px; background: transparent; color: var(--ink); overflow: visible; } .modal::backdrop { background: rgba(5, 19, 15, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .modal[open] { animation: modal-in .55s var(--ease-out); } .modal[open]::backdrop { animation: fade-in .4s var(--ease); } .modal.is-closing { animation: modal-out .3s var(--ease) forwards; } .modal.is-closing::backdrop { animation: fade-out .3s var(--ease) forwards; } @keyframes modal-in { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } } @keyframes modal-out { to { opacity: 0; transform: translateY(10px) scale(.99); } } @keyframes fade-in { from { opacity: 0; } } @keyframes fade-out { to { opacity: 0; } } .modal__panel { position: relative; max-height: min(92vh, 100vh - 24px); max-height: min(92dvh, 100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; border-radius: inherit; background: var(--card); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .6); } .modal__close { position: absolute; right: 14px; top: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid rgba(250, 249, 249, .22); border-radius: 2px 2px 2px 12px; background: rgba(7, 31, 25, .82); color: var(--white); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .5); font: 600 var(--fs-label)/1 var(--font-label); letter-spacing: .2em; text-transform: uppercase; --focus: var(--gold-light); } .modal__close svg { width: 16px; height: 16px; } .modal__close:hover { border-color: var(--gold); } .modal__head { position: relative; padding: 34px 32px 26px; background: radial-gradient(120% 120% at 100% 0%, #1a5c4a 0%, var(--maroon) 50%, #0b3027 100%); color: var(--white); overflow: hidden; } .modal__head::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(90deg, rgba(216, 164, 68, .07) 1px, transparent 1px); background-size: 48px 100%; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000, transparent); mask-image: linear-gradient(180deg, #000, transparent); } .modal__title { margin-top: 14px; font: 500 clamp(2rem, 1.6rem + 1.4vw, 2.7rem)/1.04 var(--font-serif); letter-spacing: -.01em; } .modal__head .modal__title em { color: var(--gold-light); } .modal__sub { margin-top: 12px; max-width: 46ch; font-size: .92rem; line-height: 1.55; color: rgba(250, 249, 249, .78); } .modal__returning { margin: 22px 32px 0; padding: 16px 18px; border: 1px solid var(--line-gold); border-radius: 2px 2px 2px 14px; background: rgba(216, 164, 68, .08); font-size: .92rem; } .modal__returning-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .seats--modal { margin: 0; padding: 18px 32px; border-bottom: 1px solid var(--line); background: #F6F0E4; } .seats--modal .seats__empty { color: var(--maroon); } .seats--modal .seats__empty::before { background: var(--maroon); box-shadow: 0 0 0 4px rgba(15, 64, 52, .14); } .seats--modal .seats__label { color: var(--gold-ink); } .seats--modal .seats__bar { color: var(--maroon); } .seats--modal .seats__line { color: var(--ink); } .seats--modal .seats__aside { color: var(--muted); } .wl-form { display: grid; gap: 18px; padding: 24px 32px 30px; } .field-row { display: grid; gap: 18px; } .modal__crest { display: none; } /* Two panes on wider screens (heritage): a maroon brand pane beside the form, so every field and the submit button fit a 1440×900 viewport. Phones keep one scrolling pane. */ @media (min-width: 900px) { .modal { width: min(1040px, 100% - 48px); border-radius: 0 0 0 32px; } .modal__view--form { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: 100%; } .modal__aside { display: flex; flex-direction: column; background: radial-gradient(120% 90% at 100% 0%, #1a5c4a 0%, var(--maroon) 46%, #092a22 100%); color: var(--white); } .modal__aside .modal__head { padding: 44px 36px 18px; background: none; } .modal__aside .modal__head::after { display: none; } .modal__aside .seats--modal { margin: 8px 36px 0; padding: 18px 0 0; border-top: 1px solid rgba(216, 164, 68, .3); border-bottom: 0; background: none; } .modal__aside .seats--modal .seats__empty { color: var(--gold-light); } .modal__aside .seats--modal .seats__empty::before { background: var(--gold); box-shadow: 0 0 0 4px rgba(216, 164, 68, .18); } .modal__aside .seats--modal .seats__label { color: var(--gold); } .modal__aside .seats--modal .seats__bar { color: var(--gold); } .modal__aside .seats--modal .seats__line { color: var(--white); } .modal__aside .seats--modal .seats__aside { color: rgba(250, 249, 249, .7); } .modal__crest { display: flex; align-items: center; gap: 16px; margin-top: auto; padding: 28px 36px 34px; color: var(--gold); } .modal__crest img { width: 54px; height: auto; flex: none; } .modal__crest svg { width: 150px; height: auto; } .modal__main { padding-top: 66px; } .modal__main .wl-form { gap: 14px; padding: 30px 36px 28px; } /* clears the floating Close pill */ .modal__returning { margin: 22px 36px 0; } .field-row { grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; } .modal__main .field__input { min-height: 46px; } .modal__main .choice__box { padding: 12px 10px 10px 38px; } .modal__main .field__help { font-size: .76rem; } } .field { display: grid; gap: 7px; margin: 0; padding: 0; border: 0; min-width: 0; } .field__label { padding: 0; font: 600 .82rem/1.3 var(--font-sans); color: var(--ink); } .field__opt { font-weight: 400; color: var(--muted); } .field__input { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 3px 3px 3px 14px; background: #fff; font-size: 1rem; color: var(--ink); transition: border-color .25s, box-shadow .25s; } .field__input::placeholder { color: rgba(23, 18, 19, .4); } .field__input:hover { border-color: rgba(23, 18, 19, .3); } /* Focus: the system ring (2px solid, ≥3:1) on every control; §38 recolours it per house/surface. */ .field__input:focus { border-color: var(--accent, var(--maroon)); outline: 2px solid var(--focus); outline-offset: 2px; } .field__input[aria-invalid="true"] { border-color: #B3261E; box-shadow: 0 0 0 3px rgba(179, 38, 30, .12); } .field__help { font-size: .8rem; color: var(--muted); } .field__error { font-size: .82rem; font-weight: 500; color: #B3261E; } .select { position: relative; } .select::after { content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 1.5px solid var(--maroon); border-bottom: 1.5px solid var(--maroon); transform: rotate(45deg); pointer-events: none; } .select select { appearance: none; -webkit-appearance: none; padding-right: 40px; } .choice-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .choice { position: relative; display: block; cursor: pointer; } .choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .choice__box { display: grid; gap: 4px; height: 100%; padding: 14px 12px 12px 40px; border: 1px solid var(--line-2); border-radius: 3px 3px 3px 14px; background: #fff; transition: border-color .25s, background .25s, box-shadow .25s; position: relative; } .choice__box::before { content: ""; position: absolute; left: 14px; top: 15px; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid rgba(23, 18, 19, .3); background: #fff; transition: border .25s; } .choice__box b { font: 600 .84rem/1.25 var(--font-sans); color: var(--ink); } .choice__box small { font-size: .74rem; line-height: 1.35; color: var(--muted); } .choice input:focus-visible + .choice__box { outline: 2px solid var(--accent, var(--maroon)); outline-offset: 2px; } .modal .choice input:focus-visible + .choice__box { outline-offset: 0; } .modal .field--program > .field__label { margin-bottom: 6px; } .modal__title:focus { outline: none; } .pill-radios { display: flex; flex-wrap: wrap; gap: 8px; } .pill { position: relative; } .pill input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .pill span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 2px 2px 2px 12px; font-size: .88rem; font-weight: 500; background: #fff; transition: border-color .25s, background .25s, color .25s; } .pill input:checked + span { border-color: var(--maroon); background: var(--maroon); color: var(--white); } .pill input:focus-visible + span { outline: 2px solid var(--maroon); outline-offset: 2px; } .consent { font-size: .8rem; line-height: 1.5; color: var(--muted); } .consent a { color: var(--maroon); } .form-alert { padding: 12px 14px; border-radius: 2px 2px 2px 12px; background: rgba(179, 38, 30, .08); border: 1px solid rgba(179, 38, 30, .3); color: #8E1E17; font-size: .88rem; } .wl-form[aria-busy="true"] [data-submit] { opacity: .75; pointer-events: none; } .modal__success { padding: 56px 32px 34px; text-align: left; } .modal__success-mark .tally { --th: 30px; --tw: 3px; --tg: 6px; color: var(--maroon); } .modal__success .eyebrow { margin-top: 26px; } .modal__success .modal__title { color: var(--ink); outline: none; } .modal__body { margin-top: 14px; font-size: 1rem; color: var(--ink); } .modal__next { margin-top: 10px; color: var(--muted); } .modal__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; } .modal__tg { margin-top: 18px; font-size: .88rem; color: var(--muted); } .modal__tg a { color: var(--maroon); } .modal__success:not([hidden]) .tally__gate i, .modal__success:not([hidden]) .tally__gate b { animation: stroke-in .6s var(--ease-out) both; } .modal__success:not([hidden]) .tally__gate i:nth-child(2) { animation-delay: .08s; } .modal__success:not([hidden]) .tally__gate i:nth-child(3) { animation-delay: .16s; } .modal__success:not([hidden]) .tally__gate i:nth-child(4) { animation-delay: .24s; } .modal__success:not([hidden]) .tally__gate b { animation-name: slash-in; animation-delay: .4s; } @keyframes stroke-in { from { transform: scaleY(0); } } @keyframes slash-in { from { transform: rotate(-26deg) scaleX(0); } } @media (max-width: 599px) { .modal { width: 100%; height: 100vh; height: 100dvh; border-radius: 0; margin: 0; } .modal__panel { height: 100%; max-height: none; border-radius: 0; } .modal__head { padding: 76px 20px 22px; } .seats--modal, .wl-form { padding-inline: 20px; } .modal__returning { margin-inline: 20px; } .choice-cards { grid-template-columns: 1fr; } .modal__success { padding: 80px 20px 30px; } } /* ---------- 23 · Motion system (gated behind html.js; off under reduced motion) ---------- */ html.js [data-reveal] { opacity: 0; translate: 0 26px; transition: opacity 1s var(--ease), translate 1.1s var(--ease), clip-path 1.2s var(--ease); transition-delay: var(--rd, 0s); } html.js [data-reveal="fade"] { translate: none; } html.js [data-reveal="mask"] { opacity: 1; translate: 0 .18em; clip-path: inset(-20% -6% 120% -6%); } html.js [data-reveal="stagger"] { opacity: 1; translate: none; } html.js [data-reveal="stagger"] > * { opacity: 0; translate: 0 28px; transition: opacity .9s var(--ease) calc(var(--i, 0) * 80ms), translate 1.1s var(--ease) calc(var(--i, 0) * 80ms), box-shadow .6s var(--ease), border-color .6s var(--ease), background .5s var(--ease); } /* End state: no clip-path, so revealed cards keep their soft shadows; only the text mask animates between insets */ html.js [data-reveal].is-in { opacity: 1; translate: none; clip-path: none; } html.js [data-reveal="mask"].is-in { clip-path: inset(-20% -6% -20% -6%); } html.js [data-reveal="stagger"].is-in > * { opacity: 1; translate: none; } /* Focused before its reveal fired (keyboard): show it now, with no stagger delay */ html.js [data-reveal]:focus-within, html.js [data-reveal="stagger"] > :focus-within { opacity: 1; translate: none; clip-path: none; transition-delay: 0s; } html.js [data-reveal="stagger"].is-in > .house:hover { translate: 0 -4px; } html.js [data-reveal="stagger"].is-in > .country:hover { translate: 0 -3px; } /* Tallies draw in when their block is revealed */ html.js .is-in .tally__gate i, html.js .tally.is-in .tally__gate i { animation: stroke-in .7s var(--ease-out) both; animation-delay: calc(.25s + var(--ti, 0) * 55ms); } html.js .is-in .tally__gate b { animation: slash-in .7s var(--ease-out) both; animation-delay: calc(.25s + var(--ti, 0) * 55ms); } /* Hover tilt (fine pointers; set by main.js through --rx/--ry) */ [data-tilt] { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition-property: transform, opacity, translate, box-shadow, border-color, background; transition-duration: .7s, .9s, 1.1s, .6s, .6s, .5s; transition-timing-function: var(--ease-out); } [data-tilt].is-tilting { transition-duration: .12s, .9s, 1.1s, .6s, .6s, .5s; } /* Magnetic buttons: translate set by main.js through --tx/--ty */ [data-magnetic] { translate: var(--tx, 0) var(--ty, 0); } /* Toasts (toast() in main.js): polite live region, bottom centre, above the header and menu */ .toast-region { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 95; translate: -50% 0; display: grid; gap: 8px; justify-items: center; width: min(100% - 32px, 440px); pointer-events: none; } .toast { padding: 12px 18px; border-radius: 3px 3px 3px 14px; background: var(--ink, #171213); color: #fff; box-shadow: var(--shadow-3); font-size: .9rem; line-height: 1.4; pointer-events: none; /* plain toasts never block clicks */ opacity: 0; translate: 0 10px; transition: opacity .3s var(--ease), translate .4s var(--ease); } .toast.is-in { opacity: 1; translate: none; } .toast--success { border-left: 3px solid var(--gold); } .toast--error { background: var(--maroon); } @media (prefers-reduced-motion: reduce) { .toast { transition: none; translate: none; } } /* ---------- 24 · Placeholder view (?fill=1) ---------- */ html.fill-view .fill { outline: 1.5px dashed #D97706; outline-offset: 2px; background: rgba(217, 119, 6, .12); border-radius: 2px; cursor: help; } .fill-banner { position: fixed; left: 16px; bottom: 16px; z-index: 90; display: flex; align-items: center; gap: 14px; max-width: calc(100% - 32px); padding: 10px 10px 10px 16px; border-radius: 3px 3px 3px 14px; background: #1f1a12; color: #fff; box-shadow: var(--shadow-3); font-size: .84rem; } .fill-banner__hide { min-height: 36px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 2px 2px 2px 10px; background: transparent; color: #fff; font: 600 var(--fs-label)/1 var(--font-label); letter-spacing: .18em; text-transform: uppercase; } /* ---------- 25 · Media: reduced motion, forced colors, print ---------- */ @media (prefers-reduced-motion: reduce) { html.js [data-reveal], html.js [data-reveal="stagger"] > *, html.js .hero [data-hero-in], html.js .hero [data-hero-rise], html.js .hero__dateline, html.js .hero__foot { opacity: 1 !important; translate: none !important; clip-path: none !important; transition: none !important; } .seat-dot::after { animation: none; } html.js .tally__gate i, html.js .tally__gate b { animation: none !important; } [data-tilt] { transform: none !important; } .dossier__card, .dossier__slot { transition: none; } [data-magnetic] { translate: none !important; } .modal[open], .modal[open]::backdrop, .modal.is-closing { animation: none; } .menu, .menu__link { transition: none; } .faq-a { transition: none; } } /* App never booted (module blocked): show everything */ html.no-app [data-reveal], html.no-app [data-reveal="stagger"] > * { opacity: 1; translate: none; clip-path: none; } html.no-app .tally__gate i, html.no-app .tally__gate b { transform: none; } html.no-app .tally__gate b { transform: rotate(-26deg); } /* Telegram pill (phones only; created by main.js applyContacts() once config.contact.telegram is set) */ .tg-pill { display: none; } @media (max-width: 639px) { .tg-pill { position: fixed; z-index: 40; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--accent, var(--maroon)); color: var(--white); font: 600 .72rem/1 var(--font-label); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; box-shadow: 0 10px 28px -12px rgba(0, 0, 0, .45); } html.menu-open .tg-pill, html.modal-open .tg-pill, body[data-page="book"] .tg-pill { display: none; } } @media print { .tg-pill { display: none !important; } } @media (forced-colors: active) { .btn, .choice__box, .pill span { border: 1px solid CanvasText; } .tally__gate i, .tally__gate b { background: CanvasText; forced-color-adjust: none; } /* Selected state is only a background colour, which forced colours removes: use system Highlight. */ .chip[aria-pressed="true"], .chip.is-active, .pill input:checked + span { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; } .pill input:focus-visible + span { outline: 2px solid Highlight; outline-offset: 2px; } /* The inline header logo keeps its crest; the wordmark and tagline follow the system text colour. */ .brand__svg { forced-color-adjust: none; } .brand__wm, .brand__tag { fill: CanvasText !important; } } @media print { .site-header, .menu, .marquee, .modal, .fill-banner, .grain { display: none !important; } .section, .hero { padding-block: 24px; min-height: 0; background: #fff !important; color: #000 !important; } html.js [data-reveal], html.js [data-reveal="stagger"] > * { opacity: 1 !important; translate: none !important; clip-path: none !important; } } /* Cross-document view transitions (BRIEF §5) */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; } /* Lining figures everywhere: the Cormorant latin files ship with lining digits mapped as the default glyphs (lnum frozen into the cmap; see DESIGN-SYSTEM §3.4), so no universal !important is needed and any component can still opt into tabular figures with font-variant-numeric. */ .tnum { font-variant-numeric: lining-nums tabular-nums; } /* opt-in tabular figures */ /* ===================================================================================== 26–40 · Design-system components (site-wide; reference: docs/DESIGN-SYSTEM.md) ------------------------------------------------------------------------------------- 26 House + surface tokens 31 Stats 36 Tooltip · toast 41 Skeletons 27 Buttons (more) 32 Accordion 37 Lightbox · dialogs 42 Print 28 Page hero · breadcrumbs 33 Tabs · segmented 38 Forms (system) 43 Academy theme 29 Type extras · prose 34 Chips · badges 39 Stepper · autosave 30 Cards 35 Table · steps · quote · CTA band Components read --c-* surface tokens, so the same markup works on ivory, paper, maroon, ink and navy grounds, and they read --accent/--metal house tokens, so body.theme-academy restyles them for navy and silver. ===================================================================================== */ /* ---------- 26 · House + surface tokens ---------- */ body { /* House tokens (Group). Declared on body so body.theme-academy can swap them. */ --accent: var(--maroon); --accent-hover: var(--maroon-bright); --accent-deep: var(--maroon-deep); --accent-ink: var(--maroon-ink); --accent-tint: rgba(15, 64, 52, .04); --accent-ring: rgba(15, 64, 52, .14); --metal: var(--gold); --metal-light: var(--gold-light); --metal-deep: var(--gold-deep); --metal-text: var(--gold-ink); --metal-line: rgba(216, 164, 68, .38); --metal-tint: rgba(216, 164, 68, .12); --on-metal: var(--maroon-ink); --house-grad: radial-gradient(120% 80% at 50% 0%, #14503f 0%, var(--maroon) 46%, #0c3329 100%); --house-grad-ink: radial-gradient(120% 70% at 20% 0%, #0a2921 0%, var(--maroon-ink) 50%, #05150f 100%); --house-panel: radial-gradient(110% 120% at 85% 0%, #1a5c4a 0%, var(--maroon) 44%, #0a2e25 100%); /* Surface tokens: light ground (ivory, paper) */ --c-fg: var(--ink); --c-muted: var(--muted); --c-line: var(--line-2); --c-line-soft: var(--line); --c-surface: var(--card); --c-surface-2: var(--paper); --c-field: #fff; --c-accent: var(--accent); --c-accent-hover: var(--accent-hover); --c-on-accent: var(--white); --c-num: var(--metal-text); --c-label: var(--metal-text); --c-em: var(--accent); --c-rule: rgba(168, 122, 34, .55); } /* Dark grounds: any [data-tone="dark"] section, the maroon/ink/navy section classes, or .surface-dark */ [data-tone="dark"], .section--maroon, .section--ink, .section--navy, .surface-dark { --c-fg: var(--white); --c-muted: rgba(250, 249, 249, .72); --c-line: rgba(250, 249, 249, .16); --c-line-soft: rgba(250, 249, 249, .1); --c-surface: rgba(250, 249, 249, .045); --c-surface-2: rgba(250, 249, 249, .07); --c-field: rgba(250, 249, 249, .06); --c-accent: var(--metal); --c-accent-hover: var(--metal-light); --c-on-accent: var(--on-metal); --c-num: var(--metal); --c-label: var(--metal); --c-em: var(--metal-light); --c-rule: rgba(216, 164, 68, .6); --focus: var(--metal-light); } /* Navy is Academy ground on either house: silver accents */ .section--navy, .surface-navy, .page-hero--navy, .cta-band--navy { --metal: var(--silver); --metal-light: var(--silver-hi); --metal-line: rgba(177, 178, 182, .4); --on-metal: var(--navy); --c-fg: var(--silver-hi); --c-muted: rgba(230, 232, 236, .72); --c-line: rgba(230, 232, 236, .16); --c-line-soft: rgba(230, 232, 236, .1); --c-accent: var(--silver-hi); --c-accent-hover: #fff; --c-on-accent: var(--navy); --c-num: var(--silver-hi); --c-label: var(--silver); --c-em: var(--silver-hi); --c-rule: rgba(230, 232, 236, .5); --focus: var(--silver-hi); } .surface-light { --c-fg: var(--ink); --c-muted: var(--muted); --c-line: var(--line-2); --c-line-soft: var(--line); --c-surface: var(--card); --c-surface-2: var(--paper); --c-field: #fff; --c-accent: var(--accent); --c-accent-hover: var(--accent-hover); --c-on-accent: var(--white); --c-num: var(--metal-text); --c-label: var(--metal-text); --c-em: var(--accent); --c-rule: rgba(168, 122, 34, .55); --focus: var(--accent); color: var(--ink); } .surface-maroon { background: var(--house-grad); color: var(--white); } .surface-ink { background: var(--house-grad-ink); color: var(--white); } .surface-navy { background: radial-gradient(120% 80% at 70% 0%, #19253c 0%, var(--navy) 48%, var(--navy-deep) 100%); color: var(--silver-hi); } .section--house { background: var(--house-grad); color: var(--white); } .section--house-ink { background: var(--house-grad-ink); color: var(--white); } :is(.page-hero--navy, .surface-navy) .eyebrow { color: var(--silver); } :is(.page-hero--navy, .surface-navy) .chapter__num { color: var(--silver-hi); } :is(.page-hero--navy, .surface-navy) .chapter::after { background: linear-gradient(90deg, rgba(230, 232, 236, .5), rgba(230, 232, 236, .12) 55%, transparent); } :is(.page-hero--navy, .surface-navy) .link-arrow { color: var(--silver-hi); } /* Dark panels inside light sections keep their dark-ground button and seat styles */ :is(.cta-band:not(.cta-band--light), .card--dark, .surface-dark, .dialog--dark, .page-hero:not(.page-hero--ivory)) .btn--outline { border-color: rgba(216, 164, 68, .62); color: var(--white); background: transparent; } :is(.cta-band:not(.cta-band--light), .card--dark, .surface-dark, .dialog--dark, .page-hero:not(.page-hero--ivory)) .btn--outline:hover { border-color: var(--gold); background: rgba(216, 164, 68, .12); } :is(.cta-band:not(.cta-band--light), .card--dark, .surface-dark, .dialog--dark) .seat-dot { background: var(--metal); } :is(.cta-band:not(.cta-band--light), .card--dark, .surface-dark, .dialog--dark) .seat-dot::after { border-color: var(--metal); } :is(.cta-band:not(.cta-band--light), .card--dark, .surface-dark, .dialog--dark) .link-arrow { color: var(--metal-light); } /* ---------- 27 · Buttons (more variants, sizes, states) ---------- */ /* .btn--primary: the house's main action on any ground (gold on dark, maroon on light; silver/navy on Academy) */ .btn--primary { background: var(--c-accent); color: var(--c-on-accent); } .btn--primary:hover { background: var(--c-accent-hover); } .btn--secondary { border-color: var(--c-accent); color: var(--c-accent); background: transparent; } .btn--secondary:hover { background: var(--accent-tint); } :is([data-tone="dark"], .surface-dark, .section--navy) .btn--secondary:hover { background: rgba(250, 249, 249, .08); } .btn--ghost { border-color: var(--c-line); color: var(--c-fg); } .btn--ghost:hover { border-color: var(--c-accent); color: var(--c-accent); } .btn--text { min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--c-accent); border-radius: 2px; } .btn--text:hover { text-decoration: underline; text-underline-offset: .3em; } .btn--xs { --btn-h: 36px; padding: 0 14px; font-size: var(--fs-label-sm); letter-spacing: .14em; gap: 8px; } @media (pointer: coarse) { .btn--xs { --btn-h: 44px; } } .btn--icon { width: var(--btn-h); padding: 0; } .btn--icon svg { width: 18px; height: 18px; } .btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; cursor: not-allowed; } .btn[aria-busy="true"] { color: transparent !important; pointer-events: none; } .btn[aria-busy="true"]::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 2px solid currentColor; border-radius: 50%; border-right-color: transparent; color: var(--btn-spin, var(--c-on-accent)); animation: spin .8s linear infinite; } .btn--ghost[aria-busy="true"]::after, .btn--secondary[aria-busy="true"]::after, .btn--outline[aria-busy="true"]::after { color: var(--c-accent); } @keyframes spin { to { transform: rotate(360deg); } } .spinner { display: inline-block; width: 20px; height: 20px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; color: var(--c-accent); animation: spin .8s linear infinite; vertical-align: middle; } @media (max-width: 359px) { .btn { white-space: normal; text-align: center; line-height: 1.25; padding-block: 10px; } } :is(.section--navy, .surface-navy, .page-hero--navy, .cta-band--navy) .btn--outline { border-color: rgba(230, 232, 236, .5); color: var(--silver-hi); } :is(.section--navy, .surface-navy, .page-hero--navy, .cta-band--navy) .btn--outline:hover { border-color: var(--silver-hi); background: rgba(230, 232, 236, .08); } /* ---------- 28 · Inner-page hero + breadcrumbs ----------
… see the style guide */ .page-hero { position: relative; isolation: isolate; overflow: hidden; padding: calc(var(--header-h) + clamp(40px, 6vw, 96px)) 0 clamp(64px, 8vw, 128px); background: var(--house-grad); color: var(--white); } .page-hero--maroon { background: radial-gradient(120% 90% at 85% 0%, #1a5c4a 0%, var(--maroon) 42%, #0a2e25 100%); } .page-hero--navy { background: radial-gradient(120% 90% at 85% 0%, #1d2a44 0%, var(--navy) 46%, var(--navy-deep) 100%); color: var(--silver-hi); } .page-hero--ink { background: var(--house-grad-ink); } .page-hero--ivory { background: var(--ivory); color: var(--ink); } .page-hero > .wrap { position: relative; z-index: 1; } .page-hero__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; } .page-hero__main { grid-column: 1 / span 8; min-width: 0; } .page-hero__side { grid-column: 9 / span 4; min-width: 0; } .page-hero .breadcrumbs { margin-bottom: clamp(28px, 4vw, 52px); } .page-hero__title { margin-top: clamp(18px, 2vw, 28px); font: 500 clamp(2.9rem, 1.5rem + 4.4vw, 6rem)/.98 var(--font-serif); letter-spacing: -.02em; text-wrap: balance; } .page-hero__title em { font-style: italic; color: var(--c-em); } .page-hero__lede { margin-top: clamp(18px, 2vw, 28px); max-width: 50ch; font-size: clamp(1.05rem, .98rem + .3vw, 1.22rem); line-height: 1.6; color: var(--c-muted); text-wrap: pretty; } .page-hero__actions { margin-top: clamp(26px, 3vw, 40px); } .page-hero__meta { display: flex; flex-wrap: wrap; gap: 14px 36px; margin-top: clamp(36px, 4vw, 56px); padding-top: 20px; border-top: 1px solid var(--c-line); } .page-hero__meta div { display: grid; gap: 4px; } .page-hero__meta dt { font: 600 var(--fs-label)/1.3 var(--font-label); letter-spacing: .22em; text-transform: uppercase; color: var(--c-label); } .page-hero__meta dd { margin: 0; font: 500 1.2rem/1.2 var(--font-serif); color: var(--c-fg); } /* Ornament: the crest's outline as an engraved frame, drifting off the right edge */ /* Kept to the outer ~30% (never under the text column), faded toward the text with a mask; hidden in centred heroes and below 1100px. */ .page-hero__ornament { position: absolute; right: -14vw; top: 50%; z-index: 0; width: clamp(240px, 30vw, 460px); translate: 0 -46%; pointer-events: none; opacity: .26; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%); mask-image: linear-gradient(90deg, transparent 0%, #000 45%); } .page-hero--center .page-hero__ornament { display: none; } @media (max-width: 1099px) { .page-hero__ornament { display: none; } } .page-hero__ornament svg { width: 100%; height: auto; --crest-frame: var(--metal); overflow: visible; } .page-hero__ornament::after { content: ""; position: absolute; inset: 2% 0 0 2%; border-radius: 0 0 0 38%; background: linear-gradient(90deg, transparent 49.6%, var(--metal-line) 49.6%, var(--metal-line) 50.4%, transparent 50.4%), linear-gradient(180deg, transparent 45.6%, var(--metal-line) 45.6%, var(--metal-line) 46.4%, transparent 46.4%); opacity: .5; } .page-hero--navy .page-hero__ornament svg { --crest-frame: var(--silver); } .page-hero--navy .page-hero__ornament::after { background: linear-gradient(90deg, transparent 49.6%, rgba(230, 232, 236, .3) 49.6%, rgba(230, 232, 236, .3) 50.4%, transparent 50.4%), linear-gradient(180deg, transparent 45.6%, rgba(230, 232, 236, .3) 45.6%, rgba(230, 232, 236, .3) 46.4%, transparent 46.4%); } .page-hero--ivory .page-hero__ornament { opacity: .3; } .page-hero--ivory .page-hero__ornament svg { --crest-frame: var(--metal-deep); } .page-hero--compact { padding-bottom: clamp(44px, 5vw, 72px); } .page-hero--compact .page-hero__title { font-size: clamp(2.5rem, 1.6rem + 3vw, 4.4rem); } .page-hero--center .page-hero__main { grid-column: 2 / span 10; text-align: center; } .page-hero--center .page-hero__lede { margin-inline: auto; } .page-hero--center .breadcrumbs ol, .page-hero--center .page-hero__actions, .page-hero--center .page-hero__meta { justify-content: center; } @media (max-width: 959px) { .page-hero__main, .page-hero__side, .page-hero--center .page-hero__main { grid-column: 1 / -1; } .page-hero__side { margin-top: 36px; } } @media (max-width: 599px) { .page-hero__actions .btn { width: 100%; } } .breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0; padding: 0; list-style: none; } .breadcrumbs li { display: inline-flex; align-items: center; font: 600 var(--fs-label)/1.3 var(--font-label); letter-spacing: .2em; text-transform: uppercase; color: var(--c-muted); } .breadcrumbs li + li::before { content: ""; width: 14px; height: 1px; margin-inline: 12px; background: var(--c-rule); } .breadcrumbs a { display: inline-flex; align-items: center; min-height: 32px; color: inherit; text-decoration: none; } .breadcrumbs a:hover { color: var(--c-fg); text-decoration: underline; text-decoration-color: var(--c-accent); } .breadcrumbs [aria-current="page"] { color: var(--c-label); } @media (pointer: coarse) { .breadcrumbs a { min-height: 44px; } } /* ---------- 29 · Type extras + prose ---------- */ /* Code and token names: plain hyphens (no ligatures), never broken across lines */ code { font-variant-ligatures: none; } .token { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .88em; white-space: nowrap; } .h1 { font: 500 clamp(2.9rem, 1.5rem + 4.4vw, 6rem)/.98 var(--font-serif); letter-spacing: -.02em; text-wrap: balance; } .h3 { font: 500 clamp(1.5rem, 1.2rem + .9vw, 2.05rem)/1.12 var(--font-serif); letter-spacing: -.008em; text-wrap: balance; } .h4 { font: 600 1.06rem/1.35 var(--font-sans); } .h1 em, .h3 em { font-style: italic; color: var(--c-em); } .kicker { font: 600 var(--fs-label)/1.3 var(--font-label); letter-spacing: .22em; text-transform: uppercase; color: var(--c-label); } .display { font: 400 clamp(3.4rem, 2rem + 5vw, 7rem)/.9 var(--font-display); letter-spacing: .005em; } .muted { color: var(--c-muted); } .text-accent { color: var(--c-accent); } .rule { height: 1px; margin-block: clamp(32px, 4vw, 56px); border: 0; background: linear-gradient(90deg, var(--c-rule), var(--c-line) 50%, transparent); } .rule--center { background: linear-gradient(90deg, transparent, var(--c-rule) 50%, transparent); } .prose { max-width: 68ch; color: var(--c-fg); } .prose > * + * { margin-top: 1.1em; } .prose h2 { margin-top: 2em; font: 500 clamp(1.8rem, 1.4rem + 1.2vw, 2.5rem)/1.1 var(--font-serif); letter-spacing: -.01em; } .prose h3 { margin-top: 1.7em; font: 600 1.12rem/1.35 var(--font-sans); } .prose ul, .prose ol { padding-left: 1.3em; } .prose li + li { margin-top: .4em; } .prose li::marker { color: var(--c-num); } .prose a { color: var(--c-accent); text-decoration-color: var(--c-rule); } .prose a:hover { text-decoration-color: currentColor; } .prose strong { font-weight: 600; } .prose blockquote { padding-left: 20px; border-left: 2px solid var(--c-rule); font: italic 500 1.3rem/1.4 var(--font-serif); } .prose hr { height: 1px; border: 0; background: var(--c-line); } .prose small, .prose .tm { color: var(--c-muted); } /* ---------- 30 · Cards (shield corner) ---------- .card [.card--link | --flat | --dark | --feature | --accent | --frame] > .card__media? .card__body > .card__kicker .card__title .card__text .card__foot */ .grid { display: grid; gap: var(--gap); } .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1023px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 639px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } } .card { position: relative; display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--c-line-soft); border-radius: 2px 2px 2px var(--shield-r-card); background: var(--c-surface); color: var(--c-fg); box-shadow: var(--shadow-1); transition: box-shadow .6s var(--ease), border-color .6s var(--ease), translate .6s var(--ease); } :is([data-tone="dark"], .surface-dark, .section--navy) .card { box-shadow: none; } .card__media { position: relative; overflow: hidden; aspect-ratio: 3 / 2; border-radius: 2px 2px 0 0; background: var(--ivory-2); } .card__media img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s var(--ease); } .card__body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: clamp(20px, 2vw, 28px); } .card__kicker { font: 600 var(--fs-label)/1.3 var(--font-label); letter-spacing: .22em; text-transform: uppercase; color: var(--c-label); } .card__num { font: italic 500 1.25rem/1 var(--font-serif); color: var(--c-num); } .card__title { font: 500 clamp(1.4rem, 1.2rem + .6vw, 1.75rem)/1.15 var(--font-serif); letter-spacing: -.006em; text-wrap: balance; } .card__title a { text-decoration: none; color: inherit; } .card__text { font-size: .96rem; line-height: 1.6; color: var(--c-muted); } .card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--c-line-soft); } /* The whole card is a link: the title link stretches over it */ .card--link .card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; } .card--link:hover, .card--link:focus-within { border-color: var(--c-rule); box-shadow: var(--shadow-2); translate: 0 -3px; } .card--link:hover .card__media img { scale: 1.04; } .card--link:has(.card__title a:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; } .card--link .card__title a:focus-visible { outline: none; } .card--flat { box-shadow: none; background: transparent; } .card--feature { border-radius: 2px 2px 2px var(--shield-r); } .card--feature .card__media { aspect-ratio: 16 / 10; } .card--feature .card__body { padding: clamp(24px, 3vw, 44px); } .card--feature .card__title { font-size: clamp(1.8rem, 1.4rem + 1.3vw, 2.6rem); } .card--dark { --c-fg: var(--white); --c-muted: rgba(250, 249, 249, .74); --c-line-soft: rgba(250, 249, 249, .12); --c-num: var(--metal); --c-label: var(--metal); --c-rule: rgba(216, 164, 68, .6); --c-accent: var(--metal); --c-on-accent: var(--on-metal); --focus: var(--metal-light); background: var(--house-panel); border-color: transparent; color: var(--white); } .card--accent { border-top: 2px solid var(--c-accent); } .card--frame::before { content: ""; position: absolute; inset: 7px; z-index: 0; pointer-events: none; border: 1px solid var(--c-rule); border-radius: 1px 1px 1px calc(var(--shield-r-card) - 5px); opacity: .55; } .card--frame.card--feature::before { border-radius: 1px 1px 1px calc(var(--shield-r) - 5px); } .card > * { position: relative; } @media (prefers-reduced-motion: reduce) { .card, .card__media img { transition: none; } .card--link:hover, .card--link:focus-within { translate: none; } } /* ---------- 31 · Stat blocks (ledger) ---------- .stats [.stats--2|--4|--5|--plain|--keep2] > .stats__item > .stats__kicker (> i numeral) .stats__num (> small) .stats__label .stats__note */ .stats { --cols: 3; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); border-top: 2px solid var(--c-fg); } .stats--2 { --cols: 2; } .stats--4 { --cols: 4; } .stats--5 { --cols: 5; } .stats__item { display: grid; align-content: start; gap: 8px; min-width: 0; padding: clamp(20px, 2.4vw, 32px) clamp(16px, 2vw, 28px) clamp(22px, 2.6vw, 34px); border-bottom: 1px solid var(--c-line); } .stats__item + .stats__item { border-left: 1px solid var(--c-line); } .stats__kicker { display: flex; align-items: baseline; gap: 10px; font: 600 var(--fs-label)/1.3 var(--font-label); letter-spacing: .24em; text-transform: uppercase; color: var(--c-label); } .stats__kicker i { font: italic 500 1.15rem/1 var(--font-serif); letter-spacing: 0; text-transform: none; color: var(--c-num); } /* Matches the home proof ledger (canonical): accent-coloured Anton figures, Inter labels; a figure never carries a "+" unless FACTS.md states it as a floor. */ .stats__num { font: 400 clamp(2.8rem, 1.9rem + 2.6vw, 4.6rem)/.95 var(--font-display); letter-spacing: .005em; color: var(--c-accent); } .stats__num small { font: 500 .9rem/1 var(--font-sans); margin-left: 6px; color: var(--c-muted); } .stats__label { max-width: 26ch; font: 400 .98rem/1.45 var(--font-sans); color: var(--c-fg); } .stats__note { font-size: .82rem; line-height: 1.5; color: var(--c-muted); } .stats--plain { border-top: 0; } .stats--plain .stats__item { border-bottom: 0; } @media (max-width: 959px) { .stats.stats--4, .stats.stats--5, .stats { --cols: 2; } .stats__item + .stats__item { border-left: 0; } .stats__item:nth-child(2n) { border-left: 1px solid var(--c-line); } } @media (max-width: 479px) { .stats.stats--2, .stats.stats--4, .stats.stats--5, .stats { --cols: 1; } .stats__item:nth-child(2n) { border-left: 0; } } /* .stats--keep2: short numeric ledgers (2 × 2) stay two-up on phones instead of stacking */ @media (max-width: 479px) { .stats.stats--keep2 { --cols: 2; } .stats--keep2 .stats__item:nth-child(2n) { border-left: 1px solid var(--c-line); } } /* ---------- 32 · Accordion (native
; give a group the same name="…" to make it exclusive) ---------- .accordion > details.acc > summary.acc__q (> .acc__n? .acc__text .acc__icon) + .acc__a */ .accordion { border-top: 1px solid var(--c-line); } .acc { border-bottom: 1px solid var(--c-line); } .acc__q { display: grid; grid-template-columns: auto 1fr 40px; align-items: center; gap: 8px 14px; min-height: 72px; padding: 16px 0; cursor: pointer; list-style: none; color: var(--c-fg); } .acc__q::-webkit-details-marker { display: none; } .acc__q::marker { content: ""; } .acc__q:focus-visible { outline-offset: 2px; } .acc__n { min-width: 28px; font: italic 600 1.05rem/1 var(--font-serif); color: var(--c-num); } .acc__text { grid-column: 2; font: 500 clamp(1.2rem, 1.06rem + .5vw, 1.5rem)/1.25 var(--font-serif); transition: color .3s; } .acc__q:hover .acc__text { color: var(--c-accent); } .acc__icon { grid-column: 3; justify-self: end; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--c-line); border-radius: 50%; color: var(--c-accent); transition: transform .5s var(--ease), background-color .3s, border-color .3s, color .3s; } .acc__icon svg { width: 16px; height: 16px; } .acc[open] > .acc__q .acc__icon { transform: rotate(45deg); background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); } .acc__a { padding: 0 52px 24px 0; max-width: 68ch; color: var(--c-muted); } .acc__q:has(.acc__n) + .acc__a { padding-left: 42px; } .acc__a > * + * { margin-top: .8em; } .acc::details-content { block-size: 0; overflow: clip; transition: block-size .5s var(--ease), content-visibility .5s allow-discrete; } .acc[open]::details-content { block-size: auto; } .accordion { interpolate-size: allow-keywords; } @media (prefers-reduced-motion: reduce) { .acc::details-content { transition: none; } .acc__icon { transition: none; } } @media (max-width: 599px) { .acc__a { padding-right: 0; } .acc__q:has(.acc__n) + .acc__a { padding-left: 0; } } /* ---------- 33 · Tabs + segmented control ---------- [data-tabs] > .tabs__list[role=tablist] > button.tabs__tab[role=tab] · .tabs__panel[role=tabpanel] (main.js wires ARIA) .segmented > label > input[type=radio] + span (radio-based: no JS) · or .segmented > button[aria-pressed] */ .tabs__list { display: flex; gap: clamp(18px, 2.4vw, 36px); overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--c-line); } .tabs__list::-webkit-scrollbar { display: none; } .tabs__tab { position: relative; flex: none; min-height: 52px; padding: 0 2px; border: 0; background: none; color: var(--c-muted); font: 600 .7rem/1.2 var(--font-label); letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; transition: color .3s; } .tabs__tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--c-accent); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); } .tabs__tab:hover, .tabs__tab[aria-selected="true"] { color: var(--c-fg); } .tabs__tab[aria-selected="true"]::after { transform: scaleX(1); } .tabs__tab:focus-visible { outline-offset: -3px; } .tabs__count { margin-left: 8px; font: italic 500 .95rem/1 var(--font-serif); letter-spacing: 0; color: var(--c-num); } .tabs__panel { padding-top: clamp(24px, 3vw, 40px); } .tabs__panel:focus-visible { outline-offset: 6px; } html.js [data-tabs]:not(.is-ready) > .tabs__panel ~ .tabs__panel { display: none; } .segmented { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 4px; border: 1px solid var(--c-line); border-radius: 3px 3px 3px 16px; background: var(--c-surface); } .segmented label { position: relative; } .segmented input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; } .segmented span, .segmented button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border: 0; border-radius: 2px 2px 2px 12px; background: transparent; color: var(--c-muted); font: 600 var(--fs-label)/1 var(--font-label); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; transition: background-color .3s var(--ease), color .3s var(--ease); } .segmented label:hover span, .segmented button:hover { color: var(--c-fg); } .segmented input:checked + span, .segmented button[aria-pressed="true"] { background: var(--c-accent); color: var(--c-on-accent); } .segmented input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; } .segmented--block { display: flex; } .segmented--block label, .segmented--block button { flex: 1; } .segmented--block span { width: 100%; } @media (pointer: coarse) { .segmented span, .segmented button { min-height: 44px; } } /* ---------- 34 · Chips, tags, badges ---------- .tag-item (static label) · button.chip[aria-pressed] (filter toggles; data-chip auto-wires) · .badge [--ride | --metal | --outline | --success | --muted | --dot] */ .tag-list, .chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .tag-item { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 4px 10px; border: 1px solid var(--c-line); border-radius: 2px 2px 2px 9px; font: 500 .8rem/1.2 var(--font-sans); color: var(--c-fg); background: transparent; white-space: nowrap; } .tag-item svg { width: 14px; height: 14px; color: var(--c-num); } .chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--c-line); border-radius: 2px 2px 2px 12px; background: var(--c-field); color: var(--c-fg); font: 500 .88rem/1.2 var(--font-sans); white-space: nowrap; transition: border-color .25s, background-color .25s, color .25s; } .chip:hover { border-color: var(--c-accent); } .chip[aria-pressed="true"], .chip.is-active { border-color: var(--c-accent); background: var(--c-accent); color: var(--c-on-accent); } .chip__count { font: italic 500 .95rem/1 var(--font-serif); color: var(--c-num); } .chip[aria-pressed="true"] .chip__count { color: inherit; opacity: .8; } .badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px 4px; border-radius: 2px 2px 2px 8px; background: var(--c-accent); color: var(--c-on-accent); font: 700 var(--fs-label)/1 var(--font-label); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; vertical-align: .18em; } .badge--ride, .badge--metal { background: var(--metal); color: var(--on-metal); } .badge--outline { background: transparent; color: var(--c-label); box-shadow: inset 0 0 0 1px currentColor; } .badge--success { background: #E3EFE6; color: #1F5A35; } .badge--muted { background: var(--c-surface-2); color: var(--c-muted); box-shadow: inset 0 0 0 1px var(--c-line-soft); } .badge--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* ---------- 35 · Comparison table · steps/timeline · quote · CTA band ---------- */ /* .table-wrap > table.compare [.compare--stack]: sticky first column while scrolling on phones; --stack turns rows into cards below 640px (each td needs data-label) */ .table-wrap { position: relative; overflow-x: auto; overscroll-behavior-x: contain; border-top: 2px solid var(--c-fg); -webkit-overflow-scrolling: touch; } .table-wrap:focus-visible { outline-offset: 4px; } .compare { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; font-size: .95rem; color: var(--c-fg); } .compare caption { padding: 0 0 14px; text-align: left; font: italic 500 1rem/1.4 var(--font-serif); color: var(--c-muted); caption-side: bottom; padding-top: 14px; } .compare th, .compare td { padding: 16px 18px; border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: top; } .compare thead th { padding-block: 18px 14px; font: 600 var(--fs-label)/1.3 var(--font-label); letter-spacing: .2em; text-transform: uppercase; color: var(--c-label); vertical-align: bottom; } .compare thead th b { display: block; margin-top: 6px; font: 500 1.4rem/1.1 var(--font-serif); letter-spacing: 0; text-transform: none; color: var(--c-fg); } .compare tbody th { font: 500 1.18rem/1.3 var(--font-serif); color: var(--c-fg); } .compare th:first-child, .compare td:first-child { position: sticky; left: 0; z-index: 1; background: var(--table-bg, var(--ivory)); } .compare .is-featured { background: var(--accent-tint); } .compare thead .is-featured { box-shadow: inset 0 3px 0 var(--c-accent); } .compare .yes, .compare .no { display: inline-flex; align-items: center; gap: 8px; } .compare .yes svg { width: 18px; height: 18px; color: var(--c-accent); } .compare .no { color: var(--c-muted); } .compare .no::before { content: ""; width: 12px; height: 1px; background: currentColor; } :is(.section--paper, .surface-paper) { --table-bg: var(--paper-deep); } .surface-light { --table-bg: var(--card); } /* a light table panel inside a dark section keeps a light sticky column */ .section--white { --table-bg: var(--paper); } .section--maroon, .section--house, .surface-maroon { --table-bg: var(--maroon); } .section--ink, .section--house-ink, .surface-ink { --table-bg: var(--maroon-ink); } .section--navy, .surface-navy { --table-bg: var(--navy); } :is([data-tone="dark"], .surface-dark, .section--navy) .compare .is-featured { background: rgba(250, 249, 249, .06); } @media (max-width: 639px) { .compare th:first-child, .compare td:first-child { box-shadow: 1px 0 0 var(--c-line); } .table-wrap:has(.compare--stack) { overflow: visible; } .compare--stack { min-width: 0; } .compare--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .compare--stack tr { display: block; padding: 6px 0 14px; border-bottom: 1px solid var(--c-line); } .compare--stack th, .compare--stack td { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 12px; padding: 8px 0; border: 0; position: static; background: none; box-shadow: none; } .compare--stack tbody th { display: block; padding-top: 14px; font-size: 1.25rem; } .compare--stack td::before { content: attr(data-label); font: 600 var(--fs-label)/1.5 var(--font-label); letter-spacing: .18em; text-transform: uppercase; color: var(--c-label); } .compare--stack .is-featured { background: none; } } /* Steps: ol.steps [.steps--row] > li.steps__item > .steps__n (Roman numeral or a .tally) .steps__body > .steps__title .steps__text Timeline: ol.timeline > li.timeline__item > .timeline__when .timeline__title .timeline__text */ .steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: step; border-top: 1px solid var(--c-line); } .steps__item { position: relative; display: grid; grid-template-columns: clamp(52px, 6vw, 84px) minmax(0, 1fr); gap: 4px clamp(14px, 2vw, 28px); padding: clamp(20px, 2.4vw, 30px) 0; border-bottom: 1px solid var(--c-line); } .steps__n { padding-top: .1em; font: italic 500 clamp(1.5rem, 1.2rem + 1vw, 2.2rem)/1 var(--font-serif); color: var(--c-num); } .steps__n .tally { color: var(--c-num); } .steps__title { font: 500 clamp(1.35rem, 1.15rem + .6vw, 1.75rem)/1.2 var(--font-serif); color: var(--c-fg); text-wrap: balance; } .steps__text { margin-top: 8px; max-width: 60ch; color: var(--c-muted); } .steps__meta { margin-top: 10px; font: 600 var(--fs-label)/1.4 var(--font-label); letter-spacing: .2em; text-transform: uppercase; color: var(--c-label); } .steps--row { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border-top: 0; } .steps--row .steps__item { grid-template-columns: 1fr; align-content: start; padding: 22px clamp(14px, 1.6vw, 24px) 0 0; border-bottom: 0; border-top: 1px solid var(--c-line); } .steps--row .steps__item::before { content: ""; position: absolute; left: 0; top: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--c-accent); } .steps--row .steps__n { margin-bottom: 8px; } /* Five steps (the March): 5 across from 1100px, 3 + 2 on tablets, stacked below 900px */ @media (min-width: 900px) and (max-width: 1099px) { .steps--5 { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; } } @media (max-width: 899px) { .steps--row { grid-auto-flow: row; border-top: 1px solid var(--c-line); } .steps--row .steps__item { grid-template-columns: clamp(52px, 6vw, 84px) minmax(0, 1fr); padding: 20px 0; border-top: 0; border-bottom: 1px solid var(--c-line); } .steps--row .steps__item::before { display: none; } } .timeline { position: relative; display: grid; gap: clamp(26px, 3vw, 40px); margin: 0; padding: 0 0 0 30px; list-style: none; } .timeline::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(var(--c-rule), var(--c-line) 70%, transparent); } .timeline__item { position: relative; } .timeline__item::before { content: ""; position: absolute; left: -30px; top: .42em; width: 11px; height: 11px; border-radius: 0 0 0 5px; background: var(--c-accent); box-shadow: 0 0 0 4px var(--table-bg, var(--ivory)); } .timeline__item.is-future::before { background: var(--table-bg, var(--ivory)); box-shadow: inset 0 0 0 1.5px var(--c-accent), 0 0 0 4px var(--table-bg, var(--ivory)); } .timeline__when { font: 600 var(--fs-label)/1.4 var(--font-label); letter-spacing: .2em; text-transform: uppercase; color: var(--c-label); } .timeline__title { margin-top: 6px; font: 500 1.35rem/1.2 var(--font-serif); color: var(--c-fg); } .timeline__text { margin-top: 6px; max-width: 60ch; color: var(--c-muted); } /* Quote: figure.pull-quote [.pull-quote--lg | --center] > blockquote.pull-quote__text + figcaption.pull-quote__cite (> b name, span role) */ .pull-quote { position: relative; max-width: 54ch; padding-top: 46px; } .pull-quote::before { content: "\201C"; position: absolute; left: -.04em; top: -.12em; font: 500 6rem/1 var(--font-serif); color: var(--c-num); opacity: .9; } .pull-quote__text { font: italic 500 clamp(1.45rem, 1.2rem + .9vw, 2.05rem)/1.3 var(--font-serif); letter-spacing: -.005em; color: var(--c-fg); text-wrap: pretty; } .pull-quote__text p + p { margin-top: .6em; } .pull-quote__cite { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--c-line); font-style: normal; } .pull-quote__cite b { font: 600 var(--fs-label)/1.4 var(--font-label); letter-spacing: .2em; text-transform: uppercase; color: var(--c-fg); } .pull-quote__cite span { font-size: .86rem; color: var(--c-muted); } .pull-quote--lg { max-width: 30ch; } .pull-quote--lg .pull-quote__text { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3.3rem); line-height: 1.16; } .pull-quote--center { margin-inline: auto; text-align: center; } .pull-quote--center::before { left: 50%; translate: -50% 0; } .pull-quote--center .pull-quote__cite { justify-content: center; } /* CTA band: section > .wrap > .cta-band [.cta-band--navy | --light] > .cta-band__main (.chapter .cta-band__title .cta-band__text) + .cta-band__actions */ .cta-band { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 28px clamp(28px, 4vw, 64px); padding: clamp(32px, 4.4vw, 64px) clamp(24px, 4.4vw, 64px); border-radius: 4px 4px 4px var(--shield-r); background: var(--house-panel); color: var(--white); box-shadow: var(--shadow-3); --c-fg: var(--white); --c-muted: rgba(250, 249, 249, .76); --c-line: rgba(250, 249, 249, .16); --c-num: var(--metal); --c-label: var(--metal); --c-em: var(--metal-light); --c-accent: var(--metal); --c-accent-hover: var(--metal-light); --c-on-accent: var(--on-metal); --c-rule: rgba(216, 164, 68, .6); --focus: var(--metal-light); } .cta-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(90deg, rgba(216, 164, 68, .06) 1px, transparent 1px); background-size: calc(100% / 12) 100%; -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%); } .cta-band__title { margin-top: 16px; font: 500 clamp(2rem, 1.4rem + 2vw, 3.3rem)/1.04 var(--font-serif); letter-spacing: -.012em; text-wrap: balance; } .cta-band__title em { font-style: italic; color: var(--c-em); } .cta-band__text { margin-top: 14px; max-width: 52ch; color: var(--c-muted); } .cta-band__actions { display: flex; flex-direction: column; align-items: stretch; gap: 12px; } .cta-band__micro { font-size: .84rem; color: var(--c-muted); text-align: center; } .cta-band .chapter::after { background: linear-gradient(90deg, rgba(216, 164, 68, .6), rgba(250, 249, 249, .14) 55%, transparent); } .cta-band .chapter__num, .cta-band .eyebrow { color: var(--metal); } .cta-band--navy { background: radial-gradient(110% 120% at 85% 0%, #22304d 0%, var(--navy) 46%, var(--navy-deep) 100%); --c-fg: var(--silver-hi); --c-num: var(--silver-hi); --c-label: var(--silver); --c-em: var(--silver-hi); --c-accent: var(--silver-hi); --c-accent-hover: #fff; --c-on-accent: var(--navy); --c-rule: rgba(230, 232, 236, .5); --focus: var(--silver-hi); color: var(--silver-hi); } .cta-band--navy::after { background-image: linear-gradient(90deg, rgba(230, 232, 236, .05) 1px, transparent 1px); } .cta-band--navy .chapter__num, .cta-band--navy .eyebrow { color: var(--silver); } .cta-band--navy .chapter::after { background: linear-gradient(90deg, rgba(230, 232, 236, .5), rgba(230, 232, 236, .12) 55%, transparent); } .cta-band--light { background: var(--card); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-2); --c-fg: var(--ink); --c-muted: var(--muted); --c-line: var(--line-2); --c-num: var(--metal-deep); --c-label: var(--metal-text); --c-em: var(--accent); --c-accent: var(--accent); --c-accent-hover: var(--accent-hover); --c-on-accent: var(--white); --c-rule: rgba(168, 122, 34, .55); --focus: var(--accent); } .cta-band--light::after { display: none; } .cta-band--light .chapter__num { color: var(--metal-deep); } .cta-band--light .eyebrow { color: var(--accent); } .cta-band--light .chapter::after { background: linear-gradient(90deg, rgba(168, 122, 34, .55), var(--line-2) 55%, transparent); } /* minmax(0, 1fr): the single column never grows to a nowrap button's width; narrow buttons may wrap */ @media (max-width: 899px) { .cta-band { grid-template-columns: minmax(0, 1fr); } .cta-band__actions { align-items: start; } .cta-band__actions .btn { max-width: 100%; } } @media (max-width: 479px) { .cta-band__actions .btn { white-space: normal; min-width: 0; text-align: center; } } @media (max-width: 599px) { .cta-band__actions { align-items: stretch; } .cta-band__micro { text-align: left; } } /* ---------- 36 · Tooltip · toast extras ----------
(main.js positions .tip) */ .tip { position: fixed; left: 0; top: 0; z-index: 96; max-width: min(280px, calc(100vw - 24px)); padding: 9px 12px; border-radius: 2px 2px 2px 10px; background: var(--ink); color: #fff; box-shadow: var(--shadow-2); font: 500 .8rem/1.45 var(--font-sans); letter-spacing: 0; text-transform: none; text-align: left; pointer-events: none; opacity: 0; translate: 0 4px; transition: opacity .2s var(--ease), translate .25s var(--ease); } .tip.is-in { opacity: 1; translate: none; } .tip::after { content: ""; position: absolute; left: var(--tip-x, 50%); width: 8px; height: 8px; margin-left: -4px; background: inherit; rotate: 45deg; } .tip[data-side="top"]::after { bottom: -4px; } .tip[data-side="bottom"]::after { top: -4px; } html.js .tip:not(.is-in) { visibility: hidden; } .tip-trigger { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 1px solid var(--c-line); border-radius: 50%; background: transparent; color: var(--c-label); font: italic 600 .9rem/1 var(--font-serif); vertical-align: middle; position: relative; } .tip-trigger::before { content: ""; position: absolute; inset: -10px; } /* 44px touch target */ .tip-trigger:hover { border-color: var(--c-accent); color: var(--c-accent); } .toast--action { pointer-events: auto; } :is(.toast__close, .toast__action) { margin-left: 12px; padding: 0 0 0 12px; border: 0; border-left: 1px solid rgba(255, 255, 255, .25); background: none; color: inherit; font: 600 var(--fs-label)/1 var(--font-label); letter-spacing: .18em; text-transform: uppercase; min-height: 24px; } .toast { display: flex; align-items: center; } @media (prefers-reduced-motion: reduce) { .tip { transition: none; translate: none; } } /* ---------- 36b · Map section (lib/map-section.js mounts lib/dotmap.js into .dotmap) ---------- The box reserves the plate's height (1000 × 525) while it is empty, so the lazy load never shifts the page. */ .dotmap { width: 100%; } .dotmap:empty { aspect-ratio: 1000 / 525; } /* ---------- 37 · Lightbox · dialogs ---------- Lightbox: built by main.js (lightbox.open(items, index) or [data-lightbox="group"] links). One . Dialog: > .dialog__panel > .dialog__head (.dialog__title) .dialog__body .dialog__foot Opened by [data-dialog-open="x"] or openDialog('x'); closed by [data-dialog-close], Esc or the backdrop. */ .lightbox { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(4, 14, 11, .97); color: var(--white); overflow: hidden; overscroll-behavior: contain; } .lightbox::backdrop { background: rgba(4, 14, 11, .6); } body.theme-academy .lightbox, .lightbox.lightbox--navy { background: rgba(7, 11, 20, .97); } .lightbox--navy .lightbox__nav { background: rgba(7, 11, 20, .5); } .lightbox--navy .lightbox__nav:hover { background: rgba(7, 11, 20, .8); } .lightbox--navy .lightbox__counter { color: var(--silver); } .lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; animation: fade-in .35s var(--ease); } .lightbox.is-closing { animation: fade-out .25s var(--ease) forwards; } .lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px clamp(14px, 3vw, 28px); } .lightbox__counter { font: 600 var(--fs-label)/1 var(--font-label); letter-spacing: .24em; text-transform: uppercase; color: var(--metal); font-variant-numeric: lining-nums tabular-nums; } .lightbox__stage { position: relative; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; min-height: 0; padding: 0 clamp(8px, 7vw, 96px); touch-action: pan-y pinch-zoom; } .lightbox__figure { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 0; margin: 0; } .lightbox__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 2px 2px 2px 18px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7); background: rgba(255, 255, 255, .04); transition: opacity .3s var(--ease), translate .4s var(--ease); } .lightbox__img.is-loading { opacity: .25; } .lightbox__stage.is-dragging .lightbox__img { transition: none; } .lightbox__nav { position: absolute; top: 50%; translate: 0 -50%; z-index: 2; display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid rgba(250, 249, 249, .22); border-radius: 50%; background: rgba(6, 18, 15, .5); color: var(--white); transition: border-color .3s, background-color .3s; } .lightbox__nav:hover { border-color: var(--metal); background: rgba(6, 18, 15, .8); } .lightbox__nav svg { width: 20px; height: 20px; } .lightbox__nav--prev { left: clamp(8px, 2vw, 24px); } .lightbox__nav--prev svg { rotate: 180deg; } .lightbox__nav--next { right: clamp(8px, 2vw, 24px); } .lightbox__nav[hidden] { display: none; } .lightbox__caption { min-height: 64px; padding: 14px clamp(16px, 5vw, 96px) max(18px, env(safe-area-inset-bottom)); text-align: center; font: italic 500 1.1rem/1.4 var(--font-serif); color: rgba(250, 249, 249, .86); text-wrap: balance; } .lightbox__caption small { display: block; margin-top: 4px; font: 400 .78rem/1.4 var(--font-sans); font-style: normal; color: rgba(250, 249, 249, .6); } .lightbox__close { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid rgba(250, 249, 249, .22); border-radius: 2px 2px 2px 12px; background: transparent; color: var(--white); font: 600 var(--fs-label)/1 var(--font-label); letter-spacing: .2em; text-transform: uppercase; --focus: var(--metal-light); } .lightbox__close:hover { border-color: var(--metal); } .lightbox__close svg { width: 16px; height: 16px; } .lightbox :focus-visible { outline-color: var(--metal-light); } @media (max-width: 599px) { .lightbox__nav { top: auto; bottom: 8px; translate: none; width: 48px; height: 48px; } .lightbox__stage { padding-bottom: 64px; } } @media (prefers-reduced-motion: reduce) { .lightbox[open], .lightbox.is-closing { animation: none; } .lightbox__img { transition: none; } } .dialog { width: min(560px, 100% - 24px); max-width: none; max-height: none; margin: auto; padding: 0; border: 0; background: transparent; color: var(--ink); overflow: visible; } .dialog--sm { width: min(420px, 100% - 24px); } .dialog--lg { width: min(880px, 100% - 24px); } .dialog::backdrop { background: rgba(5, 19, 15, .58); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } body.theme-academy .dialog::backdrop, body.theme-academy .modal::backdrop { background: rgba(7, 11, 20, .62); } .dialog[open] { animation: modal-in .5s var(--ease-out); } .dialog[open]::backdrop { animation: fade-in .35s var(--ease); } .dialog.is-closing { animation: modal-out .28s var(--ease) forwards; } .dialog.is-closing::backdrop { animation: fade-out .28s var(--ease) forwards; } .dialog__panel { position: relative; display: flex; flex-direction: column; max-height: min(90vh, 100vh - 24px); max-height: min(90dvh, 100dvh - 24px); border-radius: 4px 4px 4px 28px; background: var(--card); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .6); overflow: hidden; } .dialog__head { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 26px 28px 18px; border-bottom: 1px solid var(--line); } .dialog__title { font: 500 clamp(1.6rem, 1.3rem + 1vw, 2.1rem)/1.1 var(--font-serif); letter-spacing: -.01em; outline: none; } .dialog__title em { font-style: italic; color: var(--accent); } .dialog__x { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: -8px -10px 0 0; border: 1px solid transparent; border-radius: 2px 2px 2px 12px; background: none; color: var(--ink); } .dialog__x:hover { border-color: var(--line-2); color: var(--accent); } .dialog__x svg { width: 18px; height: 18px; } .dialog__body { padding: 22px 28px; overflow-y: auto; overscroll-behavior: contain; color: var(--ink); } .dialog__body > * + * { margin-top: 1em; } .dialog__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding: 16px 28px 22px; border-top: 1px solid var(--line); background: var(--paper); } .dialog--dark .dialog__panel { background: var(--house-panel); color: var(--white); } .dialog--dark .dialog__head, .dialog--dark .dialog__foot { border-color: rgba(250, 249, 249, .14); background: transparent; } .dialog--dark .dialog__body, .dialog--dark .dialog__x { color: var(--white); } .dialog--dark .dialog__title em { color: var(--metal-light); } @media (max-width: 599px) { .dialog--sheet { width: 100%; margin: auto 0 0; } .dialog--sheet .dialog__panel { border-radius: 4px 4px 0 0; max-height: 88dvh; } .dialog--sheet[open] { animation: sheet-in .45s var(--ease-out); } .dialog__head, .dialog__body, .dialog__foot { padding-inline: 20px; } .dialog__foot .btn { flex: 1; } } @keyframes sheet-in { from { transform: translateY(40px); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .dialog[open], .dialog[open]::backdrop, .dialog.is-closing, .dialog.is-closing::backdrop { animation: none; } } html.dialog-open { overflow: hidden; } /* ---------- 38 · Forms (system) ---------- Builds on section 22 (.field, .field__label, .field__input, .field__help, .field__error, .select, .choice, .pill). Validation:
— main.js shows .field__error (linked via aria-describedby) on blur/submit. */ .form { display: grid; gap: 22px; } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 18px; align-items: start; } .form-grid > .span-2 { grid-column: 1 / -1; } @media (max-width: 639px) { .form-grid { grid-template-columns: 1fr; } } textarea.field__input { min-height: 136px; resize: vertical; line-height: 1.55; } input[type="date"].field__input, input[type="time"].field__input { min-width: 0; appearance: none; -webkit-appearance: none; } .field__input::-webkit-calendar-picker-indicator { opacity: .6; cursor: pointer; } .field__input:disabled { background: var(--ivory-2); color: var(--muted); cursor: not-allowed; } .field__row-end { display: flex; justify-content: space-between; gap: 12px; } .field__count { font-size: .76rem; color: var(--muted); font-variant-numeric: lining-nums tabular-nums; } .field__error { display: flex; gap: 7px; align-items: baseline; } .field__error::before { content: "!"; flex: none; display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: #B3261E; color: #fff; font: 700 var(--fs-label)/1 var(--font-sans); translate: 0 1px; } .choice-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .choice-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 639px) { .choice-cards--2, .choice-cards--4 { grid-template-columns: 1fr; } } .choice input[type="checkbox"] + .choice__box::before { border-radius: 3px 3px 3px 6px; } .choice input[type="checkbox"]:checked + .choice__box::before { border: 0; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; } .choice input:checked + .choice__box { border-color: var(--accent); background: var(--accent-tint); box-shadow: 0 0 0 1px var(--accent) inset; } .choice input[type="radio"]:checked + .choice__box::before { border: 5px solid var(--accent); } .pill input:checked + span { border-color: var(--accent); background: var(--accent); } /* Checkbox and radio rows: label.check > input[type=checkbox|radio] + span.check__box + span.check__label */ .check { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; min-height: 44px; padding-top: 11px; cursor: pointer; font-size: .95rem; line-height: 1.45; color: var(--c-fg); } .check input { position: absolute; left: 0; top: 11px; width: 22px; height: 22px; margin: 0; opacity: 0; cursor: pointer; } .check__box { display: grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid rgba(23, 18, 19, .34); border-radius: 3px 3px 3px 8px; background: #fff; transition: background-color .2s, border-color .2s; } .check__box::after { content: ""; width: 12px; height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; opacity: 0; transform: scale(.6); transition: opacity .2s, transform .25s var(--ease-out); } .check input:checked + .check__box { background: var(--accent); border-color: var(--accent); } .check input:checked + .check__box::after { opacity: 1; transform: none; } .check input[type="radio"] + .check__box { border-radius: 50%; } .check input[type="radio"] + .check__box::after { width: 8px; height: 8px; border-radius: 50%; background: #fff; } .check input:focus-visible + .check__box { outline: 2px solid var(--focus); outline-offset: 2px; } .check input[aria-invalid="true"] + .check__box { border-color: #B3261E; } .check__label small { display: block; margin-top: 2px; font-size: .8rem; color: var(--c-muted); } .check-list { display: grid; gap: 0; } /* Range with value bubble: .range[data-range] > input.range__input[type=range] + output.range__bubble + .range__scale */ .range { position: relative; padding-top: 38px; --pct: 50%; } .range__input { width: 100%; height: 28px; margin: 0; background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer; } .range__input::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--accent) var(--pct), var(--line-2) var(--pct)); } .range__input::-moz-range-track { height: 4px; border-radius: 2px; background: var(--line-2); } .range__input::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--accent); } .range__input::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -10px; border: 2px solid var(--accent); border-radius: 50% 50% 50% 4px; background: #fff; box-shadow: var(--shadow-1); appearance: none; -webkit-appearance: none; transition: transform .2s var(--ease); } .range__input::-moz-range-thumb { width: 20px; height: 20px; border: 2px solid var(--accent); border-radius: 50% 50% 50% 4px; background: #fff; box-shadow: var(--shadow-1); } .range__input:active::-webkit-slider-thumb { transform: scale(1.12); } .range__input:focus-visible { outline: none; } .range__input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--accent-ring); } .range__input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--accent-ring); } .range__bubble { position: absolute; top: 0; left: calc(12px + (100% - 24px) * var(--p, .5)); translate: -50% 0; padding: 5px 9px 4px; border-radius: 2px 2px 2px 9px; background: var(--accent); color: #fff; font: 600 .74rem/1 var(--font-label); letter-spacing: .06em; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; pointer-events: none; } .range__bubble::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px; margin-left: -4px; background: inherit; rotate: 45deg; z-index: -1; } .range__scale { display: flex; justify-content: space-between; margin-top: 4px; font-size: .74rem; color: var(--muted); font-variant-numeric: lining-nums tabular-nums; } /* Chips input: .chips-input[data-chips-input] > ul.chips-input__list + input.chips-input__entry (+ hidden input[name]) */ .chips-input { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 50px; padding: 6px 8px; border: 1px solid var(--line-2); border-radius: 3px 3px 3px 14px; background: #fff; cursor: text; transition: border-color .25s, box-shadow .25s; } .chips-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } .chips-input__list { display: contents; } .chips-input__chip { display: inline-flex; align-items: center; gap: 2px; min-height: 34px; padding: 0 2px 0 10px; border-radius: 2px 2px 2px 10px; background: var(--accent-tint); border: 1px solid var(--accent-ring); font-size: .86rem; color: var(--ink); } .chips-input__remove { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; color: var(--muted); } .chips-input__remove:hover { color: var(--accent); } .chips-input__remove svg { width: 12px; height: 12px; } .chips-input__entry { flex: 1 1 120px; min-width: 100px; min-height: 36px; padding: 0 6px; border: 0; background: none; font-size: 1rem; outline: none; } .chips-input__suggest { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .chips-input__suggest button { min-height: 32px; padding: 0 10px; border: 1px dashed var(--line-2); border-radius: 2px 2px 2px 9px; background: none; font-size: .8rem; color: var(--muted); } .chips-input__suggest button:hover { border-color: var(--accent); color: var(--accent); } @media (pointer: coarse) { .chips-input__suggest button { min-height: 44px; } .chips-input__remove { width: 36px; height: 36px; } } /* Autocomplete combobox (ARIA 1.2): .combo[data-combobox] > input.field__input[role=combobox] + ul.combo__list[role=listbox] */ .combo { position: relative; } .combo__list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; max-height: 280px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; border: 1px solid var(--line-2); border-radius: 3px 3px 3px 14px; background: #fff; box-shadow: var(--shadow-3); overscroll-behavior: contain; } .combo__option { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-height: 44px; padding: 10px 12px; border-radius: 2px 2px 2px 10px; cursor: pointer; font-size: .95rem; color: var(--ink); } .combo__option small { flex: none; font-size: .76rem; color: var(--muted); } .combo__option mark { background: none; color: var(--accent); font-weight: 600; } .combo__option[aria-selected="true"], .combo__option:hover { background: var(--accent-tint); } .combo__option[aria-selected="true"] { box-shadow: inset 2px 0 0 var(--accent); } .combo__empty { padding: 12px; font-size: .88rem; color: var(--muted); } /* Repeater: .repeater[data-repeater][data-max] > .repeater__list + template[data-repeater-template] + button[data-repeater-add] each row: fieldset.repeater__row > legend.repeater__legend (> [data-repeater-n]) + button[data-repeater-remove] + fields ({i} in id/for/name → row index) */ .repeater__list { display: grid; gap: 12px; } .repeater__row { position: relative; display: grid; gap: 16px; margin: 0; padding: 18px 20px 20px; border: 1px solid var(--line-2); border-radius: 3px 3px 3px 18px; background: var(--paper); min-width: 0; } .repeater__row.is-new { animation: row-in .5s var(--ease-out); } @keyframes row-in { from { opacity: 0; translate: 0 8px; } } .repeater__legend { float: left; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0; font: 600 var(--fs-label)/1.3 var(--font-label); letter-spacing: .22em; text-transform: uppercase; color: var(--metal-text); } .repeater__legend + * { clear: both; } .repeater__n { font: italic 500 1.1rem/1 var(--font-serif); letter-spacing: 0; text-transform: none; color: var(--metal-deep); margin-right: 6px; } .repeater__remove { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px; border: 1px solid transparent; border-radius: 2px 2px 2px 10px; background: none; color: var(--muted); font: 600 var(--fs-label)/1 var(--font-label); letter-spacing: .18em; text-transform: uppercase; } .repeater__remove:hover { border-color: var(--line-2); color: #B3261E; } .repeater__remove svg { width: 14px; height: 14px; } .repeater__add { margin-top: 12px; border-style: dashed; } .repeater__add svg { width: 16px; height: 16px; } .repeater__limit { margin-top: 8px; font-size: .8rem; color: var(--muted); } @media (pointer: coarse) { .repeater__remove { min-height: 44px; } } @media (prefers-reduced-motion: reduce) { .repeater__row.is-new { animation: none; } } /* Multi-step form: form[data-stepper] > .stepper (progress) + .form-step[data-step] × n + .form-nav .stepper > .stepper__bar (> i, width from --p) + ol.stepper__list > li.stepper__item (.is-done | [aria-current=step]) > .stepper__n + .stepper__label */ .stepper { --p: 0; } .stepper__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .stepper__count { font: 600 var(--fs-label)/1.3 var(--font-label); letter-spacing: .22em; text-transform: uppercase; color: var(--metal-text); } .stepper__title { font: 500 1.15rem/1.2 var(--font-serif); color: var(--ink); } .stepper__bar { position: relative; height: 3px; border-radius: 2px; background: var(--line-2); overflow: hidden; } .stepper__bar i { position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(var(--p)); transition: transform .6s var(--ease); } .stepper__list { display: grid; grid-template-columns: repeat(var(--n, 8), minmax(0, 1fr)); gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; } .stepper__item { display: grid; gap: 6px; justify-items: start; min-width: 0; color: var(--muted); } .stepper__n { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line-2); border-radius: 50% 50% 50% 6px; background: #fff; font: italic 600 .9rem/1 var(--font-serif); color: var(--muted); transition: background-color .3s, border-color .3s, color .3s; } .stepper__label { font: 600 var(--fs-label)/1.3 var(--font-label); letter-spacing: .14em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .stepper__item.is-done .stepper__n { background: var(--accent-tint); border-color: var(--accent); color: var(--accent); } .stepper__item[aria-current="step"] { color: var(--ink); } .stepper__item[aria-current="step"] .stepper__n { background: var(--accent); border-color: var(--accent); color: #fff; } .stepper__item button { display: contents; color: inherit; } @media (max-width: 759px) { .stepper__label { display: none; } .stepper__list { gap: 4px; } } @media (max-width: 419px) { .stepper__list { display: none; } } html.js .form-step:not(.is-current) { display: none; } .form-step { min-width: 0; margin: 0; padding: 0; border: 0; } .form-step__head { margin-bottom: 18px; } .form-step__title { font: 500 clamp(1.6rem, 1.3rem + 1vw, 2.2rem)/1.1 var(--font-serif); color: var(--ink); outline: none; } .form-step__text { margin-top: 8px; color: var(--muted); } .form-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); } .form-nav__end { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-left: auto; } @media (max-width: 479px) { .form-nav .btn { flex: 1; } .form-nav__end { width: 100%; } } /* Error summary + result panels */ .error-summary { padding: 16px 18px; border: 1px solid rgba(179, 38, 30, .3); border-left: 3px solid #B3261E; border-radius: 2px 2px 2px 12px; background: rgba(179, 38, 30, .06); color: #8E1E17; outline: none; } .error-summary__title { font-weight: 600; } .error-summary ul { margin-top: 6px; padding-left: 1.2em; } .error-summary a { color: inherit; } .form-panel { display: grid; justify-items: start; gap: 10px; padding: clamp(24px, 3vw, 40px); border: 1px solid var(--line); border-radius: 3px 3px 3px 24px; background: var(--card); outline: none; } .form-panel__mark { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 6px; border-radius: 50% 50% 50% 10px; background: var(--accent-tint); color: var(--accent); } .form-panel__mark svg { width: 24px; height: 24px; } .form-panel__mark .tally { --th: 22px; --tw: 2.5px; --tg: 4px; color: var(--accent); } .form-panel__title { font: 500 clamp(1.7rem, 1.4rem + 1vw, 2.3rem)/1.08 var(--font-serif); color: var(--ink); } .form-panel__title em { font-style: italic; color: var(--accent); } .form-panel__text { max-width: 54ch; color: var(--muted); } .form-panel .btn-row { margin-top: 12px; } .form-panel--success { border-top: 3px solid var(--metal-deep); } .form-panel--error { border-color: rgba(179, 38, 30, .3); background: #FBF1EF; } .form-panel--error .form-panel__mark { background: rgba(179, 38, 30, .1); color: #B3261E; } /* Autosave indicator:

*/ .autosave { display: inline-flex; align-items: center; gap: 8px; min-height: 24px; font-size: .78rem; color: var(--muted); } .autosave::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); transition: background-color .3s; } .autosave[data-state="saving"]::before { background: var(--metal); animation: pulse-dot 1s ease-in-out infinite; } .autosave[data-state="saved"]::before { background: #2f7a4b; } .autosave[data-state="error"]::before { background: #B3261E; } @keyframes pulse-dot { 50% { opacity: .3; } } /* Forms on dark grounds (rare; e.g. a newsletter line in a CTA band) */ :is([data-tone="dark"], .surface-dark, .section--navy) .field__label { color: var(--c-fg); } :is([data-tone="dark"], .surface-dark, .section--navy) .field__help { color: var(--c-muted); } :is([data-tone="dark"], .surface-dark, .section--navy) .field__input { border-color: var(--c-line); background: var(--c-field); color: var(--c-fg); } :is([data-tone="dark"], .surface-dark, .section--navy) .field__input::placeholder { color: rgba(250, 249, 249, .45); } :is([data-tone="dark"], .surface-dark, .section--navy) .field__input:focus { border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(250, 249, 249, .12); } :is([data-tone="dark"], .surface-dark, .section--navy) .field__error { color: #FFB4A9; } :is([data-tone="dark"], .surface-dark, .section--navy) .select::after { border-color: var(--c-accent); } :is([data-tone="dark"], .surface-dark, .section--navy) .field__input option { color: var(--ink); } .modal .field__label, .dialog .field__label { color: var(--ink); } /* ---------- 41 · Skeletons + loading ---------- */ .skeleton { display: block; border-radius: 2px 2px 2px 10px; background: linear-gradient(90deg, var(--sk-a, rgba(23, 18, 19, .07)) 30%, var(--sk-b, rgba(23, 18, 19, .13)) 50%, var(--sk-a, rgba(23, 18, 19, .07)) 70%) 0 0 / 300% 100%; animation: sk 1.6s linear infinite; color: transparent !important; } :is([data-tone="dark"], .surface-dark, .section--navy) .skeleton { --sk-a: rgba(250, 249, 249, .06); --sk-b: rgba(250, 249, 249, .13); } .skeleton--text { height: .9em; margin-block: .35em; } .skeleton--title { height: 1.6em; width: 70%; } .skeleton--media { aspect-ratio: 3 / 2; border-radius: 2px 2px 2px var(--shield-r-card); } .skeleton--circle { width: 48px; height: 48px; border-radius: 50%; } [aria-busy="true"] > .is-loaded-only { display: none; } @keyframes sk { to { background-position: -150% 0; } } @media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } .autosave[data-state="saving"]::before { animation: none; } .btn[aria-busy="true"]::after, .spinner { animation-duration: 2.4s; } } /* ---------- 42 · Print basics ---------- */ @media print { @page { margin: 16mm 14mm; } body { background: #fff !important; color: #000 !important; font-size: 11pt; line-height: 1.45; } .site-footer, .toast-region, .tip, .lightbox, .dialog, .skip-link, .page-hero__ornament, .menu-toggle, [data-print="hide"], .btn, .link-arrow, .marquee-toggle, .chips-input__remove, .repeater__remove, .repeater__add, .form-nav, .lightbox__nav { display: none !important; } .page-hero, .cta-band, .card, .card--dark, .section--maroon, .section--ink, .section--navy, .section--house, .section--house-ink, .surface-maroon, .surface-ink, .surface-navy { background: #fff !important; color: #000 !important; box-shadow: none !important; } .page-hero { padding: 0 0 12pt; } :is(.page-hero, .cta-band, .card, [data-tone="dark"], .section--navy) { --c-fg: #000; --c-muted: #333; --c-line: #bbb; --c-line-soft: #ddd; --c-num: #000; --c-label: #333; --c-em: #000; --c-accent: #000; } .card, .stats__item, .steps__item, .acc, .compare tr, figure, img { break-inside: avoid; } h1, h2, h3, .h2, .h3, .page-hero__title { break-after: avoid; color: #000 !important; } .acc::details-content { block-size: auto !important; content-visibility: visible !important; } .acc__icon { display: none; } html.js [data-tabs] > .tabs__panel { display: block !important; } html.js .form-step { display: block !important; } .table-wrap { overflow: visible; } .compare { min-width: 0; } .compare th:first-child, .compare td:first-child { position: static; } .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #444; } .skeleton { display: none; } } /* ---------- 43 · Academy theme (body.theme-academy): navy + silver on every shared component ---------- */ body.theme-academy { --accent: var(--navy); --accent-hover: var(--navy-2); --accent-deep: var(--navy-deep); --accent-ink: #070B14; --accent-tint: rgba(17, 26, 43, .05); --accent-ring: rgba(17, 26, 43, .16); --metal: var(--silver); --metal-light: var(--silver-hi); --metal-deep: var(--steel); --metal-text: #5A5B60; --metal-line: rgba(177, 178, 182, .4); --metal-tint: rgba(177, 178, 182, .12); --on-metal: var(--navy); --house-grad: radial-gradient(120% 80% at 70% 0%, #19253c 0%, var(--navy) 48%, var(--navy-deep) 100%); --house-grad-ink: radial-gradient(120% 70% at 20% 0%, #16213a 0%, var(--navy-deep) 55%, #060a12 100%); --house-panel: radial-gradient(110% 120% at 85% 0%, #22304d 0%, var(--navy) 46%, var(--navy-deep) 100%); --c-rule: rgba(102, 102, 103, .5); --focus: var(--navy); } body.theme-academy ::selection { background: rgba(177, 178, 182, .4); } body.theme-academy :is([data-tone="dark"], .section--maroon, .section--ink, .surface-dark, .modal__head, .cta-band:not(.cta-band--light), .card--dark) { --c-accent: var(--silver-hi); --c-accent-hover: #fff; --c-on-accent: var(--navy); --c-num: var(--silver-hi); --c-label: var(--silver); --c-em: var(--silver-hi); --c-rule: rgba(230, 232, 236, .5); --focus: var(--silver-hi); --c-fg: #F3F4F6; } body.theme-academy [data-tone="light"] { --focus: var(--navy); } /* On Academy pages the "maroon" and "ink" section classes become navy grounds */ body.theme-academy .section--maroon { background: var(--house-grad); } body.theme-academy .section--ink { background: var(--house-grad-ink); } body.theme-academy .page-hero--maroon { background: radial-gradient(120% 90% at 85% 0%, #1d2a44 0%, var(--navy) 46%, var(--navy-deep) 100%); } /* Type */ body.theme-academy .eyebrow { color: var(--navy); } body.theme-academy :is([data-tone="dark"], .surface-dark, .section--navy, .surface-navy, .cta-band:not(.cta-band--light), .card--dark, .modal__head, .begin-panel) .eyebrow { color: var(--silver); } body.theme-academy .chapter__num { color: var(--steel); } body.theme-academy .chapter::after, body.theme-academy .section-head--center .chapter::before { background: linear-gradient(90deg, rgba(102, 102, 103, .5), var(--line-2) 55%, transparent); } body.theme-academy .section-head--center .chapter::before { background: linear-gradient(270deg, rgba(102, 102, 103, .5), var(--line-2) 55%, transparent); } body.theme-academy :is([data-tone="dark"], .surface-dark, .section--navy, .surface-navy, .cta-band:not(.cta-band--light), .card--dark, .begin-panel, .cta-band) .chapter__num { color: var(--silver-hi); } body.theme-academy :is([data-tone="dark"], .surface-dark, .section--navy, .surface-navy, .cta-band:not(.cta-band--light), .card--dark, .begin-panel, .cta-band) .chapter::after { background: linear-gradient(90deg, rgba(230, 232, 236, .5), rgba(230, 232, 236, .12) 55%, transparent); } body.theme-academy [data-tone="light"] .h2 em, body.theme-academy .h2 em { color: var(--navy); } body.theme-academy [data-tone="dark"] .h2 em, body.theme-academy .begin-panel .h2 em { color: var(--silver-hi); } body.theme-academy [data-tone="dark"] .lede { color: rgba(230, 232, 236, .74); } body.theme-academy .tally { color: var(--navy); } body.theme-academy :is([data-tone="dark"], .begin-panel) .tally, body.theme-academy .cta-steps__n .tally { color: var(--silver-hi); } /* Buttons + links */ body.theme-academy .btn--gold { background: var(--silver-hi); color: var(--navy); } body.theme-academy .btn--gold:hover { background: #fff; } body.theme-academy .btn--outline { border-color: rgba(230, 232, 236, .5); color: #fff; } body.theme-academy .btn--outline:hover { border-color: var(--silver-hi); background: rgba(230, 232, 236, .1); } body.theme-academy [data-tone="light"] .btn--outline { border-color: var(--navy); color: var(--navy); } body.theme-academy [data-tone="light"] .btn--outline:hover { background: rgba(17, 26, 43, .06); } body.theme-academy .btn--maroon { background: var(--navy); color: #fff; } body.theme-academy .btn--maroon:hover { background: var(--navy-2); } body.theme-academy [data-tone="light"] .btn--gold, body.theme-academy .surface-light .btn--gold { background: var(--navy); color: #fff; } body.theme-academy [data-tone="light"] .btn--gold:hover, body.theme-academy .surface-light .btn--gold:hover { background: var(--navy-2); } body.theme-academy .site-header .btn--gold { background: var(--silver-hi); color: var(--navy); } body.theme-academy .site-header[data-tone="light"] .btn--gold { background: var(--navy); color: #fff; } body.theme-academy .site-header[data-tone="light"] .btn--gold:hover { background: var(--navy-2); } body.theme-academy .seat-dot { background: var(--silver-hi); } body.theme-academy .seat-dot::after { border-color: var(--silver-hi); } body.theme-academy [data-tone="light"] .seat-dot { background: var(--navy); } body.theme-academy [data-tone="light"] .seat-dot::after { border-color: var(--navy); } body.theme-academy .link-arrow { color: var(--navy); } body.theme-academy :is([data-tone="dark"], .surface-dark, .section--navy, .surface-navy, .cta-band:not(.cta-band--light), .card--dark) .link-arrow, body.theme-academy .link-arrow--light { color: var(--silver-hi); } body.theme-academy .badge-ride { background: var(--silver-hi); color: var(--navy); } body.theme-academy a:not([class]) { text-decoration-color: rgba(102, 102, 103, .6); } /* Header + mobile menu */ body.theme-academy .site-header[data-state="solid"][data-tone="dark"] { background: rgba(11, 18, 32, .8); border-color: rgba(230, 232, 236, .14); } body.theme-academy .site-header[data-state="solid"][data-tone="light"] { background: rgba(246, 247, 249, .94); box-shadow: 0 10px 30px -24px rgba(11, 18, 32, .4); } body.theme-academy .nav__link::after { background: var(--silver-hi); } body.theme-academy .site-header[data-tone="light"] .nav__link::after { background: var(--navy); } body.theme-academy .site-header[data-tone="light"] .header-actions__waitlist { border-color: rgba(17, 26, 43, .3); color: var(--navy); } body.theme-academy .site-header[data-tone="light"] .header-actions__waitlist .seat-dot { background: var(--navy); } body.theme-academy .site-header[data-tone="light"] .header-actions__waitlist .seat-dot::after { border-color: var(--navy); } body.theme-academy .menu { background: radial-gradient(120% 70% at 80% 0%, #1d2a44 0%, var(--navy) 55%, var(--navy-deep) 100%); } body.theme-academy .menu__link[aria-current] .menu__label { color: var(--silver-hi); } body.theme-academy .menu__link[aria-current] .menu__label::after { content: ""; display: inline-block; width: 22px; height: 1px; margin-left: 14px; vertical-align: .3em; background: var(--silver); } body.theme-academy .menu__contact-label { color: var(--silver); } body.theme-academy .menu__list, body.theme-academy .menu__list li, body.theme-academy .menu__foot { border-color: rgba(230, 232, 236, .12); } /* Marquee, FAQ, final CTA, dossier */ body.theme-academy .admits { background: var(--navy-deep); border-color: rgba(230, 232, 236, .14); } body.theme-academy .admits .eyebrow { color: var(--silver); } body.theme-academy .marquee__list li::after { background: var(--silver); } body.theme-academy .marquee-toggle { border-color: rgba(230, 232, 236, .3); } body.theme-academy .marquee-toggle:hover { border-color: var(--silver-hi); } body.theme-academy .faq-q__n, body.theme-academy .faq-q::before { color: var(--steel); } body.theme-academy .faq-q:hover .faq-q__text { color: var(--navy); } body.theme-academy .faq-q__icon { color: var(--navy); } body.theme-academy .faq-q[aria-expanded="true"] .faq-q__icon { background: var(--navy); border-color: var(--navy); } body.theme-academy .begin-panel { background: var(--house-panel); --glow: rgba(230, 232, 236, .14); --focus: var(--silver-hi); } body.theme-academy .begin-panel__bg::after { background-image: linear-gradient(90deg, rgba(230, 232, 236, .05) 1px, transparent 1px); } body.theme-academy .begin-panel .btn--outline { border-color: rgba(230, 232, 236, .5); background: rgba(7, 11, 20, .2); } body.theme-academy .begin-panel .btn--outline:hover { border-color: var(--silver-hi); background: rgba(230, 232, 236, .08); } body.theme-academy .begin-panel .seat-dot { background: var(--silver-hi); } body.theme-academy .begin-panel .seat-dot::after { border-color: var(--silver-hi); } body.theme-academy .begin__micro a { color: var(--silver-hi); } body.theme-academy :is(.seats__empty, .seats__label) { color: var(--silver); } body.theme-academy .seats__empty::before { background: var(--silver-hi); box-shadow: 0 0 0 4px rgba(230, 232, 236, .18); } body.theme-academy .seats__bar { color: var(--silver-hi); } body.theme-academy :is(.dossier__brand, .dossier__open, .dossier__slot-h) { color: var(--navy); } body.theme-academy :is(.dossier__n) { color: var(--steel); } body.theme-academy .dossier__progress .tally { color: var(--steel); } /* Footer */ body.theme-academy .site-footer { background: radial-gradient(100% 80% at 0% 0%, #1d2a44 0%, var(--navy) 45%, #070B14 100%); } body.theme-academy .footer-col__title { color: var(--silver); } body.theme-academy .footer-tagline em { color: var(--silver-hi); } body.theme-academy :is(.footer-col a, .footer-contact a, .footer-legal__links a):hover { text-decoration-color: var(--silver); } body.theme-academy .footer-legal { border-color: rgba(230, 232, 236, .16); } body.theme-academy .footer-brand__shield { --crest-dark: #05080F; --crest-light: var(--silver-hi); --crest-frame: var(--silver-hi); } body.theme-academy .footer-brand__academy { width: 84px; margin-left: 42px; color: var(--silver); } /* Waitlist modal + forms */ body.theme-academy .modal::backdrop { background: rgba(7, 11, 20, .62); } body.theme-academy .modal__head { background: radial-gradient(120% 120% at 100% 0%, #22304d 0%, var(--navy) 50%, var(--navy-deep) 100%); } body.theme-academy .modal__head::after { background-image: linear-gradient(90deg, rgba(230, 232, 236, .06) 1px, transparent 1px); } body.theme-academy .modal__head .modal__title em { color: var(--silver-hi); } body.theme-academy .modal__close { background: rgba(11, 18, 32, .84); border-color: rgba(230, 232, 236, .24); --focus: var(--silver-hi); } body.theme-academy .modal__close:hover { border-color: var(--silver-hi); } body.theme-academy .modal__returning { border-color: rgba(102, 102, 103, .35); background: rgba(177, 178, 182, .1); } body.theme-academy .seats--modal { background: #F1F2F4; } body.theme-academy .seats--modal :is(.seats__empty, .seats__bar) { color: var(--navy); } body.theme-academy .seats--modal .seats__empty::before { background: var(--navy); box-shadow: 0 0 0 4px rgba(17, 26, 43, .14); } body.theme-academy .seats--modal .seats__label { color: #5A5B60; } body.theme-academy .modal__success-mark .tally, body.theme-academy .modal__success .tally { color: var(--navy); } body.theme-academy :is(.consent a, .modal__tg a) { color: var(--navy); } body.theme-academy .select::after { border-color: var(--navy); } body.theme-academy :is([data-tone="dark"], .surface-dark, .section--navy, .surface-navy, .cta-band:not(.cta-band--light), .card--dark) .select::after { border-color: var(--silver-hi); } body.theme-academy .field__input:focus { border-color: var(--navy); } body.theme-academy .form-alert { border-color: rgba(179, 38, 30, .3); } @media (min-width: 900px) { body.theme-academy .modal__aside { background: radial-gradient(120% 90% at 100% 0%, #22304d 0%, var(--navy) 46%, var(--navy-deep) 100%); } body.theme-academy .modal__aside .modal__head { background: none; } body.theme-academy .modal__aside .seats--modal { background: none; border-top-color: rgba(230, 232, 236, .24); } body.theme-academy .modal__aside .seats--modal :is(.seats__empty, .seats__label, .seats__bar) { color: var(--silver-hi); } body.theme-academy .modal__aside .seats--modal .seats__empty::before { background: var(--silver-hi); box-shadow: 0 0 0 4px rgba(230, 232, 236, .18); } body.theme-academy .modal__crest { color: var(--silver); } } body.theme-academy .toast--success { border-left-color: var(--silver); } body.theme-academy .toast--error { background: #8E1E17; } body.theme-academy .toast { background: var(--navy-deep); } body.theme-academy .tip { background: var(--navy-deep); } body.theme-academy .lightbox__counter { color: var(--silver); } body.theme-academy .lightbox__nav { background: rgba(7, 11, 20, .5); } body.theme-academy .lightbox__nav:hover { border-color: var(--silver-hi); background: rgba(7, 11, 20, .8); } body.theme-academy .form-panel--success { border-top-color: var(--steel); } body.theme-academy .page-hero--ivory .page-hero__ornament svg { --crest-frame: var(--steel); } body.theme-academy :is(.cta-band:not(.cta-band--light), .card--dark, .surface-dark, .dialog--dark, .page-hero:not(.page-hero--ivory)) .btn--outline { border-color: rgba(230, 232, 236, .5); color: #fff; background: transparent; } body.theme-academy :is(.cta-band:not(.cta-band--light), .card--dark, .surface-dark, .dialog--dark, .page-hero:not(.page-hero--ivory)) .btn--outline:hover { border-color: var(--silver-hi); background: rgba(230, 232, 236, .1); } body.theme-academy :is(.cta-band:not(.cta-band--light), .card--dark, .surface-dark, .dialog--dark) .seat-dot { background: var(--silver-hi); } body.theme-academy :is(.cta-band:not(.cta-band--light), .card--dark, .surface-dark, .dialog--dark) .seat-dot::after { border-color: var(--silver-hi); } body.theme-academy :is(.cta-band:not(.cta-band--light), .card--dark, .surface-dark, .dialog--dark) .btn--gold { background: var(--silver-hi); color: var(--navy); } /* Light panels on Academy pages: the gold (= silver) primary becomes navy so it reads on paper */ body.theme-academy :is(.wl-form, .modal__success, .modal__returning, .dialog:not(.dialog--dark), .surface-light, .cta-band--light, .form-panel) .btn--gold { background: var(--navy); color: #fff; } body.theme-academy :is(.wl-form, .modal__success, .modal__returning, .dialog:not(.dialog--dark), .surface-light, .cta-band--light, .form-panel) .btn--gold:hover { background: var(--navy-2); }