Bom dia pessoal! Alguém consegue me dar uma ajuda? As variáveis declaradas no root, contendo as cores utilizadas no projeto, não aparecem no header.css. Só fica aparecendo uma cor, que no meu caso é a cor branca. Nem escrevendo na mão ele aceita as outras cores. Outra aluna estava com a mesma dúvida que eu e fez um post, mas como ninguém respondeu eu resolvi abrir outro. Para contornar esse problema eu tive que replicar o ":root" em todos os arquivos CSS que foram criados no curso, mas sei que isso não é pra se fazer.
/styles css/
@import url("/style/header.css");
:root {
--cor-de-fundo: #EBECEE;
--branco: #FFFFFF;
--laranja: #EB9B00;
--preto: #000000;
}
body {
background-color: var(--cor-de-fundo);
}/header css/
.cabecalho {
background-color: var(--branco);
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
.container {
display: flex;
align-items: center;
}
.cabecalho__menu-hamburguer {
background-image: url("/assets/Menu.svg");
width: 24px;
height: 24px;
display: inline-block;
background-repeat: no-repeat;
background-position: center;
}
.container__imagem {
padding: 0.8em;
}
.lista-menu {
display: none;
position: absolute;
top: 100%;
}
.container__botao:checked ~ .lista-menu {
display: block;
}
.lista-menu__titulo,
.lista-menu__item {
padding: 1em;
background-color: var(--branco);
}
.lista-menu__titulo {
color: #EB9B00; //nessa linha quando tento colocar "color: var(--laranja)" não aparece essa cor, somente --branco
}/html/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style/reset.css">
<link rel="stylesheet" href="style/style.css">
<title>AluraBooks</title>
</head>
<body>
<header class="cabecalho">
<div class="container">
<input type="checkbox" name="" id="menu" class="container__botao">
<label for="menu">
<span class="cabecalho__menu-hamburguer container__imagem"></span>
</label>
<ul class="lista-menu">
<li class="lista-menu__titulo">Categorias</li>
<li class="lista-menu__item">
<a href="#" class="lista-menu__link">Programação</a>
</li>
<li class="lista-menu__item">
<a href="#" class="lista-menu__link">Front End</a>
</li>
<li class="lista-menu__item">
<a href="#" class="lista-menu__link">Infraestrutura</a>
</li>
<li class="lista-menu__item">
<a href="#" class="lista-menu__link">Business</a>
</li>
<li class="lista-menu__item">
<a href="#" class="lista-menu__link">Desing & UX</a>
</li>
</ul>
<img src="assets/Logo.svg" alt="logo da alurabooks" class="container__imagem">
</div>
<div class="container">
<a href="#"><img src="assets/Favoritos.svg" alt="meus favoritos" class="container__imagem"></a>
<a href="#"><img src="assets/Compras.svg" alt="carrinho de compras" class="container__imagem"></a>
<a href="#"><img src="assets/Usuário.svg" alt="meu perfil" class="container__imagem"></a>
</div>
</header>
</body>
</html>