/* =========================================================== Boxxpro — Landing page styles (built on boxxpro-kit.css tokens) =========================================================== */ *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } /* =========================================================== Debug overlay — numbered image labels (yellow / black) Hidden by default; shown when has the .bx-debug class (toggled by the DebugBar button, or start with ?debug in the URL) =========================================================== */ .bx-dbg{ display:none; } body.bx-debug .bx-dbg{ display:inline-flex; align-items:center; justify-content:center; position:absolute; z-index:9999; background:#ffd400; color:#000; font:800 13px/1 var(--bx-font, system-ui, sans-serif); letter-spacing:.3px; padding:4px 7px; border-radius:6px; border:1px solid rgba(0,0,0,.45); box-shadow:0 2px 6px rgba(0,0,0,.3); pointer-events:none; white-space:nowrap; } /* main image number — sits on the frame (display space), always crisp */ body.bx-debug .bx-dbg--main{ top:8px; left:8px; font-size:18px; padding:6px 12px; border-radius:8px; border-width:2px; } /* popup sub-number — lives inside the scaled scene, so counter-scale it back to a constant on-screen size via --dbg-inv (set from JS) */ body.bx-debug .bx-dbg--pop{ top:0; left:0; transform-origin:top left; transform:scale(var(--dbg-inv, 1)); } /* in debug mode reveal every popup so all labels are identifiable at once */ body.bx-debug .bx-pop{ opacity:1 !important; transform:translate3d(0, var(--py,0px), 0) scale(1) !important; } /* debug on/off toggle button (always visible, fixed corner) */ .bx-dbg-toggle{ position:fixed; left:16px; bottom:16px; z-index:10000; font:800 13px/1 var(--bx-font, system-ui, sans-serif); cursor:pointer; background:#111; color:#fff; border:none; border-radius:999px; padding:10px 16px; box-shadow:0 6px 18px rgba(0,0,0,.3); transition:background .15s ease, color .15s ease; } .bx-dbg-toggle:hover{ background:#000; } body.bx-debug .bx-dbg-toggle{ background:#ffd400; color:#000; } /* while measuring the content box, freeze popups at their settled position */ .bx-measuring .bx-pop{ transform:none !important; opacity:1 !important; transition:none !important; } /* ---- Floating popup entrance + scroll parallax ---- */ .bx-pop{ opacity:0; transform: translate3d(0, calc(var(--py,0px) + 24px), 0) scale(.95); transition: opacity .6s ease, transform .75s cubic-bezier(.16,.84,.28,1); will-change: transform, opacity; } .bx-pop.in{ opacity:1; transform: translate3d(0, var(--py,0px), 0) scale(1); } /* once revealed, switch to a snappy transition so parallax tracks the scroll live */ .bx-pop.settled{ transition: transform .12s linear, opacity .4s ease; } @media (prefers-reduced-motion: reduce){ .bx-pop{ opacity:1; transform:none; transition:none; } } body{ margin:0; font-family:var(--bx-font); color:var(--bx-ink); background:#fff; -webkit-font-smoothing:antialiased; line-height:1.5; overflow-x:clip; /* zwevende mockup-chips mogen nooit horizontaal scrollen veroorzaken */ } a{ color:inherit; text-decoration:none; } img{ max-width:100%; display:block; } .lp-wrap{ max-width:1240px; margin:0 auto; padding:0 32px; } /* ---------- Nav ---------- */ .lp-nav{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.82); backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid var(--bx-line); } .lp-nav__in{ display:flex; align-items:center; gap:36px; height:74px; } .lp-nav__brand{ display:inline-flex; align-items:center; text-decoration:none; color:inherit; } .lp-nav__links{ display:flex; gap:30px; margin-left:8px; } .lp-nav__links a{ font-size:15px; font-weight:700; color:var(--bx-ink-2); } .lp-nav__links a:hover{ color:var(--bx-blue); } .lp-nav__cta{ margin-left:auto; display:flex; align-items:center; gap:18px; } .lp-login{ font-size:15px; font-weight:700; color:var(--bx-ink-2); } /* ---------- Mobiele nav (hamburger + dropdown) ---------- */ .lp-nav__toggle{ display:none; align-items:center; justify-content:center; width:44px; height:44px; margin-left:auto; flex:0 0 auto; background:transparent; border:none; border-radius:10px; cursor:pointer; transition:background .15s ease; } .lp-nav__toggle:hover{ background:var(--bx-page); } .lp-burger, .lp-burger::before, .lp-burger::after{ display:block; width:22px; height:2px; border-radius:2px; background:var(--bx-ink); transition:transform .2s ease, top .2s ease, background .2s ease; } .lp-burger{ position:relative; } .lp-burger::before, .lp-burger::after{ content:''; position:absolute; left:0; } .lp-burger::before{ top:-7px; } .lp-burger::after{ top:7px; } .lp-burger.is-x{ background:transparent; } .lp-burger.is-x::before{ top:0; transform:rotate(45deg); } .lp-burger.is-x::after{ top:0; transform:rotate(-45deg); } .lp-nav__mobile{ display:none; flex-direction:column; gap:2px; padding:8px 32px 22px; background:rgba(255,255,255,.97); backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid var(--bx-line); } .lp-nav__mlink{ font-size:17px; font-weight:700; color:var(--bx-ink-2); padding:14px 4px; border-bottom:1px solid var(--bx-line-2); } .lp-nav__mlink:active{ color:var(--bx-blue); } .lp-nav__mobile .lp-btn{ margin-top:14px; justify-content:center; padding:15px 22px; } .lp-btn{ display:inline-flex; align-items:center; gap:9px; cursor:pointer; white-space:nowrap; font-family:var(--bx-font); font-size:15px; font-weight:700; line-height:1; padding:13px 22px; border-radius:12px; border:none; background:var(--bx-blue); color:#fff; box-shadow:0 12px 26px -10px rgba(0,144,223,.65); transition:transform .15s, box-shadow .15s; } .lp-btn:hover{ transform:translateY(-1px); box-shadow:0 16px 32px -10px rgba(0,144,223,.75); } .lp-btn svg{ width:17px; height:17px; } .lp-btn--ghost{ background:#fff; color:var(--bx-ink); border:1px solid var(--bx-line); box-shadow:var(--bx-shadow); } .lp-btn--ghost:hover{ border-color:#cdd8e3; } .lp-btn--lg{ padding:16px 28px; font-size:16.5px; border-radius:14px; } .lp-btn--white{ background:#fff; color:var(--bx-blue-700); box-shadow:0 14px 30px -12px rgba(0,0,0,.35); } .lp-btn--outline-w{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.55); box-shadow:none; } .lp-btn--outline-w:hover{ border-color:#fff; background:rgba(255,255,255,.08); } /* ---------- Hero ---------- */ .lp-hero{ position:relative; overflow:hidden; padding:84px 0 0; background: radial-gradient(80% 60% at 50% -8%, #EAF5FE 0%, transparent 60%), linear-gradient(180deg, #FBFDFF 0%, #F3F8FD 100%); } .lp-hero__top{ text-align:center; max-width:1120px; margin:0 auto; position:relative; } .lp-hero__mascot{ width:84px; height:auto; flex:0 0 auto; margin-right:2px; pointer-events:none; filter:drop-shadow(0 12px 18px rgba(8,40,80,.18)); } @media (max-width:560px){ .lp-hero__mascot{ width:64px; } } .lp-eyebrow{ display:inline-flex; align-items:center; gap:9px; white-space:nowrap; font-size:13px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--bx-blue-700); background:var(--bx-blue-tint); border:1px solid var(--bx-blue-tint2); padding:8px 16px; border-radius:999px; } .lp-eyebrow .d{ width:7px; height:7px; border-radius:50%; background:var(--bx-blue); } .lp-h1{ font-size:62px; line-height:1.04; font-weight:800; letter-spacing:-.03em; margin:26px 0 0; text-wrap:balance; } .lp-h1 em{ font-style:normal; color:var(--bx-blue); } .lp-lead{ font-size:20px; line-height:1.55; color:var(--bx-ink-2); font-weight:500; max-width:900px; margin:22px auto 0; text-wrap:pretty; } .lp-hero__cta{ display:flex; gap:14px; justify-content:center; align-items:center; margin-top:34px; } .lp-hero__note{ margin-top:18px; font-size:14px; font-weight:600; color:var(--bx-muted); } .lp-hero__note b{ color:var(--bx-ink-2); } .lp-hero__art{ position:relative; margin:56px auto 0; max-width:1180px; padding-bottom:90px; } .lp-art-frame{ border-radius:24px; overflow:hidden; box-shadow:var(--bx-shadow-lg); border:1px solid rgba(255,255,255,.6); } /* ---------- Logos / trust ---------- */ .lp-trust{ padding:40px 0; } .lp-trust__lbl{ text-align:center; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--bx-faint); } .lp-logos{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:48px; margin-top:24px; } .lp-logos span{ font-size:22px; font-weight:800; letter-spacing:-.02em; color:#aab6c4; } /* ---------- Section scaffolding ---------- */ .lp-section{ padding:96px 0; } .lp-section--alt{ background:var(--bx-page); } .lp-head{ text-align:center; max-width:720px; margin:0 auto 18px; } .lp-head__mascot{ display:block; width:74px; height:auto; margin:0 auto 14px; filter:drop-shadow(0 10px 18px rgba(8,40,80,.14)); } .lp-cta__mascot{ display:block; width:88px; height:auto; margin:0 auto 16px; filter:drop-shadow(0 14px 24px rgba(0,0,0,.25)); } .lp-kicker{ font-size:14px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--bx-blue); } .lp-h2{ font-size:42px; line-height:1.1; font-weight:800; letter-spacing:-.025em; margin:12px 0 0; text-wrap:balance; } .lp-h2-sub{ font-size:18px; color:var(--bx-ink-2); font-weight:500; margin-top:14px; line-height:1.55; text-wrap:pretty; } /* ---------- Feature rows ---------- */ .lp-feat{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; margin-top:54px; } .lp-feat:first-of-type{ margin-top:64px; } /* Projecten-scene volgt direct op de tegels: extra ruimte zodat de zwevende popups bovenaan loskomen van de tegels erboven */ #projecten{ margin-top:120px; } .lp-feat--rev .lp-feat__art{ order:-1; } .lp-feat__ic{ width:54px; height:54px; border-radius:15px; display:grid; place-items:center; background:var(--bx-blue-tint); color:var(--bx-blue); margin-bottom:22px; } .lp-feat__ic svg{ width:26px; height:26px; } .lp-feat__h{ font-size:32px; font-weight:800; letter-spacing:-.02em; line-height:1.12; } .lp-feat__p{ font-size:17px; line-height:1.6; color:var(--bx-ink-2); margin-top:16px; text-wrap:pretty; } .lp-checks{ list-style:none; padding:0; margin:24px 0 0; display:flex; flex-direction:column; gap:14px; } .lp-checks li{ display:flex; align-items:flex-start; gap:12px; font-size:16px; font-weight:600; color:var(--bx-ink); } .lp-checks .ck{ width:24px; height:24px; border-radius:50%; flex:0 0 auto; margin-top:1px; background:var(--bx-green-tint); color:var(--bx-green); display:grid; place-items:center; } .lp-checks .ck svg{ width:15px; height:15px; } .lp-feat__art .lp-art-frame{ box-shadow:var(--bx-shadow-lg); } .lp-feat__link{ display:inline-flex; align-items:center; gap:7px; margin-top:24px; font-size:16px; font-weight:700; color:var(--bx-blue); transition:gap .15s ease, color .15s ease; } .lp-feat__link svg{ width:17px; height:17px; } .lp-feat__link:hover{ gap:11px; color:var(--bx-blue-700); } /* ---------- Small feature grid ---------- */ .lp-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:56px; } .lp-tile{ background:#fff; border:1px solid var(--bx-line); border-radius:20px; padding:30px; box-shadow:var(--bx-shadow); transition:transform .18s, box-shadow .18s; } .lp-tile:hover{ transform:translateY(-3px); box-shadow:var(--bx-shadow-lg); } .lp-tile__ic{ width:48px; height:48px; border-radius:13px; display:grid; place-items:center; margin-bottom:18px; } .lp-tile__ic svg{ width:23px; height:23px; } .lp-tile h4{ font-size:20px; font-weight:800; letter-spacing:-.01em; margin:0; } .lp-tile p{ font-size:15px; line-height:1.55; color:var(--bx-muted); margin:9px 0 0; } /* ---------- Stats band ---------- */ .lp-band{ position:relative; overflow:hidden; color:#fff; background: radial-gradient(120% 90% at 12% 0%, #1AA6F0 0%, transparent 55%), radial-gradient(120% 120% at 92% 100%, #004f9e 0%, transparent 60%), linear-gradient(150deg,#0a4d96 0%, #073a78 50%, #06305f 100%); } .lp-band__in{ display:grid; grid-template-columns:repeat(4,1fr); gap:34px; padding:64px 0; text-align:center; } .lp-stat__n{ font-size:54px; font-weight:800; letter-spacing:-.03em; line-height:1; } .lp-stat__l{ font-size:15.5px; font-weight:600; color:rgba(255,255,255,.78); margin-top:10px; } .lp-band .lp-blob{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; pointer-events:none; } /* ---------- Quote ---------- */ /* ---------- Reviews (auto-scrolling) ---------- */ .lp-reviews-sec{ padding-top:32px; margin-top:-44px; overflow:hidden; } /* minder ruimte boven (beide secties zijn --alt/grijs) */ .lp-reviews{ margin-top:40px; overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .lp-reviews__track{ display:flex; width:max-content; animation:lp-marquee 50s linear infinite; } .lp-reviews:hover .lp-reviews__track{ animation-play-state:paused; } @keyframes lp-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } .lp-review{ flex:0 0 auto; width:400px; margin:0 24px 0 0; box-sizing:border-box; background:var(--bx-paper); border:1px solid var(--bx-line); border-radius:20px; padding:30px 32px; box-shadow:var(--bx-shadow); display:flex; flex-direction:column; } .lp-review blockquote{ margin:0; font-size:17px; line-height:1.6; color:var(--bx-ink); font-weight:600; text-wrap:pretty; } .lp-review__who{ display:flex; align-items:center; gap:14px; margin-top:auto; padding-top:22px; } .lp-review__av{ width:46px; height:46px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center; color:#fff; font-weight:800; font-size:14.5px; background:#1F4E79; } .lp-review__av--1{ background:var(--bx-green); } .lp-review__av--2{ background:var(--bx-amber); } .lp-review__av--3{ background:var(--bx-purple); } .lp-review__who b{ display:block; font-size:15px; color:var(--bx-ink); } .lp-review__who span{ font-size:13.5px; color:var(--bx-muted); font-weight:600; } @media (prefers-reduced-motion: reduce){ .lp-reviews__track{ animation:none; } .lp-reviews{ overflow-x:auto; } } /* ---------- Pricing ---------- */ /* Billing toggle (Maandelijks / Jaarlijks) */ .lp-bill{ display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:30px; } .lp-bill__row{ display:flex; align-items:center; gap:14px; } .lp-bill__mascot{ width:62px; height:auto; flex:0 0 auto; pointer-events:none; filter:drop-shadow(0 10px 16px rgba(8,40,80,.16)); } @media (max-width:480px){ .lp-bill__mascot{ width:46px; } } .lp-seg{ display:inline-flex; gap:4px; padding:5px; border-radius:999px; background:var(--bx-page); border:1px solid var(--bx-line); } .lp-seg__btn{ appearance:none; border:none; background:transparent; cursor:pointer; font-family:var(--bx-font); font-size:15px; font-weight:700; color:var(--bx-muted); padding:9px 22px; border-radius:999px; display:inline-flex; align-items:center; gap:8px; white-space:nowrap; transition:background .2s ease, color .2s ease, box-shadow .2s ease; } .lp-seg__btn:hover{ color:var(--bx-ink-2); } .lp-seg__btn.is-on{ background:#fff; color:var(--bx-ink); box-shadow:var(--bx-shadow); } .lp-seg__save{ font-size:11.5px; font-weight:800; color:var(--bx-green); background:var(--bx-green-tint); padding:2px 8px; border-radius:999px; } .lp-bill__note{ font-size:14px; font-weight:600; color:var(--bx-muted); } .lp-prices__note{ text-align:center; margin-top:26px; font-size:14px; font-weight:600; color:var(--bx-faint); } .lp-prices{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:40px; align-items:stretch; } .lp-price{ background:#fff; border:1px solid var(--bx-line); border-radius:22px; padding:34px 30px; display:flex; flex-direction:column; box-shadow:var(--bx-shadow); } .lp-price--feat{ border:2px solid var(--bx-blue); box-shadow:var(--bx-shadow-lg); position:relative; } .lp-price__tag{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--bx-blue); color:#fff; font-size:12.5px; font-weight:800; letter-spacing:.04em; padding:6px 16px; border-radius:999px; text-transform:uppercase; } .lp-price__name{ font-size:19px; font-weight:800; } .lp-price__desc{ font-size:14.5px; color:var(--bx-muted); font-weight:500; margin-top:6px; min-height:42px; } .lp-price__amt{ margin:18px 0 4px; display:flex; align-items:baseline; gap:6px; white-space:nowrap; } .lp-price__amt b{ font-size:clamp(34px, 2.6vw, 46px); font-weight:800; letter-spacing:-.03em; } .lp-price__amt span{ font-size:15px; color:var(--bx-muted); font-weight:600; flex:0 0 auto; } .lp-price ul{ list-style:none; padding:0; margin:24px 0 28px; display:flex; flex-direction:column; gap:13px; } .lp-price li{ display:flex; align-items:flex-start; gap:11px; font-size:15px; font-weight:600; color:var(--bx-ink-2); } .lp-price li .ck{ width:20px; height:20px; border-radius:50%; flex:0 0 auto; background:var(--bx-blue-tint); color:var(--bx-blue); display:grid; place-items:center; margin-top:1px; } .lp-price li .ck svg{ width:13px; height:13px; } .lp-price .lp-btn{ margin-top:auto; justify-content:center; width:100%; } /* ---------- CTA ---------- */ .lp-cta{ position:relative; overflow:hidden; border-radius:32px; margin:0 0 0; padding:72px 56px; text-align:center; color:#fff; background: radial-gradient(100% 120% at 10% 0%, #1AA6F0 0%, transparent 55%), linear-gradient(150deg,#0a4d96 0%, #06305f 100%); } .lp-cta h2{ font-size:46px; font-weight:800; letter-spacing:-.03em; margin:0; line-height:1.08; text-wrap:balance; } .lp-cta p{ font-size:19px; color:rgba(255,255,255,.82); margin:18px auto 0; max-width:560px; font-weight:500; } .lp-cta__row{ display:flex; gap:14px; justify-content:center; margin-top:34px; } .lp-cta .lp-blob{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; } /* ---------- Footer ---------- */ .lp-foot{ padding:64px 0 40px; border-top:1px solid var(--bx-line); margin-top:96px; } .lp-foot__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; } .lp-foot__about{ font-size:15px; color:var(--bx-muted); line-height:1.6; margin-top:16px; max-width:280px; } .lp-foot h5{ font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--bx-faint); margin:0 0 16px; } .lp-foot ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px; } .lp-foot a{ font-size:15px; font-weight:600; color:var(--bx-ink-2); } .lp-foot a:hover{ color:var(--bx-blue); } .lp-foot__bar{ display:flex; align-items:center; justify-content:space-between; margin-top:48px; padding-top:24px; border-top:1px solid var(--bx-line); font-size:14px; color:var(--bx-muted); font-weight:600; } /* ---------- Responsive ---------- */ @media (max-width:920px){ .lp-h1{ font-size:44px; } .lp-feat, .lp-grid, .lp-foot__grid, .lp-band__in{ grid-template-columns:1fr; } .lp-feat--rev .lp-feat__art{ order:0; } .lp-nav__links{ display:none; } .lp-nav__cta{ display:none; } .lp-nav__toggle{ display:inline-flex; } .lp-nav__mobile.is-open{ display:flex; } .lp-band__in{ gap:40px; } .lp-cta{ padding:56px 28px; } } /* Pricing + feature tiles: 4 columns → 2 → 1 */ @media (max-width:1080px){ .lp-prices, .lp-grid{ grid-template-columns:repeat(2,1fr); gap:24px; } .lp-price__amt b{ font-size:46px; } } @media (max-width:620px){ .lp-prices, .lp-grid{ grid-template-columns:1fr; } } /* Kleine schermen: eyebrow laten afbreken en CTA-knoppen verticaal stapelen */ @media (max-width:600px){ .lp-hero{ padding-top:56px; } .lp-eyebrow{ flex-wrap:wrap; justify-content:center; white-space:normal; row-gap:7px; font-size:11.5px; letter-spacing:.06em; max-width:100%; } .lp-h1{ font-size:38px; } .lp-h2{ font-size:30px; } .lp-cta h2{ font-size:32px; } .lp-hero__cta{ flex-direction:column; align-items:stretch; gap:12px; } .lp-hero__cta .lp-btn{ width:100%; justify-content:center; } .lp-hero__mascot{ align-self:center; margin:0 0 4px; } .lp-cta__row{ flex-direction:column; } .lp-cta__row .lp-btn{ width:100%; justify-content:center; } } /* =========================================================== Tegel-grids altijd in VOLLE rijen — nooit een halve onderrij .lp-grid → 4 koloms (gebruik bij 4, 8 of 16 tegels) .lp-grid.lp-grid--3 → 3 koloms (gebruik bij 3, 6 of 9 tegels) Breakpoints staan bewust ná de .lp-grid-regels zodat ze winnen. =========================================================== */ .lp-grid--3{ grid-template-columns:repeat(3,1fr); } @media (max-width:980px){ .lp-grid--3{ grid-template-columns:repeat(2,1fr); } } @media (max-width:620px){ .lp-grid--3{ grid-template-columns:1fr; } } /* ---------- Cookie-consent banner (AVG) ---------- */ .cc-banner{ position:fixed; left:16px; right:16px; bottom:16px; z-index:1000; max-width:580px; margin:0 auto; background:#fff; border:1px solid var(--bx-line); border-radius:16px; box-shadow:var(--bx-shadow-lg); padding:18px 20px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; } .cc-txt{ margin:0; flex:1 1 240px; font-size:14px; line-height:1.5; font-weight:500; color:var(--bx-ink-2); } .cc-txt a{ color:var(--bx-blue); font-weight:700; } .cc-btns{ display:flex; gap:10px; flex:0 0 auto; } .cc-btn{ font-family:var(--bx-font); font-size:14px; font-weight:700; cursor:pointer; border:none; border-radius:10px; padding:10px 18px; background:var(--bx-blue); color:#fff; } .cc-btn--ghost{ background:var(--bx-page); color:var(--bx-ink-2); border:1px solid var(--bx-line); } @media (max-width:600px){ .cc-banner{ left:10px; right:10px; bottom:10px; padding:16px; } .cc-btns{ width:100%; } .cc-btn{ flex:1; } } /* =========================================================== Mega-menu (dropdown onder Functies / Oplossingen) =========================================================== */ .lp-has-mega{ position:relative; display:flex; align-items:center; } .lp-mega__btn{ display:inline-flex; align-items:center; gap:5px; cursor:pointer; font-family:var(--bx-font); font-size:15px; font-weight:700; color:var(--bx-ink-2); background:none; border:none; padding:0; } .lp-mega__btn:hover{ color:var(--bx-blue); } .lp-mega__chev{ display:inline-flex; align-items:center; } .lp-mega__btn svg{ transition:transform .2s ease; opacity:.7; } .lp-has-mega:hover .lp-mega__btn svg, .lp-mega__btn[aria-expanded="true"] svg{ transform:rotate(180deg); } /* onzichtbare hover-brug zodat het menu niet sluit bij de gap */ .lp-has-mega::after{ content:''; position:absolute; top:100%; left:-10px; right:-10px; height:18px; } .lp-mega{ position:absolute; top:calc(100% + 14px); left:0; display:grid; grid-auto-flow:column; gap:6px; background:#fff; border:1px solid var(--bx-line); border-radius:18px; box-shadow:var(--bx-shadow-lg); padding:16px; z-index:60; max-width:92vw; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(8px); transition:opacity .18s ease, transform .18s ease; } .lp-has-mega:hover .lp-mega, .lp-mega__btn[aria-expanded="true"] + .lp-mega{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); } .lp-mega__col{ min-width:222px; } .lp-mega__title{ font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--bx-faint); padding:8px 12px 6px; } .lp-mega a{ display:flex; align-items:flex-start; gap:11px; padding:10px 12px; border-radius:12px; transition:background .15s ease; } .lp-mega a:hover{ background:var(--bx-page); } .lp-mega__ic{ width:34px; height:34px; border-radius:10px; flex:0 0 auto; display:grid; place-items:center; background:var(--bx-blue-tint); color:var(--bx-blue); } .lp-mega__ic svg{ width:18px; height:18px; } .lp-mega a > span:not(.lp-mega__ic){ display:flex; flex-direction:column; gap:2px; min-width:0; } .lp-mega a b{ font-size:14.5px; color:var(--bx-ink); font-weight:700; } .lp-mega a > span:not(.lp-mega__ic) > span{ font-size:12.5px; color:var(--bx-muted); } /* mega verbergen wanneer de mobiele nav actief is */ @media (max-width:920px){ .lp-has-mega{ display:none; } } /* mobiel menu: groepen */ .lp-nav__mgroup{ border-bottom:1px solid var(--bx-line-2); padding:4px 0 10px; } .lp-nav__mtitle{ font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--bx-faint); padding:14px 4px 4px; } .lp-nav__msub{ display:block; font-size:16px; font-weight:600; color:var(--bx-ink-2); padding:10px 4px 10px 14px; } .lp-nav__msub:active{ color:var(--bx-blue); } /* =========================================================== Brede footer (merk + 4 kolommen) Regels staan ná de generieke .lp-foot__grid-collapse zodat ze winnen. =========================================================== */ .lp-foot__grid--wide{ grid-template-columns:1.6fr repeat(4,1fr); } @media (max-width:1024px){ .lp-foot__grid--wide{ grid-template-columns:repeat(3,1fr); } } @media (max-width:720px){ .lp-foot__grid--wide{ grid-template-columns:repeat(2,1fr); } } @media (max-width:480px){ .lp-foot__grid--wide{ grid-template-columns:1fr; } }