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;
}