/* ═══════════════════════════════════════════════════════════════════════════ Kir Royale – themes.css Zes thema's via [data-theme="…"] op het element. Elke thema definieert ook --nav-bg / --nav-text voor de horizontale navigatie. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Terra (warm zandbeige – nieuw) ─────────────────────────────────────── */ [data-theme="terra"] { --font-family: 'Georgia', 'Palatino Linotype', serif; --bg-primary: #e8ddd0; /* warm zandbeige */ --bg-secondary: #f0e8dc; /* iets lichter zand */ --text-primary: #2e1f0e; /* donker espresso */ --text-secondary: #7a5c3e; /* medium bruin */ --accent: #b5451b; /* terracotta */ --accent-hover: #963a17; --accent-text: #ffffff; --accent-light: #f5ddd3; /* bleke terracotta */ --accent-glow: rgba(181, 69, 27, 0.2); --border: #c8b49a; /* zacht beige rand */ --shadow: 0 2px 8px rgba(46, 31, 14, 0.12); --card-bg: #f5ede2; /* crème */ --card-shadow: 0 1px 4px rgba(46, 31, 14, 0.1); --card-shadow-hover: 0 8px 24px rgba(181, 69, 27, 0.2); --footer-bg: #2e1f0e; --footer-text: #c8b49a; --hero-bg: linear-gradient(135deg, #b5451b 0%, #7a2e0a 100%); --hero-text: #fff5ee; /* Horizontale nav */ --nav-bg: #2e1f0e; --nav-border: #4a3020; --nav-text: #d4b896; --nav-hover-bg: #b5451b; --nav-hover-text: #ffffff; /* Header fallback-kleur */ --header-overlay: linear-gradient(135deg, #2e1f0e 0%, #7a3515 100%); } /* ── Modern (standaard) ─────────────────────────────────────────────────── */ [data-theme="modern"] { --font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; --bg-primary: #f0f2f5; --bg-secondary: #ffffff; --text-primary: #1a1a2e; --text-secondary: #6c757d; --accent: #2563eb; --accent-hover: #1d4ed8; --accent-text: #ffffff; --accent-light: #eff6ff; --accent-glow: rgba(37, 99, 235, 0.18); --border: #dee2e6; --shadow: 0 2px 8px rgba(0,0,0,0.08); --card-bg: #ffffff; --card-shadow: 0 1px 4px rgba(0,0,0,0.08); --card-shadow-hover: 0 8px 24px rgba(37,99,235,0.14); --footer-bg: #1a1a2e; --footer-text: #9ca3af; --hero-bg: linear-gradient(135deg, #2563eb 0%, #1e40af 100%); --hero-text: #ffffff; /* Horizontale nav */ --nav-bg: #1a1a2e; --nav-border: #2d2d4a; --nav-text: #d1d5db; --nav-hover-bg: #2563eb; --nav-hover-text: #ffffff; /* Header overlay kleur (fallback zonder afbeelding) */ --header-overlay: linear-gradient(135deg, #1a1a2e 0%, #2563eb 100%); } /* ── Dark (paars) ────────────────────────────────────────────────────────── */ [data-theme="dark"] { --font-family: 'Segoe UI', system-ui, sans-serif; --bg-primary: #0d0d1a; --bg-secondary: #16162a; --text-primary: #e2e2f0; --text-secondary: #8888aa; --accent: #7c3aed; --accent-hover: #6d28d9; --accent-text: #ffffff; --accent-light: #1e1040; --accent-glow: rgba(124, 58, 237, 0.28); --border: #2a2a48; --shadow: 0 2px 12px rgba(0,0,0,0.5); --card-bg: #111128; --card-shadow: 0 2px 8px rgba(0,0,0,0.4); --card-shadow-hover: 0 8px 28px rgba(124,58,237,0.35); --footer-bg: #07071a; --footer-text: #6666aa; --hero-bg: linear-gradient(135deg, #3b1fa0 0%, #1a0a5c 100%); --hero-text: #e2e2f0; --nav-bg: #07071a; --nav-border: #1a1a38; --nav-text: #b0b0d0; --nav-hover-bg: #7c3aed; --nav-hover-text: #ffffff; --header-overlay: linear-gradient(135deg, #0d0d1a 0%, #3b1fa0 100%); } /* ── Nacht (charcoal + cyaan – nieuw donker thema) ───────────────────────── */ [data-theme="nacht"] { --font-family: 'Segoe UI', system-ui, sans-serif; --bg-primary: #121212; --bg-secondary: #1e1e1e; --text-primary: #e8e8e8; --text-secondary: #9e9e9e; --accent: #00b4d8; --accent-hover: #0096c7; --accent-text: #000000; --accent-light: #002f3d; --accent-glow: rgba(0, 180, 216, 0.22); --border: #2e2e2e; --shadow: 0 2px 12px rgba(0,0,0,0.6); --card-bg: #1a1a1a; --card-shadow: 0 2px 8px rgba(0,0,0,0.5); --card-shadow-hover: 0 8px 28px rgba(0,180,216,0.25); --footer-bg: #000000; --footer-text: #555555; --hero-bg: linear-gradient(135deg, #003547 0%, #001f2e 100%); --hero-text: #e8e8e8; --nav-bg: #0a0a0a; --nav-border: #222222; --nav-text: #bbbbbb; --nav-hover-bg: #00b4d8; --nav-hover-text: #000000; --header-overlay: linear-gradient(135deg, #0a0a0a 0%, #003547 100%); } /* ── Pink ────────────────────────────────────────────────────────────────── */ [data-theme="pink"] { --font-family: 'Georgia', 'Palatino Linotype', serif; --bg-primary: #fff0f5; --bg-secondary: #fff7fa; --text-primary: #3d1026; --text-secondary: #9b5a75; --accent: #d6006f; --accent-hover: #b0005a; --accent-text: #ffffff; --accent-light: #ffe0ef; --accent-glow: rgba(214, 0, 111, 0.2); --border: #f4c0d8; --shadow: 0 2px 8px rgba(214,0,111,0.12); --card-bg: #ffffff; --card-shadow: 0 1px 4px rgba(214,0,111,0.1); --card-shadow-hover: 0 8px 24px rgba(214,0,111,0.22); --footer-bg: #3d1026; --footer-text: #f4c0d8; --hero-bg: linear-gradient(135deg, #ff4fa3 0%, #d6006f 100%); --hero-text: #ffffff; --nav-bg: #3d1026; --nav-border: #6d1a42; --nav-text: #f9c0d8; --nav-hover-bg: #d6006f; --nav-hover-text: #ffffff; --header-overlay: linear-gradient(135deg, #3d1026 0%, #d6006f 100%); } /* ── Royale (donkerrood, paars, wit) ─────────────────────────────────────── */ [data-theme="royale"] { --font-family: 'Georgia', 'Palatino Linotype', serif; --bg-primary: #1a0a1e; /* diep donkerpaars */ --bg-secondary: #230d28; /* iets lichter paars */ --text-primary: #f5f0ff; /* gebroken wit */ --text-secondary: #c9a8d8; /* licht lavendel */ --accent: #8b1a1a; /* donkerrood */ --accent-hover: #a82020; /* iets helderder rood bij hover */ --accent-text: #ffffff; --accent-light: #3d0a1a; /* donkerrood tint */ --accent-glow: rgba(139, 26, 26, 0.35); --border: #4a1a5e; /* paarse rand */ --shadow: 0 2px 10px rgba(0,0,0,0.5); --card-bg: #2a0e32; /* donkerpaars kaart */ --card-shadow: 0 2px 8px rgba(0,0,0,0.4); --card-shadow-hover: 0 8px 28px rgba(139,26,26,0.4); --footer-bg: #0d0510; --footer-text: #9a6ab0; --hero-bg: linear-gradient(135deg, #6b1a6b 0%, #8b1a1a 100%); --hero-text: #ffffff; /* Horizontale nav */ --nav-bg: #0d0510; --nav-border: #3a0a48; --nav-text: #d4a8e8; --nav-hover-bg: #8b1a1a; --nav-hover-text: #ffffff; /* Header fallback-kleur */ --header-overlay: linear-gradient(135deg, #1a0a1e 0%, #6b1a1a 100%); } /* ── Cloudy ──────────────────────────────────────────────────────────────── */ [data-theme="cloudy"] { --font-family: 'Palatino Linotype', 'Book Antiqua', 'Garamond', serif; --bg-primary: #e8eef6; --bg-secondary: #f4f8fc; --text-primary: #213a52; --text-secondary: #5d7a96; --accent: #3a7bd5; --accent-hover: #2d65b8; --accent-text: #ffffff; --accent-light: #d4e8f8; --accent-glow: rgba(58, 123, 213, 0.2); --border: #b8d0e8; --shadow: 0 2px 10px rgba(58,123,213,0.12); --card-bg: rgba(255,255,255,0.85); --card-shadow: 0 2px 8px rgba(58,123,213,0.1); --card-shadow-hover: 0 8px 24px rgba(58,123,213,0.22); --footer-bg: #3a6080; --footer-text: #c8dff0; --hero-bg: linear-gradient(135deg, #7ec8e3 0%, #3a7bd5 100%); --hero-text: #ffffff; --nav-bg: #3a6080; --nav-border: #4a90c8; --nav-text: #d8eef8; --nav-hover-bg: #3a7bd5; --nav-hover-text: #ffffff; --header-overlay: linear-gradient(135deg, #3a6080 0%, #7ec8e3 100%); }