/* ============================================================ VAN PARDO AIRCONDITIONING & KOELTECHNIEK — design tokens NEO Agency · gratis redesign homepage · september 2026 Basis: licht met donkere navy ankersecties Merkkleur uit logo: #000088 (uitgelezen uit het logobestand) Alle contrastwaarden hieronder zijn narekend (WCAG 2.1 AA). ============================================================ */ :root { /* ---- Merk ---- */ --vp-brand: #000088; /* logoblauw — koppen op licht (15.5:1 op wit) */ --vp-brand-deep: #00005C; /* diepere variant voor grote vlakken */ /* ---- Lichte basis ---- */ --vp-white: #FFFFFF; --vp-ice-50: #F6F9FD; /* paginabasis */ --vp-ice-100: #EEF3FB; /* sectiewissel, kaartvulling */ --vp-ice-200: #DCE6F5; /* randen, dividers */ /* ---- Donkere ankersecties ---- */ --vp-navy-900: #060A1C; /* ankerbasis */ --vp-navy-800: #0E1430; /* kaart op anker */ --vp-navy-700: #1B2340; /* rand op anker */ /* ---- Tekst ---- */ --vp-text: #1B2340; /* body op licht — 13.9:1 op ice-100 */ --vp-text-muted: #3A4568; /* secundair op licht — 8.5:1 op ice-100 */ --vp-text-invert: #FFFFFF; /* op navy — 19.7:1 */ --vp-text-invert-mut: #C3CBE6; /* secundair op navy — 12.2:1 */ /* ---- Accenten (max 3, conform NEO Deel 2) ---- */ --vp-action: #1B35D6; /* CTA op licht, wit label 8.3:1 */ --vp-action-hover: #2440E8; /* hover brightens, wit label 7.1:1 */ --vp-action-dark: #3358FF; /* CTA op navy: wit label 5.3:1, rand 3.7:1 */ --vp-ice: #7FE3FF; /* accentlijn/koude gloed op navy — 13.4:1 */ --vp-alert: #E4572E; /* uitsluitend storingsdienst/24-uurs */ /* ---- Typografie ---- Grotesk met bold caps + italic subregel, gekozen omdat het logo precies die combinatie is (bold caps woordmerk + italic tagline). */ --vp-font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif; --vp-font-body: 'Inter', system-ui, -apple-system, sans-serif; --vp-font-mono: 'IBM Plex Mono', ui-monospace, monospace; /* eyebrows */ /* Fontschaal — ondergrens van elke clamp past op 375px */ --fs-eyebrow: clamp(0.75rem, 0.72rem + 0.15vw, 0.875rem); /* mono, uppercase, +1 maat t.o.v. NEO-site */ --fs-body: clamp(1rem, 0.97rem + 0.15vw, 1.125rem); /* nooit onder 16px */ --fs-lead: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem); --fs-h4: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem); --fs-h3: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem); --fs-h2: clamp(1.75rem, 1.4rem + 1.6vw, 3rem); --fs-h1: clamp(2.25rem, 1.6rem + 2.8vw, 4.5rem); --lh-tight: 1.05; --lh-heading: 1.15; --lh-body: 1.6; /* ≥ 1.5 conform mobiele standaard */ /* ---- Ruimte — 8px-grid, geen tussenwaarden ---- */ --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px; --sp-5: 40px; --sp-6: 48px; --sp-8: 64px; --sp-10: 80px; --sp-12: 96px; --sp-16: 128px; --gutter: clamp(20px, 5vw, 64px); /* ≥ 16px, hier bewust 20px ondergrens */ --section-y: clamp(80px, 9vw, 144px); /* ≥ 80px tussen secties */ --maxw: 1280px; --maxw-text: 68ch; /* ---- Vorm ---- Bewust terughoudend: 8-12px op kaarten en knoppen (NEO detail-design), géén pill-vormen en géén ronde hoeken op full-bleed vlakken. */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --border-light: 1px solid var(--vp-ice-200); --border-dark: 1px solid var(--vp-navy-700); /* ---- Schaduw — koel getint, nooit zwart-grijs ---- */ --shadow-card: 0 2px 12px rgba(6, 10, 28, 0.06); --shadow-hover: 0 8px 28px rgba(6, 10, 28, 0.12); --glow-ice: 0 0 40px rgba(127, 227, 255, 0.28); /* alleen op navy */ /* ---- Motion — subtiel (intakewens) ---- */ --dur-fast: 200ms; --dur-base: 300ms; --dur-slow: 500ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* ---- Toegevoegd in feedbackronde 1 (16-09-2026) ---- Eén kleurtaal voor de primaire CTA en de display-accenten: zelfde gradient, zelfde richting (135deg), binnen de blauwfamilie. */ /* Accentfamilie = het ijsblauw van de navy-accentregels, op licht een paar tinten dieper voor het contrast. */ --vp-cyan-light: #1C97D3; /* ijsblauw op licht: lichtste stop van tekst én knop, 3.27:1 op wit */ --vp-cyan: #1683BC; /* donkerste stop van tekst én knop; navy label 4.69:1 */ --vp-cyan-deep: #1478B0; /* tekstlinks en tekst < 22 px op wit: 4.84:1 */ --vp-cyan-tint: #E8F4FC; /* hover-vulling van outline-knoppen op licht */ --shadow-ice-glow: 0 0 24px rgba(127, 227, 255, 0.28); /* koude gloed op ijsblauwe elementen */ --frost: inset 0 1px 0 rgba(255, 255, 255, 0.35); /* frost-highlight aan de bovenrand van knoppen */ --vp-grad-action: radial-gradient(70% 90% at 100% 0%, rgba(127, 227, 255, 0.34) 0%, rgba(127, 227, 255, 0) 60%), linear-gradient(135deg, #1B2A55 0%, #060A1C 100%); /* primaire knop op licht: dezelfde navy tegel met ijsgloed, wit label, ijsblauwe pijl */ --vp-grad-ice: linear-gradient(135deg, #7FE3FF 0%, #5FD0F5 100%); /* knop op navy: begint in exact het ijsblauw van de accentregels */ --vp-grad-text: radial-gradient(70% 90% at 100% 0%, rgba(127, 227, 255, 0.42) 0%, rgba(127, 227, 255, 0) 60%), linear-gradient(135deg, #1B2A55 0%, #060A1C 100%); /* accent-subtitels op licht: de navy ankertegel mét de ijsgloed rechtsboven (NEO) */ --shadow-cta-hover: 0 6px 18px rgba(0, 0, 40, 0.22); --shadow-card-2: 0 2px 12px rgba(0, 0, 40, 0.08); --shadow-card-2-hover: 0 12px 32px rgba(0, 0, 40, 0.16); --dur-sheen: 900ms; /* ---- Layout-hulpwaarden ---- */ --header-height: 72px; /* mobiel 64px, zie §anchor-navigatie */ --touch-min: 44px; /* primaire CTA 48px */ } html { scroll-padding-top: var(--header-height); scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } @media (max-width: 767px) { :root { --header-height: 64px; } } /* Verloop uitsluitend voor de koudelijn en de gloed op ankersecties — niet als kaartvulling, niet als achtergrond van hele secties. */ .vp-coldline { stroke: url(#vp-cold-gradient); } /* SVG-gradient: stop 0 #000088 → stop 0.6 #3358FF → stop 1 #7FE3FF */