/* ============================================================ Beco Bouwgroep — de secties van de homepage basis.css levert de dragende componenten; dit bestand voegt de secties toe die alleen op de homepage staan: de sectiekop, de totaalrenovatiestrook, de werkwijze, de kaart, de reacties, de kennisbank, de FAQ en het contactblok. Eén component staat op één plek. Staat een selector hier, dan staat hij niet ook in basis.css. ============================================================ */ /* Naar de inhoud springen, zichtbaar zodra hij focus krijgt */ .overslaan{position:absolute;left:12px;top:-64px;z-index:70;background:var(--indigo);color:#fff; padding:12px 20px;border-radius:var(--pil);font-weight:600;font-size:15px; transition:top .2s var(--ease)} .overslaan:focus{top:12px} /* Springt de bezoeker naar een anker, dan mag de kop niet onder de vaste balk landen. Dit stond op 96px vast, en dat liet op desktop zes pixels over: de balk eindigt daar op 90px. Nu rekent het met de balk zelf plus lucht, dus het klopt op elk scherm. */ section[id]{scroll-margin-top:calc(var(--balk-top) + var(--balk-hoog) + clamp(22px,3vw,38px))} /* ══ SECTIEKOP ═══════════════════════════════════════════════ Bewering links, onderbouwing rechts, knop pas na de inhoud. Waarom niet meer op één regel met de knop ernaast: dan leest de kop als een tussentitel in plaats van als een uitspraak. Hij krijgt een eigen kolom van zes elfden en echte lucht eronder. De lopende tekst wijkt naar de tweede kolom, zodat kop en uitleg niet om dezelfde aandacht vechten. */ .sectiekop{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr); gap:clamp(24px,5vw,72px);align-items:start; margin-bottom:clamp(48px,7vw,110px)} @media(max-width:820px){ .sectiekop{grid-template-columns:1fr;gap:18px;margin-bottom:clamp(34px,6vw,58px)} } .sectiekop .mini{display:inline-flex;margin-bottom:clamp(14px,1.8vw,22px)} /* De onderbouwing is smaller dan de kop, en dat is de bedoeling. Zij mag een tweede stem zijn, geen tweede kop. */ .sectiekop p{max-width:40ch;margin-top:0;font-size:16px;line-height:1.64} /* Eén maat voor elke sectiekop op de site, zodat de bladspiegel overal hetzelfde ritme houdt. De maat stond op 14ch en dwong daarmee bijna elke kop in drie of vier korte regels. Op 24ch krijgt de kop de breedte van zijn eigen kolom en breekt hij waar de zin het zelf vraagt, meestal in twee regels. text-wrap:balance verdeelt die regels dan gelijk. De kolom zelf bepaalt in de praktijk de breedte, niet deze maat: zeven elfden voor de kop, vier voor de onderbouwing ernaast. Een kop van een halve zin hoort niet in drie regels te vallen omdat de kolom ernaast te veel ruimte opeist. */ .sectiekop h2,.rea-kop h2,.totaal-kop h2,.plek-tekst h2,.naast-tekst h2{ font-size:clamp(2.1rem,4.6vw,4rem);line-height:.96;letter-spacing:-.042em; max-width:24ch;text-wrap:balance} .totaal-kop h2{max-width:21ch} /* De knop hoort na de inhoud van de sectie, niet naast de kop. */ .sectie-daad{margin-top:clamp(34px,5vw,64px)} /* Het megamenu hoort bij de navigatiebalk en staat daarom in basis.css, bij .balk. Eén component, één plek. */ /* ══ WIE IS BECO ═════════════════════════════════════════════ */ .wie{padding-block:var(--blok);position:relative;overflow:hidden} .wie .omhulsel{position:relative;z-index:1} .wie .onder{margin-top:clamp(22px,3vw,34px);font-size:clamp(1rem,1.4vw,1.12rem)} /* Eén knop die zwaarder staat dan de gewone knoppen: dit is de enige daad in deze sectie, dus hij mag de aandacht pakken. */ .knop-groot{padding:22px 42px;font-size:clamp(16px,1.25vw,18px)} .knop-groot svg{width:16px;height:16px} @media(max-width:600px){.knop-groot{padding:18px 30px;font-size:15.5px}} /* ══ LINT MET HET MERKTEKEN ══════════════════════════════════ */ .merklint{display:flex;align-items:center;gap:12px;margin-bottom:16px} .merklint img{width:16px;height:auto} .merklint span{font-family:var(--tekst);font-size:11.5px;font-weight:600;letter-spacing:.24em; text-transform:uppercase;color:var(--indigo)} /* ══ CTA · foto naast de tekst ═══════════════════════════════ Geen overlay: de foto blijft onaangeraakt en de tekst staat ernaast op een indigo vlak. Zo hoeft het beeld niet donkerder gemaakt te worden om leesbaar te blijven. */ .daadsplit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr); align-items:stretch;background:var(--indigo)} @media(max-width:920px){.daadsplit{grid-template-columns:1fr}} .daadsplit .paneel-tekst{position:relative;display:flex;align-items:center; padding:clamp(52px,8vw,110px) clamp(26px,5vw,84px)} .daadsplit .paneel-tekst .binnen{max-width:46ch;margin-left:auto} @media(max-width:920px){.daadsplit .paneel-tekst .binnen{margin-left:0}} .daadsplit .merklint span{color:var(--goud)} .daadsplit h2{color:#fff;font-size:clamp(1.7rem,3.2vw,2.7rem);line-height:1.08; text-wrap:balance} .daadsplit p{color:#C7C8E4;margin-top:16px} .daadsplit .daden{margin-top:30px;display:flex;flex-wrap:wrap;gap:12px} .daadsplit .knop{background:var(--goud);color:var(--indigo-900)} .daadsplit .knop:hover{background:var(--goud-700)} .daadsplit .knop-leeg{color:#fff;border-color:rgba(255,255,255,.36)} .daadsplit .knop-leeg:hover{color:#fff;border-color:#fff;background:rgba(255,255,255,.08)} .daadsplit .kleurlijn{position:absolute;inset:auto 0 0 0;height:6px} /* Het beeld groeit bij het binnenkomen van 104 procent naar 100 (zie [data-op="bouwen"] verderop). Klemt dit kader dat niet af, dan steekt de foto er tijdens het wachten aan weerszijden vier procent buiten, en die paar pixels rechts maken de hele pagina breder dan het scherm: horizontaal scrollen op een telefoon. Elk ander beeldkader op de site klemt af, dit was het enige dat het niet deed. */ .daadsplit .paneel-beeld{position:relative;overflow:hidden; min-height:clamp(340px,46vw,660px)} .daadsplit .paneel-beeld img{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:50% 40%} @media(max-width:920px){ .daadsplit .paneel-beeld{min-height:0;aspect-ratio:16/10} .daadsplit .paneel-beeld img{position:relative} } /* ══ WERKWIJZE ═══════════════════════════════════════════════ */ .werkwijze{padding-block:var(--blok)} .fasen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,30px)} @media(max-width:900px){.fasen{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:520px){.fasen{grid-template-columns:1fr}} .fase{padding-top:20px;border-top:2px solid var(--kleur,var(--lijn))} .fase b{display:block;font-family:var(--disp);font-size:12px;letter-spacing:.2em; color:var(--indigo);margin-bottom:10px} .fase h3{font-family:var(--disp);font-size:1.15rem;letter-spacing:-.02em;margin-bottom:8px} .fase p{font-size:15px} /* ══ WERKGEBIED ══════════════════════════════════════════════ */ .werkgebied{padding-block:var(--blok)} .werkgebied .binnen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,64px)} @media(max-width:900px){.werkgebied .binnen{grid-template-columns:1fr}} .provincies{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px} /* ══ KENNISBANK ══════════════════════════════════════════════ Geen witte doosjes meer: elk artikel krijgt de kleur van de stiel waarover het gaat, en het merkteken in de hoek. */ .blog{padding-block:var(--blok);background:#F4F6FB} .blog-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2.4vw,26px)} @media(max-width:900px){.blog-raster{grid-template-columns:1fr}} /* Staan er maar twee artikels, dan vullen ze de rij samen. Twee kaarten met een leeg derde vak leest als een ontbrekende kaart. */ @media(min-width:901px){ .blog-raster:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))} } /* De foto staat boven alles, over de volle breedte van de kaart, en de gekleurde lijn loopt er langs de hele zijkant naast door: beeld en tekst zitten in hetzelfde kader in plaats van dat de tekst een doosje op zich is. De ronding is dezelfde diagonaal als bij elk ander beeld op de site: linksboven en rechtsonder rond, de twee andere hoeken recht. Zie .rea-vlak en .bouwt-rechts. */ /* DE KAART EN DE UITLOOP VAN DE FOTO MOETEN DEZELFDE KLEUR ZIJN. De foto zakt onderaan weg in de kaart, en dat werkt alleen zolang de gradiënt eindigt op precies de kleur die eronder ligt. Werd de kaart bij hover lichter en bleef de gradiënt staan, dan liep er een band over de onderkant van de foto. TWEE VOLLEDIG UITGESCHREVEN VERLOPEN, en dat is met reden. Eerst stond hier één verloop dat de kaartkleur volgde via color-mix en een @property. Dat was slimmer dan nodig en het gaf een glitch bij het eerste tekenen: color-mix met transparent levert transparant ZWART op, niet transparant indigo, en zolang de laag nog opgebouwd wordt zie je die grijze kant in het verloop staan. Eens alles ingeladen was verdween het, en dat is precies hoe zo een fout zich gedraagt. Nu staat elke stop met zijn eigen kleur uitgeschreven, in dezelfde tint als de kaart. Geen berekening tijdens het tekenen, dus niets dat er nog naast kan zitten. De kaart wisselt daarbij ineens van kleur in plaats van over te lopen. Dat is de prijs: een verloop laat zich niet vloeiend overgangen zonder zo een berekening, en een kaart die overloopt terwijl de foto erboven verspringt is erger dan allebei ineens. */ .blog-kaart{position:relative;display:flex;flex-direction:column; background:var(--indigo-900);color:#C7C8E4; border-radius:var(--hoek) 0 var(--hoek) 0;overflow:hidden; transition:transform .3s var(--ease)} .blog-kaart:hover{transform:translateY(-3px);background:#1A1B48} /* De lijn ligt boven de foto, anders stopt hij waar het beeld begint en breekt het kader alsnog in twee. */ .blog-kaart::before{content:"";position:absolute;inset:0 auto 0 0;width:5px; background:var(--kleur);z-index:2} /* De foto loopt onderaan uit in de kaart in plaats van er met een harde rand op te stoppen. Dat is geen donkere overlay over het beeld (die verbiedt de huisstijl, en terecht): de bovenkant blijft onaangeraakt, alleen de onderste veertig procent zakt weg in de kaartkleur, zodat beeld en tekst één vlak worden. */ .blog-beeld{position:relative;display:block;aspect-ratio:16/10; background:#1A1B48;overflow:hidden} /* DE FOTO VERSCHIJNT PAS ALS ZE HEELEMAAL BINNEN IS. Een JPEG wordt van boven naar beneden getekend, dus tijdens het laden staat er een halve foto met een kaarsrechte rand eronder waar de kaartkleur begint. Op een kaart met een donker vlak vlak onder het beeld valt dat hard op, en het leek op een fout in het verloop. Dat was het niet: het verloop lag er gewoon over iets dat nog niet af was. site.js zet .klaar zodra het load-event valt. De regel hangt aan html.beweging-aan, dus zonder JavaScript of met een stuk gelopen bewegingslaag staat elke foto er gewoon: onzichtbaar laten staan wat wel bestaat is een ergere fout dan een halve foto tonen. */ .blog-beeld img{width:100%;height:100%;object-fit:cover} html.beweging-aan .blog-beeld img{opacity:0; transition:opacity .45s var(--ease)} /* DE ZOOM OP HOVER IS ERUIT, en dat is een keuze na drie pogingen. De foto schaalde bij hover terwijl het verloop erover stil bleef staan. Bij de eerste hover per kaart zag je daardoor de foto één frame lang verder doorlopen dan hoort: de browser maakt op dat moment pas een eigen laag voor de foto, en in die ene tekening staan de twee niet gelijk. Vanaf de tweede hover bestond de laag en was het weg. Geprobeerd en niet genoeg: het verloop de kaartkleur laten volgen, de foto pas tonen als ze volledig binnen is, en de laag vooraf aanmaken met will-change. Dat eerste en dat tweede waren echte fouten en die blijven gefixt; het derde loste dit niet op. In een geautomatiseerde browser is het niet te reproduceren: zowel een screenshot als een opname van de compositor dwingt een verse tekening af. Zevenenzeventig frames op retina nagekeken, geen enkele sprong groter dan veertien op tweehonderdvijfenvijftig. Zonder schaling is er niets meer dat uit de pas kan lopen. De hover houdt de kleurwissel, en dat is genoeg terugkoppeling voor een kaart die al een leesregel draagt. Wil je de zoom terug, zet dan transform:scale(1.04) terug op de regel hieronder; dan komt dit gedrag mogelijk mee. */ html.beweging-aan .blog-beeld img.klaar{opacity:1} @media(prefers-reduced-motion:reduce){ html.beweging-aan .blog-beeld img{opacity:1!important} } .blog-beeld::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(to bottom, rgba(20,21,60,0) 42%, rgba(20,21,60,.42) 72%, rgba(20,21,60,.82) 90%, rgb(20,21,60) 100%)} .blog-kaart:hover .blog-beeld::after{ background:linear-gradient(to bottom, rgba(26,27,72,0) 42%, rgba(26,27,72,.42) 72%, rgba(26,27,72,.82) 90%, rgb(26,27,72) 100%)} .blog-binnen{display:flex;flex-direction:column;gap:10px;flex:1 1 auto; padding:26px 26px 26px 30px} .blog-kaart .etiket{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase; color:var(--goud);font-weight:600} .blog-kaart b{font-family:var(--disp);font-size:1.16rem;color:#fff;letter-spacing:-.022em; line-height:1.24;text-wrap:balance} .blog-kaart p{font-size:14.5px;color:#A9ABD2;margin:0} .blog-kaart .lees{margin-top:auto;padding-top:14px;display:inline-flex;align-items:center;gap:9px; color:var(--goud);font-weight:600;font-size:14.5px} .blog-kaart svg{transition:transform .35s var(--ease)} .blog-kaart:hover svg{transform:translateX(4px)} /* ══ FAQ ═════════════════════════════════════════════════════ */ .faq{padding-block:var(--blok)} /* De definiërende zin over Beco staat boven de vragen. Dat is de alinea die AI-zoekmachines letterlijk overnemen, dus hij hoort op een plek waar hij op zichzelf leesbaar is. */ .faq-intro{margin-top:clamp(16px,2vw,24px);max-width:52ch; font-size:clamp(1rem,1.25vw,1.08rem)} .faq .binnen{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(28px,5vw,64px);align-items:start} @media(max-width:900px){.faq .binnen{grid-template-columns:1fr}} .faq details{border-top:1px solid var(--lijn)} .faq details:last-of-type{border-bottom:1px solid var(--lijn)} .faq summary{display:flex;align-items:flex-start;justify-content:space-between;gap:18px; padding:20px 0;cursor:pointer;font-family:var(--disp);font-weight:600;color:var(--indigo-900); font-size:clamp(1rem,1.6vw,1.15rem);letter-spacing:-.015em;list-style:none} .faq summary::-webkit-details-marker{display:none} /* Hover: de vraag schuift een tikje op, krijgt de merkkleur en een heel lichte ondergrond, en het pijltje zakt mee. Zo voelt de hele regel als één klikbaar vlak in plaats van alleen de tekst. */ .faq summary{transition:color .25s var(--ease),background .25s var(--ease), padding-left .3s var(--ease);border-radius:var(--rond-k)} .faq summary:hover{color:var(--indigo);background:color-mix(in srgb,var(--indigo) 5%,transparent); padding-left:14px;padding-right:14px} .faq summary:hover::after{transform:rotate(45deg) translate(2px,2px)} .faq details[open] summary:hover::after{transform:rotate(-135deg) translate(-2px,-2px)} .faq summary:focus-visible{outline:2px solid var(--goud);outline-offset:2px; border-radius:var(--rond-k)} @media(prefers-reduced-motion:reduce){ .faq summary{transition:none} .faq summary:hover{padding-left:0;padding-right:0} } .faq summary::after{content:"";flex:none;width:13px;height:13px;margin-top:5px; border-right:2px solid var(--indigo);border-bottom:2px solid var(--indigo); transform:rotate(45deg);transition:transform .3s var(--ease)} .faq details[open] summary{color:var(--indigo)} .faq details[open] summary::after{transform:rotate(-135deg)} .faq details p{padding:0 0 22px;max-width:62ch} /* ══ VOET ════════════════════════════════════════════════════ */ /* De voet staat in het merkblauw zelf, niet meer in het bijna-zwarte indigo-950. Op die lichtere grond haalde de oude tekstkleur #8A8CB8 nog maar 3,56 op wit-zwartcontrast, onder de 4,5 die leesbare tekst nodig heeft; tekst en links zijn daarom mee opgelicht naar 6,1 en 7,6. */ .voet-groot{background:var(--indigo);color:#B9BBDD;padding-block:clamp(44px,6vw,68px); border-top:1px solid rgba(255,255,255,.14)} .voet-raster{display:grid;grid-template-columns:1.4fr repeat(3,minmax(0,1fr)); gap:clamp(24px,4vw,48px)} @media(max-width:980px){.voet-raster{grid-template-columns:1fr 1fr}} /* Op een telefoon was de voet 1418 pixels lang: één kolom met het merkblok en drie lijsten onder elkaar. De drie lijsten staan nu naast elkaar in plaats van onder elkaar, wat de voet ongeveer veertig procent korter maakt zonder dat er één link verdwijnt. */ @media(max-width:560px){ /* De werkgebiedkolom draagt de langste namen (West-Vlaanderen, Sint-Laureins) en krijgt daarom wat meer breedte dan de twee ernaast. In drie gelijke kolommen brak "West-Vlaanderen" op het koppelteken over twee regels, en dat leest als een fout terwijl alle andere links op één regel staan. */ .voet-raster{grid-template-columns:minmax(0,1fr) minmax(0,.85fr) minmax(0,1.25fr);gap:26px 12px} /* Het merkblok draagt logo, kleurlijn en adres en heeft de volle breedte nodig; de drie lijsten passen wel naast elkaar. */ .voet-groot .merkblok{grid-column:1 / -1} .voet-groot ul a{font-size:13.5px} .voet-groot h3{font-size:11px;letter-spacing:.14em} .voet-groot{padding-block:clamp(34px,7vw,46px)} } /* Onder de 380 pixels (een kleine iPhone) past "West-Vlaanderen" ook met een bredere kolom niet meer op één regel. Daar zakt de letter in de lijsten een halve punt, en dan past ze wel. Liever een iets kleinere letter dan een naam die op zijn koppelteken breekt. */ @media(max-width:380px){ .voet-groot ul a{font-size:12.5px} .voet-raster{gap:24px 8px} .voet-groot h3{margin-bottom:9px} .voet-groot address{line-height:1.7} .voet-groot .merkblok img{width:132px;margin-bottom:14px} .voet-groot .merkblok .kleurlijn{width:132px;margin-bottom:15px} } .voet-groot h3{font-family:var(--disp);font-size:12px;letter-spacing:.2em;text-transform:uppercase; color:#fff;margin-bottom:16px} .voet-groot ul{display:flex;flex-direction:column;gap:9px} .voet-groot a{color:#CFD0EC;font-size:14.5px;transition:color .2s var(--ease)} .voet-groot a:hover{color:#fff} /* Op een telefoon zijn deze links het enige menu onderaan de pagina. Een regel tekst van 18 pixels hoog is te weinig om met een duim te raken, dus krijgen ze binnenmarge in plaats van tussenruimte: even lang, wel raakbaar. */ @media(max-width:820px){ .voet-groot ul{gap:2px} .voet-groot ul a{display:block;padding-block:7px} /* Niet het slotje: dat is geen tekstregel maar een vierkant vakje. Deze regel zette het op display:block met binnenmarge, en won van .voet-slot, waardoor het icoontje links bovenin zijn vakje hing in plaats van in het midden. */ .voet-onder a:not(.voet-slot){display:inline-block;padding-block:5px} } .voet-groot .merkblok img{width:150px;margin-bottom:18px} .voet-groot .merkblok .kleurlijn{height:4px;width:150px;margin-bottom:20px} .voet-groot address{font-style:normal;font-size:14.5px;line-height:1.9;color:#CFD0EC} /* Het telefoonnummer en het e-mailadres in het adresblok zijn echte links en horen dus ook echt aan te tikken te zijn. */ .voet-groot address a{display:inline-block;padding-block:5px;line-height:1.5} /* ── Instagram en Facebook ───────────────────────────────── Onder het adres, want daar staat waar Beco te bereiken is en dit is daar een vorm van. Twee raakvlakken van 44 pixels, want dit wordt op een telefoon aangetikt en niet aangeklikt. */ /* Met .voet-groot ervoor, want .voet-groot ul zet elke lijst in deze voet in een kolom en weegt zwaarder dan een kale .voet-sociaal. Zonder die extra klasse stonden de twee pictogrammen onder elkaar. Hetzelfde geldt voor de link: .voet-groot ul a maakt hem op een telefoon display:block, en dan valt het vierkant uit elkaar. */ .voet-groot .voet-sociaal{display:flex;flex-direction:row;gap:10px; margin-top:16px;list-style:none;padding:0} .voet-groot .voet-sociaal a{display:grid;place-items:center; width:44px;height:44px;padding:0;line-height:0; color:#CFD0EC;border:1px solid rgba(255,255,255,.18);border-radius:var(--pil); transition:color .2s var(--ease),border-color .2s var(--ease)} /* Het pictogram staat altijd in het midden, op elk scherm. place-items doet het werk, line-height:0 en display:block halen de laatste scheefstand weg: een svg is standaard inline en gaat dus op de tekstlijn staan, en dat duwt hem een paar pixels omhoog. */ .voet-groot .voet-sociaal svg{display:block} .voet-groot .voet-sociaal a:hover{color:var(--goud);border-color:var(--goud)} .voet-groot .voet-sociaal a:focus-visible{outline:2px solid var(--goud); outline-offset:3px} /* Rechts staat het slotje: een vakje van 30 pixels hoog, hoger dan een regel tekst. Zonder align-items rekte de linkerhelft mee tot die 30 pixels en bleef de tekst bovenin hangen, net iets hoger dan "Privacybeleid" ernaast. Beide helften nu in het midden, zodat de hele regel op grote schermen op één lijn leest. */ .voet-onder{border-top:1px solid rgba(255,255,255,.14);margin-top:clamp(32px,5vw,56px); padding-top:22px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px; justify-content:space-between;font-size:13.5px;line-height:1.6} /* De scheidingstekens tussen deze links stonden als losse tekens in de tekst. Bij het afbreken van een regel bleven ze dan achter aan het einde of vooraan de volgende regel. Nu horen ze bij het item ervoor, en op een smal scherm vallen ze weg: daar is ruimte een duidelijker scheiding dan een puntje, en de rij breekt netjes. */ .voet-fijn{display:flex;flex-wrap:wrap;align-items:center;gap:0} /* Het slotje naar het klantenportaal. Zelfde plek en zelfde betekenis als op elke andere site die we maken, alleen in de kleuren van deze voet. */ .voet-slot{display:inline-flex;align-items:center;justify-content:center; width:30px;height:30px;border-radius:8px;color:#CFD0EC; background:rgba(255,255,255,.1); transition:background .25s var(--ease),color .25s var(--ease)} .voet-slot:hover{background:rgba(255,255,255,.16);color:#fff} .voet-fijn > *:not(:last-child)::after{content:"·";margin-inline:9px;opacity:.55} @media(max-width:820px){ .voet-fijn{gap:2px 20px} .voet-fijn > *:not(:last-child)::after{content:none} } /* ══ KRUIMELPAD ══════════════════════════════════════════════ */ .kruimels ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13.5px; color:var(--tekst-kleur)} .kruimels li{display:flex;align-items:center;gap:8px} .kruimels li+li::before{content:"";width:5px;height:5px;flex:none; border-right:1.5px solid var(--grijs-400);border-top:1.5px solid var(--grijs-400); transform:rotate(45deg)} .kruimels a{display:inline-block;padding-block:5px; color:var(--tekst-kleur);text-underline-offset:3px} .kruimels a:not(.knop):not(.knop-leeg):hover{color:var(--indigo);text-decoration:underline} .kruimels [aria-current]{color:var(--indigo-900);font-weight:600} /* ══ LEGE SCHIL ══════════════════════════════════════════════ */ main.leeg{padding-block:clamp(48px,8vw,110px) clamp(64px,10vw,140px);min-height:52vh} main.leeg h1{font-size:clamp(2rem,5vw,3.4rem);line-height:1.04;margin:22px 0 18px; letter-spacing:-.035em;text-wrap:balance} .leeg-notitie{max-width:62ch;padding:20px 24px;margin-bottom:28px; border-left:3px solid var(--goud);background:var(--grijs-100);border-radius:0 var(--rond-k) var(--rond-k) 0} .leeg-notitie b{color:var(--indigo-900)} /* ══ KAART VAN HET WERKGEBIED ════════════════════════════════ Echte gemeentegrenzen van West- en Oost-Vlaanderen, als inline SVG uit officiële data. Geen externe kaartdienst, dus geen API-sleutel, geen cookies en geen verzoek naar een derde partij. De acht gemeenten met een pagina zijn echte links, dus de kaart werkt volledig zonder JavaScript. De kaart staat vrij: geen kader, geen ondergrond, geen schaduw. Het vak is er alleen om de gemeentewenk in te kunnen plaatsen, vandaar position:relative. Geen aspect-ratio op dit vak. Hier stonden nog de maten van de vorige, schematische kaart (1/.82, en 1/1 onder 520px) terwijl deze SVG 1000 bij 597 is. Het vak was daardoor hoger dan de tekening en de kaart zweefde in het midden met een grote lege band erboven en eronder, op een telefoon zo'n 130 pixels. De SVG bepaalt zijn eigen hoogte uit zijn viewBox. */ .kaart-vak .mini{margin-bottom:16px} .kaart{position:relative;margin-top:6px; background:none;border:0;padding:0;overflow:visible} .kaart-svg{width:100%;height:auto;display:block;overflow:visible} /* Heel West- en Oost-Vlaanderen is werkgebied, dus alles staat ingekleurd. De gemeenten met een eigen pagina zijn voller en klikbaar. */ /* ══ GEMEENTEWENK ════════════════════════════════════════════ Wie over de kaart gaat, moet weten waar hij zit. Het label komt van onderaf op boven de gemeente: het merkteken op een wit plaatje, daaronder een indigo balk met de naam. Het vangt zelf geen muis, anders zou het de gemeente eronder blokkeren. */ .gem-wenk{position:absolute;left:0;top:0;z-index:3;pointer-events:none; opacity:0;translate:-50% calc(-100% - 4px); transition:opacity .2s var(--ease),translate .28s var(--ease-uit)} .gem-wenk.aan{opacity:1;translate:-50% calc(-100% - 12px)} /* Eén balk: het merkteken staat vóór de naam, niet erboven. */ .gem-naam{position:relative;display:inline-flex;align-items:center;gap:8px; background:var(--indigo);color:#fff; font-family:var(--disp);font-weight:600;font-size:13px;letter-spacing:-.01em; padding:8px 14px;border-radius:8px;white-space:nowrap; box-shadow:0 12px 26px -12px rgba(20,21,60,.6)} .gem-naam img{width:15px;height:auto;display:block;flex:none} .gem-naam b{font-weight:600} /* het punt onderaan, dat naar de gemeente wijst */ .gem-naam::after{content:"";position:absolute;left:50%;bottom:-4px; width:9px;height:9px;background:var(--indigo);translate:-50% 0;rotate:45deg; border-radius:0 0 2px 0} @media(prefers-reduced-motion:reduce){ .gem-wenk{transition:none;translate:-50% calc(-100% - 12px)} } /* op een aanraakscherm bestaat hover niet; de links blijven werken */ @media(hover:none){.gem-wenk{display:none}} .kaart-svg .gem{fill:var(--indigo);fill-opacity:.30;stroke:#F5F7FC;stroke-width:1.1; transition:fill-opacity .22s var(--ease),fill .22s var(--ease)} .kaart-svg .gem.werk{fill-opacity:1} .kaart-svg .gem.thuis{fill:var(--goud);fill-opacity:1} .kaart-svg a{cursor:pointer} /* Het © rechtsonder in de kaart. In gebruikerseenheden, dus het schaalt mee met de kaart: een merk, geen tekst om te lezen. */ .kaart-svg .kaart-recht{font-family:var(--tekst);font-size:15px;letter-spacing:.02em; fill:var(--grijs-400);pointer-events:none;user-select:none} .kaart-svg a:hover .gem,.kaart-svg a:focus-visible .gem{fill:var(--indigo-700);fill-opacity:1} .kaart-svg .gem{fill-opacity:.42} .kaart-svg a:hover .gem.thuis,.kaart-svg a:focus-visible .gem.thuis{fill:var(--goud-700)} .kaart-svg a:focus-visible{outline:2px solid var(--indigo);outline-offset:2px} /* De stielensectie zette het merkteken boven het label in plaats van ernaast. Logo en label staan altijd op één lijn. */ .bouwt-links .mini{display:inline-flex;align-items:center;gap:9px;white-space:nowrap} /* Zichtbaar voor schermlezers en zoekmachines, niet op het scherm */ .zichtbaar-verborgen{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ── De locatiepin op de kaart ─────────────────────────────── */ .kaart-svg .speld .speld-vorm{fill:var(--indigo);stroke:#fff;stroke-width:2.4; stroke-linejoin:round} .kaart-svg .speld .schaduw{fill:rgba(20,21,60,.22)} .kaart-svg .speld{pointer-events:none} /* het merkteken boven Oostkamp vangt geen muis, anders bereikt de hover de gemeente eronder niet en zou juist onze thuisgemeente als enige geen naam tonen. */ .kaart-svg image{pointer-events:none} /* ══ DE LENGTE VAN DE STIELENSECTIE ══════════════════════════ De sectie was ooit 240vh hoog voor zes stielen, dus elke stiel kreeg maar een kwart scherm scroll: één beweging sprong door twee of drie stielen tegelijk. Nu krijgt elke stiel een halve schermhoogte, wat neerkomt op één scherm om te lezen plus zes halve schermen om doorheen te gaan. Hier stond ook scroll-snap: rustpunten in de sectie en scroll-snap-type op html. Dat is eruit. Waarom: die snap zat op de hoofdscroller van het hele document, en Chrome trok daardoor bijna elke scrollpositie in de sectie naar het dichtstbijzijnde rustpunt, tot 238 pixels ver. Erger nog, het laatste rustpunt lag 238 pixels vóór het einde van de sectie, dus wie voorbij de laatste stiel wilde scrollen werd telkens teruggetrokken. De sectie voelde daardoor aan alsof ze tegenwerkte. Zonder snap scrolt de pagina gewoon zoals de bezoeker duwt. */ .bouwt{height:calc(100svh + 300svh)} @media(max-width:1000px){ /* Zelfde breekpunt als waar de layout omklapt, maar niet dezelfde maat. Een veeg met de duim legt met de naloop erbij vlot een halve schermhoogte af. Kreeg een stiel minder dan dat, dan sprong één veeg over de volgende heen naar die erna. Elke stiel krijgt hier dus ruim een halve schermhoogte, ook al wordt de sectie daardoor langer dan op een groot scherm: op een telefoon scrolt de bezoeker nu eenmaal in grotere stappen. */ .bouwt{height:calc(100svh + 380svh)} } /* De pijlen bij de realisaties blijven altijd staan, ook wanneer je aan het begin of het einde van de rij zit. */ .rea-knop:disabled{opacity:.32;cursor:default} .rea-knop{transition:opacity .25s var(--ease),border-color .25s var(--ease), background .25s var(--ease)} /* ══ DE DRIE INTREDEBEWEGINGEN ═══════════════════════════════ Beweging is een taal met drie werkwoorden, geen effect dat over alles heen gaat. Alle drie blijven onder de garantie: verbergen mag alleen als vroeg.js bevestigt dat de laag draait, dus zonder JavaScript staat alles gewoon zichtbaar. 1. Opkomen blokken, kaarten, opsommingen 2. Oprijzen koppen en het citaat, regel per regel 3. Opbouwen elk groot beeld, van onder naar boven ============================================================ */ /* ── 2. Oprijzen ─────────────────────────────────────────── */ [data-op="rijzen"] .regel{display:block;overflow:clip;padding-bottom:.06em; margin-bottom:-.06em} html.beweging-aan [data-op="rijzen"] .r{display:block;transform:translateY(105%); transition:transform .62s var(--ease-uit); transition-delay:calc(var(--i,0) * 70ms)} html.beweging-aan [data-op="rijzen"].zichtbaar .r{transform:none} /* ── 3. Opbouwen ───────────────────────────────────────────── De clip staat op het BEELD, niet op het blok eromheen. Dat is geen smaakkwestie: clip-path:inset(100%) maakt de zichtbare oppervlakte van een element nul, en de IntersectionObserver in site.js rekent met precies die oppervlakte. Stond de clip op het blok zelf, dan bleef intersectionRatio 0, haalde het de drempel van 0.08 nooit, kwam .zichtbaar er nooit op en bleef het beeld voorgoed weg. Het blok houdt nu zijn eigen hoogte (aspect-ratio of min-height), dus de waarnemer ziet het wel. Het kader eromheen draagt geen eigen kleur. Zolang het beeld nog dichtgeklapt staat of nog moet laden, zie je de sectie erachter gewoon doorlopen. Een grijs vlak dat daarna van kleur verspringt leest als iets dat stuk is, en dat is het niet. */ html.beweging-aan [data-op="bouwen"] img{clip-path:inset(100% 0 0 0); transform:scale(1.04); transition:clip-path .55s var(--ease-uit),transform .8s var(--ease-uit)} html.beweging-aan [data-op="bouwen"].zichtbaar img{clip-path:inset(0 0 0 0); transform:none} @media(prefers-reduced-motion:reduce){ html.beweging-aan [data-op="rijzen"] .r{transform:none!important} html.beweging-aan [data-op="bouwen"] img{clip-path:none!important; transform:none!important} } .daadsplit .stielen-mee{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px} .daadsplit .stielen-mee a{font-size:13.5px;padding:8px 15px;border-radius:var(--pil); background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:#fff; display:inline-flex;align-items:center;gap:8px; transition:border-color .25s var(--ease),background .25s var(--ease)} .daadsplit .stielen-mee a::before{content:"";width:8px;height:8px;border-radius:2px; background:var(--kleur)} .daadsplit .stielen-mee a:hover{border-color:var(--kleur);background:rgba(255,255,255,.13)} /* ══ HET WERKGEBIED ALS VOLLE BAND ═══════════════════════════ De kaart is het meest bijzondere op de site: echte gemeente- grenzen, geen externe kaartdienst, acht echte links, werkt zonder JavaScript. Ze stond in een halve kolom. Nu krijgt ze de ruimte en staat de tekst als smalle kolom ernaast. */ .werkgebied.breed{background:var(--papier)} .werkgebied.breed .binnen{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr); gap:clamp(28px,5vw,80px);align-items:center} @media(max-width:980px){.werkgebied.breed .binnen{grid-template-columns:1fr}} /* De kaart komt van west naar oost tevoorschijn. Eén clip-path, geen JavaScript per vorm. */ html.beweging-aan .kaart[data-op="onthullen"] .kaart-svg{clip-path:inset(0 100% 0 0); transition:clip-path 1.15s var(--ease-uit)} html.beweging-aan .kaart[data-op="onthullen"].zichtbaar .kaart-svg{clip-path:inset(0 0 0 0)} @media(prefers-reduced-motion:reduce){ html.beweging-aan .kaart[data-op="onthullen"] .kaart-svg{clip-path:none!important} } /* De voortgangsvakjes animeerden hun breedte, en breedte animeren is layoutwerk in elk frame. Met scaleX draait het op de compositor. */ .bouwt .voort b{width:100%!important;transform-origin:left; transform:scaleX(var(--vol,0))} /* ══ STATEMENT MET AANHALINGSTEKENS ══════════════════════════ Eén zin over de volle breedte, met een echt aanhalingsteken als grafisch element ervoor. Het teken is decoratie, dus het staat in de opmaak en niet in de tekst zelf. */ /* overflow hoort hier, niet ergens bovenaan: het portret breekt in deze sectie naar de linkerrand, dus deze regel houdt de pagina zonder horizontale schuifbalk. */ .wie{padding-block:var(--blok);position:relative;overflow:hidden} /* Het aanhalingsteken staat in de zin zelf, niet ernaast, en het zakt weg in dekking zodat het de tekst niet overstemt. */ .wie .statement,.review .statement{font-family:var(--disp); font-weight:600;color:var(--indigo);letter-spacing:-.035em;line-height:1.14; margin:0;text-wrap:balance} .wie .statement{font-size:clamp(1.9rem,5.2vw,4.2rem)} .wie .statement::before,.review .statement::before{content:"\201C"; color:var(--indigo);opacity:.26} /* De bewegingslaag knipt deze zin in regels, en die regels zijn blokken. Een teken dat vóór het eerste blok staat krijgt dan een eigen regel: het aanhalingsteken hing los boven de zin in plaats van ervoor. Staat de zin geknipt, dan hoort het teken in de eerste regel zelf. */ .wie .statement:has(.regel)::before, .review .statement:has(.regel)::before{content:none} .wie .statement .regel:first-child .r::before, .review .statement .regel:first-child .r::before{content:"\201C"; color:var(--indigo);opacity:.26} .wie .onder{margin-top:clamp(26px,3.4vw,44px);max-width:62ch; font-size:clamp(1rem,1.4vw,1.14rem)} /* Het portret stond links en liep daar van de rand naar binnen. Dat was formeel netjes (de spiegel van de hero) maar het las verkeerd: je oog raakte eerst het gezicht en pas daarna de zin, dus de foto moest een betekenis dragen die hij nog niet had. Nu staat de zin eerst en komt het gezicht daarna, van de rechterrand naar binnen, met exact dezelfde afronding als het herobeeld. Je leest de belofte en ontmoet dan de man die haar waarmaakt. Daarnaast heeft de sectie nu het label met het merkteken dat elke andere sectie op deze pagina ook draagt. Dat ontbrak, en daardoor hing de uitspraak los tussen twee secties in plaats van er één te zijn. De hoogte van het portret komt nog altijd uit de kolom ernaast, dus het beeld is precies zo hoog als wat er beloofd wordt. */ /* Een smalle geut tussen de zin en het portret. De zin is hier de hoofdrol, dus die krijgt alles wat overblijft. */ .wie-in{display:grid; grid-template-columns:minmax(0,1fr) clamp(220px,26vw,400px); gap:clamp(16px,2vw,30px);align-items:stretch} .wie-woord{align-self:center} .wie-woord .mini{display:inline-flex;margin-bottom:clamp(16px,2.2vw,28px)} /* Het portret liep vanaf de rechterrand binnen. Nu staat het los van die rand en draagt het dezelfde diagonaal als elk ander beeld op de site: linksboven en rechtsonder rond. */ .wie-portret{position:relative;display:block;overflow:hidden; min-height:clamp(280px,32vw,430px); border-radius:var(--hoek) 0 var(--hoek) 0} .wie-portret img{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:52% 40%} /* Op een telefoon sluit het beeld de sectie af, nog steeds tegen de rechterrand, zodat de overgang naar de projectrij eronder klopt. */ @media(max-width:820px){ .wie-in{grid-template-columns:1fr;gap:clamp(26px,6vw,40px)} /* Ook hier los van de rand: het portret loopt tot de kolom en niet erbuiten, met dezelfde diagonaal als op een breed scherm. */ .wie-portret{min-height:0;height:clamp(210px,46vw,320px)} } /* ══ CTA-PANEEL (G9) ══════════════════════════════════════════ Het conversiemoment tussen de werkwijze en de reacties. De vorm komt van het slotblok onderaan de juridische pagina's ("Iets dat niet duidelijk is?"): een indigo paneel in de merkhoek met een vraag als kop en een gouden knop. Dat blok werkt daar omdat het een gesprek aanbiedt in plaats van iets te verkopen, en dat is precies de toon die hier hoort, vlak na de vier fasen. Het verschil met de grote CTA onderaan de pagina: die loopt van rand tot rand met een foto ernaast en doet een uitspraak. Dit is een begrensd paneel zonder beeld en stelt een vraag. De sectie krijgt 75svh minimumhoogte en zet het paneel in het midden daarvan. Niet omdat de inhoud zoveel plaats nodig heeft, maar omdat een conversiemoment pas werkt als er niets anders in beeld staat. Daarom geven de twee secties errond ook allebei de helft van hun --blok af: de lucht hoort bij deze sectie te zitten en niet als losse marge ernaast. */ /* Elke oproep houdt aan beide kanten evenveel lucht, en altijd dezelfde. Die lucht hoort bij de oproep zelf: de secties ernaast geven hun marge aan die kant op, want anders bepaalt de toevallige buur hoe ver het staat en verschilt het per pagina. De brede variant had ook min-height:75svh met het paneel in het midden. Dat is nu weg: die hoogte maakte het gat onder het paneel bijna anderhalf keer zo groot als het gat erboven. */ /* Elke buur, niet alleen een
: op /diensten/ staat er een
naast. En via main >, want anders wegen deze regels even zwaar als .hero-smal en beslist de volgorde in de cascade wie wint. De hero is sinds 28-08-2026 uitgezonderd. Hij zette zijn eigen onderruimte op nul en liet de volgende sectie de hele blokruimte dragen, en dan stond de hero op elke pagina veel verder van wat eronder ligt dan van de balk erboven. Nu draagt de hero de maat zelf, aan allebei de kanten dezelfde, en geeft de sectie erna haar bovenruimte op. */ /* De oproep slikt de ruimte van haar buren op, zodat er geen twee blokmarges op elkaar staan. De hero doet daar niet aan mee: die draagt zijn eigen --lucht en die moet blijven staan. De kennisbank ook niet: die heeft een eigen band, en zonder onderruimte liggen de kaarten plat op de rand ervan. */ main > :not(.hero-smal, .blog):has(+ .daadstrook){padding-bottom:0} main > .daadstrook + *{padding-top:0} /* Wat op de hero volgt, begint zonder eigen bovenruimte. De hero heeft die ruimte al gezet, en even veel als hij boven laat. */ main > .hero-smal + *{padding-top:0} .daadstrook{display:grid;align-content:center; padding-block:var(--blok)} .daadvlak{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(26px,4vw,72px);align-items:center; padding:clamp(32px,4.6vw,76px); background:var(--indigo);border-radius:var(--hoek) 0 var(--hoek) 0} @media(max-width:860px){ .daadvlak{grid-template-columns:1fr;gap:clamp(20px,4vw,30px)} } .daadvlak .merklint{margin-bottom:clamp(14px,1.8vw,20px)} .daadvlak .merklint span{color:var(--goud)} /* De band loopt over de volle breedte van de pagina, en dan stond de tekst erin op een smalle kolom met veel leegte ernaast. De kop mag 24 tekens breed in plaats van 19 en de zin 56 in plaats van 46: dat vult de band zonder dat een regel te lang wordt om te lezen. De grens blijft staan, want zonder grens loopt de zin op een breed scherm door tot honderd tekens en dan raakt het oog het begin van de volgende regel niet meer. */ .daadvlak h2{color:#fff;font-size:clamp(1.7rem,3.3vw,2.8rem); line-height:1.08;letter-spacing:-.038em;max-width:24ch;text-wrap:balance} /* basis.css zet p{color:var(--tekst-kleur)} rechtstreeks op het element; op indigo is dat onleesbaar. Zelfde reparatie als in het contactpaneel. */ .daadvlak p{color:#C7C8E4;max-width:56ch; font-size:clamp(1rem,1.3vw,1.1rem);line-height:1.62} .daadvlak-daden{display:flex;flex-wrap:wrap;gap:12px; margin-top:clamp(24px,3vw,36px)} .daadvlak .knop{background:var(--goud);color:var(--indigo-900)} .daadvlak .knop:hover{background:var(--goud-700)} .daadvlak .knop-leeg{color:#fff;border-color:rgba(255,255,255,.36)} .daadvlak .knop-leeg:hover{color:#fff;border-color:#fff; background:rgba(255,255,255,.08)} /* ══ WAT KLANTEN ZEGGEN ══════════════════════════════════════ */ .review{padding-block:var(--blok);background:var(--papier)} /* De kop van deze sectie staat in de container, de rij met reacties loopt daaronder van rand tot rand door, precies zoals de realisatierij. Eén mechaniek, twee rijen. */ .review .sectiekop{margin-bottom:clamp(30px,4vw,54px)} .review-spoor{align-items:stretch} .review-kaart{flex:0 0 clamp(280px,34vw,460px);scroll-snap-align:start; display:flex;flex-direction:column;justify-content:space-between;gap:clamp(20px,3vw,34px); margin:0;padding:clamp(26px,3vw,40px);background:#fff; border:1px solid var(--lijn);border-radius:var(--hoek) 0 var(--hoek) 0} .review-kaart blockquote{margin:0;font-family:var(--disp);font-weight:500; color:var(--indigo);letter-spacing:-.02em;line-height:1.3; font-size:clamp(1.05rem,1.6vw,1.4rem);text-wrap:pretty} .review-kaart figcaption{display:flex;flex-direction:column;gap:4px} .review-kaart .kleurlijn{width:56px;height:5px;margin-bottom:12px} .review-kaart figcaption b{font-family:var(--disp);color:var(--indigo-900);font-size:15.5px} .review-kaart figcaption span{font-size:14.5px;color:var(--tekst-kleur)} @media(max-width:700px){ .review-kaart{flex-basis:min(82vw,340px)} } /* ══ TOTAALRENOVATIE ═════════════════════════════════════════ Tekst in de container, beeld over de volle breedte eronder. */ .totaal{padding-top:var(--blok)} /* Zelfde verhouding als .sectiekop: de kop krijgt de ruimte, de onderbouwing ernaast blijft de tweede stem. */ .totaal-kop{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:clamp(24px,4vw,64px);align-items:start} .totaal-kop p{max-width:42ch} @media(max-width:900px){.totaal-kop{grid-template-columns:1fr}} .totaal .stielen-mee{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(24px,3vw,36px)} .totaal .stielen-mee a{font-size:13.5px;padding:8px 15px;border-radius:var(--pil); background:#fff;border:1px solid var(--lijn);color:var(--indigo);display:inline-flex; align-items:center;gap:8px;transition:border-color .25s var(--ease),transform .25s var(--ease)} .totaal .stielen-mee a::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--kleur)} .totaal .stielen-mee a:hover{border-color:var(--kleur);transform:translateY(-2px)} .totaal .daden{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3.4vw,40px)} /* De ondergrond is de paginakleur en niet grijs. Dit beeld laadt pas wanneer je erbij komt, en een grijs vlak dat daarna van kleur verspringt leest als iets dat stuk is. Nu zie je de sectie erboven gewoon doorlopen tot de foto er is. */ .volle-band{margin-top:clamp(44px,6vw,84px);width:100%;height:90svh; background:var(--papier);overflow:hidden} .volle-band picture,.volle-band img{display:block;width:100%;height:100%;object-fit:cover} @media(max-width:700px){.volle-band{height:70svh;min-height:380px}} /* Op de home en de vacatures sluit de band de sectie af, dus is er niets om van af te duwen. Staat er nog inhoud onder, zoals op een vakpagina waar de kaarten volgen, dan krijgt die dezelfde lucht als de kop erboven. Zonder dit plakken de kaarten tegen de foto. */ .volle-band:has(+ .omhulsel){margin-bottom:clamp(34px,4.6vw,58px)} .kaart-svg .gem{stroke:var(--papier);stroke-width:1.2} /* ══ HERO ════════════════════════════════════════════════════ Alleen de kop en de lijn. Het beeld loopt recht tot de rand, zonder afgeronde hoek, en linksonder staat één pijl die zegt dat er meer volgt. */ /* ══ KOPPEN OP EEN TELEFOON ══════════════════════════════════ Twee dingen stonden hier in de weg. De maat groeide mee met de breedte van het scherm (4,6vw), en op 390 pixels komt dat neer op de ondergrens van de clamp: een kop van 34 pixels boven een zin van 16. Dat is anderhalve stap verschil, te weinig om een kop als kop te laten lezen, en de klant zei het zelf: de zin eronder was duidelijker dan de kop erboven. En de grens van 24 tekens sneed op een telefoon een vijfde van de kolom weg. Op 390 pixels bleef een CTA-kop op 250 van de 314 staan, met lucht ernaast waar niets mee gebeurde. Een tekengrens hoort bij een brede kolom; op één kolom is de kolom zelf de grens. */ @media(max-width:640px){ .sectiekop h2,.rea-kop h2,.totaal-kop h2,.plek-tekst h2,.naast-tekst h2, .vlak-donker h2,.daadvlak h2,.daadsplit h2{ font-size:clamp(2.35rem,8.2vw,2.9rem);line-height:1.0;max-width:none} .sectiekop h3,.rea-kop h3{font-size:clamp(1.35rem,5.4vw,1.6rem)} }