/* ========================================================================== VWE Mobile Menu v1.1 Alle zichtbaarheid hangt aan twee classes op : .vwe-mm-ready de plugin draait .vwe-mm-collapsed onder het breakpoint, plugin neemt de navigatie over ========================================================================== */ :root { --vwe-mm-orange: #e1460a; --vwe-mm-gold: #aa7d24; --vwe-mm-green: #74b43e; --vwe-mm-ink: #14181f; --vwe-mm-muted: #4b5563; --vwe-mm-line: rgba(20, 24, 31, 0.09); --vwe-mm-width: min(420px, 100vw); --vwe-mm-radius: 28px; --vwe-mm-z: 999999; /* boven admin bar (99999) en Divi sticky */ --vwe-mm-pad: 26px; --vwe-mm-bar: #ffffff; /* wordt door JS gezet op basis van de menukleur */ } /* -------------------------------------------------------------------------- Zichtbaarheid: onze knop aan, alles van Divi mobile nav uit. #page-container in de selector zorgt dat we elke !important-regel van het (child) theme verslaan. -------------------------------------------------------------------------- */ .vwe-mm-toggle { display: none; } html.vwe-mm-ready.vwe-mm-collapsed .vwe-mm-toggle { display: inline-flex; } html.vwe-mm-ready.vwe-mm-collapsed #page-container .et_mobile_nav_menu, html.vwe-mm-ready.vwe-mm-collapsed #page-container .mobile_nav, html.vwe-mm-ready.vwe-mm-collapsed #page-container .et_mobile_menu { display: none !important; visibility: hidden !important; } /* Desktopmenu weg zodra wij actief zijn, ongeacht wat het theme doet. */ html.vwe-mm-ready.vwe-mm-collapsed #page-container .hoofd-menu .et_pb_menu__menu { display: none !important; } /* Boven het breakpoint houden we ons volledig stil. */ html.vwe-mm-ready:not(.vwe-mm-collapsed) #vwe-mm { display: none !important; } /* -------------------------------------------------------------------------- Hamburger -------------------------------------------------------------------------- */ .vwe-mm-toggle { position: relative; align-items: center; justify-content: center; flex: 0 0 auto; width: 46px; height: 46px; margin: 0 0 0 8px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } .vwe-mm-toggle:focus-visible { outline: 2px solid var(--vwe-mm-orange); outline-offset: 2px; border-radius: 6px; } .vwe-mm-toggle.is-floating { position: fixed; top: calc(14px + var(--vwe-mm-admin, 0px)); right: 14px; z-index: calc(var(--vwe-mm-z) + 2); border-radius: 12px; background: rgba(20, 24, 31, 0.85); } .vwe-mm-toggle.is-floating .vwe-mm-toggle__bar { background: #fff !important; } .vwe-mm-toggle__box { position: relative; display: block; width: 26px; height: 16px; } .vwe-mm-toggle__bar { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: var(--vwe-mm-bar); transform-origin: 50% 50%; transition: background-color 0.3s ease; } .vwe-mm-toggle__bar:nth-child(1) { top: 0; } .vwe-mm-toggle__bar:nth-child(2) { top: 7px; } .vwe-mm-toggle__bar:nth-child(3) { top: 14px; } /* Vangnetten voor de kleur, ook als JS de kleur niet kan lezen. */ .et_pb_sticky .vwe-mm-toggle__bar, .has_et_pb_sticky .vwe-mm-toggle__bar { background: var(--vwe-mm-ink); } /* -------------------------------------------------------------------------- Lade -------------------------------------------------------------------------- */ .vwe-mm { position: fixed; inset: 0; z-index: var(--vwe-mm-z); font-family: var(--et_global_body_font, "Poppins", sans-serif); } .vwe-mm[hidden] { display: none !important; } .vwe-mm__overlay { position: absolute; inset: 0; background: rgba(12, 15, 20, 0.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; cursor: pointer; } .vwe-mm__panel { position: absolute; top: 0; right: 0; display: flex; flex-direction: column; width: var(--vwe-mm-width); max-width: 100%; height: 100%; height: 100dvh; background: #fff; border-radius: var(--vwe-mm-radius) 0 0 var(--vwe-mm-radius); box-shadow: -24px 0 60px -18px rgba(15, 23, 42, 0.35); overflow: hidden; transform: translateX(102%); touch-action: pan-y; will-change: transform; } /* Signature: de sectie-gradient van de site, tekent zich open met de lade. */ .vwe-mm__accent { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--vwe-mm-orange) 0%, var(--vwe-mm-gold) 50%, var(--vwe-mm-green) 100%); transform: scaleX(0); transform-origin: left center; z-index: 2; } .vwe-mm__head { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; padding: 22px var(--vwe-mm-pad) 10px; } .vwe-mm__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--vwe-mm-muted); } .vwe-mm__close { position: relative; width: 42px; height: 42px; margin-right: -8px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } .vwe-mm__close span { position: absolute; top: 50%; left: 50%; width: 20px; height: 2px; margin: -1px 0 0 -10px; border-radius: 2px; background: var(--vwe-mm-ink); } .vwe-mm__close span:nth-child(1) { transform: rotate(45deg); } .vwe-mm__close span:nth-child(2) { transform: rotate(-45deg); } .vwe-mm__close:focus-visible, .vwe-mm__sub-toggle:focus-visible { outline: 2px solid var(--vwe-mm-orange); outline-offset: 2px; } /* -------------------------------------------------------------------------- Navigatie — alles met !important-gevoelige resets tegen Divi/child CSS -------------------------------------------------------------------------- */ .vwe-mm__nav { flex: 1 1 auto; padding: 4px var(--vwe-mm-pad) 8px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .vwe-mm__nav ul, .vwe-mm__nav li { list-style: none !important; margin: 0 !important; padding: 0 !important; border: 0; background: none; width: auto !important; text-align: left !important; display: block; } .vwe-mm__menu > li { border-bottom: 1px solid var(--vwe-mm-line); } .vwe-mm__row { display: flex !important; align-items: center; justify-content: space-between; gap: 10px; } .vwe-mm__nav a { background: none !important; text-decoration: none !important; transition: color 0.2s ease; } .vwe-mm__menu > li > a, .vwe-mm__menu > li > .vwe-mm__row > a { display: block; flex: 1 1 auto; padding: 15px 0 !important; border: 0 !important; font-size: 18px !important; font-weight: 600; line-height: 1.3; color: var(--vwe-mm-ink) !important; } .vwe-mm__menu > li > a:hover, .vwe-mm__menu > li > .vwe-mm__row > a:hover, .vwe-mm__menu > li.current-menu-item > a, .vwe-mm__menu > li.current-menu-ancestor > .vwe-mm__row > a { color: var(--vwe-mm-orange) !important; } /* Submenu */ .vwe-mm__sub { height: 0; overflow: hidden; } .vwe-mm__sub > li > a, .vwe-mm__sub > li > .vwe-mm__row > a { position: relative; display: block; flex: 1 1 auto; padding: 10px 0 10px 18px !important; font-size: 16px !important; font-weight: 500; line-height: 1.4; color: var(--vwe-mm-muted) !important; } .vwe-mm__sub > li > a::before, .vwe-mm__sub > li > .vwe-mm__row > a::before { content: "\203A"; position: absolute; left: 2px; top: 50%; transform: translateY(-55%); font-family: inherit; font-weight: 700; color: var(--vwe-mm-orange); } .vwe-mm__sub > li > a:hover, .vwe-mm__sub > li > .vwe-mm__row > a:hover, .vwe-mm__sub > li.current-menu-item > a { color: var(--vwe-mm-ink) !important; } /* Derde niveau */ .vwe-mm__sub .vwe-mm__sub { padding-bottom: 6px !important; } .vwe-mm__sub .vwe-mm__sub > li > a { padding-left: 34px !important; font-size: 15px !important; } .vwe-mm__sub .vwe-mm__sub > li > a::before { content: ""; left: 18px; top: 50%; width: 6px; height: 1px; background: var(--vwe-mm-line); transform: none; } /* Disciplines in hun eigen kleur, zoals de pills op de referentiepagina. */ .vwe-mm-item--elektrotechniek > .vwe-mm__row > a::before, .vwe-mm-item--elektrotechniek > a::before { color: var(--vwe-mm-orange); } .vwe-mm-item--paneelbouw > .vwe-mm__row > a::before, .vwe-mm-item--paneelbouw > a::before, .vwe-mm-item--wepan-paneelbouw > .vwe-mm__row > a::before { color: var(--vwe-mm-green); } /* Openknop per submenu */ .vwe-mm__sub-toggle { position: relative; flex: 0 0 auto; width: 34px; height: 34px; padding: 0; border: 1.5px solid transparent; border-radius: 999px; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, var(--vwe-mm-orange), var(--vwe-mm-green)) border-box; cursor: pointer; -webkit-tap-highlight-color: transparent; } .vwe-mm__sub-toggle::before, .vwe-mm__sub-toggle::after { content: ""; position: absolute; top: 50%; left: 50%; background: var(--vwe-mm-ink); transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); } .vwe-mm__sub-toggle::before { width: 12px; height: 2px; margin: -1px 0 0 -6px; } .vwe-mm__sub-toggle::after { width: 2px; height: 12px; margin: -6px 0 0 -1px; } .vwe-mm__sub-toggle[aria-expanded="true"]::after { transform: scaleY(0); } .vwe-mm__sub-toggle[aria-expanded="true"]::before { transform: rotate(180deg); } /* Contact-item met de knopvorm van de site. */ .vwe-mm__menu > li.menu-knop { border-bottom: 0; margin: 20px 0 4px !important; } .vwe-mm__menu > li.menu-knop > a { display: block; padding: 15px 26px !important; border: 1px solid var(--vwe-mm-ink) !important; border-radius: 0 0 15px 0; font-size: 16px !important; font-weight: 600; text-align: center; color: var(--vwe-mm-ink) !important; line-height: 1.3 !important; transition: background-color 0.3s ease, color 0.3s ease; } .vwe-mm__menu > li.menu-knop > a:hover { background: var(--vwe-mm-ink) !important; color: #fff !important; } /* -------------------------------------------------------------------------- Voet -------------------------------------------------------------------------- */ .vwe-mm__foot { flex: 0 0 auto; padding: 18px var(--vwe-mm-pad) calc(18px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--vwe-mm-line); background: #fff; } .vwe-mm__foot-intro { margin: 0 0 8px !important; padding: 0 !important; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vwe-mm-muted); } .vwe-mm__foot-link { display: block; padding: 3px 0; font-size: 15px; font-weight: 500; color: var(--vwe-mm-ink) !important; text-decoration: none !important; } .vwe-mm__foot-link:hover { color: var(--vwe-mm-orange) !important; } .vwe-mm__cta { display: block; margin-top: 14px; padding: 13px 24px; border: 2px solid transparent; border-radius: 999px; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, var(--vwe-mm-orange), var(--vwe-mm-green)) border-box; font-size: 15px; font-weight: 600; text-align: center; text-decoration: none !important; color: var(--vwe-mm-ink) !important; } /* -------------------------------------------------------------------------- Scroll-lock (zonder position:fixed, dus geen layout-sprong) -------------------------------------------------------------------------- */ html.vwe-mm-lock, html.vwe-mm-lock body { overflow: hidden !important; touch-action: none; overscroll-behavior: none; } /* -------------------------------------------------------------------------- Terugval zonder GSAP en bij prefers-reduced-motion -------------------------------------------------------------------------- */ .vwe-mm--fallback .vwe-mm__panel { transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1); } .vwe-mm--fallback .vwe-mm__overlay { transition: opacity 0.3s ease; } .vwe-mm--fallback .vwe-mm__accent { transform: scaleX(1); } .vwe-mm--fallback.is-open .vwe-mm__panel { transform: translateX(0); } .vwe-mm--fallback.is-open .vwe-mm__overlay { opacity: 1; } .vwe-mm--fallback .vwe-mm__sub { transition: height 0.3s ease; } @media (max-width: 480px) { :root { --vwe-mm-width: 100vw; --vwe-mm-radius: 0px; --vwe-mm-pad: 22px; } } @media (prefers-reduced-motion: reduce) { .vwe-mm__panel, .vwe-mm__overlay, .vwe-mm__sub, .vwe-mm-toggle__bar, .vwe-mm__sub-toggle::before, .vwe-mm__sub-toggle::after { transition-duration: 0.01ms !important; } }