/* =====================================================================
Dream Team Noord — thema-stijl, smaak A1 (rustig ritme)
Samengesteld uit het goedgekeurde prototype:
site/assets/fonts.css + basis.css + smaak-a.css
Wat hier staat komt uit de beeldgids. Voeg niets toe wat daar niet
in staat: het palet is zeven kleuren met strikte rollen en het houdt
alleen stand zolang die rollen strikt blijven.
===================================================================== */
/* Dream Team Noord — zelf gehoste letters. Geen verzoek naar Google bij paginabezoek.
Bricolage Grotesque, Atkinson Hyperlegible en Caveat vallen alle drie onder de SIL Open Font License 1.1.
Zie fonts/LICENSE.md. */
@font-face{
font-family:'Bricolage Grotesque';
font-style:normal;
font-weight:400 800;
font-display:swap;
src:url('../fonts/BricolageGrotesque-400-800-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
font-family:'Bricolage Grotesque';
font-style:normal;
font-weight:400 800;
font-display:swap;
src:url('../fonts/BricolageGrotesque-400-800-latin.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
font-family:'Atkinson Hyperlegible';
font-style:normal;
font-weight:400;
font-display:swap;
src:url('../fonts/AtkinsonHyperlegible-400-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
font-family:'Atkinson Hyperlegible';
font-style:normal;
font-weight:400;
font-display:swap;
src:url('../fonts/AtkinsonHyperlegible-400-latin.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
font-family:'Atkinson Hyperlegible';
font-style:normal;
font-weight:700;
font-display:swap;
src:url('../fonts/AtkinsonHyperlegible-700-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
font-family:'Atkinson Hyperlegible';
font-style:normal;
font-weight:700;
font-display:swap;
src:url('../fonts/AtkinsonHyperlegible-700-latin.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
font-family:'Caveat';
font-style:normal;
font-weight:700;
font-display:swap;
src:url('../fonts/Caveat-700-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
font-family:'Caveat';
font-style:normal;
font-weight:700;
font-display:swap;
src:url('../fonts/Caveat-700-latin.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* =====================================================================
Dream Team Noord — basis
Kleur, letter, contrast en de losse onderdelen. Gedeeld door alle drie
de smaken. Wat hier staat gaat NIET over paginagrammatica — hoe een
pagina van boven naar beneden is opgebouwd, staat in smaak-a/b/c.css.
Voeg hier niets aan toe wat niet in de beeldgids staat: het palet is
zeven kleuren met strikte rollen, en het houdt alleen stand zolang die
rollen strikt blijven.
===================================================================== */
:root{
/* palet — beeldgids, hoofdstuk Kleur */
--navy:#002A76;
--papier:#FAF6F0;
--groen:#5FA930;
--klei:#C85A38;
--zand:#E8D9C3;
--zon:#F2B705;
--blauw:#0987FF; /* gereserveerd: logo en focus-ring, verder niets */
/* rollen */
--ink:var(--navy);
--ink-soft:#22407F;
--muted:#5A6B8C;
--rule:rgba(0,42,118,.15);
--rule-strong:rgba(0,42,118,.28);
/* letters — beeldgids, hoofdstuk Drie letters, drie taken */
--f-display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
--f-body:"Atkinson Hyperlegible","Helvetica Neue",Arial,sans-serif;
--f-naam:"Caveat","Bradley Hand","Segoe Script",cursive;
/* vorm — beeldgids, hoofdstuk Vorm */
--r-vlak:14px;
--r-kaart:12px;
--r-knop:10px;
--breed:1180px;
--smal:760px;
--uit:cubic-bezier(.2,.8,.2,1);
}
/* Geen donkere modus. Navy is de merkgrond; een tweede thema erbovenop maakt
de contrasttabel uit de beeldgids onhoudbaar. */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;
background:var(--papier);
color:var(--ink);
font-family:var(--f-body);
font-size:1.125rem; /* 18px — ondergrens uit de beeldgids */
line-height:1.65;
-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
/* Focus-ring: 3px helderblauw, 2px offset, op elk klikbaar element. */
a:focus-visible,button:focus-visible,summary:focus-visible{
outline:3px solid var(--blauw);
outline-offset:2px;
border-radius:4px;
}
.wrap{max-width:var(--breed);margin:0 auto;padding:0 24px;position:relative;z-index:1}
.wrap.smal{max-width:var(--breed)}
.wrap.smal > *{max-width:var(--smal)}
.overslaan{
position:absolute;left:-9999px;top:0;
background:var(--papier);color:var(--navy);
padding:12px 18px;border-radius:var(--r-knop);z-index:99;
}
.overslaan:focus{left:16px;top:16px}
/* ---------------------------------------------------------------
Typografie — schaal uit de beeldgids
--------------------------------------------------------------- */
h1,h2,h3,h4{font-family:var(--f-display);text-wrap:balance;margin:0}
h1{
font-weight:800;
font-size:clamp(2.5rem,6vw,4.375rem); /* 40 – 70px */
line-height:1.03;
letter-spacing:-.025em;
max-width:17ch;
}
h2{
font-weight:800;
font-size:clamp(1.75rem,3.4vw,2.5rem); /* 28 – 40px */
line-height:1.1;
letter-spacing:-.022em;
max-width:20ch;
}
h3{font-weight:700;font-size:1.25rem;line-height:1.3;letter-spacing:-.01em}
h4{font-weight:700;font-size:1.0625rem;line-height:1.35}
p{margin:0 0 16px;max-width:66ch}
p:last-child{margin-bottom:0}
.inleiding{font-size:1.375rem;line-height:1.5;color:var(--ink-soft);max-width:56ch}
h1 + p,h1 + .inleiding{margin-top:20px}
h2 + p,h2 + .inleiding{margin-top:14px}
.klein{font-size:.9375rem;line-height:1.55}
.gedempt{color:var(--muted)}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
/* De slotzin van een sectie — het merkzinnetje dat blijft hangen. */
.slotzin{
font-family:var(--f-display);font-weight:800;
font-size:clamp(1.375rem,2.6vw,1.875rem);
line-height:1.15;letter-spacing:-.02em;
margin:32px 0 0;max-width:34ch;
}
/* ---------------------------------------------------------------
Knoppen
Groen vlak, navy tekst. Grasgroen met witte letters haalt 2,71:1 en
is daarmee onbruikbaar — zie de contrasttabel. Verander dit niet.
--------------------------------------------------------------- */
.knop{
display:inline-flex;align-items:center;justify-content:center;
min-height:44px;padding:11px 24px; /* klikvlak ≥ 44px */
font-family:var(--f-display);font-weight:700;font-size:1rem;
letter-spacing:-.005em;
border-radius:var(--r-knop);border:2px solid transparent;
text-decoration:none;cursor:pointer;
transition:transform .15s var(--uit),background-color .15s;
}
.knop--groen{background:var(--groen);color:var(--navy)}
.knop--groen:hover{background:#6BBB37}
/* De omlijnde knop leest zijn kleur uit --knoplijn. Elk donker vlak zet die
één keer om naar papier; doe je dat niet, dan staat er navy op navy en is
de knop onzichtbaar. Dat is precies wat er ooit misging. */
.knop--lijn{
background:none;
color:var(--knoplijn,var(--navy));
border-color:var(--knoplijn,var(--navy));
}
.knop--lijn:hover{background:var(--knoplijn-hover,rgba(0,42,118,.06))}
.knop:hover{transform:translateY(-1px)} /* 1px omhoog, 150ms */
.knoppen{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
/* ---------------------------------------------------------------
Naamkaartje — het enige eigen element van deze identiteit
Alleen een voornaam. Nooit een achternaam, nooit een functie.
--------------------------------------------------------------- */
.naamkaartje{
display:inline-block;
background:var(--klei);color:var(--papier);
font-family:var(--f-naam);font-weight:700;
font-size:1.75rem;line-height:1;
padding:10px 20px 12px;
border-radius:var(--r-knop);
transform:rotate(-2deg);
}
.naamkaartje--zand{background:var(--zand);color:var(--navy);transform:rotate(2.5deg)}
/* ---------------------------------------------------------------
Beeldvlak
De shoot is nog niet geweest en stock is verboden. Elk vlak draagt
daarom zijn eigen opnamebriefing. Vervang het element één op één
door een zodra het echte beeld er is.
--------------------------------------------------------------- */
.beeldvlak{
position:relative;
background:var(--zand);
background-image:repeating-linear-gradient(-45deg,
rgba(0,42,118,.05) 0 1px, transparent 1px 11px);
border-radius:var(--r-vlak);
min-height:260px;
display:flex;align-items:flex-end;
padding:24px;
overflow:hidden;
}
.band--zand .beeldvlak{
background-color:#DCCBB0;
background-image:repeating-linear-gradient(-45deg,
rgba(0,42,118,.06) 0 1px, transparent 1px 11px);
}
/* Een beeldvlak met een echte foto erin. Het gearceerde vlak blijft de
ondergrond, zodat er iets staat zolang de foto laadt of ontbreekt. */
.beeldvlak--foto > img{
position:absolute;inset:0;
width:100%;height:100%;
object-fit:cover;
display:block;
}
.beeldvlak--foto > .beeldvlak__brief{position:relative;z-index:2}
.beeldvlak__brief{
font-size:.875rem;line-height:1.5;color:var(--ink-soft);
max-width:38ch;background:rgba(250,246,240,.82);
padding:10px 14px;border-radius:8px;
}
.beeldvlak__brief b{font-family:var(--f-display);font-weight:700}
.beeldvlak--hoog{min-height:min(72vh,620px)}
.beeldvlak--breed{min-height:340px}
/* ---------------------------------------------------------------
Kop van de pagina
Op smalle schermen wordt het menu uitklapbaar. Zonder JavaScript
blijft het gewoon openstaan — een menu dat alleen met JS werkt is
op deze site geen optie.
--------------------------------------------------------------- */
.kop{
position:sticky;top:0;z-index:20;
background:var(--papier);
border-bottom:1px solid var(--rule);
}
.kop__rij{
max-width:var(--breed);margin:0 auto;padding:12px 24px;
display:flex;align-items:center;gap:20px;
}
.kop__merk{display:inline-flex;align-items:center;flex:none}
.kop__logo{height:64px;width:auto}
.kop__menu{margin-left:auto}
.menupaneel__lijst{
display:flex;align-items:center;gap:22px;flex-wrap:wrap;
}
/* De eigen kopbalk en voet van het uitklapmenu bestaan alleen op smal. */
.menupaneel__kop,.menupaneel__voet{display:none}
.kop__menu a{
font-family:var(--f-display);font-weight:600;font-size:1rem;
text-decoration:none;padding:8px 2px;
display:inline-flex;align-items:center;min-height:44px;
}
/* De onderstreping hoort bij een tekstlink, niet bij de knop. Stond de
bezoeker op Kom langs, dan kreeg de groene knop er een streep onder van
aria-current. */
.kop__menu a:not(.knop):hover{text-decoration:underline}
.kop__menu a[aria-current]:not(.knop){text-decoration:underline;text-decoration-thickness:2px}
.knop,.knop:hover,.knop[aria-current]{text-decoration:none}
/* Bent u verwijzer? is bewust een rustige tekstlink en geen knop:
de bewoner is de hoofdlezer en dat moet je aan de opmaak zien. */
.menuknop{display:none}
/* ---------------------------------------------------------------
Rasters en kaarten
--------------------------------------------------------------- */
.raster{display:grid;gap:20px;margin-top:clamp(40px,4.5vw,64px)}
.raster--2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:32px}
.raster--3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.raster--6{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.kaart{
background:var(--papier);
border:1px solid var(--rule);
border-radius:var(--r-kaart);
overflow:hidden;
display:flex;flex-direction:column;
}
.band--papier .kaart{background:#F3ECE1}
.kaart__beeld{min-height:210px;border-radius:0}
.kaart__body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.kaart__body p{margin:0;max-width:none}
.kaart__body .knop{margin-top:auto;align-self:flex-start}
/* Lucht rond beeld en tussenkoppen in een lopende kolom.
h1 tot en met h4 staan op margin:0, zodat een kop bovenaan een sectie
strak begint. Midden in een kolom is dat verkeerd: dan plakt een
tussenkop tegen de foto of de alinea erboven. Deze regels zetten dat
recht, met uitzondering van de plekken waar strak juist klopt — in een
kaart is de foto de bovenrand, en het cijfer boven een blok of een stap
hoort tegen zijn kop aan te staan. */
.beeldvlak:not(.kaart__beeld):not(.verhaal__beeld) + *{margin-top:28px}
.hero .beeldvlak + *,
.teamlid .beeldvlak + *{margin-top:0}
p:not(.blok__n):not(.n):not(.tijd) + h3,
ul + h3,ol + h3,table + h3{margin-top:28px}
p:not(.blok__n):not(.n):not(.tijd) + h2,
ul + h2,ol + h2,table + h2{margin-top:44px}
/* Bewijsblok: een belofte zonder bewijs is een slogan. */
/* Genummerde blokken — "wat erbij hoort" */
.blok{
background:var(--papier);border:1px solid var(--rule);
border-radius:var(--r-kaart);padding:24px;
}
.band--papier .blok{background:#F3ECE1}
.blok__n{
font-family:var(--f-display);font-weight:800;font-size:1rem;
color:var(--klei);display:block;margin-bottom:8px;
}
.blok h3{margin-bottom:8px}
.blok p{margin:0;font-size:1rem;max-width:none}
/* ---------------------------------------------------------------
Verhaalkaart
--------------------------------------------------------------- */
.verhaal__beeld{position:relative;min-height:250px;border-radius:0;align-items:flex-start}
.verhaal__citaat{
font-size:1.125rem;line-height:1.5;
font-weight:700;
}
.verhaal .naamkaartje{position:absolute;left:20px;bottom:20px}
/* ---------------------------------------------------------------
Tijdlijn — een dag bij ons. Ruimte voor lege momenten hoort erbij.
--------------------------------------------------------------- */
.tijdlijn{list-style:none;margin:44px 0 0;padding:0;
border-left:2px solid var(--rule-strong);}
.tijdlijn li{padding:0 0 30px 26px;position:relative}
.tijdlijn li:last-child{padding-bottom:0}
.tijdlijn li::before{
content:"";position:absolute;left:-7px;top:9px;
width:12px;height:12px;border-radius:50%;
background:var(--groen);
}
.tijdlijn .tijd{
font-family:var(--f-display);font-weight:700;font-size:.9375rem;
color:var(--muted);display:block;
}
.tijdlijn p{margin:2px 0 0;font-size:1.0625rem}
/* ---------------------------------------------------------------
Namenmuur — de vertaling van "namen, geen nummers".
Caveat mag hier omdat er uitsluitend namen staan.
--------------------------------------------------------------- */
.namenmuur{
font-family:var(--f-naam);font-weight:700;
font-size:clamp(2rem,5.2vw,3.75rem);
line-height:1.12;
letter-spacing:.005em;
max-width:100%;
margin:36px 0 0;
color:var(--navy);
}
.namenmuur span{white-space:nowrap;margin-right:.45em}
/* --- Collega's: een rail die je zowel op een telefoon als op een
desktop opzij schuift. Op mobiel met een veeg, op desktop met de
pijlknoppen, met slepen, of met de pijltoetsen als de rail focus
heeft. Scroll-snap zorgt dat hij netjes op een kaart uitkomt. --- */
.rail{position:relative;margin-top:52px}
.rail__spoor{
display:flex;gap:20px;
overflow-x:auto;overflow-y:hidden;
scroll-snap-type:x mandatory;
scroll-padding-left:2px;
padding:2px 2px 14px;
/* De schuifbalk blijft zichtbaar: hij is hier de aanwijzing dat er
meer staat. Verbergen maakt het mooier en onvindbaar. */
scrollbar-width:thin;
scrollbar-color:var(--rule-strong) transparent;
overscroll-behavior-x:contain;
-webkit-overflow-scrolling:touch;
}
.rail__spoor:focus-visible{outline:3px solid var(--blauw);outline-offset:4px;border-radius:6px}
.rail__spoor.is-slepend{cursor:grabbing;scroll-snap-type:none;user-select:none}
.rail .teamlid{
flex:0 0 clamp(210px,24vw,268px);
scroll-snap-align:start;
}
.rail .teamlid a{pointer-events:auto}
.rail__knoppen{display:flex;gap:10px;margin-top:6px}
.railknop{
width:48px;height:48px;flex:none;
display:inline-flex;align-items:center;justify-content:center;
background:none;color:var(--navy);
border:2px solid var(--navy);border-radius:50%;
font-size:1.25rem;line-height:1;cursor:pointer;
transition:background-color .15s,opacity .15s;
}
.railknop:hover{background:rgba(0,42,118,.06)}
.railknop[disabled]{opacity:.3;cursor:default}
.band--navy .railknop{
color:var(--papier);border-color:var(--papier);
}
.band--navy .railknop:hover{
background:rgba(250,246,240,.12);
}
/* Zonder JavaScript blijven de knoppen weg; vegen en slepen werkt dan nog. */
.rail__knoppen{display:none}
.js .rail__knoppen{display:flex}
.teamlid .beeldvlak{min-height:200px;margin-bottom:14px}
.teamlid h3{margin-bottom:2px}
.teamlid p{margin:0;font-size:.9375rem;color:var(--muted);max-width:none}
/* ---------------------------------------------------------------
Verwijzersblok — zakelijker van toon, maar de site spreekt overal met je
--------------------------------------------------------------- */
.verwijzer__lijst{list-style:none;margin:28px 0 0;padding:0;
display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.verwijzer__lijst li{
padding-left:26px;position:relative;font-size:1.0625rem;
}
.verwijzer__lijst li::before{
content:"";position:absolute;left:0;top:.6em;
width:12px;height:2px;background:var(--groen);
}
/* Het beschikbaarheidsblok komt zowel op navy als op zand voor. Rand en
datumkleur lezen daarom uit variabelen; zonder dat viel de datum op
zand helemaal weg omdat hij op een navy ondergrond was afgestemd. */
.beschikbaarheid{
margin-top:32px;padding:18px 22px;
border:1px solid var(--kaderlijn,var(--rule-strong));
border-radius:var(--r-kaart);
display:inline-flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;
}
.beschikbaarheid strong{font-family:var(--f-display);font-size:1.125rem}
.beschikbaarheid .datum{font-size:.875rem;color:var(--zachtetekst,var(--muted))}
/* ---------------------------------------------------------------
Formulier
Een formulier stelt vragen, het vraagt geen velden. De labels komen
uit de taalgids: "Hoe heet je?" in plaats van "Naam *". Verander die
niet terug naar systeemtaal.
--------------------------------------------------------------- */
.formulier{display:grid;gap:22px;max-width:620px;margin-top:36px}
.veld{display:grid;gap:8px}
.veld label{font-family:var(--f-display);font-weight:700;font-size:1.0625rem}
.veld .hulp{font-size:.9375rem;color:var(--muted)}
.veld input,.veld textarea,.veld select{
font-family:var(--f-body);font-size:1.0625rem;line-height:1.5;
color:var(--ink);background:var(--papier);
border:2px solid var(--rule-strong);border-radius:var(--r-knop);
padding:12px 14px;min-height:52px;width:100%;
}
.veld textarea{min-height:132px;resize:vertical}
.veld input:focus-visible,.veld textarea:focus-visible,.veld select:focus-visible{
outline:3px solid var(--blauw);outline-offset:2px;border-color:var(--navy);
}
.band--zand .veld input,.band--zand .veld textarea{background:var(--papier)}
.formulier__slot{font-size:.9375rem;color:var(--muted);max-width:52ch}
/* ---------------------------------------------------------------
Tabellen — voor een tabel die de redactie in een tekstveld plakt
--------------------------------------------------------------- */
table{border-collapse:collapse;width:100%;font-size:1.0625rem;min-width:34rem}
th,td{text-align:left;padding:14px 18px;vertical-align:top;
border-bottom:1px solid var(--rule)}
thead th{font-family:var(--f-display);font-weight:700;font-size:.875rem;
letter-spacing:.04em;text-transform:uppercase;color:var(--muted);
background:#F3ECE1;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
.band--navy thead th{background:rgba(250,246,240,.08);color:#A9BBDD}
.band--navy th,.band--navy td{border-color:rgba(250,246,240,.22)}
/* ---------------------------------------------------------------
Stappen — een genummerde route, bijvoorbeeld van aanmelding tot intrek
--------------------------------------------------------------- */
.stappen{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:0;
border-top:1px solid var(--rule-strong)}
.band--navy .stappen,.band--navy .stappen li{border-color:rgba(250,246,240,.3)}
.stappen li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:20px;
padding:22px 0;border-bottom:1px solid var(--rule-strong);align-items:baseline}
.stappen .n{font-family:var(--f-display);font-weight:800;font-size:1.25rem;
color:var(--klei);line-height:1.3}
.band--navy .stappen .n{color:var(--zon)}
.stappen h3{margin-bottom:5px}
.stappen p{margin:0;max-width:56ch}
.voet__payoff{margin-top:14px;color:#A9BBDD}
/* ---------------------------------------------------------------
Voettekst
--------------------------------------------------------------- */
.voet{background:var(--navy);color:var(--papier);padding:72px 0 40px}
/* TODO — het logo staat hier op een papieren vlak omdat de
uitsparingsversie voor donkere ondergronden nog niet bestaat.
Dat is de noodgreep uit de beeldgids, geen oplossing.
Vervang dit zodra die versie er is. */
.voet__logo{
background:var(--papier);padding:10px 16px;border-radius:9px;
display:inline-block;
}
.voet__logo img{height:44px;width:auto}
.voet__rasters{display:grid;gap:36px;margin-top:44px;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.voet h4{font-size:.9375rem;letter-spacing:.04em;text-transform:uppercase;
color:#A9BBDD;margin-bottom:14px}
.voet ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.voet a{text-decoration:none;display:inline-flex;align-items:center;min-height:32px}
.kop__merk{min-height:44px}
.voet a:hover{text-decoration:underline}
/* Een kaart die naar een pagina wijst is in zijn geheel de link. De pijl
achter de kop zegt dat er iets achter zit; de onzichtbare laag eroverheen
maakt de hele kaart aanklikbaar, ook op een telefoon. */
.kaart--klikbaar{position:relative;transition:border-color .2s ease, transform .2s ease}
.kaart__link{text-decoration:none;color:inherit}
.kaart__link::after{content:"";position:absolute;inset:0;border-radius:var(--r-kaart)}
.kaart__link::before{content:" \2192";float:right;margin-left:8px}
.kaart--klikbaar:hover{border-color:var(--rule-strong);transform:translateY(-2px)}
.kaart--klikbaar:hover .kaart__link{text-decoration:underline}
.kaart__link:focus-visible::after{outline:3px solid var(--blauw);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
.kaart--klikbaar{transition:none}
.kaart--klikbaar:hover{transform:none}
}
/* Verder lezen — de subpagina's onderaan hun moederpagina. Een hele kaart is
de link, want een klein „lees meer" onderaan een kaart is op een telefoon
een doelwit van niks. */
.verderkaart{
display:flex;flex-direction:column;gap:8px;
background:var(--papier);border:1px solid var(--rule);
border-radius:var(--r-kaart);padding:24px 26px;
text-decoration:none;color:var(--ink);
transition:border-color .2s ease, transform .2s ease;
}
.band--papier .verderkaart{background:#F3ECE1}
.verderkaart__kop{
font-family:var(--f-display);font-weight:800;font-size:1.25rem;
line-height:1.2;letter-spacing:-.01em;
}
.verderkaart__kop::after{content:" \2192"}
.verderkaart__tekst{font-size:1rem;line-height:1.5;color:var(--ink-soft)}
.verderkaart:hover{border-color:var(--rule-strong);transform:translateY(-2px)}
.verderkaart:hover .verderkaart__kop{text-decoration:underline}
@media (prefers-reduced-motion:reduce){.verderkaart{transition:none}.verderkaart:hover{transform:none}}
/* Eén uitspraak, groot gezet. Geen aanhalingsteken als sierletter erbij: de
tekst staat al tussen echte aanhalingstekens, en een decoratief teken van
120 pixels zegt niets extra's. */
/* De weg buiten ons om, op navy. De twee gegevens staan als een klein
register onder de tekst: een naam en een nummer die je moet kunnen
overschrijven op een briefje, dus groot genoeg om te lezen. */
.buitenom{
margin:32px 0 0;display:grid;gap:24px;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
max-width:760px;
}
.buitenom dt{
font-family:var(--f-display);font-weight:800;font-size:.9375rem;
letter-spacing:.04em;text-transform:uppercase;color:#A9BBDD;margin-bottom:6px;
}
.buitenom dd{margin:0;font-size:1.25rem;line-height:1.35}
.buitenom__nog{margin-top:26px;color:#A9BBDD;max-width:66ch}
/* Een verhaal: de foto boven de tekst, want een leeskolom naast een portret
wordt te smal om prettig te lezen. */
.verhaal__hoelang{margin-top:12px;color:#A9BBDD}
.verhaal__portret{margin-bottom:40px}
.verhaal__tekst > *:first-child{margin-top:0}
/* Bellen en mailen staan naast elkaar. Het blok beslaat twee kolommen, want
een e-mailadres past niet in de breedte van een menukolom. Wordt de ruimte
te krap, dan gaan de twee onder elkaar staan in plaats van af te breken. */
.voet__contact{
grid-column:span 2;
display:grid;gap:36px;
grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
align-content:start;
}
.voet__slot{
margin-top:56px;padding-top:24px;
border-top:1px solid rgba(250,246,240,.2);
font-size:.875rem;color:#A9BBDD;
display:flex;flex-wrap:wrap;gap:8px 24px;
align-items:center;justify-content:space-between;
}
.voet__slotlinks{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center}
/* ---------------------------------------------------------------
Beweging — het gebaar uit het logo: alles komt van onderaf omhoog.
12 px, 400 ms. Verder niets.
Let op de .js voor elke regel hieronder. Zonder die selector staat
alles op opacity:0 en is de hele pagina blanco zodra site.js niet
laadt — op een zorgsite is dat geen schoonheidsfoutje maar een
storing. Zelfde principe als bij het uitklapmenu: eerst zichtbaar,
pas verbergen zodra JavaScript het terug kan halen.
--------------------------------------------------------------- */
.js .op{
opacity:0;transform:translateY(12px);
transition:opacity .4s var(--uit),transform .4s var(--uit);
}
.js .op.is-zichtbaar{opacity:1;transform:none}
.js .op .naamkaartje{transition:transform .4s var(--uit) .2s}
.js .op:not(.is-zichtbaar) .naamkaartje{transform:rotate(0deg)}
/* Een deel van de bewoners is gevoelig voor beweging op het scherm.
Onder deze voorkeur valt alles weg, ook de reveal zelf. */
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.raster--stapel .blok{position:static;top:auto}
*,*::before,*::after{animation:none !important;transition:none !important}
.js .op{opacity:1;transform:none}
}
/* ---------------------------------------------------------------
Het menu klapt eerder in dan de rest van de pagina.
Zeven menu-items passen tot ongeveer 1060 px naast het logo; daaronder
valt "Kom langs" naar een tweede regel en staat de kop scheef. De rest
van de opmaak heeft dat moment niet nodig — die houdt 900 px aan, zodat
een tablet geen telefoonpagina wordt.
--------------------------------------------------------------- */
@media (max-width:1080px){
.kop__rij{padding:10px 18px;gap:12px;flex-wrap:wrap}
.kop__logo{height:52px}
/* De menuknop is alleen het icoon. De toegankelijke naam zit in
aria-label, dus een schermlezer hoort hem nog wel. */
.menuknop{
display:inline-flex;align-items:center;justify-content:center;
margin-left:auto;width:48px;height:48px;padding:0;
background:none;color:var(--navy);
border:2px solid var(--navy);border-radius:var(--r-knop);
cursor:pointer;
}
.menuknop:hover{background:rgba(0,42,118,.06)}
.menuknop__streep{position:relative;display:block;width:18px;height:2px;background:currentColor}
.menuknop__streep::before,.menuknop__streep::after{
content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor;
}
.menuknop__streep::before{top:-6px}
.menuknop__streep::after{top:6px}
/* Zonder JavaScript staat het menu gewoon open onder de kop. Een menu
dat alleen met een script werkt kan op deze site niet. */
.kop__menu{
order:3;width:100%;margin-left:0;margin-top:6px;
border-top:1px solid var(--rule);
}
/* Nowrap is hier geen detail: de lijst erft flex-wrap van de brede kop,
en een kolom die mag wrappen begint bij te weinig hoogte gewoon aan
een tweede kolom — bovenop de eerste. Op een kleine telefoon vielen
de laatste twee regels zo over de bovenste heen. Niet wrappen; de
lijst scrolt al. */
.menupaneel__lijst{
flex-direction:column;align-items:stretch;gap:0;flex-wrap:nowrap;
}
/* De streep staat bovenaan elke regel en niet eronder. Dan hangt er
nooit een losse lijn onder de laatste regel, ook niet als de groene
knop naar de voet verhuist. */
.menupaneel__lijst a:not(.knop){
min-height:56px;font-size:1.25rem;font-weight:700;
border-top:1px solid var(--rule);
}
.menupaneel__lijst a:first-child{border-top:0}
.kop__menu .knop{margin:20px 0 10px;justify-content:center;font-size:1.0625rem}
/* Met JavaScript wordt het een paneel dat het scherm vult. Dat paneel
krijgt een eigen kopbalk met het logo en een kruisje: de kop van de
pagina zit eronder en is dan niet meer bereikbaar, dus het paneel
moet zelf een uitgang hebben. */
.js .kop__menu{display:none}
.js .kop__menu[data-open]{
display:flex;flex-direction:column;
position:fixed;inset:0;z-index:60;
margin:0;border-top:0;
background:var(--papier);
}
.js .kop__menu[data-open] .menupaneel__kop{
display:flex;align-items:center;justify-content:space-between;gap:16px;
flex:none;
padding:10px 18px;
padding-top:calc(10px + env(safe-area-inset-top,0px));
border-bottom:1px solid var(--rule);
}
/* Het logo in het paneel is hetzelfde logo als in de kop erboven; een
ander formaat laat het springen op het moment dat je het menu opent. */
.menupaneel__kop .kop__merk{min-height:44px}
.menusluit{
width:48px;height:48px;flex:none;padding:0;
display:inline-flex;align-items:center;justify-content:center;
background:none;color:var(--navy);
border:2px solid var(--navy);border-radius:var(--r-knop);
cursor:pointer;
}
.menusluit:hover{background:rgba(0,42,118,.06)}
.menusluit span{position:relative;display:block;width:18px;height:2px;background:transparent}
.menusluit span::before,.menusluit span::after{
content:"";position:absolute;left:0;top:0;width:18px;height:2px;background:currentColor;
}
.menusluit span::before{transform:rotate(45deg)}
.menusluit span::after{transform:rotate(-45deg)}
.js .kop__menu[data-open] .menupaneel__lijst{
flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;
padding:6px 18px 20px;
}
.js .kop__menu[data-open] .menupaneel__lijst a:not(.knop){min-height:60px}
.js .kop__menu[data-open] .menupaneel__voet{
display:grid;gap:12px;flex:none;
border-top:1px solid var(--rule);
padding:16px 18px;
padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));
}
/* De groene knop staat onderaan het paneel; in de lijst zou hij er
twee keer staan. */
.js .kop__menu[data-open] .menupaneel__lijst .knop{display:none}
.menupaneel__voet .knop{width:100%;font-size:1.0625rem}
.menupaneel__bel{margin:0;font-size:1rem;color:var(--muted)}
.menupaneel__bel a{
color:var(--navy);font-weight:700;font-size:1rem;
display:inline-flex;align-items:center;min-height:44px;
}
/* De body wordt vastgezet op de plek waar hij stond (het script zet de
top). Alleen overflow:hidden houdt iOS niet tegen. */
body.menu-open{position:fixed;left:0;right:0;width:100%;overflow:hidden}
/* De beheerbalk van WordPress staat op z-index 99999 en zou dwars door
het paneel heen komen — precies over het logo en het kruisje. Boven
600px staat die balk vast, dus schuift het paneel eronder. Daaronder
scrolt hij mee met de pagina en leggen we het paneel er gewoon
overheen; de balk is toch niet te gebruiken zolang het menu open is. */
.js .admin-bar .kop__menu[data-open]{top:32px}
@media (max-width:782px){.js .admin-bar .kop__menu[data-open]{top:46px}}
@media (max-width:600px){
.js .admin-bar .kop__menu[data-open]{top:0;z-index:100000}
}
}
/* ---------------------------------------------------------------
Smal — vanaf hier is de telefoon leidend
--------------------------------------------------------------- */
@media (max-width:900px){
.wrap{padding:0 18px}
.raster{margin-top:36px}
.raster--2{gap:36px}
.knoppen{gap:10px}
.knop{padding:11px 18px}
/* Genummerde blokken stapelen bij het scrollen: elk blok blijft even
staan en het volgende schuift eroverheen. Zo lees je ze één voor één
in plaats van langs een lange kolom te scrollen, en zie je aan de
randjes hoeveel er nog komen.
Sticky en niet met een script: het kost niets, het werkt zonder
JavaScript, en het valt vanzelf weg als iemand minder beweging wil. */
.raster--stapel{display:block}
.raster--stapel .blok{
position:sticky;
top:calc(84px + var(--stapel, 0) * 14px);
margin-bottom:16px;
}
.raster--stapel .blok:last-child{margin-bottom:0}
/* Kaartrijen schuif je op een telefoon opzij in plaats van er eindeloos
langs te scrollen. Zes kaarten onder elkaar is een halve pagina waar
niemand doorheen komt.
De rij loopt bewust door tot de rand van het scherm: dan zie je aan de
half afgesneden kaart dat er meer staat. De schuifbalk blijft ook
zichtbaar — verbergen maakt het mooier en onvindbaar. Genummerde
blokken blijven wél onder elkaar staan; die lees je, je bladert ze
niet door. */
.raster--kaarten{
display:flex;grid-template-columns:none;
overflow-x:auto;overflow-y:hidden;
scroll-snap-type:x mandatory;
gap:16px;
margin-left:-18px;margin-right:-18px;
padding:2px 18px 14px;
scrollbar-width:thin;
scrollbar-color:var(--rule-strong) transparent;
overscroll-behavior-x:contain;
-webkit-overflow-scrolling:touch;
}
.raster--kaarten > *{flex:0 0 78vw;scroll-snap-align:start}
.raster--kaarten:focus-visible{outline:3px solid var(--blauw);outline-offset:4px;border-radius:6px}
.beeldvlak{padding:18px;min-height:220px}
.beeldvlak--breed{min-height:240px}
.beeldvlak__brief{font-size:.8125rem;max-width:none}
.naamkaartje{font-size:1.5rem;padding:9px 17px 11px}
/* De namenmuur is de kern van dit concept en moet ook op een telefoon
als muur lezen, niet als een lijstje. Kleiner, maar nog steeds groot. */
.namenmuur{font-size:clamp(1.75rem,9vw,2.5rem);margin-top:26px}
.rail{margin-top:34px}
.rail__spoor{gap:16px}
.rail .teamlid{flex:0 0 76vw}
.tijdlijn{margin-top:30px}
.beschikbaarheid{max-width:100%;padding:16px 18px}
.verwijzer__lijst{gap:12px}
.stappen li{grid-template-columns:40px minmax(0,1fr);gap:14px;padding:18px 0}
.formulier{margin-top:28px;gap:18px}
/* Klikvlakken minimaal 44 bij 44 px — beeldgids, hoofdstuk
Toegankelijkheid. In de voettekst stonden ze op 32. */
.voet a{min-height:44px}
.voet ul{gap:2px}
.voet__slot a{min-height:44px;padding-right:4px}
.voet{padding:52px 0 32px}
.voet__rasters{gap:28px;margin-top:34px}
.voet__slot{margin-top:38px;gap:8px 18px;justify-content:flex-start}
}
@media (max-width:480px){
.wrap{padding:0 16px}
.raster--kaarten{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}
.raster--kaarten > *{flex:0 0 82vw}
body{font-size:1.0625rem}
.knoppen{flex-direction:column;align-items:stretch}
.knoppen .knop{width:100%}
.voet__rasters{grid-template-columns:minmax(0,1fr)}
.voet__contact{grid-column:auto}
}
/* =====================================================================
Smaak A — Bandenritme
Naar B. Amsterdam Padel. De pagina is een reeks volvlak-kleurbanden.
Eén accentkleur per band, nooit twee navy-banden naast elkaar.
===================================================================== */
/* ---------------------------------------------------------------
Banden — het paginaritme.
Eén accentkleur per band. Nooit twee navy-banden naast elkaar.
--------------------------------------------------------------- */
.band{padding:clamp(64px,9vw,120px) 0;position:relative}
.band--papier{background:var(--papier);color:var(--navy)}
.band--zand{background:var(--zand);color:var(--navy)}
.band--navy{background:var(--navy);color:var(--papier)}
.band--navy{--knoplijn:var(--papier);--knoplijn-hover:rgba(250,246,240,.12);
--kaderlijn:rgba(250,246,240,.35);--zachtetekst:#A9BBDD}
.band--navy .gedempt{color:#A9BBDD}
.band--navy .inleiding{color:#DCE4F5}
/* De boog. Beeldgids: hooguit één per pagina, als sectieovergang.
Nooit als versiering in een hoek, nooit gespiegeld gestapeld. */
.boog::before{
content:"";position:absolute;
left:0;right:0;top:-64px;height:130px;
border-radius:50% 50% 0 0 / 100% 100% 0 0;
z-index:0;
}
.band--papier.boog::before{background:var(--papier)}
.band--zand.boog::before{background:var(--zand)}
.band--navy.boog::before{background:var(--navy)}
/* --- Hero: foto over de volle breedte, tekst er direct op --- */
/* De hero vult bewust niet het hele eerste scherm. Er moet een strook van de
band eronder zichtbaar blijven: dat is de aanwijzing dat er meer is. */
.hero{
position:relative;padding:0;min-height:min(60vh,540px);display:flex;
background:var(--navy);color:var(--papier);
--knoplijn:var(--papier);--knoplijn-hover:rgba(250,246,240,.14);
}
.hero > .beeldvlak{
position:absolute;inset:0;
border-radius:0;min-height:0;
align-items:flex-start;justify-content:flex-end;padding:24px;
}
/* Navy sluier, van links naar rechts. De tekst staat op het donkere deel en
het pand blijft rechts vrij in beeld. Zonder sluier valt papieren tekst weg
tegen een lichte lucht of fel gras — en elke nieuwe foto heeft er een. */
.hero > .beeldvlak::after{
content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:
linear-gradient(90deg,rgba(0,42,118,.92) 0%,rgba(0,42,118,.8) 30%,
rgba(0,42,118,.4) 58%,rgba(0,42,118,0) 80%),
linear-gradient(0deg,rgba(0,30,86,.45) 0%,rgba(0,30,86,0) 48%);
}
/* Iets onder het midden: bij een foto van mensen aan tafel staan de
gezichten dan in beeld en niet de lamp erboven. */
.hero > .beeldvlak img{object-position:50% 60%}
.hero .beeldvlak__brief{max-width:30ch}
.hero__tekst{
position:relative;z-index:2;
max-width:var(--breed);margin:0 auto;
padding:clamp(40px,5vw,72px) 24px clamp(44px,5.5vw,80px);
width:100%;
display:flex;flex-direction:column;justify-content:flex-end;
}
.hero__paneel{max-width:44rem}
.hero__paneel h1{
font-size:clamp(2.25rem,4.4vw,3.625rem);max-width:none;color:var(--papier);
text-shadow:0 2px 30px rgba(0,20,60,.35);
}
.hero__paneel .inleiding{
color:#DCE4F5;max-width:40ch;
text-shadow:0 1px 18px rgba(0,20,60,.4);
}
@media (max-width:900px){
.band{padding:clamp(48px,8vw,80px) 0}
.hero{min-height:0}
.hero__tekst{padding:28px 18px 32px}
/* Op een telefoon staat de tekst onderaan over de volle breedte, dus de
sluier loopt van onder naar boven en het pand blijft bovenin zichtbaar. */
.hero > .beeldvlak::after{
background:linear-gradient(0deg,rgba(0,42,118,.94) 0%,rgba(0,42,118,.84) 45%,
rgba(0,42,118,.25) 78%,rgba(0,42,118,0) 100%);
}
.beeldvlak--hoog{min-height:0}
/* In de hero staat de briefing bovenin en het paneel eronder; op een
telefoon botsen die als de briefing blijft zweven. */
.hero > .beeldvlak{position:absolute;inset:0;padding:16px;justify-content:flex-start}
.hero .beeldvlak__brief{max-width:none;font-size:.75rem}
.hero{min-height:72vh}
.boog::before{top:-38px;height:86px}
}
/* =====================================================================
WordPress — wat het blokthema er bovenop nodig heeft
Alleen aanvullingen. Er wordt hier geen kleur, letter of maat
toegevoegd die niet al hierboven staat; alles leest uit dezelfde
variabelen, zodat de contrastregels op één plek blijven.
===================================================================== */
/* De kop plakt; met de beheerbalk erboven moet hij die hoogte opschuiven,
anders schuift hij eroverheen. Onder 600px doet WordPress dat andersom:
daar scrolt de beheerbalk gewoon weg, dus dan moet de kop weer op nul —
anders blijft er een kier waar de pagina doorheen schuift. */
.admin-bar .kop{top:32px}
@media (max-width:782px){.admin-bar .kop{top:46px}}
@media (max-width:600px){.admin-bar .kop{top:0}}
/* Kern-blokken die in de patterns voorkomen. De patterns zetten zelf de
klassen uit de beeldgids; dit haalt alleen de ruimte weg die WordPress
standaard tussen blokken legt.
Let op de :where(). Hier stond eerst .wp-block-group{margin-block:0}, en
dat was raak: elk kaartraster, elke tijdlijn en elk stappenblok is óók
een wp-block-group, dus die verloren allemaal hun eigen bovenmarge en
plakten tegen de tekst erboven. Met :where() weegt deze regel nul, zodat
elke eigen regel hem verslaat en alleen de standaard van WordPress
sneuvelt. */
:where(.wp-block-group.is-layout-flow) > * + *{margin-block-start:0}
.wp-block-columns{margin-block:0}
.wp-block-image{margin:0}
.wp-block-image img{border-radius:inherit}
.wp-block-buttons{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.wp-block-button__link{
display:inline-flex;align-items:center;justify-content:center;
min-height:44px;padding:11px 24px;
font-family:var(--f-display);font-weight:700;font-size:1rem;
letter-spacing:-.005em;
border-radius:var(--r-knop);border:2px solid transparent;
text-decoration:none;cursor:pointer;
background:var(--groen);color:var(--navy);
transition:transform .15s var(--uit),background-color .15s;
}
.wp-block-button__link:hover{background:#6BBB37;transform:translateY(-1px)}
/* De omlijnde variant leest zijn kleur uit --knoplijn; elk donker vlak
zet die één keer om. Zonder dat staat er navy op navy. */
.wp-block-button.is-style-outline .wp-block-button__link,
.knop--lijn{
background:none;
color:var(--knoplijn,var(--navy));
border-color:var(--knoplijn,var(--navy));
}
.wp-block-button.is-style-outline .wp-block-button__link:hover{
background:var(--knoplijn-hover,rgba(0,42,118,.06));
color:var(--knoplijn,var(--navy));
}
/* Lijsten in lopende tekst */
.band ul.lijst{padding-left:22px;margin:0 0 16px;max-width:66ch}
.band ul.lijst li{margin-bottom:6px}
.band ol.lijst{padding-left:22px;margin:0 0 16px;max-width:66ch}
.band ol.lijst li{margin-bottom:6px}
/* Uitklapper — de veelgestelde vragen van de huidige site. Het detail-
element werkt zonder JavaScript; dat is hier de reden dat het er staat. */
.vragen{margin-top:36px;border-top:1px solid var(--rule-strong)}
.vraag{border-bottom:1px solid var(--rule-strong)}
.band--navy .vragen,.band--navy .vraag{border-color:rgba(250,246,240,.3)}
.vraag > summary{
list-style:none;cursor:pointer;
display:flex;align-items:center;justify-content:space-between;gap:20px;
min-height:60px;padding:16px 0;
font-family:var(--f-display);font-weight:700;font-size:1.125rem;
}
.vraag > summary::-webkit-details-marker{display:none}
.vraag > summary::after{
content:"";flex:none;width:14px;height:14px;
border-right:2px solid currentColor;border-bottom:2px solid currentColor;
transform:rotate(45deg) translate(-3px,-3px);
transition:transform .15s var(--uit);
}
.vraag[open] > summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.vraag > div{padding:0 0 22px;max-width:66ch}
.vraag > div p:last-child{margin-bottom:0}
/* Contactgegevens — één centraal blok, niet los per pagina overgetypt. */
.gegevens{display:grid;gap:26px;margin-top:36px;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.gegevens h3{margin-bottom:8px}
.gegevens p{margin:0;font-size:1.0625rem}
.gegevens a{display:inline-flex;align-items:center;min-height:44px}
/* Partnerkaart — logo op een papieren vlak, want de logo's van anderen
liggen net zo vast als het onze. */
.partner__logo{
background:var(--papier);border-radius:var(--r-kaart) var(--r-kaart) 0 0;
padding:22px;display:flex;align-items:center;justify-content:center;
min-height:150px;
}
.partner__logo img{max-height:104px;width:auto;object-fit:contain}
.partner__woordmerk{
font-family:var(--f-display);font-weight:800;
font-size:1.25rem;line-height:1.15;letter-spacing:-.02em;
color:var(--navy);text-align:center;max-width:16ch;
}
/* Verhalen- en vacature-archief */
.paginakop{padding:clamp(56px,8vw,104px) 0 clamp(48px,6vw,80px)}
.entry__inhoud > * + *{margin-top:20px}
.entry__inhoud h2{margin-top:44px}
.entry__inhoud h3{margin-top:32px}
/* Notitie voor de redactie.
Die staat in de pagina zelf, zodat de instructie bij de tekst blijft die
hij bedoelt — maar een bezoeker ziet hem niet. Hij verschijnt alleen als
je bent ingelogd en in de editor. Een site die eruitziet als een
bouwplaats vertelt de verkeerde mensen wat er nog niet af is. */
.nognietecht{display:none}
body.logged-in .nognietecht{display:block}
.nognietecht,
.formulier__fout{
background:var(--zand);color:var(--navy);
border-left:4px solid var(--klei);
border-radius:0 var(--r-kaart) var(--r-kaart) 0;
padding:14px 18px;margin:0 0 26px;
font-size:.9375rem;line-height:1.5;max-width:66ch;
}
.nognietecht strong,.formulier__fout strong{font-family:var(--f-display);font-weight:700}
.band--zand .nognietecht{background:#DCCBB0}
.band--navy .nognietecht{background:rgba(250,246,240,.1);color:var(--papier);border-left-color:var(--zon)}
/* De foutmelding van het formulier ziet een bezoeker juist wél. */
.formulier__fout{display:block}
/* Zoekveld en paginering */
/* Overslaanlink werkt in een blokthema alleen als hij bovenaan de body
staat; WordPress zet er soms nog een balk boven. */
.overslaan{position:fixed}
/* Een foto in een beeldvlak komt uit een afbeeldingsblok, dus met een
eromheen. Die neemt de plaats in van de losse uit het
prototype; het gearceerde vlak blijft eronder liggen zolang de foto
laadt of ontbreekt. */
.beeldvlak--foto > figure.wp-block-image{
position:absolute;inset:0;margin:0;height:100%;width:100%;
}
.beeldvlak--foto > figure.wp-block-image img{
width:100%;height:100%;object-fit:cover;border-radius:0;display:block;
}
.beeldvlak--foto > .naamkaartje{position:absolute;left:20px;bottom:20px;z-index:2;margin:0}
.hero .beeldvlak--foto > .naamkaartje{left:24px;bottom:24px}
/* De tijdlijn en de stappen zijn in het blokthema groepen in plaats van
een . Een lijstitem in de editor mag geen alinea's bevatten, en een
tijdstip met een zin eronder is precies dat. De opmaak blijft gelijk. */
.tijdlijn .moment{padding:0 0 30px 26px;position:relative}
.tijdlijn .moment:last-child{padding-bottom:0}
.tijdlijn .moment::before{
content:"";position:absolute;left:-7px;top:9px;
width:12px;height:12px;border-radius:50%;background:var(--groen);
}
.tijdlijn .moment .tijd{
font-family:var(--f-display);font-weight:700;font-size:.9375rem;
color:var(--muted);display:block;margin:0;
}
.tijdlijn .moment p:not(.tijd){margin:2px 0 0;font-size:1.0625rem}
.stappen .stap{
display:grid;grid-template-columns:52px minmax(0,1fr);gap:20px;
padding:22px 0;border-bottom:1px solid var(--rule-strong);align-items:baseline;
}
.band--navy .stappen .stap{border-color:rgba(250,246,240,.3)}
.stappen .stap .n{
font-family:var(--f-display);font-weight:800;font-size:1.25rem;
color:var(--klei);line-height:1.3;margin:0;
}
.band--navy .stappen .stap .n{color:var(--zon)}
.stappen .stap h3{margin-bottom:5px;grid-column:2}
.stappen .stap p:not(.n){margin:0;max-width:56ch;grid-column:2}
@media (max-width:900px){
.stappen .stap{grid-template-columns:40px minmax(0,1fr);gap:14px;padding:18px 0}
}
/* Een knop onderaan een kaart duwt zichzelf naar beneden, zodat kaarten
met verschillend lange tekst toch onderaan gelijk uitkomen. */
.kaart__body .wp-block-buttons{margin-top:auto;align-self:flex-start}
.kaart__body > .wp-block-buttons:first-child{margin-top:0}
/* Eén kaart in een rij mag zich niet over de volle bandbreedte uitrekken:
dan ziet een echte openstaande vacature eruit als een vergeten regel.
Alleen die ene krijgt een bovengrens; staan er meer, dan verdelen ze de
rij zoals altijd. */
.raster--kaarten > :only-child{max-width:420px}
/* De harde gegevens bij een vacature: uren, contract, opleiding, plaats.
Zelfde opbouw als het bewijsblok — een groene haarlijn boven elk feit. */
.feiten{
display:grid;gap:18px;margin-top:36px;
grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.feiten > div{border-top:2px solid var(--groen);padding-top:14px}
.feiten__label{
display:block;font-family:var(--f-display);font-weight:700;
font-size:.875rem;letter-spacing:.04em;text-transform:uppercase;
color:var(--muted);margin-bottom:4px;
}
.band--navy .feiten__label{color:#A9BBDD}
.feiten__waarde{display:block;font-size:1.0625rem}
/* Het tekstpaneel in de hero ligt bovenop de foto. Staat het onderwerp in
het midden van het beeld, dan valt het paneel er deels overheen; de foto
is breder dan hoog, dus alleen verticaal valt er iets te schuiven.
Deze klasse legt de uitsnede tegen de bovenkant, zodat er zoveel
mogelijk van de persoon bóven het paneel uitkomt. Het is een keuze per
foto, geen vaste regel: wisselt het beeld, dan haal je hem weg. */
/* =====================================================================
Het formulier in stappen
Eén vraag per scherm, met een balkje dat laat zien hoe ver je bent. Een
lang formulier schrikt af; vijf korte vragen niet.
Let op de .js voor de regels die iets verbergen. Zonder JavaScript staan
alle stappen onder elkaar als één gewoon formulier, met de verzendknop
eronder. Een aanmeldformulier dat een script nodig heeft om te werken,
kan op deze site niet.
===================================================================== */
.formulier--stappen{max-width:660px}
.stap{border:0;margin:0;padding:0;min-width:0}
.stap + .stap{margin-top:32px}
.stap__vraag{
font-family:var(--f-display);font-weight:800;
font-size:clamp(1.375rem,2.6vw,1.75rem);
line-height:1.15;letter-spacing:-.02em;
padding:0;margin:0 0 18px;
}
/* De keuzekaarten. Radio's, maar dan als aanklikbare vlakken: een groter
doel dan een rondje van twaalf pixels. */
.keuzes{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.keuze{
position:relative;display:block;
padding:16px 18px 18px;
background:var(--papier);
border:2px solid var(--rule-strong);
border-radius:var(--r-kaart);
cursor:pointer;
transition:border-color .15s,background-color .15s;
}
.band--zand .keuze{background:var(--papier)}
.keuze:hover{border-color:var(--navy)}
.keuze input{position:absolute;opacity:0;width:0;height:0}
.keuze__kop{
display:block;font-family:var(--f-display);font-weight:700;font-size:1.0625rem;
margin-bottom:2px;
}
.keuze__uitleg{display:block;font-size:.9375rem;color:var(--muted);line-height:1.45}
.keuze:has(input:checked){
border-color:var(--navy);
background:var(--zand);
}
.keuze:has(input:focus-visible){outline:3px solid var(--blauw);outline-offset:2px}
/* Het balkje. Alleen zinvol als de stappen ook echt één voor één komen. */
.voortgang,.voortgang__tekst{display:none}
.js .formulier--stappen .voortgang{
display:block;height:4px;border-radius:999px;
background:var(--rule);margin:0 0 10px;overflow:hidden;
}
.js .formulier--stappen .voortgang__tekst{
display:block;margin:0 0 26px;
font-size:.9375rem;color:var(--muted);
}
.voortgang__balk{
display:block;height:100%;width:0;
background:var(--groen);
transition:width .3s var(--uit);
}
/* Met JavaScript is alleen de stap zichtbaar waar je bent. */
.js .formulier--stappen .stap{display:none}
.js .formulier--stappen .stap[data-actief]{display:block;margin-top:0}
.stapknoppen{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.stapknoppen [data-vorige],.stapknoppen [data-volgende]{display:none}
.js .stapknoppen [data-volgende]{display:inline-flex}
.js .stapknoppen [data-vorige]{display:inline-flex}
.js .stapknoppen [data-vorige][hidden],
.js .stapknoppen [data-volgende][hidden]{display:none}
.js .stapknoppen [data-versturen]{display:none}
.js .stapknoppen [data-versturen][data-tonen]{display:inline-flex}
.formulier__bellen{margin:18px 0 0;font-size:.9375rem;color:var(--muted)}
.formulier__bellen a{
color:var(--navy);font-weight:700;
display:inline-flex;align-items:center;min-height:44px;
}
@media (max-width:900px){
.keuzes{grid-template-columns:minmax(0,1fr)}
.stapknoppen{flex-direction:column-reverse;align-items:stretch}
.stapknoppen .knop{width:100%}
}
/* Zonder :has() blijft de gekozen kaart herkenbaar aan de rand die de
browser om het label zet zodra het radiootje focus heeft. */
@supports not (selector(:has(*))){
.keuze input:checked ~ .keuze__kop{text-decoration:underline;text-underline-offset:4px}
}