/* Theme Name: Fun Crea Theme URI: https://funcrea.nl Template: csbn-base Author: CSBN IT Consultancy & Automatisering Author URI: https://csbn.nl Description: Child theme voor funcrea.nl op basis van CSBN Base. Huisstijl volgt ontwerp "Licht & speels" (Optie 2); darkmode en categorietegels leunen op Optie 3 (Donker & modern). Design-tokens staan in theme.json, de donkere set in styles/dark.json. Version: 0.7.2 Requires at least: 6.6 Tested up to: 7.0 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: funcrea-child */ /* ========================================================================== Fun Crea — klantspecifieke component-CSS ========================================================================== Bron: docs/merk/visueel.md §5 (componenteninventaris) en docs/merk/tokens.md. Alleen wat je niet als design-token kunt uitdrukken hoort hier; kleuren, maten, radii, schaduwen en tijden komen uit theme.json / styles/dark.json. Er staat met opzet geen enkele hex in dit bestand, op de zes stops van de regenboogbalk na (zie §1). De donkere modus werkt door dezelfde negen `--wp--preset--color--*`-variabelen te herdefiniëren; een losse kleurwaarde zou daar blijven staan waar hij in de lichte modus stond. Drie kleurregels lopen door het hele bestand: - P1: tekst op een `primary`-vlak is `base`, nooit `primary-contrast` (5,24:1 in licht, 7,93:1 in donker; met wit zakt donker naar 2,30:1). - P2: tekst op een `secondary`-vlak is `primary-contrast`. - Een `accent`-VLAK volgt P1 niet. De toolkit zegt daar ook `base`, maar `base` op `accent` is in de lichte modus 1,36:1 — twee lichte kleuren op elkaar. Op een accent-vlak hoort in licht `contrast` (9,33:1) en in donker `base` (12,63:1). Nagerekend door child-tokens. Dit bestand gebruikt `accent` daarom nergens als vlak, alleen als tekst op een donkere band, waar het in beide modi boven de 9:1 blijft (regel A1). KLASSENAMEN — `fc-`-prefix, maar niet overal Elke klasse die als eerste (dus ongebonden) compound in een selector staat heeft een `fc-`-prefix: `.fc-card`, `.fc-price`, `.fc-cart`, `nav.fc-main`. Dat is geen kosmetiek. WooCommerce zet zelf `.price` op zijn prijzen, `.cart` op het toevoegformulier en `.qty` op het aantalveld; zonder prefix zou dit bestand die markup meestylen én andersom. Ook `.card` is een van de meest voorkomende klassenamen in plugin- en patternmarkup. Wat géén prefix heeft, en waarom dat veilig is: - Klassen die alleen als afstammeling voorkomen (`.body`, `.tag`, `.ph`, `.buy`, `.meta`-inhoud, …). Ze matchen niets zonder een geprefixte voorouder: `.fc-card .body` kan geen Woo-markup raken. - Modifiers die altijd in dezelfde compound naast een geprefixte klasse staan: `.big` (`.fc-btn.big`), `.left`, `.c1`–`.c6` (`.fc-cat.c1`), `.u1`–`.u4`, `.is-uitverkocht`. Zet je een nieuwe regel bij: staat de klasse vooraan, dan krijgt hij `fc-`. Inhoud 1. Componenttokens en modusafhankelijke schakelaars 2. Focus en beweging (geldt voor alles hieronder) 2b. Sitecontainer en sectieritme 3. Aankondigingsbalk 4. Regenboogbalk 5. Header, logo, navigatie, gereedschap 5b. Mobiel menu 6. Hero 7. Knoppen — alle varianten en statussen 8. USP-band en USP-kaarten 9. Sectiekop 10. Categorietegels 11. Productkaart 12. Productgrid 13. Prijsweergave 14. Formuliervelden 15. Pills en filters 16. Paginering 17. Subhero en kruimelpad 18. Story-band en highlight 19. Braderie-agenda 20. Nieuwsbriefblok 21. Footer 22. Productdetail 23. Winkelwagen 24. Meldingen (WooCommerce) 25. Evenementpagina 26. Windows-contrastmodus (forced-colors) ========================================================================== */ /* ========================================================================== 1. Componenttokens en modusafhankelijke schakelaars ========================================================================== */ :root { /* -------------------------------------------------------------------- Regenboogbalk — OPENSTAANDE MERKBESLISSING (FUNC-24) -------------------------------------------------------------------- Deze zes kleuren komen uit de ontwerpbron maar niet uit het logo: het logo is terracotta/salie/beige zonder enig rood. Zie visueel.md §7 voor de drie opties. Ze staan hier als losse stops bij elkaar zodat de beslissing straks één plek raakt in plaats van het halve bestand. Dit zijn de enige hardcoded kleuren in dit bestand; de balk is puur decoratief (aria-hidden) en heeft dus geen contrasteis, en hij is in beide modi identiek — daarom mág het hier. -------------------------------------------------------------------- */ --funcrea--rainbow--1: #e6392e; --funcrea--rainbow--2: #ff8c42; --funcrea--rainbow--3: #ffd166; --funcrea--rainbow--4: #8fd3c4; --funcrea--rainbow--5: #8ec8e8; --funcrea--rainbow--6: #c9b3e6; /* -------------------------------------------------------------------- Donkere waarden van de `settings.custom`-tokens -------------------------------------------------------------------- Dit is het tokendeel van dit bestand, geen componentstyling — het staat hier omdat het nergens anders kán. `inc/darkmode.php` van de parent wisselt alleen de negen `--wp--preset--color--*` om, en theme.json kent geen modusafhankelijke `custom`-waarden. Zonder deze regels blijft in de donkere modus de footer crème, blijven de categorietegels pastel en blijft de header een lichte sluier — met bijna-witte tekst erop. Doorgegeven door child-tokens; waarden letterlijk uit tokens.md §3. De hexen staan hier één keer bij elkaar; de twee dark-blokken hieronder bevatten alleen bedrading. Dat scheelt de waarden dubbel onderhouden en houdt ze vindbaar met één grep. Vervalt zodra de tokens per modus uit een gegenereerde stylesheet komen — dan kan dit blok in zijn geheel weg. Zie het eindrapport. -------------------------------------------------------------------- */ /* Dark palette dichter bij preview Optie 3 (voorbeeld2): paars-zwart surfaces, helderder rood, zachte muted. Tile-tokens blijven als accentbron; cats in dark gebruiken base-2 + accentstreep. */ --funcrea--dark--surface-warm: #241e2c; --funcrea--dark--primary-hover: #ff6f61; --funcrea--dark--primary-decor: #ff4d3d; --funcrea--dark--tile-peach: #2c2634; --funcrea--dark--tile-mint: #1d1822; --funcrea--dark--tile-sky: #241e2c; --funcrea--dark--tile-lavender: #2c2634; --funcrea--dark--tile-sun: #241e2c; --funcrea--dark--tile-pink: #2c2634; --funcrea--dark--gradient-warm: linear-gradient(135deg, #3a1512, #241e2c); --funcrea--dark--header-bg: rgba(20, 16, 24, 0.82); /* In de donkere modus draagt de rand de vlakscheiding en is de schaduw bijna onzichtbaar — precies omgekeerd aan de lichte modus. */ --funcrea--dark--shadow-card: 0 18px 40px rgba(0, 0, 0, 0.45); --funcrea--dark--shadow-button: 0 10px 26px rgba(255, 77, 61, 0.35); /* -------------------------------------------------------------------- Modusafhankelijke schakelaars -------------------------------------------------------------------- In de lichte modus dragen de schaduwen de vlakscheiding; in de donkere modus is dat omgekeerd en doet een 1px rand het werk (afwijking 11). Dat als variabele schrijven scheelt elke component twee keer opnemen in het donkere blok — en houdt de donkere modus daarmee eerlijk: er is één plek waar hij van de lichte afwijkt. -------------------------------------------------------------------- */ /* Volle-breedtebanden op `secondary` (aankondiging, USP, nieuwsbrief). */ --funcrea--band-border: transparent; /* Verhoogde vlakken op `base-2` (kaart, panel, widget, totalen). */ --funcrea--surface-border: transparent; /* Hero-kicker: `primary` op wit in licht; in donker is `accent` de rustigere keuze en daar mág accent tekst zijn (regel A1, 12,63:1). */ --funcrea--kicker-color: var(--wp--preset--color--primary); } /* De twee blokken uit het darkmode-contract. Ze zijn identiek en dat moet ook: het eerste dekt de bezoeker zonder JS die op een donker OS zit, het tweede de expliciete keuze. Beide selectors zijn specifieker dan de `:root` van global styles, dus het attribuut wint in béide richtingen — ongeacht in welke volgorde de stylesheets binnenkomen. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --funcrea--band-border: var(--wp--preset--color--border); --funcrea--surface-border: var(--wp--preset--color--border); --funcrea--kicker-color: var(--wp--preset--color--accent); --wp--custom--surface--warm: var(--funcrea--dark--surface-warm); --wp--custom--primary--hover: var(--funcrea--dark--primary-hover); --wp--custom--primary--decor: var(--funcrea--dark--primary-decor); --wp--custom--tile--peach: var(--funcrea--dark--tile-peach); --wp--custom--tile--mint: var(--funcrea--dark--tile-mint); --wp--custom--tile--sky: var(--funcrea--dark--tile-sky); --wp--custom--tile--lavender: var(--funcrea--dark--tile-lavender); --wp--custom--tile--sun: var(--funcrea--dark--tile-sun); --wp--custom--tile--pink: var(--funcrea--dark--tile-pink); --wp--custom--gradient--warm: var(--funcrea--dark--gradient-warm); --wp--custom--header--bg: var(--funcrea--dark--header-bg); --wp--custom--shadow--card: var(--funcrea--dark--shadow-card); --wp--custom--shadow--button: var(--funcrea--dark--shadow-button); } } :root[data-theme="dark"] { --funcrea--band-border: var(--wp--preset--color--border); --funcrea--surface-border: var(--wp--preset--color--border); --funcrea--kicker-color: var(--wp--preset--color--accent); --wp--custom--surface--warm: var(--funcrea--dark--surface-warm); --wp--custom--primary--hover: var(--funcrea--dark--primary-hover); --wp--custom--primary--decor: var(--funcrea--dark--primary-decor); --wp--custom--tile--peach: var(--funcrea--dark--tile-peach); --wp--custom--tile--mint: var(--funcrea--dark--tile-mint); --wp--custom--tile--sky: var(--funcrea--dark--tile-sky); --wp--custom--tile--lavender: var(--funcrea--dark--tile-lavender); --wp--custom--tile--sun: var(--funcrea--dark--tile-sun); --wp--custom--tile--pink: var(--funcrea--dark--tile-pink); --wp--custom--gradient--warm: var(--funcrea--dark--gradient-warm); --wp--custom--header--bg: var(--funcrea--dark--header-bg); --wp--custom--shadow--card: var(--funcrea--dark--shadow-card); --wp--custom--shadow--button: var(--funcrea--dark--shadow-button); } /* Alleen de schakelaars terugzetten. De `custom`-tokens hoeven hier niet hersteld: geen van beide dark-blokken raakt een `[data-theme="light"]`-root, dus daar gelden vanzelf de waarden uit theme.json. */ :root[data-theme="light"] { --funcrea--band-border: transparent; --funcrea--surface-border: transparent; --funcrea--kicker-color: var(--wp--preset--color--primary); } /* ========================================================================== 2. Focus en beweging ========================================================================== Regel F1: focus is altijd een 3px outline in `contrast` met 2px offset. `contrast` is de enige kleur die in beide paletten tegen elk vlak boven de 15:1 blijft, dus één regel volstaat voor de hele site. Nergens in dit bestand staat `outline: none`. Dat is bewust: browsers zonder `:focus-visible` vallen daardoor terug op hun eigen focusring in plaats van op niets. De bron deed dit wél fout op formuliervelden (afwijking 7). ========================================================================== */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--wp--preset--color--contrast); outline-offset: 2px; } /* Uitzondering op F1, en een die niet in visueel.md staat: in de lichte modus zijn `contrast` en `secondary` exact dezelfde hex. Een focusring op een donkere band is daar dus 1,00:1 — volledig onzichtbaar. Op die banden neemt `primary-contrast` het over (13,46:1 licht, 14,95:1 donker). Dit raakt vooral het nieuwsbriefformulier: het veld is wit, maar de ring valt door de 2px offset op de band eronder. */ .fc-announce a:focus-visible, .fc-announce button:focus-visible, .fc-trust a:focus-visible, .fc-trust button:focus-visible, .fc-news a:focus-visible, .fc-news button:focus-visible, .fc-news input:focus-visible { outline-color: var(--wp--preset--color--primary-contrast); } /* Beweging is versiering, geen betekenis: onder `reduce` valt alles weg. De bron heeft deze guard niet (afwijking 9). Dit stond tot 0.4.9 als een opsomming van twintig selectors, en dat is de verkeerde vorm voor deze regel: elke component die later bijkomt valt er buiten, en niemand merkt dat. Een universele regel kan niets vergeten. Waarom een duur van 0,01ms en niet `none`: een overgang die nul duurt vuurt geen `transitionend`, en JavaScript dat daarop wacht blijft dan hangen. Deze waarde is korter dan een beeldverversing — je ziet niets — maar de gebeurtenis komt wel. `!important` is hier nodig en geen luiheid: de regel moet elke componentdeclaratie verslaan, ook die van de parent en van WooCommerce. Eén bewust verschil met de oude opsomming: die zette ook `transform: none` op hover, waardoor kaarten en knoppen onder `reduce` helemaal niet meer optilden. Nu tillen ze wel op, maar zonder overgang — een directe standswijziging, geen beweging. Dat is wat de richtlijn vraagt, en het houdt de hover-terugkoppeling in stand voor wie hem nodig heeft. */ @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; } } /* ========================================================================== 2b. Sitecontainer en sectieritme ========================================================================== Staat niet in visueel.md §5: dat is een componenteninventaris, en dit is layout. Toch hoort het hier, want zonder deze twee regels hangen `.wrap` en de secties uit de ontwerpbron in de lucht — §5 verwijst er wel naar (`.fc-trust .fc-wrap`, `.fc-subhero .fc-wrap`) maar definieert ze nergens. Waarom niet `.csbn-container` van de parent: die rekent met `--wp--style--global--wide-size` (1136px) en `spacing 30` als binnenruimte. Het ontwerp wil 1180px inclusief 22px padding (afwijking 36) — dus een eigen container, en de parent-container blijft voor wat de parent zelf rendert. */ .fc-wrap { box-sizing: border-box; width: 100%; max-width: 1180px; margin-inline: auto; /* spacing 40 = 1,375rem = 22px. */ padding-inline: var(--wp--preset--spacing--40); } /* Verticaal ritme tussen de secties op de homepage en de inhoudspagina's. De bron zette dit als inline `padding-top:0` op elke tweede sectie; hier is het één regel plus een modifier voor de secties die tegen de vorige aan moeten sluiten. */ .fc-block { padding-block: var(--wp--preset--spacing--70); } .fc-block.dicht { padding-top: 0; } /* ========================================================================== 3. Aankondigingsbalk (.fc-announce) ========================================================================== Niet interactief, dus geen statussen. */ .fc-announce { background-color: var(--wp--preset--color--secondary); /* Regel P2 — op `secondary` staat `primary-contrast`, nooit `contrast`: in de lichte modus is `contrast` exact dezelfde hex als `secondary`. */ color: var(--wp--preset--color--primary-contrast); padding: var(--wp--preset--spacing--20) 0.75rem; font-size: var(--wp--preset--font-size--small); font-weight: 600; letter-spacing: 0.014em; text-align: center; /* Zie §1: in de donkere modus is dit een verhoogd vlak dat zonder rand niet van de pagina te onderscheiden is (1,22:1). */ border-bottom: 1px solid var(--funcrea--band-border); } /* Het tweede tekstdeel staat gedempt. Op 85% blijft de verhouding 10,14:1, ruim binnen AA — daarom mag dit met opacity in plaats van met een tweede kleur, wat in de donkere modus vanzelf meeschaalt. */ .fc-announce span { opacity: 0.85; } /* ========================================================================== 4. Regenboogbalk (.fc-rainbow) ========================================================================== Puur decoratief; hoort in de markup `aria-hidden="true"` te krijgen en geen tekst te bevatten. In beide modi identiek: de balk werkt op elk vlak. De kleuren zelf staan in §1 — verander ze daar, niet hier. */ .fc-rainbow { height: 6px; background-image: linear-gradient( 90deg, var(--funcrea--rainbow--1), var(--funcrea--rainbow--2), var(--funcrea--rainbow--3), var(--funcrea--rainbow--4), var(--funcrea--rainbow--5), var(--funcrea--rainbow--6) ); } /* ========================================================================== 5. Header, logo, navigatie, gereedschap ========================================================================== */ header.fc-site { position: sticky; top: 0; z-index: 40; /* 92% dekkend `base` met blur; het token schuift in de donkere modus mee. */ background-color: var(--wp--custom--header--bg); backdrop-filter: blur(8px); border-bottom: 1px solid var(--wp--preset--color--border); } .fc-navbar { /* Ankerpunt voor het zoekpaneel uit §5; zie de toelichting daar. */ position: relative; display: flex; align-items: center; gap: 1.625rem; max-width: 1180px; margin-inline: auto; padding: 0.75rem var(--wp--preset--spacing--40); } /* --- Logo ---------------------------------------------------------------- */ .fc-logo { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; } .fc-logo img { height: 56px; width: auto; } /* Twee varianten van het volledige logo, één zichtbaar. Het woordmerk is cacao op transparant en valt weg op de donkere achtergrond; `mono-white` neemt het daar over. Dit speelt in de voettekst, waar het logo de naam draagt — de kopbalk gebruikt het beeldmerk, dat in beide modi staat. De schakelaars staan op dezelfde drie selectors als het darkmode-contract in §1, zodat licht/donker hier niet zijn eigen mechanisme krijgt. `display: none` haalt de verborgen variant ook uit de toegankelijkheidsboom, dus beide dragen dezelfde alt-tekst (zie `funcrea_logo_img()`). */ .fc-logo-donker { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fc-logo-licht { display: none; } :root:not([data-theme="light"]) .fc-logo-donker { display: inline; } } :root[data-theme="dark"] .fc-logo-licht { display: none; } :root[data-theme="dark"] .fc-logo-donker { display: inline; } :root[data-theme="light"] .fc-logo-licht { display: inline; } :root[data-theme="light"] .fc-logo-donker { display: none; } .fc-logo .txt strong { display: block; font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--large); line-height: 1; color: var(--wp--preset--color--primary); } .fc-logo .txt small { font-size: var(--wp--custom--font-size--micro); color: var(--wp--preset--color--contrast-2); } /* --- Navigatie ----------------------------------------------------------- */ nav.fc-main { display: flex; gap: 1.25rem; margin-left: auto; font-weight: 700; font-size: var(--wp--preset--font-size--medium); } nav.fc-main a { padding: 0.375rem 2px; color: var(--wp--preset--color--contrast); text-decoration: none; border-bottom: 2px solid transparent; transition: color var(--wp--custom--transition--fast) ease, border-color var(--wp--custom--transition--fast) ease; } nav.fc-main a:hover { color: var(--wp--preset--color--primary); border-bottom-color: var(--wp--preset--color--primary); } /* De huidige pagina staat niet in de bron. Zelfde weergave als hover, maar dan permanent — en de aanduiding hangt aan `aria-current`, niet aan een klasse, zodat hulpsoftware en oog hetzelfde zien (afwijking 18). */ nav.fc-main a[aria-current="page"] { color: var(--wp--preset--color--primary); border-bottom-color: var(--wp--preset--color--primary); } /* De kopbalk ruimt in drie stappen op. De bron zet de navigatie pas op 860px weg, maar die had zes korte labels en drie knoppen; dit menu heeft "Poppenhuis 1:12" en er staan vier knoppen naast. Gemeten op 900px mét de echte fonts: de sitenaam liep over het eerste menu-item heen, "Poppenhuis 1:12" brak over twee regels en de menuknop viel buiten beeld. Stap 1 — onder 1200px: de slogan weg. Die staat toch al ín het logoplaatje (visueel.md §7, punt 4: hij stond dubbel). */ @media (max-width: 1200px) { .fc-logo .txt small { display: none; } .fc-logo .txt strong { white-space: nowrap; } } /* Stap 2 — onder 1080px: de navigatie naar het paneel uit §5b. */ @media (max-width: 1080px) { nav.fc-main { display: none; } /* Met de navigatie weg zijn logo en gereedschap de twee flexitems. De `margin-left:auto` die de navigatie naar rechts duwde is er dan niet meer, dus neemt het gereedschap dat over. */ .fc-tools { margin-left: auto; flex: 0 0 auto; } } /* Stap 3 — onder 860px: smallere marges en een kleiner logo. */ @media (max-width: 860px) { .fc-navbar { gap: 0.75rem; padding-inline: var(--wp--preset--spacing--30); } .fc-logo img { height: 44px; } } /* Op de smalste schermen blijft alleen het beeldmerk over; de naam staat daar ook in het plaatje. */ @media (max-width: 420px) { .fc-logo .txt { display: none; } } /* --- Gereedschap --------------------------------------------------------- */ .fc-tools { display: flex; align-items: center; gap: 0.625rem; } .fc-icon-btn { position: relative; /* 44px in plaats van de 42px uit de bron: WCAG 2.5.8 raakdoel (afwijking 8). Regel S1 — vaste maat als ondergrens, niet als maat. `min-height` en niet `height`: legt de bezoeker een grotere letter of ruimere tekstafstand op (WCAG 1.4.12), dan groeit de inhoud wel en het vak niet, en loopt de tekst eruit. De 44px blijft zo de ondergrens voor het raakdoel én mag meegroeien. Browserzoom speelt hier geen rol: die schaalt de px mee. S1 geldt bewust alleen op de hoogte. Dat is de as die faalt: 1,5× regelafstand rekt de regelbox op, terwijl 0,12em letterafstand aan één teken vrijwel niets doet. Breedte blijft dus vast, met twee redenen om dat zo te houden: een te breed teken valt zichtbaar over de rand (geen stil verlies), en `min-width` op een rij knoppen in een krappe kopbalk is wél een layoutwijziging. Uitzondering zijn de twee knoppen binnen `.fc-qty` — zie daar. */ width: 44px; min-height: 44px; display: grid; place-items: center; padding: 0; background-color: var(--wp--preset--color--base-2); color: var(--wp--preset--color--contrast); /* Rand op `contrast-2`, niet op `border`: dit is een bedienbaar element (regel R2) en de slug `border` haalt de 3:1 van WCAG 1.4.11 niet. */ border: 1px solid var(--wp--preset--color--contrast-2); /* Regel S2 — hoort bij S1. `50%` is de helft van elke as, dus zodra de hoogte meegroeit en de breedte vast blijft, wordt de cirkel een ovaal. De pill-radius (999px) blijft bij elke maat een correcte cirkel. */ border-radius: var(--wp--custom--radius--pill); box-shadow: var(--wp--custom--shadow--card); font-size: 1.1rem; line-height: 1; text-decoration: none; cursor: pointer; transition: color var(--wp--custom--transition--fast) ease, border-color var(--wp--custom--transition--fast) ease; } /* Hover staat niet in de bron; dit volgt `.csbn-theme-toggle:hover` uit de parent, zodat alle knoppen in de kopbalk zich hetzelfde gedragen. */ .fc-icon-btn:hover { color: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--primary); } /* De themaschakelaar hoort visueel bij `.fc-tools`; de parent geeft hem een rechthoekige vorm. Hier alleen de vorm bijstellen — kleuren, focus en iconen blijven van de parent, dat is het contract. Regel S1 en S2, hier door de maat juist wég te laten. De parent staat al op `min-width`/`min-height: 44px` (`csbn-base/assets/css/theme.css:210`); een vaste `width`/`height` erover zette precies die ondergrens weer om in een bovengrens. De pill-radius vervangt `50%`, dat bij een niet-vierkant vak een ovaal oplevert. Zichtbaar verandert er vandaag niets: de inhoud is `__icons`, een vast blok van 20x20px uit de parent, dus het vak blijft 44x44 bij 200% lettergrootte én bij ruimere tekstafstand. Wat vervalt is de bovengrens voor de stand waarin het label wél meedoet (`--csbn-toggle--label-display`): met de vaste breedte liep dat 46px buiten de knop, en 121px bij 200% plus tekstafstand. */ .fc-tools .csbn-theme-toggle { padding: 0; border-radius: var(--wp--custom--radius--pill); box-shadow: var(--wp--custom--shadow--card); } .fc-tools .csbn-theme-toggle .csbn-theme-toggle__label { display: none; } /* De badge staat er ook bij een lege winkelwagen — WooCommerce kan bij een AJAX-toevoeging alleen vervangen wat er al staat. Op nul is hij leeg, en dan hoort hij niet als rood bolletje in de hoek te blijven hangen. */ .fc-icon-btn .badge:empty { display: none; } .fc-icon-btn .badge { position: absolute; top: -4px; right: -4px; min-width: 18px; /* Regel S1. Krapste vak van het theme: een cijfer op `font-weight: 800` in 18px. `min-width` stond er al, `min-height` hoort erbij. */ min-height: 18px; padding-inline: 4px; display: grid; place-items: center; background-color: var(--wp--preset--color--primary); /* Regel P1 — `base`, niet `primary-contrast`. visueel.md §5.3 noemt hier nog `primary-contrast` (dat is de bronbeschrijving); met wit zakt dit in de donkere modus naar 2,30:1. Met `base` is het 5,24:1 / 7,93:1. */ color: var(--wp--preset--color--base); /* Regel S2. Stond op `9px` — met de hand de helft van 18, dus fout zodra het vak groeit. */ border-radius: var(--wp--custom--radius--pill); /* 0,7rem in plaats van 0,65rem: 10,4px is te klein (afwijking 12). */ font-size: var(--wp--custom--font-size--tag); font-weight: 800; line-height: 1; } /* --- Zoeken (.fc-zoek, FUNC-26) ------------------------------------------ Een
met het zoekformulier erin, geen dialoogvenster met eigen JS. Het paneel hangt onder de kopbalk en valt binnen de sticky kopbalk. De lage `z-index: 1` hieronder houdt het boven de pagina zonder hoge waarden. Het paneel hangt bewust aan `.fc-navbar` en niet aan het zoekicoon zelf. Het icoon is niet het rechtse item in de balk: er staan nog drie knoppen rechts van (winkelwagen, themaschakelaar, menu). Rechts uitlijnen op het icoon schoof het paneel op een telefoon dus ruim 200px het venster uit aan de linkerkant, en dat is geen overloop die je terugscrolt — links buiten beeld is weg. Rechts uitlijnen op de balk zet dezelfde rand precies binnen het venster. De `position: relative` die dat regelt staat bij `.fc-navbar` zelf, hierboven in deze paragraaf. */ /* De `` is hier de knop. Zonder deze twee regels zet de browser er zijn eigen driehoekje voor en klopt de 44px-cirkel van `.fc-icon-btn` niet meer. `display: grid` komt uit `.fc-icon-btn` en overschrijft `list-item`. */ .fc-zoek > summary { list-style: none; cursor: pointer; } .fc-zoek > summary::-webkit-details-marker { display: none; } .fc-zoek[open] > summary { color: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--primary); } .fc-zoek-paneel { position: absolute; /* Rechts uitgelijnd op de balk. `right: 0` zou tegen de rand van het venster liggen: het ankerpunt is de padding-box van `.fc-navbar` en die loopt tot buiten de binnenruimte. Met `spacing 30` staat de rand van het paneel op een telefoon gelijk met die van de balk zelf. */ top: calc(100% + 0.625rem); right: var(--wp--preset--spacing--30); z-index: 1; box-sizing: border-box; /* Breed genoeg voor een zoekterm van een woord of drie, en op een smal scherm nooit breder dan het venster. */ width: min(22rem, calc(100vw - 2rem)); padding: var(--wp--preset--spacing--30); background-color: var(--wp--preset--color--base); /* In de donkere modus draagt de rand de scheiding; zie §1. */ border: 1px solid var(--funcrea--surface-border); border-radius: var(--wp--custom--radius--large); box-shadow: var(--wp--custom--shadow--card); } .fc-zoek-form { display: flex; gap: var(--wp--preset--spacing--20); } /* `min-width: 0` is niet overbodig: een flexkind krimpt standaard niet onder zijn eigen minimumbreedte, en die is bij een `input` de browserbreedte van ~20 tekens. Zonder deze regel duwt het veld de knop het paneel uit. */ .fc-zoek-form .search-field { flex: 1; min-width: 0; } .fc-zoek-form .fc-btn { flex: none; } /* --- Suggesties in het zoekpaneel (FUNC-47) ------------------------------ De lijst staat in de HTML met `hidden` erop en het script haalt dat weg. Daarom staat hier bewust géén `display`: de UA-regel `[hidden]{display:none}` verliest van elke auteursdeclaratie, ook van een enkele klasse (valkuil 15). Eén `display: block` hieronder en `hidden` doet niets meer — zonder fout, zonder melding, met een lege lijst die permanent open staat. */ .fc-zoek-suggesties { margin: var(--wp--preset--spacing--20) 0 0; padding: 0; list-style: none; /* Vijf items passen; bij een langere lijst scrollt de lijst en niet het paneel, zodat het zoekveld in beeld blijft. */ max-height: 15rem; overflow-y: auto; } .fc-zoek-optie { display: flex; align-items: center; /* Regel S1: raakdoel van 44px. `min-height`, geen `height` — een titel van twee regels moet het vak groter maken, niet eruit lopen (FUNC-38). */ min-height: 44px; padding: var(--wp--preset--spacing--20); border-radius: var(--wp--custom--radius--medium); cursor: pointer; } /* Aanwijzen met de muis en aanwijzen met de pijltjes horen er hetzelfde uit te zien: het is dezelfde handeling. `aria-selected` is hier de bron van waarheid — het script zet niets anders, dus de opmaak kan niet uit de pas lopen met wat een schermlezer voorleest. */ .fc-zoek-optie:hover, .fc-zoek-optie[aria-selected="true"] { background-color: var(--wp--custom--surface--warm); color: var(--wp--preset--color--primary); } /* ========================================================================== 5b. Mobiel menu (.fc-mobiel) ========================================================================== Staat niet in de ontwerpbron: daar verdwijnt `nav.fc-main` onder 860px zonder alternatief. Richting uit visueel.md §6 — paneel op `base`, volle hoogte, links op `medium`/700, 44px raakdoelen, sluitknop rechtsboven. Het is een , dus focus-trap, Escape en het inert maken van de pagina komen uit de browser. Die brengt eigen standaardstijl mee (rand, marge, automatische breedte) en die wordt hier eerst uitgezet. */ .fc-menu-knop { display: none; } .fc-mobiel { /* Uit de standaardstijl van . */ padding: 0; border: 0; max-width: none; max-height: none; background: transparent; /* Volle hoogte tegen de rechterrand — het paneel schuift van de kant waar de openknop staat. `fixed` en een z-index zijn nodig, niet alleen netjes: met de standaard-`absolute` van staat het paneel vóór de hero in de DOM, en de absoluut gepositioneerde hero-achtergrond schilderde er dan overheen — het paneel was simpelweg onzichtbaar. In de modale stand valt dat niet op (de top layer staat boven alles), maar de terugvalstand voor browsers zonder showModal() gebruikt gewoon `open`, en daar wél. 60 is boven de sticky kopbalk (40). Let op de `auto` links: de UA-stijl van zet `left: 0` én `right: 0`. Met daarbij een vaste breedte is de doos overbepaald, en dan negeert de browser in een links-naar-rechts-taal juist `right` — het paneel kwam zo aan de verkeerde kant te staan. */ position: fixed; inset: 0 0 0 auto; z-index: 60; margin: 0; width: min(20rem, 88vw); height: 100%; } .fc-mobiel::backdrop { background-color: rgba(0, 0, 0, 0.5); } .fc-mobiel-vlak { box-sizing: border-box; height: 100%; padding: var(--wp--preset--spacing--40); background-color: var(--wp--preset--color--base); /* In de donkere modus draagt de rand de scheiding; zie §1. */ border-left: 1px solid var(--funcrea--surface-border); box-shadow: var(--wp--custom--shadow--card); overflow-y: auto; } .fc-mobiel-sluit { margin-left: auto; display: flex; } .fc-mobiel-nav { display: flex; flex-direction: column; margin-top: var(--wp--preset--spacing--40); font-size: var(--wp--preset--font-size--medium); font-weight: 700; } .fc-mobiel-nav a { /* 44px raakdoel (WCAG 2.5.8), en de scheidingslijn houdt de rij leesbaar zonder een tweede kleur nodig te hebben. */ display: flex; align-items: center; min-height: 44px; padding-inline: 2px; color: var(--wp--preset--color--contrast); text-decoration: none; border-bottom: 1px solid var(--wp--preset--color--border); transition: color var(--wp--custom--transition--fast) ease; } .fc-mobiel-nav a:hover, .fc-mobiel-nav a[aria-current="page"] { color: var(--wp--preset--color--primary); } /* Onder 1080px verdwijnt `nav.fc-main` (§5, stap 2) en neemt dit paneel het over; de openknop hoort dus op precies datzelfde punt te verschijnen. Blijven die twee getallen niet gelijk, dan is er een strook breedtes zonder enige navigatie — of met twee menu's tegelijk. */ @media (max-width: 1080px) { .fc-menu-knop { display: grid; } } /* ========================================================================== 6. Hero (.fc-hero) ========================================================================== */ .fc-hero { position: relative; min-height: 520px; display: flex; align-items: center; overflow: hidden; } .fc-hero .bg { position: absolute; inset: 0; } /* De foto is een en geen achtergrond, zodat de browser hem vroeg vindt, met `srcset` een passend formaat kiest en `fetchpriority` kan honoreren. `object-fit` en `object-position` doen hier wat `background-size: cover` en `background-position` deden. */ .fc-hero .bg .foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; } /* De leesbaarheidslaag over de foto. `color-mix` in plaats van een rgba-hex, zodat de sluier in de donkere modus vanzelf donker wordt — met een vaste crèmekleur zou de hero daar oplichten. De tweede stop staat op 88% dekking en loopt door tot voorbij de tekstkolom (max-width 600px in een wrap van 1180px). De bron had daar .80 op 42%, wat het laatste stuk kop en alinea op een te dunne sluier zette (afwijking 10). */ .fc-hero .bg::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient( 90deg, color-mix(in srgb, var(--wp--preset--color--base) 96%, transparent) 0%, color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent) 55%, color-mix(in srgb, var(--wp--preset--color--base) 15%, transparent) 78%, transparent 100% ); } /* De sluier loopt van links naar rechts, en dat werkt zolang de tekstkolom in de linkerhelft staat. Op een smal scherm vult de tekst de hele breedte en staat hij dus op het doorschijnende deel van de foto — gemeten op 390px: onleesbaar. Onder 760px daarom van boven naar onder, met de foto zichtbaar onder de tekst in plaats van erachter. */ @media (max-width: 760px) { .fc-hero .bg::after { background-image: linear-gradient( 180deg, color-mix(in srgb, var(--wp--preset--color--base) 94%, transparent) 0%, color-mix(in srgb, var(--wp--preset--color--base) 90%, transparent) 72%, color-mix(in srgb, var(--wp--preset--color--base) 45%, transparent) 100% ); } } .fc-hero .inner { position: relative; z-index: 2; max-width: 600px; padding-block: var(--wp--preset--spacing--60); } .fc-hero .kicker { display: inline-block; margin-bottom: 1.125rem; padding: 0.375rem 0.875rem; background-color: var(--wp--preset--color--base-2); color: var(--funcrea--kicker-color); border-radius: var(--wp--custom--radius--pill); box-shadow: var(--wp--custom--shadow--card); font-size: var(--wp--custom--font-size--eyebrow); font-weight: 800; letter-spacing: 0.117em; text-transform: uppercase; } .fc-hero h1 { font-size: var(--wp--preset--font-size--huge); line-height: 1.15; margin: 0 0 0.875rem; } /* Eén woord uitgelicht. `--primary--decor` is het originele, feller rood dat als kleine tekst zakt door AA; op deze maat (minimaal 2,2rem, gewicht 600) geldt de grens voor grote tekst en mag het. Nergens anders gebruiken. */ .fc-hero h1 em { font-style: normal; color: var(--wp--custom--primary--decor); } .fc-hero p { max-width: var(--wp--custom--measure--lead); margin: 0 0 1.625rem; color: var(--wp--preset--color--contrast-2); font-size: 1.12rem; } .fc-cta-row { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--30); } /* ========================================================================== 7. Knoppen — alle varianten en statussen ========================================================================== De bron definieert alleen de rusttoestand en hover. Actief, uitgeschakeld en focus zijn hier toegevoegd; focus volgt het parent-contract uit §2. */ .fc-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--wp--preset--spacing--20); padding: 0.875rem 1.625rem; border: 0; border-radius: var(--wp--custom--radius--pill); font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--medium); font-weight: 600; /* De bron erft 1,6 van body; in een pil staat dat te ruim en groeit de knop onnodig (afwijking 27). */ line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: background-color var(--wp--custom--transition--base) ease, box-shadow var(--wp--custom--transition--base) ease, transform var(--wp--custom--transition--base) ease; } /* --- Primair ------------------------------------------------------------- */ .fc-btn-primary { background-color: var(--wp--preset--color--primary); /* Regel P1: `base`, niet `primary-contrast` (afwijking 2). */ color: var(--wp--preset--color--base); box-shadow: var(--wp--custom--shadow--button); } .fc-btn-primary:hover { background-color: var(--wp--custom--primary--hover); transform: translateY(-2px); } /* Ingedrukt: terug naar de grondlijn, schaduw korter. Geeft de knop een fysieke terugkoppeling die los staat van hover — belangrijk op touch, waar hover blijft plakken. */ .fc-btn-primary:active { transform: translateY(0); box-shadow: 0 4px 10px transparent; } /* --- Ghost --------------------------------------------------------------- */ .fc-btn-ghost { background-color: var(--wp--preset--color--base-2); color: var(--wp--preset--color--contrast); box-shadow: var(--wp--custom--shadow--card); /* In de donkere modus draagt de rand de vlakscheiding (zie §1). */ border: 1px solid var(--funcrea--surface-border); } .fc-btn-ghost:hover { transform: translateY(-2px); } .fc-btn-ghost:active { transform: translateY(0); } /* --- Groot --------------------------------------------------------------- */ .fc-btn.big { padding: 0.9375rem 1.875rem; } /* --- Uitgeschakeld ------------------------------------------------------- Geldt voor beide varianten. `aria-disabled` staat erbij omdat een link geen `disabled` kent en een uitgeschakelde koopknop soms een link is; de klasse maakt hem grijs, de markup moet de klik zelf tegenhouden. */ .fc-btn[disabled], .fc-btn[aria-disabled="true"] { background-color: var(--wp--preset--color--border); /* 5,03:1 in licht, 5,47:1 in donker — ook uitgeschakelde tekst blijft leesbaar, ook al eist WCAG dat niet. */ color: var(--wp--preset--color--contrast-2); box-shadow: none; transform: none; cursor: not-allowed; } .fc-btn[disabled]:hover, .fc-btn[aria-disabled="true"]:hover { background-color: var(--wp--preset--color--border); transform: none; } /* ========================================================================== 8. USP-band (.fc-trust) en USP-kaarten (.fc-usps / .fc-usp) ========================================================================== */ .fc-trust { background-color: var(--wp--preset--color--secondary); color: var(--wp--preset--color--primary-contrast); /* Boven én onder een rand in de donkere modus: de band is daar een verhoogd vlak en zonder scheiding niet te zien (afwijking 11). */ border-block: 1px solid var(--funcrea--band-border); } .fc-trust .fc-wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--wp--preset--spacing--40); padding: var(--wp--preset--spacing--40); text-align: center; } .fc-trust div { font-size: var(--wp--preset--font-size--small); font-weight: 700; } .fc-trust .em { display: block; margin-bottom: 2px; font-size: 1.35rem; } @media (max-width: 760px) { .fc-trust .fc-wrap { grid-template-columns: repeat(2, 1fr); } } /* --- Kaartvariant op de over-pagina -------------------------------------- */ .fc-usps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--wp--preset--spacing--40); margin-block: var(--wp--preset--spacing--60); } .fc-usp { padding: 1.5rem 1.25rem; border-radius: var(--wp--custom--radius--large); box-shadow: var(--wp--custom--shadow--card); text-align: center; transition: transform 200ms ease; } /* De vier pasteltinten. Tekst hierop blijft `contrast` / `contrast-2`: de donkere tegenhangers van deze tinten zitten in dezelfde luminantiehoek als `base-2`, dus de verhoudingen kloppen in beide modi. */ .fc-usp.u1 { background-color: var(--wp--custom--tile--peach); } .fc-usp.u2 { background-color: var(--wp--custom--tile--mint); } .fc-usp.u3 { background-color: var(--wp--custom--tile--sky); } .fc-usp.u4 { background-color: var(--wp--custom--tile--pink); } .fc-usp:hover { transform: translateY(-4px); } .fc-usp .ic { font-size: 2rem; margin-bottom: var(--wp--preset--spacing--20); } .fc-usp b { display: block; margin-bottom: 4px; color: var(--wp--preset--color--contrast); } .fc-usp span { color: var(--wp--preset--color--contrast-2); font-size: var(--wp--preset--font-size--small); font-weight: 700; } @media (max-width: 820px) { .fc-usps { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .fc-usps { grid-template-columns: 1fr; } } /* ========================================================================== 9. Sectiekop (.fc-head) ========================================================================== */ .fc-head { max-width: var(--wp--custom--measure--intro); margin: 0 auto var(--wp--preset--spacing--50); text-align: center; } /* Ook de story-band heeft een kopregel (visueel.md §5.14). De bron zette daar een inline stijl met dezelfde waarden; hier hangt hij aan dezelfde regel, zodat de kopregels van de sectiekop en de story-band niet uit elkaar kunnen lopen. */ .fc-head .eyebrow, .fc-story .eyebrow { display: block; color: var(--wp--preset--color--primary); font-size: var(--wp--custom--font-size--eyebrow); font-weight: 800; letter-spacing: 0.117em; text-transform: uppercase; } .fc-story .eyebrow { margin-bottom: var(--wp--preset--spacing--20); } .fc-head h2 { font-size: var(--wp--preset--font-size--xx-large); margin: var(--wp--preset--spacing--20) 0 0.625rem; } .fc-head p { margin: 0; color: var(--wp--preset--color--contrast-2); } /* Linksuitgelijnde variant (over-pagina). */ .fc-head.left { max-width: none; margin-inline: 0; text-align: left; } /* ========================================================================== 10. Categorietegels (.fc-cats / .fc-cat) ========================================================================== Layout dichter bij preview Optie 3 (voorbeeld2 “Donker & modern”): compacte kaarten, 6-koloms grid, gekleurde accentstreep boven, icoon gecentreerd. In light mode blijven de pastel-tegels als vlakkleur; in dark mode surface + border + accentstreep (preview-tokens). */ .fc-cats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.875rem; } .fc-cat { --fc-cat-accent: var(--wp--preset--color--primary); position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; min-height: 0; padding: 1.375rem 1rem; text-align: center; border-radius: var(--wp--custom--radius--large); border: 1px solid transparent; box-shadow: var(--wp--custom--shadow--card); color: var(--wp--preset--color--contrast); text-decoration: none; overflow: hidden; transition: transform 200ms ease, border-color 200ms ease, background-color 200ms ease; } .fc-cat::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: var(--fc-cat-accent); } .fc-cat.c1 { background-color: var(--wp--custom--tile--peach); --fc-cat-accent: #ff8c42; } .fc-cat.c2 { background-color: var(--wp--custom--tile--mint); --fc-cat-accent: #5fd0b4; } .fc-cat.c3 { background-color: var(--wp--custom--tile--sky); --fc-cat-accent: #5aa9e6; } .fc-cat.c4 { background-color: var(--wp--custom--tile--lavender); --fc-cat-accent: #b79bff; } .fc-cat.c5 { background-color: var(--wp--custom--tile--sun); --fc-cat-accent: #ffc24b; } .fc-cat.c6 { background-color: var(--wp--custom--tile--pink); --fc-cat-accent: #ff8fb3; } .fc-cat:hover { transform: translateY(-4px); border-color: var(--fc-cat-accent); } /* De tegel heeft `overflow: hidden`, dus een outline met positieve offset wordt afgeknipt. Naar binnen halen in plaats van de overflow opgeven. */ .fc-cat:focus-visible { outline: 3px solid var(--wp--preset--color--contrast); outline-offset: -3px; } .fc-cat .emoji, .fc-cat .icon { position: static; display: block; margin: 0 0 0.35rem; font-size: 2rem; line-height: 1; opacity: 0.95; } .fc-cat .icon { width: 2rem; height: 2rem; color: var(--wp--preset--color--contrast); } .fc-cat .icon svg, .fc-cat .icon img { display: block; width: 100%; height: 100%; object-fit: contain; } .fc-cat .icon svg { fill: currentColor; } .fc-cat h3 { margin: 0; font-size: var(--wp--preset--font-size--medium); font-weight: 600; } .fc-cat > span:not(.emoji):not(.icon) { color: var(--wp--preset--color--contrast-2); font-size: 0.74rem; font-weight: 500; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fc-cat { background-color: var(--wp--preset--color--base-2); border-color: var(--wp--preset--color--border); box-shadow: none; } :root:not([data-theme="light"]) .fc-cat:hover { background-color: var(--wp--custom--surface--warm); border-color: var(--fc-cat-accent); } } :root[data-theme="dark"] .fc-cat { background-color: var(--wp--preset--color--base-2); border-color: var(--wp--preset--color--border); box-shadow: none; } :root[data-theme="dark"] .fc-cat:hover { background-color: var(--wp--custom--surface--warm); border-color: var(--fc-cat-accent); } @media (max-width: 900px) { .fc-cats { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 520px) { .fc-cats { grid-template-columns: repeat(2, 1fr); } } /* ========================================================================== 11. Productkaart (.fc-card) ========================================================================== Het meest hergebruikte onderdeel: home, shop en "gerelateerd" op de productpagina. Markupafspraak (afwijking 13): de kaart is een link en de "+"-knop is een echte `