/* ── base ────────────────────────────────────────────────────────────────
Zetgoed globale element-defaults. Kale HTML-elementen pakken het merk
automatisch op. Consumers kunnen erop vertrouwen dat een gewone
//
/ er on-brand uitziet, zonder extra classes. */
body {
background: var(--bg);
color: var(--text);
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
font-weight: var(--fw-regular);
-webkit-font-smoothing: antialiased;
text-rendering: optimizelegibility;
}
/* Headings — Young Serif display */
h1,
h2,
h3,
h4 {
font-family: var(--font-display);
color: var(--text-heading);
font-weight: var(--fw-semibold);
line-height: var(--lh-heading);
letter-spacing: var(--tracking-tight);
font-variation-settings: var(--display-vsettings);
text-wrap: balance;
margin: 0 0 0.5em;
}
h1 {
font-size: var(--fs-h1);
line-height: var(--lh-tight);
}
h2 {
font-size: var(--fs-h2);
}
h3 {
font-size: var(--fs-h3);
font-weight: var(--fw-medium);
}
h4 {
font-size: var(--fs-h4);
font-weight: var(--fw-medium);
letter-spacing: var(--tracking-normal);
}
/* Paragrafen & body-tekst */
p {
margin: 0 0 1em;
max-width: 68ch;
text-wrap: pretty;
}
.lead {
font-size: var(--fs-lead);
color: var(--text-subtle);
line-height: var(--lh-snug);
}
small,
.text-sm {
font-size: var(--fs-sm);
}
.text-muted {
color: var(--text-muted);
}
/* Eyebrow / kicker-label */
.eyebrow {
font-family: var(--font-body);
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--text-muted);
}
/* Terracotta-variant: eerste afnemer is de categorie-eyebrow op de
`zetgoed/review-archive`-kaart (`.zg-eyebrow-terra` in
ReviewOverzicht.dc.html) — dat brondocument gebruikt terracotta i.p.v. het
gebruikelijke gedempte `--text-muted` voor zijn eyebrows (breadcrumb-hero,
FAQ-kop, kaart-categorie). Modifier op het bestaande `.eyebrow`-primitief
i.p.v. een nieuwe class, zodat elke toekomstige terracotta-eyebrow
(bv. de archief-hero/FAQ-kop in Fase 4b Task 2) 'm ook kan gebruiken. */
.eyebrow--terracotta {
color: var(--terracotta-600);
}
/* Amber-variant: eerste (en enige) afnemer is de keuzehulp-band
(`zetgoed/cta-band` met `variant="dark"`, zie src/blocks/cta-band/
render.php) — de donkere, gecentreerde sectie in ReviewOverzicht.dc.html
geeft zijn eyebrow bewust `var(--amber-600)` i.p.v. terracotta, om op de
espresso-900-achtergrond genoeg contrast/warmte te houden. Zelfde
modifier-patroon als `.eyebrow--terracotta` hierboven. */
.eyebrow--amber {
color: var(--amber-600);
}
/* Sand-variant: eerste (en enige) afnemer is de topkeuze-band
(`zetgoed/koopgids-topkeuze`, zie src/blocks/koopgids-topkeuze/
render.php) — de "Uitgelicht: onze topkeuze"-sectie in Koopgids.dc.html
geeft zijn eyebrow een eigen amber-tint (`#d9b48a`), dichter bij
`--sand-400` (`#d8bf93`) dan bij de bestaande `--amber-600` (`#c1852b`,
gereserveerd voor de keuzehulp-band met een andere brontint — zie
`.eyebrow--amber` hierboven). Zelfde modifier-patroon als
`.eyebrow--terracotta`/`.eyebrow--amber`. */
.eyebrow--sand {
color: var(--sand-400);
}
/* Accent-variant (forest): eerste afnemer is het award-label per rangkaart
in `zetgoed/koopgids-ranglijst` (zie src/blocks/koopgids-ranglijst/
render.php) — de "Ranglijst"-sectie in Koopgids.dc.html geeft dat label
`color:var(--accent)` i.p.v. het gebruikelijke gedempte `--text-muted`.
Font-family/size/weight/uppercase van het gedeelde `.eyebrow`-primitief
matchen de bron al 1-op-1; alleen de kleur (en de bron-letterlijke
`letter-spacing:.12em` t.o.v. het primitief z'n `--tracking-eyebrow`,
0,14em — verwaarloosbaar verschil, zelfde afweging als elders in dit
bestand) wijkt af. Zelfde modifier-patroon als `.eyebrow--terracotta`/
`.eyebrow--amber`/`.eyebrow--sand`. */
.eyebrow--accent {
color: var(--accent);
}
/* Espresso-variant: eerste afnemer is de default-eyebrow van OverZetgoed.dc.html
(`.zg-eyebrow` daar = var(--espresso-500), niet het gebruikelijke
gedempte --text-muted). Zelfde modifier-patroon als
.eyebrow--terracotta/--amber/--sand/--accent. */
.eyebrow--espresso {
color: var(--espresso-500);
}
/* Sectie-ritme voor editorial `post_content` (bv. de Sage-review-prose in
wordpress/scripts/seed-sage-content.php): elke top-level designsectie in
ProductReview.dc.html declareert zijn eigen `padding:var(--section-y) 0 0`
bovenaan. Custom blocks (score-bars/cta-band/voor-wie) bakken die
top-spacing al in hun eigen component-CSS; kale core-blocks (heading/
paragraph/columns) hebben geen equivalent en zouden zonder deze utility
op het standaard block-gap (24px) uitkomen in plaats van de 120px-ritme
van de bron. Toe te passen als block-`className` op het eerste element
van zo'n sectie.
Descendant-selector (i.p.v. los `.zg-section-gap`) met opzet: WP's eigen
global-styles zetten `:root :where(.is-layout-flow) > :first-child{
margin-block-start:0}` — de `:first-child`-pseudo-class staat BUITEN de
specificiteit-neutraliserende `:where()`, dus die regel heeft zelf al
specificiteit (0,1,1) en wint van een kale `.zg-section-gap`-klasse
(0,1,0) zodra deze utility toevallig op het eerste blok in post_content
staat. `.wp-block-post-content .zg-section-gap` (0,2,0) wint altijd. */
.wp-block-post-content .zg-section-gap {
margin-top: var(--section-y);
}
/* Links */
a {
color: var(--link);
text-decoration: none;
transition: color 0.18s ease;
}
a:hover {
color: var(--link-hover);
text-decoration: underline;
text-underline-offset: 0.18em;
}
/* Nadruk */
strong,
b {
font-weight: var(--fw-semibold);
color: var(--text-heading);
}
em {
font-style: italic;
}
hr {
border: none;
border-top: 1px solid var(--divider);
margin: var(--space-8) 0;
}
::selection {
background: var(--forest-200);
color: var(--espresso-900);
}
:focus-visible {
outline: var(--ring-width) solid var(--focus-ring);
outline-offset: 2px;
}
/* Screen-reader-only: visueel verborgen, wel voorleesbaar */
.zg-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}