/* ceeme-menu.css — HET OVERNAMEMENU. ================================================================================================ De vorm van lib/menu.js. Vier reuzenitems links, het toneel rechts, en het dimmen van wat je niet koos — dat laatste is geen effect maar de boodschap: AI geeft geen lijst, AI maakt één keuze. ── De regel die dit bestand bij elkaar houdt ───────────────────────────────────────────────── ZONDER JAVASCRIPT STAAT HET PANEEL OPEN. Alles wat verbergt hangt aan `html.beweegt`, en die klasse zet ceeme-beweging.js pas als het draait. Geen JS, geen render, een crawler die alleen de HTML leest: dan is dit een gewone geneste lijst met alle links erin, zichtbaar onder de kop. Dat is niet voorzichtig, dat is het product. Wij vertellen klanten dat een AI hun navigatie moet kunnen lezen zonder JavaScript uit te voeren. Een menu dat in de basis op display:none staat en pas door een script verschijnt, is het duurste eigen doelpunt dat we konden maken. Eén accent: amber #C6892B. */ /* ── Zonder JavaScript: een gewone lijst ────────────────────────────────────────────────────── */ .cmp-menu { background: #17170F; color: #F6F2E9; padding: 28px max(20px, 4vw) 40px; } .cmp-menu a { color: inherit; text-decoration: none } .mn-fams, .mn-lijst { list-style: none; margin: 0; padding: 0 } .mn-kop { display: flex; align-items: baseline; gap: 14px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; /* 64 px was te groot: op Njusja's scherm vulden vijf families de hele hoogte en viel PRIJZEN eronder. *"alles moet ook op 1 scherm, dus pas grootte aan"* — 5vw → 3.6vw en de bovengrens van 64 naar 52. Op 1470 px scheelt dat 12 px per regel en 60 px over het blok, en de namen blijven groot genoeg om het blok te zijn waar je op mikt. */ font-size: clamp(26px, 3.6vw, 52px); text-transform: uppercase; padding: 8px 0; } .mn-n { font: 700 12px/1 "Space Mono", ui-monospace, monospace; color: #83837A; letter-spacing: .08em } .mn-t { font: 700 .32em/1 "Space Mono", ui-monospace, monospace; color: #C6892B; margin-left: 4px } .mn-lijst { margin: 0 0 26px 42px } .mn-lijst a { display: flex; justify-content: space-between; gap: 24px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid rgba(246, 242, 233, .1); } .mn-p { font-weight: 600; font-size: 15px } .mn-s { color: rgba(246, 242, 233, .55); font-size: 12.5px; text-align: right } .mn-knop { display: none } /* ── ZEVEN KLASSEN DIE LIB/MENU.JS SCHRIJFT EN DIT BESTAND NIET KENDE — J164, 31 aug 2026 ───── Njusja, met het menu open op het scherm: *"fix eerst het menu want ik kan niks deftig bekijken gezien ze niet correct reageert! alles moet ook op 1 scherm, dus pas grootte aan"*. Geteld met `grep -c` in dit bestand, vóór vandaag: mn-balk 0 · mn-merk 0 · mn-talen 0 · mn-dicht 0 · mn-routes 0 · mn-groep 0 · mn-groep-kop 0 Zeven van de zeven op nul. `lib/menu.js` schrijft ze alle zeven. Daarom stonden het merk, de taalkiezer en de sluitknop als kale tekst opeengedrukt in de linkerbovenhoek, boven op de eerste familienaam — precies wat op haar schermafdruk staat. Dit is dezelfde fout als oorzaak 4 van J160 (`.mn-toon` had ook geen enkele regel) en als J154: twee bestanden die het over hetzelfde element hebben zonder het van elkaar te weten. Het is nu de derde keer in dit ene component. De les die daaruit volgt staat als taak J166: een toets die élke klasse uit lib/menu.js naast ceeme-menu.css legt. */ .mn-balk { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 0 0 22px; } .mn-merk { font-weight: 800; font-size: 20px; letter-spacing: -.02em } .mn-merk i { color: #C6892B; font-style: normal } .mn-talen { display: flex; align-items: center; gap: 8px; font: 700 11.5px/1 "Space Mono", ui-monospace, monospace; letter-spacing: .1em; margin-left: auto; } .mn-talen a { color: rgba(246, 242, 233, .5); padding: 4px 2px } .mn-talen a:hover { color: #F6F2E9 } .mn-talen a[aria-current="true"] { color: #C6892B } .mn-talen i { color: rgba(246, 242, 233, .25); font-style: normal } .mn-dicht { display: inline-flex; align-items: center; gap: 8px; background: none; border: 1px solid rgba(246, 242, 233, .2); border-radius: 999px; color: rgba(246, 242, 233, .8); cursor: pointer; font: 600 12.5px/1 inherit; padding: 9px 16px; transition: border-color 180ms ease, color 180ms ease; } .mn-dicht:hover { border-color: #C6892B; color: #C6892B } /* De groepskop binnen een familie. Ze is er alleen als de groep er een heeft — zie lib/menu.js. ⚠ Ze heet `mn-gk` en niet `mn-groep-kop`. Ik had de tweede naam geraden en er stijl voor geschreven; `scripts/test-menuklassen.mjs` — de toets die ik in dezelfde commit schreef om precies deze fout te vangen — sloeg er meteen op aan, samen met `mn-woord`. Dat is de toets die zichzelf verdient nog vóór hij één keer in de bouw gedraaid heeft. */ .mn-groep + .mn-groep { margin-top: 18px } .mn-gk { font: 700 10.5px/1 "Space Mono", ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: #C6892B; margin: 0 0 6px; } /* Het woord naast de streepjes in de knop. Het wisselt van "Menu" naar "Sluiten" — zie public/js/ceeme-menu.js — en had zonder eigen regel geen enkele vaste maat. */ .mn-woord { font: 600 13px/1 inherit; letter-spacing: .01em } /* Het routetoneel van de familie Prijzen: vier routes in plaats van paginalinks. */ .mn-routes { list-style: none; margin: 0; padding: 0 } .mn-routes a { display: block; padding: 10px 0; border-bottom: 1px solid rgba(246, 242, 233, .1); } .mn-routes b { display: block; font-size: 15px; font-weight: 600 } .mn-routes span { display: block; color: rgba(246, 242, 233, .55); font-size: 12.5px; margin-top: 2px } .mn-routes a:hover { border-bottom-color: #C6892B } .mn-routes a:hover b { color: #C6892B } /* ── Met JavaScript: de overname ─────────────────────────────────────────────────────────────── */ html.beweegt .mn-knop { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; cursor: pointer; padding: 8px 4px; color: inherit; font: 600 13px/1 inherit; } html.beweegt .mn-strepen { display: inline-flex; flex-direction: column; gap: 4px; width: 18px } html.beweegt .mn-strepen i { display: block; height: 1.5px; background: #C6892B; border-radius: 2px; transition: transform 260ms cubic-bezier(.4, 0, .2, 1), width 260ms ease; } html.beweegt .mn-strepen i:first-child { width: 18px } html.beweegt .mn-strepen i:last-child { width: 11px } html.beweegt .mn-knop[aria-expanded="true"] .mn-strepen i:first-child { transform: translateY(2.75px) rotate(45deg) } html.beweegt .mn-knop[aria-expanded="true"] .mn-strepen i:last-child { width: 18px; transform: translateY(-2.75px) rotate(-45deg) } /* Het paneel wordt een laag over het scherm. Niet display:none maar onzichtbaar én onbereikbaar: zo blijft de tekst in de DOM staan voor wie hem wél leest, en is hij weg voor wie hem niet nodig heeft. inert wordt door het script gezet; visibility haalt hem uit de tabvolgorde. */ /* ⛔ DE HOOGTE WORDT NIET MEER BEREKEND MAAR OPGELEGD — J164, derde ronde, 31 augustus 2026. Njusja: *"alles past nog steeds niet op 1 scherm"*, nadat ik op drie vensterhoogtes gemeten had dat het paste. Beide waar: ik mat scrollHeight tegen innerHeight, en dat is de UITKOMST van een optelling — balk plus paneel plus padding plus wat het toneel eronder uitsteekt. Elke keer dat ik één van die vier veranderde, kon de som weer over de rand komen, en op een venster dat ik niet toevallig getest had, deed hij dat. Een som die op de vensterhoogte moet uitkomen, moet je niet narekenen maar vastleggen. Het menu is nu twee rijen: de balk neemt wat ze nodig heeft, het paneel krijgt met `minmax(0, 1fr)` exact de rest, en `overflow: hidden` maakt het onmogelijk dat er iets buiten valt. Wat niet past, scrolt binnen het toneel — de enige plek waar scrollen hoort. */ html.beweegt .cmp-menu { position: fixed; inset: 0; z-index: 70; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-content: stretch; overflow: hidden; padding: 40px max(20px, 6vw) 40px; opacity: 0; visibility: hidden; transition: opacity 320ms ease, visibility 0s linear 320ms; } /* Violet, en alleen zoals de regel het toestaat: als LICHT, niet als vlak. Eén zwakke gloed linksboven achter het paneel, tegenover de amberstreep onder het gekozen item — dezelfde twee lampen als in de hero-bol. Zodra violet iets zou aanduiden in plaats van belichten, hebben we twee accenten, en dan begint de sluipende tweedekleurmigratie waar dit palet al één keer aan onderdoorging. Zie docs/CEEME-WEBSITE-HERBOUW.md. */ html.beweegt .cmp-menu::before { content: ""; position: absolute; inset: -10% 40% 40% -10%; pointer-events: none; background: radial-gradient(60% 60% at 30% 30%, rgba(107, 63, 212, .16), rgba(107, 63, 212, 0) 70%); } html.beweegt.mn-open .cmp-menu { opacity: 1; visibility: visible; transition: opacity 320ms ease, visibility 0s; } html.beweegt.mn-open { overflow: hidden } /* ── HET MENU PASTE NIET OP HET SCHERM — J160, 27 augustus 2026 ─────────────────────────────── Njusja: *"kijk menu!!! dit is niet zoals we afgesproken hebben"*, met ter-groene-poorte.vercel.app als referentie. Daar past het menu op ÉÉN scherm: families links, de items van de gekozen familie rechts, klaar. Gemeten in de browser op /nl/prijzen, 1470 × 751: · `.cmp-menu` scrollWidth 1722 tegen 1470 → **252 px horizontale overloop**, met een zichtbare scrollbalk onderaan het scherm; · `.mn-paneel` was **3049 px hoog** in een venster van 751 → viermaal scrollen. Drie oorzaken, en ze zijn geen van drie de opzet — de machinerie klopte: `beweegt` stond aan, precies één lijst was zichtbaar, de kolommen 1 en 2 waren toegewezen. 1. `grid-template-columns: 1.05fr 1fr`. Een kale `1fr` is `minmax(auto, 1fr)`, en `auto` is min-content. De langste itemlabels wrappen niet, dus eiste de rechterkolom 980 px op; samen met 544 px links en 96 px gap werd dat 1620 px in een inhoudsvak van 1294. De verhouding 1.05:1 werd daarmee genegeerd — gemeten: 544 / 980. **`minmax(0, …)` laat een kolom wél krimpen.** Dat is de klassieke fr-val en ze is hier twee kolommen breed. 2. `grid-row: 1 / span 9` terwijl er vijf koppen zijn. Dat maakt vier implicite rijen extra en laat de hoogte van vier over elkaar liggende lijsten optellen in plaats van samenvallen. `1 / -1` spant precies de rijen die er zijn. 3. Niets begrensde de hoogte. De langste familie heeft zestien items (830 px) en dat is op zichzelf al meer dan een venster van 751. De LIJST scrollt nu, niet het hele menu — zo blijven de familienamen links staan waar je ze nodig hebt, precies als bij de referentie. */ @media (min-width: 900px) { html.beweegt .cmp-menu { padding: 40px max(20px, 6vw) 40px; --mn-gap: min(6vw, 72px) } /* ⛔ `gap` GOLD OOK TUSSEN DE RIJEN, EN DAAR ZAT DE OVERLOOP — J164, 31 augustus 2026. Gemeten op /nl/voor-wie bij 1470 × 820, met het menu open: .mn-kop hoogte 87 px · afstand tussen twee koppen 159 px · verschil = 72 Dat verschil is `gap: min(6vw, 72px)`. Die waarde is bedoeld voor de KOLOM — de ruimte tussen de familienamen en het toneel — maar `gap` zet ook `row-gap`, en dus stond er 72 px lucht tussen elke twee familienamen. Vijf koppen werden zo 5 × 87 + 4 × 72 = 723 px in plaats van 435. Met de balk en de padding erbij: scrollHeight 869 in een venster van 820, en PRIJZEN viel onder de rand. Njusja: *"alles moet ook op 1 scherm"*. `column-gap` doet wat er bedoeld was; `row-gap: 0` zet de namen tegen elkaar — en dat is ook de vorm van de referentie: één blok gestapelde reuzentekst, geen losse regels. */ html.beweegt .mn-paneel { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); /* ⚠ HIER STOND EERST `minmax(0, min-content)`, EN DAT HIELP NIET. Ik nam aan dat een bovengrens van min-content een rij zou beletten te groeien door een kind dat álle rijen spant. Live nagemeten na de deploy: de afstand tussen twee families bleef 158 px in plaats van 87. Een spannend element draagt óók bij aan de max-functie van de rijen die het spant; de bovengrens gold voor de rij, niet voor die bijdrage. De oplossing is het toneel uit de rij-berekening halen in plaats van de rij te begrenzen: `position: absolute` binnen het paneel. De linkerkolom bepaalt sindsdien in haar eentje de hoogte, en het toneel vult die hoogte en scrolt binnenin. `1fr` houdt de rechterkolom op breedte ook als er niets meer in staat — een fr-spoor wordt door de beschikbare ruimte bepaald en niet door zijn inhoud. */ position: relative; height: 100%; min-height: 0; grid-template-rows: repeat(var(--mn-fams, 5), min-content); column-gap: var(--mn-gap); row-gap: 0; align-items: start; align-content: center; } html.beweegt .mn-fams { display: contents } html.beweegt .mn-fam { display: contents } html.beweegt .mn-kop { grid-column: 1 } /* ⛔ HET TONEEL IS `.mn-toon` EN NIET `.mn-lijst` — dat was oorzaak 4, en de zwaarste. Hier stond de plaatsing op `.mn-lijst`. Maar `lib/menu.js` r155 wikkelt de lijst én het beeld in `
`, en `.mn-fam { display: contents }` maakt dáárom `.mn-toon` het rasterkind — niet de lijst erin. `grid-column: 2` op `.mn-lijst` was dus een regel op een element dat geen rasterkind is: hij deed niets. `.mn-toon` viel terug op automatische plaatsing, en daarmee viel de hele tweekolomsopzet uit elkaar. `.mn-toon` had bovendien in dit hele bestand GEEN ENKELE regel — nagekeken met een grep. Een wikkel die tussen het raster en de inhoud staat en die de stylesheet niet kent, is precies de vorm van J154: twee bestanden die het over hetzelfde element hebben zonder het te weten. */ /* De hoogte hing hier aan `var(--mn-fams) * 87px` — een ingetikte 87 die de gemeten hoogte van één `.mn-kop` was. Dat getal klopte precies zolang niemand de tekstgrootte of de padding aanraakte, en het staat in geen enkele regel die het bepaalt. Nu strekt het toneel zich over de rijen die er werkelijk zijn (`align-self: stretch` over `grid-row: 1 / -1`), met `min-height: 0` zodat het de rijen niet zelf oprekt, en een venstercap eromheen. Geen magisch getal meer. */ /* De breedte komt uit dezelfde twee getallen als de kolommen hierboven: 1.05fr + 1fr met `--mn-gap` ertussen, dus de rechterkolom is (100% − gap) / 2.05. Zo staat de verhouding op één plaats en kan het toneel niet naast zijn eigen kolom komen te liggen. */ html.beweegt .mn-toon { /* `top: 0; bottom: 0` binnen een paneel dat zélf exact de beschikbare hoogte is. Daarmee is de hoogte van het toneel geen som meer maar een gevolg: het is de hele kolom, nooit meer en nooit minder. De vorige versie deed `height: max(100%, 420px)` met een cap erboven, en dat is precies het soort optelling waar de derde ronde van J164 over gaat. */ position: absolute; top: 0; bottom: 0; right: 0; width: calc((100% - var(--mn-gap)) / 2.05); margin: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; /* De scrollbalk is 15 px breed en de bijschriften eindigden er tegenaan — gemeten: tekst tot 1339, balk van 1339 tot 1354. Niets werd afgesneden, maar het leest als afgeknepen. `scrollbar-gutter: stable` houdt de ruimte ook vrij wanneer een korte familie niet scrolt, zodat de kolom niet verspringt zodra je van familie wisselt. */ padding-right: 12px; scrollbar-gutter: stable; /* De scrollbalk was donkergrijs op bijna-zwart en dus onzichtbaar: er stond wél een balk, maar niemand zag dat er iets te scrollen viel. Amber op het paneelvlak — hetzelfde accent als de rest, en het enige moment waarop het iets aanduidt in plaats van te belichten is precies hier: "er staat meer dan je ziet". */ scrollbar-width: thin; scrollbar-color: rgba(198, 137, 43, .55) rgba(246, 242, 233, .08); /* ⛔ DE SCHUIF IS WEG — J164, derde ronde. Njusja: *"op sommige plaatsen trilt het ook"*. Hier stond `transform: translateX(14px)` met een eigen overgang van 260 ms. Vijf toneel- elementen liggen op dezelfde plek gestapeld; bij het wisselen van familie schoof de ene naar binnen terwijl de andere nog uitdoofde, en over elkaar heen leest twee tegengestelde bewegingen als trillen. Alleen de doorschijnendheid blijft over, en korter: 160 ms is lang genoeg om zacht te zijn en te kort om twee toestanden tegelijk te tonen. ⚠ De schuif zelf was niet het probleem — één toneel dat inschuift is prima. Het probleem is dat er vijf zijn. Wie hier ooit weer beweging bij zet, moet eerst zorgen dat er op elk moment maar één zichtbaar kan zijn. */ opacity: 0; transition: opacity 160ms ease; pointer-events: none; } html.beweegt .mn-fam[data-aan] .mn-toon { opacity: 1; pointer-events: auto } /* ⛔ HIER STOND `html.beweegt .mn-lijst { … pointer-events: auto }` — ZONDER `[data-aan]`. ================================================================================================ Dat is de fout waardoor Njusja op 1 september om 01u18 op "De zes fasen" klikte en op `https://www.ceeme.be/nl/local-proof` uitkwam. Ze had het al vier keer eerder gemeld met een andere sectorpagina, en ik heb een uur naar de links zitten kijken. Wat er gebeurde. De vijf tonelen liggen sinds eerder die avond ALLEMAAL absoluut op dezelfde plek, over elkaar heen; alleen het actieve is zichtbaar. Dat is precies waarom de regel erboven `pointer-events: none` op de niet-actieve zet. Maar `pointer-events: auto` op een KIND heft de `none` van zijn ouder weer op — dat is geen overerving die je overschrijft, het is een aparte hittest. Elke verborgen lijst ving dus nog steeds klikken, en de bovenste in de DOM-volgorde won. Je klikte op de derde regel van "Hoe het werkt" en raakte de derde regel van "Oplossingen": local-proof. Vierde regel gaf civic-signal, vijfde creator-signal, zesde human-signal-lab — exact de reeks die ze meldde. ⚠ DIT IS WAAROM ER GEEN ENKELE HREF FOUT WAS. Elke link wees naar de juiste pagina, elke bestemming klopte, er was geen rewrite en geen redirect. De verkeerde link werd geraakt, niet de verkeerde link geschreven. Een uur zoeken in de verkeerde laag, terwijl de aanwijzing in het patroon lag: een kapotte link stuurt je élke keer naar dezelfde verkeerde pagina. ⛔ REGEL: zet `pointer-events: auto` NOOIT op een nakomeling van iets dat je met `pointer-events: none` onklikbaar maakt, tenzij je de actieve toestand meeneemt in de selector. Onzichtbaar is niet hetzelfde als onaanraakbaar. */ html.beweegt .mn-lijst { grid-column: auto; grid-row: auto; opacity: 1; transform: none } html.beweegt .mn-fam[data-aan] .mn-lijst { pointer-events: auto } /* Het beeld was 900 × 600 en werd tot 1155 px hoog uitgerekt — het stak 248 px buiten het scherm en was in z'n eentje goed voor de halve overloop. */ html.beweegt .mn-beeld { margin: 0 0 18px } html.beweegt .mn-beeld img { /* 200 → 150. Het beeld stond bovenaan het toneel en at bij de familie met zestien items een kwart van de kolom op, precies bij de familie die de meeste ruimte nodig heeft. Zie J164, vierde ronde: "hier kan je niet alles zien". */ width: 100%; height: auto; max-height: 150px; object-fit: cover; border-radius: 12px; display: block; } /* Een label dat niet wil breken, duwt anders de hele kolom breed — zie oorzaak 1 hierboven. */ html.beweegt .mn-lijst a { overflow-wrap: anywhere } } /* Het dimmen. Alleen wanneer er íets gekozen is — anders staan ze alle vier gewoon aan, en dat is de juiste begintoestand: je hebt nog niet gekozen. */ html.beweegt .mn-kop { transition: color 220ms ease, opacity 220ms ease } html.beweegt.mn-kies .mn-fam:not([data-aan]) .mn-kop { color: rgba(246, 242, 233, .28) } html.beweegt .mn-fam[data-aan] .mn-kop { color: #F6F2E9 } html.beweegt .mn-fam[data-aan] .mn-n { color: #C6892B } html.beweegt .mn-lijst a { border-bottom-color: rgba(246, 242, 233, .12) } html.beweegt .mn-lijst a:hover, html.beweegt .mn-lijst a:focus-visible { border-bottom-color: #C6892B; outline: none; } html.beweegt .mn-lijst a:hover .mn-p, html.beweegt .mn-lijst a:focus-visible .mn-p { color: #C6892B } /* Met beweging uitgezet blijft alles staan en gebeurt er niets. Geen verlies: het menu werkt, het schuift alleen niet. */ @media (prefers-reduced-motion: reduce) { html.beweegt .cmp-menu, html.beweegt .mn-lijst, html.beweegt .mn-kop, html.beweegt .mn-strepen i { transition: none } }