/** * AdFinder Theme System (CSS Variables) * * Theme names: * - aurora: Current production theme (light, blue/pink highlights) * - onyx-red: Premium theme (dark, black/red accents) * * Switching: * - Set `data-theme` on the element (see `templates/base.html`). * - Example: */ :root { /* Typography scale */ --font-h1: 1.6rem; /* ~25.6px */ --font-h2: 1.35rem; /* ~21.6px */ --font-h3: 1.15rem; /* ~18.4px */ --font-body: 1rem; /* 16px */ --font-helper: 0.95rem; /* ~15.2px */ --font-meta: 0.875rem; /* 14px */ /* Line heights */ --lh-tight: 1.3; --lh-normal: 1.55; --lh-loose: 1.65; /* Navigation controls (hamburger + mode switch) */ --nav-control-border-radius: var(--bs-navbar-toggler-border-radius, var(--bs-border-radius, 0.375rem)); --nav-control-border-width: var(--bs-border-width, 1px); --nav-control-border-color: var(--bs-navbar-toggler-border-color, var(--bs-border-color, #e3e8ef)); } /* ========================= Default Theme: aurora ========================= */ :root, html[data-theme="aurora"] { /* Theme identity */ --theme-name: aurora; --theme-color: var(--brand-orange); /* Layout */ --navbar-height: 52px; --bottom-nav-height: 60px; /* Brand (used for glows/gradients) */ --brand-primary: var(--brand-orange); --brand-primary-strong: var(--brand-orange-dark); --brand-primary-deep: var(--brand-orange-dark); --brand-accent: #f15bb5; --brand-amber: #ffb347; --brand-orange: #E36A1F; --brand-orange-dark: #C45718; --brand-orange-light: #FDF3EC; /* RGB helpers (space-separated for rgba(var(--x), a)) */ --brand-primary-rgb: 227 106 31; --brand-accent-rgb: 241 91 181; --surface-rgb: 255 255 255; --surface-muted-rgb: 245 247 251; /* Neutrals */ --ink: #0f172a; --muted: #5b6478; --surface: #ffffff; --surface-muted: #f5f7fb; --border-subtle: #e3e8ef; /* Legacy Color Aliases (for backwards compatibility) */ --primary: var(--brand-orange); --primary-light: var(--brand-orange-dark); --secondary: #3f37c9; --accent: #f72585; --light: #f8f9fa; --dark: #212529; --gray: #6c757d; --gray-light: #e9ecef; --success: #4cc9f0; --danger: #dc3545; --danger-hover: #c82333; --warning: #ffc107; --info: #17a2b8; /* Shadows */ --shadow-strong: 0 18px 60px rgba(34, 40, 62, 0.12); --shadow-soft: 0 8px 30px rgba(37, 44, 74, 0.08); --shadow-nav: 0 2px 10px rgba(15, 23, 42, 0.10); --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Design system */ --border-radius: 8px; --transition: all 0.3s ease; /* Global page background layers */ --page-bg: radial-gradient(120% 120% at 15% 20%, rgba(var(--brand-primary-rgb), 0.12), transparent 35%), radial-gradient(90% 90% at 85% 15%, rgba(var(--brand-accent-rgb), 0.12), transparent 35%), linear-gradient(180deg, #f8f9fe 0%, #eef2ff 100%); --page-gradient-bg: radial-gradient(40% 40% at 10% 10%, rgba(var(--brand-primary-rgb), 0.12), transparent 55%), radial-gradient(32% 32% at 90% 12%, rgba(var(--brand-accent-rgb), 0.08), transparent 60%); /* Footer (footer background is intentionally dark across themes) */ --footer-divider: rgba(255, 255, 255, 0.08); /* Bootstrap 5.3 variable mappings (affects built-in components) */ --bs-body-bg: var(--surface-muted); --bs-body-color: var(--ink); --bs-border-color: var(--border-subtle); --bs-primary: var(--primary); --bs-link-color: var(--primary); --bs-link-hover-color: var(--primary-light); } /* ========================= Premium Theme: onyx-red ========================= */ html[data-theme="onyx-red"] { color-scheme: dark; --theme-name: onyx-red; --theme-color: #0b1220; /* Brand */ --brand-primary: #ef4444; --brand-primary-strong: #dc2626; --brand-primary-deep: #7f1d1d; --brand-accent: #f43f5e; --brand-amber: #f59e0b; --brand-primary-rgb: 239 68 68; --brand-accent-rgb: 244 63 94; --surface-rgb: 17 24 39; /* #111827 */ --surface-muted-rgb: 11 18 32; /* #0b1220 */ /* Neutrals */ --ink: #e5e7eb; --muted: #9aa6b2; --surface: #111827; --surface-muted: #0b1220; --border-subtle: #243047; /* Legacy aliases */ --primary: #ef4444; --primary-light: #f87171; --secondary: #fb7185; --accent: #f43f5e; --light: #0b1220; --dark: #e5e7eb; --gray: #94a3b8; --gray-light: #243047; --success: #22c55e; --danger: #ef4444; --danger-hover: #dc2626; --warning: #f59e0b; --info: #38bdf8; /* Shadows (stronger for dark UI) */ --shadow-strong: 0 18px 60px rgba(0, 0, 0, 0.55); --shadow-soft: 0 10px 34px rgba(0, 0, 0, 0.35); --shadow-nav: 0 2px 14px rgba(0, 0, 0, 0.55); --box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); /* Global backgrounds */ --page-bg: radial-gradient(120% 120% at 18% 18%, rgba(var(--brand-primary-rgb), 0.20), transparent 40%), radial-gradient(90% 90% at 82% 14%, rgba(var(--brand-accent-rgb), 0.14), transparent 45%), linear-gradient(180deg, #0b1220 0%, #060b14 100%); --page-gradient-bg: radial-gradient(40% 40% at 10% 10%, rgba(var(--brand-primary-rgb), 0.18), transparent 60%), radial-gradient(32% 32% at 90% 12%, rgba(var(--brand-accent-rgb), 0.10), transparent 62%); --footer-divider: rgba(255, 255, 255, 0.10); /* Bootstrap mappings */ --bs-body-bg: var(--surface-muted); --bs-body-color: var(--ink); --bs-border-color: var(--border-subtle); --bs-primary: var(--primary); --bs-link-color: var(--primary-light); --bs-link-hover-color: var(--primary); }