/* ========================================================================== HUD v3 — wRVU Selfies mission control. One world (the Tahoe pier, graded cyan-steel), one HUD locked over it, on EVERY page. DNA: JARVIS (live instrumentation, reticles, glow) × igloo.inc (one world / many cameras, corner chrome, mono voice) × Design-Codex tokens. Mounted via . On the app, this sheet loads AFTER style.css and overrides its visuals; every app.js contract (ids, state classes, inline style writes) preserved. All motion transform/opacity, all gated by prefers-reduced-motion. ========================================================================== */ @font-face { font-family: 'Inter'; src: url('/static/fonts/inter-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('/static/fonts/inter-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('/static/fonts/inter-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } :root { --void: #05080d; --ink: #e8f1f8; --cyan: #53d9ff; --ember: #ffab52; /* the lantern — warm accent, rationed */ --ink-2: color-mix(in srgb, var(--ink) 62%, transparent); --ink-3: color-mix(in srgb, var(--ink) 38%, transparent); --line: color-mix(in srgb, var(--ink) 13%, transparent); --line-2: color-mix(in srgb, var(--ink) 24%, transparent); --panel: color-mix(in srgb, #0a141f 88%, transparent); --panel-hard: #0a141f; --cyan-dim: color-mix(in srgb, var(--cyan) 55%, transparent); --cyan-ghost: color-mix(in srgb, var(--cyan) 13%, transparent); --cyan-glow: rgba(83, 217, 255, .34); --warn: #f0b450; --bad: #f3736b; --good: #53d9ff; --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; --sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; --ease: cubic-bezier(0.16, 1, 0.3, 1); --t-fast: 180ms; --t-med: 420ms; --t-slow: 900ms; --t-cinema: 1400ms; --gutter: clamp(18px, 3vw, 40px); --container: 1140px; --chap-pad: clamp(5rem, 12vh, 9rem); } * { box-sizing: border-box; } html { color-scheme: dark; scroll-behavior: smooth; } body { margin: 0; background: var(--void); color: var(--ink); font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; overflow-x: clip; } ::selection { background: var(--cyan); color: var(--void); } :focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 2px; } a { color: inherit; } .wrap { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } /* the HUD voice */ .mx { font-family: var(--mono); font-size: 10.5px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); } .mx-c { color: var(--cyan-dim); } .mx-e { color: color-mix(in srgb, var(--ember) 75%, transparent); } /* ========================================================================== SCENE — the world behind every page ========================================================================== */ .scene { position: fixed; inset: 0; z-index: -3; overflow: hidden; background: radial-gradient(62% 42% at 70% 26%, color-mix(in srgb, var(--cyan) 12%, transparent), transparent 68%), radial-gradient(58% 50% at 22% 74%, rgba(150, 120, 220, .12), transparent 72%), radial-gradient(45% 40% at 50% 52%, rgba(120, 160, 255, .07), transparent 76%), var(--void); } .scene canvas.stars { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .scene img, .scene video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; } .scene img.drift { animation: scene-drift 46s ease-in-out infinite alternate; } @keyframes scene-drift { from { transform: scale(1.02) translateY(0); } to { transform: scale(1.09) translateY(-1.4%); } } .scene video { opacity: 0; transition: opacity 1.2s var(--ease); } .scene video.live { opacity: 1; } .scene .swap { opacity: 0; transition: opacity 1s var(--ease); } .scene .swap.show { opacity: 1; } /* dimming per page mode (scrim + vignette + dots share one layer) */ .scene::after { content: ''; position: absolute; inset: 0; background: radial-gradient(125% 95% at 50% 42%, transparent 52%, rgba(3, 6, 10, .5) 100%), linear-gradient(180deg, rgba(5, 8, 13, .34) 0%, transparent 24%, transparent 66%, rgba(5, 8, 13, .72) 100%); } body[data-hud="app"] .scene::after { background: rgba(5, 8, 13, .78); } body[data-hud="app"] .scene::before { content: ''; position: absolute; inset: 0; z-index: 1; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } body[data-hud="auth"] .scene::after { background: linear-gradient(180deg, rgba(5, 8, 13, .55), rgba(5, 8, 13, .74)); } body[data-hud="doc"] .scene::after { background: rgba(5, 8, 13, .88); } /* dot matrix + grain above the scene, below content */ .hud-dots { position: fixed; inset: 0; z-index: -2; pointer-events: none; background-image: radial-gradient(color-mix(in srgb, var(--ink) 13%, transparent) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(75% 65% at 50% 40%, #000 18%, transparent 78%); mask-image: radial-gradient(75% 65% at 50% 40%, #000 18%, transparent 78%); } .hud-grain::after { content: ''; position: fixed; inset: -50%; z-index: 90; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); opacity: .05; animation: hud-grain 8s steps(10) infinite; } @keyframes hud-grain { 50% { transform: translate(8%, -6%); } } /* ========================================================================== HUD FRAME — rulers canvas + corner chrome, every page ========================================================================== */ #hudFrame { position: fixed; inset: 0; z-index: 70; pointer-events: none; } .chrome { position: fixed; inset: 0; z-index: 71; pointer-events: none; } .chrome > div { position: absolute; display: flex; align-items: center; gap: 8px; } .chrome .tl { top: 72px; left: 22px; } .chrome .tr { top: 72px; right: 22px; font-variant-numeric: tabular-nums; } .chrome .bl { bottom: 16px; left: 22px; } .chrome .br { bottom: 16px; right: 22px; font-variant-numeric: tabular-nums; } .hud-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); flex: none; box-shadow: 0 0 10px var(--cyan-glow); animation: hud-pulse 2.4s ease-in-out infinite; } @keyframes hud-pulse { 50% { opacity: .35; } } @media (max-width: 900px) { .chrome, #hudFrame { display: none; } } /* viewport scan sweep (fires occasionally via JS adding .go) */ .hud-sweep { position: fixed; left: 0; right: 0; top: -4px; height: 2px; z-index: 69; pointer-events: none; opacity: 0; background: linear-gradient(90deg, transparent, var(--cyan-dim), transparent); box-shadow: 0 0 18px var(--cyan-glow); } .hud-sweep.go { animation: sweep-y 2.8s cubic-bezier(.4, 0, .3, 1) 1; } @keyframes sweep-y { 0% { opacity: 0; transform: translateY(0); } 8% { opacity: .8; } 92% { opacity: .8; } 100% { opacity: 0; transform: translateY(100vh); } } /* ========================================================================== NAV ========================================================================== */ .hud-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 80; border-bottom: 1px solid transparent; transition: border-color var(--t-med) var(--ease), background var(--t-med) var(--ease); } .hud-nav.is-scrolled { background: color-mix(in srgb, var(--void) 84%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom-color: var(--line); } .hud-nav-in { max-width: var(--container); margin-inline: auto; padding: 14px var(--gutter); padding-top: calc(14px + env(safe-area-inset-top)); display: flex; align-items: center; gap: 26px; } .hud-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; font-size: 15px; letter-spacing: -.01em; color: var(--ink); } .hud-brand .sig { width: 11px; height: 11px; border-radius: 50%; flex: none; border: 1.5px solid var(--cyan); box-shadow: 0 0 12px var(--cyan-glow), inset 0 0 5px var(--cyan-glow); animation: hud-pulse 3.2s ease-in-out infinite; } .hud-nav-links { display: flex; gap: 24px; margin-left: 8px; } .hud-nav-links a { text-decoration: none; transition: color var(--t-fast) var(--ease); } .hud-nav-links a:hover { color: var(--cyan); } .hud-nav-cta { margin-left: auto; display: flex; align-items: center; gap: 16px; } @media (max-width: 820px) { .hud-nav-links { display: none; } } /* ========================================================================== BUTTONS ========================================================================== */ .hud-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--mono); font-size: 12.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; cursor: pointer; padding: 15px 30px; border-radius: 3px; border: 1px solid var(--cyan); background: var(--cyan); color: #032330; box-shadow: 0 0 26px -6px var(--cyan-glow), inset 0 1px 0 rgba(255, 255, 255, .25); transition: box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); } .hud-btn:hover { background: color-mix(in srgb, var(--cyan) 84%, white); box-shadow: 0 0 46px -6px var(--cyan-glow); transform: translateY(-1px); } .hud-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } .hud-btn-ghost { background: transparent; color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 45%, transparent); box-shadow: none; } .hud-btn-ghost:hover { background: var(--cyan-ghost); border-color: var(--cyan); box-shadow: 0 0 30px -8px var(--cyan-glow); } .hud-btn-sm { padding: 9px 18px; font-size: 11px; } /* ========================================================================== BRACKETS + PODS — the instrument grammar ========================================================================== */ .brkt { position: relative; } .brkt > i { position: absolute; width: 13px; height: 13px; pointer-events: none; z-index: 2; border: 0 solid var(--cyan-dim); transition: border-color var(--t-fast) var(--ease); } .brkt > i:nth-of-type(1) { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; } .brkt > i:nth-of-type(2) { top: -1px; right: -1px; border-top-width: 1px; border-right-width: 1px; } .brkt > i:nth-of-type(3) { bottom: -1px; left: -1px; border-bottom-width: 1px; border-left-width: 1px; } .brkt > i:nth-of-type(4) { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; } .brkt:hover > i { border-color: var(--cyan); } .pod { position: relative; background: var(--panel); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); } @media (hover: hover) { .pod:hover { border-color: var(--line-2); background: color-mix(in srgb, #0c1826 90%, transparent); } } .pod-head { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--line); } .pod-head .mx { flex: 1; } .pod-head .spin { width: 12px; height: 12px; flex: none; border-radius: 50%; border: 1px dashed var(--cyan-dim); animation: pod-spin 9s linear infinite; } @keyframes pod-spin { to { transform: rotate(360deg); } } .pod-body { padding: 18px 16px; } /* scanline that runs inside a pod (capture bay while recognizing, hovers) */ .podscan { position: absolute; left: 0; right: 0; top: 0; height: 1.5px; opacity: 0; z-index: 2; background: linear-gradient(90deg, transparent, var(--cyan), transparent); box-shadow: 0 0 14px var(--cyan-glow); pointer-events: none; } .scanning .podscan { opacity: .85; animation: podscan-y 2.2s cubic-bezier(.45, 0, .55, 1) infinite; } @keyframes podscan-y { 0% { transform: translateY(0); } 50% { transform: translateY(var(--scan-h, 220px)); } 100% { transform: translateY(0); } } /* ========================================================================== TARGETING RETICLE — locks onto the world ========================================================================== */ .ret { position: absolute; z-index: 5; pointer-events: none; width: var(--ret-s, 84px); height: var(--ret-s, 84px); transform: translate(-50%, -50%); } .ret .box { position: absolute; inset: 0; } .ret .box i { position: absolute; width: 26%; height: 26%; border: 0 solid var(--cyan); } .ret .box i:nth-child(1) { top: 0; left: 0; border-top-width: 1.5px; border-left-width: 1.5px; } .ret .box i:nth-child(2) { top: 0; right: 0; border-top-width: 1.5px; border-right-width: 1.5px; } .ret .box i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1.5px; border-left-width: 1.5px; } .ret .box i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1.5px; border-right-width: 1.5px; } .ret .dot { position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: var(--cyan); transform: translate(-50%, -50%); box-shadow: 0 0 10px var(--cyan-glow); } .ret .ring { position: absolute; inset: 14%; border-radius: 50%; border: 1px dashed var(--cyan-dim); animation: pod-spin 14s linear infinite; } .hud-on .ret .box { animation: ret-lock 1.1s var(--ease) both; animation-delay: var(--ret-d, 1.2s); } @keyframes ret-lock { 0% { transform: scale(2.6); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } } .ret .tag { position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); white-space: nowrap; display: flex; align-items: center; gap: 8px; } .ret .tag::before { content: ''; width: 26px; height: 1px; background: var(--cyan-dim); } .ret.tag-left .tag { left: auto; right: calc(100% + 12px); flex-direction: row-reverse; } .ret.tag-left .tag::before { order: -1; } @media (max-width: 720px) { .ret .tag { display: none; } .ret { --ret-s: 56px; } } /* ========================================================================== BOOT — power-on + typed boot lines ========================================================================== */ .hud-js .boot { opacity: 0; transform: translateY(14px); filter: blur(5px); } .hud-on .boot { opacity: 1; transform: none; filter: none; transition: opacity var(--t-cinema) var(--ease), transform var(--t-cinema) var(--ease), filter var(--t-cinema) var(--ease); } .hud-on .boot.b1 { transition-delay: .08s; } .hud-on .boot.b2 { transition-delay: .42s; } .hud-on .boot.b3 { transition-delay: .60s; } .hud-on .boot.b4 { transition-delay: .76s; } .hud-on .boot.b5 { transition-delay: .92s; } .hud-on .boot.b6 { transition-delay: 1.08s; } .hud-on .boot.b7 { transition-delay: 1.24s; } .bootlines { display: grid; gap: 3px; min-height: 42px; } .bootlines span { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan-dim); } .bootlines span b { color: var(--cyan); font-weight: 400; } .hud-js .bootlines span { visibility: hidden; } .hud-js .bootlines span.on { visibility: visible; } /* caret used by typing effects */ .t-caret { display: inline-block; width: 7px; height: 12px; background: var(--cyan); vertical-align: -2px; box-shadow: 0 0 10px var(--cyan-glow); animation: caret-blink 1s steps(1) infinite; } @keyframes caret-blink { 50% { opacity: 0; } } /* ========================================================================== REVEALS + MASKED LINES ========================================================================== */ .hud-js .rv { opacity: 0; transform: translateY(16px); } .hud-js .rv.is-in { opacity: 1; transform: none; transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); } .mask-line { overflow: clip; display: block; } .mask-line > span { display: block; transform: translateY(110%); } .hud-on .mask-line > span { transform: none; transition: transform 1s var(--ease); transition-delay: var(--ml-d, .3s); } /* ========================================================================== LANDING — hero over the corridor ========================================================================== */ .hero-stage { min-height: 100svh; position: relative; display: grid; align-content: end; justify-items: center; text-align: center; padding: calc(90px + env(safe-area-inset-top)) var(--gutter) 96px; } .hero-kicker { margin-bottom: 14px; } .hero-h1 { font-size: clamp(36px, 5.4vw, 64px); font-weight: 600; line-height: 1.04; letter-spacing: -.028em; margin: 0; max-width: 17ch; text-wrap: balance; text-shadow: 0 2px 30px rgba(3, 6, 10, .8); } .hero-tag { max-width: 60ch; color: color-mix(in srgb, var(--ink) 78%, transparent); font-size: 16px; margin: 18px 0 0; text-shadow: 0 1px 16px rgba(3, 6, 10, .9); } .hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 30px; } .hero-sub { margin-top: 16px; } /* builder byline: the least-copyable claim, sitting under the CTA as the trust closer */ .hero-by { max-width: 56ch; margin: 22px 0 0; font-size: 14px; line-height: 1.65; color: color-mix(in srgb, var(--ink) 60%, transparent); text-shadow: 0 1px 16px rgba(3, 6, 10, .9); } .hero-by b { font-weight: 600; color: color-mix(in srgb, var(--ink) 88%, transparent); } .hero-cue { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); color: var(--ink-3); animation: hud-bob 2.8s ease-in-out infinite; } @keyframes hud-bob { 50% { transform: translate(-50%, 8px); } } /* the reactor floats in the sky at the corridor's vanishing point */ .hero-reactor { position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%); width: min(46vw, 340px); aspect-ratio: 1; pointer-events: none; } .hero-reactor canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .hero-reactor .core { position: absolute; inset: 0; display: grid; place-content: center; gap: 2px; text-align: center; } .hero-reactor .core .mx { font-size: 9.5px; } .hero-reactor .core .num { font-size: clamp(38px, 6.4vw, 58px); font-weight: 600; line-height: 1; letter-spacing: -.03em; color: #f2fbff; font-variant-numeric: tabular-nums; text-shadow: 0 0 38px var(--cyan-glow); } .hero-reactor .core .sub { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--ink-2); } .hero-reactor .core .sub b { color: var(--cyan); font-weight: 500; } @media (max-width: 720px) { /* stack the reactor ABOVE the headline in normal flow, with clear separation */ .hero-stage { align-content: center; padding-bottom: 76px; } .hero-reactor { position: relative; transform: none; top: auto; left: auto; width: min(56vw, 216px); margin: 0 auto 30px; } .ret { display: none; } /* drop the floating reticle on mobile; it collided with the headline */ } /* marquee */ .hud-marquee { border-block: 1px solid var(--line); padding-block: 13px; overflow: clip; white-space: nowrap; background: color-mix(in srgb, var(--void) 55%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .hud-marquee .row { display: inline-flex; animation: hud-marq 44s linear infinite; } .hud-marquee span { font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); padding-right: 54px; } .hud-marquee b { color: var(--cyan-dim); font-weight: 400; } @keyframes hud-marq { to { transform: translateX(-50%); } } /* chapters */ .chap { padding-block: var(--chap-pad) 0; position: relative; } .chap-head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 38px; border-bottom: 1px solid var(--line); padding-bottom: 16px; } .chap-head .idx { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; color: var(--cyan); font-variant-numeric: tabular-nums; text-shadow: 0 0 12px var(--cyan-glow); } .chap-head h2 { font-size: clamp(23px, 2.9vw, 32px); font-weight: 600; letter-spacing: -.02em; margin: 0; } .chap-head .rule { flex: 1; } .chap-head .tag { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); } @media (max-width: 640px) { .chap-head .tag { display: none; } } .hud-cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .hud-card { padding: 0; } .hud-card .pod-body { padding: 20px; } .hud-card .ic { width: 36px; height: 36px; display: grid; place-items: center; color: var(--cyan); border: 1px solid var(--line-2); margin-bottom: 14px; filter: drop-shadow(0 0 7px var(--cyan-glow)); } .hud-card .ic svg { width: 18px; height: 18px; } .hud-card h3 { font-size: 16px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 8px; } .hud-card p { font-size: 14px; color: var(--ink-2); margin: 0; line-height: 1.65; } /* terminal */ .term { background: color-mix(in srgb, var(--void) 72%, #000); border: 1px solid var(--line-2); font-family: var(--mono); max-width: 640px; margin-inline: auto; box-shadow: 0 0 70px -26px var(--cyan-glow), inset 0 0 44px -30px var(--cyan-glow); } .term-bar { display: flex; align-items: center; gap: 9px; padding: 11px 16px; border-bottom: 1px solid var(--line); } .term-bar .hud-dot { width: 5px; height: 5px; } .term-bar span { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); } .term-bar .rt { margin-left: auto; color: var(--cyan-dim); } .term-body { padding: 18px 20px 16px; font-size: 12.5px; line-height: 2.15; } .term-row { display: flex; justify-content: space-between; gap: 16px; white-space: nowrap; overflow: hidden; } .term-row .proc { color: color-mix(in srgb, var(--ink) 76%, transparent); overflow: hidden; text-overflow: ellipsis; } .term-row .proc::before { content: '> '; color: var(--cyan-dim); } .term-row .val { color: var(--cyan); font-variant-numeric: tabular-nums; text-shadow: 0 0 12px var(--cyan-glow); } .hud-js .term-row .val { opacity: 0; transition: opacity var(--t-fast) var(--ease); } .hud-js .term-row .val.on { opacity: 1; } .term-stats { display: flex; gap: 26px; flex-wrap: wrap; padding: 13px 20px; border-top: 1px solid var(--line); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } .term-stats b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; } .term-note { padding: 11px 20px 14px; border-top: 1px solid var(--line); font-size: 11px; color: var(--warn); } /* shield */ .shield { border: 1px solid var(--line-2); background: var(--panel); padding: 30px; position: relative; overflow: hidden; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .shield::before { content: ''; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan-dim), transparent); } .shield h2 { display: flex; align-items: center; gap: 14px; font-size: 19px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 18px; } .shield .ic { width: 36px; height: 36px; display: grid; place-items: center; color: var(--cyan); border: 1px solid var(--line-2); filter: drop-shadow(0 0 7px var(--cyan-glow)); flex: none; } .shield .ic svg { width: 18px; height: 18px; } .shield ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; color: var(--ink-2); font-size: 14.5px; line-height: 1.7; } .shield li { position: relative; padding-left: 26px; } .shield li::before { content: '＋'; position: absolute; left: 0; top: 0; color: var(--cyan); font-family: var(--mono); } .shield b { color: var(--ink); } /* transmission */ .transmission { max-width: 620px; margin-inline: auto; text-align: center; } .transmission p { margin: 18px 0 0; font-size: clamp(17px, 2.4vw, 21px); line-height: 1.7; color: color-mix(in srgb, var(--ink) 84%, transparent); text-shadow: 0 1px 18px rgba(3, 6, 10, .9); } /* access / pricing */ .access { max-width: 420px; margin-inline: auto; text-align: center; padding: 34px 30px 30px; } .access .amt { font-size: 58px; font-weight: 600; letter-spacing: -.035em; line-height: 1; margin-top: 16px; font-variant-numeric: tabular-nums; text-shadow: 0 0 44px var(--cyan-glow); } .access .amt small { font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: .1em; color: var(--ink-3); } .access ul { list-style: none; padding: 0; margin: 18px 0 24px; font-family: var(--mono); font-size: 12px; letter-spacing: .04em; line-height: 2.3; color: var(--ink-2); } .access .hud-btn { width: 100%; } /* faq */ .hud-faq { max-width: 680px; margin-inline: auto; border-top: 1px solid var(--line); } .hud-faq details { border-bottom: 1px solid var(--line); } .hud-faq summary { cursor: pointer; list-style: none; position: relative; padding: 17px 40px 17px 0; font-weight: 500; font-size: 15px; } .hud-faq summary::-webkit-details-marker { display: none; } .hud-faq summary::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: 18px; color: var(--cyan-dim); transition: transform var(--t-fast) var(--ease); } .hud-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); color: var(--cyan); } .hud-faq p { padding-bottom: 18px; font-size: 14px; color: var(--ink-2); margin: 0; } /* final + footer */ .hud-final { text-align: center; padding-block: var(--chap-pad); } .hud-final .hero-sub { margin-top: 18px; } .hud-footer { border-top: 1px solid var(--line); padding: 56px var(--gutter) 26px; margin-top: var(--chap-pad); background: linear-gradient(180deg, transparent, rgba(3, 6, 10, .7)); position: relative; } .hud-footer .wordmark { font-weight: 600; text-transform: uppercase; line-height: .92; letter-spacing: -.03em; font-size: clamp(44px, 11vw, 150px); text-align: center; color: color-mix(in srgb, var(--ink) 15%, transparent); user-select: none; } .hud-footer .foot-meta { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 34px; font-size: 12.5px; color: var(--ink-3); text-align: center; line-height: 1.8; } .hud-footer a { color: var(--ink-2); } /* sticky mobile CTA */ .hud-msticky { display: none; } @media (max-width: 639px) { body[data-hud="landing"] { padding-bottom: 86px; } .hud-msticky { display: block; position: fixed; left: 14px; right: 14px; z-index: 85; bottom: calc(12px + env(safe-area-inset-bottom)); } .hud-msticky .hud-btn { display: flex; width: 100%; box-shadow: 0 14px 40px -8px rgba(0, 0, 0, .8), 0 0 30px -6px var(--cyan-glow); } .hero-ctas { flex-direction: column; align-items: stretch; width: 100%; max-width: 340px; } } /* ========================================================================== AUTH — the beacon airlock ========================================================================== */ .authwrap { max-width: 400px; margin-inline: auto; padding: 0 var(--gutter) 60px; } .auth-head { text-align: center; padding: calc(44px + env(safe-area-inset-top)) 0 30px; } .auth-head h1 { font-size: 18px; font-weight: 600; letter-spacing: -.01em; margin: 0; display: inline-flex; align-items: center; gap: 10px; } .auth-head h1 .sig { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--cyan); box-shadow: 0 0 12px var(--cyan-glow), inset 0 0 5px var(--cyan-glow); } .auth-head .sub { margin: 10px 0 0; } .auth-head .bootlines { margin-top: 14px; justify-items: center; min-height: 30px; } .authcard { display: flex; flex-direction: column; padding: 28px 26px; background: color-mix(in srgb, var(--panel-hard) 92%, transparent); border: 1px solid var(--line-2); position: relative; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 0 80px -30px var(--cyan-glow), 0 30px 70px -40px rgba(0, 0, 0, .9); } .authcard h2 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 6px; } .authcard .mx { margin-bottom: 14px; } .authcard label { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin: 14px 0 6px; } .authcard label .opt { color: var(--ink-3); text-transform: none; letter-spacing: .06em; } .authcard input { font: 400 16px/1.4 var(--sans); color: var(--ink); background: color-mix(in srgb, var(--void) 70%, #000); border: 1px solid var(--line-2); border-radius: 3px; padding: 11px 13px; transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); } .authcard input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px var(--cyan-ghost), 0 0 26px -8px var(--cyan-glow); } .authcard .hud-btn { margin-top: 22px; width: 100%; } .authalt { margin: 18px 0 0; font-size: 13.5px; color: var(--ink-2); text-align: center; } .authalt a { color: var(--cyan); text-decoration: none; } .authalt a:hover { text-decoration: underline; } .formerr { margin: 0 0 6px; padding: 10px 12px; font-size: 13px; border-radius: 3px; background: color-mix(in srgb, var(--bad) 10%, transparent); color: var(--bad); border: 1px solid color-mix(in srgb, var(--bad) 30%, transparent); } .note.authnote { text-align: center; margin-top: 18px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); } /* ========================================================================== DOC MODE (privacy/terms/billing) — readable panels over the ghost world ========================================================================== */ body[data-hud="doc"] .legal { max-width: 720px; margin: 0 auto; padding: 24px 18px 60px; color: #b9c6e4; font-size: 14.5px; line-height: 1.7; position: relative; background: color-mix(in srgb, var(--panel-hard) 86%, transparent); border: 1px solid var(--line); margin-top: 18px; margin-bottom: 40px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding-inline: clamp(18px, 4vw, 36px); } body[data-hud="doc"] .legal a { color: var(--cyan); } body[data-hud="doc"] .legal h1, body[data-hud="doc"] .legal h2 { color: var(--ink); letter-spacing: -.01em; } /* ========================================================================== APP OVERRIDES — the dashboard lives inside the world (visual only; every id/class app.js touches keeps its meaning) ========================================================================== */ body[data-hud="app"] { font-family: var(--sans); background: var(--void); } body[data-hud="app"] .ocean { display: none; } /* header -> command bar */ body[data-hud="app"] header { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--void) 80%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); box-shadow: none; padding: 11px 18px; padding-top: calc(11px + env(safe-area-inset-top)); } body[data-hud="app"] .logo { gap: 10px; font-weight: 600; } body[data-hud="app"] .logo .mark { width: 26px; height: 26px; border-radius: 50%; background: transparent; border: 1.5px solid var(--cyan); font-size: 0; box-shadow: 0 0 12px var(--cyan-glow), inset 0 0 5px var(--cyan-glow); animation: hud-pulse 3.2s ease-in-out infinite; } body[data-hud="app"] header h1 { font-size: 15.5px; letter-spacing: -.01em; } body[data-hud="app"] .chip { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; border-color: var(--line-2); border-radius: 3px; background: color-mix(in srgb, var(--void) 55%, transparent); color: var(--ink-3); } body[data-hud="app"] .chip b { color: var(--cyan); } body[data-hud="app"] .who .whoname { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--ink-2); } body[data-hud="app"] .logout { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); background: transparent; border: 1px solid var(--line-2); border-radius: 3px; padding: 6px 12px; cursor: pointer; } body[data-hud="app"] .logout:hover { color: var(--cyan); border-color: var(--cyan-dim); } body[data-hud="app"] main { max-width: 820px; padding: 20px 18px 40px; } /* every dash card becomes an instrument pod */ body[data-hud="app"] .dash, body[data-hud="app"] .stat, body[data-hud="app"] .win, body[data-hud="app"] .settings, body[data-hud="app"] .paste, body[data-hud="app"] .whatif { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; box-shadow: none; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } body[data-hud="app"] .dash.hero { border-color: var(--line-2); box-shadow: 0 0 70px -30px var(--cyan-glow); } /* mono voice for labels app-wide */ body[data-hud="app"] .eyebrow, body[data-hud="app"] .stat .k, body[data-hud="app"] .win-k, body[data-hud="app"] .logsub, body[data-hud="app"] .chartsub, body[data-hud="app"] .fchead, body[data-hud="app"] .mock-top, body[data-hud="app"] .loghead h2 + .logsub { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); } body[data-hud="app"] .stat .k { font-size: 9.5px; } body[data-hud="app"] h2 { letter-spacing: -.01em; } body[data-hud="app"] .leadnum { text-shadow: 0 0 40px var(--cyan-glow); } /* uploader -> CAPTURE BAY */ body[data-hud="app"] .uploader { background: color-mix(in srgb, var(--void) 68%, #000); border: 1px solid var(--line-2); border-radius: 4px; position: relative; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); } body[data-hud="app"] .uploader:hover, body[data-hud="app"] .uploader:active { border-color: var(--cyan-dim); background: color-mix(in srgb, var(--void) 62%, #000); box-shadow: 0 0 46px -14px var(--cyan-glow), inset 0 0 60px -40px var(--cyan-glow); } body[data-hud="app"] .uploader.hot { border-color: var(--cyan); box-shadow: 0 0 66px -10px var(--cyan-glow), inset 0 0 80px -40px var(--cyan-glow); } body[data-hud="app"] .uploader .ctahead { font-weight: 600; letter-spacing: -.01em; } body[data-hud="app"] .uploader .cap-ic { width: 46px; height: 46px; display: grid; place-items: center; color: var(--cyan); border: 1px solid var(--line-2); filter: drop-shadow(0 0 9px var(--cyan-glow)); margin-bottom: 4px; } body[data-hud="app"] .uploader .cap-ic svg { width: 24px; height: 24px; } body[data-hud="app"] .uploader.hot .cap-ic { animation: hud-pulse 1s ease-in-out infinite; } /* file rows -> telemetry feed */ body[data-hud="app"] .filerow { background: color-mix(in srgb, var(--void) 70%, #000); border: 1px solid var(--line); border-radius: 3px; font-family: var(--mono); } body[data-hud="app"] .filerow .fname { font-size: 12px; font-weight: 500; letter-spacing: .02em; } body[data-hud="app"] .filerow .fstatus { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; } body[data-hud="app"] .filerow .bar { border-radius: 0; height: 3px; } /* windows band + stats: tabular glow */ body[data-hud="app"] .win-v b, body[data-hud="app"] .stat .v { font-variant-numeric: tabular-nums; } body[data-hud="app"] .win.win-today { border-color: var(--cyan-dim); box-shadow: 0 0 40px -18px var(--cyan-glow); } /* tabs */ body[data-hud="app"] .tab { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; border-radius: 3px; } body[data-hud="app"] .tab.active { background: var(--cyan-ghost); color: var(--cyan); border-color: var(--cyan-dim); } /* heatmap -> thermal grid (state classes .hm.l0-4 preserved, colors re-tuned) */ body[data-hud="app"] .hm { border-radius: 1.5px; } body[data-hud="app"] .hm.l0 { background: #0c1622; } body[data-hud="app"] .hm.l1 { background: #123147; } body[data-hud="app"] .hm.l2 { background: #16506e; } body[data-hud="app"] .hm.l3 { background: #1e83ab; } body[data-hud="app"] .hm.l4 { background: #53d9ff; box-shadow: 0 0 6px var(--cyan-glow); } body[data-hud="app"] .hm.pr { outline: 1.5px solid var(--ember); } /* FAB */ body[data-hud="app"] .fab { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; background: var(--cyan); color: #032330; border-radius: 3px; border: 1px solid var(--cyan); box-shadow: 0 10px 34px -10px rgba(0, 0, 0, .8), 0 0 30px -6px var(--cyan-glow); } /* settings/details summaries */ body[data-hud="app"] details.settings summary, body[data-hud="app"] details.paste summary, body[data-hud="app"] details.whatif summary { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); } /* footer */ body[data-hud="app"] footer { border-top: 1px solid var(--line); margin-top: 30px; } body[data-hud="app"] footer small { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); } /* app corner chrome sits under the header (top offset larger) */ body[data-hud="app"] .chrome .tl, body[data-hud="app"] .chrome .tr { top: 84px; } /* ========================================================================== REDUCED MOTION — the world stands still, everything readable ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .hud-grain::after, .scene img.drift, .hud-dot, .hud-brand .sig, .hero-cue, .hud-marquee .row, .t-caret, .pod-head .spin, .ret .ring, body[data-hud="app"] .logo .mark, body[data-hud="app"] .uploader.hot .cap-ic { animation: none !important; } .hud-sweep { display: none; } .scene video { display: none; } .hud-js .boot, .hud-on .boot { opacity: 1; transform: none; filter: none; transition: none; } .hud-js .rv, .hud-js .rv.is-in { opacity: 1; transform: none; transition: none; } .hud-js .term-row .val { opacity: 1; transition: none; } .hud-js .bootlines span { visibility: visible; } .mask-line > span, .hud-on .mask-line > span { transform: none; transition: none; } .hud-on .ret .box { animation: none; opacity: 1; } .scanning .podscan { animation: none; opacity: 0; } .hud-btn, .pod, .brkt > i { transition: none; } }