/* Drift Maps — "Night Run" skin (concept A), shared by index / library / map. Load AFTER brand.css: palette and type come from there; this adds the full-screen stage, the HUD corners, the transparent header and the scroll-story section styles. Pages opt in with . ------------------------------------------------------------------------ HEADER MARKUP (.nr-header) — copy this on every night-skin page:

DRIFT MAPS

rig · online

(optional)

(auth.js paints it)

Then add "scrolled" once the page has moved a little so the bar picks up its blur: addEventListener("scroll", () => hdr.classList.toggle("scrolled", scrollY > 24), {passive:true}) .mark / .word come from brand.css; .rig hides under 980px, .links under 860px, and brand.css collapses .auth-who / .auth-avail on phones. ------------------------------------------------------------------------ */ .night { background: var(--asphalt); color: var(--chalk); } .night h1, .night h2 { letter-spacing: -.02em; line-height: 1.05; } .night a:hover { text-decoration: none; } /* ---------- stage: fixed three.js canvas + vignette ---------- */ #stage { position: fixed; inset: 0; z-index: 0; } #stage canvas { display: block; width: 100%; height: 100%; } .vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 80% 70% at 50% 40%, transparent 40%, rgba(14, 15, 18, .85) 100%); } /* No WebGL / three.js failed to load: the flat asphalt + brand.css contour grid is the stage, and the vignette would only darken it. */ .night.no-webgl .vignette { display: none; } /* ---------- scroll progress ---------- */ .progress { position: fixed; left: 0; top: 0; height: 2px; width: 0; background: var(--sodium); z-index: 41; } /* ---------- HUD corners (mono, survey voice) ---------- */ .hud { position: fixed; z-index: 3; font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; color: var(--gravel); text-transform: uppercase; pointer-events: none; } .hud.bl { bottom: 22px; left: 26px; } .hud.br { bottom: 22px; right: 26px; text-align: right; } .hud b, .rig b { color: var(--sodium); font-weight: 500; } .live { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--taillight); box-shadow: 0 0 10px var(--taillight); margin-right: 8px; animation: blink 1.4s infinite; } @keyframes blink { 50% { opacity: .25; } } /* ---------- header: transparent over the stage, blurs once scrolled ---------- */ .nr-header, .topbar { position: sticky; top: 0; z-index: 40; background: transparent; border-bottom: 1px solid transparent; transition: background .25s ease, border-color .25s ease; } .nr-header.scrolled, .topbar.scrolled { background: rgba(14, 15, 18, .72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom-color: rgba(42, 46, 54, .7); } .nr-header .row, .topbar .row { display: flex; align-items: center; gap: 28px; height: 68px; padding: 0 26px; max-width: none; } .nr-header .mark svg, .topbar .mark svg { width: 30px; height: 30px; } .nr-header .mark .word, .topbar .mark .word { font-size: .85rem; letter-spacing: .18em; } .nr-header .links, .topbar .links { display: flex; gap: 22px; } .nr-header .links a, .topbar .links a { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gravel); transition: color .15s ease; } .nr-header .links a:hover, .nr-header .links a[aria-current="page"], .topbar .links a:hover, .topbar .links a[aria-current="page"] { color: var(--chalk); } .nr-header .rig, .topbar .rig { margin-left: auto; font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gravel); white-space: nowrap; } .nr-header .actions, .topbar .actions { display: flex; align-items: center; gap: 12px; margin-left: auto; } .nr-header .rig + .actions, .topbar .rig + .actions { margin-left: 0; } /* auth.js paints .btn-quiet / .btn-primary / .auth-who / .auth-avail here */ .nr-header .actions .btn, .topbar .actions .btn { padding: 8px 14px; font-size: .84rem; } .nr-header .actions .btn-quiet, .topbar .actions .btn-quiet { padding: 8px 4px; } .nr-header .actions .mono, .topbar .actions .mono { font-size: .74rem; } /* ---------- story sections ---------- */ .night main { position: relative; z-index: 2; } .story { min-height: 100vh; display: flex; align-items: center; padding: 0 8vw; } .story .copy { max-width: 560px; opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s ease; } .story.on .copy { opacity: 1; transform: none; } .story .eyebrow { font-size: .72rem; letter-spacing: .2em; margin-bottom: 18px; } .story h1 { font-size: clamp(3rem, 8vw, 7rem); } .story h2 { font-size: clamp(2rem, 4.5vw, 3.6rem); margin-bottom: 16px; } p.lede { color: var(--gravel); font-size: 1.1rem; max-width: 44ch; margin: 0; } .story.right { justify-content: flex-end; } .story.right .copy { text-align: right; } .story.right p.lede { margin-left: auto; } .coords { font-family: var(--mono); font-size: clamp(1rem, 2.2vw, 1.5rem); color: var(--chalk); margin: 26px 0 8px; min-height: 1.6em; overflow-wrap: anywhere; } .coords .cur { display: inline-block; width: .6em; height: 1.1em; background: var(--sodium); vertical-align: -.15em; animation: blink .9s steps(1) infinite; } .log { font-family: var(--mono); font-size: .78rem; color: var(--gravel); line-height: 1.9; margin-top: 22px; } .log div { opacity: 0; transform: translateX(-8px); transition: .35s ease; } .story.on .log div { opacity: 1; transform: none; } .story.on .log div:nth-child(2) { transition-delay: .25s; } .story.on .log div:nth-child(3) { transition-delay: .5s; } .log .ok { color: var(--signal); } .log .k { color: var(--chalk); } .profile { width: min(560px, 80vw); max-width: 100%; height: 120px; margin-top: 22px; } .profile path.fill { fill: rgba(255, 164, 59, .08); } .profile path.line { fill: none; stroke: var(--sodium); stroke-width: 2; stroke-dasharray: 2000; stroke-dashoffset: 2000; transition: stroke-dashoffset 2.4s ease; } .story.on .profile path.line { stroke-dashoffset: 0; } .profile text { font-family: var(--mono); font-size: 10px; fill: var(--gravel); letter-spacing: .08em; } .score { display: flex; flex-wrap: wrap; gap: 38px; margin-top: 26px; justify-content: flex-end; } .score div { font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gravel); } .score b { display: block; font-family: var(--display); font-size: 2.6rem; color: var(--chalk); letter-spacing: -.02em; line-height: 1.1; margin-bottom: 4px; } .score b.amber { color: var(--sodium); } /* ---------- buttons on the stage ---------- */ .story .cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; } .story .cta-row .btn { margin: 0; } .night .btn-primary:hover { transform: translateY(-1px); } .night .btn-ghost:hover { border-color: var(--gravel); } .story .sub-cta { margin-top: 14px; font-size: .86rem; color: #6f7683; max-width: 44ch; } .story .sub-cta a { color: var(--gravel); } .story .sub-cta a:hover { color: var(--chalk); } .closer { text-align: center; justify-content: center; } .closer .copy { text-align: center; } .closer p.lede { margin: 0 auto; } .closer .cta-row { justify-content: center; } .price { font-family: var(--mono); font-size: .8rem; color: var(--gravel); margin-top: 18px; letter-spacing: .06em; } /* ---------- sheet: a panel section on the stage (pricing, library) ---------- */ .sheet { padding: 14vh 8vw; } .sheet .inner { max-width: 900px; margin: 0 auto; opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s ease; } .sheet.on .inner { opacity: 1; transform: none; } .sheet h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin: 10px 0 4px; } .sheet .sub { color: var(--gravel); max-width: 640px; margin-bottom: 22px; } .pane { background: rgba(22, 24, 29, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--contour); border-radius: var(--radius); } /* ---------- pricing cards on the stage ---------- */ .plans { display: grid; gap: 18px; margin-top: 6px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; } .plan { padding: 30px 28px; position: relative; } .plan.feat { border-color: var(--sodium-dim); box-shadow: 0 0 0 1px rgba(255, 164, 59, .08), 0 20px 60px rgba(0, 0, 0, .35); } .plan .tag { position: absolute; top: 16px; right: 18px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--sodium-dim); background: rgba(255, 164, 59, .08); font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; color: var(--sodium); } .plan h3 { font-size: 1.15rem; font-weight: 600; margin-bottom: 6px; } .plan .big { font-family: var(--display); font-size: 2rem; font-weight: 700; margin: 6px 0 4px; } .plan .big small { font-family: var(--body); font-size: 1rem; font-weight: 400; color: var(--gravel); } .plan p { color: var(--gravel); font-size: .95rem; } .plan ul { list-style: none; margin: 18px 0 22px; padding: 0; display: grid; gap: 9px; color: var(--gravel); font-size: .93rem; } .plan ul li::before { content: "✓ "; color: var(--signal); font-family: var(--mono); } .plan .cta-row { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; } .plan .trial-sub { margin: 10px 0 0; font-size: .85rem; color: var(--gravel); } .payg-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .payg-card { padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; } .payg-card h3 { font-size: 1.02rem; font-weight: 600; } .payg-card .big { font-family: var(--display); font-size: 1.5rem; font-weight: 700; } .payg-card p { color: var(--gravel); font-size: .88rem; flex: 1; } .payg-card .btn { margin-top: 8px; align-self: start; } .payg { margin-top: 14px; padding: 16px 18px; color: var(--gravel); font-size: .92rem; line-height: 1.6; } .payg .signin { display: block; margin-top: 8px; color: var(--gravel); } .payg .signin a { color: var(--sodium); } .sheet .section-label { margin-top: 26px; } .sheet .section-label::after { background: rgba(42, 46, 54, .8); } /* ---------- free-month banner (legacy trial cohort, ends 2026-09-17) ---------- */ .night .free-month { position: relative; z-index: 39; background: var(--sodium); color: var(--asphalt); font-family: var(--body); font-size: .9rem; line-height: 1.5; padding: 10px 24px; text-align: center; } .night .free-month b { font-weight: 600; } .night .free-month a { color: var(--asphalt); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; } /* ---------- footer over the stage ---------- */ .night .foot { position: relative; z-index: 2; margin-top: 0; padding: 44px 0 72px; /* room under the legal text for the fixed HUD corners */ border-top-color: rgba(42, 46, 54, .6); background: linear-gradient(to bottom, rgba(14, 15, 18, 0), rgba(14, 15, 18, .92) 40%); } /* ---------- motion + mobile ---------- */ @media (prefers-reduced-motion: reduce) { .live, .coords .cur { animation: none; } .story .copy, .sheet .inner, .log div, .profile path.line, .nr-header, .topbar { transition: none; } .story .copy, .sheet .inner, .log div { opacity: 1; transform: none; } .profile path.line { stroke-dashoffset: 0; } } @media (max-width: 980px) { .nr-header .rig, .topbar .rig { display: none; } } @media (max-width: 860px) { .nr-header .links, .topbar .links { display: none; } } @media (max-width: 640px) { .hud.br { display: none; } .hud.bl { left: 16px; bottom: 16px; } .story { padding: 0 6vw; } .sheet { padding: 12vh 6vw; } .plan { padding: 24px 20px; } .nr-header .row, .topbar .row { padding: 0 16px; gap: 14px; } .nr-header .actions, .topbar .actions { gap: 8px; } .nr-header .actions .btn, .topbar .actions .btn { padding: 8px 12px; font-size: .82rem; } .score { gap: 24px; } }