/* ========================================================= theme.css — base variables, typography, body, overlays ========================================================= */ :root { /* Backgrounds */ --bg-base: #0a0a0b; --bg-elev-1: #111114; --bg-elev-2: #16161a; --bg-panel: #1a1a1f; /* Borders */ --border-faint: rgba(255, 255, 255, 0.04); --border-subtle: rgba(255, 255, 255, 0.08); --border: rgba(255, 255, 255, 0.12); --border-strong: rgba(255, 255, 255, 0.22); /* Text */ --text-primary: #e8e8ea; --text-secondary: #9a9aa0; --text-tertiary: #5a5a60; --text-quaternary: #38383d; /* Accents — classic colorist warm/cool */ --accent: #d4a574; /* warm amber */ --accent-soft: rgba(212, 165, 116, 0.18); --accent-cool: #5fa8a3; --accent-red: #d05c5c; --accent-green: #5fa86d; --accent-blue: #5c9ad0; /* Typography */ --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', 'Cascadia Mono', Consolas, monospace; /* Tracking */ --tracking-wide: 0.12em; --tracking-mono: 0.04em; /* Motion */ --t-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --t: 260ms cubic-bezier(0.4, 0, 0.2, 1); --t-slow: 480ms cubic-bezier(0.4, 0, 0.2, 1); --t-puck: 520ms cubic-bezier(0.34, 1.16, 0.64, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } *::selection { background: var(--accent); color: var(--bg-base); } html, body { height: 100%; background: var(--bg-base); color: var(--text-primary); font-family: var(--font-ui); font-weight: 400; font-size: 14px; line-height: 1.5; overflow: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { display: flex; flex-direction: column; position: relative; min-height: 100vh; background: radial-gradient(ellipse 1400px 900px at 50% 50%, #181820 0%, #0b0b0e 55%, #050507 100%); } button { background: none; border: none; color: inherit; font: inherit; cursor: pointer; outline: none; } button:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; border-radius: 2px; } a { color: inherit; text-decoration: none; } /* ---------- Film grain overlay ---------- */ .grain-overlay { position: fixed; inset: 0; pointer-events: none; opacity: 0.05; z-index: 1000; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------- Vignette ---------- */ .vignette-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 999; background: radial-gradient(ellipse 100% 100% at 50% 50%, transparent 55%, rgba(0,0,0,0.5) 100%); } /* ---------- Background layer driven by tone curve --------- Pages that want the bg to respond to the bezier curve add the class `bg-graded` on . The bg has two layers: 1. .bg-grade-layer → a fullscreen image with an SVG filter that applies the curve's LUT in real time 2. .bg-grade-overlay → a dark translucent layer ON TOP of the image so the UI text stays readable The SVG filter `#tone-lut-filter` lives in the HTML defs section. */ body.bg-graded { background: transparent !important; } .bg-grade-layer { position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(ellipse 130% 95% at 50% 45%, #2a2a35 0%, #1a1a23 28%, #0c0c11 62%, #030305 100%), linear-gradient(180deg, rgba(70, 80, 110, 0.04) 0%, transparent 50%, rgba(120, 90, 60, 0.04) 100%); background-blend-mode: normal, screen; /* SVG LUT filter still applied for consistency with the histogram — the visual effect on a near-uniform gradient is subtle but real. */ filter: url(#tone-lut-filter); will-change: filter; } /* ---------- Hover tint layer ---------- A single radial spot of color (base hue 0 / red) that gets hue-rotated to the target mode's hue and faded in/out via opacity. mix-blend-mode: screen lightens the dark gradient with the tint instead of overpainting. Driven by JS via two CSS variables: --menu-hue : in degrees (rotation from the red base) --menu-tint-alpha : 0 → 1 (0 = no tint, 1 = full tint visible) */ .bg-grade-tint { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 60% 50% at 50% 38%, hsla(0, 70%, 50%, 0.45) 0%, hsla(0, 60%, 45%, 0.18) 45%, transparent 75%); filter: hue-rotate(var(--menu-hue, 0deg)); opacity: var(--menu-tint-alpha, 0); mix-blend-mode: screen; transition: opacity 360ms ease, filter 600ms cubic-bezier(0.4, 0, 0.2, 1); } .svg-filter-defs { position: absolute; width: 0; height: 0; pointer-events: none; visibility: hidden; } /* ---------- Status dots ---------- */ .status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--text-tertiary); } .status-dot--ok { background: var(--accent-green); box-shadow: 0 0 8px rgba(95, 168, 109, 0.6); } .status-dot--warn { background: var(--accent); } .status-dot--err { background: var(--accent-red); } /* ---------- Utility classes ---------- */ .mono { font-family: var(--font-mono); } .uppercase { text-transform: uppercase; letter-spacing: var(--tracking-wide); } .dim { color: var(--text-tertiary); } .dimmer { color: var(--text-quaternary); } /* Visually hidden but exposed to screen readers + crawlers (used for SEO h1s and skip links on pages where the visible layout doesn't already include a semantic heading). */ .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* ---------- Mobile gate ( < 800px viewport ) ---------- Below 800px we hide everything else and show the gate card. Above 800px the .mobile-gate element is in DOM but display: none. */ .mobile-gate { display: none; } @media (max-width: 799px) { body { overflow: hidden !important; background: #050507 !important; } /* Hide every direct child of except the gate */ body > *:not(.mobile-gate) { display: none !important; } .mobile-gate { display: flex !important; position: fixed; inset: 0; z-index: 100000; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(ellipse 110% 75% at 50% 35%, #1a1a22 0%, #0a0a0d 55%, #050507 100%); } .mobile-gate-card { width: 100%; max-width: 360px; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; padding: 30px 26px 24px; background: rgba(20, 20, 26, 0.55); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 4px; backdrop-filter: blur(8px); box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.7); } .mobile-gate-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--accent); font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em; } .mobile-gate-name { color: var(--text-primary); } .mobile-gate-dot { color: var(--accent); } .mobile-gate-eyebrow { font-family: var(--font-mono); font-size: 10px; color: var(--accent); text-transform: uppercase; letter-spacing: var(--tracking-wide); margin-top: 4px; } .mobile-gate-title { font-family: var(--font-ui); font-size: 26px; font-weight: 500; letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.1; margin: -4px 0 0; } .mobile-gate-body { font-family: var(--font-ui); font-size: 14px; line-height: 1.6; color: var(--text-secondary); margin: 0; } .mobile-gate-body strong { color: var(--text-primary); font-weight: 500; } .mobile-gate-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: var(--tracking-wide); padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.06); width: 100%; margin-top: 4px; } .mobile-gate-w { color: var(--accent); } .mobile-gate-sep { color: var(--text-quaternary); } } /* ---------- Audio widget — inline in header by default ---------- */ .audio-widget { display: inline-flex; align-items: center; gap: 0; padding: 5px; background: rgba(20, 20, 26, 0.88); border: 1px solid var(--border); border-radius: 999px; transition: gap 200ms ease, padding 200ms ease, border-color 150ms; } .audio-widget:hover { gap: 12px; padding: 5px 18px 5px 5px; border-color: var(--accent); } /* Floating variant — used when no header mount point is found. Stays at fixed top-right of the viewport. */ .audio-widget--floating { position: fixed; top: 12px; right: 14px; z-index: 1001; backdrop-filter: blur(8px); } .audio-toggle { width: 40px; height: 40px; border-radius: 50%; background: transparent; border: none; color: var(--text-secondary); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: color 150ms; } .audio-toggle svg { width: 18px; height: 18px; } .audio-toggle:hover { color: var(--accent); } .audio-toggle .audio-icon-on, .audio-toggle .audio-icon-off { display: none; } .audio-toggle .audio-icon-on { display: block; } .audio-toggle.is-muted .audio-icon-on { display: none; } .audio-toggle.is-muted .audio-icon-off { display: block; } .audio-toggle.is-muted { color: var(--text-tertiary); } .audio-volume { -webkit-appearance: none; appearance: none; width: 0; height: 3px; background: var(--border); outline: none; transition: width 200ms ease, opacity 200ms ease; opacity: 0; pointer-events: none; border-radius: 2px; } .audio-widget:hover .audio-volume { width: 110px; opacity: 1; pointer-events: auto; } .audio-volume::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; background: var(--accent); border-radius: 50%; cursor: pointer; border: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4); } .audio-volume::-moz-range-thumb { width: 14px; height: 14px; background: var(--accent); border-radius: 50%; cursor: pointer; border: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4); } .audio-widget.is-broken { opacity: 0.4; } .audio-widget.is-broken .audio-toggle::after { content: "no audio file"; font-family: var(--font-mono); font-size: 9px; color: var(--text-tertiary); margin-left: 6px; }