/* ==========================================================================
LAURENS WALING — v5 "Warm premium"
Canvas: warm papier. Podium: diep petrol. Accent: amber.
Fonts: Fraunces (display, zacht & stevig) + DM Sans (body)
========================================================================== */
:root {
/* Kleuren — warm-premium palet */
--paper: #FBF6EE; /* warm off-white canvas */
--paper-deep: #F4EBDD; /* warme tint voor afwisselende secties */
--ink: #21323C; /* diep warmgrijs-blauw, hoofdtekst */
--ink-soft: #4E5E66; /* secundaire tekst */
--petrol: #0F3140; /* podiumdonker (secties) */
--petrol-deep: #0A2430; /* nog donkerder, voor gradients */
--amber: #D9822B; /* warm accent — energie */
--amber-soft: #F3DFC4; /* amber tint voor chips/onderstreping */
--cream: #FFFDF8; /* kaarten op paper */
--line: rgba(33, 50, 60, 0.14);
--line-dark: rgba(255, 253, 248, 0.16);
--text-on-dark: #F6EFE3;
--text-on-dark-soft: rgba(246, 239, 227, 0.72);
--font-display: "Fraunces", Georgia, serif;
--font-body: "DM Sans", -apple-system, "Segoe UI", sans-serif;
--radius-lg: 28px;
--radius-md: 18px;
--radius-sm: 12px;
--shadow-soft: 0 24px 60px -28px rgba(33, 50, 60, 0.35);
--shadow-card: 0 10px 34px -18px rgba(33, 50, 60, 0.25);
--wrap: 1180px;
--pad: clamp(20px, 5vw, 56px);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font-body);
background: var(--paper);
color: var(--ink);
font-size: 18px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--amber-soft); color: var(--ink); }
h1, h2, h3, .display {
font-family: var(--font-display);
font-weight: 480;
line-height: 1.08;
letter-spacing: -0.015em;
font-variation-settings: "SOFT" 60, "opsz" 90;
}
h2 { font-size: clamp(32px, 4.6vw, 54px); }
h3 { font-size: clamp(21px, 2.4vw, 26px); line-height: 1.25; }
em { font-style: italic; }
.accent { color: var(--amber); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
section { padding: clamp(72px, 9vw, 130px) 0; }
.section-tight { padding: clamp(48px, 6vw, 80px) 0; }
/* Labels boven secties */
.label {
display: inline-flex; align-items: center; gap: 10px;
font-size: 13px; font-weight: 600; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--ink-soft);
margin-bottom: 22px;
}
.label::before { content: ""; width: 26px; height: 2px; background: var(--amber); border-radius: 2px; }
.on-dark .label { color: var(--text-on-dark-soft); }
.lead { font-size: clamp(19px, 2vw, 22px); color: var(--ink-soft); max-width: 640px; }
/* ==========================================================================
NAV
========================================================================== */
.nav {
position: sticky; top: 0; z-index: 100;
display: flex; align-items: center; justify-content: space-between;
gap: 28px; padding: 14px var(--pad);
background: rgba(251, 246, 238, 0.88);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--line);
}
/* Skiplink: onzichtbaar tot iemand met Tab de pagina binnenkomt */
.skip-link {
position: absolute; left: 12px; top: -60px; z-index: 2147483001;
background: var(--ink); color: var(--paper);
padding: 12px 20px; border-radius: var(--radius-sm);
font-family: var(--font-body); font-weight: 600; font-size: 15px;
transition: top .18s;
}
.skip-link:focus { top: 12px; outline: 3px solid var(--amber); outline-offset: 2px; }
.nav-logo { display: flex; align-items: center; flex: 0 0 auto; }
/* height expliciet, anders wint de globale img{height:auto} */
.nav-logo img { height: 54px !important; width: auto; }
.nav-logo .dot { color: var(--amber); }
.nav-links { display: flex; align-items: center; gap: clamp(16px, 2.1vw, 32px); font-size: 16.5px; font-weight: 500; white-space: nowrap; }
.nav-links a { color: var(--ink-soft); transition: color .2s; position: relative; padding: 4px 0; }
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.nav-links a.active::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
height: 2px; background: var(--amber); border-radius: 2px;
}
.nav-cta {
flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px;
background: var(--ink); color: var(--paper);
padding: 13px 26px; border-radius: 999px;
font-size: 15.5px; font-weight: 600; transition: background .2s, transform .2s;
}
.nav-cta:hover { background: var(--petrol); transform: translateY(-1px); }
.lang-switch {
display: inline-flex; align-items: center; gap: 2px;
border: 1.5px solid var(--line); border-radius: 999px; padding: 3px;
font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
}
.lang-switch a, .lang-switch span { padding: 4px 10px; border-radius: 999px; color: var(--ink-soft); }
.lang-switch .cur { background: var(--ink); color: var(--paper); }
.lang-switch a:hover { color: var(--ink); }
/* Dropdown "Meer" in de hoofdnavigatie */
.nav-more { position: relative; }
.nav-more-btn {
font: inherit; color: var(--ink-soft); background: none; border: 0; cursor: pointer;
padding: 4px 0; display: inline-flex; align-items: center; gap: 5px; transition: color .2s;
}
.nav-more-btn:hover, .nav-more:hover .nav-more-btn, .nav-more:focus-within .nav-more-btn, .nav-more.is-open .nav-more-btn { color: var(--ink); }
.nav-more-btn .chev {
width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
border-top: 5px solid currentColor; transition: transform .2s; margin-top: 1px;
}
.nav-more:hover .nav-more-btn .chev, .nav-more:focus-within .nav-more-btn .chev, .nav-more.is-open .nav-more-btn .chev { transform: rotate(180deg); }
.nav-more-btn.active { color: var(--ink); position: relative; }
.nav-more-btn.active::after {
content: ""; position: absolute; left: 0; right: 14px; bottom: -2px;
height: 2px; background: var(--amber); border-radius: 2px;
}
.nav-more-menu {
position: absolute; top: 100%; right: 0; margin-top: 10px; min-width: 218px;
background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-sm);
box-shadow: var(--shadow-soft); padding: 8px; display: flex; flex-direction: column;
opacity: 0; visibility: hidden; transform: translateY(-6px);
transition: opacity .18s, transform .18s, visibility .18s;
}
.nav-more:hover .nav-more-menu, .nav-more:focus-within .nav-more-menu, .nav-more.is-open .nav-more-menu {
opacity: 1; visibility: visible; transform: translateY(0);
}
/* onzichtbare brug zodat de muis het menu kan bereiken */
.nav-more::after { content: ""; position: absolute; top: 100%; right: 0; width: 218px; height: 14px; }
.nav-more-menu a {
padding: 9px 12px; border-radius: 8px; color: var(--ink-soft); font-size: 15px; transition: background .15s, color .15s;
}
.nav-more-menu a:hover { background: var(--paper-deep); color: var(--ink); }
.nav-more-menu a.active { color: var(--ink); font-weight: 600; }
.nav-burger { display: none; flex-direction: column; background: none; border: 0; cursor: pointer; padding: 6px; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
.nav-burger span { display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px 0; border-radius: 2px; transition: .25s; }
.nav-mobile {
display: none; position: fixed; inset: 65px 0 auto 0; z-index: 99;
background: var(--paper); border-bottom: 1px solid var(--line);
padding: 18px var(--pad) 28px; flex-direction: column; gap: 4px;
}
.nav-mobile.open { display: flex; }
.nav-mobile a { padding: 12px 0; font-size: 18px; font-weight: 500; border-bottom: 1px solid var(--line); }
.nav-mobile a:last-child { border: 0; }
/* ==========================================================================
BUTTONS
========================================================================== */
.btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 16px 30px; border-radius: 999px;
font-family: var(--font-body); font-size: 16.5px; font-weight: 600;
cursor: pointer; border: 0; transition: transform .2s, box-shadow .2s, background .2s;
}
.btn .arrow { transition: transform .2s; }
.btn:hover .arrow { transform: translateX(4px); }
.btn-primary { background: var(--amber); color: #fff; box-shadow: 0 14px 30px -14px rgba(217, 130, 43, 0.7); }
.btn-primary:hover { transform: translateY(-2px); background: #C9721D; }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { transform: translateY(-2px); background: var(--petrol); }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn-ghost:hover { border-color: var(--ink); transform: translateY(-2px); }
.btn-on-dark { background: var(--paper); color: var(--ink); }
.btn-on-dark:hover { transform: translateY(-2px); }
.btn-ghost-dark { background: transparent; color: var(--text-on-dark); border: 1.5px solid var(--line-dark); }
.btn-ghost-dark:hover { border-color: var(--text-on-dark); transform: translateY(-2px); }
/* ==========================================================================
HERO — warm, licht, uitnodigend
========================================================================== */
.hero {
position: relative; overflow: hidden;
padding: clamp(48px, 7vw, 96px) 0 clamp(56px, 7vw, 100px);
background:
radial-gradient(900px 520px at 85% 8%, rgba(217, 130, 43, 0.13), transparent 65%),
radial-gradient(700px 500px at 8% 90%, rgba(15, 49, 64, 0.07), transparent 60%),
var(--paper);
}
.hero-grid {
display: grid; grid-template-columns: 1.1fr 0.9fr;
gap: clamp(36px, 6vw, 80px); align-items: center;
}
.hero-eyebrow {
display: inline-flex; align-items: center; gap: 10px;
background: var(--cream); border: 1px solid var(--line);
padding: 9px 18px; border-radius: 999px;
font-size: 14px; font-weight: 600; letter-spacing: 0.05em;
color: var(--ink-soft); margin-bottom: 28px;
}
.hero-eyebrow .pulse {
width: 8px; height: 8px; border-radius: 50%; background: var(--amber);
box-shadow: 0 0 0 0 rgba(217, 130, 43, 0.5); animation: pulse 2.4s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(217, 130, 43, 0.45); }
70% { box-shadow: 0 0 0 10px rgba(217, 130, 43, 0); }
100% { box-shadow: 0 0 0 0 rgba(217, 130, 43, 0); }
}
.hero h1 {
font-size: clamp(40px, 5.6vw, 72px);
margin-bottom: 26px;
}
.hero h1 .u {
background-image: linear-gradient(to top, var(--amber-soft) 38%, transparent 38%);
border-radius: 3px; padding: 0 2px;
}
.hero-sub { font-size: clamp(19px, 2vw, 22px); color: var(--ink-soft); max-width: 560px; margin-bottom: 36px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-bottom: 30px; }
.hero-note { font-size: 15px; color: var(--ink-soft); }
.hero-note a { font-weight: 600; color: var(--ink); border-bottom: 2px solid var(--amber-soft); }
.hero-note a:hover { border-color: var(--amber); }
.hero-visual { position: relative; }
.hero-photo {
position: relative; border-radius: 200px 200px var(--radius-lg) var(--radius-lg);
overflow: hidden; box-shadow: var(--shadow-soft);
aspect-ratio: 4 / 5;
}
.hero-photo picture { display: block; width: 100%; height: 100%; }
.hero-photo img { width: 100%; height: 100% !important; object-fit: cover; object-position: 50% 22%; }
.hero-card {
position: absolute; background: var(--cream);
border: 1px solid var(--line); border-radius: var(--radius-md);
box-shadow: var(--shadow-card); padding: 14px 18px;
font-size: 14.5px; line-height: 1.45; max-width: 250px;
}
.hero-card strong { display: block; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--amber); margin-bottom: 3px; }
/* Kaartjes altijd onderin, nooit over het gezicht */
.hero-card-1 { left: -34px; bottom: 60px; }
.hero-card-2 { right: -20px; bottom: -26px; }
/* ==========================================================================
HERO CAROUSEL — spreker in actie, full-bleed
========================================================================== */
/* Statische hero: één foto, geen beweging. .hero-carousel blijft als selector
bestaan zodat de bestaande opmaak (overlay, tekstpositie) ongewijzigd werkt. */
.hero-still picture { position: absolute; inset: 0; z-index: 0; }
.hero-still picture img { width: 100%; height: 100% !important; object-fit: cover; }
.hero-still .carousel-overlay { z-index: 2; }
.hero-still .wrap.hero-content { position: relative; z-index: 3; width: 100%; }
.hero-still,
.hero-carousel {
position: relative; overflow: hidden; isolation: isolate;
min-height: clamp(560px, 88vh, 860px);
display: flex; align-items: flex-end; padding: 0;
background: var(--petrol-deep);
}
.carousel-slides { position: absolute; inset: 0; z-index: 0; }
.carousel-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.15s ease; }
.carousel-slide.active { opacity: 1; z-index: 1; }
.carousel-slide img { width: 100%; height: 100%; object-fit: cover; }
.carousel-overlay {
position: absolute; inset: 0; z-index: 2; pointer-events: none;
background:
linear-gradient(180deg, rgba(10,36,48,.62) 0%, rgba(10,36,48,.22) 34%, rgba(10,36,48,.35) 60%, rgba(8,26,34,.86) 100%);
}
.hero-carousel .wrap.hero-content {
position: relative; z-index: 3; width: 100%;
padding-top: clamp(120px, 15vw, 210px);
padding-bottom: clamp(52px, 6vw, 84px);
}
.hero-carousel .hero-eyebrow {
background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28);
color: var(--text-on-dark); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.hero-carousel h1 { color: #fff; text-shadow: 0 2px 22px rgba(0,0,0,.25); }
.hero-carousel h1 .u { background-image: linear-gradient(to top, rgba(217,130,43,.6) 38%, transparent 38%); }
.hero-carousel .hero-sub { color: rgba(255,255,255,.88); }
.hero-carousel .hero-note { color: rgba(255,255,255,.78); }
.hero-carousel .hero-note a { color: #fff; border-bottom-color: rgba(217,130,43,.7); }
.carousel-arrow {
position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.32);
background: rgba(10,36,48,.32); color: #fff; font-size: 20px; font-weight: 700;
display: flex; align-items: center; justify-content: center; cursor: pointer;
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
transition: background .2s, transform .2s, border-color .2s;
}
.carousel-arrow:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.55); }
.carousel-arrow.prev { left: 16px; }
.carousel-arrow.next { right: 16px; }
.carousel-dots {
position: absolute; z-index: 4; bottom: 20px; left: 50%; transform: translateX(-50%);
display: flex; gap: 8px;
}
.carousel-dots button {
width: 8px; height: 8px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); padding: 0;
background: rgba(255,255,255,.25); cursor: pointer; transition: background .2s, width .2s;
}
.carousel-dots button.active { background: #fff; width: 24px; border-radius: 5px; }
@media (max-width: 860px) {
.hero-carousel { min-height: clamp(560px, 94vh, 760px); }
.carousel-arrow { width: 40px; height: 40px; font-size: 17px; }
.carousel-arrow.prev { left: 8px; } .carousel-arrow.next { right: 8px; }
.carousel-dots { bottom: 14px; }
}
/* Ken Burns: zachte zoom op de actieve slide */
@keyframes kbZoom { from { transform: scale(1); } to { transform: scale(1.09); } }
body.js .carousel-slide img { transform: scale(1); }
body.js .carousel-slide.active img { animation: kbZoom 7s cubic-bezier(.2,.6,.35,1) forwards; }
@media (prefers-reduced-motion: reduce) {
body.js .carousel-slide.active img { animation: none; }
}
/* Social-proof strip onder hero-CTA's */
.proof-strip { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 22px; }
.proof-strip .item { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; color: rgba(255,255,255,.92); }
.proof-strip .item .ck { display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px; border-radius: 50%; background: rgba(217,130,43,.9); color: #fff; font-size: 12px; flex-shrink: 0; }
/* Trust-marquee */
.marquee-band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--cream); padding: 20px 0; overflow: hidden; }
.marquee-label { text-align: center; font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 12px; }
.marquee { display: flex; overflow: hidden; user-select: none; gap: 0; }
.marquee-track { display: flex; flex-shrink: 0; align-items: center; gap: 48px; padding-right: 48px; animation: marquee 38s linear infinite; white-space: nowrap; }
.marquee-track span { font-family: var(--font-display); font-size: 19px; color: var(--ink-soft); }
.marquee-track i { color: var(--amber); font-style: normal; }
.marquee-track .marquee-link { font-family: var(--font-display); font-size: 19px; color: inherit; text-decoration: none; }
.marquee-track .marquee-link:hover { text-decoration: underline; }
@keyframes marquee { to { transform: translateX(-100%); } }
/* ==========================================================================
SECTIES
========================================================================== */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 90px); align-items: center; }
.split .photo { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft); }
.split .photo picture { display: block; width: 100%; height: 100%; }
.split .photo img { width: 100%; height: 100% !important; object-fit: cover; }
/* Staccato-statement (Laurens' retorisch ritme) */
.staccato { font-family: var(--font-display); font-size: clamp(24px, 3vw, 34px); line-height: 1.35; }
.staccato .nee { color: var(--ink-soft); display: block; }
.staccato .ja { color: var(--ink); display: block; }
.staccato .ja i { font-style: normal; border-bottom: 3px solid var(--amber); }
/* Observaties / kaarten-grid */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cards-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.card {
background: var(--cream); border: 1px solid var(--line);
border-radius: var(--radius-md); padding: 30px 28px;
transition: transform .25s, box-shadow .25s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.card .num {
display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 0.1em;
color: var(--amber); margin-bottom: 14px;
}
.card h3 { margin-bottom: 10px; }
.card p { color: var(--ink-soft); font-size: 16.5px; }
/* Onderwerp-kaarten (linken door) */
a.card { display: block; }
a.card .doorlink { display: inline-flex; gap: 8px; align-items: center; margin-top: 16px; font-weight: 600; font-size: 15px; color: var(--ink); }
a.card:hover .doorlink { color: var(--amber); }
/* Voorbeeld-verhaal kaart (bakker) */
.story-card {
background: linear-gradient(120deg, var(--paper-deep), var(--cream));
border: 1px solid var(--line); border-radius: var(--radius-lg);
padding: clamp(30px, 4vw, 54px);
display: grid; grid-template-columns: auto 1fr; gap: clamp(22px, 3vw, 44px); align-items: center;
}
.story-emoji {
width: 92px; height: 92px; border-radius: 50%;
background: var(--cream); border: 1px solid var(--line);
display: flex; align-items: center; justify-content: center; font-size: 40px;
box-shadow: var(--shadow-card);
}
.story-card h3 { font-size: clamp(22px, 2.6vw, 30px); margin-bottom: 10px; }
.story-card p { color: var(--ink-soft); max-width: 640px; }
/* ==========================================================================
PODIUM — donkere secties (het bewijs)
========================================================================== */
.podium {
background:
radial-gradient(1000px 500px at 80% 0%, rgba(217, 130, 43, 0.12), transparent 60%),
linear-gradient(180deg, var(--petrol) 0%, var(--petrol-deep) 100%);
color: var(--text-on-dark);
}
.podium h2, .podium h3 { color: var(--text-on-dark); }
.podium p { color: var(--text-on-dark-soft); }
.podium-photo {
border-radius: var(--radius-lg); overflow: hidden;
aspect-ratio: 4/3;
box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.65);
}
/* height moet expliciet, anders wint de globale img{height:auto} en vervalt de uitsnede */
.podium-photo img { width: 100%; height: 100% !important; object-fit: cover; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 48px; }
.stat { border-top: 2px solid var(--amber); padding-top: 18px; }
.stat .n { font-family: var(--font-display); font-size: clamp(36px, 4vw, 52px); color: var(--text-on-dark); display: block; line-height: 1; margin-bottom: 8px; }
.stat p { font-size: 15.5px; }
/* Manifest */
.manifest-list { display: grid; gap: 0; }
.manifest-item {
display: grid; grid-template-columns: 64px 1fr; gap: 18px; align-items: baseline;
padding: 22px 0; border-bottom: 1px solid var(--line);
font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 28px); line-height: 1.3;
}
.manifest-item p { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; }
.manifest-item:last-child { border-bottom: 0; }
.manifest-item .idx { font-size: 15px; font-family: var(--font-body); font-weight: 700; color: var(--amber); letter-spacing: 0.08em; }
.on-dark .manifest-item { border-color: var(--line-dark); }
/* Losse, tussengevoegde testimonial (na video/sectie) */
.testimonial-single {
display: flex; align-items: center; gap: 22px; max-width: 780px;
background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-md);
padding: 26px 30px; margin-top: 30px;
}
.testimonial-single .avatar {
flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%;
background: var(--petrol); color: var(--text-on-dark); font-family: var(--font-display);
font-size: 18px; display: flex; align-items: center; justify-content: center;
}
.testimonial-single p.q { font-size: 17px; line-height: 1.55; margin-bottom: 8px; }
.testimonial-single .quote-meta { font-size: 14.5px; color: var(--ink-soft); }
.testimonial-single .quote-meta strong { color: var(--ink); }
.on-dark .testimonial-single { background: rgba(255,253,248,.07); border-color: var(--line-dark); }
.on-dark .testimonial-single .quote-meta { color: var(--text-on-dark-soft); }
@media (max-width: 620px) { .testimonial-single { flex-direction: column; align-items: flex-start; } }
/* Interactieve 'welke uitdaging herken jij' */
.quiz-box { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 46px); }
.quiz-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 26px 0 8px; }
.quiz-option {
background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
padding: 18px 16px; font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer;
text-align: left; transition: border-color .2s, transform .2s, background .2s;
}
.quiz-option:hover { border-color: var(--amber); transform: translateY(-2px); }
.quiz-option.picked { background: var(--amber); border-color: var(--amber); color: #fff; }
.quiz-result { display: none; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); }
.quiz-result.show { display: block; }
.quiz-result p { color: var(--ink-soft); margin-bottom: 16px; }
@media (max-width: 720px) { .quiz-options { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .quiz-options { grid-template-columns: 1fr; } }
/* In de media */
.press-logos { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.press-logos .press-item {
font-family: var(--font-display); font-size: 19px; font-weight: 500; letter-spacing: 0.01em;
color: var(--ink-soft); background: var(--cream); border: 1px solid var(--line);
border-radius: 999px; padding: 12px 24px; opacity: 0.85; transition: opacity .2s, color .2s;
}
.press-logos .press-item:hover { opacity: 1; color: var(--ink); }
/* ==========================================================================
TESTIMONIALS
========================================================================== */
.quote-card {
background: var(--cream); border: 1px solid var(--line);
border-radius: var(--radius-md); padding: 32px 30px;
display: flex; flex-direction: column; justify-content: space-between; gap: 22px;
}
.quote-mark { font-family: var(--font-display); font-size: 52px; line-height: 0.6; color: var(--amber); }
.quote-card p.q { font-size: 17px; line-height: 1.6; }
.quote-meta { font-size: 15px; color: var(--ink-soft); }
.quote-meta strong { display: block; color: var(--ink); font-size: 16px; }
.quote-card .quote-meta span { display: block; }
.quote-card .quote-meta .quote-note { margin-top: 4px; font-size: 13px; opacity: .7; }
/* Fotogrid */
.fotogrid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 14px; }
.fotogrid .cell { border-radius: var(--radius-sm); overflow: hidden; }
.fotogrid .cell img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.fotogrid .cell:hover img { transform: scale(1.04); }
.fotogrid .w2 { grid-column: span 2; }
.fotogrid .h2 { grid-row: span 2; }
/* ==========================================================================
PROCES / STAPPEN
========================================================================== */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; }
.step { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 26px 24px; position: relative; }
.step::before {
counter-increment: step; content: "0" counter(step);
font-family: var(--font-display); font-size: 40px; color: var(--amber-soft);
-webkit-text-stroke: 1px var(--amber); display: block; margin-bottom: 12px;
}
.step h3 { font-size: 19px; margin-bottom: 8px; }
.step p { font-size: 15.5px; color: var(--ink-soft); }
/* Amber markering (generiek) */
.mark { background-image: linear-gradient(to top, var(--amber-soft) 38%, transparent 38%); border-radius: 3px; padding: 0 2px; }
/* Vragenlijst */
.vragenlijst { list-style: none; columns: 2; column-gap: 56px; max-width: 1000px; }
.vragenlijst li { break-inside: avoid; padding: 14px 0; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-size: clamp(17px, 1.9vw, 21px); line-height: 1.4; }
.vragenlijst li::before { content: "\2192"; color: var(--amber); margin-right: 12px; }
@media (max-width: 720px) { .vragenlijst { columns: 1; } }
/* Taglijsten (podia & opdrachtgevers) */
.taggroup { margin-bottom: 34px; }
.taggroup h3 { font-size: 15px; font-family: var(--font-body); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber); margin-bottom: 14px; }
.taglist { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
display: inline-block; background: var(--cream); border: 1px solid var(--line);
border-radius: 999px; padding: 7px 15px; font-size: 14.5px; color: var(--ink-soft);
}
.tag.soon { border-style: dashed; border-color: var(--amber); color: var(--ink); }
/* Video-embed */
.video-embed { position: relative; aspect-ratio: 16/9; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft); }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* ==========================================================================
BEKIJK LAURENS IN ACTIE — video-sectie
========================================================================== */
.actie-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: stretch; }
.video-card {
position: relative; border-radius: var(--radius-lg); overflow: hidden;
background: var(--petrol-deep); box-shadow: var(--shadow-soft); aspect-ratio: 16/9;
}
.video-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-card iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.play-btn {
position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; cursor: pointer;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(180deg, rgba(10,36,48,.12) 0%, rgba(10,36,48,.5) 100%);
transition: background .2s;
}
.play-btn:hover { background: linear-gradient(180deg, rgba(10,36,48,.22) 0%, rgba(10,36,48,.58) 100%); }
.play-btn .circle {
width: 76px; height: 76px; border-radius: 50%;
background: rgba(255,255,255,.16); border: 1.5px solid rgba(255,255,255,.55);
display: flex; align-items: center; justify-content: center;
backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
transition: transform .2s, background .2s;
}
.play-btn:hover .circle { transform: scale(1.08); background: rgba(255,255,255,.3); }
.play-btn svg { width: 26px; height: 26px; fill: #fff; margin-left: 3px; }
.play-btn .label {
position: absolute; left: 20px; bottom: 18px; right: 20px;
color: #fff; font-size: 15px; font-weight: 600; text-align: left;
text-shadow: 0 2px 10px rgba(0,0,0,.4);
}
.video-teaser {
background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-lg);
overflow: hidden; display: flex; flex-direction: column;
}
.video-teaser .thumb { display: block; position: relative; aspect-ratio: 16/9; background: var(--petrol-deep); overflow: hidden; }
.video-teaser .thumb img { width: 100%; height: 100% !important; object-fit: cover; object-position: 50% 30%; }
.video-teaser .thumb .play-btn .circle { width: 58px; height: 58px; }
.video-teaser .thumb .play-btn svg { width: 20px; height: 20px; }
.video-teaser .t-body { padding: 22px 24px 26px; flex: 1; display: flex; flex-direction: column; }
.video-teaser .t-body h3 { font-size: 19px; margin-bottom: 8px; }
.video-teaser .t-body p { color: var(--ink-soft); font-size: 15px; margin-bottom: 16px; flex: 1; }
.actie-copy { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 14px 30px; align-items: flex-start; justify-content: space-between; }
.actie-copy p { color: var(--ink-soft); max-width: 620px; }
.actie-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 860px) {
.actie-grid { grid-template-columns: 1fr; }
}
/* ==========================================================================
KLANTENBAND — statisch, grijs, geen beweging. Bewijs zonder afleiding.
========================================================================== */
.klanten-band { padding: clamp(34px, 4vw, 52px) 0; border-bottom: 1px solid var(--line); background: var(--paper); }
.klanten-label {
font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
color: rgba(78, 94, 102, .7); margin-bottom: 18px;
}
.klanten { display: flex; flex-wrap: wrap; gap: 10px 30px; align-items: center; }
.klanten .klant {
font-family: var(--font-display); font-size: clamp(16px, 1.6vw, 19px);
font-variation-settings: "SOFT" 60, "opsz" 90;
color: rgba(78, 94, 102, .82); white-space: nowrap;
}
@media (max-width: 620px) { .klanten { gap: 8px 20px; } .klanten .klant { font-size: 15px; } }
/* ==========================================================================
FOTOSTRIP — drie actiefoto's, geen beweging, geen portretten.
Herbruikbaar blok: overal waar de site een adempauze in beeld nodig heeft.
========================================================================== */
.foto3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.foto3-item { margin: 0; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 3/2; box-shadow: var(--shadow-card); }
.foto3-item img { width: 100%; height: 100% !important; object-fit: cover; transition: transform .6s; }
.foto3-item:hover img { transform: scale(1.04); }
@media (max-width: 860px) { .foto3 { grid-template-columns: 1fr; gap: 14px; } }
/* ==========================================================================
SHOWREEL — staande clip naast de tekst. Video krijgt ruimte, tekst blijft
leesbaar. Geen autoplay: het beeld laadt pas bij een klik.
========================================================================== */
.showreel { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: clamp(30px, 5vw, 64px); align-items: center; }
.showreel-video {
position: relative; aspect-ratio: 9/16; border-radius: var(--radius-lg);
overflow: hidden; background: var(--petrol-deep); box-shadow: var(--shadow-soft);
}
.showreel-video > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.showreel-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.showreel-video .play-btn .circle { width: 64px; height: 64px; }
.showreel-video .play-btn svg { width: 22px; height: 22px; }
.showreel-tekst .lead { max-width: 560px; }
.showreel-tekst .hero-actions { margin: 26px 0 0; }
.showreel-note { margin-top: 14px; font-size: 14.5px; color: var(--ink-soft); }
/* Brede variant: een liggende clip in plaats van een staande short. */
.showreel--breed { grid-template-columns: minmax(320px, 1.15fr) 1fr; }
.showreel--breed .showreel-video { aspect-ratio: 16/9; }
@media (max-width: 860px) {
.showreel { grid-template-columns: 1fr; }
.showreel-video { max-width: 300px; margin: 0 auto; }
.showreel--breed .showreel-video { max-width: 100%; }
}
/* ==========================================================================
AGENDA — komende optredens. Compacte lijst, datum links.
========================================================================== */
.agenda { list-style: none; margin: 0; padding: 0; max-width: 900px; }
.agenda li {
display: grid; grid-template-columns: 132px 1fr; gap: 8px 26px;
padding: 18px 0; border-bottom: 1px solid var(--line); align-items: baseline;
}
.agenda li:last-child { border-bottom: 0; }
.agenda .wanneer {
font-family: var(--font-display); font-size: 17px; color: var(--amber);
font-variation-settings: "SOFT" 60, "opsz" 90; line-height: 1.25;
}
.agenda .wat strong { display: block; font-size: 17.5px; font-weight: 600; margin-bottom: 3px; }
.agenda .wat span { display: block; font-size: 15.5px; color: var(--ink-soft); line-height: 1.55; }
.agenda .plaats { font-size: 13.5px; color: var(--ink-soft); }
@media (max-width: 620px) { .agenda li { grid-template-columns: 1fr; gap: 4px; padding: 15px 0; } }
/* ==========================================================================
CASES — vraagstuk, bijdrage, effect. Bewust sober: geen beeld, geen icoon,
de opbouw doet het werk.
========================================================================== */
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.case {
background: var(--cream); border: 1px solid var(--line);
border-radius: var(--radius-md); padding: 30px 28px 32px;
display: flex; flex-direction: column;
}
.case .org {
font-family: var(--font-display); font-size: 22px; line-height: 1.2;
font-variation-settings: "SOFT" 60, "opsz" 90; margin-bottom: 4px;
}
.case .sector { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--amber); font-weight: 700; margin-bottom: 20px; }
.case dl { margin: 0; display: grid; gap: 16px; }
.case dt {
font-size: 12.5px; font-weight: 700; letter-spacing: .1em;
text-transform: uppercase; color: var(--ink-soft); margin-bottom: 3px;
}
.case dd { margin: 0; font-size: 16px; color: var(--ink-soft); line-height: 1.6; }
.case dd strong { color: var(--ink); font-weight: 600; }
.case .case-quote {
margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line);
font-size: 15.5px; color: var(--ink); font-style: normal;
}
.case .case-quote cite { display: block; margin-top: 8px; font-style: normal; font-size: 13.5px; color: var(--ink-soft); }
@media (max-width: 1020px) { .cases { grid-template-columns: 1fr; max-width: 640px; } }
/* ==========================================================================
DOCUMENTAIRE — bewust rustiger dan de rest: veel wit, smalle tekstkolom,
geen animatie, video krijgt de volle breedte van de kolom
========================================================================== */
.doc-section { padding: clamp(88px, 11vw, 150px) 0; }
.doc-wrap { max-width: 860px; margin: 0 auto; }
.doc-wrap .lead-in { color: var(--ink-soft); font-size: clamp(17px, 1.7vw, 19px); }
.doc-wrap .lead-in p + p { margin-top: 16px; }
.doc-section .video-card { margin: clamp(34px, 4vw, 52px) 0 0; }
.doc-quote {
margin: clamp(30px, 3.5vw, 44px) 0 0;
padding-left: clamp(18px, 2.2vw, 28px);
border-left: 3px solid var(--amber);
}
.doc-quote p {
font-family: var(--font-display); font-weight: 480;
font-size: clamp(24px, 3.1vw, 36px); line-height: 1.18;
letter-spacing: -0.015em; font-variation-settings: "SOFT" 60, "opsz" 90;
color: var(--ink);
}
.doc-quote cite {
display: block; margin-top: 12px; font-style: normal;
font-size: 14px; color: var(--ink-soft);
}
.doc-bridge { margin-top: clamp(34px, 4vw, 52px); padding-top: clamp(28px, 3vw, 38px); border-top: 1px solid var(--line); }
.doc-bridge p { color: var(--ink-soft); }
.doc-bridge .hero-actions { margin: 24px 0 0; }
@media (max-width: 620px) {
.doc-section { padding: 64px 0; }
.doc-quote { padding-left: 16px; }
}
/* ==========================================================================
THE ART OF MATCHING — boeksectie
========================================================================== */
.book-grid {
display: grid; grid-template-columns: minmax(180px, 260px) 1fr;
gap: clamp(30px, 5vw, 64px); align-items: center;
}
.book-cover-frame {
position: relative; aspect-ratio: 3/4; border-radius: var(--radius-md); overflow: hidden;
background:
radial-gradient(500px 300px at 15% 0%, rgba(217,130,43,.28), transparent 60%),
linear-gradient(155deg, var(--petrol) 0%, var(--petrol-deep) 100%);
box-shadow: var(--shadow-soft);
display: flex; flex-direction: column; justify-content: space-between;
padding: clamp(22px, 3vw, 32px); color: var(--text-on-dark);
}
.book-cover-frame .imprint { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-on-dark-soft); }
.book-cover-frame .title {
font-family: var(--font-display); font-size: clamp(26px, 3vw, 34px); line-height: 1.14;
font-variation-settings: "SOFT" 60, "opsz" 90;
}
.book-cover-frame .title em { display: block; color: var(--amber-soft); font-style: normal; }
.book-cover-frame .byline { font-size: 13.5px; color: var(--text-on-dark-soft); }
.book-badge {
position: absolute; top: -14px; left: -14px; z-index: 2; max-width: calc(100% - 8px);
background: var(--amber); color: #fff; font-size: 12px; font-weight: 700;
letter-spacing: .07em; text-transform: uppercase; padding: 8px 14px;
border-radius: 999px; box-shadow: var(--shadow-card); transform: rotate(-4deg);
}
.book-signup {
margin-top: 26px; background: var(--cream); border: 1px solid var(--line);
border-radius: var(--radius-md); padding: 22px 24px;
}
.book-signup .row { display: flex; flex-wrap: wrap; gap: 12px; }
.book-signup input[type="email"] {
flex: 1 1 220px; font-family: var(--font-body); font-size: 16px; color: var(--ink);
background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
padding: 14px 16px;
}
.book-signup input[type="email"]:focus { outline: none; border-color: var(--amber); }
.book-signup .privacy { font-size: 13px; color: var(--ink-soft); margin-top: 12px; }
.book-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Boekteaser op de homepage: eigen blok met echte marges en witruimte,
zodat de sectie dezelfde ademruimte krijgt als de rest van de site. */
.book-teaser { padding: clamp(72px, 9vw, 130px) 0; }
.book-teaser .book-inner {
background: var(--cream); border: 1px solid var(--line);
border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 56px);
}
@media (max-width: 860px) {
.book-grid { grid-template-columns: 1fr !important; }
/* Boekcover op mobiel: klein houden en centreren, niet het hele scherm vullen.
Op de boekpagina zelf mag hij iets groter, daar is de cover het hoofdbeeld. */
.book-grid > div:first-child {
max-width: 220px !important; margin-left: auto; margin-right: auto; padding-top: 8px;
}
.book-teaser .book-grid > div:first-child { max-width: 168px !important; }
.book-badge { top: 0; left: 0; transform: rotate(-3deg); font-size: 11.5px; padding: 7px 12px; }
.book-cover-frame { max-width: 280px; margin: 0 auto; }
.book-teaser .book-inner { padding: 30px 22px; }
.book-teaser .book-grid { gap: 26px; }
}
@media (max-width: 620px) {
.book-grid > div:first-child { max-width: 190px !important; }
.book-teaser .book-grid > div:first-child { max-width: 148px !important; }
}
/* FAQ */
.faq { max-width: 780px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center;
gap: 20px; padding: 22px 0; font-family: var(--font-display); font-size: clamp(18px, 2vw, 22px);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 26px; color: var(--amber); transition: transform .25s; flex-shrink: 0; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 22px; color: var(--ink-soft); max-width: 660px; }
/* ==========================================================================
CTA-SLOT & CONTACT
========================================================================== */
.cta-final {
background:
radial-gradient(800px 400px at 20% 0%, rgba(217, 130, 43, 0.16), transparent 60%),
linear-gradient(180deg, var(--petrol) 0%, var(--petrol-deep) 100%);
color: var(--text-on-dark); border-radius: var(--radius-lg);
padding: clamp(44px, 6vw, 84px);
display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(30px, 5vw, 70px); align-items: center;
}
.cta-final h2 { color: var(--text-on-dark); margin-bottom: 18px; }
.cta-final p { color: var(--text-on-dark-soft); margin-bottom: 30px; }
.cta-routes { display: grid; gap: 12px; }
.cta-route {
display: flex; align-items: center; gap: 14px;
background: rgba(255, 253, 248, 0.07); border: 1px solid var(--line-dark);
border-radius: var(--radius-sm); padding: 15px 18px;
font-size: 15.5px; transition: background .2s, transform .2s;
}
.cta-route:hover { background: rgba(255, 253, 248, 0.14); transform: translateX(4px); }
.cta-route .ico { font-size: 20px; }
.cta-route strong { display: block; font-size: 15.5px; }
.cta-route span.s { color: var(--text-on-dark-soft); font-size: 13.5px; }
/* Formulier */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 14px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-soft); }
.field input, .field textarea, .field select {
font-family: var(--font-body); font-size: 16.5px; color: var(--ink);
background: var(--cream); border: 1.5px solid var(--line);
border-radius: var(--radius-sm); padding: 15px 17px; transition: border-color .2s;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--amber); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #c94b4b; }
.form-status {
display: none; margin-top: 18px; padding: 15px 18px;
border-radius: var(--radius-sm); font-size: 15px; line-height: 1.5;
}
.form-status.show { display: block; }
.form-status.success { background: #eaf6ee; color: #1f7a3f; border: 1px solid #b8e2c4; }
.form-status.error { background: #fbeaea; color: #a33; border: 1px solid #f0bcbc; }
.form-grid.is-sending .btn-primary { opacity: 0.65; pointer-events: none; }
.form-grid.is-hidden { display: none; }
/* Nieuwsbrief-band */
.news-band {
border: 1px solid var(--line); background: var(--cream); border-radius: var(--radius-lg);
padding: clamp(30px, 4vw, 50px); display: flex; flex-wrap: wrap; gap: 26px;
align-items: center; justify-content: space-between;
}
.news-band h3 { font-size: clamp(22px, 2.6vw, 30px); margin-bottom: 6px; }
.news-band p { color: var(--ink-soft); max-width: 480px; }
/* ==========================================================================
FOOTER
========================================================================== */
.footer { background: var(--petrol-deep); color: var(--text-on-dark-soft); padding: 64px 0 32px; margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid var(--line-dark); }
.footer h2 { font-family: var(--font-display); font-weight: 700; line-height: 1.65; letter-spacing: normal; font-variation-settings: normal; color: var(--text-on-dark); font-size: 22px; margin-bottom: 12px; }
/* Logo in de footer: lichte variant, height expliciet tegen de globale img{height:auto} */
.footer-logo { margin-bottom: 18px !important; line-height: 0 !important; }
.footer-logo img { height: auto !important; width: 100%; max-width: 260px; }
/* Kolomtitels: de rustiger serif-weergave uit de eerdere versie, geen uppercase kapitaaltjes */
.footer h3 { font-family: var(--font-display); font-weight: 480; line-height: 1.3; letter-spacing: -0.015em; font-variation-settings: "SOFT" 60, "opsz" 90; color: var(--text-on-dark); font-size: 19px; text-transform: none; margin-bottom: 16px; }
.footer ul { list-style: none; display: grid; gap: 10px; font-size: 15.5px; }
.footer a:hover { color: var(--text-on-dark); }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; padding-top: 26px; font-size: 13.5px; }
/* ==========================================================================
PAGE HERO (subpagina's)
========================================================================== */
.page-hero { padding: clamp(56px, 7vw, 100px) 0 clamp(40px, 5vw, 70px); }
.page-hero h1 { font-size: clamp(36px, 5vw, 62px); max-width: 820px; margin-bottom: 22px; }
.page-hero .lead { font-size: clamp(19px, 2vw, 22px); }
/* Langzaam 'opbouwende' grote quote-blokken: komt scherp in beeld op reveal */
.quote-slowbuild { filter: blur(5px); transition: filter 1.05s cubic-bezier(.2,.6,.35,1) .12s; }
body.js [data-reveal].in .quote-slowbuild { filter: blur(0); }
@media (prefers-reduced-motion: reduce) {
.quote-slowbuild { filter: none; transition: none; }
}
/* Reveal animaties — alleen actief als JS draait (body.js), anders is alles gewoon zichtbaar */
body.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
body.js [data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
body.js [data-reveal] { opacity: 1; transform: none; transition: none; }
.marquee-track { animation: none; }
}
/* ==========================================================================
RESPONSIVE
========================================================================== */
/* Tussenmaten: navigatie compact houden, nooit over twee regels */
@media (max-width: 1180px) {
.nav { gap: 14px; }
.nav-links { font-size: 14.5px; }
.nav-logo img { height: 38px !important; }
.nav-cta { padding: 9px 16px; font-size: 14px; }
}
@media (max-width: 1000px) {
.nav-logo img { height: 34px !important; }
.nav-cta span { display: none; }
.lang-switch { font-size: 13px; }
.lang-switch a, .lang-switch span { padding: 3px 8px; }
}
@media (max-width: 1020px) {
.cards-3 { grid-template-columns: repeat(2, 1fr); }
.steps { grid-template-columns: repeat(2, 1fr); }
.footer-grid { grid-template-columns: 1fr 1fr; }
.fotogrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
.nav-links { display: none; }
.nav-burger { display: flex; }
.hero-grid, .split, .cta-final { grid-template-columns: 1fr; }
.hero-visual { max-width: 440px; }
.hero-card-1 { left: 10px; bottom: 20px; }
.hero-card-2 { right: 10px; bottom: -18px; }
.story-card { grid-template-columns: 1fr; }
.stats { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 620px) {
.nav-logo img { height: 30px !important; }
.cards-3, .cards-2, .steps, .form-grid { grid-template-columns: 1fr; }
.fotogrid { grid-auto-rows: 160px; }
.nav-cta { display: none; }
.lang-switch { display: none; }
/* Archief-/interviewlijsten (publicaties.html, interviews.html): titel + datum
staan inline als flex-rij met een niet-wrappende datum. Op smalle schermen
zou de tekstkolom anders tot ~150px dichtslibben; hieronder stapelen we
de datum onder de titel. */
li[style*="justify-content: space-between; align-items: baseline"],
a[style*="justify-content: space-between; align-items: baseline"] {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
li[style*="justify-content: space-between; align-items: baseline"] span[style*="white-space: nowrap"],
a[style*="justify-content: space-between; align-items: baseline"] span[style*="white-space: nowrap"] {
white-space: normal;
}
}
/* Cookiebanner */
.cookie-banner {
position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%) translateY(140%);
z-index: 2000; width: min(680px, calc(100vw - 32px));
background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-md);
box-shadow: var(--shadow-soft); padding: 22px 24px;
display: flex; flex-wrap: wrap; gap: 16px 22px; align-items: center; justify-content: space-between;
transition: transform .38s cubic-bezier(.2,.8,.3,1);
}
.cookie-banner.show { transform: translateX(-50%) translateY(0); }
.cookie-banner p { margin: 0; font-size: 15px; color: var(--ink-soft); flex: 1 1 320px; line-height: 1.55; }
.cookie-banner .cookie-actions { display: flex; gap: 10px; flex: 0 0 auto; }
.cookie-banner button {
font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer;
padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line);
background: none; color: var(--ink-soft); transition: background .18s, color .18s, border-color .18s;
}
.cookie-banner button:hover { background: var(--paper-deep); color: var(--ink); }
.cookie-banner button.accept { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.cookie-banner button.accept:hover { background: var(--petrol); border-color: var(--petrol); }
@media (max-width: 560px) {
.cookie-banner { padding: 18px; bottom: 12px; }
.cookie-banner .cookie-actions { width: 100%; }
.cookie-banner button { flex: 1; justify-content: center; }
}
/* Spotify-link met logo */
.spotify-link {
display: inline-flex; align-items: center; gap: 6px; vertical-align: middle;
padding: 3px 10px 3px 6px; border-radius: 999px; border: 1px solid var(--line);
font-size: 13.5px; font-weight: 600; color: var(--ink-soft);
transition: background .18s, color .18s, border-color .18s;
}
.spotify-link svg { width: 16px; height: 16px; flex: 0 0 16px; }
.spotify-link:hover { background: #1DB954; border-color: #1DB954; color: #fff; }
.spotify-link:hover svg { fill: #fff; }
/* Quote-slider (homepage) */
.quote-slider { position: relative; }
.quote-viewport { position: relative; }
.quote-slide { display: none; }
.quote-slide.is-active { display: block; animation: quoteIn .45s ease both; }
@keyframes quoteIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.quote-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 26px; }
.quote-arrow {
width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line);
background: var(--cream); color: var(--ink); font-size: 17px; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center; transition: background .2s, transform .2s;
}
.quote-arrow:hover { background: var(--paper-deep); transform: translateY(-1px); }
.quote-dots { display: flex; gap: 8px; }
.quote-dots button {
width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 0; cursor: pointer;
background: var(--line); transition: background .2s, transform .2s;
}
.quote-dots button.is-active { background: var(--amber); transform: scale(1.25); }
/* Fotostrip die langs scrolt (homepage) */
.photo-strip { position: relative; width: 100%; overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.strip-track { display: flex; gap: 18px; width: max-content; animation: stripScroll 68s linear infinite; }
.photo-strip:hover .strip-track { animation-play-state: paused; }
.strip-item { flex: 0 0 auto; width: clamp(230px, 26vw, 340px); margin: 0; }
.strip-item picture, .strip-item img {
display: block; width: 100%; height: clamp(160px, 19vw, 235px) !important;
object-fit: cover; border-radius: var(--radius-md);
}
@keyframes stripScroll { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 9px)); } }
@media (prefers-reduced-motion: reduce) {
.strip-track { animation: none; }
.photo-strip { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}
/* Artikelpagina's (overgenomen LinkedIn/publicatie-content) */
.article-meta { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; font-size: 14.5px; color: var(--ink-soft); margin-top: 18px; }
.article-meta .tag { display: inline-flex; align-items: center; background: var(--paper-deep); border-radius: 999px; padding: 5px 14px; font-weight: 600; font-size: 12.5px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink); }
.article-body { max-width: 700px; margin: 0 auto; font-size: 17.5px; line-height: 1.7; color: var(--ink); }
.article-body h2 { font-family: var(--font-display); font-size: 26px; font-weight: 500; margin: 44px 0 16px; line-height: 1.3; }
.article-body h3 { font-size: 19px; font-weight: 700; margin: 32px 0 12px; }
.article-body p { margin: 0 0 20px; }
.article-body ul, .article-body ol { margin: 0 0 20px; padding-left: 22px; }
.article-body li { margin-bottom: 8px; }
.article-body .lead-p { font-size: 20px; color: var(--ink-soft); }
.article-source { max-width: 700px; margin: 40px auto 0; padding-top: 24px; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--ink-soft); }
.article-crosslang { max-width: 700px; margin: 0 auto 8px; font-size: 15px; }
@media (max-width: 620px) {
.article-body { font-size: 16.5px; }
.article-body h2 { font-size: 22px; }
}
/* ==========================================================================
TOEGANKELIJKHEID — zichtbare focus, tapdoelen, screenreader-labels
========================================================================== */
/* Zichtbare focusring (amber accent). Staat bewust achteraan zodat hij wint
van de `outline: none` op :focus bij formuliervelden. */
:focus-visible {
outline: 3px solid var(--amber);
outline-offset: 3px;
}
.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible,
.book-signup input[type="email"]:focus-visible {
outline: 3px solid var(--amber);
outline-offset: 2px;
border-color: var(--amber);
}
.carousel-arrow:focus-visible,
.carousel-dots button:focus-visible,
.play-btn:focus-visible,
.footer a:focus-visible,
.btn-on-dark:focus-visible,
.btn-ghost-dark:focus-visible {
outline: 3px solid var(--amber);
outline-offset: 2px;
}
/* Alleen voor screenreaders (bv. labels bij inline formuliervelden) */
.sr-only {
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;
}
/* Tapdoelen op mobiel: minimaal ~44px, zonder de desktopmaten te wijzigen. */
@media (max-width: 1000px) {
.lang-switch a, .lang-switch span {
display: inline-flex; align-items: center; justify-content: center;
min-height: 38px; min-width: 40px; padding: 3px 10px;
}
}
@media (max-width: 860px) {
.carousel-arrow { min-width: 44px; min-height: 44px; }
.nav-mobile a { min-height: 44px; display: flex; align-items: center; }
.cookie-banner button { min-height: 44px; }
.quiz-option { min-height: 44px; }
.btn { min-height: 44px; }
/* De 10 carouseldots kunnen niet elk 44px breed zijn (dan past de rij niet
op een 360px-scherm). Een onzichtbaar ::after vergroot het raakvlak tot
24 x 34px (WCAG 2.5.8 AA) terwijl de zichtbare stip onveranderd blijft. */
.carousel-dots { gap: 16px; }
.carousel-dots button { position: relative; }
.carousel-dots button::after {
content: ""; position: absolute; top: 50%; left: 50%;
width: 24px; height: 34px; transform: translate(-50%, -50%);
}
}
/* ==========================================================================
HERO V2 — de podiumfoto blijft leidend. Drie lagen: foto, scrim, tekst.
De foto wordt vanaf de bovenkant uitgesneden (object-position: 50% 0), zodat
zijn hoofd op geen enkele schermbreedte wegvalt; wat wegvalt is de onderkant,
waar alleen publiek zit. De scrim dempt de linkerhelft zo ver dat de witte
letters van het LED-scherm achtergrondtextuur worden en de kop leesbaar is.
De tekst staat in de onderste helft, onder de rode lijn uit de foto.
========================================================================== */
.hero-v2 {
position: relative; overflow: hidden; isolation: isolate;
background: #08202B;
min-height: clamp(620px, 40vw, 1000px);
max-height: max(620px, 88vh);
display: flex; align-items: flex-end;
}
.hero-v2__media { position: absolute; inset: 0; z-index: 0; }
.hero-v2__media img {
width: 100%; height: 100% !important; object-fit: cover;
object-position: 50% 0%;
}
.hero-v2__scrim {
position: absolute; inset: 0; z-index: 1; pointer-events: none;
background:
linear-gradient(90deg, rgba(8,26,38,.93) 0%, rgba(8,26,38,.88) 34%, rgba(8,26,38,.50) 60%, rgba(8,26,38,.06) 86%, rgba(8,26,38,0) 100%),
linear-gradient(180deg, rgba(8,26,38,.32) 0%, rgba(8,26,38,0) 20%, rgba(8,26,38,0) 55%, rgba(8,26,38,.55) 100%);
}
.hero-v2__inner {
position: relative; z-index: 2; width: 100%;
max-width: 1280px; margin: 0 auto;
padding: clamp(96px, 12vw, 170px) clamp(24px, 4vw, 48px) clamp(48px, 6vw, 80px);
}
.hero-v2__col { max-width: 600px; }
.hero-v2 .hero-eyebrow {
background: rgba(246,239,227,.10);
border: 1px solid rgba(246,239,227,.28);
color: var(--text-on-dark);
font-size: 14.5px; letter-spacing: .045em;
padding: 10px 20px; margin-bottom: 26px;
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.hero-v2 h1 {
font-size: clamp(40px, 5.2vw, 68px);
line-height: 1.04; letter-spacing: -0.02em;
color: #FFFDF8; margin-bottom: 22px;
text-shadow: 0 2px 30px rgba(4,14,20,.6);
}
/* Geen rechthoekige markering achter losse woorden: alleen kleur. */
.hero-v2 h1 .u { background: none; padding: 0; color: #F0A75B; }
.hero-v2 .hero-sub {
font-size: clamp(18px, 1.35vw, 20px); line-height: 1.62;
color: rgba(246,239,227,.94); max-width: 560px; margin-bottom: 34px;
text-shadow: 0 1px 20px rgba(4,14,20,.7);
}
.hero-v2 .hero-actions { gap: 14px; margin-bottom: 32px; }
.hero-v2 .btn { min-height: 52px; padding: 15px 32px; font-size: 17px; }
.hero-v2 .btn-primary { box-shadow: 0 16px 34px -14px rgba(217,130,43,.9); }
.hero-v2 .btn-hero-ghost {
background: rgba(246,239,227,.10); color: #FFFDF8;
border: 1.5px solid rgba(246,239,227,.48);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.hero-v2 .btn-hero-ghost:hover { background: rgba(246,239,227,.2); border-color: rgba(246,239,227,.85); transform: translateY(-2px); }
.hero-v2 .btn-hero-ghost:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.hero-v2 .proof-strip { gap: 12px 30px; margin-top: 0; }
.hero-v2 .proof-strip .item { font-size: 16px; color: #FFFDF8; text-shadow: 0 1px 16px rgba(4,14,20,.75); }
.hero-v2 .proof-strip .item .ck { width: 22px; height: 22px; background: var(--amber); font-size: 13px; }
/* Tussen 1024 en 1180: iets smallere kolom zodat de tekst zijn arm niet raakt. */
@media (max-width: 1180px) {
.hero-v2__col { max-width: 540px; }
.hero-v2 h1 { font-size: clamp(38px, 4.8vw, 56px); }
}
/* Onder 1024px is er geen ruimte voor tekst naast hem zonder over zijn armen te
lopen. Daar dus geen uitsnede van het bureaubladbeeld, maar een eigen
compositie: de hele foto boven, tekst eronder op diep navy. */
@media (max-width: 1023px) {
.hero-v2 { display: block; min-height: 0; max-height: none; background: var(--petrol-deep); }
.hero-v2__media { position: relative; inset: auto; aspect-ratio: 16 / 9; }
.hero-v2__media img { object-position: 50% 28%; }
.hero-v2__scrim {
inset: auto 0 0 0; height: 46%;
background: linear-gradient(180deg, rgba(10,36,48,0) 0%, rgba(10,36,48,.7) 62%, var(--petrol-deep) 100%);
}
.hero-v2__inner { padding: 30px clamp(20px, 4vw, 40px) 52px; }
.hero-v2__col { max-width: 640px; }
.hero-v2 h1 { font-size: clamp(34px, 5.6vw, 52px); text-shadow: none; }
.hero-v2 .hero-sub { text-shadow: none; margin-bottom: 30px; }
.hero-v2 .hero-eyebrow { margin-bottom: 20px; }
.hero-v2 .proof-strip .item { text-shadow: none; }
}
/* Telefoon: iets minder breed uitgesneden zodat hij groter in beeld staat. */
@media (max-width: 719px) {
.hero-v2__media { aspect-ratio: 5 / 4; }
.hero-v2__media img { object-position: 56% 30%; }
.hero-v2 h1 { font-size: clamp(33px, 9.4vw, 42px); }
.hero-v2 .hero-sub { font-size: 17.5px; }
.hero-v2 .hero-eyebrow { font-size: 13.5px; padding: 9px 16px; }
.hero-v2 .btn { width: 100%; justify-content: center; }
.hero-v2 .proof-strip .item { font-size: 15.5px; }
}
/* ==========================================================================
VERTROUWENSBALK — een logobalk: alle namen op een regel, achter elkaar.
Elk item is al voorbereid op een echt logo: zet een ![]()
in .trust-item en
de tekst vervalt. Past de rij niet, dan schuift hij horizontaal door in
plaats van af te breken naar een tweede regel.
========================================================================== */
.trustbar { background: var(--cream); border-bottom: 1px solid var(--line); padding: clamp(26px, 3vw, 40px) 0; }
.trustbar > .wrap { max-width: 1440px; }
.trustbar .trust-label {
font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
color: var(--ink-soft); margin-bottom: 18px; display: flex; align-items: center; gap: 14px;
}
.trustbar .trust-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.trust-rij-wrap { position: relative; }
/* Fade aan de randen, alleen waar de rij echt niet meer past en dus doorschuift.
Boven 1200px staan alle twaalf namen tegelijk in beeld en is de fade uit. */
.trust-rij-wrap::before, .trust-rij-wrap::after { content: none; }
@media (max-width: 1199px) {
.trust-rij-wrap::before, .trust-rij-wrap::after {
content: ""; position: absolute; top: 0; bottom: 0; width: 30px; pointer-events: none; z-index: 2;
}
.trust-rij-wrap::before { left: 0; background: linear-gradient(90deg, var(--cream), rgba(255,253,248,0)); }
.trust-rij-wrap::after { right: 0; background: linear-gradient(270deg, var(--cream), rgba(255,253,248,0)); }
}
.trust-rij {
display: flex; align-items: center; flex-wrap: nowrap;
justify-content: space-between; gap: clamp(14px, 2.1vw, 36px);
overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
padding: 6px 0; scroll-snap-type: x proximity;
}
.trust-rij::-webkit-scrollbar { display: none; }
.trust-item {
flex: 0 0 auto; scroll-snap-align: center; white-space: nowrap;
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--font-display); font-size: clamp(11.5px, 1.08vw, 16px);
font-variation-settings: "SOFT" 60, "opsz" 90;
color: rgba(33, 50, 60, .8); line-height: 1;
}
/* Zodra er echte logobestanden zijn: vervang de tekst in .trust-item door een
![]()
. Alles wordt dan op dezelfde optische hoogte en in monochroom gezet. */
.trust-item img {
height: clamp(18px, 1.8vw, 26px) !important; width: auto; display: block;
filter: grayscale(1) contrast(.9); opacity: .68; transition: opacity .2s, filter .2s;
}
.trust-item:hover img { filter: grayscale(0); opacity: 1; }
@media (max-width: 719px) {
.trust-rij { gap: 22px; justify-content: flex-start; }
.trust-item { font-size: 14px; }
.trust-rij-wrap::before, .trust-rij-wrap::after { width: 26px; }
}
@media (max-width: 899px) { .nav-logo img { height: 44px !important; } }
/* ==========================================================================
LINKS IN LOPENDE TEKST — de basisregel maakt alle links kleurloos en zonder
onderstreping, wat prima is voor knoppen en kaarten maar niet voor een link
midden in een zin. Hieronder krijgt zo'n link wel een herkenbare vorm.
========================================================================== */
main p a:not(.btn):not(.doorlink):not(.cta-route):not(.card):not(.trust-item),
main li a:not(.btn):not(.doorlink):not(.cta-route):not(.card),
main dd a:not(.btn):not(.doorlink),
main summary a:not(.btn),
main blockquote a:not(.btn),
main details p a:not(.btn) {
color: var(--ink); font-weight: 600;
border-bottom: 2px solid var(--amber-soft);
transition: border-color .2s, color .2s;
}
main p a:not(.btn):not(.doorlink):not(.cta-route):not(.card):hover,
main li a:not(.btn):not(.doorlink):not(.cta-route):not(.card):hover,
main dd a:not(.btn):not(.doorlink):hover,
main blockquote a:not(.btn):hover { border-bottom-color: var(--amber); }
/* Op donkere vlakken juist licht, anders valt de link weg. */
main .cta-final p a:not(.btn), main .doc-section-donker p a:not(.btn) {
color: var(--text-on-dark); border-bottom-color: rgba(217,130,43,.8);
}
main .cta-final p a:not(.btn):hover { border-bottom-color: var(--amber); }
/* ==========================================================================
FOTOBAND — een brede podiumfoto als adempauze tussen blokken tekst.
Op mobiel geen brede uitsnede maar de hele foto, zodat er niets afvalt.
========================================================================== */
.foto-band { margin: clamp(48px, 6vw, 84px) 0; }
.foto-band figure {
margin: 0; border-radius: var(--radius-lg); overflow: hidden;
aspect-ratio: 12 / 5; box-shadow: var(--shadow-card); background: var(--petrol-deep);
}
.foto-band figure img { width: 100%; height: 100% !important; object-fit: cover; }
.foto-band figcaption {
margin-top: 12px; font-size: 14.5px; color: var(--ink-soft);
}
@media (max-width: 860px) {
.foto-band figure { aspect-ratio: 3 / 2; }
}
/* ==========================================================================
ROUTEKAARTEN — de alternatieve manieren om contact te leggen. Bewust onder
het formulier en visueel rustiger, zodat het formulier de hoofdroute blijft,
maar met echte knoppen zodat duidelijk is waar je kunt klikken.
========================================================================== */
.route-kaarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.route-kaart {
display: flex; flex-direction: column;
background: var(--cream); border: 1px solid var(--line);
border-radius: var(--radius-md); padding: 26px 24px 24px;
transition: border-color .2s, transform .2s, box-shadow .2s;
}
.route-kaart:hover { border-color: rgba(33,50,60,.28); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.route-kaart .ico {
width: 42px; height: 42px; border-radius: 50%; display: inline-flex;
align-items: center; justify-content: center; font-size: 19px;
background: var(--amber-soft); color: var(--ink); margin-bottom: 16px;
}
.route-kaart h3 { font-size: 20px; margin-bottom: 8px; }
.route-kaart p { color: var(--ink-soft); font-size: 15.5px; margin-bottom: 20px; flex: 1; }
.route-kaart .btn { align-self: flex-start; padding: 12px 22px; font-size: 15.5px; min-height: 46px; }
@media (max-width: 860px) { .route-kaarten { grid-template-columns: 1fr; } }