[Bug] Opções do Header ficaram transparentes

Boa tarde Ismael Tudo jóia ?

Eu acredito que o seu problema ocorre porque você está definindo a cor do texto para transparente utilizando a propriedade -webkit-text-fill-color: transparent;. Isso faz com que o texto fique transparente em todos os momentos, incluindo quando o mouse está passando sobre o elemento e o estilo de hover é aplicado.

Para corrigir isso, você precisa especificar uma cor diferente para o texto quando o elemento estiver em estado de hover. No seu caso, você pode adicionar a propriedade -webkit-text-fill-color: var(--cor-primaria); ao seletor .lista__menu__item > .lista__menu__link:hover. Isso fará com que a cor do texto seja aplicada apenas quando o mouse estiver sobre o elemento.

Aqui está um exemplo atualizado do seu código:

.lista__menu__link {
    background: var(--cor-degrade);
    -webkit-background-clip: text;
    background-clip: text; 
    -webkit-text-fill-color: transparent;
    font-family: var(--fonte-primaria);
    font-size: 1rem;
}

.lista__menu__item:hover {
    background: var(--cor-degrade);
}

.lista__menu__item > .lista__menu__link:hover {
    -webkit-text-fill-color: var(--cor-primaria);
    text-decoration: none;
}

Dessa forma, o texto terá uma cor preenchida quando o mouse estiver sobre o elemento e a cor definida pela variável --cor-primaria será aplicada.

Lembre-se de ajustar as variáveis de cor (--cor-degrade e --cor-primaria) de acordo com as cores definidas no seu projeto.

Atenciosamente,

Wankerson Rodrigues

Então, o "transparent" do código estava ali para aplicar a cor degradê ao texto, tanto que antes de aplicar o hover ele estava normal, apenas ficou dessa forma quando apliquei o hover.

Peço desculpas pela minha resposta anterior. Se você deseja aplicar um efeito de degradê ao texto quando o mouse está sobre o elemento, mantendo o efeito ao aplicar o hover, você pode utilizar a propriedade background-clip: text em conjunto com um gradiente de fundo. Aqui está um exemplo atualizado do seu código:

.lista__menu__link {
    font-family: var(--fonte-primaria);
    font-size: 1rem;
    background: linear-gradient(to right, var(--cor-primaria), var(--cor-secundaria));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.lista__menu__item:hover .lista__menu__link {
    background: none;
    -webkit-text-fill-color: var(--cor-primaria);
    text-decoration: none;
}

Neste código, o gradiente de fundo é aplicado ao texto utilizando a propriedade background do CSS. A propriedade -webkit-background-clip: text garante que o gradiente seja aplicado somente ao texto. A propriedade -webkit-text-fill-color: transparent torna o texto transparente para que o gradiente de fundo seja visível.

No seletor :hover do .lista__menu__item, o gradiente de fundo é removido com background: none, e a cor do texto é alterada para var(--cor-primaria) utilizando a propriedade -webkit-text-fill-color, para que o texto fique visível no estado de hover.

Lembre-se de ajustar as variáveis de cor (--cor-primaria e --cor-secundaria) de acordo com as cores definidas no seu projeto. Se não for isso, peço desculpas novamente, estou com dificuldade para entender hehe.

Atenciosamente, Wankerson Rodrigues