is in
index.html gelijkgetrokken met de rest. Daarmee is elk item kale tekst
met dezelfde stijl, en is hier geen override meer nodig.
Wat wel blijft: de balk zit vast onder de nav en het lettertype is
JetBrains Mono op 10,5px. Zie css/home.css voor de basis.
============================================================ */
/* ============================================================
14. SNELCONTACT — compacte balk onder de hero
============================================================ */
.snelcontact {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: var(--s-5);
padding: var(--s-5);
background: var(--sf-2);
border: 1px solid var(--ln-1);
border-radius: var(--r-lg, 16px);
box-shadow: 0 1px 0 rgba(255,255,255,.035) inset, 0 18px 44px rgba(0,0,0,.42);
}
.snelcontact__vraag { margin: 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--tx-2); }
.snelcontact__vraag strong { display: block; color: var(--tx-1); font-size: var(--fs-md); margin-bottom: 2px; }
.snelcontact__acties { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.snelcontact__knop {
display: inline-flex; align-items: center; gap: var(--s-3);
padding: var(--s-3) var(--s-4);
min-height: 48px;
border-radius: var(--r-md, 12px);
border: 1px solid var(--ln-2);
background: rgba(255,255,255,.035);
text-decoration: none; color: inherit;
transition: border-color .3s ease, background .3s ease;
}
.snelcontact__knop:hover,
.snelcontact__knop:focus-visible { border-color: var(--ln-red); background: rgba(255,255,255,.06); }
.snelcontact__icoon {
width: 34px; height: 34px; flex: 0 0 auto;
display: grid; place-items: center;
border-radius: 50%;
background: rgba(255,40,40,.12);
color: var(--c-red-text, #ff5e5e);
}
.snelcontact__knop--wa .snelcontact__icoon { background: rgba(37,211,102,.14); color: #25d366; }
.snelcontact__icoon svg { width: 17px; height: 17px; }
.snelcontact__tekst { display: block; line-height: 1.3; }
.snelcontact__tekst b { display: block; font-size: var(--fs-sm); color: var(--tx-1); }
.snelcontact__tekst small { display: block; font-size: var(--fs-xs); color: var(--tx-3); }
@media (max-width: 860px) {
.snelcontact { grid-template-columns: 1fr; }
.snelcontact__acties { display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
.snelcontact__acties { grid-template-columns: 1fr; }
}
/* ============================================================
15. VERGELIJKING — twee kaarten, één vergelijking
------------------------------------------------------------
Gelijke hoogte, gelijke opbouw, gelijke posities voor titel, prijs en
knop. Alleen de aanbevolen kaart heeft een badge en een iets sterkere
rand. Geen schreeuwerige "beste keuze".
============================================================ */
.vergelijk {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--s-5);
align-items: stretch;
}
.vergelijk__kaart {
position: relative;
display: flex; flex-direction: column;
background: var(--sf-2);
border: 1px solid var(--ln-1);
border-radius: var(--r-xl, 24px);
box-shadow: 0 1px 0 rgba(255,255,255,.035) inset, 0 18px 44px rgba(0,0,0,.42);
overflow: hidden;
}
.vergelijk__kaart--aanbevolen {
border-color: rgba(255, 60, 60, .30);
box-shadow:
0 1px 0 rgba(255,255,255,.05) inset,
0 24px 60px rgba(0,0,0,.5),
0 16px 50px -20px var(--gl-red);
}
.vergelijk__badge {
position: absolute; top: var(--s-4); left: var(--s-4); z-index: 2;
padding: 5px 11px; border-radius: var(--r-pill, 999px);
/* Was rgba(255,30,30,.16): 16% dekking. Dat werkte toen de badge op een
bijna leeg donker vlak stond, maar sinds de foto het hele vak vult
verdween hij in het beeld. Nu een dekkende donkere plaat, zodat hij
leesbaar blijft op elke foto die hier ooit onder komt. */
background: rgba(9,9,11,.86);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
border: 1px solid rgba(255,60,60,.55);
font-family: var(--font-mono); font-size: .64rem;
letter-spacing: .09em; text-transform: uppercase;
color: var(--c-red-text, #ff5e5e);
}
/* Het plaatje was 300x300 in een vak van 594x352: 43% gevuld, met een klein
product midden in een groot leeg vlak. De blokken verderop op de pagina
(.feature-row__media) vullen hun vak wel, dus dit viel uit de toon.
De opvulling is eruit en de foto vult nu de hele plaat, net als daar. */
.vergelijk__media {
background:
radial-gradient(420px 240px at 50% 108%, rgba(125,34,49,.30), transparent 70%),
var(--sf-3);
position: relative;
overflow: hidden;
aspect-ratio: 16 / 10;
}
.vergelijk__kaart--aanbevolen .vergelijk__media {
background:
radial-gradient(420px 240px at 50% 108%, rgba(255,0,0,.22), transparent 70%),
var(--sf-3);
}
.vergelijk__media img {
width: 100%; height: 100%;
object-fit: cover; object-position: center;
display: block;
}
.vergelijk__body { display: flex; flex-direction: column; padding: var(--s-6); flex: 1; }
.vergelijk__titel {
margin: 0 0 var(--s-2);
font-family: var(--font-display); font-weight: var(--fw-med, 500);
font-size: var(--fs-xl); letter-spacing: -0.02em; text-transform: uppercase;
}
.vergelijk__prijs { margin: 0; font-size: var(--fs-3xl); line-height: 1; letter-spacing: -0.03em; }
.vergelijk__kaart--aanbevolen .vergelijk__prijs strong { color: var(--c-red-text, #ff5e5e); }
.vergelijk__prijsnoot { margin: 6px 0 var(--s-4); font-size: var(--fs-xs); color: var(--tx-3); }
.vergelijk__uitleg { margin: 0 0 var(--s-4); font-size: var(--fs-sm); line-height: 1.65; color: var(--tx-2); }
.vergelijk__punten { list-style: none; margin: 0 0 var(--s-5); padding: 0; display: grid; gap: 8px; }
.vergelijk__punten li {
position: relative; padding-left: 22px;
font-size: var(--fs-sm); line-height: 1.5; color: var(--tx-2);
}
.vergelijk__punten li::before {
content: ""; position: absolute; left: 2px; top: .52em;
width: 7px; height: 7px; border-radius: 50%; background: var(--c-red);
}
.vergelijk__punten--neutraal li::before { background: var(--tx-4); }
/* Beide kaarten eindigen op dezelfde lijn. De rechterkaart heeft bewust
een tekstlink in plaats van een knop (dat is geen aankoopactie), maar
krijgt wel dezelfde hoogte zodat de onderkanten uitlijnen. */
.vergelijk__cta { margin-top: auto; align-self: flex-start; }
.vergelijk__kaart .arrow-link.vergelijk__cta {
display: inline-flex; align-items: center; gap: 8px;
min-height: 48px;
}
.vergelijk__voet {
margin: var(--s-5) 0 0; text-align: center;
font-size: var(--fs-sm); color: var(--tx-3);
}
.vergelijk__voet a { color: var(--tx-2); border-bottom: 1px solid var(--c-bordeaux-line, rgba(255,255,255,.2)); }
.vergelijk__voet a:hover { color: #fff; }
/* Onder 820 px hebben twee kaarten naast elkaar te weinig ruimte voor de
productfoto plus de tekst; dan onder elkaar. */
@media (max-width: 820px) {
.vergelijk { grid-template-columns: 1fr; }
/* max-width: 240px stond hier voor de oude opzet, waarin het product klein
en gecentreerd in een leeg vlak stond. Nu de foto de hele plaat vult zou
die regel het plaatje op smallere schermen weer laten zweven. */
}
/* ---- Tekstbreedte ---- */
body.page-home .section-head__lead { max-width: 62ch; }
body.page-home .drift-block p { max-width: 60ch; }
/* De bio-kaart is sinds sectie 16 volle inhoudsbreedte; 60ch liet daar een
groot gat rechts vallen. 72ch blijft binnen de leesbare 45-75 tekens. */
body.page-home .bio-strip p { max-width: 72ch; }
/* ---- Naam en datum in een reviewkaart ----
De opmaak is Jesper2
maanden geleden · Google: duidelijk bedoeld als naam met
het detail eronder. Beide spans stonden echter op display:inline, dus ze
liepen in één tekstregel door: "Jesper2 maanden geleden", met exact 0px
ertussen op elke schermbreedte. Geen overlap, maar wel onleesbaar.
Dit stond er al vóór de veegstrip. */
body.page-home .review-card__name { display: block; }
/* ============================================================
17. REVIEWS OP MOBIEL — veegstrip in plaats van vijf schermen
------------------------------------------------------------
Vijf reviewkaarten onder elkaar zijn op 375px samen 2240px hoog: vijf
volle schermen scrollen door één sectie. Dat is de grootste enkele
post in een pagina die op mobiel 28 schermen lang is.
Bewust NIET opgelost door kaarten te verbergen: dan haal je echte
klantervaringen weg voor precies de bezoekers die op hun telefoon
staan te twijfelen, en verstop je tekst voor crawlers. Alle vijf de
reviews blijven staan; ze liggen alleen naast elkaar in plaats van
onder elkaar.
Dit is géén terugkeer naar de oude carrousel. Die draaide vanzelf en
pauzeerde alleen bij mouse-hover, dus op touch en met het toetsenbord
kon je hem niet stoppen. Deze strip beweegt nooit uit zichzelf: de
bezoeker veegt, of gebruikt Tab. scroll-snap zorgt dat hij netjes op
een kaart uitkomt. De kaart is 86% breed zodat de volgende net zichtbaar
is — dat is de aanwijzing dat er meer staat, zonder extra bolletjes.
============================================================ */
@media (max-width: 680px) {
body.page-home .reviews-grid {
flex-wrap: nowrap;
justify-content: flex-start;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding-bottom: var(--s-3);
/* Overschrijft de min-height uit home.css, die ruimte reserveerde voor
vijf gestapelde kaarten. Onder elkaar was dat terecht; naast elkaar
zou het een leeg gat van ruim 1500px opleveren. */
min-height: 0;
scrollbar-width: thin;
}
body.page-home .reviews-grid > * {
flex: 0 0 86%;
max-width: 86%;
scroll-snap-align: start;
}
/* De strip mag niet zelf de pagina breder maken. */
body.page-home #reviews .container { overflow-x: clip; }
}
/* ============================================================
16. PERSOONLIJK BLOK — uitgelijnd met de rest
------------------------------------------------------------
De bio-kaart stond op max-width 860px en werd gecentreerd. Dat werkte
toen dit blok laag op de pagina stond, tussen smallere onderdelen.
Sinds 03-09-2026 staat het direct tussen de vergelijkingskaarten en
het reviewraster, die allebei de volle inhoudsbreedte gebruiken.
Een kaart die 178px aan weerszijden inspringt leest daar niet als
'gecentreerd' maar als scheef. Hij loopt nu mee met de rest.
De foto krijgt wat meer gewicht zodat de bredere kaart niet leegloopt;
de tekst blijft op 60ch, want dat is de leesbare regellengte.
============================================================ */
body.page-home .bio-strip {
max-width: none;
grid-template-columns: 220px minmax(0, 1fr);
gap: var(--s-6);
}
body.page-home .bio-strip__photo { width: 220px; height: 220px; }
/* Derde kolom: een klein stukje werkplaats naast de tekst. Staand formaat,
zodat het de hoogte van de kaart volgt zonder hem op te rekken. Onder
1100px valt hij weg: dan heeft de tekst de ruimte harder nodig. */
body.page-home .bio-strip { grid-template-columns: 220px minmax(0, 1fr) 150px; }
body.page-home .bio-strip__detail {
width: 150px;
height: 100%;
max-height: 220px;
object-fit: cover;
object-position: center;
border-radius: var(--r-md, 10px);
border: 1px solid var(--ln-1);
display: block;
}
@media (max-width: 1100px) {
body.page-home .bio-strip { grid-template-columns: 220px minmax(0, 1fr); }
body.page-home .bio-strip__detail { display: none; }
}
@media (max-width: 860px) {
body.page-home .bio-strip { grid-template-columns: 1fr; }
body.page-home .bio-strip__photo { width: 160px; height: 160px; }
}
/* ============================================================
18. HEROKOP MET DRIE VASTE REGELS
------------------------------------------------------------
De kop bestaat uit drie zinnen die elk op een eigen regel horen. Met
text-wrap: balance (uit base.css) zou de browser de regels opnieuw
verdelen en de zinnen door elkaar husselen; de
's blijven dan wel
staan maar er komen breaks bij op ongewenste plekken.
De middelste regel is de langste. Op smallere schermen mag die wel
afbreken - dat is beter dan de kop kleiner maken - maar op desktop
krijgt hij genoeg ruimte om heel te blijven.
============================================================ */
body.page-home .hero__title--drie {
text-wrap: initial;
text-align: center;
max-width: none;
/* De langste regel ("Vervang de zwakke plek. Niet je controller.") meet
1391px bij de oorspronkelijke 86px, terwijl de tekstkolom 940px breed is.
Bij 56px past hij op ruim 900px en blijven alle drie de zinnen heel.
De kop is daarmee kleiner dan de vorige eenregelige versie, maar dat is
de prijs van drie zinnen in plaats van een.
De schaal (5,2vw) is zo gekozen dat de regel ook op 1024 en 768 nog heel
blijft: daar is de tekstkolom smaller, maar de kop krimpt evenredig mee.
Onder ongeveer 640px wint de ondergrens van 1,9rem en breken de regels
wel af - dat is beter dan een kop van 25px op een telefoon. */
font-size: clamp(1.9rem, 5.2vw, 3.5rem);
line-height: 1.06;
}
/* Op een telefoon breekt de middelste zin af. Zonder deze regel viel het
woord "Niet" nog aan het eind van de vorige regel, waardoor je las
"vervang de zwakke plek niet" met het onderwerp op de regel erna. De twee
zinshelften blijven nu heel: 181px + 143px past samen op 343px. Op desktop
verandert er niets, daar staat de hele zin toch al op een regel. */
body.page-home .hero__title--drie .bijeen { white-space: nowrap; }
/* ---- Twee links onder 'Voordat je opstuurt' ----
Deze stond op display:block. De twee links stonden daardoor als losse
woorden achter elkaar met alleen de spatie uit de HTML ertussen: gemeten
2px, waardoor "verzendinformatie" en "Alle vragen" aan elkaar plakten.
Een flexrij met een gap zet ze op afstand en laat ze op een smal scherm
netjes onder elkaar vallen. */
body.page-home .home-faq__more {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: var(--s-3) var(--s-6);
}
/* ============================================================
11. VERMINDERDE BEWEGING
============================================================ */
@media (prefers-reduced-motion: reduce) {
body.page-home .route-card,
body.page-home .svc-tile,
body.page-home .console-optie,
body.page-home .build-shot,
body.page-home .btn,
body.page-home .btn svg,
body.page-home .arrow-link svg,
body.page-home .svc-tile__media img,
body.page-home .feature-row__media img,
/* Carrousel: js/foto-carrousel.js springt dan zonder animatie naar de
volgende foto; hier alleen nog het invagen van een geladen foto. */
body.page-home .foto-carrousel__dia img,
body.page-home .foto-carrousel__pijl { transition: none; }
body.page-home .route-card:hover,
body.page-home .svc-tile:hover,
body.page-home .console-optie:hover,
body.page-home .build-shot:hover,
body.page-home .btn--primary:hover { transform: none; }
body.page-home .svc-tile:hover .svc-tile__media img,
body.page-home .feature-row:hover .feature-row__media img { transform: none; }
}