Solucionado
Quando copiei as propriedades a seguir do Figma, os links do menu ficaram invisíveis.
.lista-menu__link {
color: var(--azul-degrade);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-transform: uppercase;
}Quando deixo só a cor, eles aparecem de novo, mas sem a cor que foi definida no :root
Fala, Davi!
O -webkit-background-clip: text e o background-clip: text são propriedades que permitem que você aplique uma cor de fundo ao texto, mas que só apareça onde há texto e não ocupando todo o espaço do elemento. Isso é útil para criar efeitos como o de texto com cor de fundo gradiente.
No entanto, essas propriedades também possuem um efeito colateral: se você aplicar uma cor de fundo transparente, como -webkit-text-fill-color: transparent, o texto ficará invisível. Isso é porque, como a cor de fundo está transparente, não há nada para cobrir o texto, então ele não é exibido.
Para consertar isso, basta remover ou alterar o valor da propriedade -webkit-text-fill-color. Por exemplo:
.lista-menu__link {
color: var(--azul-degrade);
-webkit-background-clip: text;
background-clip: text;
text-transform: uppercase;
}Espero que isso ajude!