:root{
--primary-color: #1B4332;
--light-primary-color: #2c4138;
--darkened-primary-color: #163729;
--accent-color: #C66B3D;
--text-color: #2C2C2C;
--background-color: #F6F7EB;
--darkened-background-color: #EFF1E2;
--line-soft: rgba(27, 67, 50, 0.10);
--card: rgba(246, 247, 235, 0.10);
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
text-decoration: none;
color: inherit;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
*, *::before, *::after {
box-sizing: border-box;
}
@font-face {
font-family: "Anton";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../../fonts/Anton-Regular.woff2") format("woff2");
}
@font-face {
font-family: "Satoshi";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("../../fonts/Satoshi-Variable.woff2") format("woff2");
}
:root {
--type-scale-ratio: 1.272;
--type-base-mobile: 16px;
--type-base-tablet: 20px;
--type-base-desktop: 20px;
--font-family-base: "Satoshi", system-ui, sans-serif;
--font-family-heading: "Anton", system-ui, sans-serif;
--type-base: var(--type-base-desktop);
--type-step--1: calc(var(--type-base) / var(--type-scale-ratio));
--type-step--2: calc(var(--type-step--1) / var(--type-scale-ratio));
--type-step--3: calc(var(--type-step--2) / var(--type-scale-ratio));
--type-step-0: var(--type-base);
--type-step-1: calc(var(--type-step-0) * var(--type-scale-ratio));
--type-step-2: calc(var(--type-step-1) * var(--type-scale-ratio));
--type-step-3: calc(var(--type-step-2) * var(--type-scale-ratio));
--type-step-4: calc(var(--type-step-3) * var(--type-scale-ratio));
--type-step-5: calc(var(--type-step-4) * var(--type-scale-ratio));
--type-step-6: calc(var(--type-step-5) * var(--type-scale-ratio));
--type-xxs: var(--type-step--3);
--type-xs: var(--type-step--2);
--type-sm: var(--type-step--1);
--type-md: var(--type-step-0);
--type-lg: var(--type-step-1);
--type-xl: var(--type-step-2);
--type-xxl: var(--type-step-3);
--type-3xl: var(--type-step-4);
--type-4xl: var(--type-step-5);
--type-5xl: var(--type-step-6);
--type-line-height: 1.5;
--type-heading-line-height: 1.2;
}
@media (max-width: 1024px) {
:root {
--type-base: var(--type-base-tablet);
}
}
@media (max-width: 768px) {
:root {
--type-base: var(--type-base-mobile);
}
}
body {
font-family: var(--font-family-base);
font-size: var(--type-md);
line-height: var(--type-line-height);
}
.text-spacing{
margin-bottom: 1em;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-family-heading);
line-height: var(--type-heading-line-height);
}
.section__title {
font-size: var(--type-lg);
text-transform: uppercase;
color: var(--accent-color);
margin-bottom: var(--space-5);
font-family: var(--font-family-base);
@media (max-width: 1024px) {
margin-bottom: var(--space-4);
}
@media (max-width: 768px) {
margin-bottom: var(--space-3);
}
}
.section__subtitle {
font-size: var(--type-4xl);
text-transform: uppercase;
color: var(--primary-color);
font-family: var(--font-family-heading);
margin-bottom: var(--space-8);
@media (max-width: 1024px) {
margin-bottom: var(--space-6);
}
@media (max-width: 768px) {
margin-bottom: var(--space-5);
}
}
.title{
color: var(--primary-color);
}
.title--accent{
color: var(--accent-color);
}
:root {
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--space-9: 96px;
--space-10: 128px;
}
.nav {
background: var(--background-color);
backdrop-filter: blur(12px);
position: fixed;
width: 100%;
padding-block: 20px;
z-index: 50;
top: 0;
transition:
transform 0.35s ease,
opacity 0.35s ease;
border-bottom: solid 1px var(--primary-color);
}
.nav__inner {
display: flex;
align-items: center;
justify-content: space-between;
padding-inline: var(--space-10);
@media (max-width: 768px) {
padding-inline: var(--space-6);
}
}
.nav--hidden {
transform: translateY(-100%);
opacity: 0;
pointer-events: none;
}
.nav__list {
list-style: none;
display: flex;
align-items: center;
margin: 0;
padding: 0;
}
.nav__el {
font-size: var(--type-md);
}
.nav__logo {
display: block;
width: 50px;
@media (max-width: 768px) {
width: 40px;
}
}
.nav__links {
display: flex;
gap: 24px;
@media (max-width: 768px) {
margin-top: var(--space-7);
flex-direction: column;
}
}
.nav__menu {
gap: 36px;
}
.nav__contact {
display: flex;
gap: 24px;
@media (max-width: 768px) {
position: absolute;
bottom: 10%;
}
}
.nav__contact li {
display: flex;
}
.nav__burger {
display: none;
flex-direction: column;
background: none;
border: none;
cursor: pointer;
padding: 0.5rem;
gap: 0.25rem;
}
@media (max-width: 1024px) {
.nav__menu {
position: fixed;
top: 0;
right: 0;
left: auto;
width: 100%;
height: 100vh;
background-color: var(--background-color);
flex-direction: column;
gap: 1rem;
padding: 2rem 1rem;
transform: translateX(100%);
opacity: 0;
visibility: hidden;
transition:
transform 0.3s ease,
opacity 0.3s ease,
visibility 0.3s ease;
z-index: 100;
}
.nav__menu.nav--open {
transform: translateX(0);
opacity: 1;
visibility: visible;
}
.nav__burger {
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
z-index: 101;
}
}
.footer {
background-color: var(--background-color);
color: var(--primary-color);
padding-top: var(--space-9);
justify-items: center;
font-size: var(--type-xs);
--link-color: var(--background-color);
@media (max-width: 1024px) {
padding-top: var(--space-7);
}
@media (max-width: 768px) {
padding-top: var(--space-7);
}
}
.footer__wrapper{
width: 100%;
@media (min-width: 768px) {
margin-bottom: 20px;
}
}
.footer__subtitle {
text-transform: uppercase;
font-family: var(--font-family-heading);
margin-bottom: 4px;
}
.footer__list {
grid-row: 1;
grid-column: span 3;
display: flex;
flex-direction: column;
gap: 8px;
@media (max-width: 1024px) {
grid-column: 1 / -1;
grid-row: auto;
padding-block: var(--space-5);
border-top: 1px solid color-mix(in srgb, var(--primary-color) 15%, transparent);
align-items: flex-start;
}
}
.footer__list--logo {
display: flex;
gap: 8px;
justify-content: center;
flex-direction: column;
align-items: center;
@media (max-width: 1024px) {
grid-column: 1 / -1;
grid-row: auto;
border-top: none;
padding-block: 0 var(--space-6);
}
}
.footer__complement {
grid-row: 3;
grid-column: span 12;
text-align: center;
padding: 20px 0;
font-size: var(--type-xxs);
width: 100%;
border-top: 1px solid color-mix(in srgb, var(--primary-color) 30%, transparent);
order: 99;
@media (max-width: 1024px) {
grid-column: 1 / -1;
grid-row: auto;
}
}
.grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
padding-inline: var(--space-10);
column-gap: 32px;
@media (max-width: 1024px) {
padding-inline: var(--space-8);
grid-template-columns: repeat(8, 1fr);
column-gap: 20px;
}
@media (max-width: 768px) {
padding-inline: var(--space-6);
grid-template-columns: repeat(5, 1fr);
column-gap: 20px;
}
}
.wrapper {
@media (min-width: 1920px) {
max-width: 1920px;
margin: 0 auto;
}
}
.btn {
padding: 8px 16px;
border: none;
border-radius: 12px;
cursor: pointer;
font-size: var(--type-sm);
}
.btn__primary {
background-color: var(--accent-color);
color: #000000;
overflow: hidden;
position: relative;
transition: color 600ms cubic-bezier(0.55, 0, 0.1, 1);
}
.btn__primary:hover {
color: var(--background-color);
}
.btn__primary > span {
position: relative;
z-index: 5;
}
.btn__primary::after {
content: "";
width: 0;
height: calc(300% + 1em);
position: absolute;
translate: -50% -50%;
inset: 50%;
rotate: 30deg;
background-color: var(--primary-color);
transition: 600ms cubic-bezier(0.55, 0, 0.1, 1);
}
.btn__primary:hover::after {
width: calc(120% + 1em);
}
.btn__primary:active {
scale: 0.98;
filter: brightness(0.9);
}
.link {
position: relative;
}
.link::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 100%;
height: 2px;
background: var(--accent-color);
transform: scaleX(0);
transform-origin: right;
transition: transform 0.4s ease;
}
.link:hover::after {
transform: scaleX(1);
transform-origin: left;
}
img-comparison-slider {
--divider-width: 3px;
width: 100%;
height: 400px;
--default-handle-shadow: 0px 0px 5px rgba(0, 0, 0, 1);
--divider-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
}
img-comparison-slider:focus {
outline: none;
box-shadow: 0px 0px 15px 5px
color-mix(in srgb, var(--primary-color) 50%, transparent);
}
.custom__handle {
transition: transform 0.2s ease;
}
img-comparison-slider:hover {
cursor: grab;
}
img-comparison-slider:hover .custom__handle {
transform: scale(1.2);
}
.before figcaption,
.after figcaption {
background: rgb(from var(--accent-color) r g b / 0.8);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid black;
border-radius: 12px;
padding: 12px;
position: absolute;
top: 28px;
transform: translateY(-50%);
line-height: 100%;
}
.before figcaption {
left: 12px;
}
.after figcaption {
right: 12px;
}
.hero {
padding-top: 180px;
background: var(--background-color);
padding-bottom: var(--space-9);
@media (max-width: 1024px) {
padding-top: 142px;
padding-bottom: var(--space-5);
}
}
.hero__title {
color: var(--primary-color);
font-size: var(--type-5xl);
margin-bottom: 24px;
}
.hero__content {
width: 100%;
grid-column: 1 / 7;
@media (max-width: 1280px) {
grid-column: 1 / 13;
}
@media (max-width: 1024px) {
grid-column: 1 / -1;
}
@media (max-width: 768px) {
grid-column: 1 / -1;
}
}
.hero__img {
border-radius: 20px;
grid-column: 9 / 14;
max-width: 100%;
max-height: 100%;
aspect-ratio: 4 / 5;
z-index: 1;
@media (min-width: 1820px) {
grid-column: 9 / -1;
}
@media (max-width: 1440px) {
grid-column: 8 / 14;
}
@media (max-width: 1280px) {
display: none;
}
}
.hero__cta {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 40px;
@media (max-width: 768px) {
flex-direction: column;
align-items: flex-start;
gap: 0;
margin-top: 32px;
}
}
.hero__link {
width: fit-content;
height: fit-content;
@media (max-width: 768px) {
margin-bottom: var(--space-5);
}
}
.hero__tel {
display: flex;
align-items: center;
gap: 16px;
@media (max-width: 768px) {
border-top: 1px solid var(--line-soft);
padding-top: var(--space-5);
width: 100%;
}
}
.hero__tel--information {
display: flex;
flex-direction: column;
gap: 4px;
}
.hero__tel--icon-span {
background-color: var(--primary-color);
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
border-radius: 12px;
}
.hero__tel--icon {
width: 24px;
height: 24px;
}
.about {
padding-block: var(--space-9);
background-color: var(--primary-color);
color: var(--background-color);
}
.about__title {
grid-column: 1/12;
}
.about__subtitle {
grid-column: 1/7;
color: var(--background-color);
}
.about__content {
grid-column: 1/6;
}
.about__img {
border-radius: 20px;
grid-column: 9/13;
grid-row: 2/4;
max-width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
@media (min-width: 1820px) {
grid-column: 9 / -1;
}
@media (max-width: 1440px) {
grid-column: 8 / 14;
}
}
.about__second-p {
font-weight: 300;
}
@media (max-width: 1024px) {
.about{
padding-block: var(--space-7);
}
.about__title,
.about__subtitle,
.about__content {
grid-column: 1 / -1;
}
.about__img {
grid-column: 1 / -1;
grid-row: 5;
order: -1;
max-height: none;
aspect-ratio: 16 / 10;
width: 100%;
}
.about__content{
margin-bottom: var(--space-5);
}
}
@media (max-width: 768px) {
.about__img {
aspect-ratio: 4 / 3;
}
}
.contact {
background-color: var(--primary-color);
padding-top: var(--space-9);
padding-bottom: 80px;
color: var(--background-color);
@media (max-width: 1024px) {
padding-top: var(--space-7);
padding-bottom: var(--space-7);
}
@media (max-width: 768px) {
padding-top: var(--space-7);
padding-bottom: var(--space-7);
}
}
.contact__title {
grid-column: 1/6;
@media (max-width: 1024px) {
grid-column: 1 / -1;
}
}
.contact__subtitle {
grid-column: 1/8;
color: var(--background-color);
@media (max-width: 1024px) {
grid-column: 1 / -1;
}
}
.contact__list {
display: flex;
flex-direction: column;
gap: 28px;
grid-column: 1/6;
margin-top: var(--space-7);
@media (max-width: 1024px) {
grid-column: 1 / -1;
margin-top: var(--space-5);
margin-bottom: var(--space-6);
order: 1;
}
@media (max-width: 768px) {
margin-top: var(--space-4);
margin-bottom: var(--space-5);
gap: 20px;
}
}
.contact__list li:not(:last-child) {
border-bottom: 1px solid var(--line-soft);
padding-bottom: 28px;
@media (max-width: 768px) {
padding-bottom: 20px;
}
}
.contact__information {
display: flex;
align-items: center;
gap: 16px;
font-size: var(--type-sm);
}
.contact__information--icon-span {
background-color: var(--darkened-background-color);
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
border-radius: 12px;
flex-shrink: 0;
}
.contact__information--icon {
width: 24px;
height: 24px;
}
.contact__information--tel,
.contact__information--email,
.contact__information--address {
display: flex;
flex-direction: column;
gap: 4px;
}
.contact__form {
grid-column: 8 / -1;
grid-row: 2/5;
justify-self: end;
background-color: var(--background-color);
border-radius: 20px;
padding: 32px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
@media (max-width: 1024px) {
grid-column: 1 / -1;
grid-row: auto;
justify-self: stretch;
order: 2;
}
@media (max-width: 768px) {
padding: 24px 20px;
border-radius: 16px;
}
}
.form__title {
font-size: var(--type-xl);
color: var(--primary-color);
text-transform: uppercase;
margin-bottom: 24px;
@media (max-width: 768px) {
font-size: var(--type-lg);
margin-bottom: 20px;
}
}
.form__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-bottom: 1rem;
@media (max-width: 768px) {
grid-template-columns: 1fr;
}
}
.form__group {
display: flex;
flex-direction: column;
gap: 0.35rem;
margin-bottom: 1rem;
}
.form__row .form__group {
margin-bottom: 0;
}
.form__label {
font-size: var(--type-sm);
color: var(--text-color);
font-weight: 500;
}
.form__input,
.form__select,
.form__textarea {
border: 1.5px solid transparent;
border-radius: 8px;
padding: 0.75rem 1rem;
font-size: var(--type-sm);
font-family: var(--font-family-base);
color: var(--text-color);
width: 100%;
outline: none;
transition: border-color 200ms;
}
.form__input:focus,
.form__select:focus,
.form__textarea:focus {
border-color: var(--primary-color);
}
.form__input::placeholder,
.form__textarea::placeholder {
color: #9a9a8a;
}
.form__textarea {
resize: vertical;
min-height: 130px;
}
.form__footer {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
margin-top: 1.5rem;
@media (max-width: 480px) {
flex-direction: column;
align-items: flex-start;
}
}
.form__notice {
font-size: var(--type-xs);
color: #888;
flex: 1;
}
.services {
background-color: var(--primary-color);
padding-block: var(--space-9);
background-image: url('../../images/circles.svg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
@media (max-width: 1024px) {
padding-block: var(--space-7);
}
@media (max-width: 768px) {
padding-block: var(--space-7);
}
}
.services__title {
grid-column: 1/12;
@media (max-width: 1024px) {
grid-column: 1 / -1;
}
}
.services__subtitle {
grid-column: 1/12;
color: var(--background-color);
margin-bottom: var(--space-8);
@media (max-width: 1024px) {
grid-column: 1 / -1;
margin-bottom: var(--space-6);
}
@media (max-width: 768px) {
margin-bottom: var(--space-5);
}
}
.service-card__container {
grid-column: span 12;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 32px;
@media (max-width: 1024px) {
grid-column: span 8;
}
@media (max-width: 768px) {
gap: 20px;
grid-column: span 5;
}
}
.service-card {
display: flex;
flex-direction: column;
color: var(--background-color);
background: rgba(246, 247, 235, 0.1);
border-radius: 20px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10.4px);
-webkit-backdrop-filter: blur(10.4px);
padding: 16px;
width: calc(33.333% - 22px);
min-width: 300px;
@media (max-width: 1280px) {
width: calc(50% - 16px);
}
@media (max-width: 992px) {
width: 100%;
}
}
.service-card__header{
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 28px;
}
.service-card__number{
color: var(--accent-color);
}
.service-card__icon{
background-color: rgba(246, 247, 235, 0.06);
border: solid 1px rgba(246, 247, 235, 0.12);
border-radius: 4px;
padding: 4px;
}
.service-card__title{
font-size: var(--type-xxl);
text-transform: uppercase;
}
.service-card__body{
margin-bottom: 20px;
}
.service-card__footer{
margin-top: auto;
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 16px;
border-top: solid 1px rgba(246, 247, 235, 0.12);
}
.service-card__arrow{
border: solid 1px var(--background-color);
border-radius: 50%;
padding: 4px;
}
.process {
padding-block: var(--space-9);
background-color: var(--background-color);
}
.process__title {
grid-column: 1/13;
@media (max-width: 1024px) {
grid-column: 1/8;
}
@media (max-width: 768px) {
grid-column: 1/5;
}
}
.process__subtitle {
grid-column: 1/13;
@media (max-width: 1024px) {
grid-column: 1/9;
}
@media (max-width: 768px) {
grid-column: 1/6;
}
}
.process__list {
grid-column: 1/13;
display: flex;
gap: 24px;
@media (max-width: 1280px){
flex-wrap: wrap;
}
@media (max-width: 1024px) {
grid-column: 1/9;
}
@media (max-width: 768px) {
grid-column: 1/6;
}
}
.process__el {
padding: 28px 24px;
background-color: white;
border-radius: 12px;
width: 100%;
}
.process__step {
color: var(--accent-color);
font-family: var(--font-family-heading);
font-size: var(--type-4xl);
}
.process__step-title {
color: var(--primary-color);
font-family: var(--font-family-heading);
font-size: var(--type-lg);
}
.process__content{
margin-top: var(--space-2);
}
.works {
padding-block: var(--space-9);
background-color: var(--background-color);
}
.works__title {
grid-column: 1 / -1;
}
.works__subtitle {
grid-column: 1 / -1;
margin-bottom: var(--space-8);
}
.works__grid {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 32px;
width: 100%;
}
.works__card {
display: flex;
flex-direction: column;
}
.works__slider-container {
width: 100%;
margin: 0;
}
.works__slider-container .slider,
.works__slider-container figure,
.works__slider-container img {
width: 100%;
height: auto;
aspect-ratio: 3 / 4;
border-radius: 20px;
overflow: hidden;
object-fit: cover;
margin: 0;
}
.works__slider-container figure {
position: relative;
}
.works__slider-container figcaption {
position: absolute;
top: 24px;
background-color: var(--accent-color);
color: #000000;
padding: 8px 16px;
font-size: var(--type-xs);
font-weight: 600;
border-radius: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
pointer-events: none;
z-index: 2;
}
.works__slider-container .before figcaption {
left: 16px;
}
.works__slider-container .after figcaption {
right: 16px;
}
.works__info {
padding-block: 12px 0;
}
.works__name {
color: var(--text-color);
font-size: var(--type-md);
font-weight: 600;
}
.zones {
background-color: var(--primary-color);
padding-block: var(--space-9);
@media (max-width: 1024px) {
padding-block: var(--space-7);
}
}
.zones__title {
grid-column: 1 / -1;
}
.zones__subtitle {
grid-column: 1 / -1;
color: var(--background-color);
}
.zones__intro {
grid-column: 1 / 8;
margin-bottom: var(--space-7);
color: var(--background-color);
@media (max-width: 1024px) {
grid-column: 1 / -1;
margin-bottom: var(--space-5);
}
}
.zones__grid {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
@media (max-width: 1024px) {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-5);
}
@media (max-width: 640px) {
grid-template-columns: 1fr;
gap: var(--space-4);
}
}
.zones__area {
background: var(--background-color);
border-radius: 12px;
padding: var(--space-5);
border: 1px solid var(--line-soft);
}
.zones__area-title {
font-family: var(--font-family-base);
font-size: var(--type-sm);
font-weight: 700;
text-transform: uppercase;
color: var(--accent-color);
margin-bottom: var(--space-4);
letter-spacing: 0.05em;
}
.zones__area-list {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.zones__area-list li {
font-size: var(--type-sm);
color: var(--text-color);
padding-left: var(--space-3);
position: relative;
}
.zones__area-list li::before {
content: "·";
position: absolute;
left: 0;
color: var(--primary-color);
}
.zones__note {
grid-column: 1 / -1;
margin-top: var(--space-5);
font-size: var(--type-xs);
color: var(--text-color);
opacity: 0.7;
}
.faq {
background: var(--background-color);
padding-block: var(--space-9);
@media (max-width: 1024px) {
padding-block: var(--space-7);
}
}
.faq__title {
grid-column: 1 / -1;
}
.faq__subtitle {
grid-column: 1 / -1;
}
.faq__list {
grid-column: 1 / 9;
display: flex;
flex-direction: column;
gap: var(--space-3);
@media (max-width: 1024px) {
grid-column: 1 / -1;
}
}
.faq__item {
border: 1px solid var(--line-soft);
border-radius: 12px;
overflow: hidden;
}
.faq__item[open] {
border-color: color-mix(in srgb, var(--primary-color) 30%, transparent);
}
.faq__question {
font-family: var(--font-family-heading);
font-size: var(--type-md);
color: var(--primary-color);
cursor: pointer;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-5);
gap: var(--space-4);
}
.faq__question::-webkit-details-marker {
display: none;
}
.faq__question::after {
content: "+";
font-size: var(--type-xl);
line-height: 1;
flex-shrink: 0;
color: var(--accent-color);
transition: transform 0.25s ease;
}
.faq__item[open] .faq__question::after {
transform: rotate(45deg);
}
.faq__answer {
padding: 0 var(--space-5) var(--space-5);
color: var(--text-color);
line-height: 1.6;
font-size: var(--type-sm);
overflow: hidden;
transition: height 0.35s ease;
}
.legal {
padding-top: calc(var(--space-9) + 80px);
padding-bottom: var(--space-9);
background: var(--background-color);
min-height: 70vh;
@media (max-width: 1024px) {
padding-top: calc(var(--space-7) + 80px);
padding-bottom: var(--space-7);
}
}
.legal__inner {
max-width: 800px;
margin: 0 auto;
}
.legal__breadcrumb {
margin-bottom: var(--space-6);
font-size: var(--type-sm);
color: var(--text-color);
opacity: 0.7;
}
.legal__breadcrumb ol {
display: flex;
gap: var(--space-3);
align-items: center;
flex-wrap: wrap;
}
.legal__breadcrumb li:not(:last-child)::after {
content: "›";
margin-left: var(--space-3);
}
.legal__breadcrumb a {
text-decoration: underline;
color: var(--primary-color);
}
.legal__title {
font-size: var(--type-4xl);
color: var(--primary-color);
margin-bottom: var(--space-8);
@media (max-width: 768px) {
font-size: var(--type-3xl);
margin-bottom: var(--space-6);
}
}
.legal__section {
margin-bottom: var(--space-7);
}
.legal__section h2 {
font-size: var(--type-xl);
color: var(--primary-color);
margin-bottom: var(--space-4);
padding-bottom: var(--space-3);
border-bottom: 1px solid var(--line-soft);
}
.legal__section h3 {
font-size: var(--type-lg);
color: var(--text-color);
margin-top: var(--space-5);
margin-bottom: var(--space-3);
}
.legal__section p {
margin-bottom: var(--space-4);
line-height: 1.7;
color: var(--text-color);
}
.legal__section ul {
padding-left: var(--space-5);
margin-bottom: var(--space-4);
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.legal__section ul li {
list-style: disc;
line-height: 1.6;
color: var(--text-color);
}
.legal__section a {
color: var(--primary-color);
text-decoration: underline;
}
.legal__update {
margin-top: var(--space-7);
font-size: var(--type-xs);
color: var(--text-color);
opacity: 0.6;
font-style: italic;
}
.legal__back {
display: inline-flex;
margin-top: var(--space-6);
}
html {
scroll-behavior: smooth;
}
#hero,
#about,
#process,
#services,
#works,
#zones,
#faq,
#contact {
scroll-margin-top: var(--space-6);
}