/* ============ de schaal ============ Eén schaal voor ruimte, tekstgrootte en leesbreedte (dagtaak 25-08, V-3). Waarom dit blok er staat: border-radius liep al netjes via `--r` en `--r-small` per thema, maar ruimte en tekstgrootte niet. Geteld op 25-08: 24 verschillende lettergroottes, waarvan er ACHT een halve pixel droegen (9,5 / 10,5 / ... / 16,5) en gewoon naast elkaar bestonden, plus 28 verschillende marge- en padding-waarden met losse getallen als 7, 9, 11, 13, 15 en 17 die op geen enkel raster passen. Dat is geen ontwerp maar een geschiedenis: elk scherm dat ooit "net iets kleiner" moest, kreeg zijn eigen getal. De halve pixels zijn hiermee weg; ze zijn opgetrokken naar de dichtstbijzijnde hele stap. Nieuwe regels horen hieronder te kiezen en geen nieuw getal te verzinnen. AANVULLING 28-08 (D-1). Dit blok stond er wel, maar werd NUL keer gebruikt: `var(--sp-` en `var(--ts-` kwamen in het hele bestand niet voor, en ook in geen enkel sjabloon. Het was dus documentatie en geen regel, en dat is van buiten niet te onderscheiden van een regel die geldt. Erger: de zin hierboven dat de halve pixels weg waren, klopte alleen voor dit bestand -- er zaten er nog dertien als inline stijl in negen sjablonen en één in de clamp van `.pk-vraag`. Nu gebruikt het stijlblad de schaal echt: 139 lettergroottes en 127 ruimtewaarden lopen erlangs. Alleen EXACTE treffers zijn omgezet, dus er is geen enkele gerenderde waarde veranderd; dat is nagerekend door de tokens terug te vertalen en het resultaat regel voor regel met de vorige versie te vergelijken. Waarden die niet op een stap vallen (22, 26, 36, 44px) houden hun getal: een token verzinnen dat niet bestaat is erger dan een eerlijke uitzondering. Shorthands met meerdere waarden (`margin:12px 0 4px`) blijven ook staan -- daar leest een token slechter dan een getal, en leesbaarheid is het hele doel. */ :root{ /* ruimte: 4 / 8 / 12 / 16 / 24 / 32 / 48 */ --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px; /* T-1 (31-08): --sp-5 en --sp-6 stonden hier en werden nul keer gebruikt, terwijl de rauwe waarde 22px zes keer als ruimte in precies dat bereik voorkwam. Een ladder met treden waar niemand op stapt, nodigt uit tot een eigen getal; dat is de fout die het bovenstaande commentaar al eens beschrijft. Nu lopen die zes plekken via de trede. */ --sp-5:24px;--sp-6:32px;--sp-7:48px; /* tekst: van bijschrift tot paginakop */ --ts-1:11px;--ts-2:12px;--ts-3:13px;--ts-4:14px;--ts-5:15px; --ts-6:16px;--ts-7:17px;--ts-8:20px;--ts-9:24px; /* De grote maten (04-09, P3-7): stonden zeven keer rauw in het bestand (26, 36 en 44 px). Op de schaal, zodat een wijziging één plek is. */ --ts-10:26px;--ts-11:36px;--ts-12:44px; /* De vraagtekst heeft een eigen maat en dat is bewust (T-5/DO-5, 29-08 avond). Hij schaalt met het scherm en past daarom niet op de vaste --ts-trap; wat er ontbrak was dat de drie getallen 19/21/25 kaal in het stijlblad stonden, terwijl dit het onderdeel is dat de deelnemer het vaakst ziet. Nu dragen ze een naam en staan ze bij de andere maten. */ --ts-vraag-min:19px;--ts-vraag-max:25px;--ts-vraag-compact-max:21px; /* En één marge voor de vraagtekst, in plaats van zeven verschillende inline waarden verspreid over de sjablonen (16px, 18px, 12px, geen). */ --sp-vraag:var(--sp-3); /* leesbreedte: twee, niet veertien. `--lees` voor lopende tekst, `--lees-breed` voor een inleiding of een brede kaart. */ --lees:52ch;--lees-breed:60ch; /* De kaartbreedte stond 52 keer als vaste 640px in de sjablonen (14-09). Px schaalt niet mee als iemand zijn basislettergrootte vergroot, en juist dan is een leeskolom het hardst nodig. 40rem is bij de standaardgrootte exact diezelfde 640px, maar groeit mee. Bewust niet --lees-breed: 60ch is ruim smaller en zou 52 schermen zichtbaar versmallen zonder dat iemand daarom vroeg. */ --lees-kaart:40rem; /* Regelhoogte was als enige van de drie schalen nooit tot een trap gemaakt: elf losse waarden naast elkaar, terwijl tekstgrootte en ruimte dat wel zijn (14-09). Deze vier dekken de vier meest gebruikte waarden exact, zodat er niets van uiterlijk verandert: dertien van de eenentwintig declaraties lopen nu via een token. Wat overblijft is 1.1, 1.15, 1.3, 1.4, 1.42, 1.45 en 1.75, elk een of twee keer. Die naar de dichtstbijzijnde trede trekken zou de regelafstand van die blokken zichtbaar wijzigen, en daar vroeg niemand om; een token per eenmalige waarde is geen schaal maar ruis. */ --rh-strak:1;--rh-kop:1.2;--rh-tekst:1.5;--rh-ruim:1.55; } /* ============ basis ============ */ *{box-sizing:border-box} /* Het hidden-attribuut wint altijd — ook van display:flex/inline op dezelfde elementen (welkomsttour-knoppen stapelden anders op elkaar). */ [hidden]{display:none!important} html{-webkit-text-size-adjust:100%} body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-size:var(--ts-6);line-height:var(--rh-ruim);min-height:100vh; /* clip i.p.v. hidden: geen scrollcontainer, dus position:sticky blijft werken */ overflow-x:clip} /* Brede inhoud (tabellen, spinnenweb) scrollt in z'n eigen bakje; de pagina zelf mag nooit horizontaal scrollen. */ .tabelscroll{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch; /* Een schaduw aan de kant waar nog tabel staat. Zonder dit ziet een brede tabel er op een telefoon compleet uit terwijl er het meeste buiten beeld staat: `table.tijdlijn` is 900px breed en de kaart op een toestel van 320px is er 264, dus 636px ziet niemand. Precies het gat dat de kopbalk op 20-08 dichtte ("zonder de vervaging rechts leek de balk compleet"). Hier geen `mask-image` zoals daar, want dat vervaagt ook een tabel die al helemaal is doorgeschoven. Dit is de oude truc met twee lagen: de dekkende laag in --card scrollt MEE (`local`) en schuift aan de rand waar niets meer staat over de schaduw heen, de schaduw zelf staat STIL (`scroll`). Geen JavaScript, en zonder JS werkt hij dus ook. */ background: linear-gradient(to right,var(--card) 60%,transparent) left center / 34px 100% no-repeat local, linear-gradient(to left,var(--card) 60%,transparent) right center / 34px 100% no-repeat local, radial-gradient(farthest-side at 0 50%,color-mix(in srgb,var(--ink) 22%,transparent),transparent) left center / 12px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%,color-mix(in srgb,var(--ink) 22%,transparent),transparent) right center / 12px 100% no-repeat scroll} .tabelscroll:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .wrap{max-width:880px;margin:0 auto;padding:0 20px 60px;position:relative;z-index:1} a{color:inherit} /* Alleen voor schermlezers: uit beeld, maar wel voorgelezen en focusbaar. */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* Sla de vaste kop over; onzichtbaar tot hij focus krijgt (WCAG 2.4.1). */ .skip-link{position:absolute;left:-9999px;top:0;z-index:100; background:var(--card);color:var(--ink);border:2px solid var(--accent); border-radius:0 0 var(--r-small) 0;padding:12px 18px;text-decoration:none; font-size:var(--ts-5)} .skip-link:focus{left:0} /* Elke afbeelding blijft binnen zijn kolom (02-09). Er was geen globale img-regel; de vier foto's op /fotos steunden alleen op het HTML-attribuut width en een max-width op de omhullende div. Svg's hebben die bescherming wel. VERPLAATST op 10-09 (dagelijkse ronde, P2): deze regel stond binnen `@media (max-width:700px)`, één niveau diep, en gold dus alleen op de telefoon -- precies omgekeerd aan wat het commentaar erboven beweerde. Boven 700px bestond de bescherming nog steeds niet. Nageteld met een accolade-teller op het commentaarvrije bestand. Nu staat hij waar hij hoort: bij de basis, vóór elke media-tak. */ img{max-width:100%;height:auto} /* --rule-sterk in plaats van --rule (dagtaak 20-08): de rand is in rust het enige dat een invoerveld als vak herkenbaar maakt, en met --rule haalde hij 1,3-1,5:1 tegen veld en kaart (eis 3:1, WCAG 1.4.11). Zelfde correctie als .opt, .tabbar, .deelknop en .optkeuze label eerder kregen. */ input[type=text],input[type=password],input[type=email],input[type=number],input[type=tel],textarea,select{font:inherit;font-size:var(--ts-5);padding:10px 13px; border:1px solid var(--rule-sterk);background:var(--field);color:var(--ink);border-radius:var(--r-small);width:100%} /* Een veld dat fout is, ziet er ook fout uit. Tot 17-09 stond hier niets: de sjablonen zetten netjes `aria-invalid="true"`, maar het stijlblad deed daar niets mee, dus een fout veld had exact dezelfde rand als een goed veld. Het foutblok eronder is wel duidelijk (4,67:1 tot 5,93:1), maar dat zegt WAT er mis is en niet WELK veld het is; op een formulier met twee velden is dat raden. De rand is een bedieningselement, dus de eis is 3:1; nagerekend --stop op --field: 5,47:1 (v), 7,55 (m), 5,33 (n), 6,50 (admin). Dikker dan de gewone rand, want kleur alleen mag nooit de enige drager zijn (WCAG 1.4.1) en niet iedereen ziet het verschil tussen twee tinten. */ input[aria-invalid="true"],textarea[aria-invalid="true"],select[aria-invalid="true"]{ border-width:2px;border-color:var(--stop);padding:9px 12px} textarea{resize:vertical;line-height:var(--rh-tekst)} /* Meegroeiend tekstvak: de tekst blijft altijd in zijn geheel leesbaar — het vak wordt hoger in plaats van dat de zin wegscrolt. De hoogte zelf zet het script (base.html); deze regels zorgen dat er nooit een scrollbalk of afgeknipte regel verschijnt. */ textarea.groeit{resize:none;overflow:hidden;min-height:44px} /* Denk-mee-blok onder de vraag: zichtbaar en uitnodigend, maar rustig genoeg om de vraag zelf niet te overstemmen. */ .denkmee{margin:18px auto 0;max-width:var(--lees);text-align:center;padding:14px 16px; border:1.5px dashed var(--accent);border-radius:var(--r);background:var(--field)} .denkmee-kop{margin:0;font-weight:700;font-size:var(--ts-5);color:var(--ink)} .denkmee-tekst{margin:6px 0 10px;font-size:var(--ts-4);color:var(--soft);line-height:var(--rh-tekst)} @media (max-width:700px){.denkmee{margin-top:14px;padding:var(--sp-3)}} /* "Deze vraag is me niet duidelijk" (10-08). Bewust klein en zacht: het mag niet concurreren met het beantwoorden van de vraag zelf, maar wel gevonden worden. De knop erft .linkknop en heeft daarmee al min-height:44px. */ .snapniet{margin:10px 0 0;text-align:center} .snapniet-knop{font-size:var(--ts-3);color:var(--soft);text-decoration:underline; text-underline-offset:3px} .snapniet-knop[aria-pressed="true"]{color:var(--ink);text-decoration:none; font-weight:600} .snapniet-bevestiging{display:block;margin-top:var(--sp-1);font-size:var(--ts-3); color:var(--ink);max-width:var(--lees);margin-left:auto;margin-right:auto} /* "Dit staat nog op slot" — zonder de tekst onleesbaar te maken (10-08). Hier stond `style="opacity:.55"` of `.75` om een vergrendelde regel te dempen. Dat dimt ook de tekst: --soft op wit is 5,5:1, maar door .55 heen nog 2,3:1, en op /samen bleef er van 4,5:1 nog 3,4:1 over. Juist de regel die uitlegt WAAROM iets op slot zit werd daarmee het slechtst leesbaar. Nu dempen we alleen wat versiering is: het icoon en de omlijsting. De tekst houdt zijn eigen, al doorgerekende kleur. */ .gedimd{color:var(--soft)} /* De balk dimt NIET mee (dagtaak 29-08 avond, D-8). Toen dit blok op 10-08 werd geschreven gold "we dempen alleen wat versiering is", en een balkje leek versiering. Dat is het hier niet: templates/samen_meer.html rendert binnen een gedimde rij een `` met de voortgang van een onderwerp dat nog op slot zit. Met opacity:.6 zakt de rand die dat vak herkenbaar maakt naar ongeveer 2,0-2,3:1, waar WCAG 1.4.11 voor een grafisch onderdeel 3:1 vraagt -- en dat is precies het contrast dat elders in dit bestand met zorg op 3,60-4,62:1 is gezet. Wat een waarde draagt, dimt niet mee. */ .gedimd > [aria-hidden="true"]{opacity:.6} .gedimd b, .gedimd strong{color:var(--ink)} /* .zacht en .klein bestonden NERGENS in deze stylesheet, terwijl zeventien plekken in drie sjablonen ze wel gebruikten (defect P3-B, 12-08). Alleen `.chip.klein` en `.btn.klein` waren gedefinieerd; een kale `class="klein"` of `class="zacht"` deed dus niets, en tekst die gedempt en klein bedoeld was stond in volle broodtekst. Dezelfde kleur als .gedimd — die is al doorgerekend op AA — en één stap kleiner, niet meer, want onder de 14px wordt het op een telefoon onleesbaar. */ .zacht{color:var(--soft)} .zacht b, .zacht strong{color:var(--ink)} p.klein, span.klein, div.klein, li.klein{font-size:var(--ts-4);line-height:var(--rh-tekst)} /* Werkt JavaScript, dan toont de tour één kaart tegelijk; zonder JS staan ze allemaal onder elkaar en zijn de stapknoppen weg (de submit-knoppen blijven, zodat niemand vastloopt). */ html.js .tour-kaart:not(.tour-actief){display:none} html:not(.js) .alleen-js{display:none!important} input:focus-visible,button:focus-visible,textarea:focus-visible,select:focus-visible,a:focus-visible{ outline:2px solid var(--accent);outline-offset:2px} /* Elementen die géén knop of link zijn maar zich wel zo gedragen (de omdraaibare praatkaart is een div met role="button") vielen buiten de regel hierboven en hadden dus geen zichtbare focus (review 07-08, WCAG 2.4.7). */ [tabindex="0"]:focus-visible,[role="button"]:focus-visible{ outline:2px solid var(--accent);outline-offset:3px} /* Placeholder-kleur expliciet vastleggen in plaats van aan de browser overlaten: --soft haalt in alle drie de thema's ruim 4,5:1 op --field. */ input::placeholder,textarea::placeholder{color:var(--soft);opacity:1} button{font:inherit;cursor:pointer} header.site{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4); padding:var(--sp-5) 0 16px;border-bottom:1px solid var(--rule);margin-bottom:26px} .brand{font-family:var(--display);font-size:var(--ts-8);text-decoration:none;color:var(--ink);letter-spacing:.01em} /* `position:relative` is hier geen opmaak maar een hek (D-18-09-18, 18-09). De nav schuift op een telefoon horizontaal binnen zichzelf (overflow-x auto, zie de media-regel verderop), en dat werkt voor alles wat gewoon meeschuift. Maar in de nav staan `.sr-only`-spans (de tekst bij de bericht- en feedbackstip), en die zijn `position:absolute` zonder eigen coordinaten. Was de nav niet zelf gepositioneerd, dan lag hun containing block hoger in de boom en KLIPTE de nav ze niet: het 1 bij 1 pixel grote vakje bleef op x=581 staan en rekte daarmee de hele pagina op. Gemeten op een telefoon van 390 px: het document was 582 px breed, dus elk ingelogd scherm schoof horizontaal. Niet de nav, de hele pagina. Met deze ene regel: 390. In de browser gemeten, niet beredeneerd. */ header.site nav{position:relative;display:flex;gap:var(--sp-4);align-items:center;font-size:var(--ts-4);color:var(--soft)} header.site nav a{color:var(--soft);text-decoration:none;white-space:nowrap} header.site nav a:hover{color:var(--ink)} .taalopties{display:inline-flex;align-items:center;gap:var(--sp-1)} .taalmenu .navknop,.brand{white-space:nowrap} /* De 🌐-knop klapt het taalmenu open op smalle schermen. Op breed scherm is de lijst altijd zichtbaar en is de knop overbodig, dus verborgen. */ .taalbol{background:none;border:0;padding:var(--sp-1);font:inherit;font-size:var(--ts-5); line-height:var(--rh-strak);cursor:pointer;color:var(--soft);display:none} .taalbol:focus-visible{outline:2px solid var(--accent);outline-offset:2px; border-radius:var(--r-small)} /* Uitloggen is een POST: het mini-formulier in de nav oogt als de links ernaast. */ header.site nav form.navform{display:inline;margin:0} header.site nav button.navknop{background:none;border:0;padding:0;font:inherit; color:var(--soft);cursor:pointer} header.site nav button.navknop:hover{color:var(--ink)} /* Knop die eruitziet als een gewone tekstlink (voor POST-acties in lopende tekst). */ form.inlineform{display:inline;margin:0} /* padding + min-height: als tekstlink vormgegeven, maar wél een tikdoel. Gemeten op 08-08 bij 375px: de vijf "gezien"-knoppen op /samen waren 25px hoog, ruim onder de 44px die het project elders wél aanhoudt. */ button.linkknop{background:none;border:0;padding:11px 4px;min-height:44px;min-width:44px;justify-content:center; display:inline-flex;align-items:center;font:inherit;color:inherit; text-decoration:underline;cursor:pointer} /* Chip die als link dienstdoet: dezelfde ondergrens. Stond eerder als inline `style="padding:3px 10px"` in samen.html en werd daarmee 26px. */ .chip.klein{min-height:44px;display:inline-flex;align-items:center; padding:0 10px} .me{font-weight:600;color:var(--ink)} footer.site{margin-top:var(--sp-7);padding-top:18px;border-top:1px solid var(--rule); font-size:var(--ts-3);color:var(--soft)} /* Zelfde padding-truc als header.site nav a: de voettekstlink stond op 16px hoog (dagtaak 10-08). Inline-block, anders doet verticale padding niets. */ footer.site a{color:var(--soft);display:inline-block;padding:14px 2px} /* ============ thema: vrouw ============ */ .theme-v{ --display:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif; --bg1:#FFF6F7;--bg2:#FBEDF3;--card:#FFFFFF;--field:#FFFDFD; /* Contrast (review 05-08): --soft, --accent en --stop waren te licht voor WCAG AA op wit (4,27 / 3,38 / 3,91:1). Verdiept zonder de warme kleurindruk te verliezen: nu 4,6-4,9:1 voor secundaire tekst, knoppen en foutmeldingen. --accent-2/--glow blijven licht (vlakken, geen tekst). */ --ink:#4A2E39;--soft:#875A6B;--bijschrift:#875A6B;--rule:#F0D9E1; /* Interactieve randen (antwoordknoppen, keuzepillen) moeten 3:1 halen tegen het veldvlak; --rule alleen is daarvoor te licht. Zie review 06-08 (WCAG 1.4.11). */ /* 58% en niet 52% (P2-3, 11-09). Eerdere rondes rekenden deze rand alleen door tegen --card, en daar haalde 52% de eis ruim. De voortgangsbalkjes op het vraagscherm zetten hem echter tegen --rule, en daar kwam hij uit op 2,70 (theme-v) en 2,72 (theme-n) bij een eis van 3,0; tegen --glow op 2,95. Bij 58% wordt dat 3,09 en 3,13 tegen --rule, 3,38 tegen --glow, en tegen --card gaat hij van 3,60 naar 4,13. Alle vier de thema's halen de eis nu op alle drie de ondergronden, en geen enkel al goedgekeurd paar gaat erop achteruit. Nagerekend met de WCAG-luminantieformule, niet geschat. */ --rule-sterk:color-mix(in srgb,var(--ink) 58%,var(--rule)); --accent:#B94A70;--accent-2:#F5CBD9;--glow:#F9E3EB; /* --gray een tint dieper (was #A79098): de gestippelde rand van .tag.prive haalde 2,96:1 tegen de witte kaart, net onder de 3:1 voor een grafisch element (gemeten 08-08). Nu 3,42:1. */ --sage:#7FA88B;--amber:#CE9B5C;--lav:#A98BC9;--stop:#A94A52;--gray:#998794; --stand-groen-rand:color-mix(in srgb,var(--sage) 70%,var(--ink));--stand-groen:color-mix(in srgb,var(--sage) 35%,var(--ink)); --stand-rood-rand:color-mix(in srgb,var(--stop) 70%,var(--ink));--stand-rood:color-mix(in srgb,var(--stop) 35%,var(--ink)); --r:22px;--r-small:14px;--shadow:0 10px 30px rgba(217,102,138,.10); background:linear-gradient(160deg,var(--bg1),var(--bg2) 60%,#F7EAF2); background-attachment:fixed;color:var(--ink)} /* In dit thema is --card wit en --bg1 bijna wit (1,06:1), dus de rand is het enige verschil tussen kaart en pagina. Met --rule haalde die rand 1,34:1 tegen wit, ver onder de 3:1 voor een betekenisdragende grens (P3 14-09). --rule-sterk is hier eerder juist voor ingevoerd. */ .theme-v .card{border:1px solid var(--rule-sterk)} /* ============ thema: man ============ */ /* Harder gemaakt (besluit Jeroen 05-08): staalblauw accent in plaats van mauve, koelere grijzen, koperen highlights — strak en nuchter. */ .theme-m{ --display:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif; --bg1:#E3E6E8;--bg2:#D8DCDF;--card:#F4F5F6;--field:#FFFFFF; --ink:#131E28;--soft:#43535E;--bijschrift:#43535E;--rule:#C2C9CE; --rule-sterk:color-mix(in srgb,var(--ink) 58%,var(--rule)); --accent:#3A607A;--accent-2:#C3D3DE;--glow:#DFE9F0; --sage:#5F7A64;--amber:#A9743B;--lav:#6C6288;--stop:#8C3A3A;--gray:#727C84; --stand-groen-rand:color-mix(in srgb,var(--sage) 70%,var(--ink));--stand-groen:color-mix(in srgb,var(--sage) 35%,var(--ink)); --stand-rood-rand:color-mix(in srgb,var(--stop) 70%,var(--ink));--stand-rood:color-mix(in srgb,var(--stop) 35%,var(--ink)); --r:6px;--r-small:3px;--shadow:0 4px 14px rgba(19,30,40,.10); background:var(--bg1);color:var(--ink)} /* ============ thema: neutraal (bezoekers, nog niet ingelogd) ============ */ /* Warm ivoor met diepgroen accent: uitnodigend zonder naar één kant te kleuren — de start- en loginpagina schrikken zo niemand af. */ .theme-n{ --display:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif; --bg1:#F7F5F0;--bg2:#EFEAE2;--card:#FFFFFF;--field:#FFFEFC; /* Zelfde contrastronde: --soft haalde 4,38:1 op de ivoren achtergrond en --accent had nauwelijks marge; beide een tint dieper. */ --ink:#2E3230;--soft:#5F6B65;--bijschrift:#5F6B65;--rule:#DDD8CE; --rule-sterk:color-mix(in srgb,var(--ink) 58%,var(--rule)); --accent:#3F6C5A;--accent-2:#CBDDD4;--glow:#E4EEE9; /* --stop een tint dieper (was #B05050): op de gemengde foutachtergrond haalde de oude waarde 4,48:1 waar 4,5 nodig is — als enige van de vier thema's. Nu 4,67:1 (gemeten 08-08). --gray een tint dieper om dezelfde reden: de gestippelde rand van .tag.prive zat op 2,96:1 (eis 3). */ --sage:#7FA88B;--amber:#C08A4A;--lav:#8D82A8;--stop:#AA4E4E;--gray:#7F8580; --stand-groen-rand:color-mix(in srgb,var(--sage) 70%,var(--ink));--stand-groen:color-mix(in srgb,var(--sage) 35%,var(--ink)); --stand-rood-rand:color-mix(in srgb,var(--stop) 70%,var(--ink));--stand-rood:color-mix(in srgb,var(--stop) 35%,var(--ink)); --r:16px;--r-small:10px;--shadow:0 8px 24px rgba(46,50,48,.08); background:linear-gradient(160deg,var(--bg1),var(--bg2)); background-attachment:fixed;color:var(--ink)} /* ============ thema: admin ============ */ .theme-admin{ --display:ui-sans-serif,system-ui,sans-serif; --bg1:#F4F5F7;--bg2:#E9EBEF;--card:#FFFFFF;--field:#FFFFFF; --ink:#1D2530;--soft:#5D6B7A;--bijschrift:#5D6B7A;--rule:#DDE2E8; --rule-sterk:color-mix(in srgb,var(--ink) 58%,var(--rule)); --accent:#3D5A80;--accent-2:#C6D3E3;--glow:#E8EDF4; --sage:#4C8055;--amber:#A8752E;--lav:#6B5E96;--stop:#A03D3D;--gray:#7C858C; --stand-groen-rand:color-mix(in srgb,var(--sage) 70%,var(--ink));--stand-groen:color-mix(in srgb,var(--sage) 35%,var(--ink)); --stand-rood-rand:color-mix(in srgb,var(--stop) 70%,var(--ink));--stand-rood:color-mix(in srgb,var(--stop) 35%,var(--ink)); --r:10px;--r-small:6px;--shadow:0 2px 10px rgba(29,37,48,.06); background:var(--bg1);color:var(--ink)} /* ============ zwevende hartjes ============ */ .hearts{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0} .hearts span{position:absolute;bottom:-40px;font-size:var(--ts-9); color:var(--accent-2);opacity:0; animation:floatup linear infinite} @keyframes floatup{ 0%{transform:translateY(0) rotate(0deg);opacity:0} 12%{opacity:.35} 85%{opacity:.18} 100%{transform:translateY(-110vh) rotate(28deg);opacity:0}} /* De zwevende merkjes dragen de zachte toon van de oude hartjes: CSS wint van het stroke-attribuut in de SVG. */ .hearts span svg path{stroke:var(--accent-2)} .hearts span svg circle{fill:var(--accent-2)} /* ============ het kloppende merk ============ */ /* Verzoek Jeroen 11-08: het hart met het deurtje mag af en toe bewegen zoals sommige oude hartjes deden. Spaarzaam gebruiken (logo.merk met klop=true): een klop is een accent, geen behang. */ svg.merk-klop{animation:merkklop 1.7s ease-in-out infinite; transform-origin:50% 55%} @keyframes merkklop{ 0%,100%{transform:scale(1)} 14%{transform:scale(1.13)} 28%{transform:scale(1.02)} 42%{transform:scale(1.09)}} @media (prefers-reduced-motion:reduce){svg.merk-klop{animation:none}} /* ============ het levende huis (fase 5) ============ */ /* De doorsnede is in de huisronde van 19-08 vervangen door de plattegrond in templates/huisbeeld.html, met een eigen aan-animatie op `.hs-schijn` (verderop in dit bestand). De regels die hier stonden hingen aan `.hs-doorsnede`, `.licht` en `.hs-tuin` — drie klassen die daarna in geen enkel sjabloon meer voorkwamen, dus ze deden niets. Weg (P3, 21-08). `@keyframes hs-erin` blijft: die wordt hieronder nog gebruikt door het meubelstuk van een ingerichte kamer. */ @keyframes hs-erin{from{opacity:0}to{opacity:1}} /* De mist drijft heel licht — een kamer die nog ontdekt wil worden. */ .hs-mist svg g{animation:hs-mistdrift 7s ease-in-out infinite alternate} @keyframes hs-mistdrift{from{transform:translateX(-1.2px)} to{transform:translateX(1.2px)}} /* Stof dwarrelt heel traag — een kamer die om een nieuwe blik vraagt. */ .hs-stofjes{animation:hs-stofdrift 9s ease-in-out infinite alternate} @keyframes hs-stofdrift{from{opacity:.45;transform:translateY(.6px)} to{opacity:.9;transform:translateY(-.9px)}} @media (prefers-reduced-motion:reduce){.hs-stofjes{animation:none}} /* De echo (5.27): zacht ingesprongen, zodat hij als terzijde leest. */ .hs-echo{border-left:2px solid var(--accent-2);padding-left:10px} /* Een ingerichte kamer draagt warm licht en zijn eigen meubelstuk. */ .hs-kamer.ingericht{background:var(--glow);border-color:var(--accent)} .hs-kamer .hs-meubel{margin-left:6px;display:inline-block; animation:hs-erin 1.2s ease both} @media (prefers-reduced-motion:reduce){ .hs-kamer .hs-meubel{animation:none} .hs-mist svg g{animation:none} } /* ============ beweging en onderbreking (ontwerpopdracht 01-09) =========== Gevraagd: meer interactie, pop-ups en bewegende onderdelen. Alles hier houdt zich aan twee randen die de rest van dit stijlblad ook al kent: * wie `prefers-reduced-motion` aan heeft, krijgt hetzelfde scherm zonder beweging. Niet een beetje minder: geen; * niets hangt af van JavaScript voor de INHOUD. Bewegen mag, verbergen niet. Een kaart die zonder script onzichtbaar blijft, is een kapotte pagina voor wie scripts blokkeert. Waarom een frequentiegrens bij de onderbreking en niet alleen mooie vormgeving: dit product ontleent zijn geloofwaardigheid aan rust. Eén kaart midden op het scherm per week is een gebeurtenis; drie per sessie maakt er een website van. De grens zit in de code (`onderbreking_van_de_week`), niet in de smaak van wie hem aanroept. */ /* De dagkaart komt binnen in plaats van er te staan. */ .komt-binnen{animation:binnenkomst .5s cubic-bezier(.22,.9,.3,1) both} @keyframes binnenkomst{ from{opacity:0;transform:translateY(14px) scale(.985)} to{opacity:1;transform:none} } /* De onthulling draait om. Twee vlakken op één plek; zonder script staat de achterkant er gewoon, want `.omslag` krijgt zijn hoogte van de inhoud. */ .omslag{position:relative;perspective:1200px} .omslag .kant{backface-visibility:hidden;transition:transform .55s cubic-bezier(.3,.9,.3,1)} .omslag.om .kant.voor{transform:rotateY(180deg)} .omslag .kant.achter{position:absolute;inset:0;transform:rotateY(180deg)} .omslag.om .kant.achter{transform:none} /* Zonder JavaScript bestaat het omdraaien niet en staan beide kanten gewoon onder elkaar. Dat is minder mooi en even bruikbaar. */ html:not(.js) .omslag .kant.achter{position:static;transform:none;margin-top:var(--sp-3)} /* Het zachte berichtje rechtsonder. Nooit modaal: het legt niets stil, het vangt geen focus, en het is weg te klikken. */ /* `bottom:76px` en niet 16: de zwevende feedbackknop staat rechtsonder op 18px (op smal scherm 12px) en is 44px hoog. Een opduikmelding op 16px legde zich daar bovenop, en met z-index 60 tegen 20 won de melding. Dezelfde correctie die `#pwa-vraag` op 20-08 al kreeg, nu voor elke opduikmelding. */ .opduik{position:fixed;right:16px;bottom:76px;z-index:60;max-width:min(360px,calc(100vw - 32px)); background:var(--card);border:1px solid var(--rule);border-radius:var(--r-small); box-shadow:var(--shadow);padding:var(--sp-3) var(--sp-4); animation:opduiken .45s cubic-bezier(.22,.9,.3,1) both} /* P3-11 (15-09): ruimte voor de sluitknop, die absoluut in de hoek staat. Bij de langere vertalingen van laat_kicker kon de eerste tekstregel op 320 px tot in het tikdoel van 44 px lopen. */ .opduik .kicker{padding-right:38px} .opduik .weg{position:absolute;top:4px;right:4px} @keyframes opduiken{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} @media (max-width:480px){.opduik{left:16px;right:16px;max-width:none}} /* Het kiertje: één regel die zacht verschijnt onder de vraag die je net beantwoordde. Geen sprong, geen nieuw scherm. */ .kiertje{animation:kier .6s ease both;border-left:2px solid var(--accent-2); padding-left:var(--sp-3);margin-top:var(--sp-3)} @keyframes kier{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}} /* De kamers van het huis reageren op aanwijzen én op toetsenbordfocus. Focus staat er met opzet bij: een effect dat alleen op hover zit, bestaat niet voor wie met het toetsenbord loopt. */ a.hs-raam,a.hs-kist{transition:filter .25s ease,opacity .25s ease} a.hs-raam:hover,a.hs-raam:focus-visible, a.hs-kist:hover,a.hs-kist:focus-visible{filter:brightness(1.08) saturate(1.1)} @media (prefers-reduced-motion:reduce){ .komt-binnen,.opduik,.kiertje{animation:none} .omslag .kant{transition:none} a.hs-raam,a.hs-kist{transition:none} } /* ============ telefoon ============ */ /* Zelfde pagina, andere maat: op een smal scherm moet de vraag mét knoppen in één oogopslag passen. Alles wat daarboven ruimte vrat wordt compact. */ /* De kopbalk knelt eerder dan de telefoon-drempel. Gemeten op 08-08: bij een venster van 716px liep de nav door tot x=796 en vielen FR, ES en 中文 buiten beeld — en omdat body op `overflow-x:clip` staat, komt er geen scrollbalk, dus die drie talen waren onbereikbaar met muis én met vinger. De band liep van 701px (waar de mobiele behandeling ophield) tot ongeveer 813px. De grens ligt nu op 880px: dat is de max-width van .wrap, dus daarboven kan de balk per definitie niet meer knellen. Het taalmenu klapt in dezelfde band achter de 🌐-knop, wat de balk 165px scheelt; de zijwaartse scroll met vervaging is het vangnet daaronder. */ /* De balk mag op ELKE breedte smelten, niet alleen op de telefoon (P1-3, 11-09). Dit stond eerst binnen `@media (max-width:880px)`, en dat was net verkeerd: `.wrap` is zelf `max-width:880px`, dus boven die breedte groeit de kop niet mee terwijl de bescherming juist wegvalt. Tussen 881px en ongeveer 1000px liep de nav daardoor buiten de kaart, en `body{overflow-x:clip}` maakte wat eraf viel onbereikbaar: geen scroll, geen toets, geen tik. Wat daar als eerste afviel was het taalmenu, want dat staat achteraan en is op brede schermen volledig uitgeklapt (zes talen, `.taalbol` is dan verborgen). Het stijlblad kende dit gat al: regel 1524 e.v. beschrijft precies dit gedrag voor de weergavenaam en repareerde het daar met `max-width:14ch`. Diezelfde redenering geldt hier, alleen dan voor de hele balk. */ header.site nav{flex-wrap:nowrap;overflow-x:auto;min-width:0; scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg,#000 85%,transparent); mask-image:linear-gradient(90deg,#000 85%,transparent)} header.site nav::-webkit-scrollbar{display:none} header.site nav a,header.site nav .me{white-space:nowrap;flex:0 0 auto} @media (max-width:880px){ .taalbol{display:inline-flex;align-items:center;justify-content:center; min-width:44px;min-height:44px} .js .taalopties{display:none} .js .taalopties.open{display:inline-flex} } /* LET OP, DIT BLOK STAAT MIDDEN IN HET BESTAND (M-12-09-2, 12-09). Een regel hier heeft dezelfde specificiteit als dezelfde selector verderop zonder media-vraag, en bij gelijkspel wint de LAATSTE. Tien lettergroottes stonden hier daarom voor niets: h1, h2, h3, table, .banner, .illu-bij, .scene, .qtext, .aanmoediging en .stat .n kregen allemaal alsnog de bureaubladmaat. Het commentaar verderop beschreef zelfs uitgebreid een h3-reparatie die nooit is aangekomen. Het blok kan niet zomaar naar het eind: daar staan smallere media-vragen (480px) die juist NA deze horen te komen. Vandaar het voorvoegsel `html` op de tien getroffen regels, dat de specificiteit een punt verhoogt en de volgorde daarmee irrelevant maakt. Zet je hier een nieuwe regel neer: controleer of dezelfde selector verderop nog eens kaal voorkomt. tests/test_stijlcascade.py blok [6] doet dat sinds vandaag automatisch. */ @media (max-width:700px){ /* Niets onder 13 pixels op een telefoon (dagelijkse ronde 10-09, P3-10). De twee onderste treden van de trap waren 11 en 12 pixels, en juist op de telefoon leunden negen regels erop: de navigatiebalk, de voortgangsbalk, de meta-chips, het bijschrift onder de tekening, het label boven het notitieveld, de voetregel onder de vraag, de tabellen, de kicker en de aslabels van het spinnenweb. Dat is precies de tekst die een lezer van tachtig niet meer haalt, en de tool is voor 18 tot 80. Eén plek verhogen in plaats van negen regels los: de trap zelf. De dragende maten (14 tot 16 pixels) blijven zoals ze waren, dus de bladspiegel verschuift niet -- alleen de bodem komt omhoog. */ :root{--ts-1:13px;--ts-2:14px} .wrap{padding:0 12px 48px} header.site{padding:10px 0 8px;margin-bottom:10px} /* Kop op één regel: merknaam kleiner en nooit gebroken; de navitems wrappen niet maar scrollen zijwaarts binnen de nav zelf. Het taalmenu is op telefoon alleen het 🌐-icoon; een tik erop (focus) toont de talen — inclusief 中文, dat nergens verticaal mag breken. */ .brand{font-size:var(--ts-5);white-space:nowrap;flex:0 0 auto} /* Scrollbare nav met een zichtbare hint: zonder de vervaging rechts leek de balk compleet terwijl 'uitloggen' en het taalmenu buiten beeld stonden (review 05-08). */ header.site nav{gap:var(--sp-3);font-size:var(--ts-2);flex-wrap:nowrap;overflow-x:auto; min-width:0;scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg,#000 85%,transparent); mask-image:linear-gradient(90deg,#000 85%,transparent)} header.site nav::-webkit-scrollbar{display:none} header.site nav a,header.site nav .me{white-space:nowrap;flex:0 0 auto} /* Ingeklapt achter de 🌐-knop. Eerder stond hier alleen :focus-within, maar niets in een display:none-tak kan focus krijgen — het menu ging dus voor niemand open (review 06-08). Nu doet een echte knop het werk; :focus-within blijft als vangnet staan. Zonder JS (html zonder .js) blijft de lijst uitgeklapt: taalwissel hangt nooit van JS af. */ .taalbol{display:inline-flex;align-items:center;justify-content:center; min-width:44px;min-height:44px} .js .taalopties{display:none} /* Alleen .open, geen :focus-within: die hield het menu open zodra Escape de focus terugzette op de knop, waardoor sluiten niet werkte (review 06-08 avond). Zonder JS is de regel overbodig, want dan geldt .taalopties{display:inline-flex} gewoon. */ .js .taalopties.open{display:inline-flex} .progress{padding:7px 12px;margin-bottom:10px;font-size:var(--ts-2)} /* Meta-chips samengevouwen tot één regel: zijwaarts scrollbaar, nooit een stapel die de vraag onder de vouw duwt. */ /* Met dezelfde vervaging rechts als de nav hierboven, en om precies dezelfde reden (dagelijkse ronde 10-09, P2). Zonder die hint leek de rij compleet, terwijl er op 320px maar een of twee chips passen en er achter de rand nog vijf links stonden: de hal, verkennen, nog een vraag, de capsule en de deurtjes. Er was geen scrollbalk en geen fade, dus geen enkel signaal dat er meer was. */ .spel{gap:var(--sp-2);margin-bottom:var(--sp-2);flex-wrap:nowrap;overflow-x:auto; scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent); mask-image:linear-gradient(90deg,#000 88%,transparent)} .spel::-webkit-scrollbar{display:none} /* Een chip die alleen tekst is mag klein blijven; een chip die een LINK is of er een bevat, is een tikdoel en houdt de norm van 44 pixels aan. Dat gold al voor .chip.klein en voor een chip met een invoerveld, en viel alleen bij de kale a.chip weg (dagelijkse ronde 10-09, P2). */ .chip{padding:4px 10px;font-size:var(--ts-2);flex:0 0 auto;white-space:nowrap} html .banner{padding:9px 12px;font-size:var(--ts-3);margin-bottom:10px} /* Hier stond `border-radius:14px`, en de review van 07-08 meldde dat het bewust harde man-thema (--r 6px) daardoor op de telefoon dezelfde zachte hoek zou krijgen als het vrouw-thema. In de browser nagemeten: dat gebeurde niet. Deze regel staat vóór de basisregel `.card` (regel ~233) en heeft dezelfde specificiteit, dus de latere `border-radius:var(--r)` won altijd. De declaratie deed dus niets en is weggehaald in plaats van "hersteld" — gemeten op 375px: v 22px, m 6px, n 16px, precies de themawaarden. */ .card{padding:16px 16px;margin-bottom:var(--sp-3)} .illu{margin:0 0 8px} .illu svg{height:min(var(--illu-h,110px), 66px)} /* Bij meer dan vijf antwoordopties wint de vraag het van de tekening. */ .veel-opties .illu svg{height:min(var(--illu-h,110px), 48px)} html .illu-bij{font-size:var(--ts-2);margin-top:2px} html .scene{font-size:var(--ts-5);margin-bottom:10px;padding-left:var(--sp-3)} html .qtext{font-size:var(--ts-8)} .opts{gap:var(--sp-2);margin:10px 0 4px;grid-template-columns:1fr 1fr} .opt{padding:8px 10px;font-size:var(--ts-3);text-align:center} .opt[data-v=prive]{grid-column:1 / -1} /* Een vijfpuntsschaal in twee kolommen laat de vijfde knop alleen achter, met een leeg vak ernaast. Dat raakt de drukste schermen van de tool: de vraag van vandaag, de eerste vraag op de startpagina en het scherm waar de antwoordlink uit de post op landt. `.choices3` loste dit al op met flex; dit doet hetzelfde voor het grid. */ .opts .opt:last-child:nth-child(odd){grid-column:1 / -1} .care{font-size:var(--ts-3);padding:8px 11px;margin:8px 0 2px} .qfoot{font-size:var(--ts-2);margin-top:10px} html .aanmoediging{font-size:var(--ts-4);margin-bottom:var(--sp-2)} .panel{padding:var(--sp-3) var(--sp-4)} .statrow{gap:var(--sp-2)} .stat{padding:9px 12px;flex-basis:110px} html .stat .n{font-size:var(--ts-8)} html h1{font-size:var(--ts-9)} html h2{font-size:var(--ts-8)} /* h3 hoort hier ook (defect P2-G, 20-08). Deze media-regel zette h1 en h2 kleiner maar liet h3 op de basiswaarde van 20px staan; op een telefoon was een h3 dus GROTER dan de h2 erboven. Zeven schermen met beide niveaus lieten dat zien, verkennen.html met 3 h2's en 29 h3's het duidelijkst. Dat het een week bleef liggen, kwam doordat de cascadebewaker niet media-bewust was; dat is sinds vandaag ook opgelost. */ html h3{font-size:var(--ts-7)} /* En h4 erbij (D-18-09-8, 18-09). De regel hierboven zette h3 op 17px, maar h4 staat buiten elke media-regel al op 17px. Op de telefoon waren een kop en zijn eigen subkop dus exact even groot, terwijl de structuur (h3 boven h4, ouder en kind) een verschil belooft. Zichtbaar op waar_sta_ik.html, waar een h3 en een h4 in dezelfde kaart onder elkaar staan. Dezelfde fout als hierboven, een niveau verder: wie h3 meenam, vergat h4. tests/test_ronde_1809b.py blok [4] eist nu een dalende reeks op élke breedte, dus niet meer per niveau maar over de hele trap. */ html h4{font-size:var(--ts-6)} .hearts span{font-size:var(--ts-6)} html table{font-size:var(--ts-2)} th,td{padding:6px 6px} } @media (prefers-reduced-motion:reduce){ .hearts span{animation:none;display:none} *{transition:none!important;animation:none!important}} /* ============ kaarten en koppen ============ */ .card{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow); padding:var(--sp-6) var(--sp-6);margin-bottom:var(--sp-5);animation:rise .45s ease both} @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .kicker{font-size:var(--ts-3);letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:700} /* "Wat is dit" (W-5, 08-09): het vraagteken naar Zo werkt het; 24px tikdoel. */ .uitleg-meer{display:inline-block;margin-left:6px;width:24px;height:24px;line-height:22px;text-align:center;border:1px solid var(--rule-sterk);border-radius:50%;font-size:var(--ts-3);text-decoration:none;vertical-align:middle} /* Juridische pagina's (D-08-09b-7): honderd kale alinea's zonder leesbreedte liepen tot 880 px; dezelfde grens als .brief. */ .card.jur{max-width:var(--lees-breed)} /* Het vraagteken "wat is dit" is 24 px groot en houdt dat formaat in de tekst; het tikdoel eromheen is 44 px (D-08-09b-12), onzichtbaar. */ .uitleg-meer{position:relative} .uitleg-meer::after{content:"";position:absolute;inset:-10px} /* De kop in een uitklapregel (D-08-09-13): tien keer uitgeschreven als inline-stijl, nu één klasse. */ .summary-kop{display:inline;margin:0; /* P3-13 (15-09): de kop van een heel blok erfde `text-transform:uppercase` en `color:var(--soft)` van .rt-groep, en oogde daardoor zwakker dan een subkop eronder. Dat is hierarchie op zijn kop. Het gedempte kapitaaltje blijft bestaan als klein label voor de kop (.kicker), niet als de kop zelf. */ color:var(--ink);text-transform:none} /* h3 hoorde hier niet bij en viel daardoor buiten het profielpaneel terug op de kale browserstijl: vet systeemfont tussen de serif-koppen (review 06-08). Nu één regel voor alle drie de niveaus. */ h1,h2,h3,h4{font-family:var(--display);font-weight:500;margin:8px 0 6px;line-height:1.15} h1{font-size:clamp(var(--ts-10),5.5vw,38px)} h2{font-size:var(--ts-9)} h3{font-size:var(--ts-8)} /* h4 hoorde hier niet bij (D-7, dagtaak 30-08). Het stijlblad kende het element helemaal niet, terwijl admin_match.html er een gebruikte en de vier eigenschappen met de hand had overgeschreven uit de regel hierboven, op de lettergrootte na. Die kop viel daardoor terug op de standaard van de browser. */ h4{font-size:var(--ts-7)} /* Eén kleinere kopmaat in plaats van vier losse getallen (advies 21-08). `duo.html` zette 19px inline op een h2, `kiesblok.html` 18px, en `samen.html` twee keer 15px op een h3 — kleiner dan de lopende tekst eromheen. Vier plekken waar dezelfde bedoeling ("dit is een kop, maar een bescheiden") vier verschillende getallen kreeg. Wie er een vijfde bij zet, hoort deze klasse te gebruiken. */ h2.kop-klein{font-size:var(--ts-8)} h3.kop-klein{font-size:var(--ts-7)} .lede,.note-text{color:var(--soft);font-size:var(--ts-5);max-width:var(--lees-breed)} /* ============ voortgang ============ */ .progress{position:sticky;top:0;z-index:5;background:var(--card);border-radius:0 0 var(--r-small) var(--r-small); box-shadow:var(--shadow);padding:10px 18px;display:flex;align-items:center;gap:var(--sp-4); font-size:var(--ts-3);color:var(--soft);margin-bottom:20px} /* De balk is een UI-component en heeft dus 3:1 nodig (WCAG 1.4.11). Het lege vlak haalde 1,22:1 tegen de kaart en het begin van de vulling 1,19:1 tegen dat vlak — nagerekend in alle drie de thema's (review 07-08). Bij .dtrack staat er geen cijfer naast, dus daar is de balk het énige signaal. Een rand van 1px maakt het vlak zichtbaar, en de vulling begint niet meer op de lichtste tint. Nagerekend na de wijziging: 3,61 / 4,62 / 3,88 voor de rand en 3,11 / 3,86 / 3,60 voor de vulling (v / m / n). */ .track{flex:1;height:8px;background:var(--glow);border-radius:99px;position:relative; border:1px solid var(--rule-sterk);box-sizing:border-box} .track .bar-fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:99px; background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 80%,var(--accent-2)),var(--accent)); transition:width .7s cubic-bezier(.2,.8,.3,1)} .track .pin{position:absolute;top:50%;translate:-50% -54%;font-size:var(--ts-5); transition:left .7s cubic-bezier(.2,.8,.3,1);filter:drop-shadow(0 1px 2px rgba(0,0,0,.15))} .theme-v .track .pin{animation:pulse 1.8s ease-in-out infinite} @keyframes pulse{0%,100%{scale:1}50%{scale:1.25}} .pct{font-variant-numeric:tabular-nums;font-weight:700;color:var(--accent)} /* ============ illustraties ============ */ .illu{display:flex;justify-content:center;margin:2px 0 16px;color:var(--accent);opacity:.9} .illu svg{height:var(--illu-h,110px);width:auto;max-width:100%;overflow:visible} .illu .d{stroke-dasharray:400;stroke-dashoffset:400; animation:trek 1.1s cubic-bezier(.3,.7,.3,1) forwards; animation-delay:calc(var(--i,0) * .11s)} @keyframes trek{to{stroke-dashoffset:0}} .illu .beat{transform-origin:center;transform-box:fill-box; animation:kloppen 1.9s ease-in-out infinite} @keyframes kloppen{0%,100%{scale:1;opacity:.75}50%{scale:1.22;opacity:1}} .illu .twinkle{animation:fonkel 2.6s ease-in-out infinite} @keyframes fonkel{0%,100%{opacity:.25}50%{opacity:1}} .illu .flicker{transform-origin:bottom;transform-box:fill-box; animation:flakker 1.5s ease-in-out infinite} @keyframes flakker{0%,100%{scale:1 1;opacity:.85}35%{scale:.94 1.08;opacity:1}70%{scale:1.05 .96;opacity:.9}} .illu .steam{stroke-dasharray:26;animation:damp 3.2s linear infinite;opacity:.5} @keyframes damp{0%{stroke-dashoffset:26;opacity:0}30%{opacity:.55}100%{stroke-dashoffset:-26;opacity:0}} .illu .rain{stroke-dasharray:6 10;animation:druppel 1.4s linear infinite} @keyframes druppel{to{stroke-dashoffset:-16}} .theme-v .illu{color:var(--accent)} .theme-m .illu{color:var(--soft);opacity:.75} .illu-bij{font-family:var(--display);font-style:italic;font-size:var(--ts-4);color:var(--soft); text-align:center;margin:6px 0 0;max-width:var(--lees);animation:rise .6s .5s ease both} /* bewegingen voor de tekeningen van deel drie */ .illu .zwaai{animation:zwaai 3.4s ease-in-out infinite} @keyframes zwaai{0%,100%{rotate:-4deg}50%{rotate:4deg}} .illu .knipper{animation:knipper 2.1s ease-in-out infinite} @keyframes knipper{0%,100%{opacity:.18}45%{opacity:1}} .illu .drup{animation:drup 2.4s ease-in infinite;transform-box:fill-box} @keyframes drup{0%{translate:0 -14px;opacity:0}25%{opacity:.8}100%{translate:0 12px;opacity:0}} .illu .zand{animation:zand 4s ease-in-out infinite;transform-origin:top;transform-box:fill-box} @keyframes zand{0%{scale:1 1}100%{scale:1 .25}} .illu .golfje{stroke-dasharray:30;animation:golfje 1.8s linear infinite;opacity:.5} @keyframes golfje{0%{stroke-dashoffset:30;opacity:0}40%{opacity:.6}100%{stroke-dashoffset:-30;opacity:0}} .illu .glans{stroke-dasharray:40;stroke-dashoffset:40;animation:glans 3.6s ease-in-out infinite} @keyframes glans{0%,70%{stroke-dashoffset:40}85%{stroke-dashoffset:0}100%{stroke-dashoffset:-40}} .illu .knipoog{animation:knipoog 4.2s ease-in-out infinite;transform-origin:center;transform-box:fill-box} @keyframes knipoog{0%,92%,100%{scale:1 1}96%{scale:1 .12}} .illu .vlieg{animation:vlieg 3.2s ease-out infinite} @keyframes vlieg{0%{translate:0 0;opacity:0}15%{opacity:.9}100%{translate:34px -30px;opacity:0}} /* ============ spinnenweb ============ */ .radar{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);margin:6px 0 4px} /* M-12-09-9 (12-09): hier stond alleen een HOOGTE met max-width:100%. De viewBox is vierkant, dus op een smal scherm knipte max-width de breedte terug naar de kaartbreedte (264px op 320px) terwijl de doos 320 tot 340px hoog bleef: 56 tot 76px leegte onder het web, juist waar de ruimte al krap is. Nu stuurt de BREEDTE en volgt de hoogte de verhouding; op een breed scherm is de maat ongewijzigd. */ .radar svg{width:min(var(--radar-h,340px),100%);height:auto;aspect-ratio:1;color:var(--ink);overflow:visible} .radar .aslabel{font-size:var(--ts-1);fill:var(--soft); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif} /* D-18-09-9 (18-09): de rand stond op kaal var(--kleur), en voor de tweede persoon is dat --sage. In theme-v is dat #7FA88B tegen een witte kaart: 2,67:1, terwijl een grafisch element dat betekenis draagt er 3 moet halen (WCAG 1.4.11). Datzelfde getal staat verderop in dit bestand al eens afgekeurd, bij de rand van de meldingen, en daar met --ink gemengd; de radar kreeg die correctie nooit. De VULLING mag kaal blijven: die staat op 16 procent dekking en draagt geen betekenis. */ .radar .vorm{fill:var(--kleur);fill-opacity:.16; stroke:color-mix(in srgb, var(--kleur) 65%, var(--ink));stroke-width:2; stroke-linejoin:round;transform-origin:150px 150px; animation:groei .9s cubic-bezier(.25,.9,.3,1) both;animation-delay:calc(var(--i) * .18s)} @keyframes groei{from{scale:.15;opacity:0}to{scale:1;opacity:1}} .radar .knoop{opacity:0;animation:opkomen .4s ease forwards; animation-delay:calc(.5s + var(--i) * .04s)} @keyframes opkomen{to{opacity:1}} .radar .knoop:hover{r:5.5} .radar-legenda{display:flex;gap:var(--sp-4);flex-wrap:wrap;justify-content:center; font-size:var(--ts-3);color:var(--soft)} /* De uitkomsten van het spinnenweb in gewone tekst (13-08): leesbaar voor een schermlezer én op papier, waar een lijstje het vaak wint van een web. */ .radar-lijst{list-style:none;padding:0;margin:12px 0 0;max-width:var(--lees); font-size:var(--ts-3);color:var(--soft)} .radar-lijst li{display:flex;justify-content:space-between;gap:var(--sp-3); padding:3px 0;border-bottom:1px solid var(--rule)} .radar-lijst li>*{min-width:0;overflow-wrap:anywhere} .radar-as{color:var(--ink)} /* Geen nowrap meer (02-09): hier staat een weergavenaam in, en die heeft geen tekenlimiet. Met `body{overflow-x:clip}` verdwijnt een overloop stil, zonder scrollbalk -- je ziet het niet gebeuren. Zelfde reparatie als eerder bij `.brief` en `header.site .me`. */ .radar-waarde{overflow-wrap:anywhere;margin-left:var(--sp-2)} .radar-legenda span{display:flex;align-items:center;gap:var(--sp-2)} .radar-legenda i{width:11px;height:11px;border-radius:3px;display:inline-block} /* ============ spelelementen ============ */ .spel{display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:center;margin-bottom:var(--sp-4)} .chip{display:inline-flex;align-items:center;gap:var(--sp-2);padding:7px 14px;border-radius:99px; background:var(--card);box-shadow:var(--shadow);font-size:var(--ts-3);color:var(--soft)} /* Een chip die zelf iets bedient — een label met een vakje erin, zoals de voorkeurschips op /overzicht — is een tikdoel en valt onder dezelfde ondergrens als .chip.klein hierboven. Ze stonden op 31px (dagtaak 10-08): de correctie van destijds gold alleen voor chips die als link dienstdoen, en deze twaalf-per-pagina vielen daarbuiten. */ .chip:has(input){min-height:44px} /* Een label met de keuzeknop erín ÍS het tikdoel, dus hoort het ook de maat te hebben (P2, 21-08). 48 van die labels staan verspreid over 23 sjablonen; ze erfden alleen een lettergrootte en verder niets, en kwamen daarmee op ongeveer 20px uit — 55% onder de ondergrens die dit bestand zelf op drie plekken met naam noemt. `.optkeuze label` had de maat al, maar dáár staat de input als broer naast het label en niet erin; die variant wordt door deze regel dus niet geraakt. Waar een sjabloon zelf een `display` inline meegeeft wint die van de flex hieronder — het tikdoel wordt dan alsnog 44px hoog, alleen zonder de verticale centrering. Dat is de bedoeling: de maat is wat telt. */ /* `min-width` erbij op 29-08 (dagtaak, defect D-4). De hoogte stond er al, maar een label dat ALLEEN een vakje omsluit (zonder tekst ernaast) bleef zo'n 13 tot 16px breed -- de standaardmaat van de browser. Voor de labels die wél tekst dragen is deze regel een lege huls, want die zijn allang breder; hij raakt precies de kale gevallen. Zelfde redenering als bij de taalknoppen op 29-08 (B-2), waar de hoogte ook was doorgerekend en de breedte niet. */ label:has(> input[type=radio]), label:has(> input[type=checkbox]){ min-height:44px;min-width:44px;display:flex;align-items:center; gap:var(--sp-2)} /* Een vakje zonder tekst midden in een regel (D-13-09-9, 13-09). Het hoort in een label, anders geldt de 44px-regel hierboven niet; maar met `flex` zou de rest van die regel eronder vallen. */ label.kiesvak{display:inline-flex;vertical-align:middle} .chip b{color:var(--ink);font-variant-numeric:tabular-nums} /* Amber is als tekstkleur te licht (2,5:1); de vlam blijft amber via het icoon, de tekst zelf leest in de inktkleur (review 05-08). */ .chip.vlam{color:var(--ink)} /* En dat gold net zo goed voor `.em` erbinnen, die de correctie hierboven stil terugdraaide: kaal --amber op --card is 2,48:1 in theme-v, precies het getal dat drie regels hoger al werd afgekeurd. Dezelfde menging als het icoon hieronder, maar dieper, want dit is tekst (4,5:1) en geen grafisch element (3:1). Nagerekend op --card: 5,63:1 (v), 8,40 (m), 6,53 (n), 8,57 (admin), tegen 2,48 / 3,67 / 3,01 / 4,00 voor de kale amber die er stond. */ .chip.vlam .em{color:color-mix(in srgb,var(--amber) 45%,var(--ink))} .chip.zondag{font-size:var(--ts-5);padding:9px 16px; border:1.5px solid color-mix(in srgb,var(--ink) 52%,var(--accent-2)); background:linear-gradient(90deg,var(--glow),var(--card));color:var(--ink)} .badge{display:inline-flex;align-items:center;gap:var(--sp-2);padding:9px 16px;border-radius:99px; background:linear-gradient(90deg,var(--glow),var(--card)); /* Componentgrens: was 1,40-1,46:1 tegen de kaart, nu 3,81/4,34/3,87. Zelfde 52%-recept als --rule-sterk (review 07-08, WCAG 1.4.11). */ border:1.5px solid color-mix(in srgb,var(--ink) 52%,var(--accent-2)); font-size:var(--ts-4);font-weight:600;color:var(--ink);animation:pop .6s cubic-bezier(.2,1.5,.4,1) both} .badge .em{font-size:var(--ts-7)} .aanmoediging{font-family:var(--display);font-style:italic;font-size:var(--ts-6);color:var(--soft); text-align:center;margin:0 0 14px} /* ============ meldingen ============ */ .banner{border-radius:var(--r-small);padding:12px 16px;margin-bottom:var(--sp-4);font-size:var(--ts-5); background:var(--glow);color:var(--ink);border:1px solid var(--rule);animation:rise .4s ease both} .banner.milestone{background:linear-gradient(90deg,var(--glow),var(--card)); /* D-13-09-3: was var(--accent-2), en dat is een vlakkleur (zie regel 224). Als rand haalde hij 1,11 tot 1,39:1 in de vier thema's tegen een eis van 3,0. --rule-sterk geeft 3,64 tot 4,68:1. Zelfde reparatie als M-12-09-1. */ border-color:var(--rule-sterk);font-weight:600} .wink{display:flex;gap:var(--sp-3);align-items:flex-start;background:var(--glow); border-radius:var(--r);border-bottom-left-radius:var(--sp-1);padding:13px 17px;margin-bottom:var(--sp-4); font-size:var(--ts-5);color:var(--ink);animation:pop .5s cubic-bezier(.2,1.4,.4,1) both} @keyframes pop{from{opacity:0;transform:scale(.85) translateY(6px)}to{opacity:1;transform:none}} .wink .who{font-size:var(--ts-7)} .wink .who .ico{width:19px;height:19px} /* ============ de eerste-date-koffer (5.30) ============ Ruim gezet: dit wordt op een telefoon gelezen terwijl er iemand tegenover je zit, en soms uitgeprint. Grote regelafstand, geen versiering. */ .kf-lijst{margin:14px 0 0;padding-left:1.3em;max-width:var(--lees)} .kf-lijst li{margin:0 0 12px;line-height:var(--rh-ruim)} @media print{ .kf-lijst li{margin-bottom:var(--sp-4)} .btn, .kicker{display:none} } /* ============ de kist met twee sleutels (5.4) ============ Open gaat de kist met licht, niet met beweging: een kist die openklapt trekt de aandacht naar de animatie in plaats van naar wat erin ligt. */ .kist2-open{background:linear-gradient(180deg,var(--glow),var(--card))} .kist2-uit{margin-top:10px;display:grid;gap:var(--sp-2);max-width:420px} .kist2-rij{display:flex;gap:var(--sp-3);align-items:baseline; padding:9px 12px;border-radius:var(--r-small);background:var(--card); border:1px solid var(--rule-sterk)} .kist2-wie{flex:none;min-width:9ch;font-size:var(--ts-3);color:var(--soft)} /* ============ de sleutelbos (5.3) ============ Sleutels die niets openen, dus ook niets mogen opeisen: geen kader per sleutel, geen kolommen, gewoon een rustige lijst. */ .bos-lijst{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:var(--sp-3)} .bos-lijst li{display:flex;gap:var(--sp-3);align-items:flex-start} .bos-ikoon{flex:none;color:var(--accent);opacity:.9;margin-top:1px} .bos-lijst strong{font-weight:600} .bos-sinds{font-size:var(--ts-3);color:var(--soft);margin-left:7px} .bos-zin{display:block;font-size:var(--ts-4);color:var(--soft);max-width:var(--lees); margin-top:2px} /* ============ eigen iconen ============ Uit templates/iconen.html. Een emoji is een letter en gaat mee met de regelhoogte; een SVG is een blok en zakt zonder hulp naar de onderkant van de regel. Vandaar de vaste verschuiving in inline-context. In een flex-context (.chip, .wink, .care) doet align-items het werk al en zou vertical-align niets doen — het staat er alleen voor de rest. De lijn is iets lichter dan de tekst: bij gelijke sterkte trekt een icoon de aandacht wég van het woord ernaast, en het woord draagt de betekenis. */ .ico{vertical-align:-.19em;flex:none;opacity:.82} .chip .ico,.care .ico{opacity:.78} /* Het icoon stond op 2,5:1 in theme-v, tegen een eis van 3:1 voor een grafisch element (ronde 16-09, D-16). Precies dezelfde meting die amber hierboven als TEKSTkleur al afkeurde; het icoon is toen niet meegerekend. Donkerder gemengd met de inkt houdt de vlam amber en haalt de eis. */ .chip.vlam .ico{color:color-mix(in srgb,var(--amber) 72%,var(--ink));opacity:1} /* ============ de vraag ============ */ .scene{font-family:var(--display);font-style:italic;font-size:var(--ts-7);color:var(--soft); border-left:3px solid var(--accent-2);padding:2px 0 2px 16px;margin:0 0 18px} /* font-weight expliciet: .qtext is op de vraagpagina nu een h1, en de h1,h2-regel zou hem anders zwaarder zetten dan de

-varianten elders. Zo blijft het beeld overal exact gelijk. */ .qtext{font-size:clamp(var(--ts-vraag-min),3.6vw,var(--ts-vraag-max));font-family:var(--display);margin:var(--sp-vraag) 0 4px;line-height:1.3;font-weight:400} /* Zelfkennis toont vijf vragen onder elkaar; die mogen kleiner dan één vraag op een eigen pagina, maar niet onder het minimum van .qtext zelf — daar stonden ze op 18px, kleiner dan de passieve recap elders (dagtaak 10-08). */ .qtext-compact{font-size:clamp(var(--ts-vraag-min),2.6vw,var(--ts-vraag-compact-max));padding:0} /* Een paginakop die rustig mag ogen, zonder zijn niveau te verliezen. Stond als inline font-size:var(--ts-9) op registreren en de wachtwoordschermen, exact even zwaar als een h2 (dagtaak 10-08). */ .kop-kalm{font-size:clamp(var(--ts-9),4vw,30px)} .care{display:flex;gap:var(--sp-2);margin:12px 0 4px;padding:11px 14px;border-radius:var(--r-small); background:var(--glow);font-size:var(--ts-4);color:var(--soft)} .opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--sp-3);margin:20px 0 6px} /* De rand in rusttoestand is het enige signaal waar deze knop begint en eindigt; die moet 3:1 halen tegen het veldvlak (WCAG 1.4.11). Met --rule alleen was dat 1,30-1,67:1 in de vier thema's (review 06-08). */ .opt{padding:13px 16px;border:1.5px solid var(--rule-sterk);border-radius:var(--r-small); background:var(--field);color:var(--ink);font-size:var(--ts-5);text-align:left; min-height:44px; transition:transform .15s,box-shadow .15s,border-color .15s,background .15s} .opt:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--accent)} .opt:active{transform:scale(.97)} /* De rand van de gekozen knop is een UI-component: die moet 3:1 halen tegen het veldvlak (WCAG 1.4.11). De kleurfamilie blijft, maar de rand wordt gemengd met de inktkleur zodat hij ook echt te zien is; de dikkere rand plus vet lettertype maken de keuze bovendien niet-kleurafhankelijk. */ .opt.sel{border-width:3px;font-weight:700} .opt[data-v=ja].sel{border-color:color-mix(in srgb,var(--sage) 65%,var(--ink));background:color-mix(in srgb,var(--sage) 12%,var(--field))} .opt[data-v=proberen].sel{border-color:color-mix(in srgb,var(--amber) 60%,var(--ink));background:color-mix(in srgb,var(--amber) 12%,var(--field))} .opt[data-v=voorjou].sel{border-color:color-mix(in srgb,var(--lav) 65%,var(--ink));background:color-mix(in srgb,var(--lav) 12%,var(--field))} .opt[data-v=lieverniet].sel{border-color:color-mix(in srgb,var(--gray) 60%,var(--ink));background:color-mix(in srgb,var(--gray) 12%,var(--field))} .opt[data-v=grens].sel{border-color:var(--stop);background:color-mix(in srgb,var(--stop) 10%,var(--field))} .opt[data-v=geenidee].sel,.opt[data-v=prive].sel{border-color:var(--ink)} .opt[data-v=prive]{border-style:dashed;color:var(--soft)} /* `.notefield` is sinds 29-08 avond (D-5) zélf een

. Reden: het opschrift stond ernáást in plaats van eromheen, zonder `for` en zonder `id`, en daardoor hadden 244 velden in het beheer geen toegankelijke naam. Ids waren geen optie -- deze blokken staan in {% for %}-lussen en zouden botsen. Het omhulsel een label maken lost dat op zonder ids en zonder de opmaak te veranderen: het opschrift is nu een . Een label is van zichzelf inline, vandaar de expliciete display:block. */ .notefield{margin-top:14px;display:block} /* Ook `> label`, sinds 10-09 (dagelijkse ronde, P2). Er zijn twee vormen in omloop: `