/*
Theme Name: EW Security
Theme URI: https://ewsecurity.nl
Author: EW Security / AI-processen
Description: Custom block theme voor EW Security — pixel-getrouwe implementatie van het goedgekeurde "mens"-design. Twee pijlers (Brandveiligheid en Beveiliging), lokale fonts, geen page builder.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ewsecurity
*/
/* =====================================================================
Tokens (aliassen op theme.json-presets voor korte hand)
===================================================================== */
:root {
--ew-green: var(--wp--preset--color--green, #58BB47);
--ew-green-600: var(--wp--preset--color--green-600, #47A038);
--ew-green-700: var(--wp--preset--color--green-700, #2E7D32);
--ew-green-050: var(--wp--preset--color--green-050, #EEF8EB);
--ew-ink: var(--wp--preset--color--ink, #12200E);
--ew-slate: var(--wp--preset--color--slate, #4A5A46);
--ew-muted: var(--wp--preset--color--muted, #5F7059);
--ew-paper: var(--wp--preset--color--paper, #FBFCFA);
--ew-paper-2: var(--wp--preset--color--paper-2, #F1F5EF);
--ew-line: var(--wp--preset--color--line, #E3EADF);
--ew-white: #fff;
/* Rand van bedieningselementen (invoervelden, radio's): haalt 3:1 op papier. */
--ew-line-strong: #7D8C78;
/* Tekst op donkere vlakken (inkt-band, kernpunten, uitgelicht pakket). */
--ew-on-dark: #DDE8DA;
--ew-on-dark-muted: #B9C9B4;
/* Lichtgroen accent op donker (iconen, focusring). */
--ew-green-on-dark: #8FDD7D;
/* Diepste groen: eindpunt van de CTA-band, achter witte tekst (≥4,5:1). */
--ew-green-900: #1B5220;
/* Donkere inkt op merkgroen: 7,8:1 op #58BB47. */
--ew-ink-on-green: #08130a;
--ew-ease: var(--wp--custom--ease, cubic-bezier(.2, .7, .3, 1));
/* Lange, zachte uitloop voor de scroll-reveals. */
--ew-ease-rustig: cubic-bezier(.33, 1, .68, 1);
/* Ruimte tussen twee opeenvolgende blokken binnen een sectie. Vervangt de
oude sectiepadding: het ritme zit nu op de blokken zelf, niet op een
generieke wrapper. */
--ew-blokruimte: clamp(1.7rem, 3.2vw, 2.6rem);
--ew-pad-x: clamp(1.2rem, 4vw, 2.5rem);
/* Semantische z-index-schaal */
--z-header: 50;
--z-badge: 5;
}
html {
overflow-x: clip;
}
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
/* Ankerdoelen komen onder de sticky header uit, niet erachter. Lenis leest
deze waarde ook. */
html {
scroll-padding-top: 6rem;
}
/* Lenis (zwaarder scrollen op desktop, zie site.js). Tijdens het glijden
vangt de kaart in de footer het scrollwiel niet af. */
html.lenis,
html.lenis body {
height: auto;
}
.lenis:not(.lenis-autoToggle).lenis-stopped {
overflow: clip;
}
.lenis [data-lenis-prevent] {
overscroll-behavior: contain;
}
.lenis.lenis-smooth iframe {
pointer-events: none;
}
body {
-webkit-font-smoothing: antialiased;
/* Géén overflow-x hier: dat maakt body een scrollcontainer en breekt
position:sticky. html { overflow-x: clip } vangt het horizontale werk al. */
}
h1,
h2,
h3 {
text-wrap: balance;
}
p {
text-wrap: pretty;
}
::selection {
background: var(--ew-green-050);
}
img {
max-width: 100%;
height: auto;
}
:where(a, button, input, textarea, select, summary):focus-visible {
outline: 2px solid var(--ew-green-700);
outline-offset: 3px;
border-radius: 4px;
}
/* =====================================================================
Verticale ritmiek — expliciet per element, geen generieke layout-selectors.
WP's blockGap staat uit (theme.json) en er is bewust géén
`:where(.is-layout-*) > * + *`-regel: elk element regelt zijn eigen marge.
===================================================================== */
main p,
main ul,
main ol {
margin-block: 0 .95rem;
}
main h2 {
margin-block: 2rem .7rem;
}
main h3 {
margin-block: 1.5rem .5rem;
}
main h2:first-child,
main h3:first-child,
main p:first-child,
main ul:first-child,
main ol:first-child {
margin-block-start: 0;
}
main p:last-child,
main ul:last-child,
main ol:last-child {
margin-block-end: 0;
}
/* Blokken die hun eigen spacing meebrengen (kaarten, banden, grids, media)
hebben deze prose-marges niet nodig. */
main :where(.wp-block-buttons, .wp-block-group, figure, .wp-block-query) {
margin-block: 0;
}
/* =====================================================================
Buttons — core button block in de huisstijl
===================================================================== */
/* blockGap staat uit in theme.json; zonder deze regel valt de flex-gap terug
op 0.5em en plakken knoppen te dicht op elkaar. */
.wp-block-buttons.is-layout-flex {
gap: .8rem;
}
.wp-block-button__link {
display: inline-flex;
align-items: center;
gap: .55rem;
padding: .95rem 1.7rem;
border: 1.5px solid transparent;
transition: transform .2s var(--ew-ease), background .2s, box-shadow .2s, border-color .2s;
}
.wp-block-button__link:hover {
transform: none;
}
/* Ghost-variant */
.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline>.wp-block-button__link {
background: var(--ew-white);
border-color: var(--ew-line);
color: var(--ew-ink);
box-shadow: none;
}
.is-style-outline .wp-block-button__link:hover {
border-color: var(--ew-green);
color: var(--ew-green-700);
background: var(--ew-white);
}
/* Pijl-variant: → via mask zodat de knop gewoon bewerkbaar blijft */
.is-style-arrow .wp-block-button__link::after {
content: "";
width: 1.05em;
height: 1.05em;
background: currentColor;
-webkit-mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
transition: transform .2s var(--ew-ease);
}
.is-style-arrow .wp-block-button__link:hover::after {
transform: translateX(3px);
}
/* Telefoon-variant (met hoorntje) */
.is-style-phone .wp-block-button__link::before {
content: "";
width: 1.05em;
height: 1.05em;
background: currentColor;
-webkit-mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
/* =====================================================================
Header
===================================================================== */
.ew-header {
position: sticky;
top: 0;
z-index: var(--z-header);
background: transparent;
border-bottom: 1px solid transparent;
transition: background .3s, border-color .3s;
}
.admin-bar .ew-header {
top: var(--wp-admin--admin-bar--height, 32px);
}
.ew-header.scrolled {
background: var(--ew-paper);
border-color: var(--ew-line);
}
/* Header boven het donkere herovlak (alleen homepage, tot er gescrold is).
De lichte tekstkleur geldt alleen voor de dichtgeklapte navigatierij, niet voor
de geopende mobiele overlay (die heeft een lichte achtergrond). */
body:has(.ew-hero, .ew-page-hero--photo) .ew-header:not(.scrolled) {
background: var(--ew-ink);
}
body:has(.ew-hero, .ew-page-hero--photo) .ew-header:not(.scrolled) .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content {
color: var(--ew-on-dark);
}
body:has(.ew-hero, .ew-page-hero--photo) .ew-header:not(.scrolled) .wp-block-navigation__responsive-container:not(.is-menu-open)>.wp-block-navigation__container>.wp-block-navigation-item>.wp-block-navigation-item__content:hover {
color: #fff;
}
body:has(.ew-hero, .ew-page-hero--photo) .ew-header:not(.scrolled) .ew-logo__txt {
color: #fff;
}
body:has(.ew-hero, .ew-page-hero--photo) .ew-header:not(.scrolled) .ew-header__phone {
color: #fff;
}
body:has(.ew-hero, .ew-page-hero--photo) .ew-header:not(.scrolled) .ew-header__phone::before {
background: var(--ew-green-on-dark);
}
body:has(.ew-hero, .ew-page-hero--photo) .ew-header:not(.scrolled) .wp-block-navigation__responsive-container-open {
color: #fff;
}
@media (max-width: 600px) {
.ew-header .wp-block-buttons.ew-header__cta {
display: none;
}
}
.ew-header__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.2rem;
min-height: 76px;
padding: 0 var(--ew-pad-x);
max-width: 1280px;
margin-inline: auto;
}
/* WP's blockGap zet margin-block-start op elk kind na het eerste; in deze
flex-rij duwt dat nav, telefoon en CTA onder het midden. */
.ew-header__bar > * {
margin-block: 0 !important;
}
/* Logo */
.ew-logo {
display: flex;
align-items: center;
gap: .65rem;
text-decoration: none;
}
.ew-logo img {
width: 44px;
height: 44px;
border-radius: 0;
object-fit: cover;
}
.ew-logo__txt {
font-family: var(--wp--preset--font-family--heading);
font-weight: 700;
font-size: 1.12rem;
line-height: 1;
color: var(--ew-ink);
}
/* Woordmerk zoals in het logo: EW in Arial Bold, SECURITY in een versmalde
Helvetica. Beide fonts pakken eerst de lokaal geïnstalleerde variant; de
meegeleverde subsets (Arimo Bold, Roboto Condensed, alleen de letters van
het woordmerk) vangen apparaten zonder Arial of Arial Narrow op. */
@font-face {
font-family: "EW Logo Bold";
src: local("Arial Bold"), local("Arial-BoldMT"),
url("assets/fonts/logo-ew.woff2") format("woff2");
font-weight: 700;
font-display: swap;
}
@font-face {
font-family: "EW Logo Smal";
src: local("Helvetica Condensed"), local("Helvetica-Condensed"),
local("Helvetica Neue LT Std 57 Condensed"), local("HelveticaNeueLTStd-Cn"),
local("Arial Narrow"), local("ArialNarrow"),
url("assets/fonts/logo-smal.woff2") format("woff2");
font-weight: 400;
font-display: swap;
}
.ew-logo__woord {
display: flex;
align-items: baseline;
gap: .3em;
white-space: nowrap;
}
.ew-logo__ew {
font-family: "EW Logo Bold", Arial, sans-serif;
font-weight: 700;
font-size: 1.1em;
letter-spacing: -.01em;
}
.ew-logo__sec {
font-family: "EW Logo Smal", "Arial Narrow", sans-serif;
font-weight: 400;
font-size: 1.1em;
text-transform: uppercase;
letter-spacing: .01em;
}
/* Navigatie (core Navigation-block) */
.ew-header .wp-block-navigation {
font-family: var(--wp--preset--font-family--heading);
font-weight: 500;
font-size: .93rem;
}
.ew-header .wp-block-navigation .wp-block-navigation__container {
flex-wrap: nowrap;
gap: 1.2rem;
}
.ew-header .wp-block-navigation-item__content {
white-space: nowrap;
}
.ew-header__bar>* {
flex: none;
}
.ew-header__bar .wp-block-navigation {
flex: 1 1 auto;
min-width: 0;
justify-content: center;
}
@media (max-width: 1280px) {
}
@media (max-width: 1200px) {
.ew-header__phone span {
display: none;
}
}
/* WP's hamburger-breakpoint ligt op 600px; ons menu heeft ruimte nodig tot 1080px.
Onder 1080px: desktoprij verbergen, overlay-knop tonen. */
@media (max-width: 1080px) {
.ew-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
display: none;
}
.ew-header .wp-block-navigation__responsive-container-open,
.ew-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
display: flex !important;
/* Het icoon is 24px; het aanraakoppervlak moet minstens 44px zijn. */
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
}
.ew-header .wp-block-navigation__responsive-container-close {
min-width: 44px;
min-height: 44px;
}
}
.ew-header .wp-block-navigation .wp-block-navigation-item__content {
color: var(--ew-slate);
transition: color .2s;
}
.ew-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.ew-header .wp-block-navigation .current-menu-item>.wp-block-navigation-item__content {
color: var(--ew-ink);
}
.ew-header .wp-block-navigation__submenu-container {
border-radius: var(--wp--custom--radius--card, 20px);
border: 1px solid var(--ew-line) !important;
box-shadow: var(--wp--custom--shadow--badge);
padding: .5rem !important;
background: var(--ew-white) !important;
}
.ew-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
border-radius: 10px;
padding: .5rem .8rem !important;
/* Dropdown heeft altijd een witte achtergrond, ook boven de donkere heroband:
kleur moet daarom onvoorwaardelijk winnen van de lichte unscrolled-headerstijl. */
color: var(--ew-green-700) !important;
}
.ew-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
background: var(--ew-green-050);
color: var(--ew-green-700) !important;
}
/* Telefoonlink in de header */
.ew-header__phone {
font-family: var(--wp--preset--font-family--heading);
font-weight: 600;
font-size: .95rem;
display: inline-flex;
align-items: center;
gap: .45rem;
color: var(--ew-ink);
white-space: nowrap;
}
.ew-header__phone::before {
content: "";
width: 1.05em;
height: 1.05em;
background: var(--ew-green-700);
-webkit-mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
.ew-header__cta .wp-block-button__link {
padding: .7rem 1.3rem;
font-size: .92rem;
background: var(--ew-green);
color: var(--ew-ink-on-green);
}
.ew-header__cta .wp-block-button__link:hover {
background: var(--ew-green-600);
color: var(--ew-ink-on-green);
}
.ew-header__cta .wp-block-button__link::before {
content: "";
width: 1.05em;
height: 1.05em;
flex: none;
background: var(--ew-green-700);
-webkit-mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
@media (max-width: 1080px) {
.ew-header__phone span {
display: none;
}
}
@media (max-width: 940px) {
.ew-header .wp-block-buttons.ew-header__cta {
display: none;
}
}
/* =====================================================================
Hero (homepage) — links informatievak, rechts foto, bovenste helft donker
===================================================================== */
.ew-hero {
position: relative;
padding: clamp(2rem, 4.5vw, 3.5rem) 0 clamp(3rem, 6vw, 4.5rem);
background: var(--ew-paper);
}
.ew-hero::before {
content: "";
position: absolute;
top: calc(-1 * (76px + var(--wp-admin--admin-bar--height, 0px)));
left: 0;
right: 0;
height: calc(58% + 76px);
background: var(--ew-ink);
}
.ew-hero__grid {
position: relative;
display: grid;
grid-template-columns: 1.02fr .98fr;
gap: 1.4rem;
align-items: stretch;
/* Eigen contentkolom: zonder deze padding plakt het paneel onder ~1280px
tegen de viewportrand (hero werd "afgekapt"). */
max-width: calc(1200px + 2 * var(--ew-pad-x));
margin-inline: auto;
padding-inline: var(--ew-pad-x);
box-sizing: border-box;
}
@media (max-width: 920px) {
.ew-hero__grid {
grid-template-columns: 1fr;
}
}
.ew-hero__panel {
background: var(--ew-white);
border: 1px solid var(--ew-line);
border-top: 4px solid var(--ew-green);
border-radius: var(--wp--custom--radius--card, 10px);
padding: clamp(1.7rem, 3.4vw, 2.8rem);
display: flex;
flex-direction: column;
justify-content: center;
box-shadow: var(--wp--custom--shadow--panel);
}
.ew-hero h1 {
margin: 1.3rem 0 1.2rem;
}
.ew-hero .ew-lead {
font-size: clamp(1.02rem, 1.5vw, 1.2rem);
color: var(--ew-slate);
max-width: 44ch;
}
.ew-hero__actions {
margin-top: 1.8rem;
}
.ew-hl {
position: relative;
color: var(--ew-green-700);
white-space: nowrap;
}
/* Hero-foto rechts, badges erbovenop */
.ew-hero__photo {
position: relative;
border-radius: var(--wp--custom--radius--card, 10px);
overflow: hidden;
min-height: clamp(340px, 52vw, 620px);
}
.ew-hero__photo>img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 62% 30%;
}
.ew-hero__photo::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(6, 20, 5, .52) 0%, rgba(6, 20, 5, .24) 28%, transparent 52%), linear-gradient(180deg, transparent 55%, rgba(6, 20, 5, .4) 100%);
}
/* Avatars-strip */
/* =====================================================================
Klantenstrip
===================================================================== */
.ew-clients {
padding: 2.6rem 0;
border-top: 1px solid var(--ew-line);
border-bottom: 1px solid var(--ew-line);
background: var(--ew-white);
}
.ew-clients p.ew-clients__label {
padding-inline: var(--ew-pad-x);
text-align: center;
font-family: var(--wp--preset--font-family--heading);
font-size: .8rem;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--ew-muted);
margin-bottom: 1.4rem;
font-weight: 600;
}
.ew-clients__row {
display: flex;
flex-wrap: wrap;
gap: 1.8rem 3rem;
justify-content: center;
align-items: center;
}
.ew-clients__row img {
height: 46px;
width: auto;
max-width: 150px;
object-fit: contain;
filter: grayscale(1);
opacity: .6;
transition: filter .3s, opacity .3s;
}
.ew-clients__row img.tall {
height: 82px;
}
.ew-clients__row img:hover {
filter: none;
opacity: 1;
}
/* =====================================================================
Secties
===================================================================== */
/* De sectie brengt zelf geen ritme mee (geen padding-block zoals vroeger,
die telde tussen twee secties op tot 6-10rem). Alleen een afsluitende
ruimte onderaan: zonder die padding raakt de laatste kaart/rij de
sectierand, en tekent een volgende band zijn lijn daar strak tegenaan. */
.ew-section {
padding-bottom: var(--ew-blokruimte);
}
/* Onze secties vormen zelf de contentkolom. WP's constrained layout centreert
smalle kinderen (koppen, eyebrows, leads); in dit design staan die juist
links op de kolom. Daarom: kolombreedte + padding op de sectie zelf en de
automarges van de kinderen neutraliseren. (.ew-hero en .ew-clients vallen
hierbuiten: die zijn bewust full-bleed.) */
.ew-page-hero,
.ew-section {
max-width: calc(1200px + 2 * var(--ew-pad-x));
margin-inline: auto;
padding-inline: var(--ew-pad-x);
box-sizing: border-box;
}
.ew-page-hero> :where(:not(.alignfull, .ew-cta)),
.ew-section> :where(:not(.alignfull, .ew-cta)) {
margin-left: 0 !important;
margin-right: 0 !important;
}
.ew-sec-head--center {
margin-inline: auto !important;
}
/* Leesbaarheid: kale tekstblokken direct in een sectie niet breder dan 72ch */
.ew-section>p,
.ew-section>ul,
.ew-section>ol,
.ew-section>h2,
.ew-section>h3 {
max-width: 72ch;
}
.ew-sec-head {
max-width: 660px;
margin-bottom: 2.2rem;
}
.ew-sec-head h2 {
margin: 1.1rem 0 1rem;
}
.ew-sec-head p {
color: var(--ew-slate);
font-size: 1.08rem;
}
.ew-sec-head--center {
margin-inline: auto;
text-align: center;
}
/* =====================================================================
Dienstkaarten (seg)
===================================================================== */
.ew-seg-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 1fr;
gap: 1.4rem;
align-items: stretch;
}
@media (max-width: 720px) {
.ew-seg-grid {
grid-template-columns: 1fr;
}
}
.ew-seg {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
background: var(--ew-white);
border: 1px solid var(--ew-line);
border-radius: var(--wp--custom--radius--card, 20px);
transition: transform .3s var(--ew-ease), box-shadow .3s, border-color .3s;
text-decoration: none;
color: inherit;
}
.ew-seg:hover {
transform: translateY(-5px);
box-shadow: var(--wp--custom--shadow--card);
border-color: #CFE3C8;
}
.ew-seg__photo {
position: relative;
display: block;
width: 100%;
aspect-ratio: 16 / 9;
flex: none;
overflow: hidden;
background: #1c3316;
}
.ew-seg__photo img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .5s var(--ew-ease);
}
.ew-seg:hover .ew-seg__photo img {
transform: scale(1.05);
}
.ew-seg__photo::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 55%, rgba(6, 20, 5, .25));
}
/* Blokstroom: icoon boven de tekst (geen flex-rij meer). flex: 1 blijft
zodat de kaarten in het grid gelijke hoogte houden. */
.ew-seg__body {
display: block;
padding: 1.6rem 1.8rem 1.8rem;
flex: 1;
}
.ew-seg__body > span:last-child {
display: block;
}
.ew-seg h3 {
margin-bottom: .4rem;
}
.ew-seg__body p {
color: var(--ew-slate);
font-size: .96rem;
margin-bottom: .9rem;
}
.ew-tags {
display: flex;
flex-wrap: wrap;
gap: .4rem;
padding: 0;
margin: 0;
list-style: none;
}
.ew-tags span,
.ew-tags li {
font-size: .8rem;
font-family: var(--wp--preset--font-family--heading);
font-weight: 500;
color: var(--ew-green-700);
background: var(--ew-green-050);
padding: .28rem .7rem;
border-radius: var(--wp--custom--radius--chip, 4px);
}
/* =====================================================================
Waardenband (donker)
===================================================================== */
.ew-values {
background: var(--ew-ink);
color: var(--ew-on-dark);
position: relative;
overflow: hidden;
/* Full-bleed band; de inhoud begint exact op de contentas, zodat de kop
verticaal in lijn staat met de koppen van de andere secties. */
margin-inline: 0 !important;
max-width: none !important;
padding-block: clamp(2.4rem, 4.5vw, 3.6rem);
padding-inline: max(var(--ew-pad-x), calc((100% - 1200px) / 2));
}
.ew-values>* {
position: relative;
}
.ew-values__head {
max-width: 600px;
margin-bottom: 2.8rem;
}
.ew-values__head h2 {
color: #fff;
margin: 1rem 0 .8rem;
}
.ew-values__head p {
color: var(--ew-on-dark-muted);
}
.ew-values__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.6rem;
}
@media (max-width: 820px) {
.ew-values__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 460px) {
.ew-values__grid {
grid-template-columns: 1fr;
}
}
.ew-val {
padding-top: 1.4rem;
border-top: 2px solid rgba(255, 255, 255, .12);
}
.ew-val h4,
.ew-val h3 {
color: #fff;
font-size: 1.1rem;
margin-bottom: .4rem;
}
.ew-val p {
color: var(--ew-on-dark-muted);
font-size: .92rem;
}
/* =====================================================================
Statbar
===================================================================== */
.ew-statbar {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
text-align: center;
}
@media (max-width: 640px) {
.ew-statbar {
grid-template-columns: repeat(2, 1fr);
gap: 2.5rem 1rem;
}
}
.ew-stat__num {
font-family: var(--wp--preset--font-family--heading);
font-weight: 700;
font-size: clamp(2.4rem, 5vw, 3.6rem);
color: var(--ew-green-700);
letter-spacing: -.03em;
line-height: 1;
}
.ew-stat__cap {
color: var(--ew-slate);
margin-top: .5rem;
font-family: var(--wp--preset--font-family--heading);
font-weight: 500;
font-size: .95rem;
}
/* =====================================================================
Teamband
===================================================================== */
.ew-team-band {
border-radius: var(--wp--custom--radius--panel, 24px);
overflow: hidden;
border: 1px solid var(--ew-line);
background: var(--ew-white);
box-shadow: var(--wp--custom--shadow--panel);
}
.ew-team-band img {
width: 100%;
display: block;
}
/* =====================================================================
Kernteam (over ons): foto, naam, functie en mailadres
===================================================================== */
/* .ew-section > ul beperkt lijsten tot leesbreedte; deze lijst is een raster. */
.ew-section > .ew-kernteam {
max-width: none;
}
.ew-kernteam {
list-style: none;
padding: 0;
margin-bottom: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
gap: 1.4rem;
}
.ew-lid {
display: flex;
align-items: center;
gap: 1.4rem;
padding: 1.1rem;
background: var(--ew-white);
border: 1px solid var(--ew-line);
border-radius: var(--wp--custom--radius--card, 20px);
}
.ew-lid__foto {
flex: none;
width: clamp(7.5rem, 22vw, 9.5rem);
aspect-ratio: 1;
overflow: hidden;
border-radius: var(--wp--custom--radius--chip, 12px);
background: var(--ew-green-700);
}
.ew-lid__foto img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ew-lid__tekst {
min-width: 0;
}
.ew-lid__naam {
font-size: var(--wp--preset--font-size--large, 1.35rem);
margin: 0;
}
.ew-lid__functie {
margin: .25rem 0 .9rem;
color: var(--ew-muted);
}
.ew-lid__mail {
display: inline-flex;
align-items: center;
gap: .45rem;
color: var(--ew-green-700);
font-weight: 600;
text-decoration: none;
overflow-wrap: anywhere;
}
.ew-lid__mail svg {
flex: none;
}
.ew-lid__mail:hover {
text-decoration: underline;
text-underline-offset: 3px;
}
@media (max-width: 420px) {
.ew-lid {
flex-direction: column;
align-items: flex-start;
}
.ew-lid__foto {
width: 8rem;
}
}
/* =====================================================================
Testimonial
===================================================================== */
.ew-testi {
background: var(--ew-white);
border: 1px solid var(--ew-line);
border-radius: var(--wp--custom--radius--band, 28px);
padding: clamp(2.5rem, 5vw, 4rem);
display: grid;
grid-template-columns: auto 1fr;
gap: 2.5rem;
align-items: center;
}
@media (max-width: 720px) {
.ew-testi {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
.ew-testi__por {
width: 120px;
height: 120px;
border-radius: var(--wp--custom--radius--panel, 24px);
background: linear-gradient(150deg, var(--ew-green), var(--ew-green-700));
display: grid;
place-items: center;
color: #fff;
font-family: var(--wp--preset--font-family--heading);
font-weight: 700;
font-size: 2.2rem;
overflow: hidden;
}
.ew-testi__por img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ew-testi blockquote {
font-family: var(--wp--preset--font-family--heading);
font-weight: 500;
font-size: clamp(1.25rem, 2.5vw, 1.75rem);
line-height: 1.4;
color: var(--ew-ink);
letter-spacing: -.01em;
border: 0;
margin: 0;
padding: 0;
}
.ew-testi cite {
display: block;
margin-top: 1.2rem;
font-style: normal;
color: var(--ew-muted);
font-size: .95rem;
}
.ew-stars {
display: flex;
gap: .2rem;
color: var(--ew-green);
margin-bottom: 1rem;
}
.ew-stars svg {
width: 20px;
height: 20px;
fill: var(--ew-green);
stroke: none;
}
/* =====================================================================
Gradient-CTA
===================================================================== */
.ew-cta {
position: relative;
overflow: hidden;
/* Full-bleed band; zie .ew-band-sectie hieronder voor de breedte-truc. */
margin-inline: 0 !important;
max-width: none !important;
padding-block: clamp(2.4rem, 4.5vw, 3.6rem);
padding-inline: max(var(--ew-pad-x), calc((100% - 1200px) / 2));
text-align: center;
/* Van green-700 naar een diepere tint: wit haalt zo overal minstens 4,5:1.
Het oude verloop begon bij #58BB47, waar witte tekst maar 2,7:1 haalde. */
background: linear-gradient(140deg, var(--ew-green-700), var(--ew-green-900));
}
.ew-cta::before {
content: "";
position: absolute;
inset: 0;
background: none;
}
.ew-cta>* {
position: relative;
}
.ew-cta h2 {
color: #fff;
margin-bottom: 1rem;
}
.ew-cta p {
color: var(--ew-white);
max-width: 44ch;
margin: 0 auto 2rem;
font-size: 1.1rem;
}
.ew-cta .wp-block-button__link {
background: #fff;
color: var(--ew-ink-on-green);
box-shadow: none;
}
.ew-cta .wp-block-button__link:hover {
background: #f0fded;
}
.ew-cta .is-style-outline .wp-block-button__link,
.ew-cta .is-style-phone.is-style-outline .wp-block-button__link {
background: transparent;
border-color: rgba(255, 255, 255, .6);
color: #fff;
}
.ew-cta .is-style-outline .wp-block-button__link:hover {
border-color: #fff;
background: rgba(255, 255, 255, .1);
color: #fff;
}
/* =====================================================================
Pagina-hero (binnenpagina's)
===================================================================== */
.ew-page-hero {
padding: clamp(1.8rem, 4vw, 3rem) 0 clamp(1.4rem, 3vw, 2.2rem);
}
.ew-page-hero h1 {
max-width: 18ch;
margin: 1.2rem 0 1rem;
}
.ew-page-hero .ew-lead {
font-size: var(--wp--preset--font-size--lead);
color: var(--ew-slate);
max-width: 55ch;
}
.ew-breadcrumbs {
font-size: .88rem;
color: var(--ew-muted);
margin-bottom: .6rem;
}
.ew-breadcrumbs a {
color: var(--ew-muted);
}
.ew-breadcrumbs a:hover {
color: var(--ew-green-700);
}
/* =====================================================================
FAQ (core Details-blocks)
===================================================================== */
.ew-faq .wp-block-details {
background: var(--ew-white);
border: 1px solid var(--ew-line);
border-radius: var(--wp--custom--radius--card, 20px);
padding: 1.1rem 1.4rem;
margin-bottom: .8rem;
transition: border-color .2s;
}
.ew-faq .wp-block-details[open] {
border-color: #CFE3C8;
}
.ew-faq summary {
font-family: var(--wp--preset--font-family--heading);
font-weight: 600;
cursor: pointer;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
min-height: 44px;
}
.ew-faq summary::-webkit-details-marker {
display: none;
}
.ew-faq summary::after {
content: "";
flex: none;
width: 1.1em;
height: 1.1em;
background: var(--ew-green-700);
-webkit-mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
transition: transform .25s var(--ew-ease);
}
.ew-faq .wp-block-details[open] summary::after {
transform: rotate(45deg);
}
.ew-faq .wp-block-details> :not(summary) {
color: var(--ew-slate);
margin-top: .7rem;
max-width: 72ch;
}
/* =====================================================================
Blog
===================================================================== */
.ew-post-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-auto-rows: 1fr;
gap: 1.4rem;
align-items: stretch;
}
.ew-post-card {
background: var(--ew-white);
border: 1px solid var(--ew-line);
border-radius: var(--wp--custom--radius--card, 20px);
overflow: hidden;
transition: transform .3s var(--ew-ease), box-shadow .3s, border-color .3s;
height: 100%;
display: flex;
flex-direction: column;
}
.ew-post-card:hover {
transform: translateY(-5px);
box-shadow: var(--wp--custom--shadow--card);
border-color: #CFE3C8;
}
/* Eén beeldbehandeling voor alle kaarten: de uitgelichte afbeelding van een
blogkaart en de handmatig geplaatste foto's op dienst-, doelgroep- en
keuzekaarten. flex: none is nodig omdat de kaarten kolom-flex zijn; zonder
dat perst de tekst eronder het beeld samen. */
.ew-post-card .wp-block-post-featured-image,
.ew-post-card__foto,
.ew-doelgroepen a .ew-doelgroep__foto,
.ew-keuze__foto,
.ew-regio__foto {
display: block;
aspect-ratio: 16/9;
flex: none;
overflow: hidden;
background: var(--ew-paper-2);
}
.ew-post-card .wp-block-post-featured-image img,
.ew-post-card__foto img,
.ew-doelgroepen a .ew-doelgroep__foto img,
.ew-keuze__foto img,
.ew-regio__foto img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* De doelgroep- en keuzekaarten hebben hun eigen padding; het beeld moet die
negeren en van rand tot rand lopen. De negatieve marges zijn gelijk aan de
padding van de kaart. */
.ew-doelgroepen a .ew-doelgroep__foto {
margin: -1.4rem -1.4rem .9rem;
border-radius: var(--wp--custom--radius--card, 10px) var(--wp--custom--radius--card, 10px) 0 0;
}
.ew-regio__foto {
margin: -1.4rem -1.5rem 1.1rem;
border-radius: var(--wp--custom--radius--card, 10px) var(--wp--custom--radius--card, 10px) 0 0;
}
/* Een keuzekaart is normaal een slanke ankerlink: icoon, tekst, pijl op één
regel. Krijgt hij een foto, dan wordt het een kolomkaart met de foto boven
en tekst plus pijl eronder. Alleen kaarten mét foto veranderen, zodat de
keuzeblokken die geen beeld krijgen hun huidige vorm houden. */
.ew-keuze a:has(.ew-keuze__foto) {
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas:
"foto foto"
"tekst pijl";
align-items: center;
gap: 0;
padding: 0;
overflow: hidden;
}
.ew-keuze a:has(.ew-keuze__foto) .ew-keuze__foto {
grid-area: foto;
}
.ew-keuze a:has(.ew-keuze__foto) > span:not(.ew-keuze__foto) {
grid-area: tekst;
padding: 1rem 0 1.15rem 1.35rem;
}
.ew-keuze a:has(.ew-keuze__foto) > .ew-keuze__arrow {
grid-area: pijl;
margin-right: 1.35rem;
}
.ew-post-card__body {
padding: 1.3rem 1.5rem 1.5rem;
display: flex;
flex-direction: column;
gap: .5rem;
flex: 1;
}
.ew-post-card .wp-block-post-title {
font-size: 1.15rem;
line-height: 1.3;
}
.ew-post-card .wp-block-post-title a {
color: var(--ew-ink);
}
.ew-post-card .wp-block-post-title a:hover {
color: var(--ew-green-700);
}
.ew-post-card .wp-block-post-date {
font-size: .85rem;
color: var(--ew-muted);
}
.ew-post-card .wp-block-post-excerpt {
color: var(--ew-slate);
font-size: .95rem;
}
/* Icoon op kaarten zonder foto (dienst-/sectorkaarten) */
/* =====================================================================
Artikel-typografie (ronde 6) — één definitie, geen concurrerende regels.
De artikelen zijn freeform HTML (geen blokken), dus alle structuur komt
hier vandaan: leesbare regellengte, lucht rond koppen, en visuele
ankerpunten die de lange tekstlopen onderbreken.
===================================================================== */
.ew-prose {
font-size: 1.09rem;
line-height: 1.75;
}
.ew-prose :where(p, h2, h3, ul, ol, table, figure, img) {
margin-left: 0;
margin-right: 0;
}
.ew-prose p {
color: var(--ew-ink);
margin-block: 0 1.15rem;
}
/* Eerste alinea als lead: geeft de lezer een instap in de tekst */
.ew-prose .entry-content>p:first-of-type,
.ew-prose>p:first-of-type {
font-size: 1.22rem;
line-height: 1.6;
color: var(--ew-ink);
margin-bottom: 1.8rem;
}
.ew-prose h2 {
/* Ondergrens zo gekozen dat lange samenstellingen in de smalle mobiele
kolom passen zonder woordafbreking. */
font-size: clamp(1.28rem, 2.6vw, 1.9rem);
margin-block: 2.6rem .8rem;
max-width: 24ch;
}
.ew-prose h3 {
font-size: 1.2rem;
margin-block: 1.8rem .5rem;
}
.ew-prose a {
color: var(--ew-green-700);
text-decoration: underline;
text-underline-offset: 3px;
}
.ew-prose img {
border-radius: var(--wp--custom--radius--card, 10px);
}
/* De opsomming (bijna elk artikel heeft er precies één) als kernpuntenblok:
breekt de tekstloop halverwege het artikel. */
.ew-prose ul {
list-style: none;
padding: 1.3rem 1.5rem;
margin-block: 1.6rem 1.8rem;
background: var(--ew-green-050);
border-radius: var(--wp--custom--radius--card, 10px);
display: grid;
gap: .6rem;
}
.ew-prose ul li {
padding-left: 1.7rem;
position: relative;
}
.ew-prose ul li::before {
content: "";
position: absolute;
left: 0;
top: .35em;
width: 15px;
height: 15px;
background: var(--ew-green-700);
-webkit-mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
.ew-prose ol {
padding-left: 1.3rem;
margin-block: 0 1.15rem;
}
/* Tabellen (54 artikelen bevatten er een, zonder wrapper): leesbaar én
scrollbaar op mobiel in plaats van de layout oprekken. */
.ew-prose table {
display: block;
overflow-x: auto;
width: 100%;
max-width: 100%;
border-collapse: collapse;
margin-block: 1.6rem 1.8rem;
font-size: .97rem;
}
.ew-prose th,
.ew-prose td {
border: 1px solid var(--ew-line);
padding: .7rem .9rem;
text-align: left;
vertical-align: top;
}
.ew-prose th {
background: var(--ew-paper-2);
font-family: var(--wp--preset--font-family--heading);
font-weight: 700;
white-space: nowrap;
}
/* Slotsectie: bijna elk artikel eindigt met een "Hoe EW Security helpt"-kop.
Die krijgt een accent zodat het artikel visueel afsluit richting de CTA. */
.ew-prose .entry-content>h2:last-of-type,
.ew-prose>h2:last-of-type {
padding-top: 1.6rem;
border-top: 2px solid var(--ew-green-050);
}
/* Quick Scan-kader midden in een artikel, overgenomen van de oude site
(58 blogs, 27-10-2026). De blogs zijn klassieke HTML, dus dit is een div
met eigen classes en geen blok: een blokcommentaar zou wpautop uitzetten.
Zelfde vlak als de CTA-band onderaan, maar compact. */
.ew-prose .ew-artikel-cta {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"titel knop"
"tekst knop";
column-gap: 1.5rem;
align-items: center;
margin-block: 2rem 2.2rem;
padding: 1.3rem 1.5rem;
background: var(--ew-green-700);
border-radius: var(--wp--custom--radius--card, 10px);
}
.ew-prose .ew-artikel-cta p {
color: #fff;
max-width: none;
margin: 0;
}
.ew-prose .ew-artikel-cta__titel {
grid-area: titel;
margin-bottom: .25rem !important;
font-family: var(--wp--preset--font-family--heading);
font-weight: 800;
font-size: 1.15rem;
line-height: 1.3;
}
.ew-prose .ew-artikel-cta__tekst {
grid-area: tekst;
font-size: 1rem;
line-height: 1.5;
}
.ew-prose .ew-artikel-cta .wp-block-buttons {
grid-area: knop;
margin: 0;
}
.ew-prose .ew-artikel-cta .wp-block-button__link {
background: #fff;
color: var(--ew-ink-on-green);
text-decoration: none;
white-space: nowrap;
box-shadow: none;
}
.ew-prose .ew-artikel-cta .wp-block-button__link:hover {
background: #f0fded;
}
@media (max-width: 600px) {
.ew-prose .ew-artikel-cta {
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"titel"
"tekst"
"knop";
}
.ew-prose .ew-artikel-cta .wp-block-buttons {
margin-top: 1rem;
}
}
/* =====================================================================
Artikelkop en -beeld (ronde 6)
===================================================================== */
.ew-artikel-kop {
padding-bottom: .6rem;
}
.ew-artikel-kop h1 {
margin-block: .6rem .5rem;
max-width: 22ch;
}
.ew-artikel-cat a {
display: inline-block;
font-family: var(--wp--preset--font-family--heading);
font-size: .8rem;
font-weight: 600;
color: var(--ew-green-700);
background: var(--ew-green-050);
padding: .3rem .8rem;
border-radius: var(--wp--custom--radius--chip, 4px);
text-decoration: none;
}
.ew-artikel-datum {
color: var(--ew-muted);
font-size: .92rem;
margin: 0;
}
.ew-artikel-beeld {
padding-block: .4rem 1.4rem;
}
.ew-artikel-beeld img {
width: 100%;
height: clamp(200px, 34vw, 400px);
object-fit: cover;
border-radius: var(--wp--custom--radius--card, 10px);
display: block;
}
/* =====================================================================
Footer
===================================================================== */
.ew-footer {
/* padding-inline is nodig: WP's constrained layout geeft kinderen alleen een
max-width, dus zonder dit plakt de footertekst op mobiel tegen de rand. */
padding: 4rem var(--ew-pad-x) 2.5rem;
background: var(--ew-white);
border-top: 1px solid var(--ew-line);
}
.ew-footer__grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1.1fr 1.3fr;
gap: 2.5rem;
}
@media (max-width: 1080px) {
.ew-footer__grid {
grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
}
/* Kaart onder de kolommen, over de volle breedte */
.ew-footer__map {
grid-column: 1 / -1;
}
}
@media (max-width: 820px) {
.ew-footer__grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 520px) {
.ew-footer__grid {
grid-template-columns: 1fr;
}
}
.ew-footer h5,
.ew-footer h4,
.ew-footer h2 {
font-family: var(--wp--preset--font-family--heading);
font-size: .78rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ew-muted);
margin-bottom: 1.2rem;
font-weight: 600;
}
.ew-footer ul {
list-style: none;
display: flex;
flex-direction: column;
gap: .7rem;
padding: 0;
margin: 0;
}
.ew-footer a {
color: var(--ew-slate);
font-size: .95rem;
transition: color .2s;
}
.ew-footer a:hover {
color: var(--ew-green-700);
}
.ew-footer__about {
color: var(--ew-muted);
font-size: .95rem;
max-width: 32ch;
}
/* Social-iconen: .ew-footer ul zet de lijst verticaal, hier weer horizontaal. */
.ew-footer .ew-socials {
flex-direction: row;
gap: .5rem;
margin-top: 1.2rem;
}
.ew-socials a {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border: 1px solid var(--ew-line);
border-radius: var(--wp--custom--radius--chip, 8px);
color: var(--ew-slate);
transition: color .2s, border-color .2s, background-color .2s;
}
.ew-socials a:hover,
.ew-socials a:focus-visible {
color: var(--ew-green-700);
border-color: var(--ew-green);
background: var(--ew-green-050);
}
.ew-lidmaatschap {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .8rem 1.2rem;
margin-top: 1.4rem;
}
.ew-keurmerk {
display: inline-block;
background: var(--ew-ink);
border-radius: 4px;
padding: .55rem .8rem;
}
.ew-keurmerk img {
height: 22px;
width: auto;
display: block;
}
.ew-footer a.ew-vbe {
display: inline-flex;
align-items: center;
min-height: 44px;
gap: .55rem;
color: var(--ew-muted);
font-size: .78rem;
text-decoration: none;
}
.ew-vbe img {
height: 30px;
width: auto;
display: block;
}
.ew-footer__reg {
display: block;
margin-top: .3rem;
}
.ew-footer__bottom {
margin-top: 3rem;
padding-top: 1.6rem;
border-top: 1px solid var(--ew-line);
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
color: var(--ew-muted);
font-size: .85rem;
}
/* =====================================================================
Reveal-animatie — alleen met JS actief; content is standaard zichtbaar
===================================================================== */
html.js .ew-reveal {
opacity: 0;
transform: translateY(26px);
transition: opacity .7s var(--ew-ease), transform .7s var(--ew-ease);
}
html.js .ew-reveal.in {
opacity: 1;
transform: none;
}
/* Boven de vouw geen fade: het paneel en de foto van de hero zijn het
LCP-element en mogen niet op opacity 0 beginnen. Alleen de schuif blijft. */
html.js :is(.ew-ph-panel, .ew-ph-photo, .ew-hero__photo).ew-reveal {
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
html.js .ew-reveal {
opacity: 1;
transform: none;
transition: none;
}
*,
*::before,
*::after {
transition-duration: .01ms !important;
animation-duration: .01ms !important;
}
}
/* =====================================================================
Editor-hulp (blok-editor toont secties zonder reveal-verberging)
===================================================================== */
.editor-styles-wrapper .ew-reveal {
opacity: 1 !important;
transform: none !important;
}
/* =====================================================================
Subpagina-hero met foto (ronde 2): donkere band + panel + grote foto
===================================================================== */
.ew-page-hero--photo {
position: relative;
max-width: none;
padding: clamp(1.4rem, 3vw, 2.4rem) 0 clamp(2rem, 4vw, 3rem);
margin-inline: 0;
}
.ew-page-hero--photo::before {
content: "";
position: absolute;
top: calc(-1 * (76px + var(--wp-admin--admin-bar--height, 0px)));
left: 0;
right: 0;
height: calc(62% + 76px);
background: var(--ew-ink);
}
.ew-page-hero--photo>.ew-ph-grid {
position: relative;
display: grid;
grid-template-columns: 1.02fr .98fr;
gap: 1.4rem;
align-items: stretch;
max-width: calc(1200px + 2 * var(--ew-pad-x));
margin-inline: auto !important;
padding-inline: var(--ew-pad-x);
box-sizing: border-box;
}
.ew-page-hero--photo>.ew-ph-grid.ew-ph-grid--zonder-foto {
grid-template-columns: 1fr;
}
@media (max-width: 920px) {
.ew-page-hero--photo>.ew-ph-grid {
grid-template-columns: 1fr;
}
}
.ew-ph-panel {
background: var(--ew-white);
border: 1px solid var(--ew-line);
border-top: 4px solid var(--ew-green);
border-radius: var(--wp--custom--radius--card, 10px);
padding: clamp(1.6rem, 3.2vw, 2.6rem);
display: flex;
flex-direction: column;
justify-content: center;
box-shadow: var(--wp--custom--shadow--panel);
}
.ew-ph-panel>* {
margin-left: 0 !important;
margin-right: 0 !important;
}
.ew-ph-photo {
position: relative;
border-radius: var(--wp--custom--radius--card, 10px);
overflow: hidden;
min-height: clamp(300px, 38vw, 520px);
}
.ew-ph-photo img,
.ew-ph-photo figure,
.ew-ph-photo .wp-block-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
}
.ew-ph-photo img {
object-fit: cover;
}
.ew-ph-photo::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(180deg, transparent 60%, rgba(6, 20, 5, .35) 100%);
}
/* =====================================================================
Reveal-varianten (directioneel) + hero-scale-in
===================================================================== */
html.js .ew-reveal--right {
transform: translateX(34px);
}
html.js .ew-reveal--left {
transform: translateX(-34px);
}
html.js .ew-reveal--right.in,
html.js .ew-reveal--left.in {
transform: none;
}
html.js .ew-hero__photo>img,
html.js .ew-ph-photo img {
transform: scale(1.04);
transition: transform 1.1s var(--ew-ease);
}
html.js .ew-hero__photo.in>img,
html.js .ew-ph-photo.in img,
html.js .ew-reveal.in img {
transform: scale(1);
}
/* =====================================================================
Sectievarianten (ritme) + tweekoloms tekstsecties
===================================================================== */
.ew-section--wit {
background: var(--ew-white);
border-block: 1px solid var(--ew-line);
max-width: none;
}
.ew-section--wit>* {
max-width: calc(1200px - 2 * var(--ew-pad-x));
margin-inline: auto !important;
}
.ew-2kol {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr);
gap: clamp(1.5rem, 4vw, 3.5rem);
align-items: start;
}
@media (max-width: 860px) {
.ew-2kol {
grid-template-columns: 1fr;
}
}
.ew-2kol__tekst>* {
max-width: 62ch;
}
.ew-kernpunten {
position: sticky;
top: calc(96px + var(--wp-admin--admin-bar--height, 0px));
background: var(--ew-ink);
color: var(--ew-on-dark);
border-radius: var(--wp--custom--radius--band, 12px);
padding: 1.6rem 1.7rem;
overflow: hidden;
}
.ew-kernpunten::before {
content: "";
position: absolute;
inset: 0;
background: none;
}
.ew-kernpunten>* {
position: relative;
}
.ew-kernpunten :is(h2, h3) {
color: #fff;
font-size: 1.05rem;
margin-bottom: .8rem;
}
.ew-kernpunten ul {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: .65rem;
}
.ew-kernpunten li {
padding-left: 1.6rem;
position: relative;
font-size: .95rem;
color: #C9D8C4;
}
/* Links erven anders de (bijna zwarte) globale linkkleur — onleesbaar op deze
donkere kaart. */
.ew-kernpunten a {
color: #fff;
text-decoration: underline;
text-underline-offset: 3px;
}
.ew-kernpunten a:hover {
color: var(--ew-green);
}
.ew-kernpunten li::before {
content: "";
position: absolute;
left: 0;
top: .28em;
width: 15px;
height: 15px;
background: var(--ew-green);
-webkit-mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
@media (prefers-reduced-motion: reduce) {
.ew-clients__dup {
display: none;
}
}
/* =====================================================================
Automatisch sectieritme: om en om een wit bandvlak (volle breedte)
===================================================================== */
main .ew-section:nth-of-type(even):not(.ew-section--geen-band):not(:has(> .ew-cta)):not(:has(> .ew-values)) {
max-width: none;
background: var(--ew-white);
border-block: 1px solid var(--ew-line);
padding-inline: max(var(--ew-pad-x), calc((100% - 1200px) / 2));
padding-block: clamp(2rem, 3.6vw, 3rem);
}
/* Mobiel: gridkolommen mogen krimpen; lange samenstellingen breken netjes af */
.ew-ph-grid>*,
.ew-2kol>*,
.ew-hero__grid>* {
min-width: 0;
}
/* Woorden mogen nooit midden doorbreken (geen losse letter op de volgende regel);
lange samenstellingen springen als geheel naar de volgende regel. */
.ew-ph-panel h1,
.ew-page-hero h1,
.ew-sec-head h2 {
overflow-wrap: normal;
word-break: normal;
}
/* Het foto-hero-paneel is een smalle kolom; daar past de algemene h1-schaal
niet. Deze schaal is zo gekozen dat het langste zoekwoord
("Brandveiligheidsadvies", 22 tekens) op elke breedte binnen de kolom valt. */
.ew-ph-panel h1 {
font-size: clamp(1.4rem, 2.9vw, 2.4rem);
margin-block: .8rem .9rem;
/* De erfelijke max-width: 18ch is smaller dan een woord als
"Brandveiligheidsadvies" (22 tekens) — dat gaf de uitloop. Het paneel
begrenst de breedte al. */
max-width: none;
}
@media (max-width: 920px) {
.ew-ph-panel {
padding: clamp(1.3rem, 4vw, 2rem);
}
}
/* Ronde 3: rust en leesbaarheid */
.ew-2kol__tekst>*,
.ew-section>p,
.ew-section>ul,
.ew-section>ol {
max-width: 68ch;
}
.ew-2kol__tekst p {
color: var(--ew-ink);
}
/* Breadcrumbs onder de header (ronde 3): licht op gewone pagina's,
donker doorlopend met de heroband op foto-hero-pagina's. */
.ew-breadcrumbs--band {
margin: 0;
padding: .5rem 0 .7rem;
font-size: .85rem;
color: var(--ew-slate);
position: relative;
/* boven de ::before-overlay van de foto-hero */
z-index: 1;
}
.ew-breadcrumbs--band .ew-breadcrumbs {
/* Zelfde as als .ew-header__bar en de paginacontent: "Home" begint exact
onder het logo. box-sizing is nodig, anders telt de padding bij de
max-width op en schuift de tekst 40px naar links. */
box-sizing: border-box;
max-width: 1280px;
margin-inline: auto;
margin-bottom: 0;
padding-inline: var(--ew-pad-x);
font-size: inherit;
color: inherit;
}
.ew-breadcrumbs--band p {
margin: 0;
color: inherit;
}
.ew-breadcrumbs--band a {
color: var(--ew-green-700);
/* Onderstreping is nodig: kleurcontrast met de omringende tekst haalt de
3:1-eis van link-in-text-block niet. */
text-decoration: underline;
text-underline-offset: 2px;
}
.ew-breadcrumbs--band .separator {
opacity: .6;
margin: 0 .3em;
}
body:has(.ew-page-hero--photo) .ew-breadcrumbs--band {
background: var(--ew-ink);
color: var(--ew-on-dark-muted);
}
body:has(.ew-page-hero--photo) .ew-breadcrumbs--band a {
color: var(--ew-on-dark);
}
body:has(.ew-page-hero--photo) .ew-breadcrumbs--band a:hover {
color: #fff;
}
/* WP's blockGap zet standaard margin-block-start: 1.2rem op elk flow-kind; de
band regelt haar eigen ruimte via padding, dus die extra marge mag altijd weg. */
.ew-breadcrumbs--band+.wp-block-post-content {
margin-block-start: 0;
}
/* Keuzekaarten: doelgroepkeuze bovenaan een dienstpagina (ronde 3) */
.ew-keuze {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1rem;
}
.ew-keuze a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
background: #fff;
border: 1.5px solid var(--wp--preset--color--line, #E3EADF);
border-radius: 10px;
padding: 1.15rem 1.35rem;
text-decoration: none;
color: inherit;
transition: border-color .2s, transform .2s cubic-bezier(.2, .7, .3, 1);
}
.ew-keuze a:hover {
border-color: var(--wp--preset--color--green, #58BB47);
transform: translateY(-2px);
}
.ew-keuze strong {
font-family: var(--wp--preset--font-family--heading);
font-weight: 700;
font-size: 1.08rem;
display: block;
margin-bottom: .15rem;
color: var(--wp--preset--color--ink, #12200E);
}
.ew-keuze .ew-keuze__sub {
color: var(--wp--preset--color--slate, #4A5A46);
font-size: .95rem;
}
.ew-keuze .ew-keuze__arrow {
color: var(--wp--preset--color--green-700, #2E7D32);
flex: none;
}
.ew-keuze__ico {
width: 40px;
height: 40px;
flex: none;
border-radius: 8px;
background: var(--wp--preset--color--green-050, #EEF8EB);
color: var(--wp--preset--color--green-700, #2E7D32);
display: grid;
place-items: center;
}
.ew-keuze__ico svg {
width: 20px;
height: 20px;
}
.ew-keuze a>span:first-child {
display: flex;
align-items: center;
gap: .9rem;
}
@media (prefers-reduced-motion: reduce) {
.ew-keuze a {
transition: none;
}
}
/* Fotokolom in de 2kol (ronde 3): zelfde plek als de kernpuntenkaart, maar met beeld */
.ew-2kol__foto {
position: sticky;
top: 96px;
}
.ew-2kol__foto img {
width: 100%;
height: auto;
border-radius: var(--wp--custom--radius--card, 10px);
display: block;
}
@media (max-width: 860px) {
.ew-2kol__foto {
position: static;
}
}
/* =====================================================================
Pijlerkeuze-modal (ronde 4) — snelle richtingkeuze op de homepage
===================================================================== */
/* Volledig CSS-gedreven open/sluit-animatie (@starting-style): geen JS-timing
(requestAnimationFrame) nodig, dus de modal kan nooit "onzichtbaar open"
blijven hangen als een animatieframe een keer niet op tijd komt. */
.ew-pijler-modal {
border: none;
/* Zonder border-box telt de padding bij de max-width op en past de dialog
niet meer op een 390px-scherm. */
box-sizing: border-box;
border-radius: var(--wp--custom--radius--band, 20px);
padding: clamp(1.8rem, 4vw, 2.6rem);
max-width: min(480px, calc(100vw - 2.5rem));
width: 100%;
box-shadow: var(--wp--custom--shadow--frame);
opacity: 1;
transform: translateY(0) scale(1);
transition: opacity .28s var(--ew-ease), transform .28s var(--ew-ease), overlay .28s allow-discrete, display .28s allow-discrete;
}
.ew-pijler-modal:not([open]) {
opacity: 0;
transform: translateY(14px) scale(.98);
}
@starting-style {
.ew-pijler-modal[open] {
opacity: 0;
transform: translateY(14px) scale(.98);
}
}
.ew-pijler-modal::backdrop {
background: rgba(10, 20, 8, .55);
opacity: 1;
transition: opacity .28s var(--ew-ease), overlay .28s allow-discrete, display .28s allow-discrete;
}
@starting-style {
.ew-pijler-modal[open]::backdrop {
opacity: 0;
}
}
.ew-pijler-modal__close-form {
position: absolute;
top: .9rem;
right: .9rem;
margin: 0;
}
.ew-pijler-modal__close {
width: 44px;
height: 44px;
display: grid;
place-items: center;
border-radius: 50%;
border: 1px solid var(--ew-line);
background: var(--ew-white);
color: var(--ew-slate);
cursor: pointer;
transition: color .2s, border-color .2s;
}
.ew-pijler-modal__close:hover {
color: var(--ew-green-700);
border-color: var(--ew-green);
}
.ew-pijler-modal h2 {
font-size: clamp(1.3rem, 3vw, 1.6rem);
margin: 0 0 .5rem;
padding-right: 2rem;
}
.ew-pijler-modal__lead {
color: var(--ew-slate);
margin: 0 0 1.5rem;
}
.ew-pijler-modal__opties {
display: grid;
grid-template-columns: 1fr 1fr;
gap: .9rem;
margin-bottom: 1.2rem;
}
@media (max-width: 480px) {
.ew-pijler-modal__opties {
grid-template-columns: 1fr;
}
}
.ew-pijler-modal__optie {
display: flex;
flex-direction: column;
align-items: center;
gap: .7rem;
text-align: center;
padding: 1.4rem 1rem;
border: 1.5px solid var(--ew-line);
border-radius: var(--wp--custom--radius--card, 14px);
text-decoration: none;
color: var(--ew-ink);
font-family: var(--wp--preset--font-family--heading);
font-weight: 700;
transition: border-color .2s, background .2s, transform .2s var(--ew-ease);
}
.ew-pijler-modal__optie:hover {
border-color: var(--ew-green);
background: var(--ew-green-050);
transform: translateY(-2px);
}
.ew-pijler-modal__ico {
width: 44px;
height: 44px;
border-radius: 10px;
background: linear-gradient(150deg, var(--ew-green), var(--ew-green-700));
color: #fff;
display: grid;
place-items: center;
}
.ew-pijler-modal__ico svg {
width: 22px;
height: 22px;
}
.ew-pijler-modal__skip {
display: block;
margin: 0 auto;
background: none;
border: none;
color: var(--ew-muted);
font-size: .9rem;
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
min-height: 44px;
padding: .5rem 1rem;
}
.ew-pijler-modal__skip:hover {
color: var(--ew-green-700);
}
@media (prefers-reduced-motion: reduce) {
.ew-pijler-modal,
.ew-pijler-modal::backdrop {
transition: none;
}
}
/* =====================================================================
Pakketkaarten (beheer-BMI, ronde 5) — Standaard uitgelicht
===================================================================== */
.ew-pakketten {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.4rem;
align-items: stretch;
}
.ew-pakket {
position: relative;
display: flex;
flex-direction: column;
background: var(--ew-white);
border: 1px solid var(--ew-line);
border-radius: var(--wp--custom--radius--card, 10px);
padding: 1.8rem 1.7rem;
transition: transform .3s var(--ew-ease), box-shadow .3s;
}
.ew-pakket:hover {
transform: translateY(-4px);
box-shadow: var(--wp--custom--shadow--card);
}
.ew-pakket h3 {
font-size: 1.25rem;
margin: 0 0 .3rem;
}
.ew-pakket__sub {
color: var(--ew-slate);
font-size: .92rem;
margin: 0 0 1.1rem;
}
.ew-pakket ul {
list-style: none;
padding: 0;
margin: 0 0 1.4rem;
display: grid;
gap: .55rem;
flex: 1;
align-content: start;
}
.ew-pakket .wp-block-button__link {
justify-content: center;
/* Hoogte volgt de inhoud, net als elke andere knop op de site. */
flex: 0 0 auto;
height: auto;
min-height: 0;
align-self: stretch;
}
.ew-pakket li {
padding-left: 1.5rem;
position: relative;
font-size: .95rem;
}
.ew-pakket li::before {
content: "";
position: absolute;
left: 0;
top: .3em;
width: 14px;
height: 14px;
background: var(--ew-green-700);
-webkit-mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
/* Uitgelicht pakket: donkergroen, badge, subtiel verhoogd */
.ew-pakket--uitgelicht {
background: var(--ew-ink);
border-color: var(--ew-green-700);
color: var(--ew-on-dark);
box-shadow: var(--wp--custom--shadow--panel);
overflow: hidden;
}
@media (min-width: 861px) {
.ew-pakket--uitgelicht {
transform: scale(1.04);
z-index: 1;
}
.ew-pakket--uitgelicht:hover {
transform: scale(1.04) translateY(-4px);
}
}
.ew-pakket--uitgelicht::before {
content: "";
position: absolute;
inset: 0;
background: none;
pointer-events: none;
}
.ew-pakket--uitgelicht > * {
position: relative;
}
.ew-pakket--uitgelicht h3 {
color: #fff;
}
.ew-pakket--uitgelicht .ew-pakket__sub {
color: var(--ew-on-dark-muted);
}
.ew-pakket--uitgelicht li {
color: var(--ew-on-dark);
}
.ew-pakket--uitgelicht li::before {
background: var(--ew-green);
}
.ew-pakket__badge {
position: absolute;
top: 1.1rem;
right: 1.1rem;
background: var(--ew-green);
color: var(--ew-ink-on-green);
font-family: var(--wp--preset--font-family--heading);
font-weight: 700;
font-size: .72rem;
letter-spacing: .08em;
text-transform: uppercase;
padding: .3rem .7rem;
border-radius: var(--wp--custom--radius--chip, 4px);
z-index: 2;
}
/* Kaart als eigen footerkolom, naast contact (ronde 6) */
.ew-footer__map {
min-height: 200px;
}
.ew-footer__map iframe {
display: block;
width: 100%;
height: 100%;
min-height: 200px;
border: 0;
border-radius: var(--wp--custom--radius--card, 10px);
filter: grayscale(.2);
}
/* Grote kaart op de contactpagina */
.ew-contact-kaart iframe {
display: block;
width: 100%;
height: clamp(280px, 38vw, 420px);
border: 0;
border-radius: var(--wp--custom--radius--card, 10px);
}
/* Foto onderin de kernpuntenkaart (quickscan-zijkolom, ronde 5) */
.ew-kernpunten__foto {
display: block;
width: 100%;
height: 160px;
object-fit: cover;
border-radius: 8px;
margin-top: 1.2rem;
}
/* =====================================================================
Kaarten volledig klikbaar (ronde 5): de titel-link vult de hele kaart,
zodat ook de beschrijving en witruimte klikbaar zijn.
===================================================================== */
.ew-post-card:has(h3 a) {
position: relative;
}
.ew-post-card h3 a::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
/* Losse links binnen de kaart moeten boven de stretched link blijven */
.ew-post-card__body a:not(h3 a) {
position: relative;
z-index: 2;
}
/* Regiokaarten met plaatsnaam-chips (werkgebied + over-ons, ronde 5) */
.ew-regios {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.2rem;
}
.ew-regio {
background: var(--ew-white);
border: 1px solid var(--ew-line);
border-radius: var(--wp--custom--radius--card, 10px);
padding: 1.4rem 1.5rem;
}
.ew-regio h3 {
font-size: 1.05rem;
margin: 0 0 .8rem;
}
.ew-regio .ew-tags {
gap: .4rem;
}
.ew-regio .ew-tags a {
color: var(--ew-green-700);
text-decoration: none;
}
.ew-regio .ew-tags a:hover {
text-decoration: underline;
}
/* Doelgroepenband op de homepage (ronde 5) */
.ew-doelgroepen {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}
.ew-doelgroepen a {
display: flex;
flex-direction: column;
gap: .35rem;
padding: 1.4rem 1.4rem 1.5rem;
background: var(--ew-white);
border: 1px solid var(--ew-line);
border-radius: var(--wp--custom--radius--card, 10px);
text-decoration: none;
color: inherit;
transition: border-color .2s, transform .2s var(--ew-ease), box-shadow .2s;
}
.ew-doelgroepen a:hover {
border-color: var(--ew-green);
transform: translateY(-3px);
box-shadow: var(--wp--custom--shadow--card);
}
.ew-doelgroep__ico {
width: 40px;
height: 40px;
border-radius: 8px;
background: var(--ew-green-050);
color: var(--ew-green-700);
display: grid;
place-items: center;
margin-bottom: .5rem;
}
.ew-doelgroep__ico svg {
width: 20px;
height: 20px;
}
.ew-doelgroepen strong {
font-family: var(--wp--preset--font-family--heading);
font-weight: 700;
font-size: 1.02rem;
}
.ew-doelgroep__sub {
color: var(--ew-slate);
font-size: .92rem;
}
@media (prefers-reduced-motion: reduce) {
.ew-doelgroepen a { transition: none; }
}
/* =====================================================================
Reviews (ronde 5) — Google-stijl kaarten; vervangt de losse testimonial
===================================================================== */
.ew-reviews {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.4rem;
}
.ew-review {
background: var(--ew-white);
border: 1px solid var(--ew-line);
border-radius: var(--wp--custom--radius--card, 10px);
padding: 1.7rem 1.8rem;
display: flex;
flex-direction: column;
}
.ew-review blockquote {
border: 0;
margin: 0 0 1.3rem;
padding: 0;
font-size: 1.02rem;
line-height: 1.65;
color: var(--ew-ink);
flex: 1;
}
.ew-review__wie {
display: flex;
align-items: center;
gap: .8rem;
}
.ew-review cite {
display: block;
font-style: normal;
font-family: var(--wp--preset--font-family--heading);
font-weight: 600;
font-size: .95rem;
color: var(--ew-ink);
}
.ew-review small {
color: var(--ew-muted);
font-size: .85rem;
}
/* Kopregel met de Google-score naast de titel (ronde 6) */
.ew-reviews__kop {
display: flex;
align-items: end;
justify-content: space-between;
gap: 1.2rem;
flex-wrap: wrap;
margin-bottom: 1.4rem;
}
.ew-reviews__kop h2 {
margin: 0;
}
.ew-reviews__score {
display: flex;
align-items: center;
gap: .5rem;
margin: .5rem 0 0;
color: var(--ew-slate);
}
.ew-reviews__score .ew-stars {
margin: 0;
}
.ew-reviews__score strong {
color: var(--ew-ink);
}
/* Links in lopende tekst: onderstreept, want kleur alleen haalt 3:1 niet */
main :where(p, li):not(.ew-keuze__sub) > a:not(.wp-block-button__link) {
text-decoration: underline;
text-underline-offset: 3px;
}
/* Losstaand beeld tussen tekstsecties (ronde 5) */
.ew-beeld {
margin: 0;
}
.ew-beeld img {
display: block;
width: 100%;
height: clamp(220px, 32vw, 380px);
object-fit: cover;
border-radius: var(--wp--custom--radius--card, 10px);
}
/* =====================================================================
Sectie die een full-bleed band draagt (ronde 6)
De sectie loopt vol (100% = breedte van main, dus zónder scrollbar — géén
100vw, dat gaf 7px overflow); de band binnenin bepaalt de contentas.
===================================================================== */
main .ew-section:has(> .ew-cta),
main .ew-section:has(> .ew-values) {
max-width: none;
padding-inline: 0;
}
/* =====================================================================
Artikel als gecentreerde leeskolom (ronde 6)
Kop, beeld en tekst delen dezelfde as; de CTA blijft volle breedte.
===================================================================== */
main .ew-artikel-kop,
main .ew-artikel-beeld,
main .ew-artikel-body {
max-width: calc(820px + 2 * var(--ew-pad-x));
}
.ew-prose p,
.ew-prose ol {
max-width: 68ch;
}
/* =====================================================================
Categoriechips op de kennisbank en de categorie-archieven (ronde 6)
===================================================================== */
.ew-catchips {
display: flex;
flex-wrap: wrap;
gap: .5rem;
margin-bottom: 1.6rem;
}
.ew-catchips a {
display: inline-flex;
align-items: center;
gap: .4rem;
font-family: var(--wp--preset--font-family--heading);
font-size: .88rem;
font-weight: 600;
color: var(--ew-slate);
background: var(--ew-white);
border: 1px solid var(--ew-line);
padding: .5rem 1rem;
border-radius: var(--wp--custom--radius--chip, 4px);
text-decoration: none;
transition: border-color .2s, color .2s, background .2s;
}
.ew-catchips a:hover {
border-color: var(--ew-green);
color: var(--ew-green-700);
}
.ew-catchips a[aria-current="page"] {
background: var(--ew-green-700);
border-color: var(--ew-green-700);
color: #fff;
}
.ew-catchips a span {
font-size: .78rem;
/* Geen opacity: dat bracht het contrast op 3,5:1 (eis is 4,5:1). */
color: var(--ew-slate);
}
.ew-catchips a[aria-current="page"] span {
color: var(--ew-on-dark);
}
/* Blogkaarten gebruiken h2 voor de titel; de stretched link moet daar ook
werken (stond alleen op h3). */
.ew-post-card:has(h2 a) {
position: relative;
}
.ew-post-card h2 a::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
/* Kaarttitels: eigen schaal zodat lange samenstellingen
("brandveiligheidsmaatregelen", 27 tekens) in de smalle kaart passen
zonder woordafbreking. */
.ew-post-card :is(h2, h3),
.ew-post-card .wp-block-post-title {
font-size: clamp(1rem, 1.4vw + .6rem, 1.15rem);
line-height: 1.3;
}
/* =====================================================================
Tikdoelen op mobiel/tablet (ronde 6)
Links die als tekst zijn opgemaakt hebben te weinig aanraakoppervlak;
hier krijgen ze minstens ~44px zonder dat de layout verschuift.
===================================================================== */
@media (max-width: 1080px) {
.ew-header__phone {
min-height: 44px;
display: inline-flex;
align-items: center;
padding-inline: .4rem;
}
.ew-footer__menu a {
display: inline-flex;
align-items: center;
min-height: 40px;
}
.ew-footer__menu {
gap: .2rem;
}
.ew-regio .ew-tags a,
.ew-catchips a {
min-height: 40px;
display: inline-flex;
align-items: center;
}
.ew-regio .ew-tags span:has(a) {
padding-block: 0;
}
.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
min-width: 44px;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
}
/* =====================================================================
Blokritme (ronde 7)
De verticale ruimte zit op de blokken zelf, niet op een generieke
sectie- of layout-wrapper. Elk blok hieronder opent visueel een eigen
vlak en houdt daarom afstand tot wat eraan voorafgaat.
===================================================================== */
.ew-sec-head,
.ew-values,
.ew-cta,
.ew-statbar,
.ew-reviews__kop,
.ew-seg-grid,
.ew-post-grid,
.ew-doelgroepen,
.ew-regios,
.ew-keuze,
.ew-pakketten,
.ew-2kol,
.ew-beeld,
.ew-faq,
.ew-team,
.ew-vacatures,
.ewsec-quiz,
.ewsec-contact {
margin-block-start: var(--ew-blokruimte);
}
/* Sectiekop gevolgd door zijn eigen inhoud: die hoort strak aaneen. */
.ew-sec-head + * {
margin-block-start: 1.1rem;
}
/* Secties die met een kale kop of alinea beginnen (zonder .ew-sec-head-wrapper)
krijgen dezelfde blokruimte; anders plakken ze aan de sectie erboven. */
.ew-section > :is(h2, h3, p, ul, ol):first-child {
margin-block-start: var(--ew-blokruimte);
}
/* Binnen kolommen en de hero telt de blokruimte niet: die blokken staan
niet ná een ander vlak. (Bewust NIET .ew-section > :first-child — dan
zou juist de ruimte tússen secties wegvallen.) */
.ew-page-hero > :first-child,
.ew-2kol > :first-child,
.ew-2kol__tekst > :first-child,
.ew-kernpunten > :first-child {
margin-block-start: 0;
}
/* Afsluitende ruimte vóór de footer. Let op: op de meeste pagina's zitten de
secties in een .entry-content-wrapper, dus geen `main >`-selector gebruiken. */
main .ew-section:last-child,
main .ew-hero:last-child {
padding-bottom: var(--ew-blokruimte);
}
/* Banden met een eigen achtergrond brengen hun padding al mee; die hoeven
niet ook nog eens de volle blokruimte erboven. */
main .ew-section:nth-of-type(even):not(.ew-section--geen-band):not(:has(> .ew-cta)):not(:has(> .ew-values)) > :first-child {
margin-block-start: 0;
}
/* Het allereerste blok onder de hero springt niet extra in (staat bewust na
de blokritme-regels zodat deze uitzondering wint). */
.ew-page-hero + .ew-section > :first-child,
.ew-hero + .ew-section > :first-child {
margin-block-start: 0;
}
/* "Website door"-credit in de footer-onderbalk */
.ew-madeby {
display: inline-flex;
align-items: center;
min-height: 44px;
gap: .5rem;
text-decoration: none;
color: var(--ew-muted);
font-size: .85rem;
opacity: .85;
transition: opacity .2s;
}
.ew-madeby:hover {
opacity: 1;
}
.ew-madeby img {
height: 22px;
width: auto;
display: block;
}
/* =====================================================================
Mobiel menu (overlay) — ronde 7
WP's standaardoverlay centreert alles en laat de desktop-dropdownkaarten
(wit vlak + schaduw) doorlekken. Hier een eigen, rustige opzet: donker
vlak, links uitgelijnd, hoofditems als kop en subitems als lijst.
===================================================================== */
.ew-header .wp-block-navigation__responsive-container.is-menu-open {
padding: 0;
}
.ew-header .wp-block-navigation__responsive-container.is-menu-open::before {
content: "";
position: absolute;
inset: 0;
background: none;
pointer-events: none;
}
/* Kop van de overlay: sluitknop rechts, op dezelfde hoogte als de header */
.ew-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
position: relative;
padding: 0 var(--ew-pad-x) 2rem;
margin-top: 0;
}
.ew-header .wp-block-navigation__responsive-container-close {
top: 14px;
right: calc(var(--ew-pad-x) - 8px);
color: #fff;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, .25);
padding: 8px;
}
.ew-header .wp-block-navigation__responsive-container-close:hover {
background: rgba(255, 255, 255, .1);
}
/* Menu links uitlijnen en over de volle breedte */
.ew-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
display: block;
padding-top: 76px;
gap: 0;
}
.ew-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
display: block;
width: 100%;
}
.ew-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
display: flex;
align-items: center;
justify-content: flex-start;
text-align: left;
width: 100%;
min-height: 52px;
padding: .2rem 0 !important;
font-family: var(--wp--preset--font-family--heading);
font-size: 1.35rem;
font-weight: 700;
color: #fff !important;
border-radius: 0;
}
/* Scheidingslijn tussen de hoofdgroepen */
.ew-header .wp-block-navigation__responsive-container.is-menu-open > .wp-block-navigation__responsive-dialog .wp-block-navigation__container > .wp-block-navigation-item + .wp-block-navigation-item {
border-top: 1px solid rgba(255, 255, 255, .12);
margin-top: .3rem;
padding-top: .3rem;
}
/* Submenu: geen kaart, geen schaduw — gewoon een ingesprongen lijst */
.ew-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 0 .6rem !important;
width: 100%;
position: static;
opacity: 1;
visibility: visible;
}
.ew-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
min-height: 44px;
font-size: 1rem;
font-weight: 500;
color: var(--ew-on-dark-muted) !important;
padding-left: 0 !important;
}
.ew-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
color: #fff !important;
background: transparent;
}
/* Pijltje van de submenu-toggle netjes rechts */
.ew-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
display: none;
}
/* Logo en contactblok in het mobiele menu (gekloond uit de header).
Ze staan in de dialog-wrapper, die op desktop óók bestaat — daarom
standaard verborgen en alleen zichtbaar in de geopende overlay. */
.ew-menu-logo,
.ew-menu-extra {
display: none;
}
.wp-block-navigation__responsive-container.is-menu-open .ew-menu-logo,
.wp-block-navigation__responsive-container.is-menu-open .ew-menu-extra {
display: flex;
}
.ew-menu-logo {
position: absolute;
top: 16px;
left: var(--ew-pad-x);
align-items: center;
gap: .65rem;
text-decoration: none;
z-index: 1;
}
.ew-menu-logo .ew-logo__txt {
color: #fff;
}
.ew-menu-extra {
flex-direction: column;
gap: .9rem;
margin-top: 2rem;
padding-top: 1.6rem;
border-top: 1px solid rgba(255, 255, 255, .12);
}
.ew-menu-extra .wp-block-button__link {
justify-content: center;
background: var(--ew-green);
color: var(--ew-ink-on-green);
}
.ew-menu-extra .ew-header__phone {
color: #fff;
justify-content: center;
min-height: 48px;
border: 1px solid rgba(255, 255, 255, .25);
border-radius: var(--wp--custom--radius--pill, 6px);
display: inline-flex;
align-items: center;
gap: .5rem;
}
.ew-menu-extra .ew-header__phone::before {
background: var(--ew-green-on-dark);
}
.ew-menu-extra .ew-header__phone span {
display: inline !important;
}
/* Mobiel/tablet: hamburger hoort rechts, niet midden. Het navigatieblok is op
desktop de gecentreerde menubalk (flex: 1), maar onder 1080px is het alleen
nog de openknop — die schuift naar het einde van de rij. */
@media (max-width: 1080px) {
.ew-header__bar .wp-block-navigation {
flex: none;
order: 3;
justify-content: flex-end;
}
.ew-header__cta-group {
order: 2;
margin-left: auto;
}
}
/* =====================================================================
Footer op mobiel/tablet (ronde 7)
Vijf kolommen onder elkaar maakten de footer bijna 1900px hoog. De
linklijsten staan nu naast elkaar en de regelafstand is compacter.
===================================================================== */
@media (max-width: 820px) {
.ew-footer {
padding-top: 2.5rem;
}
.ew-footer__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.8rem 1.4rem;
}
.ew-footer__menu a {
hyphens: auto;
}
/* Bedrijfsblok en kaart over de volle breedte, de twee menu's naast elkaar */
.ew-footer__grid > :first-child,
.ew-footer__map {
grid-column: 1 / -1;
}
.ew-footer__menu a {
min-height: 36px;
}
.ew-footer__menu {
gap: .1rem;
}
.ew-footer h2 {
margin-bottom: .2rem;
}
.ew-footer__map iframe {
height: 170px;
min-height: 0;
}
.ew-footer__bottom {
margin-top: 2rem;
flex-direction: column;
align-items: flex-start;
gap: .8rem;
}
}
@media (max-width: 420px) {
.ew-footer__grid {
gap: 1.6rem 1rem;
}
}
@media (max-width: 359px) {
.ew-footer__grid {
grid-template-columns: minmax(0, 1fr);
}
}
/* =====================================================================
Ronde 8: review-fixes (impeccable-audit en -critique, 23-09-2026)
===================================================================== */
/* Submenupijltjes waren inkt op de inktkleurige header en dus onzichtbaar. */
body:has(.ew-hero, .ew-page-hero--photo) .ew-header:not(.scrolled) .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-icon {
color: var(--ew-on-dark);
}
/* Focusring op donkere en groene vlakken: green-700 valt daar weg. */
body:has(.ew-hero, .ew-page-hero--photo) .ew-header:not(.scrolled) :focus-visible,
body:has(.ew-page-hero--photo) .ew-breadcrumbs--band :focus-visible,
.wp-block-navigation__responsive-container.is-menu-open :focus-visible,
.ew-cta :focus-visible,
.ew-artikel-cta :focus-visible,
.ew-values :focus-visible,
.ew-kernpunten :focus-visible,
.ew-pakket--uitgelicht :focus-visible {
outline-color: var(--ew-green-on-dark);
}
/* Actieve menutak: de bezoeker ziet waar hij is. */
.ew-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item:is(.ew-actief, :has(> a[aria-current="page"])) > .wp-block-navigation-item__content {
text-decoration: underline;
text-decoration-color: var(--ew-green);
text-decoration-thickness: 2px;
text-underline-offset: 8px;
}
/* Kophiërarchie: op pagina's met een foto-hero volgt de H1 de smalle
paneelschaal (max 2.4rem), terwijl de algemene H2 tot 2.8rem liep. Daar
krijgt de H2 een eigen schaal, zodat de paginatitel de grootste kop blijft. */
body:has(.ew-page-hero--photo) main h2 {
font-size: clamp(1.55rem, 1.4vw + 1rem, 2.1rem);
}
/* Lange samenstellingen in de H1 ("Evenementenbeveiliging") passen op de
smalste schermen niet op één regel: daar breken ze met een koppelteken,
nooit midden in een lettergreep zonder streepje. */
@media (max-width: 400px) {
main h1 {
hyphens: auto;
-webkit-hyphens: auto;
/* Vangnet voor browsers zonder Nederlands afbreekwoordenboek: liever een
afgebroken woord dan een pagina die breder wordt dan het scherm. */
overflow-wrap: break-word;
}
}
/* Artikeltitel: core zet word-break: break-word op de post-title, waardoor
"brandmeldinstallatie" op mobiel midden in het woord afbrak. */
.ew-artikel-kop h1.wp-block-post-title {
word-break: normal;
overflow-wrap: normal;
hyphens: auto;
-webkit-hyphens: auto;
font-size: clamp(1.7rem, 4.5vw + .6rem, 3.4rem);
}
/* Footer: het adres stond in de standaard tekststijl, groter en donkerder
dan de links eromheen. */
.ew-footer__menu li {
color: var(--ew-slate);
font-size: .95rem;
}
/* Kaarten zijn als geheel klikbaar; de focusring hoort dan om de kaart. */
.ew-post-card:has(a:focus-visible) {
outline: 2px solid var(--ew-green-700);
outline-offset: 3px;
}
.ew-post-card a:focus-visible {
outline: none;
}
/* Alleen het telefoonicoon in de header (tekst verborgen onder 1200px):
minstens 44 bij 44 om op te tikken. */
@media (max-width: 1200px) {
.ew-header__phone {
min-width: 44px;
min-height: 44px;
justify-content: center;
}
}
/* Quick Scan-pagina op mobiel: het formulier is de reden van het bezoek.
De hero-foto duwde het anderhalf scherm omlaag. */
@media (max-width: 720px) {
body:has(.ewsec-quiz) .ew-ph-photo {
display: none;
}
}
/* Mobiel menu: Quick Scan en telefoon bovenaan, submenu's ingeklapt tot je
erop tikt. Het menu was volledig uitgeklapt bijna 2000px hoog. */
.wp-block-navigation__responsive-container.is-menu-open .ew-menu-extra {
margin: 1.2rem 0 .4rem;
padding: 0 0 1.4rem;
border-top: 0;
border-bottom: 1px solid rgba(255, 255, 255, .12);
}
/* Core centreert de menukolom en laat hem krimpen tot de tekstbreedte; de
items horen over de volle breedte, met de uitklapknop rechts. De ruimte
boven de lijst was voor het logo, dat nu boven de extra's staat. */
.ew-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
align-items: stretch;
}
.ew-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
width: 100%;
padding-top: 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
padding-right: 56px !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child {
position: relative;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child:not(.ew-open) > .wp-block-navigation__submenu-container {
display: none !important;
}
.ew-submenu-knop {
display: none;
}
.wp-block-navigation__responsive-container.is-menu-open .ew-submenu-knop {
position: absolute;
top: 7px;
right: 0;
display: grid;
place-items: center;
width: 44px;
height: 44px;
padding: 0;
border: 1px solid rgba(255, 255, 255, .2);
border-radius: var(--wp--custom--radius--chip, 4px);
background: transparent;
color: var(--ew-on-dark);
cursor: pointer;
}
.ew-submenu-knop svg {
width: 18px;
height: 18px;
transition: transform .25s var(--ew-ease);
}
.ew-open > .ew-submenu-knop svg {
transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
.ew-submenu-knop svg {
transition: none;
}
}
/* Smalste telefoons (320px): de headerrij (logo, telefoon, menu) was 352px
breed sinds het telefoonicoon een tikvlak van 44px kreeg. */
@media (max-width: 380px) {
.ew-header__bar {
gap: .6rem;
}
.ew-header__cta-group {
gap: .4rem;
}
.ew-header .ew-header__phone {
box-sizing: border-box;
padding-inline: 0;
}
.ew-header .ew-logo__txt {
font-size: 1rem;
}
}
/* Submenupijltje op desktop was een tikvlak van 9 bij 9. Een onzichtbaar
vlak eromheen maakt het 25 bij 25 (WCAG 2.5.8) zonder dat het pijltje zelf
of de menubalk verandert. */
.ew-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-submenu__toggle {
position: relative;
}
.ew-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-submenu__toggle::after {
content: "";
position: absolute;
inset: -8px;
}
/* Zijwaartse reveals schoven op smalle schermen 34px buiten de rand. Chrome
op Android verbreedt dan de layout-viewport (390 → 405px) en laadt de
pagina licht uitgezoomd. Onder 920px schuiven ze daarom verticaal in. */
@media (max-width: 920px) {
html.js .ew-reveal--right,
html.js .ew-reveal--left {
transform: translateY(26px);
}
}
/* Tabellen buiten artikelen (privacyverklaring): de core-tabel heeft een
vaste layout en liep op 320px 80px buiten beeld. Horizontaal scrollen
binnen de kolom in plaats van de hele pagina. */
main figure.wp-block-table {
overflow-x: auto;
max-width: 100%;
}
@media (max-width: 480px) {
main figure.wp-block-table table.has-fixed-layout {
table-layout: auto;
min-width: 100%;
}
}
/* =====================================================================
Ronde 9: anti-AI-rework (23-09-2026)
Weg met de sjabloongebaren die elke gegenereerde site heeft: zwevende
badges, initialen als nep-bewijs, icoontegels boven koppen, een
hero-metric-balk, groene gloed, glas, optillende kaarten en een fade-up op
elk blok. Het merk (groen, eigen foto's, de heroband) blijft.
===================================================================== */
/* Hero: vier feiten in het paneel, met het vierkantje uit het logo als
opsommingsteken. Het echte bewijs staat eronder: de klantlogo's. */
.ew-hero__panel .ew-feiten {
list-style: none;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .55rem 1.6rem;
margin: 2rem 0 0;
padding: 1.3rem 0 0;
border-top: 1px solid var(--ew-line);
}
.ew-hero__panel .ew-feiten li {
position: relative;
margin: 0;
padding-left: 1.1rem;
font-size: .92rem;
line-height: 1.45;
color: var(--ew-slate);
}
.ew-hero__panel .ew-feiten li::before {
content: "";
position: absolute;
left: 0;
top: .5em;
width: 7px;
height: 7px;
background: var(--ew-green);
}
@media (max-width: 520px) {
.ew-hero__panel .ew-feiten {
grid-template-columns: minmax(0, 1fr);
}
}
/* Klantlogo's staan stil, met een gewoon label. */
.ew-clients__row {
gap: 1.6rem clamp(2rem, 4vw, 3.2rem);
justify-content: center;
}
.ew-clients p.ew-clients__label {
text-transform: none;
letter-spacing: 0;
font-size: .95rem;
font-weight: 500;
}
/* Dienstkaarten: de foto draagt de kaart; de onderdelen zijn een rustige
opsomming in plaats van een rij gekleurde chips. */
.ew-seg .ew-tags {
gap: .2rem .5rem;
}
.ew-seg .ew-tags span {
background: none;
padding: 0;
font-size: .85rem;
color: var(--ew-slate);
}
.ew-seg .ew-tags span + span::before {
content: "·";
margin-right: .5rem;
color: var(--ew-line-strong);
}
/* Kaarten tillen niet op; hover is een randkleur, geen zwevende schaduw. */
:is(.ew-seg, .ew-post-card, .ew-pakket, .ew-doelgroepen a, .ew-keuze a, .ew-pijler-modal__optie):hover {
transform: none;
box-shadow: none;
}
@media (min-width: 861px) {
.ew-pakket--uitgelicht,
.ew-pakket--uitgelicht:hover {
transform: none;
}
}
/* Waardenband: het woord is de waarde. Geen icoontegels, geen gloed. */
.ew-val {
padding-top: 1.2rem;
border-top: 1px solid rgba(255, 255, 255, .18);
}
.ew-val h4,
.ew-val h3 {
font-size: clamp(1.3rem, 1.2vw + .8rem, 1.7rem);
color: var(--ew-green-on-dark);
letter-spacing: -.01em;
margin: 0 0 .5rem;
}
.ew-val p {
font-size: 1rem;
color: var(--ew-on-dark);
}
/* Statbar: geen reuzencijfers maar een feitenregel, cijfer en tekst op één
lijn, gescheiden door haarlijnen. */
.ew-statbar {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
text-align: left;
border-block: 1px solid var(--ew-line);
}
.ew-statbar > div {
display: flex;
flex-wrap: wrap;
align-items: baseline;
column-gap: .45rem;
padding: 1.3rem 1.4rem;
border-left: 1px solid var(--ew-line);
}
.ew-statbar > div:first-child {
border-left: 0;
padding-left: 0;
}
.ew-stat__num {
font-size: 1.6rem;
color: var(--ew-ink);
letter-spacing: -.02em;
}
.ew-stat__cap {
margin-top: 0;
font-family: var(--wp--preset--font-family--body);
font-weight: 400;
font-size: 1rem;
color: var(--ew-slate);
}
@media (max-width: 820px) {
.ew-statbar {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0;
}
.ew-statbar > div {
border-left: 0;
padding: 1rem 1rem 1rem 0;
border-top: 1px solid var(--ew-line);
}
.ew-statbar > div:nth-child(-n + 2) {
border-top: 0;
}
}
/* Reviews: naam en bron, geen initialen-bolletje; de link naar Google is
een tekstlink, niet een tweede groene knop naast de CTA. */
.ew-tekstlink {
display: inline-flex;
align-items: center;
gap: .45rem;
min-height: 44px;
font-family: var(--wp--preset--font-family--heading);
font-weight: 600;
color: var(--ew-green-700);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 5px;
}
.ew-tekstlink::after {
content: "";
width: 1em;
height: 1em;
background: currentColor;
-webkit-mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
.ew-tekstlink:hover {
text-decoration-thickness: 2px;
}
/* CTA-band: vlak groen, links uitgelijnd, knop rechts. Geen verloop, geen
gloed en niet het gecentreerde kop-tekst-knop-blok van elke sjabloonsite. */
.ew-cta {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"kop knop"
"tekst knop";
column-gap: clamp(2rem, 5vw, 4rem);
align-items: center;
text-align: left;
background: var(--ew-green-700);
}
.ew-cta::before {
content: none;
}
.ew-cta > h2 {
grid-area: kop;
margin: 0 0 .6rem;
}
.ew-cta > p {
grid-area: tekst;
margin: 0;
max-width: 56ch;
}
.ew-cta > .wp-block-buttons {
grid-area: knop;
justify-content: flex-end;
margin: 0;
}
@media (max-width: 760px) {
.ew-cta {
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"kop"
"tekst"
"knop";
}
.ew-cta > .wp-block-buttons {
justify-content: flex-start;
margin-top: 1.4rem;
}
}
/* Footerkoppen: gewone kopjes in plaats van gespatieerde hoofdletters. */
.ew-footer h5,
.ew-footer h4,
.ew-footer h2 {
text-transform: none;
letter-spacing: 0;
font-size: 1rem;
font-weight: 700;
color: var(--ew-ink);
}
/* Beweging: blokken komen bij het scrollen rustig binnen, alleen van onderen
(geen zijwaartse schuif) en trager dan voorheen. De hero boven de vouw
beweegt niet mee; daar zoomt alleen de foto in. Bij reduced motion staat
alles er meteen. */
html.js .ew-reveal,
html.js .ew-reveal--right,
html.js .ew-reveal--left {
opacity: 1;
transform: none;
transition: none;
}
@media (prefers-reduced-motion: no-preference) {
html.js .ew-reveal,
html.js .ew-reveal--right,
html.js .ew-reveal--left {
opacity: 0;
transform: translateY(24px);
transition: opacity 1.4s var(--ew-ease-rustig), transform 1.6s var(--ew-ease-rustig);
}
html.js .ew-reveal.in {
opacity: 1;
transform: none;
}
html.js :is(.ew-ph-panel, .ew-ph-photo, .ew-hero__photo).ew-reveal {
opacity: 1;
transform: none;
transition: none;
}
}
/* Feitenregel: kolommen groeien mee met hun inhoud (op desktop elk feit op
één regel); op smalle schermen staat het cijfer steeds boven de tekst. */
.ew-statbar {
display: flex;
flex-wrap: wrap;
}
.ew-statbar > div {
flex: 1 1 auto;
}
@media (max-width: 820px) {
.ew-statbar {
display: grid;
}
.ew-statbar > div {
flex-direction: column;
row-gap: .15rem;
}
}
/* Logorij heeft zijmarge nodig: op mobiel raakte een logo de schermrand. */
.ew-clients__row {
padding-inline: var(--ew-pad-x);
}
/* Inhoudslijsten krijgen hetzelfde groene vierkantje als de feiten in de
hero, in plaats van het standaardbolletje van de browser. */
:is(.ew-section, .ew-2kol__tekst) > ul.wp-block-list {
list-style: none;
padding-left: 0;
}
:is(.ew-section, .ew-2kol__tekst) > ul.wp-block-list > li {
position: relative;
padding-left: 1.1rem;
}
:is(.ew-section, .ew-2kol__tekst) > ul.wp-block-list > li + li {
margin-top: .35rem;
}
:is(.ew-section, .ew-2kol__tekst) > ul.wp-block-list > li::before {
content: "";
position: absolute;
left: 0;
top: .62em;
width: 7px;
height: 7px;
background: var(--ew-green);
}
/* Een kop na het pakketgrid kreeg geen blokruimte en plakte eraan. */
.ew-pakketten + h2 {
margin-top: var(--ew-blokruimte);
}
/* Vacaturepagina: de titelkop had geen zijmarge en stond tegen de
schermrand, terwijl de tekst eronder op de contentas begint. */
.single-vacature .ew-page-hero {
padding-inline: var(--ew-pad-x);
}
/* =====================================================================
Ronde 10: witruimte (23-09-2026)
Lange tekstsecties stonden in één smalle kolom met rechts een leeg vlak.
Drie vaste vormen vullen de breedte, zonder dat de tekst verandert:
- .ew-duo: situatie links, "wat wij doen" rechts in een paneel;
- .ew-alineas: twee alinea's naast elkaar onder de kop;
- .ew-onderwerpen: korte onderwerpen (kop + alinea) in een raster.
===================================================================== */
.ew-duo {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
gap: clamp(2rem, 5vw, 4.5rem);
align-items: start;
}
.ew-duo__hoofd > :first-child,
.ew-paneel > :first-child,
.ew-onderwerp > :first-child {
margin-top: 0;
}
.ew-duo__hoofd > :last-child,
.ew-paneel > :last-child,
.ew-onderwerp > :last-child {
margin-bottom: 0;
}
/* Het verhaal op Over ons is de enige kop in zijn kolom; de slotstreep die
.ew-prose aan de laatste kop geeft, hoort daar niet. */
.ew-duo__hoofd.ew-prose > h2 {
padding-top: 0;
border-top: 0;
}
.ew-duo__zij {
display: grid;
gap: 1.25rem;
}
/* Meelopen alleen als er echt afstand te overbruggen is. site.js zet
.ew-duo--meelopen pas bij 320px of meer hoogteverschil; een paneel dat maar
een paar regels meeschuift en dan stopt, oogt als haperen. */
@media (min-width: 901px) {
.ew-duo--meelopen .ew-duo__zij {
position: sticky;
top: 6.5rem;
}
}
/* Zelfde paneel als in de hero: wit, dunne rand, groene bovenrand. */
.ew-paneel {
background: var(--ew-white);
border: 1px solid var(--ew-line);
border-top: 4px solid var(--ew-green);
border-radius: var(--wp--custom--radius--card, 10px);
padding: clamp(1.4rem, 2.6vw, 2.1rem);
}
/* Tussenkoppen in paneel en raster zijn een trede kleiner dan de sectiekop.
Twee klassen, zodat ze boven de H2-schaal van foto-heropagina's uitkomen
(body:has(.ew-page-hero--photo) main h2). */
.ew-duo .ew-paneel h2 {
font-size: clamp(1.25rem, 1.9vw, 1.5rem);
margin: 0 0 .8rem;
}
.ew-paneel p {
margin: 0 0 .9rem;
}
.ew-duo__foto {
margin: 0;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: var(--wp--custom--radius--card, 10px);
background: var(--ew-paper-2);
}
.ew-duo__foto img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Twee alinea's lopen als één tekst over twee even hoge kolommen, zodat een
korte tweede alinea geen halflege kolom achterlaat. */
.ew-alineas {
columns: 2;
column-gap: clamp(2rem, 4vw, 3.5rem);
margin-block: 0 1.4rem;
orphans: 2;
widows: 2;
}
.ew-alineas > p {
margin: 0 0 1rem;
max-width: none;
}
.ew-alineas > p:last-child {
margin-bottom: 0;
}
.ew-onderwerpen {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2.2rem clamp(2rem, 4vw, 3.5rem);
}
.ew-onderwerp {
border-top: 1px solid var(--ew-line);
padding-top: 1.2rem;
}
.ew-onderwerpen .ew-onderwerp h2 {
font-size: clamp(1.2rem, 1.8vw, 1.4rem);
margin: 0 0 .6rem;
}
/* Kaartrijen: twee kaarten vullen samen de breedte (auto-fill liet een lege
derde kolom staan), vier staan op één rij in plaats van drie plus één. */
@media (min-width: 640px) {
.ew-post-grid:has(> :nth-child(2):last-child) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ew-post-grid:has(> :nth-child(4):last-child) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1100px) {
.ew-post-grid:has(> :nth-child(4):last-child) {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
/* Eén losse kaart in een rij: liggend over de volle breedte, foto links. */
@media (min-width: 760px) {
.ew-post-grid:has(> .ew-post-card:only-child) {
grid-template-columns: minmax(0, 1fr);
}
.ew-post-grid > .ew-post-card:only-child {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}
.ew-post-grid > .ew-post-card:only-child .ew-post-card__foto {
aspect-ratio: auto;
height: 100%;
min-height: 240px;
}
.ew-post-grid > .ew-post-card:only-child .ew-post-card__body {
justify-content: center;
padding: clamp(1.5rem, 3vw, 2.4rem);
}
}
/* Regio's op Over ons: alleen tekst, vier naast elkaar. */
.ew-regios--tekst {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1000px) {
.ew-regios--tekst {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 900px) {
.ew-duo {
grid-template-columns: minmax(0, 1fr);
}
}
@media (min-width: 600px) and (max-width: 900px) {
.ew-duo__zij:has(.ew-duo__foto) {
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
}
}
@media (max-width: 760px) {
.ew-alineas {
columns: 1;
}
.ew-onderwerpen {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 560px) {
.ew-regios--tekst {
grid-template-columns: minmax(0, 1fr);
}
}