/* ============================================================================= vp/header.css — de navigatiebalk: bovenaan zoals het sjabloon hem zet, pas plakkend zodra de bezoeker scrolt. VOORGESCHIEDENIS (voor wie dit bestand hierna weer opent) Een eerdere poging zette .navbar onvoorwaardelijk op position: fixed, met een bijna dekkend vlak (rgba .94) en blur(16px) — ALTIJD, ook op scrollpositie 0. Gevolg: de balk lag over de hele hero heen, ook bovenaan. Een volgende poging voegde alleen een uitleg-commentaar toe over wat er mis was; de CSS zelf (positie, vlak, blur) stond nog exact zo. Er was dus geen halve implementatie te hergebruiken, alleen een probleemschets — die schets staat verwerkt in de tekst hieronder. Dit bestand regelt nu TWEE standen met één klasse (`vp-header-plakt`) die vp/omhoog.js op zet zodra de bezoeker voorbij de rustpositie van de balk scrolt (zie dat bestand voor de meting). RUSTSTAND (geen klasse op — en dus ook precies de stand zonder JS) Hieronder wordt NIETS van .navbar's eigen positie, marge of achtergrond overschreven: css/vastpilot-v6.webflow.css zet hem al op position: absolute; background-color: transparent; margin-top: 60px (60px vanaf 992px, 0px daaronder — dat bestand regel 407 en 1903). Dat IS "zoals hij oorspronkelijk stond": meelopend in de hero, geen eigen vlak, geen blur. Alleen z-index staat hieronder altijd aan (punt 3 verderop); dat verandert in ruststand niets zichtbaars. PLAKSTAND () 1. position: absolute → fixed, top: 0. Het omslagpunt is de scrollY- waarde waarop de balk — nog gerenderd in ruststand — toch al op viewport-top 0 zou staan. vp/omhoog.js meet die waarde zelf, live, in plaats van 60/0 hier over te typen (dat zijn Webflow's getallen, niet van dit bestand, en ze kunnen nog veranderen). Op precies dat scrollpunt is "vlak voor de wissel" (absolute, viewport-top ≈ 0) pixel-voor-pixel gelijk aan "vlak na de wissel" (fixed, top: 0): geen sprong in positie, en omdat .navbar's eigen padding/lettergrootte niet verandert, ook geen sprong in hoogte. 2. Het vlak staat NIET op .navbar zelf en ook NIET op een ::before: een pseudo-element met backdrop-filter geeft op deze pagina een kapotte kleurmenging (gemeten: een rgba(251,249,244,.94)-vlak met blur(16px) op ::before gaf achter #scene-machine een DONKERE, onmogelijke uitkomst — rekenkundig kan 94% bijna-wit plus 6% willekeurige achtergrond nooit zo donker uitkomen als er is gemeten. Hetzelfde vlak DIRECT op .navbar, of als ECHT element (geen pseudo-element) erin, gaf wel de verwachte lichte uitkomst — dus specifiek de combinatie ::before + backdrop-filter is hier de kapotte schakel, vermoedelijk gebonden aan Webflow's eigen transform-style: preserve-3d op .navbar zelf (IX2-intro-animatie), al bleef de fout ook bestaan toen die inline transform en transform-style tijdelijk werden uitgezet — de precieze oorzaak in Chromium is niet gevonden, alleen het omzeilen ervan). vp/omhoog.js zet daarom bij het laden een ECHT element (.vp-header-vlak, aria-hidden, pointer-events: none) als kind in .navbar, met absolute positie en inset: 0. Dat element draagt het vlak, met opacity: 0 in ruststand en opacity: 1 in plakstand — ALLEEN dat wordt getransitioned. Reden: er mag alleen transform en opacity geanimeerd worden, dus kleur/blur/schaduw zelf veranderen nooit van waarde, alleen van zichtbaarheid. Kleur en blur zijn ongewijzigd t.o.v. de vorige poging: rgba(251, 249, 244, .94) — --vp-kaart, bijna dekkend — plus blur(16px); dat is al eerder tegen de donkerste en lichtste onderliggende inhoud gemeten (zie testrapport). Zonder JavaScript bestaat .vp-header-vlak niet: de balk kan dan ook nooit een eigen vlak krijgen, wat precies de gevraagde stand zonder script is. 3. z-index: 100, ongeacht klasse. In ruststand doet dat niets zichtbaars (position: absolute zonder z-index wint al van niet-gepositioneerde content, dus de balk lag al boven de hero). In plakstand is het wel nodig: #scene-machine draagt z-index: 2 op zijn buitenste sectie (vp/scene.css) en zou de balk anders overschaduwen zodra die sectie voorbij scrolt. HOOGTE, GEMETEN met Playwright/Chromium (ongewijzigd: deze aanpak raakt .navbar's eigen padding/lettergrootte niet): 320 → 64px 375 → 64px 768 → 69px 991 → 69px 992 → 45px 1024/1200/1440/1920 → 45px OMSLAGPUNT, GEMETEN: vp/omhoog.js leest bij laden (en na resize) de werkelijke rustpositie van de balk. Op 992px en hoger komt daar ~60px uit (Webflow's margin-top), onder 992px ~0px (margin-top is daar al 0). Zie de toelichting in dat bestand voor de rekenwijze. ========================================================================= */ .navbar { z-index: 100; } .navbar .brand-logo-link, .footer .brand-logo-link { min-height: 44px; display: inline-flex; align-items: center; } .nav-button-div .button { min-height: 44px; display: inline-flex; align-items: center; } /* Zonder JavaScript zet Webflow de mobiele navigatie niet open. De vroege head-script voegt w-mod-js toe zodra JavaScript wel draait; zonder die klasse blijven alle links zichtbaar en verdwijnt de nutteloze menuknop. */ @media screen and (max-width: 991px) { .w-nav[data-collapse="medium"] .w-nav-menu { max-height: calc(100svh - 84px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } html:not(.w-mod-js) .w-nav[data-collapse="medium"] .w-nav-menu, html[data-vp-nav-contract="eigen"]:not(.vp-nav-ready) .w-nav[data-collapse="medium"] .w-nav-menu, .w-nav[data-collapse="medium"].vp-nav-zonder-webflow .w-nav-menu { display: block; position: absolute; top: 100%; right: 16px; left: 16px; width: auto; } html:not(.w-mod-js) .w-nav[data-collapse="medium"] .w-nav-button, html[data-vp-nav-contract="eigen"]:not(.vp-nav-ready) .w-nav[data-collapse="medium"] .w-nav-button, .w-nav[data-collapse="medium"].vp-nav-zonder-webflow .w-nav-button { display: none; } html[data-vp-nav-contract="eigen"].vp-nav-ready .w-nav[data-collapse="medium"] .w-nav-menu { display: none; } html[data-vp-nav-contract="eigen"].vp-nav-ready .w-nav[data-collapse="medium"] .w-nav-menu.vp-nav-open { display: block; position: absolute; top: 100%; right: 16px; left: 16px; width: auto; } html[data-vp-nav-contract="eigen"].vp-nav-ready .w-nav[data-collapse="medium"] .w-nav-button { display: block; } } html.vp-header-plakt .navbar { position: fixed; top: 0; left: 0; right: 0; width: auto; /* niet width:100%: dat rekent soms mis met de breedte van een scrollbalk en geeft dan een randje overloop. left/right:0 is exact. */ margin-top: 0; } .vp-header-vlak { /* Wordt door vp/omhoog.js als ECHT element in .navbar gezet — geen ::before, zie de toelichting hierboven. Bestaat het element niet (geen JavaScript), dan bestaat deze regel simpelweg voor niets: geen vlak, precies de stand zonder script. GEEN backdrop-filter. Hier stond blur(16px), met en zonder -webkit-. Weggehaald op 30 augustus 2026: REVIEW.md paragraaf 4 verbiedt het patroon, en dit is precies het geval dat daar genoemd wordt. De opdrachtgever kijkt in Safari, en WebKit hervervaagt de achtergrond bij elke scroll-frame op een vaste balk. Dat is in dit project op 23 augustus 2026 al een keer stukgelopen. Kosten: bijna nul. Het vlak staat op 94 procent dekking, dus wat er doorheen komt is 6 procent van de inhoud eronder. De balk is voor en na op 320, 375, 768, 1024 en 1440 pixel voor pixel vergeleken, gescrold tot hij plakt: het grootste verschil op één kanaal is 11 van 255, dus onder de 5 procent, en de vorm en de kleur van de balk blijven gelijk. */ position: absolute; inset: 0; z-index: -1; pointer-events: none; background: rgba(251, 249, 244, .94); /* --vp-kaart, bijna dekkend */ box-shadow: 0 1px 0 var(--vp-lijn), 0 16px 32px -24px rgba(34, 48, 59, .22); opacity: 0; transition: opacity .28s ease; } html.vp-header-plakt .vp-header-vlak { opacity: 1; } @media (prefers-reduced-motion: reduce) { .vp-header-vlak { transition: none; } } /* Hier stond een @supports-tak die het vlak volledig dekkend maakte in een browser zonder backdrop-filter. Die tak had alleen bestaansrecht zolang de blur er stond: nu is er geen browserverschil meer om op te vangen, en één dekking voor iedereen is ook eerlijker dan een balk die per browser anders oogt. Weggehaald op 30 augustus 2026, samen met de blur zelf. */ /* --------------------------------------------------------------------------- Ankerlinks onder de balk uit. scroll-padding-top op de scrollende doos werkt voor ELKE sprong naar een #anker: een gewone link, scrollIntoView vanuit JavaScript (zoals vp/pilo.js dat al doet voor #kennismaken) en de knop naar boven in vp/omhoog.js. Er hoeft dus nergens scroll-margin-top op een los element te staan. Deze waarde is alleen relevant zodra de balk plakt: een sprong naar een anker landt vrijwel altijd ver voorbij het omslagpunt, dus de balk staat op dat moment fixed en dekkend, en scroll-padding-top moet precies die (fixed) hoogte plus lucht compenseren. Waarde = gemeten balkhoogte + 24px lucht, altijd naar boven afgerond zodat er nooit een paar pixels tekst net onder de balk verdwijnt. Hoogte 69 → 93; hoogte 45 → 69. Zie de meting hierboven. --------------------------------------------------------------------------- */ html { scroll-padding-top: 93px; } @media screen and (min-width: 992px) { html { scroll-padding-top: 69px; } } /* V6-disclosures. Tekst blijft tekst; alleen echte bediening krijgt klikvlak. */ .vp-nav-lijst, .vp-nav-pane ul { margin: 0; padding: 0; list-style: none; } .vp-nav-lijst { align-items: center; } .vp-nav-groep { position: relative; } .vp-nav-groepknop, .vp-nav-pane a { color: var(--color--gray-950); font: inherit; font-weight: var(--_typography---font-weight--semi-bold); text-decoration: none; } .vp-nav-groepknop { min-width: 44px; min-height: 44px; padding: 10px 8px; border: 0; background: transparent; align-items: center; gap: 7px; display: inline-flex; cursor: pointer; } .vp-nav-chevron { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transform-origin: center; } .vp-nav-groepknop[aria-expanded="true"] .vp-nav-chevron { transform: rotate(225deg) translate(-1px, -1px); } .vp-nav-groepknop:hover, .vp-nav-groepknop:focus-visible, .vp-nav-groep.vp-nav-ancestor > .vp-nav-groepknop, .vp-nav-pane a:hover, .vp-nav-pane a:focus-visible, .vp-nav-pane a[aria-current] { color: var(--color--blue-700); text-decoration: underline; text-underline-offset: 4px; } .vp-nav-groepknop:focus-visible, .vp-nav-pane a:focus-visible { outline: 3px solid var(--vp-accent-op-licht); outline-offset: 3px; } .vp-nav-pane { position: absolute; top: calc(100% + 8px); left: 0; min-width: 220px; padding: 8px; background: var(--color--white); border: 1px solid var(--vp-lijn); border-radius: 16px; box-shadow: 0 18px 45px -24px rgba(34, 48, 59, .35); } .vp-nav-pane a { min-height: 44px; padding: 11px 12px; display: block; } /* Een losse link in de hoofdbalk (Traject, Over ons) stond op 16px terwijl de groepknoppen ernaast op 14px staan: `.nav-link` erft de small-paragraph-maat uit de Webflow-CSS en de knoppen erven van de balk zelf. Naast elkaar leest dat als twee soorten menu-items. Zelfde maat, zelfde raakvlak van 44px, dus dezelfde padding als de knop. Gemeten 5 september 2026: 16px tegen 14px. */ .vp-nav-lijst > li > .nav-link { min-height: 44px; padding: 10px 8px; align-items: center; font-size: 14px; line-height: 1.2; display: inline-flex; } .nav-link[aria-current], .brand-logo-link[aria-current], .nav-button-div .button[aria-current] { text-decoration: underline; text-underline-offset: 4px; } @media screen and (min-width: 992px) { .vp-nav-lijst { display: flex; gap: 4px; } html.vp-nav-ready .vp-nav-pane { /* Ruststand: 60px bovenmarge + 44px knop + 8px paneelafstand. Acht extra pixels houden ook de laatste rij binnen de viewport. */ max-height: calc(100vh - 120px); max-height: calc(100dvh - 120px); overflow-y: auto; overscroll-behavior: contain; } html.vp-nav-ready .vp-nav-pane[hidden] { display: none; } html:not(.vp-nav-ready) .vp-nav-groepknop { display: none; } html:not(.vp-nav-ready) .vp-nav-pane[hidden] { position: static; padding: 0; border: 0; box-shadow: none; display: block; } html:not(.vp-nav-ready) .vp-nav-pane ul { display: flex; } /* De Pilo-groep telt na generatie negen links. Zonder werkende navigatie-JS blijven die bereikbaar, maar niet als één horizontale rij die de balk buiten het scherm duwt. */ html:not(.vp-nav-ready) .vp-nav-lijst { align-items: flex-start; flex-wrap: wrap; } html:not(.vp-nav-ready) .vp-nav-groep[data-vp-nav-groep="pilo"] { flex: 1 0 100%; } html:not(.vp-nav-ready) .vp-nav-groep[data-vp-nav-groep="pilo"] .vp-nav-pane ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media screen and (max-width: 991px) { .vp-nav-lijst { width: 100%; display: block; } .vp-nav-lijst > li, .vp-nav-lijst > li > .nav-link, .vp-nav-groepknop { width: 100%; } .vp-nav-groepknop { justify-content: space-between; padding: 12px 20px; text-align: left; } /* Mobiel staat het menu onder elkaar en springt elk item 20px in. De losse links horen op dezelfde lijn te beginnen als de groepknoppen. */ .vp-nav-lijst > li > .nav-link { padding: 12px 20px; text-align: left; } .vp-nav-pane { position: static; min-width: 0; margin: 0 12px 8px; padding: 2px 8px; border-radius: 12px; box-shadow: none; } .vp-nav-pane a { padding-left: 20px; } html.vp-nav-ready .vp-nav-pane[hidden] { display: none; } html:not(.vp-nav-ready) .vp-nav-groepknop { display: none; } html:not(.vp-nav-ready) .vp-nav-pane[hidden] { display: block; } html.vp-nav-ready .w-nav[data-collapse="medium"] .w-nav-menu { display: none; } html.vp-nav-ready .w-nav[data-collapse="medium"] .w-nav-menu.vp-nav-open { display: block; position: absolute; top: 100%; right: 16px; left: 16px; width: auto; max-height: calc(100svh - 84px); max-height: calc(100dvh - 84px); padding-bottom: max(20px, env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; } html.vp-nav-ready .w-nav[data-collapse="medium"] .w-nav-button { display: block; } } /* --------------------------------------------------------------------------- Hamburger-icoon terug op de mobiele menuknop (5 september 2026). De knop `.menu-button` bevat alleen een lege `div.menu-toggle` met lottie-attributen. Webflow vulde die met een geanimeerd icoon uit /documents/menu-dark.json. Dat script is op 4 september verwijderd (O1293), dus sindsdien is de knop 25 bij 25 pixels GROOT MAAR ONZICHTBAAR. Hij werkt wel (nav-fallback.js opent het menu) en schermlezers vinden hem via het aria-label, maar wie kijkt ziet niets. Dat geldt op alle pagina's, want dit staat in de gedeelde partial vp/nav-blok.html. Opgelost met CSS in plaats van met een inline SVG in de partial, want dan werkt het meteen op alle pagina's zonder de HTML opnieuw te bouwen. Drie lijnen: de middelste is de div zelf via een achtergrond, de buitenste twee zijn ::before en ::after. Bij een geopend menu draaien de buitenste twee naar een kruis en verdwijnt de middelste, gehaakt op aria-expanded van de knop, hetzelfde patroon als de chevron hierboven. --------------------------------------------------------------------------- */ .menu-button .menu-toggle { position: relative; display: block; width: 25px; height: 25px; } .menu-button .menu-toggle::before, .menu-button .menu-toggle::after { content: ""; position: absolute; left: 2px; right: 2px; height: 2px; border-radius: 1px; background: var(--color--blue-950, #0f1c33); transition: transform .2s ease, opacity .2s ease, top .2s ease; } /* De middelste streep. Een eigen pseudo-element is op. Vandaar een achtergrondstreep op het element zelf, op dezelfde hoogte gecentreerd. */ .menu-button .menu-toggle { background-image: linear-gradient(var(--color--blue-950, #0f1c33), var(--color--blue-950, #0f1c33)); background-size: 21px 2px; background-position: center; background-repeat: no-repeat; transition: background-size .2s ease; } .menu-button .menu-toggle::before { top: 6px; } .menu-button .menu-toggle::after { top: 17px; } /* Open: buitenste twee kruisen, middelste verdwijnt. */ .menu-button[aria-expanded="true"] .menu-toggle { background-size: 0 2px; } .menu-button[aria-expanded="true"] .menu-toggle::before { top: 11.5px; transform: rotate(45deg); } .menu-button[aria-expanded="true"] .menu-toggle::after { top: 11.5px; transform: rotate(-45deg); } @media (prefers-reduced-motion: reduce) { .menu-button .menu-toggle, .menu-button .menu-toggle::before, .menu-button .menu-toggle::after { transition: none; } }