/* Tela de login — padrão blogflow. * * Só esta tela: login.html não estende base.html, tem próprio e não * compartilha nenhuma regra com o resto do painel. * * Valores vêm de blogflow-tokens.css. Dois literais sobrevivem de propósito: * o offset do ícone dentro do campo (posicional, não tem token) e a altura do * logo. */ * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--sp-5); font-family: var(--font-sans); font-size: var(--fs-body); font-weight: var(--fw-medium); line-height: var(--lh-body); color: var(--text-body); text-rendering: optimizeLegibility; /* readme §Fundos: superfícies chapadas, sem textura. O único gradiente permitido no login é o da marca a 16% sobre o ink. Substitui os dois radiais roxo/azul, que não existem no sistema. */ background-color: var(--surface-nav); background-image: linear-gradient( 135deg, rgba(12, 123, 250, .16) 0%, rgba(23, 168, 212, .16) 55%, rgba(20, 200, 190, .16) 100% ); -webkit-font-smoothing: antialiased; } .caixa { width: 100%; max-width: 360px; /* mesmo do LoginScreen do design system */ padding: var(--sp-8) var(--sp-7); background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--r-card); /* cartão = 14px */ box-shadow: var(--shadow-5); /* flutua sobre o ink; tinta slate, nunca preto */ } .marca { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-7); } .marca .logo { height: 30px; width: auto; max-width: 100%; object-fit: contain; } h1 { margin: 0 0 var(--sp-1); font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); font-weight: var(--fw-bold); color: var(--text-strong); } p.subtitulo { margin: 0 0 var(--sp-6); font-size: var(--fs-sm); /* era 13.5px */ line-height: var(--lh-sm); color: var(--text-muted); } label { display: block; margin-bottom: var(--sp-2); font-size: var(--fs-xs); /* era 12.5px */ font-weight: var(--fw-semibold); color: var(--text-strong); } .campo-senha { margin-bottom: var(--sp-2); } .link-esqueci { display: block; margin: 0 0 var(--sp-5); text-align: right; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-link); text-decoration: none; } .link-esqueci:hover { color: var(--text-link-hover); text-decoration: underline; } p.ajuda a, p.voltar a { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-link); text-decoration: none; } p.ajuda a:hover, p.voltar a:hover { text-decoration: underline; } p.ajuda { margin: 0 0 var(--sp-6); font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-muted); } p.voltar { margin: var(--sp-5) 0 0; text-align: center; font-size: var(--fs-sm); color: var(--text-muted); } .sucesso { display: flex; align-items: flex-start; gap: var(--sp-2); margin-bottom: var(--sp-4); padding: var(--sp-3); border-radius: var(--r-control); background: var(--status-success-soft); color: var(--status-success-ink); font-size: var(--fs-sm); line-height: var(--lh-sm); } .campo { position: relative; margin-bottom: var(--sp-4); } .campo .icone { position: absolute; left: var(--sp-3); top: 50%; transform: translateY(-50%); color: var(--text-subtle); pointer-events: none; } input { width: 100%; height: var(--control-h-md); /* 40px — era 38px por padding */ padding: 0 var(--control-pad-x-md) 0 38px; /* 38 = 12 do ícone + 16 dele + 10 de respiro */ border: 1px solid var(--border-default); border-radius: var(--r-control); background: var(--surface-card); color: var(--text-body); font-family: inherit; font-size: var(--fs-body); font-weight: var(--fw-medium); transition: var(--t-control); } /* readme §Hover: secundário ganha borda strong. §Foco: anel de 3px + borda focus, nunca outline:none sem substituto. */ input:hover { border-color: var(--border-strong); } input:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--ring-focus); } button { width: 100%; height: var(--control-h-md); margin-top: var(--sp-2); border: none; border-radius: var(--r-control); background: var(--accent); color: var(--text-on-accent); font-family: inherit; font-size: var(--fs-body); /* era 14.5px */ font-weight: var(--fw-semibold); cursor: pointer; /* readme §Sombras: shadow-accent só sob a ação primária quando ela precisa liderar a tela. Esta é a única ação da página. */ box-shadow: var(--shadow-accent); transition: var(--t-control); } /* readme §Hover: preenchimento primário escurece um passo. §Press: só escala, sem mudança extra de cor. */ button:hover { background: var(--accent-hover); } button:active { transform: scale(.975); } button:focus-visible { outline: none; box-shadow: var(--ring-focus), var(--shadow-accent); } .botao-bloco { display: flex; align-items: center; justify-content: center; width: 100%; height: var(--control-h-md); margin-top: var(--sp-2); border-radius: var(--r-control); background: var(--accent); color: var(--text-on-accent); font-size: var(--fs-body); font-weight: var(--fw-semibold); text-decoration: none; box-shadow: var(--shadow-accent); transition: var(--t-control); } .botao-bloco:hover { background: var(--accent-hover); } /* readme §Bordas: cor de estado entra pelo fundo suave + ink, nunca por faixa lateral colorida. */ .erro { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4); padding: var(--sp-3); border-radius: var(--r-control); background: var(--status-danger-soft); color: var(--status-danger-ink); font-size: var(--fs-sm); line-height: var(--lh-sm); } /* Alvo de toque mínimo no celular: 40px cumpre o design de controle, mas fica abaixo dos 44px exigidos pra dedo. */ @media (max-width: 599px) { input, button { height: var(--tap-min); } }