/* ============================================================ I Make Stuff — Site Themes Applied via body class e.g. Default (no class) = Dark Industrial ============================================================ */ /* ── 1. Dark Industrial (default — no class needed) ─────────── */ :root { --bg: #0c0d0f; --bg2: #131417; --bg3: #1a1c20; --accent: #e86c2f; --text: #f0ede8; --muted: #8a8880; --border: rgba(255,255,255,0.08); --card: #161719; --success: #2ecc71; --warning: #f5a623; --info: #4a9eff; --danger: #e74c3c; } /* ── 2. Light Minimal ────────────────────────────────────────── */ body.theme-light-minimal { --bg: #f8f9fa; --bg2: #ffffff; --bg3: #f0f2f5; --accent: #e86c2f; --text: #1a1c20; --muted: #6b7280; --border: rgba(0,0,0,0.1); --card: #ffffff; --success: #16a34a; --warning: #d97706; --info: #2563eb; --danger: #dc2626; color-scheme: light; } body.theme-light-minimal nav, body.theme-light-minimal .sidebar, body.theme-light-minimal .admin-shell .sidebar { background: #ffffff; border-color: rgba(0,0,0,0.1); } body.theme-light-minimal .auth-screen { background: #f0f2f5; } body.theme-light-minimal input, body.theme-light-minimal select, body.theme-light-minimal textarea { background: #f8f9fa; border-color: rgba(0,0,0,0.15); color: #1a1c20; } body.theme-light-minimal .hero, body.theme-light-minimal section { color: #1a1c20; } body.theme-light-minimal .hero h1 { color: #1a1c20; } body.theme-light-minimal footer { background: #f0f2f5; border-color: rgba(0,0,0,0.1); } /* ── 3. Dark Blue ────────────────────────────────────────────── */ body.theme-dark-blue { --bg: #0a0e1a; --bg2: #0f1629; --bg3: #162035; --accent: #3b82f6; --text: #e8edf5; --muted: #7a8aaa; --border: rgba(59,130,246,0.12); --card: #111827; --success: #10b981; --warning: #f59e0b; --info: #60a5fa; --danger: #ef4444; } body.theme-dark-blue .logo span, body.theme-dark-blue .sidebar-logo span, body.theme-dark-blue .mobile-logo span { color: #3b82f6; } body.theme-dark-blue .btn, body.theme-dark-blue .btn-primary, body.theme-dark-blue .nav-cta { background: #3b82f6; } body.theme-dark-blue .btn:hover, body.theme-dark-blue .btn-primary:hover, body.theme-dark-blue .nav-cta:hover { background: #2563eb; } body.theme-dark-blue .btn-submit { background: #3b82f6; } body.theme-dark-blue .btn-submit:hover { background: #2563eb; } body.theme-dark-blue .hero-glow { background: radial-gradient(ellipse at 20% 50%, rgba(59,130,246,0.12) 0%, transparent 60%); } /* ── 4. Forest Green ─────────────────────────────────────────── */ body.theme-forest-green { --bg: #0a0f0a; --bg2: #0f1a0f; --bg3: #162016; --accent: #22c55e; --text: #e8f5e8; --muted: #7a9a7a; --border: rgba(34,197,94,0.12); --card: #111811; --success: #22c55e; --warning: #f59e0b; --info: #38bdf8; --danger: #ef4444; } body.theme-forest-green .logo span, body.theme-forest-green .sidebar-logo span, body.theme-forest-green .mobile-logo span { color: #22c55e; } body.theme-forest-green .btn, body.theme-forest-green .btn-primary, body.theme-forest-green .nav-cta { background: #22c55e; color: #0a0f0a; } body.theme-forest-green .btn:hover, body.theme-forest-green .btn-primary:hover, body.theme-forest-green .nav-cta:hover { background: #16a34a; } body.theme-forest-green .btn-submit { background: #22c55e; color: #0a0f0a; } body.theme-forest-green .btn-submit:hover { background: #16a34a; } body.theme-forest-green .hero-glow { background: radial-gradient(ellipse at 20% 50%, rgba(34,197,94,0.1) 0%, transparent 60%); } body.theme-forest-green .page-label, body.theme-forest-green .section-label { color: #22c55e; } /* ── 5. Midnight Purple ──────────────────────────────────────── */ body.theme-midnight-purple { --bg: #0c0a14; --bg2: #120f1e; --bg3: #1a1628; --accent: #a855f7; --text: #ede8f5; --muted: #8a7aaa; --border: rgba(168,85,247,0.12); --card: #100e1a; --success: #22c55e; --warning: #f59e0b; --info: #60a5fa; --danger: #ef4444; } body.theme-midnight-purple .logo span, body.theme-midnight-purple .sidebar-logo span, body.theme-midnight-purple .mobile-logo span { color: #a855f7; } body.theme-midnight-purple .btn, body.theme-midnight-purple .btn-primary, body.theme-midnight-purple .nav-cta { background: #a855f7; } body.theme-midnight-purple .btn:hover, body.theme-midnight-purple .btn-primary:hover, body.theme-midnight-purple .nav-cta:hover { background: #9333ea; } body.theme-midnight-purple .btn-submit { background: #a855f7; } body.theme-midnight-purple .btn-submit:hover { background: #9333ea; } body.theme-midnight-purple .hero-glow { background: radial-gradient(ellipse at 20% 50%, rgba(168,85,247,0.12) 0%, transparent 60%); } body.theme-midnight-purple .page-label, body.theme-midnight-purple .section-label { color: #a855f7; } body.theme-midnight-purple .nav-item.active { background: rgba(168,85,247,0.12); color: #a855f7; } /* ── 6. SB Admin (Bootstrap-inspired) ───────────────────────────────────── */ body.theme-sb-admin { --bg: #f8f9fc; --bg2: #ffffff; --bg3: #eaecf4; --accent: #4e73df; --text: #5a5c69; --muted: #858796; --border: #e3e6f0; --card: #ffffff; --success: #1cc88a; --warning: #f6c23e; --info: #36b9cc; --danger: #e74a3b; color-scheme: light; } body.theme-sb-admin .sidebar, body.theme-sb-admin #portalSidebar, body.theme-sb-admin #adminSidebar { background: linear-gradient(180deg, #4e73df 10%, #224abe 100%); border-color: transparent; } body.theme-sb-admin .sidebar-logo, body.theme-sb-admin .sidebar-logo span, body.theme-sb-admin .mobile-logo, body.theme-sb-admin .mobile-logo span { color: #fff; } body.theme-sb-admin .sidebar-section-label { color: rgba(255,255,255,0.4); } body.theme-sb-admin .nav-item { color: rgba(255,255,255,0.8); } body.theme-sb-admin .nav-item:hover { background: rgba(255,255,255,0.1); color: #fff; } body.theme-sb-admin .nav-item.active { background: rgba(255,255,255,0.15); color: #fff; } body.theme-sb-admin .user-chip { background: rgba(255,255,255,0.1); } body.theme-sb-admin .user-name { color: #fff; } body.theme-sb-admin .user-email { color: rgba(255,255,255,0.6); } body.theme-sb-admin .avatar { background: rgba(255,255,255,0.2); color: #fff; } body.theme-sb-admin .sidebar-bottom .nav-item { color: rgba(255,255,255,0.7); } body.theme-sb-admin nav { background: #fff; border-bottom: 1px solid #e3e6f0; box-shadow: 0 0.15rem 1.75rem rgba(58,59,69,0.15); } body.theme-sb-admin nav .logo { color: #5a5c69; } body.theme-sb-admin nav .logo span { color: #4e73df; } body.theme-sb-admin nav .nav-links a { color: #858796; } body.theme-sb-admin nav .nav-links a:hover { color: #4e73df; } body.theme-sb-admin .btn, body.theme-sb-admin .btn-primary, body.theme-sb-admin .nav-cta, body.theme-sb-admin .btn-submit, body.theme-sb-admin .btn-accent { background: #4e73df; color: #fff; } body.theme-sb-admin .btn:hover, body.theme-sb-admin .btn-primary:hover, body.theme-sb-admin .nav-cta:hover, body.theme-sb-admin .btn-submit:hover, body.theme-sb-admin .btn-accent:hover { background: #2e59d9; } body.theme-sb-admin .card, body.theme-sb-admin .cart-summary, body.theme-sb-admin .cart-item { box-shadow: 0 0.15rem 1.75rem rgba(58,59,69,0.1); border-color: #e3e6f0; } body.theme-sb-admin input, body.theme-sb-admin select, body.theme-sb-admin textarea { background: #fff; border-color: #d1d3e2; color: #5a5c69; } body.theme-sb-admin input:focus, body.theme-sb-admin select:focus, body.theme-sb-admin textarea:focus { border-color: #bac8f3; } body.theme-sb-admin .page-title, body.theme-sb-admin .hero h1, body.theme-sb-admin .section-title { color: #5a5c69; } body.theme-sb-admin footer { background: #fff; border-color: #e3e6f0; color: #858796; } body.theme-sb-admin .hero-glow { display: none; } body.theme-sb-admin .stat-val { color: #4e73df; }