/* ========================================================================== New Digits theme.css Tokens (--nd-*), componenten (.nd-*), Gutenberg-koppeling (is-style-*). Kleuren en typografie zijn de huisstijl uit .claude/skills/newdigits-brand. ========================================================================== */ /* ---------- Tokens ---------- */ :root { --nd-black: #000000; --nd-navy: #051828; --nd-navy-deep: #0b1f33; --nd-ink: #001b40; --nd-cyan: #00b4d8; --nd-cyan-deep: #0790ab; --nd-teal: #0094a8; --nd-steel: #2e5b88; --nd-white: #ffffff; --nd-grey: #8c8c8c; /* ondersteunende tekst */ --nd-white-soft: rgba(255, 255, 255, 0.85); /* lopende tekst en leads op donker */ --nd-grey-nav: #9e9da3; --nd-border: rgba(255, 255, 255, 0.15); --nd-faded: rgba(255, 255, 255, 0.3); --nd-cyan-faded: rgba(0, 180, 216, 0.15); --nd-overlay: rgba(0, 0, 0, 0.75); /* Google-kleuren: alleen voor de Google-reviewcomponenten (bewuste uitzondering). */ --nd-google-blauw: #4285f4; --nd-google-rood: #ea4335; /* Statuskleur, geen accent: alleen voor het "is bereikbaar"-stipje bij een persoon. */ --nd-status-groen: #25D366; --nd-google-geel: #fbbc04; --nd-google-groen: #34a853; --nd-grad-cyan: linear-gradient(180deg, #00b4d8 0%, #0790ab 100%); --nd-grad-logo: linear-gradient(135deg, #00b4d8 0%, #2e5b88 100%); --nd-grad-gloss: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%); --nd-font: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; --nd-fs-h1: clamp(2.5rem, 1.5rem + 3.6vw, 4.5rem); --nd-fs-h2: clamp(2.2rem, 1.6rem + 2.2vw, 3.5rem); --nd-fs-h3: clamp(1.8rem, 1.5rem + 1vw, 2.4rem); --nd-fs-h4: clamp(1.6rem, 1.4rem + 0.6vw, 2rem); --nd-fs-h5: clamp(1.3rem, 1.2rem + 0.3vw, 1.5rem); --nd-fs-h6: 1.2rem; --nd-fs-lead: clamp(1.1rem, 1rem + 0.4vw, 1.25rem); --nd-fs-lead-lg: clamp(1.3rem, 1.15rem + 0.6vw, 1.5rem); --nd-fs-hero: clamp(2.4rem, 1.4rem + 3vw, 4rem); --nd-reel-w: clamp(7.5rem, 14vw, 12.5rem); /* Doekkleur van een sectie. Een hoofdstuk op navy zet hem om; de gloedstijlen schilderen hier overheen in plaats van zelf zwart te zetten, zodat ze in beide banden werken. */ --nd-band: var(--nd-black); --nd-papier: #FFFFFF; /* doek van een lichte sectie */ /* Cyaan als tekst haalt op wit maar 2,1:1. Deze diepere teal haalt 5,7:1 en is de kleur voor kickers, tekstlinks en vinkjes binnen een licht vlak. Cyaan blijft de knopkleur, want daar staat zwarte tekst op en dat werkt op elke ondergrond. */ --nd-teal-diep: #00707E; --nd-accent-tekst: var(--nd-cyan); --nd-radius-card: 20px; /* was 30px: gelijkgetrokken met de casekaarten, zodat er drie radiusmaten zijn in plaats van vier */ --nd-radius: 12px; --nd-radius-pill: 999px; --nd-radius-case: 20px; --nd-icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); --nd-icon-whatsapp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z'/%3E%3C/svg%3E"); --nd-icon-scherm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='13' height='12' rx='2.5'/%3E%3Cpath d='m15.5 10.5 6-3.5v10l-6-3.5'/%3E%3C/svg%3E"); --nd-icon-klok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.2 2'/%3E%3C/svg%3E"); --nd-icon-vink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); --nd-border-strong: rgba(255, 255, 255, 0.24); /* Het vlak van een kaart met tekst erin: navy met een licht verloop naar beneden. Glas (wit 4,5%) is op zwart bijna niet te zien, waardoor zo'n kaart leest als een los stukje tekst in plaats van als een kaart. Navy is op deze site de kleur van structuur, dus ook de kleur van een kaart. Gebruikt door .nd-stap en .nd-case-card; glazen kaarten zonder eigen vlak blijven .is-style-glass. */ --nd-kaart-vlak: linear-gradient(180deg, var(--nd-navy-deep), var(--nd-navy)); --nd-kaart-rand: rgba(255, 255, 255, 0.12); /* Gloed is standaard ingetogen; alleen de hero en de scan-sectie zetten hem vol (zie "Gloed: waar hij wel vol mag"). Zo betekent cyaan weer iets en vallen de knoppen op. */ --nd-glow-cyan: rgba(0, 180, 216, 0.07); --nd-glow-steel: rgba(46, 91, 136, 0.2); --nd-shadow-card: 0 5px 30px 0 rgba(0, 0, 0, 0.08); --nd-shadow-video: 0 20px 50px rgba(0, 0, 0, 0.45); --nd-space-section: clamp(3.5rem, 6vw, 5.5rem); --nd-space-block: clamp(1.5rem, 3vw, 2.5rem); --nd-gutter: clamp(1rem, 3vw, 2.5rem); --nd-video-w: 20rem; --nd-header-h: 74px; --nd-header-top: 20px; --nd-header-side: 1.5rem; --nd-header-max: 1180px; --nd-header-space: calc(var(--nd-header-top) + var(--nd-header-h)); --nd-logo-h: 32px; --nd-ease: cubic-bezier(0.2, 0.7, 0.2, 1); } @media (max-width: 899px) { :root { --nd-header-h: 64px; --nd-header-top: 12px; --nd-header-side: 0.75rem; --nd-logo-h: 28px; } } @media (max-width: 600px) { :root { --nd-video-w: 14rem; } } /* ---------- Basis ---------- */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nd-header-space) + 1rem); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { background: var(--nd-black); color: var(--nd-grey); font-family: var(--nd-font); -webkit-font-smoothing: antialiased; overflow-x: clip; } /* overflow-wrap: een te lang woord (KENNISMAKING op 320px) breekt alleen als het echt niet past. */ h1, h2, h3, h4, h5, h6 { color: var(--nd-white); text-wrap: balance; overflow-wrap: break-word; } h1 { font-size: var(--nd-fs-h1); font-weight: 700; text-transform: uppercase; line-height: 1.25; } h2 { font-size: var(--nd-fs-h2); font-weight: 700; text-transform: uppercase; line-height: 1.2; } h3 { font-size: var(--nd-fs-h3); font-weight: 500; } h4 { font-size: var(--nd-fs-h4); font-weight: 500; line-height: 1.4; } h5 { font-size: var(--nd-fs-h5); font-weight: 500; } h6 { font-size: var(--nd-fs-h6); font-weight: 500; } strong { color: var(--nd-white); font-weight: 600; } a { transition: color 0.2s var(--nd-ease); } ::selection { background: var(--nd-cyan-faded); color: var(--nd-white); } img, video { max-width: 100%; height: auto; display: block; } .nd-skip { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--nd-cyan); color: var(--nd-black); padding: 0.75rem 1rem; border-radius: 0 0 var(--nd-radius) 0; } .nd-skip:focus { left: 0; } :focus-visible { outline: 2px solid var(--nd-cyan); outline-offset: 3px; } /* ---------- Tekststijlen ---------- */ /* Sublabel: cyaan kapitalen boven een kop binnen een blok (dienstkaart, stapkaart). Het label van een hele sectie is altijd de badge-pil (.is-style-badge); die twee nooit door elkaar. */ .nd-kicker, .is-style-kicker, .nd-stap p.nd-stap__label { color: var(--nd-accent-tekst) !important; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; line-height: 1.3; text-transform: uppercase; margin: 0 0 0.5rem; } /* Label met lijnen: rustige grijze kapitalen met aan beide kanten een lijn die uitfadet (blokstijl "Label met lijnen" op een alinea). Voor een trust-bar of scheiding. */ .is-style-label-lines { display: flex; align-items: center; gap: 1.25rem; max-width: 46rem; margin-inline: auto !important; /* overschrijft de constrained-layout marge */ margin-block: 0; color: var(--nd-grey); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.14em; line-height: 1.4; text-transform: uppercase; text-align: center; text-wrap: balance; } .is-style-label-lines::before, .is-style-label-lines::after { content: ''; flex: 1 1 2rem; height: 1px; background: linear-gradient(90deg, transparent, var(--nd-border-strong)); } .is-style-label-lines::after { background: linear-gradient(270deg, transparent, var(--nd-border-strong)); } .nd-lead, .is-style-lead { color: var(--nd-white); font-size: var(--nd-fs-lead); line-height: 1.6; } .is-style-caps { text-transform: uppercase; } .is-style-gradient, .nd-gradient-text { background: var(--nd-grad-cyan); -webkit-background-clip: text; background-clip: text; color: transparent !important; } .nd-muted { color: var(--nd-faded); } /* ---------- Layout ---------- */ /* Header, main en footer sluiten op elkaar aan: geen blockGap-marge ertussen. */ .wp-site-blocks > * { margin-block-start: 0; } /* Volle-breedte secties sluiten direct op elkaar aan. Anders zit er een blockGap-strook tussen waarin de pagina-achtergrond doorschijnt en een gloed hard wordt afgekapt. */ .wp-block-post-content > .alignfull { margin-block: 0; } .nd-section { padding-top: var(--nd-space-section); padding-bottom: var(--nd-space-section); } /* Ritme: de eerste sectie van een hoofdstuk krijgt meer lucht erboven, zodat het oog even rust. Op de homepage zijn dat "Tijd voor verandering" (het verhaal) en de reviews (het bewijs). */ .nd-section.nd-hoofdstuk { padding-top: calc(var(--nd-space-section) * 1.45); } .is-style-section-navy, .nd-section--navy { background: var(--nd-navy); } /* Hier stond .nd-band: een sectie met een navy doek, laatst alleen nog de FAQ. Die is weg omdat navy op deze site de kleur van een kaart is (zie --nd-kaart-vlak). Een navy sectie met kaarten erop laat oppervlak en object in elkaar overlopen, wat je niet kunt oplossen door aan de tinten te draaien. Wil een sectie eruit springen, gebruik dan het lichte doek (.nd-licht). --nd-band zelf blijft: dat is de variabele voor de doekkleur, die de gloedstijlen en .nd-licht gebruiken om op te schilderen. */ .nd-section--tight { padding-top: var(--nd-space-block); padding-bottom: var(--nd-space-block); } .nd-section__head { max-width: 46rem; margin-inline: auto; text-align: center; margin-bottom: var(--nd-space-block); } /* De werkwijze is een overzicht, geen verhaal: kop, kaarten en knop horen als een blok te lezen. Daarom staat de kop hier dichter op de kaarten dan de standaard sectieruimte. */ .nd-werkwijze .nd-section__head { margin-bottom: clamp(1.25rem, 2vw, 1.75rem); } .nd-section__head p { color: var(--nd-grey); } .nd-section__head .is-style-badge { color: var(--nd-white); font-weight: 600; margin-bottom: 1rem; } /* badge blijft wit, ook boven een kop */ /* Eén woord in een kop of zin in de accentkleur, om het te laten afsteken tegen de rest. Op het accent-token, dus in een lichte sectie wordt het vanzelf de diepere teal. */ .nd-accent { color: var(--nd-accent-tekst); } /* ---------- Knoppen ---------- */ .nd-btn, .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; position: relative; overflow: hidden; isolation: isolate; background: var(--nd-grad-cyan); color: var(--nd-black) !important; font-family: var(--nd-font); font-size: 1rem; font-weight: 600; line-height: 1.2; padding: 1em 1.5em; border: 0; border-radius: var(--nd-radius-pill); text-decoration: none; cursor: pointer; transition: transform 0.25s var(--nd-ease); } .nd-btn::after, .wp-block-button__link::after { content: ''; position: absolute; inset: 0; background: var(--nd-grad-gloss); opacity: 0; transition: opacity 0.25s ease; z-index: -1; } /* Hover: 1px omhoog en de witte glans erover. Geen cyaan gloed eronder, niet in rust en niet bij hover: een volle cyaan knop op zwart springt er zelf al genoeg uit, en zo'n wolk onder elke knop maakte de pagina overal blauw. */ .nd-btn:hover, .wp-block-button__link:hover { transform: translateY(-1px); } .nd-btn:hover::after, .wp-block-button__link:hover::after { opacity: 1; } .nd-btn--ghost, .is-style-ghost .wp-block-button__link { background: transparent; color: var(--nd-white) !important; border: 1px solid var(--nd-border-strong); box-shadow: none; padding: calc(1em - 1px) calc(1.5em - 1px); transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s var(--nd-ease); } .nd-btn--ghost::after, .is-style-ghost .wp-block-button__link::after { display: none; } .nd-btn--ghost:hover, .is-style-ghost .wp-block-button__link:hover { border-color: var(--nd-white); background: rgba(255, 255, 255, 0.04); box-shadow: none; } .nd-btn--sm, .is-style-small .wp-block-button__link { font-size: 0.9rem; padding: 0.8em 1.25em; } /* Pijl achter de knoptekst: extra CSS-klasse "nd-btn--arrow" op het knopblok. ::after is al de glans, dus ::before met order. */ .nd-btn--arrow .wp-block-button__link::before, .nd-btn.nd-btn--arrow::before { content: ''; order: 1; flex: none; width: 1em; height: 1em; background: currentColor; -webkit-mask: var(--nd-icon-arrow) center / contain no-repeat; mask: var(--nd-icon-arrow) center / contain no-repeat; transition: transform 0.25s var(--nd-ease); } .nd-btn--arrow .wp-block-button__link:hover::before, .nd-btn.nd-btn--arrow:hover::before { transform: translateX(3px); } /* WhatsApp-icoon achter de knoptekst, op elke knop die naar wa.me wijst. Aan de link gehangen en niet aan een klasse: zo staat het er vanzelf goed bij als de eigenaar zo'n knop toevoegt, dupliceert of verplaatst, en kan het icoon niet per ongeluk bij een andere bestemming staan. Het zegt de bezoeker vooraf waar de knop heen gaat, samen met de knoptekst zelf. Staat na het pijltje: krijgt een knop allebei, dan wint WhatsApp, want beide gebruiken ::before. Decoratief, dus een pseudo-element: de knoptekst noemt WhatsApp al, een screenreader hoeft het icoon niet nog eens te horen. Iets groter dan het pijltje (1.1em), omdat een gevuld logo optisch lichter oogt dan een lijnicoon. */ .wp-block-button__link[href*="wa.me"]::before, a.nd-btn[href*="wa.me"]::before { content: ''; order: 1; flex: none; width: 1.1em; height: 1.1em; background: currentColor; -webkit-mask: var(--nd-icon-whatsapp) center / contain no-repeat; mask: var(--nd-icon-whatsapp) center / contain no-repeat; } /* Tekstlink: dezelfde actie, maar rustig. Voor secties waar de blauwe knop te veel wordt; de blauwe knop blijft voor de hero, de werkwijze en de header (zie "Gloed met mate" en de brandskill). */ .is-style-tekstlink .wp-block-button__link { background: none; box-shadow: none; padding: 0.6rem 0; min-height: 2.75rem; /* aanraakdoel 44px hoog, ook al oogt het licht */ color: var(--nd-accent-tekst) !important; font-weight: 600; border-radius: 4px; } .is-style-tekstlink .wp-block-button__link::after { display: none; } /* geen glans */ .is-style-tekstlink .wp-block-button__link:hover { transform: none; box-shadow: none; text-decoration: underline; text-underline-offset: 4px; } /* Bij de diensten in felle cyaan, ook al staan ze op wit. Bewuste keuze van de eigenaar (oktober 2026): de donkere cyaan die --nd-accent-tekst hier geeft, leest als een andere kleur. Felle cyaan als tekst op wit haalt 2,3:1 in plaats van 4,5:1; niet terugdraaien zonder te overleggen. !important omdat de tekstlinkstijl hierboven de kleur ook met !important zet. */ .nd-diensten .is-style-tekstlink .wp-block-button__link { color: var(--nd-cyan) !important; } .wp-block-buttons { gap: 0.75rem; } /* ---------- Kaarten ---------- */ .nd-card, .is-style-card { background: var(--nd-navy); border-radius: var(--nd-radius-card); padding: clamp(1.75rem, 3vw, 2.5rem); } .nd-card--highlight, .is-style-card-highlight { background: var(--nd-black); border: 5px solid var(--nd-cyan); border-radius: var(--nd-radius-card); padding: clamp(1.75rem, 3vw, 2.5rem); box-shadow: var(--nd-shadow-card); } .nd-card h3, .nd-card h4, .is-style-card h3, .is-style-card h4 { margin-top: 0; } .nd-card > :last-child, .is-style-card > :last-child { margin-bottom: 0; } /* Glaskaart (blokstijl "Glas" op kolom of groep): zelfde glas als de casekaarten. "Glas met gloed" is de uitgelichte variant, bijvoorbeeld de oplossing na twee problemen. */ .is-style-glass, .is-style-glass-accent { position: relative; padding: clamp(1.5rem, 2.5vw, 2.25rem); border-radius: var(--nd-radius-case); background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)); border: 1px solid rgba(255, 255, 255, 0.1); transition: transform 0.35s var(--nd-ease), border-color 0.35s var(--nd-ease), box-shadow 0.35s var(--nd-ease); } .is-style-glass-accent { background: linear-gradient(180deg, rgba(0, 180, 216, 0.14), rgba(0, 180, 216, 0.03)); border-color: rgba(0, 180, 216, 0.6); box-shadow: 0 0 0 1px rgba(0, 180, 216, 0.2), 0 18px 50px rgba(0, 180, 216, 0.18); } .is-style-glass > :first-child, .is-style-glass-accent > :first-child { margin-top: 0; } .is-style-glass > :last-child, .is-style-glass-accent > :last-child { margin-bottom: 0; } .is-style-glass h3, .is-style-glass-accent h3 { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); font-weight: 700; line-height: 1.25; margin: 0 0 0.75rem; text-wrap: balance; } .is-style-glass p, .is-style-glass-accent p { margin: 0; } /* Geen hover-effect op glaskaarten. Een kaart die opspringt en een cyaan rand krijgt belooft dat je erop kunt klikken; glaskaarten (werkwijze, pijnpunten, het afsluitblok) zijn dat niet. Dat sprongetje met rand is voorbehouden aan klikbare kaarten, zoals de casekaarten. */ /* Genummerde kaarten: klasse "nd-numbered" op het kolommenblok zet 01, 02, 03 boven elke kolom. */ .nd-numbered { counter-reset: nd-num; } .nd-numbered > .wp-block-column { counter-increment: nd-num; } .nd-numbered > .wp-block-column::before { content: counter(nd-num, decimal-leading-zero); display: block; margin-bottom: 1rem; font-size: clamp(2rem, 1.6rem + 1.2vw, 2.75rem); font-weight: 800; line-height: 1; letter-spacing: -0.02em; background: var(--nd-grad-logo); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Oplopende gloed: klasse "nd-oplopend" op het kolommenblok. Kaart 1 licht zacht op, kaart 2 meer, kaart 3 volledig (zoals "Glas met gloed"). Voor een reeks die opbouwt, zoals problemen die steeds zwaarder worden. De sterkte per kaart staat in --nd-sterkte (0 tot 1). */ .nd-oplopend > .wp-block-column { --nd-sterkte: 1; } .nd-oplopend > .wp-block-column:nth-child(1) { --nd-sterkte: 0.2; } .nd-oplopend > .wp-block-column:nth-child(2) { --nd-sterkte: 0.55; } .nd-oplopend > .wp-block-column { background: linear-gradient(180deg, rgba(0, 180, 216, calc(0.18 * var(--nd-sterkte))), rgba(0, 180, 216, calc(0.04 * var(--nd-sterkte)))), linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)); border-color: rgba(0, 180, 216, calc(0.1 + 0.7 * var(--nd-sterkte))); box-shadow: 0 0 0 1px rgba(0, 180, 216, calc(0.3 * var(--nd-sterkte))); /* alleen een rand, geen gloed */ } /* Het nummer loopt mee op. */ .nd-oplopend.nd-numbered > .wp-block-column::before { opacity: calc(0.55 + 0.45 * var(--nd-sterkte)); } .nd-card--icon .nd-card__icon { width: 3rem; height: 3rem; border-radius: 12px; display: grid; place-items: center; background: var(--nd-cyan-faded); color: var(--nd-cyan); margin-bottom: 1.25rem; } /* ---------- Afbeeldingen ---------- */ .is-style-rounded-30 img { border-radius: var(--nd-radius-card); } .is-style-client-logo img { max-height: 48px; width: auto; opacity: 0.7; transition: opacity 0.2s; } .is-style-client-logo:hover img { opacity: 1; } .nd-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(1.5rem, 4vw, 4rem); } .nd-logos img { max-height: 48px; width: auto; opacity: 0.7; transition: opacity 0.2s; } .nd-logos img:hover { opacity: 1; } /* Logoband direct onder de hero: een glazen balk (zelfde glas als de header) met links het label en rechts de gedempte logo's, daaronder de casekaarten. Logo's die naar een case linken lichten samen met hun kaart op. */ .nd-logo-band { padding-top: 0; /* Ruimer dan een gewone sectie: hierna komt de platformband en die heeft zelf geen ruimte boven. */ padding-bottom: clamp(3.5rem, 9vw, 8.5rem); } .nd-logo-bar { --nd-logo-band-h: clamp(1.5rem, 1.1rem + 1vw, 2.125rem); display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 2.5rem); width: fit-content; max-width: 100%; margin-inline: auto !important; /* overschrijft de constrained-layout marge */ padding: 0.875rem clamp(1.25rem, 3vw, 2.25rem); border-radius: var(--nd-radius-pill); background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.05); } .nd-logo-bar > * { margin: 0 !important; } /* geen blockGap binnen de balk */ /* Label links op twee regels, met een dunne verticale scheidingslijn als ::after (de lijn links vervalt). */ .nd-logo-bar .is-style-label-lines { gap: clamp(1.25rem, 3vw, 2.5rem); max-width: 17rem; text-align: left; line-height: 1.35; } .nd-logo-bar .is-style-label-lines::before { display: none; } .nd-logo-bar .is-style-label-lines::after { flex: none; align-self: stretch; width: 1px; height: auto; min-height: 2.25rem; background: var(--nd-border-strong); } .nd-logo-bar .nd-logos { gap: clamp(1.25rem, 3.5vw, 3rem); flex-wrap: nowrap; } .nd-logo-bar .nd-logos figure { margin: 0; } .nd-logo-bar .nd-logos a { display: block; border-radius: 6px; } .nd-logo-bar .nd-logos img { height: var(--nd-logo-band-h); max-height: none; width: auto; object-fit: contain; opacity: 0.55; filter: grayscale(1) brightness(1.4); transition: opacity 0.25s var(--nd-ease), filter 0.25s var(--nd-ease), transform 0.25s var(--nd-ease); } .nd-logo-bar .nd-logos figure:hover img, .nd-logo-bar .nd-logos a.is-highlight img { opacity: 1; transform: translateY(-2px); } .nd-logo-band .nd-case-cards { margin-top: clamp(2.5rem, 5vw, 3.5rem); } @media (max-width: 600px) { .is-style-label-lines { display: block; letter-spacing: 0.1em; } .is-style-label-lines::before, .is-style-label-lines::after { display: none; } /* label loopt hier over twee regels; lijnen worden dan stompjes */ } /* Mobiel: label boven, alle logo's kleiner op één rij, balk als afgerond glasvlak. */ @media (max-width: 700px) { .nd-logo-bar { --nd-logo-band-h: 1.375rem; } .nd-logo-bar { flex-direction: column; gap: 0.875rem; width: 100%; padding: 1rem 1rem 1.125rem; border-radius: 24px; } .nd-logo-bar .is-style-label-lines { display: block; max-width: none; text-align: center; font-size: 0.875rem; } .nd-logo-bar .is-style-label-lines::after { display: none; } .nd-logo-bar .nd-logos { justify-content: center; gap: clamp(0.875rem, 4.5vw, 1.5rem); } } /* ---------- Video ---------- */ .nd-video { margin: 0; width: var(--nd-video-w); max-width: 100%; flex: 0 0 auto; } .nd-video--wide { width: 100%; } .nd-video__frame { position: relative; aspect-ratio: var(--nd-ratio, 9 / 16); border-radius: var(--nd-radius); overflow: hidden; background: var(--nd-navy); box-shadow: var(--nd-shadow-video); isolation: isolate; } .nd-video--wide .nd-video__frame { border-radius: var(--nd-radius-card); box-shadow: none; } .nd-video__poster, .nd-video__el { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .nd-video__poster--empty { background: var(--nd-grad-logo); opacity: 0.35; } .nd-video__el { opacity: 0; transition: opacity 0.4s ease; } .nd-video.is-playing .nd-video__el { opacity: 1; } .nd-video__play { position: absolute; inset: 0; margin: auto; width: 4rem; height: 4rem; border-radius: 50%; border: 0; background: rgba(0, 0, 0, 0.55); color: var(--nd-white); display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(6px); transition: opacity 0.2s ease, transform 0.2s var(--nd-ease); } .nd-video__play:hover { transform: scale(1.06); background: var(--nd-cyan); color: var(--nd-black); } .nd-video.is-playing .nd-video__play { opacity: 0; pointer-events: none; } .nd-video.is-playing:hover .nd-video__play, .nd-video.is-playing:focus-within .nd-video__play { opacity: 0.6; pointer-events: auto; } .nd-video__sound { position: absolute; right: 1rem; bottom: 1rem; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--nd-border); background: rgba(0, 0, 0, 0.55); color: var(--nd-white); display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(6px); } .nd-video.has-sound .nd-video__sound { background: var(--nd-cyan); color: var(--nd-black); } /* Vergrootknop: de hele tegel is klikbaar en opent de video groot met geluid. Een knop over het hele vlak, niet een icoontje in een hoek: op een telefoon tik je op de video zelf, en een icoon over het beeld dekt net het stuk af waar in een reel de tekst staat. In plaats daarvan licht de tegel op bij hover, met dezelfde cyaan gloed als de casekaarten op de homepage. De naam van de knop blijft er voor schermlezers, alleen onzichtbaar. De play-knop vervalt op zo'n tegel: die zou op dezelfde plek iets anders doen. Wie beweging uit heeft staan ziet dus de poster en opent hem met dezelfde klik in de pop-up, waar de bediening staat en de video pas speelt omdat hij er zelf op drukte. */ .nd-video--vergrootbaar .nd-video__play { display: none; } .nd-video--vergrootbaar .nd-video__frame { transition: transform 0.35s var(--nd-ease), box-shadow 0.35s var(--nd-ease); } .nd-video__vergroot { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; display: block; } .nd-video__vergroot-icoon { display: none; } @media (hover: hover) { .nd-video--vergrootbaar:hover .nd-video__frame, .nd-video--vergrootbaar:has(.nd-video__vergroot:focus-visible) .nd-video__frame { transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(0, 180, 216, 0.45); /* rand, geen gloed */ } } @media (prefers-reduced-motion: reduce) { .nd-video--vergrootbaar:hover .nd-video__frame { transform: none; } } .nd-video__vergroot:focus-visible { outline: 2px solid var(--nd-cyan); outline-offset: -4px; border-radius: inherit; } .nd-video__caption { margin-top: 0.75rem; font-size: 0.875rem; color: var(--nd-grey); text-align: center; } /* Bij reduced motion / Save-Data: altijd de play-knop tonen. */ .nd-video-manual .nd-video__play { opacity: 1 !important; pointer-events: auto !important; } /* Videorij */ .nd-video-row { display: flex; gap: clamp(1rem, 2vw, 1.5rem); justify-content: center; align-items: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-block: 1rem 2rem; padding-inline: var(--nd-gutter); margin-inline: calc(var(--nd-gutter) * -1); -webkit-overflow-scrolling: touch; } .nd-video-row::-webkit-scrollbar { display: none; } .nd-video-row > .nd-video { scroll-snap-align: center; } @media (max-width: 900px) { .nd-video-row { justify-content: flex-start; } /* Eerste tegel iets ingesprongen zodat de rij "doorloopt" naar rechts. */ .nd-video-row::after { content: ''; flex: 0 0 var(--nd-gutter); } } .nd-video-row--stagger > .nd-video:nth-child(even) { margin-top: 2.5rem; } @media (max-width: 900px) { .nd-video-row--stagger > .nd-video:nth-child(even) { margin-top: 0; } } /* Raster: alle video's tegelijk in beeld in plaats van een rij die je opzij schuift. Drie breed, want bij vier wordt een staande tegel zo smal dat de tekst in beeld niet meer te lezen is. De kolommen zijn gemaximeerd op 20rem en het geheel staat gecentreerd: zonder dat maximum wordt een tegel op een breed scherm 410px breed en dus 730px hoog, en dan past er per beeldscherm nog maar een halve rij. Mobiel twee kolommen: bij een kolom is elke video bijna een heel scherm hoog en scrol je zes schermen door de sectie. */ .nd-video-row--raster { display: grid; grid-template-columns: repeat(3, minmax(0, 20rem)); justify-content: center; overflow: visible; scroll-snap-type: none; margin-inline: auto; gap: clamp(1rem, 2vw, 1.5rem); } @media (max-width: 900px) { .nd-video-row--raster { grid-template-columns: repeat(2, minmax(0, 20rem)); justify-content: center; } .nd-video-row--raster::after { content: none; } } /* Hero-video (cases) */ /* Inhoud in het midden, horizontaal en verticaal. Stond eerst onderaan uitgelijnd, wat klopte toen er nog een logo en een kicker boven de titel stonden; met alleen een titel en een zin eronder zakt dat blok weg in de onderrand. */ .nd-hero-video { position: relative; min-height: clamp(24rem, 70vh, 44rem); display: grid; align-items: center; text-align: center; color: var(--nd-white); overflow: hidden; isolation: isolate; } .nd-hero-video > .nd-video { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; } .nd-hero-video > .nd-video .nd-video__frame { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; border-radius: 0; box-shadow: none; } .nd-hero-video > .nd-video .nd-video__play { display: none; } .nd-hero-video::before { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.55) 50%, rgba(0, 0, 0, 0.9) 100%); } .nd-hero-video__inner { position: relative; z-index: 1; width: 100%; max-width: 80rem; margin-inline: auto; box-sizing: border-box; /* Boven en onder gelijk, anders staat de tekst scheef in het kader terwijl de doos zelf netjes gecentreerd is. De hero begint onder de header, dus die hoeft hier niet meer verrekend te worden. */ padding: var(--nd-space-block) var(--nd-gutter); } .nd-hero-video__inner > * { max-width: 44rem; margin-inline: auto; } .nd-hero-video__inner > :first-child { margin-top: 0; } .nd-hero-video__inner > :last-child { margin-bottom: 0; } .nd-hero-video__inner h1 { margin-bottom: 0.4em; text-wrap: balance; } .nd-hero-video__inner p { color: var(--nd-white-soft); max-width: 40rem; } .nd-hero-video .nd-video__sound { z-index: 2; } /* De hero begint onder de header en loopt er niet meer onderdoor: een bannervideo die half achter een zwevende balk verdwijnt leest als een fout. De ruimte erboven is gewoon het zwarte doek van de pagina, dezelfde achtergrond waar de header op staat. */ main > .nd-hero-video:first-child { margin-top: var(--nd-header-space); } /* De header hapt nu uit de schermhoogte, dus een lagere vh geeft dezelfde indruk als eerst. Mobiel korter: daar is het scherm de beperking en wil je sneller bij de tekst zijn. */ @media (min-width: 782px) { .nd-hero-video { min-height: clamp(26rem, 66vh, 42rem); } } @media (max-width: 781px) { .nd-hero-video { min-height: clamp(18rem, 48vh, 28rem); } } /* Hier stond .nd-terug, een terugknop bovenin de case-hero. Weg: hij legde beslag op de plek direct onder de header, en de weg terug staat al in het menu ("Succesverhalen") en onderaan de pagina in de afsluitkaart ("Alle succesverhalen"). Niet opnieuw invoeren. */ /* ---------- Ticker ---------- */ .nd-ticker { overflow: hidden; white-space: nowrap; display: flex; padding-block: 1rem; border-block: 1px solid var(--nd-border); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .nd-ticker__track { display: inline-flex; align-items: center; gap: 2.5rem; padding-right: 2.5rem; animation: nd-ticker var(--nd-ticker-duration, 28s) linear infinite; color: var(--nd-white); font-weight: 600; font-size: clamp(1.1rem, 1.5vw, 1.5rem); letter-spacing: 0.06em; text-transform: uppercase; flex: 0 0 auto; } .nd-ticker__item { display: inline-flex; align-items: center; gap: 2.5rem; } .nd-ticker__item::after { content: ''; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--nd-cyan); } .nd-ticker:hover .nd-ticker__track { animation-play-state: paused; } @keyframes nd-ticker { to { transform: translateX(-100%); } } /* Richting "rechts": dezelfde loop achteruit, dus van links naar rechts. */ .nd-ticker--rechts .nd-ticker__track { animation-direction: reverse; } /* Stijl "Donker": navy-zwarte band met een cyaan waas en cyaan randen. */ .nd-ticker.is-style-default, .nd-ticker:not([class*="is-style-"]) { background: linear-gradient(90deg, var(--nd-black), var(--nd-navy) 50%, var(--nd-black)); border-color: rgba(0, 180, 216, 0.25); } /* Stijl "Cyaan": cyaan tekst op donker in plaats van een volle cyaan band. Zo verschilt de tweede band duidelijk van de eerste, zonder het hardste vlak van de pagina te zijn. */ .nd-ticker.is-style-cyaan { background: linear-gradient(90deg, var(--nd-black), rgba(0, 180, 216, 0.1) 50%, var(--nd-black)); border-color: rgba(0, 180, 216, 0.35); } .nd-ticker.is-style-cyaan .nd-ticker__track { color: var(--nd-cyan); font-weight: 700; } .nd-ticker.is-style-cyaan .nd-ticker__item::after { background: var(--nd-cyan); width: 0.4rem; height: 0.4rem; } /* Twee banden direct onder elkaar (groep met klasse nd-tickers). De ruimte eronder maakt samen met de extra ruimte van het volgende hoofdstuk dezelfde 173px als elders op de pagina. */ .nd-tickers { padding-bottom: clamp(1.5rem, 3.3vw, 3rem); } .nd-tickers > * { margin-block: 0 !important; } /* overschrijft de blockGap tussen de banden */ .nd-tickers .nd-ticker + .nd-ticker { border-top: 0; } .nd-tickers .is-style-cyaan { position: relative; z-index: 1; } @media (prefers-reduced-motion: reduce) { .nd-ticker__track { animation: none; } .nd-ticker__track[aria-hidden] { display: none; } .nd-ticker { white-space: normal; mask-image: none; } .nd-ticker__track { flex-wrap: wrap; justify-content: center; } } /* ---------- Werkwijze-stappen ---------- */ .is-style-steps .wp-block-column, .nd-step { background: var(--nd-kaart-vlak); border: 1px solid var(--nd-kaart-rand); border-radius: var(--nd-radius-card); padding: clamp(1.5rem, 2.5vw, 2.25rem); } .nd-step__num { font-size: clamp(2.5rem, 3vw, 3.125rem); font-weight: 600; line-height: 1; color: var(--nd-cyan); margin-bottom: 1rem; } .is-style-steps .wp-block-column > :is(h3, h4):first-child::before, .nd-step > :is(h3, h4):first-child::before { content: counter(nd-step, decimal-leading-zero) '.'; counter-increment: nd-step; display: block; font-size: clamp(2.5rem, 3vw, 3.125rem); font-weight: 600; line-height: 1; color: var(--nd-cyan); margin-bottom: 1rem; } .is-style-steps, .nd-steps { counter-reset: nd-step; } /* Het kolommenaantal komt uit de blok-lay-out en blijft anders ook op een telefoon op twee staan. Dan is een kaart nog 159px breed, past "naamsbekendheid" niet in een regel en steekt de tekst buiten het scherm. Onder de 782px dus een kolom. */ @media (max-width: 781px) { .nd-steps.is-layout-grid { grid-template-columns: 1fr; } } .is-style-steps .wp-block-column :is(h3, h4) { margin-top: 0; font-size: 1.35rem; font-weight: 600; } /* Staptitel is een h3 (koppenvolgorde), maar houdt de h4-maat. */ .nd-step > h3:first-child { font-size: var(--nd-fs-h4); } .is-style-steps .wp-block-column p { margin-bottom: 0; } /* ---------- Lijsten ---------- */ .is-style-check { list-style: none; padding-left: 0 !important; } .is-style-check li { position: relative; padding-left: 1.85rem; margin-bottom: 0.5rem; } .is-style-check li::before { content: ''; position: absolute; left: 0; top: 0.35em; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--nd-cyan-faded); -webkit-mask: none; } .is-style-check li::after { content: ''; position: absolute; left: 0.32rem; top: 0.55em; width: 0.45rem; height: 0.25rem; border-left: 2px solid var(--nd-accent-tekst); border-bottom: 2px solid var(--nd-accent-tekst); transform: rotate(-45deg); } /* ---------- FAQ ---------- */ /* Vragen als balken met een dunne rand (core/details, stijl "faq"; werkt zonder JS en levert het FAQ-schema). Een open vraag krijgt een cyaan rand, zonder gloed; het plusje in de cirkel wordt een min. */ .nd-faq { max-width: 50rem; margin-inline: auto; display: grid; gap: 0.75rem; interpolate-size: allow-keywords; } .nd-faq > * { margin: 0 !important; } /* geen blockGap, het raster regelt de ruimte */ .is-style-faq { padding: 0; border-radius: 16px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)); border: 1px solid rgba(255, 255, 255, 0.1); transition: border-color 0.35s var(--nd-ease), box-shadow 0.35s var(--nd-ease), background-color 0.35s var(--nd-ease); } .is-style-faq[open] { background-color: rgba(0, 180, 216, 0.06); border-color: rgba(0, 180, 216, 0.55); box-shadow: 0 0 0 1px rgba(0, 180, 216, 0.15); } .is-style-faq summary { list-style: none; cursor: pointer; position: relative; padding: 1.1rem 4rem 1.1rem 1.35rem; color: var(--nd-white); font-weight: 600; font-size: 1.0625rem; line-height: 1.4; border-radius: 16px; } .is-style-faq summary::-webkit-details-marker { display: none; } .is-style-faq summary:focus-visible { outline: 2px solid var(--nd-cyan); outline-offset: 2px; } /* Icoon: cyaan plus in een dunne cirkel; open = min met cyaan cirkel. */ .is-style-faq summary::after { content: ''; position: absolute; right: 1.1rem; top: 50%; width: 1.75rem; height: 1.75rem; margin-top: -0.875rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); background: linear-gradient(var(--nd-cyan), var(--nd-cyan)) center / 0.75rem 2px no-repeat, linear-gradient(var(--nd-cyan), var(--nd-cyan)) center / 2px 0.75rem no-repeat, var(--nd-navy); /* navy bolletje: het klikbare punt van de vraag, de balk zelf blijft open */ transition: background-size 0.3s var(--nd-ease), border-color 0.3s var(--nd-ease), transform 0.3s var(--nd-ease); } .is-style-faq[open] summary::after { border-color: var(--nd-cyan); background-size: 0.75rem 2px, 2px 0; transform: rotate(180deg); } .is-style-faq > :not(summary) { margin: 0; padding: 0 1.35rem 1.25rem; color: var(--nd-grey); font-size: 0.9375rem; line-height: 1.7; } @media (hover: hover) { .is-style-faq:not([open]):hover { border-color: rgba(0, 180, 216, 0.7); } } /* Zacht open- en dichtschuiven waar de browser dat kan (::details-content); anders klapt hij gewoon open. */ @supports selector(::details-content) { @media (prefers-reduced-motion: no-preference) { .is-style-faq::details-content { block-size: 0; overflow: clip; transition: block-size 0.35s var(--nd-ease), content-visibility 0.35s allow-discrete; } .is-style-faq[open]::details-content { block-size: auto; } } } /* Sectie: kop, intro en een glaskaart "Staat je vraag er niet tussen?" links, de vragen rechts. Desktop: de linkerkant blijft staan terwijl je door de vragen scrolt. Mobiel: kop, vragen, kaart. */ .nd-faq-sectie .nd-faq-sectie__links h2 { margin: 0.75rem 0 1rem; text-align: left; } @media (min-width: 782px) { /* Smalle kolom: kop kleiner dan een gecentreerde sectiekop, en in beide tweekoloms-secties (reviews en FAQ) even groot, zodat ze bij elkaar horen. */ .nd-faq-sectie .nd-faq-sectie__links h2, .nd-reviews .nd-reviews__links h2 { font-size: clamp(1.9rem, 0.9rem + 1.9vw, 2.6rem); } } .nd-faq-sectie .nd-faq-sectie__links > p:not(.is-style-badge) { margin: 0 0 1.75rem; } .nd-faq-sectie .nd-faq { max-width: none; } .nd-faq-kaart { padding: 1.35rem 1.5rem 1.5rem !important; } .nd-faq-kaart p { margin: 0 0 1rem; font-size: 0.9375rem; line-height: 1.6; } .nd-faq-kaart p.nd-faq-kaart__kop { margin-bottom: 0.35rem; color: var(--nd-white); font-weight: 600; font-size: 1.0625rem; } /* ---------- Persoonlijke afzender in een kaart (.nd-persoon) ---------- */ /* Ronde foto met een groene stip, daarnaast wie het is en of hij bereikbaar is. Bedoeld om te laten zien dat er echt iemand klaarstaat, niet een formulier. De foto is zelf ook een link naar WhatsApp, als snelle route voor wie er met de muis op gaat. De stip is decoratie: de status staat er als tekst naast, zodat de betekenis niet alleen in een kleur zit. Groen is hier geen tweede accentkleur maar een statuskleur, net als de Google-kleuren in het scoreblok; gebruik het nergens anders voor. */ .nd-persoon { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 0.875rem; margin: 0 0 1.25rem !important; } .nd-persoon__foto { grid-row: 1 / 3; position: relative; width: 3.5rem; height: 3.5rem; margin: 0 !important; } .nd-persoon__foto a { display: block; border-radius: 50%; } .nd-persoon__foto img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 2px solid var(--nd-border-strong); transition: border-color 0.25s var(--nd-ease); } @media (hover: hover) { .nd-persoon__foto a:hover img { border-color: var(--nd-cyan); } } .nd-persoon__foto a:focus-visible { outline: 2px solid var(--nd-cyan); outline-offset: 3px; } /* De stip ligt op de rand van de foto en heeft een ring in de kaartkleur, zodat hij vrij lijkt te liggen. */ .nd-persoon__foto::after { content: ''; position: absolute; right: 0; bottom: 0; width: 0.875rem; height: 0.875rem; border-radius: 50%; background: var(--nd-status-groen); border: 2px solid var(--nd-navy); pointer-events: none; } /* Een trage pulsering maakt van een stip een teken van leven. Alleen als beweging welkom is. */ @media (prefers-reduced-motion: no-preference) { .nd-persoon__foto::before { content: ''; position: absolute; right: 0; bottom: 0; width: 0.875rem; height: 0.875rem; border-radius: 50%; background: var(--nd-status-groen); animation: nd-puls 2.4s var(--nd-ease) infinite; pointer-events: none; } @keyframes nd-puls { 0% { transform: scale(1); opacity: 0.6; } 70%, 100% { transform: scale(2.2); opacity: 0; } } } .nd-persoon__naam { grid-column: 2; align-self: end; margin: 0 !important; color: var(--nd-white); font-weight: 600; font-size: 1rem; line-height: 1.35; } .nd-persoon__status { grid-column: 2; align-self: start; margin: 0 !important; font-size: 0.875rem; line-height: 1.35; color: var(--nd-grey); } @media (min-width: 782px) { .nd-faq-sectie .nd-split { align-items: flex-start !important; } .nd-faq-sectie .nd-split > .wp-block-column { align-self: flex-start !important; } /* De linkerkolom scrolt niet mee met de vragen (was sticky): hij staat gewoon bovenaan. */ } @media (max-width: 781px) { .nd-faq-sectie .nd-split { flex-direction: column; align-items: stretch !important; gap: 0 !important; } .nd-faq-sectie .nd-faq-sectie__links { display: contents; } .nd-faq-sectie .nd-faq-sectie__links > .is-style-badge { align-self: flex-start; } .nd-faq-sectie .nd-faq-kaart { order: 1; margin-top: 2rem !important; } .is-style-faq summary { padding: 1rem 3.5rem 1rem 1.15rem; font-size: 1rem; } .is-style-faq summary::after { right: 0.9rem; } .is-style-faq > :not(summary) { padding: 0 1.15rem 1.1rem; } /* Na 5 vragen de knop "Alles weergeven (nog N vragen)" (theme.js); de rest pas na die keuze. */ .nd-faq.is-ingekort > .is-style-faq:nth-of-type(n+6) { display: none; } .nd-faq__meer { display: flex; align-items: center; justify-content: center; gap: 0.6rem; width: 100%; margin-top: 0.75rem; padding: 0.95rem 1.15rem; border-radius: 16px; border: 1px dashed rgba(0, 180, 216, 0.45); background: rgba(0, 180, 216, 0.05); color: var(--nd-cyan); font: inherit; font-weight: 600; font-size: 0.9375rem; cursor: pointer; } .nd-faq__meer::after { content: ''; width: 0.5rem; height: 0.5rem; margin-top: -0.25rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); } .nd-faq__meer:focus-visible { outline: 2px solid var(--nd-cyan); outline-offset: 2px; } .nd-faq__meer[hidden] { display: none; } } /* De knop bestaat alleen voor mobiel. */ @media (min-width: 782px) { .nd-faq__meer { display: none; } } /* ---------- Reviews ---------- */ .nd-review { background: var(--nd-navy); border-radius: var(--nd-radius-card); padding: clamp(1.5rem, 2.5vw, 2.25rem); display: flex; flex-direction: column; gap: 0.75rem; } .nd-review__stars { color: var(--nd-cyan); letter-spacing: 0.15em; font-size: 1.1rem; } .nd-review__name { color: var(--nd-white); font-weight: 600; margin: 0; } .nd-review__text { margin: 0; } .nd-review__name { margin-top: auto; padding-top: 0.5rem; } /* Grijs in plaats van wit-30%: dat laatste haalt de contrasteis niet. */ .nd-review__source { font-size: 0.8rem; color: var(--nd-grey); margin: 0; } /* Google-reviews (blokken Google-score en Review). Bewuste uitzondering op "één accentkleur": Google-logo, Google-geel voor de sterren en Google-avatarkleuren wekken herkenning en vertrouwen. Alleen in deze componenten; nergens anders Google-kleuren. */ .nd-sterren { position: relative; display: inline-flex; line-height: 0; vertical-align: middle; } .nd-sterren svg { width: 1.1em; height: 1.1em; flex: none; } .nd-sterren__leeg { display: inline-flex; fill: rgba(255, 255, 255, 0.18); } .nd-sterren__vol { position: absolute; inset: 0 auto 0 0; display: inline-flex; overflow: hidden; fill: var(--nd-google-geel); white-space: nowrap; } .nd-gscore { position: relative; overflow: hidden; display: inline-flex; flex-direction: column; gap: 0.5rem; padding: 1.25rem 1.5rem 1.4rem; border-radius: var(--nd-radius-case); background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); border: 1px solid rgba(255, 255, 255, 0.12); } /* Dunne balk in de vier Google-kleuren bovenaan: direct herkenbaar. */ .nd-gscore::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--nd-google-blauw) 0 25%, var(--nd-google-rood) 25% 50%, var(--nd-google-geel) 50% 75%, var(--nd-google-groen) 75% 100%); } .nd-gscore > * { margin: 0; } .nd-gscore__merk { display: flex; align-items: center; gap: 0.5rem; color: var(--nd-white); font-weight: 600; font-size: 0.95rem; } .nd-gscore__cijfer { display: flex; align-items: center; gap: 0.75rem; } .nd-gscore__getal { color: var(--nd-white); font-size: clamp(2.75rem, 2.2rem + 1.8vw, 3.75rem); font-weight: 800; line-height: 1; letter-spacing: -0.02em; } .nd-gscore .nd-sterren { font-size: 1.5rem; } .nd-gscore__aantal { color: var(--nd-grey); font-size: 0.9rem; } .nd-review-g { position: relative; margin: 0; box-sizing: border-box; display: flex; flex-direction: column; gap: 0.9rem; padding: clamp(1.25rem, 2vw, 1.75rem); border-radius: var(--nd-radius-case); background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)); border: 1px solid rgba(255, 255, 255, 0.1); } /* Uitgelicht en "in beeld" krijgen geen cyaan rand meer: dat hoort bij iets klikbaars, en een review is dat niet. Alle reviewkaartjes houden dezelfde dunne grijze rand. */ .nd-review-g__kop { display: flex; align-items: center; justify-content: space-between; } .nd-review-g__kop .nd-sterren { font-size: 1.05rem; } .nd-review-g__tekst { margin: 0; padding: 0; border: 0; } .nd-review-g__tekst p { margin: 0; color: var(--nd-white-soft); font-size: 1rem; line-height: 1.65; } .nd-review-g__noot { margin: -0.4rem 0 0; font-size: 0.875rem; color: var(--nd-grey); font-style: italic; } .nd-review-g__wie { display: flex; align-items: center; gap: 0.75rem; margin-top: auto; } .nd-review-g__naam { display: block; color: var(--nd-white); font-weight: 600; line-height: 1.3; } .nd-review-g__bron { display: block; color: var(--nd-grey); font-size: 0.875rem; line-height: 1.3; } .nd-avatar { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; font-size: 0.95rem; font-weight: 700; color: var(--nd-white); } /* Kleuren zoals de standaardavatars op Google; tekst gekozen op contrast. */ /* Iets dieper dan Google-blauw #1a73e8: daarmee haalt wit 4,51:1, precies op de grens, waardoor de controle omviel zodra de kaart nog aan het infaden was. Nu 5,4:1 en nog steeds herkenbaar. */ .nd-avatar--blauw { background: #1667d0; } .nd-avatar--rood { background: #c5221f; } .nd-avatar--geel { background: var(--nd-google-geel); color: #202124; } .nd-avatar--groen { background: #188038; } /* Sectie: score links, reviews rechts (kolommenblok "nd-reviews"). */ .nd-reviews .nd-reviews__links h2 { margin: 0.75rem 0 1.5rem; text-align: left; } .nd-reviews .nd-reviews__links .nd-gscore { margin: 0 0 1.75rem; } .nd-reviews__lijst { display: grid; gap: 1rem; } .nd-reviews__lijst > * { margin: 0 !important; } /* geen blockGap, het raster regelt de ruimte */ /* Uitgelicht staat vast in de editor, voor als JS uit staat. Met JS neemt de kaart in beeld het over (.is-carousel + .is-active), op elk schermformaat. */ .nd-review-g { transition: border-color 0.5s var(--nd-ease), box-shadow 0.5s var(--nd-ease), opacity 0.4s var(--nd-ease), transform 0.4s var(--nd-ease); } /* Desktop: links de kop en de score, rechts de reviews als carrousel, naast elkaar op één scherm. Hier stond een meescroll-ontwerp: de linkerkant bleef vastgezet (sticky, 100vh) terwijl de reviews er verticaal langs schoven, met 30vh aanloop. Dat las prettig, maar de sectie werd er ruim twee schermen hoog van en je moest lang doorscrollen voor je verder kon. Niet opnieuw invoeren. De carrousel zelf is dezelfde als op mobiel; theme.js kent .nd-reviews__lijst al en zet de stippen. */ @media (min-width: 782px) { .nd-reviews .nd-split { align-items: center !important; } /* Kop, score en knop dichter op elkaar: de kolom is nu net zo hoog als de kaarten ernaast. */ .nd-reviews .nd-reviews__links h2 { margin: 0 0 1rem; } .nd-reviews .nd-reviews__links .nd-gscore { margin: 0 0 1.25rem; } .nd-reviews__lijst { --nd-kijk: 7rem; /* de kier rechts; wat je van de volgende review ziet is dit min de gap, dus 6rem */ display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 1rem; /* Onder ruimte voor de stippen, die er met een negatieve marge weer in schuiven. Rechts de ruimte waar de volgende review vervaagd om de hoek kijkt, net als op mobiel. Die ruimte komt uit de rij zelf en niet uit een negatieve marge: buiten de kolom treden zou op een smal desktopscherm een horizontale scrollbalk opleveren. */ padding: 0.5rem var(--nd-kijk) 4rem 0; scroll-padding-inline: 0; } /* Eén review per scrollpositie: de kaart vult de kolom op de kier na. Twee halve kaarten naast elkaar levert bij drie reviews maar twee scrollposities op, en dan is er altijd een stip die niets doet. Zo blijven het er drie: 0, kaart+gap, en twee keer kaart+gap. */ .nd-reviews__lijst > * { flex: 0 0 100%; scroll-snap-align: start; } /* Pijlen: klikbaar, dus navy met een witte pijl; bij hover een cyaan rand en een sprongetje, net als andere klikbare dingen. Aan het begin of eind van de rij dimmen ze en doen ze niets. */ .nd-reviews .nd-split > .wp-block-column:not(.nd-reviews__links) { position: relative; } .nd-pijlen { position: absolute; left: 0; right: 7rem; /* 7rem = --nd-kijk van de rij */ display: flex; align-items: center; justify-content: space-between; pointer-events: none; } .nd-pijlen__knop { pointer-events: auto; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border-radius: 50%; border: 1px solid transparent; /* --nd-papier en niet --nd-white: in een lichte sectie wordt --nd-white de donkere tekstkleur, en dan verdween de pijl navy-op-navy. Papier blijft overal wit. */ background: var(--nd-navy); color: var(--nd-papier); box-shadow: 0 6px 18px rgba(5, 24, 40, 0.25); cursor: pointer; transition: transform 0.25s var(--nd-ease), border-color 0.25s var(--nd-ease), opacity 0.25s var(--nd-ease); } .nd-pijlen__knop--vorige { translate: -50% 0; } .nd-pijlen__knop--volgende { translate: 50% 0; } .nd-pijlen__knop::before { content: ''; width: 1.1rem; height: 1.1rem; background: currentColor; -webkit-mask: var(--nd-icon-arrow) center / contain no-repeat; mask: var(--nd-icon-arrow) center / contain no-repeat; } .nd-pijlen__knop--vorige::before { transform: scaleX(-1); } .nd-pijlen__knop:focus-visible { outline: 2px solid var(--nd-cyan); outline-offset: 3px; } .nd-pijlen__knop:disabled { opacity: 0.3; cursor: default; box-shadow: none; } @media (hover: hover) { .nd-pijlen__knop:not(:disabled):hover { transform: translateY(-2px); border-color: var(--nd-cyan); } } @media (prefers-reduced-motion: reduce) { .nd-pijlen__knop:not(:disabled):hover { transform: none; } } } /* Op mobiel swipe je; daar zijn de pijlen er niet. */ @media (max-width: 781px) { .nd-pijlen { display: none; } } /* Mobiel: compacte Google-badge (cijfer links, sterren en aantal rechts), dan de carrousel en pas daarna de knop, zodat de badge en een volledige review samen in beeld passen. */ @media (max-width: 781px) { .nd-reviews .nd-split { flex-direction: column; align-items: flex-start !important; gap: 1.25rem !important; } .nd-reviews .nd-reviews__lijst { padding-top: 1rem; } .nd-reviews__lijst > .nd-review-g { padding: 1.1rem 1.15rem 1.2rem; gap: 0.75rem; } .nd-reviews__lijst .nd-review-g__tekst p { font-size: 0.95rem; line-height: 1.6; } .nd-reviews .nd-reviews__links { display: contents; } .nd-reviews .nd-split > .wp-block-column:not(.nd-reviews__links) { align-self: stretch; width: 100%; } .nd-reviews .nd-reviews__links h2 { margin: 0.75rem 0 1rem; } .nd-reviews .nd-reviews__links .nd-gscore { margin: 0; } .nd-reviews .nd-reviews__links .wp-block-buttons { order: 1; margin-top: 0.5rem; } .nd-gscore { display: grid; grid-template-columns: auto 1fr; column-gap: 0.85rem; row-gap: 0.15rem; align-items: center; padding: 0.8rem 1rem 0.85rem; } .nd-gscore__cijfer { display: contents; } .nd-gscore__merk { grid-column: 1 / -1; margin-bottom: 0.3rem !important; } .nd-gscore__getal { grid-column: 1; grid-row: 2 / span 2; font-size: 2.5rem; } .nd-gscore .nd-sterren, .nd-gscore__aantal { grid-column: 2; } .nd-gscore__merk { font-size: 0.875rem; justify-content: flex-start; } .nd-gscore .nd-sterren { font-size: 1.05rem; justify-self: start; } .nd-gscore__aantal { font-size: 0.75rem; } } /* ---------- Header ---------- */ /* Zwevende pil bovenaan, op elke pagina vast in beeld. Fixed, dus de pagina schuift eronder door; de eerste sectie krijgt daarom extra ruimte bovenin (zie "Ruimte onder de header"). */ .nd-header { position: fixed; z-index: 50; top: var(--nd-header-top); left: 0; right: 0; width: min(var(--nd-header-max), calc(100% - 2 * var(--nd-header-side))); margin-inline: auto; min-height: var(--nd-header-h); box-sizing: border-box; display: flex; align-items: center; padding: 0 0.875rem 0 1.625rem !important; /* overschrijft de globale padding van het groepblok */ border-radius: var(--nd-radius-pill); isolation: isolate; } /* Glas-achtergrond op een pseudo-element: backdrop-filter op de header zelf zou het mobiele menu (position: fixed) opsluiten binnen de pil. */ .nd-header::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgba(10, 10, 10, 0.38); border: 1px solid rgba(255, 255, 255, 0.14); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); transition: background-color 0.25s ease; } .nd-header.is-scrolled::before { background: rgba(10, 10, 10, 0.62); } /* Logo links, menu in het midden, knop rechts. Grid in plaats van de flex-layout van het blok. */ .nd-header .nd-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem; width: 100%; max-width: none; } .nd-header .wp-block-site-logo { justify-self: start; line-height: 0; } .nd-header .wp-block-site-logo img, .nd-header .custom-logo { height: var(--nd-logo-h); width: auto; } .nd-header__cta { justify-self: end; } .nd-header__cta .wp-block-button__link { white-space: nowrap; font-size: 0.9rem; padding: 0.85em 1.35em; } /* Core navigation op donker */ .nd-header .wp-block-navigation { --wp--style--block-gap: 1.75rem; justify-self: center; } .nd-header .wp-block-navigation a { color: var(--nd-grey-nav); font-size: 0.95rem; font-weight: 600; text-decoration: none; } .nd-header .wp-block-navigation a:hover, .nd-header .wp-block-navigation .current-menu-item > a { color: var(--nd-white); } /* Knop "Menu" (tekst in plaats van icoon) als kleine pil, minimaal 44px hoog. */ .nd-header .wp-block-navigation__responsive-container-open, .nd-header .wp-block-navigation__responsive-container-close { min-height: 44px; padding: 0 1.25rem; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.42); border-radius: var(--nd-radius-pill); background: #0f0f0f; color: var(--nd-white); font-family: var(--nd-font); font-size: 0.95rem; font-weight: 600; } .nd-header .wp-block-navigation__responsive-container-open:hover, .nd-header .wp-block-navigation__responsive-container-close:hover { border-color: var(--nd-white); } .nd-header .wp-block-navigation__responsive-container.is-menu-open { background: var(--nd-black); padding: calc(var(--nd-header-space) + 1rem) var(--nd-gutter) 2rem; } /* "Sluiten" op exact dezelfde plek als "Menu" (fixed: los van de padding van het menu). */ .nd-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { position: fixed; top: calc(var(--nd-header-top) + (var(--nd-header-h) - 44px) / 2); right: calc(var(--nd-header-side) + 0.625rem); } .nd-header .wp-block-navigation__responsive-container.is-menu-open a { font-size: clamp(1.6rem, 5vw, 2.2rem); font-weight: 600; color: var(--nd-white); } /* Ruimte onder de header: de eerste sectie van elke pagina schuift onder de pil door. */ .wp-block-post-content > .nd-section:first-child { padding-top: calc(var(--nd-header-space) + var(--nd-space-section)); } /* Behalve als er een hero boven de content staat, zoals op een casepagina: die sectie begint dan niet onder de header, dus de ruimte voor de header hoort er niet nog eens bij. */ main:has(> .nd-hero-video) .wp-block-post-content > .nd-section:first-child { padding-top: var(--nd-space-section); } @media (max-width: 781px) { /* Op een telefoon telt elke schermhoogte: de hero heeft onder de tekst zelf al ruimte, dus daar hoeft niet nog een volle sectieruimte overheen. */ main:has(> .nd-hero-video) .wp-block-post-content > .nd-section:first-child { padding-top: calc(var(--nd-space-section) / 2); } } .wp-block-post-content > .nd-hero:first-child { padding-top: calc(var(--nd-header-space) + clamp(1.5rem, 2.5vw, 2.25rem)); } .wp-block-post-content:has(> :first-child:not(.nd-section)) { padding-top: var(--nd-header-space); } main.nd-section { padding-top: calc(var(--nd-header-space) + var(--nd-space-section)); } /* Geen extra ruimte boven meer voor de eerste hero: de padding in .nd-hero-video__inner rekent de header al mee en houdt boven en onder gelijk, zodat de tekst echt in het midden staat. */ /* ---------- Footer ---------- */ /* Footer: hier houdt de pagina op, het is geen nieuw hoofdstuk. Daarom niet de lichtnaad van de secties (die is ingesprongen, cyaan en vervaagt aan de randen), maar één doorlopende lijn van rand tot rand, neutraal wit. En een eigen vlak: een navy waas die naar zwart zakt, zodat de footer als een andere laag leest en niet als de volgende sectie op hetzelfde doek. */ .nd-footer { position: relative; background: linear-gradient(180deg, rgba(5, 24, 40, 0.85), var(--nd-black) 65%); padding-block: clamp(3rem, 6vw, 4.5rem) clamp(1.5rem, 2.5vw, 2rem); color: var(--nd-grey); } .nd-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--nd-border); pointer-events: none; } .nd-footer h2, .nd-footer h3, .nd-footer h4 { color: var(--nd-cyan); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 1rem; line-height: 1.25; } .nd-footer p { line-height: 1.7; } .nd-footer a { color: var(--nd-grey); text-decoration: none; transition: color 0.2s var(--nd-ease); } .nd-footer a:hover { color: var(--nd-white); } .nd-footer .wp-block-navigation { flex-direction: column; gap: 0.6rem; font-weight: 500; } .nd-footer .wp-block-navigation a:hover { color: var(--nd-cyan); } .nd-footer .wp-block-site-logo { margin-bottom: 1.25rem; } .nd-footer__bottom { margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.8125rem; color: var(--nd-grey); /* kleine tekst: niet lichter dan dit, anders haalt het contrast 4,5:1 niet */ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; } .nd-footer__bottom p { margin: 0; } .nd-footer__bottom a { color: var(--nd-grey); text-decoration: underline; text-underline-offset: 3px; } .nd-socials { display: flex; gap: 0.75rem; list-style: none; padding: 0; margin: 0; } .nd-socials a { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--nd-border); color: var(--nd-white); } .nd-socials svg { width: 1.1rem; height: 1.1rem; fill: currentColor; } .nd-socials a:hover { border-color: var(--nd-cyan); color: var(--nd-cyan); } /* Aanraakdoelen in de footer op mobiel minstens 44px hoog (WCAG-advies voor duimen): de navigatie, e-mail en telefoon, de links onderaan en de social-iconen. Zonder dat waren het tekstregels van zo'n 27px, en tik je er op een telefoon makkelijk naast. Op desktop met een muis is dat niet nodig en blijft de footer compact. */ @media (max-width: 781px) { .nd-footer .wp-block-navigation { gap: 0; } .nd-footer .wp-block-navigation-item__content, .nd-footer a[href^="mailto:"], .nd-footer a[href^="tel:"], .nd-footer__bottom a { display: inline-flex; align-items: center; min-height: 44px; } .nd-socials a { width: 44px; height: 44px; } } /* ---------- Formulieren (Contact Form 7 + core) ---------- */ .wpcf7 input:not([type='submit']):not([type='checkbox']), .wpcf7 textarea, .wpcf7 select, .nd-input { width: 100%; background: var(--nd-navy); border: 1px solid var(--nd-border); border-radius: var(--nd-radius); color: var(--nd-white); font: inherit; padding: 0.9rem 1.1rem; transition: border-color 0.2s, box-shadow 0.2s; } .wpcf7 input::placeholder, .wpcf7 textarea::placeholder { color: var(--nd-faded); } .wpcf7 input:focus, .wpcf7 textarea:focus, .wpcf7 select:focus, .nd-input:focus { outline: none; border-color: var(--nd-cyan); box-shadow: 0 0 0 4px var(--nd-cyan-faded); } .wpcf7 label { color: var(--nd-white); font-weight: 500; display: block; margin-bottom: 0.4rem; } .wpcf7 p { margin-bottom: 1.25rem; } .wpcf7 input[type='submit'] { background: var(--nd-grad-cyan); color: var(--nd-black); border: 0; border-radius: var(--nd-radius-pill); font: inherit; font-size: 1rem; font-weight: 600; padding: 1em 1.5em; cursor: pointer; width: 100%; /* een input kan geen tekst afbreken: volle breedte voorkomt overloop */ } .wpcf7 .nd-form-note { font-size: 0.9rem; margin: -0.5rem 0 0; } .wpcf7 .wpcf7-not-valid-tip { color: #ff6b6b; font-size: 0.85rem; } .wpcf7 form .wpcf7-response-output { border-color: var(--nd-cyan); border-radius: var(--nd-radius); color: var(--nd-white); margin: 1.5rem 0 0; } /* Gratis social scan (pattern "scan", sectie #social-scan): aanbod links, formulier rechts in een glaskaart met gloed. Het formulier is Contact Form 7 met html_class "nd-scanform". */ .nd-scan__kaart { padding: clamp(1.5rem, 3vw, 2.25rem) !important; /* overschrijft de padding van de glasstijl */ /* Dekkend vlak: de kaart loopt mee met het scrollen, en een doorschijnende kaart zou de gloed van de sectie er zichtbaar achterlangs laten schuiven. */ background: rgba(5, 24, 40, 0.94); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } .nd-scan__kaart .is-style-lead, .nd-scan__kaart > p:first-of-type { font-size: 1rem; color: var(--nd-white-soft); margin: 0 0 1.25rem; } /* Levertijd onder de verzendknop: het laatste wat je leest voor je klikt. */ .nd-scanform__levering { margin: 0.875rem 0 0 !important; text-align: center; font-weight: 600; color: var(--nd-white); } .nd-scan__kaart :is(h2, h3) { margin: 0 0 1.25rem; font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); } /* h2 op de losse scan-pagina, h3 in een sectie */ /* Compact: elk veld is één donker vak met het label klein bovenin (.nd-veld), zodat het hele formulier op elk scherm in één keer in beeld past. Het label blijft altijd zichtbaar. */ .nd-scanform { display: grid; gap: var(--nd-veld-gap, 0.625rem); } /* De ruimte tussen de velden komt van de gap van .nd-scanform, niet van marges op de alinea's eromheen. Deze regel stond aan .nd-split vast en gold daardoor alleen op de scanpagina; elk formulier met deze veldvorm heeft hem nodig, anders staat er 36px tussen elk veld en past het formulier niet meer in beeld. */ .wpcf7 form.nd-scanform p { margin: 0; } .nd-scan__kaart > .wpcf7 { margin-top: 0 !important; } /* geen blockGap onder de kop */ .nd-scanform__rij { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nd-veld-gap, 0.625rem); } .nd-scanform__rij > p { margin: 0 !important; } .nd-scanform .nd-veld { position: relative; border-radius: 12px; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.16); transition: border-color 0.2s, box-shadow 0.2s; } .nd-scanform .nd-veld:focus-within { border-color: var(--nd-cyan); box-shadow: 0 0 0 4px var(--nd-cyan-faded); } .nd-scanform .nd-veld:has(.wpcf7-not-valid) { border-color: #ff6b6b; } /* foutkleur, zoals .wpcf7-not-valid-tip */ .nd-scanform .nd-veld label { display: block; margin: 0; padding: 0.5rem 0.9rem 0; color: var(--nd-white-soft); font-size: 0.75rem; font-weight: 600; line-height: 1.3; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nd-scanform__optie { color: var(--nd-grey); font-weight: 400; } .nd-scanform .wpcf7-form-control-wrap { display: block; } .nd-scanform .nd-veld input:not([type='submit']):not([type='checkbox']), /* sterker dan de algemene .wpcf7-velden */ .nd-scanform .nd-veld select { box-sizing: border-box; width: 100%; background: transparent; border: 0; border-radius: 0 0 12px 12px; box-shadow: none; padding: 0.2rem 0.9rem 0.6rem; font-size: 1rem; line-height: 1.5; color: var(--nd-white); } .nd-scanform .nd-veld input:not([type='submit']):not([type='checkbox']):focus, .nd-scanform .nd-veld select:focus { outline: none; box-shadow: none; } /* Tekstvak: dezelfde vorm als een invoerveld. Gebruikt door de pop-up en de contactpagina. */ .nd-scanform .nd-veld textarea { box-sizing: border-box; display: block; width: 100%; resize: vertical; background: transparent; border: 0; border-radius: 0 0 12px 12px; box-shadow: none; padding: 0.2rem 0.9rem 0.6rem; font-family: var(--nd-font); font-size: 1rem; line-height: 1.5; color: var(--nd-white); } .nd-scanform .nd-veld textarea:focus { outline: none; box-shadow: none; } /* Keuzelijst met een eigen cyaan pijltje. */ .nd-scanform .nd-veld select { appearance: none; -webkit-appearance: none; padding-right: 2.5rem; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--nd-cyan) 50%), linear-gradient(135deg, var(--nd-cyan) 50%, transparent 50%); background-position: calc(100% - 1.2rem) 45%, calc(100% - 0.85rem) 45%; background-size: 0.35rem 0.35rem; background-repeat: no-repeat; } .nd-scanform select option { background: var(--nd-navy); color: var(--nd-white); } .nd-scanform .wpcf7-not-valid-tip { padding: 0 0.9rem 0.5rem; font-size: 0.8125rem; } .nd-scanform .nd-scanform__knop { margin-top: 0.25rem; font-size: 1.0625rem; } .nd-scanform .nd-form-note { font-size: 0.8125rem; line-height: 1.5; text-align: center; color: var(--nd-grey); } .nd-scanform .wpcf7-spinner { display: none; } /* laden zie je aan de knop */ .nd-scanform.submitting .nd-scanform__knop { opacity: 0.7; cursor: progress; } .nd-scanform .wpcf7-response-output { margin: 0 !important; padding: 0.75rem 1rem !important; border-radius: 12px; font-size: 0.875rem; } .nd-scanform.invalid .wpcf7-response-output, .nd-scanform.failed .wpcf7-response-output, .nd-scanform.spam .wpcf7-response-output { border-color: #ff6b6b !important; } .nd-scanform.sent .wpcf7-response-output { border-color: var(--nd-cyan) !important; background: var(--nd-cyan-faded); color: var(--nd-white); } /* !important: CF7 zet hier zelf groen */ .nd-scanform .wpcf7-response-output:empty { display: none; } @media (max-width: 600px) { .nd-scanform__rij:not(.nd-scanform__rij--altijd) { grid-template-columns: minmax(0, 1fr); } } /* Klein of laag scherm: kaart compacter, zodat hij in één keer in beeld past (ook op 360x640 en 1366x650). */ @media (max-width: 600px), (max-height: 760px) { .nd-scan .nd-scan__kaart { --nd-veld-gap: 0.5rem; padding: 1.125rem 1.25rem 1.25rem !important; } .nd-scan .nd-scan__kaart :is(h2, h3) { margin-bottom: 0.75rem; font-size: 1.25rem; } .nd-scanform .nd-veld label { padding-top: 0.4rem; } .nd-scanform .nd-veld input:not([type='submit']):not([type='checkbox']), .nd-scanform .nd-veld select { padding-bottom: 0.45rem; } .nd-scanform .nd-scanform__knop { padding-block: 0.85em; } } /* Als eerste sectie van een pagina (de losse scan-pagina) alleen ruimte voor de header, niet de volle sectieruimte: zo past ook daar alles in één scherm. */ .wp-block-post-content > .nd-scan:first-child { padding-top: calc(var(--nd-header-space) + clamp(1rem, 3vh, 2.25rem)); } /* Social proof: de video-tegel onder het aanbod, en onder de kolommen dezelfde glazen logobalk als onder de hero (.nd-logo-bar): label, klantlogo's en als derde deel de Google-score. */ .nd-scan .nd-vpop { margin: 1.5rem 0 0 !important; } /* overschrijft de blockGap */ .nd-scan__bewijs { margin-top: clamp(1.25rem, 2.5vh, 1.75rem) !important; } /* De scheiding voor de Google-score is een rechte streep. Het blok erft een radius van .nd-stat, en een linkerrand op een afgeronde doos buigt aan de uiteinden mee: dat oogt als een haakje. */ .nd-logo-bar .nd-gmini { display: flex; flex-direction: column; justify-content: center; padding-left: clamp(1.25rem, 3vw, 2.5rem); border-left: 1px solid var(--nd-border-strong); border-radius: 0; } @media (max-width: 700px) { .nd-logo-bar .nd-gmini { align-items: center; width: 100%; padding: 0.875rem 0 0; border-left: 0; border-top: 1px solid var(--nd-border-strong); text-align: center; } .nd-logo-bar .nd-gmini__top { justify-content: center; } } /* Belofte direct onder een CTA (.nd-gerust): één zin die zegt wat je krijgt en wanneer. Geen kleine lettertjes maar een reden om te klikken, dus zacht wit op 1rem. Staat alleen bij de zware momenten (werkwijze, de twee dienstblokken, het afsluitblok), niet bij elke tekstlink. !important: overrult de blockGap die core tussen blokken zet. */ .nd-gerust { margin: 0.875rem 0 0 !important; font-size: 0.9375rem; color: var(--nd-grey); line-height: 1.5; } .nd-gerust u { text-decoration-color: var(--nd-cyan); text-decoration-thickness: 2px; text-underline-offset: 3px; } /* Onder een gecentreerde knop blijft de regel een blok onder de knop, niet een zin over de hele sectiebreedte. */ .nd-werkwijze .nd-gerust { max-width: 32rem; margin-inline: auto !important; text-align: center; } /* ---------- Aanbodblok (.nd-aanbod) ---------- */ /* Een aanbod als product tonen: glaskaart met een foto aan de ene kant en aan de andere kant een badge, kop, zin, drie punten met vinkjes en een knop. Gebruikt voor het gratis contentplan halverwege de homepage en voor het contactblok onderaan. Dit was eerder .nd-afsluiter__kaart; die naam is vervangen omdat hetzelfde blok nu op twee plekken staat. De smalle variant eronder is de secundaire CTA: geen foto, een regel tekst en een knop. */ .nd-aanbod { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center; padding: clamp(1.5rem, 3vw, 2.5rem) !important; /* overschrijft de padding van de glasstijl */ text-align: center; } /* Het licht zit binnen de kaart, niet eromheen: een vaste gloed die vanuit de hoek rechtsonder opkomt en naar linksboven uitdooft, met daaroverheen heel licht een raster. Rand dun grijs; een cyaan rand hoort bij iets klikbaars, en de kaart is dat niet (oktober 2026). Hier stond een wolk die de muis volgde (initAanbodGloed in theme.js) en bij hover oplichtte: dat trok aandacht naar de kaart in plaats van naar de knoppen erin. Niet opnieuw invoeren. De gloed zit in de hoek waar de foto staat, niet onder de tekst: zo blijven de punten met vinkjes op een donkere ondergrond leesbaar (zie de opmerking bij de vinkjes hieronder). */ .nd-aanbod:not(.nd-aanbod--smal) { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)), var(--nd-black); border-width: 1px; border-color: var(--nd-border); box-shadow: none; } .nd-aanbod:not(.nd-aanbod--smal)::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(84rem 60rem at 100% 100%, rgba(0, 180, 216, 0.5), rgba(0, 180, 216, 0.2) 34%, rgba(0, 180, 216, 0.06) 58%, transparent 78%), radial-gradient(40rem 30rem at 98% 106%, rgba(46, 91, 136, 0.6), transparent 70%); } /* Raster: lijnen van 1px om de 40px, grijs op 4,5%, en naar de randen toe weggemaskeerd zodat het een textuur blijft en geen ruitjespapier wordt. Ligt boven de gloed, onder de inhoud. */ .nd-aanbod:not(.nd-aanbod--smal)::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px); background-size: 40px 40px; background-position: -1px -1px; -webkit-mask-image: radial-gradient(ellipse 85% 85% at 60% 55%, rgba(0, 0, 0, 1) 35%, transparent 90%); mask-image: radial-gradient(ellipse 85% 85% at 60% 55%, rgba(0, 0, 0, 1) 35%, transparent 90%); } .nd-aanbod__foto { margin: 0; } .nd-aanbod__foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; /* De foto is staand (4:5 op desktop); op mobiel snijdt 16:10 de helft weg. Hoger uitsnijden dan het midden, zodat de gezichten in beeld blijven en niet de benen. */ object-position: 50% 5%; border-radius: var(--nd-radius); display: block; } /* Contentplan-voorbeeld (.nd-plan): het gratis contentplan getekend in plaats van een foto. Een foto van iemand achter een laptop laat zien dat er gewerkt wordt; dit laat zien wat je krijgt. De twee bladen liggen los op de kaart, zonder vlak eromheen: een vlak zou er weer een afbeelding van maken. Zelfde maat als de foto die het vervangt (4:5). Alles erbinnen is in cqw, procenten van de eigen breedte, zodat de compositie op elke maat gelijk blijft en niets herschikt. Geen overflow hidden: het scheve blad erachter mag over de rand van het vlak heen. */ .nd-plan { position: relative; margin: 0; aspect-ratio: 4 / 5; width: 100%; container-type: inline-size; text-align: left; /* het aanbodblok centreert op mobiel; het document niet */ } .nd-plan__blad { position: absolute; left: 6cqw; right: 3cqw; top: 3cqw; bottom: 5cqw; border-radius: 3.2cqw; background: var(--nd-kaart-vlak); border: 1px solid var(--nd-kaart-rand); box-shadow: 0 4cqw 9cqw rgba(0, 0, 0, 0.55); } .nd-plan__blad--achter { transform: rotate(-5deg) translate(-3cqw, 1.5cqw); opacity: 0.55; } .nd-plan__blad--voor { display: flex; flex-direction: column; gap: 3cqw; padding: 6cqw 6cqw 5cqw; transition: transform 0.35s var(--nd-ease), border-color 0.35s var(--nd-ease); } /* Als link: het voorste blad komt bij hover iets omhoog en krijgt een cyaan rand, zodat te zien is dat je erop kunt klikken. De focusring volgt de ronding van de bladen. */ a.nd-plan { display: block; color: inherit; text-decoration: none; border-radius: 3.2cqw; } a.nd-plan:hover .nd-plan__blad--voor { transform: translateY(-1.5cqw); border-color: rgba(0, 180, 216, 0.55); } a.nd-plan:focus-visible { outline: 2px solid var(--nd-cyan); outline-offset: 4px; } @media (prefers-reduced-motion: reduce) { a.nd-plan:hover .nd-plan__blad--voor { transform: none; } } /* In de editor is het een voorbeeld, geen link: een klik zou de editor verlaten. */ .editor-styles-wrapper a.nd-plan { pointer-events: none; } .nd-plan__kop { display: flex; align-items: center; gap: 2.2cqw; } .nd-plan__merk { width: 7cqw; height: 7cqw; border-radius: 1.8cqw; } .nd-plan__soort { font-size: 3.3cqw; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--nd-cyan); } .nd-plan__pdf { margin-left: auto; padding: 0.4cqw 2cqw; border: 1px solid var(--nd-border); border-radius: 99px; font-size: 2.6cqw; font-weight: 700; color: var(--nd-white-soft); } .nd-plan__titel { font-size: 6.6cqw; line-height: 1.12; font-weight: 800; color: var(--nd-white); } .nd-plan__titel span { color: var(--nd-cyan); } .nd-plan__sub { margin-top: -1.4cqw; font-size: 3.2cqw; color: var(--nd-grey); } .nd-plan__lijst { display: grid; gap: 1.7cqw; margin-top: 0.6cqw; } .nd-plan__format { display: grid; grid-template-columns: 6.5cqw minmax(0, 1fr); align-items: center; gap: 2.4cqw; padding: 2cqw 2.4cqw; border-radius: 2.2cqw; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.07); } .nd-plan__format.is-open { background: var(--nd-cyan-faded); border-color: rgba(0, 180, 216, 0.55); } .nd-plan__nr { font-size: 3.4cqw; font-weight: 800; color: var(--nd-cyan); font-variant-numeric: tabular-nums; } .nd-plan__naam { display: block; min-width: 0; font-size: 3.6cqw; font-weight: 600; line-height: 1.2; color: var(--nd-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Een regel, nooit twee: een tweede regel duwt de lijst onder het blad uit. Te lang wordt afgekapt met puntjes; de zijbalk zegt erbij dat de regels kort moeten blijven. */ .nd-plan__regel { display: block; margin-top: 0.4cqw; font-size: 2.6cqw; font-weight: 500; color: var(--nd-grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nd-plan__format.is-open .nd-plan__regel { color: var(--nd-white-soft); font-style: italic; } /* Op een telefoon staat het document boven de tekst. Op de volle breedte wordt het met 4:5 hoger dan een scherm; zo blijft het een plaatje bij de tekst en niet een pagina op zich. */ @media (max-width: 781px) { .nd-plan { max-width: 20rem; margin-inline: auto; } } .nd-aanbod__tekst > * { margin-block: 0; } .nd-aanbod__tekst h2 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem); margin-bottom: 0.75rem; } .nd-aanbod__tekst .is-style-lead { font-size: 1.125rem; color: var(--nd-white-soft); margin-bottom: 1.25rem; } /* inline-block: op mobiel staat de tekst gecentreerd, maar de punten moeten als blok onder elkaar uitlijnen. Zo staat de lijst in het midden en lezen de regels toch netjes links. */ .nd-aanbod__tekst .is-style-check { display: inline-block; text-align: left; margin-bottom: 1.5rem; } /* De punten worden wit in plaats van grijs. De wolk kan onder elke regel terechtkomen, en grijs haalt op de kern van die wolk maar 2,0:1; wit-zacht haalt daar 5,4:1. Op zwart alleen staat grijs prima, maar de wolk beweegt en licht bij hover verder op, dus die felste stand is de maat. Dat is ook de bovengrens: op rgba(0,180,216,.72) zakt wit-zacht naar 3,7:1 en haalt de eis van 4,5:1 niet meer. */ .nd-aanbod__tekst .is-style-check li { color: var(--nd-white-soft); } .nd-aanbod__tekst .wp-block-buttons { justify-content: center; } .nd-afsluiter__bewijs { margin-top: clamp(1.75rem, 4vw, 2.75rem) !important; } /* Secundaire CTA: dezelfde vorm, maar een trapje zachter. Geen gloed en geen foto, zodat hij het blok erboven niet beconcurreert. */ .nd-aanbod--smal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; max-width: 60rem; margin-inline: auto !important; padding: clamp(1.125rem, 2.5vw, 1.5rem) clamp(1.25rem, 3vw, 2rem); text-align: left; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--nd-border); border-radius: var(--nd-radius-card); } .nd-aanbod--smal p { margin: 0; font-size: 1.0625rem; color: var(--nd-white-soft); } .nd-aanbod--smal .wp-block-buttons { margin: 0; flex: none; } @media (max-width: 600px) { .nd-aanbod--smal { flex-direction: column; align-items: stretch; text-align: center; } .nd-aanbod--smal .wp-block-buttons { justify-content: center; } } /* Vanaf tablet: foto links, tekst rechts en linksuitgelijnd. */ @media (min-width: 782px) { /* Kaart smaller dan de sectie: anders staat er te veel leegte naast de korte tekst. */ .nd-aanbod { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); max-width: 60rem; margin-inline: auto; text-align: left; } .nd-aanbod__foto img { aspect-ratio: 4 / 5; } .nd-aanbod__tekst h2 { font-size: clamp(1.75rem, 1.1rem + 1.5vw, 2.375rem); } .nd-aanbod__tekst .wp-block-buttons { justify-content: flex-start; } .nd-afsluiter .nd-aanbod { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); max-width: 66rem; } .nd-afsluiter .nd-aanbod__foto { order: 2; } } .nd-aanbod__tekst .is-style-badge { margin-bottom: 1.1rem; } /* Landingssjabloon: alleen het logo, gecentreerd en zonder link. Op zo'n pagina is het formulier de enige actie; een menu of een tweede knop leidt daar alleen van weg. */ /* !important: de basispil zet links meer ruimte dan rechts (voor logo en knop naast elkaar) en doet dat zelf met !important. Zonder menu en knop moet die ruimte gelijk zijn, anders staat het logo net naast het midden. */ .nd-header--landing { padding-inline: 1.25rem !important; } .nd-header .nd-header__inner--midden { grid-template-columns: 1fr; } .nd-header .nd-header__inner--midden .wp-block-site-logo { justify-self: center; margin: 0; } /* ---------- Cijferregen (easter egg na een geslaagde aanvraag) ---------- */ /* Canvas over het hele scherm, boven de header maar onder niets anders. Vangt geen klikken op en staat niet in de toegankelijkheidsboom: het is versiering, de bevestiging staat in tekst. Het element wordt door theme.js aangemaakt en na 2,8 seconden weer verwijderd. */ .nd-regen { position: fixed; inset: 0; z-index: 120; pointer-events: none; } /* Scanpagina, bovenste sectie: alles gecentreerd. Kop, drie punten, de video die vanzelf start en één knop naar het formulier onderaan. Geen tweede actie: dit is een landingspagina. */ .nd-scan { text-align: center; } /* De gloed staat hier midden achter de video en voller dan elders: deze sectie heeft geen kaarten en geen kolommen, en zou zonder die gloed als een zwart vlak lezen. Met .nd-section erbij, anders wint de standaard gloedstijl van het blok. */ .nd-section.nd-scan { background: radial-gradient(ellipse 58% 50% at 50% 46%, rgba(46, 91, 136, 0.55), transparent 72%), radial-gradient(ellipse 38% 34% at 50% 44%, rgba(0, 180, 216, 0.22), transparent 74%), var(--nd-band); } /* De video is het middelpunt van de pagina, dus die mag oplichten. */ .nd-scan .nd-speler { border-color: rgba(0, 180, 216, 0.35); box-shadow: 0 0 0 1px rgba(0, 180, 216, 0.22), 0 0 70px rgba(0, 180, 216, 0.2), 0 30px 70px rgba(0, 0, 0, 0.55); } /* Op smalle schermen kleiner, en alles gecentreerd net als de hero op de homepage. */ .nd-scan .nd-scan__aanbod :is(h1, h2) { margin: 0 0 1rem; font-size: clamp(1.625rem, 7.8vw, 2.25rem); } .nd-scan .is-style-lead { margin: 0 auto 2rem; max-width: 40rem; font-size: 1.0625rem; color: var(--nd-white-soft); } .nd-scan .is-style-lead u { text-decoration-color: var(--nd-cyan); text-decoration-thickness: 2px; text-underline-offset: 3px; } .nd-scan .nd-speler { margin-inline: auto; max-width: 56rem; } .nd-scan .wp-block-buttons { margin-top: 1.75rem; justify-content: center; } /* De enige knop op de pagina mag groter dan gewoon. */ .nd-btn--groot .wp-block-button__link { font-size: 1rem; padding: 1.05em 1.6em; } @media (min-width: 600px) { .nd-btn--groot .wp-block-button__link { font-size: 1.125rem; padding: 1.05em 2.25em; } } .nd-scan__bewijs { margin-top: clamp(1.75rem, 4vw, 2.75rem) !important; } /* Het formulier onderaan de pagina, gecentreerd in een glaskaart. */ .nd-scanvraag .nd-scan__kaart { max-width: 44rem; margin-inline: auto; text-align: left; } .nd-scanvraag .nd-scan__kaart :is(h1, h2, h3) { text-align: center; } @media (min-width: 782px) { .nd-scan .nd-scan__aanbod :is(h1, h2) { font-size: clamp(2.25rem, 1.1rem + 2.1vw, 3rem); } .nd-scan .is-style-lead { font-size: 1.1875rem; margin-bottom: 2.25rem; } /* De video schaalt met de schermhoogte, zodat de knop en de logobalk in het eerste scherm blijven. Bij 16/9 is de breedte dus de beperking, niet andersom. */ .nd-scan .nd-speler__video { width: auto; height: clamp(13rem, 40vh, 26rem); max-width: 100%; } } /* Lagere schermen: kop en video kleiner, zodat de knop en de logobalk in beeld blijven. */ @media (min-width: 782px) and (max-height: 940px) { .nd-scan .nd-scan__aanbod :is(h1, h2) { font-size: clamp(1.875rem, 1rem + 1.6vw, 2.5rem); margin-bottom: 1rem; } .nd-scan .is-style-lead { font-size: 1.0625rem; margin-bottom: 1.5rem; } .nd-scan .nd-speler__video { width: auto; height: clamp(13rem, 36vh, 22rem); } .nd-scan .wp-block-buttons { margin-top: 1.25rem; } .nd-scan__bewijs { margin-top: 1.25rem !important; padding-block: 0.625rem; } } /* 720p-laptops: video nog wat kleiner en de balk compacter, anders valt die net buiten beeld. */ @media (min-width: 782px) and (max-height: 780px) { .nd-scan .nd-speler__video { width: auto; height: clamp(11rem, 30vh, 18rem); } .nd-scan__bewijs { margin-top: 0.875rem !important; --nd-logo-band-h: 1.375rem; } } /* ---------- Videospeler op de pagina (blok "Videospeler") ---------- */ /* Grote video die gewoon op de pagina speelt, ook op mobiel. De cyaan knop komt uit theme.js en ligt over de eigen bediening van de browser heen; zodra de video speelt verdwijnt hij. */ .nd-speler { position: relative; margin: 0; overflow: hidden; width: fit-content; max-width: 100%; border-radius: var(--nd-radius); border: 1px solid var(--nd-border); background: var(--nd-navy); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); } .nd-speler__video { display: block; width: 100%; aspect-ratio: var(--nd-speler-ratio, 16 / 9); background: #000; /* Poster en video vullen het kader allebei, zodat er nooit zwarte balken staan. Het kader heeft de vorm die bij het blok is ingesteld; een video met diezelfde vorm wordt dus niet bijgesneden. Alleen een video met een andere vorm (nu nog de tijdelijke staande) verliest zijn randen. */ object-fit: cover; } .nd-speler__play { position: absolute; inset: 0; margin: auto; width: 4.5rem; height: 4.5rem; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: var(--nd-cyan); box-shadow: 0 0 0 10px rgba(0, 180, 216, 0.18), 0 10px 30px rgba(0, 0, 0, 0.5); transition: transform 0.25s var(--nd-ease), box-shadow 0.25s var(--nd-ease); } .nd-speler__play::before { content: ''; position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-left: 1.15rem solid var(--nd-black); border-top: 0.7rem solid transparent; border-bottom: 0.7rem solid transparent; transform: translateX(0.18rem); } @media (hover: hover) { .nd-speler__play:hover { transform: scale(1.08); box-shadow: 0 0 0 14px rgba(0, 180, 216, 0.22), 0 10px 30px rgba(0, 0, 0, 0.5); } } .nd-speler.is-speelt .nd-speler__play { display: none; } @media (max-width: 600px) { .nd-speler__play { width: 3.5rem; height: 3.5rem; } .nd-speler__play::before { border-left-width: 0.9rem; border-top-width: 0.55rem; border-bottom-width: 0.55rem; } } /* ---------- Video met pop-up ---------- */ /* Tegel: poster met afspeelknop en twee regels tekst. Klikken opent de video groot in een dialog. */ .nd-vpop__knop { display: flex; align-items: center; gap: 1rem; padding: 0.6rem 1.25rem 0.6rem 0.6rem; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.1); background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)); color: inherit; text-decoration: none; transition: border-color 0.3s var(--nd-ease), box-shadow 0.3s var(--nd-ease); } .nd-vpop__beeld { position: relative; flex: none; width: 7.5rem; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: var(--nd-navy); } .nd-vpop__poster { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s var(--nd-ease); } .nd-vpop__play { position: absolute; inset: 0; margin: auto; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--nd-cyan); box-shadow: 0 0 0 6px rgba(0, 180, 216, 0.25); transition: transform 0.3s var(--nd-ease); } .nd-vpop__play::after { content: ''; position: absolute; inset: 0; margin: auto; left: 0.15rem; width: 0.7rem; height: 0.8rem; background: var(--nd-black); clip-path: polygon(0 0, 100% 50%, 0 100%); } .nd-vpop__tekst { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .nd-vpop__titel { color: var(--nd-white); font-weight: 600; line-height: 1.35; } .nd-vpop__sub { color: var(--nd-grey); font-size: 0.875rem; line-height: 1.4; } .nd-vpop__knop:focus-visible { outline: 2px solid var(--nd-cyan); outline-offset: 3px; } @media (hover: hover) { .nd-vpop__knop:hover { border-color: rgba(0, 180, 216, 0.6); } .nd-vpop__knop:hover .nd-vpop__play { transform: scale(1.08); } .nd-vpop__knop:hover .nd-vpop__poster { transform: scale(1.05); } } /* De pop-up: donkere, wazige achtergrond; de video zo groot als past, in zijn eigen vorm. */ html.has-dialoog { overflow: hidden; } .nd-vpop-dialoog { padding: 0; border: 0; background: transparent; max-width: none; max-height: none; overflow: visible; } .nd-vpop-dialoog::backdrop { background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(6px); } .nd-vpop-dialoog__video { display: block; width: min(92vw, 70rem, calc(86vh * 16 / 9)); aspect-ratio: 16 / 9; height: auto; border-radius: 16px; background: var(--nd-black); box-shadow: 0 0 0 1px rgba(0, 180, 216, 0.35); } .nd-vpop-dialoog.is-staand .nd-vpop-dialoog__video { width: min(92vw, calc(86vh * 9 / 16)); aspect-ratio: 9 / 16; } .nd-vpop-dialoog__sluit { position: fixed; top: 1rem; right: 1rem; width: 2.75rem; height: 2.75rem; border-radius: 50%; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.25); background-color: rgba(0, 0, 0, 0.6); background-image: linear-gradient(45deg, transparent calc(50% - 1px), var(--nd-white) calc(50% - 1px), var(--nd-white) calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(-45deg, transparent calc(50% - 1px), var(--nd-white) calc(50% - 1px), var(--nd-white) calc(50% + 1px), transparent calc(50% + 1px)); background-size: 1rem 1rem; background-position: center; background-repeat: no-repeat; } .nd-vpop-dialoog__sluit:focus-visible { outline: 2px solid var(--nd-cyan); outline-offset: 3px; } /* De schaal zit op de inhoud, niet op het zelf: een transform op de dialoog maakt daarvan het referentiekader voor position:fixed eronder, en dan verspringen het kruisje en de eigen cursor de eerste tienden van een seconde. */ @media (prefers-reduced-motion: no-preference) { .nd-vpop-dialoog[open] { animation: nd-vpop-waas 0.3s var(--nd-ease); } .nd-vpop-dialoog[open] .nd-vpop-dialoog__video, .nd-vpop-dialoog[open] .nd-vpop-dialoog__sluit { animation: nd-vpop-in 0.3s var(--nd-ease); } } @keyframes nd-vpop-waas { from { opacity: 0; } } @keyframes nd-vpop-in { from { opacity: 0; transform: scale(0.96); } } /* ---------- Scroll-animatie ---------- */ .nd-afb { opacity: 0; transform: translateY(24px); transition: opacity 0.6s var(--nd-ease) var(--nd-delay, 0s), transform 0.6s var(--nd-ease) var(--nd-delay, 0s); } .nd-afb.is-visible { opacity: 1; transform: none; } /* Getrapte opbouw: elk element 0.12s later dan het vorige. */ .nd-afb--2 { --nd-delay: 0.12s; } .nd-afb--3 { --nd-delay: 0.24s; } .nd-afb--4 { --nd-delay: 0.36s; } @media (prefers-reduced-motion: reduce) { .nd-afb { opacity: 1; transform: none; transition: none; } } /* Zonder JavaScript blijft alles zichtbaar. */ @media (scripting: none) { .nd-afb { opacity: 1; transform: none; } } /* ---------- Hulpklassen ---------- */ .nd-center { text-align: center; } .nd-maxw-700 { max-width: 700px; } .nd-maxw-800 { max-width: 800px; margin-inline: auto; } .nd-maxw-1000 { max-width: 1000px; margin-inline: auto; } .nd-cv-auto { content-visibility: auto; contain-intrinsic-size: auto 600px; } .nd-emoji { font-style: normal; } /* Tekst alleen op desktop of alleen op mobiel (tekstopmaak in de editor-werkbalk). Zelfde grens als waar kolommen onder elkaar springen. */ .nd-alleen-mobiel { display: none; } @media (max-width: 781px) { .nd-alleen-desktop { display: none; } .nd-alleen-mobiel { display: inline; } } /* Instagram-feed / externe widgets pas renderen als ze in beeld zijn */ .nd-lazy-embed { content-visibility: auto; contain-intrinsic-size: auto 480px; } /* ---------- Cursor (desktop) ---------- */ /* theme.js zet .nd-has-cursor pas bij de eerste muisbeweging; zonder JS blijft de gewone cursor. !important: links, knoppen en core-blokken zetten zelf een cursor. */ .nd-has-cursor, .nd-has-cursor * { cursor: none !important; } .nd-has-cursor :is(input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]), textarea, [contenteditable="true"]) { cursor: text !important; } .nd-cursor { --nd-cursor-ring: 34px; --nd-cursor-dot: 6px; /* Boven alles wat vast op de pagina ligt, ook de cookiebanner (z-index 99999): daaronder viel de cursor weg terwijl de systeemcursor al verborgen is, en zag je boven de banner niets. */ position: fixed; inset: 0; z-index: 1000000; pointer-events: none; opacity: 0; transition: opacity 0.25s ease; } .nd-has-cursor .nd-cursor { opacity: 1; } .nd-cursor.is-hidden, .nd-cursor.is-text { opacity: 0; } .nd-cursor__ring, .nd-cursor__dot { position: absolute; top: 0; left: 0; border-radius: 50%; will-change: translate; } .nd-cursor__ring { width: var(--nd-cursor-ring); height: var(--nd-cursor-ring); margin: calc(var(--nd-cursor-ring) / -2) 0 0 calc(var(--nd-cursor-ring) / -2); border: 1.5px solid var(--nd-cyan); transition: scale 0.3s var(--nd-ease), background-color 0.3s var(--nd-ease), border-color 0.3s var(--nd-ease); } .nd-cursor__dot { width: var(--nd-cursor-dot); height: var(--nd-cursor-dot); margin: calc(var(--nd-cursor-dot) / -2) 0 0 calc(var(--nd-cursor-dot) / -2); background: var(--nd-cyan); transition: scale 0.25s var(--nd-ease); } /* Boven iets klikbaars: ring groter met cyaan waas, stip weg. */ .nd-cursor.is-link .nd-cursor__ring { scale: 1.6; background-color: rgba(0, 180, 216, 0.12); border-color: rgba(0, 180, 216, 0.9); } .nd-cursor.is-link .nd-cursor__dot { scale: 0; } /* Klikken: ring even kleiner. */ .nd-cursor.is-down .nd-cursor__ring { scale: 0.8; } .nd-cursor.is-link.is-down .nd-cursor__ring { scale: 1.3; } /* ---------- Editor-specifiek ---------- */ .editor-styles-wrapper { background: var(--nd-black); color: var(--nd-grey); } .editor-styles-wrapper .nd-video__el { display: none; } .editor-styles-wrapper .nd-video__play { opacity: 1; } /* In de editor beide varianten tonen, zodat ze allebei te bewerken zijn; gestippeld = alleen mobiel. */ .editor-styles-wrapper .nd-alleen-desktop { display: inline; } .editor-styles-wrapper .nd-alleen-mobiel { display: inline; opacity: 0.6; text-decoration: underline dotted; } /* ---------- Licht schema (uitzondering) ---------- */ .nd-light { --nd-black: #ffffff; --nd-navy: #e5e5e6; --nd-white: #051828; --nd-grey: #051828; --nd-border: #8c8c8c; background: #ffffff; color: #051828; } /* ---------- Case-tegels ---------- */ /* Casekaart (blok "Cases"): video boven, gegevens eronder. De link in de titel is met ::after over de hele kaart getrokken, dus klikken op video, logo of tekst gaat naar de case. */ .nd-case-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); margin-inline: auto; } /* Smaller dan "breed", zodat een hele kaart (video + gegevens) op één scherm past. */ .nd-case-cards.alignwide, .nd-case-cards { max-width: 64rem; } .nd-case-card { position: relative; display: flex; flex-direction: column; border-radius: var(--nd-radius-case); overflow: hidden; /* Zelfde vlak als de stapkaart: de video vult de bovenkant, het navy staat achter de tekst eronder. */ background: var(--nd-kaart-vlak); border: 1px solid var(--nd-kaart-rand); transition: transform 0.35s var(--nd-ease), border-color 0.35s var(--nd-ease), box-shadow 0.35s var(--nd-ease); } .nd-case-card__media .nd-video { width: 100%; } .nd-case-card__media .nd-video__frame { border-radius: 0; } .nd-case-card__media .nd-video__poster, .nd-case-card__media .nd-video__el { transition: transform 0.6s var(--nd-ease); } .nd-case-card__body { display: flex; flex-direction: column; align-items: flex-start; flex: 1; gap: 0.6rem; padding: 1.1rem 1.4rem 1.25rem; text-align: left; } .nd-case-card__title { margin: 0; font-size: 1.5rem; font-weight: 700; line-height: 1.15; text-transform: uppercase; letter-spacing: -0.01em; text-wrap: balance; } .nd-case-card__link { color: var(--nd-white); text-decoration: none; } .nd-case-card__link::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; } .nd-case-card__link:focus-visible { outline: none; } .nd-case-card:has(.nd-case-card__link:focus-visible) { outline: 2px solid var(--nd-cyan); outline-offset: 3px; } .nd-case-card__platforms { margin: 0; font-size: 0.875rem; color: var(--nd-grey); line-height: 1.5; } .nd-case-card__stats { display: flex; gap: 1.75rem; margin: 0; padding-top: 0.875rem; border-top: 1px solid var(--nd-border); } .nd-case-card__stat { display: flex; flex-direction: column-reverse; } .nd-case-card__stat dd { margin: 0; color: var(--nd-cyan); font-size: 1.5rem; font-weight: 800; line-height: 1.1; } .nd-case-card__stat dt { font-size: 0.875rem; color: var(--nd-grey); text-transform: lowercase; } /* Zonder platforms en resultaten mag er geen gat vallen: dan sluit het knopje direct op de titel aan. */ .nd-case-card__body:not(:has(.nd-case-card__stats)) .nd-case-card__cta { margin-top: 0.15rem; } /* Rond knopje met een pijl, in plaats van "Bekijk case". Een pijl op een kaart die helemaal klikbaar is zegt genoeg; de tekst herhaalde alleen wat de kaart al doet. Vol cyaan met een zwarte pijl, dezelfde combinatie als een gewone knop, zodat je van een afstand ziet dat er iets te klikken is. Het blijft decoratief (aria-hidden in render.php): de link zit op de klantnaam. */ .nd-case-card__cta { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-top: auto; border-radius: 50%; background: var(--nd-cyan); color: var(--nd-black); } .nd-case-card__cta::after { content: ''; width: 1.05rem; height: 1.05rem; background: currentColor; -webkit-mask: var(--nd-icon-arrow) center / contain no-repeat; mask: var(--nd-icon-arrow) center / contain no-repeat; transition: transform 0.25s var(--nd-ease); } /* Speelt vanzelf: geen play-knop bij hover (wel bij toetsenbordfocus en in de handmatige modus). */ .nd-case-card .nd-video.is-playing .nd-video__play { opacity: 0; pointer-events: none; } .nd-case-card .nd-video.is-playing:has(.nd-video__play:focus-visible) .nd-video__play { opacity: 0.8; } .nd-video-manual .nd-case-card .nd-video__play { position: absolute; z-index: 2; } /* Hover (en gekoppelde hover vanuit de logoband): optillen en een cyaan rand, geen gloed. Alleen op apparaten die echt kunnen hoveren; op touch blijft een tik anders "hangen". Mobiel krijgt in plaats daarvan de actieve kaart in de carrousel. */ @media (hover: hover) { .nd-case-card:hover, .nd-case-card.is-highlight { transform: translateY(-6px); border-color: rgba(0, 180, 216, 0.85); box-shadow: 0 0 0 1px rgba(0, 180, 216, 0.45); /* rand, geen gloed */ } .nd-case-card:hover .nd-video__poster, .nd-case-card:hover .nd-video__el { transform: scale(1.04); } .nd-case-card:hover .nd-case-card__cta::after { transform: translateX(3px); } } @media (prefers-reduced-motion: reduce) { .nd-case-card, .nd-case-card:hover, .nd-case-card.is-highlight { transform: none; } .nd-case-card:hover .nd-video__poster, .nd-case-card:hover .nd-video__el { transform: none; } } /* Mobiele carrousel (casekaarten en reviews tot 781px, werkwijze-stappen tot 1023px): horizontaal swipen, de volgende kaart kijkt om de hoek. theme.js zet .is-carousel, markeert de kaart in beeld met .is-active en zet de stippen (.nd-dots) eronder. */ @media (max-width: 781px) { .nd-case-cards, .nd-reviews__lijst { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; --nd-rand: var(--wp--style--root--padding-left, 1.5rem); margin-inline: calc(var(--nd-rand) * -1) !important; /* tot de schermrand; overschrijft de auto-marge van alignwide */ max-width: none; /* Ruimte onder de kaarten voor de stippen, die met een negatieve marge terugschuiven; boven een beetje lucht zodat de kaart niet tegen de kop aan staat. */ padding: 1.5rem var(--nd-rand) 4rem; scroll-padding-inline: var(--nd-rand); } .nd-case-cards > * { flex: 0 0 min(74vw, 20rem); scroll-snap-align: start; } .nd-reviews__lijst > * { flex: 0 0 min(84vw, 22rem); scroll-snap-align: start; } } @media (max-width: 1023px) { .nd-stappen { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; --nd-rand: var(--wp--style--root--padding-left, 1.5rem); margin-inline: calc(var(--nd-rand) * -1) !important; /* tot de schermrand; overschrijft de auto-marge van alignwide */ max-width: none; padding: 1.5rem var(--nd-rand) 4rem; /* zie hierboven: ruimte om de gloed te laten uitdoven */ scroll-padding-inline: var(--nd-rand); } .nd-stappen > * { flex: 0 0 min(74vw, 20rem); scroll-snap-align: start; } } :is(.nd-case-cards, .nd-stappen, .nd-reviews__lijst)::-webkit-scrollbar { display: none; } /* De kaart in beeld staat vol en op ware grootte, de rest zakt weg. Dat is genoeg: de kaart heeft een eigen vlak dat van donker naar licht loopt, dus je ziet zo al welke kaart aan de beurt is. Hier stond ook een cyaan gloed om de actieve kaart, als mobiel equivalent van hover. Op een klein scherm staat die gloed bij het scrollen bijna doorlopend in beeld, en met de knoppen erbij werd het te veel blauw. Hover op desktop houdt de gloed wel: die verschijnt alleen als je hem vraagt. */ .is-carousel > * { opacity: 0.55; transform: scale(0.95); transition: opacity 0.4s var(--nd-ease), transform 0.4s var(--nd-ease); } .is-carousel > .is-active { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .is-carousel > * { transform: none; } } /* Het logo in de glazen balk licht mee op met de actieve casekaart. */ @media (max-width: 781px) { .nd-logo-band .nd-logos a.is-active img { opacity: 1; transform: translateY(-2px); } } /* Stippen onder de kaarten: de actieve is een uitgerekte cyaan pil met gloed. Alleen zichtbaar als theme.js de rij als carrousel herkent (anders staat hidden erop). */ .nd-dots { display: flex; justify-content: center; margin-top: -3rem; position: relative; } .nd-dots[hidden] { display: none; } .nd-dots__dot { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; /* aanraakdoel 44x44, visueel kleiner */ padding: 0; border: 0; background: none; cursor: pointer; } .nd-dots__dot::before { content: ''; width: 0.5rem; height: 0.5rem; border-radius: var(--nd-radius-pill); background: rgba(255, 255, 255, 0.3); transition: width 0.35s var(--nd-ease), background-color 0.35s var(--nd-ease), box-shadow 0.35s var(--nd-ease); } .nd-dots__dot[aria-current="true"]::before { width: 1.75rem; background: var(--nd-cyan); } .nd-dots__dot:focus-visible { outline-offset: -4px; border-radius: var(--nd-radius-pill); } /* ---------- Werkwijze: stapkaarten ---------- */ /* Groep "nd-stappen" met glazen stapkaarten ("nd-stap"): foto, nummer met korte titel, witte subtitel, tekst. Vanaf 1024px alle vier op een rij, daaronder de carrousel hierboven. Bewust een stil overzicht: de kaarten zeggen zelf al wat de volgorde is (01 tot 04), dus er hoeft geen beweging overheen. Hier stond een laserlijn die bij het scrollen om elke kaart heen liep, met de sectie vastgezet en een gloed eronder. Dat werd te veel tegelijk; niet opnieuw invoeren. */ .nd-stappen { position: relative; gap: clamp(1rem, 1.5vw, 1.5rem); margin-bottom: clamp(1.5rem, 2.4vw, 2rem) !important; /* overschrijft de blockGap */ counter-reset: nd-stap; } .nd-stappen > * { margin: 0 !important; } /* geen blockGap tussen de kaarten, het raster regelt de ruimte */ /* Opbouw per kaart: foto (van rand tot rand bovenin), korte titel met nummer, witte subtitel (H3) en een zin of twee context. De foto is een gewoon Afbeelding-blok met klasse nd-stap__beeld. */ /* De stapkaart draagt de blokstijl "Glas", maar krijgt het kaartvlak (zie --nd-kaart-vlak). Hover blijft van de glasstijl. */ .nd-stap { --nd-stap-pad: 1.25rem; counter-increment: nd-stap; display: flex; flex-direction: column; padding: var(--nd-stap-pad); } .nd-stap { background: var(--nd-kaart-vlak); border-color: var(--nd-kaart-rand); } .nd-stap > .nd-stap__beeld { margin: calc(var(--nd-stap-pad) * -1) calc(var(--nd-stap-pad) * -1) 1.25rem !important; aspect-ratio: 16 / 10; overflow: hidden; border-radius: calc(var(--nd-radius-case) - 1px) calc(var(--nd-radius-case) - 1px) 0 0; } .nd-stap > .nd-stap__beeld img { display: block; width: 100%; height: 100%; object-fit: cover; transition: filter 0.6s var(--nd-ease); } /* Korte titel: klein, cyaan, kapitalen, met het stapnummer in de logo-gradient ervoor. */ .nd-stap p.nd-stap__label { display: flex; align-items: baseline; gap: 0.6rem; } /* rest van de stijl staat bij Tekststijlen, sublabel */ .nd-stap__label::before { content: counter(nd-stap, decimal-leading-zero); font-size: 1.125rem; font-weight: 800; letter-spacing: -0.01em; background: var(--nd-grad-logo); -webkit-background-clip: text; background-clip: text; color: transparent; } .nd-stap h3 { color: var(--nd-white); font-size: clamp(1.2rem, 1.05rem + 0.4vw, 1.375rem); margin: 0 0 0.6rem; } .nd-stap p:not(.nd-stap__label) { font-size: 0.9375rem; line-height: 1.6; } @media (min-width: 1024px) { .nd-stappen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .nd-stap > .nd-stap__beeld { aspect-ratio: 16 / 9; } } /* Binnenkomst: de stappen komen bij het scrollen één voor één binnen (theme.js zet .is-visible op de groep, die zelf de klasse nd-afb heeft). Zonder JS of bij reduced motion staan ze er gewoon. */ .nd-stappen.nd-afb { opacity: 1; transform: none; } @media (scripting: enabled) and (prefers-reduced-motion: no-preference) { .nd-stappen.nd-afb:not(.is-visible) > .nd-stap { opacity: 0; } .nd-stappen.nd-afb.is-visible > .nd-stap { animation: nd-stap-in 0.6s var(--nd-ease) backwards; animation-delay: calc(var(--nd-i, 0) * 0.1s); } } .nd-stap:nth-child(2) { --nd-i: 1; } .nd-stap:nth-child(3) { --nd-i: 2; } .nd-stap:nth-child(4) { --nd-i: 3; } .nd-stap:nth-child(5) { --nd-i: 4; } .nd-stap:nth-child(6) { --nd-i: 5; } @keyframes nd-stap-in { from { opacity: 0; transform: translateY(20px); } } /* Icoon (blok newdigits/icoon): lijn-icoon in een cyaan cirkel. */ .nd-icoon { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; color: var(--nd-cyan); background: rgba(0, 180, 216, 0.1); border: 1px solid rgba(0, 180, 216, 0.45); margin-bottom: 1.25rem; } .nd-icoon svg { width: 1.5rem; height: 1.5rem; } .is-style-glass > .nd-icoon:first-child { margin-top: 0; } /* ---------- Zigzag: foto naast tekst (diensten) ---------- */ /* Kolommenblok met klasse "nd-split": foto en tekst naast elkaar. "nd-split--omgekeerd" spiegelt de rij op desktop; op mobiel staat de foto altijd boven de tekst (volgorde in de inhoud). */ .nd-split { gap: clamp(2rem, 5vw, 4.5rem) !important; align-items: center; } /* overschrijft de blockGap van het kolommenblok */ /* Twee rijen onder elkaar horen als een blok te lezen, niet als twee losse secties. Was 6rem: dat gaf samen met de hoge foto's het langste blok van de pagina zonder dat er meer in stond. */ .nd-split + .nd-split { margin-top: clamp(2.5rem, 4.5vw, 4rem); } /* De fotokolom is smaller dan de tekstkolom: het blok legt twee diensten uit, dus de tekst mag de ruimte hebben. De foto blijft 4:3 en wordt daardoor ook minder hoog, wat de hele rij compacter maakt. */ @media (min-width: 782px) { .nd-split > .wp-block-column:has(.nd-foto) { flex: 0 0 43%; } } @media (min-width: 782px) { .nd-split--omgekeerd { flex-direction: row-reverse; } } .nd-split h3 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem); font-weight: 700; line-height: 1.15; margin: 0 0 1rem; text-wrap: balance; } .nd-split p:not(.is-style-kicker):not(.is-style-badge) { margin: 0 0 1.25rem; } .nd-split .is-style-check { margin: 0 0 1.75rem; } .nd-split .is-style-check li { color: var(--nd-white); } /* Foto met een blauw randje (groep "nd-foto"). Hier stond een blauwe wolk achter de foto; die is weg: gloed is voorbehouden aan de laatste sectie. Er stond ook een glazen pil linksonder op de foto, maar die herhaalde letterlijk het eerste vinkje in de lijst ernaast. Niet opnieuw invoeren: een bijschrift dat hetzelfde zegt als de tekst ernaast is versiering. */ .nd-foto { position: relative; isolation: isolate; } .nd-foto .wp-block-image { margin: 0; } .nd-foto .wp-block-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--nd-radius-case); box-shadow: 0 0 0 1px rgba(0, 180, 216, 0.45), 0 24px 60px rgba(0, 0, 0, 0.45); } /* ---------- Hero (home) ---------- */ .nd-hero { padding-bottom: clamp(3rem, 6vw, 5.5rem); overflow: hidden; } /* De logoband hoort bij de hero, dus staat hij dichterbij dan een gewone sectie. Wel ruim genoeg: op 64px leek het bovenin geplakt terwijl de rest van de pagina op 173px staat. */ .nd-hero:has(+ .nd-logo-band) { padding-bottom: clamp(3rem, 7.6vw, 7rem); } .nd-hero .wp-block-columns { gap: clamp(2.5rem, 4vw, 4rem); } .nd-hero h1 { font-size: var(--nd-fs-hero); font-weight: 800; line-height: 1.04; letter-spacing: -0.02em; margin: 1.25rem 0 1.5rem; } .nd-hero .is-style-lead { font-size: 1.125rem; font-weight: 400; color: var(--nd-white-soft); max-width: 34rem; margin: 0; } .nd-hero .is-style-lead strong { color: var(--nd-white); font-weight: 700; } .nd-hero .wp-block-buttons { margin-top: 2rem; } /* Cijfers onder de knoppen */ .nd-hero .nd-stats { gap: 1.25rem 2.25rem; margin-top: 2.25rem; } .nd-stat > * { margin: 0; } .nd-stat__value { color: var(--nd-white); font-size: 1.125rem; font-weight: 700; line-height: 1.3; } .nd-stat__label { color: var(--nd-grey); font-size: 0.875rem; line-height: 1.4; } /* Alleen voor schermlezers. */ .nd-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Google-score als kerncijfer (blok Google-score, weergave "compact"): G, score en sterren in de Google-kleuren, als link naar de reviews op Google. */ .nd-gmini { color: inherit; text-decoration: none; border-radius: 8px; } .nd-gmini__top { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 0.45rem; } .nd-gmini .nd-google-g { width: 1.05em; height: 1.05em; flex: none; } .nd-gmini__sterren { display: inline-flex; } .nd-gmini .nd-sterren { font-size: 0.8em; } .nd-gmini .nd-stat__label { transition: color 0.2s var(--nd-ease); } .nd-gmini:focus-visible { outline: 2px solid var(--nd-cyan); outline-offset: 4px; } @media (hover: hover) { .nd-gmini:hover .nd-stat__label { color: var(--nd-white); text-decoration: underline; text-underline-offset: 3px; } } /* Drie staande video's in een waaier: de middelste vooraan, de buitenste iets gedraaid erachter. */ .nd-reels { display: flex; justify-content: center; align-items: center; padding-block: 1rem; } .nd-reels > .nd-video { flex: none; width: var(--nd-reel-w); margin: 0; position: relative; } .nd-reels > .nd-video .nd-video__frame { border-radius: 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); } .nd-reels > .nd-video:nth-child(2) { width: calc(var(--nd-reel-w) * 1.1); z-index: 2; } .nd-reels > .nd-video:nth-child(1) { transform: perspective(1200px) rotateY(14deg) scale(0.9); margin-right: calc(var(--nd-reel-w) * -0.22); z-index: 1; } .nd-reels > .nd-video:nth-child(3) { transform: perspective(1200px) rotateY(-14deg) scale(0.9); margin-left: calc(var(--nd-reel-w) * -0.22); z-index: 1; } /* In de waaier geen play-knop bij hover: de video's spelen vanzelf. Met het toetsenbord blijft de knop wel zichtbaar (pauzeren moet kunnen), en bij reduced motion / Save-Data staat hij altijd (zie .nd-video-manual). */ .nd-reels > .nd-video.is-playing:hover .nd-video__play { opacity: 0; pointer-events: none; } .nd-reels > .nd-video.is-playing:focus-within:not(:has(:focus-visible)) .nd-video__play { opacity: 0; } /* Mobiel: gecentreerd en compact, zodat de video's al deels in beeld staan. Knoppen naast elkaar (met de korte "alleen mobiel"-tekst), cijfers kleiner. */ @media (max-width: 781px) { .nd-hero .wp-block-columns { gap: 1.75rem; } .nd-hero .wp-block-column { text-align: center; } .nd-hero h1 { margin: 1rem 0 1rem; } .nd-hero .is-style-lead { margin-inline: auto; } /* Twee knoppen naast elkaar zolang ze allebei passen, anders onder elkaar op volle breedte. Hier stond flex-basis 0 met nowrap: dat kneep elke knop tot de halve rij, smaller dan zijn eigen tekst, en overflow: hidden sneed de rest weg. "Sparren over je socials?" werd zo "rren over je socials?", zonder dat iets liet zien dat er tekst miste. Nu is de basis de tekstbreedte zelf (flex-basis auto), dus past het tweetal niet meer, dan wrapt de rij. Daardoor verschillen de knoppen een paar pixels in breedte; dat weegt niet op tegen een knoptekst die stilletjes verdwijnt. Zonder nowrap gaat een tekst die ook op een eigen regel niet past over twee regels: zichtbaar is altijd beter dan weggesneden. */ .nd-hero .wp-block-buttons { flex-wrap: wrap; gap: 0.625rem; margin-top: 1.5rem; } .nd-hero .wp-block-button { flex: 1 1 auto; min-width: 0; } .nd-hero .wp-block-button__link { width: 100%; padding-inline: 0.75em; justify-content: center; } .nd-hero .nd-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-top: 1.5rem; } .nd-hero .nd-stat__value { font-size: 1rem; line-height: 1.25; } .nd-hero .nd-stat__label { line-height: 1.3; hyphens: auto; } /* Google-kerncijfer mobiel: G en score, daaronder de sterren, daaronder "3 reviews" (de G zegt al Google). */ .nd-hero .nd-gmini__top { display: grid; grid-template-columns: auto auto; justify-content: center; } .nd-hero .nd-gmini .nd-google-g { justify-self: end; } .nd-hero .nd-gmini__cijfer { justify-self: start; } .nd-hero .nd-gmini__sterren { grid-column: 1 / -1; justify-self: center; } .nd-hero .nd-gmini__op { display: none; } } /* Heel smalle telefoons (≤ 359px): knoptekst iets kleiner zodat beide knoppen passen. */ @media (max-width: 359px) { .nd-hero .wp-block-button__link { font-size: 0.875rem; padding-inline: 0.5em; } } /* Sectie donker met blauwe gloed (blokstijl "Donker met gloed"). Pure CSS-verlopen, geen afbeelding. */ .is-style-glow { background: radial-gradient(ellipse 55% 60% at 82% 42%, var(--nd-glow-steel), transparent 70%), radial-gradient(ellipse 50% 45% at 18% 0%, var(--nd-glow-cyan), transparent 70%), var(--nd-band); } /* Variant "Donker met gloed (midden)": één zachte gloed achter de kaarten, die ruim vóór de onderrand uitdooft, zodat de volgende sectie er zonder harde rand op aansluit. */ .is-style-glow-center { background: radial-gradient(ellipse 60% 42% at 50% 64%, var(--nd-glow-steel), transparent 72%), radial-gradient(ellipse 40% 28% at 50% 62%, var(--nd-glow-cyan), transparent 72%), var(--nd-band); } /* Variant "Donker met gloed (zijkanten)": gloed links boven en rechts onder, die een zigzag van foto's volgt. Zo krijgt een sectie een eigen lichtbeeld op hetzelfde zwarte doek. */ .is-style-glow-sides { background: radial-gradient(ellipse 42% 32% at 12% 34%, var(--nd-glow-steel), transparent 72%), radial-gradient(ellipse 42% 32% at 88% 74%, var(--nd-glow-steel), transparent 72%), radial-gradient(ellipse 30% 22% at 88% 74%, var(--nd-glow-cyan), transparent 72%), var(--nd-band); } /* Op grotere schermen valt de gloed over meer zwart; daar iets voller. */ @media (min-width: 782px) { .is-style-glow, .is-style-glow-center, .is-style-glow-sides { --nd-glow-steel: rgba(46, 91, 136, 0.3); --nd-glow-cyan: rgba(0, 180, 216, 0.1); } } /* Gloed: waar hij wel vol mag. Een moment op de homepage (de hero) plus de scan-pagina. Overal anders blijft het bij diepte in de achtergrond. */ .nd-hero, .nd-scan { --nd-glow-steel: rgba(46, 91, 136, 0.45); --nd-glow-cyan: rgba(0, 180, 216, 0.18); } @media (min-width: 782px) { .nd-hero, .nd-scan { --nd-glow-steel: rgba(46, 91, 136, 0.62); --nd-glow-cyan: rgba(0, 180, 216, 0.24); } /* De hero op desktop: de cyaan gloed linksboven wordt sterker en komt hoger, zodat hij achter de header door loopt. De header is een doorschijnende pil; met licht erachter tekent hij zich af in plaats van op te gaan in het zwart. Alleen hier, niet in .is-style-glow zelf, want de scan-pagina gebruikt diezelfde stijl en heeft die nadruk niet nodig. De navigatietekst haalt op het lichtste punt nog 6,5:1, dus daar zit ruimte. */ .nd-hero.is-style-glow { --nd-glow-cyan: rgba(0, 180, 216, 0.34); background: radial-gradient(ellipse 55% 60% at 82% 42%, var(--nd-glow-steel), transparent 70%), radial-gradient(ellipse 58% 52% at 20% -4%, var(--nd-glow-cyan), transparent 72%), var(--nd-band); } } /* Badge: kleine pil met een cyaan stip (blokstijl "Badge" op een alinea). */ .is-style-badge { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.45rem 1rem; border-radius: var(--nd-radius-pill); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); color: var(--nd-white); font-size: 0.875rem; font-weight: 600; line-height: 1.3; margin: 0; } .is-style-badge::before { content: ''; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--nd-cyan); box-shadow: 0 0 0 3px var(--nd-cyan-faded); /* een ring, geen gloed */ } /* Badge met een icoon in plaats van de stip: zet "nd-pil--scherm", "nd-pil--klok" of "nd-pil--vink" bij Extra CSS-klassen van een badge-alinea. Het icoon is cyaan, de tekst blijft wit. */ .is-style-badge[class*="nd-pil--"]::before { width: 1rem; height: 1rem; border-radius: 0; box-shadow: none; -webkit-mask: var(--nd-pil-icoon) center / contain no-repeat; mask: var(--nd-pil-icoon) center / contain no-repeat; } .nd-pil--scherm { --nd-pil-icoon: var(--nd-icon-scherm); } /* Badge met een groene stip in plaats van de cyaan: "bereikbaar". Zet "nd-badge--online" bij Extra CSS-klassen van een badge-alinea. Bewust geen nd-pil--: die klassen maken van de stip een icoon. */ .is-style-badge.nd-badge--online::before { background: var(--nd-status-groen); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nd-status-groen) 22%, transparent); } .nd-pil--klok { --nd-pil-icoon: var(--nd-icon-klok); } .nd-pil--vink { --nd-pil-icoon: var(--nd-icon-vink); } /* Boog onderaan een sectie (blokstijl "Boog onderaan"), in de kleur van de sectie eronder. */ .is-style-curve-bottom { position: relative; isolation: isolate; } .is-style-curve-bottom::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; z-index: -1; height: clamp(56px, 9.5vw, 135px); background: var(--nd-curve-color, var(--nd-black)); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 8 64 8' preserveAspectRatio='none'%3E%3Cpath d='M64 15.9Q32 .4 0 15.9V18h64z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 8 64 8' preserveAspectRatio='none'%3E%3Cpath d='M64 15.9Q32 .4 0 15.9V18h64z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; pointer-events: none; } /* Case-hero logo */ .nd-hero-video__logo img { max-height: 56px; width: auto; } /* Header onder 900px: logo links, knop "Menu" rechts. De hoofdknop staat direct in de hero. */ @media (max-width: 899px) { .nd-header { padding: 0 0.625rem 0 1.25rem !important; } .nd-header .nd-header__inner { grid-template-columns: 1fr auto; } .nd-header .wp-block-navigation { justify-self: end; } .nd-header .nd-header__cta { display: none; } .nd-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; } .nd-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; } /* Landingssjabloon: geen menu, dus het logo blijft ook hier in het midden. De padding van de pil is links groter dan rechts, dus die gelijktrekken, anders staat het logo net naast het midden. */ .nd-header--landing { padding-inline: 0.625rem !important; } /* overschrijft de padding hierboven */ .nd-header .nd-header__inner--midden { grid-template-columns: 1fr; } } /* Heel smalle telefoons: kleiner logo en minder tussenruimte, anders duwt de pil de pagina breder. */ @media (max-width: 359px) { :root { --nd-logo-h: 24px; } .nd-header .nd-header__inner { gap: 0.75rem; } .nd-header { padding-left: 1rem !important; } /* overschrijft de padding hierboven */ } /* ---------- Case-intro ---------- */ /* De case-intro gebruikt dezelfde gecentreerde kop als de rest van de pagina, maar een maat kleiner: deze kop is een zin over de klant en geen sectielabel van twee woorden. Het verhaal blijft de lichte tekst, net als de intro boven de pijnpunten; grijs zou de leidende zin van de pagina zwakker maken dan de ondersteunende tekst eronder. */ .nd-case-intro h2 { font-size: var(--nd-fs-h3); font-weight: 700; line-height: 1.2; hyphens: manual; text-wrap: balance; } .nd-case-intro .nd-section__head p { color: var(--nd-white-soft); } .nd-case-intro .nd-section__head { margin-bottom: 0; } /* ---------- Werkwijze: rijen dichter op elkaar ---------- */ .is-style-steps + .is-style-steps { margin-top: var(--wp--style--block-gap, 1.25rem); } .nd-section > .wp-block-buttons:last-child { margin-top: var(--nd-space-block); } /* ---------- Formulier-fallback ---------- */ .nd-form-fallback { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; } /* ---------- 404: productiefout ---------- */ /* De foutpagina is een videospeler die niets kan afspelen: een frame met een grote 404 erin, het label "Video niet gevonden" en onderin een tijdbalk met een gat waar de beelden horen te staan. Alles is opgebouwd uit tokens en pseudo-elementen, er wordt geen video of afbeelding geladen. theme.js laat de cijfers bij het laden even scrambelen; zonder JS staat er gewoon 404. */ .nd-404 { text-align: center; } .nd-404__speler { position: relative; width: min(46rem, 100%); margin-inline: auto; aspect-ratio: 16 / 9; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 3rem; /* ruimte voor de tijdbalk, die absoluut onderin staat */ overflow: hidden; background: var(--nd-navy); border: 1px solid rgba(0, 180, 216, 0.35); border-radius: var(--nd-radius); box-shadow: 0 0 0 1px rgba(0, 180, 216, 0.22), 0 30px 70px rgba(0, 0, 0, 0.55); } /* Scanlijnen: heel licht, zodat het frame als beeldscherm leest en niet als lege kaart. */ .nd-404__speler::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px); } /* De scanlijn die bij een storing door het kader schiet. Staat standaard buiten beeld. */ .nd-404__speler::after { content: ''; position: absolute; left: 0; right: 0; z-index: 1; top: -12%; height: 7%; opacity: 0; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(0, 180, 216, 0.18), transparent); } .nd-404__cijfer { position: relative; display: inline-block; margin: 0; font-size: clamp(4rem, 15vw, 9rem); font-weight: 700; line-height: 1; letter-spacing: -0.02em; /* De knop-gradient, niet die van het logo: staalblauw haalt op navy maar 2,6:1 en dat is te weinig voor grote tekst (AA vraagt 3:1). Cyaan naar cyan-deep haalt 4,8:1. */ background: linear-gradient(180deg, var(--nd-cyan) 0%, var(--nd-cyan-deep) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Met JS staat het cijfer er drie keer: de basis in de gradient, en daarboven een cyaan en een staalblauwe kopie die tijdens een storing als verschoven stroken opflitsen. De gradient verhuist dan naar de basislaag, want anders knipt hij ook door de kopieën heen. Zonder JS staat er één laag en gebeurt er niets. */ .nd-404__cijfer.is-gelaagd { background: none; } .nd-404__laag { display: block; } .nd-404__laag--basis { background: linear-gradient(180deg, var(--nd-cyan) 0%, var(--nd-cyan-deep) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .nd-404__laag--a, .nd-404__laag--b { position: absolute; inset: 0; pointer-events: none; clip-path: inset(100% 0 0 0); /* standaard onzichtbaar; de keyframes snijden de strook open */ /* Screen telt licht op in plaats van de basis af te dekken. Zo ziet het eruit als een kleurfout in het beeld, en kan het contrast van het cijfer tijdens een storing nooit zakken. */ mix-blend-mode: screen; } .nd-404__laag--a { color: var(--nd-cyan); } .nd-404__laag--b { color: var(--nd-steel); } /* Elk cijfer krijgt van theme.js een eigen vakje met vaste breedte, anders springt de regel tijdens het scrambelen heen en weer. */ .nd-404__vak { display: inline-block; width: 0.62em; } /* De storing: de twee kopieën laten om de paar seconden twee stroken zien, de basislaag schokt kort, en er schiet een scanlijn door het kader. De cycli zijn expres ongelijk (4,2 / 5,7 / 6,5 / 7,3 seconden), zodat het niet als een metronoom gaat lopen. steps(1, end) laat de waarden springen in plaats van vloeien: een storing gaat aan en uit, hij faseert niet. Per stoot verspringt er hooguit een smalle strook van het cijfer, ruim onder het vlak waarvoor de flitsgrens van WCAG 2.3.1 geldt. Wie minder beweging wil krijgt een stilstaande 404. */ @media (prefers-reduced-motion: no-preference) { .nd-404__laag--a { animation: nd-404-a 4.2s steps(1, end) infinite; } .nd-404__laag--b { animation: nd-404-b 5.7s steps(1, end) infinite; } .nd-404__laag--basis { animation: nd-404-schok 6.5s steps(1, end) infinite; } .nd-404__speler::after { animation: nd-404-streep 7.3s steps(1, end) infinite; } } @keyframes nd-404-a { 0%, 84% { clip-path: inset(100% 0 0 0); translate: 0; } 85% { clip-path: inset(16% 0 64% 0); translate: -5px 0; } 88% { clip-path: inset(52% 0 30% 0); translate: 6px 0; } 91%, 100% { clip-path: inset(100% 0 0 0); translate: 0; } } @keyframes nd-404-b { 0%, 88% { clip-path: inset(100% 0 0 0); translate: 0; } 89% { clip-path: inset(34% 0 44% 0); translate: 4px 0; } 92% { clip-path: inset(68% 0 14% 0); translate: -6px 0; } 95%, 100% { clip-path: inset(100% 0 0 0); translate: 0; } } @keyframes nd-404-schok { 0%, 95% { translate: 0; } 96% { translate: 3px -2px; } 97.5% { translate: -3px 2px; } 99%, 100% { translate: 0; } } @keyframes nd-404-streep { 0%, 92% { top: -12%; opacity: 0; } 93% { top: 26%; opacity: 1; } 95% { top: 58%; opacity: 1; } 97%, 100% { top: -12%; opacity: 0; } } .nd-404__label { margin: 0.75rem 0 0; font-size: clamp(0.6875rem, 2vw, 0.9375rem); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); } .nd-404__balk { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 0.875rem; margin: 0; padding: 0.75rem 1.125rem; background: rgba(0, 0, 0, 0.55); border-top: 1px solid var(--nd-border); } /* Afspeelknop en tijdspoor zijn pseudo-elementen: geen extra markup voor pure versiering. De volgorde in de flexrij is knop (1), spoor (2), tijdcode (3). */ .nd-404__balk::before { content: ''; order: 1; flex: none; width: 0.625rem; height: 0.75rem; background: var(--nd-white); clip-path: polygon(0 0, 100% 50%, 0 100%); } .nd-404__balk::after { content: ''; order: 2; flex: 1 1 auto; height: 4px; border-radius: var(--nd-radius-pill); background: repeating-linear-gradient(135deg, var(--nd-cyan) 0 3px, transparent 3px 7px) 38% 0 / 24% 100% no-repeat, rgba(255, 255, 255, 0.16); } .nd-404__tijd { order: 3; flex: none; margin: 0; font-size: 0.75rem; color: var(--nd-grey); font-variant-numeric: tabular-nums; } /* De kop blijft kleiner dan de 404 in het frame: het cijfer draagt de boodschap, de kop legt uit. */ .nd-404 .nd-404__kop { margin-top: clamp(2rem, 4vw, 3rem); font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem); } .nd-404__tekst { max-width: 34rem; margin-inline: auto; } .nd-404 .nd-404__knop { margin-top: var(--nd-space-block); } @media (max-width: 600px) { .nd-404__speler { padding-bottom: 2.25rem; } .nd-404__balk { gap: 0.625rem; padding: 0.5rem 0.75rem; } .nd-404__tijd { font-size: 0.6875rem; } } /* ---------- Contact-pop-up (blok "Contact-pop-up", .nd-dialoog) ---------- */ /* Een native . Die doet zelf al wat je anders in JavaScript moet bouwen: focus blijft binnen het venster, Escape sluit, de rest van de pagina is inert, en bij sluiten gaat de focus terug naar de knop waarmee hij geopend werd. Zonder JavaScript blijft hij dicht (display: none) en gaan de knoppen gewoon naar /contact/. */ .nd-dialoog { width: min(32rem, calc(100vw - 2rem)); margin: auto; padding: 0; background: transparent; border: 0; color: var(--nd-grey); overflow: visible; } .nd-dialoog::backdrop { background: rgba(0, 0, 0, 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .nd-dialoog__kaart { position: relative; max-height: min(88vh, 48rem); overflow-y: auto; padding: clamp(1.5rem, 4vw, 2.25rem); background: rgba(5, 24, 40, 0.97); border: 1px solid var(--nd-border); border-radius: var(--nd-radius-card); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); } .nd-dialoog__sluit { position: absolute; top: 0.875rem; right: 0.875rem; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; background: transparent; color: var(--nd-white); border: 1px solid var(--nd-border); border-radius: var(--nd-radius-pill); cursor: pointer; transition: border-color 0.2s var(--nd-ease), background 0.2s var(--nd-ease); } .nd-dialoog__sluit:hover { border-color: var(--nd-white); background: rgba(255, 255, 255, 0.06); } .nd-dialoog__sluit svg { width: 1.125rem; height: 1.125rem; } /* Zinsopbouw in plaats van de kapitalen die h2 standaard krijgt: dit is een kop in een klein venster, en "MEER WETEN OVER MANAGEMENT" in kapitalen schreeuwt daar. */ .nd-dialoog__titel { margin: 0 2.5rem 0.5rem 0; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); font-weight: 600; text-transform: none; letter-spacing: 0; } .nd-dialoog__intro { margin: 0 0 1.5rem; font-size: 0.9375rem; line-height: 1.6; color: var(--nd-grey); } /* De velden erven de vormgeving van .nd-scanform; hier alleen de verschillen. */ .nd-dialoogform .nd-veld label { white-space: normal; } .nd-dialoogform .nd-form-note { font-size: 0.8125rem; line-height: 1.5; text-align: center; color: var(--nd-grey); } /* Op telefoons als vel onderaan: dan staat het eerste veld boven het toetsenbord. */ @media (max-width: 600px) { /* max-width: de browser geeft een standaard 100% min 2em, waardoor het vel rechts een strook liet. */ .nd-dialoog { width: 100%; max-width: 100%; margin: auto 0 0; } .nd-dialoog__kaart { max-height: 88vh; border-radius: var(--nd-radius-card) var(--nd-radius-card) 0 0; padding-bottom: calc(clamp(1.5rem, 4vw, 2.25rem) + env(safe-area-inset-bottom)); } } /* Ook hier schuift de kaart en niet de dialoog: zie de opmerking bij .nd-vpop-dialoog. */ @media (prefers-reduced-motion: no-preference) { .nd-dialoog[open] { animation: nd-dialoog-waas 0.22s var(--nd-ease); } .nd-dialoog[open] .nd-dialoog__kaart { animation: nd-dialoog-in 0.22s var(--nd-ease); } .nd-dialoog[open]::backdrop { animation: nd-dialoog-waas 0.22s var(--nd-ease); } } @keyframes nd-dialoog-in { from { translate: 0 12px; } } @keyframes nd-dialoog-waas { from { opacity: 0; } } /* ---------- Pijnpunten: drie observaties naast elkaar ---------- */ /* Het kaartvlak, net als de stapkaarten, de casekaarten en de FAQ. Losse tekstblokken op zwart stonden ongelijk: de koppen lopen niet even lang door, dus begon elke alinea op een andere hoogte. Het kaartvlak geeft ze een gedeelde onder- en bovenkant en zet ze naast elkaar als drie even zware observaties. Het cyaan streepje blijft: dat onderscheidt deze kaarten van de stapkaarten, die met een nummer beginnen. Geen hover-reactie: hier valt niets te klikken, en een kaart die oplicht belooft het tegendeel. Daarom wordt de gloed van .is-style-glass hier uitgezet. */ .nd-pijnpunten { gap: clamp(1rem, 1.8vw, 1.5rem) !important; } /* !important: overschrijft de blockGap van het kolommenblok */ .nd-pijnpunten > .wp-block-column { background: var(--nd-kaart-vlak); border-color: var(--nd-kaart-rand); } @media (hover: hover) { .nd-pijnpunten > .wp-block-column:hover { transform: none; border-color: var(--nd-kaart-rand); box-shadow: none; } } .nd-pijnpunten > .wp-block-column::before { content: ''; display: block; width: 2.25rem; height: 3px; border-radius: 2px; background: var(--nd-cyan); margin-bottom: 1.125rem; } .nd-pijnpunten h3 { margin: 0 0 0.75rem; font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.55rem); font-weight: 600; line-height: 1.3; } /* Iets lichter dan de standaard bodytekst: deze drie regels dragen de sectie, dus ze mogen niet wegvallen tegen de kop erboven. De intro boven de kolommen gaat mee, anders is de ondersteunende tekst lichter dan de leidende zin en klopt de volgorde niet meer. */ .nd-pijnpunten p { margin: 0; color: var(--nd-white-soft); } .nd-section:has(.nd-pijnpunten) .nd-section__head p { color: var(--nd-white-soft); } /* De knop sluit de sectie af en staat los van de drie kaarten. Omdat de sectie op een knop eindigt en daarna meteen de lichte sectie begint, krijgt hij onder evenveel ruimte als boven: anders staat de knop tegen de kleurwissel aan. */ .nd-pijnpunten__cta { margin-top: clamp(2.5rem, 5vw, 3.75rem) !important; } .nd-section:has(.nd-pijnpunten__cta) { padding-bottom: calc(var(--nd-space-section) * 1.45); } @media (max-width: 781px) { .nd-pijnpunten { gap: clamp(1.75rem, 5vw, 2.25rem) !important; } } /* ---------- FAQ: omlijnd op het zwarte doek ---------- */ /* Eerder stond de sectie op navy met bijna zwarte balken erop: het doek had de kaartkleur en de kaarten de doekkleur, waardoor je oppervlak en object niet uit elkaar kon halen. Niet opnieuw omdraaien. Nu staat alles op zwart en zijn vragen en contactkaart allebei alleen omlijnd. */ /* De contactkaart volgt de vragen ernaast: geen vlak, dunne grijze rand, zelfde ronding (oktober 2026). Hij stond in het navy kaartvlak en was daarmee het enige gevulde vlak in de sectie; dat woog zwaarder dan de vragen en dan het afsluitblok eronder, dat het hoogtepunt moet blijven. De knop is daarom ook omlijnd (is-style-ghost), net als "Stel je vraag" in het afsluitblok. */ .nd-faq-sectie .nd-faq-kaart { background: none; border-color: var(--nd-border); border-radius: 16px; } /* De ring om de groene stip heeft de kleur van de ondergrond; hier is dat het zwarte doek. */ .nd-faq-sectie .nd-persoon__foto::after { border-color: var(--nd-black); } /* De vragen zelf zijn geen kaarten maar regels in een lijst: geen vlak, alleen een dunne grijze rand (oktober 2026). Bij hover en als hij open is wordt de rand cyaan; geen gloed. Het navy zit alleen nog in het bolletje met het plusje. */ .nd-faq-sectie .is-style-faq { background: none; border-color: var(--nd-border); } .nd-faq-sectie .is-style-faq[open] { background: none; border-color: rgba(0, 180, 216, 0.7); box-shadow: none; } /* ---------- Licht vlak met raster (.nd-licht) ---------- */ /* Twee secties staan op wit in plaats van op zwart: "Waarmee wij helpen" en de reviews. Het raster maakt er een werkvlak van, zoals een snijmat of een storyboardvel, en de kaarten liggen er als losse vellen bovenop: die dekken het raster af en steken daardoor uit. Binnen deze sectie betekenen --nd-white, --nd-grey en --nd-border "contrast tegen het doek", niet letterlijk wit of grijs. Daardoor kantelt elk bestaand component mee zonder eigen lichte variant; alleen wat zich met een harde rgba(255,255,255,...) aan wit vastklampt staat hieronder apart. */ .nd-licht { --nd-band: var(--nd-papier); --nd-white: var(--nd-navy); --nd-white-soft: rgba(5, 24, 40, 0.82); --nd-grey: #55606B; --nd-grey-nav: #55606B; --nd-border: rgba(5, 24, 40, 0.13); --nd-border-strong: rgba(5, 24, 40, 0.26); --nd-faded: rgba(5, 24, 40, 0.38); --nd-cyan-faded: rgba(0, 112, 126, 0.13); --nd-accent-tekst: var(--nd-teal-diep); color: var(--nd-white); background-color: var(--nd-band); /* Een raster van gelijke vierkanten, verder niets. Hier lagen er twee over elkaar: een fijn van 34px en elke vijfde lijn zwaarder, op 170px. Die zware lijn trok het raster dicht tot blokken van vijf bij vijf, en dan lees je vakjes in plaats van een werkvlak. Eén dichtheid, en de lijn mag iets sterker nu hij het alleen doet. */ background-image: linear-gradient(rgba(5, 24, 40, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(5, 24, 40, 0.06) 1px, transparent 1px); background-size: 40px 40px; } /* De glaskaarten worden vellen papier: dekkend wit, een haarlijn eromheen en een zachte schaduw, zodat ze het raster afdekken en er los bovenop lijken te liggen. */ .nd-licht .is-style-glass, .nd-licht .nd-review-g, .nd-licht .nd-gscore { background: var(--nd-papier); border-color: rgba(5, 24, 40, 0.12); box-shadow: 0 1px 2px rgba(5, 24, 40, 0.04), 0 10px 30px rgba(5, 24, 40, 0.07); } /* De twee dienstenrijen zijn tegels van hetzelfde soort: dekkend wit, dezelfde haarlijn en dezelfde schaduw. Zonder die tegel zweefden foto en tekst los op het raster, terwijl alles eromheen in een licht vlak juist een vel papier is. De kolomruimte gaat omlaag: binnen een tegel is 4,5rem te veel. */ .nd-diensten .nd-split { background: var(--nd-papier); border: 1px solid rgba(5, 24, 40, 0.12); border-radius: var(--nd-radius-case); box-shadow: 0 1px 2px rgba(5, 24, 40, 0.04), 0 10px 30px rgba(5, 24, 40, 0.07); padding: clamp(1.25rem, 2.2vw, 2rem); gap: clamp(1.5rem, 2.6vw, 3rem) !important; } /* De tegels hebben nu een eigen rand, dus er hoeft minder ruimte tussen dan tussen twee losse rijen. */ .nd-diensten .nd-split + .nd-split { margin-top: clamp(1.25rem, 2.2vw, 2rem); } /* De foto ligt op een wit vel in plaats van op zwart. De cyaan gloed erachter en de diepe zwarte schaduw eronder waren voor een donkere ondergrond bedoeld en worden hier modderig; een haarlijn is genoeg. */ .nd-licht .nd-foto::before { display: none; } .nd-licht .nd-foto .wp-block-image img { box-shadow: 0 0 0 1px rgba(5, 24, 40, 0.08); } .nd-licht .is-style-glass-accent { background: linear-gradient(180deg, rgba(0, 180, 216, 0.1), rgba(0, 180, 216, 0.02)), var(--nd-papier); border-color: rgba(0, 112, 126, 0.45); box-shadow: 0 0 0 1px rgba(0, 112, 126, 0.12), 0 18px 40px rgba(5, 24, 40, 0.1); } /* De review in beeld houdt de dunne grijze rand van alle kaartjes en ligt alleen iets hoger: een wat diepere schaduw. Geen cyaan rand, want die hoort bij iets klikbaars. */ .nd-licht .is-carousel > .nd-review-g.is-active { box-shadow: 0 1px 2px rgba(5, 24, 40, 0.05), 0 18px 45px rgba(5, 24, 40, 0.13); } /* De stippen zijn standaard wit op 30%, en dat is op een licht vlak niet te zien. Hier navy. De actieve stip blijft felle cyaan, net als op donker: dezelfde kleur overal (keuze van de eigenaar). */ .nd-licht .nd-dots__dot::before { background: rgba(5, 24, 40, 0.28); } .nd-licht .nd-dots__dot[aria-current="true"]::before { background: var(--nd-cyan); } /* De ghost-knop krijgt op een licht vlak een cyaan rand van 2px. In navy met een bleke grijze rand leest hij bijna als uitgeschakeld, en het blok heeft onderin een kleuraccent nodig. De tekst blijft navy: cyaan haalt op wit maar 2,1:1 en is als letterkleur onleesbaar. Als lijn kan het wel, want de knop is te herkennen aan zijn tekst en vorm en is de rand het accent daarnaast. Vandaar ook 2px in plaats van 1: een dunne cyaan haarlijn op wit verdwijnt bijna. */ .nd-licht .is-style-ghost .wp-block-button__link { border-width: 2px; border-color: var(--nd-cyan); padding: calc(1em - 2px) calc(1.5em - 2px); } .nd-licht .is-style-ghost .wp-block-button__link:hover { border-color: var(--nd-cyan); background: rgba(0, 180, 216, 0.1); } /* Het vinkje in een licht vlak: volle cyaan schijf met een zwart vinkje. Cyaan kan op wit niet als inkt, maar wel als vlak met iets donkers erop. Zo staat in een lichte sectie de echte merkkleur en niet alleen de diepere teal, die naast de rest van de site als een andere kleur leest. Zwart op cyaan haalt 8,5:1. */ .nd-licht .is-style-check li::before { background: var(--nd-cyan); } .nd-licht .is-style-check li::after { border-color: var(--nd-black); } /* Elementen met een eigen donkere vulling houden hun witte tekst: de avatars bij de reviews staan op een gekleurde cirkel, niet op het doek van de sectie. */ .nd-licht .nd-avatar { color: var(--nd-papier); } .nd-licht .nd-avatar--geel { color: #202124; } /* Het stipje in de badge en het bolletje achter een vinkje: op wit de diepere teal. */ .nd-licht .is-style-badge::before { background: var(--nd-cyan); box-shadow: none; } /* ---------- Lucht rond een harde doekwissel ---------- */ /* Een sectie met een eigen doek (.nd-licht) heeft een harde rand in plaats van een verloop. Daar moet meer lucht omheen dan bij een sectie die gewoon op zwart doorloopt: zonder verloop staat de kop anders tegen de rand aan en oogt het geplakt. Dat geldt aan beide kanten van de wissel, dus ook de donkere sectie die ertegenaan ligt. Alleen vanaf tablet: op een telefoon is de tekstkolom smal en valt de rand veel minder op, en daar kost extra ruimte vooral scrollen. */ @media (min-width: 782px) { .nd-section.nd-licht { padding-block: calc(var(--nd-space-section) * 1.75); } .nd-section:has(+ .nd-licht) { padding-bottom: calc(var(--nd-space-section) * 1.75); } .nd-licht + .nd-section { padding-top: calc(var(--nd-space-section) * 1.75); } } /* ---------- Afspraakpagina (.nd-afspraak, blok "Calendly-agenda") ---------- */ /* Zelfde opbouw als de contentplanpagina (.nd-scan): gecentreerde kop en lead. Daaronder drie pillen en de agenda zelf, groot, zonder knop ertussen: wie hier komt, wil een moment kiezen. Achtergrond (oktober 2026): zwart met een licht raster, zoals het afsluitblok op de homepage, en een gloed die van boven komt: een brede lichtbundel achter de header en de kop die naar beneden uitdooft. Eerst kwam de gloed hier van rechtsonder, net als in het afsluitblok, maar dan was alles boven de vouw zwart: precies het deel dat de bezoeker als eerste ziet. Niet terugzetten. */ .nd-section.nd-scan.nd-afspraak { position: relative; isolation: isolate; overflow: hidden; background: var(--nd-black); } .nd-afspraak::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 75% 55% at 50% 0%, rgba(46, 91, 136, 0.75), transparent 75%), radial-gradient(ellipse 45% 38% at 50% 4%, rgba(0, 180, 216, 0.34), transparent 72%); } /* Raster: zelfde maat als in het afsluitblok (1px om de 40px), maar lichtgrijs op 8% in plaats van 4,5%: over een hele pagina viel de lichtere lijn weg tegen het zwart. Bovenin het duidelijkst, naar de randen en naar onderen toe weggemaskeerd, zodat het zacht overgaat in de footer. */ .nd-afspraak::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px); background-size: 40px 40px; background-position: center -1px; -webkit-mask-image: radial-gradient(ellipse 90% 75% at 50% 15%, rgba(0, 0, 0, 1) 40%, transparent 95%); mask-image: radial-gradient(ellipse 90% 75% at 50% 15%, rgba(0, 0, 0, 1) 40%, transparent 95%); } .nd-afspraak .nd-afspraak__pillen { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.625rem; margin: 0 0 clamp(1.75rem, 4vh, 2.75rem); } /* Calendly zet op desktop meestal zelf ruim 4rem lucht boven zijn kaart, binnen het venster. Zonder kader eromheen telt die ruimte op bij deze marge, dus hier een kleine vaste marge. Niet naar 0: tijdens het laden staat de kaart soms wel bovenaan het venster, en dan raakt hij de pillen. */ @media (min-width: 782px) { .nd-afspraak .nd-afspraak__pillen { margin-bottom: 1.25rem; } .nd-afspraak > .nd-calendly { margin-top: 0 !important; } /* geen blockGap erbovenop */ } .nd-afspraak .nd-afspraak__pillen > * { margin: 0; } /* De agenda staat los op de achtergrond, zonder kader (oktober 2026). Hier zat een glaskaart met een cyaan rand en gloed omheen; met het raster en de gloed op de hele pagina werd dat een lijst om een lijst, en Calendly tekent zelf al een kaart. Niet opnieuw een kader omheen zetten. Calendly bepaalt zelf de hoogte (data-resize); de min-height houdt de plek vast zolang hij laadt, zodat de pagina niet verspringt. Calendly toont op smalle schermen één kolom en wordt dan hoger. */ /* 68rem: Calendly toont de kaart pas in twee kolommen (gegevens links, agenda rechts) vanaf een venster van ongeveer 1000px; smaller stapelt hij alles onder elkaar, en dat is op desktop veel te hoog. De dubbele klasse is nodig omdat de kern een breed blok (alignwide) anders de volle brede maat geeft. */ .nd-calendly, .is-layout-constrained > .nd-calendly.alignwide { max-width: 68rem; margin-inline: auto; } .nd-calendly__agenda { min-height: 700px; border-radius: var(--nd-radius-case); overflow: hidden; } .nd-calendly__agenda { position: relative; } .nd-calendly__frame { display: block; width: 100%; height: 700px; border: 0; transition: opacity 0.3s var(--nd-ease); } @media (max-width: 781px) { .nd-calendly__frame { height: 900px; } } /* Zolang Calendly nog laadt (theme.js zet .is-laden) staat de iframe onzichtbaar achter het laadscherm. Het laadscherm is een lichte kaart op de plek en in de maat van de agenda van Calendly zelf (witte kaart van 50rem, op desktop 4rem vanaf de bovenrand, op mobiel de volle breedte), zodat er weinig verspringt als de echte agenda verschijnt. */ .nd-calendly__agenda.is-laden .nd-calendly__frame { opacity: 0; } /* Zolang Complianz de agenda tegenhoudt vult het vlak met de knop de hele plek van de agenda (op mobiel zou Complianz er anders een laag vlak van maken); tijdens het laden valt dat vlak weg achter het laadscherm. */ .nd-calendly__agenda .cmplz-placeholder-parent, .nd-calendly__agenda .cmplz-blocked-content-container { min-height: 700px; } @media (max-width: 781px) { .nd-calendly__agenda .cmplz-placeholder-parent, .nd-calendly__agenda .cmplz-blocked-content-container { min-height: 900px; } } .nd-calendly__agenda.is-laden .cmplz-blocked-content-container { background: none !important; box-shadow: none !important; border-color: transparent !important; } .nd-calendly__laden { position: absolute; inset: 0; z-index: 1; display: flex; justify-content: center; align-items: flex-start; } .nd-calendly__laden[hidden] { display: none; } .nd-calendly__skelet { position: relative; overflow: hidden; display: grid; gap: 1.5rem; align-content: start; box-sizing: border-box; width: min(100%, 50rem); min-height: 35rem; margin-top: 4rem; padding: 2rem; background: var(--nd-papier); border-radius: 12px; } .nd-calendly__laden-tekst { font-size: 0.9rem; text-align: center; color: rgba(5, 24, 40, 0.6); } .nd-calendly__skelet-vlak { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; } .nd-calendly__skelet i { display: block; background: rgba(5, 24, 40, 0.08); border-radius: 8px; } .nd-calendly__skelet-info, .nd-calendly__skelet-kal { display: grid; gap: 0.75rem; align-content: start; min-width: 0; } .nd-calendly__skelet i.nd-calendly__skelet-rond { width: 4rem; height: 4rem; border-radius: 50%; } .nd-calendly__skelet i.nd-calendly__skelet-regel { height: 1.1rem; width: 70%; } .nd-calendly__skelet i.nd-calendly__skelet-regel--kort { width: 40%; } .nd-calendly__skelet i.nd-calendly__skelet-kop { height: 1.25rem; width: 50%; margin-inline: auto; } .nd-calendly__skelet i.nd-calendly__skelet-raster { height: 14rem; background-color: transparent; background-image: radial-gradient(circle at center, rgba(5, 24, 40, 0.08) 0 1rem, transparent calc(1rem + 1px)); background-size: calc(100% / 7) 2.8rem; } @media (max-width: 781px) { .nd-calendly__skelet { margin-top: 0; min-height: 44rem; padding: 1.5rem 1.25rem; border-radius: 16px; } .nd-calendly__skelet-vlak { grid-template-columns: minmax(0, 1fr); } .nd-calendly__skelet-info { justify-items: center; } } /* Een lichtveeg over de kaart, zodat te zien is dat er iets gebeurt. */ .nd-calendly__skelet::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgba(5, 24, 40, 0.05) 50%, transparent 70%); transform: translateX(-100%); animation: nd-agenda-veeg 1.8s linear infinite; } @keyframes nd-agenda-veeg { to { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce) { .nd-calendly__skelet::after { animation: none; display: none; } } .nd-calendly__terugval { margin: 0; padding: 2rem; text-align: center; } @media (max-width: 781px) { .nd-calendly__agenda { min-height: 900px; border-radius: 16px; } } /* ---------- Cookiebanner en toestemmingsvlakken (Complianz) ---------- */ /* De plugin Complianz levert de banner en blokkeert Calendly en Google Maps tot de bezoeker akkoord geeft. De vorm komt hier vandaan en niet uit de instellingen van de plugin: die staan in de database, en zo blijft de huisstijl in git en gelijk op elke omgeving. De variabelen zijn die van Complianz zelf; !important omdat de plugin ze per banner opnieuw zet. */ .cmplz-cookiebanner { --cmplz_banner_background_color: var(--nd-navy) !important; --cmplz_banner_border_color: var(--nd-border) !important; --cmplz_banner_border_width: 1px !important; --cmplz_banner_border_radius: 20px !important; --cmplz_text_color: var(--nd-white-soft) !important; --cmplz_hyperlink_color: var(--nd-cyan) !important; --cmplz_button_border_radius: 12px !important; --cmplz_button_accept_background_color: var(--nd-cyan) !important; --cmplz_button_accept_border_color: var(--nd-cyan) !important; --cmplz_button_accept_text_color: var(--nd-black) !important; --cmplz_button_deny_background_color: transparent !important; --cmplz_button_deny_border_color: var(--nd-border-strong) !important; --cmplz_button_deny_text_color: var(--nd-white) !important; --cmplz_button_settings_background_color: transparent !important; --cmplz_button_settings_border_color: var(--nd-border-strong) !important; --cmplz_button_settings_text_color: var(--nd-white) !important; --cmplz_slider_active_color: var(--nd-cyan) !important; --cmplz_slider_inactive_color: rgba(255, 255, 255, 0.25) !important; --cmplz_slider_bullet_color: var(--nd-white) !important; --cmplz_category_header_always_active_color: var(--nd-cyan) !important; font-family: inherit; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); } .cmplz-cookiebanner .cmplz-title { color: var(--nd-white); font-weight: 700; } /* Tekst en categorieën over de volle breedte van de banner. Complianz rekent hun breedte uit een vaste bannerbreedte (--cmplz_banner_width), terwijl de banner zelf breder is: de tekst stopte dan op tweederde en liet rechts een leeg vlak, scheef onder de gecentreerde titel en knoppen. */ .cmplz-cookiebanner .cmplz-message, .cmplz-cookiebanner .cmplz-categories { width: 100% !important; margin-right: 0 !important; } /* Omdat de tekst nu de volle breedte pakt, zou een zwevende banner zo breed worden als het scherm. Daarom een vaste maat: een compact blok in de hoek, op mobiel bijna schermbreed. */ .cmplz-cookiebanner:is(.cmplz-bottom-right, .cmplz-bottom-left, .cmplz-center) { width: min(34rem, calc(100vw - 2rem)) !important; max-width: min(34rem, calc(100vw - 2rem)) !important; } .cmplz-cookiebanner .cmplz-close { color: var(--nd-white); } /* Complianz zet bij het openen de focus op het kruisje (goed voor wie met het toetsenbord werkt). Een cyaan kader rond het kruisje leek dan bij iedereen op een fout; de focus is nu zichtbaar doordat het kruisje cyaan wordt. */ .cmplz-cookiebanner .cmplz-close:focus { outline: none; box-shadow: none; border-color: transparent; } .cmplz-cookiebanner .cmplz-close:focus-visible, .cmplz-cookiebanner .cmplz-close:hover { color: var(--nd-cyan); } .cmplz-cookiebanner .cmplz-buttons .cmplz-btn { font-family: inherit; font-weight: 600 !important; } .cmplz-cookiebanner .cmplz-buttons .cmplz-btn:focus-visible { outline: 2px solid var(--nd-cyan); outline-offset: 2px; } /* Voorkeuren (na "Bekijk voorkeuren"): elke categorie als een rij met een dunne rand, zoals de FAQ-vragen. Complianz zet hier een lichtgrijs vlak, en de pijlknop kreeg de standaardknop van de browser (grijs vlak, zwarte rand); beide passen niet op navy. */ .cmplz-cookiebanner .cmplz-categories .cmplz-category { background: rgba(255, 255, 255, 0.03) !important; border: 1px solid var(--nd-border); border-radius: 12px; overflow: hidden; } .cmplz-cookiebanner .cmplz-categories .cmplz-category + .cmplz-category { margin-top: 0.5rem; } .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header { /* !important: Complianz zet de kolommen onder 425px onder elkaar, en dan stond de pijlknop als een lege balk over de volle breedte. */ display: grid; grid-template-columns: 1fr auto auto !important; align-items: center; gap: 0.75rem; padding: 0.7rem 0.9rem; } .cmplz-cookiebanner .cmplz-category .cmplz-category-title { color: var(--nd-white); font-weight: 600; font-size: 0.9375rem; } .cmplz-cookiebanner .cmplz-category .cmplz-always-active { color: var(--nd-cyan); font-size: 0.8125rem; font-weight: 600; white-space: nowrap; } .cmplz-cookiebanner .cmplz-category .cmplz-category-toggle { appearance: none; background: none !important; border: 0 !important; box-shadow: none !important; padding: 0.25rem; margin: 0; width: auto !important; height: auto; display: inline-flex; align-items: center; justify-content: center; color: var(--nd-white); cursor: pointer; border-radius: 6px; } .cmplz-cookiebanner .cmplz-category .cmplz-category-toggle svg { fill: currentColor; width: 14px; height: 14px; transition: transform 0.25s var(--nd-ease); } .cmplz-cookiebanner .cmplz-category .cmplz-category-toggle svg path { fill: currentColor !important; } .cmplz-cookiebanner .cmplz-category .cmplz-category-toggle[aria-expanded="true"] svg { transform: rotate(180deg); } .cmplz-cookiebanner .cmplz-category .cmplz-category-toggle:focus-visible { outline: 2px solid var(--nd-cyan); outline-offset: 2px; } .cmplz-cookiebanner .cmplz-category .cmplz-description { padding: 0 0.9rem 0.8rem; color: var(--nd-white-soft); font-size: 0.8125rem; line-height: 1.55; } /* De links onder de knoppen (cookieverklaring, privacyverklaring) naast elkaar, zonder opsommingstekens. Een link die nog nergens heen wijst (href="#", zoals het impressum dat we niet hebben) verdwijnt, anders bleef er een rij losse stippen staan. */ .cmplz-cookiebanner .cmplz-links ul { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.25rem; margin: 0 !important; padding: 0 !important; list-style: none !important; } .cmplz-cookiebanner .cmplz-links li { margin: 0; list-style: none; } .cmplz-cookiebanner .cmplz-links li::marker { content: none; } .cmplz-cookiebanner .cmplz-documents li:has(> a[href="#"]), .cmplz-cookiebanner .cmplz-documents:not(:has(li > a:not([href="#"]))) { display: none; } /* Het zwevende tabje "Toestemming beheren" verdwijnt: dezelfde keuze zit in de footer, onder "Cookievoorkeuren". Intrekken blijft zo even makkelijk als geven, zonder een knop over de site. */ #cmplz-manage-consent .cmplz-manage-consent { display: none !important; } /* Het vlak op de plek van de agenda of de kaart zolang er geen toestemming is. Complianz zet er een lichte afbeelding met een grijze knop in; hier wordt het een rustig navy vlak met de gewone knop. */ .cmplz-blocked-content-container, .cmplz-blocked-content-container.calendly-inline-widget { background: var(--nd-kaart-vlak) !important; border: 1px solid var(--nd-border); border-radius: var(--nd-radius-case); box-shadow: none; min-height: 18rem; } /* Complianz zet na het laden met een eigen stijlregel een lichte voorbeeldkaart achter Google Maps (.cmplz-placeholder-1 met !important). De dubbele klasse wint daarvan: kaart en agenda krijgen hetzelfde rustige vlak. */ .cmplz-blocked-content-container.cmplz-blocked-content-container { background-image: var(--nd-kaart-vlak) !important; } .cmplz-blocked-content-container .cmplz-blocked-content-notice { max-width: 22rem; padding: 0.9em 1.3em; border-radius: 12px; background: var(--nd-grad-cyan); color: var(--nd-black); font-family: inherit; font-size: 0.9375rem; font-weight: 600; line-height: 1.4; cursor: pointer; } .cmplz-blocked-content-container .cmplz-blocked-content-notice:focus-visible { outline: 2px solid var(--nd-white); outline-offset: 3px; } /* Alternatief onder de geblokkeerde agenda: zelf de agenda op calendly.com openen. */ .nd-calendly__alternatief { display: none; margin: 0.9rem 0 0; text-align: center; font-size: 0.875rem; color: var(--nd-grey); } .nd-calendly:has(.cmplz-blocked-content-container) .nd-calendly__alternatief { display: block; } .nd-calendly__alternatief a { color: var(--nd-cyan); text-decoration: underline; text-underline-offset: 3px; } /* onderstreept: kleur alleen onderscheidt een link niet van de tekst eromheen (WCAG 1.4.1) */ /* ---------- Tekstpagina (.nd-tekstpagina, pattern "Pagina: tekst") ---------- */ /* Voor pagina's die je leest in plaats van scant: de privacyverklaring, later bijvoorbeeld voorwaarden. Eén smalle kolom en tussenkoppen in zinsopbouw: de H2 van de site is een sectiekop in grote kapitalen, en tien daarvan onder elkaar maken van een juridische tekst een schreeuwende poster. */ .nd-tekstpagina { padding-top: calc(var(--nd-header-space) + clamp(1.5rem, 5vh, 3.5rem)); } /* Eén lang woord als titel ("Privacyverklaring") moet op 320px heel blijven: daarom zakt de kop verder dan de gewone H1, met afbreken als vangnet. */ .nd-tekstpagina h1 { font-size: clamp(1.5rem, 0.6rem + 4.4vw, 3rem); margin: 0.4rem 0 0.5rem; hyphens: auto; overflow-wrap: break-word; } .nd-tekstpagina .nd-tekstpagina__datum { margin: 0 0 2rem; font-size: 0.875rem; color: var(--nd-grey); } .nd-tekstpagina h2 { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); text-transform: none; letter-spacing: 0; margin: 2.75rem 0 0.75rem; } .nd-tekstpagina h3 { font-size: 1.125rem; font-weight: 600; margin: 1.75rem 0 0.4rem; } .nd-tekstpagina :is(p, li) { color: var(--nd-white-soft); line-height: 1.75; } .nd-tekstpagina p { margin: 0 0 1rem; } .nd-tekstpagina ul { margin: 0 0 1rem; padding-left: 1.25rem; display: grid; gap: 0.35rem; } .nd-tekstpagina li::marker { color: var(--nd-cyan); } .nd-tekstpagina a { color: var(--nd-cyan); text-decoration: underline; text-underline-offset: 3px; } .nd-tekstpagina a:hover { color: var(--nd-white); } /* ---------- Contactpagina ---------- */ /* De hele indeling is gebouwd op één eis: het formulier staat op een laptop in zijn geheel in beeld, zonder scrollen. Daarom de kleinere kop, de compacte velden (.nd-scanform) en de strakke ruimtes; de locatie en de bedrijfsgegevens staan eronder. */ /* De sectie begint strak onder de header, net als de scanpagina: elke rem die hier weggaat, is een rem die het formulier hoger in beeld zet. */ .nd-contact { padding-top: calc(var(--nd-header-space) + clamp(1rem, 3vh, 2.25rem)); padding-bottom: clamp(2.5rem, 6vh, 4rem); } .nd-contact__grid { max-width: 74rem; margin-inline: auto; padding-inline: var(--nd-gutter); display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); column-gap: clamp(1.5rem, 4vw, 3.5rem); row-gap: clamp(1.25rem, 3vh, 2rem); /* Rij 1 is zo hoog als de kop, rij 2 krijgt de rest. Zonder dit verdelen de twee rijen de hoogte van de kaart ernaast en valt er een gat tussen de tekst en de knoppen. */ grid-template-rows: auto 1fr; align-items: start; } /* Drie losse blokken in plaats van twee kolommen met inhoud erin: zo kan de volgorde per scherm anders zijn. Links de kop met daaronder de drie manieren, rechts het formulier over de volle hoogte. */ /* Een groep van Gutenberg zet zelf marges tussen zijn kinderen (is-layout-flow). In een grid doet de gap dat al, dus die marges gaan eruit; de blokklasse staat erbij zodat deze regel het wint van die van de kern. */ .nd-contact__grid.wp-block-group > *, .nd-locatie__grid.wp-block-group > * { margin-block: 0; } .nd-contact__intro { grid-column: 1; grid-row: 1; } .nd-contactwijzen { grid-column: 1; grid-row: 2; align-self: start; } .nd-contact__kaart { grid-column: 2; grid-row: 1 / span 2; } /* De H1 is hier kleiner dan op de homepage. Een contactpagina hoeft niet te overtuigen: je bent er al. De ruimte die de kop niet pakt, gaat naar het formulier, en dat is wat hier moet gebeuren. */ .nd-contact h1 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.25rem); margin: 0.35rem 0 0.75rem; } .nd-contact__lead { font-size: var(--nd-fs-lead); color: var(--nd-white-soft); margin: 0 0 clamp(1.25rem, 3vh, 2rem); max-width: 34ch; } /* ---------- De drie manieren om contact te leggen ---------- */ /* Op volgorde van hoe snel je antwoord hebt: appen, bellen, mailen. */ .nd-contactwijzen { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.875rem; } .nd-contactwijze { display: flex; align-items: center; gap: 0.875rem; } .nd-contactwijze--knop { margin-bottom: 0.25rem; } .nd-contactwijze--knop .nd-btn { width: 100%; max-width: 20rem; } .nd-contactwijze__icoon { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--nd-kaart-vlak); border: 1px solid var(--nd-kaart-rand); color: var(--nd-cyan); } .nd-contactwijze__icoon svg { width: 1.25rem; height: 1.25rem; } .nd-contactwijze__tekst { display: grid; gap: 0.1rem; } .nd-contactwijze__label { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--nd-grey); } .nd-contactwijze__link { color: var(--nd-white); font-size: 1.125rem; font-weight: 600; text-decoration: none; width: fit-content; } .nd-contactwijze__link:hover { color: var(--nd-cyan); } .nd-contactwijze__link:focus-visible { outline: 2px solid var(--nd-cyan); outline-offset: 3px; border-radius: 4px; } /* ---------- De formulierkaart ---------- */ .nd-contact__kaart { background: var(--nd-kaart-vlak); border: 1px solid var(--nd-kaart-rand); border-radius: var(--nd-radius-card); padding: clamp(1.25rem, 2.5vw, 2rem); box-shadow: var(--nd-shadow-card); } /* Zinsopbouw en niet in kapitalen: dit is een kaarttitel, geen sectiekop. Kapitalen zouden hier bovendien roepen om iets wat de bezoeker uit zichzelf al doet. */ .nd-contact__kaart h2 { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); text-transform: none; letter-spacing: 0; margin: 0 0 0.4rem; } .nd-contact__kaarttekst { font-size: 0.9375rem; color: var(--nd-grey); margin: 0 0 1.25rem; } /* Het formulier leunt op .nd-scanform (label klein in het veld, velden per twee). Wat hier bij komt is het tekstvak, dat de scan niet heeft. */ /* Het tekstvak zelf komt van .nd-scanform; hier alleen de hoogte, want op de contactpagina is het bericht het veld waar de bezoeker echt iets kwijt moet. */ .nd-veld--groot textarea { min-height: 5.5rem; } .nd-contactform__knop { width: 100%; margin-top: 0.25rem; } .nd-contactform .nd-form-note { text-align: center; } /* ---------- Onder de vouw: waar je ons vindt ---------- */ .nd-locatie { padding-top: clamp(2rem, 5vh, 3.5rem); } .nd-locatie__grid { max-width: 74rem; margin-inline: auto; padding-inline: var(--nd-gutter); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; } .nd-locatie h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); margin: 0 0 0.75rem; } .nd-locatie__tekst > :first-child { margin-top: 0; } .nd-locatie__adres { font-size: 1.125rem; color: var(--nd-white-soft); margin: 0 0 1.25rem; } .nd-locatie__onder { display: flex; flex-wrap: wrap; gap: 2rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--nd-border); } .nd-locatie__kopje { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--nd-grey); margin: 0 0 0.6rem; } .nd-locatie__klein { font-size: 0.9375rem; color: var(--nd-white-soft); margin: 0; } /* ---------- De kaart (blok "Kaart (locatie)") ---------- */ /* De kaart van Google is licht en zou als een wit vlak in het zwarte doek staan. Het filter draait hem om en haalt de verzadiging eraf, zodat hij bij de rest van de pagina past; de wegen, de straatnamen en de speld blijven leesbaar. Het is een weergavefilter in de browser, de kaart zelf verandert niet. Wil je hem toch gewoon licht, haal dan --donker weg in de editor. De kaart laadt pas als de bezoeker er bijna is (loading="lazy" in het blok): hij staat onder de vouw en mag het formulier daarboven niet vertragen. */ .nd-locatiekaart { position: relative; border-radius: var(--nd-radius-card); overflow: hidden; border: 1px solid var(--nd-kaart-rand); background: var(--nd-navy-deep); aspect-ratio: 16 / 10; max-width: 100%; } /* Zonder JavaScript staat het frame in een