newsletter.
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--gap-xl);
width: 100%;
padding: var(--padding-4xl) 0;
background-color: var(--cor-secundaria-light);
}
.newsletter h2 {
color: var(--cor-primaria-light);
}
.newsletter p {
font-size: var(--font-size-xm);
}
Formulário.
.formulario {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--padding-m);
align-items: center;
}
.formulario-input {
padding: var(--padding-s) var(--padding-l);
border: 1px solid var(--cor-neutra-dark);
background-color: transparent;
border-radius: 2rem;
flex: 1 0 200px;
}
.botao-enviar {
padding: var(--padding-s) var(--padding-l);
background-color: var(--cor-primaria-light);
color: var(--cor-neutra-light);
border: none;
border-radius: 32rem;
cursor: pointer;
font-size: var(--font-size-xm);
}
.formulario-input:user-valid {
border: 2px solid var(--cor-terciaria-dark);
}
.formulario-input:user-invalid {
border: 2px solid var(--cor-primaria-dark);
}
Grupo Opções.
.grupo-opcoes {
display: flex;
align-items: center;
gap: var(--padding-s);
flex-wrap: wrap;
}
.opcao input[type="checkbox"] {
position: absolute;
opacity: 0;
cursor: pointer;
}
.opcao input[type="checkbox"] + span {
position: absolute;
left: 0;
width: 20px;
height: 20px;
border: 1px solid var(--cor-neutra-dark);
background-color: transparent;
border-radius: 0.25rem;
}
.opcao input[type="checkbox"]:checked + span {
background-color: var(--cor-primaria-light);
}