/* ============================================================ ГЛАВНАЯ СТРАНИЦА Источник — design2/assets/css/home.css. Перенесены только те блоки, которые скин Messia_Home_Tmpl_Pdd действительно рисует: герой с формой подбора, подборка объектов, карта, отзывы, статьи, блок доверия, аккордеон вопросов и нижний текст. Блоков «Города», «Эксперт» и «Полезное» в новом дизайне нет, их стили сюда не переносились. Не переносились и «Шаги», «Ссылки», «Соцсети», «Квиз», «Факты»: под них нет данных в конструкторе сегмента 1910. Все селекторы идут от body.pdd — специфичностью, а не !important: поверх темы лежат frontend.css и skin.css, и они шире по охвату, но короче по специфичности. Значения — только токены из tokens.css. Общие атомы .rating и .stars намеренно заужены до body.pdd .pdd-home: одноимённые классы есть и на листинге, и на карточке школы, и правит их не этот файл. ============================================================ */ body.pdd .pdd-home { /* поля и ширины */ --home-gap: var(--space-9); /* между блоками */ --home-pad: var(--page-padding); /* колонка содержимого на широком экране: общая --content-max плюс поля страницы — ширина одна с листингом и карточкой школы */ --home-max: calc(var(--content-max) + var(--home-pad) * 2); --home-radius: 20px; /* витрине идут крупные скругления */ /* поверхности блоков: без рамок, форму даёт мягкая тень */ --home-panel-bg: var(--color-surface); --home-panel-border: 0; --home-panel-pad: var(--space-7); --home-panel-shadow: 0 6px 20px rgba(11, 11, 30, 0.06); /* заголовки блоков и сетки */ --home-head-size: var(--font-size-title); --home-card-columns: 2; /* карточки школ: на телефоне парами */ --home-facts-columns: 2; /* «чем полезен сервис» */ /* «Почему нам можно доверять» */ --home-trust-bg: var(--home-panel-bg); --home-trust-fg: var(--color-text); --home-trust-muted: var(--color-text-secondary); --home-trust-pad: var(--home-panel-pad); --home-trust-shadow: var(--home-panel-shadow); --home-trust-border: var(--home-panel-border); /* принятый вид (v6): нумерованный список в две колонки, карточки без плашек, иконок нет */ --home-trust-columns: 2; --home-trust-card-bg: transparent; --home-trust-card-border: 0; --home-trust-card-pad: 0; --home-trust-card-radius: var(--radius-md); --home-trust-card-direction: row; --home-trust-icon-display: none; --home-trust-num-display: inline-flex; /* подборки школ: вкладки и ярлык, по которому школа попала в подборку */ --home-pick-columns: 1; --home-pick-tab-fg: var(--color-text); --home-pick-tab-bg: var(--color-surface); --home-pick-tab-border: var(--border-width) solid var(--color-border); --home-pick-tab-radius: var(--radius-pill); --home-pick-tab-active-fg: var(--color-text-inverse); --home-pick-tab-active-bg: var(--color-primary); --home-pick-mark-fg: var(--color-primary); --home-pick-mark-bg: var(--color-primary-soft); /* значение подборки стоит напротив её названия: под ярлыком «Высокий рейтинг» — оценка, «Больше всего отзывов» — их число */ --home-pick-value-fg: var(--color-text); --home-pick-value-size: var(--font-size-card-title); /* карта (принята с варианта 3): картинка города под тёмной вуалью, объекты белыми плашками, кнопка «Открыть карту» посередине карты — без подложки, просто кнопка */ --home-map-image: url(../img/map/city.svg); --home-map-shot-display: block; --home-map-shot-filter: none; --home-map-veil: linear-gradient(180deg, rgba(11, 11, 30, 0.28) 0%, rgba(11, 11, 30, 0.5) 100%); --home-map-height: 300px; --home-map-height-wide: 380px; --home-map-body-display: none; /* включается, если под картой есть районы или объекты */ --home-map-body-fg: var(--color-text); --home-map-body-muted: var(--color-text-secondary); --home-map-pin-bg: var(--color-surface); --home-map-pin-fg: var(--color-text); --home-map-pin-radius: var(--radius-pill); --home-map-pin-rating-display: inline; --home-map-pin-price-display: none; --home-map-pin-name-display: none; --home-map-list-display: none; --home-map-legend-display: none; /* отзывы: их всего три, зато карточка крупная и заметная */ --home-review-columns: 1; --home-review-pad: var(--space-8); --home-review-gap: var(--space-5); --home-review-text-size: var(--font-size-subtitle); --home-review-avatar: 44px; --home-review-accent: 3px; /* полоса цветом марки слева (из варианта 1) */ /* герой: своя пара размеров, крупнее шкалы — это витрина */ --home-hero-pad: var(--space-9) var(--space-7) var(--space-7); --home-hero-title-size: 28px; --home-hero-text-size: var(--font-size-subtitle); --home-hero-scrim: none; --home-hero-text-fg: var(--color-text-secondary); --home-hero-title-fg: var(--color-text); /* подложка героя: светлая витрина с мягким свечением по углам (принят вариант v3, 13.08.2026) — фото не выводится, заголовок тёмный, форме нужна граница, а не тень. Варианты подменяют только эти токены */ --home-hero-bg: var(--color-surface); --home-hero-photo-display: none; --home-hero-photo-filter: none; --home-hero-layer: radial-gradient(70% 80% at 6% 0%, rgb(var(--color-primary-rgb) / 0.16) 0%, rgb(var(--color-primary-rgb) / 0) 70%), radial-gradient(60% 70% at 96% 30%, rgb(var(--color-rating-high-rgb) / 0.12) 0%, rgb(var(--color-rating-high-rgb) / 0) 70%); --home-hero-layer-size: auto; --home-hero-layer-blend: normal; /* форма поиска по нескольким параметрам */ --hs-pad: var(--space-6); --hs-radius: 16px; --hs-gap: var(--space-4); /* форма стоит на светлой подложке: тень тише, форму держит граница */ --hs-shadow: 0 8px 24px rgba(11, 11, 30, 0.08); --hs-form-border: var(--border-width) solid var(--color-border); /* полей в форме два: город и категория. Их доли задаёт токен — 50 на 50 у эталона, варианты дают городу больше места */ --hs-fields-template: 1fr 1fr; --hs-fields-template-wide: var(--hs-fields-template); --hs-form-row-direction: column; /* на телефоне кнопка «Найти» стоит под полями */ --hs-submit-label-display: inline; --hs-fields-width: 560px; /* на широком форма не растягивается на всю строку */ --hs-field-bg: var(--color-surface-muted); --hs-field-border: var(--border-width) solid var(--color-border); --hs-field-radius: 12px; --hs-field-pad: var(--space-4) var(--space-6); --hs-label-fg: var(--color-text-muted); --hs-value-fg: var(--color-text); --hs-submit-bg: var(--color-primary); --hs-submit-fg: var(--color-text-inverse); --hs-submit-radius: 12px; --hs-submit-height: 48px; --hs-submit-width: 100%; /* вариант может оставить одну лупу квадратом */ /* выпадающий список (принят вариант v1, 13.08.2026): список висит под полем, но не упирается в границы витрины — на телефоне ему отдано две трети экрана, сверху идёт своя строка поиска (городов больше тысячи, категорий шесть десятков). Варианты подменяют эти токены (variants/variants-home.css) */ --hs-drop-position: absolute; --hs-drop-inset: calc(100% + var(--space-2)) auto auto 0; --hs-drop-inset-last: calc(100% + var(--space-2)) 0 auto auto; --hs-drop-display: block; --hs-drop-backdrop: transparent; --hs-panel-max-height: 62vh; --hs-panel-max-width: min(88vw, 440px); --hs-head-display: flex; /* строка поиска внутри списка */ --hs-head-title-display: none; --hs-close-display: none; /* герой больше не режет то, что вылезает за его углы: иначе длинный список обрезается высотой витрины */ --home-hero-overflow: visible; background: var(--color-bg); } /* ------------------------------------------------------------ Колонка страницы Роль .hm-main прототипа здесь играет обёртка .pdd-home, которую отдаёт generate_page(). order сбрасывается явно: frontend.css задаёт .page-template-newlisting .buttons-new { order: 10 }, и любой новый flex-контейнер обязан объявить свой порядок сам. ------------------------------------------------------------ */ body.pdd .pdd-home { /* Базовая типографика прототипа. У прототипа она объявлена на body (13px/1.45), у нас body занят движком, поэтому база живёт на обёртке страницы. Без неё всё, что не задаёт line-height само, наследует 1.3 от frontend.css: поля поиска выходят 51px вместо 55, подписи 14 вместо 16, и ряд чипов уезжает вверх. */ font-size: var(--font-size-meta); line-height: var(--line-height-base); display: flex; flex-direction: column; gap: var(--home-gap); /* Колонка та же, что у шапки и подвала: прототип на 1280 держит обёртку 40..1240, а карточки внутри неё — 64..1216. Разница ровно в --home-pad, поэтому предел ставим обёртке, а не секциям. Предел — общий --app-max-width, а не своя calc: до 1024 прототип держит колонку в 430px (телефонный макет по центру окна), и на 768 содержимое расходилось на все 768 при шапке в 430. На широком экране токен и так равен --content-max + 24 с каждой стороны, то есть 1200. */ width: 100%; max-width: var(--app-max-width); margin-inline: auto; padding: var(--home-gap) var(--home-pad) 0; order: 0; } body.pdd .pdd-home > * { order: 0; } /* Сброс полей у заголовков и абзацев. У прототипа он в main.css одной строкой `h1, h2, p { margin: 0 }`; глобально повторить нельзя — под body.pdd лежит разметка движка. Поэтому сброс заужен до нашей обёртки: расстояния внутри блоков задаёт gap, а не margin заголовка. Без этого frontend.css добавляет H1 нижние 20px и герой выше эталона. */ body.pdd .pdd-home :is(h1, h2, h3, h4, p) { margin: 0; } /* Собственных полей у блоков главной нет — расстояние держит gap колонки, как в прототипе. Движок же навешивает свои: section margin-bottom 40px frontend.css .h1..h6, h1..h6 margin-bottom .5rem bootstrap-слой .cap .h1 margin-bottom 15–26px frontend.css / skin.css Замер 14.08.2026: между героем и первой секцией выходило 64px вместо 24, под каждым заголовком блока — лишние 15–20. */ body.pdd .pdd-home .hm-hero, body.pdd .pdd-home .hm-section, body.pdd .pdd-home .hm-seo, body.pdd .pdd-home .hm-head, body.pdd .pdd-home .hm-head__title, body.pdd .pdd-home .hm-head__note, body.pdd .pdd-home .hm-hero__title, body.pdd .pdd-home .hm-hero__text, body.pdd .pdd-home .hm-seo__title { margin-bottom: 0; } /* ------------------------------------------------------------ Общие части блоков: заголовок и панель ------------------------------------------------------------ */ body.pdd .hm-section { display: flex; flex-direction: column; gap: var(--space-7); } body.pdd .hm-head { display: flex; flex-direction: column; gap: var(--space-3); } body.pdd .hm-head__title { font-size: var(--home-head-size); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-title); } body.pdd .hm-head__note { font-size: var(--font-size-subtitle); color: var(--color-text-secondary); } /* надзаголовок: название блока над его заголовком */ body.pdd .hm-head__kicker { font-size: var(--font-size-caption); font-weight: var(--font-weight-semibold); letter-spacing: 0.04em; text-transform: var(--home-kicker-transform, uppercase); color: var(--color-primary); } body.pdd .hm-head__link { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-control); font-weight: var(--font-weight-semibold); color: var(--color-primary); text-decoration: none; } /* ------------------------------------------------------------ Герой: фото во всю карточку, поверх — заголовок и форма ------------------------------------------------------------ */ body.pdd .hm-hero { position: relative; overflow: var(--home-hero-overflow); margin-top: calc(var(--home-gap) * -1); /* прижат к шапке */ background: var(--home-hero-bg); border-radius: var(--home-radius); } body.pdd .hm-hero__photo { position: absolute; inset: 0; display: var(--home-hero-photo-display); width: 100%; height: 100%; object-fit: cover; filter: var(--home-hero-photo-filter); } /* слой узора или свечения: лежит поверх фото, но под содержимым */ body.pdd .hm-hero::after { content: ''; position: absolute; inset: 0; background: var(--home-hero-layer); background-size: var(--home-hero-layer-size); mix-blend-mode: var(--home-hero-layer-blend); pointer-events: none; } body.pdd .hm-hero__body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--space-5); padding: var(--home-hero-pad); background: var(--home-hero-scrim); } body.pdd .hm-hero__title { font-size: var(--home-hero-title-size); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-title); color: var(--home-hero-title-fg); } body.pdd .hm-hero__text { font-size: var(--home-hero-text-size); color: var(--home-hero-text-fg); } /* ------------------------------------------------------------ Форма поиска: выбор сразу по нескольким параметрам Поле — кнопка с подписью и значением, список раскрывается под ней; категория прав выбирается пачкой. ------------------------------------------------------------ */ body.pdd .hs-form { display: flex; flex-direction: column; gap: var(--hs-gap); padding: var(--hs-pad); background: var(--color-surface); border: var(--hs-form-border); border-radius: var(--hs-radius); box-shadow: var(--hs-shadow); } body.pdd .hs-form__row { display: flex; flex-direction: var(--hs-form-row-direction); align-items: var(--hs-form-row-align, stretch); gap: var(--hs-gap); } body.pdd .hs-fields { display: grid; grid-template-columns: var(--hs-fields-template); gap: var(--hs-gap); flex: 1; min-width: 0; } body.pdd .hs-field { position: relative; min-width: 0; } body.pdd .hs-field__control { display: flex; flex-direction: column; gap: 1px; width: 100%; /* button по умолчанию красится в buttontext (чёрный), а не наследует цвет текста, как у прототипа (`button { color: inherit }` в main.css) */ color: inherit; padding: var(--hs-field-pad); /* Это