/* ============ LANDING PAGE — v4 (dark premium, breed gepositioneerd) ============ Donker, modern, professioneel WeTransfer-alternatief. Eén consistent blauw accent (ingetogen, niet fel), Fraunces voor koppen + Inter Tight voor tekst. DL-monogram logo. Alle lp-* classes hieronder gestyled. */ :root{ --lp-ink:#080b12; --lp-ink-2:#0e1320; --lp-surface:#141a28; --lp-surface-2:#1a2233; --lp-line:rgba(255,255,255,.08); --lp-line-2:rgba(255,255,255,.15); --lp-text:#eceef3; --lp-text-2:#9098a8; --lp-text-3:#646c7e; --lp-brand:#2f5fb0; --lp-brand-2:#3d72c9; --lp-brand-soft:#9bc0f5; --lp-radius:16px; /* Eén horizontale kantlijn voor de HELE landingspagina. De balk stond te ver naar links omdat logoregel en menuregel hun eigen padding hadden: de balk 32px, de override voor middelbrede schermen 20px, en het uitklappaneel op mobiel weer 20px vanaf de VIEWPORT (het is absoluut gepositioneerd t.o.v. .lp-nav, niet t.o.v. .lp-nav-inner). Elke sectie eronder had ook zijn eigen waarde, dus "uitgelijnd" was overal net iets anders. Nu telt alleen deze token; wie een nieuwe sectie toevoegt hoeft er niet meer over na te denken. */ --lp-gutter:32px; } @media(max-width:940px){ :root{ --lp-gutter:24px; } } @media(max-width:560px){ :root{ --lp-gutter:18px; } } /* [WITTE ONDERKANT] BASE_CSS zet `html{ background:var(--bg-basis) }` (#eef4fb, voor de iOS-overscroll) én `html,body{height:100%}`. Die twee samen braken de landing: zodra een achtergrond heeft propageert die van body niet meer naar het canvas, en door height:100% is de body-box exact één viewport hoog. Alles daaronder — vanaf ongeveer de social-proof-quote — kreeg dus de lichte html-kleur (gebruikersmelding 10-08-2026). Vandaar hier allebei: de donkere kleur óók op (dekt canvas + overscroll) en de body weer op auto-hoogte zodat zijn eigen vlak met de inhoud meegroeit. */ html{ background:var(--lp-ink); } body{ color:var(--lp-text); background:var(--lp-ink); height:auto; min-height:100vh; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-family:'Inter Tight',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; overflow-x:hidden; } .bg, .bg::before, .bg::after { display:none !important; } /* Achtergrond met diepte: warme blauwe glow-vlekken + een fijn raster. Sterker aangezet dan voorheen zodat de landing niet als een vlak donker paneel oogt. */ body::before{ content:''; position:fixed; inset:0; z-index:0; pointer-events:none; background: radial-gradient(60vmax 52vmax at 82% -12%, rgba(61,114,201,.38), transparent 60%), radial-gradient(48vmax 44vmax at 4% 6%, rgba(47,95,176,.20), transparent 58%), radial-gradient(60vmax 54vmax at 50% 116%, rgba(40,72,140,.42), transparent 64%); } body::after{ content:''; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.6; background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:64px 64px; -webkit-mask-image:radial-gradient(78% 60% at 50% 22%, #000 0%, transparent 88%); mask-image:radial-gradient(78% 60% at 50% 22%, #000 0%, transparent 88%); } body > *{ position:relative; z-index:1; } /* ===== NAV ===== */ .lp-nav{ position:sticky; top:0; z-index:50; width:100%; backdrop-filter:blur(14px); background:linear-gradient(180deg, rgba(8,11,18,.92), rgba(8,11,18,.55)); border-bottom:1px solid transparent; transition:border-color .2s, background .2s; } /* [OVERLOOP] flex-wrap is hier geen opsmuk maar het vangnet. Alle links en knoppen staan op white-space:nowrap en de hamburger komt pas onder 820px; daartussen zit een strook waarin een langere vertaling niet past. Op downloadlink.fr vielen de inlogknoppen daardoor buiten de balk (Frans is ~26% meer tekens dan Nederlands: 134 om 106 in de navigatie). Zonder wrap lopen ze de balk uit; mét wrap zakt de knoppengroep hooguit naar een tweede regel BINNEN de balk. De tussenstap hieronder zorgt dat het zover meestal niet komt. */ /* [KANTLIJN] De tussenruimte tussen logo en menu komt van .lp-spacer (flex:1), niet van deze gap. De gap telde er dus TWEE keer 26px bij op rond een element van nul pixels breed: één keer tussen logo en spacer, één keer tussen spacer en menu. Die 52px waren precies genoeg om het menu over de rand van de balk te duwen, óók op een breed scherm waar alles ruim paste — dan bleef het logo alleen op de eerste regel achter en zakte de hele navigatie naar een tweede (gebruikersmelding 08-08-2026). 12px is genoeg om logo en hamburger op een smal scherm uit elkaar te houden; de spacer doet de rest van het werk. */ .lp-nav-inner{ max-width:1180px; margin:0 auto; padding:18px var(--lp-gutter); display:flex; align-items:center; gap:12px; flex-wrap:wrap; row-gap:10px; } .lp-nav.scrolled{ border-bottom-color:var(--lp-line); background:rgba(8,11,18,.82); } .lp-brand{ display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--lp-text); font-size:18px; } .lp-brand-icon{ width:36px; height:36px; border-radius:11px; flex-shrink:0; display:grid; place-items:center; position:relative; overflow:hidden; background:linear-gradient(158deg, #1c2942, #0d1422); border:1px solid rgba(155,192,245,.22); box-shadow:0 10px 26px -12px rgba(47,95,176,.65); } .lp-brand-icon::after{ content:''; position:absolute; inset:0; background:linear-gradient(165deg, rgba(61,114,201,.28), transparent 58%); } .lp-brand-mono{ /* [FONTS 29-08-2026] 'Sora' hier weg. Het werd door PRECIES dit ene element aangetrokken -- het logo van twee letters -- en kostte daarmee 25.284 bytes (latin) op elke landingsweergave. Inter Tight staat er al als terugval en wordt toch al opgehaald. */ font-family:'Inter Tight',sans-serif; font-weight:700; font-size:16px; letter-spacing:-.06em; position:relative; z-index:1; background:linear-gradient(150deg, #cfe0ff, var(--lp-brand-2) 85%); -webkit-background-clip:text; background-clip:text; color:transparent; } .lp-brand-name{ font-family:'Inter Tight',sans-serif; font-weight:600; letter-spacing:-.02em; } .lp-brand-name .lk{ color:var(--lp-brand-soft); } .lp-nav .lp-spacer{ flex:1; } /* 22 en geen 26: negen menu-items plus twee knoppen passen daarmee met ~50px speling op één regel binnen de 1180px van de pagina-kantlijn, in plaats van er 19px overheen. Zie de toelichting bij .lp-nav-inner. */ .lp-nav-links{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; row-gap:10px; min-width:0; } /* De strook tussen de hamburger (820px) en de volle breedte (1180px): daar moet het Frans/Engels ook passen. Kleinere gaten, iets kleinere tekst en krappere knoppen leveren samen ruim 30% ruimte op — genoeg voor de langste vertaling, zonder dat het Nederlands er anders uitziet op een scherm waar het toch al paste. */ @media(min-width:821px) and (max-width:1180px){ .lp-nav-inner{ gap:10px; } .lp-nav-links{ gap:14px; } .lp-nav a.lp-link{ font-size:13.5px; } .lp-btn{ padding:9px 13px; font-size:13.5px; gap:5px; } } @media(min-width:821px) and (max-width:1000px){ .lp-nav-inner{ gap:8px; } .lp-nav-links{ gap:10px; } .lp-nav a.lp-link{ font-size:13px; } .lp-btn{ padding:8px 11px; font-size:13px; } } .lp-nav a.lp-link{ color:var(--lp-text-2); text-decoration:none; font-size:14px; transition:color .15s; white-space:nowrap; } .lp-nav a.lp-link:hover{ color:var(--lp-text); } /* Hamburger — alleen zichtbaar op smal scherm (zie media query onder). */ .lp-burger{ display:none; width:42px; height:42px; border-radius:10px; cursor:pointer; align-items:center; justify-content:center; flex-shrink:0; background:rgba(255,255,255,.03); border:1px solid var(--lp-line-2); } .lp-burger:hover{ background:rgba(255,255,255,.07); } .lp-burger-bars{ position:relative; width:18px; height:14px; } .lp-burger-bars i{ position:absolute; left:0; width:100%; height:2px; border-radius:2px; background:var(--lp-text); transition:transform .22s ease, opacity .18s ease, top .22s ease; } .lp-burger-bars i:nth-child(1){ top:0; } .lp-burger-bars i:nth-child(2){ top:6px; } .lp-burger-bars i:nth-child(3){ top:12px; } /* Open-staat: hamburger wordt een kruisje. */ .lp-nav.open .lp-burger-bars i:nth-child(1){ top:6px; transform:rotate(45deg); } .lp-nav.open .lp-burger-bars i:nth-child(2){ opacity:0; } .lp-nav.open .lp-burger-bars i:nth-child(3){ top:6px; transform:rotate(-45deg); } .lp-btn{ display:inline-flex; align-items:center; gap:7px; text-decoration:none; padding:10px 18px; border-radius:10px; font-size:14px; font-weight:500; border:1px solid transparent; cursor:pointer; transition:all .16s; white-space:nowrap; font-family:inherit; } .lp-btn.ghost{ color:var(--lp-text); border-color:var(--lp-line-2); background:rgba(255,255,255,.02); } .lp-btn.ghost:hover{ background:rgba(255,255,255,.06); border-color:var(--lp-text-2); } .lp-btn.primary{ color:#fff; font-weight:600; background:linear-gradient(180deg, var(--lp-brand-2), var(--lp-brand)); box-shadow:0 8px 22px -8px rgba(47,95,176,.7), 0 0 0 1px rgba(255,255,255,.1) inset; } .lp-btn.primary:hover{ transform:translateY(-1px); box-shadow:0 12px 30px -8px rgba(47,95,176,.8); } @media(max-width:820px){ .lp-burger{ display:inline-flex; } /* Links-blok wordt een uitklap-paneel onder de balk. */ .lp-nav-links{ position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:4px; /* [MOBIEL 25-08-2026] Het paneel hing aan een position:sticky-balk en had geen hoogtegrens: op een iPhone SE/8 liep het van y=78 tot y=631 terwijl er maar ~553px zichtbaar is, en scrollen verschoof het niet mee omdat de balk vaststaat. 'Start gratis' viel daardoor volledig buiten beeld en 'Inloggen' half -- en /login staat exact EEN keer op de hele landingspagina, namelijk hier. In liggende stand (nog onder de 820px) gold dat op elk toestel. flex-wrap:nowrap is nodig: regel 246 zet wrap, en met alleen een max-height wordt het paneel tweekoloms en scrollt het alsnog niet. 100vh eerst als terugval, dan 100dvh -- zelfde patroon als de opzeg-modal verderop. */ flex-wrap:nowrap; max-height:calc(100vh - 100%); max-height:calc(100dvh - 100%); overflow-y:auto; overscroll-behavior:contain; padding:12px calc(var(--lp-gutter) - 6px) 18px; background:rgba(10,14,22,.98); backdrop-filter:blur(14px); border-bottom:1px solid var(--lp-line); box-shadow:0 24px 40px -20px rgba(0,0,0,.7); transform:translateY(-8px); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .18s ease, transform .18s ease, visibility .18s; } .lp-nav.open .lp-nav-links{ transform:translateY(0); opacity:1; visibility:visible; pointer-events:auto; } .lp-nav-links a.lp-link{ font-size:15px; padding:11px 6px; border-bottom:1px solid var(--lp-line); } .lp-nav-links a.lp-link:last-of-type{ border-bottom:0; } .lp-nav-links .lp-btn{ justify-content:center; margin-top:6px; padding:12px 18px; } .lp-nav-links .lp-btn.ghost{ margin-top:10px; } } /* ===== HERO ===== */ .lp-hero{ max-width:1180px; margin:0 auto; padding:76px var(--lp-gutter) 100px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:56px; align-items:center; } @media(max-width:960px){ .lp-hero{ grid-template-columns:1fr; gap:44px; padding:48px var(--lp-gutter) 64px; } .lp-hero-art{ order:2; max-width:560px; margin:0 auto; } } .lp-eyebrow{ display:inline-flex; align-items:center; gap:9px; font-size:12.5px; font-weight:500; color:var(--lp-text); margin-bottom:24px; padding:7px 14px; border-radius:999px; background:rgba(47,95,176,.12); border:1px solid rgba(47,95,176,.3); } .lp-eyebrow::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--lp-brand-2); box-shadow:0 0 9px var(--lp-brand-2); } .lp-eyebrow .eb-sm{ display:none; } /* korte badge-variant, alleen mobiel */ .lp-h1{ font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:clamp(40px,5.4vw,60px); line-height:1.06; letter-spacing:-.025em; color:#fff; margin:0 0 22px; } .lp-h1 em{ font-style:italic; font-weight:500; color:var(--lp-brand-2); } .lp-lead{ font-size:18px; line-height:1.55; color:var(--lp-text-2); max-width:490px; margin:0 0 32px; } .lp-cta-row{ display:flex; gap:13px; flex-wrap:wrap; align-items:center; } .lp-cta-row .lp-btn{ padding:13px 24px; font-size:15px; } .lp-cta-note{ margin:13px 0 0; font-size:13px; color:var(--lp-text-3); display:inline-flex; align-items:center; gap:7px; } .lp-cta-note svg{ color:var(--lp-brand-2); flex-shrink:0; } .lp-trust-row{ margin-top:44px; display:flex; flex-wrap:wrap; gap:26px; font-size:13px; color:var(--lp-text-3); } .lp-trust-row .item{ display:inline-flex; align-items:center; gap:7px; margin-right:0; } .lp-trust-row .item svg{ color:var(--lp-brand-2); opacity:.95; flex-shrink:0; } /* ===== HERO MOCKUP ===== */ .lp-hero-art{ position:relative; max-width:640px; width:100%; } .lp-mock-window{ position:relative; border-radius:var(--lp-radius); overflow:hidden; background:linear-gradient(165deg, var(--lp-surface), var(--lp-ink-2)); border:1px solid var(--lp-line-2); box-shadow:0 44px 84px -24px rgba(0,0,0,.66), 0 0 0 1px rgba(255,255,255,.03) inset; } .lp-mock-bar-top{ display:flex; align-items:center; gap:7px; padding:13px 16px; border-bottom:1px solid var(--lp-line); background:rgba(255,255,255,.02); } .lp-mock-bar-top i{ width:11px; height:11px; border-radius:50%; display:block; background:var(--lp-line-2); } .lp-mock-bar-top i:nth-child(1){ background:#f87171; } .lp-mock-bar-top i:nth-child(2){ background:#fbbf24; } .lp-mock-bar-top i:nth-child(3){ background:#34d399; } .lp-mock-bar-top .url{ margin-left:10px; font-size:12px; color:var(--lp-text-3); } .lp-mock-body{ padding:22px; } .lp-mock-title{ font-size:13px; color:var(--lp-text-2); margin-bottom:16px; display:flex; justify-content:space-between; } .lp-mock-title .pct{ color:var(--lp-brand-2); font-weight:500; } .lp-mock-file{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:11px; background:rgba(255,255,255,.03); border:1px solid var(--lp-line); margin-bottom:9px; } .lp-mock-file .ic{ width:34px; height:34px; border-radius:9px; display:grid; place-items:center; flex-shrink:0; font-size:11px; font-weight:600; } .lp-mock-file .ic.pdf{ background:rgba(239,68,68,.16); color:#fca5a5; } .lp-mock-file .ic.vid{ background:rgba(47,95,176,.2); color:#93c5fd; } .lp-mock-file .ic.img{ background:rgba(168,85,247,.16); color:#c4b5fd; } .lp-mock-file .nm{ flex:1; font-size:13.5px; color:var(--lp-text); } .lp-mock-file .sz{ font-size:12px; color:var(--lp-text-3); } .lp-mock-file .sz.ok{ color:#34d399; } .lp-mock-progress{ height:7px; border-radius:99px; background:rgba(255,255,255,.06); margin:18px 0 10px; overflow:hidden; } .lp-mock-progress i{ display:block; position:relative; height:100%; width:72%; border-radius:99px; overflow:hidden; background:linear-gradient(90deg,var(--lp-brand),var(--lp-brand-2)); } /* Levende 'aan het uploaden'-shimmer over de voortgangsbalk — houdt de hero dynamisch zonder het getal (72%) te laten afwijken. Uit bij reduced-motion. */ .lp-mock-progress i::after{ content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent); transform:translateX(-100%); } @keyframes lpShimmer{ 0%{ transform:translateX(-100%); } 55%,100%{ transform:translateX(120%); } } .lp-mock-progress-row{ display:flex; justify-content:space-between; font-size:12px; color:var(--lp-text-3); } /* ===== SECTION SHELL ===== */ .lp-features, .lp-compare, .lp-steps, .lp-pricing, .lp-faq, .lp-proof{ max-width:1180px; margin:0 auto; padding:84px var(--lp-gutter); } @media(max-width:940px){ .lp-features, .lp-compare, .lp-steps, .lp-pricing, .lp-faq, .lp-proof{ padding:56px var(--lp-gutter); } } /* 820 en geen 680: bij 680px braken de inleidingen al na een woord of acht af, terwijl de kaarten eronder de volle 1180px gebruiken. Dat las als een versmalde kolom midden op een brede pagina (gebruikersmelding 10-08-2026). 820px houdt de regellengte nog steeds prettig (rond de 90 tekens) maar sluit visueel aan op de rest van de sectie. */ .lp-section-head{ max-width:820px; margin:0 0 48px; } .lp-section-head.center{ margin:0 auto 48px; text-align:center; } .lp-section-eyebrow{ font-size:12px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--lp-brand-2); margin-bottom:14px; } .lp-section-title{ font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:clamp(28px,3.4vw,40px); line-height:1.12; letter-spacing:-.02em; margin:0 0 16px; color:#fff; } .lp-section-sub{ font-size:17px; color:var(--lp-text-2); margin:0; } /* Vergelijkingstabel (landing) */ .lp-compare-wrap{ overflow-x:auto; border:1px solid var(--lp-line); border-radius:var(--lp-radius); background:var(--lp-surface); } .lp-compare-table{ width:100%; border-collapse:collapse; font-size:14.5px; min-width:560px; } .lp-compare-table th, .lp-compare-table td{ padding:14px 18px; text-align:left; border-bottom:1px solid var(--lp-line); color:var(--lp-text-2); vertical-align:top; } .lp-compare-table thead th{ font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--lp-text-3); } .lp-compare-table tbody tr:last-child th, .lp-compare-table tbody tr:last-child td{ border-bottom:none; } .lp-compare-table td:first-child{ color:var(--lp-text-3); font-weight:500; width:30%; } .lp-compare-table .cmp-us{ background:rgba(47,95,176,.10); color:#e7eefb; } .lp-compare-table thead .cmp-us{ color:var(--lp-brand-2); } .lp-compare-note{ text-align:center; font-size:12px; color:var(--lp-text-3); margin-top:14px; } /* ===== PROOF ===== */ .lp-proof{ text-align:center; padding:64px var(--lp-gutter); } .lp-proof-label{ font-size:12px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--lp-brand-2); margin-bottom:16px; } .lp-proof-text{ font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:clamp(22px,2.8vw,30px); line-height:1.4; letter-spacing:-.01em; color:var(--lp-text); max-width:820px; margin:0 auto; } /* ===== STORY / TRUST ===== */ .lp-story{ max-width:1180px; margin:0 auto; padding:40px var(--lp-gutter) 84px; } @media(max-width:940px){ .lp-story{ padding:24px var(--lp-gutter) 56px; } } .lp-story-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:center; } @media(max-width:860px){ .lp-story-grid{ grid-template-columns:1fr; gap:36px; } } .lp-story-text h2{ font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:clamp(26px,3.2vw,36px); line-height:1.14; letter-spacing:-.02em; color:#fff; margin:0 0 18px; } .lp-story-text p{ font-size:16px; line-height:1.7; color:var(--lp-text-2); margin:0 0 16px; } .lp-story-text p:last-child{ margin-bottom:0; } .lp-trust-pillars{ display:grid; gap:14px; } .lp-pillar{ display:flex; gap:14px; align-items:flex-start; padding:18px 20px; border-radius:var(--lp-radius); background:var(--lp-surface); border:1px solid var(--lp-line); } .lp-pillar-ic{ width:40px; height:40px; flex-shrink:0; border-radius:11px; display:grid; place-items:center; color:var(--lp-brand-2); background:linear-gradient(150deg, rgba(47,95,176,.18), rgba(30,58,107,.1)); border:1px solid rgba(47,95,176,.22); } .lp-pillar strong{ display:block; font-size:15px; color:#fff; font-weight:600; margin-bottom:3px; } .lp-pillar span{ display:block; font-size:13.5px; color:var(--lp-text-2); line-height:1.55; } /* ===== FEATURES ===== */ .lp-feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } @media(max-width:940px){ .lp-feature-grid{ grid-template-columns:1fr; } } .lp-feature{ padding:26px; border-radius:var(--lp-radius); background:var(--lp-surface); border:1px solid var(--lp-line); transition:transform .18s,border-color .18s,background .18s; } .lp-feature:hover{ transform:translateY(-3px); border-color:var(--lp-line-2); background:var(--lp-surface-2); } .lp-feature h3{ font-size:17px; font-weight:600; margin:0 0 9px; color:#fff; font-family:'Inter Tight',sans-serif; } .lp-feature p{ font-size:14.5px; color:var(--lp-text-2); margin:0; line-height:1.6; } .lp-feature em{ color:var(--lp-brand-soft); font-style:normal; } a.lp-feature{ text-decoration:none; color:inherit; display:block; cursor:pointer; } /* Gratis/betaald-chips (wens 19-08-2026): per kaart in één oogopslag wat erin zit. Alpha-achtergronden werken op licht én donker. */ .lp-chip{ display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; padding:3px 9px; border-radius:999px; margin-bottom:9px; } .lp-chip.gratis{ background:rgba(16,185,129,.14); color:#10b981; } .lp-chip.betaald{ background:rgba(59,130,246,.14); color:#60a5fa; } a.lp-feature .lp-feat-go{ display:inline-block; margin-top:10px; font-size:13px; font-weight:600; color:var(--lp-brand-soft); } /* ===== COMPARE TABLE ===== */ .lp-compare-wrap{ border-radius:var(--lp-radius); border:1px solid var(--lp-line); overflow:hidden; background:var(--lp-surface); } .lp-compare-scroll{ overflow-x:auto; } /* Vergelijking is op mobiel een uitklap-dropdown (styling in ≤560px-blok); op desktop staat de tabel gewoon open en is de toggle verborgen. */ .lp-vergelijk{ margin:0; } .lp-vergelijk > summary{ list-style:none; } .lp-vergelijk > summary::-webkit-details-marker{ display:none; } @media (min-width:561px){ .lp-vergelijk > summary{ display:none; } } .lp-compare table{ width:100%; border-collapse:collapse; min-width:640px; } .lp-compare th, .lp-compare td{ padding:15px 18px; text-align:left; font-size:14px; border-bottom:1px solid var(--lp-line); } .lp-compare thead th{ color:var(--lp-text-2); font-weight:500; font-size:13px; background:rgba(255,255,255,.02); } .lp-compare thead th.us{ color:var(--lp-brand-soft); font-weight:600; } .lp-compare td{ color:var(--lp-text-2); } .lp-compare td:first-child{ color:var(--lp-text); font-weight:500; } .lp-compare .price-tag{ display:block; font-size:12px; color:var(--lp-text-3); margin-top:2px; } .lp-compare tr:last-child td, .lp-compare tbody tr:last-child td{ border-bottom:none; } .lp-compare-note{ font-size:13px; color:var(--lp-text-3); margin:16px 0 0; text-align:center; } .lp-compare th.featured{ color:var(--lp-brand-soft); font-weight:600; background:rgba(47,95,176,.1); } .lp-compare .feature-cell{ color:var(--lp-text); font-weight:500; } .lp-compare .feature-cell .sub{ display:block; font-size:12px; color:var(--lp-text-3); font-weight:400; margin-top:3px; } .lp-compare .value-cell{ text-align:center; color:var(--lp-text-2); } .lp-compare .featured-cell{ background:rgba(47,95,176,.08); color:var(--lp-text); font-weight:500; } .lp-compare .ic-yes{ color:#34d399; font-weight:700; } .lp-compare .ic-no{ color:var(--lp-text-3); font-weight:600; } .lp-compare .ic-partial{ color:#fbbf24; font-weight:700; } .lp-compare .ic-text{ display:block; font-size:11px; color:var(--lp-text-3); margin-top:2px; } .lp-compare .price-tag{ display:block; font-size:12px; color:var(--lp-text-3); margin-top:3px; font-weight:400; } /* ===== STEPS ===== */ .lp-steps-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } @media(max-width:760px){ .lp-steps-grid{ grid-template-columns:1fr; } } .lp-step{ padding:26px; border-radius:var(--lp-radius); background:var(--lp-surface); border:1px solid var(--lp-line); } .lp-step-num{ display:inline-flex; align-items:center; gap:8px; padding:7px 13px; border-radius:10px; font-family:'Fraunces',serif; font-size:13px; font-weight:600; color:var(--lp-brand-soft); background:rgba(47,95,176,.14); border:1px solid rgba(47,95,176,.26); margin-bottom:16px; } .lp-step h3{ font-size:16px; font-weight:600; margin:0 0 8px; color:#fff; } .lp-step p{ font-size:14px; color:var(--lp-text-2); margin:0; line-height:1.6; } /* ===== MAATWERK ===== */ .lp-custom{ max-width:1180px; margin:0 auto; padding:40px var(--lp-gutter) 84px; } @media(max-width:940px){ .lp-custom{ padding:24px var(--lp-gutter) 56px; } } .lp-custom-inner{ padding:48px 40px; border-radius:24px; position:relative; overflow:hidden; background:linear-gradient(160deg, var(--lp-ink-2), var(--lp-surface)); border:1px solid var(--lp-line-2); } @media(max-width:640px){ .lp-custom-inner{ padding:32px 22px; } } .lp-custom-inner::before{ content:''; position:absolute; inset:0; background:radial-gradient(60% 70% at 80% 0%, rgba(47,95,176,.18), transparent 70%); pointer-events:none; } .lp-custom-inner > *{ position:relative; z-index:1; } .lp-custom-lead{ font-size:17px; color:var(--lp-text-2); max-width:620px; margin:0 0 32px; line-height:1.6; } .lp-custom-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:32px; } @media(max-width:860px){ .lp-custom-grid{ grid-template-columns:1fr; } } .lp-custom-card{ padding:22px; border-radius:var(--lp-radius); background:rgba(255,255,255,.03); border:1px solid var(--lp-line); } .lp-custom-ic{ width:42px; height:42px; border-radius:11px; display:grid; place-items:center; color:var(--lp-brand-2); background:linear-gradient(150deg, rgba(47,95,176,.18), rgba(30,58,107,.1)); border:1px solid rgba(47,95,176,.22); margin-bottom:14px; } .lp-custom-card strong{ display:block; font-size:16px; color:#fff; font-weight:600; margin-bottom:7px; } .lp-custom-card span{ display:block; font-size:14px; color:var(--lp-text-2); line-height:1.55; } .lp-custom-cta{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; } .lp-custom-cta .lp-btn{ padding:13px 24px; font-size:15px; } .lp-custom-note{ font-size:13.5px; color:var(--lp-text-3); } /* ===== PRICING ===== */ .lp-price-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; } @media(max-width:1140px){ .lp-price-grid{ grid-template-columns:repeat(2,1fr); } .lp-price-grid .lp-price:last-child:nth-child(odd){ grid-column:1 / -1; } } @media(max-width:560px){ .lp-price-grid{ grid-template-columns:1fr; } } .lp-price{ display:flex; flex-direction:column; text-decoration:none; padding:28px 24px; border-radius:var(--lp-radius); background:var(--lp-surface); border:1px solid var(--lp-line); transition:all .18s; position:relative; } .lp-price:hover{ transform:translateY(-3px); border-color:var(--lp-line-2); } .lp-price.featured{ background:linear-gradient(170deg, var(--lp-surface-2), var(--lp-surface)); border-color:rgba(47,95,176,.5); box-shadow:0 20px 50px -18px rgba(47,95,176,.32); } .lp-price .badge{ position:absolute; top:-11px; left:24px; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:#fff; background:linear-gradient(180deg,var(--lp-brand-2),var(--lp-brand)); padding:4px 12px; border-radius:999px; } .lp-price .size{ font-family:'Fraunces',serif; font-size:22px; color:#fff; margin-bottom:4px; } /* [MOBIEL 25-08-2026] Zonder flex-wrap was de min-content van dit blokje 150,9px, en dat was de bodem onder de hele prijskaart: 178,9px per kolom x 2 kolommen + kantlijnen = 404px minimumbreedte. Gemeten scrollWidth 386 bij een viewport van 320, 360, 375 en 380 -- en omdat body overflow-x:hidden heeft, kun je er niet naartoe vegen: de rechterkaart (juist die met 'Meest gekozen') was gewoon weg. overflow-wrap hoort erbij, want wrap alleen haalt de bodem niet onder het langste woord. */ .lp-price .lp-dlmeta{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; overflow-wrap:anywhere; min-width:0; font-size:12.5px; color:var(--lp-text-2); margin:0 0 14px; line-height:1.35; } .lp-price .lp-dlmeta .lp-dl-ico{ color:var(--lp-brand-2); font-weight:700; } .lp-price .lp-dlmeta b{ color:#fff; font-weight:600; } .lp-price .price{ font-size:15px; color:var(--lp-text-2); margin-bottom:6px; } .lp-price .lp-year{ font-size:12.5px; color:var(--lp-brand-2); font-weight:600; margin-bottom:14px; } .lp-price .lp-persona{ font-size:13px; color:var(--lp-text-2); margin:0 0 14px; min-height:57px; line-height:1.45; } .lp-price .lp-bill{ font-size:12px; color:var(--lp-text-3); margin:2px 0 6px; } .lp-feat-lead{ font-size:12.5px; font-weight:600; color:var(--lp-text-3); margin:0 0 6px; } .lp-pricing[data-mode="maand"] .lp-py{ display:none; } .lp-pricing[data-mode="jaar"] .lp-pm{ display:none; } .lp-toggle{ display:flex; gap:8px; justify-content:center; margin:0 0 28px; } .lp-toggle .lp-tg{ font:inherit; font-size:14px; font-weight:600; padding:9px 20px; border-radius:999px; border:1px solid var(--lp-line); background:transparent; color:var(--lp-text-2); cursor:pointer; transition:all .15s; } .lp-toggle .lp-tg.active{ background:var(--lp-brand-2); border-color:var(--lp-brand-2); color:#0b1220; } .lp-toggle .lp-tg-save{ font-size:11px; font-weight:700; background:rgba(34,197,94,.16); color:#4ade80; padding:2px 8px; border-radius:999px; margin-left:6px; } .lp-trial-row{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-top:28px; padding:18px 22px; border:1px solid var(--lp-line); border-radius:var(--lp-radius); background:var(--lp-surface); } .lp-trial-row strong{ color:#fff; margin-right:10px; } .lp-trial-row span{ color:var(--lp-text-2); font-size:14px; } .lp-price .price strong{ font-size:34px; color:#fff; font-weight:600; font-family:'Inter Tight',sans-serif; } .lp-price-cta{ font-size:14px; font-weight:500; color:var(--lp-brand-2); display:flex; align-items:center; gap:6px; margin-top:auto; padding-top:6px; } .lp-price .tier{ font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--lp-text-3); margin-bottom:10px; } .lp-price .badge-best{ position:absolute; top:-11px; left:24px; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:#fff; background:linear-gradient(180deg,var(--lp-brand-2),var(--lp-brand)); padding:4px 12px; border-radius:999px; } .lp-price .feat{ margin:0 0 18px; flex:1; } .lp-price .feat ul{ list-style:none; padding:0; margin:0; } .lp-price .feat li{ font-size:13px; color:var(--lp-text-2); padding:5px 0 5px 22px; position:relative; } .lp-price .feat li::before{ content:'✓'; position:absolute; left:0; color:var(--lp-brand-2); font-weight:700; } .lp-more-note{ text-align:center; margin-top:32px; font-size:14px; color:var(--lp-text-2); } .lp-more-note a{ color:var(--lp-brand-soft); text-decoration:underline; text-underline-offset:3px; } /* Gedeeld "in élk betaald plan"-blok: leidt met waarde i.p.v. gigabytes. */ .lp-included{ max-width:780px; margin:0 auto 34px; padding:22px 26px; border-radius:var(--lp-radius); background:linear-gradient(168deg, rgba(255,255,255,.05), rgba(255,255,255,.012) 48%), var(--lp-surface); border:1px solid var(--lp-line); } .lp-included-head{ font-size:12.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#fff; margin-bottom:14px; text-align:center; } .lp-included ul{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2,1fr); gap:9px 24px; } @media(max-width:560px){ .lp-included ul{ grid-template-columns:1fr; } } .lp-included li{ font-size:13.5px; color:var(--lp-text-2); padding-left:22px; position:relative; line-height:1.4; } .lp-included li::before{ content:'✓'; position:absolute; left:0; color:var(--lp-brand-2); font-weight:700; } .lp-soon-badge{ font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--lp-brand-2); border:1px solid var(--lp-brand-2); border-radius:999px; padding:1px 7px; margin-left:6px; vertical-align:middle; } .lp-price .feat li.lp-soon{ opacity:.7; } /* ===== FAQ ===== */ .lp-faq-grid{ max-width:820px; margin:0 auto; display:grid; gap:16px; } .lp-faq-item{ padding:24px 28px; border-radius:var(--lp-radius); background:var(--lp-surface); border:1px solid var(--lp-line); transition:border-color .18s, transform .18s, box-shadow .18s; } .lp-faq-item:hover{ border-color:rgba(148,163,184,.4); transform:translateY(-1px); box-shadow:0 8px 26px -18px rgba(0,0,0,.7); } .lp-faq-item summary{ font-size:16px; font-weight:600; color:#fff; cursor:pointer; list-style:none; position:relative; padding-right:44px; line-height:1.45; } .lp-faq-item summary::-webkit-details-marker{ display:none; } /* Het plusje in een rustig rondje; draait naar een kruis bij openen. */ .lp-faq-item summary::after{ content:'+'; position:absolute; right:0; top:50%; width:26px; height:26px; margin-top:-13px; display:flex; align-items:center; justify-content:center; border:1px solid var(--lp-line); border-radius:50%; color:var(--lp-text-3); font-weight:400; font-size:16px; line-height:1; transition:transform .2s, color .2s, border-color .2s; } .lp-faq-item:hover summary::after{ color:var(--lp-text-2); border-color:rgba(148,163,184,.4); } .lp-faq-item[open] summary::after{ transform:rotate(45deg); color:var(--lp-brand-soft); border-color:var(--lp-brand-soft); } /* Antwoord duidelijk gescheiden van de vraag, met ademruimte. */ .lp-faq-item[open] summary{ margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--lp-line); } .lp-faq-item p{ font-size:14.5px; color:var(--lp-text-2); margin:0; line-height:1.7; } .lp-faq-item a{ color:var(--lp-brand-soft); } /* ===== FINAL CTA ===== */ .lp-final-cta{ max-width:1000px; margin:40px auto; padding:0 var(--lp-gutter); } .lp-final-cta-inner{ padding:64px 40px; text-align:center; border-radius:24px; position:relative; overflow:hidden; background:linear-gradient(160deg, var(--lp-ink-2), var(--lp-surface)); border:1px solid var(--lp-line-2); } .lp-final-cta-inner::before{ content:''; position:absolute; inset:0; background:radial-gradient(50% 80% at 50% 0%, rgba(47,95,176,.22), transparent 70%); } .lp-final-cta-inner > *{ position:relative; z-index:1; } .lp-final-cta-inner h2{ font-family:'Fraunces',serif; font-weight:500; font-size:clamp(28px,4vw,42px); margin:0 0 16px; color:#fff; letter-spacing:-.02em; } .lp-final-cta-inner p{ color:var(--lp-text-2); font-size:17px; margin:0 auto 28px; max-width:480px; } .lp-cta-reassure{ font-size:13.5px !important; color:var(--lp-text-3) !important; margin:22px auto 0 !important; max-width:440px !important; } /* ===== FOOTER ===== */ .lp-footer{ max-width:1180px; margin:0 auto; padding:48px var(--lp-gutter); border-top:1px solid var(--lp-line); display:flex; flex-direction:column; gap:14px; align-items:center; text-align:center; } .lp-footer-links{ display:flex; gap:22px; flex-wrap:wrap; justify-content:center; } .lp-footer-meta{ color:var(--lp-text-3); font-size:13px; } /* Zes SEO-links: mogen altijd wrappen (ook binnen de mobiele nowrap-regel hieronder, die voor de vier hoofdlinks bedoeld is). */ .lp-footer-seo{ flex-wrap:wrap; gap:14px 18px; font-size:13.5px; } .lp-footer a{ color:var(--lp-text-2); text-decoration:none; } .lp-footer a:hover{ color:var(--lp-text); } /* ============ v5 REFRESH — frissere, premium polish (additief, override) ============ Bouwt voort op v4: geen structuurwijziging, alleen meer diepte, luminanter accent, verloop-koppen en zachte glows. Eén consistent blauw, ingetogen. */ body::before{ background: radial-gradient(58vmax 50vmax at 84% -14%, rgba(74,140,232,.40), transparent 60%), radial-gradient(46vmax 42vmax at 2% 6%, rgba(60,114,201,.20), transparent 58%), radial-gradient(64vmax 56vmax at 50% 120%, rgba(46,86,168,.44), transparent 64%); } /* Verloop-koppen → premium uitstraling. */ .lp-h1{ font-size:clamp(42px,5.7vw,66px); line-height:1.03; letter-spacing:-.03em; background:linear-gradient(174deg,#ffffff 30%, #bdd0ef); -webkit-background-clip:text; background-clip:text; color:transparent; } .lp-h1 em{ background:linear-gradient(120deg,var(--lp-brand-soft),var(--lp-brand-2)); -webkit-background-clip:text; background-clip:text; color:transparent; } .lp-section-title, .lp-story-text h2, .lp-final-cta-inner h2{ background:linear-gradient(176deg,#ffffff 38%, #c6d4ea); -webkit-background-clip:text; background-clip:text; color:transparent; } /* Eyebrow-pill: luminanter, met zachte glow. */ .lp-eyebrow{ background:linear-gradient(180deg, rgba(74,140,232,.16), rgba(47,95,176,.09)); border-color:rgba(99,150,230,.34); box-shadow:0 8px 22px -16px rgba(74,140,232,.8), 0 0 0 1px rgba(255,255,255,.02) inset; } /* Kaarten: subtiel top-belicht i.p.v. vlak + zachte schaduw; glow bij hover. */ .lp-feature, .lp-step, .lp-faq-item, .lp-pillar, .lp-custom-card, .lp-price{ background:linear-gradient(168deg, rgba(255,255,255,.05), rgba(255,255,255,.012) 48%), var(--lp-surface); box-shadow:0 1px 0 rgba(255,255,255,.045) inset, 0 20px 44px -30px rgba(0,0,0,.85); } .lp-feature:hover, .lp-price:hover{ border-color:rgba(99,150,230,.42); box-shadow:0 1px 0 rgba(255,255,255,.07) inset, 0 24px 52px -26px rgba(47,95,176,.55); } /* Icoon-tegels luminanter. */ .lp-pillar-ic, .lp-custom-ic{ background:linear-gradient(150deg, rgba(74,140,232,.26), rgba(47,95,176,.12)); border-color:rgba(99,150,230,.32); box-shadow:0 10px 24px -14px rgba(74,140,232,.85); } /* Primaire knop: rijker verloop, glow en subtiele top-sheen. */ .lp-btn.primary{ background:linear-gradient(180deg,#4f88da,#2f5fb0); box-shadow:0 10px 26px -8px rgba(47,95,176,.8), 0 0 0 1px rgba(255,255,255,.12) inset, 0 1px 0 rgba(255,255,255,.28) inset; } .lp-btn.primary:hover{ transform:translateY(-1px); box-shadow:0 16px 38px -8px rgba(74,140,232,.9), 0 0 0 1px rgba(255,255,255,.14) inset; } /* Featured pricing-kaart: sterkere lift. */ .lp-price.featured{ box-shadow:0 26px 64px -22px rgba(47,95,176,.55), 0 1px 0 rgba(255,255,255,.07) inset; } /* Mock-venster: diepere schaduw + fijne rand-glow + zachte glow-halo erachter. */ .lp-mock-window{ position:relative; z-index:1; box-shadow:0 50px 92px -28px rgba(0,0,0,.7), 0 0 0 1px rgba(120,165,235,.10) inset, 0 0 60px -34px rgba(74,140,232,.55); } .lp-hero-art::after{ content:''; position:absolute; z-index:0; inset:4% -2% 8% 2%; background:radial-gradient(58% 54% at 62% 42%, rgba(74,140,232,.30), transparent 72%); filter:blur(30px); pointer-events:none; } /* Subtiele gestaffelde hero-entree bij laden. Pure CSS, geen JS; uit bij reduced-motion (dan tonen de elementen direct). */ @keyframes lpUp{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } } @media (prefers-reduced-motion: no-preference){ .lp-hero .lp-eyebrow{ animation:lpUp .6s cubic-bezier(.22,.61,.36,1) both; } .lp-hero .lp-h1{ animation:lpUp .6s .07s cubic-bezier(.22,.61,.36,1) both; } .lp-hero .lp-lead{ animation:lpUp .6s .14s cubic-bezier(.22,.61,.36,1) both; } .lp-hero .lp-cta-row{ animation:lpUp .6s .21s cubic-bezier(.22,.61,.36,1) both; } .lp-hero .lp-trust-row{ animation:lpUp .6s .28s cubic-bezier(.22,.61,.36,1) both; } .lp-hero .lp-cta-note{ animation:lpUp .6s .24s cubic-bezier(.22,.61,.36,1) both; } .lp-hero-art{ animation:lpUp .75s .18s cubic-bezier(.22,.61,.36,1) both; } .lp-mock-progress i::after{ animation:lpShimmer 1.9s ease-in-out .7s infinite; } } /* ============ MOBIEL COMPACT (≤560px) ============ De landing was op mobiel erg lang. Deze laag comprimeert padding, marges, kopgroottes en gaps zodat de pagina korter en rustiger scrolt — desktop blijft ongewijzigd. Additief; komt ná alle basisregels dus wint bij ≤560px. */ @media (max-width: 560px){ /* Sectie-omhulsels + koppen strakker */ .lp-features, .lp-compare, .lp-steps, .lp-pricing, .lp-faq, .lp-proof{ padding:40px var(--lp-gutter); } .lp-story, .lp-custom{ padding:20px var(--lp-gutter) 40px; } .lp-section-head, .lp-section-head.center{ margin-bottom:24px; } .lp-section-eyebrow{ margin-bottom:10px; } .lp-section-title{ font-size:24px; margin-bottom:12px; } .lp-section-sub{ font-size:15px; } /* Hero compacter: kleinere kop/lead, minder lucht */ .lp-hero{ padding:28px var(--lp-gutter) 38px; gap:30px; } .lp-eyebrow{ margin-bottom:16px; } .lp-h1{ font-size:33px; margin-bottom:14px; } .lp-lead{ font-size:16px; margin-bottom:22px; } /* Badge op één regel: korte variant, iets kleiner, niet afbreken. [MOBIEL 29-08-2026] De nowrap stond op .lp-eyebrow zelf. Dat klopt voor de LANDING, waar eb-lg wordt verborgen en de korte variant van 43 tekens overblijft. Maar op /prijzen en de vijf SEO-landingen is er geen korte variant: daar staat één string van 97 tekens in dezelfde badge (zie de lp_seo-tak in de markup). Die kon niet afbreken, dus de min-content van de hero-kolom werd de volle tekstbreedte: 513 px in een container van 360. GEMETEN: het document was 542 px op 360, 390 én 430 px viewport -- 182 px buiten beeld, met de kop, beide knoppen en het mock-venster half weg, en de pagina schoof zijwaarts. Op precies de pagina waar iemand beslist of hij betaalt. De rem hoort dus op de KORTE variant, niet op de badge. */ .lp-eyebrow{ font-size:11px; padding:6px 12px; } .lp-eyebrow .eb-lg{ display:none; } .lp-eyebrow .eb-sm{ display:inline; white-space:nowrap; } /* Vinkjes-lijst netjes uitgelijnd in twee kolommen i.p.v. rafelige wrap. */ .lp-trust-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; margin-top:22px; } .lp-trust-row .item{ font-size:12px; } .lp-mock-body{ padding:16px; } .lp-mock-file{ padding:10px 12px; } /* Verhaal + pijlers */ .lp-trust-pillars{ gap:10px; } .lp-pillar{ padding:14px 16px; } /* Kaarten-grids strakker */ .lp-feature-grid, .lp-steps-grid, .lp-custom-grid{ gap:12px; } .lp-feature, .lp-step{ padding:19px 20px; } .lp-step-num{ margin-bottom:12px; } .lp-custom-inner{ padding:26px 18px; } .lp-custom-grid{ margin-bottom:24px; } .lp-custom-card{ padding:18px; } .lp-custom-lead{ margin-bottom:24px; } /* Vergelijkingstabel: op mobiel alleen de hoofdvergelijking (Downloadlink vs WeTransfer) — Dropbox/SharePoint verbergen zodat het past zónder horizontaal scrollen. Desktop toont alle vier. */ .lp-compare table{ min-width:0; } .lp-compare th:nth-child(n+4), .lp-compare td:nth-child(n+4){ display:none; } .lp-compare th, .lp-compare td{ padding:10px 9px; font-size:13px; } .lp-compare thead th{ font-size:11.5px; } .lp-compare .feature-cell .sub{ font-size:11px; } .lp-compare .price-tag{ font-size:10.5px; } .lp-compare-note{ margin-top:12px; font-size:12px; } /* Uitklap-dropdown: nette toggle-kop, tabel ingeklapt tot je 'm opent. */ .lp-vergelijk > summary{ cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border-radius:var(--lp-radius); background:var(--lp-surface); border:1px solid var(--lp-line); color:#fff; font-weight:600; font-size:14.5px; } .lp-vergelijk > summary::after{ content:'+'; color:var(--lp-brand-soft); font-size:20px; line-height:1; font-weight:400; } .lp-vergelijk[open] > summary{ margin-bottom:12px; } .lp-vergelijk[open] > summary::after{ content:'\2212'; } /* Prijskaarten als compact 2-koloms OVERZICHT: alle plannen in één blik naast elkaar vergelijkbaar i.p.v. per plan te moeten scrollen. Persona en de per-plan feature-lijst verbergen (de gedeelde 'in élk betaald plan'- lijst staat er al boven); kern = tier + opslag + prijs + jaar + knop. */ /* minmax(0,1fr): grid-items hebben standaard min-width:auto, waardoor een kolom niet onder zijn min-content kan zakken en de rij breder werd dan het scherm. Zie de toelichting bij .lp-dlmeta. */ .lp-price-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .lp-price-grid .lp-price:last-child:nth-child(odd){ grid-column:1 / -1; } .lp-price{ padding:14px 13px; } .lp-price .lp-persona, .lp-price .feat, .lp-feat-lead{ display:none; } .lp-price .tier{ font-size:10px; margin-bottom:5px; } .lp-price .size{ font-size:16px; margin-bottom:2px; } .lp-price .price{ font-size:12.5px; margin-bottom:2px; } .lp-price .price strong{ font-size:23px; } .lp-price .lp-bill{ font-size:10.5px; margin:1px 0 3px; } .lp-price .lp-year{ font-size:11px; margin-bottom:7px; } .lp-price-cta{ font-size:12px; padding-top:2px; } .lp-price .badge, .lp-price .badge-best{ font-size:9px; padding:3px 8px; left:13px; top:-9px; } .lp-toggle{ margin-bottom:18px; } .lp-included{ padding:16px 16px; margin-bottom:20px; } .lp-trial-row{ margin-top:18px; padding:14px 16px; } .lp-more-note{ margin-top:18px; } /* FAQ + slot-CTA + footer */ .lp-faq-grid{ gap:8px; } .lp-faq-item{ padding:16px 18px; } .lp-faq-item summary{ font-size:15px; } .lp-final-cta{ margin:26px auto; padding:0 var(--lp-gutter); } .lp-final-cta-inner{ padding:38px 22px; } .lp-final-cta-inner p{ font-size:15px; } .lp-footer{ padding:30px var(--lp-gutter); } .lp-footer-links{ gap:15px; flex-wrap:nowrap; font-size:13px; } .lp-footer-seo{ flex-wrap:wrap; gap:10px 14px; font-size:12.5px; } }