/* Optie1 Hoogeveen — basisstijl
Geen externe afhankelijkheden: geen CDN, geen tracking.
--- Lettertype ---
De site gebruikt bewust géén webfont, maar een moderne systeem-fontstapel
(zie --letter in :root). Elk apparaat toont zo zijn eigen, best leesbare
sans-serif: SF Pro op Apple, Segoe UI op Windows, Roboto op Android. Dat
scheelt een download (snellere pagina), houdt de privacy schoon (er gaat
geen IP-adres naar een lettertype-CDN) en geeft toch de rustige, premium
uitstraling die bij een moderne telecomwinkel past.
De volledige typografie — schaal, gewichten, regelafstand en letterafstand —
staat centraal geregeld in het TYPOGRAFIE-blok in :root hieronder. Pas je die
variabelen aan, dan verandert de hele site mee. */
:root {
/* Huisstijlblauw op verzoek vervangen door het blauw van de Vodafone-banner
(#1976D2, zoals nu op de homepage-hero). Om één toon te houden zonder de
leesbaarheid te breken gebruiken we de Material Blue-familie — die deelt
exact dezelfde kleurtoon:
#2196F3 (500) helder accent · #1976D2 (700) primair · #1565C0 (800) diep.
Wit op #1976D2 haalt 4,6:1, boven de norm van 4,5:1 voor lopende tekst. */
--blauw-accent: #2196f3;
--blauw-kop: #1976d2;
--blauw: #1976d2;
--blauw-knop: #1976d2;
/* Een tint dieper (#1565C0): nodig om op de grijze kaartachtergrond (#f4f5f5)
en op de lichtblauwe tinten de 4,5:1 te halen voor kleine koppen en links. */
--blauw-kop-klein: #1565c0;
--blauw-donker: #1565c0;
--blauw-zacht: #eaf4fe;
--grijs-zacht: #f4f5f5;
/* Eigen lichte tint voor het herovlak en rustige secties. Blijft licht (dit is
géén vol vlak): een lichte versie van hetzelfde blauw. */
--hero-vlak: #e3f2fd;
/* Voorheen twee aparte merkblauwen; nu allebei het primaire #1976D2. Als vol
vlak met witte tekst (hero, seniorenkaart, bovenbalk) haalt wit hierop 4,6:1
en dus de leesnorm van 4,5:1. */
--merkblauw: #1976d2;
--merkblauw-diep: #1976d2;
--tekst: #333333;
--tekst-zacht: #5f5f5f;
--lijn: #d9e6ee;
--wit: #ffffff;
--achtergrond: var(--grijs-zacht);
--radius: 10px;
--max: 1100px;
/* ============================================================
TYPOGRAFIE — centraal geregeld
Eén plek voor lettertype, schaal, gewichten, regelafstand en
letterafstand. Alle koppen en tekst op de site erven hiervan, zodat
de typografie overal consistent is. Apple dient enkel als inspiratie
voor de rustige hiërarchie en leesbaarheid — kleur, layout en merk
blijven die van Optie1.
============================================================ */
/* Moderne systeem-fontstapel. Geen webfont, dus geen download en geen CDN:
elk apparaat toont zijn eigen scherpste sans-serif (SF Pro op Apple,
Segoe UI op Windows, Roboto op Android). Inter staat erin voor het geval
het ooit lokaal wordt meegeleverd. --letter-hero blijft apart zodat de
hero later een eigen letter kan krijgen zonder de rest te raken. */
--letter: "SF Pro Display", Inter, system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--letter-hero: var(--letter);
/* Typografische schaal. clamp(min, groei, max): de max is de maat op een
ruim scherm, de min wat een telefoon te zien krijgt; daartussen schaalt
het vloeiend mee met de schermbreedte. In rem, zodat een bezoeker die zijn
browser groter zet alles mee ziet groeien. */
--fs-hero: clamp(2.5rem, 1.6rem + 4.0vw, 3.75rem); /* 40 → 60 px hero-titel */
--fs-pagina: clamp(2rem, 1.45rem + 2.6vw, 3rem); /* 32 → 48 px paginatitel */
--fs-sectie: clamp(1.6rem, 1.25rem + 1.6vw, 2.25rem); /* 25,6 → 36 px sectietitel */
--fs-subtitel: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); /* 22 → 28 px subtitel (h3) */
--fs-lead: clamp(1.2rem, 1.1rem + 0.4vw, 1.375rem); /* 19,2 → 22 px introtekst */
--fs-body: 1.125rem; /* 18 px lopende tekst */
--fs-knop: 1.0625rem; /* 17 px knoppen */
--fs-nav: 1.125rem; /* 18 px navigatie */
--fs-klein: 0.9375rem; /* 15 px kleine tekst */
--fs-footer: 0.9375rem; /* 15 px footer */
/* Gewichten. Zwaar waar het telt (titels), rustig voor de rest. */
--gewicht-hero: 700;
--gewicht-kop: 600;
--gewicht-subtitel: 500;
--gewicht-body: 400;
/* Regelafstand: ruim voor lopende tekst (prettig lezen), strak voor koppen. */
--lh-body: 1.65;
--lh-kop: 1.15;
--lh-hero: 1.07;
/* Letterafstand. Grote koppen mogen iets dichter op elkaar (oogt strakker en
premium); lopende tekst blijft normaal. Subtiel, nooit opvallend. */
--ls-hero: -0.022em;
--ls-kop: -0.014em;
--ls-subtitel: -0.006em;
--ls-body: 0;
/* Breedte van de openingstijdentabel. Staat hier zodat de tabel en de kop
erboven niet uit elkaar kunnen lopen. */
--tijden-max: 420px;
--schaduw: 0 2px 12px rgba(25, 118, 210, 0.10);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
/* Dun balkje bovenaan elke pagina, in dezelfde tint als het herovlak. Als rand
op de body in plaats van een extra element: scheelt opmaak in zes bestanden. */
border-top: 6px solid var(--merkblauw-diep);
font-family: var(--letter);
/* Basis-leesgrootte en regelafstand komen uit de centrale schaal (zie :root).
Lopende tekst en de introparagrafen erven deze maat; koppen hebben een eigen
maat. */
font-size: var(--fs-body);
font-weight: var(--gewicht-body);
line-height: var(--lh-body);
letter-spacing: var(--ls-body);
color: var(--tekst);
background: var(--achtergrond);
/* Rondere, gelijkmatige letters op scherpe schermen — geeft de rustige,
premium uitstraling die bij deze systeem-fontstapel hoort. */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* Koppen in de huisstijlblauwe tint. Maat, gewicht, regel- en letterafstand
komen uit de centrale schaal, zodat de hiërarchie overal gelijk loopt:
paginatitel (h1) → sectietitel (h2) → subtitel (h3). */
h1, h2, h3 { line-height: var(--lh-kop); margin: 0 0 .5em; }
h1 {
font-size: var(--fs-pagina);
font-weight: var(--gewicht-hero);
letter-spacing: var(--ls-kop);
color: var(--blauw-kop);
}
h2 {
font-size: var(--fs-sectie);
font-weight: var(--gewicht-kop);
letter-spacing: var(--ls-kop);
color: var(--blauw-kop);
}
/* h3 dient als subtitel. In een iets donkerder blauw zodat de kleinere kop op
de grijze en lichtblauwe vlakken de leesnorm (4,5:1) blijft halen. */
h3 {
font-size: var(--fs-subtitel);
font-weight: var(--gewicht-subtitel);
letter-spacing: var(--ls-subtitel);
color: var(--blauw-kop-klein);
}
p { margin: 0 0 1em; }
a { color: var(--blauw-knop); }
a:hover { color: var(--blauw); }
img { max-width: 100%; height: auto; display: block; }
.container {
width: 100%;
max-width: var(--max);
margin-inline: auto;
padding-inline: 20px;
}
/* --- Toegankelijkheid: skiplink --- */
.skiplink {
position: absolute;
left: -9999px;
background: var(--blauw);
color: var(--wit);
padding: 12px 18px;
z-index: 100;
}
.skiplink:focus { left: 12px; top: 12px; }
:focus-visible {
outline: 3px solid var(--blauw-accent);
outline-offset: 2px;
}
/* --- Header / navigatie --- */
.site-header {
background: var(--wit);
border-bottom: 1px solid var(--lijn);
position: sticky;
top: 0;
z-index: 50;
}
.site-header .container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding-block: 14px;
flex-wrap: wrap;
}
.logo {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
}
/* Hoogte stuurt de weergave; width/height in de HTML voorkomen dat de pagina
verspringt terwijl het logo nog laadt. */
.logo img {
height: 64px;
width: auto;
}
.logo-plaats {
font-size: 1.05rem;
font-weight: 700;
color: var(--tekst-zacht);
border-left: 2px solid var(--lijn);
padding-left: 12px;
white-space: nowrap;
}
.site-nav ul {
display: flex;
flex-wrap: wrap;
gap: 4px;
list-style: none;
margin: 0;
padding: 0;
}
/* Kapitalen in het menu, zoals op de moedersite. Kapitalen lezen kleiner dan
gewone letters, dus staat de maat hier hoger dan je zou verwachten. De
ruimere padding is geen versiering: zo wordt elk menu-item ruim 44px hoog en
dus goed raakbaar op een telefoon. */
.site-nav a {
display: block;
padding: 10px 15px;
border-radius: var(--radius);
color: var(--tekst);
text-decoration: none;
font-weight: 600;
font-size: var(--fs-nav);
/* Kapitalen lezen kleiner dan gewone letters; op de navigatiematen halen ze
nét niet dezelfde optische grootte, dus houden we een lichte letterafstand
aan zodat de menu-items rustig en leesbaar blijven. */
text-transform: uppercase;
letter-spacing: .03em;
}
.site-nav a:hover { background: var(--blauw-zacht); color: var(--blauw-knop); }
.site-nav a[aria-current="page"] { background: var(--blauw-knop); color: var(--wit); }
/* --- Knoppen --- */
.knop {
display: inline-block;
padding: 13px 24px;
border-radius: var(--radius);
font-size: var(--fs-knop);
/* 600 in plaats van 700: op de nieuwe fontstapel oogt 700 wat schreeuwerig.
600 houdt de knop duidelijk maar rustig — passend bij de premium look. */
font-weight: 600;
letter-spacing: -0.005em;
text-decoration: none;
border: 2px solid transparent;
transition: background .15s ease, color .15s ease;
}
/* .knop-primair (lichtblauw vlak met donkerblauwe tekst) is hier weggehaald:
de laatste twee knoppen die hem gebruikten staan nu op .knop-blauw. Twee
knopstijlen die zo op elkaar lijken hield alleen maar de vraag levend welke
je waar moest pakken. Terughalen kan uit de Git-geschiedenis. */
.knop-secundair { background: var(--wit); color: var(--blauw); border-color: var(--blauw); }
.knop-secundair:hover { background: var(--blauw); color: var(--wit); }
.knop-whatsapp { background: #25d366; color: var(--wit); }
.knop-whatsapp:hover { background: #1eb455; color: var(--wit); }
/* Vol blauw vlak met witte tekst — dezelfde look als `.knop-secundair` in
hover, maar dan als vaste staat. Bewust --blauw-knop (#0077b3) en niet
--blauw (#008bcb): wit op --blauw haalt maar 3,8:1 en dat is te weinig voor
knoptekst van deze grootte. Op --blauw-knop is het 4,9:1. Het kleurverschil
is nauwelijks te zien, het leesbaarheidsverschil wel. */
.knop-blauw { background: var(--blauw-knop); color: var(--wit); }
.knop-blauw:hover { background: var(--blauw-donker); color: var(--wit); }
/* Merkrood van Vodafone (#E60000), hetzelfde rood als `.tijden .gesloten`
verderop, zodat de site niet twee net iets verschillende roden krijgt.
Wit op #E60000 haalt 4,8:1, boven de norm van 4,5:1 voor gewone tekst;
de hovertint #BD0000 is donkerder en haalt 6,6:1. */
.knop-rood { background: #e60000; color: var(--wit); }
.knop-rood:hover { background: #bd0000; color: var(--wit); }
/* Zwevende contactknop, rechtsonder in beeld. Blijft staan tijdens het
scrollen, als vaste snelkoppeling naar de contactpagina. Kleur en hover
komen van .knop-rood; deze regels doen alleen de plaatsing, de pilvorm en
de schaduw die hem van de pagina laat loskomen. Staat alleen op de
homepage. */
.knop-zwevend {
position: fixed;
right: 18px;
bottom: 18px;
z-index: 60;
border-radius: 999px;
box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
}
.knop-zwevend:hover,
.knop-zwevend:focus-visible { transform: translateY(-2px); }
.knop-zwevend:focus-visible { outline: 3px solid var(--wit); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
.knop-zwevend:hover,
.knop-zwevend:focus-visible { transform: none; }
}
/* Op smalle schermen iets compacter, zodat hij niet te veel van het scherm
inneemt en geen invoerveld of knop onder zich bedekt. */
@media (max-width: 480px) {
.knop-zwevend { right: 12px; bottom: 12px; padding: 12px 18px; }
}
/* --- Ronde contactknoppen ---
Overgenomen van de coming soon-pagina. De iconen zijn inline SVG: geen
iconenlettertype en geen extra bestanden, zodat de site zonder externe
afhankelijkheden blijft werken. */
/* Gecentreerd boven de iconenrij. Beide staan in dezelfde container en zijn
allebei op het midden uitgelijnd, dus de kop komt precies boven de middelste
knop uit — ook als de rij op een smal scherm afbreekt. */
.contact-iconen {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: clamp(24px, 6vw, 56px);
}
.icoon-knop {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
text-decoration: none;
}
.icoon-cirkel {
width: clamp(70px, 12vw, 90px);
height: clamp(70px, 12vw, 90px);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 20px rgba(0, 0, 0, .15);
transition: transform .15s ease;
}
.icoon-knop:hover .icoon-cirkel,
.icoon-knop:focus-visible .icoon-cirkel { transform: scale(1.08); }
/* Beweging uitzetten voor wie daar in de systeeminstellingen om vraagt. */
@media (prefers-reduced-motion: reduce) {
.icoon-cirkel { transition: none; }
.icoon-knop:hover .icoon-cirkel { transform: none; }
}
.cirkel-whatsapp { background: #25d366; }
.cirkel-bellen { background: #29aae1; }
.cirkel-email { background: #e60000; }
.icoon-label {
font-size: clamp(12px, 3vw, 14px);
font-weight: 700;
color: var(--blauw-donker);
text-align: center;
}
.knoppen { display: flex; flex-wrap: wrap; gap: 12px; }
/* --- Hero ---
De volle merkblauwe balk, zoals op optie1.nl. --merkblauw-diep en niet
--merkblauw: op de diepe tint haalt witte lopende tekst 4,7:1, ruim boven de
norm. Op de lichtere merkblauw zou de introtekst maar 3,5:1 halen. Eén tint
voor de hele balk oogt rustiger dan een kop in een net iets ander blauw.
Gecentreerd: zonder afbeelding ernaast leest links uitgelijnde tekst als een
halfleeg vlak; gecentreerd vult de hero zichzelf optisch op. */
.hero {
background: var(--merkblauw-diep);
border-bottom: 0;
padding-block: clamp(48px, 8vw, 88px);
text-align: center;
}
/* Standaard krijgt een hero-titel de paginatitel-maat (48px): rustig en
passend voor de secundaire pagina's (Contact, Over ons, Senioren …). De
homepage-hero hieronder gaat naar de volle hero-maat (60px). */
.hero h1 {
color: var(--wit);
max-width: 20ch;
margin-inline: auto;
/* Eigen variabele, al staat daar nu dezelfde letter in als in --letter.
Zo blijft het één plek om aan te draaien als de hero ooit een eigen
letter moet krijgen. */
font-family: var(--letter-hero);
font-size: var(--fs-pagina);
font-weight: var(--gewicht-hero);
line-height: var(--lh-hero);
letter-spacing: var(--ls-hero);
}
/* Alleen de homepage-hero (de slider zónder split-layout) krijgt de grootste
maat van de site: dat is de etalage. De reparatiepagina deelt de slider maar
heeft een split-layout en houdt daarom de rustiger paginatitel-maat. */
.hero-slider:not(.hero-split) h1 {
font-size: var(--fs-hero);
max-width: 16ch;
}
/* Tweekleurige kop op de homepage, nu op de blauwe balk: het sterke deel vol
wit, het zachte deel een lichte blauwtint zodat het onderscheid blijft
zonder de leesbaarheid te schaden. #cfe9f7 op --merkblauw-diep haalt 3,6:1,
ruim boven de 3:1 voor deze grote tekst. */
.hero h1 .kop-sterk { color: var(--wit); }
.hero h1 .kop-zacht { color: #cfe9f7; }
/* De twee delen staan op eigen regels zonder
: dat laat de tussenruimte
hieronder los instellen. Met een
zou die vastzitten aan line-height, en
dan schuift de regelafstand bínnen een deel net zo hard mee. In em, zodat de
ruimte meeschaalt met de kopgrootte. */
.hero h1 .kop-sterk,
.hero h1 .kop-zacht { display: block; }
.hero h1 .kop-zacht { margin-top: 0.28em; }
/* --- Hero-slider (alleen op de homepage) ---
De dia's liggen alle vier in dezelfde grid-cel, dus op elkaar. Daardoor is
het vak altijd zo hoog als de langste dia en springt de pagina niet op bij
het wisselen — de klassieke ergernis van een slider.
Verbergen gebeurt met visibility en niet met display: zo blijven de dia's
meetellen voor de hoogte, terwijl ze wél uit de voorleesvolgorde en uit de
tabvolgorde verdwijnen. Een verborgen dia mag geen link bevatten die je met
Tab kunt bereiken maar niet kunt zien. */
.dias { display: grid; }
.dia {
grid-area: 1 / 1;
visibility: hidden;
opacity: 0;
transition: opacity .45s ease;
}
.dia.is-actief {
visibility: visible;
opacity: 1;
}
/* Wie bewegende beelden heeft uitgezet in zijn systeeminstellingen, krijgt
geen overvloeier. Het script zet ook het automatisch doorschuiven uit. */
@media (prefers-reduced-motion: reduce) {
.dia { transition: none; }
}
.hero-knoppen { justify-content: center; margin-top: 26px; }
/* Witte knop op het blauwe vlak, met zwarte tekst: 21:1, het hoogste contrast
dat er te halen valt. Stond eerder op --blauw-knop (4,9:1). */
.knop-op-blauw {
background: var(--wit);
color: #000000;
}
.knop-op-blauw:hover {
background: var(--hero-vlak);
color: #000000;
}
/* --- Bediening onder de dia's --- */
.slider-bediening {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin-top: 32px;
}
.slider-bediening[hidden] { display: none; }
/* Ruim bemeten: 44px is de ondergrens voor iets wat je met een vinger moet
raken, en dit zijn de kleinste knoppen van de site. */
.slider-pijl,
.slider-pauze {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: 2px solid transparent;
border-radius: 50%;
background: transparent;
color: var(--wit);
cursor: pointer;
}
.slider-pijl:hover,
.slider-pauze:hover { background: rgba(255, 255, 255, .18); }
/* Pauze- en afspeelicoon wisselen via een klasse op de knop. Het `hidden`-
attribuut werkt niet op elementen binnen een SVG, vandaar deze regels. */
.slider-pauze .icoon-afspelen { display: none; }
.slider-pauze.is-gepauzeerd .icoon-pauze { display: none; }
.slider-pauze.is-gepauzeerd .icoon-afspelen { display: inline; }
/* De stippen zitten in een eigen rij zodat de pijlen ernaast blijven staan,
ook als er ooit een dia bij komt. */
.slider-stippen {
display: flex;
align-items: center;
gap: 4px;
}
/* De stip zelf is klein, maar de knop eromheen is 44px: het raakvlak mag niet
zo klein zijn als wat je ziet. */
.slider-stip {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
}
.slider-stip::before {
content: "";
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, .45);
transition: background .2s ease, transform .2s ease;
}
.slider-stip:hover::before { background: rgba(255, 255, 255, .75); }
.slider-stip[aria-current="true"]::before {
background: var(--wit);
transform: scale(1.25);
}
/* Zichtbare focusrand: wie met Tab door de pagina gaat moet kunnen zien waar
hij is. Wit, want dit staat allemaal op het blauwe vlak. */
.slider-pijl:focus-visible,
.slider-pauze:focus-visible,
.slider-stip:focus-visible {
outline: 3px solid var(--wit);
outline-offset: 2px;
}
.hero p { font-size: var(--fs-lead); line-height: 1.5; max-width: 55ch; color: var(--wit); margin-inline: auto; }
.hero .knoppen { margin-top: 28px; justify-content: center; }
/* --- Secties --- */
.sectie { padding-block: clamp(40px, 6vw, 72px); }
.sectie-wit { background: var(--wit); }
.sectie-kop { max-width: 60ch; margin-bottom: 32px; }
/* Introtekst onder een sectietitel: iets groter dan de lopende tekst (lead),
in de zachtere tekstkleur. Geeft lucht en leidt rustig het onderwerp in. */
.sectie-kop p,
.sectie-kop-midden p { font-size: var(--fs-lead); line-height: 1.55; color: var(--tekst-zacht); }
/* --- Kaartenraster --- */
.raster {
display: grid;
/* 230px zodat de vier dienstenkaartjes op een breed scherm op één rij passen
in plaats van dat er één alleen op de tweede rij achterblijft. */
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 22px;
}
/* Vast aantal kolommen in plaats van auto-fit. Voor de zes providerkaarten:
auto-fit maakt er op een breed scherm vier van, en dan blijven er twee
alleen op de tweede rij achter. Drie kolommen geeft 3 + 3, twee geeft
3 x 2 — bij elke breedte dus een volle rij. minmax(0, 1fr) en niet 1fr:
anders kan een brede afbeelding de kolom oprekken. */
.raster-drie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kaart {
background: var(--wit);
border: 1px solid var(--lijn);
border-radius: var(--radius);
padding: 26px;
box-shadow: var(--schaduw);
}
.sectie-wit .kaart { background: var(--achtergrond); }
/* Klachtenkaarten op reparaties.html in de huisstijltint van de hero, zodat de
rij aansluit op het vlak erboven. Staat ná `.sectie-wit .kaart` omdat die
regel even specifiek is; de laatste wint dan. Tekstkleuren zijn nagemeten op
deze ondergrond: de kopjes halen 5,0:1 en de lopende tekst 11:1. */
.raster-klachten .kaart { background: var(--hero-vlak); text-align: center; }
.kaart h3 { color: var(--blauw-kop-klein); }
.kaart p:last-child { margin-bottom: 0; }
/* --- Dienstkaarten ---
Kaart met een rond icoon erboven, alles gecentreerd. Het icoon is inline SVG,
net als bij de contactknoppen: geen iconenlettertype, geen extra bestanden. */
.kaart-dienst {
text-align: center;
/* Zelfde tijd en curve als de contactcirkels hierboven, zodat de site
overal even snel reageert. */
transition: transform .15s ease, box-shadow .15s ease;
}
/* In de huisstijltint, dezelfde als het herovlak. Even specifiek als de regel
`.sectie-wit .kaart` hierboven, anders wint die en blijft de kaart grijs. */
.sectie-wit .kaart-dienst { background: var(--hero-vlak); }
/* De kaart komt iets omhoog en de schaduw wordt dieper, alsof hij van de pagina
loskomt. `focus-within` staat erbij omdat de kaart een link bevat: wie met de
tab-toets navigeert krijgt dan hetzelfde signaal als met de muis. */
.kaart-dienst:hover,
.kaart-dienst:focus-within {
transform: translateY(-5px);
box-shadow: 0 10px 24px rgba(25, 118, 210, .22);
}
/* Beweging uitzetten voor wie daar in de systeeminstellingen om vraagt. De
schaduw blijft wel: dat is geen beweging en houdt de kaart aanwijsbaar. */
@media (prefers-reduced-motion: reduce) {
.kaart-dienst { transition: box-shadow .15s ease; }
.kaart-dienst:hover,
.kaart-dienst:focus-within { transform: none; }
}
/* Op deze tint haalt --blauw-knop nog maar 4,3:1 en zakt daarmee onder de
4,5:1 die gewone tekst nodig heeft. --blauw-donker haalt 6,6:1. */
.kaart-dienst a { color: var(--blauw-donker); }
.dienst-icoon {
width: 56px;
height: 56px;
border-radius: 50%;
/* Witte cirkel met een zwart symbool. Een subtiele rand tekent de witte
cirkel af, ook op de lichtblauwe tintkaarten (waar wit-op-tint anders te
zwak zou zijn). Op een eventueel blauw vlak valt de lichte rand weg. */
background: var(--wit);
border: 1px solid var(--lijn);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 14px;
}
/* De iconen dragen inline `fill="white"`; deze regel overschrijft dat naar
zwart (CSS wint van het presentatie-attribuut), zodat het symbool op de
witte cirkel leesbaar is. */
.dienst-icoon svg { fill: #000000; }
.sectie-kop-midden {
text-align: center;
max-width: 55ch;
margin: 0 auto 32px;
}
/* Providerkaarten blijven wit, ook in een witte sectie. De algemene regel
`.sectie-wit .kaart` maakt kaarten daar juist grijs, maar dat werkt hier
averechts: hollandsnieuwe is een JPG en heeft dus een witte achtergrond
die je niet weg kunt maken. Op een grijze kaart tekent die zich af als een
wit blok. Rand én schaduw zijn er bewust af: een vlakke, rustige weergave
waarbij alleen het logo en de tekst op wit staan. */
.sectie-wit .kaart-provider { background: var(--wit); border: 0; box-shadow: none; }
/* --- Providerkaarten (abonnementenpagina) ---
Het merkvlak heeft een vaste hoogte, zodat de kaarten even hoog blijven of er
nu tekst of straks een logo in staat. Wisselt de inhoud naar een ![]()
, dan
schaalt die mee binnen dezelfde ruimte en verspringt de opmaak niet. */
.provider-merk {
display: flex;
align-items: center;
justify-content: center;
/* Vaste hoogte voor alle zes, zodat de koppen van de kaarten op één lijn
blijven. De aangeleverde logo's verschillen sterk in verhouding — van
vierkant (Ben, Odido, Lebara) tot liggend (KPN, Vodafone) — en zonder
vaste hoogte zou elke kaart een andere maat krijgen. */
height: 120px;
margin: 0 0 14px;
padding: 6px;
/* Geen eigen vlak en geen rand: het logo staat direct op de kaart. Een kader
om een logo dat zelf al een gekleurd vlak heeft (KPN, Ben, Odido) levert
een rand om een rand op. De vaste hoogte hierboven houdt de kaarten
alsnog even hoog. */
/* Opmaak voor de alt-tekst, zichtbaar als een afbeelding niet laadt. */
font-size: 1.1rem;
font-weight: 700;
color: var(--blauw-kop-klein);
}
/* `contain` en niet `cover`: bijsnijden zou bij een liggend logo als KPN de
merknaam half wegsnijden. Zo blijft elk logo altijd volledig zichtbaar. */
.provider-merk img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
}
/* Losse kaart onder het raster: valt op als afsluiter en niet als zevende
provider. Vandaar de huisstijltint van de hero, dezelfde als de
klachtenkaarten op reparaties.html. */
.kaart-overstap {
margin-top: 22px;
background: var(--hero-vlak);
}
/* Nodig omdat `.sectie-wit .kaart` twee klassen telt en `.kaart-overstap`
maar één: die regel is specifieker en wint dus altijd, ongeacht de volgorde
in dit bestand. Deze selector is even specifiek én staat erna, en houdt de
kaart daarmee blauw in een witte sectie. */
.sectie-wit .kaart-overstap { background: var(--hero-vlak); }
/* --- Openingstijden --- */
.tijden {
width: 100%;
border-collapse: collapse;
max-width: var(--tijden-max);
}
/* Kop gecentreerd bóven de tabel. Dezelfde max-width als .tijden zelf: zonder
die begrenzing centreert de kop over de hele kolom en staat hij scheef
boven een tabel die smaller is. */
.tijden-kop {
max-width: var(--tijden-max);
text-align: center;
}
.tijden th, .tijden td {
text-align: left;
padding: 9px 4px;
border-bottom: 1px solid var(--lijn);
}
.tijden th { font-weight: 600; }
/* Zelfde gewicht én kleur als de dagen ernaast, zodat de twee kolommen even
zwaar wegen. `.tijden .gesloten` verderop is specifieker en houdt zijn rood. */
.tijden td { text-align: right; color: var(--tekst); font-weight: 600; }
.tijden .gesloten { color: #e60000; }
/* --- Lijst met vinkjes --- */
.vinklijst { list-style: none; padding: 0; margin: 0 0 1em; }
.vinklijst li {
padding-left: 30px;
position: relative;
margin-bottom: 10px;
}
.vinklijst li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--blauw-accent);
font-weight: 800;
}
/* Pagina waarvan de inhoud volledig wit is (afspraak.html, reparaties.html). De footer
houdt `margin-top: 40px`; in die strook kijk je door naar de paginakleur.
Staat die op het gebruikelijke grijs, dan zie je vlak boven de footer een
grijze band onder een verder witte pagina. Vandaar hier wit. */
.pagina-wit { background: var(--wit); }
/* --- Formulier (afspraak.html) ---
Eén kolom, ook op een breed scherm: velden naast elkaar zetten leest
slechter en levert op een telefoon toch weer één kolom op. De maat is
afgestemd op de langste invoer (merk en model), niet op de paginabreedte. */
.formulier {
max-width: 34rem;
margin-inline: auto;
}
.veld { margin-bottom: 20px; }
.veld label {
display: block;
font-weight: 600;
margin-bottom: 6px;
color: var(--blauw-donker);
}
.veld-optioneel { font-weight: 400; color: var(--tekst-zacht); }
/* Uitleg onder een invoerveld. Bewust bijna zo groot als de lopende tekst en
in de gewone tekstkleur: dit is geen kleine lettertjes maar informatie die
iemand nodig heeft om het veld goed in te vullen. Op .9rem in --tekst-zacht
las het als een voetnoot die je mocht overslaan. */
.veld-uitleg {
font-size: 1.05rem;
color: var(--tekst);
margin: 8px 0 0;
}
/* 16px is hier geen smaakkwestie: op iOS zoomt Safari automatisch in zodra
een invoerveld kleiner dan 16px scherpstelt, en dan springt de hele
pagina scheef. */
.veld input,
.veld select,
.veld textarea {
width: 100%;
font: inherit;
font-size: 16px;
padding: 12px 14px;
border: 2px solid var(--lijn);
border-radius: var(--radius);
background: var(--wit);
color: var(--tekst);
}
.veld textarea { resize: vertical; min-height: 120px; }
.veld input:focus,
.veld select:focus,
.veld textarea:focus { border-color: var(--blauw); }
/* Staat de lijst met tijden nog uit, dan hoort hij daar ook uit te zien.
Zonder dit verschil lijkt het veld gewoon leeg en gaan mensen erop klikken. */
.veld select:disabled {
background: var(--achtergrond);
color: var(--tekst-zacht);
cursor: not-allowed;
}
/* --- Toestelkaarten op de webshoppagina ---
Opbouw en verhoudingen zijn afgekeken van de moedersite optie1.nl: merk
groot en blauw, model kleiner en grijs eronder, dan de foto, dan de
gegevens, en onderaan de knop. De kleuren komen uit onze eigen variabelen
en niet uit hun stylesheet, zodat deze pagina bij de rest van de site blijft
passen en niet los gaat zweven.
Flexkolom zodat de reserveerknop onderaan uitlijnt, ook als de ene kaart een
langere modelnaam heeft dan de andere. Zonder dit zweeft elke knop op een
eigen hoogte en oogt de rij rommelig. */
.kaart-toestel {
display: flex;
flex-direction: column;
text-align: center;
/* Ruimere ronding dan de andere kaarten, zoals op optie1.nl. */
border-radius: 22px;
}
/* De laatste alinea bevat de knop. `margin-top: auto` duwt die naar beneden;
de ruimte die overblijft komt dus bóven de knop terecht. */
.kaart-toestel > p:last-child {
margin-top: auto;
margin-bottom: 0;
padding-top: 16px;
}
/* Merk en model staan samen in één h3: een kop hoort het product te benoemen,
en een schermlezer leest zo "Samsung Galaxy S26" in één keer voor. Het
verschil in grootte en kleur is puur opmaak. */
.toestel-naam { margin-bottom: 14px; }
.toestel-merk,
.toestel-model { display: block; }
.toestel-merk {
font-size: 1.4rem;
font-weight: 600;
color: var(--blauw);
line-height: 1.2;
}
.toestel-model {
font-size: 1.05rem;
font-weight: 400;
color: var(--tekst-zacht);
margin-top: 2px;
}
/* Vak waar de productfoto komt. Een vaste verhouding houdt de kaarten even
hoog zolang de foto's er nog niet zijn, zodat de rij nu al klopt. Zodra er
een ![]()
in staat, valt de stippellijn en de tekst vanzelf weg. */
.toestel-foto {
aspect-ratio: 1 / 1;
display: grid;
place-items: center;
margin-bottom: 14px;
border: 2px dashed var(--lijn);
border-radius: var(--radius);
color: var(--tekst-zacht);
font-size: .85rem;
}
.toestel-foto img {
width: 100%;
height: 100%;
object-fit: contain;
}
.toestel-foto:has(img) {
border: 0;
}
.toestel-specs {
font-size: var(--fs-klein);
color: var(--tekst-zacht);
margin-bottom: 10px;
}
.toestel-prijs {
font-size: 1.25rem;
font-weight: 700;
color: var(--blauw-donker);
margin-bottom: 12px;
}
.toestel-vraag {
font-weight: 700;
color: var(--blauw-donker);
margin-bottom: 0;
}
/* De knop vult de kaart in de breedte: zes kaarten naast elkaar met elk een
even brede knop leest rustiger dan zes knoppen op modelnaamlengte. */
.kaart-toestel .knop-reserveer { width: 100%; }
/* De twee knoppen onder het afspraakformulier even breed, naast elkaar en
samen gecentreerd. `flex: 1 1 12rem` doet het werk: gelijke basisbreedte
plus gelijke groei betekent dat ze even breed eindigen, hoe lang de tekst
erin ook is. Anders wordt de knop met het langste opschrift de breedste en
staat het paar scheef onder het formulier.
De 12rem is ook de omslag naar onder elkaar: passen ze samen niet meer op
een regel, dan breekt de rij en neemt elke knop zijn eigen regel. Op een
telefoon hoeft daar dus geen media query voor. */
.knoppen-formulier { justify-content: center; }
.knoppen-formulier .knop {
flex: 1 1 12rem;
text-align: center;
}
/* --- Dag en tijd op het afspraakformulier ---
Een fieldset omdat de twee velden samen één vraag beantwoorden; een
schermlezer noemt de legend dan bij allebei. De browserstandaard voor
fieldset (rand, eigen marges) staat uit, zodat het blok er hetzelfde
uitziet als de andere velden eromheen. */
.veld-groep {
border: 0;
padding: 0;
margin-inline: 0;
min-width: 0;
}
.veld-groep legend {
padding: 0;
font-weight: 600;
margin-bottom: 6px;
color: var(--blauw-donker);
}
/* De twee velden naast elkaar, en onder elkaar zodra dat niet meer past.
Geen media query nodig: onder de 22rem valt de tweede kolom vanzelf weg. */
.veld-duo {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
gap: 14px;
}
/* Kleiner dan de legend erboven: dit zijn onderdelen van die ene vraag, geen
losse vragen. */
.veld-duo label {
display: block;
font-weight: 400;
font-size: .9rem;
margin-bottom: 4px;
color: var(--tekst-zacht);
}
/* Buiten beeld maar wél invulbaar voor een bot. Bewust niet `display: none`
of `hidden`: veel bots slaan velden over die echt verborgen zijn, en dan
vangt de honeypot niets. */
.honeypot {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.formulier-fout {
background: #fdecea;
border-left: 5px solid #e60000;
border-radius: var(--radius);
padding: 14px 16px;
margin-bottom: 20px;
color: #7a1a14;
font-weight: 600;
}
/* Toelichting onder de verzendknoppen. Zelfde maat en kleur als .veld-uitleg:
hier staat wat er gebeurt als je op de knop drukt en wat er met je gegevens
gebeurt, en juist dat moet iemand kunnen lezen voordat hij klikt. */
.formulier-klein {
font-size: 1.05rem;
color: var(--tekst);
margin-top: 18px;
}
.formulier-gelukt {
max-width: 34rem;
margin-inline: auto;
background: var(--blauw-zacht);
border-left: 5px solid var(--blauw-accent);
border-radius: var(--radius);
padding: 28px;
}
.formulier-gelukt h3 { margin-top: 0; }
.formulier-gelukt p:last-child { margin-bottom: 0; }
/* --- Twee kolommen --- */
.kolommen {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 36px;
align-items: start;
}
/* --- Contactgegevens op contact.html ---
Bewust groter dan de lopende tekst elders: dit is waarvoor mensen de pagina
openen, en een adres of telefoonnummer moet je in één oogopslag kunnen
overnemen — vaak terwijl je al aan het bellen bent. */
.gegevens p {
font-size: 1.15rem;
line-height: 1.7;
margin-bottom: 1.5em;
/* Zwart in plaats van de --tekst-grijs (#333) van de rest van de site.
Op wit is dat 21:1 contrast, het maximum dat er te halen valt. */
color: #000000;
}
/* Ook de links zwart. Ze blijven onderstreept, en dat is wat een link
herkenbaar maakt — kleur alleen is nooit genoeg, want daar heeft iemand die
kleuren slecht onderscheidt niets aan. Let op: dit geldt alleen binnen dit
blok; elders op de site blijven links blauw. */
.gegevens a {
color: #000000;
text-decoration: underline;
}
.gegevens a:hover { color: var(--blauw-knop); }
/* Het label op een eigen regel, met lucht eronder. Zo vallen de vier blokjes
uit elkaar in plaats van één grijze massa te vormen. De
die hier eerst
achter stond is uit de HTML gehaald; die zou nu een lege regel geven. */
.gegevens strong {
display: block;
margin-bottom: 1px;
}
/* Het telefoonnummer is de belangrijkste regel van de pagina: de meeste
klanten bellen liever dan dat ze een formulier invullen. */
.gegevens .nummer {
font-size: 1.35rem;
font-weight: 700;
}
/* --- Oproepblok --- */
.oproep {
background: var(--wit);
border: 1px solid var(--lijn);
/* De blauwe accentbalk links blijft; die houdt het blok bij de merkkleur.
Een dunne rand eromheen erbij, zodat het witte blok zich losmaakt van de
grijze sectie eronder. */
border-left: 5px solid var(--blauw-accent);
border-radius: var(--radius);
padding: 28px;
}
.oproep h2 { margin-top: 0; }
/* --- Prijstabel --- */
.prijzen { width: 100%; border-collapse: collapse; }
.prijzen th, .prijzen td {
text-align: left;
padding: 12px 8px;
border-bottom: 1px solid var(--lijn);
}
.prijzen thead th { background: var(--blauw-zacht); color: var(--blauw); }
/* --- Footer ---
Dezelfde tint als het herovlak, zodat pagina-boven en pagina-onder op elkaar
rijmen. De tekst stond hier al donker; op deze lichtere achtergrond wordt dat
alleen maar beter leesbaar. De randlijn scheidt de footer van de body: die
twee kleuren liggen dicht bij elkaar en lopen anders in elkaar over. */
.site-footer {
/* Zelfde merkblauw als de hero en het balkje bovenaan, zodat de pagina
boven en onder in dezelfde kleur wordt afgesloten. Witte tekst haalt op
deze tint 4,7:1. */
background: var(--merkblauw-diep);
border-top: 0;
color: var(--wit);
/* Smalle balk: er staat alleen nog het webadres in. */
padding-block: 10px;
margin-top: 40px;
font-size: var(--fs-footer);
}
.site-footer h3 { color: var(--wit); font-size: 1rem; }
.site-footer a { color: var(--wit); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 7px; }
.footer-raster {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 32px;
}
/* Het webadres tot aan de echte rechterrand van de blauwe balk. De footer laat
daarvoor de contentbreedte van 1100px los: anders stopt de tekst bij die
grens en blijft er op brede schermen blauw naast staan. De padding van
.container (20px) houdt hem net van de rand af. */
.site-footer .container { max-width: none; }
.copyright {
margin: 0;
text-align: right;
font-size: var(--fs-footer);
color: var(--wit);
}
/* --- Invulmarkering: MOET vervangen worden voor livegang --- */
.invullen {
background: #fff3cd;
color: #7a5b00;
border: 1px dashed #b58900;
padding: 2px 7px;
border-radius: 4px;
font-weight: 700;
font-size: .9em;
}
/* --- Providerbalk --- */
.providerbalk {
background: var(--wit);
border-bottom: 1px solid var(--lijn);
padding-block: 22px;
}
.providerbalk .container {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 12px 16px;
}
.providerbalk p {
margin: 0;
font-weight: 600;
color: var(--tekst-zacht);
}
.provider {
background: var(--blauw-zacht);
border: 1px solid #cfe9f7;
border-radius: 999px;
padding: 7px 18px;
font-weight: 600;
color: var(--blauw-kop-klein);
font-size: var(--fs-klein);
}
/* Merken op de homepage: dezelfde pil-vorm als .provider, maar als lijst zodat
het ook zonder opmaak een nette opsomming blijft. */
.merkenlijst {
list-style: none;
padding: 0;
margin: 0 0 22px;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
/* Kaart die de seniorentoestellen apart licht uit. Vol merkblauw met witte
tekst, zodat hij op de witte sectie eruit springt. --merkblauw-diep en niet
--merkblauw: op de diepe tint haalt de witte lopende tekst 4,7:1, ruim boven
de leesnorm. Met de sectie-prefix omdat `.sectie-wit .kaart` twee klassen
telt en die anders wint (net als bij .kaart-dienst en .kaart-provider). */
.sectie-wit .kaart-senioren {
background: var(--merkblauw-diep);
border-color: var(--merkblauw-diep);
}
.kaart-senioren h3,
.kaart-senioren p { color: var(--wit); }
.kaart-senioren h3 { margin-bottom: .4em; }
.kaart-senioren p:last-child { margin-bottom: 0; }
/* --- Uitgelichte band (donkere sectie voor ritme in de pagina) --- */
.band {
background: var(--blauw-donker);
color: #dbeef8;
padding-block: clamp(40px, 6vw, 64px);
}
.band h2, .band h3 { color: var(--wit); }
.band .kaart {
background: rgba(255, 255, 255, .08);
border-color: rgba(255, 255, 255, .18);
box-shadow: none;
color: #dbeef8;
}
.band .kaart h3 { color: var(--wit); }
.stappen {
list-style: none;
counter-reset: stap;
padding: 0;
margin: 0;
}
.stappen li {
counter-increment: stap;
position: relative;
padding-left: 46px;
margin-bottom: 18px;
}
.stappen li::before {
content: counter(stap);
position: absolute;
left: 0;
top: -1px;
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--blauw-accent);
color: #04283a;
font-weight: 800;
display: grid;
place-items: center;
}
/* --- Menuknop voor smalle schermen ---
De knop staat in de HTML op hidden en wordt pas door site.js zichtbaar
gemaakt. Zo blijft het menu zonder JavaScript gewoon volledig zichtbaar
in plaats van onbereikbaar achter een knop die niets doet. */
.menu-knop {
display: none;
align-items: center;
gap: 9px;
background: var(--wit);
border: 2px solid var(--blauw-knop);
color: var(--blauw-knop);
border-radius: var(--radius);
padding: 10px 16px;
font: inherit;
font-weight: 700;
font-size: .9rem;
text-transform: uppercase;
letter-spacing: .04em;
cursor: pointer;
/* Minimaal 44px hoog: kleiner is lastig te raken met een vinger. */
min-height: 44px;
}
.menu-knop:hover { background: var(--blauw-knop); color: var(--wit); }
.menu-streepjes { display: grid; gap: 4px; }
.menu-streepjes span {
display: block;
width: 20px;
height: 2px;
background: currentColor;
}
@media (max-width: 992px) {
/* Omslagpunt naar het hamburger-menu. Op 992px in plaats van 860px: de
navigatie staat nu op 18px (grotere, rustiger letter) en heeft samen met
het logo ruim 990px nodig om op één regel te passen. Zou het menu pas bij
860px inklappen, dan viel de navigatie er net boven op een tweede regel —
een rommelige, tweeregelige header. Nu blijft de kop boven 992px strak op
één regel en verschijnt eronder het nette uitklapmenu.
Blijft `wrap` (net als op breed scherm). Met `nowrap` kan het uitgeklapte
menu niet naar een eigen regel: het blijft dan naast de knop staan op
dezelfde rij en drukt het logo samen tot een paar pixels breed. De
`width: 100%` en `order: 3` op .site-nav hieronder rekenen op wrap. */
.site-header .container {
justify-content: space-between;
gap: 12px;
}
.menu-knop[hidden] { display: none; }
.menu-knop { display: inline-flex; }
/* Alleen inklappen als het script draait; anders blijft het menu staan. */
.js-menu .site-nav {
display: none;
width: 100%;
order: 3;
}
.js-menu .site-nav.is-open { display: block; }
.js-menu .site-nav ul {
flex-direction: column;
gap: 2px;
padding-top: 10px;
border-top: 1px solid var(--lijn);
margin-top: 12px;
}
.js-menu .site-nav a {
padding: 13px 14px;
font-size: var(--fs-nav);
}
.logo img { height: 52px; }
.logo-plaats { font-size: .95rem; padding-left: 10px; }
/* Links in de kaartjes zijn als tekstregel maar ~22px hoog. Met extra
ruimte eromheen worden ze 44px en dus met een vinger te raken. */
.kaart a {
display: inline-block;
padding-block: 11px;
}
.raster-drie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
/* Lopende tekst blijft ook op de telefoon de volle 18px (--fs-body): rustig
en goed leesbaar, ook voor de seniorendoelgroep. De koppen schalen al
vloeiend mee via clamp(). */
.knoppen .knop { flex: 1 1 auto; text-align: center; }
.providerbalk p { width: 100%; text-align: center; }
.logo img { height: 42px; }
.logo { gap: 8px; }
.logo-plaats { font-size: .88rem; padding-left: 8px; }
.kaart { padding: 20px; }
.oproep { padding: 22px; }
.stappen li { padding-left: 42px; }
/* Tabellen mogen nooit de pagina breder maken dan het scherm. */
.tijden, .prijzen { display: block; overflow-x: auto; }
.raster-drie { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 380px) {
/* Op de smalste toestellen wordt "Hoogeveen" naast het logo te krap. */
.logo-plaats { display: none; }
}
/* ============================================================
Reparatiepagina — herontwerp
Een visuele, uitnodigende opzet bovenop de bestaande bouwstenen.
Alle kleuren komen uit de variabelen bovenin; er komt geen externe
afbeelding en geen script bij, in lijn met de rest van de site.
============================================================ */
/* Lichtblauwe sectie, dezelfde tint als het herovlak. Voor een rustig
gekleurd blok tussen twee witte secties, zodat de pagina ademt. */
.sectie-tint { background: var(--hero-vlak); }
/* --- 1. Hero met illustratie ernaast ---
De standaard-hero is gecentreerd (zie `.hero`). Hier staat links de
tekst en rechts de illustratie. Onder 760px klapt het naar één kolom
en centreert de tekst weer, zodat het op een telefoon net zo rustig
oogt als de hero's op de andere pagina's. */
/* Links de tekst, rechts de illustratie, en de knop op een eigen rij
eronder die over de volle breedte loopt. Zo staat de knop gecentreerd
ten opzichte van de hele pagina, niet alleen onder de tekstkolom. */
.hero-split .container {
display: grid;
grid-template-columns: 1.1fr .9fr;
grid-template-areas:
"tekst beeld"
"knop knop";
gap: clamp(24px, 5vw, 56px);
align-items: center;
text-align: left;
}
.hero-tekst { grid-area: tekst; }
.hero-beeld { grid-area: beeld; }
/* De algemene hero centreert h1 en p met auto-marges; hier moeten ze
juist links aansluiten. */
.hero-split h1,
.hero-split p { margin-inline: 0; max-width: 22ch; }
.hero-split p { max-width: 46ch; }
/* De knop over de volle breedte gecentreerd. `margin-top: 0` haalt de
standaardmarge van `.hero .knoppen` weg; de rij-gap zorgt al voor ruimte. */
.hero-knoppen {
grid-area: knop;
justify-content: center;
margin-top: 0;
}
/* Vinklijst op de blauwe hero: witte tekst in plaats van de donkere
tekstkleur van de gewone `.vinklijst`, anders valt hij weg op het blauw.
Het vinkje krijgt een lichte tint; die is decoratief. */
.hero-usp {
list-style: none;
padding: 0;
margin: 24px 0 4px;
display: grid;
gap: 9px;
}
.hero-usp li {
position: relative;
padding-left: 30px;
color: var(--wit);
font-weight: 600;
}
.hero-usp li::before {
content: "✓";
position: absolute;
left: 0;
color: #9fe3ff;
font-weight: 800;
}
.hero-beeld { display: flex; flex-direction: column; align-items: center; justify-content: center; }
/* De illustratie schaalt mee maar wordt nooit onnodig groot. */
.hero-beeld svg { width: 100%; max-width: 290px; height: auto; }
/* Staat er een foto in plaats van de illustratie, dan mag die breder: een
liggende foto op 290px wordt te klein om de barsten nog te zien. */
.hero-beeld img {
width: 100%;
max-width: 440px;
height: auto;
border-radius: var(--radius);
}
/* Afbeeldingslider in de reparatie-hero. De dia's liggen via de bestaande
.dias/.dia-regels op elkaar (grid-cel 1/1), zodat het vak niet verspringt bij
het wisselen. De beelden hebben verschillende verhoudingen (van 1,6:1 tot bijna
5:1); een vast 3:2-kader met object-fit:cover trekt ze gelijk. De kern van elk
beeld zit in het midden, dus center-crop houdt het belangrijkste in beeld. Wil
je een andere kaderverhouding, pas dan alleen de aspect-ratio hieronder aan. */
.hero-beeld .dias { width: 100%; max-width: 440px; }
.hero-beeld .dia img {
max-width: none;
aspect-ratio: 3 / 2;
object-fit: cover;
object-position: center;
display: block;
}
/* Vierkante logo's (transparante achtergrond) niet bijsnijden maar volledig
tonen: het kader blijft 3:2, het logo past er gecentreerd in. */
.hero-beeld .dia-logo img { object-fit: contain; }
@media (max-width: 760px) {
/* Eén kolom: eerst de tekst, dan de knop, dan de illustratie — zo staan de
titel en de belangrijkste actie als eerste in beeld op een telefoon. */
.hero-split .container {
grid-template-columns: 1fr;
grid-template-areas:
"tekst"
"knop"
"beeld";
text-align: center;
}
.hero-split h1,
.hero-split p { margin-inline: auto; }
.hero-usp { justify-items: center; }
/* De illustratie blijft bescheiden van maat onder de knop. */
.hero-beeld svg { max-width: 210px; }
.hero-beeld img { max-width: 320px; }
}
/* --- 2. Merkkaarten ---
Grote, klikbare kaarten met een gekleurd rond vlakje en de merknaam.
Zelfde optillende hover als `.kaart-dienst`, zodat ze bij de rest van
de site passen. */
.merkraster {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 22px;
}
.merkkaart {
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
text-align: center;
text-decoration: none;
background: var(--wit);
/* 2px in plaats van 1px: op wit was de rand van één pixel in --lijn zo licht
dat de kaart eerder zweefde dan dat hij een vlak was. */
border: 2px solid var(--lijn);
border-radius: var(--radius);
padding: 40px 22px;
box-shadow: var(--schaduw);
color: var(--blauw-donker);
font-weight: 700;
font-size: 1.2rem;
transition: transform .15s ease, box-shadow .15s ease;
}
.merkkaart:hover,
.merkkaart:focus-visible {
transform: translateY(-5px);
box-shadow: 0 10px 24px rgba(25, 118, 210, .22);
}
@media (prefers-reduced-motion: reduce) {
.merkkaart { transition: box-shadow .15s ease; }
.merkkaart:hover,
.merkkaart:focus-visible { transform: none; }
}
/* Het ronde vlakje met de eerste letter van het merk. De achtergrondkleur
staat inline in de HTML per merk; deze regels bepalen alleen de vorm en
de witte letter. De tinten zijn bewust wat donker gekozen, zodat de witte
letter ook op de gekleurde vlakken goed leesbaar blijft. */
.merk-badge {
width: 84px;
height: 84px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--blauw);
color: var(--wit);
/* Fors, en dat moet ook: een plusteken heeft veel minder inkt dan zijn
lettergrootte doet vermoeden. Op 2,1rem was het beeldje 18px breed, naast
een Apple-logo van 44px — dat oogde als een vergissing. Op deze maat is het
plusje ongeveer 37px en staat het gelijk met de twee merktekens ernaast. */
font-size: 4.25rem;
font-weight: 800;
line-height: 1;
}
/* De twee merktekens zijn geen los te schalen iconen: Apple vult zijn viewBox
helemaal, het Samsung-woordmerk staat met veel lucht eromheen in een vierkant
van 100 bij 100. Eén maat voor allebei zou de een te klein en de ander te
groot maken, dus staat de maat per stuk in de HTML. */
/* --- 4. Tijdlijn "Zo werkt het" ---
Vijf stappen naast elkaar, met een verbindingslijn ertussen. Onder 720px
kantelt de rij naar een verticale lijst met de cirkels links. */
.tijdlijn {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.tijdlijn li {
position: relative;
text-align: center;
}
.tijd-cirkel {
position: relative;
z-index: 1;
width: 60px;
height: 60px;
border-radius: 50%;
background: var(--blauw);
display: grid;
place-items: center;
margin: 0 auto 14px;
}
/* De lijn loopt vanaf de vorige cirkel naar deze; hij ligt op de hoogte van
het midden van de cirkels (30px) en onder de cirkels (z-index 0). */
.tijdlijn li:not(:first-child)::before {
content: "";
position: absolute;
top: 30px;
left: -50%;
width: 100%;
height: 3px;
background: var(--lijn);
z-index: 0;
}
.tijd-stap {
display: block;
font-size: .78rem;
text-transform: uppercase;
letter-spacing: .05em;
font-weight: 700;
color: var(--tekst-zacht);
}
.tijd-titel {
display: block;
font-weight: 600;
color: var(--blauw-kop-klein);
line-height: 1.3;
}
@media (max-width: 720px) {
.tijdlijn {
grid-template-columns: 1fr;
gap: 0;
max-width: 420px;
margin-inline: auto;
}
.tijdlijn li {
display: grid;
grid-template-columns: 60px 1fr;
gap: 18px;
text-align: left;
padding-bottom: 26px;
}
.tijd-cirkel { margin: 0; }
/* De verbindingslijn wordt verticaal: van deze cirkel omhoog naar de vorige. */
.tijdlijn li:not(:first-child)::before {
top: -26px;
left: 29px;
width: 3px;
height: 26px;
}
.tijd-inhoud { align-self: center; }
}
/* --- 5. Waarom kiezen voor Optie1 ---
Icoon links, tekst rechts. Geen kaart eromheen: dat houdt de sectie licht
naast de twee kaartenrasters erboven. De ronde iconen hergebruiken
`.dienst-icoon`. */
.usp-raster {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 28px;
}
.usp {
display: grid;
grid-template-columns: 52px 1fr;
gap: 16px;
align-items: start;
}
/* Het icoon staat hier links en niet gecentreerd, dus de auto-marge van
`.dienst-icoon` moet eraf. */
.usp .dienst-icoon {
width: 52px;
height: 52px;
margin: 0;
}
.usp h3 { margin-bottom: .25em; }
.usp p { margin: 0; color: var(--tekst-zacht); }
/* --- 6. Reviews ---
Sterbeoordeling boven een kort citaat. De kaart zelf is de bestaande
`.kaart`; hier alleen de sterren en het citaat. */
.reviews {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 22px;
}
.review { margin: 0; }
.sterren {
color: #f5a623;
letter-spacing: 3px;
font-size: 1.15rem;
margin-bottom: 10px;
}
.review blockquote {
margin: 0;
font-size: 1.08rem;
font-weight: 600;
color: var(--tekst);
}
.review figcaption {
margin-top: 12px;
font-size: var(--fs-klein);
color: var(--tekst-zacht);
}
/* --- 7. Grote CTA ---
Vol merkblauw vlak met witte tekst en de rode knop, zodat de oproep om
aan te melden er duidelijk uitspringt. --merkblauw-diep omdat witte
lopende tekst daarop 4,7:1 haalt, ruim boven de leesnorm. */
.cta-blok {
background: var(--merkblauw-diep);
color: var(--wit);
border-radius: 22px;
padding: clamp(32px, 6vw, 56px);
text-align: center;
box-shadow: var(--schaduw);
}
.cta-blok h2 { color: var(--wit); margin-top: 0; }
.cta-blok p {
color: #dbeef8;
max-width: 48ch;
margin: 0 auto 4px;
}
.cta-blok .knoppen { justify-content: center; margin-top: 22px; }
/* --- 8. FAQ ---
Native /: klapt open en dicht zonder JavaScript, zodat
de vragen ook zonder script gewoon te lezen zijn. */
.faq {
max-width: 760px;
margin-inline: auto;
display: grid;
gap: 12px;
}
.faq details {
background: var(--wit);
border: 1px solid var(--lijn);
border-radius: var(--radius);
box-shadow: var(--schaduw);
}
.faq summary {
cursor: pointer;
padding: 18px 22px;
font-weight: 600;
color: var(--blauw-kop-klein);
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
/* De standaard-driehoek weg; we tonen zelf een + / – rechts. */
list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: "+";
font-size: 1.5rem;
font-weight: 400;
color: var(--blauw);
line-height: 1;
}
.faq details[open] summary::after { content: "\2013"; }
.faq details > p {
margin: 0;
padding: 0 22px 20px;
color: var(--tekst-zacht);
}
.faq summary:focus-visible {
outline: 3px solid var(--blauw-accent);
outline-offset: 2px;
}
/* De volle-blauwe kaartvariant (.kaart-vol) is verwijderd: de dienstkaarten op
de homepage gebruiken nu dezelfde lichtblauwe tint (via `.sectie-wit
.kaart-dienst`) als de reparatiekaarten, met een witte cirkel en een zwart
symbool. Terughalen kan uit de Git-geschiedenis. */
/* Merkpillen op de homepage in vol merkblauw met witte tekst. Alleen binnen
de merkenlijst; de providerbalk (dezelfde .provider-klasse) houdt zijn
lichte stijl. --merkblauw-diep: witte tekst haalt daarop 4,7:1. */
.merkenlijst .provider {
background: var(--merkblauw-diep);
border-color: var(--merkblauw-diep);
color: var(--wit);
}
/* ============================================================
REPARATIE-AANMELDPAGINA (afspraak.html) — premium & monochroom
------------------------------------------------------------
Een rustige, zakelijke uitstraling in wit/zwart/grijs, geïnspireerd op de
eenvoud en typografie van Apple (uitsluitend als inspiratie). Doel: de
bezoeker moet direct voelen dat hier zorgvuldig met zijn toestel wordt
omgegaan. Kleur wordt alleen functioneel ingezet (validatie/focus).
Alles staat gescoped onder `.pagina-aanmelden`, zodat de rest van de site
zijn blauwe huisstijl behoudt. De paginaklasse staat op de .
============================================================ */
.pagina-aanmelden {
/* Eigen, ingetogen palet — losgekoppeld van het blauwe sitepalet. */
--pm-zwart: #1d1d1f;
--pm-grijs: #3c3c43;
--pm-licht: #f5f5f7;
--pm-rand: #d2d2d7;
--pm-plch: #6e6e73; /* placeholder: lichtgrijs maar goed leesbaar (±4,6:1) */
--pm-kolom: 720px; /* gedeelde kolombreedte voor titel én formulier */
background: var(--wit);
color: var(--pm-zwart);
/* Het blauwe balkje bovenaan neutraliseren: een strakke, kleurloze start. */
border-top: 0;
}
/* De menuknop (smalle schermen) meekleuren: geen blauw kader op deze pagina. */
.pagina-aanmelden .menu-knop {
border-color: var(--pm-rand);
color: var(--pm-zwart);
}
.pagina-aanmelden .menu-knop:hover {
background: var(--pm-licht);
color: var(--pm-zwart);
}
/* --- Hero: van blauw vlak naar een rustige, witte kop --- */
.pagina-aanmelden .hero {
background: var(--wit);
padding-block: clamp(36px, 6vw, 72px);
text-align: left;
}
/* Titel en subtitel delen exact dezelfde kolom en linkerrand als het
formulier eronder — alles lijnt op één lijn uit. */
.pagina-aanmelden .hero .container,
.pagina-aanmelden #afspraak .container { max-width: var(--pm-kolom); }
.pagina-aanmelden .hero h1 {
color: var(--pm-zwart);
font-weight: 700;
font-size: clamp(2rem, 1.5rem + 1.8vw, 2.625rem); /* 32 → 42 px */
line-height: 1.1;
letter-spacing: -0.02em;
max-width: none;
margin: 0 0 .35em;
}
.pagina-aanmelden .hero p {
color: var(--pm-grijs);
font-weight: 500;
font-size: clamp(1.1875rem, 1.05rem + 0.55vw, 1.375rem); /* 19 → 22 px */
line-height: 1.5;
max-width: 60ch;
margin: 0;
}
/* --- Formulier: ruime kolom, veel verticale lucht --- */
.pagina-aanmelden .formulier {
max-width: var(--pm-kolom);
margin-inline: auto;
}
.pagina-aanmelden .veld { margin-bottom: 30px; }
/* --- Labels: één stijl, zwart, met lucht eronder --- */
.pagina-aanmelden .veld label,
.pagina-aanmelden .veld-groep legend,
.pagina-aanmelden .veld-duo label {
display: block;
color: var(--pm-zwart);
font-size: 16px;
font-weight: 600;
line-height: 1.3;
margin-bottom: 10px;
}
.pagina-aanmelden .veld-groep legend { margin-bottom: 14px; }
/* "(optioneel)" rustig en terughoudend naast het label. */
.pagina-aanmelden .veld-optioneel {
color: var(--pm-plch);
font-weight: 400;
}
/* --- Invoervelden: wit, zacht afgerond, veel padding, ±56px hoog --- */
.pagina-aanmelden .veld input,
.pagina-aanmelden .veld select,
.pagina-aanmelden .veld textarea {
width: 100%;
font: inherit;
font-size: 18px;
color: var(--pm-zwart);
background: var(--wit);
border: 1px solid var(--pm-rand);
border-radius: 12px;
box-shadow: none;
transition: border-color .18s ease, box-shadow .18s ease;
}
.pagina-aanmelden .veld input,
.pagina-aanmelden .veld select {
height: 56px;
padding: 0 18px;
}
.pagina-aanmelden .veld textarea {
min-height: 168px;
padding: 16px 18px;
line-height: 1.6;
resize: vertical;
}
/* Placeholder: lichtgrijs en toch leesbaar. */
.pagina-aanmelden .veld ::placeholder { color: var(--pm-plch); opacity: 1; }
/* --- Focus: rustig en donker, nooit fel blauw --- */
.pagina-aanmelden .veld input:focus,
.pagina-aanmelden .veld select:focus,
.pagina-aanmelden .veld textarea:focus {
outline: none;
border-color: var(--pm-zwart);
box-shadow: 0 0 0 4px rgba(29, 29, 31, 0.10);
}
/* --- Dag & tijd: premium invoervelden i.p.v. kale browsercontrols --- */
/* Select met een eigen, subtiele chevron in plaats van de systeempijl. */
.pagina-aanmelden .veld select {
appearance: none;
-webkit-appearance: none;
padding-right: 46px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%233c3c43' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 18px center;
cursor: pointer;
}
/* Nog geen dag gekozen: rustig uitgegrijsd, duidelijk niet-actief. */
.pagina-aanmelden .veld select:disabled {
background-color: var(--pm-licht);
color: var(--pm-plch);
cursor: not-allowed;
}
/* De datumkalender-knop meekleuren met het palet. */
.pagina-aanmelden .veld input[type="date"]::-webkit-calendar-picker-indicator {
opacity: .55;
cursor: pointer;
}
.pagina-aanmelden .veld input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: .9; }
/* De twee velden onder de legend met wat meer lucht ertussen. */
.pagina-aanmelden .veld-duo { gap: 20px; }
/* --- Helptekst: klein, grijs, rustig --- */
.pagina-aanmelden .veld-uitleg,
.pagina-aanmelden .formulier-klein {
font-size: 15px;
line-height: 1.55;
color: var(--pm-grijs);
margin-top: 10px;
}
.pagina-aanmelden .formulier-klein { margin-top: 20px; }
/* --- Knoppen: premium, ingetogen --- */
.pagina-aanmelden .knop {
font-size: 17px;
font-weight: 600;
letter-spacing: 0;
border-radius: 12px;
padding: 0 28px;
min-height: 56px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid transparent;
transition: background-color .2s ease, color .2s ease, transform .15s ease, box-shadow .2s ease;
}
/* Primaire actie: zwart vlak, witte tekst, subtiele lift bij hover. */
.pagina-aanmelden .knop-rood {
background: var(--pm-zwart);
color: var(--wit);
border-color: var(--pm-zwart);
}
.pagina-aanmelden .knop-rood:hover {
background: #000000;
color: var(--wit);
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
/* Tweede route (WhatsApp) en de terugknop: rustige, witte secundaire stijl —
de knoptekst zelf benoemt WhatsApp, dus felgroen is niet nodig. */
.pagina-aanmelden .knop-whatsapp,
.pagina-aanmelden .knop-blauw {
background: var(--wit);
color: var(--pm-zwart);
border-color: var(--pm-rand);
}
.pagina-aanmelden .knop-whatsapp:hover,
.pagina-aanmelden .knop-blauw:hover {
background: var(--pm-licht);
color: var(--pm-zwart);
}
.pagina-aanmelden .knop:focus-visible {
outline: 3px solid var(--pm-zwart);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.pagina-aanmelden .knop-rood:hover { transform: none; }
}
/* --- Bevestiging na verzenden: monochroom i.p.v. blauw --- */
.pagina-aanmelden .formulier-gelukt {
max-width: var(--pm-kolom);
background: var(--pm-licht);
border-left: 4px solid var(--pm-zwart);
}
.pagina-aanmelden .formulier-gelukt h2 { color: var(--pm-zwart); }
.pagina-aanmelden .formulier-gelukt a,
.pagina-aanmelden .formulier a {
color: var(--pm-zwart);
text-decoration: underline;
}
.pagina-aanmelden .formulier-gelukt a:hover,
.pagina-aanmelden .formulier a:hover { color: var(--pm-grijs); }