Better Headers

Chrome de navegação de página, não HTTP. Escolha um tipo pelo assunto e implemente. Identidade (cor, tipo, anti-slop): frontend-design. Tokens e estados: better-web-interface. Rodapé: better-footers. DS do repo vence.

Default proibido sem brief: barra full-bleed, logo à esquerda, 5 links, CTA à direita, hamburger genérico no mobile. Isso é template.

Regras inegociáveis

• <header> + <nav aria-label="Principal">. Skip link para o conteúdo. aria-current="page" no item ativo.
• Foco visível, teclado, Esc fecha menu. Drawer/overlay: rótulo no botão, foco preso enquanto aberto, restore no close — não só display: none mudo.
• 4–7 links. CTA com verbo real. Logo com texto ou alt. Sem mega-menu em landing de 3 seções.
• Sticky/fixed: compensar altura no fluxo (padding/scroll-padding-top) para não cobrir o H1.
• Blur/glass só se brief/DS pedir — não índigo + pílula + glass da blacklist de frontend-design.
• prefers-reduced-motion: sem hide-on-scroll teatral.

Nomeie o tipo escolhido (uma linha) e justifique. Não empilhe três arquiteturas na mesma página.

Tipos (um por página)