/* ═══════════════════════════════════════════════════════════════════════════ Bloomt. — alle opmaak van de site Plakken in: Weergave › Aanpassen › Extra CSS → Publiceren. Eén keer. Daarna staat dit in de van elke pagina en wordt het door de browser bewaard, zodat elke volgende pagina meteen opgemaakt verschijnt. ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ Bloomt. — één stylesheet voor de hele site Deze opmaak hoort bij dit blok en zit er al in. Je hoeft hem nergens anders neer te zetten. Alles hangt onder .bl, zodat Astra niets overschrijft en dit niets buiten zichzelf raakt. ═══════════════════════════════════════════════════════════════════════════ */ .bl{ /* kleuren */ --creme:#F2EDE5; --bes:#803357; --bes-diep:#6B2848; --inkt:#28181E; --lime:#C4E841; --zand:#E9E0D2; --klei:#CFC0AE; --tekst:#3E2A33; --gedempt:#6B5A52; --licht:rgba(242,237,229,.86); --licht-zacht:rgba(242,237,229,.74); --lijn-licht:rgba(242,237,229,.26); /* typografie */ --serif:'Playfair Display',Georgia,'Times New Roman',serif; --sans:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif; --mono:'Space Mono','SFMono-Regular',Menlo,monospace; /* maatvoering */ --marge:64px; --max:1600px; --raster:96px; } /* ── grondlaag ───────────────────────────────────────────────────────────── */ .bl{ width:100%; max-width:none; margin:0; padding:0; color:var(--inkt); background:var(--creme); font-family:var(--sans); font-weight:300; text-align:left; overflow-x:clip; -webkit-font-smoothing:antialiased; background-image: linear-gradient(rgba(40,24,30,.075) 1px,transparent 1px), linear-gradient(90deg,rgba(40,24,30,.075) 1px,transparent 1px); background-size:var(--raster) var(--raster); } .bl,.bl *{box-sizing:border-box} .bl p,.bl h1,.bl h2,.bl h3,.bl h4,.bl ul,.bl ol,.bl li,.bl figure,.bl blockquote{margin:0;padding:0} .bl ul,.bl ol,.bl li{list-style:none} .bl img{max-width:100%;height:auto;display:block;border:0} .bl [hidden]{display:none !important} .bl svg{display:block} .bl a{color:inherit;text-decoration:none} .bl button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;text-align:left;cursor:pointer;border-radius:0} /* koppen: het thema mag hier niets aan veranderen — geen hoofdletters, geen cursief, en nooit afbreken midden in een woord */ .bl h1,.bl h2,.bl h3,.bl h4,.bl .koopvraag,.bl .contactgroot,.bl .citaat blockquote p{ font-family:var(--serif);font-weight:700;color:inherit;letter-spacing:-.015em; text-transform:none !important;font-style:normal !important;text-decoration:none; word-break:normal !important;overflow-wrap:break-word;hyphens:none !important; text-wrap:balance; } .bl,.bl p,.bl li,.bl dt,.bl dd,.bl span,.bl a,.bl summary{ word-break:normal;overflow-wrap:break-word;hyphens:none} .bl,.bl p,.bl li,.bl dt,.bl dd,.bl span,.bl a,.bl summary,.bl div,.bl figcaption,.bl blockquote, .bl input,.bl button,.bl label,.bl legend{text-transform:none} /* alleen dit hoort in hoofdletters */ .bl .mono,.bl .stap,.bl .stappenrij li,.bl .klanten .label,.bl .voorwaarden .nr, .bl-voet .slot p,.bl-voet .slot a,.bl .meter-kicker,.bl .waaromkop{text-transform:uppercase} .bl :focus-visible{outline:3px solid var(--bes);outline-offset:3px} .bl .inkt :focus-visible,.bl .berry :focus-visible,.bl.inkt :focus-visible,.bl.berry :focus-visible{outline-color:var(--lime)} /* ── vlakken ─────────────────────────────────────────────────────────────── */ .bl .berry,.bl.berry{ background:var(--bes);color:var(--creme); background-image: linear-gradient(rgba(242,237,229,.10) 1px,transparent 1px), linear-gradient(90deg,rgba(242,237,229,.10) 1px,transparent 1px); background-size:var(--raster) var(--raster); } .bl .inkt,.bl.inkt{ background:var(--inkt);color:var(--creme); background-image: linear-gradient(rgba(242,237,229,.08) 1px,transparent 1px), linear-gradient(90deg,rgba(242,237,229,.08) 1px,transparent 1px); background-size:var(--raster) var(--raster); } .bl .zand,.bl.zand{background:var(--zand)} .bl section{padding:96px var(--marge) 100px} .bl section.krap{padding-top:72px;padding-bottom:76px} .bl .binnen{max-width:var(--max);margin:0 auto} /* ── tekststijlen ────────────────────────────────────────────────────────── */ .bl .kicker{font:500 15px/1.5 var(--sans);color:var(--bes);letter-spacing:.01em} .bl .mono{font:700 12px/1 var(--mono);letter-spacing:.10em;text-transform:uppercase;color:var(--bes)} .bl .inkt .mono,.bl .berry .mono,.bl.inkt .mono,.bl.berry .mono{color:var(--lime)} .bl .lead{font:300 21px/1.62 var(--sans);color:var(--tekst)} .bl .body{font:300 19px/1.72 var(--sans);color:var(--tekst)} .bl .body-s{font:300 17px/1.68 var(--sans);color:var(--tekst)} .bl .cap{font:300 14px/1.6 var(--sans);color:var(--gedempt)} .bl .aant{font:400 italic 16px/1.45 var(--sans);color:var(--bes);font-style:italic !important} .bl .inkt .body,.bl .berry .body,.bl.inkt .body,.bl.berry .body{color:var(--licht)} .bl .inkt .body-s,.bl .berry .body-s,.bl.inkt .body-s,.bl.berry .body-s{color:var(--licht)} .bl .inkt .cap,.bl .berry .cap,.bl.inkt .cap,.bl.berry .cap{color:var(--licht-zacht)} .bl .inkt .lead,.bl .berry .lead,.bl.inkt .lead,.bl.berry .lead{color:var(--licht)} .bl .inkt .aant,.bl .berry .aant,.bl.inkt .aant,.bl.berry .aant{color:var(--lime)} .bl h1{font-size:70px;line-height:1.04} .bl h2{font-size:44px;line-height:1.12} .bl h3{font-size:25px;line-height:1.22} .bl .groot{font-size:52px;line-height:1.08} .bl .streep{position:relative;display:inline-block} .bl .streep img{position:absolute;left:-14px;width:calc(100% + 30px);bottom:-.20em;height:.40em;z-index:0} .bl .streep span{position:relative;z-index:1} .bl .inleiding{margin-top:28px;border-left:3px solid var(--bes);padding-left:28px;max-width:60ch} .bl .inkt .inleiding,.bl .berry .inleiding,.bl.inkt .inleiding,.bl.berry .inleiding{border-left-color:var(--lime)} .bl .inleiding p + p{margin-top:14px} .bl .nadruk{font-weight:400;color:var(--inkt)} .bl .inkt .nadruk,.bl .berry .nadruk,.bl.inkt .nadruk,.bl.berry .nadruk{color:var(--creme)} /* ── knoppen en links ────────────────────────────────────────────────────── */ .bl .knop{ display:inline-flex;align-items:center;justify-content:center;gap:10px; background:var(--bes);color:var(--creme);border:0; font:500 17px/1 var(--sans);padding:21px 32px;cursor:pointer; min-height:56px;text-align:center;transition:background .15s ease; } .bl .knop:hover{background:var(--bes-diep)} .bl .knop.lime{background:var(--lime);color:var(--inkt)} .bl .knop.lime:hover{background:#B2D633} .bl .knop.rand{background:transparent;color:var(--bes);border:1.5px solid var(--klei)} .bl .knop.rand:hover{background:rgba(128,51,87,.06)} .bl .inkt .knop.rand,.bl .berry .knop.rand,.bl.inkt .knop.rand,.bl.berry .knop.rand{color:var(--creme);border-color:rgba(242,237,229,.42)} .bl .knop.klein{font-size:15px;padding:15px 22px;min-height:48px} .bl .tekstlink{ display:inline-block;font:400 17px/1.4 var(--sans);color:var(--bes); border-bottom:1px solid var(--klei);padding-bottom:2px;background:none;border-left:0;border-right:0;border-top:0;cursor:pointer; } .bl .tekstlink:hover{border-bottom-color:var(--bes)} .bl .inkt .tekstlink,.bl .berry .tekstlink,.bl.inkt .tekstlink,.bl.berry .tekstlink{color:var(--creme);border-bottom-color:rgba(242,237,229,.42)} .bl .knoprij{display:flex;align-items:center;gap:28px;margin-top:26px;flex-wrap:wrap} /* ── rasters ─────────────────────────────────────────────────────────────── */ .bl .g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px} .bl .g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px} .bl .g-tekst-beeld{display:grid;grid-template-columns:minmax(0,700px) minmax(0,1fr);gap:40px;align-items:end} .bl .g-smal-breed{display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,.66fr);gap:70px;align-items:start} .bl .g-breed-smal{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,.38fr);gap:64px;align-items:end} /* ── kop ─────────────────────────────────────────────────────────────────── */ .bl-kop{border-bottom:1px solid var(--klei)} .bl-kop .binnen{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px var(--marge)} .bl-kop .merk{flex:0 0 auto;display:inline-flex;align-items:center} .bl-kop .merk-logo{height:38px;width:auto;max-width:200px} .bl-kop .merk-tekst,.bl-voet .merk-tekst{font:700 32px/1 var(--serif);color:var(--bes-diep)} .bl-voet .merk-tekst{color:var(--creme);font-size:30px} .bl-voet .merk-logo{height:36px;width:auto} .bl-kop nav.hoofd{display:flex;align-items:center;gap:30px;flex:0 1 auto} .bl-kop nav.hoofd a{font:400 15px/1 var(--sans);color:var(--tekst);white-space:nowrap;padding:6px 0;border-bottom:2px solid transparent;flex:0 0 auto} .bl-kop nav.hoofd a:hover{color:var(--bes)} .bl-kop nav.hoofd a[aria-current=page]{font-weight:600;color:var(--bes);border-bottom-color:var(--lime)} .bl-kop a.knop{flex:0 0 auto} .bl-kop .mob{display:none;flex:0 0 auto} .bl-kop .menuknop{display:flex;align-items:center;gap:10px;font:500 15px/1 var(--sans);color:var(--tekst); background:#FBF8F3;border:1.5px solid var(--klei);padding:14px 18px;cursor:pointer;min-height:48px; list-style:none} .bl-kop .menuknop::-webkit-details-marker{display:none} .bl-kop .menuknop::marker{content:''} .bl-kop .mob[open] .menuknop{border-color:var(--bes);color:var(--bes)} .bl-kop .streepjes{display:inline-block;width:18px;height:12px;position:relative} .bl-kop .streepjes i,.bl-kop .streepjes i::before,.bl-kop .streepjes i::after{position:absolute;left:0;width:18px;height:2px;background:var(--bes);content:''} .bl-kop .streepjes i{top:5px} .bl-kop .streepjes i::before{top:-5px} .bl-kop .streepjes i::after{top:5px} /* het uitklapmenu hangt onder de balk, over de pagina heen */ .bl-kop{position:relative;z-index:40} .bl-kop .mob .paneel{position:absolute;left:0;right:0;top:100%; background:var(--creme);border-top:1px solid var(--klei);border-bottom:1px solid var(--klei); padding:4px var(--marge) 22px;box-shadow:0 14px 24px rgba(40,24,30,.10)} .bl-kop .paneel a{display:block;font:400 19px/1 var(--sans);color:var(--inkt);padding:19px 0;border-bottom:1px solid #E3D9CB;min-height:58px} .bl-kop .paneel a[aria-current=page]{color:var(--bes);font-weight:600} .bl-kop .paneel a.laatste{color:var(--bes);font-weight:600;border-bottom:0} /* ── voet ────────────────────────────────────────────────────────────────── */ .bl-voet .binnen{padding:72px var(--marge) 40px} .bl-voet .rij{display:grid;grid-template-columns:.4fr .3fr .3fr;gap:48px;align-items:start} .bl-voet .merk{display:block} .bl-voet .over{font:300 17px/1.62 var(--sans);color:var(--licht);margin-top:16px;max-width:34ch} .bl-voet .lijst{margin-top:16px;display:grid;gap:10px} .bl-voet .lijst a,.bl-voet .lijst p{font:300 17px/1.4 var(--sans);color:var(--licht)} .bl-voet .lijst a:hover{color:var(--lime)} .bl-voet .slot{border-top:1px solid rgba(242,237,229,.2);margin-top:52px;padding-top:22px;display:flex;justify-content:space-between;gap:16px 32px;flex-wrap:wrap} .bl-voet .slot p,.bl-voet .slot a{font:700 12px/1.6 var(--mono);letter-spacing:.10em;text-transform:uppercase;color:rgba(242,237,229,.55)} .bl-voet .slot a:hover{color:var(--lime)} .bl-voet .juridisch{display:flex;gap:22px;flex-wrap:wrap} /* ── klantenbalk ─────────────────────────────────────────────────────────── */ .bl .klanten{background:#fff;border-top:1px solid var(--klei);border-bottom:1px solid var(--klei);background-image:none;padding:26px 0 30px} .bl .klanten .label{font:300 14px/1.5 var(--sans);color:var(--gedempt);text-align:center;margin:0 var(--marge) 20px} .bl .loper{overflow:hidden;position:relative;background:#fff; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)} .bl .loperrij{display:flex;width:max-content} .bl .spoor{display:flex;align-items:center;gap:78px;padding-right:78px;flex:0 0 auto; animation:bl-loper 64s linear infinite} .bl .spoor li{flex:0 0 auto;display:flex;align-items:center;height:58px} .bl .spoor img{height:auto;width:auto;max-height:58px;max-width:210px;object-fit:contain} @keyframes bl-loper{from{transform:translateX(0)}to{transform:translateX(-100%)}} .bl .loper:hover .spoor,.bl .loper:focus-within .spoor{animation-play-state:paused} @media (max-width:720px){ .bl .spoor{gap:48px;padding-right:48px;animation-duration:26s} .bl .spoor li{height:42px} .bl .spoor img{max-height:42px;max-width:150px} .bl .klanten .label{font-size:13px} } @media (prefers-reduced-motion:reduce){ .bl .spoor{animation:none} .bl .loper{overflow-x:auto;mask-image:none;-webkit-mask-image:none} .bl .loperrij .spoor[aria-hidden]{display:none} } /* ── proceslijn ──────────────────────────────────────────────────────────── */ .bl .lijn{width:auto;height:96px;overflow:hidden;margin:0 calc(var(--marge) * -1)} .bl .lijn svg{width:1440px;height:96px} /* ── uitklappers — native
, dus zonder JavaScript ───────────────── */ .bl details{display:block} .bl summary{display:flex;list-style:none;cursor:pointer} .bl summary::-webkit-details-marker{display:none} .bl summary::marker{content:''} .bl .uitklap{border-top:1px solid var(--klei)} .bl .inkt .uitklap,.bl .berry .uitklap,.bl.inkt .uitklap,.bl.berry .uitklap{border-top-color:var(--lijn-licht)} .bl .uitklap > h3{margin:0} .bl .uitklap .knopvlak{ width:100%;display:flex;align-items:baseline;justify-content:space-between;gap:24px; padding:24px 0;min-height:60px; } .bl .uitklap .titel{font:700 23px/1.28 var(--serif);color:var(--inkt)} .bl .inkt .uitklap .titel,.bl .berry .uitklap .titel,.bl.inkt .uitklap .titel,.bl.berry .uitklap .titel{color:var(--creme)} .bl .uitklap[open] .titel{color:var(--bes)} .bl .inkt .uitklap[open] .titel,.bl .berry .uitklap[open] .titel,.bl.inkt .uitklap[open] .titel,.bl.berry .uitklap[open] .titel{color:var(--lime)} .bl .uitklap .teken{font:400 24px/1 var(--sans);color:var(--bes);flex:0 0 auto} .bl .uitklap .teken::before{content:"+"} .bl .uitklap[open] .teken::before{content:"\00d7"} .bl .inkt .uitklap .teken,.bl .berry .uitklap .teken,.bl.inkt .uitklap .teken,.bl.berry .uitklap .teken{color:var(--lime)} .bl .uitklap .paneel{padding:0 0 24px;max-width:64ch} /* het hele blok is klikbaar, niet alleen de tekst */ .bl .uitklap .knopvlak,.bl .situatie .knopvlak{ display:flex;width:100%;max-width:none;box-sizing:border-box;cursor:pointer; -webkit-tap-highlight-color:rgba(128,51,87,.12)} .bl .uitklap .knopvlak > *,.bl .situatie .knopvlak > *{pointer-events:none} /* ── situaties op de homepage ────────────────────────────────────────────── */ .bl .situaties{display:grid;gap:0;position:relative} .bl .situatie{border-top:1px solid var(--klei);padding:6px 0} .bl .situatie .knopvlak{width:100%;display:flex;align-items:baseline;gap:16px;padding:18px 0;min-height:60px} .bl .situatie .vraag{font:300 26px/1.35 var(--sans);color:var(--inkt);flex:1 1 auto} .bl .situatie[open] .vraag{font-weight:700;font-family:var(--serif);color:var(--bes)} .bl .situatie .hint{font:500 13px/1 var(--sans);color:var(--bes);white-space:nowrap;flex:0 0 auto} .bl .situatie .antwoord{background:var(--zand);padding:24px 28px;margin:0 0 18px;position:relative} .bl .situatie .antwoord .kop{font:500 13px/1.3 var(--sans);color:var(--bes);margin-bottom:9px} .bl .situatie .antwoord p:last-child{font:300 18px/1.7 var(--sans);color:var(--tekst)} /* ── mens · proces · software ────────────────────────────────────────────── */ .bl .mps-knoppen{display:flex;gap:10px;margin-top:16px;align-items:center;flex-wrap:wrap} .bl .mps-knoppen .let{font:600 13px/1 var(--sans);color:var(--lime);margin-right:0} .bl .pijl.mini{width:44px;height:auto;margin-right:6px} .bl .mps-knoppen button{ font:500 15px/1 var(--sans);padding:13px 20px;min-height:46px;cursor:pointer; background:transparent;color:var(--creme);border:1.5px solid rgba(242,237,229,.5); } .bl .mps-knoppen button[aria-selected="true"]{background:var(--lime);color:var(--inkt);border-color:var(--lime)} /* waarom je mij hiervoor belt — onderaan elk tabblad */ .bl .mps-paneel .waarom{margin-top:26px;background:rgba(242,237,229,.10);border-left:4px solid var(--lime);padding:22px 24px} .bl .mps-paneel .waaromkop{font:700 12px/1 var(--mono);letter-spacing:.10em;text-transform:uppercase;color:var(--lime);margin-bottom:12px} .bl .mps-paneel .waaromtekst{font:400 18px/1.6 var(--sans);color:var(--creme);max-width:46ch} @media (max-width:720px){ .bl .mps-paneel .waarom{padding:18px 18px} .bl .mps-paneel .waaromtekst{font-size:17px} } .bl .mps-paneel .vraag{font:500 19px/1.55 var(--sans);color:var(--creme);max-width:40ch} .bl .mps-paneel .kop{font:600 13px/1.3 var(--sans);color:var(--lime);letter-spacing:.04em;margin-top:22px} .bl .mps-paneel .uitleg{font:300 19px/1.7 var(--sans);color:rgba(242,237,229,.92);margin-top:12px;max-width:42ch} .bl .mps-paneel .tussen{margin-top:24px;padding-top:20px;border-top:2px solid var(--lime)} .bl .mps-paneel .tussen .tussenkop{font:600 13px/1.3 var(--sans);color:var(--lime);margin-bottom:14px} .bl .mps-paneel .tussen li{margin-bottom:16px} .bl .mps-paneel .tussen .wat{font:500 17px/1.45 var(--sans);color:var(--creme)} .bl .mps-paneel .tussen .gevolg{font:300 16px/1.62 var(--sans);color:var(--licht-zacht);margin-top:5px} /* de drie vlakken: vormen in svg, teksten in html — zo verdwijnt er nooit een label */ .bl .mps-vlakken{position:relative;width:100%;aspect-ratio:660/470} .bl .mps-vlakken svg{width:100%;height:100%;display:block;overflow:visible} .bl .mps-vlakken .vlak{fill:#F2EDE5;fill-opacity:.12;stroke:rgba(242,237,229,.62);stroke-width:1.8;transition:fill-opacity .25s ease,stroke .25s ease} .bl .mps-vlakken .teken{fill:none;stroke:rgba(242,237,229,.62);stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke .25s ease} .bl .mps-vlakken .teken .knoop{fill:#803357} .bl .mps-vlakken g[data-vlak][data-actief=true] .vlak{fill:#C4E841;fill-opacity:.26;stroke:#C4E841;stroke-width:3} .bl .mps-vlakken g[data-vlak][data-actief=true] .teken{stroke:#C4E841;stroke-width:5} .bl .mps-vlakken .mps-wijzer{fill:none;stroke:#C4E841;stroke-width:5;stroke-linecap:round;display:none} .bl .mps-vlakken .mps-wijzer[data-actief=true]{display:block} .bl .mps-label{position:absolute;margin:0;font:700 27px/1.1 var(--serif);color:rgba(242,237,229,.82);pointer-events:none;transition:color .25s ease} .bl .mps-label span{display:block;font:500 14px/1.35 var(--sans);color:rgba(242,237,229,.62);margin-top:4px} .bl .mps-label[data-actief=true]{color:var(--lime)} .bl .mps-label[data-actief=true] span{color:rgba(196,232,65,.85)} .bl .mps-overlap{position:absolute;left:47%;top:47%;margin:0;font:700 11px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(242,237,229,.55);pointer-events:none} @media (max-width:720px){ .bl .mps-label{font-size:20px} .bl .mps-label span{font-size:12px} .bl .mps-overlap{font-size:9px} } /* ── koopmomenten ────────────────────────────────────────────────────────── */ .bl .koop-kop{display:grid;grid-template-columns:minmax(0,.44fr) minmax(0,.56fr);gap:52px;align-items:end} .bl .koop-kop .body{max-width:52ch} .bl .koopblok{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px;margin-top:46px;border-top:1px solid var(--klei)} .bl .koopblok li{border-bottom:1px solid var(--klei);padding:30px 0} .bl .koopblok .koopvraag{font:700 26px/1.2 var(--serif);color:var(--inkt);max-width:22ch;margin:0;min-height:2.4em} .bl .koopblok .doet{display:flex;align-items:flex-start;gap:13px;margin:16px 0 0;font:600 18px/1.5 var(--sans);color:var(--bes)} .bl .koopblok .doet .pijl{flex:0 0 auto;width:38px;height:auto;margin-top:5px} .bl .koopblok .body-s{margin-top:13px;max-width:46ch} /* ── aanleidingen ────────────────────────────────────────────────────────── */ .bl .aanleidingen{display:grid;gap:0;margin-top:8px} .bl .aanleiding{border-top:1px solid var(--klei);padding:30px 0;display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);gap:40px;align-items:start} .bl .aanleiding h3{font-size:27px;line-height:1.2;color:var(--inkt);max-width:20ch} .bl .aanleiding .doet{font:500 17px/1.6 var(--sans);color:var(--bes);margin-top:14px} .bl .stappenrij{display:flex;gap:10px;flex-wrap:wrap;margin-top:40px;align-items:center} .bl .stappenrij li{font:700 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--bes);border:1.5px solid var(--klei);padding:11px 14px} .bl .stappenrij .pijl{color:var(--klei);font-size:18px;border:0;padding:0 2px} /* ── cijferblok ──────────────────────────────────────────────────────────── */ .bl .cijfers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:30px} .bl .cijfers > div{border-top:3px solid var(--bes);padding-top:16px} .bl .cijfers .n{font:700 40px/1 var(--serif);color:var(--bes)} .bl .cijfers .t{font:400 16px/1.45 var(--sans);color:var(--tekst);margin-top:10px} /* ── artikel ─────────────────────────────────────────────────────────────── */ .bl .artikel{max-width:64ch} .bl .artikel p + p{margin-top:22px} .bl .artikel h2{font-size:40px;max-width:26ch;margin:64px 0 22px} .bl .artikel h3{margin:38px 0 12px} .bl .artikel > div + p{margin-top:26px} .bl .artikel ol.stappen{margin-top:26px} .bl .artikel ol.stappen li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:20px;border-top:1px solid var(--klei);padding:18px 0;align-items:baseline} .bl .zij{position:sticky;top:32px} .bl .kaart{border:1px solid var(--klei);padding:30px 28px} .bl .kaart + .kaart{margin-top:24px} .bl .bron{font:300 15px/1.7 var(--sans);color:var(--gedempt)} .bl .bron a{color:var(--bes);text-decoration:underline;text-underline-offset:3px} /* ── algemene voorwaarden ────────────────────────────────────────────────── */ .bl .voorwaarden{max-width:74ch} .bl .voorwaarden h2{font-size:30px;margin:56px 0 4px;max-width:30ch;color:var(--bes)} .bl .voorwaarden h3{font-size:21px;margin:34px 0 10px;font-family:var(--sans);font-weight:600;letter-spacing:0} .bl .voorwaarden .bepalingen{display:grid;gap:0} .bl .voorwaarden .bepalingen li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;padding:11px 0;align-items:baseline;border-top:1px solid #E3D9CB} .bl .voorwaarden .bepalingen li:first-child{border-top:0} .bl .voorwaarden .nr{font:700 12px/1.6 var(--mono);color:var(--bes)} @media (max-width:720px){ .bl .voorwaarden h2{font-size:25px} .bl .voorwaarden h3{font-size:19px} .bl .voorwaarden .bepalingen li{grid-template-columns:1fr;gap:2px} } /* ── formulier ───────────────────────────────────────────────────────────── */ .bl .veld{width:100%;min-height:56px;border:1.5px solid var(--klei);background:#FBF8F3;padding:0 16px;font:300 17px/1 var(--sans);color:var(--inkt)} .bl textarea.veld{padding:16px;min-height:130px;line-height:1.6;resize:vertical} .bl .veld:focus{border-color:var(--bes);outline:3px solid var(--lime);outline-offset:2px} .bl .veld[aria-invalid="true"]{border-color:#A3282B} .bl label{display:block;font:500 15px/1.4 var(--sans);color:var(--tekst);margin-bottom:8px} .bl .verplicht{color:var(--bes)} .bl .fout{font:400 14px/1.5 var(--sans);color:#A3282B;margin-top:6px} .bl .fout:empty{display:none} .bl fieldset{border:0;padding:0;margin:0} .bl legend{font:500 15px/1.4 var(--sans);color:var(--tekst);margin-bottom:10px;padding:0} .bl .chips{display:flex;gap:10px;flex-wrap:wrap} .bl .chip{font:400 16px/1 var(--sans);border:1.5px solid var(--klei);padding:14px 18px;cursor:pointer;background:transparent;color:var(--tekst);min-height:48px;display:inline-flex;align-items:center} .bl .chip[aria-pressed="true"]{background:var(--bes);color:var(--creme);border-color:var(--bes)} .bl .melding{padding:20px 24px;border-left:3px solid var(--lime);background:var(--zand);font:400 17px/1.6 var(--sans);color:var(--inkt);margin-top:24px} .bl .melding[hidden]{display:none} /* ── contact: twee routes ────────────────────────────────────────────────── */ .bl .contactkeuze{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px} .bl .contactkaart{display:block;border:1.5px solid var(--klei);padding:34px 34px 32px;background:#FBF8F3; transition:border-color .15s ease,background .15s ease} .bl .contactkaart:hover{border-color:var(--bes);background:#fff} .bl .contactkaart .contactgroot{font:700 clamp(26px,3.4vw,40px)/1.1 var(--serif);color:var(--bes);margin:14px 0 12px; word-break:break-word} .bl .contactkaart:hover .contactgroot{color:var(--bes-diep)} .bl .contactkaart .body-s{max-width:34ch} .bl .stappen-kort{display:grid;gap:0;margin-top:8px} .bl .stappen-kort li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:20px; border-top:1px solid var(--klei);padding:20px 0;align-items:baseline} .bl .stappen-kort .nr{font:700 12px/1.6 var(--mono);color:var(--bes)} .bl .stappen-kort .wat{font:600 18px/1.45 var(--sans);color:var(--inkt);margin-bottom:5px} .bl .prijsregel{font:500 18px/1.6 var(--sans);color:var(--inkt);margin-top:30px;max-width:52ch; border-left:4px solid var(--lime);padding:6px 0 6px 22px} .bl .praktisch{margin-top:38px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px} .bl .praktisch > div{border-top:1px solid var(--klei);padding:16px 0} .bl .praktisch dd{margin:5px 0 0} /* ── geen poeha, wel resultaat ───────────────────────────────────────────── */ .bl .poeha{font-size:clamp(34px,5.4vw,62px);line-height:1.06;margin-top:18px;max-width:16ch} .bl .poeha-rij{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 46px;margin-top:52px} .bl .poeha-rij > div{border-top:3px solid var(--lime);padding-top:20px} .bl .poeha-kop{font:600 19px/1.4 var(--sans);color:var(--bes);margin-bottom:10px;max-width:22ch} .bl .poeha-rij .body-s{max-width:34ch} @media (max-width:900px){ .bl .poeha-rij{grid-template-columns:1fr;gap:26px;margin-top:34px} .bl .poeha-rij > div{padding-top:16px} } /* ── citaat van een klant ────────────────────────────────────────────────── */ .bl .citaat{margin:0;border-left:4px solid var(--lime);padding-left:36px;max-width:36ch} .bl .citaat blockquote{margin:0} .bl .citaat blockquote p{font:700 clamp(24px,3.2vw,36px)/1.28 var(--serif);color:var(--inkt)} .bl .inkt .citaat blockquote p,.bl .berry .citaat blockquote p{color:var(--creme)} .bl .citaat figcaption{margin-top:26px;display:grid;gap:4px} .bl .citaat .naam{font:600 17px/1.4 var(--sans);color:var(--bes)} .bl .citaat .rol{font:300 15px/1.45 var(--sans);color:var(--gedempt)} .bl .citaat .lang{font:300 17px/1.7 var(--sans);color:var(--tekst);margin-top:22px;max-width:52ch} @media (max-width:900px){ .bl .contactkeuze{grid-template-columns:1fr;gap:20px} .bl .contactkaart{padding:26px 24px} .bl .praktisch{grid-template-columns:1fr} .bl .stappen-kort li{grid-template-columns:40px minmax(0,1fr);gap:14px} .bl .citaat{padding-left:22px} } /* ── faalkostenmeter — licht, fris, per stap een eigen kaart ─────────────── */ .bl section.meter{background:var(--zand);border-top:4px solid var(--lime);border-bottom:4px solid var(--lime)} .bl .meter [data-stap]{background:#FBF8F3;border:1.5px solid var(--klei);padding:34px 36px;margin-top:32px} .bl .meter .vraagblok[hidden]{display:none} .bl .meter .vraag{font:600 22px/1.4 var(--sans);color:var(--inkt)} .bl .meter .hulp{font:300 17px/1.65 var(--sans);color:var(--gedempt);margin-top:10px;max-width:52ch} .bl .meter .schuifrij{display:flex;align-items:center;gap:20px;margin-top:20px;flex-wrap:wrap} .bl .meter input[type=range]{flex:1 1 220px;min-width:180px;height:34px;-webkit-appearance:none;appearance:none;background:transparent;padding:0;border:0;cursor:pointer} .bl .meter input[type=range]::-webkit-slider-runnable-track{height:5px;background:var(--klei);border-radius:3px} .bl .meter input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-11.5px;border-radius:50%;background:var(--bes);border:3px solid #fff;box-shadow:0 1px 3px rgba(40,24,30,.28);cursor:pointer} .bl .meter input[type=range]::-moz-range-track{height:5px;background:var(--klei);border-radius:3px} .bl .meter input[type=range]::-moz-range-thumb{width:28px;height:28px;border:3px solid #fff;border-radius:50%;background:var(--bes);box-shadow:0 1px 3px rgba(40,24,30,.28);cursor:pointer} .bl .meter .getal{width:112px;min-height:52px;border:1.5px solid var(--klei);background:#fff;text-align:center;font:700 17px/1 var(--mono);color:var(--bes)} .bl .meter .getal:focus{border-color:var(--bes);outline:3px solid var(--lime);outline-offset:2px} .bl .meter .eenheid{font:300 14px/1.3 var(--sans);color:var(--gedempt);width:74px} .bl .meter .snel{display:flex;gap:9px;margin-top:18px;flex-wrap:wrap} .bl .meter .snel button{font:400 15px/1 var(--sans);border:1.5px solid var(--klei);background:#fff;color:var(--tekst);padding:12px 16px;cursor:pointer;min-height:46px} .bl .meter .snel button:hover{border-color:var(--bes);color:var(--bes)} .bl .meter .snel button[aria-pressed="true"]{background:var(--bes);color:var(--creme);border-color:var(--bes)} .bl .meter .voortgang{display:flex;gap:6px;margin-bottom:26px} .bl .meter .voortgang span{height:5px;flex:1 1 0;background:var(--klei)} .bl .meter .voortgang span[data-nu="true"]{background:var(--bes)} .bl .meter .bedrag{font:700 clamp(24px,2.7vw,40px)/1.12 var(--mono);color:var(--bes);margin-top:14px} .bl .meter .balk{height:9px;background:var(--klei);margin-top:8px} .bl .meter .balk i{display:block;height:9px;background:var(--bes)} .bl .meter .disclaimer{font:300 15px/1.65 var(--sans);color:var(--gedempt);margin-top:20px;max-width:56ch} .bl .meter .knop.lime{background:var(--bes);color:var(--creme)} .bl .meter .knop.lime:hover{background:var(--bes-diep)} .bl .meter .knop.rand{background:#fff} @media (max-width:720px){ .bl .meter [data-stap]{padding:24px 20px} } /* ── verwijzing naar de meter, in dezelfde lichte stijl ──────────────────── */ .bl section.meter-verwijzing{background:var(--zand);border-top:4px solid var(--lime);border-bottom:4px solid var(--lime)} .bl .meter-verwijzing ol{background:#FBF8F3;border:1.5px solid var(--klei);padding:8px 26px 12px} .bl .meter-verwijzing ol li:first-child{border-top:0} /* ── handgetekende wijzer ────────────────────────────────────────────────── */ .bl .wijzer{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:26px;max-width:40ch} .bl .wijzer .pijl{flex:0 0 auto;width:104px;height:auto;order:2} .bl .wijzer .pijl path{stroke:var(--lime)} .bl .wijzer p{order:1;margin:0} @media (max-width:1180px){ .bl .wijzer svg{width:88px} } /* ── de meter laten opvallen ─────────────────────────────────────────────── */ .bl .meter-kicker{display:inline-block;background:var(--lime);color:var(--inkt);padding:9px 14px} .bl .meter-teaser{border-left:4px solid var(--lime);padding:6px 0 6px 26px;max-width:56ch} .bl .meter-teaser .teaser-bedrag{font:700 clamp(26px,3.5vw,44px)/1.1 var(--mono);color:var(--bes);margin-top:12px} .bl .meter-teaser .teaser-uitleg{font:300 18px/1.6 var(--sans);color:var(--tekst);margin-top:10px} .bl .knop.groot-knop{font-size:19px;padding:24px 38px;min-height:64px} @media (max-width:720px){ .bl .meter-teaser{padding-left:18px} } /* ── de uitkomst per mail ──────────────────────────────────────────────────── Het formulier komt uit een los Shortcode-blok en wordt door het script hierheen verplaatst. Deze regels zorgen dat het eruitziet als de rest van de site en niet als een standaardformulier. */ .bl .mailblok{margin-top:44px;border-top:1px solid var(--klei);padding-top:34px; display:grid;grid-template-columns:minmax(0,.44fr) minmax(0,.56fr);gap:52px;align-items:start} .bl .mailblok h3{font-size:26px;margin-top:12px;max-width:20ch} .bl .mailblok .body-s{margin-top:14px;max-width:40ch} .bl .mailblok .cap{margin-top:16px;max-width:42ch} .bl .mailblok-formulier{background:var(--zand);padding:28px 30px;border-left:4px solid var(--lime)} @media (max-width:900px){ .bl .mailblok{grid-template-columns:1fr;gap:28px} .bl .mailblok-formulier{padding:22px 20px} } /* het formulier zelf, ongeacht welke plugin het levert */ .bl .mailblok-formulier label, .bl .mailblok-formulier .ff-el-input--label label{font:500 15px/1.4 var(--sans);color:var(--inkt);display:block;margin-bottom:6px} .bl .mailblok-formulier input[type=text], .bl .mailblok-formulier input[type=email], .bl .mailblok-formulier input[type=tel], .bl .mailblok-formulier textarea{ width:100%;box-sizing:border-box;font:300 16px/1.5 var(--sans);color:var(--inkt); background:#FBF8F3;border:1.5px solid var(--klei);border-radius:0;padding:12px 14px; -webkit-appearance:none;appearance:none} .bl .mailblok-formulier input:focus, .bl .mailblok-formulier textarea:focus{outline:3px solid var(--bes);outline-offset:2px;border-color:var(--bes)} .bl .mailblok-formulier textarea{font:400 13px/1.55 var(--mono);min-height:132px;resize:vertical} .bl .mailblok-formulier .ff-el-group{margin-bottom:18px} .bl .mailblok-formulier .ff-el-form-check label{font-weight:300;font-size:15px;display:inline} .bl .mailblok-formulier button, .bl .mailblok-formulier input[type=submit], .bl .mailblok-formulier .ff-btn-submit{ font:500 17px/1 var(--sans);background:var(--bes);color:var(--creme);border:0;border-radius:0; padding:17px 30px;min-height:54px;cursor:pointer;text-transform:none;letter-spacing:0} .bl .mailblok-formulier button:hover, .bl .mailblok-formulier .ff-btn-submit:hover{background:var(--bes-diep)} .bl .mailblok-formulier .ff-el-is-error input, .bl .mailblok-formulier .ff-el-is-error textarea{border-color:#B3261E} .bl .mailblok-formulier .error, .bl .mailblok-formulier .text-danger{font:400 14px/1.5 var(--sans);color:#B3261E} .bl .mailblok-formulier .ff-message-success{font:300 17px/1.6 var(--sans);color:var(--inkt)} /* de plugin mag zijn eigen lettertype hier niet doordrukken */ .bl .mailblok-formulier *{font-family:inherit} .bl .mailblok-formulier textarea{font-family:var(--mono)} /* ── portretfoto's ─────────────────────────────────────────────────────────── De uitsneden zijn opgeslagen als JPEG en hebben daardoor een witte achtergrond. Met multiply valt dat wit weg in het crème, zodat Swen vrij op de pagina staat. Werkt ook als je later een PNG of WebP met een doorzichtige achtergrond gebruikt. */ .bl .beeld img{mix-blend-mode:multiply} /* kleiner portret, voor Over Swen */ .bl .g-tekst-beeld .beeld.beeld-klein img{max-width:270px} @media (max-width:1180px){ .bl .g-tekst-beeld .beeld.beeld-klein img{max-width:230px} } @media (max-width:720px){ .bl .g-tekst-beeld .beeld.beeld-klein img{max-width:200px} } /* ── kleine dingen ───────────────────────────────────────────────────────── */ .bl .cirkelwrap{position:relative;display:inline-block;padding:10px 16px} .bl .cirkelwrap img{position:absolute;left:-44px;top:-38px;width:calc(100% + 88px);height:calc(100% + 76px);z-index:0;pointer-events:none} .bl .cirkelwrap p{position:relative;z-index:1;font:700 76px/.99 var(--serif);color:var(--bes)} .bl .visueel-verborgen{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .bl .overslaan{position:absolute;left:-9999px;top:0;background:var(--bes);color:var(--creme);padding:14px 20px;z-index:99} .bl .overslaan:focus{left:0} /* ── responsive ──────────────────────────────────────────────────────────── */ @media (max-width:1280px){ .bl-kop .binnen{padding:20px 36px} .bl-kop .merk-logo{height:34px} .bl-kop nav.hoofd{gap:20px} .bl-kop nav.hoofd a{font-size:14px} .bl-kop .merk-tekst{font-size:28px} } @media (max-width:1180px){ .bl{--marge:44px} .bl h1{font-size:52px} .bl h2{font-size:38px} .bl .groot{font-size:40px} .bl .g2,.bl .g-smal-breed,.bl .g-breed-smal{grid-template-columns:1fr;gap:44px} .bl .g-tekst-beeld{grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:28px} .bl .artikel h2{font-size:34px} .bl .zij{position:static;order:-1} .bl .cirkelwrap{margin-left:22px} .bl .cirkelwrap p{font-size:58px} } @media (max-width:1040px){ .bl-kop nav.hoofd{display:none} .bl-kop .mob{display:block} } @media (max-width:900px){ .bl{--marge:28px;--raster:64px} .bl section{padding:64px var(--marge) 68px} .bl h1{font-size:42px} .bl h2{font-size:32px} .bl .groot{font-size:32px} .bl .lead{font-size:19px} .bl .koop-kop,.bl .koopblok{grid-template-columns:1fr;gap:22px} .bl .koopblok{gap:0;margin-top:34px} .bl .koopblok .koopvraag{font-size:23px;min-height:0} .bl .g3,.bl .cijfers,.bl .aanleiding{grid-template-columns:1fr;gap:26px} .bl .aanleiding{gap:12px} .bl .situatie .vraag{font-size:22px} .bl .meter .bedrag{font-size:34px} .bl-voet .rij{grid-template-columns:1fr;gap:36px} .bl-voet .binnen{padding:56px var(--marge) 32px} .bl-kop .paneel{padding:4px var(--marge) 18px} .bl .artikel ol.stappen li{grid-template-columns:1fr;gap:6px} } @media (max-width:720px){ .bl h1{font-size:36px} .bl h2{font-size:28px} .bl .g-tekst-beeld{grid-template-columns:1fr;gap:0} .bl .g-tekst-beeld .beeld{justify-self:center;margin-top:28px} .bl .g-tekst-beeld .beeld img{max-width:320px} .bl .knop{width:100%} .bl .knoprij{gap:16px} .bl .uitklap .titel,.bl .situatie .vraag{font-size:20px} .bl .cirkelwrap p{font-size:40px} .bl .cirkelwrap img{left:-24px;top:-20px;width:calc(100% + 48px);height:calc(100% + 40px)} } @media (max-width:520px){ .bl dl div[style*="width:130px"]{gap:4px} .bl dt[style*="width:130px"]{width:100% !important} } @media (max-width:400px){ .bl{--marge:20px} .bl h1{font-size:31px} .bl h2{font-size:25px} .bl .lead{font-size:18px} .bl .body{font-size:17px} .bl .meter .bedrag{font-size:28px} .bl .meter .schuifrij{gap:12px} .bl .meter .getal{width:88px} } @media (prefers-reduced-motion:reduce){ .bl *,.bl *::before,.bl *::after{animation-duration:.01ms !important;transition-duration:.01ms !important} } /* ═══════════════════════════════════════════════════════════════════════════ WPForms in de Bloomt.-stijl Zodra je het
-blok op de contactpagina vervangt door de shortcode, pakt WPForms deze opmaak op. Je hoeft hier niets aan te doen. ═══════════════════════════════════════════════════════════════════════════ */ .bl div.wpforms-container-full{margin:28px 0 0;max-width:640px} .bl div.wpforms-container-full .wpforms-form .wpforms-field{padding:0 0 22px} .bl div.wpforms-container-full .wpforms-form label.wpforms-field-label{ font:500 15px/1.4 var(--sans);color:var(--tekst);margin-bottom:8px} .bl div.wpforms-container-full .wpforms-form .wpforms-required-label{color:var(--bes)} .bl div.wpforms-container-full .wpforms-form input[type=text], .bl div.wpforms-container-full .wpforms-form input[type=email], .bl div.wpforms-container-full .wpforms-form input[type=tel], .bl div.wpforms-container-full .wpforms-form select, .bl div.wpforms-container-full .wpforms-form textarea{ width:100%;min-height:56px;border:1.5px solid var(--klei);border-radius:0; background:#FBF8F3;padding:0 16px;font:300 17px/1 var(--sans);color:var(--inkt);box-shadow:none} .bl div.wpforms-container-full .wpforms-form textarea{padding:16px;min-height:130px;line-height:1.6} .bl div.wpforms-container-full .wpforms-form input:focus, .bl div.wpforms-container-full .wpforms-form textarea:focus, .bl div.wpforms-container-full .wpforms-form select:focus{ border-color:var(--bes);outline:3px solid var(--lime);outline-offset:2px} .bl div.wpforms-container-full .wpforms-form .wpforms-field-description{ font:300 14px/1.6 var(--sans);color:var(--gedempt);margin-top:6px} .bl div.wpforms-container-full .wpforms-form ul.wpforms-field-required li, .bl div.wpforms-container-full .wpforms-form .wpforms-field-radio ul li{ list-style:none;margin:0 0 10px;display:flex;align-items:center;gap:10px} .bl div.wpforms-container-full .wpforms-form input[type=radio], .bl div.wpforms-container-full .wpforms-form input[type=checkbox]{ width:22px;min-height:22px;height:22px;accent-color:var(--bes);margin:0} .bl div.wpforms-container-full .wpforms-form button[type=submit]{ background:var(--bes);color:var(--creme);border:0;border-radius:0; font:500 17px/1 var(--sans);padding:21px 32px;min-height:56px;cursor:pointer;transition:background .15s ease} .bl div.wpforms-container-full .wpforms-form button[type=submit]:hover{background:var(--bes-diep)} .bl div.wpforms-container-full .wpforms-form label.wpforms-error{ font:400 14px/1.5 var(--sans);color:#A3282B;margin-top:6px} .bl div.wpforms-container-full .wpforms-form input.wpforms-error, .bl div.wpforms-container-full .wpforms-form textarea.wpforms-error{border-color:#A3282B} .bl div.wpforms-confirmation-container-full, .bl div[submit-success] > .wpforms-confirmation-container-full:not(.wpforms-redirection-message){ background:var(--zand);border:0;border-left:3px solid var(--lime);border-radius:0; padding:20px 24px;margin:24px 0 0;font:400 17px/1.6 var(--sans);color:var(--inkt)} .bl div.wpforms-container-full .wpforms-form .wpforms-submit-container{padding-top:4px} @media (max-width:720px){ .bl div.wpforms-container-full .wpforms-form button[type=submit]{width:100%} } /* ── Astra opzij zetten ───────────────────────────────────────────────────── Geldt alleen op pagina's waar een Bloomt.-blok op staat (body:has(.bl-kop)). Andere pagina's van je site houden gewoon hun eigen kop en voet. */ /* elke kop van het thema, hoe hij ook heet — die van Bloomt. is een
, dus die blijft staan */ body:has(.bl-kop) header, body:has(.bl-kop) footer:not(.bl-voet), body:has(.bl-kop) #masthead, body:has(.bl-kop) .site-header, body:has(.bl-kop) .ast-desktop-header, body:has(.bl-kop) .ast-mobile-header, body:has(.bl-kop) .ast-above-header-wrap, body:has(.bl-kop) .ast-main-header-wrap, body:has(.bl-kop) .ast-below-header-wrap, body:has(.bl-kop) .ast-mobile-header-wrap, body:has(.bl-kop) #colophon, body:has(.bl-kop) .site-footer, body:has(.bl-kop) .ast-small-footer, body:has(.bl-kop) .footer-adv, body:has(.bl-kop) .ast-single-entry-banner, body:has(.bl-kop) .entry-header, body:has(.bl-kop) .ast-archive-description, body:has(.bl-kop) .page-title, body:has(.bl-kop) #secondary, body:has(.bl-kop) .widget-area { display:none !important } body:has(.bl-kop) #page, body:has(.bl-kop) #content, body:has(.bl-kop) .site-content { margin:0 !important; padding:0 !important; background:none !important } body:has(.bl-kop) .ast-container, body:has(.bl-kop) .ast-container-fluid { max-width:100% !important; width:100% !important; padding-left:0 !important; padding-right:0 !important; margin:0 !important; display:block !important } body:has(.bl-kop) #primary, body:has(.bl-kop) .content-area { margin:0 !important; padding:0 !important; width:100% !important; max-width:100% !important; float:none !important } body:has(.bl-kop) .ast-article-single, body:has(.bl-kop) .ast-separate-container .ast-article-post, body:has(.bl-kop) .entry-content, body:has(.bl-kop) .entry-content .wp-block-html { margin:0 !important; padding:0 !important; border:0 !important; background:none !important; box-shadow:none !important } body:has(.bl-kop) .ast-separate-container, body:has(.bl-kop) .ast-plain-container, body:has(.bl-kop) .ast-page-builder-template { background:none !important } body:has(.bl-kop) { background-color:#F2EDE5 } /* ── volle breedte, wat voor kolom Astra er ook omheen zet ─────────────────── */ html, body { overflow-x: clip } /* Het mailformulier van de meter staat als los blok op de homepage, dus onderaan de pagina. Daar hoort het niet: het script verplaatst het naar de uitkomst van de meter. Tot dat moment houden we het uit beeld. */ body:has(#meter-mailblok) .fluentform, body:has(#meter-mailblok) .wpforms-container { display: none } body:has(#meter-mailblok) #meter-formulier .fluentform, body:has(#meter-mailblok) #meter-formulier .wpforms-container { display: block } .bl { width:100vw !important; max-width:100vw !important; margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important } /* ── het losse WPForms-blok onder de faalkostenmeter ──────────────────────── Het formulier staat als apart Shortcode-blok op de faalkostenpagina. Het script haalt het pas naar de uitkomst zodra iemand stap 4 bereikt. Tot dat moment moet het nergens zichtbaar zijn. Zet je WPForms ooit op een andere pagina, maak daar dan een uitzondering voor. */ .wpforms-container{display:none} .bl .mailblok-formulier .wpforms-container{display:block} /* ── klantlogo boven een verhaal ─────────────────────────────────── Zelfde behandeling als in de logobalk: geen kader, geen schaduw, geen ronde hoeken. Alleen een vaste maximale hoogte, zodat logo's van verschillende afmetingen toch één ritme houden. */ .bl .merklogo{margin-bottom:24px} .bl .merklogo img{max-height:52px;max-width:190px;width:auto;height:auto;object-fit:contain;display:block} @media (max-width:760px){.bl .merklogo{margin-bottom:18px}.bl .merklogo img{max-height:40px;max-width:150px}} /* ── praatwolk: recensies om doorheen te klikken ─────────────────────── Werkt zonder JavaScript: de keuzerondjes staan onzichtbaar maar wel bereikbaar met het toetsenbord, en de labels eronder zijn de knoppen. Alle wolken liggen in hetzelfde vak op elkaar, zodat de hoogte niet springt als je wisselt. Geen ronde hoeken, geen schaduw. */ .bl .praatrij{position:relative} .bl .praatrij > input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none} .bl .praatvak{display:grid} .bl .praat{grid-area:1/1;margin:0;opacity:0;visibility:hidden;transition:opacity .18s ease} .bl .praatrij > input:nth-of-type(1):checked ~ .praatvak .praat:nth-of-type(1), .bl .praatrij > input:nth-of-type(2):checked ~ .praatvak .praat:nth-of-type(2), .bl .praatrij > input:nth-of-type(3):checked ~ .praatvak .praat:nth-of-type(3){opacity:1;visibility:visible} .bl .wolk{position:relative;background:var(--creme);border:1.5px solid var(--klei); padding:34px 36px 32px} .bl .wolk p{font:700 italic 27px/1.38 var(--serif);color:var(--inkt);margin:0;max-width:34ch} .bl .wolk .lang{font:300 17px/1.6 var(--sans);color:var(--tekst);font-style:normal; margin-top:18px;max-width:52ch} /* het staartje, twee driehoeken over elkaar zodat de rand doorloopt */ .bl .wolk::before,.bl .wolk::after{content:"";position:absolute;left:46px;width:0;height:0; border-style:solid;border-color:transparent;border-width:20px 20px 0 0} .bl .wolk::before{bottom:-20px;border-top-color:var(--klei)} .bl .wolk::after{bottom:-17.5px;border-top-color:var(--creme)} .bl .praat figcaption{margin:34px 0 0 46px;display:flex;flex-direction:column;gap:2px} .bl .praat figcaption .naam{font:600 17px/1.4 var(--sans);color:var(--inkt)} .bl .praat figcaption .rol{font:300 15px/1.4 var(--sans);color:var(--gedempt)} .bl .praatknoppen{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px} .bl .praatknoppen label{font:500 14px/1 var(--sans);color:var(--gedempt);cursor:pointer; border:1.5px solid var(--klei);padding:11px 16px;background:none;transition:all .15s ease} .bl .praatknoppen label:hover{color:var(--bes);border-color:var(--bes)} .bl .praatrij > input:nth-of-type(1):checked ~ .praatknoppen label:nth-of-type(1), .bl .praatrij > input:nth-of-type(2):checked ~ .praatknoppen label:nth-of-type(2), .bl .praatrij > input:nth-of-type(3):checked ~ .praatknoppen label:nth-of-type(3){ color:var(--creme);background:var(--bes);border-color:var(--bes)} .bl .praatrij > input:focus-visible ~ .praatknoppen label{outline:3px solid var(--bes);outline-offset:3px} @media (max-width:760px){ .bl .wolk{padding:26px 24px 24px} .bl .wolk p{font-size:22px} .bl .praat figcaption{margin-left:30px} .bl .wolk::before,.bl .wolk::after{left:30px} }