:root {
--azul: #1A2C69;
} .pagina-conteudo,
div.obrigado {
margin-top: 116px;
}
h2 {
&.titulo-secao {
color: var(--azul);
font-family: "Noto Sans";
font-size: 32px;
font-style: normal;
font-weight: 600;
line-height: 46px; margin-bottom: 30px;
}
}
iframe {
width: 100%;
height: 400px;
border-radius: 20px;
}
.accordion-item {
margin-bottom: 20px;
border-radius: 16px !important;
background: var(--azul);
color: #fff;
}
.accordion-button {
border-radius: 16px !important;
background: var(--azul) !important;
color: #fff !important;
transition: all .3s;
font-weight: 300 !important;
font-size: 16px !important;
padding: 1.25rem 1.25rem !important;
&::after {
background-image: url(//construtoraimpacto.com.br/wp-content/themes/impacto/assets/img/open-accordion.svg) !important;
}
}
.btn-cta {
display: inline-flex;
padding: 14px 30px;
border-radius: 6px;
background: #11A8E0;
color: #fff;
transition: all .3s;
text-decoration: none;
&:visited {
color: #fff !important;
}
&:hover {
background: #0d8ebd;
color: #fff;
}
}
.context {
color: #4B5563;
font-family: 'Inter';
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 160%; p {
color: #4B5563;
font-family: 'Inter';
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 160%; margin-bottom: 15px;
}
}
.hero {
background: linear-gradient(145deg, #1A2C69 0.14%, #27419C 99.93%);
padding: 100px 0;
h1 {
color: #FFF;
font-family: "Noto Sans";
font-size: 46px;
font-style: normal;
font-weight: 600;
line-height: 60px; margin-bottom: 20px;
}
.context,
.context p {
color: #FFF;
font-family: "Noto Sans";
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 20px; margin-bottom: 0;
a {
text-decoration: underline;
color: #fff;
}
}
.box-form {
border-radius: 10px;
background: #1A2C69;
padding: 20px 28px;
position: relative;
z-index: 1;
transition: all .3s;
.load-box {
display: none;            
}
&.load {
.blur {
filter: blur(3px);    
}
.load-box {
position: absolute;
display: flex;
align-content: center;
justify-content: center;
top: 0;
left: 0;
background-color: rgba(26, 44, 105, 0.4);
z-index: 2;
width: 100%;
height: 100%;
.spinner-border {
margin: auto;
}
}
}
.header-form {
.box-icon {
border-radius: 5px;
background: rgba(17, 168, 224, 0.20);
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
}
h2 {
color: #FFF;
font-family: "Noto Sans";
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
}
.etapas {
transition: all .3s;
position: relative;
z-index: 1;
.etapa {
min-height: 100%;
transition: all .3s;
display: none;
&.active {
display: block;
}
p {
color: #FFF;
font-family: "Noto Sans";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin-top: 13px;
&.obs {
color: #E5E7EB;
font-family: "Noto Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
}
.info-etapa {
margin-top: 20px;
h3 {
color: #FFF;
font-family: "Noto Sans";
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: normal;
display: inline-block;
}
.passos {
display: inline-block;
padding: 5px 13px;
border-radius: 5px;
background: rgba(17, 168, 224, 0.20);                    
color: #FFF;
font-family: "Noto Sans";
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.progress {
border-radius: 10px;
background: #FFF;
height: 10px;
.progress-bar {
border-radius: 10px;
background: #11A8E0;
}
}
}
.campos {
.campo {
margin-top: 25px;
}
label {
color: #FFF;
font-family: "Noto Sans";
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.label-options {
label {
width: 100%;
border-radius: 5px;
background: rgba(17, 168, 224, 0.20);
color: #fff;
padding: 10px 5%;
cursor: pointer;
transition: all .3s;
&:hover {
background: rgba(17, 168, 224, 0.50);
}
}
input:checked + label {
background: rgba(17, 168, 224, 0.80);
color: #fff;
}
}
input[type="text"],
input[type="email"],
input[type="tel"] {
color: var(--azul);
font-family: "Noto Sans";
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: normal;
height: 40px;
border: none !important;
border-radius: 5px;
padding-left: 15px;
margin-top: 10px;
}
input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="tel"]::placeholder {
color: #CBD3DE;
font-family: "Noto Sans";
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.btn-voltar {
padding: 7px 5px;
border-radius: 5px;
background: rgba(17, 168, 224, 0.20);
color: #FFF;
font-family: "Noto Sans";
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: normal;
border: transparent;
transition: all .3s;
&:hover {
background: #fff;
color: #1A2C69;
}
}
.btn-cta {
padding: 7px 0px;
border: transparent;
border-radius: 5px;
border: 1px solid #11A8E0;
color: #FFF;
font-family: "Noto Sans";
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
}
.msg-erro {
display: none;
background-color: #fff;
color: #ea868f;
font-family: "Noto Sans";
font-size: 15px;
font-style: normal;
font-weight: 600;
padding: 10px 10px;
margin-top: 20px;
border-radius: 5px;
}
}
}
}
}
.bg-sobre {
background-image: url(//construtoraimpacto.com.br/wp-content/themes/impacto/assets/img/simulador-bg-sobre.svg);
background-position: bottom;
background-repeat: no-repeat;
background-size: contain;
}
.funcionamento {
padding: 80px 0;
.box-funcionamento {
border-radius: 10px;
border: 1px solid #CBD3DE;
background: #FFF;
padding: 20px;
position: relative;
transition: all .3s;
z-index: 1;
span {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
border-radius: 50%;
background-color: var(--azul);
transition: all .3s;
color: #fff;
top: -65px;
left: calc(50% - 24px);
z-index: 3;
}
h3 {
color: var(--azul);
font-family: "Noto Sans";
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: normal;
margin-bottom: 15px;
}
p {
color: #4B5563;
font-family: "Noto Sans";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 150%; }
&::after {
content: '';
width: 100%;
height: 1px;
background-color: #CBD3DE;
display: block;
position: absolute;
z-index: 2;
top: -42px;
left: calc(50% + 5px);
}
&.active {
box-shadow: 0 10px 30px rgba(26, 44, 105, 0.15);
color: #fff;
background: var(--azul);
span {
background-color: #FFDA00;
color: var(--azul);
}
h3,
p {
color: #fff;
}
}
}
[class^="col-"] {
&:last-child {
.box-funcionamento {
&::after {
display: none;
}
}
}
}
}
.porques {
background-color: var(--azul);
padding: 80px 0;
h2 {
&.titulo-secao {
color: #fff;
}
}
.box-pq {
border-radius: 10px;
border: 1px solid #CBD3DE;
background: #FFF;
padding: 2rem;
.box-icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 5px;
background: rgba(17, 168, 224, 0.20);
}
h3 {
color: var(--azul);
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: rgba(17, 168, 224, 0.20);
font-family: "Noto Sans";
font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
p {
color: #4B5563;
font-family: "Noto Sans";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 160%; }
}
}
.faq {
padding: 80px 0;
background-image: url(//construtoraimpacto.com.br/wp-content/themes/impacto/assets/img/simulador-bg-faq.svg); background-repeat: no-repeat;
background-size: cover;
}
.obrigado {
.posts {
padding: 60px 0;
background-color: rgba(17, 168, 224, 0.15);
}
.blb-info {
background: #fff;
}
.blb-cat {
color: var(--azul);
font-family: "Noto Sans";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 160%; border-radius: 5px;
background: rgba(17, 168, 224, 0.20);
}
.blb-title {
color: var(--azul);
font-family: "Noto Sans";
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.blb-readmore {
color: #1A2C69;
font-family: "Noto Sans";
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
}
@media (max-width: 991px) {
.hero {
padding: 60px 0;
.context {
border-radius: 5px;
background: rgba(255, 255, 255, 0.20);
padding: 10px 20px;
margin-bottom: 20px;
}
h1 {
color: #FFF;
font-family: "Noto Sans";
font-size: 28px;
font-style: normal;
font-weight: 600;
line-height: 36px; }
}
h2 {
&.titulo-secao {
font-size: 28px;
font-style: normal;
font-weight: 600;
line-height: 36px;
}
}
.funcionamento {
padding: 80px 0;
.box-funcionamento {
border-radius: 10px;
border: 1px solid #CBD3DE;
background: #FFF;
padding: 20px;
position: relative;
transition: all .3s;
&::after {
display: none;
}
span {
top: -38px;
left: 12px;
}
}
}
}