`. Em repouso está fora do ecrã por `position: absolute` (fora do fluxo: não desloca nada, e continua na ordem de tabulação, ao contrário de `display:none`); ao receber o foco volta ao canto superior esquerdo. O anel de foco em si é a fatia 3 do #647 — aqui só se trata de a ligação passar a ser visível quando é ela que tem o foco. O anel é a fatia 3: a borda de acento está SEMPRE lá (também sem foco), logo não distingue estado nenhum — o `outline` é a propriedade que só se desenha enquanto o foco é dela. */ .skip-link { position: absolute; top: 0; left: -9999px; z-index: 100; background: var(--surface-2); color: var(--ink); border: 1px solid var(--accent); border-radius: 0 0 var(--radius) 0; padding: 10px 16px; text-decoration: underline; } .skip-link:focus, .skip-link:focus-visible { left: 0; outline: 2px solid var(--accent); outline-offset: 2px; } .wrap { max-width: 1040px; margin: 0 auto; padding: 0 24px; } nav { display: flex; align-items: center; gap: 18px; padding: 18px 0; } nav .brand { font-size: 18px; font-weight: 750; letter-spacing: .3px; color: var(--ink); } nav .brand span { background: linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } nav .tag { font-size: 12px; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px; } nav .spacer { flex: 1; } .btn { display: inline-block; background: var(--accent); color: #0b1020; font-weight: 650; border: none; border-radius: 10px; padding: 10px 22px; cursor: pointer; font-size: 15px; } .btn:hover { filter: brightness(1.08); text-decoration: none; } .btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--border); } .btn.ghost:hover { border-color: var(--accent); } .hero { padding: 72px 0 40px; max-width: 760px; } .hero h1 { font-size: 44px; line-height: 1.15; letter-spacing: -0.02em; font-weight: 800; } .hero h1 em { font-style: normal; background: linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero p.lead { margin-top: 18px; font-size: 18px; color: var(--muted); max-width: 62ch; } .hero .cta { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; } .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 34px 0 60px; } @media (max-width: 860px) { .cards { grid-template-columns: 1fr; } .hero h1 { font-size: 32px; } } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; } .card h3 { font-size: 16px; margin-bottom: 8px; } .card h3 .ico { margin-right: 8px; } .card p { color: var(--muted); font-size: 14px; } .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 34px 38px; max-width: 460px; margin: 9vh auto 0; } .panel h2 { font-size: 22px; margin-bottom: 6px; } .panel .sub { color: var(--muted); font-size: 14px; margin-bottom: 22px; } /* O prazo do desafio do 2.º passo (cartão #281 fatia 1e). Fica DENTRO do `.sub` — é descrição do campo (`aria-describedby`) e sair de lá custava o anúncio à chegada do foco —, mas não pode ser mais uma frase inline no fim de cinco linhas em `--muted`: quem varre o ecrã a meio de um login não a vê, que é exatamente o problema que o cartão existe para resolver. Linha própria + a cor do texto normal chegam para a destacar; nada de peso, caixa ou animação, que a transformariam num alerta e roubariam a atenção ao campo onde há para escrever. */ .panel .sub .deadline { display: block; margin-top: 8px; color: var(--ink); } .panel label { display: block; font-size: 13px; color: var(--muted); margin: 14px 0 6px; } /* `font-size: 16px` NÃO é gosto tipográfico: é o limiar do zoom automático do iOS (cartão #281 fatia 1j). O Safari em iPhone amplia a página ao focar um campo cujo tamanho computado seja INFERIOR a 16px — e o `font: inherit` sozinho trazia os 15.5px do `body`, meio pixel abaixo da linha. O ecrã onde isso dói é o do 2.º passo: a pessoa tem o telemóvel na mão, o enquadramento salta a meio de um código que dura 30 segundos, e voltar atrás para o ler outra vez passa a exigir uma panorâmica horizontal que não existia antes de tocar no campo. O `font: inherit` fica (é ele que traz família e altura de linha do painel); o longhand a seguir sobrepõe-se só ao tamanho, como manda a ordem das declarações. Quem mede isto é `tests/test_login_mobile_viewport.py`, resolvendo a cascata — não a leitura deste comentário. */ .panel input { width: 100%; background: var(--bg); color: var(--ink); border: 1px solid var(--border); border-radius: 10px; padding: 11px 14px; font: inherit; font-size: 16px; } /* O foco NÃO pode viver na borda: a regra de inválido logo abaixo tem a mesma especificidade e vem depois, logo ganharia o `border-color` e o campo focado ficava sem indicador nenhum (WCAG 2.4.7). O `outline` é uma propriedade à parte — soma-se ao vermelho do erro em vez de competir com ele. Mesma convenção do `.field` do wizard (ver linha do `.field input:focus`). */ .panel input:focus, .panel input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } /* Campo em erro: o sinal visível acompanha o `aria-invalid` (mesma regra que `.field` já usa no wizard), senão a invalidez só existe para quem ouve o leitor de ecrã. Só mexe na borda — o indicador de foco acima sobrevive. */ .panel input[aria-invalid="true"] { border-color: var(--danger); } /* Alvo de toque de 44×44 CSS px (WCAG 2.5.5 / 2.5.8, cartão #281 fatia 1j). Com `padding: 10px` e 15px de texto, o `.btn` media ~38px de altura — abaixo da régua no único ecrã do produto que se usa de propósito com o telemóvel na mão. O `inline-flex` não é decoração: `min-height` num `inline-block` faz a caixa crescer para BAIXO e o rótulo ficaria descentrado (um `