/* * Layer-styles — generic patterns gedeeld over alle layer-types, * plus type-specifieke styling per .layer__xxx. * * Container queries op .layer voor module-flexibel responsive gedrag * (Safari 16+). Pagina-niveau media queries voor de outer layout. */ /* .layer staat nu op de sectie zelf (full-bleed, samen met .layer-section); breedte/centrering/container zijn verhuisd naar .layer__inner. Geneste lagen (een .layer binnen een andere laag, dus ZONDER sectie-wrapper) behouden hun eigen centrering/breedte. */ .layer:not(.layer-section) { container-type: inline-size; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter); } /* Universele sectie-wrapper — de orchestrator wrapt ELKE laag hierin: full-bleed achtergrond (.layer__bg) + gecentreerde inner (.layer__inner, bevat de bestaande .layer) + voorgrond-overlay (.layer__fg). Zonder design-velden zijn bg/fg leeg + transparant → geen visueel effect. Per-sectie design-CSS (`.s`) wordt in de geïnjecteerd en zet o.a. background/aspect-ratio op .layer__bg en width/padding op .layer__inner. */ .layer-section { position: relative; /* Geen default verticale padding: spacing komt UITSLUITEND uit design_layer (op .s). Lagen zonder design hebben dus geen sectie-padding. */ } .layer-section > .layer__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background-position: center; background-size: cover; background-repeat: no-repeat; } .layer-section > .layer__sc { position: relative; z-index: 1; } /* De inner is de content-box: gecentreerd, met gutter, EN de containment- context (container-type) waartegen álle `@container`-queries van de lagen meten (USP-grid, columns, text-layout, cards, …). Zonder deze regel matcht geen enkele @container → alles valt terug op de mobiele 1-koloms layout. De site-design-regel vult dit aan met width/max-width maar levert GEEN container-type/centrering, dus deze regel moet blijven bestaan. */ .layer-section > .layer__sc > .layer__inner { container-type: inline-size; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter); } /* Full-bleed lagen (header, filling-text, separator, …): de inner over de volledige sectiebreedte. Bewust 0,4,0-specificity (.layer-section.layer--bleed) + expliciete width:100% zodat dit de site-brede design_general-breedte op `.layer-section > .layer__sc > .layer__inner{width:90%;max-width:1280px}` verslaat (die inline ná dit bestand wordt geïnjecteerd). */ .layer-section.layer--bleed > .layer__sc > .layer__inner { width: 100%; max-width: none; padding-inline: 0; } .layer-section > .layer__fg { position: absolute; inset: 0; z-index: 2; pointer-events: none; background-position: center; background-size: cover; background-repeat: no-repeat; } /* ────────────────────────────────────────────────────────────────────── layer__text ────────────────────────────────────────────────────────────────────── */ .layer__text-layout { display: grid; gap: var(--space-5); grid-template-columns: 1fr; } /* Wanneer er een media-kolom is, twee kolommen vanaf wat container-breedte */ @container (min-width: 36rem) { .layer__text-layout[data-media-only="0"] { grid-template-columns: 1fr 1fr; align-items: center; } .layer__text-layout[data-layout="25-75"][data-media-only="0"] { grid-template-columns: 1fr 3fr; } .layer__text-layout[data-layout="33-66"][data-media-only="0"] { grid-template-columns: 1fr 2fr; } .layer__text-layout[data-layout="75-25"][data-media-only="0"] { grid-template-columns: 3fr 1fr; } .layer__text-layout[data-layout="100"][data-media-only="0"] { grid-template-columns: 1fr; } } .layer__text-layout[data-rtl="1"] { direction: rtl; } .layer__text-layout[data-rtl="1"] > * { direction: ltr; } .layer__text-layout[data-btt="1"] { flex-direction: column-reverse; } .layer__text-layout[data-align="center"] { text-align: center; max-width: 50rem; margin-inline: auto; } /* ── Filling (text_image) ────────────────────────────────────────────── De media-kolom bloedt edge-to-edge en vult de volle kolomhoogte; de tekst blijft uitgelijnd op de leesbare content-breedte. De inner gaat full-width (zie .layer--bleed) zodat de afbeelding tot de sectierand reikt; de grid verdeelt via --left-ratio (default .5 als de renderer niets meegeeft). */ .layer__text-layout[data-filling="1"] { gap: 0; } .layer__text-layout[data-filling="1"] > .layer__text-col--1 { padding-inline: var(--gutter); padding-block: var(--space-4); } @container (min-width: 36rem) { .layer__text-layout[data-filling="1"][data-media-only="0"] { grid-template-columns: calc(var(--left-ratio, .5) * 100%) calc((1 - var(--left-ratio, .5)) * 100%); align-items: stretch; } .layer__text-layout[data-filling="1"] > .layer__text-col--1 { display: flex; flex-direction: column; justify-content: center; padding-inline-start: max(var(--gutter), calc((100cqw - var(--content-max)) / 2)); padding-inline-end: var(--space-5); padding-block: var(--space-5); } .layer__text-layout[data-filling="1"] > .layer__text-col--2 { min-width: 0; } .layer__text-layout[data-filling="1"] .layer__text-media { height: 100%; margin: 0; border-radius: 0; box-shadow: none; } /* Alleen de hoofdafbeelding vullen — overlay/hover (mm-media-overlay / -hover) houden hun eigen object-fit/object-position (overlay_position). */ .layer__text-layout[data-filling="1"] .layer__text-media img:not(.mm-media-overlay):not(.mm-media-hover) { height: 100%; object-fit: cover; } } .layer__text-content { display: flex; flex-direction: column; gap: var(--space-3); } .layer__text-tagline { font-size: var(--fs-tagline); text-transform: uppercase; letter-spacing: .08em; color: var(--color-fg-muted); font-weight: 600; } .layer__text-title { font-size: var(--fs-h2); font-weight: 700; } .layer__text-subtitle { font-size: var(--fs-h3); font-weight: 500; color: var(--color-fg-muted); } .layer__text-intro { font-size: var(--fs-intro); } .layer__text-text :is(p:last-child) { margin-bottom: 0; } .layer__text-text ul, .layer__text-text ol { padding-left: 1.25em; } .layer__text-buttons { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); } .layer__text-media { margin: 0; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-1); } .layer__text-media img { width: 100%; } .layer__text-media-caption { padding: var(--space-2) var(--space-3); color: var(--color-fg-muted); font-size: .9rem; display: grid; gap: .15rem; } /* text_form-kolom — de wrapper om het CMS-form. Geen extra padding: het form zelf heeft via .form-field BEM al spacing. Een kader geeft context. */ .layer__text-form { background: var(--color-bg-soft); border-radius: var(--radius-md); padding: var(--space-4) var(--space-4) var(--space-5); border: 1px solid var(--color-border); } /* Succes-banner na formulier-inzending (?sent=1). */ .form-success { display: flex; align-items: flex-start; gap: var(--space-3); background: color-mix(in srgb, var(--color-primary) 10%, transparent); border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent); border-radius: var(--radius-md); padding: var(--space-4); color: var(--color-fg); } .form-success p { margin: 0; font-weight: 500; } /* ────────────────────────────────────────────────────────────────────── layer__header — hero / page-header ────────────────────────────────────────────────────────────────────── */ .layer__header { padding: 0; margin-bottom: var(--space-6); } /* Header strekt over de volledige viewport — full-bleed via .layer--bleed (de renderer zet die class; zie de regel bij .layer-section.layer--bleed). Alleen de payoff-tekst krijgt een max-width, zie .layer__header-overlay. */ .layer__header-body { position: relative; overflow: hidden; isolation: isolate; display: grid; /* aspect-ratio wordt inline gezet vanuit PHP (uit header_size) zodat de container exact de hoogte van de image krijgt — geen stretching, geen extra cropping bovenop object-fit. */ } /* `full`-format: fullscreen viewport-vullend, geen aspect-ratio uit image */ .layer__header-body[data-format="full"] { min-height: 100dvh; } /* Maximum-hoogte cap zodat ultra-wide banners op smal scherm niet absurd hoog worden. CSS `clamp()` voor smooth schalen. */ .layer__header-body[data-format="normal"], .layer__header-body[data-format="small"], .layer__header-body[data-format="original"] { max-height: 80dvh; width: 100%; } .layer__header-media-wrap { position: absolute; inset: 0; z-index: -1; } .layer__header-media-wrap .mm-media, .layer__header-media-wrap img, .layer__header-media-wrap video { width: 100%; height: 100%; object-fit: cover; } .layer__header-overlays { position: absolute; inset: 0; z-index: 1; pointer-events: none; /* Alle overlays in dezelfde cel — individueel positioneerbaar via align-self/justify-self zonder dat ze elkaars flow verstoren. */ display: grid; grid-template: 1fr / 1fr; } .layer__header-overlay { grid-area: 1 / 1; pointer-events: auto; max-width: var(--content-max); width: 100%; /* Standaard: links-onderaan (klassieke payoff-positie) */ align-self: end; justify-self: start; padding: var(--space-7) var(--gutter); display: flex; flex-direction: column; gap: var(--space-3); color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .35); } /* Horizontale positionering */ .layer__header-overlay[data-position-horizontal="left"] { justify-self: start; } .layer__header-overlay[data-position-horizontal="center"] { justify-self: center; } .layer__header-overlay[data-position-horizontal="right"] { justify-self: end; } /* Verticale positionering */ .layer__header-overlay[data-position-vertical="start"] { align-self: start; } .layer__header-overlay[data-position-vertical="center"] { align-self: center; } .layer__header-overlay[data-position-vertical="end"] { align-self: end; } /* Gradient over de volledige header-body voor leesbaarheid op afbeeldingen. Op de body i.p.v. payoff::before zodat hij altijd 100% breed is, ongeacht de centered max-width van de payoff. */ .layer__header-body:has(.layer__header-media-wrap)::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.55), transparent 70%); pointer-events: none; } .layer__header-title { font-size: var(--fs-h1); font-weight: 700; line-height: var(--line-tight); max-width: 30ch; } .layer__header-subtitle { font-size: var(--fs-h3); font-weight: 500; max-width: 50ch; opacity: .95; } .layer__header-buttons { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); } /* Voor header zonder media → gewone achtergrond + tekst-kleur */ .layer__header-body:not(:has(.layer__header-media-wrap)) { background: var(--color-bg-soft); } .layer__header-body:not(:has(.layer__header-media-wrap)) .layer__header-overlay { color: var(--color-fg); text-shadow: none; } .layer__header-body:not(:has(.layer__header-media-wrap))::before { display: none; } /* ────────────────────────────────────────────────────────────────────── layer__cards — grid van banner-cards ────────────────────────────────────────────────────────────────────── */ .layer__cards-heading { margin-bottom: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); } .layer__cards-title { font-size: var(--fs-h2); font-weight: 700; } .layer__cards-subtitle { font-size: var(--fs-h3); color: var(--color-fg-muted); } .layer__cards-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(var(--cols-min, 1), 1fr); } .layer__cards-grid[data-cols-min="1"] { --cols-min: 1; } .layer__cards-grid[data-cols-min="2"] { --cols-min: 2; } .layer__cards-grid[data-cols-min="3"] { --cols-min: 3; } /* Container-query: meer kolommen als er ruimte is */ @container (min-width: 30rem) { .layer__cards-grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); } .layer__cards-grid[data-cols="3"] { grid-template-columns: repeat(2, 1fr); } .layer__cards-grid[data-cols="4"] { grid-template-columns: repeat(2, 1fr); } } @container (min-width: 50rem) { .layer__cards-grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); } .layer__cards-grid[data-cols="4"] { grid-template-columns: repeat(3, 1fr); } } @container (min-width: 70rem) { .layer__cards-grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); } } .layer__cards-grid[data-title-align="center"] .card { text-align: center; } .layer__cards-grid[data-title-align="right"] .card { text-align: right; } .card { display: grid; gap: var(--space-2); color: inherit; text-decoration: none; border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg); box-shadow: var(--shadow-1); transition: transform .15s ease, box-shadow .15s ease; } .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); } .card__media { width: 100%; } .card__media img { width: 100%; height: auto; display: block; } .card__title { font-size: 1.05rem; font-weight: 600; padding: 0 var(--space-3); } .card__subtitle { font-size: .9rem; color: var(--color-fg-muted); padding: 0 var(--space-3) var(--space-3); } /* Format-varianten (data-attribute op section) */ .layer__cards[data-subtype="postcard"] .card { border-radius: var(--radius-lg); } .layer__cards[data-subtype="wave"] .card__media img { border-radius: var(--radius-md); } .layer__cards-empty { padding: var(--space-5); text-align: center; color: var(--color-fg-muted); background: var(--color-bg-soft); border-radius: var(--radius-md); } .layer__cards-bottom { margin-top: var(--space-5); display: flex; justify-content: center; } /* ────────────────────────────────────────────────────────────────────── layer__postcard — carousel-stijl met bg-image + overlay + tiles ────────────────────────────────────────────────────────────────────── */ .layer__postcard { max-width: none; padding: 0; margin-bottom: var(--space-6); } .postcards { position: relative; isolation: isolate; min-height: clamp(20rem, 50vw, 32rem); color: #fff; overflow: hidden; } /* Achtergrond — fade-transition tussen frames */ .postcards__bg { position: absolute; inset: 0; z-index: -2; } .postcards__bg img, .postcards__bg .mm-media { width: 100%; height: 100%; object-fit: cover; transition: opacity .35s ease; } /* Gradient onder de tekst zodat 'm leesbaar blijft op willekeurige bgs */ .postcards::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 30%, rgba(0,0,0,.45) 75%, rgba(0,0,0,.7)); z-index: -1; pointer-events: none; } .postcards__content { position: relative; max-width: var(--content-max); margin: 0 auto; padding: var(--space-7) var(--gutter) var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; min-height: clamp(14rem, 30vw, 22rem); text-shadow: 0 1px 3px rgba(0,0,0,.35); } .postcards__title { font-size: var(--fs-h1); font-weight: 700; line-height: var(--line-tight); max-width: 24ch; margin: 0; } .postcards__desc { font-size: var(--fs-intro); max-width: 50ch; margin: 0; opacity: .95; } .postcards__cta { margin-top: var(--space-2); } /* Tiles wrapper — geen eigen scroll meer, de carousel doet dat zelf */ .postcards__tiles { position: relative; max-width: var(--content-max); margin: 0 auto; padding: var(--space-3) var(--gutter) var(--space-4); } .postcard { background: transparent; border: 0; padding: 0; cursor: pointer; text-align: left; border-radius: var(--radius-md); overflow: hidden; color: inherit; transition: transform .15s ease; opacity: .65; width: 100%; } .postcard:hover { transform: translateY(-2px); opacity: 1; } .postcard--active { opacity: 1; outline: 2px solid #fff; outline-offset: -2px; } .postcard img, .postcard .mm-media { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; } .postcard__title { display: block; padding: var(--space-2); font-size: .85rem; font-weight: 600; background: rgba(0,0,0,.45); } /* ────────────────────────────────────────────────────────────────────── layer__usps — rij Unique Selling Points ────────────────────────────────────────────────────────────────────── */ .layer__usps-title { font-size: var(--fs-h2); margin: 0 0 var(--space-4); text-align: center; } .layer__usps-image-wrap { margin-bottom: var(--space-4); border-radius: var(--radius-md); overflow: hidden; } .layer__usps-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); grid-template-columns: 1fr; } @container (min-width: 32rem) { .layer__usps-list { grid-template-columns: repeat(2, 1fr); } } @container (min-width: 56rem) { .layer__usps-list { grid-template-columns: repeat(3, 1fr); } } .layer__usps[data-view="inline"] .layer__usps-list { grid-template-columns: 1fr; } @container (min-width: 48rem) { .layer__usps[data-view="inline"] .layer__usps-list { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } } .usp { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-3); align-items: center; } .usp__icon { width: 3rem; height: 3rem; } .usp__icon img { width: 100%; height: 100%; object-fit: contain; } .usp__body { display: flex; flex-direction: column; gap: .15rem; } .usp__tagline { font-size: var(--fs-tagline); text-transform: uppercase; letter-spacing: .08em; color: var(--color-fg-muted); font-weight: 600; } .usp__title { font-weight: 600; line-height: 1.2; font-size: 1rem; } .usp__text { color: var(--color-fg-muted); font-size: .9rem; } .layer__usps-cta { margin-top: var(--space-5); display: flex; justify-content: center; } /* ────────────────────────────────────────────────────────────────────── layer__faq — accordion van veelgestelde vragen ────────────────────────────────────────────────────────────────────── */ .layer__faq-title { font-size: var(--fs-h2); margin: 0 0 var(--space-4); } .layer__faq-list { display: flex; flex-direction: column; gap: var(--space-2); } .faq { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); background: var(--color-bg); transition: background .15s ease; } .faq[open] { background: var(--color-bg-soft); } .faq__question { font-weight: 600; cursor: pointer; list-style: none; padding: var(--space-2) 0; display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); } .faq__question::-webkit-details-marker { display: none; } .faq__question::after { content: ''; width: 1rem; height: 1rem; background-color: currentColor; mask-image: url('data:image/svg+xml;utf8,'); mask-repeat: no-repeat; mask-position: center; mask-size: contain; transition: transform .15s ease; flex-shrink: 0; } .faq[open] .faq__question::after { transform: rotate(180deg); } .faq__answer { padding: 0 0 var(--space-3); color: var(--color-fg-muted); line-height: 1.6; } .faq__answer p:last-child { margin-bottom: 0; } .layer__faq-empty { padding: var(--space-4); text-align: center; color: var(--color-fg-muted); } /* ────────────────────────────────────────────────────────────────────── layer__inspiration — tegel-grid met inspiration_item_tile-children ────────────────────────────────────────────────────────────────────── */ .layer__inspiration-title { font-size: var(--fs-h2); margin: 0 0 var(--space-4); } /* Masonry-grid voor de eerste 5 tiles — 12 cols × 2 rijen. ┌─────────────┬──────────────┬───────┐ │ 1 tall │ 2 wide │ 3 sq │ rij 1 │ (50%×full) ├───────┬──────┴───────┤ │ │ 4 r1 │ 5 rect2 │ rij 2 └─────────────┴───────┴──────────────┘ Tile 6+ valt op auto-flow onder de masonry. */ .layer__inspiration-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(0, 1fr); grid-auto-flow: dense; gap: var(--space-3); aspect-ratio: 12 / 5; } .inspiration-tile--slot1 { grid-column: span 6; grid-row: span 2; } .inspiration-tile--slot2 { grid-column: span 4; } .inspiration-tile--slot3 { grid-column: span 2; } .inspiration-tile--slot4 { grid-column: span 3; } .inspiration-tile--slot5 { grid-column: span 3; } /* Mobile: stapel als 1-col grid, terug naar tile-eigen aspect-ratio. */ @media (max-width: 48rem) { .layer__inspiration-grid { grid-template-columns: 1fr; aspect-ratio: auto; } .inspiration-tile--slot1, .inspiration-tile--slot2, .inspiration-tile--slot3, .inspiration-tile--slot4, .inspiration-tile--slot5 { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 3; } } /* Hero-style tiles — image vult de tile, content valt op een gradient bovenop. Hover-zoom op de image, micro-lift op de tile. */ .inspiration-tile { position: relative; display: block; color: #fff; text-decoration: none; border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg-soft); box-shadow: var(--shadow-1); isolation: isolate; transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out); /* Voor non-slot tiles (tile 6+): tile-eigen aspect-ratio. Slot-tiles laten de grid de hoogte regelen. */ min-height: 100%; } .inspiration-tile:not([class*="--slot"]) { aspect-ratio: 4 / 3; } .inspiration-tile:hover, .inspiration-tile:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-2); } /* Image positioneren als full-bleed achtergrond. MediaRender plaatst een `` / `` als child — vangt allebei via een directe child- selector. Zoom-on-hover via transform. */ .inspiration-tile > .mm-media, .inspiration-tile > picture, .inspiration-tile > img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; } .inspiration-tile > .mm-media img, .inspiration-tile > picture img, .inspiration-tile > img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); } .inspiration-tile:hover > .mm-media img, .inspiration-tile:hover > picture img, .inspiration-tile:hover > img { transform: scale(1.06); } /* Gradient overlay voor leesbaarheid van de witte tekst. */ .inspiration-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.35) 45%, transparent 70%); pointer-events: none; z-index: -1; } .inspiration-tile__content { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--space-4) var(--space-3) var(--space-3); display: flex; flex-direction: column; gap: .25rem; text-shadow: 0 1px 2px rgba(0,0,0,.45); } .inspiration-tile__tagline { align-self: flex-start; padding: 0.2rem 0.55rem; background: rgba(255,255,255,.18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 999px; font-size: 0.7rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; color: #fff; margin-bottom: .35rem; text-shadow: none; } .inspiration-tile__title { font-size: 1.25rem; font-weight: 700; line-height: var(--line-tight); margin: 0; color: #fff; } .inspiration-tile__subtitle { font-size: .9rem; color: rgba(255,255,255,.85); margin: 0; } /* Wanneer er geen image is (zeldzaam), val terug op een nette tint. */ .inspiration-tile:not(:has(> .mm-media, > picture, > img)) { background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary), #000 30%) 100%); } .inspiration-tile:not(:has(> .mm-media, > picture, > img))::after { background: linear-gradient(to top, rgba(0,0,0,.25), transparent 60%); } /* ────────────────────────────────────────────────────────────────────── layer__quick-buttons — rij snelkoppelingen ────────────────────────────────────────────────────────────────────── */ .layer__quick-buttons { /* Compacter dan een gewone layer — vaak strip-onder-hero */ padding-block: var(--space-3); } .layer__quick-buttons-list { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; } .quick-button { display: inline-flex; align-items: center; padding: var(--space-2) var(--space-4); background: var(--color-bg-soft); color: var(--color-fg); border-radius: 999px; /* pill shape */ text-decoration: none; font-weight: 600; font-size: .95rem; border: 1px solid var(--color-border); transition: transform .12s ease, background .12s ease, color .12s ease; } .quick-button:hover { transform: translateY(-1px); background: var(--color-primary); color: var(--color-primary-fg); border-color: transparent; } .quick-button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* Theme-data — placeholder voor toekomstige CMS-theming. Zodra MODULE_WEBSITE_SETTINGS-themes worden ingelezen, kunnen we `.quick-button[data-theme="13"] { --color-primary: ...; }` zetten. Tot dan ziet elke quick-button er hetzelfde uit. */ /* ────────────────────────────────────────────────────────────────────── layer__placeholder — fallback voor nog niet geïmplementeerde types ────────────────────────────────────────────────────────────────────── */ .layer__placeholder { background: var(--color-bg-soft); border: 1px dashed var(--color-border); border-radius: var(--radius-md); } .layer__placeholder-header { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: baseline; color: var(--color-fg-muted); font-size: .9rem; } .layer__placeholder-header strong { color: var(--color-fg); } .layer__placeholder-details { margin-top: var(--space-2); font-size: .85rem; } .layer__placeholder-details summary { cursor: pointer; color: var(--color-link); } .layer__placeholder-details dl { display: grid; grid-template-columns: max-content 1fr; gap: .25rem var(--space-4); margin: var(--space-2) 0 0; } .layer__placeholder-details dt { font-weight: 600; } /* ─── reviews_layer ─────────────────────────────────────────────────────── */ .layer__reviews { padding-block: var(--space-8); } .layer__reviews-heading { text-align: center; margin-bottom: var(--space-4); } .layer__reviews-heading h2 { font-size: 1.75rem; margin: 0; } .layer__reviews-heading p { color: var(--color-fg-muted); margin: var(--space-1) 0 0; } .reviews__banner-slide, .reviews__item { background: var(--color-surface, #fff); border-radius: var(--radius-md); padding: var(--space-4); height: 100%; display: flex; flex-direction: column; box-shadow: 0 1px 3px rgba(0,0,0,.08); } .reviews__banner { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; background: var(--color-primary, #c1272d); color: #fff; border-radius: var(--radius-md); padding: var(--space-4); height: 100%; } .reviews__banner-score { font-size: 2.5rem; font-weight: 700; line-height: 1; padding: var(--space-2) var(--space-3); background: rgba(255,255,255,.15); border-radius: var(--radius-sm); } .reviews__banner-title { font-size: 1.25rem; margin: 0; } .reviews__banner-subtitle { margin: var(--space-1) 0 0; opacity: .9; } .reviews__banner-meta { margin: var(--space-1) 0 var(--space-3); font-size: .85rem; opacity: .8; } .reviews__banner-cta a { background: #fff; color: var(--color-primary, #c1272d); } .reviews__item-stars { --stars-color: #f5a623; width: 110px; height: 18px; background: linear-gradient(90deg, transparent 0, transparent 100%) 0 0/100% 100%, repeating-linear-gradient(90deg, #ddd 0 18px, transparent 18px 22px); background-size: 100% 100%, 110px 18px; position: relative; margin-bottom: var(--space-2); } .reviews__item-stars-fill { position: absolute; inset: 0 auto 0 0; background: repeating-linear-gradient(90deg, var(--stars-color) 0 18px, transparent 18px 22px); } .reviews__item-title { font-size: 1rem; margin: 0 0 var(--space-2); } .reviews__item-text { flex: 1 1 auto; margin: 0 0 var(--space-3); color: var(--color-fg); line-height: 1.5; } .reviews__item-foot { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); font-size: .85rem; color: var(--color-fg-muted); } .reviews__item-author { font-weight: 600; } /* ─── layer_breadcrumbs ─────────────────────────────────────────────────── */ .layer__breadcrumbs { padding: var(--space-3) var(--space-4); font-size: 0.875rem; color: var(--color-fg-muted); } .breadcrumb { display: flex; flex-wrap: wrap; gap: 0.5em; list-style: none; margin: 0; padding: 0; } .breadcrumb__item + .breadcrumb__item::before { content: "›"; margin-right: 0.5em; color: var(--color-fg-muted); opacity: 0.6; } .breadcrumb__item a { color: inherit; text-decoration: none; } .breadcrumb__item a:hover { text-decoration: underline; } .breadcrumb__item--current { color: var(--color-fg); font-weight: 500; } /* ─── layer_attraction_suggestions ─────────────────────────────────────── */ .layer__suggestions { padding-block: var(--space-6); } .layer__suggestions-title { font-size: 1.5rem; margin: 0 0 var(--space-4); text-align: center; } .layer__suggestions-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .suggestion-card { background: var(--color-surface, #fff); border-radius: var(--radius-md); overflow: hidden; } .suggestion-card__link { display: block; color: inherit; text-decoration: none; } .suggestion-card__image img { display: block; width: 100%; height: auto; } .suggestion-card__title { display: block; padding: var(--space-2) var(--space-3); font-weight: 600; } .suggestion-card:hover { transform: translateY(-2px); transition: transform .15s ease; } /* ─── layer_attractions — alle attracties uit één category ─────────────── */ .layer__attractions { padding-block: var(--space-5); } .layer__attractions-title { font-size: var(--fs-h2); font-weight: 700; margin: 0 0 var(--space-4); } .layer__attractions-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .attraction-card { background: var(--color-bg-elev); border-radius: var(--radius-md); overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; } .attraction-card:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -8px rgba(0,0,0,.18); } .attraction-card__link { display: grid; grid-template-rows: auto 1fr; height: 100%; color: inherit; text-decoration: none; } /* MediaRender wrapt de in
— die moet de aspect-cell vullen anders krijgt de inner img height:100% van 0. */ .attraction-card__image, .attraction-card .mm-media { display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; } .attraction-card .mm-media > img { display: block; width: 100%; height: 100%; object-fit: cover; } .attraction-card__title { display: block; padding: var(--space-2) var(--space-3) var(--space-3); font-weight: 600; font-size: 1rem; line-height: 1.25; } /* ─── layer_arrangements — cards van vakantie-arrangementen ───────────── */ .layer__arrangements-title { font-size: var(--fs-h2); font-weight: 700; margin: 0 0 var(--space-4); } .layer__arrangements-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .arrangement-card { background: var(--color-bg-elev); border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.06); transition: transform .15s ease, box-shadow .15s ease; } .arrangement-card:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -8px rgba(0,0,0,.18); } .arrangement-card__link { display: block; color: inherit; text-decoration: none; } /* MediaRender wrapt de in .mm-media — die moet de aspect-cell vullen, anders krijgt de inner height:100% van 0. */ .arrangement-card__image, .arrangement-card .mm-media { display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; } .arrangement-card .mm-media > img { display: block; width: 100%; height: 100%; object-fit: cover; } .arrangement-card__body { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); } .arrangement-card__title { margin: 0; font-size: 1.1rem; font-weight: 700; } .arrangement-card__subtitle { margin: 0; color: var(--color-fg-muted); font-size: .9rem; } .arrangement-card__intro { margin: var(--space-1) 0 0; font-size: .9rem; line-height: 1.45; } .arrangement-card__price { margin-top: var(--space-2); font-weight: 700; color: var(--color-primary); } /* ─── layer_arrangement_detail — synthetic op arrangement-pages (DT 258) */ .layer__arrangement-detail { display: flex; flex-direction: column; gap: var(--space-5); } .arrangement-detail__hero { display: grid; gap: var(--space-4); grid-template-columns: 1fr; } @container (min-width: 36rem) { .arrangement-detail__hero { grid-template-columns: 3fr 2fr; align-items: center; } } .arrangement-detail__image, .arrangement-detail__hero .mm-media { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-md); overflow: hidden; } .arrangement-detail__hero .mm-media > img { display: block; width: 100%; height: 100%; object-fit: cover; } .arrangement-detail__hero-body { display: flex; flex-direction: column; gap: var(--space-2); } .arrangement-detail__title { margin: 0; font-size: var(--fs-h1); font-weight: 700; } .arrangement-detail__subtitle { margin: 0; color: var(--color-fg-muted); font-size: var(--fs-h3); } .arrangement-detail__intro { margin: var(--space-2) 0 0; font-size: var(--fs-intro); } .arrangement-detail__text :is(p:last-child) { margin-bottom: 0; } .arrangement-detail__text ul, .arrangement-detail__text ol { padding-left: 1.25em; } .arrangement-detail__price-block { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); background: var(--color-bg-soft); border-radius: var(--radius-md); max-width: 24rem; } .arrangement-detail__price { display: flex; align-items: baseline; gap: var(--space-2); } .arrangement-detail__price-label { font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-fg-muted); } .arrangement-detail__price-value { font-size: var(--fs-h2); font-weight: 700; color: var(--color-primary); } .arrangement-detail__price-line { color: var(--color-fg-muted); font-size: .95rem; } .arrangement-detail__variants { display: flex; flex-direction: column; gap: var(--space-3); } .arrangement-detail__variants-title { margin: 0; font-size: var(--fs-h3); font-weight: 600; } .arrangement-detail__variant-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); } .variant { display: grid; grid-template-columns: 1fr; gap: var(--space-1) var(--space-3); padding: var(--space-3); background: var(--color-bg-elev); border: 1px solid var(--color-border); border-radius: var(--radius-sm); align-items: baseline; } @container (min-width: 36rem) { .variant { grid-template-columns: 1fr auto auto auto; } } .variant__dates { font-weight: 600; } .variant__nights { color: var(--color-fg-muted); font-size: .9rem; } .variant__rentable { color: var(--color-fg-muted); font-size: .9rem; } .variant__price { font-weight: 700; color: var(--color-primary); justify-self: end; } /* ─── view 1: by accommodation — banner-cards met ribbon & datums-lijst */ .arrangement-detail__by-acc { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); } .acc-card { position: relative; display: flex; flex-direction: column; background: var(--color-bg-elev); border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.08); transition: transform .2s ease, box-shadow .2s ease; } .acc-card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -10px rgba(0,0,0,.22); } .acc-card__banner { position: relative; overflow: hidden; } .acc-card__image, .acc-card .mm-media { display: block; width: 100%; aspect-ratio: 16 / 9; } .acc-card .mm-media > img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Ribbon: linksboven over de banner — primary color block met period uppercase boven en prijs eronder. Subtiele schaduw, kleine schuine "puntje" rechtsonder via clip-path geeft 't een tag-gevoel. */ .acc-card__ribbon { position: absolute; top: var(--space-3); left: 0; background: var(--color-primary); color: var(--color-primary-fg); padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4); display: flex; flex-direction: column; line-height: 1.1; box-shadow: 0 6px 16px rgba(0,0,0,.25); clip-path: polygon(0 0, 100% 0, calc(100% - .6rem) 50%, 100% 100%, 0 100%); padding-right: calc(var(--space-3) + .6rem); transform: translateX(0); transition: transform .25s ease; } .acc-card:hover .acc-card__ribbon { transform: translateX(.2rem); } .acc-card__ribbon-period { font-size: .65rem; text-transform: uppercase; letter-spacing: .08em; opacity: .85; } .acc-card__ribbon-price { font-size: 1.15rem; font-weight: 800; margin-top: 1px; } .acc-card__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); } .acc-card__title { margin: 0; font-size: 1.05rem; font-weight: 700; } .acc-card__dates { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .acc-card__date { display: flex; justify-content: space-between; align-items: baseline; padding: var(--space-1) 0; border-top: 1px dashed var(--color-border); font-size: .9rem; } .acc-card__date:first-child { border-top: 0; } .acc-card__date-range { color: var(--color-fg); } .acc-card__date-price { color: var(--color-fg-muted); font-variant-numeric: tabular-nums; } /* ─── layer_columns — module_column-kinderen naast elkaar ────────────── Na het hijsen is .layer__columns de .layer-section met alleen .layer__bg/ sc/fg als directe kinderen; de kolommen zitten in .layer__inner. De flex- rij hoort dus op die inner, niet op .layer__columns zelf. */ .layer__columns > .layer__sc > .layer__inner { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: stretch; } .layer__columns > .layer__sc > .layer__inner > * { flex: 1 1 calc((100% - var(--space-4) * 2) / 3); min-width: 16rem; /* flex-item bepaalt zelf z'n breedte — reset de centrering/max-width/gutter van de generieke `.layer:not(.layer-section)`-regel op geneste lagen. */ max-width: none; margin-inline: 0; padding-inline: 0; } /* `data-flow="nowrap"` → één rij, scrollt indien nodig. */ .layer__columns[data-flow="nowrap"] > .layer__sc > .layer__inner { flex-wrap: nowrap; overflow-x: auto; } .layer__columns[data-max-width="800px"] > .layer__sc > .layer__inner { max-width: 800px; } .layer__columns[data-max-width="1040px"] > .layer__sc > .layer__inner { max-width: 1040px; } .layer__columns[data-max-width="1280px"] > .layer__sc > .layer__inner { max-width: 1280px; } .layer__columns[data-max-width="1920px"] > .layer__sc > .layer__inner { max-width: 1920px; } .layer__columns[data-max-width="100%"] > .layer__sc > .layer__inner { max-width: none; } /* ─── layer_mapplic — embedded interactieve plattegrond (Mapplic-component) Volgt dev26's `_layer__mapplic.scss`-recept: wrapper is full-bleed (breekt uit de `.layer { max-width }`), zwarte achtergrond, GEEN height/aspect- ratio insturen — Mapplic bepaalt zelf z'n container-hoogte (default 600px). Map is altijd zichtbaar, pre-klik via pointer-events:none non-interactief, met overlay-card (glas) erboven. `.is-open` faded overlay weg. ─────────── */ .layer__mapplic { padding-inline: 0; max-width: none; } .layer__mapplic .mapplic-wrapper { position: relative; width: 100vw; margin-inline: calc(50% - 50vw); overflow: hidden; background: #000; } .layer__mapplic .mapplic-wrapper mapplic-map { display: block; width: 100%; } .layer__mapplic .mapplic-wrapper.is-locked mapplic-map { pointer-events: none; } .layer__mapplic .mapplic-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, .12) 0%, rgba(0, 0, 0, .22) 45%, rgba(0, 0, 0, .42) 100%); transition: opacity .35s ease, visibility .35s ease; } .layer__mapplic .mapplic-wrapper.is-open .mapplic-overlay { opacity: 0; visibility: hidden; pointer-events: none; } .layer__mapplic .mapplic-overlay__inner { width: 100%; max-width: var(--content-max); height: 100%; margin: 0 auto; padding: var(--space-5) var(--gutter); box-sizing: border-box; display: flex; align-items: flex-end; justify-content: flex-start; } .layer__mapplic .mapplic-overlay__content { max-width: 28rem; color: #fff; background: rgba(0, 0, 0, .34); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: var(--space-4); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--radius-md); box-shadow: 0 18px 50px rgba(0, 0, 0, .24); } .layer__mapplic .mapplic-overlay__eyebrow { display: inline-block; margin: 0 0 var(--space-2); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .82); } .layer__mapplic .mapplic-overlay__title { margin: 0 0 var(--space-2); font-size: var(--fs-h3); font-weight: 600; color: #fff; text-shadow: 0 2px 20px rgba(0, 0, 0, .35); } .layer__mapplic .mapplic-overlay__text { margin: 0 0 var(--space-3); font-size: .95rem; line-height: 1.5; color: rgba(255, 255, 255, .9); max-width: 34ch; } .layer__mapplic .mapplic-overlay__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; } /* ─── layer_attraction_sensations ──────────────────────────────────────── */ .layer__sensations { padding-block: var(--space-4); } .layer__sensations-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; } .sensation { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); min-width: 80px; text-align: center; } .sensation__icon { width: 64px; height: 64px; object-fit: contain; } .sensation__title { font-size: 0.8rem; color: var(--color-fg-muted); }