/* ============================================================================ LUXWRAP — DESIGN TOKENS The whole visual system lives here. Change a value, the site follows. ========================================================================= */ @property --holo-angle { syntax: ""; inherits: false; initial-value: 0deg; } @property --sheen-x { syntax: ""; inherits: false; initial-value: -60%; } @property --bar-fill { syntax: ""; inherits: false; initial-value: 0%; } /* the hub scene "breathes" (slow scale) and follows the cursor (parallax). registering these lets the keyframe animate --breathe and lets --px/--py transition smoothly toward the cursor. Unsupported (old FF) → static. */ @property --breathe { syntax: ""; inherits: false; initial-value: 1.04; } @property --px { syntax: ""; inherits: false; initial-value: 0px; } @property --py { syntax: ""; inherits: false; initial-value: 0px; } /* the person-neon "write-on": a conic mask reveals the glowing silhouette from a start angle around to 360deg, so the neon draws itself on like an After Effects trim-path. Registered so it can animate. */ @property --reveal { syntax: ""; inherits: false; initial-value: 360deg; } :root { /* ---------- Surfaces: deep, cold, expensive ---------- */ --ink-950: #04060a; --ink-900: #070a11; --ink-850: #0a0e17; --ink-800: #0d121d; --ink-750: #111826; --ink-700: #161e2e; --ink-600: #1d2739; --ink-500: #2a3547; /* ---------- Ink / text ---------- Contrast on --ink-900, measured (WCAG 2.x): text 17.0:1 · text-soft 10.9:1 · text-dim 6.4:1 · text-faint 5.8:1 · text-ghost 4.9:1 text-faint and text-ghost were originally 3.5:1 and 2.1:1 — pretty, and illegible. They carry the rail's 9px nav labels and the form placeholders, so they have to clear 4.5:1. If you darken them again to quiet them down, you are trading away readable navigation for mood. Don't. */ --text: #e9eef8; --text-soft: #b6c1d4; --text-dim: #8593ab; --text-faint: #7d8ba3; --text-ghost: #727f97; /* ---------- Accents ---------- */ --cy: #2ce9ff; /* electric cyan — primary HUD */ --cy-dim: #16b9d1; --mg: #ff3d8b; /* magenta — secondary / heat */ --mg-dim: #d61f6a; --li: #ffcf26; /* golden yellow — confirm / go / primary CTA (matches the game ref) */ --li-dim: #d9a400; --go: #ffc63d; /* gold — rank / premium */ --go-dim: #d99f1c; --vi: #8b5cff; /* violet — rare */ --vi-dim: #6a3fd6; --rd: #ff4d4d; /* red — alert */ /* ---------- Brand signature: colour-shift wrap film ---------- A NARROW HUE ARC, not a rainbow. Real colour-shift film (ChromaFlair and friends) travels roughly cyan -> violet -> magenta as the viewing angle changes; it never runs the full spectrum. The first version of this token ran cyan/violet/magenta/orange/yellow/lime and read like a gamer sticker — the single loudest, most-saturated, only-moving thing on a page whose job is to make a $200k car the hero. Keep it inside ~150 degrees of hue. Both stops must start and end on the same colour or the animated sweep (holo-slide) visibly seams on the loop. */ --holo: linear-gradient( 100deg, #2ce9ff 0%, #5ec0ff 16%, #8b5cff 38%, #c44ce0 58%, #ff3d8b 76%, #9a5cf5 90%, #2ce9ff 100% ); --holo-soft: linear-gradient( 100deg, rgba(44, 233, 255, 0.85) 0%, rgba(139, 92, 255, 0.85) 38%, rgba(255, 61, 139, 0.85) 72%, rgba(44, 233, 255, 0.85) 100% ); --chrome: linear-gradient( 160deg, #f3f7ff 0%, #9fb0c9 18%, #59667e 34%, #cfd8e6 50%, #7c8aa0 66%, #59667e 72%, #b9c5d6 86%, #eef3fb 100% ); /* ---------- Tier colours (rarity) ---------- */ --tier-s: var(--go); --tier-a: var(--mg); --tier-b: var(--cy); --tier-c: var(--text-dim); /* ---------- Lines & glass ---------- */ --line: rgba(150, 180, 225, 0.13); --line-strong: rgba(160, 195, 240, 0.26); --line-hot: rgba(44, 233, 255, 0.42); --glass: rgba(15, 22, 35, 0.62); --glass-2: rgba(21, 30, 46, 0.78); --glass-hi: rgba(255, 255, 255, 0.045); /* ---------- Glow ---------- */ --glow-cy: 0 0 0 1px rgba(44, 233, 255, 0.35), 0 0 18px -2px rgba(44, 233, 255, 0.5), 0 0 46px -12px rgba(44, 233, 255, 0.45); --glow-mg: 0 0 0 1px rgba(255, 61, 139, 0.35), 0 0 18px -2px rgba(255, 61, 139, 0.5), 0 0 46px -12px rgba(255, 61, 139, 0.45); --glow-li: 0 0 0 1px rgba(255, 200, 40, 0.4), 0 0 20px -2px rgba(255, 200, 40, 0.45), 0 0 52px -14px rgba(255, 200, 40, 0.5); --glow-go: 0 0 0 1px rgba(255, 198, 61, 0.4), 0 0 20px -2px rgba(255, 198, 61, 0.45); --shadow-panel: 0 24px 60px -28px rgba(0, 0, 0, 0.92), 0 2px 0 0 rgba(255, 255, 255, 0.03) inset; --shadow-lift: 0 32px 70px -30px rgba(0, 0, 0, 0.95), 0 0 0 1px var(--line-strong); /* ---------- Type ---------- */ --f-display: "Saira Condensed", "Arial Narrow", "Haettenschweiler", sans-serif; --f-ui: "Saira", "Inter", -apple-system, "Segoe UI", Roboto, sans-serif; --f-hud: "Chakra Petch", "Saira", "Consolas", monospace; --fs-hero: clamp(3.2rem, 8.4vw, 8.5rem); --fs-h1: clamp(2.4rem, 5vw, 4.6rem); --fs-h2: clamp(1.9rem, 3.4vw, 3.1rem); --fs-h3: clamp(1.25rem, 1.7vw, 1.6rem); --fs-lead: clamp(1rem, 1.25vw, 1.18rem); --fs-body: 0.98rem; --fs-sm: 0.84rem; --fs-xs: 0.74rem; --fs-hud: 0.68rem; --fs-micro: 0.6rem; --track-hud: 0.16em; --track-wide: 0.28em; /* ---------- Space ---------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; --sp-section: clamp(72px, 9vw, 148px); /* ---------- Chrome / layout ---------- */ --rail-w: 92px; --rail-w-lg: 108px; --topbar-h: 66px; --dock-h: 76px; --maxw: 1500px; --gutter: clamp(20px, 3.2vw, 56px); /* ---------- Shape: the HUD bevel ---------- */ --bevel: 14px; --bevel-sm: 8px; --bevel-lg: 22px; --r-sm: 4px; --r-md: 8px; --r-pill: 999px; /* ---------- Motion ---------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-snap: cubic-bezier(0.2, 0.9, 0.25, 1.3); --t-fast: 140ms; --t: 260ms; --t-slow: 520ms; --t-lazy: 900ms; /* ---------- Z ---------- */ --z-bg: 0; --z-content: 10; --z-dock: 60; --z-rail: 70; --z-topbar: 80; --z-modal: 100; --z-cursor: 200; color-scheme: dark; } /* Everything is authored for a dark cockpit. If a user forces light mode we still hold the dark HUD — this is a car in a dark studio, by design. */