@charset "utf-8";
/* Işık — richting 9 uit design/tokens-10demos.md.
Eén regel bepaalt alles wat hieronder staat: er is één lichtbron, links
boven, en elke schaduw op de pagina valt dezelfde kant op. Daarom staan de
verschuiving en de vervaging in twee variabelen op :root en rekent elk
element zijn eigen schaduw daaruit uit met een dieptefactor --d. Verzet je
de lichtbron (dat doet isik.js met de muis), dan draait alles tegelijk mee.
Er is nergens een losse box-shadow met eigen richting. Dat is het verschil
tussen een lichte pagina en een lichte pagina die klopt.
Tweede regel: een schaduw is nooit de contour van iets dat je kunt bedienen.
rgba(26,23,19,.14) haalt op #FCFBF7 hooguit 1,25:1 en dat is versiering.
Alles wat bediend wordt heeft daarnaast een echte rand: #A48420 (3,44:1),
#6A6358 (5,73:1) of #1A1713 (17,25:1). _contrast.py rekent ze alle na.
Derde regel: Cormorant Garamond staat nergens onder 40 pixels. Onder die
maat valt hij uit elkaar. Alles kleiner is Jost. */
/* ── lettertypes ─────────────────────────────────────────────────────────── */
@font-face {
font-family: 'Cormorant Garamond';
src: url('/assets/fonts/cormorantgaramond.woff2') format('woff2');
font-weight: 400 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Jost';
src: url('/assets/fonts/jost.woff2') format('woff2');
font-weight: 300 600;
font-style: normal;
font-display: swap;
}
/* ── tokens ──────────────────────────────────────────────────────────────── */
:root {
--grond: #FCFBF7;
--vlak: #F1ECE1;
--tekst: #1A1713; /* 17,25:1 op grond */
--gedempt: #6A6358; /* 5,73:1 op grond */
--goud: #C9A227; /* 2,34:1, uitsluitend decoratief */
--goud-lijn: #A48420; /* 3,44:1 op grond, 3,02:1 op vlak */
--goud-tekst: #816819; /* 5,16:1 op grond, 4,54:1 op vlak */
--knop-vlak: #1A1713;
--knop-tekst: #FCFBF7;
--focus: #816819;
--fout: #96201C; /* 7,84:1 op grond */
--zegel: #1A1713;
--inkt: 26, 23, 19; /* de schaduwkleur, als kanalen */
--sx: 9px; /* lichtbron links boven: schaduw naar rechtsonder */
--sy: 13px;
--d: 1; /* dieptefactor, per element overschreven */
--kop: 'Cormorant Garamond', Garamond, 'Times New Roman', serif;
--tekst-font: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
--kop-gewicht: 500;
--radius: 0;
--kolom: 46ch;
--breed: 72rem;
--rand: clamp(20px, 5vw, 48px);
--maat: 8px;
--zegel-maat: 132px;
--veer: cubic-bezier(.16, 1, .3, 1);
--duur: .9s;
--perspectief: 1300px;
--nav-ruimte: 22ch;
}
/* De twee schaduwlagen. Beide leiden hun richting af uit dezelfde lichtbron.
De eerste is de contactschaduw (kort, dichtbij), de tweede de slagschaduw. */
:root {
--sch:
calc(var(--sx) * .3 * var(--d)) calc(var(--sy) * .3 * var(--d))
calc(var(--sy) * .8 * var(--d)) calc(var(--sy) * -.25 * var(--d))
rgba(var(--inkt), .16),
calc(var(--sx) * var(--d)) calc(var(--sy) * var(--d))
calc(var(--sy) * 2.8 * var(--d)) calc(var(--sy) * -.5 * var(--d))
rgba(var(--inkt), .14);
}
/* ── grondslag ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
/* clip en niet hidden: hidden maakt van een scrollhouder en dan werkt
position: sticky op de kopbalk niet meer. */
overflow-x: clip;
}
body {
margin: 0;
background: var(--grond);
color: var(--tekst);
font-family: var(--tekst-font);
font-size: 17px;
font-weight: 350;
line-height: 1.72;
letter-spacing: .002em;
-webkit-font-smoothing: antialiased;
overflow-x: clip;
}
::selection { background: #E8DFC2; color: var(--tekst); }
h1, h2, h3, h4 { margin: 0; font-weight: var(--kop-gewicht); }
/* Cormorant alleen groot: nergens onder 40 pixels, ook niet in de voettekst,
niet in de taalkolom en niet in het cijferblok op een telefoon. Alles wat
kleiner moet is Jost. _meet.py letter telt het na op drie breedtes maal vijf
talen maal zes pagina's. */
h1, h2, .groot {
font-family: var(--kop);
line-height: 1.02;
letter-spacing: -.014em;
text-wrap: balance;
}
h1 { font-size: clamp(42px, 5.6vw, 76px); }
h2 { font-size: clamp(40px, 4.6vw, 58px); }
h3 { font-family: var(--tekst-font); font-size: 20px; font-weight: 500; line-height: 1.35; letter-spacing: .004em; }
h4 { font-family: var(--tekst-font); font-size: 15px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; }
p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 3px;
}
.vw {
position: absolute; width: 1px; height: 1px;
margin: -1px; padding: 0; border: 0;
clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.overslaan {
position: absolute; left: var(--rand); top: -100px; z-index: 90;
background: var(--tekst); color: var(--grond);
padding: 12px 20px; font-size: 15px; letter-spacing: .04em;
transition: top .2s var(--veer);
}
.overslaan:focus-visible { top: 12px; }
/* Lopende tekst mag afbreken, koppen nooit. Zonder de grens breekt Chrome
"zon-der" af en dat is lelijker dan een korte regel. */
p, dd, li { hyphens: auto; hyphenate-limit-chars: 9 4 4; }
h1, h2, h3, h4, .knop, .tag, .nummer { hyphens: none; }
/* ── maatvoering ─────────────────────────────────────────────────────────── */
.kolom {
width: min(var(--kolom), 100% - var(--rand) * 2);
margin-inline: auto;
}
.breed {
width: min(var(--breed), 100% - var(--rand) * 2);
margin-inline: auto;
}
/* De sectiemaat: één ritme voor de hele site, veelvoud van 8. */
.sectie { padding-block: clamp(72px, 9vw, 144px); }
.sectie + .sectie { padding-top: 0; }
/* De haarlijn tussen twee secties is precies zo breed als de kolom en staat
altijd op dezelfde plek. Dat is de enige structuur die deze pagina heeft. */
.sectie::before {
content: "";
display: block;
width: min(var(--kolom), 100% - var(--rand) * 2);
height: 1px;
margin: 0 auto clamp(56px, 7vw, 104px);
/* Geen opacity op deze lijn. Met opacity .5 wordt #A48420 op de grond
effectief #D0C5A6 en dat is 1,85:1; de lijn haalt de 3:1 dan niet meer,
terwijl _contrast.py wel 3,44 zou melden omdat hij de hex naleest en niet
de doorzichtigheid. Elke haarlijn op deze pagina staat op volle sterkte. */
background: var(--goud-lijn);
}
.sectie--eerste::before, .hero::before { content: none; }
.nummer {
display: block;
margin: 0 0 20px;
font-size: 13px;
font-weight: 500;
letter-spacing: .34em;
text-transform: uppercase;
color: var(--goud-tekst);
font-variant-numeric: tabular-nums;
}
.tag {
margin: 0 0 20px;
font-size: 13px;
font-weight: 500;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--gedempt);
}
.lead {
font-size: clamp(19px, 2vw, 21px);
line-height: 1.62;
color: var(--tekst);
margin-bottom: 0;
}
.klein { font-size: 15px; color: var(--gedempt); }
.noot { font-size: 15px; color: var(--gedempt); }
.kop-groep { margin-bottom: clamp(28px, 3.4vw, 44px); }
.kop-groep + .lead { margin-bottom: clamp(28px, 3.4vw, 44px); }
h1 + .lead, h2 + .lead { margin-top: clamp(18px, 2vw, 26px); }
.lead + .knoppen { margin-top: clamp(28px, 3.2vw, 40px); }
.lead + .demo-noot { margin-top: clamp(24px, 3vw, 34px); }
/* De pagina is gecentreerd: dat is het verschil met de negen andere. */
.mid { text-align: center; }
.mid .knoppen { justify-content: center; }
/* ── kopbalk ─────────────────────────────────────────────────────────────── */
.kopbalk-houder {
position: sticky;
top: 0;
z-index: 60;
background: rgba(252, 251, 247, .92);
backdrop-filter: saturate(140%) blur(10px);
border-bottom: 1px solid rgba(var(--inkt), .07);
}
.kopbalk {
width: min(calc(var(--breed) + 8rem), 100% - var(--rand) * 2);
margin-inline: auto;
min-height: 72px;
display: flex;
align-items: center;
gap: clamp(12px, 2vw, 28px);
}
.merk { display: block; flex: none; line-height: 0; }
.merk img { width: 132px; height: 56px; object-fit: contain; }
.hoofdnav { margin-left: auto; }
/* Let op de ul in deze selectors. De zakelijke ingang staat óók in .hoofdnav,
in .menu-onder, en die is geen menu-item. Met een kale .hoofdnav a erfde hij
display:block, een andere padding en border-bottom:2px solid transparent,
waardoor zijn onderrand op smalle schermen wegviel. Dat zie je op geen
enkele meting; alleen op de schermafdruk. */
.hoofdnav ul {
list-style: none; margin: 0; padding: 0;
display: flex; align-items: center; gap: clamp(10px, 1.6vw, 26px);
}
.hoofdnav ul a {
display: block;
max-width: var(--nav-ruimte);
padding: 8px 2px;
font-size: 15px;
letter-spacing: .02em;
text-decoration: none;
border-bottom: 2px solid transparent;
transition: border-color .3s var(--veer), color .3s var(--veer);
}
.hoofdnav ul a:hover { border-bottom-color: var(--goud-lijn); }
.hoofdnav ul a[aria-current="page"] {
border-bottom-color: var(--tekst);
font-weight: 500;
}
.zakelijk-knop {
/* inline-flex en niet inline: in de kopbalk is dit een flexitem en dan gaat
het vanzelf goed, maar in het uitgeklapte menu staat hij in een gewone div
en telt de padding van een inline element niet mee in de hoogte. De rand
viel daar onder de rand van de kopbalk weg. Dezelfde soort fout als de
onzichtbare fotostroken in demo 4. */
display: inline-flex;
align-items: center;
flex: none;
max-width: var(--nav-ruimte);
padding: 9px 18px;
font-size: 15px;
letter-spacing: .02em;
text-decoration: none;
border: 1px solid var(--tekst); /* 17,25:1, geen schaduw als contour */
color: var(--tekst);
background: transparent;
transition: background-color .3s var(--veer), color .3s var(--veer);
}
.zakelijk-knop:hover { background: var(--tekst); color: var(--grond); }
.menu-onder { display: none; }
.talen ul {
list-style: none; margin: 0; padding: 0;
display: flex; gap: 2px;
}
.talen a {
display: block;
padding: 8px 7px;
font-size: 13px;
font-weight: 500;
letter-spacing: .1em;
text-decoration: none;
color: var(--gedempt); /* 5,73:1 */
border-bottom: 2px solid transparent;
transition: color .3s var(--veer), border-color .3s var(--veer);
}
.talen a:hover { color: var(--tekst); border-bottom-color: var(--goud-lijn); }
.talen a[aria-current="true"] {
color: var(--tekst);
border-bottom-color: var(--tekst); /* ook zonder kleur te zien */
}
.menuknop {
display: none;
flex: none;
width: 44px; height: 44px;
padding: 0;
background: transparent;
border: 1px solid var(--tekst);
color: var(--tekst);
cursor: pointer;
}
.menuknop .ico { width: 20px; height: 20px; margin: auto; }
.menuknop .ico-kruis { display: none; }
.menuknop[aria-expanded="true"] .ico-menu { display: none; }
.menuknop[aria-expanded="true"] .ico-kruis { display: block; }
/* ── mededeling: in de gewone stroom, nooit zwevend ──────────────────────── */
.melding {
background: var(--vlak);
border-bottom: 1px solid rgba(var(--inkt), .08);
}
.melding-binnen {
width: min(calc(var(--breed) + 8rem), 100% - var(--rand) * 2);
margin-inline: auto;
display: flex; align-items: center; gap: 16px;
padding: 11px 0;
}
.melding p { margin: 0; font-size: 14px; color: var(--gedempt); }
.melding button {
flex: none; margin-left: auto;
width: 34px; height: 34px; padding: 0;
display: grid; place-items: center;
background: transparent;
border: 1px solid var(--gedempt); /* 5,73:1, echte contour */
color: var(--tekst);
cursor: pointer;
}
.melding button .ico { width: 15px; height: 15px; }
.melding-weg .melding { display: none; }
/* ── knoppen ─────────────────────────────────────────────────────────────── */
.knoppen {
display: flex; flex-wrap: wrap; gap: 12px;
margin-top: clamp(28px, 3.2vw, 40px);
}
.knop {
--d: .8;
display: inline-flex; align-items: center; gap: 10px;
min-height: 48px;
padding: 12px 26px;
font-family: var(--tekst-font);
font-size: 15px;
font-weight: 500;
letter-spacing: .04em;
text-decoration: none;
border: 1px solid var(--tekst);
cursor: pointer;
transition: transform .4s var(--veer), box-shadow .4s var(--veer),
background-color .3s var(--veer), color .3s var(--veer);
}
.knop .ico { width: 17px; height: 17px; flex: none; }
.knop-vol { background: var(--knop-vlak); color: var(--knop-tekst); }
.knop-lijn { background: transparent; color: var(--tekst); }
.knop:hover { box-shadow: var(--sch); transform: translate3d(0, -2px, 0); }
.knop-lijn:hover { background: var(--vlak); }
/* ── de zwevers: schaduw als enige inkt ──────────────────────────────────── */
.zweef {
position: absolute; inset: 0;
perspective: var(--perspectief);
pointer-events: none;
z-index: 0;
}
/* De schaduw staat op de ![]()
en de verplaatsing op de eromheen.
Dat lijkt een detail en het is het verschil tussen 43 en 60 beelden per
seconde, gemeten met _meet.py fps op 1440 pixels. Staan filter en transform
op hetzelfde element, dan hertekent Chrome de vervaging bij elke verschuiving
opnieuw. Gescheiden krijgt de houder een eigen laag die de grafische kaart
verschuift, terwijl de vervaging blijft staan. */
.vel {
position: absolute;
width: var(--b);
transform: translate3d(0, 0, 0) rotate(var(--r, 0deg));
transition: transform .9s var(--veer);
will-change: transform;
}
.vel img {
width: 100%;
height: auto;
filter:
drop-shadow(calc(var(--sx) * .35 * var(--d)) calc(var(--sy) * .35 * var(--d))
calc(var(--sy) * .7 * var(--d)) rgba(var(--inkt), .20))
drop-shadow(calc(var(--sx) * 1.15 * var(--d)) calc(var(--sy) * 1.15 * var(--d))
calc(var(--sy) * 2.4 * var(--d)) rgba(var(--inkt), .12));
/* Geen transition op filter. Ook als de waarde niet verandert houdt Chrome
zo'n element op het trage pad en zakt het scrollen van 60 naar 43 beelden
per seconde. De vloeiendheid komt van de lerp in isik.js en niet van CSS. */
}
/* De vier posities. Niet in vw geprikt maar afgeleid van de vrije marge naast
de tekstkolom, zodat een zwever per definitie niet ónder tekst kan komen.
Met vaste vw-waarden liep het op 900 en 1024 pixels mis: daar was de marge
smaller dan de zwever en lag de kop op een foto. Dat is de fout uit demo 3,
en die is hier met een formule uitgesloten in plaats van met een oogmaat.
--vrij is de breedte van één marge. Een linkerzwever krijgt zijn rechterrand
op de linkerrand van de kolom, een rechterzwever zijn linkerrand op de
rechterrand. Wat er dan buiten het scherm valt, valt buiten het scherm. */
/* Twee dingen maken een zwever breder dan zijn eigen breedte, en allebei zijn
ze bij de eerste meting misgegaan.
1. De draaiing. Een vierkant van b pixels dat θ graden gedraaid staat heeft
een omhullende van b·(cos θ + sin θ). Bij 14 graden is dat 21 procent
extra, dus ruim 20 pixels die je in de opmaak niet ziet staan. --rot is
per zwever de halve aangroei als factor van b, met de hand uitgerekend
omdat CSS geen sinus kent.
2. De parallax. isik.js verschuift ten hoogste 11 pixels maal de diepte.
--marge dekt de parallax, --rot de draaiing, en --b wordt afgetopt op wat er
na allebei nog in de vrije marge past. Zo kan een zwever per definitie niet
onder de tekstkolom komen, op geen enkele breedte en in geen enkele taal. */
.vel {
--rot: .06;
--marge: 30px; /* 14 px parallax (MAXVER in isik.js) plus 16 px lucht */
--b: min(var(--wens), var(--cap),
max(0px, calc((var(--vrij) - var(--marge) - var(--taal-ruimte, 0px))
/ (1 + var(--rot) * 2))));
}
.vel--1 { --wens: 30vw; --cap: 320px; --rot: .058; --d: .55; --r: -7deg;
--taal-ruimte: 0px;
right: calc(100% - var(--vrij) + var(--marge) + var(--b) * var(--rot)); top: 6%; }
.vel--2 { --wens: 23vw; --cap: 250px; --rot: .086; --d: 1.4; --r: 11deg;
left: calc(100% - var(--vrij) + var(--marge) + var(--b) * var(--rot)); top: 0; }
.vel--3 { --wens: 26vw; --cap: 290px; --rot: .042; --d: .95; --r: 5deg;
--taal-ruimte: 0px;
right: calc(100% - var(--vrij) + var(--marge) + var(--b) * var(--rot)); bottom: 4%; }
.vel--4 { --wens: 20vw; --cap: 215px; --rot: .106; --d: 1.9; --r: -14deg;
left: calc(100% - var(--vrij) + var(--marge) + var(--b) * var(--rot)); bottom: 9%; }
/* ── hero ────────────────────────────────────────────────────────────────── */
.hero {
position: relative;
padding-block: clamp(40px, 4.6vw, 68px) clamp(64px, 8vw, 120px);
overflow: hidden;
/* Dezelfde formule als .hero-kolom hieronder. Eén plek, twee gebruikers. */
--kolom-breed: min(52ch, 100% - var(--rand) * 2);
--vrij: calc((100% - var(--kolom-breed)) / 2);
--taal-ruimte: 0px;
}
.hero-kolom {
position: relative;
z-index: 1;
width: min(52ch, 100% - var(--rand) * 2);
margin-inline: auto;
text-align: center;
}
/* Het zegel: het enige donkere vlak op de hele pagina, en daarmee vanzelf
het merkanker. logo-wit.png haalt 1,04:1 op de grond en kan alleen hier. */
.zegel {
width: var(--zegel-maat);
height: var(--zegel-maat);
margin: 0 auto clamp(22px, 2.6vw, 32px);
border-radius: 50%;
background: var(--zegel);
display: grid;
place-items: center;
box-shadow: var(--sch);
--d: 1.6;
}
.zegel img { width: 88px; height: 37px; object-fit: contain; }
.hero h1 { margin-bottom: 20px; }
.hero h1 em { font-style: italic; color: var(--tekst); }
.hero .lead { color: var(--gedempt); }
.hero .knoppen { justify-content: center; }
.licht-noot {
margin: clamp(28px, 3.4vw, 40px) 0 0;
font-size: 13px;
letter-spacing: .09em;
color: var(--gedempt);
display: none;
}
@media (hover: hover) and (pointer: fine) {
.licht-noot { display: block; }
}
/* De vijf talen als vijf woorden in de compositie, rechts van de hero.
Alleen op breed; op smal blijft de kleine wissel in de kopbalk over. */
.hero-talen { display: none; }
@media (min-width: 1180px) {
/* De taalkolom staat in de rechtermarge. De rechterzwevers mogen daar dus
niet meer helemaal doorheen: hun breedte wordt afgetopt op wat er naast
de taalkolom nog vrij is. */
.hero { --taal-ruimte: 220px; }
.hero-talen {
display: block;
position: absolute;
right: clamp(24px, 4vw, 72px);
top: 50%;
transform: translateY(-50%);
z-index: 2;
}
.hero-talen ul { list-style: none; margin: 0; padding: 0; }
.hero-talen li + li { margin-top: 6px; }
.hero-talen a {
display: inline-block;
font-family: var(--kop);
font-size: 40px;
line-height: 1.15;
text-decoration: none;
color: var(--gedempt); /* 5,73:1 */
border-bottom: 2px solid transparent;
transition: color .35s var(--veer), border-color .35s var(--veer);
}
.hero-talen a:hover { color: var(--tekst); border-bottom-color: var(--goud-lijn); }
.hero-talen a[aria-current="true"] {
color: var(--tekst); /* 17,25:1 */
border-bottom-color: var(--goud-lijn); /* 3,44:1 */
}
}
/* ── de drie cijfers in de hero ──────────────────────────────────────────── */
.hero-feiten {
list-style: none;
margin: clamp(32px, 3.6vw, 46px) 0 0;
padding: 0;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 0;
}
.hero-feiten li {
padding: 0 clamp(16px, 2.4vw, 30px);
border-left: 1px solid var(--goud-lijn);
text-align: left;
}
.hero-feiten li:first-child { border-left: 0; padding-left: 0; }
.hero-feiten span {
display: block;
font-size: 12px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--gedempt);
}
.hero-feiten b {
display: block;
font-family: var(--kop);
font-size: clamp(40px, 3vw, 42px);
font-weight: 500;
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
/* ── producten als regels op een gouden haarlijn ─────────────────────────── */
.lijst { list-style: none; margin: 0; padding: 0; }
.regel {
--d: 1;
border-bottom: 1px solid var(--goud-lijn); /* 3,44:1, betekenisdragend */
background: transparent;
transition: background-color .4s var(--veer), box-shadow .4s var(--veer);
}
.lijst > li:first-child .regel { border-top: 1px solid var(--goud-lijn); }
.regel > summary {
list-style: none;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: clamp(14px, 2vw, 26px);
padding: clamp(20px, 2.6vw, 30px) clamp(10px, 1.6vw, 18px);
cursor: pointer;
text-align: left;
}
.regel > summary::-webkit-details-marker { display: none; }
.regel:hover, .regel[open] { background: var(--vlak); box-shadow: var(--sch); }
.regel-vel {
width: 58px; height: 58px; flex: none;
--d: 1.1;
filter: drop-shadow(calc(var(--sx) * .3) calc(var(--sy) * .3)
calc(var(--sy) * .55) rgba(var(--inkt), .22));
transition: transform .5s var(--veer);
}
.regel:hover .regel-vel, .regel[open] .regel-vel { transform: translate3d(0, -2px, 0) rotate(-6deg); }
.regel-naam { display: block; font-size: 21px; font-weight: 500; line-height: 1.25; }
.regel-kort { display: block; font-size: 15px; color: var(--gedempt); margin-top: 3px; }
.regel-rechts { display: flex; align-items: center; gap: 16px; }
.regel-prijs {
font-family: var(--kop);
font-size: 40px;
line-height: 1;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.regel-per { display: block; font-family: var(--tekst-font); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gedempt); }
.plus {
position: relative; flex: none;
width: 34px; height: 34px;
border: 1px solid var(--goud-lijn); /* 3,44:1: dit is de bediening */
border-radius: 50%;
transition: transform .5s var(--veer), background-color .3s var(--veer);
}
.plus::before, .plus::after {
content: ""; position: absolute; left: 50%; top: 50%;
background: var(--tekst);
transform: translate(-50%, -50%);
}
.plus::before { width: 13px; height: 1px; }
.plus::after { width: 1px; height: 13px; transition: transform .4s var(--veer); }
.regel[open] .plus::after { transform: translate(-50%, -50%) scaleY(0); }
.regel:hover .plus { background: var(--grond); }
.regel-uit {
display: grid;
gap: clamp(24px, 3vw, 40px);
padding: 0 clamp(10px, 1.6vw, 18px) clamp(28px, 3.2vw, 38px);
text-align: left;
}
@media (min-width: 720px) { .regel-uit { grid-template-columns: 1fr 1fr; } }
.regel-uit h3 { margin-bottom: 10px; }
.regel-uit p { font-size: 15px; color: var(--gedempt); }
.mini { margin: 14px 0 0; display: grid; gap: 6px; font-size: 14px; }
.mini > div { display: flex; gap: 10px; border-top: 1px solid rgba(var(--inkt), .10); padding-top: 6px; }
.mini dt { color: var(--gedempt); min-width: 12ch; }
.mini dd { margin: 0; }
/* ── platen: elke foto op dezelfde passe-partout, dezelfde schaduw ───────── */
.platen {
display: grid;
gap: clamp(24px, 3vw, 40px);
grid-template-columns: 1fr;
}
@media (min-width: 760px) { .platen { grid-template-columns: repeat(3, 1fr); } }
.plaat {
--d: 1.15;
margin: 0;
background: var(--vlak);
padding: clamp(10px, 1.2vw, 14px);
box-shadow: var(--sch);
transition: transform .6s var(--veer), box-shadow .6s var(--veer);
}
.plaat img { width: 100%; height: auto; }
.plaat figcaption {
padding: 14px 2px 2px;
font-size: 14px;
color: var(--gedempt);
text-align: center;
}
.plaat figcaption b {
display: block;
font-size: 16px;
font-weight: 500;
color: var(--tekst);
margin-bottom: 2px;
}
@media (hover: hover) {
.plaat:hover { --d: 1.7; transform: translate3d(0, -4px, 0); }
}
.plaat--staand { max-width: 420px; margin-inline: auto; }
/* Een eerlijke plaatshouder waar een foto ontbreekt. Nooit een verzonnen beeld. */
.wacht {
--d: .7;
background: var(--vlak);
border: 1px dashed var(--goud-lijn); /* 3,44:1 */
display: grid;
place-items: center;
aspect-ratio: 4 / 5;
padding: clamp(20px, 3vw, 34px);
text-align: center;
box-shadow: var(--sch);
}
.wacht p { margin: 0; font-size: 14px; color: var(--gedempt); }
.wacht b {
display: block;
font-size: 13px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--goud-tekst); /* 4,54:1 op het vlak */
margin-bottom: 10px;
}
/* ── duo: tekst met een plaat ernaast ────────────────────────────────────── */
/* De duo's stonden eerst naast elkaar met de tekst links. Dat leverde een
gecentreerd sectienummer boven een links uitgelijnd blok op, en juist in een
richting die het van precisie moet hebben is zo'n dubbele uitlijning het
eerste wat "onaf" oogt. Alles wat lopende tekst is staat nu gecentreerd in
dezelfde kolom als de rest; alleen tabellen, lijsten en specificaties zijn
links uitgelijnd, want daar is uitlijning functioneel. */
.duo {
display: grid;
gap: clamp(28px, 3.4vw, 48px);
justify-items: center;
text-align: center;
}
.duo-tekst { width: min(var(--kolom), 100%); }
.duo-tekst h2 { margin-bottom: 20px; }
.duo-tekst p { color: var(--gedempt); }
.duo-tekst .knoppen { justify-content: center; }
.duo-beeld { max-width: 420px; width: 100%; }
.duo--links .duo-tekst { order: 2; }
.duo--links .duo-beeld { order: 1; }
/* ── punten, cijfers, klanten ────────────────────────────────────────────── */
.punten, .cijfers-lijst, .klantlijst, .geglijst, .og-lijst, .receptlijst {
list-style: none; margin: 0; padding: 0;
}
.punten { display: grid; gap: clamp(24px, 3vw, 36px); text-align: left; }
@media (min-width: 760px) { .punten { grid-template-columns: repeat(3, 1fr); } }
.punt { border-top: 1px solid var(--goud-lijn); padding-top: 18px; }
.punt-nr {
display: block; margin-bottom: 10px;
font-size: 13px; font-weight: 500; letter-spacing: .3em;
color: var(--goud-tekst);
font-variant-numeric: tabular-nums;
}
.punt h3 { margin-bottom: 8px; }
.punt p { font-size: 15px; color: var(--gedempt); margin: 0; }
.cijfers-lijst { display: grid; gap: clamp(20px, 2.6vw, 32px); text-align: left; }
@media (min-width: 620px) { .cijfers-lijst { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .cijfers-lijst { grid-template-columns: repeat(4, 1fr); } }
.cijfer { border-top: 1px solid var(--goud-lijn); padding-top: 16px; }
.cijfer-getal {
display: block;
font-family: var(--kop);
font-size: clamp(42px, 4.6vw, 56px);
line-height: 1.05;
font-variant-numeric: tabular-nums;
}
.cijfer-uitleg { display: block; font-size: 15px; color: var(--gedempt); margin-top: 4px; }
.klantlijst { display: grid; gap: 0; text-align: left; }
.klant, .klant-rest {
border-bottom: 1px solid rgba(var(--inkt), .10);
padding: 14px 0;
display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline;
}
.klant:first-child { border-top: 1px solid rgba(var(--inkt), .10); }
.klant-naam { font-size: 18px; font-weight: 500; }
.klant-soort { font-size: 14px; color: var(--gedempt); margin-left: auto; }
.klant-rest { font-size: 15px; color: var(--gedempt); border-bottom: 0; }
/* ── de splitsing, helemaal onderaan ─────────────────────────────────────── */
.splitsing {
display: grid;
gap: clamp(28px, 3.4vw, 48px);
text-align: left;
}
@media (min-width: 820px) { .splitsing { grid-template-columns: 1fr 1fr; } }
.splits-kolom {
--d: 1;
background: var(--vlak);
padding: clamp(28px, 3.4vw, 44px);
box-shadow: var(--sch);
display: flex;
flex-direction: column;
}
.splits-kolom h3 { font-size: 24px; margin-bottom: 12px; }
.splits-kolom p { font-size: 15px; color: var(--gedempt); }
.splits-kolom .knoppen { margin-top: auto; padding-top: 20px; }
/* ── slot ────────────────────────────────────────────────────────────────── */
.slot-kader {
--d: 1.4;
background: var(--vlak);
padding: clamp(40px, 6vw, 80px) clamp(24px, 4vw, 56px);
box-shadow: var(--sch);
text-align: center;
}
.slot-kader h2 { margin-bottom: 16px; }
.slot-kader p { color: var(--gedempt); margin-bottom: 0; }
/* ── open punten ─────────────────────────────────────────────────────────── */
.og-lijst { display: grid; text-align: left; }
.og {
display: grid;
grid-template-columns: 20px 1fr;
gap: 6px 14px;
padding: 13px 0;
border-bottom: 1px solid rgba(var(--inkt), .10);
font-size: 15px;
}
.og:first-child { border-top: 1px solid rgba(var(--inkt), .10); }
@media (min-width: 720px) { .og { grid-template-columns: 20px 22ch 1fr; } }
.og .ico { width: 17px; height: 17px; margin-top: 5px; color: var(--goud-tekst); }
.og-veld { font-weight: 500; }
.og-waarde { color: var(--gedempt); }
.open-punt {
display: inline-block;
border-bottom: 1px dashed var(--goud-lijn);
color: var(--goud-tekst); /* 5,16:1 */
font-size: 14px;
letter-spacing: .04em;
}
.open-noot { display: block; font-size: 14px; margin-top: 3px; }
.spec-uitleg { margin-top: 18px; font-size: 14px; color: var(--gedempt); }
/* ── specificatieblad ────────────────────────────────────────────────────── */
.spec { margin: 0; text-align: left; }
.spec-rij {
display: grid;
gap: 2px 20px;
padding: 13px 0;
border-bottom: 1px solid rgba(var(--inkt), .10);
}
.spec-rij:first-child { border-top: 1px solid rgba(var(--inkt), .10); }
@media (min-width: 620px) { .spec-rij { grid-template-columns: 24ch 1fr; } }
.spec dt { font-size: 15px; font-weight: 500; }
.spec dd { margin: 0; font-size: 15px; color: var(--gedempt); }
.prijs-regel {
font-family: var(--kop);
font-size: clamp(44px, 5vw, 60px);
line-height: 1;
margin: 24px 0 0;
font-variant-numeric: tabular-nums;
}
.prijs-regel span {
display: block;
font-family: var(--tekst-font);
font-size: 12px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--gedempt);
margin-top: 6px;
}
/* ── kruimelpad ──────────────────────────────────────────────────────────── */
.kruimels { padding-top: 22px; }
.kruimels ol {
list-style: none; margin: 0; padding: 0;
display: flex; flex-wrap: wrap; gap: 8px;
font-size: 13px; color: var(--gedempt);
justify-content: center;
}
.kruimels li + li::before { content: "/"; margin-right: 8px; color: var(--goud-tekst); }
.kruimels a { text-decoration: none; border-bottom: 1px solid transparent; }
.kruimels a:hover { border-bottom-color: var(--goud-lijn); }
/* ── recepten ────────────────────────────────────────────────────────────── */
.recept-regel { border-bottom: 1px solid var(--goud-lijn); }
.receptlijst > li:first-child .recept-regel { border-top: 1px solid var(--goud-lijn); }
.recept-regel > summary {
list-style: none;
display: grid;
grid-template-columns: auto 1fr auto auto;
align-items: center;
gap: 16px;
padding: 20px 8px;
cursor: pointer;
text-align: left;
}
.recept-regel > summary::-webkit-details-marker { display: none; }
.recept-regel:hover, .recept-regel[open] { background: var(--vlak); }
.recept-regel:hover .plus { background: var(--grond); }
.recept-regel[open] .plus::after { transform: translate(-50%, -50%) scaleY(0); }
.recept-regel h3 { margin: 0; }
.recept-meta { font-size: 14px; color: var(--gedempt); }
.recept-uit {
display: grid; gap: clamp(20px, 2.6vw, 34px);
padding: 0 8px 30px;
text-align: left;
}
@media (min-width: 760px) { .recept-uit { grid-template-columns: 1fr 1fr; } .recept-kort { grid-column: 1 / -1; } }
.recept-kort { color: var(--gedempt); font-size: 15px; }
.recept-ing, .recept-stap { margin: 10px 0 0; padding-left: 1.15em; font-size: 15px; }
.recept-ing li, .recept-stap li { margin-bottom: 6px; }
/* ── gegevens ────────────────────────────────────────────────────────────── */
.geglijst { display: grid; gap: 0; text-align: left; }
.geg { border-bottom: 1px solid rgba(var(--inkt), .10); }
.geg:first-child { border-top: 1px solid rgba(var(--inkt), .10); }
.geg a {
display: flex; align-items: center; gap: 16px;
padding: 16px 4px;
text-decoration: none;
transition: background-color .3s var(--veer);
}
.geg a:hover { background: var(--vlak); }
.geg .ico { width: 19px; height: 19px; flex: none; color: var(--goud-tekst); }
.geg-kop { display: block; font-size: 17px; font-weight: 500; }
.geg-onder { display: block; font-size: 14px; color: var(--gedempt); }
.geg a > .ico:last-child { margin-left: auto; }
/* ── formulier ───────────────────────────────────────────────────────────── */
/* Het formulier ligt op een vlak met dezelfde schaduw als elke andere plaat.
Zonder dat vlak heeft de contactpagina geen enkele schaduw, en op een pagina
waar schaduw de enige inkt is ziet zo'n pagina er onaf uit. Gemeten met
_meet.py licht: contact had nul schaduwlagen, nu vier. */
.formulier {
--d: 1.1;
text-align: left;
display: grid;
gap: 18px;
background: var(--vlak);
padding: clamp(24px, 3.2vw, 40px);
box-shadow: var(--sch);
}
.veld { display: grid; gap: 6px; }
.veld label, .veld legend { font-size: 14px; font-weight: 500; letter-spacing: .03em; }
.hint { font-weight: 350; color: var(--gedempt); }
.formulier input[type="text"],
.formulier input[type="email"],
.formulier input[type="tel"],
.formulier select,
.formulier textarea {
font: inherit;
font-size: 16px;
width: 100%;
padding: 11px 13px;
color: var(--tekst);
background: var(--grond);
border: 1px solid var(--gedempt); /* 5,73:1: de contour is echt */
border-radius: 0;
}
.formulier textarea { resize: vertical; }
.formulier input:focus-visible,
.formulier select:focus-visible,
.formulier textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.formulier fieldset { margin: 0; padding: 0; border: 0; }
.radio, .akkoord { display: flex; gap: 10px; align-items: flex-start; font-weight: 350; font-size: 15px; }
.veld--keuze fieldset { display: grid; gap: 8px; }
.fout { margin: 0; font-size: 14px; color: var(--fout); }
.fout[hidden] { display: none; }
.status { margin: 10px 0 0; font-size: 14px; color: var(--gedempt); }
.demo-noot {
font-size: 14px;
color: var(--gedempt);
border-left: 2px solid var(--goud-lijn);
padding-left: 14px;
margin-bottom: 24px;
text-align: left;
}
.veld--knop { margin-top: 4px; }
.plat-sectie { text-align: left; margin-bottom: clamp(32px, 4vw, 52px); }
.plat-sectie h2 { margin-bottom: 14px; }
.plat-sectie p { color: var(--gedempt); }
.eerlijk-tekst { text-align: left; color: var(--gedempt); }
/* ── voettekst ───────────────────────────────────────────────────────────── */
.voet {
margin-top: clamp(72px, 9vw, 144px);
border-top: 1px solid var(--goud-lijn);
padding-block: clamp(48px, 6vw, 80px) 32px;
background: var(--vlak);
}
.voet-binnen {
width: min(var(--breed), 100% - var(--rand) * 2);
margin-inline: auto;
display: grid;
gap: clamp(32px, 4vw, 56px);
text-align: left;
}
@media (min-width: 820px) { .voet-binnen { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.voet-merk img { width: 148px; height: 63px; object-fit: contain; }
.spreuk { font-family: var(--kop); font-size: 40px; line-height: 1.1; margin: 16px 0 0; color: var(--gedempt); }
.voet-sociaal { display: flex; gap: 10px; margin-top: 18px; }
.voet-sociaal a {
width: 40px; height: 40px;
display: grid; place-items: center;
border: 1px solid var(--gedempt); /* 5,04:1 op het vlak */
color: var(--tekst);
transition: background-color .3s var(--veer);
}
.voet-sociaal a:hover { background: var(--grond); }
.voet-sociaal .ico { width: 18px; height: 18px; }
.voet-kolom h2 {
font-family: var(--tekst-font);
font-size: 13px; font-weight: 500;
letter-spacing: .22em; text-transform: uppercase;
color: var(--goud-tekst); /* 4,54:1 op het vlak */
margin-bottom: 14px;
line-height: 1.4;
}
.voet-kolom ul { list-style: none; margin: 0; padding: 0; }
.voet-kolom li { margin-bottom: 7px; }
.voet-kolom a, .voet-adres a { font-size: 15px; text-decoration: none; border-bottom: 1px solid transparent; }
.voet-kolom a:hover, .voet-adres a:hover { border-bottom-color: var(--goud-lijn); }
.voet-adres p { display: flex; gap: 10px; margin-bottom: 10px; font-size: 15px; }
.voet-adres .ico { width: 17px; height: 17px; flex: none; margin-top: 4px; color: var(--goud-tekst); }
.rustknop {
margin-top: 14px;
display: inline-flex; align-items: center; gap: 9px;
min-height: 40px;
padding: 8px 15px;
font: inherit; font-size: 14px;
background: transparent;
color: var(--tekst);
border: 1px solid var(--gedempt); /* 5,04:1 */
cursor: pointer;
}
.rustknop:hover { background: var(--grond); }
.rustknop .ico { width: 16px; height: 16px; }
.voet-regel {
width: min(var(--breed), 100% - var(--rand) * 2);
margin: clamp(36px, 4vw, 56px) auto 0;
padding-top: 20px;
border-top: 1px solid rgba(var(--inkt), .12);
font-size: 13px;
color: var(--gedempt);
text-align: center;
}
.voet-regel a { text-decoration: underline; text-underline-offset: 3px; }
/* ── onthulling ──────────────────────────────────────────────────────────── */
/* data-rv wordt door isik.js gezet, niet door de generator. Valt het script
weg, dan staat er niets op opacity 0. */
[data-rv] { opacity: 0; transform: translate3d(0, 22px, 0); }
[data-rv].in {
opacity: 1;
transform: none;
transition: opacity var(--duur) var(--veer), transform var(--duur) var(--veer);
transition-delay: var(--vertraging, 0ms);
}
/* ── het menu op smal ────────────────────────────────────────────────────── */
@media (max-width: 899px) {
.menuknop { display: grid; place-items: center; margin-left: auto; }
/* Op 320 px moeten logo, vijf taalcodes en de menuknop samen binnen 280 px
passen. Gemeten, niet geschat: 88 + 120 + 40 + 2 tussenruimtes van 6. */
/* flex-wrap is hier geen sier: zonder wrap doet flex-basis 100% op de
navigatie niets en klapt het menu uit als een smalle kolom naast de
kopbalk in plaats van eronder. Zo stond het er eerst. */
.kopbalk { gap: 6px; min-height: 64px; flex-wrap: wrap; align-items: center; }
.merk img { width: 104px; height: 44px; }
.talen a { padding: 8px 5px; font-size: 12px; letter-spacing: .06em; }
.menuknop { width: 40px; height: 40px; }
.kopbalk > .zakelijk-knop { display: none; }
.menu-onder { display: block; margin-top: 18px; }
.hoofdnav {
order: 9;
flex-basis: 100%;
margin-left: 0;
padding-bottom: 18px;
}
.hoofdnav ul { flex-direction: column; align-items: stretch; gap: 0; }
.hoofdnav li { border-bottom: 1px solid rgba(var(--inkt), .10); }
.hoofdnav ul a { max-width: none; padding: 14px 2px; font-size: 17px; }
.talen { margin-left: auto; }
/* Dichtgeklapt in de stylesheet, achter .js die al in de head staat.
Anders staat het menu open in de server-HTML en springt bij een
tweede bezoek omhoog: dat gaf in demo 4 een CLS van 0,34. */
.js .hoofdnav { display: none; }
.js .hoofdnav.open { display: block; }
}
@media (min-width: 900px) {
.menuknop { display: none; }
}
/* ── smalle schermen ─────────────────────────────────────────────────────── */
@media (max-width: 400px) {
.merk img { width: 88px; height: 37px; }
.talen a { padding: 8px 4px; letter-spacing: .02em; }
}
/* Op smal is de kolom bijna zo breed als het scherm, dus een zwever kan daar
alleen nog áchter tekst liggen. Dat is precies de fout uit demo 3: donkere
tekst op een onrustige ondergrond, terwijl elke geautomatiseerde controle
groen bleef. Daarom staan hier maar drie zwevers, alle drie boven of onder
de tekst en nooit erachter. _overlap.py rekent die overlap na, op zestien
breedtes maal vijf talen maal vijf muisstanden. */
@media (max-width: 899px) {
.hero { padding-bottom: clamp(150px, 24vw, 220px); }
/* Onder 900 pixels is er naast de kolom geen marge meer waar een zwever in
past. Ze gaan daarom niet naast de tekst maar erboven en eronder: twee in
de band van het zegel (dat vlak is ondoorzichtig en ligt er bovenop) en
één in de onderste witruimte. De maten zijn afgetopt op de hoogte van die
twee banden, draaiing en parallax meegerekend. */
.vel--3 { display: none; }
.vel--1 { --wens: 46vw; --cap: 176px; --d: .6; right: auto; left: -17vw; top: -6vw; }
.vel--2 { --wens: 40vw; --cap: 158px; --d: 1.3; left: auto; right: -15vw; top: -8vw; }
.vel--4 { --wens: 34vw; --cap: 140px; --d: 1.8; left: auto; right: -11vw; bottom: -17vw; }
.vel--1, .vel--2, .vel--4 { --b: min(var(--wens), var(--cap)); }
/* De producthero heeft geen zegel en dus geen band erboven waar een zwever
in past. Daar blijft op smal alleen de onderste over. */
.hero--product .vel--1 { display: none; }
/* De zin over de muis hoort niet op een scherm zonder muis. */
.licht-noot { display: none !important; }
}
/* Tussen 760 en 900 is er wél hoogte in de zegelband en in de onderste
witruimte, dus daar mogen de zwevers verder naar binnen. Ze blijven boven de
eyebrow en onder het laatste blok; _overlap.py rekent dat na op elke
breedte, in vijf talen en met de muis in vier hoeken. */
@media (min-width: 760px) and (max-width: 899px) {
.vel--1 { left: -7vw; top: -4vw; }
.vel--2 { right: -6vw; top: -6vw; }
.vel--4 { right: -4vw; bottom: -2vw; }
}
@media (max-width: 719px) {
body { font-size: 16px; }
.regel > summary { grid-template-columns: auto 1fr; row-gap: 12px; }
.regel-rechts { grid-column: 1 / -1; justify-content: space-between; }
.hero-feiten li { border-left: 0; padding: 0 18px 0 0; }
.kruimels ol { justify-content: flex-start; }
}
/* ── beperkte beweging ───────────────────────────────────────────────────── */
/* De klasse .rm wordt in de gezet, vóór de rest van het script, zodat
een pagina nooit op opacity 0 blijft staan. Onder .rm staat de lichtbron
stil op zijn beginstand: alle schaduwen blijven, alleen bewegen ze niet. */
.rm [data-rv] { opacity: 1 !important; transform: none !important; transition: none !important; }
.rm .vel { transition: none !important; }
.rm .knop:hover { transform: none; }
.rm .plaat:hover { transform: none; }
/* De lichtbron staat bij beperkte beweging stil, dus de zin "beweeg de muis"
klopt dan niet meer. Weg ermee. De schaduwen blijven wel staan. */
.rm .licht-noot { display: none; }
.rm html, .rm body { scroll-behavior: auto; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
[data-rv] { opacity: 1 !important; transform: none !important; }
}
@media print {
.kopbalk-houder, .melding, .zweef, .knoppen, .rustknop { display: none; }
body { background: #fff; }
}