/* ============================================================ AURA — design tokens Palette: dark cinematic ground with a copper/rust accent lifted from the driver coils visible mid-explode in the source footage — not an invented brand color. The frame itself keeps its studio-white backdrop; the edge feather (see main.js) dissolves it into this dark ground like a product under a spotlight. Fonts: Space Grotesk (display) / Inter (body) / JetBrains Mono (eyebrow labels — a spec-sheet, teardown-documentation cue). ============================================================ */ /* Lenis smooth-scroll (see main.js): the recommended base styles. Lenis adds the .lenis class to only when smoothing is active, so native scroll (and prefers-reduced-motion, where we never start Lenis) is untouched. */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } :root { /* color — semantic tokens, not raw hex scattered through the file */ --color-bg: #0a0a12; --color-bg-deep: #1e1b4b; --color-fg: #f8fafc; --color-fg-muted: #99a2b5; --color-copper: #f2793a; --color-copper-bright: #f2793a; --color-copper-soft: rgba(242, 121, 58, 0.3); --color-border: rgba(248, 250, 252, 0.12); /* type scale — 12/14/16/18/24/32/48/64, hero extends the top step */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-md: 1.125rem; --text-lg: 1.5rem; --text-xl: 2rem; --text-2xl: 3rem; --text-hero: clamp(3.5rem, 11vw, 7rem); --font-display: "Space Grotesk", "Inter", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace; /* spacing — 8pt scale */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 1rem; --space-4: 1.5rem; --space-5: 2rem; --space-6: 3rem; --space-7: 4rem; --space-8: 6rem; --container-width: 720px; --safe-margin: clamp(1.5rem, 5vw, 4rem); } * { box-sizing: border-box; } html { background: var(--color-bg); scrollbar-gutter: stable; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; min-height: 100vh; background: var(--color-bg); color: var(--color-fg); font-family: var(--font-body); font-weight: 400; line-height: 1.5; overflow-x: hidden; } /* ---------- fixed gradient backdrop ---------- */ .bg-gradient { position: fixed; inset: 0; z-index: 0; background: linear-gradient(160deg, #05050a 0%, var(--color-bg) 45%, var(--color-bg-deep) 100%); overflow: hidden; } .bg-blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.5; will-change: transform; } .bg-blob--one { width: 46vmax; height: 46vmax; top: -14vmax; right: -12vmax; background: radial-gradient(circle, var(--color-copper-soft), transparent 70%); } .bg-blob--two { width: 38vmax; height: 38vmax; bottom: -16vmax; left: -10vmax; background: radial-gradient(circle, rgba(99, 132, 199, 0.22), transparent 70%); } /* ---------- three.js canvas ---------- */ #scene { position: fixed; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; } /* the frame's own studio-white backdrop sits directly behind the overlaid copy now that the frame is large and centered — this scrim keeps the (light-colored) text readable against it everywhere, including the centered CTA, while still leaving the product itself clearly visible */ .scrim { position: fixed; inset: 0; z-index: 1; background: radial-gradient(ellipse at center, rgba(5, 5, 10, 0.32) 0%, rgba(5, 5, 10, 0.6) 100%); pointer-events: none; } /* ---------- back link ---------- */ .back-link { position: fixed; top: var(--space-3); left: var(--safe-margin); z-index: 20; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.04em; color: var(--color-fg-muted); text-decoration: none; padding: var(--space-2) var(--space-3); border-radius: 999px; border: 1px solid var(--color-border); background: rgba(10, 10, 18, 0.55); backdrop-filter: blur(6px); transition: color 200ms ease, border-color 200ms ease; } .back-link:hover, .back-link:focus-visible { color: var(--color-copper-bright); border-color: var(--color-copper-soft); } /* ---------- header ---------- */ .site-header { position: fixed; top: 50%; left: 0; z-index: 10; display: flex; align-items: center; padding: 0 var(--safe-margin); transform: translateY(-50%); pointer-events: none; } .wordmark { font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); letter-spacing: 0.14em; color: var(--color-fg); } /* ---------- pinned scroll story ---------- */ .pin-wrap { position: relative; height: 100vh; z-index: 2; } .panel { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; max-width: var(--container-width); padding: 0 var(--safe-margin); opacity: 0; pointer-events: none; } .panel--hero { opacity: 1; align-items: flex-start; max-width: none; } .panel--design, .panel--specs { align-items: flex-start; } .panel--sound { align-items: flex-end; text-align: right; margin-left: auto; } .panel--cta { align-items: center; text-align: center; max-width: none; } .eyebrow { font-family: var(--font-mono); font-weight: 500; font-size: var(--text-sm); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-copper); margin: 0 0 var(--space-3); } .hero-headline { font-family: var(--font-display); font-weight: 700; font-size: var(--text-hero); line-height: 0.95; letter-spacing: -0.01em; text-wrap: balance; color: var(--color-fg); text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5); margin: 0; } .hero-tagline { font-family: var(--font-body); font-weight: 400; font-size: var(--text-lg); color: var(--color-fg-muted); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 4px rgba(0, 0, 0, 0.9), 0 2px 8px rgba(0, 0, 0, 0.85), 0 4px 20px rgba(0, 0, 0, 0.75); max-width: 30ch; margin: var(--space-4) 0 0; } .panel h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-2xl); line-height: 1.1; text-wrap: balance; color: var(--color-fg); text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5); margin: 0 0 var(--space-3); } .panel p:not(.eyebrow) { font-size: var(--text-md); color: var(--color-fg-muted); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 4px rgba(0, 0, 0, 0.9), 0 2px 8px rgba(0, 0, 0, 0.85), 0 4px 20px rgba(0, 0, 0, 0.75); max-width: 42ch; margin: 0; } .panel--sound p:not(.eyebrow) { margin-left: auto; } .cta-button { display: inline-block; margin-top: var(--space-5); padding: var(--space-3) var(--space-6); border-radius: 999px; background: var(--color-copper-bright); /* the dark ground color on the copper fill measures ~6.7:1 — light text on copper would fail AA */ color: var(--color-bg); font-family: var(--font-body); font-weight: 600; font-size: var(--text-base); text-decoration: none; cursor: pointer; pointer-events: auto; transition: transform 200ms ease, box-shadow 200ms ease, background-color 200ms ease; } .cta-button:hover { background: #ff8a4d; box-shadow: 0 8px 24px var(--color-copper-soft); transform: translateY(-1px); } .cta-button:focus-visible { outline: 2px solid var(--color-fg); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .cta-button { transition: none; } .cta-button:hover { transform: none; } } .scroll-cue { position: absolute; bottom: var(--space-6); left: var(--safe-margin); display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-fg-muted); } .scroll-cue span { width: 1px; height: 28px; background: var(--color-fg-muted); position: relative; overflow: hidden; } .scroll-cue span::after { content: ""; position: absolute; inset: 0; background: var(--color-copper); transform: translateY(-100%); /* motion.csv "Scroll Reveal / Subtle" family — power1-style ease-in-out, 1.8s loop */ animation: scroll-cue-drop 1.8s cubic-bezier(0.45, 0, 0.55, 1) infinite; } @keyframes scroll-cue-drop { 0% { transform: translateY(-100%); } 60% { transform: translateY(100%); } 100% { transform: translateY(100%); } } @media (prefers-reduced-motion: reduce) { .scroll-cue span::after { animation: none; transform: translateY(0); } } /* ---------- footer ---------- */ .site-footer { position: relative; z-index: 2; padding: var(--space-7) var(--safe-margin); color: var(--color-fg-muted); font-size: var(--text-sm); text-align: center; } @media (max-width: 1100px) { /* the frame stays centered and large at every width (see main.js layoutPlane) — on narrow screens a right-aligned block reads as cramped against the edge, so keep everything left-aligned instead */ .panel--sound { align-items: flex-start; text-align: left; margin-left: 0; } .panel--sound p:not(.eyebrow) { margin-left: 0; } .hero-headline { font-size: clamp(2.75rem, 16vw, 4rem); } .panel h2 { font-size: clamp(1.75rem, 8vw, 2.5rem); } /* the panel copy is vertically centered on every width, which is where a center-left header would collide with it on a short mobile viewport — keep the wordmark clear of that band up here instead */ .site-header { top: var(--space-5); transform: none; } }