/* =========================================================
BOWLING BAR SPARE TIME — Doetinchem
Eén locatie. Drie werelden.
========================================================= */
/* ---------- Vaste merkkleuren (exact) ---------- */
:root {
--lila: #9B8EFF; /* primair accent NACHT */
--blauw: #5CD4F0; /* secundair accent NACHT */
--creme: #F4F0E8; /* achtergrond DAG / tekst NACHT */
--mint: #7EDFD4; /* accent DAG */
/* Donkere varianten van de drie moodboardkleuren. De felle versies zijn als
TEKST onleesbaar op crème (mint 1.4:1, blauw 1.5:1, lila 2.4:1); deze halen
alle drie ~5,4:1 en wegen daardoor even zwaar. */
--mint-diep: #0F6B60; /* 5.6:1 op crème */
--lila-diep: #5F4EC9; /* 5.4:1 op crème */
--blauw-diep: #136B87; /* 5.3:1 op crème */
--zwart: #1C1C1E; /* basis, typografie, achtergrond NACHT */
/* Typografie */
/* Ellograph CF — het merklettertype, via Adobe Fonts (zie de in de
van elke pagina). Er zijn maar drie snitten: 400, 700 en 900.
Gebruik ALLEEN die drie — 500, 600 en 800 bestaan niet, en de browser
maakt dan zelf vet, wat er dik en uitgelopen uitziet.
900 = de grote momenten (hero, band, STRIKE)
700 = sectiekoppen, titels, knoppen
400 = subkoppen, navigatie, labels
De fallback is monospace en geen schreefloze: Ellograph loopt zelf
monospace-achtig, dus zo blijft de bladspiegel kloppen als Typekit hapert. */
--font-display: "ellograph-cf", monospace;
/* Courier New blijft ongemoeid: prijzen, tijden, adressen en metadata. */
--font-mono: 'Courier New', Courier, monospace;
/* Maatvoering */
/* Formaat van één menukaartpagina in bronpixels. Staat hier en niet in .fb,
omdat de zoomlaag buiten .fb hangt en dezelfde verhouding nodig heeft.
script.js zet ze bij het opbouwen op de échte maat van de eerste pagina,
zodat een menukaart met een ander formaat uit Storyblok niet uitgerekt
wordt. Deze waarden zijn de huidige gedrukte kaart (140 x 297 mm). */
--fb-pw: 1191;
--fb-ph: 2526;
--maxw: 1200px;
/* Hoogte van de sticky navbalk (46px knop + 2×0.9rem padding). Alles wat
eronder moet blijven plakken (zoals het menufilter) rekent hierop. */
--nav-h: 75px;
--gutter: clamp(1.25rem, 5vw, 4rem);
--radius: 18px;
--transition: 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* ---------- Thema: DAGMODUS ----------
crème achtergrond + zwarte tekst + ALLEEN mint als accent. */
html.day {
--bg: var(--creme);
--bg-soft: #ECE6DA;
--text: var(--zwart);
--text-soft: rgba(28, 28, 30, 0.80);
--line: rgba(28, 28, 30, 0.14);
--accent: var(--mint); /* primair */
--accent-text: var(--mint-diep); /* accent ALS TEKST -- leesbaar op crème */
/* Uitlichtkleur: de mint uit het moodboard — dezelfde als de Reserveer-knop.
Let op: op crème haalt deze 1.4:1. Bewuste ontwerpkeuze, geen vergissing. */
--hl: var(--mint);
--accent-2: var(--mint); /* secundair (geen tweede in dag) */
--on-accent: var(--zwart);
--card: #FFFFFF;
--dot-a: var(--zwart);
--dot-b: var(--mint);
/* Op crème valt een crème pin weg, dus in dagmodus staat het lichaam zwart —
dezelfde behandeling als de bal, die overdag ook een zwarte vorm is. De
mintstrepen blijven en dragen de kleur. */
--pin: url('assets/pin-day.svg');
--ball-sm: url('assets/ball-day-sm.webp');
--dot-c: rgba(28, 28, 30, 0.22);
/* Sluier over een foto: houdt tekst en knoppen leesbaar, foto ingetogen. */
--scrim-top: rgba(28, 28, 30, 0.42);
--scrim-bot: rgba(28, 28, 30, 0.78);
}
/* ---------- Thema: NACHTMODUS ----------
zwarte achtergrond + crème tekst + LILA (primair) en BLAUW (secundair). */
html.night {
--bg: var(--zwart);
--bg-soft: #232326;
--text: var(--creme);
--text-soft: rgba(244, 240, 232, 0.78);
--line: rgba(244, 240, 232, 0.16);
--accent: var(--lila); /* primair */
--accent-text: var(--lila); /* lila op zwart is al leesbaar (6.2:1) */
/* Eén uitlichtkleur: lila uit het moodboard (6.2:1 op zwart). */
--hl: var(--lila);
--accent-2: var(--blauw); /* secundair */
--on-accent: var(--zwart);
--card: #232326;
--dot-a: var(--lila);
--dot-b: var(--blauw);
/* 's Nachts precies zoals aangeleverd: crème lichaam, mintstrepen. */
--pin: url('assets/pin-night.svg');
--ball-sm: url('assets/ball-night-sm.webp');
--dot-c: rgba(244, 240, 232, 0.30);
/* 's Nachts iets dieper, zodat de foto niet met de pagina concurreert. */
--scrim-top: rgba(28, 28, 30, 0.55);
--scrim-bot: rgba(28, 28, 30, 0.86);
}
/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
background: var(--bg);
color: var(--text);
font-family: var(--font-display);
font-weight: 400;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
transition: background var(--transition), color var(--transition);
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
html { cursor: auto; }
a, button, .btn, .mode-toggle, .hamburger, label, summary, [role="button"] {
cursor: pointer;
}
/* Modus-afhankelijke tekst tonen/verbergen */
html.day .show-night { display: none; }
html.night .show-day { display: none; }
/* ---------- Layout helpers ---------- */
.container {
width: 100%;
max-width: var(--maxw);
margin-inline: auto;
padding-inline: var(--gutter);
}
.section { padding-block: clamp(4rem, 11vw, 8rem); }
.section__head { margin-bottom: clamp(2rem, 6vw, 3.5rem); }
.section__kicker {
font-family: var(--font-mono);
font-size: 0.8rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent-text);
margin-bottom: 0.9rem;
}
.section__title {
font-family: var(--font-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: -0.01em;
line-height: 0.98;
font-size: clamp(2.1rem, 7vw, 4.25rem);
}
/* Het kernwoord in een kop krijgt de accentkleur ("Jouw BAAN. Onze BAR.").
Wordt door script.js (setupHighlights) om de juiste woorden gezet — de koppen
komen uit Storyblok, dus dat moet ná het invullen gebeuren. */
.hl {
color: var(--hl);
transition: color var(--transition);
}
/* =========================================================
TYPOGRAFIE-utilities
========================================================= */
.mono {
font-family: var(--font-mono);
font-size: 0.95rem;
line-height: 1.7;
}
/* =========================================================
LOGO — "BOWLING BAR ● SPARE TIME"
Leesbare tekst (volgt thema) met de echte bal-artwork ertussen.
Accent zit ALLEEN in de bal, nooit in de tekst.
========================================================= */
.logo {
display: inline-flex;
align-items: center;
gap: 0.55rem;
font-family: var(--font-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.02em;
font-size: clamp(1.05rem, 2.6vw, 1.3rem);
color: var(--text); /* tekst volgt thema, nooit accent */
line-height: 1;
}
.logo__ball {
display: inline-block;
flex: none;
/* Achtergrond en geen ![]()
: met twee ![]()
in de DOM haalde de browser
béide thema's op, ook de verborgen — 141 KB per pagina voor een bal van
26 px. Zo laadt alleen het actieve thema, en dat is één regel CSS.
1.25em houdt hem meeschalen met de logotekst, net als voorheen. */
width: 1.25em;
height: 1.25em;
background: var(--ball-sm) center / contain no-repeat;
}
.logo--footer { font-size: clamp(1rem, 2.4vw, 1.2rem); }
/* =========================================================
NAVIGATIE (sticky)
========================================================= */
.nav {
position: sticky;
top: 0;
z-index: 100;
border-bottom: 1px solid var(--line);
transition: border-color var(--transition);
}
/* Achtergrond én blur staan bewust in ::before, niet op .nav zelf.
backdrop-filter (net als transform/filter) maakt van een element een
containing block voor position:fixed-kinderen. Stond het op .nav, dan werd het
mobiele nav-paneel binnen de balk gepositioneerd in plaats van over het scherm:
een strookje van 312×128px met de links dwars over de pagina heen.
Een pseudo-element is géén voorouder, dus hier is dat effect er niet. */
.nav::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: color-mix(in srgb, var(--bg) 88%, transparent);
backdrop-filter: blur(12px);
transition: background var(--transition);
pointer-events: none;
}
.nav__inner {
max-width: var(--maxw);
margin-inline: auto;
padding: 0.9rem var(--gutter);
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
/* Het menu zit op ÉLKE schermbreedte in de hamburger — ook op desktop.
Zo past er een willekeurig aantal links in zonder dat de balk vol raakt. */
.nav__links {
position: fixed;
inset: 0 0 0 auto;
width: min(86vw, 360px);
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 1.25rem;
background: var(--bg-soft);
padding: 6.5rem 2.25rem 2.25rem;
border-left: 1px solid var(--line);
transform: translateX(100%);
transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1),
background var(--transition);
z-index: 90;
overflow-y: auto;
}
.nav__links.is-open { transform: translateX(0); }
/* De links komen één voor één binnen: het paneel schuift, daarna vallen de
items met een korte vertraging in. Puur CSS — geen extra JS nodig. */
.nav__links > * {
opacity: 0;
transform: translateX(18px);
transition: opacity 300ms ease, transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nav__links.is-open > * { opacity: 1; transform: none; }
.nav__links.is-open > *:nth-child(1) { transition-delay: 100ms; }
.nav__links.is-open > *:nth-child(2) { transition-delay: 150ms; }
.nav__links.is-open > *:nth-child(3) { transition-delay: 200ms; }
.nav__links.is-open > *:nth-child(4) { transition-delay: 250ms; }
.nav__links.is-open > *:nth-child(5) { transition-delay: 300ms; }
.nav__links.is-open > *:nth-child(6) { transition-delay: 350ms; }
.nav__links.is-open > *:nth-child(7) { transition-delay: 400ms; }
.nav__links.is-open > *:nth-child(8) { transition-delay: 450ms; }
/* Waas over de pagina zolang het menu open is. Wordt door script.js in de DOM
gezet, zodat er geen tien HTML-bestanden voor hoeven te veranderen. */
.nav__scrim {
position: fixed;
inset: 0;
z-index: 89;
background: color-mix(in srgb, var(--zwart) 45%, transparent);
opacity: 0;
visibility: hidden;
transition: opacity 320ms ease, visibility 320ms;
border: 0;
padding: 0;
cursor: pointer;
}
.nav__scrim.is-open { opacity: 1; visibility: visible; }
/* Menu open = pagina niet meer scrollen. */
html.nav-open, body.nav-open { overflow: hidden; }
.nav__link {
font-weight: 400;
font-size: 0.95rem;
position: relative;
padding-block: 0.25rem;
transition: color 200ms;
}
.nav__link::after {
content: "";
position: absolute;
left: 0; bottom: -2px;
width: 0; height: 2px;
background: var(--accent);
transition: width 220ms ease;
}
.nav__link:hover { color: var(--accent-text); }
.nav__link:hover::after { width: 100%; }
.nav__controls { display: flex; align-items: center; gap: 0.75rem; }
/* Dag/nacht toggle */
.mode-toggle {
width: 46px; height: 46px;
border-radius: 50%;
border: 1px solid var(--line);
background: var(--bg-soft);
color: var(--accent-text);
cursor: pointer;
display: grid;
place-items: center;
font-size: 1.2rem;
line-height: 1;
transition: background var(--transition), border-color var(--transition), transform 200ms;
}
.mode-toggle:hover { transform: rotate(18deg) scale(1.05); }
.mode-toggle:active { transform: scale(0.94); }
html.day .mode-toggle__icon--moon { display: none; }
html.night .mode-toggle__icon--sun { display: none; }
/* DAG: mint op crème geeft te weinig contrast. Vul de knop mint en
zet de zon in zwart, zo blijft hij goed zichtbaar (en mint-only). */
html.day .mode-toggle {
background: var(--mint);
border-color: var(--mint);
color: var(--zwart);
}
/* Hamburger (mobiel) */
.hamburger {
display: flex; /* altijd zichtbaar: het menu zit overal in de hamburger */
flex-direction: column;
justify-content: center;
gap: 5px;
width: 46px; height: 46px;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--bg-soft);
cursor: pointer;
}
.hamburger span {
display: block;
width: 20px; height: 2px;
margin-inline: auto;
background: var(--text);
transition: transform 250ms, opacity 200ms;
}
.hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* =========================================================
KNOPPEN
========================================================= */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 0.9rem;
padding: 0.85rem 1.6rem;
border-radius: 999px;
border: 1px solid transparent;
cursor: pointer;
transition: background var(--transition), color var(--transition),
transform 180ms, box-shadow 250ms;
}
.btn--primary {
background: var(--accent);
color: var(--on-accent);
}
.btn--primary:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 45%, transparent);
}
.btn--lg { padding: 1.05rem 2.2rem; font-size: 1rem; }
/* =========================================================
GRAFISCH ELEMENT 1 — LANE-LIJN
3–5 horizontale lijnen, rand tot rand. Onderste = accent.
========================================================= */
.lane-line {
display: flex;
flex-direction: column;
gap: 7px;
width: 100%;
padding-block: 1.5rem;
}
.lane-line span {
display: block;
width: 100%;
background: var(--line);
border-radius: 2px;
}
.lane-line span:nth-child(1) { height: 6px; } /* dik */
.lane-line span:nth-child(2) { height: 3px; } /* medium*/
.lane-line span:nth-child(3) { height: 2px; } /* dun */
.lane-line span:nth-child(4) { height: 3px; } /* medium*/
.lane-line span:nth-child(5) { height: 6px; } /* dik + accent */
/* Onderste lijn in accentkleur. DAG = mint, NACHT = lila→blauw. */
html.day .lane-line span:nth-child(5) { background: var(--mint); }
html.night .lane-line span:nth-child(5) {
background: linear-gradient(90deg, var(--lila), var(--blauw));
}
.lane-line--footer { padding-bottom: 0; }
/* =========================================================
GRAFISCH ELEMENT 2 — STIPPENPATROON
Net raster van even grote cirkels die elkaar niet raken.
========================================================= */
.dots {
--dot-size: 4px;
--grid: 30px;
background-image:
radial-gradient(var(--dot-a) var(--dot-size), transparent calc(var(--dot-size) + 1px)),
radial-gradient(var(--dot-b) var(--dot-size), transparent calc(var(--dot-size) + 1px)),
radial-gradient(var(--dot-c) var(--dot-size), transparent calc(var(--dot-size) + 1px));
background-size: calc(var(--grid) * 2) calc(var(--grid) * 2);
background-position:
0 0,
var(--grid) var(--grid),
var(--grid) 0;
transition: background-image var(--transition);
}
/* =========================================================
HERO
========================================================= */
.hero { position: relative; overflow: hidden; }
.hero__dots {
position: absolute;
inset: 0;
opacity: 0.5;
-webkit-mask-image: radial-gradient(120% 90% at 80% 10%, #000 0%, transparent 70%);
mask-image: radial-gradient(120% 90% at 80% 10%, #000 0%, transparent 70%);
pointer-events: none;
}
.hero__inner {
position: relative;
z-index: 1;
max-width: var(--maxw);
margin-inline: auto;
padding: clamp(3rem, 9vw, 6.5rem) var(--gutter) clamp(2rem, 6vw, 4rem);
display: grid;
gap: 2.5rem;
}
.hero__eyebrow {
font-family: var(--font-mono);
font-size: 0.85rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-soft);
margin-bottom: 1.25rem;
}
.hero__title {
font-family: var(--font-display);
font-weight: 900;
text-transform: uppercase;
letter-spacing: -0.015em;
line-height: 0.92;
font-size: clamp(2.8rem, 11vw, 6.5rem);
margin-bottom: 1.25rem;
}
.hero__sub {
font-size: clamp(1.05rem, 2.5vw, 1.4rem);
color: var(--text-soft);
max-width: 30ch;
margin-bottom: 2rem;
}
/* Hero-visual: alleen een onzichtbare plek die de startpositie van de
rollende bal markeert (de bal zelf is .roller, op body-niveau). */
.hero__visual { display: flex; justify-content: center; }
.hero__slot {
width: clamp(130px, 26vw, 248px);
aspect-ratio: 1;
}
/* De rollende bal: vast in beeld, script.js zet de transform. */
.roller {
position: fixed;
left: 0;
top: 0;
width: clamp(130px, 26vw, 248px);
aspect-ratio: 1;
z-index: 50;
pointer-events: none;
transform: translate(-9999px, -9999px); /* tot JS positioneert */
transition: opacity 240ms ease;
will-change: transform;
}
.roller::before { /* ronde gloed */
content: "";
position: absolute;
inset: -9%;
z-index: 0;
border-radius: 50%;
background: radial-gradient(circle at 50% 54%,
color-mix(in srgb, var(--accent) 42%, transparent) 0%,
transparent 68%);
transition: background var(--transition);
}
.hero__ball-img {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
display: block;
}
html.day .hero__ball-img--night { display: none; }
html.night .hero__ball-img--day { display: none; }
/* =========================================================
STRIKE-BAAN — scroll-gestuurde animatie.
De .alley is hoog; .alley__stage plakt (sticky) een scherm lang,
zodat de bal door het midden naar de pins rolt en ze omver knalt.
========================================================= */
.alley {
position: relative;
height: 220vh; /* scrollruimte voor de animatie */
}
.alley__stage {
position: sticky;
top: 0;
height: 100vh;
overflow: hidden;
}
/* Minimalistische baan: alleen lijnen (geen vulling). Lijnen volgen het
thema (zwart bij dag, crème bij nacht) zodat ze altijd zichtbaar zijn. */
.alley__lane {
position: absolute;
left: 50%;
top: 13vh;
transform: translateX(-50%);
width: clamp(190px, 30vw, 320px);
height: 80vh;
z-index: 0;
border-left: 2px solid var(--text);
border-right: 2px solid var(--text);
border-bottom: 2px solid var(--text); /* lijn aan het eind (pindek) */
background:
/* foul line */
linear-gradient(to bottom, transparent 0 5%, var(--text) 5% calc(5% + 1.5px), transparent calc(5% + 1.5px)),
/* board-lijnen: fijne verticale lijnen */
repeating-linear-gradient(90deg,
transparent 0 calc(14.285% - 1px),
color-mix(in srgb, var(--text) 35%, transparent) calc(14.285% - 1px) 14.285%);
transition: border-color var(--transition), background var(--transition);
}
/* Richtpijlen (V richting de pins) — dunne lijn-stijl. */
.lane-arrow {
position: absolute;
width: 5%;
aspect-ratio: 0.78;
transform: translateX(-50%);
background: color-mix(in srgb, var(--text) 45%, transparent);
clip-path: polygon(50% 100%, 0 0, 100% 0);
}
/* Pin-opstelling: brede driehoek over (bijna) het hele scherm.
Maten en posities worden door script.js gezet (data-r / data-c). */
.alley__pins {
position: absolute;
left: 0;
right: 0;
bottom: 0; /* JS overschrijft */
z-index: 2;
}
.pin {
position: absolute; /* left/top/width/height door JS */
background: var(--pin) center / contain no-repeat;
filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.32));
transform-origin: 50% 92%;
transition:
transform 780ms cubic-bezier(0.22, 0.7, 0.25, 1) var(--delay, 0ms),
opacity 640ms ease var(--delay, 0ms);
}
/* Strike! Pins vliegen weg en vervagen. */
.alley.is-strike .pin {
transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--rot, 0));
opacity: 0;
}
/* "Strike." als schermvullende boodschap. */
.alley__strike {
position: absolute;
inset: 0;
margin: 0;
display: grid;
place-items: center;
text-align: center;
font-family: var(--font-display);
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.01em;
line-height: 0.88;
font-size: clamp(3.5rem, 22vw, 16rem);
color: var(--accent-text);
opacity: 0;
transform: scale(0.86);
transition: opacity 320ms ease 180ms, transform 480ms cubic-bezier(0.2, 0.8, 0.2, 1) 180ms;
z-index: 60;
pointer-events: none;
}
/* In dagmodus dezelfde uitlichtkleur als BAAN en BAR in de hero — de mint uit
het moodboard (--hl), niet het diepe mint van --accent-text. 's Nachts blijft
het lila, want daar zijn --hl en --accent-text allebei lila. */
html.day .alley__strike { color: var(--hl); }
.alley.is-strike .alley__strike {
opacity: 1;
transform: scale(1);
}
/* =========================================================
DRIE WERELDEN
Uitzondering op de strikte regel: deze sectie verbeeldt de
modi zelf, dus elke kaart draagt z'n eigen kleur.
========================================================= */
.worlds { position: relative; overflow: hidden; }
.worlds__dots {
position: absolute;
inset: 0;
opacity: 0.35;
-webkit-mask-image: radial-gradient(110% 80% at 15% 0%, #000 0%, transparent 65%);
mask-image: radial-gradient(110% 80% at 15% 0%, #000 0%, transparent 65%);
pointer-events: none;
}
.worlds .container { position: relative; z-index: 1; }
.worlds__grid {
display: grid;
gap: 1.25rem;
grid-template-columns: 1fr;
}
.world {
display: flex;
flex-direction: column;
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: clamp(1.5rem, 4vw, 2.25rem);
transition: transform 250ms, border-color 250ms, background var(--transition);
}
.world:hover { transform: translateY(-4px); }
.world__tag {
font-size: 0.78rem;
letter-spacing: 0.04em;
color: var(--text-soft);
margin-bottom: 1.1rem;
}
.world__dot {
display: block;
width: 38px; height: 38px;
border-radius: 50%;
margin-bottom: 1.25rem;
}
.world__title {
font-family: var(--font-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.01em;
font-size: 1.4rem;
margin-bottom: 0.6rem;
}
.world__desc { color: var(--text-soft); }
.world__meta {
margin-top: 1rem;
font-size: 0.82rem;
color: var(--accent-text);
}
.world__cta {
margin-top: auto;
padding-top: 1.5rem;
font-family: var(--font-display);
font-weight: 400;
font-size: 0.95rem;
color: var(--accent-text);
transition: gap 200ms, opacity 200ms;
}
.world__cta:hover { opacity: 0.7; }
/* Dot-kleur per wereld. Dagmodus volgt het thema (mint overdag, crème 's
nachts); nacht- en groepsmodus tonen altijd hun eigen accent. */
.world--day .world__dot { background: var(--mint); }
html.night .world--day .world__dot { background: var(--creme); }
.world--night .world__dot { background: var(--lila); }
.world--group .world__dot { background: var(--blauw); }
.world--day:hover { border-color: var(--mint); }
html.night .world--day:hover { border-color: var(--creme); }
.world--night:hover { border-color: var(--lila); }
.world--group:hover { border-color: var(--blauw); }
/* =========================================================
FACILITEITEN
========================================================= */
.facilities__grid {
display: grid;
grid-template-columns: 1fr;
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
}
.facility {
background: var(--bg);
padding: clamp(1.4rem, 4vw, 2rem);
display: flex;
align-items: baseline;
gap: 1rem;
transition: background 250ms;
}
.facility:hover { background: var(--bg-soft); }
.facility__no {
font-family: var(--font-mono);
font-size: 0.85rem;
color: var(--accent-text);
}
.facility h3 {
font-family: var(--font-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.02em;
font-size: 1.25rem;
}
/* =========================================================
PRIJZEN (Courier New)
========================================================= */
.price-list {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.price-row {
display: flex;
align-items: baseline;
gap: 0.75rem;
font-family: var(--font-mono);
padding-block: 0.85rem;
border-bottom: 1px solid var(--line);
}
.price-row__label {
font-size: 1rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.price-row__label em {
font-style: normal;
color: var(--text-soft);
font-size: 0.85rem;
}
.price-row__dots {
flex: 1;
align-self: center;
border-bottom: 2px dotted var(--line);
min-width: 1.5rem;
}
.price-row__value {
font-size: 1.05rem;
font-weight: 700;
color: var(--accent-text);
white-space: nowrap;
}
/* "per uur" achter het bedrag — alle tarieven zijn per uur. */
.price-row__unit {
font-size: 0.8rem;
color: var(--text-soft);
white-space: nowrap;
}
/* Op een telefoon past "Bowlen wo/do — per baan per uur" niet op één regel.
De ellipsis kapte 'm dan af tot "Bowlen wo/do — per baan …": de gast kon niet
meer lezen waar hij voor betaalt. Dus: laten afbreken en de stippellijn weg
(die slaat nergens op zodra het label over twee regels loopt). */
@media (max-width: 560px) {
.price-row {
align-items: baseline;
gap: 1rem;
}
.price-row__label {
white-space: normal;
overflow: visible;
text-overflow: clip;
flex: 1;
min-width: 0;
}
.price-row__dots { display: none; }
.price-row__value { margin-left: auto; }
/* Zelfde patroon op de menukaart. */
.menu-item { grid-template-columns: 1fr auto; }
.menu-item__dots { display: none; }
}
/* =========================================================
PLAN JE BEZOEK
========================================================= */
.visit__grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
}
.visit__block {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: clamp(1.4rem, 4vw, 2rem);
transition: background var(--transition), border-color var(--transition);
}
.visit__label {
font-family: var(--font-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 0.95rem;
color: var(--accent-text);
margin-bottom: 0.9rem;
}
.visit__block a:hover { color: var(--accent-text); }
/* ---------- Kaart (Google Maps embed) ----------
Dag = lichte kaart (standaard). Nacht = donkere kaart via een
invert/hue-rotate-filter, zodat de kaart het thema volgt. */
.map__frame {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--line);
margin-top: clamp(1.5rem, 4vw, 2.5rem);
transition: border-color var(--transition);
}
.map__frame iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
}
html.night .map__frame iframe {
filter: invert(92%) hue-rotate(180deg) brightness(0.95) contrast(0.9);
}
@media (max-width: 600px) {
.map__frame { aspect-ratio: 4 / 3; }
}
/* =========================================================
RESERVEREN (placeholder voor Nostium-widget)
========================================================= */
/* Geen witte kaart, maar een sfeerfoto met een sluier eroverheen: de knop moet
opvallen, de foto niet. Andere foto? Wissel het bestand hieronder. */
.reserve__widget {
position: relative;
isolation: isolate;
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--radius);
min-height: clamp(280px, 34vw, 380px);
display: grid;
place-items: center;
padding: clamp(2rem, 6vw, 4rem);
background-image: url('assets/photos/foto-31.webp');
background-size: cover;
background-position: center;
/* Zonder dit loopt de foto ONDER de rand door (background-clip is standaard
border-box), terwijl de sluier hieronder alleen tot de padding-box komt.
Je zag dan een 1px randje onverduisterde foto rondom — in nachtmodus een
lichte gloed, want --line is daar licht. */
background-clip: padding-box;
transition: border-color var(--transition);
}
/* De sluier zelf; --scrim-* volgt dag/nacht. */
.reserve__widget::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
background: linear-gradient(180deg, var(--scrim-top), var(--scrim-bot));
transition: background var(--transition);
}
/* De knop komt bovenop de sluier. */
.reserve__widget > * { position: relative; z-index: 1; }
.reserve__fallback {
margin-top: 1.25rem;
color: var(--text-soft);
text-align: center;
}
.reserve__fallback a {
color: var(--accent-text);
text-decoration: underline;
text-underline-offset: 3px;
}
/* =========================================================
KINDERFEEST — wanneer kan het + uitleg
========================================================= */
.kids-days {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: clamp(0.75rem, 2vw, 1.25rem);
}
.kids-day {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: clamp(1.1rem, 3vw, 1.6rem);
transition: border-color 250ms, background var(--transition);
}
.kids-day__mark {
display: grid;
place-items: center;
width: 32px; height: 32px;
border-radius: 50%;
font-size: 0.95rem;
font-weight: 700;
margin-bottom: 0.75rem;
}
.kids-day--yes { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.kids-day--yes .kids-day__mark { background: var(--accent); color: var(--on-accent); }
.kids-day--no { opacity: 0.72; }
.kids-day--no .kids-day__mark {
background: transparent;
border: 1px solid var(--line);
color: var(--text-soft);
}
.kids-day h3 { font-size: 1.1rem; font-weight: 700; }
.kids-day p { color: var(--text-soft); margin-top: 0.2rem; }
.kids-note {
margin-top: 1.75rem;
color: var(--text-soft);
max-width: 68ch;
}
.kids-explain {
margin-top: 2.5rem;
display: grid;
gap: 1rem;
max-width: 68ch;
}
.kids-explain p { color: var(--text-soft); }
.kids-explain strong { color: var(--text); font-weight: 700; }
.kids-explain__small {
padding-top: 1rem;
border-top: 1px solid var(--line);
font-size: 0.85rem;
}
/* =========================================================
MENUKAART
========================================================= */
.menu-list {
display: grid;
gap: clamp(2rem, 5vw, 3.5rem);
}
/* Verborgen door het filter — niet display:none op .menu-cat zelf, want dat is
ook de grid-cel; hidden werkt hier hetzelfde en leest beter in de DOM. */
.menu-cat[hidden] { display: none; }
.menu-cat__head {
display: flex;
align-items: baseline;
gap: 1rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--line);
margin-bottom: 1.25rem;
}
.menu-cat__name {
font-family: var(--font-display);
font-size: clamp(1.25rem, 2.6vw, 1.75rem);
font-weight: 700;
text-transform: uppercase;
letter-spacing: -0.01em;
color: var(--accent-text);
}
.menu-cat__note {
color: var(--text-soft);
font-size: 0.85rem;
}
.menu-cat__items { display: grid; gap: 0.9rem; }
/* Zelfde stippellijn-opzet als bij de prijzen, zodat het één familie blijft:
naam links, bedrag rechts, Courier New voor allebei. */
.menu-item {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: baseline;
gap: 0.75rem;
font-family: var(--font-mono);
}
.menu-item__name { font-weight: 400; min-width: 0; }
.menu-item__dots {
border-bottom: 2px dotted var(--line);
transform: translateY(-0.3em);
}
.menu-item__price {
font-family: var(--font-mono);
font-weight: 700;
color: var(--accent-text);
white-space: nowrap;
}
.menu-item__desc {
grid-column: 1 / -1;
color: var(--text-soft);
font-size: 0.9rem;
margin-top: -0.35rem;
max-width: 60ch;
}
.menu__empty {
text-align: center;
color: var(--text-soft);
border: 1px dashed var(--line);
border-radius: var(--radius);
padding: clamp(2rem, 6vw, 3.5rem);
max-width: 46ch;
margin-inline: auto;
}
/* Alleen zichtbaar als een filter niets oplevert (kan gebeuren zodra de
categorieën uit Storyblok komen en er eentje leeg is). */
.menu__none {
text-align: center;
color: var(--text-soft);
font-family: var(--font-mono);
padding-block: clamp(2rem, 6vw, 3.5rem);
}
.menu__none[hidden] { display: none; }
.menu__foot { margin-top: 2.5rem; text-align: center; color: var(--text-soft); }
.menu__cta { margin-top: 2rem; text-align: center; }
/* =========================================================
VACATURES
========================================================= */
.vacancy-list {
display: grid;
gap: clamp(1.25rem, 3vw, 2rem);
}
.vacancy {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: clamp(1.5rem, 4vw, 2.5rem);
transition: border-color 250ms, background var(--transition);
}
.vacancy:hover { border-color: var(--accent-text); }
.vacancy__title {
font-size: clamp(1.5rem, 3.2vw, 2.125rem);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.1;
}
.vacancy__intro {
margin-top: 0.6rem;
max-width: 60ch;
color: var(--text-soft);
}
.vacancy__meta {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 1rem;
}
.vacancy__chip {
border: 1px solid var(--line);
border-radius: 999px;
padding: 0.3rem 0.75rem;
font-size: 0.8rem;
color: var(--text-soft);
}
.vacancy__body {
margin-top: 1.75rem;
display: grid;
gap: 1.5rem;
}
.vacancy__sec h4 {
font-size: 1rem;
font-weight: 700;
color: var(--accent-text);
margin-bottom: 0.4rem;
}
.vacancy__sec p {
color: var(--text-soft);
max-width: 75ch;
}
.vacancy__apply {
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid var(--line);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.vacancy__applytext {
color: var(--text-soft);
max-width: 52ch;
}
.vacancies__foot {
margin-top: 2.5rem;
text-align: center;
color: var(--text-soft);
}
.vacancies__foot a {
color: var(--accent-text);
text-decoration: underline;
text-underline-offset: 3px;
}
/* =========================================================
EVENEMENTEN
========================================================= */
.event-list {
display: grid;
gap: clamp(1rem, 2.5vw, 1.5rem);
}
.event {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: clamp(1rem, 3vw, 2rem);
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: clamp(1.25rem, 3vw, 1.75rem);
transition: border-color 250ms, transform 250ms, background var(--transition);
}
.event:hover { border-color: var(--accent-text); transform: translateY(-2px); }
.event__date {
display: grid;
place-items: center;
min-width: 4.5rem;
padding: 0.6rem 0.75rem;
border: 1px solid var(--accent);
border-radius: 12px;
color: var(--accent-text);
line-height: 1.1;
text-align: center;
}
.event__day { font-size: 1.5rem; font-weight: 700; }
.event__month { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; }
.event__title { font-size: 1.25rem; font-weight: 700; }
.event__desc { margin-top: 0.35rem; color: var(--text-soft); max-width: 60ch; }
.event__meta { margin-top: 0.35rem; color: var(--text-soft); font-size: 0.85rem; }
.events__empty {
text-align: center;
color: var(--text-soft);
border: 1px dashed var(--line);
border-radius: var(--radius);
padding: clamp(2rem, 6vw, 3.5rem);
max-width: 46ch;
margin-inline: auto;
}
.events__cta { margin-top: 2.5rem; text-align: center; }
@media (max-width: 640px) {
.event { grid-template-columns: auto 1fr; }
.event__cta { grid-column: 1 / -1; justify-self: start; }
.vacancy__apply { flex-direction: column; align-items: flex-start; }
}
/* =========================================================
FOOTER
========================================================= */
.footer { padding-block: clamp(2.5rem, 7vw, 4rem) 2rem; }
.footer__inner {
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
}
.footer__tag {
color: var(--text-soft);
max-width: 32ch;
margin-top: 1.1rem;
}
.footer__head {
font-family: var(--font-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 0.9rem;
margin-bottom: 1rem;
}
.footer__links { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; }
.footer__links a { color: var(--text-soft); transition: color 200ms; }
.footer__links a:hover { color: var(--accent-text); }
.footer__col a:hover { color: var(--accent-text); }
.footer__bottom {
margin-top: 3rem;
padding-top: 1.5rem;
border-top: 1px solid var(--line);
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.5rem;
color: var(--text-soft);
font-size: 0.85rem;
}
/* =========================================================
RESPONSIVE (mobile-first → grotere schermen)
========================================================= */
@media (min-width: 720px) {
.worlds__grid { grid-template-columns: repeat(3, 1fr); }
.facilities__grid { grid-template-columns: repeat(2, 1fr); }
.visit__grid { grid-template-columns: repeat(2, 1fr); }
.footer__inner { grid-template-columns: 2fr 1fr 1fr; }
}
@media (min-width: 960px) {
.hero__inner {
grid-template-columns: 1.1fr 0.9fr;
align-items: start; /* bal hoog in de hero → lange rol omlaag */
}
.hero__visual { padding-top: 2vh; }
.facilities__grid { grid-template-columns: repeat(3, 1fr); }
.visit__grid { grid-template-columns: repeat(4, 1fr); }
}
/* ---------- Nav-paneel: opmaak van de links ----------
Het paneel zelf staat hierboven (geldt op élke breedte, ook desktop). */
.nav__links .nav__link { font-size: 1.2rem; }
.nav__links .nav__reserve { width: 100%; text-align: center; margin-top: 0.5rem; }
/* Het paneel (z-index 90) schuift over zijn buren heen — dus ook over de
hamburger, en dan kun je het menu niet meer dichtdoen. Logo en knoppen
moeten er dus bovenop blijven liggen. De bovenrand van het paneel is
bewust leeg (padding-top), daar is precies ruimte voor. */
.nav__inner > .logo,
.nav__controls { position: relative; z-index: 95; }
/* ---------- Toegankelijkheid ---------- */
@media (prefers-reduced-motion: reduce) {
* { transition-duration: 0.01ms !important; scroll-behavior: auto; }
}
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 4px;
}
/* =========================================================
HORIZONTALE SFEER-SCROLL — foto's schuiven zijwaarts mee
terwijl je verticaal scrollt (vastgepind, Lando-stijl).
Hoogte van .hscroll wordt door script.js gezet.
========================================================= */
.hscroll { position: relative; }
.hscroll__sticky {
position: sticky;
top: 0;
height: 100vh;
display: flex;
align-items: center;
overflow-x: auto; /* zonder JS: gewoon zijwaarts scrollen */
overflow-y: hidden;
scrollbar-width: none;
}
.hscroll__sticky::-webkit-scrollbar { display: none; }
.hscroll__track {
display: flex;
align-items: center;
gap: clamp(1.6rem, 4vw, 3.4rem); /* ruimere, organische tussenruimte */
padding-inline: clamp(1.25rem, 5vw, 4rem);
will-change: transform;
}
.hslide {
position: relative;
flex: 0 0 auto;
border-radius: var(--radius);
overflow: hidden;
background: var(--bg-soft);
}
.hslide--land { aspect-ratio: 3 / 2; }
.hslide--port { aspect-ratio: 2 / 3; }
/* Wisselende maten → onregelmatig, organisch ritme. */
.hslide--s { height: min(40vh, 330px); }
.hslide--m { height: min(54vh, 450px); }
.hslide--l { height: min(70vh, 580px); }
/* Lichte verticale verspringing zodat het niet als een strakke rij oogt. */
.hslide--up { align-self: flex-start; margin-top: clamp(1rem, 5vh, 4rem); }
.hslide--down { align-self: flex-end; margin-bottom: clamp(1rem, 5vh, 4rem); }
.hslide > img {
width: 100%; height: 100%;
object-fit: cover;
transform: scale(1.001);
transition: transform 1100ms cubic-bezier(0.16, 1, 0.3, 1), filter 600ms ease;
filter: saturate(1.02);
}
.hslide:hover > img { transform: scale(1.06); filter: saturate(1.12) contrast(1.03); }
.hslide__cap {
position: absolute; left: 0; right: 0; bottom: 0;
padding: 1.4rem 1.1rem 1rem;
font-family: var(--font-mono); font-size: 0.72rem;
letter-spacing: 0.1em; text-transform: uppercase; color: #fff;
background: linear-gradient(to top, rgba(0,0,0,0.72), rgba(0,0,0,0));
transform: translateY(0.4rem); opacity: 0;
transition: opacity 500ms ease, transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
pointer-events: none;
}
.hslide__cap b { color: var(--accent-text); font-weight: 700; }
.hslide:hover .hslide__cap { opacity: 1; transform: none; }
/* Tekst-paneel als eerste 'dia'. */
.hslide--intro {
aspect-ratio: auto;
width: min(78vw, 440px);
background: transparent;
display: flex; flex-direction: column; justify-content: center;
gap: 1.1rem; padding-right: clamp(1rem, 3vw, 2.5rem);
}
.hslide__title {
font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em;
line-height: 0.92; font-size: clamp(2.4rem, 7vw, 4.5rem); hyphens: manual;
}
.hslide__lead { color: var(--text-soft); max-width: 30ch; }
/* Zonder bewegingsvoorkeur: niet vastpinnen, gewoon een swipe-strip. */
@media (prefers-reduced-motion: reduce) {
.hscroll { height: auto !important; }
.hscroll__sticky { position: static; height: auto; padding-block: clamp(3rem, 8vw, 6rem); }
.hscroll__track { transform: none !important; }
}
/* =========================================================
BINNENKIJKEN — sfeergalerij met scroll-reveal + parallax
(vanilla, geen libraries; volgt het dag/nacht-thema)
========================================================= */
.gallery { position: relative; overflow: hidden; }
.gallery__grid {
columns: 3;
column-gap: clamp(0.6rem, 1.6vw, 1.1rem);
}
@media (max-width: 900px) { .gallery__grid { columns: 2; } }
@media (max-width: 560px) { .gallery__grid { columns: 1; } }
/* Eén foto: uitsnede-frame dat de parallax en hover-zoom maskeert. */
.shot {
position: relative;
display: block;
width: 100%;
margin: 0 0 clamp(0.6rem, 1.6vw, 1.1rem);
border-radius: var(--radius);
overflow: hidden;
break-inside: avoid;
background: var(--bg-soft);
box-shadow: 0 1px 0 var(--line);
/* reveal-startwaarden */
opacity: 0;
transform: translateY(48px) scale(0.965);
transition:
opacity 900ms cubic-bezier(0.16, 1, 0.3, 1),
transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
transition-delay: calc(var(--i, 0) * 70ms);
will-change: opacity, transform;
}
.shot.is-in { opacity: 1; transform: none; }
.shot--land { aspect-ratio: 3 / 2; }
.shot--port { aspect-ratio: 2 / 3; }
/* Parallax-laag: iets hoger dan het frame zodat er ruimte is om te schuiven. */
.shot__parallax {
position: absolute;
inset: -9% 0;
height: 118%;
transform: translate3d(0, var(--py, 0px), 0);
will-change: transform;
}
.shot__media {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.001);
transition: transform 1100ms cubic-bezier(0.16, 1, 0.3, 1), filter 600ms ease;
filter: saturate(1.02);
}
/* Hover: cinematische inzoom + lichte lift. */
.shot:hover .shot__media { transform: scale(1.07); filter: saturate(1.12) contrast(1.03); }
/* Onderrand-verloop + bijschrift dat bij hover omhoog komt. */
.shot__cap {
position: absolute;
left: 0; right: 0; bottom: 0;
padding: 1.4rem 1.1rem 1rem;
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #fff;
background: linear-gradient(to top, rgba(0,0,0,0.72), rgba(0,0,0,0));
transform: translateY(0.4rem);
opacity: 0;
transition: opacity 500ms ease, transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
pointer-events: none;
}
.shot__cap b { color: var(--accent-text); font-weight: 700; }
.shot:hover .shot__cap { opacity: 1; transform: none; }
/* =========================================================
FULL-BLEED PARALLAX-BAND — cinematische onderbreking
========================================================= */
.band {
position: relative;
height: clamp(340px, 56vh, 620px);
overflow: hidden;
display: grid;
place-items: center;
text-align: center;
}
.band__bg {
position: absolute;
inset: -12% 0;
height: 124%;
width: 100%;
object-fit: cover;
transform: translate3d(0, var(--py, 0px), 0) scale(1.04);
will-change: transform;
z-index: 0;
}
.band::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(to bottom, rgba(28,28,30,0.45), rgba(28,28,30,0.30), rgba(28,28,30,0.62));
z-index: 1;
}
.band__inner { position: relative; z-index: 2; padding-inline: var(--gutter); }
.band__kicker {
font-family: var(--font-mono);
font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--accent-text); margin-bottom: 0.8rem;
}
.band__title {
color: #fff;
font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em;
line-height: 0.98; font-size: clamp(2rem, 6vw, 3.75rem);
opacity: 0; transform: translateY(34px);
transition: opacity 1s cubic-bezier(0.16,1,0.3,1), transform 1s cubic-bezier(0.16,1,0.3,1);
}
.band.is-in .band__title { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.shot { opacity: 1 !important; transform: none !important; }
.shot__parallax, .band__bg { transform: none !important; }
.band__title { opacity: 1 !important; transform: none !important; }
}
/* =========================================================
JURIDISCHE PAGINA'S (privacy / voorwaarden / cookies)
========================================================= */
.legal {
padding: clamp(7rem, 14vh, 10rem) 0 5rem;
}
.legal__inner {
max-width: 760px;
margin: 0 auto;
}
.legal__version {
margin-top: 0.5rem;
color: var(--text-soft);
}
.legal__intro {
margin: 2rem 0 1rem;
font-size: 1.05rem;
color: var(--text-soft);
line-height: 1.7;
}
.legal h2 {
margin: 2.75rem 0 0.85rem;
font-size: clamp(1.15rem, 2.4vw, 1.45rem);
font-weight: 700;
letter-spacing: -0.01em;
}
.legal p,
.legal li {
color: var(--text-soft);
line-height: 1.7;
}
.legal p { margin-bottom: 1rem; }
.legal ul,
.legal ol {
margin: 0 0 1.25rem;
padding-left: 1.25rem;
}
.legal li { margin-bottom: 0.45rem; }
.legal a {
color: var(--accent-text);
text-decoration: underline;
text-underline-offset: 2px;
}
.legal hr {
margin: 2.5rem 0;
border: 0;
border-top: 1px solid var(--line);
}
.legal__table {
width: 100%;
border-collapse: collapse;
margin: 0 0 1.5rem;
font-size: 0.95rem;
}
.legal__table th,
.legal__table td {
text-align: left;
vertical-align: top;
padding: 0.75rem 0.9rem;
border: 1px solid var(--line);
color: var(--text-soft);
}
.legal__table th {
color: var(--text);
font-weight: 700;
background: var(--bg-soft);
}
.legal__back {
display: inline-block;
margin-top: 3rem;
font-family: var(--font-display);
font-size: 0.9rem;
color: var(--accent-text);
}
@media (max-width: 600px) {
.legal__table,
.legal__table tbody,
.legal__table tr,
.legal__table td,
.legal__table th { display: block; width: 100%; }
.legal__table tr { margin-bottom: 1rem; }
}
/* =========================================================
CHATWIDGET (#cb-widget) — volgt het dag/nacht-thema
Linksonder, zodat hij niet botst met de Nostium-knop rechts.
========================================================= */
#cb-widget {
position: fixed;
bottom: 24px;
left: 24px;
z-index: 200;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 14px;
font-family: var(--font-display);
/* De container is ~570px hoog, ook als het paneel dicht is: het gesloten
paneel neemt nog steeds ruimte in. Doorzichtig of niet, die box vangt élke
klik op die erbinnen valt — en dat sloopte de Reserveer-knop in de hero.
Daarom vangt de container zelf niets meer op; de knoppen erin wél. */
pointer-events: none;
}
/* De kinderen weer klikbaar maken. #cb-panel en #cb-bubble regelen dit al zelf
(none als ze dicht zijn, auto zodra ze open staan). */
#cb-toggle { pointer-events: auto; }
/* Toggle-knop */
#cb-toggle {
position: relative;
width: 60px;
height: 60px;
border-radius: 50%;
border: none;
background: var(--accent);
color: var(--on-accent);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
cursor: pointer;
font-size: 26px;
display: flex;
align-items: center;
justify-content: center;
transition: transform .2s, background var(--transition);
}
#cb-toggle:hover { transform: scale(1.08); }
#cb-toggle::after {
content: '';
position: absolute;
top: 4px; right: 4px;
width: 13px; height: 13px;
border-radius: 50%;
background: var(--blauw);
border: 2px solid var(--bg);
}
#cb-toggle.open::after { display: none; }
/* Paneel */
#cb-panel {
width: 370px;
max-width: calc(100vw - 48px);
max-height: 80vh;
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: 0 14px 50px rgba(0, 0, 0, 0.35);
display: flex;
flex-direction: column;
overflow: hidden;
transform-origin: bottom left;
transform: scale(.9) translateY(16px);
opacity: 0;
pointer-events: none;
transition: transform .28s cubic-bezier(.34,1.4,.64,1), opacity .22s ease;
}
#cb-panel.open { transform: scale(1) translateY(0); opacity: 1; pointer-events: all; }
/* Header */
#cb-widget .cb-hdr {
background: var(--accent);
color: var(--on-accent);
padding: 14px 16px;
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
#cb-widget .cb-hdr-icon {
width: 44px; height: 44px;
border-radius: 50%;
background: rgba(28, 28, 30, 0.12);
display: flex; align-items: center; justify-content: center;
font-size: 22px;
flex-shrink: 0;
}
#cb-widget .cb-hdr-info { flex: 1; }
#cb-widget .cb-hdr-info strong {
display: block;
font-family: var(--font-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.02em;
font-size: 14px;
}
#cb-widget .cb-hdr-info span {
font-family: var(--font-mono);
font-size: 11px;
opacity: 0.95;
display: flex; align-items: center; gap: 5px;
}
#cb-widget .cb-dot-online {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--on-accent);
animation: cb-pulse 2s infinite;
}
@keyframes cb-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
#cb-widget .cb-hdr-close {
background: rgba(28, 28, 30, 0.12);
border: none; border-radius: 50%;
width: 30px; height: 30px;
font-size: 15px; color: var(--on-accent);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background .2s;
}
#cb-widget .cb-hdr-close:hover { background: rgba(28, 28, 30, 0.22); }
/* Snelknoppen */
#cb-widget .cb-quick {
padding: 10px 12px 8px;
border-bottom: 1px solid var(--line);
display: flex; flex-wrap: wrap; gap: 6px;
flex-shrink: 0;
background: var(--bg-soft);
}
#cb-widget .cb-q {
background: var(--card);
border: 1px solid var(--line);
border-radius: 20px;
padding: 5px 13px;
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--text);
cursor: pointer;
white-space: nowrap;
transition: background .2s, color .2s, border-color .2s;
}
#cb-widget .cb-q:hover {
background: var(--accent);
color: var(--on-accent);
border-color: var(--accent-text);
}
/* Berichten */
#cb-msgs {
flex: 1;
overflow-y: auto;
padding: 16px 14px;
display: flex;
flex-direction: column;
gap: 10px;
background: var(--bg-soft);
}
#cb-msgs::-webkit-scrollbar { width: 4px; }
#cb-msgs::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }
#cb-widget .cb-msg { display: flex; align-items: flex-end; gap: 7px; max-width: 100%; }
#cb-widget .cb-msg.user { flex-direction: row-reverse; }
#cb-widget .cb-av {
width: 30px; height: 30px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 15px; flex-shrink: 0;
background: var(--card);
border: 1px solid var(--line);
}
#cb-widget .cb-bbl {
max-width: 78%;
padding: 9px 13px;
border-radius: 16px;
font-family: var(--font-display);
font-size: 13.5px;
line-height: 1.55;
word-break: break-word;
}
#cb-widget .cb-msg.bot .cb-bbl {
background: var(--card);
color: var(--text);
border: 1px solid var(--line);
border-bottom-left-radius: 4px;
}
#cb-widget .cb-msg.user .cb-bbl {
background: var(--accent);
color: var(--on-accent);
border-bottom-right-radius: 4px;
}
#cb-widget .cb-bbl strong { font-weight: 700; }
/* Boek-knop in een botbubbel */
#cb-widget .cb-book {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--accent);
color: var(--on-accent);
text-decoration: none;
padding: 8px 18px;
border-radius: 20px;
font-family: var(--font-display);
font-size: 12.5px;
font-weight: 700;
margin-top: 10px;
transition: transform .2s;
}
#cb-widget .cb-book:hover { transform: translateY(-2px); }
/* Typindicator */
#cb-widget .cb-typing {
display: flex; gap: 4px;
padding: 11px 13px;
background: var(--card);
border: 1px solid var(--line);
border-radius: 16px;
border-bottom-left-radius: 4px;
width: fit-content;
}
#cb-widget .cb-typing span {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--accent);
animation: cb-bounce 1.3s infinite;
}
#cb-widget .cb-typing span:nth-child(2) { animation-delay: .18s; }
#cb-widget .cb-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes cb-bounce { 0%,60%,100%{transform:translateY(0);opacity:.4} 30%{transform:translateY(-6px);opacity:1} }
/* Invoer */
#cb-widget .cb-inp {
padding: 10px 12px;
background: var(--bg);
border-top: 1px solid var(--line);
display: flex; gap: 8px; align-items: center;
flex-shrink: 0;
}
#cb-txt {
flex: 1;
background: var(--card);
border: 1px solid var(--line);
border-radius: 22px;
padding: 9px 16px;
font-family: var(--font-display);
font-size: 14px;
outline: none;
color: var(--text);
transition: border-color .2s;
}
#cb-txt:focus { border-color: var(--accent-text); }
#cb-txt::placeholder { color: var(--text); opacity: 0.7; }
/* Op touch minimaal 16px — géén cosmetische keuze.
Safari op iOS zoomt de hele pagina in zodra een invoerveld met een
font-size ONDER 16px focus krijgt, en zoomt daarna niet meer terug: de
site blijft vergroot staan, ook nadat de chat weer dicht is. En focus
krijgt dit veld altijd — openWidget() in chatbot.js doet $txt.focus(),
dus één tik op de chatknop was genoeg. 16px is de drempel waaronder
Safari niet meer ingrijpt.
Dit NIET oplossen met maximum-scale/user-scalable in de viewport-meta:
dat verbiedt bezoekers het knijpzoomen op de hele site. */
@media (pointer: coarse) {
#cb-txt { font-size: 16px; }
}
#cb-send {
width: 40px; height: 40px;
border-radius: 50%;
background: var(--accent);
border: none; cursor: pointer;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
transition: transform .2s;
}
#cb-send:hover { transform: scale(1.08); }
#cb-send:disabled { opacity: .5; cursor: not-allowed; transform: none; }
#cb-send svg { width: 17px; height: 17px; fill: var(--on-accent); }
/* CTA-balk */
#cb-widget .cb-cta {
padding: 10px 14px 12px;
background: var(--bg-soft);
border-top: 1px solid var(--line);
text-align: center;
flex-shrink: 0;
}
#cb-widget .cb-cta a {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--accent);
color: var(--on-accent);
text-decoration: none;
padding: 10px 26px;
border-radius: 25px;
font-family: var(--font-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 13px;
transition: transform .2s;
}
#cb-widget .cb-cta a:hover { transform: translateY(-2px); }
/* Mobiel */
@media (max-width: 480px) {
#cb-widget { left: 12px; bottom: 12px; }
#cb-panel { width: calc(100vw - 24px); }
}
/* =========================================================
CHATWIDGET — popup-bubbel naast het icoon
Dag = mint + zwarte tekst, Nacht = lila + crème tekst.
Desktop: rechts van het icoon (icoon staat linksonder).
Mobiel : boven het icoon.
========================================================= */
#cb-bubble {
position: absolute;
bottom: 10px;
left: 74px; /* rechts van de 60px toggle + ruimte */
max-width: 230px;
background: var(--accent);
color: var(--zwart);
font-family: var(--font-display);
font-weight: 400;
font-size: 13px;
line-height: 1.4;
padding: 11px 30px 11px 15px; /* ruimte rechts voor het kruisje */
border-radius: 20px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
opacity: 0;
transform: scale(0.8);
transform-origin: bottom left;
pointer-events: none;
transition: opacity .3s ease, transform .3s ease; /* fade-out bij sluiten */
z-index: 3;
}
html.night #cb-bubble { color: var(--creme); }
#cb-bubble.show {
opacity: 1;
transform: scale(1);
pointer-events: auto;
animation: cb-bubble-pop .4s cubic-bezier(.34, 1.56, .64, 1); /* fade-in + pop */
}
@keyframes cb-bubble-pop {
0% { opacity: 0; transform: scale(0.8); }
60% { transform: scale(1.04); }
100% { opacity: 1; transform: scale(1); }
}
/* Staartje (wijst naar het icoon, dus naar links) */
/* Sluitknop */
#cb-bubble-x {
position: absolute;
top: 6px; right: 9px;
background: none;
border: none;
color: currentColor;
font-size: 12px;
line-height: 1;
cursor: pointer;
opacity: 0.65;
padding: 2px;
}
#cb-bubble-x:hover { opacity: 1; }
/* Mobiel: bubbel boven het icoon (het staartje is er bewust uit — zie boven) */
@media (max-width: 480px) {
#cb-bubble {
left: 0;
bottom: 74px;
transform-origin: bottom left;
}
}
/* =========================================================
MENUKAART — FLIPBOOK
De pagina's zijn de gedrukte kaart (assets/menu/page-NN.webp) en blijven
precies zoals ze ontworpen zijn: geen thema-filter, geen kleuring over het
beeld. Alles eromheen — pijlen, teller, zoomlaag — volgt wél het thema en
gebruikt de tokens (dag = mint, nacht = lila).
========================================================= */
/* Kortere hero: het boek wordt op vensterhoogte geschaald, dus elke pixel die
de hero minder inneemt, is een pixel grotere menukaart. */
.hero--slim .hero__inner {
padding-block: clamp(2rem, 6vw, 3.5rem) clamp(1.25rem, 3vw, 2rem);
}
.fb {
--fb-ar-page: var(--fb-pw) / var(--fb-ph); /* één pagina */
--fb-ar-spread: calc(var(--fb-pw) * 2) / var(--fb-ph); /* twee naast elkaar */
--fb-avail: min(calc(100vw - 2 * var(--gutter) - 170px), 1360px); /* -170px = de twee pijlen ernaast */
--fb-turn: 720ms;
/* Het moment waarop het blad door de 90 graden gaat en dus van kant wisselt.
Uitgerekend uit --fb-ease: die bereikt de helft van de rotatie op 41,6%
van de tijd, niet op 50%. Verander je de easing, reken dit dan opnieuw. */
--fb-swap: 300ms;
/* Een blad moet als een blad bewegen: langzaam los, versnellen, uitzakken.
Hier stond cubic-bezier(0.26, 0.72, 0.24, 1) — die haalt 102 graden al na
144 ms (een vijfde van de tijd), dus de pagina wás al om terwijl er nog
een halve seconde een dunne strook stond na te draaien. Dat leest niet als
omslaan maar als een pagina die ververst. Deze curve doet de eerste 90
graden in ~300 ms. Verander hem niet terug zonder de rotatie per frame na
te rekenen. */
--fb-ease: cubic-bezier(0.45, 0.05, 0.35, 1);
margin-top: clamp(1.5rem, 4vw, 2.5rem);
}
/* ---------- Podium: pijlen links en rechts, boek in het midden ---------- */
.fb-stage {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: clamp(0.5rem, 2vw, 1.75rem);
padding-inline: var(--gutter);
}
/* Het venster is precies één spread breed en verbergt wat ernaast valt — op
mobiel is het één pagina breed en schuift het boek eronder heen en weer. */
.fb-viewport {
position: relative;
flex: 0 0 auto;
overflow: hidden; /* knipt af — géén perspective hier, zie .fb-frame */
touch-action: pan-y pinch-zoom; /* verticaal scrollen blijft werken */
cursor: zoom-in;
/* Hoogte eerst: de breedte volgt uit de verhouding. Nooit breder dan de
ruimte die er is, dus ook de tweede term is een hoogte. */
height: min(88vh, calc(var(--fb-avail) * var(--fb-ph) / (var(--fb-pw) * 2)));
aspect-ratio: var(--fb-ar-spread);
}
.fb-book {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform var(--fb-turn) var(--fb-ease);
}
.fb-book[hidden] { display: none; }
/* Dicht boek: de losse pagina in het midden in plaats van tegen de rand.
Let op de richting — het venster is één spread breed en knipt af wat
erbuiten valt. De omslag zit in de RECHTERhelft van het boek, dus moet het
boek naar LINKS om hem te centreren; de laatste pagina zit links en moet
dus naar rechts. Andersom schuif je ze precies half uit beeld. */
.fb-book[data-shift="start"] { transform: translateX(-25%); }
.fb-book[data-shift="end"] { transform: translateX(25%); }
/* De perspective staat bewust op een eigen laag, niet op .fb-viewport. WebKit
gaat rommelen zodra overflow: hidden en perspective op hetzelfde element
staan: de 3D-context wordt dan per frame opnieuw opgebouwd en dat zie je in
Safari als flikkeren van precies dit blok. */
.fb-frame {
position: absolute;
inset: 0;
perspective: 2600px;
}
/* ---------- Eén blad: voorkant = oneven pagina, achterkant = even ---------- */
.fb-leaf {
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
transform-origin: left center;
transform-style: preserve-3d;
transition: transform var(--fb-turn) var(--fb-ease);
/* Permanent, nooit aan/uit zetten — dat toggelen wás de verversing. De laag
bestaat door de 3D-rotatie plus backface-visibility toch al (gemeten: even
veel textuurgeheugen met en zonder), dit houdt hem alleen in leven zodat
het blad dat net geland is niet opnieuw gerasterd hoeft te worden. */
will-change: transform;
/* --dz zet script.js per blad op -0px, -1px, -2px ... Zonder dat liggen alle
zes bladen op exact dezelfde diepte, en dan is de dieptesortering van een
preserve-3d-context onbepaald — Safari wisselt dan per frame van volgorde
en dát is het flikkeren. Eén pixel verschil is genoeg om de knoop door te
hakken en is bij perspective 2600px onzichtbaar (0,04% schaalverschil).
De volgorde rotateY() vóór translateZ() is niet vrijblijvend: alleen zo
draait het teken van de diepte mee met het blad, waardoor de stapel links
(omgeslagen) precies andersom ligt dan de stapel rechts — wat een boek
nu eenmaal doet. Draai je ze om, dan is de diepte in beide standen gelijk
en klopt één van de twee stapels niet meer. */
transform: rotateY(0deg) translateZ(var(--dz, 0px));
}
.fb-leaf[data-flipped="true"] { transform: rotateY(-180deg) translateZ(var(--dz, 0px)); }
.fb-face {
position: absolute;
inset: 0;
overflow: hidden;
background: var(--zwart); /* de kaart is zelf donker ontworpen */
/* Welke kant van het blad je ziet, staat hier expliciet — niet overgelaten
aan backface-visibility. In WebKit houdt die eigenschap hier simpelweg
niet: het achtervlak schijnt door het voorvlak heen en je ziet de pagina
gespiegeld. Twee vlakken die om beurten zichtbaar zijn, is precies het
flikkeren in Safari. Nu wisselt de zichtbaarheid in één stap op --fb-swap,
het moment dat het blad edge-on staat en de wissel dus onzichtbaar is.
backface-visibility blijft staan als extra vangnet voor motoren waar hij
wél werkt; hij mag alleen niet meer de enige verdediging zijn. */
opacity: 1;
transition: opacity 0s linear var(--fb-swap);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.fb-face--back { transform: rotateY(180deg); opacity: 0; }
.fb-leaf[data-flipped="true"] .fb-face--front { opacity: 0; }
.fb-leaf[data-flipped="true"] .fb-face--back { opacity: 1; }
.fb-face img {
display: block;
width: 100%;
height: 100%;
object-fit: fill; /* beeld en vlak hebben dezelfde ratio */
}
/* Rugschaduw: donker bij de kneep, weg naar de buitenrand. Geeft het boek
diepte zonder ook maar iets aan het ontwerp van de pagina te veranderen. */
.fb-face::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(to right, rgba(0, 0, 0, 0.45), transparent 14%);
}
.fb-face--back::after {
background: linear-gradient(to left, rgba(0, 0, 0, 0.45), transparent 14%);
}
/* Het blad dat op dit moment draait, moet boven beide stapels liggen én iets
meer schaduw werpen: dat leest als optillen. */
/* Bewust géén box-shadow op het draaiende blad: box-shadow is geen
compositor-eigenschap, dus die dwingt het hele vlak — inclusief het beeld —
ieder frame opnieuw te tekenen, precies tijdens de omslag. De rugschaduw op
.fb-face::after staat stil en kost niets. */
/* ---------- Fallback zonder JS: alle pagina's onder elkaar ---------- */
.fb-fallback {
list-style: none;
display: grid;
gap: 1rem;
justify-items: center;
}
.fb-fallback img {
display: block;
width: min(100%, 420px);
height: auto;
border-radius: 6px;
}
/* ---------- Pijlen ---------- */
.fb-nav {
flex: 0 0 auto;
width: clamp(44px, 6vw, 58px);
aspect-ratio: 1;
display: grid;
place-items: center;
border-radius: 999px;
border: 1px solid var(--line);
background: var(--bg);
color: var(--accent-text);
cursor: pointer;
transition: background var(--transition), color var(--transition),
border-color var(--transition), opacity 200ms ease;
}
.fb-nav svg {
width: 42%;
height: 42%;
fill: none;
stroke: currentColor;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
}
.fb-nav:hover:not(:disabled) {
background: var(--accent);
border-color: var(--accent);
color: var(--on-accent);
}
.fb-nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.fb-nav:disabled { opacity: 0.3; cursor: default; }
.fb-nav[hidden] { display: none; }
/* ---------- Balk eronder: zoom, teller, PDF ---------- */
.fb-bar {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(0.75rem, 3vw, 1.5rem);
margin-top: clamp(1rem, 3vw, 1.5rem);
padding-inline: var(--gutter);
}
.fb-bar[hidden] { display: none; }
.fb-count {
font-size: 0.9rem;
letter-spacing: 0.08em;
color: var(--accent-text);
font-weight: 700;
min-width: 6ch;
text-align: center;
}
.fb-tool {
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-family: var(--font-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 0.72rem;
padding: 0.5rem 0.95rem;
border-radius: 999px;
border: 1px solid var(--line);
background: transparent;
color: var(--text-soft);
text-decoration: none;
cursor: pointer;
transition: background var(--transition), color var(--transition),
border-color var(--transition);
}
.fb-tool svg {
width: 15px;
height: 15px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.fb-tool:hover {
background: var(--accent);
border-color: var(--accent);
color: var(--on-accent);
}
.fb-tool:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Alleen een icoon: smaller, zodat er vijf naast elkaar passen op een telefoon. */
.fb-tool--icon { padding: 0.5rem 0.7rem; }
.fb-tool:disabled { opacity: 0.3; cursor: default; }
.fb-tool:disabled:hover {
background: transparent;
border-color: var(--line);
color: var(--text-soft);
}
.fb-hint {
margin-top: 0.75rem;
text-align: center;
font-size: 0.75rem;
color: var(--text-soft);
padding-inline: var(--gutter);
}
.fb-hint[hidden] { display: none; }
/* ---------- Zoomlaag ---------- */
/* Boven de chatwidget (#cb-widget, z-index 200): die staat linksonder en zou
anders dwars door de vergrote pagina heen prikken. */
.fb-zoom {
position: fixed;
inset: 0;
z-index: 300;
display: flex;
flex-direction: column;
background: rgba(28, 28, 30, 0.96);
}
.fb-zoom[hidden] { display: none; }
.fb-zoom__scroll {
flex: 1;
overflow: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
display: flex;
padding: 1rem;
}
.fb-zoom__img {
--z: 1;
display: block;
margin: auto; /* centreert én blijft naar beide kanten scrollbaar */
width: calc(min(100%, calc((100svh - 120px) * var(--fb-pw) / var(--fb-ph))) * var(--z));
max-width: none;
height: auto;
border-radius: 4px;
cursor: zoom-in;
transition: width 220ms ease;
}
.fb-zoom__img[data-zoomed="true"] { cursor: zoom-out; }
.fb-zoom__bar {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(0.3rem, 1.5vw, 0.6rem);
padding: 0.9rem 1rem calc(0.9rem + env(safe-area-inset-bottom));
border-top: 1px solid rgba(244, 240, 232, 0.16);
background: var(--zwart);
}
/* Sluiten zweeft rechtsboven in plaats van in de balk: die houdt zo ruimte
voor vijf knoppen (bladeren, zoomen, bladeren) op een telefoonscherm. */
.fb-zoom__close {
position: absolute;
top: max(0.9rem, env(safe-area-inset-top));
right: 0.9rem;
z-index: 2;
padding: 0.55rem;
background: rgba(28, 28, 30, 0.72);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.fb-zoom__close svg { width: 17px; height: 17px; }
/* De laag is altijd donker — ook in dagmodus — dus hier expliciet crème/lila
in plaats van de themavariabelen. */
.fb-zoom__bar .fb-count { color: var(--lila); }
.fb-zoom__bar .fb-tool,
.fb-zoom__close {
border-color: rgba(244, 240, 232, 0.24);
color: rgba(244, 240, 232, 0.78);
}
.fb-zoom__bar .fb-tool:hover:not(:disabled),
.fb-zoom__close:hover {
background: var(--lila);
border-color: var(--lila);
color: var(--zwart);
}
.fb-zoom__bar .fb-tool:disabled:hover {
background: transparent;
border-color: rgba(244, 240, 232, 0.24);
color: rgba(244, 240, 232, 0.78);
}
.fb-zoom__bar .fb-tool:focus-visible,
.fb-zoom__close:focus-visible { outline-color: var(--lila); }
/* ---------- Mobiel: één pagina in beeld, pijlen over de randen ---------- */
@media (max-width: 900px) {
.fb { --fb-avail: calc(100vw - 1rem); }
.fb-stage { padding-inline: 0.5rem; }
.fb-viewport {
aspect-ratio: var(--fb-ar-page);
height: min(calc(100svh - 108px), calc(var(--fb-avail) * var(--fb-ph) / var(--fb-pw)));
}
/* Het boek blijft twee pagina's breed; het venster toont er één en schuift
naar links of rechts mee met de pagina waar je bent. */
.fb-book {
width: 200%;
transform: translateX(-50%); /* standaard: rechterhelft in beeld */
}
.fb-book[data-shift="start"],
.fb-book[data-shift="end"] { transform: translateX(-50%); }
.fb-book[data-view="left"] { transform: translateX(0); }
.fb-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 5;
background: rgba(28, 28, 30, 0.78);
border-color: rgba(244, 240, 232, 0.22);
color: var(--creme);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.fb-nav--prev { left: 0.35rem; }
.fb-nav--next { right: 0.35rem; }
.fb-bar { flex-wrap: wrap; }
}
/* Geen animatie voor wie daarom vraagt: de pagina wisselt dan direct. */
@media (prefers-reduced-motion: reduce) {
.fb-book, .fb-leaf { transition: none; }
.fb-face { transition: none; } /* meteen wisselen, niet na 300 ms */
.fb-zoom__img { transition: none; }
}
/* ---------- Tekstversie onder het boek ---------- */
.menu-text {
margin-top: clamp(2.5rem, 7vw, 4rem);
border-top: 1px solid var(--line);
padding-top: clamp(1.5rem, 4vw, 2rem);
}
.menu-text__summary {
font-family: var(--font-mono);
font-size: 0.85rem;
letter-spacing: 0.04em;
color: var(--text-soft);
cursor: pointer;
padding-block: 0.35rem;
}
.menu-text__summary:hover { color: var(--accent-text); }
.menu-text__summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.menu-text[open] .menu-text__summary { margin-bottom: clamp(1.75rem, 4vw, 2.5rem); }