/* ========================================
New Design: Top Bar + Header + Footer
Extracted from new_main_page.html
======================================== */
/* В main.css объявлены только Regular и RegularIt, хотя файлы остальных
начертаний лежат в fonts/ProximaNova/. Без этих @font-face любой
font-weight отличный от 400 подменялся системным шрифтом.
Файла Medium (500) в теме нет — 500 отрисуется как Regular. */
@font-face {
font-family: 'ProximaNova';
src: url('../fonts/ProximaNova/ProximaNova-Light.woff') format('woff'),
url('../fonts/ProximaNova/ProximaNova-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'ProximaNova';
src: url('../fonts/ProximaNova/ProximaNova-Semibold.woff') format('woff'),
url('../fonts/ProximaNova/ProximaNova-Semibold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'ProximaNova';
src: url('../fonts/ProximaNova/ProximaNova-Bold.woff') format('woff'),
url('../fonts/ProximaNova/ProximaNova-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'ProximaNova';
src: url('../fonts/ProximaNova/ProximaNova-Extrabld.woff') format('woff'),
url('../fonts/ProximaNova/ProximaNova-Extrabld.ttf') format('truetype');
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'ProximaNova';
src: url('../fonts/ProximaNova/ProximaNova-Black.woff') format('woff'),
url('../fonts/ProximaNova/ProximaNova-Black.ttf') format('truetype');
font-weight: 900;
font-style: normal;
font-display: swap;
}
/* --- Reset & Variables --- */
:root {
--bg-dark: #1a252f;
--bg-hover: #2c3e50;
--bg-light: #ffffff;
--text-light: #ecf0f1;
--text-dark: #2c3e50;
--accent: #27ae60;
--border: #e1e8ed;
--shadow: 0 6px 16px rgba(0,0,0,0.15);
}
/* Светлый текст на тёмном фоне macOS рендерит субпиксельным сглаживанием —
штрихи получаются заметно толще, чем в Figma. Переводим на grayscale.
font-synthesis: none запрещает браузеру «дорисовывать» жир, если
нужного начертания нет (в теме отсутствует Medium 500). */
.new-header,
.new-footer,
.level-2,
.level-3,
.dropdown {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-synthesis: none;
}
/* Container — по макету Figma (фрейм 1440): контент 1284px */
.container {
max-width: 1316px;
margin: 0 auto;
padding: 0 16px;
box-sizing: border-box;
}
/* Значения выгружены из Figma (Main Menu, node 887:18846).
BACKGROUND_BLUR radius=150 в Figma соответствует blur(75px) в CSS. */
:root {
--glass-bg: rgba(51, 51, 51, 0.35);
--glass-blur: blur(75px);
--glass-radius: 16px;
--glass-border: rgba(255, 255, 255, 0.35);
--menu-accent: #8DC640; /* салатовый — активный пункт */
--menu-divider: rgba(255, 255, 255, 0.45);
--menu-panel: #333333; /* фон выпадающих панелей — цвет стекла, но плотный */
--menu-panel-hover: rgba(255, 255, 255, 0.1);
--menu-font: 'ProximaNova', system-ui, -apple-system, sans-serif;
}
/* ========================================
HEADER
======================================== */
/* Нижний отступ = 32 (зазор до карточки карты по макету) + 187 (на столько
фотография продолжается под карточкой: в макете фото 719, карточка на 532).
Так карточка всегда отстоит от hero на 32 независимо от того, в сколько
строк лёг заголовок — раньше она поднималась на фиксированные -267 и на
средней ширине наезжала на подзаголовок.
min-height не задаём по той же причине: он бы «оторвал» низ шапки от
контента и зазор снова стал бы плавающим. */
.new-header {
background-image: url('../new-design-images/header-kz-bg.webp');
background-size: cover;
background-color: #2B3A1E;
background-color: #2B3A1E;
background-repeat: no-repeat;
background-position: center;
padding: 20px 0 219px;
position: relative;
}
/* Ниже 812 карточка карты скрыта (.vc_hidden-xs в main.css), запас под неё
в шапке не нужен */
@media (max-width: 812px) {
.new-header {
padding-bottom: 40px;
}
}
.new-header.no-hero {
height: auto;
min-height: 0;
padding: 20px 0;
}
/* Regional page: wrapper takes over background; strip header bg.
padding-bottom убран: hero региона идёт следующим блоком и сам держит
макетные 66 от меню — иначе к ним прибавлялись бы эти 20. */
.regional-hero-wrapper .new-header.no-hero {
background-image: none;
background-color: transparent;
padding-bottom: 0;
}
/* z-index обязателен: hero идёт следующим в потоке и без этого перекрывает
выпадающие панели, которые «висят» ниже капсулы. Значение 1000 — чтобы
панели были и над обёрткой контента .fixed_wrap.fixed (main.css, z-index
999): на внутренних страницах шапка низкая (no-hero), панель выходит за
её пределы и попадала под контент.
Поднимаем именно .header-top, а не .new-header: карточка карты на главной
заходит на шапку (top: -324px в main.css) и должна лежать поверх её
фотографии, оставаясь при этом под выпадающими панелями. */
.header-top {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
color: white;
position: relative;
z-index: 1000;
}
.header-logo {
width: auto;
flex-shrink: 0;
}
/* Логотип в макете 204x62. :not() обязателен — иначе display: block
перебивает .logo-mobile { display: none } по специфичности. */
.header-logo img:not(.logo-mobile) {
height: 62px;
width: auto;
display: block;
}
.logo-mobile {
display: none;
}
.new-logo span {
color: #fff;
}
/* Капсула меню — тёмное стекло. Figma: 62h, r16, pad 16, gap 8 */
.nav-menu {
display: flex;
align-items: center;
gap: 8px;
background: var(--glass-bg);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
padding: 0 16px;
border-radius: var(--glass-radius);
height: 62px;
box-sizing: border-box;
}
.nav-menu > * {
flex-shrink: 0;
}
/* Пункт меню — Figma: 36h, r12, pad 8, шрифт 20/20 w500 */
.nav-menu a,
.menu-section,
.new-sub-menu {
color: white;
text-decoration: none;
padding: 8px 8px 8px 4px;
border-radius: 12px;
transition: background 0.3s, color 0.3s;
font-family: var(--menu-font);
font-size: 20px;
line-height: 20px;
font-weight: 500;
white-space: nowrap;
}
/* Пункт верхнего уровня подсвечивается цветом текста, а не фоном */
.nav-menu > a:hover:not(.new-active),
.nav-menu .nav-link:hover,
.nav-item:hover > .nav-link {
background: none;
color: var(--menu-accent);
}
/* Кнопка «Приложение» — Figma: 48h, r12, pad 8, gap 8, рамка #FFF@0.35 1px.
Свой backdrop-filter не ставим: он бы блюрил уже заблюренный фон родителя. */
.nav-menu a.new-active {
display: flex;
align-items: center;
gap: 8px;
height: 48px;
padding: 8px 8px 8px 4px;
border: 1px solid var(--glass-border);
border-radius: 12px;
background: none;
box-sizing: border-box;
}
/* color обязателен: без него на hover срабатывает общий a:hover темы и
подпись кнопки перекрашивается */
.nav-menu a.new-active:hover {
background: rgba(255,255,255,0.1);
color: #fff;
}
/* Иконка приложения — 32x32, скругление 8 */
.nav-menu a.new-active img {
width: 32px;
height: 32px;
border-radius: 8px;
display: block;
}
.nav-menu .new-sub-menu:hover {
background: rgba(255,255,255,0.2);
background: #1a1a1aa1;
}
.nav-menu .app-btn {
background: #4CAF50;
display: flex;
align-items: center;
gap: 5px;
}
/* Правый блок — одна капсула. Figma: 62h, r16, pad 16, gap 8 */
/* gap 16 = по 8px с каждой стороны от разделителя (в Figma он нулевой ширины,
поэтому между «Россия» и «Войти» получается 8 + 8) */
.country-select {
display: inline-flex;
align-items: center;
flex-shrink: 0;
gap: 16px;
height: 62px;
padding: 0 16px;
border-radius: var(--glass-radius);
background: var(--glass-bg);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
box-sizing: border-box;
}
.country-btn {
position: relative;
background: none;
padding: 8px 8px 8px 4px;
border-radius: 12px;
cursor: pointer;
display: flex;
align-items: center;
gap: 4px;
font-family: var(--menu-font);
font-size: 20px;
line-height: 20px;
font-weight: 500;
transition: background 0.2s;
}
.country-btn:hover {
background: rgba(255,255,255,0.1);
}
.country-chevron {
display: block;
color: #fff;
transition: transform 0.2s;
}
/* Шеврон разворачивается, когда дропдаун открыт */
.country-btn:has(.dropdown.show) .country-chevron {
transform: rotate(180deg);
}
.login-btn {
position: relative;
display: flex;
align-items: center;
gap: 4px;
cursor: pointer;
background: none;
padding: 8px 8px 8px 4px;
border-radius: 12px;
font-family: var(--menu-font);
font-size: 20px;
line-height: 20px;
font-weight: 500;
transition: background 0.2s;
}
.login-btn:hover {
background: rgba(255,255,255,0.1);
}
/* Разделитель — Figma «Line 1»: 14px высотой, 1.5px, #FFF@0.45 */
.login-btn::before {
content: '';
position: absolute;
left: -8px;
top: 50%;
transform: translateY(-50%);
width: 1.5px;
height: 14px;
background: var(--menu-divider);
}
.login-btn > span:first-child {
display: flex;
align-items: center;
}
/* Иконка входа — 30x30 (подложка и скругление уже внутри SVG) */
.login-btn > span:first-child img {
height: 30px;
width: auto;
display: block;
}
/* Панель стран. В макете выровнена по левому краю капсулы (не по кнопке),
поэтому -16px — компенсация горизонтального padding капсулы.
17px сверху = 13px (пункт 36 по центру капсулы 62) + 4px зазор. */
.dropdown {
position: absolute;
top: calc(100% + 17px);
left: -16px;
right: auto;
width: 138px;
display: none;
z-index: 1000;
}
.dropdown.show {
display: flex;
flex-direction: column;
gap: 4px;
}
/* Оформление пунктов панели стран — ниже, вместе с .level-2 / .level-3 */
/* Hero section (inside header) */
/* Отступы из макета считаем не от верха страницы, а между блоками — в макете
выше шапки есть топ-бар (40px), которого у нас нет, и абсолютные координаты
поехали бы. По макету: низ меню 134 → Content-frame 200, то есть 66. */
.hero {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
color: white;
padding: 66px 20px 0px 20px;
line-height: normal;
}
/* Из макета: Buttons -> Text container gap 66, между кнопками 16 */
.hero-buttons {
display: flex;
gap: 16px;
justify-content: center;
margin-bottom: 66px;
flex-wrap: nowrap;
align-items: center;
}
/* Кнопки hero (Figma, Button_Floor_Lamp): 176x70, padding 14, gap 8,
скругление 16, то же стекло, что у капсул меню. Размеры фиксированные —
в макете обе кнопки одинаковые, различаются только цветом рамки и иконки.
Разметка одна и та же в header.php (главная) и reg_rf_new.php (регионы). */
}
/* gov-kz button — same glass bg, no colored border */
.gov-kz-btn {
border: 1px solid #29AAE2;
}
.hero-btn {
box-sizing: border-box;
display: flex;
align-items: center;
gap: 8px;
width: 176px;
height: 70px;
padding: 14px;
border-radius: 16px;
background: rgba(51, 51, 51, 0.35);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
text-decoration: none;
text-align: left;
flex-shrink: 0;
transition: transform 0.2s;
}
.hero-btn:hover {
transform: translateY(-2px);
}
.hero-btn.new-blue { border: 1px solid #29AAE2; }
.hero-btn.new-red { border: 1px solid #FF84A0; }
/* Иконка — 40x40 кружок */
.hero-btn > span,
.hero-btn > span svg {
flex: none;
display: block;
width: 40px;
height: 40px;
}
/* Текстовый блок 100px по центру высоты */
.hero-btn > div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
flex: 1 1 auto;
min-width: 0;
}
/* Заголовок 14/14 600 белый; подпись 14/18 500 серая.
Цвета заданы явно: иначе small внутри ссылки перекрашивается
правилами темы. */
.hero-btn > div > div {
font-family: var(--menu-font);
font-size: 14px;
line-height: 14px;
font-weight: 600;
letter-spacing: -0.08px;
color: #FFFFFF;
}
/* В макете подпись #4D4D4E, но слой там идёт в режиме plus-lighter и
складывается с фоном — читается светло-серой (в экспорте ~#59626 6).
Наложение убрано намеренно: результат plus-lighter зависит от того, что
под кнопкой, а фотография на главной и на региональных страницах разная,
и подпись меняла бы яркость. Вместо этого фиксированный светлый серый —
он читается одинаково на любом фоне. */
.hero-btn small {
font-family: var(--menu-font);
font-size: 14px;
line-height: 18px;
font-weight: 500;
letter-spacing: -0.08px;
color: #9BA1A5;
}
/* Макет: H1 56/56, ниже подзаголовок через gap 20.
!important на margin и font-weight — в main.css (165) у h1 они с !important
(15px и 700), обычным правилом их не перебить. */
.hero h1 {
align-self: stretch;
text-align: center;
color: white;
font-size: 56px;
font-family: var(--menu-font);
font-weight: 500 !important;
word-wrap: break-word;
line-height: 56px;
margin: 0 0 20px !important;
}
.spisokKart {
color: #75BF19!important;
}
.hero .subtitle {
font-size: 20px;
color: #90EE90;
align-self: stretch;
text-align: center;
color: #75BF19;
font-size: 32px;
font-family: var(--menu-font);
font-weight: 500;
word-wrap: break-word;
}
/* ========================================
NAVIGATION DROPDOWNS (Level 2 & 3)
======================================== */
.nav-list {
display: flex;
gap: 4px;
list-style: none;
margin: 0;
padding: 0;
}
.nav-item {
position: relative;
}
.nav-link {
display: flex;
align-items: center;
gap: 4px;
padding: 8px 8px 8px 4px;
color: #fff;
font-weight: 500;
transition: background 0.2s, color 0.2s;
}
.nav-item.new-active > .nav-link {
background: none;
color: var(--menu-accent);
}
/* По макету маркеров-стрелок нет ни у пунктов верхнего уровня,
ни у пунктов ФО — вложенность читается по самому выпадению */
/* Выпадающие панели — Figma «Menu_open»: r16, padding 4, gap 4.
Фон плотный, а не полупрозрачный: панели лежат внутри .nav-menu,
у которой уже есть backdrop-filter, а вложенный backdrop-filter
размывает не страницу, а фон родительского слоя — то есть ничего.
Поэтому берём цвет, в который стекло капсулы складывается визуально. */
.level-2,
.level-3,
.dropdown {
background: var(--menu-panel);
border-radius: 16px;
padding: 4px;
box-shadow: none;
list-style: none;
margin: 0;
}
/* Панель ФО. Смещение -4px выравнивает текст пункта панели
с текстом родительского пункта меню (у обоих padding 8). */
.level-2 {
display: none;
position: absolute;
top: calc(100% + 17px);
left: -4px;
width: max-content;
flex-direction: column;
gap: 4px;
z-index: 1002;
}
.nav-item:hover > .level-2,
.nav-item.new-active > .level-2 {
display: flex;
}
/* Мост через зазор в 17px: без него мышь по пути от пункта к панели
попадает в пустоту, :hover слетает и панель закрывается.
Псевдоэлемент — часть .level-2, значит .nav-item:hover остаётся активным. */
.level-2::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: -17px;
height: 17px;
}
.level-2 li {
position: relative;
}
/* Пункт панели — те же 36h / r12 / pad 8 / шрифт 20, что и в меню */
.nav-menu .sub-link,
.nav-menu .level-3 li a,
.dropdown a {
display: block;
width: max-content;
padding: 8px 8px 8px 4px;
border-radius: 12px;
font-family: var(--menu-font);
font-size: 20px;
line-height: 20px;
font-weight: 500;
color: #fff;
text-decoration: none;
transition: color 0.15s;
white-space: nowrap;
}
/* Подсветка пункта — приглушение текста, без плашки */
.nav-menu .sub-link:hover,
.sub-menu-item:hover > .sub-link,
.sub-menu-item_:hover > .sub-link,
.nav-menu .level-3 li a:hover,
.dropdown a:hover {
background: none;
color: #B2B2B2;
}
/* Панель регионов — отдельная капсула, зазор 4px от панели ФО.
8px = 4px padding панели ФО + 4px зазор между панелями. */
.level-3 {
display: none;
position: absolute;
top: -4px;
left: calc(100% + 8px);
width: max-content;
max-height: 80vh;
overflow-y: auto;
flex-direction: column;
gap: 4px;
z-index: 1003;
}
.sub-menu-item:hover > .level-3,
.sub-menu-item_:hover > .level-3 {
display: flex;
}
/* Мост до панели регионов вешаем на сам пункт, а не на .level-3:
у панели есть overflow-y для скролла, и он обрезал бы псевдоэлемент,
торчащий за её левый край. Показываем только на hover, чтобы
невидимая полоса не ловила курсор просто так. */
.sub-menu-item::after,
.sub-menu-item_::after {
content: '';
position: absolute;
left: 100%;
top: 0;
width: 8px;
height: 100%;
display: none;
}
.sub-menu-item:hover::after,
.sub-menu-item_:hover::after {
display: block;
}
/* Hover dropdown visibility */
.nav-item:hover > .level-2,
.nav-item.new-active > .level-2 {
display: block;
animation: fadeSlide 0.2s ease;
}
.sub-menu-item:hover > .level-3,
.sub-menu-item.new-active > .level-3 {
display: block;
animation: fadeSlideRight 0.2s ease;
}
@keyframes fadeSlide {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeSlideRight {
from { opacity: 0; transform: translateX(-4px); }
to { opacity: 1; transform: translateX(0); }
}
/* Auth button */
.auth-btn {
margin-left: 15px;
padding: 8px 16px;
border: 1px solid rgba(255,255,255,0.3);
color: var(--text-light);
border-radius: 4px;
font-size: 14px;
transition: 0.2s;
text-decoration: none;
}
.auth-btn:hover {
background: rgba(255,255,255,0.1);
border-color: #fff;
}
/* ========================================
FOOTER
======================================== */
/* Значения из макета Figma (фрейм футера 1920x768):
фон #00252D, весь текст Proxima Nova 400 16/20, отступы от краёв 40px. */
.new-footer {
background: #00252D;
color: #F2F2F2;
/* Нижний отступ равен высоте пейзажа (349/1920 ширины). Он тянется
вместе с окном, поэтому текст не наезжает на птицу и деревья
ни на узких экранах, ни на широких. */
padding: 54px 40px 18.2vw;
min-height: 768px;
position: relative;
overflow: hidden;
font-family: var(--menu-font);
font-size: 16px;
line-height: 20px;
font-weight: 400;
box-sizing: border-box;
}
/* Логотип и колонки стоят на одной линии (top 54). Левый блок прижат
влево, четыре колонки — вправо, между ними по 56px. */
.footer-content {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 56px;
position: relative;
z-index: 10;
}
.footer-column {
flex: 0 0 auto;
}
/* Блок с логотипом занимает всё свободное место слева */
.footer-column:first-child {
margin-right: auto;
}
/* Ширины колонок из макета */
.footer-column:nth-child(2) { width: 118px; } /* Приложение */
.footer-column:nth-child(3) { width: 186px; } /* Карты угодий */
.footer-column:nth-child(4) { width: 167px; } /* Сроки охоты / Охотнику / О нас */
.footer-column:nth-child(5) { width: 122px; } /* Страны / Личный кабинет */
/* Группы внутри колонки. Зазоры между ними в макете разные */
.footer-column:nth-child(4),
.footer-column:nth-child(5) {
display: flex;
flex-direction: column;
}
.footer-column:nth-child(4) { gap: 27px; }
.footer-column:nth-child(5) { gap: 52px; }
.footer-group h4 {
margin-bottom: 12px;
}
/* У «Сроков охоты» нет вложенного списка — убираем отступ под заголовком */
.footer-group h4:only-child {
margin-bottom: 0;
}
.footer-group h4 a {
color: inherit;
text-decoration: none;
}
.footer-group h4 a:hover {
color: var(--menu-accent);
}
/* Цвет группы «Личный кабинет» задаётся общими правилами выше:
заголовок белый, пункты #B2B2B2 */
/* Логотип 205x62, под ним подпись 18px в верхнем регистре */
.new-footer-logo img {
display: block;
height: 62px;
width: auto;
}
.new-footer-logo span {
display: block;
margin-top: 13px;
font-size: 18px;
line-height: 20px;
text-transform: uppercase;
color: #B2B2B2;
}
.age-rating {
width: 46px;
height: 46px;
border: 1px solid #ffffff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 18px 0 0;
font-size: 16px;
line-height: 20px;
}
/* Иконки соцсетей — 36x36 без подложки, зазор 12 */
.social-icons {
display: flex;
gap: 12px;
margin-top: 54px;
}
.social-icon {
width: 36px;
height: 36px;
background: none;
border-radius: 0;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.social-icon svg {
display: block;
width: 36px;
height: 36px;
}
.social-icon:hover svg path {
fill: var(--menu-accent);
transition: fill 0.3s;
}
/* Заголовок и пункты одного кегля, различаются цветом:
заголовок белый, пункты приглушены до #B2B2B2 */
/* text-align обязателен: в main.css есть глобальное
h1..h6 { text-align: center }, из-за него заголовки колонок
выравнивались по центру, а ссылки под ними — по левому краю */
.footer-column h4 {
text-align: left;
font-size: 16px;
line-height: 20px;
font-weight: 400;
margin: 0 0 12px;
color: #FFFFFF;
}
.footer-column ul {
list-style: none;
margin: 0;
padding: 0;
}
/* Размер закреплён явно на всех текстовых узлах колонки: тема задаёт
свои font-size для li и p, и они перебивали наследование от .new-footer */
.footer-column li,
.footer-column p,
.footer-column div {
font-size: 16px;
line-height: 20px;
}
.footer-column li {
margin-bottom: 12px;
}
.footer-column a {
color: #B2B2B2;
text-decoration: none;
font-size: 16px;
line-height: 20px;
transition: color 0.3s;
}
.footer-column a:hover {
color: var(--menu-accent);
}
/* Кнопки магазинов 118x35 с зазором 11 */
.footer-column .store-links li {
margin-bottom: 11px;
}
.footer-column .store-links img {
display: block;
width: 118px;
height: 35px;
}
/* 11px — предел, при котором «Поддержка приложения:» ещё умещается
в колонку шириной 118px одной строкой */
.footer-support {
margin-top: 16px;
font-size: 11px;
line-height: 15px;
color: #F2F2F2;
}
/* Почта того же кегля, что и подпись над ней: без этого ссылка
наследовала 16px от .footer-column a и была заметно крупнее.
Зелёная всегда, а не только под курсором. */
.footer-support a {
font-size: inherit;
line-height: inherit;
color: var(--menu-accent);
}
/* Разделитель — сплошная линия #B2B2B2, а не полупрозрачная белая */
.new-footer-bottom {
border-top: 1px solid #B2B2B2;
margin-top: 16px;
padding-top: 25px;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 40px;
position: relative;
z-index: 10;
font-size: 16px;
line-height: 20px;
color: #B2B2B2;
}
.new-footer-bottom ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.new-footer-bottom a {
color: #B2B2B2;
text-decoration: none;
transition: color 0.3s;
}
.new-footer-bottom a:hover {
color: var(--menu-accent);
}
.footer-legal {
width: 432px;
}
/* Свидетельство СМИ — мелкий текст пониженной контрастности */
.footer-license {
margin-top: 10px;
font-size: 12px;
line-height: 13px;
color: rgba(242, 242, 242, 0.6);
}
.footer-contacts {
width: 360px;
text-align: right;
display: flex;
flex-direction: column;
gap: 16px;
}
/* Почта зелёная всегда, а не только под курсором.
Юридические ссылки слева остаются серыми. */
.footer-contacts a {
color: var(--menu-accent);
}
.footer-contacts p {
margin: 0;
}
/* Высота пропорциональна ширине (макет 1920x349). При фиксированных 349px
и background-size: cover картинка на узких экранах увеличивалась, чтобы
заполнить блок, — птица и деревья наезжали на текст. */
.footer-decor {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 18.2vw;
background: url('../new-design-images/image-footer.svg') no-repeat bottom center;
background-size: 100% 100%;
pointer-events: none;
}
/* ========================================
HAMBURGER MENU (Mobile)
======================================== */
/* Figma «Menu-left» (мобильный фрейм 375): 41x40, r16, то же стекло,
что у капсул, внутри иконка 24x24. Никакой рамки и своей заливки. */
.mobile-menu-toggle {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 41px;
height: 40px;
background: var(--glass-bg);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
border: none;
border-radius: 16px;
cursor: pointer;
padding: 8px 8px 8px 4px;
box-sizing: border-box;
transition: background 0.2s;
z-index: 1001;
}
.mobile-menu-toggle:hover {
background: rgba(51, 51, 51, 0.55);
}
.mobile-menu-toggle .hamburger-line {
display: block;
width: 18px;
height: 2px;
background: white;
border-radius: 2px;
transition: all 0.3s ease;
}
/* Hamburger → X animation. Сдвиг = высота линии (2) + gap (5) */
.mobile-menu-toggle.new-active .hamburger-line:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.mobile-menu-toggle.new-active .hamburger-line:nth-child(2) {
opacity: 0;
}
.mobile-menu-toggle.new-active .hamburger-line:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* ========================================
RESPONSIVE ADAPTATIONS
======================================== */
/* Логотип: полный (204x62) только на 1440+. Ниже макет заменяет его
компактной иконкой — на 1280 это 94x44, на 812 и уже 67x32. */
@media (max-width: 1439px) {
.header-logo img:not(.logo-mobile) {
display: none;
}
.header-logo .logo-mobile {
display: block;
height: 44px;
width: auto;
}
}
/* Размеры шапки фиксированы по макету и НЕ масштабируются от ширины окна.
Горизонтальному меню нужно 1201px (макет 1280); когда столько нет —
шапка переключается на компактный вид с гамбургером (макет 812). */
@media (max-width: 1279px) {
/* Логотип прижат влево, к гамбургеру; капсула справа */
.header-top {
justify-content: flex-start;
gap: 8px;
}
/* Шапка тут ниже (логотип 44px вместо капсулы 62), десктопные 118px
от макета дали бы слишком большой провал. Значение подобрано, в
мобильном макете этот отступ не размечен. */
.hero {
padding-top: 60px;
}
.header-logo .logo-mobile {
height: 32px;
}
.country-select {
margin-left: auto;
}
.header-top {
position: relative;
}
.mobile-menu-toggle {
display: flex;
position: relative;
z-index: 20;
order: -1;
flex-shrink: 0;
}
.nav-menu {
display: none;
flex-direction: column;
width: 100%;
flex-wrap: wrap;
height: auto;
justify-content: flex-start;
gap: 6px;
padding: 10px 0;
background: rgba(0,0,0,0.3);
-webkit-backdrop-filter: none;
backdrop-filter: none;
border-radius: 8px;
margin-top: 5px;
z-index: 1999;
align-items: flex-start;
}
/* Раскрытое меню — стеклянная панель с теми же свойствами, что у капсул
в вебе. Идёт от верха экрана и накрывает собой шапку: сама шапка
лежит выше по z-index, поэтому «висит» на этом стекле, а не на
фотографии. Высоту шапки считает JS — она зависит от брейкпоинта. */
.nav-menu.open {
display: flex;
/* nowrap обязателен: у fixed-меню высота ограничена, и при
column + wrap содержимое переносится во вторую колонку. */
flex-direction: column;
flex-wrap: nowrap;
/* по контенту, а не на всю ширину: в макете ButtonApp — 174px */
align-items: flex-start;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: auto;
background: rgba(51, 51, 51, 0.9);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
padding: calc(var(--menu-header-h, 56px) + 8px) 16px 16px;
border-radius: 0;
gap: 4px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
animation: slideDown 0.3s ease;
box-shadow: none;
margin-top: 0;
/* Внутри .header-top: стекло меню — самый нижний слой,
логотип и капсула лежат на нём */
z-index: 1;
}
.header-logo,
.country-select {
position: relative;
z-index: 10;
}
/* Пока меню раскрыто, страница под ним не скроллится — иначе колесо
прокручивает контент, спрятанный за стеклом */
body.hm-menu-open {
overflow: hidden;
}
/* Полоса с логотипом, крестиком и капсулой всегда сверху. Список меню
скроллится под ней, поэтому ей нужен собственный непрозрачный фон —
без него пункты просвечивают сквозь неё при прокрутке. */
.header-top.menu-open::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
height: var(--menu-header-h, 56px);
background: #333333;
z-index: 5;
}
/* При прокрутке длинного списка элементы не должны сжиматься по высоте */
.nav-menu.open > *,
.nav-menu.open li,
.nav-menu.open .level-2,
.nav-menu.open .level-3 {
flex-shrink: 0;
}
@keyframes slideDown {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
/* «Приложение» остаётся капсулой с рамкой, как в макете */
.nav-menu.open a.new-active {
width: auto;
height: 48px;
padding: 8px 8px 8px 4px;
border-radius: 12px;
}
/* Единый размер для всех уровней — Figma: 20px/20, w500, пункт 36h */
.nav-menu.open > a,
.nav-menu.open .nav-link,
.nav-menu.open .sub-link,
.nav-menu.open .level-3 li a {
color: #fff !important;
font-size: 20px;
line-height: 20px;
font-weight: 500;
padding: 8px 8px 8px 4px;
border-radius: 12px;
width: auto;
box-sizing: border-box;
display: flex;
align-items: center;
gap: 4px;
text-decoration: none;
white-space: normal;
}
/* Раскрытый пункт подсвечивается салатовым */
.nav-item.open > .nav-link,
.sub-menu-item.open > .sub-link,
.sub-menu-item_.open > .sub-link {
color: var(--menu-accent) !important;
}
.nav-menu.open .sub-link:hover,
.nav-menu.open .level-3 li a:hover,
.nav-menu.open .nav-link:hover {
color: var(--menu-accent) !important;
background: none;
}
/* Стрелка у пунктов с подменю — на десктопе её нет, здесь есть */
.nav-menu.open .has-dropdown::after,
.nav-menu.open .has-children::after {
content: '';
width: 20px;
height: 20px;
flex-shrink: 0;
position: static;
opacity: 1;
background: no-repeat center/12px 8px
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
transition: transform 0.2s;
}
.nav-item.open > .has-dropdown::after,
.sub-menu-item.open > .has-children::after,
.sub-menu-item_.open > .has-children::after {
transform: rotate(180deg);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%238DC640' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.nav-list {
flex-direction: column;
width: 100%;
gap: 4px;
}
.nav-item {
width: 100%;
}
.nav-link {
padding: 8px 8px 8px 4px;
justify-content: flex-start;
}
/* Панели встают в поток. Каждый вложенный уровень сдвигается на 16px,
как в макете (Main Menu → Frame 141 → Menu_open, у всех padding 0/16).
Фона у них нет — он общий, от полноэкранного меню. */
.nav-menu.open .nav-item > .level-2,
.nav-menu.open .sub-menu-item > .level-3,
.nav-menu.open .sub-menu-item_ > .level-3 {
background: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
box-shadow: none;
border-radius: 0;
width: auto;
max-height: none;
overflow: visible;
padding: 4px 0 4px 16px;
gap: 4px;
}
.nav-item > .level-2,
.sub-menu-item > .level-3 {
display: none;
position: static;
width: auto;
}
/* На тач-ширинах ховер-раскрытие отключаем — работает только тап */
.nav-item:hover > .level-2,
.sub-menu-item:hover > .level-3,
.sub-menu-item_:hover > .level-3 {
display: none;
}
.nav-item.open > .level-2,
.sub-menu-item.open > .level-3,
.sub-menu-item_.open > .level-3 {
display: flex;
flex-direction: column;
animation: slideDown 0.25s ease;
}
/* Мосты для ховера не нужны и мешают попадать по пунктам */
.level-2::before,
.sub-menu-item::after,
.sub-menu-item_::after {
display: none;
}
}
/* Ниже 1024 четыре колонки в ряд уже не помещаются, а перенос разносит
их по строкам с рваными зазорами. Поэтому списки разделов скрываем
сразу — они и так есть в меню. Остаются логотип и приложение. */
@media (max-width: 1024px) {
.footer-content {
flex-wrap: nowrap;
gap: 40px;
}
.footer-column:nth-child(3),
.footer-column:nth-child(4),
.footer-column:nth-child(5) {
display: none;
}
/* Нижние блоки встают друг под друга по левому краю и разделяются
такой же линией, как та, что отделяет их от колонок. Прижимать
контакты вправо здесь уже некуда — колонок справа нет. */
.new-footer-bottom {
flex-direction: column;
align-items: stretch;
gap: 0;
text-align: left;
}
.footer-legal,
.footer-contacts {
width: 100%;
text-align: left;
}
.footer-contacts {
border-top: 1px solid #B2B2B2;
margin-top: 25px;
padding-top: 25px;
align-items: flex-start;
}
}
@media (max-width: 768px) {
.container {
padding: 0 12px;
}
.new-header {
padding: 15px 0;
min-height: 370px;
}
.header-top {
flex-direction: row;
flex-wrap: wrap;
gap: 8px;
justify-content: flex-start;
align-items: center;
border-radius: 8px;
padding: 8px 12px;
position: relative;
}
.header-logo {
width: auto;
flex: 0 1 auto;
flex-shrink: 0;
}
/* Переключение логотипа — в @media 1439px, размер 32px — в @media 1279px.
Правила гамбургера — там же, в @media 1279px. */
/* Figma «Menu-right» (мобильный фрейм 375): 40h, r16, pad 2/8,
между кнопками те же 16px (8 + 8 вокруг разделителя) */
.country-select {
flex-shrink: 0;
flex-wrap: nowrap;
justify-content: flex-end;
gap: 16px;
margin-left: auto;
width: auto;
height: 40px;
padding: 2px 8px;
border-radius: 16px;
}
.country-btn,
.login-btn {
flex-shrink: 0;
justify-content: center;
min-width: auto;
}
/* Figma (812): «Россия» 92x36, отступы 8. Высота 8+20+8 = 36 */
.country-btn {
padding: 8px 8px 8px 4px;
font-size: 16px;
line-height: 20px;
flex: 0 0 auto;
}
/* Зазор от капсулы, как на десктопе. Здесь он меньше: капсула 40px,
кнопка 36px — под ней остаётся 2px, плюс 4px просвета. */
.country-btn .dropdown {
right: 0;
left: auto;
top: calc(100% + 6px);
min-width: 140px;
}
/* Figma (812): «Вход» 51x36, отступы 8, иконка 30x30 — как на десктопе */
.login-btn {
padding: 8px 8px 8px 4px;
font-size: 0;
flex: 0 0 auto;
}
/* Разделитель тех же размеров, что на десктопе: 14px, 1.5px */
.login-btn::before {
height: 14px;
}
.login-btn > span:first-child img {
height: 30px;
}
.login-btn span:last-child {
display: none;
}
.hero h1 {
font-size: 22px;
line-height: 1.3;
}
.hero .subtitle {
font-size: 16px;
}
.hero-buttons {
flex-direction: row;
align-items: center;
flex-wrap: nowrap;
gap: 10px;
}
/* Узкие экраны: кнопка ужимается, пропорции макета не держим —
иначе текст в 100px не помещается */
.hero-btn,
.hero-btn.new-blue,
.hero-btn.new-red {
width: 160px;
height: auto;
min-height: 56px;
padding: 10px;
gap: 6px;
}
.hero-btn > span,
.hero-btn > span svg {
width: 32px;
height: 32px;
}
/* Мобильный футер (макет 375): остаются только логотип и колонка
приложения, обе в одном ряду. Списки разделов скрыты — они
дублируют меню в гамбургере. */
.new-footer {
padding: 40px 16px 18.2vw;
min-height: 0;
}
.footer-content {
flex-wrap: nowrap;
gap: 24px;
align-items: flex-start;
}
.footer-column:first-child {
margin-right: 0;
flex: 1 1 auto;
}
.footer-column:nth-child(2) {
width: auto;
flex: 0 0 auto;
}
/* Раскладка нижних блоков задана в @media 1024 — здесь только
то, что специфично для узких экранов */
/* Show mobile search on mobile */
.mobile-search {
display: block;
}
/* Fix WPBakery red CTA button overflow — high specificity to override main.css */
.wpb_wrapper .mybtn_red_1,
.txt_center .mybtn_red_1 {
display: inline-block !important;
max-width: 100% !important;
box-sizing: border-box !important;
white-space: normal !important;
word-wrap: break-word !important;
width: auto !important;
}
}
/* Extra small devices — сюда ложится мобильный макет (Figma, фрейм 375,
Page-Main 446:9854). Замеры сняты с рендера макета в 2x. */
@media (max-width: 480px) {
.header-logo img {
max-height: 32px;
}
.new-header.no-hero {
padding: 15px 0;
}
}
/* ========================================
BLUE BUTTONS (Country Popup)
======================================== */
.blueButton {
background-color: rgb(37, 170, 225);
padding: 20px;
margin: 0 auto;
text-align: center;
text-transform: uppercase;
color: white;
width: 260px;
max-width: 100%;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
cursor: pointer;
border-radius: 12px;
font-weight: 600;
font-size: 15px;
transition: transform 0.2s, box-shadow 0.2s;
}
.blueButton:hover {
transform: translateY(-2px);
box-shadow: 0 18px 36px rgba(0, 0, 0, 0.3), 0 12px 12px rgba(0, 0, 0, 0.24);
}
.blueButtonGrey {
background-color: #666;
box-shadow: none;
cursor: default;
}
.blueButtonGrey:hover {
transform: none;
box-shadow: none;
}
/* ========================================
COUNTRY POPUP
======================================== */
.groupBtnCountry {
height: 60%;
align-items: center;
display: flex;
flex-direction: column;
justify-content: space-around;
gap: 16px;
padding: 20px 0;
}
.closePopupCountry {
position: absolute;
top: 10px;
right: 16px;
font-size: 24px;
cursor: pointer;
opacity: 0.7;
transition: opacity 0.2s;
}
.closePopupCountry:hover {
opacity: 1;
}
.close-btn {
cursor: pointer;
opacity: 0.6;
transition: opacity 0.2s;
}
.close-btn:hover {
opacity: 1;
}
/* ========================================
MAP SECTION & SHARE
======================================== */
.map-section-container {
width: 100%;
position: relative;
}
/* ========================================
MAP CARD (Figma redesign)
======================================== */
/* ========================================
РЕГИОНАЛЬНАЯ СТРАНИЦА (reg_rf_new.php)
Значения из макета «Брянская область»: кнопки top 200, заголовок 330,
карточки 418, карта 551 (1076x730, скругление 16), фон bgreg 958 —
то есть под картой он продолжается на 407.
======================================== */
/* Заголовок и погода в одну строку. Раньше погода шла отдельным блоком
под заголовком и раздвигала вёрстку, из-за чего заголовок ломался на
лишнюю строку, а карточки с картой уезжали вниз. */
.region-header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 42px;
max-width: 1298px;
margin: 0 auto;
}
/* Заголовок по содержимому, а не на всю строку: иначе он растягивался и
отталкивал погоду к правому краю. Предел 1130 — ширина Title в макете. */
.region-header h1 {
font-size: 50px;
line-height: 50px;
line-height: 54px;
flex: 0 1 auto;
min-width: 0;
max-width: 1130px;
margin: 0 !important;
text-align: center;
}
/* ВРЕМЕННО: виджет погоды скрыт по просьбе — вернуть, убрав display: none */
.region-header .region-weather-inline {
display: none;
flex: none;
font-size: 44px;
line-height: 44px;
font-weight: 500;
color: #fff;
white-space: nowrap;
}
.region-header .region-weather-inline img,
.region-header .region-weather-inline svg {
height: 58px;
width: auto;
vertical-align: middle;
}
/* Карточки навигации (Figma, About: 900x101, gap 32).
В main.css у них свои сплошные фоны (#2D3A28, #5A6359, #6B6F6A) и
grid-раскладка — здесь всё переопределяется на стекло с цветной рамкой,
как у кнопок hero. */
.region-cards-grid {
margin: 0 auto !important;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 32px;
width: 900px;
max-width: 900px;
padding: 0 !important;
}
.reg-card {
box-sizing: border-box;
display: flex !important;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 12px;
height: 101px;
padding: 14px 14px 17px !important;
border-radius: 16px;
background: rgba(51, 51, 51, 0.35) !important;
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
grid-column: auto !important;
grid-row: auto !important;
}
.card-hunt-when { width: 205px; border: 1px solid #29AAE2; }
.card-permits { width: 362px; border: 1px solid #B2B2B2; }
.card-hunt-where { width: 210px; border: 1px solid #8DC640; }
/* Подпись карточки — 18/18 600, приглушённая */
.reg-card .card-label {
font-family: var(--menu-font);
font-size: 18px !important;
line-height: 18px;
font-weight: 600 !important;
color: rgba(255, 255, 255, 0.6) !important;
margin-bottom: 0 !important;
}
.reg-card .card-body,
.reg-card .permits-row {
display: flex;
flex-direction: row;
align-items: center;
gap: 12px;
height: 40px;
justify-content: center;
}
.reg-card .card-icon,
.reg-card .card-icon svg {
width: 40px;
height: 40px;
flex: none;
}
.reg-card .card-text {
font-family: var(--menu-font);
font-size: 14px !important;
line-height: 14px;
font-weight: 600;
letter-spacing: -0.08px;
color: #FFFFFF;
padding: 0 2px;
}
/* Первый пункт в «Как получить разрешение?» идёт без рамки — это такой же
значок с подписью, как в соседних карточках */
.permits-row .permit-pill:first-child {
border: none;
background: none;
padding: 0;
gap: 12px;
/* размытие тоже снимаем: под прозрачной капсулой оно замыливает фон
и читается как та же скруглённая плашка, что у соседей */
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.permits-row .permit-pill:first-child .pill-icon,
.permits-row .permit-pill:first-child .pill-icon svg {
width: 40px;
height: 40px;
}
/* Подписи в этой карточке в макете двухстрочные (77x28 и 60x20),
поэтому ширина ограничена — иначе строка тянется и капсула вылезает
за пределы карточки */
.permits-row .permit-pill:first-child .pill-text {
font-size: 14px;
line-height: 14px;
font-weight: 600;
max-width: 80px;
}
/* Остальные — капсулы 40 высотой с рамкой и мелкой подписью */
.permits-row .permit-pill {
box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 4px;
height: 40px;
padding: 8px 8px 8px 4px;
border: 1px solid #B2B2B2;
border-radius: 16px;
background: rgba(51, 51, 51, 0.35);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
text-decoration: none;
}
.permits-row .pill-icon,
.permits-row .pill-icon svg {
width: 42px;
height: 24px;
flex: none;
}
/* Короткая подпись — показывается только в диапазоне 813–1279 */
.permits-row .pill-text-short {
display: none;
font-family: var(--menu-font);
font-size: 14px;
line-height: 14px;
font-weight: 600;
letter-spacing: -0.08px;
color: #FFFFFF;
white-space: nowrap;
}
.permits-row .pill-text {
font-family: var(--menu-font);
font-size: 12px;
line-height: 13px;
font-weight: 400;
letter-spacing: -0.08px;
color: #FFFFFF;
max-width: 88px;
white-space: normal;
}
/* Зазоры из макета: кнопки → заголовок 60, заголовок → карточки 30,
карточки → карта 32 */
.hero-region .hero-buttons {
margin-bottom: 60px;
}
.region-cards-grid {
margin: 0 auto !important;
margin-top: 30px !important;
}
/* Карта: скругление 16 из макета, размеры 1076x730.
Карта идёт в потоке с зазором 32 от карточек. Раньше она поднималась на
-375 при отступе 407 (визуально те же 32), но под ней оставалось 375px
пустого места в потоке: высота обёртки «плавала», из-за чего не держались
отступы, а скрипту в footer.php приходилось подтягивать #block3. */
.mapLocal {
box-sizing: border-box;
margin-top: 32px;
top: 0 !important;
width: 1076px !important;
height: 730px !important;
max-width: 100%;
border-radius: 16px;
overflow: hidden;
background: transparent !important;
}
/* Карта лежит на белой подложке: внешнее скругление 16 у .mapLocal,
внутреннее 12 у самой карты, между ними поле 12 */
.mapLocal {
background: #FFFFFF !important;
padding: 12px;
}
.mapLocal .mapL-1 {
width: 100% !important;
height: 100% !important;
padding: 0 !important;
border-radius: 12px;
overflow: hidden;
box-shadow: none !important;
}
/* Запас под картой: 32 зазора + 375 фона, который уходит под неё.
max-height снимаем: в main.css (27) стоит 1150px, из-за чего фотография
обрывалась на этой высоте и ниже шёл белый фон страницы. */
.regional-hero-wrapper {
max-height: none;
/* padding-bottom не нужен: запас перед картой держит её margin-top,
а фотография и так продолжается под приподнятой картой */
padding-bottom: 0;
position: relative;
/* фон рисует ::before — сам элемент остаётся без картинки */
background-image: none !important;
}
/* Фотография рисуется псевдоэлементом на всю обёртку, а обрывается ровно на
середине карты — за это отвечает белая заслонка #mapLocal::after ниже.
Так граница привязана к самой карте и не зависит ни от ширины экрана, ни
от того, во сколько строк лёг заголовок: подбирать высоту под каждый
диапазон не нужно. */
.regional-hero-wrapper::before {
content: '';
position: absolute;
inset: 0;
background-image: var(--reg-bg);
background-size: cover;
background-color: #2B3A1E;
background-color: #2B3A1E;
background-repeat: no-repeat;
background-position: center;
z-index: 0;
}
/* содержимое поверх фотографии */
.regional-hero-wrapper > * {
position: relative;
z-index: 1;
}
/* Шапка внутри обёртки должна лежать над остальным её содержимым.
Правило выше даёт z-index: 1 и шапке, и блоку региона — каждый заводит
свой контекст наложения, и z-index: 1000 у .header-top работает уже
внутри шапки, а не против соседей. Побеждал тот, кто идёт позже в DOM,
то есть контент региона: выпадающие панели меню уходили под hero-кнопки.
На главной обёртки нет, там 1000 конкурирует напрямую и выигрывает. */
.regional-hero-wrapper > .new-header {
z-index: 2;
}
/* Белая заслонка от середины карты и ниже: закрывает фотографию по бокам от
карты и под ней. #mapLocal — блочный на всю ширину, поэтому left/right: 0
дают ровно ширину страницы, без vw и лишней прокрутки. Запас снизу больше
распорки block2; идущий следом контент позиционирован и рисуется поверх. */
#mapLocal::after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 50%;
bottom: -120px;
background: #FFFFFF;
z-index: -1;
}
/* Основной фон сайта белый: в main.css (975) у body стоит #262626, на
бою его перекрывали инлайн-стили из настроек темы — задаём явно, чтобы
блоки со своим фоном (#F2F2F2 у новостей) читались как задумано. */
body {
background-color: #FFFFFF;
}
/* Контент выводится в «boxed» режиме (класс .fixed из header.php), а в
main.css (1087) у него жёсткая ширина 1200px: ниже этой ширины страница
переставала адаптироваться и появлялась горизонтальная прокрутка —
выглядело так, будто вёрстка просто уменьшена. Ширина сделана гибкой,
предел тот же 1200. */
.fixed,
.fixed2 {
width: 100%;
max-width: 1200px;
}
/* Высота по контенту — как у шапки на главной. В main.css у .mainBlock и
.block1-regRF-Page высота прибита к конкретным ширинам экрана
(890 на ≤900, 550 на ≤812, 580 на ≤736, 851 на ≤670): контент в них не
помещался или, наоборот, оставлял пустоту под карточками. */
.block1-regRF-Page {
height: auto !important;
min-height: 0 !important;
}
/* Внешний контейнер карты: min-height 300 из main.css давал зазор перед
картой на ширинах, где она идёт в потоке. position/z-index — чтобы белая
заслонка (::after выше) легла под карту, но поверх фотографии. */
#mapLocal {
min-height: 0;
position: relative;
z-index: 1;
}
/* Мобильный режим начинается там же, где на главной (1279 — переход меню
в гамбургер), чтобы не разъезжалось на промежуточных ширинах: три
карточки по 900px в ряд перестают помещаться примерно там же. */
@media (max-width: 1279px) {
.region-cards-grid {
box-sizing: border-box;
flex-direction: column;
align-items: stretch;
width: 100%;
gap: 16px;
padding: 0 16px !important;
}
.card-hunt-when,
.card-permits,
.card-hunt-where {
width: 100%;
height: auto;
min-height: 101px;
}
/* Карточка здесь на всю ширину, три капсулы в строку помещаются —
рисуем их как на десктопе, в одну линию. Перенос включается ниже,
на 812, где скрывается карта. */
.reg-card .permits-row {
flex-wrap: nowrap;
justify-content: flex-start;
height: 40px;
}
/* width: 100% приходит из main.css (16100) — там капсулы делались
на всю ширину карточки */
.permits-row .permit-pill {
flex: 0 0 auto;
width: auto !important;
}
.regional-hero-wrapper {
padding-bottom: 40px;
}
}
/* Ниже 813 большая карта скрыта (main.css 15501), вместе с ней и белая
заслонка — фотография закрывает всю обёртку. Вместо карты идёт полоса
#mapSmall с кнопкой «Показать карту». */
@media (max-width: 812px) {
/* Полоса вплотную прилегала к карточке «Где охотиться?» */
#mapSmall {
margin-top: 32px;
}
/* Карта раскрывается отдельным окном поверх страницы, а не растягивается
на весь документ. Раньше в main.css (15780) она была оверлеем во весь
экран с z-index 99991, но лежит внутри #mapLocal с position: relative
и z-index: 1 — тот заводит контекст наложения, поэтому 99991 работал
только внутри него, а шапка рисовалась поверх карты.
Окно держит сам #mapLocal. Открываясь, он переезжает в
(mapOn в reg_rf_new.php): внутри обёртки он заперт в её контексте
наложения, и подвал, который идёт следом за #block3, рисовался
поверх карты — никакой z-index изнутри это не решает.
Значения полей подобраны по макету, менять их безопасно. */
#mapLocal {
position: fixed;
/* Окно прижато к краям экрана: сверху остаётся полоса, чтобы шапка
была видна. Белое поле вокруг карты даёт .mapLocal (padding: 12px
выше по файлу), снаружи отступов нет. */
top: 84px;
left: 0;
right: 0;
bottom: 0;
z-index: 99999;
background: #fff;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
overflow: hidden;
}
.mapLocal {
position: static;
width: 100% !important;
height: 100% !important;
margin: 0;
z-index: auto;
border-radius: 16px;
}
/* Контейнер карты держим внутри панели. В main.css (15831) на мобильном
у него position: fixed с width: 100vw и height: 100vh — остаток
прежнего полноэкранного режима. Из-за него он вырывался наружу и
закрывал собой и поля панели, и затемнение, а width: 100% ниже
считался от вьюпорта, а не от .mapLocal. */
.mapLocal .mapL-1 {
position: static;
margin: 0;
}
/* Кнопка полноэкранного режима — десктопная, в окне она только
перекрывает карту */
.mapLocal .mapFullscreen {
display: none !important;
}
/* Иначе iframe карты остаётся нулевой высоты и окно выглядит пустым */
#kosmosnimki iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
}
/* Крестик — в углу самого окна */
.closeMap {
position: absolute;
right: 8px;
top: 8px;
z-index: 2;
cursor: pointer;
}
/* Пока окно открыто, страница под ним не прокручивается — иначе
свайп по карте уводит контент за её пределами */
body.hm-map-open {
overflow: hidden;
}
/* Затемнение под окном: без него карта сливается со страницей, и поля
по краям не читаются как поля. Отдельной разметки не заводим —
псевдоэлемент body, он же перехватывает тапы мимо окна.
z-index на единицу ниже #mapLocal (99999). */
body.hm-map-open::before {
content: '';
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
z-index: 99998;
}
}
/* 813–1279: карточки остаются в ряд, как на десктопе. Ширины берём
пропорциями макета (205 / 440 / 191 при сумме 836 + два зазора 32),
иначе ряд в 900px не помещается на этих экранах. */
@media (min-width: 813px) and (max-width: 1279px) {
.region-cards-grid {
flex-direction: row;
align-items: stretch;
max-width: 900px;
margin: 0 auto;
gap: 32px;
}
.card-hunt-when { flex: 205 1 0; width: auto; }
.card-permits { flex: 0 0 auto; width: 370px; }
.card-hunt-where { flex: 210 1 0; width: auto; }
/* У первой капсулы подпись короткая («Надзор») — так три капсулы
с большей вероятностью остаются в одну линию */
.permits-row .permit-pill:first-child .pill-text {
display: none;
}
.permits-row .permit-pill:first-child .pill-text-short {
display: block;
}
/* Не хватало 18px, чтобы три капсулы встали в строку — добираем
зазором ряда и боковыми полями самих капсул */
.reg-card .permits-row {
flex-wrap: nowrap;
height: 40px;
gap: 8px;
}
.permits-row .permit-pill {
padding: 8px 6px;
/* дают себя ужать, иначе при nowrap вылезают за карточку */
flex: 0 1 auto;
min-width: 0;
}
}
/* Ниже 812 (тот же порог, на котором прячется карта) капсулы уже не
помещаются в строку — переносим */
@media (max-width: 812px) {
.reg-card .permits-row {
flex-wrap: wrap;
height: auto;
row-gap: 8px;
}
}
/* <360px — пилюли в столбик, чтобы не упирались */
@media (max-width: 360px) {
.reg-card .permits-row {
flex-direction: column;
gap: 6px;
}
.card-permits {
width: auto;
max-width: 100%;
}
.permits-row .permit-pill {
width: 100%;
max-width: 100%;
}
}
/* Баннер «Все карты в твоём мобильном» на главной — картинка приходит
фоном (.app_container в main.css, 14745), поэтому скругление задаём ей.
.app_containerN — тот же баннер в мобильной вёрстке. */
.app_container,
.app_containerN {
border-radius: 16px;
}
/* Карточка карты — значения из макета (Figma 181:790, 1222x681).
Фон не градиент, а стекло: полупрозрачный белый поверх фотографии шапки,
на которую карточка заезжает (top: -324px в main.css). blur(75px) — тот же
приём и та же величина, что у капсул меню.
!important — .mapBlock описан в main.css (14663) со своим фоном, радиусом
и тенью. */
.mapBlock {
/* Ширина из макета — в main.css было 1077 и content-box, из-за чего
к ширине прибавлялись padding 60 с каждой стороны */
box-sizing: border-box;
width: 1222px !important;
max-width: calc(100% - 32px);
/* Карточка заезжает на фотографию шапки ровно на те 187px, которые
заложены в её padding-bottom (см. .new-header) */
top: -187px !important;
border-radius: 16px !important;
background: rgba(255, 255, 255, 0.75) !important;
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
border: 1px solid #8DC640 !important;
box-shadow: none !important;
}
/* Карта регионов на мобильном (reg_main.php).
Макет 375 (Figma, Page-Main 446:9854): блок 374x246 сразу под поиском,
зелёная карта во всю ширину, поверх неё белая «пилюля» «Список регионов»
166x42 с зелёным текстом. Плагинную карту на мобильном не показываем —
она и не отрисовывалась (лицензия + пустой контейнер), в макете на её
месте статичная картинка со ссылкой на список регионов. */
/* Ширина фиксирована по картинке: кнопка стоит в проценте от блока и должна
совпасть с вырезом в ней. Если растянуть картинку шире натуральных 374,
вырез растёт вместе с ней, а кнопка — нет, и сбоку вылезает белое пятно.
margin-top — столько же, на сколько поиск свисает под фотографию: карта
начинается ровно от его низа. */
/* Высоту блока задаёт он сам — отступом ::before в 246/374 = 65.78%, а карта
лежит фоном. Раньше высота бралась от ![]()
внутри, и в этом диапазоне
ширин блок схлопывался в ноль: картинка вылезала за него, а сверху её
закрашивал идущий следом #block3 (у него position: relative). Так высота
не зависит ни от загрузки картинки, ни от того, как движок считает размер
изображения внутри флекса.
z-index — страховка от того же перекрытия. */
.map-mobile {
position: relative;
z-index: 1;
display: none;
width: 374px;
max-width: 100%;
margin: 22px auto 0;
background: url('../new-design-images/map-russia-mobile.png') center / contain no-repeat;
}
.map-mobile::before {
content: '';
display: block;
padding-top: 65.78%;
}
/* Когда PHP отдал только мобильный вариант (wp_is_mobile: плагинной карты в
разметке нет вообще), статичная карта — единственная, показываем на любой
ширине. Иначе на планшете в альбомной ориентации карты не было бы. */
.map-mobile.map-mobile--single {
display: block;
}
/* Поле поиска из header.php: тоже единственное на странице, поэтому и
геометрия, и видимость заданы без медиазапроса. В main.css оно
показывается только до 670 (31) и получает абсолютное позиционирование
карточки (397) — перебиваем и то, и другое. */
/* Селектор с id: в main.css (52) у #searchRegHome стоит width 90% !important,
и правило по одному классу проигрывает ему по специфичности — поле выходило
337 вместо 342. */
#searchRegHome.searchRegHome_Mobile {
display: flex;
position: relative !important;
left: auto !important;
top: auto !important;
transform: none !important;
width: 342px !important;
max-width: calc(100% - 24px);
/* 16 — зазор от подзаголовка «все регионы России»;
-22 — на столько поле свисает из-под фотографии шапки */
margin: 16px auto -22px !important;
z-index: 2;
}
/* Позиция и размер — ровно по вырезу в картинке (в макете кнопка была
частью растра; вырезана, чтобы текст был резким и кликался). Проценты
считаны от кадра 374x246: центр выреза 181.8 x 133.8. */
.map-mobile__btn {
position: absolute;
left: 48.6%;
top: 54.37%;
transform: translate(-50%, -50%);
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
width: 168px;
height: 44px;
padding: 12px 18px;
background: #FFFFFF;
/* тем же радиусом вырезана дырка в картинке — иначе по углам кнопки
просвечивал бы фон */
border-radius: 12px;
font-family: var(--menu-font);
font-size: 16px;
line-height: 16px;
font-weight: 600;
color: #3BA933 !important;
text-decoration: none;
white-space: nowrap;
}
/* Подложка VK-виджета: в main.css (15002) у .vkBgpict стоит
background-size: contain, но не задан background-repeat — при contain
картинка вписывается по высоте, и если блок шире неё, она размножается по
горизонтали. На планшетных ширинах виджет виден в три копии. */
.vkBgpict {
background-repeat: no-repeat;
}
/* Ниже 813 карточка карты скрыта (vc_hidden-xs, main.css 15501), а мобильное
поле поиска main.css показывает только с 670 (31) — между 671 и 812 на
странице не было ни карты, ни поиска. Здесь дыра закрыта: показываем
статичную карту, а карточку превращаем в обычную обёртку, чтобы уцелело
лежащее внутри неё десктопное поле поиска. Второй экземпляр поля рендерить
нельзя: id и обработчики в reg_main.php рассчитаны на единственный. */
@media (max-width: 812px) {
/* --- hero по мобильному макету (Figma, фрейм 375; замеры с рендера в 2x).
Раньше эти значения стояли в блоке 480, а в 481–812 действовал блок 768
со старыми 22px — заголовок в этом диапазоне выглядел мелким. --- */
/* Поля hero и поиска в макете считаются от края экрана, а .container
добавляет свои боковые padding — из-за них кнопки ужимались до 163
вместо 176 и текст в них переносился («Сроки / охоты»). Убираем padding
у контейнера шапки, а полосе с логотипом возвращаем прежние отступы. */
.new-header > .container {
padding-left: 0;
padding-right: 0;
}
.header-top {
margin-left: 12px;
margin-right: 12px;
}
/* Поля hero 8px: кнопки 176+8+176 = 360 плюс поля = 376, на 375 они
занимают всю ширину. padding-top 33 — в макете кнопки начинаются на
106px от верха шапки. */
.hero {
padding-top: 33px;
padding-left: 8px;
padding-right: 8px;
}
/* Заголовок 30/32 (в макете три строки) */
.hero h1 {
font-size: 30px;
line-height: 32px;
margin-bottom: 12px !important;
}
.hero .subtitle {
font-size: 16px;
}
/* Зазор до заголовка: от низа кнопок (176) до первой строки H1 (229.5) */
.hero-buttons {
gap: 8px;
width: 100%;
margin-bottom: 50px;
}
/* Кнопки тех же размеров, что на десктопе (176x70), но тянутся на
свободную ширину: на 375 в 176 они вдвоём не помещаются. Раньше в
блоке 768 стояли 160x56 с уменьшенным шрифтом — макет требует полного
размера, текст в три строки укладывается в 70 (14*3 + padding 28). */
.hero-btn,
.hero-btn.new-blue,
.hero-btn.new-red {
flex: 1 1 0;
width: auto;
max-width: 176px;
height: 70px;
min-height: 0;
padding: 14px;
gap: 8px;
}
.hero-btn > span,
.hero-btn > span svg {
width: 40px;
height: 40px;
}
.hero-btn > div > div,
.hero-btn small {
font-size: 14px;
}
.map-mobile {
display: flex;
}
.mapBlock {
display: block !important;
position: static !important;
top: auto !important;
width: auto !important;
max-width: none !important;
padding: 0 !important;
background: none !important;
border: 0 !important;
border-radius: 0 !important;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
/* от карточки остаётся только поле поиска: карта плагина на узких
экранах всё равно не отрисовывалась */
.mapBlock > *:not(#searchRegHome) {
display: none !important;
}
/* поле лежит уже после шапки, поэтому наезжает на фотографию
отрицательным верхним отступом — визуально так же, как мобильный
вариант, который свисает из шапки вниз */
#searchRegHome.searchRegHome_Desktop {
display: flex;
position: relative !important;
left: auto !important;
top: auto !important;
transform: none !important;
width: 342px !important;
max-width: calc(100% - 24px);
margin: -22px auto 0 !important;
z-index: 2;
}
/* min-height 370 из блока 768 держал высоту шапки, а без padding-bottom
отрицательный отступ поля схлопывался наружу — уезжала карта, а не низ
фотографии. flow-root запрещает схлопывание, не обрезая выступающее
поле.
Нижний отступ 38 = 16 (зазор от подзаголовка) + 22 (на столько поле
заезжает под низ фотографии). Он нужен, когда поле лежит уже после
шапки; если оно выводится внутрь неё (мобильный UA, класс
new-header--with-search), запас не нужен — поле свисает само.
Скругление нижних углов 24 — по мобильным макетам. */
.new-header {
display: flow-root;
padding-bottom: 38px;
min-height: 0;
border-bottom-left-radius: 24px;
border-bottom-right-radius: 24px;
}
.new-header--with-search {
padding-bottom: 0;
}
}
/* Поиск по регионам.
Рамку, фон и padding рисует сам контейнер #searchRegHome (main.css, 397) —
он flex и содержит иконку .search-icon-home и прозрачный input
(main.css, 15048). Вешать рамку ещё и на input нельзя: получается коробка
в коробке. Здесь только размер и положение из макета: 316x42 по центру
карточки, 58 от её верха (в макете карточка на 532, поле на 590). */
#searchRegHome {
width: 316px;
height: 42px;
top: 58px;
left: 50%;
transform: translateX(-50%);
}
/* input тянется на всё свободное место справа от иконки */
#myInput2Home {
flex: 1 1 auto;
min-width: 0;
}
.shareBox {
display: none;
width: 100%;
height: 50px;
background: #1a252f;
align-items: center;
justify-content: center;
gap: 16px;
padding: 0 20px;
box-sizing: border-box;
}
.shareBox.show {
display: flex;
}
/* ========================================
ALERT BAR (Login error)
======================================== */
.alert-bar {
top: 0;
left: 0;
width: 100%;
position: fixed;
z-index: 10000;
font-size: 16px;
text-align: center;
color: #fff;
background: #e74c3c;
padding: 12px 20px;
box-sizing: border-box;
}
/* ========================================
SUB-MENU ITEM (underscore variant)
Used in header.php for regions in level-3
======================================== */
.sub-menu-item,
.sub-menu-item_ {
position: relative;
}
/* Раскрытие level-3 по ховеру описано выше, ДО медиазапросов.
Здесь его быть не должно: правило после @media перебивало мобильное
отключение ховера, и второй уровень раскрывался при наведении. */
/* ========================================
GLOBAL WRAPPER
======================================== */
.wrap_every_thing {
width: 100%;
}
/* Обёртка всей страницы красилась в #f5f5f5 (main.css, 15285: общий список
.main-container, .section, .page-wrap, .wrap, #block0, #block2) — этот
серый и был виден вокруг карточки с картой, поверх белого body. Селектор
по id: у правила в main.css та же специфичность, выигрываем порядком
подключения. Блоки со своим фоном (#F2F2F2 у новостей) не затрагиваются. */
#block0 {
/* важное — тот же случай, что и с обёртками ниже: серый проставлялся
инлайном из скрипта шаблона */
background-color: transparent !important;
}
/* Тем же правилом красятся обёртки контента страницы — на бою из-под них
лез серый под карточкой карты и вокруг колонки с баннером и виджетом
сообщества. .block-title намеренно не трогаем: это серая плашка заголовка
в старом блоке новостей, она к фону страницы отношения не имеет.
!important — потому что серый этим же обёрткам проставляли инлайном
скрипты шаблонов (reg_main.php на главной, footer.php для fl 0 и 6).
На главной скрипт вычищен, но обычное правило проиграло бы любому
оставшемуся инлайновому стилю: важное правило бьёт инлайн. */
body.home .main-container,
body.home .page-wrap,
body.home .section,
body.home .wrap {
background-color: transparent !important;
}
/* ========================================
FIXED ELEMENTS (Legacy compatibility)
======================================== */
.fixed {
position: fixed;
z-index: 999;
}
.fixed2 {
position: fixed;
z-index: 998;
}
#block3 {
margin-top: 0 !important;
}
.fixed_wrap {
position: relative;
}
/* ========================================
UTILITY CLASSES
======================================== */
.flex {
display: flex;
}
.flex-col {
display: flex;
flex-direction: column;
}
.h70 {
height: 70%;
}
.hide {
display: none !important;
}
.txt-white {
color: white;
}
/* ========================================
MOBILE SEARCH (hidden by default)
======================================== */
.mobile-search {
display: none;
padding: 15px 20px;
background: rgba(0,0,0,0.2);
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.mobile-search-input {
width: 100%;
padding: 12px 16px;
border: none;
border-radius: 6px;
background: rgba(255,255,255,0.95);
font-size: 15px;
color: #333;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.mobile-search-input::placeholder {
color: #95a5a6;
}
.mobile-search-input:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.3);
}
/* ============ Report Change Modal ============ */
.report-modal-overlay {
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(0, 0, 0, 0.55);
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.report-modal-card {
position: relative;
background: #fff;
border-radius: 16px;
padding: 40px 36px;
max-width: 520px;
width: 100%;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
animation: reportModalFadeIn 0.25s ease;
}
@keyframes reportModalFadeIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.report-modal-close {
position: absolute;
top: 12px;
right: 16px;
background: none;
border: none;
font-size: 28px;
line-height: 1;
color: #666;
cursor: pointer;
padding: 4px 8px;
transition: color 0.2s;
font-family: inherit;
}
.report-modal-close:hover {
color: #000;
}
.report-modal-header {
display: flex;
align-items: flex-start;
gap: 16px;
margin-bottom: 20px;
}
.report-icon-warning {
width: 64px;
height: 64px;
min-width: 64px;
background-color: #d43a3a;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.report-icon-warning svg {
width: 30px;
height: 30px;
}
.report-modal-header h2 {
font-size: 22px;
font-weight: 700;
color: #1a1a1a;
line-height: 1.3;
padding-top: 4px;
margin: 0;
}
.report-modal-body p {
font-size: 14px;
color: #333;
line-height: 1.6;
margin-bottom: 12px;
}
.report-modal-body ul {
list-style: none;
padding: 0;
margin: 0 0 20px 0;
}
.report-modal-body ul li {
font-size: 14px;
color: #333;
line-height: 1.7;
padding-left: 18px;
position: relative;
}
.report-modal-body ul li::before {
content: '';
position: absolute;
left: 0;
top: 10px;
width: 6px;
height: 6px;
background-color: #333;
border-radius: 50%;
}
.report-instructions {
font-size: 14px;
color: #333;
line-height: 1.6;
margin-bottom: 24px;
}
.report-instructions a {
color: #3b82f6;
text-decoration: none;
}
.report-instructions a:hover {
text-decoration: underline;
}
.report-divider {
border: none;
border-top: 1px solid #d1d5db;
margin: 20px 0;
}
.report-modal-footer-text {
font-size: 14px;
color: #333;
line-height: 1.6;
margin-bottom: 24px;
}
.report-btn-ok {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
background-color: #1a1a1a;
color: #ffffff;
border: none;
border-radius: 12px;
padding: 12px 28px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s;
font-family: inherit;
}
.report-btn-ok:hover {
background-color: #333;
}
.report-arrows {
font-size: 18px;
letter-spacing: -2px;
}
/* Mobile: icon centered on top, text below, full-width button */
@media (max-width: 540px) {
.report-modal-card {
padding: 28px 20px;
border-radius: 12px;
}
.report-modal-header {
flex-direction: column;
align-items: center;
text-align: center;
gap: 12px;
}
.report-modal-header h2 {
font-size: 18px;
padding-top: 0;
}
.report-icon-warning {
width: 48px;
height: 48px;
min-width: 48px;
}
.report-icon-warning svg {
width: 24px;
height: 24px;
}
.report-btn-ok {
width: 100%;
justify-content: center;
}
}
/* ========================================
ALL ABOUT HUNTING — блок «Все про охоту»
Значения из Figma (About all, 1379x718): три колонки по 438.33
с зазором 32, карточки со скруглением 16, текст Proxima Nova 16/20.
======================================== */
.about-all {
padding: 50px 0;
background: #fff;
font-family: var(--menu-font);
}
.about-all__title {
margin: 0 0 32px;
text-align: center;
color: #29AAE2;
font-size: 28px;
line-height: 1;
font-weight: 600;
}
.about-grid {
display: grid;
grid-template-columns: repeat(3, minmax(343px, 438.33px));
gap: 32px;
justify-content: center;
max-width: 1379px;
margin: 0 auto;
}
.about-col {
display: flex;
flex-direction: column;
gap: 32px;
}
.about-card {
position: relative;
overflow: hidden;
border-radius: 16px;
background: #F2F2F2;
box-sizing: border-box;
}
/* нужен только для выбора мобильного файла — из потока убираем,
позиционируется сам ![]()
*/
.about-card picture {
display: contents;
}
/* Высоты карточек одинаковые в десктопном и мобильном макетах —
меняется только ширина колонки */
.about-card--where,
.about-card--permits { height: 343px; }
.about-card--rules { height: 426px; }
.about-card--safety { height: 260px; }
.about-card--app { height: 718px; }
.about-card--permits { background: #29AAE2; }
.about-card--app { background: #5CA745; }
/* Подпись карточки: прижата к верху, отступ 24 */
.about-card__text {
position: absolute;
top: 24px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
width: 322px;
margin: 0;
text-align: center;
font-size: 16px;
line-height: 20px;
color: #000;
}
.about-card__text strong {
font-weight: 600;
}
/* На синей карточке текст белый */
.about-card--permits .about-card__text {
color: #fff;
width: 255px;
}
.about-card--safety .about-card__text { width: 295px; }
.about-card--app .about-card__text { width: 251px; }
/* «Правила охоты» — подпись в рамке 208x76. В десктопной фотографии она
уже запечена, поэтому здесь скрыта и включается только на мобильной,
где фотография отдана без текста. */
.about-card--rules .about-card__text {
display: none;
box-sizing: border-box;
width: 208px;
padding: 16px;
border: 1px solid #000;
border-radius: 16px;
background: rgba(255, 255, 255, 0.65);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
/* Изображения внутри карточек — размер из макета, он одинаков на десктопе
и на мобильном, поэтому не резиновый: картинка по центру с отступом 24
от низа карточки. max-width страхует экраны уже 375. */
.about-card__image {
position: absolute;
left: 50%;
bottom: 24px;
transform: translateX(-50%);
z-index: 1;
display: block;
max-width: calc(100% - 24px);
height: auto;
}
.about-card--where .about-card__image,
.about-card--permits .about-card__image { width: 319px; }
.about-card--safety .about-card__image { width: 320px; }
/* Фотография на всю карточку */
.about-card__photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
/* Плашка магазинов: 332x140, синяя, кнопки 148x44 по две в столбец.
В фотографиях кнопок нет, поэтому размеры фиксированные — как в макете. */
.about-stores {
position: absolute;
left: 50%;
bottom: 6px;
transform: translateX(-50%);
z-index: 2;
box-sizing: border-box;
display: flex;
gap: 12px;
padding: 12px;
width: 332px;
max-width: calc(100% - 16px);
background: #29AAE2;
border-radius: 16px;
}
.about-stores__col {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.about-stores a {
display: block;
transition: transform 0.2s;
}
.about-stores a:hover {
transform: scale(1.02);
}
.about-stores img {
display: block;
width: 100%;
max-width: 148px;
height: auto;
}
/* Ниже 1410 колонки ужимаются, ниже 1120 — две, ниже 812 — одна */
@media (max-width: 1410px) {
.about-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* Ниже 1120 колонок две, третья — по центру второй строки в ширине
макета: растянуть её на оба столбца нельзя, фотография раздувается */
@media (max-width: 1120px) {
.about-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
}
.about-col:last-child {
grid-column: span 2;
width: 100%;
max-width: 438.33px;
margin: 0 auto;
}
}
/* Одна колонка. Карточки не растягиваются шире макета — картинки внутри
не масштабируются, и на широком экране растянутая карточка выглядела бы
пустой вокруг них */
@media (max-width: 812px) {
.about-all {
padding: 24px 0 40px;
}
.about-grid {
grid-template-columns: minmax(0, 1fr);
max-width: 470px;
padding: 0 16px;
}
.about-grid,
.about-col {
gap: 16px;
}
.about-col:last-child {
grid-column: auto;
max-width: none;
}
}
/* ---- Мобильный макет (Figma 457:13395) ----
Порог 480 обязан совпадать с media у в about-all.php:
ниже него подключаются мобильные фотографии, у которых подпись
«Правила охоты» не запечена и её рисует вёрстка. */
@media (max-width: 480px) {
.about-all__title {
display: none;
}
.about-card--rules .about-card__text {
display: flex;
}
}
/* ========================================
БЛОК «НОВОСТИ» (news.php)
Значения из макета (Header2): заголовок 28/28 600 #29AAE2, кнопка
154x42 со скруглением 12, плитки на белом.
======================================== */
.news-section {
background: #F2F2F2;
padding: 50px 0;
font-family: var(--menu-font);
}
.news-section__head {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 24px;
height: 42px;
margin-bottom: 24px;
}
.news-section__title {
margin: 0 !important;
font-size: 28px;
line-height: 28px;
font-weight: 600 !important;
color: #29AAE2;
text-align: left !important;
}
/* Кнопка «Все новости» — Figma: 154.43x42, padding 12/18, gap 8 */
.news-all-btn {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 42px;
padding: 12px 18px;
background: #29AAE2;
border-radius: 12px;
font-size: 16px;
line-height: 16px;
font-weight: 600;
color: #FFFFFF !important;
text-decoration: none;
white-space: nowrap;
flex: none;
transition: opacity 0.2s;
}
.news-all-btn:hover {
opacity: 0.9;
color: #FFFFFF !important;
}
.news-all-btn svg {
display: block;
flex: none;
}
/* Плитки: три в ряд, белые, без разделителей */
.news-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.news-card {
display: flex;
flex-direction: column;
background: #FFFFFF;
border-radius: 16px;
overflow: hidden;
text-decoration: none;
color: inherit;
transition: transform 0.2s;
}
.news-card:hover {
transform: translateY(-2px);
color: inherit;
}
.news-card__image {
aspect-ratio: 16 / 9;
background: #E9E9E9;
overflow: hidden;
}
.news-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.news-card__body {
display: flex;
flex-direction: column;
gap: 8px;
padding: 16px;
}
.news-card__date {
font-size: 14px;
line-height: 14px;
font-weight: 400;
color: #777777;
}
.news-card__title {
margin: 0 !important;
font-size: 18px;
line-height: 22px;
font-weight: 600 !important;
color: #000000 !important;
text-align: left !important;
}
@media (max-width: 1024px) {
.news-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 812px) {
.news-section {
padding: 32px 0;
}
.news-grid {
grid-template-columns: minmax(0, 1fr);
gap: 16px;
}
.news-section__head {
gap: 16px;
}
.news-section__title {
font-size: 22px;
line-height: 24px;
}
}
/* ========================================
БАННЕР «Все карты в твоём мобильном» (app-banner.php)
======================================== */
.app-banner {
background: #FFFFFF;
padding: 50px 0;
}
.app-banner__inner {
display: block;
max-width: 651px;
margin: 0 auto;
}
.app-banner__inner img {
display: block;
width: 100%;
height: auto;
border-radius: 16px;
}
@media (max-width: 812px) {
.app-banner {
padding: 32px 0;
}
/* Баннер приложения и виджет сообщества ВК приходят из контента страницы
одной строкой WPBakery: .vc_col-sm-8 + .vc_col-sm-4 внутри .vc_row-fluid
(у неё display:flex, main.css 15240). Свои колонки WPBakery складывает
только ниже 768, поэтому в 768–812 они оставались рядом. По макету на
узких экранах они идут колонкой. Ограничено главной, чтобы не менять
раскладку строк на остальных страницах. */
body.home .vc_row-fluid {
flex-direction: column;
}
body.home .vc_row-fluid > .wpb_column {
width: 100%;
}
/* отступ между колонками в колоночной раскладке не нужен */
body.home .mLeft30 {
padding-left: 0 !important;
}
}
/* ========================================
Заглушка личного кабинета — /lk
Шаблон lk-unavailable.php, маршрут в functions.php.
Секция временная: снимается вместе с заглушкой, когда
поднимут lk.huntmap.ru.
======================================== */
/* Фон должен идти во всю ширину и высоту области между шапкой и подвалом,
а этому мешают две обёртки:
1. .main-container — шаблон в неё намеренно не заворачивает блок:
у неё фиксированные 1162px (main.css), серый обрывался бы по краям;
2. #block3 с классом .fixed — «boxed» режим темы: предел 1200px
(new-design.css выше) и белый фон (main.css, 1088). Из-за него серый
был колонкой по центру, а под ним оставалась белая полоса.
Вторую снимаем по классу на body, который навешивает functions.php
(huntmap_lk_stub_body_class) — точечно, только на этой странице.
Цвет — тот же #f5f5f5, которым main.css красит обёртки контента
на остальных страницах сайта. */
body.lk-stub-page {
background-color: #f5f5f5;
}
body.lk-stub-page .fixed,
body.lk-stub-page .fixed2 {
max-width: none;
background: transparent;
}
.lk-stub {
display: flex;
justify-content: center;
width: 100%;
/* Обязательно: глобального border-box в теме нет, и без него боковые
отступы прибавлялись бы к 100% — блок вылезал бы за вьюпорт на 32px,
а .fixed_wrap { overflow: hidden } (media.css) срезал бы правый край. */
box-sizing: border-box;
padding: 64px 16px 96px;
background-color: #f5f5f5;
}
/* Ширина по колонке текста, а не по контейнеру: длинные строки
на десктопе читаются хуже, чем узкая карточка по центру. */
.lk-stub-card {
box-sizing: border-box;
width: 100%;
max-width: 620px;
padding: 40px;
border: 1px solid var(--border);
border-radius: 16px;
background: #fff;
box-shadow: var(--shadow);
text-align: center;
font-family: var(--menu-font);
}
/* h1 темы приходит с крупным межстрочным и своим цветом — задаём явно. */
.lk-stub-card h1 {
margin: 0 0 20px;
font-size: 28px;
line-height: 34px;
font-weight: 600;
color: #000;
}
.lk-stub-card p {
margin: 0 0 12px;
font-size: 18px;
line-height: 26px;
color: rgba(0, 0, 0, 0.6);
}
.lk-stub-card p:last-of-type {
margin-bottom: 28px;
}
.lk-stub-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 56px;
padding: 10px 24px;
border-radius: 16px;
/* box-sizing нужен явно: рамка не должна добавляться к min-height */
box-sizing: border-box;
border: 1px solid var(--menu-accent);
background: #fff;
color: var(--menu-accent);
font-size: 16px;
font-weight: 600;
line-height: 20px;
text-decoration: none;
transition: transform 0.2s, background-color 0.2s;
}
/* Тема красит ссылки внутри контента при наведении — цвет задаём явно.
Заливку на ховере берём светло-серую, а не полупрозрачную: карточка
белая, и opacity на белой кнопке в глаза не бросается. */
.lk-stub-btn:hover,
.lk-stub-btn:focus {
color: var(--menu-accent);
text-decoration: none;
background: #f2f2f2;
transform: translateY(-2px);
}
.lk-stub-btn img {
flex: none;
display: block;
width: 32px;
height: 32px;
}
@media (max-width: 812px) {
.lk-stub {
padding: 40px 16px 64px;
}
.lk-stub-card {
padding: 28px 20px;
}
.lk-stub-card h1 {
font-size: 22px;
line-height: 28px;
}
.lk-stub-card p {
font-size: 16px;
line-height: 24px;
}
/* На узком экране кнопка тянется по карточке.
Содержимое ужато под самый маленький макет: при 375px внутри
карточки остаётся 303px (375 − 32 отступа блока − 40 карточки),
а подпись на 16px с иконкой 32 и padding 24 требует ~311px.
С этими значениями содержимое укладывается в ~271px, то есть
проходит и 375, и 360. */
.lk-stub-btn {
display: flex;
width: 100%;
gap: 8px;
padding: 10px 14px;
font-size: 15px;
}
.lk-stub-btn img {
width: 28px;
height: 28px;
}
/* Ниже 360px подпись всё же переносится на две строки — тогда
min-height кнопке уже не нужен, высоту задаёт содержимое. */
.lk-stub-btn span {
min-width: 0;
}
}
}
}