O hover do menu, em três direções

Um filete de 1 px em dourado que entra pela esquerda e sai pela direita — nunca recua pelo mesmo caminho. O texto clareia em 120 ms, mais rápido que o traço: a cor chega primeiro e o dourado assina depois.

→ entre por um item e saia pelo outro para ver a assimetria

Custo

~15 linhas de CSS. Zero JS.

Por que combina

Caixa alta é o cenário ideal do sublinhado: nenhuma letra desce para cruzar o traço. O dourado entra como assinatura, não como enfeite.

Risco

É o efeito mais visto do mundo. O que salva é a assimetria e a velocidade — morno, vira “pobrinho” de novo.

A palavra sobe e a mesma palavra entra por baixo, já em branco. O item troca de estado, não ganha adereço. Verificado funcionando assim no Lusion, em maiúsculas.

Custo

Médio. Dois spans por item no HTML e altura de linha travada em px.

Por que combina

Lê como engenharia, não como agência criativa. Caixa alta é vantagem: a altura da linha é constante.

Risco

É o único que cobra manutenção para sempre: se a altura da linha variar, o clone aparece cortado. E o nosso header encolhe ao rolar.

No item sob o cursor quase nada acontece. O que muda é o resto: os outros cinco recuam e o escolhido fica em pé sozinho. Trata o menu como um sistema, não como seis botões.

→ esta é a que precisa ser sentida, não descrita

Custo

Dois seletores de CSS. Meia hora.

Por que combina

Atenuar em vez de acender é o tom de uma peça institucional escura, e deixa o dourado livre para o CTA.

Risco

Pode ser lido como “não tem efeito”. E só existe no desktop: no celular não há cursor.

As duas juntas. São ortogonais: uma acende o alvo, a outra apaga o resto. Somam ~20 linhas de CSS, nenhum JS, nenhum risco de layout.