/* ========================================================= Animated Creative: design tokens Palette: A/B "positive / negative" system (14.05.26). Studio chrome (nav, hero, About, contact) renders on the light POSITIVE/WHITE treatment held in :root. The Eternal Tales brand worlds (chamber, ET cards, TEoTE) render on the dark NEGATIVE/DARK treatment via [data-theme="dark"]. Spec colours: Dark #0F1419, White #FFFFFF, Teal #4C6971, Accent #FF3FD1 (vivid fuchsia, a controlled spark). Values marked "derived" are not in the four-colour spec; they are tuned from it and can be revised. Typography: EB Garamond display + Georgia body. Scale: 1440 golden master, fluid step-down via breakpoints ========================================================= */ :root { /* ---------- Light studio palette (A POSITIVE / WHITE) ---------- 14.05.26: re-themed to the A/B image's POSITIVE/WHITE spec, replacing the superseded warm-dark palette. The studio chrome renders light; the Eternal Tales brand worlds opt into the dark NEGATIVE treatment via [data-theme="dark"] below. */ --bg: #FFFFFF; /* spec White, studio page background */ --surface: #F4F3F6; /* faint panel tint (derived) */ --primary-text: #0F1419; /* spec Dark, headlines + wordmark + lead-in */ /* 18.05.26: soft + quiet text bumped slightly whiter (lighter) per user direction. soft-text from 4C6971 -> 5E7780 (still passes WCAG AA on white). quiet-text from 6B7E83 -> 7B8E94 (passes AA for large text). Holds the teal cast so the brand colour is still recognisable, just less saturated against the page. */ --soft-text: #5E7780; /* spec Teal lightened, sub-headlines + body + nav links */ --accent: #FF3FD1; /* spec Accent, vivid fuchsia, the controlled spark */ --emerald: #0F6B4B; /* unused, retained */ --teal: #4C6971; /* spec Teal, named for reuse */ --authority: #2b2627; /* unused, retained */ /* ---------- Softened companion (light) ---------- */ --soft-bg-alt: #F4F3F6; /* derived */ --soft-surface: #EDECF0; /* derived */ --quiet-text: #7B8E94; /* quietest copy, lightened teal (derived) */ --accent-soft: #E92FBC; /* fuchsia hover, deeper (derived) */ --accent-tint: #FFE0F6; /* pale fuchsia for tints (derived) */ --emerald-soft: #3C8A6D; /* unused, retained */ --emerald-tint: #D4E4DC; /* unused, retained */ --teal-soft: #5D9B99; /* unused, retained */ --teal-tint: #D9E8E7; /* unused, retained */ --authority-soft: #4a4241; /* unused, retained */ --authority-tint: #ddd8cd; /* unused, retained */ /* ---------- Cream mode ---------- */ --cream: #EFE7D8; --cream-deep: #DDD7CB; --cream-text: #2A241C; /* proposed 19.04.26, ~10:1 on cream */ /* ---------- Typography families ---------- 06.05.26: body text is Georgia (universal system font, identical rendering on every device). Capitalised content headers use the Garamond stack via --font-display. 11.05.26: EB Garamond moved from Google Fonts to self-hosted WOFF2 in AC-v3/fonts/eb-garamond/. Same variable font Google was serving, no behavioural change at runtime; saves a third-party connection and keeps Google out of every visitor's request stream. 12.05.26: --font-display order swapped. Previously 'Garamond, EB Garamond, Georgia, serif' which meant macOS / Windows users got system Garamond (more generic, reads close to Georgia at display sizes) and EB Garamond only loaded as a fallback. Now 'EB Garamond, Garamond, Georgia, serif' so the self-hosted webfont is preferred on every device. System Garamond + Georgia stay as fallbacks for the rare device that can't load the webfont. */ --font-sans: Georgia, serif; --font-serif: Georgia, serif; --font-display: 'EB Garamond', Garamond, Georgia, serif; /* ---------- Type scale (1440 golden master) ---------- */ --h1: 48px; --h2: 36px; --h3: 24px; --h4: 18px; --body-lead: 18px; --body: 16px; --body-small: 14px; --caption: 13px; --label: 12px; --nav: 16px; /* ---------- Spacing scale ---------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; /* ---------- Radius ---------- */ --radius-sm: 3px; --radius-md: 6px; --radius-lg: 12px; /* ---------- Borders + dividers ---------- */ --border: 1px solid rgba(255, 63, 209, 0.25); /* accent fuchsia 25% */ --divider: 1px solid rgba(255, 63, 209, 0.4); /* accent fuchsia 40% */ /* ---------- Shadows ---------- */ --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-lift: 0 12px 40px rgba(0, 0, 0, 0.5); /* ---------- Layout ---------- */ /* Nav height history: 80 > 100 on 19.04.26 (str-v2-190426-navlogo) so the wordmark reads ~2x larger per user feedback. Stepped 100/90/84/76 across four breakpoints from 19.04.26 through 05.05.26. Re-architected 05.05.26 to a single fluid clamp: smooth scaling from 76 at <=768 to 100 at >=1200, no discrete jumps. Resolves the 'jumpy' effect Caoimhin flagged during the OS sandbox calibration and gives the fixed breadcrumb / credit a stable anchor at every viewport width. */ --nav-height: clamp(76px, 5.5vw + 34px, 100px); --max-content: 1240px; /* 18.05.26: chamber outro scroll buffer between Voice of the Fili and The Ends of the Earth. Drives both the .et-chamber__outro div's height (inside the chamber) and the TEoTE track's negative margin (so TEoTE overlaps the outro and is sticky-pinned behind the dissolving chamber). Keep these consistent; tune both together. */ --chamber-outro-height: 100vh; /* ---------- Motion ---------- */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --t-fast: 150ms; --t-standard: 400ms; } /* ========================================================= Dark brand-world palette (B NEGATIVE / DARK) The Eternal Tales chamber, the ET cards and the TEoTE stage opt into this via [data-theme="dark"]; .teote-stage-wrap is listed explicitly because it carries no data-theme of its own. Only the tokens that differ from the light :root are re-declared; the accent fuchsia, borders, type, spacing, shadows and layout are shared across both treatments. ========================================================= */ [data-theme="dark"], .teote-stage-wrap { --bg: #16181A; /* neutral charcoal; was navy-lean spec Dark #0F1419 (20.05.26) */ --surface: #1B2128; /* lifted dark panel (derived) */ /* 21.05.26 r22: pure white was too extreme on dark bgs. Softened to a warm off-white. Pure #FFFFFF reserved for accent / emphasis spots that can override locally. */ --primary-text: #F2EBD9; /* soft cream, text on dark */ --accent-white: #FFFFFF; /* reserved for accents / highlights */ --soft-text: #A7B6BA; /* support copy, lightened teal (derived) */ --authority: #1B2128; /* unused, retained */ --soft-bg-alt: #161C22; /* derived */ --soft-surface: #1B2128; /* derived */ --quiet-text: #76878C; /* quietest copy on dark (derived) */ --authority-soft: #1B2128; /* unused, retained */ --authority-tint: #FFFFFF; /* unused, retained */ } /* ---------- Fluid step-downs ---------- 1440 golden master → scale below. We keep the scale deliberate rather than clamp-everything, so individual sections can override per section spec. */ @media (max-width: 1728px) { :root { --max-content: 1240px; } } @media (max-width: 1200px) { :root { --max-content: 1080px; } } @media (max-width: 991px) { :root { --max-content: 920px; } } @media (max-width: 767px) { :root { --h1: 40px; --h2: 30px; --h3: 22px; } } @media (max-width: 576px) { :root { --h1: 32px; --h2: 26px; --body-lead: 16px; --body: 15px; } } @media (max-width: 400px) { :root { --h1: 28px; --body: 14px; --body-small: 13px; } }