/* ========================================================================== SUPREME LUXE — DESIGN TOKENS Every value here is lifted from the approved Claude Design output (02 - BRAND & CREATIVE/CLAUDE DESIGN OUTPUT/) — see DESIGN_HANDOFF.md §4 and §6. Do not introduce colours or type sizes that are not in the approved files. ========================================================================== */ :root { /* --- Colour ------------------------------------------------------------- Two-colour brand system: onyx + crimson, on bone. No gradients anywhere except the colour swatch dot and image scrims. */ --onyx: #0A0A0A; /* page background */ --surface: #14100F; /* cards, media wells, trust strip */ --burgundy: #4A0E17; /* Build Your Supreme fill */ --crimson: #C8102E; /* primary CTA, selected states, fills, rules */ --crimson-hover: #a10d26; /* CTA hover darken */ /* DELIBERATE, MINIMAL DEVIATION FROM THE APPROVED PALETTE — one token. The approved design sets small crimson text (12px uppercase eyebrows) in #C8102E on #0A0A0A. Measured, that is 3.37:1 — below the 4.5:1 WCAG AA floor for normal-size text. The GVisuals brief requires adequate contrast and says accessibility is not to be traded for aesthetics, so small crimson TEXT uses this lifted crimson (4.78:1) while every crimson fill, border, CTA and selected state stays exactly #C8102E as approved. Flagged for GVisuals: revert this one line to restore literal fidelity. */ --crimson-text: #E63950; --bone: #F5F2EB; /* primary text on dark */ --whatsapp: #25D366; /* icon fill only — never restyled */ /* Mobile page-frame backdrop (mobile artifacts only) */ --backdrop-base: #1A1717; --backdrop-warm: #241416; /* Footer, from the GVisuals design-system overrides in every artifact */ --footer-line: #241016; --ink-400: #9c8f88; /* Bone at the opacities the design actually uses. Named by role, not number. */ --bone-85: rgba(245, 242, 235, 0.85); /* nav links */ --bone-72: rgba(245, 242, 235, 0.72); /* body on burgundy */ --bone-70: rgba(245, 242, 235, 0.70); /* body */ --bone-68: rgba(245, 242, 235, 0.68); /* body, hero sub */ --bone-60: rgba(245, 242, 235, 0.60); /* secondary */ --bone-55: rgba(245, 242, 235, 0.55); /* tertiary, field labels */ --bone-50: rgba(245, 242, 235, 0.50); /* wordmark sub, section labels */ --bone-45: rgba(245, 242, 235, 0.45); /* quietest text */ --bone-40: rgba(245, 242, 235, 0.40); /* placeholders */ /* Hairlines and control borders */ --line-08: rgba(245, 242, 235, 0.08); /* nav border, section rules */ --line-10: rgba(245, 242, 235, 0.10); /* list separators */ --line-12: rgba(245, 242, 235, 0.12); /* panel rules */ --line-14: rgba(245, 242, 235, 0.14); /* drawer edge */ --line-15: rgba(245, 242, 235, 0.15); /* thumb border, swatch ring */ --line-22: rgba(245, 242, 235, 0.22); /* unselected chip */ --line-25: rgba(245, 242, 235, 0.25); /* textarea */ --line-28: rgba(245, 242, 235, 0.28); /* bespoke inputs */ --line-30: rgba(245, 242, 235, 0.30); /* secondary button */ --line-40: rgba(245, 242, 235, 0.40); /* underline links, hero outline */ --line-45: rgba(245, 242, 235, 0.45); /* mobile secondary button */ --line-50: rgba(245, 242, 235, 0.50); /* business button */ /* Selected-state fill for toggles */ --crimson-wash: rgba(200, 16, 46, 0.12); /* Product colour-family swatches. Not brand colours — product options only. */ --swatch-red: conic-gradient(#8a1420 0turn .5turn, #14100f .5turn 1turn); --swatch-blue: #1d3350; --swatch-pink: #c9709a; --swatch-white: #F5F2EB; /* --- Type --------------------------------------------------------------- Two families only. Instrument Serif 400 (+ italic once), Inter 400/500/600. */ --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif; --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Display scale — desktop clamps exactly as authored per screen */ --h1-hero: clamp(44px, 6vw, 84px); /* homepage hero */ --h1-bespoke: clamp(38px, 6vw, 68px); --h1-build: clamp(34px, 5vw, 54px); --h2-section: clamp(32px, 4vw, 52px); /* Edit, Shop the Moment, Moments */ --h2-split: clamp(32px, 4vw, 50px); /* asymmetric split sections */ --h2-business: clamp(30px, 3.6vw, 46px); --h2-reminder: clamp(26px, 3vw, 36px); --h2-bespoke: clamp(28px, 3.4vw, 38px); --campaign-line: clamp(26px, 3.4vw, 40px); /* Fixed sizes the design states flat rather than clamping */ --h1-pdp: 44px; --h1-pdp-mobile: 32px; /* Interface scale */ --fs-eyebrow: 12px; --fs-eyebrow-mobile: 11px; --fs-nav: 12px; --fs-btn: 13px; --fs-body: 16px; --fs-body-lg: 17px; --fs-body-sm: 13.5px; --fs-price: 26px; --ls-eyebrow: 0.18em; --ls-nav: 0.06em; --ls-btn: 0.06em; --ls-wordmark: 0.24em; --lh-display: 1.05; --lh-body: 1.6; /* --- Layout ------------------------------------------------------------- Max widths differ per screen in the approved files. Preserved, not unified. DESIGN_HANDOFF.md §5 explicitly says do not normalise these. */ --max-home: 1360px; --max-product: 1440px; --max-bespoke: 1280px; --pad-x-fixed: 64px; /* Homepage / PDP */ --pad-x-fluid: clamp(20px, 5vw, 64px); /* Build / Bespoke */ --pad-x-mobile: 20px; --section-y: 130px; /* Edit, Shop the Moment, Moments */ --section-y-mobile: 44px; --nav-h: 96px; /* fixed-nav offset on PDP */ /* --- Motion ------------------------------------------------------------- Functional only. No scroll reveals, parallax or particles exist in the approved design and none are added. DESIGN_HANDOFF.md §15. */ --t-hover: 0.15s ease; /* chips, toggles */ --t-button: 0.2s ease; /* buttons, WhatsApp control */ --t-nav: 0.3s ease; /* nav background / border on scroll */ --t-drawer: 0.4s ease; /* cart drawer slide */ --t-image: 0.6s ease; /* product / occasion image hover scale */ --z-drawer: 50; --z-reopen: 60; --z-float: 90; --z-nav: 100; } @media (prefers-reduced-motion: reduce) { :root { --t-hover: 0s; --t-button: 0s; --t-nav: 0s; --t-drawer: 0s; --t-image: 0s; } }