* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
.court-cost-screen__arrow {
display: none;
}
body {
min-width: 320px;
font-family: Arial, Helvetica, sans-serif, Montserrat, Mulish;
color: #332a22;
background:
url("img/background.jpg")
center top / cover fixed;
overflow-x: hidden;
}
.special-price{
display: none;
}
/* =====================================================
HEADER
===================================================== */
.header {
width: 100%;
height: 87px;
background: #2B2622;
}
.header__inner {
width: 1192px;
height: 94px;
margin: 0 auto;
display: flex;
align-items: center;
}
/* =====================================================
ЛОГО
===================================================== */
.header__logo {
width: 255px;
height: 32px;
display: flex;
align-items: center;
flex-shrink: 0;
text-decoration: none;
}
.header__logo img {
display: block;
width: 255px;
height: 50px;
object-fit: contain;
}
/* =====================================================
ГОРОД
===================================================== */
.header__city {
width: 208px;
height: 60px;
font-family: "Mulish";
margin-left: 30px;
display: flex;
align-items: center;
flex-shrink: 0;
}
.header__city-icon {
display: block;
width: 44px;
height: 44px;
margin-right: 10px;
border-radius: 50%;
object-fit: cover;
}
.header__city-info {
display: flex;
flex-direction: column;
font-family: "Mulish";
color: #fff;
line-height: 1.25;
white-space: nowrap;
}
.header__city-info strong {
font-weight: 800;
font-style: ExtraBold;
font-size: 14px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
}
.header__city-info span {
margin-top: 4px;
font-weight: 300;
font-style: Medium;
font-size: 14px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
}
/* =====================================================
ТЕЛЕФОН
===================================================== */
.header__phone {
width: 252px;
margin-left: 0;
color: #fff;
text-decoration: none;
font-family: "Mulish";
font-weight: 700;
font-style: Bold;
font-size: 20px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
}
/* =====================================================
КНОПКИ HEADER
===================================================== */
.header__button {
width: 175px;
height: 50px;
padding: 0;
border: none;
border-radius: 5px;
font-size: 11px;
font-weight: 700;
cursor: pointer;
flex-shrink: 0;
}
.header__button--orange {
margin-right: 22px;
background: #c99358;
color: #fff;
font-family: "Mulish";
font-weight: 800;
font-style: ExtraBold;
font-size: 14px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
vertical-align: middle;
}
.header__button--white {
background: #f8f8f7;
color: #171513;
font-family: "Mulish";
font-weight: 700;
font-style: Bold;
font-size: 14px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
vertical-align: middle;
}
/* =====================================================
МЕНЮ
===================================================== */
.header__menu {
height: 65px;
margin-left: 17px;
display: flex;
align-items: center;
flex-shrink: 0;
}
/* =====================================================
ТЕКСТ МЕНЮ
===================================================== */
.header__menu-text {
margin-right: 12px;
writing-mode: vertical-rl;
transform: rotate(180deg);
color: #fff;
font-family: "Mulish", sans-serif;
font-size: 11px;
font-weight: 300;
font-style: normal;
line-height: 100%;
letter-spacing: 0;
text-align: center;
}
/* =====================================================
КНОПКА
===================================================== */
.header__menu-button {
width: 67px;
height: 55px;
padding: 0;
margin: 0;
border: none;
background: transparent;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
gap: 7px;
cursor: pointer;
}
/* =====================================================
ТРИ ПОЛОСКИ
===================================================== */
.header__menu-button span {
width: 65px;
height: 11px;
background: #fff;
border-radius: 2px;
opacity: 1;
display: block;
}
/* =====================================================
HOVER
===================================================== */
.header__menu-button:hover span {
opacity: 0.75;
}
/* =====================================================
ACTIVE — КРЕСТИК
===================================================== */
.header__menu-button.active span:nth-child(1) {
transform: translateY(10px) rotate(45deg);
}
.header__menu-button.active span:nth-child(2) {
opacity: 0;
}
.header__menu-button.active span:nth-child(3) {
transform: translateY(-10px) rotate(-45deg);
}
/* =====================================================
HERO
===================================================== */
.hero {
width: 100%;
height: 743px;
min-height: 716px;
overflow: hidden;
background:
url("img/herocost.png")
center top / cover;
}
.navigation {
width: 1192px;
max-width: calc(100% - 32px);
min-height: 66px;
margin: 15px auto 0;
padding: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
box-sizing: border-box;
}
/* Переключатель города */
.gz-city-switch {
flex: 0 0 auto;
margin-left: 0;
}
/* Общий стиль основных кнопок */
.navigation > a,
.navigation__services > .navigation__services-link {
height: 50px;
width: auto !important;
min-width: 0;
flex: 0 1 auto;
padding: 0 12px;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
border: none;
border-radius: 10px;
background: linear-gradient(
380deg,
#967968 0%,
#C39980 100%
);
color: #fff;
text-decoration: none;
white-space: nowrap;
font-family: "Mulish", sans-serif;
font-size: 15px;
font-weight: 600;
line-height: 1;
}
/* Контейнер услуг */
.navigation__services {
position: relative;
flex: 0 1 auto;
min-width: 0;
}
.navigation a {
height: 50px;
padding: 0 29px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background:
linear-gradient(
380deg,
#967968 0%,
#C39980 100%
);
color: #fff;
text-decoration: none;
white-space: nowrap;
font-family: "Mulish";
font-weight: 600;
font-style: SemiBold;
font-size: 17px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
/* ТОЧНЫЕ ШИРИНЫ КНОПОК */
.navigation a:nth-child(1) {
width: 109px;
}
.navigation a:nth-child(2) {
width: 121px;
}
.navigation a:nth-child(3) {
width: 157px;
}
.navigation a:nth-child(4) {
width: 150px;
}
.navigation a:nth-child(5) {
width: 125px;
}
.navigation a:nth-child(6) {
width: 160px;
}
.navigation a:nth-child(7) {
width: 143px;
}
.navigation a:nth-child(8) {
width: 143px;
}
/* =====================================================
MOBILE HEADER
===================================================== */
@media (max-width: 767px) {
/* ================= HEADER ================= */
.header {
width: 100%;
height: 47px;
background: #2B2622;
}
.header__inner {
width: 100%;
height: 47px;
margin: 0;
padding: 0 17px 0 20px;
display: flex;
align-items: center;
}
/* ================= ЛОГОТИП ================= */
.header__logo {
width: 88px;
height: 25px;
margin: 0;
display: flex;
align-items: center;
flex-shrink: 0;
order: 1;
}
.header__logo img {
display: block;
width: 88px;
height: 25px;
object-fit: contain;
object-position: left center;
}
/* ================= ГОРОД ================= */
.header__city {
display: none;
}
/* ================= КНОПКА "НАПИСАТЬ В МАХ" ================= */
.header__button--white {
width: 67px;
height: 23px;
margin: 0 16px 0 35px;
padding: 0;
border: none;
border-radius: 4px;
background: #f8f8f7;
color: #171513;
font-family: "Mulish", sans-serif;
font-size: 7px;
font-weight: 700;
line-height: 1;
text-align: center;
cursor: pointer;
flex-shrink: 0;
order: 2;
}
/* ================= КНОПКА "ПОЗВОНИТЬ" ================= */
.header__button--orange {
display: none;
}
/* ================= ТЕЛЕФОН ================= */
.header__phone {
width: auto;
margin: 0;
color: #fff;
text-decoration: none;
font-family: "Mulish", sans-serif;
font-size: 9px;
font-weight: 700;
line-height: 1;
white-space: nowrap;
flex-shrink: 0;
order: 3;
}
/* ================= МЕНЮ ================= */
.header__menu {
height: 47px;
margin-left: auto;
display: flex;
align-items: center;
flex-shrink: 0;
order: 4;
}
/* ================= ТЕКСТ "МЕНЮ" ================= */
.header__menu-text {
margin-right: 8px;
writing-mode: vertical-rl;
transform: rotate(180deg);
color: #fff;
font-family: "Mulish", sans-serif;
font-size: 10px;
font-weight: 300;
line-height: 1;
letter-spacing: 0;
white-space: nowrap;
text-align: center;
}
/* ================= КНОПКА ГАМБУРГЕР ================= */
.header__menu-button {
width: 36px;
height: 39px;
padding: 0;
margin: 0;
border: none;
background: transparent;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
gap: 5px;
cursor: pointer;
}
/* ================= ТРИ ПОЛОСКИ ================= */
.header__menu-button span {
width: 36px;
height: 6px;
display: block;
background: #fff;
border-radius: 1px;
opacity: 1;
}
/* ================= HOVER ================= */
.header__menu-button:hover span {
opacity: 0.75;
}
/* ================= ACTIVE — КРЕСТИК ================= */
.header__menu-button.active span:nth-child(1) {
transform: translateY(11px) rotate(45deg);
}
.header__menu-button.active span:nth-child(2) {
opacity: 0;
}
.header__menu-button.active span:nth-child(3) {
transform: translateY(-11px) rotate(-45deg);
}
}
/* =====================================================
МОБИЛЬНАЯ НАВИГАЦИЯ
ЕДИНЫЙ ЭКРАН ПО ДИЗАЙНУ
===================================================== */
.mobile-navigation {
display: none;
}
@media screen and (max-width: 767px) {
/* =====================================================
ОТКРЫТОЕ МОБИЛЬНОЕ МЕНЮ
===================================================== */
.mobile-navigation {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 346px;
margin: 0;
padding: 0;
box-sizing: border-box;
background: #2B2622;
z-index: 100000;
display: none;
overflow: hidden;
}
.mobile-navigation.active {
display: block;
}
/* =====================================================
НОВАЯ ШАПКА ВНУТРИ МЕНЮ
ВАЖНО:
ЭТО НЕ .header
===================================================== */
.mobile-menu-header {
position: absolute;
top: 0;
left: 0;
width: 360px;
height: 48px;
display: flex;
align-items: center;
box-sizing: border-box;
background: #2B2622;
z-index: 10;
}
/* =====================================================
ЛОГОТИП
===================================================== */
.mobile-menu-header__logo {
position: absolute;
left: 29px;
top: 10px;
width: 29px;
height: 29px;
object-fit: contain;
}
/* =====================================================
ГОРОД
===================================================== */
.mobile-menu-header__city {
position: absolute;
left: 97px;
top: 10px;
width: 106px;
height: 29px;
display: flex;
align-items: center;
}
.mobile-menu-header__city-icon {
width: 23px;
height: 23px;
margin-right: 7px;
border-radius: 50%;
object-fit: cover;
}
.mobile-menu-header__city-info {
display: flex;
flex-direction: column;
color: #FFFFFF;
white-space: nowrap;
}
.mobile-menu-header__city-info strong {
margin: 0;
font-family: "Mulish";
line-height: 9px;
font-weight: 800;
font-style: "ExtraBold";
font-size: 8px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
}
.mobile-menu-header__city-info span {
margin: 2px 0 0;
font-family: "Mulish";
font-size: 6px;
font-weight: 400;
line-height: 7px;
}
/* =====================================================
КНОПКА ПОЗВОНИТЬ
===================================================== */
.mobile-menu-header__call {
position: absolute;
left: 226px;
top: 10px;
width: 87px;
height: 24px;
padding: 0;
border: none;
border-radius: 4px;
background: #C6925C;
color: #FFFFFF;
font-family: "Mulish";
font-size: 7px;
font-weight: 800;
line-height: 24px;
text-align: center;
}
/* =====================================================
МЕНЮ + КРЕСТИК
ОСТАВЛЯЕМ СПРАВА,
ГДЕ БЫЛ БУРГЕР
===================================================== */
.mobile-menu-header__menu {
position: absolute;
top: 0;
right: -17px;
width: 25px;
height: 25px;
margin: 0;
padding: 0;
}
/* =====================================================
НАДПИСЬ МЕНЮ
===================================================== */
.mobile-menu-header__menu > span {
position: absolute;
left: -25px;
top: 8px;
width: 7px;
color: #fff;
font-family: "Mulish";
font-size: 10px;
font-weight: 300;
line-height: 1;
writing-mode: vertical-rl;
transform: rotate(180deg);
text-align: center;
}
/* =====================================================
КРЕСТИК — ТОЧНО НА МЕСТЕ БУРГЕРА
===================================================== */
.mobile-menu-header__close {
position: absolute;
/* такое же положение, как у .header__menu-button */
right: 0;
top: 4px;
width: 36px;
height: 39px;
margin: 0;
padding: 0;
border: none;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
/* =====================================================
ЛИНИИ КРЕСТИКА
===================================================== */
.mobile-menu-header__close span {
position: absolute;
left: 0;
top: 17px;
width: 36px;
height: 6px;
margin: 0;
background: #fff;
border-radius: 1px;
}
/* первая линия */
.mobile-menu-header__close span:first-child {
transform: rotate(45deg);
}
/* вторая линия */
.mobile-menu-header__close span:last-child {
transform: rotate(-45deg);
}
/* =====================================================
ПУНКТИРНАЯ РАМКА
===================================================== */
.mobile-navigation::before {
content: "";
position: absolute;
top: 53px;
left: 50%;
width: 207px;
height: 275px;
transform: translateX(-50%);
box-sizing: border-box;
border: 1px dashed rgba(255, 255, 255, 0.85);
opacity: 1;
}
/* =====================================================
КНОПКИ НАВИГАЦИИ
===================================================== */
.mobile-navigation__links {
position: absolute;
top: 70px;
left: 50%;
width: 182px;
transform: translateX(-50%);
display: grid;
grid-template-columns: 89px 89px;
column-gap: 8px;
row-gap: 15px;
}
.mobile-navigation__links a {
width: 89px;
height: 27px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
border-radius: 5px;
background: linear-gradient(
180deg,
#CBA68F 0%,
#A9826D 100%
);
color: #FFFFFF;
text-decoration: none;
font-family: "Montserrat", sans-serif;
font-weight: 600;
font-style: normal;
font-size: 10px;
line-height: 100%;
letter-spacing: 0;
text-align: center;
}
/* =====================================================
НИЖНИЙ ЛОГОТИП
===================================================== */
.mobile-navigation__logo {
position: absolute;
top: 245px;
left: 50%;
width: 122px;
height: 16px;
transform: translateX(-50%);
margin: 0;
padding: 0;
object-fit: contain;
opacity: 1;
}
/* =====================================================
НИЖНИЕ КОНТАКТЫ
===================================================== */
.mobile-navigation__contacts {
position: absolute;
top: 285px;
left: 50%;
width: 158px;
height: 20px;
transform: translateX(-50%);
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
}
/* =====================================================
КНОПКА «НАПИСАТЬ В MAX»
===================================================== */
.mobile-navigation__max {
width: 67px;
height: 20px;
margin: 0;
padding: 3px 5px;
box-sizing: border-box;
border: 1px solid #2B2622;
border-radius: 5px;
background: #FFFFFF;
color: #2B2622;
font-family: "Mulish", sans-serif;
font-weight: 700;
font-style: normal;
font-size: 6px;
line-height: 100%;
letter-spacing: 0;
text-align: center;
vertical-align: middle;
display: flex;
align-items: center;
justify-content: center;
}
/* =====================================================
НОМЕР ТЕЛЕФОНА
===================================================== */
.mobile-navigation__phone {
margin: 0;
padding: 0;
color: #FFFFFF;
text-decoration: none;
font-family: "Mulish", sans-serif;
font-weight: 700;
font-style: normal;
font-size: 8px;
line-height: 100%;
letter-spacing: 0;
white-space: nowrap;
}
.navigation{
display: none;
}
}
/* =====================================================
УБИРАЕМ ГОРИЗОНТАЛЬНЫЙ СКРОЛЛ НА ТЕЛЕФОНЕ
===================================================== */
html,
body {
width: 100%;
max-width: 100%;
overflow-x: hidden !important;
}
@media screen and (max-width: 767px) {
html {
width: 100%;
max-width: 100%;
overflow-x: hidden !important;
}
body {
width: 100%;
max-width: 100%;
overflow-x: hidden !important;
}
/* Нельзя элементам расширять страницу */
* {
max-width: 100%;
}
/* Но картинки не должны ломать свои размеры */
img {
max-width: 100%;
}
}
@media screen and (max-width: 767px) {
html,
body {
width: 100%;
max-width: 100vw;
overflow-x: clip !important;
}
.navigation,
.hero__content,
.trust-container,
.situations-header,
.situations-list {
max-width: 100%;
}
}
@media (max-width: 600px) {
.inheritance-problems__pause {
width: 16px !important;
height: 16px !important;
margin-top: 50px;
margin: 0 auto 20px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
}
.inheritance-problems__pause img {
display: block !important;
width: 16px !important;
height: 16px !important;
min-width: 16px !important;
max-width: 16px !important;
min-height: 16px !important;
max-height: 16px !important;
object-fit: contain !important;
margin: 0 !important;
padding: 0 !important;
position: static !important;
transform: none !important;
}
}
/* =====================================
БУРГЕР НА ПК — ВСЕГДА ТРИ ПОЛОСКИ
===================================== */
@media screen and (min-width: 768px) {
.header__menu-button.active span:nth-child(1) {
transform: none;
}
.header__menu-button.active span:nth-child(2) {
opacity: 1;
}
.header__menu-button.active span:nth-child(3) {
transform: none;
}
}
/* =========================================================
ПЕРВЫЙ ЭКРАН — НАСЛЕДСТВО
========================================================= */
.inheritance-hero {
position: relative;
width: 100%;
height: 830px;
overflow: hidden;
box-sizing: border-box;
/*
ЗДЕСЬ СТОИТ ТВОЙ ЕДИНЫЙ ФОН.
Замени только путь к своей картинке.
*/
background-image: url("img/herocost2.png");
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
color: #3d3023;
}
/* =========================================================
ВЕРХНЯЯ ПОЛОСКА
========================================================= */
.inheritance-hero__top {
position: absolute;
top: 13px;
left: 0;
width: 100%;
height: 67px;
box-sizing: border-box;
background: #967968CC 80%;
z-index: 5;
text-align: center;
color: #fff;
padding-top: 9px;
}
.inheritance-hero__top-line {
font-family: Arial, sans-serif;
font-size: 19px;
line-height: 23px;
font-weight: 700;
}
.inheritance-hero__top-text {
margin-top: 2px;
font-size: 19px;
line-height: 23px;
font-weight: 700;
}
/* =========================================================
ЛЕВЫЙ КОНТЕНТ
========================================================= */
.inheritance-hero__content {
position: absolute;
left: calc(50% - 642px);
top: 193px;
width: 575px;
z-index: 10;
}
/* =========================================================
ЗАГОЛОВОК
========================================================= */
.inheritance-hero__content h1 {
margin: 0;
width: 600px;
padding: 0;
margin-top: -70px;
margin-left: 55px;
line-height: 43px;
letter-spacing: -0.5px;
color: #B88A4433 20%;
font-family: "Montserrat";
font-weight: 800;
font-style: "ExtraBold";
font-size: 36px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
}
/* =========================================================
СПИСОК
========================================================= */
.inheritance-hero__list {
width: 537px;
margin-top: 27px;
margin-left: 50px;
padding: 17px 14px 12px 0;
box-sizing: border-box;
background: #DAB5854D 30%;
}
.inheritance-hero__list-item {
display: flex;
align-items: center;
height: 24px;
margin: 0;
}
.inheritance-hero__list-item span {
display: block;
width: 24px;
margin-right: 0;
flex-shrink: 0;
color: #aa8060;
font-size: 20px;
line-height: 20px;
transform: translateX(-4px);
}
.inheritance-hero__list-item p {
margin: 0;
line-height: 23px;
color: #493b2d;
font-family: "Montserrat";
font-weight: 400;
font-style:"Regular";
font-size: 18px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
}
/* =========================================================
ОПИСАНИЕ ПОД СПИСКОМ
========================================================= */
.inheritance-hero__description {
display: flex;
align-items: flex-start;
margin-top: 28px;
margin-left: 55px;
}
.inheritance-hero__description-icon {
width: 35px;
text-align: center;
}
.inheritance-hero__description-icon img {
width: 35px;
margin-top: 5px;
}
.inheritance-hero__description p {
margin: 0 0 0 25px;
line-height: 23px;
color: #1F1F1F;
font-family: "Montserrat";
font-weight: 400;
font-style: "Regular";
font-size: 16px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
}
/* =========================================================
КНОПКИ
========================================================= */
.inheritance-hero__buttons {
display: flex;
align-items: center;
gap: 30px;
margin-top: 36px;
margin-left: 50px;
}
.inheritance-hero__button {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
border-radius: 10px;
text-decoration: none;
text-align: center;
line-height: 21px;
transition:
transform 0.2s ease,
opacity 0.2s ease;
}
.inheritance-hero__button:hover {
transform: translateY(-2px);
opacity: 0.92;
}
/* ОРАНЖЕВАЯ */
.inheritance-hero__button--orange {
width: 295px;
height: 73px;
background: #C6925C;
color: #fff;
font-family: "Montserrat";
font-weight: 600;
font-style: "SemiBold";
font-size: 18px;
leading-trim: NONE;
line-height: 20px;
letter-spacing: 0%;
text-align: center;
}
/* КОРИЧНЕВАЯ */
.inheritance-hero__button--brown {
width: 259px;
height: 73px;
background: #4C3E29;
color: #fff;
font-family: "Montserrat";
font-weight: 700;
font-style: Bold;
font-size: 15px;
leading-trim: NONE;
line-height: 20px;
letter-spacing: 0%;
text-align: center;
}
.inheritance-hero__button--brown span {
display: inline;
}
/* =========================================================
КРАСНАЯ ПОЛОСА — ВНЕ СЕКЦИИ
========================================================= */
.inheritance-hero__bottom {
width: 100%;
height: 106px;
box-sizing: border-box;
background: #8D3B32;
color: #fff;
padding-top: 17px;
text-align: center;
}
.inheritance-hero__bottom-title {
line-height: 21px;
font-family: "Montserrat";
font-weight: 600;
font-style: "SemiBold";
font-size: 16px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
.inheritance-hero__bottom-text {
margin-top: 7px;
line-height: 20px;
font-family: "Montserrat";
font-weight: 400;
font-style: "Regular";
font-size: 16px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
/* =========================================================
МОБИЛЬНАЯ ВЕРСИЯ — НАСЛЕДСТВО
========================================================= */
.inheritance-hero-mobile {
display: none;
}
@media screen and (max-width: 767px) {
/* =====================================================
ОСНОВА
===================================================== */
.inheritance-hero {
display: none;
}
.inheritance-hero-mobile {
position: relative;
display: block;
width: 100%;
height: 630px;
overflow: hidden;
box-sizing: border-box;
color: #3d3023;
/*
* ВЕРХНЯЯ И НИЖНЯЯ ЧАСТЬ —
* БУМАЖНЫЙ ФОН
*/
background-image: url("img/inheritance-bg-mobile.jpg");
background-repeat: repeat-y;
background-position: center top;
background-size: 100% auto;
}
/* =====================================================
ВЕРХНЯЯ КОРИЧНЕВАЯ ПОЛОСКА
===================================================== */
.inheritance-hero-mobile__top {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 58px;
padding: 10px 17px 0;
box-sizing: border-box;
background: #967968CC 80%;
z-index: 10;
text-align: center;
color: #fff;
}
.inheritance-hero-mobile__top-line {
margin: 0;
line-height: 11px;
font-family: "Montserrat";
font-weight: 700;
font-style: Bold;
font-size: 10px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
.inheritance-hero-mobile__top-text {
margin-top: 1px;
line-height: 11px;
font-family: "Montserrat";
font-weight: 700;
font-style: Bold;
font-size: 10px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
/* =====================================================
ЗАГОЛОВОК
===================================================== */
.inheritance-hero-mobile__title {
position: absolute;
top: 78px;
left: 0;
width: 100%;
margin: 0;
padding: 0 18px;
box-sizing: border-box;
z-index: 5;
text-align: center;
color: #B88A4433 20%;
font-family: "Montserrat";
line-height: 21px;
font-weight: 800;
font-style: "ExtraBold";
font-size: 18px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
/* =====================================================
ЦЕНТРАЛЬНАЯ ФОТОГРАФИЯ
===================================================== */
.inheritance-hero-mobile__photo {
position: absolute;
top: 156px;
left: 0;
width: 100%;
height: 215px;
overflow: hidden;
z-index: 2;
}
.inheritance-hero-mobile__photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
/* сдвигаем саму фотографию вправо */
object-position: 100% center;
}
/* =====================================================
СПИСОК
===================================================== */
.inheritance-hero-mobile__list {
position: absolute;
top: 371px;
left: 0;
width: 100%;
height: 121px;
padding: 13px 8px 8px;
box-sizing: border-box;
background: rgba(218, 181, 133, 0.30);
z-index: 4;
}
.inheritance-hero-mobile__item {
display: flex;
align-items: center;
width: 100%;
height: 25px;
margin: 0;
padding: 0;
}
.inheritance-hero-mobile__item span {
display: block;
width: 23px;
min-width: 23px;
color: #ad8567;
font-size: 20px;
line-height: 20px;
transform: translateX(-1px);
}
.inheritance-hero-mobile__item p {
margin: 0;
color: #493b2d;
font-family: "Montserrat";
line-height: 13px;
white-space: nowrap;
font-weight: 400;
font-style: "Regular";
font-size: 11px;
leading-trim: NONE;
line-height: 25px;
letter-spacing: 0%;
}
/* =====================================================
ОПИСАНИЕ
===================================================== */
.inheritance-hero-mobile__description {
position: absolute;
top: 510px;
left: 0;
display: flex;
align-items: flex-start;
width: 100%;
padding: 0 20px 0 30px;
box-sizing: border-box;
z-index: 5;
}
.inheritance-hero-mobile__description-icon {
width: 27px;
min-width: 27px;
}
.inheritance-hero-mobile__description-icon img {
display: block;
width: 22px;
margin: 5px auto 0;
}
.inheritance-hero-mobile__description p {
margin: 0 0 0 15px;
width: 258px;
color: #1f1f1f;
font-family: "Montserrat";
line-height: 11px;
font-weight: 400;
font-style: "Regular";
font-size: 10px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
}
/* =====================================================
КНОПКИ
===================================================== */
.inheritance-hero-mobile__buttons {
position: absolute;
top: 566px;
left: 0;
display: flex;
justify-content: center;
width: 100%;
padding: 0 21px;
box-sizing: border-box;
gap: 65px;
z-index: 6;
}
.inheritance-hero-mobile__button {
display: flex;
align-items: center;
justify-content: center;
width: 146px;
height: 39px;
box-sizing: border-box;
border-radius: 5px;
text-align: center;
text-decoration: none;
font-family: "Montserrat";
line-height: 11px;
color: #fff;
font-weight: 400;
font-style: "Regular";
font-size: 10px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
.inheritance-hero-mobile__button--orange {
background: #C6925C;
}
.inheritance-hero-mobile__button--brown {
width: 146px;
background: #4C3E29;
font-weight: 400;
font-style: "Regular";
font-size: 10px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
.hero {
background: none !important;
}
}
/* =========================================================
НИЖНИЙ БЛОК — МОБИЛЬНАЯ ВЕРСИЯ
========================================================= */
@media screen and (max-width: 767px) {
.inheritance-hero__bottom {
width: 100%;
height: auto;
min-height: 100px;
box-sizing: border-box;
background: #8D3B32;
color: #fff;
padding: 14px 20px 16px;
margin-top: -120px;
text-align: center;
}
.inheritance-hero__bottom-title {
margin: 0;
margin-top: 15px;
line-height: 15px;
text-align: center;
color: #fff;
font-family: "Montserrat";
font-weight: 600;
font-style: SemiBold;
font-size: 10px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
.inheritance-hero__bottom-text {
margin-top: 8px;
font-family: "Montserrat";
line-height: 13px;
text-align: center;
color: #fff;
font-weight: 400;
font-style: "Regular";
font-size: 10px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
}
/* =====================================================
STATISTICS
===================================================== */
.statistics {
width: 100%;
height: 100px;
background: #fff;
}
.statistics__inner {
width: 1180px;
height: 40px;
margin: 0 auto;
margin-top: 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
/* ОДИН ЭЛЕМЕНТ */
.statistics__item {
height: 60px;
display: flex;
align-items: flex-start;
white-space: nowrap;
}
/* БОЛЬШАЯ ЦИФРА */
.statistics__number {
position: relative;
color: #3A3027;
font-family: "Montserrat";
line-height: 1;
margin-right: 12px;
padding-top: 8px;
font-weight: 700;
font-style: Bold;
font-size: 30px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
}
/* ЗВЁЗДОЧКА-КАРТИНКА */
.statistics__number-icon {
position: absolute;
width: 14px;
height: 14px;
top: -5px;
right: -7px;
object-fit: contain;
}
/* ТЕКСТ СПРАВА */
.statistics__text {
display: flex;
flex-direction: column;
padding-top: 7px;
color: #756B62;
font-family: "Montserrat";
font-size: 13px;
line-height: 1.25;
font-weight: 400;
font-style: Bold;
font-size: 13px;
}
.statistics__text strong {
color: #40372F;
font-weight: 700;
}
.statistics__text span {
display: block;
}
/* =====================================================
STATISTICS — MOBILE
360px × 195px
===================================================== */
@media (max-width: 767px) {
.statistics {
position: relative;
width: 100vw;
max-width: 100vw;
height: 195px;
margin-top: 20px;
margin-left: calc(50% - 50vw);
margin-right: 0;
padding: 0;
box-sizing: border-box;
background: #ffffff;
overflow: hidden;
}
.statistics__inner {
position: relative;
width: 100%;
height: 195px;
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* =================================================
ОБЩИЙ ITEM
================================================= */
.statistics__item {
position: absolute;
display: flex;
align-items: center;
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* =================================================
1 — 10 ЛЕТ
================================================= */
.statistics__item:nth-child(1) {
left: 19px;
top: 20px;
width: 145px;
height: 42px;
font-family: "Montserrat";
font-weight: 700;
font-style: Bold;
font-size: 20px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
}
/* =================================================
2 — +200
================================================= */
.statistics__item:nth-child(2) {
left: 185px;
top: 20px;
width: 156px;
height: 42px;
font-family: "Montserrat";
font-weight: 700;
font-style: Bold;
font-size: 20px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
}
/* =================================================
3 — 97%
================================================= */
.statistics__item:nth-child(3) {
left: 19px;
top: 82px;
width: 145px;
height: 42px;
font-family: "Montserrat";
font-weight: 700;
font-style: Bold;
font-size: 20px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
}
/* =================================================
4 — 0
================================================= */
.statistics__item:nth-child(4) {
left: 50%;
top: 136px;
width: 100px;
height: 42px;
transform: translateX(-50%);
font-family: "Montserrat";
font-weight: 700;
font-style: Bold;
font-size: 30px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
}
/* =================================================
5 — 100%
================================================= */
.statistics__item:nth-child(5) {
left: 185px;
top: 82px;
width: 156px;
height: 42px;
font-family: "Montserrat";
font-weight: 700;
font-style: Bold;
font-size: 20px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
}
/* =================================================
ЧИСЛА
================================================= */
.statistics__number {
position: relative;
flex-shrink: 0;
color: #1F1F1F;
font-family: "Montserrat";
font-size: 21px;
line-height: 21px;
font-weight: 700;
white-space: nowrap;
}
/* =================================================
ЗВЁЗДОЧКА
================================================= */
.statistics__number-icon {
position: absolute;
width: 20px;
height: 9px;
top: -8px;
right: -20px;
margin: 0;
object-fit: contain;
}
/* =================================================
ТЕКСТ
================================================= */
.statistics__text {
width: 77px;
margin-left: 13px;
color: #B88A4433 20%;
font-family: "Montserrat";
line-height: 9px;
font-weight: 400;
white-space: nowrap;
font-size: 9px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
}
.statistics__text span {
display: block;
}
.statistics__text strong {
color: #1F1F1F;
font-weight: 700;
}
/* =================================================
НИЖНИЙ 0
================================================= */
.statistics__item:nth-child(4) {
flex-direction: column;
justify-content: flex-start;
align-items: center;
width: 100%;
}
.statistics__item:nth-child(4) .statistics__number {
margin: 0;
}
.statistics__item:nth-child(4) .statistics__text {
position: absolute;
width: 255px;
top: 34px;
left: 50%;
transform: translateX(-50%);
width: 300px;
margin: 0;
text-align: center;
white-space: nowrap;
}
}
/* =========================================================
INHERITANCE PRICE
========================================================= */
.inheritance-price {
position: relative;
width: 100%;
min-height: 1420px;
overflow: hidden;
margin-top: 50px;
background:
url("img/background.png")
center top / cover no-repeat;
color: #2b2622;
}
/* =========================================================
КОНТЕЙНЕР
========================================================= */
.inheritance-price__container {
position: relative;
width: 1100px;
min-height: 1120px;
margin: 0 auto;
}
/* =========================================================
РУБЛЬ
========================================================= */
.inheritance-price__ruble {
position: absolute;
top: 38px;
left: 50%;
width:54px;
height: 54px;
transform: translateX(-50%);
object-fit: contain;
z-index: 10;
}
/* =========================================================
ЗАГОЛОВОК
========================================================= */
.inheritance-price__title {
position: relative;
margin: 0;
padding-top: 100px;
color: #B88A4433 20%;
font-family: "Montserrat";
letter-spacing: 0;
text-align: center;
z-index: 10;
font-weight: 800;
font-style: "ExtraBold";
font-size: 44px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
/* =========================================================
ОПИСАНИЕ
========================================================= */
.inheritance-price__intro {
position: relative;
width: 1096px;
margin: 25px auto 0;
color: #000000;
font-family: "Montserrat";
font-weight: 400;
font-size: 20px;
line-height: 17px;
text-align: center;
z-index: 10;
}
/* =========================================================
ЧЕЛОВЕК
========================================================= */
.inheritance-price__man {
position: absolute;
top: 300px;
left: -543px;
width: 1350px;
height: auto;
z-index: 2;
opacity: 0.4;
pointer-events: none;
}
/* =========================================================
ДОМ
========================================================= */
.inheritance-price__house {
position: absolute;
top: 390px;
right: -300px;
opacity: 0.6;
width: 1000px;
height: auto;
z-index: 1;
pointer-events: none;
}
/* =========================================================
МАШИНА
========================================================= */
.inheritance-price__car {
position: absolute;
top: 895px;
right: -220px;
width: 529px;
height: auto;
opacity: 0.6;
z-index: 3;
pointer-events: none;
}
/* =========================================================
БЕЛАЯ КАРТОЧКА
========================================================= */
.inheritance-price__white-card {
position: absolute;
top: 350px;
left: 50%;
width: 900px;
height: 573px;
padding: 32px 42px;
box-sizing: border-box;
background: rgba(255, 255, 255, 0.88);
border-radius: 20px;
z-index: 5;
transform: translateX(-50%);
box-shadow:
0 5px 20px rgba(75, 50, 25, 0.03);
}
/* =========================================================
ГАЛОЧКА
========================================================= */
.inheritance-price__check {
position: absolute;
top: 13px;
right: 14px;
width: 50px;
height: 50px;
opacity: 0.3;
object-fit: contain;
}
/* =========================================================
ЗАГОЛОВОК БЕЛОЙ КАРТОЧКИ
========================================================= */
.inheritance-price__card-title {
margin: 0 0 22px;
color: #211e1b;
font-family: "Montserrat";
line-height: 22px;
text-align: center;
font-weight: 600;
font-style: "SemiBold";
font-size: 28px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
/* =========================================================
ПУНКТЫ
========================================================= */
.inheritance-price__items {
display: flex;
flex-direction: column;
gap: 30px;
}
/* =========================================================
ОТДЕЛЬНЫЙ ПУНКТ
========================================================= */
.inheritance-price__item {
display: flex;
align-items: flex-start;
gap: 14px;
}
/* =========================================================
ИКОНКА ПУНКТА
========================================================= */
.inheritance-price__item-icon {
width: 48px;
height: 45px;
flex: 0 0 30px;
object-fit: contain;
}
/* =========================================================
ТЕКСТ ПУНКТА
========================================================= */
.inheritance-price__item p {
margin: 0;
padding-top: 1px;
color: #24211e;
font-family: "Montserrat";
line-height: 15px;
font-weight: 500;
font-style: Medium;
font-size: 20px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
}
/* =========================================================
ЧЁРНАЯ КАРТОЧКА
========================================================= */
.inheritance-price__dark-card {
position: absolute;
top: 940px;
left: 50%;
width: 900px;
height: 230px;
padding: 26px 45px;
box-sizing: border-box;
background: #2B2622;
border-radius: 20px;
z-index: 6;
transform: translateX(-50%);
}
/* =========================================================
КРЕСТИК СПРАВА
========================================================= */
.inheritance-price__dark-close {
position: absolute;
top: 9px;
right: 13px;
width: 50px;
height: 50px;
opacity: 0.4;
object-fit: contain;
}
/* =========================================================
ЗАГОЛОВОК ЧЁРНОЙ КАРТОЧКИ
========================================================= */
.inheritance-price__dark-title {
margin: 0 0 17px;
color: #fff;
font-family: "Montserrat";
line-height: 20px;
text-align: center;
font-weight: 500;
font-style: Medium;
font-size: 28px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
/* =========================================================
ПУНКТЫ ЧЁРНОЙ КАРТОЧКИ
========================================================= */
.inheritance-price__dark-items {
display: flex;
flex-direction: column;
margin-top: 40px;
gap: 15px;
}
.inheritance-price__dark-item {
display: flex;
align-items: center;
gap: 14px;
}
.inheritance-price__dark-icon {
width: 24px;
height: 24px;
flex: 0 0 24px;
object-fit: contain;
}
.inheritance-price__dark-item p {
margin: 0;
color: #fff;
font-family: "Montserrat";
line-height: 14px;
font-weight: 500;
font-style: Medium;
font-size: 20px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
}
/* =========================================================
ВАЖНО
========================================================= */
.inheritance-price__important {
position: absolute;
top: 1200px;
left: 0;
width: 100%;
text-align: center;
z-index: 10;
}
/* =========================================================
ИКОНКА ПРЕДУПРЕЖДЕНИЯ
========================================================= */
.inheritance-price__warning {
width: 41px;
height: 41px;
margin: 0 auto 17px;
display: block;
object-fit: contain;
}
/* =========================================================
ЗАГОЛОВОК ВАЖНО
========================================================= */
.inheritance-price__important h3 {
margin: 0 0 14px;
color: #211e1b;
font-family: "Montserrat";
line-height: 18px;
font-weight: 700;
font-style: Bold;
font-size: 20px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
/* =========================================================
ТЕКСТ ВАЖНО
========================================================= */
.inheritance-price__important p {
margin: 0 auto;
color: #2b2622;
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size: 20px;
line-height: 28px;
letter-spacing: 0;
text-align: center;
}
/* =========================================================
МОБИЛЬНАЯ ВЕРСИЯ — БЛОК «СТОИМОСТЬ НАСЛЕДСТВЕННОГО ДЕЛА»
========================================================= */
@media (max-width: 767px) {
/* =====================================================
ОСНОВНОЙ БЛОК
===================================================== */
.inheritance-price {
position: relative;
width: 100%;
min-height: 1840px;
height: 1840px;
margin-top: 0;
overflow: hidden;
background:
url("img/background.png")
center top / cover no-repeat;
color: #2b2622;
}
/* =====================================================
КОНТЕЙНЕР
===================================================== */
.inheritance-price__container {
position: relative;
width: 100%;
height: 1840px;
min-height: 1840px;
margin: 0;
box-sizing: border-box;
}
/* =====================================================
РУБЛЬ
===================================================== */
.inheritance-price__ruble {
position: absolute;
top: 14px;
left: 50%;
width: 18px;
height: 18px;
margin: 0;
transform: translateX(-50%);
object-fit: contain;
z-index: 20;
}
/* =====================================================
ЗАГОЛОВОК
===================================================== */
.inheritance-price__title {
position: absolute;
top: 56px;
left: 20px;
right: 20px;
width: auto;
margin: 0;
padding: 0;
color: #3b332d;
font-family: "Montserrat";
font-weight: 800;
font-style: ExtraBold;
font-size: 16px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
letter-spacing: 0;
text-align: center;
z-index: 15;
}
/* =====================================================
ВВОДНЫЙ ТЕКСТ
===================================================== */
.inheritance-price__intro {
position: absolute;
top: 132px;
left: 27px;
right: 27px;
width: auto;
margin: 0;
padding: 0;
color: #000000;
font-family: "Montserrat";
font-weight: 500;
font-style: Medium;
font-size: 10px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
text-align: center;
z-index: 15;
}
/* =====================================================
ЧЕЛОВЕК
===================================================== */
.inheritance-price__man {
position: absolute;
top: 201px;
left: -19px;
width: 201px;
height: auto;
margin: 0;
opacity: 0.4;
z-index: 3;
pointer-events: none;
}
/* =====================================================
ДОМ
===================================================== */
.inheritance-price__house {
position: absolute;
top: 202px;
right: 10px;
width: 236px;
height: auto;
margin: 0;
opacity: 0.6;
z-index: 2;
pointer-events: none;
}
/* =====================================================
БЕЛАЯ КАРТОЧКА
===================================================== */
.inheritance-price__white-card {
position: absolute;
top: 290px;
left: 0;
width: 100%;
height: 880px;
margin: 0;
padding: 17px 25px 25px;
box-sizing: border-box;
background: rgba(255, 255, 255, 0.86);
border-radius: 10px;
transform: none;
z-index: 10;
box-shadow:
0 4px 15px rgba(75, 50, 25, 0.025);
}
/* =====================================================
ГАЛОЧКА
===================================================== */
.inheritance-price__check {
position: absolute;
top: 10px;
right: 7px;
width: 25px;
height: 25px;
margin: 0;
opacity: 0.3;
object-fit: contain;
z-index: 20;
}
/* =====================================================
ЗАГОЛОВОК БЕЛОЙ КАРТОЧКИ
===================================================== */
.inheritance-price__card-title {
width: 270px;
margin: 0 auto 17px;
padding: 0;
color: #000000;
font-family: "Montserrat";
font-weight: 600;
font-style: SemiBold;
font-size: 20px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
letter-spacing: 0;
text-align: center;
}
/* =====================================================
ИКОНКИ ПУНКТОВ
===================================================== */
.inheritance-price__item-icon {
width: 48px;
height: 45px;
flex: 0 0 48px;
margin: 0;
object-fit: contain;
}
/* =====================================================
СПИСОК
===================================================== */
/* =====================================================
СПИСОК
===================================================== */
.inheritance-price__items {
display: flex;
flex-direction: column;
width: 100%;
margin: 0;
padding: 0;
gap: 0;
}
/* =====================================================
КАЖДЫЙ ПУНКТ
===================================================== */
.inheritance-price__item {
position: relative;
display: block;
width: 100%;
margin: 0;
padding: 0;
}
/* =====================================================
ИКОНКИ ПУНКТОВ СКРЫВАЕМ
ОНИ НЕ ДОЛЖНЫ СДВИГАТЬ ТЕКСТ
===================================================== */
.inheritance-price__item-icon {
display: none;
}
/* =====================================================
ИКОНКА СУДА ТОЛЬКО ПЕРЕД ПЕРВЫМ ПУНКТОМ
===================================================== */
.inheritance-price__item:first-child::before {
content: "";
display: block;
width: 48px;
height: 48px;
margin: 0 0 17px 0;
background:
url("img/court.png")
center / contain no-repeat;
}
/* =====================================================
ТЕКСТ ПУНКТОВ
ВСЕ НАЧИНАЮТСЯ С ОДНОЙ ЛЕВОЙ ЛИНИИ
===================================================== */
.inheritance-price__item p {
width: 100%;
margin: 0;
padding: 0;
color: #000000;
font-family: "Montserrat";
letter-spacing: 0;
text-align: left;
font-weight: 500;
font-style: Medium;
font-size: 15px;
leading-trim: NONE;
line-height: 25px;
letter-spacing: 0%;
}
/* =====================================================
ОТСТУП ПОСЛЕ ПЕРВОГО ПУНКТА
===================================================== */
.inheritance-price__item:nth-child(1) {
margin-bottom: 30px;
}
/* =====================================================
ОТСТУП ПОСЛЕ ВТОРОГО ПУНКТА
===================================================== */
.inheritance-price__item:nth-child(2) {
margin-bottom: 30px;
}
/* =====================================================
ОТСТУП ПОСЛЕ ТРЕТЬЕГО ПУНКТА
===================================================== */
.inheritance-price__item:nth-child(3) {
margin-bottom: 30px;
}
/* =====================================================
ОТСТУП ПОСЛЕ ЧЕТВЁРТОГО ПУНКТА
===================================================== */
.inheritance-price__item:nth-child(4) {
margin-bottom: 30px;
}
/* =====================================================
ОТСТУП ПОСЛЕ ПЯТОГО ПУНКТА
===================================================== */
.inheritance-price__item:nth-child(5) {
margin-bottom: 30px;
}
/* =====================================================
ПОСЛЕДНИЙ ПУНКТ БЕЗ ОТСТУПА
===================================================== */
.inheritance-price__item:nth-child(6) {
margin-bottom: 0;
}
/* =====================================================
МАШИНА
===================================================== */
.inheritance-price__car {
position: absolute;
top: 1170px;
left: 50%;
width: 309px;
height: auto;
margin: 0;
right: auto;
transform: translateX(-50%);
opacity: 0.62;
z-index: 4;
pointer-events: none;
}
/* =====================================================
ЧЁРНАЯ КАРТОЧКА
===================================================== */
.inheritance-price__dark-card {
position: absolute;
top: 1361px;
left: 0;
width: 100%;
height: 203px;
margin: 0;
padding: 23px 31px;
box-sizing: border-box;
background: #2B2622;
border-radius: 10px;
transform: none;
z-index: 12;
}
/* =====================================================
КРЕСТИК СПРАВА
===================================================== */
.inheritance-price__dark-close {
display: none;
}
/* =====================================================
ЗАГОЛОВОК ЧЁРНОЙ КАРТОЧКИ
===================================================== */
.inheritance-price__dark-title {
width: 100%;
margin: 0;
padding: 0;
color: #fff;
font-family: "Montserrat";
font-weight: 500;
font-style: Medium;
font-size: 14px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
letter-spacing: 0;
text-align: left;
}
/* =====================================================
ПУНКТЫ ЧЁРНОЙ КАРТОЧКИ
===================================================== */
.inheritance-price__dark-items {
display: flex;
flex-direction: column;
width: 100%;
margin-top: 27px;
gap: 10px;
}
.inheritance-price__dark-item {
display: flex;
align-items: center;
width: 100%;
margin: 0;
padding: 0;
gap: 19px;
}
/* =====================================================
КРЕСТИК ПУНКТА
===================================================== */
.inheritance-price__dark-icon {
width: 19px;
height: 19px;
flex: 0 0 19px;
margin: 0;
object-fit: contain;
}
/* =====================================================
ТЕКСТ ЧЁРНЫХ ПУНКТОВ
===================================================== */
.inheritance-price__dark-item p {
flex: 1;
margin: 0;
padding: 0;
color: #fff;
font-family: "Montserrat";
font-weight: 500;
font-style: Medium;
font-size: 10px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
letter-spacing: 0;
text-align: left;
}
/* =====================================================
БЛОК «ВАЖНО»
===================================================== */
.inheritance-price__important {
position: absolute;
top: 1612px;
left: 0;
width: 100%;
margin: 0;
padding: 0 20px;
box-sizing: border-box;
text-align: center;
z-index: 10;
}
/* =====================================================
ИКОНКА ПРЕДУПРЕЖДЕНИЯ
===================================================== */
.inheritance-price__warning {
display: block;
width: 45px;
height: 45px;
margin: 0 auto 27px;
object-fit: contain;
}
/* =====================================================
ЗАГОЛОВОК «ВАЖНО»
===================================================== */
.inheritance-price__important h3 {
margin: 0 0 24px;
padding: 0;
color: #151210;
font-family: "Montserrat";
font-weight: 700;
font-style: Bold;
font-size: 16px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
letter-spacing: 0;
text-align: center;
}
/* =====================================================
ТЕКСТ «ВАЖНО»
===================================================== */
.inheritance-price__important p {
width: 320px;
max-width: 100%;
margin: 0 auto;
padding: 0;
color: #2b2622;
font-family: "Montserrat";
font-weight: 500;
font-style: Medium;
font-size: 16px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
letter-spacing: 0;
text-align: center;
}
.inheritance-price__item:not(:first-child) .inheritance-price__item-icon {
display: none;
}
}
/* =====================================
ОСНОВА
===================================== */
.quiz-section {
width: 100%;
min-height: 100vh;
padding: 35px 20px 40px;
}
.quiz-wrapper {
width: 100%;
max-width: 950px;
margin: 0 auto;
text-align: center;
}
/* =====================================
ИКОНКА СВЕРХУ
===================================== */
.quiz-refresh {
width: 51px;
height: 51px;
margin: 0 auto 25px;
}
.quiz-refresh img {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
}
/* =====================================
ЗАГОЛОВКИ
===================================== */
.quiz-title {
color: #2B2622;
font-family: "Montserrat";
font-weight: 800;
font-size: 44px;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
.quiz-subtitle {
margin-bottom: 25px;
color: #2B2622;
font-family: "Montserrat";
font-weight: 600;
font-style: "SemiBold";
font-size: 24px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
.quiz-description {
max-width: 968px;
margin: 0 auto 45px;
color: #2B2622;
font-family: "Montserrat";
font-weight: 400;
font-size: 18px;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
.quiz-description strong {
font-weight: 700;
}
/* =====================================
КОНТЕЙНЕР КВИЗА
===================================== */
.quiz-box {
width: 100%;
min-height: 453px;
display: grid;
grid-template-columns: 1fr 295px;
text-align: left;
border-radius: 10px;
overflow: hidden;
background:
url("img/quiz-paper.png")
center / cover no-repeat;
box-shadow:
0 5px 25px rgba(80, 60, 35, 0.05);
}
/* =====================================
ЛЕВАЯ ЧАСТЬ
===================================== */
.quiz-content {
padding: 34px 32px 30px;
display: flex;
flex-direction: column;
min-width: 0;
}
.question-title {
color: #2B2622;
margin-bottom: 36px;
font-family: "Montserrat";
font-weight: 700;
font-size: 26px;
line-height: 100%;
letter-spacing: 0%;
}
/* =====================================
ПРОГРЕСС
===================================== */
.progress {
width: 100%;
height: 20px;
background:
rgba(255, 255, 255, 0.65);
border-radius: 20px;
overflow: hidden;
margin-bottom: 40px;
}
.progress-fill {
height: 100%;
width: 20%;
background: #bd8a3d;
border-radius: 20px;
transition:
width 0.35s ease;
}
/* =====================================
ОТВЕТЫ
===================================== */
.answers {
display: flex;
flex-direction: column;
gap: 0px;
}
.answer {
position: relative;
display: flex;
align-items: center;
cursor: pointer;
color: #2B2622;
font-family: "Montserrat";
font-weight: 400;
font-size: 20px;
line-height: 38px;
letter-spacing: 0%;
}
.answer input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.answer-circle {
width: 22px;
height: 22px;
flex: 0 0 22px;
margin-right: 15px;
border-radius: 50%;
background:
rgba(255, 255, 255, 0.65);
border:
1px solid rgba(185, 148, 90, 0.12);
position: relative;
transition: 0.2s ease;
}
.answer input:checked + .answer-circle {
background: #B88A44;
}
.answer:hover .answer-circle {
box-shadow:
0 0 0 3px
rgba(189, 138, 61, 0.12);
}
/* =====================================
НАВИГАЦИЯ
===================================== */
.quiz-navigation {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: auto;
padding-top: 35px;
}
.back-button {
border: 0;
background: transparent;
font-family: "Montserrat";
font-weight: 400;
font-size: 22px;
color: #2B2622;
cursor: pointer;
padding: 10px 0;
transition: 0.2s;
}
.back-button:hover {
opacity: 0.65;
}
.next-button {
border: 0;
min-width: 142px;
height: 48px;
border-radius: 10px;
background: #c88f4c;
color: #fff;
font-family: "Montserrat";
font-size: 20px;
font-weight: 700;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
transition: 0.2s ease;
}
.next-button:hover {
background: #b97e3c;
transform:
translateY(-1px);
}
.next-button:active {
transform:
translateY(0);
}
.fingerprint {
width: 26px;
height: 26px;
object-fit: contain;
}
/* =====================================
ПРАВАЯ ЧАСТЬ
===================================== */
.quiz-sidebar {
display: flex;
flex-direction: column;
gap: 7px;
padding-right: 5px;
}
.quiz-photo {
width: 100%;
height: 235px;
overflow: hidden;
border-radius: 10px;
}
.quiz-photo img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
/* =====================================
КАРТОЧКА
===================================== */
.quiz-contact {
flex: 1;
border:
1px dotted #4d4a47;
border-radius: 10px;
background:
#F7F7F7;
height: 277px;
padding: 12px 15px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
border-width: 1px;
border-style: dashed;
}
.question-icon {
width: 25px;
height: 25px;
object-fit: contain;
margin-bottom: 8px;
}
.question-counter {
margin-bottom: 17px;
color: #2B2622;
font-family: "Montserrat";
font-weight: 500;
font-size: 26px;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
.company-logo {
width: 253px;
max-width: 100%;
height: 33px;
object-fit: contain;
margin-bottom: 12px;
}
.max-button {
min-width: 175px;
height: 50px;
padding: 0 15px;
margin-top: 20px;
background:
rgba(255, 255, 255, 0.7);
border:
1px solid #c7c1ba;
border-radius: 5px;
color: #302c29;
font-family: "Mulish";
font-weight: 700;
font-size: 14px;
cursor: pointer;
margin-bottom: 20px;
transition: 0.2s;
}
.max-button:hover {
background: #fff;
}
.phoney {
margin-top: auto;
padding-bottom: 1px;
font-family: "Mulish";
font-weight: 500;
font-size: 24px;
line-height: 100%;
text-align: center;
}
/* =====================================
ОШИБКА
===================================== */
.answer-error {
color: #a0442d;
font-size: 14px;
margin-top: 15px;
display: none;
}
.answer-error.show {
display: block;
}
/* =====================================
ПОДСКАЗКА MULTIPLE
===================================== */
.multiple-hint {
margin-top: -12px;
margin-bottom: 20px;
color: #2B2622;
font-family: Montserrat;
font-weight: 400;
font-size: 18px;
line-height: 100%;
letter-spacing: 0%;
}
/* =====================================
ФИНАЛЬНЫЙ ЭКРАН
===================================== */
.quiz-result {
display: none;
grid-column: 1 / -1;
width: 100%;
min-height: 453px;
text-align: left;
background:
url("img/quiz-paper.png")
center / cover no-repeat;
}
.quiz-result.active {
display: grid;
grid-template-columns: 1fr 295px;
}
/* =====================================
ФОРМА ФИНАЛЬНОГО ЭКРАНА
===================================== */
.result-form {
padding: 34px 32px 30px;
display: flex;
flex-direction: column;
min-width: 0;
}
.result-form h2 {
margin: 0 0 18px;
color: #2B2622;
font-family: "Montserrat";
font-weight: 500;
font-style: Medium;
font-size: 16px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
}
.result-form strong{
font-weight: 700;
}
.result-form ol {
margin: 0 0 18px;
margin-left: -20px;
padding-left: 25px;
color: #2B2622;
font-family: "Montserrat";
font-weight: 400;
font-size: 16px;
line-height: 100%;
letter-spacing: 0%;
}
.result-form input[type="text"],
.result-form input[type="tel"] {
transform: translateY(20px);
width: 256px;
height: 54px;
margin-bottom: 10px;
padding: 0 16px;
border: none;
border-radius: 10px;
outline: none;
background: rgba(216, 174, 116, 0.20);
color: #2B2622;
font-family: "Montserrat", sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 100%;
letter-spacing: 0;
box-sizing: border-box;
}
.result-form input[type="text"]::placeholder,
.result-form input[type="tel"]::placeholder {
color: #2B2622;
font-family: "Montserrat", sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 100%;
letter-spacing: 0;
opacity: 1;
}
/* =====================================
СОГЛАСИЕ
===================================== */
.result-checkbox {
display: flex;
align-items: flex-start;
width: 210px;
margin: 0 0 9px;
cursor: pointer;
}
.result-checkbox input {
position: absolute;
opacity: 0;
}
.result-checkbox span {
width: 10px;
height: 10px;
flex: 0 0 9px;
margin-top: 30px;
margin-right: 7px;
border-radius: 50%;
background: #B88A44;
}
.result-checkbox small {
width: 401px;
margin-top: 20px;
color: #2B2622;
font-family: "Montserrat";
font-weight: 400;
font-style: Regular;
font-size: 10px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
}
.result-checkbox input:not(:checked) + span {
opacity: 0.55;
}
/* =====================================
КНОПКА ПОЛУЧИТЬ
===================================== */
.result-submit {
width: 252px;
height: 60px;
border: 0;
border-radius: 7px;
background: #C6925C;
color: #fff;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: "Montserrat";
transition: 0.2s ease;
}
.result-submit strong {
font-family: "Montserrat";
font-weight: 900;
font-style: Black;
font-size: 15px;
leading-trim: NONE;
line-height: 20px;
letter-spacing: 0%;
text-align: center;
}
.result-submit span {
font-family: "Montserrat";
font-weight: 600;
font-style: SemiBold;
font-size: 15px;
leading-trim: NONE;
line-height: 20px;
letter-spacing: 0%;
text-align: center;
}
.result-submit:hover {
background: #B97E3C;
}
/* =====================================
ПРАВАЯ ЧАСТЬ ФИНАЛА
===================================== */
.result-sidebar {
width: 100%;
display: flex;
flex-direction: column;
gap: 7px;
padding-right: 5px;
}
/* =====================================
ФОТО
===================================== */
.result-photo {
width: 100%;
height: 235px;
overflow: hidden;
border-radius: 10px;
}
.result-photo img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
/* =====================================
КАРТОЧКА
===================================== */
.result-contact {
flex: 1;
min-height: 200px;
border: 1px dashed #4d4a47;
border-radius: 10px;
background: #F7F7F7;
padding: 12px 15px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.result-question-icon {
width: 25px;
height: 25px;
object-fit: contain;
margin-bottom: 8px;
}
.result-contact-text {
color: #5B5148;
font-family: "Montserrat";
font-weight: 500;
font-size: 11px;
line-height: 1.2;
margin-bottom: 12px;
}
.result-company-logo {
width: 180px;
max-width: 100%;
height: 25px;
object-fit: contain;
margin-bottom: 10px;
}
.result-max-button {
min-width: 125px;
height: 38px;
padding: 0 12px;
background: #fff;
border: 1px solid #C7C1BA;
border-radius: 5px;
color: #302C29;
font-family: "Montserrat";
font-weight: 600;
font-size: 10px;
cursor: pointer;
margin-bottom: 12px;
}
.result-phone {
margin-top: auto;
color: #2B2622;
font-family: "Montserrat";
font-weight: 500;
font-size: 17px;
line-height: 1;
}
.quiz-subtitle.result-subtitle {
font-family: "Montserrat";
font-weight: 500;
font-style: Medium;
font-size: 28px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
.result-checkbox small a {
color: inherit;
text-decoration: underline;
cursor: pointer;
}
/* =========================================================
MOBILE QUIZ — 360px
HTML И JS НЕ ТРОГАЕМ
========================================================= */
@media (max-width: 600px) {
/* =====================================================
ОСНОВА
===================================================== */
.quiz-section {
width: 100%;
min-height: 100vh;
padding: 0;
background: #f7f7f7;
}
.quiz-wrapper {
width: 100%;
max-width: none;
margin: 0;
text-align: center;
}
/* =====================================================
ВЕРХНЯЯ ИКОНКА
===================================================== */
.quiz-refresh {
width: 17px;
height: 17px;
margin: 19px auto 14px;
}
.quiz-refresh img {
width: 17px;
height: 17px;
display: block;
object-fit: contain;
}
/* =====================================================
ЗАГОЛОВОК
===================================================== */
.quiz-title {
width: 300px;
margin: 0 auto 23px;
color: #2B2622;
font-family: "Montserrat", sans-serif;
font-weight: 800;
font-size: 20px;
line-height: 22px;
text-align: center;
}
/* =====================================================
ПОДЗАГОЛОВОК
===================================================== */
.quiz-subtitle {
width: 315px;
margin: 0 auto 28px;
color: #2B2622;
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size: 17px;
line-height: 20px;
text-align: center;
}
.quiz-description {
display: none;
}
/* =====================================================
ОБЩИЙ БЛОК
===================================================== */
.quiz-box {
width: 100%;
min-height: 0;
display: flex;
flex-direction: column;
text-align: left;
border-radius: 8px 8px 0 0;
overflow: hidden;
background: transparent;
box-shadow: none;
}
/* =====================================================
ЛЕВАЯ ЧАСТЬ / ВОПРОС
===================================================== */
.quiz-content {
width: 100%;
height: 380px;
min-height: 380px;
padding: 10px 25px 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
background:
url("img/quiz-paper.png")
center / cover no-repeat;
}
/* =====================================================
ЗАГОЛОВОК ВОПРОСА
===================================================== */
.question-title {
width: 100%;
margin: 0 0 11px;
color: #2B2622;
font-family: "Montserrat", sans-serif;
font-weight: 800;
font-size: 17px;
line-height: 20px;
text-align: center;
}
/* =====================================================
ПРОГРЕСС
===================================================== */
.progress {
width: 100%;
height: 14px;
margin: 0 0 17px;
flex-shrink: 0;
background: rgba(255, 255, 255, 0.65);
border-radius: 20px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: #bd8a3d;
border-radius: 20px;
transition: width 0.35s ease;
}
/* =====================================================
ОТВЕТЫ
===================================================== */
.answers {
width: 100%;
display: flex;
flex-direction: column;
gap: 0;
}
.answer {
min-height: 27px;
display: flex;
align-items: center;
color: #2B2622;
font-family: "Montserrat", sans-serif;
font-weight: 400;
font-size: 12px;
line-height: 27px;
}
.answer input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.answer-circle {
width: 11px;
height: 11px;
flex: 0 0 11px;
margin-right: 14px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.65);
border: 1px solid rgba(185, 148, 90, 0.12);
box-sizing: border-box;
position: relative;
}
.answer input:checked + .answer-circle {
background: #B88A44;
}
.answer:hover .answer-circle {
box-shadow: none;
}
/* =====================================================
ОШИБКА
===================================================== */
.answer-error {
color: #a0442d;
font-family: "Montserrat", sans-serif;
font-size: 10px;
margin-top: 5px;
display: none;
}
.answer-error.show {
display: block;
}
/* =====================================================
MULTIPLE HINT
===================================================== */
.multiple-hint {
margin-top: -5px;
margin-bottom: 10px;
color: #2B2622;
font-family: "Montserrat", sans-serif;
font-size: 11px;
line-height: 14px;
}
/* =====================================================
НАВИГАЦИЯ
===================================================== */
.quiz-navigation {
width: 100%;
margin-top: auto;
padding-top: 0;
padding-bottom: 5px;
display: flex;
align-items: center;
justify-content: space-between;
}
/* НАЗАД */
.back-button {
padding: 0;
border: 0;
background: transparent;
margin-top: -80px;
color: #5B554F;
font-family: "Montserrat", sans-serif;
font-weight: 400;
font-size: 13px;
line-height: 18px;
cursor: pointer;
}
.back-button:hover {
opacity: 1;
}
/* ДАЛЕЕ */
.next-button {
width: 90px;
min-width: 90px;
height: 29px;
padding: 0;
border: 0;
border-radius: 5px;
background: #C88F4C;
color: #fff;
font-family: "Montserrat", sans-serif;
font-size: 12px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
cursor: pointer;
margin-top: -80px;
}
.next-button:hover {
background: #C88F4C;
transform: none;
}
.next-button:active {
transform: none;
}
.fingerprint {
width: 15px;
height: 15px;
object-fit: contain;
}
/* =====================================================
ПРАВАЯ ЧАСТЬ
СТАНОВИТСЯ НИЖНЕЙ ЧАСТЬЮ МОБИЛЬНОГО БЛОКА
===================================================== */
.quiz-sidebar {
width: 100%;
padding: 0;
display: flex;
flex-direction: column;
gap: 0;
background: #f7f7f7;
}
/* =====================================================
ФОТО
===================================================== */
.quiz-photo {
width: 100%;
height: 181px;
overflow: hidden;
border-radius: 5px;
flex-shrink: 0;
}
.quiz-photo img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
/* =====================================================
КАРТОЧКА КОНТАКТОВ
===================================================== */
.quiz-contact {
width: 100%;
height: 217px;
min-height: 217px;
padding: 20px 15px 25px;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
border: 0;
border-radius: 0;
background: #F7F7F7;
text-align: center;
}
/* =====================================================
ИКОНКА ВОПРОСА
НА МОБИЛЬНОМ НЕ ПОКАЗЫВАЕМ В КАРТОЧКЕ
===================================================== */
.question-icon {
display: none;
}
/* =====================================================
"ВОПРОС 1 ИЗ 5"
ОСТАЁТСЯ В HTML ВНУТРИ КАРТОЧКИ,
НО ВИЗУАЛЬНО СТАВИМ ЕГО СВЕРХУ
===================================================== */
.question-counter {
position: absolute;
left: 0;
width: 100%;
margin: 0;
transform: translateY(-43px);
margin-top: -190px;
color: #4E4944;
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size: 11px;
line-height: 15px;
text-align: center;
z-index: 5;
}
/*
Добавляем значок ? перед текстом,
поэтому HTML менять не надо.
*/
.question-counter::before {
content: "?";
width: 15px;
height: 15px;
margin-right: 9px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #4E4944;
border-radius: 50%;
font-family: Arial, sans-serif;
font-size: 10px;
line-height: 15px;
vertical-align: -3px;
}
/* =====================================================
ЛОГОТИП
===================================================== */
.company-logo {
width: 168px;
height: 34px;
max-width: none;
margin: 0 auto 16px;
object-fit: contain;
order: 1;
}
/* =====================================================
ТЕЛЕФОН
===================================================== */
.phoney {
width: 100%;
height: 54px;
margin: 0 0 18px;
padding: 0;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
border: 1px dashed #4D4A47;
border-radius: 8px;
background: #F7F7F7;
color: #2B2622;
font-family: "Mulish", sans-serif;
font-weight: 500;
font-size: 18px;
line-height: 1;
text-align: center;
order: 2;
}
/* =====================================================
MAX
===================================================== */
.max-button {
width: 175px;
min-width: 175px;
height: 51px;
margin: 0;
padding: 0 10px;
border: 1px solid #C7C1BA;
border-radius: 5px;
background: #fff;
color: #302C29;
font-family: "Mulish", sans-serif;
font-weight: 700;
font-size: 13px;
cursor: pointer;
order: 3;
}
.max-button:hover {
background: #fff;
}
/* =====================================================
ФИНАЛЬНЫЙ ЭКРАН
===================================================== */
.quiz-result {
width: 100%;
min-height: 0;
display: none;
grid-column: auto;
background:
url("img/quiz-paper.png")
center / cover no-repeat;
}
.quiz-result.active {
display: flex;
flex-direction: column;
}
/* =====================================================
ФОРМА РЕЗУЛЬТАТА
===================================================== */
.result-form {
width: 100%;
padding: 20px 25px 25px;
box-sizing: border-box;
}
.result-form h2 {
margin: 0 0 15px;
font-size: 13px;
line-height: 17px;
}
.result-form ol {
margin: 0 0 15px;
padding-left: 0;
font-size: 12px;
line-height: 18px;
}
.result-form input[type="text"],
.result-form input[type="tel"] {
width: 100%;
height: 45px;
transform: none;
margin-bottom: 8px;
padding: 0 13px;
font-size: 14px;
}
/* =====================================================
СОГЛАСИЕ
===================================================== */
.result-checkbox {
width: 100%;
margin: 0 0 15px;
}
.result-checkbox span {
width: 8px;
height: 8px;
flex: 0 0 8px;
margin-top: 3px;
margin-right: 6px;
}
.result-checkbox small {
width: auto;
margin-top: 0;
font-size: 8px;
line-height: 10px;
}
/* =====================================================
КНОПКА РЕЗУЛЬТАТА
===================================================== */
.result-submit {
width: 100%;
height: 52px;
border-radius: 6px;
}
.result-submit strong {
font-size: 13px;
line-height: 17px;
}
.result-submit span {
font-size: 12px;
line-height: 16px;
}
/* =====================================================
SIDEBAR РЕЗУЛЬТАТА
===================================================== */
.result-sidebar {
width: 100%;
padding: 0;
display: flex;
flex-direction: column;
gap: 0;
}
.result-photo {
width: 100%;
height: 181px;
border-radius: 0;
overflow: hidden;
}
.result-contact {
width: 100%;
min-height: 200px;
padding: 20px 15px;
border: 0;
border-radius: 0;
}
.result-question-icon {
width: 18px;
height: 18px;
}
.result-contact-text {
font-size: 10px;
}
.result-company-logo {
width: 168px;
height: auto;
}
.result-max-button {
width: 175px;
height: 45px;
font-size: 12px;
}
.result-phone {
font-size: 17px;
}
/* =====================================================
ЗАГОЛОВОК ФИНАЛЬНОГО ЭКРАНА
===================================================== */
.quiz-subtitle.result-subtitle {
width: 315px;
margin: 0 auto 25px;
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size: 17px;
line-height: 21px;
text-align: center;
}
}
/* =========================================================
ЭКРАН 4 — СИТУАЦИИ
========================================================= */
.situations {
position: relative;
width: 100%;
box-sizing: border-box;
background-image: url("img/quiz-paper.png");
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
color: #332a22;
font-family: "Montserrat", Arial, sans-serif;
overflow: hidden;
}
/* =========================================================
ОСНОВНОЙ КОНТЕЙНЕР
========================================================= */
.situations__container {
width: 100%;
max-width: 920px;
margin: 0 auto;
box-sizing: border-box;
padding-top: 32px;
padding-bottom: 43px;
}
/* =========================================================
ВЕРХНЯЯ ИКОНКА
========================================================= */
.situations__top-icon {
width: 63px;
height: 63px;
margin: 0 auto;
}
.situations__top-icon img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
/* =========================================================
ЗАГОЛОВОК
========================================================= */
.situations__title {
margin: 22px 0 0;
padding: 0;
text-align: center;
line-height: 38px;
letter-spacing: -0.5px;
color: #B88A4433 20%;
font-family: "Montserrat";
font-weight: 800;
font-style: "ExtraBold";
font-size: 44px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
/* =========================================================
ВСТУПИТЕЛЬНЫЙ ТЕКСТ
========================================================= */
.situations__intro {
margin-top: 25px;
text-align: center;
line-height: 21px;
color: #2B2622;
font-family: "Montserrat";
font-weight: 500;
font-style: Medium;
font-size: 28px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
/* =========================================================
ОБЩИЙ БЛОК СИТУАЦИИ
========================================================= */
.situations__item {
display: flex;
align-items: flex-start;
width: 100%;
margin-top: 42px;
box-sizing: border-box;
}
/* =========================================================
КАРТИНКА
========================================================= */
.situations__image {
width: 360px;
height: 229px;
flex: 0 0 250px;
border-radius: 20px;
}
.situations__image img {
display: block;
border-radius: 20px;
width: 360px;
height: 229px;
}
/* =========================================================
ТЕКСТ СПРАВА
========================================================= */
.situations__content {
padding-left: 30px;
box-sizing: border-box;
flex: 1;
}
.situations__content h3 {
margin: 0;
width: 715px;
padding: 0;
line-height: 27px;
letter-spacing: -0.2px;
color: #2B2622;
font-family: "Montserrat";
font-weight: 600;
font-style: "SemiBold";
font-size: 30px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
}
.situations__content p {
margin: 29px 0 0;
padding: 0;
max-width: 600px;
line-height: 17px;
color: #2B2622;
font-family: "Montserrat";
font-weight: 400;
font-style: "Regular";
font-size: 20px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
}
/* =========================================================
ТОЧКИ
========================================================= */
.situations__dots {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
margin-top: 25px;
}
.situations__dots img {
display: block;
width: 14px;
height: 14px;
object-fit: contain;
}
/* =========================================================
ТЕКСТ "МОЯ СИТУАЦИЯ ПОХОЖА"
========================================================= */
.situations__my-title {
margin-top: 19px;
text-align: center;
line-height: 28px;
color: #2B2622;
font-family: "Montserrat";
font-weight: 500;
font-style: Medium;
font-size: 36px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
/* =========================================================
КНОПКА
========================================================= */
.situations__button {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 507px;
height: 90px;
margin: 19px auto 0;
box-sizing: border-box;
border-radius: 10px;
background: #C6925C;
color: #fff;
text-decoration: none;
font-family: "Montserrat";
font-weight: 600;
font-size: 20px;
line-height: 100%;
text-align: center;
transition:
transform 0.2s ease,
opacity 0.2s ease;
}
.situations__button:hover {
transform: translateY(-2px);
opacity: 0.92;
}
.situations__button span {
display: block;
width: 100%;
text-align: center;
}
.situations__button img {
position: absolute;
right: 25px;
top: 50%;
width: 50px;
height: 50px;
transform: translateY(-50%);
object-fit: contain;
}
/* =========================================================
ЭКРАН 4 — МОБИЛЬНАЯ ВЕРСИЯ
========================================================= */
@media (max-width: 767px) {
/* =====================================================
СЕКЦИЯ
===================================================== */
.situations {
width: 100%;
min-height: 2048px;
background-image: url("img/quiz-paper.png");
background-repeat: repeat-y;
background-position: center top;
background-size: auto 100%;
overflow: hidden;
}
/* =====================================================
КОНТЕЙНЕР
===================================================== */
.situations__container {
width: 100%;
max-width: none;
margin: 0;
padding: 19px 15px 62px;
box-sizing: border-box;
}
/* =====================================================
ВЕРХНЯЯ ИКОНКА
===================================================== */
.situations__top-icon {
width: 32px;
height: 32px;
margin: 0 auto;
}
.situations__top-icon img {
display: block;
width: 32px;
height: 32px;
object-fit: contain;
}
/* =====================================================
ЗАГОЛОВОК
===================================================== */
.situations__title {
width: 100%;
margin: 20px 0 0;
padding: 0;
text-align: center;
color: #2B2622;
font-family: "Montserrat";
box-sizing: border-box;
font-weight: 800;
font-style: "ExtraBold";
font-size: 20px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
/* =====================================================
ВСТУПИТЕЛЬНЫЙ ТЕКСТ
===================================================== */
.situations__intro {
width: 288px;
margin: 14px auto 0;
padding: 0;
text-align: center;
color: #2B2622;
font-family: "Montserrat";
box-sizing: border-box;
font-weight: 500;
font-style: Medium;
font-size: 14px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
/* =====================================================
КАЖДАЯ СИТУАЦИЯ
===================================================== */
.situations__item {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
margin: 29px 0 0;
padding: 0;
box-sizing: border-box;
}
/* =====================================================
КАРТИНКА
===================================================== */
.situations__image {
width: 250px;
height: 155px;
flex: none;
margin: 0 auto;
border-radius: 16px;
overflow: hidden;
}
.situations__image img {
display: block;
width: 250px;
height: 155px;
margin: 0;
padding: 0;
border-radius: 16px;
object-fit: cover;
}
/* =====================================================
ТЕКСТОВАЯ ЧАСТЬ
===================================================== */
.situations__content {
width: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
text-align: center;
}
/* =====================================================
ЗАГОЛОВОК СИТУАЦИИ
===================================================== */
.situations__content h3 {
width: 100%;
margin: 25px 0 0;
padding: 0;
color: #2B2622;
font-family: "Montserrat";
text-align: center;
box-sizing: border-box;
font-weight: 600;
font-style: "SemiBold";
font-size: 18px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
/* =====================================================
ОПИСАНИЕ СИТУАЦИИ
===================================================== */
.situations__content p {
width: 100%;
max-width: 225px;
margin: 15px auto 0;
padding: 0;
color: #2B2622;
font-family: "Montserrat";
text-align: center;
box-sizing: border-box;
font-weight: 400;
font-style: "Regular";
font-size: 14px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
/* =====================================================
РАССТОЯНИЕ МЕЖДУ СИТУАЦИЯМИ
===================================================== */
.situations__item + .situations__item {
margin-top: 27px;
}
/* =====================================================
ТОЧКИ
===================================================== */
.situations__dots {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
margin: 30px auto 0;
padding: 0;
}
.situations__dots img {
display: block;
width: 14px;
height: 14px;
margin: 0;
padding: 0;
object-fit: contain;
}
/* =====================================================
МОЯ СИТУАЦИЯ ПОХОЖА
===================================================== */
.situations__my-title {
width: 100%;
margin: 31px 0 0;
padding: 0;
text-align: center;
color: #2B2622;
font-family: "Montserrat";
font-weight: 500;
font-style: Medium;
font-size: 20px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
/* =====================================================
КНОПКА
===================================================== */
.situations__button {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 100%;
max-width: 322px;
height: 67px;
margin: 18px auto 0;
padding: 0;
box-sizing: border-box;
border-radius: 10px;
background: #C6925C;
color: #fff;
text-decoration: none;
font-family: "Montserrat";
font-weight: 600;
font-style: "SemiBold";
font-size: 12px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
transition:
transform 0.2s ease,
opacity 0.2s ease;
}
.situations__button span {
display: block;
padding: 0 43px 0 0;
white-space: nowrap;
}
.situations__button img {
position: absolute;
right: 12px;
top: 50%;
width: 40px;
height: 40px;
margin: 0;
transform: translateY(-50%);
object-fit: contain;
}
.situations__button:hover {
transform: none;
opacity: 1;
}
}
/* =====================================================
ОСНОВНАЯ СЕКЦИЯ
===================================================== */
.inheritance-quiz {
width: 100%;
min-height: 100vh;
box-sizing: border-box;
padding-top: 74px;
padding-bottom: 80px;
position: relative;
overflow: hidden;
background:
url("img/bafff.png")
center center /
cover
no-repeat;
color: #302c29;
font-family: "Montserrat", sans-serif;
}
/* =====================================================
ОБЩИЙ КОНТЕЙНЕР
===================================================== */
.inheritance-quiz__wrapper {
width: 874px;
margin: 0 auto;
}
/* =====================================================
ВЕРХНИЙ ЗАГОЛОВОК
===================================================== */
.inheritance-quiz__header {
width: 100%;
text-align: center;
margin: 0 auto 28px;
}
/* =====================================================
ГЛАВНЫЙ ЗАГОЛОВОК
===================================================== */
.inheritance-quiz__header h2 {
width: 850px;
white-space: nowrap;
margin: 50px -20px;
color: #2B2622;
font-family: "Montserrat";
font-weight: 800;
font-style: normal;
font-size: 42px;
line-height: 100%;
letter-spacing: 0;
text-align: center;
}
/* =====================================================
ПОДЗАГОЛОВОК
===================================================== */
.inheritance-quiz__header p {
width: 820px;
margin: 34px auto 0;
color: #2B2622;
font-family: "Montserrat";
font-weight: 500;
font-style: normal;
font-size: 28px;
line-height: 100%;
letter-spacing: 0;
text-align: center;
}
/* =====================================================
КАРТОЧКА КВИЗА
===================================================== */
.inheritance-quiz__card {
width: 872px;
box-sizing: border-box;
padding:
29px
78px
45px;
margin: 0 auto;
border-radius: 15px;
/*
Прозрачность карточки
*/
background:
url("img/quiz-paper.png")
center center /
cover
no-repeat;
/*
Размытие фона за карточкой
*/
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow:
0 2px 15px rgba(80, 60, 40, 0.025);
}
/* =====================================================
ВОПРОС
===================================================== */
.inheritance-quiz__question {
width: 100%;
margin:
0
0
55px;
}
/* =====================================================
ЗАГОЛОВОК ВОПРОСА
===================================================== */
.inheritance-quiz__question h3 {
margin:
0
0
49px;
color: #302c29;
font-family: "Montserrat";
font-style: normal;
font-size: 29px;
line-height: 35px;
letter-spacing: -0.3px;
text-align: center;
font-weight: 600;
font-style: SemiBold;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
/* =====================================================
ВАРИАНТЫ ОТВЕТА
===================================================== */
.inheritance-quiz__options {
display: flex;
flex-direction: column;
gap: 12px;
padding-left: 87px;
}
/* =====================================================
ОДИН ВАРИАНТ
===================================================== */
.inheritance-quiz__option {
display: flex;
align-items: center;
min-height: 22px;
position: relative;
cursor: pointer;
user-select: none;
}
/* =====================================================
НАСТОЯЩИЙ RADIO СКРЫВАЕМ
===================================================== */
.inheritance-quiz__option input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
/* =====================================================
КАСТОМНЫЙ RADIO
===================================================== */
.inheritance-quiz__radio {
width: 22px;
height: 22px;
flex: 0 0 22px;
margin-right: 25px;
box-sizing: border-box;
border-radius: 50%;
background: #f1e6d3;
border: 1px solid #eadcc5;
transition:
background 0.15s ease,
border 0.15s ease,
transform 0.15s ease,
box-shadow 0.15s ease;
}
/* =====================================================
ВЫБРАННЫЙ RADIO
===================================================== */
.inheritance-quiz__option input:checked
+ .inheritance-quiz__radio {
background: #c28a3d;
border-color: #c28a3d;
transform: scale(0.85);
}
/* =====================================================
ТЕКСТ ОТВЕТА
===================================================== */
.inheritance-quiz__text {
color: #3e3935;
font-family: "Montserrat";
font-style: normal;
line-height: 27px;
letter-spacing: 0;
font-weight: 400;
font-style: Regular;
font-size: 20px;
leading-trim: NONE;
line-height: 38px;
letter-spacing: 0%;
}
/* =====================================================
ТЕКСТ ПЕРЕД ФОРМОЙ
===================================================== */
.inheritance-quiz__result {
width:782px;
margin:
0
0
29px;
color: #403a35;
font-family: "Montserrat";
font-style: normal;
line-height: 23px;
letter-spacing: 0;
text-align: center;
font-weight: 500;
font-style: Medium;
font-size: 24px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
/* =====================================================
INPUT
===================================================== */
.inheritance-quiz__input {
display: block;
width: 553px;
height: 87px;
box-sizing: border-box;
margin:
0
auto
16px;
padding:
0
23px;
border: none;
outline: none;
border-radius: 10px;
background: #f5e9d6;
color: #514a44;
font-family: "Montserrat";
line-height: 58px;
font-weight: 400;
font-style: Regular;
font-size: 26px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
}
/* =====================================================
PLACEHOLDER
===================================================== */
.inheritance-quiz__input::placeholder {
color: #716960;
opacity: 1;
}
/* =====================================================
INPUT — FOCUS
===================================================== */
.inheritance-quiz__input:focus {
background: #f1e2cc;
box-shadow:
0 0 0 1px rgba(191, 139, 76, 0.2);
}
/* =====================================================
СОГЛАСИЕ
===================================================== */
.inheritance-quiz__agreement {
width: 368px;
margin:
25px
0
18px;
transform: translateX(90px);
display: flex;
align-items: flex-start;
position: relative;
cursor: pointer;
}
/* =====================================================
CHECKBOX СКРЫВАЕМ
===================================================== */
.inheritance-quiz__agreement input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
/* =====================================================
КРУЖОК СОГЛАСИЯ
===================================================== */
.inheritance-quiz__agreement-radio {
width: 22px;
height: 22px;
flex: 0 0 22px;
margin-top: 1px;
margin-right: 12px;
box-sizing: border-box;
border-radius: 50%;
background: #f0e4d1;
border: 1px solid #e3d4bc;
transition: 0.2s ease;
}
/* =====================================================
СОГЛАСИЕ — ВЫБРАНО
===================================================== */
.inheritance-quiz__agreement input:checked
+ .inheritance-quiz__agreement-radio {
background: #c58a43;
border-color: #c58a43;
}
/* =====================================================
ТЕКСТ СОГЛАСИЯ
===================================================== */
.inheritance-quiz__agreement span:last-child {
color: #857d75;
font-family: "Montserrat";
line-height: 14px;
letter-spacing: 0;
font-weight: 400;
font-style: Regular;
font-size: 14px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
}
/* =====================================================
КНОПКА
===================================================== */
.inheritance-quiz__button {
display: block;
width: 553px;
height: 97px;
margin: 0 auto;
padding: 0;
border: none;
border-radius: 10px;
background: #C6925C;
color: #fff;
font-family: "Montserrat";
line-height: 19px;
letter-spacing: 0;
cursor: pointer;
transition:
background 0.2s ease,
transform 0.15s ease;
font-weight: 500;
font-style: Medium;
font-size: 26px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
.inheritance-quiz img {
width: 55px;
height: 55px;
position: relative;
left: 50%;
transform: translateX(-50%);
}
/* =====================================================
КНОПКА — HOVER
===================================================== */
.inheritance-quiz__button:hover {
background: #b98046;
}
/* =====================================================
КНОПКА — ACTIVE
===================================================== */
.inheritance-quiz__button:active {
transform: scale(0.98);
}
/* =====================================================
ОШИБКА INPUT
===================================================== */
.inheritance-quiz__input.error {
box-shadow:
0 0 0 2px #c86c55;
}
/* =========================================================
НАСЛЕДСТВЕННЫЙ КВИЗ — МОБИЛЬНАЯ ВЕРСИЯ
ПО МАКЕТУ 360px
========================================================= */
@media screen and (max-width: 767px) {
/* =====================================================
ОСНОВНАЯ СЕКЦИЯ
===================================================== */
.inheritance-quiz {
width: 100%;
min-height: 100vh;
padding-top: 47px;
padding-bottom: 0;
overflow: hidden;
background:
url("img/bafff.png")
center center /
cover
no-repeat;
font-family: "Montserrat", sans-serif;
}
/* =====================================================
КОНТЕЙНЕР
===================================================== */
.inheritance-quiz__wrapper {
width: 100%;
max-width: 100%;
margin: 0 auto;
}
/* =====================================================
ВЕРХНИЙ БЛОК
===================================================== */
.inheritance-quiz__header {
width: 100%;
margin: 0 auto 25px;
padding: 0 15px;
box-sizing: border-box;
text-align: center;
}
/* =====================================================
ГЛАВНЫЙ ЗАГОЛОВОК
===================================================== */
.inheritance-quiz__header h2 {
width: 288px;
margin: 0 auto;
color: #2B2622;
font-family: "Montserrat";
line-height: 27px;
letter-spacing: 0;
text-align: center;
font-weight: 800;
font-style: ExtraBold;
font-size: 22px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
/* =====================================================
ПОДЗАГОЛОВОК
===================================================== */
.inheritance-quiz__header p {
width: 100%;
margin: 17px auto 0;
color: #2B2622;
font-family: "Montserrat";
line-height: 19px;
letter-spacing: 0;
text-align: center;
font-weight: 500;
font-style: Medium;
font-size: 16px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
/* =====================================================
КАРТОЧКА
===================================================== */
.inheritance-quiz__card {
width: 100%;
box-sizing: border-box;
margin: 0;
padding:
26px
15px
37px;
border-radius: 15px 15px 0 0;
background: url(img/quiz-paper.png);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow:
0 2px 15px rgba(80, 60, 40, 0.025);
}
.inheritance-quiz img{
width: 26px;
height: 26px;
}
/* =====================================================
КАЖДЫЙ ВОПРОС
===================================================== */
.inheritance-quiz__question {
width: 100%;
margin: 0 0 20px;
}
/* =====================================================
ЗАГОЛОВОК ВОПРОСА
===================================================== */
.inheritance-quiz__question h3 {
width: 100%;
margin:
0
0
17px;
padding: 0;
color: #302c29;
font-family: "Montserrat";
line-height: 22px;
letter-spacing: 0;
text-align: center;
font-weight: 600;
font-style: SemiBold;
font-size: 18px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
/* =====================================================
ВАРИАНТЫ
===================================================== */
.inheritance-quiz__options {
width: 100%;
display: flex;
flex-direction: column;
gap: 7px;
padding-left: 10px;
box-sizing: border-box;
}
/* =====================================================
ОДИН ВАРИАНТ
===================================================== */
.inheritance-quiz__option {
display: flex;
align-items: center;
min-height: 19px;
width: 100%;
position: relative;
cursor: pointer;
user-select: none;
}
/* =====================================================
RADIO — СКРЫТ
===================================================== */
.inheritance-quiz__option input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
/* =====================================================
КРУЖОК RADIO
===================================================== */
.inheritance-quiz__radio {
width: 14px;
height: 14px;
flex: 0 0 14px;
margin-right: 14px;
box-sizing: border-box;
border-radius: 50%;
background: #f1e6d3;
border: 1px solid #eadcc5;
transition:
background 0.15s ease,
border 0.15s ease,
transform 0.15s ease,
box-shadow 0.15s ease;
}
/* =====================================================
ВЫБРАННЫЙ RADIO
===================================================== */
.inheritance-quiz__option input:checked
+ .inheritance-quiz__radio {
background: #c28a3d;
border-color: #c28a3d;
transform: scale(0.82);
}
/* =====================================================
ТЕКСТ ОТВЕТА
===================================================== */
.inheritance-quiz__text {
color: #3e3935;
font-family: "Montserrat";
line-height: 18px;
letter-spacing: 0;
font-weight: 400;
font-style: Regular;
font-size: 12px;
leading-trim: NONE;
line-height: 26px;
letter-spacing: 0%;
}
/* =====================================================
ВОПРОС 1
===================================================== */
.inheritance-quiz__question:nth-child(1) {
margin-bottom: 19px;
}
/* =====================================================
ВОПРОС 2
===================================================== */
.inheritance-quiz__question:nth-child(2) {
margin-bottom: 21px;
}
/* =====================================================
ВОПРОС 3
===================================================== */
.inheritance-quiz__question:nth-child(3) {
margin-bottom: 24px;
}
/* =====================================================
ВОПРОС 4
===================================================== */
.inheritance-quiz__question:nth-child(4) {
margin-bottom: 34px;
}
/* =====================================================
ТЕКСТ ПЕРЕД ФОРМОЙ
===================================================== */
.inheritance-quiz__result {
width: 100%;
margin:
0
auto
32px;
padding: 0 10px;
box-sizing: border-box;
color: #403a35;
font-family: "Montserrat";
line-height: 19px;
letter-spacing: 0;
text-align: center;
font-weight: 500;
font-style: Medium;
font-size: 16px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
/* =====================================================
ПОЛЯ ИМЯ / ТЕЛЕФОН
===================================================== */
.inheritance-quiz__input {
display: block;
width: 100%;
height: 64px;
box-sizing: border-box;
margin:
0
auto
9px;
padding:
0
20px;
border: none;
outline: none;
border-radius: 9px;
background: #f5e9d6;
color: #514a44;
font-family: "Montserrat", sans-serif;
font-weight: 400;
font-size: 17px;
line-height: 64px;
letter-spacing: 0;
}
/* =====================================================
PLACEHOLDER
===================================================== */
.inheritance-quiz__input::placeholder {
color: #716960;
opacity: 1;
}
/* =====================================================
FOCUS
===================================================== */
.inheritance-quiz__input:focus {
background: #f1e2cc;
box-shadow:
0 0 0 1px rgba(191, 139, 76, 0.2);
}
/* =====================================================
СОГЛАСИЕ
===================================================== */
.inheritance-quiz__agreement {
width: 100%;
margin:
16px
0
21px;
transform: none;
display: flex;
align-items: flex-start;
position: relative;
cursor: pointer;
box-sizing: border-box;
padding-left: 5px;
}
/* =====================================================
CHECKBOX
===================================================== */
.inheritance-quiz__agreement input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
/* =====================================================
КРУЖОК СОГЛАСИЯ
===================================================== */
.inheritance-quiz__agreement-radio {
width: 23px;
height: 23px;
flex: 0 0 23px;
margin-top: 0;
margin-right: 12px;
box-sizing: border-box;
border-radius: 50%;
background: #f0e4d1;
border: 1px solid #e3d4bc;
transition: 0.2s ease;
}
/* =====================================================
СОГЛАСИЕ — ВЫБРАНО
===================================================== */
.inheritance-quiz__agreement input:checked
+ .inheritance-quiz__agreement-radio {
background: #c58a43;
border-color: #c58a43;
}
/* =====================================================
ТЕКСТ СОГЛАСИЯ
===================================================== */
.inheritance-quiz__agreement span:last-child {
color: #857d75;
font-family: "Montserrat";
line-height: 13px;
letter-spacing: 0;
font-weight: 400;
font-style: Regular;
font-size: 12px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
}
/* =====================================================
КНОПКА
===================================================== */
.inheritance-quiz__button {
display: block;
width: 100%;
height: 73px;
margin: 0 auto;
padding: 0 15px;
box-sizing: border-box;
border: none;
border-radius: 9px;
background: #C6925C;
color: #fff;
font-family: "Montserrat";
line-height: 21px;
letter-spacing: 0;
text-align: center;
cursor: pointer;
transition:
background 0.2s ease,
transform 0.15s ease;
font-weight: 500;
font-style: Medium;
font-size: 18px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
/* =====================================================
HOVER
===================================================== */
.inheritance-quiz__button:hover {
background: #C6925C;
}
/* =====================================================
ACTIVE
===================================================== */
.inheritance-quiz__button:active {
transform: scale(0.98);
}
/* =====================================================
ОШИБКА INPUT
===================================================== */
.inheritance-quiz__input.error,
.inheritance-quiz__input.quiz-input-error {
box-shadow:
0 0 0 2px #c86c55;
}
/* =====================================================
ОШИБКА RADIO
===================================================== */
.inheritance-quiz__option.quiz-error
.inheritance-quiz__radio {
border-color: #c86c55;
}
/* =====================================================
ОШИБКА СОГЛАСИЯ
===================================================== */
.inheritance-quiz__agreement.quiz-agreement-error
.inheritance-quiz__agreement-radio {
border-color: #c86c55;
}
/* =====================================================
ТЕКСТ ОШИБКИ
===================================================== */
.inheritance-quiz__error {
display: none;
width: 100%;
margin-top: 5px;
color: #c86c55;
font-family: "Montserrat", sans-serif;
font-size: 11px;
line-height: 14px;
text-align: left;
}
.inheritance-quiz__error.active {
display: block;
}
}
/* =========================================================
БЛОК СТОИМОСТИ НАСЛЕДСТВА
========================================================= */
.legal-cost {
width: 100%;
box-sizing: border-box;
padding: 30px 0 100px;
background-image: url("img/quiz-paper.png");
background-repeat: repeat;
background-position: center;
background-size: 700px auto;
}
/* =========================================================
ОСНОВНОЙ КОНТЕЙНЕР
========================================================= */
.legal-cost__container {
width: 1154px;
margin: 0 auto;
box-sizing: border-box;
}
/* =========================================================
ВЕРХНЯЯ ИКОНКА
========================================================= */
.legal-cost__icon {
display: block;
width: 57px;
height: 57px;
margin: 0 auto 17px;
object-fit: contain;
}
/* =========================================================
ЗАГОЛОВОК
========================================================= */
.legal-cost__title {
margin: 0;
text-align: center;
font-family: "Montserrat";
font-weight: 800;
font-style: "ExtraBold";
font-size: 44px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
color: #B88A4433 20%;
}
/* =========================================================
ОПИСАНИЕ
========================================================= */
.legal-cost__text {
width: 1025px;
margin: 28px auto 55px;
text-align: center;
font-family: "Montserrat";
font-weight: 500;
font-style: Medium;
font-size: 28px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
color: #2B2622;
}
/* =========================================================
СЕТКА КАРТОЧЕК
========================================================= */
.legal-cost__cards {
display: grid;
grid-template-columns: 562px 562px;
column-gap: 40px;
row-gap: 135px;
width: 1154px;
justify-content: center;
align-items: start;
}
/* =========================================================
КАРТОЧКА
========================================================= */
.legal-cost-card {
position: relative;
width: 562px;
box-sizing: border-box;
}
/* =========================================================
ЗАГОЛОВОК КАРТОЧКИ
========================================================= */
.legal-cost-card__title {
width: 562px;
height: 90px;
min-height: 90px;
margin: 0 0 14px;
padding: 0;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-family: "Montserrat";
font-weight: 800;
font-size: 30px;
font-style: normal;
line-height: 100%;
letter-spacing: 0;
color: #6E6257;
}
/* =========================================================
ОСНОВНАЯ ОБЛАСТЬ КАРТОЧКИ
========================================================= */
.legal-cost-card__content {
position: relative;
width: 562px;
box-sizing: border-box;
background: #302c28;
border-radius: 0 0 10px 10px;
}
/* =========================================================
ФОТО
========================================================= */
.legal-cost-card__photo {
display: block;
width: 562px;
height: 277px;
box-sizing: border-box;
object-fit: cover;
border-radius: 10px 10px 0 0;
}
/* =========================================================
БЕЛАЯ ПОЛОСА
========================================================= */
.legal-cost-card__intro {
display: flex;
align-items: center;
justify-content: center;
width: 562px;
height: 175px;
box-sizing: border-box;
padding: 20px 45px;
background: #ffffff;
border-radius: 10px;
text-align: center;
font-family: "Montserrat";
font-weight: 500;
font-style: Medium;
font-size: 20px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
line-height: 1.25;
color: #5a554f;
}
/* =========================================================
ЧЁРНАЯ ПОЛОСА
========================================================= */
.legal-cost-card__details {
width: 562px;
height: 336px;
box-sizing: border-box;
padding: 30px 35px 60px;
background: #302c28;
border-radius: 0 0 10px 10px;
}
/* =========================================================
СТРОКА ИНФОРМАЦИИ
========================================================= */
.legal-cost-card__item {
display: flex;
align-items: flex-start;
width: 100%;
margin: 0 0 20px;
box-sizing: border-box;
font-family: "Montserrat";
font-weight: 500;
font-style: Medium;
font-size: 16px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
line-height: 1.3;
color: #ffffff;
}
/* =========================================================
ПОСЛЕДНЯЯ СТРОКА БЕЗ НИЖНЕГО ОТСТУПА
========================================================= */
.legal-cost-card__item:last-child {
margin-bottom: 0;
}
/* =========================================================
ИКОНКИ — ФОТО
========================================================= */
.legal-cost-card__item img {
display: block;
flex: 0 0 auto;
width: 29px;
height: 29px;
margin: 0 15px 0 0;
object-fit: contain;
}
/* =========================================================
ТЕКСТ СТРОКИ
========================================================= */
.legal-cost-card__item span {
display: block;
flex: 1;
padding-top: 2px;
}
/* =========================================================
КНОПКА
========================================================= */
.legal-cost-card__button {
position: absolute;
left: 50%;
bottom: -45px;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: center;
width: 436px;
height: 112px;
box-sizing: border-box;
padding: 10px 20px;
background: #c99156;
border-radius: 6px;
color: #ffffff;
text-align: center;
text-decoration: none;
font-family: "Montserrat";
font-weight: 500;
font-style: Medium;
font-size: 26px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
transition: background 0.2s ease;
}
.legal-cost-card__button strong {
font-weight: 700;
margin-left: 4px;
}
/* =========================================================
ЖИРНОЕ СЛОВО В КНОПКЕ
========================================================= */
.legal-cost-card__button strong {
font-weight: 700;
}
/* =========================================================
HOVER КНОПКИ
========================================================= */
.legal-cost-card__button:hover {
background: #b98149;
}
/* =========================================================
7-Я КАРТОЧКА — ПО ЦЕНТРУ
========================================================= */
.legal-cost-card--center {
grid-column: 1 / -1;
width: 562px;
justify-self: center;
}
/* =========================================================
Убираем возможные отступы у элементов
========================================================= */
.legal-cost h2,
.legal-cost h3,
.legal-cost p {
box-sizing: border-box;
}
@media (max-width: 767px) {
/* ---------------------------------------------------------
ОСНОВНОЙ БЛОК
--------------------------------------------------------- */
.legal-cost {
width: 100%;
padding: 18px 15px 70px;
box-sizing: border-box;
background-image: url("img/quiz-paper.png");
background-repeat: repeat;
background-position: center;
background-size: 450px auto;
}
/* ---------------------------------------------------------
КОНТЕЙНЕР
--------------------------------------------------------- */
.legal-cost__container {
width: 100%;
max-width: 345px;
margin: 0 auto;
box-sizing: border-box;
}
/* ---------------------------------------------------------
ВЕРХНЯЯ ИКОНКА
--------------------------------------------------------- */
.legal-cost__icon {
width: 30px;
height: 30px;
margin: 0 auto 12px;
object-fit: contain;
}
/* ---------------------------------------------------------
ГЛАВНЫЙ ЗАГОЛОВОК
--------------------------------------------------------- */
.legal-cost__title {
width: 100%;
margin: 0;
font-family: "Montserrat";
font-weight: 800;
font-style: "ExtraBold";
font-size: 16px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
text-align: center;
color: #B88A4433 20%;
}
/* ---------------------------------------------------------
ОПИСАНИЕ ПОД ЗАГОЛОВКОМ
--------------------------------------------------------- */
.legal-cost__text {
width: 100%;
margin: 16px auto 30px;
padding: 0 4px;
box-sizing: border-box;
font-family: "Montserrat";
font-weight: 500;
font-style: Medium;
font-size: 14px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
text-align: center;
color: #2B2622;
}
/* ---------------------------------------------------------
СЕТКА КАРТОЧЕК
--------------------------------------------------------- */
.legal-cost__cards {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
gap: 52px;
box-sizing: border-box;
}
/* ---------------------------------------------------------
КАРТОЧКА
--------------------------------------------------------- */
.legal-cost-card,
.legal-cost-card--center {
position: relative;
width: 100%;
max-width: 345px;
margin: 0;
box-sizing: border-box;
grid-column: auto;
justify-self: auto;
}
/* ---------------------------------------------------------
ЗАГОЛОВОК КАРТОЧКИ
--------------------------------------------------------- */
.legal-cost-card__title {
width: 100%;
height: auto;
min-height: 54px;
margin: 0 0 9px;
padding: 0 5px;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
font-family: "Montserrat";
font-weight: 800;
font-style: "ExtraBold";
font-size: 16px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
text-align: center;
color: #6E6257;
}
/* ---------------------------------------------------------
ОСНОВНОЙ КОНТЕНТ КАРТОЧКИ
--------------------------------------------------------- */
.legal-cost-card__content {
position: relative;
width: 100%;
box-sizing: border-box;
background: #302c28;
border-radius: 0 0 6px 6px;
}
.legal-cost-card__photo {
display: block;
width: 100%;
height: 170px;
box-sizing: border-box;
object-fit: cover;
border-radius: 0 0 6px 6px !important;
}
/* ---------------------------------------------------------
БЕЛЫЙ ТЕКСТОВЫЙ БЛОК
--------------------------------------------------------- */
.legal-cost-card__intro {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 105px;
box-sizing: border-box;
padding: 13px 20px;
background: #fff;
border-radius: 6px;
font-family: "Montserrat";
font-weight: 500;
font-style: Medium;
font-size: 14px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
text-align: center;
color: #5a554f;
}
/* ---------------------------------------------------------
ТЁМНЫЙ БЛОК С ИНФОРМАЦИЕЙ
--------------------------------------------------------- */
.legal-cost-card__details {
width: 100%;
height: auto;
min-height: 205px;
box-sizing: border-box;
padding: 17px 15px 55px;
background: #302c28;
border-radius: 0 0 6px 6px !important;
}
/* ---------------------------------------------------------
СТРОКА ИНФОРМАЦИИ
--------------------------------------------------------- */
.legal-cost-card__item {
display: flex;
align-items: flex-start;
width: 100%;
margin: 0 0 10px;
box-sizing: border-box;
font-family: "Montserrat";
font-weight: 500;
font-style: Medium;
font-size: 10px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
color: #fff;
}
.legal-cost-card__item:last-child {
margin-bottom: 0;
}
/* ---------------------------------------------------------
ИКОНКИ
--------------------------------------------------------- */
.legal-cost-card__item img {
display: block;
flex: 0 0 auto;
width: 15px;
height: 15px;
margin: 0 7px 0 0;
object-fit: contain;
}
/* ---------------------------------------------------------
ТЕКСТ СТРОКИ
--------------------------------------------------------- */
.legal-cost-card__item span {
display: block;
flex: 1;
padding-top: 1px;
}
/* ---------------------------------------------------------
КНОПКА
--------------------------------------------------------- */
.legal-cost-card__button {
position: absolute;
left: 50%;
bottom: -25px;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: center;
width: 258px;
min-height: 74px;
height: auto;
box-sizing: border-box;
padding: 8px 18px;
background: #c99156;
border-radius: 4px;
color: #fff;
text-align: center;
text-decoration: none;
font-family: "Montserrat";
font-weight: 500;
font-style: Medium;
font-size: 14px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
transition: background .2s ease;
}
.legal-cost-card__button span {
display: block;
}
.legal-cost-card__button strong {
font-weight: 700;
margin-left: 2px;
}
.legal-cost-card__button:hover {
background: #c99156;
}
/* ---------------------------------------------------------
УБИРАЕМ ДЕСКТОПНЫЕ ОГРАНИЧЕНИЯ
--------------------------------------------------------- */
.legal-cost h2,
.legal-cost h3,
.legal-cost p {
box-sizing: border-box;
}
}
/* =========================================================
ОЧЕНЬ МАЛЕНЬКИЕ ЭКРАНЫ — 320–359 PX
========================================================= */
@media (max-width: 359px) {
.legal-cost {
padding-left: 10px;
padding-right: 10px;
}
.legal-cost__container {
max-width: 300px;
}
.legal-cost-card {
max-width: 300px;
}
.legal-cost-card__photo {
height: 150px;
}
.legal-cost-card__intro {
height: 95px;
padding-left: 15px;
padding-right: 15px;
}
.legal-cost-card__details {
padding-left: 13px;
padding-right: 13px;
}
.legal-cost-card__button {
width: 220px;
font-size: 9px;
}
}
/* =========================================================
ЭКРАН 7 — СТОИМОСТЬ ВЕДЕНИЯ НАСЛЕДСТВЕННОГО ДЕЛА
========================================================= */
.inheritance-cost__container {
width: 100%;
max-width: 1229px;
height: 3600px;
margin: 0 auto;
}
/* =========================================================
КАРТОЧКА СТОИМОСТИ — ПК
========================================================= */
.cost-card-wrap {
position: relative;
width: 1229px;
height: 327px;
margin: 0 auto;
padding: 0;
box-sizing: border-box;
}
.inheritance-cost__calculator {
display: block;
width: 78px;
height: 78px;
margin: 0 auto;
object-fit: contain;
margin-top: 50px;
}
/* ВЕРТИКАЛЬНАЯ НАДПИСЬ "СТОИМОСТЬ" */
.cost-vertical-title {
position: absolute;
left: -178px;
top: 50%;
transform:
translateY(-50%)
rotate(-90deg);
transform-origin: center;
white-space: nowrap;
font-family: "Montserrat";
font-weight: 700;
font-size: 45px;
line-height: 100%;
letter-spacing: 0;
text-align: center;
background: linear-gradient(
180deg,
#967968 0%,
#C39980 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.cost-benefit img{
width: 26px;
height: 26px;
margin-top: 7px;
}
.cost-benefit span{
margin-left: 20px;
font-family: "Montserrat";
font-weight: 500;
font-style: Medium;
font-size: 20px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
}
.inheritance-cost__main-title{
font-family: "Montserrat";
font-weight: 800;
font-style: "ExtraBold";
font-size: 44px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
.inheritance-cost__intro{
font-family: "Montserrat";
font-weight: 500;
font-style: Medium;
font-size: 28px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
.cost-block__gerb {
width: 66px;
height: 66px;
margin: 0 auto;
display: block;
opacity: 1;
margin-top: 80px;
}
.cost-block__title span {
display: block;
width: 100%;
font-family: "Montserrat";
font-weight: 700;
font-size: 28px;
line-height: 100%;
letter-spacing: 0;
text-align: center;
}
/* ОСНОВНАЯ КАРТОЧКА */
.cost-card {
position: relative;
width: 1229px;
height: 327px;
margin-top: 40px;
padding: 42px 190px 42px 48px;
box-sizing: border-box;
overflow: visible;
border-radius: 20px;
background: url(img/quiz-paper.png);
box-shadow:
inset 0 0 40px rgba(255, 255, 255, 0.45);
}
/* ВНУТРЕННЯЯ ЧАСТЬ КАРТОЧКИ */
.cost-card__content {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.cost-card__top-line,
.cost-card__bottom-line {
position: relative;
width: 1132px;
height: 5px;
flex-shrink: 0;
}
/* две близкие пунктирные линии */
.cost-card__top-line::before,
.cost-card__top-line::after,
.cost-card__bottom-line::before,
.cost-card__bottom-line::after {
content: "";
position: absolute;
left: 0;
width: 100%;
border-top: 2px dashed rgba(91, 84, 76, 0.65);
}
.cost-card__top-line::before,
.cost-card__bottom-line::before {
top: 0;
}
.cost-card__top-line::after,
.cost-card__bottom-line::after {
top: 4px;
}
/* нижнюю пару опускаем */
.cost-card__bottom-line {
margin-top: auto;
margin-bottom: -25px;
}
/* ТЕКСТ ВНУТРИ КАРТОЧКИ */
.cost-card__text {
padding-top: 38px;
font-size: 18px;
line-height: 1.35;
font-weight: 400;
color: #49433d;
}
.cost-card__text p {
margin: 0 0 5px;
}
/* ЗАГОЛОВОК ВНУТРИ КАРТОЧКИ */
.cost-card__label {
margin-bottom: 22px !important;
font-family: "Montserrat";
font-weight: 600;
font-style: "SemiBold";
font-size: 22px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
}
/* КОРОТКИЙ ТЕКСТ */
.cost-card__text--small {
flex: 1;
display: flex;
align-items: center;
padding-top: 0;
font-family: "Montserrat";
font-weight: 500;
font-style: Medium;
font-size: 22px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
}
/* БОЛЬШАЯ ИКОНКА СПРАВА */
.cost-card__icon {
position: absolute;
right: -80px;
top: 50%;
width: 158px;
height: 150px;
object-fit: contain;
z-index: 9999;
transform: translateY(-50%);
}
/* =========================================================
ОБЩИЙ КОНТЕЙНЕР
========================================================= */
.inheritance-cost__container {
width: 100%;
max-width: 1229px;
margin: 0 auto;
}
/* =========================================================
ТРИ ПОСЛЕДНИЕ КАРТОЧКИ — РАЗМЕРЫ
========================================================= */
.cost-block:nth-last-child(-n + 3) .cost-card-wrap {
width: 1229px;
height: 218px;
}
.cost-block:nth-last-child(-n + 3) .cost-card {
width: 1229px;
height: 218px;
border-radius: 20px;
}
/* =========================================================
НАДПИСЬ «СТОИМОСТЬ» — ТРИ ПОСЛЕДНИЕ КАРТОЧКИ
========================================================= */
.cost-block:nth-last-child(-n + 3) .cost-vertical-title {
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-style: normal;
font-size: 30px;
line-height: 100%;
letter-spacing: 0;
text-align: center;
background: linear-gradient(
180deg,
#967968 0%,
#C39980 100%
);
margin-left: 60px;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* =========================================================
МОБИЛЬНАЯ ВЕРСИЯ — ЭКРАН 7
ПО ДИЗАЙНУ
========================================================= */
@media (max-width: 767px) {
/* =====================================================
КОНТЕЙНЕР
===================================================== */
.inheritance-cost__container {
width: 100%;
max-width: 100%;
height: auto;
padding: 0 10px;
margin: 0 auto;
box-sizing: border-box;
}
/* =====================================================
КАЛЬКУЛЯТОР
===================================================== */
.inheritance-cost__calculator {
display: block;
width: 40px;
height: 40px;
margin: 12px auto 0;
object-fit: contain;
}
/* =====================================================
ГЛАВНЫЙ ЗАГОЛОВОК
===================================================== */
.inheritance-cost__main-title {
width: 100%;
margin: 8px auto 0;
font-family: "Montserrat";
text-align: center;
font-weight: 800;
font-style: "ExtraBold";
font-size: 18px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
/* =====================================================
ВСТУПЛЕНИЕ
===================================================== */
.inheritance-cost__intro {
width: 100%;
max-width: 340px;
margin: 9px auto 0;
font-family: "Montserrat";
font-weight: 500;
font-style: Medium;
font-size: 14px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
text-align: center;
}
/* =====================================================
БЛОК
===================================================== */
.cost-block {
width: 100%;
margin-top: 28px;
box-sizing: border-box;
}
.cost-block + .cost-block {
margin-top: 32px;
}
/* =====================================================
ГЕРБ
===================================================== */
.cost-block__gerb {
display: block;
width: 40px;
height: 40px;
margin: 0 auto;
object-fit: contain;
}
/* =====================================================
ЗАГОЛОВОК БЛОКА
===================================================== */
.cost-block__title {
width: 327px;
margin: 7px auto 0;
padding: 0;
font-family: "Montserrat";
font-weight: 700;
font-style: Bold;
font-size: 12px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
text-align: center;
}
.cost-block__title span {
display: block;
width: 100%;
margin: 4px auto 0;
font-family: "Montserrat";
font-weight: 700;
font-style: Bold;
font-size: 12px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
text-align: center;
}
/* =====================================================
ОБЁРТКА КАРТОЧКИ
===================================================== */
.cost-card-wrap {
position: relative;
width: 100% !important;
height: auto !important;
margin: 12px auto 0;
padding: 0;
box-sizing: border-box;
}
/* =====================================================
СТОИМОСТЬ
НА МОБИЛЬНОМ ГОРИЗОНТАЛЬНО
===================================================== */
.cost-vertical-title,
.cost-block:nth-last-child(-n + 3) .cost-vertical-title {
position: static;
display: block;
width: 100%;
height: auto;
margin: 0 0 4px 0 !important;
padding: 0;
transform: none;
white-space: nowrap;
font-family: "Montserrat";
font-weight: 700;
font-style: normal;
font-size: 40px;
line-height: 100%;
letter-spacing: 0;
text-align: center;
opacity: 0.4;
background: linear-gradient(
180deg,
#967968 0%,
#A98775 45%,
#C39980 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
}
/* =====================================================
КАРТОЧКА 1–2 — МОБИЛЬНАЯ ВЕРСИЯ
===================================================== */
.cost-card {
position: relative;
width: 329px !important;
height: 369px !important;
margin: 0 auto;
padding: 14px 50px 25px 12px;
box-sizing: border-box;
border-radius: 20px;
overflow: visible;
background-image: url(img/quiz-paper.png);
background-size: cover;
background-position: center;
box-shadow:
inset 0 0 20px rgba(255, 255, 255, 0.45);
}
/* =====================================================
КАРТОЧКИ 3–5
===================================================== */
.cost-block:nth-last-child(-n + 3) .cost-card {
width: 100% !important;
height: 105px;
margin: 0;
padding: 12px 42px 22px 12px;
border-radius: 7px;
}
/* =====================================================
CONTENT
===================================================== */
.cost-card__content {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
/* =====================================================
ДВОЙНАЯ ПУНКТИРНАЯ ЛИНИЯ — ВСЕ КАРТОЧКИ
===================================================== */
.cost-card__top-line,
.cost-card__bottom-line {
position: relative;
width: 100%;
height: 27px;
margin-left: 20px;
flex-shrink: 0;
box-sizing: border-box;
}
/* две пунктирные линии */
.cost-card__top-line::before,
.cost-card__top-line::after,
.cost-card__bottom-line::before,
.cost-card__bottom-line::after {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 100%;
border-top: 2px dashed rgba(91, 84, 76, 0.65);
box-sizing: border-box;
}
/* первая линия */
.cost-card__top-line::before,
.cost-card__bottom-line::before {
top: 0;
}
/* вторая линия */
.cost-card__top-line::after,
.cost-card__bottom-line::after {
top: 5px;
}
/* нижняя пара */
.cost-card__bottom-line {
margin-top: auto;
margin-bottom: -8px;
}
/* =====================================================
ТЕКСТ КАРТОЧКИ
===================================================== */
.cost-card__text {
padding-top: 10px;
color: #2B2622;
font-family: "Montserrat";
font-weight: 500;
font-style: Medium;
font-size: 11px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
.cost-card__text p {
margin: 0 0 15px;
}
/* =====================================================
ЗАГОЛОВОК В КАРТОЧКЕ
===================================================== */
.cost-card__label {
margin-bottom: 6px !important;
font-family: "Montserrat";
font-weight: 600;
font-style: "SemiBold";
font-size: 11px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
color: #2B2622;
}
/* =====================================================
КОРОТКИЕ ТЕКСТЫ
===================================================== */
.cost-card__text--small {
flex: 1;
display: flex;
align-items: center;
padding-top: 0;
color: #2B2622;
font-family: "Montserrat";
font-weight: 500;
font-style: Medium;
font-size: 11px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
/* =====================================================
ИКОНКА СУДА
===================================================== */
.cost-card__icon {
position: absolute;
left: 50%;
right: auto;
top: auto;
bottom: -18px;
width: 40px;
height: 40px;
object-fit: contain;
z-index: 9999;
transform: translateX(-50%);
}
/* =====================================================
ПРЕИМУЩЕСТВА — МОБИЛЬНАЯ ВЕРСИЯ
===================================================== */
.cost-benefits {
width: 100%;
margin-top: 78px;
display: flex;
flex-direction: column;
align-items: center;
}
.cost-benefit {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
margin: 0 0 14px;
padding: 0;
box-sizing: border-box;
text-align: center;
}
/* ИКОНКА ОТДЕЛЬНО */
.cost-benefit img {
display: block;
width: 20px;
height: 20px;
margin: 0 0 6px;
flex-shrink: 0;
object-fit: contain;
}
/* ТЕКСТ ПО ЦЕНТРУ */
.cost-benefit span {
display: block;
width: 100%;
max-width: 320px;
margin: 0;
padding: 0;
color: #2B2622;
font-family: "Montserrat";
font-weight: 500;
font-style: Medium;
font-size: 10px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
text-align: center;
}
/* =====================================================
ПОСЛЕДНИЙ БЛОК
===================================================== */
.cost-block--last {
margin-bottom: 25px;
}
/* =====================================================
ПОСЛЕДНИЕ 3 КАРТОЧКИ — МОБИЛЬНАЯ ВЕРСИЯ
===================================================== */
.cost-block:nth-last-child(-n + 3) .cost-card-wrap {
width: 329px !important;
height: 169px !important;
margin-left: auto;
margin-right: auto;
}
.cost-block:nth-last-child(-n + 3) .cost-card {
width: 329px !important;
height: 169px !important;
margin: 0;
border-radius: 20px;
box-sizing: border-box;
}
}
/* =========================================================
ЭКРАН — СТОИМОСТЬ НАСЛЕДСТВЕННОГО ДЕЛА
========================================================= */
.court-cost-screen {
position: relative;
width: 100%;
min-height: 1080px;
padding-top: 48px;
padding-bottom: 55px;
overflow: hidden;
background: url("img/quiz-paper.png") center center / cover no-repeat;
font-family: Montserrat, Arial, sans-serif;
color: #302c28;
}
/* =========================================================
ВЕРХНЯЯ ИКОНКА
========================================================= */
.court-cost-screen__icon-top {
width: 50px;
height: 50px;
margin: 0 auto 48px;
display: flex;
align-items: center;
justify-content: center;
}
.court-cost-screen__icon-top img {
display: block;
width: 50px;
height: 50px;
object-fit: contain;
}
/* =========================================================
ЗАГОЛОВОК
========================================================= */
.court-cost-screen__title {
width: 900px;
max-width: calc(100% - 40px);
margin: 0 auto;
text-align: center;
color: #B88A4433 20%;
font-family: "Montserrat";
font-weight: 800;
font-style: "ExtraBold";
font-size: 44px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
/* =========================================================
ОПИСАНИЕ
========================================================= */
.court-cost-screen__description {
width: 937px;
max-width: calc(100% - 40px);
margin: 36px auto 0;
text-align: center;
color: #2B2622;
font-family: "Montserrat";
font-weight: 500;
font-style: Medium;
font-size: 28px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
/* =========================================================
ЗАГОЛОВОК КЕЙСА
========================================================= */
.court-cost-screen__subtitle {
margin: 61px auto 37px;
width: 1000px;
max-width: calc(100% - 40px);
text-align: center;
white-space: nowrap;
font-family: "Montserrat";
font-weight: 700;
font-style: Bold;
font-size: 28px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
/* =========================================================
ОБЛАСТЬ КАРТОЧЕК
========================================================= */
.court-cost-screen__cards {
position: relative;
width: 100%;
height: 320px;
display: flex;
justify-content: center;
overflow: visible;
}
/* =========================================================
КАРТОЧКА
========================================================= */
.court-cost-card {
position: relative;
width: 1201px;
height: 428px;
flex-shrink: 0;
border-radius: 10px;
overflow: hidden;
background: transparent;
z-index: 5;
}
/* =========================================================
ВЕРХ КАРТОЧКИ
========================================================= */
.court-cost-card__content {
position: relative;
width: 1201px;
height: 247px;
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0.78);
border-radius: 10px 10px 0 0;
}
/* =========================================================
ФОТО
========================================================= */
.court-cost-card__photo {
position: relative;
width: 325px;
height: 353px;
flex-shrink: 0;
margin-left: 24px;
margin-top: 180px;
z-index: 10;
}
.court-cost-card__photo img {
display: block;
width: 325px;
height: 353px;
object-fit: cover;
}
/* =========================================================
ЦЕНА НА ФОТО
========================================================= */
.court-cost-card__price {
position: absolute;
left: 24px;
bottom: 50px;
white-space: nowrap;
color: #fff;
transform: rotate(-13deg);
font-family: "Montserrat";
font-weight: 900;
font-style: Black;
font-size: 36px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
}
/* =========================================================
СПИСОК РАСХОДОВ
========================================================= */
.court-cost-card__list {
margin-left: 42px;
margin-top: 0;
white-space: nowrap;
font-family: "Montserrat";
color: #302c28;
font-weight: 500;
font-style: Medium;
font-size: 28px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
}
/* =========================================================
НИЖНЯЯ ТЁМНАЯ ПАНЕЛЬ
========================================================= */
.court-cost-card__footer {
position: absolute;
left: 0;
bottom: 0;
width: 1201px;
height: 181px;
padding-left: 310px;
padding-top: 25px;
background: #292521;
border-radius: 10px;
}
/* =========================================================
СТРОКА НИЖНЕЙ ПАНЕЛИ
========================================================= */
.court-cost-card__footer-item {
min-height: 48px;
display: flex;
align-items: center;
gap: 28px;
margin-left: 80px;
font-family: "Montserrat";
font-weight: 500;
font-style: Medium;
font-size: 28px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
color: #fff;
}
.court-cost-card__footer-item + .court-cost-card__footer-item {
margin-top: 20px;
}
/* =========================================================
ИКОНКИ
========================================================= */
.court-cost-card__footer-item img {
display: block;
width: 38px;
height: 38px;
flex-shrink: 0;
object-fit: contain;
}
/* =========================================================
ПРЕДУПРЕЖДЕНИЕ
========================================================= */
.court-cost-screen__notice {
width: 900px;
max-width: calc(100% - 40px);
margin: 164px auto 0;
text-align: center;
}
/* =========================================================
ИКОНКА ПРЕДУПРЕЖДЕНИЯ
========================================================= */
.court-cost-screen__notice-icon {
display: block;
width: 79px;
height: 79px;
margin: 0 auto 32px;
object-fit: contain;
}
/* =========================================================
ТЕКСТ
========================================================= */
.court-cost-screen__notice p {
margin: 0 auto;
width: 1084px;
max-width: 100%;
font-family: "Montserrat";
font-weight: 500;
font-style: Medium;
font-size: 24px;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
color: #2B2622;
}
/* =========================================================
МОБИЛЬНАЯ ВЕРСИЯ
МАКЕТ: 360 × 970 PX
========================================================= */
@media (max-width: 600px) {
/* =====================================================
ОСНОВНОЙ ЭКРАН
===================================================== */
.court-cost-screen {
position: relative;
width: 100%;
min-height: 970px;
height: 970px;
padding: 0;
overflow: hidden;
background:
url("img/quiz-paper.png")
center center / cover no-repeat;
font-family: "Montserrat", Arial, sans-serif;
color: #302c28;
}
/* =====================================================
ВЕРХНЯЯ ИКОНКА ₽
На макете: примерно x169 y28
===================================================== */
.court-cost-screen__icon-top {
position: absolute;
top: 27px;
left: 50%;
width: 30px;
height: 30px;
margin: 0;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: center;
}
.court-cost-screen__icon-top img {
display: block;
width: 30px;
height: 30px;
object-fit: contain;
}
/* =====================================================
ЗАГОЛОВОК
x примерно 21px
y примерно 89px
===================================================== */
.court-cost-screen__title {
position: absolute;
top: 88px;
left: 50%;
width: 330px;
max-width: none;
margin: 0;
transform: translateX(-50%);
font-family: "Montserrat";
font-weight: 800;
font-style: "ExtraBold";
font-size: 18px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
text-align: center;
color: #302c28;
}
/* =====================================================
ОПИСАНИЕ
y примерно 180px
===================================================== */
.court-cost-screen__description {
position: absolute;
top: 180px;
left: 50%;
width: 330px;
max-width: none;
margin: 0;
transform: translateX(-50%);
font-family: "Montserrat";
font-weight: 500;
font-style: Medium;
font-size: 14px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
text-align: center;
color: #2B2622;
}
/* =====================================================
ЗАГОЛОВОК КАРТОЧКИ
y примерно 271px
===================================================== */
.court-cost-screen__subtitle {
position: absolute;
top: 271px;
left: 50%;
width: 300px;
max-width: none;
margin: 0;
transform: translateX(-50%);
font-family: "Montserrat";
font-weight: 700;
font-style: Bold;
font-size: 16px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
text-align: center;
color: #302c28;
z-index: 10;
}
/* =====================================================
ОБЛАСТЬ СЛАЙДЕРА
БЕЛАЯ КАРТОЧКА начинается y = 444px
===================================================== */
.court-cost-screen__cards {
position: absolute;
top: 444px;
left: 0;
width: 100%;
height: 265px;
margin: 0;
padding: 0;
display: block;
overflow: visible;
}
/* =====================================================
TRACK
===================================================== */
.court-cost-screen__cards > div {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 265px !important;
display: flex;
overflow: visible;
}
/* =====================================================
SLIDE
===================================================== */
.court-cost-screen__cards > div > div {
width: 100% !important;
height: 265px !important;
flex: 0 0 100% !important;
display: flex;
justify-content: center;
position: relative;
}
/* =====================================================
КАРТОЧКА
x = 15px
y = 444px
width = 330px
===================================================== */
.court-cost-card {
position: relative;
width: 330px;
height: 265px;
margin: 0;
flex-shrink: 0;
border-radius: 10px;
overflow: visible;
background: transparent;
z-index: 5;
}
/* =====================================================
БЕЛАЯ ЧАСТЬ
x = 15
y = 444
width = 330
height = 160
===================================================== */
.court-cost-card__content {
position: absolute;
top: 0;
left: 0;
width: 330px;
height: 160px;
margin: 0;
padding: 0;
display: block;
background: rgba(255, 255, 255, 0.78);
border-radius: 10px;
z-index: 2;
}
/* =====================================================
ФОТО
x = 106
y = 337
width = 148
height = 141
===================================================== */
.court-cost-card__photo {
position: absolute;
top: -107px;
left: 91px;
width: 148px;
height: 141px;
margin: 0;
padding: 0;
z-index: 10;
}
.court-cost-card__photo img {
display: block;
width: 148px;
height: 141px;
margin: 0;
padding: 0;
object-fit: cover;
}
/* =====================================================
ЦЕНА НА ФОТО
===================================================== */
.court-cost-card__price {
position: absolute;
left: 4px;
bottom: 39px;
white-space: nowrap;
color: #fff;
transform: rotate(-27deg);
font-family: "Montserrat";
font-weight: 900;
font-style: Black;
font-size: 20px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
z-index: 15;
}
/* =====================================================
СПИСОК
На макете начинается примерно x37 y507
===================================================== */
.court-cost-card__list {
position: absolute;
top: 60px;
left: 21px;
width: 300px;
margin: 0;
padding: 0;
white-space: nowrap;
font-family: "Montserrat";
font-weight: 500;
font-style: Medium;
font-size: 12px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
color: #302c28;
z-index: 5;
}
.court-cost-card__list div {
height: 15px;
margin: 0;
padding: 0;
}
/* =====================================================
ТЁМНАЯ ПАНЕЛЬ
y = 604
height = 105
===================================================== */
.court-cost-card__footer {
position: absolute;
left: 0;
bottom: 0;
width: 330px;
height: 105px;
margin: 0;
padding: 17px 0 0 15px;
background: #292521;
border-radius: 10px;
z-index: 4;
}
/* =====================================================
СТРОКА FOOTER
===================================================== */
.court-cost-card__footer-item {
min-height: 27px;
display: flex;
align-items: center;
gap: 11px;
margin: 0 0 0 12px;
font-family: "Montserrat";
font-weight: 500;
font-style: Medium;
font-size: 12px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
color: #fff;
}
.court-cost-card__footer-item + .court-cost-card__footer-item {
margin-top: 8px;
}
/* =====================================================
ИКОНКИ FOOTER
===================================================== */
.court-cost-card__footer-item img {
display: block;
width: 19px;
height: 19px;
flex: 0 0 20px;
object-fit: contain;
}
/* =====================================================
СТРЕЛКИ СЛАЙДЕРА — ТОЛЬКО МОБИЛЬНАЯ ВЕРСИЯ
===================================================== */
.court-cost-screen__arrow {
position: absolute;
top: -55px;
width: 28px;
height: 28px;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
border: none;
outline: none;
background: transparent;
cursor: pointer;
z-index: 50;
-webkit-tap-highlight-color: transparent;
}
/* Картинка стрелки */
.court-cost-screen__arrow img {
display: block;
width: 28px;
height: 28px;
object-fit: contain;
pointer-events: none;
}
/* =====================================================
ЛЕВАЯ СТРЕЛКА
===================================================== */
.court-cost-screen__arrow--prev {
left: 44px;
}
/* =====================================================
ПРАВАЯ СТРЕЛКА
===================================================== */
.court-cost-screen__arrow--next {
right: 44px;
}
/* =====================================================
WARNING / NOTICE
===================================================== */
.court-cost-screen__notice {
position: absolute;
top: 761px;
left: 50%;
width: 330px;
max-width: none;
margin: 0;
transform: translateX(-50%);
text-align: center;
z-index: 5;
}
/* =====================================================
ИКОНКА WARNING
===================================================== */
.court-cost-screen__notice-icon {
display: block;
width: 40px;
height: 40px;
margin: 0 auto 28px;
object-fit: contain;
}
/* =====================================================
ТЕКСТ WARNING
===================================================== */
.court-cost-screen__notice p {
width: 330px;
max-width: none;
margin: 0;
font-family: "Montserrat";
font-weight: 500;
font-style: Medium;
font-size: 14px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
text-align: center;
color: #2B2622;
}
}
/* =========================================================
СКИДКИ И ЛЬГОТЫ
========================================================= */
.inheritance-discounts {
width: 100%;
padding-top: 60px;
padding-bottom: 100px;
background-image: url("img/paper-background.png");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
overflow: hidden;
}
.inheritance-discounts__inner {
width: 1100px;
margin: 0 auto;
}
/* =========================================================
ВЕРХНЯЯ ИКОНКА
========================================================= */
.inheritance-discounts__top-icon {
display: block;
width: 58px;
height: 58px;
object-fit: contain;
margin: 0 auto 38px;
}
/* =========================================================
ЗАГОЛОВОК
========================================================= */
.inheritance-discounts__title {
margin: 0 0 62px;
font-family: "Montserrat";
font-weight: 800;
font-style: "ExtraBold";
font-size: 44px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
color: #B88A4433 20%;
}
/* =========================================================
СЕТКА
========================================================= */
.inheritance-discounts__grid {
display: grid;
grid-template-columns: 457px 457px;
column-gap: 210px;
row-gap: 32px;
justify-content: center;
}
/* =========================================================
ОДИН БЛОК
========================================================= */
.inheritance-discounts__item {
position: relative;
width: 457px;
}
/* =========================================================
ФОТО
ТОЧНЫЙ РАЗМЕР ИЗ ДИЗАЙНА:
width: 457px
height: 204px
========================================================= */
.inheritance-discounts__photo {
position: relative;
z-index: 2;
display: block;
width: 457px;
height: 204px;
object-fit: cover;
border-radius: 10px;
}
/* =========================================================
ДЕКОРАТИВНОЕ ФОТО СУДА
========================================================= */
.inheritance-discounts__court {
position: absolute;
z-index: 1;
width: 130px;
height: auto;
object-fit: contain;
top: 25px;
pointer-events: none;
}
.inheritance-discounts__court--left {
left: -65px;
}
.inheritance-discounts__court--right {
right: 393px;
}
/* =========================================================
НИЖНЯЯ КАРТОЧКА
ТОЧНЫЙ РАЗМЕР ИЗ ДИЗАЙНА:
width: 457px
height: 208px
========================================================= */
/* =========================================================
НИЖНЯЯ КАРТОЧКА
========================================================= */
.inheritance-discounts__card {
position: relative;
z-index: 3;
box-sizing: border-box;
width: 457px;
height: 208px;
margin-top: 16px;
padding: 22px 30px;
border-radius: 20px;
/* УБИРАЕМ opacity отсюда */
overflow: hidden;
text-align: center;
}
/* ФОН КАРТОЧКИ ОТДЕЛЬНО */
.inheritance-discounts__card::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
url("img/quiz-paper.png") center / cover no-repeat;
opacity: 0.9;
border-radius: 20px;
}
/* =========================================================
ИКОНКА В КАРТОЧКЕ
========================================================= */
.inheritance-discounts__icon {
display: block;
width: 39px;
height: 39px;
margin: 0 auto 12px;
object-fit: contain;
}
/* =========================================================
ЗАГОЛОВОК КАРТОЧКИ
========================================================= */
.inheritance-discounts__card h3 {
margin: 0 0 14px;
font-family: "Montserrat";
font-weight: 700;
font-style: Bold;
font-size: 26px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
text-align: center;
color: #3E3A35;
}
/* =========================================================
ТЕКСТ
========================================================= */
.inheritance-discounts__card p {
margin: 0;
font-family: "Montserrat";
font-weight: 500;
font-style: Medium;
font-size: 22px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
text-align: center;
color: #3E3A35;
}
/* =========================================================
ШЕСТАЯ КАРТОЧКА — ГАРАНТИЯ
========================================================= */
.inheritance-discounts__item--guarantee {
position: relative;
width: 457px;
height: 365px; /* 111px фото сверху + 365px карточка */
padding-top: 111px;
margin-top: -40px;
}
/* =========================================================
БОЛЬШОЙ ЩИТ — ФОТО
width: 244px
height: 303px
========================================================= */
.inheritance-discounts__shield {
position: absolute;
z-index: 5;
width: 244px;
height: 290px;
object-fit: contain;
top: 0;
left: 50%;
transform: translateX(-50%);
pointer-events: none;
}
/* =========================================================
КАРТОЧКА ГАРАНТИИ
width: 457px
height: 365px
========================================================= */
.inheritance-discounts__card--guarantee {
position: relative;
width: 457px;
height: 365px;
margin-top: 0;
padding: 185px 30px 30px;
border-radius: 20px;
}
/* =========================================================
ЗАГОЛОВОК ШЕСТОЙ КАРТОЧКИ
========================================================= */
.inheritance-discounts__card--guarantee h3 {
margin-bottom: 16px;
}
/* =========================================================
ТЕКСТ ШЕСТОЙ КАРТОЧКИ
========================================================= */
.inheritance-discounts__card--guarantee p {
margin: 0;
}
@media (max-width: 767px) {
.inheritance-discounts{
display: none;
}
}
/* =========================================
COST SECTION
========================================= */
.cost-section {
position: relative;
width: 100%;
min-height: 100vh;
background:
url("img/quiz-paper.png")
center center / cover
no-repeat;
overflow: hidden;
color: #342d27;
}
.cost-container {
position: relative;
width: 100%;
max-width: 1200px;
min-height: 1353px;
margin: 0 auto;
padding-top: 66px;
box-sizing: border-box;
}
/* =========================================
TOP ICON
========================================= */
.cost-top-icon {
width: 61px;
height: 61px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.cost-top-icon img {
display: block;
width: 61px;
height: 61px;
object-fit: contain;
}
/* =========================================
TITLE
========================================= */
.cost-title {
margin: 47px auto 0;
width: 100%;
text-align: center;
font-family: "Montserrat";
font-weight: 800;
font-style: "ExtraBold";
font-size: 44px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
letter-spacing: -0.8px;
color: #B88A4433 20%;
}
/* =========================================
DESCRIPTION
========================================= */
.cost-description {
width: 1200px;
max-width: calc(100% - 40px);
min-height: 155px;
margin: 38px auto 0;
padding: 30px 35px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background: #DAB5854D 30%;
font-family: "Montserrat";
font-weight: 500;
font-style: Medium;
font-size: 28px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
color: #2B2622;
}
/* =========================================
PHONE ICON
========================================= */
.cost-phone-icon {
width: 41px;
height: 41px;
margin: 65px auto 0;
display: flex;
align-items: center;
justify-content: center;
}
.cost-phone-icon img {
display: block;
width: 41px;
height: 41px;
opacity: 0.6;
object-fit: contain;
}
/* =========================================
SUBTITLE
========================================= */
.cost-subtitle {
margin: 25px 0 0;
text-align: center;
font-family: "Montserrat";
font-weight: 800;
font-style: "ExtraBold";
font-size: 28px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
color: #302a25;
}
/* =========================================
REASONS
========================================= */
.cost-reasons {
width: 100%;
margin-top: 48px;
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 65px;
padding: 0 65px;
box-sizing: border-box;
}
.cost-reason {
text-align: center;
}
/* Иконка + номер */
.reason-visual {
position: relative;
height: 105px;
display: flex;
align-items: center;
justify-content: center;
}
.reason-icon {
position: relative;
z-index: 2;
width: 115px;
height: 115px;
object-fit: contain;
}
.reason-number {
position: absolute;
z-index: 1;
left: 61%;
top: 5px;
font-family: "Montserrat";
font-weight: 800;
font-style: "ExtraBold";
font-size: 80px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
color: rgba(215, 201, 177, 0.58);
letter-spacing: -3px;
}
/* Текст */
.reason-text {
margin-top: 36px;
font-family: "Montserrat";
font-weight: 500;
font-style: Medium;
font-size: 18px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
color: #2B2622;
}
.reason-text strong {
font-family: "Montserrat";
font-weight: 700;
font-style: Bold;
font-size: 18px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
/* =========================================
BOTTOM ACTIONS
========================================= */
.cost-actions {
width: 100%;
margin-top: 76px;
display: grid;
grid-template-columns:
1fr
1fr
1.55fr;
column-gap: 38px;
padding: 0 70px;
box-sizing: border-box;
align-items: end;
}
.cost-action {
text-align: center;
}
/* Заголовки над кнопками */
.action-title {
height: 78px;
display: flex;
align-items: flex-start;
justify-content: center;
text-align: center;
font-family: "Montserrat";
font-weight: 300;
font-style: Light;
font-size: 28px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
color: #675b51;
}
/* =========================================
BUTTONS
========================================= */
.cost-button {
width: 100%;
max-width: 292px;
height: 96px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
border-radius: 9px;
text-decoration: none;
text-align: center;
font-family: "Montserrat";
font-weight: 500;
font-style: Medium;
font-size: 24px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
color: #fff;
transition:
transform 0.2s ease,
filter 0.2s ease;
}
.cost-button:hover {
transform: translateY(-2px);
filter: brightness(1.05);
}
.cost-button-orange {
background: #C6925C;
}
.cost-button-brown {
background: #967968;
}
/* =========================================
PHONE
========================================= */
.cost-phone-link {
height: 96px;
display: flex;
align-items: center;
justify-content: center;
gap: 22px;
text-decoration: none;
}
.cost-phone-round {
width: 59px;
height: 59px;
flex: 0 0 59px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.cost-phone-round img {
width: 59px;
height: 59px;
object-fit: contain;
}
.cost-phone-number {
white-space: nowrap;
font-family: "Mulish";
font-weight: 700;
font-style: Bold;
font-size: 50px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
color: #161616;
}
/* =========================================
MOBILE — 360px
Точная адаптация под макет 360 × 1559
========================================= */
@media (max-width: 767px) {
.cost-section {
width: 100%;
min-height: 1559px;
background-image: url("img/quiz-paper.png");
background-position: center top;
background-size: cover;
background-repeat: no-repeat;
overflow: hidden;
}
.cost-container {
width: 100%;
max-width: none;
min-height: 1559px;
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* =========================================
ВЕРХНЯЯ ИКОНКА РУБЛЯ
========================================= */
.cost-top-icon {
position: absolute;
top: 27px;
left: 50%;
width: 31px;
height: 31px;
margin: 0;
transform: translateX(-50%);
}
.cost-top-icon img {
width: 31px;
height: 31px;
display: block;
object-fit: contain;
}
/* =========================================
ЗАГОЛОВОК
========================================= */
.cost-title {
position: absolute;
top: 87px;
left: 15px;
width: calc(100% - 30px);
margin: 0;
padding: 0;
font-family: "Montserrat";
font-weight: 800;
font-style: "ExtraBold";
font-size: 18px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
text-align: center;
color: #393129;
}
/* =========================================
ОПИСАНИЕ
========================================= */
.cost-description {
position: absolute;
top: 167px;
left: 15px;
width: calc(100% - 30px);
max-width: none;
height: 103px;
min-height: 103px;
margin: 0;
padding: 11px 14px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
font-family: "Montserrat";
font-weight: 500;
font-style: Medium;
font-size: 12px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
text-align: center;
color: #2B2622;
background: #DAB5854D 30%;
}
/* =========================================
БОЛЬШАЯ ТЕЛЕФОННАЯ ИКОНКА
========================================= */
.cost-phone-icon {
position: absolute;
top: 297px;
left: 50%;
width: 41px;
height: 41px;
margin: 0;
transform: translateX(-50%);
}
.cost-phone-icon img {
width: 41px;
height: 41px;
opacity: 0.6;
object-fit: contain;
}
/* =========================================
ПОДЗАГОЛОВОК
========================================= */
.cost-subtitle {
position: absolute;
top: 369px;
left: 30px;
width: calc(100% - 60px);
margin: 0;
padding: 0;
font-family: "Montserrat";
font-weight: 800;
font-style: "ExtraBold";
font-size: 16px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
text-align: center;
color: #302a25;
}
/* =========================================
БЛОК ПРИЧИН
========================================= */
.cost-reasons {
position: static;
width: 100%;
margin: 0;
padding: 0;
display: block;
}
.cost-reason {
position: absolute;
width: 100%;
margin: 0;
padding: 0;
text-align: center;
}
/* =========================================
ПРИЧИНА 01
========================================= */
.cost-reason:nth-child(1) {
top: 450px;
left: 0;
}
/* =========================================
ПРИЧИНА 02
========================================= */
.cost-reason:nth-child(2) {
top: 644px;
left: 0;
}
/* =========================================
ПРИЧИНА 03
========================================= */
.cost-reason:nth-child(3) {
top: 813px;
left: 0;
}
/* =========================================
ИКОНКА + НОМЕР
========================================= */
.reason-visual {
position: relative;
width: 100%;
height: 65px;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
.reason-icon {
position: absolute;
z-index: 2;
width: 75px;
height: 75px;
object-fit: contain;
}
.reason-number {
position: absolute;
z-index: 1;
top: -3px;
left: 58%;
font-family: "Montserrat";
font-weight: 800;
font-style: "ExtraBold";
font-size: 80px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
text-align: center;
color: rgba(215, 201, 177, 0.58);
}
/* =========================================
ПЕРЕСТАНОВКА НОМЕРА ДЛЯ 02
========================================= */
.cost-reason:nth-child(2) .reason-number {
left: 18%;
top: -2px;
}
.cost-reason:nth-child(2) .reason-icon {
margin-left: 15px;
}
/* =========================================
НОМЕР 03
========================================= */
.cost-reason:nth-child(3) .reason-number {
left: 59%;
top: -15px;
}
/* =========================================
ТЕКСТ ПРИЧИН
========================================= */
.reason-text {
margin-top: 22px;
font-family: "Montserrat";
font-weight: 500;
font-style: Medium;
font-size: 14px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
text-align: center;
color: #2B2622;
}
.reason-text strong {
font-family: "Montserrat";
font-weight: 700;
font-style: Bold;
font-size: 14px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
/* =========================================
НИЖНИЕ ДЕЙСТВИЯ
========================================= */
.cost-actions {
position: static;
width: 100%;
margin: 0;
padding: 0;
display: block;
}
.cost-action {
position: absolute;
width: 100%;
margin: 0;
padding: 0;
text-align: center;
}
/* =========================================
ПЕРВАЯ КНОПКА
========================================= */
.consultation {
top: 1043px;
left: 0;
}
/* =========================================
ВТОРАЯ КНОПКА
========================================= */
.max-action {
top: 1219px;
left: 0;
}
/* =========================================
ТЕЛЕФОН
========================================= */
.phone-action {
top: 1416px;
left: 0;
}
/* =========================================
ЗАГОЛОВКИ НАД КНОПКАМИ
========================================= */
.action-title {
width: 100%;
height: auto;
margin: 0 0 23px;
padding: 0;
display: block;
font-family: "Montserrat";
font-weight: 300;
font-style: Light;
font-size: 14px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
text-align: center;
color: #675b51;
}
/* =========================================
КНОПКИ
========================================= */
.cost-button {
width: 298px;
max-width: 298px;
height: 97px;
margin: 0 auto;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
font-family: "Montserrat";
font-weight: 500;
font-style: Medium;
font-size: 24px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
text-align: center;
color: #fff;
transition: none;
}
.cost-button:hover {
transform: none;
filter: none;
}
.cost-button-orange {
background: #C6925C;
}
.cost-button-brown {
background: #967968;
}
/* =========================================
ТЕЛЕФОН ВНИЗУ
========================================= */
.phone-action .action-title {
margin-bottom: 28px;
}
.cost-phone-link {
width: 100%;
height: auto;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 17px;
text-decoration: none;
}
.cost-phone-round {
width: 31px;
height: 31px;
flex: 0 0 31px;
margin: 0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.cost-phone-round img {
width: 31px;
height: 31px;
object-fit: contain;
}
.cost-phone-number {
white-space: nowrap;
font-family: "Mulish";
font-weight: 700;
font-style: Bold;
font-size: 22px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
color: #161616;
}
}
/* =========================================
ДЛЯ ОЧЕНЬ УЗКИХ ЭКРАНОВ
========================================= */
@media (max-width: 340px) {
.cost-title {
font-size: 17px;
}
.cost-description {
font-size: 11px;
}
.cost-phone-number {
font-size: 19px;
}
.cost-button {
width: calc(100% - 40px);
max-width: 298px;
}
}
/* =========================================
CASES SECTION
========================================= */
.cases-section {
position: relative;
width: 100%;
min-height: 1325px;
background-image: url("img/quiz-paper2.png");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
overflow: hidden;
color: #2b2622;
font-family: "Montserrat", sans-serif;
}
.cases-container {
position: relative;
width: 100%;
max-width: 1905px;
min-height: 1325px;
margin: 0 auto;
padding-top: 28px;
box-sizing: border-box;
}
/* =========================================
TOP ICON
========================================= */
.cases-top-icon {
width: 49px;
height: 49px;
margin: 0 auto;
}
.cases-top-icon img {
display: block;
width: 49px;
height: 49px;
object-fit: contain;
}
/* =========================================
TITLE
========================================= */
.cases-title {
margin: 35px auto 0;
padding: 0;
text-align: center;
font-family: "Montserrat";
font-weight: 800;
font-style: "ExtraBold";
font-size: 44px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
color: #B88A4433 20%;
}
/* =========================================
SUBTITLE
========================================= */
.cases-subtitle {
margin: 48px auto 0;
padding: 0;
text-align: center;
font-family: "Montserrat";
font-weight: 500;
font-style: Medium;
font-size: 32px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
color: #2B2622;
}
/* =========================================
SLIDER
========================================= */
.cases-slider {
position: relative;
width: 100%;
margin-top: 78px;
}
/* =========================================
CASE CARD
========================================= */
.case-card {
position: relative;
width: 990px;
margin: 0 auto;
box-sizing: border-box;
}
/* =========================================
CARD HEADING
========================================= */
.case-card-heading {
position: relative;
width: 100%;
height: 63px;
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 0 10px;
box-sizing: border-box;
}
.case-number {
display: block;
margin-top: -10px;
font-family: "Montserrat";
font-weight: 800;
font-style: "ExtraBold";
font-size: 64px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
color: #b38d77;
}
.case-date {
display: block;
padding-top: 13px;
font-family: "Montserrat";
font-weight: 500;
font-style: Medium;
font-size: 21px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
color: #292522;
}
/* =========================================
CARD MAIN CONTENT
========================================= */
.case-content {
width: 100%;
min-height: 388px;
padding: 25px 30px 29px;
box-sizing: border-box;
border-radius: 19px 19px 0 0;
background-image: url("img/quiz-paper.png");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
box-shadow: inset 0 0 0 1px rgba(173, 135, 93, 0.06);
}
/* =========================================
CASE TITLE
========================================= */
.case-title {
margin: 0 0 18px;
font-family: "Montserrat";
font-weight: 600;
font-style: "SemiBold";
font-size: 35px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
color: #2d2925;
}
/* =========================================
CASE DESCRIPTION
========================================= */
.case-description {
width: 763px;
font-family: "Montserrat";
font-weight: 400;
font-style: "Regular";
font-size: 22px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
color: #342f2b;
}
.case-description p {
margin: 0 0 18px;
}
.case-description p:last-child {
margin-bottom: 0;
}
.case-description strong {
font-family: "Montserrat";
font-weight: 700;
font-style: Bold;
font-size: 22px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
}
/* =========================================
RESULT
========================================= */
.case-result {
width: 100%;
min-height: 151px;
margin-top: -40px;
padding: 27px 30px 25px;
box-sizing: border-box;
border-radius: 0 0 19px 19px;
background: #2B2622;
color: #f7f4ef;
font-family: "Montserrat";
font-weight: 400;
font-style: "Regular";
font-size: 20px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
line-height: 1.25;
}
.case-result p {
margin: 0 0 18px;
}
.case-result p:last-child {
margin-bottom: 0;
}
.case-result strong {
font-family: "Montserrat";
font-weight: 600;
font-style: "SemiBold";
font-size: 20px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
}
/* =========================================
ARROWS
========================================= */
.cases-arrow {
position: absolute;
top: 207px;
width: 60px;
height: 60px;
padding: 0;
margin: 0;
border: 0;
border-radius: 50%;
background: #c79676;
cursor: pointer;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
transition:
transform 0.2s ease,
opacity 0.2s ease;
}
.cases-arrow:hover {
transform: scale(1.06);
}
.cases-arrow:active {
transform: scale(0.96);
}
/* стрелка */
/* =========================================
СТРЕЛКИ СЛАЙДЕРА
========================================= */
.cases-arrow {
position: absolute;
top: 207px;
width: 60px;
height: 60px;
padding: 0;
margin: 0;
border: none;
border-radius: 50%;
background: #c79676;
cursor: pointer;
z-index: 20;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
transition: transform 0.2s ease;
}
.cases-arrow:hover {
transform: scale(1.06);
}
.cases-arrow:active {
transform: scale(0.96);
}
/* =========================================
САМА СТРЕЛКА
========================================= */
.cases-arrow span {
display: block;
width: 13px;
height: 13px;
border-top: 4px solid #fff;
border-right: 4px solid #fff;
box-sizing: border-box;
}
/* =========================================
ПРАВАЯ СТРЕЛКА
========================================= */
.cases-arrow-next {
left: calc(50% + 520px);
right: auto;
}
.cases-arrow-next span {
transform: rotate(45deg);
margin-left: -5px;
}
/* =========================================
ЛЕВАЯ СТРЕЛКА
========================================= */
.cases-arrow-prev {
left: auto;
right: calc(50% + 520px);
display: none;
}
.cases-arrow-prev span {
transform: rotate(-135deg);
margin-right: -5px;
}
/* =========================================
CTA
========================================= */
.cases-cta {
width: 100%;
margin-top: 84px;
text-align: center;
}
.cases-cta h3 {
margin: 0 0 36px;
font-family: "Montserrat";
font-weight: 700;
font-style: Bold;
font-size: 28px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
color: #302b27;
}
/* =========================================
CTA BUTTON
========================================= */
.cases-button {
width: 380px;
height: 92px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
border-radius: 9px;
background: #C6925C;
text-decoration: none;
color: #fff;
transition:
transform 0.2s ease,
filter 0.2s ease;
}
.cases-button:hover {
transform: translateY(-2px);
filter: brightness(1.05);
}
.cases-button strong {
display: block;
font-family: "Montserrat";
font-weight: 700;
font-style: Bold;
font-size: 20px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
.cases-button span {
display: block;
font-family: "Montserrat";
font-weight: 400;
font-style: Regular;
font-size: 20px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
/* =========================================================
MOBILE CASES — HTML НЕ ТРОГАЕМ
========================================================= */
@media (max-width: 767px) {
.cases-section {
min-height: 1000px;
background-position: center top;
background-size: cover;
}
.cases-container {
width: 100%;
min-height: 1000px;
padding-top: 21px;
}
/* ---------- ИКОНКА ---------- */
.cases-top-icon {
width: 29px;
height: 29px;
margin: 0 auto;
}
.cases-top-icon img {
width: 29px;
height: 29px;
}
/* ---------- ЗАГОЛОВОК ---------- */
.cases-title {
width: 330px;
margin: 8px auto 0;
font-family: "Montserrat";
font-weight: 800;
font-style: "ExtraBold";
font-size: 18px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
/* ---------- ПОДЗАГОЛОВОК ---------- */
.cases-subtitle {
width: 300px;
margin: 11px auto 0;
font-family: "Montserrat";
font-weight: 500;
font-style: Medium;
font-size: 14px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
/* ---------- СЛАЙДЕР ---------- */
.cases-slider {
width: 100%;
margin-top: 34px;
position: relative;
}
/* ---------- КАРТОЧКА ---------- */
.case-card {
width: 100%;
margin: 0;
}
/* ---------- КЕЙС 1 ---------- */
.case-card-heading {
width: 100%;
height: 53px;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 0;
}
.case-number {
margin: 0;
font-family: "Montserrat";
font-weight: 800;
font-style: "ExtraBold";
font-size: 40px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
/* ---------- ДАТА ---------- */
/*
HTML не меняем.
На мобильном дата из heading переносится
визуально вниз под карточку через absolute.
*/
.case-date {
position: absolute;
top: 542px;
left: 0;
width: 100%;
padding: 0;
text-align: center;
font-family: "Montserrat";
font-weight: 500;
font-style: Medium;
font-size: 14px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
z-index: 15;
}
/* ---------- ВЕРХ КАРТОЧКИ ---------- */
.case-content {
width: 100%;
min-height: 316px;
padding: 28px 22px 25px;
border-radius: 18px 18px 0 0;
box-sizing: border-box;
background-position: center;
background-size: cover;
}
/* ---------- ЗАГОЛОВОК КАРТОЧКИ ---------- */
.case-title {
width: 100%;
margin: 0 0 27px;
text-align: center;
font-family: "Montserrat";
font-weight: 600;
font-style: "SemiBold";
font-size: 20px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
/* ---------- ТЕКСТ ---------- */
.case-description {
width: 100%;
text-align: center;
font-family: "Montserrat";
font-weight: 400;
font-style: "Regular";
font-size: 15px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
.case-description p {
margin: 0 0 27px;
}
.case-description strong {
font-family: "Montserrat";
font-weight: 700;
font-style: Bold;
font-size: 15px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
/* ---------- РЕЗУЛЬТАТ ---------- */
.case-result {
width: 100%;
min-height: 161px;
margin-top: 0;
padding: 18px 22px;
border-radius: 0 0 18px 18px;
font-family: "Montserrat";
font-weight: 400;
font-style: "Regular";
font-size: 14px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
text-align: center;
box-sizing: border-box;
}
.case-result p {
margin: 0 0 20px;
}
.case-result strong {
font-family: "Montserrat";
font-weight: 600;
font-style: "SemiBold";
font-size: 14px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
/* =========================================================
СТРЕЛКИ
========================================================= */
.cases-arrow {
position: absolute;
top: 0;
width: 29px;
height: 29px;
border: none;
border-radius: 50%;
padding: 0;
margin: 0;
background: #c79676;
display: flex;
align-items: center;
justify-content: center;
z-index: 50;
box-sizing: border-box;
}
/* ПРАВАЯ */
.cases-arrow-next {
left: auto;
right: 31px;
}
/* ЛЕВАЯ */
.cases-arrow-prev {
left: 31px;
right: auto;
display: none;
}
/* сама стрелочка */
.cases-arrow span {
width: 8px;
height: 8px;
display: block;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
box-sizing: border-box;
}
.cases-arrow-next span {
transform: rotate(45deg);
margin-left: -3px;
}
.cases-arrow-prev span {
transform: rotate(-135deg);
margin-right: -3px;
}
/* =========================================================
CTA
========================================================= */
.cases-cta {
width: 100%;
margin-top: 55px;
padding: 0 15px;
box-sizing: border-box;
text-align: center;
}
.cases-cta h3 {
margin: 0 0 28px;
font-family: "Montserrat";
font-weight: 700;
font-style: Bold;
font-size: 18px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
/* ---------- КНОПКА ---------- */
.cases-button {
width: 100%;
max-width: 330px;
height: 82px;
margin: 0 auto;
border-radius: 8px;
}
.cases-button strong {
font-family: "Montserrat";
font-weight: 700;
font-style: Bold;
font-size: 20px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
.cases-button span {
font-family: "Montserrat";
font-weight: 400;
font-style: "Regular";
font-size: 20px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
}
/* =========================================
OVERPAY SECTION
========================================= */
.overpay-section {
position: relative;
width: 100%;
min-height: 1350px;
background-image: url("img/quiz-paper.png");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
overflow: hidden;
color: #2b2622;
font-family: "Montserrat", sans-serif;
}
.overpay-container {
position: relative;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding-top: 42px;
padding-bottom: 55px;
box-sizing: border-box;
}
/* =========================================
TOP ICON
========================================= */
.overpay-top-icon {
width: 51px;
height: 51px;
margin: 0 auto;
}
.overpay-top-icon img {
display: block;
width: 51px;
height: 51px;
object-fit: contain;
}
/* =========================================
TITLE
========================================= */
.overpay-title {
margin: 43px auto 0;
padding: 0;
text-align: center;
font-family: "Montserrat";
font-weight: 800;
font-style: "ExtraBold";
font-size: 44px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
color: #40372f;
}
/* =========================================
SUBTITLE
========================================= */
.overpay-subtitle {
margin: 42px auto 0;
padding: 0;
text-align: center;
font-family: "Montserrat";
font-weight: 500;
font-style: Medium;
font-size: 28px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
color: #2f2925;
}
/* =========================================
WARNING BLOCK
1208 × 379 px
========================================= */
.overpay-warning {
position: relative;
width: 1208px;
height: 379px;
margin: 26px auto 0;
box-sizing: border-box;
border: 3px solid #C6925C;
border-radius: 10px;
background: transparent;
}
/* =========================================
WARNING ITEMS
========================================= */
.warning-items {
position: absolute;
left: 18px;
top: 25px;
width: 850px;
}
.warning-item {
display: flex;
width: 100%;
margin-bottom: 25px;
align-items: flex-start;
}
.warning-item:last-child {
margin-bottom: 0;
}
/* =========================================
WARNING ICON
========================================= */
.warning-icon {
flex: 0 0 46px;
width: 51px;
height: 51px;
margin-right: 14px;
}
.warning-icon img {
display: block;
width: 51px;
height: 51px;
object-fit: contain;
}
/* =========================================
WARNING TEXT
========================================= */
.warning-text {
display: flex;
flex-direction: column;
padding-top: 1px;
font-family: "Montserrat";
color: #332d28;
}
.warning-text strong {
display: block;
font-family: "Montserrat";
font-weight: 600;
font-style: "SemiBold";
font-size: 20px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
}
.warning-text span {
display: block;
margin-top: 3px;
font-family: "Montserrat";
font-weight: 500;
font-style: Medium;
font-size: 20px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
}
/* =========================================
LAWYER IMAGE
========================================= */
.warning-lawyer {
position: absolute;
right: -48px;
top: 20px;
width: 454px;
height: 302px;
display: flex;
align-items: flex-end;
justify-content: center;
}
.warning-lawyer img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
/* =========================================
CHECK HEADING
========================================= */
.check-heading {
display: flex;
align-items: center;
justify-content: center;
margin-top: 55px;
}
.check-heading-icon {
width: 43px;
height: 43px;
margin-right: 20px;
}
.check-heading-icon img {
display: block;
width: 43px;
height: 43px;
object-fit: contain;
}
.check-heading h3 {
margin: 0;
font-family: "Montserrat";
font-weight: 700;
font-style: Bold;
font-size: 40px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
color: #37302a;
}
/* =========================================
CHECK LIST
========================================= */
.check-list {
width: 1029px;
margin: 38px auto 0;
}
/* =========================================
WHITE CARD
1029 × 185 px
========================================= */
.check-card {
position: relative;
width: 1029px;
height: 185px;
margin-bottom: 17px;
display: flex;
align-items: center;
box-sizing: border-box;
border-radius: 10px;
background-image: url("img/quiz-paper2.png");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
overflow: hidden;
}
.check-card:last-child {
margin-bottom: 0;
}
/* =========================================
CARD ICON
========================================= */
.check-card-icon {
flex: 0 0 170px;
width: 170px;
height: 130px;
display: flex;
align-items: center;
justify-content: center;
}
.check-card-icon img {
display: block;
width: 128px;
height: 128px;
object-fit: contain;
}
/* =========================================
CARD TEXT
========================================= */
.check-card-text {
position: relative;
z-index: 2;
width: 650px;
text-align: center;
font-family: "Montserrat";
color: #302a25;
}
.check-card-text p {
margin: 0 0 20px;
font-family: "Montserrat";
font-weight: 500;
font-style: Medium;
font-size: 22px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
.check-card-text span {
display: block;
font-family: "Montserrat";
font-weight: 500;
font-style: Medium;
font-size: 22px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
.check-card:nth-child(2) .check-card-icon img {
transform: rotate(28deg);
}
/* =========================================
CIRCLES
========================================= */
.check-card-circle {
position: absolute;
right: 43px;
top: 50%;
width: 91px;
height: 91px;
transform: translateY(-50%);
border-radius: 50%;
}
.check-green {
background: #4D965E80 50%;
}
.check-yellow {
background: #FFDA5F80 50%;
}
.check-red {
background: #8D3B3280 50%;
}
/* =========================================
QUESTION
========================================= */
.overpay-question {
text-align: center;
margin-top: 45px;
}
.question-icon {
width: 45px;
height: 45px;
margin: 0 auto 32px;
}
.question-icon img {
display: block;
width: 45px;
height: 45px;
object-fit: contain;
}
.overpay-question h3 {
margin: 0;
font-family: "Montserrat";
font-weight: 700;
font-style: Bold;
font-size: 30px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
color: #302a25;
}
/* =========================================
BENEFITS
========================================= */
/* =========================================
BENEFITS
========================================= */
.overpay-benefits {
width: 1100px;
max-width: 100%;
margin: 48px auto 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
column-gap: 25px;
box-sizing: border-box;
}
.benefit {
text-align: center;
min-width: 0;
}
.benefit-icon {
width: 68px;
height: 68px;
margin: 0 auto;
}
.benefit-icon img {
display: block;
width: 68px;
height: 68px;
object-fit: contain;
}
.benefit p {
margin: 22px 0 0;
font-family: "Montserrat";
font-weight: 500;
font-size: 20px;
line-height: 1.15;
letter-spacing: 0;
text-align: center;
color: #38302a;
}
/* =========================================
ACTIONS
========================================= */
.overpay-actions {
width: 900px;
margin: 36px auto 0;
margin-left: 40px;
display: grid;
grid-template-columns: 245px 245px 1fr;
column-gap: 28px;
gap: 70px;
align-items: center;
}
/* =========================================
BUTTONS
========================================= */
.overpay-button {
width: 278px;
height: 87px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
border-radius: 7px;
text-decoration: none;
color: #fff;
transition:
transform 0.2s ease,
filter 0.2s ease;
}
.overpay-button:hover {
transform: translateY(-2px);
filter: brightness(1.05);
}
.overpay-button span {
display: block;
font-family: "Montserrat";
font-weight: 500;
font-style: Medium;
font-size: 24px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
.overpay-button-orange {
background: #c6925c;
}
.overpay-button-brown {
background: #967968;
}
/* =========================================
PHONE
========================================= */
.overpay-phone {
display: flex;
align-items: center;
justify-content: center;
gap: 17px;
height: 70px;
text-decoration: none;
}
.overpay-phone-icon {
width: 49px;
height: 49px;
flex: 0 0 49px;
}
.overpay-phone-icon img {
display: block;
width: 49px;
height: 49px;
object-fit: contain;
}
.overpay-phone-number {
white-space: nowrap;
font-family: "Mulish";
font-weight: 700;
font-style: Bold;
font-size: 48px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
color: #161616;
}
/* =========================================================
MOBILE — OVERPAY SECTION
HTML НЕ ТРОГАЕМ
========================================================= */
@media (max-width: 767px) {
/* =======================================================
SECTION
======================================================= */
.overpay-section {
width: 100%;
min-height: 100vh;
overflow: hidden;
background-image: url("img/quiz-paper.png");
background-position: center top;
background-size: cover;
background-repeat: no-repeat;
}
.overpay-container {
width: 100%;
max-width: none;
padding: 17px 0 40px;
margin: 0;
}
/* =======================================================
TOP ICON
======================================================= */
.overpay-top-icon {
width: 32px;
height: 32px;
margin: 0 auto;
}
.overpay-top-icon img {
width: 32px;
height: 32px;
}
/* =======================================================
TITLE
======================================================= */
.overpay-title {
width: calc(100% - 35px);
margin: 22px auto 0;
padding: 0;
font-family: "Montserrat", sans-serif;
font-weight: 800;
font-size: 15px;
line-height: 1.08;
letter-spacing: 0;
text-align: center;
color: #40372f;
}
/* =======================================================
SUBTITLE
======================================================= */
.overpay-subtitle {
width: calc(100% - 38px);
margin: 13px auto 0;
padding: 0;
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size: 9.5px;
line-height: 1.15;
letter-spacing: 0;
text-align: center;
color: #2f2925;
}
/* =======================================================
WARNING BLOCK
======================================================= */
.overpay-warning {
position: relative;
width: calc(100% - 20px);
height: 370px;
margin: 78px auto 0;
margin-top: 120px;
border: 2px solid #c6925c;
border-radius: 7px;
box-sizing: border-box;
}
/* =======================================================
LAWYER
На мобильном фото находится НАД рамкой,
как на макете
======================================================= */
.warning-lawyer {
position: absolute;
width: 127px;
height: 84px;
top: -84px;
right: 50%;
transform: translateX(50%);
display: flex;
align-items: center;
justify-content: center;
z-index: 5;
}
.warning-lawyer img {
width: 100%;
height: 100%;
margin-top: -30px;
object-fit: contain;
}
/* =======================================================
WARNING ITEMS — MOBILE
======================================================= */
.warning-items {
position: absolute;
left: 14px;
top: 19px;
width: calc(100% - 28px);
box-sizing: border-box;
}
.warning-item {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
margin-bottom: 18px;
}
/* =======================================================
WARNING ICON — ПО ЦЕНТРУ
======================================================= */
.warning-icon {
order: 1;
flex: 0 0 auto;
width: 19px;
height: 19px;
margin: 0 0 5px;
}
.warning-icon img {
display: block;
width: 19px;
height: 19px;
object-fit: contain;
}
/* =======================================================
WARNING TEXT — ПОД КРЕСТИКОМ
======================================================= */
.warning-text {
order: 2;
width: 220px;
max-width: 220px;
padding: 0;
text-align: center;
}
.warning-text strong,
.warning-text span {
display: block;
text-align: center;
}
.warning-text strong {
display: block;
font-family: "Montserrat", sans-serif;
font-weight: 600;
font-size: 10px;
line-height: 1.08;
letter-spacing: 0;
}
.warning-text span {
display: block;
margin-top: 2px;
font-family: "Montserrat";
font-weight: 500;
font-size: 10px;
line-height: 1.08;
letter-spacing: 0;
}
/* =======================================================
CHECK HEADING
======================================================= */
.check-heading {
width: 100%;
margin-top: 13px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.check-heading-icon {
width: 35px;
height: 35px;
margin: 0 0 10px;
}
.check-heading-icon img {
width: 35px;
height: 35px;
}
.check-heading h3 {
width: 100%;
margin: 0;
font-family: "Montserrat";
font-weight: 700;
font-style: Bold;
font-size: 22px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
text-align: center;
color: #37302a;
}
/* =======================================================
CHECK LIST
======================================================= */
.check-list {
width: 100%;
margin: 17px auto 0;
padding: 0;
box-sizing: border-box;
}
/* =======================================================
WHITE CARDS
======================================================= */
.check-card {
position: relative;
width: 100%;
height: 324px;
margin: 0 0 38px;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
border-radius: 9px;
background-image: url("img/quiz-paper2.png");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
overflow: visible;
box-sizing: border-box;
}
.check-card:nth-child(2) {
height: 344px;
margin-bottom: 54px;
}
.check-card:nth-child(3) {
height: 376px;
margin-bottom: 0;
}
/* =======================================================
CARD ICON
======================================================= */
.check-card-icon {
flex: none;
width: 79px;
height: 78px;
margin: 24px auto 0;
display: flex;
align-items: center;
justify-content: center;
}
.check-card-icon img {
display: block;
width: 79px;
height: 78px;
object-fit: contain;
}
/* Вторая иконка — поворот 28 градусов */
.check-card:nth-child(2) .check-card-icon img {
transform: rotate(28deg);
}
/* =======================================================
CARD TEXT
======================================================= */
.check-card-text {
position: relative;
z-index: 2;
width: calc(100% - 30px);
margin: 12px auto 0;
text-align: center;
font-family: "Montserrat";
color: #302a25;
}
.check-card-text p {
margin: 0 0 18px;
font-family: "Montserrat";
font-weight: 500;
font-style: Medium;
font-size: 18px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
text-align: center;
}
.check-card-text span {
display: block;
font-family: "Montserrat";
font-weight: 500;
font-style: Medium;
font-size: 18px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
text-align: center;
}
/* =======================================================
CARD 2 TEXT
======================================================= */
.check-card:nth-child(2) .check-card-text {
margin-top: 10px;
}
/* =======================================================
CARD 3 TEXT
======================================================= */
.check-card:nth-child(3) .check-card-text {
margin-top: 11px;
}
/* =======================================================
CIRCLES
На макете они находятся снизу карточек
======================================================= */
.check-card-circle {
position: absolute;
left: 50%;
right: auto;
top: auto;
bottom: -19px;
width: 60px;
height: 60px;
transform: translateX(-50%);
border-radius: 50%;
z-index: 10;
}
.check-green {
background: rgba(77, 150, 94, 0.50);
}
.check-yellow {
background: rgba(255, 218, 95, 0.50);
}
.check-red {
background: rgba(141, 59, 50, 0.50);
}
/* =======================================================
QUESTION
======================================================= */
.overpay-question {
width: 100%;
margin: 67px auto 0;
text-align: center;
}
.question-icon {
width: 35px;
height: 35px;
margin: 0 auto 31px;
}
.question-icon img {
width: 35px;
height: 35px;
object-fit: contain;
}
.overpay-question h3 {
width: calc(100% - 40px);
margin: 0 auto;
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: 12px;
line-height: 1.1;
letter-spacing: 0;
text-align: center;
color: #302a25;
}
/* =======================================================
BENEFITS
======================================================= */
/* =======================================================
QUESTION ICON
======================================================= */
.overpay-question {
position: relative;
width: 100%;
margin: 67px auto 0;
text-align: center;
}
.question-icon {
position: relative;
width: 35px;
height: 35px;
margin: 0 auto 31px;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
}
.question-icon img {
display: block;
width: 35px;
height: 35px;
max-width: none;
object-fit: contain;
opacity: 1;
visibility: visible;
}
.overpay-benefits {
width: 100%;
margin: 38px auto 0;
padding: 0 32px;
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 38px;
row-gap: 32px;
box-sizing: border-box;
}
.benefit {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.benefit-icon {
width: 64px;
height: 64px;
margin: 0 auto;
flex-shrink: 0;
}
.benefit-icon img {
display: block;
width: 64px;
height: 64px;
object-fit: contain;
}
.benefit p {
width: 100%;
margin: 10px 0 0;
font-family: "Montserrat";
font-weight: 500;
font-style: Medium;
font-size: 14px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
text-align: center;
color: #38302a;
}
.benefit p {
margin: 10px 0 0;
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size: 9px;
line-height: 1.08;
letter-spacing: 0;
text-align: center;
color: #38302a;
}
/* =======================================================
ACTIONS
======================================================= */
.overpay-actions {
width: 100%;
margin: 48px auto 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 18px;
box-sizing: border-box;
}
/* =======================================================
BUTTONS
======================================================= */
.overpay-button {
width: 248px;
height: 88px;
flex: none;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 6px;
box-sizing: border-box;
}
.overpay-button span {
display: block;
font-family: "Montserrat";
font-weight: 500;
font-size: 20px;
line-height: 1.15;
letter-spacing: 0;
text-align: center;
}
.overpay-button-orange {
background: #C6925C;
}
.overpay-button-brown {
background: #967968;
}
/* =======================================================
PHONE
======================================================= */
.overpay-phone {
width: auto;
height: auto;
margin-top: 16px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 9px;
text-decoration: none;
}
.overpay-phone-icon {
width: 22px;
height: 22px;
flex: 0 0 19px;
}
.overpay-phone-icon img {
display: block;
width: 22px;
height: 22px;
object-fit: contain;
}
.overpay-phone-number {
white-space: nowrap;
font-family: "Mulish";
font-weight: 700;
font-style: Bold;
font-size: 30px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
letter-spacing: 0;
color: #161616;
}
}
/* =========================================================
VERY SMALL PHONES
========================================================= */
@media (max-width: 374px) {
.overpay-title {
font-size: 15px;
}
.overpay-subtitle {
font-size: 9px;
}
.warning-text strong {
font-size: 7px;
}
.warning-text span {
font-size: 6.7px;
}
.check-card-text p,
.check-card-text span {
font-size: 11px;
}
.overpay-phone-number {
font-size: 19px;
}
}
/* ==========================================
SECTION
========================================== */
.faq-section {
position: relative;
min-height: 100vh;
overflow: hidden;
padding: 27px 20px 104px;
background-image: url("img/bafff.png");
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
}
/* ==========================================
CONTAINER
========================================== */
.faq-container {
position: relative;
z-index: 1;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
/* ==========================================
TOP ICON
========================================== */
.faq-icon {
position: relative;
width: 56px;
height: 56px;
margin: 0 auto 17px;
}
.faq-icon img{
width: 56px;
height: 56px;
}
/* ==========================================
TITLE
========================================== */
.faq-title {
margin: 0 0 57px;
color: #342e27;
text-align: center;
line-height: 1.15;
letter-spacing: -0.8px;
font-family: "Montserrat";
font-weight: 800;
font-style: "ExtraBold";
font-size: 44px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
/* ==========================================
GRID
========================================== */
.faq-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
column-gap: 55px;
row-gap: 22px;
}
/* ==========================================
FAQ ITEM
========================================== */
.faq-item {
width: 100%;
margin: 0;
padding: 0;
border: 0;
border-radius: 17px;
overflow: hidden;
background-image: url("img/quiz-paper.png");
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
box-shadow:
inset 0 0 0 1px rgba(192, 159, 109, 0.05);
}
/* ==========================================
SUMMARY
========================================== */
.faq-item summary {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 83px;
padding: 7px 52px 7px 28px;
cursor: pointer;
list-style: none;
color: #29251f;
text-align: center;
line-height: 1.14;
border-radius: 20px;
user-select: none;
transition:
background-color 0.2s ease;
font-family: "Montserrat";
font-weight: 600;
font-style: "SemiBold";
font-size: 18px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
/* Убираем стандартный треугольник */
.faq-item summary::-webkit-details-marker {
display: none;
}
.faq-item summary::marker {
display: none;
content: "";
}
/* Текст */
.faq-item summary span {
display: block;
width: 100%;
}
/* ==========================================
ARROW
========================================== */
.faq-arrow {
position: absolute;
right: 14px;
top: 50%;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 12px solid #090806;
transform: translateY(-50%);
transition: transform 0.25s ease;
}
/* Открытый вопрос */
.faq-item[open] .faq-arrow {
transform:
translateY(-50%)
rotate(180deg);
}
/* ==========================================
ANSWER
========================================== */
.faq-answer {
padding: 20px 27px 25px;
background: rgba(255, 255, 255, 0.84);
color: #59544e;
text-align: center;
line-height: 1.38;
font-family: "Montserrat";
font-weight: 400;
font-style: "Regular";
font-size: 16px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
/* ==========================================
HOVER
========================================== */
.faq-item summary:hover {
background: rgba(255, 248, 233, 0.35);
}
/* ==========================================
FOCUS
========================================== */
.faq-item summary:focus-visible {
outline: 2px solid #8d7656;
outline-offset: -2px;
}
/* ==========================================
FULL WIDTH
========================================== */
.faq-full {
grid-column: 1 / -1;
}
/* ==========================================
MOBILE FAQ — 360px
========================================== */
@media (max-width: 767px) {
/* =========================================================
МОБИЛЬНОЕ МЕНЮ — УСЛУГИ
========================================================= */
.mobile-navigation__services {
position: relative;
width: 89px;
height: 27px;
}
/* Выпадающее окно */
.mobile-navigation__dropdown {
position: absolute;
top: 32px;
left: 0;
width: 190px;
margin: 0;
padding: 5px;
box-sizing: border-box;
display: none;
background: #F6E5D0;
border: 1px solid rgba(150, 121, 104, 0.25);
border-radius: 7px;
box-shadow: 0 5px 14px rgba(57, 51, 45, 0.12);
z-index: 1000;
}
/* Открытие */
.mobile-navigation__services.is-open
.mobile-navigation__dropdown {
display: block;
animation: servicesDropdownOpen 0.18s ease;
}
/* Анимация */
@keyframes servicesDropdownOpen {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* =========================================================
ТЕКСТ ВЫПАДАЮЩЕГО МЕНЮ
========================================================= */
.mobile-navigation__dropdown a {
display: flex;
width: 100% !important;
height: auto !important;
min-height: 30px;
margin: 0;
padding: 7px 9px;
box-sizing: border-box;
align-items: center;
justify-content: flex-start;
background: transparent !important;
color: #39332D;
text-decoration: none;
font-family: "Montserrat", sans-serif;
font-size: 7px;
font-weight: 500;
line-height: 1.25;
text-align: left;
white-space: normal;
border: none !important;
border-radius: 4px;
}
/* Наведение */
.mobile-navigation__dropdown a:hover {
background: rgba(150, 121, 104, 0.10) !important;
}
/* Между пунктами нет полос */
.mobile-navigation__dropdown a + a {
border: none !important;
}
/* SECTION */
.faq-section {
min-height: 100vh;
padding: 29px 0 72px;
overflow: hidden;
background-position: center top;
background-size: cover;
}
/* CONTAINER */
.faq-container {
width: 100%;
max-width: none;
margin: 0;
}
/* ICON */
.faq-icon {
width: 35px;
height:35px;
margin: 0 auto 17px;
}
.faq-icon img {
display: block;
width: 35px;
height: 35px;
object-fit: contain;
}
/* TITLE */
.faq-title {
margin: 0 20px 20px;
color: #342e27;
font-family: "Montserrat";
font-weight: 800;
font-style: ExtraBold;
font-size: 22px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
text-align: center;
}
/* GRID */
.faq-grid {
display: grid;
grid-template-columns: 1fr;
width: 100%;
column-gap: 0;
row-gap: 5px;
}
/* FAQ ITEM */
.faq-item {
width: 100%;
margin: 0;
padding: 0;
border-radius: 12px;
background-image: url("img/quiz-paper.png");
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
overflow: hidden;
}
/* SUMMARY */
.faq-item summary {
position: relative;
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
min-height: 58px;
box-sizing: border-box;
padding: 8px 45px 8px 29px;
border-radius: 12px;
color: #29251f;
font-family: "Montserrat";
font-weight: 600;
font-style: SemiBold;
font-size: 12px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: left;
cursor: pointer;
}
/* TEXT */
.faq-item summary span {
display: block;
width: 100%;
text-align: left;
}
/* ARROW */
.faq-arrow {
position: absolute;
right: 16px;
top: 50%;
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 8px solid #090806;
transform: translateY(-50%);
}
/* OPEN ARROW */
.faq-item[open] .faq-arrow {
transform:
translateY(-50%)
rotate(180deg);
}
/* ANSWER */
.faq-answer {
box-sizing: border-box;
width: 100%;
padding: 19px 29px 21px;
background: rgba(255, 255, 255, 0.86);
color: #59544e;
font-family: "Montserrat";
font-weight: 400;
font-style: Regular;
font-size: 10px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: left;
}
/* HOVER */
.faq-item summary:hover {
background: transparent;
}
/* FOCUS */
.faq-item summary:focus-visible {
outline: 2px solid #8d7656;
outline-offset: -2px;
}
/* LAST ITEM */
.faq-full {
grid-column: auto;
}
}
/* =========================================
CONTACTS
========================================= */
.contacts {
position: relative;
width: 100%;
overflow: hidden;
background-color: #faf7f1;
/* если у тебя есть текстура фона */
background-image: url("img/logofff.png");
background-repeat: repeat;
background-size: auto;
color: #29241f;
}
.contact-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
min-width: 0;
}
.contact-icon {
width: 70px;
height: 70px;
margin-bottom: 15px;
object-fit: contain;
}
.contact-text {
width: 339px;
max-width: 210px;
display: flex;
flex-direction: column;
align-items: center;
color: #2B2622;
font-family: "Montserrat";
font-weight: 500;
font-style: normal;
font-size: 16px;
line-height: 100%;
letter-spacing: 0;
text-align: center;
}
.contact-text a {
color: inherit;
text-decoration: none;
}
.contact-text a:hover {
text-decoration: underline;
}
/* =========================================
MAP
========================================= */
.map-wrapper {
width: 650px;
max-width: 100%;
margin: 100px auto 0;
overflow: hidden;
}
.map-image {
display: block;
width: 100%;
height: auto;
object-fit: cover;
}
/* =========================================
GUARANTEES SECTION
========================================= */
.guarantees-section {
width: 100%;
min-height: 100vh;
position: relative;
padding: 40px 20px 90px;
box-sizing: border-box;
overflow: hidden;
}
/* Текстура фона */
.guarantees-section::before {
content: "";
position: absolute;
inset: 0;
background-image: url("img/background.png");
background-repeat: repeat;
background-size: 700px auto;
pointer-events: none;
z-index: 0;
}
/* =========================================
CONTAINER
========================================= */
.guarantees-container {
position: relative;
z-index: 1;
width: 100%;
max-width: 905px;
margin: 0 auto;
}
/* =========================================
HEADER
========================================= */
.guarantees-header {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-bottom: 32px;
}
.guarantees-header-icon {
width: 72px;
height: 72px;
margin-bottom: 28px;
object-fit: contain;
}
.guarantees-header h2 {
width: 1000px;
margin: 0;
color: #B88A4433 20%;
font-family: "Montserrat";
line-height: 1.15;
letter-spacing: 0;
text-align: center;
font-weight: 800;
font-style: "ExtraBold";
font-size: 44px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
.guarantees-header p {
margin: 23px 0 0;
color: #3b3025;
font-family: "Montserrat";
line-height: 1.25;
text-align: center;
font-weight: 500;
font-style: Medium;
font-size: 28px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
/* =========================================
LIST
========================================= */
.guarantees-container {
position: relative;
z-index: 1;
width: 100%;
max-width: 1201px;
margin: 0 auto;
}
.guarantees-list {
width: 100%;
display: flex;
flex-direction: column;
gap: 16px;
}
.guarantee-card {
position: relative;
width: 1201px;
height: 231px;
margin: 0 auto;
display: flex;
align-items: center;
box-sizing: border-box;
padding: 20px 45px 20px 30px;
background: #FFFFFF;
border-radius: 10px;
opacity: 1;
}
/* Дополнительная текстура внутри карточек */
.guarantee-card::before {
content: "";
position: absolute;
inset: 0;
background-image: url("/img/bafff.png");
background-repeat: repeat;
background-size: 500px auto;
opacity: 0.18;
border-radius: 8px;
pointer-events: none;
z-index: 0;
}
/* =========================================
LEFT ICON
========================================= */
.guarantee-icon {
position: relative;
z-index: 1;
width: 105px;
min-width: 105px;
height: 105px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 25px;
}
.guarantee-icon img {
display: block;
width: 105px;
height: 105px;
object-fit: contain;
}
/* =========================================
CONTENT
========================================= */
.guarantee-content {
position: relative;
z-index: 1;
flex: 1;
min-width: 0;
padding-right: 10px;
}
.guarantee-content h3 {
margin: 0 0 2px;
color: #342b23;
font-family: "Montserrat";
line-height: 1.2;
letter-spacing: 0;
font-weight: 700;
font-style: Bold;
font-size: 24px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
}
.guarantee-content p {
margin: 0;
color: #342b23;
font-family: "Montserrat";
line-height: 1.25;
letter-spacing: 0;
font-weight: 500;
font-style: Medium;
font-size: 24px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
}
/* =========================================
RIGHT CHECK ICON
========================================= */
.guarantee-check {
position: absolute;
z-index: 3;
top: 50%;
right: -20px;
transform: translateY(-50%);
width: 60px;
height: 60px;
object-fit: contain;
pointer-events: none;
}
/* =========================================
CONTACTS
========================================= */
/* =========================================
CONTAINER
========================================= */
.contacts__container {
width: 1200px;
max-width: calc(100% - 40px);
margin: 0 auto;
padding: 42px 20px 28px;
box-sizing: border-box;
}
/* =========================================
HEADER
========================================= */
.contacts__header {
width: 100%;
display: grid;
/*
Левая часть — логотип
Центр — заголовок
Правая часть — телефон
*/
grid-template-columns: 320px 1fr 320px;
align-items: start;
margin-bottom: 32px;
}
/* =========================================
LOGO
========================================= */
.contacts__logo {
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 86px;
}
.contacts__logo img {
display: block;
width: 302px;
height: auto;
max-width: none;
object-fit: contain;
}
/* =========================================
MAIN TITLE
========================================= */
.contacts__main-title {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
text-align: center;
padding-top: 0;
}
.contacts__pin-top {
display: block;
width: 36px;
height: 44px;
object-fit: contain;
margin: 0 0 28px;
}
.contacts__main-title h2 {
margin: 0;
padding: 0;
line-height: 1.12;
font-weight: 800;
color: #1F1F1F;
white-space: nowrap;
font-family: "Montserrat";
font-weight: 800;
font-style: ExtraBold;
font-size: 30px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
/* =========================================
TOP PHONE
========================================= */
.contacts__phone-top {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
padding-top: 84px;
white-space: nowrap;
}
.contacts__phone-top img {
display: block;
width: 34px;
height: 34px;
flex: 0 0 38px;
object-fit: contain;
}
.contacts__phone-top a {
display: block;
color: #161616;
line-height: 1;
font-family: "Mulish";
font-weight: 700;
font-style: Bold;
font-size: 26px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
}
.contacts__main-title h2 {
margin: 0;
font-family: "Montserrat";
font-size: 28px;
line-height: 1.13;
font-weight: 800;
color: #332c25;
}
/* =========================================
TOP PHONE
========================================= */
.contacts__phone-top {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
white-space: nowrap;
}
.contacts__phone-top img {
width: 38px;
height: 38px;
object-fit: contain;
}
.contacts__phone-top a {
color: #171717;
text-decoration: none;
font-family: Montserrat, Arial, sans-serif;
font-size: 25px;
line-height: 1;
font-weight: 500;
}
/* =========================================
MAIN GRID
========================================= */
.contacts__grid {
display: grid;
grid-template-columns:
1fr
1.18fr
1fr;
column-gap: 50px;
align-items: start;
}
/* =========================================
COLUMNS
========================================= */
.contacts__column {
min-width: 0;
display: flex;
flex-direction: column;
}
/* =========================================
COMMON ITEM
========================================= */
.contacts__item {
text-align: center;
font-family: Arial, sans-serif;
font-size: 15px;
line-height: 1.15;
}
.contacts__item h3 {
margin: 8px 0 2px;
font-size: 15px;
line-height: 1.2;
font-weight: 700;
}
.contacts__item p {
margin: 0;
font-family: "Montserrat";
font-weight: 400;
font-style: normal;
font-size: 15px;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
.contacts__item a {
color: #2c2926;
text-decoration: none;
font-size: 15px;
}
/* =========================================
ICONS
========================================= */
.contacts__icon {
display: block;
width: 40px;
height: 40px;
margin: 0 auto;
object-fit: contain;
}
.contacts__icon--map {
width: 53px;
height: 53px;
}
.contacts__icon--phone {
width: 40px;
height: 40px;
}
/* =========================================
LEFT COLUMN
========================================= */
.contacts__item--schedule {
min-height: 135px;
}
.contacts__item--schedule .contacts__icon {
margin-bottom: 6px;
}
.contacts__item--how {
margin-top: 8px;
min-height: 295px;
}
.contacts__item--how .contacts__icon {
margin-bottom: 25px;
}
.contacts__item--how .contacts__text {
margin-bottom: 17px;
}
.contacts__item--details {
margin-top: 4px;
}
.contacts__item--details .contacts__icon {
margin-bottom: 18px;
}
.contacts__details {
font-size: 18px !important;
line-height: 1.18 !important;
}
/* =========================================
CENTER COLUMN
========================================= */
.contacts__item--address {
min-height: 135px;
}
.contacts__item--address .contacts__icon {
margin-bottom: 7px;
}
/* =========================================
MAP
========================================= */
.contacts__map {
width: 100%;
display: flex;
justify-content: center;
margin-top: 4px;
}
.contacts__map img {
display: block;
width: 350px;
height: 265px;
max-width: 100%;
object-fit: cover;
border-radius: 13px;
}
/* =========================================
SPECIAL CONDITIONS
========================================= */
.contacts__special {
text-align: center;
margin-top: 17px;
font-size: 13px;
line-height: 1.35;
}
.contacts__special-icon {
display: block;
width: 34px;
height: 34px;
margin: 0 auto 12px;
object-fit: contain;
}
.contacts__special h3 {
margin: 0 0 3px;
font-size: 12px;
line-height: 1.2;
font-weight: 700;
}
.contacts__special p {
margin: 0;
}
/* =========================================
RIGHT COLUMN
========================================= */
.contacts__item--email {
min-height: 132px;
}
.contacts__item--email .contacts__icon {
margin-bottom: 8px;
}
.contacts__item--tel {
min-height: 145px;
margin-top: 0;
}
.contacts__item--tel .contacts__icon {
margin-bottom: 10px;
}
.contacts__item--messengers {
min-height: 190px;
margin-top: 0;
}
.contacts__item--messengers .contacts__icon {
width: 43px;
height: 43px;
margin-bottom: 8px;
}
.contacts__item--time {
margin-top: 12px;
}
.contacts__item--time .contacts__icon {
width: 40px;
height: 40px;
margin-bottom: 12px;
}
.contacts__item--time p {
font-size: 15px;
line-height: 1.2;
}
/* =========================================
STRONG
========================================= */
.contacts strong {
font-weight: 700;
}
/* =========================================
GALLERY
========================================= */
.contacts__gallery {
width: 100%;
margin-top: 38px;
text-align: center;
}
/* =========================================
GALLERY IMAGES
========================================= */
.contacts__gallery-images {
width: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
align-items: center;
justify-content: center;
}
.contacts__gallery-images img {
display: block;
width: 100%;
height: 184px;
object-fit: cover;
border-radius: 20px;
}
/* =========================================
GALLERY TEXT
========================================= */
.contacts__gallery-text {
margin: 51px 0 0;
font-family: "Montserrat";
line-height: 100%;
letter-spacing: 0;
text-align: center;
color: #29241f;
font-weight: 500;
font-style: Medium;
font-size: 16px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
/* =========================================================
FOOTER
========================================================= */
.footer {
width: 100%;
background: #ffffff;
color: #171717;
font-family: "Montserrat", Arial, sans-serif;
box-sizing: border-box;
}
.footer *,
.footer *::before,
.footer *::after {
box-sizing: border-box;
}
/* =========================================================
CONTAINER
========================================================= */
.footer__container {
width: 100%;
max-width: 1170px;
margin: 0 auto;
padding: 38px 0 39px;
}
/* =========================================================
LOGO
========================================================= */
.footer__logo {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 30px;
}
.footer__logo img {
display: block;
width: 323px;
height: auto;
object-fit: contain;
}
/* =========================================================
DESCRIPTION
========================================================= */
.footer__description {
width: 100%;
text-align: center;
font-family: "Montserrat";
line-height: 1.35;
color: #171717;
margin: 0 auto 50px;
font-weight: 500;
font-style: Medium;
font-size: 12px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
/* =========================================================
COLUMNS
========================================================= */
.footer__columns {
width: 100%;
display: grid;
grid-template-columns:
1.9fr
1fr
1.35fr
.95fr;
column-gap: 38px;
align-items: start;
}
/* =========================================================
COLUMN
========================================================= */
.footer__column {
min-width: 0;
}
.footer__column h3 {
margin: 0 0 19px;
font-family: "Montserrat";
line-height: 1.2;
color: #C6925C;
font-weight: 700;
font-style: Bold;
font-size: 20px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
}
/* =========================================================
LIST
========================================================= */
.footer__column ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer__column li {
position: relative;
margin: 0 0 11px;
padding-left: 16px;
line-height: 1.25;
white-space: nowrap;
font-family: "Montserrat";
font-weight: 500;
font-style: Medium;
font-size: 12px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
}
.footer__column li::before {
content: "—";
position: absolute;
left: 0;
top: 0;
color: #171717;
}
.footer__column a {
color: #171717;
text-decoration: none;
transition: color .2s ease;
}
.footer__column a:hover {
color: #b77d43;
}
/* =========================================================
CONTACTS
========================================================= */
.footer__contact {
margin: 0;
}
.footer__contact p {
margin: 0 0 15px;
font-family: "Montserrat", Arial, sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 1.25;
color: #171717;
}
/* =========================================================
PRIVACY
========================================================= */
.footer__privacy {
width: 100%;
text-align: center;
margin-top: 21px;
}
.footer__privacy a {
margin: 0 0 20px;
text-decoration: none;
font-family: "Montserrat";
line-height: 1.2;
color: #171717;
font-weight: 700;
font-style: Bold;
font-size: 17px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
.footer__privacy p {
width: 760px;
max-width: 100%;
margin: 0 auto;
font-family: "Montserrat";
line-height: 1.25;
color: #967968;
margin-top: 20px;
font-weight: 500;
font-style: Medium;
font-size: 10px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
/* =========================================================
COPYRIGHT
========================================================= */
.footer__copyright {
width: 100%;
margin-top: 31px;
text-align: center;
font-family: "Montserrat";
line-height: 1.2;
color: #171717;
font-weight: 700;
font-style: Bold;
font-size: 17px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
/* =========================================================
МОБИЛЬНАЯ ВЕРСИЯ — 360px
ТОЧНАЯ ПОСЛЕДОВАТЕЛЬНОСТЬ КАК В ДИЗАЙНЕ
========================================================= */
@media (max-width: 600px) {
/* =====================================================
CONTACTS
===================================================== */
.contacts {
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
margin-top: -30px;
margin-left: -10px;
overflow: hidden;
background-color: #ffffff;
background-image: none;
background-repeat: repeat;
background-position: center top;
background-size: auto;
color: #29241f;
}
.contacts__container {
width: 100%;
max-width: 360px;
margin: 60px auto 0 !important;
padding: 12px 15px 20px;
box-sizing: border-box;
}
/* =====================================================
HEADER
===================================================== */
.contacts__header {
width: 100%;
display: block;
margin: 0;
padding: 0;
}
.contacts__logo,
.contacts__phone-top {
display: none;
}
/* =====================================================
ЗАГОЛОВОК
===================================================== */
.contacts__main-title {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
margin: 0;
padding: 0;
text-align: center;
}
.contacts__pin-top {
display: block;
width: 33px;
height: 33px;
margin: 0 0 10px;
object-fit: contain;
}
.contacts__main-title h2 {
width: 100%;
margin: 0;
padding: 0 15px;
box-sizing: border-box;
font-family: "Montserrat";
font-weight: 800;
font-style: normal;
font-size: 20px;
line-height: 100%;
letter-spacing: 0;
text-align: center;
color: #29241f;
white-space: normal;
}
/* =====================================================
ОСНОВНАЯ СЕТКА
ВАЖНО:
display: contents убирает три колонки,
чтобы все элементы можно было расположить
строго по макету.
===================================================== */
.contacts__grid {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
margin: 0;
padding: 0;
}
.contacts__column {
display: contents;
}
/* =====================================================
ОБЩИЕ СВОЙСТВА
===================================================== */
.contacts__item {
width: 100%;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box;
text-align: center;
font-family: "Montserrat";
color: #29241f;
}
.contacts__item h3 {
margin: 0;
font-family: "Montserrat";
font-size: 12px;
line-height: 100%;
font-weight: 700;
letter-spacing: 0;
text-align: center;
color: #29241f;
}
.contacts__item p {
margin: 0;
font-family: "Montserrat";
font-size: 12px;
line-height: 100%;
font-weight: 400;
letter-spacing: 0;
text-align: center;
color: #29241f;
}
.contacts__item a {
color: #29241f;
text-decoration: none;
font-family: "Montserrat";
}
/* =====================================================
ИКОНКИ
===================================================== */
.contacts__icon {
display: block;
width: 25px;
height: 25px;
margin-left: auto;
margin-right: auto;
object-fit: contain;
}
/* =====================================================
РЕЖИМ РАБОТЫ — 360px
===================================================== */
.contacts__item--schedule {
width: 100%;
margin: 19px 0 15px !important;
padding: 0 !important;
text-align: center;
}
/* ИКОНКА */
.contacts__item--schedule .contacts__icon {
display: block;
width: 24px;
height: 24px;
margin: 0 auto 7px;
object-fit: contain;
}
/* РЕЖИМ РАБОТЫ: */
.contacts__item--schedule h3 {
margin: 0 0 4px;
padding: 0;
font-family: "Montserrat";
font-weight: 700;
font-style: normal;
font-size: 12px;
line-height: 100%;
letter-spacing: 0;
text-align: center;
color: #29241f;
}
/* Понедельник — Пятница... */
.contacts__item--schedule p {
margin: 0;
padding: 0;
font-family: "Montserrat";
font-weight: 400;
font-style: normal;
font-size: 12px;
line-height: 100%;
letter-spacing: 0;
text-align: center;
color: #29241f;
}
/* =====================================================
АДРЕС — 360px
===================================================== */
.contacts__item--address {
order: 2;
width: 100% !important;
margin: 0 0 16px !important;
padding: 0 !important;
text-align: center !important;
}
/* ИКОНКА */
.contacts__item--address .contacts__icon {
display: block !important;
width: 25px !important;
height: 25px !important;
margin: 0 auto 7px !important;
object-fit: contain !important;
}
/* АДРЕС: */
.contacts__item--address h3 {
display: block !important;
width: 100% !important;
margin: 0 0 4px !important;
padding: 0 !important;
font-family: "Montserrat" !important;
font-weight: 700 !important;
font-style: normal !important;
font-size: 12px !important;
line-height: 100% !important;
letter-spacing: 0 !important;
text-align: center !important;
color: #29241f !important;
}
/* ТЕКСТ АДРЕСА */
.contacts__item--address p {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
font-family: "Montserrat" !important;
font-weight: 500 !important;
font-style: normal !important;
font-size: 12px !important;
line-height: 100% !important;
letter-spacing: 0 !important;
text-align: center !important;
color: #29241f !important;
}
/* =====================================================
EMAIL — 360px
===================================================== */
.contacts__item--email {
order: 3;
width: 100%;
margin: 0 0 16px !important;
padding: 0 !important;
text-align: center;
}
/* ИКОНКА */
.contacts__item--email .contacts__icon {
display: block;
width: 25px;
height: 25px;
margin: 0 auto 7px;
object-fit: contain;
}
/* EMAIL: */
.contacts__item--email h3 {
margin: 0 0 4px;
padding: 0;
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-style: normal;
font-size: 12px;
line-height: 100%;
letter-spacing: 0;
text-align: center;
color: #29241f;
}
/* ПОЧТА */
.contacts__item--email a {
display: block;
margin: 0;
padding: 0;
font-family: "Montserrat", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 12px;
line-height: 100%;
letter-spacing: 0;
text-align: center;
color: #29241f;
text-decoration: none;
}
/* =====================================================
КАРТА — 360px
===================================================== */
.contacts__map {
order: 4;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin: 0 0 16px;
padding: 0;
box-sizing: border-box;
}
/* ИЗОБРАЖЕНИЕ КАРТЫ */
.contacts__map img {
display: block;
width: 300px;
height: 227px;
max-width: none;
margin: 0 auto;
object-fit: cover;
border-radius: 20px;
}
/* =====================================================
КАК ДОБРАТЬСЯ — 360px
===================================================== */
.contacts__item--how {
order: 5;
width: 100%;
margin: 0 0 17px !important;
padding: 0 20px !important;
box-sizing: border-box;
text-align: center;
}
/* ИКОНКА */
.contacts__item--how .contacts__icon {
display: block;
width: 30px;
height: 30px;
margin: 0 auto 10px;
object-fit: contain;
}
/* ОСНОВНОЙ ТЕКСТ */
.contacts__item--how .contacts__text {
width: 100%;
margin: 0 0 9px;
padding: 0;
font-family: "Montserrat";
font-weight: 500;
font-style: normal;
font-size: 12px;
line-height: 100%;
letter-spacing: 0;
text-align: center;
color: #29241f;
}
/* ПОСЛЕДНИЙ АБЗАЦ */
.contacts__item--how .contacts__text:last-child {
margin-bottom: 0;
}
/* ЖИРНЫЙ ТЕКСТ */
.contacts__item--how strong,
.contacts__item--how b {
font-family: "Montserrat";
font-weight: 700;
font-style: normal;
font-size: 12px;
line-height: 100%;
letter-spacing: 0;
text-align: center;
}
/* =====================================================
РЕКВИЗИТЫ — 360px
===================================================== */
.contacts__item--details {
order: 6;
width: 100%;
margin: 0 0 17px !important;
padding: 0 !important;
text-align: center;
}
/* ИКОНКА */
.contacts__item--details .contacts__icon {
display: block;
width: 27px;
height: 27px;
margin: 0 auto 7px;
object-fit: contain;
}
/* ТЕКСТ РЕКВИЗИТОВ */
.contacts__details {
width: 100%;
margin: 0 !important;
padding: 0 !important;
font-family: "Montserrat" !important;
font-weight: 400 !important;
font-style: normal !important;
font-size: 12px !important;
line-height: 100% !important;
letter-spacing: 0 !important;
text-align: center !important;
color: #29241f;
}
/* =====================================================
ТЕЛЕФОН — 360px
===================================================== */
.contacts__item--tel {
order: 7;
width: 100%;
margin: 0 0 16px !important;
padding: 0 !important;
text-align: center;
}
/* ИКОНКА */
.contacts__item--tel .contacts__icon {
display: block;
width: 25px;
height: 25px;
margin: 0 auto 7px;
object-fit: contain;
}
/* ТЕЛЕФОН: */
.contacts__item--tel h3 {
margin: 0 0 4px;
padding: 0;
font-family: "Montserrat";
font-weight: 700;
font-style: normal;
font-size: 12px;
line-height: 100%;
letter-spacing: 0;
text-align: center;
color: #29241f;
}
/* НОМЕР ТЕЛЕФОНА */
.contacts__item--tel p {
margin: 0;
padding: 0;
font-family: "Montserrat";
font-weight: 400;
font-style: normal;
font-size: 12px;
line-height: 100%;
letter-spacing: 0;
text-align: center;
color: #29241f;
}
/* =====================================================
WHATSAPP / TELEGRAM — 360px
===================================================== */
.contacts__item--messengers {
order: 8;
width: 100%;
margin: 0 0 16px !important;
padding: 0 !important;
text-align: center;
}
/* ИКОНКА */
.contacts__item--messengers .contacts__icon {
display: block;
width: 27px;
height: 27px;
margin: 0 auto 7px;
object-fit: contain;
}
/* WHATSAPP / TELEGRAM: */
.contacts__item--messengers h3 {
margin: 0 0 4px;
padding: 0;
font-family: "Montserrat";
font-weight: 700;
font-style: normal;
font-size: 12px;
line-height: 100%;
letter-spacing: 0;
text-align: center;
color: #29241f;
}
/* ТЕКСТ */
.contacts__item--messengers p {
margin: 0;
padding: 0;
font-family: "Montserrat";
font-weight: 400;
font-style: normal;
font-size: 12px;
line-height: 100%;
letter-spacing: 0;
text-align: center;
color: #29241f;
}
/* =====================================================
ВРЕМЯ — 360px
===================================================== */
.contacts__item--time {
order: 9;
width: 100%;
margin: 0 0 19px !important;
padding: 0 !important;
text-align: center;
}
/* ИКОНКА */
.contacts__item--time .contacts__icon {
display: block;
width: 26px;
height: 26px;
margin: 0 auto 7px;
object-fit: contain;
}
/* ОСНОВНОЙ ТЕКСТ */
.contacts__item--time p {
margin: 0;
padding: 0;
font-family: "Montserrat";
font-weight: 500;
font-style: normal;
font-size: 12px;
line-height: 100%;
letter-spacing: 0;
text-align: center;
color: #29241f;
}
/* ЕСЛИ ЕСТЬ ДОПОЛНИТЕЛЬНЫЙ ТЕКСТ */
.contacts__item--time span {
font-family: "Montserrat";
font-weight: 400;
font-style: normal;
font-size: 12px;
line-height: 100%;
letter-spacing: 0;
text-align: center;
color: #29241f;
}
/* =====================================================
СПЕЦИАЛЬНЫЕ УСЛОВИЯ — 360px
===================================================== */
.contacts__special {
order: 10;
width: 100%;
margin: 0 0 18px;
padding: 0 20px;
box-sizing: border-box;
text-align: center;
font-family: "Montserrat";
}
/* ИКОНКА */
.contacts__special-icon {
display: block;
width: 66px;
height: 37px;
margin: 0 auto 7px;
object-fit: contain;
}
/* ЗАГОЛОВОК */
.contacts__special h3 {
margin: 0 0 6px;
padding: 0;
font-family: "Montserrat";
font-weight: 700;
font-style: normal;
font-size: 10px;
line-height: 20px;
letter-spacing: 0;
text-align: center;
color: #29241f;
}
/* ТЕКСТ */
.contacts__special p {
margin: 0;
padding: 0;
font-family: "Montserrat";
font-weight: 400;
font-style: normal;
font-size: 10px;
line-height: 20px;
letter-spacing: 0;
text-align: center;
color: #29241f;
}
/* =====================================================
ГАЛЕРЕЯ — ОТ КРАЯ ДО КРАЯ 360px
===================================================== */
.contacts__gallery {
width: 100%;
margin: 0;
padding: 0;
text-align: center;
}
/* КОНТЕЙНЕР ФОТО */
.contacts__gallery-images {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
gap: 0;
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* ФОТО */
.contacts__gallery-images img {
display: block;
width: 72px;
height: 129px;
flex: 0 0 72px;
object-fit: cover;
border-radius: 10px;
}
/* =====================================================
ТЕКСТ ПОД ФОТО — 360px
===================================================== */
.contacts__gallery-text {
width: 100%;
margin: 14px 0 0;
padding: 0 17px;
box-sizing: border-box;
font-family: "Montserrat";
font-weight: 500;
font-style: normal;
font-size: 12px;
line-height: 100%;
letter-spacing: 0;
text-align: center;
color: #29241f;
}
/* =====================================================
FOOTER
===================================================== */
.footer {
width: 100%;
margin: 0;
padding: 0;
background: #fff;
color: #171717;
font-family: "Montserrat", Arial, sans-serif;
}
.footer__container {
width: 100%;
max-width: 360px;
margin: 0 auto;
padding: 21px 15px 22px;
box-sizing: border-box;
}
/* =====================================================
FOOTER LOGO — ПЕРВЫЙ
===================================================== */
.footer__logo {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin: 0 0 17px;
}
.footer__logo img {
display: block;
width: 302px;
height: auto;
object-fit: contain;
}
/* =====================================================
ОПИСАНИЕ — 360px
===================================================== */
.footer__description {
width: 100%;
margin: 0 auto 26px;
padding: 0 2px;
box-sizing: border-box;
font-family: "Montserrat";
font-weight: 500;
font-style: normal;
font-size: 10px;
line-height: 100%;
letter-spacing: 0;
text-align: center;
color: #171717;
}
/* =====================================================
КОЛОНКИ FOOTER
1 строка: УСЛУГИ
2 строка: КОМПАНИЯ | КОНТАКТЫ
3 строка: ПОЛЕЗНАЯ ИНФОРМАЦИЯ
===================================================== */
.footer__columns {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"services services"
"company contacts"
"useful useful";
column-gap: 18px;
row-gap: 18px;
align-items: start;
}
.footer__column {
width: 100%;
min-width: 0;
}
/* Услуги */
.footer__column--services {
grid-area: services;
}
/* Компания */
.footer__column:nth-child(2) {
grid-area: company;
}
/* Полезная информация */
.footer__column:nth-child(3) {
grid-area: useful;
}
/* Контакты */
.footer__column--contacts {
grid-area: contacts;
}
/* =====================================================
ЗАГОЛОВКИ FOOTER
===================================================== */
.footer__column--services h3 {
margin: 0 0 9px;
font-family: "Montserrat";
font-weight: 700;
font-style: normal;
font-size: 20px;
line-height: 100%;
letter-spacing: 0;
color: #C6925C;
}
/* =====================================================
СПИСКИ
===================================================== */
.footer__column ul {
list-style: none;
margin: 0;
padding: 0;
}
.footer__column--services li {
position: relative;
margin: 0 0 6px;
padding-left: 8px;
white-space: normal;
font-family: "Montserrat";
font-weight: 500;
font-style: normal;
font-size: 10px;
line-height: 100%;
letter-spacing: 0;
}
/* ССЫЛКИ */
.footer__column--services a {
font-family: "Montserrat";
font-weight: 500;
font-size: 10px;
line-height: 100%;
color: #171717;
text-decoration: none;
}
/* =====================================================
КОНТАКТЫ FOOTER
===================================================== */
/* =====================================================
КОНТАКТЫ FOOTER — 360px
===================================================== */
.footer__column--contacts {
grid-area: contacts;
}
/* ТЕКСТ КОНТАКТОВ */
.footer__column--contacts,
.footer__column--contacts p,
.footer__column--contacts a {
width: 174px;
font-family: "Montserrat";
font-weight: 500;
font-style: normal;
font-size: 10px;
line-height: 100%;
letter-spacing: 0;
color: #171717;
}
/* ОТСТУПЫ МЕЖДУ КОНТАКТАМИ */
.footer__contact p {
margin: 0 0 7px;
}
/* =====================================================
ПОЛЕЗНАЯ ИНФОРМАЦИЯ
===================================================== */
.footer__column:nth-child(3) {
margin-top: 0;
}
/* =====================================================
ПОЛИТИКА — 360px
===================================================== */
.footer__privacy a {
display: block;
margin: 0 0 14px;
font-family: "Montserrat";
font-weight: 700;
font-style: normal;
font-size: 14px;
line-height: 100%;
letter-spacing: 0;
text-align: center;
color: #171717;
text-decoration: none;
}
/* =====================================================
ПОЛИТИКА — ТЕКСТ 360px
===================================================== */
.footer__privacy p {
width: 100%;
max-width: 320px;
margin: 0 auto;
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-style: normal;
font-size: 10px;
line-height: 100%;
letter-spacing: 0;
text-align: center;
color: #967968;
}
/* =====================================================
КОПИРАЙТ — 360px
===================================================== */
.footer__copyright {
width: 100%;
margin-top: 20px;
padding: 0 10px;
box-sizing: border-box;
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-style: normal;
font-size: 14px;
line-height: 100%;
letter-spacing: 0;
text-align: center;
color: #171717;
}
/* =====================================================
НИЖНИЙ ЛОГО — ТОЛЬКО МОБИЛЬНАЯ ВЕРСИЯ
===================================================== */
.footer__logo--bottom {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin: 18px 0 0;
padding: 0;
}
.footer__logo--bottom img {
display: block;
width: 177px;
height: auto;
object-fit: contain;
}
/* =====================================================
ЗАЩИТА ОТ ГОРИЗОНТАЛЬНОГО СКРОЛЛА — 360px
===================================================== */
html,
body {
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
.footer,
.contacts {
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
}
.footer__logo--bottom {
display: none;
}
@media (max-width: 768px) {
.footer__logo--bottom {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
text-align: center;
}
.footer__logo--bottom img {
display: block;
margin: 0 auto;
}
}
@media (max-width: 600px) {
.contacts__container {
width: 100% !important;
max-width: 360px !important;
margin: 60px auto 0 !important;
margin-left: 30px !important;
padding: 12px 15px 20px;
transform: none !important;
}
}
/* =========================================================
ВЫПАДАЮЩЕЕ МЕНЮ — ПК
========================================================= */
.navigation__services {
position: relative;
}
/* Само окно */
.navigation__dropdown {
position: absolute;
top: calc(100% + 12px);
left: 50%;
width: 400px;
padding: 8px;
box-sizing: border-box;
background: #F6E5D0;
border: 1px solid rgba(150, 121, 104, 0.25);
border-radius: 10px;
box-shadow:
0 10px 25px rgba(57, 51, 45, 0.12);
transform: translateX(-50%) translateY(8px);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity 0.2s ease,
transform 0.2s ease,
visibility 0.2s ease;
z-index: 9999;
}
/* Маленький треугольник */
.navigation__dropdown::before {
content: "";
position: absolute;
top: -6px;
left: 50%;
width: 11px;
height: 11px;
background: #F6E5D0;
border-left: 1px solid rgba(150, 121, 104, 0.25);
border-top: 1px solid rgba(150, 121, 104, 0.25);
transform: translateX(-50%) rotate(45deg);
}
/* Открытие при наведении */
.navigation__services.is-open .navigation__dropdown {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
/* Пункты ПК */
.navigation__dropdown a {
display: block;
width: 100%;
padding: 12px 14px;
box-sizing: border-box;
background: transparent !important;
color: #39332D;
text-decoration: none;
font-family: "Montserrat", sans-serif;
font-size: 13px;
font-weight: 500;
line-height: 1.35;
border: none !important;
border-radius: 6px;
transition: background 0.2s ease;
}
/* Никаких коричневых полос */
.navigation__dropdown a:hover {
background: rgba(218, 181, 133, 0.18) !important;
width: 100%;
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
}
body {
padding-top: 80px;
}
@media (max-width: 767px) {
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
}
body {
padding-top: 40px;
}
}
.quizx-modal {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.65);
display: none;
align-items: center;
justify-content: center;
z-index: 99999;
}
.quizx-modal.active {
display: flex;
}
.quizx-footer button {
min-width: 110px;
padding: 10px 16px;
border-radius: 6px;
font-size: 14px;
cursor: pointer;
}
/* Назад */
#quizx-prev {
background: #fff;
border: 1px solid #ccc;
color: #333;
}
/* Далее */
#quizx-next {
background: #C6925C;
border: none;
color: #fff;
font-weight: 500;
}
/* disabled как на макете */
#quizx-next:disabled {
background: #ccc;
cursor: not-allowed;
}
.quizx-box {
width: 600px;
max-width: 95%;
background: #fff;
border-radius: 14px;
padding: 30px;
animation: quizxFade 0.3s ease;
}
@keyframes quizxFade {
from {opacity:0; transform: translateY(30px);}
to {opacity:1; transform: translateY(0);}
}
.quizx-header {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.quizx-close {
border: none;
background: none;
font-size: 22px;
cursor: pointer;
}
.quizx-option {
display: block;
padding: 14px;
margin-bottom: 10px;
background: #f4f4f4;
border-radius: 10px;
cursor: pointer;
transition: 0.2s;
}
.quizx-option:hover {
background: #e8e8e8;
}
.quizx-footer {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
.quizx-top-text {
background: #f5f5f5;
padding: 15px 18px;
border-radius: 10px;
font-size: 14px;
line-height: 1.5;
color: #555;
margin-bottom: 20px;
}
.quizx-final h3 {
font-size: 22px;
margin-bottom: 10px;
}
.quizx-final-text {
font-size: 14px;
color: #555;
margin-bottom: 20px;
line-height: 1.5;
}
#quizx-phone {
width: 100%;
padding: 14px;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 16px;
}
.quizx-agree {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: #777;
margin-top: 15px;
line-height: 1.4;
}
.quizx-agree a {
color: #f90;
text-decoration: underline;
}
/* 👉 УБИРАЕМ стандартный вид */
.quizx-option input,
.quizx-agree input {
appearance: none;
-webkit-appearance: none;
width: 18px;
height: 18px;
margin-right: 10px;
cursor: pointer;
position: relative;
}
/* =========================
RADIO (ЖЁЛТЫЕ)
========================= */
.quizx-option input[type="radio"] {
border: 2px solid #ccc;
border-radius: 50%;
}
.quizx-option input[type="radio"]:checked {
border-color: #B88A44;
}
.quizx-option input[type="radio"]:checked::after {
content: "";
position: absolute;
width: 10px;
height: 10px;
background: #B88A44;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* =========================
CHECKBOX (ЧЁРНЫЙ)
========================= */
.quizx-agree input[type="checkbox"] {
flex-shrink: 0;
margin: 0;
position: relative;
top: 0;
}
.quizx-agree input[type="checkbox"]:checked {
background: #B88A44;
border-color: #B88A44;
}
.quizx-agree input[type="checkbox"]:checked::after {
content: "✓";
color: #fff;
font-size: 14px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -55%);
}
.quizx-info {
display: flex;
gap: 12px;
align-items: flex-start;
background: #f3f4f6;
padding: 16px 18px;
border-radius: 8px;
font-size: 14px;
line-height: 1.5;
color: #555;
}
.quizx-info-icon {
font-size: 18px;
margin-top: 2px;
}
.quizx-divider {
height: 1px;
background: #e5e5e5;
margin: 20px 0;
}
/* =========================
MOBILE
========================= */
@media (max-width: 768px) {
.quizx-modal{
padding:16px;
align-items:flex-end;
}
.quizx-box{
width:100%;
max-width:100%;
max-height:90vh;
overflow-y:auto;
padding:20px 18px;
border-radius:20px 20px 0 0;
animation:quizxMobile .3s ease;
}
@keyframes quizxMobile{
from{
transform:translateY(100%);
opacity:0;
}
to{
transform:translateY(0);
opacity:1;
}
}
.quizx-info{
font-size:13px;
padding:14px;
gap:10px;
}
.quizx-info-icon{
font-size:18px;
}
.quizx-header{
margin-bottom:15px;
}
#quizx-step{
font-size:16px;
font-weight:700;
}
.quizx-close{
font-size:30px;
line-height:1;
}
#quizx-body h3,
.quizx-final h3{
font-size:22px;
line-height:1.3;
margin-bottom:18px;
}
.quizx-option{
display:flex;
align-items:center;
padding:16px;
margin-bottom:12px;
font-size:15px;
line-height:1.4;
}
.quizx-option input{
flex-shrink:0;
}
.quizx-final-text{
font-size:14px;
line-height:1.6;
}
#quizx-phone{
padding:16px;
font-size:16px;
}
.quizx-agree{
align-items:flex-start;
font-size:12px;
line-height:1.5;
}
.quizx-footer{
gap:10px;
margin-top:25px;
}
.quizx-footer button{
flex:1;
min-width:0;
padding:15px;
font-size:15px;
border-radius:10px;
}
}
.court-cost-screen__cards {
position: relative;
overflow: visible !important;
}
/* ================================
СТРЕЛКИ СЛАЙДЕРА
================================ */
.court-cost-screen__arrow {
position: absolute !important;
top: 50% !important;
margin-top: -22px !important;
width: 45px !important;
height: 45px !important;
padding: 0 !important;
border: none !important;
outline: none !important;
background: transparent !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer;
z-index: 9999 !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Картинка стрелки */
.court-cost-screen__arrow img {
width: 100% !important;
height: 100% !important;
object-fit: contain;
display: block;
pointer-events: none;
}
/* ================================
ЛЕВАЯ СТРЕЛКА
================================ */
.court-cost-screen__arrow--prev {
left: 40px !important;
right: auto !important;
}
/* ================================
ПРАВАЯ СТРЕЛКА
================================ */
.court-cost-screen__arrow--next {
right: 40px !important;
left: auto !important;
}
/* Если используется одна картинка casesarrow.png */
.court-cost-screen__arrow--prev img {
transform: rotate(180deg);
}
/* ================================
НАВЕДЕНИЕ
================================ */
.court-cost-screen__arrow:hover {
opacity: 0.7 !important;
}
/* ================================
МОБИЛЬНЫЕ
================================ */
@media (max-width: 768px) {
.court-cost-screen__arrow {
width: 35px !important;
height: 35px !important;
margin-top: -17px !important;
}
.court-cost-screen__arrow--prev {
left: 25px !important;
}
.court-cost-screen__arrow--next {
right: 25px !important;
}
}
.quizx-modal {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.65);
display: none;
align-items: center;
justify-content: center;
z-index: 99999;
}
.quizx-modal.active {
display: flex;
}
.quizx-footer button {
min-width: 110px;
padding: 10px 16px;
border-radius: 6px;
font-size: 14px;
cursor: pointer;
}
/* Назад */
#quizx-prev {
background: #fff;
border: 1px solid #ccc;
color: #333;
}
/* Далее */
#quizx-next {
background: #C6925C;
border: none;
color: #fff;
font-weight: 500;
}
/* disabled как на макете */
#quizx-next:disabled {
background: #ccc;
cursor: not-allowed;
}
.quizx-box {
width: 600px;
max-width: 95%;
background: #fff;
border-radius: 14px;
padding: 30px;
animation: quizxFade 0.3s ease;
}
@keyframes quizxFade {
from {opacity:0; transform: translateY(30px);}
to {opacity:1; transform: translateY(0);}
}
.quizx-header {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.quizx-close {
border: none;
background: none;
font-size: 22px;
cursor: pointer;
}
.quizx-option {
display: block;
padding: 14px;
margin-bottom: 10px;
background: #f4f4f4;
border-radius: 10px;
cursor: pointer;
transition: 0.2s;
}
.quizx-option:hover {
background: #e8e8e8;
}
.quizx-footer {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
.quizx-top-text {
background: #f5f5f5;
padding: 15px 18px;
border-radius: 10px;
font-size: 14px;
line-height: 1.5;
color: #555;
margin-bottom: 20px;
}
.quizx-final h3 {
font-size: 22px;
margin-bottom: 10px;
}
.quizx-final-text {
font-size: 14px;
color: #555;
margin-bottom: 20px;
line-height: 1.5;
}
#quizx-phone {
width: 100%;
padding: 14px;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 16px;
}
.quizx-agree {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: #777;
margin-top: 15px;
line-height: 1.4;
}
.quizx-agree a {
color: #f90;
text-decoration: underline;
}
/* 👉 УБИРАЕМ стандартный вид */
.quizx-option input,
.quizx-agree input {
appearance: none;
-webkit-appearance: none;
width: 18px;
height: 18px;
margin-right: 10px;
cursor: pointer;
position: relative;
}
/* =========================
RADIO (ЖЁЛТЫЕ)
========================= */
.quizx-option input[type="radio"] {
border: 2px solid #ccc;
border-radius: 50%;
}
.quizx-option input[type="radio"]:checked {
border-color: #B88A44;
}
.quizx-option input[type="radio"]:checked::after {
content: "";
position: absolute;
width: 10px;
height: 10px;
background: #B88A44;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* =========================
CHECKBOX (ЧЁРНЫЙ)
========================= */
.quizx-agree input[type="checkbox"] {
flex-shrink: 0;
margin: 0;
position: relative;
top: 0;
}
.quizx-agree input[type="checkbox"]:checked {
background: #B88A44;
border-color: #B88A44;
}
.quizx-agree input[type="checkbox"]:checked::after {
content: "✓";
color: #fff;
font-size: 14px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -55%);
}
.quizx-info {
display: flex;
gap: 12px;
align-items: flex-start;
background: #f3f4f6;
padding: 16px 18px;
border-radius: 8px;
font-size: 14px;
line-height: 1.5;
color: #555;
}
.quizx-info-icon {
font-size: 18px;
margin-top: 2px;
}
.quizx-divider {
height: 1px;
background: #e5e5e5;
margin: 20px 0;
}
/* =========================
MOBILE
========================= */
@media (max-width: 768px) {
.quizx-modal{
padding:16px;
align-items:flex-end;
}
.quizx-box{
width:100%;
max-width:100%;
max-height:90vh;
overflow-y:auto;
padding:20px 18px;
border-radius:20px 20px 0 0;
animation:quizxMobile .3s ease;
}
@keyframes quizxMobile{
from{
transform:translateY(100%);
opacity:0;
}
to{
transform:translateY(0);
opacity:1;
}
}
.quizx-info{
font-size:13px;
padding:14px;
gap:10px;
}
.quizx-info-icon{
font-size:18px;
}
.quizx-header{
margin-bottom:15px;
}
#quizx-step{
font-size:16px;
font-weight:700;
}
.quizx-close{
font-size:30px;
line-height:1;
}
#quizx-body h3,
.quizx-final h3{
font-size:22px;
line-height:1.3;
margin-bottom:18px;
}
.quizx-option{
display:flex;
align-items:center;
padding:16px;
margin-bottom:12px;
font-size:15px;
line-height:1.4;
}
.quizx-option input{
flex-shrink:0;
}
.quizx-final-text{
font-size:14px;
line-height:1.6;
}
#quizx-phone{
padding:16px;
font-size:16px;
}
.quizx-agree{
align-items:flex-start;
font-size:12px;
line-height:1.5;
}
.quizx-footer{
gap:10px;
margin-top:25px;
}
.quizx-footer button{
flex:1;
min-width:0;
padding:15px;
font-size:15px;
border-radius:10px;
}
}
/* =========================================
ПЕРЕКЛЮЧАТЕЛЬ ГОРОДОВ
========================================= */
.gz-city-switch {
position: relative;
display: inline-flex;
align-items: center;
flex-shrink: 0;
margin-left: 0;
font-family: "Mulish", sans-serif;
z-index: 10000;
}
/* Кнопка города */
.gz-city-switch__button {
height: 50px;
min-width: 115px;
padding: 0 16px;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
border: none;
border-radius: 10px;
background: linear-gradient(
380deg,
#967968 0%,
#C39980 100%
);
color: #ffffff;
font-family: "Mulish", sans-serif;
font-size: 17px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
cursor: pointer;
transition: background .2s ease, transform .2s ease;
}
.gz-city-switch__button:hover {
background: linear-gradient(
380deg,
#866957 0%,
#B58970 100%
);
}
/* Стрелка */
.gz-city-switch__arrow {
width: 7px;
height: 7px;
flex-shrink: 0;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg);
margin-top: -4px;
transition: transform .2s ease;
}
.gz-city-switch.gz-city-switch--open
.gz-city-switch__arrow {
transform: rotate(225deg);
margin-top: 4px;
}
/* Выпадающий список */
.gz-city-switch__dropdown {
display: none;
position: absolute;
top: calc(100% + 8px);
left: 0;
width: 180px;
max-width: calc(100vw - 32px);
padding: 6px;
box-sizing: border-box;
background: #ffffff;
border: 1px solid #e8ded6;
border-radius: 10px;
box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
flex-direction: column;
gap: 4px;
z-index: 10001;
}
/* Открытый список */
.gz-city-switch.gz-city-switch--open
.gz-city-switch__dropdown {
display: flex;
}
/* Ссылки городов */
.gz-city-switch__link {
display: flex;
align-items: center;
width: 100%;
min-height: 42px;
padding: 10px 12px;
box-sizing: border-box;
border-radius: 7px;
background: transparent;
color: #382f2a;
font-family: "Mulish", sans-serif;
font-size: 14px;
font-weight: 600;
line-height: 1.4;
text-decoration: none;
white-space: nowrap;
transition: background .2s ease, color .2s ease;
}
.gz-city-switch__link:hover {
background: #f3e8df;
color: #866957;
}
@media (max-width: 768px) {
.gz-city-switch {
margin-left: 8px;
}
.gz-city-switch__button {
padding: 8px 10px;
font-size: 12px;
}
.gz-city-switch__dropdown {
width: 160px;
}
}
.mobile-navigation .gz-mobile-city-switch {
position: absolute;
top: 265px;
left: 50%;
transform: translateX(-50%);
width: 150px;
margin: 0;
padding: 0;
z-index: 100001;
pointer-events: none;
}
.mobile-navigation .gz-mobile-city-button {
position: relative;
display: flex;
width: 150px;
height: 22px;
min-height: 22px;
margin: 0;
padding: 0 9px;
box-sizing: border-box;
align-items: center;
justify-content: center;
gap: 7px;
pointer-events: auto;
}
.mobile-navigation .gz-mobile-city-dropdown {
pointer-events: auto;
}
.mobile-navigation .gz-mobile-city-switch {
position: absolute;
top: 265px;
left: 50%;
transform: translateX(-50%);
width: 150px;
margin: 0;
z-index: 100001;
}
.mobile-navigation .gz-mobile-city-button {
position: relative;
display: flex;
width: 150px;
min-height: 18px;
height: 18px;
margin: 0;
padding: 0 9px;
align-items: center;
justify-content: center;
gap: 7px;
pointer-events: auto;
cursor: pointer;
}
.mobile-navigation .gz-mobile-city-dropdown {
display: none;
position: absolute;
bottom: calc(100% + 5px);
top: auto;
left: 0;
transform: none;
width: 150px;
padding: 5px;
box-sizing: border-box;
background: #fff;
border: 1px solid #eee;
border-radius: 7px;
box-shadow: 0 5px 15px rgba(0, 0, 0, .2);
z-index: 100002;
pointer-events: auto;
}
.mobile-navigation .gz-mobile-city-link {
display: block;
padding: 9px 10px;
color: #333;
background: #fff;
text-decoration: none;
font-size: 10px;
pointer-events: auto;
}
.mobile-navigation .gz-mobile-city-switch.is-open
.gz-mobile-city-dropdown {
display: block !important;
}
/* Убираем скачки переключателя городов при прокрутке */
.gz-city-switch {
position: relative !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
transform: none !important;
margin-left: 18px !important;
z-index: 10 !important;
}