/* ═══════════════════════════════════════════════════════════ LICHT THEMA — Kadasterportaal.nl Actief als: ═══════════════════════════════════════════════════════════ */ /* ── Globaal: voorkom horizontaal scrollen op mobiel ─────── */ /* overflow-x: clip ipv hidden — clip breekt geen position:fixed modals */ html { overflow-x: clip; } body { max-width: 100%; overflow-x: clip; } /* Vloeiende overgangen bij switchen */ main > section:first-child, main > section:first-child h1, main > section:first-child h2, main > section:first-child p, #kp-footer, #kp-footer * { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease; } /* ══════════════════════════════════════════════════════════ HERO — ALGEMEEN ══════════════════════════════════════════════════════════ */ html[data-theme="light"] main > section:first-child { background-color: #f8fafc !important; color: #0f172a !important; } /* Titels */ html[data-theme="light"] main > section:first-child h1, html[data-theme="light"] main > section:first-child h2 { color: #0f172a !important; } /* Gekleurde accent-spans in titels (blue-400 → blauw-700, orange-400 → oranje-700) */ html[data-theme="light"] main > section:first-child h1 .text-blue-400, html[data-theme="light"] main > section:first-child h2 .text-blue-400 { color: #1d4ed8 !important; } html[data-theme="light"] main > section:first-child h1 .text-orange-400, html[data-theme="light"] main > section:first-child h2 .text-orange-400 { color: #c2410c !important; } /* Subtiteltekst — meest voorkomend probleem: te licht op lichte achtergrond */ html[data-theme="light"] main > section:first-child p, html[data-theme="light"] main > section:first-child .text-slate-300, html[data-theme="light"] main > section:first-child .text-slate-400 { color: #374151 !important; } /* text-blue-100 subtitels (zoals op homepagina) → donkergrijs, niet blauw */ html[data-theme="light"] main > section:first-child p.text-blue-100 { color: #334155 !important; } /* Lichtblauwe / lichtoranje tekst (badges, links) */ html[data-theme="light"] main > section:first-child .text-blue-100, html[data-theme="light"] main > section:first-child .text-blue-200, html[data-theme="light"] main > section:first-child .text-blue-300 { color: #1d4ed8 !important; } html[data-theme="light"] main > section:first-child .text-orange-100, html[data-theme="light"] main > section:first-child .text-orange-200, html[data-theme="light"] main > section:first-child .text-orange-300 { color: #c2410c !important; } /* Iconen in hero (check-circle, clock, calendar, user...) */ html[data-theme="light"] main > section:first-child .text-blue-400 { color: #2563eb !important; } html[data-theme="light"] main > section:first-child .text-orange-400 { color: #ea580c !important; } html[data-theme="light"] main > section:first-child .text-green-400 { color: #16a34a !important; } /* Achtergrondafbeelding iets zichtbaarder in licht thema */ html[data-theme="light"] main > section:first-child img { opacity: 0.88 !important; } /* ── WOZ-BEZWAAR BLOK — blauw gradient kaartje binnen section:first-child ── */ /* Specifiekere regel (#woz-bezwaar ID) wint van de algemene section:first-child p regel */ html[data-theme="light"] main > section:first-child #woz-bezwaar p, html[data-theme="light"] main > section:first-child #woz-bezwaar .text-white { color: #ffffff !important; } html[data-theme="light"] main > section:first-child #woz-bezwaar [style*="rgba(255,255,255"] { color: rgba(255,255,255,0.85) !important; } html[data-theme="light"] main > section:first-child #woz-bezwaar .text-blue-300 { color: #93c5fd !important; } /* ── BREADCRUMBS (kennisbank-artikel hero's) ──────────────── */ html[data-theme="light"] main > section:first-child nav.flex a { color: #475569 !important; } html[data-theme="light"] main > section:first-child nav.flex a:hover { color: #0f172a !important; } html[data-theme="light"] main > section:first-child nav.flex span.text-slate-300 { color: #0f172a !important; } html[data-theme="light"] main > section:first-child nav.flex .text-slate-400 { color: #9ca3af !important; } /* ── METADATA REGEL (leestijd, datum, auteur) ─────────────── */ html[data-theme="light"] main > section:first-child .flex.flex-wrap.items-center.gap-5 span { color: #374151 !important; } /* ── BADGE CHIPS — alle kleurvarianten ───────────────────── */ /* Blauw */ html[data-theme="light"] main > section:first-child .bg-blue-500\/20 { background-color: rgba(37,99,235,0.12) !important; border-color: rgba(37,99,235,0.35) !important; } html[data-theme="light"] main > section:first-child .text-blue-200, html[data-theme="light"] main > section:first-child .text-blue-300 { color: #1d4ed8 !important; } /* Oranje / brand */ html[data-theme="light"] main > section:first-child .bg-orange-500\/20, html[data-theme="light"] main > section:first-child [style*="#f97316"] { background-color: rgba(234,88,12,0.12) !important; border-color: rgba(234,88,12,0.35) !important; } html[data-theme="light"] main > section:first-child .text-orange-200, html[data-theme="light"] main > section:first-child .text-orange-300 { color: #9a3412 !important; } /* Emerald / groen */ html[data-theme="light"] main > section:first-child .bg-emerald-500\/20 { background-color: rgba(16,185,129,0.14) !important; border-color: rgba(16,185,129,0.4) !important; } html[data-theme="light"] main > section:first-child .text-emerald-200, html[data-theme="light"] main > section:first-child .text-emerald-300, html[data-theme="light"] main > section:first-child .text-emerald-400 { color: #065f46 !important; } /* Indigo / paars */ html[data-theme="light"] main > section:first-child .bg-indigo-500\/20, html[data-theme="light"] main > section:first-child .bg-purple-500\/20 { background-color: rgba(99,102,241,0.12) !important; border-color: rgba(99,102,241,0.35) !important; } html[data-theme="light"] main > section:first-child .text-indigo-200, html[data-theme="light"] main > section:first-child .text-indigo-300, html[data-theme="light"] main > section:first-child .text-purple-200, html[data-theme="light"] main > section:first-child .text-purple-300 { color: #4338ca !important; } /* ── GHOST KNOPPEN (bg-white/10, bg-white/20) ─────────────── */ html[data-theme="light"] main > section:first-child .bg-white\/10, html[data-theme="light"] main > section:first-child [class*="bg-white/10"] { background-color: rgba(15,23,42,0.07) !important; border-color: rgba(15,23,42,0.25) !important; color: #0f172a !important; } html[data-theme="light"] main > section:first-child .bg-white\/10:hover, html[data-theme="light"] main > section:first-child .bg-white\/20, html[data-theme="light"] main > section:first-child [class*="bg-white/20"] { background-color: rgba(15,23,42,0.12) !important; color: #0f172a !important; } /* hover:text-white links in hero (b.v. breadcrumb) */ html[data-theme="light"] main > section:first-child a:hover { color: #0f172a !important; } /* ── NAV DISCLAIMER BALK (altijd donker, ook in licht thema) ── */ html[data-theme="light"] #kp-sticky-nav > div:first-child { background-color: #1e3a8a !important; border-bottom-color: #1e40af !important; } /* ══════════════════════════════════════════════════════════ FOOTER ══════════════════════════════════════════════════════════ */ html[data-theme="light"] #kp-footer { background-color: #f1f5f9 !important; color: #64748b !important; border-top-color: #e2e8f0 !important; } html[data-theme="light"] #kp-footer .text-white { color: #0f172a !important; } html[data-theme="light"] #kp-footer .text-slate-400 { color: #64748b !important; } html[data-theme="light"] #kp-footer .text-slate-500 { color: #475569 !important; } html[data-theme="light"] #kp-footer .text-slate-300 { color: #374151 !important; } html[data-theme="light"] #kp-footer .bg-slate-800 { background-color: #dde3ed !important; border-color: #cbd5e1 !important; } html[data-theme="light"] #kp-footer .border-slate-800 { border-color: #e2e8f0 !important; } html[data-theme="light"] #kp-footer .border-t { border-top-color: #e2e8f0 !important; } html[data-theme="light"] #kp-footer .bg-slate-800\/50 { background-color: rgba(226,232,240,0.6) !important; } html[data-theme="light"] #kp-footer .border-slate-700\/50 { border-color: rgba(148,163,184,0.5) !important; } html[data-theme="light"] #kp-footer strong.text-slate-300 { color: #1e293b !important; } html[data-theme="light"] #kp-footer a:hover { color: #0f172a !important; } /* ══════════════════════════════════════════════════════════ GRADIENT HERO'S MET DONKERE ACHTERGROND (kp-dark-hero) Bijv. ai-keuzehulp.html — houdt gradient + witte tekst ook in licht thema, overschrijft de section:first-child regels. ══════════════════════════════════════════════════════════ */ html[data-theme="light"] main > section.kp-dark-hero { background-color: transparent !important; color: #ffffff !important; } html[data-theme="light"] main > section.kp-dark-hero h1 { color: #ffffff !important; } html[data-theme="light"] main > section.kp-dark-hero h2 { color: #ffffff !important; } html[data-theme="light"] main > section.kp-dark-hero p, html[data-theme="light"] main > section.kp-dark-hero .text-indigo-200 { color: #c7d2fe !important; } html[data-theme="light"] main > section.kp-dark-hero .bg-white\/10, html[data-theme="light"] main > section.kp-dark-hero [class*="bg-white/10"] { background-color: rgba(255,255,255,0.10) !important; border-color: rgba(255,255,255,0.20) !important; color: #ffffff !important; } /* ══════════════════════════════════════════════════════════ GROENE GRADIENT HERO'S (kp-green-hero) ISDE subsidie pagina's — donkergroene achtergrond, witte titels en lichtgroene subtiteltekst ook in licht thema. ══════════════════════════════════════════════════════════ */ html[data-theme="light"] main > section.kp-green-hero { background-color: transparent !important; color: #ffffff !important; } html[data-theme="light"] main > section.kp-green-hero h1, html[data-theme="light"] main > section.kp-green-hero h2 { color: #ffffff !important; } html[data-theme="light"] main > section.kp-green-hero p { color: #dcfce7 !important; } html[data-theme="light"] main > section.kp-green-hero .text-green-100, html[data-theme="light"] main > section.kp-green-hero .text-green-200, html[data-theme="light"] main > section.kp-green-hero .text-green-300 { color: #dcfce7 !important; } html[data-theme="light"] main > section.kp-green-hero .text-green-400 { color: #4ade80 !important; } html[data-theme="light"] main > section.kp-green-hero .bg-white\/10, html[data-theme="light"] main > section.kp-green-hero [class*="bg-white/10"] { background-color: rgba(255,255,255,0.10) !important; border-color: rgba(255,255,255,0.20) !important; color: #ffffff !important; } html[data-theme="light"] main > section.kp-green-hero [class*="bg-green-800"], html[data-theme="light"] main > section.kp-green-hero [class*="bg-green-900"] { background-color: rgba(20,83,45,0.55) !important; border-color: rgba(74,222,128,0.25) !important; } /* ══════════════════════════════════════════════════════════ SPLIT-SCREEN HERO AFBEELDINGSKOLOM (eigendomsinformatie.html, zakelijk.html) De rechter beeldkolom blijft altijd donker — ook in licht thema. ══════════════════════════════════════════════════════════ */ html[data-theme="light"] main > section:first-child .hero-img-col { background-color: #0f172a !important; } /* Afbeelding in de beeldkolom: iets zichtbaarder in licht thema */ html[data-theme="light"] main > section:first-child .hero-img-col img { opacity: 0.45 !important; }