/* Theme Name: AIAgentCycle Theme URI: https://aiagentcycle.com/ Author: AIAgentCycle Author URI: https://aiagentcycle.com/ Description: Eigen block theme (FSE) voor aiagentcycle.com. Alle huisstijl-tokens leven in theme.json; deze stylesheet dekt uitsluitend wat theme.json niet kan uitdrukken (focus-states, formulierstates, prefers-reduced-motion, sectie-utilities, en de exclusieve CTA-kleur). Geen page builder, geen jQuery, geen Google Fonts-CDN. Requires at least: 7.0 Tested up to: 7.0.3 Requires PHP: 7.4 Version: 0.6.2 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: aiagentcycle Tags: full-site-editing, block-patterns, one-column, accessibility-ready */ /* ========================================================================= 0. Fonts — lokaal, AVG-conform. Geen fonts.googleapis.com, geen gstatic. Het woff2-bestand wordt NIET meegeleverd in de repo; zie assets/fonts/README.md voor de exacte subset-eis en de bouwinstructie. De @font-face voor "Inter var" wordt door WordPress zelf gegenereerd uit theme.json (settings.typography.fontFamilies[].fontFace). Hier staat alleen de metric-matched fallback, die theme.json niet kan uitdrukken. ========================================================================= */ @font-face { font-family: "Inter fallback"; src: local("Arial"), local("Helvetica Neue"), local("Roboto"); /* STARTWAARDEN uit PERFORMANCE-PLAN.md §3.3 — nog NIET gemeten met een fallback-metrics-generator. Verplicht verifiëren bij de bouw van het woff2-bestand; ongeverifieerd gebruiken is een CLS-risico. */ size-adjust: 107%; ascent-override: 90%; descent-override: 22.4%; line-gap-override: 0%; } /* ========================================================================= 1. AAC-CTA — de ENIGE plek in het hele theme waar #22C55E voorkomt. CONTENTLAAG.md §4.2 slot 1: actie-groen staat bewust niet in het theme.json-palet, zodat geen enkele redacteur het ergens anders kan kiezen. Conversieregel 1 (architectuur §7.2): exact één primaire groene CTA per pagina. VERHUIST: zodra de blocks-plugin bestaat, hoort dit blok in de stylesheet van het custom block `aac/cta` en verdwijnt het hier. Tot die tijd draagt de blokstijl `is-style-aac-cta` op core/button de handhaving (zie functions.php: register_block_style + de niet-toegestane core/button in de inserter). Labelkleur = ink #0B1F3A op #22C55E = 7,25:1 (WCAG AA en AAA gehaald). VOORLOPIG: TOEGANKELIJKHEID.md §11 T-1 optie A. Merkbeslissing van Stefan. ========================================================================= */ /* De regels voor `.wp-block-button.is-style-aac-cta` stonden hier. Verwijderd 2026-08-10: het theme kent nog maar één CTA-mechanisme, `.aac-knop` uit primitieven.css + componenten.css. Zie functions.php en CHANGELOG CH-010. Wat hier nog wél hoort te staan zodra de blocks-plugin bestaat: de handhaving van actie-groen als exclusieve CTA-kleur. Die claim stond in de oude kop van dit blok ("de ENIGE plek waar #22C55E voorkomt") maar was al niet meer waar: actie-groen staat gewoon in het theme.json-palet. */ /* ========================================================================= 1b. — het teal accentwoord in de hero-kop GEMETEN DEFECT (V4-typografie-kleur.md §6.2, opnieuw nagemeten 2026-08-11 op themaversie 0.1.9): op `/`, `/scan/` en `/kennisbank/` staat het teal accentwoord van de H1 op een GELE markeerstift. Teal #12B5B0 op geel meet 2,37:1 en faalt SC 1.4.3 ruim. Oorzaak, in drie stappen: 1. De vier hero-patterns schrijven `` om de markeerstift te neutraliseren. 2. Patterns lopen door `wp_kses_post()`. WordPress' `safecss_filter_attr()` verwerpt elke CSS-waarde met een haakje behalve `calc()` en `var()`, dus die declaratie wordt weggefilterd. Wat overblijft is een kale ``. 3. Er stond nergens een `mark`-selector. Zelf nagemeten op de geserveerde uitvoer van de homepage: 54 kB inline CSS plus style.css, primitieven.css en componenten.css = 93 kB, **nul** `mark`-selectors. Dus gold de UA-default `mark { background-color: Mark }` — in de gangbare browsers geel. Deze regel neemt uitsluitend de ACHTERGROND weg. De tekstkleur blijft waar hij vandaan komt: de `` draagt `has-cycle-teal-color`, en presetkleurklassen dragen `!important`, dus teal blijft staan. Een `` zónder kleurklasse houdt de UA-tekstkleur. RAAKT DE ZEVEN DETAILPAGINA'S NIET. `Support\HeroKop::opmaak()` bouwt zijn markup in PHP zonder `wp_kses_post()`, dus daar overleeft het inline `background-color:rgba(0, 0, 0, 0)` wél — en een inline stijl wint van deze regel met dezelfde uitkomst (transparant). Idem voor `/prijzen/`, `/over/`, `/werkwijze/` en `/waarom-n8n/`, die hun inhoud uit `src/content/nl/` in de database halen en dus ook niet gefilterd worden. Nagemeten in de geserveerde HTML van elf pagina's: acht behouden de inline stijl, drie niet. LET OP BIJ TOEKOMSTIGE ZOEKFUNCTIES: gaat `/kennisbank/` ooit zoekresultaten markeren met ``, dan heeft die markering hier geen achtergrond meer. Geef zo'n markering dan een eigen klasse met een eigen vlakkleur uit het palet; herstel niet de UA-`Mark`, die staat in geen enkele bron. Dit is een tijdelijke pleister op de plek waar het goedkoopst is. De structurele oplossing ligt buiten dit bestand en is gemeld: laat de vier hero-patterns het accentwoord renderen via `Support\HeroKop` (zoals de zeven detailpagina's al doen), of geef de `` een klasse in plaats van een inline stijl. Dan is deze regel overbodig. ========================================================================= */ mark { background-color: transparent; } /* ========================================================================= 2. Focus — SC 2.4.7 / 1.4.11. Nooit outline:none zonder vervanger. Twee ringen: ink op lichte fondsen, wit op de inktblauwe secties (ink op ink-surface = 1,15:1 → onzichtbaar). TOEGANKELIJKHEID.md §4. outline en niet box-shadow: box-shadow overleeft forced-colors niet. ========================================================================= */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: var(--wp--custom--focus--breedte) solid var(--wp--custom--focus--licht); outline-offset: var(--wp--custom--focus--offset); } /* Lichte ring op de inktblauwe vlakken. GECORRIGEERDE SELECTOR: hier stond `.aac-sectie--donker` en `footer.aac-footer`; geen van beide klassen komt in de markup voor (nagemeten over elf live pagina's: nul treffers). De donkere vlakken worden in werkelijkheid herkenbaar aan `has-ink-background-color` — 26 treffers, op `aac-header-nav`, `aac-logo-footer`, `aac-tekstblok-donker`, `aac-header-minimaal`, `aac-prose-lang--donker` en `aac-fase-rij-breed`. `ink-kaart` (#132A4A) staat erbij omdat de donkere kaarten daar op staan. GEMELD, NIET HIER OP TE LOSSEN: `primitieven.css` r179-186 zet dezelfde selectoren opnieuw, laadt ná dit bestand en wint. De ring is daardoor `cycle-teal` (2,54:1) in plaats van `focus--licht` (#0B1F3A, 16,52:1) en `teal-licht` in plaats van `focus--donker`. Dat faalt SC 1.4.11 en hoort in primitieven.css gerepareerd te worden (V4 §7.1 / M2), niet door hier een derde definitie bij te zetten. */ .has-ink-background-color :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible, .has-ink-kaart-background-color :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline-color: var(--wp--custom--focus--donker); } /* SC 2.4.11 Focus Not Obscured — de header is 83px; zodra hij sticky wordt mag hij het gefocuste element niet afdekken. */ :target, :where(h1, h2, h3, [id]) { scroll-margin-top: calc(var(--wp--custom--sectie--pad-header) * 2 + var(--wp--custom--raakvlak--minimum)); } /* Skip-link — SC 2.4.1. Zichtbaar zodra hij focus krijgt. */ .aac-skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40); background-color: var(--wp--preset--color--ink); color: var(--wp--preset--color--wit); border-radius: var(--wp--custom--knop--radius); text-decoration: none; font-size: var(--wp--preset--font-size--small); font-weight: 600; } .aac-skip-link:focus { left: var(--wp--preset--spacing--30); top: var(--wp--preset--spacing--30); outline: var(--wp--custom--focus--breedte) solid var(--wp--custom--focus--donker); outline-offset: var(--wp--custom--focus--offset); } /* ========================================================================= 3. Sectie- en bandmaten De layout is 720/1080 (architectuur §4.1). De secties uit het design zijn op een band van 1200px getekend; die band leeft als eigen token en wordt met align:full + max-width toegepast. THEME-JSON.md §4.1 open beslissing: deze bouw volgt variant (a) — wideSize 1080, band als losse utility. ========================================================================= */ .aac-band > :where(*) { max-width: var(--wp--custom--band); margin-left: auto; margin-right: auto; } .aac-sectie { padding-top: var(--wp--custom--sectie--pad-standaard); padding-bottom: var(--wp--custom--sectie--pad-standaard); } /* Figma-secties sluiten direct op elkaar aan; WordPress' globale blockGap tussen de directe kinderen van main voegde onbedoeld 24px lege stroken toe. */ .wp-site-blocks > main > * + * { margin-block-start: 0; } /* De vier sectiemodifiers. TERUGGEZET 2026-08-11, en de geschiedenis hoort erbij omdat hij zich anders herhaalt. Ze zijn eerder vandaag verwijderd met de motivering "nul treffers in patterns, templates, parts en content" — en dat wás op dat moment juist gemeten. Wat de meting niet kon zien: een andere agent voegde ze in dezelfde ronde toe aan dertien patterns. Beide metingen klopten, de combinatie niet. Netto stonden er daarna 26 secties met een modifier die nergens gedefinieerd was: `--compact` 9×, `--krap` 10×, `--cta` 7×. Erger dan alleen "doet niets": de brug in `primitieven.css` gebruikt `:not([class*="aac-sectie--"])` als zelfvernietigingsknop. Die matchte dus juist NIET meer op deze 26 secties, waardoor ze terugvielen op de basis van 88px — verder van Figma dan vóór de reparatie. Waarden uit de tokens van CH-017, die op hun beurt uit de frames komen: hero 96 · standaard 88 (de basis hierboven) · compact 80 · krap 72 · cta 64. Zie `docs/LESSONS.md` LS-017. */ .aac-sectie--hero { padding-top: var(--wp--custom--sectie--pad-hero); padding-bottom: var(--wp--custom--sectie--pad-hero); } .aac-sectie--compact { padding-top: var(--wp--custom--sectie--pad-compact); padding-bottom: var(--wp--custom--sectie--pad-compact); } .aac-sectie--krap { padding-top: var(--wp--custom--sectie--pad-krap); padding-bottom: var(--wp--custom--sectie--pad-krap); } .aac-sectie--cta { padding-top: var(--wp--custom--sectie--pad-cta); padding-bottom: var(--wp--custom--sectie--pad-cta); } /* ========================================================================= 4. Kaarten, prijs, checklist OPGERUIMD 2026-08-11. Hier stonden zeven regelblokken op klassen die in de markup niet bestaan. Zelf nagemeten: nul treffers over elf live pagina's én nul treffers in `patterns/`, `templates/`, `parts/`, `src/content/nl/` en `src/mu-plugins/`. Verwijderd, met per stuk de reden: - `.aac-kaart--donker` → de donkere kaarten zetten hun vlak via het blokattribuut `has-ink-kaart-background-color`. - `.aac-kaart--highlight`→ de enige uitgelichte kaart in de markup is de prijsrij; die krijgt de teal rand nu in §5, op `.aac-prijsrij__rij--uitgelicht`, met exact dezelfde twee tokens. - `.aac-label`, `.aac-label--zacht` → nergens gebruikt. `--zacht` was tevens de enige consument van de kleur `veldrand` (#C7D1DE). - `.aac-eerlijkheid` → tweede naam voor één component. De markup gebruikt `aac-eerlijkheidsblok-amber`, dat in `componenten.css` r133-138 wél leeft. `webdesign.md` §8 verbiedt twee definities voor één ding; V2 §8 (V2-08.1) wijst deze aan als de te schrappen kopie. Zie het rapport voor de openstaande fout in de overlevende regel. - `.aac-stap__nummer` → de markup gebruikt `aac-procedurerij__badge`, dat al gestyled is in `componenten.css` r115-125. Hernoemen zou opnieuw twee definities opleveren. ========================================================================= */ .aac-kaart { border-radius: var(--wp--custom--kaart--radius); padding: var(--wp--custom--kaart--pad-y) var(--wp--custom--kaart--pad-x); height: 100%; } /* ------------------------------------------------------------------------- KAARTSCHADUW — één regel voor alle kaarttypen BRON, en het is een uitspraak over álle kaarten tegelijk: `docs/specs/frames/NL-overig.md` r44, tabel "Gedeelde componentstijlen": | Kaart (alle typen) | radius 14, schaduw `0 1px 3px rgba(11,31,58,0.08)`, … | Die waarde is exact `--wp--preset--shadow--kaart` in theme.json. Er wordt hier dus geen tweede schaduwwaarde bedacht; er is er één en die staat in het palet. WAAROM DIT EEN EIGEN REGEL IS EN NIET OP `.aac-kaart` BLIJFT. `box-shadow` stond alleen op `.aac-kaart`. Dat dekt 85 kaarten op 16 pagina's — maar het dekt niet de kaarten die de markup anders benoemt. Zelf nagemeten over alle 25 live pagina's: .aac-kaart 85 op 16 pagina's — had al schaduw .aac-fase-rij-breed__fase 8 op 2 pagina's — had geen .aac-eerlijkheidsblok-amber__vlak 4 op 4 pagina's — had geen .aac-faq-lijst__item 3 op 1 pagina — had geen .aac-stat-strip__kaart 3 op 1 pagina — had geen .aac-artikel-lijst > li 1 op 1 pagina — had geen Negentien kaarten zonder schaduw, en — belangrijker — een pagina die intern inconsistent was: op `/scan/` staan `.aac-kaart`-kaarten mét en FAQ-kaarten zónder. Daarom staat de regel op het niveau dat ze allemaal dekt, niet per component. DE SELECTORLIJST IS NIET VERZONNEN. De eerste drie zijn letterlijk dezelfde drie die `componenten.css` r86-91 al als kaart-vangregel gebruikt (radius + padding); dat is de bestaande conventie van dit theme en die wordt hier gevolgd in plaats van een nieuwe bedacht. `.aac-raster > .wp-block-group` dekt `fase-rij-breed__fase` en `stat-strip__kaart` (beide gemeten als direct kind van een `aac-raster`-div); `.aac-raster > li` dekt de kaart-`
  • `'s én de kennisbankkaart, waarvan Figma `41:98` de schaduw expliciet noemt (NL-overig.md r549-550). De laatste twee staan buiten elk raster en moeten daarom apart genoemd worden. TAAKVERDELING TUSSEN DE BESTANDEN, expliciet zodat het niet uiteenloopt: radius en padding van kaarten leven in `componenten.css`, de schaduw in dit bestand. Eén eigenschap op één plek. Dat is niet mooi maar het is wél eenduidig; consolideren mag zodra één agent beide bestanden houdt. ------------------------------------------------------------------------- */ .aac-kaart, .aac-raster > li, .aac-raster > .wp-block-group, .aac-faq-lijst__item, .aac-eerlijkheidsblok-amber__vlak { box-shadow: var(--wp--preset--shadow--kaart); } /* De prijs in de prijstabel. GECORRIGEERDE SELECTOR: hier stond `.aac-prijs`, een klasse die nergens bestaat; de markup gebruikt `aac-prijsrij__prijs` (patterns/prijsrij.php). Figma `3:115`/`3:125`/`3:130`/`3:135`/`3:140`: 18 px bold `#0B1F3A` (docs/specs/frames/NL-kern.md r241-246). `ink` op `off-white` = 15,7:1. De uitgelichte prijs `3:120` staat in Figma in `cycle-teal` (circa 2,5:1); die combinatie is bewust NIET vastgelegd zolang de merkbeslissing openstaat (patterns/prijsrij.php, blok "CONTRAST — BEWUST NIET VASTGELEGD"), dus `.aac-prijsrij__prijs--uitgelicht` krijgt hier geen eigen kleur. */ .aac-prijsrij__prijs { font-variant-numeric: tabular-nums lining-nums; font-weight: 700; color: var(--wp--preset--color--ink); } .aac-roi { font-variant-numeric: tabular-nums lining-nums; } /* USP-checklist — vinkjes in ink, NIET in groen (groen is exclusief voor de CTA) en niet in teal (2,54:1 is te licht). TOEGANKELIJKHEID.md §3.6. */ .aac-checklist { list-style: none; margin: 0; padding: 0; } .aac-checklist > li { display: grid; grid-template-columns: auto 1fr; gap: var(--wp--custom--gap--logo); margin-block-end: var(--wp--preset--spacing--30); } .aac-checklist > li::before { content: "\2713"; color: var(--wp--preset--color--ink); font-weight: 700; line-height: var(--wp--custom--regelhoogte--body); } /* ========================================================================= 5. Tabellen — prijsrij, vergelijkingstabel, datatabel NIEUW 2026-08-11. Alle drie de ``-elementen van de site stonden volledig ongestyled: nul selectors in style.css, primitieven.css, componenten.css en de blok-stylesheets, en geen `styles.blocks.core/table` in theme.json. De browserstandaard gold dus onverkort — `border-collapse: separate`, `border-spacing: 2px`, géén celpadding — waardoor de inktblauwe koprijcellen als losse blokjes met 2px kier stonden en alle tekst tegen de celrand plakte. De drie patterns melden dit gat zelf in hun docblock (`prijsrij.php` "AFHANKELIJK VAN CSS die dit pattern zelf niet levert", `vergelijkingstabel.php` "Nog niet geschreven", `datatabel.php` idem). HERKOMST VAN ELKE WAARDE HIERONDER — alles komt uit een frame-extractie of uit een bestaand theme.json-token. Waar de bron zwijgt, staat dat erbij en is er niets ingevuld. NOTATIE IN DE FRAMES: "padding 120/80" is HORIZONTAAL/VERTICAAL. Zelf geverifieerd op drie onafhankelijke plaatsen: sectiepadding 120/80 op een kader van 1440 geeft de inhoudsband van 1200 (NL-juridisch-states.md r80); knop "padding 26/14" staat in theme.json als `knop.padding: 0.875rem 1.625rem` = 14px 26px; `vraag-vak` "padding 22/12" staat in componenten.css als `0.75rem 1.375rem` = 12px 22px. ========================================================================= */ /* 5a. Gedeelde tabelvorm. `table-layout: fixed` is nodig omdat de kolomverhoudingen hieronder anders door de inhoud worden overruled; de patterns schrijven expliciet voor dat de verhouding in CSS hoort en niet in de markup (prijsrij.php r33, vergelijkingstabel.php r27-28). `border-collapse: collapse` staat letterlijk in de gevraagde lijst van vergelijkingstabel.php r45 en haalt de 2px UA-kier weg. `text-align: start`: de UA-default `center` op `
    ` is een browser- artefact, net als de gele `mark` hierboven. Geen enkele frame-extractie noteert gecentreerde tabeltekst; alle cellen zijn links uitgelijnde auto-layout-tekstnodes. */ /* De prijstabel is in Figma GEEN tabel met dichte rijen maar zes losse kaarten. Frame `3:89` (NL-kern.md r15-17): "Zes brede kaarten van 1200 px (bg #F7F8FA), onder elkaar", sectiegap **26**, en de kaartstijl uit r22 geeft **radius 14**. Dat is met een echte te halen, maar niet met `border-collapse: collapse` — die vouwt de randen samen en negeert `border-radius` op cellen. Vandaar `separate` met verticale `border-spacing`: de rijen krijgen lucht ertussen en de buitenste cellen kunnen afronden, waardoor elke als kaart oogt. De horizontale spacing blijft 0, anders ontstaat er een goot tussen de kolommen die de bron niet tekent. Waarom tóch een
    en geen zes losse blokken: het is tabulaire data (pakket · prijs · omschrijving) en `prijsrij.php` levert een voor SC 1.3.1. De semantiek blijft dus staan; alleen de opmaak volgt Figma. */ .aac-prijsrij__tabel { inline-size: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0 var(--wp--custom--gap--rij); } /* De koprij bestaat niet in Figma. Hem weghalen zou de tabel zijn kolomkoppen ontnemen (SC 1.3.1), dus hij blijft in de DOM en verdwijnt alleen visueel — dezelfde techniek die core voor `screen-reader-text` gebruikt. Zo klopt het beeld met het frame én blijft de tabel leesbaar voor wie hem niet ziet. */ .aac-prijsrij__tabel thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Radius op de buitenste cellen maakt van de rij een kaart. Op een zelf werkt `border-radius` niet — ook niet bij `separate`. */ .aac-prijsrij__tabel tbody :where(th, td):first-child { border-start-start-radius: var(--wp--custom--kaart--radius); border-end-start-radius: var(--wp--custom--kaart--radius); } .aac-prijsrij__tabel tbody :where(th, td):last-child { border-start-end-radius: var(--wp--custom--kaart--radius); border-end-end-radius: var(--wp--custom--kaart--radius); } .aac-vergelijkingstabel__tabel, .aac-datatabel__tabel { inline-size: 100%; table-layout: fixed; border-collapse: collapse; } /* Figma `4:90` tekent vijf losse banden met de bestaande rijgap van 26px. Een bovenrand op alleen de vier vervolgrijen maakt die ruimte zonder de ongewenste buitenruimte die `border-spacing` vóór en na de tabel toevoegt. */ .aac-vergelijkingstabel__tabel tbody tr > * { border-block-start: var(--wp--custom--gap--rij) solid var(--wp--preset--color--wit); } .aac-prijsrij__tabel :where(th, td), .aac-vergelijkingstabel__tabel :where(th, td), .aac-datatabel__tabel :where(th, td) { text-align: start; overflow-wrap: break-word; } /* 5b. Vergelijkingstabel — Figma `4:90` (docs/specs/frames/NL-kern.md r335-339). Vier cellen van 300 · 320 · 290 · 290 px op een rij van 1200 px, dus 25,00% / 26,66% / 24,17% / 24,17% (sluit op 100,00%). Percentages en geen px, exact zoals vergelijkingstabel.php r27-28 voorschrijft. Celpadding 16/13 uit dezelfde regel: 16 horizontaal = `spacing--30` (1rem) exact; 13 verticaal bestaat niet op de spacingschaal en wordt genormaliseerd naar de dichtstbijzijnde stap `spacing--20` (12px), conform webdesign.md §2 ("Spacing alleen op de vastgestelde schaal. Geen one-off maten erbuiten"). Geen randen en geen scheidingslijnen: dat is de bron letterlijk ("geen gap tussen cellen, geen zichtbare scheidingslijnen") en volgt vanzelf uit `border-collapse: collapse` zonder border-declaraties. De koprij (`ink`/wit) en de teal n8n-kolom (`teal-vlak`/`ink`) komen al uit presetklassen in de markup; die worden hier bewust niet herhaald. */ .aac-vergelijkingstabel__tabel :where(th, td) { box-sizing: border-box; padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30); } .aac-vergelijkingstabel__tabel :where(th, td):nth-child(1) { inline-size: 25.00%; } .aac-vergelijkingstabel__tabel :where(th, td):nth-child(2) { inline-size: 26.66%; } .aac-vergelijkingstabel__tabel :where(th, td):nth-child(3) { inline-size: 24.17%; } .aac-vergelijkingstabel__tabel :where(th, td):nth-child(4) { inline-size: 24.17%; } /* 5c. Datatabel — Figma `32:24` (NL-juridisch-states.md r56-79). Vier kolommen van 240 · 300 · 340 · 240 px binnen een kaart van 1200 px, dus 21,43% / 26,78% / 30,36% / 21,43% (sluit op 100,00%). Let op: V2-css-dekking.md §8 (V2-02d) meldt "BRON ONTBREEKT" voor deze kolomverdeling. Dat klopt niet — de maten staan wél in de frame-extractie (NL-juridisch-states.md r79: "De datatabel is 4-koloms binnen de kaart (240 / 300 / 340 / 240 px, gap 20px)") en worden herhaald in het docblock van datatabel.php r56-57. Gemeld in het rapport. Rijvulling `off-white` (#F7F8FA) op een witte sectie: gevraagd in datatabel.php r73 en bevestigd door de extractie ("sectie `#ffffff`, rijen `#f7f8fa`", r32). Tekst `tekst` #334155 op #F7F8FA = 9,3:1. Kolomgoot: Figma zet 20px. 20px staat niet op de spacingschaal; de dichtstbijzijnde stap is 24px, en dat is tevens `gap.kaarten`, de goot die dit theme overal tussen kolommen gebruikt. Halve goot per cel = 12px, plus 12px aan de buitenrand — wat toevallig ook precies de ruimte is die de extractie overlaat (1200 kaartbreedte − 1180 kolominhoud = 10px per zijde). Verticaal `spacing--20`, gelijk aan de vergelijkingstabel; de extractie geeft voor deze tabel geen eigen celpadding. */ .aac-datatabel__tabel :where(th, td) { padding-block: var(--wp--preset--spacing--20); padding-inline: calc(var(--wp--custom--gap--kaarten) / 2); } .aac-datatabel__tabel :where(th, td):nth-child(1) { inline-size: 21.43%; } .aac-datatabel__tabel :where(th, td):nth-child(2) { inline-size: 26.78%; } .aac-datatabel__tabel :where(th, td):nth-child(3) { inline-size: 30.36%; } .aac-datatabel__tabel :where(th, td):nth-child(4) { inline-size: 21.43%; } .aac-datatabel__rij { background-color: var(--wp--preset--color--off-white); } /* 5d. Prijsrij — Figma `3:110` (NL-kern.md r236-246). Zes brede kaarten van 1200 px met binnenin één rij van drie kolommen, verticaal gecentreerd, gap 24: naam 360 · prijs 190 · omschrijving 540. Met buitenpadding 28px en twee goten van 24px gebruikt de rij 1194px; de resterende 6px wordt gelijk over de drie celtracks verdeeld. De border-boxtracks zijn daardoor 402 / 216 / 582px = 33,5% / 18% / 48,5%. Na aftrek van padding blijft 362 / 192 / 542px inhoudsruimte over, binnen 2px afronding van de Figma-kolommen 360 / 190 / 540. WAAROM PERCENTAGES EN NIET DE PX-TOKENS `kolom.prijs-*`. Die tokens (360/190/ 540px) blijven de bron van deze verhouding, maar als vaste px in een tabel die door `.aac-tabel-wrap` al bij 640px gaat scrollen, drukken ze de omschrijvingskolom op smalle schermen naar circa 90px. De verhouding is wat het ontwerp vastlegt; NL-kern.md r519 noemt de vaste px zelf al een knelpunt ("Prijstabel-kolommen zijn hard … een langere prijsnotatie past er niet meer bij"). Kaartpadding: `kaart.pad-y` (26px) verticaal en `kaart.pad-x` (28px) aan de buitenranden — de kaartstijl uit NL-kern.md r22 ("radius 14, padding 28/26"). Daartussen een halve `gap.kaarten` per cel = de 24px goot uit de bron. Controle: 28 + 360 + 12 + 12 + 190 + 12 + 12 + 540 + 28 = 1194 op een kaart van 1200. */ .aac-prijsrij__tabel :where(th, td) { box-sizing: border-box; padding-block: var(--wp--custom--kaart--pad-y); padding-inline: calc(var(--wp--custom--gap--kaarten) / 2); vertical-align: middle; } .aac-prijsrij__tabel :where(th, td):first-child { padding-inline-start: var(--wp--custom--kaart--pad-x); } .aac-prijsrij__tabel :where(th, td):last-child { padding-inline-end: var(--wp--custom--kaart--pad-x); } .aac-prijsrij__kolom-pakket { inline-size: 33.50%; } .aac-prijsrij__kolom-prijs { inline-size: 18.00%; } .aac-prijsrij__kolom-omschrijving { inline-size: 48.50%; } /* Rijvulling. Figma `3:110`: de sectie is `#FFFFFF` en de zes rijen zijn kaarten met vlak `#F7F8FA` (NL-kern.md r237) — precies dezelfde verhouding als bij de datatabel hierboven. De markup zet dit niet zelf; zonder deze regel staan de rijen wit op wit en is er geen kaartvorm. `tekst` #334155 op #F7F8FA = 9,3:1, `ink` #0B1F3A = 15,7:1. NIET OVERGENOMEN, GEMELD: de kaartradius van 14px. Een `border-radius` op een `` doet niets zolang de tabel `border-collapse: collapse` heeft, en dat is precies wat vergelijkingstabel.php als gewenste vorm vraagt. */ .aac-prijsrij__rij { background-color: var(--wp--preset--color--off-white); } /* De uitgelichte rij — Figma `3:117`: "rand 2 px #12B5B0". Tokens: `kaart.rand-highlight` (2px) en de kleur `cycle-teal`; exact dezelfde twee waarden die de verwijderde `.aac-kaart--highlight` gebruikte. Met `border-collapse: collapse` moet de rand op de cellen staan, niet op de ``: een ``-border wordt door de collapse-regels van elke cel overschreven. SC 1.4.1: de rand is versterking, niet de enige betekenisdrager — de rij draagt het tekstlabel "Aanbevolen" (`.aac-prijsrij__markering`). */ .aac-prijsrij__rij--uitgelicht > :where(th, td) { border-block: var(--wp--custom--kaart--rand-highlight) solid var(--wp--preset--color--cycle-teal); } .aac-prijsrij__rij--uitgelicht > :where(th, td):first-child { border-inline-start: var(--wp--custom--kaart--rand-highlight) solid var(--wp--preset--color--cycle-teal); } .aac-prijsrij__rij--uitgelicht > :where(th, td):last-child { border-inline-end: var(--wp--custom--kaart--rand-highlight) solid var(--wp--preset--color--cycle-teal); } /* CH-045: Figma definieert alleen de desktopprijsweergave. Onder 900px blijft de tabelsemantiek intact, maar worden de zes rijen visueel kaarten zodat pakket, prijs en inhoud zonder horizontale swipe samen leesbaar zijn. */ @media (max-width: 899px) { .aac-prijsrij .aac-tabel-wrap { overflow: visible; } .aac-prijsrij .aac-tabel-wrap > .aac-prijsrij__tabel { display: block; inline-size: 100%; min-inline-size: 0; border-spacing: 0; } .aac-prijsrij__tabel colgroup { display: none; } .aac-prijsrij__tabel tbody { display: grid; inline-size: 100%; min-inline-size: 0; gap: var(--wp--custom--gap--rij); } .aac-prijsrij__rij { display: grid; box-sizing: border-box; inline-size: 100%; min-inline-size: 0; gap: var(--wp--preset--spacing--20); padding: var(--wp--custom--kaart--pad-y) var(--wp--custom--kaart--pad-x); border-radius: var(--wp--custom--kaart--radius); } .aac-prijsrij__tabel .aac-prijsrij__rij > :where(th, td) { display: block; inline-size: auto; padding: 0; border: 0; border-radius: 0; } .aac-prijsrij__rij--uitgelicht { border: var(--wp--custom--kaart--rand-highlight) solid var(--wp--preset--color--cycle-teal); } .aac-prijsrij__tabel td::before { display: block; margin-block-end: var(--wp--preset--spacing--10); color: var(--wp--preset--color--grijs); font-size: var(--wp--preset--font-size--micro); font-weight: 600; line-height: 1.4; content: attr(data-label); } } /* VERWIJDERD 2026-08-11 uit dit blok: `.aac-veld`, `.aac-veld > label`, `.aac-veld > input/select/textarea` (+ `[aria-invalid]` en `:focus-visible`), `.aac-veld__fout` en `.aac-honeypot`. Alle zes komen op geen enkele live pagina voor en in geen enkel pattern, template, part, `src/content/nl/`-bestand of mu-plugin (zelf nagemeten, nul treffers). Het enige formulier van de site is het blok `aac/scan-form`, dat `aac-scan__*` gebruikt en zijn eigen stylesheet meebrengt. Die klassen hier overnemen zou het theme de opmaak van een blok laten dragen, precies wat webdesign.md §1 verbiedt. TWEE DINGEN DIE HIERMEE VERDWIJNEN EN GEMELD ZIJN: 1. `.aac-veld > input` verwees naar `--wp--preset--font-size--medium`, geen theme-slug maar een core-default die alleen bestaat doordat WordPress de default-origin niet verwijdert. Een off-token verwijzing die volgens webdesign.md §2 niet had mogen bestaan — nu weg. 2. De veldtokens (`veld.hoogte`, `veld.radius`, `veld.randbreedte`) en de kleuren `rand-veld` en `veldrand` hebben hiermee nul consumenten in het theme. Ze horen thuis bij `.aac-artikel-lijst__zoek` in componenten.css (V2-07) en bij het omzetten van de blok-CSS naar tokens (V4 M9). */ /* ========================================================================= 6. Header, navigatie, footer GECORRIGEERDE SELECTOREN 2026-08-11. Dit hele blok stond op `.aac-header` en `.aac-footer`. Geen van beide klassen bestaat. Zelf nagemeten in de geserveerde HTML van elf pagina's:
    (10×)
    (1×, /scan/)
    ` binnen een echte `
    ` (patterns/prijsrij.php). `display: grid` op een `` haalt die rij uit de tabel-layout: de kolommen van de ``-rijen lijnen dan niet meer uit met de ``-rij (die geen klasse draagt en `table-row` blijft), en in Chrome en Firefox verdwijnt de impliciete `row`-rol voor hulptechnologie — precies de SC 1.3.1-relatie die het pattern met een echte `
    ` wilde borgen (prijsrij.php, blok "SEMANTIEK"). V2-css-dekking.md §8 (V2-01) beschrijft beide wegen en beveelt weg (a) aan: kolommaten naar de tabel, grid weg. Dat is nu gedaan — de verhouding 360/190/540 staat in §5d op `.aac-prijsrij__tabel`. Weg (b) — de grid op de rij — staat daar letterlijk als "Niet aanbevolen". Responsief gedrag: de tabel schaalt met percentages mee tot elke breedte en scrollt onder 640px in `.aac-tabel-wrap` (primitieven.css r144-149), dat daarvoor `tabindex="0"` en `role="region"` heeft. Er is dus geen breekpunt op 782px meer nodig; de mediaquery is met de grid mee verdwenen. */ /* Kaarten met vaste designhoogtes mogen meegroeien bij aangepaste tekstafstand (SC 1.4.12) en 200% zoom (SC 1.4.4): nergens height, altijd min-height. */ .aac-kaart { block-size: auto; min-block-size: 0; } /* CH-047: één bestaande titel-link dekt de volledige querykaart. De pseudo- link voegt geen tweede interactief element toe; `:has()` verplaatst de zichtbare focusring naar de kaart. */ .aac-kaarten--klikbaar > li { position: relative; transition: box-shadow 160ms ease, transform 160ms ease; } .aac-kaarten--klikbaar > li .wp-block-post-title a::after { position: absolute; inset: 0; border-radius: var(--wp--custom--kaart--radius); content: ""; } .aac-kaarten--klikbaar > li .wp-block-post-title::after { margin-inline-start: var(--wp--preset--spacing--10); color: var(--wp--preset--color--cycle-teal); content: "\2192"; } .aac-kaarten--klikbaar > li:is(:hover, :has(a:focus-visible)) { box-shadow: var(--wp--preset--shadow--kaart); transform: translateY(-2px); } .aac-kaarten--klikbaar > li:has(a:focus-visible) { outline: var(--wp--custom--focus--breedte) solid var(--wp--preset--color--cycle-teal); outline-offset: var(--wp--custom--focus--offset); } .aac-kaarten--klikbaar > li .wp-block-post-title a:focus-visible { outline: 0; } @media (prefers-reduced-motion: reduce) { .aac-kaarten--klikbaar > li { transition: none; } .aac-kaarten--klikbaar > li:is(:hover, :has(a:focus-visible)) { transform: none; } } /* Geen horizontale overloop op smalle schermen. */ :where(.aac-sectie, .aac-band) { overflow-wrap: break-word; } /* Cookievrije voorkeurenstate — Figma `25:3`, aangepast aan de gemeten werkelijkheid: geen toestemmingsknoppen zolang er niets te weigeren is. */ .aac-cookie-status { inline-size: min(var(--wp--custom--cookie--breedte), calc(100% - var(--wp--preset--spacing--40))); max-block-size: calc(100% - var(--wp--preset--spacing--40)); margin: auto; padding: 0; border: 0; border-radius: var(--wp--custom--kaart--radius); background: transparent; color: var(--wp--preset--color--tekst); } .aac-cookie-status::backdrop { background: color-mix(in srgb, var(--wp--preset--color--ink) 72%, transparent); } .aac-cookie-status__kaart { display: grid; gap: var(--wp--custom--gap--rij); padding: var(--wp--custom--kaart--pad-y) var(--wp--custom--kaart--pad-x); border-radius: var(--wp--custom--kaart--radius); background: var(--wp--preset--color--wit); box-shadow: var(--wp--preset--shadow--toestemming); } .aac-cookie-status__kop, .aac-cookie-status__acties { display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--30); } .aac-cookie-status__kop > * { margin: 0; } .aac-cookie-status__sluiten { display: grid; place-items: center; min-inline-size: var(--wp--custom--raakvlak--minimum); min-block-size: var(--wp--custom--raakvlak--minimum); padding: 0; border: 0; background: transparent; color: var(--wp--preset--color--ink); font: inherit; cursor: pointer; } .aac-cookie-status__categorieen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--wp--preset--spacing--20); margin: 0; padding: 0; list-style: none; } .aac-cookie-status__categorieen li { padding: var(--wp--custom--vraag-vak--padding); border-radius: var(--wp--custom--knop--radius); background: var(--wp--preset--color--off-white); } .aac-cookie-status__categorieen span { display: block; color: var(--wp--preset--color--grijs); font-size: var(--wp--preset--font-size--micro); } html:has(.aac-cookie-status[open]) { overflow: hidden; } @media (max-width: 48rem) { .aac-cookie-status__categorieen { grid-template-columns: repeat(2, minmax(0, 1fr)); } .aac-cookie-status__acties { align-items: flex-start; flex-direction: column; } } /* ========================================================================= 9. prefers-reduced-motion — verplicht uit, geen afgezwakte variant. Geldt ook voor de hover-lift van de CTA en elk toekomstig scroll-effect. ========================================================================= */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========================================================================= 10. forced-colors — knoppen blijven herkenbaar OPGERUIMD 2026-08-11. Beide regels die hier stonden waren dood: - `.wp-block-button.is-style-aac-cta` — de blokstijl `aac-cta` op `core/button` is op 2026-08-10 verwijderd (CH-010); `functions.php` r186 noteert dat zelf. `register_block_style` roept de naam nergens meer aan en er staat geen `core/button` in de markup. Dezelfde dode selector stond ook in §9 (prefers-reduced-motion) en is daar mee verwijderd. - `.aac-veld > input/select/textarea` — zie de noot in §5; de klasse bestaat niet. Wat hier in de plaats komt is de klasse die de site wél gebruikt: `.aac-knop` (primitieven.css r154-164). In forced-colors mode wordt `background-color` door het systeempalet overschreven, dus een knop zonder rand verliest zijn knopvorm volledig. `ButtonText` is de systeemkleur die daarvoor bestaat. ========================================================================= */ @media (forced-colors: active) { .aac-knop { border: 1px solid ButtonText; } } /* CH-113 responsive content visuals */ /* CH-254: niet breder dan een leesbare kolom, gecentreerd */ .aac-inhoudsvisual { max-inline-size: 720px; margin-inline: auto; } .aac-inhoudsvisual picture, .aac-inhoudsvisual img { display: block; inline-size: 100%; } .aac-inhoudsvisual img { block-size: auto; aspect-ratio: 18 / 11; border-radius: 24px; } .aac-inhoudsvisual figcaption { margin-block-start: 0.75rem; color: var(--wp--preset--color--grijs); line-height: 1.55; } @media (max-width: 599px) { .aac-inhoudsvisual img { aspect-ratio: 39 / 56; } }