/* Nova Trillion — Design Tokens Curated palette. Variable fonts. Spacing rhythm. visionOS depth. Inspired by: Linear, Vercel, Stripe, Apple visionOS. */ @import url("https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/style.css"); @import url("https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-mono/style.css"); :root { /* ─── Surfaces (visionOS depth layers) ────────────────────────── */ --bg-0: oklch(7% 0.015 264); /* deepest void */ --bg-1: oklch(10% 0.018 266); /* base canvas */ --bg-2: oklch(13% 0.022 268); /* raised */ --bg-3: oklch(16% 0.028 268); /* elevated panel */ --bg-4: oklch(20% 0.035 270); /* modal */ /* Glass tints — for backdrop-filter layers */ --glass-1: oklch(14% 0.025 268 / 0.55); --glass-2: oklch(18% 0.030 268 / 0.65); --glass-3: oklch(22% 0.035 270 / 0.72); /* ─── Borders & rim light (visionOS rim) ──────────────────────── */ --border-subtle: oklch(28% 0.04 270 / 0.18); --border-faint: oklch(40% 0.05 270 / 0.10); --border: oklch(35% 0.05 270 / 0.30); --border-strong: oklch(50% 0.08 270 / 0.45); --rim-light: oklch(85% 0.10 270 / 0.12); /* top inner border */ --rim-shadow: oklch(0% 0 0 / 0.50); /* outer drop */ /* ─── Text ─────────────────────────────────────────────────────── */ --text: oklch(96% 0.005 264); --text-2: oklch(82% 0.010 264); --text-3: oklch(64% 0.015 268); --text-4: oklch(48% 0.020 270); --text-faint: oklch(36% 0.020 270); /* ─── Brand: Nova spectrum (curated, NOT random) ──────────────── */ --nova-primary: oklch(72% 0.190 268); /* Nova violet — signature */ --nova-primary-2: oklch(78% 0.200 280); --nova-cyan: oklch(82% 0.150 215); --nova-magenta: oklch(72% 0.230 320); --nova-amber: oklch(82% 0.150 75); --nova-emerald: oklch(72% 0.180 155); --nova-coral: oklch(72% 0.200 25); /* Status */ --success: oklch(72% 0.170 152); --warning: oklch(80% 0.160 80); --danger: oklch(67% 0.220 25); --info: oklch(75% 0.150 215); /* ─── Typography ────────────────────────────────────────────────── */ --font-sans: 'Geist', -apple-system, 'SF Pro Display', system-ui, sans-serif; --font-mono: 'Geist Mono', 'SF Mono', 'JetBrains Mono', ui-monospace, monospace; --font-display: 'Geist', -apple-system, 'SF Pro Display', system-ui, sans-serif; /* Fluid type scale */ --fs-micro: clamp(0.6875rem, 0.65rem + 0.15vw, 0.75rem); --fs-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem); --fs-sm: clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem); --fs-base: clamp(0.9375rem, 0.9rem + 0.25vw, 1rem); --fs-lg: clamp(1.0625rem, 1rem + 0.4vw, 1.1875rem); --fs-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.4375rem); --fs-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem); --fs-3xl: clamp(1.875rem, 1.6rem + 1.25vw, 2.5rem); --fs-4xl: clamp(2.5rem, 2rem + 2.25vw, 3.75rem); --fs-5xl: clamp(3.5rem, 2.5rem + 4vw, 5.5rem); --fs-display: clamp(4.5rem, 3rem + 6.5vw, 8rem); /* Letter spacing */ --tracking-tight: -0.025em; --tracking-snug: -0.015em; --tracking-norm: -0.005em; --tracking-wide: 0.05em; --tracking-mega: 0.18em; /* Line height */ --lh-tight: 1.05; --lh-snug: 1.2; --lh-norm: 1.45; --lh-loose: 1.65; /* ─── Spacing (4px base, fluid for hero) ──────────────────────── */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 48px; --s-10: 64px; --s-11: 80px; --s-12: 96px; --s-13: 128px; /* ─── Radius ─────────────────────────────────────────────────────── */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-2xl: 28px; --r-3xl: 36px; --r-pill: 999px; /* ─── Shadows (layered, visionOS-style) ──────────────────────── */ --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.30), 0 1px 1px oklch(0% 0 0 / 0.20); --shadow-md: 0 4px 12px oklch(0% 0 0 / 0.35), 0 2px 4px oklch(0% 0 0 / 0.25); --shadow-lg: 0 16px 40px oklch(0% 0 0 / 0.45), 0 4px 12px oklch(0% 0 0 / 0.30); --shadow-xl: 0 32px 80px oklch(0% 0 0 / 0.55), 0 8px 24px oklch(0% 0 0 / 0.35); --shadow-glow: 0 0 32px oklch(72% 0.190 268 / 0.35), 0 0 80px oklch(72% 0.190 268 / 0.20); /* ─── Motion ─────────────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* expo */ --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: linear(0,0.0093 1.21%,0.0364 2.42%,0.1407 5.46%,0.5316 13.46%,0.7028 17.41%,0.852 21.69%,0.946 25.18%,1.011 28.7%,1.045 31.66%,1.063 34.49%,1.071 37.85%,1.063 41.23%,1.027 47.34%,1.001 50.77%,0.987 53.33%,0.98 55.91%,0.978 59.46%,0.987 64.93%,1.005 71.81%,1.001 81.16%,1); --t-fast: 140ms; --t-base: 240ms; --t-slow: 420ms; --t-glacial: 800ms; /* ─── Layout ────────────────────────────────────────────────────── */ --container: 1280px; --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); /* ─── Typed custom properties (animatable) ────────────────────── */ color-scheme: dark; interpolate-size: allow-keywords; accent-color: var(--nova-primary); } @property --hue { syntax: ''; inherits: true; initial-value: 268; } @property --pulse { syntax: ''; inherits: false; initial-value: 0; } @property --rim { syntax: ''; inherits: false; initial-value: 0%; } @property --gleam-x { syntax: ''; inherits: false; initial-value: 0%; } @property --depth { syntax: ''; inherits: false; initial-value: 0px; } @property --grad-angle { syntax: ''; inherits: false; initial-value: 90deg; } @property --beam { syntax: ''; inherits: false; initial-value: -50%; } @media (color-gamut: p3) { :root { --nova-primary: color(display-p3 0.40 0.30 0.95); --nova-cyan: color(display-p3 0.20 0.85 1.00); --nova-magenta: color(display-p3 0.95 0.30 0.85); --nova-emerald: color(display-p3 0.20 0.85 0.50); } } /* ─── Base reset (Stripe-quality) ──────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html, body { height: 100%; width: 100%; background: var(--bg-0); color: var(--text); font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-norm); letter-spacing: var(--tracking-norm); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: 'ss01', 'ss02', 'cv11'; font-variation-settings: 'wght' 400; } body { overflow: hidden; overscroll-behavior: none; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; background: transparent; border: 0; outline: 0; } button { cursor: pointer; user-select: none; } ::selection { background: var(--nova-primary); color: oklch(98% 0.02 264); } img, svg, video, canvas { display: block; max-width: 100%; } /* Scrollbar — minimal */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: oklch(30% 0.04 270 / 0.4); border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: oklch(40% 0.05 270 / 0.6); }