/* Alvaron. Losgemaakt uit index.html op 3-sep-2026 toen de site
meerdere pagina's kreeg. Een bron voor alle pagina's. */
/* ============================================================
ALVARON, sober template. 23-aug-2026.
Kleuren gemengd uit jc-digitalmarketing.com en whitekiwimarketing.nl.
Archivo op normale breedte en gewicht 700, dus niet de expanded black
van de vorige opzet. Dat is het verschil tussen luid en rustig.
============================================================ */
:root {
/* Contrastwaarden staan bij elk token. Nagerekend met contrast.mjs, dat is
geijkt op zwart-op-wit 21.00 en #767676-op-wit 4.54. AA vraagt 4.5:1 voor
lopende tekst en 3:1 voor de rand van een bedieningselement. */
--paper: #FFFFFF; /* grond, echt wit en niet gebroken */
--tint: #F2F5F9; /* afwisselende sectie */
--card: #FFFFFF;
--ink: #0F1B34; /* koppen, 16.7:1 op grond */
--body: #4A5B72; /* lopende tekst, 6.8:1 op grond */
--faint: #5E6D82; /* labels en bijschriften, 4.8:1 op tint */
--cobalt: #1B45D8; /* links en vinkjes, 7.1:1 op grond */
--ember: #CE4415; /* alleen de primaire knop, wit erop 4.7:1 */
--on-ember: #FFFFFF;
--line: #E3E9F0; /* scheidingslijn, decoratief, geen eis */
--line-strong: #CFD9E6;
--border-control: #7F90A8; /* rand van de ghost-knop, 3.2:1 op grond */
/* Het contactblok en de badge zijn met opzet in beide weergaven donker.
Daarom eigen tokens die NIET meewisselen: met var(--ink) werd dit blok in
donkere modus juist licht, met witte tekst erop. */
--block: #0F1B34;
--block-text: #FFFFFF; /* 17.1:1 op het blok */
--block-soft: #C3D0E2; /* 11.0:1 op het blok */
--block-line: transparent; /* in licht geen rand nodig, blok steekt af */
--shadow: 0 1px 2px rgba(15,27,52,.04), 0 12px 30px -18px rgba(15,27,52,.20);
--shadow-lift: 0 2px 4px rgba(15,27,52,.05), 0 18px 40px -20px rgba(15,27,52,.26);
--maxw: 1080px;
--gut: clamp(20px, 5vw, 40px);
--sec: clamp(56px, 8vw, 92px);
--r: 16px;
color-scheme: light;
}
/* Deze pagina is bewust altijd licht. Er zat een donkere variant in via
prefers-color-scheme, maar op een apparaat met donkere modus sloeg die
ongevraagd aan. color-scheme: light houdt ook de schuifbalken en
formulierelementen licht. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }
body {
margin: 0;
background: var(--paper);
color: var(--body);
font-family: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
font-size: 17px;
line-height: 1.72;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, .num {
font-family: 'Archivo', system-ui, sans-serif;
color: var(--ink);
font-weight: 700;
line-height: 1.12;
letter-spacing: -0.015em;
text-wrap: balance;
margin: 0;
}
h1 { font-size: clamp(32px, 4.4vw, 50px); letter-spacing: -0.022em; }
h2 { font-size: clamp(26px, 3vw, 35px); }
h3 { font-size: 19px; line-height: 1.3; }
p { margin: 0; }
a { color: var(--cobalt); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; border-radius: 4px; }
img { max-width: 100%; height: auto; display: block; }
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.sec { padding-block: var(--sec); }
.sec--tint { background: var(--tint); }
.lede { font-size: 19px; max-width: 62ch; margin-top: 16px; }
.label {
font-size: 11px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
color: var(--faint); display: block; margin-bottom: 14px;
}
.head { max-width: 66ch; margin-bottom: 44px; }
.head p { margin-top: 14px; }
/* ---------- nav ---------- */
.nav {
position: sticky; top: 0; z-index: 20;
background: color-mix(in srgb, var(--paper) 88%, transparent);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--line);
}
.nav__in { display: flex; align-items: center; gap: 28px; height: 68px; }
.logo {
font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 17px;
letter-spacing: .04em; color: var(--ink); text-decoration: none;
}
.nav__links { display: flex; gap: 24px; margin-left: auto; }
.nav__links a { color: var(--body); font-size: 15px; font-weight: 500; }
.nav__links a:hover { color: var(--ink); text-decoration: none; }
@media (max-width: 860px) { .nav__links { display: none; } .nav__in { gap: 16px; } }
/* ---------- knoppen ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
border-radius: 999px; padding: 13px 26px;
font-family: 'Be Vietnam Pro', sans-serif; font-size: 15px; font-weight: 600;
background: var(--ember); color: var(--on-ember); border: 1px solid var(--ember);
text-decoration: none; cursor: pointer; white-space: nowrap;
transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--ember) 55%, transparent); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--border-control); }
.btn--ghost:hover { border-color: var(--ink); box-shadow: none; }
.btn--sm { padding: 9px 20px; font-size: 14px; }
/* ---------- hero ---------- */
.hero { padding-block: clamp(44px, 6vw, 76px) var(--sec); }
.hero__grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.proof { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 22px; }
.proof span { font-size: 13.5px; color: var(--faint); display: inline-flex; align-items: center; gap: 7px; }
.proof span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--cobalt); flex: 0 0 auto; }
.hero .lede { font-size: 19px; margin-top: 20px; max-width: 52ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero__note { margin-top: 20px; font-size: 14.5px; color: var(--faint); max-width: 46ch; }
.hero__note b { color: var(--ink); font-weight: 600; }
.hero__media { position: relative; }
/* Twee losse portretten naast elkaar, met een zichtbare naad ertussen. Geen
montage die doet alsof het een opname is: het zijn twee foto's, op twee
plekken gemaakt, en zo horen ze er ook uit te zien. */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.duo__vak {
/* figure draagt in de browser standaard 40px marge links en rechts; zonder
deze regel houdt elk portret maar 125 van de 205 beschikbare pixels over. */
margin: 0;
aspect-ratio: 5 / 8; overflow: hidden;
border-radius: var(--r); box-shadow: var(--shadow-lift);
}
.duo__vak img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Beide gezichten zitten iets rechts van het midden. */
.duo__vak:first-child img { object-position: 56% 50%; }
.duo__vak:last-child img { object-position: 54% 50%; }
.badge b { font-weight: 600; }
.badge {
position: absolute; left: 18px; right: 18px; bottom: 18px;
background: var(--block); color: var(--block-text);
border-radius: 11px; padding: 12px 16px; font-size: 13.5px; line-height: 1.45;
}
/* Op smal scherm eerst de kop, dan pas de foto: je wilt weten waar het over
gaat voordat je een gezicht ziet. */
@media (max-width: 880px) { .hero__grid { grid-template-columns: 1fr; } .hero__media { max-width: 460px; } }
/* ---------- kaarten ---------- */
.grid { display: grid; gap: 20px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 940px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }
/* De grond is nu even wit als de kaart, dus de schaduw alleen is te weinig
om de kaart af te tekenen. Een haarlijn erbij. */
.card {
background: var(--card); border-radius: var(--r); box-shadow: var(--shadow);
border: 1px solid var(--line);
padding: 26px 26px 28px; display: flex; flex-direction: column; gap: 11px;
}
.card p { font-size: 15.5px; line-height: 1.68; }
.tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; padding: 0; list-style: none; }
.tags li {
font-size: 12.5px; color: var(--body);
border: 1px solid var(--line-strong); border-radius: 999px; padding: 3px 11px;
}
/* ---------- tarieven ---------- */
.tier { position: relative; }
.tier__price { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 33px; color: var(--ink); line-height: 1; letter-spacing: -0.02em; }
.tier__price small { font-family: 'Be Vietnam Pro', sans-serif; font-size: 14px; font-weight: 500; color: var(--faint); letter-spacing: 0; margin-left: 4px; }
.tier__band { font-size: 14px; color: var(--faint); margin-top: 8px; }
.tier ul { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.tier li { font-size: 14.5px; line-height: 1.55; padding-left: 20px; position: relative; }
.tier li::before {
content: "\2713"; position: absolute; left: 0; top: 0;
color: var(--cobalt); font-size: 13px; font-weight: 600; line-height: 1.62;
}
.basis { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); padding: 24px 26px; margin-bottom: 20px; }
.basis ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 24px; }
.basis li { font-size: 14.5px; padding-left: 20px; position: relative; }
.basis li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--cobalt); font-size: 13px; font-weight: 600; line-height: 1.78; }
@media (max-width: 780px) { .basis ul { grid-template-columns: 1fr; } }
.rules { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; margin-top: 22px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); }
.rules > div { background: var(--card); padding: 18px 22px; }
.rules dt { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 14px; color: var(--ink); margin-bottom: 5px; }
.rules dd { margin: 0; font-size: 14.5px; line-height: 1.6; }
@media (max-width: 700px) { .rules { grid-template-columns: 1fr; } }
/* ---------- hybride ---------- */
.hybride { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.hybride__kant { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 26px 26px 28px; }
.hybride__kant ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.hybride__kant li { font-size: 15.5px; line-height: 1.6; padding-left: 22px; position: relative; }
.hybride__kant li::before {
content: "\2713"; position: absolute; left: 0; top: 0;
color: var(--cobalt); font-size: 13px; font-weight: 600; line-height: 1.65;
}
.hybride__slot { margin-top: 22px; max-width: 74ch; font-size: 15.5px; color: var(--body); }
@media (max-width: 720px) { .hybride { grid-template-columns: 1fr; } }
/* ---------- cookiebanner ---------- */
.cookie { margin-top: 24px; background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); padding: 28px 30px; border-left: 3px solid var(--ember); }
.cookie h3 { font-size: 22px; margin-bottom: 12px; }
.cookie p { font-size: 15.5px; }
.cookie p + p { margin-top: 12px; }
.cookie__prijs {
list-style: none; margin: 22px 0 0; padding: 0;
display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
border-radius: 12px; overflow: hidden; border: 1px solid var(--line);
}
.cookie__prijs li { background: var(--tint); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.cookie__prijs span { font-size: 12.5px; color: var(--faint); }
.cookie__prijs b { font-family: 'Archivo', sans-serif; font-size: 17px; color: var(--ink); font-weight: 700; }
/* De eigen regel gebruikt de niet-wisselende bloktokens, zodat hij in beide
weergaven donker blijft en niet omkeert. Selector volledig uitgeschreven,
want .cookie__prijs li is specifieker en wint anders met de lichte grond. */
.cookie__prijs li.cookie__prijs--ons { background: var(--block); }
.cookie__prijs li.cookie__prijs--ons span { color: var(--block-soft); }
.cookie__prijs li.cookie__prijs--ons b { color: var(--block-text); }
@media (max-width: 700px) { .cookie__prijs { grid-template-columns: 1fr; } }
.guarantee { margin-top: 24px; background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); padding: 28px 30px; border-left: 3px solid var(--cobalt); }
.guarantee h3 { font-size: 22px; margin-bottom: 12px; }
.guarantee p + p { margin-top: 12px; }
.guarantee p { font-size: 15.5px; }
/* ---------- het web ----------
Lijnen in SVG met vector-effect non-scaling-stroke, labels in HTML op
procentposities. Zo blijven de lijnen overal even dik en blijft de tekst
echte tekst, die met de rest meeschaalt. */
/* figure draagt in de browser standaard 40px marge links en rechts; die kost
op mobiel 80 van de 375 beschikbare pixels. */
.web { margin: 30px 0 0; background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); padding: clamp(18px, 3vw, 30px); }
.web__scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.web__scroll:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 4px; border-radius: 10px; }
.web__plot { position: relative; width: 100%; aspect-ratio: 1.85; }
/* De hint hoort bij de oude schuif-oplossing en staat nu altijd uit: onder de
omslagbreedte klapt het schema om naar banen, dus er valt niets te schuiven. */
.web__hint { display: none; }
.web__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.web__lines line, .web__lines path { stroke-width: 1.25; vector-effect: non-scaling-stroke; fill: none; }
/* Vier soorten stroom, elk met een eigen kleur, in de richting van de pijl.
De ruststand staat in --op, zodat het dimmen bij aanwijzen daar netjes
op door kan rekenen in plaats van met !important te vechten. */
.web__lines .bron { --op: .55; stroke: var(--cobalt); stroke-dasharray: 5 7; }
.web__lines .sturing { --op: .6; stroke: var(--ember); stroke-dasharray: 5 7; }
.web__lines .opbrengst { --op: .5; stroke: var(--ink); stroke-dasharray: 4 6; stroke-width: 1.8; }
.web__lines .los { --op: .25; stroke: var(--faint); stroke-dasharray: 2 5; }
/* De terugvoer krijgt dezelfde kleur en hetzelfde ritme als de andere bronnen,
want het IS gewoon een bron. Alleen de boog verschilt, zodat je ziet dat het
terugkomt en niet nog een keer heen gaat. */
.web__lines .terug { --op: .55; stroke: var(--cobalt); stroke-dasharray: 5 7; fill: none; }
.web__lines line, .web__lines path { opacity: var(--op); transition: opacity .18s ease; }
/* De dash schuift mee met de leesrichting: van bron naar omzet. */
@keyframes stroom { to { stroke-dashoffset: -24; } }
.web__lines line, .web__lines path { animation: stroom 3s linear infinite; }
.web__lines line:nth-of-type(2n) { animation-duration: 3.8s; }
.web__lines line:nth-of-type(3n) { animation-duration: 4.6s; }
/* Aanwijzen of tabben licht het pad op en dempt de rest. */
.web__plot--actief .web__lines :is(line, path) { opacity: calc(var(--op) * .16); }
.web__plot--actief .web__lines :is(line, path).aan { opacity: 1; animation-duration: 1.2s; }
/* Pulsen lopen de hele reis af. left en top interpoleren per stap lineair,
dus tussen twee knopen loopt de puls precies over de lijn. */
.puls {
position: absolute; width: 9px; height: 9px; border-radius: 50%;
transform: translate(-50%, -50%); pointer-events: none;
box-shadow: 0 0 0 3px var(--card); opacity: 0;
}
@keyframes reis-boven {
0% { left: 13%; top: 12%; background: var(--cobalt); opacity: 0; }
5% { opacity: 1; }
30% { left: 38%; top: 50%; background: var(--cobalt); }
34% { background: var(--ember); }
62% { left: 67%; top: 8%; background: var(--ember); }
66% { background: var(--ink); }
95% { opacity: 1; }
100% { left: 88%; top: 50%; background: var(--ink); opacity: 0; }
}
@keyframes reis-midden {
0% { left: 13%; top: 63%; background: var(--cobalt); opacity: 0; }
5% { opacity: 1; }
30% { left: 38%; top: 50%; background: var(--cobalt); }
34% { background: var(--ember); }
62% { left: 67%; top: 24.8%; background: var(--ember); }
66% { background: var(--ink); }
95% { opacity: 1; }
100% { left: 88%; top: 50%; background: var(--ink); opacity: 0; }
}
@keyframes reis-onder {
0% { left: 13%; top: 88%; background: var(--cobalt); opacity: 0; }
5% { opacity: 1; }
30% { left: 38%; top: 50%; background: var(--cobalt); }
34% { background: var(--ember); }
62% { left: 67%; top: 41.6%; background: var(--ember); }
66% { background: var(--ink); }
95% { opacity: 1; }
100% { left: 88%; top: 50%; background: var(--ink); opacity: 0; }
}
/* Vierde reis, langs ChatGPT Ads. De vier advertentiekanalen krijgen zo elk
een puls, en er blijft er geen een achter op een plek waar niets staat.
De tussenstops moeten gelijk blijven aan de top-percentages van de knopen. */
@keyframes reis-vierde {
0% { left: 13%; top: 37%; background: var(--cobalt); opacity: 0; }
5% { opacity: 1; }
30% { left: 38%; top: 50%; background: var(--cobalt); }
34% { background: var(--ember); }
62% { left: 67%; top: 58.4%; background: var(--ember); }
66% { background: var(--ink); }
95% { opacity: 1; }
100% { left: 88%; top: 50%; background: var(--ink); opacity: 0; }
}
.puls--1 { animation: reis-boven 7s linear infinite; }
.puls--2 { animation: reis-midden 7s linear infinite 1.75s; }
.puls--3 { animation: reis-onder 7s linear infinite 3.5s; }
.puls--4 { animation: reis-vierde 7s linear infinite 5.25s; }
/* Tijdens het aanwijzen zijn de pulsen afleiding. Wegzetten met visibility en
niet met opacity: de keyframes sturen opacity zelf, en een lopende animatie
wint van een gewone declaratie. Gemeten: opacity bleef gewoon op 1 staan. */
.web__plot--actief .puls { visibility: hidden; animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
.web__lines line, .web__lines path { animation: none; }
.puls { display: none; }
}
.knoop {
position: absolute; transform: translate(-50%, -50%);
display: inline-flex; align-items: center; justify-content: center; gap: 7px;
background: var(--card); border: 1px solid var(--line-strong); border-radius: 999px;
padding: 6px 12px; font-family: inherit; font-size: 13px; font-weight: 500; color: var(--ink);
white-space: nowrap; line-height: 1.2; cursor: pointer; appearance: none;
transition: border-color .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.knoop:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }
.knoop::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: var(--faint); }
/* Vaste kolombreedte, anders staan de pillen binnen een kolom rafelig omdat
"GA4" en "Jouw ordersysteem" nu eenmaal niet even breed zijn. */
.knoop--data { min-width: 168px; }
.knoop--kanaal { min-width: 124px; }
.knoop--ads::before { background: var(--ember); }
.knoop--data::before { background: var(--cobalt); }
/* Aanwijzen: het pad blijft staan, de rest zakt weg. Geen sprongetje in de
maat, alleen een rand en een schaduw, anders wordt het rommelig. */
.web__plot--actief .knoop { opacity: .3; }
.web__plot--actief .knoop.aan { opacity: 1; }
.knoop.aan-zelf { border-color: var(--cobalt); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cobalt) 16%, transparent); }
/* De kern is het werk dat wij doen: zichtbaar, maar niet het eindpunt. */
.knoop--kern {
background: var(--card); border: 1.5px solid var(--cobalt); color: var(--ink);
font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 14px;
padding: 10px 18px;
}
.knoop--kern::before { display: none; }
/* De omzet is waar het schema naartoe loopt, dus dat is de enige gevulde knoop.
Deze draait WEL mee met het thema: in licht een donkere pil, in donker een
lichte. De --block-tokens zijn hier fout, want die blijven in beide skins
donker en dan zakt de pil in donker weg in de kaart (1,15:1 gemeten). */
.knoop--uit {
background: var(--ink); border-color: var(--ink); color: var(--paper);
font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 15px;
padding: 11px 20px; box-shadow: 0 10px 26px -12px rgba(15,27,52,.5);
}
.knoop--uit::before { display: none; }
/* De regel die verandert als je een knoop aanwijst. Vaste minimumhoogte,
anders springt de pagina bij elke wisseling. */
.web__detail {
margin-top: 18px; padding: 12px 15px; border-radius: 10px;
background: var(--tint); border-left: 3px solid var(--line-strong);
font-size: 14.5px; line-height: 1.55; color: var(--body); min-height: 3.2em;
transition: border-color .18s ease;
}
.web__detail strong { color: var(--ink); font-weight: 600; }
.web__detail-leeg { color: var(--faint); }
.web__detail--aan { border-left-color: var(--cobalt); }
/* Gemeten en niet geschat. De langste tekst vraagt 89px bij een viewport van
360 en 111px bij 305, want dan breekt hij een regel extra. Zonder deze
reservering springt de pagina bij elke wisseling. */
@media (max-width: 880px) { .web__detail { min-height: 92px; font-size: 14px; } }
@media (max-width: 360px) { .web__detail { min-height: 114px; } }
/* ---------- banen ----------
Op breed scherm bestaan de banen alleen in de structuur: display:contents
haalt ze uit de opmaak weg, zodat de knopen gewoon absoluut binnen
.web__plot blijven staan. Onder de 720px worden het echte rijen. */
.baan { display: contents; }
.baan__kop, .baan__terug { display: none; }
@media (max-width: 880px) {
/* Een radiaal schema past niet op een telefoon. In plaats van de gebruiker
opzij te laten schuiven, klapt het diagram om naar vier gestapelde banen
met dezelfde leesrichting: bron, koppeling, kanaal, omzet. */
.web__scroll { overflow-x: visible; }
.web__hint { display: none; }
.web__plot {
position: static; aspect-ratio: auto; min-width: 0;
display: flex; flex-direction: column;
}
.web__lines, .puls { display: none; }
.baan {
display: flex; flex-wrap: wrap; gap: 8px;
align-items: center; justify-content: flex-start;
}
.baan__kop {
display: block; flex: 0 0 100%;
font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
color: var(--faint); margin-bottom: 2px;
}
/* De verbinding tussen twee banen, met hetzelfde streepjesritme en dezelfde
kleur als de lijn die hij op breed scherm vervangt. */
.baan + .baan::before {
content: ""; flex: 0 0 100%; height: 34px; margin: 6px 0 2px;
background-repeat: no-repeat; background-position: 15px 0; background-size: 3px 100%;
background-image: repeating-linear-gradient(to bottom,
currentColor 0 6px, transparent 6px 13px);
}
.baan--kern::before { color: var(--cobalt); }
.baan--kanaal::before { color: var(--ember); }
.baan--uit::before { color: var(--ink); opacity: .55; }
@keyframes baan-stroom { to { background-position-y: 12px; } }
.baan + .baan::before { animation: baan-stroom 1.6s linear infinite; }
.knoop {
position: static; transform: none; min-width: 0;
font-size: 12.5px; padding: 7px 11px; gap: 6px;
}
.knoop--data, .knoop--kanaal { min-width: 0; }
.knoop--kern, .knoop--uit { font-size: 13.5px; padding: 9px 15px; }
/* De terugkoppeling is in banenweergave niet te tekenen, dus staat hij er
met zoveel woorden. Streepje links in dezelfde kleur als de terugvoerlijn. */
.baan__terug {
display: block; flex: 0 0 100%;
margin: 10px 0 0; padding-left: 14px;
border-left: 3px dashed var(--cobalt);
font-size: 13.5px; line-height: 1.5; color: var(--body);
}
/* Het dempen bij aanwijzen slaat hier nergens op: er zijn geen lijnen meer
om te volgen en gedempte knoppen zijn alleen maar slechter leesbaar. */
.web__plot--actief .knoop { opacity: 1; }
/* De legenda beschreef vier lijnsoorten. Die zijn hier niet getekend, dus de
streepjes worden bolletjes: precies wat er op de knopen staat.
Selector met een niveau extra, want de basisregel staat verderop in het
bestand en zou op gelijke specificiteit winnen. */
.web__legenda span i { width: 9px; height: 9px; border: 0; border-radius: 50%; background: currentColor; }
}
@media (max-width: 880px) and (prefers-reduced-motion: reduce) {
.baan + .baan::before { animation: none; }
}
.web__legenda { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.web__legenda span { font-size: 13px; color: var(--body); display: inline-flex; align-items: center; gap: 8px; }
/* De legenda beschrijft de drie stromen, dus streepjes en geen bolletjes. */
.web__legenda i { width: 22px; height: 0; border-top: 2px dashed; display: inline-block; }
.web__uitleg { font-size: 15px; color: var(--body); margin-top: 14px; max-width: 70ch; }
/* ---------- het onderscheid ---------- */
.anders { margin-top: 34px; max-width: 78ch; }
.anders h3 { font-size: clamp(21px, 2.4vw, 27px); line-height: 1.25; }
.anders p { margin-top: 14px; font-size: 16px; line-height: 1.7; }
.anders__nb {
margin-top: 20px; padding-left: 16px; border-left: 3px solid var(--cobalt);
color: var(--ink); font-weight: 500;
}
/* ---------- team ---------- */
.person { display: grid; grid-template-columns: 132px 1fr; gap: 22px; align-items: start; }
.person img { border-radius: 12px; }
.person__role { font-size: 12px; color: var(--faint); text-transform: uppercase; letter-spacing: .1em; font-weight: 600; }
.person h3 { margin: 6px 0 8px; font-size: 21px; }
.person p { font-size: 15.5px; }
@media (max-width: 560px) { .person { grid-template-columns: 100px 1fr; gap: 16px; } }
/* ---------- faq ---------- */
.faq { display: flex; flex-direction: column; gap: 10px; }
.faq details { background: var(--card); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; }
.faq summary {
cursor: pointer; list-style: none; padding: 17px 22px;
font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 16px; color: var(--ink);
display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 20px; color: var(--cobalt); font-weight: 600; flex: 0 0 auto; line-height: 1; }
.faq details[open] summary::after { content: "\2013"; }
.faq p { padding: 0 22px 20px; font-size: 15.5px; max-width: 78ch; }
/* ---------- contact ---------- */
.contact { background: var(--block); border: 1px solid var(--block-line); border-radius: 20px; padding: clamp(32px, 5vw, 56px); color: var(--block-soft); }
.contact h2 { color: var(--block-text); }
.contact p { color: var(--block-soft); margin-top: 14px; max-width: 54ch; font-size: 16.5px; }
.contact .btn--ghost { color: var(--block-text); border-color: rgba(255,255,255,.45); }
.contact .btn--ghost:hover { border-color: var(--block-text); }
.contact__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
footer { padding-block: 34px; border-top: 1px solid var(--line); margin-top: var(--sec); }
.foot { display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center; font-size: 14px; color: var(--faint); }
.foot a { color: var(--body); }
.foot .sp { margin-left: auto; }
/* ---------- reviewmuur ----------
Een muur zonder onderscheid: geen merkje, geen filter, geen kleur die zegt
van wie iemand klant was. De kleur op de bovenrand wisselt per positie, puur
voor het ritme, en betekent dus niets.
Sterren staan ALLEEN waar er ook echt een waardering is gegeven. De rest
krijgt een aanhalingsteken. Sterren onder een quote zetten die nooit een
cijfer heeft gehad zou een waardering verzinnen. */
.rv__telling {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 22px;
}
.rv__tel {
display: inline-flex; align-items: baseline; gap: 7px;
font-size: 14px; color: var(--faint);
}
.rv__tel b {
font-family: 'Archivo', sans-serif; font-size: 27px; font-weight: 700; line-height: 1;
letter-spacing: -.02em;
}
.rv__tel b { color: var(--cobalt); }
.rv__tel--bron { font-size: 13px; }
/* ---------- de muur ----------
Kolommen in plaats van een raster: de kaarten houden dan hun eigen hoogte en
sluiten op elkaar aan. Een korte quote blijft kort, een lange mag lang zijn,
en dat geeft de pagina vanzelf ritme. */
.rv__muur { columns: 3; column-gap: 14px; }
@media (max-width: 980px) { .rv__muur { columns: 2; } }
@media (max-width: 640px) { .rv__muur { columns: 1; } }
.rv {
break-inside: avoid; margin: 0 0 14px; padding: 20px;
background: var(--card); border-radius: 12px; box-shadow: var(--shadow);
border-top: 3px solid var(--line-strong);
display: flex; flex-direction: column; gap: 12px;
transition: transform .18s ease, box-shadow .18s ease;
animation: rv-op .45s ease-out both;
}
/* Om en om, alleen voor het ritme in de muur. */
.rv:nth-child(3n+1) { border-top-color: var(--ember); }
.rv:nth-child(3n+2) { border-top-color: var(--cobalt); }
.rv:hover { transform: translateY(-3px); box-shadow: 0 6px 22px rgba(15,27,52,.10); }
@keyframes rv-op { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* Een kleine trap, maar alleen over de eerste rijen. Daarna zou het wachten worden. */
.rv:nth-child(-n+9) { animation-delay: calc((var(--n, 0) * 0ms)); }
.rv:nth-child(2) { animation-delay: 40ms; } .rv:nth-child(3) { animation-delay: 80ms; }
.rv:nth-child(4) { animation-delay: 120ms; } .rv:nth-child(5) { animation-delay: 160ms; }
.rv:nth-child(6) { animation-delay: 200ms; } .rv:nth-child(7) { animation-delay: 240ms; }
.rv:nth-child(8) { animation-delay: 280ms; } .rv:nth-child(9) { animation-delay: 320ms; }
.rv__kop { display: flex; align-items: center; gap: 10px; min-height: 16px; }
.ster { display: inline-flex; gap: 2px; }
.ster svg { width: 14px; height: 14px; fill: #E8A317; }
.rv__aanhaling {
font-family: 'Archivo', sans-serif; font-size: 34px; line-height: .6; font-weight: 700;
color: var(--line-strong); user-select: none;
}
.rv blockquote { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--body); }
.rv figcaption {
margin-top: auto; padding-top: 11px; border-top: 1px solid var(--line);
font-size: 13px; color: var(--faint);
}
.rv figcaption b {
display: block; font-family: 'Archivo', sans-serif; font-weight: 700;
font-size: 14.5px; color: var(--ink); margin-bottom: 1px;
}
@media (prefers-reduced-motion: reduce) {
.rv { animation: none; }
.rv:hover { transform: none; }
}