/* ============================================================ AMRSARHAN.COM — THEME ENGINE 5 themes, all toggled via data-theme on Default: dark (original) ============================================================ */ /* ── 1. DARK (original) ── */ [data-theme="dark"], :root { --bg: #080c10; --surface: #0f1520; --surface2: #141d2b; --border: #1e2d42; --gold: #c9a84c; --gold-dim: #7a6030; --teal: #2de2c4; --teal-dim: #0e4a3f; --text: #dce6f0; --text-muted:#6f869e; --white: #ffffff; --nav-bg: rgba(8,12,16,0.88); --hero-grid-color: rgba(201,168,76,0.04); } /* ── 2. MIDNIGHT BLUE ── */ [data-theme="midnight"] { --bg: #05080f; --surface: #0a0e1a; --surface2: #0f1526; --border: #1a2540; --gold: #7eb8f7; --gold-dim: #2a5080; --teal: #56d4f0; --teal-dim: #0a3a50; --text: #c8d8f0; --text-muted:#5a7a9e; --white: #e8f0ff; --nav-bg: rgba(5,8,15,0.92); --hero-grid-color: rgba(126,184,247,0.04); } /* ── 3. EMERALD ── */ [data-theme="emerald"] { --bg: #050f09; --surface: #081610; --surface2: #0c1e16; --border: #143020; --gold: #4ade80; --gold-dim: #1a5c30; --teal: #a3f0c8; --teal-dim: #0a3a20; --text: #c8f0d8; --text-muted:#4a8060; --white: #e8fff0; --nav-bg: rgba(5,15,9,0.92); --hero-grid-color: rgba(74,222,128,0.04); } /* ── 4. DESERT GOLD (light warm) ── */ [data-theme="desert"] { --bg: #faf7f0; --surface: #f2ede0; --surface2: #e8e0cc; --border: #d4c89a; --gold: #8b6914; --gold-dim: #c9a84c; --teal: #2a6b5e; --teal-dim: #a8d4cc; --text: #2a2010; --text-muted:#6b5a3a; --white: #ffffff; --nav-bg: rgba(250,247,240,0.95); --hero-grid-color: rgba(139,105,20,0.06); } /* ── 5. SLATE (light cool) ── */ [data-theme="slate"] { --bg: #f4f6f9; --surface: #eaedf2; --surface2: #dde2ea; --border: #c4cdd8; --gold: #1a4a8a; --gold-dim: #6a9ad4; --teal: #0e6a5e; --teal-dim: #a0ccc8; --text: #1a2030; --text-muted:#4a5a70; --white: #ffffff; --nav-bg: rgba(244,246,249,0.96); --hero-grid-color: rgba(26,74,138,0.05); } /* ── Light theme fixes (desert + slate) ── */ [data-theme="desert"] body::before, [data-theme="slate"] body::before { opacity: 0.15; } [data-theme="desert"] .hero-grid-bg, [data-theme="slate"] .hero-grid-bg { background-image: linear-gradient(var(--hero-grid-color) 1px, transparent 1px), linear-gradient(90deg, var(--hero-grid-color) 1px, transparent 1px); background-size: 60px 60px; } [data-theme="desert"] .hero-glow, [data-theme="slate"] .hero-glow { opacity: 0.4; } [data-theme="desert"] .hero-glow-2, [data-theme="slate"] .hero-glow-2 { opacity: 0.3; } /* Nav background uses variable */ nav { background: var(--nav-bg) !important; } /* Smooth theme transition */ *, *::before, *::after { transition: background-color 0.35s ease, border-color 0.35s ease, color 0.25s ease, box-shadow 0.35s ease !important; } /* But NOT layout/transform transitions */ .fade-in, .hero-tree, .hamburger span, .mobile-nav, .service-card::before, nav, .btn-primary, .btn-secondary { transition: unset; } .fade-in { transition: opacity 0.7s ease, transform 0.7s ease !important; } .hero-tree { transition: opacity 1s ease 0.4s, transform 1s ease 0.4s !important; } .hamburger span { transition: all 0.3s ease !important; } .mobile-nav { transition: transform 0.22s cubic-bezier(0.4,0,0.2,1), opacity 0.22s cubic-bezier(0.4,0,0.2,1) !important; } .service-card::before { transition: transform 0.3s !important; } .btn-primary { transition: all 0.2s !important; } .btn-secondary { transition: all 0.2s !important; }