@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700&display=swap'); /* ============================================================ Aurora theme — site-wide skin. Retints the existing dark theme (styles.css [data-theme="dark"]) to the Superwhisper "aurora over midnight glass" palette and swaps the type voice to Inter. Loaded LAST on every page, with . Token-only remap: every component built on the design tokens reskins for free (e.g. .btn--primary = var(--ink) on var(--paper) -> white on black automatically). ============================================================ */ :root, [data-theme="dark"], [data-theme="light"] { /* Voice */ --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* One rationed chromatic signal + decorative aurora ends */ --accent-hue: 250; /* shifts any oklch(...var(--accent-hue)) toward blue */ --accent: #0088ff; --accent-2: #0fb7fa; --accent-3: #b855e7; --accent-soft: #001b33; /* Text */ --ink: #ffffff; --ink-soft: #cfd2d6; --ink-mute: #b8babf; --ink-fade: #888b91; /* Surfaces — true-black canvas, tinted dark cards */ --paper: #000000; --paper-2: #0f0f10; --paper-sunk: #030719; --line: rgba(255, 255, 255, 0.10); --line-strong: rgba(255, 255, 255, 0.16); /* Dark utility surfaces (footer, tech bands) */ --dark-ink: #000000; --dark-ink-2: #0f0f10; --dark-line: rgba(255, 255, 255, 0.08); --dark-line-2: rgba(255, 255, 255, 0.14); --dark-mute: rgba(244, 244, 248, 0.62); --dark-fade: rgba(244, 244, 248, 0.40); color-scheme: dark; } /* Canvas lives on so the glow can sit behind transparent content without a stacking hack. overflow-x:clip kills any sideways scroll (sticky-safe, unlike overflow:hidden). */ html { background: #000; overflow-x: clip; } body { background: transparent; color: var(--ink); font-feature-settings: "ss01" on, "cv11" on; } /* Compressed, confident display type — the aurora signature */ .display { letter-spacing: -0.045em; } ::selection { background: var(--accent); color: #fff; } /* Cinematic top glow — a quiet nod to the hero aurora on every page. Fixed, viewport-width (no overflow), behind body content (z-index:-1), never intercepts pointer events. */ body::before { content: ""; position: fixed; left: 0; right: 0; top: -38vh; height: 95vh; background: radial-gradient(60% 60% at 50% 40%, rgba(75, 82, 170, 0.30) 0%, rgba(17, 45, 114, 0.16) 42%, rgba(0, 0, 0, 0) 72%), radial-gradient(42% 52% at 62% 30%, rgba(168, 135, 220, 0.16) 0%, rgba(0, 0, 0, 0) 70%); pointer-events: none; z-index: -1; filter: saturate(115%); } /* The site is locked to the aurora theme — retire the light/dark toggle */ .theme-toggle { display: none !important; } /* Primary CTA reads as the single white action surface, matching home */ .btn--primary { background: #fff; color: #000; } .btn--primary:hover { background: #fff; color: #000; } /* Status badges / chips that hard-coded light fills: pull them onto dark */ .status-badge--live { background: rgba(39, 201, 63, 0.12); border-color: rgba(39, 201, 63, 0.32); color: #6fe08a; } .status-badge--beta { background: rgba(255, 183, 100, 0.12); border-color: rgba(255, 183, 100, 0.30); color: #ffcf8a; } .status-badge--build { background: rgba(0, 136, 255, 0.12); border-color: rgba(0, 136, 255, 0.32); color: #6cc0ff; } /* Tab active chip on dark */ .tab[aria-selected="true"] { background: rgba(255, 255, 255, 0.10); color: #fff; } /* ============================================================ Global header — one header across the whole site, identical to the homescreen. Transparent at the top of the page; on scroll it gains a progressive (gradient) blur: strongest at the top of the bar, fading to nothing at its bottom edge. Two stacked masked backdrop-filter layers do the falloff. */ .nav--scrolled { background: linear-gradient(to bottom, rgba(6, 7, 9, 0.72) 0%, rgba(6, 7, 9, 0.28) 55%, rgba(6, 7, 9, 0) 100%) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-color: transparent !important; } .nav--scrolled::before, .nav--scrolled::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; } /* strong blur, concentrated at the very top */ .nav--scrolled::before { backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 28%, transparent 70%); mask-image: linear-gradient(to bottom, #000 0%, #000 28%, transparent 70%); } /* lighter blur, carries the falloff smoothly to the bottom edge */ .nav--scrolled::after { backdrop-filter: blur(5px) saturate(1.2); -webkit-backdrop-filter: blur(5px) saturate(1.2); -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.6) 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.6) 55%, transparent 100%); } /* keep nav content above the blur layers */ .nav--scrolled > * { position: relative; z-index: 1; } /* drawer open: drop the blur layers so the fixed sheet isn't clipped */ .nav--menu-open::before, .nav--menu-open::after { display: none !important; }