/* Deeper Truth — design tokens ------------------------------------------- * * Aesthetic: Broadsheet Noir. * - Newsroom-grade editorial density * - Near-black canvas with warm undertone (not flat black) * - Muted blood red as the only chromatic accent * - Paper-white ink that warms slightly on large serifs * - Grain texture on dark surfaces (SVG noise, low opacity) * - Modular 8px grid + generous vertical rhythm * - Type scale tuned for display serifs at genuinely theatrical sizes * ---------------------------------------------------------------------- */ :root { /* ---------- canvas + ink ---------- */ /* Slight warm-cool gradient across the value scale. Not pure black — that reads cheap on screen. The #0a0b0e base has a whisper of blue which makes the red accent feel hotter. */ --dt-bg: #0a0b0e; --dt-bg-canvas: #0b0c10; --dt-bg-elev: #12141a; /* card surfaces */ --dt-bg-rise: #1b1e26; /* hover / pressed / accent surfaces */ --dt-bg-inverse: #f4eee2; /* cream — used for manifesto inversion */ --dt-ink: #ede8dc; /* warm off-white, not pure #fff */ --dt-ink-strong: #faf6ec; --dt-ink-muted: #9a958b; --dt-ink-faint: #5a574f; --dt-ink-inverse: #0b0c10; /* Rule lines */ --dt-rule: rgba(237, 232, 220, 0.10); /* hairline */ --dt-rule-strong: rgba(237, 232, 220, 0.28); /* visible divider */ --dt-rule-bold: rgba(237, 232, 220, 0.55); /* byline rule */ /* ---------- accents ---------- */ --dt-red: #b8172c; /* muted blood red, the ONE chromatic accent */ --dt-red-hot: #dc1d36; --dt-red-deep: #7a0f1e; --dt-red-dust: rgba(184, 23, 44, 0.08); /* wash */ --dt-amber: #c89a3c; /* secondary accent, editorial gold */ --dt-amber-dim: #9d7a2f; /* ---------- aliases ---------- */ --dt-accent: var(--dt-red); --dt-accent-hot: var(--dt-red-hot); --dt-accent-hover: var(--dt-red-hot); --dt-accent-2: var(--dt-amber); /* ---------- type stack ---------- * Fraunces = variable serif with optical size (9-144) and SOFT axis (0-100). * Use opsz=144 for display, opsz=36 for cards, opsz=14 for meta. * SOFT axis 0 = sharper terminals (serious); 50 = friendlier. * Newsreader = Google variable serif, bookish, for dek and long-form. * Archivo = neo-grotesque sans, distinctly editorial (not Inter). * * Deliberate rejection of Inter and Space Grotesk. */ --dt-display: "Fraunces", "Times New Roman", Georgia, serif; --dt-serif: "Newsreader", "Source Serif 4", Georgia, serif; --dt-sans: "Archivo", "Helvetica Neue", Arial, sans-serif; --dt-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace; /* Legacy aliases so older components.css / byline still compile */ --dt-serif-display: var(--dt-display); --dt-serif-text: var(--dt-serif); /* ---------- type scale ---------- * Newsroom scale, not broadsheet-poster. Trust cues come from restraint. * Anchored to real-world investigative sites: * Intercept hero ~56px, ProPublica hero ~48px, NYT hero ~52px. * Fluid via clamp(). Minimum | preferred | maximum. */ --dt-fs-xs: 0.75rem; /* 12 */ --dt-fs-sm: 0.8125rem; /* 13 */ --dt-fs-base: 1rem; /* 16 */ --dt-fs-lg: 1.0625rem; /* 17 */ --dt-fs-xl: 1.1875rem; /* 19 */ --dt-fs-2xl: clamp(1.25rem, 0.5vw + 1.1rem, 1.375rem); /* 20-22 */ --dt-fs-h3: clamp(1.25rem, 0.7vw + 1.05rem, 1.5rem); /* 20-24 */ --dt-fs-h2: clamp(1.5rem, 1.0vw + 1.2rem, 2rem); /* 24-32 */ --dt-fs-h1: clamp(1.75rem, 1.4vw + 1.4rem, 2.5rem); /* 28-40 */ --dt-fs-hero: clamp(2rem, 2.2vw + 1.3rem, 3.25rem); /* 32-52 */ --dt-fs-colossal: clamp(2.5rem, 3vw + 1.6rem, 4rem); /* 40-64 — manifesto only */ /* ---------- rhythm ---------- */ --dt-tracking-tight: -0.025em; --dt-tracking-snug: -0.015em; --dt-tracking-normal: 0; --dt-tracking-wide: 0.08em; --dt-tracking-wider: 0.16em; /* ---------- spacing (8px grid) ---------- */ --dt-space-1: 0.25rem; --dt-space-2: 0.5rem; --dt-space-3: 0.75rem; --dt-space-4: 1rem; --dt-space-5: 1.5rem; --dt-space-6: 2rem; --dt-space-7: 3rem; --dt-space-8: 4rem; --dt-space-9: 6rem; --dt-space-10: 8rem; --dt-space-11: 12rem; /* ---------- structure ---------- */ --dt-container: 1280px; --dt-container-narrow: 720px; --dt-container-wide: 1440px; --dt-border: 1px solid var(--dt-rule); --dt-border-strong: 1px solid var(--dt-rule-strong); --dt-border-bold: 2px solid var(--dt-rule-bold); --dt-radius-sm: 2px; --dt-radius: 3px; --dt-radius-lg: 6px; /* ---------- motion ---------- */ --dt-dur-fast: 140ms; --dt-dur: 220ms; --dt-dur-slow: 420ms; --dt-ease: cubic-bezier(0.22, 1, 0.36, 1); /* ---------- shadow ---------- * Newsprint-drop shadow with red undertone. */ --dt-shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 20px 40px -18px rgba(0, 0, 0, 0.65), 0 2px 6px -1px rgba(184, 23, 44, 0.04); --dt-shadow-hero: 0 40px 80px -30px rgba(0, 0, 0, 0.85), 0 4px 10px -2px rgba(184, 23, 44, 0.08); /* ---------- grain texture ---------- * SVG fractal noise at ~4% opacity on a fixed layer. Gives newsprint * character without a repeating tile pattern. */ --dt-noise: url("data:image/svg+xml;utf8,"); } /* Grain texture applied globally, fixed layer, behind content. */ html::before { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; background-image: var(--dt-noise); opacity: 0.035; mix-blend-mode: overlay; } /* Base reset ----------------------------------------------------------- */ html { background: var(--dt-bg); color: var(--dt-ink); font-family: var(--dt-sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { background: var(--dt-bg); color: var(--dt-ink); margin: 0; font-family: var(--dt-sans); } ::selection { background: var(--dt-accent); color: var(--dt-ink-strong); } /* Reduced motion — kill animations but keep structural styles intact. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }