/* ============================================================ SUPERBOTS PORTAL — Theme System Apply .light-theme to to switch themes All portal pages use these variables ============================================================ */ /* ── DARK THEME (default) ── */ :root { --pt-bg: #111111; --pt-bg-card: #1a1a1a; --pt-bg-card-2: #2d2d2d; --pt-bg-hover: rgba(255,215,0,0.08); --pt-bg-accent: rgba(255,215,0,0.1); --pt-bg-input: #0a0a0a; --pt-border: #444444; --pt-border-gold: rgba(255,215,0,0.3); --pt-border-gold-solid: #FFD700; --pt-text: #ffffff; --pt-text-muted: #999999; --pt-text-light: #cccccc; --pt-gold: #FFD700; --pt-gold-2: #FFA500; --pt-gold-dim: rgba(255,215,0,0.2); --pt-green: #28a745; --pt-red: #dc3545; --pt-shadow: 0 10px 30px rgba(0,0,0,0.4); --pt-shadow-gold: 0 8px 20px rgba(255,215,0,0.3); --pt-gradient-card: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%); --pt-gradient-gold: linear-gradient(45deg, #FFD700, #FFA500); --pt-gradient-header: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%); } /* ── LIGHT THEME ── */ body.light-theme { --pt-bg: #f0f2f5; --pt-bg-card: #ffffff; --pt-bg-card-2: #f8f9fa; --pt-bg-hover: rgba(180,130,0,0.08); --pt-bg-accent: rgba(180,130,0,0.1); --pt-bg-input: #f8f9fa; --pt-border: #dee2e6; --pt-border-gold: rgba(180,130,0,0.35); --pt-border-gold-solid: #b48200; --pt-text: #1a1a1a; --pt-text-muted: #6c757d; --pt-text-light: #495057; --pt-gold: #b48200; --pt-gold-2: #8a6200; --pt-gold-dim: rgba(180,130,0,0.15); --pt-green: #198754; --pt-red: #dc3545; --pt-shadow: 0 4px 20px rgba(0,0,0,0.08); --pt-shadow-gold: 0 4px 16px rgba(180,130,0,0.2); --pt-gradient-card: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); --pt-gradient-gold: linear-gradient(45deg, #b48200, #8a6200); --pt-gradient-header: linear-gradient(135deg, #fff8e1 0%, #fffde7 100%); } /* Body background follows theme */ body { background: var(--pt-bg) !important; color: var(--pt-text) !important; transition: background 0.3s ease, color 0.3s ease; } /* ── Theme Toggle Button ── */ .pt-toggle { position: absolute; top: 20px; right: 20px; width: 42px; height: 42px; background: var(--pt-gold-dim); border: 2px solid var(--pt-border-gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.2rem; transition: all 0.3s ease; color: var(--pt-gold); z-index: 10; } .pt-toggle:hover { background: var(--pt-gold); color: #1a1a1a; transform: scale(1.1); box-shadow: var(--pt-shadow-gold); } .pt-toggle-wrap { position: relative; } .pt-toggle-tip { position: absolute; top: 50px; right: 0; background: var(--pt-bg-card-2); border: 1px solid var(--pt-border-gold); color: var(--pt-text); font-size: 0.75rem; padding: 4px 10px; border-radius: 6px; white-space: nowrap; pointer-events: none; opacity: 0; transform: translateY(-4px); transition: all 0.2s ease; font-family: sans-serif; font-weight: 600; } .pt-toggle:hover + .pt-toggle-tip, .pt-toggle-wrap:hover .pt-toggle-tip { opacity: 1; transform: translateY(0); }