/* ============================================================ DENSA — Design Tokens Dark, cinematic, editorial. Monochrome only — no saturated hues. Type: Oswald (condensed display) + Hanken Grotesk (editorial body). Fonts loaded via Google Fonts in the page . ============================================================ */ :root { /* ---- Color: a single graphite-to-bone ramp ---------------- */ --bg: #0A0A0A; /* deep black — the page floor */ --bg-raise: #101010; /* barely-lifted black for image wells */ --bg-raise-2: #161615; /* faint panel / hover floor */ --ink: #F2F0EB; /* broken white — primary text */ --ink-2: #B7B5AE; /* secondary / long-form body */ --ink-3: #6E6D67; /* tertiary — captions, meta values */ --ink-4: #3E3E3B; /* faint — eyebrows, disabled, hints */ --line: rgba(242,240,235,0.11); /* hairline rule */ --line-strong: rgba(242,240,235,0.22); /* hover hairline */ --veil: rgba(10,10,10,0.62); /* image legibility veil */ /* ---- Signal palette (the DENSA look) ----------------------- */ /* Two glowing CRT signals on black: coral red + phosphor green. */ --red: #F2473B; /* logo + technical sheet (as imagery) */ --red-bright: #FF6A5E; --green: #57E0A0; /* live body copy — logline / synopsis */ --green-bright: #74F2B8; /* captions, footer marks */ --green-dim: #3FA378; --glow-green: 0 0 22px rgba(87,224,160,0.30); --glow-green-sm: 0 0 12px rgba(87,224,160,0.22); --glow-red: 0 0 26px rgba(242,71,59,0.45); /* ---- Type families ---------------------------------------- */ /* The look is Helvetica — use the system grotesque, Arial fallback. */ --font-helv: "Helvetica Neue", Helvetica, Arial, sans-serif; --font-mono: "Courier New", ui-monospace, "SFMono-Regular", monospace; --font-display: "Oswald", "Helvetica Neue Condensed", "Arial Narrow", sans-serif; --font-body: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif; /* ---- Type scale (fluid) ----------------------------------- */ --t-hero: clamp(5rem, 19vw, 22rem); /* DENSA wordmark */ --t-display: clamp(2rem, 4.4vw, 4rem); /* section headings */ --t-lead: clamp(1.4rem, 2.6vw, 2.3rem); /* logline */ --t-body: clamp(1.05rem, 1.25vw, 1.25rem); --t-body-sm: clamp(0.98rem, 1.05vw, 1.08rem); --t-meta: 0.82rem; /* tech-sheet values */ --t-eyebrow: 0.72rem; /* uppercase labels */ /* ---- Tracking --------------------------------------------- */ --track-hero: 0.02em; --track-eyebrow: 0.42em; --track-label: 0.26em; /* ---- Rhythm ----------------------------------------------- */ --section-y: clamp(6rem, 15vh, 14rem); /* vertical breathing */ --gutter: clamp(1.5rem, 5vw, 6rem); /* page side margin */ --read: 38rem; /* comfy reading column */ --read-wide: 46rem; /* ---- Motion ----------------------------------------------- */ --ease: cubic-bezier(0.16, 1, 0.3, 1); --slow: 1.1s; } /* ============================================================ Semantic primitives — apply these classes / element styles ============================================================ */ .t-eyebrow { font-family: var(--font-display); font-weight: 500; font-size: var(--t-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--ink-4); } .t-label { font-family: var(--font-display); font-weight: 400; font-size: var(--t-eyebrow); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3); } .t-display { font-family: var(--font-display); font-weight: 300; font-size: var(--t-display); letter-spacing: 0.01em; text-transform: uppercase; line-height: 0.98; color: var(--ink); } .t-lead { font-family: var(--font-display); font-weight: 300; font-size: var(--t-lead); line-height: 1.28; letter-spacing: 0.005em; color: var(--ink); } .t-body { font-family: var(--font-body); font-weight: 360; font-size: var(--t-body); line-height: 1.72; color: var(--ink-2); } .t-meta { font-family: var(--font-body); font-weight: 420; font-size: var(--t-meta); color: var(--ink); }