/* ============================================================ 1 · TOKENS (uit colors_and_type.css — Bricks → Global Variables) ============================================================ */ :root { /* Brand */ --navy:#1B3A6B; --navy-light:#4A6FA5; --link-blue:#6B8FC9; --accent-violet:#7B68EE; /* Neutrals / surfaces */ --bg:#FFFFFF; --surface:#F5F5F5; --border:#D0D5DD; --text:#555F6E; /* Derived / support */ --navy-darker:#142C52; --surface-2:#ECEFF3; --text-strong:#1B3A6B; --text-muted:#8A93A2; --violet-soft:#EEEBFE; --navy-soft:#EAF0F9; /* Semantic */ --success:#1F9D6B; --warning:#E0A000; --danger:#D64545; /* Logo palette */ --logo-blue:#0084FE; --logo-black:#000000; --dot-red:#FF272B; --dot-green:#24AD39; --dot-yellow:#FFBE1C; /* Type families */ --font-display:'Thicccboi','Poppins',system-ui,-apple-system,'Segoe UI',sans-serif; --font-body:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif; /* Type scale */ --fs-display:56px; --fs-h1:44px; --fs-h2:40px; --fs-h3:28px; --fs-h4:22px; --fs-lead:20px; --fs-body:16px; --fs-small:14px; --fs-caption:13px; /* Weights */ --w-regular:400; --w-medium:500; --w-semibold:600; --w-bold:700; --w-extra:800; /* Line heights */ --lh-tight:1.1; --lh-heading:1.2; --lh-snug:1.4; --lh-body:1.6; /* Spacing */ --space-1:4px; --space-2:8px; --space-3:16px; --space-4:24px; --space-5:48px; --space-6:80px; /* Radii */ --radius-nav:6px; --radius-btn:8px; --radius-card:12px; --radius-pill:999px; /* Shadows */ --shadow-sm:0 1px 2px rgba(27,58,107,.06); --shadow-card:0 8px 24px rgba(27,58,107,.08); --shadow-lg:0 16px 40px rgba(27,58,107,.12); --shadow-btn:0 4px 12px rgba(27,58,107,.18); /* Layout */ --container:1160px; --container-narrow:760px; /* Motion */ --ease:cubic-bezier(0.22,1,0.36,1); --dur-fast:140ms; --dur:220ms; --dur-slow:380ms; } /* ============================================================ 2 · FUNNEL BASE (uit funnel.css — alleen de regels die de content gebruikt; .fn-head*, .fn-mini-footer*, .fn-sticky* zijn weggelaten = globale chrome) ============================================================ */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; line-height: var(--lh-body); } img { max-width: 100%; display: block; } a { color: inherit; } :focus-visible { outline: none; box-shadow: 0 0 0 3px var(--navy-soft); border-radius: 4px; } /* layout */ .fn-container { width: 100%; max-width: 1080px; margin-inline: auto; padding-inline: clamp(1.25rem, .5rem + 3vw, 2.5rem); } .fn-narrow { max-width: 760px; } .fn-section { padding-block: clamp(48px, 7vw, 88px); } .fn-section--surface { background: var(--surface); } .fn-section--navy { background: var(--navy); color: #fff; } /* buttons */ .fn-btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; font-family: var(--font-display); font-weight: 700; line-height: 1; border: 1.5px solid transparent; border-radius: var(--radius-btn); cursor: pointer; text-decoration: none; white-space: nowrap; text-align: center; transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); } .fn-btn svg { width: 1.1em; height: 1.1em; flex: 0 0 auto; } .fn-btn--primary { background: var(--navy); color: #fff; padding: 1rem 1.75rem; font-size: 1.0625rem; box-shadow: var(--shadow-btn); } .fn-btn--primary:hover { background: var(--navy-light); box-shadow: var(--shadow-lg); transform: translateY(-2px); } .fn-btn--primary:active { background: var(--navy-darker); box-shadow: none; transform: translateY(0); } .fn-btn--on-navy { background: #fff; color: var(--navy); } .fn-btn--on-navy:hover { background: var(--navy-soft); } .fn-btn--lg { padding: 1.15rem 2.1rem; font-size: 1.125rem; } .fn-btn--block { display: flex; width: 100%; } /* WhatsApp — brand green, used as PRIMARY on intent-landing */ .fn-btn--whatsapp { background: #25D366; color: #fff; padding: 1rem 1.75rem; font-size: 1.0625rem; box-shadow: 0 8px 24px rgba(37,211,102,.28); } .fn-btn--whatsapp:hover { background: #1FBE5B; box-shadow: 0 12px 30px rgba(37,211,102,.36); transform: translateY(-2px); } .fn-btn--whatsapp:active { background: #149E4B; box-shadow: none; transform: translateY(0); } .fn-btn--whatsapp svg { width: 1.25em; height: 1.25em; } /* type helpers */ .fn-eyebrow { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-display); font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--navy-light); margin: 0 0 1rem; } .fn-section--navy .fn-eyebrow { color: #9DB6DC; } .fn-h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.1rem, 1.4rem + 3vw, 3.4rem); line-height: 1.08; letter-spacing: -.02em; color: var(--navy); margin: 0; text-wrap: balance; } .fn-section--navy .fn-h1, .fn-section--navy .fn-h2 { color: #fff; } .fn-h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.7rem, 1.2rem + 2vw, 2.5rem); line-height: 1.12; letter-spacing: -.015em; color: var(--navy); margin: 0; text-wrap: balance; } .fn-h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.25; color: var(--navy); margin: 0; } .fn-lead { font-size: clamp(1.0625rem, 1rem + .4vw, 1.3125rem); line-height: 1.55; color: var(--text); margin: 0; text-wrap: pretty; } .fn-section--navy .fn-lead { color: #C6D2E6; } .fn-muted { color: var(--text-muted); } /* brand dots */ .fn-dots { display: inline-flex; gap: 8px; } .fn-dots span { width: 11px; height: 11px; border-radius: 999px; display: block; } .fn-dots span:nth-child(1) { background: var(--dot-red); } .fn-dots span:nth-child(2) { background: var(--dot-green); } .fn-dots span:nth-child(3) { background: var(--dot-yellow); } /* trust row (Google rating) */ .fn-trust { display: inline-flex; align-items: center; gap: .85rem; flex-wrap: wrap; } .fn-trust__stars { display: inline-flex; gap: 2px; color: var(--dot-yellow); } .fn-trust__stars svg { width: 18px; height: 18px; fill: var(--dot-yellow); stroke: none; } .fn-trust__text { font-size: .95rem; color: var(--text); } .fn-trust__text strong { color: var(--navy); font-weight: 700; } /* cards / benefits */ .fn-grid { display: grid; gap: 1.5rem; } .fn-grid--3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 880px) { .fn-grid--3 { grid-template-columns: 1fr; } } /* checklist */ .fn-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; } .fn-checklist li { display: flex; gap: .75rem; align-items: flex-start; font-size: 1.05rem; line-height: 1.5; } .fn-check { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 999px; background: var(--success); display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; } .fn-check svg { width: 15px; height: 15px; stroke: #fff; stroke-width: 3.2; fill: none; stroke-linecap: round; stroke-linejoin: round; } /* testimonials */ .fn-quote { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-card); padding: 1.75rem; box-shadow: var(--shadow-card); } .fn-quote__stars { display: inline-flex; gap: 2px; color: var(--dot-yellow); margin-bottom: .9rem; } .fn-quote__stars svg { width: 17px; height: 17px; fill: var(--dot-yellow); } .fn-quote p { font-size: 1.075rem; line-height: 1.6; color: var(--navy); font-style: italic; margin: 0 0 1.25rem; } .fn-quote__who { display: flex; align-items: center; gap: .75rem; } .fn-quote__avatar { width: 44px; height: 44px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: .95rem; color: #fff; background: var(--navy-light); flex: 0 0 auto; } .fn-quote__name { font-family: var(--font-display); font-weight: 700; color: var(--navy); font-size: .975rem; } .fn-quote__role { font-size: .875rem; color: var(--text-muted); } /* FAQ accordion */ .fn-faq { display: grid; gap: .85rem; } .fn-faq details { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-card); padding: 0 1.4rem; overflow: hidden; transition: border-color var(--dur) var(--ease); } .fn-faq details[open] { border-color: var(--navy-light); } .fn-faq summary { list-style: none; cursor: pointer; padding: 1.2rem 0; font-family: var(--font-display); font-weight: 600; font-size: 1.075rem; color: var(--navy); display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .fn-faq summary::-webkit-details-marker { display: none; } .fn-faq summary .fn-faq__icon { flex: 0 0 auto; width: 22px; height: 22px; transition: transform var(--dur) var(--ease); } .fn-faq details[open] summary .fn-faq__icon { transform: rotate(45deg); } .fn-faq summary .fn-faq__icon svg { width: 22px; height: 22px; stroke: var(--navy-light); stroke-width: 2.2; fill: none; stroke-linecap: round; } .fn-faq__body { padding: 0 0 1.3rem; font-size: 1.025rem; line-height: 1.6; color: var(--text); margin: 0; } /* "wat te verwachten" steps */ .fn-steps { display: grid; gap: 1.5rem; counter-reset: step; } .fn-step { display: flex; gap: 1.1rem; align-items: flex-start; } .fn-step__num { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 999px; background: var(--navy); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; display: inline-flex; align-items: center; justify-content: center; } .fn-step h3 { margin: .35rem 0 .35rem; } .fn-step p { margin: 0; } /* forms */ .fn-form { display: grid; gap: 1rem; } .fn-field { display: grid; gap: .4rem; } .fn-field label { font-family: var(--font-display); font-weight: 600; font-size: .9rem; color: var(--navy); } .fn-field input { font-family: var(--font-body); font-size: 1.0625rem; color: var(--navy); padding: .85rem 1rem; border: 1.5px solid var(--border); border-radius: var(--radius-btn); background: #fff; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); width: 100%; } .fn-field input::placeholder { color: var(--text-muted); } .fn-field input:focus { border-color: var(--navy-light); box-shadow: 0 0 0 3px var(--navy-soft); outline: none; } .fn-form__note { font-size: .8125rem; line-height: 1.5; color: var(--text-muted); margin: .35rem 0 0; } .fn-form__note a { color: var(--link-blue); font-weight: 600; text-decoration: none; } .fn-form__note a:hover { text-decoration: underline; } /* form success state (toggled by globale funnel.js) */ .fn-success { display: none; } .fn-form.is-done { display: none; } .fn-form.is-done + .fn-success { display: block; } .fn-success__icon { width: 64px; height: 64px; border-radius: 999px; background: var(--success); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1rem; } .fn-success__icon svg { width: 34px; height: 34px; stroke: #fff; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; } /* utilities */ .fn-center { text-align: center; } .fn-stack { display: grid; gap: 1.25rem; } /* reveal on scroll — transform-only entrance (opacity stays 1) */ [data-reveal] { transform: none; transition: transform .6s var(--ease); will-change: transform; } @media (prefers-reduced-motion: no-preference) { body:not(.fn-no-anim) [data-reveal]:not(.is-in) { transform: translateY(22px); } } @media (prefers-reduced-motion: reduce) { [data-reveal] { transform: none !important; transition: none !important; } } /* ============================================================ 3 · PAGINA-EIGEN (de inline