/* ── HUISLETTER: NUNITO SANS, OVERAL ── De eigenaar op 29 augustus 2026: "gebruik dan maar gewoon overal Nunito Sans net als de site van mijn moederbedrijf". Dat is een MERKKEUZE, geen smaakkwestie: het platform draagt nu dezelfde letter als zijn moederbedrijf. GESCHIEDENIS, zodat niemand dit terugdraait: op diezelfde dag stond hier eerst Public Sans, toen Fraunces, toen EB Garamond. Alle drie afgekeurd. Dit is de vierde en de gekozene. Ook de serif-koppen zijn dus weer weg: EEN letter voor alles. SIL Open Font License 1.1, geen Reserved Font Name. De copyright-regel van de makers blijft in het bestand, en de volledige licentie ligt als portal/assets ernaast (OFL; Source Serif 4 en Inter zijn ook OFL-gelicenseerd). BIJGESNEDEN tot Latijn + Latin-1 + Latin Extended-A + leestekens, en de variabele as is per gewicht vastgezet zodat elke browser een gewoon statisch bestand krijgt: 14 KB per gewicht, zes gewichten samen 85 KB. Zelf-gehost. Geen CDN, geen Google-koppeling. */ @font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/inter-var.woff2') format('woff2')} :root{ --nb-font-display:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --nb-font-body:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --nb-primary:#26251E; --nb-primary-hover:#3A392F; --nb-primary-bright:#26251E; --nb-ink:#26251E; --nb-slate:#3A392F; /* GEMETEN: #26251E op 60% (#26251E99) compositeert tot #7D7C78 op wit (4.17:1), #7A7974 op #F7F7F4 (4.07:1) en #706F69 op #DEDEDA (3.74:1). Alle drie zakken door de 4.5:1-eis, samen 676 van de 1122 gemeten overtredingen - dit is de grootste enkele oorzaak, groter dan alle amber-gevallen bij elkaar. Op 70% (#26251EB3) is de laagste gemeten waarde 4.97:1 op #DEDEDA, het donkerste vlak waarop deze token daadwerkelijk landt. 65% haalt het NIET (4.28:1 op datzelfde vlak). */ --nb-muted:#26251EB3; /* De huisamber #C08532 kan niet alle rollen dragen; dat is rekenkunde, geen smaak. GEMETEN op #C08532: wit = 3.16:1 (ZAKT), bijna-zwart #26251E = 4.86:1 (haalt). Op #9C6926 is het precies omgekeerd: wit = 4.71:1 (haalt), #26251E = 3.27:1 (zakt). Er is dus GEEN enkele amber die zowel witte als donkere tekst draagt. Daarom drie tokens met elk EEN contract; zet ze nooit aan elkaar gelijk: --nb-primary merkkleur. LET OP: dit is #26251E in het lichte thema en #C08532 in het donkere (regel ~2380). Alleen voor donkere inkt en niet-tekst-decoratie. --nb-primary-solid vlak dat WITTE tekst draagt. Volgt het thema mee: #26251E licht (wit = 14.6:1), #9C6926 donker (wit = 4.71:1). Dit token bestaat omdat `background:var(--nb-primary);color:#fff` in het lichte thema prima was en in het donkere op 3.16:1 uitkwam - dezelfde regel, twee uitkomsten. --nb-amber-solid #9C6926 amber vlak dat WITTE tekst draagt, in BEIDE thema's (voor vlakken die hard amber zijn, los van het thema). --nb-amber-ink #8A5A1A amber ALS tekst op wit/beige. Gemeten >=4.69:1 tot en met het donkerste zandvlak #EEE4D4; #9C6926 haalt daar maar 3.74:1 en is als tekstkleur dus niet genoeg. */ --nb-primary-solid:#26251E; --nb-amber-solid:#9C6926; --nb-amber-ink:#8A5A1A; /* GEMETEN VAL: sommige amber chips liggen op een vlak dat MET DE PAGINA meekleurt, bijvoorbeeld background:rgba(192,133,50,.12). Dat vlak is #F0E9DD in het lichte thema maar #27211B in het donkere. Toen die chips de vaste inkt #8A5A1A kregen ging licht van 2.63:1 naar 4.89:1 en zakte donker van 5.03:1 naar 2.69:1 - de fix verplaatste de fout in plaats van hem op te lossen. Deze token volgt daarom het thema. Gebruik --nb-amber-ink voor vlakken die in BEIDE themas licht blijven. */ --nb-amber-on-page:#8A5A1A; /* Zelfde val, maar dan voor de NEUTRALEN: --nb-ink/--nb-slate/--nb-muted worden in het donkere thema bewust NIET herdefinieerd, want ze staan ook op kaarten die wit BLIJVEN (een globale omzetting gaf 168 nieuwe overtredingen van #9AA3B8 op wit). Wie op een vlak staat dat WEL met de pagina meekleurt, gebruikt deze drie. */ --nb-ink-on-page:#26251E; --nb-slate-on-page:#3A392F; --nb-muted-on-page:#26251EB3; --nb-line:#26251E1A; --nb-line-2:#26251E0D; --nb-bg:#F7F7F4; --nb-card:#FFFFFF; --nb-blue-50:#F2F1ED; /* Dark-premium tokens (mirrors the landing) for the public pages (login/signup/plans/checkout), applied only under body[data-portal-theme="dark"]. The light tokens above still drive the logged-in dashboard. */ --nb-ink-dark:#05060B; --nb-ink-2:#0A0C15; --nb-line-dark:rgba(255,255,255,.08); --nb-line-2-dark:rgba(255,255,255,.14); --nb-white:#F7F8FC; --nb-muted-d:#9AA3B8; /* GEMETEN op de donkere pagina #05060B: #6B7488 haalde 4.32:1 en zakte dus door de eis. Deze token draagt de placeholders van elk invoerveld (inclusief het captcha-antwoord) en de revisieregel onder de juridische teksten - allemaal echte tekst, geen decoratie. #727B90 haalt 4.77:1 en blijft visueel een stille grijstint. */ /* TWEEDE METING. #727B90 was gekozen tegen de PAGINA (#05060B, 4.77:1), maar deze token draagt ook de placeholders van velden die op een KAART staan (#1C1D22 op /login, /signup, /forgot en /reset); daar haalde hij 3.96:1. #828B9E haalt 4.92:1 op die kaart, 5.92:1 op de pagina, 5.46:1 op de docs-balk en 5.27:1 op het samenwerkscherm. NIEUWE WAARDE: er was geen bestaande token die zowel donker genoeg blijft om stil te ogen als licht genoeg om de eis te halen (--nb-muted-d #9AA3B8 haalt het wel maar is net zo luid als de gewone tekst). */ --nb-muted-2-d:#828B9E; --nb-card-d:rgba(255,255,255,.035); --nb-glow:#26251E; --nb-ok:#15803d; --nb-ok-bg:#dcfce7; --nb-warn:#b45309; --nb-warn-bg:#fef3c7; --nb-err:#b91c1c; --nb-err-bg:#fee2e2; --nb-radius:14px; --nb-radius-lg:22px; --nb-shadow:0 1px 2px rgba(38,37,30,.04),0 8px 28px -12px rgba(38,37,30,.12); --nb-shadow-lg:0 2px 4px rgba(38,37,30,.05),0 24px 60px -20px rgba(38,37,30,.22); --nb-shadow-card:0 1px 1px rgba(38,37,30,.03),0 4px 10px -4px rgba(38,37,30,.06),0 24px 48px -24px rgba(38,37,30,.16); --nb-ease:cubic-bezier(.16,1,.3,1); --nb-wrap:1280px; } *{box-sizing:border-box} /* DE 16px-ONDERGRENS VOOR VELDEN IS ER BEWUST UIT -- zie de uitgebreide uitleg in nerriepanel/ui/src/studio.src.css. Kort: Safari op iOS zoomt in op een veld onder de 16px, maar de eigenaar heeft op 27 augustus 2026 drie keer expliciet gekozen voor de kleine, rustige maat boven die bescherming. De studio en het portaal moeten dezelfde keuze maken, anders ziet de klant twee verschillende platforms. `user-scalable=no` blijft verboden: dat verbiedt ook handmatig inzoomen. Bewaker: FieldTextScalesWithTheFieldTest. */ /* overflow-x:clip en niet hidden: hidden zou van een scrollvenster maken en daarmee de sticky kopbalk hieronder stukmaken. scroll-padding-top houdt een ankersprong (#prijzen) onder die kopbalk vandaan. */ html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-padding-top:80px} /* `min-height`, NOOIT `height`, op de body. Eigenaar 29 augustus 2026: "wanneer je naar beneden scrolt en even omhoog scrolt zou je het menu weer moeten zien maar nu blijft het menu weg". GEMETEN op /product/visueel-bouwen: de pagina is 5734px hoog, maar `height:100dvh` zette de BODY op 900px. De kopbalk is `position:sticky`, en sticky werkt alleen BINNEN zijn eigen containerblok -- dat is de body. Zodra je voorbij die 900px scrolt, is de kopbalk buiten zijn speelveld en komt hij pas terug als je helemaal bovenaan bent. De JS deed het goed (nav-hidden werd netjes weggehaald bij omhoog scrollen), maar het element had geen plek meer om te staan. Dit is dezelfde fout als in de hero op de landingspagina, diezelfde dag: `height:100dvh` waar `min-height` bedoeld was. Bewaker: HeroNeverClipsItsOwnTitleTest (controle 5). */ body{ margin:0;color:var(--nb-ink);overflow-x:clip; background:var(--nb-bg); font-family:var(--nb-font-body); line-height:1.55;font-size:16px;-webkit-font-smoothing:antialiased; /* Onze zelf-gehoste Inter is variabel (100 t/m 900). Vraagt een kop meer, dan 750-850, so without this the browser FAUX-bolds the 700 face (smeared, ugly titles). "style" forbids weight synthesis (crisp real 700 instead) while still allowing faux-italic for in body copy. */ font-synthesis:style; display:flex;flex-direction:column;min-height:100vh;min-height:100dvh; } /* Ambient background as a FIXED pseudo-element instead of background-attachment:fixed (which repaints every scroll frame and janks on mobile/Safari). One cheap layer behind everything, so scrolling stays buttery smooth. */ body::before{ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background: radial-gradient(1000px 560px at 84% -12%, rgba(38,37,30,.10), transparent 62%), radial-gradient(820px 480px at 4% 2%, rgba(38,37,30,.06), transparent 56%), linear-gradient(180deg,#FBFAF7 0%,var(--nb-bg) 100%); } /* Big statements in the warm display serif; everything smaller stays in the clean sans for legibility. This editorial serif+sans contrast is what replaces the generic system-font "AI default" look. */ /* Inter is variabel (100 t/m 900); elk gevraagd gewicht rendert echt en wordt de kop smerig. 700 met -0.02em is de kopmaat van het merk. */ h1,h2,.h-display{font-family:var(--nb-font-display);font-weight:700;letter-spacing:-.02em} .wrap{width:100%;max-width:var(--nb-wrap);margin:0 auto;padding:0 24px} a{color:var(--nb-primary);text-decoration:none;transition:color .15s ease} a:hover{color:var(--nb-primary-hover)} /* Vangnet voor toetsenbordfocus op de PUBLIEKE romp (login, foutpagina's, plannen, voorwaarden). Dit dekte eerst alleen a, button en input; daarmee vielen de uitklappers (), select, textarea en alles met [role="button"] of een eigen tabindex terug op de blauwe rand van de browser. Op /plans staan negen FAQ-uitklappers, dus dat was gewoon te zien. :where() heeft specificiteit 0, dus elke eigen focusregel van een component wint hier nog steeds van; alleen wat anders niets had valt hierop terug. De kleur blijft de inkt-rand die deze romp al gebruikte, er komt geen tweede kleur bij. */ :where(a,button,summary,[role="button"],[tabindex]:not([tabindex="-1"]), input:not([type="hidden"]),select,textarea):focus-visible{ outline:3px solid rgba(38,37,30,.4);outline-offset:2px } /* GEMETEN: in het donkere thema is --nb-primary de amber #C08532, dus deze witte tekst kwam op 3.16:1 uit op 18 publieke pagina's. --nb-primary-solid haalt 4.71:1. */ .skip-link{position:absolute;left:-9999px;top:0;background:var(--nb-primary-solid);color:#fff;padding:8px 14px;border-radius:0 0 8px 0;z-index:10} .skip-link:focus{left:0} /* GEMETEN. De skip-link is de EERSTE bediening die een toetsenbordgebruiker tegenkomt, en hij is een . De algemene regel a:hover{color:var(--nb-primary-hover)} won hier van de klasse (element+pseudo verliest niet van een klasse zonder color), dus zodra de muis of het focusvlak erop kwam werd de tekst #3A392F op #26251E (1.32:1) en in het donkere thema #9C6926 op #9C6926 (1.00:1, volledig onzichtbaar). Wie een linkknop een eigen vlak geeft, moet zijn tekstkleur in ELKE toestand opnieuw uitspreken. */ .skip-link:hover,.skip-link:focus,.skip-link:focus-visible{color:#fff;background:var(--nb-primary-solid)} /* Minimal auth chrome (login/signup): brand + language toggle only, no marketing nav, no hamburger, transparent header - the sign-in surface stays calm. */ /* Op de inlogpagina blijft de kopbalk altijd doorzichtig: daar is geen hero om doorheen te lopen en er valt niets te scrollen, dus de scroll-toestanden hieronder gelden hier niet. */ /* De kopbalk komt sinds 31-08-2026 uit portal_main_nav_html/_css/_js: EEN bron voor landing en alle publieke paginas. Het gedrag (doorzichtig bovenaan, dicht na scrollen, weg bij omlaag en terug bij omhoog) is gewenst door de eigenaar en is al eens ten onrechte gesneuveld onder "geen zwevende balken"; die regel gaat over app-balken die inhoud afdekken, niet over deze kop. Ankersprongen landen goed via scroll-padding-top op html. */ /* ══════════════════════════════════════════════════════════════════════════════════════ SCROLL-EFFECTEN ZONDER EEN ENKELE BIBLIOTHEEK. De eigenaar stuurde zeven demo's (allemaal MIT, dus vrij te gebruiken) en vroeg die effecten op de publieke pagina's -- "maar wel subtieler en zo licht dat PageSpeed overal 100 blijft". WAT DIE DEMO'S KOSTEN: drie bibliotheken samen bijna 90 KB, op ELKE pagina bij ELKE bezoeker, plus het rekenwerk op de hoofddraad. Dat is niet te rijmen met een 100 bij PageSpeed. WAT HIER STAAT: dezelfde bewegingen, native, in twee lagen. 1. `animation-timeline: view()` -- scroll-gestuurde animatie in de browser zelf. Die draait BUITEN de hoofddraad, kost nul JavaScript en blokkeert dus niets. 2. Waar dat niet kan (Safari, Firefox) neemt portal_motion_js() het over met ongeveer 700 bytes. Zie daar waarom `html.nb-beweegt` de sleutel is. ALLES RESPECTEERT `prefers-reduced-motion`. Bewaker: PublicMotionStaysWeightlessTest. ══════════════════════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion:no-preference){ @supports (animation-timeline: view()){ /* EEN regel zet de tijdlijn voor alles wat beweegt; per soort staat daarna alleen nog WELKE beweging het is. */ .nb-rise,.nb-zoom,.nb-veeg,.nb-stapel,.nb-tegels,.nb-diepte, .nb-trap > *, .prod-facts-grid > *, .docs-grid > *, .sol-grid > *, .feat-hub-grid > *, .company-grid > *, .fd-grid > *, .mp-grid > *, .mp-tilesrow > *, .mp-pages > *, .mp-values > *, .features > *, .fd-steps > *, .fd-checks > *, .sk-steps > *, .sk-blocks > *, .sk-refine > *, .sk-btiles > *, .wm-row > *, .nbmod-grid > *, .nbdz-points > *, .aud-grid > *, .wsc-grid > *, .wsc-points > *, .company-features > *, .company-steps > *, .aifn-steps > *, .nbbh-caps > *, .nbbh-benefits > *, .dcms-steps > *, .pd-cap-grid > *, .pd-steps > *, .locp-results > *, .locp-steps > *, .locp-map-grid > *, .mi-caps > *, .mi-uses > *, .pseo-subscores > *, .pseo-ben-metrics > *, .brs-steps > *, .brs-uc-grid > *, .dz-steps > *, .dz-bens > *, .dev-bene-grid > *, .sondh-uc-grid > *, .seo-deep-bens > *, .wsdeep-usegrid > *, .blog-grid > *, .stat-grid > *, .stats-intro > *, .nbbh-stats > *, .wsp-stats > *, .sol-metrics-band > *, .prod-facts > *, .sol-metrics > *, .price-grid > *, .aifn-sec-head, .aifn-sec-head-tight, .d-head, .dcms-sec-head, .dev-deep-head, .feat-sec-head, .locp-head, .nbbh-sec-head, .pd-sec-head, .seo-deep-head, .sol-get-head, .sol-info-head, .vb-sec-head, .wsdeep-head, .wsp-sec-head, .prod-hero-visual, .company-hero-visual, .dcms-graphic, .vb-figure, .wsp-figure, .pseo-viz, .sol-hero-visual, .viz, .locp-figure, .dev-figure{ animation-timeline:view(); animation-range:entry 4% cover 32%; animation-fill-mode:both; } .nb-rise{animation-name:nb-rise-in} .nb-zoom{animation-name:nb-zoom-in} .nb-veeg{animation-name:nb-veeg-in} .nb-stapel{animation-name:nb-stapel-in} .nb-tegels{animation-name:nb-tegels-in} .nb-diepte{animation-name:nb-diepte-in} .nb-trap > *{animation-name:nb-rise-in} /* ELK SOORT BLOK KRIJGT ZIJN EIGEN BEWEGING. Deed de hele pagina hetzelfde, dan valt het niet op -- en dat was precies de klacht: "IK ZIE GEEN VERSCHIL". kaartenraster -> tegels die opschalen abonnementen -> kaarten die rechtdraaien tekeningen -> beeld dat naar voren komt koppen -> rustig omhoog (het is tekst) getallen -> rustig omhoog (cijfers horen niet te wiebelen) */ .prod-facts-grid > *, .docs-grid > *, .sol-grid > *, .feat-hub-grid > *, .company-grid > *, .fd-grid > *, .mp-grid > *, .mp-tilesrow > *, .mp-pages > *, .mp-values > *, .features > *, .fd-steps > *, .fd-checks > *, .sk-steps > *, .sk-blocks > *, .sk-refine > *, .sk-btiles > *, .wm-row > *, .nbmod-grid > *, .nbdz-points > *, .aud-grid > *, .wsc-grid > *, .wsc-points > *, .company-features > *, .company-steps > *, .aifn-steps > *, .nbbh-caps > *, .nbbh-benefits > *, .dcms-steps > *, .pd-cap-grid > *, .pd-steps > *, .locp-results > *, .locp-steps > *, .locp-map-grid > *, .mi-caps > *, .mi-uses > *, .pseo-subscores > *, .pseo-ben-metrics > *, .brs-steps > *, .brs-uc-grid > *, .dz-steps > *, .dz-bens > *, .dev-bene-grid > *, .sondh-uc-grid > *, .seo-deep-bens > *, .wsdeep-usegrid > *, .blog-grid > *{animation-name:nb-tegels-in} .price-grid > *{animation-name:nb-stapel-in} .stat-grid > *, .stats-intro > *, .nbbh-stats > *, .wsp-stats > *, .sol-metrics-band > *, .prod-facts > *, .sol-metrics > *{animation-name:nb-rise-in} .aifn-sec-head, .aifn-sec-head-tight, .d-head, .dcms-sec-head, .dev-deep-head, .feat-sec-head, .locp-head, .nbbh-sec-head, .pd-sec-head, .seo-deep-head, .sol-get-head, .sol-info-head, .vb-sec-head, .wsdeep-head, .wsp-sec-head{animation-name:nb-rise-in;animation-range:entry 6% cover 30%} .prod-hero-visual, .company-hero-visual, .dcms-graphic, .vb-figure, .wsp-figure, .pseo-viz, .sol-hero-visual, .viz, .locp-figure, .dev-figure{animation-name:nb-diepte-in;animation-range:entry 2% cover 36%} /* Elke volgende tegel start iets later: dat geeft het raster ritme. Puur CSS. */ .nb-trap > *:nth-child(2), .prod-facts-grid > *:nth-child(2), .docs-grid > *:nth-child(2), .sol-grid > *:nth-child(2), .feat-hub-grid > *:nth-child(2), .company-grid > *:nth-child(2), .fd-grid > *:nth-child(2), .mp-grid > *:nth-child(2), .mp-tilesrow > *:nth-child(2), .mp-pages > *:nth-child(2), .mp-values > *:nth-child(2), .features > *:nth-child(2), .fd-steps > *:nth-child(2), .fd-checks > *:nth-child(2), .sk-steps > *:nth-child(2), .sk-blocks > *:nth-child(2), .sk-refine > *:nth-child(2), .sk-btiles > *:nth-child(2), .wm-row > *:nth-child(2), .nbmod-grid > *:nth-child(2), .nbdz-points > *:nth-child(2), .aud-grid > *:nth-child(2), .wsc-grid > *:nth-child(2), .wsc-points > *:nth-child(2), .company-features > *:nth-child(2), .company-steps > *:nth-child(2), .aifn-steps > *:nth-child(2), .nbbh-caps > *:nth-child(2), .nbbh-benefits > *:nth-child(2), .dcms-steps > *:nth-child(2), .pd-cap-grid > *:nth-child(2), .pd-steps > *:nth-child(2), .locp-results > *:nth-child(2), .locp-steps > *:nth-child(2), .locp-map-grid > *:nth-child(2), .mi-caps > *:nth-child(2), .mi-uses > *:nth-child(2), .pseo-subscores > *:nth-child(2), .pseo-ben-metrics > *:nth-child(2), .brs-steps > *:nth-child(2), .brs-uc-grid > *:nth-child(2), .dz-steps > *:nth-child(2), .dz-bens > *:nth-child(2), .dev-bene-grid > *:nth-child(2), .sondh-uc-grid > *:nth-child(2), .seo-deep-bens > *:nth-child(2), .wsdeep-usegrid > *:nth-child(2), .blog-grid > *:nth-child(2), .stat-grid > *:nth-child(2), .stats-intro > *:nth-child(2), .nbbh-stats > *:nth-child(2), .wsp-stats > *:nth-child(2), .sol-metrics-band > *:nth-child(2), .prod-facts > *:nth-child(2), .sol-metrics > *:nth-child(2), .price-grid > *:nth-child(2){animation-range:entry 2% cover 34%} .nb-trap > *:nth-child(3), .prod-facts-grid > *:nth-child(3), .docs-grid > *:nth-child(3), .sol-grid > *:nth-child(3), .feat-hub-grid > *:nth-child(3), .company-grid > *:nth-child(3), .fd-grid > *:nth-child(3), .mp-grid > *:nth-child(3), .mp-tilesrow > *:nth-child(3), .mp-pages > *:nth-child(3), .mp-values > *:nth-child(3), .features > *:nth-child(3), .fd-steps > *:nth-child(3), .fd-checks > *:nth-child(3), .sk-steps > *:nth-child(3), .sk-blocks > *:nth-child(3), .sk-refine > *:nth-child(3), .sk-btiles > *:nth-child(3), .wm-row > *:nth-child(3), .nbmod-grid > *:nth-child(3), .nbdz-points > *:nth-child(3), .aud-grid > *:nth-child(3), .wsc-grid > *:nth-child(3), .wsc-points > *:nth-child(3), .company-features > *:nth-child(3), .company-steps > *:nth-child(3), .aifn-steps > *:nth-child(3), .nbbh-caps > *:nth-child(3), .nbbh-benefits > *:nth-child(3), .dcms-steps > *:nth-child(3), .pd-cap-grid > *:nth-child(3), .pd-steps > *:nth-child(3), .locp-results > *:nth-child(3), .locp-steps > *:nth-child(3), .locp-map-grid > *:nth-child(3), .mi-caps > *:nth-child(3), .mi-uses > *:nth-child(3), .pseo-subscores > *:nth-child(3), .pseo-ben-metrics > *:nth-child(3), .brs-steps > *:nth-child(3), .brs-uc-grid > *:nth-child(3), .dz-steps > *:nth-child(3), .dz-bens > *:nth-child(3), .dev-bene-grid > *:nth-child(3), .sondh-uc-grid > *:nth-child(3), .seo-deep-bens > *:nth-child(3), .wsdeep-usegrid > *:nth-child(3), .blog-grid > *:nth-child(3), .stat-grid > *:nth-child(3), .stats-intro > *:nth-child(3), .nbbh-stats > *:nth-child(3), .wsp-stats > *:nth-child(3), .sol-metrics-band > *:nth-child(3), .prod-facts > *:nth-child(3), .sol-metrics > *:nth-child(3), .price-grid > *:nth-child(3){animation-range:entry 0% cover 36%} .nb-trap > *:nth-child(n+4), .prod-facts-grid > *:nth-child(n+4), .docs-grid > *:nth-child(n+4), .sol-grid > *:nth-child(n+4), .feat-hub-grid > *:nth-child(n+4), .company-grid > *:nth-child(n+4), .fd-grid > *:nth-child(n+4), .mp-grid > *:nth-child(n+4), .mp-tilesrow > *:nth-child(n+4), .mp-pages > *:nth-child(n+4), .mp-values > *:nth-child(n+4), .features > *:nth-child(n+4), .fd-steps > *:nth-child(n+4), .fd-checks > *:nth-child(n+4), .sk-steps > *:nth-child(n+4), .sk-blocks > *:nth-child(n+4), .sk-refine > *:nth-child(n+4), .sk-btiles > *:nth-child(n+4), .wm-row > *:nth-child(n+4), .nbmod-grid > *:nth-child(n+4), .nbdz-points > *:nth-child(n+4), .aud-grid > *:nth-child(n+4), .wsc-grid > *:nth-child(n+4), .wsc-points > *:nth-child(n+4), .company-features > *:nth-child(n+4), .company-steps > *:nth-child(n+4), .aifn-steps > *:nth-child(n+4), .nbbh-caps > *:nth-child(n+4), .nbbh-benefits > *:nth-child(n+4), .dcms-steps > *:nth-child(n+4), .pd-cap-grid > *:nth-child(n+4), .pd-steps > *:nth-child(n+4), .locp-results > *:nth-child(n+4), .locp-steps > *:nth-child(n+4), .locp-map-grid > *:nth-child(n+4), .mi-caps > *:nth-child(n+4), .mi-uses > *:nth-child(n+4), .pseo-subscores > *:nth-child(n+4), .pseo-ben-metrics > *:nth-child(n+4), .brs-steps > *:nth-child(n+4), .brs-uc-grid > *:nth-child(n+4), .dz-steps > *:nth-child(n+4), .dz-bens > *:nth-child(n+4), .dev-bene-grid > *:nth-child(n+4), .sondh-uc-grid > *:nth-child(n+4), .seo-deep-bens > *:nth-child(n+4), .wsdeep-usegrid > *:nth-child(n+4), .blog-grid > *:nth-child(n+4), .stat-grid > *:nth-child(n+4), .stats-intro > *:nth-child(n+4), .nbbh-stats > *:nth-child(n+4), .wsp-stats > *:nth-child(n+4), .sol-metrics-band > *:nth-child(n+4), .prod-facts > *:nth-child(n+4), .sol-metrics > *:nth-child(n+4), .price-grid > *:nth-child(n+4){animation-range:entry 0% cover 38%} } /* ── Laag 2: dezelfde beweging via een waarnemer ── LET OP DE HAAK `html.nb-beweegt`. Alles hieronder begint op opacity:0, en dat mag ALLEEN als er ook echt iets is dat het weer aanzet. Die klasse wordt door het script op gezet als allereerste daad. Draait het script niet -- JavaScript uit, een fout, een oude browser -- dan staat de klasse er niet en is er niets verborgen. Dit is de fout die hier bijna in ging: de eerste versie zette opacity:0 op de rasters en koppen van ALLE publieke pagina's, terwijl de waarnemer alleen op de landingspagina bestond en alleen naar .nb-rise keek. Op Safari zou elke productpagina leeg zijn geweest. Zichtbaarheid faalt altijd open. */ @supports not (animation-timeline: view()){ html.nb-beweegt .nb-rise, html.nb-beweegt .nb-zoom, html.nb-beweegt .nb-veeg, html.nb-beweegt .nb-stapel, html.nb-beweegt .nb-tegels, html.nb-beweegt .nb-diepte, html.nb-beweegt .nb-trap > *, html.nb-beweegt .prod-facts-grid > *, html.nb-beweegt .docs-grid > *, html.nb-beweegt .sol-grid > *, html.nb-beweegt .feat-hub-grid > *, html.nb-beweegt .company-grid > *, html.nb-beweegt .fd-grid > *, html.nb-beweegt .mp-grid > *, html.nb-beweegt .mp-tilesrow > *, html.nb-beweegt .mp-pages > *, html.nb-beweegt .mp-values > *, html.nb-beweegt .features > *, html.nb-beweegt .fd-steps > *, html.nb-beweegt .fd-checks > *, html.nb-beweegt .sk-steps > *, html.nb-beweegt .sk-blocks > *, html.nb-beweegt .sk-refine > *, html.nb-beweegt .sk-btiles > *, html.nb-beweegt .wm-row > *, html.nb-beweegt .nbmod-grid > *, html.nb-beweegt .nbdz-points > *, html.nb-beweegt .aud-grid > *, html.nb-beweegt .wsc-grid > *, html.nb-beweegt .wsc-points > *, html.nb-beweegt .company-features > *, html.nb-beweegt .company-steps > *, html.nb-beweegt .aifn-steps > *, html.nb-beweegt .nbbh-caps > *, html.nb-beweegt .nbbh-benefits > *, html.nb-beweegt .dcms-steps > *, html.nb-beweegt .pd-cap-grid > *, html.nb-beweegt .pd-steps > *, html.nb-beweegt .locp-results > *, html.nb-beweegt .locp-steps > *, html.nb-beweegt .locp-map-grid > *, html.nb-beweegt .mi-caps > *, html.nb-beweegt .mi-uses > *, html.nb-beweegt .pseo-subscores > *, html.nb-beweegt .pseo-ben-metrics > *, html.nb-beweegt .brs-steps > *, html.nb-beweegt .brs-uc-grid > *, html.nb-beweegt .dz-steps > *, html.nb-beweegt .dz-bens > *, html.nb-beweegt .dev-bene-grid > *, html.nb-beweegt .sondh-uc-grid > *, html.nb-beweegt .seo-deep-bens > *, html.nb-beweegt .wsdeep-usegrid > *, html.nb-beweegt .blog-grid > *, html.nb-beweegt .stat-grid > *, html.nb-beweegt .stats-intro > *, html.nb-beweegt .nbbh-stats > *, html.nb-beweegt .wsp-stats > *, html.nb-beweegt .sol-metrics-band > *, html.nb-beweegt .prod-facts > *, html.nb-beweegt .sol-metrics > *, html.nb-beweegt .price-grid > *, html.nb-beweegt .aifn-sec-head, html.nb-beweegt .aifn-sec-head-tight, html.nb-beweegt .d-head, html.nb-beweegt .dcms-sec-head, html.nb-beweegt .dev-deep-head, html.nb-beweegt .feat-sec-head, html.nb-beweegt .locp-head, html.nb-beweegt .nbbh-sec-head, html.nb-beweegt .pd-sec-head, html.nb-beweegt .seo-deep-head, html.nb-beweegt .sol-get-head, html.nb-beweegt .sol-info-head, html.nb-beweegt .vb-sec-head, html.nb-beweegt .wsdeep-head, html.nb-beweegt .wsp-sec-head, html.nb-beweegt .prod-hero-visual, html.nb-beweegt .company-hero-visual, html.nb-beweegt .dcms-graphic, html.nb-beweegt .vb-figure, html.nb-beweegt .wsp-figure, html.nb-beweegt .pseo-viz, html.nb-beweegt .sol-hero-visual, html.nb-beweegt .viz, html.nb-beweegt .locp-figure, html.nb-beweegt .dev-figure{ opacity:0;transition:opacity .55s ease,transform .55s cubic-bezier(.22,.61,.36,1), clip-path .55s cubic-bezier(.22,.61,.36,1)} html.nb-beweegt .nb-rise, html.nb-beweegt .nb-trap > *, html.nb-beweegt .stat-grid > *, html.nb-beweegt .stats-intro > *, html.nb-beweegt .nbbh-stats > *, html.nb-beweegt .wsp-stats > *, html.nb-beweegt .sol-metrics-band > *, html.nb-beweegt .prod-facts > *, html.nb-beweegt .sol-metrics > *{transform:translateY(18px)} html.nb-beweegt .nb-zoom{transform:scale(.965)} html.nb-beweegt .nb-veeg{clip-path:inset(0 0 22% 0);transform:translateY(12px)} html.nb-beweegt .nb-stapel, html.nb-beweegt .price-grid > *{transform:translateY(22px) rotate(-3deg) scale(.94)} html.nb-beweegt .nb-tegels, html.nb-beweegt .prod-facts-grid > *, html.nb-beweegt .docs-grid > *, html.nb-beweegt .sol-grid > *, html.nb-beweegt .feat-hub-grid > *, html.nb-beweegt .company-grid > *, html.nb-beweegt .fd-grid > *, html.nb-beweegt .mp-grid > *, html.nb-beweegt .mp-tilesrow > *, html.nb-beweegt .mp-pages > *, html.nb-beweegt .mp-values > *, html.nb-beweegt .features > *, html.nb-beweegt .fd-steps > *, html.nb-beweegt .fd-checks > *, html.nb-beweegt .sk-steps > *, html.nb-beweegt .sk-blocks > *, html.nb-beweegt .sk-refine > *, html.nb-beweegt .sk-btiles > *, html.nb-beweegt .wm-row > *, html.nb-beweegt .nbmod-grid > *, html.nb-beweegt .nbdz-points > *, html.nb-beweegt .aud-grid > *, html.nb-beweegt .wsc-grid > *, html.nb-beweegt .wsc-points > *, html.nb-beweegt .company-features > *, html.nb-beweegt .company-steps > *, html.nb-beweegt .aifn-steps > *, html.nb-beweegt .nbbh-caps > *, html.nb-beweegt .nbbh-benefits > *, html.nb-beweegt .dcms-steps > *, html.nb-beweegt .pd-cap-grid > *, html.nb-beweegt .pd-steps > *, html.nb-beweegt .locp-results > *, html.nb-beweegt .locp-steps > *, html.nb-beweegt .locp-map-grid > *, html.nb-beweegt .mi-caps > *, html.nb-beweegt .mi-uses > *, html.nb-beweegt .pseo-subscores > *, html.nb-beweegt .pseo-ben-metrics > *, html.nb-beweegt .brs-steps > *, html.nb-beweegt .brs-uc-grid > *, html.nb-beweegt .dz-steps > *, html.nb-beweegt .dz-bens > *, html.nb-beweegt .dev-bene-grid > *, html.nb-beweegt .sondh-uc-grid > *, html.nb-beweegt .seo-deep-bens > *, html.nb-beweegt .wsdeep-usegrid > *, html.nb-beweegt .blog-grid > *{transform:translateY(16px) scale(.88)} html.nb-beweegt .nb-diepte, html.nb-beweegt .prod-hero-visual, html.nb-beweegt .company-hero-visual, html.nb-beweegt .dcms-graphic, html.nb-beweegt .vb-figure, html.nb-beweegt .wsp-figure, html.nb-beweegt .pseo-viz, html.nb-beweegt .sol-hero-visual, html.nb-beweegt .viz, html.nb-beweegt .locp-figure, html.nb-beweegt .dev-figure{transform:perspective(700px) translateZ(-90px) rotateX(9deg)} /* De waarnemer zet .nb-in. Een eigen naam en niet het bestaande .in, want dat gebruikt de landingspagina al voor haar .reveal-blokken; twee betekenissen op een klasse gaan altijd een keer mis. */ /* GEMETEN 02-09-2026 (Firefox 154, terugvalpad): de eindstand zette clip-path:inset(0) op ELK onthuld element en zijn kinderen. Een kop met line-height 1.1 heeft staartletters (j, g, p) die .26em onder de regel steken; inset(0) knipt die op de doosrand af. De eigenaar zag het op elke serif-kop. Alleen de veeg heeft een knip nodig, en die eindigt RUIMER dan de doos. */ html.nb-beweegt .nb-in, html.nb-beweegt .nb-in > *{opacity:1;transform:none} html.nb-beweegt .nb-in.nb-veeg, html.nb-beweegt .nb-in > .nb-veeg{clip-path:inset(-1em)} } } @keyframes nb-rise-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} @keyframes nb-zoom-in{from{opacity:0;transform:scale(.965)}to{opacity:1;transform:none}} @keyframes nb-veeg-in{from{opacity:0;clip-path:inset(0 0 22% 0);transform:translateY(12px)} to{opacity:1;clip-path:inset(-1em);transform:none}} /* ruimer dan de doos: staartletters blijven heel */ @keyframes nb-stapel-in{from{opacity:0;transform:translateY(22px) rotate(-3deg) scale(.94)} to{opacity:1;transform:none}} @keyframes nb-tegels-in{from{opacity:0;transform:translateY(16px) scale(.88)} to{opacity:1;transform:none}} @keyframes nb-diepte-in{from{opacity:0;transform:perspective(700px) translateZ(-90px) rotateX(9deg)} to{opacity:1;transform:none}} /* Zonder beweging: gewoon zichtbaar, nooit onzichtbaar blijven hangen. */ @media (prefers-reduced-motion:reduce){ .nb-rise,.nb-zoom,.nb-veeg,.nb-stapel,.nb-tegels,.nb-diepte, .nb-trap > *, .prod-facts-grid > *, .docs-grid > *, .sol-grid > *, .feat-hub-grid > *, .company-grid > *, .fd-grid > *, .mp-grid > *, .mp-tilesrow > *, .mp-pages > *, .mp-values > *, .features > *, .fd-steps > *, .fd-checks > *, .sk-steps > *, .sk-blocks > *, .sk-refine > *, .sk-btiles > *, .wm-row > *, .nbmod-grid > *, .nbdz-points > *, .aud-grid > *, .wsc-grid > *, .wsc-points > *, .company-features > *, .company-steps > *, .aifn-steps > *, .nbbh-caps > *, .nbbh-benefits > *, .dcms-steps > *, .pd-cap-grid > *, .pd-steps > *, .locp-results > *, .locp-steps > *, .locp-map-grid > *, .mi-caps > *, .mi-uses > *, .pseo-subscores > *, .pseo-ben-metrics > *, .brs-steps > *, .brs-uc-grid > *, .dz-steps > *, .dz-bens > *, .dev-bene-grid > *, .sondh-uc-grid > *, .seo-deep-bens > *, .wsdeep-usegrid > *, .blog-grid > *, .stat-grid > *, .stats-intro > *, .nbbh-stats > *, .wsp-stats > *, .sol-metrics-band > *, .prod-facts > *, .sol-metrics > *, .price-grid > *, .aifn-sec-head, .aifn-sec-head-tight, .d-head, .dcms-sec-head, .dev-deep-head, .feat-sec-head, .locp-head, .nbbh-sec-head, .pd-sec-head, .seo-deep-head, .sol-get-head, .sol-info-head, .vb-sec-head, .wsdeep-head, .wsp-sec-head, .prod-hero-visual, .company-hero-visual, .dcms-graphic, .vb-figure, .wsp-figure, .pseo-viz, .sol-hero-visual, .viz, .locp-figure, .dev-figure{opacity:1!important;transform:none!important;clip-path:none!important} } .main{flex:1 0 auto;padding:40px 24px 80px;width:100%} h1{font-size:1.9rem;line-height:1.16;margin:0 0 10px;letter-spacing:-.025em;font-weight:700} .lede{color:var(--nb-muted);margin:0 0 28px;font-size:1rem;max-width:60ch;line-height:1.6} .section-note{color:var(--nb-muted);font-size:.9rem;margin-top:20px} /* Page header: a centered intro used by the wider pages (plans, dashboard) */ .page-head{text-align:center;max-width:680px;margin:0 auto 54px} .page-head h1{margin-bottom:12px} .page-head .lede{margin:0 auto;max-width:56ch} .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--nb-primary);background:rgba(38,37,30,.08);padding:6px 13px;border-radius:999px;margin-bottom:16px} /* Auth shell: a centered, confident, Shopify-clean card for signup + login */ /* ── Auth-splitscherm: formulier links, levend paneel rechts (caffeine-koers) ── */ body[data-auth-minimal="1"] main.wrap,body[data-auth-minimal="1"] .wrap.main{max-width:none;padding:0;margin:0} .auth-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;align-items:stretch;min-height:100vh;min-height:100svh} .auth-vak{min-width:0;align-self:center;justify-self:center;width:min(560px,100%);padding:calc(var(--nav-h,77px) + 16px) clamp(20px,4vw,48px) clamp(28px,4vw,56px)} .auth-zij{position:relative;min-height:100%;border-radius:0;background:radial-gradient(120% 70% at 18% 0%,#8FB2DE 0%,transparent 55%),linear-gradient(180deg,#6E99D1 0%,#4F7DBE 48%,#44699F 100%);border:0;overflow:clip} .az-gloed{position:absolute;inset:-20%;background:radial-gradient(44% 38% at 62% 30%,rgba(255,255,255,.2),transparent 62%);pointer-events:none} .az-tegel{position:absolute;display:grid;place-items:center;width:64px;height:64px;border-radius:18px;color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);animation:az-zweef 7s ease-in-out infinite alternate} .az-tegel svg{width:28px;height:28px} .az-t1{left:14%;top:16%;animation-delay:0s} .az-t2{left:58%;top:9%;animation-delay:-1.6s;animation-duration:8s} .az-t3{left:76%;top:34%;animation-delay:-3.1s} .az-t4{left:22%;top:42%;animation-delay:-4.4s;animation-duration:9s} .az-t5{left:50%;top:30%;animation-delay:-2.2s} @keyframes az-zweef{from{transform:translateY(-7px)}to{transform:translateY(9px)}} .az-statement{position:absolute;left:clamp(24px,4.5vw,56px);right:clamp(24px,4.5vw,56px);bottom:clamp(28px,5vw,56px);margin:0;font-family:var(--st-serif),Georgia,serif;font-size:clamp(1.7rem,2.8vw,2.6rem);font-weight:400;letter-spacing:-.01em;line-height:1.18;color:#fff} .az-statement span{font-style:italic} @media (max-width:960px){.auth-split{grid-template-columns:1fr;min-height:100svh;align-content:center}.auth-zij{display:none}.auth-vak{padding-top:calc(var(--nav-h,77px) + 8px)}} @media (prefers-reduced-motion:reduce){.az-tegel{animation:none}} body[data-portal-theme="dark"] .auth-zij{background:radial-gradient(120% 70% at 18% 0%,#3A5A8A 0%,transparent 55%),linear-gradient(180deg,#2C4A78 0%,#22395E 48%,#1A2C49 100%)} body[data-portal-theme="dark"] .az-statement{color:var(--nb-white)} body[data-portal-theme="dark"] .az-statement span{color:var(--nb-amber-on-page,#C08532)} body[data-portal-theme="dark"] .az-tegel{color:var(--nb-amber-on-page,#C08532)} /* De eerlijke kruisjeslijst op het lichte pakket (delta uit de plans-tabel). Gedempt: de vinkjes leiden, de kruisjes informeren. */ .plan-mist-kop{margin:14px 0 6px;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--nb-muted)} .plan-mist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px} .plan-mist li{display:flex;align-items:flex-start;gap:9px;font-size:.9rem;color:var(--nb-muted)} .plan-mist li svg{width:15px;height:15px;flex:none;margin-top:3px;color:var(--nb-faint,#8A857A)} .plan-mist-link{margin:12px 0 0;font-size:.88rem} .plan-mist-link a{color:#8A5A1A;font-weight:650;text-decoration:none;border-bottom:1px solid rgba(156,105,38,.35)} body[data-portal-theme="dark"] .plan-mist li{color:var(--nb-muted-d)} body[data-portal-theme="dark"] .plan-mist-link a{color:var(--nb-amber-on-page,#C08532)} .auth{max-width:460px;margin:0 auto;position:relative} /* (Removed the dark radial "smudge" behind the auth heading - owner found it ugly.) */ .auth .auth-head{text-align:center;margin-bottom:24px} .auth .auth-head .auth-mark{display:inline-flex;margin-bottom:16px} .auth .auth-head h1{font-size:1.72rem;margin-bottom:8px} .auth .auth-head .lede{margin:0 auto;max-width:40ch;font-size:1rem} .auth .card{box-shadow:var(--nb-shadow-card);border-radius:20px;padding:clamp(28px,4vw,40px) clamp(24px,3.5vw,38px)} .auth-alt{text-align:center;margin-top:22px;margin-bottom:0;color:var(--nb-muted)} .auth-trust{margin-top:22px;display:flex;align-items:flex-start;justify-content:flex-start;text-align:left;gap:8px;color:var(--nb-muted);font-size:.86rem;line-height:1.5} .auth-trust svg{width:15px;height:15px;flex:0 0 auto;color:var(--nb-ok);margin-top:2px} /* Onboarding "check your email" confirmation */ .onboard-check{width:56px;height:56px;margin:2px auto 16px;display:flex;align-items:center;justify-content:center;border-radius:16px;background:var(--nb-blue-50);color:var(--nb-primary)} .onboard-check svg{width:28px;height:28px} .onboard-email{color:var(--nb-slate);margin:0 0 22px;line-height:1.6} .onboard-email strong{color:var(--nb-ink);word-break:break-word} /* Cards + grid */ .card{background:var(--nb-card);border:1px solid var(--nb-line);border-radius:var(--nb-radius);padding:28px;box-shadow:var(--nb-shadow)} .grid{display:grid;gap:22px} .grid-2{grid-template-columns:1fr 1fr} @media (max-width:720px){.grid-2{grid-template-columns:1fr}} /* Plans page header: same design language as the landing (a soft blue glow behind a confident heading + a trust check-row), tuned for the light portal chrome. */ .plans-head{position:relative;max-width:720px;padding-top:12px;margin-bottom:44px} .plans-head-glow{position:absolute;left:50%;top:-40px;transform:translateX(-50%);width:min(620px,100%);height:280px; background:radial-gradient(closest-side,rgba(38,37,30,.14),transparent 72%);z-index:-1;pointer-events:none;filter:blur(2px)} .plans-head h1{font-size:clamp(2.2rem,4.6vw,3.1rem);letter-spacing:-.03em;margin-bottom:14px} .plans-head .lede{margin:0 auto;max-width:52ch} .plans-trust{list-style:none;margin:22px auto 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px} .plans-trust li{display:inline-flex;align-items:flex-start;gap:8px;color:var(--nb-slate);font-size:.92rem;font-weight:500;line-height:1.45;text-align:left} .plans-trust svg{width:17px;height:17px;color:var(--nb-primary);flex:0 0 auto;margin-top:1px} /* Plans cards. No hover-lift and no heavy drop-shadow (the owner dislikes both on the landing): a hairline border + a calm border-tint on hover, subtle depth at most. Matches the landing card treatment. */ /* OWNER RULE: every /plans block shares ONE content column with identical outer edges -- never three different widths stacked on one page, and never stretched across the full 1280 container either (2 cards over the full width reads bloated; reference: Shopify's pricing keeps cards + comparison table on the exact same column). One shared measure, sized for TWO premium cards. */ /* Even breed als de tarievenkaarten (.v6-prijzen 1120): alles in verhouding. */ .plans-compare-wrap,.plans-faq{max-width:1120px;margin-left:auto;margin-right:auto} .plans-grid{margin-top:0} .plan{display:flex;flex-direction:column;position:relative;padding:34px 30px;border:1px solid var(--nb-line);border-radius:var(--nb-radius-lg); transition:border-color .3s var(--nb-ease),background .3s var(--nb-ease)} .plan:hover{border-color:#26251E33;background:#FAF7F1} /* Effen vlak. Het uitgelichte plan onderscheidt zich met zijn rand en zijn badge; een verticaal verloop over de kaart is decoratie op een oppervlak. */ .plan.is-popular{border-color:rgba(38,37,30,.45);background:rgba(38,37,30,.04)} .plan.is-popular:hover{border-color:rgba(38,37,30,.6)} /* Popular plan is marked by the .badge-pop pill only, never a colored top stripe. */ .plan .plan-name{font-size:1.4rem;font-weight:800;margin:0;letter-spacing:-.01em} .plan .plan-tag{color:var(--nb-muted);margin:6px 0 18px} .plan .price{font-size:2.4rem;font-weight:800;color:var(--nb-ink);letter-spacing:-.02em} .plan .price small{font-size:1.05rem;font-weight:600;color:var(--nb-slate);margin-left:3px} /* Shared plan PRICE block (ex-btw headline + muted "excl. 21% btw / incl." line), used identically on the marketing, dashboard and subscribe plan cards. */ .plan-price-block{margin:14px 0 2px} .plan-price-main{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap} .plan-price-amt{font-size:clamp(1.7rem,2.4vw,2.05rem);font-weight:800;color:var(--nb-ink,#26251E);letter-spacing:-.02em;line-height:1.05} .plan-price-main small{font-size:.92rem;font-weight:600;color:var(--nb-slate,#6B6858)} .plan-price-btw{margin-top:4px;font-size:.74rem;color:var(--nb-muted,#6B6858)} /* Per-bullet info affordance: a muted "i" that floats a data-tip tooltip on hover/focus. */ .feat-info{display:inline-flex;align-items:center;justify-content:center;margin-left:5px;color:var(--nb-muted,#6B6858);opacity:.55;cursor:help;vertical-align:middle;transition:opacity .15s ease,color .15s ease} .feat-info:hover,.feat-info:focus-visible{opacity:1;color:var(--v6-accent-diep,#1D4ED8);outline:none} /* svg must not swallow the hover: keeps the .feat-info span as the event target so tooltip.js closest('[data-tip]') works in every browser (Firefox included). */ .feat-info svg{display:block;pointer-events:none} /* Floating tooltip bubble (tooltip.js portals a div to ). This CSS also lives in admin.css for the dashboard; public pages (portal_layout) need it too or the bubble falls back to an unstyled position:static box. */ .tip-floating{z-index:9999;color:#fff;white-space:normal;text-align:center;letter-spacing:.005em;pointer-events:none;background:#26251E;border-radius:6px;width:max-content;max-width:240px;padding:7px 11px;font-size:11.5px;font-weight:500;line-height:1.35;animation:tip-fade-in .12s ease-out;position:fixed;transform:translate(-50%) translateY(-100%) translateY(-9px);box-shadow:0 6px 18px -6px rgba(38,37,30,.5)} .tip-floating--bottom{transform:translate(-50%) translateY(9px)} .tip-floating:after{content:"";left:var(--tip-arrow-x,50%);border-left:4px solid transparent;border-right:4px solid transparent;width:0;height:0;position:absolute;transform:translate(-50%)} .tip-floating--top:after{border-top:5px solid #26251E;top:100%} .tip-floating--bottom:after{border-bottom:5px solid #26251E;bottom:100%} @keyframes tip-fade-in{0%{opacity:0}to{opacity:1}} /* ── Plans: comparison table + FAQ accordion (flat, hairline, amber accents) ── */ .plans-sub{text-align:center;font-size:clamp(1.4rem,2.6vw,1.8rem);font-weight:800;letter-spacing:-.02em;margin:0 0 26px} .plans-compare-wrap{margin-top:64px} /* De vergelijkingstabel is 520px breed en schuift in haar EIGEN vak (overflow-x:auto). Toch schoof de HELE prijzenpagina op een telefoon 95px opzij: gemeten op 390px liep de kop echt mee naar links. `overflow-x:auto` op dit vak hield de tabel wel zichtbaar binnen, maar de tabel bleef meetellen voor de schuifbreedte van de pagina. `contain:paint` sluit dat af: alles buiten dit vak telt niet meer mee. Gemeten na de reparatie: pagina schuift 0px, en de tabel schuift binnen nog 180px. */ /* Huisregel: elk horizontaal schuifvak krijgt contain:paint zodat de PAGINA stilstaat (PortalTextStaysReadableTest). Op klein scherm toont een tabblad EEN kolom, dus zijwaarts scrollen komt in de praktijk niet voor; het vak is het vangnet. */ .plans-compare{overflow-x:auto;contain:paint;border:1px solid var(--nb-line);border-radius:20px;background:var(--nb-card)} .plans-compare table{width:100%;border-collapse:collapse} .plans-compare th,.plans-compare td{padding:15px 22px;text-align:left;font-size:.94rem;border-top:1px solid var(--nb-line);transition:background .2s ease} /* GEEN sticky koprij: die schoof half-doorzichtig over de rijen (eigenaar 02-09). */ .plans-compare thead th{background:var(--nb-card);border-top:0;border-bottom:1px solid var(--nb-line);vertical-align:top;padding:22px 22px 18px} .plans-compare thead th:not(:first-child),.plans-compare td{text-align:center;width:27%} .plans-compare thead th[data-kolom]:not([data-kolom="-1"]){display:table-cell} .pc-naam{display:block;font-size:1.05rem;font-weight:700;letter-spacing:-.01em;color:var(--nb-ink)} .pc-prijs{display:block;margin-top:6px;font-size:1.7rem;font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--nb-ink)} .pc-prijs small{font-size:.85rem;font-weight:500;color:var(--nb-muted);margin-left:3px} .pc-chip{display:inline-block;margin-bottom:8px;background:var(--v6-accent-zacht,#DBEAFE);color:var(--v6-accent-diep,#1D4ED8);font-size:.72rem;font-weight:700;border-radius:999px;padding:4px 11px} .plans-compare .pc-knop{display:inline-flex;margin-top:14px;padding:9px 16px;font-size:.84rem} .plans-compare tbody th{font-weight:600;color:var(--nb-slate)} /* EEN blauwe tint (de aanrader-kolom); rij-hover is neutraal, anders is alles dezelfde kleur. */ .plans-compare tbody tr:hover td,.plans-compare tbody tr:hover th{background:rgba(12,10,9,.03)} .plans-compare .pc-aanrader{background:rgba(37,99,235,.05)} .plans-compare tbody tr:hover td.pc-aanrader{background:rgba(37,99,235,.09)} .plans-compare .pc-yes{width:24px;height:24px;padding:5px;border-radius:50%;background:var(--v6-accent,#2563EB);color:#fff;display:inline-block;vertical-align:middle} .plans-compare .pc-no{width:19px;height:19px;color:var(--nb-muted);opacity:.4;display:inline-block;vertical-align:middle} .plans-compare .pc-text{font-weight:600;color:var(--nb-ink);font-size:.9rem} .pc-tabs{display:none;gap:4px;padding:4px;margin:0 auto 14px;background:var(--v6-bg2,#F7F4EE);border:1px solid var(--nb-line);border-radius:999px;width:max-content;max-width:100%} .pc-tab{font:inherit;font-size:.9rem;font-weight:600;color:var(--nb-ink);background:transparent;border:0;border-radius:999px;padding:9px 18px;cursor:pointer} .pc-tab.is-aan{background:#fff;color:var(--v6-accent-diep,#1D4ED8)} @media (max-width:700px){ .pc-tabs{display:flex} .plans-compare .pc-weg{display:none} .plans-compare thead th:not(:first-child),.plans-compare td{width:50%} .plans-compare th,.plans-compare td{padding:13px 14px;font-size:.9rem} } .plans-faq{margin-top:64px} .plans-faq-list{display:flex;flex-direction:column;gap:12px} .plans-faq-item{border:1px solid var(--nb-line);border-radius:14px;background:var(--nb-card);transition:border-color .25s var(--nb-ease)} .plans-faq-item:hover{border-color:rgba(37,99,235,.45)} .plans-faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer;list-style:none;padding:17px 20px;font-weight:650;font-size:1rem;color:var(--nb-ink)} .plans-faq-item summary::-webkit-details-marker{display:none} .plans-faq-item summary svg{width:18px;height:18px;color:var(--nb-muted);flex:0 0 auto;transition:transform .25s var(--nb-ease)} .plans-faq-item[open] summary svg{transform:rotate(180deg)} .plans-faq-item p{margin:0;padding:0 20px 17px;font-size:.95rem;line-height:1.62;color:var(--nb-muted)} /* Two-column bullet flow so a long feature list (Enterprise) stays compact instead of one very tall column. break-inside:avoid keeps each bullet (label + tooltip) intact across the column break; collapses to one column on narrow screens. */ .plan ul{list-style:none;padding:0;margin:20px 0 26px;columns:2;column-gap:32px} @media(max-width:640px){.plan ul{columns:1}} .plan li{padding-left:28px;position:relative;color:var(--nb-ink);break-inside:avoid;margin-bottom:11px} .plan [data-tip]{cursor:help} .pb-feats [data-tip]{cursor:help} @media(max-width:560px){.pb-feats{columns:1!important}} /* One pseudo-element = the circle carrying a CENTERED background check (background-position:center), so the tick can never drift off-centre the way two independent px/em-offset pseudos did. */ .plan li::before{content:"";position:absolute;left:0;top:.3em;width:18px;height:18px;border-radius:999px;background:rgba(38,37,30,.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 6.3 5.1 8.4 9 3.9' stroke='%23C08532' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/11px 11px} .plan .plan-cta{margin-top:auto} .badge-pop{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--nb-primary-solid);color:#fff;font-size:.72rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:5px 14px;border-radius:999px} /* Forms */ .form{max-width:100%} .field{margin-bottom:15px} .field label{display:block;font-weight:600;margin-bottom:6px;font-size:.85rem;color:var(--nb-ink)} .field .hint{color:var(--nb-muted);font-size:.85rem;margin-top:5px} .input{width:100%;padding:10px 12px;border:1px solid var(--nb-line);border-radius:9px;font-size:.95rem;background:#fff;color:var(--nb-ink);transition:border-color .16s var(--nb-ease),box-shadow .16s var(--nb-ease)} .input::placeholder{color:#6F6B60} .input:hover{border-color:#26251E33} .input:focus{border-color:var(--nb-primary);box-shadow:0 0 0 3px rgba(38,37,30,.15);outline:none} select.input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px} .slug-row{display:flex;gap:8px;align-items:stretch} .slug-row .input{flex:1} .slug-suffix{color:var(--nb-muted);font-size:.9rem;align-self:center;white-space:nowrap} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;border-radius:10px;font-size:.95rem;font-weight:600;cursor:pointer;border:1px solid transparent;transition:background .16s var(--nb-ease),border-color .16s var(--nb-ease),color .16s var(--nb-ease),transform .12s ease,box-shadow .16s var(--nb-ease)} .btn:active{transform:translateY(1px)} .btn-full{width:100%} .btn-solid{background:var(--nb-primary-solid);color:#fff;box-shadow:0 1px 2px rgba(38,37,30,.14)} .btn-solid:hover{background:var(--nb-primary-hover);color:#fff} .btn-ghost{background:#fff;border-color:var(--nb-line);color:var(--nb-slate)} .btn-ghost:hover{border-color:var(--nb-primary);color:var(--nb-primary-solid)} .honeypot{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden} /* Inline validity chips */ .chip{display:inline-block;font-size:.85rem;font-weight:600;padding:3px 9px;border-radius:999px} .chip-ok{color:var(--nb-ok);background:var(--nb-ok-bg)} .chip-bad{color:var(--nb-err);background:var(--nb-err-bg)} .chip-warn{color:var(--nb-warn);background:var(--nb-warn-bg)} .slug-status{margin-top:8px;min-height:1.4em} /* Alerts */ .alert{border-radius:10px;padding:12px 14px;margin-bottom:20px;font-weight:500} .alert-error{color:var(--nb-err);background:var(--nb-err-bg);border:1px solid #fecaca} .alert-ok{color:var(--nb-ok);background:var(--nb-ok-bg);border:1px solid #bbf7d0} .field-error{color:var(--nb-err);font-size:.85rem;margin-top:5px;font-weight:600} /* Table (dashboard) */ .tbl{width:100%;border-collapse:collapse;background:var(--nb-card);border:1px solid var(--nb-line);border-radius:var(--nb-radius);overflow:hidden} .tbl th,.tbl td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--nb-line)} .tbl th{background:var(--nb-bg);font-size:.82rem;text-transform:uppercase;letter-spacing:.03em;color:var(--nb-muted)} .tbl tr:last-child td{border-bottom:none} .status-pill{font-size:.8rem;font-weight:700;padding:3px 11px 3px 9px;border-radius:999px;text-transform:capitalize;display:inline-flex;align-items:center;gap:6px} .status-pill::before{content:"";width:6px;height:6px;border-radius:999px;background:currentColor;flex:none} .status-active{color:var(--nb-ok);background:var(--nb-ok-bg)} .status-provisioning{color:var(--nb-warn);background:var(--nb-warn-bg)} .status-suspended{color:var(--nb-err);background:var(--nb-err-bg)} .empty{text-align:center;padding:56px 24px;color:var(--nb-muted)} .who{color:var(--nb-muted);font-size:.92rem;margin-bottom:8px} /* Dashboard shell: a centered, comfortably-wide content column */ .dash{max-width:1120px;margin:0 auto} .dash-head{position:relative;overflow:hidden;margin-bottom:24px;padding:26px 30px;border:1px solid var(--nb-line);border-radius:var(--nb-radius-lg);box-shadow:var(--nb-shadow-card); background:radial-gradient(560px 220px at 92% -30%,rgba(38,37,30,.10),transparent 62%),linear-gradient(180deg,#fff,rgba(255,255,255,.75))} .dash-head h1{margin-bottom:6px;letter-spacing:-.02em;font-size:1.7rem} .dash-head .lede{margin:6px 0 0} .dash-hi{margin:0 0 4px;color:var(--nb-muted);font-size:.95rem} .dash-hi strong{color:var(--nb-ink);font-weight:700} /* ── KPI stat tiles (reference overview, NerrieBuilder modules) ── */ .dash-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px} @media (max-width:900px){.dash-stats{grid-template-columns:repeat(2,1fr)}} @media (max-width:520px){.dash-stats{grid-template-columns:1fr}} .dstat{background:var(--nb-card);border:1px solid var(--nb-line);border-radius:14px;padding:17px 18px;box-shadow:0 1px 2px rgba(38,37,30,.05);transition:transform .15s ease,box-shadow .15s ease;min-height:104px;display:flex;flex-direction:column} /* ER BEWEEGT NIETS OP HOVER -- ook in de gedeelde portaalstijl niet. Eigenaar 29 augustus 2026: "lelijke hover effecten waar alles gaat haperen". Gemeten: drie kaarttypen sprongen omhoog (-1, -2 en -4 px). Bij een raster van kaarten naast elkaar geeft dat precies dat haperende gevoel: alles wipt op en neer terwijl je muis erlangs gaat, en bij -4px zie je het ook nog eens veel sterker dan bij -1. De regel stond al vast voor GEGENEREERDE sites (ronde 44) maar was nooit toegepast op het portaal zelf. Kleur, rand en schaduw mogen veranderen; de POSITIE niet. Bewaker: PublicPagesDontJumpOnHoverTest. */ .dstat:hover{box-shadow:0 8px 20px -12px rgba(38,37,30,.22)} .dstat-top{display:flex;align-items:center;justify-content:space-between;gap:10px} .dstat-label{color:var(--nb-muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;font-weight:700} .dstat-ico{display:inline-flex;align-items:center;justify-content:center;width:33px;height:33px;border-radius:10px;flex:none} /* Gelijk aan .tone-blue in admin/render.php: amber, niet teal. */ .dstat-ico.tone-blue{background:#FFFBEB;color:#9C6926} .dstat-ico.tone-green{background:#ecfdf5;color:#15803d} .dstat-ico.tone-amber{background:#fffbeb;color:#b45309} .dstat-ico.tone-violet{background:#F2F1ED;color:#57544C} .dstat-value{font-size:1.6rem;font-weight:800;letter-spacing:-.02em;color:var(--nb-ink);margin-top:10px;line-height:1.1;word-break:break-word} .dstat-note{color:var(--nb-muted);font-size:.82rem;margin-top:3px} .dstat-note a{color:var(--nb-primary);font-weight:600;text-decoration:none} .dstat-note a:hover{text-decoration:underline} /* Websites section heading */ .dash-section{margin-bottom:8px} .dash-section-title{font-size:1.12rem;font-weight:700;letter-spacing:-.01em;margin:0 0 14px;color:var(--nb-ink)} /* Designed empty state */ .dash-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:44px 24px} .dash-empty-ico{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:16px;background:#FFFBEB;color:var(--nb-primary);margin-bottom:6px} .dash-empty-title{margin:0;font-size:1.15rem;font-weight:700;color:var(--nb-ink)} .dash-empty-text{margin:0 0 6px;color:var(--nb-muted);max-width:440px;line-height:1.55} /* ── Meekijkbalk (superadmin kijkt mee als klant) ── GEEN position:sticky. Deze balk stond vastgeplakt aan de bovenkant en dekte samen met de kopbalk de eerste regels van elke portaalpagina af. Hij staat nu gewoon als eerste blok bovenaan de pagina, precies zoals dezelfde balk in lib/app_shell.php. Ook de zware schaduw is weg: die was er alleen om het zweven te verkopen, en zonder zweven is er niets om schaduw op te werpen. Deze regels staan nu LETTERLIJK gelijk aan die in lib/app_shell.php - wijzig ze samen, anders krijgt dezelfde superadmin twee verschillende balken. */ /* Effen huistint-amber. Er stond linear-gradient(90deg,#b45309,#d97706): een kleurverloop op een volle-breedte balk, en die twee stops kwamen bovendien uit de Tailwind-amberramp terwijl dit product #9C6926 als donkere amber gebruikt. Twee tinten voor dezelfde rol dus, en een verloop op een oppervlak. */ .imp-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:9px 16px;background:#9C6926;color:#fff;font-size:13px;font-weight:600} .imp-bar-msg{display:inline-flex;align-items:center;gap:8px;min-width:0} .imp-bar-msg svg{flex-shrink:0} .imp-bar-form{margin:0;flex-shrink:0} .imp-bar-btn{display:inline-flex;align-items:center;gap:6px;cursor:pointer;padding:6px 13px;border-radius:8px;border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.16);color:#fff;font-size:12.5px;font-weight:700;transition:background .15s} .imp-bar-btn:hover{background:rgba(255,255,255,.28)} .imp-bar-btn svg{flex-shrink:0} /* De meekijkbalk plakt niet: hij staat als eerste blok bovenaan en scrollt weg. De kopbalk eronder is wel sticky, maar pas als de meekijkbalk uit beeld is raakt hij top:0. Er is dus geen body:has(.imp-bar) .site-header{top:37px} nodig. */ /* ── Designed 404 ── */ .nf-wrap{max-width:640px;margin:0 auto;padding:9vh 20px 60px;text-align:center} /* Het grote 404-cijfer staat op de PAGINA en werd in het donkere thema bijna-zwart op bijna-zwart (1.32:1 tegen een eis van 3.0 voor grote tekst). */ .nf-code{font-size:clamp(5rem,16vw,8.5rem);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--nb-ink-on-page,#26251E);opacity:.9} .nf-title{font-size:clamp(1.5rem,4vw,2.1rem);margin:14px 0 10px;letter-spacing:-.02em} .nf-lede{color:var(--nb-muted);font-size:1.02rem;line-height:1.65;margin:0 auto 26px;max-width:460px} .nf-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} body[data-portal-theme="dark"] .nf-title{color:var(--nb-white)} body[data-portal-theme="dark"] .nf-lede{color:var(--nb-muted-d)} /* Trial banner (light theme): a filled blue-tint card, no accent line. */ .trial-banner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;margin-bottom:28px;padding:20px 24px;background:linear-gradient(180deg,rgba(38,37,30,.07),rgba(38,37,30,.04));border:1px solid rgba(38,37,30,.18);border-radius:var(--nb-radius-lg)} .trial-banner-main{display:flex;align-items:center;gap:16px;min-width:0} .trial-pill{flex:none;display:inline-flex;align-items:center;justify-content:center;padding:8px 14px;border-radius:999px;background:var(--nb-primary-solid);color:#fff;font-weight:700;font-size:.82rem;white-space:nowrap;box-shadow:0 4px 12px -4px rgba(38,37,30,.5)} .trial-copy{min-width:0} .trial-title{margin:0 0 3px;font-size:1.12rem;line-height:1.25} .trial-text{margin:0;color:var(--nb-muted);font-size:.92rem;line-height:1.5} .trial-banner .btn{flex:none} @media (max-width:640px){.trial-banner{flex-direction:column;align-items:stretch}.trial-banner .btn{width:100%;text-align:center}} /* Dashboard per-tenant actions */ .actions-cell{white-space:nowrap} .inline-action{display:inline-block;margin:0 4px 0 0} .btn-mini{display:inline-block;padding:6px 12px;border-radius:7px;font-size:.85rem;font-weight:600;cursor:pointer;border:1px solid transparent;transition:background .15s ease,border-color .15s ease,color .15s ease} .btn-mini-solid{background:var(--nb-primary-solid);color:#fff} .btn-mini-solid:hover{background:var(--nb-primary-hover);color:#fff} .btn-mini-ghost{background:#fff;border-color:var(--nb-line);color:var(--nb-ink)} .btn-mini-ghost:hover{border-color:var(--nb-primary);color:var(--nb-primary-solid)} .muted-dash{color:var(--nb-muted)} .site-footer{flex:0 0 auto;border-top:1px solid var(--nb-line);background:rgba(255,255,255,.7);color:var(--nb-muted);font-size:.9rem;padding:52px 0 28px} /* Footer: CONSTRAINED to the same --nb-wrap (1280px) container the homepage footer uses (.foot-inner{max-width:1280px;margin:0 auto}), so the footer content is centered and NOT edge-to-edge. The full-width band comes from the .site-footer background/padding; only the content wrap is capped. Owner: footer was "mega pagina breed" - match the homepage footer proportions. */ .site-footer .wrap{max-width:var(--nb-wrap);margin:0 auto;padding-left:clamp(20px,4vw,60px);padding-right:clamp(20px,4vw,60px)} /* Rich footer (matches the landing): brand + 3 link columns + a bottom bar. */ .pf-foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:34px;text-align:left} .pf-foot-brand .brand{display:inline-flex;margin-bottom:14px} .pf-foot-brand p{max-width:34ch;color:var(--nb-muted);line-height:1.55;font-size:.9rem} .pf-foot-col h3{font-size:12px;text-transform:uppercase;letter-spacing:.11em;color:var(--nb-ink,#26251E);opacity:.75;margin:0 0 14px;font-weight:700} .pf-foot-col a{display:block;color:var(--nb-muted);font-size:.92rem;margin-bottom:10px;text-decoration:none;transition:color .16s var(--nb-ease)} .pf-foot-col a:hover{color:var(--nb-amber-on-page,#8A5A1A)} .pf-foot-bottom{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;padding-top:22px;border-top:1px solid var(--nb-line)} .pf-foot-bottom p{margin:0;justify-self:start} .pf-foot-bottom .theme-switch{justify-self:center} @media(max-width:760px){.pf-foot-bottom{grid-template-columns:1fr;justify-items:center;text-align:center;gap:18px;padding-top:26px}.pf-foot-bottom p,.pf-foot-bottom .theme-switch,.pf-foot-bottom .pf-powered{justify-self:center}.pf-foot-bottom .theme-switch{order:-1}.pf-foot-bottom p{order:0}.pf-foot-bottom .pf-powered{order:1}} @media(max-width:860px){.pf-foot-top{grid-template-columns:1fr 1fr;gap:28px}.pf-foot-brand{grid-column:1/-1}} @media(max-width:520px){.pf-foot-top{grid-template-columns:1fr}} body[data-portal-theme="dark"] .pf-foot-col h3{color:var(--nb-white,#F7F7F4);opacity:.8} /* De regel die HIER stond eindigde op `.foot-parent{color:var(--nb-muted-d,#9AA3B8)}`. Bij het opruimen van die dode klasse ging het DECLARATIEBLOK mee, waardoor deze drie selectors doorliepen tot de a:hover-regel: donkere voettekst werd wit en hover deed niets meer, want normaal en hover kregen dezelfde kleur. Een selector weghalen is niet hetzelfde als een regel weghalen. */ body[data-portal-theme="dark"] .pf-foot-brand p, body[data-portal-theme="dark"] .pf-foot-col a, body[data-portal-theme="dark"] .pf-foot-bottom p{color:var(--nb-muted-d,#9AA3B8)} body[data-portal-theme="dark"] .pf-foot-col a:hover{color:var(--nb-white,#fff)} body[data-portal-theme="dark"] .pf-foot-bottom{border-top-color:var(--nb-line-dark)} /* Captcha: ONE slim inline row [ sum = ? ] [ answer ] [ refresh ]. */ .captcha-block{margin-top:2px} .captcha-block label{margin-bottom:7px} .captcha-card{display:flex;align-items:center;gap:8px;height:42px;padding:0 6px 0 14px;border:1px solid var(--nb-line);border-radius:11px;background:var(--nb-blue-50);margin-bottom:0} .captcha-q{font-weight:600;font-size:.95rem;letter-spacing:.02em;color:var(--nb-ink);font-variant-numeric:tabular-nums;white-space:nowrap;flex:0 0 auto;user-select:none;-webkit-user-select:none} .captcha-answer{flex:1 1 auto;min-width:0;height:30px;padding:0 10px;border:1px solid var(--nb-line);border-radius:8px;background:#fff;color:var(--nb-ink);font-size:.95rem;text-align:center;font-variant-numeric:tabular-nums;transition:border-color .16s var(--nb-ease),box-shadow .16s var(--nb-ease)} .captcha-answer::placeholder{color:#6F6B60} .captcha-answer:focus{border-color:var(--nb-primary);box-shadow:0 0 0 3px rgba(38,37,30,.15);outline:none} .captcha-refresh{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--nb-muted);cursor:pointer;transition:border-color .16s var(--nb-ease),color .16s var(--nb-ease),background .16s var(--nb-ease)} .captcha-refresh:hover{border-color:var(--nb-line);color:var(--nb-primary);background:var(--nb-blue-50)} .captcha-refresh svg{width:15px;height:15px;transition:transform .5s var(--nb-ease)} .captcha-refresh.is-spinning svg{transform:rotate(360deg)} /* Billing (dashboard) */ .status-incomplete{color:var(--nb-warn);background:var(--nb-warn-bg)} .status-pastdue{color:var(--nb-warn);background:var(--nb-warn-bg)} .status-canceled{color:var(--nb-muted);background:var(--nb-bg)} .billing{margin-top:44px} .billing h2{font-size:1.35rem;margin:0 0 14px} .billing h3{font-size:1.05rem;margin:22px 0 10px} .billing-plan{margin-bottom:8px} .billing-row{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid var(--nb-line)} .billing-row:last-child{border-bottom:none} .billing-key{color:var(--nb-muted);font-weight:600} .billing-val{text-align:right} .billing-invoices .tbl{margin-top:6px} /* Payment-mode chooser (signup + dashboard, FASE 6) */ .mode-legend{display:block;font-weight:600;margin-bottom:8px} .mode-info{color:var(--nb-muted);font-size:.9rem;margin:0} .mode-options{display:flex;flex-direction:column;gap:10px} @media (min-width:560px){.mode-options{flex-direction:row}} .mode-option{flex:1;display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid var(--nb-line);border-radius:10px;cursor:pointer;transition:border-color .15s ease,background .15s ease} .mode-option:hover{border-color:#26251E33} .mode-option input{margin-top:3px} .mode-option:has(input:checked){border-color:var(--nb-primary);background:rgba(38,37,30,.05)} .mode-copy{display:flex;flex-direction:column;gap:2px} .mode-name{font-weight:600} .mode-help{color:var(--nb-muted);font-size:.85rem;line-height:1.4} /* Billing alerts + reactivate call-to-action (dashboard, FASE 6) */ .billing-alert{border-radius:10px;padding:14px 16px;margin:0 0 16px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between} .billing-alert.is-locked{color:var(--nb-err);background:var(--nb-err-bg);border:1px solid #fecaca} .billing-alert.is-pastdue{color:var(--nb-warn);background:var(--nb-warn-bg);border:1px solid #fde68a} .billing-alert p{margin:0;font-weight:600} .billing-alert .btn{flex:0 0 auto} .billing-mode-form{margin:14px 0 0} .billing-mode-form .mode-options{margin-bottom:12px} .billing-note{color:var(--nb-muted);font-size:.85rem;margin:6px 0 0} .status-lockedpaused{color:var(--nb-err);background:var(--nb-err-bg)} /* Shared small utilities (customer dashboard, FASE 7b) */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em} .input-mini{padding:8px 10px;font-size:.9rem;width:auto} .pill{display:inline-block;font-size:.75rem;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--nb-bg);color:var(--nb-muted)} .pill-ok{color:var(--nb-ok);background:var(--nb-ok-bg)} .pill-warn{color:var(--nb-warn);background:var(--nb-warn-bg)} .hint{color:var(--nb-muted);font-size:.85rem} /* Multi-project dashboard: project cards (FASE 7b) */ .project-grid{display:grid;grid-template-columns:1fr;gap:22px;margin-bottom:32px} @media (min-width:720px){.project-grid{grid-template-columns:repeat(2,1fr)}} .project-card{position:relative;display:flex;flex-direction:column;gap:18px;padding:26px;transition:transform .18s ease,box-shadow .18s ease; background:radial-gradient(340px 130px at 100% -20%,rgba(38,37,30,.06),transparent 62%),#fff} .project-card:hover{box-shadow:var(--nb-shadow-lg)} .project-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap} .project-title{font-size:1.2rem;margin:0;word-break:break-word;letter-spacing:-.01em} .project-sub{color:var(--nb-muted);font-size:.88rem;margin:4px 0 0} .project-meta{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:0 0 auto} .project-plan{color:var(--nb-muted);font-size:.8rem;text-transform:capitalize} .project-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .project-actions .inline-action{margin:0} /* Project custom-domains panel (FASE 7b) */ .domains-panel{border-top:1px solid var(--nb-line);padding-top:14px} .domains-title{font-size:.95rem;margin:0 0 10px;color:var(--nb-ink)} .domain-list{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:10px} .domain-row{border:1px solid var(--nb-line);border-radius:10px;padding:10px 12px;transition:border-color .15s ease} .domain-row:hover{border-color:#26251E33} .domain-id{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .domain-name{font-weight:600} .domain-status{font-size:.75rem;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--nb-bg);color:var(--nb-muted)} .domain-active{color:var(--nb-ok);background:var(--nb-ok-bg)} .domain-pending,.domain-verifying{color:var(--nb-warn);background:var(--nb-warn-bg)} .domain-failed{color:var(--nb-err);background:var(--nb-err-bg)} .domain-note{margin:6px 0 0} .domain-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} .domain-actions .inline-action{margin:0} .domain-none{margin:0 0 12px} .domain-add{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap;margin-bottom:10px} .domain-add .input-mini{flex:1;min-width:180px} .dns-help{margin-top:4px} .dns-list{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:4px} .dns-list li{font-size:.85rem} /* New-project card (FASE 7b) */ .new-project{margin-bottom:28px} .new-project h2{font-size:1.35rem;margin:0 0 6px} .usage-line{color:var(--nb-muted);font-size:.9rem;margin:0 0 14px} /* Checkout / payment step (payment-mode choice moved out of signup) */ .checkout{max-width:500px;margin:0 auto;position:relative} .checkout::before{content:"";position:absolute;left:50%;top:-46px;transform:translateX(-50%);width:min(560px,100%);height:280px;background:radial-gradient(closest-side,rgba(38,37,30,.14),transparent 72%);z-index:-1;pointer-events:none;filter:blur(2px)} .checkout .auth-head{text-align:center;margin-bottom:24px} .checkout .auth-head .auth-mark{display:inline-flex;margin-bottom:16px} .checkout .card{box-shadow:var(--nb-shadow-card);border-radius:var(--nb-radius-lg);padding:32px} /* Effen vlak: het verloop naar wit maakte de onderkant van het bestelblok lichter dan de bovenkant zonder dat dat iets betekende. */ .checkout-summary{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 18px;border:1px solid var(--nb-line);border-radius:12px;background:var(--nb-blue-50);margin-bottom:22px} .checkout-summary .cs-plan{font-weight:700;font-size:1.1rem} .checkout-summary .cs-tag{color:var(--nb-muted);font-size:.88rem;margin-top:2px} .checkout-summary .cs-price{font-weight:800;font-size:1.3rem;white-space:nowrap} .checkout-summary .cs-price small{font-weight:500;font-size:.85rem;color:var(--nb-muted)} .checkout .mode-options{margin:6px 0 22px} /* Legal documents (terms + privacy): a readable prose column. */ .legal{max-width:760px;margin:0 auto;padding:8px 0 24px} .legal-parent{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;margin-bottom:30px;font-size:.9rem} .legal-parent a{display:inline-flex;line-height:0} .legal-parent-logo{height:32px;width:auto;display:block} .legal-head{margin-bottom:30px;text-align:center} .legal-head .legal-statement{font-size:clamp(1.9rem,4vw,2.6rem);margin:6px auto 10px} .legal-rev{font-size:.85rem;margin-top:10px} .legal-body section{margin-bottom:26px} .legal-body h2{font-size:1.15rem;font-weight:700;letter-spacing:-.01em;margin:0 0 8px} .legal-body p{line-height:1.7;margin:0 0 10px;font-size:.98rem} /* Required agreement checkbox (signup): icon-left, top-aligned to the first line. */ .field-check{margin-bottom:18px} .check{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:.9rem;line-height:1.5} .check input[type="checkbox"]{margin-top:2px;width:16px;height:16px;flex:0 0 auto;accent-color:var(--nb-primary);cursor:pointer} .check a{color:var(--nb-primary);font-weight:600} /* Docs / handleidingen (knowledge base) */ .docs{max-width:none;margin:0 auto} .docs-head{text-align:center;margin-bottom:44px;padding:clamp(26px,4vw,46px) clamp(18px,4vw,40px)} .docs-head > :not(.st-act-mesh):not(.st-act-gloed){position:relative;z-index:2} .docs-head .lede{margin-left:auto;margin-right:auto} .docs-statement{margin:14px 0 12px;font-size:clamp(2rem,4vw,2.8rem)} .doc-article h1{font-family:var(--st-serif);font-weight:600;letter-spacing:-.02em} .docs-group{margin-bottom:40px} .docs-cat{font-size:1.3rem;font-weight:750;letter-spacing:-.01em;margin:0 0 16px} /* Drie vaste kolommen: auto-fill liet bij 3 gidsen een leeg vierde spoor staan (eigenaar: "alles moet in verhouding, niet dat er 1 ontbreekt"). */ .docs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} @media (max-width:980px){.docs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:640px){.docs-grid{grid-template-columns:1fr}} .docs-card{display:flex;flex-direction:column;gap:6px;padding:22px;border-radius:16px;background:var(--nb-card);border:1px solid var(--nb-line);text-decoration:none;max-width:420px;transition:border-color .3s var(--nb-ease),background .3s var(--nb-ease)} .docs-card:hover{border-color:rgba(37,99,235,.55);background:#fff} .docs-card h3{font-size:1.08rem;font-weight:700;margin:0} .docs-card p{font-size:.92rem;line-height:1.55;margin:0} .docs-card-go{font-size:.85rem;font-weight:600;margin-top:6px} .docs-empty{text-align:center;padding:40px} .doc-article{max-width:760px;margin:0 auto} .doc-back{display:inline-block;font-size:.9rem;font-weight:600;margin-bottom:16px;text-decoration:none} .doc-cat-chip{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:4px 11px;border-radius:999px;margin-bottom:14px;color:var(--nb-primary);background:rgba(38,37,30,.08)} .doc-article h1{font-size:clamp(1.9rem,4vw,2.6rem);letter-spacing:-.02em;margin:0 0 20px} .doc-content h2{font-size:1.2rem;font-weight:700;margin:26px 0 8px} .doc-content p{line-height:1.7;margin:0 0 12px;font-size:.98rem} .doc-figure{display:block;width:100%;max-width:640px;height:auto;margin:20px auto 24px} .docs-toolbar{margin-bottom:34px;display:flex;flex-direction:column;gap:14px} .docs-search-wrap{position:relative;max-width:520px;margin:0 auto;width:100%} .docs-search-ic{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:18px;height:18px;pointer-events:none;color:var(--nb-muted)} .docs-search{width:100%;padding:13px 16px 13px 44px;border-radius:12px;font-size:1rem;border:1px solid var(--nb-line);background:#fff;color:var(--nb-ink);transition:border-color .16s var(--nb-ease),box-shadow .16s var(--nb-ease)} .docs-search:focus{border-color:var(--nb-primary);box-shadow:0 0 0 3px rgba(38,37,30,.15);outline:none} .docs-filter{display:flex;flex-wrap:wrap;gap:8px;justify-content:center} .docs-chip{padding:7px 15px;border-radius:999px;font-size:.9rem;font-weight:600;cursor:pointer;border:1px solid var(--nb-line);background:transparent;color:var(--nb-slate);transition:border-color .16s var(--nb-ease),color .16s var(--nb-ease),background .16s var(--nb-ease)} /* :not(.is-active) - de ACTIEVE chip heeft al een vol vlak (--nb-primary-solid). Zonder die uitzondering zette de hover de tekst op precies dezelfde kleur als dat vlak: #26251E op #26251E, ratio 1.00, oftewel onzichtbaar zodra je erover gaat. */ .docs-chip:not(.is-active):hover{border-color:var(--nb-primary);color:var(--nb-primary)} .docs-chip.is-active{background:var(--nb-primary-solid);border-color:var(--nb-primary-solid);color:#fff} .docs-noresults{text-align:center;padding:30px} /* ── Editorial blog: rich cards with keyless generated covers (flat: no shadow; lift + amber hairline + cover-zoom carry the depth) ── */ .blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(316px,1fr));gap:26px} .blog-card{display:flex;flex-direction:column;overflow:hidden;border-radius:20px;background:var(--nb-card);border:1px solid var(--nb-line);text-decoration:none;transition:transform .32s var(--nb-ease),border-color .32s var(--nb-ease)} .blog-card:hover{border-color:rgba(192,133,50,.5)} .blog-card .bc-media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#26251E} .blog-card .bc-cover{position:absolute;inset:0;width:100%;height:100%;display:block;transition:transform .5s var(--nb-ease)} .blog-card:hover .bc-cover{transform:scale(1.05)} .bc-rt{position:absolute;left:14px;bottom:12px;z-index:2;font-size:.72rem;font-weight:700;letter-spacing:.02em;color:#fff;background:rgba(20,19,14,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:5px 11px;border-radius:999px} .blog-card .bc-body{display:flex;flex-direction:column;gap:9px;padding:22px 22px 20px;flex:1} .blog-card h3{font-size:1.24rem;font-weight:750;margin:0;letter-spacing:-.015em;line-height:1.25;color:var(--nb-ink)} .blog-card p{font-size:.94rem;line-height:1.58;margin:0;color:var(--nb-muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .blog-meta{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--nb-primary)} .bc-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:14px;border-top:1px solid var(--nb-line)} .bc-author{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;font-weight:600;color:var(--nb-slate)} /* Effen accentcirkel, zie .avatar in admin/render.php. */ .bc-ava{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--v6-accent,#2563EB);color:#fff;font-size:.66rem;font-weight:800;letter-spacing:.02em} .blog-card .docs-card-go{font-size:.84rem;font-weight:700;color:var(--nb-ink);white-space:nowrap;transition:transform .25s var(--nb-ease)} .blog-card:hover .docs-card-go{transform:translateX(3px)} .blog-card.is-feat{grid-column:1/-1;flex-direction:row;margin-bottom:26px} .blog-card.is-feat .bc-media{flex:0 0 48%;aspect-ratio:auto;min-height:308px} .blog-card.is-feat .bc-body{justify-content:center;padding:38px 40px;gap:12px} .blog-card.is-feat h3{font-size:clamp(1.5rem,2.4vw,2.05rem);line-height:1.16} .blog-card.is-feat p{font-size:1.02rem;-webkit-line-clamp:4} @media (max-width:760px){.blog-card.is-feat{flex-direction:column}.blog-card.is-feat .bc-media{flex:none;min-height:0;aspect-ratio:16/9}.blog-card.is-feat .bc-body{padding:22px 22px 20px}} .blog-hero{position:relative;aspect-ratio:21/8;border-radius:20px;overflow:hidden;margin:14px 0 24px;background:#26251E} .blog-hero .bc-cover{position:absolute;inset:0;width:100%;height:100%;display:block} .blog-artmeta{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:.9rem;color:var(--nb-muted);margin:0 0 16px} .blog-artmeta .bc-author{color:var(--nb-slate)} .blog-dot{opacity:.5} .blog-article{max-width:800px} /* ============================================================================ DARK-PREMIUM THEME - public pages only (login/signup/plans/checkout). Scoped to body[data-portal-theme="dark"] so the logged-in dashboard keeps the light theme above. Mirrors the landing tokens; #26251E stays the blue accent. ============================================================================ */ body[data-portal-theme="dark"]{ /* Dark theme keeps accents visible + on-brand: Cursor's composer amber. */ --nb-primary:#C08532; --nb-primary-hover:#9C6926; --nb-primary-bright:#93B8F5; /* GEMETEN: hier wordt --nb-primary amber, en elke regel die er witte tekst op zet (.btn-solid, .badge-pop, .skip-link, .docs-chip.is-active, .sdot) kwam daardoor op 3.16:1 uit terwijl exact dezelfde regel in het lichte thema 14.6:1 haalde. Het vlak-onder-witte-tekst krijgt daarom een eigen token dat hier meebeweegt. */ --nb-primary-solid:#9C6926; /* Op de bijna-zwarte pagina haalt de huisamber ruim de eis (5.03:1 op de chip, 6.40:1 op #05060B); daar is de donkere inkt juist te donker. */ --nb-amber-on-page:#C08532; --nb-ink-on-page:#F7F8FC; --nb-slate-on-page:#C7C9D2; --nb-muted-on-page:#9AA3B8; --nb-glow:#C08532; --nb-blue-50:rgba(192,133,50,.12); /* GEMETEN 02-09 (contrastsweep in donker, 1272 tekstelementen): de v6-tokens werden hier nooit omgezet, dus kickers, bijschriften, lijnen en gedempte tekst bleven donkere inkt op de donkere pagina (1.01). Tekst- en lijntokens draaien mee; --nb-ink niet (die dient ook als knopvlak). */ --v6-ink:#F5F5F3; --v6-muted:rgba(245,245,243,.74); --v6-stil:rgba(245,245,243,.62); --v6-line:rgba(245,245,243,.12); --v6-line2:rgba(245,245,243,.22); --v6-bg:#0C0A09; --v6-bg2:#141413; --v6-accent-diep:#93B8F5; --v6-accent-zacht:rgba(37,99,235,.22); --nb-muted:#9AA3B8; color:var(--nb-white); background:#05060B; } /* Dark ambient layer on the SAME fixed pseudo-element (buttery scroll, no repaint). */ body[data-portal-theme="dark"]::before{ background: radial-gradient(1000px 560px at 84% -12%,rgba(192,133,50,.10),transparent 62%), radial-gradient(820px 480px at 4% 2%,rgba(192,133,50,.05),transparent 56%), linear-gradient(180deg,#080A12 0%,#05060B 100%); } /* GEMETEN: de algemene a:hover zet --nb-primary-hover, en die is in het donkere thema #9C6926. Op de donkere pagina haalt dat 4.30:1 (en 3.64:1 op de zandkleurige contactstrook): de hover was dus SLECHTER leesbaar dan de rusttoestand, precies andersom dan bedoeld. --nb-amber-on-page is hier #C08532 en haalt 6.40:1 op #05060B. BEPERKT TOT a:not([class]): dat zijn de kale tekstlinks, die per definitie op de paginaondergrond staan. Een eerste, ONGESCOOPTE poging trof ook elke amber knop en chip (een met een klasse) en maakte er 108 nieuwe overtredingen bij, #C08532 op #9C6926 = 1.49:1. Een fix die zichzelf niet meet, verplaatst de fout. */ body[data-portal-theme="dark"] a:not([class]):hover{color:var(--nb-amber-on-page,#C08532)} /* Dezelfde correctie voor de lopende tekst van de juridische en documentatiepagina's: die links DRAGEN een klasse (.legal-mail, .legal-cta-alt) maar staan net zo goed op de paginaondergrond, dus de hover moet daar ook meebewegen. */ body[data-portal-theme="dark"] .legal-body a:hover, body[data-portal-theme="dark"] .legal-identity a:hover, body[data-portal-theme="dark"] .legal-cta-alt:hover, body[data-portal-theme="dark"] .doc-article a:hover{color:#93B8F5} body[data-portal-theme="dark"] h1, body[data-portal-theme="dark"] .auth-head h1, body[data-portal-theme="dark"] .plans-head h1{color:var(--nb-white)} body[data-portal-theme="dark"] .lede, body[data-portal-theme="dark"] .section-note, body[data-portal-theme="dark"] .hint, body[data-portal-theme="dark"] .field .hint, body[data-portal-theme="dark"] .auth-alt, body[data-portal-theme="dark"] .who{color:var(--nb-muted-d)} body[data-portal-theme="dark"] .eyebrow{color:var(--nb-glow);background:rgba(38,37,30,.12)} /* Glow shells (raise alpha to read on dark). */ body[data-portal-theme="dark"] .auth::before, body[data-portal-theme="dark"] .checkout::before, body[data-portal-theme="dark"] .plans-head-glow{background:radial-gradient(closest-side,rgba(38,37,30,.22),transparent 72%)} /* Cards: dark glass, hairline light border, no colored top stripe. */ body[data-portal-theme="dark"] .card{background:var(--nb-card-d);border:1px solid var(--nb-line-dark);box-shadow:0 18px 44px -28px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.04)} body[data-portal-theme="dark"] .auth .card, body[data-portal-theme="dark"] .checkout .card{background:rgba(255,255,255,.045);border:1px solid var(--nb-line-2-dark);box-shadow:0 24px 60px -30px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.05)} /* Inputs (dark fields). */ body[data-portal-theme="dark"] .field label{color:var(--nb-white)} body[data-portal-theme="dark"] .input{border:1px solid var(--nb-line-2-dark);background:rgba(255,255,255,.05);color:var(--nb-white)} body[data-portal-theme="dark"] .input::placeholder{color:var(--nb-muted-2-d)} body[data-portal-theme="dark"] .input:hover{border-color:rgba(255,255,255,.22)} body[data-portal-theme="dark"] .input:focus{border-color:var(--nb-glow);box-shadow:0 0 0 3px rgba(38,37,30,.22)} body[data-portal-theme="dark"] select.input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239AA3B8' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")} /* Captcha (dark colors; slim inline layout is in the base rule). */ body[data-portal-theme="dark"] .captcha-card{border:1px solid var(--nb-line-2-dark);background:rgba(255,255,255,.04)} body[data-portal-theme="dark"] .captcha-q{color:var(--nb-white)} body[data-portal-theme="dark"] .captcha-answer{border:1px solid var(--nb-line-2-dark);background:rgba(255,255,255,.06);color:var(--nb-white)} body[data-portal-theme="dark"] .captcha-answer::placeholder{color:var(--nb-muted-2-d)} body[data-portal-theme="dark"] .captcha-answer:focus{border-color:var(--nb-glow);box-shadow:0 0 0 3px rgba(38,37,30,.22)} body[data-portal-theme="dark"] .captcha-refresh{color:var(--nb-muted-d)} body[data-portal-theme="dark"] .captcha-refresh:hover{color:var(--nb-white);background:rgba(255,255,255,.06);border-color:var(--nb-line-2-dark)} /* Buttons: solid keeps blue; ghost becomes a dark outline. */ body[data-portal-theme="dark"] .btn-ghost{background:transparent;border:1px solid var(--nb-line-2-dark);color:var(--nb-white)} body[data-portal-theme="dark"] .btn-ghost:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.25);color:var(--nb-white)} /* Trust rows. */ body[data-portal-theme="dark"] .auth-trust{color:var(--nb-muted-d)} body[data-portal-theme="dark"] .auth-trust svg{color:#34D399} body[data-portal-theme="dark"] .plans-trust li{color:var(--nb-white)} body[data-portal-theme="dark"] .plans-trust svg{color:var(--nb-primary-bright)} /* Plans cards (dark). */ body[data-portal-theme="dark"] .plan{border:1px solid var(--nb-line-dark);background:var(--nb-card-d);box-shadow:none} body[data-portal-theme="dark"] .plan:hover{border-color:var(--nb-line-2-dark);background:rgba(255,255,255,.05)} body[data-portal-theme="dark"] .plan.is-popular{border-color:rgba(38,37,30,.45);background:linear-gradient(180deg,rgba(38,37,30,.12),rgba(255,255,255,.02))} body[data-portal-theme="dark"] .plan.is-popular:hover{border-color:rgba(38,37,30,.6)} body[data-portal-theme="dark"] .plan .plan-name, body[data-portal-theme="dark"] .plan .price, body[data-portal-theme="dark"] .plan li{color:var(--nb-white)} body[data-portal-theme="dark"] .plan .plan-tag{color:var(--nb-muted-d)} body[data-portal-theme="dark"] .plan .price small{color:var(--nb-muted-d)} body[data-portal-theme="dark"] .plan .plan-price-amt{color:var(--nb-white)} body[data-portal-theme="dark"] .plan .plan-price-btw, body[data-portal-theme="dark"] .plan .plan-price-main small{color:var(--nb-muted-d)} body[data-portal-theme="dark"] .plan li::before{background:rgba(38,37,30,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 6.3 5.1 8.4 9 3.9' stroke='%23C08532' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/11px 11px} /* Alerts / field errors (re-tinted so they never wash out on dark). */ body[data-portal-theme="dark"] .alert-error{color:#FCA5A5;background:rgba(185,28,28,.16);border-color:rgba(185,28,28,.35)} body[data-portal-theme="dark"] .alert-ok{color:#6EE7B7;background:rgba(16,120,60,.16);border-color:rgba(16,120,60,.35)} body[data-portal-theme="dark"] .field-error{color:#FCA5A5} /* Onboarding confirmation + checkout summary/mode + footer. */ body[data-portal-theme="dark"] .onboard-check{background:rgba(38,37,30,.15);color:var(--nb-glow)} body[data-portal-theme="dark"] .onboard-email{color:var(--nb-muted-d)} body[data-portal-theme="dark"] .onboard-email strong{color:var(--nb-white)} body[data-portal-theme="dark"] .checkout-summary{background:rgba(255,255,255,.04);border:1px solid var(--nb-line-dark)} body[data-portal-theme="dark"] .checkout-summary .cs-tag, body[data-portal-theme="dark"] .checkout-summary .cs-price small{color:var(--nb-muted-d)} body[data-portal-theme="dark"] .mode-option{background:rgba(255,255,255,.04);border:1px solid var(--nb-line-dark);color:var(--nb-white)} body[data-portal-theme="dark"] .mode-option:has(input:checked){border-color:var(--nb-glow);background:rgba(38,37,30,.10)} body[data-portal-theme="dark"] .site-footer{border-top:1px solid var(--nb-line-dark);background:transparent;color:var(--nb-muted-d)} body[data-portal-theme="dark"] .legal-parent{background:rgba(255,255,255,.04);border:1px solid var(--nb-line-dark);color:var(--nb-muted-d)} body[data-portal-theme="dark"] .legal-body h2, body[data-portal-theme="dark"] .legal-body strong{color:var(--nb-white)} body[data-portal-theme="dark"] .legal-body p{color:var(--nb-muted-d)} body[data-portal-theme="dark"] .legal-rev{color:var(--nb-muted-2-d)} body[data-portal-theme="dark"] .check{color:var(--nb-muted-d)} body[data-portal-theme="dark"] .check a{color:var(--nb-primary-bright)} body[data-portal-theme="dark"] .docs-cat{color:var(--nb-white)} body[data-portal-theme="dark"] .docs-card{background:var(--nb-card-d);border:1px solid var(--nb-line-dark)} body[data-portal-theme="dark"] .docs-card:hover{border-color:var(--nb-line-2-dark);background:rgba(255,255,255,.05)} body[data-portal-theme="dark"] .docs-card h3{color:var(--nb-white)} body[data-portal-theme="dark"] .docs-card p, body[data-portal-theme="dark"] .docs-empty{color:var(--nb-muted-d)} body[data-portal-theme="dark"] .docs-card-go, body[data-portal-theme="dark"] .doc-back, body[data-portal-theme="dark"] .doc-content a{color:var(--nb-primary-bright)} body[data-portal-theme="dark"] .doc-cat-chip{color:var(--nb-glow);background:rgba(38,37,30,.12)} body[data-portal-theme="dark"] .doc-content h2, body[data-portal-theme="dark"] .doc-content strong{color:var(--nb-white)} body[data-portal-theme="dark"] .doc-content p{color:var(--nb-muted-d)} /* Editorial blog cards, dark theme */ body[data-portal-theme="dark"] .blog-card{background:var(--nb-card-d);border-color:var(--nb-line-dark)} body[data-portal-theme="dark"] .blog-card:hover{border-color:rgba(192,133,50,.55)} body[data-portal-theme="dark"] .blog-card h3{color:var(--nb-white)} body[data-portal-theme="dark"] .blog-card p{color:var(--nb-muted-d)} body[data-portal-theme="dark"] .bc-foot{border-top-color:var(--nb-line-dark)} body[data-portal-theme="dark"] .bc-author{color:var(--nb-muted-d)} body[data-portal-theme="dark"] .blog-card .docs-card-go{color:var(--nb-primary-bright)} body[data-portal-theme="dark"] .blog-artmeta{color:var(--nb-muted-d)} /* Plans comparison + FAQ, dark theme */ body[data-portal-theme="dark"] .plans-sub{color:var(--nb-white)} body[data-portal-theme="dark"] .plans-compare{background:var(--nb-card-d);border-color:var(--nb-line-dark)} body[data-portal-theme="dark"] .plans-compare th,body[data-portal-theme="dark"] .plans-compare td{border-top-color:var(--nb-line-dark)} body[data-portal-theme="dark"] .plans-compare thead th{border-top:0;color:var(--nb-white)} body[data-portal-theme="dark"] .plans-compare tbody th{color:var(--nb-muted-d)} body[data-portal-theme="dark"] .plans-compare tbody tr:hover td,body[data-portal-theme="dark"] .plans-compare tbody tr:hover th{background:rgba(147,184,245,.08)} body[data-portal-theme="dark"] .plans-compare thead th{background:var(--nb-card-d)} body[data-portal-theme="dark"] .pc-naam,body[data-portal-theme="dark"] .pc-prijs{color:var(--nb-white)} body[data-portal-theme="dark"] .pc-tabs{background:rgba(255,255,255,.05);border-color:var(--nb-line-dark)} body[data-portal-theme="dark"] .pc-tab{color:var(--nb-white)} body[data-portal-theme="dark"] .pc-tab.is-aan{background:#161615;color:#93B8F5} body[data-portal-theme="dark"] .plans-compare .pc-text{color:var(--nb-white)} body[data-portal-theme="dark"] .plans-faq-item{background:var(--nb-card-d);border-color:var(--nb-line-dark)} body[data-portal-theme="dark"] .plans-faq-item summary{color:var(--nb-white)} body[data-portal-theme="dark"] .plans-faq-item p{color:var(--nb-muted-d)} body[data-portal-theme="dark"] .docs-search-ic{color:var(--nb-muted-d)} body[data-portal-theme="dark"] .docs-search{border:1px solid var(--nb-line-2-dark);background:rgba(255,255,255,.05);color:var(--nb-white)} body[data-portal-theme="dark"] .docs-search::placeholder{color:var(--nb-muted-2-d)} body[data-portal-theme="dark"] .docs-search:focus{border-color:var(--nb-glow);box-shadow:0 0 0 3px rgba(38,37,30,.22)} body[data-portal-theme="dark"] .docs-chip{border:1px solid var(--nb-line-2-dark);color:var(--nb-muted-d)} /* Idem in donker; bovendien is --nb-white (#F7F8FC) op het actieve vlak #9C6926 net te weinig (4.43:1). De actieve chip houdt daarom zijn eigen zuiver witte tekst (4.71:1). */ body[data-portal-theme="dark"] .docs-chip:not(.is-active):hover{border-color:rgba(255,255,255,.3);color:var(--nb-white)} body[data-portal-theme="dark"] .docs-chip.is-active{background:var(--nb-primary-solid);border-color:var(--nb-primary-solid);color:#fff} body[data-portal-theme="dark"] .docs-noresults{color:var(--nb-muted-d)} body[data-portal-theme="dark"] .blog-card{background:var(--nb-card-d);border:1px solid var(--nb-line-dark)} body[data-portal-theme="dark"] .blog-card:hover{border-color:var(--nb-line-2-dark);background:rgba(255,255,255,.05)} body[data-portal-theme="dark"] .blog-card h3{color:var(--nb-white)} body[data-portal-theme="dark"] .blog-card p{color:var(--nb-muted-d)} body[data-portal-theme="dark"] .blog-meta{color:var(--nb-primary-bright)} .foot-links{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;justify-content:center;margin-top:12px;font-size:.85rem} .foot-links a{color:inherit;opacity:.85;transition:opacity .16s var(--nb-ease),color .16s var(--nb-ease)} .foot-links a:hover{opacity:1;color:var(--nb-primary-bright)} .foot-sep{opacity:.4}.mega-nav{display:flex;align-items:center;gap:8px} .mega-trigger{display:inline-flex;align-items:center;gap:5px;background:none;border:0;cursor:pointer;font:inherit} .mega-caret{transition:transform .2s var(--nb-ease,cubic-bezier(.16,1,.3,1));opacity:.7} .mega-trigger[aria-expanded="true"] .mega-caret{transform:rotate(180deg)} .mega-panel{position:absolute;left:0;right:0;top:100%;z-index:30;background:#ffffff;border-bottom:1px solid var(--nb-line,#26251E1A);opacity:0;visibility:hidden;transform:translateY(-10px);pointer-events:none;transition:opacity .2s var(--nb-ease,ease),transform .2s var(--nb-ease,ease),visibility .2s} .mega-panel.is-open{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto} /* OWNER RULE: the mega dropdown CONTENT is a compact centred column, never smeared across the full viewport (on wide screens the link columns and the promo tile drifted to opposite edges with a sea of dead space between them). The full-bleed white band stays (solid bar rule); only the inner content is constrained. */ /* Selector carries .mega-panel + .wrap so it OUTRANKS the later `.site-header .wrap{max-width:none}` full-width override (the markup is
inside .mega-panel). */ .mega-panel .wrap.mega-inner{display:grid;grid-template-columns:1fr 300px;gap:28px;padding:24px 24px 28px;align-items:start;max-width:1060px;margin:0 auto} .mega-kicker{font-size:12.5px;font-weight:600;letter-spacing:.01em;color:var(--nb-muted,#6B6858);padding-bottom:14px;margin-bottom:18px;border-bottom:1px solid var(--nb-line,#26251E1A)} .mega-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 22px} .mega-panel .mega-grid:has(.mega-col:nth-child(2):last-child){grid-template-columns:repeat(2,1fr)} .mega-col{display:flex;flex-direction:column;gap:2px} .mega-tile{display:flex;gap:12px;align-items:flex-start;padding:11px 12px;border-radius:12px;color:inherit;text-decoration:none;transition:background .16s var(--nb-ease,ease)} .mega-tile:hover{background:var(--nb-blue-50,#F2F1ED)} /* Warm amber icon chips (same treatment as the company value cards) so the menu reads visual and branded instead of flat gray squares. */ .mega-ic{flex:0 0 auto;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:rgba(192,133,50,.12);color:#9C6926;transition:background .18s var(--nb-ease,ease),color .18s var(--nb-ease,ease)} .mega-tile:hover .mega-ic{background:rgba(192,133,50,.2);color:#7A4E18} .mega-ic svg{width:19px;height:19px} .mega-tx{display:flex;flex-direction:column;gap:2px;min-width:0} .mega-t{font-size:14.5px;font-weight:650;color:var(--nb-ink,#0b1220)} .mega-d{font-size:12.5px;line-height:1.4;color:var(--nb-muted,#6B6858)} .mega-foot{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font-size:13.5px;font-weight:600;color:var(--nb-primary,#26251E);text-decoration:none} .mega-foot svg{transition:transform .18s var(--nb-ease,ease)} .mega-foot:hover svg{transform:translateX(3px)} .mega-aside{align-self:stretch} .mega-prev-card{border:1px solid var(--nb-line,#26251E1A);border-radius:16px;padding:16px;background:var(--nb-card,#fff);height:100%;display:flex;flex-direction:column;gap:12px} .mpc-head{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--nb-muted,#6B6858)} .mpc-dot{width:8px;height:8px;border-radius:50%;background:var(--nb-primary,#26251E)} .mpc-bubble{background:var(--nb-blue-50,#F2F1ED);border-radius:12px;padding:11px 13px;font-size:13px;line-height:1.45;color:var(--nb-slate,#3F3E36)} .mpc-gen{display:flex;flex-direction:column;gap:7px} /* Effen: hier stond een verloop tussen twee variabelen met dezelfde waarde. */ .mpc-bar{height:9px;border-radius:6px;background:var(--nb-primary,#26251E)} .mpc-foot{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto} .mpc-chip{font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--nb-blue-50,#F2F1ED);color:var(--nb-primary,#26251E)} .mpc-personas{display:grid;grid-template-columns:1fr 1fr;gap:8px} .mpc-persona{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--nb-slate,#3F3E36);border:1px solid var(--nb-line,#26251E1A);border-radius:10px;padding:8px 10px} .mpc-persona svg{width:15px;height:15px;color:var(--nb-primary,#26251E)} .mpc-stat{margin-top:auto;font-size:13px;color:var(--nb-muted,#6B6858)} .mpc-stat b{font-size:22px;color:var(--nb-ink,#0b1220);margin-right:4px} .mpc-code .mpc-pre{margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;line-height:1.55;color:var(--nb-slate,#3F3E36);white-space:pre;overflow:auto} .mpc-pre .c-k{color:var(--nb-primary,#26251E)}.mpc-pre .c-f{color:#0d9488}.mpc-pre .c-s{color:#b45309} .mm-acc{border-bottom:1px solid var(--nb-line,#26251E1A)} .mm-acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:12px 14px;font-weight:600;font-size:15px} .mm-acc summary::-webkit-details-marker{display:none} .mm-acc summary svg{transition:transform .2s var(--nb-ease,ease)} .mm-acc[open] summary svg{transform:rotate(180deg)} .mm-acc-body{padding:2px 0 8px} .mm-acc-body .mega-tile{padding:9px 14px} @media (max-width:980px){.mega-nav{display:none}.mega-panel{display:none}} body[data-portal-theme="dark"] .mega-trigger{color:var(--nb-muted-d,#9AA3B8);font-size:14.5px;font-weight:500;transition:color .18s var(--nb-ease,ease)} body[data-portal-theme="dark"] .mega-trigger:hover,body[data-portal-theme="dark"] .mega-trigger[aria-expanded="true"]{color:var(--nb-white,#F7F8FC)} body[data-portal-theme="dark"] .mega-panel{background:#0A0C15;border-bottom:1px solid var(--nb-line-dark,rgba(255,255,255,.08));box-shadow:0 40px 80px -40px rgba(0,0,0,.8)} body[data-portal-theme="dark"] .mega-kicker{color:var(--nb-muted-d,#9AA3B8);border-bottom-color:var(--nb-line-dark,rgba(255,255,255,.08))} body[data-portal-theme="dark"] .mega-tile:hover{background:var(--nb-card-d,rgba(255,255,255,.035))} body[data-portal-theme="dark"] .mega-ic{background:rgba(192,133,50,.16);color:#D9A55A} body[data-portal-theme="dark"] .mega-tile:hover .mega-ic{background:rgba(192,133,50,.24);color:#E9C77E} body[data-portal-theme="dark"] .mega-t{color:var(--nb-white,#F7F8FC)} body[data-portal-theme="dark"] .mega-d{color:var(--nb-muted-d,#9AA3B8)} body[data-portal-theme="dark"] .mega-foot{color:var(--nb-glow,#26251E)} body[data-portal-theme="dark"] .mega-prev-card{background:var(--nb-card-d,rgba(255,255,255,.035));border-color:var(--nb-line-dark,rgba(255,255,255,.08))} body[data-portal-theme="dark"] .mpc-bubble{background:rgba(38,37,30,.1);color:var(--nb-white,#F7F8FC)} body[data-portal-theme="dark"] .mpc-chip{background:rgba(38,37,30,.14);color:var(--nb-glow,#26251E)} body[data-portal-theme="dark"] .mpc-persona{border-color:var(--nb-line-dark,rgba(255,255,255,.08));color:var(--nb-white,#F7F8FC)} body[data-portal-theme="dark"] .mpc-persona svg{color:var(--nb-glow,#26251E)} body[data-portal-theme="dark"] .mpc-stat{color:var(--nb-muted-d,#9AA3B8)} body[data-portal-theme="dark"] .mpc-stat b{color:var(--nb-white,#F7F8FC)} body[data-portal-theme="dark"] .mpc-code .mpc-pre{color:var(--nb-muted-d,#9AA3B8)} body[data-portal-theme="dark"] .mm-acc{border-bottom-color:var(--nb-line-dark,rgba(255,255,255,.08))}/* ============ SHARED CTA (dark + warm particles), nb-cta-* ============ */ /* Full-width band that matches the landing/footer container (~1280). The portal main .wrap caps content at 1120px, and on the info pages (.sol) the CTA sits in a flex column where the old `margin:.. auto` let it COLLAPSE to its text width (a narrow centered box). We break the band out of the wrap and center it on the VIEWPORT at up to 1280px (capped to the viewport on small screens), exactly like the landing CTA: margin-left:50% puts its left edge at the parent centre, translateX(-50%) pulls it back by half its own width, so it is viewport-centred regardless of the wrap width. */ /* Eigenaar 02-09-2026: het slotblok is op ELKE publieke pagina de homepage-band (.v6-slot): de hele breedte, geen kaart, geen hoeken, en het ligt PRECIES op de footer. Breedte via 100vw plus de bestaande centreer-truc (50% + translateX); html{overflow-x:clip} vangt de schuifbalkbreedte. De ruimte eronder (main 80px + wikkelaars) gaat via :has() naar 0. */ .nb-cta{position:relative;overflow:hidden;text-align:center;border-radius:0; width:100vw; margin:clamp(48px,7vw,96px) 0 0;margin-left:50%;transform:translateX(-50%); background:#0C0A09; padding:clamp(64px,9vw,120px) clamp(18px,4vw,40px);border:0} main.wrap.main:has(.nb-cta){padding-bottom:0} main.wrap.main :has(.nb-cta){padding-bottom:0;margin-bottom:0} main.wrap.main .nb-cta{margin-bottom:0} /* GEMETEN in een venster van 6000px hoog: main{flex:1 0 auto} rekte uit en liet 2945px licht vlak tussen band en footer. Met een slotblok rekt niet main maar de FOOTER (zijn vlak loopt door tot onder), zodat de band ook op een lange, korte pagina precies op de footer blijft liggen. */ body:has(main.wrap.main .nb-cta) main.wrap.main{flex:0 0 auto} body:has(main.wrap.main .nb-cta) > footer{flex:1 0 auto} .nb-cta-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.7;pointer-events:none} .nb-cta-glow{position:absolute;inset:0;z-index:1;pointer-events:none; background:radial-gradient(ellipse at 50% 120%,rgba(37,99,235,0.16),transparent 62%)} .nb-cta-inner{position:relative;z-index:3} .nb-cta h2{color:#F5F5F3;font-family:'Source Serif 4',Georgia,serif;font-weight:400;font-size:clamp(2.1rem,4.6vw,3.6rem);letter-spacing:-.01em;line-height:1.12;max-width:22ch;margin:0 auto} .nb-cta p{color:rgba(247,247,244,0.82);font-size:clamp(1rem,1.7vw,1.15rem);margin:22px auto 0;max-width:48ch;line-height:1.55} .nb-cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:38px} .nb-cta-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:16px 32px;font-size:16px;font-weight:600;border-radius:999px;text-decoration:none; transition:background .18s var(--nb-ease,cubic-bezier(.16,1,.3,1)),border-color .18s var(--nb-ease,cubic-bezier(.16,1,.3,1)),transform .18s var(--nb-ease,cubic-bezier(.16,1,.3,1))} .nb-cta .nb-cta-btn-primary{background:#F5F5F3;color:#0C0A09;border:1px solid #F5F5F3} .nb-cta .nb-cta-btn-primary:hover{background:#fff;border-color:#fff;color:#0C0A09} .nb-cta .nb-cta-btn-ghost{color:#F7F7F4;background:transparent;border:1px solid rgba(255,255,255,0.32)} .nb-cta .nb-cta-btn-ghost:hover{border-color:rgba(255,255,255,0.6);background:rgba(255,255,255,0.06);color:#fff} /* Safety net: ANY generic button dropped inside the warm-dark CTA keeps light, readable text on hover — the generic .btn-ghost:hover darkens text (correct on light pages, wrong on this dark band). Owner: "altijd juiste kleuren bij hover". */ .nb-cta .btn-ghost,.nb-cta .btn-ghost:hover{color:#F7F7F4;border-color:rgba(255,255,255,0.4);background:transparent} .nb-cta .btn-ghost:hover{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.65)} .nb-cta .btn-primary,.nb-cta .btn-primary:hover,.nb-cta .btn-solid,.nb-cta .btn-solid:hover{color:#fff} @media (max-width:640px){.nb-cta{border-radius:0}} /* ══════════════════════════════════════════════════════════════════════════════════════ DEZE REGELS STAAN HIER EN NIET IN portal_css(), EN DAT IS DE HELE LES VAN VANDAAG. Ik heb de powered-by-regel eerst in portal_css() gezet. Die stylesheet wordt op de LANDINGSPAGINA helemaal niet uitgestuurd -- die pagina heeft een eigen. Gevolg: de link stond op `display:block` in plaats van flex, het logo 3px scheef, en het blok niet rechts. Ik heb die fout vandaag VIER keer gemaakt, in vier verschillende bestanden. De regel die eruit volgt: opmaak van een onderdeel hoort bij dat onderdeel. Deze functie reist mee met portal_footer_html(); waar de voettekst verschijnt, verschijnt zijn CSS. Bewaker: PoweredByStaysInFooterTest controleert nu de UITGESTUURDE HTML, niet de bron -- want alleen dat meet of een regel de bezoeker bereikt. ══════════════════════════════════════════════════════════════════════════════════════ */ /* Footer: legal links + NerrieServer parent line (both themes). */ /* De powered-by-regel: EEN rustige regel naast de copyright, niet een badge die overal opduikt. Het logo krijgt vaste maten mee zodat de voettekst niet verspringt terwijl het laadt (dat is de reden voor width/height op de img, niet de opmaak). */ /* UITLIJNING, twee fouten die de eigenaar zag en die ik gemeten heb: 1. Het blok stond NIET rechts. De is een rasteritem en vulde de hele derde kolom (534px), terwijl zijn inhoud links in die kolom begon: gemeten 634px vanaf links met 305px lucht rechts ernaast. `justify-self:end` laat hem krimpen tot zijn inhoud en tegen de rechterrand staan, gelijk met de kolommen erboven. 2. Het logo stond 3px HOGER dan de tekst (midden op 39 tegen 42). Dat komt van de regelhoogte: de tekstregel is hoger dan zijn letters, dus `align-items:center` centreert twee verschillend hoge dozen. Met `line-height:1` op de link is de tekstdoos even hoog als de letters en vallen beide middens samen. */ .pf-powered{display:inline-flex;align-items:center;gap:7px;text-decoration:none; justify-self:end;line-height:1; font-size:12.5px;color:var(--nb-muted,#6E6A5E);white-space:nowrap;transition:color .16s ease} .pf-powered:hover{color:var(--nb-ink,#26251E)} body[data-portal-theme="dark"] .pf-foot-brand .brand,body[data-portal-theme="dark"] .pf-foot-brand .nb-wordmark{color:#F5F5F3} body[data-portal-theme="dark"] .pf-powered{color:rgba(245,245,243,.7)} body[data-portal-theme="dark"] .pf-powered:hover{color:#F5F5F3} .pf-powered img{display:block;height:16px;width:auto;opacity:.85} .pf-powered:hover img{opacity:1} .site-footer{flex:0 0 auto;border-top:1px solid var(--nb-line,#26251E1A);background:rgba(255,255,255,.7);color:var(--nb-muted,#6B6858);font-size:.9rem;padding:52px 0 28px} .site-footer .wrap{width:100%;max-width:var(--nb-wrap,1280px);margin:0 auto;padding-left:clamp(20px,4vw,60px);padding-right:clamp(20px,4vw,60px)} .pf-foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:34px;text-align:left} .pf-foot-brand .brand{display:inline-flex;margin-bottom:14px} .pf-foot-brand p{max-width:34ch;color:var(--nb-muted,#6B6858);line-height:1.55;font-size:.9rem} /* h3 en niet h5: de voet is een GEDEELD blok onder paginas waarvan de laatste kop een h2 is; h5 was een niveausprong op elke pagina (zelfde les als de klantsites). */ .pf-foot-col h3{font-size:12px;text-transform:uppercase;letter-spacing:.11em;color:var(--nb-ink,#26251E);opacity:.75;margin:0 0 14px;font-weight:700} .pf-foot-col a{display:block;color:var(--nb-muted,#6B6858);font-size:.92rem;margin-bottom:10px;text-decoration:none;transition:color .16s ease} .pf-foot-col a:hover{color:var(--nb-amber-on-page,#8A5A1A)} .pf-foot-bottom{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;padding-top:22px;border-top:1px solid var(--nb-line,#26251E1A)} .pf-foot-bottom p{margin:0;justify-self:start} .pf-foot-bottom .theme-switch{justify-self:center} @media(max-width:760px){.pf-foot-bottom{grid-template-columns:1fr;justify-items:center;text-align:center;gap:18px;padding-top:26px}.pf-foot-bottom p,.pf-foot-bottom .theme-switch,.pf-foot-bottom .pf-powered{justify-self:center}.pf-foot-bottom .theme-switch{order:-1}.pf-foot-bottom p{order:0}.pf-foot-bottom .pf-powered{order:1}} .pf-foot-right{display:inline-flex;align-items:center;gap:18px;flex-wrap:wrap} /* Shared light/dark toggle (same control on every public page). */ .theme-switch{display:inline-flex;gap:3px;padding:3px;border:1px solid var(--nb-line,#26251E1A);border-radius:999px;background:rgba(120,120,130,.08)} .theme-btn{display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:999px;background:none;color:var(--nb-muted,#6B6858);cursor:pointer;transition:background .18s ease,color .18s ease} .theme-btn:hover{color:var(--nb-ink,#26251E)} .theme-btn.is-active{background:#fff;color:var(--nb-ink,#26251E)} body[data-portal-theme="dark"] .theme-btn:hover{color:var(--nb-white,#F7F8FC)} body[data-portal-theme="dark"] .theme-btn.is-active{background:rgba(255,255,255,.10);color:var(--nb-white,#F7F8FC)} @media(max-width:860px){.pf-foot-top{grid-template-columns:1fr 1fr;gap:28px}.pf-foot-brand{grid-column:1/-1}} @media(max-width:520px){.pf-foot-top{grid-template-columns:1fr}} /* GEMETEN: deze functie is het ENIGE voetblad dat de landingspagina meestuurt; de donkere varianten stonden alleen in portal_css(), dat / niet emitteert. Gevolg: op een donkere landing hield .site-footer zijn background:rgba(255,255,255,.7) (dat compositeert tot #B4B4B6) terwijl de links de donkere inkt #6B6858 hielden = 2.71:1. --nb-muted is daar niet eens gedefinieerd, vandaar dat de letterlijke fallback won. */ body[data-portal-theme="dark"] .site-footer{background:transparent;color:var(--nb-muted-d,#9AA3B8)} body[data-portal-theme="dark"] .pf-foot-brand p, body[data-portal-theme="dark"] .pf-foot-col a, body[data-portal-theme="dark"] .pf-foot-bottom p{color:var(--nb-muted-d,#9AA3B8)} body[data-portal-theme="dark"] .pf-foot-col h3{color:var(--nb-white,#F7F8FC);opacity:.85}.nbi{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} :root{--nav-h:77px} header.nav,.mobile-menu,.mobile-scrim{ --pn-ease:cubic-bezier(.16,1,.3,1); --pn-panel:#FFFFFF;--pn-ink2:#F2F1ED; --pn-line:#26251E1A;--pn-line2:#26251E33; --pn-text:#26251E;--pn-muted:#26251EB3;--pn-muted2:#26251EA8; --pn-amber:#8A5A1A; --pn-cta:#26251E;--pn-cta-hover:#3A392F;--pn-cta-text:#FFFFFF; --pn-ghost-bg:rgba(38,37,30,.05);--pn-ghost-line:rgba(38,37,30,.4); --pn-navbg:#FFFFFF; } body[data-portal-theme="dark"] header.nav, body[data-portal-theme="dark"] .mobile-menu, body[data-portal-theme="dark"] .mobile-scrim{ --pn-panel:#101216;--pn-ink2:#1A1D23; --pn-line:#F7F7F41A;--pn-line2:#F7F7F433; --pn-text:#F7F7F4;--pn-muted:#F7F7F4B3;--pn-muted2:#F7F7F4A8; --pn-amber:#E0A85C; --pn-cta:#F7F7F4;--pn-cta-hover:#FFFFFF;--pn-cta-text:#26251E; --pn-ghost-bg:rgba(247,247,244,.07);--pn-ghost-line:rgba(247,247,244,.4); --pn-navbg:#101216; } /* EIGENAARSBESLUIT 01-09-2026: ankersprongen horen te easen ("overal met anchors links etc moet wel met ease effect"). Dit nuanceert de wet van 31-08: scroll-behavior geldt ALLEEN voor anker- en programmatische sprongen, nooit voor het muiswiel; scroll-hijack blijft verboden. Metingen gebruiken behavior:'instant' (vaste meetregel). */ @media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} } header.nav{ position:fixed;top:0;left:0;right:0; z-index:100; min-height:var(--nav-h); display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center; padding:16px clamp(18px,4vw,54px); color:var(--pn-text); transition:background .4s var(--pn-ease),border-color .4s var(--pn-ease), padding .3s var(--pn-ease),transform .28s var(--pn-ease); border-bottom:1px solid transparent; } header.nav.scrolled{ background:var(--pn-navbg); border-bottom-color:var(--pn-line); padding-top:10px;padding-bottom:10px; min-height:64px; } header.nav.nav-hidden{transform:translateY(-100%)} @media (prefers-reduced-motion:reduce){ header.nav{transition:background .4s var(--pn-ease),border-color .4s var(--pn-ease)} header.nav.nav-hidden{transform:none} } header.nav.mega-active{ background:var(--pn-panel); border-bottom:1px solid var(--pn-line); } header.nav .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;letter-spacing:-0.03em;justify-self:start;color:var(--pn-text);text-decoration:none} header.nav .nav-link{padding:8px 12px;border-radius:10px;font-weight:500;font-size:16px;color:var(--pn-text);text-decoration:none;transition:color .3s var(--pn-ease),background .18s var(--pn-ease)} header.nav .nav-link:hover{background:var(--pn-ghost-bg)} header.nav .nav-link.is-active{background:var(--pn-ghost-bg)} header.nav .nav-mid{display:flex;align-items:center;gap:4px;justify-self:center} header.nav .nav-right{display:flex;align-items:center;gap:14px;justify-self:end} header.nav .nav-right .mk-langswitch, .mobile-menu .mm-lang .mk-langswitch{display:inline-flex;align-items:center;gap:2px;padding:2px;background:var(--pn-ink2);border:1px solid var(--pn-line2);border-radius:9999px} header.nav .nav-right .mk-langswitch a, .mobile-menu .mm-lang .mk-langswitch a{display:inline-flex;align-items:center;gap:4px;padding:4px 9px;border-radius:9999px;font-size:12.5px;font-weight:600;line-height:1;color:var(--pn-muted);text-decoration:none;transition:background .15s var(--pn-ease),color .15s var(--pn-ease)} header.nav .nav-right .mk-langswitch a:hover, .mobile-menu .mm-lang .mk-langswitch a:hover{color:var(--pn-text)} header.nav .nav-right .mk-langswitch a.is-active, .mobile-menu .mm-lang .mk-langswitch a.is-active{background:var(--pn-panel);color:var(--pn-text);box-shadow:0 1px 2px var(--pn-line)} header.nav .mk-langswitch-globe,.mobile-menu .mk-langswitch-globe{width:12px;height:12px;flex-shrink:0} header.nav .btn,.mobile-menu .btn{ font-family:inherit;font-size:14.5px;font-weight:600;cursor:pointer;border:none; border-radius:999px;padding:11px 22px;transition:transform .25s var(--pn-ease),box-shadow .3s var(--pn-ease),background .3s var(--pn-ease); position:relative;letter-spacing:-0.01em;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none; } header.nav .btn-primary,.mobile-menu .btn-primary{background:var(--pn-cta);color:var(--pn-cta-text)} header.nav .btn-primary:hover,.mobile-menu .btn-primary:hover{background:var(--pn-cta-hover)} header.nav .btn-primary:active,.mobile-menu .btn-primary:active{transform:scale(.97)} header.nav .btn-ghost,.mobile-menu .btn-ghost{background:transparent;color:var(--pn-text);border:1px solid var(--pn-line2)} header.nav .btn-ghost:hover,.mobile-menu .btn-ghost:hover{background:var(--pn-ghost-bg);border-color:var(--pn-ghost-line)} header.nav .btn .arr,.mobile-menu .btn .arr{transition:transform .25s var(--pn-ease)} header.nav .btn:hover .arr,.mobile-menu .btn:hover .arr{transform:translateX(3px)} header.nav .nav-right .btn-primary:hover{transform:none} header.nav .nav-right .btn-primary:active{transform:none} header.nav .menu-toggle{ display:none;background:var(--pn-ink2);border:1px solid var(--pn-line2);border-radius:11px; color:var(--pn-text);cursor:pointer;padding:8px;line-height:0; transition:background .3s var(--pn-ease),border-color .3s var(--pn-ease); } header.nav .menu-toggle:hover{background:var(--pn-ghost-bg);border-color:var(--pn-muted2)} header.nav .menu-toggle .ic-close{display:none} header.nav .menu-toggle[aria-expanded="true"] .ic-open{display:none} header.nav .menu-toggle[aria-expanded="true"] .ic-close{display:block} .mobile-menu{ position:fixed;top:0;right:0;z-index:110; width:min(84vw,340px);height:100dvh; background:var(--pn-panel); backdrop-filter:blur(22px) saturate(140%); -webkit-backdrop-filter:blur(22px) saturate(140%); border-left:1px solid var(--pn-line2); box-shadow:-30px 0 80px -30px rgba(0,0,0,0.7); padding:20px 22px 32px; display:flex;flex-direction:column;gap:8px; transform:translateX(102%);visibility:hidden; transition:transform .42s var(--pn-ease),visibility 0s linear .42s; overflow-y:auto; } .mobile-menu[data-open="true"]{transform:translateX(0);visibility:visible;transition:transform .42s var(--pn-ease),visibility 0s} .mobile-menu .mm-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px} .mobile-menu .mm-brand{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:16px;color:var(--pn-text);letter-spacing:-0.02em;text-decoration:none} .mobile-menu .mm-close{ flex:none;width:40px;height:40px;display:grid;place-items:center; background:var(--pn-ink2);border:1px solid var(--pn-line2);border-radius:11px; color:var(--pn-text);cursor:pointer;line-height:0; transition:background .25s var(--pn-ease),border-color .25s var(--pn-ease),transform .2s var(--pn-ease); } .mobile-menu .mm-close:hover{background:var(--pn-ink2);border-color:var(--pn-muted2)} .mobile-menu .mm-close:active{transform:scale(.94)} .mobile-menu .mm-links{display:flex;flex-direction:column;gap:2px} .mobile-menu .mm-links .nav-link{display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:600;color:var(--pn-text);text-decoration:none;padding:12px 14px;border-radius:0;border-bottom:1px solid var(--pn-line);transition:color .25s var(--pn-ease)} .mobile-menu .mm-links .nav-link:hover{color:var(--pn-amber)} .mobile-menu .mm-actions{display:flex;flex-direction:column;gap:10px;margin:16px 0 6px;padding-top:18px} .mobile-menu .btn-block{width:100%;justify-content:center;padding:13px 22px} .mobile-menu .mm-lang{margin-top:14px;padding-top:16px;border-top:1px solid var(--pn-line);display:flex;justify-content:flex-start} .mobile-scrim{ position:fixed;inset:0;z-index:105;background:rgba(5,6,11,0.6); opacity:0;transition:opacity .42s var(--pn-ease); } .mobile-scrim[data-open="true"]{opacity:1} body.menu-open{overflow:hidden} @media(max-width:960px){ header.nav{grid-template-columns:1fr auto} header.nav .nav-right .desk-only,header.nav .nav-right .mk-langswitch{display:none} header.nav .menu-toggle{display:inline-flex} } /* Auth-pagina's (minimale kop): balk zweeft doorzichtig boven het rustige formulier en schuift nooit weg. */ body[data-auth-minimal] header.nav{position:absolute;background:transparent;border-bottom-color:transparent} body[data-auth-minimal] header.nav.scrolled{background:transparent;border-bottom-color:transparent;padding-top:16px;padding-bottom:16px} body[data-auth-minimal] header.nav.nav-hidden{transform:none} /* Op smal scherm verbergt de 960-regel de taalwissel (die verhuist naar het mobiele menu), maar de minimale auth-kop HEEFT geen mobiel menu: daar blijft de pil staan. */ body[data-auth-minimal] header.nav .nav-right .mk-langswitch{display:inline-flex} /* De kop is fixed en staat dus niet meer in de flow: schilpagina's schuiven hun inhoud eronder vandaan. De landing regelt dit zelf (eigen hero-padding). */ main.main{padding-top:calc(var(--nav-h) + 26px)} /* De meekijkbalk (impersonatie) staat als eerste blok in de flow en zou anders ONDER de vaste kop verdwijnen. */ .imp-bar{margin-top:var(--nav-h)}@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:200 900;font-display:swap;src:url('/assets/source-serif-4-var.woff2') format('woff2')}@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:200 900;font-display:swap;src:url('/assets/source-serif-4-italic-var.woff2') format('woff2')} :root{ --st-serif:'Source Serif 4',Georgia,'Times New Roman',serif; --st-ink:#26251E;--st-muted:#26251EB3; --st-amber:#C08532;--st-amber-ink:#8A5A1A;--st-amber-solid:#9C6926; --st-terra:#B45309;--st-olijf:#5B7A5E;--st-leisteen:#5C6B8A; --st-room:#FBF9F4;--st-zand:#F3EFE6; } .st-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.74rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--st-amber-ink);border:1px solid rgba(192,133,50,.4);border-radius:999px;padding:7px 16px;background:rgba(192,133,50,.07)} .st-statement{font-family:var(--st-serif);font-weight:600;letter-spacing:-.015em;line-height:1.06;font-size:clamp(2.2rem,5.2vw,4rem);color:var(--st-ink);margin:0} .st-statement em,.st-statement .st-accent{font-style:italic;color:var(--st-amber-ink)} .st-sub{font-size:clamp(1rem,1.5vw,1.15rem);line-height:1.65;color:var(--st-muted)} .st-act{position:relative;overflow:clip;border-radius:clamp(20px,3vw,32px)} .st-act-mesh{position:absolute;inset:0;pointer-events:none;background: radial-gradient(50% 44% at 16% 12%,rgba(192,133,50,.1),transparent 62%), radial-gradient(44% 40% at 86% 20%,rgba(226,210,180,.35),transparent 60%), linear-gradient(180deg,var(--st-room) 0%,transparent 85%)} .st-act-gloed{position:absolute;top:-24%;left:50%;transform:translateX(-50%);width:min(960px,115vw);height:520px;pointer-events:none;background:radial-gradient(ellipse at 50% 40%,rgba(192,133,50,.1),transparent 62%)} .st-tegel{position:absolute;display:grid;place-items:center;width:60px;height:60px;border-radius:17px;border:1px solid rgba(38,37,30,.1);animation:st-zweef 7.5s ease-in-out infinite alternate} .st-tegel svg{width:26px;height:26px} .st-tegel-amber{background:rgba(192,133,50,.14);color:#8A5A1A;border-color:rgba(192,133,50,.3)} .st-tegel-terra{background:rgba(180,83,9,.12);color:#9A4807;border-color:rgba(180,83,9,.28)} .st-tegel-olijf{background:rgba(91,122,94,.14);color:#4C6850;border-color:rgba(91,122,94,.3)} .st-tegel-leisteen{background:rgba(92,107,138,.14);color:#4C5975;border-color:rgba(92,107,138,.3)} .st-tegel-room{background:#FFFFFF;color:var(--st-amber-ink);border:1px solid rgba(192,133,50,.35)} @keyframes st-zweef{from{transform:translateY(-8px) rotate(-1.2deg)}to{transform:translateY(10px) rotate(1.2deg)}} .st-shotkader{border:1px solid rgba(38,37,30,.12);border-radius:20px;background:#fff;overflow:hidden} .st-bijschrift{margin:12px 4px 0;font-size:.95rem;line-height:1.55;color:var(--st-muted)} .st-marquee{overflow:clip;contain:paint;border-block:1px solid rgba(38,37,30,.1);background:var(--st-zand);padding:14px 0} .st-marquee-rij{display:inline-flex;align-items:center;gap:26px;white-space:nowrap;animation:st-loop 38s linear infinite;will-change:transform} .st-marquee-rij span{font-size:.88rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--st-muted)} .st-marquee-rij i{color:var(--st-amber);font-style:normal} @keyframes st-loop{to{transform:translate3d(-50%,0,0)}} @media (prefers-reduced-motion:reduce){ .st-tegel{animation:none} .st-marquee-rij{animation:none} } body[data-portal-theme="dark"]{--st-ink:#F7F7F4;--st-muted:#F7F7F4B3;--st-amber-ink:#E0A85C;--st-room:#181713;--st-zand:#1B1A16} body[data-portal-theme="dark"] .st-act-mesh{background: radial-gradient(50% 44% at 16% 12%,rgba(192,133,50,.13),transparent 62%), linear-gradient(180deg,rgba(255,255,255,.03) 0%,transparent 85%)} body[data-portal-theme="dark"] .st-shotkader{background:#1D1C18;border-color:rgba(247,247,244,.12)} body[data-portal-theme="dark"] .st-marquee{border-color:rgba(247,247,244,.1)} body[data-portal-theme="dark"] .st-tegel-room{background:#26251E;color:var(--st-amber-ink)}:root{ --v6-ink:#0C0A09;--v6-muted:#0C0A09A6;--v6-stil:#0C0A0999; --v6-accent:#2563EB;--v6-accent-diep:#1D4ED8;--v6-accent-zacht:#DBEAFE; --v6-bg:#FFFFFF;--v6-bg2:#F7F4EE;--v6-line:#0C0A0912;--v6-line2:#0C0A0921; --v6-ease:cubic-bezier(.22,.61,.36,1); } .v6p{font-family:'Inter',system-ui,sans-serif;color:var(--v6-ink);display:flex;flex-direction:column;gap:clamp(48px,7vw,96px);padding-bottom:8px} .v6p a{color:inherit} /* De pagina-held: licht, serif-statement met cursief blauw accent. */ .v6-held{max-width:820px;margin:0 auto;text-align:center;padding:clamp(10px,2vw,24px) clamp(18px,4vw,40px) 0} .v6-kicker{display:inline-block;font-size:.76rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--v6-stil)} .v6-h1{font-family:'Source Serif 4',Georgia,serif;font-weight:400;letter-spacing:-.015em;line-height:1.1;font-size:clamp(2.2rem,5vw,3.6rem);margin:14px 0 0;color:var(--v6-ink)} .v6-h1 em,.v6-kop h2 em{font-style:italic;color:var(--v6-accent-diep)} .v6-lede{margin:16px auto 0;max-width:58ch;font-size:clamp(1.02rem,1.5vw,1.15rem);color:var(--v6-muted)} .v6-kop{max-width:780px;margin:0 auto clamp(28px,4vw,44px);text-align:center} .v6-kop h2{font-family:'Source Serif 4',Georgia,serif;font-weight:400;letter-spacing:-.01em;line-height:1.12;font-size:clamp(1.8rem,3.8vw,2.8rem);color:var(--v6-ink)} .v6-kop p{margin:12px auto 0;font-size:1.02rem;color:var(--v6-muted);max-width:58ch} .v6-sec{padding:0 clamp(18px,4vw,40px)} .v6-vlak{background:var(--v6-bg2);border-radius:clamp(20px,3vw,32px);margin:0 clamp(12px,2vw,28px);padding:clamp(44px,6vw,80px) clamp(18px,4vw,40px)} /* Knoppen: pills. Zwart primair, blauw voor de aanrader, rand als tweede. */ .v6-k{display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:600;border-radius:999px;padding:14px 28px;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background .2s var(--v6-ease),border-color .2s var(--v6-ease),color .2s var(--v6-ease)} /* Eigenaar 02-09-2026 ("pff weer buttons die niet leesbaar zijn"): .v6p a{color:inherit} (0,1,1) won van .v6-k-vol (0,1,0); GEMETEN op /functies: zwart op zwart, contrast 1.00. Knoppen dragen daarom het blok als tweeling-selector. */ .v6-k-vol,.v6p .v6-k-vol{background:#0C0A09;color:#fff} .v6-k-vol:hover,.v6p .v6-k-vol:hover{background:#2A2724;color:#fff} .v6-k-rand,.v6p .v6-k-rand{background:transparent;color:var(--v6-ink);border-color:var(--v6-line2)} .v6-k-rand:hover,.v6p .v6-k-rand:hover{border-color:var(--v6-ink);color:var(--v6-ink)} .v6-k-blauw{background:var(--v6-accent);color:#fff} .v6-k-blauw:hover{background:var(--v6-accent-diep);color:#fff} .v6-knoppen{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:26px} /* Kaarten: wit, hairline, icoon-chip in zacht blauw. */ .v6-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:1120px;margin:0 auto} .v6-raster-4{grid-template-columns:repeat(4,minmax(0,1fr))} .v6-kaart{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--v6-line);border-radius:18px;padding:22px 20px;text-decoration:none;transition:border-color .2s ease} a.v6-kaart:hover{border-color:var(--v6-accent)} .v6-kaart-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--v6-accent-zacht);color:var(--v6-accent-diep);font-size:1rem} .v6-kaart b{font-size:1rem;font-weight:700;letter-spacing:-.01em;color:var(--v6-ink);margin-top:4px} .v6-kaart > span{font-size:.9rem;color:var(--v6-muted);line-height:1.55} /* Checks en pills */ .v6-checks{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 26px;max-width:820px;margin:0 auto;padding:0} .v6-checks li{display:flex;align-items:flex-start;gap:10px;font-size:.96rem;color:var(--v6-ink)} .v6-checks i{color:var(--v6-accent-diep);margin-top:4px;font-size:.8rem;flex:none} /* Vragen (details) */ .v6-vragen{max-width:760px;margin:0 auto} .v6-vraag{border-bottom:1px solid var(--v6-line)} .v6-vraag summary{display:flex;align-items:center;justify-content:space-between;gap:14px;list-style:none;cursor:pointer;padding:18px 2px;font-size:1.02rem;font-weight:600} .v6-vraag summary::-webkit-details-marker{display:none} .v6-vraag summary i{flex:none;color:var(--v6-accent-diep);transition:transform .25s var(--v6-ease)} .v6-vraag[open] summary i{transform:rotate(180deg)} .v6-vraag p{margin:0 0 18px;color:var(--v6-muted);max-width:62ch} /* Het donkere slot (gedeelde CTA-taal van de homepage) */ .v6-slotblok{text-align:center;background:#0C0A09;color:#F5F5F3;border-radius:clamp(20px,3vw,32px);margin:0 clamp(12px,2vw,28px);padding:clamp(48px,7vw,88px) clamp(20px,4vw,48px)} .v6-slotblok h2{font-family:'Source Serif 4',Georgia,serif;font-weight:400;letter-spacing:-.01em;font-size:clamp(1.9rem,4vw,3rem);margin:0} .v6-slotblok p{margin:14px auto 0;max-width:52ch;color:rgba(245,245,243,.75)} .v6-slot-rij{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:28px} .v6-k-licht,.v6p .v6-k-licht{background:#F5F5F3;color:#0C0A09} .v6-k-licht:hover,.v6p .v6-k-licht:hover{background:#fff;color:#0C0A09} .v6-k-donkerrand,.v6p .v6-k-donkerrand{background:transparent;color:#F5F5F3;border-color:rgba(245,245,243,.3)} .v6-k-donkerrand:hover,.v6p .v6-k-donkerrand:hover{border-color:#F5F5F3;color:#F5F5F3} /* Responsive */ @media (max-width:960px){ .v6-raster,.v6-raster-4{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:700px){ .v6-raster,.v6-raster-4{grid-template-columns:1fr} .v6-checks{grid-template-columns:1fr} } /* Donker thema */ body[data-portal-theme="dark"] .v6p{color:#F5F5F3} body[data-portal-theme="dark"] .v6-h1,body[data-portal-theme="dark"] .v6-kop h2{color:#F5F5F3} body[data-portal-theme="dark"] .v6-h1 em,body[data-portal-theme="dark"] .v6-kop h2 em,body[data-portal-theme="dark"] .v6-kaart-ic,body[data-portal-theme="dark"] .v6-checks i,body[data-portal-theme="dark"] .v6-vraag summary i{color:#93B8F5} body[data-portal-theme="dark"] .v6-lede,body[data-portal-theme="dark"] .v6-kop p,body[data-portal-theme="dark"] .v6-kaart > span,body[data-portal-theme="dark"] .v6-vraag p{color:rgba(245,245,243,.72)} body[data-portal-theme="dark"] .v6-vlak{background:#141413} body[data-portal-theme="dark"] .v6-kaart{background:#161615;border-color:rgba(245,245,243,.12)} body[data-portal-theme="dark"] .v6-kaart b,body[data-portal-theme="dark"] .v6-checks li,body[data-portal-theme="dark"] .v6-vraag summary{color:#F5F5F3} body[data-portal-theme="dark"] .v6-kaart-ic{background:rgba(37,99,235,.2)} body[data-portal-theme="dark"] .v6-k-vol{background:#F5F5F3;color:#0C0A09} body[data-portal-theme="dark"] .v6-k-vol:hover{background:#fff;color:#0C0A09} body[data-portal-theme="dark"] .v6-k-rand{color:#F5F5F3;border-color:rgba(245,245,243,.28)} body[data-portal-theme="dark"] .v6-k-rand:hover{border-color:#F5F5F3;color:#F5F5F3}