Menu fixo com fundo de vidro · Biblioteca de seções

Menu fixo no topo, invisível enquanto a página está no início — só a marca, os links e o CTA flutuam sobre a foto do hero. Passados 30px de rolagem, entra um fundo de vidro escuro com blur e uma linha inferior. Os links ganham sublinhado que cresce da esquerda no hover.

Quando usar

Site institucional ou landing com hero de mídia full-bleed. É a razão de o menu nascer transparente: deixar a foto respirar.
Até 6 links de navegação mais 1 CTA.

Quando não usar

Página sem hero de mídia. Sobre fundo chapado, o menu transparente vira menu invisível — nesse caso já entre com .is-scrolled fixo.
Navegação com submenus ou mega-menu. Este componente não tem dropdown.
Mais de 6 links: o breakpoint de 1000px vira 1200px e o desktop fica apertado.

Padrão editorial

Slot	Regra
Links	1 a 2 palavras cada, 4 a 6 itens. Substantivos, não verbos: "Soluções", não "Ver soluções".
CTA	3 a 5 palavras, ação concreta: "Fale com um especialista", "Agende seu diagnóstico". Nunca "Contato".
Marca	SVG. Nunca texto estilizado — logo é vetor fornecido pelo cliente.

A ordem dos links espelha a ordem das seções na página. Link que não tem seção correspondente vira página nova, não item de menu.

Como usar

<link rel="stylesheet" href="componentes/navegacao/nav-fixa-vidro/estilo.css">
<script src="componentes/navegacao/nav-fixa-vidro/script.js"></script>

Cole como primeiro filho do <body>, antes do hero.

Ganchos

Gancho	Papel
`[data-nav]`	raiz — o script procura por ele
`.nav.is-scrolled`	estado de vidro, aplicado pelo script
`[data-drawer-open]`	no botão hambúrguer — quem escuta é o `navegacao/drawer-fullscreen`

Pareamento

O hambúrguer aqui não abre nada sozinho: ele só carrega [data-drawer-open]. Quem escuta é o script do drawer. Sem drawer na página o botão fica inerte e nada quebra no console. Se você usa este menu, quase sempre quer o navegacao/drawer-fullscreen junto.

Variações

Sempre com vidro — adicione is-scrolled no HTML e remova o script. Para páginas sem hero de mídia.
Sem CTA — apague .nav-cta. O justify-content:space-between reequilibra sozinho.

Gotchas

A nav carrega .sec-dark no próprio elemento. Ela vive fora de qualquer <section>, então não herda escopo de tom de ninguém — sem a classe, --fg e --rule não resolvem e o texto some.
O sublinhado anima transform, não width. Com width cada frame vira relayout da linha inteira de links.
O limiar é 30px, não 0. Em zero, um toque de trackpad faz o vidro piscar.
O breakpoint é 1000px, não 900. Com 5 links longos mais o CTA, os itens começam a se atropelar antes de a tela "parecer" mobile.
position:fixed exige --nav-h. Todo conteúdo que precisa começar abaixo do menu (hero, .cta-intro sticky) lê essa variável. Mudou a altura do menu, mude o token — não o padding de quem está embaixo.

Histórico

Projeto	Onde	Data	Diferenças
Liberta Wealth	`index.html` e `quem-somos.html`, topo	2026-08	Origem. `.logo` sem prefixo (colidia com o rodapé e o drawer), `.scrolled` em vez de `.is-scrolled`, id `#nav`, borda `#222` crua, e o estado de scroll era calculado dentro do `heroUpdate()` do hero — páginas sem hero dependiam de um `if (!hero)` no meio da função.

Normalizações aplicadas na extração: prefixo em tudo (.logo → .nav-logo); .scrolled → .is-scrolled; id → [data-nav]; borda crua → --rule; #0a0a0a do CTA → --dark; border-radius:24px → --radius-pill; escopo de tom explícito no elemento; desacoplado do hero — o script agora só assina LIB.onScroll e olha scrollY; o hambúrguer virou [data-drawer-open] em vez de id conhecido pelo script do drawer.