/* SNOEK TEMPLATE VERSIE: 1.8.6 */ /* Nunito Sans, zelf gehost (1.6.0). De oude site laadde hem via Google Fonts; bij de omzetting was dat weggevallen en viel alles terug op Arial. Variabel lettertype: een bestand voor alle gewichten 200-1000. */ @font-face{font-family:'Nunito Sans';font-style:normal;font-weight:200 1000;font-display:swap; src:url(../fonts/nunito/nunito-sans-latin-normal.woff2) format('woff2-variations'),url(../fonts/nunito/nunito-sans-latin-normal.woff2) format('woff2')} @font-face{font-family:'Nunito Sans';font-style:italic;font-weight:200 1000;font-display:swap; src:url(../fonts/nunito/nunito-sans-latin-italic.woff2) format('woff2-variations'),url(../fonts/nunito/nunito-sans-latin-italic.woff2) format('woff2')} /* ============================================================ Snoek Hoveniers — SP Page Builder / Helix Ultimate design Geport uit template.css v1.1.0 + SPPB-integratielaag (MMX) Alle Snoek-addons renderen naar de klassen in dit bestand. ============================================================ */ /* 1. TOKENS ---------------------------------------------------- */ :root{ --green:#9eaf50; --green-dark:#7a8c35; --green-light:#e7ebd1; --grey-nav:#63686e; --grey-mid:#a9aaae; --grey-dark:#63686e; --red:#bf3a2d; --ink:#1a1a1a; --body:#3d3d3d; --muted:#666; --sand:#f5f3ee; --white:#fff; --max:1320px; --r:6px; } /* 2. BASE + verplichte overflow-fix ---------------------------- */ html,body{overflow-x:hidden;max-width:100vw} body.site{ font-family:'Nunito Sans','Proxima Nova',Arial,sans-serif; font-size:16px;line-height:1.75;color:var(--body);background:var(--white); } :where(body.site) h1,:where(body.site) h2,:where(body.site) h3{font-family:'Nunito Sans',Arial,sans-serif;font-weight:800;line-height:1.15;color:var(--ink)} :where(body.site) h1{font-size:var(--h1)} :where(body.site) h2{font-size:var(--h2)} :where(body.site) h3{font-size:var(--fs-4);font-weight:800} :where(body.site) p{font-size:var(--fs-2);line-height:1.75;color:var(--body)} .wrap{max-width:var(--max);margin:0 auto;padding:0 48px} /* 3. EYEBROW --------------------------------------------------- */ .eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--green);display:flex;align-items:center;gap:10px;margin-bottom:.9rem} .eyebrow::before{content:'';width:28px;height:2px;background:var(--green);flex-shrink:0} /* 4. BUTTONS --------------------------------------------------- */ .btn{display:inline-flex;align-items:center;gap:9px;font-family:inherit;font-size:16px;font-weight:700;text-decoration:none;padding:13px 28px;border-radius:var(--r);border:none;cursor:pointer;transition:all .22s ease;white-space:nowrap;line-height:1.2} .btn-green{background:var(--green);color:#fff} .btn-green:hover{background:var(--green-dark);transform:translateY(-2px);box-shadow:0 8px 24px rgba(158,175,80,.35);color:#fff} .btn-outline{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.45)} .btn-outline:hover{border-color:#fff;background:rgba(255,255,255,.1);color:#fff} .btn-outline-dark{background:transparent;color:var(--green-dark);border:2px solid var(--green)} .btn-outline-dark:hover{background:var(--green);color:#fff} .btn-white{background:#fff;color:var(--green-dark)} .btn-white:hover{background:var(--green-light);transform:translateY(-2px);color:var(--green-dark)} .btn-ghost{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.78);font-size:16px;font-weight:400;text-decoration:none;transition:color .2s} .btn-ghost:hover{color:#fff} /* 5. HELIX HEADER als grijze navbalk --------------------------- */ body.site #sp-header.sn-header{background:var(--grey-nav)!important;box-shadow:none;transition:box-shadow .35s;padding:0} body.site #sp-header.sn-header .container-inner{max-width:var(--max);margin:0 auto;padding:0 48px} body.site #sp-header.sn-header.sn-scrolled, body.site #sp-header.sn-header.header-sticky{box-shadow:0 2px 20px rgba(0,0,0,.25);background:var(--grey-nav)!important} body.site #sp-header.sn-header #sp-logo,body.site #sp-header.sn-header #sp-menu{padding-top:0;padding-bottom:0} /* menu */ body.site #sp-header.sn-header #sp-menu .sp-megamenu-parent{background:transparent} body.site #sp-header.sn-header .sp-megamenu-parent>li>a, body.site #sp-header.sn-header .sp-megamenu-parent>li>span{font-size:.87rem;font-weight:600;color:rgba(255,255,255,.82);padding:8px 14px;border-radius:4px;transition:all .2s;line-height:1.2} body.site #sp-header.sn-header .sp-megamenu-parent>li>a:hover, body.site #sp-header.sn-header .sp-megamenu-parent>li.active>a, body.site #sp-header.sn-header .sp-megamenu-parent>li.current>a{color:#fff;background:rgba(255,255,255,.1)} /* contact/CTA menu-item: geef het menu-item in Joomla de class "nav-cta-item" */ body.site #sp-header.sn-header .sp-megamenu-parent>li.nav-cta-item>a{background:var(--green);color:#fff!important;border-radius:4px} body.site #sp-header.sn-header .sp-megamenu-parent>li.nav-cta-item>a:hover{background:var(--green-dark)} /* dropdown */ body.site #sp-header.sn-header .sp-megamenu-parent .sp-dropdown{border-top:3px solid var(--green);border-radius:0 0 6px 6px;box-shadow:0 8px 32px rgba(0,0,0,.14)} body.site #sp-header.sn-header .sp-megamenu-parent .sp-dropdown .sp-dropdown-items>li>a{color:var(--grey-dark);font-weight:600;font-size:.85rem} body.site #sp-header.sn-header .sp-megamenu-parent .sp-dropdown .sp-dropdown-items>li>a:hover{background:var(--green-light);color:var(--green-dark)} /* burger */ body.site #sp-header.sn-header .burger-icon span{background:#fff} body.site .offcanvas-menu{background:var(--grey-nav)} /* 6. SPPB INTEGRATIE + full-bleed ------------------------------ */ /* container-breedte gelijk aan ontwerp */ body.site .sppb-row-container,body.site .sppb-container-inner{max-width:var(--max)} /* full-bleed helpers: gebruik op secties die de volle breedte moeten vullen */ .sn-full{width:var(--sn-vw,100vw);margin-left:calc(50% - var(--sn-vw,100vw) / 2);margin-right:calc(50% - var(--sn-vw,100vw) / 2)} .sppb-section:has(.sn-full),.sppb-addon-container:has(.sn-full){padding-left:0!important;padding-right:0!important} /* neutraliseer standaard SPPB-sectiepadding waar onze addons hun eigen padding meebrengen */ .sppb-addon-sn{margin:0} /* 7. HERO ------------------------------------------------------ */ .hero{position:relative;display:flex;align-items:flex-end;overflow:hidden;min-height:640px;height:82vh} .hero.hero--compact{min-height:340px;height:44vh;align-items:center} .hero-bg{position:absolute;inset:0} .hero-bg img{width:100%;height:100%;object-fit:cover;display:block} .hero-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.55) 0%,rgba(0,0,0,.15) 45%,transparent 75%)} .hero-content{position:relative;z-index:2;max-width:var(--max);margin:0 auto;padding:0 48px 88px;width:100%} .hero--compact .hero-content{padding-bottom:0} .hero-eyebrow{font-size:.74rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--green);display:flex;align-items:center;gap:12px;margin-bottom:1.2rem} .hero-eyebrow::before{content:'';width:36px;height:2px;background:var(--green)} .hero h1{color:#fff;font-weight:800;line-height:1.08;max-width:720px;margin-bottom:1.2rem;letter-spacing:-.02em} .hero h1 span{color:var(--green)} .hero-lead{font-size:18px;color:rgba(255,255,255,.82);max-width:560px;margin-bottom:2.2rem;font-weight:300;line-height:1.7} .hero-actions{display:flex;gap:14px;flex-wrap:wrap} /* 8. INTRO / MAIN GRID ---------------------------------------- */ .section-main{background:var(--white);padding:100px 0} .main-grid{display:grid;grid-template-columns:38% 1fr;gap:5rem;align-items:start;margin-top:3.5rem} .main-left h2{margin-bottom:1.1rem} .main-left p{font-size:16px;color:var(--muted);margin-bottom:1.8rem;max-width:420px} .sn-checks{display:flex;flex-direction:column;gap:10px;margin:1.4rem 0} .check-item{display:flex;align-items:flex-start;gap:9px;font-size:15px;font-weight:600;color:var(--body)} .check-item i{color:var(--green);font-size:14px;flex-shrink:0;margin-top:5px} /* 9. DIENSTEN KAARTEN ----------------------------------------- */ .diensten{background:var(--white);padding:100px 0} .diensten-grid{display:grid;grid-template-columns:38% 1fr;gap:5rem;align-items:start;margin-top:3.5rem} .diensten-left h2{margin-bottom:1.1rem} .diensten-left p{font-size:16px;color:var(--muted);margin-bottom:1.8rem;max-width:420px} .diensten-right{display:grid;grid-template-columns:1fr 1fr;gap:16px} .d-card{background:var(--sand);padding:2rem 1.8rem;border-radius:var(--r);position:relative;transition:background .3s,box-shadow .3s;display:flex;flex-direction:column;border-bottom:3px solid transparent;height:100%} .d-card:hover{background:var(--grey-nav);box-shadow:0 8px 28px rgba(0,0,0,.12);border-bottom-color:var(--green)} .d-card:hover .d-title{color:#fff}.d-card:hover .d-text{color:rgba(255,255,255,.6)} .d-card:hover .d-icon-wrap{background:rgba(158,175,80,.2);color:var(--green)} .d-header{display:flex;align-items:center;gap:.9rem;margin-bottom:1rem} .d-icon-wrap{width:44px;height:44px;border-radius:10px;flex-shrink:0;background:var(--green-light);color:var(--green-dark);display:flex;align-items:center;justify-content:center;font-size:18px;transition:all .3s} .d-title{font-size:1.05rem;font-weight:800;color:var(--ink);margin:0;transition:color .3s;line-height:1.25} .d-text{font-size:14px;line-height:1.75;color:var(--muted);margin-bottom:1.4rem;transition:color .3s;flex:1} .d-link{font-size:.82rem;font-weight:700;color:var(--green-dark);text-decoration:none;display:inline-flex;align-items:center;gap:7px;margin-top:auto;align-self:flex-start;border:1.5px solid var(--green);padding:8px 16px;border-radius:5px;transition:all .2s} .d-link:hover{background:var(--green);color:#fff;gap:10px} .d-card.featured{background:var(--green);grid-column:1 / -1;border-bottom-color:rgba(255,255,255,.25)} .d-card.featured:hover{background:var(--green-dark)} .d-card.featured .d-icon-wrap{background:rgba(255,255,255,.18);color:#fff} .d-card.featured .d-title{color:#fff} .d-card.featured .d-text{color:rgba(255,255,255,.85);flex:unset} .d-card.featured .d-link{color:#fff;border-color:rgba(255,255,255,.55)} .d-card.featured .d-link:hover{background:rgba(255,255,255,.18);border-color:#fff} /* 10. OVER ONS ------------------------------------------------- */ .over-strip{background:var(--grey-nav);padding:100px 0} .over-grid{display:grid;grid-template-columns:1fr 1fr;gap:6rem;align-items:center} .over-imgs{position:relative} .over-img-frame{width:100%;aspect-ratio:3/4;border-radius:var(--r);overflow:hidden;position:relative} .over-img-frame img{width:100%;height:100%;object-fit:cover;display:block} .over-badge{position:absolute;top:-20px;right:-20px;background:#fff;border-radius:50%;width:110px;height:110px;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:2;box-shadow:0 10px 30px rgba(0,0,0,.18)} .over-badge i{font-size:1.6rem;color:var(--green);display:block;margin-bottom:4px} .over-badge-label{font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--grey-dark);text-align:center;line-height:1.3} .over-text .eyebrow{color:rgba(255,255,255,.55)} .over-text .eyebrow::before{background:rgba(255,255,255,.4)} .over-text h2{color:#fff;margin-bottom:1.2rem} .over-text p{font-size:16px;color:rgba(255,255,255,.72);margin-bottom:.9rem} .over-checks{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:1.8rem 0} .over-checks .check-item{color:rgba(255,255,255,.85)} .over-checks .check-item i{color:var(--green)} /* 11. PROJECTEN GRID + FILTER (Dynamic Content) --------------- */ .projecten{background:var(--sand);padding:100px 0} .proj-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:2rem;gap:2rem;flex-wrap:wrap} .filter-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:2rem} .f-btn{padding:8px 18px;border-radius:20px;font-size:.82rem;font-weight:700;font-family:inherit;border:1.5px solid var(--green);background:transparent;color:var(--green-dark);cursor:pointer;transition:all .2s} .f-btn:hover,.f-btn.active{background:var(--green);border-color:var(--green);color:#fff} .proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .proj-card{border-radius:var(--r);overflow:hidden;cursor:pointer;position:relative;background:#fff;text-decoration:none;display:block} .proj-card.is-hidden{display:none} .proj-img-wrap{position:relative;overflow:hidden;aspect-ratio:4/3} .proj-img-wrap img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s ease} .proj-card:hover .proj-img-wrap img{transform:scale(1.06)} .proj-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(15,20,10,.88) 0%,transparent 55%);opacity:0;transition:opacity .32s} .proj-card:hover .proj-overlay{opacity:1} .proj-info{position:absolute;bottom:0;left:0;right:0;padding:1.3rem;transform:translateY(7px);opacity:0;transition:all .32s;color:#fff} .proj-card:hover .proj-info{transform:translateY(0);opacity:1} .proj-cat{font-size:.67rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--green);margin-bottom:3px} .proj-name{font-size:1rem;font-weight:700;line-height:1.3} .proj-meta{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#fff} .proj-meta-title{font-size:.87rem;font-weight:600;color:var(--ink)} .proj-meta-type{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green)} .proj-more{display:flex;justify-content:center;margin-top:3rem} /* 12. PROJECT DETAIL (DC-detailpagina) ------------------------ */ .project-detail{padding:3.5rem 0 2rem;max-width:960px;margin:0 auto} .project-hero-img{width:100%;aspect-ratio:16/7;object-fit:cover;border-radius:var(--r);display:block;margin-bottom:1.6rem} .project-cat{font-size:.7rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--green);margin-bottom:.5rem} .project-title{font-size:clamp(1.9rem,3vw,2.8rem);font-weight:800;color:var(--ink);margin-bottom:1.2rem} .project-body{margin-bottom:2.5rem} .project-body p{margin-bottom:1rem;color:var(--body)} .sn-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.75rem;margin:2rem 0} .sn-gallery-item{display:block;overflow:hidden;border-radius:var(--r);aspect-ratio:4/3;background:var(--sand);cursor:zoom-in} .sn-gallery-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease} .sn-gallery-item:hover img{transform:scale(1.04)} /* prev/next nav */ .sn-projectnav{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid rgba(0,0,0,.08)} .sn-projectnav a{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--green-dark);text-decoration:none;transition:gap .2s} .sn-projectnav a:hover{gap:12px} /* lightbox overlay (js) */ .lb-overlay{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:9999;display:none;align-items:center;justify-content:center} .lb-overlay img{max-width:92vw;max-height:92vh;object-fit:contain;border-radius:4px;box-shadow:0 8px 48px rgba(0,0,0,.6)} .lb-overlay .lb-close{position:fixed;top:1rem;right:1.4rem;color:#fff;font-size:2rem;background:none;border:none;cursor:pointer;line-height:1} .lb-overlay .lb-prev,.lb-overlay .lb-next{position:fixed;top:50%;transform:translateY(-50%);color:#fff;font-size:2.4rem;background:none;border:none;cursor:pointer;padding:1rem;opacity:.75;transition:opacity .2s} .lb-overlay .lb-prev:hover,.lb-overlay .lb-next:hover{opacity:1} .lb-overlay .lb-prev{left:.5rem}.lb-overlay .lb-next{right:.5rem} /* 13. WERKWIJZE ----------------------------------------------- */ .werkwijze{background:var(--white);padding:100px 0} .ww-head{text-align:center;max-width:580px;margin:0 auto 4.5rem} .ww-head h2{margin-bottom:.9rem}.ww-head p{font-size:16px;color:var(--muted)} .steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative} .steps::before{content:'';position:absolute;top:40px;left:10%;right:10%;height:1px;background:var(--green);opacity:.35;z-index:0} .step{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 1rem;position:relative;z-index:1} .step-num{width:80px;height:80px;border-radius:50%;border:2px solid var(--green);background:#fff;display:flex;align-items:center;justify-content:center;font-size:1.55rem;font-weight:800;color:var(--green-dark);margin-bottom:1.4rem;transition:all .3s} .step:hover .step-num{background:var(--green);color:#fff} .step-title{font-size:.97rem;font-weight:800;color:var(--ink);margin-bottom:.5rem} .step-text{font-size:14px;color:var(--muted);line-height:1.7} /* 14. CTA BANNER ---------------------------------------------- */ .cta-section{background:var(--green);padding:100px 0;text-align:center;position:relative;overflow:hidden} .cta-section::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle at 2px 2px,rgba(255,255,255,.05) 1px,transparent 0);background-size:40px 40px} .cta-inner{position:relative;z-index:1;max-width:var(--max);margin:0 auto;padding:0 48px} .cta-section .eyebrow{justify-content:center;color:rgba(255,255,255,.7)} .cta-section .eyebrow::before{background:rgba(255,255,255,.45)} .cta-section h2{color:#fff;margin-bottom:1rem} .cta-section p{font-size:17px;color:rgba(255,255,255,.82);max-width:460px;margin:0 auto 2.5rem;font-weight:300} .cta-btns{display:flex;justify-content:center;gap:14px;flex-wrap:wrap} /* 15. STATS + KAARTEN + SUBSECTIES ---------------------------- */ .sn-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1.2rem;margin-top:2rem} .sn-stat{text-align:center;padding:1.8rem 1rem;border-radius:var(--r);background:var(--sand)} .sn-stat-num{font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:800;color:var(--green-dark);line-height:1;margin-bottom:.35rem} .sn-stat-label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)} .sn-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;margin-top:2.5rem} .sn-subsecties{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem;margin-top:2.5rem} .sn-sub{background:var(--sand);border-radius:var(--r);padding:2rem} .sn-sub h3{font-size:1.05rem;font-weight:800;color:var(--ink);margin-bottom:.7rem;padding-bottom:.6rem;border-bottom:2px solid var(--green-light)} .sn-sub p{font-size:14.5px;line-height:1.7;color:var(--muted);margin-bottom:.9rem} /* 16. VACATURES ----------------------------------------------- */ .sn-vacatures{display:flex;flex-direction:column;gap:2rem;margin-top:2.5rem} .vacature-item{background:#fff;border:1px solid rgba(0,0,0,.08);border-top:3px solid var(--green);border-radius:var(--r);padding:2.5rem;scroll-margin-top:90px} .vacature-item h3{font-size:clamp(1.25rem,2vw,1.6rem);font-weight:800;color:var(--ink);margin-bottom:.75rem;line-height:1.2} .vacature-intro{margin-bottom:1.4rem;padding-bottom:1.4rem;border-bottom:1px solid rgba(0,0,0,.08)} .vacature-body h4{color:var(--green-dark);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;margin:1.4rem 0 .5rem} .vacature-body ul{list-style:none;padding:0;margin:0 0 .5rem;display:flex;flex-direction:column;gap:.35rem} .vacature-body ul li{color:var(--body);padding:.2rem 0 .2rem 1.5rem;position:relative} .vacature-body ul li::before{content:'\f00c';font-family:'Font Awesome 6 Free';font-weight:900;color:var(--green);font-size:.75rem;position:absolute;left:0;top:.4rem} .sn-func-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;margin-top:2.5rem} /* 17. SECTIE-ACHTERGRONDEN ------------------------------------ */ .section-grey{background:var(--grey-nav);padding:100px 0} .section-sand{background:var(--sand);padding:100px 0} .section-green{background:var(--green);padding:100px 0} .section-dark{background:#2a2d2f;padding:100px 0} .section-grey h2,.section-grey h3,.section-dark h2,.section-dark h3{color:#fff} .section-grey p,.section-dark p{color:rgba(255,255,255,.78)} .section-grey .eyebrow,.section-dark .eyebrow{color:rgba(255,255,255,.55)} .section-grey .eyebrow::before,.section-dark .eyebrow::before{background:rgba(255,255,255,.35)} .section-green h2,.section-green h3{color:#fff} .section-green p{color:rgba(255,255,255,.85)} .section-green .eyebrow{color:rgba(255,255,255,.6)} .section-green .eyebrow::before{background:rgba(255,255,255,.4)} .section-green .btn-green{background:#fff;color:var(--green-dark)} .section-green .btn-green:hover{background:var(--green-light)} /* 18. FOOTER -------------------------------------------------- */ .sn-footer{background:#1a1e14;padding:80px 0 40px} .sn-footer .foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:4rem;padding-bottom:3rem;border-bottom:1px solid rgba(255,255,255,.07)} .foot-logo-img{height:56px;width:auto;max-width:250px;object-fit:contain;display:block;margin-bottom:.9rem} .foot-tagline{font-size:14px;color:rgba(255,255,255,.4);line-height:1.8;max-width:300px} .foot-socials{display:flex;gap:8px;margin-top:1.4rem} .foot-socials a{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.5);text-decoration:none;font-size:.85rem;transition:all .2s} .foot-socials a:hover{border-color:var(--green);color:var(--green)} .foot-col-h{font-size:.68rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:1.2rem} .foot-links{list-style:none;display:flex;flex-direction:column;gap:.7rem;margin:0;padding:0} .foot-links a,.foot-links li{font-size:14px;color:rgba(255,255,255,.5);text-decoration:none} .foot-links a{display:inline-flex;align-items:flex-start;gap:9px;transition:color .2s} .foot-links a:hover{color:var(--green)} .foot-links li{display:flex;align-items:flex-start;gap:9px} .foot-links i{font-size:12px;opacity:.7;margin-top:5px;color:var(--green)} .foot-bottom{padding-top:1.8rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem} .foot-copy{font-size:13px;color:rgba(255,255,255,.28)} .foot-legal{display:flex;gap:1.5rem} .foot-legal a,.foot-legal span{font-size:13px;color:rgba(255,255,255,.28);text-decoration:none} .foot-legal a:hover{color:rgba(255,255,255,.6)} body.site #sp-footer{display:none} /* 19. RSFORM (contactformulier) ------------------------------- */ .sn-form .rsform-block,.rsform .rsform-block{margin-bottom:1rem} .sn-form .formControlLabel,.rsform .formControlLabel{display:block;font-size:.85rem;font-weight:700;color:var(--ink);margin-bottom:.4rem} .sn-form .rsform-input-box,.sn-form .rsform-text-box,.sn-form .rsform-select-box, .rsform .rsform-input-box,.rsform .rsform-text-box,.rsform .rsform-select-box{width:100%;padding:12px 16px;font-family:inherit;font-size:16px;border:1.5px solid var(--grey-mid);border-radius:var(--r);background:#fff;color:var(--ink);transition:border-color .2s} .sn-form .rsform-input-box:focus,.sn-form .rsform-text-box:focus,.sn-form .rsform-select-box:focus, .rsform .rsform-input-box:focus,.rsform .rsform-text-box:focus,.rsform .rsform-select-box:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(158,175,80,.15)} .sn-form .rsform-text-box,.rsform .rsform-text-box{min-height:150px;resize:vertical} .sn-form .rsform-submit-button,.rsform .rsform-submit-button{display:inline-flex;align-items:center;gap:9px;font-family:inherit;font-size:16px;font-weight:700;padding:13px 30px;border-radius:var(--r);border:none;cursor:pointer;background:var(--green);color:#fff;transition:all .22s ease} .sn-form .rsform-submit-button:hover,.rsform .rsform-submit-button:hover{background:var(--green-dark);transform:translateY(-2px);box-shadow:0 8px 24px rgba(158,175,80,.35)} .sn-form .formNoError,.rsform .formNoError{display:none} .sn-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start} .sn-contact-info{list-style:none;padding:0;margin:1.5rem 0 0;display:flex;flex-direction:column;gap:1rem} .sn-contact-info li{display:flex;align-items:flex-start;gap:.9rem;color:var(--body)} .sn-contact-info i{color:var(--green);width:20px;margin-top:5px} .sn-map{width:100%;aspect-ratio:16/10;border:0;border-radius:var(--r);margin-top:1.5rem} /* 20. SCROLL REVEALS ------------------------------------------ */ .reveal{opacity:0;transform:translateY(40px);transition:opacity .8s ease,transform .8s ease} .reveal.vis{opacity:1;transform:none} .reveal-left{opacity:0;transform:translateX(-48px);transition:opacity .8s ease,transform .8s ease} .reveal-left.vis{opacity:1;transform:none} .reveal-right{opacity:0;transform:translateX(48px);transition:opacity .8s ease,transform .8s ease} .reveal-right.vis{opacity:1;transform:none} .stagger>*{opacity:0;transform:translateY(36px);transition:opacity .7s ease,transform .7s ease} .stagger.vis>*:nth-child(1){opacity:1;transform:none;transition-delay:.05s} .stagger.vis>*:nth-child(2){opacity:1;transform:none;transition-delay:.14s} .stagger.vis>*:nth-child(3){opacity:1;transform:none;transition-delay:.23s} .stagger.vis>*:nth-child(4){opacity:1;transform:none;transition-delay:.32s} .stagger.vis>*:nth-child(5){opacity:1;transform:none;transition-delay:.41s} .stagger.vis>*:nth-child(6){opacity:1;transform:none;transition-delay:.5s} /* vanaf de zevende: ook zichtbaar (anders bleef een lange rij onzichtbaar) */ .stagger.vis>*{opacity:1;transform:none} .stagger.vis>*:nth-child(n+7){transition-delay:.55s} @media(prefers-reduced-motion:reduce){.stagger>*{opacity:1;transform:none;transition:none}} /* 21. RESPONSIVE ---------------------------------------------- */ @media(max-width:1100px){ .main-grid,.diensten-grid{grid-template-columns:1fr;gap:3rem} .over-grid{grid-template-columns:1fr;gap:3rem} .sn-contact-grid{grid-template-columns:1fr;gap:2.5rem} } @media(max-width:1024px){ .wrap{padding:0 32px} body.site #sp-header.sn-header .container-inner{padding:0 32px} .proj-grid{grid-template-columns:repeat(2,1fr)} .sn-footer .foot-grid{grid-template-columns:1fr 1fr;gap:3rem} .steps{grid-template-columns:repeat(3,1fr);gap:1.5rem} .steps::before{display:none} .cta-inner,.hero-content{padding-left:32px;padding-right:32px} } @media(max-width:768px){ .wrap{padding:0 20px} .hero{min-height:520px;height:auto;padding:120px 0 60px} .hero h1{font-size:2.2rem} .diensten-right{grid-template-columns:1fr} .d-card.featured{grid-column:auto} .proj-grid{grid-template-columns:1fr} .steps{grid-template-columns:1fr 1fr} .over-checks{grid-template-columns:1fr} .sn-footer .foot-grid{grid-template-columns:1fr;gap:2.5rem} .foot-bottom{flex-direction:column;gap:.8rem;text-align:center} .hero-content,.cta-inner{padding-left:20px;padding-right:20px} .section-main,.diensten,.over-strip,.projecten,.werkwijze,.cta-section,.section-grey,.section-sand,.section-green,.section-dark{padding:64px 0} } @media(max-width:480px){ .steps{grid-template-columns:1fr} .hero-actions,.cta-btns{flex-direction:column;align-items:stretch} } /* 22. PRINT --------------------------------------------------- */ @media print{#sp-header,.cta-section,.sn-footer{display:none}.hero{min-height:auto;height:auto}body{font-size:12pt}} /* 23. SECTIE-BANDEN (addon-wrappers) -------------------------- */ .sn-band{padding:100px 0;position:relative} .sn-band>.wrap{position:relative;z-index:1} /* full-bleed reset: haal SPPB-container-padding weg rond onze volle-breedte-secties */ .sppb-section:has(.sn-full),.sppb-row:has(.sn-full),.sppb-column:has(.sn-full), .sppb-addon-container:has(.sn-full),.sppb-addon:has(.sn-full){padding-left:0!important;padding-right:0!important} .sppb-column>.sppb-column-addons:has(.sn-full){padding:0!important} @media(max-width:768px){.sn-band{padding:64px 0}} /* projectkaart: galerij-teller + klikbare kaart */ .proj-card[role="button"]{cursor:pointer} .proj-count{position:absolute;top:12px;right:12px;background:rgba(0,0,0,.55);color:#fff;font-size:.72rem;font-weight:700;padding:4px 9px;border-radius:20px;display:inline-flex;align-items:center;gap:5px;opacity:0;transition:opacity .3s} .proj-card:hover .proj-count{opacity:1} /* 24. HERO-SLIDER + INTRO-TWEEKOLOM ---------------------------- */ .hero-slides{position:absolute;inset:0;z-index:0} .hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease;background-size:cover;background-position:center} .hero-slide.active{opacity:1} .hero .hero-overlay{z-index:1} .hero .hero-content{z-index:2} .hero-dots{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);z-index:3;display:flex;gap:10px} .hero-dots .hero-dot{width:9px;height:9px;border-radius:50%;border:2px solid rgba(255,255,255,.55);background:transparent;cursor:pointer;padding:0;transition:all .25s} .hero-dots .hero-dot.active{background:var(--green);border-color:var(--green);width:26px;border-radius:5px} @media(max-width:1024px){.hero-dots{left:32px;transform:none}} .sn-intro-cols{display:grid;grid-template-columns:1fr 1fr;gap:4.5rem;align-items:center} /* img-left: de addon zet de foto al als eerste element in de DOM. Hier NIET nog eens omkeren, anders staan beide foto's rechts. */ .sn-intro-photo{width:100%;border-radius:var(--r);object-fit:cover;display:block;aspect-ratio:4/3} .sn-intro-cols .sn-checks{margin-top:1.4rem} @media(max-width:900px){.sn-intro-cols{grid-template-columns:1fr;gap:2.5rem} /* op mobiel altijd eerst de tekst, dan de foto */ .sn-intro-cols.img-left .sn-intro-photo-wrap{order:2}.sn-intro-cols.img-left .sn-intro-col{order:1}} /* diensten-right: originele main-cards indeling bij 5 kaarten. BELANGRIJK: alleen boven 768px. Onder die breedte zet de media-query het raster op een kolom; de benoemde gebieden bestaan dan niet meer, terwijl de kaarten er wel naar bleven verwijzen. Gevolg: alle vijf kaarten stapelden in dezelfde cel en je zag er nog maar een. */ @media(min-width:769px){ .diensten-right:has(> .d-card:nth-child(5):last-child){grid-template-areas:"c1 c2" "c3 c3" "c4 c5"} .diensten-right:has(> .d-card:nth-child(5):last-child) > .d-card:nth-child(1){grid-area:c1} .diensten-right:has(> .d-card:nth-child(5):last-child) > .d-card:nth-child(2){grid-area:c2} .diensten-right:has(> .d-card:nth-child(5):last-child) > .d-card:nth-child(3){grid-area:c3} .diensten-right:has(> .d-card:nth-child(5):last-child) > .d-card:nth-child(4){grid-area:c4} .diensten-right:has(> .d-card:nth-child(5):last-child) > .d-card:nth-child(5){grid-area:c5} } @media(max-width:768px){ /* vangnet: geen enkele kaart verwijst nog naar een benoemd gebied */ .diensten-right{grid-template-areas:none} .diensten-right > .d-card{grid-area:auto} } .diensten-left-text p{margin-bottom:1rem} @media(max-width:768px){.diensten-right{grid-template-areas:none!important}} /* 25. TEKSTKLEUR-FIX (specificiteit) --------------------------- */ body.site .hero h1,body.site .hero .hero-lead{color:#fff} body.site .hero h1 span{color:var(--green)} body.site .over-text h2,body.site .over-text p{color:#fff} body.site .over-text p{color:rgba(255,255,255,.72)} body.site .cta-section h2,body.site .cta-section p{color:#fff} body.site .cta-section p{color:rgba(255,255,255,.82)} body.site .sn-band.sn-grey h2,body.site .sn-band.sn-grey h3,body.site .sn-band.sn-green h2,body.site .sn-band.sn-green h3,body.site .sn-band.sn-dark h2,body.site .sn-band.sn-dark h3{color:#fff} /* ============================================================ 26. KANTLIJN — ÉÉN SYSTEEM (autoritatief; staat bewust als laatste) ------------------------------------------------------------ Live gemeten en overgenomen uit een eerder MMX-project (aug 2026): (a) SP Page Builder kapt de rijcontainer standaard op 1290 -> cap omhoog naar de huisstijlmaat (--max = 1320). (b) Bootstrap zet .container onder 1400px op 1140; in een Dynamic-Content- view wint die 1140 -> forceer de huisstijlmaat site-breed, anders lijnen projectoverzicht/-detail niet uit met header, addons en footer. (c) De SPPB-kolom heeft 15px padding per kant. Snoek-addons brengen hun eigen .wrap / .hero-content / .cta-inner mee (1320 + gutter), ruwe SPPB-inhoud (Dynamic Content) niet. Daarom: kolompadding = de Snoek- gutter voor ruwe inhoud, en 0 zodra er een Snoek-addon (.sn-full) in de kolom staat (anders dubbele marge). (d) De header stond op tablet/mobiel 12px te ver naar binnen door de padding van .container-fluid. Gutter = dezelfde waarden als .wrap: 48 / 32 / 20px. ============================================================ */ :root{--sn-gutter:48px} @media(max-width:1024px){:root{--sn-gutter:32px}} @media(max-width:768px){:root{--sn-gutter:20px}} /* (a) rijcontainer op de huisstijlmaat */ body.site .sppb-row-container, body.site .sppb-container-inner{max-width:var(--max)!important;margin-left:auto!important;margin-right:auto!important} /* (b) bootstrap-container site-breed op de huisstijlmaat (ook in DC-views) */ body.site #sp-main-body .container, body.site .com-sppagebuilder .container{width:100%!important;max-width:var(--max)!important;margin-left:auto!important;margin-right:auto!important;padding-left:0!important;padding-right:0!important} body.site #sp-main-body .container-inner{max-width:var(--max);margin-left:auto;margin-right:auto;padding-left:0;padding-right:0} /* (c) kolompadding: ruwe SPPB-inhoud krijgt exact dezelfde gutter als .wrap */ body.site .sppb-row > .sppb-row-column:only-child{padding-left:var(--sn-gutter)!important;padding-right:var(--sn-gutter)!important} /* ...maar niet als er een Snoek-addon in staat: die regelt zijn eigen kantlijn */ body.site .sppb-row > .sppb-row-column:only-child:has(.sn-full){padding-left:0!important;padding-right:0!important} /* (c2) Meerkoloms ruwe rijen (bv. projectdetail 60/40): zet de class sn-container op de SECTIE (rij-instelling "CSS Class"). De kolommen houden dan hun 15px tussenruimte en de rij als geheel staat op de gutter. LET OP: gebruik sn-container alleen op meerkoloms-rijen — bij één kolom regelt de regel hierboven het al. */ body.site .sppb-section.sn-container > .sppb-row-container{padding-left:calc(var(--sn-gutter) - 15px)!important;padding-right:calc(var(--sn-gutter) - 15px)!important} /* (d) header lijnt op elke breedte met de content */ body.site #sp-header .container-fluid{padding-left:0!important;padding-right:0!important} /* ============================================================ 27. COOKIEMELDING (eigen banner, geen externe tool) Markup + JS staan in snoek-footer.php; cookie: sn_cookie_consent (365 dgn). De footerlink "Cookies" heropent de melding zodat de keuze te wijzigen is. ============================================================ */ .sn-cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:9999;max-width:920px;margin:0 auto;background:#fff;border-radius:var(--r);box-shadow:0 12px 40px rgba(0,0,0,.18);padding:24px 26px;display:none;border:1px solid rgba(0,0,0,.08)} .sn-cookie.show{display:block} .sn-cookie h4{margin:0 0 8px;color:var(--ink);font-family:'Nunito Sans',Arial,sans-serif;font-size:1.15rem;font-weight:800} .sn-cookie p{margin:0 0 16px;color:var(--body);font-size:.95rem;line-height:1.6} .sn-cookie a{color:var(--green-dark);font-weight:700;text-decoration:underline} .sn-cookie-btns{display:flex;gap:12px;flex-wrap:wrap} .sn-cookie button{border:0;border-radius:var(--r);padding:12px 26px;font:inherit;font-weight:700;cursor:pointer;transition:background .2s,color .2s,border-color .2s} .sn-cookie-accept{background:var(--green);color:#fff} .sn-cookie-accept:hover{background:var(--green-dark)} .sn-cookie-min{background:#fff;color:var(--ink);border:2px solid var(--green)} .sn-cookie-min:hover{background:var(--green-light)} @media(max-width:600px){.sn-cookie{padding:20px 18px}.sn-cookie-btns{flex-direction:column}.sn-cookie button{width:100%}} /* ============================================================ 28. JURIDISCHE PAGINA'S + RSFORM IN EEN KOLOM .sn-legal = leesbare tekstkolom voor privacyverklaring/cookiebeleid (de tekst komt uit het editorveld van Snoek Intro). .form-in-kolom = een RSForm-sectie die in een kolom moet passen i.p.v. vol. ============================================================ */ .sn-legal .sn-intro-text{max-width:860px} .sn-legal .sn-intro-text h2{font-size:1.5rem;font-weight:800;color:var(--ink);margin:34px 0 12px;padding-top:26px;border-top:1px solid rgba(0,0,0,.1)} .sn-legal .sn-intro-text h3{font-size:1.15rem;font-weight:700;color:var(--ink);margin:22px 0 8px} .sn-legal .sn-intro-text p{margin:0 0 16px} .sn-legal .sn-intro-text ul{list-style:disc;padding-left:1.35em;margin:0 0 16px} .sn-legal .sn-intro-text li{margin:0 0 6px} .sn-legal .sn-intro-text a{color:var(--green-dark);font-weight:700;text-decoration:underline} .form-in-kolom{margin:0!important;padding:0!important;width:auto!important} .form-in-kolom > .wrap{max-width:none!important;width:auto!important;padding:0!important} /* ============================================================ 29. DYNAMIC CONTENT — filter en projectkaarten (v1.2.1) ------------------------------------------------------------ De projectenpagina is een Dynamic-Content-view: die gebruikt de SPPB-kernaddons, niet onze Snoek-addons. Zonder deze regels zie je de kale SPPB-radioknoppen in plaats van de filterpillen uit het ontwerp. Class-namen komen uit SP Page Builder zelf (geverifieerd op een werkende installatie), kleuren en vormen uit het Snoek-ontwerp (.f-btn). ============================================================ */ .sppb-addon-dynamic-content-filter-wrapper{margin:0 0 2.5rem} .sppb-addon-dynamic-content-filter-list{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px} .sppb-addon-dynamic-content-filter-item{display:flex;align-items:center;gap:8px} .sppb-addon-dynamic-content-filter-item-title{display:none} .sppb-addon-dynamic-content-filter-item-content{display:flex;flex-wrap:wrap;justify-content:center;gap:8px} .sppb-addon-dynamic-content-filter-item-count{display:none} /* de echte radio/checkbox verbergen: de pil zelf is de knop */ .sppb-addon-dynamic-content-filter-fake-radio-input, .sppb-addon-dynamic-content-filter-fake-checkbox-input{display:none!important} .sppb-addon-dynamic-content-filter-item-radio-option, .sppb-addon-dynamic-content-filter-item-checkbox-option{ display:inline-flex;align-items:center;cursor:pointer; padding:8px 18px;border-radius:20px; font-size:.82rem;font-weight:700;font-family:inherit;line-height:1; border:1.5px solid var(--green);background:transparent;color:var(--green-dark); transition:background .2s,color .2s,border-color .2s} .sppb-addon-dynamic-content-filter-item-radio-option:hover, .sppb-addon-dynamic-content-filter-item-checkbox-option:hover{background:var(--green);border-color:var(--green);color:#fff} .sppb-addon-dynamic-content-filter-item-radio-option:has(input:checked), .sppb-addon-dynamic-content-filter-item-checkbox-option:has(input:checked){background:var(--green);border-color:var(--green);color:#fff} .sppb-addon-dynamic-content-filter-item-radio-option label, .sppb-addon-dynamic-content-filter-item-checkbox-option label{margin:0;cursor:pointer;font:inherit;color:inherit} /* resetknop in dezelfde vorm, maar als donkere pil */ .sppb-addon-dynamic-content-filter-reset-btn-wrapper{display:flex;align-items:center} .sppb-addon-dynamic-content-filter-reset-btn, .sppb-addon-dynamic-content-filter-reset-btn-alt, .sppb-addon-dynamic-content-filter-wrapper button{ display:inline-flex!important;align-items:center;cursor:pointer; padding:8px 18px!important;border-radius:20px!important; font-size:.82rem!important;font-weight:700!important;line-height:1; background:var(--grey-nav)!important;color:#fff!important;border:1.5px solid var(--grey-nav)!important; text-decoration:none!important;opacity:1!important; transition:background .2s,color .2s,border-color .2s} .sppb-addon-dynamic-content-filter-reset-btn:hover, .sppb-addon-dynamic-content-filter-reset-btn-alt:hover, .sppb-addon-dynamic-content-filter-wrapper button:hover{background:var(--green)!important;border-color:var(--green)!important;color:#fff!important} /* Projectkaarten in de Dynamic-Content-grid: zelfde vorm als de ontwerpkaarten (.proj-card in de Snoek-addon), maar met de SPPB-markup eromheen. */ .proj-card{border-radius:var(--r);overflow:hidden} .proj-card img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease} .proj-card:hover img{transform:scale(1.06)} .proj-card .sppb-addon-dynamic-content-image{overflow:hidden;border-radius:var(--r)} .proj-card .sppb-addon-dynamic-content-text{margin:.85rem 0 0} .proj-card h3,.proj-card .sppb-addon-dynamic-content-text h3{font-size:1.15rem;font-weight:800;color:var(--ink);line-height:1.25;margin:0} .proj-card a{text-decoration:none;color:inherit} /* ============================================================ 30. HEADER EN MENU op de maten van het ontwerp (v1.2.2) Gemeten op de oorspronkelijke site: balk 72px hoog, logo 65px (max 250px breed), menulinks .87rem met 2px tussenruimte, en Contact als groene knop (menu-item krijgt de class nav-cta-item). ============================================================ */ body.site #sp-header.sn-header{min-height:72px} body.site #sp-header.sn-header .sp-megamenu-parent>li{margin:0 1px} body.site #sp-header.sn-header .sp-megamenu-parent>li>a{font-size:.87rem} /* ============================================================ 31. FOOTERLOGO (v1.2.3) Op de donkere footer staat de diapositieve (witte) versie van het logo. ============================================================ */ .sn-footer .foot-logo-img{height:58px;width:auto;max-width:250px;object-fit:contain;display:block;margin-bottom:1.1rem} /* ============================================================ 32. PROJECTKAART: categorie als label OP de foto (v1.2.4) Gemeten aan het ontwerp en daarna één stap verder: de categorie stond onderin de witte balk en viel daar weg. Als label op de foto is hij meteen scanbaar, en de balk houdt alleen de titel over. ============================================================ */ .proj-tag{ position:absolute;top:12px;left:12px;z-index:2; display:inline-flex;align-items:center; padding:6px 13px;border-radius:20px; background:rgba(255,255,255,.92);color:var(--green-dark); font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase; box-shadow:0 2px 10px rgba(0,0,0,.18); backdrop-filter:saturate(140%) blur(2px); transition:background .25s,color .25s} .proj-card:hover .proj-tag{background:var(--green);color:#fff} /* fototeller rechtsboven, zelfde vorm als het categorielabel */ .proj-card .proj-count{ position:absolute;top:12px;right:12px;left:auto;bottom:auto;z-index:2; display:inline-flex;align-items:center;gap:5px; padding:6px 11px;border-radius:20px; background:rgba(0,0,0,.45);color:#fff; font-size:.7rem;font-weight:700;opacity:0;transition:opacity .25s} .proj-card:hover .proj-count{opacity:1} /* op hover: titel + "Bekijk project" over de foto */ .proj-info{padding:1.25rem} .proj-link{display:inline-flex;align-items:center;gap:8px;margin-top:.5rem; font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--green)} .proj-card:hover .proj-link i{transform:translateX(3px)} .proj-link i{transition:transform .25s} /* de balk onder de foto houdt alleen de titel: rustiger en beter leesbaar */ .proj-meta{justify-content:flex-start;padding:14px 16px;min-height:56px} .proj-meta-title{font-size:.92rem;font-weight:700;color:var(--ink);line-height:1.35} /* ============================================================ 33. MENU: uitlijning, actieve staat en de Contact-knop (v1.2.4) Gemeten tegen de oorspronkelijke site: het menu staat rechts in de balk, de actieve pagina krijgt een zachte afgeronde markering, en Contact is een groene knop. Joomla zet de menu-item-class op de LINK (a), niet op het lijstitem, dus beide varianten staan hier. ============================================================ */ body.site #sp-header.sn-header #sp-menu{text-align:right} body.site #sp-header.sn-header .sp-megamenu-parent{float:none;display:inline-block;vertical-align:middle;white-space:nowrap} body.site #sp-header.sn-header .sp-megamenu-parent>li{background:transparent;margin:0 1px} body.site #sp-header.sn-header .sp-megamenu-parent>li>a{border-radius:4px} body.site #sp-header.sn-header .sp-megamenu-parent>li.active, body.site #sp-header.sn-header .sp-megamenu-parent>li.current{background:transparent} body.site #sp-header.sn-header .sp-megamenu-parent>li.active>a, body.site #sp-header.sn-header .sp-megamenu-parent>li.current>a{ background:rgba(255,255,255,.14);color:#fff} /* Contact als groene knop, of de class nu op de li of op de a staat */ body.site #sp-header.sn-header .sp-megamenu-parent>li>a.nav-cta-item, body.site #sp-header.sn-header .sp-megamenu-parent>li.nav-cta-item>a{ background:var(--green)!important;color:#fff!important;border-radius:4px;padding:9px 18px} body.site #sp-header.sn-header .sp-megamenu-parent>li>a.nav-cta-item:hover, body.site #sp-header.sn-header .sp-megamenu-parent>li.nav-cta-item>a:hover{ background:var(--green-dark)!important} /* ============================================================ 34. HERO-KAART, KNOPPEN EN HEADER-CORRECTIES (v1.2.5) ============================================================ */ /* -- hero: donkere kaart om de tekst, zoals het ontwerp -------------------- */ .hero-card{ background:rgba(20,24,16,.62); backdrop-filter:blur(3px) saturate(120%); padding:44px 48px 48px; border-radius:var(--r); max-width:760px} .hero-card .hero-eyebrow{margin-bottom:1rem} .hero-card h1{margin-bottom:1rem} .hero-card .hero-lead{margin-bottom:1.8rem;max-width:none} @media(max-width:768px){.hero-card{padding:28px 24px 32px;background:rgba(20,24,16,.68);backdrop-filter:none}} /* -- knoppen: rand meteen zichtbaar, niet pas bij hover -------------------- */ .btn{text-transform:none!important;letter-spacing:0} .btn-outline{border:2px solid rgba(255,255,255,.85);color:#fff} .btn-outline:hover{border-color:#fff;background:rgba(255,255,255,.14);color:#fff} .btn-white{border:2px solid #fff} .btn-outline-dark{border:2px solid var(--green)} /* de groene knop houdt zijn vlak, maar krijgt dezelfde hoogte als de outline */ .btn-green{border:2px solid var(--green)} .btn-green:hover{border-color:var(--green-dark)} /* -- header: menu netjes rechts, Contact als knop in de balk --------------- */ body.site #sp-header.sn-header .container-inner > .row{margin-left:0;margin-right:0;align-items:center;min-height:72px} body.site #sp-header.sn-header #sp-menu{padding-right:0} /* GEEN flex op de menu-items: dat brak de rij en duwde Contact naar een tweede regel. */ body.site #sp-header.sn-header .sp-megamenu-parent>li>a.nav-cta-item, body.site #sp-header.sn-header .sp-megamenu-parent>li.nav-cta-item>a{ display:inline-block;margin-left:10px;padding:9px 18px;line-height:1.2;vertical-align:middle} /* ============================================================ 35. PROJECTDETAILPAGINA (v1.2.5) ------------------------------------------------------------ De hero van de detailpagina is een full-bleed kolom (100vw) die GEEN .sn-full-markering heeft. Daardoor pakte hij de gutter uit regel 26 en schoof de foto naar binnen terwijl de titel bleef staan. Die kolom hoort dus uitgezonderd te worden. ============================================================ */ body.site .sppb-row > .sppb-row-column:only-child.sn-detail-hero{padding-left:0!important;padding-right:0!important} .sn-detail-hero{position:relative;width:100vw;margin-left:calc(50% - 50vw);overflow:hidden; min-height:clamp(340px,52vh,620px);display:flex;align-items:flex-end} .sn-detail-hero > .sppb-column-addons{position:static;width:100%;display:flex;flex-direction:column;justify-content:flex-end;min-height:inherit} .sn-detail-hero .sn-dh-img{position:absolute;inset:0;z-index:0;margin:0} .sn-detail-hero .sn-dh-img img{width:100%;height:100%;object-fit:cover;display:block} .sn-detail-hero::after{content:'';position:absolute;inset:0;z-index:1; background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.15) 55%,transparent 80%)} .sn-detail-hero .sn-dh-title{position:relative;z-index:2;width:100%;max-width:var(--max); margin:0 auto;padding:0 var(--sn-gutter) 46px} .sn-detail-hero .sn-dh-title,.sn-detail-hero .sn-dh-title *{color:#fff} .sn-detail-hero .sn-dh-title h1{margin:0;font-weight:800;line-height:1.1; font-size:clamp(1.9rem,3.6vw,3.2rem);max-width:16em} @media(max-width:768px){.sn-detail-hero{min-height:44vh}.sn-detail-hero .sn-dh-title{padding-bottom:28px}} /* intro- en bodytekst van het project: leesbare kolom, rustig ritme */ .sn-detail-intro{font-size:1.12rem;line-height:1.7;color:var(--body);max-width:820px;margin:56px 0 0} .sn-detail-body{max-width:820px;margin:20px 0 0;line-height:1.75} .sn-detail-body h2{font-size:1.5rem;font-weight:800;color:var(--ink);margin:32px 0 10px} .sn-detail-body p{margin:0 0 16px} .sn-detail-body ul{list-style:disc;padding-left:1.35em;margin:0 0 16px} /* ============================================================ 36. PROJECTGALERIJ (v1.2.5) Raster in plaats van een slider; klik opent de bestaande lightbox. ============================================================ */ .sn-projectgalerij{padding:64px 0 100px} .sn-gal-kop{font-size:1.5rem;font-weight:800;color:var(--ink);margin:0 0 1.4rem} .sn-gal-grid{display:grid;gap:16px;grid-template-columns:repeat(3,1fr)} .sn-gal-grid[data-kolommen="2"]{grid-template-columns:repeat(2,1fr)} .sn-gal-grid[data-kolommen="4"]{grid-template-columns:repeat(4,1fr)} .sn-gal-item{display:block;overflow:hidden;border-radius:var(--r);aspect-ratio:4/3;background:var(--sand);cursor:zoom-in} .sn-gal-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease} .sn-gal-item:hover img{transform:scale(1.05)} @media(max-width:1024px){.sn-gal-grid,.sn-gal-grid[data-kolommen="4"]{grid-template-columns:repeat(2,1fr)}} @media(max-width:600px){.sn-gal-grid,.sn-gal-grid[data-kolommen="2"],.sn-gal-grid[data-kolommen="4"]{grid-template-columns:1fr}} /* ============================================================ 37. PROJECTDETAIL: eigen hero-addon (v1.2.6) De vorige hero hing af van een class op de SP Page Builder-kolom. Die opmaak pakte niet, waardoor de titel bovenaan over het menu viel. De hero is nu een eigen addon met exact dezelfde opbouw als de hero's op de andere pagina's, dus dezelfde opmaak en hetzelfde gedrag. ============================================================ */ .hero.hero--project{min-height:clamp(360px,56vh,640px);height:auto;align-items:flex-end} .hero--project .hero-content{padding-bottom:56px} .hero-card--project{max-width:900px;padding:34px 40px 32px} .hero-card--project h1{font-size:clamp(1.9rem,3.6vw,3.1rem);margin:0} .hero-card--project .hero-eyebrow{margin-bottom:.7rem} .hero-terug{display:inline-flex;align-items:center;gap:9px;margin-top:1.4rem; color:#fff;text-decoration:none;font-size:.82rem;font-weight:700; letter-spacing:.08em;text-transform:uppercase;opacity:.85;transition:opacity .2s} .hero-terug:hover{opacity:1;color:#fff} @media(max-width:768px){.hero-card--project{padding:24px 22px}} /* knoprand met wat meer gewicht in de selector, zodat een latere basisregel hem niet alsnog overschrijft */ body.site .btn.btn-outline{border:2px solid rgba(255,255,255,.85)} body.site .btn.btn-outline:hover{border-color:#fff;background:rgba(255,255,255,.14)} body.site .btn.btn-white{border:2px solid #fff} body.site .btn.btn-outline-dark{border:2px solid var(--green)} /* ============================================================ 38. CORRECTIES OP GEMETEN WAARDEN (v1.2.7) ------------------------------------------------------------ Gemeten op de live site bij viewport 1534 (kantlijn 1320): - logo begon op 163px i.p.v. 148px: de Bootstrap-kolommen in de header zetten er nog 15px padding bij bovenop de 48px gutter. - de Contact-knop was 70px hoog in een balk van 72px en eindigde op 1351 i.p.v. 1372, dus niet op de kantlijn. - SP Page Builder laadt zijn stylesheet NA custom.css. Regels met maar één class verliezen het daardoor van SPPB. Alles wat een door SPPB gerenderd element opmaakt staat hier daarom met body.site ervoor en waar nodig !important. ============================================================ */ /* -- header: logo en menu exact op de kantlijn ---------------------------- */ body.site #sp-header.sn-header #sp-logo, body.site #sp-header.sn-header #sp-menu{padding-left:0!important;padding-right:0!important} body.site #sp-header.sn-header .container-inner > .row{margin-left:0!important;margin-right:0!important} /* -- Contact-knop: echte knop in plaats van een blok over de volle balk --- */ body.site #sp-header.sn-header .sp-megamenu-parent > li > a.nav-cta-item, body.site #sp-header.sn-header .sp-megamenu-parent > li.nav-cta-item > a{ height:auto!important;line-height:1.2!important;padding:11px 20px!important; margin:0 0 0 12px!important;border-radius:4px} body.site #sp-header.sn-header .sp-megamenu-parent > li:last-child{margin-right:0} /* -- projectensectie: kop links, knop rechts, raster eronder -------------- */ .proj-kop{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:2.2rem} .proj-kop-tekst{max-width:760px} .proj-kop h2{margin:0} .proj-kop-knop{flex-shrink:0;white-space:nowrap} @media(max-width:768px){.proj-kop{flex-direction:column;align-items:flex-start;gap:1.2rem}} /* -- projectdetail: tekst had geen ruimte onder de hero ------------------- */ body.site .sppb-dynamic-content-text.sn-detail-intro{ font-size:1.12rem!important;line-height:1.7!important;color:var(--body); max-width:820px;margin:56px 0 0!important} body.site .sppb-dynamic-content-text.sn-detail-body{ max-width:820px;margin:22px 0 0!important;line-height:1.75} body.site .sppb-dynamic-content-text.sn-detail-body h2{font-size:1.5rem;font-weight:800;color:var(--ink);margin:30px 0 10px} body.site .sppb-dynamic-content-text.sn-detail-body p{margin:0 0 16px} /* -- galerij en projectnavigatie sloten met te veel lucht op elkaar aan --- */ .sn-projectgalerij{padding:72px 0 56px} .sn-projectnav{display:flex;align-items:center;justify-content:space-between;gap:1.5rem; padding:26px 0 0;margin:0;border-top:1px solid rgba(0,0,0,.1)} .sn-projectnav > span:empty{flex:1 1 0;min-width:0} .sn-projectnav .btn{flex-shrink:0} /* ============================================================ 39. MENU EXACT GELIJK AAN DE OORSPRONKELIJKE SITE (v1.2.8) ------------------------------------------------------------ Beide menu's naast elkaar gemeten bij viewport 1534: oude site was hier nu logohoogte 56px 65px 56px linktekst 13.92px (600) 16px (400) 13.92px (600) linkpadding 8px 14px 0px 8px 14px linkhoogte 40px 70px 40px actief wit 10% wit 14% wit 10% Contact-knop 8px 14px 11px 20px 8px 14px rechterkant 1372px 1351px 1372px Waarom het eerder niet pakte: Helix schrijft zijn menuregels met TWEE id's (#sp-header #sp-menu ...). Dat weegt zwaarder dan mijn selector met één id. Vandaar dezelfde opbouw plus !important. ============================================================ */ body.site #sp-header.sn-header #sp-menu .sp-megamenu-parent > li > a, body.site #sp-header.sn-header #sp-menu .sp-megamenu-parent > li > span{ font-size:.87rem!important;font-weight:600!important; padding:8px 14px!important;line-height:1.2!important;height:auto!important; border-radius:4px!important;color:rgba(255,255,255,.82)!important; display:inline-block!important;vertical-align:middle} body.site #sp-header.sn-header #sp-menu .sp-megamenu-parent > li > a:hover{ color:#fff!important;background:rgba(255,255,255,.1)!important} body.site #sp-header.sn-header #sp-menu .sp-megamenu-parent > li.active > a, body.site #sp-header.sn-header #sp-menu .sp-megamenu-parent > li.current > a{ background:rgba(255,255,255,.1)!important;color:#fff!important} body.site #sp-header.sn-header #sp-menu .sp-megamenu-parent > li{margin:0 1px!important} body.site #sp-header.sn-header #sp-menu .sp-megamenu-parent{margin-right:0!important} body.site #sp-header.sn-header #sp-menu .sp-megamenu-parent > li:last-child{margin-right:0!important} /* Contact: zelfde maatvoering als de andere items, alleen groen */ body.site #sp-header.sn-header #sp-menu .sp-megamenu-parent > li > a.nav-cta-item, body.site #sp-header.sn-header #sp-menu .sp-megamenu-parent > li.nav-cta-item > a{ background:var(--green)!important;color:#fff!important; padding:8px 14px!important;margin-left:6px!important;border-radius:4px!important} body.site #sp-header.sn-header #sp-menu .sp-megamenu-parent > li > a.nav-cta-item:hover, body.site #sp-header.sn-header #sp-menu .sp-megamenu-parent > li.nav-cta-item > a:hover{ background:var(--green-dark)!important} /* logo op 56px, precies zoals de oude site */ body.site #sp-header.sn-header .container-inner{min-height:72px} /* ============================================================ 40. PROJECTNAVIGATIE (v1.2.8) De balk stond 15px binnen de kantlijn en plakte met 0px tegen de groene band eronder. Hij zit nu in dezelfde .wrap als de rest. ============================================================ */ .sn-projectnav-sectie{padding:0 0 72px} .sn-projectnav{display:flex;align-items:center;justify-content:space-between;gap:1.5rem; padding:26px 0 0;margin:0;border-top:1px solid rgba(0,0,0,.1)} .sn-projectnav > span:empty{flex:1 1 0} .sn-projectnav .btn{flex-shrink:0} /* footerlogo: hetzelfde kleurenlogo als in het menu */ .sn-footer .foot-logo-img{height:56px;width:auto;max-width:250px;object-fit:contain;display:block;margin-bottom:1.1rem} /* ============================================================ 41. MENU volgens de vaste MMX-aanpak (v1.2.9) ------------------------------------------------------------ Overgenomen uit de twee eerder op deze manier gebouwde sites. Die lossen exact dezelfde twee Helix-eigenaardigheden zo op: 1. Bootstrap zet gutters op de headerkolommen -> #sp-logo/#sp-menu padding 0 2. Helix zet kleur, achtergrond en hoogte vast -> !important op die drie 3. font-size:0 op de