/* ============================================================================ ok-interactions.css — СОСТОЯНИЕ «ОТКЛЮЧЕНО». Пакет W1-P07. ============================================================================ ★ ФАЙЛ УЖЕ НЕ ТОТ, ЧТО ЗАКАЗЫВАЛО ЗАДАНИЕ, И ВОТ ПОЧЕМУ. §2 требовал «единый слой состояний: наведение, нажатие, фокус, отключённая кнопка». Инвентаризация (шаг 1 того же задания, сплошной перебор всех листов темы) показала другое: правил, где селектор содержит состояние 566 из них с `!important` внутри 360 объявлений :hover 366 :active 116 :focus-visible 115 :focus 71 :disabled / [disabled] 11 ← вся дыра здесь И два ГЛОБАЛЬНЫХ слоя уже существуют: design.css:1702 «единый глобальный отклик кнопок» — :active, transition, focus-visible на 20+ семействах узлов; ok-legacy-compat.css:386 кольцо фокуса на ВСЁМ интерактиве сайта цепочкой (0,5,1) — заведено пакетом HC-18 по замеру «40 нажатий Tab, ничего не видно 14 раз». ЗАМЕР «ДО» ЭТОГО ПАКЕТА, настоящими нажатиями Tab через CDP, 7 страниц × 24 шага = 168 остановок: **без видимого кольца — НОЛЬ**. То есть фокус уже решён, и объявить его тут ещё раз значило бы получить второе кольцо — прямое стоп-условие пакета. Наведение и нажатие покрыты 482 правилами и глобальным слоем design.css. ЧТО ДЕЙСТВИТЕЛЬНО СЛОМАНО — тот же замер, 7 страниц: отключённых видимых элементов 21 из них НЕ ОТЛИЧИМЫ от активных ★ 9 Все девять — кнопка отправки формы: фон rgb(224,34,58), прозрачность 1, вид ОДИН В ОДИН с активной. Отличие единственное — курсор `not-allowed`, которого на тач-устройствах не существует вовсе. Держит её отключённой клиентский гейт согласия 152-ФЗ (`inc/requests.php:218`: `sb.disabled = !cb.checked`) — то есть КАЖДАЯ форма сайта при загрузке показывает красную «живую» кнопку, которая не работает. Пользователь жмёт и не получает ничего: тихий отказ вместо видимой причины. Это ровно позиция D-22. Поэтому файл делает ОДНО: даёт отключённому состоянию вид отключённого. Наведение, нажатие и фокус он не трогает — они уже есть, и трогать их значит ломать. ПРЕЦЕДЕНТ, КОТОРЫЙ ЗДЕСЬ ОБОБЩАЕТСЯ. `ok-home-w5.css:1650` уже чинит ровно эту кнопку — но только внутри блока `.ok-final__cf7`, с тем же разбором в комментарии. Один блок из всех форм сайта. Здесь то же лечение доводится до всего сайта, а правило волны 5 остаётся авторитетным в своём блоке: оно специфичнее и задаёт свой оттенок. ★ ПРО `!important`. Он здесь ОДИН НА СВОЙСТВО и вынужден: конкурент сам с флагом — `design.css:349` .wpcf7 input[type=submit], .wpcf7-submit{ background: var(--red,#e0223a) !important; color:#fff !important; } Против `!important` не помогает ни порядок подключения, ни специфичность — помогает только `!important`. Специфичность при этом всё равно поднята: `html body :is(…)[disabled]` = (0,2,2) против (0,2,1) у конкурента, иначе спор между двумя `!important` решался бы порядком листов, а на этом сайте родительская тема печатается дважды и порядком брать нельзя. МЕСТО В КАСКАДЕ. Лист подключается отдельным хуком с приоритетом 110 (`functions.php`), то есть ПОСЛЕ всех тематических листов и после `ok-modal.css` (тот на 100). Enqueue рядом с `okna-design` поставил бы его вторым из двадцати трёх — и слой был бы мёртв. ============================================================================ */ /* ── 1. ОТКЛЮЧЁННАЯ КНОПКА ──────────────────────────────────────────────── Три признака сразу, потому что каждый по отдельности не работает: цвет — на десктопе и на тач-устройстве виден одинаково; курсор — только мышь, на тач его нет; тень/сдвиг — снимаются, иначе кнопка «отзывается» на наведение, будучи мёртвой, и это хуже, чем отсутствие отклика вовсе. `aria-disabled="true"` в списке потому, что ссылку-кнопку атрибутом `disabled` отключить нельзя — у `` его не существует. `pointer-events` НЕ снимается намеренно: с ним курсор `not-allowed` не показывается вовсе (браузер не доставляет событие), и пользователь теряет единственную подсказку на десктопе. Клик по отключённой кнопке и так не проходит — за это отвечает сам атрибут. */ html body :is(button, input[type=submit], input[type=button], .okna-btn, .wpcf7-submit, .ok-cta)[disabled], html body :is(button, input[type=submit], input[type=button], .okna-btn, .wpcf7-submit, .ok-cta):disabled, html body :is(a, button, [role="button"])[aria-disabled="true"]{ background: var(--ok-text-muted, #646f84) !important; color: #ffffff !important; border-color: var(--ok-text-muted, #646f84) !important; box-shadow: none; transform: none; cursor: not-allowed; } /* Наведение и нажатие на отключённой кнопке не должны менять НИЧЕГО. Без этого правила глобальный слой отклика (design.css:1702) продолжит поднимать её на 1px при нажатии — то есть мёртвая кнопка будет отзываться. */ html body :is(button, input[type=submit], input[type=button], .okna-btn, .wpcf7-submit, .ok-cta)[disabled]:hover, html body :is(button, input[type=submit], input[type=button], .okna-btn, .wpcf7-submit, .ok-cta)[disabled]:active, html body :is(button, input[type=submit], input[type=button], .okna-btn, .wpcf7-submit, .ok-cta):disabled:hover, html body :is(button, input[type=submit], input[type=button], .okna-btn, .wpcf7-submit, .ok-cta):disabled:active, html body :is(a, button, [role="button"])[aria-disabled="true"]:hover, html body :is(a, button, [role="button"])[aria-disabled="true"]:active{ background: var(--ok-text-muted, #646f84) !important; color: #ffffff !important; transform: none; box-shadow: none; } /* ★ W5-P02 · Поля «Быстрого подбора» (.okna-qp__field) — это СЕЛЕКТОР-поля (страна/марка/модель), а не action-кнопки форм. Глобальный слой disabled выше красил их в сплошной серый #646f84 и делал плейсхолдер «Марка/Модель» невидимым. Возвращаем белый фон + видимый muted-плейсхолдер. Специфичность (0,3,1) + !important бьёт слой (0,2,3) и инлайн-стиль компонента (.okna-qp__field — (0,2,0)+!important), а opacity:1 снимает затухание .okna-qp__field:disabled{opacity:.5} компонента. */ html body .okna-qp .okna-qp__field:disabled, html body .okna-qp .okna-qp__field[disabled]{ background: var(--ok-section-a, #ffffff) !important; color: var(--ok-text-muted, #6b7686) !important; border-color: #dbe4f0 !important; opacity: 1; cursor: not-allowed; } /* W5-P02 · Быстрый подбор: явный выход из каждого уровня каскада. Пользователь может выбрать конкретный чип или открыть весь каталог/раздел текущего контекста: страна → весь каталог, марка → страна, модель → марка. */ html body .okna-qp .okna-qp__all{ display:flex; align-items:center; justify-content:flex-end; position:relative; /* MOBM-02: якорь для тач-добора (раскладку не меняет) */ width:max-content; min-height:32px; margin:10px 0 0 auto; padding:2px 0; border:0; border-radius:0; background:transparent !important; color:var(--ok-blue, #1c5bd6) !important; font-size:13px; font-weight:800; line-height:1.35; text-decoration:none; box-shadow:none; } /* MOBM-02: тач-добор «Смотреть все» до 44 на мобилке — невидимый ::after, вид/кегль не меняются. Норма касания = площадка (ТЗ), видимая ссылка остаётся 32px. */ @media (max-width:600px){ html body .okna-qp .okna-qp__all::after{ content:""; position:absolute; top:50%; right:0; left:0; height:var(--ok-tap-min,48px); /* канон дизайн-системы §5 = 48; добор невидимый, вид ссылки 32px не меняется. УБОРКА §2.1: 48px→--ok-tap-min (роль минимум касания) */ transform:translateY(-50%); } } html body .okna-qp .okna-qp__all:hover, html body .okna-qp .okna-qp__all:focus-visible{ background:transparent !important; color:var(--ok-ink, #123d87) !important; text-decoration:underline; text-underline-offset:3px; } html body .okna-qp .okna-qp__all:active{ transform:translateY(1px); } /* ── 2. ЧЕГО ЭТОТ ФАЙЛ НЕ ДЕЛАЕТ ────────────────────────────────────────── НЕ объявляет фокус. Кольцо задано глобально в `ok-legacy-compat.css:386` цепочкой (0,5,1) и покрывает весь интерактив сайта. Замер: 168 остановок Tab на семи страницах, без кольца — ноль. Второе объявление дало бы двойное кольцо — стоп-условие этого же пакета. НЕ объявляет наведение и нажатие для исправных кнопок. Их 482 правила и глобальный слой `design.css:1702`. Новый слой поверх них — это шестой слой, спорящий с пятью; пакет требует обратного. НЕ трогает `.okna-lb__btn[disabled]`, `.okna-hscroll-nav:disabled` и прочие семь частных правил отключённого состояния: замер показал, что они СВОЮ работу делают — все отличимы от активных. Ломать работающее ради единообразия здесь нечего. НЕ доводит тач-цели до 44×44 — это `W5-P02`. Здесь только обязательство не ухудшить: файл не меняет ни одного размера. ============================================================================ */ /* Дополнение W1-FIX-01. ── 3. СОГЛАСИЕ 152-ФЗ: ПОДСВЕТКА ПРИ ОТПРАВКЕ БЕЗ ГАЛОЧКИ ──────────────── Пакет W1-P07 дал отключённой кнопке вид отключённой. Владелец отменил это решение для кнопки ОТПРАВКИ: она снижает конверсию, потому что человек видит мёртвую кнопку и не понимает, почему. Теперь кнопка всегда активна, а несогласие показывается на самом чекбоксе — там, где причина. Оформление повторяет уже существующий образец сайта: гео-форма подсвечивает несогласие тем же способом (`geo-request.css:84`, `.okna-geo-req__consent.is-invalid span{ color:var(--red) }`). Заводить второй визуальный язык для той же ошибки незачем. ★ ПОЧЕМУ ЦВЕТА МАЛО. Цвет — единственный признак только для тех, кто его различает. Поэтому вместе с ним печатается ТЕКСТ сообщения, а на чекбокс ставится `aria-invalid` и фокус: ошибка доходит и до скринридера, и до человека, который цвет не видит. */ .okna-cf7-acc--auto.is-invalid, .wpcf7-form-control-wrap.is-invalid{ /* ПОПАП-ГАРАНТИИ 09.08: снята рамка `outline:2px solid red` вокруг ВСЕГО короба согласия — владелец прочёл её как баг (красный прямоугольник во всю ширину, торчал над кнопкой и рос при переносе сообщения). Невалидность теперь показывают более лёгкие сигналы: красный чекбокс (accent+outline ниже), красный текст лейбла и сообщение полной строкой под согласием. flex-wrap оставлен — он роняет сообщение ПОД строку, а не сбоку. */ flex-wrap: wrap; } /* К ПОКАЗУ п.1: исправлен синтаксис запятых — было «.okna-cf7-acc--auto.is-invalid,» отдельным селектором, из-за чего на ВЕСЬ короб садились outline чекбокса и цвет. Стало: цвет — лейблам/спанам внутри невалидного короба, outline — самому чекбоксу. */ .okna-cf7-acc--auto.is-invalid label, .wpcf7-form-control-wrap.is-invalid label, .okna-cf7-acc--auto.is-invalid span:not(.okna-cf7-acc__err), .wpcf7-form-control-wrap.is-invalid span:not(.okna-cf7-acc__err){ color: var(--red, #e0223a); } .okna-cf7-acc--auto.is-invalid input[type="checkbox"], .wpcf7-form-control-wrap.is-invalid input[type="checkbox"]{ accent-color: var(--red, #e0223a); outline: 2px solid var(--red, #e0223a); outline-offset: 2px; } /* Сообщение — ПОЛНОЙ строкой ПОД согласием. Короб у части форм — flex, потому одного display:block мало: нужен flex-basis:100%, чтобы span перенёсся на новую строку (при flex-wrap короба выше), а не встал сбоку, оттесняя ссылку. К ПОКАЗУ п.1. */ .okna-cf7-acc__err{ display: block; flex-basis: 100%; width: 100%; margin: 6px 0 0; color: var(--red, #e0223a); font-size: 13px; line-height: 1.35; font-weight: 600; } /* Кнопка отправки: отменяем для неё правило §1 этого же файла. ★ ЭТО НЕ ПРОТИВОРЕЧИЕ, А ГРАНИЦА. §1 красит отключённое состояние серым — и это верно для стрелок каруселей и «Показать ещё», где `disabled` значит «действие сейчас недоступно». У кнопки отправки `disabled` больше не ставится вовсе, поэтому правило до неё просто не достаёт. Строка ниже — страховка на случай, если какой-то сторонний скрипт выставит атрибут: пусть кнопка остаётся узнаваемой, а не превращается в серый прямоугольник посреди формы. ⚠ !important — против `design.css:349` `.wpcf7-submit{background:… !important}`; без него правило не применится (тот же разбор, что в §1). */ html body .wpcf7-submit[disabled]:not(:hover):not(:active), html body .wpcf7-submit:disabled:not(:hover):not(:active){ background: var(--red, #e0223a) !important; color: #fff !important; border-color: var(--red, #e0223a) !important; cursor: wait; } /* Волна 3 §6.3: тач-площадка контент-кнопок на 390 — минимум 44 (значок НЕ растёт, растёт зона). Только под coarse-указатель. Изолированные контент-кнопки (стрелки каруселей, счётчик количества, тулбар товара, вкладки марок) — вертикальный рост в своих строках, на соседей не налезает. Город (button.ok-city) — ПОЗИЦИЯ: тёмная строка шапки 36px (высота мастера), 44 недостижимо без правки раскладки. */ @media (hover:none) and (pointer:coarse){ .okna-bm__arrow, .okna-related__arrow, .okna-qty-btn, .st-tb-btn, .okna-bm__tab{ min-height:44px !important; } /* !important — перебить локальные min-height:36 (напр. single.css:40) */ .okna-bm__arrow, .okna-related__arrow, .okna-qty-btn, .st-tb-btn{ min-width:44px !important; } }