/* ───────────────────────────────────────────────────────────────── Iselmar v2 — design system Mobile-first, square corners, no em-dashes, no numbering. League Spartan headlines, Lora body, Lekton numerals. ───────────────────────────────────────────────────────────────── */ /* Geen blauwe tap-highlight-flits bij tikken (native gevoel, hele gastsite). */ html { -webkit-tap-highlight-color: transparent; } /* Paginakleur op zodat de korte blank-frame tussen pagina-navigaties (iOS standalone heeft geen cross-document view transitions) warm-wit is i.p.v. een harde witte flits. Alle pagina's hebben body-bg #F3F0EA. */ html { background-color: #F3F0EA; } /* iOS: vul de bottom safe-area met de nav-navy zodat er geen warm-witte strip onder de vaste bottom-nav (.iv-bnav, #2F4157) doorschijnt. Alleen zichtbaar bij een echte inset (env>0); blijft achter de nav (z-index 49 < 50). Raakt de pagina-flits (#F3F0EA) en de bovenkant niet. */ body::after { content:''; position:fixed; left:0; right:0; bottom:0; height:env(safe-area-inset-bottom,0); background:#2F4157; z-index:49; pointer-events:none; } :root { /* ── Hero-tokens (12 jul) — ÉÉN bron voor alle hero's, zodat "gelijk" niet per pagina losgetrokken kan worden. Optie A: alle pagina's even hoog. Gebruik: elke hero-block refereert var(--hero-*) i.p.v. eigen getallen. ── */ --hero-h-desk: clamp(560px, 60vh, 620px); /* effectief 560 @1440×900 — overal gelijk */ --hero-h-mob: 460px; --hero-h1-desk: 52px; --hero-h1-mob: 34px; --hero-pad-x: max(40px, calc(50vw - 520px)); /* → gecentreerde 1040-kolom */ --hero-pad-bot-desk: 56px; --hero-pad-bot-mob: 28px; --hero-radius-mob: 26px; /* Verticale titel-verankering (12 jul): content wordt BOVEN-uitgelijnd op een vaste afstand, zodat de titel op ELKE hero op dezelfde hoogte staat (was: onderaan uitgelijnd → titel zweefde per pagina op 150–364px). */ --hero-pad-top-desk: 160px; /* titel op ~189 = gebalanceerd zoals de referentie (was 132 = te hoog/top-heavy) */ --hero-pad-top-mob: 108px; /* Kleurtokens. --accent = lichtblauw water uit /images/logo.png. --navy = canon-navy #2F4157 (CLAUDE.md §4): primaire UI/koppen/CTA's. (Was #035372 = het diepe logo-randblauw; dat leeft nu als --deep voort.) --navy-d/-xd zijn de donkerdere hover/active-varianten van --navy. */ --navy: #2F4157; --navy-d: #26354A; --navy-xd:#1C2836; --deep: #035372; --teal: #46677C; /* palet-B: steel-donker (was teal-tekst #0A6685) */ --teal-d: #3A5563; --merk: #577C8E; /* logo-steel: iconen, decoratie, actieve staat */ --merk-tekst:#46677C; /* AA op wit/crème */ --merk-soft: #EAF0F4; --beige: #FFFFFF; --beige-2:#FFFFFF; --beige-3:#E6D9CF; /* borders/dividers (--beige-dark) — blijft beige */ --sky: #C7D9E5; --sky-d: #A8C2D5; --ink: #1B2A3B; --ink-70: rgba(3,83,114,0.72); --ink-50: rgba(3,83,114,0.52); --ink-30: rgba(3,83,114,0.30); --white: #ffffff; --line: rgba(3,83,114,0.12); --line-d: rgba(255,255,255,0.18); --accent: #46677C; /* steel-donker — fel teal uitgefaseerd (Nick 8 jul: 'vervang alle fel lichtblauwe') */ /* CLAUDE.md aliassen + a11y-tokens (Fase 1 — 2026-05-14) */ --terracotta: var(--accent); /* alias voor accent */ --navy-light: var(--teal); /* alias voor teal */ --beige-dark: var(--beige-3); /* alias voor beige-3 */ --muted: rgba(3,83,114,0.65); /* leesbare tekst, WCAG AA contrast */ --success: #059669; --warning: #D97706; --danger: #DC2626; --ff-display: 'Inter', system-ui, -apple-system, sans-serif; --ff-body: 'Lora', Georgia, serif; --ff-mono: 'Inter', system-ui, -apple-system, sans-serif; /* ── M3-spacingtokens (fase 7 / F4 — optie B "Iselmar-schaal") ── Bron: audit/spacing/05-implementatieplan.md. Live-integratie van de voorstel-tokens.css; sindsdien dé spacing-taal voor de hele gast-app. */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:28px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-14:56px; --sp-16:64px; --sp-gutter:var(--sp-5); /* paginazijrand 20 (was 18) */ --sp-section:var(--sp-8); /* tussen secties 32 */ --sp-block:var(--sp-4); /* intra-blok / kop→lead 16 */ --sp-card-pad:var(--sp-6); /* kaart-padding 24 (was 22) */ --sp-card-pad-tight:var(--sp-5); /* compacte kaart 20 */ --sp-gap:var(--sp-3); /* kaart-/tegel-gap 12 */ --sp-gap-s:var(--sp-2); /* knop-/chip-gap 8 */ --sp-stack-xs:var(--sp-1); /* micro 4 */ --sp-stack-s:var(--sp-2); /* eyebrow→kop 8 */ --gap-icon-label:var(--sp-2); /* knop-icoon→label 8 */ --sp-bnav:96px; /* bottom-nav-clearance */ } /* ── Hero reveal fail-safe (13 jul) ────────────────────────────────────── Alle hero's onthullen via een CSS-animatie/-transition die start op opacity:0 (home: .v3-hero-in>*, vv-pagina's: .vv-hero.vv-rv, activiteiten: .vv-act-hero-in). Een geoccludeerde webview (o.a. de in-app preview-pane) behandelt zichzelf als niet-zichtbaar en PAUZEERT die animaties op frame 0 → de hero blijft onzichtbaar/opgepropt staan (en rAF-JS draait niet). chrome.js zet .iv-revealed op ná de reveal-duur; dan pinnen we de hero alsnog zichtbaar. Op een normale load is de animatie dan al klaar → deze regel is dan een no-op. Scope = enkel de hero, dus scroll-reveals (.v3-rv / losse .vv-rv onder de vouw) blijven hun animatie behouden. */ html.iv-revealed .v3-hero-in > *, html.iv-revealed .vv-hero.vv-rv, html.iv-revealed .vv-act-hero-in{ opacity:1 !important; transform:none !important; } /* Globale focus-indicatie — WCAG 2.4.7 AA. Werkt op alle interactieve elementen (knoppen, links, inputs) zonder hover-states te raken. */ *:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Toast/live-region — gepaard met window.IvToast helper in iselmar-v2-chrome.js. Bij `hidden` attribuut wordt niets getoond. */ .iv-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 9999; background: var(--navy); color: var(--white); font-family: var(--ff-display); font-size: 14px; font-weight: 500; padding:var(--sp-3) var(--sp-5); border-radius: 6px; box-shadow: 0 4px 16px rgba(20,34,51,0.2); max-width: 90vw; pointer-events: none; } .iv-toast[data-type="error"] { background: var(--danger); } .iv-toast[data-type="success"] { background: var(--success); } .iv-toast[data-type="warning"] { background: var(--warning); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } /* Verticaal: native rubber-band/bounce-back AAN (gastwens) zodat de pagina aan boven- en onderrand terugveert zoals een echte app. Horizontaal: overscroll dicht, zodat een per ongeluk zijwaartse veeg geen swipe-terug/chaining triggert. */ html, body { overscroll-behavior-x: none; overscroll-behavior-y: auto; } body { touch-action: manipulation; /* geen double-tap-zoom + geen 300ms tap-delay; pinch-zoom blijft mogelijk */ background: var(--beige); color: var(--ink); font-family: var(--ff-body); font-size: 15px; line-height: 1.55; min-height: 100vh; -webkit-font-smoothing: antialiased; /* Ruimte voor de sticky bnav-bar onderaan (vol breedte, ~64px hoog). */ padding-bottom: calc(64px + env(safe-area-inset-bottom, 0)); } @media (min-width: 860px) { body { padding-bottom: 0; } } a { color: inherit; } img { display: block; max-width: 100%; } button { font-family: inherit; } /* ─── Type scale ─── */ .iv-eye { font-family: var(--ff-mono); font-weight: 400; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal); display: block; } .iv-eye.on-dark { color: rgba(255,255,255,0.7); } .iv-h1 { font-family: var(--ff-display); font-weight: 600; font-size: 32px; line-height: 1.05; letter-spacing: -0.01em; color: var(--navy); margin: 0; } .iv-h2 { font-family: var(--ff-display); font-weight: 600; font-size: 24px; line-height: 1.10; letter-spacing: -0.005em; color: var(--navy); margin: 0; } .iv-h3 { font-family: var(--ff-display); font-weight: 600; font-size: 18px; line-height: 1.15; color: var(--navy); margin: 0; } .iv-h1.on-dark, .iv-h2.on-dark, .iv-h3.on-dark { color: var(--white); } .iv-body, p.iv-body { font-family: var(--ff-body); font-size: 15px; line-height: 1.55; color: var(--ink-70); margin: 0; } .iv-body-s, p.iv-body-s { font-family: var(--ff-body); font-size: 13.5px; line-height: 1.5; color: var(--ink-70); margin: 0; } .iv-body.on-dark, .iv-body-s.on-dark { color: rgba(255,255,255,0.8); } .iv-ui { font-family: var(--ff-display); font-weight: 500; font-size: 13px; letter-spacing: 0.02em; color: var(--navy); } .iv-ui-s { font-family: var(--ff-display); font-weight: 500; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-50); } .iv-num { font-family: var(--ff-mono); font-variant-numeric: tabular-nums; color: var(--navy); } @media (min-width: 860px) { .iv-h1 { font-size: 56px; line-height: 1.0; letter-spacing: -0.015em; } .iv-h2 { font-size: 36px; line-height: 1.08; letter-spacing: -0.01em; } .iv-h3 { font-size: 22px; } .iv-body { font-size: 16px; } } /* ─── Buttons ─── */ .iv-btn { display: inline-flex; align-items: center; justify-content: center; gap:var(--sp-2); font-family: var(--ff-display); font-weight: 500; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 0; cursor: pointer; text-decoration: none; white-space: nowrap; padding:var(--sp-3) var(--sp-gutter); height: 44px; border: 1px solid transparent; transition: background 0.18s, color 0.18s, border-color 0.18s; } .iv-btn-sm { padding:var(--sp-2) var(--sp-4); font-size: 12px; height: 32px; } .iv-btn-lg { padding:var(--sp-4) var(--sp-6); font-size: 14px; height: 52px; } .iv-btn-block { width: 100%; } .iv-btn-primary { background: var(--navy); color: var(--white); border-color: var(--navy); } .iv-btn-primary:hover { background: var(--navy-d); } .iv-btn-accent { background: var(--accent); color: var(--white); border-color: var(--accent); } .iv-btn-accent:hover { filter: brightness(0.95); } .iv-btn-ghost { background: transparent; color: var(--navy); border-color: var(--navy); } .iv-btn-ghost:hover { background: var(--navy); color: var(--white); } .iv-btn-ghost-l { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.6); } .iv-btn-ghost-l:hover { background: rgba(255,255,255,0.08); } .iv-btn-light { background: var(--white); color: var(--navy); border-color: var(--line); } .iv-btn-light:hover { background: var(--beige); } .iv-btn-flat { background: transparent; color: var(--navy); border: none; padding: 0; height: auto; text-transform: none; letter-spacing: 0; font-size: 13px; } /* ─── Layout ─── */ .iv-shell { background: var(--beige); min-height: 100vh; display: flex; flex-direction: column; } .iv-pad-x { padding-left:var(--sp-5); padding-right:var(--sp-5); } @media (min-width: 860px) { .iv-pad-x { padding-left: 96px; padding-right: 96px; } } .iv-section { padding:var(--sp-8) var(--sp-5) 0; } .iv-section-tight { padding:var(--sp-6) var(--sp-5) 0; } @media (min-width: 860px) { .iv-section { padding: 88px 96px 0; } .iv-section-tight { padding:var(--sp-16) 96px 0; } } .iv-section-dark { background: var(--navy); color: var(--white); margin-top: 36px; padding:var(--sp-10) 0 44px; } .iv-section-dark .iv-eye { color: rgba(255,255,255,0.7); } .iv-section-dark .iv-h1, .iv-section-dark .iv-h2, .iv-section-dark .iv-h3 { color: var(--white); } .iv-section-dark .iv-body, .iv-section-dark .iv-body-s { color: rgba(255,255,255,0.8); } @media (min-width: 860px) { .iv-section-dark { margin-top:var(--sp-14); padding:var(--sp-16) 0 72px; } } .iv-section-beige2 { background: var(--beige-2); } /* ─── Mhead-skeleton (anti-CLS) ─── chrome.js (defer) injecteert .iv-mhead pas NA DOMContentLoaded. Tot dan zou de gebruiker een lege strook bovenaan zien (body padding-top is wel gereserveerd via @media query, maar zonder visuele invulling). Een CSS- pseudo-element ::before op body toont een donkere balk als skeleton — zelfde positie + hoogte + achtergrond als de echte iv-mhead. Wanneer chrome.js de echte iv-mhead injects (z-index 30), ligt die er bovenop met content (back-knop, logo, avatar). Zero layout-shift; gebruiker ziet alleen "lege balk → balk met inhoud". */ body[data-header="dark"]::before, body[data-header="light"]::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: calc(56px + env(safe-area-inset-top, 0)); z-index: 29; pointer-events: none; } body[data-header="dark"]::before { background: var(--navy, #2F4157); } body[data-header="light"]::before { background: #F3F0EA; } @media (min-width: 1100px) { /* Desktop: iv-dhead heeft height 60px. */ body[data-header="dark"]::before, body[data-header="light"]::before { height: 60px; } } /* ─── Mobile header (fixed top with hamburger + logo + search) ─── */ /* Was `position: sticky`, maar dat is in iOS WKWebView (Capacitor) niet betrouwbaar zodra de pagina lange content of een overlay-popup heeft — de header scrollde dan mee i.p.v. te blijven plakken. `fixed` werkt in alle browsers consistent. Body-compensatie zie `.iv-mhead-spacer` verderop. */ .iv-mhead { position: fixed; top: 0; left: 0; right: 0; z-index: 30; /* iOS safe-area-top opnemen zodat status-bar (NL/batterij/Dynamic Island) niet over de nav-content valt in Capacitor/PWA-modus. */ padding-top: env(safe-area-inset-top, 0); /* Symmetrische horizontale ademruimte (Nick 20 jul): logo links en de taal-toggle rechts krijgen gelijke rand-afstand i.p.v. tegen de rand te plakken. max() vangt de notch-safe-area in landscape op. */ padding-left: max(14px, env(safe-area-inset-left, 0)); padding-right: max(14px, env(safe-area-inset-right, 0)); height: calc(56px + env(safe-area-inset-top, 0)); /* Flex met justify-content: space-between: het LOGO staat links (in-flow, Nick 20 jul) en de taal-toggle rechts via .iv-mhead-lang { margin-left:auto }. Een eventuele back-knop staat vóór het logo. */ display: flex; align-items: center; justify-content: space-between; background: var(--navy); color: var(--white); border-bottom: 1px solid var(--line-d); } /* Body-compensatie nu de mhead `fixed` is. Op transparante header-pagina's (hero overlapt de nav bewust) géén padding zodat het hero-effect blijft. */ @media (max-width: 1099px) { body[data-header="light"], body[data-header="dark"] { padding-top: calc(56px + env(safe-area-inset-top, 0)); } } .iv-mhead-light { background: #F3F0EA; color: var(--navy); border-bottom-color: var(--line); } .iv-mhead button { background: none; border: none; cursor: pointer; height: 44px; width: 44px; display: grid; place-items: center; color: inherit; } .iv-mhead svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .iv-mhead-title { text-align: center; font-family: var(--ff-display); font-weight: 500; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; } .iv-mhead-logo { /* Logo LINKS uitgelijnd (Nick 20 jul): in-flow ná de back-slot i.p.v. absoluut gecentreerd. De back-placeholder (44px breed, ook als 'hidden') houdt de x-positie identiek op élke pagina — met of zonder back-knop — en de taal-toggle staat rechts via .iv-mhead-lang { margin-left:auto }. Verticaal centreren doet de mhead zelf (align-items:center, incl. iOS safe-area-padding), dus geen absolute/translate meer nodig. */ position: relative; /* Optie A (Nick 20 jul): logo hard-links. Geen extra inset — de 14px mhead-padding zet 't symmetrisch met de taal-toggle rechts (ook 14px). Staat er een terug-pijl, dan schuift het logo in-flow ernaast op. */ margin-left: 0; display: inline-flex; flex-direction: column; align-items: center; line-height: 1; gap:var(--sp-1); width: fit-content; flex: 0 0 auto; } .iv-mhead-logo .word { font-family: var(--ff-display); font-weight: 600; letter-spacing: 0.18em; font-size: 14px; color: inherit; } /* De ISELMAR-blokjes zitten ~40% van links in logo.png (de swoosh+sterren rechts trekken de bounding-box mee). Schuif de img +9.9% van eigen breedte naar rechts zodat de BLOKJES exact in het paginamidden staan i.p.v. het hele logo. */ .iv-mhead-logo img { height: 40px; width: auto; max-width: none; display: block; flex: 0 0 auto; } /* Mockup-stijl rond back-knop (matched iv-ad-mobhead-back op booking-pages): 36×36 rond met lichte witte tint background op donkere navy header, subtiel navy tint op lichte header. Consistent over alle pages. */ .iv-mhead-back { /* Optie A (Nick 20 jul): terug-knop in-flow links. Normaal is de knop display:none (zie [hidden]-regel) → het logo staat hard-links. Zodra de pijl verschijnt (sub-pagina of in-shell detail) komt hij vóór het logo en schuift het logo ernaast op. margin-right geeft de lucht tussen pijl en logo (geldt alleen als de pijl zichtbaar is). */ display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-right: 14px; background: rgba(255, 255, 255, 0.12); border: 0; border-radius: 50%; color: inherit; cursor: pointer; transition: background 0.15s, transform 0.12s; } .iv-mhead-back:hover { background: rgba(255, 255, 255, 0.22); } .iv-mhead-back:active { transform: scale(0.94); } .iv-mhead-light .iv-mhead-back { background: rgba(20, 34, 51, 0.06); } .iv-mhead-light .iv-mhead-back:hover { background: rgba(20, 34, 51, 0.12); } /* Optie A (Nick 20 jul): verborgen terug-knop neemt GEEN ruimte in (display:none i.p.v. een 44px-placeholder), zodat het logo dan hard-links staat. Zodra de knop wél getoond wordt, schuift het logo in-flow ernaast op. */ .iv-mhead-back[hidden] { display: none; } /* Vangnet (13 jul): de hamburger/avatar hoort ALTIJD rechts, ook als een pagina-stylesheet de back-placeholder tóch op display:none zet — anders schuift hij als enige flex-item naar links (het logo staat absoluut). */ .iv-mhead .iv-mhead-avatar { margin-left: auto; } .iv-mhead-back svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .iv-mhead-right { /* Onzichtbare placeholder rechts om de flex-layout in balans te houden. */ display: inline-block; width: 44px; height: 44px; margin-right:var(--sp-2); } /* ─── Mobile header avatar (rechtsboven) ─── Apple HIG: avatar-cirkel als account-trigger. Bij anoniem person-icoon, bij ingelogd initialen in accent-kleur. 36×36 om met de back-knop op gelijke maat te liggen. Tap → opent account-widget sidebar via data-mhead-menu event-delegatie. */ .iv-mhead-avatar { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: transparent; border: 0; border-radius: 50%; color: inherit; cursor: pointer; margin-right:var(--sp-2); padding: 0; font-family: var(--ff-display, 'Inter', system-ui, -apple-system, sans-serif); font-weight: 700; font-size: 13px; letter-spacing: 0.02em; transition: background 0.15s, transform 0.12s; } .iv-mhead-avatar:hover { background: rgba(255, 255, 255, 0.10); } .iv-mhead-avatar:active { transform: scale(0.94); } .iv-mhead-avatar svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .iv-mhead-avatar.is-loggedin { background: transparent; color: inherit; } .iv-mhead-avatar.is-loggedin:hover { background: rgba(255, 255, 255, 0.10); } .iv-mhead-light .iv-mhead-avatar { background: rgba(20, 34, 51, 0.06); } .iv-mhead-light .iv-mhead-avatar:hover { background: rgba(20, 34, 51, 0.12); } .iv-mhead-light .iv-mhead-avatar.is-loggedin { background: var(--accent, #46677C); color: #fff; } .iv-mhead-avatar-ini { line-height: 1; user-select: none; } /* Notificatie-badge op het Account-icoon in de bottom-nav (mobiel). */ .iv-bnav a[data-bnav="account"] { position: relative; } .iv-bnav-account-badge { position: absolute; top: 6px; right: calc(50% - 22px); min-width: 18px; height: 18px; padding:0 var(--sp-1); border-radius: 9px; background: #DC2626; color: #fff; font-family: var(--ff-display, sans-serif); font-weight: 700; font-size: 11px; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px #fff; pointer-events: none; z-index: 2; } /* Mobile header is voor pure mobiel; verberg pas op echte desktop. Smartphone landscape (max 932×430 of vergelijkbaar) blijft de mobile UI. */ @media (min-width: 1100px) { .iv-mhead { display: none; } } /* ─── Desktop header ─── */ .iv-dhead { display: none; position: fixed; top: 0; left: 0; right: 0; z-index: 30; height: 60px; background: var(--white); color: var(--navy); border-bottom: 1px solid var(--line); grid-template-columns: 1fr auto 1fr; align-items: center; padding:0 var(--sp-10); transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease; } .iv-dhead.transparent { background: transparent; border-bottom-color: transparent; color: var(--white); } .iv-dhead.dark { background: var(--navy); color: var(--white); border-bottom-color: var(--line-d); } /* Login-knop op dark/transparent header — witte rand i.p.v. navy. Hogere specificity + !important om de eerdere .iv-btn-ghost (navy) regel en `.iv-dhead.transparent .iv-btn-ghost` (regel 394) te overrulen. */ body[data-header="dark"] .iv-dhead .iv-btn-ghost, body[data-header="transparent"] .iv-dhead .iv-btn-ghost, .iv-dhead.dark .iv-btn-ghost, .iv-dhead.transparent .iv-btn-ghost { color: #fff !important; border-color: rgba(255,255,255,0.6) !important; background: transparent !important; } body[data-header="dark"] .iv-dhead .iv-btn-ghost:hover, body[data-header="transparent"] .iv-dhead .iv-btn-ghost:hover, .iv-dhead.dark .iv-btn-ghost:hover, .iv-dhead.transparent .iv-btn-ghost:hover { background: rgba(255,255,255,0.08) !important; color: #fff !important; } /* User-icoon-knop in de iv-dhead (alleen zichtbaar wanneer ingelogd) */ .iv-dhead-user { height: 40px; width: 40px; display: grid; place-items: center; background: transparent; border: 1px solid currentColor; color: inherit; border-radius: 999px; cursor: pointer; padding: 0; } .iv-dhead.dark .iv-dhead-user, .iv-dhead.transparent .iv-dhead-user { border-color: rgba(255,255,255,0.6); } .iv-dhead-user:hover { background: rgba(127,127,127,0.1); } .iv-dhead.dark .iv-dhead-user:hover, .iv-dhead.transparent .iv-dhead-user:hover { background: rgba(255,255,255,0.08); } .iv-dhead-user svg { width: 20px; height: 20px; } .iv-dhead-user[hidden] { display: none !important; } /* Hamburger-knop in de iv-dhead (vervangt Login-knop / user-icoon). */ .iv-dhead-menu { height: 40px; width: 40px; display: grid; place-items: center; background: transparent; border: 0; color: inherit; cursor: pointer; padding: 0; position: relative; } .iv-dhead-menu:hover { background: rgba(127,127,127,0.1); } .iv-dhead.dark .iv-dhead-menu:hover, .iv-dhead.transparent .iv-dhead-menu:hover { background: rgba(255,255,255,0.08); } .iv-dhead-menu svg { width: 24px; height: 24px; } /* Desktop-nav alleen op echte desktop. Smartphone landscape (tot ~932px breed) blijft de mobile webapp UI gebruiken. */ @media (min-width: 1100px) { .iv-dhead { display: grid; } } .iv-dhead .logo { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1; gap:var(--sp-1); width: fit-content; } .iv-dhead .logo .word { font-family: var(--ff-display); font-weight: 600; letter-spacing: 0.18em; font-size: 18px; color: inherit; } .iv-dhead .logo img { height: 44px; width: auto; max-width: none; display: block; flex: 0 0 auto; } /* Minimalistische dhead (jul 2026): logo/CTA/hamburger weg. Het grid blijft 1fr auto 1fr; zonder logo-kind moet de nav expliciet in de middenkolom (auto-placement zou 'm anders in kolom 1 zetten) en de taal-switcher in kolom 3 — zo staat de nav écht op viewport-midden. */ .iv-dhead nav { display: flex; gap:var(--sp-8); grid-column: 2; } .iv-dhead .right { grid-column: 3; } .iv-dhead nav a { font-family: var(--ff-display); font-weight: 500; font-size: 14px; letter-spacing: 0.02em; color: inherit; text-decoration: none; padding: 8px 16px; border-radius: 100px; border-bottom: 0; transition: background 0.18s ease; } /* Actief item = pill-highlight (topnav-redesign, Nick 10 jul) i.p.v. onderstreping. */ .iv-dhead nav a.is-active { background: rgba(255,255,255,0.16); font-weight: 600; } .iv-dhead nav a:hover { background: rgba(255,255,255,0.10); } /* Op de lichte (witte) balk een donkere highlight i.p.v. witte. */ .iv-dhead:not(.dark):not(.transparent) nav a.is-active { background: rgba(47,65,87,0.10); } .iv-dhead:not(.dark):not(.transparent) nav a:hover { background: rgba(47,65,87,0.06); } /* Home-pill op de voordeur — deterministisch via data-page (de JS-active-sync liep daar op een timing-race met de v3-homepage; CSS is racevrij). */ body[data-page="home"] .iv-dhead nav a[data-dnav="home"] { background: rgba(255,255,255,0.16); font-weight: 600; } body[data-page="home"] .iv-dhead:not(.dark):not(.transparent) nav a[data-dnav="home"] { background: rgba(47,65,87,0.10); } /* Desktop-nav met logo + Reserveer-CTA terug (desktop-variant jul 2026). Alles in de .iv-dhead-tak; mobiel (.iv-mhead/.iv-bnav) blijft ongemoeid. */ .iv-dhead .logo img { height: 26px; } .iv-dhead .right { display: inline-flex; align-items: center; gap: var(--sp-3); justify-self: end; } /* Telefoon-icoontje (Nick 10 jul: telefoon als icoontje, naast de taalkiezer). */ .iv-dhead-tel { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; color: inherit; text-decoration: none; transition: background 0.18s ease; } .iv-dhead-tel:hover { background: rgba(255,255,255,0.10); } .iv-dhead:not(.dark):not(.transparent) .iv-dhead-tel:hover { background: rgba(47,65,87,0.06); } .iv-dhead-tel svg { width: 20px; height: 20px; } /* "Nu boeken"-CTA in steel (merk-kleur), witte tekst — op elke balkvariant gelijk. */ .iv-dhead-cta { display: inline-flex; align-items: center; padding: 9px 20px; border-radius: 100px; font-family: var(--ff-ui); font-weight: 600; font-size: 14px; text-decoration: none; background: #577C8E; color: #fff !important; transition: background 0.2s ease; } .iv-dhead-cta:hover { background: #46677C; } .iv-dhead.dark .iv-dhead-cta, .iv-dhead.transparent .iv-dhead-cta { background: #577C8E; color: #fff !important; } .iv-dhead.dark .iv-dhead-cta:hover, .iv-dhead.transparent .iv-dhead-cta:hover { background: #6E93A5; } /* ── Richere nav: Verblijven-dropdown + chevron + Reserveren-CTA (canon v1, navy/teal) ── */ .iv-dhead nav { align-items: center; } .iv-dhead-item { position: relative; display: inline-flex; align-items: center; } .iv-dhead-trigger { display: inline-flex; align-items: center; gap: 5px; } .iv-dhead-chev { width: 13px; height: 13px; stroke: currentColor; stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; } .iv-dhead-item:hover .iv-dhead-chev, .iv-dhead-item:focus-within .iv-dhead-chev, .iv-dhead-item.open .iv-dhead-chev { transform: rotate(180deg); } .iv-dhead-drop { position: absolute; top: calc(100% + 6px); left: -10px; min-width: 280px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 10px; box-shadow: 0 26px 54px -20px rgba(20,34,51,.5); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 40; } .iv-dhead-item:hover .iv-dhead-drop, .iv-dhead-item:focus-within .iv-dhead-drop, .iv-dhead-item.open .iv-dhead-drop { opacity: 1; transform: translateY(0); pointer-events: auto; } .iv-dhead .iv-dhead-drop a { display: flex; flex-direction: column; gap: 2px; padding: 10px 13px; border-radius: 11px; border-bottom: 0; color: var(--navy); } .iv-dhead .iv-dhead-drop a:hover { background: rgba(70,103,124,.08); border-bottom: 0; } .iv-dhead-drop strong { font-family: var(--ff-display); font-weight: 600; font-size: 14px; color: var(--navy); } .iv-dhead-drop span { font-size: 12px; color: var(--muted, rgba(3,83,114,.6)); } .iv-dhead-cta { color: #fff !important; white-space: nowrap; } @media (prefers-reduced-motion: reduce) { .iv-dhead-chev, .iv-dhead-drop { transition: none !important; } } .iv-dhead .right { display: flex; justify-content: flex-end; gap:var(--sp-gap); align-items: center; } .iv-dhead .right .lang { font-family: var(--ff-mono); font-size: 13px; color: inherit; } .iv-dhead.transparent .iv-btn-ghost { color: var(--white); border-color: rgba(255,255,255,0.6); } /* ─── Bottom nav (mobile) — sticky navy bar, vol breedte ─── */ .iv-bnav { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; padding: 8px 4px calc(8px + env(safe-area-inset-bottom, 0)); display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; background: #2F4157; border-top: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 -2px 12px rgba(15, 25, 40, 0.15); color: var(--white, #fff); view-transition-name: nav-bar; } .iv-bnav.iv-bnav-5 { grid-template-columns: repeat(5, 1fr); } .iv-bnav.iv-bnav-4 { grid-template-columns: repeat(4, 1fr); } .iv-bnav.iv-bnav-3 { grid-template-columns: repeat(3, 1fr); } .iv-bnav.iv-bnav-2 { grid-template-columns: repeat(2, 1fr); } .iv-bnav button, .iv-bnav a { background: none; border: none; cursor: pointer; text-decoration: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap:var(--sp-1); padding:var(--sp-1) 2px var(--sp-2); min-height: 44px; color: rgba(255, 255, 255, 0.55); position: relative; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; transition: color 0.18s ease, transform 0.12s cubic-bezier(.2,.7,.3,1); transform: scale(1); will-change: transform; } .iv-bnav button:active, .iv-bnav a:active { transform: scale(0.92); transition-duration: 0.05s; } .iv-bnav .lbl { font-family: var(--ff-display); font-weight: 600; font-size: 10px; letter-spacing: 0.04em; color: inherit; line-height: 1; } .iv-bnav svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; /* "Levend icoon": het actieve icoon groeit + tilt iets op, met dezelfde overshoot/bounce als het schuivende streepje. */ transform-origin: center bottom; transition: transform 0.42s cubic-bezier(0.34, 1.37, 0.64, 1); will-change: transform; } /* Active state (Apple HIG iOS Tab Bar): filled icon + accent label + bewegend 22px accent-streepje OVER de bnav heen — een echte iv-nav- underline span die met JS naar het actieve item glijdt. Bij ontbreken van JS (server-render) toont de fallback ::after gewoon een streepje onder het actieve item. */ .iv-bnav .is-active { color: #fff; } .iv-bnav .is-active svg { transform: translateY(-3px) scale(1.1); } @media (prefers-reduced-motion: reduce) { .iv-bnav svg { transition: none; } .iv-bnav .is-active svg { transform: none; } } /* BETROUWBARE BASIS: puur-CSS streepje onder het actieve item (geen JS, geen meting, geen env) → werkt identiek in Safari én standalone-PWA. Krijgt een overshoot scale-in. Dit is de vangnet-bron als de glijdende span faalt. */ .iv-bnav .is-active::after { content: ''; position: absolute; bottom: -3px; left: 50%; width: 22px; height: 3px; background: #fff; /* wit op navy — actieve label is ook wit (palet B: teal = alleen actie) */ border-radius: 100px; transform: translateX(-50%); animation: ivTabLineIn 0.3s cubic-bezier(0.34, 1.37, 0.64, 1); } @keyframes ivTabLineIn { from { transform: translateX(-50%) scaleX(0.35); opacity: 0; } to { transform: translateX(-50%) scaleX(1); opacity: 1; } } /* GLIJDENDE SPAN: neemt het ALLEEN over als JS heeft bevestigd dat 'ie zichtbaar binnen de nav staat (klasse .iv-ul-ok). Dan glijdt 'ie met overshoot en wordt de ::after verborgen. Faalt de span (bv. iOS-standalone waar 'ie off-screen belandde) → geen .iv-ul-ok → ::after blijft staan. */ .iv-bnav.iv-ul-ok .is-active::after { display: none; } .iv-nav-underline { position: absolute; /* Verticaal env-matched met de bnav-padding zodat 'ie op dezelfde hoogte als de ::after zit, in beide modi. Horizontaal zet JS de transform. */ bottom: calc(env(safe-area-inset-bottom, 0px) + 4px); top: auto; left: 0; width: 22px; height: 3px; border-radius: 100px; background: #fff; /* glijdende variant — zelfde wit als het ::after-vangnet */ pointer-events: none; z-index: 2; opacity: 0; transition: none; will-change: transform; } .iv-bnav.iv-ul-ok .iv-nav-underline { opacity: 1; transition: transform 0.42s cubic-bezier(0.34, 1.37, 0.64, 1); } @media (prefers-reduced-motion: reduce) { .iv-bnav .is-active::after { animation: none; } .iv-bnav.iv-ul-ok .iv-nav-underline { transition: none; } } .iv-nav-underline { backface-visibility: hidden; } /* Cross-document View Transitions: bij navigatie tussen pagina's morpht de browser de gemeenschappelijke elementen automatisch — geen witte flash meer tussen pagina's. Werkt in moderne Chrome/Edge; in Safari en oudere browsers is dit een no-op (de pagina laadt gewoon normaal). */ @view-transition { navigation: auto; } @media (prefers-reduced-motion: reduce) { .iv-nav-underline { transition: none; } } @media (min-width: 860px) { .iv-bnav { display: none; } } /* ─── Focus-modus op /login ─── Apple HIG + Booking pattern: auth-flows zijn focus-modes. Geen bottom- nav, geen avatar, geen install-prompt, geen iselmar-logo-header — niet afleiden tijdens conversie. De back-knop linksboven (iv-mhead-back) is altijd zichtbaar op deze view zodat de gast met één tap terug kan naar waar 'ie vandaan kwam. */ body.is-login .iv-bnav, body.is-login .iv-mhead-avatar, body.is-login .iv-mhead-logo, body.is-login .install-prompt, body.is-login #install-prompt { display: none !important; } /* "Account"-titel in mhead-midden tonen op login-pagina. Absoluut gecentreerd (zoals .iv-mhead-logo) zodat-ie midden in de viewport staat — de mhead is flex met space-between en de avatar is verborgen, dus zonder absolute zou de titel naar rechts schuiven. Wit op donkere navy nav-achtergrond. */ body.is-login .iv-mhead-title { display: block !important; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin-top: calc(env(safe-area-inset-top, 0) / 2); color: var(--white, #ffffff); font-family: var(--ff-display, 'Inter', system-ui, -apple-system, sans-serif); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; text-transform: none; } /* Back-knop wit-op-navy zodat-ie zichtbaar is op de donkere nav. */ body.is-login .iv-mhead-back { visibility: visible !important; pointer-events: auto !important; background: rgba(255, 255, 255, 0.12) !important; color: var(--white, #ffffff) !important; } body.is-login .iv-mhead-back[hidden] { display: inline-flex !important; } /* ─── Profiel op /profiel ─── iOS Settings-pattern: avatar-hero IN de page is het primaire anker. Header heeft alleen back-pijl + "Account"-titel midden — geen logo, geen avatar-knop. Install-prompt-overlay vervangen door rij in "Iselmar-app"-sectie. */ body.is-profiel .iv-mhead-logo, body.is-profiel .iv-mhead-avatar, body.is-profiel .iv-bnav, body.is-profiel .install-prompt, body.is-profiel #install-prompt { display: none !important; } /* Tickets-pagina: logo weg (mhead-titel "Boekingen" staat al), bnav blijft want het is een top-level destination. */ body.is-tickets .iv-mhead-logo { display: none !important; } /* Body-padding-bottom op /profiel kleiner — geen bottom-nav om ruimte voor te maken. Apple Settings-pattern: account is een focus-modus. */ body.is-profiel { padding-bottom: 0 !important; } body.is-profiel .iv-mhead-back { visibility: visible !important; pointer-events: auto !important; } body.is-profiel .iv-mhead-back[hidden] { display: inline-flex !important; } /* "Account"-titel midden in de header (zoals iOS Settings). text-transform/letter-spacing van de generieke .iv-mhead-title resetten — die heeft uppercase + brede tracking voor andere contexten. */ body.is-profiel .iv-mhead-title { display: block !important; flex: 1; text-align: center; font-family: var(--ff-display, 'Inter', system-ui, -apple-system, sans-serif); font-weight: 700; font-size: 17px; color: #fff; letter-spacing: -0.015em; text-transform: none; } /* Rechter-spacer (44px) gelijk aan de back-knop links zodat de title visueel EXACT in het scherm-midden valt. Anders zit-ie iets naar rechts (omdat alleen links een 44px element staat). */ body.is-profiel .iv-mhead::after { content: ''; display: block; width: 44px; height: 44px; flex: 0 0 auto; } /* ─── Cards (image-on-top stack) ─── */ .iv-card { background: var(--white); border: 1px solid var(--line); text-decoration: none; color: inherit; display: block; transition: transform 0.2s; } @media (hover:hover){ .iv-card:hover { transform: translateY(-2px); } } .iv-card .photo { position: relative; height: 160px; background-size: cover; background-position: center; background-color: var(--navy-d); } .iv-card .photo.h-100 { height: 100px; } .iv-card .photo.h-110 { height: 110px; } .iv-card .photo.h-120 { height: 120px; } .iv-card .photo.h-150 { height: 150px; } .iv-card .photo.h-170 { height: 170px; } .iv-card .photo.h-200 { height: 200px; } .iv-card .photo.h-220 { height: 220px; } .iv-card .photo.h-260 { height: 260px; } .iv-card .body { padding:var(--sp-4) var(--sp-4) var(--sp-gutter); display: flex; flex-direction: column; } .iv-card .body.compact { padding:var(--sp-3) var(--sp-4) var(--sp-4); } .iv-card-overlay { position: relative; } .iv-card-overlay .photo { position: relative; } .iv-card-overlay .photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,34,51,0) 40%, rgba(20,34,51,0.75) 100%); } .iv-card-overlay .meta { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2; color: var(--white); } .iv-card-overlay .meta .iv-eye { color: rgba(255,255,255,0.8); margin-bottom:var(--sp-1); } .iv-card-overlay .meta .iv-h3 { color: var(--white); } /* split row card (110 image + body) */ .iv-card-split { background: var(--white); border: 1px solid var(--line); display: grid; grid-template-columns: 110px 1fr; gap: 0; text-decoration: none; color: inherit; } .iv-card-split .photo { background-size: cover; background-position: center; min-height: 110px; } .iv-card-split .body { padding:var(--sp-3) var(--sp-4); } /* ─── Hero (image header) ─── */ .iv-hero { position: relative; height: 360px; overflow: hidden; } .iv-hero .bg { position: absolute; inset: 0; background-size: cover; background-position: center; } .iv-hero::after { content: ''; position: absolute; inset: 0; background: rgba(20,34,51,0.32); } .iv-hero .overlay { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding:var(--sp-6) var(--sp-5); color: var(--white); } .iv-hero .overlay .iv-eye { color: rgba(255,255,255,0.85); margin-bottom:var(--sp-3); } .iv-hero .overlay .iv-h1 { color: var(--white); } @media (min-width: 860px) { .iv-hero { height: 620px; } .iv-hero .overlay { justify-content: center; padding: 76px 96px 0; } .iv-hero.lg-720 { height: 720px; } } /* Hero with darker top vignette so a transparent navbar is readable */ .iv-hero.with-top-shadow::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(15,23,35,0.65) 0%, rgba(15,23,35,0.05) 25%, transparent 60%); pointer-events: none; } /* ─── Section head ─── */ .iv-shead { margin-bottom:var(--sp-5); } .iv-shead .iv-eye { margin-bottom:var(--sp-3); } .iv-shead .iv-h2 { margin: 0; } .iv-shead .iv-body { margin-top:var(--sp-3); max-width: 560px; } @media (min-width: 860px) { .iv-shead.big { margin-bottom:var(--sp-7); } } /* ─── Chips / filters ─── */ .iv-chip { background: var(--white); color: var(--navy); border: 1px solid var(--line); border-radius: 0; padding:var(--sp-2) var(--sp-4); font-family: var(--ff-display); font-weight: 500; font-size: 12px; letter-spacing: 0.04em; cursor: pointer; white-space: nowrap; } .iv-chip.is-active { background: var(--navy); color: var(--white); border-color: var(--navy); } .iv-chips-row { display: flex; gap:var(--sp-2); overflow-x: auto; padding-bottom:var(--sp-4); margin: 0 -20px; padding-left:var(--sp-5); padding-right:var(--sp-5); scrollbar-width: none; } .iv-chips-row::-webkit-scrollbar { display: none; } /* ─── Horizontal scroll strip ─── */ .iv-hscroll { display: flex; gap:var(--sp-gap); overflow-x: auto; padding-bottom:var(--sp-2); scrollbar-width: none; } .iv-hscroll::-webkit-scrollbar { display: none; } .iv-hscroll > * { flex-shrink: 0; } /* ─── Grids ─── */ .iv-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap:var(--sp-2); } .iv-grid-list { display: flex; flex-direction: column; gap:var(--sp-gap); } @media (min-width: 720px) { .iv-grid-list.md-2col { display: grid; grid-template-columns: 1fr 1fr; } } @media (min-width: 860px) { .iv-grid-list.md-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap:var(--sp-5); } } @media (min-width: 860px) { .iv-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap:var(--sp-5); } .iv-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap:var(--sp-4); } .iv-grid-2-md { display: grid; grid-template-columns: 1fr 1fr; gap:var(--sp-6); } } /* ─── Stats strip (on dark) ─── */ .iv-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-d); border-bottom: 1px solid var(--line-d); margin:var(--sp-gutter) 0 var(--sp-6); } .iv-stats .stat { padding:var(--sp-4) var(--sp-1); text-align: center; border-right: 1px solid var(--line-d); } .iv-stats .stat:last-child { border-right: none; } .iv-stats .n { font-family: var(--ff-mono); font-size: 28px; color: var(--white); } .iv-stats .l { font-family: var(--ff-display); font-weight: 500; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.65); margin-top:var(--sp-1); } /* ─── Booking bar (mobile) ─── */ .iv-bb { background: var(--white); border: 1px solid var(--line); padding:var(--sp-4); } .iv-bb-rows { display: flex; flex-direction: column; gap:var(--sp-3); } .iv-bb-row { display: flex; align-items: center; gap:var(--sp-3); padding:var(--sp-3) var(--sp-3); background: var(--beige); border: 1px solid var(--line); } .iv-bb-row svg { width: 16px; height: 16px; stroke: var(--teal); fill: none; stroke-width: 1.6; flex-shrink: 0; } .iv-bb-row .lbl { font-family: var(--ff-display); font-weight: 500; font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-50); } .iv-bb-row .val { font-family: var(--ff-display); font-weight: 500; font-size: 13px; color: var(--navy); } .iv-bb-row .body { flex: 1; } /* desktop horizontal booking bar */ @media (min-width: 860px) { .iv-bb-h { background: var(--white); border: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, 1fr) auto; align-items: stretch; } .iv-bb-h .field { padding:var(--sp-4) var(--sp-5); border-right: 1px solid var(--line); display: flex; align-items: center; gap:var(--sp-gap); } .iv-bb-h .field:nth-last-child(2) { border-right: none; } .iv-bb-h .field svg { width: 20px; height: 20px; stroke: var(--teal); fill: none; stroke-width: 1.6; flex-shrink: 0; } .iv-bb-h .field .lbl { font-family: var(--ff-display); font-weight: 500; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-50); } .iv-bb-h .field .val { font-family: var(--ff-display); font-weight: 500; font-size: 14px; color: var(--navy); margin-top:var(--sp-1); } .iv-bb-h .submit { padding:0 var(--sp-8); height: auto; min-height: 76px; } } /* ─── Soft page transitions ─── */ /* Browsers met View Transitions API: gerichte morph van de actieve nav-chip (terracotta-pill float'd naar de nieuwe positie) + zachte cross-fade van de pagina-inhoud. De bnav-bar zelf blijft op zijn plek (gepairde VT-name) zodat de glass-pill niet flasht. */ @view-transition { navigation: auto; } /* Pagina-inhoud: GEEN fade meer (gaf flash-effect). De content swap't instant; oog wordt door de chip-float misleid. */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0ms; } /* De bnav zelf — zelfde positie op oud + nieuw → geen animatie, geen flash. */ ::view-transition-group(nav-bar) { animation-duration: 0ms; } ::view-transition-old(nav-bar), ::view-transition-new(nav-bar) { animation: none; opacity: 1; } /* De actieve chip — vloeiend van oude positie naar nieuwe. */ ::view-transition-group(nav-chip) { animation-duration: 340ms; animation-timing-function: cubic-bezier(.32, .72, 0, 1); } ::view-transition-old(nav-chip), ::view-transition-new(nav-chip) { animation-duration: 220ms; } /* Fallback (geen VT-support): traditioneel body-fade. Met VT actief wordt deze klasse niet meer toegepast (zie chrome.js). */ body { transition: opacity 180ms cubic-bezier(.4,0,.2,1); } body.iv-page-leaving { opacity: 0; } /* ─── Floating call-CTA (bel-widget) — shared op /horeca, /home, /omgeving. Op pagina's zonder eigen primaire CTA vangt deze knop twijfelaars op die liever bellen voor vragen, groepsboekingen of events. HEDNA 2022: 60% van directe hotelboekingen start met een telefoongesprek. Subtiele navy pill met telefoon-icoon op een ronde transparante achtergrond \u2014 niet pulserend rood om de primaire actie van de page niet te overschaduwen. */ .iv-fab-call { position: fixed; right: 16px; bottom: calc(90px + env(safe-area-inset-bottom, 0)); z-index: 60; display: inline-flex; align-items: center; gap:var(--sp-2); padding:var(--sp-3) var(--sp-gutter); /* Liquid Glass — identiek aan .iv-bnav voor visuele consistentie. Translucent navy + blur + inner-highlight zodat de knop oogt als een verlengstuk van de bottom-nav i.p.v. een losse navy bubbel. */ background: linear-gradient(180deg, rgba(60, 80, 105, 0.58) 0%, rgba(40, 55, 75, 0.62) 100%); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); color: var(--white); text-decoration: none; font-family: var(--ff-display, 'Inter', system-ui, -apple-system, sans-serif); font-weight: 600; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; border-radius: 100px; border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(0, 0, 0, 0.10), 0 10px 30px rgba(15, 25, 40, 0.22), 0 2px 6px rgba(15, 25, 40, 0.12); transition: transform 0.18s ease, box-shadow 0.18s ease; } .iv-fab-call:hover, .iv-fab-call:focus-visible { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(0, 0, 0, 0.10), 0 14px 36px rgba(15, 25, 40, 0.28), 0 3px 8px rgba(15, 25, 40, 0.16); } .iv-fab-call:active { transform: translateY(0) scale(0.98); transition-duration: 0.08s; } .iv-fab-call svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } @media (min-width: 860px) { .iv-fab-call { bottom: 24px; right: 24px; padding:var(--sp-4) var(--sp-6); font-size: 14px; } .iv-fab-call svg { width: 18px; height: 18px; } } /* ─── Footer ─── */ .iv-footer { background: var(--navy-d); color: var(--white); padding:var(--sp-10) var(--sp-6) var(--sp-6); } /* Op mobiel verbergen we de footer overal — bottom-nav is daar de primaire navigatie en de footer staat de tile-content in de weg. */ @media (max-width: 859px) { .iv-footer { display: none !important; } } .iv-footer-cols { display: grid; grid-template-columns: 1fr 1fr; gap:var(--sp-7); margin-bottom:var(--sp-8); } .iv-footer-col .h { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom:var(--sp-4); } .iv-footer-col .l { font-family: var(--ff-body); font-size: 13.5px; line-height: 1.5; color: var(--white); margin-bottom:var(--sp-2); } .iv-footer-col .l a { color: inherit; text-decoration: none; } .iv-footer-col .l a:hover { text-decoration: underline; } .iv-footer-bottom { border-top: 1px solid var(--line-d); padding-top:var(--sp-5); display: flex; flex-wrap: wrap; justify-content: space-between; gap:var(--sp-gap); font-size: 12px; color: rgba(255,255,255,0.55); } @media (min-width: 860px) { .iv-footer { padding:var(--sp-16) 96px var(--sp-7); } .iv-footer-cols { grid-template-columns: repeat(4, 1fr); gap:var(--sp-12); } } /* ─── Card details (used on stay cards, activity cards) ─── */ .iv-card .price-row { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding-top:var(--sp-4); margin-top: auto; } .iv-card .badge { position: absolute; top: 10px; left: 10px; padding:var(--sp-1) var(--sp-2); font-family: var(--ff-display); font-weight: 500; font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; background: var(--merk); color: var(--white); z-index: 2; } .iv-card .badge.light { background: var(--white); color: var(--navy); } /* ─── Utility ─── */ .iv-arrow { display: inline-flex; align-items: center; gap:var(--sp-2); font-family: var(--ff-display); font-weight: 500; font-size: 13px; color: var(--navy); border-bottom: 1px solid var(--navy); padding-bottom: 2px; text-decoration: none; } .iv-arrow svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* show/hide per viewport */ .iv-m-only { display: block; } .iv-d-only { display: none; } @media (min-width: 860px) { .iv-m-only { display: none; } .iv-d-only { display: block; } } .iv-mt-12 { margin-top:var(--sp-3); } .iv-mt-16 { margin-top:var(--sp-4); } .iv-mt-20 { margin-top:var(--sp-5); } .iv-mt-24 { margin-top:var(--sp-6); } .iv-mt-32 { margin-top:var(--sp-8); } .iv-text-center { text-align: center; } /* On dark backgrounds */ .on-dark .iv-arrow { color: var(--white); border-bottom-color: rgba(255,255,255,0.5); } /* Listing rows (key/value) — used in "goed om te weten" */ .iv-kv { background: var(--white); border: 1px solid var(--line); } .iv-kv .row { display: flex; justify-content: space-between; gap:var(--sp-gap); padding:var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); } .iv-kv .row:last-child { border-bottom: none; } .iv-kv .k { font-family: var(--ff-display); font-weight: 500; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-50); } .iv-kv .v { font-family: var(--ff-body); font-size: 13.5px; color: var(--navy); text-align: right; } /* Hide top transparent button text shadow when not transparent */ @media (min-width: 860px) { .iv-dhead.transparent nav a, .iv-dhead.transparent .lang, .iv-dhead.transparent .iv-lang-btn { text-shadow: 0 1px 6px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.3); } } /* ─── Language switcher (NL/DE/EN) ─── */ .iv-lang { position: relative; } .iv-lang-btn { display: inline-flex; align-items: center; gap:var(--sp-1); background: transparent; border: none; cursor: pointer; font-family: var(--ff-display); font-weight: 500; font-size: 13px; letter-spacing: 0.04em; color: inherit; padding:var(--sp-2) var(--sp-2); } .iv-lang-btn svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* Taal-toggle altijd rechtsboven, ook als de terug-knop ontbreekt (dan zou space-between de enige flex-child links uitlijnen). Nick 20 jul. */ .iv-mhead .iv-mhead-lang { margin-left: auto; } /* Variant B — segmented pill NL·DE·EN met GLIJDENDE indicator (Nick 20 jul, gekozen uit voorstel v3). De witte pill schuift naar de gekozen taal met dezelfde overshoot-motion als de Binnen/Buiten/Omgeving-filter. */ .iv-mhead .iv-mseg { position: relative; display: inline-flex; background: rgba(255,255,255,0.09); border-radius: 100px; padding: 3px; gap: 2px; -webkit-tap-highlight-color: transparent; } /* Glijdende achtergrond-pill: alleen background + transform (goedkoop voor GPU; voorkomt paint-jank op iOS Safari). Breedte + positie zet de JS per knop. */ .iv-mhead .iv-mseg-ind { position: absolute; top: 3px; bottom: 3px; left: 3px; border-radius: 100px; background: #fff; box-shadow: 0 2px 8px -3px rgba(0,0,0,0.35); z-index: 0; pointer-events: none; opacity: 0; will-change: transform, width; transform: translate3d(0,0,0); } .iv-mhead .iv-mseg-ind.placed { opacity: 1; transition: transform 0.42s cubic-bezier(0.34,1.37,0.64,1), width 0.42s cubic-bezier(0.34,1.37,0.64,1); } @media (prefers-reduced-motion: reduce) { .iv-mhead .iv-mseg-ind.placed { transition: transform 0.18s ease, width 0.18s ease; } } .iv-mhead .iv-mseg-btn { position: relative; z-index: 1; border: 0; background: transparent; color: rgba(255,255,255,0.6); cursor: pointer; font-family: var(--ff-body, inherit); font-weight: 600; font-size: 12.5px; line-height: 1; letter-spacing: 0.02em; padding: 7px 11px; border-radius: 100px; min-width: 34px; height: auto; width: auto; display: inline-flex; align-items: center; justify-content: center; transition: color 0.28s ease; } .iv-mhead .iv-mseg-btn.on { color: var(--navy, #2F4157); } /* Lichte header (bv. juridische pagina's): navy indicator op licht vlak. */ .iv-mhead-light .iv-mseg { background: rgba(20,34,51,0.07); } .iv-mhead-light .iv-mseg-ind { background: var(--navy, #2F4157); box-shadow: 0 2px 8px -3px rgba(20,34,51,0.4); } .iv-mhead-light .iv-mseg-btn { color: rgba(20,34,51,0.6); } .iv-mhead-light .iv-mseg-btn.on { color: #fff; } /* Vangnet (variant B) alleen op heel smalle schermen. */ .iv-mhead .iv-mseg-fallback { display: none; } @media (max-width: 359px) { .iv-mhead .iv-mseg { display: none; } .iv-mhead .iv-mseg-fallback { display: block; } } .iv-mhead .iv-lang-btn { display: flex; align-items: center; justify-content: center; gap:var(--sp-1); height: 44px; width: auto; min-width: 44px; padding: 0 8px; } .iv-mhead .iv-lang-btn .iv-lang-cur { font-size: 13px; } .iv-lang-pop:not([hidden]) { animation: ivLangPop .14s cubic-bezier(.22,1,.36,1); } @keyframes ivLangPop { from { opacity:0; transform: scale(.97) translateY(-4px); } to { opacity:1; transform:none; } } .iv-lang-pop { position: absolute; top: calc(100% + 4px); right: 0; z-index: 60; transform-origin: top right; background: var(--white); border: 1px solid var(--line); min-width: 160px; box-shadow: 0 16px 40px -10px rgba(31,45,61,0.25); } .iv-lang-pop button { display: block; width: 100%; padding:var(--sp-3) var(--sp-4); background: transparent; border: none; cursor: pointer; font-family: var(--ff-display); font-weight: 500; font-size: 13px; color: var(--navy); text-align: left; } .iv-lang-pop button:hover { background: var(--beige); } /* ─── Mobile menu sheet (Verblijven dropdown) ─── */ .iv-mmenu { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; } .iv-mmenu[hidden] { display: none; } .iv-mmenu-backdrop { position: absolute; inset: 0; background: rgba(15,23,35,0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .iv-mmenu-sheet { position: relative; z-index: 1; margin-top:var(--sp-14); background: var(--beige); padding:var(--sp-6) var(--sp-5) var(--sp-8); border-bottom: 1px solid var(--line); animation: ivMmenuSlide 0.25s ease-out; } @keyframes ivMmenuSlide { from { transform: translateY(-12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .iv-mmenu-head { display: flex; justify-content: space-between; align-items: center; margin-bottom:var(--sp-gutter); } .iv-mmenu-eye { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal); } .iv-mmenu-x { background: transparent; border: none; font-size: 24px; color: var(--navy); cursor: pointer; width: 32px; height: 32px; line-height: 1; padding: 0; font-family: var(--ff-display); } .iv-mmenu-item { display: flex; flex-direction: column; gap:var(--sp-1); padding:var(--sp-gutter) var(--sp-4); background: var(--white); border: 1px solid var(--line); margin-bottom:var(--sp-2); text-decoration: none; color: inherit; transition: background 0.15s, border-color 0.15s; } .iv-mmenu-item:hover { border-color: var(--navy); } .iv-mmenu-item .lbl { font-family: var(--ff-display); font-weight: 600; font-size: 18px; color: var(--navy); letter-spacing: -0.005em; } .iv-mmenu-item .sub { font-family: var(--ff-body); font-size: 13px; color: var(--ink-70); } @media (min-width: 860px) { .iv-mmenu { display: none; } } /* ─── Booking bar — horizontaal op desktop ─── */ @media (min-width: 860px) { .iv-bb { background: var(--white); border: 1px solid var(--line); padding: 0; display: grid; grid-template-columns: repeat(3, 1fr) auto; align-items: stretch; } .iv-bb-rows { display: contents; } .iv-bb-row { padding:var(--sp-3) var(--sp-5); background: var(--white); border: none; border-right: 1px solid var(--line); border-radius: 0; gap:var(--sp-gap); align-items: center; } .iv-bb-row svg { width: 18px; height: 18px; stroke: var(--ink-50); flex-shrink: 0; } .iv-bb-row .body { display: flex; flex-direction: column; justify-content: center; gap:var(--sp-1); flex: 1; min-width: 0; } .iv-bb-row .lbl { font-family: var(--ff-display); font-weight: 500; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-50); line-height: 1; margin: 0; } .iv-bb-row .val, .iv-bb-row input.val, .iv-bb-row select.val { font-family: var(--ff-display) !important; font-weight: 600 !important; font-size: 13px !important; color: var(--navy) !important; margin: 0 !important; letter-spacing: 0; line-height: 1.2; padding: 0 !important; border: none !important; background: transparent !important; width: 100%; appearance: none; -webkit-appearance: none; } .iv-bb-row input[type="date"]::-webkit-calendar-picker-indicator { display: none; } .iv-bb > button { margin-top: 0 !important; height: auto; padding:0 var(--sp-7); border-radius: 0; font-size: 12px; letter-spacing: 0.08em; } /* Floating booking bar (overlapping bottom of hero) */ .iv-bb-float { margin-top: -36px; position: relative; z-index: 5; box-shadow: 0 24px 40px -16px rgba(31,45,61,0.25); } } /* ─── Booking bar v2 — square style with popups above ─── */ .iv-bb2-section { position: relative; } .iv-bb2-wrap { position: relative; } .iv-bb2 { background: var(--white); border-radius: 0; padding: 0; display: flex; flex-direction: column; gap: 0; box-shadow: 0 24px 40px -16px rgba(31,45,61,0.25); border: 1px solid var(--line); position: relative; z-index: 12; } @media (min-width: 860px) { .iv-bb2 { flex-direction: row; align-items: stretch; } } .iv-bb2-float { z-index: 12; } @media (min-width: 860px) { .iv-bb2-float { margin-top: -36px; } } .iv-bb2-seg { display: flex; align-items: center; gap:var(--sp-gap); padding:var(--sp-4) var(--sp-6); background: transparent; border: none; border-radius: 0; cursor: pointer; text-align: left; flex: 1; position: relative; transition: background 0.18s; } .iv-bb2-seg:hover, .iv-bb2-seg.is-open { background: var(--beige); } @media (min-width: 860px) { .iv-bb2-seg::after { content: ''; position: absolute; right: 0; top: 25%; bottom: 25%; width: 1px; background: var(--line); } .iv-bb2-seg:last-of-type::after { display: none; } .iv-bb2-seg:hover::after, .iv-bb2-seg.is-open::after { display: none; } } .iv-bb2-seg svg { width: 20px; height: 20px; stroke: var(--ink-50); flex-shrink: 0; } .iv-bb2-seg .body { flex: 1; min-width: 0; line-height: 1.15; } .iv-bb2-seg .lbl { font-family: var(--ff-display); font-weight: 600; font-size: 14px; color: var(--navy); letter-spacing: 0; } .iv-bb2-seg .sub { font-family: var(--ff-body); font-size: 12px; color: var(--ink-50); margin-top: 2px; } .iv-bb2-seg .chev { font-family: var(--ff-display); color: var(--ink-50); font-size: 11px; flex-shrink: 0; } .iv-bb2-cta { background: var(--navy); color: var(--white); border: none; border-radius: 0; padding:var(--sp-4) var(--sp-7); font-family: var(--ff-display); font-weight: 600; font-size: 14px; letter-spacing: 0.04em; cursor: pointer; flex-shrink: 0; transition: background 0.18s; } .iv-bb2-cta:hover { background: var(--navy-d); } @media (min-width: 860px) { .iv-bb2-cta { padding: 0 36px; } } /* Popups — appear ABOVE the bar */ .iv-bb2-popups { margin-top: 0; position: relative; z-index: 11; } @media (min-width: 860px) { .iv-bb2-popups { position: absolute; top: calc(100% + 12px); left: 0; right: 0; pointer-events: none; } .iv-bb2-pop { pointer-events: auto; } } .iv-bb2-pop { background: var(--white); border: 1px solid var(--line); padding:var(--sp-gutter); box-shadow: 0 24px 40px -12px rgba(31,45,61,0.3); border-radius: 0; margin-bottom:var(--sp-3); } @media (min-width: 860px) { .iv-bb2-pop { padding:var(--sp-6); } } @media (min-width: 860px) { .iv-bb2-pop { margin-bottom: 0; position: absolute; top: 0; } /* Type popup — anchored under first segment */ .iv-bb2-pop-type { left: 0; max-width: 560px; min-width: 360px; } /* Guests popup — medium, anchored roughly under second segment */ .iv-bb2-pop-guests { left: 33%; transform: translateX(-50%); width: 380px; } /* Dates popup — full width */ .iv-bb2-pop-dates { left: 0; right: 0; padding:var(--sp-6); } } .iv-bb2-pop-eye { font-family: var(--ff-display); font-weight: 500; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-50); margin-bottom:var(--sp-4); } /* Type verblijf */ .iv-bb2-types { display: grid; grid-template-columns: 1fr 1fr; gap:var(--sp-2); max-width: 480px; } .iv-bb2-types-3 { grid-template-columns: 1fr 1fr 1fr; max-width: 560px; } .iv-bb2-type { display: flex; align-items: center; gap:var(--sp-3); padding:var(--sp-4) var(--sp-gutter); background: var(--white); border: 1px solid var(--line); border-radius: 0; cursor: pointer; font-family: var(--ff-display); font-weight: 500; font-size: 14px; color: var(--navy); } .iv-bb2-type svg { width: 18px; height: 18px; stroke: currentColor; } .iv-bb2-type:hover { border-color: var(--navy); } .iv-bb2-type.is-active { background: var(--navy); color: var(--white); border-color: var(--navy); } /* Gasten counters */ .iv-bb2-counters { display: flex; flex-direction: column; } .iv-bb2-counter { display: flex; align-items: center; justify-content: space-between; gap:var(--sp-gap); padding:var(--sp-4) 0; border-bottom: 1px solid var(--line); } .iv-bb2-counter:last-child { border-bottom: none; padding-bottom: 0; } .iv-bb2-counter:first-child { padding-top: 0; } .iv-bb2-counter .name { font-family: var(--ff-display); font-weight: 600; font-size: 18px; color: var(--navy); } .iv-bb2-counter .sub { font-family: var(--ff-body); font-size: 13px; color: var(--ink-50); margin-top: 2px; } .iv-bb2-counter .ctrl { display: flex; align-items: center; gap:var(--sp-gap); } .iv-bb2-counter .ctrl button { width: 34px; height: 34px; border: 1px solid var(--line); background: var(--white); font-family: var(--ff-display); font-size: 18px; color: var(--navy); cursor: pointer; } .iv-bb2-counter .ctrl button:last-of-type { background: var(--navy); color: var(--white); border-color: var(--navy); } .iv-bb2-counter .ctrl button:disabled { opacity: 0.4; cursor: not-allowed; } .iv-bb2-counter .ctrl .n { font-family: var(--ff-mono); font-size: 16px; color: var(--navy); min-width: 24px; text-align: center; } /* Calendar */ .iv-bb2-cal-wrap { display: grid; grid-template-columns: 1fr; gap:var(--sp-4); } @media (min-width: 720px) { .iv-bb2-cal-wrap { grid-template-columns: 1fr 1fr; gap:var(--sp-6); } } .iv-bb2-cal-grid { background: var(--white); border: 1px solid var(--line); padding:var(--sp-3); } @media (min-width: 860px) { .iv-bb2-cal-grid { padding:var(--sp-4); } } .iv-bb2-cal-head { display: flex; align-items: center; justify-content: space-between; padding:0 var(--sp-1) var(--sp-4); font-family: var(--ff-display); font-weight: 600; font-size: 16px; color: var(--navy); } .iv-bb2-cal-head button { background: transparent; border: none; cursor: pointer; width: 32px; height: 32px; display: grid; place-items: center; color: var(--navy); } .iv-bb2-cal-head button:disabled { opacity: 0.3; cursor: not-allowed; } .iv-bb2-cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap:var(--sp-1); margin-bottom:var(--sp-2); text-align: center; } .iv-bb2-cal-dow span { font-family: var(--ff-display); font-weight: 500; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-50); padding:var(--sp-1) 0; } .iv-bb2-cal-cells { display: grid; grid-template-columns: repeat(7, 1fr); gap:var(--sp-1); } .iv-bb2-day { height: 34px; display: grid; place-items: center; font-family: var(--ff-mono); font-size: 13px; color: var(--navy); cursor: pointer; border: none; background: transparent; border-radius: 0; padding: 0; } @media (min-width: 860px) { .iv-bb2-day { height: 38px; } } .iv-bb2-day.is-disabled { color: var(--ink-30); cursor: not-allowed; } .iv-bb2-day.is-in-range { background: var(--sky); } .iv-bb2-day.is-start, .iv-bb2-day.is-end { background: var(--navy); color: var(--white); font-weight: 600; } .iv-bb2-day:hover:not(.is-disabled):not(.is-start):not(.is-end) { background: var(--beige); } .iv-bb2-day.is-empty { cursor: default; } /* ─── Mobile booking widget — eenvoudige type-keuze ─── */ .iv-bb-m { background: var(--white); border: 1px solid var(--line); padding:var(--sp-gutter); box-shadow: 0 24px 40px -16px rgba(31,45,61,0.25); } .iv-bb-m-eye { font-family: var(--ff-display); font-weight: 500; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-50); margin-bottom:var(--sp-3); } .iv-bb-m-types { display: grid; grid-template-columns: 1fr 1fr 1fr; gap:var(--sp-2); margin-bottom:var(--sp-4); } .iv-bb-m-type { display: flex; flex-direction: column; align-items: center; justify-content: center; gap:var(--sp-2); padding:var(--sp-3) var(--sp-2); background: var(--white); border: 1px solid var(--line); border-radius: 0; cursor: pointer; font-family: var(--ff-display); font-weight: 500; font-size: 12px; color: var(--navy); } .iv-bb-m-type svg { width: 22px; height: 22px; stroke: currentColor; } .iv-bb-m-type.is-active { background: var(--navy); color: var(--white); border-color: var(--navy); } .iv-bb-m-cta { width: 100%; background: var(--navy); color: var(--white); border: none; border-radius: 0; padding:var(--sp-4); font-family: var(--ff-display); font-weight: 600; font-size: 14px; letter-spacing: 0.04em; cursor: pointer; } .iv-bb-m-cta:hover { background: var(--navy-d); } /* (Volgorde Hotel · Jachthaven · Bungalow staat nu in HTML-bronvolgorde) */ /* === Hotel-card (horizontaal, 3-kolom grid) === */ .hotel-card { display: grid; grid-template-columns: 300px 1fr 260px; gap: 0; background: #fff; border: 1px solid var(--line); overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.04); margin-bottom:var(--sp-5); transition: box-shadow .2s, transform .2s; cursor: pointer; } @media (hover:hover){ .hotel-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.10); transform: translateY(-2px); } } @media (max-width: 860px) { .hotel-card { grid-template-columns: 1fr; } } .hotel-card-photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #ddd; } .hotel-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; } @media (hover:hover){ .hotel-card:hover .hotel-card-photo img { transform: scale(1.04); } } .hotel-card-photo-count { position: absolute; left: 12px; bottom: 12px; background: rgba(255,255,255,.92); color: var(--navy); padding:var(--sp-1) var(--sp-3); font-family: var(--ff-body); font-size: 12px; font-weight: 500; display: inline-flex; align-items: center; gap:var(--sp-1); } .hotel-card-info { padding:var(--sp-6) var(--sp-6); display: flex; flex-direction: column; justify-content: center; gap:var(--sp-gap); } .hotel-card-title-row { display: flex; align-items: center; gap:var(--sp-gap); flex-wrap: wrap; } .hotel-card-title { font-family: var(--ff-display); font-size: 20px; color: var(--navy); font-weight: 500; margin: 0; } .hotel-card-icons { display: inline-flex; gap:var(--sp-2); } .hotel-card-icon { width: 28px; height: 28px; border-radius: 50%; background: var(--cream, #F5EEEA); display: inline-flex; align-items: center; justify-content: center; color: var(--ink-60, #6b7d8c); } .hotel-card-icon svg { width: 14px; height: 14px; } .hotel-card-meta { display: flex; gap:var(--sp-4); flex-wrap: wrap; font-family: var(--ff-body); font-size: 13px; color: var(--ink-60, #6b7d8c); } .hotel-card-meta span { display: inline-flex; align-items: center; gap:var(--sp-1); } .hotel-card-meta svg { width: 14px; height: 14px; } .hotel-card-list { font-family: var(--ff-body); font-size: 13px; color: var(--navy); line-height: 1.6; padding: 0; margin: 0; list-style: none; } .hotel-card-list li { position: relative; padding-left:var(--sp-4); } .hotel-card-list li::before { content: '✓'; position: absolute; left: 0; color: var(--teal, #46677C); font-weight: 700; font-size: 11px; top: 1px; } .hotel-card-side { padding:var(--sp-5) var(--sp-6); border-left: 1px solid var(--cream-d, #e8ddd8); display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap:var(--sp-2); text-align: right; } @media (max-width: 860px) { .hotel-card-side { border-left: none; border-top: 1px solid var(--cream-d, #e8ddd8); align-items: stretch; text-align: left; padding:var(--sp-4) var(--sp-6) var(--sp-5); } } .hotel-card-promo { font-family: var(--ff-display); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent, #e84c30); font-weight: 600; } .hotel-card-price-row { display: inline-flex; align-items: baseline; gap:var(--sp-2); } .hotel-card-price { font-family: var(--ff-display); font-size: 26px; color: var(--navy); font-weight: 500; } .hotel-card-price-old { font-family: var(--ff-body); font-size: 14px; color: #999; text-decoration: line-through; } .hotel-card-price-info { font-family: var(--ff-body); font-size: 12px; color: var(--ink-50, #8a8a8a); line-height: 1.45; max-width: 180px; } .hotel-card-actions { display: flex; gap:var(--sp-2); margin-top:var(--sp-2); flex-wrap: wrap; } @media (max-width: 860px) { .hotel-card-actions { width: 100%; } } .hotel-card-btn { padding:var(--sp-3) var(--sp-gutter); font-family: var(--ff-display); font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; border: 1px solid var(--line); background: #fff; color: var(--navy); transition: border-color .15s, background .15s; } .hotel-card-btn:hover { border-color: var(--navy); } .hotel-card-btn--primary { background: var(--navy); border-color: var(--navy); color: #fff; display: inline-flex; align-items: center; gap:var(--sp-2); } .hotel-card-btn--primary:hover { background: var(--navy-d, #1a2e44); border-color: var(--navy-d, #1a2e44); } .hotel-card-btn--primary svg { width: 14px; height: 14px; } @media (max-width: 860px) { .hotel-card-btn, .hotel-card-btn--primary { flex: 1; justify-content: center; } } /* === Accommodation popup (hotel + bungalowpark) === */ .acc-modal-overlay { position: fixed; inset: 0; z-index: 10000; background: rgba(15,29,42,.72); display: flex; align-items: center; justify-content: center; padding:var(--sp-6); animation: accFadeIn .2s ease-out; } @keyframes accFadeIn { from { opacity: 0; } to { opacity: 1; } } .acc-modal { position: relative; background: #fff; width: 100%; max-width: 880px; max-height: 92vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 30px 80px rgba(0,0,0,.35); animation: accSlideIn .25s cubic-bezier(.22,1,.36,1); } @keyframes accSlideIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .acc-modal-close { position: absolute; top: 12px; right: 12px; z-index: 3; width: 36px; height: 36px; background: rgba(255,255,255,.95); border: none; font-size: 22px; color: var(--navy); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,.18); transition: background .15s, transform .15s; } @media (hover:hover){ .acc-modal-close:hover { background: #fff; transform: scale(1.06); } } .acc-modal-gallery { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #ddd; flex-shrink: 0; } .acc-modal-hero { width: 100%; height: 100%; object-fit: cover; display: block; } .acc-modal-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.92); border: none; font-size: 24px; color: var(--navy); cursor: pointer; line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,.2); transition: background .15s, transform .15s; } @media (hover:hover){ .acc-modal-nav:hover { background: #fff; transform: translateY(-50%) scale(1.06); } } .acc-modal-prev { left: 16px; } .acc-modal-next { right: 16px; } .acc-modal-counter { position: absolute; bottom: 14px; right: 14px; background: rgba(15,29,42,.7); color: #fff; padding:var(--sp-1) var(--sp-3); font-size: 12px; font-weight: 500; letter-spacing: .02em; } .acc-modal-thumbs { display: flex; gap:var(--sp-2); padding:var(--sp-3) var(--sp-4); overflow-x: auto; background: #fafaf8; border-bottom: 1px solid #eee; flex-shrink: 0; } .acc-modal-thumb { flex: 0 0 auto; width: 72px; height: 54px; border: 2px solid transparent; overflow: hidden; cursor: pointer; padding: 0; background: none; transition: border-color .15s, transform .15s; } .acc-modal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (hover:hover){ .acc-modal-thumb:hover { transform: translateY(-1px); } } .acc-modal-thumb.is-active { border-color: var(--navy); } .acc-modal-body { padding:var(--sp-6) var(--sp-7) var(--sp-6); overflow-y: auto; display: flex; flex-direction: column; gap:var(--sp-gap); } .acc-modal-promo { align-self: flex-start; background: #fef3c7; color: #92400e; padding:var(--sp-1) var(--sp-3); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } .acc-modal-head { display: flex; align-items: center; justify-content: space-between; gap:var(--sp-gap); flex-wrap: wrap; } .acc-modal-title { font-family: var(--ff-display); font-size: 26px; color: var(--navy); font-weight: 500; margin: 0; line-height: 1.15; } .acc-modal-body .hotel-card-icons { gap:var(--sp-2); } .acc-modal-body .hotel-card-meta { display: flex; flex-wrap: wrap; gap:var(--sp-gap) var(--sp-gutter); font-size: 14px; color: #4b5563; } .acc-modal-body .hotel-card-meta span { display: inline-flex; align-items: center; gap:var(--sp-2); } .acc-modal-body .hotel-card-meta svg { width: 16px; height: 16px; } .acc-modal-desc { font-size: 15px; color: #374151; line-height: 1.55; margin: 0; } .acc-modal-body .hotel-card-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap:var(--sp-2) var(--sp-4); } .acc-modal-body .hotel-card-list li { font-size: 14px; color: #374151; position: relative; padding-left:var(--sp-gutter); } .acc-modal-body .hotel-card-list li::before { content: '✓'; position: absolute; left: 0; color: #0f8a5f; font-weight: 600; } .acc-modal-nearby { margin-top:var(--sp-1); padding-top:var(--sp-4); border-top: 1px solid #eee; } .acc-modal-nearby-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--teal, #46677C); margin:0 0 var(--sp-3); } .acc-modal-nearby-row + .acc-modal-nearby-row { margin-top:var(--sp-3); } .acc-modal-nearby-lbl { display: block; font-size: 12px; font-weight: 600; color: var(--navy); margin-bottom:var(--sp-1); } .acc-modal-nearby-text { font-size: 14px; color: var(--navy); line-height: 1.5; margin: 0; } .acc-modal-foot { display: flex; align-items: center; justify-content: space-between; gap:var(--sp-4); padding-top:var(--sp-4); margin-top:var(--sp-4); border-top: 1px solid #eee; flex-wrap: wrap; } .acc-modal-price .hotel-card-price-row { display: flex; align-items: baseline; gap:var(--sp-2); } .acc-modal-price .hotel-card-price { font-family: var(--ff-display); font-size: 26px; font-weight: 500; color: var(--navy); } .acc-modal-price .hotel-card-price-info { font-size: 12px; color: #6b7280; margin-top: 2px; } .acc-modal-reserve { display: inline-flex; align-items: center; gap:var(--sp-2); background: var(--navy); color: #fff; border: none; padding:var(--sp-3) var(--sp-6); font-family: var(--ff-display); font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: transform .15s, background .15s; } .acc-modal-reserve svg { width: 16px; height: 16px; } @media (hover:hover){ .acc-modal-reserve:hover { background: var(--navy-d, #1a2e44); transform: translateY(-1px); } } @media (max-width: 640px) { .acc-modal-overlay { padding: 0; } .acc-modal { max-height: 100vh; height: 100vh; max-width: 100%; } .acc-modal-gallery { aspect-ratio: 4 / 3; } .acc-modal-body { padding:var(--sp-gutter) var(--sp-5) var(--sp-6); } .acc-modal-title { font-size: 22px; } .acc-modal-foot { flex-direction: column; align-items: stretch; } .acc-modal-reserve { justify-content: center; } } /* Module uitgeschakeld — gastsite blokkadescherm */ .iv-module-blocked { padding:clamp(var(--sp-12), 12vw, 96px) var(--sp-5) var(--sp-16); background: var(--beige, #F5EEEA); min-height: 50vh; display: flex; align-items: center; justify-content: center; } .iv-module-blocked-inner { max-width: 28rem; text-align: center; } .iv-module-blocked-eye { font-family: var(--ff-mono, 'Inter', system-ui, -apple-system, sans-serif); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--navy-light, #46677C); margin:0 0 var(--sp-3); } .iv-module-blocked h1 { font-family: var(--ff-display, 'Inter', system-ui, -apple-system, sans-serif); font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 600; color: var(--navy, #035372); margin:0 0 var(--sp-3); line-height: 1.2; } .iv-module-blocked-body { font-family: var(--ff-body, 'Lora', serif); font-size: 1rem; color: rgba(27, 42, 59, 0.75); line-height: 1.6; margin:0 0 var(--sp-6); } .iv-module-blocked-body a { color: var(--navy, #035372); } .iv-module-blocked-cta { display: inline-flex; align-items: center; justify-content: center; padding:var(--sp-3) var(--sp-6); background: var(--navy, #035372); color: #fff; font-family: var(--ff-display, 'Inter', system-ui, -apple-system, sans-serif); font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; border-radius: 8px; transition: background .15s; } .iv-module-blocked-cta:hover { background: var(--navy-d, #1a2e44); } .iv-module-blocked-cta:focus-visible { outline: 2px solid var(--accent, #46677C); outline-offset: 2px; } /* ────────────────────────────────────────────────────────────────────── PREVIEW (gebruikerswens "voor het idee"): nav header WIT i.p.v. navy. Geldt voor desktop (.iv-dhead.dark) én mobiel (.iv-mhead). Het officiële kleurlogo (logo.png) wordt via content:url geforceerd zodat het ook op de voorheen-donkere header zichtbaar is (de chrome laadde daar logo-white.png). ────────────────────────────────────────────────────────────────────── */ .iv-dhead.dark { background: var(--white); color: var(--navy); border-bottom: none; } /* Logo iets groter in de (witte) nav. */ .iv-dhead .logo img { height: 26px; } .iv-mhead-logo img { height: 38px; } .iv-dhead.dark nav a { color: var(--navy); } .iv-dhead.dark .iv-btn-ghost { color: var(--navy) !important; border-color: var(--navy) !important; } .iv-dhead.dark .iv-dhead-user, .iv-dhead.dark .iv-dhead-menu { color: var(--navy); } .iv-dhead.dark .iv-dhead-user { border-color: rgba(7,83,115,0.4); } /* Logo: forceer het kleurlogo op de (nu witte) donkere header. */ .iv-dhead.dark .logo img, .iv-mhead-logo img { content: url('/images/logo-white.png?v=5'); } /* ── Verblijven-nav (navy gekozen, 24 jun 2026): desktop/iPad-header weer NAVY, overrulet de wit-preview hierboven. De MOBIELE header (.iv-mhead) blijft wit. ── */ .iv-dhead.dark { background: var(--navy); color: var(--white); border-bottom: none; } .iv-dhead.dark nav a { color: var(--white); } .iv-dhead.dark nav a.is-active { border-bottom-color: var(--merk); } .iv-dhead.dark .iv-dhead-menu { color: var(--white); } .iv-dhead.dark .iv-dhead-drop a { color: var(--navy); } /* OUDE blokjes-logo op de navy desktop-nav (gebruikerswens jun 2026): het nieuwe wave-logo (logo-white.png) wordt voorlopig NIET gebruikt. Mobiel toont al logo.png. */ .iv-dhead.dark .logo img { content: url('/images/logo-white.png?v=5'); } /* Navy topnav met wit logo (gebruikerswens 8 jul 2026) — de basis .iv-mhead is al navy; het skelet (safe-area/pre-injectie-balk) kleurt mee zodat de statusbalk-zone nooit crème flitst boven de navy balk. */ body[data-header="dark"]::before { background: var(--navy, #2F4157); } .iv-mhead { border-bottom: none; } .iv-mhead .iv-mhead-back, .iv-mhead .iv-mhead-avatar { background: rgba(255,255,255,0.14); color: var(--white); } .iv-mhead .iv-mhead-back:hover, .iv-mhead .iv-mhead-avatar:hover { background: rgba(255,255,255,0.24); } /* ============================================================ Curtain-transitie (lichtblauw → donkerblauw, met logo) Dekt de harde document-navigatie naar de boekflow (/boek/) af: geen witte flash, een merk-gekleurde sweep met logo. Pure CSS + JS (chrome.js) → werkt in elke browser, ook iOS. ============================================================ */ /* Zachte cross-fade i.p.v. een groeiende iris. De iris-scale liet het logo "flitsen" bij de cover→reveal-wissel (cover navigeerde op 420ms terwijl de logo-fade pas op 580ms klaar was → op de nieuwe pagina sprong 't logo abrupt vol in beeld). Nu fade de hele overlay — achtergrond + logo als één geheel — in en uit. Het logo is altijd vol zichtbaar BINNEN de overlay, dus er is geen sprong meer; alleen de overlay-opacity beweegt (compositor). */ /* ── Curtain "De Golf" (gekozen uit /voorstel-curtain-v2/, jun 2026) ── Een beige golf spoelt van onder naar boven het scherm op (cover), het logo dobbert kort mee (hold), en bij de reveal spoelt de golf dóór naar boven het beeld uit — één doorgaande beweging. Alleen transform/opacity (composited): geen layout/paint-werk, dus geen haperingen op iOS. Fasen-API ongewijzigd: .in (cover) → .covered (aankomst cross-document) → .out (reveal). */ .iv-curtain { position: fixed; inset: 0; z-index: 99999; pointer-events: none; overflow: hidden; /* Bewust GEEN visibility-toggle: iOS Safari slaat de allereerste animatie soms over wanneer een verborgen laag in hetzelfde frame zichtbaar wordt én moet animeren. In rust is alles toch buiten beeld (baan op 118vh, logo opacity 0), dus de laag mag permanent composited blijven. */ } /* Verberg de chrome zodra de curtain actief is, zodat er niets doorheen piept. De mobiele header (met logo) zetten we HARD op display:none — een opacity-fade liet 'm kort samen met het curtain-logo flikkeren ("dubbel logo"). De rest fadet zacht. */ body.iv-curtain-on .iv-mhead { display: none !important; } body.iv-curtain-on .iv-dhead { opacity: 0 !important; transition: opacity 0.1s ease; pointer-events: none; } /* De bottom-nav NIET wegfaden: de golf komt van onderen en bedekt de balk als eerste (~70ms) — de oude 100ms-fade liet juist een wit gat zien vóór het water arriveerde (Nick 16 jul). Alleen kliks blokkeren tijdens de overgang. */ body.iv-curtain-on .iv-bnav { pointer-events: none; } /* Oude iris-panelen (markup-compat): nooit tonen. */ .iv-curtain-panel, .iv-curtain-white { display: none; } /* De golf-baan is hoger dan het scherm (golfrand + doorloop) en staat in rust ónder beeld. De golfkam steekt 46px boven de baan-top uit, dus de rustpositie ligt 64px lager dan de schermrand — anders piept de witte kam permanent onderaan over de bottom-nav (de laag is bewust altijd zichtbaar/composited, zie hierboven). */ .iv-curtain-baan { position: absolute; left: 0; right: 0; top: -18vh; height: 136vh; transform: translateY(calc(118vh + 64px)); will-change: transform; } .iv-curtain-golfrand { position: absolute; top: -46px; left: 0; right: 0; width: 100%; height: 48px; display: block; } /* Wit water — de gast-pagina's (o.a. de boekflow) zijn zelf beige, dus een beige golf was onzichtbaar tegen die achtergrond. */ .iv-curtain-vlak { position: absolute; inset: 0; background: #FFFFFF; } /* Het logo zit IN de baan en vaart dus mee met het water: op halve hoogte staat het net onder de golfrand (baan-top -18vh + 9vh + golf op 50vh → ~59vh in beeld), en het rijst mee het beeld uit bij het doorstijgen. */ .iv-curtain-logo { position: absolute; top: 9vh; left: 0; right: 0; display: flex; justify-content: center; opacity: 0; } .iv-curtain-logo img { height: 58px; width: auto; } /* De golfrand is een naadloos-periodieke 200%-strook die continu van links naar rechts rolt zolang de curtain in beeld is — het water "leeft". */ .iv-curtain-golfrol { position: absolute; top: -46px; left: 0; right: 0; height: 48px; overflow: hidden; } .iv-curtain-golfrol svg { position: absolute; left: 0; top: 0; width: 200%; height: 48px; } /* Zachte "diepwater"-tint onder de kam: houdt de golf zichtbaar op witte pagina's (activiteit-detail) waar wit-op-wit anders onzichtbaar was. */ .iv-curtain-golfrol svg.iv-curtain-diep { top: -7px; } .iv-curtain.in .iv-curtain-golfrol svg, .iv-curtain.covered .iv-curtain-golfrol svg, .iv-curtain.out .iv-curtain-golfrol svg { animation: ivGolfRol 1.6s linear infinite; } /* IN (cover, vertrekkende pagina) — "De Halve Golf" (voorstel variant 4): opkomen tot de helft (0,45s) → leven op halve hoogte (1s: deinen, golfrand rolt) → doorstijgen tot vol (0,45s). Het logo vaart mee óp het water (het zit IN de baan) en rijst tijdens het doorstijgen het beeld uit. Per keyframe-segment een eigen timing-function. */ .iv-curtain.in .iv-curtain-baan { animation: ivGolfOpkomst 1.9s forwards; } .iv-curtain.in .iv-curtain-logo { animation: ivCurtainDobber 0.5s ease 0.5s forwards; } /* COVERED (aankomende pagina, cross-document): meteen vol gedekt — het logo is dan al "uitgevaren" (boven beeld), alleen het rollende water blijft. */ .iv-curtain.covered .iv-curtain-baan { transform: translateY(0); } /* OUT (reveal): de golf spoelt dóór naar boven het beeld uit. Staat ná .in en .covered zodat 'out' wint wanneer de klassen samen voorkomen. */ .iv-curtain.out .iv-curtain-baan { transform: translateY(0); animation: ivGolfUit 0.5s cubic-bezier(0.5, 0, 0.7, 0.4) forwards; } .iv-curtain.out .iv-curtain-logo { opacity: 1; } @keyframes ivGolfOpkomst { 0% { transform: translateY(calc(118vh + 64px)); animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); } 24% { transform: translateY(68vh); animation-timing-function: ease-in-out; } 37% { transform: translateY(67.2vh); animation-timing-function: ease-in-out; } 50% { transform: translateY(68.2vh); animation-timing-function: ease-in-out; } 63% { transform: translateY(67.4vh); animation-timing-function: ease-in-out; } 76% { transform: translateY(68vh); animation-timing-function: cubic-bezier(0.45, 0, 0.3, 1); } 100% { transform: translateY(0); } } @keyframes ivGolfUit { to { transform: translateY(-136vh); } } @keyframes ivGolfRol { to { transform: translateX(-50%); } } @keyframes ivCurtainDobber { from { opacity: 0; transform: translateY(16px) rotate(-2deg); } 60% { transform: translateY(-3px) rotate(1deg); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .iv-curtain, .iv-curtain * { transition: none !important; animation: none !important; } } /* ─── Statusbalk in de beginscherm-app (standalone) ──────────────────── iOS kent voor een standalone web-app maar drie statusbalk-standen: wit (zwarte klok), zwart, of doorzichtig (witte klok, pagina loopt eronder door). "Beige met zwarte klok" bestaat niet. Gekozen (Nick): doorzichtig + een vaste NAVY strook achter de klok — witte kloktekst blijft leesbaar en het matcht de navy bottom-nav. In gewone browsers is env(safe-area-inset-top) gewoon 0, dus daar bestaat de strook niet en verandert er niets. */ html::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px); background: var(--navy); /* Boven de curtain (99999): de klok staat óók tijdens de golf op navy. */ z-index: 100000; pointer-events: none; } /* Pagina's zonder eigen safe-area-afhandeling beginnen onder de strook. Specifiekere regels (data-header-paddings, wizard-reset met !important) overschrijven dit gewoon — padding-top is één property, telt niet op. */ body { padding-top: env(safe-area-inset-top, 0px); }