/* ───────────────────────────────────────────────────────────────── 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); } /* Alleen het chevron-pijltje, NIET de vlag-SVG in de .iv-flag-span eronder. */ .iv-lang-btn > svg, .iv-lang-chev { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* ─── Taalvlaggen (26 aug 2026) ─── De lettercodes EN/NL/DE zijn vervangen door vlaggen. Inline SVG, bewust GEEN emoji: Windows mist de regio-indicator-glyphs en toont een emoji-vlag dan als de twee landletters in een hokje — precies wat hier weg moest. Vaste 3:2-doos zodat de drie vlaggen in een rij even groot staan. */ .iv-flag { display: inline-block; width: 22px; height: 15px; flex: 0 0 auto; line-height: 0; border-radius: 2px; overflow: hidden; /* Randje zodat de witte banen (NL, Union Jack) niet in een witte pill of een lichte kop wegvallen. */ box-shadow: 0 0 0 1px rgba(20, 34, 51, 0.30); transition: transform 0.24s cubic-bezier(0.34, 1.37, 0.64, 1), opacity 0.24s ease, filter 0.24s ease; } .iv-flag svg { display: block; width: 100%; height: 100%; } @media (prefers-reduced-motion: reduce) { .iv-flag { transition: none; } } /* Op donkere koppen een licht randje i.p.v. een donker. */ .iv-mhead .iv-flag, .iv-dhead.dark .iv-flag, .iv-dhead.transparent .iv-flag { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55); } .iv-mhead-light .iv-flag { box-shadow: 0 0 0 1px rgba(20, 34, 51, 0.30); } /* Hier stonden twee regels die de actieve vlag een donker randje gaven omdat hij op een WITTE indicator-pil lag. Die pil is met variant C verdwenen (27 aug 2026); de randen staan nu bij de cirkels zelf, verderop. */ /* Alleen voor schermlezers: de taalnaam achter de vlag op de toggle-knop. */ .iv-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* 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 C — RONDE VLAGGEN, geen pil eromheen (Nick 27 aug 2026). ───────────────────────────────────────────────────────────────────────── Wat hier stond: variant B, een segmented pill met een glijdende witte indicator (Nick 20 jul, gekozen uit voorstel v3). Die pil was ontworpen voor LETTERCODES — 12,5px tekst die je met opacity kunt dempen. Op 26 aug kwamen er vlaggen in, en drie volvlakken kleur naast elkaar in een pil trokken meer aandacht dan het logo ernaast. De twee inactieve werden gedempt met opacity 0.7 + saturate 0.85, en dat maakt een vlag vaal, niet rustig. Nu: de cirkel maakt van een vlag een icoon. Eén container minder, en welke taal aanstaat lees je aan MAAT (26 tegen 20px) en aan demping — niet aan een witte pil eronder. De rand is 1px en doet alleen nog waar hij voor is: de witte banen van NL en de Union Jack niet laten wegvallen op navy. De glijdende indicator is uit de markup gehaald; `place()` in chrome.js is null-guarded en doet daarom niets meer. De `.on`-class blijft wél gezet — dáár hangt alles hieronder aan. */ .iv-mhead .iv-mseg { /* Drie vaste sloten naast elkaar. De knoppen liggen absoluut zodat ze van slot kunnen WISSELEN zonder dat de rij herschikt — dat is wat de kaarten laat schuiven in plaats van springen. --knop is de slotbreedte én het raakvlak dat je mag missen zonder mis te tikken. */ /* --knop is het RAAKVLAK, niet de vlag. Die twee zijn bewust losgekoppeld (Nick, 27 aug 2026: "vergroot het raakgedeelte terwijl je de vlaggen dezelfde grootte houdt"): een grotere vlag maakt de kop druk, een groter raakvlak maakt alleen het mikken makkelijker. De kaartenwaaier die hier eerst stond is teruggedraaid op Nicks verzoek ("zet ze anders gewoon naast elkaar en maak een motion als je er 1 tapt"). Dat scheelt de hele sloten-machinerie: drie knoppen in een rij, en de bevestiging zit in de beweging bij het kiezen, niet in de opstelling. */ --knop: 36px; --knop-h: 42px; display: inline-flex; align-items: center; gap: 0; position: relative; background: none; border-radius: 0; padding: 0; -webkit-tap-highlight-color: transparent; } /* Hier stond de glijdende witte achtergrond-pil van variant B. Het element `.iv-mseg-ind` is met variant C uit de markup gehaald, dus deze regels waren dood — en dode CSS die er levend uitziet laat een volgende sessie zoeken naar een indicator die er niet is. `place()` in chrome.js is null-guarded en doet niets meer; de `.on`-class die diezelfde functie zet, is wél nog wat de cirkels hieronder aanstuurt. */ .iv-mhead .iv-mseg-btn { /* De knop is puur raakvlak: onzichtbaar, altijd de volle slotbreedte, en hij verschuift naar zijn slot. Wat je ZIET is de cirkel erbinnen. */ 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: 0; border-radius: 100px; width: var(--knop); height: var(--knop-h); display: flex; align-items: center; justify-content: center; touch-action: pan-y; transition: color 0.28s ease; flex: 0 0 auto; } .iv-mhead .iv-mseg-btn.on { color: var(--navy, #2F4157); } /* WELKE taal aan staat, herkenbaar zónder op kleur te hoeven letten: 1. de witte indicator-pill staat ónder de gekozen vlag (positie/vorm), 2. die vlag is aantoonbaar GROTER dan de andere twee (maat), 3. de andere twee zijn ingehouden (verzadiging/dekking) — die derde is de kers, niet het bewijs, want kleur alleen is te weinig. Meetbaar: getBoundingClientRect van de actieve vlag is breder dan de rest. */ .iv-mhead .iv-mseg-btn .iv-flag { width: 20px; height: 20px; border-radius: 50%; /* Licht gedempt, maar de vlag moet herkenbaar BLIJVEN: een Duitse gast moet de Duitse vlag kunnen aanwijzen, ook als hij niet aanstaat. Met opacity 0.45 + saturate 0.5 mat de gate rood als rgb(86,46,58) — dat is geen rood meer. Het onderscheid komt hier van MAAT (26 tegen 20px) en van de rand, niet van kleur wegnemen. */ opacity: 0.72; filter: none; box-shadow: 0 0 0 1px rgba(255,255,255,0.35); transition: width 0.28s cubic-bezier(0.34,1.37,0.64,1), height 0.28s cubic-bezier(0.34,1.37,0.64,1), transform 0.42s cubic-bezier(0.34,1.37,0.64,1), opacity 0.24s ease, filter 0.24s ease, box-shadow 0.24s ease; } /* De bevestiging zit in de BEWEGING: tik je een vlag, dan drukt hij kort in en veert door naar zijn volle maat, terwijl de ring even oplicht. Eén gebaar dat zegt "deze heb je nu". De klasse zet chrome.js alleen bij een echte keuze, niet bij het laden — anders springt de kop bij elk paginabezoek. */ @keyframes iv-taal-gekozen { 0% { transform: scale(0.82); } 50% { transform: scale(1.14); } 100% { transform: scale(1); } } @keyframes iv-taal-ring { 0% { box-shadow: 0 0 0 1px rgba(255,255,255,0.95), 0 0 0 0 rgba(255,255,255,0.55); } 60% { box-shadow: 0 0 0 1px rgba(255,255,255,0.95), 0 0 0 7px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 1px rgba(255,255,255,0.95), 0 0 0 0 rgba(255,255,255,0); } } .iv-mhead .iv-mseg-btn.net-gekozen .iv-flag { animation: iv-taal-gekozen 0.46s cubic-bezier(0.34,1.37,0.64,1), iv-taal-ring 0.6s ease-out; } /* Wie beweging heeft uitgezet krijgt geen pop en geen puls — wél de maat- en randverandering, want dát is de informatie: welke taal aanstaat. Motion mag hier verdwijnen, betekenis niet. */ @media (prefers-reduced-motion: reduce) { .iv-mhead .iv-mseg-btn.net-gekozen .iv-flag { animation: none; } } /* De vlag die je LOSLAAT krimpt gewoon terug; geen eigen animatie, anders trekken twee bewegingen tegelijk aan de aandacht. */ .iv-mhead .iv-mseg-btn.on .iv-flag { width: 26px; height: 26px; opacity: 1; filter: none; /* Rand plus een zachte slagschaduw: de schaduw is wat de bovenste kaart visueel LOSMAAKT van de twee eronder. Zonder die schaduw zie je drie cirkels die elkaar raken, niet drie kaarten die over elkaar liggen. */ box-shadow: 0 0 0 1px rgba(255,255,255,0.95), 0 2px 6px -1px rgba(0,0,0,0.45); } /* De vlag-SVG's zijn 60×40. In een vierkante cirkel laat de standaard `meet`-schaling links en rechts leeg; 150% breed met -25% verschuiving vult hem precies. Bewust hier en niet als preserveAspectRatio op de SVG zelf: diezelfde SVG's gebruikt de uitklapper rechthoekig, en daar is `meet` juist goed. */ .iv-mhead .iv-mseg-btn .iv-flag svg { width: 150%; height: 100%; margin-left: -25%; } @media (prefers-reduced-motion: reduce) { .iv-mhead .iv-mseg-btn .iv-flag { transition: opacity 0.18s ease, filter 0.18s ease; } } /* Lichte header (bv. juridische pagina's): daar valt een witte rand weg, dus dezelfde cirkels met een donkere rand. */ .iv-mhead-light .iv-mseg { background: none; } .iv-mhead-light .iv-mseg-btn { color: rgba(20,34,51,0.6); } .iv-mhead-light .iv-mseg-btn .iv-flag { box-shadow: 0 0 0 1px rgba(20,34,51,0.25); } .iv-mhead-light .iv-mseg-btn.on .iv-flag { box-shadow: 0 0 0 1px rgba(20,34,51,0.55); } /* 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; } /* ─── Raakvlakken op touch ─── Zonder tekst worden de knoppen smaller; op een telefoon moet elke taalknop minstens 44×44 blijven. Bewust @media (pointer: coarse) en NIET aan de vensterbreedte gehangen: een iPad in landscape is 1024px breed én touch, en kreeg met een breedte-regel juist géén grote raakvlakken. */ @media (pointer: coarse) { /* Gap terug naar 0: de knoppen zijn hier 44 breed terwijl de cirkel 20 à 26 is, dus er zit al ruimte tussen wat je ZIET. Met 6px erbij wordt de kop onnodig breed op een telefoon. */ /* Op een vinger: 52 breed en 48 hoog per kaart. Dat is ruim boven de 44 die WCAG vraagt, en het is precies wat Nick wilde — makkelijker mikken zonder dat de vlaggen groeien. De vlag blijft 20/26px; alleen het onzichtbare vlak eromheen wordt groter. */ /* Nick, 27 aug 2026: "kunnen ze ietsje dichter bij elkaar, maar het touchvlak wel groter." Dat lijkt tegenstrijdig en is het niet — het vlak hoeft niet breder, het mag ook hoger. 48 breed en 54 hoog is 2592px² tegen 2496 daarvoor, dus een grótér raakvlak, terwijl de vlaggen 6px dichter bij elkaar komen (48 hart-op-hart in plaats van 54). De kop is 56px hoog, dus 54 is het maximum dat er nog netjes in past. */ .iv-mhead .iv-mseg { --knop: 48px; --knop-h: 54px; padding: 0; gap: 0; } /* border-radius 100px zou van een 44×44-knop een rondje maken, en de hoeken vallen dan buiten het raakvlak (elementFromPoint bewijst dat). De knop is onzichtbaar — alleen de vlagcirkel erbinnen wordt getekend — dus een kleinere radius kost visueel niets en levert echt oppervlak op. */ .iv-mhead .iv-mseg-btn { min-width: 48px; min-height: 54px; padding: 0; border-radius: 12px; } .iv-lang-btn { min-width: 44px; min-height: 44px; } .iv-lang-pop button { min-height: 44px; } } .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: flex; align-items: center; gap:var(--sp-3); 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); } .iv-lang-naam { flex: 1 1 auto; } /* De gekozen taal in de uitklapper: een vinkje (vorm, geen kleur) + vet. */ .iv-lang-pop button.is-cur { font-weight: 700; } .iv-lang-vink { flex: 0 0 auto; width: 15px; height: 15px; color: var(--accent, #46677C); } /* ─── 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); }