/* ========================================================================== Eerst Genoemd — designsysteem Eén bestand, twee thema's. Scherm is donker, papier is licht. Alleen kleur verschilt. Letter, schaal, ruimte en vorm zijn identiek. Gebruik: of Printen forceert altijd het papierthema. CONTRASTREGELS — verschillend per taak, want één getal voor alles is een leugen: · lopende tekst en labels minimaal 6:1 (ruim boven de eis van 4,5) · tekst op een gekleurd vlak minimaal 4,5:1 (knoplabel, poort) · lijn die iets afbakent minimaal 3:1 (knoprand, invoerveld) · haarlijn tussen twee blokken vrijgesteld — die scheidt, hij draagt niets Elke waarde hieronder is doorgerekend. Waar een waarde de regel niet haalt, staat dat erbij in plaats van dat de waarde is weggemoffeld. ========================================================================== */ /* -------------------------------------------------------------------------- 1 · GRONDVERF — wát een kleur is. Componenten gebruiken deze nooit. -------------------------------------------------------------------------- */ :root { --eg-nacht-900: #191512; /* warm bijna-zwart, geen puur zwart */ --eg-nacht-800: #221C18; --eg-papier-100: #FBF7F0; --eg-papier-200: #F3EADB; --eg-inkt-900: #211C18; --eg-inkt-600: #5C5349; --eg-wit: #FFFFFF; --eg-grijs-400: #A9A099; /* Oranje — één merkkleur, drie rollen, want één waarde haalt het nergens: merkoranje #E86A1E op nacht 5,63:1 · op crème 3,02:1 → als tékst te weinig vulling #F2802F met inkt erop 6,35:1 → knop en poort op donker #FF8A3D op nacht 7,74:1 → tekstaccent op papier #8A3C0A op crème 7,20:1 → tekstaccent */ --eg-oranje-merk: #E86A1E; --eg-oranje-vul: #F2802F; --eg-oranje-licht: #FF8A3D; --eg-oranje-diep: #8A3C0A; --eg-groen-licht: #6FE0A0; /* op nacht 11,10:1 */ --eg-groen-diep: #14663F; --eg-amber-licht: #E8B93D; /* op nacht 9,88:1 */ --eg-amber-diep: #6F4E0C; --eg-rood-licht: #F2765C; /* op nacht 6,50:1 */ --eg-rood-diep: #96331C; } /* -------------------------------------------------------------------------- 2 · ROLLEN — wat een kleur DOET. Alleen deze namen komen in componenten. -------------------------------------------------------------------------- */ :root, [data-thema="scherm"] { color-scheme: dark; --grond: var(--eg-nacht-900); --grond-verhoogd: var(--eg-nacht-800); --grond-kaart: var(--eg-nacht-800); --tekst: var(--eg-wit); /* 18,15:1 */ --tekst-gedempt: var(--eg-grijs-400); /* 7,06:1 */ --tekst-op-vlak: var(--eg-inkt-900); /* 6,35:1 op de vulling */ --accent: var(--eg-oranje-licht); --accent-vlak: var(--eg-oranje-vul); --positief: var(--eg-groen-licht); --let-op: var(--eg-amber-licht); --negatief: var(--eg-rood-licht); --lijn: rgba(255,255,255,.14); /* haarlijn — scheidt, draagt niets */ --lijn-interactief: rgba(255,255,255,.40); /* 3,16:1 — knoprand, invoerveld */ --schaduw-kleur: rgba(0,0,0,.42); --balk-hoogte: 76px; /* gemeten hoogte van de vaste kopbalk */ /* Datareeks — zes series, grijswaarden 110 · 135 · 160 · 185 · 210 · 235, dus 25 stappen uit elkaar: de reeks valt ook in zwart-wit uit elkaar. */ --reeks-1: #FF862A; /* grijs 160 · 7,51:1 */ --reeks-2: #A3E8DF; /* grijs 210 · 13,10:1 */ --reeks-3: #C7A8F0; /* grijs 185 · 8,89:1 */ --reeks-4: #71A32F; /* grijs 135 · 6,03:1 */ --reeks-5: #267ED5; /* grijs 110 · 4,34:1 */ --reeks-6: #EDEBE9; /* grijs 235 · 15,26:1 */ --reeks-aantal: 6; --balk: var(--reeks-1); --balk-baan: rgba(255,255,255,.10); } [data-thema="papier"] { color-scheme: light; --grond: var(--eg-papier-100); --grond-verhoogd: var(--eg-papier-200); --grond-kaart: var(--eg-wit); --tekst: var(--eg-inkt-900); /* 15,81:1 */ --tekst-gedempt: var(--eg-inkt-600); /* 7,05:1 */ --tekst-op-vlak: var(--eg-inkt-900); --accent: var(--eg-oranje-diep); --accent-vlak: var(--eg-oranje-vul); --positief: var(--eg-groen-diep); --let-op: var(--eg-amber-diep); --negatief: var(--eg-rood-diep); --lijn: rgba(33,28,24,.12); --lijn-interactief: rgba(33,28,24,.50); /* 3,06:1 */ --schaduw-kleur: rgba(33,28,24,.10); /* Op papier zijn het er VIER. Zes series die 25 grijsstappen uit elkaar liggen, zakken aan de lichte kant onder 3:1 op crème — dan is de kleur nog wel te ónderscheiden maar niet meer te zíen. Meer dan vier categorieën op papier: geen kleur erbij, maar een tweede grafiek. */ --reeks-1: #894009; /* grijs 80 · 7,02:1 */ --reeks-2: #1E8B7C; /* grijs 105 · 3,90:1 */ --reeks-3: #956ACD; /* grijs 130 · 3,77:1 */ --reeks-4: #1B3D5E; /* grijs 55 · 10,48:1 */ --reeks-aantal: 4; --balk: var(--reeks-1); --balk-baan: rgba(33,28,24,.10); } /* Papier wint altijd bij printen, wat er ook op de html staat. */ @media print { :root, [data-thema="scherm"], [data-thema="papier"] { --grond: #FFFFFF; --grond-verhoogd: var(--eg-papier-200); --grond-kaart: #FFFFFF; --tekst: var(--eg-inkt-900); --tekst-gedempt: var(--eg-inkt-600); --tekst-op-vlak: var(--eg-inkt-900); --accent: var(--eg-oranje-diep); --accent-vlak: var(--eg-oranje-vul); --positief: var(--eg-groen-diep); --let-op: var(--eg-amber-diep); --negatief: var(--eg-rood-diep); --lijn: rgba(33,28,24,.25); --lijn-interactief: rgba(33,28,24,.55); --schaduw-kleur: transparent; --reeks-1: #894009; --reeks-2: #1E8B7C; --reeks-3: #956ACD; --reeks-4: #1B3D5E; --reeks-aantal: 4; --balk: #894009; --balk-baan: rgba(33,28,24,.12); } /* Zonder dit zet de browser alle vlakken uit en worden vol en half hetzelfde rondje. De vorm alléén redt het dan niet. */ * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } } /* -------------------------------------------------------------------------- 3 · LETTER — één familie, drie diktes. Nadruk komt uit formaat en ruimte. Twee werelden: 12-24 is bediening, 40-120 is uitspraak. Daartussen niets. Geen clamp(). Een vloeiende schaal levert onderweg maten op die niet bestaan — 31 px, 37 px — en dan is "daartussen niets" een leugen. Op een smal scherm zakt de kop dus niet weg maar stapt hij één trede van de ladder af, zodat élke gerenderde maat op de schaal blijft staan. -------------------------------------------------------------------------- */ :root { --letter: 'Space Grotesk', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; --dik-licht: 400; --dik-lezen: 500; --dik-vast: 600; --maat-12: 12px; --maat-14: 14px; --maat-16: 16px; --maat-18: 19px; --maat-24: 25px; --maat-40: 40px; --maat-48: 48px; --maat-72: 72px; --maat-120: 120px; --regel-titel: .90; /* 120 */ --regel-uitspraak: 1.00; /* 72 */ --regel-sectie: 1.00; /* 48 */ --regel-sub: 1.10; /* 40 */ --regel-24: 1.38; --regel-18: 1.65; --regel-16: 1.62; --regel-14: 1.55; --regel-12: 1.45; --regel-label: 1.00; --spatie-titel: -.04em; --spatie-uitspraak: -.04em; --spatie-sectie: -.04em; --spatie-sub: -.02em; --spatie-label: .02em; } /* Eén trede lager. De kop blijft de luidste stem op het scherm; hij wordt alleen niet meer beleefd kleiner dan de schaal toestaat. */ @media (max-width: 900px) { :root { --maat-120: var(--maat-72); --regel-titel: 1.00; --spatie-titel: -.04em; --maat-72: var(--maat-48); --regel-uitspraak: 1.00; --spatie-uitspraak: -.04em; --maat-48: var(--maat-40); --regel-sectie: 1.10; --spatie-sectie: -.02em; --maat-40: var(--maat-24); --regel-sub: 1.30; --spatie-sub: 0em; } } /* -------------------------------------------------------------------------- 4 · RUIMTE — twee schalen, twee taken. Binnen een component telt de reeks van 4. Het paginaritme telt in 20. -------------------------------------------------------------------------- */ :root { --r-2: 8px; --r-3: 12px; --r-4: 16px; --r-5: 20px; --r-6: 24px; --r-8: 32px; --r-10: 40px; --r-12: 56px; --band-half: 84px; --band: 152px; /* de enige afstand tussen hoofdstukken */ --breedte-inhoud: 1265px; --breedte-lezen: 650px; --rond-1: 4px; --rond-2: 8px; --rond-3: 16px; --rond-pil: 100px; --tempo-aanraking: .2s; /* wat je aanraakt */ --tempo-aankomst: .8s; /* wat binnenkomt */ --curve: cubic-bezier(.2,.6,.2,1); /* Geometrie is gelijk in beide thema's; alleen de kleur erin verschilt. */ --schaduw: 0 1px 2px var(--schaduw-kleur), 0 12px 40px var(--schaduw-kleur); } /* -------------------------------------------------------------------------- 5 · BASIS -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { background: var(--grond); } body { margin: 0; background: var(--grond); color: var(--tekst); font-family: var(--letter); font-size: var(--maat-18); font-weight: var(--dik-lezen); line-height: var(--regel-18); -webkit-font-smoothing: antialiased; } /* Tekstkleur wordt nooit aan overerving overgelaten: een tabel erft in quirks mode niet van zijn ouder maar van body — dan staat er wit op wit in het papierthema, en dat zie je pas op de geprinte versie. */ table, th, td { color: var(--tekst); } /* Wie een thema declareert, krijgt ook de tekstkleur van dat thema. Zonder dit erft een lichte baan de witte tekst van de donkere body — wit op crème, en dat zie je pas als je de pagina echt bekijkt. Tweede keer dat dezelfde overervingsval toesloeg; daarom staat hij nu in het systeem. */ /* Wie een thema declareert, schildert zijn eigen grond én zijn tekstkleur. Alleen de kleur meegeven is drie keer misgegaan in deze bouw: dan erft het blok de achtergrond van zijn ouder en staat er inkt op inkt, of wit op wit. Een thema is geen verfje maar een paar — grond en tekst horen bij elkaar. */ [data-thema="scherm"], [data-thema="papier"] { background-color: var(--grond); color: var(--tekst); } .eg-titel, .eg-uitspraak, .eg-sectiekop, .eg-subkop { margin: 0; font-weight: var(--dik-vast); } .eg-titel { font-size: var(--maat-120); line-height: var(--regel-titel); letter-spacing: var(--spatie-titel); text-transform: uppercase; } .eg-uitspraak { font-size: var(--maat-72); line-height: var(--regel-uitspraak); letter-spacing: var(--spatie-uitspraak); } .eg-sectiekop { font-size: var(--maat-48); line-height: var(--regel-sectie); letter-spacing: var(--spatie-sectie); text-transform: uppercase; } .eg-subkop { font-size: var(--maat-40); line-height: var(--regel-sub); letter-spacing: var(--spatie-sub); } .eg-inleiding { font-size: var(--maat-24); line-height: var(--regel-24); font-weight: var(--dik-lezen); margin: 0; max-width: var(--breedte-lezen); } .eg-tekst { font-size: var(--maat-18); line-height: var(--regel-18); font-weight: var(--dik-lezen); margin: 0; max-width: var(--breedte-lezen); } .eg-klein { font-size: var(--maat-14); line-height: var(--regel-14); color: var(--tekst-gedempt); margin: 0; } .eg-fijn { font-size: var(--maat-12); line-height: var(--regel-12); color: var(--tekst-gedempt); margin: 0; } /* Het hoofdstuklabel — de enige plek waar het accent tekst is, en het hoort bij de kop eronder, dus het staat er dicht tegenaan. */ .eg-hoofdstuk { font-size: var(--maat-14); font-weight: var(--dik-vast); line-height: var(--regel-label); letter-spacing: var(--spatie-label); text-transform: uppercase; color: var(--accent); margin: 0 0 var(--r-3); } /* -------------------------------------------------------------------------- 6 · COMPONENTEN -------------------------------------------------------------------------- */ .eg-omhulsel { max-width: var(--breedte-inhoud); margin: 0 auto; padding: 0 var(--r-6); } .eg-band { padding-block: var(--band); } /* -------------------------------------------------------------------------- R15 · DE INLEIDING STAAT ONDER DE KOP, NIET ERNAAST. Eerder stond hij ernaast om de lege rechterhelft te vullen. Dat werkte voor een inleiding van drie regels, maar zodra de inleiding één zin is gaan kop en zin met elkaar concurreren: twee tekstblokken op dezelfde hoogte, en het oog weet niet welke eerst. Onder elkaar leest het als een kop met een onderschrift, en de open rechterhelft is dan lucht in plaats van een gat. Eén patroon voor de hele site — er is geen variant met de inleiding ernaast. -------------------------------------------------------------------------- */ .eg-inleidblok { display: grid; gap: var(--r-5); } .eg-inleidblok__kop > :first-child { margin-top: 0; } .eg-inleidblok__kop > :last-child { margin-bottom: 0; } .eg-inleidblok__zij > :first-child { margin-top: 0; } .eg-inleidblok__zij { max-width: 58ch; } .eg-inleidblok__zij p + p { margin-top: var(--r-5); } .eg-kaart { background: var(--grond-kaart); color: var(--tekst); border: 1px solid var(--lijn); border-radius: var(--rond-3); padding: var(--r-8); box-shadow: var(--schaduw); break-inside: avoid; } .eg-knop { display: inline-flex; align-items: center; gap: var(--r-2); font-family: var(--letter); font-weight: var(--dik-vast); font-size: var(--maat-16); line-height: var(--regel-16); padding: 12px 28px; border-radius: var(--rond-pil); cursor: pointer; border: 1px solid transparent; text-decoration: none; transition: transform var(--tempo-aanraking) var(--curve), background var(--tempo-aanraking) var(--curve); } .eg-knop--vol { background: var(--accent-vlak); color: var(--tekst-op-vlak); } /* 6,35:1 */ .eg-knop--leeg { background: transparent; color: var(--tekst); border-color: var(--lijn-interactief); } /* 3,1:1 */ .eg-knop:hover { transform: translateY(-1px); } .eg-pil { display: inline-flex; align-items: center; gap: var(--r-2); font-size: var(--maat-12); font-weight: var(--dik-vast); letter-spacing: var(--spatie-label); text-transform: uppercase; padding: 8px 12px; border-radius: var(--rond-pil); border: 1px solid var(--lijn-interactief); color: var(--tekst-gedempt); } .eg-pil--positief { color: var(--positief); border-color: currentColor; } .eg-pil--let-op { color: var(--let-op); border-color: currentColor; } .eg-pil--negatief { color: var(--negatief); border-color: currentColor; } .eg-cijfers { display: grid; gap: var(--r-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .eg-cijfer { background: var(--grond-verhoogd); border: 1px solid var(--lijn); border-radius: var(--rond-2); padding: var(--r-6); break-inside: avoid; } .eg-cijfer__getal { font-size: var(--maat-72); line-height: var(--regel-uitspraak); font-weight: var(--dik-vast); letter-spacing: var(--spatie-uitspraak); display: block; font-variant-numeric: tabular-nums; } .eg-cijfer__label { font-size: var(--maat-14); line-height: var(--regel-14); color: var(--tekst-gedempt); margin-top: var(--r-3); } /* Ranglijst. De balk loopt over een zichtbare baan van 0 tot 100 — niet tot de koploper. Normaliseren op de hoogste score zet de nummer één altijd op vol en verbergt precies de ruimte die er nog boven hem is. */ .eg-ranglijst { width: 100%; border-collapse: collapse; } .eg-ranglijst th { font-size: var(--maat-14); font-weight: var(--dik-vast); text-align: left; letter-spacing: var(--spatie-label); text-transform: uppercase; color: var(--tekst-gedempt); padding: 0 var(--r-4) var(--r-3) 0; border-bottom: 1px solid var(--lijn-interactief); } .eg-ranglijst td { padding: var(--r-3) var(--r-4); border-bottom: 1px solid var(--lijn); } .eg-ranglijst td:first-child, .eg-ranglijst th:first-child { padding-left: 0; } .eg-ranglijst tr:last-child td { border-bottom: 0; } .eg-ranglijst__naam { font-size: var(--maat-18); font-weight: var(--dik-lezen); white-space: nowrap; } /* Zelfde dikte als de naam: het getal valt op door zijn plek en zijn baan, niet doordat het vetter is gezet. */ .eg-ranglijst__getal { font-size: var(--maat-18); font-weight: var(--dik-lezen); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } .eg-ranglijst__spreiding { font-size: var(--maat-12); color: var(--tekst-gedempt); white-space: nowrap; } .eg-ranglijst__balk { width: 46%; } .eg-baan { position: relative; height: 10px; border-radius: var(--rond-1); background: var(--balk-baan); } .eg-balk { position: absolute; inset: 0 auto 0 0; height: 100%; border-radius: var(--rond-1); background: var(--balk); } .eg-ranglijst tr[data-nadruk] .eg-ranglijst__naam { font-weight: var(--dik-vast); } .eg-ranglijst tr[data-nadruk] .eg-ranglijst__naam::after { content: ' — uw kantoor'; font-size: var(--maat-12); font-weight: var(--dik-vast); letter-spacing: var(--spatie-label); text-transform: uppercase; color: var(--accent); } @media (max-width: 700px) { .eg-ranglijst__balk { display: none; } } /* Meetkaart — drie duidelijk verschillende vórmen, elk met een eigen rand, zodat de kaart ook klopt als de printer de vlakken weglaat. */ .eg-meetkaart { border-collapse: collapse; } .eg-meetkaart th { font-size: var(--maat-12); font-weight: var(--dik-vast); letter-spacing: var(--spatie-label); text-transform: uppercase; color: var(--tekst-gedempt); padding: var(--r-2); text-align: center; } .eg-meetkaart th.rij { text-align: left; } .eg-meetkaart td { padding: var(--r-2); text-align: center; } .eg-cel { display: inline-block; width: 20px; height: 20px; border-radius: 50%; border: 2px solid currentColor; } .eg-cel--vol { color: var(--positief); background: currentColor; } .eg-cel--half { color: var(--let-op); background: linear-gradient(90deg, currentColor 0 50%, transparent 50% 100%); } .eg-cel--leeg { color: var(--tekst-gedempt); background: none; border-style: dotted; } /* De poort. Oranje op rantsoen: het accent is een rand en een knop, geen vlak. Een vol gekleurd blok is het luidste element op een pagina, en op deze pagina horen de cijfers het luidst te zijn. Dit is de enige kaart op de hele site met een accentrand — dat alleen maakt hem al bijzonder. */ .eg-poort { background: var(--grond-verhoogd); color: var(--tekst); border: 1px solid var(--accent); border-radius: var(--rond-3); padding: var(--r-12); break-inside: avoid; } .eg-poort .eg-hoofdstuk { color: var(--accent); } /* Blijft bestaan voor een knop op een gekleurd vlak, maar de poort gebruikt hem niet meer. */ .eg-knop--invers { background: var(--tekst-op-vlak); color: var(--accent-vlak); } /* -------------------------------------------------------------------------- 7 · PAPIERREGELS — alleen mechanica, geen tweede ontwerp -------------------------------------------------------------------------- */ @page { size: A4; margin: 16mm 14mm; } @media print { body { font-size: 11pt; } .eg-band { padding-block: 12mm; } .eg-kaart, .eg-cijfer, .eg-poort, .eg-ranglijst tr { break-inside: avoid; } .eg-titel, .eg-uitspraak, .eg-sectiekop, .eg-subkop { break-after: avoid; } .eg-ranglijst thead { display: table-header-group; } .eg-geen-print { display: none !important; } * { animation: none !important; transition: none !important; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* ========================================================================== 9 · BOUWREGELS — hoe een pagina is opgebouwd, niet hoe hij eruitziet. Deze regels komen uit het doormeten van ai-visibility-index.semrush.com. De typografie hierboven maakt een pagina nét; deze regels bepalen of hij als onderzoek leest of als folder. Ze staan hier en niet in Notion, zodat ze meereizen met het bestand dat de paginas toch al inladen. GEMETEN, 1440 breed: referentie 17.755 px · ~1.307 woorden · 74 woorden per 1000px · 16 data-objecten onze oude homepage 5.950 px · 1.128 woorden · 190 woorden per 1000px · 3 data-objecten onze nieuwe homepage 4.649 px · 681 woorden · 146 woorden per 1000px · 0 data-objecten R1 · DICHTHEID. Een onderzoekspagina blijft onder de 80 woorden per 1000 px. Kom je erboven, dan is het antwoord niet "korter schrijven" maar "er ontbreekt een object". R2 · ELKE SECTIE HEEFT EEN OBJECT. Een sectie draagt een tabel, een grafiek, een meetkaart of een kaart met cijfers. Een sectie met alleen tekst is een inleiding of een poort, en daar zijn er hoogstens twee van. R3 · TWEE ALINEAS, DAN HET OBJECT. Nooit drie. Wat niet in twee alineas past, hoort in de uitklapbare verantwoording bij het object zelf. R4 · ELK CIJFER DRAAGT ZIJN EIGEN UITLEG. Bij elk object staat bereikbaar hoe het gemeten is — zichtbaar op de pagina, niet in een tooltip en niet als voetnoot onderaan. Zie .eg-uitleg. Bij printen klapt die altijd open. R5 · HOOFDSTUKKEN ZIJN GENUMMERD en het label herhaalt zich boven élke sectie binnen dat hoofdstuk. Boven de drie schermlengtes komt er een meelopende hoofdstuklijst bij. Zie .eg-hoofdstukbalk. R6 · DE HERO DOET GEEN AANBOD. Hij opent met een vondst. De knop naar het aanbod staat klein in de balk bovenaan, niet in het eerste scherm. R7 · BEELD ORIENTEERT, BEELD VULT NIET. Gecorrigeerd na beter kijken: de referentie gebruikt wél degelijk fotografie, en prominent — een rij van vijf fotokaarten met mensen, elk met een bijschrift dat zegt wat dat hoofdstuk onthult, en een paginabrede foto onder het slotblok. Het is geen opvulling maar wegwijzering: een menselijk gezicht bij een onderzoek dat verder uit cijfers bestaat. De regel is dus: een foto mag, mits hij een hoofdstuk aankondigt en een bijschrift draagt dat inhoud noemt. Een foto naast een alinea, puur om de bladzijde te breken, niet. R8 · MOBIEL: WEGLATEN, NIET VERKLEINEN. Wat op 390 px niet meer werkt, gaat eruit; de getallen blijven staan. De kop krimpt niet beleefd mee. R10 · DIEPTE. Niets ligt plat. Datakaarten zweven boven de grond met een schaduw, soms licht gekanteld en over elkaar heen. Achter de banen beweegt licht. Dit is het grootste verschil tussen de referentie en onze eerste poging, en het kost bijna niets: schaduw, een kleine rotatie, en een lichtbron achter de kaart. R11 · DE PAGINA TOONT ZIJN EIGEN SPULLEN. Het rapport ligt er als object op — de omslag, gekanteld, op een gekleurd vlak, met een knop ernaast. Wij hebben een pdf van vier pagina's en laten hem nergens zien. R12 · EEN OVERGANG IS EEN GEBEURTENIS. Banen schuiven over elkaar heen in plaats van weg te scrollen, met een zacht kleurverloop ertussen. De lezer voelt hoofdstukken omslaan in plaats van een pagina rollen. R13 · TEXTUUR VAN DATA. Tussen de banen staat een gordijn van dunne staafjes in een kleurverloop — een staafdiagram, geabstraheerd tot behang. In het slotblok keert datzelfde motief terug als lijst aan weerszijden. De versiering is dus nooit willekeurig: het is het product, uitvergroot. R14 · GRAFIEKEN LADEN ZONDER TOESTEMMING. Bij de referentie hangen de grafieken achter de cookiebanner: weiger je, dan blijft de pagina leeg. Twee keer overkomen tijdens dit onderzoek. Ons bewijs mag daar nooit achter zitten — een lezer die weigert, moet de cijfers gewoon zien. R9 · LANG MAG. Een onderzoekspagina van tien schermen is geen probleem zolang R1 klopt. Lengte leest als inhoud, dichtheid leest als folder. ========================================================================== */ /* Het grafiekblok — de vaste anatomie achter elk data-object. Links een smalle kolom met de titel, één toelichting en de filters; rechts een brede kaart waarin alléén data staat. De toelichting staat er permanent naast, want dat is wat het verschil maakt tussen een cijfer tonen en een cijfer verantwoorden. */ .eg-grafiekblok { display: grid; gap: var(--r-8); align-items: start; } @media (min-width: 1000px) { .eg-grafiekblok { grid-template-columns: 300px 1fr; gap: var(--r-12); } } /* Op een smal scherm gaat de data vóór de toelichting: de lezer zoekt zichzelf op. */ @media (max-width: 999px) { .eg-grafiekblok > .eg-grafiekblok__data { order: -1; } .eg-grafiekblok { gap: var(--r-6); } } .eg-grafiekblok__zijde { display: grid; gap: var(--r-4); } .eg-grafiekblok__filters { display: flex; gap: var(--r-2); flex-wrap: wrap; } /* De permanente uitleg bij een object. Stil, geen knop. */ .eg-uitleg { border-top: 1px solid var(--lijn); padding-top: var(--r-3); } .eg-uitleg summary { cursor: pointer; font-size: var(--maat-14); font-weight: var(--dik-lezen); color: var(--tekst-gedempt); list-style: none; text-decoration: underline; text-underline-offset: 3px; } .eg-uitleg summary:hover { color: var(--tekst); } .eg-uitleg summary::-webkit-details-marker { display: none; } .eg-uitleg summary::after { content: ' +'; } .eg-uitleg[open] summary::after { content: ' \2013'; } .eg-uitleg p { font-size: var(--maat-14); line-height: var(--regel-14); color: var(--tekst-gedempt); margin: var(--r-3) 0 0; max-width: 62ch; } /* De meelopende hoofdstuklijst. Verschijnt pas als de pagina lang genoeg is om je erin te verliezen. */ /* De hoofdstukbalk plakt ónder de vaste balk, niet eronder verstopt. Zonder deze maat schuift hij op elke pagina met een kop achter die kop weg — en dat gebeurde. */ .eg-hoofdstukbalk { position: sticky; top: var(--balk-hoogte, 0px); z-index: 30; background: var(--grond); border-bottom: 1px solid var(--lijn); display: flex; gap: var(--r-6); overflow-x: auto; padding: var(--r-3) var(--r-6); } .eg-hoofdstukbalk a { font-size: var(--maat-12); font-weight: var(--dik-vast); letter-spacing: var(--spatie-label); text-transform: uppercase; color: var(--tekst-gedempt); text-decoration: none; white-space: nowrap; } .eg-hoofdstukbalk a[aria-current="true"] { color: var(--accent); } @media print { /* R4: de verantwoording gaat altijd mee de printer in. Een nette ranglijst met namen zonder methode eronder is precies het document dat je niet wilt. */ .eg-uitleg summary::after { content: ''; } .eg-uitleg > p { display: block !important; } .eg-uitleg:not([open]) > *:not(summary) { display: block !important; } .eg-hoofdstukbalk { display: none; } } /* R10 · Diepte. Een datakaart die zweeft in plaats van ligt. */ .eg-kaart--zwevend { box-shadow: 0 2px 4px var(--schaduw-kleur), 0 24px 70px var(--schaduw-kleur); } .eg-stapel { position: relative; } .eg-stapel > .eg-kaart:nth-child(2) { position: absolute; right: -4%; bottom: -12%; width: 62%; transform: rotate(-2deg); } /* R10 · Licht achter een baan. Geen platte kleur maar een bron. */ .eg-band--licht { position: relative; isolation: isolate; overflow: hidden; } .eg-band--licht::before { content: ''; position: absolute; inset: -30% -10% auto -10%; height: 80%; z-index: -1; pointer-events: none; opacity: .5; background: radial-gradient(60% 100% at 25% 0%, var(--reeks-2), transparent 70%), radial-gradient(50% 90% at 80% 10%, var(--reeks-3), transparent 70%); } /* -------------------------------------------------------------------------- R16 · EEN VERGELIJKING IS EEN DRIELUIK. Drie kolommen naast elkaar, de middelste verhoogd en met vinkjes, de twee buren gedempt met kruisjes. De gloed erboven is geen plaatje maar een verloop in de kleuren waarin onze metingen getekend zijn — teal, violet, groen — zodat de versiering uit hetzelfde palet komt als de data. -------------------------------------------------------------------------- */ .eg-gloed { position: relative; overflow: hidden; background: var(--eg-nacht-900); color: var(--eg-wit); } .eg-gloed::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 420px; background: radial-gradient(34% 100% at 26% -6%, rgba(127,217,206,.50), transparent 66%), radial-gradient(30% 94% at 55% -4%, rgba(168,142,240,.46), transparent 68%), radial-gradient(28% 88% at 80% -6%, rgba(111,224,160,.32), transparent 70%), radial-gradient(70% 34% at 50% 0%, rgba(168,142,240,.20), transparent 72%); pointer-events: none; } .eg-gloed > * { position: relative; } .eg-drieluik { display: grid; gap: var(--r-5); margin-top: var(--r-12); align-items: start; } @media (min-width: 1000px) { .eg-drieluik { grid-template-columns: 1fr 1.12fr 1fr; gap: var(--r-4); align-items: center; } } .eg-kolom { border: 1px solid var(--lijn); border-radius: var(--rond-3); padding: var(--r-8) var(--r-6); } .eg-kolom--ons { border-color: var(--reeks-2); padding-block: var(--r-12); background: color-mix(in srgb, var(--reeks-2) 6%, transparent); box-shadow: 0 24px 70px rgba(0,0,0,.45); } .eg-kolom__naam { font-size: var(--maat-18); font-weight: var(--dik-vast); margin: 0; color: var(--tekst-gedempt); } .eg-kolom--ons .eg-kolom__naam { color: var(--reeks-2); font-size: var(--maat-24); line-height: var(--regel-24); } .eg-kolom__onder { font-size: var(--maat-14); color: var(--tekst-gedempt); margin: var(--r-3) 0 var(--r-6); } .eg-kolom--ons .eg-kolom__onder { color: var(--tekst); font-size: var(--maat-16); } .eg-kolom ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--r-4); } .eg-kolom li { display: grid; grid-template-columns: 17px 1fr; gap: var(--r-3); align-items: start; font-size: var(--maat-14); line-height: var(--regel-16); color: var(--tekst-gedempt); } .eg-kolom--ons li { font-size: var(--maat-16); color: var(--tekst); } .eg-kolom li i { font-style: normal; margin-top: 1px; } .eg-kolom li i.nee { color: var(--tekst-gedempt); } .eg-kolom li i.ja { color: var(--reeks-2); } /* -------------------------------------------------------------------------- R18 · EEN KAART TOONT EERST, VERTELT DAARNA. Een rij grote omrande kaarten met bovenin een beeldvak en daaronder hooguit vijfentwintig woorden. De vorm dwingt de tekst kort te blijven: past het niet in de kaart, dan is het geen kaart maar een alinea. Gebruikt voor de omdraaiingen en voor de artikelen. -------------------------------------------------------------------------- */ .eg-kaartrij { display: grid; gap: var(--r-5); margin-top: var(--r-12); } @media (min-width: 760px) { .eg-kaartrij { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1060px) { .eg-kaartrij--drie { grid-template-columns: repeat(3, 1fr); } } .eg-toonkaart { display: flex; flex-direction: column; border: 1px solid var(--lijn); border-radius: var(--rond-3); overflow: hidden; background: var(--grond-verhoogd); text-decoration: none; color: inherit; } a.eg-toonkaart { transition: border-color var(--tempo-aanraking) var(--curve); } a.eg-toonkaart:hover { border-color: var(--accent); } .eg-toonkaart__beeld { padding: var(--r-6); border-bottom: 1px solid var(--lijn); background: var(--grond); display: flex; flex-direction: column; justify-content: center; gap: var(--r-3); } /* De tekstvakken van alle kaarten in een rij beginnen op dezelfde lijn. Met subgrid deelt elke kaart de rijen van de rij zelf, dus de scheidslijn ligt overal gelijk, ongeacht hoeveel regels het beeldvak nodig heeft. Zonder subgrid valt het terug op een ondergrens, en dan mag een kaart iets uit de pas lopen. */ @media (min-width: 760px) { .eg-kaartrij .eg-toonkaart__beeld { min-height: 218px; } } @supports (grid-template-rows: subgrid) { @media (min-width: 760px) { .eg-kaartrij { grid-auto-rows: auto auto; } .eg-kaartrij > .eg-toonkaart { display: grid; grid-template-rows: subgrid; grid-row: span 2; } .eg-kaartrij .eg-toonkaart__beeld { min-height: 0; } .eg-kaartrij .eg-bronkaart__vak { min-height: 0; } } } .eg-toonkaart__lijf { padding: var(--r-6); display: flex; flex-direction: column; gap: var(--r-3); flex: 1; } .eg-toonkaart__over { font-size: var(--maat-12); font-weight: var(--dik-vast); letter-spacing: var(--spatie-label); text-transform: uppercase; color: var(--tekst-gedempt); margin: 0; } .eg-toonkaart__over s { text-decoration-thickness: 1px; } .eg-toonkaart__kop { font-size: var(--maat-24); line-height: var(--regel-24); font-weight: var(--dik-vast); letter-spacing: -.01em; margin: 0; } .eg-toonkaart__tekst { font-size: var(--maat-16); line-height: var(--regel-16); color: var(--tekst-gedempt); margin: 0; } .eg-toonkaart__doen { font-size: var(--maat-16); line-height: var(--regel-16); margin: 0; padding-top: var(--r-4); border-top: 1px solid var(--lijn); margin-top: auto; } .eg-toonkaart__doen b { display: block; font-size: var(--maat-12); letter-spacing: var(--spatie-label); text-transform: uppercase; color: var(--accent); margin-bottom: var(--r-2); } .eg-toonkaart--leeg { opacity: .55; } .eg-toonkaart--leeg .eg-toonkaart__doen { color: var(--tekst-gedempt); } /* -------------------------------------------------------------------------- R21 · EEN BRONKAART CITEERT, HIJ VERSIERT NIET. Drie onderzoeken van buiten, elk met één bevinding die wij nodig hebben. De kaart draagt de uitgever, de datum, de kop, het cijfer en een link naar het origineel — nooit het beeldmateriaal van die uitgever zelf, dat is van hen. Het beeldvak staat klaar voor een afbeelding die wij mogen gebruiken; tot die er is toont het de plaatshouder, zichtbaar als plaatshouder en niet als kapot beeld. -------------------------------------------------------------------------- */ .eg-bronkaart__vak { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid var(--lijn); background: var(--grond); } .eg-bronkaart__vak img { width: 100%; height: 100%; object-fit: cover; display: block; } .eg-bronkaart__wacht { position: absolute; inset: 0; display: grid; place-content: center; gap: var(--r-2); text-align: center; padding: var(--r-5); background-image: repeating-linear-gradient(135deg, var(--lijn) 0 1px, transparent 1px 11px); } .eg-bronkaart__wacht b { font-size: var(--maat-12); font-weight: var(--dik-vast); letter-spacing: var(--spatie-label); text-transform: uppercase; color: var(--tekst-gedempt); } .eg-bronkaart__wacht span { font-size: var(--maat-12); color: var(--tekst-gedempt); opacity: .75; } /* Sinds de kaart alleen nog kop, bron en cijfer toont, is het cijfer het slotwoord. Hij zakt naar de onderlijn van de kaart, zodat de drie percentages op één hoogte staan hoe lang de koppen ook zijn. */ .eg-bronkaart__cijfer { margin: auto 0 0; padding-top: var(--r-5); font-size: var(--maat-48); line-height: 1; font-weight: var(--dik-vast); letter-spacing: -.02em; color: var(--accent); } /* --- het statement onder de bronnen -------------------------------------- */ /* Het statement stond eerst als staartstuk onder de bronkaarten, in twee kolommen. Daar las het als een bijschrift bij die kaarten. Het is geen bijschrift maar de scharnierzin van de pagina, dus staat het nu alleen: eigen laag, geen nummer, één kolom, gecentreerd, met een lijn boven en onder als enige omlijsting. De eerste zin is groot, de rest klein — dezelfde trap als elders, maar zonder kop erboven. */ .eg-statementlaag { padding-block: var(--band-half); } .eg-statement { border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); padding-block: var(--band-half); display: grid; gap: var(--r-8); justify-items: center; text-align: center; } .eg-statement__groot { font-size: clamp(24px, 2.7vw, 36px); line-height: 1.20; font-weight: var(--dik-vast); letter-spacing: -.02em; margin: 0; max-width: 38ch; text-wrap: balance; } .eg-statement__rest { max-width: 56ch; } .eg-statement__rest p { font-size: var(--maat-18); line-height: var(--regel-18); margin: 0; color: var(--tekst-gedempt); text-wrap: pretty; } .eg-statement__rest p + p { margin-top: var(--r-5); } .eg-statement__rest b { color: var(--tekst); font-weight: var(--dik-vast); } /* Het beeldvak van een omdraaiing: een fragment uit een AI-antwoord. De namen erin zijn verzonnen — dat staat één keer onder de rij, niet in elke kaart. */ .eg-fragment__vraag { font-size: var(--maat-14); line-height: var(--regel-14); background: var(--grond-verhoogd); border: 1px solid var(--lijn); border-radius: var(--rond-2); padding: var(--r-3) var(--r-4); align-self: flex-start; max-width: 92%; } .eg-fragment__ans { font-size: var(--maat-14); line-height: var(--regel-16); color: var(--tekst-gedempt); margin: 0; } .eg-fragment__ans mark { background: none; color: var(--reeks-2); font-weight: var(--dik-vast); border-bottom: 1px solid currentColor; } /* -------------------------------------------------------------------------- R20 · DE ANTWOORDCYCLUS IS EEN RING, EN DIT IS HET ENIGE BEELD ERVAN. Vijf stappen op een cirkel, want na Bewijzen komt weer Meten — de vorm zegt wat de methode doet. Drie regels houden hem leesbaar: er is een startpunt (( 01 ) staat op twaalf uur), er is een richting (met de klok mee, met een pijlpunt vlak voor ( 01 )), en alleen de versiering draait. De knopen en de labels staan stil, want draaiende tekst is onleesbaar en een bewegend klikdoel is vervelend. Stap 1 staat in de HTML, dus zonder script blijft het beeld kloppen. Gebruikt op de homepage én op werkwijze; er is geen tweede tekening van dit ding. -------------------------------------------------------------------------- */ .eg-cyclus { display: grid; gap: var(--r-12); margin-top: var(--r-12); align-items: center; } .eg-cyclus .eg-ring { margin-bottom: var(--r-8); } @media (min-width: 1040px) { .eg-cyclus { grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: var(--band-half); } } .eg-ring { --ring: clamp(240px, 34vw, 400px); --straal: calc(var(--ring) / 2); position: relative; width: var(--ring); height: var(--ring); /* de pillen op drie en negen uur steken buiten de cirkel; die ruimte hoort bij het onderdeel, anders lopen ze de kolom uit */ margin: 0 auto; margin-inline: clamp(56px, 7vw, 86px); flex: 0 0 auto; } /* de draaiende versiering: twee bogenstellen, tegen elkaar in, langzaam */ .eg-ring__bogen { position: absolute; inset: -7%; pointer-events: none; } .eg-ring__bogen svg { width: 100%; height: 100%; display: block; } .eg-ring__bogen circle { fill: none; stroke-linecap: round; } .eg-ring__bogen .baan-a { animation: eg-draai 64s linear infinite; transform-origin: 50% 50%; } .eg-ring__bogen .baan-b { animation: eg-draai 96s linear infinite reverse; transform-origin: 50% 50%; } @keyframes eg-draai { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .eg-ring__bogen .baan-a, .eg-ring__bogen .baan-b { animation: none; } } /* de baan waarop de stappen staan */ .eg-ring__baan { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed var(--lijn-interactief); } /* de naaf: wat niet verandert */ .eg-ring__naaf { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 54%; aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; text-align: center; gap: 6px; background: var(--grond-verhoogd); border: 1px solid var(--lijn); padding: var(--r-4); } .eg-ring__naaf b { font-size: var(--maat-16); line-height: 1.2; font-weight: var(--dik-vast); } .eg-ring__naaf span { font-size: var(--maat-12); color: var(--tekst-gedempt); } /* een stap: gedraaid naar zijn hoek, uitgeduwd, en weer teruggedraaid zodat de tekst rechtop staat */ .eg-stapknop { position: absolute; left: 50%; top: 50%; margin: 0; padding: 0; border: 0; background: none; font-family: inherit; cursor: pointer; transform: rotate(var(--hoek)) translateY(calc(-1 * var(--straal))) rotate(calc(-1 * var(--hoek))) translate(-50%, -50%); } .eg-stapknop__pil { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; border: 1px solid var(--lijn); border-radius: var(--rond-pil); background: var(--grond); color: var(--tekst-gedempt); padding: 9px var(--r-4); transition: border-color var(--tempo-aanraking) var(--curve), color var(--tempo-aanraking) var(--curve); } .eg-stapknop__nr { font-size: var(--maat-12); font-weight: var(--dik-vast); letter-spacing: var(--spatie-label); font-variant-numeric: tabular-nums; } .eg-stapknop__naam { font-size: var(--maat-16); font-weight: var(--dik-lezen); } .eg-stapknop:hover .eg-stapknop__pil { border-color: var(--lijn-interactief); color: var(--tekst); } .eg-stapknop[aria-selected="true"] .eg-stapknop__pil { border-color: var(--accent); color: var(--tekst); background: var(--grond-verhoogd); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); } .eg-stapknop[aria-selected="true"] .eg-stapknop__nr { color: var(--accent); } /* de pijlpunt vlak voor ( 01 ): dit is de richting, en dit is waar hij rondgaat */ .eg-ring__hint { position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%); margin: 0; font-size: var(--maat-12); letter-spacing: var(--spatie-label); text-transform: uppercase; color: var(--tekst-gedempt); white-space: nowrap; } /* het paneel naast de ring */ .eg-cyclus__blad { border: 1px solid var(--lijn); border-radius: var(--rond-3); padding: var(--r-8); min-height: 300px; } .eg-cyclus__wie { font-size: var(--maat-12); font-weight: var(--dik-vast); letter-spacing: var(--spatie-label); text-transform: uppercase; color: var(--accent); margin: 0; } .eg-cyclus__kop { font-size: clamp(22px, 2.4vw, 31px); line-height: 1.16; font-weight: var(--dik-vast); letter-spacing: -.01em; margin: var(--r-3) 0 var(--r-5); max-width: 22ch; } .eg-cyclus__zin { font-size: var(--maat-18); line-height: var(--regel-18); margin: 0; max-width: 52ch; color: var(--tekst-gedempt); } .eg-cyclus__waarom { margin-top: var(--r-6); padding-top: var(--r-4); border-top: 2px solid var(--lijn-interactief); font-size: clamp(18px, 1.7vw, 23px); line-height: 1.32; font-weight: var(--dik-vast); } .eg-cyclus__waarom b { color: var(--accent); } .eg-cyclus__object { margin-top: var(--r-8); display: grid; gap: var(--r-3); } .eg-cyclus__regel { display: grid; grid-template-columns: 1fr auto; gap: var(--r-4); align-items: center; padding: var(--r-3) 0; border-bottom: 1px solid var(--lijn); font-size: var(--maat-16); } .eg-cyclus__regel:last-child { border-bottom: 0; } .eg-cyclus__regel b { font-variant-numeric: tabular-nums; font-weight: var(--dik-vast); } @media (max-width: 520px) { .eg-stapknop__naam { font-size: var(--maat-14); } .eg-stapknop__pil { padding: 7px var(--r-3); gap: 6px; } .eg-cyclus__blad { padding: var(--r-6); min-height: 0; } } /* -------------------------------------------------------------------------- R19 · EEN OBJECT, DRIE TOESTANDEN — EN DRIE REGISTERS. De antwoordkaart is in alle drie de beelden dezelfde kaart: zelfde hoek, zelfde kopregel, zelfde chips. Wat eromheen gebeurt verschilt wél, want anders leest het oog drie keer hetzelfde lijstje. Rij 1 is interface (iets splitst), rij 2 is diagram (iets stroomt samen), rij 3 is ruimte (er ontbreekt iets). Zelfde hoofdrolspeler, andere enscenering. De assistenten worden bij naam genoemd maar krijgen een eigen merkteken, geen nagemaakt logo: het antwoord in dit beeld is verzonnen, en een echt logo erboven zou er een schermafdruk van maken. -------------------------------------------------------------------------- */ .eg-kansrijen { margin-top: var(--r-12); } .eg-kansrij { display: grid; gap: var(--r-8); align-items: center; padding-block: var(--band-half); position: relative; } @media (min-width: 900px) { .eg-kansrij { grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); gap: var(--band-half); } .eg-kansrij:nth-child(even) > .eg-kansrij__beeld { order: -1; } } /* De scheidingslijn liep eerst tot 46% vanaf links. Dat hing scheef in de rij: een halve lijn die nergens eindigt. Hij loopt nu over de volle breedte van de kolom, dus midden onder de rij, en scheidt wat hij hoort te scheiden. */ .eg-kansrij + .eg-kansrij::before { content: ""; position: absolute; inset: 0 0 auto 0; border-top: 1px solid var(--lijn); } .eg-kansrij__nr { font-size: var(--maat-12); font-weight: var(--dik-vast); letter-spacing: var(--spatie-label); color: var(--accent); font-variant-numeric: tabular-nums; margin: 0 0 var(--r-3); } .eg-kansrij__kop { font-size: clamp(24px, 2.6vw, 33px); line-height: 1.14; font-weight: var(--dik-vast); letter-spacing: -.01em; max-width: 20ch; text-wrap: balance; margin: 0; } .eg-kansrij__zin { font-size: var(--maat-18); line-height: var(--regel-18); color: var(--tekst-gedempt); max-width: 52ch; margin: var(--r-5) 0 0; } .eg-kansrij__punten { list-style: none; margin: var(--r-5) 0 0; padding: 0; display: grid; gap: var(--r-3); } .eg-kansrij__punten li { display: grid; grid-template-columns: 16px 1fr; gap: var(--r-3); align-items: start; font-size: var(--maat-16); line-height: var(--regel-16); } .eg-kansrij__punten i { font-style: normal; color: var(--reeks-2); margin-top: 1px; } /* De opsomming en "Begin hier" zitten achter één opengaand paneel: in de gesloten stand draagt de rij alleen een nummer, een kop en één zin. Dat is het betoog; de rest is uitwerking, en die haalt niemand binnen door hem altijd te tonen. */ .eg-kansrij__meer { margin-top: var(--r-6); border-top: 1px solid var(--lijn); padding-top: var(--r-4); } .eg-kansrij__meer > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--r-3); font-size: var(--maat-12); font-weight: var(--dik-vast); letter-spacing: var(--spatie-label); text-transform: uppercase; color: var(--accent); } .eg-kansrij__meer > summary::-webkit-details-marker { display: none; } .eg-kansrij__meer > summary::after { content: ""; width: 7px; height: 7px; flex: 0 0 auto; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--tempo-aanraking) var(--curve); } .eg-kansrij__meer[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); } .eg-kansrij__meer > summary:hover { color: var(--tekst); } .eg-kansrij__meer[open] > summary { color: var(--accent); } /* drie handelingen die op elkaar voortbouwen, genummerd zodat de volgorde telt */ .eg-kansrij__stappen { list-style: none; margin: var(--r-5) 0 0; padding: 0; display: grid; gap: var(--r-4); counter-reset: stap; } .eg-kansrij__stappen li { counter-increment: stap; display: grid; grid-template-columns: 22px 1fr; gap: var(--r-3); align-items: start; font-size: var(--maat-16); line-height: var(--regel-16); } .eg-kansrij__stappen li::before { content: counter(stap); font-size: var(--maat-12); font-weight: var(--dik-vast); color: var(--tekst-gedempt); font-variant-numeric: tabular-nums; padding-top: 3px; } .eg-kansrij__begin { margin: var(--r-6) 0 0; font-size: var(--maat-16); line-height: var(--regel-16); display: grid; grid-template-columns: auto 1fr; gap: var(--r-3); align-items: baseline; max-width: 52ch; } .eg-kansrij__begin b { font-size: var(--maat-12); font-weight: var(--dik-vast); letter-spacing: var(--spatie-label); text-transform: uppercase; color: var(--accent); white-space: nowrap; } /* --- het vak waarin elk beeld staat --------------------------------------- */ .eg-kansbeeld { position: relative; border: 1px solid var(--lijn); border-radius: var(--rond-3); background: var(--grond-verhoogd); padding: var(--r-6); overflow: hidden; display: grid; gap: var(--r-4); align-content: center; min-height: 268px; } .eg-kansbeeld > * { position: relative; } .eg-kansbeeld__lab { font-size: var(--maat-12); font-weight: var(--dik-vast); letter-spacing: var(--spatie-label); text-transform: uppercase; color: var(--tekst-gedempt); margin: 0; } /* De hoofdrolspeler: overal dezelfde kaart. */ .eg-antwoordkaart { border: 1px solid var(--lijn); border-radius: var(--rond-2); padding: var(--r-4); display: grid; gap: var(--r-3); background: var(--grond); } .eg-antwoordkaart__kop { display: flex; align-items: center; gap: 7px; margin: 0; font-size: var(--maat-12); font-weight: var(--dik-vast); letter-spacing: .04em; color: var(--tekst-gedempt); } .eg-antwoordkaart__kop svg { flex: 0 0 auto; width: 15px; height: 15px; } .eg-naamchip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--maat-14); border: 1px solid var(--lijn); border-radius: var(--rond-pil); padding: 4px var(--r-3); } .eg-naamchip--eerst { border-color: currentColor; font-weight: var(--dik-vast); } .eg-naamchip--weg { color: var(--tekst-gedempt); opacity: .5; text-decoration: line-through; text-decoration-thickness: 1px; } /* ===== REGISTER 1 · INTERFACE — één vraag splitst in twee antwoorden ======= */ .eg-splits { display: grid; gap: var(--r-3); } .eg-splits__vraag { font-size: var(--maat-14); line-height: var(--regel-14); background: var(--grond); border: 1px solid var(--lijn); border-radius: var(--rond-2); padding: var(--r-3) var(--r-4); justify-self: center; max-width: 88%; text-align: center; } .eg-splits__vork { height: 26px; display: block; width: 100%; color: var(--lijn-interactief); } .eg-splits__paar { display: grid; gap: var(--r-4); grid-template-columns: 1fr 1fr; } /* de twee werelden krijgen elk hun eigen tint, zodat je ziet dat het er twee zijn */ .eg-splits__paar > :nth-child(1) { color: var(--reeks-2); } .eg-splits__paar > :nth-child(2) { color: var(--reeks-3); } .eg-splits__paar .eg-antwoordkaart { border-top: 2px solid currentColor; } .eg-splits__paar .eg-naamchip:not(.eg-naamchip--eerst) { color: var(--tekst-gedempt); } .eg-splits__oud { position: absolute; inset: var(--r-6) var(--r-6) auto var(--r-6); display: grid; gap: 6px; opacity: .1; pointer-events: none; } .eg-splits__oud b { height: 7px; border-radius: 4px; background: var(--tekst); display: block; } /* ===== REGISTER 2 · DIAGRAM — veel bronnen, één antwoord ================== */ .eg-stroom { display: grid; gap: 0; } .eg-stroom__bronnen { display: flex; gap: 6px; } .eg-stroom__bronnen .eg-naamchip { flex: 1 1 0; justify-content: center; text-align: center; } .eg-stroom__bronnen .eg-naamchip { font-size: var(--maat-12); padding: 3px 10px; } .eg-stroom__lijnen { display: block; width: 100%; height: 86px; color: var(--reeks-2); } .eg-stroom__lijnen path { fill: none; stroke: currentColor; stroke-width: 1.4; opacity: .55; vector-effect: non-scaling-stroke; } .eg-stroom__lijnen path.los { stroke-dasharray: 3 5; opacity: .22; } .eg-stroom .eg-antwoordkaart { max-width: 74%; justify-self: center; } /* ===== REGISTER 3 · RUIMTE — wat er níét staat ============================ */ .eg-ruimte { display: grid; gap: var(--r-2); } .eg-plek { display: grid; grid-template-columns: 24px 1fr; gap: var(--r-3); align-items: center; font-size: var(--maat-14); } .eg-plek > em { font-style: normal; font-variant-numeric: tabular-nums; color: var(--tekst-gedempt); font-size: var(--maat-12); } .eg-plek__vol { border: 1px solid var(--lijn); border-radius: var(--rond-pil); padding: 7px var(--r-4); background: var(--grond); font-weight: var(--dik-lezen); } /* leeg is leeg: geen woord in het vak, alleen een maat en een teken */ .eg-plek__vrij { border: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent); border-radius: var(--rond-pil); padding: 7px var(--r-4); min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: var(--r-3); } .eg-plek__vrij i { font-style: normal; color: var(--accent); font-size: var(--maat-16); line-height: 1; } .eg-plek__vrij span { font-size: var(--maat-12); letter-spacing: var(--spatie-label); text-transform: uppercase; color: var(--accent); opacity: .8; } /* --- binnenkomst: één beweging per beeld, en niets herhaalt --------------- Het verbergen hangt aan .eg-beweegt op , die het script zelf zet. Zonder script, bij prefers-reduced-motion, of in een crawler staat alles gewoon zichtbaar — een beeld mag nooit onzichtbaar blijven omdat een animatie niet afging. */ .eg-beweegt .eg-kansbeeld [data-komt] { opacity: 0; transition: opacity .7s var(--curve), transform .7s var(--curve); } .eg-beweegt .eg-kansbeeld [data-komt="links"] { transform: translateX(14px); } .eg-beweegt .eg-kansbeeld [data-komt="rechts"] { transform: translateX(-14px); } .eg-beweegt .eg-kansbeeld [data-komt="op"] { transform: translateY(10px); } .eg-beweegt .eg-kansbeeld.is-binnen [data-komt] { opacity: 1; transform: none; } .eg-beweegt .eg-stroom__lijnen path { stroke-dasharray: 260; stroke-dashoffset: 260; transition: stroke-dashoffset 1.1s var(--curve); } .eg-beweegt .is-binnen .eg-stroom__lijnen path { stroke-dashoffset: 0; } .eg-beweegt .eg-stroom__lijnen path.los { stroke-dasharray: 3 5; stroke-dashoffset: 0; } @media (max-width: 560px) { .eg-splits__paar { grid-template-columns: 1fr; } .eg-stroom .eg-antwoordkaart { max-width: 100%; } .eg-kansbeeld { min-height: 0; } } /* R13 · Het gordijn: een staafdiagram, geabstraheerd tot overgang. */ .eg-gordijn { height: 120px; display: flex; gap: 3px; align-items: end; overflow: hidden; opacity: .9; } .eg-gordijn i { flex: 1; display: block; border-radius: 1px; background: linear-gradient(180deg, var(--reeks-2), var(--reeks-3)); } /* R7 · De fotokaart die een hoofdstuk aankondigt. Bijschrift verplicht. */ .eg-fotokaart { position: relative; border-radius: var(--rond-2); overflow: hidden; aspect-ratio: 3 / 4; display: block; } .eg-fotokaart img { width: 100%; height: 100%; object-fit: cover; display: block; } .eg-fotokaart figcaption { position: absolute; inset: auto 0 0 0; padding: var(--r-4); font-size: var(--maat-16); font-weight: var(--dik-vast); color: #fff; background: linear-gradient(180deg, transparent, rgba(0,0,0,.78)); } @media print { .eg-gordijn, .eg-band--licht::before { display: none; } } /* ============================================================================= DE VASTE OMLIJSTING — balk, lagen, voet en naamband. Deze stonden eerst in de homepage zelf. Daardoor moest elke volgende pagina ze overschrijven of opnieuw verzinnen, en dat is precies waar de samenhang verdween: dertien pagina's met dertien koppen. Ze staan nu één keer hier, zodat een nieuwe pagina alleen nog zijn eigen inhoud meebrengt. ========================================================================== */ /* --- balk: het aanbod staat hier, en nergens in het eerste scherm (R6) --- */ .balk { position: fixed; inset: 0 0 auto 0; z-index: 60; background: color-mix(in srgb, var(--grond) 82%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--lijn); } .balk__inhoud { max-width: var(--breedte-inhoud); margin: 0 auto; padding: var(--r-3) var(--r-6); display: flex; align-items: center; justify-content: space-between; gap: var(--r-4); } .merk { display: flex; align-items: center; gap: var(--r-3); text-decoration: none; color: var(--tekst); font-size: var(--maat-16); font-weight: var(--dik-vast); letter-spacing: var(--spatie-label); text-transform: uppercase; } .merk__ring { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--accent); color: var(--accent); font-size: var(--maat-12); font-weight: var(--dik-vast); } .balk__links { display: flex; align-items: center; gap: var(--r-6); } .balk__links a:not(.eg-knop) { color: var(--tekst-gedempt); text-decoration: none; font-size: var(--maat-16); } .balk__links a:not(.eg-knop):hover { color: var(--tekst); } @media (max-width: 820px) { .balk__links .weg-klein { display: none; } } /* --- R12: banen schuiven over elkaar heen in plaats van weg te scrollen --- */ .laag { position: relative; z-index: 1; background: var(--grond); color: var(--tekst); } .laag--vast { position: sticky; top: 0; z-index: 0; } .voet { border-top: 1px solid var(--lijn); padding-block: var(--r-8) var(--r-12); } .voet a { color: var(--tekst-gedempt); } /* --- ( 07 ) De naamband. De naam over de volle breedte, afgesneden door de schermranden, uitgespaard over een verticaal lijnenveld dat van teal naar groen loopt. Decoratief, zoals gekozen — het is het enige plek op de site waar de versiering niets hoeft te bewijzen. --- */ .naamband { position: relative; overflow: hidden; background: var(--eg-nacht-900); padding-top: var(--band-half); } .naamband__lijnen { height: 210px; position: relative; background: linear-gradient(90deg, #1E6F63 0%, #2E9C7A 38%, #6FE0A0 70%, #2E9C7A 100%); -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 2px, transparent 2px 6px); mask-image: repeating-linear-gradient(90deg, #000 0 2px, transparent 2px 6px); } .naamband__naam { position: absolute; left: 50%; transform: translateX(-50%); bottom: -.16em; margin: 0; white-space: nowrap; /* 11,5vw laat de naam net binnen de rand vallen met een smalle overhang links en rechts — gemeten, niet gegokt. */ font-size: clamp(46px, 11.5vw, 200px); line-height: .82; font-weight: var(--dik-vast); letter-spacing: -.045em; color: var(--eg-nacht-900); } @media (max-width: 700px) { .naamband__lijnen { height: 120px; } } @media print { .naamband { display: none; } } /* ============================================================================= R18 · MENU OP EEN TELEFOON — toegevoegd 15-09-2026, chat bouwen · site & methode Onder 820px waren de navigatielinks verborgen zonder vervanging: op een telefoon was er geen weg naar Werkwijze, Onderzoek, Kennis of Prijzen. Dit is een uitklapmenu zonder JavaScript (schakelaar + label), zodat het ook werkt als een script niet laadt. De knop naar de kantooranalyse blijft altijd zichtbaar. ============================================================================= */ .balk__schakel { position: absolute; width: 1px; height: 1px; opacity: 0; } .balk__menuknop { display: none; } .balk__weg { display: contents; } @media (max-width: 820px) { .balk__weg { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--grond); border-bottom: 1px solid var(--lijn); box-shadow: 0 18px 40px var(--schaduw-kleur); } /* De oudere regel verbergt .weg-klein onder 820px; in het paneel horen ze juist te staan. */ .balk__weg .weg-klein { display: block; padding: 14px var(--r-6); border-top: 1px solid var(--lijn); font-size: var(--maat-18); } .balk__schakel:checked ~ .balk__links .balk__weg { display: flex; } .balk__menuknop { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; min-height: 44px; padding: 8px 12px; border: 1px solid var(--lijn-interactief); border-radius: var(--rond-1); color: var(--tekst-gedempt); font-size: var(--maat-12); font-weight: var(--dik-vast); letter-spacing: var(--spatie-label); text-transform: uppercase; } .balk__menuknop::before { content: ""; width: 16px; height: 2px; background: currentColor; box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; } .balk__schakel:focus-visible ~ .balk__links .balk__menuknop { outline: 2px solid var(--accent); outline-offset: 2px; } .balk__schakel:checked ~ .balk__links .balk__menuknop { color: var(--tekst); } .balk__inhoud { padding-left: var(--r-4); padding-right: var(--r-4); } } @media (max-width: 480px) { /* Op een smalle telefoon passen merk, knop en menuknop niet naast elkaar. Het menu wordt dan alleen het icoon en de knop wordt compacter. */ .balk__menuknop { font-size: 0; gap: 0; padding: 10px; } .balk__links .eg-knop { font-size: var(--maat-14); padding: 11px 14px; } .balk__inhoud { gap: var(--r-3); padding-left: var(--r-3); padding-right: var(--r-3); } .merk { font-size: var(--maat-12); gap: var(--r-2); } .merk__ring { width: 24px; height: 24px; } } /* --- R19 · niets mag de pagina breder maken dan het scherm (15-09, site & methode) --- */ .naamband { overflow: hidden; } .eg-hoofdstukbalk { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .eg-hoofdstukbalk::-webkit-scrollbar { width: 0; height: 0; } .eg-grafiekblok > *, .eg-inleidblok > *, .tweekaarten > *, .eg-kaart { min-width: 0; } .eg-kaart table, .verantwoording table { max-width: 100%; } h1, h2, h3, h4, .eg-uitspraak, .eg-sectiekop, .eg-subkop, .stuk__kop, .editie__naam { overflow-wrap: break-word; } .stuk, .stukken > *, .edities > *, .contactrij > * { min-width: 0; } /* Het cyclusblad en de ring moeten kunnen krimpen; anders duwt het paneel de homepage open op een smalle telefoon (gemeten op 360px). 20-09, site & methode. */ .eg-cyclus, .eg-cyclus > *, .eg-cyclus__blad, .eg-ring { min-width: 0; } @media (max-width: 400px) { /* Op een smalle telefoon past de ring plus de ruimte voor de pillen op drie en negen uur niet meer; beide krimpen mee. Gemeten op 320 en 360. */ .eg-ring { --ring: 196px; margin-inline: clamp(44px, 14vw, 52px); } }