/* ============================================================ 0. LETTERTYPE — Poppins, lokaal gehost Geen Google Fonts CDN: sneller en AVG-vriendelijk (CLAUDE.md par. 5). Per gewicht twee bestanden: latin en latin-ext. Dankzij unicode-range haalt de browser latin-ext alleen op als een pagina die tekens bevat. ============================================================ */ @font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/poppins-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/poppins-400-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/poppins-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/poppins-500-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/poppins-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/poppins-600-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/poppins-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/poppins-700-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} /* ============================================================ STICHTING SAKIENA — BASE Fundament voor het hele thema: tokens, reset, typografie, header, navigatie, knoppen, formulieren, footer, helpers. Overgenomen uit het goedgekeurde ontwerp (Website designs/assets/sakiena-base.css), met drie bewuste wijzigingen: 1. Mobile-first. Basisregels gelden voor kleine schermen, media queries bouwen omhoog met min-width. 2. Werkt zonder JavaScript. Het ontwerp verstopte content (.reveal) en de navigatie achter JS. Beide zijn nu gescoped op een `js`-klasse: zonder JS is alles zichtbaar en bedienbaar, mét JS gedraagt het zich zoals ontworpen. 3. Contrast. #0097b2 (--teal) haalt op wit maar 3,5:1 en wordt daarom nooit gebruikt voor tekst, links of knoppen — alleen voor vlakken, iconen en decoratie. Tekst draait op #066c86 (--teal-dark, 6,0:1). ⚠ AFSPRAAK MET DE JS: assets/js/sakiena.js zet als eerste handeling de klasse `js` op het -element. Zonder die klasse valt de site terug op de no-JS-variant. ============================================================ */ /* ===== TOKENS ===== Kleuren en typografie komen uit theme.json; deze :root-laag is de korte schrijfwijze die de thema-CSS gebruikt. Wijzig een kleur op één plek: hier én in theme.json. */ :root{ /* Merkkleuren */ --teal:#0097b2; /* alleen vlakken, iconen, decoratie */ --teal-dark:#066c86; /* tekst, links, knoppen (6,0:1 op wit) */ --teal-bright:#0594ae; /* accent, focusring */ --teal-darker:#045367; /* hover en diepe vlakken */ --teal-soft:#e6f4f7; /* zacht vlak achter badges */ --champagne:#fbd6c3; /* uitsluitend achtergrondvlak */ --champagne-deep:#f4b89c; --champagne-soft:#fdeee6; --champagne-ink:#8a4a2c; /* enige tekstkleur die op champagne mag (5,0:1) */ /* Neutraal */ --ink:#121212; --grey:#505050; --white:#fff; --bg:#ffffff; --bg-tint:#f3f6f7; --surface:#ffffff; --text:#1a1a1a; --text-muted:#4a4a4a; --link:#066c86; --border:rgba(18,18,18,.10); --border-strong:rgba(18,18,18,.16); /* Statuskleuren voor formulieren */ --ok-bg:#e4f4ee; --ok-border:rgba(31,143,107,.4); --ok-text:#155c45; --ok-icon:#1f8f6b; --req:#c0392b; /* verplicht-sterretje (5,4:1 op wit) */ /* Merkkleuren van de deelknoppen. Het ontwerp gebruikte de officiële merkkleuren #25d366 (WhatsApp) en #1877f2 (Facebook). Met witte tekst halen die 1,9:1 en 4,3:1 — allebei onder de AA-eis. Zelfde tint, dieper doorgezet: het blijft herkenbaar en de knoplabels zijn leesbaar. */ --share-wa:#188640; /* WhatsApp-groen, verdiept (4,6:1 op wit) */ --share-wa-dark:#12692f; /* hover */ --share-fb:#1668d8; /* Facebook-blauw, verdiept (5,2:1 op wit) */ --share-fb-dark:#1153ad; /* hover */ /* Ruimte en vorm */ --xs:8px; --sm:18px; --md:30px; --lg:50px; --xl:100px; --r-btn:6px; --r-card:10px; --r-pill:999px; --sh-sm:rgba(16,24,40,.05) 0 1px 2px 0; --sh-md:rgba(16,24,40,.09) 0 6px 18px -6px; --sh-glow:rgba(0,151,178,.30) 0 22px 48px -22px; /* ===== BEWEGING ===== Eerder stonden er acht losse duren door de stylesheets heen (.08s tot .7s), dus voelde de site schokkerig: kleur en beweging liepen niet gelijk en dezelfde handeling duurde per component anders lang. Hieronder één schaal, en niets buiten deze schaal. De keuze per trede: snel kleur, dekking, rand, onderstreping. Onder ~100ms leest een overgang als een sprong; 140ms is net genoeg om vloeiend te zijn en nergens te laat. normaal alles wat écht beweegt: hover-lift, schaduw, pijltjes, knoppen. 200ms: de beweging is zichtbaar, maar de kaart loopt niet meer achter de muis aan. Dit stond op 320ms en dát is wat "stroef" voelde. traag grotere vlakken: beeld dat inzoomt, panelen. Groter oppervlak = langere weg = meer tijd, anders schiet het. reveal scroll-reveal en de binnenkomst van de hero. Zie de toelichting bij .reveal verderop. direct alleen de leesvoortgangsbalk: die volgt de scroll en mag daar niet zichtbaar bij achterlopen. */ /* Bijgesteld na de klacht dat hoveren stroef aanvoelt. Gemeten met de processor zes keer afgeknepen: nul frames boven de 20ms. Er hápert dus niets. Het probleem zat in de tijd zelf. 320ms voor een hover is te lang. Onderzoek naar interfacegevoel legt de grens waarboven een reactie "achterlopend" gaat voelen rond de 200ms; alles daaronder leest als direct. De beweging blijft zichtbaar, maar loopt niet meer achter de muis aan. De reveal ging van 800ms naar 480ms. Bijna een seconde wachten tot een kaart tot rust komt is bij zes kaarten onder elkaar een pagina die traag oogt, ook als hij dat niet is. */ --dur-direct:90ms; --dur-snel:140ms; --dur-normaal:200ms; --dur-traag:380ms; --dur-reveal:480ms; /* Drie curves, meer niet. --ease standaard. Rustig uitdempen; ook de terugweg van elke hover, want daar hoort geen accent op te liggen. Dit is de curve die het thema altijd al gebruikte. --ease-binnen iets komt binnen (reveal, hero). Zet fel in en landt heel zacht: de beweging is meteen leesbaar en komt toch tot rust in plaats van te stoppen. --ease-lift de heenweg van een hover-lift. Schiet iets door en veert terug; dat leest als een reactie op de muis in plaats van als een verschuiving. Bewust alleen op transform — kleur die doorschiet ziet er fout uit. De doorschiet van --ease-lift stond op 1.4. Het commentaar hierboven zei "~4%", maar dat klopte niet: met een controlepunt op 1.4 gaat de kaart ruim tien procent voorbij zijn eindstand en veert dan terug. Op 320ms was dat een zichtbare wiebel, en juist die wiebel voelt kleverig — je muis is allang weg en de kaart staat nog na te trillen. Nu 1.16: genoeg om als reactie te lezen, te weinig om te stuiteren. --ease-binnen heeft een zeer lange staart (expo-out). Op 800ms bleef een element daardoor merkbaar lang "aankomen". Op 480ms is diezelfde curve juist prettig: fel begin, zachte landing, en klaar. */ --ease:cubic-bezier(.22,.61,.36,1); --ease-binnen:cubic-bezier(.19,1,.22,1); --ease-lift:cubic-bezier(.34,1.16,.64,1); /* Samengestelde overgangen. Dezelfde combinaties komen tientallen keren terug; hier staan ze één keer, zodat lift en schaduw niet per ongeluk uit elkaar gaan lopen (dat was de kern van het "schokkerige" gevoel: transform op .26s, schaduw op .3s). Zonder achtervoegsel = de terugweg en de ruststand, `-in` = de heenweg naar :hover, met de veerkrachtige curve. Let op: geen `transition:all`. Dat animeert ook layout- eigenschappen en kost onnodig rekenwerk. En nergens `outline`: een focusring hoort er direct te staan. */ --tr-kleur:color var(--dur-snel) var(--ease), background-color var(--dur-snel) var(--ease), border-color var(--dur-snel) var(--ease); --tr-lift:transform var(--dur-normaal) var(--ease), box-shadow var(--dur-normaal) var(--ease); --tr-lift-in:transform var(--dur-normaal) var(--ease-lift), box-shadow var(--dur-normaal) var(--ease); /* Kaarten wisselen bij hover ook hun randkleur; die hoort bij de beweging (rand vervaagt terwijl de kaart optilt), dus op dezelfde duur als de lift en niet op de snelle kleurduur. */ --tr-kaart:var(--tr-lift), border-color var(--dur-normaal) var(--ease); --tr-kaart-in:var(--tr-lift-in), border-color var(--dur-normaal) var(--ease); /* Maten */ --maxw:1180px; /* breedte van .wrap */ --readw:760px; /* leesbreedte, gelijk aan theme.json contentSize */ /* Eén lettertype voor de hele site: Poppins, lokaal gehost. De systeemfonts erachter dekken de seconde vóór het webfont laadt. */ --font:Poppins,-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif; --wrap-pad:22px; /* Hoogte van de sticky header op klein scherm: 16px padding + 48px (de menuknop is het hoogste element) + 16px + 1px rand. scroll-padding-top en de sticky filterbalk rekenen hierop, dus pas hem samen aan met de padding van .nav en de logohoogte. */ --header-h:81px; --tap:48px; /* minimaal tikvlak */ } /* ===== RESET ===== */ *{box-sizing:border-box;} /* Het `hidden`-attribuut moet altijd winnen van een display-regel op een component. Het activiteitenfilter verbergt kaarten hiermee — semantisch beter dan style.display, want schermlezers slaan ze dan over. Dit is naast de reduced-motion-regel de enige !important. */ [hidden]{display:none !important;} html{ scroll-behavior:smooth; /* Ankerlinks niet onder de sticky header laten verdwijnen. */ scroll-padding-top:calc(var(--header-h) + var(--sm)); } body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font); font-size:16px; /* bewust 16px: 14px is op mobiel te klein */ font-weight:400; line-height:1.72; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{max-width:100%; display:block; height:auto;} /* ===== TYPOGRAFIE ===== */ h1,h2,h3,h4{ font-family:var(--font); margin:0; color:var(--ink); line-height:1.18; /* Nederlandse samenstellingen worden lang ("vrijwilligersbijeenkomst"). Op 360px breed duwt zo'n woord in een clamp-kop de hele pagina opzij; afbreken is dan beter dan een horizontale scrollbalk. */ overflow-wrap:break-word; } h1{font-weight:600; font-size:clamp(34px,6.4vw,52px);} h2{font-weight:600; font-size:clamp(27px,4.4vw,38px); letter-spacing:-.01em;} h3{font-weight:600; font-size:clamp(20px,2.6vw,23px); line-height:1.3;} h4{font-weight:600; font-size:clamp(17px,2.2vw,19px); line-height:1.35;} p{margin:0 0 var(--sm);} /* ===== AFSPRAAK: ELKE :hover STAAT IN @media(hover:hover) ===== Een telefoon of tablet heeft geen muisaanwijzer. Tikt iemand daar op een knop of een kaart, dan houdt de browser de hover-staat vast tot er ergens anders getikt wordt — de knop blijft dus donker, de kaart blijft opgetild hangen. Dat las de opdrachtgever terecht als "hover blijft plakken". `@media(hover:hover)` vraagt of het hoofdaanwijsapparaat écht kan zweven. Alleen dan gelden de hover-regels. Muis en trackpad houden alles; touch krijgt de ruststand, en de :active- en :focus-visible- regels doen daar het werk. Twee dingen om op te letten bij nieuwe regels: 1. Zet nooit een :focus-visible-selector in dezelfde groep als een :hover-selector. Focus moet ook op touch werken (extern toetsenbord, schakelaarbediening); die regels horen erbuiten. 2. Alles wat de bezoeker echt nodig heeft om iets te kunnen zien of bedienen mag nooit alleen in een hover-regel staan. Hover is versiering, geen informatie. De kleurovergang zelf staat op de ruststand, niet op :hover — anders loopt de muis er soepel in en springt de kleur bij het weggaan terug. Dat geldt voor élke hover in dit thema. */ a{color:var(--link); text-decoration:none; transition:color var(--dur-snel) var(--ease);} @media(hover:hover){ a:hover{color:var(--teal-darker);} } /* ===== LAYOUT-HELPERS ===== */ .wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--wrap-pad);} /* Bovenschrift met streepje. ⚠ De opdrachtgever heeft alle eyebrows van de site laten halen: de templates roepen `sakiena_eyebrow()` niet meer aan. Deze regels blijven staan omdat het bovenschrift bij het ontwerp hoort en de blokpatronen in inc/patterns.php de klasse nog kunnen gebruiken (`p.eyebrow`). Belangrijk daarbij: de ruimte onder het bovenschrift zit op het bovenschrift zélf (`margin:0 0 12px`), niet als `margin-top` op de kop eronder en niet als vaste rijhoogte op de houder. Verdwijnt het element, dan verdwijnt de ruimte mee — er blijft dus nergens een gat achter. Nagelopen op de drie plekken waar een eyebrow stond: .hero-content flexkolom met `gap` (components.css §2a-bis) — een gap telt alleen tussen elementen die er zijn. .sec-head geen eigen regel voor het bovenschrift behalve het centreren; `.sec-head h2` heeft geen margin-top. .post-head werkt met .cat-badge, die zijn eigen ondermarge draagt. Houd dat zo: zet ruimte nooit als `margin-top` op het element eronder. */ .eyebrow{ font-size:13px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--teal-dark); margin:0 0 12px; display:flex; align-items:center; gap:10px; } .eyebrow.center{justify-content:center;} .eyebrow::before{ content:""; width:28px; height:3px; background:var(--teal); border-radius:3px; display:inline-block; flex-shrink:0; } /* Inleidende alinea. */ .lede{font-size:clamp(17px,2.2vw,19px); line-height:1.7; color:var(--text-muted);} /* ===== TOEGANKELIJKHEID ===== */ /* Skip-link: springt naar de hoofdinhoud. Verborgen met een vlak van 1px in plaats van met `left:-999px`. Dat oude trucje laat een element van 210px breed op de pagina staan, alleen dan links buiten beeld. Het telt daardoor mee in de breedteberekening van de browser en dook op in de metingen van de mobiele QC. Deze variant neemt werkelijk geen ruimte in en blijft even goed leesbaar voor schermlezers. */ .skip{ position:absolute; top:8px; left:8px; z-index:300; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; background:var(--teal-dark); color:var(--white); padding:12px 18px; border-radius:var(--r-btn); } .skip:focus{ width:auto; height:auto; overflow:visible; clip-path:none; white-space:normal; } /* Zonder deze regel zou de skip-link de teal-darker uit `a:hover` pakken; dat is onleesbaar op het donkere vlak van de link zelf. */ @media(hover:hover){ .skip:hover{color:var(--white);} } /* Standaard WordPress-klasse voor tekst die alleen schermlezers horen. */ .screen-reader-text{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); border:0; word-wrap:normal; } /* Krijgt de verborgen tekst focus (bijv. een skip-link), dan wél tonen. */ .screen-reader-text:focus{ position:static; width:auto; height:auto; margin:0; padding:12px 18px; overflow:visible; clip-path:none; background:var(--teal-dark); color:var(--white); border-radius:var(--r-btn); font-size:16px; font-weight:600; } /* Zichtbare focus op alles wat focus kan krijgen. `outline` staat bewust in géén enkele transitie in dit thema: wie met het toetsenbord navigeert moet direct zien waar de focus staat, niet na 180ms. Ook een focusring die als box-shadow is getekend (de formuliervelden verderop) verschijnt daarom zonder overgang. --teal-bright haalt 3,3:1 op wit — genoeg voor de 3:1-eis aan niet-tekstelementen. Op de donkere teal panelen haalt diezelfde ring maar 1,8:1; daar wordt hij wit. Zie "focus op donkere vlakken" in components.css. */ :focus-visible{outline:3px solid var(--teal-bright); outline-offset:3px; border-radius:4px;} /* ===== KNOPPEN ===== Alle knopvarianten draaien op --teal-dark. #0097b2 onder witte tekst haalt de AA-eis niet en wordt hier dus niet gebruikt. CONTRAST PER STAAT — doorgerekend, niet geschat. Elke knop haalt in rust, hover, focus en active minstens 4,5:1 tussen zijn tekst en zijn eigen achtergrond: wit op --teal-dark #066c86 6,0:1 wit op --teal-darker #045367 8,1:1 wit op --ink #121212 18,7:1 --teal-dark op wit 6,0:1 --ink op --bg-tint 17,4:1 De varianten op een gekleurd paneel (.cta, .newsletter, .join-card, .inline-cta) staan in components.css; ook die zijn nagerekend en dragen daar hun eigen tabel. */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:54px; padding:14px 30px; font-family:Poppins,Helvetica,Arial,sans-serif; font-size:17px; font-weight:600; line-height:1.1; border-radius:var(--r-btn); border:2px solid transparent; cursor:pointer; text-align:center; /* Vangnet voor een `.btn` zonder modifier. Die stond eerder zonder achtergrond én zonder tekstkleur in de CSS: hij erfde dan de kleur van zijn omgeving, en op een gekleurd paneel kon dat elke waarde worden — inclusief een onleesbare. Nu is de basis altijd de secundaire knop: wit vlak, --teal-dark tekst (6,0:1). Elke modifier overschrijft dit gewoon. */ background:var(--white); color:var(--teal-dark); border-color:var(--border-strong); transition:var(--tr-lift), var(--tr-kleur); } .btn-primary{background:var(--teal-dark); color:var(--white); box-shadow:var(--sh-sm);} .btn-primary:active{transform:translateY(0) scale(.98);} .btn-secondary{background:var(--white); color:var(--teal-dark); border-color:var(--teal);} .btn-secondary:active{transform:translateY(0) scale(.98);} .btn-ghost{background:var(--bg-tint); color:var(--ink); border-color:var(--border-strong);} .btn-ghost:active{transform:translateY(0) scale(.98);} /* De :active-staten hierboven blijven buiten de hover-query: die geeft de bevestiging van een tik, en juist op touch is dat de enige terugkoppeling die de bezoeker krijgt. */ @media(hover:hover){ /* Eén regel voor alle varianten: de heenweg van de lift krijgt de veerkrachtige curve, de terugweg (de basisregel) dempt rustig uit. */ .btn:hover{transition:var(--tr-lift-in), var(--tr-kleur);} .btn-primary:hover{background:var(--teal-darker); color:var(--white); transform:translateY(-3px); box-shadow:var(--sh-md);} .btn-secondary:hover{background:var(--teal-dark); color:var(--white); transform:translateY(-3px); box-shadow:var(--sh-md);} .btn-ghost:hover{background:var(--white); border-color:var(--teal); color:var(--teal-dark); transform:translateY(-3px);} } .btn-block{width:100%;} /* Tekstlink met pijl. De kleurovergang stond hier eerder helemaal niet: alleen `:hover` zette een andere kleur, dus de link klapte heen én terug. */ .text-link{ display:inline-flex; align-items:center; gap:8px; min-height:var(--tap); font-weight:700; color:var(--teal-dark); align-self:flex-start; transition:color var(--dur-snel) var(--ease); } .text-link .arr{transition:transform var(--dur-normaal) var(--ease); display:inline-block;} @media(hover:hover){ .text-link:hover{color:var(--teal-darker);} /* niet --teal: 3,5:1 op wit */ .text-link:hover .arr{transform:translateX(5px); transition-timing-function:var(--ease-lift);} } /* ===== HEADER ===== */ .site-header{ position:sticky; top:0; z-index:100; background:rgba(255,255,255,.93); backdrop-filter:saturate(150%) blur(12px); -webkit-backdrop-filter:saturate(150%) blur(12px); border-bottom:1px solid var(--border); } /* Navigatiebalk. Ruimer dan de 10px uit het ontwerp, op verzoek van de opdrachtgever. De hoogte staat als --header-h in :root, omdat scroll-padding-top en de sticky filterbalk daarop rekenen — pas ze samen aan. */ .nav{ position:relative; max-width:var(--maxw); margin:0 auto; padding:16px var(--wrap-pad); display:flex; align-items:center; gap:18px; flex-wrap:wrap; } /* `flex-shrink:0` hield het logo op volle grootte, ook als er geen ruimte meer was. Bij tekstvergroting tot 200% duwde het de header buiten beeld. Nu mag het krimpen, maar niet onder de helft: kleiner wordt het wordmerk onleesbaar en dan kun je het beter helemaal weglaten. */ .brand{ display:flex; align-items:center; flex:0 1 auto; min-width:0; min-height:var(--tap); transition:opacity var(--dur-snel) var(--ease); } @media(hover:hover){ .brand:hover{opacity:.8;} } /* Logo-hoogte: bewust groter dan de 56px uit het oorspronkelijke ontwerp, op verzoek van de opdrachtgever. Schaalt mee per breekpunt. Op de kleinste schermen 46px in plaats van 52px. Het logo is 3,7x zo breed als hoog: op 52px is dat 193px, en samen met de menuknop (~112px) en de tussenruimte past dat niet meer in de 316px die een scherm van 360px overhoudt. De knop wipte dan naar een tweede regel, waardoor de header 133px hoog werd terwijl --header-h op 81px staat — en dan verdwijnen ankerdoelen eronder. Bij 46px is het logo 171px breed en past de balk weer op één regel. */ /* `max-width` is nodig voor zoomen tot 200% (WCAG 1.4.4). Bij die vergroting gedraagt een scherm van 360px zich als 180px, en dan is een logo van 171px bijna de hele breedte. Zonder deze regel duwde het de header buiten beeld. */ .brand img{height:46px; width:auto; max-width:100%; display:block;} /* Navigatielijst — zonder JS gewoon een gestapelde lijst onder het logo. */ .nav-links{ display:flex; flex-direction:column; align-items:stretch; gap:0; flex:1 1 100%; list-style:none; margin:0; margin-block:0; padding:0; } .nav-links a{ position:relative; display:inline-flex; align-items:center; min-height:54px; padding:14px 12px; color:var(--ink); font-weight:500; font-size:18px; border-radius:8px; white-space:normal; transition:color var(--dur-snel) var(--ease), background-color var(--dur-snel) var(--ease); } /* Focus staat bewust apart van hover: focus moet óók op een telefoon met extern toetsenbord werken, hover niet. */ .nav-links a:focus-visible{color:var(--teal-dark); background:var(--bg-tint);} @media(hover:hover){ .nav-links a:hover{color:var(--teal-dark); background:var(--bg-tint);} } /* Actief item — .active komt van de nav-walker, li.is-current is de wrapper. */ .nav-links a.active, .nav-links li.is-current > a{color:var(--teal-dark); font-weight:600;} /* CTA-knop: rechts in de balk op desktop, onderin het menu op mobiel. */ .nav-cta{display:none;} .nav-cta .btn{min-height:var(--tap); padding:11px 22px; font-size:16px;} li.mob-cta{display:flex; margin-top:10px;} /* Hamburger — alleen zinvol als er JS is om hem te bedienen. */ .menu-toggle{ display:none; align-items:center; gap:9px; margin-left:auto; min-height:var(--tap); padding:10px 16px; background:var(--bg-tint); border:2px solid var(--border-strong); border-radius:var(--r-btn); font-family:inherit; font-size:16px; font-weight:600; color:var(--ink); cursor:pointer; } .menu-toggle .bars{display:inline-flex; flex-direction:column; gap:4px;} .menu-toggle .bars span{ width:22px; height:2.5px; background:var(--ink); border-radius:2px; /* De drie streepjes vouwen samen tot een kruis: dat is één beweging, dus draaien en verdwijnen op dezelfde duur. */ transition:transform var(--dur-normaal) var(--ease), opacity var(--dur-normaal) var(--ease); } .menu-toggle[aria-expanded="true"] .bars span:nth-child(1){transform:translateY(6.5px) rotate(45deg);} .menu-toggle[aria-expanded="true"] .bars span:nth-child(2){opacity:0;} .menu-toggle[aria-expanded="true"] .bars span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);} /* Mét JS: uitklapmenu zoals in het ontwerp. */ .js .menu-toggle{display:inline-flex;} .js .nav-links{ display:none; position:absolute; left:0; right:0; top:100%; z-index:99; background:var(--white); border-bottom:1px solid var(--border); box-shadow:var(--sh-md); padding:10px 16px 18px; } .js .nav-links.open{display:flex;} /* ===== BROODKRUIMELS ===== Markup: