/* /assets/css/matrix.css */ /* Este arquivo define as cores e estilos para o tema "Matrix". */ /* Ele é ativado quando o elemento tem a classe .matrix-theme */ @import url('https://fonts.googleapis.com/css2?family=Cutive+Mono&display=swap'); html.matrix-theme { /* Redefinição das variáveis de cor do :root para o tema Matrix */ --background-dark: #000000; --sidebar-bg: #040404; --card-bg: #080808; --border-color: #003b00; /* Verde escuro */ --primary-accent: #00ff00; /* Verde brilhante */ --primary-accent-hover: #32ff32; /* Verde mais claro */ --text-light: #00ff00; --text-dark: #008f00; /* Verde médio */ --favorite-red: #00ff00; /* Corações também ficam verdes */ /* Efeito de scanline sutil no fundo */ --scanline-bg: linear-gradient( to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 50%, rgba(0, 255, 0, 0.05) 50%, rgba(0, 255, 0, 0.1) ); --scanline-size: 4px; } @keyframes matrix-flicker { 0% { opacity: 1; } 50% { opacity: 0.95; } 100% { opacity: 1; } } @keyframes matrix-text-glow { from { text-shadow: 0 0 5px #00ff00, 0 0 10px #00ff00, 0 0 15px #00ff00; } to { text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00; } } html.matrix-theme body { font-family: 'Cutive Mono', monospace; /* Fonte estilo terminal */ text-shadow: 0 0 2px var(--primary-accent); background-color: var(--background-dark); color: var(--text-light); /* Aplica o efeito de scanline */ background-image: var(--scanline-bg); background-size: 100% var(--scanline-size); animation: matrix-flicker 0.15s infinite; } /* Ajustes gerais de componentes para o tema Matrix */ /* Menu Lateral */ html.matrix-theme #sidebar { border-right: 1px solid var(--border-color); box-shadow: 5px 0 15px -5px rgba(0, 255, 0, 0.2); border-radius: 0; } html.matrix-theme #sidebar, html.matrix-theme header { background-color: rgba(5, 5, 5, 0.8); backdrop-filter: blur(4px); } html.matrix-theme .sidebar-link { border-radius: 0; border-left: 2px solid transparent; transition: all 0.3s; } html.matrix-theme .sidebar-link:hover { background-color: rgba(0, 255, 0, 0.1); color: var(--primary-accent-hover); border-left: 2px solid var(--primary-accent); } html.matrix-theme .sidebar-link.active { color: #000; background-color: var(--primary-accent); box-shadow: 0 0 15px var(--primary-accent); border-left: 2px solid var(--primary-accent); text-shadow: none; /* CORREÇÃO: Remove o brilho verde do texto preto */ } html.matrix-theme .sidebar-link.active .link-icon { animation: none; /* CORREÇÃO: Remove o brilho do ícone para não interferir */ } /* Cabeçalho */ html.matrix-theme header { border-bottom: 1px solid var(--border-color); } html.matrix-theme #header-points-block, html.matrix-theme #header-user-info, html.matrix-theme #notification-bell, html.matrix-theme #search-modal-trigger { border: 1px solid var(--border-color); background-color: #000; } html.matrix-theme #header-points-block:hover, html.matrix-theme #header-user-info:hover, html.matrix-theme #notification-bell:hover, html.matrix-theme #search-modal-trigger:hover { background-color: #001f00; border-color: var(--primary-accent); box-shadow: 0 0 8px var(--primary-accent); } /* Conteúdo Principal e Cards */ html.matrix-theme .bg-slate-800 { background-color: var(--card-bg) !important; border: 1px solid var(--border-color); } html.matrix-theme .border-slate-700 { border-color: var(--border-color) !important; } html.matrix-theme .text-gray-400 { color: #ffffff !important; /* CORREÇÃO: Texto secundário branco para melhor contraste */ text-shadow: 0 0 5px rgba(255, 255, 255, 0.5) !important; /* Brilho branco sutil */ } html.matrix-theme .text-white { color: var(--text-light) !important; } html.matrix-theme .rounded-lg, html.matrix-theme .rounded-full, html.matrix-theme .rounded-md, html.matrix-theme .rounded { border-radius: 0 !important; /* Estilo mais "quadrado" */ } /* Botões e Inputs */ html.matrix-theme .btn-login-glow, html.matrix-theme .btn-acquire-premium, html.matrix-theme .category-parent { border-radius: 0 !important; color: #000 !important; /* CORREÇÃO: Texto preto para contraste */ background: var(--primary-accent) !important; box-shadow: 0 0 10px var(--primary-accent) !important; border: 1px solid var(--primary-accent) !important; transition: all 0.3s; text-shadow: none !important; /* CORREÇÃO: Remove o brilho verde do texto preto */ } html.matrix-theme .btn-login-glow:hover, html.matrix-theme .btn-acquire-premium:hover, html.matrix-theme .category-parent:hover { background: var(--primary-accent-hover) !important; box-shadow: 0 0 20px var(--primary-accent-hover) !important; } /* NOVO: Garante que o badge "Grátis" e similares tenham texto branco */ html.matrix-theme .badge-free { /* Usando uma classe suposta para o badge */ color: #ffffff !important; text-shadow: none !important; } html.matrix-theme input, html.matrix-theme select, html.matrix-theme textarea { background-color: #000 !important; border: 1px solid var(--border-color) !important; color: var(--text-light) !important; border-radius: 0 !important; } html.matrix-theme input:focus, html.matrix-theme select:focus, html.matrix-theme textarea:focus { outline: none !important; border-color: var(--primary-accent) !important; box-shadow: 0 0 8px var(--primary-accent) !important; } /* Scrollbar */ html.matrix-theme #main-scroll-area::-webkit-scrollbar-thumb { background-color: var(--text-dark); border-radius: 0; border: 1px solid var(--primary-accent); } html.matrix-theme #main-scroll-area::-webkit-scrollbar-thumb:hover { background-color: var(--primary-accent); } /* Relógio */ html.matrix-theme .clock-glow { text-shadow: 0 0 5px var(--primary-accent), 0 0 10px var(--primary-accent); } /* Rodapé */ html.matrix-theme .main-footer::before { display: none; /* Remove o efeito aurora, pois temos o digital rain */ }