: pretty laat de
browser vooruitkijken over de laatste regels, en op een pagina met
honderden alinea's kost dat gemeten zo'n 85 ms extra rekenwerk voor
een verschil dat je in lopende tekst nauwelijks ziet. Hier staat het
waar de regel kort is en één los woord meteen opvalt. */
figcaption, .lede, .hero-sub, .ov-sub, .svc-desc, .ov-price-list li,
.review-text, .step p, .ov-route-txt span, .trust-item .label,
.showcase-card .meta, .ba-caption, .ov-shot-cap, .ov-fine, .ov-ba-note {
text-wrap: pretty;
}
/* Superscripten waren op de prijspagina bijna even groot als de
kop: "per m²" brak de regel open. Dit zet ze terug op hun plaats
zonder de regelhoogte te verstoren. */
sup, sub {
font-size: 0.62em;
line-height: 0;
position: relative;
vertical-align: baseline;
font-feature-settings: 'sups' 0;
}
sup { top: -0.48em; }
sub { bottom: -0.22em; }
/* In een display-kop mag hij nog een tik kleiner. */
.h-display sup, .h1 sup, .h2 sup, .h3 sup { font-size: 0.44em; top: -0.72em; }
/* Cijfers die onder elkaar staan moeten uitlijnen: prijzen,
telefoonnummers, tabellen, scores. */
.compare-table, .intent-table, .stat-row, .ov-price-num, .ov-price-list,
.trust-item .num, .review-stat .num, .ov-tel, .contact-row .value,
.case-meta strong, .result-card h4 {
font-variant-numeric: tabular-nums;
}
/* Twee secties op dezelfde achtergrond gaven 200 px leegte plus de
eigen marge van de inhoud. Op de prijspagina viel daardoor een
gat van bijna een half scherm tussen de tabel en de volgende kop. */
.section + .section { padding-top: 56px; }
.section + .section-tight, .section-tight + .section { padding-top: 48px; }
@media (max-width: 860px) {
.section + .section { padding-top: 38px; }
.section + .section-tight, .section-tight + .section { padding-top: 32px; }
}
/* De kop van een sectie mag dichter bij zijn eigen inhoud staan dan bij
de sectie erboven. 56 px was overal hetzelfde, ook onder een kop van
twee regels van 60 px. */
.section-head { margin-bottom: 48px; }
@media (max-width: 860px) { .section-head { margin-bottom: 32px; } }
/* De kop-en-tekst-verhouding in een section-head: de lede stond
op de basislijn van een kop van 60 px en zweefde daardoor los. */
.section-head .lede { max-width: 46ch; }
.section-head > div > .eyebrow + h2,
.section-head > div > .eyebrow + .h-display { margin-top: 14px; }
/* Leestekst: 75 tekens is de bovengrens waarop het oog nog
terugvindt waar de volgende regel begint. */
.seo-text p, .seo-text ul li, .ai-q p, .expert-box, .ai-entity-note { max-width: 72ch; }
.faq-item p { max-width: 70ch; }
/* ─── 12.4 Voor/na-schuif ─────────────────────────────────── */
/* Dit is het element dat het werk verkoopt en het stond het
dichtst bij "goedkoop": geen focus, geen toetsenbord, geen
overgang, en een greep die niet vertelde dat je hem vast kan
pakken. */
.ba {
cursor: grab;
/* De schuif krijgt zijn eigen laag zodat clip-path en de greep
samen op de GPU blijven en het scrollen niet raken. */
will-change: auto;
outline-offset: -3px;
}
.ba:active { cursor: grabbing; }
/* De positie animeert als de bezoeker klikt, met de pijltjes werkt of
als de schuif zichzelf één keer voorstelt. Tijdens het slepen staat de
overgang uit, want daar moet de greep exact onder de vinger blijven. */
.ba:not(.is-drag) .ba-before { transition: -webkit-clip-path 420ms var(--ease-out), clip-path 420ms var(--ease-out); }
.ba:not(.is-drag) .ba-handle { transition: left 420ms var(--ease-out), box-shadow var(--dur-2) var(--ease-io); }
.ba:not(.is-drag)::before { transition: left 420ms var(--ease-out), opacity var(--dur-3) var(--ease-io); }
/* Greep: een lijn, een schijf en twee chevrons. De schijf wordt
groter zodra je hem aanraakt, zodat hij zich als knop aankondigt. */
.ba-handle::before {
transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
box-shadow: 0 4px 14px rgba(0,0,0,0.25), 0 0 0 0.5px rgba(26,26,26,0.06);
}
.ba:hover .ba-handle::before { transform: translate(-50%, -50%) scale(1.06); }
.ba.is-drag .ba-handle::before {
transform: translate(-50%, -50%) scale(0.97);
box-shadow: 0 2px 8px rgba(0,0,0,0.3), 0 0 0 0.5px rgba(26,26,26,0.08);
}
.ba:focus-visible .ba-handle::before {
box-shadow: 0 4px 14px rgba(0,0,0,0.25), 0 0 0 3px var(--accent);
}
.ba-handle::after { transition: transform var(--dur-2) var(--ease-out); }
.ba.is-drag .ba-handle::after { transform: translate(-50%, -50%) scale(0.92); }
/* Zolang de bezoeker de schuif nog niet aangeraakt heeft staat er
een fluistering onder de greep. Zodra hij sleept is die weg en
komt hij niet terug. */
.ba::before {
content: 'Sleep';
position: absolute;
left: var(--pos);
top: calc(50% + 38px);
transform: translateX(-50%);
z-index: 6;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #FFFFFF;
background: rgba(26,26,26,0.62);
padding: 5px 9px;
pointer-events: none;
white-space: nowrap;
opacity: 0;
transition: opacity var(--dur-3) var(--ease-io);
}
.ba.is-ready::before { opacity: 1; }
.ba.is-touched::before { opacity: 0; }
@media (max-width: 860px) { .ba::before { top: calc(50% + 33px); } }
/* De labels VOOR en NA dragen het bewijs. Ze stonden op een
halftransparant blokje dat over een lichte lucht wegviel. */
.ba-tag {
border: 0.5px solid rgba(248,245,237,0.18);
font-variant-numeric: tabular-nums;
}
/* Hier stond een opacity die met clamp() uit --pos werd gerekend, zodat
een label vervaagde als je de schuif naar die kant duwde. Mooi, maar
--pos is een geërfde eigenschap: elke wijziging maakte de stijl van de
hele subboom ongeldig, elk frame, voor elke schuif op de pagina. Op
/crepi-reinigen-brugge/ staan er dertien, op /realisaties/ eenentwintig.
Gemeten tijdens het scrollen liep de stijlberekening daardoor op van
48 ms naar 140 ms. Het label blijft nu gewoon staan. */
.ba-caption { align-items: baseline; gap: 20px; }
/* ─── 12.5 Beelden die nog laden ──────────────────────────── */
/* De lijsten met realisaties laden tientallen foto's lazy. Zonder iets
ertussen klapt er een wit gat open en daarna ineens een beeld. De
houder heeft al een vaste verhouding, dus geef hem de kleur van het
papier: dan staat er een rustig vlak op precies de goede plek en
verspringt er niets zodra de foto binnenkomt.
Wat hier NIET meer staat: opacity:0 op lazy beelden met een fade
eroverheen. Dat zag er beter uit, maar het beeld is dan pas zichtbaar
nadat JS het heeft vrijgegeven — en op de stadspagina's is dat net het
grootste beeld op het scherm. Gemeten: LCP ging van 280 ms naar 956 ms.
Een fade van 300 ms is dat niet waard. */
.ba, .ov-shot-main, .ov-shot-inset, .ov-ba figure, .svc, .video-wrap,
.realisatie-card .ba, .showcase-card .ba {
background-color: var(--bg-3);
}
/* Beelden zonder breedte/hoogte in de HTML mogen de pagina niet laten
verspringen zodra ze binnenkomen. */
.realisatie-card .ba, .showcase-card .ba { contain: layout paint; }
/* ─── 12.6 Reviews ────────────────────────────────────────── */
.review {
position: relative;
padding: 30px 26px 26px;
border-color: var(--line);
}
/* Een aanhalingsteken in de serif, ver weggezet. Het maakt van een
kader met tekst een citaat. */
.review::before {
content: '\201C';
position: absolute;
top: 10px; right: 18px;
font-family: var(--serif);
font-size: 64px;
line-height: 1;
color: var(--accent);
opacity: 0.10;
pointer-events: none;
}
.review-text { font-size: 15.5px; line-height: 1.6; }
.review-author { padding-top: 18px; gap: 3px; }
.review-author strong { font-size: 14.5px; letter-spacing: -0.01em; }
/* De bron stond er als "Google · ⭐⭐⭐⭐⭐": kleuremoji naast een
rij sterren die de site zelf al tekent. Grijstinten halen de
felle geel-oranje eruit; de tekst eromheen is toch al grijs. */
.review-source {
font-size: 10.5px;
letter-spacing: 0.08em;
}
.review-toggle {
transition: opacity var(--dur-1) var(--ease-io);
text-underline-offset: 3px;
min-height: 32px;
}
.review-toggle:hover { text-decoration: underline; }
/* Sterren: de bestaande clip-path gaf een ster met een zichtbaar
scheve onderpunt op sommige maten. Iets meer contrast en een
vaste maat maakt de rij rustiger. */
.review-stars span, .trust-stars span, .ov-stars span {
flex-shrink: 0;
}
/* Carrousel */
.review-grid.ov-carousel {
/* Ademruimte links/rechts zodat de schaduw van een gelifte kaart
niet wordt afgesneden door de scrollrand. */
padding: 6px 2px 10px;
margin-bottom: 14px;
scroll-padding-left: 2px;
overscroll-behavior-x: contain;
}
.review-grid.ov-carousel > .review:hover { box-shadow: var(--lift-2); }
/* Bolletjes: 7 px was een raakvlak van 7 px. Nu een raakvlak van
44 px met een merkteken van 7 px erin — de norm voor een vinger. */
.ov-dots { gap: 2px; margin-top: 2px; }
.ov-dot {
position: relative;
width: 7px; height: 7px;
margin: 0 5px;
background: rgba(45,74,62,0.20);
transition: background var(--dur-3) var(--ease-out),
width var(--dur-3) var(--ease-out),
border-radius var(--dur-3) var(--ease-out);
}
.ov-dot::after {
content: '';
position: absolute;
top: 50%; left: 50%;
width: 44px; height: 44px;
transform: translate(-50%, -50%);
}
.ov-dot:hover { background: rgba(45,74,62,0.45); }
.ov-dot.is-on { background: var(--accent); width: 22px; border-radius: 4px; }
.ov-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
/* Een rand die vertelt dat er nog kaarten naast staan. */
.ov-carousel-wrap { position: relative; }
/* ─── 12.7 Vertrouwen ─────────────────────────────────────── */
/* De score stond als losse tekstregel onder de knoppen: vijf
sterretjes, "5,0 op Google · 50 reviews", klaar. Het is een link
naar het echte profiel, maar niets liet dat zien. Nu is het een
kaartje met een rand dat je kan aanklikken. */
.ov-proof-row:not(.ov-proof-row-2) {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 8px 14px 8px 12px;
background: var(--bg);
border: 0.5px solid var(--line-2);
}
.ov-proof-row:not(.ov-proof-row-2) a { display: inline-flex; align-items: center; gap: 9px; }
.ov-proof-row:not(.ov-proof-row-2) strong {
font-weight: 600;
font-size: 14px;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
/* Pijltje dat zegt: dit gaat ergens heen. */
.ov-proof-row:not(.ov-proof-row-2)::after {
content: '↗';
font-size: 11px;
color: var(--ink-3);
transition: transform var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-io);
}
.ov-proof-row:not(.ov-proof-row-2):hover::after { transform: translate(2px, -2px); color: var(--accent); }
/* "Verzekerd · actief sinds 2022 · West- en Oost-Vlaanderen" was
de derde platte regel op rij. Een schildje ervoor en een lichte
scheidingslijn maken er een keurmerkregel van. */
.ov-proof-row-2 {
display: flex;
align-items: center;
/* .ov-proof-row zet flex-wrap:wrap. Zonder dit sprong het schildje op
een eigen regel zodra de tekst niet meer paste, en stond er een los
icoontje boven een zin. */
flex-wrap: nowrap;
gap: 8px;
margin-top: 12px;
padding-top: 12px;
border-top: 0.5px solid var(--line);
color: var(--ink-2);
font-size: 12.5px;
letter-spacing: 0.005em;
}
.ov-proof-row-2::before {
content: '';
width: 14px; height: 14px;
flex-shrink: 0;
background: var(--accent);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center/contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* Het scoreblok bij de reviewsectie: los getal naast losse sterren.
Nu een kader dat als een keurmerk leest. */
.review-stat {
border: 0.5px solid var(--line-2);
padding: 18px 24px;
align-items: center;
}
.review-stat .num { font-size: 40px; line-height: 1; font-variant-numeric: tabular-nums; }
.review-stat .meta { display: block; margin-top: 5px; letter-spacing: 0.02em; }
.review-stat .review-stars { margin-bottom: 0; }
/* Het fotorapport. Twee foto's naast elkaar is bewijs, maar het zag
eruit als twee losse plaatjes. Eén kader eromheen, een haarlijn
ertussen, en labels die op elkaar afgestemd staan: dan lees je
het als één opname van hetzelfde standpunt. */
.ov-ba {
gap: 0;
border: 0.5px solid var(--line-2);
background: var(--line-2);
padding: 0.5px;
column-gap: 0.5px;
}
.ov-ba figure { background: var(--bg-3); }
.ov-ba figcaption {
border: 0.5px solid rgba(248,245,237,0.2);
left: 12px; top: 12px;
}
.ov-ba-note {
padding-left: 16px;
position: relative;
line-height: 1.55;
}
.ov-ba-note::before {
content: '';
position: absolute;
left: 0; top: 8px;
width: 8px; height: 0.5px;
background: var(--accent);
}
/* Citaat in de conversiekolom */
.ov-quote { position: relative; }
.ov-quote:hover { border-color: rgba(45,74,62,0.3); }
.ov-quote-meta cite { letter-spacing: -0.01em; }
/* De cijferrij in de hero (werven, jaren, garantie) */
.trust-item .num { font-variant-numeric: tabular-nums; letter-spacing: -0.045em; }
.trust-item .label { letter-spacing: 0.06em; text-transform: uppercase; font-size: 11px; }
/* Werkgebied, garantie en verzekering in de contactkaart:
waarden rechts uitlijnen leest als een specificatieblad. */
.contact-row .value { font-variant-numeric: tabular-nums; }
/* ─── 12.8 Dienstenkaarten ────────────────────────────────── */
/* Hier zat een echte fout. .svc-content staat op space-between.
Kaart 1 heeft een label bovenaan én een tekstblok onderaan, dus
die verdeelt netjes. Kaart 2 en 3 hebben géén label, dus schoof
hun enige kind naar bóven — pal over een lichte lucht en een
rode baksteenmuur. "Gevels" en "B2B" waren daardoor nauwelijks
leesbaar, terwijl de zwarte verloop onderaan leeg bleef. */
.svc-content { justify-content: flex-end; }
.svc-tag { margin-bottom: auto; }
/* Het verloop liep pas vanaf 30% en haalde 0.85. Over een felle
lucht is dat te weinig voor witte tekst van 14 px. */
.svc::after {
background: linear-gradient(180deg,
rgba(26,26,26,0) 34%,
rgba(26,26,26,0.42) 62%,
rgba(26,26,26,0.88) 100%);
transition: opacity var(--dur-3) var(--ease-io);
}
.svc:hover::after { opacity: 0.94; }
.svc-desc { opacity: 0.9; }
.svc-title { text-shadow: 0 1px 20px rgba(26,26,26,0.35); }
.svc-num { letter-spacing: 0.1em; opacity: 0.75; }
/* De pijl van de kaart schuift mee in plaats van de ruimte ervoor
te rekken: gap animeren dwingt een layout op elke frame. */
.svc-cta { gap: 8px; transition: none; }
.svc-cta::after { content: ''; }
.svc:hover .svc-cta { gap: 8px; }
.svc-cta { position: relative; }
/* ─── 12.9 Tabellen ───────────────────────────────────────── */
/* Drie pagina's zetten .compare-table zonder .table-wrap eromheen,
waaronder /gevelreiniging-prijs/. Op 390 px duwde de tabel de pagina
daar 4 px breder dan het scherm.
Eerst geprobeerd: de tabel zelf de scroller maken met display:block.
Dat haalde de overloop weg, maar een tabel op display:block krimpt tot
zijn inhoud terwijl de rand op 100% blijft staan — op 768 px stond de
helft van het kader leeg naast de rijen.
table-layout:fixed lost het bij de wortel op: de kolommen verdelen de
beschikbare breedte onder elkaar en de tabel kán niet breder worden dan
zijn houder. De inhoud loopt door op een tweede regel in plaats van
buiten beeld. Meteen ook beter voor de 62 pagina's die wél een
.table-wrap hebben: daar moest je zijwaarts scrollen om de laatste
kolom te zien. */
@media (max-width: 760px) {
.compare-table, .intent-table { table-layout: fixed; width: 100%; }
.compare-table th, .compare-table td,
.intent-table th, .intent-table td {
padding: 12px 10px;
overflow-wrap: break-word;
hyphens: auto;
}
.compare-table td:last-child:not(.good):not(.bad) { white-space: normal; }
}
.compare-table { border: 0.5px solid var(--line-2); }
.compare-table thead th {
/* Geen position:sticky hier. De navigatiebalk staat vast bovenaan op
z-index 100; een plakkende koprij zou daar onderdoor schuiven en
half achter de balk blijven hangen. De tabellen op deze site zijn
vier rijen lang, dus er valt ook niets aan te plakken. */
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 600;
padding: 13px 16px;
}
.compare-table td { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.compare-table td:first-child { color: var(--ink); }
.compare-table tbody tr { transition: background var(--dur-1) var(--ease-io); }
.compare-table tbody tr:hover { background: rgba(45,74,62,0.04); }
.compare-table tbody tr:last-child td { border-bottom: none; }
/* .good en .bad stonden wél in de HTML van de vergelijkingstabellen
maar nergens in de CSS. De rij "Crepi Care softwash" — precies de
rij die het verschil moet maken — zag er identiek uit als
"Agressieve hogedruk". */
.compare-table td.good, .compare-table .good { color: var(--good); }
.compare-table td.bad, .compare-table .bad { color: var(--bad); }
.compare-table td.good, .compare-table td.bad { padding-left: 34px; position: relative; }
.compare-table td.good::before, .compare-table td.bad::before {
content: '';
position: absolute;
left: 15px; top: 19px;
width: 12px; height: 12px;
background: currentColor;
}
.compare-table td.good::before {
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E") center/contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E") center/contain no-repeat;
}
.compare-table td.bad::before {
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* De rij die wij zijn, krijgt gewicht. */
.compare-table tbody tr:has(.good) { background: var(--good-bg); }
.compare-table tbody tr:has(.good):hover { background: rgba(45,74,62,0.09); }
.compare-table tbody tr:has(.good) td:first-child strong { font-weight: 600; color: var(--good); }
.compare-table tbody tr:has(.bad) td.bad { background: var(--bad-bg); }
/* Prijskolommen rechts uitlijnen als er alleen bedragen in staan. */
.compare-table td:last-child:not(.good):not(.bad) { white-space: nowrap; }
/* In de prijstabellen staat het label en de toelichting aan elkaar
geplakt: Dakreinigingmos en algen. Dat las als
"Dakreinigingmos en algen". De toelichting krijgt een eigen regel —
op de 210 cellen waar de strong de hele cel is, verandert er niets. */
.compare-table td:first-child strong {
display: block;
margin-bottom: 2px;
font-weight: 600;
letter-spacing: -0.01em;
}
.compare-table td:first-child { color: var(--ink-2); }
.compare-table td:first-child strong { color: var(--ink); }
/* Ook de tweede tabelsoort meenemen, die op de AI-blokken staat. */
.intent-table { border-radius: 0; }
.intent-table th { background: var(--accent); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; font-size: 11px; }
.table-wrap { position: relative; }
/* ─── 12.10 Kaarten, vlakken en vormtaal ──────────────────── */
/* De site is scherphoekig: haarlijnen, rechte hoeken, geen ronding.
Een aantal later toegevoegde blokken kwam uit een ander sjabloon
en bracht 16 px ronding en een marineblauw/bruin palet mee dat
nergens anders voorkomt. Dat leest als een ingeplakt blok. */
.ai-entity-card, .ai-entity-note, .expert-box, .answer-block, .answer-card,
.wr-sec .wr-card, .wr-sec .wr-panel, .ai-q, .intent-table {
border-radius: 0;
}
.ai-q { border-radius: 0; }
.answer-block {
background: var(--bg-2);
border: 0.5px solid var(--line);
}
.answer-block .eyebrow {
color: var(--accent);
font-weight: 500;
letter-spacing: 0.2em;
font-size: 11px;
}
.answer-block h2 { color: var(--ink); letter-spacing: -0.035em; font-weight: 600; }
.answer-block h3 { color: var(--ink); letter-spacing: -0.02em; font-weight: 500; }
.answer-block p, .answer-block ul { color: var(--ink-2); }
/* Eén familie: elk vlak met een haarlijn eromheen reageert hetzelfde.
Dit stond eerst als zeven losse regelparen door het bestand heen; dat
zijn zeven keer zoveel selectoren om tegen elke node te matchen, voor
precies dezelfde drie eigenschappen. */
.rel-card, .service-tile, .result-card, .case-meta > div,
.answer-card, .ai-entity-card, .review, .review-stat, .wr-sec .wr-card,
.ov-proof-row:not(.ov-proof-row-2), .ov-quote {
transition: border-color var(--dur-2) var(--ease-io),
transform var(--dur-2) var(--ease-out),
box-shadow var(--dur-2) var(--ease-out);
}
.rel-card:hover, .service-tile:hover, .result-card:hover,
.answer-card:hover, .ai-entity-card:hover, .review:hover,
.review-stat:hover, .wr-sec .wr-card:hover,
.ov-proof-row:not(.ov-proof-row-2):hover {
border-color: rgba(45,74,62,0.42);
transform: translateY(-2px);
box-shadow: var(--lift-1);
}
.answer-card { background: var(--bg); border: 0.5px solid var(--line); box-shadow: none; }
.ai-entity-card { border: 0.5px solid var(--line); box-shadow: none; }
.answer-card strong { color: var(--ink); }
.answer-card a { color: var(--accent); font-weight: 500; }
.quick-links a { background: var(--accent); border-radius: 0; font-weight: 500; padding: 12px 16px; }
.quick-links a.secondary { background: transparent; color: var(--ink); border: 0.5px solid var(--line-2); }
.quick-links a { transition: background var(--dur-2) var(--ease-io), transform var(--dur-2) var(--ease-out); }
.quick-links a:hover { transform: translateY(-1px); }
.ai-entity-note, .expert-box { border: 0.5px solid var(--line); }
.wr-sec .wr-card { border: 0.5px solid var(--line); }
/* Vinkjes in de check-list stonden als tekst-glyph ✓, die per
lettertype anders valt. Een vaste vorm valt altijd hetzelfde. */
.check-list li::before {
content: '';
top: 6px;
width: 12px; height: 12px;
background: var(--accent);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E") center/contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E") center/contain no-repeat;
}
.wr-sec .wr-panel .check-list li::before { background: #FFFFFF; }
.cta-section .check-list li::before { background: var(--bg); }
/* FAQ: het plusteken draaide wel, maar de rij eromheen gaf geen
enkel teken dat je erop kon klikken. */
.faq-item { transition: border-color var(--dur-2) var(--ease-io); }
.faq-item summary { padding: 2px 0; transition: color var(--dur-1) var(--ease-io); }
.faq-item summary:hover { color: var(--accent); }
.faq-item summary::after { transition: transform var(--dur-3) var(--ease-out), color var(--dur-1) var(--ease-io); }
.faq-item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.faq-item[open] { border-bottom-color: var(--line-2); }
.faq-item[open] p { animation: ov-faq-in var(--dur-3) var(--ease-out) both; }
@keyframes ov-faq-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* De aside met cijfers naast de SEO-tekst */
.seo-aside { border-left-width: 2px; }
.stat-row span:last-child { font-variant-numeric: tabular-nums; }
/* ─── 12.11 Navigatie en zwevende knoppen ─────────────────── */
/* backdrop-filter kost elke scrollframe een blur over de volle
breedte. Zodra de balk 94% dekkend is, ziet niemand die blur nog;
dan mag hij eraf. Scheelt werk op elke pagina, elke scroll. */
nav.scrolled { backdrop-filter: none; -webkit-backdrop-filter: none; }
nav { transition: background var(--dur-3) var(--ease-io), padding var(--dur-2) var(--ease-io), border-color var(--dur-3) var(--ease-io); }
.nav-links a { position: relative; transition: color var(--dur-1) var(--ease-io); }
.nav-links a:not(.nav-cta)::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: -5px;
height: 1px;
background: var(--accent);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--dur-2) var(--ease-out);
}
.nav-links a:not(.nav-cta):hover::after { transform: scaleX(1); }
.nav-links a:not(.nav-cta):hover { opacity: 1; color: var(--accent); }
.nav-links a.active::after { transform: scaleX(1); }
.nav-cta { transition: background var(--dur-2) var(--ease-io), transform var(--dur-2) var(--ease-out); }
.nav-cta:hover { transform: translateY(-1px); }
.menu-toggle { min-width: 44px; min-height: 44px; justify-content: center; }
.mobile-menu { transition: right var(--dur-3) var(--ease-out); }
.mobile-menu a { transition: padding-left var(--dur-2) var(--ease-out), color var(--dur-1) var(--ease-io); }
.mobile-menu a:hover, .mobile-menu a:focus-visible { padding-left: 6px; color: var(--accent); }
.mobile-menu .nav-cta:hover { padding-left: 24px !important; }
/* De zwevende bel- en WhatsApp-knoppen dekten op mobiel tekst af.
Ze blijven staan, maar smaller en met een rand die ze van de
pagina scheidt in plaats van eroverheen te liggen. */
#floatContact a {
transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
border: 1px solid rgba(255,255,255,0.16);
}
#floatContact a:hover { transform: translateY(-2px); }
#floatContact a:focus-visible { outline: 2px solid var(--focus-ring-light); outline-offset: 3px; }
/* Op desktop stonden er twee brede pillen permanent over de rechteronderhoek.
Ze dekten daar het onderschrift van het hero-beeld af en het is de plek
waar op elke pagina wél iets staat. Nu zijn het twee ronde knoppen die
hun woord pas tonen als je erheen gaat: even bereikbaar, half zo groot. */
@media (min-width: 601px) {
#floatContact a { padding: 0; width: 52px; justify-content: center; gap: 0; overflow: hidden;
transition: width var(--dur-3) var(--ease-out), gap var(--dur-3) var(--ease-out),
padding var(--dur-3) var(--ease-out), transform var(--dur-2) var(--ease-out),
box-shadow var(--dur-2) var(--ease-out); }
#floatContact a .lbl { max-width: 0; opacity: 0; white-space: nowrap;
transition: max-width var(--dur-3) var(--ease-out), opacity var(--dur-2) var(--ease-io); }
#floatContact a:hover, #floatContact a:focus-visible,
#floatContact:hover a, #floatContact:focus-within a {
width: auto; gap: 8px; padding: 0 20px 0 15px;
}
#floatContact:hover a .lbl, #floatContact:focus-within a .lbl { max-width: 120px; opacity: 1; }
}
@media (max-width: 600px) {
#floatContact { right: 14px; bottom: 14px; gap: 8px; }
#floatContact a { width: 48px !important; height: 48px; box-shadow: 0 6px 18px rgba(0,0,0,0.24); }
}
.mobile-cta { transition: transform var(--dur-3) var(--ease-out); min-height: 52px; }
/* Marquee: liep 45 s lineair rond en trok op zwakke toestellen een
herschildering over de volle breedte. Op de GPU en met een
duidelijke laag scheelt dat merkbaar. */
.marquee-track { will-change: transform; transform: translateZ(0); }
.marquee { contain: content; }
/* ─── 12.12 Beweging ──────────────────────────────────────── */
/* Reveals waren 900 ms. Dat is lang genoeg om te merken dat je op
iets staat te wachten. 560 ms met een sterke uitloop leest als
"het stond er al". */
.js .reveal {
opacity: 0;
transform: translateY(14px);
transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out);
}
.js .reveal.visible { opacity: 1; transform: none; }
/* Wat al bij het openen op het scherm staat, wordt niet eerst verstopt.
Op de stadspagina's dragen de
en de introzin een .reveal, dus de
belangrijkste tekst van de pagina begon op opacity 0 en kwam pas
tevoorschijn als het script eraan toe was. Een element met opacity 0
telt voor de browser niet als getekend: de gemeten Largest Contentful
Paint van /crepi-reinigen-brugge/ sloeg de h1 daardoor over en wees
het logo aan. Wie op een advertentie klikt, kijkt intussen naar een
lege bovenkant. Boven de vouw dus geen animatie — die hoort bij
binnenscrollen, en daar valt niets binnen te scrollen. */
.js .reveal.is-direct { opacity: 1; transform: none; transition: none; }
/* De hero is op 350 van de 353 pagina's het enige op de pagina,
en staat per definitie boven de vouw. Dit hoeft dus niet gemeten te
worden: het kan gewoon in de opmaak staan, en kost dan niets. */
.js header .reveal { opacity: 1; transform: none; transition: none; }
/* will-change stond permanent op élk reveal-element. Op de
realisatiepagina zijn dat er tientallen, allemaal een eigen laag
in het geheugen, ook lang nadat ze klaar waren. */
.js .reveal.visible { will-change: auto; }
.js .reveal:not(.visible) { will-change: opacity, transform; }
/* De hero-foto volgt het scrollen. Er stond een transition van
100 ms op een transform die elke frame opnieuw wordt gezet: dat
vecht met zichzelf en loopt zichtbaar achter. */
.js .ov-shot-main img {
transform: translate3d(0, var(--ov-par, 0px), 0) scale(1.045);
transition: none;
will-change: transform;
}
/* Knoppen: één transitie, alleen transform, kleur en schaduw. */
.btn {
transition: transform var(--dur-2) var(--ease-out),
background var(--dur-2) var(--ease-io),
color var(--dur-2) var(--ease-io),
border-color var(--dur-2) var(--ease-io),
box-shadow var(--dur-2) var(--ease-out);
min-height: 48px;
}
.btn:active { transform: translateY(0) scale(0.988); }
.btn-ghost:hover { transform: translateY(-2px); }
.btn .arrow { transition: transform var(--dur-2) var(--ease-out); }
/* Iedereen die aangeeft geen beweging te willen, krijgt geen
beweging. Ook geen carrousel die vanzelf doorklikt en geen
parallax — die twee ontbraken. */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.js .reveal { opacity: 1 !important; transform: none !important; }
.js .ov-shot-main img { transform: scale(1.045) !important; }
.ba { transition: none !important; }
.ba::before { display: none; }
.marquee-track { animation: none; }
}
/* Wie geen JS heeft (of bij wie het faalt) moet gewoon alles zien. */
@media (scripting: none) {
.reveal { opacity: 1 !important; transform: none !important; }
}
/* De vaste offerteknop onderaan /realisaties/ loopt van rand tot rand
(left:16px, right:16px), terwijl de zwevende bel- en WhatsApp-knoppen
daar bovenop staan. Op 390 px viel "Vraag offerte aan" daardoor
half achter de belknop. De balk op de andere pagina's houdt die ruimte
al vrij (.mobile-cta staat op right:86px); deze deed dat niet. */
@media (max-width: 760px) {
body.page-realisaties .mobile-sticky-offerte { right: 76px; }
}
/* Samenvattingsregel onder de dienstkeuze in de prijswidget */
.pw-sum{font:400 13px/1.6 var(--sans,system-ui);color:#5C5A52;margin:9px 0 0;min-height:1.6em}
/* Leesritme in de lange tekstblokken. Zonder dit lopen alinea's aan elkaar
tot een muur en leest een pagina als een boek in plaats van als een uitleg. */
.container-narrow > p,
.container-narrow > ul,
.container-narrow > ol { max-width: 68ch; }
.container-narrow > p { font-size: 17px; line-height: 1.8; color: var(--ink-2); margin: 0 0 20px; }
.container-narrow > p:last-child { margin-bottom: 0; }
.container-narrow > h2 { margin-bottom: 22px; }
.container-narrow > h3 { font-size: 21px; line-height: 1.3; margin: 38px 0 14px; letter-spacing: -.01em; }
.container-narrow > h2 + p,
.container-narrow > h3 + p { margin-top: 0; }
.container-narrow > .check-list { margin: 8px 0 0; }
.container-narrow > .check-list li { margin-bottom: 14px; line-height: 1.75; }
.container-narrow > .faq-list { max-width: 100%; }
@media (max-width: 640px) {
.container-narrow > p { font-size: 16px; line-height: 1.75; margin-bottom: 18px; }
.container-narrow > h3 { font-size: 19px; margin: 30px 0 12px; }
}
/* De hero-foto stond geknepen in een kolom van 390px naast een titel van 60px.
Beeld is hier het bewijs, dus het krijgt de bredere helft. */
.hero > .container { max-width: 1180px; }
.hero-split { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 64px; }
@media (max-width: 900px) {
.hero > .container { max-width: 100%; }
.hero-split { grid-template-columns: 1fr; gap: 40px; }
}
/* Foto's die tussen de tekst staan. */
.tekst-beeld { margin: 34px 0 6px; }
.tekst-beeld img { display: block; width: 100%; height: auto; }
.tekst-beeld figcaption {
margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--ink-2);
}
.beeld-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.beeld-duo figure { margin: 0; }
.beeld-duo .label {
display: inline-block; margin-top: 8px; font-size: 12px; text-transform: uppercase;
letter-spacing: .08em; color: var(--ink-2);
}
@media (max-width: 640px) { .beeld-duo { grid-template-columns: 1fr; gap: 18px; } }
/* De titel in een hero met beeld ernaast mag nooit breder worden dan zijn kolom.
"Gevelreiniging" op 88px past niet in 500px en liep over de foto. */
.hero-split .hero-title { font-size: clamp(38px, 4.4vw, 62px); overflow-wrap: break-word; hyphens: auto; }
.hero-split .hero-text { min-width: 0; }
@media (max-width: 900px) {
.hero-split .hero-title { font-size: clamp(36px, 8vw, 54px); }
}
/* ============================================================================
VISUELE QA VAN 14-08-2026. Alles hieronder is gemeten op 390, 430, 768, 1280
en 1600 breed, op tien pagina's.
============================================================================ */
/* De bolletjes onder de reviews activeerden de VERKEERDE review. Ze stonden 17px uit
elkaar maar kregen elk een onzichtbaar raakvlak van 44px, dus de raakvlakken
overlapten 27px en het laatste bolletje in de DOM won. Gemeten met elementFromPoint:
vier van de zes raakten een ander bolletje. Nu is de knop zelf het raakvlak en tekent
::after de stip. */
.ov-dots { gap: 0; margin-top: 2px; }
.ov-dot {
width: 24px; height: 44px;
margin: 0; padding: 0; border: 0;
background: none; border-radius: 0;
display: grid; place-items: center;
}
.ov-dot::after {
content: '';
width: 7px; height: 7px;
border-radius: 50%;
background: rgba(45,74,62,0.20);
transition: background var(--dur-3) var(--ease-out),
width var(--dur-3) var(--ease-out),
border-radius var(--dur-3) var(--ease-out);
}
.ov-dot:hover::after { background: rgba(45,74,62,0.45); }
.ov-dot.is-on { background: none; }
.ov-dot.is-on::after { background: var(--accent); width: 22px; border-radius: 4px; }
/* Raakvlakken op de norm van 44px. Alleen de hoogte, de vormtaal blijft.
De cookieknoppen stonden op 35px en dat is de eerste tik die iemand doet. */
.cookie-accept, .cookie-decline { min-height: 44px; }
.cta-section .contact-row a.value { display: inline-flex; align-items: center; min-height: 44px; }
.review-toggle { min-height: 44px; }
.filter-bar .filter-btn { min-height: 44px; }
.foot-cities a { display: inline-block; padding: 6px 0; }
/* ============================================================================
DE VRAGENSECTIE, 14-08-2026.
Ze stond als een kale lijst over de volle breedte: een kop van 60px boven
vragen van 18px, en 600px leegte tussen de vraag en het plusje. Nu draagt de
kop de linkerkolom en staan de vragen rechts, zoals de rest van de site.
============================================================================ */
.section.faq > .container-narrow > .faq-list,
.section.faq > .container > .faq-list { margin-top: 8px; }
@media (min-width: 900px) {
.section.faq > .container-narrow,
.section.faq > .container.container-narrow {
display: grid;
grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
column-gap: 72px;
align-items: start;
}
.section.faq > .container-narrow > .eyebrow { grid-column: 1; grid-row: 1; margin: 0 0 14px; }
.section.faq > .container-narrow > h2 { grid-column: 1; grid-row: 2; margin: 0 !important; font-size: clamp(28px, 2.6vw, 38px); line-height: 1.15; }
.section.faq > .container-narrow > .faq-list { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; }
}
/* De rij zelf: een vlak dat oplicht in plaats van een streepje met tekst erboven. */
.faq-item { border-bottom: 0.5px solid var(--line); padding: 0; }
.faq-item summary {
padding: 20px 20px 20px 18px;
font-size: 17px;
border-radius: 0;
transition: background var(--dur-2) var(--ease-io), color var(--dur-1) var(--ease-io);
}
.faq-item summary:hover { background: rgba(45,74,62,0.045); color: var(--accent); }
.faq-item[open] summary { background: rgba(45,74,62,0.045); color: var(--accent); }
.faq-item .faq-a { padding: 0 20px 22px 18px; background: rgba(45,74,62,0.045); }
.faq-item .faq-a p { margin-top: 0; }
/* Het plusje wordt een rond vlak dat zegt: hier kan je op duwen. */
.faq-item summary::after {
content: '';
width: 30px; height: 30px; flex-shrink: 0;
border: 1px solid rgba(45,74,62,0.28);
border-radius: 50%;
background:
linear-gradient(var(--accent), var(--accent)) center/11px 1.4px no-repeat,
linear-gradient(var(--accent), var(--accent)) center/1.4px 11px no-repeat;
transition: transform var(--dur-3) var(--ease-out), border-color var(--dur-1) var(--ease-io), background-color var(--dur-1) var(--ease-io);
}
.faq-item summary:hover::after { border-color: var(--accent); }
.faq-item[open] summary::after { transform: rotate(135deg); border-color: var(--accent); }
@media (max-width: 640px) {
.faq-item summary { padding: 16px 12px 16px 12px; font-size: 16px; gap: 12px; }
.faq-item .faq-a { padding: 0 12px 18px 12px; }
.faq-item summary::after { width: 26px; height: 26px; }
}
/* De linkerkolom van de vragensectie stond leeg onder de kop. */
.faq-hulp {
margin: 20px 0 0; font-size: 15px; line-height: 1.7; color: var(--ink-2); max-width: 30ch;
}
.faq-tel {
display: inline-flex; align-items: center; min-height: 44px;
margin-top: 10px; font-size: 17px; font-weight: 500;
color: var(--accent); text-decoration: none;
border-bottom: 1px solid rgba(45,74,62,.3);
}
.faq-tel:hover { border-bottom-color: var(--accent); }
@media (min-width: 900px) {
.section.faq > .container-narrow > .faq-hulp { grid-column: 1; grid-row: 3; }
}
/* ============================================================================
VORM EN RITME — 14-08-2026
Gemeten met headless Chrome op 390, 768, 1280 en 1600 breed, op /,
/crepi-reiniging/, /gevelreiniging/, /gevelreiniging-prijs/,
/gevelreiniging-roeselare/ en /crepi-reinigen-met-bleekwater/.
Alles hieronder hangt aan `body:has(header.hero)`. Reden: de artikelpagina's
hebben een header.hero, de homepage een header.ov-hero. Zo raakt geen enkele
regel hieronder de homepage. Een sibling-selector (.hero ~ section) kon niet:
op /gevelreiniging-roeselare/ en /crepi-reinigen-met-bleekwater/ staan de
secties in een en op de andere drie niet.
============================================================================ */
/* ─── 1. EEN LINKERRAND PER PAGINA ─────────────────────────────────────────
Gemeten op /crepi-reiniging/ bij 1280 breed: de hero begon op 82px, de
lopende tekst op 182px en de showcase op 32px. Drie randen op een pagina.
De hero-container (max 1180px) is nu de rand van alles wat eronder staat.
De tekstkolom houdt exact haar breedte van 916px, maar wordt links
verankerd in plaats van los gecentreerd. Het percentage in de marge rekent
tegen de sectiebreedte en niet tegen 100vw, dus een schuifbalk verschuift
de rand niet. Onder 1180px valt de max() terug op 0 en blijft de bestaande
mobiele opvulling van 20px staan. */
body:has(header.hero) section > .container,
body:has(header.hero) footer > .container { max-width: 1180px; }
body:has(header.hero) section > .container-narrow {
max-width: 980px;
margin-left: max(0px, calc((100% - 1180px) / 2));
margin-right: 0;
}
/* ─── 2. DE HERO: HET GAT VAN 350px BOVEN DE TITEL ─────────────────────────
.hero-split stond op align-items:center. De rechterkolom was 1246px hoog
(760px schuif + bijschrift + 434px tweede foto in een kader), de tekstkolom
547px. (1246 − 547) / 2 = 350px leegte boven het woord "Crepi", en nog eens
350px eronder. Gemeten, niet geschat.
Nu bepaalt de tekst de hoogte van de hero en vult het beeld die hoogte.
De ondergrens van 460px zorgt dat het beeld ook op een korte hero
(Roeselare) een beeld blijft in plaats van een strook. */
@media (min-width: 901px) {
.hero-split { align-items: stretch; }
.hero-split > .hero-text { align-self: center; }
.hero-split > *:not(.hero-text) {
display: flex;
flex-direction: column;
min-width: 0;
}
/* flex-basis 0 én een expliciete min-height: anders valt min-height terug op
auto, is de minimale hoogte van de schuif de natuurlijke hoogte van de foto
(892px bij crepi-huis-14-na.webp op 595px breed) en bepaalt het beeld
alsnog de hoogte van de rij. Gemeten: eerst 890px, nu 512px. */
.hero-split > *:not(.hero-text) > .ba {
flex: 1 1 0;
aspect-ratio: auto;
min-height: 460px;
max-height: none;
}
}
/* De hero stond op 80px onder en de eerste sectie op 100px boven: 180px leegte
tussen de knoppen en de eerste kop, ook op de pagina's zonder beeld
(/gevelreiniging-prijs/, /crepi-reinigen-met-bleekwater/). */
body:has(header.hero) .hero { padding-bottom: 64px; }
body:has(header.hero) .section:first-of-type,
body:has(header.hero) main > .section:first-of-type { padding-top: 64px; }
/* ─── 3. RITME: VERTICALE RUIMTE ───────────────────────────────────────────
Elke sectie stond op 100px onder en 56px boven: 156px leegte tussen twee
blokken met dezelfde achtergrond, twaalf keer na elkaar op een pagina van
4000 woorden. Twee gewone secties zitten nu op 112px van elkaar. Een band
houdt zijn eigen ademruimte, want daar is de leegte de rand van een vlak
en niet een gat tussen twee alinea's. */
body:has(header.hero) .section { padding: 72px 0; }
body:has(header.hero) .section + .section { padding-top: 40px; }
body:has(header.hero) section.section[style*="fffdf7"] { padding: 84px 0; }
/* ─── 4. RITME: DE BAND ────────────────────────────────────────────────────
Er stond al een afwisseling tussen #F8F5ED en #fffdf7. Dat verschil is negen
punten op 255 in het rode kanaal en drie in het groene: op een scherm zie je
dat niet, dus las de pagina als één ononderbroken vel. De band staat nu op
--bg-2 (#EFEBE0), dezelfde tint als de showcase verderop dezelfde pagina.
Geen nieuwe kleur, wel een zichtbare.
Het is een !important omdat de kleur als style-attribuut in de HTML van ruim
tweehonderd pagina's staat; zo volstaat één regel. */
body:has(header.hero) section[style*="fffdf7"] { background: var(--bg-2) !important; }
body:has(header.hero) section[style*="fffdf7"] .compare-table,
body:has(header.hero) section[style*="fffdf7"] .rel-card,
body:has(header.hero) section[style*="fffdf7"] .answer-card { background: var(--bg); }
/* De band krijgt ook een ander skelet: kop links, tekst rechts. Zo verschilt
elke sectie van haar buur en leest scrollen als ritme in plaats van als
herhaling. Het is hetzelfde patroon als de vragensectie, dus geen nieuwe
vormtaal erbij. De kop blijft staan zolang zijn sectie in beeld is; dat is
position:sticky en geen animatie, dus prefers-reduced-motion is hier niet
van toepassing. .faq blijft er buiten, die heeft haar eigen raster. */
@media (min-width: 1000px) {
body:has(header.hero) section[style*="fffdf7"]:not(.faq) > .container-narrow {
max-width: 1180px;
display: grid;
grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
column-gap: 80px;
align-items: start;
}
body:has(header.hero) section[style*="fffdf7"]:not(.faq) > .container-narrow > * {
grid-column: 2;
}
body:has(header.hero) section[style*="fffdf7"]:not(.faq) > .container-narrow > h2 {
grid-column: 1;
grid-row: 1 / span 99;
align-self: start;
position: sticky;
top: 104px;
margin: 0;
font-size: clamp(26px, 2.3vw, 33px);
line-height: 1.14;
}
body:has(header.hero) section[style*="fffdf7"]:not(.faq) > .container-narrow > h2::before {
content: '';
display: block;
width: 34px;
height: 2px;
background: var(--accent);
margin-bottom: 20px;
}
}
/* ─── 5. RITME: DE KOP EN DE AANLOOP ───────────────────────────────────────
clamp(32px, 4.8vw, 60px) gaf 60px op 1280 breed: twaalf koppen na elkaar
even groot als de titel van de pagina zelf. En elke sectie begon meteen met
dezelfde muur van 17px grijs. De eerste alinea is nu een aanloop, zodat een
sectie een ingang heeft. */
body:has(header.hero) .section > .container-narrow > h2 {
font-size: clamp(32px, 3.4vw, 44px);
line-height: 1.06;
}
body:has(header.hero) .section .container-narrow > h2 + p {
font-size: 19px;
line-height: 1.65;
color: var(--ink);
max-width: 62ch;
}
/* ─── 6. LINKS IN DE LOPENDE TEKST ─────────────────────────────────────────
a { color: inherit; text-decoration: none } gold ook voor de links in de
alinea's. Op /crepi-reiniging/ staan er zes en geen enkele was te zien. */
body:has(header.hero) .container-narrow > p a:not(.btn),
body:has(header.hero) .container-narrow > ul a:not(.btn),
body:has(header.hero) .container-narrow > ol a:not(.btn) {
color: var(--accent);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
text-decoration-color: rgba(45,74,62,0.38);
transition: text-decoration-color var(--dur-1) var(--ease-io),
background-color var(--dur-1) var(--ease-io);
}
body:has(header.hero) .container-narrow > p a:not(.btn):hover,
body:has(header.hero) .container-narrow > ul a:not(.btn):hover,
body:has(header.hero) .container-narrow > ol a:not(.btn):hover {
text-decoration-color: var(--accent);
background: rgba(45,74,62,0.08);
}
/* ─── 7. HOMEPAGE: DE DRIE DIENSTKAARTEN ───────────────────────────────────
De inhoud van een dienstkaart hangt aan de onderkant. Omdat "Gevels" een
omschrijving van twee regels heeft en "Crepi Care" en "B2B" er drie, stond
de titel "Gevels" 21px lager dan "B2B" (gemeten: 4018 tegen 3997). Twee
verder identieke kaarten naast elkaar met hun kop op een andere lijn.
Drie regels als ondergrens zet ze gelijk. */
.svc-desc { min-height: 4.5em; }
/* ─── 8. DE LOOPBAND BLEEF LOPEN BIJ REDUCED MOTION ────────────────────────
.marquee-track draait een oneindige animatie van 45 seconden en stond niet
in het blok van prefers-reduced-motion. Wie beweging uitzet in zijn
systeem, kreeg toch een band die uit zichzelf schuift. Nu staat ze stil en
kan je er zelf doorheen schuiven. */
@media (prefers-reduced-motion: reduce) {
.marquee-track { animation: none; }
.marquee { overflow-x: auto; scrollbar-width: none; }
.marquee::-webkit-scrollbar { display: none; }
}
/* ─── 9. HET KRUIMELSPOOR STOND OVER HET LOGO ──────────────────────────────
De hoofdnavigatie hangt aan een kale typeselector: nav { position: fixed;
top: 0; left: 0; right: 0; padding: 18px 32px; background: … }. Het
kruimelspoor in de hero is óók een