/* ========================================================================== THEME VARIANTS — Apex Nexus / Nova Bastion 4 variants applied via Each overrides :root CSS variables from theme.css. ========================================================================== */ /* ---------- Void Dark (default dark) — base theme, minimal overrides ------ */ [data-theme="void-dark"] { --bg: #060a12; --bg-subtle: #0a0e18; --panel: #0d1220; --panel-hover: #131b2e; --border: #1a2536; --border-light:#151f30; --text: #e2e8f0; --text-bright: #f1f5f9; --accent: #06d6a0; --accent2: #38bdf8; } /* ---------- Nebula Dark — warmer purples + magenta accent --------------- */ [data-theme="nebula-dark"] { --bg: #0c0818; --bg-subtle: #100c1f; --panel: #160f28; --panel-hover: #1e1535; --border: #2a1f45; --border-light:#221a3a; --text: #e0daf0; --text-bright: #f3f0fa; --muted: #7b6f9a; --accent: #c084fc; --accent-dim: #c084fc33; --accent2: #f472b6; --accent2-dim: #f472b633; --glow-accent: 0 0 20px #c084fc33; --danger: #fb7185; --warn: #fbbf24; --ok: #34d399; } /* ---------- Aurora Light — clean light with teal accent ----------------- */ [data-theme="aurora-light"] { --bg: #f8fafc; --bg-subtle: #f1f5f9; --panel: #ffffff; --panel-hover: #f0fdf4; --border: #d1d5db; --border-light:#e5e7eb; --text: #1e293b; --text-bright: #0f172a; --muted: #64748b; --accent: #059669; --accent-dim: #05966933; --accent2: #0284c7; --accent2-dim: #0284c733; --glow-accent: 0 0 12px #05966922; --danger: #dc2626; --danger-dim: #dc262622; --warn: #d97706; --warn-dim: #d9770622; --ok: #16a34a; --ok-dim: #16a34a22; --shadow: 0 2px 8px rgba(0,0,0,.08); --shadow-lg: 0 8px 32px rgba(0,0,0,.12); } [data-theme="aurora-light"] body { background-image: none; } [data-theme="aurora-light"] .card, [data-theme="aurora-light"] .panel, [data-theme="aurora-light"] .learn-library-card, [data-theme="aurora-light"] article.card { background: rgba(255, 255, 255, 0.85) !important; backdrop-filter: blur(8px); border-color: rgba(0, 0, 0, 0.08) !important; box-shadow: 0 1px 4px rgba(0,0,0,0.05); } [data-theme="aurora-light"] #nx-immersive-bg { background: radial-gradient(ellipse 120% 80% at 30% 20%, rgba(5, 150, 105, 0.04) 0%, transparent 60%), radial-gradient(ellipse 100% 70% at 75% 70%, rgba(2, 132, 199, 0.04) 0%, transparent 55%), linear-gradient(160deg, #f8fafc 0%, #f1f5f9 40%, #ecfdf5 100%); } [data-theme="aurora-light"] #nx-immersive-bg::before { opacity: 0.04; } [data-theme="aurora-light"] #nx-nova-panel { background: rgba(255, 255, 255, 0.95); border-left-color: rgba(5, 150, 105, 0.15); } [data-theme="aurora-light"] .nx-panel__title { color: #0284c7; } [data-theme="aurora-light"] .nav { background: rgba(255, 255, 255, 0.9); border-bottom-color: rgba(0, 0, 0, 0.08); } [data-theme="aurora-light"] ::-webkit-scrollbar-track { background: #f1f5f9; } [data-theme="aurora-light"] ::-webkit-scrollbar-thumb { background: #cbd5e1; } /* ---------- Solar Light — warm gold accent on cream --------------------- */ [data-theme="solar-light"] { --bg: #fffbf0; --bg-subtle: #fef7e8; --panel: #ffffff; --panel-hover: #fefce8; --border: #ddd6c0; --border-light:#e8e2d0; --text: #292524; --text-bright: #1c1917; --muted: #78716c; --accent: #b45309; --accent-dim: #b4530933; --accent2: #0369a1; --accent2-dim: #0369a133; --glow-accent: 0 0 12px #b4530922; --danger: #dc2626; --warn: #ca8a04; --ok: #15803d; --shadow: 0 2px 8px rgba(0,0,0,.06); --shadow-lg: 0 8px 32px rgba(0,0,0,.10); } [data-theme="solar-light"] body { background-image: none; } [data-theme="solar-light"] .card, [data-theme="solar-light"] .panel, [data-theme="solar-light"] .learn-library-card, [data-theme="solar-light"] article.card { background: rgba(255, 255, 255, 0.88) !important; backdrop-filter: blur(8px); border-color: rgba(0, 0, 0, 0.07) !important; box-shadow: 0 1px 4px rgba(0,0,0,0.04); } [data-theme="solar-light"] #nx-immersive-bg { background: radial-gradient(ellipse 120% 80% at 30% 20%, rgba(180, 83, 9, 0.03) 0%, transparent 60%), radial-gradient(ellipse 100% 70% at 75% 70%, rgba(3, 105, 161, 0.03) 0%, transparent 55%), linear-gradient(160deg, #fffbf0 0%, #fef7e8 40%, #fefce8 100%); } [data-theme="solar-light"] #nx-immersive-bg::before { opacity: 0.03; } [data-theme="solar-light"] #nx-nova-panel { background: rgba(255, 251, 240, 0.96); border-left-color: rgba(180, 83, 9, 0.15); } [data-theme="solar-light"] .nx-panel__title { color: #b45309; } [data-theme="solar-light"] .nav { background: rgba(255, 251, 240, 0.92); border-bottom-color: rgba(0, 0, 0, 0.06); } [data-theme="solar-light"] ::-webkit-scrollbar-track { background: #fef7e8; } [data-theme="solar-light"] ::-webkit-scrollbar-thumb { background: #d6d3c8; } /* ---------- Theme switcher in Nova panel ------------------------------ */ .nx-theme-switcher { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; } .nx-theme-btn { padding: 0.5rem 0.6rem; border-radius: 8px; border: 1px solid var(--border); background: var(--panel); color: var(--text); cursor: pointer; font-size: 0.75rem; font-weight: 600; text-align: center; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; } .nx-theme-btn:hover { border-color: var(--accent); box-shadow: 0 0 8px var(--accent-dim); } .nx-theme-btn.is-active { border-color: var(--accent); background: var(--accent-dim); color: var(--accent); } /* Swatch circles */ .nx-theme-btn__swatch { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 0.3rem; vertical-align: middle; border: 1px solid rgba(255,255,255,0.1); } /* ---------- Feedback popup --------------------------------------------- */ .nx-feedback-overlay { position: fixed; inset: 0; z-index: 9700; background: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .nx-feedback-overlay.is-open { opacity: 1; pointer-events: auto; } .nx-feedback-popup { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 1.5rem; max-width: 360px; width: 92%; box-shadow: var(--shadow-lg); } .nx-feedback__title { font-size: 1rem; font-weight: 700; color: var(--text-bright); margin-bottom: 0.25rem; } .nx-feedback__question { font-size: 0.85rem; color: var(--muted); margin-bottom: 0.75rem; line-height: 1.4; } .nx-feedback__stars { display: flex; gap: 0.35rem; margin-bottom: 0.75rem; } .nx-star-btn { background: none; border: none; cursor: pointer; font-size: 1.5rem; color: var(--border); transition: color 0.15s, transform 0.15s; padding: 0; line-height: 1; } .nx-star-btn:hover, .nx-star-btn.is-active { color: #fbbf24; transform: scale(1.15); } .nx-feedback__comment { width: 100%; padding: 0.5rem 0.65rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-subtle); color: var(--text); font-size: 0.82rem; font-family: var(--font); resize: none; margin-bottom: 0.75rem; } .nx-feedback__comment:focus { outline: none; border-color: var(--accent); } .nx-feedback__actions { display: flex; gap: 0.5rem; justify-content: flex-end; } /* ---------- Language selector in Nova panel ----------------------------- */ .nx-lang-selector { display: flex; gap: 0.35rem; flex-wrap: wrap; } .nx-lang-btn { padding: 0.35rem 0.65rem; border-radius: 6px; border: 1px solid var(--border); background: var(--panel); color: var(--text); cursor: pointer; font-size: 0.75rem; font-weight: 600; transition: border-color 0.2s, background 0.2s; } .nx-lang-btn:hover { border-color: var(--accent); } .nx-lang-btn.is-active { border-color: var(--accent); background: var(--accent-dim); color: var(--accent); } /* ======================================================================== Auto Language V1 — Toast Notification ======================================================================== */ #apex-toast-root { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9200; display: flex; flex-direction: column; gap: 0.5rem; pointer-events: none; } .apex-lang-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 0.6rem; background: var(--panel, #1a1e2e); border: 1px solid var(--accent, #6366f1); border-radius: 10px; padding: 0.85rem 1rem; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35); max-width: 360px; opacity: 0; transform: translateY(16px); transition: opacity 0.3s ease, transform 0.3s ease; } .apex-lang-toast.is-visible { opacity: 1; transform: translateY(0); } .apex-lang-toast__body { flex: 1; } .apex-lang-toast__text { font-size: 0.85rem; color: var(--text, #e2e8f0); margin-bottom: 0.55rem; display: block; } .apex-lang-toast__actions { display: flex; gap: 0.45rem; flex-wrap: wrap; } .apex-lang-toast__btn { border: 1px solid var(--border, #2d3348); background: transparent; color: var(--text, #e2e8f0); border-radius: 6px; padding: 0.3rem 0.65rem; cursor: pointer; font-size: 0.78rem; font-weight: 600; transition: background 0.2s; } .apex-lang-toast__btn:hover { background: var(--accent-dim, rgba(99, 102, 241, 0.15)); } .apex-lang-toast__confirm { border-color: var(--accent, #6366f1); color: var(--accent, #6366f1); } .apex-lang-toast__close { background: none; border: none; color: var(--muted, #64748b); font-size: 1.15rem; cursor: pointer; padding: 0; line-height: 1; } .apex-lang-toast__close:hover { color: var(--text, #e2e8f0); } .apex-lang-toast__selector { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.45rem; } .apex-lang-toast__lang-btn { border: 1px solid var(--border, #2d3348); background: transparent; color: var(--text, #e2e8f0); border-radius: 6px; padding: 0.25rem 0.55rem; cursor: pointer; font-size: 0.78rem; font-weight: 600; transition: border-color 0.2s, background 0.2s; } .apex-lang-toast__lang-btn:hover { border-color: var(--accent, #6366f1); background: var(--accent-dim, rgba(99, 102, 241, 0.15)); } /* ---------- Reduced motion ----------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .nx-feedback-overlay, .nx-theme-btn, .nx-lang-btn, .nx-star-btn, .apex-lang-toast { transition: none; } }