/* CMS-driven card-label icons; stable component hook, no layer IDs. */ @layer site { .cnh-cards-overlay .card__label-text { display: inline-flex; align-items: center; gap: .45rem; } .cnh-cards-overlay .card__label-text::before { content: ""; display: inline-block; width: 18px; height: 18px; background-repeat: no-repeat; background-position: center; background-size: contain; } .cnh-cards-overlay .card:nth-child(1) .card__label-text::before { background-image: url("/assets/icons/cnh-icon-tent.svg"); } .cnh-cards-overlay .card:nth-child(2) .card__label-text::before { background-image: url("/assets/icons/cnh-icon-bike.svg"); } .cnh-cards-overlay .card:nth-child(3) .card__label-text::before { background-image: url("/assets/icons/cnh-icon-calendar.svg"); } .cnh-cards-overlay .card { border-radius: 26px; overflow: hidden; box-shadow: 0 18px 40px -28px rgba(30, 89, 100, .55); } } /* Regio/omgeving artikelkaarten: foto vlak tot de kaartrand (geen witrand links), rechterhoeken recht; de kaart rondt zelf de linkerhoeken af */ .layer--posts .post-card__media{border-radius:0} /* Kaartfoto's (regio/steden posts) altijd 4:3 i.p.v. meerekken met de tekst; ongelaagd zodat het de @layer-framework-regel wint - verzoek Age Uitgezet (Ronny, 27-09-2026): botste met advanced_scale_size op laag 1838 (bron 16:9, deze regel forceerde alsnog 4:3, tekst in de foto werd afgesneden). De renderer geeft de gekozen ratio nu zelf als inline aspect-ratio mee (framework PR 841), dus deze vaste override is niet meer nodig als vangnet. Niet verwijderd maar in commentaar, voor het geval een laag zonder advanced_scale alsnog met de tekstlengte zou meerekken. .layer--posts .post-card__media{aspect-ratio:4/3;height:auto;align-self:flex-start} */ /* Prototype parity: the CMS language switcher is presented like the prototype flag row. */ .noorthey-topbar { position: relative; z-index: 60; background: #1e5964; color: #eaf3f1; font-size: .84rem; height: 40px; } .noorthey-topbar__inner { /* Zelfde patroon als .site-header__inner (shell.css/custom.css) i.p.v. losse inline padding -- consistente randafstand over de hele site (Ronny, 27-09-2026). */ width: min(1280px, 100% - 64px); max-width: none; margin-inline: auto; padding-left: 0; padding-right: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 100%; } .noorthey-topbar__usps { list-style: none; display: flex; gap: 1.6rem; margin: 0; padding: 0; flex-wrap: wrap; } .noorthey-topbar__usps li { display: inline-flex; align-items: center; gap: .45rem; } .noorthey-topbar__usps li::before { content: "✓"; color: #ffd68a; font-weight: 800; } .noorthey-topbar__usps li.noorthey-topbar__review::before { content: "★"; } .noorthey-topbar__usps a { color: #eaf3f1; } .noorthey-topbar__usps a:hover { color: #fff; text-decoration: underline; } @media (max-width: 900px) { .noorthey-topbar__usps li:not(.noorthey-topbar__review) { display: none; } } @media (max-width: 767px) { .noorthey-topbar__inner { padding-left: 16px; padding-right: 16px; } } @media (max-width: 560px) { .noorthey-topbar__usps { display: none; } .noorthey-topbar__inner { justify-content: flex-end; } } /* --- Knop-pijltje (na-icoon): EH rasteriseert de icon-SVG (wordt zwart) en flipt niet op hover. Daarom hier class-based als currentColor-mask op de knoptekst, zodat het pijltje de tekstkleur volgt: teal (#178480) standaard, automatisch wit op hover. Alleen knoppen MET een na-icoon (via :has). Geen route/id-selectors, geen !important. */ .ds-button .button--icon--after { display: none; } .ds-button:has(.button--icon--after) .button--text::after { content: ""; display: inline-block; width: .95em; height: .95em; margin-left: .5em; vertical-align: -.12em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M2.5%208h11M9%203.5%2013.5%208%209%2012.5%27%2F%3E%3C%2Fsvg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M2.5%208h11M9%203.5%2013.5%208%209%2012.5%27%2F%3E%3C%2Fsvg%3E") no-repeat center / contain; } /* Artikel-detailpagina's (o.a. /steden/...): foto links 1/3, tekst rechts 2/3 (vanaf tablet) */ @media (min-width:768px){ .layer--post-item .article{display:grid;grid-template-columns:1fr 2fr;column-gap:2.5rem;align-items:start} .layer--post-item .post__media{grid-column:1;grid-row:1 / span 20;margin:0;align-self:start} .layer--post-item .article > :not(.post__media){grid-column:2} } /* Match the prototype's grouped sticky sitehead: 40px topbar - 33px = 7px remains on scroll. */ .noorthey-sitehead { position: sticky; top: -33px; z-index: 1100; } .noorthey-sitehead .noorthey-header { position: relative; top: auto; right: auto; bottom: auto; left: auto; z-index: 2; } /* Taalvlaggen: direct naast elkaar; interactieruimte alleen boven/onder. */ .lang-switcher--inline_flags .lang-switcher__menu { gap: .35em; } .lang-switcher--inline_flags .lang-switcher__item { padding: .35rem 0; border-radius: 0; } .lang-switcher--inline_flags .lang-switcher__item:hover, .lang-switcher--inline_flags .lang-switcher__item:focus-visible { background: rgba(255,255,255,.18); } /* Homepage welcome text/image parity; stable CMS class supplied by design_layer. */ @layer site { .cnh-welcome .text-image__grid { --ti-cols: 3fr 2fr; gap: clamp(40px,5vw,72px); } .cnh-welcome .text-image__media { aspect-ratio: 5 / 4; overflow: hidden; } .cnh-welcome .text-image__media img { width: 100%; height: 100%; object-fit: cover; } } /* Homepage location component; stable CMS class supplied by design_layer. */ @layer site { .cnh-location .layer__columns { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 34px; align-items: center; } .cnh-location .layer__col { min-width: 0; } .cnh-location .ds-column-title { color: #164751; font-size: clamp(1.7rem,3.6vw,2.6rem); } .cnh-location .ds-column-subtitle { max-width: 720px; color: #3f4a46; font-size: clamp(1.05rem,1.8vw,1.24rem); } .cnh-location .enumeration-table { display: block; margin: 1.2rem 0 0; } .cnh-location .enumeration-table tbody { display: flex; flex-wrap: wrap; gap: .5rem; } .cnh-location .enumeration-table tr { display: contents; } .cnh-location .enumeration-table td { display: inline-block; padding: .35rem .9rem; border: 1px solid #ddd6c7; border-radius: 999px; background: #fbf8f2; color: #164751; font-size: .86rem; font-weight: 600; } .cnh-location .enumeration-table td + td { display: none; } .cnh-location .column__map { aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid #ddd6c7; border-radius: 26px; background: #fbf8f2; box-shadow: 0 12px 30px -22px rgba(22,71,81,.42); } @media (max-width: 760px) { .cnh-location .layer__columns { grid-template-columns: 1fr; gap: 34px; } } } /* Homepage last-minute component; stable CMS class supplied by design_layer. */ @layer site { .cnh-lastminute .text-image__grid { grid-template-columns: clamp(160px,26%,260px) minmax(0,1fr); gap: clamp(24px,4vw,48px); align-items: center; padding: clamp(22px,3.2vw,40px); border: 1px solid #ece4d4; border-radius: 26px; background: #fbf8f2; } .cnh-lastminute .text-image__media { width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 16px; } .cnh-lastminute .text-image__media img { width: 100%; height: 100%; object-fit: cover; } .cnh-lastminute .ds-title { color: #164751; font-size: clamp(1.4rem,3vw,2rem); margin-top: .6rem; } .cnh-lastminute .ds-text { color: #4a5551; } @media (max-width: 760px) { .cnh-lastminute .text-image__grid { grid-template-columns: 1fr; } .cnh-lastminute .text-image__media { aspect-ratio: 16 / 10; width: 100%; } } } /* Homepage image/text teasers; stable CMS classes supplied by design_layer. */ @layer site { .cnh-region .text-image__grid, .cnh-about .text-image__grid { gap: 34px; align-items: center; } .cnh-region .text-image__media, .cnh-about .text-image__media { aspect-ratio: 5 / 4; overflow: hidden; border-radius: 26px; box-shadow: 0 18px 40px -24px rgba(22,71,81,.42); } .cnh-region .text-image__media img, .cnh-about .text-image__media img { width: 100%; height: 100%; object-fit: cover; } .cnh-region .ds-title, .cnh-about .ds-title { color: #164751; font-size: clamp(1.7rem,3.6vw,2.6rem); } .cnh-region .ds-text, .cnh-about .ds-text { color: #3f4a46; } .cnh-winter .text-image__grid { gap: clamp(28px,4vw,48px); align-items: center; } .cnh-winter .text-image__text { padding: clamp(26px,4vw,44px); border-radius: 26px; background: #164751; color: #dfeceb; box-shadow: 0 18px 40px -24px rgba(22,71,81,.42); } .cnh-winter .text-image__media { aspect-ratio: 5 / 4; overflow: hidden; border-radius: 26px; } .cnh-winter .text-image__media img { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 760px) { .cnh-region .text-image__media, .cnh-about .text-image__media, .cnh-winter .text-image__media { aspect-ratio: 5 / 4; } } } /* Mini-wintercamping hero ss02-stijl: kaart met text links, groot beeld rechts, creme achtergrond. */ @layer site { .cnh-winter-v2 .text-image__grid { grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: clamp(24px,4vw,48px); align-items: center; padding: clamp(22px,3.2vw,40px); border: 1px solid #ece4d4; border-radius: 26px; background: #fbf8f2; overflow: hidden; } .cnh-winter-v2 .text-image__media { width: 100%; aspect-ratio: 5 / 4; overflow: hidden; border-radius: 16px; } .cnh-winter-v2 .text-image__media img { width: 100%; height: 100%; object-fit: cover; } .cnh-winter-v2 .ds-title { color: #164751; font-size: clamp(1.4rem,3vw,2rem); margin-top: .6rem; } .cnh-winter-v2 .ds-text { color: #4a5551; } } /* Homepage final CTA; stable CMS class supplied by design_layer. */ @layer site { .cnh-finalcta .text-image__grid { grid-template-columns: minmax(0,1.4fr) minmax(160px,.85fr); gap: clamp(28px,4vw,48px); align-items: stretch; padding: clamp(30px,5vw,58px); border-radius: 26px; background: linear-gradient(120deg,#164751,#178480); color: #fff; box-shadow: 0 18px 44px -22px rgba(22,71,81,.55); } .cnh-finalcta .ds-title { color: #fff; font-size: clamp(1.8rem,4vw,2.8rem); } .cnh-finalcta .ds-text { max-width: 52ch; color: #dff0ee; } .cnh-finalcta .text-image__media { aspect-ratio: auto; height: 100%; overflow: hidden; border-radius: 16px; box-shadow: 0 18px 44px -22px rgba(0,0,0,.55); } .cnh-finalcta .text-image__media img { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 760px) { .cnh-finalcta .text-image__grid { grid-template-columns: 1fr; } } } /* Foto-badge (linksonder over de afbeelding): vervangt de eerder in de pixels ingebakken tekst (IMG_2239_team-label-v4.webp, "Wij helpen u graag. Elise & Reinier") door een echt, vertaalbaar CMS-veld (`badge` op layer_text, gerenderd als `` -- de renderer ondersteunde dit al langer, alleen ontbrak het veld op deze site en had niemand ooit CSS voor `.badge-corner` geschreven). Ronny, 26-09-2026. */ .text-image__media { position: relative; } .text-image__media .badge-corner { position: absolute; left: 1rem; bottom: 1rem; max-width: calc(100% - 2rem); background: var(--theme-color-5, #e79e36); color: #1a1a1a; font-weight: 400; font-size: .95rem; line-height: 1.3; padding: .65rem 1.1rem; border-radius: 999px; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .35); } /* Origineel (de ingebakken-in-de-foto versie) had het eerste zinsdeel vet, de naam regulier -- nu via de `[strong:]`-inline-opmaak van het `badge`-veld (PR 835) i.p.v. de hele badge in één gewicht (Ronny, 26-09-2026). */ .text-image__media .badge-corner strong { font-weight: 700; } /* Eyebrow-streepje (site-breed): amber dash vóór de eyebrow, zoals prototype (.eyebrow::before 26x2px) */ @layer site { .ds-eyebrow::before{content:"";display:inline-block;width:26px;height:2px;vertical-align:middle;margin-right:.55rem;background:var(--theme-color-5,#e79e36);border-radius:2px} } /* Media-album labeltje boven de titel = eyebrow-stijl (klein/uppercase) + streepje, gelijk aan de rest van de site. Het media-album-blok heeft geen eyebrow-veld in het CMS; het label wordt als 'subtitle' gerenderd (.ds-media_albums-subtitle). Ongelaagd zodat het de @layer theme .ds-subtitle-emit overrulet. - verzoek Age */ .ds-media_albums-subtitle{ color:#178480; font-family:"Mulish", sans-serif; font-size:11.5px; font-weight:700; letter-spacing:.16em; line-height:1.65em; text-transform:uppercase; } .ds-media_albums-subtitle::before{ content:"";display:inline-block;width:26px;height:2px;vertical-align:middle;margin-right:.55rem;background:var(--theme-color-5,#e79e36);border-radius:2px; } /* Hero zoekbalk → prototype-stijl: teal iconen in cream vierkant, teal labels, grijze sublabels, amber pill-knop */ .booking{ background-color:#fff; background-image:none; backdrop-filter:none; -webkit-backdrop-filter:none; border:1px solid #e8e0cf; opacity:1; position:relative; z-index:3; } .booking__field{ align-items:center; column-gap:12px; } /* Crème tegel als eigen, ongemaskeerde laag op de OUDER (niet op .booking__icon zelf): mask verbergt het hele element inclusief z'n eigen ::before, dus de tegel kan niet op hetzelfde element staan als de mask (Ronny, 20-09-2026). Zelfde grid-cel als het icoon (kolom 1, rij 1/2) zodat 'ie er precies onder ligt; het icoon (echt kind-element, na de pseudo-content) tekent zich erbovenop. */ .booking__field{ position:relative; } .booking__field::before{ content:""; grid-column:1; grid-row:1 / span 2; align-self:center; justify-self:start; width:48px; height:48px; background:var(--theme-color-3); border-radius:13px; } .booking__icon{ position:relative; width:48px; height:48px; padding:11px; box-sizing:border-box; color:var(--theme-color-2); /* Zonder content-box blijft mask-size:contain het hele border-box (48x48) vullen -- padding heeft dan geen effect. Met content-box krimpt de iconvorm mee naar 48-2*11=26px. */ mask-origin:content-box; -webkit-mask-origin:content-box; } .booking__label{ color:#1E5964; font-weight:600; font-size:1rem; } .booking__control .select-display,.booking__control .guests-btn{ background:transparent; border:none; box-shadow:none; padding:0; min-height:0; height:auto; color:#8A8578; font-size:.85rem; font-weight:400; } .booking__control .select-arrow{ display:none; } .booking__control .date > input{ display:none; } /* De datumknoppen zijn hier plat (geen eigen rand of vulling), maar bij toetsenbord-focus tekent de browser wel een ring om het control. Zonder vulling plakte die op de cijfers. De padding geeft lucht, de negatieve marge houdt de tekst op z'n plek, en fit-content laat de ring om de datum vallen i.p.v. om de hele kolom. De gap is mee verruimd zodat de vertrekdatum niet tegen de ring aan komt te staan. */ .booking__control .date-trigger-row{ display:flex; gap:22px; } .booking__control .date-trigger{ background:transparent; border:none; box-shadow:none; padding:.35rem .6rem; margin:-.35rem -.6rem; width:fit-content; border-radius:10px; min-height:0; height:auto; display:flex; flex-direction:column; align-items:flex-start; } .booking__control .form-field__sublabel{ color:#8A8578; font-size:.72rem; font-weight:400; text-transform:none; } .booking__control .form-field__value{ color:#8A8578; font-size:.85rem; } .booking__submit{ background:#E79E36; color:#3a2410; border-radius:999px; font-weight:700; padding:0 1.4rem; border:none; height:48px; white-space:nowrap; } /* ===== Submenu / dropdown huisstijl (2026-09-14) ===== */ @media(min-width:761px){ .mb__dropdown{ background:#FFFDF8; border:1px solid rgba(3,81,76,.12); border-radius:16px; box-shadow:0 18px 44px -20px rgba(3,81,76,.45); padding:.55rem; } } .mb__item{ margin:.12rem 0; } .mb__item-link{ border:none; background:transparent; border-radius:10px; padding:.6rem 2.1rem .6rem .85rem; transition:background .15s ease, transform .15s ease; } .mb__item-link > span, .mb__item-title{ color:#03514c; font-weight:650; } .mb__item-link::after{ content:"\2192"; right:.85rem; color:#E79E36; opacity:.5; transition:opacity .15s ease, transform .15s ease; } .mb__item-link:hover, .mb__item-link:focus-visible{ background:#F2EEE6; transform:none; } .mb__item-link:hover::after, .mb__item-link:focus-visible::after{ opacity:1; transform:translateX(.22rem); } /* ===== Hero: knoppen + titel zoals prototype (2026-09-14) ===== */ .layer.hero .hero__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:.8rem; margin-top:1.6rem; } .layer.hero .hero__title{ font-size:clamp(2.1rem, 5.2vw, 3.6rem); font-weight:600; line-height:1.08; text-shadow:0 2px 20px rgba(0,0,0,.28); } .layer.hero .ds-hero-button{ display:inline-flex; align-items:center; justify-content:center; height:48px; padding:0 1.6rem; border-radius:999px; font-weight:700; transition:background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease; } /* De pill-stijlen voor "Reserveer je plek" en "Bekijk de camping" stonden hier op * `.ds-hero-button.btn--primary` en `.btn--secondary`. Die combinatie komt op geen enkele * pagina voor: de hero-knoppen dragen `ds-hero-button` met een CMS-klasse * (`cms-cta--`), en `btn--primary` bestaat alleen op de verstuurknop van een * formulier. 22 regels !important die niets deden. Kleur en vorm van deze knoppen horen * in hun knop-variant in het CMS. */ /* Telefoon-CTA verbergen in de compacte mobiele header (past niet naast Reserveren + menu). Alleen de header/desktop-groep (--main); de kloon in het mobiele menu (--mobile) blijft staan. */ @media(max-width:760px){ .site-nav__ctas--main .site-nav__cta[href^="tel:"]{ display:none; } } /* Gekloonde telefoon-CTA in het mobiele menu (boven Reserveren, via custom.js): wit icoon + nummer op de teal overlay, ghost-omranding; vol-breed regelt de bestaande --mobile-regel. Age 25-09. */ @media(max-width:767px){ .site-nav__ctas--mobile .site-nav__cta[href^="tel:"]{ color:#fff; background:transparent; border:2px solid rgba(255,255,255,.55); } .site-nav__ctas--mobile .site-nav__cta[href^="tel:"] .site-nav__cta-icon--mask{ background-color:#fff; } .site-nav__ctas--mobile .site-nav__cta[href^="tel:"]:hover{ color:#E79E36; border-color:#E79E36; } .site-nav__ctas--mobile .site-nav__cta[href^="tel:"]:hover .site-nav__cta-icon--mask{ background-color:#E79E36; } } /* Hero-content en zoekbalk op de content-lijn (punt 1015). * * De BREEDTE komt uit het CMS: de design-slot op de hero-overlay zet daar al * `width:100%; max-width:1280px`, dezelfde 1280 als de content-lagen. Hier staat alleen wat * in het CMS geen equivalent heeft: de 95% die `.layer__inner` ook krijgt, en padding 0 zodat * de tekst op de rand van de overlay begint in plaats van 40px ernaast. * * Hier stond een vaste 72rem met de notitie "was 1280 -> stak 24px links uit". Dat uitsteken * kwam niet van de 1280 maar van de ontbrekende 95%: zonder die krimpt de overlay niet mee met * de content zodra het scherm smaller wordt dan 1280. De vaste 72rem loste dat op door alles * naar binnen te halen, maar zette de hero daarmee 64px uit de pas met het logo en de secties. * * De zoekbalk moet mee, anders lijnt de hero uit met de content maar niet meer met de balk * eronder -- precies waar die oude notitie voor waarschuwde. * * Gemeten op 1600/1440/1280/1100px: overlay, titel, knop, zoekbalk en content-laag beginnen nu * allemaal op dezelfde x. Weg zodra: het CMS ook de 95% en de padding van de hero-overlay kan * zetten. (sushi, 19-09-2026) */ .hero .hero__overlay--center{ width:95%; padding-left:0; padding-right:0; margin-left:auto; margin-right:auto; } .booking{ width:95%; max-width:1280px; } /* Telefoon-CTA in de header. * * Hier stond een eigen ::before met een 8 kB data-URI van het telefoon-icoon, plus een * regel die het framework-icoon moest verbergen. Dat icoon staat al als CMS-waarde op de * CTA (`icon_before` = noorthey-phone-icon.svg), dus het framework rendert het zelf als * . De kopie in de CSS is eruit; het CMS levert het. * * De ghost-uitvoering (geen pill, geen rand, teal tekst) hoort bij knop-variant * "Doorzichtig (ghost)" die op deze CTA staat ingesteld -- niet bij acht !important-regels * in de site-CSS. */ /* Header: menu + beide CTA-knoppen (telefoon + Reserveren) verticaal gelijk uitlijnen */ .site-nav__ctas--main{ display:flex; align-items:center; } .site-header__tools .site-nav__cta{ vertical-align:middle; } /* CTA-positie "Mobiel" (punt 1013, vervolg): dezelfde regel die de framework-skeleton * sinds 1.58.2486 gebruikt (site-header.css), hier toegevoegd omdat deze site een eigen * templates-/CSS-fork heeft die nooit meesynct met vendor-updates. Zonder dit stonden de * hoofdmenu-CTA en de nieuwe mobiele CTA allebei tegelijk in de kop op mobiel. */ @media (max-width: 767px) { .site-nav__ctas--mobile { display: flex; flex-direction: column; gap: .75rem; margin-top: 1.25rem; } .site-nav__ctas--mobile .site-nav__cta { width: 100%; justify-content: center; } .site-header__tools--has-mobile-cta > .site-nav__ctas--main { display: none; } } @media (min-width: 768px) { .site-nav__ctas--mobile { display: none; } } /* Hero-inhoud: 8 procentpunten omhoog vanuit midden. */ @layer site { .hero__overlay--middle { top: 42%; } } /* Menubalk iets meer hoogte (meer creme), zoals prototype (~95px ipv 82px). shell.css zet .site-header__inner padding op 1rem 1.5rem (ongelaagd); daarom hier ongelaagd + !important overschrijven. Cream-bg zit op .site-header en rekt automatisch mee. */ .site-header__inner{ padding-block: 1.4rem; } /* ===== Body-achtergrond lichter (sandwhite), zoals prototype (2026-09-14) ===== */ /* Header (.site-header) blijft #F2ECDF; alleen de body-band lichter naar #FBF8F2. */ body{ background-color:#FBF8F2; } /* ===== Responsive mobile fixes (2026-09-14) ===== */ /* Tommy Booking Support: boekings-pictogram (hart/"Wie"-veld) te groot op mobiel (~335×335px). */ .search-results__field-icon { max-width: 2.5rem; max-height: 2.5rem; object-fit: contain; } /* cnh-winter-v2: twee kolommen collaps niet automatisch op mobiel (eigen grid-template-columns overschrijft framework-collapse). */ @layer site { @media (max-width: 760px) { .cnh-winter-v2 .text-image__grid { grid-template-columns: 1fr; } } } /* ===== Footer-banner (SVR-logo): kleiner en rechts uitgelijnd (2026-09-17) ===== */ /* Geen design-slot voor dit element (bewust, Ronny) -- site-eigen maat/uitlijning. */ .site-footer__banner-img { max-width: 150px; margin-left: auto; } /* ===== Kruimelpad rechts uitlijnen binnen de 1280-body (2026-09-18) ===== */ /* design_breadcrumbs__layer landt justify-content op de nav-wrapper (.layer__breadcrumbs), niet op de flex-lijst ol.breadcrumb -> geen effect. Schema+renderer uitbreiden raakt de gedeelde layer-component (vlootbreed) en valt onder de freeze van punt 900. Ronny: site-CSS is hier DE (permanente) manier, niet tijdelijk. Zie Flow #1011 (vervolg #999). Ongelaagd zodat het de theme-layer verslaat. */ .layer__breadcrumbs ol.breadcrumb { justify-content: flex-end; } /* Footer: meer ruimte tussen top-rij en kolommen + boven de onderbalk (verzoek Age 2026-09-18) */ .site-footer__inner{ row-gap: clamp(2.2rem, 4.4vw, 56px); } .site-footer__credit{ margin-top: clamp(2.8rem, 5.6vw, 72px); } /* Timeline (Geschiedenis / over-ons): bolletjes + titels in themakleur 2 (verzoek Age 2026-09-18). Geen CMS-slot voor timeline-marker/titel-kleur -> site-CSS. Ongelaagd zodat het de theme-layer verslaat. */ .layer--timeline .timeline__item::before { background-color: var(--theme-color-2); } .layer--timeline .timeline__title { color: var(--theme-color-2); } /* Timeline (verticale/gestapelde variant = de 1241-look, over-ons): ruimte tussen titel+omschrijving en de bolletjes (verzoek Age 2026-09-18). .timeline:not(.timeline--vertical) = de gestapelde variant (de horizontale scroller heeft juist WEL .timeline--vertical). */ .timeline:not(.timeline--vertical) .timeline__body { padding: 16px clamp(22px, 2.6vw, 44px); background: #fbf8f2; border: 1px solid #ece4d3; border-radius: 14px; box-shadow: 0 6px 18px rgba(23, 33, 29, 0.06); } /* Wat ruimte tussen de kaders en de middenlijn/bolletjes (verzoek Age 2026-09-21). Item is calc(50% - 1.5rem) breed tegen z'n buitenrand -> kaart-binnenrand zat ~5px van het bolletje. Marge aan de binnenkant (odd = kaart links -> rechtermarge, even = kaart rechts -> linkermarge). */ .timeline:not(.timeline--vertical) .timeline__item:nth-child(odd) .timeline__body { margin-right: 1.25rem; } .timeline:not(.timeline--vertical) .timeline__item:nth-child(even) .timeline__body { margin-left: 1.25rem; } /* Bolletjes een subtiel pulserend effect (verzoek Age 2026-09-18, expliciete custom-css-toestemming). Behoudt de bestaande grijze ring (rgba(30,42,58,.2) 0 0 0 7.2px) en voegt een uitdijende teal-pulse toe. Lichte stagger per item = zachte golf; respecteert prefers-reduced-motion. */ .layer--timeline .timeline__item::before { animation: cnh-marker-pulse 2.6s ease-out infinite; } @keyframes cnh-marker-pulse { 0% { box-shadow: rgba(30,42,58,.2) 0 0 0 7.2px, rgba(23,132,128,.5) 0 0 0 0; } 70% { box-shadow: rgba(30,42,58,.2) 0 0 0 7.2px, rgba(23,132,128,0) 0 0 0 13px; } 100% { box-shadow: rgba(30,42,58,.2) 0 0 0 7.2px, rgba(23,132,128,0) 0 0 0 0; } } .layer--timeline .timeline__item:nth-child(2)::before { animation-delay: .3s; } .layer--timeline .timeline__item:nth-child(3)::before { animation-delay: .6s; } .layer--timeline .timeline__item:nth-child(4)::before { animation-delay: .9s; } .layer--timeline .timeline__item:nth-child(5)::before { animation-delay: 1.2s; } .layer--timeline .timeline__item:nth-child(6)::before { animation-delay: 1.5s; } .layer--timeline .timeline__item:nth-child(7)::before { animation-delay: 1.8s; } @media (prefers-reduced-motion: reduce) { .layer--timeline .timeline__item::before { animation: none; } } /* Logo groter bij start (200% = 72px hoog) en krimpt bij scrollen naar 150% (=54px). Verzoek Age 2026-09-18. Basis is .site-logo__img{height:36px}. .is-scrolled wordt door public/js/custom.js op de header gezet. Geen CMS-slot voor scroll-afhankelijke logo-grootte -> site-CSS/JS (gesanctioneerd). */ .site-header .site-logo__img { height: 72px; transition: height .28s ease; } .site-header.is-scrolled .site-logo__img { height: 54px; } /* Verrijkte boekingswidget op de accommodatiedetailpagina (templates/detail/rentable.php). */ @layer site { .rentable-book-card { background: #fff; border-radius: 16px; box-shadow: 0 8px 24px -12px rgba(22,71,81,.35); overflow: hidden; } .rentable-book-card__header { background: linear-gradient(120deg,#164751,#178480); color: #fff; font-weight: 700; padding: .85rem 1.25rem; font-size: 1.02rem; } .rentable-book-card__header + .rentable-book { border-radius: 0; box-shadow: none; } .rentable-book-card__included { list-style: none; margin: 0; padding: 1rem 1.25rem; display: grid; gap: .55rem; border-top: 1px solid #eee; } .rentable-book-card__included li { display: flex; align-items: flex-start; gap: .5rem; font-size: .9rem; color: #333; } .rentable-book-card__included-icon { flex: 0 0 auto; color: #178480; margin-top: .15rem; } .rentable-book-card__contact { display: flex; flex-direction: column; gap: .35rem; padding: .9rem 1.25rem 1.15rem; border-top: 1px solid #eee; font-size: .9rem; } .rentable-book-card__contact a { color: #164751; font-weight: 600; text-decoration: none; } .rentable-book-card__contact a:hover { text-decoration: underline; } } /* Zoekbalk "Wanneer"-datumknoppen: zolang er niets gekozen is, tonen Aankomst/ Vertrek EN een losse "--" -- dat is dubbelop. Het label (Aankomst/Vertrek) blijft in beide staten dezelfde stijl (geen visuele sprong bij het kiezen van een datum, Ronny, 20-09-2026) -- alleen de overbodige "--" verdwijnt zolang er niets gekozen is. Zodra een datum gekozen is (data-empty wordt "0" door date-picker.js) verschijnt de waarde gewoon weer onder het ongewijzigde label. */ .date-trigger[data-empty="1"] .form-field__value { display: none; } .date-trigger:not([data-empty="1"]) .form-field__sublabel { display: none; } .date-trigger .form-field__value { font-size: .85rem; font-weight: 600; color: #3a3a3a; } /* Zelfde ingevuld-vs-leeg-onderscheid ook op "Totale aanbod" en "Wie" (Ronny, 20-09-2026). */ .select-display:not([data-empty="1"]) .select-label { font-weight: 600; color: #3a3a3a; } .guests-btn:not([data-empty="1"]) .form-field__value { font-weight: 600; color: #3a3a3a; } .date-trigger .form-field__sublabel { font-size: .85rem; text-transform: none; letter-spacing: normal; color: var(--theme-color-4); } /* Gasten-veld kreeg vandaag hetzelfde label als Aankomst/Vertrek (framework PR 938) -- deze regel ontbrak nog: zelfde ingevuld-verbergt-het-label-gedrag als hierboven al voor .date-trigger geldt, anders staat "Personen" altijd naast een gevulde waarde terwijl een gevulde datum het label juist NIET toont (Ronny, 30-09-2026, screenshot). */ .guests-btn:not([data-empty="1"]) .form-field__sublabel { display: none; } .guests-btn .form-field__sublabel { font-size: .85rem; text-transform: none; letter-spacing: normal; color: var(--theme-color-4); } /* Kalender-popover: leesbaarheid op de teal maandvlakken verbeteren (Ronny, 20-09-2026). */ .date-day-head span { color: var(--theme-color-4); opacity: 1; font-weight: 700; } .date-cell[data-today="1"] { outline: 2px solid var(--theme-color-5); outline-offset: -2px; } .date-cell[data-selected="from"], .date-cell[data-selected="till"] { box-shadow: 0 2px 8px rgba(0,0,0,.25); } /* "Totale aanbod"-dropdown meer in lijn met de andere popovers (kalender/gasten): grotere afronding, zachtere schaduw, teal i.p.v. zwart voor hover/selectie (Ronny, 20-09-2026). */ .select-dropdown { border-radius: var(--radius-lg, 14px); box-shadow: var(--shadow-2, 0 2px 4px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.08)); padding: .375rem; } .select-option { padding: .6rem .75rem; border-radius: 8px; } .select-option:hover, .select-option[data-highlighted="1"] { background: var(--theme-color-3); color: var(--theme-color-2); } .select-option[data-selected="1"] { background: var(--theme-color-2); color: #fff; } /* Kalender: maandvlak transparant i.p.v. teal, teal verplaatst naar de geselecteerde datum zelf (Ronny, 20-09-2026). */ .date-popover { --date-surface: transparent; --date-accent: var(--color-bg-soft); --date-accent-text: #fff; } /* .date-action--primary verliest color van de globale button{color:inherit}-reset (die zit in een geneste framework.critical-sublaag die hier voorwint). Ongelaagde site-regel wint altijd, ongeacht laag/specificiteit (Ronny, 20-09-2026). */ .date-action--primary { color: var(--date-accent-text); } /* Leaflet 1.9.4 (CDN, unpkg) zet zelf `mix-blend-mode: plus-lighter` op elke tegel -- een fix van Leaflet voor tegelnaden tijdens zoom-animaties in Chromium (zie hun eigen commentaar: https://bugs.chromium.org/p/chromium/issues/detail?id=600120). Bijeffect hier: zichtbare witte lijnen op de tegelnaden, want overlappende tegelranden tellen bij `plus-lighter` bij elkaar op richting wit. Ronny wil dat niet op deze site (20-09-2026); teruggezet naar normaal. */ [data-map].leaflet-container img.leaflet-tile { mix-blend-mode: normal; } /* Hero-carrousel hoogte-fix (verzoek Age 2026-09-21: hero onzichtbaar na aanzetten fade-carrousel). Framework-gap: in carrousel-modus staan de foto's als CSS-achtergrond op absolute .hero__slides (geen , geen hoogte). De absolute slides/overlays worden gepositioneerd t.o.v. .layer__sc -> die hoort de hoogte te dragen. Theme-gap -> gesanctioneerde site-CSS. Formaat 'Normaal' 1920x800 = 12/5; mobiel volgt de mobiele crop. */ .layer--hero.hero--slides .layer__sc { aspect-ratio: 12 / 5; } .layer--hero.hero--slides .hero__slides { inset: 0; } .layer--hero.hero--slides .carousel, .layer--hero.hero--slides .carousel__viewport, .layer--hero.hero--slides .carousel__container, .layer--hero.hero--slides .hero__slide { height: 100%; } @media (max-width: 640px) { .layer--hero.hero--slides .layer__sc { aspect-ratio: 78 / 82; } } /* Home 'Onze kampeerplaatsen' (laag 241, .cnh-pitches). Verzoek Age 2026-09-22: 1) opsomming-iconen kleiner (32->24px) zodat ze netjes op de tekstregel uitlijnen (m.n. camper, 2-regelig); 2) 'Meer informatie'-knop gecentreerd + licht-ghost stijl zoals prototype (.btn--light), i.p.v. donkere knop. */ .cnh-pitches .enumerations { --enum-icon-size: 24px !important; } /* inline var overrulen */ .cnh-pitches .layer-cards__actions { text-align: center; } .cnh-pitches .layer-cards__button { background: rgba(255,255,255,.14); color: #fff; border: 2px solid rgba(255,255,255,.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); transition: background .18s, color .18s; } .cnh-pitches .layer-cards__button:hover { background: #fff; color: #178480; border-color: #fff; } /* Home-tegels (laag 220, .cnh-tiles): leuke hover -> kaart licht op (translateY + schaduw) en de foto zoomt subtiel in. Verzoek Age 2026-09-22. CMS-hover kent alleen pijltje/grijswaarde; lift+zoom kan alleen via site-CSS. Kaart heeft al overflow:hidden. */ .cnh-tiles .card { transition: transform .28s ease, box-shadow .28s ease; } .cnh-tiles .card:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(23,33,29,.20); } .cnh-tiles .card .media__viewport img { transition: transform .5s ease; } /* geen will-change: dat brak de afgeronde onderhoeken */ .cnh-tiles .card:hover .media__viewport img { transform: scale(1.06); } @media (prefers-reduced-motion: reduce) { .cnh-tiles .card, .cnh-tiles .card .media__viewport img { transition: none; } .cnh-tiles .card:hover { transform: none; } .cnh-tiles .card:hover .media__viewport img { transform: none; } } /* Mini-wintercamping (home, .cnh-winter-v2): foto bovenaan houden. Het text_image-grid staat op align-items:center, waardoor de foto meezakt bij het uitklappen van 'Lees meer'. CMS column_vertical_alignment='top' compileert hier niet. Verzoek Age 2026-09-22. */ .cnh-winter-v2 .layer-text__grid { align-items: start; } /* Bovenkant foto laten beginnen bij de eerste tekstregel (onder eyebrow+titel), niet bij de eyebrow. Alleen desktop (2-koloms). */ @media (min-width: 768px) { .cnh-winter-v2 .layer-text__grid .ds-column2 { margin-top: 74px; } } /* Home-tegels (laag 220, .cnh-tiles): onderhoeken waren vierkant. De foto (.card__media) is wel afgerond (16px), maar de groene overlay + tekstlaag (.card__overlay/.card__caption) liggen als absolute broers eroverheen zonder afronding en staken vierkant onderuit. Wrapper .card__inner (aspect-ratio 3/4) afronden + clippen zodat alle lagen mee-afronden. Verzoek Age 2026-09-22. */ .cnh-tiles .card__inner { border-radius: 16px; overflow: hidden; } /* Activiteiten-galerij (album 1281, verzoek Age 2026-09-22): het album heeft 10 foto's zodat de lightbox-pop-up er meer laat bladeren. grid-2-11-11 is een 5-mozaïek (1 groot + 4 klein); het framework zet de EXTRA foto's op media-album__repeat-hidden en maakt van de eerstvolgende een 'overflow'-tegel met een +N-badge (data-remaining). In dit 5-mozaïek valt die overflow-tegel als losse 6e foto onder de mozaïek. Daarom: de losse overflow-tegel verbergen en het '+N meer'-label als GROENE badge op de laatste mozaïek-tegel (de gebak-foto = nth-child 5) tonen. Die tegel opent zelf al de pop-up, dus de badge is puur visueel (pointer-events:none). Het getal kwam hier uit een hardgecodeerde "4+", en dat ging op twee manieren mis: sinds framework 1.58.2564 draagt ELKE tegel z'n eigen `data-remaining` (het aantal foto's ná die positie), dus het kan uit de markup komen. 1. Op de home-galerij staan 5 foto's en is er niets verborgen -- daar stond toch een "4+". De laatste tegel heeft `data-remaining="0"`, en die sluiten we nu uit. 2. Op deze galerij (10 foto's) was "4+" net verkeerd. Het framework rekent met een ZICHTBARE overflow-tegel en komt dan op 4; wij verbergen die tegel juist, dus er zitten er 5 achter. `attr()` op de 5e tegel geeft precies dat. (Kwik, 22-09-2026, na punt 1084.) */ .cnh-gallery .media-album > figure.media-album__repeat-overflow { display: none !important; } .cnh-gallery .media-album > figure:nth-child(5) { position: relative; } .cnh-gallery .media-album > figure:nth-child(5):not([data-remaining="0"])::after { content: attr(data-remaining) "+"; position: absolute; right: 12px; bottom: 12px; display: flex; align-items: center; justify-content: center; min-width: 2.1em; height: 2.1em; padding: 0 .5em; background: #ffffff; color: #178480; font-weight: 700; font-size: 1rem; line-height: 1; border-radius: 999px; box-shadow: 0 2px 10px rgba(23,33,29,.28); pointer-events: none; } /* Sfeerimpressie-galerij (.cnh-gallery, klasse komt uit het CMS). De VORM komt uit het CMS: `format` bepaalt 1 groot + 4 klein, en "Afbeeldingen schalen/bijsnijden" (900x1200) bepaalt dat de cellen staand zijn. Deze drie regels doen alleen wat het CMS niet kan: 1. de grote tegel smaller dan de helft, zodat de vier kleine meer ruimte krijgen; 2. de vier kleine op dezelfde staande verhouding als de schaalmaat (3:4) -- laat je dit weg, dan houdt het thema landschap-cellen en steekt het beeld eruit; 3. het beeld de cel laten vullen; de grote tegel overspant twee rijen en is daardoor hoger dan 3:4, dus zonder deze regel blijft er ruimte onder staan. Houd punt 2 en de schaalmaat gelijk: verandert de een, dan de ander mee. (dushi, 22-09-2026) */ .cnh-gallery .media-album { grid-template-columns: .85fr .85fr 1.15fr 1.15fr; } .cnh-gallery .media-album > figure:nth-child(n+2) { aspect-ratio: 3 / 4; } .cnh-gallery .media-album figure .media { aspect-ratio: auto; height: 100%; width: 100%; } /* ===== Mobiel menu (naar RVS-voorbeeld, Noorthey-huisstijl) — v2 na feedback Age 2026-09-22: overlay volledig dekkend, submenu-tekst wit, accordeon-chevron rechts, zwevende pijltjes weg, compacter logo. Puur site-CSS = de EH-manier (zoals RVS). ===== */ @media (max-width: 767px) { /* Volle-hoogte overlay, VOLLEDIG dekkend (geen doorschemeren) */ html[data-menu-open="true"] .site-nav { height: calc(100dvh - 100%); max-height: calc(100dvh - 100%); background: #164751; border-bottom: 0; box-shadow: 0 18px 40px -12px rgba(0,0,0,.5); padding: 1rem 1.5rem 2rem; } /* Hoofd-items: witte tekst, ruime rij, scheidingslijn onder het hele item */ html[data-menu-open="true"] .site-nav .site-nav__item { border-bottom: 1px solid rgba(255,255,255,.14); } html[data-menu-open="true"] .site-nav .site-nav__item > a, html[data-menu-open="true"] .site-nav .site-nav__link { color: #fff; border-bottom: 0; padding: .95rem .25rem; font-size: 1.06rem; font-weight: 600; } html[data-menu-open="true"] .site-nav .site-nav__item > a:hover, html[data-menu-open="true"] .site-nav .site-nav__link:hover { color: #E79E36; } /* Dropdown-item als flex-rij zodat de accordeon-chevron RECHTS uitlijnt */ html[data-menu-open="true"] .site-nav .site-nav__item--has-dropdown { display: flex; flex-wrap: wrap; align-items: center; } html[data-menu-open="true"] .site-nav .site-nav__item--has-dropdown > .site-nav__link { flex: 1 1 auto; } html[data-menu-open="true"] .site-nav .site-nav__submenu-toggle { margin-left: auto; color: #fff; } html[data-menu-open="true"] .site-nav .site-nav__item.is-submenu-open > .site-nav__submenu-toggle { color: #E79E36; } /* Submenu op volle breedte onder het hoofd-item, zonder eigen kader */ html[data-menu-open="true"] .site-nav .site-nav__item--has-dropdown > .site-nav__dropdown { flex: 0 0 100%; position: static; inset: auto; transform: none; width: 100%; min-width: 0; max-width: none; margin: 0; background: transparent; border: 0; box-shadow: none; border-radius: 0; padding: .2rem 0 .6rem; } /* desktop grid-kolommen -> normale blok-lijst op mobiel */ html[data-menu-open="true"] .site-nav .site-nav__dropdown .site-nav__columns { display: block; } html[data-menu-open="true"] .site-nav .site-nav__dropdown .site-nav__column, html[data-menu-open="true"] .site-nav .site-nav__dropdown .site-nav__column-list, html[data-menu-open="true"] .site-nav .site-nav__dropdown .mb__dropdown { display: block; width: 100%; min-width: 0; max-width: none; padding: 0; margin: 0; } /* Submenu-links: volle breedte, WITTE tekst (override desktop-dropdown #03514c) */ html[data-menu-open="true"] .site-nav .site-nav__dropdown a { display: block; width: 100%; padding: .62rem .25rem .62rem 1rem; } html[data-menu-open="true"] .site-nav .site-nav__dropdown .mb__item-title, html[data-menu-open="true"] .site-nav .site-nav__dropdown .site-nav__item-title { color: rgba(255,255,255,.88); font-weight: 500; } html[data-menu-open="true"] .site-nav .site-nav__dropdown a:hover .mb__item-title, html[data-menu-open="true"] .site-nav .site-nav__dropdown a:hover .site-nav__item-title { color: #E79E36; } /* Zwevende desktop-dropdown-pijltjes (amber → en blauwe chevron) verbergen op mobiel */ html[data-menu-open="true"] .site-nav .mb__item-link::after, html[data-menu-open="true"] .site-nav .site-nav__dropdown-link::before { display: none; } /* Mobiele CTA's onderaan iets meer lucht (vol-breed regelt bestaande regel al) */ html[data-menu-open="true"] .site-nav .site-nav__ctas--mobile { margin-top: 1.4rem; } /* Logo compacter + header krapper op mobiel */ .site-header .site-logo__img { height: 52px; } .site-header.is-scrolled .site-logo__img { height: 42px; } .site-header__inner { padding-block: 1rem; } } /* Boekingskaarten (kampeerplaatsen-overzicht), punt 1110: amber CTA-stijl zoals de Reserveren-knop (.booking__submit), gecentreerd i.p.v. links/vol-breed-donker; foto alleen boven afgerond (de kaart zelf clipt anders alle vier de hoeken via overflow:hidden); een teal balk van 8px direct onder de foto via border-bottom, geen extra markup nodig. */ .search-results__card-media { border-radius: 12px 12px 0 0; border-bottom: 8px solid #178480; } .search-results__card-foot { justify-content: center; } .search-results__card-cta { display: inline-flex; align-items: center; justify-content: center; background: #E79E36; color: #3a2410; border-radius: 999px; font-weight: 700; padding: 0 1.4rem; height: 48px; } /* Menu-linkkleur = prototype: petrol-deep #164751, hover teal #178480. Menubuilder-links (.mb__* / .site-nav__link) erven var(--fg) (#1a1a1a); de design_navigation menu-slots landen niet op het menubuilder-menu, dus geen CMS-veld hiervoor. .site-header-prefix voor specificiteit; raakt de Reserveren-CTA niet. - verzoek Age */ .site-header .site-nav__link, .site-header .site-nav__dropdown-link{ color:#164751; } .site-header .site-nav__link:hover, .site-header .site-nav__dropdown-link:hover{ color:#178480; } /* Plattegrond-intro (laag 1116): tekst verticaal gecentreerd t.o.v. de (grotere) foto, zoals de andere gecentreerde intro-blokken. - verzoek Age */ .cnh-intro-vcenter .layer-text__grid, .cnh-intro-vcenter .text-image__grid{ align-items:center; } /* Dronebeelden (tijdelijk) — home placeholder-foto 960x540, wacht op video (Flow #1135). Age 24-09. */ .cnh-drone-tijdelijk .layer__col-inner{ text-align:center; } .cnh-drone-tijdelijk .card__eyebrow, .cnh-drone-tijdelijk .card__title{ text-align:center; } .cnh-drone-tijdelijk .module-col__media{ max-width:960px; margin-inline:auto; } .cnh-drone-tijdelijk .layer__inner{ padding-top:3.5rem; padding-bottom:7rem; } /* Accommodatie-detail: alinea-afstand + typografie gelijk aan home-prose (Age 24-09). */ .rentable-detail__content p{ margin:0 0 1.0625rem; font-size:1.0625rem; line-height:1.7; } .rentable-detail__content p:last-child{ margin-bottom:0; } /* Header-inner uitlijnen op de content-randen (logo links, menu+CTA rechts), sitebreed — Age 25-09. */ .site-header__inner{ width:min(1280px, 100% - 64px); max-width:none; padding-left:0; padding-right:0; } /* Hero: pauzeknop verbergen als er maar 1 slide is (Age 25-09). */ .hero .carousel:not(:has(.carousel__slide ~ .carousel__slide)) .carousel__pause{ display:none; } /* Boekingsresultaten-grid (kampeerplaatsen-overzicht): bredere kaarten zodat de 3 kaarten de volle rij vullen. Framework zet inline .search-results__grid{grid-template-columns: repeat(auto-fill,minmax(260px,1fr))} -> op 1280px 4 kolommen van ~305px, dus met 3 accommodaties bleef de 4e kolom leeg. Geen CMS-veld/opmaak-slot hiervoor. Twee-class- selector (zelfde element) wint van de enkel-class framework-regel, ongeacht bronvolgorde. minmax 360px -> 3 kolommen van ~413px op 1280, valt netjes terug naar 2/1 op smaller. Verzoek Age 2026-09-24. */ .search-results__grid.ds-booking-results_grid { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); } /* (verwijderd) De intro/inhoud stond eerder vol-breed onder de bovenrij met een max-width- begrenzing; sinds de tekst in de linkerkolom naast de widget staat (template rentable.php) is die begrenzing overbodig. Age 2026-09-24. */ /* Features-kaart op de accommodatie-detailpagina (rechterkolom, onder de beschikbaarheid-box). Voorheen stonden de eigenschappen (Voorzieningen) + Huisdieren in de body; nu als eigen kaart rechts, in Noorthey-stijl (zelfde kop-gradient/afronding als .rentable-book-card, rijen met label links en waarde rechts). Verzoek Age 2026-09-24. */ @layer site { .rentable-features-card { margin-top: 1rem; background: #fff; border-radius: 16px; box-shadow: 0 8px 24px -12px rgba(22,71,81,.35); overflow: hidden; } .rentable-features-card__header { background: #fff; color: #178480; font-weight: 700; padding: .85rem 1.25rem; font-size: 1.05rem; border-bottom: 1px solid #eee; } .rentable-features-card__list { margin: 0; padding: .35rem 1.25rem; } .rentable-features-card__row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .68rem 0; border-top: 1px solid #eee; } .rentable-features-card__row:first-child { border-top: 0; } .rentable-features-card__row dt { margin: 0; display: inline-flex; align-items: center; gap: .6rem; color: #3f4a46; font-size: .92rem; } .rentable-features-card__icon { flex: 0 0 auto; width: 18px; height: 18px; color: #178480; } .rentable-features-card__icon svg { width: 100%; height: 100%; display: block; } .rentable-features-card__row dd { margin: 0; color: #164751; font-weight: 700; font-size: .92rem; text-align: right; } } /* Winterkampeerplaatsen (laag 1405, /kampeerplaatsen): een tekst-laag met knop wordt door het framework als DONKERE CTA-band gerenderd (.layer--cta, bg #17211D). Age wil hier juist de lichte look van 'Caravan comfort'. Ongelaagd + 2-class-specificiteit (.layer--cta.cnh-winter-cta) om de framework-CTA-bg te overrulen; knop terug naar de standaard groene knop (leesbaar op licht). Andere CTA-banden (bv. home Eind-CTA) blijven donker. Age 2026-09-25. */ .layer--cta.cnh-winter-cta { background-color: #FBF8F2; } /* Knop: laat de standaard ghost-stijl (zoals 'Lees meer': faint teal bg + teal tekst/rand, met rechter-pijl) staan; alleen de band is gelicht. Age 2026-09-25. */ /* Winterkampeerplaatsen: tekstlaag smaller (max 800px) en gecentreerd (verzoek Age 2026-09-25). */ .cnh-winter-cta > .layer__sc > .layer__inner { max-width: 800px; margin-inline: auto; } /* Badge "Ook in de winter" op de kampeerplaats-kaart Tent/caravan/camper (item 416, /kampeerplaatsen). De booking-kaart heeft geen CMS-badgeveld (schema gecheckt) en de badge mag niet in de foto -> site-CSS overlay. Item-specifiek via data-rentable-id (enige stabiele hook voor deze ene kaart); tekst als pseudo-content, amber pill in huisstijl (zoals de home-badges). Verzoek Age 2026-09-25. */ .search-results__card[data-rentable-id="416"] .search-results__card-media { position: relative; } .search-results__card[data-rentable-id="416"] .search-results__card-media::after { content: "Ook in de winter"; position: absolute; top: 12px; left: 12px; z-index: 2; padding: 7px 13px; border-radius: 14px; background: #E79E36; color: #17211D; font-family: "Mulish", system-ui, sans-serif; font-weight: 700; font-size: 13px; line-height: 1; box-shadow: 0 2px 8px rgba(23,33,29,.22); pointer-events: none; } /* ========================================================================= Mobiele verbeteringen (verzoek Age 2026-09-25) ========================================================================= */ /* [1] Accommodatie-detail: op mobiel eerst Beschikbaarheid + Kenmerken, dan de omschrijving. .rentable-detail__top is 1 kolom op mobiel met .rentable-detail__main (galerij + tekst) en .rentable-detail__book-col (boekingskaart + features-kaart). display:contents haalt beide wrappers weg zodat hun leaf-blokken direct in de flex-kolom vallen; volgorde: galerij -> boekingskaart -> features -> omschrijving. */ @media (max-width: 767px) { /* align-items:stretch is de eigenlijke fix (zie toelichting onder): min-width:0 hierboven loste het niet op, want dit is geen min-width-probleem. */ .rentable-detail__top { display: flex; flex-direction: column; align-items: stretch; } .rentable-detail__main, .rentable-detail__book-col { display: contents; } /* De WERKELIJKE oorzaak (Ronny, 30-09-2026, camper-caravan-max-7-meter-plaatsen-a-t-m-f): templates/detail/rentable.php zet op .rentable-detail__top ONGESCOPED (dus ook op mobiel) `align-items: start` -- bedoeld voor de DESKTOP grid-layout, waar dat voorkomt dat grid-items verticaal uitrekken. Op mobiel wordt display hier omgezet naar flex-column, en in die richting is align-items de CROSS-as (breedte): `start` betekent dan "krimp naar de eigen inhoud" i.p.v. "rek uit naar de volle breedte". Door display:contents hierboven is .rentable-detail__gallery het echte flex-item, en die kreeg zo zijn eigen intrinsieke inhoudsbreedte (552px bij 7 thumbnails) i.p.v. de 390px van het scherm -- zichtbaar als een absurde --scrollbar-comp:169px (bijwerking van innerWidth-clientWidth, geen echte scrollbalk). `align-items:stretch` hierboven herstelt het uitrekken alleen voor deze mobiele context; de desktop-grid (@media min-width:56rem verderop) blijft ongemoeid. min-width:0 hieronder blijft staan als extra vangnet, kost niets. */ .rentable-detail__gallery { order: 1; min-width: 0; } .rentable-book-card { order: 2; } .rentable-features-card { order: 3; margin-top: 0; } .rentable-detail__body { order: 4; } } /* [2] Hero-zoekbalk: subtiele chevron per veld (opent dropdown/kalender/gasten) en de sublabel/waarde dichter op het label. Chevron als currentColor-mask rechts in het veld, teal en halftransparant. Alle 3 de velden (.booking__field); de amber verstuurknop is een los element (.booking__submit) en krijgt er dus geen. Mag ook op desktop (Age). */ /* Elk boekingsveld een up/down-pijltje rechts (dezelfde soort pijl als de dropdown al toont), currentColor-mask in teal, met wat meer ruimte aan de zijkant (Age 25-09). */ .booking__field { padding-right: 1.7em; } /* Native OS-pijl van de