/* S1 — header + hero (navy, on-dark).
Alleen sectie-specifiek; knoppen/pills/play-btn/reveals komen uit base.css. */
/* ---------- Header ---------- */
/* Anchors compenseren voor de fixed header */
html { scroll-padding-top: 96px; }
/* Fixed + transparant bovenaan, zodat het hero-watermerk erachter doorloopt */
.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 40;
background: transparent;
transition: background-color .25s ease, box-shadow .25s ease;
}
/* JS zet .is-scrolled zodra er gescrold is */
.site-header.is-scrolled {
background: var(--surface-deep);
border-bottom: 1px solid var(--navy-700);
box-shadow: 0 12px 32px rgba(2, 14, 44, .35);
}
/* Mobiel menu open: altijd navy achtergrond, ook bovenaan de pagina */
.site-header.nav-open {
background: var(--surface-deep);
}
.site-header:has(.nav-toggle[aria-expanded="true"]) {
background: var(--surface-deep);
}
.site-header.is-scrolled .container { padding-block: 14px; }
.site-header .container { transition: padding .25s ease; }
.site-header .container {
display: flex;
align-items: center;
gap: var(--gap-sm);
padding-block: 22px;
}
.site-header .header-logo {
flex: none;
display: inline-flex;
}
.site-header .header-logo img {
height: 34px;
width: auto;
}
.site-header .site-nav {
margin-left: auto;
}
.site-header .nav-list {
display: flex;
align-items: center;
gap: clamp(20px, 2.4vw, 34px);
}
.site-header .nav-list > li > a,
.site-header .nav-drop-btn {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 14px;
font-weight: 600;
color: var(--text-strong-inv);
transition: color .15s ease;
}
.site-header .nav-list > li > a:hover,
.site-header .nav-drop-btn:hover {
color: var(--orange-500);
}
.site-header .nav-chevron {
flex: none;
transition: transform .18s ease;
}
.site-header .has-dropdown:hover .nav-chevron,
.site-header .has-dropdown:focus-within .nav-chevron {
transform: rotate(180deg);
}
/* Dropdown: puur CSS (hover + focus-within), geen JS meer.
.nav-drop-btn is een ECHTE link naar oplossingen.html — klikken navigeert,
hoveren opent de sublijst. De sublijst bevat alleen de drie dienstpagina's;
"Alle oplossingen" is vervallen omdat het top-level item die rol nu vervult. */
.site-header .has-dropdown {
position: relative;
}
.site-header .nav-dropdown {
position: absolute;
top: calc(100% + 16px);
left: 50%;
min-width: 232px;
padding: 8px;
background: var(--surface-card);
border: 1px solid var(--line-paper);
border-radius: var(--r-md);
box-shadow: var(--shadow-lift);
opacity: 0;
visibility: hidden;
transform: translate(-50%, 8px);
transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
/* Hover-brug: de dropdown staat 16px onder de link. Zonder deze onzichtbare
strook valt de hover weg zodra de muis het gat in duikt en klapt het menu
dicht voordat je een item kunt raken. */
.site-header .nav-dropdown::before {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 100%;
height: 16px;
}
.site-header .has-dropdown:hover .nav-dropdown,
.site-header .has-dropdown:focus-within .nav-dropdown {
opacity: 1;
visibility: visible;
transform: translate(-50%, 0);
}
.site-header .nav-dropdown a {
display: block;
padding: 11px 14px;
border-radius: var(--r-sm);
font-size: 14px;
font-weight: 600;
color: var(--text-strong);
transition: background-color .15s ease;
}
.site-header .nav-dropdown a:hover {
background: var(--sand-50);
}
/* Nav-CTA compacter dan de standaard .btn */
.site-header .header-cta {
padding: 11px 20px;
flex: none;
}
/* Hamburger — alleen mobiel */
.site-header .nav-toggle {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 40px;
height: 40px;
padding: 9px;
flex: none;
}
.site-header .nav-toggle span {
display: block;
width: 22px;
height: 2px;
border-radius: 2px;
background: var(--text-strong-inv);
transition: transform .3s cubic-bezier(.22, .61, .36, 1), opacity .2s ease;
}
/* Open: de drie streepjes worden een kruisje (gap 5px + hoogte 2px = 7px verschuiving) */
.site-header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; transform: scaleX(.4); }
.site-header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
.site-header .nav-toggle span { transition: none; }
}
/* ---------- Hero ---------- */
.hero {
position: relative;
display: flex;
overflow: hidden; /* cropt het watermerk aan de rand */
padding-top: 110px; /* header is fixed (uit de flow) */
}
/* Timo 2026-07-10: hero exact viewport-hoog zodat de logostrip precies op
de fold eindigt. Het volledige svh-BUDGET-blok staat verderop in dit
bestand, NA de base-regels (zelfde specificiteit — volgorde beslist). */
@media (min-width: 881px) {
.hero {
min-height: 100vh;
min-height: 100svh;
}
}
/* Watermerk: solide (gevulde) versie van het echte Sennasearch-beeldmerk
(wit asset, natuurlijke proporties — nooit vervormen), groot rechtsboven
en van de rand af gecropt; loopt door tot de bovenrand achter de
transparante fixed header. */
.hero-watermark {
position: absolute;
top: clamp(-240px, -12vw, -130px);
right: clamp(-200px, -10vw, -100px);
width: clamp(500px, 60vw, 940px);
height: auto; /* aspect-ratio van het beeldmerk aanhouden */
opacity: .09; /* solid vlak oogt zwaarder dan outline; laag houden voor leesbare H1/header */
pointer-events: none;
user-select: none;
z-index: 0;
}
/* Timo 2026-07-10 (P24): watermerk fors groter op desktop — de onderste ring
eindigt vlak boven de fold. Maat in svh (hero = 100svh), dus de onderrand
landt op elk formaat op ~94% van de hero-hoogte; width:auto houdt de
natuurlijke proporties (asset is ~vierkant). Bij deze maat de opacity
iets terug: groot solid vlak oogt zwaarder. */
@media (min-width: 881px) {
.hero-watermark {
top: -14svh;
height: 108svh; /* onderrand = -14svh + 108svh = 94svh */
width: auto;
right: clamp(-260px, -12vw, -120px);
opacity: .07;
}
}
.hero-wrap {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
width: 100%;
}
.hero-grid {
flex: 1;
display: grid;
/* Timo 2026-07-10: video nog breder (~805px op 1440); tekstkolom houdt
een minimum zodat de H1 + kop-punt niet wrapt (max-content van de
langste H1-regel = 444.8px op 1440, gemeten; 450px = veilige marge) */
grid-template-columns: minmax(450px, 1fr) minmax(0, 1.85fr);
gap: clamp(26px, 2vw, 34px);
align-items: center;
padding-block: clamp(24px, 4vh, 44px) clamp(32px, 5vh, 52px);
}
/* — Linkerkolom — */
.hero-copy {
position: relative;
}
.hero-eyebrow {
margin-bottom: 30px;
}
.hero-title {
margin-bottom: 26px;
}
/* H1-maat (base/desktop): iets onder --text-h1 zodat de kop-punt nooit wrapt.
Staat bewust VÓÓR de media queries zodat de mobiele override later in de
bron wint (zelfde specificiteit → bronvolgorde beslist). */
.hero h1 { font-size: var(--text-hero); } /* gedeelde hero-schaal (tokens.css), sitebreed gelijk */
.hero-lead {
max-width: 24rem;
margin-bottom: 34px;
}
.hero-ctas {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px;
margin-bottom: 44px;
}
.hero-rating {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px;
}
.hero-avatars {
display: flex;
flex: none;
}
.hero-avatars img {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--navy-950);
}
.hero-avatars img + img {
margin-left: -10px;
}
.hero-rating-text {
font-size: var(--text-small);
font-weight: 600;
color: var(--text-body-inv);
}
.hero-stars {
display: flex;
gap: 3px;
color: var(--orange-500);
}
.hero-stars svg {
width: 16px;
height: 16px;
fill: currentColor;
}
/* Dot-grid decor naast de H1 (zeer laag contrast, per PNG) */
.hero-dots {
position: absolute;
top: 92px;
right: -110px;
width: 96px;
height: 232px;
background-image: radial-gradient(color-mix(in srgb, var(--text-strong-inv) 20%, transparent) 1.5px, transparent 1.6px);
background-size: 19px 19px;
pointer-events: none;
}
@media (max-width: 1100px) {
.hero-dots {
display: none;
}
}
/* — Rechterkolom: videokaart — */
/* ---------- Hero-media: beeld + twee informatiekaarten (Timo 2026-08-20) ----------
De wrapper bestaat omdat .hero-video overflow:hidden heeft (voor de hover-zoom)
en de dienstenkaart juist links BUITEN het beeld moet uitsteken. Alles wat
positioneert hangt dus aan .hero-media, niet aan het kader zelf. */
.hero-media {
position: relative;
/* Eigen stapelcontext. Zonder dit lekt de z-index:2 van .hero-diensten naar
buiten: .hero-media zelf heeft z-index auto en vormt dus geen context, dus
de kaart concurreert rechtstreeks met alles daarbuiten. Met isolate blijft
die 2 binnen dit blok en is de hero-CTA hieronder met een simpele 1 al
hoger. Zie ook de regel bij .hero-ctas in het (max-width: 560px)-blok. */
isolation: isolate;
}
/* — Dienstenkaart: papier, steekt links buiten het beeld — */
/* PROEFOPSTELLING B (Timo 2026-08-20, 18:15). De kaart stond linksonder en stak
links buiten het beeld uit; nu staat hij in de RECHTERhoek, op de plek waar de
vertrouwd-kaart zat. Timo wil kijken of dat beter oogt, dus dit is met opzet
omkeerbaar gehouden.
TERUG NAAR A: in dit blok `right` weer `left` maken en `bottom` terug op -20px,
en verderop de display:none van .hero-vertrouwd weghalen. Twee regels, geen
markup, dus geen extract/apply/push. De volledige stand A staat in commit
fdbb61b.
WAAROM HIER GEEN OVERHANG NAAR BUITEN. Linksonder stak de kaart 34px buiten het
beeld, de gap tussen de twee kolommen in: dode ruimte, dus dat kon. Rechts is
die ruimte de paginamarge (--gutter), en daar uitsteken breekt de rooilijn die
de hele pagina aanhoudt. Hij zit daarom binnen het beeld, met dezelfde inset
als de vertrouwd-kaart had. */
.hero-diensten {
position: absolute;
z-index: 2;
right: clamp(16px, 1.6vw, 24px);
bottom: clamp(16px, 1.6vw, 24px);
width: clamp(276px, 24vw, 336px);
background: var(--surface-card);
border: 1px solid var(--line-paper);
border-radius: var(--r-md);
box-shadow: var(--shadow-panel);
}
.hero-dienst {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 18px;
text-decoration: none;
transition: background-color .2s ease;
}
.hero-dienst + .hero-dienst {
border-top: 1px solid var(--line-paper);
}
/* GEEN overflow:hidden op de kaart om de hoeken netjes te houden, maar een
radius per rij. Met overflow:hidden knipt de kaart de focusring van de link
erin af (base.css zet outline-offset: 3px), en dan is met het toetsenbord niet
meer te zien waar je staat. De hover-achtergrond volgt nu de hoek van de rij
in plaats van die van de kaart, en dat is precies hetzelfde beeld. */
.hero-dienst:first-child {
border-radius: var(--r-md) var(--r-md) 0 0;
}
.hero-dienst:last-child {
border-radius: 0 0 var(--r-md) var(--r-md);
}
.hero-dienst:hover {
background: color-mix(in srgb, var(--orange-500) 6%, transparent);
}
.hero-dienst-ico {
flex: none;
width: 26px;
height: 26px;
color: var(--orange-500);
}
.hero-dienst-ico svg {
display: block;
width: 100%;
height: 100%;
}
.hero-dienst-tekst {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
/* Op licht papier, dus de donkere teksttokens en niet de inverse: dit blok ligt
buiten de on-dark-context van de hero. */
.hero-dienst-naam {
font-size: 15px;
font-weight: 700;
line-height: 1.25;
color: var(--text-strong);
}
.hero-dienst-sub {
font-size: 12.5px;
line-height: 1.35;
color: var(--text-body);
}
.hero-dienst .arr,
.hero-dienst-naam .dot { display: none; }
/* — Vertrouwd-kaart: navy, rechtsonder op het beeld — */
.hero-vertrouwd {
position: absolute;
z-index: 2;
right: clamp(16px, 1.6vw, 24px);
bottom: clamp(16px, 1.6vw, 24px);
width: clamp(280px, 26vw, 330px);
display: flex;
align-items: flex-start;
gap: 14px;
padding: 16px 18px;
/* Niet var(--surface-card-dark): die is ondoorzichtig en dan verdwijnt het
beeld eronder helemaal. Een navy met doorkijk plus blur houdt de foto
zichtbaar en de tekst leesbaar. */
background: color-mix(in srgb, var(--navy-950) 82%, transparent);
backdrop-filter: blur(6px);
border: 1px solid color-mix(in srgb, #fff 12%, transparent);
border-radius: var(--r-md);
}
/* PROEFOPSTELLING B (Timo 2026-08-20, 18:15): uit beeld, niet weg. De markup
blijft staan omdat terugzetten dan één regel is; weghalen zou de CMS-sleutels
van s1 laten opschuiven en een nieuwe seed naar Sanity vragen voor iets dat
misschien morgen weer terugkomt. Blijft dit zo, dan gaat de markup er in een
volgende ronde alsnog netjes uit.
NA het blok hierboven en niet ervoor: dat blok zet zelf display:flex, en bij
gelijke specificiteit beslist de bronvolgorde. Ervoor gezet doet deze regel
dus niets, en dat is precies het soort fout dat je pas in de browser ziet.
TERUG NAAR A: deze regel weghalen. */
.hero-vertrouwd {
display: none;
}
.hero-vertrouwd-ico {
flex: none;
width: 30px;
height: 30px;
color: var(--orange-500);
}
.hero-vertrouwd-ico svg {
display: block;
width: 100%;
height: 100%;
}
.hero-vertrouwd-tekst {
font-size: 14px;
line-height: 1.45;
color: var(--text-strong-inv);
text-wrap: pretty;
}
.hero-vertrouwd-sinds {
color: var(--orange-500);
font-weight: 600;
}
.hero-video {
position: relative;
margin: 0;
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--shadow-panel);
/* V1-recept: heel subtiel randje zodat de kaart niet wegvalt in de donkere
achtergrond (V1: 1px solid rgba(255,255,255,.1) — hier via token) */
border: 1px solid color-mix(in srgb, var(--text-strong-inv) 10%, transparent);
}
/* Timo 2026-07-10: de video VOLGT de beschikbare rijhoogte (1fr-rij in de
100svh-hero) in plaats van een eigen px-hoogte af te dwingen — zo kan hij
de logostrip nooit onder de fold duwen. Cap op 550px zodat hij op hoge
schermen niet doorgroeit ("net iets minder hoog" dan de oude 576);
min-height is alleen een vangnet voor het geval de rij smaller uitvalt. */
@media (min-width: 881px) {
/* De hoogte zit sinds 2026-08-20 op .hero-media en niet meer op .hero-video:
het kader is nu een kind van die wrapper, want de dienstenkaart steekt links
buiten het beeld uit en .hero-video heeft overflow:hidden (hover-zoom). */
.hero-media {
height: min(100%, 550px);
min-height: 440px;
}
.hero-video,
.hero-video-thumb {
height: 100%;
}
}
.hero-video-thumb {
width: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
/* Hover-zoom: alleen de thumb scalet, binnen het kader (overflow hidden
op .hero-video); scrim/play-btn/note zijn siblings en blijven staan */
transition: transform .55s cubic-bezier(.22, .61, .36, 1);
}
.hero-video:hover .hero-video-thumb {
transform: scale(1.05);
}
@media (prefers-reduced-motion: reduce) {
.hero-video-thumb { transition: none; }
.hero-video:hover .hero-video-thumb { transform: none; }
}
/* Scrim onderin voor leesbaarheid van de annotatie */
.hero-video::before {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 42%;
background: linear-gradient(to top, color-mix(in srgb, var(--navy-950) 55%, transparent), transparent);
pointer-events: none;
}
.hero-video .play-btn {
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
width: 76px;
height: 76px;
z-index: 2;
}
.hero-video .play-btn::after {
border-left-width: 21px;
border-top-width: 13px;
border-bottom-width: 13px;
margin-left: 6px;
}
/* VERWIJDERD 23 augustus 2026 (SEO-audit, prestaties: "Het lettertype Caveat
wordt op alle 35 pagina's opgehaald terwijl geen enkele pagina het gebruikt").
Deze selectors waren de laatste gebruikers van --font-hand (Caveat). Hun
markup is bij de bouwronde van 20 augustus met de video-placeholders
verdwenen: grep op de klasse geeft 0 treffers over alle 46 gebouwde .html,
sections/, sections-en/ en cms/templates/, terwijl dezelfde grep op de wel
bestaande klasse hero-video-thumb 2 gebouwde pagina's vindt. Komt de
handschrift-notitie terug, dan komt --font-hand in css/tokens.css er weer bij
en Caveat weer in de fonts-URL in de shells.
CONTROLE 23 augustus 2026 (Timo, tweede paar ogen): dit blok stond eerst met
het oorspronkelijke commentaar van 2026-07-10 er ONGEWIJZIGD in, dus met een
echte (* ... *) erin. CSS-commentaar NEST NIET: de eerste sluitmarkering sloot
het hele blok, waarna .hero-video-note:hover, .hero-note-arrow en de twee
mobiele overrides gewoon weer LEVENDE regels waren en de losse sluitmarkering
op de laatste regel de eerstvolgende regel opslokte. Nagemeten in Chrome via
document.styleSheets[0].cssRules: .hero-clients ONTBRAK in de geparste
stylesheet (116 regels voor en 116 na, maar met .hero-clients eruit en vier
dode regels erin). Dat is de logostrip van de homepage-hero, dus display:flex,
de bovenlijn en de padding-block waren weg. Daarom staan de commentaarhaken
van het geciteerde blok hieronder als (* en *) geschreven. Verander dat niet
terug.
Oude waarden verbatim:
.hero-video-note {
position: absolute;
left: 28px;
bottom: 20px;
z-index: 2;
display: flex;
align-items: flex-end;
gap: 10px;
font-family: var(--font-hand);
font-size: 28px;
line-height: 1;
color: var(--text-strong-inv);
transition: transform .25s ease;
}
(* Timo 2026-07-10: periodieke wip-animatie verwijderd; alleen een rustige
hover-lift (transition op transform staat op de basis-regel) *)
.hero-video-note:hover {
transform: translateY(-4px) rotate(-2deg);
}
.hero-note-arrow {
width: 34px;
height: 29px;
flex: none;
margin-bottom: 3px;
}
En de mobiele overrides uit de mediaquery @media (max-width: 560px) verderop
in dit bestand, ook verbatim:
.hero-video-note {
left: 18px;
bottom: 14px;
font-size: 24px;
}
.hero-note-arrow {
width: 28px;
height: 24px;
} */
/* — Logostrip onderin (boven 1px lijn, binnen de navy sectie) — */
.hero-clients {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 20px clamp(24px, 3vw, 40px);
border-top: 1px solid color-mix(in srgb, var(--text-strong-inv) 14%, transparent);
padding-block: 30px 34px;
}
/* Timo 2026-07-10: svh-BUDGET voor de 100svh-hero — geen px-gok maar
viewport-relatieve speling, zodat de logostrip op elk formaat precies op
de fold eindigt. Alle verticale marges/paddings schalen in svh mee; de
video volgt de rijhoogte al (zie .hero-video). Dit blok staat bewust NA
de base-regels: zelfde specificiteit, volgorde beslist. Onder ~750px
viewport-hoogte wint de vaste tekstkolom en groeit de hero natuurlijk
door (min-height, geen squash). */
@media (min-width: 881px) {
.hero {
padding-top: clamp(96px, 12svh, 110px); /* fixed header = 96px minimum */
}
.hero-grid {
grid-template-rows: 1fr; /* rij = de beschikbare ruimte (flex:1), video mag er 100% van nemen */
padding-block: clamp(12px, 2.2svh, 30px) clamp(16px, 3svh, 40px);
}
.hero-eyebrow { margin-bottom: clamp(16px, 3svh, 30px); }
.hero-title { margin-bottom: clamp(12px, 2.6svh, 26px); }
.hero-lead { margin-bottom: clamp(16px, 3.4svh, 34px); }
.hero-ctas { margin-bottom: clamp(20px, 4.4svh, 44px); }
.hero-clients {
padding-block: clamp(14px, 2.8svh, 30px) clamp(16px, 3.2svh, 34px);
}
}
.hero-clients-label {
flex: none;
font-size: 12px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--text-muted-inv);
}
/* Continue marquee: label blijft links, alleen de logo-track scrollt.
Track = 2 identieke lijsten (2e aria-hidden); elke lijst heeft trailing
padding gelijk aan de gap, dus translateX(-50%) loopt naadloos rond. */
.hero-clients-viewport {
flex: 1;
min-width: 0;
overflow: hidden;
/* Timo 2026-07-10: logo-track fadet links en rechts uit; het label staat
buiten deze div, dus de fade schuift er nooit onder */
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.hero-clients-track {
display: flex;
width: max-content;
animation: hero-clients-marquee 32s linear infinite;
}
@keyframes hero-clients-marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.hero-clients-track { animation: none; }
}
.hero-clients-logos {
flex: none;
display: flex;
align-items: center;
gap: clamp(44px, 4.5vw, 68px);
padding-right: clamp(44px, 4.5vw, 68px);
}
.hero-clients-logos li {
flex: none;
display: flex;
align-items: center;
}
.hero-clients-logos img {
height: 26px;
width: auto;
max-width: none;
filter: brightness(0) invert(1);
opacity: .85;
}
@media (max-width: 1280px) {
.hero-clients-logos img {
height: 22px;
}
}
@media (max-width: 1100px) {
/* Label boven de logos zodra de rij te krap wordt */
.hero-clients-label {
flex-basis: 100%;
}
}
/* ---------- Hero-kaarten gestapeld (<=1100) ----------
Onder 1100px wordt de beeldkolom te smal om er twee kaarten overheen te leggen:
de dienstenkaart zou de gezichten afdekken en de vertrouwd-kaart zou tegen de
rechterrand aanlopen. Ze zakken dan onder het beeld, in de leesvolgorde die ze
in de HTML al hebben. */
@media (max-width: 1100px) {
.hero-media {
display: flex;
flex-direction: column;
gap: 14px;
/* De hoogtecap uit het (min-width: 881px)-blok moet hier LOS. Tussen 881 en
1100 gelden beide blokken; laat je de cap staan, dan moeten het beeld en
twee kaarten samen in 550px passen en knijpt de flexkolom de tweede
dienstregel eruit (die kaart heeft overflow:hidden voor zijn afgeronde
hoeken, dus je ziet hem niet eens weglopen -- hij is gewoon weg). */
height: auto;
min-height: 0;
}
/* Beeld terug op zijn eigen beeldverhouding (3/2 uit de basisregel) in plaats
van op 100% van een wrapper die nu geen vaste hoogte meer heeft. */
.hero-video,
.hero-video-thumb {
height: auto;
}
.hero-diensten,
.hero-vertrouwd {
position: static;
width: auto;
}
/* Expliciete volgorde op alle drie. Zonder order op .hero-video zou de
order:4 die het (max-width: 560px)-blok eraan geeft ook hier gelden en
zou het beeld ONDER de kaarten belanden. */
.hero-video {
order: 1;
}
.hero-diensten {
order: 2;
/* Nooit meekrimpen: de kaart heeft overflow:hidden voor zijn afgeronde
hoeken, dus krimpen betekent dat de tweede dienstregel verdwijnt in
plaats van dat je ziet dat er iets niet past. */
flex: none;
}
.hero-vertrouwd {
order: 3;
background: color-mix(in srgb, var(--navy-800) 92%, transparent);
backdrop-filter: none;
}
}
/* ---------- Tablet (~880px) ---------- */
@media (max-width: 880px) {
/* Header: hamburger + uitklapmenu; CTA en toggle rechts */
.site-header .header-cta {
margin-left: auto;
}
.site-header .nav-toggle {
display: inline-flex;
}
.site-header .site-nav {
position: absolute;
top: 100%;
left: 0;
right: 0;
margin-left: 0;
background: var(--navy-900);
border-top: 1px solid var(--line-inv);
border-bottom: 1px solid var(--line-inv);
padding: 12px var(--gutter) 20px;
box-shadow: var(--shadow-panel);
/* Gesloten: onzichtbaar + iets omhoog; opent met een zachte animatie
(geen display:none, anders kan er niets transitionen) */
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: opacity .28s ease, transform .3s cubic-bezier(.22, .61, .36, 1), visibility .3s;
pointer-events: none;
}
/* Open-state: JS zet .nav-open op de header */
.site-header.nav-open .site-nav {
opacity: 1;
visibility: visible;
transform: none;
pointer-events: auto;
}
/* Menu-items komen één voor één binnen (gestaggerd), niet allemaal tegelijk */
.site-header .nav-list > li {
opacity: 0;
transform: translateY(-8px);
transition: opacity .3s ease, transform .3s cubic-bezier(.22, .61, .36, 1);
}
.site-header.nav-open .nav-list > li { opacity: 1; transform: none; }
.site-header.nav-open .nav-list > li:nth-child(1) { transition-delay: .07s; }
.site-header.nav-open .nav-list > li:nth-child(2) { transition-delay: .13s; }
.site-header.nav-open .nav-list > li:nth-child(3) { transition-delay: .19s; }
.site-header.nav-open .nav-list > li:nth-child(4) { transition-delay: .25s; }
@media (prefers-reduced-motion: reduce) {
.site-header .site-nav,
.site-header .nav-list > li,
.site-header .nav-dropdown { transition: none; }
}
.site-header .nav-list {
flex-direction: column;
align-items: stretch;
gap: 0;
}
.site-header .nav-list > li > a,
.site-header .nav-drop-btn {
width: 100%;
justify-content: space-between;
padding: 14px 0;
font-size: 16px;
border-bottom: 1px solid var(--line-inv);
}
.site-header .nav-list > li:last-child > a {
border-bottom: 0;
}
/* Dropdown wordt inline sub-lijst en staat in het hamburgermenu ALTIJD open.
Er is geen toggle meer (de nav-drop-btn is een link die navigeert), dus een
dichtgeklapte stand zou de drie dienstpagina's op mobiel onbereikbaar maken. */
.site-header .nav-dropdown {
position: static;
display: block;
min-width: 0;
transform: none;
box-shadow: none;
border: 0;
border-radius: 0;
background: transparent;
padding: 0 0 6px 14px;
max-height: none;
opacity: 1;
overflow: visible;
visibility: visible;
transition: none;
}
/* De hover-brug is een desktop-hulpje; op mobiel zou hij over de link erboven
liggen en die onklikbaar maken. */
.site-header .nav-dropdown::before {
content: none;
}
/* Chevron suggereert uitklappen; op mobiel staat alles al open. */
.site-header .nav-chevron {
display: none;
}
.site-header .nav-dropdown a {
color: var(--text-body-inv);
padding: 10px 0;
}
.site-header .nav-dropdown a:hover {
background: transparent;
color: var(--orange-500);
}
/* Hero stapelt */
.hero-grid {
grid-template-columns: minmax(0, 1fr);
gap: 48px;
padding-block: 44px 56px;
}
.hero-lead {
max-width: 30rem;
}
.hero-watermark {
width: clamp(320px, 58vw, 520px);
top: clamp(-160px, -16vw, -90px);
right: clamp(-130px, -13vw, -70px);
}
}
/* ---------- Mobiel (~560px) ---------- */
@media (max-width: 560px) {
.site-header .container {
padding-block: 16px;
}
.hero {
padding-top: 72px; /* eyebrow iets dichter op de header (was 84) */
}
.site-header .header-logo img {
height: 28px;
}
.site-header .header-cta {
display: none; /* hero-CTA vangt dit op; menu blijft via hamburger */
}
.site-header .nav-toggle {
margin-left: auto;
}
/* hero-copy platgeslagen zodat de video (een sibling in de grid) tussen de
lead en de CTA's kan zakken; de grid wordt een flex-kolom met expliciete
volgorde: eyebrow → titel → lead → VIDEO → CTA's → rating. */
/* min-height:0 op de hele flex-keten, anders houden de items min-height:auto
en groeien ze met hun inhoud mee (video zou dan niet krimpen). */
.hero-wrap { min-height: 0; }
/* max-height (geen vaste height): op normale telefoons is de grid gewoon
zo hoog als de inhoud (video op volle verhouding, geen gat); op KORTE
schermen wordt hij op de fold gecapt en mag de video net genoeg krimpen
zodat de CTA's boven de fold blijven. */
.hero-grid {
display: flex;
flex-direction: column;
align-items: flex-start; /* links uitlijnen (override .hero-grid align-items:center uit base) */
max-height: calc(100svh - 80px); /* 72 header-pad + 8 veiligheidsmarge zodat de rating de fold net klaart */
min-height: 0;
gap: 0;
padding-block: 14px 14px;
}
.hero-copy { display: contents; }
.hero-eyebrow { order: 1; margin-bottom: 14px; }
.hero-title { order: 2; margin-bottom: 12px; }
.hero-lead { order: 3; margin-bottom: 14px; max-width: 34rem; }
/* .hero-media is sinds 2026-08-20 het flexkind van .hero-grid; .hero-video zit
er een niveau dieper in. De order-regel moet dus mee verhuizen, anders krijgt
de wrapper de standaard order 0 en staat het hele blok BOVEN de eyebrow. */
.hero-media { order: 4; margin-bottom: 14px; }
.hero-ctas { order: 5; margin-bottom: 14px; }
.hero-rating { order: 6; }
/* Mobiel: groot lettertype, strakke line-height (base was ~1.65). De kop
blijft standaard op 3 regels; alleen als het scherm te KORT wordt om
video + rating samen boven de fold te houden, valt de eerste
weg en
wordt het 2 regels (zie de max-height-query hieronder). Desktop = base. */
.hero h1 { font-size: var(--text-hero-s); line-height: 1.04; } /* gedeelde ≤560-schaal (tokens.css) */
/* Video absorbeert de resterende hoogte (preferente maat ~20svh, maar mag tot
0 krimpen zodat de CTA's ALTIJD boven de fold blijven, ook op de kleinste
telefoon). Op ruime schermen groeit hij mee. */
/* Vaste beeldverhouding i.p.v. flex-fill: video is proportioneel aan de
breedte (op elke telefoon even dik, nooit letterbox-dun) en schaalt op
smalle/korte schermen vanzelf mee, zodat de CTA's boven de fold blijven.
De svh-cap vangt de zeldzame korte-landscape af. Timo 2026-07-11. */
.hero-video {
width: 100%; /* volledig breed (flex-start stretcht niet vanzelf) */
flex: 0 1 auto; /* mag op korte schermen krimpen zodat de rating boven de fold past */
aspect-ratio: 16 / 10;
height: auto;
max-height: 42svh;
border-radius: var(--r-md);
}
.hero-video-thumb { height: 100%; }
/* Twee CTA's: volle breedte, elk precies 50% (flex:1 met gelijke basis) */
.hero-ctas {
width: 100%;
flex-wrap: nowrap;
gap: 12px;
}
.hero-ctas .btn {
flex: 1 1 50%;
min-width: 0;
padding-inline: clamp(8px, 2.4vw, 18px);
font-size: clamp(11px, 3vw, 14px);
white-space: nowrap;
justify-content: center;
}
.hero-ctas .btn .arr { display: none; } /* ruimte sparen: beide CTA's passen naast elkaar tot 320px */
.hero-video .play-btn {
width: 60px;
height: 60px;
}
.hero-video .play-btn::after {
border-left-width: 17px;
border-top-width: 10px;
border-bottom-width: 10px;
margin-left: 5px;
}
.hero-clients {
padding-block: 24px 28px;
gap: 18px;
}
.hero-clients-logos {
gap: 32px;
padding-right: 32px;
}
.hero-clients-logos img {
height: 20px;
}
}
/* Korte telefoons: kop van 3 → 2 regels (eerste
weg → "DE JUISTE MENSEN."
op één regel) zodat de video op volle verhouding + de rating samen boven de
fold blijven passen. Op hogere schermen blijven de 3 regels staan. */
/* ---------- Hero-kaarten op de telefoon (<=560) ----------
HET FOLD-BUDGET IS HIER BINDEND. .hero-grid heeft op deze breedte een
max-height van 100svh - 80px, met een uitgesproken bedoeling: eyebrow, kop,
lead, beeld, CTA's en de ratingregel moeten samen boven de vouw passen, en het
BEELD is het enige dat mag krimpen. Twee kaarten erbij (samen ruim 220px)
halen dat budget onderuit.
Daarom hier: de dienstenkaart blijft, de vertrouwd-kaart niet. De dienstenkaart
is navigatie, hij brengt je naar de twee routes en dat is precies wat een
bezoeker op de telefoon zoekt. De vertrouwd-kaart is dat niet: die zegt
letterlijk hetzelfde als het label van de logostrip een paar honderd pixels
lager ("VERTROUWD DOOR AMBITIEUZE BEDRIJVEN") en als de pill boven de kop
("RECRUITMENT SINDS 2006"). Er gaat dus geen informatie verloren. */
@media (max-width: 560px) {
.hero-media {
width: 100%;
flex: 0 1 auto;
min-height: 0;
}
/* De order:4 hierboven hoort bij .hero-grid, niet bij deze flexkolom. */
.hero-video {
order: 1;
margin-bottom: 0;
}
.hero-vertrouwd {
display: none;
}
/* DE SCHADUW LAG OVER DE CTA'S (Timo 2026-08-20, 19:30 -- hij zag het, ik heb
het nagemeten). Op de telefoon staan de knoppen direct onder het beeld, en
zowel .hero-video als .hero-diensten draagt --shadow-panel: 0 30px 70px
rgba(2,14,44,.45). Die reikt tot een kleine 100px naar beneden, dus tot over
de knoppen. Gemeten op 390px, bovenrand van de primaire knop: (143,71,24)
terwijl het merkoranje (246,116,12) is -- 42% donkerder, met een zichtbaar
verloop over de knop.
Het was er al vóór de balk over de foto ging (toen 29%, van de fotoschaduw
alleen); de tweede schaduwbron maakte het erger. Op desktop staat de CTA in
de linkerkolom en is er niets aan de hand: daar meet de knop exact
(246,116,12).
De knoppen gaan BOVEN de schaduw in plaats van de schaduw weg. De schaduw
doet zijn werk onder het beeld nog gewoon; alleen wordt hij niet meer over
een interactief element heen getekend. Na de fix meet de knop weer exact
(246,116,12) op alle drie de monsterpunten. */
.hero-ctas,
.hero-rating {
position: relative;
z-index: 1;
}
/* DE KAART OVER DE FOTO (Timo 2026-08-20, 18:45). Hij stond ONDER het beeld en
kostte daarmee zijn volle hoogte plus een gap in de kolom. Dat is precies wat
de logostrip onder de vouw duwde: op 390x844 eindigde de strip op 946 bij een
viewport van 844. Absoluut over het beeld kost hij nul flow-hoogte, en het
beeld groeit terug naar zijn eigen 16/10.
Kleiner ook, want een kaart van 144px op een beeld van ~214px dekt driekwart
af. Compacter recept: kleinere icoontjes, kleinere tekst, minder padding.
Alleen hier; op desktop blijft de kaart zoals hij was. */
/* DIENSTENBALK ERUIT OP DE TELEFOON (Timo 2026-08-20, 20:15). Hij lag over de
foto en was al teruggebracht tot een balk van 42px, maar de hero werd er nog
steeds druk van: kop, lead, foto met een label erop, twee knoppen en een
ratingregel, allemaal binnen een viewport. Je weet dan niet waar je moet
kijken. Op DESKTOP blijft de kaart staan; daar is de ruimte er wel en doet
hij zijn werk.
Er gaat geen informatie verloren: de twee diensten staan direct onder de hero
in s2, met hun omschrijving erbij.
GEEN HOOGTEWINST, en dat is met opzet niet het punt. De balk stond absoluut
over de foto en kostte dus al nul flow-hoogte; de logostrip staat hier boven
de vouw door de compressie verderop in dit bestand, niet doordat de balk weg
is. Het recept voor die balk (twee vakken naast elkaar, flex 1 1 auto,
ondertitels uit) staat in git op 2676ffd. */
.hero-diensten {
display: none;
}
}
@media (max-width: 560px) and (max-height: 720px) {
.hero-title .hero-br-desktop { display: none; }
}
/* De losse hoogtegrens waarop de dienstenbalk verdween is vervallen: sinds
2026-08-20 20:15 staat hij op ELKE telefoon uit, ongeacht de schermhoogte.
Oude waarde verbatim:
@media (max-width: 560px) and (max-height: 660px) { .hero-diensten { display: none; } } */
/* HELE KRAPPE TELEFOONS (iPhone SE-formaat en smaller). Ook met de kaart over de
foto past de logostrip daar net niet: gemeten op 320x700 eindigde hij op 738.
Waar de ruimte zit, gemeten en niet gegokt: de strip draagt zelf 52px padding
(24 boven, 28 onder) rond een label van 38px (het wrapt daar naar twee regels)
en logo's van 20px, en de hero-kolom heeft vijf marges van 14px tussen zijn
onderdelen. Dit haalt daar 20px uit de marges en 18px uit de strip-padding.
Bewust apart van het blok hierboven: op 390x844 en ruimer is dit niet nodig en
maakt het de hero alleen maar samengeperst. */
@media (max-width: 560px) and (max-height: 760px) {
.hero-eyebrow,
.hero-title,
.hero-lead,
.hero-media,
.hero-ctas {
margin-bottom: 10px;
}
.hero .hero-clients {
/* 14 onder en niet 18: op 320 wrapt de Nederlandse lead een regel verder dan
de Engelse en kwam de strip precies 2px te laag uit. */
padding-block: 16px 14px;
}
}
/* DE LOGOSTRIP MOET BOVEN DE VOUW (Timo 2026-08-20, 18:45). Op de ruimere
telefoons lukt dat al doordat de kaart geen flow-hoogte meer kost. Op de
krappere blijft het net niet passen: gemeten 360x780 -> strip eindigde op 807,
320x700 -> op 763. Dit knijpt de laatste tientallen pixels eruit door het beeld
iets platter te zetten en het verticale ritme strakker te maken.
Waarom hier en niet in de basisregel: op 390x844 en ruimer is het niet nodig en
zou het de foto onnodig klein maken. */
@media (max-width: 560px) and (max-height: 820px) {
.hero-video {
aspect-ratio: 16 / 9;
}
.hero-grid {
padding-block: 10px 10px;
}
}
/* ---------- Header licht (witte dienst-hero's, HERO-SYSTEEM §9) ----------
Modifier op het bestaande header-contract: dienstpagina's (W&S/RPO/TI)
openen wit, dus donker logo (senna-horizontaal-navy.webp in de markup),
donkere nav-links en een paper-achtergrond in de scrolled/open-stand.
De dropdown is al licht (surface-card) en blijft ongewijzigd. */
.site-header--licht .nav-list > li > a,
.site-header--licht .nav-drop-btn {
color: var(--text-strong);
}
.site-header--licht .nav-list > li > a:hover,
.site-header--licht .nav-drop-btn:hover {
color: var(--orange-600);
}
.site-header--licht .nav-toggle span {
background: var(--text-strong);
}
.site-header--licht.is-scrolled {
background: var(--surface-card);
border-bottom: 1px solid var(--line-paper);
box-shadow: var(--shadow-card);
}
.site-header--licht.nav-open,
.site-header--licht:has(.nav-toggle[aria-expanded="true"]) {
background: var(--surface-card);
}
@media (max-width: 880px) {
/* Mobiel uitklapmenu: op lichte pagina's een licht paneel (het navy paneel
zou hier donkere links onleesbaar maken). */
.site-header--licht .site-nav {
background: var(--surface-card);
border-top: 1px solid var(--line-paper);
border-bottom: 1px solid var(--line-paper);
box-shadow: var(--shadow-lift);
}
}
/* ---------- Taalwissel NL/EN (2026-08-11, site tweetalig) ----------
Nieuw blok, er stond hier nog geen taalwissel, dus geen oude waarde.
PLEK: als LAATSTE in .nav-list, niet los in de headerbalk. Onder 560px
staat in die balk alleen nog het logo (28px hoog, ~160px breed) plus de
hamburger (40px); met --gutter op 24px blijft er op een 320px-scherm ~72px
over, en dat is minder dan een wissel plus de flex-gap van 24px kost. In de
nav-lijst kost hij de balk nul pixels en past hij op elke breedte.
SPECIFICITEIT: .site-header .nav-list > li > a is 0-2-2 en zet font-size,
kleur en (mobiel) width/border. De regels hieronder staan daarom op
.site-header .nav-list .nav-lang a (0-3-1) zodat ze winnen. */
.site-header .nav-lang {
display: flex;
align-items: center;
gap: 6px;
/* Scheidt de wissel van de gewone nav-items zonder een extra element */
padding-left: clamp(14px, 1.6vw, 20px);
border-left: 1px solid var(--line-inv);
}
.site-header--licht .nav-lang {
border-left-color: var(--line-paper);
}
.site-header .nav-list .nav-lang a {
display: inline-flex;
align-items: center;
/* 44x44 hitbox zonder de balk hoger te maken: de padding valt in de
bestaande verticale ruimte van de header. */
min-height: 32px;
padding: 6px 4px;
font-size: 13px;
font-weight: 700;
letter-spacing: .04em;
color: var(--text-muted-inv);
transition: color .15s ease;
}
.site-header--licht .nav-list .nav-lang a {
color: var(--text-muted);
}
.site-header .nav-list .nav-lang a:hover,
.site-header .nav-list .nav-lang a:focus-visible {
color: var(--orange-500);
}
/* De actieve taal is ook zonder kleurwaarneming te herkennen: hij staat vol
in de tekstkleur van de header terwijl de andere gedempt is. Voor een
schermlezer doet aria-current="true" in de markup het werk. */
.site-header .nav-list .nav-lang a[aria-current] {
color: var(--text-strong-inv);
cursor: default;
}
.site-header--licht .nav-list .nav-lang a[aria-current] {
color: var(--text-strong);
}
/* Kleur van de schuine streep: de lijnkleur was op de donkere header niet te
zien (navy-700 op navy). Nu dezelfde gedempte tekstkleur als de inactieve
taal, zodat er "NL / EN" staat in plaats van "NL EN".
Oude waarde verbatim:
.site-header .nav-lang-sep { font-size: 12px; line-height: 1; color: var(--line-inv); }
.site-header--licht .nav-lang-sep { color: var(--line-paper); } */
.site-header .nav-lang-sep {
font-size: 12px;
line-height: 1;
color: var(--text-muted-inv);
}
.site-header--licht .nav-lang-sep {
color: var(--text-muted);
}
@media (max-width: 880px) {
/* In het uitklapmenu is de wissel een eigen rijtje onder de laatste
nav-link. De generieke mobiele regel maakt van elke > li > a een volle
rij met onderrand; die moet hier expliciet terug, anders staan NL en EN
onder elkaar in plaats van naast elkaar. */
/* DUBBELE LIJN WEGGEHAALD (Timo 2026-08-24). In het uitgeklapte hamburgermenu stonden onder
het laatste nav-item (Contact) twee hairlines pal onder elkaar, 4px uit elkaar:
1. de border-bottom die de generieke mobiele regel
`.site-header .nav-list > li > a` aan ELKE menuregel geeft. Contact is niet de
laatste li (de taalwissel is dat), dus de :last-child-reset op regel ~898 haalde
die bij Contact niet weg.
2. de border-top die dit .nav-lang-blok erbovenop zette als eigen scheiding.
Weggehaald is nummer 2, want nummer 1 hoort bij het rijenritme van het menu en zou,
als je hem bij Contact zou uitzetten, dat ritme bij precies een item breken. De
taalwissel houdt zijn eigen ruimte (margin-top + padding-top) en staat dus nog steeds
los onder de menu-items, alleen zonder tweede streep.
De bijbehorende --licht-override viel hiermee vanzelf weg.
Oude waarde verbatim:
.site-header .nav-lang {
padding-left: 0;
border-left: 0;
border-top: 1px solid var(--line-inv);
margin-top: 4px;
padding-top: 12px;
gap: 8px;
}
.site-header--licht .nav-lang {
border-top-color: var(--line-paper);
} */
.site-header .nav-lang {
padding-left: 0;
border-left: 0;
margin-top: 4px;
padding-top: 12px;
gap: 8px;
}
.site-header .nav-list .nav-lang a {
width: auto;
padding: 6px 2px;
border-bottom: 0;
font-size: 15px;
}
}
/* De stagger in het uitklapmenu liep tot en met het vierde item; met de
taalwissel erbij zijn het er zes. Oude regels verbatim:
.site-header.nav-open .nav-list > li:nth-child(1) { transition-delay: .07s; }
.site-header.nav-open .nav-list > li:nth-child(2) { transition-delay: .13s; }
.site-header.nav-open .nav-list > li:nth-child(3) { transition-delay: .19s; }
.site-header.nav-open .nav-list > li:nth-child(4) { transition-delay: .25s; } */
@media (max-width: 880px) {
.site-header.nav-open .nav-list > li:nth-child(5) { transition-delay: .31s; }
.site-header.nav-open .nav-list > li:nth-child(6) { transition-delay: .37s; }
}