/* Swop Canvas — componenten voor interactieve patterns. Alle kleuren via theme-tokens, dus werkt bij elk palet. */ /* ---------- Sliders (CSS scroll-snap, geen JS) ---------- */ .swop-slider{display:flex;gap:var(--wp--preset--spacing--lg);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;padding-bottom:var(--wp--preset--spacing--md);scrollbar-width:thin} .swop-slider::-webkit-scrollbar{height:4px} .swop-slider::-webkit-scrollbar-thumb{background:var(--wp--preset--color--surface-alt);border-radius:99px} .swop-slide{scroll-snap-align:start;flex:0 0 auto} .swop-slider--cards .swop-slide{width:min(360px,80vw)} .swop-slider--images .swop-slide{width:min(420px,85vw)} .swop-slider--hero .swop-slide{width:100%} .swop-slide-inner{background:var(--wp--preset--color--surface);border-radius:8px;border-top:2px solid var(--wp--preset--color--accent);padding:var(--wp--preset--spacing--xl);height:100%} .swop-slide-quote{margin:0 0 var(--wp--preset--spacing--lg);font-size:var(--wp--preset--font-size--medium);line-height:1.7} .swop-slide-name{margin:0;font-size:var(--wp--preset--font-size--small);color:var(--wp--preset--color--text-muted)} .swop-slide-caption{margin:var(--wp--preset--spacing--md) 0 0;font-size:var(--wp--preset--font-size--small);color:var(--wp--preset--color--text-muted);text-align:center} .swop-hero-slide-inner{padding:var(--wp--preset--spacing--xxl) 0;max-width:44ch} .swop-hero-slide-title{margin:0 0 var(--wp--preset--spacing--md);font-family:var(--wp--preset--font-family--heading);font-size:var(--wp--preset--font-size--huge);line-height:1.15;font-weight:500;color:var(--wp--preset--color--text-inverse)} .swop-hero-slide-text{margin:0;font-size:var(--wp--preset--font-size--lead);line-height:1.7;color:var(--wp--preset--color--text-inverse)} .swop-eyebrow{margin:0 0 var(--wp--preset--spacing--md);font-size:var(--wp--preset--font-size--small);letter-spacing:2px;text-transform:uppercase;font-weight:600;color:var(--wp--preset--color--accent)} .swop-img-ph{aspect-ratio:3/2;background:var(--wp--preset--color--surface-alt);border-radius:8px;width:100%} /* ---------- Logo-marquee ---------- */ .swop-marquee{overflow:hidden;margin-top:var(--wp--preset--spacing--xl);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .swop-marquee-track{display:flex;gap:var(--wp--preset--spacing--xxl);width:max-content;animation:swop-marquee 32s linear infinite} .swop-marquee:hover .swop-marquee-track{animation-play-state:paused} .swop-logo-item{flex:0 0 auto;width:120px;height:48px;background:var(--wp--preset--color--surface-alt);border-radius:6px} @keyframes swop-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){.swop-marquee-track{animation:none}} /* ---------- Lightbox-galerij ---------- */ .swop-lightbox-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--wp--preset--spacing--lg)} .swop-lb-item{display:block;border-radius:8px;overflow:hidden;cursor:zoom-in;transition:transform .2s ease} .swop-lb-item:hover{transform:scale(1.02)} .swop-lb-ph{display:block;aspect-ratio:1;background:var(--wp--preset--color--surface-alt)} .swop-lb-item img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:1} dialog.swop-lb-dialog{border:none;border-radius:10px;padding:0;max-width:min(1100px,92vw);background:transparent} dialog.swop-lb-dialog::backdrop{background:rgba(16,24,34,.88)} dialog.swop-lb-dialog img{display:block;width:100%;height:auto;border-radius:10px} /* ---------- Tellers ---------- */ .swop-counters{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--wp--preset--spacing--xl);text-align:center} .swop-counter-value,.swop-counter-suffix{font-family:var(--wp--preset--font-family--heading);font-size:var(--wp--preset--font-size--huge);font-weight:600;line-height:1.1;color:var(--wp--preset--color--accent)} .swop-counter-label{margin:var(--wp--preset--spacing--xs) 0 0;font-size:var(--wp--preset--font-size--small);color:var(--wp--preset--color--text-inverse)} /* ---------- Tabbladen ---------- */ .swop-tablist{display:flex;gap:var(--wp--preset--spacing--xs);border-bottom:1px solid var(--wp--preset--color--surface-alt);flex-wrap:wrap} .swop-tab{background:none;border:none;border-bottom:2px solid transparent;padding:var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg);font-family:inherit;font-size:var(--wp--preset--font-size--medium);font-weight:600;color:var(--wp--preset--color--text-muted);cursor:pointer;margin-bottom:-1px} .swop-tab[aria-selected="true"]{color:var(--wp--preset--color--text);border-bottom-color:var(--wp--preset--color--accent)} .swop-tabpanel{display:none;padding-top:var(--wp--preset--spacing--xl)} .swop-tabpanel[data-active="true"]{display:block} .swop-tabpanel h3{margin:0 0 var(--wp--preset--spacing--md);font-family:var(--wp--preset--font-family--heading);font-size:var(--wp--preset--font-size--x-large)} .swop-tabpanel p{margin:0;color:var(--wp--preset--color--text-muted);line-height:1.75;max-width:60ch} /* ---------- Filterbaar raster ---------- */ .swop-filter-bar{display:flex;gap:var(--wp--preset--spacing--xs);flex-wrap:wrap;margin-bottom:var(--wp--preset--spacing--xl)} .swop-filter-btn{background:none;border:1px solid var(--wp--preset--color--surface-alt);border-radius:99px;padding:var(--wp--preset--spacing--xs) var(--wp--preset--spacing--lg);font-family:inherit;font-size:var(--wp--preset--font-size--small);color:var(--wp--preset--color--text-muted);cursor:pointer;transition:all .15s ease} .swop-filter-btn[aria-pressed="true"]{background:var(--wp--preset--color--secondary);border-color:var(--wp--preset--color--secondary);color:var(--wp--preset--color--text-inverse)} .swop-filter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--wp--preset--spacing--lg)} .swop-filter-card{background:var(--wp--preset--color--surface);border-radius:8px;overflow:hidden} .swop-filter-card[hidden]{display:none} .swop-filter-card h3{margin:var(--wp--preset--spacing--md) 0 var(--wp--preset--spacing--xs);font-family:var(--wp--preset--font-family--heading);font-size:var(--wp--preset--font-size--large)} .swop-filter-card p{margin:0 0 var(--wp--preset--spacing--md);font-size:var(--wp--preset--font-size--small);color:var(--wp--preset--color--text-muted)} /* ---------- Voor / na ---------- */ .swop-beforeafter{display:grid;grid-template-columns:1fr 1fr;gap:var(--wp--preset--spacing--lg)} .swop-ba-panel{position:relative} .swop-ba-label{position:absolute;top:var(--wp--preset--spacing--md);left:var(--wp--preset--spacing--md);z-index:1;background:var(--wp--preset--color--secondary);color:var(--wp--preset--color--text-inverse);font-size:var(--wp--preset--font-size--small);font-weight:600;padding:4px 12px;border-radius:99px} .swop-ba-label--after{background:var(--wp--preset--color--accent);color:var(--wp--preset--color--secondary)} /* ---------- Gravity Forms in huisstijl ---------- */ .gform_wrapper .gform_fields{display:grid;gap:var(--wp--preset--spacing--lg)} .gform_wrapper .gfield_label{display:block;margin-bottom:var(--wp--preset--spacing--xs);font-size:var(--wp--preset--font-size--small);font-weight:600;color:inherit} .gform_wrapper input[type=text],.gform_wrapper input[type=email],.gform_wrapper input[type=tel],.gform_wrapper input[type=url],.gform_wrapper input[type=number],.gform_wrapper select,.gform_wrapper textarea{width:100%;padding:12px 14px;font-family:inherit;font-size:var(--wp--preset--font-size--medium);color:var(--wp--preset--color--text);background:var(--wp--preset--color--surface);border:1px solid var(--wp--preset--color--surface-alt);border-radius:var(--wp--custom--radius--sm);transition:border-color .15s ease,box-shadow .15s ease} .gform_wrapper input:focus,.gform_wrapper select:focus,.gform_wrapper textarea:focus{outline:none;border-color:var(--wp--preset--color--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--wp--preset--color--primary) 18%,transparent)} .gform_wrapper textarea{min-height:140px;resize:vertical} .gform_wrapper .gform_button{background:var(--wp--preset--color--accent);color:var(--wp--preset--color--secondary);border:none;border-radius:var(--wp--custom--radius--sm);padding:14px 28px;font-family:inherit;font-size:var(--wp--preset--font-size--medium);font-weight:600;cursor:pointer;transition:filter .15s ease} .gform_wrapper .gform_button:hover{filter:brightness(.94)} .gform_wrapper .gfield_required{color:var(--wp--preset--color--error)} .gform_wrapper .gfield_description{margin-top:var(--wp--preset--spacing--xs);font-size:var(--wp--preset--font-size--small);color:var(--wp--preset--color--text-muted)} .gform_wrapper .validation_message{margin-top:var(--wp--preset--spacing--xs);font-size:var(--wp--preset--font-size--small);color:var(--wp--preset--color--error)} .gform_wrapper .gform_validation_errors{background:color-mix(in srgb,var(--wp--preset--color--error) 10%,transparent);border-left:2px solid var(--wp--preset--color--error);border-radius:var(--wp--custom--radius--sm);padding:var(--wp--preset--spacing--lg)} /* Formulier op donkere secties */ .has-secondary-background-color .gform_wrapper input,.has-secondary-background-color .gform_wrapper textarea,.has-secondary-background-color .gform_wrapper select,.has-primary-background-color .gform_wrapper input,.has-primary-background-color .gform_wrapper textarea,.has-primary-background-color .gform_wrapper select{background:color-mix(in srgb,var(--wp--preset--color--text-inverse) 8%,transparent);border-color:color-mix(in srgb,var(--wp--preset--color--text-inverse) 22%,transparent);color:var(--wp--preset--color--text-inverse)} .has-secondary-background-color .gform_wrapper input::placeholder,.has-primary-background-color .gform_wrapper input::placeholder{color:color-mix(in srgb,var(--wp--preset--color--text-inverse) 55%,transparent)} /* ---------- Scroll-animaties (native, met fallback) ---------- */ @media(prefers-reduced-motion:no-preference){ @supports (animation-timeline: view()){ .swop-reveal{animation:swop-fade-in linear both;animation-timeline:view();animation-range:entry 10% cover 30%} @keyframes swop-fade-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} } } /* ---------- Sticky header die verkleint ---------- */ .swop-header-sticky{position:sticky;top:0;z-index:50;transition:padding .2s ease,box-shadow .2s ease} .swop-header-sticky[data-scrolled="true"]{box-shadow:0 1px 12px rgba(16,24,34,.08)} /* ---------- Mobiel ---------- */ @media(max-width:781px){ .swop-beforeafter{grid-template-columns:1fr} .swop-counters{gap:var(--wp--preset--spacing--lg)} .swop-tab{padding:var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);font-size:var(--wp--preset--font-size--small)} } /* ---------- WooCommerce in huisstijl ---------- */ .woocommerce ul.products li.product,.wc-block-grid__product{text-align:left} .woocommerce ul.products li.product .woocommerce-loop-product__title,.wc-block-grid__product-title{font-family:var(--wp--preset--font-family--heading);font-size:var(--wp--preset--font-size--large);font-weight:600;color:var(--wp--preset--color--text);margin:var(--wp--preset--spacing--md) 0 var(--wp--preset--spacing--xs)} .woocommerce ul.products li.product img,.wc-block-grid__product-image img{border-radius:8px} .woocommerce ul.products li.product .price,.wc-block-grid__product-price{font-family:var(--wp--preset--font-family--heading);font-size:var(--wp--preset--font-size--large);font-weight:600;color:var(--wp--preset--color--text)} .woocommerce ul.products li.product .price del{color:var(--wp--preset--color--text-muted);font-weight:400;margin-right:8px} .woocommerce ul.products li.product .price ins{text-decoration:none;color:var(--wp--preset--color--error)} .woocommerce span.onsale,.wc-block-grid__product-onsale{background:var(--wp--preset--color--accent);color:var(--wp--preset--color--secondary);border-radius:99px;font-size:var(--wp--preset--font-size--small);font-weight:600;padding:4px 12px;min-height:auto;line-height:1.4} .woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit,.wc-block-components-button{background:var(--wp--preset--color--accent)!important;color:var(--wp--preset--color--secondary)!important;border-radius:var(--wp--custom--radius--sm)!important;font-family:inherit;font-weight:600;padding:12px 24px;transition:filter .15s ease} .woocommerce a.button:hover,.woocommerce button.button:hover,.wc-block-components-button:hover{filter:brightness(.94)} .woocommerce a.button.alt,.woocommerce button.button.alt{background:var(--wp--preset--color--primary)!important;color:var(--wp--preset--color--text-inverse)!important} .woocommerce .star-rating span::before,.wc-block-grid__product-rating .star-rating span::before{color:var(--wp--preset--color--accent)} .woocommerce div.product .woocommerce-tabs ul.tabs{border-bottom:1px solid var(--wp--preset--color--surface-alt);padding:0;margin-bottom:var(--wp--preset--spacing--xl)} .woocommerce div.product .woocommerce-tabs ul.tabs::before{display:none} .woocommerce div.product .woocommerce-tabs ul.tabs li{background:none;border:none;border-bottom:2px solid transparent;border-radius:0;padding:var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg);margin:0} .woocommerce div.product .woocommerce-tabs ul.tabs li.active{border-bottom-color:var(--wp--preset--color--accent);background:none} .woocommerce div.product .woocommerce-tabs ul.tabs li::before,.woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none} .woocommerce table.shop_table{border-radius:8px;border-color:var(--wp--preset--color--surface-alt)} .woocommerce-message,.woocommerce-info{border-top-color:var(--wp--preset--color--primary);background:var(--wp--preset--color--surface-alt);border-radius:var(--wp--custom--radius--sm)} .woocommerce-message::before,.woocommerce-info::before{color:var(--wp--preset--color--primary)} .woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce form .form-row select{padding:12px 14px;border:1px solid var(--wp--preset--color--surface-alt);border-radius:var(--wp--custom--radius--sm);font-family:inherit;font-size:var(--wp--preset--font-size--medium)} /* ---------- Video ---------- */ .swop-video{position:relative;border-radius:var(--radius,8px);overflow:hidden;background:var(--wp--preset--color--surface-alt)} .swop-video-frame{aspect-ratio:var(--ratio,16/9);display:flex;align-items:center;justify-content:center;position:relative} .swop-video iframe,.swop-video video{position:absolute;inset:0;width:100%;height:100%;border:none;object-fit:cover} .swop-video-play{width:64px;height:64px;border-radius:99px;background:var(--wp--preset--color--accent);color:var(--wp--preset--color--secondary);display:flex;align-items:center;justify-content:center;font-size:20px;padding-left:4px} .swop-has-video-bg{position:relative;overflow:hidden} .swop-video-bg{position:absolute;inset:0;z-index:0} .swop-video-bg-media{width:100%;height:100%;object-fit:cover} .swop-video-bg-overlay{position:absolute;inset:0;background:color-mix(in srgb,var(--wp--preset--color--secondary) 78%,transparent)} .swop-has-video-bg>*:not(.swop-video-bg){position:relative;z-index:1} .swop-audio{background:var(--wp--preset--color--surface);border-radius:8px;padding:var(--wp--preset--spacing--lg)} /* ---------- Kaart ---------- */ .swop-map{aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:var(--wp--preset--color--surface-alt)} .swop-map--wide{aspect-ratio:21/9} .swop-map iframe{width:100%;height:100%;border:none;display:block} /* ---------- Deelknoppen ---------- */ .swop-share{display:flex;gap:var(--wp--preset--spacing--sm)} .swop-share a{width:40px;height:40px;border-radius:99px;background:var(--wp--preset--color--surface-alt);color:var(--wp--preset--color--text);display:flex;align-items:center;justify-content:center;font-weight:600;text-decoration:none;transition:background .15s ease} .swop-share a:hover{background:var(--wp--preset--color--accent);color:var(--wp--preset--color--secondary)} /* ---------- Ingesloten media (embeds) ---------- */ .swop-video-frame iframe,.swop-video-frame video,.swop-video-media{position:absolute;inset:0;width:100%;height:100%;border:none;border-radius:inherit;object-fit:cover} .swop-video-frame:has(iframe) .swop-video-play,.swop-video-frame:has(video) .swop-video-play{display:none} .swop-audio iframe{width:100%;height:152px;border:none;border-radius:8px} .swop-video--audio .swop-video-frame{aspect-ratio:auto;min-height:152px} /* ---------- Cookiemelding ---------- */ .swop-cookie{position:fixed;bottom:0;left:0;right:0;z-index:200;display:flex;gap:var(--wp--preset--spacing--lg);align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--wp--preset--color--secondary);color:var(--wp--preset--color--text-inverse);padding:var(--wp--preset--spacing--lg) var(--wp--preset--spacing--xl);box-shadow:0 -2px 20px rgba(16,24,34,.18)} .swop-cookie-text{margin:0;font-size:var(--wp--preset--font-size--small);max-width:64ch} .swop-cookie-actions{display:flex;gap:var(--wp--preset--spacing--md)} .swop-cookie-btn{background:none;border:1px solid color-mix(in srgb,var(--wp--preset--color--text-inverse) 35%,transparent);color:var(--wp--preset--color--text-inverse);border-radius:var(--wp--custom--radius--sm);padding:10px 20px;font-family:inherit;font-size:var(--wp--preset--font-size--small);cursor:pointer} .swop-cookie-btn--primary{background:var(--wp--preset--color--accent);border-color:var(--wp--preset--color--accent);color:var(--wp--preset--color--secondary);font-weight:600} .swop-cookie[hidden]{display:none} /* ---------- Prijsschakelaar ---------- */ .swop-price-toggle{display:flex;justify-content:center;gap:0;margin-bottom:var(--wp--preset--spacing--xxl)} .swop-toggle-btn{background:none;border:1px solid var(--wp--preset--color--surface-alt);padding:10px 22px;font-family:inherit;font-size:var(--wp--preset--font-size--small);cursor:pointer;color:var(--wp--preset--color--text-muted)} .swop-toggle-btn:first-child{border-radius:99px 0 0 99px} .swop-toggle-btn:last-child{border-radius:0 99px 99px 0;border-left:none} .swop-toggle-btn[aria-pressed="true"]{background:var(--wp--preset--color--secondary);border-color:var(--wp--preset--color--secondary);color:var(--wp--preset--color--text-inverse)} /* ---------- WooCommerce aanvullingen ---------- */ .wc-block-mini-cart__button{background:none;border:none;cursor:pointer;color:inherit} .wc-block-mini-cart__badge{background:var(--wp--preset--color--accent);color:var(--wp--preset--color--secondary);font-weight:600} .wc-block-components-product-price__value{font-family:var(--wp--preset--font-family--heading);font-weight:600} .wp-block-woocommerce-filter-wrapper{margin-bottom:var(--wp--preset--spacing--xl)} /* ========================================================================= v0.19.0 — Responsieve typografie en layoutkeuzes ------------------------------------------------------------------------ Aanleiding: bij de eerste volledige build_site brak "Arbeidsvoorwaarden" middenin het woord in een driekoloms kaart. De oorzaak was niet de woordafbreking maar de opzet: kaartkoppen stonden op een VASTE maat (large, 20px) terwijl de kolom kon versmallen tot ~110px. Nederlandse samenstellingen ("Aandeelhoudersgeschillen", 24 tekens) zijn fundamenteel breder dan Engelse equivalenten. Op 20px is dat woord ~250px breed. In een vierkoloms raster op een laptop is er ~218px tekstruimte. Het past dus niet, en geen enkele hoeveelheid hyphens-CSS lost dat op. Twee maatregelen, in deze volgorde: 1. Het RASTER hertelt op basis van de eigen breedte (container queries), zodat kolommen nooit smaller worden dan waarin tekst leesbaar is. 2. De KOPMAAT schaalt mee met de containerbreedte, met een ondergrens die nog steeds boven de bodytekst ligt. ========================================================================= */ /* ---------- 1. Containers aanmerken ---------- Kolomrijen worden een container zodat kaarten op hun eigen breedte kunnen reageren in plaats van op de schermbreedte. Dat is nodig omdat dezelfde kaart in een volle sectie, in een tweekoloms blok of in een smalle zijkolom kan staan — de schermbreedte zegt daar niets over. */ .wp-block-columns{ container-type:inline-size; container-name:swop-row; } .wp-block-column > .wp-block-group.has-background{ container-type:inline-size; container-name:swop-card; } /* ---------- 2. Basis zonder container queries (verplichte fallback) ---------- Browsers zonder @container-ondersteuning slaan de blokken hieronder volledig over. Deze media-query-basis zorgt dat zij alsnog een bruikbare layout krijgen: nooit vier kolommen op een smal scherm. */ @media (max-width:1200px){ .wp-block-columns:not(.is-not-stacked-on-mobile){flex-wrap:wrap} .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column{ flex-basis:calc(50% - var(--wp--preset--spacing--lg)/2)!important; } } @media (max-width:600px){ .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column{ flex-basis:100%!important; } } /* ---------- 3. Raster hertellen op containerbreedte ---------- Drempels zijn berekend op de werkelijke ruimte in dit theme (content 1200px, blockGap lg=24px, kaartpadding lg/xl): 4 kolommen vragen >= 1100px rijbreedte -> 245px kolom, 197px tekst 3 kolommen vragen >= 840px rijbreedte -> 264px kolom, 216px tekst 2 kolommen vragen >= 560px rijbreedte -> 268px kolom, 220px tekst daaronder: 1 kolom Ondergrens is steeds ~200px tekstbreedte. Dat is de maat waarbij een woord van 24 tekens op 16px nog net past. */ @supports (container-type:inline-size){ @container swop-row (max-width:1099px){ .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column{ flex-basis:calc(50% - var(--wp--preset--spacing--lg)/2)!important; } } @container swop-row (max-width:559px){ .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column{ flex-basis:100%!important; } } } /* ---------- 4. Kaartkoppen schalen met de kaart ---------- Niet met de viewport: een kaart van 200px moet een kleinere kop hebben, ook op een breed scherm. De ondergrens (1rem) ligt gelijk aan de bodytekst, zodat de hiërarchie via gewicht en familie blijft bestaan in plaats van via grootte alleen. */ .wp-block-column > .wp-block-group.has-background p.has-large-font-size, .wp-block-column > .wp-block-group.has-background h3, .wp-block-column > .wp-block-group.has-background h4{ font-size:clamp(1rem, 0.75rem + 2.2cqi, 1.25rem); line-height:1.25; hyphens:none; -webkit-hyphens:none; word-break:normal; overflow-wrap:anywhere; /* laatste redmiddel: breekt alleen als het echt niet past */ text-wrap:balance; } /* ---------- 5. Bodytekst in kaarten ---------- Stond op small (14px) tegenover een kop van 20px: te ver uit elkaar, waardoor de tekst onleesbaar klein oogde. Nu schaalt hij mee met de kaart, met 0.9375rem als ondergrens. */ .wp-block-column > .wp-block-group.has-background p.has-small-font-size{ font-size:clamp(0.9375rem, 0.85rem + 0.5cqi, 1rem); line-height:1.6; } /* ---------- 6. Kaartpadding schaalt mee ---------- Vaste padding van 32px per zijde vreet 64px van een kaart van 200px. Onder die breedte wordt de binnenruimte kleiner zodat er meer overblijft voor de tekst zelf. */ @supports (container-type:inline-size){ @container swop-card (max-width:320px){ .wp-block-group.has-background{ padding-left:var(--wp--preset--spacing--lg)!important; padding-right:var(--wp--preset--spacing--lg)!important; } } @container swop-card (max-width:240px){ .wp-block-group.has-background{ padding-left:var(--wp--preset--spacing--md)!important; padding-right:var(--wp--preset--spacing--md)!important; } } } /* ---------- 7. Kaarten gelijke hoogte ---------- Kolommen strekken standaard niet mee, waardoor kaarten met minder tekst korter blijven en de rij rommelig oogt. */ .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column{ display:flex; flex-direction:column; } .wp-block-column > .wp-block-group.has-background{ flex:1; } /* ---------- 8. Koppen buiten kaarten ---------- Sectiekoppen zijn al fluid via theme.json. Hier alleen de garantie dat ze niet binnen een woord breken. */ h1,h2,h3,h4,h5,h6,.wp-block-heading{ hyphens:none; -webkit-hyphens:none; word-break:normal; overflow-wrap:break-word; text-wrap:balance; } /* ---------- 9. Gedempte tekst op donkere achtergrond ---------- text-muted is afgestemd op lichte achtergronden en levert op donker onvoldoende contrast (de cijferband was vrijwel onleesbaar). */ .has-secondary-background-color .has-text-muted-color, .has-primary-background-color .has-text-muted-color, .swop-section--dark .has-text-muted-color{ color:color-mix(in srgb,var(--wp--preset--color--text-inverse) 72%,transparent)!important; } /* Vangnet: tekstblokken in donkere secties zonder expliciete kleurklasse erven alsnog de inverse kleur in plaats van op de donkere basis te vallen. */ .has-secondary-background-color :where(p,li,h1,h2,h3,h4,h5,h6):not([class*="has-"][class*="-color"]), .has-primary-background-color :where(p,li,h1,h2,h3,h4,h5,h6):not([class*="has-"][class*="-color"]){ color:var(--wp--preset--color--text-inverse); } /* ========================================================================= v0.19.0 — Layoutbreedte: box of vol ------------------------------------------------------------------------ De breedte van secties is nu één instelling in plaats van 121 keer hardgecodeerd. Twee knoppen: --wp--custom--width--shell bepaalt hoe breed de inhoud binnen een sectie mag worden (via theme.json of de bridge per site aan te passen) .swop-layout--boxed zet de hele site in een omkaderde vorm: secties lopen niet meer tot de schermrand maar tot een maximum, met de achtergrond eromheen zichtbaar Standaard is vol (edge-to-edge). Boxed is een bewuste keuze per site, passend bij merken die een rustiger, meer omkaderd gevoel willen. ========================================================================= */ /* Vol (standaard): achtergrond loopt tot de rand, inhoud blijft binnen shell. Dit is het gedrag dat alignfull-patterns al hebben. */ /* Boxed: de hele contentkolom krijgt een maximum en wordt gecentreerd. alignfull-secties lopen dan tot de rand van dat kader, niet van het scherm. */ .swop-layout--boxed .wp-site-blocks{ max-width:var(--wp--custom--width--boxed, 1600px); margin-inline:auto; background:var(--wp--preset--color--surface); box-shadow:0 0 60px rgba(0,0,0,.06); } .swop-layout--boxed .alignfull{ margin-left:0; margin-right:0; width:100%; max-width:100%; } /* Leesbreedte voor lopende tekst: losse klasse zodat artikelen smaller blijven dan sectie-inhoud, ongeacht de shell-breedte. */ .swop-reading-width{ max-width:var(--wp--custom--width--reading); margin-inline:auto; }