/* ==========================================================================
BERTUS v3 — licht, warm, kleurrijk (revisie 08-07-2026)
Warm ivoor als vaste basis, per pagina één felle seventies-kleur.
Statisch HTML + CSS + GSAP. De bewegingsmechaniek van v3 blijft;
alleen de skin is nieuw.
========================================================================== */
/* ============ 0. FONTS ============
Zelf gehost sinds 18-08-2026; hiervoor stond hier een @import naar
fonts.googleapis.com. Die was render-blokkerend (de browser moest eerst de
CSS ophalen vóór hij wist wélke woff2 hij nodig had) en bracht twee externe
hosts mee. Net als GSAP staan de bestanden nu in het project: nul externe hosts.
De bestanden komen letterlijk van Google (opgehaald met een moderne
user-agent, dus woff2 en niet truetype). Alleen de subsets latin en latin-ext
zijn meegenomen — samen dekken die het Nederlands, het Engels én de
leestekens; cyrillic en vietnamese zijn weggelaten (scheelt ~40%).
Het zijn variabele fonts: Google levert één bestand voor álle gewichten van
een familie. Daarom staat er per familie/stijl/subset één @font-face met een
gewichtsbereik in plaats van een blok per gewicht. De bereiken zijn precies de
gewichten die de site opvraagt (Space Grotesk 500-700, Hanken 400-700).
font-display: swap houdt de tekst zichtbaar tijdens het laden. */
/* ---- Space Grotesk (display: koppen, logo, labels) ---- */
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 500 700;
font-display: swap;
src: url('/assets/fonts/space-grotesk-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: 'Space Grotesk';
font-style: normal;
font-weight: 500 700;
font-display: swap;
src: url('/assets/fonts/space-grotesk-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;
}
/* ---- Hanken Grotesk (broodtekst) ---- */
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('/assets/fonts/hanken-grotesk-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: 'Hanken Grotesk';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('/assets/fonts/hanken-grotesk-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: 'Hanken Grotesk';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('/assets/fonts/hanken-grotesk-italic-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: 'Hanken Grotesk';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('/assets/fonts/hanken-grotesk-italic-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;
}
/* ============ 1. TOKENS ============ */
:root {
/* kleur — basis */
--basis: #F7F4EE;
--basis-diep: #EFEAE0;
--inkt: #14110E;
--inkt-zacht: rgba(20, 17, 14, .66);
--inkt-vaag: rgba(20, 17, 14, .42);
--rand: rgba(20, 17, 14, .10);
--rand-sterk: rgba(20, 17, 14, .20);
/* kleur — vinyl (platen blijven zwart, dat knalt juist op ivoor) */
--vinyl: #1A1512;
--vinyl-diep: #0E0B09;
--vinyl-groef: rgba(247, 244, 238, .055);
/* paginakleur = het Bertus-huisstijlblauw, op élke pagina hetzelfde (17-08-2026) */
--paginakleur: #0093C9;
--paginakleur-diep: #0A5E86;
--paginakleur-zacht: #D3E8F4;
--paginakleur-tekst: #0A6E9B; /* voor gróte tekst-accenten (AA large) */
--paginakleur-gloed: rgba(0, 147, 201, .16);
/* Vlakken (banden, CTA's, schuine blokken) staan sinds 19-08-2026 in het
blauw van het logo-driehoekje zelf: #0093C9 met hooguit deze verdieping
op de plek waar tekst staat. Het oude petrol (#0A5E86) is eruit. */
--paginakleur-vlak: #0093C9;
--paginakleur-vlak-diep: #0A76A6; /* wit haalt hier 4,9:1 */
/* Merkblauw voor tekst ÓP een donkere foto. #0093C9 heeft een relatieve
luminantie van .251 en haalt daarmee tegen zwart hooguit 6,02:1 — op een
herofoto met lichte plekken zakt dat naar 2,1-3,9:1, ver onder de 4,5:1 die
hier hard geldt. Deze tint (luminantie .40) haalt op dezelfde plekken
5-8:1 en blijft duidelijk hetzelfde blauw. Alleen voor de fotohero's;
op ivoor blijft --paginakleur-tekst gelden. (18-08-2026) */
--paginakleur-opfoto: #3CB6E8;
/* vaste Bertus-huisstijlblauw voor het logo — gelijk aan de paginakleur */
--logokleur: #0093C9;
/* randen & schaduw */
--schaduw: 0 18px 44px -18px rgba(58, 38, 22, .22);
--schaduw-zwaar: 0 34px 80px -24px rgba(58, 38, 22, .3);
/* typografie */
--font-display: "Space Grotesk", "Segoe UI", sans-serif;
--font-body: "Hanken Grotesk", "Segoe UI", sans-serif;
/* beweging */
--ease-luxe: cubic-bezier(.22, 1, .36, 1);
--ease-in-out: cubic-bezier(.65, 0, .35, 1);
/* maten */
--container: 1220px;
--radius: 16px;
/* z-lagen */
--z-progress: 110;
--z-header: 120;
--z-overlay: 130;
--z-loader: 190;
--z-cursor: 200;
}
/* Eén merkkleur voor de héle site: het blauw uit het Bertus-logo.
De per-pagina-haken blijven staan (zodat variatie later terug kan), maar
verwijzen nu allemaal naar dezelfde blauwe set uit :root. */
body[data-pagina="home"],
body[data-pagina="over"],
body[data-pagina="services"],
body[data-pagina="werken"],
body[data-pagina="contact"] {
--paginakleur: #0093C9; --paginakleur-diep: #0A5E86;
--paginakleur-zacht: #D3E8F4; --paginakleur-tekst: #0A6E9B;
--paginakleur-gloed: rgba(0, 147, 201, .16);
}
/* ============ 2. RESET & BASIS ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html:focus-within { scroll-behavior: smooth; }
body {
background: var(--basis);
color: var(--inkt);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
min-height: 100dvh;
}
/* heel subtiele film-grain — op ivoor mag dit bijna onzichtbaar zijn */
body::after {
content: "";
position: fixed; inset: 0;
pointer-events: none;
z-index: 5;
opacity: .028;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}
::selection { background: var(--paginakleur); color: var(--basis); }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
:focus-visible { outline: 2px solid var(--paginakleur-diep); outline-offset: 3px; border-radius: 4px; }
main { display: block; }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 28px; }
/* visueel verborgen, maar wél leesbaar voor schermlezers (knop-namen e.d.) */
.vh {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
[id] { scroll-margin-top: 110px; }
.section { position: relative; padding: 110px 0; }
.section--deep {
background:
radial-gradient(900px 480px at 82% 0%, var(--paginakleur-gloed), transparent 60%),
linear-gradient(180deg, var(--basis-diep), var(--basis-diep) 70%, var(--basis));
}
/* kleurband (voorheen "paper"): diepe paginakleur met ivoren tekst */
.section--paper { background: var(--paginakleur-vlak); color: var(--basis); }
.section--paper .eyebrow { color: rgba(247, 244, 238, .85); }
.section--paper .lead { color: rgba(247, 244, 238, .84); }
/* ============ 3. TYPOGRAFIE ============ */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.025em; line-height: 1.06; }
h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }
.display { font-size: clamp(2.6rem, 6.4vw, 5.4rem); }
.lead { font-size: clamp(1.02rem, 1.35vw, 1.2rem); color: var(--inkt-zacht); max-width: 56ch; }
.eyebrow {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--font-display); font-size: .78rem; font-weight: 600;
letter-spacing: .22em; text-transform: uppercase; color: var(--paginakleur-diep);
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .7; }
.text-accent { color: var(--paginakleur-tekst); }
.section-head { max-width: 720px; margin-bottom: 26px; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--center .lead { margin-left: auto; margin-right: auto; }
.text-koper { color: var(--paginakleur-tekst); }
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-2 { margin-top: 12px; } .mt-3 { margin-top: 20px; } .mt-4 { margin-top: 32px; } .mt-5 { margin-top: 56px; }
/* Titelregels met mask-reveal.
Het masker krijgt .18em onderruimte: de regelhoogte (1.06) is kleiner dan de
em-box van het font, waardoor overflow:hidden de staarten van p, j en g
afknipte (4px op 360/390, 8px op 1440). Bij het holle accentwoord zag je
daardoor een lus die onderaan openstond en vlak eindigde. De negatieve marge
haalt die ruimte weer uit de flow, dus de regelafstand, de positie linksonder
en de ondermarge van de hero blijven exact gelijk. (18-08-2026) */
.line { display: block; overflow: hidden; padding-bottom: .18em; margin-bottom: -.18em; }
.line > span { display: inline-block; will-change: transform; }
/* ============ 4. KNOPPEN & LINKS ============ */
.btn {
position: relative; display: inline-flex; align-items: center; justify-content: center;
padding: 15px 30px; border-radius: 999px;
background: var(--paginakleur-diep); color: var(--basis);
font-family: var(--font-display); font-weight: 600; font-size: .98rem; letter-spacing: .01em;
text-decoration: none; border: 1px solid transparent;
overflow: hidden; white-space: nowrap;
transition: transform .35s var(--ease-luxe), background .3s ease, color .3s ease, box-shadow .35s ease;
box-shadow: 0 14px 34px -14px var(--paginakleur);
}
/* glans die bij hover van links naar rechts over de knop loopt
(verving 17-08-2026 de magnetische knoppen) */
.btn::before {
content: ""; position: absolute; inset: 0;
background: linear-gradient(105deg, transparent 30%, var(--glans, rgba(255, 255, 255, .38)) 50%, transparent 70%);
transform: translateX(-135%); transition: transform .75s var(--ease-luxe);
}
.btn:hover::before, .btn:focus-visible::before { transform: translateX(135%); }
.btn:hover { box-shadow: 0 20px 46px -14px var(--paginakleur); transform: translateY(-2px); }
.btn:active { transform: scale(.97); }
.btn > .btn__label { position: relative; display: inline-flex; align-items: center; gap: 10px; }
.btn--ghost { background: transparent; color: var(--inkt); border-color: var(--rand-sterk); box-shadow: none; }
.btn--ghost:hover { border-color: var(--paginakleur-diep); color: var(--paginakleur-diep); box-shadow: none; }
/* op lichte knoppen is een witte glans onzichtbaar: daar een blauwe waas */
.btn--ghost, .btn--koper, .btn--paper { --glans: rgba(0, 147, 201, .26); }
.btn--koper {
background: var(--paginakleur-zacht); color: var(--inkt);
border-color: var(--rand);
box-shadow: 0 14px 34px -16px var(--paginakleur);
}
.btn--sm { padding: 11px 22px; font-size: .88rem; }
.btn--groot { padding: 19px 38px; font-size: 1.06rem; }
.btn--paper { background: var(--basis); color: var(--paginakleur-diep); box-shadow: 0 14px 34px -16px rgba(0, 0, 0, .4); }
.icon { width: 18px; height: 18px; flex: none; }
.link {
display: inline-flex; align-items: center; gap: 8px;
color: var(--paginakleur-diep); text-decoration: none; font-weight: 600; font-family: var(--font-display); font-size: .95rem;
}
.link .icon { transition: transform .35s var(--ease-luxe); }
.link:hover .icon { transform: translateX(6px); }
.btn-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.pill {
display: inline-flex; align-items: center; gap: 9px;
padding: 9px 18px; border-radius: 999px;
border: 1px solid var(--rand); background: rgba(255, 253, 248, .7);
font-size: .88rem; color: var(--inkt-zacht);
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--paginakleur); box-shadow: 0 0 0 3px var(--paginakleur-gloed); }
.stack { list-style: none; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
/* ============ 5. INTRO-LOADER (needle drop, 1× per sessie) ============ */
.intro-loader {
position: fixed; inset: 0; z-index: var(--z-loader);
display: flex; align-items: center; justify-content: center;
background: var(--basis);
cursor: pointer;
}
.intro-loader .il-scene { position: relative; width: min(320px, 60vw); aspect-ratio: 1; }
.il-plaat {
position: absolute; inset: 0; border-radius: 50%;
background:
radial-gradient(circle, var(--paginakleur) 0 18%, transparent 18.5%),
repeating-radial-gradient(circle, var(--vinyl-groef) 0 1px, transparent 1px 4px),
radial-gradient(circle, var(--vinyl), var(--vinyl-diep) 70%);
box-shadow: 0 30px 80px -22px rgba(58, 38, 22, .5), inset 0 0 60px rgba(0, 0, 0, .5);
}
.il-plaat::after {
content: "BERTUS"; position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display); font-weight: 700; letter-spacing: .3em; font-size: .72rem;
color: var(--basis);
}
.il-arm {
position: absolute; top: -6%; right: -4%; width: 44%; height: 60%;
transform-origin: 82% 12%;
rotate: -28deg;
}
.il-arm svg { width: 100%; height: 100%; overflow: visible; }
.il-tekst {
position: absolute; left: 50%; bottom: -72px; transform: translateX(-50%);
font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--inkt-vaag);
white-space: nowrap;
}
.intro-loader .il-gordijn { position: absolute; inset: 0; background: var(--basis); transform: scaleY(0); transform-origin: top; }
/* ============ 6. HEADER — echt glas ↔ ivoren pill ============
Twee standen, allebei via dezelfde --kop-*-variabelen zodat de bestaande
transition tussen de standen blijft doorlopen:
1. uitgeklapt (scrollY <= 140) = ECHT GLAS over de herofoto — witte glans,
blur+saturate, lichte witte rand, inset-lichtlijn en witte tekst.
2. pill (.is-pill) = het oude ivoor met donkere tekst, ongewijzigd.
Leesbaarheid boven een LICHTE foto: de home-hero wisselt vier foto's af en
de teamfoto is rechtsboven bijna wit (gemeten backdrop-luminantie 0,79).
Daarom zit er behalve de witte glans óók backdrop-brightness(.48) + een
lichte donkere waas in het glas (dat dimt de foto zonder hem te verbergen —
structuur blijft zichtbaar, anders dan bij een dekkend vlak) plus een
tekstschaduw. Nagemeten op de gerenderde pixels, lichtste glasblok per
herofoto: 15,0 / 7,5 / 9,8 / 6,5:1 met wit en 6,1:1 met #F2F8FB (de
navigatiekleur) — de teamfoto is de zwaarste en haalt dus ruim 4,5:1.
Subpagina's met fotohero: 6,4 tot 8,3:1. */
.site-header {
position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-header);
padding: 12px 16px 0;
pointer-events: none;
/* glasstand */
/* 19-08-2026: de uitgeklapte balk is echt glas — de foto blijft er
doorheen zichtbaar. De donkere waas is grotendeels weg (brightness van
.48 naar .74, vlak van .16 naar .09) en in ruil daarvoor staan de rand,
de glans en de tekstschaduw sterker, zodat wit leesbaar blijft. */
--kop-glans: linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .07));
--kop-vlak: rgba(8, 24, 34, .09);
--kop-filter: blur(24px) saturate(1.7) brightness(.74);
--kop-rand: rgba(255, 255, 255, .36);
--kop-schaduw: 0 12px 38px -20px rgba(6, 18, 26, .5), inset 0 1px 0 rgba(255, 255, 255, .42);
--kop-tekst: #F2F8FB;
--kop-tekst-sterk: #FFFFFF;
--kop-actief: #FFFFFF;
--kop-lijn: #7FD3F0;
--kop-logo: #FDFAF4;
--kop-sep: rgba(255, 255, 255, .45);
--kop-chip: rgba(255, 255, 255, .18);
--kop-focus: #BFE8FA;
--kop-txtschaduw: 0 1px 3px rgba(6, 16, 24, .72);
}
/* pill-stand: precies het oude ivoor (glans-laag toegevoegd zodat de
background-lagen in beide standen gelijk zijn en dus vloeiend overgaan) */
.site-header.is-pill {
--kop-glans: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .34));
--kop-vlak: rgba(250, 248, 243, .82);
--kop-filter: blur(16px) saturate(1.25) brightness(1);
--kop-rand: var(--rand-sterk);
--kop-schaduw: 0 22px 54px -20px rgba(58, 38, 22, .45), 0 0 0 1px var(--paginakleur-gloed);
--kop-tekst: var(--inkt-zacht);
--kop-tekst-sterk: var(--inkt);
--kop-actief: var(--paginakleur-diep);
--kop-lijn: var(--paginakleur);
--kop-logo: #14110E;
--kop-sep: var(--rand-sterk);
--kop-chip: transparent;
--kop-focus: var(--paginakleur-diep);
--kop-txtschaduw: none;
}
/* De contactpagina heeft géén fotohero: daar zou het donkere glas over de
ivoren pagina hangen. Die pagina houdt in de uitgeklapte stand de oude
ivoren balk met donkere tekst; de pill-stand is er sowieso al gelijk. */
body[data-pagina="contact"] .site-header:not(.is-pill) {
--kop-glans: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .34));
--kop-vlak: rgba(247, 244, 238, .58);
--kop-filter: blur(16px) saturate(1.25) brightness(1);
--kop-rand: rgba(20, 17, 14, .09);
--kop-schaduw: 0 8px 30px -18px rgba(58, 38, 22, .35);
--kop-tekst: var(--inkt-zacht);
--kop-tekst-sterk: var(--inkt);
--kop-actief: var(--paginakleur-diep);
--kop-lijn: var(--paginakleur);
--kop-logo: #14110E;
--kop-sep: var(--rand-sterk);
--kop-chip: transparent;
--kop-focus: var(--paginakleur-diep);
--kop-txtschaduw: none;
}
.header-shell {
pointer-events: auto;
width: 100%; max-width: 1180px; height: 66px;
margin: 0 auto; padding: 0 10px 0 30px;
display: flex; align-items: center; justify-content: space-between; gap: 22px;
color: var(--kop-tekst-sterk);
text-shadow: var(--kop-txtschaduw);
background: var(--kop-glans), var(--kop-vlak);
backdrop-filter: var(--kop-filter); -webkit-backdrop-filter: var(--kop-filter);
border: 1px solid var(--kop-rand);
/* 19-08-2026: de balk heeft dezelfde ronding als de knop erin. Met de oude
20px-hoek stak er een rechthoekig glasvlakje om de ronde My Bertus-knop
uit — dat las als een tweede achtergrond achter de bolling. */
border-radius: 999px;
box-shadow: var(--kop-schaduw);
transition:
max-width .65s var(--ease-luxe), height .5s var(--ease-luxe),
padding .5s var(--ease-luxe), gap .5s var(--ease-luxe),
border-radius .55s var(--ease-luxe),
background .4s ease, border-color .4s ease, box-shadow .5s ease,
color .4s ease, backdrop-filter .4s ease, -webkit-backdrop-filter .4s ease;
}
.site-header.is-pill .header-shell {
max-width: 236px; height: 56px; padding: 0 10px 0 18px; gap: 12px;
border-radius: 999px;
}
/* zonder backdrop-filter (oude browsers) valt het glas terug op een dichtere
waas, anders zou witte tekst zó op de foto staan */
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
.site-header:not(.is-pill) { --kop-vlak: rgba(8, 20, 28, .66); }
body[data-pagina="contact"] .site-header:not(.is-pill) { --kop-vlak: rgba(247, 244, 238, .94); }
}
.header-shell .btn { text-shadow: none; }
.header-shell :focus-visible { outline-color: var(--kop-focus); }
/* het woordmerk in het logo is normaal inkt-donker; op het glas wordt het ivoor */
.site-header .logo-woord path { fill: var(--kop-logo); transition: fill .4s ease; }
.logo {
display: inline-flex; align-items: center; gap: 10px;
text-decoration: none; white-space: nowrap;
}
/* het aangeleverde logo (symbolen verkleuren mee via --paginakleur) */
.logo svg { height: 30px; width: auto; flex: none; display: block; }
.overlay-top .logo svg { height: 34px; }
.footer-merk .logo svg { height: 36px; }
.header-nav {
display: flex; gap: 17px;
max-width: 640px; overflow: hidden; white-space: nowrap;
transition: opacity .25s ease, max-width .55s var(--ease-luxe);
}
.site-header.is-pill .header-nav { opacity: 0; max-width: 0; pointer-events: none; }
.header-nav a {
position: relative; padding: 6px 2px;
color: var(--kop-tekst); text-decoration: none; font-size: .92rem; font-weight: 500;
transition: color .25s ease;
}
.header-nav a::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
background: var(--kop-lijn); transform: scaleX(0); transform-origin: right;
transition: transform .35s var(--ease-luxe);
}
.header-nav a:hover { color: var(--kop-tekst-sterk); }
.header-nav a.is-actief { color: var(--kop-actief); font-weight: 600; }
.header-nav a:hover::after, .header-nav a.is-actief::after { transform: scaleX(1); transform-origin: left; }
.header-acties { display: flex; align-items: center; gap: 6px; }
.lang-switch {
display: inline-flex; align-items: center; gap: 2px;
overflow: hidden; max-width: 120px;
transition: opacity .22s ease, max-width .5s var(--ease-luxe);
}
.site-header.is-pill .lang-switch { opacity: 0; max-width: 0; pointer-events: none; }
.lang-btn {
padding: 6px 7px; border-radius: 8px;
font-family: var(--font-display); font-size: .8rem; font-weight: 600; letter-spacing: .06em;
color: var(--kop-tekst, var(--inkt-vaag)); transition: color .25s ease, background .25s ease;
}
.lang-btn:hover { color: var(--kop-tekst-sterk, var(--inkt)); }
.lang-btn.is-actief { color: var(--kop-actief, var(--paginakleur-diep)); background: var(--kop-chip, transparent); }
.lang-sep { color: var(--kop-sep, var(--rand-sterk)); font-size: .8rem; }
.cta-wrap {
display: inline-flex; max-width: 220px; overflow: hidden; margin-left: 6px;
transition: opacity .22s ease, max-width .5s var(--ease-luxe), margin .5s var(--ease-luxe);
}
.site-header.is-pill .cta-wrap { opacity: 0; max-width: 0; margin-left: 0; pointer-events: none; }
.menu-btn {
display: flex; flex-direction: column; justify-content: center; gap: 5px;
width: 0; padding: 0; overflow: hidden;
opacity: 0; pointer-events: none;
transition: opacity .3s ease .15s;
}
.site-header.is-pill .menu-btn { width: auto; padding: 13px 12px; opacity: 1; pointer-events: auto; }
.menu-btn span {
display: block; width: 22px; height: 2px; background: var(--kop-logo, var(--inkt)); border-radius: 2px;
transition: transform .3s ease, width .3s ease, background .4s ease;
}
.menu-btn span:nth-child(2) { width: 14px; }
.menu-btn:hover span:nth-child(2) { width: 22px; }
/* ============ 7. FULLSCREEN OVERLAY-MENU — kleur-per-hover ============ */
/* 19-08-2026: het menu staat volledig in het zachte merkblauw (was ivoor),
met rechts een 3D-model van het Bertus-logo dat de muis volgt. */
.nav-overlay {
position: fixed; inset: 0; z-index: var(--z-overlay);
display: none; flex-direction: column;
background: var(--overlay-kleur, #D3E8F4);
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
clip-path: inset(0 0 100% 0);
transition: background .55s var(--ease-in-out);
}
.nav-overlay.is-open { display: flex; }
.overlay-top {
display: flex; align-items: center; justify-content: space-between;
max-width: 1180px; width: 100%; margin: 0 auto; padding: 26px 28px 0;
}
.overlay-sluit {
position: relative; width: 48px; height: 48px; border-radius: 50%;
background: rgba(20, 17, 14, .05); border: 1px solid var(--rand-sterk);
transition: background .25s ease, transform .35s ease;
}
.overlay-sluit:hover { background: rgba(20, 17, 14, .12); transform: rotate(90deg); }
.overlay-sluit span {
position: absolute; left: 15px; right: 15px; top: 22.5px; height: 2px;
background: var(--inkt); border-radius: 2px;
}
.overlay-sluit span:first-child { transform: rotate(45deg); }
.overlay-sluit span:last-child { transform: rotate(-45deg); }
.overlay-inner {
flex: 1; display: flex; align-items: center; gap: 56px;
max-width: 1180px; width: 100%; margin: 0 auto; padding: 0 28px;
min-height: 0;
}
.overlay-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.overlay-nav a {
display: flex; align-items: baseline; gap: 20px;
padding: 8px 0;
color: var(--inkt-zacht); text-decoration: none;
font-family: var(--font-display);
font-size: clamp(2.2rem, 5.9vh, 3.8rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12;
transition: color .3s ease, padding-left .45s var(--ease-luxe);
}
.overlay-nav a i {
font-style: normal; font-family: var(--font-display); font-weight: 600;
font-size: .82rem; letter-spacing: .12em; color: var(--item-diep, var(--paginakleur-diep));
min-width: 30px;
}
.overlay-nav a span { position: relative; }
.overlay-nav a span::after {
content: ""; position: absolute; left: 0; right: 0; bottom: .06em; height: 3px;
background: var(--item-kleur, var(--paginakleur)); transform: scaleX(0); transform-origin: right;
transition: transform .5s var(--ease-luxe);
}
.overlay-nav a:hover, .overlay-nav a.is-actief { color: var(--inkt); }
.overlay-nav a:hover { padding-left: 14px; color: var(--item-diep, var(--inkt)); }
.overlay-nav a:hover span::after { transform: scaleX(1); transform-origin: left; }
.overlay-voet {
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px;
max-width: 1180px; width: 100%; margin: 0 auto; padding: 0 28px 36px;
}
.overlay-contact { display: flex; flex-wrap: wrap; gap: 24px; }
.overlay-contact a {
color: var(--inkt-vaag); text-decoration: none; font-size: .92rem;
transition: color .25s ease;
}
.overlay-contact a:hover { color: var(--inkt); }
/* 3D-model van het Bertus-logo rechts in het overlay-menu. main.js stapelt
~30 kopieën van het symbool langs de Z-as; de stapel kantelt met de muis mee
(dezelfde techniek als het Artone-logo op Over Bertus). */
.overlay-visual { flex: 0 0 380px; display: flex; align-items: center; justify-content: center; }
.ov-logo3d {
position: relative; width: 300px; aspect-ratio: 180 / 177;
perspective: 900px; perspective-origin: 50% 50%;
filter: drop-shadow(0 26px 40px rgba(6, 50, 72, .28));
}
.ov-logo3d__stapel {
position: absolute; inset: 0;
transform-style: preserve-3d;
transform: rotateX(var(--ov-lx, -8deg)) rotateY(var(--ov-ly, -18deg));
will-change: transform;
}
.ov-vlak {
position: absolute; inset: 0; width: 100%; height: 100%;
transform: translateZ(var(--ov-z, 0px));
overflow: visible;
}
.ov-vlak__inkt { fill: var(--ov-inkt, #0093C9); }
/* ============ 8. NAALD-VOORTGANG ============ */
.naald-balk {
position: fixed; left: 0; right: 0; bottom: 0; height: 4px;
z-index: var(--z-progress); pointer-events: none;
}
.naald-balk .groef { position: absolute; inset: 0; background: rgba(20, 17, 14, .08); }
.naald-balk .vulling {
position: absolute; left: 0; top: 0; bottom: 0; width: 100%;
background: linear-gradient(90deg, var(--paginakleur-diep), var(--paginakleur));
transform: scaleX(0); transform-origin: left;
}
.naald-balk .kop {
position: absolute; top: 50%; left: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px;
border-radius: 50%;
background: radial-gradient(circle at 35% 35%, var(--paginakleur), var(--paginakleur-diep));
box-shadow: 0 0 12px var(--paginakleur-gloed);
}
/* ============ 9. HERO — DE PLATENSPELER ============ */
.hero {
position: relative; min-height: 100svh;
display: flex; align-items: center;
padding: 150px 0 90px;
overflow: hidden;
background:
radial-gradient(1100px 600px at 78% 18%, var(--paginakleur-gloed), transparent 62%),
radial-gradient(800px 500px at 8% 85%, var(--paginakleur-zacht), transparent 60%),
var(--basis);
}
.hero__bigword {
position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
font-family: var(--font-display); font-weight: 700;
font-size: clamp(9rem, 24vw, 24rem); letter-spacing: -0.02em;
color: transparent;
-webkit-text-stroke: 1px rgba(20, 17, 14, .09);
white-space: nowrap; pointer-events: none; user-select: none;
}
.hero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
.hero__title { margin: 18px 0 22px; }
.hero__meta { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-top: 34px; }
.hero__scroll {
position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
display: flex; align-items: center; gap: 12px; z-index: 2;
font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--inkt-vaag);
white-space: nowrap;
}
/* ---- hero met foto-slideshow (home) ---- */
.hero--foto { color: #FDFAF4; }
.hero__slideshow { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #14110E; }
.hero__slide {
position: absolute; inset: 0;
transform: translateX(100%); opacity: 0;
transition: transform .9s var(--ease-luxe), opacity .9s var(--ease-luxe);
will-change: transform;
}
.hero__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* De herotekst staat sinds 17-08 linksónder i.p.v. gecentreerd, dus de
onderste band moet dieper zijn — daar loopt de foto het felst.
Sinds 18-08 staan de subpagina-hero's er net zo bij, dus .page-hero__scrim
deelt deze regel: één plek, zodat de twee niet meer uit elkaar kunnen lopen. */
De derde laag (radiaal, linksonder) is er sinds 18-08 bij: precies onder het
titelblok stond de achtergrond op lichte foto's nog op rgb(55) en dan haalt
zelfs een lichte contour de 4,5:1 niet. Hij loopt zacht uit (72%), dus het
blijft een verloop en geen plat vlak. */
.hero__scrim,
.page-hero__scrim {
position: absolute; inset: 0; z-index: 1; pointer-events: none;
background:
radial-gradient(115% 62% at 4% 100%, rgba(16,12,8,.52) 0%, rgba(16,12,8,.26) 44%, transparent 72%),
linear-gradient(90deg, rgba(16,12,8,.88) 0%, rgba(16,12,8,.62) 30%, rgba(16,12,8,.18) 58%, transparent 76%),
linear-gradient(0deg, rgba(16,12,8,.66) 0%, rgba(16,12,8,.30) 34%, transparent 58%);
}
/* tekstblok linksonder i.p.v. verticaal gecentreerd, en dichter naar de rand
(17-08-2026, op verzoek) */
.hero--foto { align-items: flex-end; padding-bottom: clamp(44px, 6vh, 76px); }
.hero--foto .hero__inner {
grid-template-columns: minmax(0, 52rem);
max-width: min(1560px, 100%);
padding-left: clamp(20px, 3.2vw, 52px);
}
.hero--foto .hero__title {
color: #FDFAF4;
font-size: clamp(2.7rem, 7.2vw, 6.6rem);
}
.hero--foto .eyebrow { color: #CFE6F2; }
.hero--foto .lead { color: rgba(247, 244, 238, .92); }
/* Accentwoord ("muziek", "plaat", "keten", "platen") massief blauw. Van
18-08-2026 tot 18-08-2026 was het hol (alleen een contour, foto erdoorheen);
op verzoek van de klant staat het woord nu weer helemaal vol — op élke hero
mét foto, zodat het overal hetzelfde oogt.
KLEUR: --paginakleur-opfoto (#3CB6E8), niet het kale #0093C9. Massief haalt
die kleur op de donkerste plekken van de scrim ruim de 4,5:1 die deze klant
aanhoudt, waar de dunne contour daar juist onder dook. Op ivoor (contact)
blijft het woord in --paginakleur-tekst staan.
De schaduw blijft: een zachte donkere halo, zodat de letters ook op de felste
plekken van een foto (de gele heftruck op werken-bij) los blijven staan. */
.hero--foto .text-accent,
.page-hero--foto .text-accent {
color: var(--paginakleur-opfoto);
text-shadow: 0 2px 14px rgba(16, 12, 8, .6);
}
.hero--foto .link { color: #FDFAF4; }
.hero--foto .hero__scroll { color: rgba(247, 244, 238, .82); }
/* de draaitafel (bovenaanzicht) — licht deck, zwarte plaat */
.tt { position: relative; aspect-ratio: 1; max-width: 560px; margin-left: auto; width: 100%; }
.tt__voet {
position: absolute; inset: 0; border-radius: 28px;
background: linear-gradient(150deg, #FFFDF8, #EBE4D6 70%);
border: 1px solid var(--rand-sterk);
box-shadow: var(--schaduw-zwaar), inset 0 1px 0 rgba(255, 255, 255, .8);
}
.tt__plateau {
position: absolute; inset: 6.5%; border-radius: 50%;
background:
repeating-conic-gradient(rgba(255, 255, 255, .035) 0 1.6deg, transparent 1.6deg 7.2deg),
radial-gradient(circle, #2A241E, #1B1611 72%);
box-shadow: inset 0 0 40px rgba(0, 0, 0, .55), 0 18px 48px -18px rgba(58, 38, 22, .55);
}
.tt__plaat {
position: absolute; inset: 9%; border-radius: 50%;
background:
repeating-radial-gradient(circle, var(--vinyl-groef) 0 1px, transparent 1px 3.6px),
radial-gradient(circle at 34% 28%, rgba(247, 244, 238, .07), transparent 46%),
radial-gradient(circle, var(--vinyl) 0%, var(--vinyl-diep) 74%);
box-shadow: inset 0 0 60px rgba(0, 0, 0, .65);
will-change: transform;
}
/* lichtstreep over de groeven */
.tt__plaat::before {
content: ""; position: absolute; inset: 0; border-radius: 50%;
background: conic-gradient(from 200deg, transparent 0 40deg, rgba(247, 244, 238, .06) 55deg, transparent 80deg 200deg, rgba(247, 244, 238, .04) 225deg, transparent 250deg);
}
.tt__label {
position: absolute; inset: 33.5%; border-radius: 50%;
background: radial-gradient(circle at 38% 32%, var(--paginakleur), var(--paginakleur-diep) 78%);
color: var(--basis);
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
text-align: center; border: 1px solid rgba(247, 244, 238, .25);
}
.tt__label b { font-family: var(--font-display); font-size: clamp(.9rem, 1.6vw, 1.25rem); letter-spacing: .1em; }
.tt__label small { font-size: .58rem; letter-spacing: .3em; text-transform: uppercase; color: rgba(247, 244, 238, .85); }
.tt__as { position: absolute; inset: 49.1%; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #F4EFE4, #8A8274); z-index: 3; }
.tt__arm {
position: absolute; top: 2%; right: 2%; width: 46%; height: 78%;
transform-origin: 78.5% 13.5%;
z-index: 4; will-change: transform;
rotate: -14deg;
}
.tt__arm svg { width: 100%; height: 100%; overflow: visible; }
.tt__toets {
position: absolute; left: 5.5%; bottom: 5.5%;
width: 11%; aspect-ratio: 1; border-radius: 50%;
background: radial-gradient(circle at 35% 35%, #FFFDF8, #E5DCC9);
border: 1px solid var(--rand-sterk);
display: flex; align-items: center; justify-content: center;
font-size: .6rem; letter-spacing: .18em; color: var(--inkt-zacht); text-transform: uppercase;
}
/* ============ 10. MARQUEE ============ */
.marquee {
position: relative; padding: 26px 0; overflow: hidden;
border-top: 1px solid var(--rand); border-bottom: 1px solid var(--rand);
background: var(--basis-diep);
}
.marquee__track { display: flex; gap: 64px; width: max-content; will-change: transform; }
.marquee__item {
display: inline-flex; align-items: center; gap: 64px;
font-family: var(--font-display); font-weight: 700;
font-size: clamp(1.6rem, 3.4vw, 2.6rem); letter-spacing: .04em;
color: transparent; -webkit-text-stroke: 1px rgba(20, 17, 14, .38);
white-space: nowrap;
}
.marquee__item::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--paginakleur); opacity: .8; }
.marquee__item.vol { color: var(--paginakleur-diep); -webkit-text-stroke: 0; }
/* ============ 11. STATS ============ */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stat {
position: relative; padding: 30px 26px 26px;
border: 1px solid var(--rand); border-radius: var(--radius);
background: rgba(255, 253, 248, .75);
box-shadow: 0 10px 30px -22px rgba(58, 38, 22, .35);
overflow: hidden;
}
.stat::after {
content: ""; position: absolute; right: -34px; top: -34px; width: 110px; height: 110px;
border-radius: 50%;
background: repeating-radial-gradient(circle, rgba(20, 17, 14, .09) 0 1px, transparent 1px 4px);
opacity: .55;
}
.stat__num {
font-family: var(--font-display); font-weight: 700;
font-size: clamp(2rem, 3.6vw, 3rem); letter-spacing: -0.03em; line-height: 1;
display: flex; align-items: baseline; gap: 2px;
font-variant-numeric: tabular-nums;
}
.stat__suffix { color: var(--paginakleur-diep); }
.stat__label { margin-top: 10px; font-size: .92rem; color: var(--inkt-zacht); }
/* ============ 12. ARTONE ZOOM-OUT (concept A) ============ */
.zoomuit { position: relative; }
.zoomuit__ruimte { height: 340vh; }
.zoomuit__stage {
position: sticky; top: 0; height: 100vh; height: 100svh;
overflow: hidden;
display: flex; align-items: center; justify-content: center;
background:
radial-gradient(900px 620px at 50% 42%, var(--paginakleur-gloed), transparent 62%),
var(--basis-diep);
}
/* Het Artone-logo als achtergrond van het netwerk (17-08-2026, was de
studio-vloerfoto); opacity wordt door JS gescrubd — 0 tijdens "Bertus is
groot", vervaagt in zodra het plaatlabel naar ARTONE morpht. */
.zu-achtergrond {
position: absolute; inset: 0; z-index: 0; opacity: 0;
background:
radial-gradient(72% 58% at 50% 50%, var(--paginakleur-zacht), transparent 74%),
linear-gradient(180deg, var(--basis) 0%, var(--basis-diep) 100%);
will-change: opacity;
}
/* het merk zelf: één groot, rustig watermerk achter het netwerk.
Via mask i.p.v. ![]()
, zodat de kleur uit de tokens komt. */
.zu-achtergrond::before {
content: ""; position: absolute; inset: 0;
-webkit-mask: url("../assets/img/artone-logo.svg") center 53% / min(84%, 900px) no-repeat;
mask: url("../assets/img/artone-logo.svg") center 53% / min(84%, 900px) no-repeat;
background: linear-gradient(180deg, rgba(0, 147, 201, .34), rgba(10, 94, 134, .22));
}
/* lichte sluier bovenaan zodat de koppen over het logo heen leesbaar blijven */
.zu-achtergrond::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg,
rgba(247, 244, 238, .88) 0%,
rgba(247, 244, 238, .40) 22%,
transparent 46%);
}
.zu-tekst {
position: absolute; z-index: 6; left: 0; right: 0; text-align: center;
padding: 0 24px; pointer-events: none;
}
.zu-tekst--boven { top: 11%; }
.zu-tekst--onder { top: 7%; }
.zu-tekst--onder .lead { max-width: 44ch; }
.zu-tekst h2 { font-size: clamp(1.8rem, 4.4vw, 3.6rem); }
.zu-tekst .lead { margin: 12px auto 0; }
.zu-kosmos { position: relative; width: min(1160px, 94vw); height: min(580px, 62vh); will-change: transform; }
/* lage vensters: compactere tegels en plaat, zodat niets elkaar raakt */
@media (max-height: 820px) and (min-width: 1024px) {
.zu-kosmos { height: min(530px, 68vh); }
.zu-tegel { width: 178px; padding: 12px 13px 11px; }
.zu-tegel small { font-size: .7rem; }
.zu-tegel .zt-mini { display: none; }
.zu-plaatwrap { width: min(350px, 50vw); }
.zu-tekst h2 { font-size: clamp(1.6rem, 3.6vw, 2.7rem); }
.zu-hub { transform: translate(-50%, -50%) translateY(-98px); }
.zu-bertus-caption { transform: translate(-50%, -50%) translateY(140px); }
.zu-stats .stat-mini { padding: 10px 24px 8px; }
.zu-stats .stat-mini b { font-size: 1.4rem; }
.zu-stats .stat-mini > span { font-size: .64rem; }
}
.zu-lijnen { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; }
.zu-lijnen path { fill: none; stroke: var(--paginakleur); stroke-opacity: .38; stroke-width: 1.4; }
.zu-plaatwrap {
position: absolute; left: 50%; top: 50%; z-index: 4;
width: min(420px, 58vw); aspect-ratio: 1;
transform: translate(-50%, -50%);
will-change: transform;
}
.zu-plaat {
position: absolute; inset: 0; border-radius: 50%;
background:
repeating-radial-gradient(circle, var(--vinyl-groef) 0 1px, transparent 1px 3.4px),
radial-gradient(circle, var(--vinyl), var(--vinyl-diep) 74%);
box-shadow: 0 40px 90px -30px rgba(58, 38, 22, .6), inset 0 0 60px rgba(0, 0, 0, .6);
will-change: transform;
}
/* Bertus = het grootste, felste knooppunt: terracotta label, blijft zichtbaar */
.zu-plaat .tt__label { inset: 30%; }
.zu-plaat .tt__label b { font-size: clamp(1rem, 2vw, 1.5rem); }
/* het plaat-label morpht bij het uitklappen van BERTUS naar ARTONE (JS-gestuurd) */
.zu-plaat .tt__label--artone { opacity: 0; }
/* Artone-badge boven de plaat (verschijnt zodra het netwerk uitklapt) */
/* Artone-badge als "sticker" op de bovenrand van de Bertus-plaat */
.zu-hub {
position: absolute; left: 50%; top: 50%; z-index: 5;
transform: translate(-50%, -50%) translateY(-118px);
padding: 9px 20px; border-radius: 999px;
display: flex; align-items: center; justify-content: center; text-align: center;
background: var(--basis);
color: var(--inkt); font-family: var(--font-display); font-weight: 700; letter-spacing: .16em;
font-size: .78rem; white-space: nowrap;
border: 1px solid var(--rand-sterk);
box-shadow: 0 16px 40px -16px rgba(20, 17, 14, .45);
opacity: 0;
}
/* caption onder de Bertus-plaat: onmiskenbaar supply chain-hoofdrol */
.zu-bertus-caption {
position: absolute; left: 50%; top: 50%; z-index: 5;
transform: translate(-50%, -50%) translateY(160px);
text-align: center; white-space: nowrap;
opacity: 0; pointer-events: none;
}
.zu-bertus-caption b {
display: block; font-family: var(--font-display); font-weight: 700;
font-size: 1.05rem; letter-spacing: .02em; color: var(--paginakleur-diep);
}
.zu-bertus-caption .zt-tak { margin-top: 6px; }
.zu-tegel {
position: absolute; z-index: 2;
width: 200px; padding: 16px 16px 14px;
border-radius: 14px;
background: rgba(255, 253, 248, .94);
border: 1px solid var(--rand-sterk);
backdrop-filter: blur(8px);
box-shadow: 0 18px 40px -20px rgba(40, 22, 10, .6);
opacity: 0; will-change: transform, opacity;
transition: border-color .3s ease, background .3s ease;
}
.zu-tegel:hover { border-color: var(--paginakleur); }
/* Bertus = de hoofdrol: eigen, warmere achtergrond zodat de tegel opvalt tussen de rest */
.zu-tegel--merk {
background: linear-gradient(158deg, #EAF6FC 0%, #D3E8F4 100%);
border-color: var(--paginakleur);
box-shadow: 0 18px 42px -18px rgba(10, 94, 134, .5);
}
.zu-tegel--merk b { color: var(--paginakleur-diep); }
.zu-tegel .zt-mini {
width: 34px; height: 34px; border-radius: 50%; margin-bottom: 10px;
background:
radial-gradient(circle, var(--tegel-label, var(--paginakleur)) 0 26%, transparent 27%),
repeating-radial-gradient(circle, rgba(247, 244, 238, .1) 0 1px, transparent 1px 3px),
radial-gradient(circle, var(--vinyl), var(--vinyl-diep) 70%);
}
.zu-tegel b { display: block; font-family: var(--font-display); font-size: .95rem; letter-spacing: .01em; }
.zu-tegel small { display: block; margin-top: 4px; font-size: .74rem; line-height: 1.45; color: var(--inkt-zacht); }
.zt-tak {
display: inline-block; margin-top: 8px;
font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700;
color: var(--tak-kleur, var(--paginakleur-diep));
}
.zu-bertus-caption .zt-tak {
padding: 5px 12px; border-radius: 999px;
background: var(--paginakleur); color: var(--basis);
}
/* Artone-groep in cijfers: solide vlak, sinds 17-08-2026 direct onder de wereldbol */
/* De blauwe Artone-strook eronder is een .schuin-blok en schuift met een
negatieve marge (§26) onder deze sectie door. De schuine wig kwam daardoor
links tegen de cijfertabel aan; de onderruimte is nu de hoogte van die wig
plus echte lucht, zodat de tabel er los van staat (18-08-2026). */
/* "Sinds 1971" — wit blad dat direct onder de Artone-strook begint, zodat de
teller bij dat verhaal hoort in plaats van los onderaan te hangen
(18-08-2026, was een lichtblauwe schuine strook). */
.section--teller {
background: #FFFFFF;
padding-top: clamp(30px, 3.4vw, 52px);
padding-bottom: clamp(48px, 5.4vw, 84px);
}
.section--cijfers { padding-top: clamp(36px, 5vw, 68px); padding-bottom: calc(var(--schuin-val) + clamp(34px, 3.6vw, 58px)); }
/* balk en bol horen bij elkaar: geen dubbele witruimte ertussen. De bol zit
sinds de verbouwing in #wie (.wie-sectie), dus de koppeling loopt daarlangs. */
.wie-sectie { padding-bottom: clamp(24px, 3.5vw, 44px); }
.wie-sectie + .section--cijfers { padding-top: 0; }
.zu-stats {
display: flex; flex-wrap: wrap; justify-content: center;
max-width: 1060px; margin: 0 auto;
background: var(--basis);
border: 1px solid var(--rand);
border-radius: 20px;
box-shadow: 0 26px 60px -34px rgba(58, 38, 22, .5);
overflow: hidden;
}
.zu-stats .stat-mini {
flex: 1 1 0; min-width: 152px;
text-align: center; padding: 26px 24px 22px;
border-left: 1px solid var(--rand);
}
.zu-stats .stat-mini:first-child { border-left: 0; }
.zu-stats .stat-mini b {
display: block; font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 700;
font-variant-numeric: tabular-nums; line-height: 1.1;
color: var(--paginakleur-diep);
}
/* alleen het label (direct kind), niet de cijfer-span binnen */
.zu-stats .stat-mini > span {
display: block; margin-top: 2px;
font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--inkt-zacht);
}
/* statische fallback (mobiel / reduced motion) */
.zoomuit--statisch .zoomuit__ruimte { height: auto; }
.zoomuit--statisch .zoomuit__stage { position: relative; height: auto; min-height: 0; padding: 90px 0; display: block; }
.zoomuit--statisch .zu-kosmos, .zoomuit--statisch .zu-plaatwrap, .zoomuit--statisch .zu-lijnen,
.zoomuit--statisch .zu-hub, .zoomuit--statisch .zu-bertus-caption { display: none; }
.zoomuit--statisch .zu-tekst { position: static; padding: 0 28px; pointer-events: auto; }
.zu-statisch-grid {
display: none;
}
.zoomuit--statisch .zu-statisch-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px;
max-width: var(--container); margin: 40px auto 0; padding: 0 28px;
}
.zoomuit--statisch .zu-statisch-grid .zu-tegel { position: static; opacity: 1; width: auto; }
/* in de statische versie scrubt JS de achtergrond niet: het Artone-logo daar
meteen tonen, anders ziet mobiel er niets van */
.zoomuit--statisch .zu-achtergrond { opacity: 1; }
/* ============ 12-bis. ARTONE — BREDE SCHUINE STROOK IN MERKBLAUW (home) ============
Sinds 17-08-2026 staat het netwerk (mindmap) op Over Bertus; op de home blijft
dit blok over als de doorverwijzing ernaartoe. Sinds de verbouwing ís het blok
de schuine strook zelf (variant B, zie §26): alleen de achtergrond staat
schuin, het logo en de tekst blijven horizontaal.
Kleurverloop: het lichtste blauw ligt linksboven bij het logo, de tekst rechts
staat op --paginakleur-diep. Dat is bewust: wit op #0093C9 haalt maar 3,5:1,
op #0A6E9B 5,7:1 en op #0A5E86 7,1:1 — de tekst moet dus op het diepe deel. */
.schuin-blok--merk .schuin-blok__band {
background:
radial-gradient(78% 120% at 12% -10%, rgba(41, 180, 230, .62), rgba(41, 180, 230, 0) 58%),
linear-gradient(104deg, var(--paginakleur) 0%, var(--paginakleur) 26%, var(--paginakleur-vlak-diep) 92%);
}
/* Gestapeld (logo boven, tekst eronder) loopt het verloop van boven naar
beneden mee: licht bij het logo, diep waar de tekst staat. Zonder deze
variant zakt het contrast van de eyebrow op 390px naar 3,7:1. */
@media (max-width: 1100px) {
.schuin-blok--merk .schuin-blok__band {
background:
radial-gradient(76% 34% at 20% 10%, rgba(41, 180, 230, .38), rgba(41, 180, 230, 0) 60%),
linear-gradient(168deg, var(--paginakleur) 0%, var(--paginakleur) 30%, var(--paginakleur-vlak-diep) 100%);
}
}
.artone-band { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(30px, 4.4vw, 62px); align-items: center; }
.artone-band__merk { display: flex; align-items: center; justify-content: center; }
/* het logo staat direct op het blauw (geen tegel meer): mask + ivoren vulling */
.artone-band__logo {
width: min(100%, 330px); aspect-ratio: 148 / 56;
-webkit-mask: url("../assets/img/artone-logo.svg") center / contain no-repeat;
mask: url("../assets/img/artone-logo.svg") center / contain no-repeat;
background: var(--basis);
filter: drop-shadow(0 14px 30px rgba(4, 32, 46, .45));
}
.artone-band__tekst h2 { font-size: clamp(2rem, 3.8vw, 3.1rem); color: #FFFFFF; }
.artone-band__tekst .eyebrow { color: var(--basis); }
.artone-band__tekst .lead { color: #EAF4FA; }
/* ============ 13. WERELDBOL (ons netwerk) ============ */
/* LET OP: hier stond overflow:hidden op .kaart-sectie; die klasse is vervallen,
want het landenpaneel moet juist búíten de sectie mogen komen. */
.kaart-wrap { position: relative; }
.wereldbol-canvas {
display: block; margin: 0 auto; max-width: 100%;
cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.wereldbol-canvas.is-vast { cursor: grabbing; }
.kaart-steden { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 8px; }
.kaart-steden .pill { font-size: .8rem; padding: 7px 14px; }
.kaart-steden .pill.is-hq { border-color: var(--paginakleur); }
.kaart-steden .pill.is-hq .dot { background: var(--paginakleur-diep); box-shadow: 0 0 0 3px var(--paginakleur-gloed); }
/* ---- #wie: verhaal links, wereldbol met landenpaneel rechts ---- */
.wie-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px, 5vw, 70px); align-items: center; }
.wie-tekst .lead:empty { display: none; } /* sleutel nog niet gevuld in het CMS */
.wie-kaart { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.wie-kaart .eyebrow { justify-content: center; }
.wie-kaart .kaart-wrap { width: 100%; }
/* ---- vraagteken + landenpaneel ----
Het paneel heeft géén vaste hoogte: het staat met bottom:calc(100% + …) vast
aan de knop en groeit naar boven mee met het aantal landen. De max-height is
puur een vangnet (ruim 60+ landen passen) en pas dán komt er scroll. */
.landen-knop { position: relative; display: inline-flex; margin-top: 2px; }
.landen-knop__btn {
position: relative; z-index: 2;
width: 46px; height: 46px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: var(--basis);
border: 1px solid var(--rand-sterk);
color: var(--paginakleur-diep);
font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; line-height: 1;
box-shadow: 0 12px 28px -16px rgba(10, 94, 134, .75);
transition: transform .35s var(--ease-luxe), background .3s ease, color .3s ease,
border-color .3s ease, box-shadow .35s ease;
}
.landen-knop__btn::after {
content: ""; position: absolute; inset: -6px; border-radius: 50%;
border: 1px solid var(--paginakleur);
opacity: 0; transform: scale(.86);
transition: opacity .4s ease, transform .5s var(--ease-luxe);
}
.landen-knop:hover .landen-knop__btn,
.landen-knop:focus-within .landen-knop__btn,
.landen-knop.is-open .landen-knop__btn {
background: var(--paginakleur-diep); color: var(--basis);
border-color: var(--paginakleur-diep); transform: translateY(-2px);
}
.landen-knop:hover .landen-knop__btn::after,
.landen-knop:focus-within .landen-knop__btn::after,
.landen-knop.is-open .landen-knop__btn::after { opacity: .55; transform: scale(1); }
.landen-paneel {
position: absolute; left: 50%; bottom: calc(100% + 14px); z-index: 3;
width: min(560px, 92vw); height: auto;
/* max-height is puur een vangnet; de scroll zit op de lijst zelf, want een
overflow op het paneel zou het driehoekje en de hover-brug afknippen */
max-height: min(62vh, 560px);
display: flex; flex-direction: column;
padding: 18px 20px;
border-radius: 18px;
background: linear-gradient(168deg, rgba(255, 253, 248, .97), rgba(232, 243, 250, .97));
border: 1px solid var(--rand);
box-shadow: 0 34px 74px -34px rgba(10, 94, 134, .7);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
opacity: 0; visibility: hidden; pointer-events: none;
transform: translateX(-50%) translateY(10px);
transition: opacity .28s ease, transform .45s var(--ease-luxe), visibility 0s linear .28s;
}
/* onzichtbare brug over de 14px tussen knop en paneel: de muis die van de knop
naar het paneel beweegt mag het paneel niet dichtklappen */
.landen-paneel::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px; }
/* driehoekje dat naar de knop wijst */
.landen-paneel::after {
content: ""; position: absolute; left: 50%; top: 100%;
width: 16px; height: 16px; margin: -9px 0 0 -8px;
background: rgba(232, 243, 250, .97);
border-right: 1px solid var(--rand); border-bottom: 1px solid var(--rand);
transform: rotate(45deg);
}
.landen-knop:hover .landen-paneel,
.landen-knop:focus-within .landen-paneel,
.landen-knop.is-open .landen-paneel {
opacity: 1; visibility: visible; pointer-events: auto;
transform: translateX(-50%) translateY(0);
transition: opacity .28s ease, transform .45s var(--ease-luxe), visibility 0s;
}
/* Escape sluit het paneel, óók als de muis er nog boven hangt */
.landen-knop.is-dicht:hover .landen-paneel,
.landen-knop.is-dicht:focus-within .landen-paneel {
opacity: 0; visibility: hidden; pointer-events: none;
transform: translateX(-50%) translateY(10px);
}
.landen-paneel .kaart-steden {
margin-top: 0; justify-content: center;
min-height: 0; overflow-y: auto; overscroll-behavior: contain;
}
/* ============ 14. HOEZEN (services-teaser op home + services-pagina) ============ */
.hoezen-rij { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.hoes {
position: relative; display: block; text-decoration: none; color: inherit;
width: 100%; text-align: left;
aspect-ratio: .92; border-radius: 6px;
perspective: 900px;
font: inherit;
}
.hoes__sleeve {
position: absolute; inset: 0; z-index: 2;
border-radius: 6px; padding: 26px;
display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
background:
linear-gradient(160deg, rgba(255, 255, 255, .16), transparent 45%),
var(--hoes-tint, var(--paginakleur-diep));
border: 1px solid rgba(20, 17, 14, .18);
box-shadow: var(--schaduw);
overflow: hidden;
transition: transform .5s var(--ease-luxe), border-color .3s ease;
}
.hoes__sleeve::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 10px;
background: rgba(0, 0, 0, .22); border-right: 1px solid rgba(0, 0, 0, .12);
}
.hoes__nr {
position: absolute; top: 20px; left: 26px;
font-family: var(--font-display); font-size: .8rem; letter-spacing: .16em; color: rgba(247, 244, 238, .8);
}
.hoes__titel { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.15rem, 1.7vw, 1.45rem); letter-spacing: -0.01em; color: #FDFAF4; }
.hoes__sub { font-size: .88rem; color: rgba(247, 244, 238, .85); }
/* cover-art: echte foto op de hoes, met kleurwas + scrim voor leesbaarheid */
.hoes__art {
position: absolute; inset: 0; z-index: 0;
width: 100%; height: 100%; object-fit: cover;
border-radius: 6px;
}
.hoes__sleeve::after {
content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 6px; pointer-events: none;
background:
linear-gradient(180deg, rgba(20, 17, 14, .34) 0%, rgba(20, 17, 14, 0) 26%, rgba(20, 17, 14, .76) 96%),
linear-gradient(150deg, color-mix(in srgb, var(--hoes-tint, #3A2616) 46%, transparent) 0%, transparent 60%);
}
.hoes__sleeve::before { z-index: 2; }
.hoes__nr { z-index: 2; }
.hoes__titel, .hoes__sub { position: relative; z-index: 2; }
.hoes__plaat {
position: absolute; top: 6%; right: -4%; width: 88%; aspect-ratio: 1; z-index: 1;
border-radius: 50%;
background:
radial-gradient(circle, var(--hoes-label, var(--paginakleur)) 0 20%, transparent 20.5%),
repeating-radial-gradient(circle, rgba(247, 244, 238, .07) 0 1px, transparent 1px 3.4px),
radial-gradient(circle, var(--vinyl), var(--vinyl-diep) 72%);
box-shadow: 0 24px 60px -24px rgba(58, 38, 22, .6);
transition: transform .6s var(--ease-luxe);
will-change: transform;
}
.hoes:hover .hoes__plaat, .hoes.is-open .hoes__plaat { transform: translateX(26%) rotate(50deg); }
.hoes:hover .hoes__sleeve, .hoes.is-open .hoes__sleeve { transform: translateX(-4%); border-color: rgba(20, 17, 14, .35); }
/* geopende hoes (services-pagina): plaat blijft eruit, duidelijke selectie-ring */
.hoes.is-open .hoes__sleeve { box-shadow: var(--schaduw-zwaar), 0 0 0 3px var(--paginakleur-zacht); }
.hoes__pijl {
position: absolute; right: 22px; bottom: 22px; z-index: 3;
width: 40px; height: 40px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: #FDFAF4;
background: rgba(247, 244, 238, .14); border: 1px solid rgba(247, 244, 238, .35);
transition: background .3s ease, color .3s ease, transform .45s var(--ease-luxe);
}
.hoes:hover .hoes__pijl { background: var(--basis); color: var(--hoes-tint, var(--inkt)); transform: rotate(-35deg); }
.hoes.is-open .hoes__pijl { background: var(--basis); color: var(--hoes-tint, var(--inkt)); transform: rotate(90deg); }
/* ============ 15. STATEMENT / WOORD-REVEAL ============ */
.statement__text {
font-family: var(--font-display); font-weight: 600;
font-size: clamp(1.5rem, 3.2vw, 2.7rem); line-height: 1.28; letter-spacing: -0.015em;
max-width: 21em; margin-top: 26px;
}
.statement__text .w { display: inline-block; }
.statement__foot { display: flex; align-items: center; gap: 26px; margin-top: 40px; flex-wrap: wrap; }
.statement__orig { margin-top: 22px; font-style: italic; font-size: .95rem; color: var(--inkt-vaag); max-width: 60ch; }
/* ============ 16. CTA-BAND (diepe paginakleur) ============ */
.cta-band { position: relative; overflow: hidden; }
.cta-band .disc {
position: absolute; right: -140px; top: 50%; transform: translateY(-50%);
width: 460px; height: 460px; border-radius: 50%;
background:
radial-gradient(circle, var(--paginakleur) 0 20%, transparent 20.5%),
repeating-radial-gradient(circle, rgba(247, 244, 238, .12) 0 1px, transparent 1px 4px),
radial-gradient(circle, rgba(0, 0, 0, .12), rgba(0, 0, 0, .26) 72%);
opacity: .9; pointer-events: none;
will-change: transform;
}
/* Home-CTA: foto-achtergrond i.p.v. draaiende plaat */
.cta-band--foto .container { position: relative; z-index: 1; }
.cta-band__foto {
position: absolute; inset: 0; z-index: 0;
background: url("../assets/img/foto/hero-cta.jpg") center/cover no-repeat;
}
/* terracotta-was houdt de ivoren tekst leesbaar en op merk */
.cta-band__foto::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg,
color-mix(in srgb, var(--paginakleur-vlak) 86%, transparent) 0%,
color-mix(in srgb, var(--paginakleur-vlak-diep) 98%, transparent) 100%);
}
.cta-band__title { font-size: clamp(2.2rem, 5vw, 4rem); }
.cta-band .btn--koper { border-color: transparent; }
/* ============ 17. PAGINA-HERO (subpagina's) ============ */
.page-hero {
position: relative; padding: 190px 0 90px; overflow: hidden;
background:
radial-gradient(900px 480px at 82% 0%, var(--paginakleur-gloed), transparent 60%),
var(--basis);
}
.breadcrumb { display: flex; align-items: center; gap: 10px; font-size: .85rem; color: var(--inkt-vaag); margin-bottom: 22px; }
.breadcrumb a { color: var(--inkt-zacht); text-decoration: none; }
.breadcrumb a:hover { color: var(--paginakleur-diep); }
.page-hero__title { max-width: 14ch; }
/* ---- page-hero met foto-achtergrond ----
Sinds 18-08-2026 staan deze hero's precies zoals de home: het hele tekstblok
linksónder in beeld i.p.v. verticaal gecentreerd in de smalle .container.
De drie maten hieronder zijn letterlijk dezelfde als bij .hero--foto (§9), zodat
de titel bij het klikken van home naar een subpagina niet verspringt:
· align-items: flex-end → blok tegen de onderkant
· padding-bottom clamp(44px, 6vh, 76px)
· container max-width min(1560px, 100%) + padding-left clamp(20px, 3.2vw, 52px)
De scrim staat bij .hero__scrim in §9 — home en subpagina's delen één regel. */
.page-hero--foto {
display: flex; align-items: flex-end;
min-height: 100svh;
padding: 150px 0 clamp(44px, 6vh, 76px);
background: #14110E;
color: #FDFAF4;
}
.page-hero__foto {
position: absolute; inset: 0; z-index: 0;
width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Ook de contactpagina, die geen fotohero heeft, gebruikt deze uitlijning.
Anders begint de titel daar op desktop op 138px terwijl hij op de andere
vier pagina's op 46px staat, en dat verspringt zichtbaar bij het klikken. */
.page-hero .container {
position: relative; z-index: 2;
max-width: min(1560px, 100%);
padding-left: clamp(20px, 3.2vw, 52px);
}
/* Kruimelpad, titel, lead én de knop op werken-bij horen bij hetzelfde blok en
krijgen daarom dezelfde kolombreedte als de home (daar is dat de grid-kolom
van 52rem). Dit overschrijft ook de 14ch van .page-hero__title, die de titel
op de foto-hero's onnodig smal kneep. */
.page-hero--foto .container > * { max-width: 52rem; }
.page-hero--foto .page-hero__title { color: #FDFAF4; }
.page-hero--foto .lead { color: rgba(247, 244, 238, .92); }
.page-hero--foto .breadcrumb { color: rgba(247, 244, 238, .75); }
.page-hero--foto .breadcrumb a { color: rgba(247, 244, 238, .9); }
.page-hero--foto .breadcrumb a:hover { color: #fff; }
/* ============ 18. SPLIT & MEDIA (foto's met kleurwas) ============ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.split--start { align-items: start; }
/* contactpagina: formulier iets breder dan de infokolom. Stond als inline style
in de template, waardoor het mobiele breekpunt er niet overheen kon en de
infokolom half buiten beeld viel (17-08-2026). */
.split--contact { grid-template-columns: 1.15fr .85fr; }
.media { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--rand-sterk); }
.media__ph {
aspect-ratio: 4 / 3;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
background:
repeating-linear-gradient(45deg, rgba(20, 17, 14, .03) 0 12px, transparent 12px 24px),
linear-gradient(170deg, var(--paginakleur-zacht), var(--basis-diep));
color: var(--paginakleur-diep); font-size: .85rem; letter-spacing: .14em; text-transform: uppercase;
}
.media__ph svg { width: 44px; height: 44px; opacity: .6; }
/* echte foto's: duotone-kleurwas + gekleurd offset-kader in de paginakleur */
.media--foto {
position: relative; overflow: visible; border: none; border-radius: var(--radius);
}
.media--foto::before {
content: ""; position: absolute; inset: 14px -14px -14px 14px;
border-radius: var(--radius);
background: var(--paginakleur-zacht);
z-index: 0;
}
.media--foto .media__binnen {
position: relative; z-index: 1;
border-radius: var(--radius); overflow: hidden;
border: 1px solid var(--rand-sterk);
box-shadow: var(--schaduw);
}
.media--foto img {
width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
filter: saturate(1.06) contrast(1.02);
transition: transform .8s var(--ease-luxe);
}
.media--foto:hover img { transform: scale(1.04); }
.media--foto .media__binnen::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(160deg, var(--paginakleur-gloed), transparent 55%);
mix-blend-mode: multiply; pointer-events: none;
}
.media--foto.media--breed img { aspect-ratio: 16 / 9; }
/* award-foto: staand kader zodat de gouden plaat groot en volledig in beeld staat */
.media--award img { aspect-ratio: 3 / 4; height: auto; object-position: 52% 50%; }
/* ============ 19. MISSIE/VISIE — CASSETTE, KANT A / KANT B ============ */
.ab-wrap { display: grid; grid-template-columns: .95fr 1.05fr; gap: 60px; align-items: center; }
/* --- de scene ---------------------------------------------------------
De scene is alléén de query-container; alle maten hangen aan --cas-b op
.cas-podium daarbinnen. Een element kan zichzelf niet bevragen, dus zou
88cqw op de scene zelf tegen de viewport uitrekenen en bij de kinderen
tegen de kolom — twee waarden voor dezelfde variabele. Met het podium
ertussen knijpt álles (doos, padding én perspectief) mee met de kolom. */
.ab-cassette-scene { container-type: inline-size; min-width: 0; }
.cas-podium {
--cas-b: min(470px, 84vw); /* terugval zonder container-queries */
--cas-h: calc(var(--cas-b) * .638); /* hoogte — echte maat 100 x 63,8 x 12 mm */
--cas-d: calc(var(--cas-b) * .12); /* dikte */
--cas-hd: calc(var(--cas-d) / 2); /* halve dikte */
--cas-naaf: calc(var(--cas-b) * .112); /* naafwiel */
--cas-lijn: max(1px, calc(var(--cas-b) * .0018)); /* dunste lichtlijn */
--veeg: 0px; /* verschuiving van de glansbaan bij de flip */
position: relative;
display: flex; justify-content: center;
padding: calc(var(--cas-b) * .075) calc(var(--cas-b) * .05) calc(var(--cas-b) * .13);
perspective: calc(var(--cas-b) * 3.1);
perspective-origin: 50% 18%; /* je kijkt er iets van bovenaf op */
}
@supports (width: 1cqw) { .cas-podium { --cas-b: min(470px, 88cqw); } }
/* grondschaduw: één radiale gradient, geen filter en geen blur */
.cas-schaduw {
position: absolute; left: 50%; bottom: calc(var(--cas-b) * .042);
width: calc(var(--cas-b) * 1.02); height: calc(var(--cas-b) * .13);
margin-left: calc(var(--cas-b) * -.51); pointer-events: none;
background: radial-gradient(50% 50% at 50% 50%,
rgba(20, 17, 14, .38) 0%, rgba(20, 17, 14, .17) 44%, rgba(20, 17, 14, 0) 74%);
}
/* De vaste kanteling zit op een aparte ouder, zodat .cas-doos zelf nooit
iets anders doet dan één rotateY — dat is precies wat de flip schrijft. */
.cas-kantel {
position: relative; width: var(--cas-b); height: var(--cas-h);
transform-style: preserve-3d;
transform: rotateZ(-.9deg) rotateX(-10deg) rotateY(-20deg);
}
/* De draai loopt volledig op deze transitie: startAbFlip() wisselt alleen
data-cas-kant, er wordt geen enkele frame door JS geschreven. */
.cas-doos {
position: absolute; inset: 0;
transform-style: preserve-3d;
transform: rotateY(0deg);
transition: transform .95s var(--ease-in-out);
}
.cas-doos[data-cas-kant="b"] { transform: rotateY(180deg); --veeg: calc(var(--cas-b) * -.055); }
/* --- de vijf vlakken --------------------------------------------------
Elk vlak staat eerst met zijn eigen middelpunt op het hart van de doos
(left/top 50% + negatieve marge) en schuift daarna over zijn eigen z-as
naar buiten. Negatieve marges in plaats van translate(-50%,-50%), zodat
het transform-slot vrij blijft voor de plaatsing in de ruimte.
Een ondervlak zit er niet bij: door de kanteling van -10 graden kijk je
er van bovenaf op, dus het zou een achterkant zijn en nooit getekend
worden. De onderrand is dicht — het silhouet blijft een gesloten vorm,
precies zoals een echte cassette van voren: de vijf uitsparingen zijn
verzonken sleuven in de afgeschuinde onderlip, geen inkepingen in de
omtrek. */
.cas-vlak {
position: absolute; left: 50%; top: 50%;
backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
/* Bewust géén border-radius: een afgeronde hoek snijdt een hapje uit het
voorvlak waar geen ander vlak achter ligt, en daar kijk je dan dwars naar
de pagina. Een cassetteschaal heeft in het echt ook een vrijwel haakse
hoek; de fillet die er zit is op deze schaal minder dan een pixel. */
.cas-vlak--voor, .cas-vlak--achter {
width: var(--cas-b); height: var(--cas-h);
margin-left: calc(var(--cas-b) / -2); margin-top: calc(var(--cas-h) / -2);
overflow: hidden;
font-family: var(--font-body); font-size: calc(var(--cas-b) * .028);
}
.cas-vlak--voor { transform: translateZ(var(--cas-hd)); }
.cas-vlak--achter { transform: rotateY(180deg) translateZ(var(--cas-hd)); }
/* Mat kunststof. De vijf schroefkoppen zitten als radiale gradient ín de
verf: dat scheelt tien DOM-knopen en het zijn toch stilstaande delen. */
.cas-vlak--voor {
background-image:
radial-gradient(circle calc(var(--cas-b) * .0145) at 3.2% 5.6%, #060504 0 26%, #4A433B 33%, #241F1A 64%, #12100D 84%, rgba(0, 0, 0, 0) 88%),
radial-gradient(circle calc(var(--cas-b) * .0145) at 96.8% 5.6%, #060504 0 26%, #3F3931 33%, #211C18 64%, #100E0C 84%, rgba(0, 0, 0, 0) 88%),
radial-gradient(circle calc(var(--cas-b) * .0145) at 3.2% 78.5%, #060504 0 26%, #413A33 33%, #211C18 64%, #100E0C 84%, rgba(0, 0, 0, 0) 88%),
radial-gradient(circle calc(var(--cas-b) * .0145) at 96.8% 78.5%, #060504 0 26%, #39332C 33%, #1E1A16 64%, #0E0C0A 84%, rgba(0, 0, 0, 0) 88%),
radial-gradient(circle calc(var(--cas-b) * .0145) at 50% 49%, #060504 0 26%, #443D35 33%, #231E1A 64%, #12100D 84%, rgba(0, 0, 0, 0) 88%),
repeating-linear-gradient(48deg, var(--vinyl-groef) 0 1px, rgba(0, 0, 0, 0) 1px 4px),
radial-gradient(120% 90% at 16% 2%, rgba(211, 232, 244, .10), rgba(0, 0, 0, 0) 56%),
linear-gradient(162deg, #2A2521 0%, var(--vinyl) 34%, #120F0D 72%, var(--vinyl-diep) 100%);
}
/* Kant B is dezelfde cassette onder dezelfde hoek, maar het licht moet ná
de flip nog steeds van linksboven komen: alle richtingen spiegelen mee. */
.cas-vlak--achter {
background-image:
radial-gradient(circle calc(var(--cas-b) * .0145) at 96.8% 5.6%, #060504 0 26%, #4A433B 33%, #241F1A 64%, #12100D 84%, rgba(0, 0, 0, 0) 88%),
radial-gradient(circle calc(var(--cas-b) * .0145) at 3.2% 5.6%, #060504 0 26%, #3F3931 33%, #211C18 64%, #100E0C 84%, rgba(0, 0, 0, 0) 88%),
radial-gradient(circle calc(var(--cas-b) * .0145) at 96.8% 78.5%, #060504 0 26%, #413A33 33%, #211C18 64%, #100E0C 84%, rgba(0, 0, 0, 0) 88%),
radial-gradient(circle calc(var(--cas-b) * .0145) at 3.2% 78.5%, #060504 0 26%, #39332C 33%, #1E1A16 64%, #0E0C0A 84%, rgba(0, 0, 0, 0) 88%),
radial-gradient(circle calc(var(--cas-b) * .0145) at 50% 49%, #060504 0 26%, #443D35 33%, #231E1A 64%, #12100D 84%, rgba(0, 0, 0, 0) 88%),
repeating-linear-gradient(-48deg, var(--vinyl-groef) 0 1px, rgba(0, 0, 0, 0) 1px 4px),
radial-gradient(120% 90% at 84% 2%, rgba(211, 232, 244, .10), rgba(0, 0, 0, 0) 56%),
linear-gradient(198deg, #2A2521 0%, var(--vinyl) 34%, #120F0D 72%, var(--vinyl-diep) 100%);
}
/* De glansbaan ligt vóór alles en veegt mee tijdens de draai — een reflectie
die op dezelfde plek blijft staan leest als een sticker, niet als licht. */
.cas-vlak--voor::after, .cas-vlak--achter::after {
content: ""; position: absolute; inset: -8% -24%; z-index: 6; pointer-events: none;
transform: translateX(var(--veeg));
transition: transform .95s var(--ease-in-out);
background: linear-gradient(104deg,
rgba(247, 244, 238, .11) 0%, rgba(247, 244, 238, .03) 12%,
rgba(0, 0, 0, 0) 27%, rgba(0, 0, 0, 0) 62%,
rgba(211, 232, 244, .07) 78%, rgba(247, 244, 238, .012) 92%, rgba(0, 0, 0, 0) 100%);
}
.cas-vlak--achter::after {
background: linear-gradient(76deg,
rgba(247, 244, 238, .11) 0%, rgba(247, 244, 238, .03) 12%,
rgba(0, 0, 0, 0) 27%, rgba(0, 0, 0, 0) 62%,
rgba(211, 232, 244, .07) 78%, rgba(247, 244, 238, .012) 92%, rgba(0, 0, 0, 0) 100%);
}
/* --- de drie zichtbare randen -----------------------------------------
Links en rechts zijn identiek en volledig symmetrisch over de dikte:
beide schaalhelften vangen evenveel licht, dus de rand ziet er ná de
halve slag precies hetzelfde uit. Ze lopen van hoek tot hoek door — geen
clip-path, want elke terugsnede op de naad met het voorvlak laat daar
een wig achtergrond zien. De afschuining onderaan zit in de verf. */
.cas-vlak--links, .cas-vlak--rechts {
/* 2px breder dan de dikte en een pixel naar voren én naar achteren
geschoven: dat overlapt de naad met het voor- en achtervlak, zodat daar
bij geen enkele stand een haarlijn achtergrond doorheen valt */
width: calc(var(--cas-d) + 2px); height: var(--cas-h);
margin-left: calc(var(--cas-d) / -2 - 1px); margin-top: calc(var(--cas-h) / -2);
background-image:
linear-gradient(90deg, rgba(0, 0, 0, 0) 45.6%, rgba(211, 232, 244, .06) 46.6% 47.6%,
rgba(0, 0, 0, .55) 47.6% 52.4%, rgba(211, 232, 244, .06) 52.4% 53.4%, rgba(0, 0, 0, 0) 54.4%),
linear-gradient(180deg, rgba(211, 232, 244, .14) 0%, rgba(0, 0, 0, 0) 26%,
rgba(0, 0, 0, .34) 84%, rgba(0, 0, 0, .68) 100%),
linear-gradient(90deg, #403931 0 3%, #26211C 13%, #171310 40% 60%, #26211C 87%, #403931 97% 100%);
}
.cas-vlak--rechts { transform: rotateY(90deg) translateZ(calc(var(--cas-b) / 2)); }
.cas-vlak--links { transform: rotateY(-90deg) translateZ(calc(var(--cas-b) / 2)); }
/* bovenrand: de twee uitsparingen van de wisbeveiliging, de matrijsnaad en
een verloop dat naar beide uiteinden wegvalt — dus flip-bestendig */
.cas-vlak--boven {
width: var(--cas-b); height: calc(var(--cas-d) + 2px);
margin-left: calc(var(--cas-b) / -2); margin-top: calc(var(--cas-d) / -2 - 1px);
transform: rotateX(90deg) translateZ(calc(var(--cas-h) / 2));
background-image:
linear-gradient(90deg, rgba(0, 0, 0, 0) 4%, #040303 5% 8.5%, rgba(0, 0, 0, 0) 9.5%,
rgba(0, 0, 0, 0) 90.5%, #040303 91.5% 95%, rgba(0, 0, 0, 0) 96%),
linear-gradient(180deg, rgba(0, 0, 0, 0) 44.4%, rgba(211, 232, 244, .07) 45.4% 46.4%,
rgba(0, 0, 0, .5) 46.4% 53.6%, rgba(211, 232, 244, .07) 53.6% 54.6%, rgba(0, 0, 0, 0) 55.6%),
linear-gradient(90deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, .45) 100%),
linear-gradient(180deg, #514740 0 5%, #2E2822 26%, #241F1B 74%, #514740 95% 100%);
background-size: 100% 44%, auto, auto, auto;
background-position: 0 50%, 0 0, 0 0, 0 0;
background-repeat: no-repeat, repeat, repeat, repeat;
}
/* --- het papieren label ----------------------------------------------- */
.cas-label {
position: absolute; left: 6.5%; right: 6.5%; top: 6.5%; height: 40%;
border-radius: calc(var(--cas-b) * .005);
overflow: hidden; display: flex; flex-direction: column;
padding: calc(var(--cas-b) * .047) calc(var(--cas-b) * .030) calc(var(--cas-b) * .016);
background-image:
repeating-linear-gradient(114deg, rgba(20, 17, 14, .016) 0 2px, rgba(0, 0, 0, 0) 2px 5px),
radial-gradient(130% 120% at 96% 112%, rgba(150, 116, 58, .20), rgba(150, 116, 58, 0) 52%),
radial-gradient(90% 130% at 6% -14%, rgba(255, 255, 255, .62), rgba(255, 255, 255, 0) 46%),
linear-gradient(174deg, #FDFAF3 0%, var(--basis) 52%, var(--basis-diep) 100%);
box-shadow: inset 0 0 0 1px rgba(20, 17, 14, .10), 0 1px 2px rgba(0, 0, 0, .55), 0 6px 14px -8px rgba(0, 0, 0, .7);
}
/* de gedrukte kleurbalk bovenlangs — het enige wat dit een Bertus-cassette
maakt; kant B loopt in omgekeerde volgorde */
.cas-label::before {
content: ""; position: absolute; left: 0; right: 0; top: 0;
height: calc(var(--cas-b) * .020);
background: linear-gradient(90deg, var(--paginakleur-diep) 0 30%, var(--paginakleur) 30% 62%, var(--paginakleur-zacht) 62% 100%);
box-shadow: 0 1px 0 rgba(20, 17, 14, .12);
}
.cas-vlak--achter .cas-label::before {
background: linear-gradient(90deg, var(--paginakleur-zacht) 0 38%, var(--paginakleur) 38% 70%, var(--paginakleur-diep) 70% 100%);
}
.cas-kop { display: flex; align-items: center; gap: .8em; }
.cas-letter {
font-family: var(--font-display); font-weight: 700; line-height: 1;
font-size: max(15px, 1.85em); letter-spacing: -.02em;
padding: .14em .34em .18em; border-radius: .16em;
background: var(--paginakleur-diep); color: var(--basis);
}
.cas-vlak--achter .cas-letter {
background: rgba(0, 0, 0, 0); color: var(--paginakleur-diep);
box-shadow: inset 0 0 0 .09em var(--paginakleur-diep);
}
/* de twee tekstregels die écht iets zeggen houden een bodem, zodat ze op
360px niet kleiner worden dan de decoratieve fijndruk eronder */
.cas-zijde {
font-family: var(--font-display); font-weight: 700;
font-size: max(9px, .8em); letter-spacing: .22em; text-transform: uppercase;
color: var(--inkt); white-space: nowrap; overflow: hidden;
}
.cas-lengte {
margin-left: auto; font-size: max(7.5px, .7em); letter-spacing: .2em; font-weight: 600;
color: var(--inkt-vaag); white-space: nowrap;
}
/* De voorgedrukte schrijfregels lopen dóór tot de rechterrand terwijl het
schrift al ophoudt. Het schrift zelf is één getekend pad — geen reeks
streepjes, want dat leest als een skeleton loader. */
.cas-regels {
position: relative; margin-top: calc(var(--cas-b) * .016);
margin-bottom: calc(var(--cas-b) * .012);
height: calc(var(--cas-b) * .084);
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 30'%3E%3Cg fill='none' stroke='%232F3A5C' stroke-width='1.05' stroke-linecap='round' stroke-linejoin='round' opacity='.6'%3E%3Cpath d='M3 10.2c1.6-5 5-4.8 5.6-.3.5 4.2 3.8 4 4.4 0 .8-3.4 1.4-8.8 3.2-10.8 1 4.3.4 9 .9 10.9.7 2.6 4 2.4 5.2-.3.8-2 1.5-4.6 2.8-4.3 1.4.3.6 3.8 1.7 4.8 1.2 1.1 3.2.8 4.2-.9'/%3E%3Cpath d='M40 10.1c1.5-4.6 4.6-4.4 5.2-.2.5 3.9 3.6 3.7 4.2 0 .6-3.2 1.1-7.4 2.7-9.1.9 3.7.3 7.6.8 9.3.7 2.4 3.7 2.2 4.8-.3.7-1.7 1.3-4 2.5-3.7 1.3.3.5 3.4 1.5 4.3 1.1 1 2.9.7 3.8-.8'/%3E%3Cpath d='M76 1.4c-.5 4.6-.7 7.6-.4 9 .4 2.4 3.4 2.2 4.4-.2.7-1.7 1.3-4.1 2.6-3.8 1.3.3.5 3.5 1.6 4.4 1.1 1 3 .7 3.9-.8M73.8 5.2h5.4'/%3E%3Cpath d='M94 10c1.4-4.3 4.4-4.1 4.9-.2.5 3.7 3.5 3.5 4 0 .6-3 1-6.9 2.5-8.5.8 3.4.3 7.1.7 8.7.7 2.3 3.6 2.1 4.6-.3.7-1.6 1.2-3.7 2.4-3.5 1.2.3.5 3.2 1.4 4.1 1 .9 2.8.6 3.6-.8'/%3E%3Cpath d='M132 9.9c1.3-3.9 4-3.7 4.5-.2.4 3.4 3.2 3.2 3.7 0 .5-2.7.9-6.2 2.3-7.7.7 3.1.2 6.4.6 7.9.6 2.1 3.3 1.9 4.2-.3'/%3E%3Cpath d='M3 20.2c1.5-4.7 4.7-4.5 5.3-.3.5 4 3.6 3.8 4.2 0 .7-3.2 1.3-8.2 3-10.1.9 4 .3 8.4.8 10.2.7 2.4 3.8 2.2 4.9-.3.7-1.9 1.4-4.3 2.6-4 1.3.3.6 3.6 1.6 4.5 1.1 1 3 .7 3.9-.9'/%3E%3Cpath d='M36 20.1c1.4-4.3 4.3-4.1 4.8-.2.5 3.7 3.4 3.5 4 0 .5-3 1-6.9 2.5-8.5.8 3.4.3 7.1.7 8.7.7 2.2 3.5 2 4.5-.3.7-1.6 1.2-3.7 2.3-3.5 1.2.3.5 3.2 1.4 4.1 1 .9 2.7.6 3.5-.8'/%3E%3Cpath d='M70 11.6c-.5 4.3-.6 7.1-.4 8.4.4 2.2 3.2 2 4.1-.2.6-1.6 1.2-3.8 2.4-3.5 1.2.3.5 3.2 1.5 4.1 1 .9 2.8.6 3.6-.8M68 15.1h5'/%3E%3Cpath d='M90 20c1.3-4 4-3.8 4.5-.2.4 3.5 3.2 3.3 3.7 0 .5-2.8.9-6.4 2.3-7.9.7 3.2.2 6.6.6 8.1.6 2.1 3.4 1.9 4.3-.3'/%3E%3C/g%3E%3C/svg%3E"),
repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0 calc(33.333% - 1px), rgba(20, 17, 14, .21) calc(33.333% - 1px) 33.333%);
background-repeat: no-repeat, repeat;
background-size: auto 100%, auto;
background-position: left top, 0 0;
}
/* kant B is met dezelfde pen geschreven, maar niet met dezelfde woorden */
.cas-vlak--achter .cas-regels {
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 30'%3E%3Cg fill='none' stroke='%232F3A5C' stroke-width='1.05' stroke-linecap='round' stroke-linejoin='round' opacity='.55'%3E%3Cpath d='M3 1.6c-.5 4.7-.7 7.8-.4 9.2.4 2.4 3.5 2.2 4.5-.2.7-1.8 1.4-4.2 2.7-3.9 1.3.3.5 3.6 1.6 4.5 1.1 1 3.1.7 4-.9M.7 5.4h5.6'/%3E%3Cpath d='M24 10.1c1.5-4.7 4.7-4.5 5.3-.3.5 4 3.6 3.8 4.2 0 .7-3.2 1.3-8.3 3-10.2.9 4 .3 8.5.8 10.3.7 2.5 3.8 2.3 4.9-.3.7-1.9 1.4-4.3 2.6-4 1.3.3.6 3.6 1.6 4.5 1.1 1 3 .7 3.9-.9'/%3E%3Cpath d='M62 10c1.3-4 4.1-3.8 4.6-.2.4 3.5 3.3 3.3 3.8 0 .5-2.8.9-6.5 2.3-8 .7 3.2.3 6.7.6 8.2.6 2.1 3.4 1.9 4.3-.3.6-1.5 1.1-3.5 2.2-3.3 1.1.3.4 3 1.3 3.9.9.8 2.6.6 3.3-.8'/%3E%3Cpath d='M96 10.1c1.4-4.4 4.4-4.2 4.9-.2.5 3.8 3.5 3.6 4 0 .6-3.1 1.1-7 2.6-8.7.8 3.5.3 7.3.7 8.9.6 2.3 3.6 2.1 4.6-.3'/%3E%3Cpath d='M3 20.2c1.4-4.4 4.4-4.2 4.9-.2.5 3.8 3.5 3.6 4.1 0 .6-3.1 1-7.1 2.5-8.7.8 3.5.3 7.3.7 8.9.7 2.3 3.6 2.1 4.7-.3.7-1.7 1.2-3.8 2.4-3.6 1.2.3.5 3.3 1.4 4.2 1 .9 2.8.6 3.7-.8'/%3E%3Cpath d='M40 20.1c1.5-4.6 4.6-4.4 5.2-.2.5 3.9 3.6 3.7 4.2 0 .6-3.2 1.1-7.5 2.8-9.3.9 3.9.3 8.1.8 9.5.7 2.4 3.7 2.2 4.8-.3.7-1.8 1.3-4.1 2.5-3.8 1.3.3.5 3.5 1.6 4.4 1.1 1 2.9.7 3.8-.8'/%3E%3Cpath d='M82 11.4c-.5 4.4-.6 7.3-.4 8.6.4 2.3 3.3 2.1 4.2-.2.6-1.6 1.2-3.9 2.4-3.6 1.2.3.5 3.3 1.5 4.2 1 .9 2.8.6 3.6-.8M79.9 15h5.1'/%3E%3Cpath d='M104 20c1.3-3.9 4-3.7 4.4-.2.4 3.4 3.2 3.2 3.7 0 .5-2.7.9-6.2 2.2-7.7.7 3.1.2 6.4.6 7.9.6 2 3.3 1.8 4.2-.3'/%3E%3C/g%3E%3C/svg%3E"),
repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0 calc(33.333% - 1px), rgba(20, 17, 14, .21) calc(33.333% - 1px) 33.333%);
}
.cas-fijndruk {
margin-top: auto;
font-size: max(7px, calc(var(--cas-b) * .0175));
letter-spacing: .12em; text-transform: uppercase;
color: rgba(20, 17, 14, .5); white-space: nowrap; overflow: hidden;
}
/* --- het venster met de twee spoelen ----------------------------------
Een uitsparing in de schaal: de bovenwand werpt schaduw naar binnen, de
onderwand vangt licht, en er zit een rand van schaalmateriaal omheen. */
.cas-venster {
position: absolute; left: 20%; right: 20%; top: 53%; height: 29%;
overflow: hidden; border-radius: calc(var(--cas-b) * .006);
background: linear-gradient(180deg, #090807 0%, #040303 60%, #0A0807 100%);
box-shadow:
0 0 0 max(1px, calc(var(--cas-b) * .0035)) #14100D,
0 max(1px, calc(var(--cas-b) * .0035)) 0 max(1px, calc(var(--cas-b) * .0035)) rgba(211, 232, 244, .13),
inset 0 calc(var(--cas-b) * .008) calc(var(--cas-b) * .016) rgba(0, 0, 0, .95),
inset 0 -1px 0 rgba(211, 232, 244, .12);
}
/* de band die onderlangs van pak naar pak loopt, áchter de wikkels */
.cas-venster::before {
content: ""; position: absolute; left: 4%; right: 4%; top: 82%; z-index: 0;
height: max(2px, calc(var(--cas-b) * .0075));
background: linear-gradient(180deg, #4A3B2D 0 20%, #241C15 56%, #0C0907 100%);
}
/* glasdikte plus reflectie, vóór de spoelen — veegt mee met de draai */
.cas-venster::after {
content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
transform: translateX(var(--veeg));
transition: transform .95s var(--ease-in-out);
background: linear-gradient(102deg,
rgba(211, 232, 244, .14) 0%, rgba(211, 232, 244, .03) 15%,
rgba(0, 0, 0, 0) 32%, rgba(0, 0, 0, 0) 72%,
rgba(211, 232, 244, .06) 86%, rgba(0, 0, 0, 0) 100%);
}
/* De naafhartlijnen liggen op 29% en 71% van de cassettebreedte. Het venster
loopt van 20% tot 80%, dus binnen het venster is dat 15% en 85%. De pakken
zijn bewust groter dan het venster: ze worden boven en onder afgesneden,
net als bij een echte cassette. De draai bij het wisselen loopt op deze
transitie — startAbFlip() zet één keer een hoek, verder niets. */
.cas-spoel {
position: absolute; z-index: 1; border-radius: 50%;
width: var(--pak); height: var(--pak);
top: 50%; margin-top: calc(var(--pak) / -2); margin-left: calc(var(--pak) / -2);
background-image:
radial-gradient(circle at 50% 50%, rgba(211, 232, 244, 0) 34%, rgba(211, 232, 244, .06) 47%, rgba(211, 232, 244, 0) 62%),
repeating-radial-gradient(circle at 50% 50%, rgba(247, 244, 238, .06) 0 var(--cas-lijn), rgba(0, 0, 0, 0) var(--cas-lijn) max(3px, calc(var(--cas-b) * .006))),
radial-gradient(circle at 50% 50%, #2A211A 0%, #1A1410 40%, #0D0A08 74%, #040303 100%);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .55);
transition: transform 1.05s var(--ease-in-out);
}
.cas-spoel--vol { --pak: calc(var(--cas-b) * .40); }
.cas-spoel--leeg { --pak: calc(var(--cas-b) * .265); }
.cas-spoel--l { left: 15%; }
.cas-spoel--r { left: 85%; }
/* het naafwiel met zes tandjes en het spilgat: het enige dat continu draait */
.cas-naaf {
position: absolute; border-radius: 50%;
width: var(--cas-naaf); height: var(--cas-naaf);
left: 50%; top: 50%;
margin-left: calc(var(--cas-naaf) / -2); margin-top: calc(var(--cas-naaf) / -2);
background-image:
radial-gradient(circle at 50% 50%, #050403 0 20%, rgba(0, 0, 0, 0) 21%),
radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 0 54%, rgba(8, 6, 5, .65) 62% 100%),
repeating-conic-gradient(from 10deg, #B3ACA0 0 33deg, #171310 33deg 60deg);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6);
animation: casNaaf 13s linear infinite;
}
.cas-spoel--vol .cas-naaf { animation-duration: 17s; } /* volle spoel draait trager */
.cas-spoel--leeg .cas-naaf { animation-duration: 11s; }
@keyframes casNaaf { to { transform: rotate(360deg); } }
/* --- de afgeschuinde onderlip met de vijf uitsparingen -----------------
Eén element, vijf lagen: de blootliggende band in het middengat, het diepe
middengat, de twee koppengaten, de twee aandrijfgaten en de afschuining
zelf. De sleuven zijn verzonken, niet doorgesneden — het silhouet blijft
dicht, dus er is geen kijkgat naar de pagina-achtergrond. */
.cas-drempel {
position: absolute; left: 0; right: 0; top: 84%; bottom: 0;
background-image:
linear-gradient(180deg, #46371F 0 30%, #241B12 68%, #0A0806 100%),
linear-gradient(90deg, rgba(0, 0, 0, 0) 44.4%, #010101 45% 55%, rgba(0, 0, 0, 0) 55.6%),
linear-gradient(90deg, rgba(0, 0, 0, 0) 36.2%, #010101 36.8% 41.4%, rgba(0, 0, 0, 0) 42%,
rgba(0, 0, 0, 0) 58%, #010101 58.6% 63.2%, rgba(0, 0, 0, 0) 63.8%),
linear-gradient(90deg, rgba(0, 0, 0, 0) 29.6%, #010101 30.2% 34%, rgba(0, 0, 0, 0) 34.6%,
rgba(0, 0, 0, 0) 65.4%, #010101 66% 69.8%, rgba(0, 0, 0, 0) 70.4%),
linear-gradient(180deg, rgba(211, 232, 244, .17) 0 var(--cas-lijn), #322A22 var(--cas-lijn),
#221C17 30%, #17130F 66%, #1E1813 100%);
background-size: 9% 5%, 100% 78%, 100% 56%, 100% 38%, auto;
background-position: 50% 66%, 0 100%, 0 100%, 0 100%, 0 0;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
}
/* --- beweging ---------------------------------------------------------
Alleen de vier naven draaien continu, en dat traag. De doos staat stil tot
iemand van kant wisselt. Buiten beeld staat alles stil. */
.ab-cassette-scene[data-cas-rust] .cas-naaf { animation-play-state: paused; }
/* de naven op de afgekeerde kant hoeven niet te tikken */
.cas-doos[data-cas-kant="a"] .cas-vlak--achter .cas-naaf,
.cas-doos[data-cas-kant="b"] .cas-vlak--voor .cas-naaf { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
.cas-doos, .cas-spoel,
.cas-vlak--voor::after, .cas-vlak--achter::after, .cas-venster::after { transition: none; }
.cas-naaf { animation: none; }
}
/* --- de tabs en panelen ernaast (ongewijzigd t.o.v. de huidige sectie) -- */
.ab-tabs { display: inline-flex; gap: 6px; padding: 5px; border: 1px solid var(--rand); border-radius: 999px; background: rgba(255, 253, 248, .8); }
.ab-tab {
padding: 9px 22px; border-radius: 999px;
font-family: var(--font-display); font-weight: 600; font-size: .9rem;
color: var(--inkt-zacht);
transition: background .3s ease, color .3s ease;
}
.ab-tab[aria-selected="true"] { background: var(--paginakleur-diep); color: var(--basis); }
/* panelen over elkaar in één grid: het blok houdt de hoogte van de langste
tekst vast, dus de plaat verspringt nooit bij het wisselen */
.ab-panelen { position: relative; margin-top: 26px; display: grid; }
.ab-paneel { grid-area: 1 / 1; }
.ab-paneel[hidden] { display: block; visibility: hidden; pointer-events: none; }
.ab-paneel h2 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); margin-bottom: 14px; }
.ab-spacer { height: 1.65em; }
/* ============ 20. TIJDLIJN-PLAAT ============ */
.tl { position: relative; }
.tl__ruimte { height: auto; }
.tl__stage { display: grid; grid-template-columns: .95fr 1.05fr; gap: 60px; align-items: center; }
.tl__plaatkant { position: relative; }
.tl__plaat {
position: relative; width: min(480px, 88vw); aspect-ratio: 1; margin: 0 auto;
border-radius: 50%;
background:
repeating-radial-gradient(circle, var(--vinyl-groef) 0 1px, transparent 1px 3.4px),
radial-gradient(circle, var(--vinyl), var(--vinyl-diep) 74%);
box-shadow: 0 40px 90px -30px rgba(58, 38, 22, .55), inset 0 0 60px rgba(0, 0, 0, .55);
will-change: transform;
}
.tl__plaat .tl-label {
position: absolute; inset: 36%; border-radius: 50%;
background: radial-gradient(circle at 36% 30%, var(--paginakleur), var(--paginakleur-diep) 82%);
border: 1px solid rgba(247, 244, 238, .25);
color: var(--basis);
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center;
}
.tl-label b { font-family: var(--font-display); font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.tl-label small { font-size: .58rem; letter-spacing: .26em; text-transform: uppercase; color: rgba(247, 244, 238, .85); }
.tl__ring {
position: absolute; border-radius: 50%; border: 1.5px solid transparent;
transition: border-color .4s ease, box-shadow .4s ease;
pointer-events: none;
}
.tl__ring.is-actief { border-color: var(--paginakleur); box-shadow: 0 0 24px var(--paginakleur-gloed); }
.tl__naald {
position: absolute; top: -3%; right: 4%; width: 42%; height: 72%;
transform-origin: 79% 12%; z-index: 3;
rotate: -10deg;
will-change: transform;
}
.tl__naald svg { width: 100%; height: 100%; overflow: visible; }
/* Rechterhelft: fotopaneel met de bediening eronder. De navigatie hoort
bewust NIET in .tl__kaarten — dat blok knipt af (overflow: hidden). */
.tl__paneelkant { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.tl__kaarten {
position: relative; overflow: hidden;
height: clamp(440px, 60vh, 560px);
border-radius: var(--radius);
background: var(--vinyl);
border: 1px solid var(--rand);
box-shadow: 0 40px 90px -40px rgba(58, 38, 22, .55);
}
/* streepje bovenaan, net als bij de footer */
.tl__paneel-streep {
position: absolute; top: 0; left: 0; right: 0; height: 5px; z-index: 4;
background: repeating-linear-gradient(90deg, var(--paginakleur) 0 2px, transparent 2px 9px);
opacity: .8; pointer-events: none;
}
.tl-kaart {
position: absolute; inset: 0;
opacity: 0; pointer-events: none;
will-change: opacity;
}
.tl-kaart__foto {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; object-position: center;
}
.tl-kaart__scrim {
position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(14, 11, 9, .28) 0%, rgba(14, 11, 9, .52) 44%, rgba(14, 11, 9, .92) 100%),
linear-gradient(90deg, rgba(14, 11, 9, .55) 0%, rgba(14, 11, 9, .08) 70%);
}
.tl-kaart__tekst {
position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
padding: clamp(24px, 3vw, 40px);
display: flex; flex-direction: column;
}
.tl-kaart__jaar {
font-family: var(--font-display); font-weight: 700;
font-size: clamp(3.4rem, 7vw, 5.6rem); line-height: 1; letter-spacing: -0.03em;
color: transparent; -webkit-text-stroke: 1.5px rgba(247, 244, 238, .85);
font-variant-numeric: tabular-nums;
}
.tl-kaart h3 { margin: 10px 0 10px; font-size: clamp(1.3rem, 2.2vw, 1.8rem); color: var(--basis); }
.tl-kaart p { color: rgba(247, 244, 238, .82); max-width: 46ch; }
.tl-kaart .tl-era {
display: inline-block; margin-top: 16px; align-self: flex-start;
font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 700;
padding: 6px 12px; border-radius: 999px; border: 1px solid var(--paginakleur); color: var(--basis);
background: rgba(247, 244, 238, .12);
}
/* Bediening: pijl terug — streepjes — pijl verder. Pas zichtbaar zodra JS de
tijdlijn echt kan aansturen (.tl--interactief), zodat er zonder JS en in de
statische val-terug geen dode knoppen blijven staan. De max-width houdt de
pijlen bij de streepjes als de kolom breed uitwaaiert (onder 1100px staat de
plaat bovenop en is het paneel containerbreed). */
.tl__nav { display: none; align-items: center; justify-content: center; gap: clamp(12px, 2vw, 20px); max-width: 620px; margin: 0 auto; width: 100%; }
.tl--interactief .tl__nav { display: flex; }
.tl__pijl {
width: 48px; height: 48px; flex: none; border-radius: 999px;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--rand-sterk); background: rgba(255, 253, 248, .8);
color: var(--paginakleur-diep);
transition: background .3s ease, color .3s ease, border-color .3s ease,
transform .35s var(--ease-luxe), box-shadow .35s ease, opacity .3s ease;
}
.tl__pijl svg { width: 21px; height: 21px; }
/* de pijlen staan op aria-disabled i.p.v. disabled (zie knoppenBij in main.js),
dus de dooie-knop-staat hangt aan dat attribuut */
.tl__pijl:hover:not([aria-disabled="true"]) {
background: var(--paginakleur-diep); color: var(--basis); border-color: transparent;
transform: translateY(-2px); box-shadow: 0 16px 34px -14px var(--paginakleur);
}
.tl__pijl:active:not([aria-disabled="true"]) { transform: scale(.94); }
.tl__pijl:disabled,
.tl__pijl[aria-disabled="true"] { opacity: .34; cursor: default; }
.tl__balk { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
/* streepje van 4px, maar met een klikvlak van 20px hoog eromheen */
.tl__balk button { position: relative; width: 26px; height: 20px; padding: 0; }
.tl__balk button::before {
content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px;
transform: translateY(-50%); border-radius: 2px;
/* donkerder dan --rand-sterk: een streepje is hier een échte knop en moet
3:1 halen tegen de ivoren achtergrond */
background: rgba(20, 17, 14, .5);
transition: background .3s ease, height .3s var(--ease-luxe);
}
.tl__balk button:hover::before { background: var(--paginakleur); }
.tl__balk button.is-actief::before { background: var(--paginakleur-diep); height: 7px; }
/* Statische fallback: geen animatie, kaarten netjes onder elkaar.
De plaat gaat hier BOVEN de stapel staan, niet ernaast. Bleef de kolomindeling
staan (op breed scherm gebeurde dat, want de 1fr-override zit pas onder
1100px), dan werd de rechterkolom door 12 gestapelde kaarten ~3900px hoog en
zweefde de plaat door align-items:center 1700px naar beneden — met een leeg
ivoren vlak van 1700x520px als resultaat. (18-08-2026) */
.tl--statisch .tl__stage { grid-template-columns: 1fr; align-items: start; gap: 44px; }
.tl--statisch .tl__plaat { width: min(320px, 70vw); }
.tl--statisch .tl__kaarten { height: auto; display: flex; flex-direction: column; gap: 30px; background: none; border: none; box-shadow: none; overflow: visible; }
.tl--statisch .tl__paneel-streep { display: none; }
/* min-height i.p.v. een vaste height: kaart 2022 heeft op 360px een regel extra
plus een badge en liep daardoor 23px over, wat er bovenaan afging — het
jaartal plakte tegen de rand. Hier liggen de kaarten los onder elkaar, dus
ongelijke hoogtes zijn geen probleem; in de interactieve variant (kaarten
over elkaar, inset 0) blijft de vaste hoogte staan. */
.tl--statisch .tl-kaart { position: relative; inset: auto; opacity: 1; pointer-events: auto; height: auto; min-height: 300px; display: flex; align-items: flex-end; border-radius: var(--radius); overflow: hidden; box-shadow: 0 30px 70px -40px rgba(58, 38, 22, .5); }
/* de tekst weer in de flow (de foto en de scrim blijven absoluut), zodat de
kaart met de tekst meegroeit; align-items:flex-end houdt hem onderaan */
.tl--statisch .tl-kaart__tekst { position: relative; width: 100%; }
.tl--statisch .tl__naald, .tl--statisch .tl__nav { display: none; }
/* Zonder JS wordt .tl--statisch nooit gezet, dus dan bleef er een leeg donker
paneel staan zónder één mijlpaal. Dezelfde val-terug, maar op html.no-js. */
html.no-js .tl__stage { grid-template-columns: 1fr; align-items: start; gap: 44px; }
html.no-js .tl__plaat { width: min(320px, 70vw); }
html.no-js .tl__kaarten { height: auto; display: flex; flex-direction: column; gap: 30px; background: none; border: none; box-shadow: none; overflow: visible; }
html.no-js .tl__paneel-streep { display: none; }
html.no-js .tl-kaart { position: relative; inset: auto; opacity: 1; pointer-events: auto; height: auto; min-height: 300px; display: flex; align-items: flex-end; border-radius: var(--radius); overflow: hidden; box-shadow: 0 30px 70px -40px rgba(58, 38, 22, .5); }
html.no-js .tl-kaart__tekst { position: relative; width: 100%; }
html.no-js .tl__naald, html.no-js .tl__nav { display: none; }
/* ============ 21. TAKKEN (Artone-structuur) ============ */
.takken { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.tak {
padding: 30px 28px;
border-radius: var(--radius); border: 1px solid var(--rand);
background: rgba(255, 253, 248, .78);
box-shadow: 0 10px 30px -24px rgba(58, 38, 22, .4);
}
.tak__kop { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.tak__kop .tak-icoon {
width: 42px; height: 42px; border-radius: 12px; flex: none;
display: flex; align-items: center; justify-content: center;
background: var(--paginakleur-gloed); color: var(--paginakleur-diep);
}
.tak > p { color: var(--inkt-zacht); font-size: .95rem; }
.tak__leden { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.tak__leden .pill { font-size: .8rem; padding: 7px 14px; }
/* Bertus valt op: eigen pill, feller en iets groter dan de rest */
.tak__leden .pill.is-bertus {
border-color: var(--paginakleur-diep); color: var(--paginakleur-diep);
background: var(--paginakleur-zacht);
font-weight: 700; font-size: .88rem; padding: 8px 17px;
}
.tak__leden .pill.is-bertus .dot { background: var(--paginakleur-diep); }
.takken--een { grid-template-columns: 1fr; }
.tak--verwijs { border-color: var(--paginakleur); background: linear-gradient(170deg, var(--paginakleur-zacht), rgba(255, 253, 248, .8) 60%); }
/* ============ 22. SERVICES-HOEZEN & DETAILPANELEN ============ */
/* de drie hoezen zelf staan in §14 (.hoezen-rij / .hoes), gedeeld met de home */
.krat-wrap { position: relative; }
.krat-hint {
margin-top: 26px; text-align: center;
font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--inkt-vaag);
}
/* detailpaneel dat openklapt onder de gekozen hoes */
.krat-paneel { position: relative; }
html.js .krat-paneel { height: 0; overflow: hidden; }
.krat-paneel__inner { padding: 40px 6px 20px; }
.krat-paneel article { position: relative; }
.krat-paneel .kpd-kop { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.krat-paneel .kpd-kop .kp-num { font-family: var(--font-display); font-weight: 600; font-size: .85rem; letter-spacing: .14em; color: var(--paginakleur-diep); }
.krat-paneel h2 { font-size: clamp(1.4rem, 2.6vw, 2.1rem); }
.krat-paneel .kpd-tag { font-size: .85rem; color: var(--inkt-vaag); }
.krat-paneel .kpd-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: start; }
.krat-paneel .kpd-grid p { color: var(--inkt-zacht); max-width: 62ch; }
.krat-paneel .svc-punten { margin: 18px 0 22px; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.kpd-disc {
position: absolute; right: 0; top: -12px;
width: 84px; height: 84px; border-radius: 50%;
background:
radial-gradient(circle, var(--hoes-label, var(--paginakleur-zacht)) 0 24%, transparent 24.5%),
repeating-radial-gradient(circle, rgba(247, 244, 238, .08) 0 1px, transparent 1px 3px),
radial-gradient(circle, var(--vinyl), var(--vinyl-diep) 72%);
will-change: transform;
}
.kpd-sluit { margin-top: 26px; }
/* zonder JS: alle detailpanelen gewoon open en leesbaar */
html.no-js .krat-paneel { height: auto; }
/* svc-punten wordt ook los gebruikt (My Bertus-sectie) */
.svc-punten { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
/* ============ 22-bis. SERVICES — meelopend menu + drie verhalen (18-08-2026)
Vervangt het krat met uitklappanelen; de krat- en kpd-regels hierboven
staan er nog, maar worden nergens meer gebruikt. Drie kolommen: links een
menu dat met je meeloopt, midden de drie verhalen allemaal open, rechts de
mediakolom — de poort naar de Top 200 langs 01 en 02, de plaat bij 03. ============ */
.svc-raster {
display: grid;
grid-template-columns: minmax(164px, 1fr) minmax(0, 3fr) minmax(300px, 2.1fr);
column-gap: clamp(28px, 3.4vw, 64px);
/* de kernpunt-pills zijn eruit (19-08): die ruimte wordt gewoon lucht */
row-gap: clamp(64px, 7.5vw, 128px);
align-items: start;
}
/* ---- links: het menu ---- */
.svc-menu {
grid-column: 1; grid-row: 1 / -1;
position: sticky; top: 116px;
display: flex; flex-direction: column;
border-left: 1px solid var(--rand);
}
.svc-menu__item {
position: relative;
display: flex; align-items: baseline; gap: 10px;
padding: 11px 0 11px 18px;
color: var(--inkt-zacht); text-decoration: none;
transition: color .3s ease;
}
/* de streep links markeert waar je bent; hij groeit open i.p.v. te knipperen */
.svc-menu__item::before {
content: ""; position: absolute; left: -1px; top: 7px; bottom: 7px;
width: 2px; border-radius: 2px; background: var(--paginakleur);
opacity: 0; transform: scaleY(.35); transform-origin: top;
transition: opacity .35s var(--ease-luxe), transform .35s var(--ease-luxe);
}
.svc-menu__item:hover { color: var(--inkt); }
.svc-menu__item.is-actief { color: var(--paginakleur-diep); }
.svc-menu__item.is-actief::before { opacity: 1; transform: scaleY(1); }
.svc-menu__nr {
font-family: var(--font-display); font-weight: 600;
font-size: .72rem; letter-spacing: .14em; color: var(--inkt-vaag);
}
.svc-menu__item.is-actief .svc-menu__nr { color: var(--paginakleur); }
.svc-menu__naam {
font-family: var(--font-display); font-weight: 600;
font-size: .95rem; line-height: 1.25; letter-spacing: -.01em;
}
/* ---- midden: de drie verhalen ---- */
.svc-blok { grid-column: 2; max-width: 64ch; scroll-margin-top: 118px; }
.svc-blok--01 { grid-row: 1; }
.svc-blok--02 { grid-row: 2; }
.svc-blok--03 { grid-row: 3; }
.svc-blok__kop { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.svc-blok__nr {
font-family: var(--font-display); font-weight: 600;
font-size: .85rem; letter-spacing: .14em; color: var(--paginakleur-diep);
}
.svc-blok h2 { font-size: clamp(1.5rem, 2.8vw, 2.2rem); }
.svc-blok__tag { font-size: .85rem; color: var(--inkt-vaag); }
.svc-blok .lead { color: var(--inkt-zacht); }
/* ---- rechts: de poort naar de Top 200 (19-08-2026) ----
Eén hoog venster dat over blok 01 én 02 staat: geen sticky meer, het vult
gewoon de twee rijen. Binnenin drijft een veld albumhoezen langzaam naar je
toe — de preview van de wereld erachter. Bij hover komt "Klik" naar voren. */
.svc-portaalkolom { grid-column: 3; grid-row: 1 / span 2; align-self: stretch; }
.svc-portaal {
position: relative; display: block; overflow: hidden;
height: 100%; min-height: 520px;
border-radius: 22px;
border: 1px solid rgba(20, 17, 14, .16);
/* de leegte tussen de hoezen — dezelfde kleur als in de 3D-wereld zelf */
background: radial-gradient(120% 76% at 50% 8%, #0B3247 0%, #04070D 62%);
box-shadow: 0 34px 66px -34px rgba(4, 26, 38, .78);
text-decoration: none;
perspective: 900px;
}
/* het licht diep in de poort */
.svc-portaal__diepte {
position: absolute; inset: 0;
background: radial-gradient(44% 30% at 50% 48%, rgba(0, 147, 201, .55), transparent 72%);
transition: opacity .6s var(--ease-luxe);
}
/* het veld kantelt om zijn onderrand, zodat de bovenste rij terugwijkt */
/* Het veld vult het hele venster en kantelt om zijn onderrand, zodat de
bovenkant terugwijkt. De reeks hoezen staat er twee keer in; de schuif van
precies één helft (min een halve tussenruimte) loopt daardoor rond zonder
zichtbare sprong. */
.svc-portaal__veld {
position: absolute; left: 4%; right: 4%; top: 0; bottom: 0;
overflow: hidden;
transform: rotateX(20deg) scale(1.02);
transform-origin: 50% 100%;
transition: transform .8s var(--ease-luxe);
}
.svc-portaal__hoezen {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
animation: portaalDrift 34s linear infinite;
}
@keyframes portaalDrift {
from { transform: translateY(0); }
to { transform: translateY(calc(-50% - 5px)); }
}
.svc-portaal__hoezen img {
width: 100%; height: auto; aspect-ratio: 1; object-fit: cover;
border-radius: 3px;
box-shadow: 0 12px 22px -10px rgba(0, 0, 0, .92);
transition: opacity .8s var(--ease-luxe);
}
/* de bovenste rij ligt verder de wereld in en verdwijnt in de mist */
.svc-portaal__hoezen img:nth-child(-n+3) { opacity: .8; }
/* onderin en bovenin verloopt het beeld in het donker */
.svc-portaal__gloed {
position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(4, 7, 13, .9) 0%, rgba(4, 7, 13, .28) 16%, rgba(4, 7, 13, 0) 32%),
linear-gradient(180deg, rgba(4, 7, 13, 0) 42%, rgba(4, 7, 13, .74) 68%, rgba(4, 7, 13, .97) 88%);
transition: opacity .6s var(--ease-luxe);
}
/* ---- de klik-laag ---- */
.svc-portaal__klik {
position: absolute; left: 0; right: 0; bottom: 0;
display: flex; flex-direction: column; align-items: center; gap: 10px;
padding: 0 22px 26px;
text-align: center; color: #FDFAF4;
}
/* "Klik" staat er altijd, maar komt bij hover echt naar voren */
.svc-portaal__woord {
font-family: var(--font-display); font-weight: 700;
font-size: clamp(2.2rem, 3.4vw, 3.4rem); line-height: 1;
letter-spacing: -.02em;
text-shadow: 0 6px 26px rgba(4, 7, 13, .8);
transform: translateY(14px) scale(.86); opacity: .78;
transition: transform .55s var(--ease-luxe), opacity .55s var(--ease-luxe);
}
.svc-portaal__tekst {
max-width: 22ch;
font-size: .95rem; line-height: 1.35; color: rgba(253, 250, 244, .86);
transform: translateY(14px); opacity: 0;
transition: transform .55s var(--ease-luxe) .05s, opacity .55s var(--ease-luxe) .05s;
}
.svc-portaal__pijl {
display: grid; place-items: center;
width: 44px; height: 44px; border-radius: 50%;
background: #FDFAF4; color: var(--paginakleur-diep);
transform: translateY(14px) scale(.8); opacity: 0;
transition: transform .55s var(--ease-luxe) .1s, opacity .55s var(--ease-luxe) .1s;
}
.svc-portaal:hover .svc-portaal__woord,
.svc-portaal:focus-visible .svc-portaal__woord { transform: translateY(0) scale(1); opacity: 1; }
.svc-portaal:hover .svc-portaal__tekst,
.svc-portaal:focus-visible .svc-portaal__tekst,
.svc-portaal:hover .svc-portaal__pijl,
.svc-portaal:focus-visible .svc-portaal__pijl { transform: translateY(0) scale(1); opacity: 1; }
/* bij hover stap je de wereld in */
.svc-portaal:hover .svc-portaal__veld { transform: rotateX(20deg) scale(1.09); }
.svc-portaal:hover .svc-portaal__diepte { opacity: 1; }
.svc-portaal:hover .svc-portaal__hoezen img:nth-child(-n+3) { opacity: .95; }
.svc-portaal:focus-visible { outline: 2px solid var(--paginakleur); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
.svc-portaal__hoezen { animation: none; }
}
/* ---- rechts onder: de persmachine als plaat (19-08-2026) ----
De foto van de vinylpers uit de oude site, rond uitgesneden met een groef-
ring eromheen: hetzelfde beeld als een plaat op de draaitafel. */
.svc-plaatkolom { grid-column: 3; grid-row: 3; }
.svc-pers {
position: relative; margin: 0;
width: min(340px, 100%); aspect-ratio: 1; margin-inline: auto;
}
.svc-pers__foto {
position: absolute; inset: 6%;
width: 88%; height: 88%; border-radius: 50%; object-fit: cover;
box-shadow: 0 30px 56px -28px rgba(4, 26, 38, .75), 0 0 0 1px rgba(20, 17, 14, .12);
}
/* de groefring: leest als de rand van een plaat rondom de foto */
.svc-pers__ring {
position: absolute; inset: 0; border-radius: 50%;
background:
repeating-radial-gradient(circle, rgba(20, 17, 14, .07) 0 1px, transparent 1px 5px),
radial-gradient(circle, #E7E0D2, #D8CFBE 72%);
box-shadow: inset 0 0 0 1px rgba(20, 17, 14, .1);
}
/* ---- smaller dan drie kolommen: alles onder elkaar ---- */
@media (max-width: 1099px) {
.svc-raster { grid-template-columns: 1fr; row-gap: clamp(38px, 6vw, 62px); }
.svc-menu {
position: static; grid-column: 1; grid-row: auto;
flex-direction: row; gap: 4px;
border-left: 0; border-bottom: 1px solid var(--rand);
overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.svc-menu__item { padding: 10px 14px; flex: 0 0 auto; }
.svc-menu__item::before {
left: 14px; right: 14px; top: auto; bottom: -1px;
width: auto; height: 2px;
transform: scaleX(.35); transform-origin: left;
}
.svc-menu__item.is-actief::before { transform: scaleX(1); }
.svc-blok, .svc-portaalkolom, .svc-plaatkolom { grid-column: 1; grid-row: auto; max-width: none; }
/* liggend portaal: lager, maar hetzelfde venster */
.svc-portaal { height: auto; min-height: 0; aspect-ratio: 5 / 4; max-width: 620px; margin-inline: auto; }
.svc-portaal__veld { left: 10%; right: 10%; }
.svc-pers { width: min(300px, 78%); }
}
/* ============ 23. TEAM ============ */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px; }
.lid {
position: relative; border-radius: var(--radius); overflow: hidden;
border: 1px solid var(--rand-sterk);
background: var(--basis-diep);
box-shadow: var(--schaduw);
aspect-ratio: 3 / 3.8;
}
.lid img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1); transition: transform .7s var(--ease-luxe); }
.lid:hover img { transform: scale(1.05); }
.lid__vlak {
position: absolute; inset: auto 0 0 0; padding: 74px 20px 18px;
background: linear-gradient(to top, rgba(20, 17, 14, .92) 26%, transparent);
}
.lid__vlak b { font-family: var(--font-display); font-size: 1.1rem; display: block; color: #FDFAF4; }
.lid__vlak span { font-size: .82rem; color: var(--paginakleur-zacht); letter-spacing: .04em; }
.lid__quote {
position: absolute; inset: 0; padding: 24px 22px;
display: flex; align-items: center;
background: rgba(250, 248, 243, .95); backdrop-filter: blur(6px);
border-top: 4px solid var(--paginakleur);
font-size: .92rem; line-height: 1.6; color: var(--inkt);
opacity: 0; transition: opacity .4s ease;
}
.lid:hover .lid__quote, .lid:focus-within .lid__quote, .lid.is-open .lid__quote { opacity: 1; }
.lid__quote::before { content: "\201C"; position: absolute; top: 6px; left: 16px; font-family: var(--font-display); font-size: 3.4rem; color: var(--paginakleur); opacity: .55; }
/* ============ 24. VACATURES ============ */
.vacatures { display: flex; flex-direction: column; }
.vacature {
display: grid; grid-template-columns: 1fr auto auto 44px; gap: 22px; align-items: center;
padding: 26px 6px; text-decoration: none; color: inherit;
border-top: 1px solid var(--rand);
transition: padding .4s var(--ease-luxe), background .3s ease;
}
.vacature:last-of-type { border-bottom: 1px solid var(--rand); }
.vacature:hover { padding-left: 18px; background: var(--paginakleur-gloed); }
.vacature b { font-family: var(--font-display); font-size: clamp(1.05rem, 1.8vw, 1.4rem); font-weight: 700; }
.vacature .vac-meta { font-size: .88rem; color: var(--inkt-zacht); white-space: nowrap; }
.vacature .vac-pijl {
width: 44px; height: 44px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
border: 1px solid var(--rand-sterk);
transition: background .3s ease, transform .4s var(--ease-luxe), color .3s ease, border-color .3s ease;
}
.vacature:hover .vac-pijl { background: var(--paginakleur-diep); border-color: var(--paginakleur-diep); color: var(--basis); transform: rotate(-35deg); }
/* ============ 25. CONTACT — KEUZE & FORMULIER ============ */
.keuze-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.keuze {
position: relative; padding: 30px 26px 26px; text-align: left;
border-radius: var(--radius); border: 1px solid var(--rand);
background: rgba(255, 253, 248, .78);
box-shadow: 0 10px 30px -24px rgba(58, 38, 22, .4);
transition: border-color .3s ease, transform .4s var(--ease-luxe), background .3s ease;
}
.keuze:hover { transform: translateY(-4px); border-color: var(--rand-sterk); }
.keuze.is-actief { border-color: var(--paginakleur-diep); background: linear-gradient(170deg, var(--paginakleur-zacht), rgba(255, 253, 248, .85) 60%); }
.keuze .keuze-disc {
width: 46px; height: 46px; border-radius: 50%; margin-bottom: 16px;
background:
radial-gradient(circle, var(--keuze-label, var(--paginakleur)) 0 26%, transparent 27%),
repeating-radial-gradient(circle, rgba(247, 244, 238, .1) 0 1px, transparent 1px 3px),
radial-gradient(circle, var(--vinyl), var(--vinyl-diep) 70%);
transition: transform .5s var(--ease-luxe);
}
.keuze:hover .keuze-disc, .keuze.is-actief .keuze-disc { transform: rotate(120deg); }
.keuze b { display: block; font-family: var(--font-display); font-size: 1.15rem; margin-bottom: 6px; }
.keuze small { font-size: .88rem; color: var(--inkt-zacht); line-height: 1.5; display: block; }
.keuze .keuze-check {
position: absolute; top: 18px; right: 18px;
width: 22px; height: 22px; border-radius: 50%;
border: 1px solid var(--rand-sterk);
transition: background .3s ease, border-color .3s ease;
}
.keuze.is-actief .keuze-check { background: var(--paginakleur-diep); border-color: var(--paginakleur-diep); }
.keuze.is-actief .keuze-check::after {
content: ""; position: absolute; left: 7px; top: 4px; width: 6px; height: 10px;
border: solid var(--basis); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.veld { display: flex; flex-direction: column; gap: 7px; }
.veld--breed { grid-column: 1 / -1; }
.veld label { font-size: .85rem; font-weight: 600; color: var(--inkt-zacht); }
.veld label .verplicht { color: var(--paginakleur-diep); }
.veld input, .veld select, .veld textarea {
width: 100%; padding: 14px 16px;
background: #FFFDF8;
border: 1px solid var(--rand-sterk); border-radius: 12px;
color: var(--inkt); font: inherit; font-size: .96rem;
transition: border-color .25s ease, box-shadow .25s ease;
}
.veld select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23274B4D' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
.veld textarea { min-height: 130px; resize: vertical; }
.veld input:focus, .veld select:focus, .veld textarea:focus { outline: none; border-color: var(--paginakleur-diep); box-shadow: 0 0 0 3px var(--paginakleur-gloed); }
.veld input::placeholder, .veld textarea::placeholder { color: var(--inkt-vaag); }
.veld.heeft-fout input, .veld.heeft-fout select, .veld.heeft-fout textarea { border-color: #B3352C; }
.fout-msg { display: none; font-size: .8rem; color: #8F2A22; }
.veld.heeft-fout .fout-msg { display: block; }
.form__voet { grid-column: 1 / -1; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 8px; }
.form__status { font-size: .9rem; color: var(--paginakleur-diep); min-height: 1.4em; }
.form-wrap[hidden] { display: none; }
.contact-item { padding: 20px 0; border-bottom: 1px solid var(--rand); }
.contact-item:first-child { padding-top: 0; }
/* h3 sinds 18-08: het informatieblok stond op h4 terwijl er alleen h2's boven
staan, dus de koppenhiërarchie sprong een niveau over. De opmaak hangt aan
.contact-item, dus visueel verandert er niets. */
.contact-item h3, .contact-item h4 { font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--inkt-vaag); margin-bottom: 6px; }
.contact-item p, .contact-item a { font-size: 1rem; color: var(--inkt); text-decoration: none; }
.contact-item a:hover { color: var(--paginakleur-diep); }
/* ============ 26. SCHUINE STROKEN ============
(De golf-overgang [data-wave] die hier stond is op 18-08-2026 vervallen: alle
vijf pagina's gebruiken nu de schuine strook hieronder. De bijbehorende
functie startGolven is uit main.js verwijderd.)
Variant A (.schuin) = brede lichtblauwe scheiding tussen twee secties.
Variant B (.schuin-blok) = dezelfde strook, maar dan als blok mét inhoud.
Uitdrukkelijke wens: géén lijntjes/raster erdoorheen, alleen kleurverloop.
REKENWERK — waarom de stroken zo hoog zijn:
een balk die over -3° gedraaid staat, steekt aan de uiteinden verticaal uit
met tan(3°) × de halve breedte. Over de volle viewport is dat
0,0524 × 100vw / 2 = 2,62vw bóven en 2,62vw ónder de balk. Is de strook
lager dan de balk + 2 × 2,62vw, dan knipt overflow:hidden de schuine randen
recht af en is het effect weg. De marge rondom de balk is daarom altijd
3,2vw + 10px — ruim boven de benodigde 2,62vw op élke breedte
(360px: 21,5px nodig 9,4 · 1440px: 56px nodig 37,7 · 1920px: 71px nodig 50,3). */
:root {
/* Hoogteverschil van een schuine rand over de volle breedte. 5,24vw komt
overeen met 3°: tan(3°) × 100vw. Alle schuine randen op de site gebruiken
deze ene waarde, dus ze lopen allemaal exact even schuin. */
--schuin-val: 5.24vw;
--schuin-lucht: clamp(46px, 5.4vw, 84px); /* ademruimte boven en onder de inhoud */
}
/* Een scene knipt zijn eigen boven- en onderrand schuin af en schuift daarna
precies één randhoogte omhoog. Daardoor valt zijn bovenrand samen met de
onderrand van de scene erboven: de vlakken liggen tegen elkaar aan, zonder
ivoren balk ertussen. Het kleurverloop zit in .schuin-blok__band, die het
hele vlak vult — de schuinte komt van de clip, niet van een draaiing. */
.schuin-blok {
position: relative;
clip-path: polygon(0 var(--schuin-val), 100% 0, 100% calc(100% - var(--schuin-val)), 0 100%);
margin-top: calc(var(--schuin-val) * -1);
padding-block: calc(var(--schuin-val) + var(--schuin-lucht));
}
.schuin-blok__band { position: absolute; inset: 0; z-index: 0; }
.schuin-blok > .container { position: relative; z-index: 1; }
/* De losse lichtblauwe strook (alleen nog op de homepagina) is dezelfde scene,
maar zonder inhoud: alleen een vlak met een vaste hoogte. */
.schuin {
position: relative; pointer-events: none;
clip-path: polygon(0 var(--schuin-val), 100% 0, 100% calc(100% - var(--schuin-val)), 0 100%);
margin-top: calc(var(--schuin-val) * -1);
height: calc(2 * var(--schuin-val) + clamp(52px, 5vw, 92px));
}
.schuin::before,
.schuin-blok--licht .schuin-blok__band {
content: "";
position: absolute; inset: 0; z-index: 0;
background:
radial-gradient(110% 180% at 16% 0%, rgba(255, 255, 255, .40), transparent 55%),
linear-gradient(96deg, #E7F3FA 0%, var(--paginakleur-zacht) 52%, #E2F0F8 100%);
}
/* ---- Merkvlak: schuin blok in het blauw van het logo (19-08-2026) ----
Gebruikt door "Op zoek naar exclusieve labeldistributie?" op Services. De
kaart erop wordt een glasvlak, zodat de tekst op het blauw leesbaar blijft. */
.schuin-blok--merkvlak .schuin-blok__band {
background:
radial-gradient(72% 120% at 14% -10%, rgba(41, 180, 230, .55), rgba(41, 180, 230, 0) 58%),
linear-gradient(104deg, var(--paginakleur) 0%, var(--paginakleur) 34%, var(--paginakleur-vlak-diep) 100%);
}
.schuin-blok--merkvlak { color: var(--basis); }
.schuin-blok--merkvlak .tak {
border-color: rgba(253, 250, 244, .3);
/* dichter glas dan een gewone kaart: hierdoor haalt de lopende tekst op het
merkblauw ruim 4,5:1, terwijl de strook eronder zichtbaar blijft */
background: rgba(5, 48, 70, .42);
-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
box-shadow: 0 24px 50px -30px rgba(4, 26, 38, .7);
}
.schuin-blok--merkvlak .tak h2 { color: #FDFAF4; }
.schuin-blok--merkvlak .tak .lead,
.schuin-blok--merkvlak .tak > p { color: rgba(253, 250, 244, .92); }
.schuin-blok--merkvlak .tak__kop .tak-icoon {
background: rgba(253, 250, 244, .18); color: #FDFAF4;
}
/* de knop op het blauw: ivoor met donkere tekst, zoals op de andere banden */
.schuin-blok--merkvlak .btn--koper {
background: #FDFAF4; color: var(--paginakleur-diep); border-color: transparent;
}
.schuin-blok--merkvlak .btn--koper:hover { background: #FFFFFF; }
/* ---- Onze missie: een volledig blauw schuin blok (18-08-2026) ----
Het verloop loopt hier andersom dan bij de Artone-strook: diep aan de
línkerkant, want daar staat de tekst. Wit op var(--paginakleur) haalt maar
3,5:1, op var(--paginakleur-diep) 7,1:1. Bij Artone is het net omgekeerd,
daar staat links het logo en rechts de tekst — zelfde kleuren, ander ritme. */
.schuin-blok--missie .schuin-blok__band {
background:
radial-gradient(70% 120% at 88% 110%, rgba(41, 180, 230, .5), rgba(41, 180, 230, 0) 60%),
linear-gradient(104deg, var(--paginakleur-vlak-diep) 0%, var(--paginakleur) 58%, var(--paginakleur) 100%);
}
/* tekst op blauw — zelfde behandeling als .section--paper */
.schuin-blok--missie { color: var(--basis); }
.schuin-blok--missie .eyebrow { color: rgba(247, 244, 238, .88); }
.schuin-blok--missie .eyebrow::before { background: rgba(247, 244, 238, .55); }
.schuin-blok--missie .statement__text { color: #FDFAF4; }
/* .72 gaf op dit blauw maar 3,2:1 (nagemeten op de gerenderde pixels); .9 haalt
4,6:1. Het citaat blijft ondergeschikt door de kleinere cursieve letter. */
.schuin-blok--missie .statement__orig { color: rgba(247, 244, 238, .9); }
.schuin-blok--missie .link { color: #FDFAF4; }
.schuin-blok--missie .link:hover { color: #fff; }
.schuin-blok--missie .eq i,
.schuin-blok--missie [data-eq] i { background: rgba(247, 244, 238, .9); }
/* ---- CTA-band: schuine bovenrand i.p.v. een strakke horizontale lijn ----
De band heeft een fotoachtergrond, dus knippen is hier logischer dan een
gedraaide balk: clip-path houdt de foto heel en geeft de rand dezelfde val
als de stroken.
Het missie-blok erbóven is nu óók blauw. Zonder tussenruimte lopen die twee
blauwe vlakken in elkaar over tot één lange blauwe lap. De marge hieronder
laat daarom bewust een ivoren wig staan: beide randen lopen even schuin, dus
die wig is overal even breed en leest als een lint tussen de twee blokken. */
.cta-band--schuin {
clip-path: polygon(0 var(--schuin-val), 100% 0, 100% 100%, 0 100%);
margin-top: calc(var(--schuin-val) * -1);
padding-top: calc(var(--schuin-val) + clamp(70px, 8vw, 110px));
}
/* ---- Eén lengte voor alle schuine banden (19-08-2026) ----
Op verzoek van de klant zijn de blauwe/lichte stroken op élke pagina even
lang én ongeveer anderhalf keer zo lang als voorheen (de CTA-band mat 653px,
die is de maatstaf). De inhoud staat verticaal gecentreerd, zodat een korte
band niet bovenin blijft plakken. De mindmap-strook op Over Bertus doet niet
mee: die heeft zijn eigen (veel grotere) maat. */
.schuin-blok,
.cta-band--schuin {
--band-lengte: clamp(560px, 74vw, 980px);
min-height: var(--band-lengte);
display: flex; flex-direction: column; justify-content: center;
}
.schuin-blok > .container,
.cta-band--schuin > .container { width: 100%; }
/* ---- EQ-balkjes ---- */
.eq, [data-eq] { display: inline-flex; align-items: flex-end; gap: 3px; height: 16px; }
.eq i, [data-eq] i { width: 3px; height: 30%; background: var(--paginakleur-diep); border-radius: 2px; will-change: transform; transform-origin: bottom; }
.eq--lg, [data-eq].eq--lg { height: 26px; gap: 4px; }
.eq--lg i { width: 4px; }
/* ============ 27. TELLER (sinds 1971) ============ */
.timer { display: flex; justify-content: center; gap: clamp(14px, 3.4vw, 40px); margin-top: 44px; flex-wrap: wrap; }
.timer__unit { min-width: 86px; }
.timer__num {
display: block; font-family: var(--font-display); font-weight: 700;
font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1; letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.timer__label { display: block; margin-top: 8px; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--inkt-vaag); }
/* ============ 28. FOOTER (warm donker — ankerpunt van de pagina) ============ */
.site-footer {
position: relative; margin-top: 40px;
background: var(--vinyl);
color: rgba(247, 244, 238, .68);
border-top: 1px solid var(--rand);
}
.site-footer::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px;
background: repeating-linear-gradient(90deg, var(--paginakleur) 0 2px, transparent 2px 9px);
opacity: .7;
}
/* woordmerk in het logo is inkt-donker; in de donkere footer wordt het ivoor */
.site-footer .logo-woord path { fill: var(--basis); }
.footer-grid {
display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px;
padding: 70px 0 50px;
}
.footer-merk .logo { margin-bottom: 16px; }
.footer-merk p { font-size: .92rem; color: rgba(247, 244, 238, .6); max-width: 30ch; }
.footer-kop { font-family: var(--font-display); font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(247, 244, 238, .45); margin-bottom: 16px; }
.footer-lijst { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-lijst a { color: rgba(247, 244, 238, .72); text-decoration: none; font-size: .95rem; transition: color .25s ease; }
.footer-lijst a:hover { color: var(--paginakleur); }
.footer-lijst .adres { color: rgba(247, 244, 238, .72); font-size: .95rem; font-style: normal; line-height: 1.6; }
.footer-onder {
display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
padding: 22px 0 26px; border-top: 1px solid rgba(247, 244, 238, .12);
font-size: .82rem; color: rgba(247, 244, 238, .45);
}
.footer-onder .docs { display: flex; gap: 18px; }
/* ============ 29. REVEAL-BEGINSTANDEN (alleen met JS) ============ */
html.js [data-hero-fade] { opacity: 0; }
/* 132% i.p.v. 112%: het masker is sinds 18-08 .18em hoger (staartruimte, §3),
dus de regel moet ook die extra ruimte uit beeld schuiven om bij het begin
van de opkomanimatie écht verborgen te zijn. */
html.js .line > span { transform: translateY(132%); }
html.js [data-reveal] { opacity: 0; }
html.js [data-stagger] > * { opacity: 0; }
html.js [data-words] .w { opacity: .12; }
/* ============ 30. RESPONSIVE ============ */
@media (max-width: 1100px) {
.hero__inner { grid-template-columns: 1fr; gap: 50px; }
.tt { margin: 0 auto; max-width: 480px; }
.hero__bigword { top: 30%; }
.stats { grid-template-columns: repeat(2, 1fr); }
.wie-split { grid-template-columns: 1fr; gap: 46px; }
.split, .ab-wrap, .tl__stage { grid-template-columns: 1fr; gap: 44px; }
/* smal scherm: logo boven, tekst eronder */
.artone-band { grid-template-columns: 1fr; gap: 30px; }
.artone-band__merk { justify-content: flex-start; }
.artone-band__logo { width: min(100%, 250px); }
.overlay-visual { display: none; }
.hoezen-rij { grid-template-columns: 1fr 1fr; }
.footer-grid { grid-template-columns: 1fr 1fr; }
.krat-paneel .kpd-grid { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
.header-nav { display: none; }
.menu-btn { width: auto; padding: 13px 12px; opacity: 1; pointer-events: auto; }
.header-shell { height: 60px; }
}
@media (max-width: 680px) {
.container { padding: 0 20px; }
.section { padding: 76px 0; }
.hero { padding-top: 120px; }
.page-hero--foto { padding-top: 120px; }
/* Op smal doet de horizontale scrim bijna niets (hij is een percentage van de
breedte), dus daar een verticale wash die de tekst onderaan draagt.
Geldt ook voor de subpagina's, die sinds 18-08 dezelfde opbouw hebben.
De wash is op 18-08 dieper gezet ónder de titelband: het accentwoord staat
op ~28% vanaf onder en kreeg daar met de oude stops nog maar ~,68 alpha,
te weinig voor 4,5:1. Boven 72% blijft het verloop licht, dus de foto
blijft bovenin gewoon zichtbaar. */
.hero__scrim,
.page-hero__scrim {
background: linear-gradient(0deg,
rgba(16,12,8,.92) 0%, rgba(16,12,8,.78) 45%, rgba(16,12,8,.34) 72%, rgba(16,12,8,.10) 100%);
}
/* Header past niet op smal: logo + NL|EN + My Bertus + hamburger samen zijn
breder dan de balk, waardoor de hamburger buiten beeld viel (17-08-2026).
De taalschakelaar staat óók in het overlay-menu (layout.js), dus die kan
hier weg; My Bertus blijft, want daar komt het meeste verkeer voor. */
.header-shell { padding: 0 10px 0 16px; gap: 12px; }
.site-header .lang-switch { display: none; }
.header-acties { gap: 4px; }
.cta-wrap { margin-left: 2px; }
.header-cta { padding: 11px 14px; }
.hero__meta .btn { width: 100%; justify-content: center; }
.stats { grid-template-columns: 1fr 1fr; gap: 12px; }
.stat { padding: 22px 18px 18px; }
.hoezen-rij { grid-template-columns: 1fr; }
.keuze-grid { grid-template-columns: 1fr; }
.form { grid-template-columns: 1fr; }
/* Vacaturekaart stapelt op smal: titel, plaats en uren onder elkaar, pijl
rechtsboven. De vac-meta's stonden op nowrap en liepen daardoor buiten de
kaart; de oude `.vac-meta:last-of-type`-regel raakte niets, want de pijl is
óók een span. (17-08-2026) */
.vacature,
.vacature--klap .vacature__kop { grid-template-columns: 1fr 44px; gap: 5px 16px; align-items: start; }
.vacature b,
.vacature .vac-meta { grid-column: 1; }
.vacature .vac-meta { white-space: normal; }
.vacature .vac-pijl { grid-column: 2; grid-row: 1; }
.footer-grid { grid-template-columns: 1fr; gap: 30px; padding: 50px 0 36px; }
.overlay-nav a { font-size: clamp(1.85rem, 9vw, 2.6rem); }
.cta-band .disc { right: -220px; opacity: .4; }
.timer__unit { min-width: 64px; }
.lang-switch { max-width: none; }
.zu-stats .stat-mini { padding: 12px 18px 10px; }
.media--foto::before { inset: 10px -10px -10px 10px; }
}
/* ============ 31. REDUCED MOTION & NO-JS ============ */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .15s !important; }
html.js [data-hero-fade], html.js [data-reveal], html.js [data-stagger] > * { opacity: 1; }
html.js .line > span { transform: none; }
html.js [data-words] .w { opacity: 1; }
.naald-balk { display: none !important; }
}
html.no-js .intro-loader, html.no-js .naald-balk { display: none; }
/* ============ 27. ARTONE-MINDMAP (Over Bertus) ============
Losse module, bron staat in ../Bertus-mindmap/. Alles is geprefixt met
.zx- zodat het niets in de rest van dit bestand raakt. Wijzig hem daar en
draai daarna tools/zet-in-site.cjs; dan blijft de losse preview kloppen.
============================================================ */
.zx-netwerk {
/* ---- merkkleuren ---- */
--zx-merk: #0093C9;
--zx-merk-diep: #0A5E86;
--zx-merk-licht: #5FBCE0;
--zx-merk-ijs: #A9DCF0;
--zx-merk-zacht: #D3E8F4;
/* ---- basis: hetzelfde warme ivoor als de site ---- */
--zx-basis: #F7F4EE;
--zx-inkt-donker: #14110E;
--zx-inkt-mid: rgba(20, 17, 14, .70);
/* ---- inkt op het blauw ---- */
--zx-wit: #FDFAF4;
--zx-wit-zacht: rgba(253, 250, 244, .84);
--zx-wit-vaag: rgba(253, 250, 244, .60);
--zx-lijn: rgba(253, 250, 244, .26);
--zx-lijn-sterk: rgba(253, 250, 244, .48);
/* Schuine strook — exact de maatvoering van §26 van de site, zodat deze rand
precies even schuin loopt als alle andere schuine randen op de pagina. */
--zx-hoek: -3deg;
--zx-marge: calc(3.2vw + 10px);
--zx-uit: -14%;
--zx-rood: #D93A3F;
--zx-font-d: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
--zx-font-b: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
--zx-soepel: cubic-bezier(.22, 1, .36, 1);
position: relative;
isolation: isolate;
overflow: hidden;
/* Zelfde formule als .schuin-blok--merk op de site: de marge van de strook
plus lucht. Zo valt er nooit tekst in de ivoren wig van de schuine rand. */
padding: calc(var(--zx-marge) + clamp(40px, 4.6vw, 74px)) clamp(16px, 4vw, 48px);
/* Boven- en onderrand van deze sectie zijn de ivoren wiggen naast de schuine
strook. De teller eronder is sinds 18-08-2026 wit, dus de ónderste wig moet
dat ook zijn; de knip zit halverwege, verstopt achter het blauw. */
background: linear-gradient(180deg, var(--zx-basis) 0 50%, #FFFFFF 50% 100%);
color: var(--zx-wit);
font-family: var(--zx-font-b);
-webkit-font-smoothing: antialiased;
}
.zx-netwerk *,
.zx-netwerk *::before,
.zx-netwerk *::after { box-sizing: border-box; }
/* ============ 1. ACHTERGROND ============ */
.zx-achtergrond { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.zx-achtergrond > * { position: absolute; display: block; }
/* De brede schuine strook in merkblauw. Zelfde recept als op de site:
alleen de achtergrond staat schuin, de inhoud blijft horizontaal.
Het lichtste blauw ligt linksboven; de kaarten dragen hun eigen vlak,
dus het contrast van de tekst hangt niet van de plek op de strook af. */
.zx-achtergrond__band {
left: var(--zx-uit); right: var(--zx-uit);
top: var(--zx-marge); bottom: var(--zx-marge);
transform: rotate(var(--zx-hoek));
/* Licht in het midden (bij het logo), diep naar de randen. Zo staat álle
tekst — kop, lead en kaarten — op het diepe deel: wit haalt daar 7:1,
terwijl het op #0093C9 maar 3,5:1 zou zijn. */
background:
radial-gradient(56% 62% at 50% 52%, rgba(45, 182, 232, .52), rgba(45, 182, 232, 0) 64%),
linear-gradient(104deg, var(--zx-merk-diep) 0%, #0093C9 44%, var(--zx-merk-diep) 100%);
}
/* zachte gloed pal achter het logo — volgt de muis licht mee */
.zx-achtergrond__gloed {
inset: 0;
background:
radial-gradient(40% 42% at 50% 50%, rgba(190, 232, 250, .30) 0%, rgba(190, 232, 250, .10) 44%, transparent 72%);
transform: translate3d(var(--zx-gx, 0px), var(--zx-gy, 0px), 0);
will-change: transform;
}
.zx-achtergrond__korrel {
inset: 0;
opacity: .13; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
/* ============ 2. KOP ============ */
.zx-kop {
position: relative; z-index: 2;
max-width: 780px; margin: 0 auto clamp(12px, 1.6vw, 22px);
text-align: center;
}
.zx-kop__eyebrow {
margin: 0 0 12px;
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--zx-font-d); font-weight: 600;
font-size: .72rem; letter-spacing: .26em; text-transform: uppercase;
color: var(--zx-basis);
}
.zx-kop__eyebrow::before,
.zx-kop__eyebrow::after {
content: ""; width: 26px; height: 1px; background: var(--zx-lijn-sterk);
}
.zx-kop__titel {
margin: 0 0 16px;
font-family: var(--zx-font-d); font-weight: 700;
font-size: clamp(1.7rem, 3.6vw, 2.6rem); line-height: 1.08; letter-spacing: -.028em;
color: #FFFFFF;
}
.zx-kop__lead {
margin: 0 auto; max-width: 76ch;
font-size: clamp(.9rem, 1.2vw, .98rem); line-height: 1.58;
color: #EAF4FA;
}
/* ============ 3. HET VELD ============ */
.zx-veld {
position: relative; z-index: 2;
width: 100%; max-width: 1360px; margin: 0 auto;
/* één vast blok, geen scroll-choreografie */
height: clamp(580px, 69vh, 780px);
}
/* ---- draadjes ---- */
.zx-draden {
position: absolute; inset: 0; width: 100%; height: 100%;
z-index: 1; overflow: visible; pointer-events: none;
}
.zx-draad__basis {
fill: none; stroke-width: 1.7; stroke-linecap: round;
transition: stroke-width .45s var(--zx-soepel), opacity .45s var(--zx-soepel);
}
.zx-draad--supply .zx-draad__basis { stroke: url(#zxDraadL); }
.zx-draad--labels .zx-draad__basis { stroke: url(#zxDraadR); }
.zx-draad__flits {
fill: none; stroke: #FFFFFF; stroke-width: 1.7; stroke-linecap: round;
stroke-dasharray: 3 118; opacity: .55;
animation: zx-stroom 5.5s linear infinite;
}
.zx-draad__punt {
fill: var(--zx-basis); opacity: .6;
transition: r .4s var(--zx-soepel), opacity .4s var(--zx-soepel);
}
@keyframes zx-stroom { from { stroke-dashoffset: 121; } to { stroke-dashoffset: 0; } }
.zx-draad.is-actief .zx-draad__basis { stroke-width: 2.4; }
.zx-draad.is-actief .zx-draad__punt { opacity: 1; }
.zx-draad.is-kern .zx-draad__basis { stroke-width: 2.1; }
.zx-draad.is-kern .zx-draad__flits { opacity: .85; animation-duration: 3.6s; }
.zx-veld.is-open .zx-draad { opacity: .3; }
.zx-veld.is-open .zx-draad.is-gekozen { opacity: 1; }
.zx-draad { transition: opacity .5s var(--zx-soepel); }
/* ============ 4. 3D ARTONE-LOGO ============ */
.zx-kern {
position: absolute; left: 50%; top: 50%; z-index: 2;
transform: translate(-50%, -50%);
display: grid; place-items: center;
pointer-events: none;
}
.zx-kern__halo {
position: absolute; width: 620px; height: 620px; border-radius: 50%;
background: radial-gradient(circle, rgba(190, 232, 250, .26) 0%, rgba(190, 232, 250, .07) 44%, transparent 70%);
filter: blur(6px);
animation: zx-adem 8.5s ease-in-out infinite;
}
@keyframes zx-adem {
0%, 100% { transform: scale(1); opacity: .9; }
50% { transform: scale(1.07); opacity: 1; }
}
.zx-kern__schaduw {
position: absolute; top: calc(50% + 84px);
width: 380px; height: 52px; border-radius: 50%;
background: radial-gradient(circle, rgba(4, 32, 46, .5) 0%, transparent 70%);
filter: blur(14px);
}
/* Het logo is sinds 18-08-2026 een knop: klikken haalt het verhaal
"Waarom Artone?" uit het logo omhoog (mindmap.js → openLogo). De .zx-kern
eromheen staat op pointer-events:none, dus die zet de knop zelf weer aan. */
.zx-logo3d {
position: relative;
appearance: none; -webkit-appearance: none;
border: 0; padding: 0; background: none; font: inherit; color: inherit;
cursor: pointer; pointer-events: auto;
transition: opacity .45s var(--zx-soepel), filter .4s var(--zx-soepel);
/* JS zet --zx-logo-b op de grootste maat die naast de kolommen past */
width: var(--zx-logo-b, clamp(220px, 24vw, 340px));
aspect-ratio: 346 / 137;
/* LET OP: deze waarde staat ook in mindmap.js (PERSP) — het masker over de
draadjes rekent er de projectie van het logo mee uit. Samen aanpassen. */
perspective: 900px;
perspective-origin: 50% 50%;
}
.zx-logo3d__stapel {
position: absolute; inset: 0;
transform-style: preserve-3d;
transform:
rotateX(var(--zx-lx, -6deg))
rotateY(var(--zx-ly, -15deg))
rotateZ(var(--zx-lz, 0deg));
transition: transform .9s var(--zx-soepel);
will-change: transform;
}
.zx-logo3d__stapel.is-live { transition: transform .28s ease-out; }
/* Plusje rechtsonder aan het logo — hetzelfde teken als op de kaarten, zodat
meteen duidelijk is dat hier iets achter zit. */
.zx-logo3d__meer {
position: absolute; right: -6px; bottom: -14px; z-index: 3;
display: grid; place-items: center;
width: 34px; height: 34px; border-radius: 50%;
border: 1px solid var(--zx-lijn-sterk);
background: linear-gradient(158deg, rgba(8, 62, 90, .8), rgba(5, 42, 63, .88));
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
color: var(--zx-wit);
font-family: var(--zx-font-d); font-size: 1.15rem; line-height: 1;
transition: transform .4s var(--zx-soepel), background .4s var(--zx-soepel);
}
.zx-logo3d:hover .zx-logo3d__meer,
.zx-logo3d:focus-visible .zx-logo3d__meer { transform: scale(1.12); background: var(--zx-merk); }
.zx-logo3d:hover { filter: drop-shadow(0 18px 28px rgba(3, 26, 38, .45)); }
.zx-logo3d:focus-visible { outline: 2px solid var(--zx-wit); outline-offset: 10px; border-radius: 8px; }
/* het paneel groeit uít het logo, dus het logo maakt plaats */
.zx-logo3d.is-gekozen { opacity: 0; pointer-events: none; }
/* De tekstbron achter het logo. Op desktop onzichtbaar (mindmap.js leest hem
voor het paneel); in het rustige raster hieronder wordt het een gewone
kaart onder het logo, want daar is geen paneel. */
/* .zx-kern ervoor, anders wint de .zx-knoop-regel verderop van display:none */
.zx-kern .zx-logokaart { display: none; }
.zx-vlak {
position: absolute; inset: 0; width: 100%; height: 100%;
transform: translateZ(var(--zx-z, 0px));
overflow: visible;
}
/* het schild is hol: alleen de kaderband en de letters krijgen kleur,
de binnenkant blijft open zodat je de achtergrond erdoorheen ziet */
.zx-vlak__inkt { fill: var(--zx-inkt, #0A6E9B); }
/* alleen het voorvlak krijgt verloop + glans */
.zx-vlak.is-voor .zx-vlak__inkt { fill: url(#zxInktVoor); }
.zx-kern__voet {
position: absolute; top: calc(50% + 120px);
font-family: var(--zx-font-d); font-weight: 600;
font-size: .68rem; letter-spacing: .34em; text-transform: uppercase;
color: rgba(253, 250, 244, .66); white-space: nowrap;
}
/* ============ 5. KNOPEN (de blokjes) ============ */
/* De kaartenlaag ligt over het hele veld (en dus over het logo). Sinds het
logo een knop is, mag alleen de kaart zelf klikken vangen — anders zit deze
laag als een glasplaat over het logo heen (18-08-2026). */
.zx-knopen { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.zx-knoop { pointer-events: auto; }
.zx-knoop {
position: absolute; left: 0; top: 0;
width: var(--zx-kaart-b, 236px);
display: flex; flex-direction: column; gap: 7px;
padding: 13px 16px 11px;
text-align: left;
border: 1px solid rgba(253, 250, 244, .24);
border-radius: 15px;
/* diep blauw glas: wit blijft daarop overal ruim leesbaar, ook op het
lichtste deel van de strook */
background:
linear-gradient(158deg, rgba(8, 62, 90, .68) 0%, rgba(5, 42, 63, .78) 100%);
-webkit-backdrop-filter: blur(12px) saturate(1.15);
backdrop-filter: blur(12px) saturate(1.15);
box-shadow:
0 20px 42px -24px rgba(3, 26, 38, .8),
inset 0 1px 0 rgba(253, 250, 244, .16);
color: var(--zx-wit);
font: inherit;
cursor: pointer;
transform: translate(-50%, -50%);
transition:
border-color .4s var(--zx-soepel),
box-shadow .4s var(--zx-soepel),
background .4s var(--zx-soepel),
opacity .45s var(--zx-soepel);
will-change: transform;
}
.zx-knoop::before {
content: ""; position: absolute; left: 0; top: 15px; bottom: 15px;
width: 2px; border-radius: 2px;
background: linear-gradient(180deg, var(--zx-tak-kleur, #0093C9), transparent);
opacity: .95;
}
.zx-knoop--rechts::before { left: auto; right: 0; }
.zx-knoop__naam {
font-family: var(--zx-font-d); font-weight: 700;
font-size: .98rem; letter-spacing: -.012em; line-height: 1.2;
color: var(--zx-wit);
}
/* op de kaart een teaser van 2 regels — het hele verhaal staat in het paneel */
.zx-knoop__tekst {
font-size: .79rem; line-height: 1.45; color: var(--zx-wit-zacht);
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
overflow: hidden;
}
.zx-knoop__voet {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
margin-top: 2px; padding-top: 9px;
border-top: 1px solid rgba(253, 250, 244, .18);
}
.zx-knoop__tak {
font-family: var(--zx-font-d); font-weight: 600;
font-size: .61rem; letter-spacing: .17em; text-transform: uppercase;
color: var(--zx-tak-tekst, #7FC8E6);
}
.zx-knoop__meer {
display: grid; place-items: center;
width: 20px; height: 20px; border-radius: 50%;
border: 1px solid rgba(253, 250, 244, .34);
color: var(--zx-basis); font-size: .78rem; line-height: 1;
transition: background .35s var(--zx-soepel), border-color .35s var(--zx-soepel), transform .35s var(--zx-soepel);
}
.zx-knoop:hover,
.zx-knoop:focus-visible {
border-color: rgba(253, 250, 244, .5);
background: linear-gradient(158deg, rgba(11, 78, 112, .8) 0%, rgba(6, 52, 76, .86) 100%);
box-shadow:
0 30px 56px -22px rgba(3, 26, 38, .88),
0 0 0 1px rgba(253, 250, 244, .2),
inset 0 1px 0 rgba(253, 250, 244, .24);
outline: none;
}
.zx-knoop:hover .zx-knoop__meer,
.zx-knoop:focus-visible .zx-knoop__meer {
background: var(--zx-basis); border-color: transparent; color: var(--zx-merk-diep); transform: rotate(90deg);
}
/* ---- het Bertus-blok: precies andersom, ivoor op het blauw ---- */
.zx-knoop--kern {
width: var(--zx-kaart-b-kern, 262px);
padding: 17px 19px 15px;
border-color: rgba(253, 250, 244, .9);
background: linear-gradient(158deg, #FFFFFF 0%, var(--zx-basis) 58%, #EFEAE0 100%);
-webkit-backdrop-filter: none; backdrop-filter: none;
box-shadow:
0 30px 64px -22px rgba(3, 26, 38, .62),
0 0 44px -12px rgba(253, 250, 244, .45),
inset 0 1px 0 rgba(255, 255, 255, .9);
}
.zx-knoop--kern::before { display: none; }
.zx-knoop--kern .zx-knoop__naam { font-size: 1.12rem; color: var(--zx-merk-diep); }
.zx-knoop--kern .zx-knoop__tekst { color: var(--zx-inkt-mid); font-size: .83rem; }
.zx-knoop--kern .zx-knoop__voet { border-top-color: rgba(20, 17, 14, .14); }
.zx-knoop--kern .zx-knoop__tak { color: var(--zx-merk-diep); }
.zx-knoop--kern .zx-knoop__meer { border-color: rgba(10, 94, 134, .35); color: var(--zx-merk-diep); }
.zx-knoop--kern:hover,
.zx-knoop--kern:focus-visible {
background: linear-gradient(158deg, #FFFFFF 0%, #FDFBF7 58%, #F4F0E7 100%);
border-color: #FFFFFF;
box-shadow:
0 36px 74px -22px rgba(3, 26, 38, .7),
0 0 62px -10px rgba(253, 250, 244, .6),
inset 0 1px 0 rgba(255, 255, 255, .95);
}
.zx-knoop--kern:hover .zx-knoop__meer,
.zx-knoop--kern:focus-visible .zx-knoop__meer {
background: var(--zx-merk-diep); color: #fff; border-color: transparent;
}
/* pulserende ring rond het Bertus-blok */
.zx-knoop--kern::after {
content: ""; position: absolute; inset: -1px; border-radius: inherit;
border: 1px solid rgba(253, 250, 244, .8);
animation: zx-puls 3.4s ease-out infinite; pointer-events: none;
}
@keyframes zx-puls {
0% { opacity: .8; transform: scale(1); }
70% { opacity: 0; transform: scale(1.055); }
100% { opacity: 0; transform: scale(1.055); }
}
/* velddimmen zodra er een paneel openstaat */
.zx-veld.is-open .zx-knoop { opacity: .38; pointer-events: none; }
.zx-veld.is-open .zx-knoop.is-gekozen { opacity: 0; }
/* ============ 6. UITKLAPPANEEL ============ */
.zx-doek {
position: absolute; inset: -20vh -50vw; z-index: 5;
background: radial-gradient(60% 60% at 50% 50%, rgba(4, 40, 58, .38) 0%, rgba(3, 26, 38, .66) 100%);
-webkit-backdrop-filter: blur(2.5px); backdrop-filter: blur(2.5px);
opacity: 0; transition: opacity .45s var(--zx-soepel);
cursor: pointer;
}
.zx-doek.is-zichtbaar { opacity: 1; }
.zx-paneel {
position: absolute; left: 50%; top: 50%; z-index: 6;
width: min(560px, 88%);
padding: 30px 32px 26px;
border: 1px solid rgba(253, 250, 244, .9);
border-radius: 20px;
background: linear-gradient(160deg, #FFFFFF 0%, var(--zx-basis) 62%, #EFEAE0 100%);
box-shadow:
0 54px 110px -30px rgba(3, 26, 38, .7),
0 0 70px -14px rgba(253, 250, 244, .4);
transform-origin: 50% 50%;
opacity: 0;
transform: translate(-50%, -50%) scale(.2);
transition: transform .64s var(--zx-soepel), opacity .34s ease;
will-change: transform, opacity;
}
.zx-paneel.is-open { opacity: 1; }
.zx-paneel__streep {
position: absolute; left: 32px; right: 32px; top: 0; height: 2px;
border-radius: 0 0 3px 3px;
background: linear-gradient(90deg, transparent, var(--zx-tak-kleur, #0093C9), transparent);
}
.zx-paneel__tak {
margin: 0 0 10px;
font-family: var(--zx-font-d); font-weight: 600;
font-size: .64rem; letter-spacing: .24em; text-transform: uppercase;
color: var(--zx-merk-diep);
}
.zx-paneel__titel {
margin: 0 0 14px;
font-family: var(--zx-font-d); font-weight: 700;
font-size: clamp(1.5rem, 3.2vw, 2.05rem); line-height: 1.1; letter-spacing: -.026em;
color: var(--zx-inkt-donker);
}
.zx-paneel__tekst {
margin: 0 0 20px; max-width: 46ch;
font-size: 1rem; line-height: 1.65; color: var(--zx-inkt-mid);
}
.zx-paneel__chips {
display: flex; flex-wrap: wrap; gap: 8px;
margin: 0 0 22px; padding: 0; list-style: none;
}
.zx-paneel__chips li {
padding: 5px 12px; border-radius: 999px;
border: 1px solid rgba(10, 94, 134, .2);
background: rgba(0, 147, 201, .10);
font-family: var(--zx-font-d); font-weight: 500;
font-size: .72rem; letter-spacing: .02em;
color: var(--zx-merk-diep);
}
.zx-paneel__voet {
margin: 0; padding-top: 15px;
border-top: 1px solid rgba(20, 17, 14, .12);
font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
font-family: var(--zx-font-d); font-weight: 600;
color: rgba(20, 17, 14, .5);
}
/* inhoud komt net iets later binnen dan de doos */
.zx-paneel > *:not(.zx-paneel__streep):not(.zx-sluit) {
opacity: 0; transform: translateY(9px);
transition: opacity .4s ease .16s, transform .5s var(--zx-soepel) .16s;
}
.zx-paneel.is-open > *:not(.zx-paneel__streep):not(.zx-sluit) {
opacity: 1; transform: none;
}
/* ---- rood kruisje rechtsboven ---- */
.zx-sluit {
position: absolute; top: 14px; right: 14px; z-index: 2;
width: 34px; height: 34px; padding: 0;
display: grid; place-items: center;
border: 1px solid rgba(217, 58, 63, .45);
border-radius: 50%;
background: rgba(217, 58, 63, .10);
color: var(--zx-rood);
cursor: pointer;
transition: background .3s var(--zx-soepel), transform .3s var(--zx-soepel), color .3s var(--zx-soepel), border-color .3s var(--zx-soepel);
}
.zx-sluit svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; fill: none; }
.zx-sluit:hover,
.zx-sluit:focus-visible {
background: var(--zx-rood); border-color: var(--zx-rood); color: #fff;
transform: rotate(90deg); outline: none;
}
/* ============ 7. GROEPKOPPEN (alleen in het rustige raster) ============ */
.zx-groepkop { display: none; }
/* ============ 8. RESPONSIVE ============ */
/* Onder 1200px is er geen ruimte voor tien zwevende kaarten rond het logo.
Het veld wordt dan een rustig raster: draadjes weg, logo boven, kaarten in
de normale flow met hun volledige tekst. Het script ziet aan de verborgen
draadjeslaag dat het de kaarten met rust moet laten. */
@media (max-width: 1199px) {
/* het blok wordt hier een lange kolom; met dezelfde hoek en overhang zouden
de zijkanten van de strook het beeld uit lopen en ivoren randen tonen */
.zx-netwerk { --zx-hoek: -1.6deg; --zx-uit: -50%; --zx-marge: calc(2vw + 10px); }
.zx-veld { height: auto; }
.zx-draden { display: none; }
.zx-kern { position: static; transform: none; margin: 4px auto clamp(22px, 4vw, 34px); }
/* geen paneel in dit raster: het logo is hier geen knop en het verhaal
eronder staat gewoon uitgeschreven */
.zx-logo3d { cursor: default; }
.zx-logo3d__meer { display: none; }
.zx-kern .zx-logokaart {
display: flex; position: static; transform: none;
width: 100%; max-width: 900px; margin: clamp(14px, 2.4vw, 20px) auto 0;
}
.zx-kern__halo { width: 420px; height: 420px; }
.zx-kern__schaduw { display: none; }
.zx-kern__voet { position: static; display: block; margin-top: 14px; text-align: center; }
.zx-knopen {
position: static;
display: grid; grid-template-columns: 1fr; gap: 14px;
max-width: 900px; margin: 0 auto;
}
.zx-knoop {
position: static; width: 100%;
transform: none !important;
padding: 16px 18px 14px;
cursor: default;
}
.zx-knoop--kern { width: 100%; }
/* in het raster is er ruimte voor het hele verhaal, dus geen teaser en
geen plusje dat een paneel belooft dat hier niet opengaat */
.zx-knoop__tekst { -webkit-line-clamp: none; display: block; }
.zx-knoop__meer { display: none; }
.zx-groepkop {
display: block; margin: clamp(18px, 3vw, 28px) 0 2px;
font-family: var(--zx-font-d); font-weight: 600;
font-size: .68rem; letter-spacing: .28em; text-transform: uppercase;
color: var(--zx-basis); text-align: center;
}
.zx-groepkop:first-child { margin-top: 0; }
}
@media (min-width: 620px) and (max-width: 1199px) {
.zx-knopen { grid-template-columns: 1fr 1fr; }
.zx-groepkop { grid-column: 1 / -1; }
}
/* ============ 9. RUSTIGE BEWEGING ============ */
@media (prefers-reduced-motion: reduce) {
.zx-netwerk * { animation: none !important; transition-duration: .01ms !important; }
.zx-kern__halo { animation: none; }
.zx-draad__flits { display: none; }
}