.elementor-kit-7{--e-global-color-primary:#282823;--e-global-color-secondary:#F5E8B6;--e-global-color-text:#282823;--e-global-color-accent:#E9BE5F;--e-global-color-717377c:#AFC9D4;--e-global-color-c1a9b3e:#595C56;--e-global-color-d2f0a41:#FBF7EA;--e-global-color-e4b7c22:#CAC8C8;--e-global-typography-primary-font-family:"Rethink Sans";--e-global-typography-primary-font-weight:600;--e-global-typography-primary-letter-spacing:0.02em;--e-global-typography-secondary-font-family:"Rethink Sans";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Rethink Sans";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Rethink Sans";--e-global-typography-accent-font-weight:600;background-color:var( --e-global-color-d2f0a41 );font-family:"Rethink Sans", Sans-serif;font-size:17px;font-weight:400;line-height:1.6em;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-kit-7 a{color:var( --e-global-color-text );}.elementor-kit-7 a:hover{color:var( --e-global-color-c1a9b3e );}.elementor-kit-7 h1{font-size:48px;font-weight:600;line-height:1.06em;letter-spacing:-1.4px;}.elementor-kit-7 h2{font-size:34px;font-weight:600;line-height:1.15em;letter-spacing:-0.8px;}.elementor-kit-7 h3{font-size:20px;font-weight:600;line-height:1.15em;letter-spacing:-0.4px;}.elementor-kit-7 h4{font-size:18px;font-weight:600;line-height:1.2em;letter-spacing:-0.2px;}.elementor-kit-7 h5{font-size:16px;font-weight:600;line-height:1.25em;letter-spacing:0px;}.elementor-kit-7 h6{font-size:15px;font-weight:600;text-transform:uppercase;line-height:1.3em;letter-spacing:1.4px;}.elementor-kit-7 label{color:var( --e-global-color-text );font-size:15px;font-weight:600;line-height:1.4em;}.elementor-kit-7 input:not([type="button"]):not([type="submit"]),.elementor-kit-7 textarea,.elementor-kit-7 .elementor-field-textual{font-size:17px;font-weight:400;line-height:1.4em;color:var( --e-global-color-text );background-color:var( --e-global-color-d2f0a41 );border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-text );border-radius:0px 0px 0px 0px;transition:250ms;padding:12px 16px 12px 16px;}.elementor-kit-7 input:focus:not([type="button"]):not([type="submit"]),.elementor-kit-7 textarea:focus,.elementor-kit-7 .elementor-field-textual:focus{background-color:var( --e-global-color-d2f0a41 );box-shadow:0px 0px 0px 3px rgba(233, 190, 95, 0.6);border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-text );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1300px;}.e-con{--container-max-width:1300px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-7 h2{font-size:28px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-7 h1{font-size:34px;}.elementor-kit-7 h2{font-size:24px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ==========================================================================
Soil & Building: aangepaste CSS
Hier staat alleen wat Elementor zélf niet kan. Kleur, typografie, marges,
binnenmarges en afrondingen stel je in bij de widget of de container.
Boven elk blok staat waarom het hier moet staan; ontbreekt die reden,
dan hoort de regel in het paneel thuis.
Alle maten komen uit de ladder (0 4 8 12 16 24 32 40 48 56 64 80 96 120 144)
en alle lettergroottes uit de trap (13 15 17 20 24 28 34 40 48 60 80).
========================================================================== */
/* --------------------------------------------------------------------------
1. Palet en vaste waarden
Het palet staat in Site-instellingen > Kleuren; dit zijn dezelfde kleuren,
alleen bruikbaar binnen CSS. Daaronder drie snelheden, zodat alles op de
site even snel beweegt.
-------------------------------------------------------------------------- */
:root {
--sb-charcoal: #282823;
--sb-ebony: #595C56;
--sb-beton: #CAC8C8;
--sb-sky: #AFC9D4;
--sb-sunray: #E9BE5F;
--sb-blond: #F5E8B6;
--sb-paper: #FBF7EA;
/* diepte van de inkeping (de halve B) */
--sb-n: clamp(24px, 4vw, 56px);
/* drie snelheden, meer zijn er niet */
--sb-kleur: .25s cubic-bezier(.4, 0, .2, 1); /* kleurwissel */
--sb-vorm: .4s cubic-bezier(.4, 0, .2, 1); /* vorm, schuiven */
--sb-traag: .7s cubic-bezier(.4, 0, .2, 1); /* alleen beeld */
}
/* --------------------------------------------------------------------------
2. De inkeping: een kwartcirkel uit de hoek gehapt
Het enige vormonderdeel waar Elementor geen instelling voor heeft.
De afronding zelf doe je met Stijl > Rand > Afronding.
Eén masker, vier hoeken: de hoek staat in --sb-hoek.
-------------------------------------------------------------------------- */
.sb-notch-tl,
.sb-notch-tr,
.sb-notch-bl,
.sb-notch-br {
-webkit-mask-image: radial-gradient(circle var(--sb-n) at var(--sb-hoek), #0000 calc(var(--sb-n) - 1px), #000 var(--sb-n));
mask-image: radial-gradient(circle var(--sb-n) at var(--sb-hoek), #0000 calc(var(--sb-n) - 1px), #000 var(--sb-n));
}
.sb-notch-tl { --sb-hoek: 0 0; }
.sb-notch-tr { --sb-hoek: 100% 0; }
.sb-notch-bl { --sb-hoek: 0 100%; }
.sb-notch-br { --sb-hoek: 100% 100%; }
/* Op een tekstkaart is 56px te veel: de eerste regel loopt tegen de hap aan.
Zet aan die kant ook extra binnenmarge in het paneel (96 in plaats van 64). */
.sb-hapkaart { --sb-n: 40px; }
@media (max-width: 767px) { .sb-hapkaart { --sb-n: 24px; } }
/* --------------------------------------------------------------------------
3. Knoppen
Eén vorm voor alle knoppen en voor het Contact-item in het menu: het geel
wacht links buiten beeld en schuift binnen bij hover, terwijl de ronde kant
omklapt. Elementor kan geen schuivend verloop en kan geen enkel menu-item
apart opmaken, vandaar dat dit hier staat.
Wil je een variant? Verzet alleen de vier variabelen hieronder, nooit het
verloop zelf, anders lopen de knoppen weer uiteen.
Zet sb-menu-knop op het menu-item in Weergave > Menu's.
-------------------------------------------------------------------------- */
.elementor-widget-button .elementor-button,
.elementor-widget-form .elementor-field-type-submit .elementor-button,
.sb-menu-knop > .elementor-item,
.sb-menu-knop > .elementor-item.elementor-item-active {
--sb-knop-rust: var(--sb-charcoal); /* het vlak in rust */
--sb-knop-in: var(--sb-sunray); /* schuift binnen */
--sb-knop-tekst: var(--sb-beton);
--sb-knop-tekst-hover: var(--sb-charcoal);
background: linear-gradient(90deg, var(--sb-knop-in) 0 50%, var(--sb-knop-rust) 50% 100%) !important;
background-size: 200% 100% !important;
background-position: 100% 0 !important;
color: var(--sb-knop-tekst) !important;
fill: var(--sb-knop-tekst) !important;
border-radius: 0 999px 999px 0;
transition: background-position var(--sb-vorm),
border-radius var(--sb-vorm),
color var(--sb-kleur);
}
.elementor-widget-button .elementor-button:hover,
.elementor-widget-button .elementor-button:focus,
.elementor-widget-form .elementor-field-type-submit .elementor-button:hover,
.elementor-widget-form .elementor-field-type-submit .elementor-button:focus,
.sb-menu-knop > .elementor-item:hover,
.sb-menu-knop > .elementor-item:focus {
background-position: 0 0 !important;
color: var(--sb-knop-tekst-hover) !important;
fill: var(--sb-knop-tekst-hover) !important;
border-radius: 999px 0 0 999px;
}
.elementor-widget-button .elementor-button:focus-visible,
.elementor-widget-form .elementor-field-type-submit .elementor-button:focus-visible,
.sb-menu-knop > .elementor-item:focus-visible {
outline: 3px solid var(--sb-charcoal);
outline-offset: 4px;
}
/* Op een donker vlak: twee lichte tinten, zodat de knop zichtbaar blijft. */
.elementor-widget-button.sb-knop-licht .elementor-button {
--sb-knop-rust: var(--sb-sunray);
--sb-knop-in: var(--sb-blond);
--sb-knop-tekst: var(--sb-charcoal);
}
.elementor-widget-button.sb-knop-licht .elementor-button:focus-visible {
outline-color: var(--sb-beton);
}
/* Op een geel vlak: de gewone knop schuift sunray binnen en zou daar
verdwijnen; hier schuift blond binnen. Zet sb-geelvlak op elk vlak in
Sunray of Blond; sb-dienstvlak blijft bestaan voor het dienstenpaar. */
.sb-dienstvlak .elementor-widget-button .elementor-button,
.sb-geelvlak .elementor-widget-button .elementor-button,
.sb-geelvlak .elementor-widget-form .elementor-field-type-submit .elementor-button {
--sb-knop-in: var(--sb-blond);
}
/* De twee dienstenknoppen als paar: even breed, even hoog, ook als de ene
tekst over twee regels loopt. De breedte staat in het paneel (100%);
Elementor heeft geen instelling voor een minimumhoogte. */
.sb-dienstvlak .elementor-widget-button .elementor-button {
display: flex;
align-items: center;
justify-content: center;
min-height: 64px;
width: 100%;
text-align: center;
text-wrap: balance;
}
/* --------------------------------------------------------------------------
4. Menu
Eén hoverregel voor de hele site: een link krijgt een geel vlak achter de
woorden dat van links naar rechts opengaat. In lopende tekst doet blok 10
dat; hier hetzelfde, maar dan met de aanwijzer die Elementor onder een
menu-item zet. Die aanwijzer is standaard een haarlijn aan de onderrand;
hoogte en kleur staan in het paneel (Stijl > Aanwijzer), hier alleen de
plaatsing achter de letters.
Verder staat hier de ruimte vóór het Contact-item.
-------------------------------------------------------------------------- */
/* Het vlak is even hoog als de regel (20px) en zakt tot onder de letters:
het item is 44px hoog met 12px binnenmarge, de regel begint dus 14px
boven de onderrand. z-index -1 legt het vlak achter de letters; daarvoor
moet het item zelf een stapelcontext openen (z-index 0). */
.sb-header .elementor-nav-menu--main .elementor-item { z-index: 0; }
.sb-header .elementor-nav-menu--main .elementor-item::after {
bottom: 14px;
z-index: -1;
transition: width var(--sb-vorm), opacity var(--sb-kleur);
}
/* In rust ligt het vlak links met breedte nul, zodat het naar rechts
opengaat, dezelfde richting als het geel in de knoppen en in de tekst. */
.sb-header .elementor-nav-menu--main .elementor-nav-menu .elementor-item:not(:hover):not(:focus):not(.elementor-item-active):not(.highlighted)::after {
inset-inline-start: 0;
width: 0;
}
.sb-menu-knop { margin-left: 24px; }
/* Het Contact-item krijgt de opmaak van een knop, niet die van een menulink:
dezelfde lettergrootte, hetzelfde gewicht, dezelfde binnenmarge. De
typografie van het menu geldt voor álle items, vandaar dat het hier staat. */
.sb-menu-knop > .elementor-item {
padding: 16px 32px !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 1.4px !important;
line-height: 1.2 !important;
}
.sb-menu-knop > .elementor-item::before,
.sb-menu-knop > .elementor-item::after { display: none !important; }
@media (max-width: 767px) { .sb-menu-knop { margin-left: 0; } }
/* In het smalle uitklappaneel past de pilvorm niet: daar wordt het een vol
vlak dat de onderrand afsluit. */
.elementor-nav-menu--dropdown { overflow: hidden; }
.elementor-nav-menu--dropdown .sb-menu-knop > .elementor-item,
.elementor-nav-menu--dropdown .sb-menu-knop > .elementor-item.elementor-item-active {
background: var(--sb-sunray) !important;
background-size: auto !important;
color: var(--sb-charcoal) !important;
fill: var(--sb-charcoal) !important;
border-radius: 0 !important;
margin-top: 12px;
font-weight: 600;
}
.elementor-nav-menu--dropdown .sb-menu-knop > .elementor-item:hover,
.elementor-nav-menu--dropdown .sb-menu-knop > .elementor-item:focus {
background: var(--sb-blond) !important;
color: var(--sb-charcoal) !important;
border-radius: 0 !important;
}
/* Het menu-item Diensten is een uitklapper zonder adres: de overzichtspagina
bestaat niet meer (zie functions.php). Een zonder href krijgt van de
browser geen handje en geen tekstcursor die iets belooft, dus zetten we het
handje er zelf op. De regel geldt voor elk menu-item zonder adres, niet
alleen voor dit ene. */
.elementor-nav-menu a.elementor-item:not([href]) {
cursor: pointer;
-webkit-user-select: none;
user-select: none;
}
/* --------------------------------------------------------------------------
5. Header
a) De hap linksonder. De maskers uit blok 2 knippen ook alles weg wat uit
het element steekt en zouden dus het uitklapmenu opeten. Daarom draagt
de header zelf geen achtergrond meer: die staat op een laag eronder, en
op díe laag ligt het masker. Zo is de hap écht doorzichtig en klopt hij
op elke pagina, wat er ook achter staat.
b) De balk plakt bovenaan en trekt zich weg bij naar beneden scrollen.
Wanneer dat gebeurt staat in functions.php.
-------------------------------------------------------------------------- */
.sb-header.sb-hap-bl {
position: relative;
--sb-hap: clamp(16px, 2vw, 24px);
background-color: transparent !important;
}
.sb-header.sb-hap-bl::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-color: var(--sb-beton);
border-radius: inherit;
-webkit-mask-image: radial-gradient(circle var(--sb-hap) at 0 100%, #0000 calc(var(--sb-hap) - 1px), #000 var(--sb-hap));
mask-image: radial-gradient(circle var(--sb-hap) at 0 100%, #0000 calc(var(--sb-hap) - 1px), #000 var(--sb-hap));
pointer-events: none;
}
header.elementor-location-header {
position: sticky;
top: 0;
z-index: 100;
}
.sb-header {
transition: transform var(--sb-vorm);
will-change: transform;
}
.sb-header.sb-header-weg { transform: translateY(calc(-100% - 32px)); }
/* --------------------------------------------------------------------------
6. Teller: cijfer boven de titel
Elementor zet de titel eerst en heeft daar geen instelling voor.
De plus staat voor "en groeiend": eigen kleur, zodat het een teken is en
geen letter achter het getal. Op .5em landt hij op elke breedte precies
op de lettertrap (80 → 40, 48 → 24, 40 → 20).
-------------------------------------------------------------------------- */
.sb-teller .elementor-counter {
display: flex;
flex-direction: column-reverse;
gap: 12px;
}
.sb-teller .elementor-counter-number-wrapper { justify-content: flex-start; }
.sb-teller .elementor-counter .elementor-counter-number-prefix,
.sb-teller .elementor-counter .elementor-counter-number-suffix { flex-grow: 0; }
.sb-teller .elementor-counter .elementor-counter-number-suffix {
color: var(--sb-ebony);
font-size: .5em;
align-self: flex-start;
margin-top: .1em;
}
/* De zin onder het cijfer mag de hele kolom vullen. Breekt hij toch, dan
verdeelt balance de woorden gelijk over de twee regels. */
.sb-cijfers .sb-teller .elementor-counter .elementor-counter-title {
max-width: none;
text-wrap: balance;
justify-content: flex-start;
text-align: left;
}
/* Op desktop staan de drie tellers naast elkaar, elk een derde van de rij.
Het cijfer schaalt mee met het scherm, zodat 185.590+ op een smal
desktopscherm niet over de kolom heen loopt en tegen het volgende plakt.
Op 1440 pixels is het 77, vanaf 1500 pixels de volle 80. */
@media (min-width: 1025px) {
.sb-cijfers .sb-teller.elementor-widget-counter .elementor-counter .elementor-counter-number-wrapper {
font-size: clamp(44px, calc(7vw - 24px), 80px);
}
}
/* --------------------------------------------------------------------------
7. Machinepark
De kaarten mogen niet meekrimpen in de schuifbalk; Elementor heeft daar
geen instelling voor. Het schuiven zelf staat wél in de container
(Layout > Overflow: auto).
De browserschuifbalk is weg: die tekent zijn eigen pijltjes erbij en die
zien er op geen enkel besturingssysteem hetzelfde uit. In de plaats twee
knoppen die samen één pil vormen.
-------------------------------------------------------------------------- */
.sb-strip {
scroll-snap-type: x proximity;
scroll-padding-left: 64px;
scrollbar-width: none;
-ms-overflow-style: none;
cursor: grab;
}
@media (max-width: 767px) { .sb-strip { scroll-padding-left: 24px; } }
.sb-strip::-webkit-scrollbar { display: none; }
.sb-strip > .e-con { flex: 0 0 auto; scroll-snap-align: start; }
.sb-strip.is-sleept {
cursor: grabbing;
scroll-snap-type: none;
scroll-behavior: auto;
user-select: none;
}
.sb-nav { display: flex; gap: 4px; }
.sb-nav button {
-webkit-appearance: none;
appearance: none;
width: 56px;
height: 56px;
padding: 0;
border: 0;
cursor: pointer;
font-size: 20px;
line-height: 1;
background: var(--sb-charcoal);
color: var(--sb-sky);
transition: background var(--sb-kleur), color var(--sb-kleur);
}
.sb-nav button:first-child { border-radius: 999px 0 0 999px; }
.sb-nav button:last-child { border-radius: 0 999px 999px 0; }
.sb-nav button:hover { background: var(--sb-sky); color: var(--sb-charcoal); }
.sb-nav button:focus { outline: none; }
.sb-nav button:focus-visible {
outline: 3px solid var(--sb-charcoal);
outline-offset: 4px;
}
/* Op een donker vlak vallen de schuifknoppen weg: daar keren ze om. */
.sb-nav-licht button { background: var(--sb-sky); color: var(--sb-charcoal); }
.sb-nav-licht button:hover { background: var(--sb-paper); }
.sb-nav-licht button:focus-visible { outline-color: var(--sb-paper); }
/* De foto op elke machinekaart is een echte ![]()
en geen achtergrond. Dat is
bewust: een achtergrondfoto uit CSS wordt door Google niet geïndexeerd, kan
geen alt-tekst dragen en staat niet in de afbeeldingssitemap. Hij moet zich
wel gedragen als een achtergrond, dus de volle breedte van de kaart, een
vaste hoogte, en bijsnijden in plaats van uitrekken. */
.sb-machinefoto img {
display: block;
width: 100%;
height: 230px;
object-fit: cover;
object-position: center center;
}
@media (max-width: 767px) { .sb-machinefoto img { height: 190px; } }
/* --------------------------------------------------------------------------
8. De projectkaart
Even hoog: het hoogteverschil komt in het tekstvlak, zodat elke foto
dezelfde uitsnede houdt. Bij hover dezelfde beweging als bij de knoppen:
de ronde kant klapt om, en de foto komt iets dichterbij.
-------------------------------------------------------------------------- */
.sb-projectkaart { height: 100%; }
.sb-projectkaart > .e-con:last-child { flex-grow: 1; }
.sb-projectkaart > .e-con { transition: border-radius var(--sb-vorm); }
.sb-projectkaart img { transition: transform var(--sb-traag); }
.sb-projectkaart:hover > .e-con:first-child,
.sb-projectkaart:focus-visible > .e-con:first-child { border-radius: 56px 0 0 0; }
.sb-projectkaart:hover > .e-con:last-child,
.sb-projectkaart:focus-visible > .e-con:last-child { border-radius: 0 0 0 56px; }
.sb-projectkaart:hover img,
.sb-projectkaart:focus-visible img { transform: scale(1.05); }
.sb-projectkaart:focus-visible {
outline: 3px solid var(--sb-charcoal);
outline-offset: 4px;
}
/* --------------------------------------------------------------------------
9. Labels van dynamische velden
Deze tekst zit binnen de HTML van een JetEngine-veld of -widget; daar komt
het Elementor-paneel niet bij. Eén opmaak voor alle labels op de site: de
bovenregel van een project, de labels in het feitenpaneel en de bovenregel
van de projectkaart. De verdeling van de kolommen staat wél in het paneel.
-------------------------------------------------------------------------- */
.sb-bovenregel,
.sb-feit-label,
.jet-listing-dynamic-terms__prefix,
.sb-kaartlabel,
.sb-kaartlabel .jet-listing-dynamic-terms__link,
.sb-kaartlabel .jet-listing-dynamic-terms__delimiter,
.sb-kaartlabel .elementor-heading-title {
font-size: 13px;
font-weight: 600;
letter-spacing: 1.5px;
line-height: 1.4;
text-transform: uppercase;
}
.sb-bovenregel { color: var(--sb-ebony); }
.sb-kaartlabel,
.sb-kaartlabel .jet-listing-dynamic-terms__link,
.sb-kaartlabel .jet-listing-dynamic-terms__delimiter,
.sb-kaartlabel .elementor-heading-title { color: var(--sb-charcoal); }
.sb-feit-label,
.sb-feit .jet-listing-dynamic-terms__prefix {
color: var(--sb-charcoal);
opacity: .8;
margin-bottom: 4px;
}
.sb-feit-waarde,
.sb-feit .jet-listing-dynamic-terms__link {
display: block;
font-size: 17px;
line-height: 1.5;
color: var(--sb-charcoal);
}
.sb-bovenregel,
.sb-feit-label,
.jet-listing-dynamic-terms__prefix { display: block; }
/* de termenrij mag naast elkaar blijven staan, met het label erboven */
.sb-feit-diensten { display: block; }
.sb-feit-diensten .jet-listing-dynamic-terms__link { display: inline; }
.sb-feit-diensten .jet-listing-dynamic-terms__delimiter { color: var(--sb-charcoal); opacity: .5; }
.sb-kaartlabel .jet-listing-dynamic-terms__link { display: inline; }
/* het punt tussen dienstverlening en periode verschijnt alleen als er links
iets staat (JetEngine haalt een leeg veld uit de html) en rechts ook
(:empty vangt een leeg Elementor-veld op) */
.sb-kaartlabel + .sb-kaartlabel .elementor-heading-title::before { content: '· '; }
.sb-kaartlabel .elementor-heading-title:empty::before { content: none; }
/* de hoofdfoto van een project mag niet uitrekken */
.sb-projectfoto img { width: 100%; height: auto; display: block; }
/* --------------------------------------------------------------------------
10. Links in tekst
De kleur staat in het paneel (Thema-stijl > Typografie > Link), maar die
instelling raakt élke op de site, ook de knoppen, het menu en de
projectkaart. Een onderlijning hoort daar dus niet in. Elementor kan de
linkstijl niet per context zetten, vandaar dat de onderlijning hier staat
en alleen binnen lopende tekst geldt. De dienstverlening onder een project
staat in dezelfde rij: dat is een link naar de dienstenpagina. Let op de a
in die .elementor-kit-7: op een projectkaart staat dezelfde tekst zonder link, en
die mag er dus niet uitzien als een link.
In rust draagt de onderlijning het contrast; bij hover komt het geel
binnen, hetzelfde gebaar als bij de knoppen.
-------------------------------------------------------------------------- */
.elementor-widget-text-editor a,
.elementor-widget-theme-post-content a,
.elementor-field-type-html a,
a.jet-listing-dynamic-terms__link,
.sb-feit-waarde a {
/* de onderlijning blijft in beide toestanden gelijk: dat is de affordantie */
text-decoration: underline;
text-decoration-thickness: 1px;
text-decoration-color: var(--sb-charcoal);
text-underline-offset: 4px;
/* het huisgebaar: het geel schuift van links binnen, net als bij de knop */
background-image: linear-gradient(var(--sb-linkveeg, var(--sb-sunray)) 0 100%);
background-repeat: no-repeat;
background-size: 0% 100%;
background-position: 0 0;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
padding: 0 4px;
margin: 0 -4px;
transition: background-size var(--sb-vorm), color var(--sb-kleur);
}
.elementor-widget-text-editor a:hover,
.elementor-widget-text-editor a:focus-visible,
.elementor-widget-theme-post-content a:hover,
.elementor-widget-theme-post-content a:focus-visible,
.elementor-field-type-html a:hover,
.elementor-field-type-html a:focus-visible,
a.jet-listing-dynamic-terms__link:hover,
a.jet-listing-dynamic-terms__link:focus-visible,
.sb-feit-waarde a:hover,
.sb-feit-waarde a:focus-visible {
background-size: 100% 100%;
color: var(--sb-linkveeg-tekst, var(--sb-charcoal)) !important;
}
/* Op een geel of betonnen vlak zou een gele veeg wegvallen; daar veegt
charcoal binnen en wordt de tekst paper. */
.sb-geelvlak,
.sb-cta {
--sb-linkveeg: var(--sb-charcoal);
--sb-linkveeg-tekst: var(--sb-paper);
}
/* --------------------------------------------------------------------------
11. Tekst
Regellengte, regelval en woorden die bij elkaar horen. Geen van drieën
staat in het Elementor-paneel.
-------------------------------------------------------------------------- */
.elementor-widget-text-editor p { max-width: 68ch; }
h1.elementor-heading-title,
h2.elementor-heading-title,
h3.elementor-heading-title { text-wrap: balance; }
/* houdt woorden bijeen waar de browser anders na een koppelteken afbreekt */
.sb-bijeen { white-space: nowrap; }
/* --------------------------------------------------------------------------
12. Selectie en schuifbalk
Standaard is dat browserblauw, de enige kleur op de site die niet uit het
palet komt.
-------------------------------------------------------------------------- */
::selection { background: var(--sb-sunray); color: var(--sb-charcoal); }
::-moz-selection { background: var(--sb-sunray); color: var(--sb-charcoal); }
html { scrollbar-color: var(--sb-charcoal) var(--sb-beton); }
::-webkit-scrollbar { width: 16px; height: 16px; }
::-webkit-scrollbar-track { background: var(--sb-beton); }
::-webkit-scrollbar-thumb {
background: var(--sb-charcoal);
border-radius: 999px;
border: 4px solid var(--sb-beton);
}
::-webkit-scrollbar-thumb:hover { background: var(--sb-ebony); }
/* --------------------------------------------------------------------------
13. Beweging respecteert de systeeminstelling
Elementor houdt zelf geen rekening met "verminder beweging" in het
besturingssysteem. Zonder de eerste regel blijven die bezoekers naar een
onzichtbaar element kijken tot de animatie afloopt.
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.elementor-invisible {
visibility: visible !important;
animation: none !important;
}
.elementor-widget-button .elementor-button,
.sb-menu-knop > .elementor-item,
.sb-header,
.sb-projectkaart > .e-con,
.sb-projectkaart img { transition: none; }
.sb-header.sb-header-weg { transform: none; }
.sb-projectkaart:hover img { transform: none; }
}
/* --------------------------------------------------------------------------
14. Formulier
Het HTML-veld van een Elementor-formulier heeft geen typografie-instelling
in het paneel; de noot boven de verzendknop kan dus alleen hier.
-------------------------------------------------------------------------- */
.sb-formulier-noot {
font-size: 15px;
line-height: 1.6;
color: var(--sb-ebony);
margin: 0;
}
/* Het veld blijft een rechthoek (dat is het teken voor "hier typ je"), maar
krijgt wel het huisgebaar: bij focus veegt het geel van links naar rechts
over de onderlijn, net als bij een knop en bij een link in lopende tekst.
Elementor kan alleen een statische randkleur en schaduw zetten. */
.elementor-field-textual,
.elementor-field-group .elementor-field-textual {
background-image: linear-gradient(var(--sb-sunray) 0 100%);
background-repeat: no-repeat;
background-size: 0% 3px;
background-position: 0 100%;
transition: background-size var(--sb-vorm),
border-color var(--sb-kleur),
box-shadow var(--sb-kleur);
}
.elementor-field-textual:focus {
background-size: 100% 3px;
}
/* De gele ring is er voor wie met het toetsenbord werkt; bij een muisklik is
de veeg genoeg en zou de ring alleen maar ruis zijn. */
.elementor-field-textual:focus:not(:focus-visible) {
box-shadow: none !important;
}
/* Een tekstvak is geen regel: daar hoort de veeg onderaan het hele vak. */
textarea.elementor-field-textual {
resize: vertical;
min-height: 160px;
}
/* --------------------------------------------------------------------------
15. Twee kleine dingen die Elementor niet kan
-------------------------------------------------------------------------- */
/* Het Graviteit-merkje is met haarlijnen getekend: ongeveer 7 eenheden op een
viewBox van 527, dus een halve beeldpunt bij 40px. Een streek in dezelfde
kleur brengt de lijn op ~1,5px. Elementor zet alleen fill, geen stroke; de
stroke-breedte staat in het bestand zelf, de kleur hier. */
/* geen stroke: die zou de tussenruimte van 16 eenheden dichtdrukken
en juist de dubbele lijn wegnemen. Het formaat doet het werk. */
/* --------------------------------------------------------------------------
16. De merklijst
Losse namen onder elkaar lezen als losse regels. Een merkje ervoor maakt
er één lijst van. Dat merkje is de halve B; geen enkel icoon in de
bibliotheek heeft die vorm, vandaar dat het hier staat. Gebruikt bij de
certificaten op Over ons en bij de opsomming van infrastructuurwerken.
-------------------------------------------------------------------------- */
.sb-merklijst .elementor-icon-list-text::before {
content: "";
display: inline-block;
width: 10px;
height: 16px;
margin-right: 16px;
vertical-align: -2px;
background-color: var(--sb-sunray);
border-radius: 0 999px 999px 0;
}
/* Aan één regel in de merklijst hangt een link, bij de certificaten naar het
erkenningsattest. Alleen die regel mag er als een link uitzien. Elementor
zet een om een regel heen wanneer er een link is en laat hem weg wanneer
die er niet is, dus de a in de .elementor-kit-7 kiest vanzelf de juiste regel: er is
geen extra klasse nodig en het werkt ook als er later een link bijkomt.
Het gebaar zit op de tekst binnenin en niet op de zelf, want die is door
de instelling "volledige breedte" een vak over de hele kolom. De gele veeg
zou anders de hele regel beslaan in plaats van alleen de woorden.
Verder is dit hetzelfde gebaar als bij een link in lopende tekst, zie blok
10: de onderlijning draagt het contrast in rust, het geel schuift binnen bij
hover. */
.sb-merklijst .elementor-icon-list-item a .elementor-icon-list-text {
text-decoration: underline;
text-decoration-thickness: 1px;
text-decoration-color: var(--sb-charcoal);
text-underline-offset: 4px;
background-image: linear-gradient(var(--sb-sunray) 0 100%);
background-repeat: no-repeat;
background-size: 0% 100%;
background-position: 0 0;
padding: 0 4px;
margin: 0 -4px;
transition: background-size var(--sb-vorm), color var(--sb-kleur);
}
.sb-merklijst .elementor-icon-list-item a:hover .elementor-icon-list-text,
.sb-merklijst .elementor-icon-list-item a:focus-visible .elementor-icon-list-text {
background-size: 100% 100%;
color: var(--sb-charcoal);
}
/* Bij de link staat het bolletje op de link zelf, zodat streep en veeg enkel onder de woorden lopen */
.sb-merklijst .elementor-icon-list-item a .elementor-icon-list-text::before { display: none; }
.sb-merklijst .elementor-icon-list-item a::before {
content: ""; display: inline-block;
width: 10px; height: 16px; margin-right: 16px;
vertical-align: -2px; align-self: center; flex: 0 0 auto;
background-color: var(--sb-sunray);
border-radius: 0 999px 999px 0;
}
/* Download-pijltje alleen achter een link naar een pdf (de certificaatlink), als lijn in dezelfde dikte als de onderlijning */
.sb-merklijst .elementor-icon-list-item a[href*=".pdf"]::after {
content: "";
content: "" / "pdf";
display: inline-block; flex: 0 0 auto; align-self: center;
width: 12px; height: 12px; margin-left: 10px;
background-color: var(--sb-charcoal);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 1.5v7M3 5.5l3 3 3-3M2 10.75h8'/%3E%3C/svg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 1.5v7M3 5.5l3 3 3-3M2 10.75h8'/%3E%3C/svg%3E") no-repeat center / contain;
transition: transform var(--sb-vorm);
}
.sb-merklijst .elementor-icon-list-item a[href*=".pdf"]:hover::after,
.sb-merklijst .elementor-icon-list-item a[href*=".pdf"]:focus-visible::after { transform: translateY(2px); }
@media (prefers-reduced-motion: reduce) {
.sb-merklijst .elementor-icon-list-item a[href*=".pdf"]::after { transition: none; }
}
.sb-merklijst .elementor-icon-list-item a:focus-visible {
outline: 2px solid var(--sb-sunray);
outline-offset: 4px;
}
/* --------------------------------------------------------------------------
17. Tekst uit de gewone editor
Een vacature en een projectverhaal worden in de gewone editor geschreven,
niet in Elementor. Daar valt niets in te stellen over de ruimte boven een
kop of het bolletje voor een opsomming, dat kan alleen hier. Het bolletje
is hetzelfde merkje als in de merklijst.
-------------------------------------------------------------------------- */
.elementor-widget-theme-post-content p,
.elementor-widget-theme-post-content ul { max-width: 68ch; }
.elementor-widget-theme-post-content h2 { margin: 48px 0 16px; }
.elementor-widget-theme-post-content h3 { margin: 32px 0 12px; }
.elementor-widget-theme-post-content > *:first-child { margin-top: 0; }
.elementor-widget-theme-post-content p { margin: 0 0 16px; }
.elementor-widget-theme-post-content ul {
margin: 0 0 16px;
padding: 0;
list-style: none;
}
.elementor-widget-theme-post-content li {
position: relative;
padding-left: 26px;
margin-bottom: 8px;
}
.elementor-widget-theme-post-content li::before {
content: "";
position: absolute;
left: 0;
top: 0.5em;
width: 10px;
height: 16px;
transform: translateY(-50%);
background-color: var(--sb-sunray);
border-radius: 0 999px 999px 0;
}
/* --------------------------------------------------------------------------
18. Een achtergrondfoto die uit het bericht zelf komt
Zodra de foto van een blok een dynamische waarde is (de uitgelichte
afbeelding van de vacature), schrijft Elementor alléén de foto zelf weg en
laat het de rest van de achtergrondinstellingen vallen. Zonder deze regel
herhaalt de foto zich op ware grootte in plaats van het vlak te vullen.
-------------------------------------------------------------------------- */
.sb-fotoveld {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
/* --------------------------------------------------------------------------
19. Het bolletje bij Jobs
Het getal komt uit het thema (aantal gepubliceerde vacatures) en zit binnen
de link van het menu-item; Elementor kan daar niets aan opmaken. Charcoal
in plaats van geel, zodat het bolletje ook leesbaar blijft wanneer de gele
veeg er bij hover achter langs schuift.
-------------------------------------------------------------------------- */
.sb-menu-teller {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
margin-left: 8px;
padding: 0 5px;
border-radius: 999px;
background-color: var(--sb-sunray);
color: var(--sb-charcoal);
font-size: 11px;
font-weight: 600;
letter-spacing: 0;
line-height: 1;
transform: translateY(-1px);
transition: background-color var(--sb-kleur), color var(--sb-kleur);
}
/* Bij hover schuift de gele veeg er achter langs; dan keert het bolletje om,
zodat het in beide toestanden even goed leesbaar blijft. */
.sb-header .elementor-item:hover .sb-menu-teller,
.sb-header .elementor-item:focus .sb-menu-teller,
.sb-header .elementor-item-active .sb-menu-teller {
background-color: var(--sb-charcoal);
color: var(--sb-paper);
}
/* de zin voor schermlezers hoort niet in beeld */
.screen-reader-text {
position: absolute !important;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* --------------------------------------------------------------------------
20. Het cookiebeleid
Complianz schrijft die pagina zelf en levert er een eigen stijlblad bij:
14px letter, een vaste breedte van 800px, grijze vlakken en een blauw
voor de links. Alles hieronder haakt op #cmplz-document, want alleen met
dezelfde id-.elementor-kit-7 kom je over dat stijlblad heen. De letters, de
ruimtes en het bolletje zijn dezelfde als in blok 17, zodat het
cookiebeleid en het privacybeleid als één pagina lezen.
-------------------------------------------------------------------------- */
#cmplz-document {
max-width: none;
font-size: 17px;
line-height: 1.6;
color: var(--sb-charcoal);
}
#cmplz-document p,
#cmplz-document li,
#cmplz-document td {
font-size: 17px;
line-height: 1.6;
}
#cmplz-document p,
#cmplz-document ul {
max-width: 68ch;
margin: 0 0 16px;
}
#cmplz-document h2 {
font-size: 28px;
font-weight: 600;
line-height: 1.15;
letter-spacing: -0.8px;
margin: 48px 0 16px;
padding-bottom: 0;
border-bottom: 0;
}
#cmplz-document h3,
#cmplz-document .cmplz-dropdown summary h3 {
font-size: 20px;
font-weight: 600;
line-height: 1.15;
letter-spacing: -0.4px;
margin: 32px 0 12px;
padding-bottom: 0;
border-bottom: 0;
}
#cmplz-document h4,
#cmplz-document .cmplz-dropdown h4 {
font-size: 17px;
font-weight: 600;
letter-spacing: -0.2px;
margin: 16px 0 8px;
}
#cmplz-document > *:first-child { margin-top: 0; }
#cmplz-document .cmplz-subtitle { font-size: 17px; font-weight: 600; margin-top: 24px; }
/* dezelfde halve B voor het bolletje als in de rest van de site */
#cmplz-document ul {
list-style: none;
margin-left: 0;
padding: 0;
}
#cmplz-document ul li {
position: relative;
padding-left: 26px;
margin-bottom: 8px;
}
#cmplz-document ul li::before {
content: "";
position: absolute;
left: 0;
top: 0.5em;
width: 10px;
height: 16px;
transform: translateY(-50%);
background-color: var(--sb-sunray);
border-radius: 0 999px 999px 0;
}
/* links lezen als link, en zonder het pictogram van de plugin */
#cmplz-document a {
color: var(--sb-charcoal);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
transition: color var(--sb-kleur);
}
#cmplz-document a:hover,
#cmplz-document a:focus-visible { color: var(--sb-ebony); }
#cmplz-document a[target="_blank"]::after { content: none; }
#cmplz-document a:focus {
border: 0;
padding: 0;
}
#cmplz-document a:focus-visible {
outline: 2px solid var(--sb-sunray);
outline-offset: 3px;
}
/* de uitklapvlakken met de cookies: Paper in plaats van grijs */
#cmplz-document .cmplz-dropdown,
#cmplz-cookies-overview .cmplz-dropdown {
background-color: transparent;
border-bottom: 1px solid var(--sb-beton);
margin-bottom: 0;
}
#cmplz-document .cmplz-dropdown summary,
#cmplz-cookies-overview .cmplz-dropdown summary {
background-color: transparent;
padding: 20px 0;
margin: 0;
transition: background-color var(--sb-kleur);
}
#cmplz-document .cmplz-dropdown summary:hover,
#cmplz-cookies-overview .cmplz-dropdown summary:hover { background-color: var(--sb-paper); }
#cmplz-document .cmplz-dropdown p,
#cmplz-document .cmplz-dropdown h4,
#cmplz-document .cmplz-dropdown ul { padding: 0; }
#cmplz-document .cmplz-dropdown .cmplz-service-description,
#cmplz-document .cmplz-dropdown .cmplz-sharing-data { padding: 0 0 16px; }
/* het tabelletje per cookie */
#cmplz-document .cmplz-dropdown .cookies-per-purpose,
#cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose {
border: 1px solid var(--sb-beton);
background-color: var(--sb-beton);
margin-bottom: 16px;
}
#cmplz-document .cmplz-dropdown .cookies-per-purpose div,
#cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose div {
background-color: var(--sb-paper);
padding: 16px;
}
#cmplz-document .cmplz-dropdown .cookies-per-purpose .name-header,
#cmplz-document .cmplz-dropdown .cookies-per-purpose .retention-header,
#cmplz-document .cmplz-dropdown .cookies-per-purpose .function-header {
background-color: var(--sb-blond);
}
#cmplz-document .cookies-per-purpose strong { font-weight: 600; }
/* het blok waarmee de bezoeker zijn keuze op de pagina zelf aanpast */
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category {
background-color: transparent;
border-bottom: 1px solid var(--sb-beton);
}
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header {
background-color: transparent;
padding: 16px 0;
}
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header h2 {
font-size: 20px;
font-weight: 600;
margin: 0;
padding-bottom: 0;
}
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-description {
padding: 0 0 16px;
}
@media (max-width: 767px) {
#cmplz-document h2 { font-size: 24px; margin: 32px 0 12px; }
#cmplz-document h3 { font-size: 20px; margin: 24px 0 8px; }
}
/* --------------------------------------------------------------------------
21. Geen enkele browserstandaard mag er nog doorheen
Een link die je al bezocht hebt, kleurt in elke browser paars zolang er
geen eigen kleur op staat. Elementor zet die kleur wel op `a`, maar niet
op `a:visited`, en de standaardstijl van de browser dekt dat af zodra een
link ergens buiten die regel valt. `:where()` weegt nul, dus deze regel
verslaat alleen de browser en nooit een instelling uit het paneel.
Verder: de blauwe of paarse tikvlek op mobiel gaat weg, en in de plaats
komt een echte indrukstand in de huiskleuren.
-------------------------------------------------------------------------- */
:where(a:visited) { color: inherit; }
:where(a:link) { color: inherit; }
/* De regel hierboven weegt nul en verliest dus van elke plug-in die zijn eigen
linkkleur zet maar de bezochte stand vergeet. Daarom staat de bezochte stand
hier nog een keer, met dezelfde kleuren als een gewone link in de kit. Zo kan
het paars van de browser nergens meer doorbreken. */
a:visited { color: var(--e-global-color-text); }
a:visited:hover,
a:visited:focus { color: var(--e-global-color-c1a9b3e); }
a, button, [role="button"], input, select, textarea, summary, .e-con[href] {
-webkit-tap-highlight-color: transparent;
}
/* ingedrukt: dezelfde kleuren als bij hover, zodat er niets vreemds opduikt */
.sb-nav button:active { background: var(--sb-sky); color: var(--sb-charcoal); }
.sb-nav-licht button:active { background: var(--sb-paper); color: var(--sb-charcoal); }
.elementor-button:active,
button.cmplz-accept-service:active { background-color: var(--sb-sunray); color: var(--sb-charcoal); }
/* --------------------------------------------------------------------------
22. Het tandwiel naast Cookiebeleid
Complianz zet standaard een zwevend tabje in de rechterbenedenhoek. Dat dekte
het logo van Graviteit af, dus dat tabje staat uit. In de plaats staat er een
tandwiel naast de link Cookiebeleid. Complianz luistert naar elke button met
de klasse cmplz-manage-consent, dus deze knop opent het venster opnieuw.
Het icoon leest als de links ernaast: even groot, dezelfde kleur, dezelfde
overgang naar Sunray.
-------------------------------------------------------------------------- */
.sb-cookieknop {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
padding: 0;
margin: 0;
background: none;
border: 0;
color: var(--sb-beton);
cursor: pointer;
transition: color var(--sb-kleur), transform var(--sb-vorm);
}
.sb-cookieknop svg {
width: 18px;
height: 18px;
display: block;
}
/* Let op: hello-elementor zet in zijn reset.css een magenta vlak achter elke
kale button bij hover en focus (button:hover { background-color: #c36 }).
Dat moet hier expliciet weg, anders licht het tandwiel roze op. Zet dit ook
bij elke nieuwe knop die geen Elementor-knopwidget is. */
.sb-cookieknop:hover,
.sb-cookieknop:focus,
.sb-cookieknop:focus-visible,
.sb-cookieknop:active {
background: none;
background-color: transparent;
color: var(--sb-sunray);
}
.sb-cookieknop:hover svg,
.sb-cookieknop:focus-visible svg {
transform: rotate(45deg);
transition: transform var(--sb-vorm);
}
.sb-cookieknop:focus-visible {
outline: 2px solid var(--sb-sunray);
outline-offset: 6px;
border-radius: 999px;
}
/* --------------------------------------------------------------------------
23. De taalkeuze
Op groot scherm staat de schakelaar in een eigen balkje dat in de hoek
rechtsboven plakt, tegenover de headerbalk die tegen de linkerrand plakt.
Dat balkje is een echte container in het headersjabloon (.sb-taalhoek), geen
met CSS verplaatst menu-item: zo staat hij gegarandeerd in de hoek en ziet
de klant hem ook in de editor staan.
De header wordt daarvoor zelf een rij. De balk houdt zijn margin-right: auto
en duwt het balkje naar rechts; align-items: flex-start houdt het balkje
tegen de bovenrand terwijl de balk zijn bovenmarge van 24px behoudt.
Onder 1025px klapt het menu dicht; dan verdwijnt het balkje en staat de
schakelaar onderaan in het uitklappaneel, waar hij als menu-item in de HTML
toch al stond.
De taal die aanstaat is een gevuld pilletje in Charcoal, net als de
Contact-knop: dat leest in één oogopslag. De andere taal is gewone tekst en
krijgt bij hover dezelfde gele veeg als elke link op de site.
-------------------------------------------------------------------------- */
.sb-taalkeuze {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 15px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1.9px;
line-height: 1.2;
}
.sb-taalkeuze .sb-taal {
position: relative;
z-index: 0;
display: inline-block;
padding: 5px 14px;
border-radius: 999px;
color: var(--sb-ebony);
text-decoration: none;
transition: color var(--sb-kleur), background-color var(--sb-kleur);
}
/* de taal die aanstaat */
.sb-taalkeuze .sb-taal-actief {
background-color: var(--sb-charcoal);
color: var(--sb-paper);
}
/* de gele veeg ligt achter de letters en volgt de pilvorm */
.sb-taalkeuze a.sb-taal::after {
content: "";
position: absolute;
inset-inline-start: 0;
top: 0;
bottom: 0;
z-index: -1;
width: 0;
border-radius: 999px;
background-color: var(--sb-sunray);
transition: width var(--sb-vorm);
pointer-events: none;
}
.sb-taalkeuze a.sb-taal:hover,
.sb-taalkeuze a.sb-taal:focus-visible { color: var(--sb-charcoal); }
.sb-taalkeuze a.sb-taal:hover::after,
.sb-taalkeuze a.sb-taal:focus-visible::after { width: 100%; }
.sb-taalkeuze a.sb-taal:focus-visible {
outline: 2px solid var(--sb-sunray);
outline-offset: 4px;
}
/* het balkje in de hoek */
header.elementor-location-header {
display: flex;
align-items: flex-start;
}
.sb-taalhoek {
flex: 0 0 auto;
width: auto;
margin: 0;
padding: 16px 40px 16px 28px;
background-color: var(--sb-beton);
border-radius: 0 0 0 999px;
}
.sb-taalhoek .elementor-widget-sb-taalkeuze { line-height: 0; }
@media (min-width: 1025px) {
/* op groot scherm staat de schakelaar in de hoek, niet in het menu */
.sb-header .elementor-nav-menu--main .sb-taalkeuze-item { display: none; }
}
@media (max-width: 1024px) {
.sb-taalhoek { display: none; }
}
/* In het uitklappaneel ligt een Charcoal vlak, dus keert het paar daar om. */
.sb-taalkeuze-item { margin-left: 24px; }
.elementor-nav-menu--dropdown .sb-taalkeuze-item {
margin-left: 0;
padding: 16px 32px;
}
.elementor-nav-menu--dropdown .sb-taalkeuze .sb-taal { color: var(--sb-beton); }
.elementor-nav-menu--dropdown .sb-taalkeuze .sb-taal-actief {
background-color: var(--sb-paper);
color: var(--sb-charcoal);
}
.elementor-nav-menu--dropdown .sb-taalkeuze a.sb-taal:hover,
.elementor-nav-menu--dropdown .sb-taalkeuze a.sb-taal:focus-visible { color: var(--sb-charcoal); }
/* In het uitklappaneel maakt Elementor élke op als menu-item, met een
.elementor-kit-7 die zwaarder weegt dan de onze. Bij een tik kreeg de taalknop
daardoor de volle breedte, de binnenmarge van 16 op 32 en het gele vlak van
een menu-item, terwijl de actieve taal een span is en dus onaangeroerd bleef.
Vandaar dat het paar scheef trok. Hier houden we onze eigen maten vast. De
gele veeg blijft werken, want die zit op ::after en niet op de link zelf. */
.elementor-nav-menu--dropdown .sb-taalkeuze a.sb-taal,
.elementor-nav-menu--dropdown .sb-taalkeuze a.sb-taal:hover,
.elementor-nav-menu--dropdown .sb-taalkeuze a.sb-taal:focus,
.elementor-nav-menu--dropdown .sb-taalkeuze a.sb-taal:focus-visible,
.elementor-nav-menu--dropdown .sb-taalkeuze a.sb-taal:active {
display: inline-block !important;
width: auto !important;
max-width: none !important;
padding: 5px 14px !important;
background: none !important;
background-color: transparent !important;
background-image: none !important;
border-radius: 999px !important;
line-height: 1.2 !important;
text-align: center !important;
}
.elementor-nav-menu--dropdown .sb-taalkeuze a.sb-taal:hover,
.elementor-nav-menu--dropdown .sb-taalkeuze a.sb-taal:focus,
.elementor-nav-menu--dropdown .sb-taalkeuze a.sb-taal:focus-visible,
.elementor-nav-menu--dropdown .sb-taalkeuze a.sb-taal:active {
color: var(--sb-charcoal) !important;
fill: var(--sb-charcoal) !important;
}
.elementor-nav-menu--dropdown .sb-taalkeuze .sb-taal-actief {
background-color: var(--sb-paper) !important;
color: var(--sb-charcoal) !important;
}
/* --------------------------------------------------------------------------
24. Fotoblokken
Een foto die als CSS-achtergrond staat, wordt door Google niet geïndexeerd,
kan geen alt-tekst dragen en staat niet in de afbeeldingssitemap. Daarom is
elke inhoudelijke foto een echte ![]()
geworden. Hij moet zich wel gedragen
als een achtergrond, en dat is precies wat hier gebeurt: de afbeelding ligt
absoluut over het hele blok en snijdt bij met object-fit.
Zo blijft de hoogte van het blok bepaald door het blok zelf (min-height,
binnenmarges) en niet door de foto, net als vroeger.
Staat er tekst op de foto, dan tilt de laatste regel die tekst er weer
bovenop. De afbeelding is altijd het eerste kind, de tekst komt daarna.
Uitzondering: een foto die uit het bericht zelf komt blijft een achtergrond,
want die is dynamisch. Zie blok 18.
-------------------------------------------------------------------------- */
.sb-fotoblok { position: relative; }
.sb-fotoblok > .elementor-widget-image {
position: absolute;
inset: 0;
z-index: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.sb-fotoblok > .elementor-widget-image .elementor-widget-container,
.sb-fotoblok > .elementor-widget-image figure { height: 100%; margin: 0; }
.sb-fotoblok > .elementor-widget-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
.sb-fotoblok > :not(.elementor-widget-image) { position: relative; z-index: 1; }
/* De foto volgt de afgeronde hoek van zijn blok. Als achtergrond deed hij dat
vanzelf; als echte afbeelding moet hij de vorm overnemen. */
.sb-fotoblok > .elementor-widget-image,
.sb-fotoblok > .elementor-widget-image .elementor-widget-container,
.sb-fotoblok > .elementor-widget-image figure,
.sb-fotoblok > .elementor-widget-image a,
.sb-fotoblok > .elementor-widget-image img {
border-radius: inherit;
}
.sb-fotoblok > .elementor-widget-image { overflow: hidden; }
/* --------------------------------------------------------------------------
25. Links die een nieuw tabblad openen
De naam van een klant of opdrachtgever bij een project linkt naar hun eigen
site, in een nieuw tabblad. De onderlijning en de gele veeg komen uit blok
10; hier komt een pijltje schuin omhoog bij, in dezelfde lijndikte als de
onderlijning. Een schermlezer leest op die plek voor dat de link een nieuw
tabblad opent.
-------------------------------------------------------------------------- */
.sb-feit-waarde a[target="_blank"]::after {
content: "";
content: "" / ", opent in een nieuw tabblad";
display: inline-block;
width: .65em; height: .65em;
margin-left: .3em;
vertical-align: .05em;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 2.5h5v5M9.5 2.5l-7 7'/%3E%3C/svg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 2.5h5v5M9.5 2.5l-7 7'/%3E%3C/svg%3E") no-repeat center / contain;
transition: transform var(--sb-vorm);
}
.sb-feit-waarde a[target="_blank"]:hover::after,
.sb-feit-waarde a[target="_blank"]:focus-visible::after { transform: translate(2px, -2px); }
@media (prefers-reduced-motion: reduce) {
.sb-feit-waarde a[target="_blank"]::after { transition: none; }
}
/* --------------------------------------------------------------------------
26. Fotoslider bovenaan een project
De uitgelichte foto staat vooraan, daarna de extra foto's van het project.
Twee foto's in beeld, de rest met de knoppen of door te slepen. Op mobiel
één foto, met een stukje van de volgende erbij. Alleen de eerste foto
krijgt de halve B links: zo leest de rij als één blok. Heeft een project
maar één foto, dan vult die de hele breedte. De HTML komt uit de shortcode
[sb_projectfotos], het schuiven uit het script Schuifrijen, beide in
functions.php.
-------------------------------------------------------------------------- */
.sb-projectslider {
display: flex;
gap: 24px;
overflow-x: auto;
scroll-snap-type: x proximity;
scrollbar-width: none;
-ms-overflow-style: none;
cursor: grab;
}
.sb-projectslider::-webkit-scrollbar { display: none; }
.sb-projectslider.is-sleept {
cursor: grabbing;
scroll-snap-type: none;
user-select: none;
}
.sb-slide {
flex: 0 0 calc((100% - 24px) / 2);
margin: 0;
scroll-snap-align: start;
}
.sb-slide:only-child { flex-basis: 100%; }
.sb-slide a { display: block; }
.sb-slide img {
display: block;
width: 100%;
height: 580px;
object-fit: cover;
object-position: center;
border-radius: 0;
-webkit-user-drag: none;
user-select: none;
}
.sb-slide:first-child img { border-radius: 72px 0 0 72px; }
/* de knoppen rechts onder de slider; de slider zelf loopt tot de schermrand,
dus de knoppen houden er afstand van */
.sb-slidernav {
margin-top: 24px;
justify-content: flex-end;
padding-right: 64px;
}
@media (max-width: 1024px) {
.sb-slide img { height: 420px; }
.sb-slide:first-child img { border-radius: 56px 0 0 56px; }
}
@media (max-width: 767px) {
/* op gsm begint de slider op dezelfde lijn als de tekst en loopt hij tot de
rechterrand; de foto staat in zijn eigen verhouding, zodat er niets
wegvalt */
.sb-projectslider { gap: 16px; padding-left: 24px; scroll-padding-left: 24px; }
.sb-slide { flex-basis: 85%; }
.sb-slide img { height: auto; aspect-ratio: 4 / 3; }
.sb-slide:first-child img { border-radius: 40px 0 0 40px; }
.sb-slidernav { padding-right: 24px; }
}
/* --------------------------------------------------------------------------
27. Op de gsm
Drie dingen die alleen op een smal scherm spelen.
- Drie projecten naast elkaar passen niet: dan worden ze een schuifrij,
zoals het machinepark. De rij begint op de lijn van de tekst en loopt
tot de rechterrand, zodat je ziet dat er meer is. Geldt voor elke
projectrij met de klasse sb-projectrij (home, dienstpagina's en "Andere
projecten" onder een project), niet voor het projectoverzicht.
- Een fotoblok met alleen een foto toont de hele foto, niet een uitsnede
op een vaste hoogte.
- De links in de footer krijgen een klikvlak van minstens 44 pixels hoog,
en het tandwiel ook.
-------------------------------------------------------------------------- */
@media (max-width: 767px) {
.sb-projectrij .jet-listing-grid__items {
flex-wrap: nowrap;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-left: 0;
gap: 16px;
margin: 0 -24px 0 0 !important;
padding-right: 24px;
scrollbar-width: none;
}
.sb-projectrij .jet-listing-grid__items::-webkit-scrollbar { display: none; }
.sb-projectrij .jet-listing-grid__item {
flex: 0 0 85%;
max-width: 85%;
padding: 0 !important;
scroll-snap-align: start;
}
.sb-fotoblok:has(> .elementor-widget-image:only-child) { --min-height: 0px !important; min-height: 0 !important; --padding-top: 0px !important; --padding-bottom: 0px !important; padding-top: 0 !important; padding-bottom: 0 !important; }
.sb-fotoblok:has(> .elementor-widget-image:only-child) > .elementor-widget-image { position: static; height: auto; }
.sb-fotoblok:has(> .elementor-widget-image:only-child) > .elementor-widget-image img { height: auto; }
.sb-footerlinks .elementor-icon-list-item > a { padding-top: 9px; padding-bottom: 9px; }
.sb-footerlinks .elementor-icon-list-items { column-gap: 8px; }
.sb-cookieknop { padding: 12px; margin: -12px; box-sizing: content-box; }
}
/* Het uitklapmenu op gsm en tablet loopt tot onderaan het scherm. De hoogte
zet het script Menu in de mu-plugin op het moment dat het menu opengaat,
want de header is niet altijd even hoog. */
@media (max-width: 1024px) {
.elementor-menu-toggle.elementor-active + .elementor-nav-menu__container {
min-height: var(--sb-menu-hoogte, calc(100dvh - 120px));
max-height: var(--sb-menu-hoogte, calc(100dvh - 120px)) !important;
overflow-y: auto;
overscroll-behavior: contain;
}
}
/* Het open menu op gsm en tablet. Het hele scherm wordt Beton, de kleur van
de header, zodat header en menu samen één vlak vormen, en de pagina
eronder scrolt niet mee. Een item krijgt
bij aanraken het huisgebaar: het geel schuift van links binnen, net als bij
de knoppen. Contact blijft het gele knopvlak. Items, het hamburgericoon en
de taalknoppen hebben een klikvlak van minstens 48 pixels. */
@media (max-width: 1024px) {
body.sb-menu-open { overflow: hidden; }
body.sb-menu-open::before {
content: "";
position: fixed;
inset: 0;
z-index: 99;
background-color: var(--sb-beton);
}
.elementor-nav-menu--dropdown.elementor-nav-menu__container,
.elementor-nav-menu--dropdown .elementor-nav-menu,
.elementor-nav-menu--dropdown .sub-menu {
background-color: var(--sb-beton) !important;
}
.elementor-nav-menu--dropdown li:not(.sb-menu-knop) > a.elementor-item,
.elementor-nav-menu--dropdown li:not(.sb-menu-knop) > a.elementor-sub-item {
padding-top: 18px !important;
padding-bottom: 18px !important;
color: var(--sb-charcoal) !important;
fill: var(--sb-charcoal) !important;
background-color: transparent !important;
background-image: linear-gradient(var(--sb-sunray) 0 100%) !important;
background-repeat: no-repeat !important;
background-position: 0 0 !important;
background-size: 0% 100% !important;
transition: background-size var(--sb-vorm), color var(--sb-kleur);
}
/* geen hovergebaar op aanraakschermen: alleen de pagina waar u bent krijgt
het gele vlak achter de woorden, zoals in het menu op groot scherm */
.elementor-nav-menu--dropdown li:not(.sb-menu-knop):not(.sb-taalkeuze-item):not(.sb-menu-sociaal) > a {
display: inline-block !important;
width: auto !important;
}
.elementor-nav-menu--dropdown li:not(.sb-menu-knop) > a.elementor-item-active {
background-size: calc(100% - 64px) 1.5em !important;
background-position: 32px center !important;
}
.sb-menu-knop > .elementor-item { padding-top: 20px !important; padding-bottom: 20px !important; }
.elementor-menu-toggle {
padding: 11px;
margin: -11px;
box-sizing: content-box;
}
.elementor-nav-menu--dropdown .sb-taalkeuze-item { padding: 32px 32px 40px; }
.elementor-nav-menu--dropdown .sb-taalkeuze { display: inline-flex; gap: 8px; }
.elementor-nav-menu--dropdown .sb-taalkeuze .sb-taal,
.elementor-nav-menu--dropdown .sb-taalkeuze a.sb-taal { padding: 12px 20px !important; }
.elementor-nav-menu--dropdown .sb-taalkeuze .sb-taal,
.elementor-nav-menu--dropdown .sb-taalkeuze a.sb-taal { color: var(--sb-charcoal) !important; }
.elementor-nav-menu--dropdown .sb-taalkeuze .sb-taal-actief {
background-color: var(--sb-charcoal) !important;
color: var(--sb-paper) !important;
}
}
@media (max-width: 1024px) {
}
/* op gsm begint de tekst in het menu op dezelfde lijn als het logo */
@media (max-width: 767px) {
.elementor-nav-menu--dropdown a.elementor-item,
.elementor-nav-menu--dropdown a.elementor-sub-item,
.sb-menu-knop > .elementor-item { padding-left: 24px !important; padding-right: 24px !important; }
.elementor-nav-menu--dropdown li:not(.sb-menu-knop) > a.elementor-item-active { background-size: calc(100% - 48px) 1.5em !important; background-position: 24px center !important; }
.elementor-nav-menu--dropdown .sb-taalkeuze-item { padding-left: 24px; padding-right: 24px; }
}
@media (prefers-reduced-motion: reduce) {
.elementor-nav-menu--dropdown a { transition: none !important; }
}
/* Uitklapmenu, vervolg: geen schaduwrand (het menu ligt op een vlak in
dezelfde kleur), geen verspringing als de schuifbalk verdwijnt, Diensten
altijd open, en LinkedIn en Facebook onderaan. */
.sb-menu-sociaal { display: none !important; }
@media (max-width: 1024px) {
html { scrollbar-gutter: stable; }
.elementor-nav-menu--dropdown.elementor-nav-menu__container { box-shadow: none !important; }
.elementor-nav-menu--dropdown .sub-menu { display: block !important; position: static !important; width: auto !important; margin: 0 !important; box-shadow: none !important; }
.elementor-nav-menu--dropdown .sub-arrow { display: none !important; }
.elementor-nav-menu--dropdown .sub-menu a.elementor-sub-item { padding-left: 48px !important; text-transform: none; letter-spacing: 0.2px; }
.elementor-nav-menu--dropdown .sub-menu a.elementor-sub-item.elementor-item-active { background-size: calc(100% - 80px) 1.5em !important; background-position: 48px center !important; }
.elementor-nav-menu--dropdown .sb-menu-sociaal { display: flex !important; gap: 8px; padding: 0 20px 40px; }
.elementor-nav-menu--dropdown .sb-menu-sociaal a.sb-sociaal,
.elementor-nav-menu--dropdown .sb-menu-sociaal a.sb-sociaal:hover,
.elementor-nav-menu--dropdown .sb-menu-sociaal a.sb-sociaal:focus-visible {
display: inline-flex !important;
align-items: center; justify-content: center;
width: 48px !important; height: 48px;
padding: 0 !important;
color: var(--sb-charcoal) !important;
background: none !important;
border-radius: 999px;
transition: background-color var(--sb-kleur);
}
.elementor-nav-menu--dropdown .sb-menu-sociaal a.sb-sociaal:hover,
.elementor-nav-menu--dropdown .sb-menu-sociaal a.sb-sociaal:focus-visible { background-color: var(--sb-sunray) !important; }
}
@media (max-width: 767px) {
.elementor-nav-menu--dropdown .sub-menu a.elementor-sub-item { padding-left: 40px !important; }
.elementor-nav-menu--dropdown .sub-menu a.elementor-sub-item.elementor-item-active { background-size: calc(100% - 64px) 1.5em !important; background-position: 40px center !important; }
.elementor-nav-menu--dropdown .sb-menu-sociaal { padding-left: 12px; }
}
/* --------------------------------------------------------------------------
28. Veelgestelde vragen
Rustig: de vragen staan los op de pagina, zonder lijnen en zonder vlakken.
Alleen de vraag die openstaat, krijgt het blauwe vlak met de halve B links.
Het plusje staat rechts, in dezelfde donkere ronde knop als de
schuifknoppen.
-------------------------------------------------------------------------- */
.sb-faq { --n-accordion-title-icon-order: 2; }
.sb-faq .e-n-accordion { display: flex; flex-direction: column; gap: 4px; }
.sb-faq .e-n-accordion-item {
border-radius: 32px 0 0 32px;
transition: background-color var(--sb-kleur);
}
.sb-faq .e-n-accordion-item[open] { background-color: var(--sb-sky); }
.sb-faq .e-n-accordion-item-title {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: center !important;
gap: 24px;
padding: 16px 24px 16px 32px !important;
border: 0 !important;
cursor: pointer;
}
.sb-faq .e-n-accordion-item-title-header { flex: 1 1 auto; justify-content: flex-start !important; text-align: left; }
.sb-faq .e-n-accordion-item-title-text { margin: 0; text-align: left; }
.sb-faq .e-n-accordion-item-title-icon {
order: 2 !important;
flex: 0 0 44px;
width: 44px; height: 44px;
display: flex !important; align-items: center; justify-content: center;
border-radius: 999px;
background-color: var(--sb-charcoal);
}
.sb-faq .e-n-accordion-item-title-icon svg { width: 14px; height: 14px; fill: var(--sb-sky) !important; }
.sb-faq .e-n-accordion-item-title:focus-visible { outline: 3px solid var(--sb-charcoal); outline-offset: -3px; border-radius: 32px 0 0 32px; }
.sb-faq .e-n-accordion-item > [role="region"] { padding: 0 92px 28px 32px !important; }
.sb-faq .e-n-accordion-item > [role="region"] p { max-width: 65ch; }
@media (max-width: 767px) {
.sb-faq .e-n-accordion-item { border-radius: 24px 0 0 24px; }
.sb-faq .e-n-accordion-item-title { padding: 12px 16px 12px 24px !important; gap: 16px; }
.sb-faq .e-n-accordion-item > [role="region"] { padding: 0 24px 24px 24px !important; }
}
/* Links in lopende tekst staan in het vet, zodat ze ook zonder kleur opvallen
tussen de gewone tekst. Het vet hoort bij blok 10. */
.elementor-widget-text-editor a,
.elementor-widget-theme-post-content a { font-weight: 600; }
/* Het uploadveld voor een cv: geen kader of vlak rond het veld, wel een knop
in de huisstijl in plaats van de grijze knop van de browser. */
.elementor-field-type-upload .elementor-upload-field {
border: 0 !important;
background: transparent !important;
padding: 0 !important;
box-shadow: none !important;
font-size: 15px;
color: var(--sb-charcoal);
}
.elementor-field-type-upload .elementor-upload-field::file-\73 elector-button {
margin-right: 14px;
padding: 8px 18px;
border: 1.5px solid var(--sb-charcoal);
border-radius: 0 999px 999px 0;
background-color: transparent;
color: var(--sb-charcoal);
font: inherit;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: background-color var(--sb-kleur), color var(--sb-kleur);
}
.elementor-field-type-upload .elementor-upload-field:hover::file-\73 elector-button,
.elementor-field-type-upload .elementor-upload-field:focus-visible::file-\73 elector-button {
background-color: var(--sb-charcoal);
color: var(--sb-paper);
}
.elementor-field-type-upload .elementor-upload-field:focus-visible { outline: 3px solid var(--sb-charcoal); outline-offset: 4px; }
/* Het uitklapmenu, herwerkt: Diensten is een klein label boven zijn twee
pagina's; Contact is een knop met de halve B, zoals elders op de site;
LinkedIn en Facebook zijn twee kleine knoppen met naam, zoals op de
contactpagina. */
@media (max-width: 1024px) {
.elementor-nav-menu--dropdown li.menu-item-has-children > a.elementor-item {
font-size: 12px !important;
opacity: .75;
padding-top: 24px !important;
padding-bottom: 4px !important;
cursor: default;
}
.elementor-nav-menu--dropdown .sub-menu a.elementor-sub-item {
text-transform: uppercase !important;
letter-spacing: 1.4px !important;
}
.elementor-nav-menu--dropdown li.sb-menu-knop { padding: 16px 0 8px; }
.elementor-nav-menu--dropdown li.sb-menu-knop > a.elementor-item,
.elementor-nav-menu--dropdown li.sb-menu-knop > a.elementor-item.elementor-item-active,
.elementor-nav-menu--dropdown li.sb-menu-knop > a.elementor-item:hover,
.elementor-nav-menu--dropdown li.sb-menu-knop > a.elementor-item:focus {
display: inline-flex !important;
width: auto !important;
margin: 0 0 0 32px !important;
padding: 16px 32px !important;
background: var(--sb-charcoal) !important;
color: var(--sb-paper) !important;
border-radius: 0 999px 999px 0 !important;
}
.elementor-nav-menu--dropdown .sb-taalkeuze-item { padding-top: 24px; padding-bottom: 16px; }
.elementor-nav-menu--dropdown .sb-menu-sociaal { padding: 0 32px 40px !important; gap: 8px; flex-wrap: wrap; }
.elementor-nav-menu--dropdown .sb-menu-sociaal a.sb-sociaal,
.elementor-nav-menu--dropdown .sb-menu-sociaal a.sb-sociaal:hover,
.elementor-nav-menu--dropdown .sb-menu-sociaal a.sb-sociaal:focus-visible {
width: auto !important;
height: auto;
gap: 8px;
padding: 14px 24px !important;
border-radius: 0 999px 999px 0;
background: var(--sb-charcoal) !important;
color: var(--sb-paper) !important;
font-size: 13px;
font-weight: 600;
letter-spacing: 1.4px;
text-transform: uppercase;
}
}
@media (max-width: 767px) {
.elementor-nav-menu--dropdown li.sb-menu-knop > a.elementor-item,
.elementor-nav-menu--dropdown li.sb-menu-knop > a.elementor-item.elementor-item-active,
.elementor-nav-menu--dropdown li.sb-menu-knop > a.elementor-item:hover,
.elementor-nav-menu--dropdown li.sb-menu-knop > a.elementor-item:focus { margin-left: 24px !important; }
.elementor-nav-menu--dropdown .sub-menu a.elementor-sub-item { padding-left: 24px !important; }
.elementor-nav-menu--dropdown .sub-menu a.elementor-sub-item.elementor-item-active { background-size: calc(100% - 48px) 1.5em !important; background-position: 24px center !important; }
.elementor-nav-menu--dropdown .sb-menu-sociaal { padding: 0 24px 40px !important; }
}
/* Uitklapmenu, laatste afwerking: Elementor geeft het laatste item een
afgeronde hoek, dat trok de sociale knoppen scheef; de subpagina's springen
niet meer in; meer lucht tussen Contact, de taal en de sociale knoppen. */
@media (max-width: 1024px) {
.elementor-nav-menu--dropdown .sub-menu { padding: 0 !important; }
.elementor-nav-menu--dropdown .sub-menu a.elementor-sub-item { padding-left: 32px !important; border-left: 0 !important; }
.elementor-nav-menu--dropdown li.sb-menu-knop { padding: 32px 0 8px; }
.elementor-nav-menu--dropdown .sb-taalkeuze-item { padding-top: 32px; padding-bottom: 8px; }
.elementor-nav-menu--dropdown .sb-menu-sociaal { padding-top: 24px !important; padding-bottom: 56px !important; gap: 12px; }
.elementor-nav-menu--dropdown .sb-menu-sociaal a.sb-sociaal,
.elementor-nav-menu--dropdown .sb-menu-sociaal a.sb-sociaal:hover,
.elementor-nav-menu--dropdown .sb-menu-sociaal a.sb-sociaal:focus-visible {
border-radius: 0 999px 999px 0 !important;
padding: 16px 28px !important;
line-height: 1.2;
}
}
@media (max-width: 767px) {
.elementor-nav-menu--dropdown .sub-menu a.elementor-sub-item { padding-left: 24px !important; }
}
/* In het uitklapmenu is Contact een gewoon menu-item, zoals de rest. */
@media (max-width: 1024px) {
.elementor-nav-menu--dropdown li.sb-menu-knop { padding: 0 !important; }
.elementor-nav-menu--dropdown li.sb-menu-knop > a.elementor-item,
.elementor-nav-menu--dropdown li.sb-menu-knop > a.elementor-item.elementor-item-active,
.elementor-nav-menu--dropdown li.sb-menu-knop > a.elementor-item:hover,
.elementor-nav-menu--dropdown li.sb-menu-knop > a.elementor-item:focus {
display: inline-block !important;
width: auto !important;
margin: 0 !important;
padding: 18px 32px !important;
font-size: 15px !important;
font-weight: 500 !important;
letter-spacing: 1.4px !important;
color: var(--sb-charcoal) !important;
border-radius: 0 !important;
background-color: transparent !important;
background-image: linear-gradient(var(--sb-sunray) 0 100%) !important;
background-repeat: no-repeat !important;
background-size: 0% 100% !important;
}
.elementor-nav-menu--dropdown li.sb-menu-knop > a.elementor-item.elementor-item-active {
background-size: calc(100% - 64px) 1.5em !important;
background-position: 32px center !important;
}
}
@media (max-width: 767px) {
.elementor-nav-menu--dropdown li.sb-menu-knop > a.elementor-item,
.elementor-nav-menu--dropdown li.sb-menu-knop > a.elementor-item.elementor-item-active,
.elementor-nav-menu--dropdown li.sb-menu-knop > a.elementor-item:hover,
.elementor-nav-menu--dropdown li.sb-menu-knop > a.elementor-item:focus { padding-left: 24px !important; padding-right: 24px !important; }
.elementor-nav-menu--dropdown li.sb-menu-knop > a.elementor-item.elementor-item-active { background-size: calc(100% - 48px) 1.5em !important; background-position: 24px center !important; }
}
/* --------------------------------------------------------------------------
29. De projectkaart
OpenStreetMap via JetEngine, onder de projecten. De kaart staat in
grijstinten, zodat alleen de gele markers (een graafmachine in de halve B)
opvallen. Het vlak heeft de halve B links en plakt rechts tegen de
schermrand. isolation houdt de lagen van de kaart onder de header.
Groepjes projecten krijgen dezelfde halve B met het aantal. Een klik toont
een compacte projectkaart (listing Projectpopup kaart).
-------------------------------------------------------------------------- */
.sb-kaartsectie .jet-map-listing {
position: relative;
z-index: 0;
isolation: isolate;
border-radius: 56px 0 0 56px;
overflow: hidden;
}
.sb-kaartsectie .leaflet-tile-pane { filter: grayscale(1) sepia(.12) contrast(.92) brightness(1.05); }
.sb-kaartsectie .leaflet-container { background: var(--sb-beton); font: inherit; }
.sb-kaartsectie .marker-cluster {
display: flex !important;
align-items: center;
justify-content: center;
background: var(--sb-sunray) !important;
color: var(--sb-charcoal);
font-weight: 600;
border-radius: 999px;
}
.sb-kaartsectie .marker-cluster div {
display: flex;
align-items: center;
justify-content: center;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
background: transparent !important;
}
.sb-kaartsectie .marker-cluster span { line-height: 1; font-size: 15px; }
.sb-kaartsectie .leaflet-bar { border: 0; box-shadow: none; }
.sb-kaartsectie .leaflet-bar a,
.sb-kaartsectie .leaflet-bar a:hover {
width: 44px; height: 44px; line-height: 44px;
background: var(--sb-charcoal);
color: var(--sb-sky);
border: 0;
font-size: 20px;
}
.sb-kaartsectie .leaflet-bar a:first-child { border-radius: 999px 999px 0 0; margin-bottom: 4px; }
.sb-kaartsectie .leaflet-bar a:last-child { border-radius: 0 0 999px 999px; }
.sb-kaartsectie .leaflet-bar a:hover { background: var(--sb-sky); color: var(--sb-charcoal); }
.sb-kaartsectie .leaflet-bar a:focus-visible { outline: 3px solid var(--sb-charcoal); outline-offset: 2px; }
.sb-kaartsectie .leaflet-top.leaflet-left { top: 24px; left: 32px; }
.sb-kaartsectie .leaflet-control-attribution { font-size: 11px; background: rgba(251,247,234,.85); }
/* de popup: geen wit kader van Leaflet, enkel de projectkaart zelf */
.sb-kaartsectie .leaflet-popup-content-wrapper { background: transparent; box-shadow: none; padding: 0; border-radius: 0; }
.sb-kaartsectie .leaflet-popup-content { margin: 0; width: 280px !important; overflow: hidden; }
.sb-kaartpopup, .sb-kaartpopup .e-con { width: 100% !important; max-width: 100%; min-width: 0; }
.sb-kaartpopup .elementor-heading-title, .sb-kaartpopup .sb-popupveld { overflow-wrap: anywhere; }
.sb-kaartsectie .leaflet-popup-tip-container { display: none; }
.sb-kaartsectie .leaflet-popup a.leaflet-popup-close-button {
top: 10px; right: 10px;
width: 32px; height: 32px;
line-height: 30px;
border-radius: 999px;
background: var(--sb-charcoal);
color: var(--sb-paper);
font-size: 20px;
z-index: 2;
}
.sb-kaartpopup { box-shadow: 0 12px 32px rgba(40,40,35,.25); }
.sb-kaartpopup .jet-listing-dynamic-image img { display: block; width: 100%; height: 140px !important; object-fit: cover; border-radius: 0; }
.sb-kaartpopup .sb-popupveld { font-size: 12px; line-height: 1.4; color: var(--sb-ebony); }
.sb-kaartpopup .sb-popuplabel { font-weight: 600; letter-spacing: 1px; text-transform: uppercase; font-size: 10px; margin-right: 4px; }
.leaflet-container .sb-kaartpopup a:not(.elementor-button) { color: var(--sb-charcoal); }
.leaflet-container .sb-kaartpopup .elementor-button { color: var(--sb-paper); }
@media (max-width: 767px) {
.sb-kaartsectie .jet-map-listing { border-radius: 40px 0 0 40px; }
.sb-kaartsectie .leaflet-popup-content { width: 250px !important; }
.sb-kaartsectie .leaflet-top.leaflet-left { top: 16px; left: 20px; }
}
/* Het cookiebeleid komt van Complianz, dat de tekst smaller zet dan de
andere juridische pagina's. Hier krijgt het dezelfde breedte. */
#cmplz-document, .cmplz-document { max-width: none !important; width: 100% !important; }
/* geen extra witruimte in de popup: Elementor zet onder elke widget een marge */
.sb-kaartpopup { --kit-widget-spacing: 0px; --widgets-spacing: 0px; }
.sb-kaartpopup .elementor-widget,
.sb-kaartpopup .elementor-widget-container,
.sb-kaartpopup .elementor-heading-title,
.sb-kaartpopup p { margin: 0 !important; }
.sb-kaartpopup .e-con { --padding-top: 0px; }
.sb-kaartpopup .elementor-element-kq00003 { padding: 14px 16px 16px !important; gap: 4px !important; }
.sb-kaartpopup .elementor-element-kq00008 { margin-top: 8px !important; }
.leaflet-popup-content p { margin: 0; }
/* het kaarticoon voor de ligging in de popup, hetzelfde als bij het adres in
de footer */
.sb-kaartpopup .elementor-element-kq00006 .elementor-heading-title::before {
content: "";
display: inline-block;
width: 10px; height: 13px;
margin-right: 6px;
vertical-align: -1px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 384 512%27%3E%3Cpath d=%27M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z%27/%3E%3C/svg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 384 512%27%3E%3Cpath d=%27M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z%27/%3E%3C/svg%3E") no-repeat center / contain;
}
/* --------------------------------------------------------------------------
30. Gsm: compact uitklapmenu, cookie-icoon en stappenplan
-------------------------------------------------------------------------- */
/* Het uitklapmenu past op één scherm zonder scrollen. Items iets lager (het
klikvlak blijft rond 48 pixels) en minder lucht rond de taal en de sociale
knoppen. De sociale knoppen beginnen op dezelfde lijn als de menulinks. */
@media (max-width: 1024px) {
.elementor-nav-menu--dropdown li:not(.sb-menu-knop) > a.elementor-item,
.elementor-nav-menu--dropdown li:not(.sb-menu-knop) > a.elementor-sub-item,
.elementor-nav-menu--dropdown li.sb-menu-knop > a.elementor-item,
.elementor-nav-menu--dropdown li.sb-menu-knop > a.elementor-item.elementor-item-active,
.elementor-nav-menu--dropdown li.sb-menu-knop > a.elementor-item:hover,
.elementor-nav-menu--dropdown li.sb-menu-knop > a.elementor-item:focus {
padding-top: 13px !important;
padding-bottom: 13px !important;
}
.elementor-nav-menu--dropdown .sb-taalkeuze-item { padding-top: 16px; padding-bottom: 4px; }
.elementor-nav-menu--dropdown .sb-menu-sociaal {
padding-top: 12px !important;
padding-bottom: 32px !important;
padding-left: 32px !important;
}
.elementor-nav-menu--dropdown .sb-menu-sociaal a.sb-sociaal,
.elementor-nav-menu--dropdown .sb-menu-sociaal a.sb-sociaal:hover,
.elementor-nav-menu--dropdown .sb-menu-sociaal a.sb-sociaal:focus-visible {
padding: 14px 24px !important;
}
}
@media (max-width: 767px) {
.elementor-nav-menu--dropdown .sb-menu-sociaal { padding-left: 24px !important; }
}
/* Footer op gsm: het cookie-icoon staat in dezelfde rij als de juridische
links, direct na Cookiebeleid, en niet alleen op een eigen lijn. De lijst
lost op in de rij eromheen, zodat de links en het icoon samen doorlopen. */
@media (max-width: 767px) {
.e-con:has(> .sb-footerlinks):has(> .elementor-widget-sb-cookieknop) {
--row-gap: 0px !important;
--column-gap: 24px !important;
gap: 0 24px !important;
}
.e-con:has(> .elementor-widget-sb-cookieknop) > .sb-footerlinks,
.e-con:has(> .elementor-widget-sb-cookieknop) > .sb-footerlinks > .elementor-icon-list-items {
display: contents !important;
}
.e-con:has(> .elementor-widget-sb-cookieknop) > .sb-footerlinks .elementor-icon-list-item {
margin-inline: 0 !important;
}
}
/* Het stappenplan (Grondwerken) schuift op gsm opzij, zoals de projectrijen:
de volgende stap piept rechts binnen, zodat je ziet dat er meer is. */
@media (max-width: 767px) {
.sb-stappen {
--flex-direction: row !important;
--flex-wrap: nowrap !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
overflow-x: auto;
scroll-snap-type: x mandatory;
overscroll-behavior-x: contain;
scrollbar-width: none;
--gap: 16px !important;
--column-gap: 16px !important;
gap: 16px !important;
}
.sb-stappen::-webkit-scrollbar { display: none; }
.sb-stappen > .e-con {
--width: 85% !important;
flex: 0 0 85% !important;
max-width: 85%;
scroll-snap-align: start;
}
}
@media (max-width: 767px) {
/* de foto's van de stappen even hoog, ook als de originelen anders van
verhouding zijn */
.sb-stappen .sb-fotoblok > .elementor-widget-image img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}
/* de pijltjes onder de rij, rechts */
.sb-stappen + .elementor-widget-sb-schuifknoppen { margin-top: -8px; }
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
font-family: 'Rethink Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('https://www.soil-building.eu/wp-content/uploads/2026/08/rethink-sans-latin.woff2') format('woff2');
}
@font-face {
font-family: 'Rethink Sans';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('https://www.soil-building.eu/wp-content/uploads/2026/08/rethink-sans-latin.woff2') format('woff2');
}
@font-face {
font-family: 'Rethink Sans';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('https://www.soil-building.eu/wp-content/uploads/2026/08/rethink-sans-latin.woff2') format('woff2');
}
@font-face {
font-family: 'Rethink Sans';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('https://www.soil-building.eu/wp-content/uploads/2026/08/rethink-sans-latin.woff2') format('woff2');
}
@font-face {
font-family: 'Rethink Sans';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('https://www.soil-building.eu/wp-content/uploads/2026/08/rethink-sans-latin-italic.woff2') format('woff2');
}
@font-face {
font-family: 'Rethink Sans';
font-style: italic;
font-weight: 600;
font-display: swap;
src: url('https://www.soil-building.eu/wp-content/uploads/2026/08/rethink-sans-latin-italic.woff2') format('woff2');
}
/* End Custom Fonts CSS */