/* Theme Name: Ouwerkerk Logistics Theme URI: n/a Template: kadence Author: Dutch Portfolio B.V. Author URI: n/a Description: Child Theme Description Version: 1.0.23 License: GNU General Public License v3.0 (or later) License URI: https://www.gnu.org/licenses/gpl-3.0.html */ /* ========================================================================== Wat hier staat en waarom De vormgeving zit in de blokken zelf: achtergronden, marges, randen, radius en lettergroottes staan als Kadence-attributen op de rijen, secties en tekstblokken. Daar hoort het, want dan ziet een redacteur in de editor wat er op de voorkant gebeurt. Belangrijk om te weten voordat je hier iets aan een eigen klasse hangt: kadence/advancedheading schrijft zijn className NIET naar de HTML. Zet je er in de editor "Extra CSS-klasse" op, dan staat die wel in de blokattributen maar niet in de class van de

of

op de voorkant, en je regel pakt stil niet. Bij kadence/column en kadence/rowlayout gaat dat wél goed. Wil je een tekstblok opmaken, doe het dan met de attributen van het blok — niet hier. Wat overblijft is dit: de knoppen, en per component wat Kadence in zijn blokinstellingen niet kent. Elk blok zegt waarom het hier staat. ========================================================================== */ :root { /* De merkkleuren staan in het Kadence-palet (var(--global-paletteN)): 1 rood, 2 rood donker, 3 donkergroen, 4 groen 2, 5 olijf donker, 6 olijf, 7 zand, 8 papierwit, 9 wit. Hier alleen wat daar niet in staat. */ --ol-olijf-licht: #9D9A8A; --ol-offwhite: #EBE5DE; --ol-rood-licht: #FFD1CD; /* De grijzen uit het websitepalet (Figma OUWLOG Kleurpalet, CcA6dOg6qUYubxbGQYupV4) en Grijs 5 uit de brand guidelines (qDflydUQr78IHUIqqEEMbR, 32:206), die het websitepalet niet heeft. */ --ol-grijs-5: #F2F2F2; /* Grijs 5: vlak van de pil, stappenlabel, inactieve tab */ --ol-grijs-10: #E6E6E6; /* Grijs 10: badge Reference, rand invoervelden en zoekveld */ --ol-grijs-25: #BFBFBF; /* Grijs 25: rand en hover van de outline-knop, actieve tab */ --ol-grijs-60: #949494; /* Grijs 60: tekst van de outline-knop, marktkaart, meta en Read more van de kennisbankkaart */ /* Namen die blokken al gebruiken met var(--ol-…) in het kleurveld. Ze wijzen naar een paletkleur; de oude Figma-tinten (#F4F1ED, #717064, #DCDCDC, rgb(6 29 24 / .8)) staan in geen van beide paletten. */ --ol-zand-licht: var(--global-palette8); /* beige secties: nu papierwit */ --ol-grijs-licht: var(--ol-grijs-5); --ol-grijs: var(--global-palette5); /* tekst op grijs 5, veeg van de pil: olijf donker */ --ol-grijs-midden: var(--ol-grijs-60); --ol-grijs-rand: var(--ol-grijs-25); --ol-grijs-tab: var(--ol-grijs-10); --ol-rand: var(--ol-grijs-10); /* rand van invoervelden */ --ol-groen-80: rgb(0 39 35 / .8); /* zachte tekst op de homepage: donkergroen op 80% */ --ol-radius: 6px; /* Het vinkje uit het componentenblad (wit, op een rondje olijf donker). */ --ol-vinkje: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); /* De chevron (kb-custom-112) als masker, gecentreerd in 16 × 16. */ --ol-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3.8 3.95 16 16'%3E%3Cpath d='M8.97474 17.9745L8.60429 17.6041C11.7133 14.241 11.7701 9.67802 8.61981 6.27924L8.97481 5.92424L15 11.9494L8.97474 17.9745Z'/%3E%3C/svg%3E"); } /* ========================================================================== Knoppen Native Kadence-knoppen: tekst, icoon, kleuren, typografie, padding en afronding staan in het blok. Hier alleen wat Kadence niet kent: de chipknop met de veeg (ol-knop-veeg, varianten rood, donker en licht), de pil zonder chip (ol-knop-pil), twee knoppen naast elkaar (ol-knop-vul, rood of outline), alle drie verderop, en de tertiaire tekstlink (ol-tekstlink). Welke knop waar hoort: bouwplan-site.md, *Knoppen horen op één plek*. kadence/singlebtn zet zijn className op de , dus deze selectors pakken. Dat is niet vanzelfsprekend; zie de opmerking hierboven. ========================================================================== */ /* ========================================================================== Diensten: tabs met een Advanced Slider per tab Tabs en slider doen bijna alles zelf — kleuren, padding, radius, typografie, kolommen, niet rondlopen, pijlpositie. De kaart is een slide: de foto is de achtergrond, de overlay erover #f4f1ed op 100%, en een Sectie met titel, tekst en knop. Hieronder alleen wat er in de blokinstellingen niet bestaat. Alles hangt aan de klasse ol-diensten-slider op de slider, niet aan de tabs: die klasse zou in de markup van de tabs terecht moeten komen, en een attribuut schrijven zonder dat de markup meeverandert laat de editor "onverwachte inhoud" melden. Per pagina schuiven is een filter in functions.php (ouwerkerk_slider_per_pagina): Kadence negeert slidesScroll bij het renderen. ========================================================================== */ /* Het vlak achter de tabtitels, hier en bij de trade lanes (daar wit op de foto). Kadence kan elke titel een achtergrond geven, maar de lijst eromheen niet. De ruimte tussen de titels staat hier ook: die hoort bij dit vlak, en gutter in de tabs zet hem niet tussen de titels. */ .wp-block-kadence-tabs:has(.ol-diensten-slider) .kt-tabs-title-list, .wp-block-kadence-tabs.ol-tabs-regio .kt-tabs-title-list { display: inline-flex; flex-wrap: wrap; gap: 6px; width: auto; padding: 6px; margin: 0; border: 0; border-radius: var(--ol-radius); background: var(--ol-zand-licht); } /* De vier kaarten vormen één paneel met afgeronde buitenhoeken. Een radius in de blokinstellingen zou élke kaart rond maken, dus hij zit op de track. De scheidingslijn is gewoon de rand rechts van elke slide (native). Die staat dan ook rechts van de laatst zichtbare kaart, tegen de hoek van het paneel. Daarom knipt het paneel aan beide kanten 1px in: een lijn die precies tegen de rand valt verdwijnt in dat strookje, op elke pagina en tijdens het schuiven. Niet opgelost met is-visible — dat gaf een flits, want Splide werkt die klassen pas bij als het schuiven klaar is — en niet met een tussenruimte van 0,5px, want Kadence leest de gap met parseInt en maakt er 0 van. */ .ol-diensten-slider .splide__track { overflow: hidden; clip-path: inset(0 1px round var(--ol-radius)); } /* De scheidingslijn zit op .kb-advanced-slide-inner-wrap, en de overlay (absoluut, inset 0) rekent vanaf de li omdat de wrap zelf niet gepositioneerd is. Dan valt de overlay óver de rand heen. Met de wrap als referentie blijft hij binnen de rand. */ .ol-diensten-slider .kb-advanced-slide-inner-wrap { position: relative; } /* Hover: de overlay wijkt en de foto ligt open, de titel wordt wit en de tekst verdwijnt — zo staat het in het ontwerp bij Weg transport. Alleen met een muis. Op een aanraakscherm is een tik of een swipe ook een :hover: de foto kwam dan half tevoorschijn terwijl je doorveegde. Daar blijft de kaart in de tekststand en brengt een tik je via de sectielink meteen naar de dienst. */ .ol-diensten-slider .kb-advanced-slide-overlay { transition: opacity .35s ease; } .ol-diensten-slider .splide__slide p.wp-block-kadence-advancedheading { transition: opacity .25s ease; } @media (hover: hover) { .ol-diensten-slider .splide__slide:hover .kb-advanced-slide-overlay { opacity: 0; } .ol-diensten-slider .splide__slide:hover p.wp-block-kadence-advancedheading { opacity: 0; } .ol-diensten-slider .splide__slide:hover h3.wp-block-kadence-advancedheading { color: var(--global-palette9); } } /* De hele kaart is een link (sectielink van Kadence: een lege over de Sectie, z-index 10). De knoppen erin liggen erboven, zodat hun eigen hover werkt en een tweede knop (Direct contact op de marktkaart) zijn eigen doel houdt. Kadence geeft elke Sectie z-index 1 met position relative; een Sectie tussen de kaart en de knoppen (Tekst in de marktkaart) wordt daarmee een eigen stapellaag en houdt de knoppen onder de link. Binnen een gelinkte kaart staan die tussenliggende Secties daarom op auto. */ :is(.ol-diensten-slider .kb-section-has-link, .ol-marktkaart.kb-section-has-link) .wp-block-kadence-column { z-index: auto; } :is(.ol-diensten-slider .kb-section-has-link, .ol-marktkaart.kb-section-has-link) .wp-block-kadence-advancedbtn { position: relative; z-index: 11; } /* Een verloop van boven naar beneden over de foto, zodat de witte titel leesbaar blijft. Het ligt onder de overlay (eerder in de volgorde, allebei absoluut), dus het wordt pas zichtbaar als de overlay wijkt — geen eigen overgang nodig. Kleur: Donkergroen op 20%; het ontwerp noemt #04201a, dat niet in het palet staat en er op dit percentage niet van te onderscheiden is. */ .ol-diensten-slider .kb-advanced-slide-inner-wrap::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--global-palette3) 20%, transparent) 19.71%, transparent 100%); pointer-events: none; } @media (prefers-reduced-motion: reduce) { .ol-diensten-slider .kb-advanced-slide-overlay, .ol-diensten-slider .splide__slide p.wp-block-kadence-advancedheading { transition: none; } } /* -------------------------------------------------------------------------- Knop met chip en veeg, op een native Kadence-knop (Extra CSS-klasse ol-knop-veeg). Native in het blok: tekst, icoon (custom SVG, links), typografie, tekst- en icoonkleur, padding 12/18, afronding 6, icoongrootte 25.6 en 41px marge links. Die marge is de plek van de chip: 39 breed plus 2 tussenruimte. Hier alleen wat Kadence niet kent: - de chip als eigen vlak links van het label. Het icoon schuift erheen, het vlak zelf is ::after. Kadence' ::before blijft ongebruikt. - de veeg. Eén getal, --ol-veeg, loopt van 0 naar 1; chip, label en tekst rekenen daar elk hun eigen grens uit, dus ze lopen altijd gelijk op. - de kleuren staan hier in één verloop per vlak in plaats van als achtergrond plus bovenlaag. Twee lagen van dezelfde vorm geven op de afgeronde hoeken weer het randje van eerder. De getallen 41 (chip + tussenruimte) en 59 / 77 (41 + padding 18, en die aan beide kanten) horen bij de marge en padding in het blok. Verander je die daar, dan hier ook. De drie kleuren staan als custom properties op de knop: het vlak, de veeg en de tekst op de veeg. Standaard olijf met papierwit. Een variant zet alleen die drie (ol-knop-rood hieronder); de vlakkleur in het blok moet dan wel dezelfde zijn, want die zie je zolang de CSS nog niet geladen is. -------------------------------------------------------------------------- */ @property --ol-veeg { syntax: ""; inherits: true; initial-value: 0; } /* De kleuren, bewust op lage specificiteit: dan kan een variant ze met één klasse extra overschrijven zonder de selector hieronder te herhalen. */ .ol-knop-veeg { --ol-knop-vlak: var(--global-palette6); --ol-knop-veegkleur: var(--global-palette8); --ol-knop-veegtekst: var(--global-palette6); } /* Elke regel geldt voor de voorkant én de editor. Kadence bouwt de knop daar met andere klassen: .kt-button in .kb-btns-outer-wrap in plaats van .kb-button in .kb-buttons-wrap, .kt-btn-svg-icon voor het icoon en .kt-button-text voor de tekst. :is() neemt de hoogste specificiteit van zijn lijst, dus beide kanten komen op (0,4,0) — nodig op de voorkant, waar Kadence' eigen regel (0,3,0) is en later laadt. */ :is(.wp-block-kadence-advancedbtn.kb-buttons-wrap .kb-button, .kb-btns-outer-wrap .kt-button, .gform_wrapper .gform_footer .ol-gf-knop).ol-knop-veeg { position: relative; overflow: visible; background: linear-gradient(90deg, var(--ol-knop-veegkleur) calc(var(--ol-veeg) * (100% + 41px) - 41px), var(--ol-knop-vlak) 0); transition: --ol-veeg .45s cubic-bezier(.2, .6, .2, 1); } /* :focus en niet :focus-visible, want Kadence wisselt de icoonkleur ook op :focus. Anders loopt de chevron na een klik uit de pas met de veeg. */ :is(.kb-button, .kt-button, .ol-gf-knop).ol-knop-veeg:is(:hover, :focus) { --ol-veeg: 1; } /* Kadence' eigen hoverlaag. Die krijgt de hoverkleur van de globale themaknop (rood donker) en fadet in op hover; de veeg doet dat werk hier. */ :is(.kb-button, .kt-button, .ol-gf-knop).ol-knop-veeg::before { content: none; } :is(.kb-button, .kt-button, .ol-gf-knop).ol-knop-veeg::after { content: ""; position: absolute; inset: 0 0 0 -41px; z-index: -1; background: linear-gradient(90deg, var(--ol-knop-veegkleur) calc(var(--ol-veeg) * 100%), var(--ol-knop-vlak) 0); clip-path: inset(0 calc(100% - 39px) 0 0 round var(--ol-radius)); } /* Toetsenbordfocus om knop én chip samen: het vlak van 39px links hoort bij de knop, dus de ring loopt eromheen (2px ruimte, 2px dik, zoals de ring van de formulierknop voorheen). ::before is vrij, want Kadence' hoverlaag staat hier uit. Op donkergroen (de lichte variant) is de ring papierwit. */ :is(.kb-button, .kt-button, .ol-gf-knop).ol-knop-veeg { --ol-focusring: var(--global-palette3); } .ol-knop-veeg.ol-knop-licht { --ol-focusring: var(--global-palette8); } :is(.kb-button, .kt-button, .ol-gf-knop).ol-knop-veeg:focus-visible { outline: none; } :is(.kb-button, .kt-button, .ol-gf-knop).ol-knop-veeg:focus-visible::before { content: ""; position: absolute; inset: -4px -4px -4px -45px; border: 2px solid var(--ol-focusring); border-radius: calc(var(--ol-radius) + 4px); background: none; opacity: 1; pointer-events: none; } /* De kleuren van de chevron staan in het blok (icoonkleur en hover). Hier alleen het moment: hij wisselt als de veeg hem passeert, ~15ms na het begin en terug ~214ms na het loslaten. Hij is 7px breed, dus een gesplitste chevron zoals in de tekst is niet te zien. */ .ol-knop-veeg :is(.kb-svg-icon-wrap, .kt-btn-svg-icon) { position: absolute; top: 0; left: -41px; width: 39px; height: 100%; justify-content: center; align-items: center; transition: color 0s .214s; } /* Het icoon is 20 × 24. De editor lijnt het links uit in een vierkant van 1em (xMinYMin), de voorkant centreert het. Met de breedte van de verhouding staat het in allebei op dezelfde plek. (width: auto werkt op een inline SVG niet; die blijft dan 1em breed.) */ .ol-knop-veeg :is(.kb-svg-icon-wrap, .kt-btn-svg-icon) svg { width: calc(1em * 20 / 24); height: 1em; } :is(.kb-button, .kt-button, .ol-gf-knop).ol-knop-veeg:is(:hover, :focus) :is(.kb-svg-icon-wrap, .kt-btn-svg-icon) { transition-delay: .015s; } .ol-knop-veeg :is(.kt-btn-inner-text, .kt-button-text) { background: linear-gradient(90deg, var(--ol-knop-veegtekst) calc(var(--ol-veeg) * (100% + 77px) - 59px), currentColor 0); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } @media (prefers-reduced-motion: reduce) { :is(.kb-button, .kt-button).ol-knop-veeg, .ol-knop-veeg :is(.kb-svg-icon-wrap, .kt-btn-svg-icon) { transition: none; } .gform_wrapper.gform-theme .gform_footer .ol-gf-knop.ol-knop-veeg { --gf-ctrl-transition: none; } } /* Rode variant (offertebalk). Vlak rood, veeg rood licht, tekst op de veeg rood donker — de hover van de rode knop uit het specificatieblok. In het blok: achtergrond palette1 en hover-icoonkleur palette2. */ .ol-knop-veeg.ol-knop-rood { --ol-knop-vlak: var(--global-palette1); --ol-knop-veegkleur: var(--ol-rood-licht); --ol-knop-veegtekst: var(--global-palette2); } /* Donker (op olijf en licht, CTA-band): vlak donkergroen, veeg papierwit. In het blok: achtergrond palette3, hover-icoonkleur palette3. */ .ol-knop-veeg.ol-knop-donker { --ol-knop-vlak: var(--global-palette3); --ol-knop-veegkleur: var(--global-palette8); --ol-knop-veegtekst: var(--global-palette3); } /* Licht (op donkergroen, de casekaart): vlak papierwit, veeg donkergroen. In het blok: achtergrond palette8, tekst en icoon palette3, hover-icoon palette9. */ .ol-knop-veeg.ol-knop-licht { --ol-knop-vlak: var(--global-palette8); --ol-knop-veegkleur: var(--global-palette3); --ol-knop-veegtekst: var(--global-palette9); } /* -------------------------------------------------------------------------- Pil zonder chip (offertebalk: All modes, Sea, …). Native in het blok: tekst, vaste breedte 108, padding, afronding, typografie, en een hover die de kleuren ineens wisselt. Hier alleen de veeg van links naar rechts, zoals Figma hem tussen twee standen laat zien, met dezelfde --ol-veeg als de chipknop. De kleuren zijn die van het blok: vlak --ol-grijs-licht, veeg en tekst --ol-grijs, tekst op de veeg wit. De tekst splitst met de veeg mee, zoals bij de chipknop; zie *Gesplitste tekst* hieronder. -------------------------------------------------------------------------- */ .ol-knop-pil { --ol-knop-tekst: var(--ol-grijs); --ol-knop-veegtekst: var(--global-palette9); --ol-knop-inzet: 18px; } :is(.wp-block-kadence-advancedbtn.kb-buttons-wrap .kb-button, .kb-btns-outer-wrap .kt-button).ol-knop-pil, :is(.wp-block-kadence-advancedbtn.kb-buttons-wrap .kb-button, .kb-btns-outer-wrap .kt-button).ol-knop-pil:is(:hover, :focus) { background: linear-gradient(90deg, var(--ol-grijs) calc(var(--ol-veeg) * 100%), var(--ol-grijs-licht) 0); transition: --ol-veeg .45s cubic-bezier(.2, .6, .2, 1); } :is(.kb-button, .kt-button).ol-knop-pil:is(:hover, :focus) { --ol-veeg: 1; } :is(.kb-button, .kt-button).ol-knop-pil::before { content: none; } @media (prefers-reduced-motion: reduce) { :is(.kb-button, .kt-button).ol-knop-pil { transition: none; } } /* -------------------------------------------------------------------------- Twee knoppen naast elkaar, zonder chip (marktkaart: Read more en Direct contact). Dezelfde veeg van links naar rechts als de chip- en pilknop, op het hele vlak. De kleuren als custom properties, zoals bij ol-knop-veeg: rood (vlak rood, veeg rood licht, tekst rood donker) en outline (vlak wit, veeg grijs rand #BFBFBF, tekst donker). Bij de outline loopt de veeg als ::after over de rand heen, zodat de rand precies met de vulling meekleurt; een border-color-wissel sprong halverwege de veeg. De tekst splitst met de veeg mee, zoals bij de pil. Hero van dienst en markt (Contact us, Calculate) en de marktkaart (Read more, Direct contact). --ol-knop-tekst is de tekstkleur in het blok, --ol-knop-inzet de padding links en rechts in het blok plus de rand: 14, en 14 + 1 bij de outline. -------------------------------------------------------------------------- */ .ol-knop-vul { --ol-knop-vlak: var(--global-palette1); --ol-knop-veegkleur: var(--ol-rood-licht); --ol-knop-tekst: var(--global-palette9); --ol-knop-veegtekst: var(--global-palette2); --ol-knop-inzet: 14px; } .ol-knop-vul.ol-knop-outline { --ol-knop-vlak: var(--global-palette9); --ol-knop-veegkleur: var(--ol-grijs-rand); --ol-knop-tekst: var(--ol-grijs-midden); --ol-knop-veegtekst: var(--global-palette3); --ol-knop-inzet: 15px; } :is(.wp-block-kadence-advancedbtn.kb-buttons-wrap .kb-button, .kb-btns-outer-wrap .kt-button).ol-knop-vul, :is(.wp-block-kadence-advancedbtn.kb-buttons-wrap .kb-button, .kb-btns-outer-wrap .kt-button).ol-knop-vul:is(:hover, :focus) { background: linear-gradient(90deg, var(--ol-knop-veegkleur) calc(var(--ol-veeg) * 100%), var(--ol-knop-vlak) 0); transition: --ol-veeg .45s cubic-bezier(.2, .6, .2, 1); } :is(.wp-block-kadence-advancedbtn.kb-buttons-wrap .kb-button, .kb-btns-outer-wrap .kt-button).ol-knop-vul:is(:hover, :focus) { --ol-veeg: 1; } :is(.wp-block-kadence-advancedbtn.kb-buttons-wrap .kb-button, .kb-btns-outer-wrap .kt-button).ol-knop-vul.ol-knop-outline, :is(.wp-block-kadence-advancedbtn.kb-buttons-wrap .kb-button, .kb-btns-outer-wrap .kt-button).ol-knop-vul.ol-knop-outline:is(:hover, :focus) { background: var(--ol-knop-vlak); overflow: visible; } /* Knop is een stacking context (Kadence: position relative, z-index 1), dus z-index -1 tekent boven achtergrond en rand en onder de tekst. inset -1px is de rand van 1px. */ :is(.kb-button, .kt-button).ol-knop-vul.ol-knop-outline::after { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: var(--ol-knop-veegkleur); clip-path: inset(0 calc((1 - var(--ol-veeg)) * 100%) 0 0); pointer-events: none; } :is(.kb-button, .kt-button).ol-knop-vul::before { content: none; } @media (prefers-reduced-motion: reduce) { :is(.kb-button, .kt-button).ol-knop-vul { transition: none; } } /* -------------------------------------------------------------------------- Gesplitste tekst op pil en vul: links van de veeg de tekst-op-de-veeg, rechts de gewone tekstkleur, met dezelfde harde rand als de chipknop. De tekst staat gecentreerd en is per knop anders breed, dus de span wordt zo breed als de knop min padding en rand (display block, en flex-grow voor de editor, waar de knop flex is). Dan ligt de veeg op de span op een vaste afstand van die op de knop: --ol-knop-inzet aan beide kanten. Beide kleuren komen uit custom properties en niet uit currentColor: de hover in het blok wisselt de tekstkleur, en dan zou de rechterhelft al omslaan voordat de veeg er is. -------------------------------------------------------------------------- */ :is(.ol-knop-pil, .ol-knop-vul) :is(.kt-btn-inner-text, .kt-button-text) { display: block; flex-grow: 1; background: linear-gradient(90deg, var(--ol-knop-veegtekst) calc(var(--ol-veeg) * (100% + 2 * var(--ol-knop-inzet)) - var(--ol-knop-inzet)), var(--ol-knop-tekst) 0); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* -------------------------------------------------------------------------- Pijlen en teller. De pijlen zelf zijn Kadence' eigen knoppen, rechtsboven via arrowPosition, met hun uitgeschakelde stand en toetsenbordbediening. Alleen het icoon wordt het bestand uit Figma: één pijl naar rechts, voor vorige gespiegeld — in het ontwerp is de linker exact datzelfde pad, gespiegeld en op 40% dekking, en dat laatste is de uitgeschakelde stand die Splide op pagina 1 zelf geeft. De teller zet assets/js/carousel-teller.js ertussen. -------------------------------------------------------------------------- */ /* Kadence' eigen pijlstijl staat in kadence-splide.min.css, dat ná deze stylesheet laadt en per regel even specifiek is — en dan wint hij op volgorde. Gemeten: 1rem tussen de pijlen, 75% dekking in rust en 20% als ze uitgeschakeld zijn. Het ontwerp heeft ze aansluitend, op 100% en 40%. Deze selectors tellen daarom één klasse meer, zonder !important. */ :is(.wp-block-kadence-slider.ol-diensten-slider, .wp-block-kadence-postgrid.ol-kaart-markt) .splide.kb-slider-group-arrows .splide__arrows { display: flex; align-items: center; gap: 0; } :is(.wp-block-kadence-slider.ol-diensten-slider, .wp-block-kadence-postgrid.ol-kaart-markt) .splide .splide__arrows .splide__arrow { position: static; width: 20px; height: 24px; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: url(assets/icons/carousel-pijl.svg) center / 20px 24px no-repeat; box-shadow: none; opacity: 1; transform: none; /* Kadence geeft de pijlen een opacity-overgang van .3s. De vorige-knop is vanaf het eerste frame uitgeschakeld, maar fadet dan zichtbaar van 100 naar 40% als de tab verschijnt. Het ontwerp heeft geen hoverstand op de pijlen, dus de overgang kan eraf. */ transition: none; } :is(.wp-block-kadence-slider.ol-diensten-slider, .wp-block-kadence-postgrid.ol-kaart-markt) .splide .splide__arrows .splide__arrow svg { display: none; } :is(.wp-block-kadence-slider.ol-diensten-slider, .wp-block-kadence-postgrid.ol-kaart-markt) .splide .splide__arrows .splide__arrow--prev { transform: scaleX(-1); } :is(.wp-block-kadence-slider.ol-diensten-slider, .wp-block-kadence-postgrid.ol-kaart-markt) .splide .splide__arrows .splide__arrow:disabled { opacity: .4; cursor: default; } .ol-teller { min-width: 40px; font-size: 14px; line-height: 1.2; color: var(--ol-grijs); text-align: center; } /* ========================================================================== Hero-rij: het hero-blok als achtergrondlaag, de offertebalk erop De rij bepaalt de hoogte (minHeight 800) en zet de balk onderin (verticalAlignment bottom + padding onder). Het hero-blok staat als eerste in de kolom en wordt hier de achtergrond van de hele rij; alles erna ligt erboven. Zie blokplan-home.md, sectie 1. ========================================================================== */ /* De rij en zijn tussenlagen mogen geen positioneringscontext zijn: Kadence geeft .kt-row-column-wrap en de kolom position: relative, en dan legt de hero zich over de kolom in plaats van over de rij. */ .ol-hero-rij > .kt-row-column-wrap, .ol-hero-rij > .kt-row-column-wrap > .wp-block-kadence-column, .ol-hero-rij > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col { position: static; } /* De hero vult de rij. Zijn eigen 100svh vervalt: de rij bepaalt de hoogte. */ .ol-hero-rij .ol-hero { position: absolute; inset: 0; min-height: 0; z-index: 0; } /* Alles na de hero ligt erboven. */ .ol-hero-rij .ol-hero ~ * { position: relative; z-index: 1; } /* Kompas, ringen en tekst optisch tussen header en balk op tablet en mobiel, waar de balk gestapeld en hoog is. De verschuiving rekent assets/js/hero-midden.js uit; zonder JS blijft alles in het midden. */ .ol-hero-rij .ol-hero__field { translate: 0 var(--ol-hero-schuif, 0px); } /* Tijdens de intro wijkt de balk: hij heeft de klasse ol-na-intro (onderaan). */ /* Offertebalk op tablet en mobiel: daar staat hij verticaal (native, direction per breekpunt). De pillenhelft heeft maxWidth 596 voor desktop, en Kadence zet bij maxWidth ook margin: auto. In een verticale Sectie wint die marge van stretch: de helft krimpt tot zijn inhoud en gaat in het midden staan. Links, op zijn eigen breedte (596, of smaller als het scherm dat is). Op mobiel zet Kadence de marge nog eens met een selector van zes klassen; de tweede regel hier telt er zeven. */ .ol-offertebalk > .kt-inside-inner-col > .wp-block-kadence-column, .ol-offertebalk.wp-block-kadence-column.kb-section-sm-dir-vertical:not(.kb-section-sm-dir-horizontal):not(.kb-section-sm-dir-specificity) > .kt-inside-inner-col > .wp-block-kadence-column { margin-inline: 0; } /* Passen de vijf pillen niet op één regel (5 × 108 + 4 × 14, plus 2 × 20 padding en 2 × 24 marge = 684), dan een raster: twee gelijke kolommen en All modes onderaan over de volle breedte. 8 ertussen, horizontaal én verticaal (de helft van desktop, afgerond op een veelvoud van 4). Een raster: Kadence' knoppenrij is flex, en breedtes in % met een vaste tussenruimte geven nooit overal dezelfde afstand. All modes staat in het blok vooraan (desktop, Figma) en gaat hier met order naar achteren. */ @media (max-width: 683px) { .ol-offertebalk .kb-buttons-wrap:has(> .ol-knop-pil) { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .ol-offertebalk .kb-buttons-wrap > .kb-button.ol-knop-pil { width: auto; } .ol-offertebalk .kb-buttons-wrap > .kb-button.ol-knop-pil:first-child { grid-column: 1 / -1; order: 1; } } /* ========================================================================== Markten: Post Grid-carrousel met het Element "Kaart markt" als kaart De kaart zelf staat in het Element (functions.php, ouwerkerk_kaart_markt). De Post Grid schrijft daarna nog zijn eigen lege binnenkant (header, tekst, footer); alle onderdelen staan uit, maar de vakken blijven. ========================================================================== */ .ol-kaart-markt .kt-blocks-post-grid-item-inner { display: none; } .ol-kaart-markt .kt-blocks-post-grid-item, .ol-kaart-markt .kt-blocks-post-grid-item-inner-wrap { height: 100%; padding: 0; background: none; box-shadow: none; } /* De vijfde kaart valt half buiten beeld, tot de rand van het venster. De track mag daarom rechts uitsteken; links knipt hij af net voor de inhoudsrand, anders schuiven de kopieën van het rondlopen daar in beeld. Die 12 links (minder dan de 24 tussen de kaarten) is voor de schaduw van de kaart. De rij knipt het geheel af op de vensterbreedte. */ /* Kadence' eigen overflow: hidden op de track is specifieker dan één klasse plus .splide__track; vandaar de langere selector. */ .wp-block-kadence-postgrid.ol-kaart-markt .splide .splide__track { overflow: visible; clip-path: inset(-20px -100vw -20px -12px); } .ol-markten { overflow: hidden; } /* Pijlen en teller: dezelfde regels als bij Diensten (daar staan ze voor beide). */ /* Op mobiel staan pijlen en teller bij Diensten én Markten rechtsonder, onder de kaarten en rechts gelijk met hun rand (12 ertussen). arrowPosition kent geen waarde per breekpunt, dus de plaats wordt hier omgezet; de marge uit het blok (arrowMargin, bij de Post Grid alleen voor desktop) gaat op 0. In de kaart naast de knop past het niet: bij Diensten overlappen ze op 375 breed. Onderaan krijgt de carrousel de ruimte voor de pijlen (12 + 24). */ @media (max-width: 767px) { .wp-block-kadence-slider.ol-diensten-slider, .wp-block-kadence-postgrid.ol-kaart-markt { padding-bottom: 36px; } .wp-block-kadence-slider.ol-diensten-slider .splide.kb-slider-arrow-position-top-right .splide__arrows, .wp-block-kadence-postgrid.ol-kaart-markt .splide.kb-slider-arrow-position-top-right .splide__arrows { top: auto; bottom: -36px; left: auto; right: 0; margin: 0; } } /* ========================================================================== Chevron rechts in de tertiaire tekstlink ("View all markets", "Read more"). Het icoon is het Figma-pad van 20 × 24 (kb-custom-112). Kadence zet het in een vierkant van 1em met 0,5em marge ervoor; het pad zelf begint pas op ruim 40% van zijn vak. Samen geeft dat ~15px lucht waar Figma 5 heeft. Breedte naar verhouding en geen marge: dan is de zichtbare ruimte ~5px. ========================================================================== */ .ol-tekstlink :is(.kb-svg-icon-wrap, .kt-btn-svg-icon) { margin-left: 0; } .ol-tekstlink :is(.kb-svg-icon-wrap, .kt-btn-svg-icon) svg { width: calc(1em * 20 / 24); height: 1em; } /* ========================================================================== Header: de pil Native in de Kadence-header (post "Hoofdheader"): transparant over de foto, sticky met terugkomen bij omhoog scrollen, de rij met 31px boven, de pil als Sectie (wit, radius 8, schaduw, padding 18/24), het logo via Identity, de navigaties met hun kleuren, dropdowns (fade-down) en het mega menu, en het off-canvas menu op tablet en mobiel. Hier alleen wat Kadence niet kent: dat de pil van "Menu · logo · iconen" openschuift naar "navigatie · iconen" (Figma 775 in rust, 748 open). Drie groepen naast elkaar in een raster; in rust heeft de eerste de ruimte (1fr 0fr auto), open de tweede (0fr 1fr auto). De derde — zoeken en taal — staat altijd en schuift mee met de breedte. De pil begint dicht en opent op hover, focus of een tik op "Menu". De breedte veert met twee keyframes die dasburo.nl gebruikt: open schiet hij 5px voorbij en 5px terug (.5s ease-in-out), dicht 10px te ver en 4px terug (.5s ease). Zijn inhoud vervaagt in .4s, bij openen .05s later. Die veer speelt pil.js af (Web Animations), vanaf de breedte van dat moment, zodat hij ook klopt als je halverwege van richting wisselt. Daarvoor meet hij beide standen. Zonder JS, of met prefers-reduced-motion, blijft de breedte auto en springt hij gewoon om. pil.js geeft er ook een sluitvertraging, Escape en tikken bij (.is-open). Zie bouwplan-header.md. ========================================================================== */ /* De pil is zo breed als zijn inhoud en staat in het midden van de rij (ook de pil op tablet en mobiel). */ .wp-block-kadence-column:is(.ol-pil, .ol-pil-mobiel) { flex: 0 0 auto; width: auto; margin-inline: auto; } .wp-block-kadence-column.ol-pil > .kt-inside-inner-col { display: grid; grid-template-columns: 1fr 0fr auto; gap: 0; align-items: center; box-sizing: border-box; /* Raster en padding springen om; de breedte veert (pil.js). Een overgang op het raster laat de meting een tussenstand lezen. */ transition: none; } .ol-pil__rust, .ol-pil__open { min-width: 0; overflow: hidden; white-space: nowrap; transition: opacity .4s ease; } .ol-pil__open { opacity: 0; } /* Tijdens het meten (pil.js) zonder overgangen: anders staat de navigatie net na het dichtklappen nog op overflow: visible en meet de dichte stand zo breed als de open. */ .ol-pil--stil .ol-pil__rust, .ol-pil--stil .ol-pil__open { transition: none !important; } /* nowrap geldt voor de pil zelf, niet voor wat eronder uitklapt. */ .ol-pil__open .sub-menu { white-space: normal; } /* Elke groep houdt zijn eigen breedte, ook als zijn kolom in het raster nul is. Anders valt de navigatie in rust onder elkaar en wordt de pil hoog. */ .ol-pil__rust > .kt-inside-inner-col, .ol-pil__open > .kt-inside-inner-col { width: max-content; } .wp-block-kadence-column.ol-pil:is(.is-open, :not(.ol-pil--js):hover, :not(.ol-pil--js):focus-within) > .kt-inside-inner-col { grid-template-columns: 0fr 1fr auto; padding-left: 20px; padding-right: 20px; } /* Zoeken en taal. De afstand tot de groep ervoor volgt de stand: 54 in rust (dezelfde als tussen Menu en logo, native op die groep), 20 open (dezelfde als tussen de menu-items). Geen overflow: hidden, want onder de wereldbol klapt het taalkaartje uit. */ .ol-pil__vast { min-width: 0; margin-left: 54px; white-space: nowrap; } .ol-pil:is(.is-open, :not(.ol-pil--js):hover, :not(.ol-pil--js):focus-within) .ol-pil__vast { margin-left: 20px; } .ol-pil:is(.is-open, :not(.ol-pil--js):hover, :not(.ol-pil--js):focus-within) .ol-pil__rust { opacity: 0; transition-duration: .15s; } /* De dropdowns hangen onder de pil en mogen dus niet afgeknipt worden. Pas als de pil open is gaat de rand eraf; eerder zou de navigatie tijdens het verbreden over het logo heen vallen. */ .ol-pil:is(.is-open, :not(.ol-pil--js):hover, :not(.ol-pil--js):focus-within) .ol-pil__open { opacity: 1; overflow: visible; transition: opacity .4s ease .05s, overflow 0s .5s; transition-behavior: allow-discrete; } /* Brug tussen menu-item en paneel: het paneel hangt 18px onder de pil (Figma), en zonder brug verlaat de muis onderweg het item en klapt alles dicht. */ .ol-pil .wp-block-kadence-navigation .menu-item-has-children { position: relative; } .ol-pil .wp-block-kadence-navigation .menu-item-has-children::after { content: ""; position: absolute; top: 100%; left: -10px; right: -10px; height: 38px; } /* 37 = de 19px van het item tot de onderrand van de pil, plus 18. */ .ol-pil .wp-block-kadence-navigation .menu-item.menu-item-has-children > .sub-menu { top: calc(100% + 37px); } /* Het mega menu staat in Figma midden onder de pil, niet onder "Services". pil.js zet de verschuiving (--ol-mega-x) bij het openen. */ .ol-pil .wp-block-kadence-navigation .menu-item.kadence-menu-mega-enabled > .sub-menu { /* translate en niet margin: Kadence zet de marge van het mega menu zelf, en translate telt op bij de transform van de fade-down. */ translate: var(--ol-mega-x, 0) 0; } /* De scheidingslijnen tussen de kolommen staan op de binnenlaag van elke kolom. Zonder deze regel is een lijn zo hoog als de tekst in zijn kolom en stopt hij halverwege (Transport modes); in Figma (2190:8562) loopt hij over de volle hoogte van het paneel. */ .kb-nav-sub-menu.mega-menu .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col { height: 100%; } /* Taalkeuze: NL | EN naast elkaar in het kaartje, zoals in Figma. Kadence zet de richting van een submenu op drie klassen (.navigation-desktop-orientation-horizontal); deze regel telt er vier. */ .wp-block-kadence-navigation.ol-taal .menu-container .sub-menu { display: flex; flex-direction: row; align-items: center; min-width: 0; width: auto; } /* Kadence geeft elke link in een dropdown 200px (--kb-nav-dropdown-link-width, alleen in getallen in te stellen); hier zo breed als NL en EN zelf. De padding staat native in de navigatie (18/9 op het kaartje, 0/9 per link): samen Figma 2190:8515, 92 breed met de lijn op 46. */ .wp-block-kadence-navigation.ol-taal .sub-menu > .menu-item > .kb-link-wrap > .kb-nav-link-content { width: auto; } .ol-taal .sub-menu .menu-item + .menu-item { border-left: 1px solid var(--global-palette7); } /* -------------------------------------------------------------------------- Zoeken in de pil (desktop en mobiel), zoals ns.nl: een klik op het vergrootglas schuift het veld vanaf het icoon naar links open, over wat er links in de pil staat, op de breedte die de pil op dat moment heeft. Native in het zoekblok (klasse ol-zoek, gewone stand): het veld, de placeholder, de kleuren, geen rand, het vergrootglas als verzendknop. Hier: het vergrootglas in de maat van de pil, en het veld als laag over de pil. assets/js/pil-zoeken.js meet de plek en zet .is-zoeken. -------------------------------------------------------------------------- */ .ol-zoek.kb-search .kb-search-input-wrapper { position: static; display: flex; align-items: center; } /* Kadence zet de knop absoluut rechts in het veld, met padding 7/18. */ .ol-zoek.kb-search .kb-search-input-wrapper .kb-search-icon-submit { position: static; display: flex; width: 16px; height: 16px; padding: 0; margin: 0; transform: none; } .ol-zoek.kb-search .kb-search-icon-submit .kb-search-icon, .ol-zoek.kb-search .kb-search-icon-submit svg { width: 16px; height: 16px; } /* Het veld: dicht een strookje van nul breed tegen het vergrootglas, open een wit vlak tot de linkerkant van de pil. Het schuiven is een clip-path van rechts naar links; zichtbaarheid valt pas na het dichtschuiven weg, zodat het veld dicht niet met Tab bereikbaar is. */ .ol-zoek.kb-search .kb-search-input-wrapper .kb-search-input { position: absolute; z-index: 5; width: 0; min-width: 0; max-width: none; margin: 0; /* Rechts ruimte voor het kruisje (16) plus 12. */ padding: 0 28px 0 0; font-size: 14px; line-height: 1.2; letter-spacing: .21px; box-shadow: none; outline: 0; clip-path: inset(0 0 0 100%); visibility: hidden; transition: clip-path .25s cubic-bezier(.2, .6, .2, 1), visibility 0s .25s; } .ol-pil.is-zoeken .ol-zoek.kb-search .kb-search-input { clip-path: inset(0); visibility: visible; transition: clip-path .25s cubic-bezier(.2, .6, .2, 1); } /* Het kruisje (pil-zoeken.js zet het neer, rechts in het veld). Het verschijnt als het veld er bijna is en gaat meteen weg bij sluiten. */ .ol-zoek__sluit { position: absolute; z-index: 6; display: flex; width: 16px; height: 16px; padding: 0; border: 0; background: none; color: var(--global-palette6); cursor: pointer; opacity: 0; visibility: hidden; transition: color .2s ease, opacity .15s ease, visibility 0s .15s; } .ol-pil.is-zoeken .ol-zoek__sluit { opacity: 1; visibility: visible; transition: color .2s ease, opacity .15s ease .15s; } /* Het thema geeft elke