/* * Tema (claro/escuro) e animações compartilhadas do painel. * Mecanismo: classe `.dark` na tag (o que o Tailwind CDN com darkMode:'class' já espera). * Os valores em :root SÃO os valores escuros de hoje (nenhuma mudança visual no modo escuro). * html:not(.dark) sobrescreve para o modo claro (aditivo, novo). * * Uso: var() apenas dentro de seletores CSS puro (body, .card-panel, ::-webkit-scrollbar-thumb...). * NUNCA usar var() dentro de arbitrary value do Tailwind (ex: bg-[var(--x)]) — o modificador de * opacidade (`/50`) não funciona com var() em arbitrary value. */ :root { /* Cores base */ --bg-page: #050505; --bg-card: #111111; --bg-card-grad-start: #161616; --bg-card-grad-end: #0a0a0a; --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); --border-subtle: rgba(255, 255, 255, 0.08); --border-hover: rgba(255, 255, 255, 0.2); --text-primary: #ffffff; --text-secondary: #9ca3af; --text-muted: #6b7280; --scrollbar-thumb: #333333; --scrollbar-thumb-hover: #555555; --overlay-bg: rgba(0, 0, 0, 0.7); /* Estados/accent — únicos, consolidados (antes havia 3 vermelhos diferentes) */ --accent-success: #2ecc71; --accent-danger: #ef4444; --accent-danger-bg-start: #1a0a0a; --accent-danger-bg-end: #0d0505; --accent-danger-text: #f87171; --accent-warning: #ffcc00; --accent-info: #38bdf8; /* Modo TV — barras de progresso (estilo stories) */ --tv-bar-track: rgba(255, 255, 255, 0.25); --tv-bar-fill: #ffffff; /* Timings de animação — famílias já existentes no projeto, preservadas (não colapsadas) */ --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1); --duration-entrance: 0.8s; --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-spring: 0.3s; --duration-fade: 0.3s; --duration-fast: 0.2s; } html:not(.dark) { --bg-page: #f3f4f6; --bg-card: #ffffff; --bg-card-grad-start: #ffffff; --bg-card-grad-end: #f9fafb; --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); --border-subtle: rgba(0, 0, 0, 0.1); --border-hover: rgba(0, 0, 0, 0.25); --text-primary: #111827; --text-secondary: #4b5563; --text-muted: #6b7280; --scrollbar-thumb: #cbd5e1; --scrollbar-thumb-hover: #94a3b8; --overlay-bg: rgba(0, 0, 0, 0.4); --accent-danger-bg-start: #fef2f2; --accent-danger-bg-end: #fee2e2; --accent-danger-text: #b91c1c; --tv-bar-track: rgba(0, 0, 0, 0.15); --tv-bar-fill: #111827; } /* Classes escopadas novas — só para páginas sem seletor centralizado de fundo (index.html, aips.html) */ .bg-page { background-color: var(--bg-page); } /* Animação de entrada — substitui @keyframes duplicados (cardEntrance/fadeUp) por uma base única */ @keyframes theme-entrance-fade { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes theme-entrance-fade-scale { from { opacity: 0; transform: translateY(40px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } .animate-entrance { opacity: 0; animation: theme-entrance-fade var(--duration-entrance) var(--ease-entrance) forwards; } .animate-entrance-scale { opacity: 0; animation: theme-entrance-fade-scale var(--duration-entrance) var(--ease-entrance) forwards; } /* * Cartão com efeito 3D de sombra deslocada — compartilhado entre index.html (seletor de projeto) * e prj-sesi.html (hub de módulos). Sombra inverte com o tema (clara no escuro, escura no claro). */ .animate-card { opacity: 0; animation: theme-entrance-fade-scale var(--duration-entrance) var(--ease-entrance) forwards; } .card-shadow-bg { background-color: var(--text-primary); border-radius: 1.25rem; transform: translate(12px, 12px); transition: transform var(--duration-spring) var(--ease-spring); } .card-front { background: linear-gradient(145deg, var(--bg-card-grad-start), var(--bg-card-grad-end)); border: 1px solid var(--border-subtle); border-radius: 1.25rem; transition: transform var(--duration-spring) var(--ease-spring), border-color 0.3s; } .group:hover .card-shadow-bg { transform: translate(16px, 16px); } .group:hover .card-front { transform: translate(-4px, -4px); border-color: var(--border-hover); } .group:active .card-front { transform: translate(4px, 4px); } .group:active .card-shadow-bg { transform: translate(6px, 6px); } /* Cartões desabilitados (projeto ainda não disponível) */ .card-disabled .card-shadow-bg { background-color: #222222; } html:not(.dark) .card-disabled .card-shadow-bg { background-color: #d1d5db; } .card-disabled .card-front { opacity: 0.7; } /* * Modo TV — barras de progresso no topo (estilo stories) + botão de saída, * injetados via JS (tv-mode.js) nas páginas de módulo. E o switch claro/escuro * usado no modal de confirmação (index.html). */ body.tv-mode-active { padding-top: 4rem; } .tv-bar-track { height: 4px; border-radius: 9999px; background-color: var(--tv-bar-track); overflow: hidden; } .tv-bar-fill { height: 100%; width: 0%; border-radius: 9999px; background-color: var(--tv-bar-fill); } .tv-exit-btn { width: 32px; height: 32px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; background-color: var(--overlay-bg); color: var(--text-primary); font-size: 16px; border: none; cursor: pointer; transition: background-color var(--duration-fast) ease; } .tv-exit-btn:hover { background-color: var(--border-hover); } .tv-switch { display: inline-flex; cursor: pointer; } .tv-switch input { display: none; } .tv-switch-track { position: relative; width: 64px; height: 32px; border-radius: 9999px; background-color: var(--bg-card); border: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: space-between; padding: 0 8px; transition: background-color var(--duration-fast) ease; } .tv-switch-icon { position: relative; z-index: 1; font-size: 14px; color: var(--text-muted); } .tv-switch-thumb { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background-color: var(--text-primary); transition: transform var(--duration-spring) var(--ease-spring); } .tv-switch input:checked+.tv-switch-track .tv-switch-thumb { transform: translateX(32px); } /* Respeita a preferência do sistema por menos movimento — neutraliza toda animação/transição do projeto */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }