/* ============================================================================= Tela de login unificada — uma folha para TODAS as lojas. As cores vêm de custom properties emitidas por views/login/_tema.php. Nada de cor fixa de marca aqui. Mobile-first de propósito: o bloco base é o do celular (coluna única, com o FORMULÁRIO primeiro), e o layout de duas colunas entra só a partir de 992px. Isso garante que a ação principal nunca fique abaixo da dobra no mobile (CLAUDE.md, UX regra 1) — o padrão de mercado desse layout costuma empilhar o painel institucional em cima e empurrar o formulário para baixo, que é o erro que este arquivo evita. Sem Bootstrap e sem fonte externa: a página tem próprio e é a única indexável do projeto, então o caminho crítico de render fica mínimo. ============================================================================= */ *, *::before, *::after { box-sizing: border-box; } :root { --lg-superficie: #FFFFFF; --lg-fundo: #F4F6F9; --lg-texto: #16202B; --lg-texto-suave: #5B6875; --lg-borda: #DBE1E8; --lg-borda-forte: #C3CCD6; --lg-erro: #C0392B; --lg-erro-fundo: #FDEDEB; /* Cor dos links secundários ("Esqueci minha senha", "Criar conta", "Voltar ao login"). FIXA de propósito — NÃO usa a cor da loja. Texto na cor da marca sobre o cartão branco é ilegível em boa parte das lojas: #FFDD00 (Uniasselvi) sobre branco dá contraste ~1,3:1, contra o mínimo de 4,5:1 da WCAG AA. O mesmo vale para Rural Pago (#7EB943), Primetec (#8AC640), Engegrow (#B7CD3D) e Além do Olhar (#F0C7D1). A marca continua presente onde o contraste é calculado: no botão, cujo texto é branco ou escuro conforme a luminância da cor. Preto (o mesmo --lg-texto do corpo) em vez de azul de link: neutro, funciona sob qualquer marca e dá 14,8:1 sobre branco. Como a cor sozinha não sinaliza que é clicável, o sublinhado no hover e o peso 600 do "Criar conta" fazem esse trabalho. */ --lg-link: #16202B; --lg-link-hover: #000000; /* Indicador de foco — FIXO, nunca a cor da loja. Derivado da marca, o anel ficava quase invisível nas lojas de cor clara (#FFDD00, #F0C7D1). Foco é acessibilidade: quem navega por teclado precisa enxergar onde está. */ --lg-foco: rgba(22,32,43,.16); --lg-foco-borda: #16202B; --lg-raio: 14px; --lg-raio-campo: 10px; --lg-sombra: 0 1px 2px rgba(22,32,43,.06), 0 12px 32px rgba(22,32,43,.08); --lg-transicao: .18s ease; } html, body { margin: 0; padding: 0; } body { min-height: 100vh; background: var(--lg-fundo); color: var(--lg-texto); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; } /* Página ------------------------------------------------------------------- */ .lg-pagina { display: flex; flex-direction: column; min-height: 100vh; } /* --- Painel institucional (hero) ----------------------------------------- */ /* O hero tem profundidade em três camadas, todas derivadas da MESMA cor da loja (tokens de _tema.php). Um gradiente de dois matizes, como no modelo de referência, não tokenizaria: com uma cor por loja sairia errado em 31 marcas. Aqui a variação vem de luminosidade, não de matiz — funciona com qualquer cor. 1. malha de pontos discreta, para o fundo não ficar chapado; 2. brilho radial no canto, dando foco de luz; 3. gradiente diagonal da cor, do tom mais claro/escuro para o cheio. */ .lg-hero { position: relative; isolation: isolate; overflow: hidden; color: var(--lg-hero-texto); padding: 28px 22px; display: flex; flex-direction: column; gap: 18px; /* Luz vindo do alto à esquerda, onde está o logo — direção definida, não brilho de canto. A primeira versão punha a luz no canto superior direito e o resultado lia como borrão, não como iluminação. */ background: radial-gradient(75% 55% at 8% 0%, var(--lg-hero-brilho) 0%, transparent 62%), linear-gradient(160deg, var(--lg-hero-grad-a) 0%, var(--lg-hero-grad-b) 100%); } .lg-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(currentColor 1px, transparent 1px); background-size: 26px 26px; /* 4%%, não 9%%: currentColor é o texto do hero, que em loja de cor CLARA é ESCURO — pontos pretos sobre amarelo dessaturavam o painel inteiro e liam como sujeira. Em hero escuro os pontos são claros e 4%% já basta. */ opacity: .04; /* Some nas bordas para não virar textura, só sugestão de profundidade. */ -webkit-mask-image: radial-gradient(80% 65% at 15% 10%, #000 0%, transparent 75%); mask-image: radial-gradient(80% 65% at 15% 10%, #000 0%, transparent 75%); pointer-events: none; } /* Arco de luz atravessando o painel. Substituiu uma "esfera difusa" que, na prática, lia como mancha cinza no canto: forma sem intenção legível é ruído. Um arco fino tem direção e conversa com a diagonal do gradiente. */ .lg-hero::after { content: ""; position: absolute; z-index: -1; width: 150%; aspect-ratio: 1; left: -25%; bottom: -95%; border-radius: 50%; border: 1px solid var(--lg-hero-borda); background: radial-gradient(circle at 50% 0%, var(--lg-hero-brilho) 0%, transparent 42%); opacity: .45; pointer-events: none; } /* O logo vai sempre sobre um cartão branco. Os logos das lojas variam de claro a escuro (medido: alguns exigiram fundo escuro nas imagens de OG, a maioria fundo branco), então qualquer cor de hero deixaria parte deles invisível. O cartão resolve para todos de uma vez. */ .lg-marca { /* Também é o

da página, então zera a margem do user-agent. */ margin: 0; display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; background: var(--lg-chip-fundo); border: 1px solid var(--lg-chip-borda); border-radius: 12px; padding: var(--lg-chip-espaco); box-shadow: var(--lg-chip-sombra); } /* Limites GENEROSOS na altura, não só na largura. * * Os logos das lojas vão de faixa larguíssima (2218x348, razão 6,4) a mais alto * que largo (Fast 4 You, 150x167, razão 0,9). Com um teto de altura baixo, quem * manda é a altura e o logo quadrado encolhe: medido, 11 dos 23 renderizavam com * menos de 120px de largura, e a Fast 4 You saía com 50x56. * * Só `max-*`, nunca `min-*` nem largura fixa: assim o logo nunca é AMPLIADO além * do arquivo original. Ampliar borra — o da Uniasselvi tem 130x24 de origem e * esticá-lo só pioraria. Logo pequeno demais é problema do asset, não do CSS. * * O chip cresce junto, então cada marca aparece na proporção que tem. */ .lg-marca img { display: block; max-width: 200px; max-height: 88px; width: auto; height: auto; } .lg-hero-topo { display: flex; flex-direction: column; gap: 14px; } /* No celular o hero é logo + a frase de contexto, e nada além disso. Os BENEFÍCIOS saem: são conteúdo secundário e empurrariam o formulário para baixo da dobra (CLAUDE.md, UX regra 1). Voltam a partir de 992px, onde há coluna própria. O bloco de CONTATO também sai daqui — ele é repetido abaixo do card (.lg-contato-mobile), e mantê-lo nos dois lugares seria a mesma informação duas vezes na mesma tela. */ .lg-beneficios { display: none; } .lg-hero-desc { margin: 0; color: var(--lg-hero-texto-suave); font-size: .92rem; max-width: 46ch; } /* --- Base do hero: contato + assinatura --------------------------------- */ .lg-hero-base { /* Oculto por padrão (mobile) e ligado no media query de 992px. Declarado AQUI, e não num grupo separado antes: a regra própria vinha depois e sobrescrevia o display:none, e o bloco aparecia no celular. */ display: none; margin-top: auto; padding-top: 22px; border-top: 1px solid var(--lg-hero-borda); flex-direction: column; gap: 18px; } /* Mesmo tratamento tipográfico do "PLATAFORMA POR" logo abaixo: os dois blocos da base do hero são pares e devem se anunciar igual. Sem isto os contatos ficavam soltos, sem dizer o que são. */ .lg-contato-titulo, .lg-contato-mobile .lg-contato-titulo { font-size: .64rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .55; } .lg-contato { display: flex; flex-direction: column; gap: 8px; font-size: .875rem; } .lg-contato .lg-contato-titulo { color: var(--lg-hero-texto); } .lg-contato a, .lg-contato > a span { display: inline-flex; align-items: center; gap: 9px; /* Cor CHEIA e peso 500: em .72 de opacidade o contraste ficava limítrofe sobre as cores mais saturadas, e o bloco sumia. Fica logo abaixo dos títulos dos benefícios (peso 600), sem competir com o formulário. */ color: var(--lg-hero-texto); opacity: .88; font-weight: 400; text-decoration: none; transition: opacity var(--lg-transicao); overflow-wrap: anywhere; } .lg-contato a:hover { opacity: 1; text-decoration: underline; } .lg-contato svg { flex: 0 0 auto; width: 15px; height: 15px; opacity: .6; } /* Empilhado, não lado a lado. Inline, o rótulo + o logo (que tem ~148px em 34px de altura) estouravam a largura do painel e o texto era CORTADO pelo overflow:hidden do hero — aparecia "TAFORMA POR". Empilhar também separa dois tratamentos tipográficos que competiam: o rótulo em caixa alta espaçada e a assinatura da marca, que já traz o próprio descritivo. */ .lg-assinatura { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--lg-hero-texto-suave); } /* O logo da Talentos é uma faixa larga (1390x320 no negativo), então é limitado pela ALTURA — travar pela largura o deixaria desproporcional ao lado do texto. */ .lg-assinatura img { height: 34px; width: auto; /* Nunca estoura o painel, por mais estreito que ele fique. */ max-width: 100%; display: block; opacity: 1; } /* --- Área do formulário -------------------------------------------------- */ .lg-area { flex: 1 1 auto; display: flex; align-items: flex-start; justify-content: center; padding: 22px 16px 40px; } .lg-card { width: 100%; max-width: 440px; background: var(--lg-superficie); border: 1px solid var(--lg-borda); border-radius: var(--lg-raio); box-shadow: var(--lg-sombra); padding: 26px 22px; } .lg-card-titulo { margin: 0 0 4px; font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; } .lg-card-sub { margin: 0 0 22px; color: var(--lg-texto-suave); font-size: .92rem; } /* --- Campos -------------------------------------------------------------- */ .lg-campo { margin-bottom: 16px; } .lg-campo label { display: block; margin-bottom: 6px; font-size: .86rem; font-weight: 600; color: var(--lg-texto); } .lg-entrada-wrap { position: relative; display: flex; } .lg-entrada { width: 100%; /* 46px de altura: alvo de toque confortável no mobile. */ min-height: 46px; padding: 11px 13px; font: inherit; font-size: 1rem; color: var(--lg-texto); background: var(--lg-superficie); border: 1px solid var(--lg-borda-forte); border-radius: var(--lg-raio-campo); transition: border-color var(--lg-transicao), box-shadow var(--lg-transicao); } .lg-entrada::placeholder { color: #9AA6B2; } .lg-entrada:focus { outline: none; border-color: var(--lg-foco-borda); box-shadow: 0 0 0 4px var(--lg-foco); } /* Estado de erro é marcado por atributo, não por classe de cor: o CSS decide a aparência e o JS só informa o estado. */ .lg-entrada[aria-invalid="true"] { border-color: var(--lg-erro); background: var(--lg-erro-fundo); } .lg-entrada.tem-acao { padding-right: 46px; } .lg-olho { position: absolute; top: 0; right: 0; width: 44px; height: 100%; display: flex; align-items: center; justify-content: center; background: none; border: 0; padding: 0; cursor: pointer; color: var(--lg-texto-suave); border-radius: 0 var(--lg-raio-campo) var(--lg-raio-campo) 0; } .lg-olho:hover { color: var(--lg-texto); } .lg-olho:focus-visible { outline: 2px solid var(--lg-foco-borda); outline-offset: -2px; } .lg-olho svg { width: 20px; height: 20px; display: block; } .lg-erro-msg { display: none; margin-top: 6px; font-size: .84rem; color: var(--lg-erro); } .lg-erro-msg[data-visivel="1"] { display: block; } /* --- Ações --------------------------------------------------------------- */ .lg-link-secundario { display: block; text-align: right; margin: -6px 0 20px; font-size: .86rem; color: var(--lg-link); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; width: 100%; } .lg-link-secundario:hover { color: var(--lg-link-hover); text-decoration: underline; } .lg-botao { width: 100%; min-height: 48px; padding: 12px 18px; font: inherit; font-size: 1rem; font-weight: 600; color: var(--lg-primaria-texto); background: var(--lg-primaria); border: 1px solid transparent; border-radius: var(--lg-raio-campo); cursor: pointer; transition: background var(--lg-transicao), opacity var(--lg-transicao); } .lg-botao:hover { background: var(--lg-primaria-hover); } .lg-botao:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--lg-foco); } .lg-botao[disabled] { opacity: .6; cursor: default; } .lg-botao-fantasma { color: var(--lg-link); background: transparent; border-color: var(--lg-borda-forte); } .lg-botao-fantasma:hover { background: var(--lg-fundo); } /* --- Bloco de primeiro acesso -------------------------------------------- */ .lg-cadastro { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--lg-borda); text-align: center; font-size: .92rem; color: var(--lg-texto-suave); } .lg-cadastro strong { display: block; color: var(--lg-texto); margin-bottom: 2px; } .lg-cadastro a { color: var(--lg-link); font-weight: 600; text-decoration: none; } .lg-cadastro a:hover { color: var(--lg-link-hover); text-decoration: underline; } /* --- Troca de painéis (login <-> recuperar) ------------------------------ */ .lg-painel[hidden] { display: none; } .lg-voltar { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px; font-size: .88rem; font-weight: 600; color: var(--lg-link); background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; } .lg-voltar:hover { color: var(--lg-link-hover); text-decoration: underline; } /* --- Aviso (sucesso/erro do fluxo de recuperação) ------------------------ */ .lg-aviso { display: none; margin-bottom: 16px; padding: 12px 14px; border-radius: var(--lg-raio-campo); font-size: .9rem; border: 1px solid transparent; } .lg-aviso[data-visivel="1"] { display: block; } .lg-aviso[data-tipo="erro"] { color: var(--lg-erro); background: var(--lg-erro-fundo); border-color: #F3C6C0; } .lg-aviso[data-tipo="sucesso"] { color: #1E6B4F; background: #E8F6EF; border-color: #BFE3D2; } /* --- Contato no mobile --------------------------------------------------- No celular o bloco do hero não aparece, então o contato vai depois do card, onde não disputa espaço com o formulário. */ /* Horário: o elemento MAIS leve do bloco. Não é ação, é contexto — informa quando esperar resposta de quem clicar no WhatsApp. */ .lg-contato-horario { font-size: .8rem; opacity: .6; margin-top: 2px; } .lg-contato-mobile .lg-contato-titulo { color: var(--lg-texto-suave); } .lg-contato-mobile .lg-contato-horario { color: var(--lg-texto-suave); } .lg-contato-mobile { padding: 18px 16px 30px; text-align: center; font-size: .875rem; display: flex; flex-direction: column; gap: 10px; align-items: center; } .lg-contato-mobile a { color: var(--lg-texto-suave); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; } .lg-contato-mobile a:hover { color: var(--lg-texto); text-decoration: underline; } .lg-contato-mobile svg { width: 15px; height: 15px; opacity: .55; } .lg-assinatura-mobile { margin-top: 6px; display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; color: #8A96A3; } /* Aqui o fundo é claro, então usa sempre a versão positiva do logo. */ .lg-assinatura-mobile img { height: 26px; width: auto; max-width: 100%; display: block; } /* ============================================================================= Desktop — duas colunas a partir de 992px. 992px é o mesmo corte do painel Minha Conta (docs/RESPONSIVIDADE-MOBILE.md). A decisão é 100% por CSS, nunca por JS medindo largura. ============================================================================= */ @media (min-width: 992px) { /* position:relative é o que ancora o .lg-rodape absoluto lá embaixo — sem ele o rodapé se posicionaria em relação ao documento. */ .lg-pagina { flex-direction: row; align-items: stretch; position: relative; } /* space-between distribui em três zonas — marca no topo, benefícios no meio, contato + assinatura na base. No print anterior o conteúdo ficava agrupado no meio com um vazio enorme embaixo; agora o painel é ocupado com informação útil em vez de ar. */ .lg-hero { flex: 0 0 46%; max-width: 660px; padding: clamp(38px, 4vw, 60px) clamp(34px, 3.4vw, 56px); justify-content: space-between; gap: 32px; } .lg-hero-topo { gap: 18px; } .lg-hero-base { display: flex; } .lg-contato-mobile { display: none; } .lg-marca { padding: 14px 20px; } .lg-marca img { max-width: 240px; max-height: 120px; } .lg-hero-desc { display: block; margin: 0; color: var(--lg-hero-texto-suave); font-size: 1.02rem; max-width: 46ch; } .lg-beneficios { display: flex; flex-direction: column; gap: 18px; margin: 6px 0 0; padding: 0; list-style: none; } .lg-beneficios li { display: flex; gap: 14px; align-items: flex-start; } .lg-beneficio-icone { flex: 0 0 auto; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--lg-hero-borda); border-radius: 10px; } .lg-beneficio-icone svg { width: 19px; height: 19px; display: block; } .lg-beneficio-titulo { font-weight: 600; font-size: .96rem; } .lg-beneficio-texto { color: var(--lg-hero-texto-suave); font-size: .88rem; } .lg-area { align-items: center; padding: 40px 32px; } .lg-card { max-width: 452px; padding: 38px 36px; } .lg-card-titulo { font-size: 1.6rem; } .lg-card-sub { margin-bottom: 26px; } } @media (min-width: 1400px) { .lg-card { max-width: 476px; padding: 44px 42px; } } /* ============================================================================= Movimento e profundidade Tudo curto e discreto: é uma tela de entrada, o movimento deve dar resposta, não espetáculo. As sombras usam --lg-foco, que é neutro fixo (ver :root): o realce não muda de loja para loja, e foco/realce nunca dependem da cor da marca. ============================================================================= */ @keyframes lgSurgir { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .lg-card { animation: lgSurgir .42s cubic-bezier(.2, .7, .3, 1) both; } /* O painel que abre também surge — sinaliza a troca sem piscar a tela. */ .lg-painel:not([hidden]) { animation: lgSurgir .26s cubic-bezier(.2, .7, .3, 1) both; } .lg-marca { transition: transform var(--lg-transicao), box-shadow var(--lg-transicao); } .lg-hero:hover .lg-marca { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 0, 0, .18); } .lg-botao { box-shadow: 0 1px 2px rgba(22, 32, 43, .10); } .lg-botao:hover { transform: translateY(-1px); box-shadow: 0 8px 20px var(--lg-foco); } .lg-botao:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(22, 32, 43, .10); } .lg-botao[disabled]:hover { transform: none; box-shadow: 0 1px 2px rgba(22, 32, 43, .10); } /* Realce do cartão quando há campo em foco: reforça onde está a atenção. */ .lg-card:focus-within { border-color: var(--lg-borda-forte); box-shadow: 0 1px 2px rgba(22, 32, 43, .06), 0 18px 44px rgba(22, 32, 43, .12); } .lg-beneficios li { transition: transform var(--lg-transicao); } .lg-beneficios li:hover { transform: translateX(3px); } /* Respeita quem pede menos animação: nenhum movimento, e nada de estado dependente de transição. Obrigatório — o resto desta seção é decoração. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } .lg-botao:hover, .lg-hero:hover .lg-marca, .lg-beneficios li:hover { transform: none; } }