/* ═══════════════════════════════════════════════════════════════════════
NIEUWE PAGINA'S (mx-*) — sector-, doelgroep-, case-, werkwijze-, invest-,
vergelijk-, security- en over-ons-pagina's. Overgenomen uit het
enterprise-mockup, ontdaan van de SPA-only (.mx-page, .mx-tab, .ph-* en z-*)
en crop-hacks. Beeld staat clean/gecentreerd via .mx-figure.
═══════════════════════════════════════════════════════════════════════ */
/* Screenshot-frame: witte rand (padding) + zachte schaduw + afgeronde hoeken. */
.mx-figure { box-sizing:border-box; width:100%; max-width:640px; margin:0 auto; background:#fff;
padding:10px; border-radius:16px; border:1px solid rgba(0,0,0,0.05); overflow:hidden;
box-shadow:0 8px 30px rgba(30,45,70,0.09); }
.mx-figure img { width:100%; height:auto; display:block; border-radius:8px; }
/* In hero-kolom altijd netjes centreren */
.hero-image-col .mx-figure { align-self:center; }
/* Generieke content-sectie */
.mx-section { padding:90px 24px; max-width:1400px; margin:0 auto; }
.mx-section.mx-tight { padding-top:30px; }
.mx-center { text-align:center; max-width:720px; margin:0 auto 56px; }
.mx-center h2 { font-size:clamp(26px,3.2vw,38px); font-weight:500; letter-spacing:-0.01em; margin:0 0 14px; text-wrap:balance; }
.mx-center p { font-size:15.5px; line-height:1.7; color:var(--grey-42); margin:0; }
/* Aanpak — fasetijdlijn */
.mx-phases { max-width:1080px; margin:0 auto; display:grid; gap:0; }
.mx-phase { display:grid; grid-template-columns:64px 1fr; gap:0 28px; position:relative; padding-bottom:44px; }
.mx-phase:last-child { padding-bottom:0; }
.mx-phase::before { content:""; position:absolute; left:31px; top:52px; bottom:8px; width:2px;
background:linear-gradient(to bottom, rgba(0,129,234,0.35), rgba(0,129,234,0.08)); }
.mx-phase:last-child::before { display:none; }
.mx-phase-dot { width:64px; height:64px; border-radius:50%; background:#fff; border:1px solid rgba(12,92,168,0.25);
box-shadow:0 4px 14px rgba(12,92,168,0.10); display:flex; align-items:center; justify-content:center;
font-size:18px; font-weight:500; color:#0C5CA8; position:relative; z-index:1; }
.mx-phase h3 { font-size:19px; font-weight:500; margin:10px 0 6px; color:var(--grey-10); }
.mx-phase-week { font-size:10px; font-weight:500; letter-spacing:0.2em; text-transform:uppercase; color:var(--azure-46); }
.mx-phase p { font-size:14.5px; line-height:1.65; color:var(--grey-42); max-width:640px; margin:0; }
/* Kaartgrid (security, over ons, overzichten) */
.mx-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:1180px; margin:0 auto; }
.mx-card { background:#fff; border:1px solid rgba(0,0,0,0.07); border-radius:16px; padding:26px 24px;
box-shadow:0 3px 14px rgba(0,0,0,0.05); }
.mx-card h3 { font-size:16.5px; font-weight:500; margin:14px 0 8px; color:var(--grey-10); }
.mx-card p { font-size:13.5px; line-height:1.65; color:var(--grey-42); margin:0; }
.mx-ico { width:38px; height:38px; border-radius:10px; background:rgba(0,129,234,0.09);
display:flex; align-items:center; justify-content:center; color:#0C5CA8; }
/* Grote stat-kaarten (case) */
.mx-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:1080px; margin:0 auto; }
.mx-stat { background:linear-gradient(150deg,#0C5CA8,#0081EA); border-radius:16px; padding:30px 26px; color:#fff; }
.mx-stat .v { display:block; font-size:clamp(30px,3.4vw,44px); font-weight:500; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }
.mx-stat .l { display:block; font-size:13px; opacity:.85; margin-top:6px; line-height:1.5; }
.mx-stat.alt { background:#fff; color:var(--grey-10); border:1px solid rgba(0,0,0,0.07); }
.mx-stat.alt .v { color:#0C5CA8; } .mx-stat.alt .l { color:var(--grey-42); opacity:1; }
/* Case-verhaal */
.mx-prose { max-width:680px; margin:0 auto; }
.mx-prose h2 { font-size:24px; font-weight:500; margin:52px 0 14px; }
.mx-prose h2:first-child { margin-top:0; }
.mx-prose p { font-size:15.5px; line-height:1.75; color:#3A3A3A; margin:0 0 16px; }
.mx-prose ul { font-size:15.5px; line-height:1.75; color:#3A3A3A; padding-left:22px; margin:0 0 16px; }
.mx-case-meta { display:flex; flex-wrap:wrap; gap:12px 34px; padding:18px 0; margin:26px 0 0;
border-top:1px solid rgba(0,0,0,0.08); }
.mx-case-meta div { font-size:13px; color:var(--grey-42); }
.mx-case-meta strong { display:block; font-size:10px; font-weight:500; letter-spacing:0.18em;
text-transform:uppercase; color:var(--azure-46); margin-bottom:3px; }
.mx-quote { max-width:680px; margin:56px auto; padding:30px 34px; background:#F6F9FD; border-radius:16px; }
.mx-quote p { font-size:17px; line-height:1.65; font-style:italic; color:var(--grey-10); margin:0 0 12px; }
.mx-quote cite { font-size:13px; font-style:normal; color:var(--grey-42); }
/* Vergelijkingstabel */
.mx-compare-wrap { max-width:1080px; margin:0 auto; overflow-x:auto; border:1px solid rgba(0,0,0,0.07);
border-radius:16px; background:#fff; box-shadow:0 3px 14px rgba(0,0,0,0.05); }
.mx-compare { width:100%; min-width:760px; border-collapse:collapse; font-size:13.5px; }
.mx-compare th, .mx-compare td { padding:14px 18px; text-align:left; vertical-align:top;
border-bottom:1px solid rgba(0,0,0,0.06); line-height:1.55; }
.mx-compare tr:last-child th, .mx-compare tr:last-child td { border-bottom:none; }
.mx-compare thead th { font-size:12.5px; font-weight:500; color:var(--grey-10); padding-top:18px; padding-bottom:14px; }
.mx-compare thead th small { display:block; font-weight:300; color:var(--grey-42); font-size:11px; margin-top:2px; }
.mx-compare tbody th { font-weight:500; color:var(--grey-10); font-size:12.5px; width:20%; }
.mx-compare td { color:var(--grey-42); width:26.6%; }
.mx-compare .dfy { background:rgba(0,129,234,0.055); color:#20415e; }
.mx-compare thead .dfy { color:#0C5CA8; }
/* Proof of Value / accent-paneel */
.mx-pov { max-width:980px; margin:0 auto; background:#F6F9FD; border:1px solid rgba(12,92,168,0.14);
border-radius:20px; padding:44px 48px; }
.mx-pov h2 { font-size:clamp(22px,2.6vw,30px); font-weight:500; letter-spacing:-0.01em; margin:14px 0 12px; text-wrap:balance; }
.mx-pov > p { font-size:15px; line-height:1.7; color:#3A3A3A; margin:0; max-width:680px; }
.mx-pov-facts { display:flex; flex-wrap:wrap; gap:14px 40px; margin-top:26px; padding-top:22px;
border-top:1px solid rgba(12,92,168,0.12); }
.mx-pov-facts div { font-size:13px; color:var(--grey-42); line-height:1.5; }
.mx-pov-facts strong { display:block; font-size:15px; font-weight:500; color:var(--grey-10); margin-bottom:2px; }
/* Methode — SVG-diagramkader (standalone, geen .mx-shot nodig) */
.mx-diagram { background:#fff; border:1px solid rgba(0,0,0,0.07); border-radius:16px; padding:24px;
display:flex; align-items:center; justify-content:center; box-shadow:0 3px 14px rgba(0,0,0,0.05); }
.mx-diagram svg { width:100%; height:auto; }
.mx-diagram text { font-family:inherit; }
@media (max-width: 900px) {
.mx-grid, .mx-stats { grid-template-columns:1fr; }
.mx-phase { grid-template-columns:48px 1fr; gap:0 18px; }
.mx-phase-dot { width:48px; height:48px; font-size:15px; }
.mx-phase::before { left:23px; }
.mx-section { padding:60px 20px; }
.mx-pov { padding:30px 24px; }
}
/* Testimonials op de nieuwe pagina's: verticale ademruimte (homepage houdt padding:0). */
/* Een testimonial: kaart gecentreerd i.p.v. links in de 3-koloms grid. */
.testimonials-grid.mx-single { display:flex; justify-content:center; }
.testimonials-grid.mx-single .testimonial-card { max-width:640px; width:100%; }
.testimonials-section.mx-testimonials { padding-top:100px; padding-bottom:100px; }
@media (max-width: 900px) {
.testimonials-section.mx-testimonials { padding-top:60px; padding-bottom:60px; }
}
/* Hero-afbeelding schuift rustig in, dezelfde beweging als .hero-screenshot elders. */
.hero-image-col .mx-figure {
opacity: 0;
transform: translateX(48px);
animation: heroSlideIn 1.0s cubic-bezier(0.22,1,0.36,1) both 0.4s;
}
/* Feature-beeld = volledige, afgeronde visual binnen de feature-row; wissel om en om af. */
.feature-row .mx-figure { max-width: 100%; }
.feature-row:nth-child(even) .mx-figure { order: 2; }
@media (max-width: 900px) {
.feature-row:nth-child(even) .mx-figure { order: 0; }
}
@media (max-width: 900px) {
.hero-image-col .mx-figure { animation: none; opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.hero-image-col .mx-figure { animation: none; opacity: 1; transform: none; }
}
/* Mobiel: extra ademruimte-correcties voor de nieuwe secties op smalle schermen. */
@media (max-width: 640px) {
.mx-section { padding: 52px 18px; }
.mx-card { padding: 22px 20px; }
.mx-stat { padding: 26px 22px; }
.mx-pov { padding: 26px 20px; }
.mx-figure { padding: 6px; border-radius: 13px; }
.mx-figure img { border-radius: 7px; }
.hero-stats { flex-wrap: wrap; gap: 12px 18px; }
.testimonials-section.mx-testimonials { padding-top: 56px; padding-bottom: 56px; }
.mx-case-meta { gap: 10px 22px; }
}
/* Hero zonder afbeelding: de 2-koloms audience-hero (48%/52%) laat een lege
rechterhelft zien op pagina's waar de hero-afbeelding (nog) niet gevuld is
(aanpak, methode, investering, vergelijk, security, over ons). Val dan terug
op één kolom met een comfortabele tekstbreedte. Zodra er een hero-![]()
in de
beeldkolom staat, pakt de normale 2-koloms opmaak vanzelf weer. */
.hero-section.audience-hero:not(:has(.hero-image-col img)) {
grid-template-columns: 1fr;
min-height: 54vh;
padding-left: max(42px, calc((100vw - 1400px) / 2 + 18px));
padding-right: max(42px, calc((100vw - 1400px) / 2 + 18px));
text-align: center;
}
.hero-section.audience-hero:not(:has(.hero-image-col img)) .hero-text-col {
display: flex;
flex-direction: column;
align-items: center;
max-width: 880px;
margin: 0 auto;
}
.hero-section.audience-hero:not(:has(.hero-image-col img)) .hero-sub {
margin-left: auto;
margin-right: auto;
}
.hero-section.audience-hero:not(:has(.hero-image-col img)) .hero-image-col {
display: none;
}
/* Home op mobiel: normaal document-scrollen i.p.v. een viewport-hoge snap-container.
De desktop-regels (html/body.home lock + body.home #scrollContainer{overflow-y:scroll;
scroll-snap-type:y mandatory}) werden op mobiel niet overschreven door de lagere
specificiteit van #scrollContainer{scroll-snap-type:none}, waardoor de home naar de
footer sprong en daar bleef hangen. mx-pages.css laadt na style.css, dus deze
even-specifieke regels winnen op volgorde. De nav is position:fixed en blijft staan. */
@media (max-width: 768px) {
html:has(body.home) { height: auto; overflow: visible; }
body.home {
height: auto;
overflow-x: hidden;
overflow-y: visible;
}
body.home #scrollContainer {
height: auto;
overflow: visible;
scroll-snap-type: none;
}
}
/* Frame sluit strak aan. .feature-img-wrap heeft van zichzelf een vaste 4:3-box met
grijze vulling; op de nieuwe pagina's zit daar een .mx-figure (wit kader, beeld op
natuurlijke hoogte) in. Brede dashboard-beelden vullen die 4:3 niet → dode ruimte
eronder. Waar een .mx-figure in de wrapper zit, laten we de eigen box/vulling los,
zodat het witte kader het beeld strak omsluit. Wrappers met een los ![]()
(de
originele feature-/audience-pagina's) houden hun 4:3-cover. */
.feature-img-wrap:has(.mx-figure) {
aspect-ratio: auto;
background: transparent;
border: 0;
border-radius: 0;
overflow: visible;
}
.feature-img-wrap:has(.mx-figure)::after { display: none; }
/* Fail-safe voor hero-beelden op mobiel. De reveal (base opacity:0 → heroSlideIn) kan
door iOS Low Power Mode of sommige mobiele browsers worden overgeslagen, waardoor het
beeld op opacity:0 blijft hangen: een leeg grijs kader (o.a. de audience-pagina's).
Op mobiel en bij reduced-motion tonen we hero-beelden daarom meteen, zonder van de
animatie af te hangen. Desktop houdt de slide-in. */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
.hero-screenshot,
.hero-image-col .mx-figure,
.hero-image-col .feature-img-wrap {
opacity: 1 !important;
transform: none !important;
animation: none !important;
}
}
/* Voor-wie-pagina's op het oude audience-template (page-audience.php): op mobiel toonde
.hero-screenshot een ingezoomde cover-crop (max-height:55vw) tussen de tekst. Trek dit
gelijk met de andere pagina's: de HELE afbeelding, netjes ONDER de volledige herotekst
(kop, sub, knoppen), in een net kader. Gescoped op dit template, zodat home en
feature-pagina's (die .hero-screenshot ook gebruiken) ongemoeid blijven. */
@media (max-width: 768px) {
.page-template-page-audience .hero-section {
display: flex !important;
flex-direction: column !important;
grid-template-columns: none !important;
padding: 88px 20px 8px !important;
overflow: hidden;
}
.page-template-page-audience .hero-section > * { max-width: 100%; min-width: 0; }
.page-template-page-audience .hero-text-col { order: 1; width: 100%; padding: 0; }
.page-template-page-audience .hero-actions { flex-wrap: wrap; width: 100%; }
.page-template-page-audience .hero-image-col {
order: 4; width: 100%; max-width: 100%; padding: 18px 0 0; margin: 0;
height: auto; overflow: visible;
}
.page-template-page-audience .logo-slider-band {
order: 5; width: 100%; max-width: 100%; overflow: hidden;
}
.page-template-page-audience .hero-screenshot {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
max-height: none !important;
object-fit: contain !important;
border-radius: 14px;
border: 1px solid rgba(0,0,0,0.05);
box-shadow: 0 10px 30px rgba(30,45,70,0.10);
background: #fff;
display: block;
opacity: 1 !important;
transform: none !important;
animation: none !important;
}
}
/* Mobiel: volle breedte + geen horizontale scroll (geldt themabreed). */
@media (max-width: 768px) {
/* De reveal-animaties schoven content horizontaal (translateX ±52px) buiten het
scherm vóór ze inzoomen → horizontale scroll. Op mobiel schuiven ze verticaal,
zodat er nooit iets buiten de schermbreedte steekt. */
.reveal.from-left,
.reveal.from-right { transform: translateY(30px); }
/* Hero-beeld (mx-figure) tot dezelfde breedte als de tekst: de beeldkolom had een
extra zijpadding waardoor het beeld smaller was dan de tekst. */
.hero-image-col { padding-left: 0; padding-right: 0; }
/* Vangnet: nooit horizontale scroll op de gewone pagina's, ongeacht een uitschieter. */
body:not(.home), html:has(body:not(.home)) { overflow-x: hidden; }
}
/* USP's (hero-stats) en knoppen op mobiel op volle breedte, net als de tekst en het
beeld. De hero-stats stonden in 3 krappe kolommen met afbrekende koppen; op mobiel
stapelen ze nu verticaal, elk op volle breedte. Gescoped op audience-hero, zodat de
home (eigen hero) ongemoeid blijft. */
@media (max-width: 768px) {
.hero-section.audience-hero .hero-stats {
flex-direction: column;
flex-wrap: nowrap;
align-items: stretch;
gap: 16px;
width: 100% !important;
align-self: stretch !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.hero-section.audience-hero .hero-stats .stat-item { flex: none; width: 100%; }
.hero-section.audience-hero .hero-stats .stat-divider { display: none; }
.hero-section.audience-hero .hero-actions {
flex-direction: column;
align-items: stretch;
width: 100% !important;
align-self: stretch !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.hero-section.audience-hero .hero-actions .btn-primary,
.hero-section.audience-hero .hero-actions .btn-text { width: 100%; justify-content: center; }
}
/* Mobiel: de verticale ruimte tussen de secties was fors (o.a. 80px onder een sectiekop,
80px boven de CTA, 60px sectie-padding). Halveer de grootste gaten. Gescoped op de
gewone pagina's, zodat de home (full-height scroll-panelen) ongemoeid blijft. */
@media (max-width: 768px) {
body:not(.home) .hero-section.audience-hero { padding-bottom: 20px; }
body:not(.home) .features-section.audience-features { padding-top: 30px; padding-bottom: 30px; }
body:not(.home) .features-section .features-intro { margin-bottom: 40px; }
body:not(.home) .feature-row { padding-top: 24px; padding-bottom: 24px; }
body:not(.home) .mx-section { padding-top: 34px; padding-bottom: 34px; }
body:not(.home) .mx-center { margin-bottom: 28px; }
body:not(.home) .cta-section { padding-top: 40px; padding-bottom: 28px; }
}
/* Privacy-checkbox op het demo-formulier. Een globale input-reset zette appearance:none
op de checkbox, waardoor hij als lege afgeronde box rendert zonder zichtbaar vinkje:
je vinkt 'm wel aan, maar ziet niks, dus het lijkt onaanvinkbaar. Herstel een echte,
zichtbaar aanvinkbare checkbox. */
.checkbox-label input[type="checkbox"] {
-webkit-appearance: auto !important;
appearance: auto !important;
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
margin: 2px 0 0 !important;
padding: 0 !important;
border-radius: 4px !important;
accent-color: var(--blue, #0081EA);
flex-shrink: 0;
cursor: pointer;
}