:root { --def-font: "Google Sans Flex", sans-serif;
--accent-font: "Google Sans Flex", sans-serif; --type-body-size: 1.0625rem; --type-body-weight: 350;
--type-body-line-height: 1.65;
--type-body-color: #3f424b;
--type-muted-color: var(--color-dark-opacity); --type-small-size: 0.75rem;
--type-small-weight: 350;
--type-small-line-height: 1.35;
--type-medium-size: 0.9375rem; --type-medium-weight: 350;
--type-medium-line-height: 1.65;
--type-large-size: 1.0625rem; --type-large-weight: 350;
--type-large-line-height: 1.65; --type-title-1-weight: 500;
--type-title-2-weight: 480;
--type-title-3-weight: 470;
--type-title-4-weight: 450;
--type-title-5-weight: 450; --type-nav-weight: 450;
--type-button-weight: 450;
--type-input-weight: 350; --type-light-color: var(--color-white);
--type-light-muted-color: var(--color-white-opacity);
} html,
body,
button,
input,
textarea,
select {
font-family: var(--def-font);
}
html {
font-weight: var(--type-body-weight);
line-height: var(--type-body-line-height);
}
body {
color: var(--type-body-color);
} p:not([class]),
li:not([class]) {
font-size: var(--type-body-size);
font-weight: var(--type-body-weight);
line-height: var(--type-body-line-height);
} .text-12 {
font-size: var(--type-small-size);
font-weight: var(--type-small-weight);
line-height: var(--type-small-line-height);
}
.text-14 {
font-size: var(--type-medium-size);
font-weight: var(--type-medium-weight);
line-height: var(--type-medium-line-height);
}
.text-16 {
font-size: var(--type-large-size);
font-weight: var(--type-large-weight);
line-height: var(--type-large-line-height);
} .title-1,
h1 {
font-family: var(--accent-font);
font-weight: var(--type-title-1-weight);
}
.title-2,
h2 {
font-family: var(--accent-font);
font-weight: var(--type-title-2-weight);
}
.title-3,
h3 {
font-family: var(--accent-font);
font-weight: var(--type-title-3-weight);
}
.title-4,
h4 {
font-family: var(--accent-font);
font-weight: var(--type-title-4-weight);
}
.title-5,
h5,
h6 {
font-family: var(--accent-font);
font-weight: var(--type-title-5-weight);
} .header-nav__link,
.header-nav__sublink,
.menu-nav-link,
.footer-nav__link,
.contact-hero__link {
font-weight: var(--type-nav-weight);
}
.btn[data-type="primary"],
.btn[data-type="primary-sm"],
.btn[data-type="primary-light"],
.btn[data-type="secondary"],
.btn[data-type="secondary-light"],
button,
input[type="submit"] {
font-weight: var(--type-button-weight);
} .custom-input,
.custom-input::placeholder,
p#breadcrumbs,
.footer__bottom-inner {
font-weight: var(--type-input-weight);
} .cardsinfo-item__description,
.three-steps-card__text,
.tc-steps-item__description,
.advantages-grid-item__description,
.advantages-grid-item__list,
.homehero__description,
.hero__description,
.faq__description,
.faq-item__content-inner,
.contact-hero-footer__text,
.modal-success__description,
.two-columns__content p,
.two-columns-equal__content p {
font-weight: var(--type-body-weight) !important;
line-height: var(--type-body-line-height);
} .two-columns__content p.text-16,
.two-columns-equal__content p.text-16,
.tc-steps-item__description.text-16 {
font-size: var(--type-large-size);
font-weight: var(--type-large-weight) !important;
line-height: var(--type-large-line-height);
}
.cardsinfo-item__title,
.three-steps-card__title,
.advantages-grid-item__title {
font-weight: var(--type-title-4-weight);
}
.footer-nav__list li,
.footer-nav-socials__list li {
font-weight: var(--type-nav-weight);
} .contact-hero-footer__text,
.footer__bottom,
.footer__bottom a,
.footer-cert__title,
.footer-nav__btn,
.footer-nav-socials__title {
color: var(--type-muted-color);
}
.bg-dark,
.bg-orange {
color: var(--type-light-color);
}
.bg-dark p,
.bg-dark li,
.bg-orange p,
.bg-orange li {
color: var(--type-light-muted-color);
}