/* ============================================ URBot Adaptive Theme System 10 themes applied via [data-theme] on ============================================ */ /* ---- Transition support ---- */ html.theme-transitioning, html.theme-transitioning *, html.theme-transitioning *::before, html.theme-transitioning *::after { transition: background-color 0.6s ease, color 0.4s ease, border-color 0.5s ease, box-shadow 0.5s ease !important; } /* ============================================ Theme 1: Default — Dark Purple / Emerald Current site dark mode (builder, my-bots) ============================================ */ [data-theme="default"], :root { --bg-primary: #0a0a1a; --bg-secondary: #0f0f2a; --bg-card: rgba(15, 15, 40, 0.85); --text-primary: #ffffff; --text-secondary: #e2e8f0; --text-muted: #94a3b8; --accent-primary: #10b981; --accent-secondary: #6366f1; --accent-glow: rgba(16, 185, 129, 0.25); --border-color: rgba(255, 255, 255, 0.1); --border-subtle: rgba(255, 255, 255, 0.05); --gradient-hero: linear-gradient(135deg, #0a0a1a 0%, #1a0a2e 40%, #0a1a2e 100%); --dashboard-name: "Garage"; } /* ============================================ Theme 2: Gamer — Black / Neon Green / Magenta ============================================ */ [data-theme="gamer"] { --bg-primary: #0d0d0d; --bg-secondary: #111111; --bg-card: rgba(18, 18, 18, 0.92); --text-primary: #e0ffe0; --text-secondary: #b0ffb0; --text-muted: #6b8f6b; --accent-primary: #00ff88; --accent-secondary: #ff00ff; --accent-glow: rgba(0, 255, 136, 0.3); --border-color: rgba(0, 255, 136, 0.2); --border-subtle: rgba(0, 255, 136, 0.08); --gradient-hero: linear-gradient(135deg, #0d0d0d 0%, #0a1a0a 30%, #1a0a1a 70%, #0d0d0d 100%); --dashboard-name: "Command Center"; } /* ============================================ Theme 3: Farm — Rustic Brown / Sage ============================================ */ [data-theme="farm"] { --bg-primary: #1a150e; --bg-secondary: #211c13; --bg-card: rgba(30, 24, 16, 0.9); --text-primary: #f5e6d3; --text-secondary: #d4c4a8; --text-muted: #9c8b6e; --accent-primary: #8b7355; --accent-secondary: #6b8e4e; --accent-glow: rgba(139, 115, 85, 0.25); --border-color: rgba(139, 115, 85, 0.25); --border-subtle: rgba(139, 115, 85, 0.1); --gradient-hero: linear-gradient(135deg, #1a150e 0%, #2a1f12 40%, #1a2010 100%); --dashboard-name: "Stable"; } /* ============================================ Theme 4: Garden — Earth Green / Terracotta ============================================ */ [data-theme="garden"] { --bg-primary: #0f1a0f; --bg-secondary: #142214; --bg-card: rgba(18, 28, 18, 0.9); --text-primary: #e8f5e0; --text-secondary: #c8dbb8; --text-muted: #7a9668; --accent-primary: #4a7c4f; --accent-secondary: #c17c4e; --accent-glow: rgba(74, 124, 79, 0.25); --border-color: rgba(74, 124, 79, 0.25); --border-subtle: rgba(74, 124, 79, 0.1); --gradient-hero: linear-gradient(135deg, #0f1a0f 0%, #1a2a14 40%, #1a1a0f 100%); --dashboard-name: "Greenhouse"; } /* ============================================ Theme 5: Ocean — Deep Blue / Aqua ============================================ */ [data-theme="ocean"] { --bg-primary: #0a1628; --bg-secondary: #0d1f38; --bg-card: rgba(12, 24, 48, 0.9); --text-primary: #e0f2fe; --text-secondary: #bae6fd; --text-muted: #6b9fcc; --accent-primary: #0ea5e9; --accent-secondary: #06b6d4; --accent-glow: rgba(14, 165, 233, 0.25); --border-color: rgba(14, 165, 233, 0.2); --border-subtle: rgba(14, 165, 233, 0.08); --gradient-hero: linear-gradient(135deg, #0a1628 0%, #0a2040 40%, #082838 100%); --dashboard-name: "Marina"; } /* ============================================ Theme 6: Mountain — Slate / Snow / Pine ============================================ */ [data-theme="mountain"] { --bg-primary: #1a1e2e; --bg-secondary: #1f2437; --bg-card: rgba(28, 32, 50, 0.9); --text-primary: #f1f5f9; --text-secondary: #cbd5e1; --text-muted: #7e8ba4; --accent-primary: #94a3b8; --accent-secondary: #22c55e; --accent-glow: rgba(148, 163, 184, 0.2); --border-color: rgba(148, 163, 184, 0.18); --border-subtle: rgba(148, 163, 184, 0.08); --gradient-hero: linear-gradient(135deg, #1a1e2e 0%, #252b40 40%, #1a2e28 100%); --dashboard-name: "Base Camp"; } /* ============================================ Theme 7: Scholar — Navy / Gold / Cream ============================================ */ [data-theme="scholar"] { --bg-primary: #0f172a; --bg-secondary: #131d36; --bg-card: rgba(18, 25, 48, 0.92); --text-primary: #fef3c7; --text-secondary: #fde68a; --text-muted: #a99b6a; --accent-primary: #d4a537; --accent-secondary: #fef3c7; --accent-glow: rgba(212, 165, 55, 0.25); --border-color: rgba(212, 165, 55, 0.2); --border-subtle: rgba(212, 165, 55, 0.08); --gradient-hero: linear-gradient(135deg, #0f172a 0%, #1a1f3a 40%, #1f1a0a 100%); --dashboard-name: "Study"; } /* ============================================ Theme 8: Medic — Clinical Blue / White ============================================ */ [data-theme="medic"] { --bg-primary: #0c1929; --bg-secondary: #0f2038; --bg-card: rgba(14, 26, 48, 0.92); --text-primary: #f0f9ff; --text-secondary: #dbeafe; --text-muted: #6b8fbc; --accent-primary: #3b82f6; --accent-secondary: #ef4444; --accent-glow: rgba(59, 130, 246, 0.25); --border-color: rgba(59, 130, 246, 0.2); --border-subtle: rgba(59, 130, 246, 0.08); --gradient-hero: linear-gradient(135deg, #0c1929 0%, #0f2848 40%, #1a0c1a 100%); --dashboard-name: "Wellness Hub"; } /* ============================================ Theme 9: Business — Charcoal / Steel Blue / Gold ============================================ */ [data-theme="business"] { --bg-primary: #111827; --bg-secondary: #161e30; --bg-card: rgba(20, 26, 44, 0.92); --text-primary: #f9fafb; --text-secondary: #d1d5db; --text-muted: #8891a5; --accent-primary: #6366f1; --accent-secondary: #d4a537; --accent-glow: rgba(99, 102, 241, 0.22); --border-color: rgba(99, 102, 241, 0.18); --border-subtle: rgba(99, 102, 241, 0.07); --gradient-hero: linear-gradient(135deg, #111827 0%, #1a1f3a 40%, #1f1a28 100%); --dashboard-name: "Office"; } /* ============================================ Theme 10: Creative — Dark / Vibrant Rainbow ============================================ */ [data-theme="creative"] { --bg-primary: #0d0d0d; --bg-secondary: #141418; --bg-card: rgba(20, 20, 28, 0.92); --text-primary: #faf5ff; --text-secondary: #e9d5ff; --text-muted: #9b7cc8; --accent-primary: #a855f7; --accent-secondary: #ec4899; --accent-glow: rgba(168, 85, 247, 0.28); --border-color: rgba(168, 85, 247, 0.2); --border-subtle: rgba(168, 85, 247, 0.08); --gradient-hero: linear-gradient(135deg, #0d0d0d 0%, #1a0a2a 30%, #2a0a1a 70%, #0d0d0d 100%); --dashboard-name: "Studio"; } /* ============================================ Utility classes for themed elements ============================================ */ .theme-bg-primary { background-color: var(--bg-primary); } .theme-bg-secondary { background-color: var(--bg-secondary); } .theme-bg-card { background-color: var(--bg-card); } .theme-text { color: var(--text-primary); } .theme-text-secondary { color: var(--text-secondary); } .theme-text-muted { color: var(--text-muted); } .theme-accent { color: var(--accent-primary); } .theme-border { border-color: var(--border-color); } .theme-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; } .theme-card:hover { border-color: var(--accent-primary); box-shadow: 0 0 20px var(--accent-glow); } .theme-glow { box-shadow: 0 0 15px var(--accent-glow); } .theme-gradient-hero { background: var(--gradient-hero); } .theme-btn-primary { background: var(--accent-primary); color: var(--bg-primary); border: none; border-radius: 8px; padding: 0.6rem 1.2rem; font-weight: 600; cursor: pointer; transition: opacity 0.2s, transform 0.15s; } .theme-btn-primary:hover { opacity: 0.9; transform: translateY(-1px); } .theme-btn-secondary { background: transparent; color: var(--accent-primary); border: 1px solid var(--accent-primary); border-radius: 8px; padding: 0.6rem 1.2rem; font-weight: 600; cursor: pointer; transition: background 0.2s, transform 0.15s; } .theme-btn-secondary:hover { background: var(--accent-glow); transform: translateY(-1px); } /* Dashboard name pseudo-element helper */ .theme-dashboard-name::after { content: var(--dashboard-name); } /* ============================================ Light mode variant (default theme only) ============================================ */ @media (prefers-color-scheme: light) { html:not([data-theme]), html[data-theme="default"] { --bg-primary: #ffffff; --bg-secondary: #f8fafc; --bg-card: rgba(255, 255, 255, 0.95); --text-primary: #1a1a2e; --text-secondary: #334155; --text-muted: #64748b; --accent-primary: #10b981; --accent-secondary: #6366f1; --accent-glow: rgba(16, 185, 129, 0.15); --border-color: rgba(0, 0, 0, 0.1); --border-subtle: rgba(0, 0, 0, 0.05); --gradient-hero: linear-gradient(135deg, #ffffff 0%, #f0f4ff 50%, #f0fdf4 100%); } }