/* * ================================================================ * VOKK DARK MODE HARDLOCK * ================================================================ * * Hoge specificiteit is BEWUST. * * Layoutpack CSS gebruikt: * body.pack.template .component { ... !important } * * Daarom gebruikt deze Dark laag: * html body.pb-mode-dark[pack][template] .component * * Geen: * - typography * - spacing * - grid * - hero * - mobile * ================================================================ */ @media screen and (min-width: 969px) { /* * Deze prefix heeft voldoende specificiteit om * pack + template + component + !important te verslaan. */ /* ================================================================ * PAGE ROOT * ================================================================ */ html body.pb-mode-dark[class*="pb-layout-pack-"][class*="pb-template-"] :is( .vokk-default-page, .vokk-services-page, .vokk-about-page, .vokk-projects-page, .vokk-reviews-page, .vokk-contact-page, .vokk-detail-page, .pb-vokk-light ) { background: var(--pb-dark-page) !important; color: var(--pb-dark-text) !important; } /* ================================================================ * ALLE GROTE SECTIES * ================================================================ */ html body.pb-mode-dark[class*="pb-layout-pack-"][class*="pb-template-"] :is( .pb-vokk-why, .pb-vokk-benefits, .pb-vokk-services, .pb-vokk-trust, .pb-vokk-process, .vokk-services-intro, .vokk-services-list, .vokk-service-benefits, .vokk-services-cta, .vokk-about-intro, .vokk-about-story, .vokk-about-values, .vokk-about-experience, .vokk-about-cta, .vokk-projects-intro, .vokk-projects-showcase, .vokk-project-featured, .vokk-project-results, .vokk-projects-cta, .vokk-reviews-summary, .vokk-reviews-list, .vokk-reviews-trust, .vokk-reviews-wordpress-ready, .vokk-reviews-cta, .vokk-contact-main, .vokk-contact-reassurance, .vokk-contact-extra, .vokk-detail-intro, .vokk-detail-benefits, .vokk-detail-section, .vokk-detail-process, .vokk-detail-faq-section, .vokk-detail-cta ) { background: var(--pb-dark-page) !important; background-image: none !important; color: var(--pb-dark-text) !important; border-color: var(--pb-dark-border) !important; } /* ================================================================ * STRUCTURELE PANELS * ================================================================ */ html body.pb-mode-dark[class*="pb-layout-pack-"][class*="pb-template-"] :is( .pb-vokk-benefit, .pb-vokk-service-card, .pb-vokk-service-content, .pb-vokk-trust-box, .pb-vokk-process-item, .vokk-service-content, .vokk-service-benefit, .vokk-about-story-content, .vokk-about-experience-content, .vokk-project-content, .vokk-project-featured-content, .vokk-review-card, .vokk-reviews-score, .vokk-reviews-trust-grid, .vokk-reviews-wordpress-box, .vokk-contact-info, .vokk-contact-form-panel, .vokk-contact-hours, .vokk-detail-content, .vokk-services-cta-box, .vokk-about-cta-box, .vokk-projects-cta-box, .vokk-reviews-cta-box, .vokk-detail-cta-box ) { background: var(--pb-dark-surface) !important; background-image: none !important; color: var(--pb-dark-text) !important; border-color: var(--pb-dark-border) !important; box-shadow: none !important; filter: none !important; } /* ================================================================ * EDITORIAL ITEMS BLIJVEN TRANSPARANT * ================================================================ */ html body.pb-mode-dark[class*="pb-layout-pack-"][class*="pb-template-"] :is( .vokk-service-row, .vokk-service-benefit, .vokk-about-value, .vokk-about-stat, .vokk-project-card, .vokk-project-result, .vokk-reviews-trust-item, .vokk-contact-reassurance-item, .vokk-contact-faq-item, .vokk-detail-benefit, .vokk-detail-step, .vokk-detail-faq-item ) { background-color: transparent !important; background-image: none !important; border-color: var(--pb-dark-border) !important; box-shadow: none !important; } /* ================================================================ * HEADINGS * ================================================================ */ html body.pb-mode-dark[class*="pb-layout-pack-"][class*="pb-template-"] :is( .pb-vokk-light, .vokk-default-page, .vokk-services-page, .vokk-about-page, .vokk-projects-page, .vokk-reviews-page, .vokk-contact-page, .vokk-detail-page ) :is( h1, h2, h3, h4, h5, h6 ) { color: var(--pb-dark-heading) !important; opacity: 1 !important; text-shadow: none !important; } /* ================================================================ * PARAGRAPHS * ================================================================ */ html body.pb-mode-dark[class*="pb-layout-pack-"][class*="pb-template-"] :is( .pb-vokk-light, .vokk-default-page, .vokk-services-page, .vokk-about-page, .vokk-projects-page, .vokk-reviews-page, .vokk-contact-page, .vokk-detail-page ) p { color: var(--pb-dark-text) !important; opacity: 1 !important; text-shadow: none !important; } /* ================================================================ * LIJSTEN / SECUNDAIRE TEKST * ================================================================ */ html body.pb-mode-dark[class*="pb-layout-pack-"][class*="pb-template-"] :is( .vokk-services-page, .vokk-about-page, .vokk-projects-page, .vokk-reviews-page, .vokk-contact-page, .vokk-detail-page ) :is( li, dd ) { color: var(--pb-dark-text) !important; opacity: 1 !important; } html body.pb-mode-dark[class*="pb-layout-pack-"][class*="pb-template-"] :is( .vokk-services-page, .vokk-about-page, .vokk-projects-page, .vokk-reviews-page, .vokk-contact-page, .vokk-detail-page ) :is( small, dt ) { color: var(--pb-dark-muted) !important; opacity: 1 !important; } /* ================================================================ * REVIEW TRUST — DIT IS HET WITTE BLOK OP JE SCREENSHOT * ================================================================ */ html body.pb-mode-dark[class*="pb-layout-pack-"].pb-template-page-waardering .vokk-reviews-trust { background: var(--pb-dark-page) !important; background-image: none !important; border-color: var(--pb-dark-border) !important; } html body.pb-mode-dark[class*="pb-layout-pack-"].pb-template-page-waardering .vokk-reviews-trust-grid { background: var(--pb-dark-surface) !important; background-image: none !important; border-color: var(--pb-dark-border) !important; box-shadow: none !important; } html body.pb-mode-dark[class*="pb-layout-pack-"].pb-template-page-waardering .vokk-reviews-trust-item { background: transparent !important; border-color: var(--pb-dark-border) !important; } html body.pb-mode-dark[class*="pb-layout-pack-"].pb-template-page-waardering .vokk-reviews-trust-item strong { color: var(--pb-dark-heading) !important; } html body.pb-mode-dark[class*="pb-layout-pack-"].pb-template-page-waardering .vokk-reviews-trust-item span { color: var(--pb-dark-text) !important; opacity: 1 !important; } /* ================================================================ * REVIEW KLANTGERICHT * ================================================================ */ html body.pb-mode-dark[class*="pb-layout-pack-"].pb-template-page-waardering .vokk-reviews-wordpress-ready { background: var(--pb-dark-page) !important; background-image: none !important; } html body.pb-mode-dark[class*="pb-layout-pack-"].pb-template-page-waardering .vokk-reviews-wordpress-box { background: var(--pb-dark-surface) !important; background-image: none !important; border-color: var(--pb-dark-border) !important; box-shadow: none !important; } html body.pb-mode-dark[class*="pb-layout-pack-"].pb-template-page-waardering .vokk-reviews-wordpress-box h2 { color: var(--pb-dark-heading) !important; } html body.pb-mode-dark[class*="pb-layout-pack-"].pb-template-page-waardering .vokk-reviews-wordpress-box p, html body.pb-mode-dark[class*="pb-layout-pack-"].pb-template-page-waardering .vokk-reviews-wordpress-item { color: var(--pb-dark-text) !important; opacity: 1 !important; } /* ================================================================ * CTA — DIT VERWIJDERT DE WITTE BAND ER OMHEEN * ================================================================ */ html body.pb-mode-dark[class*="pb-layout-pack-"][class*="pb-template-"] :is( .vokk-services-cta, .vokk-about-cta, .vokk-projects-cta, .vokk-reviews-cta, .vokk-detail-cta ) { background: var(--pb-dark-page) !important; background-image: none !important; } html body.pb-mode-dark[class*="pb-layout-pack-"][class*="pb-template-"] :is( .vokk-services-cta-box, .vokk-about-cta-box, .vokk-projects-cta-box, .vokk-reviews-cta-box, .vokk-detail-cta-box ) { background: var(--pb-dark-surface) !important; background-image: none !important; border-color: var(--pb-dark-border) !important; box-shadow: none !important; } html body.pb-mode-dark[class*="pb-layout-pack-"][class*="pb-template-"] :is( .vokk-services-cta-box, .vokk-about-cta-box, .vokk-projects-cta-box, .vokk-reviews-cta-box, .vokk-detail-cta-box ) :is( h2, h3, h4 ) { color: var(--pb-dark-heading) !important; opacity: 1 !important; } html body.pb-mode-dark[class*="pb-layout-pack-"][class*="pb-template-"] :is( .vokk-services-cta-box, .vokk-about-cta-box, .vokk-projects-cta-box, .vokk-reviews-cta-box, .vokk-detail-cta-box ) p { color: var(--pb-dark-text) !important; opacity: 1 !important; } /* ================================================================ * CONTACT — DONKERE TEKST OP DONKER OPLOSSEN * ================================================================ */ html body.pb-mode-dark[class*="pb-layout-pack-"].pb-template-page-contact :is( .vokk-contact-info, .vokk-contact-form-panel, .vokk-contact-hours ) { background: var(--pb-dark-surface) !important; background-image: none !important; border-color: var(--pb-dark-border) !important; } html body.pb-mode-dark[class*="pb-layout-pack-"].pb-template-page-contact .vokk-contact-detail { border-color: var(--pb-dark-border) !important; } html body.pb-mode-dark[class*="pb-layout-pack-"].pb-template-page-contact .vokk-contact-detail-body :is( a, strong, span ), html body.pb-mode-dark[class*="pb-layout-pack-"].pb-template-page-contact .vokk-contact-hours-row :is( span, strong ) { color: var(--pb-dark-text) !important; opacity: 1 !important; } html body.pb-mode-dark[class*="pb-layout-pack-"].pb-template-page-contact .vokk-contact-detail-body small { color: var(--pb-dark-muted) !important; opacity: 1 !important; } /* ================================================================ * DETAIL CONTENT — O.A. HARDCODED #FFF UIT PREMIUM * ================================================================ */ html body.pb-mode-dark[class*="pb-layout-pack-"] :is( .pb-template-page-warmtepompen, .pb-template-page-installatie, .pb-template-page-sanitair, .pb-template-page-zonne-energie ) .vokk-detail-content { background: var(--pb-dark-surface) !important; background-image: none !important; color: var(--pb-dark-text) !important; border-color: var(--pb-dark-border) !important; } } /* PB DARK BREATHING POLISH START */ /* * ================================================================ * DARK — VISUAL BREATHING POLISH * ================================================================ * * Alleen: * - binnenruimte * - afstanden tussen tekst/iconen * - rust rond lijnen * - services hover * * Geen typography. * Geen hero. * Geen mobiele layout. * Geen nieuwe kleurarchitectuur. * ================================================================ */ @media screen and (min-width: 969px) { /* ================================================================ * 01 — HOMEPAGE BENEFITS * ================================================================ */ html body.pb-mode-dark .pb-vokk-benefit { padding: 38px 32px !important; } html body.pb-mode-dark .pb-vokk-benefit-icon { margin: 0 auto 24px !important; } html body.pb-mode-dark .pb-vokk-benefit h3 { margin-bottom: 14px !important; } html body.pb-mode-dark .pb-vokk-benefit p { max-width: 31ch !important; margin-left: auto !important; margin-right: auto !important; } /* ================================================================ * 02 — DIENSTEN HOMEPAGE * Genummerde editorial/list variant * ================================================================ */ html body.pb-mode-dark .pb-vokk-service-card { transition: background-color .22s ease, border-color .22s ease !important; } /* * Iets meer ruimte tussen nummer, titel, uitleg en pijl. */ html body.pb-mode-dark.pb-services-variant-d .pb-vokk-service-card { padding: 28px 26px !important; } html body.pb-mode-dark.pb-services-variant-d .pb-vokk-service-content { padding: 4px 14px !important; } html body.pb-mode-dark.pb-services-variant-d .pb-vokk-service-content h3 { margin-bottom: 10px !important; } /* * BELANGRIJK: * hover blijft donker. * Geen wit vlak meer. */ html body.pb-mode-dark .pb-vokk-service-card:hover, html body.pb-mode-dark.pb-services-variant-d .pb-vokk-service-card:hover { background: color-mix( in srgb, var(--pb-dark-surface) 86%, var(--pb-primary) 14% ) !important; background-image: none !important; border-color: color-mix( in srgb, var(--pb-primary) 28%, var(--pb-dark-border) ) !important; box-shadow: none !important; } /* * Tekst blijft bij hover leesbaar. */ html body.pb-mode-dark .pb-vokk-service-card:hover :is( h2,h3,h4,strong ) { color: var(--pb-dark-heading) !important; } html body.pb-mode-dark .pb-vokk-service-card:hover :is( p,span ) { color: var(--pb-dark-text) !important; } /* ================================================================ * 03 — TRUST STRIP * ================================================================ */ html body.pb-mode-dark .pb-vokk-trust-box { padding: 28px 32px !important; } html body.pb-mode-dark .pb-vokk-trust-item { padding: 8px 22px !important; } /* ================================================================ * 04 — PROCESS * ================================================================ */ html body.pb-mode-dark .pb-vokk-process-item { padding: 42px 34px 38px !important; } html body.pb-mode-dark .pb-vokk-process-number { margin-bottom: 16px !important; } html body.pb-mode-dark .pb-vokk-process-icon { margin-bottom: 26px !important; } html body.pb-mode-dark .pb-vokk-process-item h3 { margin-bottom: 14px !important; } html body.pb-mode-dark .pb-vokk-process-item p { max-width: 31ch !important; margin-left: auto !important; margin-right: auto !important; } /* ================================================================ * 05 — CONTENT DIENSTEN * ================================================================ */ html body.pb-mode-dark.pb-template-page-diensten .vokk-service-content { padding: 54px clamp(42px,5vw,76px) !important; } html body.pb-mode-dark.pb-template-page-diensten .vokk-service-content h2 { margin-bottom: 18px !important; } html body.pb-mode-dark.pb-template-page-diensten .vokk-service-content > p { margin-bottom: 26px !important; } html body.pb-mode-dark.pb-template-page-diensten .vokk-service-points { margin-top: 26px !important; padding-top: 24px !important; } /* ================================================================ * 06 — REVIEWS * ================================================================ */ html body.pb-mode-dark.pb-template-page-waardering .vokk-reviews-score { padding: 34px 32px !important; } html body.pb-mode-dark.pb-template-page-waardering .vokk-reviews-score-number { margin-bottom: 12px !important; } html body.pb-mode-dark.pb-template-page-waardering .vokk-reviews-wordpress-box { padding: 36px 42px !important; } html body.pb-mode-dark.pb-template-page-waardering .vokk-reviews-wordpress-box h2 { margin-bottom: 16px !important; } html body.pb-mode-dark.pb-template-page-waardering .vokk-reviews-wordpress-list { gap: 18px 28px !important; } html body.pb-mode-dark.pb-template-page-waardering .vokk-reviews-trust-item { padding: 30px 28px !important; } /* ================================================================ * 07 — CONTACT * ================================================================ */ html body.pb-mode-dark.pb-template-page-contact .vokk-contact-info, html body.pb-mode-dark.pb-template-page-contact .vokk-contact-form-panel { padding: 52px 48px !important; } html body.pb-mode-dark.pb-template-page-contact .vokk-contact-detail { padding: 24px 0 !important; } html body.pb-mode-dark.pb-template-page-contact .vokk-contact-detail-icon { margin-right: 4px !important; } html body.pb-mode-dark.pb-template-page-contact .vokk-contact-detail-body small { display: block !important; margin-bottom: 8px !important; } html body.pb-mode-dark.pb-template-page-contact .vokk-contact-hours { margin-top: 36px !important; padding-top: 32px !important; } html body.pb-mode-dark.pb-template-page-contact .vokk-contact-hours h3 { margin-bottom: 24px !important; } html body.pb-mode-dark.pb-template-page-contact .vokk-contact-hours-row { padding: 10px 0 !important; } /* ================================================================ * 08 — CTA * ================================================================ */ html body.pb-mode-dark :is( .vokk-services-cta-box, .vokk-about-cta-box, .vokk-projects-cta-box, .vokk-reviews-cta-box, .vokk-detail-cta-box ) { padding: 42px 48px !important; } html body.pb-mode-dark :is( .vokk-services-cta-box, .vokk-about-cta-box, .vokk-projects-cta-box, .vokk-reviews-cta-box, .vokk-detail-cta-box ) :is( h2,h3 ) { margin-bottom: 14px !important; } /* ================================================================ * 09 — ICONEN ALGEMEEN * * Alleen ruimte rond bestaande iconen. * Geen formaat/style verandering. * ================================================================ */ html body.pb-mode-dark :is( .pb-vokk-benefit-icon, .pb-vokk-process-icon, .vokk-service-benefit-icon, .vokk-detail-benefit-icon, .vokk-contact-detail-icon ) svg { display: block !important; margin: auto !important; } /* * Geen icon direct tegen daaropvolgende tekst. */ html body.pb-mode-dark :is( .vokk-service-benefit-icon, .vokk-detail-benefit-icon ) { margin-bottom: 20px !important; } /* ================================================================ * 10 — GEEN NIEUWE SCHADUWEN * ================================================================ */ html body.pb-mode-dark :is( .pb-vokk-benefit, .pb-vokk-service-card, .pb-vokk-process-item, .pb-vokk-trust-box, .vokk-reviews-score, .vokk-reviews-wordpress-box, .vokk-contact-info, .vokk-contact-form-panel, .vokk-contact-hours ) { box-shadow: none !important; } } /* PB DARK BREATHING POLISH END */ /* PB DARK DETAIL POLISH START */ @media screen and (min-width: 969px) { /* * ============================================================ * 1. DIENSTEN — DONKERE HOVER * ============================================================ */ html body.pb-mode-dark .pb-vokk-service-card { transition: background-color .22s ease, border-color .22s ease !important; } html body.pb-mode-dark .pb-vokk-service-card:hover, html body.pb-mode-dark .pb-vokk-service-card:focus-visible { background: color-mix( in srgb, var(--pb-dark-surface) 82%, var(--pb-primary) 18% ) !important; background-image: none !important; border-color: color-mix( in srgb, var(--pb-primary) 36%, var(--pb-dark-border) ) !important; box-shadow: none !important; } /* * Hovertekst blijft leesbaar. */ html body.pb-mode-dark .pb-vokk-service-card:hover :is( h2,h3,h4 ) { color: var(--pb-dark-heading) !important; } html body.pb-mode-dark .pb-vokk-service-card:hover :is( p,span ) { color: var(--pb-dark-text) !important; } /* * Diensten-nummers sterker contrast. */ html body.pb-mode-dark .pb-vokk-service-card :is( .pb-vokk-service-number, .service-number ) { color: color-mix( in srgb, var(--pb-primary-light) 74%, white 26% ) !important; opacity: 1 !important; } /* * Ook eerste losse tekstnode/nummer-achtige spans. */ html body.pb-mode-dark .pb-vokk-service-card > span:first-child { color: color-mix( in srgb, var(--pb-primary-light) 74%, white 26% ) !important; opacity: 1 !important; } /* ============================================================ * 2. DIENSTEN — MEER LUCHT * ============================================================ */ html body.pb-mode-dark .pb-vokk-service-card { padding: 32px 34px !important; } html body.pb-mode-dark .pb-vokk-service-content { padding-left: 18px !important; padding-right: 18px !important; } html body.pb-mode-dark .pb-vokk-service-content :is( h2,h3,h4 ) { margin-bottom: 14px !important; } html body.pb-mode-dark .pb-vokk-service-content p { max-width: 66ch !important; } /* ============================================================ * 3. OVER ONS — MEER ADEMRUIMTE * ============================================================ */ html body.pb-mode-dark.pb-template-page-over-ons :is( .vokk-about-story-content, .vokk-about-experience-content ) { padding: 52px 48px !important; } html body.pb-mode-dark.pb-template-page-over-ons :is( .vokk-about-story-content, .vokk-about-experience-content ) :is( h2,h3 ) { margin-bottom: 18px !important; color: var(--pb-dark-heading) !important; } html body.pb-mode-dark.pb-template-page-over-ons :is( .vokk-about-story-content, .vokk-about-experience-content ) p { max-width: 60ch !important; color: var(--pb-dark-text) !important; opacity: 1 !important; } html body.pb-mode-dark.pb-template-page-over-ons :is( .vokk-about-story-content, .vokk-about-experience-content ) > * + * { margin-top: 16px !important; } /* * Stats / ervaring onderin luchtiger. */ html body.pb-mode-dark.pb-template-page-over-ons .vokk-about-stats { margin-top: 34px !important; padding-top: 30px !important; } html body.pb-mode-dark.pb-template-page-over-ons :is( .vokk-about-stat, .vokk-about-stats > div ) { padding: 24px 22px !important; border-color: var(--pb-dark-border) !important; box-shadow: none !important; } html body.pb-mode-dark.pb-template-page-over-ons :is( .vokk-about-stat, .vokk-about-stats > div ) strong { color: var(--pb-dark-heading) !important; } html body.pb-mode-dark.pb-template-page-over-ons :is( .vokk-about-stat, .vokk-about-stats > div ) :is( span,small,p ) { color: var(--pb-dark-text) !important; opacity: .86 !important; } /* ============================================================ * 4. OVER ONS — VALUES * ============================================================ */ html body.pb-mode-dark.pb-template-page-over-ons .vokk-about-value { padding: 42px 38px !important; } html body.pb-mode-dark.pb-template-page-over-ons .vokk-about-value :is( h2,h3,h4 ) { margin-bottom: 14px !important; color: var(--pb-dark-heading) !important; } html body.pb-mode-dark.pb-template-page-over-ons .vokk-about-value p { color: var(--pb-dark-text) !important; opacity: 1 !important; } /* ============================================================ * 5. ZWAKKE TEKSTEN — DARK CONTRAST CATCH * ============================================================ */ html body.pb-mode-dark :is( .vokk-about-page, .vokk-services-page, .vokk-projects-page, .vokk-reviews-page, .vokk-contact-page, .vokk-detail-page ) :is( .muted, .is-muted, .subtext ) { color: color-mix( in srgb, var(--pb-dark-text) 90%, white 10% ) !important; opacity: 1 !important; } /* * Kleine gewone labels niet weg laten vallen. */ html body.pb-mode-dark :is( .vokk-about-page, .vokk-services-page, .vokk-projects-page, .vokk-reviews-page, .vokk-contact-page, .vokk-detail-page ) small { color: var(--pb-dark-muted) !important; opacity: .92 !important; } /* ============================================================ * 6. REVIEWS / TRUST * ============================================================ */ html body.pb-mode-dark :is( .pb-vokk-trust-item, .vokk-reviews-trust-item ) strong { color: var(--pb-dark-heading) !important; opacity: 1 !important; } html body.pb-mode-dark :is( .pb-vokk-trust-item, .vokk-reviews-trust-item ) :is( p,span,small ) { color: var(--pb-dark-text) !important; opacity: .86 !important; } /* ============================================================ * 7. CONTACT — WAARDEN NIET TE DONKER * ============================================================ */ html body.pb-mode-dark.pb-template-page-contact .vokk-contact-detail-body :is( a,strong,span ) { color: var(--pb-dark-text) !important; opacity: 1 !important; } html body.pb-mode-dark.pb-template-page-contact .vokk-contact-hours-row strong { color: var(--pb-dark-text) !important; opacity: 1 !important; } /* ============================================================ * 8. ICONEN — MEER LUCHT * ============================================================ */ html body.pb-mode-dark :is( .pb-vokk-benefit-icon, .pb-vokk-process-icon, .vokk-service-benefit-icon, .vokk-detail-benefit-icon ) { margin-bottom: 22px !important; } html body.pb-mode-dark :is( .pb-vokk-benefit-icon, .pb-vokk-process-icon, .vokk-service-benefit-icon, .vokk-detail-benefit-icon ) svg { display: block !important; margin: auto !important; } /* ============================================================ * 9. BENEFITS / PROCESS — LUCHT * ============================================================ */ html body.pb-mode-dark :is( .pb-vokk-benefit, .pb-vokk-process-item ) { padding: 40px 32px !important; } html body.pb-mode-dark :is( .pb-vokk-benefit, .pb-vokk-process-item ) h3 { margin-bottom: 14px !important; } html body.pb-mode-dark :is( .pb-vokk-benefit, .pb-vokk-process-item ) p { max-width: 31ch !important; margin-left: auto !important; margin-right: auto !important; } /* * Geen nieuwe schaduwen introduceren. */ html body.pb-mode-dark :is( .pb-vokk-benefit, .pb-vokk-service-card, .pb-vokk-process-item, .pb-vokk-trust-box, .vokk-about-value, .vokk-about-stat ) { box-shadow: none !important; } } /* PB DARK DETAIL POLISH END */ /* PB DARK LABEL HOVER POLISH START */ @media screen and (min-width: 969px) { /* ============================================================ * 1. DIENSTEN HOVER — LICHTER GROEN, NOOIT WIT * ============================================================ */ html body.pb-mode-dark .pb-vokk-service-card:hover, html body.pb-mode-dark .pb-vokk-service-card:focus-within { background: color-mix( in srgb, var(--pb-dark-surface) 68%, var(--pb-primary) 32% ) !important; background-image: none !important; border-color: color-mix( in srgb, var(--pb-primary-light) 48%, var(--pb-dark-border) ) !important; box-shadow: none !important; } /* * Geen oude witte hoverlaag via pseudo-element. */ html body.pb-mode-dark .pb-vokk-service-card:hover::before, html body.pb-mode-dark .pb-vokk-service-card:hover::after, html body.pb-mode-dark .pb-vokk-service-card:focus-within::before, html body.pb-mode-dark .pb-vokk-service-card:focus-within::after { background: transparent !important; background-image: none !important; box-shadow: none !important; } /* * Hovertekst blijft goed leesbaar. */ html body.pb-mode-dark .pb-vokk-service-card:hover :is( h2,h3,h4,strong ), html body.pb-mode-dark .pb-vokk-service-card:focus-within :is( h2,h3,h4,strong ) { color: var(--pb-dark-heading) !important; } html body.pb-mode-dark .pb-vokk-service-card:hover :is( p,span ), html body.pb-mode-dark .pb-vokk-service-card:focus-within :is( p,span ) { color: var(--pb-dark-text) !important; } /* ============================================================ * 2. GROENE SECTION LABELS / KICKERS LICHTER * ============================================================ */ /* * Bijvoorbeeld: * ZO WERKEN WIJ * ERVARING & SERVICE * VERTROUWD DOOR ONZE KLANTEN * * Niet spierwit, maar duidelijk licht. */ html body.pb-mode-dark :is( .pb-vokk-kicker, .pb-vokk-label, .pb-vokk-eyebrow, .vokk-section-kicker, .vokk-section-label, .vokk-small-title, .vokk-about-kicker, .vokk-projects-kicker, .vokk-reviews-kicker, .vokk-detail-kicker, .vokk-contact-small-title, [class*="kicker"], [class*="eyebrow"], [class*="section-label"] ) { color: rgba(255,255,255,.78) !important; opacity: 1 !important; } /* * Homepage-specifieke kleine groene labels. */ html body.pb-mode-dark :is( .pb-vokk-why, .pb-vokk-benefits, .pb-vokk-services, .pb-vokk-trust, .pb-vokk-process ) :is( .pb-vokk-subtitle, .pb-vokk-section-label, .pb-vokk-kicker, small ) { color: rgba(255,255,255,.76) !important; opacity: 1 !important; } } /* PB DARK LABEL HOVER POLISH END */ /* PB DARK UNIFORM SMALL TITLES START */ @media screen and (min-width: 969px) { /* * ============================================================ * 1. ALLE KLEINE SECTIETITELS — ÉÉN STIJL IN DARK * ============================================================ * * Voorbeelden: * - ZO WERKEN WIJ * - WAAROM PB WEBDIENSTEN * - VERTROUWD DOOR ONZE KLANTEN * - ERVARING & SERVICE * - WAAR WIJ VOOR STAAN * - VAKMANSCHAP IN CIJFERS * - OFFERTE OF VRAAG * * Alleen Dark mode. */ html body.pb-mode-dark :is( .pb-vokk-eyebrow, .pb-vokk-kicker, .pb-vokk-label, .pb-vokk-section-label, .pb-vokk-trust-label, .vokk-section-kicker, .vokk-section-label, .vokk-services-small-title, .vokk-services-kicker, .vokk-about-small-title, .vokk-about-kicker, .vokk-projects-small-title, .vokk-projects-kicker, .vokk-reviews-small-title, .vokk-reviews-kicker, .vokk-contact-small-title, .vokk-contact-kicker, .vokk-detail-small-title, .vokk-detail-kicker ) { color: rgba(232,236,240,.82) !important; opacity: 1 !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.35 !important; letter-spacing: .14em !important; text-transform: uppercase !important; } /* * ============================================================ * 2. HERO EYEBROWS NIET MEENEMEN * ============================================================ * * Hero's blijven zoals ze nu zijn. */ html body.pb-mode-dark :is( .pb-content-hero, .vokk-about-hero, .vokk-services-hero, .vokk-projects-hero, .vokk-reviews-hero, .vokk-contact-hero, .vokk-detail-hero ) :is( .vokk-about-eyebrow, .vokk-services-eyebrow, .vokk-projects-eyebrow, .vokk-reviews-eyebrow, .vokk-contact-eyebrow, .vokk-detail-eyebrow ) { color: revert !important; font-size: revert !important; font-weight: revert !important; line-height: revert !important; letter-spacing: revert !important; text-transform: revert !important; } /* * ============================================================ * 3. KAARTNUMMERS — LICHTGRIJS IN DARK * ============================================================ */ html body.pb-mode-dark :is( .pb-vokk-process-number, .vokk-about-value-number, .vokk-service-number, .vokk-detail-step-number, .vokk-project-number, .vokk-review-number ) { color: rgba(232,236,240,.78) !important; opacity: 1 !important; } /* * About stats blijven echte waarden, * dus niet als subtiel kaartnummer behandelen. */ html body.pb-mode-dark .vokk-about-stat strong { color: var(--pb-dark-heading) !important; } /* * ============================================================ * 4. HOMEPAGE TRUST LABEL OOK EXACT GELIJK * ============================================================ */ html body.pb-mode-dark .pb-vokk-trust-label { color: rgba(232,236,240,.82) !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.35 !important; letter-spacing: .14em !important; text-transform: uppercase !important; opacity: 1 !important; } } /* PB DARK UNIFORM SMALL TITLES END */ /* PB DARK TRUST GREY START */ @media screen and (min-width: 969px) { html body.pb-mode-dark .pb-vokk-trust-label, html body.pb-mode-dark .pb-vokk-trust :is( a, .pb-vokk-trust-link ) { color: rgba(232,236,240,.82) !important; opacity: 1 !important; } html body.pb-mode-dark .pb-vokk-trust a:hover { color: rgba(255,255,255,.94) !important; } } /* PB DARK TRUST GREY END */ /* PB DARK ACCENT CONTRAST START */ @media screen and (min-width: 969px) { /* ============================================================ * 1. CONTENT LINKS — LICHTGRIJS IN DARK * ============================================================ */ html body.pb-mode-dark :is( .pb-vokk-services, .vokk-services-page, .vokk-about-page, .vokk-projects-page, .vokk-reviews-page, .vokk-contact-page, .vokk-detail-page ) a:not( .button, .btn, .wp-element-button, .vokk-cta-button, .vokk-services-cta-button, .vokk-about-cta-button, .vokk-projects-cta-button, .vokk-reviews-cta-button, .vokk-detail-cta-button ) { color: rgba(232,236,240,.84) !important; opacity: 1 !important; } /* * Hover iets helderder. */ html body.pb-mode-dark :is( .pb-vokk-services, .vokk-services-page, .vokk-about-page, .vokk-projects-page, .vokk-reviews-page, .vokk-contact-page, .vokk-detail-page ) a:not( .button, .btn, .wp-element-button, .vokk-cta-button, .vokk-services-cta-button, .vokk-about-cta-button, .vokk-projects-cta-button, .vokk-reviews-cta-button, .vokk-detail-cta-button ):hover { color: rgba(255,255,255,.96) !important; } /* ============================================================ * 2. CHECKMARKS / VINKJES — LICHTGRIJS * ============================================================ */ html body.pb-mode-dark :is( .vokk-service-points, .vokk-service-benefits, .vokk-detail-benefits, .vokk-reviews-wordpress-list, .vokk-about-values, .vokk-project-results, .pb-vokk-services ) li::before, html body.pb-mode-dark :is( .vokk-service-points, .vokk-service-benefits, .vokk-detail-benefits, .vokk-reviews-wordpress-list, .vokk-about-values, .vokk-project-results, .pb-vokk-services ) [class*="check"], html body.pb-mode-dark :is( .vokk-service-points, .vokk-service-benefits, .vokk-detail-benefits, .vokk-reviews-wordpress-list, .vokk-about-values, .vokk-project-results, .pb-vokk-services ) svg { color: rgba(232,236,240,.82) !important; stroke: currentColor !important; opacity: 1 !important; } /* ============================================================ * 3. DIENSTEN NUMMERS — MEER CONTRAST * ============================================================ */ html body.pb-mode-dark :is( .pb-vokk-service-card, .vokk-service-row ) :is( .pb-vokk-service-number, .vokk-service-number, .service-number, [class*="number"] ) { color: rgba(232,236,240,.78) !important; opacity: 1 !important; } /* * In jouw lijst lijken de nummers ook losse spans te zijn. */ html body.pb-mode-dark :is( .pb-vokk-service-card, .vokk-service-row ) > span:first-child { color: rgba(232,236,240,.78) !important; opacity: 1 !important; } /* ============================================================ * 4. DIENSTEN HOVER — LICHTER GROEN, NOOIT WIT * ============================================================ */ html body.pb-mode-dark :is( .pb-vokk-service-card, .vokk-service-row ):hover, html body.pb-mode-dark :is( .pb-vokk-service-card, .vokk-service-row ):focus-within { background: color-mix( in srgb, var(--pb-dark-surface) 72%, var(--pb-primary) 28% ) !important; background-image: none !important; border-color: color-mix( in srgb, rgba(232,236,240,.34) 35%, var(--pb-dark-border) ) !important; box-shadow: none !important; } /* * Oude witte hover-pseudo lagen weg. */ html body.pb-mode-dark :is( .pb-vokk-service-card, .vokk-service-row ):hover::before, html body.pb-mode-dark :is( .pb-vokk-service-card, .vokk-service-row ):hover::after, html body.pb-mode-dark :is( .pb-vokk-service-card, .vokk-service-row ):focus-within::before, html body.pb-mode-dark :is( .pb-vokk-service-card, .vokk-service-row ):focus-within::after { background: transparent !important; background-image: none !important; box-shadow: none !important; } /* ============================================================ * 5. HOVER TEKST BLIJFT LEESBAAR * ============================================================ */ html body.pb-mode-dark :is( .pb-vokk-service-card, .vokk-service-row ):hover :is( h2,h3,h4,strong ), html body.pb-mode-dark :is( .pb-vokk-service-card, .vokk-service-row ):focus-within :is( h2,h3,h4,strong ) { color: var(--pb-dark-heading) !important; } html body.pb-mode-dark :is( .pb-vokk-service-card, .vokk-service-row ):hover :is( p,span,li,a ), html body.pb-mode-dark :is( .pb-vokk-service-card, .vokk-service-row ):focus-within :is( p,span,li,a ) { color: var(--pb-dark-text) !important; opacity: 1 !important; } } /* PB DARK ACCENT CONTRAST END */ /* PB SERVICES D DARK FINAL START */ @media screen and (min-width: 969px) { /* * ============================================================ * SERVICES D — DARK BASIS * ============================================================ */ html body.pb-mode-dark.pb-services-variant-d.pb-template-front-page .pb-vokk-service-card { background: var(--pb-dark-surface) !important; background-image: none !important; border-color: var(--pb-dark-border) !important; box-shadow: none !important; } /* * ============================================================ * HOVER — LICHTER GROEN, NIET WIT * ============================================================ */ html body.pb-mode-dark.pb-services-variant-d.pb-template-front-page .pb-vokk-service-card:hover, html body.pb-mode-dark.pb-services-variant-d.pb-template-front-page .pb-vokk-service-card:focus-within { background: color-mix( in srgb, var(--pb-dark-surface) 70%, var(--pb-primary) 30% ) !important; background-image: none !important; border-color: color-mix( in srgb, var(--pb-primary-light) 42%, var(--pb-dark-border) ) !important; box-shadow: none !important; } /* * Oude lichte hover-overlay uitschakelen. */ html body.pb-mode-dark.pb-services-variant-d.pb-template-front-page .pb-vokk-service-card:hover::after, html body.pb-mode-dark.pb-services-variant-d.pb-template-front-page .pb-vokk-service-card:focus-within::after { background: transparent !important; background-image: none !important; } /* * ============================================================ * TITEL / BESCHRIJVING BIJ HOVER * ============================================================ */ html body.pb-mode-dark.pb-services-variant-d.pb-template-front-page .pb-vokk-service-card:hover .pb-vokk-service-content h3, html body.pb-mode-dark.pb-services-variant-d.pb-template-front-page .pb-vokk-service-card:focus-within .pb-vokk-service-content h3 { color: var(--pb-dark-heading) !important; } html body.pb-mode-dark.pb-services-variant-d.pb-template-front-page .pb-vokk-service-card:hover .pb-vokk-service-content p, html body.pb-mode-dark.pb-services-variant-d.pb-template-front-page .pb-vokk-service-card:focus-within .pb-vokk-service-content p { color: var(--pb-dark-text) !important; opacity: 1 !important; } /* * ============================================================ * NUMMERS 01 / 02 / 03 / 04 — LICHTGRIJS * ============================================================ * * Variant D gebruikt genummerde rijen. * Zowel bestaande number-class als pseudo-numbering afgedekt. */ html body.pb-mode-dark.pb-services-variant-d.pb-template-front-page .pb-vokk-service-card :is( .pb-vokk-service-number, .service-number, [class*="service-number"] ) { color: rgba(232,236,240,.82) !important; opacity: 1 !important; } /* * Wanneer nummer via pseudo-element wordt opgebouwd. */ html body.pb-mode-dark.pb-services-variant-d.pb-template-front-page .pb-vokk-service-card::before { color: rgba(232,236,240,.82) !important; opacity: 1 !important; } /* * ============================================================ * PIJL RECHTS OOK LICHTER * ============================================================ */ html body.pb-mode-dark.pb-services-variant-d.pb-template-front-page .pb-vokk-service-more { color: rgba(232,236,240,.80) !important; opacity: 1 !important; } html body.pb-mode-dark.pb-services-variant-d.pb-template-front-page .pb-vokk-service-card:hover .pb-vokk-service-more { color: rgba(255,255,255,.94) !important; } } /* PB SERVICES D DARK FINAL END */ /* PB PROCESS CARD NUMBERS FINAL START */ @media screen and (min-width: 969px) { /* * ============================================================ * ZO WERKEN WIJ — PROCESS KAARTEN * 01 / 02 / 03 * ============================================================ * * Alleen Dark mode. * Nummer linksboven IN de kaart. */ html body.pb-mode-dark .pb-vokk-process-item { position: relative !important; box-sizing: border-box !important; overflow: visible !important; /* * Extra ruimte bovenaan zodat nummer niet * tegen icoon of inhoud botst. */ padding-top: 48px !important; } /* * Het daadwerkelijke nummer. */ html body.pb-mode-dark .pb-vokk-process-number { position: absolute !important; top: 18px !important; left: 20px !important; right: auto !important; bottom: auto !important; margin: 0 !important; width: auto !important; height: auto !important; min-width: 0 !important; transform: none !important; text-align: left !important; color: rgba(232,236,240,.82) !important; opacity: 1 !important; font-size: 17px !important; line-height: 1 !important; font-weight: 700 !important; letter-spacing: .03em !important; z-index: 5 !important; } /* * Icoon blijft netjes gecentreerd. */ html body.pb-mode-dark .pb-vokk-process-icon { position: relative !important; margin: 0 auto 24px !important; transform: none !important; } html body.pb-mode-dark .pb-vokk-process-icon svg { display: block !important; margin: auto !important; } } /* PB PROCESS CARD NUMBERS FINAL END */ /* PB DARK SITEWIDE CHECKMARKS START */ @media screen and (min-width: 969px) { /* * ============================================================ * DARK MODE — ALLE VINKJES SITEWIDE LICHTGRIJS * ============================================================ */ html body.pb-mode-dark :is( .vokk-service-points, .vokk-service-benefits, .vokk-detail-benefits, .vokk-reviews-wordpress-list, .vokk-about-values, .vokk-project-results, .vokk-contact-reassurance, .pb-vokk-services, .pb-vokk-benefits ) li::before { color: rgba(232,236,240,.82) !important; opacity: 1 !important; } /* * Vinkjes die als span/icon bestaan. */ html body.pb-mode-dark :is( .vokk-service-points, .vokk-service-benefits, .vokk-detail-benefits, .vokk-reviews-wordpress-list, .vokk-about-values, .vokk-project-results, .vokk-contact-reassurance, .pb-vokk-services, .pb-vokk-benefits ) :is( .check, .checkmark, .icon-check, [class*="check"] ) { color: rgba(232,236,240,.82) !important; opacity: 1 !important; } /* * SVG vinkjes. */ html body.pb-mode-dark :is( .vokk-service-points, .vokk-service-benefits, .vokk-detail-benefits, .vokk-reviews-wordpress-list, .vokk-about-values, .vokk-project-results, .vokk-contact-reassurance, .pb-vokk-services, .pb-vokk-benefits ) svg { color: rgba(232,236,240,.82) !important; stroke: rgba(232,236,240,.82) !important; opacity: 1 !important; } } /* PB DARK SITEWIDE CHECKMARKS END */ /* PB DARK CARD ICONS FIX START */ /* * Herstelt de ronde iconen in dark mode kaarten/blokken. * Laat checklist-vinkjes met rust. */ html body.pb-mode-dark :is( .pb-vokk-usp-card, .pb-vokk-benefit-card, .pb-vokk-feature-card, .pb-vokk-value-card, .pb-vokk-step-card, .pb-vokk-process-card, .pb-vokk-why-card, .pb-vokk-card, .vokk-usp-card, .vokk-benefit-card, .vokk-feature-card, .vokk-value-card, .vokk-step-card, .vokk-process-card, .vokk-why-card, .vokk-card ) :is( .pb-vokk-card-icon, .pb-vokk-icon-wrap, .pb-vokk-icon-badge, .pb-vokk-feature-icon, .pb-vokk-benefit-icon, .pb-vokk-value-icon, .pb-vokk-step-icon, .pb-vokk-usp-icon, .vokk-card-icon, .vokk-icon-wrap, .vokk-icon-badge, .feature-icon, .benefit-icon, .value-icon, .step-icon, .usp-icon, .card-icon, .icon-wrap ) { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 64px !important; height: 64px !important; min-width: 64px !important; min-height: 64px !important; border-radius: 999px !important; background: rgba(236, 241, 236, 0.96) !important; border: 1px solid rgba(255,255,255,0.10) !important; box-shadow: none !important; opacity: 1 !important; overflow: visible !important; position: relative !important; z-index: 2 !important; color: rgba(43, 116, 73, 0.98) !important; } /* icon zelf */ html body.pb-mode-dark :is( .pb-vokk-usp-card, .pb-vokk-benefit-card, .pb-vokk-feature-card, .pb-vokk-value-card, .pb-vokk-step-card, .pb-vokk-process-card, .pb-vokk-why-card, .pb-vokk-card, .vokk-usp-card, .vokk-benefit-card, .vokk-feature-card, .vokk-value-card, .vokk-step-card, .vokk-process-card, .vokk-why-card, .vokk-card ) :is( .pb-vokk-card-icon, .pb-vokk-icon-wrap, .pb-vokk-icon-badge, .pb-vokk-feature-icon, .pb-vokk-benefit-icon, .pb-vokk-value-icon, .pb-vokk-step-icon, .pb-vokk-usp-icon, .vokk-card-icon, .vokk-icon-wrap, .vokk-icon-badge, .feature-icon, .benefit-icon, .value-icon, .step-icon, .usp-icon, .card-icon, .icon-wrap ) :is(svg, i, em, span::before, [class*="icon-"]::before, [class^="icon-"]::before) { color: rgba(43, 116, 73, 0.98) !important; stroke: currentColor !important; fill: currentColor !important; opacity: 1 !important; font-size: 20px !important; line-height: 1 !important; } /* SVG specifiek: nette maat */ html body.pb-mode-dark :is( .pb-vokk-usp-card, .pb-vokk-benefit-card, .pb-vokk-feature-card, .pb-vokk-value-card, .pb-vokk-step-card, .pb-vokk-process-card, .pb-vokk-why-card, .pb-vokk-card, .vokk-usp-card, .vokk-benefit-card, .vokk-feature-card, .vokk-value-card, .vokk-step-card, .vokk-process-card, .vokk-why-card, .vokk-card ) :is( .pb-vokk-card-icon, .pb-vokk-icon-wrap, .pb-vokk-icon-badge, .pb-vokk-feature-icon, .pb-vokk-benefit-icon, .pb-vokk-value-icon, .pb-vokk-step-icon, .pb-vokk-usp-icon, .vokk-card-icon, .vokk-icon-wrap, .vokk-icon-badge, .feature-icon, .benefit-icon, .value-icon, .step-icon, .usp-icon, .card-icon, .icon-wrap ) svg { width: 20px !important; height: 20px !important; display: block !important; } /* bovenste voordelen-kaarten wat meer lucht rond het icoon */ html body.pb-mode-dark :is( .pb-vokk-usp-card, .pb-vokk-benefit-card, .pb-vokk-feature-card, .vokk-usp-card, .vokk-benefit-card, .vokk-feature-card ) { padding-top: 34px !important; } html body.pb-mode-dark :is( .pb-vokk-usp-card, .pb-vokk-benefit-card, .pb-vokk-feature-card, .vokk-usp-card, .vokk-benefit-card, .vokk-feature-card ) :is( .pb-vokk-card-icon, .pb-vokk-icon-wrap, .pb-vokk-icon-badge, .vokk-card-icon, .vokk-icon-wrap, .vokk-icon-badge, .card-icon, .icon-wrap ) { margin: 0 auto 22px auto !important; } /* checklist-vinkjes NIET als ronde iconen behandelen */ html body.pb-mode-dark :is( .vokk-service-points, .vokk-service-benefits, .vokk-detail-benefits, .vokk-reviews-wordpress-list, .vokk-about-values, .vokk-project-results, .vokk-contact-reassurance, .pb-vokk-services, .pb-vokk-benefits ) :is( .check, .checkmark, .icon-check, [class*="check"] ) { width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; border-radius: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* PB DARK CARD ICONS FIX END */ /* PB DARK FINAL CONTENT POLISH START */ html body.pb-mode-dark { --pb-dark-text-strong: rgba(248, 250, 252, 0.96); --pb-dark-text: rgba(232, 236, 240, 0.88); --pb-dark-text-soft: rgba(232, 236, 240, 0.74); --pb-dark-text-faint: rgba(232, 236, 240, 0.60); --pb-dark-line: rgba(255,255,255,0.12); --pb-dark-line-soft: rgba(255,255,255,0.08); --pb-dark-surface: rgba(255,255,255,0.04); --pb-dark-surface-2: rgba(255,255,255,0.07); --pb-dark-hover-green: rgba(124, 167, 132, 0.18); --pb-dark-icon-bg: rgba(238, 242, 239, 0.95); --pb-dark-icon-fg: rgba(49, 108, 70, 0.96); } /* --------------------------------------------------------- 1. KLEINE TITELS / OVERLINES / LINKJES CONSISTENT --------------------------------------------------------- */ html body.pb-mode-dark :is( .pb-vokk-kicker, .pb-vokk-overline, .pb-vokk-section-kicker, .pb-vokk-section-label, .pb-vokk-mini-title, .pb-vokk-small-title, .section-kicker, .section-label, .overline, .eyebrow, .kicker, .subheading, .pretitle ) { color: var(--pb-dark-text-soft) !important; font-size: 13px !important; line-height: 1.35 !important; letter-spacing: 0.16em !important; font-weight: 700 !important; text-transform: uppercase !important; } html body.pb-mode-dark :is( .pb-vokk-trust-label, .pb-vokk-inline-link, .pb-vokk-more-link, .pb-vokk-card-link, .pb-vokk-text-link, .read-more, .more-link, .inline-link ) { color: var(--pb-dark-text-soft) !important; } html body.pb-mode-dark :is( .pb-vokk-trust-label, .pb-vokk-inline-link, .pb-vokk-more-link, .pb-vokk-card-link, .pb-vokk-text-link, .read-more, .more-link, .inline-link ):hover { color: var(--pb-dark-text-strong) !important; } /* --------------------------------------------------------- 2. PROJECTEN / OVER ONS / WAARDERING / CONTACT teksten beter leesbaar --------------------------------------------------------- */ html body.pb-mode-dark :is( .pb-vokk-project-panel, .pb-vokk-project-card, .pb-vokk-project-content, .pb-vokk-project-sidebar, .pb-vokk-about-panel, .pb-vokk-about-card, .pb-vokk-review-panel, .pb-vokk-review-card, .pb-vokk-contact-panel, .pb-vokk-contact-card, .pb-vokk-cta-panel, .pb-vokk-cta-card, [class*="project-panel"], [class*="project-card"], [class*="about-panel"], [class*="about-card"], [class*="review-panel"], [class*="review-card"], [class*="contact-panel"], [class*="contact-card"], [class*="cta-panel"], [class*="cta-card"] ) { color: var(--pb-dark-text) !important; } html body.pb-mode-dark :is( .pb-vokk-project-panel, .pb-vokk-project-card, .pb-vokk-project-content, .pb-vokk-project-sidebar, .pb-vokk-about-panel, .pb-vokk-about-card, .pb-vokk-review-panel, .pb-vokk-review-card, .pb-vokk-contact-panel, .pb-vokk-contact-card, .pb-vokk-cta-panel, .pb-vokk-cta-card, [class*="project-panel"], [class*="project-card"], [class*="about-panel"], [class*="about-card"], [class*="review-panel"], [class*="review-card"], [class*="contact-panel"], [class*="contact-card"], [class*="cta-panel"], [class*="cta-card"] ) :is(h2,h3,h4,h5) { color: var(--pb-dark-text-strong) !important; } html body.pb-mode-dark :is( .pb-vokk-project-panel, .pb-vokk-project-card, .pb-vokk-project-content, .pb-vokk-project-sidebar, .pb-vokk-about-panel, .pb-vokk-about-card, .pb-vokk-review-panel, .pb-vokk-review-card, .pb-vokk-contact-panel, .pb-vokk-contact-card, .pb-vokk-cta-panel, .pb-vokk-cta-card, [class*="project-panel"], [class*="project-card"], [class*="about-panel"], [class*="about-card"], [class*="review-panel"], [class*="review-card"], [class*="contact-panel"], [class*="contact-card"], [class*="cta-panel"], [class*="cta-card"] ) :is(p, li, dd, .text, .description, .excerpt) { color: var(--pb-dark-text) !important; line-height: 1.72 !important; } html body.pb-mode-dark :is( .pb-vokk-project-panel, .pb-vokk-project-card, .pb-vokk-about-panel, .pb-vokk-review-panel, .pb-vokk-contact-panel, [class*="project-panel"], [class*="project-card"], [class*="about-panel"], [class*="review-panel"], [class*="contact-panel"] ) :is( .meta-label, .label, dt, .small-title, .mini-title ) { color: var(--pb-dark-text-soft) !important; } html body.pb-mode-dark :is( .pb-vokk-project-panel, .pb-vokk-project-card, .pb-vokk-about-panel, .pb-vokk-review-panel, .pb-vokk-contact-panel, [class*="project-panel"], [class*="project-card"], [class*="about-panel"], [class*="review-panel"], [class*="contact-panel"] ) :is( .meta-value, .value, dd strong, .stat-value ) { color: var(--pb-dark-text-strong) !important; } html body.pb-mode-dark :is( .pb-vokk-project-panel, .pb-vokk-project-card, .pb-vokk-about-panel, .pb-vokk-review-panel, .pb-vokk-contact-panel, .pb-vokk-cta-panel, [class*="project-panel"], [class*="project-card"], [class*="about-panel"], [class*="review-panel"], [class*="contact-panel"], [class*="cta-panel"] ) a:not(.button):not(.wp-block-button__link):not(.pb-btn):not(.pb-vokk-btn) { color: var(--pb-dark-text-soft) !important; } html body.pb-mode-dark :is( .pb-vokk-project-panel, .pb-vokk-project-card, .pb-vokk-about-panel, .pb-vokk-review-panel, .pb-vokk-contact-panel, .pb-vokk-cta-panel, [class*="project-panel"], [class*="project-card"], [class*="about-panel"], [class*="review-panel"], [class*="contact-panel"], [class*="cta-panel"] ) a:not(.button):not(.wp-block-button__link):not(.pb-btn):not(.pb-vokk-btn):hover { color: var(--pb-dark-text-strong) !important; } /* --------------------------------------------------------- 3. CHECKLISTS / VINKJES / KLEINE ICONFJES sitewide lichtgrijs in dark mode --------------------------------------------------------- */ html body.pb-mode-dark :is( .pb-vokk-checklist, .pb-vokk-points, .pb-vokk-benefits, .pb-vokk-benefits-list, .pb-vokk-service-points, .pb-vokk-review-points, .pb-vokk-about-points, .pb-vokk-project-points, .pb-vokk-contact-points, .checklist, .benefits-list, .service-points, .review-points, .about-points, .project-points, .contact-points, [class*="checklist"], [class*="benefits"], [class*="points"] ) li { color: var(--pb-dark-text) !important; } html body.pb-mode-dark :is( .pb-vokk-checklist, .pb-vokk-points, .pb-vokk-benefits, .pb-vokk-benefits-list, .pb-vokk-service-points, .pb-vokk-review-points, .pb-vokk-about-points, .pb-vokk-project-points, .pb-vokk-contact-points, .checklist, .benefits-list, .service-points, .review-points, .about-points, .project-points, .contact-points, [class*="checklist"], [class*="benefits"], [class*="points"] ) :is( .check, .checkmark, .icon-check, .tick, [class*="check"], [class*="tick"], svg, i ) { color: var(--pb-dark-text-soft) !important; fill: currentColor !important; stroke: currentColor !important; opacity: 1 !important; } html body.pb-mode-dark :is( .pb-vokk-checklist, .pb-vokk-points, .pb-vokk-benefits, .pb-vokk-benefits-list, .pb-vokk-service-points, .pb-vokk-review-points, .pb-vokk-about-points, .pb-vokk-project-points, .pb-vokk-contact-points, .checklist, .benefits-list, .service-points, .review-points, .about-points, .project-points, .contact-points, [class*="checklist"], [class*="benefits"], [class*="points"] ) li::before { color: var(--pb-dark-text-soft) !important; opacity: 1 !important; } /* --------------------------------------------------------- 4. KAART-ICONEN HERSTELLEN geen witte blokjes maar echte iconen --------------------------------------------------------- */ html body.pb-mode-dark :is( .pb-vokk-usp-card, .pb-vokk-benefit-card, .pb-vokk-feature-card, .pb-vokk-value-card, .pb-vokk-step-card, .pb-vokk-why-card, .pb-vokk-card, .vokk-usp-card, .vokk-benefit-card, .vokk-feature-card, .vokk-value-card, .vokk-step-card, .vokk-why-card, .vokk-card ) :is( .pb-vokk-card-icon, .pb-vokk-icon-wrap, .pb-vokk-icon-badge, .pb-vokk-feature-icon, .pb-vokk-benefit-icon, .pb-vokk-value-icon, .pb-vokk-step-icon, .pb-vokk-usp-icon, .vokk-card-icon, .vokk-icon-wrap, .vokk-icon-badge, .feature-icon, .benefit-icon, .value-icon, .step-icon, .usp-icon, .card-icon, .icon-wrap ) { width: 64px !important; height: 64px !important; min-width: 64px !important; min-height: 64px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 999px !important; background: var(--pb-dark-icon-bg) !important; border: 1px solid rgba(255,255,255,0.10) !important; box-shadow: none !important; color: var(--pb-dark-icon-fg) !important; opacity: 1 !important; overflow: visible !important; } html body.pb-mode-dark :is( .pb-vokk-usp-card, .pb-vokk-benefit-card, .pb-vokk-feature-card, .pb-vokk-value-card, .pb-vokk-step-card, .pb-vokk-why-card, .pb-vokk-card, .vokk-usp-card, .vokk-benefit-card, .vokk-feature-card, .vokk-value-card, .vokk-step-card, .vokk-why-card, .vokk-card ) :is( .pb-vokk-card-icon, .pb-vokk-icon-wrap, .pb-vokk-icon-badge, .pb-vokk-feature-icon, .pb-vokk-benefit-icon, .pb-vokk-value-icon, .pb-vokk-step-icon, .pb-vokk-usp-icon, .vokk-card-icon, .vokk-icon-wrap, .vokk-icon-badge, .feature-icon, .benefit-icon, .value-icon, .step-icon, .usp-icon, .card-icon, .icon-wrap ) :is(svg, i, em, [class*="icon-"]::before, [class^="icon-"]::before) { color: var(--pb-dark-icon-fg) !important; fill: currentColor !important; stroke: currentColor !important; font-size: 20px !important; line-height: 1 !important; opacity: 1 !important; } html body.pb-mode-dark :is( .pb-vokk-usp-card, .pb-vokk-benefit-card, .pb-vokk-feature-card, .pb-vokk-value-card, .pb-vokk-step-card, .pb-vokk-why-card, .pb-vokk-card, .vokk-usp-card, .vokk-benefit-card, .vokk-feature-card, .vokk-value-card, .vokk-step-card, .vokk-why-card, .vokk-card ) :is( .pb-vokk-card-icon, .pb-vokk-icon-wrap, .pb-vokk-icon-badge, .pb-vokk-feature-icon, .pb-vokk-benefit-icon, .pb-vokk-value-icon, .pb-vokk-step-icon, .pb-vokk-usp-icon, .vokk-card-icon, .vokk-icon-wrap, .vokk-icon-badge, .feature-icon, .benefit-icon, .value-icon, .step-icon, .usp-icon, .card-icon, .icon-wrap ) svg { width: 20px !important; height: 20px !important; display: block !important; } html body.pb-mode-dark :is( .pb-vokk-usp-card, .pb-vokk-benefit-card, .pb-vokk-feature-card, .vokk-usp-card, .vokk-benefit-card, .vokk-feature-card ) { padding-top: 34px !important; } html body.pb-mode-dark :is( .pb-vokk-usp-card, .pb-vokk-benefit-card, .pb-vokk-feature-card, .vokk-usp-card, .vokk-benefit-card, .vokk-feature-card ) :is( .pb-vokk-card-icon, .pb-vokk-icon-wrap, .pb-vokk-icon-badge, .vokk-card-icon, .vokk-icon-wrap, .vokk-icon-badge, .card-icon, .icon-wrap ) { margin: 0 auto 20px auto !important; } /* --------------------------------------------------------- 5. DIENSTEN BLOK hover niet wit maar lichtgroen / donkerder --------------------------------------------------------- */ html body.pb-mode-dark :is( .pb-vokk-services-list, .pb-vokk-service-list, .vokk-services-list, .services-list ) :is( .pb-vokk-service-card, .service-card, .service-row, .pb-vokk-service-item, .service-item ) { background: var(--pb-dark-surface) !important; border-color: var(--pb-dark-line-soft) !important; } html body.pb-mode-dark :is( .pb-vokk-services-list, .pb-vokk-service-list, .vokk-services-list, .services-list ) :is( .pb-vokk-service-card, .service-card, .service-row, .pb-vokk-service-item, .service-item ):is(:hover, :focus-within, .is-active, .active, .current) { background: var(--pb-dark-hover-green) !important; border-color: var(--pb-dark-line) !important; box-shadow: none !important; } html body.pb-mode-dark :is( .pb-vokk-services-list, .pb-vokk-service-list, .vokk-services-list, .services-list ) :is( .pb-vokk-service-card, .service-card, .service-row, .pb-vokk-service-item, .service-item ) :is(h3,h4,.title,.service-title) { color: var(--pb-dark-text-strong) !important; } html body.pb-mode-dark :is( .pb-vokk-services-list, .pb-vokk-service-list, .vokk-services-list, .services-list ) :is( .pb-vokk-service-card, .service-card, .service-row, .pb-vokk-service-item, .service-item ) :is(p,.text,.description,.excerpt) { color: var(--pb-dark-text) !important; } html body.pb-mode-dark :is( .pb-vokk-services-list, .pb-vokk-service-list, .vokk-services-list, .services-list ) :is( .pb-vokk-service-card, .service-card, .service-row, .pb-vokk-service-item, .service-item ) :is( .pb-vokk-service-number, .service-number, [class*="service-number"] ) { color: var(--pb-dark-text-soft) !important; opacity: 1 !important; font-weight: 700 !important; } /* --------------------------------------------------------- 6. CTA / REVIEWS / CONTACT extra leesbaarheid --------------------------------------------------------- */ html body.pb-mode-dark :is( .pb-vokk-cta-panel, .pb-vokk-cta-card, .pb-vokk-review-panel, .pb-vokk-review-card, .pb-vokk-contact-panel, .pb-vokk-contact-card, [class*="cta-panel"], [class*="cta-card"], [class*="review-panel"], [class*="review-card"], [class*="contact-panel"], [class*="contact-card"] ) { box-shadow: none !important; } html body.pb-mode-dark :is( .pb-vokk-cta-panel, .pb-vokk-cta-card, .pb-vokk-review-panel, .pb-vokk-review-card, .pb-vokk-contact-panel, .pb-vokk-contact-card, [class*="cta-panel"], [class*="cta-card"], [class*="review-panel"], [class*="review-card"], [class*="contact-panel"], [class*="contact-card"] ) :is( .subtext, .note, .muted, small ) { color: var(--pb-dark-text-soft) !important; } /* --------------------------------------------------------- 7. FOUTE HARDE WITTE CONTRASTEN UITZETTEN --------------------------------------------------------- */ html body.pb-mode-dark :is( .pb-vokk-service-card, .service-card, .pb-vokk-project-card, .pb-vokk-review-card, .pb-vokk-about-card, .pb-vokk-contact-card, [class*="service-card"], [class*="project-card"], [class*="review-card"], [class*="about-card"], [class*="contact-card"] ):hover { box-shadow: none !important; } /* PB DARK FINAL CONTENT POLISH END */ /* PB DARK PROJECT META CONTRAST START */ @media screen and (min-width: 969px) { html body.pb-mode-dark .vokk-project-featured :is( .vokk-project-detail, .vokk-project-meta-item, .vokk-project-info-item ) :is( strong, span:last-child, dd, .value, .meta-value ) { color: rgba(238,242,245,.92) !important; opacity: 1 !important; } html body.pb-mode-dark .vokk-project-featured :is( .vokk-project-detail, .vokk-project-meta-item, .vokk-project-info-item ) :is( small, dt, .label, .meta-label ) { color: rgba(220,226,231,.66) !important; opacity: 1 !important; } } /* PB DARK PROJECT META CONTRAST END */ /* PB DARK CARD ICON COLOR FIX START */ @media screen and (min-width: 969px) { html body.pb-mode-dark :is( .pb-vokk-benefit-icon, .pb-vokk-process-icon, .pb-vokk-card-icon, .pb-vokk-icon-wrap, .pb-vokk-icon-badge, .vokk-card-icon, .vokk-icon-wrap, .vokk-icon-badge, .benefit-icon, .feature-icon, .value-icon, .step-icon, .usp-icon, .card-icon, .icon-wrap ) { background: rgba(238,243,239,.96) !important; color: var(--pb-primary) !important; border-color: color-mix( in srgb, var(--pb-primary) 18%, transparent ) !important; } html body.pb-mode-dark :is( .pb-vokk-benefit-icon, .pb-vokk-process-icon, .pb-vokk-card-icon, .pb-vokk-icon-wrap, .pb-vokk-icon-badge, .vokk-card-icon, .vokk-icon-wrap, .vokk-icon-badge, .benefit-icon, .feature-icon, .value-icon, .step-icon, .usp-icon, .card-icon, .icon-wrap ) :is( svg, i ) { color: var(--pb-primary) !important; stroke: var(--pb-primary) !important; opacity: 1 !important; } html body.pb-mode-dark :is( .pb-vokk-benefit-icon, .pb-vokk-process-icon, .pb-vokk-card-icon, .pb-vokk-icon-wrap, .pb-vokk-icon-badge, .vokk-card-icon, .vokk-icon-wrap, .vokk-icon-badge, .benefit-icon, .feature-icon, .value-icon, .step-icon, .usp-icon, .card-icon, .icon-wrap ) svg * { stroke: var(--pb-primary) !important; } } /* PB DARK CARD ICON COLOR FIX END */ /* PB BUSINESS REVIEWS DARK FINAL START */ /* * ============================================================ * ZAKELIJK + DARK * * Contract: * - ongewenste 3px outlines weg * - bestaande echte 1px borders blijven bestaan * - geen wijziging aan spacing / typografie / achtergronden * ============================================================ */ body.pb-layout-pack-business.pb-mode-dark .vokk-reviews-page, body.pb-layout-pack-business.pb-mode-dark .vokk-reviews-summary, body.pb-layout-pack-business.pb-mode-dark .vokk-reviews-summary-copy, body.pb-layout-pack-business.pb-mode-dark .vokk-reviews-list, body.pb-layout-pack-business.pb-mode-dark .vokk-review-card, body.pb-layout-pack-business.pb-mode-dark .vokk-reviews-score, body.pb-layout-pack-business.pb-mode-dark .vokk-reviews-trust, body.pb-layout-pack-business.pb-mode-dark .vokk-reviews-trust-item, body.pb-layout-pack-business.pb-mode-dark .vokk-reviews-wordpress-ready, body.pb-layout-pack-business.pb-mode-dark .vokk-reviews-wordpress-box, body.pb-layout-pack-business.pb-mode-dark .vokk-reviews-wordpress-list, body.pb-layout-pack-business.pb-mode-dark .vokk-reviews-wordpress-item { outline: none !important; outline-width: 0 !important; outline-style: none !important; outline-color: transparent !important; } /* * ============================================================ * LICHTE REVIEW-CHECKLIST * * De lichte achtergrond blijft bestaan. * Alleen de tekst moet daar donker zijn. * ============================================================ */ body.pb-layout-pack-business.pb-mode-dark .vokk-reviews-wordpress-list { color: var(--pb-readable-text) !important; } body.pb-layout-pack-business.pb-mode-dark .vokk-reviews-wordpress-list .vokk-reviews-wordpress-item { color: var(--pb-readable-text) !important; } /* * Eventuele tekstnodes/spans binnen een item erven dezelfde * donkere kleur. */ body.pb-layout-pack-business.pb-mode-dark .vokk-reviews-wordpress-list .vokk-reviews-wordpress-item span, body.pb-layout-pack-business.pb-mode-dark .vokk-reviews-wordpress-list .vokk-reviews-wordpress-item strong { color: inherit !important; } /* * Checkmarks blijven paletkleur. */ body.pb-layout-pack-business.pb-mode-dark .vokk-reviews-wordpress-item::before { color: var(--vokk-primary) !important; } /* * ============================================================ * HOMEPAGE — VERTROUWD DOOR ONZE KLANTEN * * Zelfde ongewenste outline-probleem voorkomen. * Echte borders/scheidingslijnen NIET verwijderen. * ============================================================ */ body.pb-layout-pack-business.pb-mode-dark .pb-vokk-trust, body.pb-layout-pack-business.pb-mode-dark .pb-vokk-trust-box, body.pb-layout-pack-business.pb-mode-dark .pb-vokk-trust-item { outline: none !important; outline-width: 0 !important; outline-style: none !important; outline-color: transparent !important; } /* * Ook Zo werken wij beschermen tegen dezelfde globale * 3px-outline zonder de bestaande layout aan te passen. */ body.pb-layout-pack-business.pb-mode-dark .pb-vokk-process, body.pb-layout-pack-business.pb-mode-dark .pb-vokk-process-grid, body.pb-layout-pack-business.pb-mode-dark .pb-vokk-process-item { outline: none !important; outline-width: 0 !important; outline-style: none !important; outline-color: transparent !important; } /* PB BUSINESS REVIEWS DARK FINAL END */ /* PB WAARDERING DARK LIST BACKGROUND FIX START */ body.pb-layout-pack-business.pb-template-page-waardering.pb-mode-dark .vokk-reviews-wordpress-list { background: var(--pb-pack-surface) !important; border-left: 1px solid var(--pb-business-line) !important; color: var(--pb-dark-text) !important; } body.pb-layout-pack-business.pb-template-page-waardering.pb-mode-dark .vokk-reviews-wordpress-item { color: var(--pb-dark-text) !important; } body.pb-layout-pack-business.pb-template-page-waardering.pb-mode-dark .vokk-reviews-wordpress-item::before { color: var(--vokk-primary) !important; } /* PB WAARDERING DARK LIST BACKGROUND FIX END */ /* PB WAARDERING TRUST LINES REMOVE START */ body.pb-layout-pack-business.pb-template-page-waardering.pb-mode-dark .vokk-reviews-trust { border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; outline: none !important; box-shadow: none !important; } body.pb-layout-pack-business.pb-template-page-waardering.pb-mode-dark .vokk-reviews-trust-item { border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; outline: none !important; box-shadow: none !important; } /* PB WAARDERING TRUST LINES REMOVE END */ /* PB WAARDERING TRUST BORDER FINAL START */ body.pb-layout-pack-business.pb-template-page-waardering.pb-mode-dark .vokk-reviews-trust { border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; outline: none !important; box-shadow: none !important; } /* eerste vak zonder linker lijn */ body.pb-layout-pack-business.pb-template-page-waardering.pb-mode-dark .vokk-reviews-trust-item:first-child { border-left: 0 !important; } /* binnenste verticale lijnen juist behouden */ body.pb-layout-pack-business.pb-template-page-waardering.pb-mode-dark .vokk-reviews-trust-item + .vokk-reviews-trust-item { border-left: 1px solid var(--pb-business-line) !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; outline: none !important; box-shadow: none !important; } /* PB WAARDERING TRUST BORDER FINAL END */ /* PB WAARDERING BORDER ZERO FINAL START */ body.pb-layout-pack-business.pb-template-page-waardering.pb-mode-dark .vokk-reviews-trust { border-top: 0 !important; border-left: 0 !important; } /* PB WAARDERING BORDER ZERO FINAL END */ /* PB DARK TRUST SMALL CONTRAST START */ body.pb-mode-dark .pb-vokk-trust-small { color: var(--pb-dark-muted) !important; } /* PB DARK TRUST SMALL CONTRAST END */ /* PB DARK TRUST SMALL SIZE START */ body.pb-mode-dark .pb-vokk-trust-small { font-size: 10px !important; } /* PB DARK TRUST SMALL SIZE END */ /* PB DARK HARDLOCK BENEFIT TRANSPARENT START */ @media screen and (min-width: 969px) { /* * Exact homepage "Waarom kiezen"-icoon. * Deze regel staat bewust in vokk-dark-hardlock.css, * NA de algemene witte icon-hardlock. */ html body.pb-mode-dark .pb-vokk-why .pb-vokk-benefit .pb-vokk-benefit-icon { background: transparent !important; background-color: transparent !important; color: var(--pb-primary) !important; border-color: color-mix( in srgb, var(--pb-primary) 26%, transparent ) !important; box-shadow: none !important; } } /* PB DARK HARDLOCK BENEFIT TRANSPARENT END */ /* PB DARK PROCESS FINAL ALIGN START */ @media screen and (min-width: 1025px) { /* * Exact component: * .pb-vokk-process-item */ html body.pb-mode-dark .pb-vokk-process .pb-vokk-process-item { position: relative !important; box-sizing: border-box !important; text-align: left !important; /* * Ruimte bovenin voor nummer + icoon. */ padding: 72px 32px 36px 32px !important; } /* * 01 / 02 / 03 linksboven. */ html body.pb-mode-dark .pb-vokk-process .pb-vokk-process-number { position: absolute !important; top: 22px !important; left: 24px !important; right: auto !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; text-align: left !important; transform: none !important; } /* * Icoon rechtsboven. * Volledig transparant: geen witte cirkel en geen rand. */ html body.pb-mode-dark .pb-vokk-process .pb-vokk-process-icon { position: absolute !important; top: 18px !important; right: 24px !important; left: auto !important; width: 36px !important; height: 36px !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; background: transparent !important; background-color: transparent !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; color: var(--pb-primary) !important; transform: none !important; } /* * SVG zelf compact houden. */ html body.pb-mode-dark .pb-vokk-process .pb-vokk-process-icon svg { width: 19px !important; height: 19px !important; margin: 0 !important; fill: none !important; stroke: currentColor !important; } /* * Titel links. * Typografie zelf NIET wijzigen. */ html body.pb-mode-dark .pb-vokk-process .pb-vokk-process-item h3 { display: block !important; width: 100% !important; max-width: none !important; margin: 0 0 14px 0 !important; padding: 0 48px 0 0 !important; text-align: left !important; transform: none !important; } /* * Tekst links. */ html body.pb-mode-dark .pb-vokk-process .pb-vokk-process-item > p { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 20px 0 0 !important; text-align: left !important; transform: none !important; } } /* PB DARK PROCESS FINAL ALIGN END */ /* PB DARK PROCESS EQUAL HEIGHT START */ @media screen and (min-width: 1025px) { html body.pb-mode-dark .pb-vokk-process .pb-vokk-process-grid { align-items: stretch !important; } html body.pb-mode-dark .pb-vokk-process .pb-vokk-process-item { height: 100% !important; min-height: 320px !important; } } /* PB DARK PROCESS EQUAL HEIGHT END */ /* PB CURRENT DARK WHY SEAMLESS HARDLOCK START */ @media screen and (min-width: 1025px) { /* * Alleen homepage + Huidige uitstraling + Dark. * * De Why-items krijgen GEEN eigen kaartvlak meer. * De achtergrond/gloed van .pb-vokk-why loopt erdoorheen. */ html body.pb-mode-dark.pb-template-front-page.pb-layout-pack-current .pb-vokk-why .pb-vokk-benefits { background: transparent !important; border: 0 !important; box-shadow: none !important; } html body.pb-mode-dark.pb-template-front-page.pb-layout-pack-current .pb-vokk-why .pb-vokk-benefit { background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-color: transparent !important; outline: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* * Eventuele oude card-lagen volledig uitschakelen. */ html body.pb-mode-dark.pb-template-front-page.pb-layout-pack-current .pb-vokk-why .pb-vokk-benefit::before, html body.pb-mode-dark.pb-template-front-page.pb-layout-pack-current .pb-vokk-why .pb-vokk-benefit::after { content: none !important; display: none !important; background: none !important; border: 0 !important; box-shadow: none !important; } } /* PB CURRENT DARK WHY SEAMLESS HARDLOCK END */