/* ============================================================ HOUSE LIGHTS — Design Tokens Concept: the page is a black box theatre. Each section is a LIGHTING CUE. The accent hue is a variable the whole system reads from, so scrolling re-lights the entire interface. ============================================================ */ :root { /* ---- Substrate ------------------------------------------------ */ --void: #050507; --ink: #0A0A0E; --ink-2: #101016; --ink-3: #17171F; --scrim: #1E1E28; --edge: rgba(255, 255, 255, 0.09); --edge-strong: rgba(255, 255, 255, 0.18); /* ---- Light ---------------------------------------------------- */ --bone: #F2EDE4; --bone-dim: #B9B3A8; --bone-faint: #7A756D; /* ---- Lighting cue (mutated per-section by JS + CSS) ----------- */ /* Default cue: EMBER — tungsten, warm, the house lights */ --cue-h: 22; --cue-s: 96%; --cue-l: 56%; --cue: hsl(var(--cue-h) var(--cue-s) var(--cue-l)); --cue-bright: hsl(var(--cue-h) calc(var(--cue-s) - 6%) 72%); --cue-deep: hsl(var(--cue-h) var(--cue-s) 34%); --cue-wash: hsl(var(--cue-h) 60% 50% / 0.14); --cue-haze: hsl(var(--cue-h) 80% 55% / 0.30); --cue-glow: hsl(var(--cue-h) 100% 60% / 0.55); /* Fixed secondary — the cold backlight that never changes. Every good lighting plot has a key and a contrasting rim. */ --rim: #63E6F0; --rim-deep: #0C4A55; --rim-wash: rgba(99, 230, 240, 0.12); /* ---- Named cues (applied via [data-cue] on sections) ---------- */ --cue-ember-h: 22; --cue-ember-s: 96%; --cue-ember-l: 56%; --cue-xenon-h: 187; --cue-xenon-s: 84%; --cue-xenon-l: 58%; --cue-uv-h: 264; --cue-uv-s: 90%; --cue-uv-l: 66%; --cue-acid-h: 72; --cue-acid-s: 86%; --cue-acid-l: 56%; --cue-rose-h: 338; --cue-rose-s: 88%; --cue-rose-l: 62%; --cue-gold-h: 42; --cue-gold-s: 92%; --cue-gold-l: 58%; /* ---- Type ----------------------------------------------------- */ --f-display: "Archivo", "Archivo Expanded", "Helvetica Neue", Helvetica, Arial, sans-serif; --f-serif: "Instrument Serif", "Times New Roman", Times, serif; --f-body: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Fluid scale — clamp(min, preferred, max) @ 360→1600px */ --t-hero: clamp(3.25rem, 1.2rem + 9.2vw, 11rem); --t-h1: clamp(2.6rem, 1.4rem + 5.4vw, 6.5rem); --t-h2: clamp(2rem, 1.2rem + 3.4vw, 4rem); --t-h3: clamp(1.375rem,1.05rem + 1.4vw, 2.125rem); --t-h4: clamp(1.125rem,1rem + 0.6vw, 1.5rem); --t-lead: clamp(1.0625rem, 0.98rem + 0.5vw, 1.375rem); --t-body: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); --t-small: 0.8125rem; --t-micro: 0.6875rem; --lh-tight: 0.9; --lh-snug: 1.08; --lh-body: 1.62; /* Tracking */ --tk-label: 0.22em; --tk-tight: -0.035em; /* ---- Space (8pt base, fluid gutters) -------------------------- */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem; --s-11: 12rem; --gutter: clamp(1.25rem, 4vw, 4.5rem); --band: clamp(4.5rem, 9vw, 11rem); /* vertical section rhythm */ --measure: 68ch; --maxw: 1560px; --maxw-text: 940px; /* ---- Motion --------------------------------------------------- */ --e-out: cubic-bezier(0.16, 1, 0.3, 1); /* expo out — the house style */ --e-inout: cubic-bezier(0.65, 0, 0.35, 1); --e-snap: cubic-bezier(0.34, 1.56, 0.64, 1); /* slight overshoot */ --d-fast: 180ms; --d-base: 420ms; --d-slow: 900ms; --d-cue: 1200ms; /* lighting cross-fades are slow, like real dimmers */ /* ---- Depth ---------------------------------------------------- */ --z-grain: 9000; --z-nav: 800; --z-modal: 9500; --shadow-lift: 0 2px 8px rgba(0,0,0,.4), 0 18px 50px -12px rgba(0,0,0,.7); --shadow-pop: 0 4px 12px rgba(0,0,0,.5), 0 32px 80px -16px rgba(0,0,0,.85); --radius: 2px; /* near-square — theatrical flats, not app cards */ --radius-lg: 3px; /* ---- Film grain ----------------------------------------------- */ /* Inline SVG turbulence rather than a bitmap: no extra request, scales to any DPR, and stays crisp. Governed by img-src in the CSP, which allows data:. */ --grain-src: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"); color-scheme: dark; } /* ---- Section lighting cues ------------------------------------- */ [data-cue="ember"] { --cue-h: var(--cue-ember-h); --cue-s: var(--cue-ember-s); --cue-l: var(--cue-ember-l); } [data-cue="xenon"] { --cue-h: var(--cue-xenon-h); --cue-s: var(--cue-xenon-s); --cue-l: var(--cue-xenon-l); } [data-cue="uv"] { --cue-h: var(--cue-uv-h); --cue-s: var(--cue-uv-s); --cue-l: var(--cue-uv-l); } [data-cue="acid"] { --cue-h: var(--cue-acid-h); --cue-s: var(--cue-acid-s); --cue-l: var(--cue-acid-l); } [data-cue="rose"] { --cue-h: var(--cue-rose-h); --cue-s: var(--cue-rose-s); --cue-l: var(--cue-rose-l); } [data-cue="gold"] { --cue-h: var(--cue-gold-h); --cue-s: var(--cue-gold-s); --cue-l: var(--cue-gold-l); } /* The dimmer fade. Transitioning a raw hue number is what lets the whole page re-light in one move instead of 40 separate transitions. */ :root, [data-cue] { transition: --cue-h var(--d-cue) var(--e-inout), --cue-s var(--d-cue) var(--e-inout), --cue-l var(--d-cue) var(--e-inout); } /* Register the hue as a real number so it interpolates rather than snapping. Without @property, custom props animate discretely. */ @property --cue-h { syntax: ""; inherits: true; initial-value: 22; } @property --cue-s { syntax: ""; inherits: true; initial-value: 96%; } @property --cue-l { syntax: ""; inherits: true; initial-value: 56%; } @media (prefers-reduced-motion: reduce) { :root, [data-cue] { transition-duration: 1ms; } }