/* ============================================================================ ok-footer.css — HOME-SHELL-V2 · пакеты HC-05 «FOOTER DESKTOP» + HC-06 «FOOTER MOBILE» ---------------------------------------------------------------------------- Оформление ГЛОБАЛЬНОГО футера (разметка: template-parts/global/footer/*). Спека: 10_FOOTER_IMPLEMENTATION_SPEC · контракт ширины: 06 · токены: 07. ★ ЭТАЛОН-ИСТИНА И ЗАМЕР. Все числа ниже — не из головы и не из старого слоя, а ПИКСЕЛЬНЫЙ ЗАМЕР мастер-файла «03 Футер.dc.html» (десктопное дерево sc-if) в headless Chrome 150, --allow-file-access-from-files, file://, viewport 1440: плашка background #12161f · padding 56px 0 0 · width 1440 (full-bleed) верхняя сетка max-width 1280 · margin 0 auto · padding 0 32px 40px box-sizing border-box → contentWidth 1216 (= .ok-container) колонки grid-template-columns: 1.3fr 1fr 1fr 1.1fr замер: 323.81 / 249.09 / 249.08 / 274.00 px gap 40px — фактические зазоры 40 / 40 / 40 (разброс 0) заголовок кол. 15px / 800 / #ffffff / margin-bottom 14px список flex-column, gap 10px ссылка 14px / 400 / #9aa4b6 / text-decoration none телефон 15.5px / 800 / #ffffff, у первого margin-top 4px Telegram 14px / #9aa4b6, инлайн-иконка 15×15, gap 7px часы 13px / #8a94a6 бренд лого height 40px (width auto → 62.19) + 17px/800/#fff, letter-spacing .01em, ряд gap 11px, margin-bottom 16px лид 13.5px / #9aa4b6 / line-height 1.6 (21.6px) / 0 0 16px преимущества стопка gap 9px · строка 13.5px / #c3ccda / gap 8px иконка 15×15, stroke #3fd07a, stroke-width 2.4 нижняя плашка border-top 1px #262c3a (во всю ширину), внутри контейнер 1280 с padding 22px 32px 26px правовой ряд flex-wrap, gap 10px 22px, margin-bottom 16px, ссылка 13px/#c3ccda строка © border-top 1px #1e2430, padding-top 16px, space-between, © 12.5px/#8a94a6 · дисклеймер 12px/#6f7787/max-width 660px/lh 1.5 overflow scrollWidth == clientWidth == 1440 (0 горизонтали) ⚠️ 0 НОВЫХ #hex — И ЭТО ПРОВЕРЯЕТСЯ ГРЕПОМ. В файле нет ни одного литерала цвета: он-дарк палитра собрана в локальные --okf-* ИЗ глобальных токенов --ok-* через color-mix() (тот же приём, что применялся в зоне подвала ранее). Точность каждой производной замерена, ΔE76 к эталону — в комментариях. Каждый токен объявлен ДВАЖДЫ: сперва простой var()-фолбэк, затем color-mix — браузер без color-mix отбрасывает второе объявление и остаётся на первом (деградация мягкая, читаемость на тёмном сохраняется). ⚠️ КАПКАН TT1 (известен по design.css/okna-mobile.css/ok-foundation.css): родительская Twenty Twenty-One грузится ПОСЛЕ нас и при равной специфичности побеждает ПОРЯДКОМ. На .site-footer она кладёт: max-width: var(--responsive--alignwide-width) (style.css:707) margin-left/right: auto (style.css:783) padding-top/bottom (style.css:783, 3911) .site-footer > * { margin-top/bottom: … } (style.css:891) Класс .site-footer на футере ОСТАВЛЕН намеренно (скип-ссылка на #colophon, 404.css:36, контракт темы), поэтому перечисленное гасится СПЕЦИФИЧНОСТЬЮ `html body .ok-footer …` (0,0,2,1 > 0,0,1,0). `!important` НЕ используется. ⚠️ .ok-scope НА СВОЁМ КОНТЕЙНЕРЕ (решение оркестратора), а не на . Из ok-foundation.css внутрь футера прилетают `.ok-scope a{color:--ok-blue}`, `.ok-scope h4{color:--ok-ink}`, `.ok-scope img{height:auto}` и т.д. — все они (0,0,1,1), поэтому перекрываются здесь парами классов (0,0,2,0). ★ МОБИЛЬНЫЙ ФУТЕР (HC-06) — секция [10] в конце файла. ПИКСЕЛЬНЫЙ ЗАМЕР мобильного дерева мастера «03 Футер.dc.html» (, viewport 390, тот же headless Chrome 150): плашка padding 28px 16px 32px · фон #12161f · ширина 390 бренд лого height 36 (w 55.97) · имя 16px/800 · ряд gap 10 · mb 14 лид 13px / #9aa4b6 / line-height 1.6 (20.8) / margin 0 0 18px секция
с border-top 1px #262c3a у каждой, у последней ещё и border-bottom шапка секции min-height 52 · padding 14px 0 · flex space-between заголовок 14px/800/#fff UPPERCASE letter-spacing .05em (0.7px) шеврон ▾ 12px / #8a94a6 (замер бокса 11.7×17) панель flex-column · gap 13 · padding 2px 0 16px ссылка панели 14px / #9aa4b6 / высота строки 19 телефон 16px/800/#fff, у первого margin-top 4 Telegram 14px, иконка 15×15, gap 7 · часы 13px / #8a94a6 низ flex-column gap 11 · padding-top 16 правовая ссылка 12.5px/#c3ccda · дисклеймер 11.5px/#6f7787 (ПЕРЕД копирайтом) · © 12px/#8a94a6 overflow scrollWidth == clientWidth == 390 и == 375 (0 горизонтали) ⚠️ ТРИ ОСОЗНАННЫХ ОТЛИЧИЯ ОТ МАСТЕРА (подробно — в отчёте HC-06): 1. ТАП-ЦЕЛИ. В мастере 27 из 30 кликабельных элементов НИЖЕ 44px (ссылка панели 19px, правовая 17px) — критерий пакета требует ≥44. Строки-ссылки подняты до min-height 44, а вертикальный gap мастера (13px в панели, 11px в низу) обнулён: разделение теперь даёт сама высота строки, иначе подвал вырос бы вдвое. Шапка секции (52px) уже проходила. 2. ПОРЯДОК. Мастер держит «Сервис и контакты» ПОСЛЕДНИМИ, но раскрытыми; спека 10 и критерий приёмки требуют контакты ПЕРВЫМИ (order:-1). Сделано по спеке: бренд(-2) → КОНТАКТЫ(-1, раскрыты) → услуги → марки. 3. ШЕВРОН ПОВОРАЧИВАЕТСЯ на раскрытии. Мастер статичен и рисует ▾ и в закрытом, и в открытом состоянии; у нас это живой элемент управления, и не отражать состояние — дефект, а не точность. Контент мастер на мобилке РЕЖЕТ (короче лид, нет блока преимуществ, короче дисклеймер) — мы этого НЕ повторяем: одно дерево DOM обслуживает обе ширины, а контент-паритет обязателен. Тексты — вотчина панели, не CSS. ⚠️ СТАРЫЙ МОБИЛЬНЫЙ АККОРДЕОН НЕ УЧАСТВУЕТ. okna-mobile.js:84 ищет `.okna-footer .okna-footer-col` — этой пары классов в новой разметке нет, второго механизма мы не заводим (★ D-02: footer-view.css superseded). JS в HC-06 не добавлено НИ СТРОКИ: раскрытие делает нативный , скрытие — соседний селектор (почему так — см. footer-navigation.php). БРЕЙКПОИНТЫ — КАНОН M1, НОВЫЕ ЗНАЧЕНИЯ ЗАПРЕЩЕНЫ: 1024 / 768 / 600 / 480. ЗАВИСИМОСТЬ: ok-tokens → ok-foundation → ok-layout → ok-footer (deps enqueue). ============================================================================ */ /* ═══ [1] ЛОКАЛЬНАЯ ОН-ДАРК ПАЛИТРА — производные от --ok-* ══════════════════ Почему производные: в 07_DESIGN_TOKEN_REGISTRY закрытая палитра, а тёмная зона требует промежуточных тонов, которых в ней нет. Вводить новые #hex пакету запрещено → берём их вычислением из уже утверждённых токенов. ΔE76 ≤ 2.3 — порог различимости глазом; всё, что ниже, человек не отличит. */ .ok-footer{ /* фон плашки — ТОЧНОЕ совпадение с эталоном #12161f */ --okf-bg:var(--ok-dark); /* белый: заголовки колонок, бренд, телефоны, hover ссылок */ --okf-on:var(--ok-on-dark); /* приглушённый — ТОЧНОЕ совпадение с эталоном #8a94a6 (часы, ©) */ --okf-muted:var(--ok-muted-seed); /* ссылки колонок и лид · эталон #9aa4b6 */ --okf-link:var(--ok-muted-seed); --okf-link:color-mix(in srgb, var(--ok-muted-seed) 83%, var(--ok-tint-blue)); /* ≈#9ba4b5 · ΔE 0.64 */ /* преимущества и правовые ссылки · эталон #c3ccda */ --okf-soft:var(--ok-border); --okf-soft:color-mix(in srgb, var(--ok-muted-seed) 41%, var(--ok-tint-blue)); /* ≈#c5ccd9 · ΔE 0.86 */ /* внешний разделитель нижней плашки · эталон #262c3a */ --okf-line:var(--ok-text); --okf-line:color-mix(in srgb, var(--ok-on-dark) 4%, var(--ok-text)); /* ≈#262d3b · ΔE 0.55 */ /* внутренняя черта над строкой © · эталон #1e2430 */ --okf-line-2:var(--ok-dark); --okf-line-2:color-mix(in srgb, var(--ok-dark) 81%, var(--ok-text-2)); /* ≈#1e242f · ΔE 0.72 */ /* мелкий дисклеймер · эталон #6f7787 */ --okf-fine:var(--ok-muted-seed); --okf-fine:color-mix(in srgb, var(--ok-dark) 23%, var(--ok-muted-seed)); /* ≈#6e7787 · ΔE 0.37 */ /* акцент: hover телефона и кольцо фокуса на тёмном · эталон #7fa6ef */ --okf-accent:var(--ok-on-dark); --okf-accent:color-mix(in srgb, var(--ok-on-dark) 43%, var(--ok-blue)); /* ≈#7ea2e8 · ΔE 2.14 */ /* галочка преимуществ · эталон #3fd07a. ✔ ЗАЯВКА HC-05 ЗАКРЫТА В HC-14: цвет внесён в 07_DESIGN_TOKEN_REGISTRY и ok-tokens.css как --ok-success-bright (из палитры был недостижим — лучшая аппроксимация давала ΔE 18.4). Аппроксимация снята, берём эталон. */ --okf-check:var(--ok-success-bright); /* #3fd07a — эталон */ } /* ═══ [2] ПЛАШКА ФУТЕРА ════════════════════════════════════════════════════ */ /* Замер: background #12161f · padding 56px 0 0 · full-bleed (06 §3 правило 7). `html body` — против TT1 (см. шапку файла), не против собственных слоёв. */ html body .ok-footer{ max-width:none; /* гасим TT1 --responsive--alignwide-width */ margin-inline:0; /* гасим TT1 margin:auto */ padding:56px 0 0; /* гасим TT1 padding-top/bottom */ background:var(--okf-bg); color:var(--okf-link); /* .ok-scope ставит тёмный --ok-text-2 */ } /* TT1 навешивает вертикальные margin на ПРЯМЫХ детей .site-footer — это ломает замеренную геометрию (56px сверху / 40px до нижней плашки). Обнуляем. */ html body .ok-footer > *{ margin-block:0; } /* ═══ [3] ВЕРХНЯЯ СЕТКА — 4 КОЛОНКИ ════════════════════════════════════════ */ /* Ширина/боковые падинги приходят из .ok-container (06 §3 правило 4: шапка, главная и футер живут на ОДНОМ контейнере) — здесь только сетка и низ. minmax(0,Xfr) вместо Xfr: чистый fr имеет авто-минимум min-content и длинное слово в ячейке распирает грид (06 §3 правило 10 — ноль overflow). На vp1440 результат идентичен замеру: 1096px свободных / 4.4fr = 249.09 на 1fr. */ .ok-footer__main{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.1fr); gap:40px; padding-block:0 40px; /* padding-inline остаётся за .ok-container */ } /* Колонка — стопка без внешних отступов (гайд §4: ритм задают gap, не margin). */ .ok-footer__col{ min-width:0; } /* ═══ [4] КОЛОНКА 1 — БРЕНД ════════════════════════════════════════════════ */ .ok-footer__brand{ display:flex; align-items:center; gap:11px; margin-bottom:16px; } /* Пара классов (0,0,2,0) — иначе `.ok-scope img{height:auto}` (0,0,1,1) перебьёт высоту логотипа. Ширина auto сохраняет пропорции SVG 131×84. */ .ok-footer .ok-footer__brand-mark{ height:40px; width:auto; flex:0 0 auto; } .ok-footer__brand-name{ font-size:17px; font-weight:var(--ok-fw-black); line-height:1.2; letter-spacing:.01em; color:var(--okf-on); } /* `.ok-scope p{margin:0 0 16px}` уже даёт нужный отступ — фиксируем явно. */ .ok-footer .ok-footer__lead{ margin:0 0 16px; font-size:13.5px; line-height:1.6; color:var(--okf-link); } /* Преимущества.
    вместо трёх эталона: это список по смыслу, и скринридер объявит «список из 3». Маркеры TT1 (`ul{list-style-type:disc}`) снимаем — класс (0,0,1,0) сильнее элемента (0,0,0,1). */ .ok-footer__adv{ display:flex; flex-direction:column; gap:9px; margin:0; padding:0; list-style:none; } .ok-footer__adv-item{ display:flex; align-items:center; gap:8px; margin:0; font-size:13.5px; line-height:1.4; color:var(--okf-soft); } .ok-footer__adv-ic{ flex:0 0 auto; color:var(--okf-check); /* SVG нарисован stroke="currentColor" */ } /* ═══ [5] КОЛОНКИ 2-4 — ЗАГОЛОВОК И СПИСОК ═════════════════════════════════ */ /* ★ HC-06 · НА ДЕСКТОПЕ АККОРДЕОНА НЕТ ВООБЩЕ.
    вырезан из потока И из дерева доступности (display:none), поэтому широкий экран получает ровно то, что принято в HC-05: заголовок-

    , ни одного лишнего табстопа и никакого aria-expanded="false" над развёрнутым списком. Включается обратно только в @media (max-width:768px), секция [10]. Пара классов (0,0,2,0) — с запасом над `details{display:block}` из TT1 (0,0,0,1), которая грузится ПОСЛЕ нас (капкан из шапки файла). */ .ok-footer .ok-footer__acc{ display:none; } /* Пара классов — против `.ok-scope h4{color:--ok-ink; font-weight:700}` (0,0,1,1). Кегль 15px совпадает с --ok-fs-h4, вес по эталону 800. */ .ok-footer .ok-footer__title{ margin:0 0 14px; font-size:var(--ok-fs-h4); font-weight:var(--ok-fw-black); line-height:1.25; color:var(--okf-on); } .ok-footer__list{ display:flex; flex-direction:column; gap:10px; margin:0; padding:0; list-style:none; } .ok-footer__list > li{ margin:0; } /* ★ СТРУТ. В эталоне ссылки — прямые дети flex-колонки, поэтому высота строки равна высоте самой ссылки (19px при 14px/1.35). У нас между колонкой и ссылкой стоит
  • (список нужен для семантики и скринридера), и он приносит СВОЙ strut: наследованные 16px × line-height 1.55 из .ok-scope = 24.8px. Замер поймал это как шаг пунктов 35px вместо эталонных 29px (10 gap + 19). Лечение — сделать содержимое
  • блочным: тогда у
  • нет собственного инлайн-контента, strut не создаётся, высота равна высоте ссылки. Заодно ссылка растягивается на ширину колонки — ровно как в эталоне (там анкоры блокифицируются как flex-элементы). */ .ok-footer .ok-footer__link, .ok-footer .ok-footer__phone, .ok-footer .ok-footer__mail, .ok-footer .ok-footer__hours{ display:block; } /* Ссылка пункта. (0,0,2,0) уверенно бьёт и `.ok-scope a` (0,0,1,1), и `a` TT1. */ .ok-footer .ok-footer__link{ font-size:14px; font-weight:var(--ok-fw-regular); line-height:1.35; color:var(--okf-link); text-decoration:none; background:transparent !important; border-radius:0; transition:color .2s ease, transform .1s ease; } .ok-footer .ok-footer__link:hover, .ok-footer .ok-footer__link:focus-visible{ color:var(--okf-on); background:transparent !important; } .ok-footer .ok-footer__link:active{ color:var(--okf-link); background:transparent !important; transform:translateY(1px); } /* ═══ [6] КОНТАКТЫ В КОЛОНКЕ 4 ═════════════════════════════════════════════ */ /* Телефон — главный акцент колонки: 15.5px/800/белый. */ /* W5-P02: `background:transparent !important` в БАЗЕ — щит от TT1 `a:focus{rgba(255,255,255,.9)}` («белый квадрат» на клике/тапе). Тот же приём, что у .ok-footer__link ниже. */ .ok-footer .ok-footer__phone{ font-size:15.5px; font-weight:var(--ok-fw-black); line-height:1.3; color:var(--okf-on); text-decoration:none; background:transparent !important; border-radius:0; transition:color .2s ease, transform .1s ease; } .ok-footer .ok-footer__phone:hover, .ok-footer .ok-footer__phone:focus-visible, .ok-footer .ok-footer__phone:focus{ color:var(--okf-accent); background:transparent !important; } .ok-footer .ok-footer__phone:active{ color:var(--okf-accent); background:transparent !important; transform:translateY(1px); } /* Эталон отбивает первый телефон от ссылок дополнительными 4px. */ .ok-footer__list > li.is-first-contact{ margin-top:4px; } /* Почта — по спеке 10 (в эталоне её нет), поэтому спокойный вид пункта списка. */ .ok-footer .ok-footer__mail{ font-size:14px; line-height:1.35; color:var(--okf-link); text-decoration:none; word-break:break-word; /* длинный адрес не распирает колонку */ background:transparent !important; border-radius:0; transition:color .2s ease, transform .1s ease; } .ok-footer .ok-footer__mail:hover, .ok-footer .ok-footer__mail:focus-visible, .ok-footer .ok-footer__mail:focus{ color:var(--okf-on); background:transparent !important; } .ok-footer .ok-footer__mail:active{ color:var(--okf-on); background:transparent !important; transform:translateY(1px); } /* Telegram — иконка + подпись одной строкой. display:flex (а не inline-flex): инлайн-уровневый элемент внутри
  • снова поднял бы strut (см. выше). */ .ok-footer .ok-footer__tg{ display:flex; align-items:center; gap:7px; font-size:14px; line-height:1.35; color:var(--okf-link); text-decoration:none; background:transparent !important; border-radius:0; transition:color .2s ease, transform .1s ease; } .ok-footer .ok-footer__tg:hover, .ok-footer .ok-footer__tg:focus-visible, .ok-footer .ok-footer__tg:focus{ color:var(--okf-on); background:transparent !important; } .ok-footer .ok-footer__tg:active{ color:var(--okf-on); background:transparent !important; transform:translateY(1px); } /* Иконка Telegram. ✔ ЗАЯВКА HC-05 ЗАКРЫТА В HC-14: эталон даёт иконке БРЕНД-цвет сервиса #2aabee, а волна была вынуждена оставить currentColor («0 новых #hex»). Цвет внесён в 07_DESIGN_TOKEN_REGISTRY и ok-tokens.css как --ok-telegram: подменять бренд-цвет стороннего сервиса нашим синим нельзя — на нём держится узнаваемость иконки. Подпись рядом остаётся ссылочного цвета. */ .ok-footer__tg-ic{ flex:0 0 auto; color:var(--ok-telegram); } .ok-footer__hours{ font-size:13px; line-height:1.4; color:var(--okf-muted); } /* ═══ [7] НИЖНЯЯ ПЛАШКА ════════════════════════════════════════════════════ */ /* Черта во всю ширину (full-bleed), контент — снова в .ok-container. */ .ok-footer__bottom{ border-top:1px solid var(--okf-line); } .ok-footer__bottom-in{ padding-block:22px 26px; } .ok-footer__legal-nav{ display:flex; flex-wrap:wrap; gap:10px 22px; margin-bottom:16px; } .ok-footer .ok-footer__legal-link{ font-size:13px; line-height:1.35; color:var(--okf-soft); text-decoration:none; background:transparent !important; border-radius:0; transition:color .2s ease, transform .1s ease; } .ok-footer .ok-footer__legal-link:hover, .ok-footer .ok-footer__legal-link:focus-visible{ color:var(--okf-on); background:transparent !important; } .ok-footer .ok-footer__legal-link:active{ color:var(--okf-soft); background:transparent !important; transform:translateY(1px); } .ok-footer__copyrow{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px 24px; border-top:1px solid var(--okf-line-2); padding-top:16px; } .ok-footer__copy{ font-size:12.5px; line-height:1.4; color:var(--okf-muted); } .ok-footer__disclaimer{ max-width:660px; font-size:12px; line-height:1.5; color:var(--okf-fine); } /* Реквизиты — печатаются, только когда заполнены (★ HC-00: сейчас пусто). */ .ok-footer .ok-footer__requisites{ margin:12px 0 0; font-size:12px; line-height:1.5; color:var(--okf-fine); } /* ═══ [8] ФОКУС НА ТЁМНОМ ══════════════════════════════════════════════════ */ /* ok-foundation даёт кольцо --ok-blue: на #12161f оно почти не видно. Специфичность равна (0,0,2,0), но этот файл грузится позже — выигрываем. */ .ok-footer :focus-visible{ outline:2px solid var(--okf-accent); outline-offset:2px; border-radius:6px; } /* Гайд §10 / a11y: уважаем системную настройку «меньше движения». ⚠️ Шеврона аккордеона здесь НЕТ намеренно: его transition объявлен ниже, в мобильном блоке [10], а медиазапрос специфичности не добавляет — правило отсюда проиграло бы ему ПОРЯДКОМ (проверено живьём: при эмуляции reduce шеврон сохранял transform .2s). Гашение вынесено в хвост файла, секция [11]. */ @media (prefers-reduced-motion:reduce){ .ok-footer .ok-footer__link, .ok-footer .ok-footer__phone, .ok-footer .ok-footer__mail, .ok-footer .ok-footer__tg, .ok-footer .ok-footer__legal-link{ transition:none; } } /* ═══ [9] РЕСПОНСИВ — ДЕГРАДАЦИЯ СЕТКИ ═════════════════════════════════════ */ /* РЕЕСТР БРЕЙКПОИНТОВ — КАНОН M1: 1024 / 768 / 600 / 480. Боковые падинги переключает сам .ok-container (24px ≤1024, 16px ≤600) — здесь их НЕ трогаем. */ /* ── LG 1024: десктоп → планшет. Четыре колонки по 249px не помещаются, бренд уходит на всю ширину, остальные три встают в две колонки. ─────── */ @media (max-width:1024px){ .ok-footer__main{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 40px; } .ok-footer__col--company{ grid-column:1 / -1; } } /* ═══ [10] ★ HC-06 — МОБИЛЬНЫЙ ФУТЕР: АККОРДЕОН
    / ════════ Ниже 768 колонки-навигации превращаются в раскрывающиеся секции. Замер мастера, три осознанных отличия от него и причина «список рядом, а не внутри
    » — в шапке файла и в footer-navigation.php. JS не используется. */ @media (max-width:768px){ /* ── 10.1 ПОРЯДОК: КОНТАКТЫ ПЕРВЫМИ ───────────────────────────────────── Критерий приёмки пакета — `order:-1` у контактов. Бренд при этом обязан остаться шапкой подвала (так в мастере), поэтому ему -2. Итог сверху вниз: бренд (-2) → КОНТАКТЫ (-1, раскрыты) → Услуги (0) → Марки (0). Работает потому, что .ok-footer__main — grid, а колонки его прямые дети. */ .ok-footer__col--company { order:-2; } .ok-footer__col--contacts{ order:-1; } /* ── 10.2 ОДНА КОЛОНКА, БЕЗ ГЭПА ──────────────────────────────────────── Ритм задают линии-разделители секций (как в мастере), а не gap сетки. padding-block:0 — чтобы черта .ok-footer__bottom прижалась к последней секции: в мастере роль этой черты играет border-bottom последнего
    . */ .ok-footer__main{ grid-template-columns:minmax(0,1fr); gap:0; padding-block:0; } .ok-footer__col--company{ grid-column:auto; } /* ── 10.3 ПЕРЕКЛЮЧЕНИЕ «ЗАГОЛОВОК ↔ АККОРДЕОН» ────────────────────────── Ровно один из двух заголовков показан на любой ширине; display:none у второго вырезает его и из дерева доступности (дубля для скринридера нет). */ .ok-footer .ok-footer__title--static{ display:none; } .ok-footer .ok-footer__acc{ display:block; } /* ── 10.4 БРЕНД-БЛОК: мастер на мобилке всё уменьшает ───────────────────── */ html body .ok-footer{ padding-top:44px; } /* канон 56 → 44 → 28 (≤600) */ .ok-footer__brand{ gap:10px; margin-bottom:14px; } .ok-footer .ok-footer__brand-mark{ height:36px; } .ok-footer__brand-name{ font-size:16px; } .ok-footer .ok-footer__lead{ font-size:13px; } /* Отбивка бренд-колонки от первой линии = 18px (в мастере это margin лида; у нас под лидом ещё блок преимуществ, поэтому отступ уехал в конец колонки). */ .ok-footer__col--company{ padding-bottom:18px; } /* ── 10.5 СЕКЦИЯ И ЕЁ ШАПКА ───────────────────────────────────────────── Линия сверху у каждой секции; закрывающую снизу рисует .ok-footer__bottom. */ .ok-footer__col--services, .ok-footer__col--catalog, .ok-footer__col--contacts{ border-top:1px solid var(--okf-line); } /* — тап-цель 52px (мастер). Перевод в flex ЗАОДНО убирает нативный маркер-треугольник: он существует только при display:list-item из UA-стиля (и из TT1 `summary{display:list-item}`). list-style/::-webkit-details-marker — страховка для старых движков. */ .ok-footer .ok-footer__sum{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:52px; padding-block:14px; cursor:pointer; list-style:none; } .ok-footer .ok-footer__sum::-webkit-details-marker{ display:none; } .ok-footer .ok-footer__sum::marker{ content:""; } /* Заголовок внутри шапки: мастер 14px/800 UPPERCASE, ls .05em, без отступа (на десктопе тот же класс несёт 15px и margin-bottom 14 — здесь гасим). */ .ok-footer .ok-footer__sum .ok-footer__title{ margin:0; font-size:14px; letter-spacing:.05em; text-transform:uppercase; } /* Шеврон: ★ отличие 3 — отражает состояние (мастер статичен). */ .ok-footer .ok-footer__acc-ic{ flex:0 0 auto; color:var(--okf-muted); transition:transform .2s ease; } .ok-footer .ok-footer__acc[open] .ok-footer__acc-ic{ transform:rotate(180deg); } /* ── 10.6 ★ СВОРАЧИВАНИЕ — ЕДИНСТВЕННОЕ ПРАВИЛО, И ОНО ТОЛЬКО СКРЫВАЕТ ─── Список лежит СОСЕДОМ после
    (см. footer-navigation.php), поэтому состояние секции читается соседним селектором. Правило живёт исключительно здесь, внутри мобильного медиазапроса: на десктопе спрятать список нечем даже теоретически, а браузер, который не понял селектор, просто ничего не скроет — деградация в сторону «всё видно». */ .ok-footer .ok-footer__acc:not([open]) ~ .ok-footer__list{ display:none; } /* ── 10.7 ПАНЕЛЬ И ТАП-ЦЕЛИ ≥44 (★ отличие 1) ──────────────────────────── */ .ok-footer__list{ gap:0; /* 13px мастера съедены высотой строк */ padding-bottom:8px; } .ok-footer .ok-footer__link, .ok-footer .ok-footer__phone, .ok-footer .ok-footer__mail, .ok-footer .ok-footer__tg, .ok-footer .ok-footer__legal-link{ display:flex; align-items:center; min-height:44px; } /* Часы — не ссылка, тап-минимум к ним не относится; держим строку в ритме. */ .ok-footer .ok-footer__hours{ display:flex; align-items:center; min-height:38px; } /* Телефон на мобилке крупнее: мастер 16px против 15.5px десктопа. */ .ok-footer .ok-footer__phone{ font-size:16px; } /* ── 10.8 НИЖНЯЯ ПЛАШКА: столбик, как в мастере ───────────────────────── Мастер печатает правовые ссылки колонкой, затем дисклеймер, затем ©, и НЕ разделяет их внутренней чертой. */ .ok-footer__bottom-in{ padding-block:16px 32px; } /* Safe-area (спека 10 §«Мобилка»): вырез/жест-бар iOS не должен наезжать на последнюю строку. Отдельным объявлением — движок без env() отбросит только его и останется на 32px выше. */ .ok-footer__bottom-in{ padding-bottom:calc(32px + env(safe-area-inset-bottom, 0px)); } .ok-footer__legal-nav{ flex-direction:column; gap:0; margin-bottom:0; } .ok-footer .ok-footer__legal-link{ font-size:var(--ok-fs-micro); } /* 12.5px = мастер */ .ok-footer__copyrow{ flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:11px; border-top:0; padding-top:11px; } /* В мастере дисклеймер идёт ПЕРЕД копирайтом (на десктопе — наоборот). */ .ok-footer__disclaimer{ order:-1; max-width:none; font-size:11.5px; } .ok-footer__copy{ font-size:12px; } } /* ── SM 600: телефон. Ритм плашки по мастеру (замер vp390: padding-top 28). ── Геометрия аккордеона и низа уже задана в блоке ≤768 — не дублируем. ──── */ @media (max-width:600px){ html body .ok-footer{ padding-top:28px; } } /* ═══ [11] ХВОСТ: «МЕНЬШЕ ДВИЖЕНИЯ» ПОВЕРХ МОБИЛЬНОГО БЛОКА ═══════════════ Единственная анимация, объявленная ПОСЛЕ секции [8], — поворот шеврона. Медиазапрос специфичности не даёт, поэтому гасить её нужно тем же оружием: тем же весом селектора, но ПОЗЖЕ по файлу. Проверено эмуляцией prefers-reduced-motion в headless Chrome: до этого блока шеврон оставался с transform .2s, после — transition:none. */ @media (prefers-reduced-motion:reduce){ .ok-footer .ok-footer__acc-ic{ transition:none; } } /* [W5-P02 п.5] Тач-цели футера ≥44. Канон «И» (D-209). Без !important: правило с тем же весом, позже по файлу, перебивает базовые высоты. */ @media (hover:none) and (pointer:coarse){ .ok-footer .ok-footer__link, .ok-footer .ok-footer__phone, .ok-footer .ok-footer__mail, .ok-footer .ok-footer__tg, .ok-footer .ok-footer__legal-link{ display:flex; align-items:center; min-height:44px; } }