/* ════════════════════════════════════════════════════════════════ RandWOD Website — style.css Design language: "Telemetry" (dark · technical · data-first) See STYLE_GUIDE.md for the full design system reference. CONTENTS 01 · Tokens 02 · Base & ambient HUD (cursor glow) 03 · Nav 04 · Chapter rail 05 · Panels (stacked pages) & grid FX layer 06 · P1 — Slot machine hero 07 · retired (was P4 — Consistency heatmap; see the tombstone) 08 · P5 — App cards (parked) + footer 09 · Responsive 10 · Reduced motion ════════════════════════════════════════════════════════════════ */ /* ── 01 · TOKENS ─────────────────────────────────────────────── */ :root { --bg: #0D0D0D; --bg2: #131313; --text: #F2F0EB; --text-60: rgba(242, 240, 235, 0.6); --text-40: rgba(242, 240, 235, 0.4); --text-25: rgba(242, 240, 235, 0.25); --line: rgba(242, 240, 235, 0.09); --line-strong: rgba(242, 240, 235, 0.16); --orange: #FF4A09; /* brand primary (same as iOS appOrange) */ --blue: #00B1FC; /* brand secondary (same as iOS blueLight) */ --green: #2BD576; /* live/positive only */ --body: 'Space Grotesk', -apple-system, sans-serif; --mono: 'JetBrains Mono', monospace; /* two-scale blueprint grid: fine 72px lines + major lines every 4 cells */ --grid: linear-gradient(rgba(242,240,235,0.022) 1px, transparent 1px) 0 0 / 100% 72px, linear-gradient(90deg, rgba(242,240,235,0.022) 1px, transparent 1px) 0 0 / 72px 100%, linear-gradient(rgba(242,240,235,0.055) 1px, transparent 1px) 0 0 / 100% 288px, linear-gradient(90deg, rgba(242,240,235,0.055) 1px, transparent 1px) 0 0 / 288px 100%; /* slot machine reel cell */ --ch: clamp(115px, 18vw, 216px); --cw: calc(var(--ch) * 0.8); } /* ── 02 · BASE & AMBIENT HUD ─────────────────────────────────── */ * { margin: 0; padding: 0; box-sizing: border-box; } ::selection { background: var(--orange); color: #fff; } body { background: var(--bg); color: var(--text); font-family: var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; } #cursor-glow { position: fixed; width: 600px; height: 600px; border-radius: 50%; pointer-events: none; z-index: 50; background: radial-gradient(circle, rgba(255,74,9,0.06), transparent 65%); transform: translate(-50%, -50%); opacity: 0; } @keyframes pulse { 50% { opacity: .3; } } /* ── 03 · NAV ────────────────────────────────────────────────── */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; padding: 0 28px; height: 58px; border-bottom: 1px solid var(--line); background: rgba(13,13,13,0.75); backdrop-filter: blur(16px); } /* no flex gap: "Rand" + the WOD span must stay one word — space the mark only */ .logo { font-weight: 700; font-size: 16px; letter-spacing: -0.02em; display: flex; align-items: center; } .logo .logo-mark { width: 22px; height: 22px; display: block; margin-right: 8px; } .logo span { color: var(--orange); } .nav-right { margin-left: auto; display: flex; align-items: center; gap: 18px; } .sys-status { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--green); display: flex; align-items: center; gap: 7px; } .sys-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); animation: pulse 2s infinite; } .nav-cta { background: var(--text); color: var(--bg); text-decoration: none; font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 6px; } .nav-signin { color: var(--text-60); text-decoration: none; font-size: 13px; font-weight: 500; transition: color .2s; } .nav-signin:hover { color: var(--text); } /* ── 04 · CHAPTER RAIL (straight line + progress + ticks) ────── */ .rail { position: fixed; right: 34px; top: 50%; transform: translateY(-50%); z-index: 100; height: 46vh; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; } .rail::before { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 1px; background: var(--line-strong); } .rail-fill { position: absolute; right: 0; top: 0; width: 1px; height: 0; background: linear-gradient(var(--blue), var(--orange)); box-shadow: 0 0 8px rgba(255,74,9,0.5); } .rail a { display: flex; align-items: center; gap: 12px; text-decoration: none; padding-right: 12px; position: relative; } .rail a::after { content: ''; position: absolute; right: -4px; width: 9px; height: 1px; background: var(--text-40); transition: all .3s; } .rail .lab { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; color: var(--text-25); opacity: 0; transform: translateX(6px); transition: all .3s; } .rail a.on::after { width: 18px; background: var(--orange); box-shadow: 0 0 10px rgba(255,74,9,0.7); } .rail a.on .lab, .rail a:hover .lab { opacity: 1; transform: none; color: var(--text-40); } .rail a.on .lab { color: var(--orange); } /* ── 05 · PANELS (stacked pages) & GRID FX ───────────────────── */ .panel { min-height: 100vh; position: relative; overflow: hidden; /* --grid carries position+size per layer (`0 0 / 100% 72px`), which is `background` shorthand syntax — feeding it to `background-image` is invalid at computed-value time and silently resolves to `none`. Shorthand only. */ background: var(--grid) var(--bg); border-top: 1px solid var(--line-strong); display: flex; flex-direction: column; justify-content: flex-start; padding: 84px 6vw 64px; } .panel-inner { max-width: 1240px; width: 100%; margin: 0 auto; position: relative; z-index: 2; } .chap { font-family: var(--mono); font-size: 12px; color: var(--orange); letter-spacing: 0.18em; margin-bottom: 12px; } .chap::before { content: '// '; color: var(--text-25); } .chap .idx { color: var(--text-25); margin-right: 14px; } h2 { font-size: clamp(28px, 3.5vw, 44px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.04; } h2 .dim { color: var(--text-25); } .sub { margin-top: 16px; font-size: 16.5px; color: var(--text-60); line-height: 1.65; max-width: 560px; } .panel-foot { position: absolute; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-between; padding: 14px 6vw; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; color: var(--text-25); border-top: 1px dashed var(--line); } /* grid FX layer: static accent blocks, + marks, scattered formulas */ .grid-fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .gcell { position: absolute; width: 71px; height: 71px; opacity: 0; } .gcell.fill-o { background: rgba(255,74,9,0.05); } .gcell.fill-b { background: rgba(0,177,252,0.045); } .gcell.outline { border: 1px solid var(--line); background: transparent; } .gcell.wide { width: 143px; } .gcell.tall { height: 143px; } .gplus { position: absolute; font-family: var(--mono); font-size: 13px; color: rgba(242,240,235,0.10); transform: translate(-50%,-50%); } .formula { position: absolute; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: rgba(242,240,235,0.13); white-space: nowrap; pointer-events: none; } .formula em { color: rgba(255,74,9,0.35); font-style: normal; } .formula.vert { writing-mode: vertical-rl; } /* card header: mono uppercase label + blue em annotation on the right. Shared by the DATA panel's card and #p5's parked cards block. */ .cell-h { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-40); display: flex; justify-content: space-between; margin-bottom: 18px; } .cell-h em { color: var(--blue); font-style: normal; } /* shared buttons */ .hero-actions { margin-top: 32px; display: flex; gap: 12px; justify-content: center; opacity: 0; } .btn-o { background: var(--orange); color: #fff; text-decoration: none; font-weight: 600; font-size: 14.5px; padding: 13px 24px; border-radius: 8px; transition: box-shadow .25s; } .btn-o:hover { box-shadow: 0 0 36px rgba(255,74,9,0.45); } /* background/cursor cover the