/* * Vehicle Exchange — Frontend Themes * Apply theme class to tag via backend setting (frontend_theme). * Default theme variables are defined in style.css. */ /* ── Warm Theme (Orange / Gold) ─────────────────────────────────────────── */ body.theme-warm { --primary: #e85d04; --primary-h: #e85d04; --primary-dark: #c44c03; --accent: #f4a261; --accent-dark: #e76f51; --gradient: linear-gradient(135deg, #e85d04, #f4a261); --navy-dark: #2d1b00; --blue-mid: #7b3f00; --purple: #c44c03; } body.theme-warm .btn-gold, body.theme-warm .btn-gold:hover { background: linear-gradient(135deg, #e85d04, #f4a261); border-color: #e85d04; } body.theme-warm .site-navbar { background: linear-gradient(135deg, #2d1b00, #7b3f00) !important; } body.theme-warm .nav-link.active, body.theme-warm .nav-link:hover { color: #f4a261 !important; } body.theme-warm .hero-section { background: linear-gradient(135deg, #2d1b00 0%, #7b3f00 60%, #e85d04 100%) !important; } /* ── Dark Theme (Charcoal / Purple) ────────────────────────────────────── */ body.theme-dark { --primary: #9c59f0; --primary-h: #9c59f0; --primary-dark: #7c3fcc; --accent: #f0a500; --accent-dark: #c87e00; --gradient: linear-gradient(135deg, #9c59f0, #f0a500); --navy-dark: #0d0d0d; --blue-mid: #1a0a2e; --purple: #9c59f0; --bg-base: #121212; --bg-surface: #1e1e1e; --card-bg: #1e1e1e; --text-main: #e8e8e8; --text-muted: #888; --border-soft: rgba(255,255,255,.08); } body.theme-dark { background-color: #121212; color: #e8e8e8; } body.theme-dark .btn-gold, body.theme-dark .btn-gold:hover { background: linear-gradient(135deg, #9c59f0, #f0a500); border-color: #9c59f0; } body.theme-dark .site-navbar { background: linear-gradient(135deg, #0d0d0d, #1a0a2e) !important; } body.theme-dark .hero-section { background: linear-gradient(135deg, #0d0d0d 0%, #1a0a2e 60%, #9c59f0 100%) !important; } /* ── Forest Theme (Green / Emerald) ────────────────────────────────────── */ body.theme-forest { --primary: #2d6a4f; --primary-h: #2d6a4f; --primary-dark: #1b4332; --accent: #52b788; --accent-dark: #40916c; --gradient: linear-gradient(135deg, #2d6a4f, #52b788); --navy-dark: #081c15; --blue-mid: #1b4332; --purple: #40916c; } body.theme-forest .btn-gold, body.theme-forest .btn-gold:hover { background: linear-gradient(135deg, #2d6a4f, #52b788); border-color: #2d6a4f; color: #fff; } body.theme-forest .site-navbar { background: linear-gradient(135deg, #081c15, #1b4332) !important; } body.theme-forest .nav-link.active, body.theme-forest .nav-link:hover { color: #52b788 !important; } body.theme-forest .hero-section { background: linear-gradient(135deg, #081c15 0%, #1b4332 60%, #2d6a4f 100%) !important; } /* ── Ocean Theme (Cyan / Blue) ──────────────────────────────────────────── */ body.theme-ocean { --primary: #0096c7; --primary-h: #0096c7; --primary-dark: #0077b6; --accent: #00b4d8; --accent-dark: #0096c7; --gradient: linear-gradient(135deg, #0077b6, #00b4d8); --navy-dark: #03045e; --blue-mid: #023e8a; --purple: #0096c7; } body.theme-ocean .btn-gold, body.theme-ocean .btn-gold:hover { background: linear-gradient(135deg, #0077b6, #00b4d8); border-color: #0077b6; } body.theme-ocean .site-navbar { background: linear-gradient(135deg, #03045e, #023e8a) !important; } body.theme-ocean .nav-link.active, body.theme-ocean .nav-link:hover { color: #00b4d8 !important; } body.theme-ocean .hero-section { background: linear-gradient(135deg, #03045e 0%, #023e8a 60%, #0096c7 100%) !important; } /* ── Rose Theme (Pink / Crimson) ────────────────────────────────────────── */ body.theme-rose { --primary: #c9184a; --primary-h: #c9184a; --primary-dark: #a4133c; --accent: #ff477e; --accent-dark: #c9184a; --gradient: linear-gradient(135deg, #a4133c, #ff477e); --navy-dark: #370617; --blue-mid: #6a040f; --purple: #ff477e; } body.theme-rose .btn-gold, body.theme-rose .btn-gold:hover { background: linear-gradient(135deg, #a4133c, #ff477e); border-color: #a4133c; } body.theme-rose .site-navbar { background: linear-gradient(135deg, #370617, #6a040f) !important; } body.theme-rose .nav-link.active, body.theme-rose .nav-link:hover { color: #ff477e !important; } body.theme-rose .hero-section { background: linear-gradient(135deg, #370617 0%, #6a040f 60%, #c9184a 100%) !important; }