/* ===== TCT menubalk ===== Eén balk voor alle pagina's. Twee dingen stonden hier scheef: 1. De taalknoppen kwamen uit Webflow als twee losse pillen in een w-locales-list. Op de home verbergt Webflow de actieve taal met .w-locales-list a.w--current{display:none}, op de subpagina's draagt geen van beide links die klasse, dus stonden er twee pillen naast de Trails- en Boek nu-knop. De rij brak af en de balk werd 88px in plaats van 60px. Ze zijn vervangen door één switch: twee helften in één omhulsel, altijd even breed, altijd op één regel. 2. De hover van de navigatieknoppen leunt op Webflow-IX2 (de groene pil) plus een GSAP-script dat de letters los kleurt. Draait dat script niet, dan wordt de pil groen maar blijft de tekst bruin: bruin op donkergroen. De regels hieronder zetten die kleurwissel in CSS, zodat de balk niet meer van een runtime afhangt. De !important is er omdat GSAP de kleur als inline stijl op elke letter zet. Kleuren komen uit de live site: pil #004f29, tekst #f8f9e2. */ .master-navigation .right-nav { flex-wrap: nowrap; align-items: center; } /* --- hover van de navigatieknoppen --- */ .master-navigation a.nav-button [button-bg] { transition: background-color .3s ease, transform .3s ease; } .master-navigation a.nav-button:hover [button-bg] { background-color: #004f29; transform: scale(.95); } .master-navigation a.nav-button [button-text], .master-navigation a.nav-button [button-text] * { transition: color .3s ease; } .master-navigation a.nav-button:hover [button-text], .master-navigation a.nav-button:hover [button-text] * { color: #f8f9e2 !important; } /* --- de taalswitch --- */ .taalswitch { display: inline-flex; align-items: center; flex: 0 0 auto; height: 32px; padding: 2px; border: 1px solid #61471e; /* volle tweeling: solide bruine rand als BOEK NU */ border-radius: 24px; background: #f8f9e2; /* volle tweeling: cream vulling als BOEK NU */ } .taalswitch-optie { display: inline-flex; align-items: center; justify-content: center; height: 28px; min-width: 42px; padding: 0 13px; border-radius: 22px; font-family: futura-pt, futura-100, sans-serif; font-size: 12px; line-height: 16px; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; color: #61471e; transition: background-color .25s ease, color .25s ease; } .taalswitch-optie:hover { color: #004f29; background: rgba(0, 79, 41, .10); } .taalswitch-optie.is-actief, .taalswitch-optie.is-actief:hover { background: #004f29; color: #f8f9e2; } .taalswitch-optie:focus-visible { outline: 2px solid #004f29; outline-offset: 2px; } /* Tikvlak. De pil is 28px hoog en dat haalt de 44px van een duim niet. Het vlak groeit dus met een pseudo-element buiten de pil: verticaal naar 44px, horizontaal alleen naar de buitenkant, zodat NL en EN elkaar niet overlappen en er niets verschuift. Puur touch, geen enkel zichtbaar verschil. */ .taalswitch-optie { position: relative; } .taalswitch-optie::after { content: ""; position: absolute; top: -8px; bottom: -8px; left: 0; right: 0; } .taalswitch-optie:first-child::after { left: -6px; } .taalswitch-optie:last-child::after { right: -6px; } @media (hover: hover) and (pointer: fine) { .taalswitch-optie::after { content: none; } /* muis heeft het niet nodig */ } /* Op de smalle balk staat de switch naast de hamburger; hij blijft even hoog maar levert de padding in, anders duwt hij het logo weg onder 420px. */ /* De maat van de pil staat verderop bij de balkreparatie: hij moest krapper dan de 36px die hier eerst stond, omdat de hele rij anders van het scherm liep. Gemeten na die wijziging: NL clientWidth = scrollWidth op 32 (375, 390, 430), 29 (360) en 27 (320), dus de letters passen nog steeds in hun doos. Het verschil van 6px dat EN laat zien is het tikvlak hierboven, geen tekst. */ /* De knoppenrij op de home kromp tot 78px (flex 0 1 auto) en de knoppen daarin hebben max-width:100%, dus die 78px werd hun plafond: "Book now" is 85px breed en liep dus buiten zijn eigen pil, ook op 430. Op de exportpagina's kromp de rij niet en liep hij juist het scherm uit. Beide gevallen verdwijnen als de rij zijn eigen maat houdt. Dit geldt op het hele mobiele bereik, want het krimpen begint zodra de balk op een rij staat. */ @media screen and (max-width: 767px) { .master-navigation .right-nav { flex: 0 0 auto; column-gap: 6px; } .master-navigation .right-nav .nav-button { flex: 0 0 auto; max-width: none; } /* Tussen 400 en 767 staat het logo in het midden (space-between, zo staat het ook live). De knoppenrij is bij ons breder dan live omdat de losse EN-knop daar bij ons een NL/EN-schakelaar is; daardoor schoof de rij over het logo heen: gemeten 480px, logo 161-207 en de eerste knop op 176, met .nav-button-bg bovenop het logo. De pil krijgt daarom op het hele mobiele bereik dezelfde krappe maat. */ .taalswitch-optie { min-width: 32px; padding: 0 4px; } } /* De balk liep op telefoon van het scherm af. Hij staat position:fixed, dus dat geeft geen schuifbalk: de rechterkant wordt gewoon afgesneden. Gemeten 02-09-2026 op staging, laatste item eindigde op 379 bij elke breedte onder 390 (dus 59px buiten beeld op 320, 19px op 360, 4px op 375). Live is het erger: daar wordt TRAILS op 360 teruggebracht tot de letter T. Alles hieronder is maatwerk, geen herontwerp: dezelfde onderdelen, dezelfde volgorde, alleen krappere binnenmarges en een logo op hoogte. Boven 399px verandert er niets, want daar was niets stuk. */ @media screen and (max-width: 399px) { .master-navigation .navbar { padding-left: 8px; padding-right: 8px; } .master-navigation .nav-container { padding-left: 8px; padding-right: 8px; } .master-navigation .nav-button { padding-left: 10px; padding-right: 10px; } /* Het merk stond op twee maten: de exportpagina's zetten .brand-nav op een vaste 94px met een logo van 80% daarvan, de home laat de link meegroeien met het beeld. Daardoor stak het logo op de export 11px buiten zijn eigen link uit (link 32-75, beeld 32-86) en lag het over de eerste knop heen. Logo op hoogte zetten en de link zich eromheen laten sluiten geeft op beide pagina's dezelfde doos: gemeten 32-77 op 360, 375 en 390. */ .master-navigation .brand-nav { width: auto; min-width: 0; flex: 0 0 auto; } .master-navigation .logo-brand { width: auto; height: 22px; max-width: none; margin-left: 0; margin-right: 0; } /* De taalpil levert onder 400px binnenmarge in. Zijn tikvlak blijft heel: de ::after hierboven steekt 6px links en rechts uit en 8px boven en onder. Gemeten clientWidth = scrollWidth op NL bij 32, 29 en 27; de 6px verschil die EN laat zien is die ::after zelf, geen afgeknipte letter. */ .taalswitch-optie { min-width: 32px; padding: 0 4px; } } @media screen and (max-width: 374px) { .master-navigation .nav-button { padding-left: 8px; padding-right: 8px; } .taalswitch-optie { min-width: 29px; padding: 0 3px; } } /* Onder 360 mag de balk tot de schermrand: anders past de rij simpelweg niet. Deze grens staat bewust op 359 en niet op 374, want op 360 zag het er met die vier pixels marge nog uit als een balk en niet als een rand. */ @media screen and (max-width: 359px) { .master-navigation { padding-left: 0; padding-right: 0; } .master-navigation .navbar { padding-left: 4px; padding-right: 4px; } .master-navigation .nav-container { padding-left: 4px; padding-right: 4px; } .taalswitch-optie { min-width: 27px; padding: 0 2px; } } /* Tussen 480 en 519 schuift Webflows eigen omslagpunt het logo naar het midden terwijl de rij daar nog niet naast past: gemeten logo 161-207 tegen de eerste knop op 186 (480px) en 168-216 tegen 206 (500px). Alleen in die smalle band leveren de knoppen en de pil wat binnenmarge in; boven 519 was er ruimte genoeg (520: logo tot 225, knop vanaf 226). */ @media screen and (min-width: 480px) and (max-width: 519px) { .master-navigation .nav-button { padding-left: 8px; padding-right: 8px; } .taalswitch-optie { min-width: 29px; padding: 0 3px; } } /* ===== VIVIMUS-NORM-START kop- en knopgewichten gelijkgetrokken ===== Toegevoegd 2026-09-15 (REGISTER GEMETEN 162, opdracht Dauji: "trek de kop-gewichten en knoppen gelijk"). Gemeten baseline (computed styles op de geserveerde URL, locale nl-NL): KOPPEN - H1 600 op home/en/de, 900 op trails, 700 elders; text-h6 500 op entrepreneur tegen 700 op home -> alles naar 700 (base/dominant). KNOPPEN - de headerknoppen rechtsboven (.button-text.green: BOEK NU/TRAILS/ ONS VERHAAL) staan op 400; de body-CTA's op 500 en .partner-knop op 700. Dauji-correctie OPEN 66/GEMETEN 153: knoptype moet de HEADERKNOP volgen. Dus alle knoplabels naar 400, gelijk aan de (onaantastbare) header. De header zelf wordt NIET geraakt: .button-text.green blijft buiten schot via :not(.green). Deze override staat NA de Webflow-CDN-CSS en wint met !important, zonder de Webflow-bron te raken. Groottes blijven ongemoeid. Bewust NIET geraakt: header-nav (.button-text.green), .keuze (wizard- segmenttab w800, opzettelijk), .cta-datums (datumbanner, geen knop), .footer-cta-tekst (bodytekst), .faq-vraag/.erv-pijl (accordion/carrousel- controls), .bold-text zelf (alleen de .text-h1.bold-text-kop via .text-h1). De klasseloze wizard-antwoordknoppen JA/NEE (in .check-keuze) gaan ook naar 400 via .check-keuze button:not(.keuze); de :not(.keuze) spaart de tabs. Terugdraaien: verwijder alles tussen VIVIMUS-NORM-START en -END. ===== */ .text-h1, .text-h2, .text-h3, .text-h4, .text-h5, .text-h6 { font-weight: 700 !important; } .button-text:not(.green), .conv-knop, .paneel-cta, .cta-knop, .cta-small, .check-knop, .check-terug, .opbrengst-knop, .addon-knop, .aknop, .erv-meer, .partner-knop, .footer-cta-knop, .check-keuze button:not(.keuze) { font-weight: 400 !important; } /* ===== VIVIMUS-NORM-END ===== */ /* VIVIMUS-SPOTS-START OPEN95 spots-label groter (deploy-chat) */ .editie.small .wrap.horizontal.yellow .label-small{ font-size:14px !important; line-height:1.15 !important; white-space:nowrap !important; } /* VIVIMUS-SPOTS-END */ /* VIVIMUS-FOOTERNB-START OPEN107 footer nieuwsbrief mobiel links (deploy-chat 2026-09-23) */ @media screen and (max-width: 767px) { .form-block-footer { padding-left: 0; padding-right: 0; } .form-footer { align-items: flex-start; } .form-footer .text-large { align-self: flex-start; text-align: left; } } /* VIVIMUS-FOOTERNB-END */ /* ===== TCT brandbook: cursief-accent, centraal ===== */ /* Marker: brandbook-cursief-accent-2026-09-23 */ h1 em, h2 em, h3 em, h4 em { font-style: italic; } /* VIVIMUS-HEADERFIT-START header past onder 768px (bouw H, 2026-09-25) Webflow verborg op de home de actieve taal (.w-locales-list a.w--current{display:none}). Met drie talen stonden hier NL, EN en DE naast elkaar en dan stak de switch op 360-430 tot 26px buiten de menubalk (DE-subpagina's) of schoof de rij over het logo (home, 36px op DE 360). Op het mobiele bereik doet de switch nu weer wat het origineel deed: de actieve taal valt weg, de andere twee blijven. Het tikvlak (::after, 6px buiten de buitenste optie) schuift mee naar de nieuwe buitenste optie. Alleen Duits onder 400px past dan nog niet: JETZT BUCHEN is 112px tegen BOEK NU 84 en BOOK NOW 101, gemeten rechtermarge 2.7px (360) en 3.7px (375) op de subpagina's en 6.7/5.7px logo-overlap op de home. Daar levert de rij binnen de balk in: 3px minder tussenruimte tussen de onderdelen en een smallere taaloptie, in dezelfde band en stap als de bestaande 399-, 374- en 359-regels hierboven. Woordmerk, knoppen, lettertype en plek blijven gelijk; boven 767px verandert er niets. Terugdraaien: verwijder alles tussen HEADERFIT-START en -END. */ @media screen and (max-width: 767px) { .taalswitch-optie.is-actief { display: none; } .taalswitch-optie.is-actief:first-child + .taalswitch-optie::after { left: -6px; } .taalswitch-optie:has(+ .taalswitch-optie.is-actief:last-child)::after { right: -6px; } } @media screen and (max-width: 399px) { html[lang="de"] .master-navigation .right-nav { column-gap: 3px; } html[lang="de"] .taalswitch-optie { min-width: 25px; padding: 0 2px; } } /* VIVIMUS-HEADERFIT-END */