. */ #dc-root [data-dc-nav] { display: none !important; } /* Knoppen over de volle breedte: dat leest beter en voorkomt dat een brede knop de pagina oprekt (de oorzaak van de horizontale schuifbalk in 1a/1c). */ #dc-root button { max-width: 100% !important; white-space: normal !important; } /* Buitenmarges gelijktrekken naar 20 px. */ #dc-root section, #dc-root footer { margin-left: 20px !important; margin-right: 20px !important; } #dc-root header, #dc-root [style*="padding: 88px 96px"], #dc-root [style*="padding: 22px 32px"], #dc-root [style*="padding: 34px 32px"] { padding-left: 20px !important; padding-right: 20px !important; } /* Secties die van rand tot rand lopen houden hun volle breedte. */ #dc-root [style*="margin: 110px 0 0"], #dc-root [style*="margin: 0"] { margin-left: 0 !important; margin-right: 0 !important; } /* Koppen terugschalen. De ontwerpen gebruiken 82 px voor de hero; dat is op een telefoon breder dan het scherm. */ #dc-root h1 { font-size: clamp(34px, 9vw, 46px) !important; line-height: 1.05 !important; } #dc-root h2 { font-size: clamp(26px, 7vw, 36px) !important; line-height: 1.1 !important; } #dc-root h3 { font-size: clamp(20px, 5.5vw, 26px) !important; } /* Lange woorden (Poolse samenstellingen, e-mailadressen) mogen afbreken. */ #dc-root h1, #dc-root h2, #dc-root h3, #dc-root p { overflow-wrap: break-word; } /* Vaste hoogtes uit het ontwerp inkorten. Twee redenen: een hero van 640 px laat op een telefoon niets van de pagina eronder zien, en een smal, hoog vlak snijdt zo veel van een liggende foto weg dat de opname onherkenbaar wordt. Rond 48vh blijft de uitsnede bruikbaar. */ #dc-root [style*="height: 640px"]:not(.dc-hero), #dc-root [style*="height: 620px"]:not(.dc-hero), /* dc-area valt hier buiten: dat vlak heeft tekst óver de foto, en die moet de hoogte bepalen. Met een vaste hoogte loopt de tekst de foto uit zodra hij in een taal wat langer is. */ #dc-root [style*="height: 560px"]:not(.dc-hero):not(.dc-area), #dc-root [style*="height: 520px"]:not(.dc-hero) { height: 48vh !important; min-height: 300px !important; max-height: 420px !important; } #dc-root [style*="min-height: 100vh"] { min-height: 78vh !important; } /* De schermvullende hero van variant 1c. Twee dingen gaan hier mis op een telefoon: de kop (118 px boven de onderrand) botst met de regel eronder (40 px), en een staand vlak van 358 × 760 snijdt zo veel van de liggende foto weg dat er een smalle streep overblijft. Een lagere hero lost beide op: de uitsnede blijft herkenbaar en de twee tekstblokken passen. */ #dc-root section[style*="min-height: 760px"] { height: auto !important; min-height: 600px !important; } /* De kop wat hoger leggen zodat er ruimte overblijft voor de regel eronder. */ #dc-root section[style*="min-height: 760px"] > [style*="bottom: 118px"] { bottom: 132px !important; } /* Die kop is in het ontwerp 92 px; op drie regels loopt hij anders tegen het bovenliggende regeltje aan. Iets kleiner en strakker gezet. */ #dc-root section[style*="min-height: 760px"] h1 { font-size: clamp(30px, 8vw, 40px) !important; line-height: 1.06 !important; margin-top: 14px !important; } /* De binnenmarge van 44 px terugbrengen naar de 20 px van de rest. */ #dc-root section[style*="min-height: 760px"] [style*="padding: 0 44px"] { padding-left: 20px !important; padding-right: 20px !important; } /* Absoluut geplaatste tekstblokken over de hero: op deze breedte kunnen ze niet meer naast de foto staan, dus links/rechts inklemmen. */ #dc-root [style*="position: absolute"][style*="left: 56px"], #dc-root [style*="position: absolute"][style*="left: 96px"] { left: 20px !important; right: 20px !important; max-width: none !important; } /* De boekingskaart valt ook op een telefoon over de kop heen; de marges staan verderop bij .dc-datebar. Hier stond een regel die de overlap juist ophief (margin: 20px) — die won van de nieuwe opmaak en duwde de kaart scheef, want ze zet ook de zijmarges. */ /* De velden in die balk staan op de desktop naast elkaar, gescheiden door lijnen rechts. Onder elkaar hoort die lijn onderaan, en de zijmarges van 26 px vervallen — anders staan label en veld over elkaar heen. */ #dc-root label[style*="border-right"] { border-right: none !important; border-bottom: 1px solid #e6e1d7 !important; padding: 12px 0 !important; min-height: auto !important; } /* De knop in de balk staat in een kolom met padding-left; die valt weg. */ #dc-root [style*="padding-left: 26px"] { padding-left: 0 !important; padding-top: 14px !important; } /* De vastgezette kolom van variant 1b mag niet meescrollen op een telefoon: hij is dan bijna even hoog als het scherm. */ #dc-root aside[style*="position: sticky"] { position: static !important; } /* De onderbalk en de bovenbalk staan in het blok "mobiel: balken" onderaan dit bestand. */ /* De stappenbalk boven het boekingsvenster ("1. Termin … 4. Potwierdzenie") past niet op één regel. Hem laten schuiven houdt de sluitknop op zijn plek; anders zakt die eronder en valt over de titel heen. */ #dc-root [style*="border-bottom"][style*="justify-content: space-between"] > [style*="display: flex"][style*="gap: 26px"] { flex-wrap: nowrap !important; overflow-x: auto !important; gap: 14px !important; scrollbar-width: none; } } /* ---------- kleine telefoon ---------- */ @media (max-width: 420px) { /* De taalkeuze en het telefoonnummer in de bovenbalk stonden op 390 px in vier regels; onder elkaar met wat lucht leest dat beter. */ #dc-root [style*="letter-spacing: 0.06em"][style*="text-transform: uppercase"] { row-gap: 6px !important; } #dc-root section, #dc-root footer { margin-left: 16px !important; margin-right: 16px !important; } } /* ---------- mobiel menu ---------- */ /* * Een schermvullend menu in plaats van een uitklappaneeltje. Reden: de drie * ontwerpen leunen op hun letter — Cormorant Garamond, Space Grotesk, Bodoni * Moda — en die komen pas tot hun recht op formaat. Een lijstje van 15 px in * een strook onder de balk verliest precies wat de ontwerpen kenmerkt. * * De kleuren en letters komen als custom properties uit dc-runtime.js, die ze * van de pagina zelf afleest. Dit blok gaat dus alleen over vorm, ritme en * beweging; niet over welke kleur waar hoort. */ /* --- de knop: twee streepjes die een kruis worden --- */ .dc-menu-toggle { display: none; position: relative; color: inherit; width: 46px; /* 44 px is de kleinste maat die op een telefoon prettig aantikt; kleiner mis je hem net zo vaak als je hem raakt. */ height: 46px; padding: 0; background: none; border: none; cursor: pointer; flex-shrink: 0; z-index: 60; } .dc-menu-toggle span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: currentColor; transition: transform .42s cubic-bezier(.2, .9, .25, 1), width .42s cubic-bezier(.2, .9, .25, 1); } /* Ongelijke lengtes: dat leest als een getekend teken in plaats van een icoon uit een bibliotheek. */ .dc-menu-toggle span:nth-child(1) { top: 19px; } .dc-menu-toggle span:nth-child(2) { top: 26px; right: 18px; } .dc-menu-toggle.dc-menu-open span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); } .dc-menu-toggle.dc-menu-open span:nth-child(2) { right: 11px; transform: translateY(-3.5px) rotate(-45deg); } /* --- het menu zelf --- */ .dc-menu-overlay { display: none; position: fixed; inset: 0; z-index: 55; background: var(--dc-bg); color: var(--dc-ink); padding: 96px 24px 32px; overflow-y: auto; overscroll-behavior: contain; /* Een vleug van de accentkleur in de hoek geeft het vlak diepte zonder dat het een gekleurd scherm wordt. */ background-image: radial-gradient(120% 80% at 88% 0%, color-mix(in srgb, var(--dc-accent) 16%, transparent) 0%, transparent 62%); /* Een paneel dat van rechts binnenschuift in plaats van een vlak dat verschijnt. De beweging staat in dc-runtime.js (schuifMenuIn, met GSAP). Hier staat bewust géén begin-transform meer: GSAP zet die zelf met xPercent, en twee transforms op hetzelfde element tellen bij elkaar op — dan begint het paneel op twee schermbreedtes afstand en schuift het maar half in beeld. Het paneel is verborgen (hidden) tot het opengaat, dus er is toch niets te zien voordat de animatie begint. Schaduw aan de linkerkant: die maakt zichtbaar dat het paneel óver de pagina ligt in plaats van ernaast. */ will-change: transform; box-shadow: -18px 0 48px rgba(0, 0, 0, .18); } /* Draait GSAP niet, dan is er geen animatie die het paneel op zijn plek zet. Zonder dit blijft het menu dan buiten beeld staan en doet de knop ogenschijnlijk niets. */ .dc-menu-overlay.dc-menu-static { transform: none; } /* Op een wat breder scherm hoeft het paneel niet de hele breedte te pakken; dan leest het als een la die eroverheen schuift. Op een telefoon blijft het schermvullend, want daar is 78% van 390 px te smal voor de lijst. */ @media (min-width: 560px) { .dc-menu-overlay { left: auto; right: 0; width: min(420px, 78vw); } } /* --- de lijst --- */ .dc-menu-list { display: flex; flex-direction: column; border-top: 1px solid var(--dc-rule); } .dc-menu-list a { display: flex; align-items: baseline; gap: 16px; padding: 19px 4px; text-decoration: none; color: inherit; border-bottom: 1px solid var(--dc-rule); position: relative; /* Het binnenkomen van de regels doet GSAP, samen met het paneel waar ze in zitten (zie schuifMenuIn in dc-runtime.js). Hier stond een eigen keyframe-animatie; die liep langs de tweens heen en gaf een dubbele beweging. Draait GSAP niet, dan staan de regels er gewoon meteen. */ } /* Het volgnummer vult de linkermarge en geeft de lijst ritme. */ .dc-menu-num { font-family: var(--dc-body); font-size: 11px; letter-spacing: .16em; color: var(--dc-accent); min-width: 22px; font-variant-numeric: tabular-nums; } /* De naam in de siergeletter van het ontwerp, op een maat waar die letter iets van zichzelf laat zien. */ .dc-menu-label { font-family: var(--dc-display); font-size: clamp(28px, 8.5vw, 40px); line-height: 1.04; letter-spacing: -0.005em; } /* Aantikken: een streep in de accentkleur schuift onder het item door. */ .dc-menu-list a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -1px; height: 1px; background: var(--dc-accent); transition: right .34s cubic-bezier(.2, .9, .25, 1); } .dc-menu-list a:active::after, .dc-menu-list a:focus-visible::after { right: 0; } .dc-menu-list a:focus-visible { outline: none; /* Zichtbare focus voor wie met een toetsenbord navigeert. */ box-shadow: inset 0 0 0 1px var(--dc-accent); } /* Telefoon en WhatsApp blijven als één contactgroep bij elkaar. Dezelfde links worden door het mobiele menu hergebruikt. */ .dc-phone-actions { display: inline-flex; align-items: center; gap: 9px; } /* --- de voet: telefoonnummer en WhatsApp --- */ /* * De voet van het menu sluit aan op de lijst erboven. Die lijst eindigt al * met een lijn onder het laatste item; nog een lijn erbovenop gaf twee * strepen met 30 px ertussen. De onderste lijn van de lijst is genoeg als * scheiding — de ruimte eronder doet de rest. */ .dc-menu-meta { display: flex; flex-direction: column; align-items: stretch; gap: 13px; margin-top: 26px; padding: 0 4px; } .dc-menu-meta a { font-family: var(--dc-body); font-size: 15px; letter-spacing: .04em; color: var(--dc-accent); text-decoration: none; } .dc-menu-meta > a[href^="tel:"] { display: flex; align-items: center; justify-content: space-between; min-height: 40px; padding: 0; font-family: var(--dc-display); font-size: 21px; letter-spacing: .02em; } .dc-menu-meta > a[href^="tel:"]::after { content: "\2197"; font-family: var(--dc-body); font-size: 15px; opacity: .65; } .dc-menu-meta .dc-social-links--menu { display: flex; gap: 18px; width: 100%; } .dc-menu-meta .dc-social-links--menu a { justify-content: flex-start; width: auto; height: 32px; padding: 0; color: var(--dc-accent); font-size: 12px; letter-spacing: .06em; transition: color .2s ease, opacity .2s ease; } .dc-menu-meta .dc-social-links--menu span { display: inline; } .dc-menu-meta .dc-social-links--menu a:hover, .dc-menu-meta .dc-social-links--menu a:active { color: var(--dc-ink); opacity: .75; } .dc-menu-meta .dc-social-links--menu svg { width: 16px; height: 16px; } .dc-menu-meta .dc-social-links--menu a:focus-visible { outline: 2px solid var(--dc-accent); outline-offset: 3px; } /* De pagina eronder staat stil zolang het menu open is. */ html.dc-menu-locked, html.dc-menu-locked body { overflow: hidden; } @media (max-width: 760px) { .dc-menu-toggle { display: block; } /* [hidden] moet het van die regel hierboven kunnen winnen: de knop wordt verborgen zolang het boekingsvenster open is. */ .dc-menu-toggle[hidden] { display: none; } .dc-menu-overlay:not([hidden]) { display: block; } /* De knop staat vast rechtsboven. Hij hangt aan : de balken van 1b en 1c gebruiken backdrop-filter, en zo'n element wordt een containing block, waardoor een position:fixed kind er tóch mee wegscrolt. Sprong je via het menu naar een sectie, dan was de knop daarna onbereikbaar. Het vlakje eronder houdt hem leesbaar op elke ondergrond. */ /* * De knop hoort nu bij de balk bovenaan en niet meer los over de foto: het * ronde vlakje met slagschaduw viel half over de rand van de balk heen. * Zonder ondergrond staat hij gewoon in de rij naast de taal- en themaknop. * De balk zelf scrollt mee (position: sticky), dus hij blijft bereikbaar. */ .dc-menu-toggle { /* Vroeger fixed met een vaste hoogte van 51 px, uit de tijd dat de balk zelf 51 px was. Nu de taal- en themaknop er echt in staan is de balk hoger, en stond de hamburger 3 px te hoog ten opzichte van de rest. Als gewoon lid van de flexrij centreert align-items hem vanzelf mee, ongeacht hoe hoog de balk uitvalt. */ /* display hier meegeven: de regel hierboven in dit blok zet hem op block, maar de basisregel buiten de media query staat op none en deze regel komt later — zonder eigen display wint die none alsnog. */ /* block en niet flex: de twee streepjes staan absoluut binnen de knop, dus die moet relatief blijven en zijn eigen maat houden. Met flex werden ze flexkinderen en rekten ze over de hele balk uit. */ display: block; position: relative; height: 34px; width: 34px; /* Als laatste in de rij, rechts van taal en thema. */ order: 9; margin-left: 6px; border-radius: 0; background: none; box-shadow: none; } /* * Open moet de knop bóven het menu liggen, anders teken je het kruisje * onder het paneel en lijkt het weg. * * z-index alleen helpt niet: de knop staat in de balk, en die vormt met * zijn eigen z-index een stapelcontext. Daarbinnen kan een kind nooit * boven een laag buiten die context uitkomen, hoe hoog je het getal ook * zet. Daarom staat hij open even los van de balk (fixed), op dezelfde * plek als waar hij dicht staat. */ .dc-menu-toggle.dc-menu-open { position: fixed !important; /* Op dezelfde plek als waar hij dicht stond: de balk is 56 px hoog en de knop 34, dus 11 px vanaf de bovenrand houdt hem op zijn stek. Zo verspringt hij niet op het moment dat je hem aantikt. */ top: 11px !important; right: 12px !important; width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; margin: 0 !important; padding: 0 !important; z-index: 60 !important; } /* Zolang het menu open is staat de knop rechtsboven op het scherm: hij hoort dan bij het menu, niet meer bij de balk eronder. */ /* Open hoort de knop bij het menu; daar geldt de menukleur, en het vlakje eronder is niet meer nodig omdat het menu zelf de ondergrond levert. */ .dc-menu-toggle.dc-menu-open { color: var(--dc-open-ink, currentColor); background: none; box-shadow: none; backdrop-filter: none; } /* De streepjes zijn getekend voor een knop van 46 px; in de balk is hij 34 px, dus schuiven ze mee naar binnen. */ .dc-menu-toggle span { left: 7px; right: 7px; } .dc-menu-toggle span:nth-child(1) { top: 13px; } .dc-menu-toggle span:nth-child(2) { top: 20px; right: 12px; } .dc-menu-toggle.dc-menu-open span:nth-child(2) { right: 7px; } /* Het kruis houdt dezelfde lijndikte als de hamburger en als de pictogrammen ernaast; alleen de kleur volgt het menu, want dat kan een donker vlak zijn. */ .dc-menu-toggle.dc-menu-open span { /* Zelfde lijndikte als de hamburger en als de pictogrammen ernaast; alleen de kleur volgt het menu, want dat kan een donker vlak zijn. */ height: 1.6px !important; background: currentColor !important; } } /* Wie beweging liever niet ziet, krijgt hem niet. */ @media (prefers-reduced-motion: reduce) { /* schuifMenuIn() slaat de animatie dan over, dus moet het paneel hier zelf op zijn plek staan — anders blijft het buiten beeld. */ .dc-menu-overlay { transform: none !important; } .dc-menu-overlay, .dc-menu-list a, .dc-menu-meta { animation: none; } .dc-menu-toggle span, .dc-menu-list a::after { transition: none; } } /* ---------- taalkiezer ---------- */ /* * Een knop met een wereldbol en de huidige taal, die een lijstje uitklapt. * De kleuren komen van het ontwerp mee via --dc-lang-accent; dit blok gaat * alleen over vorm en gedrag. */ .dc-lang { position: relative; display: inline-flex; font-size: 12px; } .dc-lang-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; background: none; border: none; border-radius: 4px; cursor: pointer; color: inherit; font: inherit; font-size: 12px; letter-spacing: .06em; line-height: 1; } .dc-lang-btn:hover { color: var(--dc-lang-accent); } .dc-lang-btn:focus-visible { outline: 2px solid var(--dc-lang-accent); outline-offset: 2px; } .dc-lang-caret { transition: transform .18s ease; } .dc-lang-btn[aria-expanded="true"] .dc-lang-caret { transform: rotate(180deg); } .dc-lang-list { position: absolute; top: calc(100% + 6px); right: 0; z-index: 70; min-width: 168px; margin: 0; padding: 5px; list-style: none; /* Eigen ondergrond: de balk erboven is soms doorzichtig, en daar kijk je anders dwars doorheen. */ background: var(--dc-lang-bg, #fff); border: 1px solid rgba(128, 128, 128, .22); border-radius: 6px; box-shadow: 0 10px 30px rgba(0, 0, 0, .14); } .dc-lang-list[hidden] { display: none; } .dc-lang-list a { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 4px; text-decoration: none; color: inherit; white-space: nowrap; } .dc-lang-list a:hover { background: rgba(128, 128, 128, .1); } .dc-lang-list a.is-current { color: var(--dc-lang-accent); font-weight: 500; } /* De dropdown moet boven de sticky desktopheader én boven de hero liggen. De links mogen niet de witte navigatiekleur erven die boven de film geldt: ze staan altijd op hun eigen papierkleurige paneel. */ #dc-root .dc-topbar:has(.dc-lang-btn[aria-expanded="true"]), #dc-root .dc-header:has(.dc-lang-btn[aria-expanded="true"]), #dc-root header:has(.dc-lang-btn[aria-expanded="true"]) { z-index: 80 !important; } #dc-root .dc-lang:has(.dc-lang-btn[aria-expanded="true"]) { z-index: 120; } #dc-root .dc-lang-list { z-index: 120; color: var(--c-ink, #1b2320) !important; background: var(--c-card, #fffdf9) !important; border-color: var(--c-line, #e6e1d7) !important; } #dc-root .dc-lang-list a { color: var(--c-ink, #1b2320) !important; } #dc-root .dc-lang-list a:hover { color: var(--c-ink, #1b2320) !important; background: var(--c-panel, #f4f1ea) !important; } #dc-root .dc-lang-list a.is-current { color: var(--c-accent, #3c6b78) !important; } /* Vinkje bij de taal die aanstaat. */ .dc-lang-list a.is-current::after { content: "✓"; margin-left: auto; font-size: 11px; } @media (max-width: 760px) { html.dc-lang-open, html.dc-lang-open body { overflow: hidden; } .dc-lang-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; background: rgba(15, 22, 21, .5); } .dc-lang-modal .dc-lang-list { position: static; width: min(100%, 360px); min-width: 0; margin: 0; padding: 10px; color: var(--c-ink, #1b2320); background: var(--c-card, #fffdf9); border: 1px solid var(--c-line, #e6e1d7); border-radius: 5px; box-shadow: 0 24px 64px rgba(0, 0, 0, .24); } .dc-lang-modal .dc-lang-list a { min-height: 54px; padding: 0 16px; border-radius: 3px; font-size: 15px; color: var(--c-ink, #1b2320); } .dc-lang-modal .dc-lang-list li + li { border-top: 1px solid var(--c-line, #e6e1d7); } .dc-lang-modal .dc-lang-list a.is-current { color: var(--c-accent, #3c6b78); font-weight: 500; } } .dc-lang-code { min-width: 20px; font-size: 11px; letter-spacing: .08em; opacity: .7; } .dc-lang-name { font-size: 13.5px; } /* Op een telefoon staat de kiezer in de bovenbalk; het lijstje mag dan niet buiten het scherm vallen. */ @media (max-width: 420px) { .dc-lang-list { right: auto; left: 0; } } /* ---------- licht en donker ---------- */ /* * Het ontwerp zet zijn kleuren met inline-stijlen; die kun je niet met gewone * regels overschrijven. In plaats van honderd regels te herschrijven vertaalt * dc-runtime.js elke kleur uit het ontwerp naar een variabele, en staat hier * per thema wat die variabele betekent. * * De donkere versie is geen omkering van de lichte: puur zwart op wit is hard * en de tinten van het ontwerp (warm zand, teal) moeten herkenbaar blijven. * Daarom een eigen, iets warmere donkere set. */ :root { /* licht — de kleuren zoals het ontwerp ze bedoelde */ --c-paper: #faf8f4; /* achtergrond van de pagina */ --c-card: #fffdf9; /* kaarten en velden */ --c-panel: #f4f1ea; /* rustig vlak, iets dieper dan papier */ --c-ink: #1b2320; /* koptekst */ --c-body: #55605b; /* lopende tekst */ --c-muted: #6f7671; /* bijschriften */ --c-line: #e6e1d7; /* scheidingslijnen */ --c-line-soft: #ded8cd; --c-line-hard: #e2ddd3; --c-accent: #3c6b78; /* teal */ --c-accent-dark: #2d5560; --c-icon: #3c6b78; --c-on-dark: #f7f4ee; /* tekst op een donker vlak */ } [data-theme="dark"] { --c-paper: #14191a; --c-card: #1b2223; --c-panel: #202829; --c-ink: #eceae4; --c-body: #b9c0bb; --c-muted: #8d9691; --c-line: #2b3435; --c-line-soft: #333d3e; --c-line-hard: #2b3435; --c-accent: #6fa8b6; /* lichter, anders valt teal weg op donker */ --c-accent-dark: #8cc0cc; --c-icon: #8cc0cc; --c-on-dark: #f2efe9; } /* De overgang tussen de twee standen mag zacht zijn, maar niet traag. */ #dc-root, #dc-root * { transition: background-color .2s ease, border-color .2s ease, color .2s ease; } @media (prefers-reduced-motion: reduce) { #dc-root, #dc-root * { transition: none; } } html, body { background: var(--c-paper); } /* Native onderdelen van datumvelden — waaronder het agenda-icoon — erven geen SVG/CSS-kleur. Via color-scheme kiest de browser zelf de juiste lichte of donkere variant. */ #dc-root input[type="date"] { color-scheme: light; } [data-theme="dark"] #dc-root input[type="date"] { color-scheme: dark; } #dc-root input[type="date"]::-webkit-calendar-picker-indicator { opacity: .72; cursor: pointer; } [data-theme="dark"] #dc-root input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) brightness(1.35); opacity: .82; } /* * Het donkere blok onderaan (dc-cta) in de donkere stand. * * Dat blok is in het ontwerp een donkere band die opvalt tegen het lichte * papier: #1b2320 op #faf8f4 is 15:1. In de donkere stand wordt de pagina * zelf #14191a, en dan is diezelfde band 1,1:1 — je ziet het verschil * gewoon niet meer, het blok verdwijnt in de achtergrond. * * Nog donkerder maken hielp niet: #0d1112 tegen #14191a is 1,07:1, dus dan * blijft het blok even onzichtbaar. Elke grijstint die wél verschilt wordt * juist lichter dan de pagina en leest dan als een kaart, niet als de * afsluitende band die het hoort te zijn. * * Daarom een diep teal in de familie van de accentkleur: 1,70:1 tegen de * pagina — genoeg voor een vlak van deze omvang — en het zegt meteen wat * het is. Dezelfde rol als het donkere blok in de lichte stand, met de * kleur die op de rest van de site al "hier moet je klikken" betekent. */ [data-theme="dark"] #dc-root .dc-cta { background: #1a4550 !important; color: var(--c-ink) !important; } /* De regel onder de kop stond op opacity .75; op het diepere zwart is dat te vaag. */ [data-theme="dark"] #dc-root .dc-cta p { color: rgba(236, 234, 228, .82) !important; opacity: 1 !important; } /* De knop was crème met donkere tekst — dat is in de donkere stand het helderste vlak op de pagina en trekt alle aandacht weg van de tekst ernaast. De accentkleur doet hetzelfde werk rustiger. */ [data-theme="dark"] #dc-root .dc-cta button { /* Vaste waarden en geen --c-paper: die variabele is in de donkere stand zelf donker, dus dan werden vlak en tekst allebei #14191a en was de knop onzichtbaar. Op het teal-vlak hoort de knop juist licht te zijn. */ background: #f2efe9 !important; color: #12333b !important; } /* ---------- de schakelaar ---------- */ .dc-theme { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; background: none; border: none; border-radius: 50%; cursor: pointer; color: inherit; flex-shrink: 0; } /* * Het pictogram stond op de grijstint van het infobalkje (#6f7671). Dat haalt * de contrasteis wel (4,4:1), maar naast tekst in bijna-zwart (15:1) valt een * lijntekening van 15 px in middengrijs gewoon weg — je moet ernaar zoeken. * Dezelfde inkt als de rest van de balk, en een tikje groter en steviger * getekend, maakt hem vindbaar zonder dat hij gaat schreeuwen. */ .dc-theme { color: var(--c-ink, #1b2320); } .dc-theme svg { width: 18px; height: 18px; stroke-width: 1.7; } .dc-theme:hover { background: rgba(128, 128, 128, .14); } .dc-theme:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; } /* Zon in de donkere stand, maan in de lichte: het pictogram toont waar je naartoe schakelt, niet waar je nu staat. */ .dc-theme .dc-sun { display: none; } [data-theme="dark"] .dc-theme .dc-sun { display: block; } [data-theme="dark"] .dc-theme .dc-moon { display: none; } /* ---------- zwevende reserveerknop ---------- */ /* * Altijd bereikbaar, ook bovenaan de pagina waar de vaste balk van het ontwerp * nog niet verschenen is. Rechtsonder, zodat hij niet in de weg zit bij het * lezen en op een telefoon onder de duim valt. */ .dc-book-now { position: fixed; right: 24px; bottom: 24px; z-index: 45; /* onder het boekingsvenster (60) en het menu (55) */ padding: 15px 26px; background: var(--c-accent, #3c6b78); color: #faf8f4; border: none; border-radius: 999px; cursor: pointer; font: inherit; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 8px 26px rgba(0, 0, 0, .22); transition: transform .18s ease, background-color .18s ease; } .dc-book-now:hover { background: var(--c-accent-dark, #2d5560); transform: translateY(-1px); } .dc-book-now:focus-visible { outline: 2px solid var(--c-ink, #1b2320); outline-offset: 3px; } /* Zolang het boekingsvenster of het menu open is, is de knop overbodig. */ html.dc-menu-locked .dc-book-now, .dc-book-now[hidden] { display: none; } @media (max-width: 760px) { .dc-book-now { right: 16px; /* Boven de vaste onderbalk van het ontwerp blijven. */ bottom: 84px; padding: 14px 22px; } } @media (prefers-reduced-motion: reduce) { .dc-book-now { transition: none; } } /* ---------- mobiel: bruikbaarheid ---------- */ /* * Deze regels komen uit een meting op een scherm van 386 px breed. Wat daar * misging was niet de indeling — die klopte al — maar het aanraken zelf: te * kleine knoppen, velden waarin je nauwelijks kunt tikken, en een * boekingsvenster dat hoger was dan het scherm waardoor de knop waar het om * gaat onder de vouw viel. * * De maat die telt is 44 px. Dat is de kleinste knop die een volwassen duim * betrouwbaar raakt; alles daaronder mis je regelmatig, en bij een * boekingsproces betekent een misser een afhaker. */ @media (max-width: 760px) { /* --- velden --- */ /* * De datumvelden en de gastenkeuze waren 20 px hoog: het invoerveld zelf * zonder enige ruimte eromheen. Op een muis werkt dat, met een duim niet. * De volle breedte gebruiken ze al; ze moesten alleen hoogte krijgen. */ #dc-root input[type="date"], #dc-root input[type="text"], #dc-root input[type="email"], #dc-root input[type="tel"], #dc-root select { min-height: 48px !important; padding: 12px 14px !important; box-sizing: border-box !important; /* Het ontwerp zet alleen een lijn onderaan; een heel kader maakt op een telefoon duidelijker wáár je moet tikken. */ border: 1px solid var(--c-line-soft, #ded8cd) !important; border-radius: 8px !important; background: var(--c-paper, #faf8f4) !important; } #dc-root textarea { min-height: 96px !important; padding: 12px 14px !important; box-sizing: border-box !important; border: 1px solid var(--c-line-soft, #ded8cd) !important; border-radius: 8px !important; } /* Het label erboven mag meer lucht krijgen nu het veld groter is. */ #dc-root label { line-height: 1.4 !important; } /* --- knoppen --- */ /* * Alle knoppen naar 48 px. In het ontwerp lopen ze van 37 tot 43 px, wat op * een desktop met een muis prima is maar op een telefoon net te krap. */ #dc-root button { min-height: 48px !important; padding-top: 14px !important; padding-bottom: 14px !important; } /* De sluitkruisjes en de themaschakelaar zijn kleine vierkantjes; die hebben geen hoogte maar oppervlak nodig. */ /* * De sluitkruisjes en de themaschakelaar zijn kleine vierkantjes; die * hebben geen hoogte maar oppervlak nodig. * * In de balk gelden andere maten: daar staan de drie knoppen naast elkaar * op één lijn en maakt 44 px de balk onnodig hoog (en de hamburger * ongelijk aan de rest). Die staan hieronder op 34 px; deze regel geldt * dus alleen buiten de balk. */ #dc-root button.dc-theme, .dc-menu-toggle { min-width: 44px !important; min-height: 44px !important; } /* ...maar niet voor de drie knoppen in de balk: die staan naast elkaar op één lijn en 44 px maakt de balk onnodig hoog. Deze regel staat na de regel hierboven en is specifieker, dus hij wint. */ #dc-root header > .dc-menu-toggle, #dc-root header .dc-taalrij-in-balk .dc-theme, #dc-root header .dc-taalrij-in-balk .dc-lang-btn { min-width: 34px !important; min-height: 34px !important; height: 34px !important; } /* * De themaknop erft de binnenmarge van de knoppen uit het ontwerp * (14px 18px, als inline-stijl). In een vierkantje van 34 px met * border-box blijft daar nul breedte over voor het pictogram: de knop is * er wel, aanklikbaar en al, maar je ziet niets. Vandaar geen marge en het * pictogram gecentreerd. */ #dc-root header .dc-taalrij-in-balk .dc-theme { padding: 0 !important; width: 34px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } #dc-root header .dc-taalrij-in-balk .dc-theme svg { width: 18px !important; height: 18px !important; flex: 0 0 auto !important; } /* * De drie knoppen in de balk als één set. * * Ze waren los van elkaar gegroeid en dat zag je: drie verschillende * hoekafrondingen (4 px, rond, recht), drie breedtes (100, 34, 36) en een * binnenmarge van 14x18 die de knoppen uit het ontwerp meebrachten en hier * niets te zoeken heeft. Kleur en lijndikte liepen ook uiteen. * * Uitgangspunt nu: het zijn geen drie knoppen maar één instrument. Gelijke * vierkanten van 34 px op een rij, geen kader, geen vlakje, geen afronding * — alleen het teken erin verschilt. Dat past bij een balk die vooral niet * in de weg moet zitten: erachter speelt de film. * * De taalknop houdt zijn opschrift (PL/EN/DE/NL), want dat is informatie * en geen versiering; hij is alleen breder, niet anders. */ /* * Het infobalkje boven de header verdwijnt op een telefoon. * * Er staat "Grzybowo · 4 km od Kołobrzegu", het telefoonnummer en de * taalkeuze. De eerste twee staan ook in de voet, in het menu en in de * sectie over de omgeving; op een scherm van 390 px kosten ze een hele * regel om iets te herhalen. De taal- en themaknop blijven wél, want die * zijn nergens anders te bereiken — dc-runtime.js verhuist ze naar de * header (zie verplaatsTaalrij). */ #dc-root .dc-topbar { padding: 0 !important; min-height: 0 !important; border: none !important; } #dc-root .dc-topbar > *:not(:has(.dc-lang)):not(:has(.dc-theme)) { display: none !important; } /* * De balk bovenaan op een telefoon. * * Twee dingen stonden hier in de weg. Het infobalkje erboven (adres, * telefoon) herhaalt wat in de voet en in het menu staat en kost een hele * regel; dat verdwijnt, op de taal- en themaknop na, die nergens anders te * bereiken zijn. En de header zelf brak over drie rijen omdat hij mag * afbreken — logo, dan de twee knoppen, dan de hamburger — waardoor de * balk 224 px hoog werd in plaats van 59. * * Wat er nu staat is één vlakke rij: naam links, bediening rechts, een * haarlijn eronder en verder niets. Geen schaduw, geen doorschijnend vlak, * geen tweede regel. De film erachter moet het beeld dragen, niet de balk. */ #dc-root header { position: sticky !important; top: 0 !important; z-index: 30 !important; /* Niet afbreken: dit is één rij, wat er ook in staat. */ flex-wrap: nowrap !important; align-items: center !important; gap: 10px !important; min-height: 56px !important; padding: 8px 12px 8px 20px !important; background: var(--c-paper, #faf8f4) !important; border-bottom: 1px solid var(--c-line, #e6e1d7) !important; box-shadow: none !important; } /* * De reserveerknop uit het ontwerp verdwijnt hier. Hij dubbelt met de * zwevende knop rechtsonder en met de balk onderaan, en hij is 154 px * breed: samen met de naam en de drie knoppen past dat niet op één rij, * en dan breekt de balk alsnog over drie regels. */ #dc-root header > button:not(.dc-menu-toggle) { display: none !important; } /* De naam van het park: het enige wat links staat, en het mag niet afbreken of krimpen tot onleesbaar. */ #dc-root header > div:first-child { flex: 0 1 auto !important; min-width: 0 !important; font-size: 19px !important; letter-spacing: .12em !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } #dc-root header .dc-taalrij-in-balk { gap: 2px !important; /* nowrap en align-items horen hierbij: zonder deze twee breekt de rij op een smal scherm over meerdere regels en groeit de balk van 59 naar ruim 200 px. */ display: flex !important; flex-wrap: nowrap !important; align-items: center !important; margin-left: auto !important; margin-right: 0 !important; padding: 0 !important; position: static !important; } #dc-root header .dc-taalrij-in-balk .dc-lang-btn, #dc-root header .dc-taalrij-in-balk .dc-theme, #dc-root header > .dc-menu-toggle { height: 34px !important; min-height: 34px !important; min-width: 34px !important; padding: 0 !important; border: none !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; color: var(--c-ink, #1b2320) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* Het opschrift van de taalknop: klein, ruim gespatieerd, in dezelfde inkt. Iets breder dan een vierkant omdat er twee letters in staan. */ #dc-root header .dc-taalrij-in-balk .dc-lang-btn { gap: 5px !important; padding: 0 7px !important; font-size: 11.5px !important; letter-spacing: .1em !important; } /* Alle tekens even groot en even zwaar getekend. */ #dc-root header .dc-taalrij-in-balk .dc-theme svg, #dc-root header .dc-taalrij-in-balk .dc-lang-btn svg, #dc-root header .dc-taalrij-in-balk .dc-lang-caret { width: 17px !important; height: 17px !important; stroke-width: 1.6 !important; flex: 0 0 auto !important; } /* De chevron van de taalknop is een hulpteken, geen pictogram: kleiner, zodat "PL" het woord blijft en niet met het pijltje concurreert. */ #dc-root header .dc-taalrij-in-balk .dc-lang-caret { width: 11px !important; height: 11px !important; opacity: .55 !important; } #dc-root header > .dc-menu-toggle span { height: 1.6px !important; background: currentColor !important; } /* * Een haarlijn vóór de menuknop. Taal en thema zijn instellingen, het menu * is navigatie; dat zijn twee soorten handelingen. De lijn zegt dat, en * doet verder niets. */ #dc-root header > .dc-menu-toggle { position: relative !important; margin-left: 10px !important; } #dc-root header > .dc-menu-toggle::before { content: ""; position: absolute; left: -6px; top: 50%; height: 16px; border-left: 1px solid var(--c-line, #e6e1d7); transform: translateY(-50%); } /* Open hoort de knop bij het menu; dan is er niets meer om van te scheiden. */ #dc-root header > .dc-menu-toggle.dc-menu-open::before { display: none; } /* Aanraken mag je zien, maar zachtjes: geen vlakje dat oplicht, alleen het teken zelf dat even donkerder wordt. Op een telefoon is er geen hover, dus dit is vooral voor toetsenbord en muis. */ #dc-root header .dc-taalrij-in-balk .dc-lang-btn:hover, #dc-root header .dc-taalrij-in-balk .dc-theme:hover, #dc-root header > .dc-menu-toggle:hover { color: var(--c-accent, #3c6b78) !important; background: none !important; } /* * Het tekstblok over de strandfoto (dc-area). * * Het staat absoluut gepositioneerd met left/right 96 px en bottom 72 px. * Dat zijn maten uit het ontwerp van 1440 px: op een telefoon blijft er * dan 198 van de 390 px over, en de drie kolommen eronder gaan onder * elkaar staan. Het blok wordt daardoor hoger dan de sectie zelf en * schuift met bottom: 72px aan de bovenkant de foto uit — gemeten stak * het er 13 px bovenuit. * * Op een telefoon is absoluut positioneren hier het probleem, niet de * maatvoering: laat het blok gewoon meelopen in de sectie, met de foto * als achtergrond erachter. Dan bepaalt de inhoud de hoogte in plaats van * andersom, en klopt het in elke taal. */ #dc-root .dc-area { height: auto !important; min-height: 0 !important; display: flex !important; align-items: flex-end !important; } /* De foto en het verloop blijven het vlak vullen. */ #dc-root .dc-area > div:first-child, #dc-root .dc-area > div:nth-child(2) { position: absolute !important; inset: 0 !important; } /* Het tekstblok loopt mee en houdt dezelfde marges als de rest. */ #dc-root .dc-area > [style*="bottom: 72px"] { position: relative !important; left: auto !important; right: auto !important; bottom: auto !important; width: 100% !important; padding: 96px 20px 28px !important; } /* De drie plaatsen onder elkaar, met wat minder lucht ertussen. */ #dc-root .dc-area [style*="grid-template-columns"] { gap: 18px !important; margin-top: 24px !important; } /* * De foto op een domek-kaart. * * In het ontwerp is dat een vast vlak van 260 px. Op een telefoon staat de * kaart over de volle breedte en groeit de tekst eronder mee met de taal: * dezelfde kaart is 520 px in het Pools en het Engels en 543 in het * Nederlands. De foto blijft dan even hoog terwijl de kaart uitrekt, dus * de verhouding tussen beeld en tekst verschuift per taal. * * Met aspect-ratio volgt de foto de breedte van de kaart en houdt hij * overal dezelfde vorm: 3:2, de verhouding waarin de meeste foto's ook * genomen zijn (1024 x 660). object-fit: cover staat al op de foto zelf, * dus het vlak blijft gevuld en de uitsnede netjes. */ #dc-root .dc-cabins article > div:first-child { height: auto !important; aspect-ratio: 3 / 2; } /* --- de voet --- */ /* * De vaste balk onderaan was 97 px hoog en brak over twee rijen: merknaam * met datums op de ene, prijs met knop op de andere. Op een telefoon hoeft * daar maar één ding te staan — de prijs en de knop — want de merknaam * staat al bovenaan en de datums staan in het formulier zelf. */ #dc-root [style*="position: fixed"][style*="bottom: 0"] { flex-wrap: nowrap !important; padding: 8px 12px !important; gap: 10px !important; } /* De merknaam en de datumsamenvatting: allebei weg. */ #dc-root [style*="position: fixed"][style*="bottom: 0"] > div:first-child { display: none !important; } /* De rechterhelft neemt de hele breedte over. */ #dc-root [style*="position: fixed"][style*="bottom: 0"] > div:last-child { flex: 1 1 auto !important; justify-content: space-between !important; gap: 12px !important; } /* De knop hoeft niet de halve breedte, maar wel een fatsoenlijk tikdoel. */ #dc-root [style*="position: fixed"][style*="bottom: 0"] button { flex: 0 0 auto !important; padding: 10px 16px !important; white-space: nowrap !important; } /* Geen eigen waarde meer: de gemeten hoogte hierboven geldt ook hier. Een vaste 96 px overschreef die juist op de telefoon, en dan klopt het niet zodra de zwevende knop hoger staat (88 px vanaf de rand in plaats van 24) of de balk twee regels wordt. */ /* * De zwevende reserveerknop is overbodig zodra de balk onderaan staat: die * heeft zijn eigen knop. dc-runtime.js verbergt hem al; hier houden we * alleen de afstand goed zolang hij er wel is. * * 88 px hield ruimte vrij voor die balk. Staat hij er niet — en dat is op * deze pagina zo — dan zweefde de knop onnodig hoog en kwam hij precies * over de laatste regel te liggen. Alleen wegblijven van de balk als die * er werkelijk is; anders dezelfde 24 px als op een breed scherm. */ .dc-book-now { bottom: 24px !important; } #dc-root:has(.dc-stickybar) ~ * .dc-book-now, body:has(.dc-stickybar) .dc-book-now { bottom: 88px !important; } } /* ---------- de film in de hero ---------- */ /* * De rondleiding vult de hele kop. Hij is staand gefilmd (478x850) en de kop * is op een breed scherm liggend, dus object-fit: cover laat de middenstrook * zien. Dat is precies waar het onderwerp zit: het logo staat gecentreerd en * de camera houdt het huisje in het midden. */ .dc-hero-film-video { width: 100%; height: 100%; object-fit: cover; /* Iets boven het midden: daar zit het huisje, en het logo blijft vrij van de datumbalk die over de onderkant van de kop valt. */ object-position: center 42%; } /* * Op een telefoon is de kop zelf hoog en smal — dan past het staande beeld * vrijwel zonder bijsnijden, en zie je de rondleiding zoals hij gefilmd is. */ @media (max-width: 760px) { .dc-hero-film-video { object-position: center center; } /* De kop vult de rest van het scherm: alles onder de balken erboven. Zo zie je de staande rondleiding zo groot als hij kan, zonder dat je eerst moet scrollen om hem heel te zien. De hoogte zelf staat niet meer hier maar op één plek verderop, bij de boekkaart: die kaart valt over de onderkant van de film en bepaalt dus hoeveel de kop inlevert. Drie regels zetten hier alle drie met !important de hoogte; alleen de laatste won, de andere twee stonden er als ruis bij. Daar staat ook waarom het svh is en geen vh of dvh. */ #dc-root .dc-hero, .dc-hero { /* Niet zo plat worden dat er niets meer van de film te zien is. Geen bovengrens: die knipte op een grote telefoon juist een strook van de kop af, en dat is precies wat we hier wilden oplossen. Een liggende telefoon vangen we hieronder apart op. */ min-height: 420px !important; } /* * De donkere sluier over de film loopt in het ontwerp van links naar * rechts (100deg): op een breed scherm staat de tekst in de linkerhelft en * blijft de rechterkant van het beeld open. * * Op een telefoon loopt de tekst over de volle breedte. Gemeten op 390 px * staat het begin van een regel op 83% dekking en het einde op 28% — daar * ligt witte tekst zo goed als op het kale beeld, en bij een licht * interieur is dat niet meer te lezen. * * Hier dus van boven naar beneden, zodat elke regel over zijn hele lengte * dezelfde bescherming heeft. Onderin mag het beeld weer open: daar staat * geen tekst. */ #dc-root .dc-hero > div[style*="linear-gradient"] { background: linear-gradient( 180deg, rgba(20, 28, 26, .82) 0%, rgba(20, 28, 26, .72) 46%, rgba(20, 28, 26, .42) 72%, rgba(20, 28, 26, .22) 100% ) !important; } } /* * Telefoon in de lengte gedraaid. Het scherm is dan laag en breed, en de * staande film wordt tot een streep. Beter een kop met een vaste, redelijke * hoogte waar je doorheen scrolt dan een strook van 200 px. */ @media (max-width: 900px) and (orientation: landscape) { #dc-root .dc-hero, .dc-hero { height: 460px !important; min-height: 0 !important; } } /* * Wie beweging liever niet ziet, krijgt het eerste beeld als stilstaande foto. */ @media (prefers-reduced-motion: reduce) { .dc-hero-film-video { display: none; } .dc-hero-film { background-image: var(--dc-hero-film-poster); background-size: cover; background-position: center 42%; } } /* ========================================================================== De kop van de pagina: film over de volle breedte, navigatie eroverheen ========================================================================== Het ontwerp had een balk met een rand, daaronder een kop die 40 px van de rand af stond. Drie horizontale lijnen (rand van de balk, bovenkant van de kop, onderkant van de kop) voordat je iets van het huisje ziet. Nu loopt de film tot tegen de bovenrand en staat de navigatie eroverheen. Dat scheelt die lijnen, geeft de film de volle hoogte, en zet de aandacht op het beeld in plaats van op de omlijsting. De sluier onder de navigatie zorgt dat de menu-items leesbaar blijven, ook als de film daar toevallig licht is. Zonder die sluier hangt de leesbaarheid af van welk frame er speelt, en dat is geen ontwerp maar een gok. */ @media (min-width: 761px) { /* De balk en de navigatie zweven over de film. */ #dc-root .dc-topbar { position: relative; z-index: 20; background: transparent; border: none; } #dc-root .dc-header { position: sticky; top: 0; z-index: 50; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: calc(max(40px, (100vw - 1440px) / 2 + 40px)) !important; padding-right: calc(max(40px, (100vw - 1440px) / 2 + 40px)) !important; box-sizing: border-box; background: transparent; border: none; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; } /* De film begint bovenaan en loopt door tot onder de navigatie. De pagina zit in een doos van maximaal 1440 px; op een breder scherm blijft er links en rechts papier over. Met de breedte van het scherm en een marge van precies de helft van het verschil komt de film wél tot aan de rand, zonder dat de rest van de pagina verschuift. */ #dc-root .dc-hero { width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; /* De hoogte van balk + navigatie erbij, zodat het beeld even hoog blijft als eerst maar nu ónder de navigatie doorloopt. */ margin-top: calc(-1 * var(--dc-kop-hoogte, 134px)) !important; /* 760 en niet 640: met de oude hoogte hield de tekst maar 7 px over tot de boekkaart eronder, in drie van de vier talen. Dat leest als een kaart die dwars door de tekst loopt, en één regel extra — een langere kop, een grotere letterinstelling — en het botst echt. */ height: calc(760px + var(--dc-kop-hoogte, 134px)) !important; } /* De inhoud van de kop begint onder de navigatie, niet eronder verstopt. De kop loopt nu van rand tot rand, maar de rest van de pagina staat in een doos van 1440 px. De tekst stond op 56 px van de rand van het scherm en dus op een breed scherm honderden pixels links van het logo erboven. Nu meeschuiven met dezelfde doos, plus de 56 px uit het ontwerp. */ #dc-root .dc-hero > div[style*="left: 56px"] { top: calc(84px + var(--dc-kop-hoogte, 134px)) !important; left: calc(max(0px, (100vw - 1440px) / 2) + 56px) !important; } /* * De sluier over de film, opnieuw afgesteld op de nieuwe opname. * * Het ontwerp ging uit van een donkere buitenopname. De nieuwe film is * lichter en wisselt sterk: gemeten over alle 23 seconden ligt de * helderheid achter de tekst tussen 91 en 151 (op 255). Op de lichtste * beelden haalt witte tekst dan 2,66:1 — daar leest hij dus niet, en dat * wisselt terwijl de film speelt. * * Met 45% dekking over het gebied waar de tekst staat wordt dat 5,9:1, ook * op het lichtste frame. Rechts blijft het beeld open. */ #dc-root .dc-hero > div[style*="linear-gradient(100deg"] { background: linear-gradient( 100deg, rgba(20, 28, 26, .88) 0%, rgba(20, 28, 26, .78) 38%, rgba(20, 28, 26, .45) 62%, rgba(20, 28, 26, .12) 88%, rgba(20, 28, 26, .06) 100% ) !important; } /* Sluier onder de navigatie: bovenaan het donkerst, snel weg naar beneden. Alleen daar waar de menu-items staan, niet over het hele beeld. */ #dc-root .dc-hero::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--dc-kop-hoogte, 134px) + 40px); background: linear-gradient(180deg, rgba(20, 28, 26, .55) 0%, rgba(20, 28, 26, .28) 55%, rgba(20, 28, 26, 0) 100%); z-index: 2; pointer-events: none; } /* Wit op de film in plaats van donker op papier. */ #dc-root .dc-topbar, #dc-root .dc-topbar a, #dc-root .dc-topbar span, #dc-root .dc-header a, #dc-root .dc-header > div:first-child { color: var(--c-on-dark, #f7f4ee) !important; } #dc-root .dc-header a:hover { color: #ffffff !important; } /* De taal- en themaknop staan nu ook op beeld. */ #dc-root .dc-lang-btn, #dc-root .dc-theme { color: var(--c-on-dark, #f7f4ee) !important; } #dc-root .dc-theme:hover, #dc-root .dc-lang-btn:hover { background: rgba(255, 255, 255, .16) !important; } /* Ook op desktop wordt de zwevende kop na het eerste scrollgebaar papier. */ html.dc-scrolled #dc-root .dc-topbar, html.dc-scrolled #dc-root .dc-header { background: var(--c-paper, #faf8f4) !important; } html.dc-scrolled #dc-root .dc-header { box-shadow: 0 8px 28px rgba(27, 35, 32, .08); } html.dc-scrolled #dc-root .dc-topbar, html.dc-scrolled #dc-root .dc-topbar a, html.dc-scrolled #dc-root .dc-topbar span, html.dc-scrolled #dc-root .dc-header a, html.dc-scrolled #dc-root .dc-header > div:first-child, html.dc-scrolled #dc-root .dc-lang-btn, html.dc-scrolled #dc-root .dc-theme { color: var(--c-ink, #1b2320) !important; } } /* * De reserveerknop in de navigatie. * * In het ontwerp is hij bijna zwart (#1b2320). Op papier viel dat op, maar op * de film staat donker op donker: de knop verdween in het beeld terwijl dat * juist de stap is die de bezoeker moet zien. * * Nu in het teal van de site, met een schaduw die hem van het beeld tilt. * Eén knop in een opvallende kleur, de rest van de navigatie in wit: dan is * er geen twijfel over wat de bedoelde volgende stap is. */ @media (min-width: 761px) { #dc-root .dc-header > button { background: var(--c-accent, #3c6b78) !important; color: #ffffff !important; box-shadow: 0 6px 20px rgba(20, 28, 26, .28); transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease; } #dc-root .dc-header > button:hover { background: var(--c-accent-dark, #2d5560) !important; transform: translateY(-1px); box-shadow: 0 10px 26px rgba(20, 28, 26, .34); } } @media (prefers-reduced-motion: reduce) { #dc-root .dc-header > button { transition: none; } #dc-root .dc-header > button:hover { transform: none; } } /* ========================================================================== Telefoon: dezelfde kop als op een breed scherm ========================================================================== De balk was hier ondoorzichtig, met een haarlijn eronder. Dat leest prima, maar het is een andere pagina dan op de desktop: daar loopt de film tot achter de navigatie door. Hier hetzelfde, met één verschil. De balk blijft op een telefoon staan tijdens het scrollen (position: sticky), en zodra hij van de film af is staat hij op papier. Doorzichtig blijven zou betekenen dat de menunaam over de tekst van de pagina valt. Daarom: doorzichtig zolang de kop in beeld is, daarna weer gewoon papier. dc-runtime.js zet daarvoor de klasse dc-kop-voorbij (zie volgKopBalk). */ @media (max-width: 760px) { /* Doorzichtig over de film. */ #dc-root header { background: transparent !important; border-bottom: none !important; transition: background-color .25s ease, border-color .25s ease; } /* De film begint bovenaan en loopt tot achter de balk door. Alleen de negatieve marge; de hoogte staat verderop op één plek. Hier stond ook height: 100dvh, en die won het van de regel erboven: de kop werd een volle schermhoogte plus de 56 px die de marge omhoog trok. */ #dc-root .dc-hero { margin-top: calc(-1 * var(--dc-kop-hoogte, 56px)) !important; } /* De inhoud zakt mee, zodat hij niet achter de balk begint. */ #dc-root .dc-hero > div[style*="left: 56px"] { padding-top: var(--dc-kop-hoogte, 56px) !important; } /* Sluier onder de balk: de naam en de knoppen moeten leesbaar blijven, ook als de film daar licht is. */ #dc-root .dc-hero::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--dc-kop-hoogte, 56px) + 32px); background: linear-gradient(180deg, rgba(20, 28, 26, .5) 0%, rgba(20, 28, 26, .22) 60%, rgba(20, 28, 26, 0) 100%); z-index: 2; pointer-events: none; } /* Wit op de film. De taal- en themaknop zitten in .dc-taalrij-in-balk, en de regel die ze opmaakt zet daar met !important de inkt op. Die selector is specifieker dan een korte, dus die moet hier woordelijk aangehouden worden — anders blijven de knoppen donker op een donkere film. */ #dc-root header > div:first-child, #dc-root header .dc-taalrij-in-balk .dc-lang-btn, #dc-root header .dc-taalrij-in-balk .dc-theme, #dc-root header > .dc-menu-toggle, #dc-root .dc-menu-toggle { color: var(--c-on-dark, #f7f4ee) !important; } /* De streepjes van het hamburgermenu zijn getekend met currentColor, dus die volgen de regel hierboven vanzelf. */ /* * Voorbij de kop: weer papier. * * Zonder dit zou de balk over de tekst van de pagina zweven en zou witte * tekst op wit papier onzichtbaar zijn. */ #dc-root header.dc-kop-voorbij { background: var(--c-paper, #faf8f4) !important; border-bottom: 1px solid var(--c-line, #e6e1d7) !important; box-shadow: 0 8px 28px rgba(27, 35, 32, .07); } #dc-root header.dc-kop-voorbij > div:first-child, #dc-root header.dc-kop-voorbij .dc-taalrij-in-balk .dc-lang-btn, #dc-root header.dc-kop-voorbij .dc-taalrij-in-balk .dc-theme, #dc-root header.dc-kop-voorbij > .dc-menu-toggle { color: var(--c-ink, #1b2320) !important; } } /* ---------- primaire CTA-kleur ---------- */ .dc-offseason { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(340px, .8fr); gap: clamp(36px, 7vw, 96px); padding: clamp(42px, 6vw, 78px); background: var(--c-panel, #f4f1ea); } .dc-offseason-main { max-width: 680px; } .dc-offseason-price { display: inline-block; margin: 26px 0 0; padding: 11px 16px; color: var(--c-accent-dark, #2d5560); border-left: 3px solid var(--c-accent, #3c6b78); background: color-mix(in srgb, var(--c-accent, #3c6b78) 9%, transparent); font-size: 15px; font-weight: 600; line-height: 1.5; } .dc-offseason-remote { align-self: end; padding: 32px; background: var(--c-card, #fffdf9); border-left: 3px solid var(--c-accent, #3c6b78); } .dc-offseason-button { display: inline-flex; margin-top: 26px; padding: 14px 20px; color: #fff !important; background: var(--c-accent, #3c6b78); font-size: 11px; letter-spacing: .1em; line-height: 1.75; text-transform: uppercase; } @media (max-width: 760px) { .dc-offseason { grid-template-columns: 1fr; padding: 38px 20px; } .dc-offseason-remote { padding: 26px 22px; } } #dc-root .dc-header > button:not(.dc-menu-toggle), #dc-root .dc-datebar button, #dc-root .dc-cabin-action button, #dc-root .dc-stickybar button, #dc-root .dc-cta button, .dc-book-now { background: var(--c-accent, #3c6b78) !important; color: #fff !important; } #dc-root .dc-header > button:not(.dc-menu-toggle):hover, #dc-root .dc-datebar button:hover, #dc-root .dc-cabin-action button:hover, #dc-root .dc-stickybar button:hover, #dc-root .dc-cta button:hover, .dc-book-now:hover { background: var(--c-accent-dark, #2d5560) !important; } [data-theme="dark"] #dc-root .dc-header > button:not(.dc-menu-toggle), [data-theme="dark"] #dc-root .dc-datebar button, [data-theme="dark"] #dc-root .dc-cabin-action button, [data-theme="dark"] #dc-root .dc-stickybar button, [data-theme="dark"] #dc-root .dc-cta button, [data-theme="dark"] .dc-book-now { background: var(--c-accent, #6fa8b6) !important; color: #10282e !important; } @media (max-width: 760px) and (prefers-reduced-motion: reduce) { #dc-root header { transition: none; } } /* ========================================================================== De boekkaart en de kerngegevens in de kop ========================================================================== Het ontwerp zette de datumbalk 72 px over de kop heen en de vier kerngegevens daar los onder, met 64 px lucht ertussen. Drie losse blokken dus, waarvan het middelste — de stap die de bezoeker moet zetten — het minst opviel. Ze horen bij elkaar: kiezen wanneer je komt en zien wat je krijgt is één gedachte. Daarom staan ze nu als één kaart over de onderkant van de film, zoals in de referentie: beeld erboven, een lichte kaart die eroverheen valt, en daarin de keuze en de knop. Verder niets extra's: dezelfde inkt, dezelfde lijnen, dezelfde letterfamilies. Alleen de plaatsing verandert. */ @media (min-width: 761px) { /* Op een breed scherm is dit een volwaardige reserveringskaart, niet een smalle strook die grotendeels in de hero verdwijnt. Meer binnenruimte en een bescheiden overlap geven de tekst en hoofdactie voldoende gewicht. */ #dc-root .dc-datebar { margin: -56px 72px 0 !important; min-height: 132px; padding: 34px 40px !important; gap: 44px !important; margin-bottom: 0 !important; border-radius: 3px !important; box-shadow: 0 30px 70px rgba(27, 35, 32, .20) !important; } #dc-root .dc-booking-invite > div > span { font-size: 12px !important; } #dc-root .dc-booking-invite > div > p { margin-top: 10px !important; max-width: 780px !important; font-size: 16px !important; line-height: 1.65 !important; } #dc-root .dc-booking-invite > button { min-height: 52px; padding: 17px 34px !important; font-size: 13px !important; } /* De kerngegevens staan er los onder, met lucht ertussen. Ze zaten eerst aan de boekkaart vast als één blok. Dat maakte er een zwaar element van dat over de film hing, terwijl het twee verschillende dingen zijn: kiezen wanneer je komt, en zien wat het park biedt. Los van elkaar ademt het en leest de kaart weer als de kaart. */ #dc-root .dc-facts { margin-top: 56px !important; } /* De knop in de kaart is de bedoelde volgende stap; die mag zwaarder wegen dan de omliggende velden. */ #dc-root .dc-datebar button { box-shadow: 0 4px 14px rgba(60, 107, 120, .34); transition: background-color .18s ease, transform .18s ease; } #dc-root .dc-datebar button:hover { transform: translateY(-1px); } } @media (prefers-reduced-motion: reduce) { #dc-root .dc-datebar button { transition: none; } #dc-root .dc-datebar button:hover { transform: none; } } /* ========================================================================== De boekkaart op een telefoon ========================================================================== De vier kerngegevens vervallen hier. Ze staan onder elkaar en kosten dan vier volle regels, terwijl "5 + 1 personen" en "950 m tot de strandopgang" verderop in de tekst en bij de huisjes ook staan. Wat overblijft is waar het om gaat: wanneer kom je, met hoeveel, en de knop. De kaart valt over de onderkant van de film, net als in de referentie: het beeld draagt de bovenkant, de kaart de onderkant. */ @media (max-width: 760px) { /* De kerngegevens vervallen; ze herhalen wat er verderop staat. */ #dc-root .dc-facts { display: none !important; } /* De kop laat ruimte voor de kaart. De film vulde het hele scherm, en met de kaart eroverheen viel de knop eronder: 914 px op een scherm van 780. Dan moet de bezoeker scrollen om de stap te vinden waar het om gaat. De kop levert die ruimte nu in, zodat de hele kaart — knop en al — meteen in beeld staat. */ #dc-root .dc-hero { /* De kop levert precies zoveel in als de kaart eronder uitsteekt. --dc-kaart-hoogte wordt door dc-runtime.js gemeten (zie meetKaart); de terugval geldt zolang dat nog niet gebeurd is. Zelf een getal kiezen ging mis: de kaart is niet in elke taal even hoog. */ /* * svh en niet dvh — dit is de regel die de rare scroll veroorzaakte. * * dvh is de ruimte die er op dít moment is. Op een telefoon schuift de * adresbalk tijdens het scrollen weg, en dan wordt dvh groter: gemeten * op een scherm van 390x844 groeide de kop van 694 naar 781 px en de * hele pagina van 10875 naar 10977. Dat gebeurt terwijl de vinger nog * op het glas ligt, dus de inhoud schuift onder je duim vandaan en de * kaart springt mee. Precies één keer per scrollgebaar, en daarna weer * terug zodra de balk terugkomt. * * svh is de kleine variant: de hoogte mét die balk in beeld, en die * verandert niet tijdens het scrollen. De kop is daarmee bij het laden * even hoog als eerst; hij groeit alleen niet meer halverwege. */ height: calc(100svh - 150px) !important; min-height: 340px !important; } /* De kaart over de film. */ #dc-root .dc-datebar { margin: -72px 20px 0 !important; padding: 18px 18px 20px !important; border-radius: 4px !important; box-shadow: 0 20px 50px rgba(27, 35, 32, .26) !important; /* Onder elkaar in plaats van vier kolommen: op 390 px is er geen ruimte voor een raster, en dichtgedrukte velden zijn niet te bedienen. */ display: grid !important; /* minmax(0, 1fr) en niet 1fr: een rasterkolom is standaard minstens zo breed als zijn inhoud, en een datumveld heeft een eigen minimumbreedte. Daardoor werden de twee kolommen samen breder dan de kaart en stak de knop er 14 px buiten. Met minmax(0, …) mag de kolom wél krimpen. */ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 12px 14px !important; align-items: start !important; } /* Ook de velden zelf mogen krimpen; anders duwt de datumkiezer van de browser de kolom alsnog open. */ #dc-root .dc-datebar > label, #dc-root .dc-datebar > div:last-child { min-width: 0 !important; } #dc-root .dc-datebar input, #dc-root .dc-datebar select { max-width: 100% !important; min-width: 0 !important; } /* Aankomst en vertrek naast elkaar, gasten en de knop eronder over de volle breedte: dat leest als één regel per keuze. */ /* De velden compacter: het opschrift dichter op de waarde, en alleen een lijn eronder in plaats van rondom. Zo past de hele kaart binnen het scherm zonder dat er iets krap uitziet. */ #dc-root .dc-datebar > label { padding: 0 0 6px !important; border: none !important; border-bottom: 1px solid var(--c-line, #e6e1d7) !important; gap: 4px !important; } /* Gasten over de volle breedte, onder de twee datums. */ #dc-root .dc-datebar > label:nth-of-type(3) { grid-column: 1 / -1 !important; } /* Het blok met het aantal nachten en de knop: over de volle breedte, zoals de knop in de referentie. */ /* De knop over de volle breedte, zoals in de referentie. Het opschrift "7 nachten" erboven staat op één regel met de knop eronder. */ #dc-root .dc-datebar > div:last-child { grid-column: 1 / -1 !important; padding: 0 !important; align-items: stretch !important; gap: 6px !important; } /* De knop vult zijn vak, niet meer. Met width: 100% plus de binnenmarge van het ontwerp stak hij 14 px buiten de kaart; box-sizing houdt de marge binnen de breedte. */ #dc-root .dc-datebar > div:last-child button { width: 100% !important; box-sizing: border-box !important; padding: 15px 20px !important; box-shadow: 0 4px 14px rgba(60, 107, 120, .3); } } /* Testvariant zonder datum- en gastselectie op de eigen site. */ #dc-root .dc-booking-invite { grid-template-columns: minmax(0, 1fr) auto !important; } @media (max-width: 760px) { #dc-root .dc-booking-invite { grid-template-columns: 1fr !important; gap: 16px !important; } #dc-root .dc-booking-invite > div:last-child, #dc-root .dc-booking-invite > button { grid-column: 1 !important; width: 100% !important; } } /* ========================================================================== Galerij: een redactionele fotowand ========================================================================== */ .dc-gallery-heading { padding-bottom: 20px; border-bottom: 1px solid var(--c-line, #e0dacf); } .dc-gallery-mark { color: var(--c-muted, #6f7671); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; } #dc-root .dc-gallery-filters { gap: 6px !important; margin: -1px 0 28px !important; } #dc-root .dc-gallery-filters button { padding: 11px 16px !important; border-radius: 0 !important; border-width: 1px !important; transition: color .2s ease, background-color .2s ease, transform .2s ease !important; } #dc-root .dc-gallery-filters button:hover { transform: translateY(-2px); } #dc-root .dc-gallery-grid { column-width: auto !important; column-count: 4; column-gap: 12px !important; display: block; } /* -------------------------------------------------------------------------- Twee weergaven zonder gebruikersknop. Vrij gebruikt kolommen voor het metselwerk. Vast gebruikt op desktop een echt raster, zodat ook een korte categorie alle vier de kolommen benut. Vrij: elke foto houdt zijn eigen verhouding. Je ziet de hele foto, maar een liggende naast een staande scheelt bijna een factor twee in hoogte, en de onderranden lopen daardoor nergens gelijk. Gelijk: elke foto krijgt een vaste verhouding per soort — alle liggende dezelfde, alle staande dezelfde. Omdat de kolommen even breed zijn, betekent een vaste verhouding ook een vaste hoogte, dus alle liggende foto's zijn onderling precies even groot en alle staande ook. De foto vult die tegel met object-fit: cover; dat snijdt de randen bij, wat de prijs is voor maten die kloppen. De twee verhoudingen zijn 3:2 en 2:3: elkaars omgekeerde, zodat de twee soorten als hetzelfde formaat gelezen worden — het ene liggend, het andere staand — in plaats van als twee losse maten. -------------------------------------------------------------------------- */ #dc-root .dc-gallery-grid--vast { /* Dezelfde ruimte als de column-gap en de marge onder een tegel; de staande hoogte rekent ermee, dus hij hoort hier één keer te staan. */ --dc-galerij-kier: 12px; --dc-galerij-kolommen: 4; display: grid; grid-template-columns: repeat(var(--dc-galerij-kolommen), minmax(0, 1fr)); grid-auto-flow: dense; grid-auto-rows: calc( (100cqw - (var(--dc-galerij-kolommen) - 1) * var(--dc-galerij-kier)) / var(--dc-galerij-kolommen) * 2 / 3 ); gap: var(--dc-galerij-kier); container-type: inline-size; } /* Liggend gebruikt één rij; staand exact twee rijen met de kier ertussen. */ #dc-root .dc-gallery-grid--vast .dc-gallery-item { aspect-ratio: auto; height: auto; margin: 0 !important; grid-row: span 1; } /* Staand is precies twee liggende foto's boven elkaar, met de kier ertussen meegerekend: 2 x (breedte x 2/3) + kier — oftewel 4/3 breedte plus één kier. Zo staat een staande foto naast twee liggende met alle drie de onderranden op dezelfde lijn. De hoogte komt uit de breedte van een kolom, en die rekenen we uit de breedte van de wand: de kolommen delen wat er overblijft na de kiers ertussen. Twee kortere wegen werken hier niet. Een tweede aspect-ratio kent alleen de breedte, terwijl de kier er als vaste maat los bij op moet. En height in procenten kijkt naar de hoogte van de ouder, die in een kolom-layout per kolom verschilt — dat gaf twee verschillende staande maten op één pagina. */ #dc-root .dc-gallery-grid--vast .dc-gallery-item--staand { height: auto; grid-row: span 2; } /* De foto vult de vaste tegel. Zonder de hoogte los te zetten houdt de regel verderop (height: auto) hem op zijn eigen verhouding en blijft er onderin een streep achtergrond staan. */ #dc-root .dc-gallery-grid--vast .dc-gallery-item img { height: 100% !important; object-fit: cover !important; } #dc-root .dc-gallery-item { position: relative; min-width: 0; margin: 0 0 12px !important; break-inside: avoid; overflow: hidden; background: var(--c-line, #e6e1d7); cursor: zoom-in; } #dc-root .dc-gallery-item:focus-visible { outline: 2px solid var(--c-accent, #3c6b78); outline-offset: 3px; } /* Fullscreen fotoviewer. Hij hangt aan body zodat geen sectie of raster zijn vaste positionering kan afsnijden. */ .dc-gallery-viewer { position: fixed; inset: 0; z-index: 90; display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; /* De pijlen horen tegen de schermrand: dan is de volgende foto met een korte muisbeweging bereikbaar. Vandaar de smalle zijpadding en de tussenruimte die de foto van de knoppen vrijhoudt. */ gap: clamp(12px, 3vw, 40px); padding: 54px 16px; color: var(--c-ink, #eceae4); background: color-mix(in srgb, var(--c-paper, #14191a) 94%, transparent); backdrop-filter: blur(18px); } .dc-gallery-viewer[hidden] { display: none; } html.dc-gallery-open { overflow: hidden; } .dc-gallery-viewer figure { display: grid; grid-template-rows: minmax(0, 1fr) auto; width: 100%; height: min(82vh, 900px); margin: 0; min-width: 0; } .dc-gallery-viewer img { /* Slepen over de foto is een veeg, geen image-drag; en de veeg mag geen tekstselectie starten. touch-action laat verticaal scrollen met rust en geeft ons de horizontale beweging. */ touch-action: pan-y; -webkit-user-drag: none; user-select: none; width: 100%; height: 100%; min-height: 0; object-fit: contain; } .dc-gallery-viewer figcaption { min-height: 18px; padding-top: 14px; color: var(--c-muted, #8d9691); font-size: 11px; letter-spacing: .1em; text-align: center; text-transform: uppercase; } .dc-gallery-viewer button { /* Grid met place-items zet het teken exact in het midden van de cirkel; line-height: 1 haalt de regelruimte weg die het pijltje anders omlaag duwt. */ display: grid; place-items: center; width: 48px; height: 48px; padding: 0; color: var(--c-ink, #eceae4); background: transparent; border: 1px solid var(--c-line, #333d3e); border-radius: 50%; cursor: pointer; font-size: 22px; line-height: 1; } .dc-gallery-prev { justify-self: start; } .dc-gallery-next { justify-self: end; } .dc-gallery-close { position: absolute; top: 22px; right: 24px; z-index: 2; font-size: 28px !important; } .dc-gallery-count { position: absolute; left: 28px; top: 28px; color: var(--c-muted, #8d9691); font-size: 11px; letter-spacing: .18em; } @media (max-width: 760px) { .dc-gallery-viewer { grid-template-columns: 1fr 1fr; align-content: center; gap: 14px; padding: 70px 18px 24px; } .dc-gallery-viewer figure { grid-column: 1 / -1; grid-row: 1; height: 70vh; } .dc-gallery-prev, .dc-gallery-next { grid-row: 2; } .dc-gallery-prev { justify-self: end; } .dc-gallery-next { justify-self: start; } } #dc-root .dc-gallery-item img { width: 100% !important; height: auto !important; object-fit: contain; transition: transform .7s cubic-bezier(.22, 1, .36, 1), filter .35s ease !important; } #dc-root .dc-gallery-item:hover img { transform: scale(1.035); filter: saturate(1.06); } @media (min-width: 761px) and (max-width: 1080px) { /* Smallere kolommen; de verhouding per soort blijft dezelfde, dus de tegels worden alleen kleiner en houden onderling gelijke maten. */ #dc-root .dc-gallery-grid { column-count: 3; } #dc-root .dc-gallery-grid--vast { --dc-galerij-kolommen: 3; } } @media (max-width: 760px) { .dc-gallery-heading { align-items: flex-end !important; } .dc-gallery-mark { max-width: 120px; text-align: right; line-height: 1.5; } #dc-root .dc-gallery-filters { flex-wrap: nowrap !important; overflow-x: auto; margin-right: -20px !important; padding-right: 20px; scrollbar-width: none; } #dc-root .dc-gallery-filters::-webkit-scrollbar { display: none; } #dc-root .dc-gallery-filters button { flex: 0 0 auto; } /* De column-gap staat hier met !important omdat de brede weergave hem ook zo zet; zonder dat wint die 12 px. De waarde is 8 px en niet 0: in een grid betekent column-gap de ruimte tussen de kolommen, terwijl hij in de kolom-layout hierboven de ruimte tussen de stroken is. Op 0 stonden de twee kolommen tegen elkaar aan en gold de 8 px alleen verticaal. */ #dc-root .dc-gallery-grid { column-width: auto !important; column-gap: 8px !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 132px; gap: 8px; } #dc-root .dc-gallery-item, #dc-root .dc-gallery-item:nth-child(n) { grid-column: span 1; grid-row: span 2; margin: 0 !important; } #dc-root .dc-gallery-item img { height: 100% !important; object-fit: cover; } /* Alleen in de vrije weergave krijgt elke vijfde foto de volle breedte; dat ritme is juist wat het vaste raster niet moet hebben. */ #dc-root .dc-gallery-grid--metselwerk .dc-gallery-item:nth-child(5n + 1) { grid-column: 1 / -1; grid-row: span 3; } /* Op de telefoon is de galerij al een echt raster met een vaste rijhoogte, dus daar doen de rijen het werk dat op een breed scherm de verhouding doet. Dat komt precies uit: een liggende tegel is één rij, een staande twee, en grid telt de gap tussen die twee rijen er vanzelf bij op. Een staande foto is daarmee exact twee liggende plus de ruimte ertussen. De hoogte en aspect-ratio van de brede weergave moeten hier wel wijken: die zouden met de vaste rijhoogte vechten en de tegels uit het raster laten lopen. */ #dc-root .dc-gallery-grid--vast .dc-gallery-item, #dc-root .dc-gallery-grid--vast .dc-gallery-item--staand { aspect-ratio: auto; height: auto; } #dc-root .dc-gallery-grid--vast .dc-gallery-item { grid-row: span 1; } #dc-root .dc-gallery-grid--vast .dc-gallery-item--staand { grid-row: span 2; } #dc-root .dc-gallery-more { margin-top: 24px !important; } } /* De lijntekeningen bij de kerngegevens. Rustig grijs zoals de regel eronder, zodat het getal het zwaarste blijft wegen. */ .dc-fact-icoon { display: block; margin-bottom: 10px; color: var(--c-icon, var(--c-accent, #3c6b78)); opacity: .75; } .dc-fact-icoon svg { display: block; } /* Alle lijniconen erven hun kleur. Zo wisselen ook dynamisch ingevoegde SVG's direct mee met het thema en blijft geen vaste lichte of donkere stroke over. */ #dc-root .dc-fact-icoon svg, #dc-root .dc-theme svg, #dc-root svg.dc-icon { stroke: currentColor; fill: none; } @media (max-width: 760px) { /* Op een telefoon staan de vier onder elkaar; dan mag het icoon naast de tekst in plaats van erboven, dat scheelt vier regels hoogte. */ #dc-root .dc-facts > div { display: grid !important; grid-template-columns: auto 1fr !important; column-gap: 14px !important; align-items: center !important; } .dc-fact-icoon { grid-row: 1 / 3; margin-bottom: 0; } } /* De kernpunten bij "dla dzieci" krijgen dezelfde lijntekeningen als de kerngegevens; dc-runtime.js voegt ze in. Hier staat het icoon naast de tekst in plaats van erboven: het zijn korte regels, geen getallen. */ .dc-kids-punt { display: flex !important; align-items: center; gap: 12px; } .dc-kids-icoon { flex: 0 0 auto; display: block; color: var(--c-icon, var(--c-accent, #3c6b78)); opacity: .75; } .dc-kids-icoon svg { display: block; } #dc-root .dc-kids-icoon svg { stroke: currentColor; fill: none; } /* ---------- huisjes: redactionele accommodatieblokken ---------- */ .dc-cabins-list { display: grid; gap: 64px; } .dc-cabin-card { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .75fr); min-height: 590px; background: var(--c-paper, #fffdf9); border: 1px solid var(--c-line, #e6e1d7); } .dc-cabin-card:nth-child(even) { grid-template-columns: minmax(300px, .75fr) minmax(0, 1.55fr); } .dc-cabin-card:nth-child(even) .dc-cabin-media { order: 2; } .dc-cabin-media { display: grid; grid-template-rows: minmax(0, 1fr) 150px; min-width: 0; background: var(--c-ink, #1b2320); overflow: hidden; } .dc-cabin-media:not(:has(.dc-cabin-thumbs)) { grid-template-rows: 1fr; } .dc-cabin-lead, .dc-cabin-thumb { position: relative; min-height: 0; overflow: hidden; } .dc-cabin-thumbs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(145px, 1fr); gap: 2px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; border-top: 2px solid var(--c-paper, #fffdf9); } .dc-cabin-thumbs::-webkit-scrollbar { display: none; } .dc-cabin-copy { display: flex; flex-direction: column; gap: 20px; padding: clamp(34px, 4vw, 64px); } .dc-cabin-number { width: fit-content; padding-bottom: 10px; border-bottom: 1px solid var(--c-accent, #3c6b78); color: var(--c-muted, #6f7671); font-size: 11px; letter-spacing: .2em; } #dc-root .dc-cabin-copy h3 { font-size: clamp(34px, 3vw, 46px) !important; line-height: 1.02 !important; } #dc-root .dc-cabin-copy > p { font-size: 16px !important; line-height: 1.75 !important; } .dc-cabin-tags span { padding: 7px 0; margin-right: 13px; color: var(--c-muted, #6f7671); border-bottom: 1px solid var(--c-line, #e0dacf); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; } .dc-cabin-action { display: flex; align-items: flex-start; flex-direction: column; justify-content: space-between; gap: 18px; padding-top: 22px; margin-top: auto; } #dc-root .dc-cabin-action button { width: 100%; } @media (max-width: 900px) { .dc-cabin-card, .dc-cabin-card:nth-child(even) { grid-template-columns: 1fr; min-height: 0; } .dc-cabin-card:nth-child(even) .dc-cabin-media { order: 0; } .dc-cabin-media { min-height: 520px; } } @media (max-width: 760px) { .dc-cabins-heading { display: block !important; margin-bottom: 24px !important; } .dc-cabins-heading > div { margin-top: 12px; } .dc-cabins-list { gap: 28px; } .dc-cabin-media { min-height: 0; grid-template-rows: minmax(300px, 72vw) 96px; } .dc-cabin-media:not(:has(.dc-cabin-thumbs)) { min-height: 72vw; } .dc-cabin-thumbs { grid-auto-columns: 112px; } .dc-cabin-copy { padding: 28px 22px 24px; gap: 16px; } .dc-cabin-action { align-items: flex-start; margin-top: 8px; } .dc-cabin-action button { padding: 12px 14px !important; } } /* De reserveerbalk staat permanent in de DOM, zodat scrollen de spelende hero-video niet opnieuw hoeft op te bouwen. Alleen de zichtbaarheid wisselt. */ .dc-stickybar { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(100%); transition: opacity .28s ease, transform .38s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .38s; } .dc-sticky-detail { color: var(--c-muted, #6f7671); font-size: 12px; letter-spacing: .04em; white-space: nowrap; } html.dc-scrolled .dc-stickybar { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition-delay: 0s; } @media (max-width: 760px) { .dc-sticky-detail { max-width: 180px; font-size: 11px; line-height: 1.3; letter-spacing: 0; white-space: normal; } html.dc-booking-visible .dc-stickybar { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(100%); } } /* ---------- fietsroutes op mobiel ---------- */ @media (max-width: 760px) { #dc-root .dc-routes { display: block !important; margin-left: 0 !important; margin-right: 0 !important; overflow: hidden; } .dc-routes-intro { padding: 0 20px; } .dc-routes-track { /* Waar het fietspad onderaan ophoudt -- stippellijn en fietsje allebei. De rit is klaar als de onderkant van de sectie op 80% van het scherm staat (zie dc-motion.js), dus ruim boven de vaste reserveerbalk; het fietsje mag zijn pad daarom gewoon afmaken. */ --dc-pad-onder: 38px; position: relative; display: grid; grid-template-columns: 1fr; gap: 14px; overflow: visible; padding: 42px 20px 24px 46px; } .dc-routes-track::-webkit-scrollbar { display: none; } .dc-routes-track::before { content: ''; position: absolute; top: 54px; bottom: var(--dc-pad-onder, 38px); left: 23px; width: 2px; border-radius: 2px; background: repeating-linear-gradient(180deg, var(--c-accent, #3c6b78) 0 8px, transparent 8px 15px); /* De stippels schuiven mee met het fietsje: het pad lijkt onder de banden door te lopen in plaats van stil te staan. Eén periode is 15px, dus een verschuiving van een veelvoud daarvan valt naadloos in zichzelf terug. */ background-position: 0 calc(var(--dc-fiets, 0) * -60px); transition: background-position .45s cubic-bezier(.22, .61, .36, 1); opacity: .55; } /* Het fietsje rijdt over de stippellijn mee met het scrollen. Het staat op dezelfde as als de stippellijn (left: 23px) en wordt door dc-motion.js verplaatst met --dc-fiets: van 0 (boven) tot 1 (onder). */ /* Geen schijfje eromheen: het fietsje rijdt naast de lijn, en het stuk dat het gehad heeft is geen stippellijn meer maar een doorlopend spoor. Zo hoeft er niets bedekt te worden om leesbaar te blijven. */ .dc-routes-spoor { position: absolute; top: 54px; left: 23px; z-index: 1; width: 2px; border-radius: 2px; background: var(--c-accent, #3c6b78); height: calc(var(--dc-fiets-lengte, 0px) * var(--dc-fiets, 0)); transition: height .45s cubic-bezier(.22, .61, .36, 1); will-change: height; } .dc-routes-fiets { position: absolute; top: 54px; left: 23px; z-index: 2; /* De wielas ligt in de viewBox op y=12.5 van 18, dus onder het midden van het blok. Na de kwartslag wordt dat een afwijking naar links: het blok centreren op de lijn zet de fiets er dan naast. Vandaar de correctie van (12.5/18 - 0.5) * 16px ~ 3px naar rechts, zodat de wielen zelf op de lijn staan en niet het midden van het blok. */ margin: -8px 0 0 -7.5px; display: block; transform: translateY(calc(var(--dc-fiets-lengte, 0px) * var(--dc-fiets, 0))); /* Zonder GSAP zet de scroll-listener --dc-fiets in sprongetjes; deze overgang maakt daar toch een doorlopende rit van. Met GSAP is de scrub al vloeiend en valt de overgang binnen één frame weg. */ transition: transform .45s cubic-bezier(.22, .61, .36, 1); will-change: transform; } @media (prefers-reduced-motion: reduce) { .dc-routes-fiets, .dc-routes-spoor { transition: none; } .dc-routes-track::before { transition: none; } } .dc-routes-fiets svg { /* 26:18, gelijk aan de viewBox — anders rekt de fiets uit. */ width: 23px; height: 16px; display: block; color: var(--c-accent, #3c6b78); /* Een kwartslag: het pad loopt verticaal, dus de fiets moet met zijn neus naar beneden staan in plaats van dwars op de lijn. */ transform: rotate(90deg); /* Het papier is licht en het accent donker; een klein beetje lucht om de lijnen houdt het fietsje leesbaar waar het een kaartrand kruist. */ filter: drop-shadow(0 0 2px var(--c-paper, #faf8f4)) drop-shadow(0 0 2px var(--c-paper, #faf8f4)); } /* Nauwelijks zichtbare wiebel: genoeg om te leven, niet genoeg om af te leiden van het rijden zelf. */ @media (prefers-reduced-motion: no-preference) { .dc-routes-fiets svg { animation: dcFietsWiebel 2.6s ease-in-out infinite; } } @keyframes dcFietsWiebel { 0%, 100% { transform: rotate(88deg); } 50% { transform: rotate(92deg); } } #dc-root .dc-route-card { position: relative; display: flex !important; flex-direction: column; align-items: flex-start !important; gap: 0 !important; min-height: 250px; padding: 28px 26px !important; overflow: hidden; background: var(--c-paper, #fffdf9); border: 1px solid var(--c-line, #e6e1d7) !important; box-shadow: 0 18px 48px rgba(27, 35, 32, .08); transform-origin: center bottom; } #dc-root .dc-route-card::before { content: ''; position: absolute; left: -31px; top: 39px; width: 10px; height: 10px; border: 3px solid var(--c-paper, #faf8f4); border-radius: 50%; background: var(--c-accent, #3c6b78); box-shadow: 0 0 0 1px var(--c-accent, #3c6b78); } .dc-route-card::after { content: '↗'; position: absolute; right: 18px; bottom: 8px; color: var(--c-accent, #3c6b78); font-family: "Cormorant Garamond", Georgia, serif; font-size: 86px; font-weight: 300; line-height: 1; opacity: .1; transform: rotate(-8deg); } .dc-route-no { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 36px; color: var(--c-paper, #faf8f4) !important; background: var(--c-ink, #1b2320); border-radius: 50%; font-size: 20px !important; transition: background .3s ease, transform .3s ease; } .dc-route-card.is-active .dc-route-no { background: var(--c-accent, #3c6b78); transform: rotate(8deg) scale(1.08); } .dc-route-copy > div:first-child { max-width: 240px; font-family: "Cormorant Garamond", Georgia, serif; font-size: 30px !important; line-height: 1.08; } .dc-route-copy > div:last-child { margin-top: 14px !important; line-height: 1.6; } .dc-route-km { position: absolute; top: 31px; right: 26px; } }