/* ========================================================================= VentureView — Design Tokens Etappe 0, "Newspaper x Apple" runbook. This is the single source of truth for colour, type and spacing on ventureview.de. Every later Etappe (article template, dark mode, funding tracker, masthead) reads from these variables and defines no raw hex, no raw px font-size and no raw px margin of its own. Nothing in this file changes how the site currently looks. It only DEFINES the vocabulary — Etappe 0 must be visually a no-op. The single applied rule at the bottom is the CLS-safe media default, which is strictly an improvement and touches no layout the theme sets explicitly. ========================================================================= */ :root { /* --------------------------------------------------------------------- 1. Brand palette --------------------------------------------------------------------- */ --vv-navy: #1B2A4A; /* primary — masthead, headlines, footer */ --vv-amber: #F5A623; /* accent — pull-quotes, category flags */ --vv-blue: #0066FF; /* accent — links, interactive states */ --vv-paper: #F8F8F6; /* off-white page background */ /* Tints & shades, derived. Keep derivations here, not in components. */ --vv-navy-900: #0E1729; --vv-navy-700: #16223C; --vv-navy-500: #1B2A4A; --vv-navy-300: #4A5A7A; --vv-navy-100: #C8CFDC; --vv-amber-600: #C77F0F; --vv-amber-500: #F5A623; --vv-amber-100: #FDECCF; --vv-blue-600: #0047B3; --vv-blue-500: #0066FF; --vv-blue-100: #D6E5FF; --vv-ink: #14181F; /* body text on light */ --vv-ink-muted: #5A6472; /* bylines, captions, timestamps */ --vv-rule: #E3E4E0; /* hairlines, dividers, table borders */ --vv-surface: #FFFFFF; /* cards, article body background */ /* Semantic aliases — components use THESE, never the raw brand names. Dark mode (Etappe 1) reassigns only this block. */ --vv-c-bg: var(--vv-paper); --vv-c-surface: var(--vv-surface); --vv-c-text: var(--vv-ink); --vv-c-text-muted: var(--vv-ink-muted); --vv-c-heading: var(--vv-navy); --vv-c-link: var(--vv-blue-500); --vv-c-link-hover: var(--vv-blue-600); --vv-c-accent: var(--vv-amber-500); --vv-c-rule: var(--vv-rule); --vv-c-masthead-bg: var(--vv-navy); --vv-c-masthead-text: #FFFFFF; /* Focus ring — accessibility, never remove without a replacement. */ --vv-focus-ring: 0 0 0 3px var(--vv-blue-100), 0 0 0 5px var(--vv-blue-500); /* --------------------------------------------------------------------- 2. Typography — modular scale, ratio 1.25 (major third) Base 17px mobile, fluid to 18px desktop. Steps are clamp()ed so the scale compresses on small screens instead of overflowing. --------------------------------------------------------------------- */ --vv-font-display: "Playfair Display", Georgia, "Times New Roman", serif; --vv-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --vv-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; --vv-step--2: clamp(0.694rem, 0.68rem + 0.07vw, 0.72rem); /* 11–11.5px caption/meta */ --vv-step--1: clamp(0.833rem, 0.81rem + 0.11vw, 0.889rem); /* 13–14px small/UI */ --vv-step-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); /* 16–17px body */ --vv-step-1: clamp(1.25rem, 1.20rem + 0.25vw, 1.333rem); /* 20–21px lede/H5 */ --vv-step-2: clamp(1.563rem, 1.48rem + 0.40vw, 1.777rem); /* 25–28px H4/H3 */ --vv-step-3: clamp(1.953rem, 1.82rem + 0.66vw, 2.369rem); /* 31–38px H2 */ --vv-step-4: clamp(2.441rem, 2.21rem + 1.15vw, 3.157rem); /* 39–50px H1 / headline */ --vv-step-5: clamp(3.052rem, 2.66rem + 1.95vw, 4.209rem); /* 49–67px hero headline */ --vv-lh-tight: 1.12; /* display headlines */ --vv-lh-snug: 1.28; /* subheads, decks */ --vv-lh-normal: 1.5; /* UI, lists */ --vv-lh-prose: 1.65; /* long-form body — the money value */ --vv-tracking-tight: -0.02em; /* large display sizes */ --vv-tracking-normal: 0; --vv-tracking-wide: 0.06em; /* eyebrows, category flags, all-caps */ --vv-weight-regular: 400; --vv-weight-medium: 500; --vv-weight-semibold: 600; --vv-weight-bold: 700; --vv-weight-black: 900; /* --------------------------------------------------------------------- 3. Spacing — 8-pt grid (with a 4pt half-step) --------------------------------------------------------------------- */ --vv-space-0: 0; --vv-space-05: 0.25rem; /* 4px */ --vv-space-1: 0.5rem; /* 8px */ --vv-space-2: 1rem; /* 16px */ --vv-space-3: 1.5rem; /* 24px */ --vv-space-4: 2rem; /* 32px */ --vv-space-5: 2.5rem; /* 40px */ --vv-space-6: 3rem; /* 48px */ --vv-space-8: 4rem; /* 64px */ --vv-space-10: 5rem; /* 80px */ --vv-space-12: 6rem; /* 96px */ --vv-space-16: 8rem; /* 128px */ /* --------------------------------------------------------------------- 4. Layout --------------------------------------------------------------------- */ --vv-measure: 68ch; /* ideal reading measure */ --vv-content-max: 680px; /* article column cap — Etappe 1 */ --vv-wide-max: 1068px; /* pull-out figures, tables */ --vv-container-max: 1240px; /* page shell */ --vv-gutter: var(--vv-space-3); --vv-radius-sm: 4px; --vv-radius-md: 8px; --vv-radius-lg: 16px; --vv-radius-pill: 999px; /* Shadows — restrained. A newspaper is flat; depth is for controls only. */ --vv-shadow-sm: 0 1px 2px rgba(27, 42, 74, 0.06); --vv-shadow-md: 0 4px 12px rgba(27, 42, 74, 0.08); --vv-shadow-lg: 0 12px 32px rgba(27, 42, 74, 0.12); /* --------------------------------------------------------------------- 5. Motion — short, calm, and respectful of reduced-motion --------------------------------------------------------------------- */ --vv-ease: cubic-bezier(0.4, 0, 0.2, 1); --vv-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --vv-dur-fast: 120ms; --vv-dur-base: 200ms; --vv-dur-slow: 360ms; /* --------------------------------------------------------------------- 6. Z-index ladder — declared once so nothing invents a 99999 --------------------------------------------------------------------- */ --vv-z-base: 0; --vv-z-sticky: 100; --vv-z-header: 200; --vv-z-overlay: 300; --vv-z-modal: 400; --vv-z-toast: 500; } /* NOTE — deliberately NO `@media (prefers-color-scheme: dark)` block here. ------------------------------------------------------------------------- Etappe 0 shipped one, and Etappe 1 removed it after it caused a real bug: a reader on a dark-OS machine who explicitly chose LIGHT still got the dark token values, because a media query cannot know about that choice. The visible symptom was a white headline on a white page. There is now exactly ONE switch: the `data-vv-theme` attribute on , set before first paint by the inline script in functions.php, which already folds in the OS preference AND the reader's stored choice. The dark values live in assets/vv-darkmode.css under `html[data-vv-theme="dark"]`. Rule of thumb worth keeping: OS preference is an INPUT to the decision, not the decision itself. Resolve it once, in one place. */ @media (prefers-reduced-motion: reduce) { :root { --vv-dur-fast: 0ms; --vv-dur-base: 0ms; --vv-dur-slow: 0ms; } } /* ------------------------------------------------------------------------- The one applied rule in Etappe 0: CLS insurance. Images that carry width/height attributes get an intrinsic aspect ratio so the browser reserves the box before the bytes arrive. This is additive — it cannot shift a layout, only stop one from shifting — and it is the cheapest CLS win available before Etappe 2 does the real image work. ------------------------------------------------------------------------- */ img[width][height] { height: auto; }