/* ================================================================= Tema EXCLUSIVO da tela de login — Copa do Mundo (cores oficiais) ----------------------------------------------------------------- Carregado DEPOIS do login_neo.css; apenas sobrepõe o tema base (que permanece intacto e reutilizável). Toda a personalização desta página vive aqui. Cores oficiais: verde #009B1F azul #005FDF azul-escuro #0D1B42 amarelo #FFC100 cinza #9C9C9C preto #000000 ================================================================= */ /* --- Paleta oficial (sobrescreve as vars do tema neo) --- */ :root { --neo-green: #009B1F; --neo-green-bright: #00B826; --neo-blue: #005FDF; --neo-navy: #0D1B42; --neo-yellow: #FFC100; --neo-gray: #9C9C9C; --neo-bg: #05080F; /* fundo azul-escuro bem profundo */ --neo-bg-card: rgba(5, 8, 15, 0.85); --neo-accent: var(--neo-green); /* verde: botão */ --neo-accent-hover: var(--neo-green-bright); --neo-accent-glow: rgba(255, 193, 0, 0.40); /* brilho amarelo */ --neo-text: #f3f5f6; --neo-text-muted: #9aa6c2; /* cinza-azulado (combina c/ navy) */ --neo-border: rgba(255, 193, 0, 0.32); /* borda amarela suave (destaque) */ --neo-border-focus: rgba(255, 193, 0, 0.85); /* foco amarelo forte */ /* Altura comum às duas logos (TSMX + CBF). Ambas as imagens estão aparadas (sem padding transparente), então mesma altura de caixa = mesma altura visível = logos alinhadas. Coeficiente dimensionado para as DUAS logos caberem na metade esquerda já descontando o gap até o divisor. */ --logo-h: clamp(80px, 9vw, 130px); /* Folga generosa entre o divisor central e os elementos de cada lado (mesmo conceito do login.html, que usa padding-right/left de 100px). */ --copa-gap: clamp(36px, 5vw, 80px); } /* --- Fundo: azul (esquerda) + laranja neo (direita) --------------- Azul e laranja são complementares: sobrepostos com transparência viram cinza (média das cores). Para ganhar CONTRASTE, separamos as regiões — azul na ESQUERDA (atrás das logos) e laranja na DIREITA (atrás do form) — com o fundo escuro no centro fazendo a transição, sem mistura acinzentada. Raios contidos (transparent ~40%) evitam que uma cor invada a área da outra. */ body { background: radial-gradient(circle at 8% 18%, rgba(0, 110, 240, 0.36), transparent 40%), /* azul (sup. esq.) */ radial-gradient(circle at 24% 118%, rgba(0, 60, 190, 0.30), transparent 46%), /* azul profundo (base esq.) */ radial-gradient(circle at 94% 24%, rgba(235, 120, 30, 0.30), transparent 40%), /* laranja neo (sup. dir.) */ radial-gradient(circle at 99% 86%, rgba(235, 120, 30, 0.20), transparent 44%), /* laranja neo (inf. dir.) */ var(--neo-bg) !important; background-attachment: fixed; } /* "Constelação" do loginbg.png: era laranja; recolorimos para AZUL com hue-rotate (remove qualquer tom laranja) e mix-blend-mode: screen descarta o fundo escuro da imagem, deixando só os pontos/linhas (agora azuis). */ body::before { filter: hue-rotate(195deg) saturate(1.2); mix-blend-mode: screen; opacity: 0.5; background-color: transparent !important; /* remove a base opaca do tema neo */ } /* --- Centralização: bloco logos+form um pouco ACIMA do centro vertical ---- O excedente de padding embaixo (vs em cima) desloca o conteúdo centralizado ~4,5vh para cima — discreto. O footer é absoluto (fora deste fluxo), então continua ancorado no rodapé. */ .conten-wraper { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem 0 calc(1.5rem + 9vh); } /* No desktop, split 50/50 (col-lg-6) com o divisor no centro. Reproduzimos as proporções do login.html: gap generoso (--copa-gap) entre o divisor e os elementos de cada lado (via padding nas colunas) e formulário compacto. */ @media (min-width: 992px) { /* Logos recuam do divisor pela direita (ficam alinhadas à direita do espaço restante). Remove a border-right AMARELA herdada do login_neo.css (que usa --neo-border) — o único divisor é o #login::before (azul), abaixo. */ #logo { padding-right: var(--copa-gap); border-right: none !important; } /* Formulário afastado do divisor pela esquerda (mesma folga das logos). */ #login { padding-left: var(--copa-gap); position: relative; } /* Divisor central dedicado: linha vertical no limite das colunas (centro da página), centralizada VERTICALMENTE em relação ao formulário e um pouco mais alta. Substitui a border-right do #logo, que seguia a altura das logos e por isso ficava desalinhada do form. Azul discreto. */ #login::before { content: ''; position: absolute; left: 0; /* +10px acompanha o deslocamento do form (margin-top 20 -> desce ~10px), mantendo o divisor centrado no formulário. */ top: calc(50% + 10px); transform: translateY(-50%); width: 1px; height: clamp(285px, 36vh, 400px); background: rgba(90, 140, 230, 0.16); } /* Form compacto (não preenche a coluna), alinhado logo após o gap. */ #login .form-row { max-width: 400px; } /* Desce o formulário só um pouco em relação às logos. */ #login .form-cont { margin-top: 20px; } } /* --- Versão: fixada no fim da página (em vez de colada ao centro) --- .conten-wraper é position: relative (tema neo) e ocupa 100vh, então a footer absoluta ancora no rodapé; sai do fluxo e deixa o bloco logos+form centralizado. */ .footer { position: absolute; left: 0; right: 0; bottom: clamp(2rem, 4.5vh, 4rem); /* um pouco mais acima do rodapé */ margin: 0 !important; } /* --- Lockup das logos: TSMX (esquerda) + CBF (direita), mesma altura --- */ .copa-logo-row { display: flex; align-items: center; justify-content: flex-end; /* desktop: encosta no divisor central */ gap: clamp(16px, 2vw, 28px); } .copa-logo-row img { height: var(--logo-h); width: auto; max-width: none; } /* TSMX: wordmark branco, SEM glow (apenas a imagem limpa sobre o fundo). */ .copa-logo-tsmx { filter: none; } /* CBF: um pouco maior que o TSMX (1.12), a pedido. Ambas as imagens estão aparadas, então a CBF fica levemente mais alta, centralizada na linha. Sem glow colorido — só uma sombra bem sutil de profundidade. */ .copa-logo-row .copa-logo-cbf { height: calc(var(--logo-h) * 1.12); margin-bottom: 14px; } .copa-logo-cbf { filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.40)); } /* Divisor vertical amarelo (destaque) entre as logos */ .copa-logo-divider { flex: 0 0 auto; width: 2px; height: calc(var(--logo-h) * 0.6); border-radius: 2px; background: linear-gradient( to bottom, transparent, var(--neo-yellow) 30%, var(--neo-yellow) 70%, transparent ); } /* Lockup no mobile: centralizado e menor, exibido acima do formulário */ .copa-logo-row--mobile { width: 100%; --logo-h: clamp(60px, 16vw, 92px); justify-content: center; gap: clamp(12px, 4vw, 20px); margin-bottom: 10px; } .copa-logo-row--mobile .copa-logo-tsmx { filter: none; } /* --- Destaque ao amarelo: ícones do formulário em amarelo --- */ .input-group-text .oi { color: var(--neo-yellow) !important; } /* Form com mais destaque AMARELO: foco com fundo e anel amarelos. */ .input-group:focus-within, .input-group:hover { background: rgba(255, 193, 0, 0.08) !important; /* leve amarelo */ box-shadow: 0 0 0 3px rgba(255, 193, 0, 0.22) !important; /* anel amarelo forte */ } /* Botão "Acessar" VERDE (cor pedida), texto branco. O brilho amarelo no hover mantém o destaque amarelo do conjunto (junto com as bordas/ícones do form). */ #entrar { background: var(--neo-green) !important; border: 1px solid var(--neo-green) !important; color: #fff !important; box-shadow: 0 4px 15px rgba(0, 155, 31, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important; } #entrar:hover { background: var(--neo-green-bright) !important; border-color: var(--neo-green-bright) !important; box-shadow: 0 6px 26px rgba(255, 193, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.20) !important; } #entrar:active { box-shadow: 0 2px 10px rgba(0, 155, 31, 0.38) !important; } /* --- Bandeira do Brasil no footer, pequena e tremulando como tecido ------- O efeito de "pano" vem de filtros SVG (#cfw0..#cfw7: feTurbulence + feDisplacementMap, cada um um quadro de ondulação). A animação CSS abaixo alterna esses filtros (flipbook) — feito em CSS (não SMIL) para funcionar de forma consistente em todos os navegadores, inclusive Safari. Por cima, um balanço bem leve simula o vento. */ .copa-flag { display: block; height: 26px; width: auto; margin: 0 auto; border-radius: 2px; transform-origin: 50% 50%; filter: url(#cfw0); animation: copa-flag-flip 1.6s steps(1) infinite, copa-flag-sway 4s ease-in-out infinite; will-change: filter, transform; } /* Flipbook: troca o filtro de tecido a cada quadro -> ondulação percorrendo o pano. */ @keyframes copa-flag-flip { 0% { filter: url(#cfw0); } 12.5% { filter: url(#cfw1); } 25% { filter: url(#cfw2); } 37.5% { filter: url(#cfw3); } 50% { filter: url(#cfw4); } 62.5% { filter: url(#cfw5); } 75% { filter: url(#cfw6); } 87.5% { filter: url(#cfw7); } 100% { filter: url(#cfw0); } } @keyframes copa-flag-sway { 0%, 100% { transform: rotate(-1deg) translateX(-0.5px); } 50% { transform: rotate(1deg) translateX(0.5px); } } /* Acessibilidade: sem animação e sem distorção para movimento reduzido. */ @media (prefers-reduced-motion: reduce) { .copa-flag { animation: none; filter: none; } } /* --- Responsivo: reduz a altura das logos no mobile pequeno --- */ @media (max-width: 575.98px) { .copa-logo-row--mobile { --logo-h: clamp(50px, 17vw, 72px); gap: 12px; } }