/* ========================================================= NOVO EPI – TABELA FINAL (colar por último para sobrescrever) ========================================================= */ /* LOGIN – fundo tela inteira (body) apenas na tela de login - Usa :has() para aplicar a imagem quando #loginSection existe - Mantém fallback via #loginSection::before ============================================================ */ /* Garante altura real de viewport */ html, body { height: 100%; min-height: 100dvh; } /* Quando a tela de login estiver presente, o mostra a imagem em tela cheia */ /* body:has() rule removed for broader browser compatibility. Fallback: #loginSection::before provides the fullscreen background. */ /* body:has(#loginSection.login-section){ background: transparent !important; } */ /* Camada de imagem por trás de todo o conteúdo (apenas na tela de login) */ /* removed: body:has(...)::before */ /* Fallback antigo caso :has não esteja disponível (continua funcionando) */ #loginSection{ position: relative; z-index: 0; } #loginSection::before{ content: ""; position: fixed; inset: 0; background: url('../img/telainicial.png') center center / cover no-repeat; z-index: -1; } /* ======================================================= FIX: Remover imagem dentro do bloco de login - Mantém somente o fundo em tela cheia aplicado no - Garante que #loginSection não injete a imagem novamente ======================================================= */ /* removed: disabling of #loginSection::before */ /* ====================================================== LOGIN – ajuste de espaçamento e título centralizado ====================================================== */ /* Ajustes antigos de form/button removidos — o espaçamento agora é gerido por .login-panel no bloco final */ /* Removido: centralização do pseudo-título antigo (::after) — usamos o bloco final para títulos quando necessário */ /* #loginSection.login-section::after { ... } */ /* ============================================================ LOGIN – imagem SOMENTE quando a página de login estiver ativa (SPA: usa .page.active para visibilidade) ============================================================ */ /* Fundo neutro por padrão nas demais telas */ body{ background:#f5f7fa !important; /* mantém padrão do app */ } /* Desliga QUALQUER imagem que esteja no body por regras antigas */ /* removed: body::before */ /* Ativa a imagem de fundo APENAS quando #loginSection .page.active estiver visível */ /* removed: body:has(...)::before */ /* Garante que o próprio #loginSection não injete a imagem (fica transparente) */ /* removed: disabling of #loginSection::before */ /* === App default background (no image outside login) === */ body { background:#f5f7fa !important; } /* ======================================================= LOGIN – imagem full-screen SOMENTE no login ======================================================= */ #loginSection { position: relative; z-index: 0; } /* full-bleed background attached to the login section only */ #loginSection::before{ content:""; position: fixed; inset: 0; background: url('../img/telainicial.png') center center / cover no-repeat; z-index: -1; /* sits behind the login fields */ pointer-events: none; } /* ====================================================== LOGIN — Bloco final (atualizado Parte 3) - Container + fundo (gradiente + imagem) - Grid 2 colunas (.login-layout) com .login-left e .login-right - Card oficial: .login-panel - Tipografia e responsividade ====================================================== */ #loginSection { position: relative; width: 100vw; height: 100vh; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: transparent; box-shadow: none; border: 0; } #loginSection::before { content: ""; position: fixed; inset: 0; background: linear-gradient(120deg, rgba(15,23,42,0.90) 0%, rgba(15,23,42,0.75) 42%, rgba(15,23,42,0.35) 70%, rgba(15,23,42,0.05) 100%), url('../img/telainicial.png') center center / cover no-repeat; z-index: -1; pointer-events: none; } #loginSection .login-layout { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: clamp(32px, 7vw, 80px); width: 100%; max-width: 1120px; margin: 0 auto; padding: clamp(24px, 4vw, 40px) clamp(20px, 4vw, 56px); align-items: center; } #loginSection .login-left { display: flex; flex-direction: column; gap: 24px; color: #e5e7eb; } #loginSection .login-right { color: #e5e7eb; } #loginSection .login-panel { background: rgba(0, 0, 0, 0.45); /* escurecido levemente para destacar o card */ backdrop-filter: blur(18px); /* blur aumentado para efeito mais elegante */ -webkit-backdrop-filter: blur(18px); border-radius: 20px; padding: 30px 32px; /* aumentado 24 -> 32 nas laterais */ max-width: 420px; /* garante que nada extrapola */ box-shadow: 0 22px 50px rgba(15,23,42,0.85); width: min(400px, 100%); } #loginSection .login-panel form { display: flex; flex-direction: column; gap: 10px; } #loginSection .login-panel label { display: block; margin: 6px 0 4px; font-size: 13px; color: rgba(255,255,255,0.95); font-weight: 600; } #loginSection .login-panel input[type="text"], #loginSection .login-panel input[type="email"], #loginSection .login-panel input[type="password"] { width: calc(100% - 4px); /* evita encostar nas bordas do card */ padding: 10px 14px; box-sizing: border-box; border-radius: 999px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.96); color: #0f172a; font-size: 14px; } #loginSection .login-panel input:focus { outline: none; box-shadow: 0 6px 22px rgba(3,102,214,0.14); border-color: rgba(59,130,246,0.9); } #loginSection .btn-login { padding: 12px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.15); /* borda azul mais marcante */ background: #2563eb; color: #fff; font-weight: 700; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, background .12s ease; box-shadow: 0 10px 30px rgba(37,99,235,0.22); } #loginSection .btn-login:hover { transform: translateY(-1px); background: #1d4ed8; box-shadow: 0 8px 20px rgba(59,130,246,0.35); /* glow suave */ } #loginSection .btn-login:active { transform: translateY(0); box-shadow: 0 6px 14px rgba(59,130,246,0.25); } #loginSection .login-title { margin:0 0 6px 0; font-size:22px; font-weight:700; letter-spacing: 0.5px; color:#fff; } #loginSection .login-subtitle { margin:0 0 12px 0; color: rgba(235,245,255,0.88); font-size:13px; } #loginSection .login-link { display:block; margin-top:8px; text-align:center; color: rgba(255,255,255,0.9); text-decoration: underline; font-size:13px; } #loginSection .login-footnote { margin-top:14px; font-size:12px; color: rgba(255,255,255,0.72); text-align:center; } #loginSection .login-hero-text { font-size:20px; line-height:1.2; font-weight:700; } #loginSection .hero-badge { display:inline-block; padding:6px 10px; border-radius:999px; background: rgba(255,255,255,0.06); color:#fff; font-weight:700; font-size:13px; margin-bottom:12px; } @media (max-width: 900px) { #loginSection { align-items: flex-start; } #loginSection .login-layout { grid-template-columns: minmax(0, 1fr); justify-items: center; padding: 20px; } #loginSection .login-left, #loginSection .login-right { width: 100%; } #loginSection .login-left { order: 1; } #loginSection .login-right { order: 2; } } @media (max-width: 480px) { #loginSection::before { background-position: center top; } #loginSection .login-panel { padding: 16px; border-radius: 12px; } #loginSection .login-title { font-size: 18px; } } /* fim do bloco LOGIN — Parte 3 */ /* ========================= LOGIN – layout novo (2 colunas) + fundo ========================= */ #loginSection { position: relative; width: 100vw; height: 100vh; min-height: 100vh; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; background: transparent; box-shadow: none; border: 0; } /* Fundo em tela cheia atrás do conteúdo */ #loginSection::before { content: ""; position: fixed; inset: 0; background: linear-gradient(120deg, rgba(15, 23, 42, 0.90) 0%, rgba(15, 23, 42, 0.75) 42%, rgba(15, 23, 42, 0.35) 70%, rgba(15, 23, 42, 0.05) 100%), url("../img/telainicial.png") center center / cover no-repeat; z-index: -1; pointer-events: none; } /* Wrapper principal em 2 colunas */ #loginSection .login-layout { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: clamp(32px, 7vw, 80px); width: 100%; max-width: 1120px; margin: 0 auto; padding: clamp(24px, 4vw, 40px) clamp(20px, 4vw, 56px); align-items: center; } /* Coluna esquerda: marca + card */ #loginSection .login-left { display: flex; flex-direction: column; gap: 24px; color: #e5e7eb; } /* Marca */ #loginSection .login-brand { display: flex; flex-direction: column; gap: 4px; } #loginSection .brand-name { font-size: 26px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } #loginSection .brand-slogan { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.85; } /* Card de login */ #loginSection .login-panel { background: rgba(0, 0, 0, 0.40); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: 20px; padding: 24px 24px 20px; box-shadow: 0 22px 50px rgba(15, 23, 42, 0.85); width: min(400px, 100%); } /* Título e subtítulo */ #loginSection .login-title { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: #f9fafb; } #loginSection .login-subtitle { margin: 6px 0 18px; font-size: 13px; color: #cbd5f5; } /* Formulário interno */ #loginSection .login-panel form { display: flex; flex-direction: column; gap: 10px; } /* Labels apenas dentro do card de login */ #loginSection .login-panel label { font-size: 13px; font-weight: 500; margin-bottom: 2px; } /* Inputs estilizados (pill) – só no login */ #loginSection .login-panel input[type="text"], #loginSection .login-panel input[type="password"] { width: calc(100% - 4px); /* evita encostar nas bordas do card */ padding: 10px 14px; box-sizing: border-box; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.9); background: rgba(15, 23, 42, 0.82); color: #e5e7eb; font-size: 14px; outline: none; transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, transform 0.08s ease; } #loginSection .login-panel input::placeholder { color: rgba(148, 163, 184, 0.9); } #loginSection .login-panel input:focus { border-color: #3b82f6; background: rgba(15, 23, 42, 0.96); box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.7), 0 0 0 4px rgba(37, 99, 235, 0.45); } /* Botão Entrar – pill azul SaaS */ #loginSection .btn-login { margin-top: 12px; width: calc(100% - 4px); /* alinha com os inputs dentro do card */ padding: 12px; border-radius: 999px; border: none; background: linear-gradient(90deg, #2563eb, #1d4ed8); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; box-shadow: 0 16px 34px rgba(37, 99, 235, 0.55); transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; } #loginSection .btn-login:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 8px 20px rgba(59,130,246,0.35); } #loginSection .btn-login:active { transform: translateY(0); box-shadow: 0 6px 14px rgba(59,130,246,0.25); } /* Links de suporte/esqueceu senha */ #loginSection .login-link { display: block; margin-top: 8px; font-size: 13px; text-align: center; color: #cbd5f5; text-decoration: none; opacity: 0.9; transition: opacity 0.15s ease, color 0.15s ease; } #loginSection .login-link.support { font-weight: 500; } #loginSection .login-link:hover { opacity: 1; color: #e5edff; } /* Mensagem de erro/feedback */ #loginSection .login-msg { margin-top: 10px; font-size: 13px; text-align: center; font-weight: 600; color: #f97373; } /* Rodapé da coluna esquerda */ #loginSection .login-footnote { margin-top: 18px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(148, 163, 184, 0.95); } /* Coluna direita – texto hero */ #loginSection .login-right { color: #e5e7eb; } #loginSection .login-hero-text { max-width: 460px; text-shadow: 0 18px 45px rgba(0, 0, 0, 0.7); } #loginSection .hero-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: rgba(37, 99, 235, 0.18); border: 1px solid rgba(129, 140, 248, 0.6); font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; margin-bottom: 10px; } #loginSection .login-hero-text h2 { margin: 0 0 10px; font-size: clamp(24px, 3vw, 30px); font-weight: 700; } #loginSection .login-hero-text p { margin: 0; font-size: 14px; max-width: 420px; color: #e5e7eb; } /* Responsivo – empilha em 1 coluna */ @media (max-width: 900px) { #loginSection { align-items: flex-start; } #loginSection .login-layout { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: left; } #loginSection .login-left { order: 1; } #loginSection .login-right { order: 2; } #loginSection .login-panel { margin-inline: auto; } } /* Mobile pequeno */ @media (max-width: 520px) { #loginSection .login-layout { padding: 24px 16px; } #loginSection .login-panel { padding: 22px 18px 18px; border-radius: 18px; } #loginSection .login-title { font-size: 20px; } } /* ========================================================= BRAZSAFE — MOBILE: reCAPTCHA discreto Esconde badge apenas no celular. PC permanece intacto. ========================================================= */ .recaptcha-branding-mobile{ display:none; } @media (max-width: 768px){ .grecaptcha-badge{ visibility:hidden !important; } .recaptcha-branding-mobile{ display:block !important; margin:12px 0 0 !important; color:rgba(255,255,255,.68) !important; font-size:10px !important; line-height:1.45 !important; text-align:center !important; } .recaptcha-branding-mobile a{ color:rgba(255,255,255,.88) !important; text-decoration:underline !important; text-underline-offset:2px !important; } }