/* ═══════════════════════════════════════════════════════════════ EXODEUS-GAMING · MULTI-THEME SYSTEM 3 temas: Red (default) · Dark · White Se aplica con data-theme="red|dark|white" en IMPORTANTE: style.css fue modificado para usar var(--red), var(--red-aXX) en lugar de #C0392B / rgba(192,57,43,X). Eso hace que los temas realmente cambien los colores en TODA la web. ═══════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════ TEMA RED (default) — el original EXODEUS-GAMING ═══════════════════════════════════════════════════════════ */ :root, html[data-theme="red"] { /* Color de acento principal — ROJO EXODEUS */ --red: #C0392B; --red-hi: #E74C3C; --red-dim: #7B1A1A; /* Acentos secundarios (naranjas/dorados) — mantener originales en RED */ --gold: #FF6B35; --gold-hi: #FF8C5A; --gold-dim: rgba(255,107,53,0.40); --gold-glow: rgba(255,107,53,0.10); --gold-border: rgba(255,107,53,0.30); --amber: #B8730A; --amber-hi: #D4850A; --amber-glow: rgba(184,115,10,0.15); /* Variantes con alpha (usadas por style.css) */ --red-a2: rgba(192,57,43,0.02); --red-a3: rgba(192,57,43,0.03); --red-a4: rgba(192,57,43,0.04); --red-a5: rgba(192,57,43,0.05); --red-a6: rgba(192,57,43,0.06); --red-a7: rgba(192,57,43,0.07); --red-a8: rgba(192,57,43,0.08); --red-a10: rgba(192,57,43,0.10); --red-a12: rgba(192,57,43,0.12); --red-a14: rgba(192,57,43,0.14); --red-a15: rgba(192,57,43,0.15); --red-a18: rgba(192,57,43,0.18); --red-a20: rgba(192,57,43,0.20); --red-a22: rgba(192,57,43,0.22); --red-a25: rgba(192,57,43,0.25); --red-a28: rgba(192,57,43,0.28); --red-a30: rgba(192,57,43,0.30); --red-a35: rgba(192,57,43,0.35); --red-a40: rgba(192,57,43,0.40); --red-a45: rgba(192,57,43,0.45); --red-a50: rgba(192,57,43,0.50); --red-a60: rgba(192,57,43,0.60); /* Fondos */ --bg-void: #05050A; --bg-base: #09090F; --bg-panel: #0E0E16; --bg-card: #13131C; --bg-card-hi: #1A1A26; --bg-input: rgba(0,0,0,0.45); /* Texto */ --text-hi: #F0ECF5; --text-mid: #7A7090; --text-lo: #35303F; } /* ═══════════════════════════════════════════════════════════ TEMA DARK — Azul cyber, SIN rojos ═══════════════════════════════════════════════════════════ */ html[data-theme="dark"] { --red: #3B82F6; --red-hi: #60A5FA; --red-dim: #1E40AF; /* En DARK: el "gold" secundario es cyan (sigue paleta fría) */ --gold: #06B6D4; --gold-hi: #22D3EE; --gold-dim: rgba(6,182,212,0.40); --gold-glow: rgba(6,182,212,0.10); --gold-border: rgba(6,182,212,0.30); --amber: #0EA5E9; --amber-hi: #38BDF8; --amber-glow: rgba(14,165,233,0.15); --red-a2: rgba(59,130,246,0.02); --red-a3: rgba(59,130,246,0.03); --red-a4: rgba(59,130,246,0.04); --red-a5: rgba(59,130,246,0.05); --red-a6: rgba(59,130,246,0.06); --red-a7: rgba(59,130,246,0.07); --red-a8: rgba(59,130,246,0.08); --red-a10: rgba(59,130,246,0.10); --red-a12: rgba(59,130,246,0.12); --red-a14: rgba(59,130,246,0.14); --red-a15: rgba(59,130,246,0.15); --red-a18: rgba(59,130,246,0.18); --red-a20: rgba(59,130,246,0.20); --red-a22: rgba(59,130,246,0.22); --red-a25: rgba(59,130,246,0.25); --red-a28: rgba(59,130,246,0.28); --red-a30: rgba(59,130,246,0.30); --red-a35: rgba(59,130,246,0.35); --red-a40: rgba(59,130,246,0.40); --red-a45: rgba(59,130,246,0.45); --red-a50: rgba(59,130,246,0.50); --red-a60: rgba(59,130,246,0.60); /* Fondos: negro profundo */ --bg-void: #05050A; --bg-base: #09090F; --bg-panel: #0E0E16; --bg-card: #13131C; --bg-card-hi: #1A1A26; --bg-input: rgba(0,0,0,0.45); --text-hi: #F0ECF5; --text-mid: #7A7090; --text-lo: #35303F; } /* Body radial gradients en dark: azules en lugar de rojos */ html[data-theme="dark"] body::before { background: radial-gradient(ellipse 80% 50% at 20% 10%, rgba(59,130,246,0.06) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 80% 90%, rgba(96,165,250,0.04) 0%, transparent 50%) !important; } /* SVGs hardcoded en HTML con stroke="#C0392B" o fill="#C0392B" → pintar de azul */ html[data-theme="dark"] svg [stroke="#C0392B"] { stroke: #3B82F6 !important; } html[data-theme="dark"] svg [fill="#C0392B"] { fill: #3B82F6 !important; } /* ═══════════════════════════════════════════════════════════ TEMA WHITE — Fondo claro, texto oscuro ═══════════════════════════════════════════════════════════ */ html[data-theme="white"] { --red: #B91C1C; --red-hi: #DC2626; --red-dim: #7F1D1D; /* En WHITE: gold/amber más oscuros, legibles sobre fondo blanco */ --gold: #EA580C; --gold-hi: #F97316; --gold-dim: rgba(234,88,12,0.40); --gold-glow: rgba(234,88,12,0.10); --gold-border: rgba(234,88,12,0.30); --amber: #B45309; --amber-hi: #D97706; --amber-glow: rgba(180,83,9,0.15); --red-a2: rgba(185,28,28,0.02); --red-a3: rgba(185,28,28,0.03); --red-a4: rgba(185,28,28,0.04); --red-a5: rgba(185,28,28,0.05); --red-a6: rgba(185,28,28,0.06); --red-a7: rgba(185,28,28,0.07); --red-a8: rgba(185,28,28,0.08); --red-a10: rgba(185,28,28,0.10); --red-a12: rgba(185,28,28,0.12); --red-a14: rgba(185,28,28,0.14); --red-a15: rgba(185,28,28,0.15); --red-a18: rgba(185,28,28,0.18); --red-a20: rgba(185,28,28,0.20); --red-a22: rgba(185,28,28,0.22); --red-a25: rgba(185,28,28,0.25); --red-a28: rgba(185,28,28,0.28); --red-a30: rgba(185,28,28,0.30); --red-a35: rgba(185,28,28,0.35); --red-a40: rgba(185,28,28,0.40); --red-a45: rgba(185,28,28,0.45); --red-a50: rgba(185,28,28,0.50); --red-a60: rgba(185,28,28,0.60); /* Fondos CLAROS */ --bg-void: #F4F4F6; --bg-base: #FFFFFF; --bg-panel: #FAFAFA; --bg-card: #FFFFFF; --bg-card-hi: #F3F4F6; --bg-input: rgba(0,0,0,0.04); /* Texto INVERTIDO */ --text-hi: #18181B; --text-mid: #52525B; --text-lo: #A1A1AA; } /* ── AJUSTES ESPECÍFICOS DE WHITE ── */ html[data-theme="white"] body { background: var(--bg-void) !important; color: var(--text-hi); } html[data-theme="white"] body::before { background: radial-gradient(ellipse 80% 50% at 20% 10%, rgba(185,28,28,0.04) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 80% 90%, rgba(234,88,12,0.03) 0%, transparent 50%) !important; opacity: 0.6; } html[data-theme="white"] body::after { opacity: 0.3; mix-blend-mode: multiply; } html[data-theme="white"] .scanlines { background: repeating-linear-gradient( to bottom, transparent 0px, transparent 3px, rgba(0,0,0,0.012) 3px, rgba(0,0,0,0.012) 4px ) !important; opacity: 0.4; } html[data-theme="white"] .navbar { background: rgba(255,255,255,0.92) !important; border-bottom: 1px solid rgba(0,0,0,0.08) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } html[data-theme="white"] .nav-drawer { background: rgba(255,255,255,0.98) !important; } html[data-theme="white"] ::-webkit-scrollbar-track { background: #E4E4E7 !important; } html[data-theme="white"] ::-webkit-scrollbar-thumb { background: #A1A1AA !important; } html[data-theme="white"] .site-footer { background: var(--bg-panel) !important; border-top: 1px solid rgba(0,0,0,0.08) !important; } html[data-theme="white"] .modal { background: #FFFFFF !important; color: var(--text-hi); } html[data-theme="white"] .modal-overlay { background: rgba(0,0,0,0.45) !important; } html[data-theme="white"] .mfield__input, html[data-theme="white"] .sdrawer-input, html[data-theme="white"] .chat-input, html[data-theme="white"] .ag-gate__input { background: #F4F4F5 !important; border-color: rgba(0,0,0,0.10) !important; color: var(--text-hi) !important; } html[data-theme="white"] .mfield__input:focus, html[data-theme="white"] .sdrawer-input:focus, html[data-theme="white"] .chat-input:focus, html[data-theme="white"] .ag-gate__input:focus { background: #FFFFFF !important; border-color: var(--red) !important; } html[data-theme="white"] .exo-hero__stats-side { background: rgba(245,245,247,0.85) !important; border-left: 1px solid rgba(0,0,0,0.08) !important; } html[data-theme="white"] .exo-hero__stats-side::before { color: rgba(185,28,28,0.04) !important; } html[data-theme="white"] .hero-stat-vert { border-bottom: 1px solid rgba(0,0,0,0.06) !important; } html[data-theme="white"] .hero-stat-vert:hover { background: rgba(0,0,0,0.02) !important; } html[data-theme="white"] .hero-stat-vert__num { color: var(--text-hi) !important; } html[data-theme="white"] .hero-stat-vert__label { color: var(--text-mid) !important; } html[data-theme="white"] .leaderboard, html[data-theme="white"] .leaderboard__header { background: var(--bg-card) !important; color: var(--text-hi); } html[data-theme="white"] .news-feed, html[data-theme="white"] .news-item { background: var(--bg-card) !important; color: var(--text-hi); } html[data-theme="white"] .chat-wrap, html[data-theme="white"] .chat-messages { background: var(--bg-card) !important; } html[data-theme="white"] .fchip, html[data-theme="white"] .nfchip, html[data-theme="white"] .vtbtn { background: var(--bg-card) !important; color: var(--text-mid) !important; } html[data-theme="white"] .fchip:hover, html[data-theme="white"] .nfchip:hover, html[data-theme="white"] .vtbtn:hover { color: var(--text-hi) !important; } html[data-theme="white"] .srv-card, html[data-theme="white"] .controls-bar { background: var(--bg-card) !important; color: var(--text-hi); } html[data-theme="white"] .mini-plan-card, html[data-theme="white"] .mem-server-bar, html[data-theme="white"] .comparison-wrap, html[data-theme="white"] .comparison-table, html[data-theme="white"] .mem-type-tab { background: var(--bg-card) !important; color: var(--text-hi); } html[data-theme="white"] .faq-item { background: var(--bg-card) !important; } html[data-theme="white"] .faq-question, html[data-theme="white"] .faq-answer { color: var(--text-hi) !important; } html[data-theme="white"] .section-header__title, html[data-theme="white"] .exo-hero__title, html[data-theme="white"] .hero__title-main, html[data-theme="white"] .membresia-hero__title, html[data-theme="white"] .staff-hero__title { color: var(--text-hi); } html[data-theme="white"] .exo-hero__desc, html[data-theme="white"] .hero__desc, html[data-theme="white"] .membresia-hero__desc, html[data-theme="white"] .staff-hero__desc { color: var(--text-mid); } html[data-theme="white"] .nav-link { color: var(--text-mid); } html[data-theme="white"] .nav-link:hover, html[data-theme="white"] .nav-link--active { color: var(--text-hi); } html[data-theme="white"] .page { color: var(--text-hi); } html[data-theme="white"] .modal__sub, html[data-theme="white"] .mtab { color: var(--text-mid); } html[data-theme="white"] svg [stroke="#C0392B"] { stroke: var(--red) !important; } html[data-theme="white"] svg [fill="#C0392B"] { fill: var(--red) !important; } html[data-theme="white"] .btn-outline { color: var(--red) !important; background: transparent !important; } html[data-theme="white"] .btn-outline:hover { background: rgba(185,28,28,0.06) !important; } html[data-theme="white"] .footer-status-text, html[data-theme="white"] .footer-brand__desc, html[data-theme="white"] .footer-brand__tag, html[data-theme="white"] .footer-col__title, html[data-theme="white"] .footer-discord-card__name, html[data-theme="white"] .footer-discord-card__sub, html[data-theme="white"] .footer-bottom__copy, html[data-theme="white"] .footer-terminal__prompt, html[data-theme="white"] .footer-terminal__cmd { color: var(--text-mid); } /* ═══════════════════════════════════════════════════════════ FLOATING SETTINGS BUTTON (Theme + Language Switcher) ═══════════════════════════════════════════════════════════ */ .fab-settings { position: fixed; bottom: 20px; right: 20px; z-index: 9000; font-family: var(--f-mono), monospace; } .fab-settings__btn { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--red) 0%, var(--red-hi) 100%); border: 1px solid var(--red-a30); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 24px var(--red-a35), 0 0 0 1px var(--red-a15); transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease; } .fab-settings__btn:hover { transform: scale(1.08) rotate(60deg); box-shadow: 0 6px 28px var(--red-a50), 0 0 0 2px var(--red-a25); } .fab-settings__btn svg { width: 22px; height: 22px; fill: #fff; } .fab-settings__panel { position: absolute; bottom: 60px; right: 0; min-width: 240px; background: var(--bg-panel); border: 1px solid var(--red-a45); border-radius: 8px; padding: 14px; box-shadow: 0 10px 40px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.3); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); opacity: 0; visibility: hidden; transform: translateY(8px) scale(0.96); transform-origin: bottom right; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; pointer-events: none; } .fab-settings.open .fab-settings__panel { opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto; } .fab-settings__section { margin-bottom: 14px; } .fab-settings__section:last-child { margin-bottom: 0; } .fab-settings__label { font-family: var(--f-display, 'Orbitron', sans-serif); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; color: var(--text-mid); text-transform: uppercase; margin-bottom: 8px; display: block; } .fab-settings__options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .fab-settings__options--lang { grid-template-columns: repeat(2, 1fr); } .fab-settings__option { background: var(--bg-input); border: 1px solid var(--red-a18); color: var(--text-mid); font-family: var(--f-mono), monospace; font-size: 0.66rem; letter-spacing: 0.06em; padding: 8px 4px; cursor: pointer; border-radius: 5px; transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1); text-transform: uppercase; font-weight: 600; display: flex; flex-direction: column; align-items: center; gap: 4px; } .fab-settings__option:hover { border-color: var(--red-a30); color: var(--text-hi); background: var(--red-a6); } .fab-settings__option--active { background: linear-gradient(135deg, var(--red) 0%, var(--red-hi) 100%); border-color: var(--red); color: #fff; box-shadow: 0 0 0 1px var(--red-a30), 0 2px 8px var(--red-a20); } .fab-settings__option--active:hover { background: linear-gradient(135deg, var(--red-hi) 0%, var(--red) 100%); color: #fff; } .fab-settings__icon { font-size: 14px; line-height: 1; } .fab-settings__option-text { font-size: 0.58rem; letter-spacing: 0.05em; } /* Color preview dots — FIJOS para que se vea qué representa cada tema */ .fab-settings__color-dot { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.4); flex-shrink: 0; } .fab-settings__color-dot--red { background: #C0392B; } .fab-settings__color-dot--dark { background: #3B82F6; } .fab-settings__color-dot--white { background: #FFFFFF; border-color: rgba(0,0,0,0.25); } html[data-theme="white"] .fab-settings__panel { background: #FFFFFF; border-color: rgba(0,0,0,0.10); } html[data-theme="white"] .fab-settings__option { background: #F4F4F5; color: var(--text-mid); } html[data-theme="white"] .fab-settings__option:hover { background: rgba(185,28,28,0.06); } @media (max-width: 600px) { .fab-settings { bottom: 16px; right: 16px; } .fab-settings__btn { width: 44px; height: 44px; } .fab-settings__btn svg { width: 20px; height: 20px; } .fab-settings__panel { min-width: 220px; } }