/* ============================================================================ Burgerzaken AI — Landingspagina Bouwt voort op de design-system tokens (colors_and_type.css + ui_kit styles.css + blocks.css). Hier: alleen layout + een paar dark-tokens die het component-laagje nodig heeft. Geen nieuwe merkkleuren. ============================================================================ */ /* ---- dark-token aanvulling ------------------------------------------------- styles.css levert .dark voor de codebase-tokens; deze vars komen uit colors_and_type.css en hebben nog geen donkere waarde. ------------------- */ .dark { --link: #6FC0EE; --blue-050: #142634; --blue-100: #18313F; --blue-200: #2E4B5C; --blue-500: #57A6DC; --blue-600: #6FC0EE; --line-blue: #2E4B5C; --primary-line: #2E4B5C; --field-sunk: #0F151B; --orange-700: #F0B463; --orange-050: #2E230F; --warn-accent: #E8A24E; --surface-2: #212B37; --r-pill: 999px; } /* ---- base ----------------------------------------------------------------- */ html { scroll-behavior: smooth; scroll-padding-top: 88px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body.lp { overflow: visible; height: auto; background: var(--paper); } .lp *, .lp *::before, .lp *::after { box-sizing: border-box; } /* NVVB-achtige vormtaal: rechte hoeken door de hele pagina */ /* --ui-accent = dragende structuur (iconen, eyebrows, stappen). Default blauw ("blauw draagt"); de oranje-tweak zet 'm op het accent. De oranje CTA + vervolgstap + let-op blijven altijd op --accent ("oranje stuurt"). */ .lp { --r-sm: 0; --r-md: 0; --r-lg: 0; --r-card: 0; --r-pill: 0; /* --accent terug op V4-oranje: het geladen V3-kit zet 'm op navy, maar V4 wil dat oranje stuurt (CTA, vervolgstap, let-op). */ --accent: var(--accent-oranje); --accent-strong: var(--orange-600); --accent-wash: var(--orange-050); --accent-line: var(--orange-200); /* dragende structuur (blauw draagt) */ --ui-accent: var(--primary); --ui-accent-wash: var(--primary-wash); --ui-accent-line: var(--primary-line); } .lp .ident, .lp .bz-ident, .lp .q-tag, .lp .brand-mark { border-radius: 0; } /* ============================================================================ WCAG 2.2 AA — contrast (1.4.3 / 1.4.11) correcties De merkkleuren blijven; alleen tekst-/icoonkleuren die <4.5:1 (of <3:1 voor niet-tekst) uitkwamen zijn naar een leesbaar niveau gebracht. ============================================================================ */ /* Oranje CTA: wit-op-oranje haalt maar 2.45:1. Donkere ink-tekst op het merk- oranje haalt ~5.9:1 en houdt "oranje stuurt" intact (de knop blijft oranje). */ .lp .btn-primary, .lp .demo-send, .lp .demo-chip.is-on, .lp .tw-opt.is-on { color: #1F2A37; } /* Kleine labels die op ink-400 stonden → ink-500 (light én dark). */ .lp .ap-prompt .q-tag { color: var(--ink-500); } .lp .civai-credit { color: var(--ink-500); } /* Oranje emphasis in de demo-leegstaat: vol merk-oranje haalt op wit ~2.3:1. De getunede --orange-700 leest in beide thema's ruim voldoende. */ .lp .demo-empty-kop b { color: var(--orange-700); } /* Status-tekst op lichte washes haalde net geen 4.5:1 — alleen in light een tikje dieper groen/oranje (in dark waren ze al ruim voldoende). */ html:not(.dark) .lp { --ok: #157046; --orange-700: #985011; } /* Dark: accent-overrides moeten op body-niveau (.dark .lp) staan, anders schaduwt de .lp-declaratie op ze af (de .dark-class zit op ). Oranje stuurt (lichter oranje, leesbaar op donker) · blauw draagt (licht glyph). */ .dark .lp { --accent: #F0B463; --accent-strong: #F7A856; --accent-wash: #2E230F; --accent-line: #5C4A2E; --ui-accent: var(--blue-600); } .wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; } @media (max-width: 640px) { .wrap { padding: 0 18px; } } .kicker { display: inline-flex; align-items: center; gap: 8px; font: 600 11.5px/1 var(--f-mono); letter-spacing: 0.10em; text-transform: uppercase; color: var(--ink-500); } .kicker .bar { display: inline-flex; gap: 2px; } .kicker .bar i { width: 3px; height: 13px; display: block; transform: skewX(-9deg); } .kicker .bar i:nth-child(1) { background: var(--primair-blauw, #0B3D66); } .kicker .bar i:nth-child(2) { background: var(--lichtblauw, #59B4E6); } .kicker .bar i:nth-child(3) { background: var(--accent-oranje, #F28C2A); } .dark .kicker .bar i:nth-child(1) { background: #6FC0EE; } .eyebrow { font: 600 11.5px/1 var(--f-mono); letter-spacing: 0.10em; text-transform: uppercase; color: var(--ui-accent); margin: 0 0 14px; } .dark .eyebrow { color: var(--ui-accent); } h1.lp-h1 { font-family: var(--f-display, "Bricolage Grotesque"); font-weight: 600; font-size: clamp(34px, 5.2vw, 60px); line-height: 1.04; letter-spacing: -0.028em; color: var(--ink-900); margin: 0; text-wrap: balance; } h2.lp-h2 { font-family: var(--f-display, "Bricolage Grotesque"); font-weight: 600; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -0.02em; color: var(--ink-900); margin: 0; text-wrap: balance; } .lp-h2 .soft { color: var(--ink-500); } h3.lp-h3 { font-family: var(--f-display, "Bricolage Grotesque"); font-weight: 600; font-size: 19px; line-height: 1.3; letter-spacing: -0.008em; color: var(--ink-900); margin: 0; } .lede { font: 400 19px/1.6 var(--f-body); color: var(--ink-700); max-width: 60ch; text-wrap: pretty; } .muted { color: var(--ink-500); } /* ---- buttons (groot, comfortabele hitbox) --------------------------------- */ .cta { height: 50px; padding: 0 22px; font-size: 15px; font-weight: 600; border-radius: var(--r-md); } .cta svg { width: 18px; height: 18px; } .cta-lg { height: 54px; padding: 0 26px; font-size: 15.5px; } .btn-link { display: inline-flex; align-items: center; gap: 7px; background: transparent; border: 0; color: var(--link); font: 600 15px var(--f-body); cursor: pointer; padding: 6px 2px; text-decoration: none; text-underline-offset: 3px; } .btn-link:hover { text-decoration: underline; } .btn-link svg { width: 18px; height: 18px; transition: transform 160ms var(--ease, ease); } .btn-link:hover svg { transform: translateX(3px); } /* ============================================================================ HEADER ============================================================================ */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in oklch, var(--paper) 82%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .header-row { display: flex; align-items: center; gap: 20px; min-height: 72px; } .brand-lockup { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; flex-shrink: 0; } .brand-lockup img { height: 30px; width: auto; display: block; } .brand-mark { height: 28px; width: auto; display: block; flex-shrink: 0; } .brand-mark .bm-1 { fill: var(--lichtblauw, #59B4E6); } .brand-mark .bm-2 { fill: var(--accent-oranje, #F28C2A); } .brand-mark .bm-3 { fill: var(--primair-blauw, #0B3D66); } .dark .brand-mark .bm-3 { fill: #6FC0EE; } .brand-text { display: flex; flex-direction: column; line-height: 1.05; } .brand-name { font-family: var(--f-display, "Bricolage Grotesque"); font-weight: 600; font-size: 17px; letter-spacing: -0.015em; color: var(--ink-900); } .brand-sub { font: 500 10px/1 var(--f-mono); letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-500); margin-top: 3px; } .site-nav { display: flex; align-items: center; gap: 4px; margin-left: 18px; } .site-nav a { display: inline-flex; align-items: center; height: 40px; padding: 0 13px; border-radius: var(--r-sm); font: 540 14px var(--f-body); color: var(--ink-700); text-decoration: none; transition: background 140ms ease, color 140ms ease; } .site-nav a:hover { background: color-mix(in oklch, var(--ink-900) 6%, transparent); color: var(--ink-900); } .header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; } .theme-toggle { width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-700); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 140ms ease, color 140ms ease, border-color 140ms ease; } .theme-toggle:hover { color: var(--ink-900); border-color: var(--accent-line); } .theme-toggle svg { width: 20px; height: 20px; } .theme-toggle .ic-moon { display: none; } .dark .theme-toggle .ic-sun { display: none; } .dark .theme-toggle .ic-moon { display: block; } .nav-toggle { display: none; } @media (max-width: 900px) { .site-nav { display: none; } .header-actions .login-btn .lbl-long { display: none; } } @media (max-width: 560px) { .brand-sub { display: none; } .header-actions .demo-btn .lbl-long { display: none; } } /* ============================================================================ HERO ============================================================================ */ /* Sticky header is 72px tall + 1px border = 73px */ :root { --header-h: 73px; } .hero { position: relative; overflow: hidden; display: flex; align-items: center; min-height: calc(100svh - var(--header-h)); } .hero::before { content: ""; position: absolute; inset: -10% -10% auto -10%; height: 620px; z-index: 0; background: radial-gradient(60% 80% at 70% 0%, color-mix(in oklch, var(--lichtblauw, #59B4E6) 16%, transparent) 0%, transparent 64%); pointer-events: none; } .dark .hero::before { background: radial-gradient(60% 80% at 70% 0%, color-mix(in oklch, var(--accent) 14%, transparent) 0%, transparent 62%); } .hero-grid { position: relative; z-index: 1; width: 100%; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(40px, 5vw, 64px); align-items: center; padding: clamp(40px, 7vh, 88px) 0; } .hero-copy { max-width: 600px; } .hero-copy .lp-h1 { margin-top: 18px; } .hero-copy .lede { margin: 22px 0 0; } .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 32px; } .trust-strip { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 26px; margin: 28px 0 0; padding: 0; max-width: 540px; } @media (max-width: 540px) { .trust-strip { grid-template-columns: 1fr; } } .trust-strip li { display: inline-flex; align-items: center; gap: 9px; font: 600 13px var(--f-body); color: var(--ink-700); } .trust-strip li svg { width: 17px; height: 17px; color: var(--ui-accent); flex-shrink: 0; } .ai-note { display: flex; align-items: flex-start; gap: 9px; margin-top: 26px; max-width: 52ch; font: 400 13px/1.5 var(--f-body); color: var(--ink-500); } .ai-note svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; color: var(--ink-400); } /* Tablet & below: stack, top-align so the card never clips, keep full-viewport floor */ @media (max-width: 920px) { .hero { align-items: flex-start; } .hero-grid { grid-template-columns: 1fr; gap: clamp(32px, 5vh, 48px); padding: clamp(36px, 6vh, 64px) 0; justify-items: start; } .hero-copy { max-width: 640px; } .hero-visual { max-width: 560px; width: 100%; } } /* Phones: tighten the floor a touch and full-width the visual */ @media (max-width: 640px) { .hero { min-height: calc(100svh - var(--header-h)); align-items: flex-start; } .hero-grid { gap: 28px; padding: 28px 0 40px; } .hero-visual { max-width: none; } } /* Short landscape viewports: don't force a tall hero, just breathe */ @media (max-height: 560px) and (min-width: 921px) { .hero { min-height: 0; } .hero-grid { padding: 48px 0; } } /* ---- hero "answer" preview ------------------------------------------------ */ .answer-preview { position: relative; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-card); box-shadow: var(--sh-lg); padding: 20px; overflow: hidden; } .ap-prompt { display: flex; align-items: center; gap: 10px; padding: 11px 14px; margin-bottom: 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); font: 500 14px var(--f-body); color: var(--ink-700); } .ap-prompt .q-ic { color: var(--ui-accent); flex-shrink: 0; } .ap-prompt .q-tag { margin-left: auto; font: 600 10px var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-400); } .ap-body { display: flex; flex-direction: column; gap: 14px; } .hero-visual-cap { margin: 14px 4px 0; font: 400 13px/1.5 var(--f-body); color: var(--ink-500); text-align: center; text-wrap: pretty; } /* ============================================================================ SECTION rhythm ============================================================================ */ .section { padding: 72px 0; } .section-tint { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .section-context { background: color-mix(in oklch, var(--lichtblauw, #59B4E6) 13%, var(--paper)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .dark .section-context { background: #122530; border-color: var(--line); } .section-head { max-width: 64ch; margin-bottom: 44px; } .section-head .lede { margin: 16px 0 0; font-size: 17px; } @media (max-width: 640px) { .section { padding: 52px 0; } } /* ---- generic layout grids ------------------------------------------------- */ .trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } @media (max-width: 860px) { .trio { grid-template-columns: 1fr; } } .duo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } @media (max-width: 760px) { .duo { grid-template-columns: 1fr; } } .mech-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 28px; } @media (max-width: 980px) { .mech-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .mech-grid { grid-template-columns: 1fr; } } .feature .ident { font: 500 12.5px var(--f-mono); color: var(--ink-700); background: var(--field-sunk, var(--paper-2)); border: 1px solid var(--line); border-radius: 0; padding: 1px 5px; white-space: nowrap; } /* ---- probleem (contrast) -------------------------------------------------- */ .problem-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } @media (max-width: 760px) { .problem-grid { grid-template-columns: 1fr; } } .problem-card { padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); } .problem-card--ai { background: var(--orange-050, var(--surface-2)); border-color: var(--accent-line); } .problem-head { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; } .problem-head .ic { width: 38px; height: 38px; border-radius: var(--r-md); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--ink-500); border: 1px solid var(--line); } .problem-card--ai .problem-head .ic { background: var(--accent-wash); color: var(--accent); border-color: var(--accent-line); } .problem-head .ic svg { width: 20px; height: 20px; } .problem-label { font: 600 12px var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-700); } .problem-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; } .problem-list li { display: flex; gap: 11px; font: 400 14.5px/1.5 var(--f-body); color: var(--ink-700); text-wrap: pretty; } .problem-list li .x { width: 8px; height: 8px; flex-shrink: 0; margin-top: 7px; background: var(--ink-300, var(--line-strong)); transform: skewX(-9deg); } .problem-card--ai .problem-list li .x { background: var(--accent); } .third-way { margin-top: 24px; position: relative; overflow: hidden; padding: 30px 32px; border: 0; border-radius: var(--r-lg); background: var(--primair-blauw, #0B3D66); color: #fff; display: flex; flex-direction: column; gap: 12px; } .dark .third-way { background: linear-gradient(180deg, #16222E, #101922); border: 1px solid var(--line-strong); } .third-way::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(60% 130% at 88% 0%, color-mix(in oklch, var(--lichtblauw, #59B4E6) 30%, transparent), transparent 62%); opacity: 0.55; } .third-way > * { position: relative; z-index: 1; } .third-way-eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 600 11.5px/1 var(--f-mono); letter-spacing: 0.10em; text-transform: uppercase; color: var(--lichtblauw, #59B4E6); } .third-way-eyebrow .bars { display: inline-flex; gap: 2px; } .third-way-eyebrow .bars i { width: 3px; height: 12px; display: block; transform: skewX(-9deg); } .third-way-eyebrow .bars i:nth-child(1) { background: #59B4E6; } .third-way-eyebrow .bars i:nth-child(2) { background: #F28C2A; } .third-way-eyebrow .bars i:nth-child(3) { background: #fff; } .third-way p { margin: 0; font-family: var(--f-display, "Bricolage Grotesque"); font-weight: 500; font-size: clamp(18px, 2.2vw, 22px); line-height: 1.4; color: #fff; text-wrap: pretty; max-width: 70ch; letter-spacing: -0.01em; } .third-way p b { font-weight: 700; color: #fff; } /* ---- audience (duo panels) ------------------------------------------------ */ .audience-panel { padding: 26px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); } .audience-panel .head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .audience-panel .head h3 { font-size: 18px; } .audience-panel .role-ic { width: 42px; height: 42px; border-radius: var(--r-md); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--ui-accent-wash); color: var(--ui-accent); border: 1px solid var(--ui-accent-line); } .audience-panel .role-ic svg { width: 22px; height: 22px; } .bullet-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .bullet-list li { display: flex; gap: 11px; font: 400 14.5px/1.5 var(--f-body); color: var(--ink-700); text-wrap: pretty; } .bullet-list li .mk { color: var(--accent); flex-shrink: 0; margin-top: 1px; display: inline-flex; } .bullet-list li .mk svg { width: 16px; height: 16px; } /* ---- accent-variant (tweak): "blauw draagt" (default) ↔ "oranje stuurt" ----- Zet de dragende structuur (icoon-tegels, eyebrows, stap-nummers) op oranje. De CTA + vervolgstap staan altijd al op --accent en veranderen niet mee. */ body.acc-oranje { --ui-accent: var(--accent); --ui-accent-wash: var(--accent-wash); --ui-accent-line: var(--accent-line); } .dark body.acc-oranje, body.acc-oranje.dark { --ui-accent: #F0B463; --ui-accent-wash: color-mix(in oklch, #F0B463 13%, var(--surface)); --ui-accent-line: color-mix(in oklch, #F0B463 28%, var(--surface)); } /* ---- principes (4 cards) -------------------------------------------------- */ .feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } @media (max-width: 980px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .feature-grid { grid-template-columns: 1fr; } } .feature { display: flex; flex-direction: column; gap: 12px; padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; } .feature:hover { border-color: var(--ui-accent-line); box-shadow: var(--sh-md); transform: translateY(-2px); } .feature-ic { width: 42px; height: 42px; border-radius: var(--r-md); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--ui-accent-wash); color: var(--ui-accent); border: 1px solid var(--ui-accent-line); } .dark .feature-ic { color: var(--ui-accent); } .feature-ic svg { width: 22px; height: 22px; } .feature p { font: 400 14.5px/1.6 var(--f-body); color: var(--ink-700); margin: 0; text-wrap: pretty; } /* ---- hoe het werkt (3 steps) ---------------------------------------------- */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; position: relative; } @media (max-width: 820px) { .steps { grid-template-columns: 1fr; gap: 12px; } } .step { position: relative; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); display: flex; flex-direction: column; gap: 12px; } .step-n { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--r-md); flex-shrink: 0; background: var(--ui-accent-wash); color: var(--ui-accent); border: 1px solid var(--ui-accent-line); font: 600 16px var(--f-mono); } .dark .step-n { color: var(--ui-accent); } .step-arrow { position: absolute; top: 50%; right: -16px; transform: translateY(-50%); color: var(--ui-accent); z-index: 3; line-height: 0; } .step:last-child .step-arrow { display: none; } @media (max-width: 820px) { .step-arrow { display: none; } } .step h3 { margin-bottom: 0; } .step p { font: 400 14.5px/1.6 var(--f-body); color: var(--ink-700); margin: 0; max-width: none; } /* mechaniek-subkop: scheidt de sequentiële stappen van de parallelle principes */ .mech-head { margin-top: 48px; } .mech-kicker { display: block; font: 600 11.5px/1 var(--f-mono); letter-spacing: 0.10em; text-transform: uppercase; color: var(--ui-accent); margin-bottom: 10px; } .mech-head p { margin: 0; font: 400 16px/1.5 var(--f-body); color: var(--ink-700); max-width: 60ch; } .mech-head + .mech-grid { margin-top: 18px; } /* ---- voorbeeld: ingebedde live app ---------------------------------------- */ .example-stack { display: block; } .app-embed { border: 1px solid var(--line-strong); background: var(--surface); overflow: hidden; box-shadow: var(--sh-md); } .app-embed-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); } .aeb-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--line-strong); } .app-embed-label { margin-left: 10px; font: 600 12px var(--f-mono); letter-spacing: 0.04em; color: var(--ink-500); } .app-embed-frame { width: 100%; height: 700px; border: 0; display: block; background: var(--paper); } @media (max-width: 760px) { .app-embed-frame { height: 600px; } } .example-points { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px 26px; margin-top: 34px; } @media (max-width: 940px) { .example-points { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .example-points { grid-template-columns: 1fr; } } .example-points .aside-point { gap: 12px; } /* ---- ingebedde live demo (echte app-componenten inline) -------------------- */ .demo-mount { background: var(--paper); min-height: 540px; } .demo-empty { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: clamp(36px, 7vh, 76px) 24px; min-height: 540px; justify-content: center; } .demo-empty-kop { margin: 0; text-align: center; font: 600 23px/1.3 var(--f-display, "Bricolage Grotesque"); color: var(--ink-900); letter-spacing: -0.01em; } .demo-empty-kop b { color: var(--accent); font-weight: 600; } .demo-empty-sub { margin: -6px 0 2px; max-width: 48ch; text-align: center; font: 400 14.5px/1.55 var(--f-body); color: var(--ink-500); text-wrap: pretty; } .demo-empty .demo-suggest { width: 100%; max-width: 660px; align-items: center; gap: 12px; } .demo-empty .demo-suggest-lbl { text-align: center; } .demo-empty .demo-chips { justify-content: center; gap: 10px; } .demo-empty .demo-chip { padding: 11px 15px; font-size: 13.5px; } .demo-chip { display: inline-flex; align-items: center; gap: 8px; } .demo-chip svg { color: var(--ink-500); flex-shrink: 0; } .demo-chip:hover svg { color: var(--accent); } .demo-chip-go { margin-left: 2px; opacity: 0.45; transition: transform 140ms var(--ease, ease), opacity 140ms ease; } .demo-chip:hover .demo-chip-go { opacity: 1; transform: translate(2px, -2px); } .demo-disc { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; font: 400 12px var(--f-mono); letter-spacing: 0.01em; color: var(--ink-500); } .demo-disc svg { color: var(--ink-400); flex-shrink: 0; } .demo-scroll { max-height: 640px; overflow-y: auto; padding-bottom: 8px; } .demo-bar { display: flex; justify-content: center; padding: 13px; border-top: 1px solid var(--line); background: var(--surface-2); } .demo-reset { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; cursor: pointer; border: 1px solid var(--line-strong); background: var(--surface); font: 600 13.5px var(--f-body); color: var(--ink-700); transition: border-color 140ms ease, color 140ms ease; } .demo-reset:hover { border-color: var(--accent-line); color: var(--ink-900); } .demo-reset svg { width: 15px; height: 15px; } /* ---- voorbeeld-antwoord (DS blocks) --------------------------------------- */ .example-shell { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; align-items: start; } @media (max-width: 940px) { .example-shell { grid-template-columns: 1fr; gap: 28px; } } .answer-card { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-card); box-shadow: var(--sh-md); overflow: hidden; } .answer-card-head { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--line); background: var(--surface-2); } .answer-card-head .q-ic { color: var(--accent); flex-shrink: 0; } .answer-card-q { font: 500 14.5px var(--f-body); color: var(--ink-900); } .answer-card-body { padding: 22px 20px; display: flex; flex-direction: column; gap: 20px; } .answer-divider { height: 1px; background: var(--line); margin: 0; border: 0; } .example-aside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 96px; } @media (max-width: 940px) { .example-aside { position: static; } } .aside-point { display: flex; gap: 13px; align-items: flex-start; } .aside-point .ap-ic { width: 38px; height: 38px; border-radius: var(--r-md); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--ui-accent-wash); color: var(--ui-accent); border: 1px solid var(--ui-accent-line); } .aside-point .ap-ic svg { width: 20px; height: 20px; } .aside-point h3 { font-size: 16px; margin-bottom: 4px; } .aside-point p { font: 400 14px/1.55 var(--f-body); color: var(--ink-700); margin: 0; } /* ---- interactieve demo (composer + voorbeeldvragen + uitkomst) ------------- */ .demo-console { display: flex; flex-direction: column; gap: 16px; } .demo-composer { display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 13px; background: var(--surface); border: 1px solid var(--line-strong); transition: border-color 140ms ease, box-shadow 140ms ease; } .demo-composer:focus-within { border-color: var(--accent); box-shadow: var(--sh-focus); } .demo-q-ic { color: var(--accent); flex-shrink: 0; } .demo-input { flex: 1; min-width: 0; border: 0; background: transparent; font: 500 15px var(--f-body); color: var(--ink-900); outline: none; } .demo-input::placeholder { color: var(--ink-400); } .demo-send { width: 40px; height: 40px; flex-shrink: 0; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; transition: filter 140ms ease; } .demo-send:hover { filter: brightness(0.94); } .dark .demo-send { color: oklch(0.18 0.01 66); } .demo-send svg { width: 18px; height: 18px; } .demo-suggest { display: flex; flex-direction: column; gap: 9px; } .demo-suggest-lbl { font: 600 11px var(--f-mono); letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-500); } .demo-chips { display: flex; flex-wrap: wrap; gap: 8px; } .demo-chip { padding: 8px 13px; border: 1px solid var(--line-strong); background: var(--surface); font: 540 13px var(--f-body); color: var(--ink-700); cursor: pointer; transition: background 120ms ease, border-color 120ms ease, color 120ms ease; } .demo-chip:hover { border-color: var(--accent-line); color: var(--ink-900); } .demo-chip.is-on { background: var(--accent); color: #fff; border-color: var(--accent); } .dark .demo-chip.is-on { color: oklch(0.18 0.01 66); } .demo-output { min-height: 220px; } .demo-output .answer-card { margin: 0; } .demo-thinking { display: flex; align-items: center; gap: 12px; padding: 22px 20px; background: var(--surface); border: 1px solid var(--line); font: 500 14px var(--f-body); color: var(--ink-500); } .demo-spark { width: 18px; height: 18px; flex-shrink: 0; border-radius: 999px; border: 2px solid var(--accent-line); border-top-color: var(--accent); animation: demo-spin 0.7s linear infinite; } @media (prefers-reduced-motion: reduce) { .demo-spark { animation: none; } } @keyframes demo-spin { to { transform: rotate(360deg); } } .demo-note { display: flex; align-items: flex-start; gap: 11px; padding: 20px; background: var(--surface); border: 1px dashed var(--line-strong); font: 400 14px/1.55 var(--f-body); color: var(--ink-700); } .demo-note svg { color: var(--accent); flex-shrink: 0; margin-top: 1px; } @media (prefers-reduced-motion: no-preference) { .demo-in { animation: lp-rise 420ms var(--ease, ease) both; } } /* ---- rollen --------------------------------------------------------------- */ .roles-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } @media (max-width: 760px) { .roles-grid { grid-template-columns: 1fr; } } .role { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); } .role-ic { width: 44px; height: 44px; border-radius: var(--r-md); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--ui-accent-wash); color: var(--ui-accent); border: 1px solid var(--ui-accent-line); } .role-ic svg { width: 22px; height: 22px; } .role-tag { font: 600 10.5px var(--f-mono); letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-500); margin: 0 0 5px; } .role h3 { font-size: 17px; margin-bottom: 7px; } .role p { font: 400 14px/1.58 var(--f-body); color: var(--ink-700); margin: 0; text-wrap: pretty; } /* ---- compliance band ------------------------------------------------------ */ .compliance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px 28px; margin-top: 8px; } @media (max-width: 560px) { .compliance-grid { grid-template-columns: 1fr; } } .comp-item { display: flex; gap: 12px; align-items: flex-start; padding: 18px 4px; } .comp-item .c-ic { color: var(--ui-accent); flex-shrink: 0; margin-top: 1px; } .comp-item .c-ic svg { width: 22px; height: 22px; } .comp-item h3 { font-size: 16px; margin-bottom: 5px; } .comp-item p { font: 400 13.5px/1.55 var(--f-body); color: var(--ink-700); margin: 0; } /* ---- slot CTA ------------------------------------------------------------- */ .final-cta { position: relative; overflow: hidden; text-align: center; background: var(--primair-blauw, #0B3D66); color: #fff; border-radius: var(--r-card); padding: 60px 32px; } .dark .final-cta { background: linear-gradient(180deg, #16222E, #101922); border: 1px solid var(--line-strong); } .final-cta::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(50% 120% at 50% 0%, color-mix(in oklch, var(--lichtblauw, #59B4E6) 30%, transparent), transparent 60%); opacity: 0.5; } .final-cta > * { position: relative; z-index: 1; } .final-cta h2 { color: #fff; font-family: var(--f-display); font-weight: 600; font-size: clamp(26px, 3.4vw, 40px); letter-spacing: -0.02em; margin: 0; text-wrap: balance; } .final-cta p { color: color-mix(in oklch, #fff 82%, transparent); font: 400 17px/1.6 var(--f-body); max-width: 54ch; margin: 16px auto 0; } .final-cta .hero-cta { justify-content: center; margin-top: 30px; } .final-cta .demo-btn-light { background: #fff; color: var(--primair-blauw, #0B3D66); border: 1px solid #fff; } .final-cta .demo-btn-light:hover { background: color-mix(in oklch, #fff 90%, var(--lichtblauw)); } .final-cta .ghost-light { background: transparent; color: #fff; border: 1px solid color-mix(in oklch, #fff 45%, transparent); } .final-cta .ghost-light:hover { background: color-mix(in oklch, #fff 12%, transparent); border-color: #fff; } /* ============================================================================ FOOTER ============================================================================ */ .site-footer { padding: 48px 0 40px; border-top: 1px solid var(--line); background: var(--paper-2); } .footer-row { display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; align-items: flex-start; } .footer-brand { max-width: 340px; } .footer-brand .brand-lockup { margin-bottom: 14px; } .footer-brand p { font: 400 13.5px/1.6 var(--f-body); color: var(--ink-500); margin: 0; } .footer-cols { display: flex; gap: 56px; flex-wrap: wrap; } .footer-col h4 { font: 600 11px var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); margin: 0 0 14px; } .footer-col a, .footer-col span { display: block; font: 400 14px/1.4 var(--f-body); color: var(--ink-700); text-decoration: none; margin-bottom: 11px; } .footer-col a:hover { color: var(--ink-900); text-decoration: underline; text-underline-offset: 2px; } .footer-base { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); font: 400 12.5px var(--f-body); color: var(--ink-500); } .footer-base .disc { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.02em; } /* ---- CivAI: rustige credit-regel onderaan (geen tweede footer) ------------- */ .footer-fineprint { display: flex; flex-direction: column; gap: 6px; max-width: 78ch; } .civai-credit { font: 400 11.5px/1.5 var(--f-body); color: var(--ink-400); } .civai-credit a { color: var(--ink-500); font-weight: 600; text-decoration: none; } .civai-credit a:hover { color: var(--ink-900); text-decoration: underline; text-underline-offset: 2px; } .civai-credit .mono { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.01em; } /* ============================================================================ REVEAL animation (calm, fail-safe) Base state is VISIBLE. The .in class (added by JS) plays a one-shot rise. No-JS / reduced-motion / any compositing quirk → content stays visible. ============================================================================ */ @media (prefers-reduced-motion: no-preference) { .reveal.in { animation: lp-rise 600ms var(--ease, ease) both; } } @keyframes lp-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }