/* ============================================================ NANIVERSE.IO — DESIGN TOKENS The single source of truth. Every colour, size, and motion value on the site references a variable in this file. "Stories That Connect Us." ============================================================ */ :root { /* ---------------------------------------------------------- 1. RAW PALETTE (the brand colours, untouched) Reds = highlight. Darker reds = hover. Black = canvas. ---------------------------------------------------------- */ --nv-red: #E31B23; /* primary highlight — signal red (logo red) */ --nv-red-bright: #FF3B42; /* brightest — focus rings / glints */ --nv-red-mid: #B90D22; /* hover (darker) */ --nv-red-deep: #8F0021; /* active / pressed / gradient partner */ --nv-red-glow: #F47A80; /* soft red used only for glows/shadows */ --nv-black: #070707; /* page background — soft black (logo black) */ --nv-near-black: #0B0C11; /* alt deep background */ --nv-ink: #141414; /* card / surface on black */ --nv-charcoal-2: #2D2C35; /* surface gradient bottom */ --nv-charcoal: #343539; /* surface gradient top / raised surface */ --nv-cream: #F2E8D5; /* "Cream Khaki" — editorial flourishes ONLY */ --nv-cream-dim: #D9CDB4; /* aged cream — editorial dim (never body) */ --nv-bone: #EDE4D0; /* paper tone */ --nv-off-white: #FAF9F6; /* default body text on dark (logo white) */ --nv-white: #FFFFFF; /* max-contrast headings */ /* ---------------------------------------------------------- 2. SEMANTIC COLOUR (use THESE in components, not raw above) ---------------------------------------------------------- */ --bg: var(--nv-black); --bg-alt: var(--nv-near-black); --surface: var(--nv-ink); --surface-raised: var(--nv-charcoal-2); --surface-top: var(--nv-charcoal); --border: rgba(242, 232, 213, 0.12); /* warm cream hairline */ --border-strong: rgba(242, 232, 213, 0.22); --overlay: rgba(0, 0, 0, 0.66); --text: var(--nv-off-white); /* default body text */ --text-strong: var(--nv-white); /* headings */ --text-muted: rgba(250, 249, 246, 0.72); /* secondary / captions — neutral, NOT cream */ --text-faint: rgba(250, 249, 246, 0.55); --text-editorial: var(--nv-cream); /* serif / quote moments */ --text-on-red: var(--nv-white); --primary: var(--nv-red); --primary-hover: var(--nv-red-mid); /* darker on hover */ --primary-active: var(--nv-red-deep); /* deepest on press */ --focus-ring: var(--nv-red-bright); /* ---------------------------------------------------------- 3. GRADIENTS (use where they earn it — hero, CTAs, accents) ---------------------------------------------------------- */ --grad-red: linear-gradient(180deg, var(--nv-red) 0%, var(--nv-red-deep) 100%); --grad-red-diag: linear-gradient(135deg, var(--nv-red-bright) 0%, var(--nv-red-deep) 100%); /* button gradients: deliberately narrow range — premium, not candy */ --grad-red-subtle: linear-gradient(165deg, #F0303A 0%, var(--nv-red) 42%, #C11021 100%); --grad-red-subtle-deep: linear-gradient(165deg, #D91824 0%, #C81523 42%, #A50A20 100%); --grad-surface: linear-gradient(180deg, var(--nv-charcoal) 0%, var(--nv-charcoal-2) 100%); --grad-fade-black: linear-gradient(180deg, rgba(7,7,7,0) 0%, var(--nv-black) 100%); --grad-ember: radial-gradient(120% 120% at 50% 0%, rgba(227,27,35,0.18) 0%, rgba(7,7,7,0) 60%); /* ---------------------------------------------------------- 4. TYPOGRAPHY DM Sans = workhorse. Naniverse = display. Clubhouse = accent. ---------------------------------------------------------- */ --font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --font-display: "DM Sans", system-ui, sans-serif; /* display = DM Sans ExtraBold; the Naniverse wordmark is SVG-only */ --font-accent: "Clubhouse", "DM Sans", sans-serif; /* brand accent face — editorial display moments only */ /* fluid type scale — minor-third-ish, clamps for responsiveness */ --fs-overline: 0.75rem; /* 12px */ --fs-caption: 0.8125rem; /* 13px */ --fs-sm: 0.875rem; /* 14px */ --fs-base: 1rem; /* 16px */ --fs-btn: 0.9375rem; /* 15px — buttons sit a step under body */ --fs-lg: 1.125rem; /* 18px */ --fs-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); --fs-h3: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); --fs-h2: clamp(2rem, 1.5rem + 2.2vw, 3rem); --fs-h1: clamp(2.75rem, 1.8rem + 4vw, 4.5rem); --fs-display: clamp(3.5rem, 2rem + 7vw, 7.5rem); /* hero only */ --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.5; --lh-relaxed: 1.7; --ls-tight: -0.02em; --ls-normal: 0; --ls-wide: 0.04em; --ls-overline: 0.18em; /* uppercase labels */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; /* ---------------------------------------------------------- 5. SPACING (4px base scale) ---------------------------------------------------------- */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ --space-9: 6rem; /* 96 */ --space-10: 8rem; /* 128 */ --container: 1200px; /* max content width */ --container-narrow: 760px; /* prose / forms */ --gutter: clamp(1.25rem, 5vw, 4rem); /* ---------------------------------------------------------- 6. RADIUS ---------------------------------------------------------- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; /* reserved — decorative only, never buttons */ --radius-btn: 6px; /* buttons: rectangular, slight corner */ /* ---------------------------------------------------------- 7. ELEVATION (dark-UI shadows + signature red glow) ---------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.6); --shadow-md: 0 8px 24px rgba(0,0,0,0.55); --shadow-lg: 0 24px 60px rgba(0,0,0,0.6); --glow-red: 0 0 0 1px rgba(227,27,35,0.4), 0 8px 30px rgba(244,122,128,0.35); --glow-red-sm: 0 4px 18px rgba(244,122,128,0.30); /* ---------------------------------------------------------- 8. MOTION (smooth, cinematic — never bouncy) ---------------------------------------------------------- */ --dur-fast: 150ms; --dur-base: 250ms; --dur-slow: 400ms; --dur-portal: 800ms; /* big cinematic moves */ --ease: cubic-bezier(0.2, 0.8, 0.2, 1); /* default smooth */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* decelerate */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* ---------------------------------------------------------- 9. Z-INDEX ---------------------------------------------------------- */ --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-nav: 200; --z-overlay: 900; --z-modal: 1000; } /* Respect users who ask for less motion */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-portal: 0ms; } }