/* ════════════════════════════════════════════════════════════════════════ Skull Concursos — Sistema de temas Tema padrao: "escuro" (preto, definido no :root de cada pagina). Tema alternativo: "cinza" (charcoal) — mais suave e amigavel aos olhos. Ativado via atributo data-theme="gray" no (ver theme.js). Observacao: usamos seletores com especificidade maior que o :root da pagina (:root[data-theme="gray"]) para sobrescrever as variaveis sem depender da ordem de carregamento dos estilos. ════════════════════════════════════════════════════════════════════════ */ /* ─── Paleta do tema cinza ──────────────────────────────────────────────── */ :root[data-theme="gray"] { --color-primary: #ffffff; --color-accent: #fbbf24; --color-bg: #1e1f23; /* charcoal — substitui o quase-preto #030303 */ --color-surface: #2a2b31; /* superficie de cards/paineis */ --color-border: rgba(255, 255, 255, 0.14); --color-text: #f0f0f2; /* texto claro, alto contraste no cinza */ --color-muted: #adadb6; /* texto secundario mais legivel que no preto */ } /* ─── Ajustes em superficies/decoracoes com cores fixas (hardcoded) ─────── */ /* Estas classes sao compartilhadas entre as paginas e usam literais escuros que nao seguem as variaveis; aqui as realinhamos ao tema cinza. */ :root[data-theme="gray"] body { background-color: #1e1f23; } :root[data-theme="gray"] .bg-vignette { background: radial-gradient(circle at center, transparent 0%, #141519 100%); } :root[data-theme="gray"] .bg-glow-top { background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.07) 0%, transparent 60%); } :root[data-theme="gray"] .panel { background: rgba(42, 43, 49, 0.85); border-color: rgba(255, 255, 255, 0.10); } /* Scrollbar */ :root[data-theme="gray"] ::-webkit-scrollbar-track { background: #26272c; } :root[data-theme="gray"] ::-webkit-scrollbar-thumb { background: #4a4b53; } :root[data-theme="gray"] ::-webkit-scrollbar-thumb:hover { background: #5c5d66; } /* ─── Botao flutuante de troca de tema ──────────────────────────────────── */ .skull-theme-toggle { position: fixed; left: 20px; bottom: 20px; z-index: 9999; display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px 9px 12px; border-radius: 999px; border: 1px solid var(--color-border, rgba(255, 255, 255, 0.12)); background: var(--color-surface, #0a0a0a); color: var(--color-text, #e8e8e6); font-family: var(--font-primary, 'Inter', -apple-system, 'Segoe UI', sans-serif); font-size: 12px; font-weight: 600; line-height: 1; cursor: pointer; box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45); transition: transform 0.16s ease, background 0.2s ease, border-color 0.2s ease; } .skull-theme-toggle:hover { transform: translateY(-2px); border-color: var(--color-accent, #fbbf24); } .skull-theme-toggle:focus-visible { outline: 2px solid var(--color-accent, #fbbf24); outline-offset: 2px; } .skull-theme-toggle .theme-toggle-dot { width: 13px; height: 13px; border-radius: 50%; background: linear-gradient(135deg, #fbbf24, #f59e0b); box-shadow: 0 0 8px rgba(251, 191, 36, 0.55); flex: none; } :root[data-theme="gray"] .skull-theme-toggle .theme-toggle-dot { background: linear-gradient(135deg, #c7ccd4, #8b919c); box-shadow: 0 0 8px rgba(170, 176, 186, 0.5); } .skull-theme-toggle .theme-toggle-label { letter-spacing: 0.01em; white-space: nowrap; } @media (max-width: 480px) { .skull-theme-toggle { left: 16px; bottom: 16px; padding: 8px 13px 8px 10px; font-size: 11px; } } /* ════════════════════════════════════════════════════════════════════════ Animacao de transicao de tema - Navegadores com View Transitions API: revelacao circular a partir do botao. - Demais navegadores: transicao suave de cores (classe temporaria). - Respeita prefers-reduced-motion. ════════════════════════════════════════════════════════════════════════ */ /* Fallback: transicao suave aplicada apenas durante a troca (classe temporaria) */ :root.skull-theme-animating, :root.skull-theme-animating *, :root.skull-theme-animating *::before, :root.skull-theme-animating *::after { transition: background-color 0.45s ease, background 0.45s ease, border-color 0.45s ease, color 0.45s ease, fill 0.45s ease, stroke 0.45s ease, box-shadow 0.45s ease !important; } /* View Transitions: revelacao circular do novo tema sobre o antigo. (Regras de ::view-transition-* sao ignoradas por navegadores sem suporte.) */ ::view-transition-old(root) { animation: none; } ::view-transition-new(root) { animation: skull-theme-reveal 0.5s cubic-bezier(0.16, 1, 0.3, 1); z-index: 1; } @keyframes skull-theme-reveal { from { clip-path: circle(0% at var(--vt-x, 50%) var(--vt-y, 50%)); } to { clip-path: circle(140% at var(--vt-x, 50%) var(--vt-y, 50%)); } } /* Acessibilidade: sem movimento para quem prefere */ @media (prefers-reduced-motion: reduce) { :root.skull-theme-animating, :root.skull-theme-animating *, :root.skull-theme-animating *::before, :root.skull-theme-animating *::after { transition: none !important; } ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; } }