/* ============================================================ D.A. G.O.A.T. — style.css Cinematic minimal system after sample.mp4: near-black stage, ultra-light display type, tiny letterspaced micro-labels, right-edge section nav, ink transition, spring cursor. ============================================================ */ :root { --bg: #060608; --ink: #07070a; --text: #f2f3f5; --dim: #a2a4ab; --faint: #84868d; --hairline: rgba(255, 255, 255, 0.16); --font: "Inter", "Helvetica Neue", "Segoe UI", Arial, sans-serif; --micro: 500 10px/1.5 var(--font); --pad: clamp(20px, 4vw, 56px); --ease-io: cubic-bezier(0.65, 0, 0.35, 1); /* interactions */ --ease-io-soft: cubic-bezier(0.45, 0, 0.2, 1); /* entrances */ } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } body { background: var(--bg); color: var(--text); font-family: var(--font); font-weight: 300; overflow: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } a:focus-visible, button:focus-visible { outline: 1px solid rgba(255, 255, 255, 0.65); outline-offset: 3px; } .view:focus { outline: none; } ::selection { background: rgba(255, 255, 255, 0.9); color: #0a0a0c; } /* ---------- the scene ---------- */ #scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; } .scene-fallback { position: fixed; inset: 0; z-index: 0; display: none; background: radial-gradient(120% 90% at 50% 0%, #3c4665 0%, transparent 55%), radial-gradient(60% 45% at 50% 42%, rgba(170, 185, 220, 0.28) 0%, transparent 60%), linear-gradient(#14161d 0%, #0b0c11 55%, #05050a 100%); } body.no-webgl #scene { display: none; } body.no-webgl .scene-fallback { display: block; } /* The scene is compiled on a worker (see scene-worker.js) and that can take many seconds on browsers without KHR_parallel_shader_compile. The gradient stands in meanwhile and cross-fades out on the first drawn frame, so the page is never held back and never opens onto an empty stage. */ body.scene-pending .scene-fallback { display: block; opacity: 1; transition: opacity 0.9s var(--ease-io-soft); } /* ---------- micro-label utility ---------- */ .topnav a, .brand-tag, .learn-btn, .edge-nav span, .credit-strip .cs-label, .scroll-hint span, .pre-status, .honesty { font: var(--micro); letter-spacing: 0.14em; text-transform: uppercase; } /* ---------- preloader ---------- NOTE: the structural half of this block is duplicated in the inline