/* ============================================================================ ok-legacy-compat.css — HOME-SHELL-V2 · пакет HC-14 ---------------------------------------------------------------------------- ЕДИНЫЙ СЛОЙ СОВМЕСТИМОСТИ old→new. Спека: 14_CSS_JS_ARCHITECTURE («миграция old→new, локализация конфликтующих старых правил») + 06_GLOBAL_LAYOUT_CONTRACT §4. ЗАЧЕМ ОН ПОЯВИЛСЯ. Пять волн HC-08…HC-13 независимо друг от друга уткнулись в ОДИН И ТОТ ЖЕ слой чужих правил и лечили его каждая у себя. Итог к началу HC-14: 111 `!important` (объявлений, без комментариев) по слоям оболочки, почти все — против чужого `!important`; три волны оставили в комментариях прямую заявку «системное место лечения — ok-legacy-compat.css/HC-14» (ok-home-w3.css:100). Этот файл — то самое системное место. ЧТО ЦЕНТРАЛИЗОВАНО (замер до/после — в отчёте HC-14): §1 ритм секций — 16 строк волны 3 → 1 правило на все секции каскада; §2 Manrope в ul/ol— 5 селекторов волны 3 → 1 правило на всю оболочку; §3 мобильный H2 — 6 копий одного значения → 1 правило; ПОБОЧНО починены 30 заголовков, у которых кегль задавал легаси (22 вместо 23); §4 ось 37px — 6 правил в волнах 2/4/5 → 1 правило; §5 контейнеры — 10 разъехавшихся рамок внутренних шаблонов → канон 1280/32. ИТОГ ПО `!important`: 111 → 101 в блочных слоях + 3 здесь. Остальные 101 разобраны в §[6]: они не «недоделка», а доказанно неснимаемые в этом пакете. HC-16 добавил сюда §[7] — ещё два `!important` (радиус сабмита и цвет звёзд), оба против чужого `!important` из FORBID-файлов; итого в этом файле их 5. ГДЕ В КАСКАДЕ. functions.php: ok-tokens → ok-foundation → ok-layout → ★ok-legacy-compat → ok-header → ok-footer → ok-home → ok-home-w1…w5. Слой стоит ПОСЛЕ раскладки и ДО блочных слоёв: он восстанавливает канон, а блок при необходимости уточняет его своей (более высокой) специфичностью. ★ ЛОВУШКА, ИЗ-ЗА КОТОРОЙ ЗДЕСЬ ВЕЗДЕ СПЕЦИФИЧНОСТЬ, А НЕ ПОРЯДОК. twentytwentyone/style.css грузится ДВАЖДЫ — первым и последним (замер HC-02). Плюс glavnaya.css/design.css в очереди WP стоят ПОСЛЕ ok-*. Перебить их порядком enqueue физически нельзя — только специфичностью (и `!important` там, где у чужого правила он уже стоит). ═══ ГРАНИЦА СЛОЯ (что сюда НЕ попало и почему — подробности в §[6]) ═══ Здесь лежит только то, что ОБЩЕЕ для нескольких блоков/шаблонов. Цвета конкретной кнопки конкретного блока остаются в блочном слое: они РАЗНЫЕ у разных блоков, и попытка централизовать их ломает блоки, а не освобождает. ЗАВИСИМОСТЬ: ok-tokens.css (значения) + ok-layout.css (контракт .ok-container). ОТКАТ: снять feature-флаг okna_home_shell_v2 — файл перестаёт подключаться. ============================================================================ */ /* ═══ [1] ВЕРТИКАЛЬНЫЙ РИТМ СЕКЦИЙ ВНУТРИ КАСКАДА ГЛАВНОЙ ═══════════════════ ПРОБЛЕМА (замер HC-11, ok-home-w3.css:92-102). glavnaya.css:54 держит .glavnaya-v4 > section{ padding:32px 0 } (0,1,1) а контракт раскладки даёт ритм классом .ok-section{ padding-block:72px } (0,1,0) Классов поровну (1), но у чужого правила ещё и тип-селектор `section` — специфичность выше, и КЛАСС .ok-section внутри .glavnaya-v4 не работает ВООБЩЕ. Каждая волна лечила это своим `html body .ok-<блок>{padding-block:…}`. ЛЕЧЕНИЕ. Возвращаем классу его работу одной строкой на все секции каскада: `html body .glavnaya-v4 > .ok-section` = (0,2,2) уверенно бьёт (0,1,1). Значения — те же токены канона, никаких «своих» чисел: геометрия секций, которые уже лечились локально, не меняется ни на пиксель (доказано замером до/после в отчёте HC-14). `!important` НЕ НУЖЕН: у чужого правила его нет, хватает специфичности. */ html body .glavnaya-v4 > .ok-section{ padding-block:var(--ok-section-space-desktop); /* 72 */ } html body .glavnaya-v4 > .ok-section--compact{ padding-block:var(--ok-section-space-tablet); /* 56 */ } html body .glavnaya-v4 > .ok-section--last{ padding-block:var(--ok-section-space-desktop) var(--ok-section-last-pb); } @media (max-width:1024px){ html body .glavnaya-v4 > .ok-section{ padding-block:var(--ok-section-space-tablet); } /* 56 */ html body .glavnaya-v4 > .ok-section--last{ padding-block:var(--ok-section-space-tablet) var(--ok-section-last-pb); } } @media (max-width:600px){ /* ★ HC-16: 44 / 48 — как у остальных двадцати секций каскада (замер мастера). */ html body .glavnaya-v4 > .ok-section{ padding-block:var(--ok-section-space-mobile) var(--ok-section-last-pb-mobile); } html body .glavnaya-v4 > .ok-section--compact{ padding-block:var(--ok-section-space-xs); } html body .glavnaya-v4 > .ok-section--last{ padding-block:var(--ok-section-space-mobile) var(--ok-section-last-pb-mobile); } } /* ★ HC-16: ветка @480 с понижением до 32px УБРАНА (парная правка к ok-layout.css). Она задавала второй вертикальный ритм на той же странице: 20 секций каскада держат замеренные у мастера 44/48, а 4 секции на классе `.ok-section` уходили на 32/32 — видимый разрыв 12px на 375/390. Полное обоснование и замеры — в ok-layout.css, ветка «XS 480». Убирать надо было В ДВУХ местах: это правило (0,2,2) перебивает `.ok-section` из ok-layout.css по специфичности, поэтому правка только в раскладке дефект бы не вылечила — секции каскада продолжали бы получать 32px отсюда. */ /* ═══ [2] MANROPE ВНУТРИ СПИСКОВ (TT1) ═════════════════════════════════════ ПРОБЛЕМА (замер HC-11, ok-home-w3.css:109-117). twentytwentyone/style.css:2636 ul, ol{ font-family:var(--list--font-family) } (0,0,1) Правило слабое, но бьёт по САМОМУ списку, а `.ok-scope{font-family:…}` стоит на СЕКЦИИ — то есть выше по дереву: прямое объявление всегда побеждает наследование, независимо от специфичности. Внешне — «шрифт похож, но строка на 12px короче». Волна 3 лечила это перечислением своих пяти списков. ЛЕЧЕНИЕ: возвращаем шрифт всем спискам внутри новой оболочки (0,1,1 > 0,0,1). */ .ok-scope ul, .ok-scope ol{ font-family:var(--ok-font); } /* ═══ [3] МОБИЛЬНЫЙ КЕГЛЬ H2 — ОДИН КАНОН ВМЕСТО ШЕСТИ КОПИЙ ═══════════════ ПРОБЛЕМА. okna-mobile.css объявляет глобально и через `!important`: @768 body h1{30px!important} body h2{23px!important} body h3{19px!important} @480 body h1{28px!important} body h2{22px!important} Каждая волна пробивалась сюда встречным `!important` — шесть из них объявляли ОДНО И ТО ЖЕ значение (канон мастера 23px), просто на своём селекторе. ★ ДЕФЕКТ, КОТОРОГО НИКТО НЕ ВИДЕЛ. Пробивались только те заголовки, которые волна специально мерила. Замер HC-14 (19 типов страниц, vp390): h2 = 22px у 30 заголовков · h2 = 23px у 12 то есть у БОЛЬШИНСТВА H2 новой оболочки мобильный кегль задавал не мастер, а ветка @480 легаси-слоя. Одно правило ниже чинит все 30 разом. ★ ПОЧЕМУ ИМЕННО ВСТРЕЧНЫЙ `!important`, А НЕ СНЯТИЕ ПРАВИЛА В ИСТОЧНИКЕ. Проверено живьём (первый прогон HC-14): вывод okna-mobile.css из-под `.ok-scope` через `:not(:where(.ok-scope *))` ЛОМАЕТ оболочку — замер сразу показал h2 34px и h3 22px на vp390 вместо 23/19. Причина: у большинства блоков ДЕСКТОПНОЕ объявление кегля (0,2,0) не сопровождается мобильным, и до сих пор его «подрезал» именно глобальный `!important` легаси-слоя. Он не конфликт, а несущий мобильный фундамент — снимать его нельзя. Значит центральное правило обязано быть `!important`, но с МИНИМАЛЬНОЙ специфичностью (0,1,1): её хватает против `body h2` (0,0,2), и она ниже любого блочного правила, поэтому блок по-прежнему может задать свой кегль (он это делает своим `!important` — см. §[6.6]). `line-height` намеренно БЕЗ `!important`: у легаси его там тоже нет, и блоки меняют интерлиньяж обычным объявлением. H1 и H3 здесь НЕ переопределяются: легаси-значения (30/28 и 19) совпадают с мастером, лишнее правило только добавило бы конкурента блокам. */ @media (max-width:768px){ .ok-scope h2{ font-size:var(--ok-fs-h2-mobile) !important; /* 23px — канон мастера, против body h2{23px!important} */ line-height:var(--ok-lh-h2-mobile); } } /* ═══ [4] ОСЬ ЗАГОЛОВКОВ 37px ══════════════════════════════════════════════ ПРОБЛЕМА. design.css:689-708 сдвигает заголовочные группы старой главной на `--okna-head-indent` (37px) — и делает это через `!important`: .glavnaya-v4 .gv-head{ margin-left:37px!important } (0,2,0) .glavnaya-v4 .okna-section-title{ margin-left:37px!important } (0,2,0) .glavnaya-v4 .okna-showcase__head{ margin-left:27px!important } (0,2,0) .okna-section-sub{ margin-left:37px!important } (0,1,0) В новой оболочке ось — КРАЙ .ok-container (мастер: заголовок и текст в одной вертикали), поэтому отступ снимается. Волны 2/4/5 снимали его пять раз. ЛЕЧЕНИЕ: одно правило (0,2,2) на все заголовочные элементы внутри .ok-scope. `!important` ОБЯЗАТЕЛЕН — у чужого правила он есть, иначе побеждает оно. */ html body .ok-scope :is( .gv-head, .gv-eyebrow, .okna-section-title, .okna-section-sub, .okna-showcase__head, .okna-related__title, .okna-reviews__subhead ){ margin-left:0 !important; } /* ═══ [5] КОНТЕЙНЕРЫ ВНУТРЕННИХ ШАБЛОНОВ → КАНОН 1280/32 ═══════════════════ 06 §3 правило 3: «нельзя держать одновременно container 1200 / wrapper 1280 / content 1180 без явной причины». Замер HC-14 (19 типов страниц, vp1440): рамки внутренних шаблонов разъехались — 1240 / 1248 / 1256 / 1280, при этом боковой padding 20 / 24 / 40, и контент у всех выходил 1200. Целевой канон (D-08, замер мастера) — рамка 1280, padding 32, контент 1216. ★ УСТАРЕЛО, ПЕРЕСМОТРЕНО ПАКЕТОМ W1-P01B (25.07.2026, решение Архитектора D-25). БЫЛО написано здесь: «--okna-cw не трогаем, переменная остаётся 1200, канон наводится ПОД ФЛАГОМ body.ok-shell, флаг остаётся полным откатом». Опасение было в том, что смена 1200→1216 «переверстает весь сайт разом». ФАКТ, снятый W1-P01B до правки (замер 23 страниц + симуляция значения в рантайме): весь сайт разом она НЕ переверстала — 250 контейнеров из 262 уже стояли на контенте 1216 через этот самый файл и .ok-container, то есть --okna-cw они давно не читают. Сдвинулись только те, что исключены списком «ГРАНИЦЫ» ниже, — и сдвинулись В СТОРОНУ канона (1200→1216). СЕЙЧАС: --okna-cw = 1216px (design.css), правило ниже продолжает работать и совпадает с переменной по результату. ⚠ Цена решения, принятая осознанно: снятие флага body.ok-shell больше НЕ возвращает исключённые контейнеры на 1200 — откат геометрии теперь только `git revert` пакета. ★ ГРАНИЦЫ. НЕ входят: · .page-template-tpl-usluga — тело услуги FORBID (03 карта: «контейнер тела НЕ трогать»), поэтому оно явно исключено `:not()`; · 404 — «не переверстывать» (своя карточка в 404.css); · .glavnaya-v4 .okna-wrap — уже приведён волнами 4/5 (замер: 1280/32). ВХОДЯТ, хотя объявлены в FORBID-файлах: `.okna-fc .okna-wrap` (usluga.css:9) и `.okna-uhero__inner` (design.css:1035). Сами файлы НЕ правятся — правило перекрывается отсюда; на самой услуге оба исключены тем же `:not()`, поэтому запрет соблюдён буквально. Без них замер показывал внутренние блоки с pad 40 внутри рамки с pad 32 — контент блока был на 8px уже соседних (ceny, prodazha, raboty, seo-landing). `!important` нужен точечно: design.css:136 держит max-width `.okna-usluga` через `!important`. */ body.ok-shell :is( .okna-usluga, .okna-partner .okna-wrap, .okna-about .okna-wrap, .okna-sitemap .okna-wrap, .okna-org .okna-wrap, .okna-fc .okna-wrap, .okna-uhero__inner, .okna-kontakty__wrap, .okna-blog-wrap, .okna-geo-page__wrap, .okna-steklo-single, .okna-crumbs ):not(.page-template-tpl-usluga *):not(.page-template-tpl-usluga){ max-width:var(--ok-container-max) !important; /* 1280 */ padding-inline:var(--ok-container-pad-desktop); /* 32 → контент 1216 */ margin-inline:auto; box-sizing:border-box; } @media (max-width:1024px){ body.ok-shell :is( .okna-usluga, .okna-partner .okna-wrap, .okna-about .okna-wrap, .okna-sitemap .okna-wrap, .okna-org .okna-wrap, .okna-fc .okna-wrap, .okna-uhero__inner, .okna-kontakty__wrap, .okna-blog-wrap, .okna-geo-page__wrap, .okna-steklo-single, .okna-crumbs ):not(.page-template-tpl-usluga *):not(.page-template-tpl-usluga){ padding-inline:var(--ok-container-pad-tablet); /* 24 */ } } @media (max-width:600px){ body.ok-shell :is( .okna-usluga, .okna-partner .okna-wrap, .okna-about .okna-wrap, .okna-sitemap .okna-wrap, .okna-org .okna-wrap, .okna-fc .okna-wrap, .okna-uhero__inner, .okna-kontakty__wrap, .okna-blog-wrap, .okna-geo-page__wrap, .okna-steklo-single, .okna-crumbs ):not(.page-template-tpl-usluga *):not(.page-template-tpl-usluga){ padding-inline:var(--ok-container-pad-mobile); /* 16 */ } } /* ── [5.1] ШАБЛОНЫ БЕЗ СОБСТВЕННОГО КОНТЕЙНЕРА (корзина, поиск) ────────────── ЗАМЕР HC-14: на /korzina/ и /?s=… тела `.entry-content` НЕ обёрнуты ни одним контейнером темы — ширину им задаёт только twentytwentyone/style.css:693-700 .entry-content > *:not(.alignwide):not(.alignfull){ max-width:610px } (`--responsive--aligndefault-width`). То есть контент этих страниц живёт по правилам TT1, а не по контракту 06 — рамки 1280 у них нет вообще. ★ ЛОВУШКА, ПОЙМАННАЯ ЗАМЕРОМ. Первая версия правила просто снимала лимит (`max-width:none` детям). Результат: контент растянулся на 1425px во всю ширину окна — стало ХУЖЕ, чем было. Снимать чужое ограничение, не дав своего контейнера, нельзя. ЛЕЧЕНИЕ: даём самому `.entry-content` канон-контейнер (1280/32), а детям снимаем узкий лимит TT1 — они выстраиваются по нашей рамке. */ body.ok-shell .entry-content{ max-width:var(--ok-container-max); padding-inline:var(--ok-container-pad-desktop); margin-inline:auto; box-sizing:border-box; } /* ★ W2-P00 · D-63: ЦЕПОЧКА ИСКЛЮЧЕНИЙ БЫЛА КОРОЧЕ ЧУЖОЙ — И ПРОИГРЫВАЛА. Правило родительской темы (twentytwentyone/style.css:693-701) перечисляет ПЯТЬ исключений, а здесь их было два: .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft) :not(.alignright):not(.wp-block-separator){ max-width:610px } = (0,6,0) body.ok-shell .entry-content > *:not(.alignwide):not(.alignfull) = (0,4,1) Каждый :not() добавляет специфичность своего аргумента, поэтому (0,6,0) побеждало и лечение не работало вовсе. Замер до правки: на /?s= первый абзац имел max-width 610px при написанном здесь max-width:none. Чужого !important в том правиле НЕТ — проверено грепом. Поэтому первые два инструмента канона (снять чужой флаг, разнести селекторы) неприменимы, а обязательный промежуточный замер «после снятия чужого important» не имеет предмета — снимать нечего. Остаётся третий инструмент: подъём специфичности без флага — дописаны три недостающих исключения, итог (0,7,1). Новых !important — ноль. */ body.ok-shell .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator){ max-width:none; } @media (max-width:1024px){ body.ok-shell .entry-content{ padding-inline:var(--ok-container-pad-tablet); } } @media (max-width:600px){ body.ok-shell .entry-content{ padding-inline:var(--ok-container-pad-mobile); } } /* ═══ [7] ФИКСЫ ВИЗУАЛЬНОГО РЕГРЕССА (пакет HC-16) ═════════════════════════ Три расхождения с мастером, пойманные геометрическими зондами прибора tools/vr.mjs. Все три невидимы на скриншоте и ловятся только числом — потому и дожили до HC-16. Каждое лечится ЗДЕСЬ, потому что источник конфликта — FORBID-файл (design.css / glavnaya.css), править который нельзя. */ /* ── [7.1] ДВОЙНОЙ БОКОВОЙ ОТСТУП КАТАЛОГА ───────────────────────────────── ЗАМЕР ДО (vp1440, /katalog/): `.okna-catalog` (glavnaya.css:1013) держит свой `padding:0 16px`, а рамка, в которой он лежит, УЖЕ отступлена каноном §[5] (`.okna-usluga`, padding-inline 32). Итог 16+32 = **48px** вместо канонных 32 на десктопе и 16+16 = 32 вместо 16 на телефоне — контент каталога на 32px уже соседних страниц, и «край текста» не совпадает ни с шапкой, ни с футером. ЛЕЧЕНИЕ. Снимаем ТОЛЬКО внутренний отступ и ТОЛЬКО когда каталог действительно вложен в отступленную рамку. Безусловный `padding-inline:0` был бы опасен: там, где `.okna-catalog` окажется без рамки, контент прилип бы к краю экрана. `max-width` не трогаем: 1232 внутри контента 1216 и так не связывает. `!important` НЕ НУЖЕН — у чужого правила его нет, хватает специфичности (0,3,0 против 0,1,0). */ body.ok-shell :is(.okna-usluga, .ok-container) .okna-catalog{ padding-inline:0; } /* ── [7.2] РАДИУС САБМИТА ФОРМЫ ГЕРО ─────────────────────────────────────── ЗАМЕР ДО: 10px на всех 13 вьюпортах, мастер даёт 8. Источник — design.css:298 .wpcf7 input[type=submit], .wpcf7-submit{ border-radius:10px !important } design.css в FORBID, а `!important` перебивается только `!important`. Волна HC-08 это зафиксировала и оставила заявку (ok-home.css:512-516) — вот она. Специфичность (0,2,2) против (0,1,0): встречный `!important` строго обязателен, у чужого правила он есть. Скоуп — только форма геро новой оболочки: остальные CF7-сабмиты сайта живут по своему канону и HC-16 их не касается. */ html body .ok-hero__form .wpcf7-submit{ border-radius:var(--ok-radius-cta) !important; /* 8px — против design.css:298 border-radius:10px!important */ } /* ── [7.3] ЦВЕТ ЗВЁЗД РЕЙТИНГА ───────────────────────────────────────────── ЗАМЕР ДО: `rgb(245,181,10)` (#f5b50a) на всех вьюпортах; мастер — #f5a623, он же токен `--ok-star`. Источник — glavnaya.css:2110 .okna-rev__stars span.is-on svg{ fill:#f5b50a !important } (0,2,2) ★ ПЕРЕСМОТР РЕШЕНИЯ §[6.4]. Волна HC-13 сочла правку несоразмерной («разница ~15 единиц по G, невидима глазом»). Аргумент верен ровно наполовину: глазом действительно не видно — поэтому дефект и не был бы найден никогда, — но токен --ok-star при этом не работает ни на одном экране, то есть реестр токенов 07 расходится с тем, что отдаёт браузер. Цена вопроса — одна строка, и она возвращает значению токена смысл. §[6.4] закрыт, см. пометку там. Специфичность (0,3,4) с `!important` — против (0,2,2) с `!important`. */ html body .ok-scope .okna-rev__stars span.is-on svg{ fill:var(--ok-star) !important; /* #f5a623 — против glavnaya.css:2110 fill:#f5b50a!important */ } /* ── [7.4] ПЕРЕПОЛНЕНИЕ CTA-ПЛАШКИ B2B НА 320px ──────────────────────────── ЕДИНСТВЕННОЕ переполнение, оставшееся в матрице HC-16: страница услуги на вьюпорте 320 даёт +24px горизонтального скролла. Разбор прибором (`vr.mjs --why=.okna-fc__cta-actions`, живой замер vp320): div.okna-fc__cta-actions w=316.64 [27.5…344.14] min-width:auto div.okna-fc__cta-text w=316.64 [27.5…344.14] min-width:auto div.okna-fc__cta w=288 pad 18/18 display:grid cols:316.641px div.okna-wrap w=320 pad 16/16 div.okna-usluga w=305 ЧИТАЕТСЯ ТАК: контейнер плашки отдаёт под содержимое 288−36 = 252px, а грид-дорожка встала в 316.64 и вылезла за него на 64. Это классическая ловушка `min-width:auto`: грид- и флекс-элемент по умолчанию НЕ СЖИМАЕТСЯ ниже своей min-content ширины, поэтому дорожка `1fr` берёт не «сколько дают», а «сколько просит содержимое». Наружу это выходит теми самыми 24px (остальное съедает `body{overflow-x:clip}`). ★ ПОЧЕМУ НЕ ЛЕЧИМ ШИРИНОЙ/ПАДИНГОМ. Ни одно число в цепочке не «неправильное»: 305/320/288/252 — ровно то, что задумано. Неправильна только невозможность сжаться. Поэтому снимаем ровно её, а геометрию не трогаем: при отсутствии переполнения `min-width:0` не меняет НИЧЕГО, это предохранитель, а не вёрстка. Проверено замером: на 1440/1280/1024/768 ширины плашки до и после совпадают. ★ ГРАНИЦА FORBID СОБЛЮДЕНА. Правило-источник живёт в `assets/usluga.css` (тело услуги — FORBID навсегда), сам файл НЕ ПРАВИТСЯ: канон наводится отсюда, как это уже сделано для `.okna-fc .okna-wrap` в §[5]. Скоуп `body.ok-shell` — при флаге 0 геометрия услуги не меняется ни на пиксель (легаси-дефект остаётся как был; заявка на него — в отчёте HC-16). `!important` НЕ НУЖЕН: у чужого правила его нет. */ body.ok-shell .okna-fc__cta > *{ min-width:0; } /* Кнопкам плашки — разрешаем перенос строки: сжать элемент мало, содержимому нужно ещё и уметь переноситься, иначе переполнение просто уезжает внутрь. */ body.ok-shell .okna-fc__cta .fc__btn{ white-space:normal; } /* ── [7.5] ФОКУС С КЛАВИАТУРЫ: КОЛЬЦО, КОТОРОЕ ГАСИЛА ТЕМА TT1 ───────────── ЗАМЕР HC-18 (40 настоящих нажатий Tab по главной): своё кольцо показалось 6 раз, запасной индикатор TT1 (пунктирное подчёркивание + белая подложка) — 20 раз, НИЧЕГО — 14 раз. То есть больше трети остановок клавиатурной навигации не видно вовсе. Это доступность, а не косметика. КОРЕНЬ. twentytwentyone/style.css:1589 .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button){ outline:2px solid transparent; … } (0,4,1) Наши кольца объявлены как `.ok-scope :focus-visible` (ok-foundation.css:118) и `.ok-header :focus-visible` (ok-header.css:1240) — обе (0,2,0). Против (0,4,1) они проигрывают, и кольцо становится ПРОЗРАЧНЫМ. Там, где блок перебил ещё и запасные признаки TT1 (подчёркивание/подложку) — например ссылки мегаменю каталога, — не остаётся ничего. ЛЕЧЕНИЕ: одно правило со специфичностью ВЫШЕ (0,4,1). Считаем: body(тип) .ok-shell(класс) :is(…)(класс, максимум из аргументов — [tabindex]) :focus-visible(класс) :not(…)(класс) :not(…)(класс) = (0,5,1) > (0,4,1). `!important` НЕ НУЖЕН: у правила TT1 его нет — хватает специфичности. ★ НАМЕРЕННО ЗАДАЁМ ТОЛЬКО `outline`, БЕЗ `outline-offset`. Шапка и drawer местами ставят отрицательный офсет (`ok-header.css:364,1243`), чтобы кольцо не срезалось клиппером компонента. Правило-«кувалда» на offset сломало бы эти места; шорткод `outline` офсет не трогает, поэтому каждый компонент сохраняет свой. ★ МЕТОД ПРОВЕРКИ (ловушка, на которой HC-18 забраковал два подхода): программный `.focus()` НЕ включает `:focus-visible` — проверять только настоящими нажатиями Tab. */ body.ok-shell :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible:not(.wp-block-button__link):not(.wp-block-file__button){ outline:2px solid var(--ok-blue); } /* Тёмные поверхности: синее кольцо на #12161f почти не видно (тот же довод, что в ok-footer.css §8). Специфичность на класс выше базового правила — (0,6,1). */ body.ok-shell :is(.ok-footer, .ok-header__mega, .ok-drawer, .ok-pickdark) :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible:not(.wp-block-button__link):not(.wp-block-file__button){ outline-color:var(--ok-on-dark); } /* ── [7.6] D14 · ЗАЛИПШИЙ ВИД КНОПОК БАННЕРА «ПОДБЕРЁМ СТЕКЛО» ───────────── ЗАМЕР (главная, флаг 1, настоящие мыш. события через CDP: press → release → мышь УВЕДЕНА → сравнение computed style с покоем): «Рассчитать стоимость» (--ghost) bg rgba(0,0,0,0) → rgb(255,255,255) col #fff → #123d87 shadow none → rgba(255,255,255,.55) 0 0 0 3px «Получить консультацию» (--red) bg #1c5bd6 → #1448aa shadow none → rgba(255,255,255,.6) 0 0 0 3px И это НЕ мигание на время клика: обе кнопки открывают попап подбора, а при его закрытии фокус штатно (и правильно, это a11y) возвращается на кнопку- триггер — вид оставался навсегда. Белая заливка ghost на тёмном баннере и есть та «бледная кнопка», которую видит владелец. КОРЕНЬ — правила на голом `:focus`. `:focus` включается ЛЮБЫМ способом, в том числе кликом мыши; `:focus-visible` — только клавиатурой. Нарушители, найденные сплошным сканом всех 40 листов страницы (6930 правил, 145 с `:focus`; отобраны те, что меняют ВИД и реально матчатся на главной): 1. ok-home-w1.css:806/818 html body .ok-pickdark .okna-pick__btn--*:focus → ПОЧИНЕНО НА МЕСТЕ: `:focus` → `:focus-visible` (это наш файл). 2. design.css:1096/1111 body.page-template-tpl-glavnaya .okna-pick__btn--*:focus{…!important} (0,3,0) → лечится ЗДЕСЬ: design.css — не наш файл, и `!important` у него уже стоит, поэтому нужен встречный `!important` + большая специфичность. Даёт белое свечение box-shadow и белый контур ghost. 3. glavnaya.css:295/297 .okna-pick__btn--*:hover,:focus (0,2,0), БЕЗ `!important` → покрывается тем же правилом (наша (0,6,1) выше). 4. glavnaya.css:479/482 .gv-pickdark .okna-pick__btn--*:focus{…!important} → НА ОБОЛОЧКЕ НЕ ДЕЙСТВУЮТ: при флаге 1 баннер печатает template-parts/home/blocks/picker-dark.php с классом `.ok-pickdark`, а `.gv-pickdark` ставит только легаси-ветка blocks/picker-dark.php (флаг 0). Доказано тем же сканом: эти два селектора на главной с оболочкой не матчат НИ ОДНОГО элемента. Класс всё же перечислен в `:is()` ниже — это страховка ценой одного токена: если ветка блока когда-нибудь снова начнёт печатать легаси-обёртку при поднятом флаге, дефект не вернётся. СПЕЦИФИЧНОСТЬ ВСТРЕЧНОГО ПРАВИЛА (оба `!important`, значит решает она): body(тип) .ok-shell + :is(…) + .okna-pick__btn--* + :focus + :not(:focus-visible) + :not(:hover) = (0,6,1) > (0,3,0). ★ ПОЧЕМУ `:not(:hover)`. Без него правило (0,6,1) перебило бы и наведение (ok-home-w1.css:817 — (0,3,2)), то есть после клика кнопка перестала бы реагировать на мышь. `:hover` и `:active` обязаны остаться нетронутыми — анимация нажатия ровно та же, что была. Уходит ТОЛЬКО залипание. ★ ПОЧЕМУ КОЛЬЦО НЕ ТЕРЯЕТСЯ. Отменяем вид только на `:focus:not(:focus-visible)`, то есть на «мышином» фокусе. Клавиатурный (`:focus-visible`) не задет: кольцо-свечение design.css:1096/1111 и цвета ok-home-w1.css:806/818 показываются по Tab как прежде (проверено настоящими нажатиями Tab — программный `.focus()` НЕ включает `:focus-visible`, ловушка HC-18). ★ ЗНАЧЕНИЯ — вид ПОКОЯ из ok-home-w1.css:800-816, ни одного своего числа. `--okw-ghost-line` объявлен там же (ok-home-w1.css:99); он доступен всегда, когда на странице есть `.ok-pickdark`: сам блок печатается только на Главной/ГЕО, а ровно там подключается и ok-home-w1.css (functions.php:106).*/ body.ok-shell :is(.ok-pickdark, .gv-pickdark) .okna-pick__btn--red:focus:not(:focus-visible):not(:hover){ background:var(--ok-blue) !important; /* против !important design.css:1096 */ border-color:var(--ok-blue) !important; color:var(--ok-on-dark) !important; box-shadow:none !important; /* снимаем залипшее белое свечение */ } body.ok-shell :is(.ok-pickdark, .gv-pickdark) .okna-pick__btn--ghost:focus:not(:focus-visible):not(:hover){ background:transparent !important; /* против !important design.css:1111 */ border-color:var(--okw-ghost-line) !important; color:var(--ok-on-dark) !important; box-shadow:none !important; } /* ── [7.7] HC-19 · ТОТ ЖЕ КОРЕНЬ, ЧТО У D14, НО ЦЕЛЫМ КЛАССОМ ────────────── D14 (§7.6) закрыл ДВЕ кнопки баннера «Подберём стекло». Сплошной свип всех кнопок главной показал, что это был частный случай: тем же механизмом — правило на ГОЛОМ `:focus` — метит почти вся главная, только источник другой, не наши файлы и не design.css, а РОДИТЕЛЬСКАЯ ТЕМА. ЗАМЕР (главная, флаг 1, 1440×900, 69 видимых кнопок; настоящие мышиные события через CDP: press → release → мышь УВЕДЕНА → сравнение computed style с покоем; программный .focus() не годится — ловушка HC-18): 56 кнопок меняют вид после клика и увода курсора; 51 из них — артефакт темы TT1, ни у одной `:focus-visible` не выставлен, то есть это чисто «мышиное» залипание, а не клавиатурный индикатор; 5 оставшихся — штатная реакция (товар лёг в корзину, вкладка стала активной, карусель упёрлась в край) — их НЕ трогаем. Разбивка по правилам-источникам: 36 outline-offset 0 → −6px twentytwentyone/style.css:1741 34 outline none → 2px dotted там же 15 outline none → 2px solid transparent twentytwentyone/style.css:1589 15 text-decoration none → underline 1px dotted (+skip-ink none) там же 3 background → rgba(255,255,255,.9) там же 1 outline картинки внутри ссылки → 2px dotted ...style.css:1633 КОРЕНЬ — три правила TT1 на голом `:focus`. `:focus` включается ЛЮБЫМ способом, в том числе кликом мыши, и остаётся висеть, пока фокус не ушёл: A. style.css:1589 .site a:focus:not(.wp-block-button__link) :not(.wp-block-file__button) (0,4,1) { outline:2px solid transparent; text-decoration:underline 1px dotted currentColor; text-decoration-skip-ink:none; background:rgba(255,255,255,.9) } — матчит 1899 элементов; B. style.css:1741 .site .button:focus, button:focus, input[type=submit]:focus, … (0,1,1) { outline-offset:-6px; outline:2px dotted currentColor } — 122 элемента; C. style.css:1633 .site a:focus:not(…):not(…) img (0,4,2) { outline:2px dotted var(--wp--style--color--link,…) } — 184 элемента. C в задании не значился — найден сплошным сканом всех 40 листов страницы (6950 правил, 145 с `:focus`) и подтверждён кликом: `a.ok-brand > img` остаётся в пунктирной рамке. Корень и лечение те же, поэтому закрыт здесь. ★ ДОСТУПНОСТЬ НЕ ТЕРЯЕТСЯ — ЭТО ГЛАВНОЕ УСЛОВИЕ ПРАВКИ. Отменяем вид только на `:focus:not(:focus-visible)`, то есть на «мышином» фокусе. Клавиатурное кольцо оболочки объявлено в §[7.5] как `:focus-visible` и этими правилами не задето: замер 30 настоящими нажатиями Tab до правки и после даёт одно и то же — 29 остановок из 30 с видимым кольцом (30-я — `.skip-link`, он визуально скрыт до фокуса по своему замыслу). ★ ПОЧЕМУ БЕЗ `:not(:hover)` (в §7.6 он был обязателен). Там отменялись background/border/color — ровно то, что меняет наведение, и без защиты кнопка переставала бы отзываться на мышь. Здесь отменяются outline и text-decoration, которых у кнопок нет ни в покое, ни при наведении, — защита не нужна, а без неё артефакт гаснет и пока курсор ещё на кнопке. Проверено отдельной фазой прибора: вид «наведение» и вид «наведение + мышиный фокус» после правки совпадают у всех проверенных кнопок, кроме одного мёртвого расхождения — `text-decoration-skip-ink` (`none` у TT1 против нашего `all`). Оно не рисуется ничем: подчёркивания в этом состоянии уже нет, а skip-ink управляет только разрывами линии. Исключение из правила — §7.7.4/§7.7.5 (фон), там разделение по `:hover` обязательно, см. ниже. ★ `!important` НЕ НУЖЕН НИГДЕ: ни у одного из трёх правил TT1 его нет — хватает специфичности. ★ ФАЙЛЫ ТЕМЫ И design.css НЕ ТРОНУТЫ, скоуп `body.ok-shell`: при флаге 0 страница ведёт себя ровно как раньше. Это не рассуждение, а замер: на легаси-главной (флаг 0) правила этого раздела совпали с 0 элементов, а исходный дефект там остался ровно как был (6 кнопок из 12 в пробе) — заявка на легаси-ветку, чинить её этой волной не поручали. ★ РАЗДЕЛ РАБОТАЕТ НЕ ТОЛЬКО НА ГЛАВНОЙ: ok-legacy-compat глобальный, и на /katalog/ (флаг 1, 72 кнопки) TT1-артефактов после правки тоже 0, клавиатурное кольцо — 15 остановок из 16 (16-я — та же `.skip-link`). */ /* 7.7.1 · контур и кольцо (гасит A-outline, B целиком). body(тип) .ok-shell + :is(…)(класс, максимум из аргументов — [tabindex]) + :focus + :not(:focus-visible) + :not(…) + :not(…) = (0,6,1) > (0,4,1). Список тегов и хвост `:not(.wp-block-*)` — те же, что в §[7.5]: правило ровно отражает своё зеркало для клавиатуры, читать их надо парой. `outline-offset` здесь задавать МОЖНО (в §7.5 было нельзя): кольца в этом состоянии нет вообще, офсету нечего смещать, а компонентные отрицательные офсеты шапки живут на `:focus-visible` и сюда не попадают. */ body.ok-shell :is(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible):not(.wp-block-button__link):not(.wp-block-file__button){ outline:none; outline-offset:0; } /* 7.7.2 · пунктирное подчёркивание текста у ссылок-кнопок (A · text-decoration). Скоуп по признаку «в классе есть btn» + `[role=button]`, а не по перечню: перечень пришлось бы дописывать при каждой новой кнопке, а замер показал, что старый список из d14 уже пропускал ok-services__btn / ok-about__btn. ОБЫЧНЫЕ ТЕКСТОВЫЕ ССЫЛКИ СЮДА НЕ ВХОДЯТ НАМЕРЕННО: у них подчёркивание в покое ЕСТЬ, и `text-decoration:none` их бы сломало. body + a(типы 2) .ok-shell + :is(…) + :focus + :not×3 = (0,6,2) > (0,4,1). */ body.ok-shell a:is([class*="btn"], [role="button"]):focus:not(:focus-visible):not(.wp-block-button__link):not(.wp-block-file__button){ text-decoration:none; /* Отдельной строкой, и это не придирка: `text-decoration` — шорткод БЕЗ `text-decoration-skip-ink`, поэтому TT1-шный `skip-ink:none` пережил первую редакцию правки и остался висеть на 19 кнопках (поймано замером «после»). Видимого следа он не даёт (подчёркивания-то уже нет), но оставлять состояние неравным покою нельзя: следующий замер снова покажет расхождение и его снова придётся расследовать. `all` — покой ссылок по TT1 (style.css:1581). */ text-decoration-skip-ink:all; } /* 7.7.3 · пунктирная рамка вокруг картинки внутри ссылки (C). body + a + img(типы 3) .ok-shell + :focus + :not×3 = (0,5,3) > (0,4,2). */ body.ok-shell a:focus:not(:focus-visible):not(.wp-block-button__link):not(.wp-block-file__button) img{ outline:none; } /* 7.7.4 · белая подложка rgba(255,255,255,.9) под ссылками-кнопками (A · background). Самый заметный из всего класса: КРАСНАЯ кнопка «Оставить заявку» после клика мышью становится БЕЛОЙ и такой остаётся. Отменить его одним правилом на всех нельзя — у каждой кнопки свой фон покоя, а «вернуть как было» в CSS без каскадных слоёв нечем (`revert` сбросил бы и наши объявления вместе с чужим). Поэтому — поимённо, ровно три кнопки, которые замер поймал, и ЗНАЧЕНИЯМИ ПОКОЯ ИЗ БЛОЧНЫХ ФАЙЛОВ, без единого своего числа: ok-home-w1.css:467 .ok-services__btn--primary background:var(--ok-red) ok-home-w1.css:477 .ok-services__btn--outline background:var(--ok-section-a) ok-home-w5.css:311 .ok-about__btn--ghost background:transparent Блочные правила проигрывают TT1 по специфичности ((0,1,2) и (0,3,2) против (0,4,1)) — отсюда и дефект; встречное правило её перекрывает: body + a(типы 2) .ok-shell + .класс + :focus + :not×2 = (0,5,2) > (0,4,1). ★ ЗДЕСЬ `:not(:hover)` ОБЯЗАТЕЛЕН — в отличие от 7.7.1-7.7.3. Наведение у этих кнопок меняет именно фон (ok-home-w1.css:472/482, ok-home-w5.css:317 — (0,3,2) и (0,4,2)); без защиты правило (0,5,2) перебило бы их, и после клика кнопка перестала бы отзываться на мышь. Ровно довод §7.6. ★ ЕСЛИ ПОЯВИТСЯ НОВАЯ ССЫЛКА-КНОПКА С НЕПРОЗРАЧНЫМ ФОНОМ — её надо будет дописать сюда либо (лучше) объявить её фон специфичностью выше (0,4,1) в её собственном блочном файле, и тогда строки тут не понадобятся. */ body.ok-shell a.ok-services__btn--primary:focus:not(:focus-visible):not(:hover){ background:var(--ok-red); } body.ok-shell a.ok-services__btn--outline:focus:not(:focus-visible):not(:hover){ background:var(--ok-section-a); } body.ok-shell a.ok-about__btn--ghost:focus:not(:focus-visible):not(:hover){ background:transparent; } /* 7.7.5 · ТОТ ЖЕ ФОН, НО ПОКА КУРСОР ЕЩЁ НА КНОПКЕ. Замер после первой редакции поймал незакрытый край: `:not(:hover)` в 7.7.4 не даёт нам перебить наведение — но САМО правило наведения слабее TT1 и проигрывает ему точно так же, как правило покоя: ok-home-w1.css:472 html body .ok-services__btn--primary:hover (0,2,2) ok-home-w5.css:317 html body .ok-about .ok-about__cta .ok-about__btn--ghost:hover (0,4,2) против TT1 (0,4,1) — и первое проигрывает. Итог до этой правки: увёл мышь — кнопка правильная, держишь курсор на ней — всё ещё белая. То есть дефект не исчезал, а становился короче. Замер: --primary hover #c81a30 → rgba(255,255,255,.9) --outline hover var(--ok-blue) → rgba(255,255,255,.9) Возвращаем фон НАВЕДЕНИЯ теми же значениями, что в блочных файлах. body + a(типы 2) .ok-shell + .класс + :focus + :not×2 + :hover = (0,6,2). `:focus-visible` по-прежнему исключён — клавиатурный отклик не задет, его эти кнопки объявляют сами (`:hover, :focus-visible` одной строкой). */ body.ok-shell a.ok-services__btn--primary:focus:not(:focus-visible):hover{ background:color-mix(in srgb, var(--ok-red) 88%, var(--ok-dark)); } body.ok-shell a.ok-services__btn--outline:focus:not(:focus-visible):hover, body.ok-shell a.ok-about__btn--ghost:focus:not(:focus-visible):hover{ background:var(--ok-blue); } /* ═══ [6] РЕЕСТР КОНФЛИКТОВ, КОТОРЫЕ СЮДА НАМЕРЕННО НЕ ПЕРЕНЕСЕНЫ ══════════ Централизация имеет смысл там, где правило ОДНО НА ВСЕХ. Ниже — конфликты, у которых значение РАЗНОЕ у разных блоков: вынос их «наверх» не освободил бы блоки от `!important`, а наоборот — центральное правило пришлось бы делать специфичнее блочных, и оно бы их ЛОМАЛО. Они остаются в блочных слоях, каждый подписан на месте. Здесь — карта, чтобы следующая волна не искала заново. 6.1 ЦВЕТ КНОПОК — design.css:163-200 · САМАЯ БОЛЬШАЯ ГРУППА (~50 объявлений) a.okna-btn:not(.okna-btn--hero):not(.secondary){background/color/border !important} (0,3,1) a.okna-btn.secondary{…!important} (0,2,1) Это ЩИТ ПРОТИВ TT1 (style.css:1699-1716 красит любой