/** * Agri-Boss Winkelweergave — de STIHL-inhoudspagina's. * * Voor de zes informatiepagina's die Syndified aanlevert (bronnen, * advies, veiligheid, FAQ, veiligheidsbladen, catalogus). Die pagina's * worden CLIENT-SIDE getekend: er staat één leeg
in de * HTML en de rest komt uit een Vue-app. Er is dus geen template, geen * hook en geen filter waar wij server-side iets aan kunnen veranderen — * de enige plek waar wij bestaan is de opmaak van de klassen die die * app produceert. * * DIT IS HET TWEEDE EN LAATSTE BESTAND WAAR !important IS TOEGESTAAN. * (Het andere is syndified.css; die twee zijn samen de volledige * uitzondering, de rest van de plugin blijft normale CSS.) * * Waarom het hier niet anders kan, drie redenen die alle drie los van * elkaar al genoeg zijn: * - de Tailwind-build van Syndified zet zijn eigen utilities op * !important, en een normale declaratie verslaat een !important * nooit — specificiteit noch bestandsvolgorde doen daar iets aan; * - app.css wordt als kale midden in de body geprint, ná elke * stylesheet die wij netjes kunnen enqueuen; * - de links dragen een INLINE style-attribuut (color: rgb(37,99,235)). * Tegen een inline style bestaat maar één CSS-verdediging, en dat is * author-!important. Dat is hier geen theorie: unificatie.css r.15 * draait die links vandaag al groen langs precies deze route. * * WAT HIER BEWUST ZONDER !important STAAT — lees dit vóór je er ergens * een ! bij zet "omdat de rest het ook heeft". app.css bevat geen * Tailwind-preflight: er staat geen enkele elementregel op a, p, img of * h1-h6. Deze properties worden er nul keer gedeclareerd en zijn dus * gewoon vrij: gap, grid-template, aspect-ratio, object-fit, * overflow-wrap, box-shadow, transition, transform, letter-spacing, * outline, text-underline-offset, text-decoration-thickness en -color, * en alles op .dsw-content-body behalve font-size/line-height. Ook * main.site-main is vrij: de 1140px van hello-elementor is een NORMALE * declaratie (0,2,1) en die verliest van onze scope. * * OMGEKEERD GELDT ER ÉÉN VAL DIE JE NIET ZIET: het hele MARGE-blok van * app.css draagt wél !important (.dsw-m-4, .dsw-my-*, .dsw-mb-*, * .dsw-mt-*, .dsw-mx-auto). Marges winnen hier dus nooit op * specificiteit alleen — en dsw-m-4 staat aantoonbaar op de * accordeons. Elke margedeclaratie in dit bestand draagt daarom een !; * dat is geen gemakzucht maar de enige manier om het verticale ritme * per pagina hetzelfde te houden. * * SPELREGELS OM UPDATES VAN SYNDIFIED TE OVERLEVEN: * - Stuur op ELEMENTEN (p, h2, h3, li, a, img) binnen de scope, niet * op maatklassen. Een

draagt dsw-text-base md:dsw-text-lg * lg:dsw-text-xl; wie .dsw-text-base overschrijft vecht met de * verkeerde trap, want boven 1280px wint de derde. Eén elementregel * zonder media query slaat alle drie tegelijk — een media query * voegt geen specificiteit toe. * - Waar een utility toch nodig is als HERKENNINGSPUNT, gebruik dan * [class*="…"] en geen letterlijke .md\:dsw-w-4\/12: zelfde gewicht, * maar geen last van een gewijzigd prefix of een verschoven md/lg. * - Geen posities tellen. Nergens staat een keten als * > div > div > div: die schuift bij één extra wrapper stilletjes * een niveau op en landt dan op het verkeerde element. Als hier iets * breekt, moet het LEEG breken — de opmaak verdwijnt en de pagina * staat er weer bij zoals hij was. * - Drie dingen dragen dit bestand: #app.dsw-content-page, * .dsw-content-body en de markers dsw-flex-col / dsw-pt-6. Bij een * Syndified-update hoeven alleen die drie nagekeken te worden. * * DE SCOPE, EN WAAROM HIJ ZO STREK IS. body.ab-eigen-inhoudspaginas is * de module-schakelaar, GEEN paginascope: die class staat op élke * front-endpagina zodra het vinkje aan gaat. De paginascope komt * volledig uit #app.dsw-content-page. Categoriepagina's dragen * #app.dsw-products-grid-page en productpagina's #app.dsw-single-product, * dus die kunnen per definitie niet matchen — en dat is niet vrijblijvend: * één ongescopeerde regel op .dsw-text-base raakt 202 elementen op elk * van de 515 categoriepagina's. Vrijwel elke regel loopt bovendien door * .dsw-content-body, een class die buiten deze zes pagina's nul keer * voorkomt. Twee onafhankelijke sloten op dezelfde deur. * * Kleuren via var() MET hex-fallback: dit bestand laadt los van * weergave.css (waar :root staat). Zou die ooit wegvallen, dan is een * var() zonder fallback "invalid at computed-value time" en valt de hele * declaratie weg — bij een achtergrondkleur betekent dat wit-op-wit. * * Structuur: * 1. Het frame (breedte en vlak) * 2. Rijen * 3. Het raster * 4. De kaart * 5. Beeld * 6. Typografie * 7. Links * 8. Het titelblok boven de app * 9. Accordeons en hun knoppen * 10. Breekpunten */ /* ── 1. HET FRAME ─────────────────────────────────────────────── */ /* * hello-elementor knijpt .site-main op 1200px+ naar 1140px, waardoor * deze pagina's smaller stonden dan de header, de kruimels en het * archief (allemaal 1400px). Normale declaratie van (0,2,1), dus geen * !important nodig. De :has() is hier tegelijk de paginatoets: de * .site-main van een categoriepagina bevat geen #app.dsw-content-page. */ body.ab-eigen-inhoudspaginas main.site-main:has(#app.dsw-content-page) { max-width: none; width: 100%; } /* * background-COLOR en niet de shorthand: syndified.css legt op * #app:not([style]) een background-image als laadglans, en een * shorthand zou die stilletjes wissen. Het witte vlak is nodig omdat de * kaarten hun rand ontlenen aan het kleurverschil met de pagina. */ body.ab-eigen-inhoudspaginas #app.dsw-content-page { background-color: var(--ab-wit, #fff); } /* * De twee !important's zijn de wortel van de hele typografieklacht: * dsw-text-2xl (24px) en dsw-leading-5 (20px) staan op dit element * zelf en erven naar alles eronder. De rest van deze regel is gewone * CSS — .dsw-content-body komt nul keer voor in app.css. * * 1400px + 24px is niet verzonnen: het is var(--ab-container) plus de * 24px die .ab-container, .ab-kruimelpad en het archiefskelet op élk * breekpunt aanhouden. 48/40 verticaal is de maat van .ab-hubkaarten. * Die 48px bovenaan draagt in zijn eentje de afstand tot het titelblok; * de .dsw-container hierboven houdt daarom maar 8px onderpadding over * (zie §8), anders stapelen de twee tot 72px en hangt de H1 los. * * margin-inline MET !: dit element draagt dsw-mx-auto en app.css zet * daar margin-left/right: auto !important. Zonder ! verliest onze * declaratie ondanks de hogere specificiteit — vandaag onzichtbaar * omdat de waarde toevallig dezelfde is, maar wie hier ooit iets * anders neerzet krijgt geen effect en zoekt het op de verkeerde plek. */ body.ab-eigen-inhoudspaginas #app.dsw-content-page .dsw-content-body { max-width: var(--ab-container, 1400px); margin-inline: auto !important; padding-inline: 24px; padding-block: 48px 40px; box-sizing: border-box; font-size: 15px !important; line-height: 1.6 !important; color: var(--ab-tekst, #505050); } body.ab-eigen-inhoudspaginas #app.dsw-content-page .dsw-content-body *:not(.dsw-hidden) { box-sizing: border-box; } /* ── 2. RIJEN ─────────────────────────────────────────────────── */ /* * :not(.dsw-hidden) staat op elke structurele stap in dit bestand. * Dat is geen formaliteit: die divs staan op display: none !important * en zouden door onze display-regels juist ZICHTBAAR worden, omdat wij * op specificiteit winnen. Het verbod hoort in de code te staan, niet * in de aanname dat ze wel ergens anders zullen zitten. * * Ritme via margin en niet via gap: .dsw-content-body is een gewone * blokcontainer, dus aangrenzende rijmarges klappen samen. Een lege rij * kost daardoor nul ruimte. Met gap zou diezelfde lege rij ineens wél * meetellen — dat is precies de fout die de klacht "lege rijen nemen * ruimte in" zou hebben veroorzaakt in plaats van opgelost. * * De ! is hier geen sierletter: zodra één rij een Tailwind-margeklasse * draagt (dsw-m-4 staat aantoonbaar op de accordeons) valt het ritme * daar zonder ! terug op Tailwinds waarde, en dan verspringt het per * pagina op een manier die niemand meer aan deze regel toeschrijft. */ body.ab-eigen-inhoudspaginas #app.dsw-content-page .dsw-content-body > *:not(.dsw-hidden) { margin-block: 0 40px !important; } body.ab-eigen-inhoudspaginas #app.dsw-content-page .dsw-content-body > *:not(.dsw-hidden):last-child { margin-bottom: 0 !important; } /* * DE WEESKOP. Een rij met alleen een h2 is een sectiekop, geen sectie: * met de 40px hierboven staat hij even ver van de kaarten die hij * benoemt als van de sectie erboven (40 + zijn eigen 12px onderrand * naar beneden tegen 40px naar boven) en hoort hij visueel bij niets. * 12px eronder bindt hem aan wat volgt. * * Alleen als de rij géén p, img of li bevat — anders is het een gewone * inhoudsrij die toevallig met een kop begint. Waar :has() ontbreekt * gebeurt er niets en blijft de 40px staan: leeg falen, zoals de rest. * * BEWUST GEEN margin-top erbij: aangrenzende rijmarges klappen samen, * dus de 40px van de rij erboven wint altijd van een kleinere * bovenmarge hier. Zo'n declaratie zou aantoonbaar niets doen. */ body.ab-eigen-inhoudspaginas #app.dsw-content-page .dsw-content-body > *:not(.dsw-hidden):has(h2):not(:has(p, img, li)) { margin-bottom: 12px !important; } /* * BEWUST GEEN VANGREGEL VOOR "LEGE" RIJEN. Hier stond een * :not(:has(p, h1, h2, h3, h4, li, a, img, svg, iframe, video, button, * input)) die zo'n rij op display: none zette. Die is geschrapt, om * twee redenen die elk op zichzelf al genoeg zijn: * - de lijst is een POSITIEVE opsomming, dus alles wat er niet in * staat telt als leeg: een rij met alleen een tabel, alleen een ul, * alleen een span of strong, en ook kale tekst die rechtstreeks in * de div staat (:has() matcht geen tekstknopen). Die inhoud viel * dan volledig weg — inhoud uit een databron die wij niet beheren * en waarvan we dus niet weten wat er morgen in staat; * - er valt niets te winnen: door de margeklap hierboven meet een * echt lege rij 0px en kost hij geen ruimte. Het commentaar bij die * regel gaf dat zelf toe ("een gordel, geen reparatie"). * Een gordel die inhoud kan laten verdwijnen is erger dan geen gordel: * hij faalt niet LEEG maar STIL, en stil falen is precies wat de * spelregels bovenaan dit bestand uitsluiten. Meten de lege rijen ooit * wél hoogte, dan hoort daar een regel bij die op de AFWEZIGHEID van * inhoud stuurt (:not(:has(*)) plus een tekstcontrole in JS), niet op * een handmatig bijgehouden lijst van wat inhoud zou zijn. */ /* ── 3. HET RASTER ────────────────────────────────────────────── */ /* * display: grid schakelt dsw-flex, dsw-flex-col én md:dsw-flex-row in * één declaratie uit. Dat is meteen de reparatie van een breekpunt dat * in geen enkele klacht stond: Syndified's md: ligt op 1024px en niet * op 768px, dus tussen 768 en 1023 — de hele iPad-liggend-band — staan * de tegels vandaag onder elkaar op volle breedte. Onze regel staat * buiten elke media query en wint dus op élke breedte. * * auto-fit met een PERCENTAGE-minimum is de kern: lege sporen klappen * dicht, dus een rij met drie tegels wordt drie kolommen, een rij met * twee wordt 50/50 en een rij met één kolom (de tekstrijen, elke * accordeonrij) wordt volle breedte — zonder dat wij ergens hoeven te * tellen of te detecteren wat voor rij het is. Een percentage in plaats * van pixels houdt het kolomaantal stabiel over de hele band, zodat er * geen breedte bestaat waarop een kolom toevallig omklapt. * * De inline style="max-width: 1280px" op dit element laten we STAAN. * Op /stihl-catalogus/ staat daar 900px, en dat is een bewuste * leesbreedte voor lopende tekst; die met max-width: none blind * opentrekken naar 1352px maakt die pagina onleesbaar. We centreren hem * alleen, want links uitgelijnd in een vak van 1352px leest als een * fout. Netto 1280 in plaats van 1352: 36px inspringing per zijde. * * De :not() sluit dsw-flex-col-REVERSE uit. [class*=] is een * deelstring-toets, dus die klasse matcht ook — en dan zetten wij een * rij die Syndified bewust omgekeerd tekent terug in leesvolgorde. Dat * is inhoudelijk fout en niet zichtbaar in de code die het veroorzaakt. * * margin-inline ZONDER ! (als enige in dit bestand): het element dat * hier geraakt wordt draagt dsw-w-full, dsw-flex, dsw-flex-col en * md:dsw-flex-row, en géén daarvan declareert margin in app.css. * dsw-mx-auto bestaat wel, maar staat op .dsw-content-body — een ander * element. Er is hier dus letterlijk niets om te verslaan, en een ! * zonder tegenstander maakt de rest van de !'s in dit bestand minder * geloofwaardig. */ body.ab-eigen-inhoudspaginas #app.dsw-content-page .dsw-content-body [class*="dsw-flex-col"]:not([class*="dsw-flex-col-reverse"]) { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(30%, 1fr)); gap: var(--ab-goot, 24px); align-items: stretch; margin-inline: auto; } /* * De kolom brengt zijn eigen 24px padding mee (dsw-pl-6 t/m dsw-pb-6, * in twee lagen: basis én md). Als shorthand in één keer weg — per * zijde overrulen laat er op elk breekpunt één achter. De goot komt nu * van het raster, en min-width: 0 is hetzelfde vangnet als de * minmax(0, …) in weergave.css: zonder die nul rekt één lange URL de * kolom op en scrolt de pagina horizontaal. (min-width alleen is niet * genoeg om die URL ook te BREKEN; dat doet overflow-wrap in §6.) * * dsw-pt-60 en dsw-pt-64 bestaan in Tailwinds spacing-schaal en zitten * als deelstring in dsw-pt-6. Zonder de :not() verliest zo'n element * ál zijn padding. Eén :not() met een lijst en niet twee losse: een * :not() weegt zo zwaar als zijn zwaarste argument, dus dit kost * precies één klasse. Twee losse :not()'s zouden deze regel boven de * kaartregel hieronder tillen en dan zou padding: 0 de padding-bottom * van de kaart wegduwen — een fout die je pas in de tegel ziet. */ body.ab-eigen-inhoudspaginas #app.dsw-content-page .dsw-content-body [class*="dsw-pt-6"]:not([class*="dsw-pt-60"], [class*="dsw-pt-64"]) { padding: 0 !important; min-width: 0; } /* ── 4. DE KAART ──────────────────────────────────────────────── */ /* * Wat een kaart is, zegt de kolom zelf: [class*="dsw-w-"][class*="/"] * matcht elke breukbreedte (dsw-w-4/12, md:dsw-w-6/12, lg:dsw-w-1/3) * en dus precies de tegels. Een kolom die de volle breedte inneemt * draagt geen breuk en blijft bewust zonder vlak: een grijze balk van * 1280px is een balk, geen kaart. * * Het chassis is dat van .ab-subcat, letterlijk: grijs kaartvlak, wit * beeldvak, GEEN rand en GEEN radius — het kleurverschil met de witte * pagina ís de rand — en in rust geen schaduw, want de schaduw is * uitsluitend het hover-signaal. Dat het geen rand heeft is hier * toevallig ook de goedkoopste route: .dsw-border-0 zet * border-width: 0px !important, dus een randje had een extra ! gekost. * * BEWUST NIET: geen a::after met inset 0 om de hele kaart klikbaar te * maken. Dat is gedrag en geen opmaak, het maakt de tekst in de kaart * onselecteerbaar, en een tegel zonder link zou er klikbaar uitzien * zonder het te zijn. * * WIDTH: AUTO IS HIER DE BELANGRIJKSTE DECLARATIE VAN HET BLOK, hoe * onschuldig hij er ook uitziet. De kolom draagt zijn breedte als * Tailwind-!important: dsw-w-full (100%) en vanaf 1024px * md:dsw-w-4/12 (33,33%). Sinds het raster hierboven de ouder op grid * zet is deze kolom een GRID-ITEM, en dan rekt justify-self: stretch * alleen bij width: auto. Zonder deze regel resolveert die 33,33% * tegen zijn EIGEN spoor: boven 1024px werd elke tegel een derde van * zijn eigen kolom (±128px in een spoor van 384px) met twee derde lege * ruimte ernaast. Onder 1024px klopte het wél — dit is dus precies de * fout die je niet ziet als je alleen mobiel test. * * auto en niet 100%: bij auto stretcht het item naar het volle spoor, * ook als er ooit weer padding op de kolom terugkomt. */ /* * De :not(.dsw-hidden) doet hier twee dingen. Ze houdt de 127 lege * safelist-divs buiten schot (die staan op display:none !important en * moeten dat blijven), en ze tilt deze regel op (1,6,1) — één klasse * boven de padding-regel van §3, die door haar eigen :not()-lijst op * (1,5,1) is uitgekomen. Zonder dat verschil zouden die twee gelijk * staan en won deze alleen doordat hij toevallig later in het bestand * komt. Winnen op volgorde is broos; winnen op gewicht niet. */ body.ab-eigen-inhoudspaginas #app.dsw-content-page .dsw-content-body [class*="dsw-w-"][class*="/"]:not(.dsw-hidden) { display: flex; flex-direction: column; width: auto !important; overflow: hidden; padding-bottom: 20px !important; background-color: var(--ab-vlak, #F7F7F7); transition: box-shadow .15s ease; } body.ab-eigen-inhoudspaginas #app.dsw-content-page .dsw-content-body [class*="dsw-w-"][class*="/"]:hover { box-shadow: var(--ab-schaduw, 0 2px 5px rgba(0, 0, 0, .10)); } /* * De wikkel binnen de tegel (vandaag .dsw-border-0) doet niets aan de * opmaak, maar hij staat wél tussen de kaart en de titel, het beeld en * de tekst. display: contents laat hem uit de opmaakboom vallen, zodat * die drie rechtstreeks kinderen van de flexkolom worden — dan werkt de * volgorde van het beeld hieronder. Zonder wikkel verandert er niets, * want dan waren ze al rechtstreekse kinderen. Zet Syndified er ooit * een TWEEDE wikkel omheen, dan lost alleen de buitenste op en valt de * beeldvolgorde terug op de DOM-volgorde: titel eerst, beeld daaronder. * Lelijker, niet stuk — en dat is hier de bedoelde afruil (zie hierna). * * De > is essentieel en geen stijlkwestie. Met een afstammelingsteken * viel display: contents op ELKE div op ELKE diepte in de tegel, dus * ook op de geneste panelen van een accordeon die in een breukkolom * belandt: die verliezen dan hun box, hun achtergrond en hun * flexcontext en de structuur klapt in. Een geneste div met dsw-flex * is nog beschermd door zijn eigen display: flex !important — juist * een KALE structuurdiv, en dat is precies wat een accordeonpaneel is, * niet. Dat breekt niet leeg maar door elkaar, en dat is de enige * faalmodus die dit bestand niet accepteert. De gemeten wikkel is een * direct kind, dus aan de weergave van vandaag verandert dit niets. */ body.ab-eigen-inhoudspaginas #app.dsw-content-page .dsw-content-body [class*="dsw-w-"][class*="/"] > div:not(.dsw-hidden) { display: contents; } /* ── 5. BEELD ─────────────────────────────────────────────────── */ /* * In de HTML staat de titel VOOR de afbeelding; op een kaart hoort het * beeld bovenaan. order: -1 lost dat visueel op zonder de DOM te * verbouwen, en dat is hier veilig omdat er precies één focusbaar * element in een tegel zit (de titellink): zichtbare volgorde en * tabvolgorde blijven dus gelijk. * * De verhouding staat op de AFBEELDING en niet op een vak — hetzelfde * patroon als .ab-subcat__beeld img en .ab-categorien__beeld img, en om * dezelfde reden: op een vak met onbepaalde hoogte valt het beeld terug * op zijn eigen verhouding en wordt het onderaan geknipt. * * scale-down en niet cover: de bronbeelden zijn STIHL-marketingassets * van een S3-bucket en die dragen vaak een logo of tekst in een hoek. * cover zou daar op een 2:1-beeld ~6% van af snijden. scale-down knipt * nooit; de prijs is een smalle witte rand, en die valt weg tegen het * witte beeldvak. Geen mix-blend-mode: multiply hier — dat patroon * bestaat voor uitgeknipte productfoto's op wit, niet voor * sfeerbeelden, en op een grijs kaartvlak zou het de hele foto * donkerder maken. * * scale-down en niet contain, en dat verschil is zichtbaar: contain * schaalt ook OMHOOG. De bronbeelden meten 332x166, terwijl het * beeldvak op desktop ±378px breed wordt en in de 1-koloms band tot * ±519px oploopt — 1,14x tot 1,56x vergroting van een niet-retina * bron, op een 2x-scherm effectief 2,3x tot 3,1x. scale-down is * min(none, contain): verkleinen blijft, vergroten niet meer. Het * beeld staat dan scherp op zijn eigen 332px, gecentreerd in het * 16/9-vak. * * Alleen beelden IN een kaart. Een losse afbeelding in een tekstrij * houdt zijn eigen maat, en een die ergens als icoontje in een * accordeonkop blijkt te zitten wordt hier niet per ongeluk tot een * beeldvak van 16/9 opgeblazen. */ body.ab-eigen-inhoudspaginas #app.dsw-content-page .dsw-content-body [class*="dsw-w-"][class*="/"] img { order: -1; display: block; width: 100%; height: auto; margin: 0; padding: 16px; aspect-ratio: 16 / 9; object-fit: scale-down; background-color: var(--ab-wit, #fff); transition: transform .18s ease; } body.ab-eigen-inhoudspaginas #app.dsw-content-page .dsw-content-body [class*="dsw-w-"][class*="/"]:hover img { transform: scale(1.04); } @media (prefers-reduced-motion: reduce) { body.ab-eigen-inhoudspaginas #app.dsw-content-page .dsw-content-body [class*="dsw-w-"][class*="/"]:hover img { transform: none; } } /* ── 6. TYPOGRAFIE ────────────────────────────────────────────── */ /* * Gemeten stond hier p op 20px/28px en h3 op 24px/32px — boven élke * maat die dit systeem kent, op één na (de paginatitel). De schaal * hieronder is die van de winkellaag, letterlijk: h2 = de sectietitel, * h3 = de kaarttitel, p = de body-maat. * * De ! op font-family is tegen APP.CSS ZELF: daar staat * .dsw-font-dsw{font-family:Lato,Arial,Helvetica,sans-serif!important}. * Dat is geen kwestie van specificiteit — (1,3,2) verslaat (0,1,0) * ruim — maar van !important tegen !important, en dus valt deze * declaratie niet onder de "vrije" properties in de kop van dit * bestand. Haal de ! hier weg en de koppen staan in Lato. (Onze eigen * unificatielaag zet er daarnaast Mulish op; die zouden we ook zonder * ! winnen, maar hij is niet de doorslaggevende tegenstander.) Op deze * pagina's zijn h2 en h3 koppen, en koppen zijn in dit systeem Khand. */ body.ab-eigen-inhoudspaginas #app.dsw-content-page .dsw-content-body h2 { margin: 0 0 12px !important; font-family: var(--ab-font-kop, "Khand", sans-serif) !important; font-size: 32px !important; font-weight: 700 !important; line-height: 1.15 !important; color: var(--ab-zwart, #19191E) !important; text-transform: none !important; letter-spacing: normal; } /* * 500 en niet 700: Khand is bij 500 al zwaar genoeg — .ab-subcat__titel. * * text-transform MET !, gelijk aan de none op h2 hierboven. Dat die * none daar nodig was, is het bewijs dat er in app.css een * text-transform-utility met !important bestaat; die staat dan ook * niet in de vrije lijst in de kop. Zonder ! verliest onze bovenkast * stilletjes zodra Syndified er ooit een dsw-uppercase/dsw-normal-case * bij zet, en staat de kaarttitel als enige in onderkast tussen * bovenkastkoppen. letter-spacing mag zonder — die is wél vrij. */ body.ab-eigen-inhoudspaginas #app.dsw-content-page .dsw-content-body h3 { margin: 0 0 8px !important; font-family: var(--ab-font-kop, "Khand", sans-serif) !important; font-size: 22px !important; font-weight: 500 !important; line-height: 1.1 !important; color: var(--ab-zwart, #19191E) !important; text-transform: uppercase !important; letter-spacing: .01em; } body.ab-eigen-inhoudspaginas #app.dsw-content-page .dsw-content-body p { margin: 0 0 12px !important; font-size: 15px !important; line-height: 1.6 !important; color: var(--ab-tekst, #505050) !important; } /* * Binnen een kaart wordt de marge een padding: die zit op de TITEL en * de TEKST en niet op de kaart, want anders kan het beeld niet tot aan * de kaartrand lopen. 22px en de 9px ertussen komen van * .ab-subcat__inhoud. */ body.ab-eigen-inhoudspaginas #app.dsw-content-page .dsw-content-body [class*="dsw-w-"][class*="/"] h3 { margin: 0 !important; padding: 20px 22px 0; } body.ab-eigen-inhoudspaginas #app.dsw-content-page .dsw-content-body [class*="dsw-w-"][class*="/"] p { margin: 0 !important; padding: 9px 22px 0; } body.ab-eigen-inhoudspaginas #app.dsw-content-page .dsw-content-body li { font-size: 15px !important; line-height: 1.6 !important; color: var(--ab-tekst, #505050) !important; } body.ab-eigen-inhoudspaginas #app.dsw-content-page .dsw-content-body strong, body.ab-eigen-inhoudspaginas #app.dsw-content-page .dsw-content-body b { font-weight: 700 !important; color: var(--ab-zwart, #19191E) !important; } /* * Een leesmaat op de volle-breedterijen, want dáár loopt een regel * anders door tot 1280px (zo'n 170 tekens). In een tegel van ±400px * komt geen enkele alinea aan 68ch, dus daar doet deze regel niets. * * Ook op li, h2 en h3, en niet alleen op p: in dezelfde tekstrij * staan opsommingen en tussenkoppen. Stond de maat alleen op p, dan * wisselden regels van 68 tekens en regels van ±170 tekens elkaar af * binnen één tekstblok — dat leest onrustiger dan helemaal geen maat. * ch is relatief aan de eigen fontgrootte, dus de kop krijgt vanzelf * een bredere maat dan de lopende tekst; dat is precies goed. * * Dezelfde dsw-pt-60/64-uitsluiting als bij de kolomregel: zonder die * zou zo'n element hier ook als tekstkolom worden behandeld. */ body.ab-eigen-inhoudspaginas #app.dsw-content-page .dsw-content-body [class*="dsw-pt-6"]:not([class*="dsw-pt-60"], [class*="dsw-pt-64"]):not([class*="dsw-w-"][class*="/"]) p, body.ab-eigen-inhoudspaginas #app.dsw-content-page .dsw-content-body [class*="dsw-pt-6"]:not([class*="dsw-pt-60"], [class*="dsw-pt-64"]):not([class*="dsw-w-"][class*="/"]) li, body.ab-eigen-inhoudspaginas #app.dsw-content-page .dsw-content-body [class*="dsw-pt-6"]:not([class*="dsw-pt-60"], [class*="dsw-pt-64"]):not([class*="dsw-w-"][class*="/"]) h2, body.ab-eigen-inhoudspaginas #app.dsw-content-page .dsw-content-body [class*="dsw-pt-6"]:not([class*="dsw-pt-60"], [class*="dsw-pt-64"]):not([class*="dsw-w-"][class*="/"]) h3 { max-width: 68ch; } /* * BREEKBAARHEID. min-width: 0 op de kolom (§3) belet dat een lange * string het RASTERSPOOR oprekt, maar hij breekt dat woord niet. Een * URL, een artikelcode of een lange samenstelling in een bovenkast-h3 * loopt op 375px gewoon buiten zijn box: in een kaart knipt * overflow: hidden dat geruisloos af (halve titel, geen enkel signaal * aan de lezer), en in een volle-breedterij schuift de tekst voorbij * de 24px padding-inline en scrolt de hele pagina horizontaal. * * anywhere en niet break-word: anywhere telt ook mee bij het bepalen * van de min-content-breedte, en dat is precies wat een rasterspoor * hier nodig heeft. Geen ! nodig — app.css declareert overflow-wrap * nul keer. * * Op de CONTAINER en niet op een lijstje elementen: overflow-wrap * erft, dus zo geldt het ook voor een tabelcel, een span, een h5 of * kale tekst die rechtstreeks in een rij staat. Een opsomming zou * precies díe gevallen missen — en de inhoud komt uit een bron die * wij niet beheren, dus we weten niet wat er morgen in staat. De * paginatitel valt buiten .dsw-content-body en krijgt hem apart. */ body.ab-eigen-inhoudspaginas #app.dsw-content-page .dsw-content-body, body.ab-eigen-inhoudspaginas main.site-main:has(#app.dsw-content-page) h1:not(#app *) { overflow-wrap: anywhere; } /* ── 7. LINKS ─────────────────────────────────────────────────── */ /* * Twee soorten links, twee behandelingen — dezelfde rolverdeling als * .ab-subcat__titel a (zwart, groen bij hover op de KAART) tegenover * .ab-subcat__lijst a (groen en onderstreept). * * De ! op color is tegen het inline style-attribuut; de ! op * background-color tegen de inline background op één van de links, die * vandaag nergens wordt overruled. Dikte, offset en kleur van de streep * hebben er GEEN nodig: dsw-underline zet alleen text-decoration-line. */ body.ab-eigen-inhoudspaginas #app.dsw-content-page .dsw-content-body a { color: var(--ab-accent, #3B732C) !important; background-color: transparent !important; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .15s ease; } body.ab-eigen-inhoudspaginas #app.dsw-content-page .dsw-content-body a:hover { color: var(--ab-accent-donker, #2E5A22) !important; } body.ab-eigen-inhoudspaginas #app.dsw-content-page .dsw-content-body a:focus-visible { outline: 2px solid var(--ab-accent, #3B732C); outline-offset: 2px; } body.ab-eigen-inhoudspaginas #app.dsw-content-page .dsw-content-body h3 a { color: var(--ab-zwart, #19191E) !important; text-decoration-line: none !important; } /* * De kaarttitel is het ENIGE aanklikbare element in een tegel (de kaart * zelf is bewust niet klikbaar, zie §4). Twee dingen kloppen daar niet * zonder deze regel, en allebei gelden ze juist op touch: * * - TREFZONE. Een inline link is zo hoog als zijn regelbox: 22 x 1,1 * = 24,2px op desktop en 19 x 1,1 = 20,9px op mobiel. Daarmee zit * het belangrijkste tapdoel van de pagina onder de 24px van WCAG * 2.2 SC 2.5.8 — een strookje van 21px op een kaart van 327px. * inline-block plus 3px padding-block brengt dat op ~27px. De * titelblok wordt daardoor 6px hoger; dat is de hele prijs. * - AFFORDANCE. Zonder streep is de titel visueel identiek aan * gewone koptekst; het enige signaal was de groene hoverkleur, en * hover bestaat niet op touch. De streep is een niet-kleurgebonden * signaal en werkt dus ook voor wie kleur niet ziet. (Een chevron * via ::after kan ook, maar hangt af van de glyphdekking van Khand * — een streep niet.) * * De ! op text-decoration-line is tegen onze eigen none hierboven; * dikte en offset erven van de basisregel voor a. */ body.ab-eigen-inhoudspaginas #app.dsw-content-page .dsw-content-body [class*="dsw-w-"][class*="/"] h3 a { display: inline-block; padding-block: 3px; text-decoration-line: underline !important; } /* * De hover hangt aan de KAART en niet aan de link — dat is het patroon * van .ab-subcat en het is de reden dat er drie dingen tegelijk * bewegen: schaduw, beeld en titel. */ body.ab-eigen-inhoudspaginas #app.dsw-content-page .dsw-content-body [class*="dsw-w-"][class*="/"]:hover h3 a { color: var(--ab-accent, #3B732C) !important; } /* ── 8. HET TITELBLOK BOVEN DE APP ────────────────────────────── */ /* * De H1 staat als BROER naast #app, niet erin (h1.closest() op * .dsw-content-page geeft null), en is vanuit de gewone scope dus * onbereikbaar — CSS kan niet omhoog. Vandaar :has(): die houdt * .dsw-content-page letterlijk in de selector en is tegelijk de * paginatoets, zonder een lijst met page-ID's die veroudert zodra er * een zevende pagina bijkomt of WPML een vertaling maakt. * * :not(#app *) sluit uit dat we per ongeluk een .dsw-container BINNEN * de app raken. * * Gemeten stond de titel op 48px Mulish met 5rem lucht erboven, boven * een pagina die daarna in 15px verderging. 34px Khand uppercase is * letterlijk de archief-paginatitel; de ! is nodig omdat .dsw-container * width en max-width in vier elkaar overlappende banden met !important * zet en md:dsw-pt-20 dat ook doet. * * ONDERPADDING 8 EN NIET 24. Die 24px stapelde op de 48px bovenpadding * van .dsw-content-body — er is geen margeklap tussen de twee, want * het zijn paddings van twee verschillende elementen. Netto stond er * 72px tussen de H1 en de eerste rij, tegenover 12px binnen het * kopblok zelf: de titel hing daardoor los bovenaan in plaats van bij * zijn eigen pagina te horen. De afstand wordt nu volledig gedragen * door de 48/32px van .dsw-content-body; de 8px die blijft staan is * alleen een lichte scheiding, zodat het kopblok niet tegen de inhoud * aan komt te liggen als die 48px ooit verandert. */ body.ab-eigen-inhoudspaginas main.site-main:has(#app.dsw-content-page) .dsw-container:not(#app *) { width: 100% !important; max-width: var(--ab-container, 1400px) !important; margin-inline: auto; padding: 48px 24px 8px !important; } body.ab-eigen-inhoudspaginas main.site-main:has(#app.dsw-content-page) h1:not(#app *) { margin: 0 0 6px !important; font-family: var(--ab-font-kop, "Khand", sans-serif) !important; font-size: 34px !important; font-weight: 700 !important; line-height: 1.1 !important; color: var(--ab-zwart, #19191E) !important; text-transform: uppercase !important; letter-spacing: .01em; } /* ── 9. ACCORDEONS EN HUN KNOPPEN ─────────────────────────────── */ /* * De site kent geen afgeronde hoeken (--ab-radius: 0). De twee * "Expand All / Collapse All"-knoppen op /stihl-faq/ zijn de enige * plek waar dat vandaag geschonden wordt: gemeten 9999px. Dat komt * doordat unificatie.css rounded-full juist uitzondert én daar alleen * op raster- en productpagina's werkt, dus op deze zes pagina's gebeurt * er nu niets. Vandaar deze regel, en breed genoeg om ook een * toekomstige rounded-lg te vangen. * * :not(.dsw-hidden) OP ALLE DRIE DE REGELS IN DEZE PARAGRAAF. Dit zijn * de enige regels van het bestand die niet ook door .dsw-content-body * lopen — en dat is precies waar de 127 lege safelist-divs staan: die * zijn BROERS van .dsw-content-body, geen kinderen. Zo'n div bestaat * alleen om klassenamen in de Tailwind-build te houden, dus dat er * ooit een dsw-rounded-full tussen zit is geen randgeval maar de * bedoeling van zo'n safelist. Wij zetten hieronder display: * inline-flex !important met (1,4,1) tegenover .dsw-hidden's display: * none !important met (0,1,0) — wij winnen, en dan staat er een groen * blok van 44px op een pagina waar niets hoort te staan. Elders in dit * bestand staat deze grendel overal; hier ontbrak hij. */ body.ab-eigen-inhoudspaginas #app.dsw-content-page [class*="dsw-rounded"]:not(.dsw-hidden) { border-radius: 0 !important; } /* * De accordeonkoppen staan op rgb(55,65,81), een blauwgrijs dat in dit * palet niet bestaat. --ab-donker is gedocumenteerd als "topbalk en * footer, verder nergens" en dat rekken we hier op; die keuze is * bewust. Het alternatief — een licht vlak — dwingt ons dsw-text-white * te overrulen, en de kleur van de chevrons in deze koppen is nooit * gemeten. Een donker vlak kan een icoon nooit onzichtbaar maken, een * licht vlak wel. Geen nieuwe kleur, geen gok. * * De uitsluiting is versmald van dsw-rounded naar dsw-rounded-FULL. * Hij bestaat alleen om de twee knoppen hieronder niet donker te * maken, en die dragen rounded-full. De brede versie sloot ook een kop * met een dsw-rounded-lg of dsw-rounded-md uit — dan bleef precies het * element blauwgrijs dat deze regel moet repareren. De twee regels * sluiten elkaar nu netjes uit op één en dezelfde klasse. * * NIET OP TE LOSSEN VANUIT DE CSS: draagt de accordeonKOP zélf ook een * dsw-rounded-full, dan sluit deze :not() hem alsnog uit en pakt de * knopregel hieronder hem erbij. De bronmeting somt de klassen van de * accordeons op één hoop op (dsw-bg-gray-700 én dsw-rounded-full) en * splitst ze niet per element, dus dat valt hier niet te beslissen. * Blijkt bij meting op /stihl-faq/ dat de kop rounded-full draagt, dan * moet de scheiding op een ander kenmerk (button versus div, of * dsw-cursor-pointer) — niet op nóg een deelstring. */ body.ab-eigen-inhoudspaginas #app.dsw-content-page [class*="dsw-bg-gray-700"]:not(.dsw-hidden):not([class*="dsw-rounded-full"]) { background-color: var(--ab-donker, #1C2B1A) !important; padding: 12px 16px !important; min-height: 48px; font-family: var(--ab-font, "Mulish", sans-serif) !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.35 !important; } /* * TEKST OP HET DONKERE VLAK. §6 zet p, li, strong en b met !important * op #505050 respectievelijk #19191E. Op het vlak dat de regel * hierboven introduceert (--ab-donker) levert dat 1,9:1 en 1,4:1 op — * feitelijk onleesbaar, en Syndified kan het niet terugdraaien want de * ! ligt bij ons. Dit is geen theoretisch geval: de accordeonregels * zijn gescopeerd op #app.dsw-content-page en de typografie op * .dsw-content-body, dus zodra een accordeon binnen .dsw-content-body * valt gelden ze allebei. * * color: inherit en geen vaste kleur: dan volgt de tekst de kleur van * de kop (dsw-text-white) en blijft hij ook kloppen als Syndified het * vlak ooit anders inkleurt. a staat er bewust bij — accentgroen op * --ab-donker haalt 1,3:1, dus daar geldt hetzelfde bezwaar; de * onderstreping van dsw-underline blijft het linksignaal. * * De selector loopt door .dsw-content-body, want alleen dáár bestaat * het conflict — §6 begint zelf ook bij .dsw-content-body. Dat levert * (1,4,2) tegen de (1,3,2) daar, dus deze wint zonder dat er ergens * een specificiteitswedloop op gang komt. */ body.ab-eigen-inhoudspaginas #app.dsw-content-page .dsw-content-body [class*="dsw-bg-gray-700"] p, body.ab-eigen-inhoudspaginas #app.dsw-content-page .dsw-content-body [class*="dsw-bg-gray-700"] li, body.ab-eigen-inhoudspaginas #app.dsw-content-page .dsw-content-body [class*="dsw-bg-gray-700"] strong, body.ab-eigen-inhoudspaginas #app.dsw-content-page .dsw-content-body [class*="dsw-bg-gray-700"] b, body.ab-eigen-inhoudspaginas #app.dsw-content-page .dsw-content-body [class*="dsw-bg-gray-700"] a, body.ab-eigen-inhoudspaginas #app.dsw-content-page .dsw-content-body [class*="dsw-bg-gray-700"] h2, body.ab-eigen-inhoudspaginas #app.dsw-content-page .dsw-content-body [class*="dsw-bg-gray-700"] h3, body.ab-eigen-inhoudspaginas #app.dsw-content-page .dsw-content-body [class*="dsw-bg-gray-700"] h4 { color: inherit !important; } /* * DE FOCUSRING MOET MET HET VLAK MEEBEWEGEN. De ring uit §7 is * accentgroen: tegen wit 5,7:1 en tegen het kaartvlak 5,3:1, maar * tegen --ab-donker nog 2,6:1 — onder de 3:1 die WCAG 2.2 SC 1.4.11 * voor niet-tekstuele contrasten vraagt. Juist in deze koppen kunnen * links staan. Gelijke specificiteit als §7 (1,4,2) en later in het * bestand, dus deze wint. * * Breedte en stijl staan er voluit bij en niet alleen de kleur. De * regel uit §7 loopt namelijk door .dsw-content-body; valt een * accordeon daar ooit buiten, dan matcht die regel niet en zou hier * in z'n eentje alleen een kleur zonder ring overblijven. */ body.ab-eigen-inhoudspaginas #app.dsw-content-page [class*="dsw-bg-gray-700"] a:focus-visible { outline: 2px solid var(--ab-wit, #fff); outline-offset: 2px; } /* * De accordeonkop is zelf bedienbaar (dsw-cursor-pointer, en op de FAQ * zit er een chevron in die openklapt). Er stond nergens een * focusstijl voor: de enige :focus-visible in het bestand stond op a. * Een toetsenbordgebruiker verloor daarmee zijn positie op de enige * bediening van de pagina. Wit, want het vlak eronder is donker; * negatieve offset, want de kop loopt tot de rand van zijn kolom en * een ring die naar buiten valt, valt buiten beeld. */ body.ab-eigen-inhoudspaginas #app.dsw-content-page [class*="dsw-bg-gray-700"]:not(.dsw-hidden):focus-visible { outline: 2px solid var(--ab-wit, #fff); outline-offset: -3px; } /* * De twee knoppen krijgen het vlak van .ab-acties .ab-wagen: gevuld * accentgroen met witte tekst, Khand-bovenkast, vierkant. Gevuld en * niet omlijnd om dezelfde reden als hierboven — deze knoppen dragen * dsw-text-white op !important, dus op een licht vlak zou het label * verdwijnen. De expliciete resets van background t/m box-shadow staan * er omdat de Elementor-kit élke