/* ========================================================================= De Druppel — design tokens NEO Agency · versie 1.0 · 17-09-2026 Afgeleid van het logo (messing op navy) en de busbelettering. Zie 05-DESIGN.md voor de toelichting bij elke keuze. ========================================================================= */ :root { /* --------------------------------------------------------------------- KLEUR — basis De site staat op navy. Licht is de uitzondering, niet andersom. --------------------------------------------------------------------- */ --dd-navy-950: #071A28; /* diepste vlak, footer, overlays */ --dd-navy-900: #0B2437; /* paginabasis */ --dd-navy-800: #10334B; /* secties die iets moeten opkomen */ --dd-navy-700: #17415E; /* kaarten op donker, randen */ --dd-blue-600: #1F5C7D; /* het blauw van de huidige site, ontzadigd */ --dd-blue-500: #2E7FA8; /* links op donker, actieve staten */ /* KLEUR — accent (messing / goud uit het logo) */ --dd-brass-700: #8A6A24; /* goud op lichte vlakken (contrast) */ --dd-brass-600: #A3812F; --dd-brass-500: #C9A24B; /* hoofdaccent */ --dd-brass-400: #DDBB72; /* hover, fijne lijnen */ --dd-brass-100: rgba(201, 162, 75, 0.14); /* KLEUR — licht (warm off-white, voor de doorbrekende secties) */ --dd-bone-50: #F8F6F1; --dd-bone-100: #EFEBE3; --dd-bone-200: #E2DCD1; /* KLEUR — signaal Spoedoranje heeft precies één betekenis: bel nu. Nergens anders. */ --dd-signal-600: #C25E12; --dd-signal-500: #E2711D; --dd-signal-400: #F08A3C; /* KLEUR — WhatsApp merkgroen. Niet meer in gebruik: de WhatsApp-iconen staan sinds feedbackronde 1 in messing (--dd-accent), zodat ze bij de huisstijl passen. */ --dd-whatsapp: #25D366; /* KLEUR — tekst */ --dd-text-on-dark: #F4F7FA; --dd-text-on-dark-muted: rgba(244, 247, 250, 0.72); --dd-text-on-dark-faint: rgba(244, 247, 250, 0.52); --dd-text-on-light: #0E1E2B; --dd-text-on-light-muted: rgba(14, 30, 43, 0.68); /* KLEUR — status */ --dd-error: #D4453B; --dd-success: #2E8B57; /* KLEUR — oppervlakken en randen */ --dd-surface-dark: rgba(255, 255, 255, 0.04); --dd-surface-dark-hover: rgba(255, 255, 255, 0.07); --dd-border-dark: rgba(255, 255, 255, 0.10); --dd-border-dark-strong: rgba(201, 162, 75, 0.40); --dd-surface-light: #FFFFFF; --dd-border-light: rgba(11, 36, 55, 0.10); /* --------------------------------------------------------------------- TYPOGRAFIE Display = strakke grotesk. Body = Inter. Serif-italic uitsluitend als accent (slogan, uitgelicht citaat, hooguit één regel per scherm). --------------------------------------------------------------------- */ --dd-font-display: "Archivo", "Inter", system-ui, -apple-system, sans-serif; --dd-font-body: "Inter", system-ui, -apple-system, sans-serif; --dd-font-accent: "Instrument Serif", Georgia, serif; --dd-fw-regular: 400; --dd-fw-medium: 500; --dd-fw-semi: 600; --dd-fw-bold: 700; /* Schaal — clamp() tussen mobiel en desktop */ --dd-text-hero: clamp(2.375rem, 1.35rem + 4.6vw, 4rem); /* 38 → 64 */ --dd-text-h2: clamp(1.75rem, 1.15rem + 2.6vw, 2.75rem); /* 28 → 44 */ --dd-text-h3: clamp(1.375rem, 1.15rem + 0.95vw, 1.75rem);/* 22 → 28 */ --dd-text-h4: clamp(1.125rem, 1.02rem + 0.45vw, 1.3125rem); --dd-text-lead: clamp(1.0625rem, 0.99rem + 0.35vw, 1.1875rem); --dd-text-body: clamp(1rem, 0.96rem + 0.18vw, 1.125rem); /* 16 → 18 */ --dd-text-small: 0.9375rem; --dd-text-eyebrow: 0.8125rem; --dd-leading-tight: 1.08; --dd-leading-snug: 1.25; --dd-leading-body: 1.6; --dd-tracking-display: -0.022em; --dd-tracking-body: 0; --dd-tracking-eyebrow: 0.12em; --dd-measure: 68ch; /* maximale regellengte lopende tekst */ /* --------------------------------------------------------------------- RUIMTE — strikt 8px-grid --------------------------------------------------------------------- */ --dd-space-1: 0.25rem; /* 4 */ --dd-space-2: 0.5rem; /* 8 */ --dd-space-3: 0.75rem; /* 12 */ --dd-space-4: 1rem; /* 16 */ --dd-space-5: 1.5rem; /* 24 */ --dd-space-6: 2rem; /* 32 */ --dd-space-7: 2.5rem; /* 40 */ --dd-space-8: 3rem; /* 48 */ --dd-space-9: 4rem; /* 64 */ --dd-space-10: 5rem; /* 80 */ --dd-space-11: 6rem; /* 96 */ --dd-space-12: 7.5rem; /* 120 */ --dd-section-y: clamp(4.5rem, 2.5rem + 8vw, 7.5rem); /* 72 → 120 */ --dd-container: 75rem; /* 1200px */ --dd-gutter: 1.25rem; /* 20px, gelijk op alle breedtes */ /* --------------------------------------------------------------------- VORM --------------------------------------------------------------------- */ --dd-radius-sm: 0.5rem; /* 8 — chips, kleine labels */ --dd-radius-md: 0.625rem; /* 10 — knoppen, formuliervelden */ --dd-radius-lg: 0.875rem; /* 14 — kaarten */ --dd-radius-xl: 1.25rem; /* 20 — grote beeldblokken */ --dd-radius-full: 999px; --dd-border-hairline: 1px; /* --------------------------------------------------------------------- SCHADUW — zacht en laag; nooit harde donkere randen --------------------------------------------------------------------- */ --dd-shadow-sm: 0 1px 3px rgba(7, 26, 40, 0.10); --dd-shadow-md: 0 2px 12px rgba(7, 26, 40, 0.10); --dd-shadow-lg: 0 6px 20px rgba(7, 26, 40, 0.22); --dd-shadow-hero: 0 24px 60px rgba(7, 26, 40, 0.38); /* Klantpreview: vervaging van pagina's die nog niet vrijgegeven zijn */ --dd-preview-blur: 16px; /* --------------------------------------------------------------------- MOTION --------------------------------------------------------------------- */ --dd-ease-out: cubic-bezier(0.2, 0.7, 0.3, 1); --dd-ease-in-out: cubic-bezier(0.6, 0, 0.3, 1); --dd-ease-veer: cubic-bezier(0.34, 1.56, 0.64, 1); /* licht doorschietend, voor sterren en knopen */ --dd-dur-fast: 150ms; --dd-dur-base: 220ms; --dd-dur-slow: 400ms; --dd-dur-reveal: 500ms; --dd-dur-lang: 800ms; --dd-stagger: 60ms; /* --------------------------------------------------------------------- COMPONENTMATEN --------------------------------------------------------------------- */ --dd-btn-h: 3.25rem; /* 52 desktop */ --dd-btn-h-mobile: 3rem; /* 48 mobiel */ --dd-btn-px: 1.75rem; /* 28 */ --dd-field-h: 3.25rem; --dd-header-h: 4.5rem; /* 72 */ --dd-mobilebar-h: 3.5rem; /* 56 — sticky bel/WhatsApp-balk */ --dd-tap-min: 2.75rem; /* 44 — minimale raakoppervlakte */ /* Beeldverhoudingen — croppen, nooit vervormen */ --dd-ratio-card: 4 / 5; /* was 4/3 — 44 van 58 foto's zijn staand, zie 08-BESLISSINGEN.md #4 */ --dd-ratio-service: 3 / 2; --dd-ratio-wide: 16 / 9; /* --------------------------------------------------------------------- FOCUS — altijd zichtbaar, ook op donker --------------------------------------------------------------------- */ --dd-focus-ring: 2px solid var(--dd-brass-500); --dd-focus-offset: 2px; /* Lagen */ --dd-z-header: 100; --dd-z-mobilebar: 110; --dd-z-lightbox: 200; --dd-z-cookie: 300; } /* =========================================================================== Lichte secties — de één à twee blokken per pagina die de navy doorbreken. Zet ze om met
. =========================================================================== */ [data-theme="light"] { --dd-bg: var(--dd-bone-50); --dd-fg: var(--dd-text-on-light); --dd-fg-muted: var(--dd-text-on-light-muted); --dd-surface: var(--dd-surface-light); --dd-border: var(--dd-border-light); --dd-accent: var(--dd-brass-700); /* donkerder voor contrast op wit */ --dd-shadow-card: var(--dd-shadow-md); } [data-theme="dark"], :root { --dd-bg: var(--dd-navy-900); --dd-fg: var(--dd-text-on-dark); --dd-fg-muted: var(--dd-text-on-dark-muted); --dd-surface: var(--dd-surface-dark); --dd-border: var(--dd-border-dark); --dd-accent: var(--dd-brass-500); --dd-shadow-card: var(--dd-shadow-lg); } /* =========================================================================== Toegankelijkheid — alle beweging uit wanneer de bezoeker dat vraagt. =========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --dd-dur-fast: 0ms; --dd-dur-base: 0ms; --dd-dur-slow: 0ms; --dd-dur-reveal: 0ms; --dd-dur-lang: 0ms; --dd-stagger: 0ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }