/* === FONTS подключаются отдельно через public/fonts/stylesheet.css === */
/* === TOKENS === */
:root {
--color-green: #00923a;
--color-green-dark: #026e2e;
--color-light-green: #98c21f;
--color-orange: #ffad26;
--color-red: #e52322;
--color-blue: #66ccff;
--color-white: #ffffff;
--color-text: #0E3A29;
--color-gray-light: #d9d9d9;
--container-w: 1280px;
--container-pad: 80px;
--radius-block: 40px;
--radius-card: 32px;
--radius-pill: 999px;
--font-base: '5ka Sans Design', sans-serif;
}
/* === BASE === */
body {
font-family: var(--font-base);
font-weight: 400;
color: var(--color-text);
background: var(--color-white);
font-size: 16px;
line-height: 1.4;
/* Декоративные элементы секций (шевроны, деревья) намеренно выходят за края контейнера.
clip не даёт им создавать горизонтальный скролл и при этом не ломает sticky-хедер
(в отличие от overflow:hidden, который превратил бы body в scroll-контейнер). */
overflow-x: clip;
}
.container {
width: 100%;
max-width: var(--container-w);
margin: 0 auto;
padding: 0 var(--container-pad);
}
/* === BUTTONS === */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 18px 40px;
border-radius: var(--radius-pill);
font-weight: 600;
font-size: 24px;
line-height: 1.2;
color: var(--color-white);
transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
text-align: center;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.btn:active { transform: translateY(0); }
.btn--red { background: var(--color-red); width: 347px; height: 69px; padding: 0; border-radius: 43px; }
.btn--red:hover { background: #cf1d1c; }
.btn--green-dark { background: var(--color-green-dark); width: 336px; height: 70px; padding: 0; border-radius: 35px; color: var(--color-white); }
.btn--green-dark:hover { background: #015521; }
.btn--white { background: var(--color-white); width: 336px; height: 70px; padding: 0; border-radius: 35px; color: var(--color-green-dark); }
.btn--white:hover { background: #f0f0f0; }
/* === SECTION TITLES === */
.section-title {
font-family: var(--font-base);
font-weight: 900; /* Black */
font-size: 50px;
line-height: 1.2;
color: var(--color-green-dark); /* #026e2e — Пятёрочка темно-зелёный */
margin-bottom: 60px;
}
.section-title--on-green { color: var(--color-white); }
/* ============================================================
HEADER (Figma node 4157:613)
Layout: flex (gibkij)
============================================================ */
.header {
position: sticky;
top: 0;
z-index: 100;
background: var(--color-green-dark);
height: 113px;
}
.header__inner {
display: flex;
align-items: center;
height: 100%;
width: 100%;
max-width: var(--container-w);
margin: 0 auto;
padding: 0 80px;
}
/* Значок «5» Пятёрочка — только в мобильной шапке (на десктопе скрыт) */
.header__logo-5ka { display: none; }
/* Главный логотип шапки (toplogo.png — X5 + 20 лет, slot слева) */
.header__logo-vyruchaem { display: flex; align-items: center; flex-shrink: 0; }
.header__logo-vyruchaem img {
display: block;
height: 50px;
width: auto; /* пропорциональная ширина для toplogo (≈3.19:1) */
}
/* Навигация — занимает оставшееся пространство, центрируется */
.nav {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 36px;
}
.nav__link {
font-family: var(--font-base);
font-weight: 400;
font-size: 16px;
line-height: 1.2;
color: var(--color-white);
white-space: nowrap;
transition: color .15s ease;
}
.nav__link:hover { color: var(--color-light-green); }
.nav__link--active { color: var(--color-light-green); }
/* Лого «Гранд-тур» — встроен в nav (75x75), визуальный центр композиции */
.nav__logo {
flex-shrink: 0;
display: block;
width: 75px;
height: 75px;
margin: 0 16px; /* доп. воздух вокруг лого по сравнению с обычным gap */
}
.nav__logo img {
display: block;
width: 75px;
height: 75px;
}
/* Иконка пользователя — справа */
.header__user {
flex-shrink: 0;
margin-left: 36px;
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
}
.header__user img { display: block; width: 42px; height: 42px; }
/* Бургер (показывается на мобильном) */
.burger {
display: none;
width: 36px;
height: 28px;
flex-direction: column;
justify-content: space-between;
flex-shrink: 0;
}
.burger span { display: block; height: 3px; background: var(--color-white); border-radius: 2px; }
/* ============================================================
HERO (Figma фрейм Home: y=113..838, высота 725px)
============================================================ */
.hero {
position: relative;
background: #98C21F; /* салатовый — фон под фото велосипеда */
height: 725px;
overflow: visible; /* шевроны вылезают за пределы блока */
}
/* Слой 1: фото велосипедиста — анкер справа.
На широких экранах cover'ит правую часть, чтобы трава всегда была под прозрачными
срезами hero__shape. min(...) держит изображение в естественной высоте до тех пор,
пока ширины аспекта хватает, и переключает на cover на очень больших экранах. */
.hero__photo {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url('../assets/images/hero-cyclist.png') right center / cover no-repeat;
z-index: 1;
}
/* Единое PNG-изображение со стрелочной формой и шевронами — без отдельных слоёв и polygon-клипа */
.hero__shape {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 706px;
background: url('../assets/images/hero_right_block.png') left top / contain no-repeat;
z-index: 2;
pointer-events: none;
}
/* Старый слой шевронов больше не нужен — всё в hero_right_block.png */
.hero__chevrons { display: none; }
/* Слой 4: контент. .container уже даёт max-width 1280 + padding 80 + margin auto.
Не задаём ему max-width, иначе .container'овский margin: auto центрирует блок. */
.hero__inner {
position: relative;
z-index: 4;
height: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
padding-top: 30px;
padding-bottom: 60px;
}
/* Верхний ряд: бейдж слева + даты справа от него */
.hero__top {
display: flex;
align-items: flex-end;
gap: 18px;
margin-bottom: 24px;
}
/* Лого-бейдж Гранд-тур: 162×300 (x=77, y=143 в Figma) */
.hero__badge {
width: 162px;
height: auto;
display: block;
flex-shrink: 0;
}
/* Даты «22-23 августа» — справа от бейджа.
В Figma: "22-23" 70px SemiBold, "августа" 45px SemiBold, оба white. */
.hero__dates {
display: flex;
flex-direction: column;
align-items: flex-start;
line-height: 1.1;
padding-bottom: 24px;
}
.hero__date-num {
font-family: var(--font-base);
font-weight: 600;
font-size: 70px;
line-height: 1.2;
color: var(--color-white);
}
.hero__date-month {
font-family: var(--font-base);
font-weight: 600;
font-size: 45px;
line-height: 1.2;
color: var(--color-white);
}
/* Заголовок: 5ka Sans Design Black 50px, line-height 1.2, white. Размер бокса в Figma 589×144 */
.hero__title {
font-family: var(--font-base);
font-weight: 900;
font-size: 50px;
line-height: 1.2;
color: var(--color-white);
margin-bottom: 28px;
max-width: 590px; /* по Figma: 589×144 */
}
/* Большие мониторы (≥1440px) — увеличиваем hero и PNG-форму пропорционально */
@media (min-width: 1440px) {
.hero { height: 1000px; }
.hero__shape { width: 1000px; }
}
/* ============================================================
ROUTES «Выбирайте маршрут»
Figma: 4 карточки 551×93, gap 13px; картинка 550×412 справа
============================================================ */
.routes {
background: var(--color-white);
padding: 75px 0;
/* Шевроны (.routes__chevrons) намеренно выходят за правый край (right: -180px).
Обрезаем их по секции, чтобы они не создавали горизонтальный скролл страницы.
На широких экранах они всё равно видны до края вьюпорта. */
overflow-x: hidden;
}
.routes__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px; /* отступ между колонкой карточек и картинкой */
align-items: start;
}
.routes__list {
display: flex;
flex-direction: column;
gap: 13px; /* точный gap между карточками из Figma */
}
.route-card {
position: relative;
display: flex;
align-items: center;
padding: 0 50px; /* левый отступ 50, вертикаль через height */
height: 93px;
border-radius: 54px;
font-family: var(--font-base);
font-size: 24px; /* было 36px Black — стало 24px SemiBold */
font-weight: 600;
line-height: 1.2;
color: var(--color-white);
overflow: hidden;
isolation: isolate;
}
/* Статичный шеврон-«кадр 1» — то же позиционирование, что у hover-слоя, чтобы не было сдвига */
.route-card::after {
content: '';
position: absolute;
inset: 0;
background: url('../assets/animations/buttons/1.png') center / 100% 100% no-repeat;
pointer-events: none;
z-index: 1;
}
/* Анимационный слой кадров (наполняется через JS-переменную --anim-bg) поверх ::after */
.route-card::before {
content: '';
position: absolute;
inset: 0;
background-image: var(--anim-bg, none);
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
opacity: 0;
pointer-events: none;
z-index: 1;
}
.route-card--animating::before { opacity: 1; }
.route-card span { position: relative; z-index: 2; }
.route-card--red { background: var(--color-red); }
.route-card--orange { background: var(--color-orange); }
.route-card--green-light { background: var(--color-light-green); }
.route-card--green { background: var(--color-green); }
.route-card--blue { background: var(--color-blue); }
/* Обёртка картинки + шевронов справа */
.routes__media {
position: relative;
}
/* Картинка-иллюстрация справа, 550×412, со скруглёнными углами */
.routes__image {
width: 100%;
height: 412px;
border-radius: 32px;
background: url('../assets/images/routes-kid.png') center/cover no-repeat;
background-color: #f0f0f0;
}
/* Декоративные шевроны поверх фото — выходят за правый край (по Figma) */
.routes__chevrons {
position: absolute;
top: -24px;
right: -180px;
width: 414px;
height: 457px;
background: url('../assets/images/route-chevrons.svg') center / contain no-repeat;
pointer-events: none;
z-index: 2;
}
/* ============================================================
HOW
============================================================ */
.how {
background: var(--color-white);
padding: 80px 0;
}
/* «Как участвовать?» — голубой блок 1120×731 со скруглением 40px.
Шаги расставлены абсолютно (змейка 1-2, 4-3, _-5).
Координаты ниже — относительно блока (Figma 4055:53 имеет origin x=80,y=1675). */
.how__block {
background: var(--color-blue);
border-radius: 40px;
position: relative;
overflow: hidden;
height: 731px;
}
/* Декоративные слои блока (z-index 0..1) — позиционирование по Figma. */
/* Зелёные холмы (4055:55, x=103/y=2044, 858×636) — даёт визуальный «травяной» низ */
.how__hills {
position: absolute;
left: 23px;
top: 369px;
width: 858px;
height: 636px;
background: url('../assets/images/how-decor.svg') no-repeat;
background-size: 100% 100%;
pointer-events: none;
z-index: 0;
}
/* Салатовая «травяная» плашка внизу блока — SVG со скруглением только нижних углов.
Высота 50px = ширина 1120 / соотношение SVG 2240:101 ≈ 50.5 (точная пропорция).
z-index 2 = поверх холмов. */
.how__grass {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 50px;
background: url('../assets/images/how-grass.svg') no-repeat center bottom / 100% 100%;
pointer-events: none;
z-index: 2;
}
/* Пунктирная линия маршрута (4055:223, x=157/y=1874, 995×338) */
.how__dots {
position: absolute;
left: 77px;
top: 199px;
width: 995px;
height: 338px;
background: url('../assets/images/how-dots.svg') no-repeat center / contain;
pointer-events: none;
z-index: 2;
}
/* Красные пины-маркеры по маршруту */
.how__pin {
position: absolute;
width: 72px;
height: 111px;
background: url('../assets/images/how-pin.svg') no-repeat center / contain;
pointer-events: none;
z-index: 2;
}
.how__pin--1 { left: 38px; top: 87px; } /* 4055:219, x=118/y=1762 */
.how__pin--5 { left: 498px; top: 427px; } /* 4055:221, x=578/y=2102 */
/* Велосипедик в правом нижнем углу блока. В Figma координаты выходят за блок, но визуально
велосипед должен быть целиком виден внутри — используем right/bottom для надёжности.
z-index 3 = поверх травы */
.how__bike {
position: absolute;
right: 30px;
bottom: 50px; /* стоит на верхней кромке травяной плашки */
width: 180px;
height: 110px;
background: url('../assets/images/how-bike.svg') no-repeat center / contain;
pointer-events: none;
z-index: 3;
}
/* Шаг — горизонтальная пара «цифра + текст» */
.how__step {
position: absolute;
display: flex;
align-items: center;
gap: 20px;
z-index: 4;
}
/* Цифра в зелёном круге: 5ka Sans Design SemiBold 40px white */
.how__step-num {
width: 48px;
height: 48px;
flex-shrink: 0;
border-radius: 50%;
background: var(--color-green);
color: var(--color-white);
font-family: var(--font-base);
font-weight: 600;
font-size: 40px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
}
/* Текст шага: 5ka Sans Design SemiBold 24px #0e3a29 */
.how__step-text {
font-family: var(--font-base);
font-weight: 600;
font-size: 24px;
line-height: 1.2;
color: var(--color-text);
max-width: 360px;
}
/* Точные координаты центров цифр относительно левого верхнего угла блока
(Figma x − 80, y − 1675), цифра 48×48 → top смещение от центра */
.how__step--1 { left: 122px; top: 87px; } /* x=202, y=1762 */
.how__step--2 { left: 597px; top: 87px; } /* x=677, y=1762 */
.how__step--3 { left: 597px; top: 252px; } /* x=677, y=1927 */
.how__step--4 { left: 122px; top: 252px; } /* x=202, y=1927 */
.how__step--5 { left: 597px; top: 427px; } /* x=677, y=2102 */
/* ============================================================
CAMP «Карта кемпинга» (Figma: 1280×740, фон салатовый)
============================================================ */
.camp {
background: var(--color-light-green);
position: relative;
overflow: hidden;
padding: 43px 0 5px; /* нижний паддинг сократили — карта занимает почти всю секцию */
min-height: 740px; /* Figma Rect 13896: 739.93px */
}
/* Внутренний 1280-блок — все абсолютно-позиционируемые элементы относятся к нему */
.camp__inner {
position: relative;
width: 100%;
max-width: var(--container-w);
margin: 0 auto;
height: 100%;
min-height: 692px; /* высота новой карты, чтобы блок точно вмещал её */
}
/* Заголовок «Карта кемпинга». Позиция в Figma: x=81, y=2518 → в блоке x=81, y=43.
Но padding-top секции уже даёт 43px, плюс x=81 = левый край container с учётом padding 80. */
.camp__title {
position: absolute;
left: 80px;
top: 0; /* от верха .camp__inner (= 43px от верха секции) */
margin-bottom: 0;
z-index: 2;
max-width: 475px; /* по Figma w=475 */
}
/* Декоративные шевроны по бокам. Натуральный размер SVG 244×278, маска Figma 202px высоты —
верх/низ обрезаются box-ом (38px сверху и снизу). */
.camp__decor {
position: absolute;
width: 244px;
height: 202px;
background: url('../assets/images/camp-decor-right.svg') left center / 244px 278px no-repeat;
pointer-events: none;
z-index: 2;
opacity: .35;
transition: opacity .4s ease;
}
/* Поочерёдная подсветка: сначала левый шеврон становится ярче, затем правый.
Запускается только когда блок попадает во вьюпорт (класс .is-visible). */
@keyframes camp-chev-pulse {
0%, 100% { opacity: .35; }
20%, 30% { opacity: 1; }
}
.camp.is-visible .camp__decor--left { animation: camp-chev-pulse 2.4s ease-in-out infinite; }
.camp.is-visible .camp__decor--right { animation: camp-chev-pulse 2.4s ease-in-out 1.2s infinite; }
@media (prefers-reduced-motion: reduce) {
.camp.is-visible .camp__decor--left,
.camp.is-visible .camp__decor--right { animation: none; opacity: 1; }
}
/* Левый — apex (острие) указывает ВПРАВО, к карте */
.camp__decor--left {
left: -177px; /* x=-93 в Figma — apex попадает на x=151, как раз у левого края карты */
top: 174px; /* y=2692 - 2518 = 174 */
}
/* Правый — apex указывает ВЛЕВО, зеркальный */
.camp__decor--right {
left: 1205px; /* x=1080, apex после зеркала окажется у левого края бокса (у карты) */
top: 496px; /* y=3014 - 2518 = 496 */
}
/* Большой фест-лого справа от заголовка. Figma 4194:42: x=1038, y=2492, 162×300.
От .camp__inner: x=1038, y=2492-2518=-26 (выходит за верх) */
.camp__fest-logo {
position: absolute;
left: 1038px; /* x=1038 в 1280-блоке */
top: -26px; /* y=2492 - 2518 = -26 (чуть выше .camp__inner) */
width: 162px;
height: auto;
pointer-events: none;
z-index: 2;
}
/* Карта кемпинга (Group 1987300357.png) — большое изображение почти на весь блок,
позиция и размер по Figma 4347:3011 (left:18 top:48 в section, 1060×692). */
.camp__map {
position: absolute;
left: 18px;
top: 5px; /* y=2523-2518 относительно title; в section это 48px - 43 padding-top = 5px */
width: 1060px;
height: 692px;
background: url('../assets/images/Group 1987300357.png') center / 100% 100% no-repeat;
z-index: 1;
}
/* Метки на карте не выводим — они зашиты в изображении */
.camp__labels { display: none; }
.camp__label {
position: absolute;
display: inline-flex;
align-items: center;
height: 30px;
background: url('../assets/images/pin-bg.svg') center / 100% 100% no-repeat;
color: var(--color-white);
font-size: 16px;
font-weight: 600;
white-space: nowrap;
padding: 0 18px 0 12px;
filter: drop-shadow(0 2px 6px rgba(0,0,0,.15));
}
.camp__label::after {
/* white vertical line going down from the label */
content: '';
position: absolute;
left: 14px;
top: 100%;
width: 3px;
height: 28px; /* по Figma — большинство пинов имеют линию 28px (= group_h - label_h - overlap) */
background: var(--color-white);
}
/* «Общий шатер» — линия длиннее (67px в Figma, тянется до общего шатра справа от палаток) */
.camp__label--tent-common::after { height: 55px; }
/* Двухстрочные плашки 138×45 — палаточный лагерь и общий шатер */
.camp__label--tent,
.camp__label--tent-common {
width: 138px;
height: 45px;
white-space: normal;
line-height: 1.15;
text-align: center;
padding: 0 12px;
justify-content: center;
}
/* Развёрнутые плашки: хвостик/насечка пина с другой стороны (зеркалим фон + линию,
текст возвращаем в нормальную ориентацию обратным scale) */
.camp__label--tent,
.camp__label--parking {
transform: scaleX(-1);
}
.camp__label--tent > span,
.camp__label--parking > span {
display: inline-block;
transform: scaleX(-1);
}
/* Координаты меток рассчитаны относительно карты 938×540 по Figma.
x_figma и y_figma — координаты от страницы; вычисление: (x-148)/938, (y-2624)/540 */
.camp__label--scene { left: 25.5%; top: 3%; } /* x=387/y=2640 */
.camp__label--parking { left: 14.9%; top: 42.5%; } /* x=288/y=2859 */
.camp__label--tent { left: 43.3%; top: 9.2%; } /* x=554/y=2679, h=44 (2 строки) */
.camp__label--tent-common { left: 74.2%; top: 8.1%; } /* x=844/y=2668, h=44 (2 строки) */
.camp__label--bike { left: 64.8%; top: 80.7%; } /* x=606/y=3087 */
/* ============================================================
FAQ «Ответы на часто задаваемые вопросы»
Figma block 4055:51: 1117×818, fill #00923a, radius 40px
============================================================ */
.faq {
background: var(--color-white);
padding: 70px 0 80px; /* отступ сверху от секции Camp (Figma: блок FAQ на y=3285, Camp до 3215) */
}
.faq__block {
background: var(--color-green);
border-radius: 40px;
padding: 73px 94px 60px; /* контент в Figma начинается на x=94, y=73 */
color: var(--color-white);
min-height: 818px;
}
/* Заголовок наследует .section-title 50px Black, на зелёном — белый */
.faq__block .section-title { margin-bottom: 60px; }
/* Лид «Что необходимо сделать, чтобы принять участие в акции?» — крупнее вопросов */
.faq__lead {
color: var(--color-white);
font-family: var(--font-base);
font-size: 30px;
font-weight: 600;
line-height: 1.2;
margin-bottom: 30px;
}
/* Лист вопросов с разделительными линиями */
.faq__list {
display: flex;
flex-direction: column;
margin-bottom: 50px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.faq__item {
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
padding: 24px 0;
}
/* Скрытые элементы (4+) — раскрываются по клику «Больше вопросов» с анимацией */
.faq__item--extra {
overflow: hidden;
max-height: 0;
padding-top: 0;
padding-bottom: 0;
border-bottom-color: transparent;
opacity: 0;
transition: max-height .4s ease, padding .4s ease, opacity .3s ease, border-color .3s ease;
}
.faq__list--expanded .faq__item--extra {
max-height: 800px; /* достаточно для длинных ответов */
padding: 24px 0;
border-bottom-color: rgba(255, 255, 255, 0.5);
opacity: 1;
}
.faq__question {
position: relative;
font-family: var(--font-base);
font-size: 24px;
font-weight: 600;
line-height: 1.2;
color: var(--color-white);
cursor: pointer;
list-style: none;
padding-right: 50px;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question::after {
content: '';
position: absolute;
right: 0;
top: 50%;
width: 22px;
height: 12px;
background: url("data:image/svg+xml;utf8,") center/contain no-repeat;
transform: translateY(-50%);
transition: transform .2s ease;
}
.faq__item[open] .faq__question::after { transform: translateY(-50%) rotate(180deg); }
.faq__answer {
margin-top: 14px;
color: rgba(255, 255, 255, 0.9);
font-family: var(--font-base);
font-size: 18px;
line-height: 1.5;
}
/* Две кнопки 336×70 в ряд с gap 29px */
.faq__actions {
display: flex;
gap: 29px;
flex-wrap: wrap;
}
/* ============================================================
PARTNERS «Партнёры Гранд-тура»
Figma: 6 карточек 106×106 в ряду, gap 97px
============================================================ */
.partners {
background: var(--color-white);
padding: 15px 0 80px; /* отступ от FAQ-блока (95px минус 80px paddingBottom faq = 15) */
}
/* Заголовок наследует .section-title 50px Black #026e2e, margin-bottom 60 */
.partners .section-title { margin-bottom: 48px; }
/* Подзаголовок «Генеральные» / «Информационные партнёры» — Figma h=38, шрифт ~30px */
.partners__subtitle {
font-family: var(--font-base);
font-size: 30px;
font-weight: 600;
line-height: 1.2;
color: var(--color-text);
margin: 0 0 46px; /* отступ до карточек ≈ 46px (y=4395 - y=4311 - 38) */
}
.partners__subtitle + .partners__grid + .partners__subtitle { margin-top: 64px; }
.partners__grid + .partners__subtitle { margin-top: 64px; } /* 4565 - 4501 = 64 */
/* Генеральный спонсор — выделенный крупный логотип по центру над остальными */
.partners__general {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0 0 56px;
}
.partners__general img {
display: block;
max-width: 500px; /* увеличен для генерального спонсора */
max-height: 220px;
width: auto;
height: auto;
object-fit: contain;
}
/* На десктопе блок генерального спонсора (мобильный вариант) скрыт — он в сетке как первая карточка */
.partners__general { display: none; }
/* На десктопе карусель прозрачна — сетка ведёт себя как раньше, стрелки скрыты */
.partners__carousel { position: relative; }
.partners__arrow { display: none; }
/* Сетка партнёров: 5 колонок × 2 ряда (Figma 4347:3011 — карточки 204×204, gap 24) */
.partners__grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 24px;
margin: 0;
list-style: none;
padding: 0;
}
.partner-card {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
background: var(--color-white);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
padding: 16px;
box-sizing: border-box;
}
.partner-card img {
display: block;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
}
/* Генеральный партнёр (первая ячейка сетки) — лого крупнее, под ним подпись */
.partner-card--general img { max-height: 70%; }
.partner-card__caption {
position: absolute;
bottom: 14px;
left: 0;
right: 0;
text-align: center;
font-family: var(--font-base);
font-weight: 400;
font-size: 13px;
color: var(--color-text);
}
/* В обычных карточках подпись просто не выводится в blade, но safety */
.partner-card:not(.partner-card--general) .partner-card__caption { display: none; }
/* ============================================================
FUNDRAISING «Выручаем» (Figma 4055:68: 1120×872, голубой фон #66ccff)
============================================================ */
.fundraising {
background: #119238; /* зелёный фон под/вокруг карточки */
padding: 60px 0;
}
/* Карточка-сцена */
.fundraising__card {
position: relative;
background: #9ddaf8; /* #66ccff — Пятёрочка голубой */
border-radius: 40px;
height: 997px;
overflow: hidden;
isolation: isolate;
}
/* === ДЕКОР (z-index 1..3) === */
.fundraising__scene {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
}
/* Видео-сцена (out.gif.mp4) — заменяет разрозненные декоративные элементы.
Гифка всегда «приклеена» нижним краем к низу карточки (.fundraising__card)
независимо от её высоты; высота — по собственному соотношению сторон. */
.fundraising__video {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: auto;
width: 100%;
height: auto;
z-index: 1;
pointer-events: none;
/* У out.gif сверху остаётся 2–3 px чёрной кромки (артефакт кодирования) —
подрезаем только её, по бокам и снизу ничего не трогаем. */
clip-path: inset(3px 0 0 0);
}
/* Зелёная плашка-«трава» снизу карточки (Figma 4055:339: y=553, h=357 — салатовая) */
.fund-grass {
position: absolute;
left: -100px; /* w=1358, выходит за края карточки */
right: -100px;
bottom: 0;
height: 357px;
background: var(--color-light-green); /* #98c21f */
border-radius: 40px 40px 0 0;
z-index: 1;
}
/* Холмы зелёные (5 наложенных эллипсов) — Figma эллипсы Ellipse 313/312/314/315 */
.fund-hills {
position: absolute;
left: 40%;
bottom: 80px;
width: 580px;
height: 280px;
background:
radial-gradient(ellipse at 50% 100%, var(--color-green) 0 60%, transparent 61%),
radial-gradient(ellipse at 50% 100%, var(--color-green-dark) 0 70%, transparent 71%);
background-size: 580px 280px, 580px 280px;
z-index: 1;
display: none; /* пока отключим, основная зелёная зона уже даёт траву */
}
/* Солнце за холмами */
.fund-sun {
position: absolute;
right: 35%;
top: 360px;
width: 180px;
height: 180px;
background: url('../assets/images/fund-sun.svg') no-repeat center / contain;
z-index: 1;
}
/* Оранжевая дорога (fund-hills.svg = Vector 72) — извилистая полоса */
.fund-road {
position: absolute;
left: 0; right: 0;
bottom: 100px;
height: 207px;
background: url('../assets/images/fund-hills.svg') no-repeat center / 100% 100%;
z-index: 2;
}
/* Wrapper для карточки + ёлок (ёлки вне card, чтобы выходили за её края на зелёный фон секции) */
.fundraising__wrap {
position: relative;
}
/* Нижние деревья (rbtrees.png) — 421.241×406.752. В Figma на x=-115 от блока, y=503 (за левым краем) */
.fund-rbtrees {
position: absolute;
left: -115px;
bottom: -65px; /* y=503 от блока, h=406.75 → конец на 909, блок 872 → выходит на 37px вниз */
width: 421.241px;
height: 406.752px;
background: url('../assets/images/rbtrees.png') no-repeat left bottom / contain;
pointer-events: none;
z-index: 6;
}
/* Все размеры — точные из Figma. Координаты — относительно карточки 1120×872. */
/* Верхние кусты (topbrushes.png) — длинная узкая полоса 475×98 над горизонтом */
.fund-top-bushes {
position: absolute;
left: 380px;
top: 420px;
width: 475px;
height: 98px;
background: url('../assets/images/topbrushes.png') no-repeat center / contain;
pointer-events: none;
z-index: 2;
}
/* Большие кусты (bigbrushes.png) — 943.909×748.588.
В Figma расположен на x=1737, y=406 от блока — почти полностью за правым краем.
Виден только узкий вертикальный кусок (через overflow:hidden карточки). */
.fund-big-bushes {
position: absolute;
left: 800px;
top: 280px;
width: 943.909px;
height: 748.588px;
background: url('../assets/images/bigbrushes.png') no-repeat left top / contain;
pointer-events: none;
z-index: 3;
}
/* Верхняя ёлка (toptrees.png) — 231.872×223.897. В Figma на x=966.6, y=337 (выходит за правый край) */
.fund-top-trees {
position: absolute;
left: 966px;
top: 337px;
width: 231.872px;
height: 223.897px;
background: url('../assets/images/toptrees.png') no-repeat center / contain;
pointer-events: none;
z-index: 4;
}
/* Нижние кусты (bushes.png) — 581.823×519.865. В Figma на x=391, y=461 (большой куст в центре-справа) */
.fund-bushes-bottom {
position: absolute;
left: 391px;
top: 461px;
width: 581.823px;
height: 519.865px;
background: url('../assets/images/bushes.png') no-repeat center / contain;
pointer-events: none;
z-index: 5;
}
/* Велосипедист (cyclist.png) — 245.684×244.037. В Figma на x=790, y=564 */
.fund-cyclist {
position: absolute;
left: 790px;
top: 564px;
width: 245.684px;
height: 244.037px;
background: url('../assets/images/cyclist.png') no-repeat center / contain;
pointer-events: none;
z-index: 7;
}
/* === КОНТЕНТ (z-index 4) — точные координаты от карточки === */
.fundraising__content {
position: absolute;
inset: 0;
z-index: 4;
}
/* Красный pill со счётчиком собранной суммы — позиция по горизонтали через CSS-переменную
(--counter-pos, по умолчанию 50%); сдвигается к ближайшей пройденной дате */
.fundraising__counter {
position: absolute;
left: var(--counter-pos, 50%);
top: 64px;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
gap: 4px;
padding: 0 28px;
width: auto;
min-width: 185px;
height: 62px;
background: var(--color-red);
color: var(--color-white);
border: 4px solid var(--color-white);
border-radius: var(--radius-pill);
font-family: var(--font-base);
font-weight: 700;
font-size: 20px;
line-height: 1;
white-space: nowrap;
justify-content: center;
box-sizing: border-box;
}
.fundraising__counter span {
font-size: 20px;
font-weight: 700;
}
/* 6 плашек дат: одна полоса. Только крайние имеют скругление по своему краю */
.fundraising__dates {
position: absolute;
top: 161px;
left: 95px;
right: 95px;
display: flex;
gap: 8px;
margin: 0;
padding: 0;
}
.fundraising__date {
flex: 1;
height: 54px;
background: var(--color-white);
border-radius: 0; /* по умолчанию прямые углы */
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-base);
font-weight: 700;
font-size: 22px;
line-height: 1;
color: var(--color-text);
}
.fundraising__date:first-child { border-radius: 12px 0 0 12px; } /* левые углы скруглены */
.fundraising__date:last-child { border-radius: 0 12px 12px 0; } /* правые углы скруглены */
.fundraising__date--active { background: var(--color-white); color: var(--color-text); }
.fundraising__date:not(.fundraising__date--active) { background: rgba(255, 255, 255, 0.55); color: rgba(14, 58, 41, 0.5); }
/* Одометр-счётчик — только в мобильной адаптации (Figma 4353:2613). На десктопе скрыт. */
.fundraising__odometer { display: none; }
/* Лого «Выручаем» (большой dark): Figma x=96, y=262, 358×78 */
.fundraising__logo {
position: absolute;
left: 96px;
top: 262px;
width: 358px;
height: 78px;
}
.fundraising__logo img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: left center;
}
/* Подпись «Количество собранных средств…»: Figma x=96, y=367, w=594, h=58 (2 строки)
font ~24px SemiBold (h=58 / 2 строки / 1.2 = ~24px), color #0e3a29 */
.fundraising__caption {
position: absolute;
left: 96px;
top: 367px;
width: 594px;
font-family: var(--font-base);
font-weight: 600;
font-size: 22px;
line-height: 1.3;
color: var(--color-text);
margin: 0;
}
/* ============================================================
FOOTER (Figma 4157:202: y=5990, w=1280, h=647)
============================================================ */
.footer {
background: var(--color-green-dark);
color: var(--color-white);
}
.footer__top {
width: 100%;
max-width: var(--container-w);
margin: 0 auto;
padding: 67px 80px 40px; /* top=67 (бейдж y_local=67), bottom=40 (до плашки телефона) */
display: grid;
grid-template-columns: 225px 1fr 219px; /* точные ширины: бейдж 225, лого 219 */
column-gap: 60px;
align-items: start;
}
/* Левая колонка: бейдж «Доставка за 30 минут» (225×34) + QR (140×140) + подпись */
.footer__qr {
display: flex;
flex-direction: column;
align-items: center;
width: 225px;
}
.footer__badge {
width: 225px;
height: 34.139px;
display: block;
margin-bottom: 25px; /* QR на y=126 от футера, бейдж заканчивается на 101 → 25 */
align-self: flex-start;
}
.footer__qr-img {
width: 140px;
height: 140px;
background: var(--color-white);
padding: 10px;
border-radius: 15px;
display: block;
}
.footer__qr-caption {
margin-top: 10px;
font-family: var(--font-base);
font-size: 13px;
font-weight: 400;
line-height: 1.3;
color: rgba(255, 255, 255, 0.7);
text-align: center;
width: 140px;
}
/* Центральная колонка: ссылки → "Заходите…" → соцсети → копирайт */
.footer__center {
display: flex;
flex-direction: column;
}
.footer__links {
display: flex;
flex-direction: column;
gap: 6px;
}
.footer__link {
color: var(--color-white);
font-family: var(--font-base);
font-size: 16px;
font-weight: 400;
text-decoration: underline;
transition: color .15s ease;
}
.footer__link:hover { color: var(--color-light-green); }
.footer__social { margin-top: 62px; } /* ссылки заканчиваются ~y=143, "Заходите..." на y=205 → 62 */
.footer__social-title {
font-family: var(--font-base);
font-size: 16px;
font-weight: 400;
margin-bottom: 24px; /* "Заходите..." y=205 h=20 → 225, соцсети y=249 → 24 */
}
.footer__social-list { display: flex; gap: 12px; margin: 0; padding: 0; }
.footer__social-list a { display: block; width: 32px; height: 32px; }
.footer__social-list img { width: 32px; height: 32px; }
.footer__copyright {
margin-top: 18px; /* соцсети y=249 h=32 → 281, копирайт y=299 → 18 */
font-family: var(--font-base);
font-size: 12px;
font-weight: 400;
line-height: 1.2;
color: rgba(255, 255, 255, 0.8);
}
/* Правая колонка: лого Пятёрочка + Выручаем */
.footer__logos {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 19px; /* Пятёрочка заканчивается на y=131, Выручаем y=151 → 20 */
}
.footer__logo-5ka img {
width: 216.444px;
height: 69.835px;
display: block;
}
.footer__logo-vyruchaem img {
width: 218.444px;
height: 47.336px;
display: block;
}
/* Плашки телефона и правовой — внутри .container (1280 max-width). 117 и 131 высота. */
.footer__support {
background: transparent;
padding: 0 0 16px; /* 16px gap до правовой плашки */
}
.footer__legal {
background: transparent;
padding: 0 0 11px; /* плашка заканчивается за ~11px до низа футера */
}
.footer__band {
background: rgba(255, 255, 255, 0.08);
border-radius: 24px;
height: 117px; /* Figma: 1120×117 */
padding: 32px;
text-align: center;
color: var(--color-white);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 9px;
}
.footer__legal .footer__band {
background: rgba(255, 255, 255, 0.05);
height: 131px;
padding: 30px 32px;
font-family: var(--font-base);
font-size: 12px;
font-weight: 400;
color: rgba(255, 255, 255, 0.75);
line-height: 1.5;
}
.footer__legal .footer__band p { max-width: 1060px; margin: 0 auto; }
.footer__phone {
font-family: var(--font-base);
font-size: 20px;
font-weight: 900;
line-height: 1.2;
color: var(--color-white);
margin: 0;
}
.footer__phone a { color: inherit; text-decoration: none; }
.footer__schedule {
font-family: var(--font-base);
font-size: 16px;
font-weight: 400;
line-height: 1.2;
color: var(--color-white);
margin: 0;
}
/* Кнопка «Задать вопрос» в плашке поддержки — только в мобильном подвале */
.footer__support-btn { display: none; }
/* ============================================================
MOBILE
============================================================ */
@media (max-width: 767px) {
:root { --container-pad: 20px; }
.section-title { font-size: 30px; margin-bottom: 24px; }
.btn { font-size: 18px; padding: 14px 24px; }
.btn--red, .btn--green-dark, .btn--white { min-width: 0; width: 100%; min-height: 56px; height: 56px; }
/* Header — mobile (Figma menu): слева «5» + «Выручаем», справа иконка пользователя
и бургер в салатовых кругах */
.header { height: 56px; }
.header__inner {
display: flex;
align-items: center;
padding: 0 16px;
gap: 10px;
}
/* Значок «5» — слева */
.header__logo-5ka { display: flex; align-items: center; flex-shrink: 0; }
.header__logo-5ka img { display: block; width: auto; height: 38px; }
/* «Выручаем» — рядом, раздвигает правую группу к краю */
.header__logo-vyruchaem {
position: static;
left: auto;
top: auto;
margin-right: auto;
}
.header__logo-vyruchaem img { width: auto; height: 26px; }
.nav { display: none; }
.nav.is-open {
display: flex;
position: absolute;
top: 56px;
left: 0; right: 0;
flex-direction: column;
background: var(--color-green-dark);
padding: 16px 20px;
gap: 14px;
align-items: stretch;
z-index: 99;
}
.nav.is-open .nav__link {
position: static;
left: auto;
top: auto;
padding: 8px 0;
border-bottom: 1px solid rgba(255,255,255,.1);
}
.nav.is-open .nav__logo { display: none; }
/* Иконка пользователя — салатовый круг (это сам SVG), показываем */
.header__user {
display: flex;
width: 40px;
height: 40px;
margin-left: 0;
flex-shrink: 0;
}
.header__user img { width: 40px; height: 40px; }
/* Бургер — в салатовом круге, тёмно-зелёные линии */
.burger {
display: flex;
width: 40px;
height: 40px;
margin-left: 0;
border-radius: 50%;
background: var(--color-light-green);
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
}
.burger span { width: 18px; height: 2px; background: var(--color-green-dark); border-radius: 2px; }
.hero {
height: auto;
background: var(--color-light-green); /* #98C21F — салатовый */
overflow: hidden;
}
.hero__photo {
width: 100%;
aspect-ratio: 16 / 9;
background-image: url(../assets/images/background_mobile.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
position: relative;
}
.hero__shape,
.hero__chevrons { display: none; }
.hero__inner {
position: relative;
padding: 24px 20px 28px;
align-items: center;
text-align: center;
/* Диагональный шевронный паттерн (#00923A 17%) поверх салатового фона секции.
background-size > 100% → углы шевронов уходят за пределы блока (видимы только середины) */
background: url('../assets/images/hero-chevrons-mobile.svg') center / 130% 130% no-repeat;
}
.hero__top { flex-direction: row; align-items: center; justify-content: center; gap: 16px; margin-bottom: 12px; }
.hero__badge { width: 69px; margin: 0; }
.hero__dates { align-items: flex-start; padding-bottom: 0; }
.hero__date-num { font-size: 58px; line-height: 1; }
.hero__date-month { font-size: 38px; line-height: 1; }
.hero__title { font-size: 30px; max-width: none; margin-bottom: 24px; }
.btn--red { width: 100%; height: 56px; padding: 0; }
.hero .btn--red { height: 64px; } /* кнопка hero чуть выше (Figma 65px) */
/* Routes — mobile (Figma 4353:2864): заголовок → 20px → 4 карточки (64px, gap 10px) → 20px → картинка 240px */
.routes { padding: 40px 0; overflow: hidden; }
.routes__grid { grid-template-columns: 1fr; gap: 20px; }
.routes__list { gap: 10px; }
.route-card { height: 64px; font-size: 22px; padding: 0 28px; }
/* Шевроны прижаты к правому краю, сохраняют пропорции PNG-кадра */
.route-card::after,
.route-card::before {
inset: auto;
right: 0;
top: 0;
bottom: 0;
left: auto;
width: 180px;
background-size: auto 100%;
background-position: right center;
background-repeat: no-repeat;
}
.routes__media { overflow: hidden; border-radius: 24px; }
.routes__image { height: 240px; border-radius: 24px; }
.routes__chevrons { display: none; } /* в мобильном макете шевронов поверх фото нет */
/* How — mobile (Figma 4353:3340): заголовок по центру, 5 шагов вертикально с белой
пунктирной линией через кружки, внизу велосипед слева + холмы/ёлки справа */
.how { padding: 40px 0; }
.how .section-title { text-align: center; } /* заголовок по центру */
.how__block {
position: relative;
padding: 28px 24px 150px; /* нижний отступ под декор */
border-radius: 24px;
min-height: 0;
height: auto;
display: flex;
flex-direction: column;
gap: 20px;
}
/* Белая пунктирная линия через центры кружков (кружки 44px, центр на 24+22=46px) */
.how__block::before {
content: '';
position: absolute;
left: 45px;
top: 50px;
bottom: 168px;
border-left: 3px dashed var(--color-white);
z-index: 1;
}
.how__dots, .how__pin { display: none; }
/* Салатовая полоса-«земля» внизу блока */
.how__grass {
height: 24px;
background: var(--color-light-green);
border-top: 3px solid var(--color-green-dark);
border-radius: 0 0 24px 24px;
}
/* Холмы + ёлки справа внизу */
.how__hills {
display: block;
left: auto; right: 0; top: auto; bottom: -42px;
width: 200px; height: 150px;
background: url('../assets/images/how-hills-mobile.svg') right bottom / contain no-repeat;
z-index: 2;
}
/* Велосипед слева внизу */
.how__bike {
left: 12px; right: auto; top: auto; bottom: 22px;
width: 120px; height: 72px;
background: url('../assets/images/how-bike-mobile.svg') left bottom / contain no-repeat;
z-index: 3;
transform: rotateY(180deg);
}
.how__step {
position: relative;
left: auto; top: auto;
gap: 16px;
align-items: center;
z-index: 2;
}
.how__step-num {
width: 44px;
height: 44px;
font-size: 28px;
z-index: 2;
}
.how__step-text { font-size: 16px; max-width: none; }
/* Camp — mobile: салатовая плашка с заголовком по центру, упрощённой картой
(image 3.png, 318×211) и двумя шевронами (слева-вверху, справа-внизу) */
.camp { padding: 0; min-height: 0; overflow: hidden; }
.camp__inner { min-height: 0; padding: 40px 20px; }
.camp__title { position: static; left: auto; top: auto; margin: 0 0 24px; max-width: none; text-align: center; }
.camp__fest-logo { display: none; }
/* Упрощённая карта-картинка под заголовком */
.camp__map {
display: block;
position: static;
left: auto;
top: auto;
width: 100%;
height: 0;
padding-bottom: 67.17%; /* 712/1060 — соотношение Group 1987300357.png */
background: url('../assets/images/Group 1987300357.png') center / contain no-repeat;
}
/* Текстовые метки на упрощённой карте не нужны (рассчитывались под другую картинку) */
.camp__label { display: none; }
/* Шевроны — оба смотрят вправо: один слева-вверху, другой справа-внизу */
.camp__decor { display: block; width: 125px; height: 79px; background-size: 125px 142px; }
.camp__decor--left { left: -45px; top: 40px; }
.camp__decor--right { left: auto; right: -45px; top: auto; bottom: 40px; transform: none; }
/* FAQ */
.faq { padding: 40px 0; }
.faq__block { padding: 20px; border-radius: 24px; }
.faq .section-title { text-align: center; }
.faq__lead { font-size: 20px; }
.faq__question { font-size: 18px; padding-right: 40px; }
.faq__answer { font-size: 16px; }
/* Кнопки в столбик: «Больше вопросов» сверху, «Задать вопрос» снизу (Figma 4353:3140) */
.faq__actions { flex-direction: column; gap: 16px; }
.faq__actions .btn { height: 64px; }
/* Partners — mobile (Figma 4353:3171): генеральный партнёр + карусель со стрелками */
.partners { padding: 40px 0; }
.partners .section-title { text-align: center; }
.partners__subtitle { font-size: 20px; margin-bottom: 20px; text-align: center; }
/* На мобилке генеральный спонсор показан отдельно над каруселью */
.partners__general {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 0 28px;
}
.partners__general img { max-width: 320px; max-height: 160px; }
/* Чтобы партнёр(0) не дублировался — скрываем его карточку в карусели */
.partner-card--general { display: none; }
.partners__carousel { display: flex; align-items: center; gap: 8px; }
.partners__arrow {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 40px;
height: 40px;
padding: 0;
border-radius: 50%;
border: 2px solid var(--color-light-green);
background: var(--color-white);
color: var(--color-green);
font-size: 26px;
line-height: 1;
cursor: pointer;
}
.partners__grid {
display: flex;
grid-template-columns: none; /* отменяем десктопную сетку */
gap: 16px;
flex: 1;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
}
.partners__grid::-webkit-scrollbar { display: none; }
.partner-card {
flex: 0 0 100%;
width: 100%;
aspect-ratio: auto;
height: 140px;
scroll-snap-align: center;
padding: 16px;
}
/* Fundraising — mobile (Figma 4353:2613): голубая карточка с лого «Выручаем»,
подписью по центру и одометром-счётчиком. Без gif, дат и красной плашки. */
.fundraising { padding: 40px 0; background: var(--color-white); }
.fundraising__wrap { padding: 0 var(--container-pad); }
.fundraising__card {
height: auto;
border-radius: 24px;
padding: 28px 20px 32px;
background: var(--color-blue);
}
/* gif, красная плашка-счётчик, даты и декор — скрываем на мобилке */
.fundraising__video,
.fundraising__counter,
.fundraising__dates,
.fund-rbtrees, .fund-top-bushes, .fund-big-bushes,
.fund-top-trees, .fund-bushes-bottom, .fund-cyclist,
.fund-sun, .fund-hills, .fund-road, .fund-grass { display: none; }
/* Контент в обычном потоке, по центру */
.fundraising__content {
position: static;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
padding: 0;
}
.fundraising__logo {
position: static;width: 300px;
height: 67px;
}
.fundraising__caption {
position: static;
width: auto;
text-align: center;
font-size: 16px;
line-height: 1.3;
color: var(--color-text);
}
/* Одометр: 7 зелёных боксов с белыми цифрами, каждый «разрезан» по центру */
.fundraising__odometer {
display: flex;
justify-content: center;
gap: 4px;
}
.odo-digit {
position: relative;
width: 38px;
height: 50px;
border-radius: 6px;
background: var(--color-green);
color: var(--color-white);
font-family: var(--font-base);
font-weight: 700;
font-size: 30px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
}
/* Footer — mobile (Figma footer): один центрированный столбец, порядок —
логотипы, соцсети, ссылки, плашка поддержки (+кнопка), доставка+QR, правовой текст */
.footer { display: flex; flex-direction: column; }
.footer__top { display: contents; } /* распускаем грид: qr/center/logos → flex-дети footer */
.footer__logos {
order: 1;
flex-direction: column;
align-items: center;
gap: 16px;
padding: 32px 20px 0;
}
.footer__center {
order: 2;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 28px 20px 0;
}
.footer__social { order: 1; margin-top: 0; }
.footer__social-list { justify-content: center; }
.footer__links { order: 2; align-items: center; margin-top: 24px; }
.footer__copyright { order: 3; text-align: center; margin-top: 20px; }
.footer__support { order: 3; padding: 28px 0 0; } /* боковые отступы даёт внутренний .container */
.footer__band { height: auto; min-height: 0; padding: 24px 20px; border-radius: 20px; gap: 14px; }
.footer__phone { font-size: 18px; line-height: 1.3; }
.footer__phone a { display: inline-block; }
.footer__schedule { font-size: 14px; line-height: 1.3; }
/* Кнопка «Задать вопрос» */
.footer__support-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
height: 56px;
margin-top: 6px;
padding: 0;
border: 0;
border-radius: 35px;
background: var(--color-white);
color: var(--color-green-dark);
font-family: var(--font-base);
font-weight: 600;
font-size: 18px;
text-decoration: none;
cursor: pointer;
}
/* align-self: center центрирует блок (фиксированной ширины 225px с десктопа) по горизонтали */
.footer__qr { order: 4; align-self: center; align-items: center; text-align: center; padding: 28px 20px 0; }
.footer__badge { width: 200px; align-self: center; }
.footer__legal { order: 5; padding: 28px 0 24px; } /* боковые отступы даёт внутренний .container */
.footer__legal .footer__band { height: auto; padding: 18px 16px; font-size: 11px; }
}
/* ============================================================
REGISTER «ЛК регистрация» (Figma node 4022:720, card 1120×838)
============================================================ */
.register {
background: #98C21F;
padding: 72px 0;
/* min-height не ставим — секция растёт под содержимое карточки + padding 72×2 */
}
.register__card {
position: relative;
background: var(--color-white);
border-radius: 40px;
padding: 48px 95px 60px; /* контент в Figma начинается на x=95, y=48 от карточки */
overflow: hidden;
min-height: 838px;
}
/* Декоративные шевроны справа сверху карточки. Из Figma: 2 mask-groups 268×213, x=810/970, y≈164 */
.register__decor {
position: absolute;
top: -20px;
width: 268px;
height: 213px;
background: url('../assets/images/register-chevrons.svg') center / contain no-repeat;
pointer-events: none;
z-index: 1;
}
/* Шевроны прижаты к правому краю плашки */
.register__decor--1 { right: 160px; }
.register__decor--2 { right: 0; }
/* Заголовок «Регистрация учётной записи» */
.register__title {
position: relative;
z-index: 2;
font-family: var(--font-base);
font-weight: 900; /* Black */
font-size: 50px;
line-height: 1.2;
color: var(--color-green); /* #00923a */
margin: 0 0 60px;
}
/* Форма — 2 колонки: поля слева, чекбоксы + капча + кнопка справа */
.register__form {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 454px 1fr;
gap: 56px;
align-items: start;
}
.register__col { display: flex; flex-direction: column; }
.register__col--left { gap: 26px; }
.register__col--right { gap: 22px; }
/* Поле с label сверху и input снизу с underline */
.field {
display: block;
width: 100%;
cursor: text;
}
.field__label {
display: block;
font-family: var(--font-base);
font-weight: 400;
font-size: 16px;
line-height: 1.2;
color: var(--color-text);
margin-bottom: 8px;
}
.field__hint {
font-size: 16px;
font-weight: 400;
color: var(--color-text);
opacity: 0.7;
}
.field__input {
display: block;
width: 100%;
border: 0;
border-bottom: 1px solid var(--color-text);
background: transparent;
font-family: var(--font-base);
font-weight: 400;
font-size: 24px;
line-height: 1.2;
color: var(--color-text);
padding: 4px 0 10px;
outline: none;
}
.field__input::placeholder { color: var(--color-text); opacity: 1; }
.field__input:focus { border-bottom-color: var(--color-green); }
/* Кастомный чекбокс */
.check {
display: grid;
grid-template-columns: 24px 1fr;
gap: 26px;
align-items: start;
cursor: pointer;
}
.check__input {
position: absolute;
opacity: 0;
pointer-events: none;
}
/* По Figma (node 4347:12 / icons 4347:875): рамка 2px тёмно-зелёная (#026E2E),
радиус 3px, фон ВСЕГДА прозрачный — даже когда чекбокс отмечен.
В checked-состоянии появляется тёмно-зелёная галочка внутри. */
.check__box {
display: inline-block;
width: 23.5px;
height: 23.5px;
border-radius: 3px;
border: 2px solid var(--color-green-dark);
background: transparent;
position: relative;
flex-shrink: 0;
margin-top: 2px;
}
.check__input:checked + .check__box::after {
content: '';
position: absolute;
left: 6px;
top: 1px;
width: 8px;
height: 14px;
border: solid var(--color-green-dark);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.check__text {
font-family: var(--font-base);
font-weight: 400;
font-size: 16px;
line-height: 1.4;
color: var(--color-text);
}
.check__link {
color: var(--color-text);
text-decoration: underline;
}
.check__link:hover { color: var(--color-green); }
/* Контейнер для Yandex SmartCaptcha — пока виджет грузится, держим место */
.smart-captcha {
width: 454px;
min-height: 100px;
}
/* Кнопка «Зарегистрироваться» (454×70, красная, radius 35) */
.register__submit {
width: 454px;
height: 70px;
padding: 0;
border-radius: 35px;
font-family: var(--font-base);
font-weight: 600;
font-size: 24px;
line-height: 1.2;
background: var(--color-red);
color: var(--color-white);
cursor: pointer;
}
.register__submit:hover { background: #cf1d1c; }
/* Mobile — по Figma node 4347:487: одна колонка, карточка 335px (поля 20px),
верхние салатовые шевроны в правом верхнем углу, шаг между элементами 20px. */
@media (max-width: 767px) {
.register { padding: 40px 0 20px; } /* карточка в 40px от верха секции (Figma y=96, хедер 56) */
.register__card {
padding: 20px 20px 30px; /* 20px сверху/по бокам, 30px снизу (Figma) */
border-radius: 24px;
min-height: 0;
}
/* Верхние салатовые шевроны — правый верхний угол карточки (две группы рядом, ≈151×88) */
.register__decor { display: block; top: 0; width: 76px; height: 88px; }
.register__decor--1 { right: 43px; }
.register__decor--2 { right: -13px; } /* чуть выходит за правый край, обрезается overflow карточки */
.register__title { font-size: 24px; margin-bottom: 30px; }
/* Одна колонка; шаг 20px между полями, чекбоксами и между группами */
.register__form { grid-template-columns: 1fr; gap: 20px; }
.register__col--left { gap: 20px; }
.register__col--right { gap: 20px; }
.check { gap: 20px; } /* отступ иконки чекбокса от текста (Figma slot x=43.5 = 23.5+20) */
.smart-captcha { width: 100%; min-height: 106px; }
.register__submit { width: 100%; height: 60px; }
}
/* ============================================================
LOGIN «ЛК логин» (Figma node 4022:1429)
Большое фоновое фото велосипеда + белая карточка слева 645×570
============================================================ */
.login {
position: relative;
overflow: hidden;
min-height: 818px; /* от header до footer */
background: var(--color-light-green); /* #98C21F — салатовый */
}
/* Фоновое фото велосипеда — Figma 4044:949: x=-44, y=230, 1354×774 (выходит за края) */
.login__bg {
position: absolute;
left: -45px;
right: -45px;
top: 117px; /* y=230 в Figma минус header 113 = 117 */
height: 774px;
background: url('../assets/images/login-bg.png') center / cover no-repeat;
z-index: 0;
}
/* 4 декоративных шеврона: 2 белых сверху справа + 2 салатовых снизу слева.
Каждый Mask group в Figma 171×136 на координатах:
top-right-1: x=986, y=97 (=> от login section: x_local, top=-16)
top-right-2: x=1088, y=97 (=> +102 right)
bottom-left-1: x=222, y=946 (=> top = 833 от section)
bottom-left-2: x=324, y=946 */
.login__chev {
position: absolute;
width: 171px;
height: 136px;
pointer-events: none;
z-index: 2;
}
/* Верхние — белые, выходят за верх секции (как в Figma на y=97, header начинается на 113) */
.login__chev--tr1,
.login__chev--tr2 {
top: -16px;
background: url('../assets/images/login-chevrons.svg') center / contain no-repeat;
}
/* Нижний левый — одна PNG-картинка с группой шевронов (натуральный размер 273×136) */
.login__chev--bl1 {
bottom: 0; /* 24px от низа секции */
width: 273px;
height: 136px;
background: url('../assets/images/chev-bl.png') center / contain no-repeat;
}
/* bl2 больше не нужен — объединили в bl1 */
.login__chev--bl2 { display: none; }
/* Верхние: правый (внешний) — 24px от правого края, левый (внутренний) — на 102px левее */
.login__chev--tr1 { left: auto; right: 154px; }
.login__chev--tr2 { left: auto; right: 24px; }
/* PNG уже нарисована в нужную сторону — поворот не нужен */
.login__chev--bl1 { left: 24px; }
/* Контейнер с карточкой */
.login__inner {
position: relative;
z-index: 2;
padding-top: 45px;
padding-bottom: 80px;
}
/* Белая карточка — 645×570 (min-height, чтобы 33px снизу всегда сохранялись) */
.login__card {
background: var(--color-white);
border-radius: 40px;
width: 645px;
min-height: 570px;
padding: 48px 95px 33px;
}
/* Короткая карточка (для password-reset 645×496) — фиксированная высота */
.login__card--short {
min-height: 496px;
height: 496px;
}
/* Подсказка в короткой карточке: 24px от поля, 46px до кнопки */
.login__card--short .login__hint { margin: 24px 0 0; }
.login__card--short .login__submit { margin-top: 46px; }
/* Подсказка под полем для password-reset */
.login__hint {
font-family: var(--font-base);
font-weight: 400;
font-size: 16px;
line-height: 1.2;
color: var(--color-text);
margin: -10px 0 14px;
}
/* Широкая кнопка (на всю ширину контента карточки 454px) — для password-reset */
.login__submit--wide { width: 454px; }
/* Заголовок «Регистрация учётной записи» — 5ka Sans Design Black 50px, #026e2e */
.login__title {
font-family: var(--font-base);
font-weight: 600;
font-size: 50px;
line-height: 1.2;
color: var(--color-green-dark);
margin: 0 0 28px;
}
/* Форма входа — gap только между полями, между остальным — точные margin'ы */
.login__form {
display: flex;
flex-direction: column;
}
.login__form .field + .field { margin-top: 22px; }
/* Кнопка «Войти» — 454×70, красная, radius 35. 50px от нижней границы поля «Пароль». */
.login__submit {
width: 454px;
height: 70px;
padding: 0;
margin-top: 50px;
border: 0;
border-radius: 35px;
font-family: var(--font-base);
font-weight: 600;
font-size: 24px;
line-height: 1.2;
background: var(--color-red);
color: var(--color-white);
cursor: pointer;
}
.login__submit:hover { background: #cf1d1c; }
/* Ссылки внизу карточки: 30px от кнопки до 1-й ссылки, 15px между ссылками */
.login__link {
display: block;
font-family: var(--font-base);
font-weight: 400;
font-size: 16px;
line-height: 1.4;
color: var(--color-text);
text-decoration: underline;
}
.login__form .login__link { margin-top: 0; }
.login__form .login__link:first-of-type { margin-top: 30px; }
.login__form .login__link + .login__link { margin-top: 15px; }
.login__link:hover { color: var(--color-green); }
/* Mobile — вертикальный стек: верхние шевроны, карточка, полоса с велосипедом + нижние шевроны.
По Figma node 4347:573: секция 941px, полоса с фото 338px. */
@media (max-width: 767px) {
.login {
min-height: 941px; /* контент между хедером и футером (Figma 997 − 56 хедер) */
padding: 108px 0 338px; /* bottom = высота полосы с фото: резервирует место, чтобы карточка её не перекрывала */
overflow: hidden;
}
/* Фото велосипеда — полоса 338px внизу секции. cover + якорь right обрезает
прозрачный верх-левый угол композита, оставляя велосипед на траве. */
.login__bg {
display: block;
position: absolute;
left: 0;
right: 0;
top: auto;
bottom: 0;
height: 338px;
background: url('../assets/images/login-bg.png') right center / cover no-repeat;
background-color: #98C21F; /* трава — подложка на случай прозрачных краёв */
z-index: 0;
}
/* Верхние белые шевроны — справа сверху, внешний край в 22px от правого края */
.login__chev { display: block; }
.login__chev--tr1,
.login__chev--tr2 {
top: 14px;
width: 68px;
height: 80px;
}
.login__chev--tr1 { left: auto; right: 72px; }
.login__chev--tr2 { left: auto; right: 21px; }
/* Нижние салатовые шевроны — поверх полосы с фото, в 22px от левого края */
.login__chev--bl1 {
display: block;
left: 22px;
right: auto;
bottom: 0;
width: 150px;
height: 75px;
}
.login__chev--bl2 { display: none; }
/* Карточка над полосой */
.login__inner { padding: 0 20px; position: relative; z-index: 3; }
.login__card { width: 100%; padding: 32px 24px; border-radius: 24px; }
.login__title { font-size: 30px; }
.login__submit { width: 100%; }
}
/* ============================================================
CHOICE «Выберите вариант участия» (Figma node 4022:913)
Карточка 1120×633 с 2 radio + кнопка
============================================================ */
.choice {
background: var(--color-light-green);
padding: 72px 0;
min-height: calc(100vh - 113px);
}
.choice__card {
position: relative;
background: var(--color-white);
border-radius: 40px;
padding: 58px 97px 60px; /* контент в Figma: x=177, y=243 (58 от карточки 185) */
min-height: 633px;
}
/* Заголовок «Выберите вариант участия» — 5ka Sans Design Black 50px, #026e2e */
.choice__title {
font-family: var(--font-base);
font-weight: 600;
font-size: 50px;
line-height: 1.2;
color: var(--color-green-dark);
margin: 0 0 60px;
white-space: nowrap;
}
/* Форма */
.choice__form {
display: flex;
flex-direction: column;
gap: 38px; /* between radio options (~36 в Figma) */
position: relative;
}
/* Кастомный radio: круг 36×36 с зелёной обводкой,
при checked — внутри зелёный круг */
.radio {
display: flex;
align-items: center;
gap: 18px;
cursor: pointer;
}
.radio__input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.radio__mark {
flex-shrink: 0;
display: inline-block;
width: 36px;
height: 36px;
border-radius: 50%;
border: 2px solid var(--color-green);
background: var(--color-white);
position: relative;
transition: border-color .15s ease;
}
.radio__input:checked + .radio__mark::after {
content: '';
position: absolute;
inset: 5px;
border-radius: 50%;
background: var(--color-green);
}
.radio__text {
font-family: var(--font-base);
font-weight: 400;
font-size: 24px;
line-height: 1.2;
color: var(--color-text);
}
/* Кнопка «Далее» — 168×70, красная (справа внизу карточки) */
.choice__submit {
align-self: flex-end;
margin-top: 168px; /* по Figma: button на y=670, последний radio на y=480+36=516 → 154 (но визуально с zazor) */
width: 168px;
height: 70px;
padding: 0;
border: 0;
border-radius: 35px;
font-family: var(--font-base);
font-weight: 600;
font-size: 24px;
line-height: 1.2;
background: var(--color-red);
color: var(--color-white);
cursor: pointer;
}
.choice__submit:hover { background: #cf1d1c; }
/* Mobile — по Figma node 4347:667 */
@media (max-width: 767px) {
.choice { padding: 40px 0; } /* карточка в 40px от верха секции */
.choice__card { padding: 30px 20px; border-radius: 24px; min-height: 0; }
.choice__title { font-size: 24px; margin-bottom: 30px; white-space: normal; }
.choice__form { gap: 20px; } /* 20px между радио и до кнопки */
.radio__text { font-size: 16px; }
/* margin-top: 0 — единственный отступ до кнопки задаёт gap формы (20px) */
.choice__submit { width: 100%; align-self: stretch; margin-top: 0; }
}
/* ============================================================
RESERVATION «Резервирование мест в кемпинге» (Figma 4022:1030)
Карточка 1120×633: заголовок + описание + 2 счётчика + блок «свободные места» + 2 кнопки
============================================================ */
.reservation {
background: var(--color-light-green);
padding: 72px 0;
min-height: calc(100vh - 113px);
}
.reservation__card {
position: relative;
background: var(--color-white);
border-radius: 40px;
padding: 58px 97px 60px;
min-height: 633px;
}
/* Заголовок */
.reservation__title {
font-family: var(--font-base);
font-weight: 600;
font-size: 50px;
line-height: 1.2;
color: var(--color-green-dark);
margin: 0 0 60px;
white-space: nowrap;
}
/* Подсказка под заголовком (Regular 24px) */
.reservation__hint {
font-family: var(--font-base);
font-weight: 400;
font-size: 24px;
line-height: 1.2;
color: var(--color-text);
margin: 0 0 60px;
}
/* Тело: слева счётчики, справа блок «свободные места» */
.reservation__body {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: start;
margin-bottom: 60px;
}
/* Левая колонка — 2 счётчика */
.reservation__selectors {
display: flex;
flex-direction: column;
gap: 34px;
}
/* Кастомный select (counter): 95×46 dropdown + label справа от него */
.counter {
display: flex;
align-items: center;
gap: 30px;
}
.counter__select {
width: 95px;
height: 46px;
padding: 0 46px 0 18px;
border: 1.5px solid var(--color-green);
border-radius: 0; /* прямые углы */
font-family: var(--font-base);
font-weight: 700;
font-size: 24px;
color: var(--color-text);
cursor: pointer;
appearance: none;
-webkit-appearance: none;
outline: none;
/* Стрелка белая поверх тёмно-зелёного бокса справа (ширина 36px) */
background:
url("data:image/svg+xml;utf8,")
no-repeat right 9px center / 18px 10px,
linear-gradient(to right,
var(--color-white) 0,
var(--color-white) calc(100% - 36px),
var(--color-green-dark) calc(100% - 36px),
var(--color-green-dark) 100%
);
}
.counter__select:focus { border-color: var(--color-green-dark); }
.counter__label {
font-family: var(--font-base);
font-weight: 400;
font-size: 24px;
line-height: 1.2;
color: var(--color-text);
}
/* Правая колонка: «Свободные места» / «12000» */
.reservation__free {
display: flex;
flex-direction: column;
align-items: flex-end;
text-align: right;
}
.reservation__free-label {
font-family: var(--font-base);
font-weight: 400;
font-size: 24px;
line-height: 1.2;
color: var(--color-text);
margin-bottom: 8px;
}
.reservation__free-count {
font-family: var(--font-base);
font-weight: 600;
font-size: 80px;
line-height: 1.2;
color: var(--color-light-green); /* #98c21f — салатовый */
}
/* Нижний ряд кнопок: «Назад» слева outlined, «Далее» справа красная */
.reservation__actions {
display: flex;
justify-content: space-between;
align-items: center;
}
/* «Назад» — outlined: белый фон, тёмно-зелёный border + текст */
.btn-back {
display: inline-flex;
align-items: center;
justify-content: center;
width: 168px;
height: 70px;
border: 2px solid var(--color-green-dark);
border-radius: 35px;
background: var(--color-white);
font-family: var(--font-base);
font-weight: 600;
font-size: 24px;
line-height: 1.2;
color: var(--color-green-dark);
text-decoration: none;
cursor: pointer;
transition: background .15s ease, color .15s ease;
}
.btn-back:hover { background: var(--color-green-dark); color: var(--color-white); }
/* «Далее» — красная заливка */
.btn-next {
display: inline-flex;
align-items: center;
justify-content: center;
width: 168px;
height: 70px;
padding: 0;
border: 0;
border-radius: 35px;
background: var(--color-red);
font-family: var(--font-base);
font-weight: 600;
font-size: 24px;
line-height: 1.2;
color: var(--color-white);
cursor: pointer;
transition: background .15s ease;
}
.btn-next:hover { background: #cf1d1c; }
/* Mobile — по Figma node 4347:676 */
@media (max-width: 767px) {
.reservation { padding: 40px 0; } /* карточка в 40px от верха секции */
.reservation__card { padding: 30px 20px; border-radius: 24px; min-height: 0; }
.reservation__title { font-size: 24px; margin-bottom: 20px; white-space: normal; }
.reservation__hint { font-size: 16px; margin-bottom: 20px; }
/* счётчики → 30px → блок мест → 30px → кнопки */
.reservation__body { grid-template-columns: 1fr; gap: 30px; margin-bottom: 30px; }
.reservation__selectors { gap: 10px; } /* 10px между счётчиками (Figma) */
.counter { gap: 16px; }
.counter__label { font-size: 16px; line-height: 1.3; }
.counter__select { font-size: 18px; }
/* Блок «Свободные места» — по центру, число жирным (Black 900) */
.reservation__free { align-items: center; text-align: center; }
.reservation__free-label { font-size: 18px; margin-bottom: 0; }
.reservation__free-count { font-size: 72px; font-weight: 900; }
/* Кнопки друг над другом: «Далее» сверху, «Назад» снизу (в DOM порядок обратный → column-reverse) */
.reservation__actions { flex-direction: column-reverse; align-items: stretch; gap: 20px; }
.btn-back, .btn-next { width: 100%; min-width: 0; font-size: 18px; height: 60px; }
}
/* ============================================================
ROUTE-PICK «Выберите маршрут» (Figma 4022:1158)
4 карточки маршрутов 2×2 (454×93, radius 54) + 2 кнопки
============================================================ */
.route-pick {
background: var(--color-light-green);
padding: 72px 0;
min-height: calc(100vh - 113px);
}
.route-pick__card {
background: var(--color-white);
border-radius: 40px;
padding: 58px 95px 60px;
min-height: 633px;
}
.route-pick__title {
font-family: var(--font-base);
font-weight: 600;
font-size: 50px;
line-height: 1.2;
color: var(--color-green-dark);
margin: 0 0 60px;
}
/* Сетка 4 карточек: 2×2, gap_col=21, gap_row=13 (точно по Figma) */
.route-pick__grid {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 21px;
row-gap: 13px;
margin-bottom: 124px;
}
/* Карточка маршрута: 454×93, radius 54, белый текст 32px Black, шевроны справа */
.route-pick-card {
position: relative;
display: flex;
align-items: center;
padding: 0 42px;
height: 93px;
width: 100%;
border: 0;
text-align: left;
font: inherit;
border-radius: 54px;
cursor: pointer;
overflow: hidden;
isolation: isolate;
transition: transform .15s ease, box-shadow .15s ease;
}
.route-pick-card:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }
.route-pick-card__input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.route-pick-card__text {
position: relative;
z-index: 2;
font-family: var(--font-base);
font-weight: 600;
font-size: 32px;
line-height: 1.2;
color: var(--color-white);
}
/* Статичный шеврон-«кадр 1» (как на главной): полная карточка, без сдвига при hover */
.route-pick-card::after {
content: '';
position: absolute;
inset: 0;
background: url('../assets/animations/buttons/1.png') center / 100% 100% no-repeat;
pointer-events: none;
z-index: 1;
}
/* Анимационный слой кадров: JS подставляет --anim-bg при hover */
.route-pick-card::before {
content: '';
position: absolute;
inset: 0;
background-image: var(--anim-bg, none);
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
opacity: 0;
pointer-events: none;
z-index: 1;
}
.route-pick-card--animating::before { opacity: 1; }
.route-pick-card__text { position: relative; z-index: 2; }
/* Цвета (точно по Figma 4044:875–878) */
.route-pick-card--blue { background: var(--color-blue); } /* Скоростной */
.route-pick-card--orange { background: var(--color-orange); } /* Веселый */
.route-pick-card--green-light { background: var(--color-light-green); } /* Детский */
.route-pick-card--red { background: var(--color-red); } /* Сложный */
/* Подсветка выбранной карточки (опционально) */
.route-pick-card__input:checked ~ .route-pick-card__text {
text-shadow: 0 0 2px rgba(0,0,0,.15);
}
.route-pick-card:has(.route-pick-card__input:checked) {
outline: 3px solid var(--color-green-dark);
outline-offset: 2px;
}
/* Кнопки внизу */
.route-pick__actions {
display: flex;
justify-content: center; /* единственная кнопка «Назад» — по центру; «Далее» теперь в попапе */
align-items: center;
}
/* Mobile */
@media (max-width: 767px) {
.route-pick { padding: 32px 0; }
.route-pick__card { padding: 32px 24px; border-radius: 24px; min-height: 0; }
.route-pick__title { font-size: 28px; margin-bottom: 32px; }
.route-pick__grid { grid-template-columns: 1fr; gap: 12px; margin-bottom: 40px; }
.route-pick-card { height: 72px; padding: 0 28px; }
.route-pick-card__text { font-size: 22px; }
.route-pick-card::after { width: 160px; }
/* Кнопки друг под другом: «Далее» сверху, «Назад» снизу (column-reverse — порядок в DOM обратный) */
.route-pick__actions { flex-direction: column-reverse; align-items: stretch; gap: 20px; }
}
/* ============================================================
ROUTE MODAL — всплывающее окно с информацией о маршруте (Figma 4347:167)
============================================================ */
.route-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.route-modal[hidden] { display: none; }
.route-modal__overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.45);
}
.route-modal__card {
position: relative;
z-index: 1;
width: 100%;
max-width: 900px;
background: var(--color-white);
border-radius: 40px;
padding: 56px 64px 36px;
animation: route-modal-in .25s ease-out;
}
@keyframes route-modal-in {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.route-modal__close {
position: absolute;
top: 20px;
right: 24px;
width: 36px;
height: 36px;
border: 0;
background: transparent;
font-size: 32px;
line-height: 1;
color: var(--color-text);
cursor: pointer;
opacity: .5;
transition: opacity .15s ease;
}
.route-modal__close:hover { opacity: 1; }
/* Стрелки навигации — сразу за краями карточки (на широких экранах), у краёв (на узких) */
/* Стрелки навигации: 29×58 (портретная) SVG, цвет #026E2E, 15px от края карточки (max-width 900) */
.route-modal__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
width: 29px;
height: 58px;
padding: 0;
border: 0;
background: transparent;
color: var(--color-green-dark); /* #026E2E — наследуется SVG через currentColor */
cursor: pointer;
opacity: .85;
transition: opacity .15s ease;
}
.route-modal__nav:hover { opacity: 1; }
.route-modal__nav svg { display: block; width: 100%; height: 100%; }
/* 15px от края карточки (карточка max-width 900 → её край в 50% ± 450) */
.route-modal__nav--prev { left: max(8px, calc(50% - 450px - 15px - 29px)); }
.route-modal__nav--next { right: max(8px, calc(50% - 450px - 15px - 29px)); }
/* Тело: слева текст, справа цифры */
.route-modal__body {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 32px;
align-items: start;
}
.route-modal__title {
font-family: var(--font-base);
font-weight: 900;
font-size: 40px;
line-height: 1.1;
color: var(--color-green);
margin: 0 0 20px;
}
.route-modal__desc {
font-family: var(--font-base);
font-weight: 400;
font-size: 18px;
line-height: 1.45;
color: var(--color-text);
margin-bottom: 28px;
}
.route-modal__desc p { margin: 0 0 12px; }
.route-modal__desc p:last-child { margin-bottom: 0; }
.route-modal__desc strong { font-weight: 700; }
.route-modal__map {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 280px;
height: 64px;
padding: 0 32px;
border-radius: 35px;
background: var(--color-red);
color: var(--color-white);
font-family: var(--font-base);
font-weight: 600;
font-size: 22px;
text-decoration: none;
transition: background .15s ease;
}
.route-modal__map:hover { background: #cf1d1c; }
/* Правый столбец — крупные цифры */
.route-modal__stats {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.route-modal__distance {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
padding-bottom: 24px;
margin-bottom: 24px;
border-bottom: 3px solid var(--color-light-green);
}
.route-modal__num {
font-family: var(--font-base);
font-weight: 900;
font-size: 90px;
line-height: 1;
color: var(--color-light-green);
}
.route-modal__unit {
font-family: var(--font-base);
font-weight: 600;
font-size: 28px;
color: var(--color-text);
}
.route-modal__age {
font-family: var(--font-base);
font-weight: 600;
font-size: 28px;
line-height: 1.1;
color: var(--color-text);
}
.route-modal__age .route-modal__num { display: inline; font-size: 70px; vertical-align: middle; }
/* Кнопка выбора маршрута */
.route-modal__select {
display: block;
width: 100%;
max-width: 360px;
margin: 32px auto 0;
height: 60px;
border: 0;
border-radius: 35px;
background: var(--color-red);
color: var(--color-white);
font-family: var(--font-base);
font-weight: 600;
font-size: 20px;
cursor: pointer;
transition: background .15s ease;
}
.route-modal__select:hover { background: #cf1d1c; }
/* Точки-пагинация */
.route-modal__dots {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 24px;
}
.route-modal__dot {
width: 10px;
height: 10px;
padding: 0;
border: 0;
border-radius: 50%;
background: #d9d9d9;
cursor: pointer;
}
.route-modal__dot--active { background: var(--color-green-dark); }
@media (max-width: 767px) {
.route-modal { padding: 16px; }
.route-modal__card { padding: 40px 20px 28px; border-radius: 24px; }
.route-modal__body { grid-template-columns: 1fr; gap: 20px; }
.route-modal__title { font-size: 28px; }
.route-modal__desc { font-size: 15px; margin-bottom: 20px; }
.route-modal__map { width: 100%; min-width: 0; height: 56px; font-size: 18px; }
.route-modal__stats { flex-direction: row; justify-content: center; gap: 20px; }
.route-modal__distance { width: auto; border-bottom: 0; border-right: 3px solid var(--color-light-green); padding: 0 20px 0 0; margin: 0; }
.route-modal__num { font-size: 52px; }
.route-modal__unit { font-size: 18px; }
.route-modal__age { font-size: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.route-modal__age .route-modal__num { font-size: 44px; }
.route-modal__nav { width: 29px; height: 58px; } /* фиксированные размеры стрелок по макету */
.route-modal__nav--prev { left: 4px; }
.route-modal__nav--next { right: 4px; }
.route-modal__select { max-width: none; }
}
/* ============================================================
PERSONAL «Персональный номер» (Figma 4022:1819)
Карточка 1120×838 с уведомлением о высланном пароле
============================================================ */
.personal {
background: var(--color-light-green);
padding: 72px 0;
min-height: calc(100vh - 113px);
overflow: hidden; /* шевроны могут вылезать из карточки — клипуем по секции */
}
.personal__card {
position: relative;
background: var(--color-white);
border-radius: 40px;
padding: 58px 95px 139px; /* по Figma: 58 сверху, 139 снизу (до края от низа кнопки) */
min-height: 838px;
/* overflow: hidden убран — шевроны выходят за пределы карточки */
}
/* Декоративные шевроны 163×189 (по Figma) — 2 справа сверху, 2 слева снизу (нижние rotate 180°) */
.personal__chev {
position: absolute;
width: 163px;
height: 189px;
background: url('../assets/images/personal-chev-top.svg') center / contain no-repeat;
pointer-events: none;
z-index: 1;
}
/* Верхние: tr1 (внешний) вылезает на 96px вправо за карточку, tr2 в 27px от правого края */
.personal__chev--tr1 { right: -96px; top: -12px; }
.personal__chev--tr2 { right: 27px; top: -12px; }
/* Нижние: bl1 (внешний) вылезает на 40px влево, оба свисают на 73px ниже карточки, rotate 180° */
.personal__chev--bl1 { left: -40px; bottom: -73px; transform: rotate(180deg); }
.personal__chev--bl2 { left: 83px; bottom: -73px; transform: rotate(180deg); }
/* Заголовок 50px Black тёмно-зелёный */
.personal__title {
position: relative;
z-index: 2;
font-family: var(--font-base);
font-weight: 900; /* Black по Figma */
font-size: 50px;
line-height: 1.2;
color: var(--color-green-dark);
margin: 0 0 30px; /* 30px до lead по Figma */
}
/* Параграф «Уважаемый участник…» 20px Regular */
.personal__lead {
position: relative;
z-index: 2;
font-family: var(--font-base);
font-weight: 400;
font-size: 20px;
line-height: 1.2;
color: var(--color-text);
margin: 0 0 16px; /* 16px до плашки «ВНИМАНИЕ» по Figma */
}
.personal__lead p { margin: 0; }
.personal__lead p + p { margin-top: 4px; }
/* Блок «ВНИМАНИЕ!» — серый фон #f4f4f4, без рамки, padding 31×34 */
.personal__notice {
position: relative;
z-index: 2;
background: #f4f4f4;
border-radius: 10px;
padding: 31px 34px;
font-family: var(--font-base);
font-weight: 400;
font-size: 20px;
line-height: 1.3;
color: var(--color-text);
margin-bottom: 60px;
max-width: 930px;
}
.personal__notice p { margin: 0; }
.personal__notice p + p { margin-top: 12px; }
.personal__notice strong { font-weight: 700; }
/* CTA «Перейти в личный кабинет» — 454×70 красная */
.personal__cta {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: 454px;
height: 70px;
padding: 0;
border-radius: 35px;
font-family: var(--font-base);
font-weight: 600;
font-size: 24px;
line-height: 1.2;
background: var(--color-red);
color: var(--color-white);
text-decoration: none;
cursor: pointer;
transition: background .15s ease;
}
.personal__cta:hover { background: #cf1d1c; }
/* Mobile — по Figma node 4347:765 (как страница подтверждения почты) */
@media (max-width: 767px) {
.personal { padding: 40px 0 20px; }
.personal__card { padding: 40px 20px 90px; border-radius: 24px; min-height: 0; }
/* Шевроны как на email-verify: один вверху-справа, один внизу-слева, оба смотрят вправо */
.personal__chev { display: block; width: 128px; height: 101px; }
.personal__chev--tr1 { display: none; }
.personal__chev--tr2 { top: 0; right: -62px; left: auto; background-position: right center; }
.personal__chev--bl1 {
left: -20px;
right: auto;
bottom: -40px;
transform: rotate(180deg);
background-position: left center;
}
.personal__chev--bl2 { display: none; }
.personal__title { font-size: 26px; margin-bottom: 24px; }
.personal__lead { font-size: 16px; margin-bottom: 32px; }
.personal__notice { font-size: 14px; padding: 20px; margin-bottom: 32px; }
/* Текст кнопки меньше (Figma btn 55px) */
.personal__cta { width: 100%; font-size: 18px; height: 56px; }
}
/* ============================================================
PASSWORD-SENT «ЛК регистрация 2» (Figma 4022:1661)
Карточка 1120×838: подтверждение отправки пароля, без CTA, серый блок «ВНИМАНИЕ»
============================================================ */
.password-sent {
background: var(--color-light-green);
padding: 72px 0;
min-height: calc(100vh - 113px);
}
.password-sent__card {
position: relative;
background: var(--color-white);
border-radius: 40px;
padding: 58px 95px 60px;
min-height: 1038px; /* +200 к исходным 838 */
overflow: hidden;
}
/* Декоративные шевроны — register-chevrons.svg (268×213, салатовый из Figma) */
.password-sent__chev {
position: absolute;
width: 268px;
height: 213px;
background: url('../assets/images/register-chevrons.svg') center / contain no-repeat;
pointer-events: none;
z-index: 1;
}
/* Верхний справа — у правого края карточки */
.password-sent__chev--tr {
right: 0;
top: -20px;
}
/* Нижние слева (rotate 180°) — у левого края карточки, парой */
.password-sent__chev--bl1 {
left: 0;
bottom: -20px;
transform: rotate(180deg);
}
.password-sent__chev--bl2 {
left: 160px;
bottom: -20px;
transform: rotate(180deg);
}
/* Заголовок 50px Black зелёный #00923a */
.password-sent__title {
position: relative;
z-index: 2;
font-family: var(--font-base);
font-weight: 600;
font-size: 50px;
line-height: 1.2;
color: var(--color-green);
margin: 0 0 40px;
}
/* Параграф «Уважаемый участник…» 20px Regular */
.password-sent__lead {
position: relative;
z-index: 2;
font-family: var(--font-base);
font-weight: 400;
font-size: 20px;
line-height: 1.2;
color: var(--color-text);
margin: 0 0 50px;
}
.password-sent__lead p { margin: 0; }
.password-sent__lead p + p { margin-top: 4px; }
/* Блок «ВНИМАНИЕ!» — серый фон #f4f4f4, rounded 10px, max-width 930, 20px Regular */
.password-sent__notice {
position: relative;
z-index: 2;
background: #f4f4f4;
border-radius: 10px;
padding: 31px 34px;
font-family: var(--font-base);
font-weight: 400;
font-size: 20px;
line-height: 1.3;
color: var(--color-text);
max-width: 930px;
}
.password-sent__notice p { margin: 0; }
.password-sent__notice p + p { margin-top: 12px; }
.password-sent__notice strong { font-weight: 700; }
/* Mobile — по Figma node 4347:731: шевроны вверху-справа и внизу-слева карточки */
@media (max-width: 767px) {
.password-sent { padding: 40px 0 20px; }
.password-sent__card { padding: 40px 20px 90px; border-radius: 24px; min-height: 0; }
/* Шевроны (≈128×101 по Figma), салатовые, смотрят вправо */
.password-sent__chev { display: block; width: 128px; height: 101px; }
.password-sent__chev--tr { top: 0; right: -62px; background-position: right center; }
.password-sent__chev--bl1 {
left: -20px;
bottom: -40px;
transform: rotate(180deg);
background-position: left center;
}
.password-sent__chev--bl2 { display: none; }
.password-sent__title { font-size: 26px; margin-bottom: 24px; }
.password-sent__lead { font-size: 16px; margin-bottom: 32px; }
.password-sent__notice { font-size: 14px; padding: 20px; }
}
/* ============================================================
LK-INFO «ЛК-РЕГИСТРАЦИЯ информация» (Figma 4022:1986)
Большая карточка 1120×2328: подарки, номер места, маршрут, расписание
============================================================ */
.lk-info {
background: var(--color-light-green);
padding: 72px 0;
}
.lk-info__card {
position: relative;
background: var(--color-white);
border-radius: 40px;
padding: 74px 95px 180px; /* нижний отступ под угловые шевроны (≈155px), чтобы не налезали на текст */
overflow: hidden;
}
/* Декоративные шевроны (207×165) — 2 справа сверху + 2 слева снизу */
.lk-info__chev {
position: absolute;
width: 207px;
height: 165px;
background: url('../assets/images/personal-chev-top.svg') center / contain no-repeat;
pointer-events: none;
z-index: 1;
}
.lk-info__chev--tr1 { right: -10px; top: -10px; }
.lk-info__chev--tr2 { right: 150px; top: -10px; }
/* Низ зеркалирует верх: bl1 у левого края, bl2 на 123px правее */
.lk-info__chev--bl1 { left: -10px; bottom: -10px; transform: rotate(180deg); }
.lk-info__chev--bl2 { left: 150px; bottom: -10px; transform: rotate(180deg); }
/* Лого Выручаем (фонд X5 Group) сверху */
.lk-info__logo {
position: relative;
z-index: 2;
display: block;
width: auto;
height: 80px;
margin: 0 0 28px;
}
/* Заголовок-призыв — тёмно-зелёный, 2-3 строки */
.lk-info__title {
position: relative;
z-index: 2;
font-family: var(--font-base);
font-weight: 600;
font-size: 32px;
line-height: 1.25;
color: var(--color-green-dark);
margin: 0 0 32px;
max-width: 930px;
}
/* Красная кнопка «Сделать взнос» — слева */
.lk-info__donate-btn {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 340px;
height: 65px;
padding: 0 40px;
margin: 0 0 48px;
border-radius: 35px;
background: var(--color-red);
color: var(--color-white);
font-family: var(--font-base);
font-weight: 600;
font-size: 24px;
text-decoration: none;
transition: background .15s ease;
}
.lk-info__donate-btn:hover { background: #cf1d1c; }
/* Две плашки в ряд: номер места + маршрут */
.lk-info__plates {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 22px;
margin-bottom: 22px;
}
/* Плашка «Ваш номер места» — белая с оранжевой рамкой, крупная цифра */
.lk-info__place {
background: var(--color-white);
border: 3px solid var(--color-orange);
border-radius: 24px;
padding: 32px 40px;
min-height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
.lk-info__place-label {
font-family: var(--font-base);
font-weight: 600;
font-size: 28px;
line-height: 1.2;
color: var(--color-green-dark);
margin: 0;
}
.lk-info__place-num {
font-family: var(--font-base);
font-weight: 900;
font-size: 140px;
line-height: 1;
color: var(--color-light-green); /* #98c21f */
margin: 8px 0;
}
.lk-info__place-hint {
font-family: var(--font-base);
font-weight: 400;
font-size: 20px;
line-height: 1.2;
color: var(--color-text);
margin: 0;
}
/* Состояние «без брони» — текст по центру плашки, без крупной цифры */
.lk-info__place--no-camp { justify-content: center; align-items: center; }
.lk-info__place-no-camp {
font-family: var(--font-base);
font-weight: 700;
font-size: 28px;
line-height: 1.25;
color: var(--color-green-dark);
text-align: center;
margin: 0;
}
/* Плашка «Ваш маршрут» — в цвете кнопки маршрута, с белым шеврон-паттерном */
.lk-info__route {
position: relative;
border-radius: 24px;
padding: 36px 40px;
min-height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
overflow: hidden;
color: var(--color-white);
}
.lk-info__route::before {
content: '';
position: absolute;
right: -80px; /* большой сдвиг, чтобы tip'ы шевронов уходили за край без «среза» */
top: 0;
bottom: 0;
width: 280px;
background: url('../assets/images/lk-plate-chevrons.svg') right center / 100% 110% no-repeat;
pointer-events: none;
}
.lk-info__route-label {
position: relative;
z-index: 1;
font-family: var(--font-base);
font-weight: 900;
font-size: 30px;
line-height: 1.2;
margin: 0 0 24px;
}
.lk-info__route-stats {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 28px;
margin-bottom: 24px;
}
.lk-info__route-stat {
display: flex;
flex-direction: column;
align-items: center;
line-height: 1;
}
.lk-info__route-num {
font-family: var(--font-base);
font-weight: 900;
font-size: 56px;
line-height: 1;
}
.lk-info__route-unit {
font-family: var(--font-base);
font-weight: 600;
font-size: 22px;
margin-top: 6px;
}
.lk-info__route-divider {
width: 2px;
align-self: stretch;
background: rgba(255, 255, 255, 0.6);
}
.lk-info__route-btn {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 220px;
height: 48px;
padding: 0 28px;
border-radius: 24px;
background: var(--color-white);
color: var(--color-text);
font-family: var(--font-base);
font-weight: 600;
font-size: 18px;
text-decoration: none;
transition: background .15s ease;
}
.lk-info__route-btn:hover { background: #f0f0f0; }
/* Плашка «Ваш номер участника» — зелёная, на всю ширину, с шеврон-паттерном */
.lk-info__ticket {
position: relative;
z-index: 2;
background: var(--color-light-green);
border-radius: 24px;
padding: 36px 40px;
margin-bottom: 22px;
text-align: center;
overflow: hidden;
color: var(--color-white);
}
.lk-info__ticket::before {
content: '';
position: absolute;
right: -80px; /* большой сдвиг, чтобы tip'ы шевронов уходили за край без «среза» */
top: 0;
bottom: 0;
width: 360px;
background: url('../assets/images/lk-plate-chevrons.svg') right center / 100% 110% no-repeat;
pointer-events: none;
}
.lk-info__ticket-label {
position: relative;
z-index: 1;
font-family: var(--font-base);
font-weight: 600;
font-size: 30px;
line-height: 1.2;
margin: 0 0 4px;
}
.lk-info__ticket-num {
position: relative;
z-index: 1;
font-family: var(--font-base);
font-weight: 900;
font-size: 120px;
line-height: 1;
letter-spacing: 4px;
margin: 0;
}
/* Блок «Призы» — голубая плашка с шеврон-паттерном, 3 приза в ряд */
.lk-info__prizes {
position: relative;
z-index: 2;
background: var(--color-blue);
border-radius: 24px;
padding: 36px 40px 44px;
margin-bottom: 60px;
overflow: hidden;
}
.lk-info__prizes::before {
content: '';
position: absolute;
right: -80px; /* большой сдвиг, чтобы tip'ы шевронов уходили за край без «среза» */
top: 0;
bottom: 0;
width: 360px;
background: url('../assets/images/lk-plate-chevrons.svg') right center / 100% 110% no-repeat;
pointer-events: none;
}
.lk-info__prizes-title {
position: relative;
z-index: 1;
font-family: var(--font-base);
font-weight: 900;
font-size: 32px;
line-height: 1.2;
color: var(--color-white);
text-align: center;
margin: 0 0 28px;
}
.lk-info__prizes-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.lk-info__prize {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.lk-info__prize-img {
width: 100%;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
}
.lk-info__prize-img img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.lk-info__prize-place {
font-family: var(--font-base);
font-weight: 700;
font-size: 20px;
line-height: 1.2;
color: var(--color-white);
margin: 0 0 4px;
}
.lk-info__prize-name {
font-family: var(--font-base);
font-weight: 400;
font-size: 16px;
line-height: 1.3;
color: var(--color-white);
margin: 0;
max-width: 220px;
}
/* Календарь */
.lk-info__cal-title {
position: relative;
z-index: 2;
font-family: var(--font-base);
font-weight: 900;
font-size: 40px;
line-height: 1.2;
color: var(--color-green-dark);
margin: 0 0 32px;
}
.lk-info__day {
position: relative;
z-index: 2;
margin-bottom: 32px;
}
.lk-info__day:last-of-type { margin-bottom: 0; }
.lk-info__date {
font-family: var(--font-base);
font-weight: 700;
font-size: 24px;
line-height: 1.2;
color: var(--color-text);
margin: 0 0 12px;
}
.lk-info__schedule {
list-style: none;
margin: 0;
padding: 0;
}
.lk-info__schedule li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px 0;
border-bottom: 1px solid #e0e0e0;
font-family: var(--font-base);
font-weight: 400;
font-size: 20px;
line-height: 1.2;
color: var(--color-text);
}
.lk-info__schedule li:last-child { border-bottom: 0; }
.lk-info__time {
font-weight: 700;
min-width: 98px;
text-align: end;
}
/* Mobile — по Figma node 4394:4402: один столбец, плашки на всю ширину, призы вертикально */
@media (max-width: 767px) {
.lk-info { padding: 24px 0; }
.lk-info__card { padding: 40px 20px 48px; border-radius: 24px; }
.lk-info__chev { display: none; }
.lk-info__logo { width: auto; height: 56px; margin-bottom: 20px; }
.lk-info__title { font-size: 20px; margin-bottom: 24px; }
.lk-info__donate-btn { display: flex; width: 100%; min-width: 0; font-size: 18px; height: 56px; margin-bottom: 20px; }
/* Плашки в один столбец */
.lk-info__plates { grid-template-columns: 1fr; gap: 20px; margin-bottom: 20px; }
.lk-info__place { min-height: 0; padding: 30px; align-items: flex-start; text-align: left; }
.lk-info__place-label { font-size: 22px; }
.lk-info__place-num { font-size: 80px; margin: 6px 0; }
.lk-info__place-hint { font-size: 16px; }
.lk-info__route { min-height: 0; padding: 30px; align-items: flex-start; text-align: left; }
.lk-info__route-label { font-size: 22px; margin-bottom: 20px; }
.lk-info__route-stats { gap: 20px; margin-bottom: 20px; }
.lk-info__route-num { font-size: 44px; }
.lk-info__route-unit { font-size: 18px; }
.lk-info__route-btn { width: 100%; min-width: 0; height: 52px; font-size: 16px; }
/* Номер участника */
.lk-info__ticket { padding: 30px; margin-bottom: 20px; text-align: left; }
.lk-info__ticket-label { font-size: 22px; }
.lk-info__ticket-num { font-size: 72px; }
/* Призы — в один столбец */
.lk-info__prizes { padding: 30px 24px; margin-bottom: 40px; }
.lk-info__prizes-title { font-size: 24px; margin-bottom: 20px; }
.lk-info__prizes-grid { grid-template-columns: 1fr; gap: 28px; }
.lk-info__prize-name { max-width: 240px; }
/* Календарь */
.lk-info__cal-title { font-size: 28px; }
.lk-info__schedule li { font-size: 16px; padding: 14px 0; }
}
/* ============================================================
ROUTE-DETAIL «Маршрут» (Figma 4022:1256)
Карточка 1120×633: слева описание + кнопка, справа схема маршрута с пинами
============================================================ */
.route-detail {
background: var(--color-light-green);
padding: 72px 0;
min-height: calc(100vh - 113px);
}
.route-detail__card {
display: grid;
grid-template-columns: 570px 1fr;
background: var(--color-white);
border-radius: 40px;
min-height: 633px;
overflow: hidden;
}
/* Левая часть — описание + кнопка */
.route-detail__info {
padding: 58px 95px 60px;
display: flex;
flex-direction: column;
}
.route-detail__title {
font-family: var(--font-base);
font-weight: 900;
font-size: 50px;
line-height: 1.2;
color: var(--color-green-dark);
margin: 0 0 32px;
}
.route-detail__desc {
font-family: var(--font-base);
font-weight: 400;
font-size: 24px;
line-height: 1.2;
color: var(--color-text);
margin: 0 0 60px;
max-width: 360px;
}
.route-detail__cta {
display: inline-flex;
align-items: center;
justify-content: center;
width: 360px;
height: 70px;
margin-top: auto;
padding: 0;
border-radius: 35px;
background: var(--color-red);
color: var(--color-white);
font-family: var(--font-base);
font-weight: 600;
font-size: 24px;
line-height: 1.2;
text-decoration: none;
transition: background .15s ease;
}
.route-detail__cta:hover { background: #cf1d1c; }
/* Правая часть — карта-схема с пинами и пунктирной линией */
.route-detail__map {
position: relative;
}
.route-detail__line {
position: absolute;
/* Figma Vector 66 на x=742, y=383 от страницы; от правой части (x=650): x_local=92, y_local=198 */
left: 92px;
top: 198px;
width: 353px;
height: 339px;
background: url('../assets/images/route-line.svg') center / contain no-repeat;
pointer-events: none;
}
.route-detail__pin {
position: absolute;
display: flex;
align-items: center;
gap: 14px;
}
.route-detail__pin-mark {
display: block;
width: 79px;
height: 120px;
background: url('../assets/images/route-pin.svg') center / contain no-repeat;
flex-shrink: 0;
}
.route-detail__pin-label {
font-family: var(--font-base);
font-weight: 700;
font-size: 30px;
line-height: 1.2;
color: var(--color-text);
}
/* Старт: pin на x=720, y=235 от страницы → x_local=70, y_local=50 от правой части */
.route-detail__pin--start {
left: 70px;
top: 50px;
}
/* Финиш: pin на x=1046, y=570 → x_local=396, y_local=385 от правой части (правее, ниже) */
.route-detail__pin--finish {
left: 396px;
top: 385px;
/* Текст с правой стороны от пина — стандартный порядок: pin → label */
}
/* Mobile */
@media (max-width: 767px) {
.route-detail { padding: 32px 0; }
.route-detail__card {
grid-template-columns: 1fr;
min-height: 0;
border-radius: 24px;
}
.route-detail__info { padding: 32px 24px; }
.route-detail__title { font-size: 32px; margin-bottom: 24px; }
.route-detail__desc { font-size: 18px; margin-bottom: 32px; }
.route-detail__cta { width: 100%; }
.route-detail__map {
height: 360px;
padding: 20px;
}
.route-detail__pin-mark { width: 60px; height: 90px; }
.route-detail__pin-label { font-size: 24px; }
.route-detail__line { width: 240px; height: 220px; left: 60px; top: 100px; }
.route-detail__pin--start { left: 30px; top: 30px; }
.route-detail__pin--finish { left: 220px; top: 220px; }
}
/* ============================================================
COOKIE BANNER (фиксированное окно внизу экрана)
============================================================ */
.cookie-banner {
position: fixed;
left: 50%;
bottom: 24px;
transform: translateX(-50%);
width: min(1032px, calc(100vw - 48px));
background: var(--color-green); /* #00923a — пятёрочка зелёный */
border-radius: 20px;
padding: 56px 80px 60px;
color: var(--color-white);
z-index: 1000;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
overflow: hidden;
animation: cookie-banner-in .35s ease-out;
}
.cookie-banner[hidden] { display: none; }
/* Декоративные шевроны справа (если есть SVG) — лёгкий слой */
.cookie-banner::after {
content: '';
position: absolute;
right: -50px;
top: 50%;
transform: translateY(-50%);
width: 400px;
height: 460px;
background: url('../assets/images/route-chevrons.svg') right center / contain no-repeat;
opacity: 0.18;
pointer-events: none;
}
.cookie-banner__inner {
position: relative;
z-index: 1;
max-width: 848px;
}
.cookie-banner__text {
font-family: var(--font-base);
font-weight: 400;
font-size: 20px;
line-height: 1.2;
color: var(--color-white);
text-align: justify;
margin: 0 0 40px;
}
.cookie-banner__link {
color: var(--color-white);
text-decoration: underline;
}
.cookie-banner__link:hover {
opacity: 0.85;
}
.cookie-banner__btn {
display: block;
margin: 0 auto;
width: 307px;
height: 69px;
padding: 0;
border: 0;
border-radius: 46px;
background: var(--color-red);
color: var(--color-white);
font-family: var(--font-base);
font-weight: 600;
font-size: 24px;
line-height: 1.2;
cursor: pointer;
transition: background .15s ease;
}
.cookie-banner__btn:hover { background: #cf1d1c; }
@keyframes cookie-banner-in {
from { transform: translate(-50%, 30px); opacity: 0; }
to { transform: translate(-50%, 0); opacity: 1; }
}
@media (max-width: 767px) {
.cookie-banner {
bottom: 12px;
width: calc(100vw - 24px);
padding: 20px 16px 22px;
border-radius: 16px;
}
.cookie-banner::after { display: none; }
.cookie-banner__inner { max-width: none; }
.cookie-banner__text { font-size: 13px; line-height: 1.35; margin-bottom: 16px; text-align: left; }
.cookie-banner__btn { width: 100%; height: 52px; font-size: 16px; }
}
/* ============================================================
QUESTION MODAL — форма «Задать вопрос» (Figma 6010:4830)
Появляется по клику на кнопки [data-question-open], уходит почтой на cycling-5ka@trace-group.ru
============================================================ */
.question-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.question-modal[hidden] { display: none; }
.question-modal__overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.45);
}
.question-modal__card {
position: relative;
z-index: 1;
width: 100%;
max-width: 440px;
max-height: 90vh;
overflow-y: auto;
background: var(--color-white);
border-radius: 40px;
padding: 49px 35px 40px;
animation: question-modal-in .25s ease-out;
}
@keyframes question-modal-in {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.question-modal__close {
position: absolute;
top: 18px;
right: 24px;
width: 32px;
height: 32px;
padding: 0;
border: 0;
background: transparent;
font-size: 28px;
line-height: 1;
color: var(--color-text);
cursor: pointer;
opacity: .5;
transition: opacity .15s ease;
}
.question-modal__close:hover { opacity: 1; }
.question-modal__title {
font-family: var(--font-base);
font-weight: 900;
font-size: 30px;
line-height: 1.2;
color: var(--color-green);
text-align: center;
margin: 0 0 32px;
}
.question-modal__form {
display: flex;
flex-direction: column;
gap: 22px;
}
.question-modal__field {
display: flex;
flex-direction: column;
cursor: text;
}
.question-modal__label {
font-family: var(--font-base);
font-weight: 400;
font-size: 14px;
line-height: 1.2;
color: var(--color-text);
margin-bottom: 6px;
}
.question-modal__hint {
font-size: 12px;
opacity: .65;
}
.question-modal__input {
border: 0;
border-bottom: 1.5px solid var(--color-green);
background: transparent;
font-family: var(--font-base);
font-weight: 700;
font-size: 22px;
line-height: 1.2;
color: var(--color-text);
padding: 4px 0 8px;
outline: none;
}
.question-modal__input::placeholder {
color: var(--color-text);
opacity: 1;
font-weight: 700;
}
.question-modal__input:focus { border-bottom-color: var(--color-green-dark); }
.question-modal__field--textarea { margin-top: 6px; }
.question-modal__textarea {
border: 2px solid var(--color-green-dark);
border-radius: 6px;
background: transparent;
font-family: var(--font-base);
font-weight: 400;
font-size: 16px;
line-height: 1.4;
color: var(--color-text);
padding: 14px;
resize: vertical;
min-height: 180px;
outline: none;
}
.question-modal__textarea:focus { border-color: var(--color-green); }
.question-modal__actions {
display: flex;
justify-content: center;
margin-top: 8px;
}
.question-modal__submit {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 170px;
height: 60px;
padding: 0 36px;
border: 0;
border-radius: 35px;
background: var(--color-green-dark);
color: var(--color-white);
font-family: var(--font-base);
font-weight: 700;
font-size: 22px;
cursor: pointer;
transition: background .15s ease;
}
.question-modal__submit:hover { background: #015521; }
.question-modal__submit:disabled { opacity: .6; cursor: not-allowed; }
.question-modal__status {
text-align: center;
font-family: var(--font-base);
font-size: 14px;
line-height: 1.3;
margin: 0;
white-space: pre-wrap;
}
.question-modal__status--success { color: var(--color-green-dark); }
.question-modal__status--error { color: var(--color-red); }
@media (max-width: 767px) {
.question-modal { padding: 16px; }
.question-modal__card { padding: 36px 24px 28px; border-radius: 24px; }
.question-modal__title { font-size: 26px; margin-bottom: 24px; }
.question-modal__input { font-size: 18px; }
.question-modal__submit { width: 100%; min-width: 0; height: 56px; font-size: 18px; }
}