/* 03-11-2026: 18 regels verwijderd die op geen pagina en bij geen schermbreedte nog effect hadden */ /** * VOAI — Nieuw design "Zon & Zee" (fase 2). Gescoped op body.vop-nd (voorlopig alleen het * land-template) zodat nog-niet-omgezette templates ongemoeid blijven. Overschrijft de oude * plugin-CSS met hogere specificiteit (.vop-nd ...) + waar nodig !important; die oude CSS wordt * per template uitgefaseerd. */ :root { --c-sea-900:#123f52; --c-sea-700:#1a5c77; --c-sea-400:#3daddc; --c-sun-600:#d65f18; --c-sun-500:#ee7125; --c-gold-500:#fcb420; --c-coral-500:#e83e24; --ink:#1a5c77; --muted:#5b7480; --line:#e7edf0; --sand:#fdf6ec; --mist:#f4f8fa; --card:#fff; --white:#fff; --r-sm:10px; --r:16px; --r-lg:22px; --r-pill:999px; --sh-1:0 4px 14px rgba(18,63,82,.08); --sh-2:0 10px 30px rgba(18,63,82,.12); --sh-3:0 20px 48px rgba(18,63,82,.18); --max:1200px; --ease:cubic-bezier(.22,.61,.36,1); --f-head:'Poppins',"Poppins-terugval",-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --f-body:'Inter',"Inter-terugval",-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; } /* ── Basis & typografie ─────────────────────────────────────────── */ body.vop-nd { font-family:var(--f-body); color:var(--ink); background:var(--white); font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased; } .vop-nd main h1,.vop-nd main h2,.vop-nd main h3,.vop-nd main h4, .vop-nd .verliefdOpLand,.vop-nd .verliefdOpTitel,.vop-nd h1,.vop-nd h2,.vop-nd h3 { font-family:var(--f-head); color:var(--c-sea-700); font-weight:800; letter-spacing:-.01em; line-height:1.13; } .vop-nd main h1,.vop-nd h1 { font-size:clamp(1.75rem,3.6vw,2.4rem); } .vop-nd main h2 { font-size:clamp(1.25rem,2.2vw,1.65rem); margin-bottom:.4em; } .vop-nd main h3 { font-size:clamp(1.15rem,2.2vw,1.5rem); color:var(--muted); font-weight:600; } .vop-nd main p,.vop-nd .verliefdOpLandIntro,.vop-nd .verliefdOpIntro { color:var(--ink); } .vop-nd .verliefdOpSubtitel { color:var(--c-sea-700); font-family:var(--f-head); font-weight:700; } /* ── Layout & sectie-ritme ──────────────────────────────────────── */ .vop-nd .verliefdOpNormaal,.vop-nd .verliefdOpMaxWidth { max-width:var(--max); margin-inline:auto; padding-inline:clamp(16px,4vw,32px); } .vop-nd .verliefdOpNormaal > section,.vop-nd .verliefdOpNormaal > article { padding-block:clamp(22px,2.6vw,40px); border:0; } .vop-nd .verliefdOpNormaal > section:nth-of-type(even) { background:var(--mist); border-radius:var(--r-lg); } .vop-nd .verliefdOpNormaal > article { background:var(--sand); border-radius:var(--r-lg); padding-inline:clamp(20px,4vw,40px); } /* ── Hero ───────────────────────────────────────────────────────── */ .vop-nd section[id*="Achtergrond"] { position:relative; overflow:visible; min-height:clamp(300px,40vh,430px); display:flex; align-items:center; background-size:cover; background-position:center; } /* De hero mag niet clippen: de uitklaplijsten van het zoekfilter vallen anders\n weg onder de rand van de sectie. De foto zelf wordt op zijn eigen laag geclipt. */\n.vop-nd section[id*="Achtergrond"] .hoofdFoto { overflow:hidden; }\n/* Hero-foto (.hoofdFoto) = full-bleed achtergrondlaag (werkt op desktop én mobiel). */ .vop-nd section[id*="Achtergrond"] .hoofdFoto { position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; z-index:0 !important; margin:0 !important; padding:0 !important; line-height:0; } .vop-nd section[id*="Achtergrond"] .hoofdFoto img { position:static !important; width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; max-width:none !important; } .vop-nd section[id*="Achtergrond"]::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(18,63,82,.20) 0%,rgba(18,63,82,.34) 55%,rgba(18,63,82,.58) 100%); z-index:0; } .vop-nd section[id*="Achtergrond"] .verliefdOpHoofd,.vop-nd section[id*="Achtergrond"] .verliefdOpHoofdNieuw { position:relative; z-index:1; } .vop-nd .verliefdOpHoofdNieuw .verliefdOpIntroNieuw,.vop-nd .verliefdOpHoofd .verliefdOpIntro { max-width:760px; } .vop-nd section[id*="Achtergrond"] h1 { color:#fff; text-shadow:0 2px 22px rgba(0,0,0,.4); } .vop-nd section[id*="Achtergrond"] .verliefdOpLandIntro,.vop-nd section[id*="Achtergrond"] p { color:#f2f8fb; text-shadow:0 1px 10px rgba(0,0,0,.35); font-size:clamp(0.86rem,2.3vw,1.02rem); line-height:1.55; } /* Hub-pagina hero (.verliefdOpHoofd/.verliefdOpHoofdHome met foto-achtergrond, GEEN section-id): witte kop + intro voor leesbaarheid op de foto. */ .vop-nd .verliefdOpHoofdHome h1,.vop-nd .verliefdOpHoofd h1 { color:#fff !important; text-shadow:0 2px 22px rgba(0,0,0,.5); } .vop-nd .verliefdOpHoofdHome .verliefdOpIntro,.vop-nd .verliefdOpHoofd .verliefdOpIntro, .vop-nd .verliefdOpHoofdHome .verliefdOpIntro p,.vop-nd .verliefdOpHoofd .verliefdOpIntro p { color:#f2f8fb !important; text-shadow:0 1px 10px rgba(0,0,0,.4); } /* Zoek/filter-balk: transparant op de herofoto (GEEN witte kaart), witte labels. */ .vop-nd .mobielModalSearchBox,.vop-nd .verliefdOpZoekBalk,.vop-nd .verliefdOpIntroNieuw form,.vop-nd .verliefdOpIntro form { background:transparent !important; box-shadow:none !important; border:0 !important; padding:0 !important; margin-top:20px; } .vop-nd .verliefdOpIntroNieuw form label,.vop-nd .verliefdOpIntro form label, .vop-nd .mobielModalSearchBox label,.vop-nd .verliefdOpZoekBalk label, .vop-nd .verliefdOpIntroNieuw form .sf-field-label,.vop-nd .verliefdOpIntroNieuw form legend { color:#fff !important; font-weight:600; text-shadow:0 1px 6px rgba(0,0,0,.35); } .vop-nd select,.vop-nd input[type="text"] { border:1px solid var(--line); border-radius:var(--r-sm); font-family:var(--f-body); } /* Zoekvorm-velden afsteken tegen de witte kaart: de zichtbare dropdowns zijn .multiselect-dropdown-divs (van de multiselect-plugin), standaard wit met vage rand. */ .vop-nd .multiselect-dropdown, .vop-nd .verliefdOpIntroNieuw input[type="text"],.vop-nd .verliefdOpIntro input[type="text"] { background:var(--mist) !important; border:1.5px solid #c4d8e2 !important; border-radius:var(--r-sm) !important; color:var(--ink) !important; } .vop-nd .multiselect-dropdown:hover,.vop-nd .multiselect-dropdown:focus-within { border-color:var(--c-sea-400) !important; } /* De uitklappende lijst blijft wit (schone leesbaarheid). */ .vop-nd .multiselect-dropdown-list-wrapper { background:#fff !important; } /* ── Knoppen / CTA ──────────────────────────────────────────────── */ .vop-nd .verliefdOpCTA,.vop-nd a.verliefdOpCTA,.vop-nd .verliefdOpDealKnop, .vop-nd button[type="submit"],.vop-nd [id*="Bekijk"][id*="resorts"],.vop-nd .verliefdOpUitgebreidZoeken { display:inline-block !important; white-space:nowrap; margin-top:10px; background:var(--c-sun-500) !important; color:#fff !important; font-family:var(--f-head); font-weight:700; border:0 !important; border-radius:var(--r-pill) !important; padding:10px 18px; text-decoration:none; cursor:pointer; box-shadow:0 6px 16px rgba(238,113,37,.28); transition:transform .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease); } .vop-nd .verliefdOpCTA:hover,.vop-nd .verliefdOpDealKnop:hover,.vop-nd button[type="submit"]:hover { background:var(--c-sun-600) !important; transform:translateY(-2px); box-shadow:0 10px 24px rgba(238,113,37,.4); } /* Zoekknop in het (transparante) zoekform: schone oranje knop (geen margin-gap, geen harde koraal/halo). Dubbele class = hogere specificiteit dan de CTA-regel (button[type=submit]). */ .vop-nd .vop-zoekKnop.vop-zoekKnop { margin-top:0 !important; background:linear-gradient(180deg,var(--c-sun-500),var(--c-sun-600)) !important; box-shadow:0 4px 12px rgba(238,113,37,.35) !important; font-style:normal !important; } .vop-nd .vop-zoekKnop.vop-zoekKnop:hover { background:var(--c-sun-600) !important; } /* Zoekform-tekstlinks ("Wis huidige filters" e.d.): inline-block zodat de gouden onderstreping alleen onder de tekst staat i.p.v. een streep over de volle breedte. */ .vop-nd .verliefdOpIntro .verliefdOpTekstLink,.vop-nd .verliefdOpIntroNieuw .verliefdOpTekstLink { display:inline-block; } /* Promo-knop (CategorieTitel) → goud→oranje pill */ .vop-nd .verliefdOpCategorieTitelWrapper { float:none; position:static; bottom:auto; margin-top:12px; background:none !important; box-shadow:none !important; } .vop-nd .verliefdOpCategorietitel { margin:0; } .vop-nd .verliefdOpCategorietitel a { display:inline-flex; align-items:center; gap:.4em; background:linear-gradient(135deg,var(--c-gold-500),var(--c-sun-500)); color:#fff !important; font-family:var(--f-head); font-weight:700; text-decoration:none; padding:11px 22px; border-radius:var(--r-pill); box-shadow:0 6px 16px rgba(238,113,37,.26); transition:transform .2s var(--ease),box-shadow .2s var(--ease); } .vop-nd .verliefdOpCategorietitel a:hover { transform:translateY(-2px); box-shadow:0 10px 22px rgba(238,113,37,.38); } /* Tekstlink-CTA op kaarten */ .vop-nd .verliefdOpDealIntro a,.vop-nd .verliefdOpTekstLink { color:var(--c-sea-700); font-weight:700; text-decoration:none; border-bottom:2px solid var(--c-gold-500); padding-bottom:1px; transition:color .2s var(--ease),border-color .2s var(--ease); } .vop-nd .verliefdOpDealIntro a:hover,.vop-nd .verliefdOpTekstLink:hover { color:var(--c-sun-500); border-color:var(--c-sun-500); } /* ── Deals / aanbieders: witte kaartjes, prijs in koraal ────────── */ .vop-nd .verliefdOpAanbieders { display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; gap:16px; } .vop-nd .verliefdOpAanbieder { flex:1 1 150px; max-width:200px; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:14px; background:#fff !important; border:1px solid var(--line); border-radius:var(--r); padding:18px 12px; box-shadow:var(--sh-1); height:auto !important; min-height:0 !important; width:auto !important; max-width:none !important; min-width:0 !important; margin:0 !important; transition:transform .2s var(--ease),box-shadow .2s var(--ease); } .vop-nd .verliefdOpAanbieder:hover { transform:translateY(-4px); box-shadow:var(--sh-2); } .vop-nd .verliefdOpAanbieder > a:first-child { display:flex; align-items:center; justify-content:center; min-height:76px; width:100%; } .vop-nd .verliefdOpAanbieder img { max-height:64px; width:auto; max-width:92%; object-fit:contain; } .vop-nd .verliefdOpAanbieder .verliefdOpCTA { margin-top:0 !important; padding:9px 10px !important; font-size:.82rem !important; width:100%; text-align:center; box-sizing:border-box; } .vop-nd [class*="prijs"] { color:var(--c-coral-500); font-family:var(--f-head); font-weight:800; font-variant-numeric:tabular-nums; } /* ── Kaarten (bestemmingen / hoteltegels) ───────────────────────── */ /* Alleen de bestemmingen-grid (Top6). NIET .verliefdOpTop5Deals: dat is de hoteltegel- slideshow die op flex+overflow-hidden leunt; gridden liet de sterren exploderen. */ .vop-nd .verliefdOpTop6Deals { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,288px),1fr)); gap:clamp(18px,2.4vw,28px); } /* Bestemmingen-container die als .verliefdOpTop5Deals (slideshow) rendert maar Top6Deal-kaarten bevat (o.a. last-minute-hub): grid i.p.v. smalle flex-slideshow. NIET de hoteltegel-slider. */ .vop-nd .verliefdOpTop5Deals:not(.verliefdOpHotelTegeltjes):not(.slideshow-container2):not(.slideshow-container3) { display:grid !important; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); gap:clamp(16px,2vw,24px); overflow:visible !important; } .vop-nd .verliefdOpTop5Deals:not(.verliefdOpHotelTegeltjes):not(.slideshow-container2):not(.slideshow-container3) > .verliefdOpTop6Deal, .vop-nd .verliefdOpTop5Deals:not(.verliefdOpHotelTegeltjes):not(.slideshow-container2):not(.slideshow-container3) > * { width:auto !important; max-width:none !important; } /* Kaart-titel dupliceert vaak de subtitel (of is leeg) → titel verbergen, subtitel = de kop. */ .vop-nd .verliefdOpTop5Deals:not(.verliefdOpHotelTegeltjes):not(.slideshow-container2):not(.slideshow-container3) .verliefdOpTitel { display:none !important; } .vop-nd .verliefdOpTop5Deals:not(.verliefdOpHotelTegeltjes):not(.slideshow-container2):not(.slideshow-container3) .verliefdOpSubtitel { color:var(--c-coral-500) !important; font-family:var(--f-head) !important; font-weight:700 !important; font-size:1.15rem !important; margin:0 0 8px !important; text-shadow:none !important; } .vop-nd .verliefdOpTop6Deal { width:auto !important; max-width:none !important; min-width:0; margin:0 !important; background:#fff !important; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--sh-1); display:flex; flex-direction:column; transition:transform .28s var(--ease),box-shadow .28s var(--ease); } .vop-nd .verliefdOpTop6Deal > div { width:auto !important; max-width:none !important; } .vop-nd .verliefdOpTop6Deal:hover { transform:translateY(-6px); box-shadow:var(--sh-3); } .vop-nd .verliefdOpTop6Deal img { width:100%; aspect-ratio:16/10; height:auto; object-fit:cover; display:block; transition:transform .5s var(--ease); } .vop-nd .verliefdOpTop6Deal:hover img { transform:scale(1.05); } .vop-nd .verliefdOpTop6Deal > div { padding:18px 20px 20px; display:flex; flex-direction:column; gap:8px; } .vop-nd .verliefdOpTop6Deal .verliefdOpTitel,.vop-nd .verliefdOpTop6Deal h3 { color:var(--c-coral-500); font-family:var(--f-head); font-size:1.2rem; font-weight:700; margin:0; } .vop-nd .verliefdOpTop6Deal .verliefdOpLandIntro { color:var(--muted); font-size:.97rem; line-height:1.55; } /* ── Hoteltegels ("Populaire opties…"): witte kaart, naam ONDER het beeld ─ Oude CSS stapelt alles óver het beeld met negatieve offsets (bottom:12.5rem/ 5rem/20px) + zet sterren op width:100%. Alles neutraliseren, container als grid. */ /* Lege hotel-slider-/bestemmingen-sectie (alleen kop, GEEN kaarten) verbergen — voorkomt de dubbele kop (o.a. op last-minute waar een leeg .verliefdOpHotelTegeltjesNieuw-blok staat). */ .vop-nd .verliefdOpHotelTegeltjesNieuw:not(:has(.verliefdOpTop5Deal)):not(:has(.verliefdOpTop6Deal)):not(:has(.verliefdOpHotelTegeltje)) { display:none !important; } /* Hotel-deals = horizontale slider die via transform schuift (vop-slider.js). De WRAP (.verliefdOpHotelTegeltjesNieuw) klipt; de TRACK (.verliefdOpTop5Deals) schuift. */ .vop-nd .verliefdOpHotelTegeltjesNieuw { position:relative; overflow:hidden; padding:6px 0 14px; } .vop-nd .verliefdOpTop5Deals.verliefdOpHotelTegeltjes { display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; overflow:visible !important; gap:20px; margin:0 !important; padding:2px !important; transition:transform .45s var(--ease); will-change:transform; } .vop-nd .verliefdOpHotelTegeltje.mySlides { display:flex !important; flex:0 0 clamp(280px,86vw,320px) !important; } .vop-nd .verliefdOpHotelTegeltje { width:auto !important; max-width:none !important; min-width:0; margin:0 !important; padding:0 !important; background:#fff !important; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--sh-1); display:flex; flex-direction:column; transition:transform .28s var(--ease),box-shadow .28s var(--ease); } .vop-nd .verliefdOpHotelTegeltje:hover { transform:translateY(-6px); box-shadow:var(--sh-3); } .vop-nd .verliefdOpHotelTegeltje > div { width:auto !important; max-width:none !important; } .vop-nd .verliefdOpHotelTegeltje > div:first-of-type { position:relative; margin:0 !important; line-height:0; } .vop-nd .verliefdOpHotelTegeltje img { width:100% !important; aspect-ratio:16/10; height:auto !important; object-fit:cover; display:block; border-radius:0 !important; } /* content-kolom: bottom:20px / max-height / gouden bg neutraliseren */ .vop-nd .verliefdOpHotelTegeltje > div:last-of-type { position:static !important; bottom:auto !important; top:auto !important; max-height:none !important; background:#fff !important; margin:0 !important; padding:16px !important; display:flex; flex-direction:column; gap:12px; } /* naam + review — bottom:12.5rem overlay neutraliseren */ .vop-nd .verliefdOpHotelTegeltje .verliefdOpResortTegeltjeInfo { position:static !important; bottom:auto !important; top:auto !important; inset:auto !important; z-index:auto !important; display:flex; justify-content:space-between; align-items:flex-start; gap:12px; background:none !important; padding:0 !important; margin:0 !important; width:auto !important; } .vop-nd .verliefdOpHotelTegeltje .verliefdOpResortTegeltjeInfo > div { max-width:none !important; padding:0 !important; margin:0 !important; } .vop-nd .verliefdOpHotelTegeltje p.verliefdOpResortTegeltje, .vop-nd .verliefdOpHotelTegeltje p.verliefdOpResortTegeltje a { color:var(--c-coral-500) !important; font-family:var(--f-head); font-weight:700; font-size:1.05rem; line-height:1.2; margin:0; max-width:none !important; text-decoration:none; } .vop-nd .verliefdOpHotelTegeltje .verliefdOpSterren { display:block !important; margin:5px 0 0; line-height:1; white-space:nowrap; } .vop-nd .verliefdOpHotelTegeltje ul.verliefdOpNavigatie { list-style:none; padding:0; margin:5px 0 0; } .vop-nd .verliefdOpHotelTegeltje ul.verliefdOpNavigatie li { color:var(--muted); font-size:.85rem; } /* Guard: sterren klein + horizontaal (oude img{width:100%} + block) */ .vop-nd .verliefdOpHotelTegeltje .verliefdOpSterren img.sterretje { width:16px !important; height:16px !important; display:inline-block !important; vertical-align:middle; } .vop-nd .verliefdOpHotelTegeltje .verliefdOpSterren.sterrenGroot { position:relative; bottom:auto !important; margin:0; flex:0 0 auto; } .vop-nd .verliefdOpHotelTegeltje .sterretjeGroot { width:40px !important; height:40px !important; left:0 !important; top:0 !important; } /* aanbieder-dealrijen — bottom:5rem overlay neutraliseren, schone rij */ .vop-nd .verliefdOpHotelTegeltje .verliefdOpAanbiederBlokAanbieding { position:static !important; bottom:auto !important; top:auto !important; background:var(--mist) !important; border:1px solid var(--line); border-radius:var(--r-sm); display:grid !important; grid-template-columns:minmax(38px,54px) minmax(0,1fr) auto; align-items:center; gap:6px 10px; padding:5px 8px !important; margin:0 !important; width:auto !important; } .vop-nd .verliefdOpHotelTegeltje .verliefdOpAanbiederBlokAanbieding > div { margin:0 !important; padding:0 !important; } .vop-nd .verliefdOpHotelTegeltje .verliefdOpAanbiederBlokAanbieding div:last-of-type { position:static !important; top:auto !important; } .vop-nd .verliefdOpHotelTegeltje .verliefdOpAanbiederBlokAanbieding img { max-height:36px !important; max-width:54px !important; width:auto; object-fit:contain; } .vop-nd .verliefdOpHotelTegeltje p.verliefdOpAanbiedingTekst { margin:0 !important; font-size:.78rem !important; line-height:1.3; color:var(--ink); max-width:none !important; padding:0 !important; } .vop-nd .verliefdOpHotelTegeltje .verliefdOpAanbiederBlokAanbieding .verliefdOpCTA { margin-top:0 !important; padding:7px 12px; font-size:.78rem; } /* oude slideshow-pijlen verbergen (we injecteren eigen scroll-pijlen via vop-slider.js) */ .vop-nd .verliefdOpHotelTegeltjes .verliefdOpSliderPlusMin, .vop-nd .verliefdOpHotelTegeltjes .prev, .vop-nd .verliefdOpHotelTegeltjes .next, .vop-nd .verliefdOpHotelTegeltjes [class*="prev"]:not(.vop-slider-arrow), .vop-nd .verliefdOpHotelTegeltjes [class*="next"]:not(.vop-slider-arrow) { display:none !important; } /* eigen slider-pijlen — groot, hoog contrast, altijd zichtbaar (duidelijk voor iedereen). Aan het uiteinde uitgegrijsd i.p.v. verborgen, zodat het als navigatie herkenbaar blijft. */ .vop-nd .vop-slider-arrow { position:absolute; top:40%; transform:translateY(-50%); z-index:200; width:54px; height:54px; border-radius:50%; background:linear-gradient(135deg,var(--c-gold-500),var(--c-sun-500)); border:3px solid #fff; box-shadow:0 6px 20px rgba(15,52,74,.32); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .18s var(--ease),box-shadow .18s var(--ease),filter .18s,opacity .2s; } .vop-nd .vop-slider-arrow:hover { filter:brightness(1.07); transform:translateY(-50%) scale(1.09); box-shadow:0 10px 26px rgba(238,113,37,.5); } .vop-nd .vop-slider-arrow svg { width:26px; height:26px; } .vop-nd .vop-slider-arrow.vop-prev { left:10px; } .vop-nd .vop-slider-arrow.vop-next { right:10px; } .vop-nd .vop-slider-arrow.is-disabled { opacity:.3; pointer-events:none; box-shadow:none; } .vop-nd .vop-slider-arrow[hidden] { display:none; } @media (max-width:640px){ .vop-nd .vop-slider-arrow { width:44px; height:44px; } .vop-nd .vop-slider-arrow svg { width:22px; height:22px; } } /* ── "Favoriete bestemmingen"-slider (slideshow-container2) ─────────── Zelfde transform-slider als de hoteltegels. De oude slideshow-rommel (pijlen, dots, en de categorie-pill die absoluut óver de kaarten viel) binnen .slider2 verbergen; de kaart-CTA's blijven de links. */ .vop-nd .slider2 { position:relative; overflow:hidden; padding:6px 0 14px; } .vop-nd .slider2 .verliefdOpSliderPlusMin, .vop-nd .slider2 .verliefdOpCategorieTitelWrapper, .vop-nd .slider2 .verliefdOpSliderKnopjes2, .vop-nd .slider2 [class*="prev"]:not(.vop-slider-arrow), .vop-nd .slider2 [class*="next"]:not(.vop-slider-arrow) { display:none !important; } .vop-nd .verliefdOpTop5Deals.slideshow-container2 { display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; overflow:visible !important; gap:20px; margin:0 !important; padding:2px !important; grid-template-columns:none !important; transition:transform .45s var(--ease); will-change:transform; } .vop-nd .verliefdOpTop5Deal.mySlides2 { display:flex !important; flex-direction:column; flex:0 0 clamp(280px,86vw,330px) !important; width:auto !important; max-width:none !important; min-width:0; margin:0 !important; padding:0 !important; background:#fff !important; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--sh-1); transition:transform .28s var(--ease),box-shadow .28s var(--ease); } .vop-nd .verliefdOpTop5Deal.mySlides2:hover { transform:translateY(-6px); box-shadow:var(--sh-3); } .vop-nd .verliefdOpTop5Deal.mySlides2 > div { width:auto !important; max-width:none !important; margin:0 !important; } .vop-nd .verliefdOpTop5Deal.mySlides2 > div:first-child { line-height:0; } .vop-nd .verliefdOpTop5Deal.mySlides2 img { width:100% !important; aspect-ratio:16/10; height:auto !important; object-fit:cover; display:block; margin:0 !important; border-radius:0 !important; } .vop-nd .verliefdOpTop5Deal.mySlides2 > div:last-child { position:static !important; top:auto !important; margin:0 !important; padding:16px 18px 18px !important; display:flex; flex-direction:column; gap:9px; flex:1 1 auto; } .vop-nd .verliefdOpTop5Deal.mySlides2 .verliefdOpSubtitel { color:var(--c-coral-500) !important; font-family:var(--f-head) !important; font-weight:700 !important; font-size:1.15rem !important; line-height:1.25 !important; margin:0 !important; text-shadow:none !important; white-space:normal !important; letter-spacing:normal !important; } .vop-nd .verliefdOpTop5Deal.mySlides2 .verliefdOpTitel { display:none !important; } /* land dupliceert de subtitel */ .vop-nd .verliefdOpTop5Deal.mySlides2 .verliefdOpDealIntro { color:var(--muted) !important; font-size:.95rem !important; line-height:1.55 !important; margin:0 !important; max-width:none !important; } .vop-nd .verliefdOpTop5Deal.mySlides2 .verliefdOpDealIntro:last-of-type { margin-top:auto !important; padding-top:2px; } .vop-nd .verliefdOpTop5Deal.mySlides2 a.verliefdOpTekstLink, .vop-nd .verliefdOpTop5Deal.mySlides2 a.landCTAButton { display:inline-block; } /* ── "Populaire bestemmingen binnen/buiten Europa" (topBestemmingen) ── Titel ALTIJD als nette kop in de crème-box met lucht t.o.v. het beeld — nooit absoluut over de foto (oude CSS deed dat op sommige breedtes). */ .vop-nd .verliefdOpTop6Deal div.topBestemmingen { padding:20px 22px 22px !important; display:flex; flex-direction:column; gap:14px; background:rgba(252,180,32,.16) !important; } .vop-nd .verliefdOpTop6Deal div.topBestemmingen p.verliefdOpSubtitel { position:static !important; inset:auto !important; margin:0 !important; background:none !important; text-shadow:none !important; color:var(--c-coral-500) !important; font-family:var(--f-head) !important; font-weight:700 !important; font-size:1.2rem !important; line-height:1.3 !important; } .vop-nd ul.topBestemmingen { list-style:none !important; margin:0 !important; padding:0 !important; display:flex; flex-direction:column; gap:11px; } .vop-nd ul.topBestemmingen li { margin:0 !important; padding:0 !important; } .vop-nd ul.topBestemmingen a.verliefdOpTekstLink { display:inline-block; } /* ── Redenen / highlights: SECTION = grid, elke .verliefdOpHighlights = 1 kaart ─ */ .vop-nd .verliefdOpLandHighlights { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:clamp(16px,2.4vw,28px); align-items:start; } .vop-nd .verliefdOpLandHighlights > :not(.verliefdOpHighlights) { grid-column:1/-1; } .vop-nd .verliefdOpHighlights { display:block !important; width:auto !important; max-width:none !important; min-width:0 !important; background:#fff; border:1px solid #f2e6d3; border-radius:var(--r); padding:24px 26px; box-shadow:var(--sh-1); margin:0 !important; height:auto !important; min-height:0 !important; max-height:none !important; } .vop-nd .verliefdOpHighlights .verliefdOpSubtitel { color:var(--c-sun-500) !important; font-family:var(--f-head); font-weight:700; font-size:1.15rem !important; line-height:1.35 !important; letter-spacing:normal !important; word-spacing:normal !important; white-space:normal !important; margin:0 0 12px !important; max-width:none !important; width:auto !important; } .vop-nd .verliefdOpHighlights p, .vop-nd .verliefdOpHighlights .verliefdOpLand, .vop-nd .verliefdOpHighlights .verliefdOpLand *, .vop-nd .verliefdOpHighlights .verliefdOpLandIntroOnderUitklap, .vop-nd .verliefdOpHighlights .verliefdOpLandIntro { color:var(--ink) !important; font-family:var(--f-body) !important; font-weight:400 !important; font-size:.95rem !important; line-height:1.6 !important; margin-top:10px; max-width:none !important; width:auto !important; } .vop-nd .verliefdOpHighlights .verliefdOpUitklapKnop { color:var(--c-sun-500); font-weight:700; } /* ── FAQ als accordion-kaarten ──────────────────────────────────── */ .vop-nd ul.verliefdOpFAQ { list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr)); gap:14px; align-items:start; } .vop-nd li.verliefdOpFAQ { width:auto !important; max-width:none !important; margin:0 !important; background:#fff; border:1px solid var(--line); border-radius:var(--r-sm); padding:6px 22px; box-shadow:var(--sh-1); transition:box-shadow .2s var(--ease); } .vop-nd li.verliefdOpFAQ:hover { box-shadow:var(--sh-2); } .vop-nd li.verliefdOpFAQ { border:1px solid var(--line) !important; } /* oude CSS zette rechts 2px → gelijkmatig */ .vop-nd li.verliefdOpFAQ .verliefdOpLand { font-size:1.08rem; font-style:normal; color:var(--c-sea-700); } /* open paneel: dikke 3px gouden kaderlijnen → één subtiele divider bovenaan */ .vop-nd ul.verliefdOpInfoOnderUitklap { border-top:1px solid var(--line) !important; border-bottom:0 !important; margin-top:12px !important; padding-top:14px !important; } .vop-nd ul.verliefdOpInfoOnderUitklap li { color:var(--ink); } /* ── Hotel-faciliteiten (resortpagina): nette, on-brand accordeon-sectie ────────── Was: grote grijze groepskoppen + losse smalle pills met veel dode ruimte. Nu: een sectietitel + gouden score-badge, per groep een koraal eyebrow, volle-breedte accordeon-kaarten met chevron rechts, en een open paneel met de labels als check-grid. Gescoped op .verliefdOpResortHighlights zodat de gewone FAQ/redenen ongemoeid blijven. */ /* flex-wrap:nowrap: deze kolom-flex wikkelde opengeklapte panelen naar een tweede kolom buiten beeld - 02-11-2026 */ .vop-nd .verliefdOpResortHighlights.verliefdOpResortVisuals { list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; flex-wrap:nowrap; } .vop-nd .verliefdOpResortHighlights .verliefdOpHighlightsBlokje { color:var(--c-coral-500); font-family:var(--f-head); font-weight:700; font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; margin:22px 0 8px; } .vop-nd .verliefdOpResortHighlights > li:first-child .verliefdOpHighlightsBlokje { color:var(--ink); font-size:1.4rem; letter-spacing:normal; text-transform:none; margin:0 0 4px; } /* score-badge: schone gouden cirkel i.p.v. de flauwe ster */ .vop-nd .verliefdOpResortHighlights .verliefdOpSterren .sterretje { width:18px !important; height:18px !important; } .vop-nd .verliefdOpResortHighlights .verliefdOpSterren.sterrenGroot { display:inline-flex !important; align-items:center; justify-content:center; width:44px !important; height:44px !important; border-radius:50%; background:var(--c-gold-500); box-shadow:0 2px 8px rgba(0,0,0,.18); margin:8px 0 0 !important; padding:0 !important; bottom:auto !important; top:auto !important; } .vop-nd .verliefdOpResortHighlights .sterrenGroot .sterretjeGroot { display:none !important; } .vop-nd .verliefdOpResortHighlights .sterrenGroot .verliefdOpReviewCijfer {position:static !important; inset:auto !important; color:#fff !important; font-family:var(--f-head) !important; font-weight:800 !important; font-size:.92rem !important; text-shadow:0 1px 2px rgba(0,0,0,.55)!important;} /* accordeon-kaart, volle breedte, chevron rechts */ .vop-nd .verliefdOpResortHighlights li.verliefdOpFAQ { width:100% !important; max-width:none !important; margin:0 !important; padding:0 !important; background:#fff; border:1px solid var(--line) !important; border-radius:var(--r-sm); box-shadow:var(--sh-1); overflow:visible; transition:box-shadow .2s var(--ease); } .vop-nd .verliefdOpResortHighlights li.verliefdOpFAQ:hover { box-shadow:var(--sh-2); } .vop-nd .verliefdOpResortHighlights li.verliefdOpFAQ .verliefdOpLand { display:flex !important; align-items:center; justify-content:space-between; gap:12px; margin:0 !important; padding:14px 20px !important; cursor:pointer; font-family:var(--f-head) !important; font-weight:600 !important; font-size:1.02rem !important; color:var(--c-sea-700) !important; transition:background .18s var(--ease); } .vop-nd .verliefdOpResortHighlights li.verliefdOpFAQ .verliefdOpLand:hover { background:var(--mist); } /* chevron: de bron-pijl (svg) rechts, in coral (kaart is nu overflow:visible → niet meer geklipt) */ .vop-nd .verliefdOpResortHighlights li.verliefdOpFAQ .verliefdOpUitklapPijl { flex:0 0 auto; display:inline-flex; align-items:center; } .vop-nd .verliefdOpResortHighlights li.verliefdOpFAQ .verliefdOpUitklapPijl svg { width:18px; height:18px; fill:var(--c-coral-500) !important; } .vop-nd .verliefdOpResortHighlights li.verliefdOpFAQ .verliefdOpUitklapPijl svg path, .vop-nd .verliefdOpResortHighlights li.verliefdOpFAQ .verliefdOpUitklapPijl svg * { fill:var(--c-coral-500) !important; stroke:var(--c-coral-500) !important; } /* open paneel: labels als check-grid */ .vop-nd .verliefdOpResortHighlights .verliefdOpLandIntroOnderUitklap { padding:0 20px 16px !important; } .vop-nd .verliefdOpResortHighlights .verliefdOpFotoBeschrijving { color:var(--muted) !important; font-size:.95rem !important; margin:0 0 4px !important; } .vop-nd .verliefdOpResortHighlights ul.verliefdOpInfoOnderUitklap { list-style:none; margin:0 !important; padding:14px 0 2px !important; border-top:1px solid var(--line) !important; border-bottom:0 !important; display:grid !important; grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr)); gap:9px 22px; } .vop-nd .verliefdOpResortHighlights ul.verliefdOpInfoOnderUitklap li { margin:0 !important; } .vop-nd .verliefdOpResortHighlights ul.verliefdOpInfoOnderUitklap li p.verliefdOpInfoOnderUitklap { position:relative; margin:0 !important; padding:0 0 0 24px !important; color:var(--ink) !important; font-size:.95rem !important; line-height:1.45 !important; } .vop-nd .verliefdOpResortHighlights ul.verliefdOpInfoOnderUitklap li p.verliefdOpInfoOnderUitklap::before { content:"\2713"; position:absolute; left:0; top:0; color:var(--c-sun-500); font-weight:800; font-size:.9rem; } /* ── "Lees verder" ──────────────────────────────────────────────── */ .vop-nd .verliefdOpUitklapKnop { color:var(--c-sun-500); font-weight:700; cursor:pointer; } /* ── Slider-knoppen ─────────────────────────────────────────────── */ .vop-nd .verliefdOpSliderPlusMin span,.vop-nd .prev3,.vop-nd .next3,.vop-nd [id^="prevNieuw"],.vop-nd [id^="nextNieuw"] { background:#fff !important; color:var(--c-sun-500) !important; border:1px solid var(--line) !important; box-shadow:var(--sh-1); border-radius:var(--r-pill); transition:transform .2s var(--ease),box-shadow .2s var(--ease); } .vop-nd .verliefdOpSliderPlusMin span:hover { transform:scale(1.08); box-shadow:var(--sh-2); } /* ── Feedback-fixes (2026-07-20) ────────────────────────────────── */ /* 1. Hoteltegel: tekstschaduw weg (leesbaarheid van titel/Turkije). */ .vop-nd .verliefdOpHotelTegeltje p.verliefdOpResortTegeltje, .vop-nd .verliefdOpHotelTegeltje p.verliefdOpResortTegeltje a, .vop-nd .verliefdOpHotelTegeltje ul.verliefdOpNavigatie, .vop-nd .verliefdOpHotelTegeltje ul.verliefdOpNavigatie li, .vop-nd .verliefdOpHotelTegeltje .verliefdOpSterren { text-shadow:none !important; } /* 2. Review-badge: schone gouden cirkel met het cijfer erin (ster-svg verborgen). Bulletproof: cijfer is een STATIC flex-child, gecentreerd door de container — geen absolute-positionering die met de oude CSS vecht. */ .vop-nd .verliefdOpHotelTegeltje .verliefdOpSterren.sterrenGroot { position:relative !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; width:38px !important; height:38px !important; min-width:38px; border-radius:50% !important; background:var(--c-gold-500) !important; box-shadow:0 2px 8px rgba(0,0,0,.2); flex:0 0 auto; margin:0 !important; padding:0 !important; bottom:auto !important; right:auto !important; top:auto !important; left:auto !important; } .vop-nd .verliefdOpHotelTegeltje .sterrenGroot .sterretjeGroot { display:none !important; } .vop-nd .verliefdOpHotelTegeltje .verliefdOpReviewCijfer {position:static !important; inset:auto !important; right:auto !important; bottom:auto !important; left:auto !important; top:auto !important; color:#fff !important; font-family:var(--f-head) !important; font-weight:800 !important; font-size:.82rem !important; line-height:1 !important; text-shadow:0 1px 2px rgba(0,0,0,.55)!important; margin:0 !important; padding:0 !important;} /* 3. Promo "Populairste resort": compacte pill linksboven op de kaart i.p.v. volle balk. */ .vop-nd .verliefdOpHotelTegeltje { position:relative; } .vop-nd .verliefdOpTopResort { position:absolute !important; top:12px; left:12px; z-index:3; width:auto !important; max-width:calc(100% - 24px); margin:0 !important; background:linear-gradient(135deg,var(--c-gold-500),var(--c-sun-500)) !important; color:#fff !important; font-family:var(--f-head); font-weight:700; font-size:.78rem; line-height:1.2; padding:6px 14px; border-radius:var(--r-pill); box-shadow:0 4px 12px rgba(0,0,0,.22); border:0 !important; text-align:center; } /* 4. FAQ-antwoorden: op de WITTE kaart → donker/leesbaar (waren wit = onzichtbaar). verliefdOpTopResortTitel geen achtergrond. */ .vop-nd .verliefdOpFAQ .verliefdOpLandIntroOnderUitklap,.vop-nd li.verliefdOpFAQ .verliefdOpLandIntroOnderUitklap, .vop-nd li.verliefdOpFAQ p:not(.verliefdOpLand),.vop-nd li.verliefdOpFAQ .verliefdOpLandIntro { color:var(--ink) !important; font-family:var(--f-body) !important; font-weight:400 !important; text-shadow:none !important; } /* De vraag in de FAQ is een kop: zelfde letter en kleur als de koppen op de pagina. */ /* De inleidende zin boven de FAQ is lopende tekst, geen kop. */ .vop-nd p.verliefdOpLand:has(+ ul.verliefdOpFAQ) { font-family:var(--f-body) !important; color:var(--ink) !important; font-weight:400 !important; letter-spacing:normal; } .vop-nd li.verliefdOpFAQ p.verliefdOpLand { font-family:var(--f-head) !important; color:var(--c-sea-700) !important; font-weight:600 !important; font-size:1.08rem; text-shadow:none !important; letter-spacing:-.01em; } .vop-nd .verliefdOpTopResortTitel { background:none !important; color:#fff !important; } /* Hotel-template: de deals-kaart-kop (.verliefdOpSubTitel, hoofdletter T) was bijna-wit op de witte kaart → donker/leesbaar maken. */ .vop-nd .verliefdOpSubTitel { color:var(--ink) !important; font-family:var(--f-head) !important; font-weight:700 !important; text-shadow:none !important; } /* Hero vergelijk-kaart (.verliefdOpAanbiederBlok) is wit maar erft bijna-witte tekstkleur → onleesbaar. Hogere specificiteit dan de oude inline-regel: tekst donker maken. De CTA-span (.verliefdOpCTA) houdt zijn eigen witte kleur op oranje. */ .vop-nd .verliefdOpAanbiederBlok { color:var(--ink) !important; } /* Oude CSS zet -webkit-text-fill-color op bijna-wit (wint van 'color') + een blur-text-shadow → spookachtig onleesbaar op de witte kaart. Hoge specificiteit + text-fill + shadow uit. */ .vop-nd .verliefdOpHoofd .verliefdOpAanbiederBlok p.verliefdOpSubTitel, .vop-nd .verliefdOpHoofd .verliefdOpAanbiederBlok .verliefdOpAanbiedingTekst, .vop-nd .verliefdOpHoofd .verliefdOpAanbiederBlok .verliefdOpAanbiedingTekst * { color:var(--ink) !important; -webkit-text-fill-color:var(--ink) !important; text-shadow:none !important; opacity:1 !important; } .vop-nd .verliefdOpHoofd .verliefdOpAanbiederBlok .verliefdOpAanbiedingTekst { font-weight:400 !important; } /* Dubbele knop: de gouden wrapper (.verliefdOpOranje.verliefdOpAlleen) om de oranje CTA-pill neutraliseren → alleen de pill blijft over (geen knop-in-knop). */ .vop-nd .verliefdOpOranje.verliefdOpAlleen { background:none !important; box-shadow:none !important; padding:0 !important; border-radius:0 !important; margin:6px 0 0 !important; } /* Multiselect-dropdown-LIJST (uitgeklapte opties): labels donker, leesbaar op de witte lijst. Dubbele class → hogere specificiteit dan de witte form-label-regel (.verliefdOpIntroNieuw form label). */ .vop-nd .multiselect-dropdown-list.multiselect-dropdown-list label, .vop-nd .multiselect-dropdown-list-wrapper.multiselect-dropdown-list-wrapper label { color:var(--ink) !important; text-shadow:none !important; font-weight:400 !important; } /* 5. Trio-knop: één schone knop (geen dubbele laag / geen tekstlink-underline). */ .vop-nd .verliefdOpCategorietitel { background:none !important; box-shadow:none !important; padding:0 !important; animation:none !important; } .vop-nd .verliefdOpCategorieTitelanimation { animation:none !important; } .vop-nd .verliefdOpCategorieTitelanimation::before, .vop-nd .verliefdOpCategorieTitelanimation::after { content:none !important; display:none !important; } .vop-nd .verliefdOpCategorietitel a::before, .vop-nd .verliefdOpCategorietitel a::after { display:none !important; content:none !important; } /* Compacte inline-knop (géén full-width reuzenpil meer). Auto-breedte, gecentreerd, niet cursief. */ .vop-nd .verliefdOpCategorietitel { text-align:center !important; margin:16px 0 !important; } .vop-nd .verliefdOpCategorietitel a, .vop-nd .verliefdOpCategorietitel a.verliefdOpTekstLink, .vop-nd .verliefdOpCategorietitel.verliefdOpPijl a { display:inline-flex !important; align-items:center; justify-content:center; gap:.45em; width:auto !important; max-width:100%; border-bottom:0 !important; border-radius:var(--r-pill); text-decoration:none !important; background:linear-gradient(135deg,var(--c-sun-500),var(--c-coral-500)) !important; color:#fff !important; font-family:var(--f-head) !important; font-style:normal !important; font-weight:700 !important; font-size:1rem !important; line-height:1.2 !important; padding:12px 28px !important; text-align:center !important; box-shadow:0 6px 16px rgba(238,113,37,.28); transition:transform .2s var(--ease),box-shadow .2s var(--ease); } .vop-nd .verliefdOpCategorietitel a:hover { transform:translateY(-2px); box-shadow:0 10px 22px rgba(238,113,37,.38); } /* 6. Redenen: teaser-tekst normaal gewicht (niet dik). */ .vop-nd .verliefdOpHighlights .verliefdOpLand, .vop-nd .verliefdOpHighlights .verliefdOpLand * { font-weight:400 !important; } /* ── Zoekresultaten (.verliefdOpZoekResulaat — de search-filter resultaten) ─ */ .vop-nd .zoekresultaten-container { display:grid; grid-template-columns:1fr; gap:18px; } /* alleen de TOP-LEVEL resultaatkaarten (niet de geneste "Bekijk"-wrapper die dezelfde class deelt) */ .vop-nd .zoekresultaten-container > .verliefdOpZoekResulaat { background:#fff !important; border:1px solid var(--line) !important; border-radius:var(--r) !important; overflow:hidden; box-shadow:var(--sh-1); width:auto !important; max-width:none !important; margin:0 !important; padding:0 !important; transition:transform .2s var(--ease),box-shadow .2s var(--ease); } .vop-nd .zoekresultaten-container > .verliefdOpZoekResulaat:hover { transform:translateY(-4px); box-shadow:var(--sh-2); } .vop-nd .zoekresultaten-container > .verliefdOpZoekResulaat > a { display:grid; grid-template-columns:1fr; text-decoration:none !important; color:inherit; } @media (min-width:720px){ .vop-nd .zoekresultaten-container > .verliefdOpZoekResulaat > a { grid-template-columns:270px 1fr; } } /* "Bekijk"-CTA in de kaart: geen kader/box (die kreeg 'ie van de kaart-regel), maar een schone oranje pill rechtsonder */ .vop-nd .zoekResultaatCluster .verliefdOpCategorieTitelWrapper { border:0 !important; background:none !important; box-shadow:none !important; width:auto !important; padding:0 !important; position:absolute !important; bottom:20px; right:24px; margin:0 !important; display:inline-block; } .vop-nd .zoekResultaatCluster .verliefdOpCategorietitel { display:inline-block !important; margin:0 !important; background:linear-gradient(135deg,var(--c-sun-500),var(--c-coral-500)) !important; color:#fff !important; font-family:var(--f-head); font-weight:700; font-size:.9rem; padding:9px 22px !important; border-radius:var(--r-pill); box-shadow:0 4px 12px rgba(238,113,37,.28) !important; transition:transform .18s var(--ease),box-shadow .18s var(--ease); } .vop-nd .zoekResultaatCluster .verliefdOpCategorietitel:hover { transform:translateY(-2px); box-shadow:0 8px 18px rgba(238,113,37,.4); } .vop-nd .zoekResultaatCluster .zoekResultaatPrijs { position:static !important; right:auto !important; bottom:auto !important; left:auto !important; margin-top:auto !important; margin-left:0 !important; margin-right:auto !important; margin-bottom:0 !important; align-self:flex-start !important; text-align:left !important; width:auto !important; color:var(--c-coral-500) !important; font-family:var(--f-head) !important; font-weight:800 !important; font-size:1.2rem !important; } .vop-nd .zoekResultaatPrijs .zoekresultaat { color:var(--c-coral-500) !important; } .vop-nd img.verliefdOpZoekResulaat { width:100% !important; height:100% !important; min-height:180px; max-width:none !important; object-fit:cover; display:block; margin:0 !important; border-radius:0 !important; } .vop-nd .zoekResultaatCluster { position:relative; padding:20px 24px 22px; display:flex; flex-direction:column; gap:10px; } /* titel + review-cirkel */ .vop-nd .titelResultaat { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin:0; } .vop-nd h3.verliefdOpZoekResulaat { color:var(--c-coral-500) !important; font-family:var(--f-head) !important; font-weight:700 !important; font-size:1.3rem !important; line-height:1.2; margin:0 !important; } .vop-nd .zoekResultaatBeoordeling { margin:0 !important; flex:0 0 auto; } .vop-nd .zoekResultaatBeoordeling .zoekresultaat { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; background:var(--c-gold-500); color:#fff; font-family:var(--f-head); font-weight:800; font-size:.85rem; box-shadow:0 2px 8px rgba(0,0,0,.18); } /* sterren */ .vop-nd .verliefdOpZoekResulaat .verliefdOpSterren { margin:0 !important; line-height:1; } .vop-nd .verliefdOpZoekResulaat img.sterretje { width:16px !important; height:16px !important; display:inline-block !important; } /* locatie */ .vop-nd .bestemmingZoekresultaat { display:flex; flex-wrap:wrap; gap:2px 8px; } .vop-nd .bestemmingZoekresultaat p { margin:0 !important; color:var(--muted) !important; font-size:.9rem; } .vop-nd .bestemmingZoekresultaat p:not(:last-child)::after { content:"·"; margin-left:8px; color:var(--line); } /* thema-tags → schone chips */ .vop-nd .zoekResultaatThemaTags { display:flex !important; flex-wrap:wrap; gap:8px; margin:4px 0 !important; padding:0 !important; } .vop-nd .zoekResultaatThemaTags .zoekresultaat { background:var(--mist) !important; color:var(--c-sea-700) !important; border:1px solid var(--line) !important; border-radius:var(--r-pill) !important; padding:4px 12px !important; font-size:.78rem !important; font-weight:600 !important; line-height:1.4; } /* prijs koraal, rechtsonder */ .vop-nd .zoekResultaatPrijs { color:var(--c-coral-500) !important; font-family:var(--f-head) !important; font-weight:800 !important; font-size:1.15rem !important; margin:auto 0 0 auto !important; } /* sort-dropdown al gestyled via .vop-nd select */ /* ── WP-zoekpagina (/?s=…): query-loop-kaarten → nette witte kaarten ─ */ body.search main .wp-block-post { background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--sh-1); display:flex; flex-direction:column; transition:transform .2s var(--ease),box-shadow .2s var(--ease); } body.search main .wp-block-post:hover { transform:translateY(-4px); box-shadow:var(--sh-2); } body.search .wp-block-post-featured-image { margin:0 !important; } body.search .wp-block-post-featured-image img { width:100%; aspect-ratio:16/10; object-fit:cover; display:block; border-radius:0 !important; } body.search .wp-block-post-title { padding:16px 20px 0 !important; margin:0 !important; } body.search .wp-block-post-title a { color:var(--c-sea-700) !important; font-family:var(--f-head); font-size:1.15rem !important; font-weight:700; line-height:1.25; text-decoration:none; } body.search .wp-block-post-title a:hover { color:var(--c-sun-500) !important; } body.search .wp-block-post-excerpt { padding:8px 20px 0 !important; } body.search .wp-block-post-excerpt p { color:var(--muted) !important; font-size:.9rem; } body.search .wp-block-post .wp-block-spacer { display:none !important; } body.search main h1,body.search main .wp-block-query-title { color:var(--c-sea-700); } /* Het ronde logo hangt onder de oranje balk uit. Op de zoekresultaten begint de inhoud direct onder die balk, waardoor het logo over de kop heen viel. De kop schuift met de schermbreedte mee tot net onder het logo. */ body.search main h1,body.search main .wp-block-query-title{padding-top:clamp(1.25rem,6vw,4.5rem)} /* ── Focus & motion ─────────────────────────────────────────────── */ .vop-nd a:focus-visible,.vop-nd button:focus-visible { outline:2px solid var(--c-sun-500); outline-offset:2px; border-radius:4px; } @media (prefers-reduced-motion:reduce){ .vop-nd *{ transition:none !important; } } /* Kolombreedtes van de promokaartjes, ook als klasse. Het id stuurde die breedte aan, maar dezelfde sleutel kon op een pagina meerdere keren voorkomen. De kaartjes dragen de sleutel nu ook als klasse, zodat herhalingen hun breedte houden terwijl het id uniek blijft. */ @media only screen and (min-width: 1024px) { .verliefdOpTop6Deal1 { width:61.7%; height:auto; } .verliefdOpTop6Deal8, .verliefdOpTop6Deal9, .verliefdOpTop6Deal10, .verliefdOpTop6Deal11 { width:23%; height:auto; } } /* Marges van de fotostroken, ook als klasse. Deze marges hingen aan ids die op dezelfde pagina tot twaalf keer voorkwamen. De blokken dragen de sleutel nu als klasse. */ @media only screen and (min-width: 640px) { .verliefdOpFoto1, .verliefdOpFoto3, .verliefdOpFoto5 { margin:0 0.5% 0 0; } .verliefdOpFoto2, .verliefdOpFoto4 { margin:0 0 0 0.5%; } } /* Spiegels van id-opmaak, zodat een tweede blok van hetzelfde type dezelfde plaats houdt zonder het id te hergebruiken. */ @media only screen and (min-width: 640px) { } .prevNieuw { right: -2% !important; } .nextNieuw { left: 83% !important; bottom: 0 !important; } @media only screen and (min-width: 640px) { .nextNieuw { left: 88% !important; } } @media only screen and (min-width: 768px) { .nextNieuw { left: 86.5% !important; } } @media only screen and (min-width: 1024px) { .prevNieuw { right: 4.5% !important; } .nextNieuw { left: 95.5% !important; } } @media only screen and (min-width: 1200px) { .nextNieuw { left: 96.5% !important; } } @media only screen and (min-width: 1400px) { .prevNieuw { right: 4% !important; } } @media only screen and (min-width: 1500px) { .prevNieuw { right: 3.5% !important; } .nextNieuw { left: 97% !important; } } @media only screen and (min-width: 1600px) { .prevNieuw { right: 3.5% !important; } .nextNieuw { left: 97% !important; } } @media only screen and (min-width: 2200px) { .nextNieuw { left: 97.5% !important; } } /* De aanbiederblokken dragen hun merk in data-aanbieder in plaats van in een id, zodat twee aanbiedingen van dezelfde aanbieder op een pagina kunnen staan. */ .verliefdOpAanbieder[data-aanbieder="Suntip"] { background: rgb(253, 195, 0); } .verliefdOpAanbieder[data-aanbieder="voordeeluitjes"] { background: rgb(228, 0, 126); } /* ---------- Filterknop: tekst meer lucht ---------- */ button.btn.btn-primary.vop-zoekKnop{ padding: 13px 30px !important; min-width: 200px; line-height: 1.2 !important; box-shadow: 0 6px 16px rgba(238,113,37,.32), inset 0 1px 0 rgba(255,255,255,.25) !important; } button.btn.btn-primary.vop-zoekKnop:hover{ transform: translateY(-1px) !important; background-image: linear-gradient(#f28035,#e06a1e) !important; box-shadow: 0 10px 22px rgba(238,113,37,.40), inset 0 1px 0 rgba(255,255,255,.3) !important; } button.btn.btn-primary.vop-zoekKnop:active{ transform: translateY(0) !important; } button.btn.btn-primary.vop-zoekKnop:focus-visible{ outline: 3px solid rgba(26,92,119,.45); outline-offset: 3px; } /* ---------- Filter: uitklapmenu ---------- */ div.multiselect-dropdown{ position: relative !important; transition: border-color .15s ease, box-shadow .15s ease; } div.multiselect-dropdown:hover{ border-color: #ee7125 !important; } div.multiselect-dropdown:has(> .multiselect-dropdown-list-wrapper[style*="block"]){ border-color: #ee7125 !important; box-shadow: 0 0 0 3px rgba(238,113,37,.15) !important; } /* Het paneel stond als eerste kind in de flow, dus boven het veld zelf. */ div.multiselect-dropdown .multiselect-dropdown-list-wrapper{ position: absolute !important; top: calc(100% + 6px) !important; left: 0 !important; right: 0 !important; width: auto !important; z-index: 140 !important; border: 1px solid rgba(26,92,119,.14) !important; border-radius: 14px !important; box-shadow: 0 14px 30px rgba(16,56,72,.16), 0 2px 6px rgba(16,56,72,.08) !important; padding: 6px !important; overflow: hidden !important; animation: voaiFilterOpen .15s cubic-bezier(.22,.61,.36,1); } @keyframes voaiFilterOpen{ from{ opacity:0; transform: translateY(-6px); } to{ opacity:1; transform:none; } } /* De lib zet hier height:15rem op, ook bij drie opties: vandaar het lege wit. */ div.multiselect-dropdown .multiselect-dropdown-list{ height: auto !important; max-height: 15rem !important; padding: 2px !important; overflow-y: auto !important; scrollbar-width: thin; scrollbar-color: #c4d8e2 transparent; } div.multiselect-dropdown .multiselect-dropdown-list::-webkit-scrollbar{ width: 8px; } div.multiselect-dropdown .multiselect-dropdown-list::-webkit-scrollbar-thumb{ background: #c4d8e2; border-radius: 99px; border: 2px solid #fff; } div.multiselect-dropdown .multiselect-dropdown-list > div{ display: flex !important; align-items: center !important; gap: 10px !important; padding: 9px 10px !important; border-radius: 10px !important; border-bottom: 0 !important; cursor: pointer; transition: background .12s ease; } div.multiselect-dropdown .multiselect-dropdown-list > div:hover{ background: #fdf1e8 !important; } div.multiselect-dropdown .multiselect-dropdown-list > div:has(input:checked){ background: #fff4ec !important; } div.multiselect-dropdown .multiselect-dropdown-list > div input[type=checkbox]{ width: 17px !important; height: 17px !important; margin: 0 !important; flex: 0 0 17px; accent-color: #ee7125; cursor: pointer; } div.multiselect-dropdown .multiselect-dropdown-list > div label{ font-size: 14px !important; color: #16323d !important; cursor: pointer !important; flex: 1; line-height: 1.3 !important; padding: 0 !important; } div.multiselect-dropdown .multiselect-dropdown-search{ border: 1px solid #d9e6ed !important; border-radius: 10px !important; padding: 8px 12px !important; margin: 2px 2px 6px !important; width: calc(100% - 4px) !important; font-size: 14px !important; } /* ---------- Meer lucht tussen filterkolom en resultaten ---------- */ @media (min-width: 1024px){ .resultatenCluster > .zoekresultaten-container{ box-sizing: border-box !important; margin-left: 0 !important; padding-left: 30px !important; } } /* ---------- Populaire filterwaarden bovenaan het uitklapmenu ---------- */ div.multiselect-dropdown .multiselect-dropdown-list .featured-clone{ padding: 9px 10px !important; border-radius: 10px !important; border-bottom: 0 !important; gap: 10px !important; transition: background .12s ease; } div.multiselect-dropdown .multiselect-dropdown-list .featured-clone:hover{ background: #fdf1e8 !important; } div.multiselect-dropdown .multiselect-dropdown-list .featured-clone .featured-checkbox{ width: 17px !important; height: 17px !important; flex: 0 0 17px !important; border: 2px solid #9bb6c3 !important; border-radius: 5px !important; } div.multiselect-dropdown .multiselect-dropdown-list .featured-clone.checked .featured-checkbox{ background: #ee7125 !important; border-color: #ee7125 !important; } div.multiselect-dropdown .multiselect-dropdown-list .featured-clone label{ display: flex !important; align-items: center; gap: 8px; flex: 1; font-size: 14px !important; color: #16323d !important; cursor: pointer; } div.multiselect-dropdown .multiselect-dropdown-list .featured-clone .featured-text{ order: 1; } div.multiselect-dropdown .multiselect-dropdown-list .featured-clone .featured-badge{ order: 2; margin-left: auto; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #c25e1d; background: #fdeadd; border-radius: 99px; padding: 3px 9px; line-height: 1; white-space: nowrap; } div.multiselect-dropdown .multiselect-dropdown-list .featured-clone + div:not(.featured-clone){ border-top: 1px solid rgba(26,92,119,.13); margin-top: 7px; padding-top: 13px !important; } /* ---------- Filterlijst: zoekveld, aantallen en uitgegrijsde opties ---------- */ /* De lib verbergt rijen met een inline display:none; die moet door het flexvoorschrift heen. */ div.multiselect-dropdown .multiselect-dropdown-list > div[style*="display: none"]{ display: none !important; } div.multiselect-dropdown .multiselect-dropdown-list > div label{ display: flex !important; align-items: center; gap: 8px; } div.multiselect-dropdown .multiselect-dropdown-list .voai-tel{ margin-left: auto; font-size: 11.5px; font-weight: 600; color: #5d7f90; background: #eef4f7; border-radius: 99px; padding: 2px 8px; line-height: 1.55; flex: 0 0 auto; } /* Opties zonder resorts verdwijnen uit de lijst. */ div.multiselect-dropdown .multiselect-dropdown-list > div.inactiveCheckbox, div.multiselect-dropdown .multiselect-dropdown-list > div.disabled-option{ display: none !important; } /* Lege opties die de widget zelf niet als zodanig markeert, zoals bij Land: weggelaten door inc/vop-zoekfilter.php. */ div.multiselect-dropdown .multiselect-dropdown-list > div.voaiLeegFilter{ display: none !important; } /* Behalve bij Regio en Plaats: daar blijft het hele aanbod in beeld, grijs, met de eigen plaatsen bovenaan. */ #plaatsGroep .multiselect-dropdown-list > div.inactiveCheckbox:not([style*="display: none"]), #regioGroep .multiselect-dropdown-list > div.inactiveCheckbox:not([style*="display: none"]), #mob-plaatsGroep .multiselect-dropdown-list > div.inactiveCheckbox:not([style*="display: none"]), #mob-regioGroep .multiselect-dropdown-list > div.inactiveCheckbox:not([style*="display: none"]){ display: flex !important; opacity: .4; } /* Het paneel is minstens 230 px breed, ook als het veld smaller is zoals in de balk op de voorpagina. */ div.multiselect-dropdown .multiselect-dropdown-list-wrapper{ min-width: 230px; max-width: 86vw; } div.multiselect-dropdown .multiselect-dropdown-search{ background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237d99a8' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 11px center !important; padding-left: 36px !important; } div.multiselect-dropdown .multiselect-dropdown-search:focus{ outline: none !important; border-color: #ee7125 !important; box-shadow: 0 0 0 3px rgba(238,113,37,.15) !important; } /* ---------- Blokken van de nieuwe resortpagina's (vergelijkingstabel en feitenblok) ---------- */ .voaiFeiten{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin:0 0 1.25rem} .voaiFeit{background:#f6f9fb;border-left:4px solid #fcb420;border-radius:5px;padding:.7rem .9rem} .voaiLabel{display:block;font-family:Raleway,sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:#1a5c77;margin-bottom:.15rem} .voaiWaarde{display:block;line-height:1.5;font-size:1rem;color:#1a5c77} .voaiTabelWrap{overflow-x:auto;border:1px solid #e3e9ed;border-radius:5px;margin:0 0 1rem} .voaiVergelijk{width:100%;border-collapse:collapse;font-size:.95rem} .voaiVergelijk th{background:#1a5c77;color:#fff;font-family:Raleway,sans-serif;font-weight:700;text-align:left;padding:.6rem .8rem;white-space:nowrap} .voaiVergelijk th,.voaiVergelijk td{box-sizing:border-box} .voaiVergelijk td{color:#1a5c77} .voaiVergelijk td{padding:.6rem .8rem;border-bottom:1px solid #e3e9ed;vertical-align:top} .voaiVergelijk tbody tr:last-child td{border-bottom:none} .voaiVergelijk tbody tr:nth-child(even) td{background:#f6f9fb} .voaiVergelijk tr.voaiHuidig td{background:#fff6e2;border-bottom-color:#fcb420} .voaiVergelijk tr.voaiHuidig td:first-child{box-shadow:inset 4px 0 0 #fcb420} .voaiPrijs{font-weight:700;color:#1a5c77} .voaiPrijsWrap{display:block} .voaiPrijsLink{color:#1a5c77;text-decoration:none;border-bottom:1px solid #fcb420;white-space:nowrap} .voaiPrijsLink:hover{border-bottom-color:#ee7125} .voaiAanbieder{display:block;margin-top:.15rem;font-size:.78rem;font-weight:400;color:#5b6b75;line-height:1.3} .voaiHier{display:inline-block;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;background:#fcb420;color:#333;border-radius:5px;padding:.1rem .4rem;margin-left:.3rem;vertical-align:middle} @media only screen and (max-width:639px){.voaiFeiten{grid-template-columns:1fr} .voaiVergelijk thead{display:none} .voaiVergelijk,.voaiVergelijk tbody,.voaiVergelijk tr,.voaiVergelijk td{display:block;width:100%} .voaiVergelijk tr{box-sizing:border-box;border:1px solid #e3e9ed;border-radius:5px;overflow:hidden;margin-bottom:.75rem} .voaiVergelijk tr:last-child{margin-bottom:0} .voaiVergelijk td{border-bottom:1px solid #eef2f5;display:flex;justify-content:space-between;gap:1rem} .voaiVergelijk td:before{content:attr(data-l);font-weight:700;color:#1a5c77;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em} .voaiVergelijk td.voaiPrijs .voaiPrijsWrap{text-align:right} .voaiTabelWrap{overflow-x:visible;border:none;border-radius:0}} /* ---------- Informatie en faciliteiten: een regel per onderwerp ---------- */ ul.verliefdOpResortVisuals li.verliefdOpFAQ.voaiFacRij > p.verliefdOpLand{ display: none !important; } /* Kamertypes en andere eigen blokken vallen binnen hun categorie, niet als losse kaart - 02-11-2026 */ .vop-nd ul.voaiFacSubs{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;flex-wrap:nowrap;gap:8px;flex:0 0 100%;width:100%} .vop-nd ul.voaiFacSubs > li.voaiFacSubRij{margin:0;padding:0;border:1px solid rgba(26,92,119,.14);border-radius:10px;background:#fbfdfe;overflow:hidden} .vop-nd ul.voaiFacSubs > li.voaiFacSubRij > p.verliefdOpLand{display:flex !important;align-items:center;justify-content:space-between;gap:10px;margin:0 !important;padding:10px 14px !important;color:#16323d;font-family:var(--f-head);font-weight:700;font-size:.95rem;cursor:pointer;box-sizing:border-box;width:100%;max-width:100%} .vop-nd ul.voaiFacSubs > li.voaiFacSubRij > div.verliefdOpLandIntroOnderUitklap{padding:0 14px 12px} /* geneste vraagregels in een paneel liepen op telefoonbreedte buiten de kaart - 02-11-2026 */ .vop-nd .verliefdOpLandIntroOnderUitklap p.verliefdOpLand{box-sizing:border-box;max-width:100%} /* de knop Bekijk meer in deze panelen doet niets: de fotolijst staat er al volledig in - 02-11-2026 */ .vop-nd .verliefdOpLandIntroOnderUitklap > p.verliefdOpUitklaphulp{display:none !important} /* het label op een tegel erfde line-height 0 van de fotowikkel, waardoor twee regels op elkaar vielen - 02-11-2026 */ .vop-nd .verliefdOpHotelTegeltje > div.verliefdOpTopResort{line-height:1.25} .vop-nd .verliefdOpHotelTegeltje > div.verliefdOpTopResort p.verliefdOpTopResortTitel{line-height:1.25} ul.verliefdOpResortVisuals li.voaiFacKop{ margin: 0 0 8px !important; } ul.verliefdOpResortVisuals li.voaiFacKop .verliefdOpHighlightsBlokje{ display: flex !important; align-items: center; gap: 10px; margin: 0 !important; padding: 12px 16px !important; border: 1px solid rgba(26,92,119,.16); border-radius: 10px; background: #fff; color: #16323d !important; font-size: 1rem !important; font-weight: 700 !important; text-transform: none !important; cursor: pointer; transition: border-color .15s ease, background .15s ease; } ul.verliefdOpResortVisuals li.voaiFacKop .verliefdOpHighlightsBlokje:hover{ border-color: #ee7125; background: #fffaf6; } ul.verliefdOpResortVisuals li.voaiFacKop .verliefdOpHighlightsBlokje:focus-visible{ outline: 3px solid rgba(238,113,37,.35); outline-offset: 2px; } ul.verliefdOpResortVisuals li.voaiFacKop .voaiFacAantal{ font-size: .8rem; font-weight: 600; color: #5d7f90; background: #eef4f7; border-radius: 99px; padding: 2px 9px; line-height: 1.5; } ul.verliefdOpResortVisuals li.voaiFacKop .verliefdOpHighlightsBlokje::after{ content: ""; margin-left: auto; width: 9px; height: 9px; border-right: 2px solid #c25e1d; border-bottom: 2px solid #c25e1d; transform: rotate(45deg) translate(-2px,-2px); transition: transform .2s ease; } ul.verliefdOpResortVisuals li.voaiFacKop:has(+ li .verliefdOpUitgeklapt) .verliefdOpHighlightsBlokje::after{ transform: rotate(-135deg) translate(-3px,-3px); } ul.verliefdOpResortVisuals li.verliefdOpFAQ .verliefdOpLandIntroOnderUitklap{ padding: 4px 4px 10px !important; } ul.verliefdOpResortVisuals ul.verliefdOpInfoOnderUitklap{ display: grid !important; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); padding: 0 !important; margin: 6px 0 0 !important; } ul.verliefdOpResortVisuals ul.verliefdOpInfoOnderUitklap > li{ margin: 0 !important; width: auto !important; max-width: none !important; min-width: 0 !important; justify-self: stretch !important; } ul.verliefdOpResortVisuals p.verliefdOpInfoOnderUitklap{ background: none !important; border: 0 !important; border-radius: 0 !important; font-size: .9rem !important; line-height: 1.55 !important; width: auto !important; max-width: none !important; } /* Sterren en het beoordelingscijfer op een lijn boven de faciliteiten. */ ul.verliefdOpResortVisuals li.verliefdOpSterretjes{ display: flex !important; align-items: center !important; gap: 12px !important; margin: 12px 0 16px !important; } ul.verliefdOpResortVisuals li.verliefdOpSterretjes p.verliefdOpSterren{ display: flex !important; align-items: center !important; gap: 3px; margin: 0 !important; padding: 0 !important; height: auto !important; min-height: 0 !important; line-height: 1 !important; width: auto !important; top: 0 !important; left: 0 !important; } ul.verliefdOpResortVisuals li.verliefdOpSterretjes p.verliefdOpSterren img.sterretje{ width: 18px !important; height: 18px !important; margin: 0 !important; position: static !important; } ul.verliefdOpResortVisuals li.verliefdOpSterretjes p.verliefdOpSterren.sterrenGroot{ width: 38px !important; height: 38px !important; flex: 0 0 38px; justify-content: center; font-size: .85rem !important; margin-top: 0 !important; top: 0 !important; } /* Drie resortfoto's: bij twee kolommen loopt de derde over de volle breedte, zodat er geen gat valt. */ .verliefdOpResortFotos div:has(> .verliefdOpTop6Deals){ container-type: inline-size; } @container (min-width: 604px) and (max-width: 919px){ .verliefdOpTop6Deals:not(:has(> .verliefdOpTop6Deal:nth-of-type(4))) > .verliefdOpTop6Deal:nth-of-type(3){ grid-column: 1 / -1; } .verliefdOpTop6Deals:not(:has(> .verliefdOpTop6Deal:nth-of-type(4))) > .verliefdOpTop6Deal:nth-of-type(3) img{ aspect-ratio: 32 / 10 !important; } } /* Vaste zoekbalk onderaan de mobiele resortpagina: eigen witte balk, zoals op live. */ div#mobielModalSearchBox2{ background:#fff!important; border-top:3px solid rgba(26,92,119,.39)!important; border-top-left-radius:5px; border-top-right-radius:5px; padding:12px 16px!important; box-shadow:0 -4px 14px rgba(16,56,72,.10)!important; overflow-x:hidden; } div#mobielModalSearchBox2 p.mobielModalSearchBox{ margin:0!important; } /* Mobiel: de introzin in de aanbiederskaart krijgt de volle breedte, het cijfer zweeft rechts. */ @media (max-width:560px){ .verliefdOpResortIntro{ display:block!important; } .verliefdOpResortIntro > p.verliefdOpSterren.sterrenGroot{ float:right!important; margin:0 0 8px 14px!important; } .verliefdOpResortIntro > p.verliefdOpSubTitel, .verliefdOpResortIntro > p.verliefdOpSubtitel{ margin-left:0!important; width:auto!important; } } /* "Bekijk meer" onder de resortfoto's als pil, en sterren plus cijfer blijven naast elkaar. */ p.verliefdOpUitklaphulp{ margin:12px 0 0!important; text-align:center!important; } p.verliefdOpUitklaphulp .verliefdOpFotoUitklap{ display:inline-flex!important; align-items:center; gap:8px; padding:9px 18px; border:1px solid rgba(26,92,119,.18); border-radius:99px; background:#fff; color:#16323d!important; font-size:.9rem; font-weight:600; text-decoration:none!important; cursor:pointer; box-shadow:0 2px 6px rgba(16,56,72,.06); } p.verliefdOpUitklaphulp .verliefdOpFotoUitklap svg{ width:16px!important; height:16px!important; color:#c25e1d; fill:#c25e1d!important; flex:0 0 16px; } ul.verliefdOpResortVisuals li.verliefdOpSterretjes{ justify-content:flex-start!important; } /* Footer: onder 1100px breken de vier kolommen naar twee brede kolommen, zodat links niet meer over twee regels vallen. */ @media (max-width:1100px){ .verliefdOpFooter{ flex-wrap:wrap!important; gap:28px 36px!important; } ul.verliefdOpFooter{ flex:1 1 240px!important; min-width:220px; max-width:100%; } } /* Twee of meer alinea's achter elkaar: het thema zet ze op display:contents, waardoor ze aan elkaar plakken. */ p.verliefdOpLandIntro:has(+ p.verliefdOpLandIntro), p.verliefdOpLandIntro + p.verliefdOpLandIntro{ display:block!important; } /* Panelen op de resortpagina: minder lucht boven en onder, en de inhoud niet tegen de rand. De negatieve marges houden kop en tekst op dezelfde lijn als de rest van de pagina. */ main section.verliefdOpPopulaireLanden.verliefdOpResortFotos{ padding:26px 30px!important; margin-left:-30px!important; margin-right:-30px!important; } main section.verliefdOpResortFotos > h2:first-child{ margin-top:0!important; } main section.verliefdOpResortFotos > *:last-child{ margin-bottom:0!important; } @media (max-width:640px){ main section.verliefdOpPopulaireLanden.verliefdOpResortFotos{ padding:20px 16px!important; margin-left:-16px!important; margin-right:-16px!important; } } /* Mobiel: "Lees verder" achter de eerste dertig woorden van de resortintro. */ .voaiLeesVerder{ color:#c25e1d; font-weight:600; text-decoration:underline; cursor:pointer; white-space:nowrap; } .voaiLeesVerder:hover{ color:#a84f18; } /* Het pijltje in de fotoknop optisch centreren en omklappen als de foto's openstaan. */ p.verliefdOpUitklaphulp .verliefdOpFotoUitklap svg{ position:relative!important; top:-1px; transition:transform .2s ease; } .verliefdOpTop6Deals[data-voai="open"] p.verliefdOpUitklaphulp .verliefdOpFotoUitklap svg{ transform:rotate(180deg); } /* Het pijltje in de oranje boekknop stond 12px te laag door een regel uit de plugin. */ .verliefdOpCategorietitel a svg{ position:static!important; top:auto!important; } ul.verliefdOpLijst{ margin:0 0 1rem; padding-left:1.1rem; } ul.verliefdOpLijst li{ margin:0 0 .45rem; } /* De mobiele zoekbalk blijft wel een witte pil. Platte tekst op de herofoto is niet te vinden; op de live site staat hij er ook zo. Alleen op mobiel: op desktop staat het volledige filterformulier eronder. */ @media (max-width:899px){ .vop-nd div#mobielModalSearchBox1{ box-sizing:border-box; background:#fff !important; border-radius:999px !important; padding:12px 18px !important; box-shadow:0 6px 18px rgba(16,56,72,.18) !important; margin-top:22px !important; display:flex !important; align-items:center; justify-content:center; width:100%; max-width:520px; } .vop-nd div#mobielModalSearchBox1 p.mobielModalSearchBox{ margin:0 !important; display:flex !important; align-items:center; gap:10px; justify-content:center; color:#16323d !important; text-shadow:none !important; font-weight:600; text-align:center; } .vop-nd div#mobielModalSearchBox1 .zoekIcoontje{ width:16px !important; height:16px !important; flex:0 0 16px; } } /* De hero hield onderaan een lege strook over: de inhoud is korter dan de ruimte die het oude sjabloon reserveerde. */ .vop-nd section[id*="Achtergrond"]{ padding-bottom:clamp(20px,3vw,28px) !important; } .vop-nd section[id*="Achtergrond"] > section.verliefdOpHoofd{ padding-top:clamp(16px,2vw,24px) !important; padding-bottom:0 !important; } .vop-nd section[id*="Achtergrond"] form.filterPagina{ margin-bottom:12px !important; } /* Smalle telefoons: het aanbiedersregeltje in de tegel moet binnen de kaart blijven. De bredere logokolom paste daar niet meer. */ @media (max-width:480px){ .vop-nd .verliefdOpHotelTegeltje .verliefdOpAanbiederBlokAanbieding{ grid-template-columns:auto fit-content(100%) !important; gap:4px 8px !important; padding:5px 8px !important; } .vop-nd .verliefdOpHotelTegeltje .verliefdOpAanbiederBlokAanbieding img{ width:48px !important; height:48px !important; max-width:48px !important; max-height:48px !important; } .vop-nd .verliefdOpHotelTegeltje .verliefdOpAanbiederBlokAanbieding > *{ min-width:0; } .vop-nd .verliefdOpHotelTegeltje .verliefdOpAanbiederBlokAanbieding > *:first-child{ grid-area:1 / 1 / 3 / 2; align-self:center; } .vop-nd .verliefdOpHotelTegeltje .verliefdOpAanbiederBlokAanbieding p.verliefdOpOranje{ grid-area:2 / 2; } .vop-nd .verliefdOpHotelTegeltje .verliefdOpAanbiederBlokAanbieding p.verliefdOpOranje a{ display:block; text-align:center; } .vop-nd .verliefdOpHotelTegeltje p.verliefdOpAanbiedingTekst{ overflow-wrap:anywhere; } } /* Voorgeselecteerde bestemming: land en regio naast elkaar als losse labels. */ .vop-nd .verliefdOpKeuzes ul{ display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none; } .vop-nd .verliefdOpKeuzes ul li{ margin:0; } .vop-nd .verliefdOpKeuzes ul li a{ color:inherit; text-decoration:none; } .vop-nd .verliefdOpKeuzes ul li a:hover, .vop-nd .verliefdOpKeuzes ul li a:focus-visible{ text-decoration:underline; } /* Twee bestemmingen naast elkaar, met de kerngegevens onder elkaar. */ .voaiDuo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin:0 0 1.25rem} @media (max-width:700px){.voaiDuo{grid-template-columns:1fr}} .voaiDuoKaart{background:#f6f9fb;border-top:4px solid #fcb420;border-radius:5px;padding:1rem 1.1rem} .voaiDuoKaart h3{font-family:Raleway,sans-serif;font-weight:700;font-size:1.05rem;color:#1a5c77;margin:0 0 .5rem} .voaiDuoRegel{display:flex;justify-content:space-between;gap:.75rem;margin:0;padding:.4rem 0;border-top:1px solid #e3e9ed;font-size:.95rem;color:#1a5c77} .voaiDuoRegel:first-of-type{border-top:0} .voaiDuoRegel b{font-weight:700;text-align:right} .voaiDuoKaart .voaiDuoLink{display:inline-block;margin-top:.7rem;font-weight:700} /* Compacte opsomming in blokjes in plaats van een lijst met vetgedrukte koppen. */ .voaiItems{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin:0 0 1.25rem} @media (max-width:900px){.voaiItems{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:560px){.voaiItems{grid-template-columns:1fr}} .voaiItem{background:#f6f9fb;border-radius:5px;padding:.7rem .9rem;color:#1a5c77} .voaiItemKop{display:block;font-family:Raleway,sans-serif;font-weight:700;font-size:.95rem;margin-bottom:.15rem} .voaiItemTekst{display:block;line-height:1.5;font-size:.95rem} /* Op de landpagina staan maar een paar kaartjes, die werden daardoor erg hoog. */ .vop-t-land .verliefdOpTop6Deal img{max-height:180px;object-fit:cover;width:100%} /* Aanbiederregels in de hoteltegels: logo en tekst gecentreerd naast elkaar, de knop daaronder over de volle breedte. De oude indeling liet de knop over de tekst heen vallen zodra de tegel smal werd. */ .vop-nd .verliefdOpHotelTegeltje .verliefdOpAanbiederBlokAanbieding{ display:grid !important; grid-template-columns:auto fit-content(100%); align-items:center; justify-content:center; gap:4px 8px !important; padding:8px 10px !important; text-align:center; } .vop-nd .verliefdOpHotelTegeltje .verliefdOpAanbiederBlokAanbieding > *{min-width:0;margin:0 !important} .vop-nd .verliefdOpHotelTegeltje .verliefdOpAanbiederBlokAanbieding img{width:54px !important;height:54px !important;max-width:54px !important;max-height:54px !important;object-fit:contain !important;display:block} .vop-nd .verliefdOpHotelTegeltje p.verliefdOpAanbiedingTekst{grid-area:1 / 2;width:auto !important;min-width:0;text-align:left;font-size:.88rem;line-height:1.3;overflow-wrap:anywhere} .vop-nd .verliefdOpHotelTegeltje .verliefdOpAanbiederBlokAanbieding p.verliefdOpOranje{grid-area:2 / 2;text-align:center} .vop-nd .verliefdOpHotelTegeltje .verliefdOpAanbiederBlokAanbieding p.verliefdOpOranje a{display:block;width:100%;box-sizing:border-box;text-align:center} .vop-nd .verliefdOpHotelTegeltje .verliefdOpAanbiederBlokAanbieding p.verliefdOpOranje a{padding:.42rem .6rem !important;font-size:.85rem !important;line-height:1.25} .vop-nd .verliefdOpHotelTegeltje div:has(> .verliefdOpAanbiederBlokAanbieding){padding:10px !important;gap:8px !important} .vop-nd .verliefdOpHotelTegeltje .verliefdOpAanbiederBlokAanbieding > *:first-child{grid-area:1 / 1 / 3 / 2;align-self:center} /* De tegels kapten hun eigen inhoud af: het tekstdeel had een vaste maximale hoogte, waardoor de tweede aanbieding half wegviel. De tegel bepaalt zijn hoogte nu zelf en alle tegels in een rij blijven even hoog. */ .vop-nd .verliefdOpHotelTegeltje > div:last-of-type{max-height:none !important} .vop-nd .verliefdOpTop5Deals.slideshow-container{align-items:stretch} /* Het tekstdeel van de tegel had op grote schermen een harde maximale hoogte, waardoor de tweede aanbieding werd afgekapt. Overal uitzetten, met dezelfde gewichtsklasse als de regels die het veroorzaakten. */ body.vop-nd .verliefdOpTop5Deal.verliefdOpHotelTegeltje > div:last-of-type, body.vop-nd .verliefdOpHotelTegeltjesNieuw .verliefdOpTop5Deal.verliefdOpHotelTegeltje > div:last-of-type, body.vop-nd section.verliefdOpNormaal.verliefdOpMaxWidth .verliefdOpTop5Deal.verliefdOpHotelTegeltje > div:last-of-type{ max-height:none !important; height:auto !important; } /* 03-11-2026: de maximale hoogte hierboven is al uitgezet, dus de tegel hoeft niet meer over te lopen. Met zichtbaar overloop stak de foto vierkant over de afgeronde bovenhoeken heen. */ body.vop-nd .verliefdOpTop5Deal.verliefdOpHotelTegeltje{overflow:hidden !important} /* De kruimelpadlinks in de hero staan op een foto en moeten daar wit zijn; met de inktkleur van de lopende tekst vallen ze weg tegen het beeld. */ .vop-nd .verliefdOpHoofd ul.verliefdOpNavigatie a{ color:#fff !important; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; text-decoration-color:rgba(255,255,255,.6); } .vop-nd .verliefdOpHoofd ul.verliefdOpNavigatie a:hover{ color:#fcb420 !important; text-decoration-color:#fcb420; } /* Links in de hero-intro: op de foto moeten ze wit en onderstreept zijn. */ .vop-nd .verliefdOpHoofd .verliefdOpLandIntro a, .vop-nd .verliefdOpHoofd .verliefdOpLandIntroOnderUitklap a{ color:#fff !important; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; text-decoration-color:rgba(255,255,255,.6); } .vop-nd .verliefdOpHoofd .verliefdOpLandIntro a:hover, .vop-nd .verliefdOpHoofd .verliefdOpLandIntroOnderUitklap a:hover{ color:#fcb420 !important; text-decoration-color:#fcb420; } /* "Uitgebreid zoeken" werd met bottom:4.5rem omhoog getrokken; zijn plek in de stroom bleef staan en gaf 72px lege foto onder het filterblok. */ @media only screen and (min-width:1024px){ .vop-nd section[id*="Achtergrond"] form.filterPagina{ margin-bottom:-72px !important; } } /* Tekstlinks in de inhoud: thema-groen vervangen door het blauw van de koppen. */ .vop-nd main a:not([class]), .vop-nd main .voaiDuoLink, .vop-nd main .verliefdOpLijst a, .vop-nd main table a:not([class]){ color:var(--c-sea-700); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; text-decoration-color:rgba(26,92,119,.45); } .vop-nd main a:not([class]):hover, .vop-nd main .voaiDuoLink:hover, .vop-nd main .verliefdOpLijst a:hover, .vop-nd main table a:not([class]):hover{ color:#e83e24; text-decoration-color:#e83e24; } /* "deze pagina" in de vergelijkingstabel stond in #333. */ .vop-nd main .voaiHier{ color:#5b6b75 !important; font-family:var(--f-body); } /* De aanbiedingsregel op de hotelpagina is een link; zelfde tekstkleur als in de tegels. */ .vop-nd main .verliefdOpAanbiederBlokAanbiedingLink{ color:var(--ink) !important; text-decoration:none; } .vop-nd main .verliefdOpAanbiederBlokAanbiedingLink:hover{ color:#e83e24 !important; } /* Koppen en lopende tekst 2px van de kant af, zodat ze niet tegen de rand plakken. */ .vop-nd main section:not(.verliefdOpHoofd) > h2, .vop-nd main section:not(.verliefdOpHoofd) > h3, .vop-nd main section:not(.verliefdOpHoofd) > p, .vop-nd main section:not(.verliefdOpHoofd) > ul.verliefdOpLijst{ padding-left:2px; } /* De intro-alinea had display:contents uit de oude CSS; dan telt padding niet. */ .vop-nd main section:not(.verliefdOpHoofd) > p.verliefdOpIntro, .vop-nd main section:not(.verliefdOpHoofd) > p.verliefdOpLandIntro, .vop-nd main section:not(.verliefdOpHoofd) > p.verliefdOpLand{ display:block !important; padding-left:5px; margin:0 0 .75rem; } /* De alinea achter de lees-verder uitklap zit in een wrapper, dus de regel hierboven met de direct-kindselector raakt hem niet en hij liep 5px naar links uit. */ .vop-nd main section:not(.verliefdOpHoofd) > .verliefdOpLandIntroOnderUitklap > p.verliefdOpIntro, .vop-nd main section:not(.verliefdOpHoofd) > .verliefdOpLandIntroOnderUitklap > p.verliefdOpLandIntro, .vop-nd main section:not(.verliefdOpHoofd) > .verliefdOpLandIntroOnderUitklap > p.verliefdOpLand{ padding-left:5px; } /* Inter heeft minder zijlucht in de letter dan Poppins; lijsten lopen mee met de tekst. */ .vop-nd main section:not(.verliefdOpHoofd) > ul.verliefdOpLijst{ padding-left:5px; list-style-position:inside; } /* De opsommingstekens stonden links buiten het gekleurde vlak. Met de bullet binnen de regel en een hangende inspringing blijft de tekst uitgelijnd met de alinea erboven. */ .vop-nd main section:not(.verliefdOpHoofd) > ul.verliefdOpLijst li{ padding-left:1.15em; text-indent:-1.15em; } /* Hamburger op mobiel. */ /* De header heeft twee navigatieblokken: het kleine menu rechtsboven (rechterMenu, menu "Footer new") en het uitgebreide menu "Nav mobilee" met de gekleurde tegels. Het kleine menu opent een overlay met witte tekst op een witte achtergrond en is daardoor onleesbaar; het uitgebreide menu is wel leesbaar. Onder 600px tonen we dus de hamburger van het uitgebreide menu, rechtsboven in de kop, en verbergen we die van het kleine menu. Vanaf 600px staat het kleine menu horizontaal in de balk en is er geen hamburger nodig. */ @media only screen and (max-width:767px){ /* Het navigatieblok zelf verplaatsen, niet de knop: de nav heeft zelf position:relative en is dus het ankerpunt van de knop. */ header.wp-block-template-part{ position:relative; } header nav:not(.rechterMenu){ /* De oude plugin-CSS (36305.css) zet op deze nav margin-right, width en bottom met een hogere specificiteit; vandaar !important. */ position:absolute !important; top:31px; right:16px; bottom:auto !important; width:auto !important; margin:0 !important; z-index:5; } header nav.rechterMenu > button.wp-block-navigation__responsive-container-open{ display:none !important; } header nav:not(.rechterMenu) > button.wp-block-navigation__responsive-container-open{ display:flex !important; width:24px; height:24px; padding:0; } } @media only screen and (min-width:768px){ header nav:not(.rechterMenu) > button.wp-block-navigation__responsive-container-open{ display:none !important; } } ul.snelKijken{list-style:none;display:flex;flex-wrap:wrap;gap:.5em;padding:0;margin:0 0 1.5em} ul.snelKijken li a{display:inline-block;padding:.45em .9em;border:1px solid #d8d8d8;border-radius:2em;background:#fff;text-decoration:none;font-size:.95em} .vopMeerSchakelaar{position:absolute;left:-9999px;width:1px;height:1px;opacity:0} .vopMeerPil{display:none} @media only screen and (max-width:1023px){ .vopMeerGrid > .verliefdOpTop6Deal:nth-child(n+4){display:none} .vopMeerSchakelaar:checked + .vopMeerGrid > .verliefdOpTop6Deal:nth-child(n+4){display:block} .vopMeerPil{display:inline-block;margin:0 0 1.5em;padding:.55em 1.1em;border:1px solid #d8d8d8;border-radius:2em;background:#fff;font-size:.95em;line-height:1.3;cursor:pointer} .vopMeerSchakelaar:checked ~ .vopMeerPil{display:none} } .vop-nd .verliefdOpNormaal article > section{border:0} .vop-nd .verliefdOpLandIntroOnderUitklap > p{display:block} /* vopMeerGrid-fix */ @media only screen and (min-width:1024px){ .vop-nd section.verliefdOpHotelTegeltjesNieuw, .vop-nd section.verliefdOpMaxWidth section.verliefdOpHotelTegeltjesNieuw{margin-bottom:0} } /* De resorts buiten de tegelrij staan als tekstlijst: geen extra foto's, dus geen extra gewicht op mobiel. */ .vop-nd .verliefdOpResortLijstBlok{margin:1.25rem 0 0;padding:0 5px} .vop-nd .verliefdOpResortLijstBlok h3.verliefdOpLand{margin:0 0 .5rem} .vop-nd ul.verliefdOpResortLijst{margin:0;padding:0;list-style:none;border-top:1px solid #c4d8e2} .vop-nd li.verliefdOpResortRegel{margin:0;padding:.7rem 0;border-bottom:1px solid #e7edf0} .vop-nd .verliefdOpResortRegelKop{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem} .vop-nd a.verliefdOpResortNaam,.vop-nd span.verliefdOpResortNaam{font-weight:600} .vop-nd .verliefdOpResortRegelKop .verliefdOpSterren{display:inline-flex;align-items:center;gap:1px;margin:0;padding:0} .vop-nd .verliefdOpResortRegelKop .verliefdOpSterren .sterretje{width:14px;height:14px} .vop-nd .verliefdOpResortPrijs{margin-left:auto;align-self:flex-start;text-align:right;white-space:nowrap} .vop-nd .verliefdOpResortPrijsLabel{display:block;font-size:.69rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#5b7480} .vop-nd .verliefdOpResortPrijsBedrag{display:block;font-family:Poppins,"Poppins-terugval",-apple-system,system-ui,"Segoe UI",sans-serif;font-weight:800;font-size:1.3rem;line-height:1.15;color:#1a5c77} /* Smal scherm: de naam krijgt een eigen regel en daaronder staan de sterren links en de prijs rechts. Zo breekt er niets meer af en heeft elke regel dezelfde vorm, hoe lang de hotelnaam ook is. */ @media (max-width:640px){ .vop-nd .verliefdOpResortRegelKop{display:grid;grid-template-columns:1fr auto;align-items:baseline;column-gap:.6rem;row-gap:.3rem} .vop-nd .verliefdOpResortRegelKop a.verliefdOpResortNaam,.vop-nd .verliefdOpResortRegelKop span.verliefdOpResortNaam{grid-column:1/-1} .vop-nd .verliefdOpResortRegelKop .verliefdOpSterren{grid-column:1;justify-self:start} .vop-nd .verliefdOpResortPrijs{grid-column:2;justify-self:end;align-self:baseline;margin-left:0} .vop-nd .verliefdOpResortPrijsLabel{display:inline} .vop-nd .verliefdOpResortPrijsBedrag{display:inline;font-size:1.12rem} } .vop-nd p.verliefdOpResortZin{margin:.2rem 0 0;padding:0;color:#5b7480} /* aanbiederblok-binnenruimte: onder 640px heeft de kaart geen breedtebeperking, waardoor de tekst tegen de rand van de kaart aan liep. */ @media only screen and (max-width:639px){ } /* Kopfoto voor pagina s waar de achtergrondregel ontbrak - 30-10-2026 */ /* Headertekst een stap rustiger */ .vop-nd .verliefdOpIntro p{line-height:1.65} .vop-nd main p.verliefdOpLand,.vop-nd main p.verliefdOpTitel{font-family:var(--f-body);font-weight:400;letter-spacing:normal;line-height:1.6} /* Kaarttitels in het infoblok lazen als gewone tekst - 09-11-2026 */ .vop-nd .verliefdOpHomepageInfo p.verliefdOpTitel{font-family:var(--f-head);font-size:1.15rem;font-weight:700;color:var(--c-sea-700);line-height:1.3;letter-spacing:-0.01em;margin:0 0 .4rem} /* Ruimte binnen de vergelijk-kaart: tekst en knoppen niet tegen de rand - 01-11-2026 */ .vop-nd .verliefdOpAanbiederBlok{box-sizing:border-box;padding-left:16px;padding-right:16px} /* Eigen foto in het informatieblok: daar staat verliefdOpTop6Deal op de img zelf, waardoor de dealtegelregel de begrenzing weghaalde - 02-11-2026 */ .vop-nd .verliefdOpFoto img.verliefdOpTop6Deal{width:100%!important;max-width:100%!important;height:auto!important;display:block;border:0;box-shadow:none;background:none!important;border-radius:var(--r)} /* Knoppenlijsten (Type-sectie, Andere pagina s) hadden als enige geen kader om hun inhoud: op een witte sectie zweefden de knoppen los tussen twee blokken. Op een grijze sectie zit dat kader er al omheen, dus daar krijgt de lijst er geen tweede - 02-11-2026 */ .vop-nd ul.snelKijken{background:var(--mist);border-radius:var(--r-lg);padding:1rem 1.1rem;margin:0 0 1.5em} .vop-nd .verliefdOpNormaal > section:nth-of-type(even) ul.snelKijken{background:none;border-radius:0;padding:0;margin-bottom:0} /* 03-11-2026: de tegelfoto had een eigen ronding van 5px binnen een kaart van 16px, waardoor er in de bovenhoeken een witte sikkel bleef staan. De foto volgt nu de kaart. */ .vop-nd .verliefdOpTop6Deal > img{border-top-left-radius:inherit;border-top-right-radius:inherit} /* 03-11-2026: de pil op de hoteltegel was 80px hoog. De oude CSS zette op de alinea erbinnen 1rem tekst en 0,5rem opvulling, plus de gewone alineamarge van 16px. De alinea volgt nu de pil zelf, die al op 0,78rem met 6px opvulling staat. */ .vop-nd .verliefdOpTopResort p.verliefdOpTopResortTitel{font-size:inherit;line-height:inherit;margin:0;padding:0;border-radius:0} /* 03-11-2026: de knopregel hierboven geldt ook voor button[type=submit] en gaf de zoekknop in het zijmenu een bovenmarge van 10px. In een flexrij hoort die knop gewoon gecentreerd, met dezelfde speling rechts als boven en onder. */ .vop-nd .wp-block-search__inside-wrapper{align-items:center} .vop-nd .wp-block-search__inside-wrapper button[type="submit"]{margin-top:0;margin-bottom:0;margin-right:0} /* De zichtbare helft van een intro met de knop lees verder is een alinea, geen kop. p.verliefdOpLand en p.verliefdOpTitel krijgen hierboven de letterafstand van een kop, terwijl het ingeklapte deel eronder de gewone alinea-afstand van li, p houdt. Na het uitklappen leest dat als een groter lettertype. Hier zetten we de zichtbare helft terug op de alinea-waarden. Alleen alinea's met de uitklapknop, dus de koppen met dezelfde class blijven ongemoeid. */ .vop-nd main p.verliefdOpLand:has(.verliefdOpUitklapKnop), .vop-nd main p.verliefdOpTitel:has(.verliefdOpUitklapKnop){letter-spacing:0.0571429rem;line-height:1.65} /* Een intro die met de knop lees verder is opgeknipt is een doorlopende zin. Hierboven staan deze alinea's op display:block zodat de 2px inspringing telt; daardoor begon het vervolg na het uitklappen op een nieuwe regel en viel de zin in tweeen. Beide helften staan hier op inline, zodat het vervolg achter het laatste woord doorloopt. De ::after blokjes zetten de witruimte onder de alinea terug, want een inline-alinea heeft geen ondermarge. */ .vop-nd main section:not(.verliefdOpHoofd) p:has(> .verliefdOpUitklapKnop), .vop-nd main section:not(.verliefdOpHoofd) p:has(> .verliefdOpUitklapKnop) + .verliefdOpLandIntroOnderUitklap.verliefdOpUitgeklapt, .vop-nd main section:not(.verliefdOpHoofd) p:has(> .verliefdOpUitklapKnop) + .verliefdOpLandIntroOnderUitklap.verliefdOpUitgeklapt > p{display:inline !important;padding-left:0 !important} .vop-nd main section:not(.verliefdOpHoofd) p:has(> .verliefdOpUitklapKnop):has(+ .verliefdOpLandIntroOnderUitklap:not(.verliefdOpUitgeklapt))::after{content:"";display:block;height:0.6rem} .vop-nd main section:not(.verliefdOpHoofd) .verliefdOpLandIntroOnderUitklap.verliefdOpUitgeklapt > p::after, .vop-nd main section:not(.verliefdOpHoofd) .verliefdOpLandIntroOnderUitklap.verliefdOpUitgeklapt:not(:has(> p))::after{content:"";display:block;height:0.85rem} /* Ook in de kopsectie loopt het vervolg door. Elders in dit bestand staat .verliefdOpLandIntroOnderUitklap ) p op block; in de uitgeklapte stand hoort die alinea inline te zijn, anders begint het vervolg weer op een nieuwe regel. */ .vop-nd main .verliefdOpLandIntroOnderUitklap.verliefdOpUitgeklapt > p{display:inline !important} /* ─── Vergelijkingsblok mag krimpen ─── .voaiDuoRegel is een flexregel zonder wrap. In een grid met 1fr, dat is minmax(auto,1fr), bepaalt de min-content-breedte van die regel de kolom. Daardoor bleef de kaart op telefoonbreedte 804px breed en liep de tekst buiten zijn kader. Drie correcties: de kolom mag tot nul krimpen, de kaart mag krimpen, en label en waarde komen onder elkaar als de ruimte te klein is. */ .voaiDuo{grid-template-columns:repeat(2,minmax(0,1fr))} .voaiDuoKaart{min-width:0} .voaiDuoRegel{flex-wrap:wrap} .voaiDuoRegel b{margin-left:auto} @media (max-width:700px){.voaiDuo{grid-template-columns:minmax(0,1fr)}} /* 127kB -> 21kB */ /* 04-11-2026: toegankelijkheid uit de PageSpeed-meting. */ /* Het beoordelingscijfer stond wit op de gouden ster, ongeveer 2:1. Nu het donkerblauw van de sitetekst. Dat blauw zelf (#1a5c77) haalt op #FCB420 maar 4,12:1 en moet 4,5:1 halen bij 14,7 px vet, dus een tint dieper: #17536b is 4,70:1. */ .verliefdOpSterren .verliefdOpReviewCijfer.wit{color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.55)!important} /* Lees verder haalde 4,27:1 op wit en moet 4,5:1 halen bij 14,4 px vet; dit is 4,6:1 en blijft lichter dan de hover. */ .voaiLeesVerder{color:#b35418} /* De footerlinks waren 16 px hoog in rijen van 22 px, terwijl een tikdoel 24 px moet halen. */ @media (max-width:782px){nav.verliefdOpFooter ul.verliefdOpFooter li a{display:inline-block;padding-block:5px}} /* Twee blogpagina s verwijzen naar #egypteAchtergrond, een id dat nergens een regel had. Zelfde foto als de Egypte-pagina. */ #egypteAchtergrond{background-image:linear-gradient(rgba(0, 0, 0, 0.33),rgba(0, 0, 0, 0.33)), url( /wp-content/uploads/hurghada-all-inclusive-header-medium.webp );background-position:bottom} /* Tot 767px hoort het menu achter de hamburger te blijven. Het navigatieblok schakelt zijn overlay al uit vanaf 600px, terwijl de mobiele opmaak in 36305.css tot 767px loopt; tussen die twee lag het rechterMenu als blok van 182px over de hero. */ @media only screen and (max-width:767px){ header nav.rechterMenu .wp-block-navigation__responsive-container:not(.is-menu-open){ display:none !important; } } /* De knop onder de tegelrij en de resortlijst, naar de zoek- en filterpagina met het filter van deze bestemming. */ .verliefdOpZoekKnop{ margin: 1.25rem 0 0; text-align: center; } .verliefdOpZoekKnop a{ display: inline-block; padding: 12px 26px; font-weight: 700; font-size: 16px; line-height: 1.3; } /* De twee goedkoopste deals in de rechterkolom van een zoekresultaat, naast elkaar vanaf 560 px. */ .vop-nd .zoekresultaten-container > .verliefdOpZoekResulaat{display:grid;grid-template-columns:1fr} @media only screen and (min-width:720px){.vop-nd .zoekresultaten-container > .verliefdOpZoekResulaat{grid-template-columns:270px 1fr}} .vop-nd .zoekresultaten-container > .verliefdOpZoekResulaat > a.zoekResultaatFoto{display:block;color:inherit;text-decoration:none!important} .vop-nd .zoekresultaten-container > .verliefdOpZoekResulaat > a.zoekResultaatFoto > img{display:block;width:100%;height:100%;object-fit:cover} @media only screen and (min-width:1024px){.vop-nd .zoekresultaten-container > .verliefdOpZoekResulaat > .zoekResultaatCluster{display:flex;flex-wrap:wrap;padding:.5rem 0 .5rem 1rem}} .zoekResultaatTitelLink{color:inherit;text-decoration:none!important} .zoekResultaatDeals{display:grid;grid-template-columns:1fr;gap:.5rem;width:100%;box-sizing:border-box;margin-top:1.1rem;padding:0 1rem .9rem 1rem} @media only screen and (min-width:560px){.zoekResultaatDeals{grid-template-columns:1fr 1fr}} @media only screen and (min-width:1024px){.zoekResultaatDeals{padding:0 1rem .25rem 0}} .zoekResultaatDeal{display:flex;flex-direction:column;align-items:center;gap:.35rem;border:1px solid #efece5;border-radius:8px;padding:.45rem} .zoekResultaatDealLogo{width:auto;max-width:100%;height:34px;object-fit:contain;margin:0} .zoekResultaatDeal .verliefdOpCTA{display:block;width:100%;box-sizing:border-box;margin:0;text-align:center;padding:9px 6px;font-size:.9rem} .zoekResultaatDealNaam{font-weight:700;font-size:.9rem;line-height:34px} .vop-nd .zoekResultaatCluster p.zoekResultaatBeoordeling span.zoekresultaat{display:flex;align-items:center;justify-content:center;width:65px;height:65px;padding:0;box-sizing:border-box;font-size:1.35rem;line-height:1;font-weight:700} .vop-nd p.aantal-resorts{color:#fff;font-size:clamp(1.5rem,3.2vw,2.1rem);font-weight:700;line-height:1.2;text-shadow:0 2px 10px rgba(0,0,0,.6),0 1px 3px rgba(0,0,0,.5)} .vop-nd main div.pagination a:not([class]),.vop-nd div.pagination a{color:#fff;background:#1a5c77;text-decoration:none;box-shadow:inset 0 0 0 1px #1a5c77} .vop-nd main div.pagination a:not([class]):hover,.vop-nd main div.pagination a:not([class]):focus,.vop-nd div.pagination a:hover,.vop-nd div.pagination a:focus{color:#1a5c77;background:#fff;text-decoration:none} /* Het uitgelichte resort onderaan de zoekresultaten: links uitgelijnd met een oranje knop. */ .vop-nd .verliefdOpFavorieteResort div.verliefdOpVisualTegel > div.tegelVisualInfo{display:flex;flex-direction:column;justify-content:center;gap:.65rem;padding:1.4rem 1.6rem} .vop-nd .verliefdOpFavorieteResort div.verliefdOpVisualTegel > div.tegelVisualInfo p,.vop-nd .verliefdOpFavorieteResort div.verliefdOpVisualTegel > div.tegelVisualInfo a{text-align:left;margin:0} .vop-nd .verliefdOpFavorieteResort .tegelVisualNaam{font-size:1.3rem;font-weight:700;color:#1a5c77;line-height:1.25} .vop-nd .verliefdOpFavorieteResort .tegelVisualTekst{font-size:1rem;line-height:1.55} .vop-nd .verliefdOpFavorieteResort .tegelVisualKnop{margin-top:.5rem} .vop-nd .verliefdOpFavorieteResort .tegelVisualKnop a.verliefdOpCTA{display:inline-block;position:static;top:auto;color:#fff;text-decoration:none} /* De ondertitels onder een kop: zeeblauw in plaats van het grijs van --muted. */ .vop-nd main h3{color:#3c7ba3} /* Knop meer filteropties in het mobiele filterscherm: donker op de witte modal. */ .mobielModalContent form#zoekForm .verliefdOpCategorieTitelWrapper.uitgebreidZoeken svg,.mobielModalContent form#mob-zoekForm .verliefdOpCategorieTitelWrapper.uitgebreidZoeken svg{fill:#1a5c77} /* Knop meer filteropties in het mobiele filterscherm: iets groter, op een regel. */ .mobielModalContent form#zoekForm .verliefdOpCategorieTitelWrapper.uitgebreidZoeken,.mobielModalContent form#mob-zoekForm .verliefdOpCategorieTitelWrapper.uitgebreidZoeken{width:auto} .mobielModalContent form#zoekForm .verliefdOpCategorieTitelWrapper.uitgebreidZoeken p,.mobielModalContent form#mob-zoekForm .verliefdOpCategorieTitelWrapper.uitgebreidZoeken p{font-size:1.1rem;white-space:nowrap} /* Knop filteropties: uitgeklapt toont hij minder filteropties. */ .verliefdOpCategorietitel .vopFilterOpen{display:none} .verliefdOpCategorietitel:has(.verliefdOpUitklapPijl[style*='rotate(0']) .vopFilterDicht{display:none} .verliefdOpCategorietitel:has(.verliefdOpUitklapPijl[style*='rotate(0']) .vopFilterOpen{display:inline} /* voai-bloghero: blog-hero gelijk aan de bestemmingspaginas, geen witte kaart meer. */ .verliefdOpHoofd.verliefdOpBlog div.verliefdOpBlog,header.verliefdOpBlog div.verliefdOpBlog{background:rgba(16,55,72,.62)!important;box-shadow:0 6px 24px rgba(0,0,0,.18)!important;border-radius:10px;position:relative;z-index:1} .verliefdOpHoofd.verliefdOpBlog div.verliefdOpBlog h1,header.verliefdOpBlog div.verliefdOpBlog h1{text-shadow:0 2px 22px rgba(0,0,0,.4)!important} .verliefdOpHoofd.verliefdOpBlog div.verliefdOpBlog p,header.verliefdOpBlog div.verliefdOpBlog p{text-shadow:0 1px 10px rgba(0,0,0,.4)!important} /* De gradient over de hero ving alle klikken op de kruimelpadlinks op. */ section.verliefdOpBlog::after,header.verliefdOpBlog::after{pointer-events:none} /* Kruimelpad breekt af op smalle schermen. */ .verliefdOpBlog ul.verliefdOpNavigatie{flex-wrap:wrap} /* voai-bloghero-tekst: ondertitel en kruimelpad in de blog-hero ook wit. */ .verliefdOpHoofd.verliefdOpBlog div.verliefdOpBlog h2,header.verliefdOpBlog div.verliefdOpBlog h2{color:#fff!important;text-shadow:0 1px 10px rgba(0,0,0,.4)!important} /* voai-bloghero-intro: de introalinea in de blog-hero staat op de foto, dus wit zoals de kop en het kruimelpad. */ .verliefdOpHoofd.verliefdOpBlog div.verliefdOpBlog > p,header.verliefdOpBlog div.verliefdOpBlog > p{color:#fff!important;text-shadow:0 1px 10px rgba(0,0,0,.4)!important} .verliefdOpHoofd.verliefdOpBlog div.verliefdOpBlog ul.verliefdOpNavigatie,.verliefdOpHoofd.verliefdOpBlog div.verliefdOpBlog ul.verliefdOpNavigatie li,.verliefdOpHoofd.verliefdOpBlog div.verliefdOpBlog ul.verliefdOpNavigatie a,header.verliefdOpBlog div.verliefdOpBlog ul.verliefdOpNavigatie,header.verliefdOpBlog div.verliefdOpBlog ul.verliefdOpNavigatie li,header.verliefdOpBlog div.verliefdOpBlog ul.verliefdOpNavigatie a{color:#fff!important;text-shadow:0 2px 3px rgba(0,0,0,.5)!important} /* voai-bloghero-laag: iets steviger donkere laag over de blog-hero plus schaduw op de formulierlabels. */ section.verliefdOpBlog::after,header.verliefdOpBlog::after{background-image:linear-gradient(rgba(18,63,82,.2) 0%,rgba(18,63,82,.34) 55%,rgba(18,63,82,.58) 100%)!important} .verliefdOpHoofd.verliefdOpBlog div.verliefdOpBlog label,header.verliefdOpBlog div.verliefdOpBlog label,.verliefdOpHoofd.verliefdOpBlog div.verliefdOpBlog p.verliefdOpCategorietitel,header.verliefdOpBlog div.verliefdOpBlog p.verliefdOpCategorietitel{text-shadow:0 1px 6px rgba(0,0,0,.35)!important} /* voai-footer-nieuw: footer leesbaar (donkerblauw op geel), vier kolommen en een slotregel. */ nav.verliefdOpFooter,nav.verliefdOpFooter ul.verliefdOpFooter,nav.verliefdOpFooter ul.verliefdOpFooter li,nav.verliefdOpFooter ul.verliefdOpFooter li a{color:#123f52!important} nav.verliefdOpFooter ul.verliefdOpFooter li a{text-decoration:none} nav.verliefdOpFooter ul.verliefdOpFooter li a:hover,nav.verliefdOpFooter ul.verliefdOpFooter li a:focus{text-decoration:underline} ul.verliefdOpFooter li:first-of-type{font-weight:800;font-size:1.05rem;margin-bottom:6px} .verliefdOpFooterKolommen{flex:1 1 auto;min-width:0} p.verliefdOpFooterSlot{color:#123f52;font-size:.85rem;margin:20px 0 0;padding-top:12px;border-top:1px solid rgba(18,63,82,.25)} p.verliefdOpFooterSlot a{color:#123f52;text-decoration:underline} p.verliefdOpFooterSlot .voaiScheid{opacity:.55;padding:0 4px} @media (max-width:900px){ footer .wp-block-group.is-nowrap{flex-wrap:wrap!important;gap:14px!important} footer .wp-block-group.is-nowrap > a:first-child{margin:0 auto!important;display:block!important;width:120px!important} img.verliefdOpFooterLogo{width:120px!important;height:auto!important;margin:0!important;display:block} .verliefdOpFooterKolommen{flex:1 1 100%!important;width:100%} nav.verliefdOpFooter{flex-direction:row!important;flex-wrap:wrap!important;gap:22px 24px!important} ul.verliefdOpFooter{width:auto!important;flex:1 1 42%!important;min-width:140px!important;max-width:none!important;box-sizing:border-box} p.verliefdOpFooterSlot{text-align:center} } /* voai-modal-scroll: het mobiele filterscherm blijft binnen het zichtbare scherm, zodat de inhoud scrolt in plaats van onder de schermrand te verdwijnen. */ #mobielModalContainer{max-height:80vh;max-height:80dvh!important;overscroll-behavior:contain} /* voai-filterlijst: de optielijst van een filter past binnen het mobiele filterscherm en houdt de scroll bij zichzelf. */ @media (max-width:900px){#mobielModalContainer .multiselect-dropdown-list-wrapper{position:static!important;box-shadow:none!important}#mobielModalContainer .multiselect-dropdown-list{max-height:55dvh!important;overflow-y:auto!important;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch}#mobielModalContainer .multiselect-dropdown,#mobielModalContainer .multiselect-dropdown-list-wrapper,#mobielModalContainer .multiselect-dropdown-list,#mobielModalContainer .multiselect-dropdown span.placeholder{box-sizing:border-box!important;max-width:100%!important}#mobielModalContainer p.verliefdOpTekstLink{border-bottom:0!important;margin-bottom:0!important}}#voaiMinderOnder{display:none}@media (max-width:640px){#mobielModalContainer{max-height:86dvh!important}#mobielModal h1.zoekForm{font-size:1.15rem!important;line-height:1.25!important;margin:0 0 10px 16px!important}#mob-verliefdOpFormUitklap > *{display:block!important;width:100%!important}#voaiMinderOnder{display:block!important;margin-top:4px}} /* voai-menufoto: in het mobiele menu krijgt elk hoofditem dezelfde fotostrook, ook de twee uitklapitems. */ @media only screen and (max-width:767px){ #modal-3 ul.wp-block-navigation__container > li.wp-block-navigation-item::after{content:"";position:absolute;bottom:0;right:0;left:auto;height:166px;width:70%;background-size:cover!important;background-position:center!important;background-repeat:no-repeat;border-radius:5px;border-top-left-radius:100%;border-bottom-left-radius:0} #modal-3 ul.wp-block-navigation__container > li:nth-child(1)::after{background-image:url(/wp-content/uploads/kreta-klein.webp)} #modal-3 ul.wp-block-navigation__container > li:nth-child(2)::after{background-image:url(/wp-content/uploads/tui-suneo-dunas-1-klein.webp)} } /* voai-hubgroepen: op de overkoepelende paginas staan de bestemmingen in drie groepen (landen, regios, bestemmingen), elk met een eigen kop, en onder het geheel een knop naar de pagina met alles. De alle-paginas gebruiken dezelfde koppen boven een rij tekstlinks. */ .vopHubGroepen h3.vopHubKop,.vopAlleGroepen h3.vopHubKop{font-size:1.25rem;line-height:1.25;font-weight:700;color:#1a5c77;margin:30px 0 12px} .vopHubGroepen > h3.vopHubKop:first-child,.vopAlleGroepen > h3.vopHubKop:first-child{margin-top:6px} .vopHubMeer{margin:28px 0 0;text-align:center} p.vopHubMeer a,.vop-nd main p.vopHubMeer a,.vopHubGroepen .vopHubMeer a{display:inline-block;text-decoration:none;padding:12px 28px;border:2px solid #1a5c77;border-radius:999px;color:#1a5c77;font-weight:700;line-height:1.2;text-decoration:none} p.vopHubMeer a:hover,p.vopHubMeer a:focus-visible,.vop-nd main p.vopHubMeer a:hover{text-decoration:none;background:#1a5c77;color:#fff} .vopAlleGroepen .vopAlleLijst{display:flex;flex-wrap:wrap;gap:8px 24px;margin:0 0 10px} @media (max-width:640px){ .vopHubGroepen h3.vopHubKop,.vopAlleGroepen h3.vopHubKop{font-size:1.1rem;margin:24px 0 10px} .vopHubMeer a{padding:12px 20px} .vopAlleGroepen .vopAlleLijst{gap:8px 16px} } @media (max-width:1023px){.vop-nd div#mobielModalSearchBox1{ box-sizing:border-box; background:#fff !important; border-radius:999px !important; padding:12px 18px !important; box-shadow:0 6px 18px rgba(16,56,72,.18) !important; margin-top:22px !important; display:flex !important; align-items:center; justify-content:center; width:100%; max-width:520px; }.vop-nd div#mobielModalSearchBox1 p.mobielModalSearchBox{ margin:0 !important; display:flex !important; align-items:center; gap:10px; justify-content:center; color:#16323d !important; text-shadow:none !important; font-weight:600; text-align:center; }.vop-nd div#mobielModalSearchBox1 .zoekIcoontje{ width:16px !important; height:16px !important; flex:0 0 16px; }} /* Carrousel binnen het kader houden: de rij schuift met transform, de laag eromheen clipt - 09-11-2026 */ .vop-nd .slider3 { position:relative; overflow:hidden; padding:6px 0 14px; } .vop-nd .slider3 .verliefdOpSliderPlusMin, .vop-nd .slider3 .verliefdOpCategorieTitelWrapper, .vop-nd .slider3 .verliefdOpSliderKnopjes3, .vop-nd .slider3 [class*="prev"]:not(.vop-slider-arrow), .vop-nd .slider3 [class*="next"]:not(.vop-slider-arrow) { display:none !important; } .vop-nd .slider3 .verliefdOpTop5Deals.slideshow-container3:not(.verliefdOpHotelTegeltjes) { display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; overflow:visible !important; gap:20px; margin:0 !important; padding:2px !important; grid-template-columns:none !important; transition:transform .45s var(--ease); will-change:transform; } .vop-nd .slider3 .verliefdOpTop5Deal.mySlides3 { display:flex !important; flex-direction:column; flex:0 0 clamp(280px,86vw,330px) !important; width:auto !important; max-width:none !important; min-width:0; margin:0 !important; padding:0 !important; background:#fff !important; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--sh-1); transition:transform .28s var(--ease),box-shadow .28s var(--ease); } .vop-nd .slider3 .verliefdOpTop5Deal.mySlides3:hover { transform:translateY(-6px); box-shadow:var(--sh-3); } .vop-nd .slider3 .verliefdOpTop5Deal.mySlides3 > div { width:auto !important; max-width:none !important; margin:0 !important; } .vop-nd .slider3 .verliefdOpTop5Deal.mySlides3 > div:first-child { line-height:0; } .vop-nd .slider3 .verliefdOpTop5Deal.mySlides3 img { width:100% !important; aspect-ratio:16/10; height:auto !important; object-fit:cover; display:block; margin:0 !important; border-radius:0 !important; } .vop-nd .slider3 .verliefdOpTop5Deal.mySlides3 > div:last-child { position:static !important; top:auto !important; margin:0 !important; padding:16px 18px 18px !important; display:flex; flex-direction:column; gap:9px; flex:1 1 auto; } .vop-nd .slider3 .verliefdOpTop5Deal.mySlides3 .verliefdOpSubtitel { color:var(--c-coral-500) !important; font-family:var(--f-head) !important; font-weight:700 !important; font-size:1.15rem !important; line-height:1.25 !important; margin:0 !important; text-shadow:none !important; white-space:normal !important; letter-spacing:normal !important; } .vop-nd .slider3 .verliefdOpTop5Deal.mySlides3 .verliefdOpTitel { display:none !important; } /* land dupliceert de subtitel */ .vop-nd .slider3 .verliefdOpTop5Deal.mySlides3 .verliefdOpDealIntro { color:var(--muted) !important; font-size:.95rem !important; line-height:1.55 !important; margin:0 !important; max-width:none !important; } .vop-nd .slider3 .verliefdOpTop5Deal.mySlides3 .verliefdOpDealIntro:last-of-type { margin-top:auto !important; padding-top:2px; } .vop-nd .slider3 .verliefdOpTop5Deal.mySlides3 a.verliefdOpTekstLink, .vop-nd .slider3 .verliefdOpTop5Deal.mySlides3 a.landCTAButton { display:inline-block; } .vop-nd .slider3{ position:relative; } /* De onderstreping van de tekstlink liep als balk door de hele filterbalk, doordat de bundel deze p op 100% breedte zet - 09-11-2026 */ .vop-nd form#zoekForm p#resetFilters, .vop-nd form#zoekForm p#resetFilters2, .vop-nd form#zoekForm p#resetFilters3{width:auto;max-width:100%} /* De uitklappijl paste niet naast Meer filteropties en wipte naar een eigen regel eronder - 09-11-2026 */ .vop-nd form#zoekForm .verliefdOpCategorieTitelWrapper.uitgebreidZoeken{min-width:210px;position:relative;top:-40px;left:calc(74% - 103px)} .vop-nd form#zoekForm .verliefdOpCategorieTitelWrapper.uitgebreidZoeken p.verliefdOpCategorietitel{display:flex;align-items:center;justify-content:flex-end;gap:.2rem;flex-wrap:nowrap;white-space:nowrap;width:100%;max-width:100%;text-shadow:0 1px 3px rgba(0,0,0,.65)} /* voai-blogtekst: een rustige leeskolom in de blogtekst, in plaats van regels over de volle breedte. */ .verliefdOpBlog article.verliefdOpMaxWidth p,.verliefdOpBlog article.verliefdOpMaxWidth li{max-width:68ch} .vop-nd .verliefdOpBlog article.verliefdOpMaxWidth p:not(.verliefdOpSubtitel),.vop-nd .verliefdOpBlog article.verliefdOpMaxWidth p.verliefdOpLandIntro{font-size:1rem;line-height:1.65;margin:0 0 1.1em;padding-left:2px} .verliefdOpBlog article.verliefdOpMaxWidth li{line-height:1.6} /* voai-fotoblok-tekst: de alinea onder het fotoblok stond op display:contents, waardoor de tekst en de door JavaScript gemaakte span met de rest in losse rastercellen belandden. Hier terug naar een doorlopend tekstblok over de volle breedte van het blok. */ .verliefdOpTop6Deals > p.verliefdOpLandIntro{display:block;grid-column:1 / -1;margin:1.1em 0 0} .verliefdOpTop6Deals > p.verliefdOpLandIntro > span.voaiRest{display:inline}