с фоновой картинкой темы (icon.svg / nopoint.svg, frontend.css:12361). Картинка жёлтая изнутри — токеном её не перекрасить. Поэтому силуэт заезжает маской, а цвет даёт background-color: так звезда живёт на --color-star и меняется вместе с палитрой, а не вместе с файлом родительской темы. */ --star-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1.2 8.8 5l4.1.5-3 2.8.8 4-3.7-2-3.7 2 .8-4-3-2.8L5.2 5 7 1.2Z'/%3E%3C/svg%3E") no-repeat center center; --stars-size: 15px; /* эталон: 13 в мелких карточках, 15 в шапках */ --stars-gap: 1px; /* у движка было 3px — звёзды стояли вразрядку */ /* состояния основной кнопки */ --color-primary-hover: #4d63d8; --color-primary-active: #4457c9; /* --------------------------------------------------------- ФОРМЫ · общие состояния полей Один вид ошибки и выключенного контрола на все формы: вход, регистрация, обратная связь, фильтры, поиск. --------------------------------------------------------- */ --color-field-error: var(--color-rating-low); --color-field-error-bg: #fdeced; --field-disabled-opacity: 0.45; /* минимальный палец: любой контрол не мельче этого */ --tap-target: 44px; /* --------------------------------------------------------- ЦВЕТ · мессенджеры и заглушки Фирменные цвета сервисов и серая «фотография», которой подменяется картинка, пока её нет. --------------------------------------------------------- */ --color-whatsapp: #25d366; --color-telegram: #2aabee; --color-photo-stub: linear-gradient(135deg, #dfe3ea, #c9ced8); --color-map-stub: linear-gradient(135deg, #e9efe9, #dde6e6); --color-map-grid: rgba(0, 0, 0, 0.05); --color-map-route: #d8e5dc; --color-shade: 11 11 15; /* затемнение поверх фото: rgb(var(--color-shade) / a) */ /* --------------------------------------------------------- ТИПОГРАФИКА --------------------------------------------------------- */ --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", "Golos Text", Roboto, "Helvetica Neue", Arial, sans-serif; --font-size-title: 26px; /* «Автошколы в Москве» */ --font-size-heading: 22px; /* название школы на странице карточки */ --font-size-section: 17px; /* заголовки секций */ --font-size-score: 34px; /* средний балл в сводке отзывов */ --font-size-subtitle: 14px; --font-size-input: 14px; /* принято из v8: было 15 */ --font-size-control: 13px; /* чипы, сортировка · принято из v8: было 14 */ --font-size-button: 14px; /* «Записаться», «Позвонить» на карточке школы */ --font-size-meta: 13px; /* «Найдено 248 автошкол», «На карте» */ --font-size-card-title: 15px; --font-size-price: 15px; --font-size-badge: 13px; --font-size-caption: 12px; /* метро, категории */ --font-size-micro: 11px; /* «от», счётчик фото, отзывы */ --font-size-tab: 11px; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-tight: 1.15; --line-height-snug: 1.3; --line-height-base: 1.45; --letter-spacing-title: -0.02em; --letter-spacing-base: 0; /* --------------------------------------------------------- РАДИУСЫ --------------------------------------------------------- */ /* скругления мелкие — из принятого варианта v2 */ --radius-xs: 4px; --radius-sm: 6px; /* бейдж рейтинга, счётчик фото */ --radius-md: 8px; /* фото в карточке, «На карте» */ --radius-lg: 8px; /* поиск, чипы, сортировка */ --radius-xl: 12px; /* карточка */ --radius-pill: 999px; /* --------------------------------------------------------- ТЕНИ --------------------------------------------------------- */ --shadow-card: 0 1px 2px rgba(11, 11, 15, 0.05); --shadow-raised: 0 1px 3px rgba(16, 18, 27, 0.10), 0 1px 2px rgba(16, 18, 27, 0.06); --shadow-float: 0 2px 6px rgba(16, 18, 27, 0.18); /* кружки на фото */ --shadow-tabbar: 0 -1px 0 var(--color-border); --shadow-hover: 0 8px 24px rgba(16, 18, 27, 0.12); /* карточка под мышью */ --shadow-drop: 0 10px 28px rgba(11, 11, 15, 0.14); /* выпадающая панель, число из эталона */ /* --------------------------------------------------------- ОТСТУПЫ --------------------------------------------------------- */ --space-1: 2px; --space-2: 4px; --space-3: 6px; --space-4: 8px; --space-5: 10px; --space-6: 12px; --space-7: 16px; --space-8: 20px; --space-9: 24px; --page-padding: 16px; /* шапка, фильтры, строка результатов */ --grid-padding: 10px; /* сетка карточек шире шапки — как в референсе */ --grid-gap: 8px; --grid-columns: 2; /* колонок в листинге */ /* --------------------------------------------------------- РАЗМЕРЫ КОНТРОЛОВ --------------------------------------------------------- */ /* блок подбора над списком — компактные размеры, принято из v8 */ --control-height-search: 40px; /* было 48 */ --control-height-chip: 32px; /* было 40 */ --control-height-sort: 38px; /* было 46 */ --control-height-map: 30px; /* было 36 */ --control-height-button: 46px; /* «Записаться», «Позвонить» */ --control-height-small: 32px; /* «Выбрать» */ --control-height-segment: 36px; /* переключатель сортировки */ --ctabar-height: 68px; --gallery-aspect: 4 / 3; --app-max-width: 430px; /* Колонка содержимого на широком экране — одна на весь сайт: листинг (подбор + список), главная и карточка школы читаются как один сайт, а не три страницы разной ширины. Поля страницы считаются сверх неё и у каждой страницы свои. */ --content-max: 1152px; --media-aspect: 6 / 5; /* фото карточки · принято из v8: было 16 / 9 */ --border-width: 1px; /* --------------------------------------------------------- ВЕРХНЯЯ ШАПКА САЙТА Значения принятого варианта v4: липкая компактная полоса — бургер, мелкий логотип, «Вход» кружком, разделы сегментами в мягкой плашке. Варианты v1…v3 подменяют эти же токены. --------------------------------------------------------- */ --topbar-bg: var(--color-surface); --topbar-fg: var(--color-text); --topbar-muted: var(--color-text-secondary); --topbar-border: none; --topbar-shadow: var(--shadow-raised); --topbar-position: sticky; --topbar-pad-y: var(--space-4); --topbar-gap: var(--space-4); --topbar-slide: transform 220ms ease; /* уезд и возврат по прокрутке */ /* логотип: картинка assets/img/logo.png, задаётся высотой */ --brand-height-topbar: 22px; /* что показываем в баре */ --topbar-burger-display: inline-flex; --topbar-city-display: inline-flex; --topbar-login-label-display: none; --topbar-login-fg: var(--color-primary); --topbar-login-bg: var(--color-primary-soft); --topbar-login-border: transparent; --topbar-login-pad: 0; --topbar-login-width: 32px; --topbar-login-height: 32px; --topbar-login-radius: var(--radius-pill); /* строка разделов */ --topbar-nav-display: flex; --topbar-nav-gap: var(--space-1); --topbar-nav-pad-bottom: var(--space-5); --topbar-nav-plate-bg: var(--color-primary-soft); --topbar-nav-plate-radius: var(--radius-lg); --topbar-nav-plate-pad: var(--space-2); --topbar-link-fg: var(--color-text-secondary); --topbar-link-bg: transparent; --topbar-link-height: 30px; --topbar-link-pad-x: var(--space-6); --topbar-link-radius: var(--radius-md); --topbar-link-size: var(--font-size-control); --topbar-link-active-fg: var(--color-primary); --topbar-link-active-bg: var(--color-surface); --topbar-link-active-underline: 0px; --topbar-link-active-underline-color: var(--color-primary); /* --------------------------------------------------------- ВЫПАДАЮЩЕЕ МЕНЮ БУРГЕРА Принятый вид — бывший вариант v4: боковая панель слева во всю высоту, разделы подписаны, активный пункт зелёной плашкой, город и вход прижаты к низу. Принято 06.08.2026. --menu-anchor проставляет JS — это нижний край шапки. --------------------------------------------------------- */ --menu-z: 40; --menu-anim: 240ms cubic-bezier(0.2, 0.8, 0.2, 1); --menu-backdrop: rgba(11, 11, 15, 0.48); /* где стоит панель */ --menu-top: 0; --menu-right: auto; --menu-bottom: 0; --menu-left: 0; --menu-width: min(84vw, 320px); --menu-max-height: 100dvh; --menu-from: translateX(-100%); --menu-opacity-from: 1; --menu-bg: var(--color-surface); --menu-radius: 0 var(--radius-xl) var(--radius-xl) 0; --menu-shadow: 12px 0 34px rgba(16, 18, 27, 0.24); --menu-pad: var(--space-8) var(--space-7) var(--space-9); /* что показываем в панели */ --menu-handle-display: none; /* ручка-хваталка — не нужна боковой панели */ --menu-head-display: flex; /* заголовок с крестиком */ --menu-foot-display: flex; /* город и вход внизу */ --menu-icon-display: inline-flex; --menu-chevron-display: none; --menu-group-title-display: block; --menu-group-gap: var(--space-8); --menu-list-display: flex; --menu-list-columns: 1fr 1fr; --menu-list-gap: var(--space-2); --menu-item-height: 44px; --menu-item-pad-x: var(--space-5); --menu-item-gap: var(--space-6); --menu-item-size: var(--font-size-input); --menu-item-weight: var(--font-weight-medium); --menu-item-fg: var(--color-text); --menu-item-bg: transparent; --menu-item-radius: var(--radius-md); --menu-item-divider: none; --menu-item-active-fg: var(--color-primary); --menu-item-active-bg: var(--color-primary-soft); --menu-item-active-weight: var(--font-weight-semibold); --menu-badge-bg: var(--color-primary-soft); --menu-badge-fg: var(--color-primary); --menu-badge-size: var(--font-size-micro); /* --------------------------------------------------------- ВСПЛЫВАЮЩИЕ ФИЛЬТРЫ Принятый вид — бывший вариант v2: боковая панель справа во всю высоту, секции-аккордеоны, значения чекбоксами, чипы переносом, внизу «Сбросить» и «Показать». Принято 06.08.2026. --------------------------------------------------------- */ --sheet-z: 45; --sheet-anim: 260ms cubic-bezier(0.2, 0.8, 0.2, 1); --sheet-backdrop: rgba(11, 11, 15, 0.48); /* где стоит панель */ --sheet-top: 0; --sheet-right: 0; --sheet-bottom: 0; --sheet-left: auto; --sheet-width: min(88vw, 360px); --sheet-height: auto; --sheet-from: translateX(100%); --sheet-opacity-from: 1; --sheet-bg: var(--color-surface); --sheet-radius: var(--radius-xl) 0 0 var(--radius-xl); --sheet-shadow: -12px 0 34px rgba(16, 18, 27, 0.24); /* что показываем */ --sheet-handle-display: none; /* ручка-хваталка нужна только шторке снизу */ --sheet-close-display: inline-flex; --sheet-reset-display: inline-flex; --sheet-chevron-display: inline-flex; --sheet-all-display: inline-flex; --sheet-clear-display: inline-flex; /* шапка панели */ --sheet-head-pad: var(--space-7) var(--page-padding) var(--space-6); --sheet-head-border: var(--border-width) solid var(--color-border); --sheet-head-align: center; --sheet-title-size: var(--font-size-section); --sheet-title-weight: var(--font-weight-semibold); /* тело: секции и их оформление */ --sheet-body-pad: var(--space-6) var(--page-padding) var(--space-8); --sheet-body-bg: transparent; --sheet-section-gap: 0; --sheet-section-bg: transparent; --sheet-section-pad: var(--space-6) 0; --sheet-section-radius: 0; --sheet-section-border: none; --sheet-section-divider: var(--border-width) solid var(--color-border); --sheet-section-title-size: var(--font-size-card-title); --sheet-section-title-weight: var(--font-weight-semibold); --sheet-section-title-transform: none; --sheet-section-title-fg: var(--color-text); --sheet-section-head-height: 36px; /* Высота списка строк в секции фильтра: дальше — своя прокрутка внутри блока, а не рост панели. Число эталонное (design2/assets/css/web.css:1267) — примерно восемь строк, девятая видна краем и говорит, что список прокручивается. */ --sheet-list-height: 248px; /* чипы внутри секции: переносятся, панель узкая */ --sheet-chips-wrap: wrap; --sheet-chips-overflow: visible; --sheet-chips-gap: var(--space-4); --sheet-chip-height: 34px; --sheet-chip-pad: 0 var(--space-6); /* чип прямоугольный, а не пилюлей: невыбранный — белая плашка с волосяной рамкой, выбранный залит основным цветом (принят вариант v2, 10.08.2026) */ --sheet-chip-radius: var(--radius-md); --sheet-chip-size: var(--font-size-control); --sheet-chip-weight: var(--font-weight-medium); --sheet-chip-bg: var(--color-surface); --sheet-chip-fg: var(--color-text); --sheet-chip-border: var(--border-width) solid var(--color-border-strong); --sheet-chip-active-bg: var(--color-primary); --sheet-chip-active-fg: var(--color-text-inverse); --sheet-chip-active-border: var(--border-width) solid var(--color-primary); /* строки с чекбоксом и тумблером */ --sheet-row-height: 42px; --sheet-row-gap: var(--space-5); --sheet-row-pad: 0; --sheet-row-divider: none; --sheet-row-size: var(--font-size-input); --sheet-row-columns: 1fr; --sheet-box-size: 22px; --sheet-box-radius: var(--radius-xs); --sheet-box-border: var(--border-width) solid var(--color-border-strong); --sheet-box-bg: var(--color-surface); --sheet-box-active-bg: var(--color-primary); --sheet-box-active-border: var(--color-primary); --sheet-switch-width: 44px; --sheet-switch-height: 26px; --sheet-switch-bg: var(--color-track); --sheet-switch-active-bg: var(--color-primary); /* поля ввода внутри панели: не коробка, а одна черта под строкой (принят вариант v2, 10.08.2026) */ --sheet-field-height: var(--control-height-search); --sheet-field-pad: 0; --sheet-field-radius: 0; --sheet-field-bg: transparent; --sheet-field-border: 0; --sheet-field-underline: var(--border-width) solid var(--color-border-strong); /* низ панели с кнопкой */ --sheet-foot-pad: var(--space-6) var(--page-padding); --sheet-foot-gap: var(--space-4); --sheet-foot-bg: var(--color-surface); --sheet-foot-border: var(--border-width) solid var(--color-border); --sheet-foot-shadow: none; --sheet-apply-height: var(--control-height-button); --sheet-apply-radius: var(--radius-md); --sheet-apply-bg: var(--color-primary); --sheet-apply-fg: var(--color-text-inverse); --sheet-apply-size: var(--font-size-button); /* --------------------------------------------------------- ПОХОЖИЕ АВТОШКОЛЫ (блок на карточке школы, после отзывов) Принятый вид — бывший вариант v2: карусель карточек, фото 4:3 сверху, две с половиной в экране, полоса вынесена под края. Принято 06.08.2026. Варианты v1, v3, v4 подменяют эти же токены в variants/variants.css. --------------------------------------------------------- */ --similar-display: flex; --similar-direction: row; --similar-columns: none; --similar-gap: var(--space-5); --similar-overflow: auto; --similar-bleed: var(--page-padding); /* вынос полосы под края экрана */ --similar-snap: x proximity; /* карточка */ --similar-card-width: 62%; --similar-card-direction: column; --similar-card-align: stretch; --similar-card-gap: var(--space-5); --similar-card-pad: 5px 5px var(--space-5); --similar-card-bg: var(--color-surface); --similar-card-border: var(--border-width) solid var(--color-border); --similar-card-radius: var(--radius-xl); --similar-card-shadow: var(--shadow-card); --similar-card-overflow: visible; --similar-divider: none; /* фото */ --similar-media-width: 100%; --similar-media-aspect: 4 / 3; --similar-media-radius: var(--radius-md); --similar-scrim-display: none; /* бейдж рейтинга на фото */ --similar-rating-display: inline-flex; --similar-rating-inset: var(--space-4) auto auto var(--space-4); --similar-rating-size: var(--font-size-micro); --similar-rating-pad: 2px var(--space-3); /* текст */ --similar-body-position: static; --similar-body-inset: auto; --similar-body-pad: 0 var(--space-5); --similar-body-fg: var(--color-text); --similar-body-muted: var(--color-text-secondary); --similar-body-gap: var(--space-2); --similar-name-size: var(--font-size-meta); --similar-name-lines: 2; --similar-meta-display: flex; --similar-price-size: var(--font-size-card-title); --similar-foot-direction: row; --similar-foot-align: baseline; --similar-foot-gap: var(--space-4); /* --------------------------------------------------------- КАРТОЧКА АВТОШКОЛЫ (school.html) Принятый вид — бывший вариант v1: название, под ним отзывы, строка разделов, ряд действий, контакты с мессенджерами и сайтом, время работы со статусом «работает сейчас», адрес с картой, цены, отзывы, инструкторы, похожие. Фото липкое: остаётся на месте, содержимое уезжает поверх. Принято 06.08.2026. Варианты v2…v4 подменяют эти же токены в variants/variants.css. Разметка общая — school.js. --------------------------------------------------------- */ /* порядок блоков на экране */ --school-order-gallery: 1; --school-order-intro: 2; --school-order-tabs: 3; --school-order-actions: 4; --school-order-contacts: 5; --school-order-hours: 6; --school-order-address: 7; --school-order-services: 8; --school-order-reviews: 9; --school-order-instructors: 10; --school-order-questions: 11; --school-order-similar: 12; --school-order-footer: 13; /* запас под липкой полосой «Позвонить» в конце блока «Похожие автошколы» — иначе полоса ложится на карусель */ --school-similar-tail: calc(var(--ctabar-height) + var(--space-6)); /* галерея: sticky — фото остаётся на месте, содержимое страницы уезжает поверх него; relative — обычная */ --school-gallery-position: sticky; /* подложка под содержимым: закрывает липкое фото, когда страница поехала вниз */ --school-backdrop-bg: var(--color-bg); /* тень у прилипшей строки разделов */ --school-tabs-pinned-shadow: 0 2px 8px rgba(16, 18, 27, 0.10); /* ряд действий «Записаться · Позвонить · На карте» */ --school-actions-margin: var(--space-4) 0 0; --school-actions-pad: var(--space-6) var(--page-padding) var(--space-7); /* что показываем */ --school-tabs-display: flex; --school-actions-display: flex; --school-contacts-display: block; --school-hours-display: block; --school-address-display: block; --school-scrim-display: none; --school-rank-display: none; --school-status-photo-display: none; --school-status-intro-display: none; --school-status-head-display: inline-flex; --school-hours-list-display: none; --school-hours-summary-display: flex; --school-messenger-label-display: none; --school-contact-chevron-display: none; --school-social-title-display: block; --school-map-display: flex; --school-cta-call-display: inline-flex; --school-cta-enroll-display: none; --school-cta-icons-display: flex; /* полоса «Позвонить»: 0 — видна всегда и паркуется над футером, 1 — выезжает, только когда ряд действий ушёл вверх, и прячется у футера (читает school.js) */ --school-cta-auto: 1; /* блок «Вопросы» — цель раздела «Вопросы» в строке разделов */ --school-questions-display: block; --school-faq-pad: var(--space-5) 0; --school-faq-divider: var(--border-width) solid var(--color-border); --school-faq-question-size: var(--font-size-meta); --school-faq-answer-size: var(--font-size-caption); /* секции: заголовки — мелкие серые подписи */ --school-section-margin: var(--space-3) 0 0; --school-section-pad: var(--space-7) var(--page-padding); --school-section-bg: var(--color-surface); --school-section-border: var(--border-width) solid var(--color-border); --school-section-radius: 0; --school-section-shadow: none; --school-section-head-margin: var(--space-5); --school-section-title-size: var(--font-size-caption); --school-section-title-weight: var(--font-weight-medium); --school-section-title-transform: none; --school-section-title-fg: var(--color-text-muted); --school-section-title-spacing: 0; /* шапка карточки: порядок строк внутри и её оформление */ --school-intro-bg: var(--color-surface); --school-intro-fg: var(--color-text); --school-intro-muted: var(--color-text-secondary); --school-intro-pad: var(--space-7) var(--page-padding) var(--space-6); --school-intro-margin: 0; --school-intro-radius: 0; --school-title-order: 1; --school-title-size: 24px; --school-rating-order: 2; --school-rows-order: 3; --school-rank-order: 4; --school-status-order: 5; /* строка разделов «Инфо · Цены · Отзывы» */ --school-tabs-pad: 0 var(--page-padding); --school-tabs-gap: var(--space-8); --school-tabs-bg: var(--color-surface); --school-tabs-border: var(--border-width) solid var(--color-border); --school-tabs-item-height: 44px; --school-tabs-item-size: var(--font-size-input); --school-tabs-item-fg: var(--color-text-secondary); --school-tabs-active-fg: var(--color-text); --school-tabs-underline: 2px; /* статус работы «Открыто · до 21:00» */ --school-status-pad: 0; --school-status-bg: transparent; --school-status-radius: var(--radius-pill); --school-status-size: var(--font-size-caption); --school-status-open-fg: var(--color-rating-high); --school-status-closed-fg: var(--color-rating-low); --school-status-dot-display: inline-block; /* контакты: телефон и сайт ссылками акцентным цветом, мессенджеры — квадратными кнопками с одной иконкой */ --school-contacts-gap: var(--space-6); --school-contact-line-pad: var(--space-3) 0; --school-contact-line-bg: transparent; --school-contact-line-radius: 0; --school-contact-line-border: none; --school-contact-line-divider: none; --school-contact-icon-size: 22px; --school-contact-icon-bg: transparent; --school-contact-icon-fg: var(--color-primary); --school-contact-icon-radius: 0; --school-contact-value-size: var(--font-size-card-title); --school-contact-value-fg: var(--color-primary); --school-messengers-gap: var(--space-4); --school-messenger-grow: 0; --school-messenger-width: 52px; --school-messenger-height: 46px; --school-messenger-pad: 0; --school-messenger-radius: var(--radius-lg); --school-messenger-bg: var(--color-surface-muted); --school-messenger-fg: var(--color-text); --school-messenger-size: var(--font-size-control); --school-social-size: 36px; --school-social-bg: var(--color-surface-muted); --school-social-fg: var(--color-icon-strong); --school-social-radius: var(--radius-pill); /* график работы */ --school-hours-row-pad: var(--space-4) 0; --school-hours-row-divider: var(--border-width) solid var(--color-border); --school-hours-size: var(--font-size-caption); --school-hours-today-fg: var(--color-text); --school-hours-today-weight: var(--font-weight-semibold); --school-hours-today-bg: transparent; /* адрес и карта */ /* карта: 132 эталона + 30% (18.08.2026) и ещё + 30% (19.08.2026), оба раза по просьбе заказчика */ --school-map-height: 224px; --school-map-radius: var(--radius-md); --school-map-margin: var(--space-6) 0 0; /* --------------------------------------------------------- ОТЗЫВЫ (бывший вариант v6, принят 06.08.2026) Балл в красном кольце, под ним лента звёзд, полосы распределения с процентами, синяя кнопка «Оставить отзыв», фильтр по источникам и ряд сортировки. В отзыве — аватар буквой, источник справа, подпись «Комментарий:» и реакции. --------------------------------------------------------- */ --school-reviews-accent: #f2555a; /* кольцо, звёзды, полосы */ --school-reviews-add-bg: #2f80ed; /* кнопка и активные чипы */ --school-reviews-active-fg: #2f80ed; --school-summary-gap: var(--space-7); --school-score-size: 32px; --school-score-ring-size: 128px; --school-score-ring-bg: radial-gradient(closest-side, var(--color-surface) 78%, transparent 79% 100%), conic-gradient(from 200deg, var(--school-reviews-accent) 0 var(--score-arc, 90%), transparent var(--score-arc, 90%) 100%); --school-ribbon-margin: -8px 0 0; --school-ribbon-pad: var(--space-5) var(--space-8); --school-ribbon-bg: var(--color-surface-muted); --school-ribbon-clip: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%, 8% 50%); --school-ribbon-star-fg: var(--school-reviews-accent); --school-bar-height: 7px; --school-bar-fill: var(--school-reviews-accent); --school-bar-star-display: inline-flex; --school-bar-count-display: none; --school-bar-percent-display: block; --school-reviews-add-display: inline-flex; --school-reviews-tools-display: flex; --school-reviews-sources-display: flex; /* чем выбирают источник и порядок (бывший вариант v2, принят 07.08.2026): «Источник отзывов» и «Сортировать» — два выпадающих списка рядом, в одну строку, по половине ширины */ --school-reviews-tools-direction: row; --school-reviews-group-flex: 1 1 0; --school-reviews-chips-display: none; --school-reviews-select-display: flex; --school-avatar-size: 44px; --school-avatar-photo-display: none; --school-avatar-letter-display: inline-flex; --school-avatar-letter-bg: #eef1fb; --school-review-source-display: flex; --school-review-label-display: block; --school-review-text-margin: var(--space-3); --school-review-reactions-display: flex; --school-reaction-bg: #eef1fb; /* нижняя липкая полоса */ --school-cta-gap: var(--space-4); --school-cta-icon-size: 44px; --school-cta-icon-bg: var(--color-surface-muted); --school-cta-icon-fg: var(--color-icon-strong); --school-cta-icon-radius: var(--radius-lg); /* --------------------------------------------------------- НИЖНИЙ БЛОК САЙТА (footer) Принятый вид — бывший вариант v1: развёрнутый светлый футер (две колонки ссылок, плашка подбора, соцсети, телефон). --------------------------------------------------------- */ --footer-bg: var(--color-surface); --footer-fg: var(--color-text); --footer-muted: var(--color-text-secondary); --footer-border: var(--color-border); --footer-top-border: var(--border-width) solid var(--color-border); --footer-radius: var(--radius-xl) var(--radius-xl) 0 0; --footer-margin-top: var(--space-9); --footer-pad-x: var(--page-padding); --footer-pad-y: var(--space-8); --footer-gap: var(--space-8); --footer-align: start; --footer-text-align: left; /* бренд и подпись */ --brand-height-footer: 26px; --footer-tagline-display: block; --footer-tagline-size: var(--font-size-caption); /* блоки, которые варианты включают и выключают */ --footer-social-display: flex; --footer-cta-display: flex; --footer-contacts-display: grid; --footer-nav-display: grid; /* призыв к подбору */ --footer-cta-bg: var(--color-primary-soft); --footer-cta-fg: var(--color-primary); --footer-cta-radius: var(--radius-lg); --footer-cta-pad: var(--space-6); --footer-cta-button-bg: var(--color-primary); --footer-cta-button-fg: var(--color-text-inverse); /* колонки ссылок */ --footer-nav-columns: 2; --footer-nav-gap: var(--space-8) var(--space-6); --footer-group-gap: var(--space-3); --footer-group-border: none; --footer-group-pad: 0; --footer-group-title-size: var(--font-size-caption); --footer-group-title-weight: var(--font-weight-semibold); --footer-group-title-fg: var(--footer-fg); --footer-group-title-transform: uppercase; --footer-group-title-spacing: 0.06em; --footer-group-title-display: flex; --footer-links-direction: column; --footer-links-gap: var(--space-3); --footer-link-size: var(--font-size-caption); --footer-link-fg: var(--footer-muted); --footer-link-bg: transparent; --footer-link-pad: 0; --footer-link-radius: 0; /* соцсети и контакты */ --footer-social-size: 34px; --footer-social-bg: var(--color-surface-muted); --footer-social-fg: var(--color-icon-strong); --footer-social-radius: var(--radius-pill); --footer-phone-size: var(--font-size-card-title); /* нижняя правовая строка */ --footer-legal-border: var(--border-width) solid var(--color-border); --footer-legal-pad-top: var(--space-6); --footer-legal-size: var(--font-size-micro); --footer-legal-fg: var(--color-text-muted); --footer-legal-direction: column; --footer-legal-align: start; /* ------------------------------------------------------------ Карта в веб-версии (assets/css/web.css) Цвета подложки — свои: это не элементы интерфейса, а зелень, вода и кварталы схематичной карты, красить их палитрой сайта нельзя, иначе карта перестаёт читаться картой. ------------------------------------------------------------ */ --webmap-land-from: #eef1f4; --webmap-land-to: #e7ebef; --webmap-park: #d7e8cf; --webmap-water-from: #cfe0f2; --webmap-water-to: #bcd4ec; --webmap-street: rgba(255, 255, 255, 0.6); --webmap-avenue: rgba(255, 255, 255, 0.95); /* Насколько левая часть страницы (весь сайт: шапка от логотипа до кнопки «Вход», сводка, подбор, список, подвал) сдвинута вправо от левого края окна. Принят вариант v5 (08.08.2026): 300px, место под сдвиг отдаёт карта справа. До 1600px сдвига нет: там его место нужно самой карте — со сдвигом она пропадала с экрана на 1280…1500px. */ --web-content-shift: 0px; --web-content-shift-wide: 300px; /* от 1600px — вариант v5 */ /* Мессенджеры: цвета фирменные, темой сайта не подменяются — иначе значок перестаёт узнаваться */ --brand-vk: #0077ff; --brand-wa: #25d366; --brand-tg: #29a9eb; } /* ------------------------------------------------------------ Широкий экран: одна колонка на весь сайт Прототип нарисован под 430px, и --app-max-width — это его ширина. На десктопе она оставалась той же, поэтому шапка сжималась до 430 посреди пустой страницы, подвал растягивался на все 1280, а тело шло третьей шириной: три разных края в одном окне. --content-max для этого и заведён — «одна колонка на весь сайт». Подменяем ею --app-max-width один раз здесь, а не в каждом файле: иначе каждый поток чинит ширину у себя и края снова разъезжаются. ------------------------------------------------------------ */ @media (min-width: 1024px) { :root { /* Прототип на 1280: шапка и подвал 40..1240 (1200), карточки содержимого внутри — 64..1216 (1152). Внешняя колонка шире внутренней ровно на 24 с каждой стороны, это и есть --space-9. */ --app-max-width: calc(var(--content-max) + var(--space-9) * 2); } }