/* Laag: framework. De rangorde staat in skeleton/templates/page.php: * @layer framework, site, theme, type, item; * Alles wat het framework meestuurt zit in de onderste laag, zodat site-CSS en CMS-opmaak * ervan winnen zonder specificiteits-trucs. Binnen deze laag telt specificiteit gewoon, dus * de onderlinge verhouding tussen framework-bestanden verandert er niet door. * * Een bestand dat deze wikkel MIST staat buiten elke laag en wint daarmee van ALLES — * ook van het CMS. `tests/Framework/CodeStyle/ModuleCssIsLayeredTest.php` bewaakt dat. */ @layer framework { /* modules/usps.css — layout van de USP-laag per formaat en weergave. * * Waarom een module en niet de site-stylesheet: een site die z'n eigen CSS meebrengt (463 doet * dat) laadt `shell.css` niet, en had deze regels dan niet. Dan blijft er van "vier formaten" * niets over en moet de site de layout opnieuw schrijven — precies de kopie die we kwijt willen. * De renderer stuurt dit bestand mee, net als de carrousel z'n eigen stylesheet meestuurt. * * Alleen LAYOUT: het uiterlijk van een USP (kaart, kleur, schaduw) blijft van de site en van de * opmaak-slots uit het CMS. */ /* Formaat en weergave sturen de LAYOUT — het CMS-veld `type` (Formaat) en `view` (Weergave) komen als `data-type`/`data-view` op de sectie. Zonder deze regels leverden alle vier de formaten hetzelfde kaartenraster op: "met afbeelding" toonde geen beeld, "in 2 kolommen" stond er in vier, en "Volledige breedte" en "Gecentreerd" waren niet uit elkaar te houden. Gemeten op demo 321: zes varianten, zes keer dezelfde 4-koloms lijst op dezelfde x. Model is ecohus, waar dit sinds jaar en dag klopt. */ /* Regels, geen kaarten: één USP is `` op één regel. De vier formaten verschillen alleen in wáár het icoon vandaan komt, wat er aan tekst bij hoort en hoe de groep is opgebouwd: 1 = het laag-icoon voor alle USP's, alleen een titel 2 = het laag-beeld (bv. een vinkje) voor alle USP's, titel + subtitel 3 = als 1, maar in twee kolommen 4 = een eigen beeld per USP, titel + subtitel Dat is ook precies wat de CMS-labels zeggen: "horizontaal", "met afbeelding", "in 2 kolommen", "met eigen afbeelding". Geen van de vier belooft een kaart. Formaat 3 hing hier lang buiten en hield daardoor als enige het kaartuiterlijk uit de basisregels onderaan: witte achtergrond, rand, 12px radius, schaduw, 1.6rem padding. Dat was geen keuze maar een restant, en het maakte "in 2 kolommen" tot "kaarten, in 2 kolommen". Een kaart is een opmaak-beslissing en hoort bij de site of bij de opmaak-slots, niet bij een formaat. Gemeten voor de wijziging: 1 laag in gebruik over alle framework-sites (demo 321), dus dit trekt niemand onder de voeten vandaan. */ .layer--usps[data-type="1"] .usps, .layer--usps[data-type="2"] .usps, .layer--usps[data-type="4"] .usps{display:flex;flex-wrap:wrap;gap:.75rem clamp(28px,4vw,64px)} .layer--usps[data-type="1"] .usps__item, .layer--usps[data-type="2"] .usps__item, .layer--usps[data-type="3"] .usps__item, .layer--usps[data-type="4"] .usps__item{display:flex;align-items:center;gap:.7rem; background:none;border:0;border-radius:0;box-shadow:none;overflow:visible} /* Het uitrekken hoort bij de LIJST-vorm. In carrousel-vorm bepaalt `carousel.css` de slide-breedte, en die regel (`.carousel__slide`, 0,1,0) verliest van de selector hierboven — dan krimpen de slides mee in plaats van dat de carrousel gaat schuiven. Gemeten op demo: 178px op 1440 en 61px op 420, terwijl er één slide had moeten passen. */ .layer--usps[data-type="1"] .usps > .usps__item, .layer--usps[data-type="2"] .usps > .usps__item, .layer--usps[data-type="4"] .usps > .usps__item{flex:1 1 auto} .layer--usps[data-type="1"] .usps__item:hover, .layer--usps[data-type="2"] .usps__item:hover, .layer--usps[data-type="3"] .usps__item:hover, .layer--usps[data-type="4"] .usps__item:hover{box-shadow:none;transform:none} .layer--usps[data-type="1"] .usps__body, .layer--usps[data-type="2"] .usps__body, .layer--usps[data-type="3"] .usps__body, .layer--usps[data-type="4"] .usps__body{padding:0} .layer--usps[data-type="1"] .usps__title{margin:0;font-weight:400} .layer--usps[data-type="2"] .usps__title, .layer--usps[data-type="3"] .usps__title, .layer--usps[data-type="4"] .usps__title{margin:0} .layer--usps[data-type="1"] .usp__icon, .layer--usps[data-type="2"] .usp__icon, .layer--usps[data-type="3"] .usp__icon, .layer--usps[data-type="4"] .usp__icon{flex:0 0 auto;line-height:0} /* Het eigen beeld van een USP is hier een icoon, geen kaartbeeld: vierkant meelopend met de regel in plaats van een strook van 180px bovenaan een tegel. */ .layer--usps[data-type="4"] .usps__img{flex:0 0 auto;width:48px;height:48px;object-fit:contain} /* De maat van een icoon komt van het bestand zelf: de renderer zet `--usp-icon-size` uit de afmetingen die bij het bestand zijn vastgelegd (zie LayerUsps::iconWrapper). Die stond eerst op twee plekken hard — `iconHtml($veld, 48, 48)` en een kale 2.5rem op de wrapper — waardoor een icoon van 24x24 eerst werd opgeschaald en daarna teruggeknepen. De 2.5rem blijft als vangnet voor media zonder bekende afmetingen. Wil de redacteur een andere maat, dan zet 'ie die op `design_usps_item_icon`; die gecompileerde class staat later in de head en wint hiervan. Het plafond is er omdat een icoonveld ook een fóto kan bevatten: het veld van formaat 4 heet "eigen beeld per USP", en op demo 321 staat daar een productbeeld van 1000x1000 in. Die sectie werd 3150px hoog zodra de maat het bestand ging volgen. Dat is een layout-grens en geen tweede default: het bestand bepaalt de maat, de layout bepaalt hoe groot een icoon hoogstens mag worden. 8rem laat de echte iconen ongemoeid (24, 48 en 80px in het wild) en vangt alleen het geval af waarin er geen icoon maar een afbeelding in het veld zit. Waarom hier en niet in `critical/usps.css`: die wordt lang niet overal geladen. Demo 321 draait op `shell.css` en had de regel dus niet — precies waarom dat productbeeld daar op ware grootte stond. Dit bestand stuurt de renderer zelf mee. */ .usp__icon{width:var(--usp-icon-size,2.5rem);max-width:var(--usp-icon-max,8rem);height:auto} .usp__icon img,.usp__icon svg{display:block;width:100%;height:auto;max-width:100%;object-fit:contain} /* Het merkteken van formaat 1: een vinkje in een rondje, getekend in CSS. Het formaat kent geen beeld-veld (dat is het verschil met 2 en 4), dus een echt icoon zou een veld vragen dat er niet is. `currentColor` laat 'm de tekstkleur volgen, en omdat het element dezelfde slot-class draagt als een echt icoon kan de redacteur maat en kleur gewoon instellen. */ .usp__icon--check{width:1.15em;height:1.15em;border-radius:50%;background:currentColor; position:relative;flex:0 0 auto;align-self:center} .usp__icon--check::after{content:"";position:absolute;left:35%;top:20%;width:24%;height:48%; border:solid var(--surface,#fff);border-width:0 2px 2px 0;transform:rotate(45deg)} /* Gecentreerd = de groep krimpt naar z'n inhoud en staat in het midden. `inline-flex` is waar het om draait: met een grid of een gewone flex vult de lijst altijd de volle breedte en is "Gecentreerd" niet te onderscheiden van "Volledige breedte". */ .layer--usps[data-type="1"][data-view="inline"] .layer__inner, .layer--usps[data-type="2"][data-view="inline"] .layer__inner, .layer--usps[data-type="4"][data-view="inline"] .layer__inner{text-align:center} .layer--usps[data-type="1"][data-view="inline"] .usps, .layer--usps[data-type="2"][data-view="inline"] .usps, .layer--usps[data-type="4"][data-view="inline"] .usps{display:inline-flex;justify-content:center} .layer--usps[data-type="1"][data-view="inline"] .usps > .usps__item, .layer--usps[data-type="2"][data-view="inline"] .usps > .usps__item, .layer--usps[data-type="4"][data-view="inline"] .usps > .usps__item{flex:0 0 auto;text-align:left} /* Formaat 3 gebruikt normaal twee tekstkolommen. Ook daar moet "Gecentreerd" de groep als geheel centreren, zonder de twee kolommen tot één rij te maken. */ .layer--usps[data-type="3"][data-view="inline"] .layer__inner{text-align:center} .layer--usps[data-type="3"][data-view="inline"] .usps{ width:fit-content; margin-inline:auto; text-align:left; } /* 3 — in 2 kolommen. `column-count` en geen grid: de USP's vullen dan kolom voor kolom en een enkele lange USP breekt de rij niet. */ .layer--usps[data-type="3"] .usps{display:block;column-count:2;column-gap:clamp(24px,4vw,64px)} .layer--usps[data-type="3"] .usps__item{break-inside:avoid;margin-bottom:1.25rem} @media(max-width:640px){ .layer--usps[data-type="3"] .usps{column-count:1} } .usps__item{margin:0;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 4px 18px rgba(0,0,0,.07);transition:box-shadow .2s ease,transform .2s ease} .usps__item:hover{box-shadow:0 8px 28px rgba(0,0,0,.11);transform:translateY(-2px)} .usps__img{width:100%;height:180px;object-fit:cover;display:block} .usps__body{padding:1.6rem} .usps__title,.usps__item h3{margin:0 0 .4rem;font-size:1.05rem;color:var(--ink)} .usps__text{margin:0;color:var(--muted)} }