/* ========================================================================== HL — ЕДИНЫЙ ПУБЛИЧНЫЙ КАРКАС: оболочка страницы, Header и Footer. HL UI Specification v2.2: п.4 — единые утверждённые шапка и футер на всех публичных страницах; п.5 — состав элементов; п.37 — адаптивность. Высоты шапки и футера уменьшены примерно вдвое относительно макета «подтверждение_заказа.png» (шапка 137 → 68, футер 85 → 43); логотипы, бренды, кнопки, иконки, шрифты и вертикальные отступы уменьшены пропорционально. Композиция и состав элементов сохранены. ОБЛАСТЬ ДЕЙСТВИЯ — только публичные страницы. Кабинет дилера, экран входа дилера (п.12), интерфейсы сотрудника и владельца, административные и системные экраны сохраняют собственную навигацию (п.3). ИЗОЛЯЦИЯ. Файл подключается в том числе к страницам на Bootstrap, поэтому глобальных селекторов здесь нет: ни body, ни a, ни button, ни .container, ни .row, ни .btn, ни input, ни select. Все правила ограничены префиксами .hl-public-shell / .hl-public-header / .hl-public-footer. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Оболочка страницы и «липкий» футер Футер прижат к низу окна при малом содержимом и уходит за содержимое при большом — исключительно за счёт flex-раскладки оболочки. position: fixed не используется. -------------------------------------------------------------------------- */ .hl-public-shell { /* margin: 0 — на публичных страницах несёт этот класс. Сбрасываем браузерный отступ по умолчанию (8px), иначе он даёт +16px к высоте документа и вертикальную прокрутку при 1536×1024. На Bootstrap-страницах это же делает его Reboot, но зависеть от стороннего CDN ради отсутствия прокрутки нельзя: при недоступном CDN прокрутка вернётся. Селектор не глобальный — правило ограничено классом каркаса. */ margin: 0; min-height: 100vh; display: flex; flex-direction: column; } /* Основная область забирает всё свободное место между шапкой и футером. */ .hl-public-shell > main { flex: 1 0 auto; min-height: 0; } .hl-public-shell > .hl-public-header, .hl-public-shell > .hl-public-footer { flex: 0 0 auto; } /* -------------------------------------------------------------------------- 2. Общие токены каркаса -------------------------------------------------------------------------- */ .hl-public-header, .hl-public-footer { --hlp-bg: #000000; --hlp-line: #2a2a2a; --hlp-border: #4a4f56; --hlp-text: #ffffff; --hlp-muted: #9aa0a6; --hlp-accent: #c8030a; --hlp-font: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif; box-sizing: border-box; background: var(--hlp-bg); color: var(--hlp-text); font-family: var(--hlp-font); } .hl-public-header *, .hl-public-footer *, .hl-public-header *::before, .hl-public-footer *::before, .hl-public-header *::after, .hl-public-footer *::after { box-sizing: border-box; } .hl-public-header img, .hl-public-footer img { display: block; max-width: 100%; } .hl-public-header :focus-visible, .hl-public-footer :focus-visible { outline: 2px solid var(--hlp-accent); outline-offset: 2px; } /* -------------------------------------------------------------------------- 3. Шапка — высота 68 (67 + линия). Было 137. -------------------------------------------------------------------------- */ .hl-public-header { border-bottom: 1px solid var(--hlp-line); } .hl-public-header__inner { display: flex; align-items: center; gap: 16px; height: 67px; max-width: 1536px; margin: 0 auto; padding: 0 26px 0 44px; /* поля макета */ } .hl-public-header__logo { flex: none; line-height: 0; } .hl-public-header__logo-img { width: 76px; /* было 151 */ height: 36px; /* было 72 */ object-fit: contain; } .hl-public-header__rule { flex: none; width: 1px; height: 30px; /* было 60 */ background: var(--hlp-border); } .hl-public-header__brand { flex: none; object-fit: contain; } .hl-public-header__brand--mcgard { width: 78px; height: 17px; } /* пропорция исходника 161×35 */ .hl-public-header__brand--farad { width: 67px; height: 15px; } /* пропорция исходника 143×32 */ .hl-public-header__nav { display: flex; align-items: center; gap: 9px; /* было 17 */ margin-left: auto; /* кнопки прижаты вправо, как в макете */ flex-wrap: nowrap; } .hl-public-header__btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; /* было 67 */ padding: 0 10px; border: 1px solid var(--hlp-border); border-radius: 3px; background: transparent; color: var(--hlp-text); font-family: inherit; font-size: 11px; /* было 15 */ font-weight: 700; letter-spacing: 0.02em; text-decoration: none; white-space: nowrap; transition: border-color 0.15s ease, background-color 0.15s ease; } .hl-public-header__btn:hover { border-color: var(--hlp-accent); background: rgba(200, 3, 10, 0.08); color: var(--hlp-text); } /* Иконки кнопок извлечены из макета и имеют РАЗНЫЕ пропорции, поэтому ширина задаётся индивидуально, а высота выровнена по 16px. */ .hl-public-header__btn-icon { height: 16px; /* было 30 */ flex: none; object-fit: contain; } .hl-public-header__btn-icon--articles { width: 13px; } /* исходник 29×35 */ .hl-public-header__btn-icon--key { width: 16px; } /* исходник 33×33 */ .hl-public-header__btn-icon--cart { width: 17px; } /* исходник 30×29 */ .hl-public-header__btn-icon--lock { width: 13px; } /* исходник 27×33 */ /* «Вход / для дилеров» — на макете в две строки строчными. */ .hl-public-header__btn--login { font-size: 10px; font-weight: 600; letter-spacing: 0; line-height: 1.15; } .hl-public-header__btn-label--two-line { text-align: left; white-space: normal; } /* Неактивные кнопки шапки: «СТАТЬИ» и «ЗАКАЗ ДУБЛИКАТА КЛЮЧА». Обе входят в утверждённый Header, но маршрутов этих страниц в проекте нет. href="#" не применяется, новые маршруты и view не создаются: элемент визуально идентичен кнопке, но ссылкой не является — нажатие не вызывает ни перехода, ни ошибки. */ .hl-public-header__btn--inert { cursor: default; user-select: none; } .hl-public-header__btn--inert:hover { border-color: var(--hlp-border); background: transparent; } /* Счётчик корзины — число ТОВАРНЫХ ПОЗИЦИЙ (не сумма единиц товара). Значение берётся в шаблоне из сессии; Python и backend не изменяются. */ .hl-public-header__cart-count { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 16px; /* было 25 */ height: 16px; border-radius: 50%; background: var(--hlp-accent); color: #ffffff; font-size: 9px; font-weight: 700; line-height: 1; } /* -------------------------------------------------------------------------- 4. Футер — высота 43 (1 + 42). Было 85. Одна строка, как в макете. -------------------------------------------------------------------------- */ .hl-public-footer { border-top: 1px solid var(--hlp-line); } .hl-public-footer__inner { display: flex; align-items: center; gap: 14px; height: 42px; max-width: 1536px; margin: 0 auto; padding: 0 49px 0 57px; /* поля макета */ } .hl-public-footer__item { display: flex; align-items: center; gap: 9px; color: var(--hlp-text); font-size: 13px; /* было 20 */ white-space: nowrap; } .hl-public-footer__rule { flex: none; width: 1px; height: 20px; /* было 36 */ background: var(--hlp-border); } .hl-public-footer__icon { flex: none; object-fit: contain; } .hl-public-footer__icon--pin { width: 14px; height: 18px; } /* пропорция исходника 42×55 */ .hl-public-footer__icon--phone { width: 13px; height: 14px; } /* пропорция исходника 40×43 */ .hl-public-footer__icon--mail { width: 18px; height: 14px; } /* пропорция исходника 55×42 */ .hl-public-footer__icon--msg { width: 14px; height: 14px; } .hl-public-footer__msg .hl-public-footer__text { color: var(--hlp-muted); } .hl-public-footer__link { display: inline-flex; align-items: center; gap: 6px; color: var(--hlp-text); font-size: 12px; /* было 18 */ text-decoration: underline; text-underline-offset: 3px; transition: color 0.15s ease; } .hl-public-footer__link:hover { color: var(--hlp-accent); } .hl-public-footer__link-arrow { width: 12px; height: 8px; flex: none; } /* «Схема проезда»: адрес перехода не задан ни спецификацией, ни макетом — ссылка-заглушка не создаётся, элемент неактивен. */ .hl-public-footer__link--inert { cursor: default; } .hl-public-footer__link--inert:hover { color: var(--hlp-text); } /* Правый край: последний элемент прижимается к правому полю. */ .hl-public-footer__write { margin-left: auto; } /* -------------------------------------------------------------------------- 5. Адаптивность (UI Specification v2.2, п.37) -------------------------------------------------------------------------- */ @media (max-width: 1399px) { .hl-public-header__inner { padding: 0 20px; gap: 12px; height: auto; min-height: 60px; flex-wrap: wrap; } .hl-public-header__nav { gap: 8px; } .hl-public-footer__inner { height: auto; padding: 12px 20px; gap: 12px; flex-wrap: wrap; justify-content: flex-start; } .hl-public-footer__write { margin-left: 0; } } @media (max-width: 767px) { .hl-public-header__inner { padding: 10px 16px; } .hl-public-header__nav { width: 100%; margin-left: 0; flex-wrap: wrap; } .hl-public-header__btn { flex: 1 1 45%; } .hl-public-header__rule { display: none; } .hl-public-footer__inner { flex-direction: column; align-items: flex-start; gap: 10px; } .hl-public-footer__rule { display: none; } .hl-public-footer__write { margin-left: 0; } } @media (prefers-reduced-motion: reduce) { .hl-public-header *, .hl-public-footer * { transition-duration: 0.01ms !important; } }