/* ============================================================================ wf-sales.css — componentlaag van de Webfix-saleswebsite. Laadvolgorde: main.css (template) -> webfix.css (huisstijl-overrides) -> wf-2026-system.css (design-tokens) -> wf-sales.css (dit) Uitgangspunten - Bouwt voort op de bestaande visuele taal; introduceert geen nieuwe stijl. - Gebruikt de merk-tokens uit wf-2026-system.css. - Mobile first. Elke component werkt vanaf 320px zonder horizontaal scrollen. - Nooit inline styles in de HTML; alles staat hier. ========================================================================== */ /* De kleuren komen uit de merk-tokens van de Stijlgids (wf-2026-system.css en webfix.css). Hier staan alleen maten, schaduwen en vlakken die specifiek voor de verkooppagina's zijn. Nooit een eigen kleur verzinnen: als een kleur hier nodig is, hoort hij in de Stijlgids te staan. */ :root { --wfs-radius: 18px; --wfs-radius-lg: 30px; --wfs-shadow: 0 4px 24px rgba(1, 16, 61, .06); --wfs-shadow-hover: 0 14px 40px rgba(1, 16, 61, .12); --wfs-ring: 0 0 0 3px rgba(50, 188, 238, .35); /* Tekst en vlakken — dezelfde tinten als de Stijlgids gebruikt. */ --wfs-ink: var(--wf-black, #000229); --wfs-ink-soft: #5F6368; --wfs-line: var(--border-hairline, #EDF5FA); --wfs-surface: #ffffff; --wfs-surface-alt: #f7f8fc; /* Merkkleuren, letterlijk uit de huisstijl. */ --wfs-accent: var(--wf-pink, #da176c); --wfs-accent-2: var(--wf-blue, #32bcee); --wfs-titel: var(--wf-title, #a12359); --wfs-ok: var(--wf-green-dark, #8aaa1e); } /* ------------------------------------------------ geen horizontaal scrollen -- Het offcanvas-menu staat op right:-100% en valt buiten het clipgebied van . Zonder deze regel kan de pagina op mobiel enkele tientallen pixels opzij schuiven. */ html { overflow-x: hidden; } /* -------------------------------------------------------- toegankelijkheid */ .wf-skiplink { position: absolute; left: -9999px; top: 0; z-index: 100000; padding: 12px 20px; background: var(--wfs-ink); color: #fff; font-weight: 600; border-radius: 0 0 12px 0; } .wf-skiplink:focus { left: 0; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } :where(a, button, summary, input, textarea, select):focus-visible { outline: none; box-shadow: var(--wfs-ring); border-radius: 6px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ------------------------------------------------------------ sectieopmaak */ .wf-sectie { padding: 70px 0; } @media (min-width: 768px) { .wf-sectie { padding: 100px 0; } } .wf-sectie--alt { background: var(--wfs-surface-alt); } .wf-wrap { margin: 0 auto; max-width: 1200px; padding: 0 15px; } /* Een kop met alleen een badge heeft geen titel om ruimte van te lenen. */ .wf-sectie-kop.wf-sectie-kop--alleen-badge { margin-top: 40px; margin-bottom: 40px; } .wf-sectie-kop--alleen-badge .wf-sectie-label { margin-bottom: 0; } @media (max-width: 767.98px) { .wf-sectie-kop.wf-sectie-kop--alleen-badge { margin-top: 32px; } } .wf-sectie-kop { max-width: 760px; margin: 0 auto 40px; text-align: center; } .wf-sectie-kop--links { margin-left: 0; text-align: left; } .wf-sectie-label { display: inline-block; margin-bottom: 16px; padding: 9px 22px; border-radius: 30px; background: rgba(218, 23, 108, .07); color: var(--wfs-accent); font-size: 15px; font-weight: 600; letter-spacing: .02em; } @media (max-width: 575.98px) { .wf-sectie-label { padding: 8px 18px; font-size: 14px; } } /* Een titel met een inleiding eronder houdt altijd 20px afstand. Geldt voor beide titelvormen die op de site voorkomen. */ .wf-sectie-titel + .wf-sectie-intro, .kp-titel + .wf-sectie-intro { margin-top: 20px; } .wf-sectie-titel { margin: 0 0 16px; color: var(--wfs-ink); font-size: 28px; line-height: 1.2; font-weight: 700; } @media (min-width: 768px) { .wf-sectie-titel { font-size: 40px; } } .wf-sectie-intro { margin: 0; color: var(--wfs-ink-soft); font-size: 17px; line-height: 1.65; } /* --------------------------------------------------------------- kruimels */ .wf-kruimels { margin: 0 0 22px; font-size: 14px; } .wf-kruimels ol { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0; padding: 0; list-style: none; } .wf-kruimels li { display: flex; align-items: center; gap: 10px; color: var(--wfs-ink-soft); } .wf-kruimels li + li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .45; } .wf-kruimels a { color: inherit; text-decoration: none; transition: color .2s; } .wf-kruimels a:hover { color: var(--wfs-accent); } .wf-kruimels [aria-current="page"] { color: var(--wfs-ink); font-weight: 600; } /* ----------------------------------------------------------------- prijzen */ .wf-prijzen { --kaart-gap: 24px; } .wf-prijs-switch { display: inline-flex; gap: 4px; margin: 0 auto 36px; padding: 5px; border-radius: 40px; background: var(--wfs-surface-alt); border: 1px solid var(--wfs-line); } .wf-prijzen > .wf-prijs-switch { display: flex; width: fit-content; } .wf-prijs-switch-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border: 0; border-radius: 40px; background: transparent; color: var(--wfs-ink-soft); font-size: 15px; font-weight: 600; cursor: pointer; transition: background .25s, color .25s; } .wf-prijs-switch-btn.is-active { background: var(--wfs-ink); color: #fff; } .wf-prijs-switch-tip { padding: 3px 9px; border-radius: 20px; background: rgba(176, 209, 54, .20); color: var(--wfs-ok); font-size: 12px; font-weight: 700; } .wf-prijs-switch-btn.is-active .wf-prijs-switch-tip { background: rgba(255, 255, 255, .18); color: #fff; } .wf-prijs-grid { display: grid; gap: var(--kaart-gap); grid-template-columns: 1fr; align-items: stretch; } @media (min-width: 900px) { .wf-prijs-grid { grid-template-columns: repeat(3, 1fr); } } .wf-prijs-kaart { position: relative; display: flex; flex-direction: column; padding: 32px 28px; border: 1px solid var(--wfs-line); border-radius: var(--wfs-radius-lg); background: var(--wfs-surface); box-shadow: var(--wfs-shadow); transition: transform .3s, box-shadow .3s, border-color .3s; } .wf-prijs-kaart:hover { transform: translateY(-4px); box-shadow: var(--wfs-shadow-hover); border-color: rgba(218, 23, 108, .30); } .wf-prijs-kaart.is-populair { border-color: var(--wfs-accent); box-shadow: 0 10px 40px rgba(218, 23, 108, .14); } .wf-prijs-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); padding: 6px 18px; border-radius: 30px; background: var(--wfs-accent); color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; } .wf-prijs-naam { margin: 0 0 8px; color: var(--wfs-ink); font-size: 27px; font-weight: 700; } .wf-prijs-omschrijving { margin: 0 0 22px; color: var(--wfs-ink-soft); font-size: 15px; line-height: 1.6; min-height: 72px; } .wf-prijs-bedrag { display: flex; align-items: baseline; gap: 4px; margin: 0 0 4px; color: var(--wfs-ink); } .wf-prijs-valuta { font-size: 24px; font-weight: 600; } .wf-prijs-getal { font-size: 46px; line-height: 1; font-weight: 700; letter-spacing: -.02em; } .wf-prijs-per { color: var(--wfs-ink-soft); font-size: 15px; font-weight: 500; } .wf-prijs-voordeel { margin: 0 0 18px; color: var(--wfs-ok); font-size: 14px; font-weight: 600; } .wf-prijs-bedrag + .wf-prijs-features { margin-top: 22px; } .wf-prijs-features { flex: 1 1 auto; margin: 0 0 24px; padding: 22px 0 0; border-top: 1px solid var(--wfs-line); list-style: none; } .wf-prijs-feature { display: flex; gap: 11px; margin-bottom: 12px; color: var(--wfs-ink); font-size: 15px; line-height: 1.5; } .wf-prijs-feature i { flex: 0 0 auto; margin-top: 4px; color: var(--wfs-ok); font-size: 13px; } .wf-prijs-voetnoot { margin: -8px 0 20px; color: var(--wfs-ink-soft); font-size: 13px; line-height: 1.5; } .wf-prijs-cta { display: inline-flex; align-items: center; justify-content: center; height: 52px; border-radius: 30px; background: var(--wfs-surface-alt); color: var(--wfs-ink); font-size: 15px; font-weight: 600; text-decoration: none; transition: background .25s, color .25s, transform .25s; } .wf-prijs-cta:hover { background: var(--wfs-ink); color: #fff; } .wf-prijs-kaart.is-populair .wf-prijs-cta { background: var(--wfs-accent); color: #fff; } .wf-prijs-kaart.is-populair .wf-prijs-cta:hover { background: var(--wfs-ink); } .wf-prijs-btw { margin: 26px 0 0; color: var(--wfs-ink-soft); font-size: 14px; text-align: center; } /* ------------------------------------------------------------ uitbreidingen */ .wf-uitbreidingen { display: grid; gap: 20px; grid-template-columns: 1fr; } @media (min-width: 640px) { .wf-uitbreidingen { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .wf-uitbreidingen { grid-template-columns: repeat(4, 1fr); } } .wf-uitbreiding { padding: 26px 24px; border: 1px solid var(--wfs-line); border-radius: var(--wfs-radius); background: var(--wfs-surface); transition: border-color .25s, box-shadow .25s; } .wf-uitbreiding:hover { border-color: rgba(218, 23, 108, .30); box-shadow: var(--wfs-shadow); } .wf-uitbreiding-naam { margin: 0 0 10px; color: var(--wfs-ink); font-size: 18px; font-weight: 700; } .wf-uitbreiding-tekst { margin: 0 0 16px; color: var(--wfs-ink-soft); font-size: 15px; line-height: 1.6; } .wf-uitbreiding-prijs { margin: 0; color: var(--wfs-ink); font-size: 16px; font-weight: 700; } .wf-uitbreiding-jaar { color: var(--wfs-ink-soft); font-weight: 500; } /* ------------------------------------------------------ vergelijkingstabel */ .wf-tabel-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--wfs-line); border-radius: var(--wfs-radius); background: var(--wfs-surface); } .wf-tabel { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; } .wf-tabel th, .wf-tabel td { padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--wfs-line); } .wf-tabel thead th { position: sticky; top: 0; background: var(--wfs-surface-alt); color: var(--wfs-ink); font-weight: 700; white-space: nowrap; } .wf-tabel thead th:not(:first-child), .wf-tabel tbody td { text-align: center; } .wf-tabel tbody th { color: var(--wfs-ink); font-weight: 500; } .wf-tabel-prijs { display: block; margin-top: 3px; color: var(--wfs-ink-soft); font-size: 13px; font-weight: 500; } .wf-tabel-ja i { color: var(--wfs-ok); } .wf-tabel-nee { color: var(--wfs-muted, #b6bcc8); } .wf-tabel tbody tr:last-child th, .wf-tabel tbody tr:last-child td { border-bottom: 0; } .wf-tabel tbody tr:hover th, .wf-tabel tbody tr:hover td { background: var(--wfs-surface-alt); } /* ----------------------------------------------------------------- modules */ .wf-modules-cat { margin-bottom: 56px; scroll-margin-top: 110px; } .wf-modules-cat-titel { margin: 0 0 8px; color: var(--wfs-ink); font-size: 24px; font-weight: 700; } .wf-modules-cat-intro { margin: 0 0 26px; max-width: 720px; color: var(--wfs-ink-soft); font-size: 16px; line-height: 1.6; } .wf-modules-grid { display: grid; gap: 18px; grid-template-columns: 1fr; } @media (min-width: 600px) { .wf-modules-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .wf-modules-grid { grid-template-columns: repeat(3, 1fr); } } .wf-modules-grid--kort { gap: 14px; } @media (min-width: 600px) { .wf-modules-grid--kort { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .wf-modules-grid--kort { grid-template-columns: repeat(4, 1fr); } } .wf-module-kaart { display: block; padding: 24px 22px; border: 1px solid var(--wfs-line); border-radius: var(--wfs-radius); background: var(--wfs-surface); text-decoration: none; transition: transform .25s, border-color .25s, box-shadow .25s; } a.wf-module-kaart:hover { transform: translateY(-3px); border-color: rgba(218, 23, 108, .30); box-shadow: var(--wfs-shadow); } .wf-module-icoon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 12px; background: rgba(218, 23, 108, .07); color: var(--wfs-accent); font-size: 20px; } .wf-module-naam { display: block; margin: 0 0 8px; color: var(--wfs-ink); font-size: 17px; font-weight: 700; } .wf-module-tekst { display: block; margin: 0; color: var(--wfs-ink-soft); font-size: 15px; line-height: 1.6; } .wf-module-label { display: inline-block; margin: 14px 0 0; padding: 4px 12px; border-radius: 20px; background: rgba(218, 23, 108, .08); color: var(--wfs-accent-2); font-size: 12px; font-weight: 600; } /* ------------------------------------------------------------------- flows */ .wf-flow-stappen { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; grid-template-columns: 1fr; counter-reset: none; } @media (min-width: 768px) { .wf-flow-stappen { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1200px) { .wf-flow-stappen { grid-template-columns: repeat(5, 1fr); } } .wf-flow-stap { position: relative; padding: 26px 22px; border: 1px solid var(--wfs-line); border-radius: var(--wfs-radius); background: var(--wfs-surface); } .wf-flow-nr { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-bottom: 14px; border-radius: 50%; background: var(--wfs-ink); color: #fff; font-size: 15px; font-weight: 700; } .wf-flow-stap-titel { margin: 0 0 8px; color: var(--wfs-ink); font-size: 17px; font-weight: 700; } .wf-flow-stap-tekst { margin: 0; color: var(--wfs-ink-soft); font-size: 15px; line-height: 1.6; } .wf-flow-grid { display: grid; gap: 18px; grid-template-columns: 1fr; } @media (min-width: 640px) { .wf-flow-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .wf-flow-grid { grid-template-columns: repeat(3, 1fr); } } .wf-flow-kaart { padding: 24px 22px; border: 1px solid var(--wfs-line); border-radius: var(--wfs-radius); background: var(--wfs-surface); transition: border-color .25s, box-shadow .25s; } .wf-flow-kaart:hover { border-color: rgba(218, 23, 108, .30); box-shadow: var(--wfs-shadow); } .wf-flow-naam { margin: 0 0 6px; color: var(--wfs-ink); font-size: 17px; font-weight: 700; } .wf-flow-module { margin: 0 0 10px; color: var(--wfs-accent); font-size: 13px; font-weight: 600; } .wf-flow-tekst { margin: 0; color: var(--wfs-ink-soft); font-size: 15px; line-height: 1.6; } /* --------------------------------------------------------------------- faq */ .wf-faq { max-width: 860px; margin: 0 auto; } .wf-faq-item { margin-bottom: 12px; border: 1px solid var(--wfs-line); border-radius: var(--wfs-radius); background: var(--wfs-surface); overflow: hidden; transition: border-color .25s, box-shadow .25s; } .wf-faq-item[open] { border-color: rgba(218, 23, 108, .30); box-shadow: var(--wfs-shadow); } .wf-faq-vraag { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; color: var(--wfs-ink); font-size: 17px; font-weight: 600; line-height: 1.4; cursor: pointer; list-style: none; } .wf-faq-vraag::-webkit-details-marker { display: none; } .wf-faq-vraag::after { content: "\f107"; flex: 0 0 auto; font-family: "Font Awesome 6 Pro", "Font Awesome 5 Pro", sans-serif; font-weight: 300; font-size: 18px; color: var(--wfs-accent); transition: transform .25s; } .wf-faq-item[open] .wf-faq-vraag::after { transform: rotate(180deg); } .wf-faq-antwoord { padding: 0 24px 22px; color: var(--wfs-ink-soft); font-size: 16px; line-height: 1.7; } .wf-faq-antwoord p { margin: 0 0 12px; } .wf-faq-antwoord p:last-child { margin-bottom: 0; } .wf-faq-antwoord a { color: var(--wfs-accent); text-decoration: underline; text-underline-offset: 3px; } /* ------------------------------------------------------------------ nieuws */ .wf-nieuws-grid { display: grid; gap: 26px; grid-template-columns: 1fr; } @media (min-width: 640px) { .wf-nieuws-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .wf-nieuws-grid { grid-template-columns: repeat(3, 1fr); } } .wf-nieuws-kaart { display: flex; flex-direction: column; border: 1px solid var(--wfs-line); border-radius: var(--wfs-radius); background: var(--wfs-surface); overflow: hidden; transition: transform .3s, box-shadow .3s; } .wf-nieuws-kaart:hover { transform: translateY(-4px); box-shadow: var(--wfs-shadow-hover); } .wf-nieuws-foto { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--wfs-surface-alt); } .wf-nieuws-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; } .wf-nieuws-kaart:hover .wf-nieuws-foto img { transform: scale(1.05); } .wf-nieuws-body { display: flex; flex: 1 1 auto; flex-direction: column; padding: 24px 22px; } .wf-nieuws-meta { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; color: var(--wfs-ink-soft); font-size: 13px; } .wf-nieuws-cat { padding: 4px 12px; border-radius: 20px; background: rgba(218, 23, 108, .07); color: var(--wfs-accent); font-weight: 600; } .wf-nieuws-titel { margin: 0 0 10px; font-size: 19px; line-height: 1.35; font-weight: 700; } .wf-nieuws-titel a { color: var(--wfs-ink); text-decoration: none; transition: color .2s; } .wf-nieuws-titel a:hover { color: var(--wfs-accent); } .wf-nieuws-intro { flex: 1 1 auto; margin: 0 0 18px; color: var(--wfs-ink-soft); font-size: 15px; line-height: 1.6; } .wf-nieuws-link { align-self: flex-start; color: var(--wfs-accent); font-size: 15px; font-weight: 600; text-decoration: none; } .wf-nieuws-link::after { content: " \2192"; transition: margin-left .2s; } .wf-nieuws-link:hover::after { margin-left: 4px; } .wf-leeg { padding: 40px; border: 1px dashed var(--wfs-line); border-radius: var(--wfs-radius); color: var(--wfs-ink-soft); text-align: center; } /* ------------------------------------------------------------- artikeltekst */ .wf-artikel { max-width: 780px; margin: 0 auto; color: var(--wfs-ink); font-size: 17px; line-height: 1.75; } .wf-artikel h2 { margin: 44px 0 14px; font-size: 27px; line-height: 1.25; font-weight: 700; } .wf-artikel h3 { margin: 32px 0 12px; font-size: 21px; line-height: 1.3; font-weight: 700; } .wf-artikel p { margin: 0 0 20px; color: var(--wfs-ink-soft); } .wf-artikel ul, .wf-artikel ol { margin: 0 0 22px; padding-left: 22px; color: var(--wfs-ink-soft); } .wf-artikel li { margin-bottom: 9px; } .wf-artikel a { color: var(--wfs-accent); text-decoration: underline; text-underline-offset: 3px; } .wf-artikel img { max-width: 100%; height: auto; border-radius: var(--wfs-radius); margin: 8px 0 24px; } .wf-artikel blockquote { margin: 28px 0; padding: 20px 26px; border-left: 3px solid var(--wfs-accent); border-radius: 0 var(--wfs-radius) var(--wfs-radius) 0; background: var(--wfs-surface-alt); } .wf-artikel blockquote p { margin: 0; font-size: 18px; font-style: italic; } /* ------------------------------------------------------------- doelgroepen */ .wf-doelgroep-grid { display: grid; gap: 20px; grid-template-columns: 1fr; } @media (min-width: 640px) { .wf-doelgroep-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .wf-doelgroep-grid { grid-template-columns: repeat(3, 1fr); } } .wf-doelgroep { display: flex; flex-direction: column; padding: 28px 26px; border: 1px solid var(--wfs-line); border-radius: var(--wfs-radius); background: var(--wfs-surface); text-decoration: none; transition: transform .25s, border-color .25s, box-shadow .25s; } .wf-doelgroep:hover { transform: translateY(-3px); border-color: rgba(218, 23, 108, .30); box-shadow: var(--wfs-shadow); } .wf-doelgroep-icoon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 16px; border-radius: 14px; background: rgba(218, 23, 108, .07); color: var(--wfs-accent); font-size: 22px; } .wf-doelgroep-titel { margin: 0 0 10px; color: var(--wfs-ink); font-size: 19px; font-weight: 700; } .wf-doelgroep-tekst { flex: 1 1 auto; margin: 0 0 16px; color: var(--wfs-ink-soft); font-size: 15px; line-height: 1.6; } .wf-doelgroep-link { color: var(--wfs-accent); font-size: 15px; font-weight: 600; } .wf-doelgroep-link::after { content: " \2192"; } /* ------------------------------------------------------------- reviewsblok */ .wf-score { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; padding: 22px 26px; border: 1px solid var(--wfs-line); border-radius: var(--wfs-radius); background: var(--wfs-surface); } .wf-score-cijfer { color: var(--wfs-ink); font-size: 34px; font-weight: 700; line-height: 1; } .wf-score-uit { color: var(--wfs-ink-soft); font-size: 15px; } .wf-score-tekst { color: var(--wfs-ink-soft); font-size: 15px; } .wf-score-bron { color: var(--wfs-accent); font-size: 14px; font-weight: 600; text-decoration: none; } .wf-score-bron:hover { text-decoration: underline; } .wf-sterren { display: inline-flex; gap: 3px; color: var(--wf-title, #a12359); font-size: 17px; } /* ------------------------------------------------------------------- lijst */ .wf-check-lijst { margin: 0; padding: 0; list-style: none; } .wf-check-lijst li { position: relative; margin-bottom: 13px; padding-left: 30px; color: var(--wfs-ink-soft); font-size: 16px; line-height: 1.6; } .wf-check-lijst li::before { content: "\f00c"; position: absolute; left: 0; top: 2px; font-family: "Font Awesome 6 Pro", "Font Awesome 5 Pro", sans-serif; font-weight: 300; color: var(--wfs-ok); font-size: 14px; } /* ---------------------------------------------------------------- notitie */ .wf-notitie { padding: 20px 24px; border: 1px solid var(--wfs-line); border-left: 3px solid var(--wfs-accent); border-radius: 0 var(--wfs-radius) var(--wfs-radius) 0; background: var(--wfs-surface-alt); color: var(--wfs-ink-soft); font-size: 15px; line-height: 1.65; } .wf-notitie strong { color: var(--wfs-ink); } /* -------------------------------------------------------------------- CTA */ .wf-cta-knoppen { display: flex; flex-wrap: wrap; gap: 14px; } .wf-cta-knoppen--midden { justify-content: center; } .wf-knop { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 30px; border: 1px solid transparent; border-radius: 30px; font-size: 15px; font-weight: 600; text-decoration: none; transition: background .25s, color .25s, border-color .25s, transform .25s; } .wf-knop--primair { background: var(--wfs-accent); color: #fff; } .wf-knop--primair:hover { background: var(--wfs-ink); color: #fff; transform: translateY(-2px); } .wf-knop--secundair { border-color: var(--wfs-line); background: var(--wfs-surface); color: var(--wfs-ink); } .wf-knop--secundair:hover { border-color: var(--wfs-ink); transform: translateY(-2px); } .wf-knop--licht { border-color: rgba(255, 255, 255, .7); color: #fff; } .wf-knop--licht:hover { background: #fff; color: var(--wfs-ink); } /* -------------------------------------------------------------- paginakop */ .wf-paginakop-titel { margin: 0; } .wf-paginakop-intro { max-width: 720px; margin: 0 auto; } .wf-kruimels--midden ol { justify-content: center; } .wf-kruimels--midden { margin-bottom: 16px; } /* ------------------------------------------------- hoofdmenu met 7 items -- Het menu heeft er twee items bij gekregen (Mogelijkheden, Voor wie). Deze regels houden alles op één regel binnen de containerbreedte, zonder dat de knoppen rechts uit beeld worden geduwd. */ @media (min-width: 992px) { .main-menu .wf-nav > li { margin-left: 2px; margin-right: 2px; } .main-menu .wf-navlink { padding-left: 10px; padding-right: 10px; } .main-menu .wf-nav-item.is-active > .wf-navlink::after { left: 10px; right: 10px; } .wf-header-actions { flex: 0 0 auto; } } @media (min-width: 992px) and (max-width: 1330px) { .main-menu .wf-navlink { padding-left: 7px; padding-right: 7px; font-size: 14px; } .main-menu .wf-nav-item.is-active > .wf-navlink::after { left: 7px; right: 7px; } } /* Actieve tak in het hoofdmenu duidelijk markeren. */ .wf-nav-item .wf-navlink.is-active { color: var(--wfs-accent); } /* CTA-knop in de header: korter label zodra de ruimte krap wordt. */ .wf-cta-kort { display: none; } @media (max-width: 560px) { .wf-cta-lang { display: none; } .wf-cta-kort { display: inline; } .wf-header-actions { margin-left: 0; } .tp-btn-hover.bg-blue { padding-left: 18px !important; padding-right: 18px !important; font-size: 14px !important; } } /* ---------------------------------------------- offcanvas zonder overflow -- Het template schuift het mobiele menu met `right: -100%` uit beeld. Een element dat buiten het scherm ligt vergroot het scrollgebied, waardoor de pagina op smalle schermen opzij te slepen is. Met een transform blijft de layoutpositie gelijk en verdwijnt de overflow. */ .tpoffcanvas { right: 0 !important; transform: translateX(100%); transition: transform .7s cubic-bezier(.785, .135, .15, .86), opacity .5s ease; } .tpoffcanvas.opened { transform: translateX(0); } /* Zeer smalle telefoons (tot 400px): logo en knop compacter zodat de header niet breder wordt dan het scherm. */ @media (max-width: 400px) { #header-sticky .mr-6 img { height: 26px; } #header-sticky .mr-6 { margin-right: 8px; } .tp-btn-hover.bg-blue { height: 38px !important; line-height: 38px !important; padding-left: 14px !important; padding-right: 14px !important; font-size: 13px !important; } .tp-menu-bar { width: 38px !important; height: 38px !important; margin-left: 8px !important; } } /* ---------------------------------------------------------- cookiemelding */ .wf-cookie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 99998; padding: 0 15px 15px; transform: translateY(120%); transition: transform .35s cubic-bezier(.22, .61, .36, 1); } .wf-cookie.is-zichtbaar { transform: translateY(0); } .wf-cookie-inner { display: flex; flex-direction: column; gap: 18px; max-width: 1170px; margin: 0 auto; padding: 24px 26px; border: 1px solid var(--wfs-line); border-radius: var(--wfs-radius); background: var(--wfs-surface); box-shadow: 0 18px 50px rgba(1, 16, 61, .18); } @media (min-width: 900px) { .wf-cookie-inner { flex-direction: row; align-items: center; gap: 30px; padding: 22px 30px; } } .wf-cookie-titel { margin: 0 0 6px; color: var(--wfs-ink); font-size: 17px; font-weight: 700; } .wf-cookie-tekst p { margin: 0; color: var(--wfs-ink-soft); font-size: 15px; line-height: 1.6; } .wf-cookie-tekst a { color: var(--wfs-accent); text-decoration: underline; text-underline-offset: 3px; } .wf-cookie-knoppen { display: flex; flex-wrap: wrap; gap: 12px; flex-shrink: 0; } .wf-cookie-knoppen .wf-knop { height: 46px; padding: 0 22px; font-size: 14px; white-space: nowrap; } @media (max-width: 480px) { .wf-cookie-knoppen .wf-knop { flex: 1 1 100%; } } /* De chatwidget van Tawk.to mag de cookiemelding niet overlappen. */ .wf-cookie.is-zichtbaar ~ iframe[title*="chat" i] { bottom: 150px !important; } /* Kruimelpad op de gekleurde subpaginakop: licht en subtiel leesbaar. */ .wf-kruimels--licht { margin-bottom: 14px; } .wf-kruimels--licht li { color: rgba(255, 255, 255, .8); text-shadow: 0 1px 6px rgba(1, 16, 61, .25); } .wf-kruimels--licht a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .wf-kruimels--licht [aria-current="page"] { color: #fff; font-weight: 600; } /* Cookie-instellingen staat als knop tussen de juridische links; die mag niet als knop opvallen. */ .wf-cookie-link { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; } /* Subpaginakop zonder overlappende kaart: strak afsluiten in plaats van de diepe onderruimte die de prijzenpagina nodig heeft voor haar witte kaart. */ .wf-hero-box--tekst { padding-bottom: 120px; } @media (max-width: 767.98px) { .wf-hero-box--tekst { padding-bottom: 50px; } } /* Kruimelpad op de gekleurde kop: leesbaar op elke verloopkleur door een halftransparant plaatje eronder in plaats van alleen een tekstschaduw. */ .wf-kruimels--licht ol { display: inline-flex; padding: 7px 16px; border-radius: 30px; background: rgba(1, 16, 61, .30); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .wf-kruimels--licht li { color: rgba(255, 255, 255, .85); text-shadow: none; } /* ---------------------------------------------------------- uitlegstappen */ .wf-uitleg-grid { display: grid; gap: 20px; grid-template-columns: 1fr; margin-bottom: 34px; } @media (min-width: 768px) { .wf-uitleg-grid { grid-template-columns: repeat(3, 1fr); } } .wf-uitleg { padding: 28px 26px; border: 1px solid var(--wfs-line); border-radius: var(--wfs-radius); background: var(--wfs-surface); } .wf-uitleg-nr { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-bottom: 16px; border-radius: 50%; background: var(--wfs-ink); color: #fff; font-size: 15px; font-weight: 700; } .wf-uitleg-titel { margin: 0 0 8px; color: var(--wfs-ink); font-size: 18px; font-weight: 700; } .wf-uitleg-tekst { margin: 0; color: var(--wfs-ink-soft); font-size: 15px; line-height: 1.6; } .wf-notitie--breed { max-width: 900px; margin: 0 auto; } .wf-notitie a { color: var(--wfs-accent); text-decoration: underline; text-underline-offset: 3px; } /* ------------------------------------------------- vraagknop op modulekaart */ .wf-module-kaart { display: flex; flex-direction: column; } .wf-module-kaart .wf-module-tekst { flex: 1 1 auto; } .wf-module-vraag { align-self: flex-start; margin-top: 18px; padding: 9px 18px; border: 1px solid var(--wfs-line); border-radius: 30px; background: var(--wfs-surface); color: var(--wfs-accent); font-size: 13px; font-weight: 600; cursor: pointer; transition: background .25s, color .25s, border-color .25s; } .wf-module-vraag:hover { border-color: var(--wfs-accent); background: var(--wfs-accent); color: #fff; } .wf-module-label--extra { background: rgba(218, 23, 108, .08); color: var(--wfs-accent-2); } /* --------------------------------------------------------------- CTA-blok */ .wf-cta-donker { background: rgba(1, 16, 61, .30); } .wf-cta-titel { text-shadow: 0 1px 10px rgba(1, 16, 61, .2); } .wf-cta-tekst, .wf-cta-klein { text-shadow: 0 1px 8px rgba(1, 16, 61, .2); } .wf-knop--wit { background: #fff; color: var(--wfs-ink); } .wf-knop--wit:hover { background: var(--wfs-accent); color: #fff; transform: translateY(-2px); } .wf-knop--licht { cursor: pointer; background: transparent; } /* Het pakketlabel op een modulekaart moet niet over de volle breedte rekken (de kaart is een flex-kolom) en betaalde uitbreidingen mogen opvallen. */ .wf-module-label { align-self: flex-start; margin-top: 14px; margin-bottom: 0; background: rgba(218, 23, 108, .07); color: var(--wfs-accent); } .wf-module-label--extra { background: rgba(218, 23, 108, .10); color: var(--wfs-accent-2); } /* ------------------------------------------------------------- prijzen extra */ .wf-prijs-voetregel { margin: 6px 0 0; padding-bottom: 40px; color: var(--wfs-ink-soft); font-size: 14px; line-height: 1.6; text-align: center; } .wf-inbegrepen-grid { display: grid; gap: 20px; grid-template-columns: 1fr; } @media (min-width: 600px) { .wf-inbegrepen-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .wf-inbegrepen-grid { grid-template-columns: repeat(3, 1fr); } } .wf-inbegrepen { padding: 26px 24px; border: 1px solid var(--wfs-line); border-radius: var(--wfs-radius); background: var(--wfs-surface); } .wf-inbegrepen-icoon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 12px; background: rgba(218, 23, 108, .07); color: var(--wfs-accent); font-size: 20px; } .wf-inbegrepen-titel { margin: 0 0 8px; color: var(--wfs-ink); font-size: 17px; font-weight: 700; } .wf-inbegrepen-tekst { margin: 0; color: var(--wfs-ink-soft); font-size: 15px; line-height: 1.6; } .wf-tabel-cta { margin-top: 32px; } .wf-maatwerk { max-width: 820px; margin: 0 auto; padding: 40px 38px; border: 1px solid var(--wfs-line); border-radius: var(--wfs-radius-lg); background: var(--wfs-surface); box-shadow: var(--wfs-shadow); text-align: center; } .wf-maatwerk .wf-sectie-intro { margin-bottom: 26px; } .wf-maatwerk .wf-cta-knoppen { justify-content: center; } @media (max-width: 560px) { .wf-maatwerk { padding: 30px 24px; } } .wf-faq-onder { margin: 26px 0 0; color: var(--wfs-ink-soft); font-size: 16px; text-align: center; } .wf-faq-onder a { color: var(--wfs-accent); text-decoration: underline; text-underline-offset: 3px; } .wf-tekstknop { padding: 0; border: 0; background: none; color: var(--wfs-accent); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } /* -------------------------------------------------------- homepage-secties */ .wf-flows-onder { max-width: 820px; margin: 36px auto 0; text-align: center; } .wf-flows-onder .wf-cta-knoppen { margin-top: 24px; justify-content: center; } .wf-notitie--top { margin-top: 34px; } .wf-twee-kolom { display: grid; gap: 24px; grid-template-columns: 1fr; } @media (min-width: 900px) { .wf-twee-kolom { grid-template-columns: repeat(2, 1fr); } } .wf-kolom-kaart { padding: 36px 34px; border: 1px solid var(--wfs-line); border-radius: var(--wfs-radius-lg); background: var(--wfs-surface); box-shadow: var(--wfs-shadow); } .wf-kolom-titel { margin: 0 0 12px; color: var(--wfs-ink); font-size: 24px; line-height: 1.25; font-weight: 700; } .wf-kolom-tekst { margin: 0 0 18px; color: var(--wfs-ink-soft); font-size: 16px; line-height: 1.65; } .wf-kolom-kaart .wf-doelgroep-link { text-decoration: none; } .wf-kolom-kaart .wf-doelgroep-link:hover { text-decoration: underline; text-underline-offset: 3px; } /* Het uitlegblok gebruikt op de homepage een icoon in plaats van een cijfer. */ .wf-uitleg-nr i { font-size: 16px; font-style: normal; } /* Prijskaarten buiten de witte overlappende kaart (homepage): geen negatieve marge, wel dezelfde onderlinge ruimte. */ .wf-sectie .tab-contents { margin-top: 0; } /* ------------------------------------------------------------- fasen (werkwijze) */ .wf-fase { display: grid; grid-template-columns: 1fr; gap: 18px; margin-bottom: 44px; padding-bottom: 44px; border-bottom: 1px solid var(--wfs-line); scroll-margin-top: 110px; } .wf-fase:last-of-type { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } @media (min-width: 768px) { .wf-fase { grid-template-columns: 74px 1fr; gap: 30px; } } .wf-fase-nr { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--wfs-ink); color: #fff; font-size: 22px; font-weight: 700; } .wf-fase-titel { margin: 0 0 12px; color: var(--wfs-ink); font-size: 26px; line-height: 1.25; font-weight: 700; } @media (min-width: 768px) { .wf-fase-titel { font-size: 30px; } } .wf-fase-tekst { margin: 0 0 24px; color: var(--wfs-ink-soft); font-size: 17px; line-height: 1.7; } .wf-fase-kolommen { display: grid; gap: 26px; grid-template-columns: 1fr; margin-bottom: 22px; } @media (min-width: 700px) { .wf-fase-kolommen { grid-template-columns: repeat(2, 1fr); } } .wf-fase-kop { margin: 0 0 14px; color: var(--wfs-ink); font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } /* --------------------------------------------------------- grenzen (kruislijst) */ .wf-grenzen { max-width: 820px; margin: 0 auto; padding: 32px 34px; border: 1px solid var(--wfs-line); border-radius: var(--wfs-radius-lg); background: var(--wfs-surface); } .wf-check-lijst--kruis li::before { content: "\f00d"; color: var(--wfs-accent-2); } .wf-check-lijst li:last-child { margin-bottom: 0; } /* --------------------------------------------------------------- ons verhaal */ .wf-verhaal { max-width: 800px; margin: 0 auto; } .wf-verhaal .wf-sectie-titel { margin-bottom: 24px; } .wf-verhaal-tekst { margin: 0 0 20px; color: var(--wfs-ink-soft); font-size: 17px; line-height: 1.75; } .wf-verhaal-tekst:last-child { margin-bottom: 0; } /* ------------------------------------------------------------------ tijdlijn */ .wf-tijdlijn { position: relative; max-width: 780px; margin: 0 auto; padding: 0 0 0 26px; list-style: none; border-left: 2px solid var(--wfs-line); } .wf-tijdlijn-item { position: relative; padding-bottom: 34px; } .wf-tijdlijn-item:last-child { padding-bottom: 0; } .wf-tijdlijn-item::before { content: ""; position: absolute; left: -33px; top: 6px; width: 12px; height: 12px; border: 2px solid var(--wfs-accent); border-radius: 50%; background: var(--wfs-surface); } .wf-tijdlijn-jaar { display: inline-block; margin-bottom: 8px; padding: 4px 14px; border-radius: 30px; background: rgba(218, 23, 108, .07); color: var(--wfs-accent); font-size: 13px; font-weight: 700; } .wf-tijdlijn-titel { margin: 0 0 8px; color: var(--wfs-ink); font-size: 20px; font-weight: 700; } .wf-tijdlijn-tekst { margin: 0; color: var(--wfs-ink-soft); font-size: 16px; line-height: 1.65; } /* -------------------------------------------------------------- bedrijfsgegevens */ .wf-gegevens { max-width: 720px; margin: 0 auto; padding: 8px 30px; border: 1px solid var(--wfs-line); border-radius: var(--wfs-radius); background: var(--wfs-surface); } .wf-gegevens-rij { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 16px 0; border-bottom: 1px solid var(--wfs-border-lt, #EDF5FA); } @media (min-width: 560px) { .wf-gegevens-rij { grid-template-columns: 190px 1fr; gap: 16px; align-items: baseline; } } .wf-gegevens-rij:last-child { border-bottom: 0; } .wf-gegevens dt { color: var(--wfs-ink-soft); font-size: 15px; } .wf-gegevens dd { margin: 0; color: var(--wfs-ink); font-size: 16px; font-weight: 600; } .wf-gegevens dd a { color: var(--wfs-accent); text-decoration: none; } .wf-gegevens dd a:hover { text-decoration: underline; text-underline-offset: 3px; } /* ----------------------------------------------------------------------- team */ .wf-team-grid { display: grid; gap: 24px; grid-template-columns: 1fr; margin-bottom: 40px; } @media (min-width: 600px) { .wf-team-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .wf-team-grid { grid-template-columns: repeat(4, 1fr); } } .wf-teamlid { padding: 24px; border: 1px solid var(--wfs-line); border-radius: var(--wfs-radius); background: var(--wfs-surface); text-align: center; } .wf-teamlid-foto { display: block; width: 120px; height: 120px; margin: 0 auto 16px; border-radius: 50%; object-fit: cover; } .wf-teamlid-foto--leeg { background: var(--wfs-surface-alt); } .wf-teamlid-naam { margin: 0 0 4px; color: var(--wfs-ink); font-size: 18px; font-weight: 700; } .wf-teamlid-functie { margin: 0 0 10px; color: var(--wfs-accent); font-size: 14px; font-weight: 600; } .wf-teamlid-over { margin: 0; color: var(--wfs-ink-soft); font-size: 15px; line-height: 1.6; } /* ----------------------------------------------------------- faq-pagina extra */ .wf-faq-index { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 900px; margin: 0 auto; } .wf-faq-index-link { padding: 11px 20px; border: 1px solid var(--wfs-line); border-radius: 30px; background: var(--wfs-surface); color: var(--wfs-ink); font-size: 15px; font-weight: 600; text-decoration: none; transition: border-color .25s, background .25s, color .25s; } .wf-faq-index-link:hover { border-color: var(--wfs-accent); background: var(--wfs-accent); color: #fff; } .wf-faq-groep { max-width: 900px; margin: 0 auto 50px; scroll-margin-top: 110px; } .wf-faq-groep:last-child { margin-bottom: 0; } .wf-faq-groep-titel { margin: 0 0 20px; color: var(--wfs-ink); font-size: 24px; font-weight: 700; } /* ------------------------------------------------------------- contactkaarten */ .wf-contact-kaart .wf-knop { align-self: flex-start; height: 46px; padding: 0 22px; font-size: 14px; } @media (min-width: 1024px) { .wf-contact-grid { grid-template-columns: repeat(3, 1fr); } } /* ------------------------------------------------------ scroll-naar-boven --- Zelfde positie als op coming-soon.html: die is daar uitgemeten met de chatwidget erbij, zodat de twee knoppen elkaar niet raken. 26px naar rechts (right 50 -> 29) en 10px hoger (bottom 80 -> 90). */ /* Terug naar boven — "Webfix Scroll To Top" uit claude-design. Dezelfde opbouw als de datumbadge in de CMS-header: een glasring om een opake witte schijf, met alleen de pijl erin. Hij staat onderaan de pagina, op wit of grijs, dus de ring is inkt-glas -- wit-glas zou daar wegvallen. */ .wf-naar-boven { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 60px; height: 60px; padding: 6px; border: 1.5px solid rgba(1, 16, 61, .14); border-radius: 9999px; background: rgba(1, 16, 61, .07); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); box-shadow: 0 8px 22px rgba(1, 6, 20, .12); transition: background .3s cubic-bezier(.16, 1, .3, 1), transform .3s cubic-bezier(.16, 1, .3, 1), bottom 1s ease-in-out; } .wf-naar-boven-schijf { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 9999px; background: #fff; box-shadow: 0 1px 3px rgba(18, 20, 32, .14); } .wf-naar-boven i { font-size: 16px; color: var(--wfs-titel, #a12359); transition: transform .35s cubic-bezier(.16, 1, .3, 1); } .wf-naar-boven:hover { background: rgba(1, 16, 61, .12); transform: translateY(-3px); } /* Deze knop staat vast op het scherm en is dus tijdens het hele scrollen in beeld. Vervaging van wat erachter zit moet dan elke frame opnieuw berekend worden; op een telefoon kost dat meer dan het oplevert. */ @media (pointer: coarse) { .wf-naar-boven { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255, 255, 255, .92); } } .wf-naar-boven:hover i { transform: translateY(-2px); } #back_to_top { right: 24px !important; } .back-to-top-btn-show #back_to_top { bottom: 90px !important; } /* ------------------------------------------------------- prijskaarten (merk) -- De uitgelichte kaart droeg het indigo van het oorspronkelijke template. Nu de primaire merkkleur: het roze uit de huisstijl, met een subtiel verloop naar de donkerder tint zodat de kaart diepte houdt. */ .wf-prijs-kaart-uitgelicht { background: linear-gradient(358.1deg, var(--wf-pink, #da176c) 45%, var(--wf-title, #a12359) 118%) !important; } .wf-prijs-badge-tekst { color: var(--wf-title, #a12359); } .wf-prijs-gratis { color: var(--wf-title, #a12359); } /* Vinkjes in de featurelijst: merkgroen op wit, wit op de uitgelichte kaart. */ .wf-prijs-vink { color: #fff; background: var(--wf-green-dark, #8aaa1e); } .wf-prijs-vink--licht { color: var(--wf-title, #a12359); background: #fff; } /* De knop onder een prijskaart vult de kaartbreedte. */ /* De drie kaarten even hoog: de kolom is een raster met even hoge cellen en de knop wordt naar de onderkant geduwd. Shop heeft meer punten en zou anders uitsteken. */ .wf-prijs-kaart-vak { display: flex; height: 100%; } .wf-prijs-kaart-vak > * { display: flex; flex-direction: column; width: 100%; } .wf-prijs-kaart-vak .wf-prijs-knop { margin-top: auto; } .wf-prijs-knop { display: block; } .wf-prijs-knop .wf-flow-btn { width: 100%; justify-content: center; } /* ------------------------------------------------------------ krul met badge -- Hetzelfde onderdeel als naast de schakelaar op de prijzenpagina: een gestreepte krul met de badge "1 mnd gratis". De streeplijn loopt langzaam rond. */ .wf-schakelaar-wrap { position: relative; display: inline-flex; justify-content: center; } .wf-krul { position: absolute; right: -104px; top: -44px; pointer-events: none; } .wf-krul-lijn { position: absolute; right: 52px; top: 8px; color: var(--wf-title, #a12359); opacity: .5; animation: lineDash 90s linear infinite; } .wf-krul-badge { display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; background: var(--wf-blue, #32bcee); box-shadow: 0 1px 3px rgba(75, 8, 69, .3); color: #fff; font-size: 10px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; text-align: center; animation: wf-krul-wip 3.6s ease-in-out infinite; } @keyframes wf-krul-wip { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-5px) rotate(4deg); } } @media (max-width: 900px) { .wf-krul { display: none; } } @media (prefers-reduced-motion: reduce) { .wf-krul-lijn, .wf-krul-badge { animation: none; } } /* Tekst op de uitgelichte (roze) prijskaart: de template-opaciteiten waren te laag om comfortabel te lezen op dat vlak. */ .wf-prijs-tekst-licht { color: rgba(255, 255, 255, .90); } .wf-prijs-btw-licht { color: rgba(255, 255, 255, .72); } /* --------------------------------------------------------------- talenlijst */ .wf-talen { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 860px; margin: 0 auto; } .wf-taal { padding: 9px 18px; border: 1px solid var(--wfs-line); border-radius: 30px; background: var(--wfs-surface); color: var(--wfs-ink-soft); font-size: 15px; font-weight: 500; } .wf-taal--basis { border-color: var(--wf-pink, #da176c); background: rgba(218, 23, 108, .07); color: var(--wf-title, #a12359); font-weight: 700; } /* ================================================== afsluitend CTA-blok ==== Zelfde formaat en vorm als het vorige blok: een afgeronde rechthoek van 1200px breed. Het blok valt voor de helft over het grijze vlak van de footer, zoals eerder. De opmaak erin is nieuw: de gradient van de hero-shape met de foto links uitgelijnd. De onderste helft van deze band heeft de footerkleur, zodat het blok daar half overheen valt en er geen lijn tussen zit. */ .wf-cta { position: relative; margin: 0; padding: 40px 15px 4px; background: linear-gradient(to bottom, rgba(240, 241, 245, 0) 0, rgba(240, 241, 245, 0) 50%, #f0f1f5 50%, #f0f1f5 100%); } .wf-cta-box { position: relative; max-width: 1200px; margin: 0 auto; padding: 70px 30px; border-radius: 40px; overflow: hidden; } /* Het gekleurde vlak: exact de gradient van de hero-shape. */ .wf-cta-vlak { position: absolute; inset: 0; overflow: hidden; opacity: .9; background: linear-gradient(180.21deg, #FFF9F9 -64.58%, rgba(255, 255, 255, 0.1) 115.31%), linear-gradient(90deg, #FFC368 0%, #D569E1 50%, #4164E1 100%); } /* De foto, gespiegeld ten opzichte van de hero: links scherp, naar rechts uitfadend onder de gradient. */ .wf-cta-foto { position: absolute; inset: 0; background-image: url('../img/eigen-materiaal/juichende-vrouw-webfix.jpg'); /* Volle breedte van de kaart, links uitgelijnd. Zo is de hele compositie te zien in plaats van een ingezoomde uitsnede. */ background-size: 100% auto; background-position: left center; background-repeat: no-repeat; -webkit-mask-image: linear-gradient(to left, transparent 4%, rgba(0, 0, 0, .35) 40%, #000 78%); mask-image: linear-gradient(to left, transparent 4%, rgba(0, 0, 0, .35) 40%, #000 78%); pointer-events: none; } /* De campagnepagina heeft een eigen opname in de slotkaart. Het pad staat hier en niet in het stijlblok van de pagina: daar wordt een relatief pad opgelost tegen de pagina-URL, en dan klopt het niet meer op /dev/campagne-landing. Deze foto is licht en luchtig waar die op de voorpagina juist verzadigd is, dus hij vult de kaart in plaats van op breedte te worden geschaald -- anders zie je alleen het lege midden van het bureau. Op een smalle kaart schuift het beeld op naar het spaarvarken, want anders blijft alleen de kastwand links over. */ .wf-cta-foto.wf-cta-foto--spaarvarken { background-image: url('../img/eigen-materiaal/webfix-dame-spaarvarken-bg-banner.jpg'); /* Deze opname is als banner opgemaakt en loopt rechts zelf al uit; hij vult de kaart over de volle breedte, zodat die uitloop precies op de tekst uitkomt. */ background-size: cover; background-position: center center; -webkit-mask-image: linear-gradient(to left, transparent 2%, rgba(0, 0, 0, .7) 42%, #000 78%); mask-image: linear-gradient(to left, transparent 2%, rgba(0, 0, 0, .7) 42%, #000 78%); } @media (max-width: 767.98px) { /* Op een smalle kaart blijft er maar een strook over; die schuift op naar het spaarvarken in plaats van de kastwand links. */ .wf-cta-foto.wf-cta-foto--spaarvarken { background-position: 42% center; /* Een zijwaartse fade heeft op een smalle kaart geen zin: dan blijft er alleen een bleke strook over. De tint eroverheen houdt de tekst leesbaar. */ -webkit-mask-image: none; mask-image: none; } } /* Kleurtint over de foto, zelfde opbouw als .wf-hero-tint. */ .wf-cta-tint { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180.21deg, #f7fbef -64.58%, rgba(255, 255, 255, 0.1) 115.31%), linear-gradient(90deg, #b0d136 0%, #da176c 50%, #32bcee 100%); opacity: .58; } /* De inhoud staat rechts van de foto, zodat het gezicht vrij blijft. */ .wf-cta-inhoud { position: relative; z-index: 2; max-width: 620px; margin-left: auto; text-align: center; } .wf-cta-titel { margin: 0 0 16px; color: #fff; font-size: 30px; line-height: 1.18; font-weight: 700; text-shadow: 0 2px 14px rgba(1, 16, 61, .28); } @media (min-width: 768px) { .wf-cta-titel { font-size: 42px; } } .wf-cta-tekst { margin: 0 0 30px; color: #fff; font-size: 17px; line-height: 1.6; text-shadow: 0 1px 10px rgba(1, 16, 61, .26); } @media (min-width: 768px) { .wf-cta-tekst { font-size: 18px; } } .wf-cta-klein { margin: 24px 0 0; color: rgba(255, 255, 255, .85); font-size: 14px; font-weight: 500; text-shadow: 0 1px 8px rgba(1, 16, 61, .26); } /* Tablet: foto minder dominant, inhoud gecentreerd. */ @media (max-width: 1023.98px) { .wf-cta-inhoud { max-width: 100%; margin-left: 0; } .wf-cta-foto { -webkit-mask-image: linear-gradient(to left, transparent 0%, rgba(0, 0, 0, .35) 55%, #000 100%); mask-image: linear-gradient(to left, transparent 0%, rgba(0, 0, 0, .35) 55%, #000 100%); opacity: .55; } } /* Tablet: de eigen opname van de campagnepagina houdt haar eigen masker. */ @media (max-width: 1023.98px) { .wf-cta-foto.wf-cta-foto--spaarvarken { opacity: .85; } } /* Mobiel: de foto blijft als sfeer aanwezig, de tekst staat er ruim overheen. */ @media (max-width: 767.98px) { .wf-cta { padding: 40px 12px 4px; } .wf-cta-box { padding: 50px 22px; border-radius: 30px; } .wf-cta-foto { background-position: left top; opacity: .40; } } /* ══ Twee kaarten onder de prijskaarten ═══════════════════════════════════════ "Altijd inbegrepen" en "Tegen meerprijs" staan onder de rij prijskaarten in plaats van onderaan elke kaart. Zo blijven de prijskaarten kort en staat wat overal geldt er maar een keer. Eigen klassen en niet die van de campagnesectie: dat blok mag straks weg, deze kaarten blijven. */ .wf-prijs-extra { max-width: 1200px; margin: 25px auto 30px; padding: 30px 34px 34px; border: 1px solid var(--wfs-line, rgba(1, 16, 61, .10)); border-radius: 30px; background: #fff; text-align: center; } .wf-prijs-extra-kop { font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .11em; text-transform: uppercase; color: var(--wfs-accent); margin-bottom: 16px; } /* De drie groepjes naast elkaar; daaronder gewoon onder elkaar. */ .wf-prijs-altijd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 34px; text-align: left; } @media (max-width: 767.98px) { .wf-prijs-altijd-grid { grid-template-columns: 1fr; gap: 0; } .wf-prijs-extra { padding: 26px 22px 28px; border-radius: 24px; } } .wf-prijs-altijd-kolom { min-width: 0; } /* Lijntje met een cirkeltje in het midden; het loopt naar beide kanten uit. */ .wf-prijs-scheiding { display: flex; align-items: center; gap: 10px; margin: 16px 0 14px; } .wf-prijs-scheiding::before, .wf-prijs-scheiding::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(1, 16, 61, 0), rgba(1, 16, 61, .14), rgba(1, 16, 61, 0)); } .wf-prijs-scheiding > span { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 9999px; background: linear-gradient(135deg, rgba(176, 209, 54, .16), rgba(218, 23, 108, .14), rgba(50, 188, 238, .18)); color: var(--wfs-accent); font-size: 11px; } .wf-prijs-altijd-lijst { display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; list-style: none; } .wf-prijs-altijd-lijst li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; line-height: 1.35; font-weight: 500; color: var(--wfs-ink-soft); } .wf-prijs-vlag { flex: none; width: 16px; height: 16px; border-radius: 50%; object-fit: cover; } .wf-prijs-item-ic { flex: none; width: 16px; text-align: center; font-size: 13px; color: var(--wfs-ink); opacity: .55; } /* De twee beeldmerken bovenaan de kaart; klikken brengt je naar de uitleg. */ /* De twee beeldmerken staan in een eigen kaartje, naast elkaar en gecentreerd. */ .wf-prijs-merkkaart { display: flex; align-items: center; justify-content: center; gap: 20px; max-width: 300px; margin: 0 auto 4px; padding: 14px 18px; border: 1px solid var(--wfs-line, rgba(1, 16, 61, .10)); border-radius: 18px; background: var(--wfs-surface, #fff); text-decoration: none; font-size: 21px; transition: border-color .22s, box-shadow .22s; } .wf-prijs-merkkaart:hover { border-color: rgba(218, 23, 108, .3); box-shadow: 0 8px 20px rgba(1, 16, 61, .07); } .wf-prijs-merken-sep { display: none; } .wf-merk-flows { font-family: 'Sansation', 'Plus Jakarta Sans', sans-serif; font-weight: 700; letter-spacing: -.015em; line-height: 1; background-image: linear-gradient(90deg, #b0d136 0%, #da176c 50%, #32bcee 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .wf-merk-tm { /* Zie de opmerking bij .kp-tm: uit de bodyletter en met een maatbereik. */ font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif); font-size: clamp(9px, .42em, 14px); vertical-align: super; margin-left: .1em; } .wf-merk-ai { white-space: nowrap; font-family: 'Sansation', 'Plus Jakarta Sans', sans-serif; font-weight: 700; letter-spacing: -.005em; display: inline-flex; align-items: center; line-height: 1; } .wf-merk-ai-word { color: var(--wf-black, #000229); } .wf-merk-ai-ai { margin-left: .24em; background-image: linear-gradient(90deg, #b0d136 0%, #da176c 50%, #32bcee 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Op de uitgelichte kaart wordt "AI" in de opsomming door wf-ai-text.js van een verloop voorzien; op die roze ondergrond leest dat niet. Wit dus, zoals in de Flows-headers in het CMS. */ .wf-prijs-kaart-uitgelicht .wf-ai-grad { background: none; -webkit-text-fill-color: #fff; color: #fff; } .wf-prijs-kaart-uitgelicht .wf-ai-word { color: #fff; } /* Een regel met een eigen icoon in plaats van het vinkje. */ .wf-prijs-eigen-ic { color: var(--wfs-accent); } /* ── Tegen meerprijs ──────────────────────────────────────────────────────── */ /* Onderin dezelfde kaart, met een scheiding erboven. */ .wf-prijs-meer { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--wfs-line, rgba(1, 16, 61, .10)); } .wf-prijs-meer-kop { margin-bottom: 14px; } .wf-prijs-meer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; text-align: left; } @media (max-width: 767.98px) { /* Onderin dezelfde kaart, met een scheiding erboven. */ .wf-prijs-meer { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--wfs-line, rgba(1, 16, 61, .10)); } .wf-prijs-meer-kop { margin-bottom: 14px; } .wf-prijs-meer-grid { grid-template-columns: 1fr; } } .wf-prijs-meer-cel { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--wfs-line, rgba(1, 16, 61, .10)); border-radius: 20px; background: var(--wfs-surface, #fff); } .wf-prijs-meer-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(135deg, rgba(176, 209, 54, .16), rgba(218, 23, 108, .14), rgba(50, 188, 238, .18)); color: var(--wfs-accent); font-size: 15px; } .wf-prijs-meer-tekst { flex: 1 1 auto; min-width: 0; } .wf-prijs-meer-naam { font-weight: 700; font-size: 15px; line-height: 1.3; color: var(--wfs-ink); } .wf-prijs-meer-sub { margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--wfs-ink-soft); } .wf-prijs-meer-bedrag { flex: none; font-weight: 800; font-size: 17px; line-height: 1.1; color: var(--wfs-accent); text-align: right; } .wf-prijs-meer-bedrag span { display: block; font-weight: 600; font-size: 11px; color: var(--wfs-ink-soft); } /* ============================================================================ CAMPAGNEPAGINA — Early Birds (perfectmanage-klanten.html) TIJDELIJK. Hoort bij de overstapactie voor Perfectmanage-klanten. Is die ronde voorbij, dan mag dit hele blok weg, samen met de pagina in src/pages.json, het menu-item in data/nav.json en data/campagne.json. Het aanmeldformulier zit in de hero-kaart (.wf-card uit webfix.css) en erft dus de vorm van de intake-card op de voorpagina. Hieronder staat alleen wat die kaart nog niet had. Geen enkele nieuwe kleur. ========================================================================== */ /* ------------------------------------------------------------ hero-onderdelen */ .wf-eb-hero-label { display: inline-block; margin-bottom: 14px; padding: 7px 16px; border-radius: 9999px; background: rgba(255, 255, 255, .22); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 6px rgba(1, 16, 61, .3); position: relative; z-index: 10; } .wf-eb-hero-sub { max-width: 640px; margin: 18px auto 0; font-size: 18px; line-height: 1.55; font-weight: 500; color: #fff; text-shadow: 0 1px 10px rgba(1, 16, 61, .3); position: relative; z-index: 10; } @media (max-width: 767.98px) { .wf-eb-hero-sub { font-size: 16px; margin-top: 14px; } .wf-eb-hero-label { font-size: 10px; margin-bottom: 10px; } } /* -------------------------------------------------------- kop van de kaart */ .wf-eb-kaartkop { text-align: center; padding: 16px 18px 4px; } .wf-eb-kaartkop-titel { display: block; font-size: 23px; font-weight: 700; line-height: 1.3; color: var(--wfs-titel); } .wf-eb-kaartkop-sub { display: block; margin-top: 4px; font-size: 14px; color: var(--wfs-ink-soft); } /* Twee velden naast elkaar in de kaart; onder 576px onder elkaar. */ .wf-eb-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; } @media (max-width: 575.98px) { .wf-eb-rij { grid-template-columns: 1fr; } } .wf-card-body .wf-eb-rij + .wf-pill { margin-top: 0; } /* De verzendknop staat niet meer in een pil maar los eronder, op volle breedte. Zo blijft de knop leesbaar met een lang label en oogt de kaart rustiger. */ .wf-eb-verstuur { display: block; width: 100%; height: 52px; margin-top: 12px; font-size: 16px; } @media (max-width: 575.98px) { .wf-eb-verstuur { height: 50px; font-size: 15px; } } /* Een veld dat de bezoeker moet corrigeren. Alleen na een verzendpoging gezet, nooit terwijl iemand nog aan het typen is. */ .wf-pill:has(.wf-field[aria-invalid="true"]) { box-shadow: 0 0 0 2px var(--wfs-accent), 0 1px 3px rgba(1, 16, 61, .1); } /* Meldingen binnen de kaart. Ze lenen .wf-card-note, dus alleen kleur en vlak. */ .wf-eb-herkend { color: var(--wfs-titel); background: rgba(218, 23, 108, .07); border-radius: 12px; padding: 10px 14px; margin: 0 0 12px !important; } .wf-eb-fout { color: #a1231f; background: rgba(216, 31, 37, .08); border-radius: 12px; padding: 10px 14px; margin-top: 12px !important; } .wf-eb-turnstile:not(:empty) { margin-top: 12px; } /* Het honeypot-veld. Uit beeld gehaald in plaats van display:none, omdat een deel van de bots velden overslaat die helemaal niet gerenderd worden. */ .wf-eb-vangnet { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ------------------------------------------------------------ hero-titel Eén regel, altijd. De Tailwind-maten stonden in vaste stappen en dwongen een afbreking af; clamp() schaalt vloeiend mee zodat "Perfectmanage wordt Webfix" van 320px tot ultrabreed op één regel past. */ .wf-eb-hero-titel { white-space: nowrap; font-size: clamp(21px, 5.1vw, 62px); line-height: 1.12; } /* De eyebrow op een eigen regel. Zonder deze wrapper vloeien de en de titelcontainer naast elkaar, want ze zijn allebei inline-block. */ .wf-eb-hero-labelrij { display: block; margin-bottom: 14px; } /* De krabbel onder de titel is een SVG van 491px breed. Nu de titel op één regel staat is die veel breder, dus de krabbel moet meeschalen — anders hangt hij als los streepje onder het midden. */ .wf-eb-hero-titel + div svg { width: 100%; height: auto; } @media (max-width: 767.98px) { .wf-eb-hero-labelrij { margin-bottom: 10px; } } /* ---------------------------------------------------- focus in de kaart wf-sales.css zet systeembreed een ring om elk element met toetsenbordfocus. Dat is goed voor toegankelijkheid, maar binnen een pil ringt hij het kale invoerveld en niet de pil die je ziet — vandaar de losse blauwe rand. Hier verhuist die aanduiding naar de pil zelf, in onze eigen kleur. */ .wf-card-body .wf-field:focus-visible, .wf-card-body .wf-field:focus { box-shadow: none; outline: none; } .wf-card-body .wf-pill:focus-within { box-shadow: 0 0 0 2px rgba(218, 23, 108, .32), 0 2px 10px rgba(1, 16, 61, .12); } /* Zonder icoon mag de tekst wat verder van de rand af beginnen. */ .wf-card-body .wf-pill { padding-left: 20px; } /* ------------------------------------------------------------ bevestiging */ /* Wat extra lucht onder de bevestiging: het blok vervangt het formulier en zou anders strak tegen de onderrand van de kaart komen te staan. */ .wf-eb-gelukt { text-align: center; padding: 10px 10px 24px; } .wf-eb-gelukt-icoon { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; margin-bottom: 14px; border-radius: 50%; background: rgba(176, 209, 54, .2); color: var(--wfs-ok); font-size: 26px; } .wf-eb-gelukt-titel { margin: 0 0 8px; font-size: 21px; font-weight: 700; color: var(--wfs-ink); } .wf-eb-gelukt p { margin: 0; color: var(--wfs-ink-soft); font-size: 15px; line-height: 1.6; } /* ---------------------------------------------------------------- het verhaal */ .wf-eb-intro { max-width: 780px; margin: 0 auto; text-align: center; color: var(--wfs-ink-soft); font-size: 17px; line-height: 1.75; } .wf-eb-intro p + p { margin-top: 18px; } .wf-eb-lead { font-size: 22px; line-height: 1.5; color: var(--wfs-ink); font-weight: 600; } /* ------------------------------------------------------- het aanbod-blok Overgenomen uit de nieuwsbrief: magenta kop, lichte body eronder. */ @media (max-width: 575.98px) { } /* De twee kortingen naast elkaar. */ @media (max-width: 767.98px) { } /* -------------------------------------------------- de twee krachtpatsers */ /* De lockup krijgt hier geen eigen ondermarge: die zit al in de gap. */ /* Het AI-woordmerk is een SVG op height:1em, dus schalen gaat via font-size. */ @media (max-width: 575.98px) { } @media (max-width: 991.98px) { } /* Vinkjeslijst binnen een merkkaart, in de kleur van dat merk. */ /* ------------------------------------------------------- 'Dit is óók nieuw' Twee kolommen met een korte kop en een toelichting erachter. */ @media (max-width: 575.98px) { } /* --------------------------------------------- wat niet verandert (wv) ----- 1-op-1 uit claude-design/webfix-ai-buttons-ontwerp: "Webfix Wat Niet Verandert.dc.html". Zes kaarten met een icoon in een gradientrand. */ .wv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .wv-card { position: relative; display: flex; flex-direction: column; background: var(--wfs-surface); border-radius: 30px; padding: 50px 40px; box-shadow: var(--wfs-shadow); transition: box-shadow .35s cubic-bezier(.16, 1, .3, 1); } .wv-card:hover { box-shadow: var(--wfs-shadow-hover); } .wv-ic { width: 52px; height: 52px; border-radius: 16px; margin-bottom: 35px; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; border: 1.5px solid transparent; color: var(--wfs-titel); background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #b0d136, #da176c 55%, #32bcee) border-box; } .wv-t { margin: 0 0 20px; font-weight: 700; font-size: 24px; line-height: 1.3; letter-spacing: -.015em; color: var(--wfs-ink); } .wv-s { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--wfs-ink-soft); } @media (max-width: 1080px) { .wv-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 720px) { .wv-grid { grid-template-columns: 1fr; } .wv-card { padding: 38px 28px; } } /* --------------------------------------- vertrouwde leverancier (vl) ------ 1-op-1 uit claude-design/webfix-ai-buttons-ontwerp: "Webfix Vertrouwde Leverancier.dc.html". Foto links, tekst rechts, en een balk met vier punten onderaan dezelfde kaart. */ .vl-card { background: var(--wfs-surface); border-radius: 30px; box-shadow: var(--wfs-shadow); overflow: hidden; } .vl-split { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: stretch; } .vl-mediawrap { padding: 24px 0 24px 24px; display: flex; } .vl-media { flex: 1; position: relative; min-height: 380px; border-radius: 20px; overflow: hidden; /* Een rustige mediaschaduw. De vorige kwam uit de oude Over Webfix-foto en had een halo van 120px linksboven, die over de rand van de kaart erachter heen viel. */ box-shadow: 0 18px 40px rgba(1, 16, 61, .12); background-image: url('../img/eigen-materiaal/vrouw-laptop-webfix.jpg'); background-size: cover; background-position: 32% center; } .vl-body { padding: 44px 52px 40px; display: flex; flex-direction: column; justify-content: center; } .vl-label { align-self: flex-start; display: inline-block; padding: 10px 17px; border-radius: 9999px; background: rgba(50, 188, 238, .10); font-weight: 600; font-size: 13px; line-height: 1; letter-spacing: .04em; text-transform: uppercase; color: #1f8fbb; } .vl-h { margin: 16px 0 0; font-weight: 700; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.16; letter-spacing: -.03em; color: var(--wfs-ink); } .vl-lead { margin: 14px 0 0; font-size: 18px; line-height: 1.6; color: var(--wfs-ink-soft); } .vl-p { margin: 16px 0 0; font-size: 16px; line-height: 1.72; color: var(--wfs-ink-soft); } .vl-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--wfs-line); } .vl-b { display: flex; align-items: center; gap: 11px; padding: 24px 26px; font-weight: 500; font-size: 15.5px; line-height: 1.3; color: var(--wfs-ink); } .vl-b + .vl-b { border-left: 1px solid var(--wfs-line); } .vl-tick { flex: none; width: 20px; height: 20px; border-radius: 9999px; background: var(--wfs-accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; } /* De merknamen binnen deze sectie. */ @keyframes vl-drift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .vl-flows { font-family: 'Sansation', 'Plus Jakarta Sans', sans-serif; font-weight: 700; letter-spacing: -.015em; line-height: 1; background-image: linear-gradient(90deg, #b0d136 0%, #da176c 50%, #32bcee 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: vl-drift 9s ease-in-out infinite; } .vl-tm { font-weight: 700; /* Uit de bodyletter: het teken in Sansation is 26% smaller en loopt in het klein dicht. Met een onder- en bovengrens blijft hij overal leesbaar zonder de grote koppen te overheersen. */ font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif); font-size: clamp(9px, .38em, 14px); vertical-align: text-top; position: relative; /* De duw naar beneden telt in de eigen maat van het teken. Nu dat groter is, hoort die duw kleiner: met .45em zakte het teken tot op de x-hoogte. */ top: .15em; line-height: 1; margin-left: .06em; -webkit-text-fill-color: #9aa2b1; color: #9aa2b1; } .vl-ai { white-space: nowrap; font-family: 'Sansation', 'Plus Jakarta Sans', sans-serif; font-weight: 700; letter-spacing: -.005em; display: inline-flex; align-items: center; line-height: 1; } .vl-ai-word { color: var(--wfs-ink); } .vl-ai-ai { margin-left: .24em; letter-spacing: .01em; background-image: linear-gradient(90deg, #b0d136 0%, #da176c 50%, #32bcee 100%); background-size: 220% 100%; background-position: 100% 50%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } @media (max-width: 1080px) { .vl-split { grid-template-columns: 1fr; } .vl-mediawrap { padding: 20px 20px 0; } .vl-media { min-height: 300px; } .vl-body { padding: 34px 30px 32px; } .vl-bar { grid-template-columns: repeat(2, 1fr); } .vl-b + .vl-b { border-left: none; } .vl-b:nth-child(even) { border-left: 1px solid var(--wfs-line); } .vl-b:nth-child(n+3) { border-top: 1px solid var(--wfs-line); } } @media (max-width: 620px) { .vl-bar { grid-template-columns: 1fr; } .vl-b:nth-child(even) { border-left: none; } .vl-b + .vl-b { border-top: 1px solid var(--wfs-line); } } /* ------------------------------------------------- vernieuwingen (vn) ------ 1-op-1 uit claude-design/webfix-ai-buttons-ontwerp: "Webfix Vernieuwingen Sectie.dc.html". Vervangt de vinkjeslijst door kaartjes met een icoon. */ .vn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; } .vn-row { position: relative; display: flex; align-items: flex-start; gap: 15px; background: var(--wfs-surface); border-radius: 20px; padding: 18px 22px; box-shadow: var(--wfs-shadow); transition: box-shadow .35s cubic-bezier(.16, 1, .3, 1), transform .35s cubic-bezier(.16, 1, .3, 1); } .vn-row:hover { transform: translateY(-2px); box-shadow: var(--wfs-shadow-hover); } /* Schuin badgetje rechtsboven op de rij: hoort erbij als een sticker, niet als een tweede kop. Klikbaar -- Shop gaat naar de prijskaart, de rest opent de melding dat we nog niet live zijn. */ .vn-badge { /* Rechts in de titelregel, plat: geen schaduw en niet meer schuin in de hoek. */ flex: none; align-self: center; margin-left: auto; padding: 5px 11px; border: none; border-radius: 9px; font-family: inherit; font-size: 11.5px; font-weight: 700; line-height: 1.2; white-space: nowrap; color: #fff; background: var(--wfs-accent); cursor: pointer; transition: transform .22s cubic-bezier(.16, 1, .3, 1); } .vn-badge:hover { transform: translateY(-2px); } /* De titel en het badgetje op één regel; de titel mag afbreken, het badgetje niet. */ /* De tekstkolom vult de rij, zodat het badgetje met margin-left:auto ook echt tegen de rechterrand van de kaart komt. */ .vn-row > div:last-child { flex: 1 1 auto; min-width: 0; } .vn-kop { display: flex; align-items: center; gap: 10px; } .vn-kop .vn-t { min-width: 0; } .vn-badge--shop { background: var(--wfs-accent-2); } .vn-t { font-weight: 700; font-size: 16px; line-height: 1.35; color: var(--wfs-ink); } .vn-s { margin-top: 4px; font-size: 14.5px; line-height: 1.55; color: var(--wfs-ink-soft); } /* Zelfde gradientrand als het rekenicoon: binnenvlak in padding-box, gradient in border-box. */ .vn-ic { flex: none; width: 42px; height: 42px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; border: 1.5px solid transparent; color: var(--wfs-titel); background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #b0d136, #da176c 55%, #32bcee) border-box; } /* Het AI-woordmerk binnen een regel van deze sectie. */ @keyframes vn-drift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .vn-ai { white-space: nowrap; font-family: 'Sansation', 'Plus Jakarta Sans', sans-serif; font-weight: 700; letter-spacing: -.005em; display: inline-flex; align-items: center; line-height: 1; } .vn-ai-word { color: var(--wfs-ink); } .vn-ai-ai { margin-left: .24em; letter-spacing: .01em; background-image: linear-gradient(90deg, #b0d136 0%, #da176c 50%, #32bcee 100%); background-size: 220% 100%; background-position: 100% 50%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } @media (max-width: 860px) { .vn-grid { grid-template-columns: 1fr; } } /* ------------------------------------------------ overstapactie (os) ------- 1-op-1 uit claude-design/webfix-ai-buttons-ontwerp: "Webfix Overstapactie Sectie.dc.html". Twee kaarten naast elkaar: het aanbod en het rekenvoorbeeld. De bedragen in het rekenvoorbeeld worden door wf-campagne.js vervangen zodra bekend is welk Perfectmanage-pakket de bezoeker heeft; wat in de HTML staat is het voorbeeld voor Premium, veruit de grootste groep. */ .os-grid { display: grid; /* Beide kolommen even breed; het rekenvoorbeeld had eerst wat meer ruimte. */ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: stretch; max-width: 1200px; margin-inline: auto; } .os-card { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--wfs-surface); border-radius: 30px; box-shadow: var(--wfs-shadow); } /* ── De aanbodkaart ───────────────────────────────────────────────────────── */ .os-head { position: relative; overflow: hidden; padding: 26px 34px 24px; min-height: 250px; display: flex; flex-direction: column; justify-content: flex-end; background: var(--wfs-titel); } .os-head-img { position: absolute; inset: 0; z-index: 0; background-image: url('../img/eigen-materiaal/spaarvarken-breed.jpg'); background-size: cover; background-position: 56% 62%; } .os-head-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(1, 16, 61, .10) 0%, rgba(1, 16, 61, .30) 42%, rgba(161, 35, 89, .90) 100%); } .os-eyebrow, .os-h { position: relative; z-index: 2; } .os-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 8px rgba(1, 16, 61, .55); } .os-h { margin: 9px 0 0; font-weight: 700; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.24; letter-spacing: -.02em; color: #fff; text-shadow: 0 2px 12px rgba(1, 16, 61, .45); } .os-body { padding: 28px 34px 30px; display: flex; flex-direction: column; flex: 1; } .os-p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--wfs-ink-soft); } .os-p strong { color: var(--wfs-ink); } .os-kop2-sub { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: #8a93a3; text-align: center; } .os-kop2 { margin: 4px 0 0; font-weight: 700; font-size: 18px; line-height: 1.4; color: var(--wfs-titel); text-align: center; } /* De knop staat binnen de kortingskaart, gecentreerd onder de tekst. */ .os-tile-knop { display: flex; justify-content: center; margin-top: 25px; } .os-tiles { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 16px; margin-bottom: 25px; } .os-tile { display: block; padding: 20px; border-radius: 20px; background: rgba(218, 23, 108, .07); } /* Het bedrag en de tekst naast elkaar; de knop komt daaronder. */ .os-tile-rij { display: flex; align-items: center; gap: 18px; } .os-amtbox { flex: none; padding: 14px 18px; border-radius: 16px; background: #fff; text-align: center; } .os-amt { font-weight: 700; font-size: 26px; line-height: 1; letter-spacing: -.02em; color: var(--wfs-titel); white-space: nowrap; } .os-per { margin-top: 5px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8d5169; } .os-tiletxt { font-size: 14.5px; line-height: 1.55; color: var(--wfs-ink-soft); } .os-tiletxt strong { color: var(--wfs-titel); } /* De knop sluit aan op de kortingskaart erboven in plaats van naar de onderrand te worden geduwd; 20px ertussen. */ .os-slot { margin-top: 0; padding-top: 0; display: flex; flex-direction: column; align-items: center; } /* De twee slotkaarten -- de voorwaarden links, het spaarvarken rechts -- staan onderaan hun eigen kaart en krijgen dezelfde hoogte, zodat hun onderranden op één lijn liggen. Alleen zolang de kaarten naast elkaar staan; daaronder mogen ze gewoon met de inhoud meegroeien. */ @media (min-width: 1041px) { .os-slot { margin-top: auto; } .os-delta { margin-top: auto; } .os-fine, .os-delta { min-height: 104px; display: flex; align-items: center; } .os-fine { justify-content: center; } } /* Zelfde vorm als het slotblok in het rekenvoorbeeld ernaast, maar in de infokleur: dit is een voorwaarde bij het aanbod, geen voordeel. */ .os-fine { width: 100%; box-sizing: border-box; display: flex; align-items: flex-start; gap: 13px; margin: 24px 0 0; padding: 18px 22px; border-radius: 20px; background: #fff; border: 1px solid rgba(218, 23, 108, .5); font-size: 14.5px; font-weight: 500; line-height: 1.5; color: var(--wfs-accent); text-align: left; } .os-fine i { font-size: 28px; color: var(--wfs-accent); flex: none; margin-top: 2px; } .os-fine span { margin: 0 8px; color: #c9ced8; } /* ── Het rekenvoorbeeld ───────────────────────────────────────────────────── */ .os-calc-head { padding: 26px 30px 22px; border-bottom: 1px solid var(--wfs-line); display: flex; align-items: center; gap: 13px; } /* Het icoon heeft een merkgradient als rand: twee achtergronden, de binnenste in padding-box en de gradient in border-box. */ .os-calc-ic { flex: none; width: 40px; height: 40px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; border: 1.5px solid transparent; color: var(--wfs-titel); background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #b0d136, #da176c 55%, #32bcee) border-box; } .os-calc-t { font-weight: 700; font-size: 19px; line-height: 1.25; letter-spacing: -.015em; color: var(--wfs-ink); } .os-calc-sub { margin-top: 3px; font-size: 13.5px; color: #70767f; } /* De naam van de klant onder de titel: kleiner en in de primaire kleur, en op één regel gehouden -- een lange bedrijfsnaam mag de kop niet uit elkaar trekken. */ .os-calc-org { margin-top: 3px; font-size: 13.5px; font-weight: 600; color: var(--wfs-titel); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* Rechts in de kop van het rekenvoorbeeld, op dezelfde hoogte als de titel. */ .os-btw-kop { margin: 0 0 0 auto; align-self: center; text-align: right; font-size: 12.5px; color: #70767f; } .os-btw-onder { margin: 0 24px 4px; text-align: center; font-size: 12.5px; color: #70767f; } .os-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 24px 24px 4px; } .os-col { position: relative; padding: 26px 22px 92px; border-radius: 24px; display: flex; flex-direction: column; background: rgba(1, 16, 61, .035); } .os-col.hl { background: rgba(218, 23, 108, .07); } .os-colnote { position: absolute; left: 22px; right: 22px; bottom: 20px; margin: 0; font-size: 11.5px; line-height: 1.45; color: #666c73; } .os-colnote b { font-weight: 700; color: var(--wfs-ink); } .os-dia { height: 58px; width: auto; display: block; margin: 0 auto; } .os-plan { margin-top: 18px; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #666c73; } .os-lines { margin-top: 16px; padding: 4px 14px; border-radius: 16px; background: rgba(255, 255, 255, .72); } .os-line { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 9px 0; font-size: 13.5px; line-height: 1.4; color: var(--wfs-ink-soft); } .os-line > span { min-width: 0; } .os-line + .os-line { border-top: 1px solid rgba(1, 16, 61, .07); } .os-line b { font-weight: 700; color: var(--wfs-ink); white-space: nowrap; } /* Schuin doorgestreept in de secundaire merkkleur, in plaats van een rechte streep. */ .os-line s { color: #666c73; text-decoration: none; position: relative; } .os-line s::after { content: ""; position: absolute; left: -2px; right: -2px; top: 50%; height: 2px; background: var(--wfs-accent); transform: rotate(-12deg); transform-origin: center; } /* De korting als badge, zodat het bedrag eruit springt. */ .os-korting-badge { display: inline-block; padding: 3px 10px; border-radius: 9999px; background: var(--wfs-ok); color: #fff; font-weight: 700; font-size: 12.5px; white-space: nowrap; } .os-line--voor span { color: #5f7a12; font-weight: 700; } .os-line--voor b { color: #5f7a12; } .os-now { margin-top: auto; padding-top: 20px; text-align: center; } .os-now-l { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #666c73; } .os-now-v { margin-top: 6px; font-weight: 700; font-size: 27px; line-height: 1; letter-spacing: -.025em; color: var(--wfs-ink); } .os-now-s { margin-top: 6px; font-size: 13px; color: #666c73; } .os-col.hl .os-now-v { color: var(--wfs-titel); } .os-delta { display: flex; /* Bovenaan uitlijnen: bij drie regels tekst hangt een gecentreerd icoon er halverwege naast en dat leest rommelig. */ align-items: flex-start; gap: 13px; /* Ruime lucht boven en onder: het blok sluit de rekenvoorbeeldkaart af en hoort niet tegen de kolommen erboven of de onderrand aan te liggen. */ margin: 30px 24px; padding: 18px 22px; border-radius: 20px; background: #fff; border: 1px solid rgba(176, 209, 54, .42); } .os-delta i { font-size: 28px; color: #5f7a12; flex: none; margin-top: 2px; } .os-delta-t { font-size: 14.5px; line-height: 1.5; color: #4a5a17; } .os-delta-t strong { color: #3f4d12; font-weight: 700; } .os-btw { padding: 16px 30px 22px; text-align: center; font-size: 12.5px; color: #70767f; } /* De merknamen binnen deze sectie, zelfde vorm als elders op de pagina. */ @keyframes os-drift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .os-flows { font-family: 'Sansation', 'Plus Jakarta Sans', sans-serif; font-weight: 700; letter-spacing: -.015em; line-height: 1; background-image: linear-gradient(90deg, #b0d136 0%, #da176c 50%, #32bcee 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: os-drift 9s ease-in-out infinite; } .os-tm { font-weight: 700; /* Uit de bodyletter: het teken in Sansation is 26% smaller en loopt in het klein dicht. Met een onder- en bovengrens blijft hij overal leesbaar zonder de grote koppen te overheersen. */ font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif); font-size: clamp(9px, .38em, 14px); vertical-align: text-top; position: relative; /* De duw naar beneden telt in de eigen maat van het teken. Nu dat groter is, hoort die duw kleiner: met .45em zakte het teken tot op de x-hoogte. */ top: .15em; line-height: 1; margin-left: .06em; -webkit-text-fill-color: #9aa2b1; color: #9aa2b1; } .os-aim { white-space: nowrap; font-family: 'Sansation', 'Plus Jakarta Sans', sans-serif; font-weight: 700; letter-spacing: -.005em; display: inline-flex; align-items: center; line-height: 1; } .os-aim-word { color: var(--wfs-ink); } .os-aim-ai { margin-left: .24em; letter-spacing: .01em; background-image: linear-gradient(90deg, #b0d136 0%, #da176c 50%, #32bcee 100%); background-size: 220% 100%; background-position: 100% 50%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } @media (max-width: 1040px) { .os-grid { grid-template-columns: 1fr; } } @media (max-width: 560px) { .os-cols { grid-template-columns: 1fr; } .os-head, .os-body { padding-left: 24px; padding-right: 24px; } .os-col { padding-bottom: 84px; } } /* ---------------------------------------------------- mobiel menu (mm) ----- 1-op-1 uit claude-design/webfix-ai-buttons-ontwerp: "Webfix Mobiel Menu.dc.html". Een eigen overlay in plaats van het uitschuifmenu van het template: de merkfoto onder de bewegende merkgradient met een ink-scrim eroverheen, zodat witte tekst op elke kleurstop leesbaar blijft. */ @keyframes mm-drift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .mm-ov { position: fixed; inset: 0; z-index: 1200; display: flex; flex-direction: column; background-image: url('../img/eigen-materiaal/vrouw-laptop-webfix.jpg'); background-size: cover; background-position: 38% center; transform: translateY(0); opacity: 1; transition: transform .42s cubic-bezier(.16, 1, .3, 1), opacity .3s cubic-bezier(.16, 1, .3, 1); } /* De laag zelf is de scroller; de foto en de twee kleurlagen zitten op .mm-inner, want die groeit met de inhoud mee. Op deze laag zouden ze maar een schermhoogte dekken en zag je onderaan de kale foto zodra een submenu uitklapte. De transform moet weg: die maakt van deze laag een houder voor alles wat vastgezet is. */ .mm-ov { overflow-y: auto; -webkit-overflow-scrolling: touch; transform: none; background-image: none; background-color: #2a2f52; } .mm-ov.is-closed { transform: translateY(-14px); opacity: 0; pointer-events: none; visibility: hidden; } /* Merkgradient over de foto; houdt witte tekst op elke stop boven 6:1. */ .mm-inner::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(128deg, #b0d136 0%, #da176c 50%, #32bcee 100%); background-size: 220% 100%; opacity: .68; animation: mm-drift 16s ease-in-out infinite; } /* Op een aanraakscherm staat dit verloop stil: het beslaat de hele laag en een bewegende background-position is elke frame opnieuw tekenen. Zie de toelichting bij de hero. Na de regel hierboven, anders wint die. */ @media (pointer: coarse) { .mm-inner::before { animation: none; } } /* Ink-scrim voor de leesbaarheid, zelfde tint als de rest van de pagina. */ .mm-inner::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(168deg, rgba(1, 16, 61, .42) 0%, rgba(1, 16, 61, .30) 44%, rgba(1, 16, 61, .52) 100%); } /* De inhoud staat boven de drie lagen. */ .mm-inner > * { position: relative; z-index: 1; } .mm-inner { position: relative; z-index: 1; flex: 0 0 auto; min-height: 100%; display: flex; flex-direction: column; padding: 18px 0 0; overflow: visible; background-image: url('../img/eigen-materiaal/vrouw-laptop-webfix.jpg'); background-size: cover; background-position: 38% center; background-repeat: no-repeat; } .mm-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px 0; } .mm-logo { height: 46px; width: auto; display: block; } .mm-close { width: 46px; height: 46px; border-radius: 9999px; border: 1px solid rgba(255, 255, 255, .32); background: rgba(255, 255, 255, .14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; cursor: pointer; transition: background .25s cubic-bezier(.16, 1, .3, 1), transform .25s cubic-bezier(.16, 1, .3, 1); } .mm-close:hover { background: rgba(255, 255, 255, .26); transform: rotate(90deg); } /* Eén scrollbalk voor de hele laag. Eerder scrolde alleen de lijst tussen de kop en de knoppen; zodra je een submenu uitklapte kreeg je een scrollbalk in een scrollbalk. Nu groeit het menu als geheel naar onderen en schuift het in zijn geheel mee. */ .mm-scroll { position: relative; flex: 0 0 auto; overflow: visible; } .mm-nav { margin-top: 36px; padding: 0 22px 4px; } .mm-item { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; box-sizing: border-box; padding: 11px 14px; border: none; background: none; cursor: pointer; text-align: left; font-family: var(--font-menu, Quicksand, sans-serif); font-size: 18px; font-weight: 600; letter-spacing: -.01em; color: #fff; transition: background .25s cubic-bezier(.16, 1, .3, 1); } .mm-item + .mm-item, .mm-sub + .mm-item { border-top: 1px solid rgba(255, 255, 255, .16); } .mm-nav > .mm-item:first-child { border-radius: 16px 16px 0 0; } .mm-nav > .mm-item:last-child { border-radius: 0 0 16px 16px; } /* Alleen de rij krijgt een vlak bij mouseover; het label eromheen niet, anders zie je een tweede rechthoekje over de tekst. */ .mm-item:hover { background: rgba(255, 255, 255, .12); color: #fff; } .mm-item .ch { font-size: 14px; opacity: .72; transition: transform .3s cubic-bezier(.16, 1, .3, 1); } .mm-item.is-open .ch { transform: rotate(180deg); } /* Het gekleurde streepje staat rechts naast het label, verticaal in het midden. */ .mm-item.is-active > span { position: relative; padding-right: 44px; } .mm-item.is-active > span::after { content: ""; position: absolute; right: 0; top: 50%; width: 24px; margin-top: -1.5px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #b0d136 0%, #da176c 50%, #32bcee 100%); } /* Openvouwen zonder een vaste hoogte te hoeven kennen. */ .mm-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .38s cubic-bezier(.16, 1, .3, 1); } .mm-sub > * { overflow: hidden; min-height: 0; } .mm-sub.is-open { grid-template-rows: 1fr; } .mm-sublink { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; box-sizing: border-box; padding: 11px 14px 11px 30px; border: none; background: none; cursor: pointer; text-align: left; text-decoration: none; border-top: 1px solid rgba(255, 255, 255, .16); font-family: var(--font-menu, Quicksand, sans-serif); font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: rgba(255, 255, 255, .94); transition: background .25s cubic-bezier(.16, 1, .3, 1), color .25s cubic-bezier(.16, 1, .3, 1); } .mm-sublink:hover { color: #fff; } .mm-sublink:hover { background: rgba(255, 255, 255, .12); } .mm-sublink.lvl3 { padding-left: 46px; font-size: 15px; color: rgba(255, 255, 255, .86); } .mm-sublink .ch { font-size: 13px; opacity: .7; transition: transform .3s cubic-bezier(.16, 1, .3, 1); } .mm-sublink.is-open .ch { transform: rotate(180deg); } /* Vier knoppen van gelijke maat. Op een telefoon onder elkaar over de volle breedte; vanaf 480px twee naast elkaar en twee eronder. */ /* Drie kleine knoppen naast elkaar, gecentreerd. Ze staan naast de navigatie en hoeven niet zo zwaar te wegen als de menu-items zelf. */ .mm-cta { flex: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 14px 22px 0; } .mm-taal { flex: none; display: flex; justify-content: center; padding: 16px 36px 0; } .mm-btn { flex: 0 0 auto; padding: 0 15px; font-size: 13.5px; height: 42px; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: 15px; text-decoration: none; cursor: pointer; border: none; transition: background .28s cubic-bezier(.16, 1, .3, 1), transform .28s cubic-bezier(.16, 1, .3, 1), color .28s cubic-bezier(.16, 1, .3, 1); } .mm-btn.solid { background: #fff; color: var(--wfs-titel); } .mm-btn.solid:hover { background: var(--wfs-accent); color: #fff; transform: translateY(-1px); } .mm-btn.ghost { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .34); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .mm-btn.ghost:hover { background: rgba(255, 255, 255, .26); color: #fff; transform: translateY(-1px); } /* De pay-off sluit het menu af, met de scheidingslijn erboven. */ .mm-foot { flex: none; padding: 22px 22px 26px; text-align: center; } .mm-foot::before { content: ""; display: block; height: 1px; margin: 0 14px 18px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .45) 50%, rgba(255, 255, 255, 0)); } .mm-rule { height: 1px; margin: 0 14px 18px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .45) 50%, rgba(255, 255, 255, 0)); } .mm-slogan { font-weight: 700; font-size: 15px; color: #fff; } .mm-slogan .dot { display: inline-block; margin: 0 9px; font-size: 18px; line-height: 0; position: relative; top: -1px; opacity: .6; } .mm-links { display: flex; gap: 8px; margin-top: 16px; } .mm-link { flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 46px; border-radius: 9999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .26); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-weight: 600; font-size: 13.5px; color: #fff; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .25s cubic-bezier(.16, 1, .3, 1); } .mm-link:hover { background: rgba(255, 255, 255, .24); color: #fff; } .mm-link .ic { width: 26px; height: 26px; border-radius: 9999px; background: rgba(255, 255, 255, .9); display: inline-flex; align-items: center; justify-content: center; color: var(--wfs-titel); font-size: 12px; } .mm-lang { display: inline-flex; gap: 4px; margin-top: 0; padding: 4px; border-radius: 9999px; background: rgba(1, 16, 61, .26); border: 1px solid rgba(255, 255, 255, .22); } .mm-lang button { min-width: 44px; height: 32px; border: none; border-radius: 9999px; background: none; cursor: pointer; font-weight: 700; font-size: 12.5px; letter-spacing: .04em; color: rgba(255, 255, 255, .86); transition: background .22s, color .22s; } .mm-lang button:hover { background: rgba(255, 255, 255, .16); color: #fff; } /* De actieve taal in de secundaire kleur, wat ingehouden. */ .mm-lang button.on { background: var(--wfs-accent); color: #fff; opacity: .7; } /* -------------------------------------------------- hero-content (hv) ------ 1-op-1 uit claude-design/webfix-ai-buttons-ontwerp: "Webfix Hero v2.dc.html". ALLEEN de inhoud van de hero: de balk erboven, het menu en de vorm met de foto en de gradient blijven zoals ze waren. */ /* De twee beeldmerken met een pijl ertussen, als koptekst. */ .hv-merken { margin: 30px 0 0; display: flex; align-items: center; justify-content: center; gap: clamp(20px, 3.4vw, 40px); flex-wrap: nowrap; font-size: clamp(64px, 11vw, 132px); line-height: 1.08; } .hv-merken img { height: .86em; width: auto; display: block; } .hv-merken i { font-size: .34em; color: rgba(255, 255, 255, .9); } /* Het labeltje onder de titel: glas met een lichte rand. */ .hv-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-top: 24px; padding: 9px 17px; border-radius: 9999px; background: rgba(255, 255, 255, .20); border: 1px solid rgba(255, 255, 255, .42); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 6px rgba(1, 16, 61, .3); } /* De vraag als kop boven de zin, met gewone kopruimte eronder. */ .hv-titel { margin: 26px auto 0; font-family: var(--wfs-font-kop, inherit); font-weight: 700; font-size: clamp(26px, 3vw, 34px); line-height: 1.2; letter-spacing: -.02em; color: #fff; text-shadow: 0 2px 14px rgba(1, 16, 61, .26); } .hv-lead { margin: 12px auto 0; /* Ruim genoeg om op een regel te passen; onder 992px breekt hij gewoon af. */ max-width: 760px; text-wrap: balance; font-size: 18px; line-height: 1.6; color: #fff; text-shadow: 0 1px 10px rgba(1, 16, 61, .26); } /* Uitgelicht: een donkere sluier over de pagina met de aanmeldkaart erbovenuit. Zelfde gedachte als de coming-soon-melding, alleen blijft de kaart hier op zijn plek staan -- hij wordt alleen even uit de rest opgetild. */ /* De sluier is geen vlak óver de pagina maar een UITSNEDE: een doorzichtig rechthoekje precies op de aanmeldkaart, met een slagschaduw van 9999px eromheen. Alles buiten dat rechthoekje wordt donker, de kaart zelf blijft onaangeraakt. Dat moest zo: de kaart staat in #smooth-content, en dat heeft een transform. Een element met position:fixed daarbinnen wordt gepositioneerd ten opzichte van die container, en z-index over die grens heen werkt niet. Zie ook de coming-soon-melding, die om dezelfde reden naar de body verhuist. */ .wf-spot { position: fixed; z-index: 1000; border-radius: 24px; /* Nooit klikken opvangen: de kaart eronder moet gewoon te gebruiken blijven. Het wegklikken loopt via een luisteraar op het document. */ pointer-events: none; box-shadow: 0 0 0 9999px rgba(1, 6, 20, 0); opacity: 0; visibility: hidden; transition: box-shadow .35s ease, opacity .35s ease, visibility .35s ease; } .wf-spot.open { opacity: 1; visibility: visible; box-shadow: 0 0 0 9999px rgba(1, 6, 20, .6), inset 0 0 0 3px rgba(255, 255, 255, .9); } /* ── De aanmeldkaart ──────────────────────────────────────────────────────── */ .hv-lead strong { font-weight: 700; color: #fff; } @media (min-width: 992px) { .hv-lead { white-space: nowrap; max-width: none; } } .hv-fh { padding: 22px 20px 4px; text-align: center; } /* In de kaartkop mag het vogeltje wat groter: hij staat daar alleen en draagt de kop. */ /* In de kaartkop staat de merknaam in de gradient; het vogeltje loopt mee. */ .hv-fh-t .wf-eb-merk { font-size: 1em; } .hv-fh-t .wf-vogel { height: 1.1em; vertical-align: -.18em; margin-left: .3em; } /* In de knop rechtsboven draagt het vogeltje de knop; daar mag hij fors groter. */ .wf-header-actions .wf-vogel { height: 1.9em; vertical-align: -.62em; margin-left: .34em; } .hv-fh-t { margin: 0; font-weight: 700; font-size: clamp(20px, 2.4vw, 25px); line-height: 1.25; letter-spacing: -.02em; color: var(--wfs-titel); } .hv-fh-s { margin: 6px 0 0; font-size: 14.5px; color: var(--wfs-ink-soft); } .hv-fh-s strong { color: var(--wfs-titel); } .hv-fh-link { color: var(--wfs-titel); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; } .hv-fh-link:hover { color: var(--wfs-accent); } .hv-prefill { margin: 18px 16px 0; padding: 13px 18px; border-radius: 14px; background: rgba(218, 23, 108, .07); font-size: 14px; line-height: 1.5; color: var(--wfs-titel); text-align: center; } .hv-fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px 16px 0; } .hv-inp { width: 100%; box-sizing: border-box; height: 56px; padding: 0 20px; border-radius: 16px; border: 1px solid rgba(1, 16, 61, .14); background: #fff; font-size: 15.5px; color: var(--wfs-ink); box-shadow: inset 0 1px 2px rgba(1, 16, 61, .06); transition: border-color .2s, box-shadow .2s; } .hv-inp::placeholder { color: #8a93a3; opacity: 1; } .hv-inp:hover { border-color: rgba(1, 16, 61, .26); } .hv-inp:focus { outline: none; border-color: var(--wfs-accent); box-shadow: 0 0 0 3px rgba(218, 23, 108, .07); } .hv-submit { display: block; width: calc(100% - 32px); margin: 14px 16px 0; height: 56px; border-radius: 16px; border: none; font-weight: 700; font-size: 16px; color: #fff; cursor: pointer; /* De kleur en de glans komen van de rol-klassen uit de centrale CSS; hier alleen de maat en de volle breedte. Een eigen background zou daar overheen liggen. */ transition: transform .28s cubic-bezier(.16, 1, .3, 1); } .hv-submit:hover { transform: translateY(-1px); } .hv-submit:disabled { opacity: .6; cursor: default; transform: none; } .hv-fnote { margin: 14px 0 4px; font-size: 14px; color: #8a93a3; text-align: center; } @media (max-width: 720px) { .hv-fgrid { grid-template-columns: 1fr; } } /* --------------------------------------------- rollen omgedraaid (ro) ------ 1-op-1 uit claude-design/webfix-ai-buttons-ontwerp: "Webfix Rollen Omgedraaid.dc.html". Ontwerptokens vertaald naar onze eigen variabelen; de maten en kleuren zijn ongewijzigd. */ @keyframes ro-drift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .ro-flows { font-family: 'Sansation', 'Plus Jakarta Sans', sans-serif; font-weight: 700; letter-spacing: -.015em; line-height: 1; background-image: linear-gradient(90deg, #b0d136 0%, #da176c 50%, #32bcee 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: ro-drift 9s ease-in-out infinite; } .ro-tm { font-weight: 700; /* Uit de bodyletter: het teken in Sansation is 26% smaller en loopt in het klein dicht. Met een onder- en bovengrens blijft hij overal leesbaar zonder de grote koppen te overheersen. */ font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif); font-size: clamp(9px, .38em, 14px); vertical-align: text-top; position: relative; /* De duw naar beneden telt in de eigen maat van het teken. Nu dat groter is, hoort die duw kleiner: met .45em zakte het teken tot op de x-hoogte. */ top: .15em; line-height: 1; margin-left: .06em; -webkit-text-fill-color: #9aa2b1; color: #9aa2b1; } .ro-ai { white-space: nowrap; font-family: 'Sansation', 'Plus Jakarta Sans', sans-serif; font-weight: 700; letter-spacing: -.005em; display: inline-flex; align-items: center; line-height: 1; } .ro-ai-word { color: var(--wfs-ink); } .ro-ai-ai { margin-left: .24em; letter-spacing: .01em; background-image: linear-gradient(90deg, #b0d136 0%, #da176c 50%, #32bcee 100%); background-size: 220% 100%; background-position: 100% 50%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* De overgang Perfectmanage -> Webfix als één pil met beide beeldmerken. */ .ro-lock { display: inline-flex; align-items: center; gap: 20px; padding: 16px 26px; border-radius: 9999px; background: var(--wfs-surface); box-shadow: var(--wfs-shadow); } .ro-lock img { height: 52px; width: auto; display: block; } .ro-arrow { flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; color: #b6bcc6; } /* De knoppen uit het ontwerp: pil met een cirkel die bij hover openvouwt. */ .ro-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 42px; border-radius: 9999px; overflow: hidden; border: none; cursor: pointer; font-size: 16px; font-weight: 600; line-height: 1; text-decoration: none; transition: color .5s cubic-bezier(.16, 1, .3, 1); z-index: 1; } .ro-btn > span { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 8px; transition: color .5s cubic-bezier(.16, 1, .3, 1) 100ms; } .ro-btn > b { position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 9999px; background: var(--wf-green, #b0d136); transform: translate(-50%, -50%); z-index: 1; transition: width .7s ease, height .7s ease; } .ro-btn:hover > b { width: 420px; height: 420px; } .ro-btn.blue { background: var(--wfs-accent-2); color: #fff; } .ro-btn.pink { background: var(--wfs-accent); color: #fff; } .ro-btn.soft { background: var(--wfs-ok); color: #fff; } .ro-btn.soft > b { background: var(--wfs-accent); } .ro-btn.soft:hover > span { color: #fff; } .ro-btn:hover > span { color: var(--wfs-ink); } /* Het verhaal staat in een kaart met een rand van 1px in de merkgradient. 1-op-1 uit het bijgewerkte ontwerpbestand (.ro-textcard): diagonaal verloop op 55% dekking, binnenvlak in padding-box en de gradient in border-box. */ .ro-card { margin-top: 34px; padding: 36px 38px; border-radius: 26px; border: 1px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(120deg, rgba(176, 209, 54, .55), rgba(218, 23, 108, .55) 50%, rgba(50, 188, 238, .55)) border-box; } @media (max-width: 720px) { .ro-card { padding: 28px 24px; } } /* Early Bird als merknaam: vogeltje en woord in dezelfde merkgradient. De vogel is een SVG en kan geen background-clip gebruiken, dus die krijgt de gradient als vulling mee via een eigen verloop; het woord via background-clip op de tekst. */ /* De losse regel onder de inleiding: kleiner en rustiger dan de zin erboven. */ /* ── Het kortingskaartje boven de prijzen ───────────────────────────────────── Twee bedragen onder elkaar met een pijl eronder naar de kaarten. Stond eerst als fijne regel onder de kop; dat las als een voetnoot, terwijl het juist de reden is dat deze pagina bestaat. */ .wf-kortingkaart { max-width: 420px; margin: 22px auto 0; padding: 18px 22px 14px; border: 1px solid var(--wfs-line, rgba(1, 16, 61, .10)); border-radius: 20px; background: var(--wfs-surface, #fff); text-align: left; } .wf-kortingkaart-kop { display: flex; align-items: center; gap: 9px; padding-bottom: 12px; border-bottom: 1px solid var(--wfs-line, rgba(1, 16, 61, .10)); font-size: 14.5px; line-height: 1.4; color: var(--wfs-ink-soft); } .wf-kortingkaart-kop strong { color: var(--wfs-ink); } .wf-kortingkaart-rijen { padding: 4px 0 2px; } .wf-kortingkaart-rij { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 7px 0; } .wf-kortingkaart-pakket { font-size: 14.5px; color: var(--wfs-ink-soft); } .wf-kortingkaart-bedrag { font-weight: 800; font-size: 16px; color: var(--wfs-accent); white-space: nowrap; } .wf-kortingkaart-voet { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; padding-top: 12px; border-top: 1px dashed var(--wfs-line, rgba(1, 16, 61, .14)); font-size: 13px; font-weight: 600; color: var(--wfs-ink-soft); } .wf-kortingkaart-voet i { font-size: 13px; color: var(--wfs-accent); } .wf-sectie-fijn { margin: 10px auto 0; max-width: 620px; font-size: 14.5px; line-height: 1.55; color: #8a93a3; } .wf-eb-merk--klein { font-size: 1em; } /* Het Perfectmanage-beeldmerk in de fijne regel, op tekstgrootte. */ /* De bedragen in de fijne regel in de secundaire merkkleur. */ .wf-fijn-nadruk { color: var(--wfs-accent); font-weight: 700; } .wf-fijn-diamant { height: 1.3em; width: auto; vertical-align: -.28em; margin-right: .2em; } .wf-sectie-intro .wf-eb-merk { font-size: 1em; } .wf-eb-merk { /* inline in plaats van inline-flex: een flexregel kan niet afbreken en duwde de tekst op smalle schermen buiten het scherm. */ display: inline; white-space: nowrap; font-weight: 700; font-size: 1.18em; } .wf-eb-merk .wf-vogel { height: 1.25em; vertical-align: -.2em; margin-left: .28em; } .wf-eb-merk-woord { background-image: linear-gradient(90deg, #b0d136 0%, #da176c 50%, #32bcee 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Het Early Bird-vogeltje loopt mee met de tekstgrootte en de tekstkleur, zodat hij overal subtiel blijft en op de donkere CTA-kaart vanzelf wit is. */ .wf-vogel { height: .85em; width: auto; flex: none; vertical-align: -.09em; margin-left: .34em; } .ro-wrap { max-width: 840px; margin: 0 auto; text-align: center; } /* De hero sluit hier direct op aan; ruimte bovenin zou een gat maken. */ .wf-sectie--geen-ruimte-boven { padding-top: 0; } /* De titel volgt nu op een badge in plaats van op de beeldmerken. */ .ro-wrap .wf-sectie-label + .ro-titel { margin-top: 16px; } .ro-titel { margin: 34px 0 0; font-weight: 700; font-size: clamp(28px, 3.8vw, 40px); line-height: 1.22; letter-spacing: -.03em; color: var(--wfs-ink); text-wrap: pretty; } .ro-tekst { margin: 0; font-size: 17px; line-height: 1.72; color: var(--wfs-ink-soft); text-wrap: pretty; } .ro-tekst + .ro-tekst { margin-top: 20px; } .ro-actions { margin-top: 36px; } .ro-tekst strong { color: var(--wfs-ink); } @media (max-width: 720px) { .ro-lock { gap: 14px; padding: 13px 18px; } .ro-lock img { height: 40px; } .ro-actions { flex-direction: column; align-items: stretch; } .ro-btn { width: 100%; padding: 0 24px; } } /* ------------------------------------------------- twee krachtpatsers (kp) -- 1-op-1 overgenomen uit claude-design/webfix-ai-buttons-ontwerp: "Webfix Krachtpatsers Sectie.dc.html". De ontwerptokens van dat bestand zijn vertaald naar onze eigen variabelen; de maten, kleuren en verhoudingen zijn ongewijzigd. Alleen deze sectie gebruikt deze klassen. */ @keyframes kp-drift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Webfix Flows(tm): één doorlopende gradient over het hele woordmerk, geen diamant. */ .kp-flows { font-family: 'Sansation', 'Plus Jakarta Sans', sans-serif; font-weight: 700; letter-spacing: -.015em; line-height: 1; background-image: linear-gradient(90deg, #b0d136 0%, #da176c 50%, #32bcee 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: kp-drift 9s ease-in-out infinite; } .kp-tm { font-weight: 700; /* Uit de bodyletter: het teken in Sansation is 26% smaller en loopt in het klein dicht. Met een onder- en bovengrens blijft hij overal leesbaar zonder de grote koppen te overheersen. */ font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif); font-size: clamp(9px, .38em, 14px); vertical-align: text-top; position: relative; /* De duw naar beneden telt in de eigen maat van het teken. Nu dat groter is, hoort die duw kleiner: met .45em zakte het teken tot op de x-hoogte. */ top: .15em; line-height: 1; margin-left: .08em; -webkit-text-fill-color: #9aa2b1; color: #9aa2b1; } /* Webfix AI: inktzwart woordmerk plus AI in de merkgradient, als in de logoset. */ .kp-ai { white-space: nowrap; font-family: 'Sansation', 'Plus Jakarta Sans', sans-serif; font-weight: 700; letter-spacing: -.005em; display: inline-flex; align-items: center; line-height: 1; } .kp-ai-word { color: var(--wf-black, #000229); } .kp-ai-ai { margin-left: .24em; font-family: 'Sansation', 'Plus Jakarta Sans', sans-serif; font-weight: 700; letter-spacing: .01em; background-image: linear-gradient(90deg, #b0d136 0%, #da176c 50%, #32bcee 100%); background-size: 220% 100%; background-position: 100% 50%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* De kaart: radius 30, oppervlak, schaduw die bij hover oploopt. */ .kp-card { position: relative; overflow: hidden; display: flex; flex-direction: column; background: var(--wfs-surface); border-radius: 30px; padding: 0 0 34px; box-shadow: var(--wfs-shadow); transition: box-shadow .35s cubic-bezier(.16, 1, .3, 1), transform .35s cubic-bezier(.16, 1, .3, 1); } .kp-card:hover { transform: translateY(-3px); box-shadow: var(--wfs-shadow-hover); } /* Het gekleurde randje bovenaan de kaart. */ .kp-rail { height: 4px; background: linear-gradient(90deg, #b0d136 0%, #da176c 50%, #32bcee 100%); background-size: 200% 100%; animation: kp-drift 9s ease-in-out infinite; } .kp-rail.blauw { background: linear-gradient(90deg, #32bcee 0%, #da176c 55%, #a12359 100%); background-size: 200% 100%; } .kp-head { padding: 34px 38px 26px; text-align: center; border-bottom: 1px solid var(--wfs-line); } .kp-slogan { margin-top: 11px; font-size: 17px; font-weight: 600; letter-spacing: .02em; color: #8a93a3; } .kp-body { padding: 26px 38px 0; } .kp-lead { margin: 0; font-size: 15.5px; line-height: 1.72; color: var(--wfs-ink-soft); } .kp-lead strong { color: var(--wf-black, #000229); font-weight: 700; } .kp-hr { height: 1px; margin: 24px 38px 22px; background: var(--wfs-line); } .kp-list { padding: 0 38px; margin: 0 0 auto; display: flex; flex-direction: column; gap: 14px; list-style: none; } /* Vinkje: 20px gevulde cirkel met een wit vinkje van 9px. */ .kp-item { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; font-weight: 500; line-height: 1.3; color: var(--wfs-ink); } .kp-item strong { font-weight: 700; } .kp-tick { flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 9999px; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; } .kp-tick.groen { background: var(--wfs-ok); } .kp-tick.roze { background: var(--wfs-accent); } .kp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 1200px; margin-inline: auto; } /* De titel van deze sectie staat in het ontwerp groter dan elders op de site. */ .kp-titel { margin: 16px auto 0; max-width: 660px; font-weight: 700; font-size: clamp(30px, 4vw, 44px); line-height: 1.2; letter-spacing: -.03em; color: var(--wfs-ink); text-wrap: pretty; } @media (max-width: 900px) { .kp-grid { grid-template-columns: 1fr; } .kp-head, .kp-body, .kp-list { padding-left: 26px; padding-right: 26px; } .kp-hr { margin-left: 26px; margin-right: 26px; } } /* --------------------------------------------------------- afsluitend blok */ .wf-eb-voordeel { max-width: 820px; margin: 0 auto; text-align: center; background: var(--wfs-surface); border: 1px solid var(--wfs-line); border-radius: var(--wfs-radius-lg); box-shadow: var(--wfs-shadow); padding: 48px 40px; } .wf-eb-voordeel .wf-cta-knoppen { margin-top: 26px; justify-content: center; } .wf-eb-klein { margin-top: 18px; font-size: 14px; line-height: 1.65; color: #9aa0a6; } .wf-eb-ondertekening { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--wfs-line); font-size: 16px; line-height: 1.6; color: var(--wfs-ink-soft); } .wf-eb-ondertekening strong { color: var(--wfs-ink); } .wf-eb-slogan { margin-top: 14px; font-size: 14.5px; font-weight: 700; color: var(--wfs-titel); } .wf-eb-slogan span { margin: 0 8px; color: #d9b3c6; } @media (max-width: 575.98px) { .wf-eb-voordeel { padding: 34px 20px; border-radius: var(--wfs-radius); } } /* ------------------------------------------------------- coming-soon-modal Zolang de volledige site nog niet live is opent elke link die ergens anders heen zou gaan deze melding. Overgenomen uit de inline stijl van coming-soon.html, zodat beide pagina's er identiek uitzien. */ .cs-modal { position: fixed; inset: 0; z-index: 99999; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(1, 16, 61, .55); } .cs-modal.open { display: flex; } .cs-modal-box { background: #fff; border-radius: 24px; max-width: 520px; width: 100%; padding: 44px 36px; text-align: center; box-shadow: 0 30px 70px rgba(1, 6, 20, .25); } .cs-modal-diamant { display: block; margin: -15px auto 18px; height: 72px; width: auto; } .cs-modal-box h3 { font-weight: 700; font-size: 26px; color: #06263d; margin: 0 0 10px; } /* Twee alinea's met een witregel ertussen; de laatste houdt de ruimte naar de knop. */ .cs-modal-box p { color: #5F6368; font-size: 16px; line-height: 1.5; margin: 0 0 14px; } .cs-modal-box p:last-of-type { margin-bottom: 24px; } /* Link en knop in de primaire merkkleur, gelijk aan de rest van de site. */ .cs-modal-box a { color: var(--wfs-titel); } .cs-modal-box a:hover { color: var(--wfs-accent); } .cs-modal-close { display: inline-flex; align-items: center; height: 46px; padding: 0 28px; border-radius: 9999px; background: var(--wfs-titel); color: #fff; font-weight: 600; border: none; cursor: pointer; font-family: inherit; } .cs-modal-close:hover { background: var(--wfs-accent); } /* ============================================================================ JURIDISCHE PAGINA'S — privacyverklaring, algemene voorwaarden, cookieverklaring Leestekst in één kolom. Geen nieuwe kleuren; alleen ritme en leesbreedte. ========================================================================== */ .wf-juridisch { max-width: 760px; margin: 0 auto; color: var(--wfs-ink-soft); font-size: 16.5px; line-height: 1.75; } .wf-juridisch h2 { margin: 42px 0 14px; font-size: 24px; font-weight: 700; color: var(--wfs-ink); } .wf-juridisch h3 { margin: 28px 0 10px; font-size: 18px; font-weight: 600; color: var(--wfs-titel); } .wf-juridisch p { margin: 0 0 16px; } .wf-juridisch ul { margin: 0 0 18px; padding-left: 22px; } .wf-juridisch li { margin-bottom: 8px; } .wf-juridisch a { color: var(--wfs-accent-2); font-weight: 600; } .wf-juridisch a:hover { text-decoration: underline; } /* Datum bovenaan: rustig, maar wel vindbaar. */ .wf-juridisch-datum { font-size: 14px; color: #9aa0a6; margin-bottom: 28px !important; } /* Waarschuwing dat de tekst nog niet juridisch getoetst is. Staat er bewust opvallend in: deze pagina's mogen niet ongemerkt als definitief doorgaan. */ .wf-juridisch-let-op { margin-bottom: 28px; padding: 16px 20px; border-radius: 14px; background: rgba(220, 158, 47, .1); border-left: 4px solid var(--wf-amber, #dc9e2f); font-size: 15px; line-height: 1.6; color: #7a5410; } /* ============================================================================ NIEUWSARTIKEL — nieuws-.html Leestekst in één kolom, met dezelfde maten als de juridische pagina's zodat lange teksten door de hele site hetzelfde lezen. ========================================================================== */ .wf-artikel { max-width: 760px; margin: 0 auto; } .wf-artikel-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 22px; font-size: 14px; color: #9aa0a6; } .wf-artikel-auteur::before { content: ""; } .wf-artikel-intro { margin: 0 0 30px; font-size: 20px; line-height: 1.6; font-weight: 500; color: var(--wfs-ink); } .wf-artikel-inhoud { color: var(--wfs-ink-soft); font-size: 16.5px; line-height: 1.78; } .wf-artikel-inhoud h2 { margin: 38px 0 14px; font-size: 24px; font-weight: 700; color: var(--wfs-ink); } .wf-artikel-inhoud h3 { margin: 28px 0 10px; font-size: 18px; font-weight: 600; color: var(--wfs-titel); } .wf-artikel-inhoud p { margin: 0 0 18px; } .wf-artikel-inhoud ul, .wf-artikel-inhoud ol { margin: 0 0 20px; padding-left: 22px; } .wf-artikel-inhoud li { margin-bottom: 9px; } .wf-artikel-inhoud a { color: var(--wfs-accent-2); font-weight: 600; } .wf-artikel-inhoud a:hover { text-decoration: underline; } .wf-artikel-inhoud img { max-width: 100%; height: auto; border-radius: var(--wfs-radius); margin: 8px 0 22px; } .wf-artikel-inhoud strong { color: var(--wfs-ink); } /* Citaat: geen aanhalingstekens maar een gekleurde streep, zoals de rest van de site. */ .wf-artikel-inhoud blockquote { margin: 26px 0; padding: 4px 0 4px 22px; border-left: 4px solid var(--wfs-accent); font-size: 18px; line-height: 1.6; color: var(--wfs-ink); } .wf-artikel-inhoud blockquote p:last-child { margin-bottom: 0; } /* Tabel in een artikel: mag horizontaal scrollen, maar de pagina nooit. */ .wf-artikel-inhoud table { display: block; overflow-x: auto; width: 100%; border-collapse: collapse; margin: 0 0 22px; font-size: 15px; } .wf-artikel-inhoud th, .wf-artikel-inhoud td { padding: 10px 14px; border-bottom: 1px solid var(--wfs-line); text-align: left; white-space: nowrap; } .wf-artikel-inhoud th { color: var(--wfs-ink); font-weight: 600; } .wf-artikel-terug { margin: 34px 0 0; padding-top: 22px; border-top: 1px solid var(--wfs-line); } .wf-artikel-terug a { color: var(--wfs-accent-2); font-weight: 600; } .wf-artikel-terug a:hover { text-decoration: underline; } /* Kop boven de berichtenlijst. Bestaat vooral om de koppenvolgorde kloppend te houden (h1 -> h2 -> h3); visueel mag hij rustig blijven. */ .wf-nieuws-kop { text-align: center; margin-bottom: 40px; } /* ============================================================================ PORTFOLIO — voorbeelden van opgeleverde websites (data/portfolio.json) ========================================================================== */ .wf-portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } @media (max-width: 991.98px) { .wf-portfolio-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575.98px) { .wf-portfolio-grid { grid-template-columns: 1fr; } } .wf-portfolio-kaart { background: var(--wfs-surface); border: 1px solid var(--wfs-line); border-radius: var(--wfs-radius); box-shadow: var(--wfs-shadow); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .3s ease, transform .3s ease; } .wf-portfolio-kaart:hover { box-shadow: var(--wfs-shadow-hover); transform: translateY(-3px); } .wf-portfolio-foto { display: block; background: var(--wfs-surface-alt); } .wf-portfolio-foto img { display: block; width: 100%; height: auto; } .wf-portfolio-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1 1 auto; } .wf-portfolio-meta { margin: 0 0 6px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--wfs-accent); } .wf-portfolio-titel { margin: 0 0 10px; font-size: 19px; font-weight: 700; color: var(--wfs-ink); } .wf-portfolio-intro { margin: 0 0 14px; color: var(--wfs-ink-soft); line-height: 1.6; flex: 1 1 auto; } .wf-portfolio-modules { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; } .wf-portfolio-modules span { padding: 4px 10px; border-radius: 9999px; background: var(--wfs-surface-alt); font-size: 12.5px; color: var(--wfs-ink-soft); } .wf-portfolio-link { color: var(--wfs-accent-2); font-weight: 600; align-self: flex-start; } .wf-portfolio-link:hover { text-decoration: underline; } /* Nog geen voorbeelden. Bewust een nette mededeling en geen verzonnen kaarten. */ .wf-leeg { max-width: 620px; margin: 0 auto; text-align: center; padding: 46px 34px; border: 1px dashed var(--wfs-line); border-radius: var(--wfs-radius-lg); background: var(--wfs-surface); color: var(--wfs-ink-soft); line-height: 1.7; } .wf-leeg-titel { margin: 0 0 10px; font-size: 20px; font-weight: 700; color: var(--wfs-ink); } .wf-leeg p { margin: 0 0 12px; } .wf-leeg p:last-child { margin-bottom: 0; } .wf-leeg-klein { font-size: 14.5px; color: #9aa0a6; }