/* Faith365 — Design Tokens (CLAUDE.md §3.5). LIGHT theme: the hero background is the cream light-pillar artwork, so ink is near-black throughout. The former dark --hero-* values are inverted here. */ :root { /* Fonts */ --font-head: "Playfair Display", serif; --font-head-weight: 500; --font-body: "Geist", sans-serif; /* Type scale — Major Third (1.25), base 16px */ --fs-xs: 0.64rem; --fs-sm: 0.8rem; --fs-base: 1rem; --fs-md: 1.25rem; --fs-lg: 1.5625rem; --fs-xl: 1.953rem; --fs-2xl: 2.441rem; --fs-3xl: 3.052rem; --fs-4xl: 3.815rem; --fs-5xl: 4.768rem; /* Measured off flowty: 45.8px @375 (12.2vw) → 127.5px @1440 (8.85vw). */ --fs-hero: clamp(2.86rem, 8.85vw, 7.97rem); --fs-lead: 1.0625rem; /* 17px — flowty's body copy sits at 16.5px @1440 */ --sect-gap: clamp(120px, 22vh, 320px); --fs-cta: 1.125rem; /* 18px — owner override, deliberately off the 1.25 scale */ /* Section headline — deliberately below --fs-hero so the hero stays the largest type on the page. flowty's is 170px design / ~112px rendered @1440. */ --fs-section: clamp(2.25rem, 6.6vw, 5.4rem); /* Display — the About/stat headline. Deliberately between --fs-section and --fs-hero: bigger than a section head, still smaller than the hero, which stays the largest type on the page. */ --fs-display: clamp(2.6rem, 7.8vw, 6.9rem); --fs-stat-lead: clamp(1.35rem, 2.5vw, 2.25rem); /* flowty's 36px @1440 */ --fs-testi: clamp(1.75rem, 5vw, 4.5rem); /* flowty's 72px @1440 */ /* 404 — flowty's /404 measured at 1440x900: headline 72px, numeral 224.25px. The numeral takes the slot the phone owns on the hero, so it is the largest thing on the page but still under --fs-hero at the same width. */ --fs-404-head: clamp(2.25rem, 5vw, 4.5rem); --fs-404-num: clamp(5rem, 15.57vw, 14rem); --fs-clause: clamp(1.5rem, 4.3vw, 3.85rem); /* legal clause heading */ --fs-card-title: clamp(1.6rem, 2.6vw, 2.35rem); /* Spacing — 4px base */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; --sp-32: 128px; --sp-40: 160px; /* Layout rails */ --gutter: var(--sp-6); --nav-h: 72px; /* Brand — unchanged */ --brand: #FF5C00; --btn-primary: #FF5C00; --btn-ink: #FFFFFF; --secondary: #FFFFFF; /* Page */ --bg: #FEF4E4; --bg-2: #FFFFFF; --bg-3: #F7F6F5; /* neutral card ground — sections below the phone block */ --hair-soft: rgba(26, 26, 26, 0.055); /* the barely-there card/button edge */ --hair-card: rgba(26, 26, 26, 0.11); /* for a card that shares its ground's fill */ /* The page-bg gradient behind the whole phone block (owner-specified) */ --hero-grad-a: #EEF6FF; /* pale blue */ --hero-grad-b: #FFEEE5; /* pale warm */ --hero-grad-angle: 15deg; --text: #1A1A1A; --text-muted: #5A5550; /* Hero — now LIGHT. Same token names, inverted values, so every component that already reads --hero-* flips with no markup change. */ --hero-bg: #FDF3E6; /* matches the artwork's warm cream */ --hero-ink: #1A1A1A; /* near-black headline + nav */ --hero-ink-mut: rgba(26, 26, 26, 0.66); --hero-card: rgba(255, 255, 255, 0.78); /* opaque enough to read without a backdrop blur */ --hero-hair: rgba(26, 26, 26, 0.14); /* Cursor */ --cursor-size: 8px; --cursor-ring: 36px; } @media (min-width: 768px) { :root { --gutter: var(--sp-8); --nav-h: 80px; } } @media (min-width: 1200px) { :root { --gutter: var(--sp-8); --nav-h: 88px; } } /* --------------------------------------------------------------------------- DARK THEME — the Light Pillar background (reactbits, ported in src/webgl/LightPillar.js). Additive light cannot read on cream, so the whole block inverts. Only the token VALUES change; no component CSS is theme-aware except the two SVG inversions below. TO ROLL BACK to the cream artwork background: set in index.html. Nothing else needs touching — the artwork layer, the light token values and the Stage gate all key off that one attribute. --------------------------------------------------------------------------- */ :root[data-theme="dark"] { --hero-bg: #06070C; /* near-black, cool-biased for the blue */ --hero-ink: #F4F7FF; --hero-ink-mut: rgba(244, 247, 255, 0.66); --hero-card: rgba(244, 247, 255, 0.06); --hero-hair: rgba(244, 247, 255, 0.16); --bg: #06070C; --bg-2: #06070C; --text: #F4F7FF; --text-muted: rgba(244, 247, 255, 0.66); }