/* ═══════════════════════════════════════════════════════════════════════════ Vibe Home — formulierbranding Eén stylesheet voor elke stapsgewijze flow: energiescan, configurators, aanvraagformulieren. Laadt ná vh.css en gebruikt dezelfde tokens, dus een kleur- of typewijziging in vh.css werkt hier automatisch door. Opbouw van een pagina:
buitenste schil
…
voortgang + context
één vraag per scherm

… fase

… de vraag

… toelichting, optioneel

… keuzes

… uitstapje, optioneel

…
terug + volgende ═══════════════════════════════════════════════════════════════════════════ */ /* min-height op svh, niet vh: met body{overflow-x:hidden} levert 100vh een even hoge body als de inhoud op, waardoor de pagina niet meer scrolt. */ .vhF{--vhF-max:720px;--vhF-r:14px;background:var(--white);min-height:100svh;display:flex;flex-direction:column} /* ── voortgangsbalk ──────────────────────────────────────────────────────── */ .vhF-bar{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-2)} .vhF-bar .in{max-width:var(--container);margin:0 auto;padding:14px var(--gut);display:flex;align-items:center;gap:clamp(16px,3vw,36px)} /* stappen — de fase is de navigatie, het percentage is bijzaak */ .vhF-steps{display:flex;align-items:center;gap:clamp(6px,1.2vw,16px);flex:1;min-width:0;list-style:none;margin:0;padding:0} .vhF-steps li{display:flex;align-items:center;gap:9px;min-width:0;font:500 13.5px/1.3 var(--fb);color:var(--ink-3);white-space:nowrap} .vhF-steps li .dot{width:22px;height:22px;flex:none;border-radius:var(--pill);border:1.5px solid var(--line);display:grid;place-items:center;font:600 11px/1 var(--fm);color:var(--ink-3);background:#fff;transition:all .22s var(--ease)} .vhF-steps li .dot svg{width:12px;height:12px;stroke:#fff;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round} .vhF-steps li:after{content:"";flex:1;height:1.5px;background:var(--line-2);min-width:10px;border-radius:2px} .vhF-steps li:last-child:after{display:none} .vhF-steps li.done{color:var(--ink-2)} .vhF-steps li.done .dot{background:var(--cyan);border-color:var(--cyan)} .vhF-steps li.done:after{background:var(--cyan)} .vhF-steps li.now{color:var(--ink);font-weight:600} .vhF-steps li.now .dot{border-color:var(--cyan);color:var(--cyan-ink);box-shadow:0 0 0 4px rgba(48,197,240,.16)} /* context: waarvoor reken je */ .vhF-ctx{flex:none;display:inline-flex;align-items:center;gap:10px;background:var(--pale);border-radius:var(--pill);padding:8px 8px 8px 16px;font:500 13.5px/1 var(--fb);color:var(--ink-2)} .vhF-ctx b{font:600 13.5px/1 var(--fb);color:var(--ink)} .vhF-ctx button{border:0;background:#fff;border-radius:var(--pill);padding:7px 13px;font:600 12.5px/1 var(--fb);color:var(--cyan-ink);cursor:pointer;transition:all .2s var(--ease)} .vhF-ctx button:hover{background:var(--cyan);color:#fff} /* dunne voortgangslijn onderaan de balk */ .vhF-line{height:2px;background:var(--line-2)} .vhF-line i{display:block;height:100%;background:var(--cyan);border-radius:2px;transition:width .35s var(--ease)} /* ── inhoud ──────────────────────────────────────────────────────────────── */ /* Kolom in plaats van rij, zodat de uitleg onder de scan kan staan terwijl hij er in de HTML bóven staat. `align-items:center` doet wat `justify-content` in de rijstand deed: horizontaal centreren. */ .vhF-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:clamp(34px,6vw,84px) var(--gut) clamp(28px,4vw,48px)} /* De scan wordt door JavaScript in dit vak gerenderd. Tot dat moment is het vak 0 pixels hoog, waardoor de uitleg eronder eerst bovenaan stond en vervolgens 470 pixels naar beneden sprong: gemeten CLS 0.103 op desktop, ruim boven de grens van 0.1. Die ruimte wordt hier vooraf gereserveerd. 470px is de gemeten hoogte van de eerste stap op desktop. Het is een MINIMUM: een langere stap groeit er gewoon overheen, en op mobiel is de eerste stap 723px, dus daar verandert deze regel niets. */ #scanApp{order:1;min-height:470px} /* ── uitleg bij de scan ─────────────────────────────────────────────────────── Staat eerst in de leesvolgorde (de H1 hoort bovenaan) en dankzij `order` onder de scan in beeld. Niets verborgen: het blok is gewoon zichtbaar. */ .vhF-seo{order:2;width:100%;max-width:var(--vhF-max);margin-top:clamp(48px,7vw,88px); padding-top:clamp(28px,4vw,40px);border-top:1px solid var(--line-2)} .vhF-seo h1{font:600 clamp(24px,3vw,34px)/1.12 var(--fd);letter-spacing:-.03em;color:var(--ink)} .vhF-seoLead{font-size:16.5px;line-height:1.65;color:var(--ink-2);margin-top:12px;max-width:62ch} .vhF-seoGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px);margin-top:clamp(24px,3vw,34px)} .vhF-seoGrid h2{font:600 15.5px/1.3 var(--fd);letter-spacing:-.015em;color:var(--ink)} .vhF-seoGrid p{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin-top:7px} @media(max-width:760px){.vhF-seoGrid{grid-template-columns:1fr;gap:20px}} /* ── voettekst ──────────────────────────────────────────────────────────────*/ /* De globale footer-regel maakt de voettekst donker; deze pagina heeft bewust een lichte, rustige opmaak, dus die zetten we hier terug. */ .vhF-foot{background:#fff;color:var(--ink-2);max-width:none;margin:0; padding:clamp(22px,3vw,32px) var(--gut) clamp(30px,4vw,44px);border-top:1px solid var(--line-2)} .vhF-foot > *{max-width:var(--vhF-max);margin-left:auto;margin-right:auto} .vhF-foot nav{display:flex;flex-wrap:wrap;gap:9px 18px} .vhF-foot a{font-size:14px;color:var(--ink-2);text-decoration:none} .vhF-foot a:hover{color:var(--cyan-dark)} .vhF-footLegal{margin-top:16px;font-size:12.5px;line-height:1.7;color:var(--ink-3)} .vhF-footLegal a{font-size:12.5px} .vhF-step{width:100%;max-width:var(--vhF-max)} .vhF-q{font:600 clamp(28px,3.6vw,44px)/1.08 var(--fd);letter-spacing:-.035em;color:var(--ink);margin:14px 0 0} .vhF-help{font-size:16px;line-height:1.6;color:var(--ink-2);margin:12px 0 0;max-width:56ch} .vhF-step .vhF-opts,.vhF-step .vhF-fields{margin-top:clamp(24px,3vw,36px)} /* ── keuzekaarten ────────────────────────────────────────────────────────── */ .vhF-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px} .vhF-opts.one{grid-template-columns:1fr} .vhF-opt{position:relative;display:flex;align-items:center;gap:14px;background:#fff;border:1.5px solid var(--line);border-radius:var(--vhF-r);padding:18px 20px;cursor:pointer;transition:border-color .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease)} .vhF-opt:hover{border-color:var(--cyan);background:var(--pale)} .vhF-opt input{position:absolute;opacity:0;width:0;height:0} .vhF-opt .tx{flex:1;min-width:0;display:grid;gap:3px} .vhF-opt .tx b{font:600 16.5px/1.3 var(--fd);letter-spacing:-.02em;color:var(--ink)} .vhF-opt .tx span{font-size:13.5px;line-height:1.5;color:var(--ink-2)} /* het bolletje is de bevestiging, niet de knop — de hele kaart is klikbaar */ .vhF-opt .mark{flex:none;width:22px;height:22px;border-radius:var(--pill);border:1.5px solid var(--line);display:grid;place-items:center;transition:all .18s var(--ease)} .vhF-opt .mark:after{content:"";width:9px;height:9px;border-radius:var(--pill);background:var(--cyan);transform:scale(0);transition:transform .18s var(--ease)} .vhF-opt input:checked~.mark{border-color:var(--cyan);background:var(--cyan)} .vhF-opt input:checked~.mark:after{background:#fff;transform:scale(1)} .vhF-opt:has(input:checked){border-color:var(--cyan);background:var(--pale);box-shadow:0 0 0 3px rgba(48,197,240,.16)} .vhF-opt input:focus-visible~.mark{box-shadow:0 0 0 3px rgba(48,197,240,.3)} /* meerkeuze: vierkant vinkje in plaats van een bolletje */ .vhF-opt.multi .mark{border-radius:6px} .vhF-opt.multi .mark:after{width:11px;height:11px;border-radius:0;background:none;border-right:2.4px solid #fff;border-bottom:2.4px solid #fff;transform:rotate(42deg) scale(0) translate(-1px,-1px);width:6px;height:10px} .vhF-opt.multi input:checked~.mark:after{transform:rotate(42deg) scale(1) translate(-1px,-1px)} /* icoon of beeld in de kaart */ .vhF-opt .ic{flex:none;width:42px;height:42px;border-radius:11px;background:var(--pale);display:grid;place-items:center} .vhF-opt .ic svg{width:20px;height:20px;fill:none;stroke:var(--cyan-ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .vhF-opt:has(input:checked) .ic{background:#fff} /* ── invoervelden ────────────────────────────────────────────────────────── */ .vhF-fields{display:grid;gap:16px} .vhF-fields .row{display:grid;grid-template-columns:1.5fr 1fr;gap:12px} .vhF-fields .f{display:grid;gap:7px} .vhF-fields label{font:600 11px/1 var(--fm);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)} .vhF-fields input,.vhF-fields select,.vhF-fields textarea{font:400 16.5px/1.4 var(--fb);padding:15px 16px;border:1.5px solid var(--line);border-radius:var(--r-m);background:#fff;color:var(--ink);width:100%;transition:border-color .18s var(--ease),box-shadow .18s var(--ease)} .vhF-fields input:focus,.vhF-fields select:focus,.vhF-fields textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(48,197,240,.18)} .vhF-fields textarea{min-height:120px;resize:vertical} .vhF-fields .hint{font-size:13px;color:var(--ink-3)} /* ── uitstapje onder de keuzes ───────────────────────────────────────────── */ .vhF-aside{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:20px;padding-top:18px;border-top:1px solid var(--line-2);font-size:14.5px;color:var(--ink-2)} .vhF-aside .go{border:1.5px solid var(--line);background:#fff;border-radius:var(--pill);padding:9px 16px;font:600 13.5px/1 var(--fb);color:var(--cyan-ink);cursor:pointer;transition:all .2s var(--ease)} .vhF-aside .go:hover{border-color:var(--cyan);background:var(--pale)} /* ── iconen in knoppen ────────────────────────────────────────────────── Losstaand blok, bewust niet binnen de navigatie: zonder expliciete maat valt een svg terug op 300x150 en rekt hij de knop op. Geldt voor elke knop in een formulier, dus laat deze regel staan als de navigatie verandert. */ .vhF .btn svg,.vhF .vhF-back svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .vhF .vhF-back svg{width:18px;height:18px;stroke:var(--ink-2)} /* ── navigatie ─────────────────────────────────────────────────────────── De pil staat in de flow, direct na de laatste keuze, rechts uitgelijnd. Daardoor kan hij per definitie niets afdekken. Vanaf 1200 px is de marge naast de kolom breder dan de pil zelf; daar mag hij meezweven, want dan zweeft hij náást de inhoud en niet erover. Onder die breedte blijft hij gewoon staan waar hij hoort. Zo is er geen enkele schermbreedte waarop een keuze onbereikbaar wordt. */ /* De nav is geauthored als