1
resposta

Faça como eu fiz: aplicando variáveis Css.

Estilos. Css

:root {
    --cor-primaria-dark: #c13724;
    --cor-primaria-light: #ee6451;
    --cor-secundaria-light: #fff5eb;
    --cor-secundaria-dark: #f5e6d6;
    --cor-terciaria-medio: #cbda74;
    --cor-terciaria-dark: #a2b72b;
    --cor-terciaria-light: #eff2e1;
    --cor-neutra-dark: #444444;
    --cor-neutra-medio: #b9b9b9;
    --cor-neutra-light: #ffffff;
    
    --font-sigmar: "Sigmar", sans-serif;
    --font-poppins: "Poppins", sans-serif;

    --font-size-xxxl: 4.5rem;
    --font-size-xxl: 2.625rem;
    --fonte-size-xl: 2.438rem;
    --fonte-size-l: 1.938rem;
    --fonte-size-xm: 1.563rem;
    --fonte-size-m: 1.25rem;
    --fonte-size-b: 1rem;
    --fonte-size-s: 0.813rem;

    --line-height: 120%;

    --padding-xs: 0.25rem;
    --padding-s: 0.5rem;
    --padding-m: 1rem;
    --padding-l: 1.5rem;
    --padding-xl: 2rem;
    --padding-xxl: 2.5rem;
    --padding-3xl: 3.75rem;
    --padding-4xl: 4rem;
    --padding-5xl: 4.75rem;

    --gap-xs: 0.25rem;
    --gap-s: 0.5rem;
    --gap-m: 1rem;
    --gap-l: 1.5rem;
    --gap-xl: 2rem;
    --gap-xxl: 2.5rem;
    --gap-xxxl: 6rem;
}

h1,
h2,
h3,
h4,
h5 {
    font-family: var(--font-sigmar);
    line-height: var(--line-height);
}

h1 {
    font-size: var(--font-size-xxxl);
}

h2 {
    font-size: var(--font-size-xxl);
}

h3 {
    font-size: var(--font-size-xl);
}

h4 {
    font-size: var(--font-size-l);
}

h5 {
    font-size: var(--font-size-xm);
}

    

Cabeçalho. Css

.cabecalho {
    gap: var(--gap-m);
  padding-bottom: var(--padding-xl);
}  
.alinhamento-cabecalho {
    padding-top: var(--padding-l);
}
.label-busca {
    border: 1px solid var(--cor-neutra-dark);
    padding: var(--padding-s) var(--padding-m);
  }
  .botao-login {
    gap: var(--gap-s);
}
.menu-link {
    color: var(--cor-neutra-dark);
    padding-bottom: var(--padding-xs);
}
&::after {
    background-color: var(--cor-neutra-dark);
}

Destaque.Css

.destaque {
    padding: var(--padding-5xl) 0;
    background-color: var(--cor-secundaria-light);
  }
  
  .destaque-titulo {
    color: var(--cor-terciaria-dark);
  }
  
  .destaque-titulo > span {
    color: var(--cor-primaria-light);
  }
 

Serviços. Css

.servicos {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--gap-xxxl);
    align-items: center;
    width: 100%;
    padding: var(--padding-5xl) 0;
}

.servicos-titulo {
    color: var(--cor-primaria-light);
}

.servicos-lista {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-m);
    justify-content: space-between;
    align-items: center;
}

.servicos-lista>li>.link {
    position: relative;
    background-color: var(--cor-secundaria-light);
    text-decoration: none;
    border-radius: 1rem;
    padding: var(--padding-m) var(--padding-l);
    font-family: var(--font-sigmar);
    font-size: var(--font-size-m);
    color: var(--cor-primaria-light)
}

.link::before {
    content: "";
    position: absolute;
    left: -10px;
    bottom: 50%; 
    width: 35px;
    height: 35px;
    background-size: cover;
    background-repeat: no-repeat;
    transform: scale(0);
    transition: transform 0.3s ease, left 0.3s ease; 
  } 
  
1 resposta

Oi, Estanislau! Como vai?

Obrigada por compartilhar seu código com a comunidade Alura.

Gostei muito de como você estruturou as variáveis no :root e aplicou com consistência nos componentes da interface. Isso mostra um bom domínio dos conceitos de reutilização e organização no CSS.

Você sabia que também pode aplicar variáveis em propriedades como box-shadow ou border-radius? Isso ajuda a manter a identidade visual coesa em todo o projeto.Veja este exemplo:


:root {
  --sombra-padrao: 0 4px 8px rgba(0,0,0,0.1);
  --borda-arredondada: 1rem;
}

.card {
  box-shadow: var(--sombra-padrao);
  border-radius: var(--borda-arredondada);
}

Código acima aplica sombra e borda arredondada usando variáveis CSS, facilitando ajustes futuros.

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!