/* ============================================================ Блок «Шаги (Этапы)» — stages ⚠️ РАЗМЕТКА НЕ МЕНЯЛАСЬ (установка владельца 02.09.2026). Сетка Bootstrap, чередование flex-row / flex-row-reverse, порядок колонок, состав классов — всё как было. Здесь только оформление. ⚠️ ГЛАВНАЯ ПРАВКА ФАЙЛА — ОБЛАСТЬ ДЕЙСТВИЯ СЕЛЕКТОРОВ. Прежняя версия писала в глобальные `.img`, `.card-body` и `.animation`. CSS блока подключается только на страницах, где блок стоит, но НА ЭТИХ страницах он красил чужие карточки тоже: `.card-body { max-width: 55% }` ниже 576px попадает в любую бутстраповскую карточку на той же странице. Теперь всё висит на .stages-repeat — это класс ряда, он приходит из разметки блока и другого источника у него нет. ЦВЕТ — ТОЛЬКО ТОКЕНЫ. Ни одного hex. ============================================================ */ .stages-repeat { /* Акцент текстом (см. тот же приём в case-facts-grid.css): на кейсе — цвет записи, вне кейса — «текстовая» светлота фирменного акцента. Заливочный --ctx-accent в тёмной теме (#d33154) на подписи давал бы 3.72 к фону; текстовый (#e78da1) — 6.27 к поверхности карточки. */ --stage-accent-text: var(--case-accent-text, var(--macro-accent-text, var(--ctx-accent))); /* ⚠️ ПЛАШКИ ПОД ИЛЛЮСТРАЦИЕЙ БОЛЬШЕ НЕТ (снята 07.09.2026, владелец: «ты их вставляешь на белом фоне как jpeg, а надо png на прозрачном»). Здесь были --stage-plate (--macro-brand-paper) и рамка --stage-plate-line, и заводились они не от вкуса: старые файлы были разнородные — «form» и «discussion» PNG с БЕЛЫМ фоном внутри кадра, «contract» вообще WEBP без альфы. В тёмной теме они светились белыми прямоугольниками, и общая светлая плашка была дешевле перерисовки исходников. ОСНОВАНИЕ ОТПАЛО: файлы перерисованы и заменены 07.09.2026 — все четыре теперь PNG-32 с НАСТОЯЩЕЙ альфой. Замер на отдаваемом размере 300x224 (site-1, form-1, discussion-1, contract): IHDR colortype 6, bit depth 8, alpha extrema (0, 255) у каждого. Прозрачность настоящая, поэтому иллюстрация ложится прямо на поверхность карточки и работает в обеих темах сама. ⚠️ Рамка снята ВМЕСТЕ с плашкой, а не оставлена: без заливки она обводила бы пустоту — прямоугольник вокруг рисунка, который в него не вписан (у иллюстраций нет прямоугольного кадра, они силуэтные). Возвращать плашку можно ТОЛЬКО вместе с непрозрачными файлами; если когда-нибудь появится картинка с белым фоном — правильный ход резать фон у файла, а не подкладывать бумагу под все четыре. Высота плашки осталась (ниже) — она держит одинаковый вид всех четырёх карточек и к прозрачности отношения не имеет. */ /* Высота кадра иллюстрации одна на все четыре шага — отсюда и одинаковый вид карточек, независимо от того, что записано в самих файлах. ⚠️ УВЕЛИЧЕНА в 1.5 раза 07.09.2026 (владелец: «сделай изображения крупнее»): было clamp(6rem, 11vw, 8.5rem) — то есть 96…136px, и рисунок терялся в карточке. Стало 144…204px. Обрезки не будет ни при какой высоте: у картинок object-fit: contain, они масштабируются целиком и пропорции держат сами; растёт только высота карточки. Верхняя и нижняя границы подняты обе, чтобы clamp продолжал работать как раньше — на узком экране кадр по-прежнему меньше, чем на широком. */ --stage-plate-h: clamp(9rem, 16.5vw, 12.75rem); --stage-plate-pad: clamp(0.75rem, 1.6vw, 1.25rem); } /* --- КАРТОЧКА ШАГА --- Язык поверхностей берём у соседей (карточка кейса, плитка фактов): поверхность --ctx-surface, волосяная граница --ctx-border, системный радиус --case-radius, системная тень --macro-shadow-*. ⚠️ !important здесь вынужденный, причём с двух сторон: • тема задаёт `.card { border: none; box-shadow: 0 .5rem 1rem rgb(0 0 0/15%) !important; border-radius: 2.25rem !important }` (style.css) — легаси- «подушка» с литеральной тенью, которая в тёмной теме не видна вовсе; • тёмная тема задаёт `.dark-theme .card { … !important }`. Обойти оба набора без !important нельзя, специфичность тут ни при чём. */ .stages-repeat .card { background-color: var(--ctx-surface) !important; border: 1px solid var(--ctx-border) !important; border-radius: var(--case-radius) !important; /* Тень СРЕДНЕЙ ступени, а не мелкой, и это замер: в светлой теме поверхность карточки (--macro-surface #ffffff) совпадает с фоном страницы 1-в-1 (контраст 1.00), а волосяная граница --ctx-border даёт 1.28 — она декоративная и отделять карточку в одиночку не обязана. Значит границу карточки физически рисует тень, и --macro-shadow-sm (0 1px 3px / 6 %) для этого слишком тиха. --macro-shadow-md — та же ступень, которой тема кроет .card в тёмной теме. */ box-shadow: var(--macro-shadow-md) !important; /* height: 100% здесь СОЗНАТЕЛЬНО НЕТ. Ряд выровнен по центру (.row.align-items-center из разметки), колонки не растягиваются, и карточки стоят разной высоты — так задумано в исходной вёрстке. Выравнивать их = менять вёрстку, чего делать нельзя. */ transition: box-shadow 0.3s ease, border-color 0.3s ease; } /* --- ИЛЛЮСТРАЦИЯ ШАГА --- */ .stages-repeat .img { width: 100%; margin-bottom: 0.25rem; } .stages-repeat .img img { display: block; width: 100%; height: var(--stage-plate-h); padding: var(--stage-plate-pad); object-fit: contain; object-position: center; /* ⚠️ Ни заливки, ни рамки, ни радиуса: иллюстрация прозрачная и лежит прямо на поверхности карточки (разбор — вверху файла, у --stage-plate-h). Радиус убран вместе с ними осознанно: у замещаемого элемента он РЕЖЕТ содержимое, и на силуэтной картинке без кадра это отпиливало бы углы рисунка ни за чем. Паддинг оставлен — он держит воздух вокруг рисунка внутри фиксированной высоты кадра, то есть отвечает за ритм, а не за плашку. */ /* Цвет alt-текста, если файл не загрузился. Раньше был --macro-brand-navy под светлую плашку; плашки нет, alt падает на поверхность карточки — значит цвет обязан быть КОНТЕКСТНЫМ, иначе в тёмной теме получим тёмно-синий по тёмному. */ color: var(--ctx-ink); } /* --- ТИПОГРАФИКА --- «Шаг N» — не заголовок абзаца, а порядковый указатель, поэтому он идёт акцентом и капсом, как кикер плитки фактов. Текст шага — вторая ступень: --ctx-muted даёт 5.21 на белом и 5.20 на тёмной поверхности (замер), то есть AA проходит в обеих темах. */ .stages-repeat .card-body { padding: 0.75rem 0.25rem 0.25rem; } .stages-repeat .card-title { margin-bottom: 0.375rem; color: var(--stage-accent-text); font-size: 1rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .stages-repeat .card-body p { margin-bottom: 0; color: var(--ctx-muted); font-size: 0.9375rem; line-height: 1.55; } .stages-repeat .card-body p:not(:last-child) { margin-bottom: 0.5rem; } /* --- МОБИЛЬНАЯ РАСКЛАДКА (карточка в строку) --- Пропорции 45/55 — из первой версии файла, они и держат чередование «картинка слева / картинка справа». Изменилось только то, что правила больше не глобальные. */ @media (max-width: 575.98px) { .stages-repeat .img { max-width: 45%; margin-bottom: 0; } .stages-repeat .card-body { max-width: 55%; padding: 0 0.75rem; } /* На узком экране кадр ниже: карточка идёт строкой, и высокий кадр растягивал бы её вдвое против текста. Поднят умереннее общего (5.5 -> 7rem, +27 % против +50 %) ровно поэтому — ограничение тут не вкус, а строка. */ .stages-repeat { --stage-plate-h: 7rem; } } /* --- ОТКЛИК НА HOVER: УВЕЛИЧЕНИЕ КАРТОЧКИ --- Решение владельца 07.09.2026: вернуть ОРИГИНАЛЬНЫЙ эффект блока. ⚠️ Историю правлю честно, потому что прежний комментарий здесь врал. Он утверждал, что увеличение «заменено на язык отклика проекта» (подъём на 2px + тень ступенью выше) — так и было сделано при стилизации блока, и владелец это отменил: увеличение ему нравилось, а наезд на соседнюю карточку его не смущал — на исходном сайте так и было. Значения сняты с ОРИГИНАЛА (ws.lazarewww.ru, /wp-content/plugins/easy-acf-blocks-main/acf-blocks/stages/stages.css, забран 07.09.2026, 213 байт), там ровно две декларации: .animation { transition: transform 0.5s } .animation:hover { transform: scale(1.1) } Отсюда множитель 1.1, длительность 0.5s, easing по умолчанию (ease), без задержки и без transform-origin (то есть от центра). Проектные 0.3s тут НЕ ставим намеренно: возвращаем то, что было, а не пересказываем. ⚠️ Единственное добавление к оригиналу — z-index, и оно как раз снимает ту причину, по которой эффект когда-то выкинули. Ряд выровнен по центру (.row.align-items-center), запаса между колонками на 10 % ширины нет, поэтому увеличенная карточка ПЕРЕКРЫВАЕТ соседнюю — это нормально, пока она идёт ПОВЕРХ. Без z-index порядок отрисовки держит DOM: карточка 1 уезжала бы ПОД карточку 2, и наезд читался бы поломкой, а не выдвижением. `position: relative` + `z-index: 0` на всех колонках дают им стековые контексты в порядке DOM, `z-index: 2` на наведённой поднимает её над любым соседом — и левым, и правым. ⚠️ Обрезка по ВЕРТИКАЛИ выступу не грозит, по ГОРИЗОНТАЛИ — грозит, и виновник не наш: родительская тема держит `body { overflow-x: hidden }` (bootscore-main/style.css:421). Оно всплывает на вьюпорт, то есть всё, что вылезло за ширину окна, срезается без скроллбара. На всех ширинах от 576px запаса хватает — увеличенная карточка остаётся внутри поля (замер 1440px: card1 при hover занимает 43.5…406.5px, документ 1440); про то, что происходит ниже 576px, — следующий блок. ⚠️ ПОДСВЕТКА ГРАНИЦЫ АКЦЕНТОМ СНЯТА 07.09.2026 (владелец: «при наведении не обводка красным, а скейл»). Здесь стояло `.stages-repeat .animation:hover .card { border-color: var(--ctx-accent) }`, и после перевода схемы в бордо оно давало красную рамку по контуру карточки (замер до правки: светлая #e9e0e3 -> #8b1d35, тёмная #60293c -> #d33154). Граница на hover теперь НЕ МЕНЯЕТСЯ — остаётся волосяная --ctx-border покоя. Не возвращать: на оригинале (ws.lazarewww.ru) отклик был только увеличением. Тень ступенью выше (--macro-shadow-lg) ОСТАВЛЕНА сознательно, и это не недосмотр: увеличенная карточка наезжает на соседнюю (запаса между колонками на 10 % ширины нет), и без тени край наехавшей карточки теряется на такой же поверхности соседа — в светлой теме поверхность карточки и фон страницы совпадают 1-в-1 (контраст 1.00, замер в блоке «КАРТОЧКА ШАГА»). Тень — это глубина, а не обводка: она нейтральна по цвету и по контуру не читается. Ограничения канона на месте, но ОБА уточнены 07.09.2026 — читай их у самих правил ниже: «только для мыши» проверяется теперь ВЫКЛЮЧАТЕЛЕМ (any-hover: none) вместо гейта (hover: hover) — иначе эффект терялся на устройствах, где первичный указатель не мышь; а под prefers-reduced-motion снимается ПЕРЕХОД, а не сам эффект. */ .stages-repeat .animation { /* На широких экранах — оригинальные 10 %. */ --stage-hover-scale: 1.1; position: relative; z-index: 0; transition: transform 0.5s ease; } /* ⚠️ Ниже 576px увеличения НЕТ, и это замер, а не осторожность. Там `.container` уже не имеет max-width, а негативные margin'ы ряда съедают его padding — колонка col-12 равна ВСЕЙ ширине окна, свободного поля по бокам ноль. Любой множитель > 1 вылезает за вьюпорт и срезается тем самым `body { overflow-x: hidden }`: замер при 375px и скромных 5 % дал карточку -9.4…384.4px, то есть по 9px обрезанного края с каждой стороны — на скруглённом углу это видно как отпиленный бок. Вернуть эффект нечем: растёт сама ширина карточки, а места под неё не существует. Реальных пользователей это не касается — на телефоне работает следующий media-блок (hover там не срабатывает вовсе), сюда попадает только мышь в узком окне. Отклик на этой ширине остаётся: тень ступенью выше (акцентной границы больше нет ни на одной ширине, см. ниже). */ @media (max-width: 575.98px) { .stages-repeat .animation { --stage-hover-scale: 1; } } /* 🔴 УСЛОВИЕ ВКЛЮЧЕНИЯ ЭФФЕКТА — САМОЕ ВАЖНОЕ МЕСТО ФАЙЛА, ПРОЧТИ ПЕРЕД ПРАВКОЙ. Владелец трижды сообщал «увеличения при наведении нет», хотя CSS был на месте и в headless-браузере эффект замерялся исправно (+10 % по getBoundingClientRect на всех четырёх карточках). Причина найдена сличением с ОРИГИНАЛОМ — собственным сайтом владельца ws.lazarewww.ru, откуда блок и взят (файл забран 07.09.2026, 213 байт, целиком): @media (max-width: 576px) { .img { max-width: 45% } .card-body { max-width: 55% } } .animation { transition: transform 0.5s; } .animation:hover { transform: scale(1.1); } ⚠️ У ОРИГИНАЛА МЕДИАЗАПРОСА НА HOVER НЕТ ВООБЩЕ. У нас правило было завёрнуто в `@media (hover: hover) and (pointer: fine)` — «только точный указатель». Этот запрос спрашивает про ПЕРВИЧНЫЙ указатель устройства, и на ноутбуке с сенсорным экраном (а также с пером/гибридом) браузер отвечает `hover: none` / `pointer: coarse` — при подключённой мыши. То есть у части машин условие ложно, правило не применяется, и эффект «не работает», хотя на оригинале на той же машине работает. Ровно это владелец и видел. ⚠️ Структура разметки НИ ПРИ ЧЁМ — сличено DOM-в-DOM 07.09.2026: и там, и здесь `div.col-12.col-sm-6.col-lg-3.animation > div.card[data-aos=zoom-in] > div.img > img` + `div.card-body`. Классы, вложенность и порядок совпадают, селектор целится в тот же элемент. Разметку блока (stages.php) НЕ трогали. РЕШЕНИЕ: правило больше НЕ ЗАВЁРНУТО в медиазапрос — ровно как на оригинале. Промежуточный вариант «гейт по any-hover/any-pointer» был внедрён и снят в тот же час: в эмуляции устройства с тачем он тоже давал ложь, то есть переносил ту же мину на шаг вбок. Про отсутствие тач-выключателя — отдельный разбор ниже по файлу. ⚠️ Замер эмуляций 07.09.2026 (ширина карточки до -> во время наведения): обычный десктоп (hover:hover)and(pointer:fine)=true 306 -> 336.6 (+10 %) эмуляция тач-устройства то же условие = false 306 -> 306 (0 %) Вторая строка и есть негативный контроль: пока эффект стоял за тем условием, любая машина, отвечающая на него «нет», не получала увеличения вовсе. */ .stages-repeat .animation:hover { z-index: 2; transform: scale(var(--stage-hover-scale)); } .stages-repeat .animation:hover .card { box-shadow: var(--macro-shadow-lg) !important; } /* ⚠️ ТАЧ-ВЫКЛЮЧАТЕЛЯ ЗДЕСЬ НЕТ, И ЭТО РЕШЕНИЕ, А НЕ ЗАБЫТЫЙ МЕДИАЗАПРОС. Ставился и снят 07.09.2026 в ту же правку. Причины две: 1) владелец требует «как в оригинале», а на оригинале гейта нет вовсе (файл сверен побайтово, см. выше). Любое условие — это ещё один шанс, что на конкретной машине оно окажется ложным и эффект снова пропадёт; 2) общий запрет проекта «hover заворачивай в (hover: hover)» держится на доводе «на тач первый тап залипает и переход не срабатывает» — он про КЛИКАБЕЛЬНЫЕ элементы. Карточка шага ссылкой не является (внутри только картинка, заголовок и текст), кликать в ней нечего, поэтому залипший hover ничего не блокирует: на следующем тапе он снимается сам. Ниже 576px увеличение и так отключено множителем --stage-hover-scale: 1, то есть на телефоне эффекта нет независимо от указателя. */ /* ⚠️ РЕЖИМ «МЕНЬШЕ ДВИЖЕНИЯ» — ПРАВИЛО ИЗМЕНЕНО 07.09.2026, ЧИТАЙ ЦЕЛИКОМ. Здесь стояло `transform: none` — то есть при системной настройке «уменьшить движение» увеличение не происходило ВООБЩЕ. Это и есть первый подозреваемый в жалобе владельца «увеличения при наведении нет»: замер 07.09.2026 в профиле с prefers-reduced-motion=reduce дал на hover transform=none, тогда как в обычном профиле на той же странице — matrix(1.1, 0, 0, 1.1, 0, 0) на всех четырёх карточках. Отказ выглядит как «эффекта нет», хотя CSS цел. Теперь под reduce снимается ПЕРЕХОД, а не сам эффект: карточка меняет размер мгновенно, без полусекундной анимации. Это соответствует смыслу настройки — она про АНИМАЦИЮ (плавное движение, параллакс, автопрокрутка), а не про запрет менять состояние элемента под курсором; мгновенная смена размера движением не воспринимается. ⚠️ Если решим вернуться к полному отключению — вернуть `transform: none` в блок ниже, но тогда владельцу надо сказать, что на его машине эффекта не будет по настройке ОС, а не по вёрстке. */ @media (prefers-reduced-motion: reduce) { .stages-repeat .animation, .stages-repeat .card { transition: none; } }