/* ========================================================================== * entrar.css — as telas de porta de entrada: /login e /recuperar-senha * ========================================================================== * * ARQUIVO COMPARTILHADO, e não duas cópias. As duas telas são a mesma porta * vista de dois ângulos: quem chega numa costuma passar pela outra em * seguida, e qualquer diferença de espaçamento ou de cor entre elas é lida * como "mudei de site". Cópias divergem na primeira alteração. * * Nenhuma dependência além da fonte: estas páginas saíram do _layout.php, que * trazia Bootstrap e jQuery para desenhar dois campos. * * ---- OS DOIS TEMAS ---------------------------------------------------- * * As cores são as MESMAS do painel v2 (painel2.css) e do controle, valor por * valor, e vêm pelo mesmo cookie: p2_tema. Estas telas tinham uma paleta * própria — parecida, mas não igual —, e a diferença aparecia justamente no * pior momento: quem entrava via a porta de um tom e o painel de outro. * * O padrão sem cookie é o ESCURO, como no controle. É o tema base do arquivo * — :root já é o escuro —, e o claro é o desvio, marcado com data-tema="claro" * no . Assim a porta nasce escura sem depender de script nem de cookie, * e quem escolheu o claro lá dentro encontra a porta clara. * ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } :root[data-tema="claro"] { --lg-fundo: #f5f6f8; /* = --p2-fundo */ --lg-papel: #ffffff; /* = --p2-papel */ --lg-borda: #e3e5ea; /* = --p2-borda */ --lg-tinta: #1c1f24; /* = --p2-texto */ --lg-fraco: #6b7280; /* = --p2-fraco */ --lg-acento: #2563eb; /* = --p2-acento */ --lg-acento-txt: #ffffff; --lg-acento-f: rgba(37, 99, 235, .14); --lg-campo: #ffffff; --lg-trilho: #d1d5db; /* = --p2-trilho */ --lg-chave-botao: #ffffff; /* a marca: forma e arcos, que se invertem entre os temas — os mesmos nomes do painel */ --lg-marca: #121212; --lg-marca-f: #ffffff; --lg-sombra: rgba(16, 24, 40, .07); --lg-halo: rgba(37, 99, 235, .07); /* o brilho atrás do cartão */ --lg-erro-txt: #b91c1c; --lg-erro-bg: #fef2f2; --lg-erro-borda: #fecaca; --lg-ok-txt: #15803d; --lg-ok-bg: #f0fdf4; --lg-ok-borda: #bbf7d0; } :root { --lg-fundo: #0e0e11; --lg-papel: #16161a; --lg-borda: #2d2d31; --lg-tinta: #e8e8ea; --lg-fraco: #a2a2a3; /* O realce é BRANCO, como no controle — e então o que se escreve sobre ele precisa ser escuro. Um azul aqui deixaria o único elemento saturado da tela brigando com um fundo quase preto. */ --lg-acento: #ffffff; --lg-acento-txt: #16161a; --lg-acento-f: rgba(255, 255, 255, .16); --lg-campo: rgba(255, 255, 255, .04); --lg-trilho: #37373a; --lg-chave-botao: #ffffff; --lg-marca: #e8e8ea; --lg-marca-f: #16161a; --lg-sombra: rgba(0, 0, 0, .5); --lg-halo: rgba(255, 255, 255, .05); --lg-erro-txt: #ff9b9b; --lg-erro-bg: rgba(220, 70, 70, .14); --lg-erro-borda: rgba(255, 155, 155, .3); --lg-ok-txt: #9ae6a0; --lg-ok-bg: rgba(76, 175, 80, .14); --lg-ok-borda: rgba(154, 230, 160, .3); } html, body { height: 100%; } body { margin: 0; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--lg-fundo); font-family: 'Ubuntu', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif; color: var(--lg-tinta); -webkit-text-size-adjust: 100%; } /* UM HALO ATRÁS DO CARTÃO, e não uma imagem: a tela era um retângulo cinza com um retângulo branco no meio. O brilho dá profundidade sem pedir download nenhum e sem competir com o formulário — ele é largo e fraco de propósito. `fixed` para não rolar junto no celular. */ body::before { content: ''; position: fixed; inset: 0; background: radial-gradient(60% 50% at 50% 28%, var(--lg-halo), transparent 70%), radial-gradient(45% 40% at 50% 100%, var(--lg-halo), transparent 70%); pointer-events: none; } .lg { position: relative; /* acima do halo */ width: 100%; max-width: 400px; } /* ---- marca ---- */ .lg-marca { display: flex; align-items: center; justify-content: center; gap: 11px; margin-bottom: 28px; } .lg-marca svg { width: 40px; height: 40px; display: block; } /* A FORMA E OS ARCOS TROCAM DE COR ENTRE OS TEMAS. Estavam cravados no SVG (#121212 e #ffffff), e no escuro o corpo da marca era quase a cor do fundo — o logotipo sumia e restavam três riscos. */ .lg-marca .lg-marca-forma { fill: var(--lg-marca); } .lg-marca .lg-marca-arco { fill: var(--lg-marca-f); } .lg-marca b { font-size: 22px; font-weight: 700; letter-spacing: -.015em; } /* ---- cartão ---- */ .lg-caixa { padding: 30px 28px 26px; background: var(--lg-papel); border: 1px solid var(--lg-borda); border-radius: 18px; box-shadow: 0 1px 2px var(--lg-sombra), 0 18px 40px -14px var(--lg-sombra); } .lg-titulo { margin: 0 0 6px; font-size: 19px; font-weight: 700; letter-spacing: -.01em; } .lg-sub { margin: 0 0 24px; font-size: 13.5px; line-height: 1.5; color: var(--lg-fraco); } .lg-campo { display: block; margin-bottom: 15px; } .lg-campo span { display: block; margin-bottom: 7px; font-size: 12.5px; font-weight: 600; } .lg-campo input { width: 100%; height: 46px; padding: 0 14px; font: inherit; font-size: 14.5px; color: var(--lg-tinta); background: var(--lg-campo); border: 1px solid var(--lg-borda); border-radius: 12px; outline: none; transition: border-color .14s ease, box-shadow .14s ease, background .14s ease; } .lg-campo input::placeholder { color: var(--lg-fraco); opacity: .7; } .lg-campo input:focus { border-color: var(--lg-acento); box-shadow: 0 0 0 3px var(--lg-acento-f); } /* O AUTOPREENCHIMENTO DO NAVEGADOR pinta o campo de azul-claro por conta própria e ignora o `background`. No tema escuro isso desenhava dois retângulos claros no meio de um cartão preto. A sombra interna é o único jeito de cobrir aquele fundo; o `-webkit-text-fill-color` recupera a cor da letra, que o navegador também troca. */ .lg-campo input:-webkit-autofill, .lg-campo input:-webkit-autofill:hover, .lg-campo input:-webkit-autofill:focus { -webkit-text-fill-color: var(--lg-tinta); -webkit-box-shadow: 0 0 0 60px var(--lg-papel) inset; caret-color: var(--lg-tinta); transition: background-color 5000s ease-in-out 0s; } /* ---- a chave da versão nova ---- O rótulo inteiro é clicável, e não só o trilho: um alvo de 38px numa tela de toque é o que separa "escolhi" de "tentei escolher". */ .lg-chave { display: flex; align-items: center; gap: 12px; margin: 20px 0 22px; padding: 13px 14px; background: var(--lg-fundo); border: 1px solid var(--lg-borda); border-radius: 14px; cursor: pointer; user-select: none; -webkit-user-select: none; transition: border-color .14s ease; } .lg-chave:hover { border-color: var(--lg-acento); } .lg-chave-txt { flex: 1; min-width: 0; } .lg-chave-t { display: block; font-size: 13.5px; font-weight: 600; } .lg-chave-d { display: block; margin-top: 3px; font-size: 12px; line-height: 1.4; color: var(--lg-fraco); } /* opacidade zero e não display:none — o campo sai de vista mas continua na ordem do Tab */ .lg-chave input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .lg-chave em { position: relative; flex: 0 0 auto; width: 40px; height: 23px; background: var(--lg-trilho); border-radius: 999px; transition: background .16s ease, box-shadow .16s ease; } .lg-chave em::after { content: ''; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; background: var(--lg-chave-botao); border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .16s ease; } .lg-chave input:checked + em { background: var(--lg-acento); } /* Ligada, o botão precisa contrastar com o TRILHO, que no escuro é branco. Sem isto ele desaparecia dentro do próprio trilho e a chave parecia desligada. */ .lg-chave input:checked + em::after { transform: translateX(17px); background: var(--lg-acento-txt); } /* o anel de foco vai no trilho: o campo que recebe o foco é invisível */ .lg-chave input:focus-visible + em { box-shadow: 0 0 0 3px var(--lg-acento-f); } /* ---- botão ---- */ .lg-btn { width: 100%; height: 48px; font: inherit; font-size: 15px; font-weight: 700; color: var(--lg-acento-txt); background: var(--lg-acento); border: 0; border-radius: 12px; cursor: pointer; transition: filter .12s ease, transform .12s ease; } .lg-btn:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); } .lg-btn:active:not(:disabled) { transform: scale(.99); } .lg-btn:disabled { opacity: .55; cursor: default; } .lg-pe { margin-top: 20px; text-align: center; } .lg-pe a { font-size: 13px; font-weight: 600; color: var(--lg-fraco); text-decoration: none; transition: color .14s ease; } .lg-pe a:hover { color: var(--lg-acento); } /* ---- erro ---- */ .lg-erro { margin-bottom: 16px; padding: 11px 13px; font-size: 13px; line-height: 1.45; color: var(--lg-erro-txt); background: var(--lg-erro-bg); border: 1px solid var(--lg-erro-borda); border-radius: 11px; } .lg-erro[hidden] { display: none; } /* ---- aviso de sucesso ---- Mesma caixa do erro, outra cor: as duas ocupam o mesmo lugar na tela e trocam de papel conforme a resposta, então o que muda é a cor, não a posição — o olho não precisa procurar. */ .lg-ok { margin-bottom: 16px; padding: 11px 13px; font-size: 13px; line-height: 1.45; color: var(--lg-ok-txt); background: var(--lg-ok-bg); border: 1px solid var(--lg-ok-borda); border-radius: 11px; } .lg-ok[hidden] { display: none; } /* ---- alternador de tema ---- Mesmo desenho e mesma posição do botão do /controle avulso, e escrevendo o MESMO cookie. Aqui ele ganha um motivo a mais: é a primeira tela do sistema, e quem prefere o escuro não deveria ter de atravessar uma tela branca para chegar ao ajuste que já existe lá dentro. */ #lg-tema { position: fixed; top: 18px; right: 20px; z-index: 40; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 11px; background: transparent; border: 1px solid var(--lg-borda); color: var(--lg-fraco); cursor: pointer; transition: background .16s ease, color .16s ease, border-color .16s ease; } #lg-tema:hover { background: var(--lg-papel); color: var(--lg-tinta); } #lg-tema svg { width: 17px; height: 17px; } /* qual ícone aparece é decidido pelo TEMA, não por script: assim ele já nasce certo no HTML servido pelo PHP e continua certo depois do clique, que só troca o atributo */ .lg-tema-sol { display: none; } :root[data-tema="claro"] .lg-tema-lua { display: none; } :root[data-tema="claro"] .lg-tema-sol { display: block; } @media (max-width: 420px) { body { padding: 16px; align-items: flex-start; padding-top: 56px; } .lg-caixa { padding: 26px 20px 22px; } #lg-tema { top: 12px; right: 14px; } }