@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap'); /* ============================================================ Involv Header & Footer — design-system chrome Tokens op .ihf (header-top, navy bar, mobiel menu en footer dragen die class). ============================================================ */ .ihf{ --navy:#111926;--navy-2:#202F47;--pink:#C5416A;--red:#E9514B;--yellow:#FFE746; --green:#2eab6f;--grad-warm:linear-gradient(135deg,#C5416A,#E9514B); --container:1180px;--paper-ink:#16202f; font-family:'Poppins',sans-serif; } .ihf *{box-sizing:border-box} /* Horizontale overflow wegklemmen op de root (viewport). De DS-fix zet dit op , maar de scrollbar zit op → daar moet de clip staan. `clip` is sticky-veilig (breekt de sticky menubalk niet, i.t.t. overflow:hidden). Getest: overflow → 0. */ html{overflow-x:clip} /* Dubbele scrollbar wegwerken: het Jupiter-thema zet `body{overflow-x:hidden}` → een element met overflow-x:hidden is een SCROLL-CONTAINER en krijgt overflow-y:auto → de body toont een tweede verticale scrollbar bovenop die van het venster (+ smal wit strookje rechts). `clip` klemt horizontaal wél af maar maakt GEEN scroll-container → één scrollbar, sticky-veilig. */ body{overflow-x:clip!important} /* Full-bleed content uitlijnen met onze (body-level) header/footer. De WPBakery-rij heeft margin-left/right:-15px + max-width → de rechter -15px wordt door de max-width geslikt, dus de rij staat 15px links-scheef. De .involv full-bleed erft die scheefstand → de content liep niet symmetrisch (−22/1898 i.p.v. symmetrisch) en dus niet gelijk met de header/footer. Rij-marge neutraliseren → content lijnt strak (getest 2026-07-14 door Louis). */ body:has(.involv:not([class*="mk-"]):not([class*="vc_"])) .wpb_row.vc_row{margin-left:0!important;margin-right:0!important} /* ---- Verberg de Jupiter-thema-header + -footer + oude promo-banner ---- Deze CSS laadt enkel op pagina's waar de plugin rendert (conditionele enqueue), dus de rest van de site blijft ongemoeid. */ .mk-header,.mk-header-holder,.mk-header-toolbar,.mk-header-toolbar-holder,.mk-header-bg,.simple-banner,#Header, #iab-banner, #Footer,#mk-footer,.mk-footer,.mk-footer-copyright,#sub-footer,.master-holder-footer,.footer-wrapper,.footer-cta-band,.footer-cta-wrap,#promo-above-footer{display:none!important} #theme-page,.theme-page-wrapper,.mk-main-wrapper{padding-top:0!important;margin-top:0!important} /* ============================================================ TOP-STROOK (roze aankondigingsbalk + zwevende taalswitcher) — scrollt weg ============================================================ */ .iv-top{position:relative;z-index:2200} .iv-util{background:var(--pink);color:#fff;overflow:hidden;max-height:60px;transition:max-height .45s cubic-bezier(.4,0,.2,1)} .iv-util.is-closed{max-height:0} .iv-util.is-preinit{max-height:0}/* start verborgen; JS onthult na de ingestelde vertraging → geen flits, ook niet bij een gesloten balk */ .iv-util__row{position:relative;max-width:var(--container);margin:0 auto;padding:8px 52px;display:flex;align-items:center;justify-content:center} .iv-util__news{display:inline-flex;align-items:center;min-width:0} .iv-anno__slides{position:relative;display:inline-block;min-width:0} .iv-anno__slide{position:absolute;left:0;top:0;white-space:nowrap;color:#fff;font-size:13px;font-weight:500;line-height:20px;text-decoration:none;opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s} .iv-anno__slide.is-active{position:relative;opacity:1;visibility:visible} /* color:#fff!important houdt de tekst wit op hover (Jupiter's thema-`a:hover` maakte 'm rood → onzichtbaar op de roze balk). */ .iv-anno__slide:hover{color:#fff!important;text-decoration:underline;text-decoration-color:rgba(255,255,255,.75);text-underline-offset:4px} .iv-anno__close{position:absolute;right:34px;top:50%;transform:translateY(-50%);background:none;border:0;color:rgba(255,255,255,.75);cursor:pointer;display:inline-flex;align-items:center;padding:4px;border-radius:6px;transition:color .15s,background .15s} .iv-anno__close:hover{color:#fff;background:rgba(255,255,255,.18)} /* Taalswitcher: uiterst rechts, verticaal gecentreerd in de navy balk. `right:28px` t.o.v. de nu volle-breedte balk = 28px van de paginarand (scrollbar-veilig, geen vw). Los van de aankondigingsbalk → botst nooit meer met "Plan uw demo". */ .iv-lang-float{position:absolute;top:50%;transform:translateY(-50%);right:28px;z-index:2100;display:inline-flex;align-items:center} .iv-lang__toggle{background:transparent;border:0;border-radius:10px;color:#fff;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:8px 13px;box-shadow:none} .iv-lang__toggle svg{transition:transform .2s} .iv-lang-float:hover .iv-lang__toggle svg,.iv-lang-float.is-open .iv-lang__toggle svg{transform:rotate(180deg)} .iv-lang__menu{position:absolute;right:0;top:calc(100% + 8px);background:#fff;border-radius:12px;box-shadow:0 18px 44px -14px rgba(0,0,0,.45);padding:8px;min-width:158px;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .16s,transform .16s,visibility .16s} .iv-lang-float:hover .iv-lang__menu,.iv-lang-float.is-open .iv-lang__menu{opacity:1;visibility:visible;transform:translateY(0)} .iv-lang__menu a{color:var(--paper-ink);font-size:14px;font-weight:500;padding:8px 12px;border-radius:8px;text-decoration:none} .iv-lang__menu a:hover{color:var(--pink)} .iv-lang__menu a.is-current{color:var(--pink);font-weight:600} /* ============================================================ NAVY MENU-BAR — blijft sticky bij het scrollen (direct kind van via wp_body_open → hele pagina als plak-ruimte) ============================================================ */ /* Volledige breedte via padding-centrering (GEEN 100vw → geen scrollbar-overflow; vroeger stak de ::before-full-bleed ~15px voorbij de body onder de scrollbar). */ .iv-hdr__bar{position:sticky;top:0;z-index:2000;display:flex;align-items:center;gap:38px;padding:5px max(36px, calc((100% - var(--container)) / 2));background:var(--navy)} /* Defensief: neutraliseer een eventuele ::before-full-bleed die van paginastijlen (oude sandbox-CSS met datzelfde .iv-hdr__bar) op onze header lekt → die 100vw-pseudo veroorzaakte anders een horizontale scrollbar. Hogere specificiteit + !important wint. */ .ihf.iv-hdr__bar::before{content:none!important} /* admin-balk-compensatie (enkel voor ingelogde admins in preview-modus) */ .admin-bar .iv-hdr__bar{top:32px} @media(max-width:782px){.admin-bar .iv-hdr__bar{top:46px}} .iv-hdr__logo{display:inline-flex;flex-shrink:0;padding-right:6px} .iv-hdr__logo img{height:75px;width:auto;display:block} .iv-hdr__nav{display:flex;align-items:center;gap:6px} .iv-hdr__nav > a,.iv-drop > button{background:none;border:0;cursor:pointer;font-family:inherit;color:#fff;font-size:15px;font-weight:500;text-decoration:none;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px} .iv-hdr__nav > a:hover,.iv-drop:hover > button{color:#fff;text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:2px;text-underline-offset:7px} .iv-drop{position:relative} .iv-drop > button svg{transition:transform .2s} .iv-drop:hover > button svg{transform:rotate(180deg)} .iv-drop__menu{position:absolute;top:calc(100% + 6px);left:0;background:#fff;border-radius:14px;box-shadow:0 24px 60px -14px rgba(0,0,0,.45);padding:10px;min-width:250px;display:flex;flex-direction:column;gap:1px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s,transform .18s,visibility .18s} .iv-drop:hover .iv-drop__menu{opacity:1;visibility:visible;transform:translateY(0)} .iv-drop__menu a{color:var(--paper-ink);font-size:14px;font-weight:500;padding:10px 13px;border-radius:9px;text-decoration:none;transition:color .15s} .iv-drop__menu a:hover{color:var(--pink)} .iv-drop__label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#98a2b3;padding:10px 13px 4px} .iv-drop__sep{height:1px;background:rgba(17,25,38,.08);margin:6px 4px} /* mega-menu: uitgelicht + 2 kolommen (Klanten opent naar rechts vanaf links; Bronnen idem) */ .iv-drop__menu.iv-drop__menu--klanten{min-width:500px;left:0;right:auto;padding:14px} .iv-drop__menu.iv-drop__menu--bronnen{min-width:480px;left:0;right:auto;padding:14px} .iv-drop__feat{color:var(--pink)!important;font-weight:600} .iv-drop__cols{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;margin-top:2px} .iv-drop__col{display:flex;flex-direction:column;min-width:0} .iv-hdr__cta{margin-left:auto;display:flex;align-items:center;gap:12px} .iv-hdr__ghost{border:1.5px solid rgba(255,255,255,.55);color:#fff;border-radius:10px;padding:9px 18px;font-size:14px;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:border-color .2s,background .2s} .iv-hdr__ghost:hover{border-color:var(--red);color:var(--red)!important;text-decoration:none!important} .iv-hdr__demo{background:var(--grad-warm);color:#fff;border-radius:10px;padding:11px 22px;font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap;transition:filter .18s} /* Hover: propere darken van de gradient; tekst expliciet wit + geen underline (!important verslaat Jupiter's thema-`a:hover` die anders de tekstkleur/underline overneemt). */ .iv-hdr__demo:hover{filter:brightness(.93);color:#fff!important;text-decoration:none!important;box-shadow:none} /* ---- Mobiel: hamburger + slide-in drawer ---- */ .iv-burger{display:none;margin-left:auto;background:none;border:0;color:#fff;cursor:pointer;padding:8px;border-radius:8px;line-height:0} .iv-burger:hover{background:rgba(255,255,255,.1)} /* overflow:hidden = klemt het off-canvas-paneel in (staat dicht op translateX(100%), ~380px voorbij de rechterrand) → geen horizontale scrollbar / paginaverschuiving meer. */ .iv-mnav{position:fixed;inset:0;z-index:3000;visibility:hidden;pointer-events:none;transition:visibility .34s;overflow:hidden} .iv-mnav.is-open{visibility:visible;pointer-events:auto} .iv-mnav__overlay{position:absolute;inset:0;background:rgba(17,25,38,.55);opacity:0;transition:opacity .34s} .iv-mnav.is-open .iv-mnav__overlay{opacity:1} .iv-mnav__panel{position:absolute;top:0;right:0;height:100%;width:min(88vw,380px);background:#fff;box-shadow:-24px 0 70px -24px rgba(0,0,0,.4);transform:translateX(100%);transition:transform .34s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;overflow-y:auto;font-family:'Poppins',sans-serif} .iv-mnav.is-open .iv-mnav__panel{transform:translateX(0)} .iv-mnav__head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid rgba(17,25,38,.1)} .iv-mnav__head img{height:32px;width:auto;display:block} .iv-mnav__close{background:none;border:0;color:var(--navy);cursor:pointer;padding:6px;line-height:0} .iv-mnav__body{padding:6px 12px;flex:1 0 auto} .iv-macc{border-bottom:1px solid rgba(17,25,38,.07)} .iv-mnav .iv-macc__btn,.iv-mnav .iv-mnav__link{width:100%;background:none;border:0;color:var(--navy);font-family:inherit;font-size:15.5px;font-weight:500;text-align:left;padding:15px 8px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;text-decoration:none} .iv-mnav__link{border-bottom:1px solid rgba(17,25,38,.07)} .iv-macc__btn svg{flex-shrink:0;color:#98a2b3;transition:transform .25s} .iv-macc.is-open .iv-macc__btn svg{transform:rotate(180deg)} .iv-macc__panel{max-height:0;overflow:hidden;transition:max-height .3s ease} .iv-macc__panel a{display:block;color:#475467;font-size:14.5px;font-weight:400;padding:9px 8px 9px 20px;text-decoration:none} .iv-macc__panel a:hover{color:var(--pink)} .iv-macc__panel .iv-drop__label{color:#98a2b3;padding:12px 8px 4px 20px} .iv-macc__panel .iv-drop__sep{background:rgba(17,25,38,.08);margin:6px 8px 6px 20px} .iv-mnav__lang{display:flex;gap:8px;padding:14px 16px 24px;border-top:1px solid rgba(17,25,38,.1);flex-wrap:wrap} .iv-mnav__lang a{display:inline-flex;align-items:center;gap:8px;color:var(--navy);border:1px solid rgba(17,25,38,.15);border-radius:9px;padding:8px 12px;font-size:13px;font-weight:500;text-decoration:none} .iv-mnav__lang a.is-current{background:var(--pink);border-color:var(--pink);color:#fff} .iv-mnav__cta{display:flex;flex-direction:column;gap:10px;padding:14px 16px} .iv-mnav__cta .iv-hdr__ghost,.iv-mnav__cta .iv-hdr__demo{width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;text-align:center;font-size:15px;font-weight:600;padding:14px 18px} .iv-mnav__cta .iv-hdr__ghost{border-color:rgba(17,25,38,.25);color:var(--navy)} /* ---- Compacte desktop-tier: smal maar nog niet mobiel (1081–1360px) ---- Twee problemen die hier ontstaan: (1) de absolute taalswitcher (right:28px) botst met "Plan uw demo" zodra de balk-padding op de 36px-vloer zit; (2) "Video tour" brak op 2 regels. Oplossing: balk verdichten (kleiner logo, kleinere gaps/knoppen) + rechts een gutter reserveren waarin de switcher valt (padding-right, terwijl de switcher op right:28px in die gutter blijft staan). */ @media(min-width:1081px) and (max-width:1360px){ .iv-hdr__bar{gap:14px;padding-right:104px} /* links houdt de max()-waarde uit de basis; rechts = gutter voor de switcher */ .iv-hdr__logo img{height:52px} .iv-hdr__nav{gap:1px} .iv-hdr__nav > a,.iv-drop > button{font-size:14px;padding:8px 9px;gap:4px} .iv-hdr__cta{gap:8px} .iv-hdr__ghost{padding:8px 13px} .iv-hdr__demo{padding:10px 15px} .iv-lang-float{right:24px} .iv-lang__toggle{padding:8px 8px} } @media(max-width:1080px){ .iv-util{display:none!important} .iv-lang-float{display:none} .iv-hdr__nav{display:none} .iv-hdr__cta{display:none} .iv-burger{display:inline-flex} .iv-hdr__bar{padding:12px 18px;gap:12px} .iv-hdr__logo img{height:46px} .iv-macc__panel .iv-drop__cols{grid-template-columns:1fr;gap:0} } /* ============================================================ FOOTER (navy) — 5 kolommen + onderbalk met logo net boven de copyright ============================================================ */ .ihf-foot{background:var(--navy);color:rgba(255,255,255,.72);padding:64px 0 0} .ihf-foot .iv-ftr__inner{max-width:var(--container);margin:0 auto;padding:0 36px} .ihf-foot .iv-ftr__top{display:grid;grid-template-columns:repeat(5,1fr);gap:36px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.1)} .ihf-foot .iv-ftr__col h4{color:#fff;font-size:14px;font-weight:700;margin:0 0 14px;letter-spacing:.01em} .ihf-foot .iv-ftr__col a{display:block;color:rgba(255,255,255,.7);text-decoration:none;font-size:14px;padding:5px 0;transition:color .15s} .ihf-foot .iv-ftr__col a:hover{color:#fff} /* Onderbalk: logo net boven "© 2026 Involv intranet" */ .ihf-foot .iv-ftr__bottom{max-width:var(--container);margin:0 auto;padding:26px 36px 42px;display:flex;justify-content:space-between;align-items:flex-end;gap:16px 24px;flex-wrap:wrap} .ihf-foot .iv-ftr__brandlow{display:flex;flex-direction:column;gap:12px} .ihf-foot .iv-ftr__brandlow img{height:42px;width:auto;max-width:200px;display:block} .ihf-foot .iv-ftr__brandlow span{font-size:13px;color:rgba(255,255,255,.6)} .ihf-foot .iv-ftr__legal a{color:rgba(255,255,255,.6);text-decoration:none;font-size:13px;margin-left:18px;transition:color .15s} .ihf-foot .iv-ftr__legal a:hover{color:#fff} @media(max-width:900px){.ihf-foot .iv-ftr__top{grid-template-columns:1fr 1fr;gap:32px 28px}} @media(max-width:560px){.ihf-foot .iv-ftr__top{grid-template-columns:1fr}.ihf-foot .iv-ftr__bottom{flex-direction:column;align-items:flex-start;gap:18px}}