/* ============================================================================= Krakti — Design Tokens (single source of truth) assets/css/tokens.css — enqueued as 'krakti-tokens' (deps: krakti-fonts) Modern editorial newsroom. Light, premium, type-led. Colors in OKLCH. DO NOT hardcode palette/type/spacing elsewhere — consume these variables. ============================================================================= */ :root { /* --------------------------------------------------------------------------- COLOR — OKLCH palette (warm paper, near-black ink, terracotta accent) --------------------------------------------------------------------------- */ /* Surfaces / paper */ --k-color-paper: oklch(98% 0.006 35); /* page background (warm white) */ --k-color-surface: oklch(99.5% 0.004 35); /* cards / raised surfaces */ --k-color-surface-2: oklch(96.5% 0.008 35); /* subtle alt surface / wells */ --k-color-surface-sunk: oklch(94.5% 0.010 35); /* sunken fields / placeholders */ /* Ink / text */ --k-color-ink: oklch(20% 0.018 35); /* primary headline/body text */ --k-color-soft: oklch(35% 0.018 35); /* secondary text / dek */ --k-color-muted: oklch(48% 0.020 35); /* meta / captions / muted */ --k-color-faint: oklch(62% 0.018 35); /* very low-emphasis text */ /* Hairlines / borders */ --k-color-rule: oklch(90% 0.012 35); /* default hairline rule */ --k-color-rule-strong: oklch(84% 0.014 35); /* stronger divider */ --k-color-rule-faint: oklch(94% 0.010 35); /* faint inset rule */ /* Accent — terracotta (brand) */ --k-color-accent: oklch(48% 0.165 32); /* primary accent (~#b04a2a) */ --k-color-accent-hover: oklch(43% 0.170 32); /* accent hover/active */ --k-color-accent-strong: oklch(38% 0.160 31); /* deep accent (text on light) */ --k-color-accent-soft: oklch(94% 0.035 32); /* accent tint bg (pills/badges) */ --k-color-accent-soft-2: oklch(90% 0.050 32); /* slightly deeper accent tint */ --k-color-on-accent: oklch(99% 0.004 35); /* text/icon on accent */ /* Status */ --k-color-live: oklch(58% 0.130 145); /* positive / LIVE green */ --k-color-live-strong: oklch(52% 0.135 145); /* live hover/active (WhatsApp) */ --k-color-live-soft: oklch(93% 0.045 145); /* live tint bg */ --k-color-on-live: oklch(99% 0.004 145); /* text on live */ --k-color-danger: oklch(55% 0.180 27); /* error/danger (form invalid) */ --k-color-danger-soft: oklch(94% 0.040 27); /* danger tint bg */ /* Dark "breaking" bar + dark footer */ --k-color-ink-deep: oklch(17% 0.016 35); /* breaking bar / dark footer bg */ --k-color-ink-deep-2: oklch(23% 0.018 35); /* dark surface alt */ --k-color-on-ink: oklch(97% 0.006 35); /* text on dark ink */ /* Muted text on dark ink. A11y (WCAG 1.4.3): bumped from 80% L to 86% L so footer taglines / copyright / nav-links / legal clear >=4.5:1 on ink-deep (L17). At 80% the ratio fell ~4.0:1 and failed normal-size body. 86% on L17 ≈ 7.4:1, comfortably AA and still reads as "muted" beside on-ink (L97). */ --k-color-on-ink-muted: oklch(86% 0.014 35); /* Brand icon (terracotta rounded square "K") */ --k-color-brand-square: oklch(48% 0.165 32); --k-color-brand-glyph: oklch(99% 0.004 35); /* --------------------------------------------------------------------------- CATEGORY COLOR SYSTEM — SEMANTIC, not decorative (design finding 2) Color is a wayfinding signal: each of the 5 CONTRACT sections owns one hue so a reader can tell Sport from Misdaad at a glance, across eyebrow, pill, section tick + wash, and hub. Terracotta stays the BRAND/link color; these hues are SECTION identity only — never restyle generic links with them. Four roles per slug (use these, do not invent ad-hoc shades): --k-cat-{slug} saturated hue — section tick, eyebrow text, pill hover bg, active section underline --k-cat-{slug}-soft pale tint bg — pill background, section wash, tinted-block background --k-cat-{slug}-ink text-on-soft — pill/eyebrow text ON its -soft bg. Tuned to clear WCAG 1.4.3 >=4.5:1 on the matching -soft (L93-94). DO NOT lighten these past L40 or contrast breaks. --k-cat-{slug}-on text-on-hue — text/icon on the SATURATED hue (pill:hover, filled chips). ~L98. USAGE CONTRACT (the CSS + emit that must consume these — polish agents): 1. Pills: .k-pill--{slug} (already wired, components.css). 2. Eyebrow: .k-eyebrow--{slug} (ADD — remap color to the hue so a card's kicker matches its section). 3. Section: .k-section--{slug} sets --k-section-accent/-wash from these (already wired, components.css:953). *** EMIT BUG (finding 2): section-block.php applies the class returned by krakti_category_tint_class() — which is "k-pill--{slug}" — onto the
. The section accent/wash variables only remap under ".k-section--{slug}", so today the per-category section color NEVER fires on the homepage. FIX (polish agent, not tokens): emit "k-section--{slug}" on the
(and keep k-pill--{slug} for the actual pill element). Without that emit these tokens stay dark. *** 4. Hub pills (dossier/landing): reuse .k-pill--{slug}. Hues are deliberately spaced on the wheel (warm red → oxblood → green → blue → violet) but held at editorial saturation (C 0.11-0.15) so they read as a harmonious set, not a crayon box, next to the terracotta brand. --------------------------------------------------------------------------- */ --k-cat-politiek: oklch(48% 0.150 28); /* warm red-terracotta */ --k-cat-politiek-soft: oklch(94% 0.040 28); --k-cat-politiek-ink: oklch(32% 0.140 28); /* >=4.5:1 on -soft */ --k-cat-politiek-on: oklch(98% 0.010 28); --k-cat-misdaad: oklch(45% 0.140 18); /* deep brick/oxblood */ --k-cat-misdaad-soft: oklch(93% 0.040 18); --k-cat-misdaad-ink: oklch(31% 0.130 18); /* >=4.5:1 on -soft */ --k-cat-misdaad-on: oklch(98% 0.010 18); --k-cat-economie: oklch(50% 0.110 150); /* muted forest/teal-green */ --k-cat-economie-soft: oklch(93% 0.040 150); --k-cat-economie-ink: oklch(33% 0.100 150); /* >=4.5:1 on -soft (green needs lower L) */ --k-cat-economie-on: oklch(98% 0.012 150); --k-cat-sport: oklch(52% 0.140 245); /* editorial blue */ --k-cat-sport-soft: oklch(93% 0.040 245); --k-cat-sport-ink: oklch(36% 0.130 250); /* >=4.5:1 on -soft */ --k-cat-sport-on: oklch(98% 0.010 245); --k-cat-sociaal: oklch(52% 0.130 300); /* warm violet */ --k-cat-sociaal-soft: oklch(93% 0.038 300); --k-cat-sociaal-ink: oklch(36% 0.120 300); /* >=4.5:1 on -soft */ --k-cat-sociaal-on: oklch(98% 0.010 300); /* Default (unknown category) — falls back to the terracotta brand family. */ --k-cat-default: var(--k-color-accent); --k-cat-default-soft: var(--k-color-accent-soft); --k-cat-default-ink: var(--k-color-accent-strong); --k-cat-default-on: var(--k-color-on-accent); /* --------------------------------------------------------------------------- TYPOGRAPHY — families --------------------------------------------------------------------------- */ --k-font-serif: "Source Serif 4", "Iowan Old Style", "Apple Garamond", Georgia, Cambria, "Times New Roman", Times, serif; --k-font-sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --k-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; /* prose code/pre */ --k-font-display: var(--k-font-serif); /* display = serif */ --k-font-meta: var(--k-font-sans); /* meta/labels = sans */ /* Variable font axes (defaults; components may override weight) */ --k-weight-regular: 400; --k-weight-medium: 500; --k-weight-semibold: 600; --k-weight-bold: 700; --k-weight-display: 620; /* heavy-but-refined for serif display */ --k-weight-wordmark: 760; /* KRAKTI wordmark heavy */ /* --------------------------------------------------------------------------- TYPE SCALE — fluid via clamp(). Editorial drama: large serif display. clamp(min @360px, preferred (vw-driven), max @1440px) SCALE-CONTRAST CONTRACT (design finding 5 — hierarchy must SURVIVE 360px): The hero lead title must out-shout body text by a clear ratio at the smallest phone, not just on desktop. The previous floors collapsed: hero bottomed at 44px while body sat at 16px AND the mid display steps (h2 30 / h3 24 / hero-sm 32) bunched together, so at 360px the page read as one flat size. Re-tuned so the MOBILE FLOORS themselves form a dramatic ladder (each step a clear jump, not a nudge): 360px floor ladder (px): meta 12 · body 16 · h4 21 · h3 26 · h2 32 · hero-sm 34 · h1 40 · hero 50 hero:body floor ratio ≈ 3.1x (was 2.75x) — lead title now unmistakably dominant on a 360px column. max ladder (1440px): hero 82 · h1 62 · h2 47 · h3 35 … Rules for builders: do NOT raise body/meta floors to "fill" small screens (that flattens contrast). Keep display floors high and let the small ramp stay calm. text-wrap:balance on titles prevents the taller floor from forcing >3 lines on the narrowest hero. --------------------------------------------------------------------------- */ /* UI / meta (sans) — calm ramp, low floors PROTECT display contrast */ --k-fs-micro: clamp(0.6875rem, 0.66rem + 0.12vw, 0.75rem); /* 11 -> 12 badges/labels */ --k-fs-meta: clamp(0.75rem, 0.72rem + 0.16vw, 0.8125rem); /* 12 -> 13 meta/time */ --k-fs-small: clamp(0.8125rem, 0.78rem + 0.18vw, 0.875rem); /* 13 -> 14 small UI */ /* Body / prose */ --k-fs-body: clamp(1rem, 0.97rem + 0.18vw, 1.0625rem); /* 16 -> 17 UI body */ --k-fs-prose: clamp(1.0625rem, 1.0rem + 0.40vw, 1.1875rem); /* 17 -> 19 article body (serif) */ --k-fs-dek: clamp(1.1875rem, 1.04rem + 0.72vw, 1.5rem); /* 19 -> 24 standfirst/dek */ --k-fs-lead: clamp(1.0625rem, 1.0rem + 0.35vw, 1.1875rem); /* lead-in paragraph */ /* Display headings (serif) — h6 small .. h1 big. Floors widened for 360px. */ --k-fs-h6: clamp(0.9375rem, 0.90rem + 0.20vw, 1.0625rem); /* 15 -> 17 */ --k-fs-h5: clamp(1.0625rem, 1.0rem + 0.40vw, 1.25rem); /* 17 -> 20 */ --k-fs-h4: clamp(1.3125rem, 1.16rem + 0.72vw, 1.625rem); /* 21 -> 26 */ --k-fs-h3: clamp(1.625rem, 1.36rem + 1.20vw, 2.1875rem); /* 26 -> 35 */ --k-fs-h2: clamp(2rem, 1.55rem + 2.00vw, 2.9375rem); /* 32 -> 47 */ --k-fs-h1: clamp(2.5rem, 1.74rem + 3.40vw, 3.875rem); /* 40 -> 62 single H1 */ /* Hero display — maximum editorial drama; floor raised 44->50 so the lead title stays dominant at 360px (see SCALE-CONTRAST CONTRACT above). */ --k-fs-hero: clamp(3.125rem, 1.85rem + 5.7vw, 5.125rem); /* 50 -> 82 hero lead */ --k-fs-hero-sm: clamp(2.125rem, 1.52rem + 2.7vw, 3.25rem); /* 34 -> 52 secondary hero / section lead */ --k-fs-display: clamp(3.75rem, 2.1rem + 7.3vw, 6.5rem); /* 60 -> 104 404 code / oversized numerals */ /* --------------------------------------------------------------------------- LINE HEIGHTS --------------------------------------------------------------------------- */ --k-lh-solid: 1; /* big numerals / wordmark */ --k-lh-display: 1.04; /* hero / h1 / h2 tight serif */ --k-lh-heading: 1.12; /* h3..h5 */ --k-lh-snug: 1.28; /* dek / lead */ --k-lh-body: 1.5; /* UI body */ --k-lh-prose: 1.72; /* article prose comfort */ --k-lh-meta: 1.35; /* meta rows */ /* Letter spacing */ --k-ls-wordmark: -0.02em; /* tight tracking KRAKTI */ --k-ls-display: -0.012em; --k-ls-heading: -0.006em; --k-ls-tight: -0.015em; /* single H1 display tracking */ --k-ls-label: 0.06em; /* eyebrows / pills uppercase */ --k-ls-label-lg: 0.10em; /* breaking label */ --k-ls-normal: 0; /* Prose-scale type (article body system; serif quote/pull) */ --k-fs-quote: var(--k-fs-h4); /* blockquote in prose */ --k-fs-pull: var(--k-fs-h3); /* standalone pull quote */ /* --------------------------------------------------------------------------- SPACING — refined, non-uniform rhythm. Base step ~ 4px. --------------------------------------------------------------------------- */ --k-space-3xs: 0.25rem; /* 4 */ --k-space-2xs: 0.5rem; /* 8 */ --k-space-xs: 0.75rem; /* 12 */ --k-space-sm: 1rem; /* 16 */ --k-space-md: 1.5rem; /* 24 */ --k-space-lg: 2rem; /* 32 */ --k-space-xl: 3rem; /* 48 */ --k-space-2xl: 4rem; /* 64 */ --k-space-3xl: 6rem; /* 96 */ /* Fluid editorial section rhythm (generous, scales with viewport) */ --k-space-section: clamp(3rem, 2.2rem + 3.6vw, 6rem); /* gap between home surfaces */ --k-space-section-sm: clamp(2rem, 1.6rem + 1.8vw, 3.25rem); --k-gutter: clamp(1rem, 0.6rem + 1.8vw, 2rem); /* page horizontal gutter */ --k-gap-grid: clamp(1.25rem, 1rem + 1.1vw, 2rem); /* grid gaps */ --k-gap-card: var(--k-space-sm); /* in-card stacking */ --k-flow: 1em; /* default vertical flow */ --k-flow-prose: 1.15em; /* prose paragraph rhythm */ --k-prose-flow: 1.4em; /* gap between prose blocks */ /* RHYTHM CONTRACT (design finding 4 — deliberate, NOT uniform). The system claimed rhythm but padded most things at --k-space-md. Make the contrast explicit: BREATHE around top-level structure, COMPRESS inside dense units. Builders: reach for these named tokens, not raw steps, so the loose/tight intent is legible and consistent. loose = space below section/hero headers + around lead stories header = below a section/river header rule tight = stack gap inside card bodies (title/dek/meta) meta = gap between meta chips (time · readtime · share) — deliberately tighter than card body stacking so a meta row reads as one cluster */ --k-rhythm-loose: clamp(1.75rem, 1.3rem + 2.0vw, 3rem); /* hero/section header → content */ --k-rhythm-header: clamp(1rem, 0.85rem + 0.7vw, 1.5rem); /* header rule → grid */ --k-rhythm-card: var(--k-space-2xs); /* in-card title/dek/meta stack (tight) */ --k-rhythm-meta: var(--k-space-xs); /* meta-chip gap (tightest cluster) */ --k-rhythm-lead: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);/* lead story → rest of bento section */ /* Article layer: avatars, accent rule, share rail */ --k-avatar-sm: 2.25rem; /* byline / comment avatar */ --k-avatar-lg: 4rem; /* author-box avatar */ --k-rule-accent: 3px; /* blockquote / pullquote accent rule width */ --k-share-rail: 4.5rem; /* desktop sticky share rail / left gutter */ --k-sticky-top: 6rem; /* sticky offset below masthead */ /* --------------------------------------------------------------------------- RADII --------------------------------------------------------------------------- */ --k-radius-xs: 3px; --k-radius-sm: 6px; --k-radius-md: 10px; --k-radius-lg: 16px; --k-radius-pill: 999px; --k-radius-round: 50%; /* circular avatars */ --k-radius-brand: 22%; /* brand "K" rounded square */ /* --------------------------------------------------------------------------- SHADOWS — soft, warm-tinted, editorial. Shadows are warm (hue 35), never neutral grey, so elevation feels native to the paper palette. ELEVATION CONTRACT (design finding 3 — the ramp must be USED intentionally, not decoratively, to build a believable z-stack). Each level maps to a role: xs resting chrome detail (brand mark, quiet inset). Barely there. sm resting elevation for a real surface card (featured/bento lead at rest, masthead-scrolled). The card reads as a plane above paper. md HOVER lift for an interactive card (section/featured:hover). Pairs with transform: translateY(-2px) — shadow grows as the card rises. lg top of the stack: lead/bento hero on hover, drawer panel, popovers. overlap for grid-breaking bento: a card that OVERLAPS a tinted wash or a neighbour. Slightly larger + softer so the overlap reads as depth, not a seam. Use on the lead card in an asymmetric/bento section. Rule: only ONE element per viewport region should sit at lg at rest. Most of the page is flat (hairlines do the work); elevation is the exception that marks "this is the important plane", which is what makes it read. */ --k-shadow-xs: 0 1px 2px oklch(20% 0.02 35 / 0.05); --k-shadow-sm: 0 2px 6px oklch(20% 0.02 35 / 0.06), 0 1px 2px oklch(20% 0.02 35 / 0.05); --k-shadow-md: 0 6px 18px oklch(20% 0.02 35 / 0.08), 0 2px 6px oklch(20% 0.02 35 / 0.05); --k-shadow-lg: 0 16px 40px oklch(20% 0.02 35 / 0.12), 0 4px 12px oklch(20% 0.02 35 / 0.07); --k-shadow-overlap: 0 10px 30px oklch(20% 0.02 35 / 0.10), 0 3px 8px oklch(20% 0.02 35 / 0.06); /* bento overlap depth */ --k-shadow-focus: 0 0 0 3px oklch(48% 0.165 32 / 0.35); /* accent focus ring */ --k-shadow-bar: 0 -2px 12px oklch(20% 0.02 35 / 0.08); /* fixed mobile share bar */ /* Focus ring geometry (outline width/offset) */ --k-focus-width: 2px; --k-focus-offset: 2px; /* --------------------------------------------------------------------------- LAYOUT WIDTHS --------------------------------------------------------------------------- */ --k-container: 72rem; /* 1152px standard content */ --k-container-wide: 82rem; /* 1312px hero/full rows */ --k-container-narrow:48rem; /* 768px narrow blocks */ --k-measure: 42rem; /* ~672px article prose measure */ --k-measure-wide: 46rem; /* slightly wider prose option */ --k-sidebar: 20rem; /* 320px desktop sidebar */ --k-content-col: minmax(0, 1fr); /* main column in grid */ /* Breakpoints (reference values; media queries use literals) */ --k-bp-sm: 30rem; /* 480 */ --k-bp-md: 48rem; /* 768 */ --k-bp-lg: 64rem; /* 1024 — sidebar/nav desktop switch */ --k-bp-xl: 80rem; /* 1280 */ /* Tap target */ --k-tap: 2.75rem; /* 44px min touch target (WCAG 2.5.8 AAA ideal) */ --k-tap-sm: 2.25rem; /* 36px compact target (chips/tags) */ /* Button min-height (design finding 7 — restore the WCAG 2.5.8 floor). .k-btn--sm previously hardcoded min-height:1.5rem (24px) AND shrank on >=1024 to a 24px box that, with its small font, dipped under a comfortable target. These tokens set the floors explicitly: --k-btn-min-h default button target (= 44px tap). --k-btn-min-h-sm small button: keep 36px on touch; the AA hard floor is 24px (--k-tap-min). Components MUST NOT go below --k-tap-min on any breakpoint. --k-tap-min absolute AA minimum (SC 2.5.8) — 24px. A guard rail. */ --k-btn-min-h: var(--k-tap); /* 44px */ --k-btn-min-h-sm: var(--k-tap-sm); /* 36px — do not drop below --k-tap-min */ --k-tap-min: 1.5rem; /* 24px WCAG 2.5.8 AA floor (never go under) */ /* --------------------------------------------------------------------------- Z-INDEX SCALE --------------------------------------------------------------------------- */ --k-z-base: 0; --k-z-raised: 10; --k-z-share-bar: 40; /* fixed mobile share bar (below sticky masthead) */ --k-z-sticky: 100; /* sticky masthead */ --k-z-breaking: 110; /* breaking bar */ --k-z-dropdown: 200; /* search panel */ --k-z-backdrop: 900; /* drawer backdrop */ --k-z-drawer: 1000; /* mobile drawer */ --k-z-toast: 1100; /* copy feedback toast */ --k-z-skip: 1200; /* skip link on focus */ /* --------------------------------------------------------------------------- MOTION — durations + easings --------------------------------------------------------------------------- */ --k-dur-instant: 80ms; --k-dur-fast: 150ms; --k-dur-normal: 240ms; --k-dur-slow: 400ms; --k-dur-slower: 640ms; --k-ease-standard: cubic-bezier(0.2, 0, 0, 1); --k-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* expo-out reveals */ --k-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --k-ease-emphasis: cubic-bezier(0.34, 1.56, 0.64, 1); /* subtle overshoot (use rarely) */ /* Convenience composite transitions */ --k-transition-colors: color var(--k-dur-fast) var(--k-ease-standard), background-color var(--k-dur-fast) var(--k-ease-standard), border-color var(--k-dur-fast) var(--k-ease-standard); --k-transition-transform: transform var(--k-dur-normal) var(--k-ease-out); } /* ----------------------------------------------------------------------------- REDUCED MOTION Builders: gate all non-essential animation/transition behind this. theme.js must also check window.matchMedia('(prefers-reduced-motion: reduce)'). Tokens above stay defined (values still resolve); motion is neutralized here. ----------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --k-dur-instant: 0ms; --k-dur-fast: 0ms; --k-dur-normal: 0ms; --k-dur-slow: 0ms; --k-dur-slower: 0ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ----------------------------------------------------------------------------- FORWARD-COMPAT: optional opt-in dark surface contexts reuse --k-color-ink-deep tokens above (breaking bar, footer). No global dark mode is defined by design. ----------------------------------------------------------------------------- */