/* ========================================================================== CONFIGURAÇÕES GLOBAIS ========================================================================== */ /* Define a fonte padrão para toda a página (A fonte 'Poppins' é importada no dos arquivos HTML) */ body { font-family: 'Poppins', sans-serif; } /* ========================================================================== ANIMAÇÕES DO CARD DE LOGIN (FORMAS INTERNAS) Onde editar no HTML: divs com classes .shape-1, .shape-2 e .shape-3 dentro do painel esquerdo em 'templates/login/index.html'. ========================================================================== /* Animação de flutuação vertical simplificada e leve */ @keyframes float { 0% { transform: translate3d(0, 0, 0); } 33% { transform: translate3d(0, -30px, 0); } 66% { transform: translate3d(0, 20px, 0); } 100% { transform: translate3d(0, 0, 0); } } /* Animação de deslize horizontal simplificada com leve rotação */ @keyframes slide { 0% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(20px, 0, 0) rotate(5deg); } 100% { transform: translate3d(0, 0, 0) rotate(0deg); } } /* Aplicação das animações nas formas geométricas decorativas */ .shape-1 { animation: float 8s ease-in-out infinite; will-change: transform; } .shape-2 { animation: float 12s ease-in-out infinite reverse; will-change: transform; } /* Executa ao contrário para criar contraste, centralizado com margens */ .shape-3 { left: 50%; top: 50%; margin-left: -160px; /* -w-80 / 2 */ margin-top: -160px; /* -h-80 / 2 */ animation: slide 10s ease-in-out infinite; will-change: transform; } /* ====================================================================================== PLANO DE FUNDO (BOLHAS COLORIDAS BLUR ESTÁTICAS) As bolhas coloridas de fundo agora são estáticas para garantir 100% de performance e resposta instantânea aos cliques no navegador, mantendo o visual rico e vibrante. =================================================================================== */ /* ========================================================================== PLANO DE FUNDO - MALHA DE GRID (.grid-bg) Cria um efeito sutil de linhas de grade (grid) roxas cruzadas no plano de fundo, proporcionando profundidade visual e um aspecto técnico/moderno à interface. ========================================================================== */ .grid-bg { background-image: linear-gradient(rgba(147, 51, 234, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(147, 51, 234, 0.07) 1px, transparent 1px); background-size: 113px 75px; } /* ========================================= BOTÃO NEON EXTREMAMENTE LEVE E OTIMIZADO ========================================= */ .neon-btn { position: relative; background: linear-gradient(135deg, #7c3aed, #8b5cf6, #6d28d9); /* Sombra normal leve */ box-shadow: 0 10px 25px rgba(124, 58, 237, 0.25); /* Transição suave de transformação simples */ transition: transform .25s cubic-bezier(0.4, 0, 0.2, 1); isolation: isolate; } /* GPU Shadow Trick: Sombra extra de hover isolada via opacidade */ .neon-btn::after { content: ""; position: absolute; inset: 0; border-radius: 1rem; box-shadow: 0 15px 35px rgba(124, 58, 237, 0.35), 0 0 20px rgba(217, 70, 239, 0.25); opacity: 0; transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1); z-index: -1; pointer-events: none; } .neon-btn:hover { transform: translateY(-2px); } .neon-btn:hover::after { opacity: 1; } .neon-btn:active { transform: translateY(0); }