/* ============================================================================= AFsignage v2 — SÓ DAS TELAS DE ENTRADA (entrar.html e instalar.html) Cor, movimento, botão, campo e aviso vêm do `base.css`, que as duas telas carregam antes desta. Aqui fica só o que é do formato "cartão no meio da tela": a marca, a folha, os blocos do formulário e o deslize entre cartões. Segue o PADRAO_VISUAL.md, na raiz do projeto. ============================================================================= */ /* O cartão fica no meio da tela — mas `align-items:center` puro CORTA O TOPO quando o conteúdo é mais alto que a janela: o excesso sobra para os dois lados, e o que sobra para cima fica fora da área que rola. Ninguém alcança. Apareceu com a tela de instalação, que tem três blocos e passa de 800px de altura. `safe` resolve: centraliza quando cabe, e volta a alinhar pelo topo quando não cabe. O `align-content` é o mesmo cuidado para quando a folha quebra em linhas. */ body{min-height:100vh;display:flex; align-items:safe center;justify-content:safe center; align-content:safe center;padding:24px} /* ---------- A marca ---------- */ .logo{display:flex;flex-direction:column;align-items:center;gap:14px; margin-bottom:26px;text-align:center} .logo svg{display:block} .logo-nome{font-size:27px;letter-spacing:-.4px;line-height:1} .logo-nome b{font-weight:800;color:var(--tx)} .logo-nome i{font-style:normal;font-weight:400;color:var(--tx2)} .logo-sub{font-size:12px;color:var(--tx2);margin-top:4px} /* ---------- O cartão ---------- */ .folha{width:100%;max-width:400px} .folha.larga{max-width:470px} /* Num cartão de entrada só existe UMA ação, e ela ocupa a largura toda — não há com o que dividir espaço. Fica aqui, e não no `base.css`, porque no painel os botões convivem lado a lado e largura cheia atrapalharia. */ .cartao .btn{width:100%;margin-top:22px} .cartao .btn:hover:not(:disabled)::after{ box-shadow:inset 0 0 0 1px var(--borda),0 6px 18px rgba(47,129,247,.28)} /* O aviso do topo do cartão respira antes do primeiro campo. */ .cartao .aviso{margin-bottom:18px} .cartao{background:var(--sup);border:1px solid var(--bd);border-radius:14px; padding:34px 32px 26px;box-shadow:0 18px 50px rgba(0,0,0,.45)} .cartao.off{display:none} /* ---------- Campos ---------- */ label:first-of-type{margin-top:0} /* Dois campos do mesmo assunto lado a lado. O rótulo de dentro não leva margem própria — quem separa uma linha da outra é a margem do par. */ .par{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px} .par label{margin-top:0} .par + label{margin-top:18px} .bloco h2 + .par{margin-top:0} /* CPF cabe em quatorze caracteres e sempre os mesmos; e-mail é o que pode ficar comprido. Meio a meio sobrava espaço num e faltava no outro. */ .par-cpf{grid-template-columns:150px 1fr} /* A conferência das senhas, embaixo do campo de repetir. Aparece enquanto se digita — esperar o clique em Cadastrar para dizer que as duas diferem é guardar uma informação que já se tem. */ .conferindo{font-size:11.5px;margin-top:6px;min-height:15px; transition:color var(--mov-rapido) var(--mov-suave)} .conferindo.igual {color:var(--ok)} .conferindo.diferente{color:var(--er)} .bloco{margin-top:22px;padding-top:18px;border-top:1px solid var(--bd)} /* `:first-of-type` NÃO serve aqui: ele olha o tipo do elemento (div), e o primeiro div do formulário é o aviso — o resultado era uma linha solta atravessando o topo do cartão. */ .aviso + .bloco{margin-top:0;padding-top:0;border-top:0} .bloco h2{font-size:12px;font-weight:600;color:var(--tx2); text-transform:uppercase;letter-spacing:.6px;margin-bottom:12px} /* ---------- O link que troca de cartão ---------- */ .troca{margin-top:20px;padding-top:18px;border-top:1px solid var(--bd); text-align:center;font-size:13px;color:var(--tx2)} .troca button{background:none;border:0;padding:2px 4px;cursor:pointer; color:var(--ac);font-size:13px;font-weight:600; will-change:transform;backface-visibility:hidden; transition:transform var(--mov-cresce) var(--mov-cresce-curva)} .troca button:hover{transform:scale(1.055)} .troca button:active{transform:scale(.96);transition:transform .08s} .troca button:focus-visible{outline:2px solid var(--ac);outline-offset:2px;border-radius:5px} /* ---------- O código ---------- Seis dígitos grandes e espaçados. É um número que se copia de outra tela, e letra pequena aqui faz errar o 0 pelo 8. */ .codigo{text-align:center;font-size:26px;font-weight:600;letter-spacing:10px; padding:14px 13px;text-indent:10px} .codigo::placeholder{letter-spacing:10px;color:#39424f} /* A única frase de contexto da tela inteira, e ela existe porque sem o "para onde foi" a pessoa não sabe em qual caixa de entrada procurar. */ .explica{font-size:13px;color:var(--tx2);margin-bottom:20px;line-height:1.6} .explica b{color:var(--tx);font-weight:600} /* ---------- Cadastro enviado ---------- Substitui o formulário inteiro. Uma frase, e o caminho de volta. */ #enviado{text-align:center;padding:8px 0 4px} #enviado .marca-ok{width:52px;height:52px;margin:0 auto 18px;border-radius:50%; background:rgba(63,185,80,.14);border:1px solid rgba(63,185,80,.4); display:flex;align-items:center;justify-content:center;color:var(--ok)} #enviado p{font-size:15px;font-weight:600} /* ---------- O deslize ---------- Cartão da direita entra pela direita; voltando, entra pela esquerda. É o gesto de virar página: o olho entende para onde foi sem ler. */ @keyframes vindoDaDireita{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}} @keyframes vindoDaEsquerda{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}} .entra-direita{animation:vindoDaDireita var(--mov-lento) var(--mov-suave)} .entra-esquerda{animation:vindoDaEsquerda var(--mov-lento) var(--mov-suave)} @media (max-width:520px){ .par{grid-template-columns:1fr} .cartao{padding:26px 20px 20px} } /* ============================================================================= SÓ DA TELA DE INSTALAÇÃO (instalar.html) Mora aqui, e não num