/* ========================================================================== VOKK MINIMAL — STUDIO V3 ALLEEN: body.pb-layout-pack-minimal desktop >= 1025px NIET: - Current - Modern - Premium - Business - mobiel - tablet - typography Kleur komt altijd uit het gekozen VOKK-palet. ========================================================================== */ @media screen and (min-width:1025px) { /* ---------------------------------------------------------------------- DESIGN TOKENS ---------------------------------------------------------------------- */ html body.pb-layout-pack-minimal { --min-accent:var(--pb-primary); --min-accent-light:var(--pb-primary-light); --min-ink: color-mix( in srgb, var(--pb-darker) 97%, var(--pb-primary) 3% ); --min-deep: color-mix( in srgb, var(--pb-dark) 96%, var(--pb-primary) 4% ); --min-page: color-mix( in srgb, var(--pb-primary) 1.2%, white ); --min-surface: color-mix( in srgb, var(--pb-primary) 3.5%, white ); --min-surface-2: color-mix( in srgb, var(--pb-primary) 6%, white ); --min-text:var(--pb-text); --min-muted:var(--pb-muted); --min-line: color-mix( in srgb, var(--pb-primary) 11%, rgba(15,23,42,.08) ); --min-line-strong: color-mix( in srgb, var(--pb-primary) 19%, rgba(15,23,42,.10) ); --min-radius:14px; } /* MEDIUM */ html body.pb-layout-pack-minimal.pb-mode-medium:not(.pb-mode-light-page):not(.pb-mode-dark) { --min-page: color-mix( in srgb, var(--pb-dark) 4.5%, white ); --min-surface: color-mix( in srgb, var(--pb-primary) 7%, white ); --min-surface-2: color-mix( in srgb, var(--pb-primary) 10%, white ); --min-line: color-mix( in srgb, var(--pb-primary) 17%, transparent ); } /* DARK */ html body.pb-layout-pack-minimal.pb-mode-dark { --min-page: color-mix( in srgb, var(--pb-darker) 97%, var(--pb-primary) 3% ); --min-surface: color-mix( in srgb, var(--pb-dark) 91%, var(--pb-primary) 9% ); --min-surface-2: color-mix( in srgb, var(--pb-dark) 82%, var(--pb-primary) 18% ); --min-text:var(--pb-dark-text); --min-muted:var(--pb-dark-muted); --min-line: color-mix( in srgb, var(--pb-primary-light) 14%, transparent ); --min-line-strong: color-mix( in srgb, var(--pb-primary-light) 23%, transparent ); } /* ---------------------------------------------------------------------- BASIS — GEEN VOKK CARD-WALL ---------------------------------------------------------------------- */ html body.pb-layout-pack-minimal :is( .pb-vokk-light, .vokk-services-page, .vokk-about-page, .vokk-projects-page, .vokk-reviews-page, .vokk-contact-page, .vokk-detail-page, .vokk-default-page ) { background:var(--min-page)!important; background-image:none!important; color:var(--min-text)!important; } html body.pb-layout-pack-minimal :is( .pb-vokk-why, .pb-vokk-services, .pb-vokk-trust, .pb-vokk-process, .vokk-services-intro, .vokk-services-list, .vokk-service-benefits, .vokk-about-intro, .vokk-about-story, .vokk-about-values, .vokk-about-experience, .vokk-projects-intro, .vokk-projects-showcase, .vokk-project-featured, .vokk-project-results, .vokk-reviews-summary, .vokk-reviews-list, .vokk-reviews-trust, .vokk-reviews-wordpress-ready, .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 ) { background:var(--min-page)!important; background-image:none!important; box-shadow:none!important; } /* ---------------------------------------------------------------------- CONTENT HERO Eén rustige editorial canvas. Beeld flush rechts. Geen donkere half-screen hero. ---------------------------------------------------------------------- */ html body.pb-layout-pack-minimal:not(.pb-template-front-page) .pb-content-hero { position:relative!important; overflow:hidden!important; min-height:345px!important; background:var(--min-surface)!important; background-image:none!important; border:0!important; border-bottom:1px solid var(--min-line)!important; box-shadow:none!important; color:var(--min-text)!important; } html body.pb-layout-pack-minimal:not(.pb-template-front-page) .pb-content-hero::before, html body.pb-layout-pack-minimal:not(.pb-template-front-page) .pb-content-hero::after { content:none!important; display:none!important; } html body.pb-layout-pack-minimal:not(.pb-template-front-page) .pb-content-hero-image { position:absolute!important; top:0!important; right:0!important; bottom:0!important; width:58%!important; height:100%!important; object-fit:cover!important; border:0!important; border-radius:0!important; box-shadow:none!important; } html body.pb-layout-pack-minimal:not(.pb-template-front-page) .pb-content-hero > :not(.pb-content-hero-image) { position:relative!important; z-index:2!important; } html body.pb-layout-pack-minimal:not(.pb-template-front-page) .pb-content-hero :is(h1,h2,h3) { color:var(--min-text)!important; text-shadow:none!important; } html body.pb-layout-pack-minimal:not(.pb-template-front-page) .pb-content-hero p { color:var(--min-muted)!important; text-shadow:none!important; } html body.pb-layout-pack-minimal:not(.pb-template-front-page) .pb-content-hero :is( .vokk-services-eyebrow, .vokk-about-eyebrow, .vokk-projects-eyebrow, .vokk-reviews-eyebrow, .vokk-contact-eyebrow, .vokk-detail-eyebrow ) { color:var(--min-accent)!important; } /* ---------------------------------------------------------------------- HOMEPAGE BENEFITS Open 2x2 grid, niet vier VOKK-kaarten. ---------------------------------------------------------------------- */ html body.pb-layout-pack-minimal .pb-vokk-benefits { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; max-width:1080px!important; margin-left:auto!important; margin-right:auto!important; gap:0!important; background:transparent!important; border:0!important; border-top:1px solid var(--min-line)!important; } html body.pb-layout-pack-minimal .pb-vokk-benefit { min-height:190px!important; padding:46px 48px!important; background:transparent!important; background-image:none!important; border:0!important; border-bottom:1px solid var(--min-line)!important; border-radius:0!important; box-shadow:none!important; } html body.pb-layout-pack-minimal .pb-vokk-benefit:nth-child(even) { border-left:1px solid var(--min-line)!important; } html body.pb-layout-pack-minimal .pb-vokk-benefit-icon { background:transparent!important; color:var(--min-accent)!important; border:0!important; box-shadow:none!important; } /* ---------------------------------------------------------------------- HOMEPAGE SERVICES Editorial magazine-layout. Eén dienst per rij. ---------------------------------------------------------------------- */ html body.pb-layout-pack-minimal .pb-vokk-service-grid { display:grid!important; grid-template-columns:1fr!important; max-width:1160px!important; margin-left:auto!important; margin-right:auto!important; gap:0!important; border-top:1px solid var(--min-line)!important; } html body.pb-layout-pack-minimal .pb-vokk-service-card { position:relative!important; min-height:360px!important; overflow:hidden!important; background:transparent!important; border:0!important; border-bottom:1px solid var(--min-line)!important; border-radius:0!important; box-shadow:none!important; } html body.pb-layout-pack-minimal .pb-vokk-service-card::after { content:none!important; display:none!important; } html body.pb-layout-pack-minimal .pb-vokk-service-card .pb-service-bg { position:absolute!important; top:34px!important; bottom:34px!important; width:48%!important; height:calc(100% - 68px)!important; object-fit:cover!important; border-radius:var(--min-radius)!important; opacity:1!important; transform:none!important; box-shadow:none!important; } html body.pb-layout-pack-minimal .pb-vokk-service-card:nth-child(odd) .pb-service-bg { left:0!important; right:auto!important; } html body.pb-layout-pack-minimal .pb-vokk-service-card:nth-child(even) .pb-service-bg { left:auto!important; right:0!important; } html body.pb-layout-pack-minimal .pb-vokk-service-content { position:absolute!important; top:0!important; bottom:0!important; width:43%!important; display:flex!important; flex-direction:column!important; justify-content:center!important; align-items:flex-start!important; padding:44px 0!important; background:transparent!important; box-shadow:none!important; transform:none!important; } html body.pb-layout-pack-minimal .pb-vokk-service-card:nth-child(odd) .pb-vokk-service-content { right:0!important; left:auto!important; } html body.pb-layout-pack-minimal .pb-vokk-service-card:nth-child(even) .pb-vokk-service-content { left:0!important; right:auto!important; } html body.pb-layout-pack-minimal .pb-vokk-service-content :is(h2,h3,h4) { color:var(--min-text)!important; } html body.pb-layout-pack-minimal .pb-vokk-service-content p { color:var(--min-muted)!important; opacity:1!important; } html body.pb-layout-pack-minimal .pb-vokk-service-more { color:var(--min-accent)!important; opacity:1!important; transform:none!important; } /* ---------------------------------------------------------------------- PROCESS Verticale product/timeline compositie. ---------------------------------------------------------------------- */ html body.pb-layout-pack-minimal .pb-vokk-process-grid { display:grid!important; grid-template-columns:1fr!important; max-width:900px!important; margin-left:auto!important; margin-right:auto!important; gap:0!important; border:0!important; border-top:1px solid var(--min-line)!important; } html body.pb-layout-pack-minimal .pb-vokk-process-item { display:grid!important; grid-template-columns:96px minmax(0,1fr)!important; align-items:center!important; min-height:145px!important; padding:30px 0!important; background:transparent!important; border:0!important; border-bottom:1px solid var(--min-line)!important; border-radius:0!important; box-shadow:none!important; } html body.pb-layout-pack-minimal .pb-vokk-process-item + .pb-vokk-process-item { border-left:0!important; } html body.pb-layout-pack-minimal .pb-vokk-process-line { display:none!important; } html body.pb-layout-pack-minimal :is( .pb-vokk-process-number, .pb-vokk-process-icon ) { background:transparent!important; color:var(--min-accent)!important; border:0!important; box-shadow:none!important; } /* ---------------------------------------------------------------------- TRUST Data-strip, geen gekleurde card. ---------------------------------------------------------------------- */ html body.pb-layout-pack-minimal .pb-vokk-trust { background:transparent!important; border:0!important; } html body.pb-layout-pack-minimal .pb-vokk-trust-box { max-width:1120px!important; margin-left:auto!important; margin-right:auto!important; background:transparent!important; border:0!important; border-top:1px solid var(--min-line)!important; border-bottom:1px solid var(--min-line)!important; border-radius:0!important; box-shadow:none!important; } html body.pb-layout-pack-minimal .pb-vokk-trust-item { background:transparent!important; box-shadow:none!important; } /* ====================================================================== DIENSTEN PAGINA ====================================================================== */ html body.pb-layout-pack-minimal .vokk-services-list { max-width:1080px!important; margin-left:auto!important; margin-right:auto!important; } html body.pb-layout-pack-minimal .vokk-service-row { padding:80px 0!important; background:transparent!important; border:0!important; border-top:1px solid var(--min-line)!important; border-radius:0!important; box-shadow:none!important; } html body.pb-layout-pack-minimal .vokk-service-row:last-child { border-bottom:1px solid var(--min-line)!important; } html body.pb-layout-pack-minimal .vokk-service-benefits-grid { gap:0!important; background:transparent!important; border:0!important; border-top:1px solid var(--min-line)!important; border-bottom:1px solid var(--min-line)!important; } html body.pb-layout-pack-minimal .vokk-service-benefit { background:transparent!important; border:0!important; border-radius:0!important; box-shadow:none!important; } html body.pb-layout-pack-minimal .vokk-service-benefit + .vokk-service-benefit { border-left:1px solid var(--min-line)!important; } /* ====================================================================== OVER ONS ====================================================================== */ html body.pb-layout-pack-minimal .vokk-about-story-grid { background:transparent!important; border:0!important; border-radius:0!important; box-shadow:none!important; gap:70px!important; align-items:center!important; } html body.pb-layout-pack-minimal .vokk-about-story-grid img { border-radius:var(--min-radius)!important; } html body.pb-layout-pack-minimal .vokk-about-values-grid { display:grid!important; grid-template-columns:1fr!important; max-width:900px!important; margin-left:auto!important; margin-right:auto!important; gap:0!important; border:0!important; border-top:1px solid var(--min-line)!important; } html body.pb-layout-pack-minimal .vokk-about-value { padding:38px 0!important; background:transparent!important; border:0!important; border-bottom:1px solid var(--min-line)!important; border-radius:0!important; box-shadow:none!important; } html body.pb-layout-pack-minimal .vokk-about-value + .vokk-about-value { border-left:0!important; } /* ====================================================================== PROJECTEN ====================================================================== */ html body.pb-layout-pack-minimal .vokk-projects-showcase { display:grid!important; grid-template-columns:1fr!important; max-width:1120px!important; margin-left:auto!important; margin-right:auto!important; gap:56px!important; } html body.pb-layout-pack-minimal .vokk-project-card { background:transparent!important; border:0!important; border-bottom:1px solid var(--min-line)!important; border-radius:0!important; box-shadow:none!important; } html body.pb-layout-pack-minimal .vokk-project-featured-grid { max-width:1120px!important; margin-left:auto!important; margin-right:auto!important; background:transparent!important; border:0!important; gap:64px!important; box-shadow:none!important; } html body.pb-layout-pack-minimal .vokk-project-featured-grid img { border-radius:var(--min-radius)!important; } html body.pb-layout-pack-minimal .vokk-project-results-grid { gap:0!important; border:0!important; border-top:1px solid var(--min-line)!important; border-bottom:1px solid var(--min-line)!important; } html body.pb-layout-pack-minimal .vokk-project-result { background:transparent!important; border:0!important; border-radius:0!important; box-shadow:none!important; } /* ====================================================================== WAARDERING Alle typische review-cards weg. ====================================================================== */ html body.pb-layout-pack-minimal .vokk-reviews-summary { background:transparent!important; border:0!important; box-shadow:none!important; } html body.pb-layout-pack-minimal .vokk-reviews-score { background:transparent!important; border:0!important; border-radius:0!important; box-shadow:none!important; } html body.pb-layout-pack-minimal .vokk-reviews-grid { display:grid!important; grid-template-columns:1fr!important; max-width:920px!important; margin-left:auto!important; margin-right:auto!important; gap:0!important; border:0!important; border-top:1px solid var(--min-line)!important; } html body.pb-layout-pack-minimal .vokk-review-card { padding:50px 0!important; background:transparent!important; border:0!important; border-bottom:1px solid var(--min-line)!important; border-radius:0!important; box-shadow:none!important; } html body.pb-layout-pack-minimal .vokk-reviews-trust { background:transparent!important; border:0!important; border-top:1px solid var(--min-line)!important; border-bottom:1px solid var(--min-line)!important; } html body.pb-layout-pack-minimal .vokk-reviews-trust-item { background:transparent!important; border:0!important; box-shadow:none!important; } html body.pb-layout-pack-minimal .vokk-reviews-trust-item + .vokk-reviews-trust-item { border-left:1px solid var(--min-line)!important; } html body.pb-layout-pack-minimal .vokk-reviews-wordpress-box { background:transparent!important; border:0!important; border-top:1px solid var(--min-line)!important; border-bottom:1px solid var(--min-line)!important; border-radius:0!important; box-shadow:none!important; } /* ====================================================================== CONTACT Fix meteen het enorme dode vlak uit jouw screenshot. ====================================================================== */ html body.pb-layout-pack-minimal .vokk-contact-main { min-height:0!important; height:auto!important; padding-bottom:88px!important; } html body.pb-layout-pack-minimal .vokk-contact-main-grid { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr)!important; gap:84px!important; align-items:start!important; } html body.pb-layout-pack-minimal .vokk-contact-info { min-height:0!important; height:auto!important; background:transparent!important; border:0!important; box-shadow:none!important; } html body.pb-layout-pack-minimal .vokk-contact-form-panel { align-self:start!important; min-height:0!important; height:auto!important; background:transparent!important; border:0!important; border-top:1px solid var(--min-line-strong)!important; border-radius:0!important; padding-left:0!important; padding-right:0!important; box-shadow:none!important; } html body.pb-layout-pack-minimal .vokk-contact-detail { padding:24px 0!important; background:transparent!important; border:0!important; border-bottom:1px solid var(--min-line)!important; border-radius:0!important; box-shadow:none!important; } html body.pb-layout-pack-minimal .vokk-contact-detail-icon { background:transparent!important; color:var(--min-accent)!important; border:0!important; box-shadow:none!important; } html body.pb-layout-pack-minimal .vokk-contact-hours { background:transparent!important; border:0!important; border-top:1px solid var(--min-line)!important; border-radius:0!important; box-shadow:none!important; } html body.pb-layout-pack-minimal .vokk-contact-reassurance { background:var(--min-surface)!important; border:0!important; border-top:1px solid var(--min-line)!important; border-bottom:1px solid var(--min-line)!important; box-shadow:none!important; } html body.pb-layout-pack-minimal .vokk-contact-reassurance-item { background:transparent!important; border:0!important; box-shadow:none!important; } html body.pb-layout-pack-minimal .vokk-contact-reassurance-item + .vokk-contact-reassurance-item { border-left:1px solid var(--min-line)!important; } html body.pb-layout-pack-minimal .vokk-contact-extra { padding-top:86px!important; padding-bottom:86px!important; } html body.pb-layout-pack-minimal .vokk-contact-faq-item { padding:24px 0!important; background:transparent!important; border:0!important; border-top:1px solid var(--min-line)!important; border-radius:0!important; box-shadow:none!important; } /* ====================================================================== DETAILPAGINA'S ====================================================================== */ html body.pb-layout-pack-minimal .vokk-detail-benefits { background:transparent!important; border:0!important; border-top:1px solid var(--min-line)!important; border-bottom:1px solid var(--min-line)!important; } html body.pb-layout-pack-minimal .vokk-detail-benefit { background:transparent!important; border:0!important; border-radius:0!important; box-shadow:none!important; } html body.pb-layout-pack-minimal .vokk-detail-benefit + .vokk-detail-benefit { border-left:1px solid var(--min-line)!important; } html body.pb-layout-pack-minimal .vokk-detail-process, html body.pb-layout-pack-minimal .vokk-detail-faq-section { max-width:920px!important; margin-left:auto!important; margin-right:auto!important; } html body.pb-layout-pack-minimal .vokk-detail-step, html body.pb-layout-pack-minimal .vokk-detail-faq-item { padding:30px 0!important; background:transparent!important; border:0!important; border-bottom:1px solid var(--min-line)!important; border-radius:0!important; box-shadow:none!important; } /* ====================================================================== CTA Geen donker VOKK-reclameblok meer. Minimal CTA is een eenvoudige information row. ====================================================================== */ html body.pb-layout-pack-minimal :is( .vokk-services-cta-box, .vokk-about-cta-box, .vokk-projects-cta-box, .vokk-reviews-cta-box, .vokk-detail-cta-box ) { max-width:1120px!important; margin-left:auto!important; margin-right:auto!important; background:transparent!important; background-image:none!important; color:var(--min-text)!important; border:0!important; border-top:1px solid var(--min-line-strong)!important; border-bottom:1px solid var(--min-line-strong)!important; border-radius:0!important; box-shadow:none!important; } html body.pb-layout-pack-minimal :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(--min-text)!important; } html body.pb-layout-pack-minimal :is( .vokk-services-cta-box, .vokk-about-cta-box, .vokk-projects-cta-box, .vokk-reviews-cta-box, .vokk-detail-cta-box ) p { color:var(--min-muted)!important; } html body.pb-layout-pack-minimal :is( .vokk-services-cta-button, .vokk-about-cta-button, .vokk-projects-cta-button, .vokk-reviews-cta-button, .vokk-detail-cta-button ) { background:transparent!important; background-image:none!important; color:var(--min-accent)!important; -webkit-text-fill-color:var(--min-accent)!important; border:1px solid var(--min-line-strong)!important; box-shadow:none!important; } html body.pb-layout-pack-minimal :is( .vokk-services-cta-button, .vokk-about-cta-button, .vokk-projects-cta-button, .vokk-reviews-cta-button, .vokk-detail-cta-button ):hover { background:var(--min-surface-2)!important; } /* ====================================================================== FOOTER Light/Medium krijgt GEEN donker blok meer. Dit maakt Minimal onmiddellijk herkenbaar. ====================================================================== */ html body.pb-layout-pack-minimal:not(.pb-mode-dark) .agencyfooter-block-footer { background:var(--min-surface)!important; background-image:none!important; color:var(--min-text)!important; border:0!important; border-top:1px solid var(--min-line)!important; box-shadow:none!important; } html body.pb-layout-pack-minimal:not(.pb-mode-dark) .agencyfooter-block-footer :is(h2,h3,h4,h5,h6,strong) { color:var(--min-text)!important; } html body.pb-layout-pack-minimal:not(.pb-mode-dark) .agencyfooter-block-footer :is(p,li,span) { color:var(--min-muted)!important; } html body.pb-layout-pack-minimal:not(.pb-mode-dark) .agencyfooter-block-footer a { color:var(--min-text)!important; } html body.pb-layout-pack-minimal:not(.pb-mode-dark) .agencyfooter-block-bottom { border-top:1px solid var(--min-line)!important; color:var(--min-muted)!important; } html body.pb-layout-pack-minimal.pb-mode-dark .agencyfooter-block-footer { background:var(--min-surface)!important; background-image:none!important; border:0!important; border-top:1px solid var(--min-line)!important; box-shadow:none!important; } html body.pb-layout-pack-minimal.pb-mode-dark .agencyfooter-block-footer :is(h2,h3,h4,h5,h6,strong) { color:var(--pb-dark-heading)!important; } html body.pb-layout-pack-minimal.pb-mode-dark .agencyfooter-block-footer :is(p,li,span,a) { color:var(--pb-dark-muted)!important; } /* ====================================================================== DARK HARDLOCK TEGENWERKEN — ALLEEN MINIMAL ====================================================================== */ html body.pb-layout-pack-minimal.pb-mode-dark :is( .vokk-service-row, .vokk-about-value, .vokk-project-card, .vokk-project-result, .vokk-review-card, .vokk-contact-detail, .vokk-contact-faq-item, .vokk-detail-benefit, .vokk-detail-step, .vokk-detail-faq-item ) { background:transparent!important; background-image:none!important; color:var(--min-text)!important; box-shadow:none!important; } } /* PB MINIMAL FOOTER CLEAN FINAL START */ @media screen and (min-width:1025px) { /* * ========================================================== * MINIMAL FOOTER * één vlak, geen bovenlijn, geen offsets, geen pseudo-lijnen * ========================================================== */ html body.pb-layout-pack-minimal .kb-block-agencyfooter-block { position:relative !important; margin:0 !important; border:0 !important; border-top:0 !important; outline:0 !important; box-shadow:none !important; } html body.pb-layout-pack-minimal .kb-block-agencyfooter-block::before, html body.pb-layout-pack-minimal .kb-block-agencyfooter-block::after { content:none !important; display:none !important; } /* * Inner wrapper. */ html body.pb-layout-pack-minimal .kb-block-agencyfooter-block .kb-block-inner { position:relative !important; top:0 !important; transform:none !important; border:0 !important; border-top:0 !important; outline:0 !important; box-shadow:none !important; } /* * Footer zelf. */ html body.pb-layout-pack-minimal .agencyfooter-block-footer { position:relative !important; top:0 !important; transform:none !important; border:0 !important; border-top:0 !important; outline:0 !important; box-shadow:none !important; } /* * Hoofdgrid. */ html body.pb-layout-pack-minimal .agencyfooter-block-grid { position:relative !important; top:0 !important; transform:none !important; border:0 !important; border-top:0 !important; outline:0 !important; box-shadow:none !important; } html body.pb-layout-pack-minimal .agencyfooter-block-grid::before, html body.pb-layout-pack-minimal .agencyfooter-block-grid::after { content:none !important; display:none !important; } /* * Geen bovenlijn op eerste rij/kolommen. */ html body.pb-layout-pack-minimal .agencyfooter-block-grid > div { border-top:0 !important; outline:0 !important; box-shadow:none !important; } /* * Copyright onderaan mag zijn eigen dunne scheiding houden. * Dit is NIET de bovenste footer-lijn. */ html body.pb-layout-pack-minimal .agencyfooter-block-bottom { position:relative !important; top:0 !important; transform:none !important; border-left:0 !important; border-right:0 !important; border-bottom:0 !important; border-top: 1px solid var(--min-line) !important; box-shadow:none !important; } /* * LIGHT + MEDIUM */ html body.pb-layout-pack-minimal:not(.pb-mode-dark) :is( .kb-block-agencyfooter-block, .agencyfooter-block-footer ) { background:var(--min-surface) !important; background-image:none !important; } /* * DARK */ html body.pb-layout-pack-minimal.pb-mode-dark :is( .kb-block-agencyfooter-block, .agencyfooter-block-footer ) { background:var(--min-surface) !important; background-image:none !important; } } /* PB MINIMAL FOOTER CLEAN FINAL END */ /* PB MINIMAL FOOTER EXACT TOP LINE REMOVE START */ @media screen and (min-width: 1025px) { /* * Dit is de lijn direct boven: * Diensten / Service / Informatie */ html body.pb-layout-pack-minimal .agencyfooter-block-grid { border-top: 0 !important; box-shadow: none !important; outline: 0 !important; } html body.pb-layout-pack-minimal .agencyfooter-block-grid::before, html body.pb-layout-pack-minimal .agencyfooter-block-grid::after { content: none !important; display: none !important; border-top: 0 !important; } /* * Als de lijn op de eerste kolommen zit, ook daar uitzetten. */ html body.pb-layout-pack-minimal .agencyfooter-block-grid > div, html body.pb-layout-pack-minimal .agencyfooter-block-grid > * { border-top: 0 !important; box-shadow: none !important; outline: 0 !important; } /* * Alleen de onderste copyright-scheiding mag blijven. */ html body.pb-layout-pack-minimal .agencyfooter-block-bottom { border-top: 1px solid var(--min-line) !important; } } /* PB MINIMAL FOOTER EXACT TOP LINE REMOVE END */ /* PB MINIMAL PROCESS ALL MODES START */ @media screen and (min-width: 1025px) { /* ========================================================== 1. Zelfde blok-opzet voor Minimal Dark / Light / Medium ========================================================== */ html body.pb-layout-pack-minimal.pb-mode-dark .pb-vokk-process, html body.pb-layout-pack-minimal.pb-mode-light-page .pb-vokk-process, html body.pb-layout-pack-minimal.pb-mode-medium:not(.pb-mode-dark):not(.pb-mode-light-page) .pb-vokk-process { padding: 110px 0 120px !important; } html body.pb-layout-pack-minimal.pb-mode-dark .pb-vokk-process { --pb-min-process-bg: color-mix(in srgb, var(--pb-darker) 96%, var(--pb-primary) 4%); --pb-min-process-card: color-mix(in srgb, var(--pb-dark) 84%, var(--pb-primary) 16%); --pb-min-process-line: rgba(255,255,255,.10); --pb-min-process-title: #ffffff; --pb-min-process-copy: rgba(255,255,255,.92); --pb-min-process-kicker: rgba(255,255,255,.86); --pb-min-process-number: var(--pb-primary-light); --pb-min-process-icon: var(--pb-primary-light); } html body.pb-layout-pack-minimal.pb-mode-light-page .pb-vokk-process, html body.pb-layout-pack-minimal.pb-mode-medium:not(.pb-mode-dark):not(.pb-mode-light-page) .pb-vokk-process { --pb-min-process-bg: color-mix(in srgb, var(--pb-primary) 2%, #ffffff); --pb-min-process-card: color-mix(in srgb, var(--pb-primary) 5%, #ffffff); --pb-min-process-line: color-mix(in srgb, var(--pb-primary) 18%, #d7dbe2); --pb-min-process-title: var(--pb-text); --pb-min-process-copy: color-mix(in srgb, var(--pb-text) 84%, transparent); --pb-min-process-kicker: color-mix(in srgb, var(--pb-text) 92%, transparent); --pb-min-process-number: var(--pb-primary); --pb-min-process-icon: var(--pb-primary); } html body.pb-layout-pack-minimal.pb-mode-dark .pb-vokk-process, html body.pb-layout-pack-minimal.pb-mode-light-page .pb-vokk-process, html body.pb-layout-pack-minimal.pb-mode-medium:not(.pb-mode-dark):not(.pb-mode-light-page) .pb-vokk-process { background: var(--pb-min-process-bg) !important; } /* Grid */ html body.pb-layout-pack-minimal.pb-mode-dark .pb-vokk-process .pb-vokk-process-grid, html body.pb-layout-pack-minimal.pb-mode-light-page .pb-vokk-process .pb-vokk-process-grid, html body.pb-layout-pack-minimal.pb-mode-medium:not(.pb-mode-dark):not(.pb-mode-light-page) .pb-vokk-process .pb-vokk-process-grid, html body.pb-layout-pack-minimal.pb-mode-dark .pb-vokk-process .vokk-process-grid, html body.pb-layout-pack-minimal.pb-mode-light-page .pb-vokk-process .vokk-process-grid, html body.pb-layout-pack-minimal.pb-mode-medium:not(.pb-mode-dark):not(.pb-mode-light-page) .pb-vokk-process .vokk-process-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 34px !important; align-items: stretch !important; margin-top: 48px !important; } /* Cards */ html body.pb-layout-pack-minimal.pb-mode-dark .pb-vokk-process :is(.pb-vokk-process-grid, .vokk-process-grid) > *, html body.pb-layout-pack-minimal.pb-mode-light-page .pb-vokk-process :is(.pb-vokk-process-grid, .vokk-process-grid) > *, html body.pb-layout-pack-minimal.pb-mode-medium:not(.pb-mode-dark):not(.pb-mode-light-page) .pb-vokk-process :is(.pb-vokk-process-grid, .vokk-process-grid) > * { position: relative !important; min-height: 324px !important; padding: 42px 42px 38px !important; background: var(--pb-min-process-card) !important; border: 1px solid var(--pb-min-process-line) !important; border-radius: 0 !important; box-shadow: none !important; text-align: left !important; overflow: hidden !important; } /* Nummer */ html body.pb-layout-pack-minimal.pb-mode-dark .pb-vokk-process :is(.pb-vokk-process-grid, .vokk-process-grid) > * :is(.pb-vokk-process-step, .vokk-process-step, .process-step, .step-number, .process-number), html body.pb-layout-pack-minimal.pb-mode-light-page .pb-vokk-process :is(.pb-vokk-process-grid, .vokk-process-grid) > * :is(.pb-vokk-process-step, .vokk-process-step, .process-step, .step-number, .process-number), html body.pb-layout-pack-minimal.pb-mode-medium:not(.pb-mode-dark):not(.pb-mode-light-page) .pb-vokk-process :is(.pb-vokk-process-grid, .vokk-process-grid) > * :is(.pb-vokk-process-step, .vokk-process-step, .process-step, .step-number, .process-number) { display: block !important; margin: 0 0 20px !important; color: var(--pb-min-process-number) !important; font-size: 16px !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: .04em !important; } /* Icon rechtsboven */ html body.pb-layout-pack-minimal.pb-mode-dark .pb-vokk-process :is(.pb-vokk-process-grid, .vokk-process-grid) > * :is(.pb-vokk-process-icon, .vokk-process-icon, .process-icon), html body.pb-layout-pack-minimal.pb-mode-light-page .pb-vokk-process :is(.pb-vokk-process-grid, .vokk-process-grid) > * :is(.pb-vokk-process-icon, .vokk-process-icon, .process-icon), html body.pb-layout-pack-minimal.pb-mode-medium:not(.pb-mode-dark):not(.pb-mode-light-page) .pb-vokk-process :is(.pb-vokk-process-grid, .vokk-process-grid) > * :is(.pb-vokk-process-icon, .vokk-process-icon, .process-icon) { position: absolute !important; top: 20px !important; right: 20px !important; width: 42px !important; height: 42px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border: 1px solid var(--pb-min-process-line) !important; border-radius: 999px !important; color: var(--pb-min-process-icon) !important; background: transparent !important; margin: 0 !important; } /* Titels */ html body.pb-layout-pack-minimal.pb-mode-dark .pb-vokk-process :is(.pb-vokk-process-grid, .vokk-process-grid) > * :is(h3, h4), html body.pb-layout-pack-minimal.pb-mode-light-page .pb-vokk-process :is(.pb-vokk-process-grid, .vokk-process-grid) > * :is(h3, h4), html body.pb-layout-pack-minimal.pb-mode-medium:not(.pb-mode-dark):not(.pb-mode-light-page) .pb-vokk-process :is(.pb-vokk-process-grid, .vokk-process-grid) > * :is(h3, h4) { margin: 0 0 18px !important; padding-right: 56px !important; color: var(--pb-min-process-title) !important; font-size: 20px !important; line-height: 1.28 !important; font-weight: 700 !important; text-align: left !important; } /* Tekst */ html body.pb-layout-pack-minimal.pb-mode-dark .pb-vokk-process :is(.pb-vokk-process-grid, .vokk-process-grid) > * p, html body.pb-layout-pack-minimal.pb-mode-light-page .pb-vokk-process :is(.pb-vokk-process-grid, .vokk-process-grid) > * p, html body.pb-layout-pack-minimal.pb-mode-medium:not(.pb-mode-dark):not(.pb-mode-light-page) .pb-vokk-process :is(.pb-vokk-process-grid, .vokk-process-grid) > * p { margin: 0 !important; max-width: 22ch !important; color: var(--pb-min-process-copy) !important; font-size: 16px !important; line-height: 1.55 !important; text-align: left !important; } /* Geen rare extra lijnen / connectors */ html body.pb-layout-pack-minimal.pb-mode-dark .pb-vokk-process :is(.pb-vokk-process-grid, .vokk-process-grid) > *::before, html body.pb-layout-pack-minimal.pb-mode-dark .pb-vokk-process :is(.pb-vokk-process-grid, .vokk-process-grid) > *::after, html body.pb-layout-pack-minimal.pb-mode-light-page .pb-vokk-process :is(.pb-vokk-process-grid, .vokk-process-grid) > *::before, html body.pb-layout-pack-minimal.pb-mode-light-page .pb-vokk-process :is(.pb-vokk-process-grid, .vokk-process-grid) > *::after, html body.pb-layout-pack-minimal.pb-mode-medium:not(.pb-mode-dark):not(.pb-mode-light-page) .pb-vokk-process :is(.pb-vokk-process-grid, .vokk-process-grid) > *::before, html body.pb-layout-pack-minimal.pb-mode-medium:not(.pb-mode-dark):not(.pb-mode-light-page) .pb-vokk-process :is(.pb-vokk-process-grid, .vokk-process-grid) > *::after { box-shadow: none !important; } } /* PB MINIMAL PROCESS ALL MODES END */ /* PB MINIMAL LIGHT FOOTER VIVID START */ @media screen and (min-width: 1025px) { /* * Minimal had voor Light/Medium een eigen late * --min-surface override. Alleen Light corrigeren. */ html body.pb-layout-pack-minimal.pb-mode-light-page :is( .kb-block-agencyfooter-block, .agencyfooter-block-footer ) { background: radial-gradient( circle at 15% 0%, color-mix( in srgb, var(--pb-primary) 24%, transparent ), transparent 430px ), linear-gradient( 145deg, var(--pb-footer-gradient-1), var(--pb-footer-gradient-2) ) !important; background-color: var(--pb-footer-bg) !important; background-image: radial-gradient( circle at 15% 0%, color-mix( in srgb, var(--pb-primary) 24%, transparent ), transparent 430px ), linear-gradient( 145deg, var(--pb-footer-gradient-1), var(--pb-footer-gradient-2) ) !important; } } /* PB MINIMAL LIGHT FOOTER VIVID END */