/* ReallyHolidays: de gids (/gids/ en de onderwerppagina's). --------------------------------------------------------------------------- Laadt bovenop style.css, enhance.css en home.css. Alleen wat hier nieuw is staat in dit bestand: de onderwerpkaarten, de horecakaarten, de agenda-tijdlijn, het noodblok, de tweekolomsopmaak van een artikel en de mobiele boekbalk. MOTION Alles onder de 300 ms, ease-out bij binnenkomen, exit sneller dan enter. Transitions in plaats van keyframes, zodat een klik halverwege een animatie netjes terugdraait in plaats van opnieuw te beginnen. Alleen transform en opacity, behalve bij het uitklappen: daar is grid-template-rows de enige manier om naar automatische hoogte te animeren zonder de hoogte te raden. ICONEN Decoratieve accenten zijn emoji, dat is de huisstijl van deze site. Functionele bediening is inline SVG, want die moet overal identiek zijn. Alle SVG's erven currentColor en schalen mee met de tekst. TOEGANKELIJKHEID Raakvlakken minimaal 44 px, tekstcontrast op --hp-ink2 of donkerder, focusringen zichtbaar, hover alleen op apparaten die echt hoveren. */ :root{ --gp-ease:cubic-bezier(.23,1,.32,1); /* sterke ease-out voor binnenkomen */ --gp-ease-io:cubic-bezier(.77,0,.175,1); /* voor beweging op het scherm */ --gp-r:18px; /* standaard hoekstraal */ --gp-schaduw:0 22px 48px -28px rgba(20,60,58,.42); --gp-schaduw-op:0 34px 62px -30px rgba(20,60,58,.55); } .gp-body svg{ width:1em; height:1em; flex:none; display:block; } /* ── Vangnet zonder JavaScript ───────────────────────────────────────────── enhance.css zet .rh-reveal op opacity:0 en laat JavaScript hem zichtbaar maken bij het scrollen. Draait dat script niet, dan is de hele tekst onzichtbaar. Op een marketingpagina valt daarmee te leven, op een gids die gelezen én gecrawld moet worden niet. Het minuscule scriptje in de zet rh-js nog voor de eerste rendering, dus dit geeft geen flikkering. */ html:not(.rh-js) .rh-reveal{ opacity:1 !important; transform:none !important; } html:not(.rh-js) .gd-bedien{ display:none; } /* filter zonder script doet niets */ /* ── Hero-varianten ───────────────────────────────────────────────────────── De hub houdt de gesplitste H1 van de woningpagina's (naam groot in handschrift). Een onderwerppagina heeft geen merknaam maar een zoekwoordzin, dus daar valt het handschrift weg en wordt de zin zelf de kop. */ .gp-hero > picture > img{ height:clamp(340px, 48vh, 500px); } .gp-h1 .zin{ font-size:clamp(30px,5vw,56px); line-height:1.06; max-width:20ch; } .gp-h1{ margin-bottom:4px; } /* ── Leestekst ───────────────────────────────────────────────────────────── De lead is het antwoord op de zoekvraag, los leesbaar van de rest. Dat is het stuk dat in een AI-antwoord terechtkomt, dus het krijgt ook visueel gewicht. */ .gp-lead{ font-size:clamp(17px,2vw,20px); line-height:1.62; color:var(--hp-ink); max-width:66ch; margin:38px 0 0; } .gp-antwoord-lead{ position:relative; padding:26px 28px 26px 30px; margin:34px 0 0; background:linear-gradient(150deg,var(--hp-sand2),#fff 70%); border-radius:var(--gp-r); box-shadow:var(--gp-schaduw); } .gp-antwoord-lead::before{ content:""; position:absolute; left:0; top:16px; bottom:16px; width:4px; border-radius:4px; background:var(--hp-flam); } .gp-h2{ font-family:'Cormorant Garamond',serif; font-weight:500; font-size:clamp(29px,3.8vw,44px); line-height:1.12; margin:0 0 14px; color:var(--hp-ink); } /* ── Artikel: tekst met een feitenkaart ernaast ────────────────────────── */ .gp-kolommen{ display:grid; grid-template-columns:minmax(0,1fr) 316px; gap:44px; align-items:start; margin-top:14px; } .gp-tekst{ min-width:0; } .gp-sec{ padding:40px 0 0; scroll-margin-top:88px; } .gp-sec h2{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:clamp(24px,2.8vw,32px); line-height:1.2; margin:0 0 14px; color:var(--hp-ink); } .gp-sec p{ font-size:16.5px; line-height:1.72; color:var(--hp-ink2); margin:0 0 16px; max-width:68ch; } .gp-sec p:last-child{ margin-bottom:0; } /* Inhoudsopgave. Geen sier: op een pagina van duizend woorden wil je zien wat er komt voor je gaat scrollen. */ .gp-inhoud{ margin-top:34px; padding:20px 24px; border-radius:var(--gp-r); background:var(--hp-sand2); border:1px solid rgba(35,50,47,.07); } .gp-inhoud b{ display:block; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--hp-ink2); margin-bottom:10px; } .gp-inhoud ol{ margin:0; padding-left:20px; display:grid; gap:7px; } .gp-inhoud li{ font-size:14.5px; } .gp-inhoud a{ color:var(--hp-teal-d); font-weight:600; border-bottom:1px solid rgba(20,128,125,.28); } .gp-inhoud a:hover{ border-bottom-color:var(--hp-teal); } .gp-inhoud a.hier{ color:var(--hp-flam-d); border-bottom-color:var(--hp-flam); } /* Toevoeging uit het beheerpaneel die nog niet vertaald is. Eerlijk labelen is beter dan Nederlandse tekst zonder uitleg op een Duitse pagina zetten. */ .gd-taal{ display:inline-block; margin-top:8px !important; padding:2px 8px; border-radius:100px; background:var(--hp-sand2); font-size:10.5px !important; font-weight:800; letter-spacing:.08em; color:var(--hp-ink2) !important; } /* Feitenkaart. Blijft meelopen op desktop, want je scrollt er langs terwijl je de tekst leest en dan wil je die getallen erbij houden. */ .gp-feiten{ position:sticky; top:88px; padding:24px 26px; border-radius:var(--gp-r); background:linear-gradient(160deg,#fff,var(--hp-sand2)); border:1px solid rgba(35,50,47,.08); box-shadow:var(--gp-schaduw); } .gp-feiten h2{ font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:800; color:var(--hp-ink2); margin:0 0 14px; font-family:'Manrope',sans-serif; } .gp-feiten dl{ margin:0; display:grid; gap:13px; } .gp-feiten dl > div{ display:grid; gap:2px; padding-bottom:13px; border-bottom:1px solid rgba(35,50,47,.08); } .gp-feiten dl > div:last-child{ border-bottom:0; padding-bottom:0; } /* Was --hp-muted, dat gaf 3,2:1 en dus onder de AA-grens van 4,5:1 voor kleine tekst. --hp-ink2 haalt 5,5:1 en leest nog steeds als een label. */ .gp-feiten dt{ font-size:12px; font-weight:700; color:var(--hp-ink2); letter-spacing:.02em; } .gp-feiten dd{ margin:0; font-size:14.5px; font-weight:600; line-height:1.45; color:var(--hp-ink); } /* ── Onderwerpkaarten op de hub ─────────────────────────────────────────── */ .ow-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); gap:18px; margin-top:26px; } .ow-card{ position:relative; display:flex; flex-direction:column; overflow:hidden; border-radius:24px; background:#fff; box-shadow:var(--gp-schaduw); transition:transform .24s var(--gp-ease), box-shadow .24s var(--gp-ease); color:var(--hp-ink); } .ow-foto{ display:block; position:relative; height:168px; overflow:hidden; } .ow-foto img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--gp-ease); } .ow-foto::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,32,30,0) 40%,rgba(8,32,30,.42) 100%); } .ow-in{ display:flex; flex-direction:column; gap:7px; padding:20px 22px 22px; flex:1; } .ow-ico{ position:absolute; top:142px; left:20px; z-index:2; width:52px; height:52px; border-radius:16px; display:grid; place-items:center; font-size:24px; background:var(--ow,#14807D); box-shadow:0 14px 26px -12px rgba(0,0,0,.5); border:3px solid #fff; } .ow-in strong{ font-size:19px; font-weight:700; line-height:1.24; margin-top:16px; } .ow-in em{ font-style:normal; font-size:14px; line-height:1.6; color:var(--hp-ink2); flex:1; } .ow-lees{ display:inline-flex; align-items:center; gap:7px; margin-top:6px; font-size:13.5px; font-weight:800; color:var(--ow,#14807D); } .ow-lees svg{ transition:transform .22s var(--gp-ease); } .ow-card:active{ transform:scale(.985); } /* ── Uitklappen: tip, adres en doorverwijzing ────────────────────────────── grid-template-rows van 0fr naar 1fr is de enige manier om naar automatische hoogte te animeren zonder de hoogte vooraf te kennen. Het is één element per kaart, dus de kosten blijven verwaarloosbaar. */ .gd-tip summary{ display:flex; align-items:center; gap:8px; min-height:44px; } .gd-tip summary::after{ content:none; } /* de + uit home.css vervalt */ .gd-tip summary > span:first-child{ flex:1; } .gd-chev{ display:grid; place-items:center; font-size:17px; color:var(--hp-ink2); transition:transform .22s var(--gp-ease); } details[open] > summary .gd-chev{ transform:rotate(180deg); } .gd-tip-in{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .24s var(--gp-ease); } .gd-tip[open] .gd-tip-in{ grid-template-rows:1fr; } .gd-tip-in > *{ overflow:hidden; } .gd-tip-in p{ padding:0 15px 12px; margin:0; font-size:13.4px; line-height:1.62; color:var(--hp-ink2); } /* Reistijd per woning. Staat in het uitklapblok en op de horecakaart, want het badge heeft alleen ruimte voor het bereik en dit is de uitsplitsing. */ .gd-perhuis{ display:flex; align-items:center; gap:8px; margin:0 15px 10px !important; padding:8px 12px; border-radius:10px; background:var(--hp-sand2); font-size:12.4px !important; font-weight:600; line-height:1.5 !important; color:var(--hp-ink2) !important; } .gd-perhuis span{ color:var(--hp-teal); font-size:14px; } .et-card .gd-perhuis{ margin:0 !important; background:#fff; border:1px solid rgba(35,50,47,.1); } .gd-door{ display:inline-flex; align-items:center; gap:7px; margin:0 15px 14px; font-size:13px; font-weight:800; color:var(--hp-teal-d); border-bottom:1px solid rgba(20,128,125,.3); padding-bottom:2px; } /* ── Eten en drinken ─────────────────────────────────────────────────────── Bewust zonder foto. De foto's op hun Facebook zijn niet van ons, en stockbeeld ondermijnt precies de belofte van deze gids. Een ontworpen kaart met de categoriekleur leest als een keuze, een lege fotoplek als een fout. */ .et-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; } .et-card{ position:relative; display:flex; flex-direction:column; gap:12px; padding:22px 24px 20px; border-radius:22px; background:#fff; border:1px solid rgba(35,50,47,.08); box-shadow:var(--gp-schaduw); transition:transform .24s var(--gp-ease), box-shadow .24s var(--gp-ease); overflow:hidden; } .et-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--et,#14807D); } .et-card::after{ content:""; position:absolute; right:-56px; top:-56px; width:150px; height:150px; border-radius:50%; background:var(--et,#14807D); opacity:.07; pointer-events:none; } .et-kop{ display:flex; align-items:flex-start; gap:13px; position:relative; z-index:1; } .et-ico{ width:46px; height:46px; border-radius:14px; display:grid; place-items:center; font-size:22px; background:color-mix(in srgb, var(--et) 14%, #fff); border:1px solid color-mix(in srgb, var(--et) 26%, #fff); } .et-kop h3{ font-size:18px; font-weight:700; margin:0; color:var(--hp-ink); line-height:1.24; } .et-soort{ margin:2px 0 0; font-size:12.5px; font-weight:700; color:var(--et,#14807D); letter-spacing:.02em; } .et-tijd{ margin-left:auto; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; font-size:11.5px; font-weight:800; color:var(--hp-ink2); background:var(--hp-sand2); border-radius:100px; padding:6px 11px; } .et-p{ margin:0; font-size:14.4px; line-height:1.65; color:var(--hp-ink2); position:relative; z-index:1; } .et-tip{ margin:0; padding:12px 14px; border-radius:13px; background:var(--hp-sand2); font-size:13.4px; line-height:1.6; color:var(--hp-ink2); position:relative; z-index:1; } .et-tip b{ color:var(--hp-ink); } .et-adres{ display:flex; align-items:flex-start; gap:8px; font-size:13px; line-height:1.5; color:var(--hp-ink2); position:relative; z-index:1; } .et-adres span{ color:var(--et,#14807D); margin-top:2px; font-size:15px; } .et-acties{ display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; position:relative; z-index:1; } .et-knop{ display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:0 15px; border-radius:100px; font-size:13px; font-weight:700; color:var(--hp-teal-d); background:#fff; border:1.5px solid rgba(20,128,125,.28); transition:transform .16s var(--gp-ease), border-color .16s ease, background .16s ease; } .et-knop svg{ font-size:15px; } .et-knop:active{ transform:scale(.97); } .et-noot{ margin:18px 0 0; font-size:13px; color:var(--hp-ink2); font-style:italic; } /* ── Agenda-tijdlijn ─────────────────────────────────────────────────────── Eén doorlopende lijn met de maand als anker. Wie scrollt, ziet in één blik wanneer het druk is, en dat is precies het argument om op tijd te boeken. */ .ag-lijst{ list-style:none; margin:26px 0 0; padding:0; position:relative; } .ag-lijst::before{ content:""; position:absolute; left:31px; top:12px; bottom:12px; width:2px; background:linear-gradient(180deg,rgba(20,128,125,.28),rgba(225,135,160,.34)); border-radius:2px; } .ag-item{ display:grid; grid-template-columns:64px minmax(0,1fr); gap:20px; padding:0 0 26px; position:relative; } .ag-item:last-child{ padding-bottom:0; } .ag-maand{ display:flex; flex-direction:column; align-items:center; gap:6px; } .ag-ico{ width:48px; height:48px; border-radius:50%; display:grid; place-items:center; font-size:22px; background:#fff; border:2px solid rgba(20,128,125,.22); box-shadow:0 10px 20px -12px rgba(20,60,58,.5); position:relative; z-index:1; } .ag-item.druk .ag-ico{ border-color:var(--hp-flam); } .ag-m{ font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--hp-ink2); } .ag-tekst{ background:#fff; border-radius:var(--gp-r); padding:20px 22px; border:1px solid rgba(35,50,47,.07); box-shadow:var(--gp-schaduw); min-width:0; } .ag-tekst h3{ font-size:18px; font-weight:700; margin:0 0 4px; color:var(--hp-ink); line-height:1.26; } .ag-datum{ margin:0 0 10px; font-size:12.5px; font-weight:700; color:var(--hp-teal-d); } .ag-tekst p{ margin:0 0 10px; font-size:14.4px; line-height:1.66; color:var(--hp-ink2); } .ag-tekst p:last-child{ margin-bottom:0; } .ag-tip{ padding:11px 14px; border-radius:12px; background:var(--hp-sand2); font-size:13.3px !important; line-height:1.6 !important; } .ag-tip b{ color:var(--hp-ink); } .ag-druk{ display:flex; align-items:center; gap:8px; font-size:12.8px !important; font-weight:800; color:#9A2F45 !important; background:rgba(225,135,160,.16); border-radius:100px; padding:8px 14px; width:fit-content; } .ag-druk-ico{ display:grid; place-items:center; font-size:15px; } .ag-meer{ margin:24px 0 0; } .ag-meer .rh-btn-2{ display:inline-flex; align-items:center; gap:9px; } /* ── Noodgevallen ──────────────────────────────────────────────────────── */ .nd-alarm{ display:flex; flex-wrap:wrap; align-items:center; gap:24px; margin:22px 0 26px; padding:26px 28px; border-radius:24px; color:#fff; background:linear-gradient(135deg,#B03A48,#8C2437); box-shadow:0 30px 60px -30px rgba(140,36,55,.7); } .nd-alarm-nr{ display:flex; flex-direction:column; gap:2px; } .nd-alarm-nr span{ font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; opacity:.82; } .nd-alarm-nr a{ font-family:'Cormorant Garamond',serif; font-size:64px; font-weight:700; line-height:1; color:#fff; letter-spacing:.02em; transition:transform .16s var(--gp-ease); } .nd-alarm-nr a:active{ transform:scale(.97); } .nd-alarm-tx{ flex:1; min-width:250px; } .nd-alarm-tx h3{ font-size:19px; font-weight:700; margin:0 0 7px; color:#fff; } /* Deze alinea's staan binnen .gp-sec, en die zet p op --hp-ink2 (grijs). Op het donkerrode vlak gaf dat ongeveer 1,5:1 en dat is onleesbaar. Wit expliciet afdwingen, niet op overerving vertrouwen. Wit op #8C2437 is 8,7:1. */ .nd-alarm-tx p{ margin:0 0 9px; font-size:14.4px; line-height:1.66; color:#fff; opacity:.94; } .nd-alarm-tx p:last-child{ margin-bottom:0; } .nd-hoe{ background:rgba(255,255,255,.14); border-radius:12px; padding:11px 14px; } .nd-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px; } .nd-card{ display:flex; gap:14px; padding:20px 22px; border-radius:var(--gp-r); background:#fff; border:1px solid rgba(35,50,47,.08); box-shadow:var(--gp-schaduw); } .nd-card.weten{ background:var(--hp-sand2); box-shadow:none; } .nd-ico{ width:44px; height:44px; border-radius:13px; display:grid; place-items:center; font-size:21px; background:var(--hp-sand2); flex:none; } .nd-card.weten .nd-ico{ background:#fff; } .nd-in{ min-width:0; flex:1; } .nd-in h3{ font-size:16.5px; font-weight:700; margin:0 0 6px; color:var(--hp-ink); line-height:1.3; } .nd-in p{ margin:0; font-size:14px; line-height:1.65; color:var(--hp-ink2); } .nd-meta{ display:flex; align-items:flex-start; gap:8px; margin-top:10px; font-size:13px; line-height:1.5; color:var(--hp-ink2); } .nd-meta span{ color:var(--hp-teal); margin-top:2px; font-size:15px; } .nd-acties{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; } /* De doorverwijzing op de hub naar het noodhoofdstuk. */ .nd-banner{ display:flex; align-items:center; gap:18px; padding:20px 24px; border-radius:var(--gp-r); background:linear-gradient(120deg,rgba(176,58,72,.09),rgba(176,58,72,.03)); border:1.5px solid rgba(176,58,72,.22); color:var(--hp-ink); transition:transform .2s var(--gp-ease), border-color .2s ease; } .nd-banner-ico{ display:grid; place-items:center; font-size:26px; color:#B03A48; flex:none; } .nd-banner-tx{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; } .nd-banner-tx strong{ font-size:17px; font-weight:700; } .nd-banner-tx em{ font-style:normal; font-size:13.5px; color:var(--hp-ink2); } .nd-banner-pijl{ display:grid; place-items:center; font-size:20px; color:#B03A48; transition:transform .22s var(--gp-ease); } .nd-banner:active{ transform:scale(.99); } /* ── Veelgestelde vragen ───────────────────────────────────────────────── */ .gp-faq{ padding:56px 0 0; } .gp-faq-lijst{ display:grid; gap:10px; max-width:78ch; } .gp-vraag{ border-radius:var(--gp-r); background:#fff; border:1px solid rgba(35,50,47,.09); overflow:hidden; transition:box-shadow .2s ease, border-color .2s ease; } .gp-vraag[open]{ box-shadow:var(--gp-schaduw); border-color:rgba(20,128,125,.24); } .gp-vraag summary{ display:flex; align-items:center; gap:14px; min-height:56px; padding:14px 20px; cursor:pointer; list-style:none; font-size:15.5px; font-weight:700; color:var(--hp-ink); } .gp-vraag summary::-webkit-details-marker{ display:none; } .gp-vraag summary > span:first-child{ flex:1; line-height:1.42; } .gp-antwoord{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .24s var(--gp-ease); } .gp-vraag[open] .gp-antwoord{ grid-template-rows:1fr; } .gp-antwoord > p{ overflow:hidden; margin:0; padding:0 20px 18px; font-size:14.8px; line-height:1.72; color:var(--hp-ink2); } /* ── Afsluiter met de twee woningen ────────────────────────────────────── */ .gp-cta{ margin:64px 0 0; padding:clamp(30px,4vw,52px); border-radius:30px; position:relative; overflow:hidden; background:linear-gradient(140deg,var(--hp-teal-d),#0a4f4d 60%,#0b5a52); color:#fff; box-shadow:0 40px 80px -40px rgba(14,99,96,.8); } .gp-cta::before{ content:""; position:absolute; right:-90px; top:-90px; width:300px; height:300px; border-radius:50%; background:rgba(225,135,160,.16); } .gp-cta::after{ content:""; position:absolute; left:-70px; bottom:-110px; width:250px; height:250px; border-radius:50%; background:rgba(255,255,255,.06); } .gp-cta-in{ position:relative; z-index:1; } .gp-cta h2{ font-family:'Cormorant Garamond',serif; font-weight:500; font-size:clamp(26px,3.4vw,40px); line-height:1.14; margin:0 0 10px; } .gp-cta > .gp-cta-in > p{ margin:0 0 24px; font-size:16px; line-height:1.65; opacity:.9; max-width:60ch; } .gp-huizen{ display:grid; grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); gap:14px; margin-bottom:26px; } .gp-huis{ display:flex; align-items:center; gap:15px; padding:13px 16px 13px 13px; border-radius:var(--gp-r); background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); color:#fff; transition:transform .2s var(--gp-ease), background .2s ease; } .gp-huis picture{ flex:none; } .gp-huis img{ width:72px; height:72px; border-radius:14px; object-fit:cover; display:block; } .gp-huis-in{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; } .gp-huis-in strong{ font-size:16.5px; font-weight:700; } .gp-huis-in em{ font-style:normal; font-size:12.8px; opacity:.82; } .gp-huis-in .prijs{ font-size:14px; font-weight:800; color:var(--hp-pink); margin-top:3px; } .gp-huis-in .prijs span{ font-weight:600; opacity:.8; font-size:12px; } .gp-huis-pijl{ display:grid; place-items:center; font-size:19px; opacity:.75; transition:transform .22s var(--gp-ease); } .gp-huis:active{ transform:scale(.985); } .gp-cta .hp-btn{ background:#fff; color:var(--hp-teal-d); } /* ── Verwijzingen naar de andere gidspagina's ──────────────────────────── */ .gp-anderen{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:12px; margin-top:8px; } .gp-ander{ display:flex; align-items:center; gap:13px; padding:16px 18px; border-radius:var(--gp-r); background:#fff; border:1px solid rgba(35,50,47,.09); color:var(--hp-ink); box-shadow:0 14px 30px -22px rgba(20,60,58,.5); transition:transform .2s var(--gp-ease), border-color .2s ease; } .gp-ander-ico{ width:42px; height:42px; border-radius:13px; display:grid; place-items:center; font-size:20px; flex:none; background:color-mix(in srgb, var(--ow) 13%, #fff); } .gp-ander strong{ font-size:15px; font-weight:700; line-height:1.34; } .gp-ander-pijl{ margin-left:auto; display:grid; place-items:center; font-size:18px; color:var(--ow); transition:transform .22s var(--gp-ease); } .gp-ander:active{ transform:scale(.99); } /* ── Terug naar de homepage ──────────────────────────────────────────────── Twee wegen terug, want een gids is een zijpad en je moet er altijd makkelijk uit kunnen: een Home-item met huisicoon in de balk, en onderaan een echte knop in plaats van een onderstreepte tekstlink die je over het hoofd ziet. */ .hp-home{ display:inline-flex; align-items:center; gap:7px; } .hp-home svg{ font-size:16px; } .gp-body .hp-back{ text-align:center; margin:40px 0 0; } .gp-body .hp-back a{ display:inline-flex; align-items:center; gap:9px; min-height:48px; padding:0 24px; border-radius:100px; background:#fff; border:1.5px solid rgba(20,128,125,.3); color:var(--hp-teal-d); font-size:14px; font-weight:700; border-bottom-width:1.5px; box-shadow:0 12px 26px -20px rgba(20,60,58,.6); transition:transform .18s var(--gp-ease), border-color .18s ease, background .18s ease; } .gp-body .hp-back a svg{ font-size:17px; transition:transform .22s var(--gp-ease); } .gp-body .hp-back a:active{ transform:scale(.98); } .gp-gecheckt{ margin:22px 0 0; text-align:center; font-size:12.5px; color:var(--hp-ink2); } /* ── Mobiele boekbalk ────────────────────────────────────────────────────── Alleen op de telefoon, en pas nadat je een stuk hebt gescrold: hij mag de eerste indruk niet in de weg zitten. Onder de safe-area van de iPhone. */ .gp-balk{ position:fixed; left:0; right:0; bottom:0; z-index:70; display:none; align-items:center; gap:12px; padding:11px 16px calc(11px + env(safe-area-inset-bottom)); background:rgba(252,248,241,.96); backdrop-filter:blur(16px); border-top:1px solid rgba(35,50,47,.1); transform:translateY(100%); transition:transform .26s var(--gp-ease); } .gp-balk.aan{ transform:translateY(0); } /* Beide regels afkappen in plaats van laten afbreken. Zonder dit werd de balk op 375 px drie regels hoog en dekte hij een achtste van het scherm af. */ .gp-balk-tx{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; overflow:hidden; } .gp-balk-tx b{ font-size:13px; font-weight:800; color:var(--hp-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .gp-balk-tx span{ font-size:11.5px; color:var(--hp-ink2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .gp-balk a{ flex:none; min-height:44px; display:inline-flex; align-items:center; gap:8px; padding:0 18px; border-radius:100px; background:var(--hp-teal); color:#fff; font-size:13px; font-weight:700; white-space:nowrap; box-shadow:0 12px 26px -14px rgba(14,99,96,.8); transition:transform .16s var(--gp-ease); } .gp-balk a:active{ transform:scale(.97); } /* ── Hover alleen waar echt gehoverd wordt ────────────────────────────────── Op een touchscreen blijft een hover-status na een tik hangen, en dan lijkt de kaart kapot. Daarom achter deze media query. */ @media (hover:hover) and (pointer:fine){ .ow-card:hover{ transform:translateY(-6px); box-shadow:var(--gp-schaduw-op); } .ow-card:hover .ow-foto img{ transform:scale(1.06); } .ow-card:hover .ow-lees svg{ transform:translateX(4px); } .et-card:hover{ transform:translateY(-4px); box-shadow:var(--gp-schaduw-op); } .et-knop:hover{ border-color:var(--hp-teal); background:rgba(20,128,125,.06); } .nd-banner:hover{ transform:translateY(-2px); border-color:rgba(176,58,72,.4); } .nd-banner:hover .nd-banner-pijl{ transform:translateX(4px); } .gp-huis:hover{ transform:translateY(-3px); background:rgba(255,255,255,.16); } .gp-huis:hover .gp-huis-pijl{ transform:translateX(4px); } .gp-ander:hover{ transform:translateY(-3px); border-color:color-mix(in srgb, var(--ow) 40%, #fff); } .gp-ander:hover .gp-ander-pijl{ transform:translateX(4px); } .gd-door:hover{ border-bottom-color:var(--hp-teal); } .gp-body .hp-back a:hover{ transform:translateY(-2px); border-color:var(--hp-teal); background:rgba(20,128,125,.05); } .gp-body .hp-back a:hover svg{ transform:translateX(-4px); } } /* ── Tablet ─────────────────────────────────────────────────────────────── */ @media (max-width:1000px){ .gp-kolommen{ grid-template-columns:1fr; gap:26px; } .gp-feiten{ position:static; order:-1; } } /* ── Telefoon ─────────────────────────────────────────────────────────────── Getest op 375 px. Alles wat kan overlopen krijgt hier min-width:0 of wrap. */ @media (max-width:640px){ .gp-hero > picture > img{ height:clamp(300px, 52vh, 420px); } .gp-antwoord-lead{ padding:20px 20px 20px 22px; } .gp-sec{ padding:30px 0 0; } .gp-sec p{ font-size:16px; } .ow-grid{ gap:14px; } .ow-foto{ height:150px; } .ow-ico{ top:124px; width:46px; height:46px; font-size:21px; } .et-card{ padding:18px 18px 16px; } .et-kop{ flex-wrap:wrap; } .et-tijd{ margin-left:0; order:3; width:100%; justify-content:center; } .et-acties .et-knop{ flex:1 1 auto; justify-content:center; } /* De tijdlijn wordt te smal met een kolom van 64 px ernaast, dus de maand schuift naar boven en de lijn verdwijnt. Beter geen lijn dan een lijn die door de tekst loopt. */ .ag-lijst::before{ display:none; } .ag-item{ grid-template-columns:1fr; gap:10px; } .ag-maand{ flex-direction:row; align-items:center; gap:10px; } .ag-ico{ width:40px; height:40px; font-size:19px; } .ag-tekst{ padding:17px 18px; } .nd-alarm{ padding:22px; gap:18px; } .nd-alarm-nr a{ font-size:52px; } .nd-alarm-tx{ min-width:0; } .nd-card{ padding:17px 18px; gap:12px; } .nd-banner{ padding:17px 18px; gap:13px; } .gp-cta{ margin-top:48px; border-radius:24px; } .gp-huis img{ width:62px; height:62px; } .gp-inhoud{ padding:17px 19px; } .gp-feiten{ padding:20px 21px; } .gp-balk{ display:flex; } .gp-body main{ padding-bottom:76px; } /* ruimte voor de vaste balk */ /* Raakvlakken op minimaal 44 px. De inhoudsopgave en de terug-link waren 21 en 23 px hoog: goed leesbaar, maar met een duim net te klein om betrouwbaar te raken. De regelafstand blijft gelijk, alleen het aanraakvlak groeit. */ .gp-inhoud ol{ gap:0; } .gp-inhoud li a{ display:flex; align-items:center; min-height:44px; } .hp-back a{ display:inline-flex; align-items:center; min-height:44px; } .gd-door{ min-height:44px; } } /* ── Minder beweging ─────────────────────────────────────────────────────── Niet alles uit: opacity en kleur helpen bij het begrijpen. Wat weggaat is de beweging, want dat is wat klachten geeft. */ @media (prefers-reduced-motion: reduce){ .ow-card, .et-card, .nd-banner, .gp-huis, .gp-ander, .gp-balk, .ow-foto img, .ow-lees svg, .gd-chev, .nd-banner-pijl, .gp-huis-pijl, .gp-ander-pijl{ transition-duration:.01ms !important; } .ow-card:hover, .et-card:hover, .nd-banner:hover, .gp-huis:hover, .gp-ander:hover{ transform:none; } .gd-tip-in, .gp-antwoord{ transition:none; } .gp-balk{ transform:none; } } /* ── Afdrukken ───────────────────────────────────────────────────────────── Gasten printen dit hoofdstuk. Vooral de noodnummers, en dan wil je geen donkere vlakken en wel alle uitgeklapte antwoorden. */ @media print{ .hp-nav, .gp-balk, .gp-cta, .nd-banner, .hp-foot{ display:none !important; } .gp-antwoord, .gd-tip-in{ grid-template-rows:1fr !important; } .nd-alarm{ background:none !important; color:#000 !important; border:2px solid #000; box-shadow:none; } .nd-alarm-nr a{ color:#000 !important; } .et-card, .nd-card, .ag-tekst, .gp-feiten{ box-shadow:none; border:1px solid #ccc; } }