/* Страница кейса в новом стиле. * * Почему слоем поверх, а не переписыванием шаблона. Содержимое кейсов лежит * в двух десятках полей ACF и в редакторе: заголовки, слайдеры, этапы, цифры, * блоки «что сделали». Переписать разметку — значит переносить содержимое * девятнадцати кейсов вручную и на каждом рискнуть потерять кусок. Разметка * остаётся прежней, меняется только то, как она выглядит. * * Файл подключается последним и только на кейсах (см. rr_assets в rr-core.php), * поэтому перебивает style.css без единого !important — кроме двух мест, где * старый каскад бьёт по !important сам. * * Ширина содержимого приведена к сетке нового слоя: на сайте все страницы * идут в 1300 px с полем 70, а кейс жил в трёх разных обёртках — 1280, 1380 * и 1420. Разнобой был виден на глаз при переходе со страницы услуги в кейс. */ /* ── Палитра кейса ─────────────────────────────────────────────────────────── Кейс — единственная светлая страница сайта: так решил владелец, и так это было до 08.09.2026. Остальной сайт тёмный, поэтому токены `--rr-*` здесь не годятся — они все выведены из графита и белого текста. Свой набор, а не переопределение `--rr-*` на body: шапка кейса и подвал остаются тёмными и продолжают читать общие токены. Подмени я `--rr-bg-deep`, вместе с полотном побелела бы и шапка. Контраст на белом посчитан, а не прикинут на глаз: --case-text 17,8:1 --case-text-2 8,3:1 --case-text-3 5,1:1 --case-accent 5,4:1 Всё, чем набран текст, проходит AA с запасом. Про акцент отдельно. Фирменный лайм #C7F634 на белом даёт 1,4:1 — это не «бледновато», это нечитаемо, и точка-маркер такого цвета просто исчезает. Поэтому для текста и мелкой графики взят тот же тон, уведённый в темноту; яркий лайм остаётся там, где он заливка под тёмным текстом (кнопка). */ body.single-catalog { --case-bg: #FFFFFF; --case-surface: #F6F7F4; /* карточки */ --case-surface-2: #EDEFE9; /* блок формы, заглушка превью */ --case-line: rgba(23, 24, 23, .12); --case-text: #171817; /* тот же графит, что в тёмной теме */ --case-text-2: rgba(23, 24, 23, .78); --case-text-3: rgba(23, 24, 23, .64); --case-text-4: rgba(23, 24, 23, .52); /* подсказки в полях */ --case-accent: #587309; /* Поле ввода — отдельный токен, а не --case-bg. Поля стоят на ТЁМНОЙ панели призыва, и на светлой странице им нужен цвет полотна (белый), а на чёрной — не чёрный, иначе поле сливается с панелью и его не видно вовсе. Разводим два случая явно. */ --case-field: #FFFFFF; --case-field-line: #FFFFFF; --case-field-text: #171817; } /* ДВА КЕЙСА ЖИВУТ НА ДРУГОМ ШАБЛОНЕ И ОНИ ЧЁРНЫЕ. * * `antiservis` и `light-dental-group` собраны не на `single-catalog-new.php`, * а на шаблоне по умолчанию, и их вёрстка рассчитана на чёрную страницу: * заголовки, подписи и названия проектов там заданы белым. Светлое полотно * стирало их подчистую — замер показал контраст ровно 1:1 у одиннадцати * блоков, то есть белым по белому. Заодно наоборот: цифры результата у них * лежат на собственных тёмных плашках, и тёмный текст на них тоже пропадал. * * Поэтому у палитры два набора значений, а не два набора правил: сами правила * ниже ничего не знают про шаблон и работают на переменных. Светлая страница * получает светлые значения, чёрная — чёрные, разметка и раскладка общие. * * Значения взяты из самой темы: #000000 — это `--bgcolor` из style.css, * #1B1B1D — `--bgcolor2`, которым залиты блоки этих двух кейсов. На чёрном * фирменный лайм даёт 16,7:1 и в затемнении не нуждается. */ body.single-catalog.catalog-template-default { --case-bg: #000000; --case-surface: #1B1B1D; --case-surface-2: #131315; --case-line: rgba(255, 255, 255, .12); --case-text: #FFFFFF; --case-text-2: rgba(255, 255, 255, .78); --case-text-3: rgba(255, 255, 255, .64); --case-text-4: rgba(255, 255, 255, .45); --case-accent: var(--rr-accent); --case-field: rgba(255, 255, 255, .06); --case-field-line: rgba(255, 255, 255, .28); --case-field-text: #FFFFFF; } /* ── Полотно ─────────────────────────────────────────────────────────────── */ /* Красим именно body, а не только статью кейса. Блоки «Похожие кейсы», «Следующий проект» и форма заявки лежат ЗА пределами
— по разметке шаблона так не скажешь, это видно только в браузере. Пока фон стоял на статье, нижняя треть страницы уходила в другой цвет, и стык читался как незагрузившаяся страница. */ body.single-catalog, .page-case { background: var(--case-bg); color: var(--case-text-2); font-family: var(--rr-font-text); } /* Раньше здесь стояло `color: inherit` на всё подряд внутри статьи — это было нужно, пока страница была тёмной: старая тема красит тексты кейса в чёрный, и на графите они пропадали. На светлой странице эти цвета снова верны, а само правило стало вредным: оно перекрашивало и то, у чего есть собственная светлая плашка. Например, шаги «Исследования / Разработка / Оптимизация» получали белый текст на белом фоне. Правило убрано, цвета задаются точечно там, где действительно нужны. */ /* Страховка от старых декораций. В кейсах есть абсолютно позиционированные точки и фигуры, которые на широком экране вылезают за правый край: на /cases/antiservis/ страница уезжала вбок на 12 px. Ловить каждую фигуру отдельно нет смысла — их расставляли по месту в каждом кейсе. Режем по секциям, а не по body. Переполнение body браузер передаёт области просмотра, и на самом верхнем элементе clip не срабатывает — проверено замером: страница продолжала прокручиваться вбок на те же 12 px. На обычной секции clip работает как ожидается. hidden здесь нельзя: он сделал бы секцию контейнером прокрутки и сломал прилипшую шапку кейса. */ body.single-catalog article { overflow-x: clip; } /* Длинные слова в текстах кейсов (названия систем, ссылки) на 320 px шире колонки: на /cases/sharilend/ одно такое выносило страницу на 46 px. */ body.single-catalog :is(p, li, h1, h2, h3, h4, h5, h6, strong, span) { overflow-wrap: break-word; } body.single-catalog .wrapper, body.single-catalog .wrapper-1380, body.single-catalog .wrapper-large { max-width: calc(var(--rr-container) + var(--rr-gutter) * 2); margin-inline: auto; padding-inline: var(--rr-gutter); box-sizing: border-box; } /* ── Шапка кейса: логотип и крестик ──────────────────────────────────────── */ .rr-header--case { background: var(--rr-bg-deep); border-bottom: 1px solid var(--rr-border-soft); position: sticky; top: 0; z-index: 50; } .rr-header--case .rr-container { display: flex; align-items: center; justify-content: space-between; gap: var(--rr-space-4); max-width: calc(var(--rr-container) + var(--rr-gutter) * 2); margin-inline: auto; padding: var(--rr-space-4) var(--rr-gutter); box-sizing: border-box; } /* :link и :visited в селекторе — не украшение. В style.css ссылки покрашены правилом `a, a:visited { color: var(--themecolor) }`, а это тег плюс псевдокласс: вес выше, чем у одного класса. Крестик ведёт на /cases/, так что у пришедшего из списка кейсов он оказывался посещённой ссылкой и зеленел прежним #00FF47. */ .rr-case-close, .rr-case-close:link, .rr-case-close:visited { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex: none; border-radius: var(--rr-radius-pill); border: 1px solid var(--rr-border-strong); background: transparent; color: var(--rr-text-primary); transition: background var(--rr-dur) var(--rr-ease), color var(--rr-dur) var(--rr-ease), border-color var(--rr-dur) var(--rr-ease); } .rr-case-close:hover, .rr-case-close:focus-visible { background: var(--rr-accent); border-color: var(--rr-accent); color: var(--rr-on-accent, #141414); } .rr-case-close svg { display: block; } /* Собственный крестик шаблона больше не нужен: он ярко-зелёный из прежней палитры и висит поверх первого экрана. Его роль забрал крестик в шапке. */ .page-case .back { display: none; } /* ── Заголовок ───────────────────────────────────────────────────────────── */ .page-case .single-post-main { padding: var(--rr-space-24) 0 var(--rr-space-16); } .page-case .single-catalog-new-title, .page-case .single-catalog-new-title h1, .page-case .single-catalog-new-title h2 { font-family: var(--rr-font-display); font-weight: 700; font-size: var(--rr-size-h1); line-height: 1.1; letter-spacing: -.02em; color: var(--case-text); margin: 0; /* Во всю ширину контейнера — вровень с баннером под ним. Раньше стоял потолок в 20 знаков: типографически строка так читается лучше, но заголовок вставал уже картинки, и левый край страницы получался рваным. Владелец просил вровень с баннером — оставляем вровень. */ } /* ── Крупная картинка и галереи ──────────────────────────────────────────── */ .page-case .main-case-image, .page-case .single-catalog-new-photos img, .page-case .slider img { border-radius: var(--rr-radius-card); overflow: hidden; } /* Рамка баннера в style.css задана фиксированной высотой (640 px, на телефоне 500), а картинка внутри позиционирована абсолютно и растянута на 115 % — расчёт на то, что она всегда выше рамки и обрезается. На узком экране она наоборот НИЖЕ: на 390 px картинка выходила 203 px в рамке на 500, и под баннером зияла пустая треть экрана. Пропорция вместо высоты. 65:32 — те же 640 px при контейнере 1300, только теперь это работает на любой ширине. Картинка кроется по рамке, ширина 115 % сохранена: на ней держится сдвиг при наведении из прежней вёрстки. */ .page-case .main-case-image { height: auto; aspect-ratio: 65 / 32; } .page-case .main-case-image img { display: block; position: absolute; top: 0; height: 100%; width: 115%; object-fit: cover; border-radius: var(--rr-radius-card); } .page-case .slider { border-radius: var(--rr-radius-card); overflow: hidden; } /* Плитка галереи в style.css имеет фиксированную высоту (на телефоне 480 px), а картинка внутри — height: 100 %, то есть раньше она заполняла плитку с обрезкой. Ограничив картинку по ширине, мы сделали её ниже плитки, и под ней оставалась пустая тонированная коробка. Высоту снимаем: плитку задаёт сама картинка. */ .page-case .single-catalog-new-photos > div { height: auto; } /* Картинки в галерее кейса вставлены без ограничения ширины: на 1024 одна из них выходила за экран на 405 px. Прокрутки не появлялось только потому, что её обрезал контейнер, — то есть кусок картинки просто не показывали. Карусель исключаем: её ширины считает tiny-slider, и потолок ей мешает. */ .page-case .single-catalog-new-photos img, .page-case .single-catalog-new-information img, .page-case .single-catalog-new-chto_sdelali img { max-width: 100%; height: auto; } /* ── Колонки «Клиент и задачи», «Цель» ───────────────────────────────────── */ /* Сетка, а не флекс с зазором. В style.css у колонок стоит `width: 50%`, и добавленный зазор в 36 px не давал двум колонкам ужиться в строке — вторая переносилась вниз, а справа оставалась пустая половина экрана. Сетка сама вычитает зазор из колонок. */ .page-case .single-catalog-new-margin { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; margin-top: var(--rr-space-24); gap: var(--rr-space-5); } .page-case .single-catalog-new-col { width: auto; margin: 0; background: var(--case-surface); border: 1px solid var(--case-line); border-radius: var(--rr-radius-card); padding: var(--rr-space-8); box-sizing: border-box; } /* «Основные задачи» — вторая строка той же сетки, во всю ширину. */ .page-case .single-catalog-new-margin .single-catalog-new-row { grid-column: 1 / -1; width: auto; margin: 0; } /* В шаблоне класс single-catalog-new-margin висит ДВАЖДЫ: на обёртке колонок «Клиент и задачи / Цель» и на обёртке блока этапов. Сетка написана под первый случай, но матчилась и на второй: у обёртки этапов ровно два ребёнка, и они вставали в две колонки по 50 % — заголовок «Этапы проекта» слева, все карточки этапов в правой половине. Внутри неё .stage сохраняет из style.css `width: calc(50% - 15px)`, то есть карточка выходила 305 px при контейнере 1300: три-четыре слова в строку. Возвращаем этим детям полную ширину строки. */ .page-case .single-catalog-new-margin > .single-catalog-new-stages-info, .page-case .single-catalog-new-margin > .stages-list { grid-column: 1 / -1; } /* Вложенный .wrapper внутри .wrapper получал поле в 70 px второй раз, и заголовок «Этапы проекта» стоял правее всего остального на странице. */ .page-case .single-catalog-new-margin > .single-catalog-new-stages-info { max-width: none; padding-inline: 0; } /* Порядок берём из разметки. В style.css под 767 px колонкам расставлен `order` (1 и 2), а блоку «Основные задачи» — нет, то есть у него остаётся ноль. В сетке это выкидывало его ВПЕРЁД: на телефоне страница начиналась с «Основных задач», а «Клиент и задачи» с «Целью» уезжали под них. На прежней раскладке это ничего не давало и осталось незамеченным. */ .page-case .single-catalog-new-margin > .single-catalog-new-col, .page-case .single-catalog-new-margin > .single-catalog-new-row { order: 0; } /* Селекторы с `span` — не украшение. В style.css эти подписи покрашены в #A5A5A5 правилами вида `.single-catalog-new-col span.col-suptitle`, то есть двумя классами и тегом. Правило из двух классов проигрывает им по весу, даже стоя ниже по каскаду, и подписи оставались серыми: 2,3:1 на светлой карточке — это на грани неразличимости. А `.next-case .suptitle` не перебивался ещё и потому, что блок «Следующий проект» лежит вне `.page-case`, и селектор просто не совпадал. */ body.single-catalog span.col-suptitle, body.single-catalog span.row-suptitle, body.single-catalog span.suptitle-left, body.single-catalog span.suptitle { display: block; margin-bottom: var(--rr-space-4); font-family: var(--rr-font-mono); font-size: 12px; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; color: var(--case-accent); } .page-case .single-catalog-new-col p, .page-case .single-catalog-new-row p, .page-case .description-right, .page-case .stage-description { font-size: var(--rr-size-base, 1rem); line-height: 1.6; color: var(--case-text-2); } /* ── Список основных задач ───────────────────────────────────────────────── */ .page-case .single-catalog-new-row ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rr-space-4); margin: 0; padding: 0; list-style: none; } .page-case .single-catalog-new-row li { position: relative; padding: var(--rr-space-5) var(--rr-space-6) var(--rr-space-5) var(--rr-space-11); background: var(--case-surface); border: 1px solid var(--case-line); border-radius: var(--rr-radius-tile); color: var(--case-text-2); line-height: 1.5; } /* Точка вместо маркера: у старой разметки маркеры выключены глобально, а без метки строки читаются сплошняком. */ .page-case .single-catalog-new-row li::before { content: ''; position: absolute; left: var(--rr-space-6); top: 1.55em; width: 6px; height: 6px; border-radius: 50%; background: var(--case-accent); } /* ── Этапы проекта ───────────────────────────────────────────────────────── */ /* Сетка, а не флекс с зазором. У шапки блока две колонки заданы в style.css как 300 px и calc(100% - 300px) — в сумме ровно 100 %, и добавленный зазор в 36 px выбрасывал описание под заголовок. Та же история, что с колонками «Клиент и задачи»: сетка сама вычитает зазор. */ .page-case .single-catalog-new-stages-info { display: grid; grid-template-columns: 300px minmax(0, 1fr); align-items: start; margin-top: var(--rr-space-24); gap: var(--rr-space-9); } .page-case .title-left, .page-case .description-right { width: auto; } .page-case .title-left, .page-case .single-catalog-new-information h2, .page-case .single-catalog-new-chto_sdelali h2 { font-family: var(--rr-font-display); font-weight: 700; font-size: var(--rr-size-h2); line-height: 1.15; letter-spacing: -.01em; color: var(--case-text); margin: 0; } /* Карточки этапов тоже переводим на сетку: в style.css у .stage стоит `width: calc(50% - 15px)`, посчитанный под прежний зазор. С любым другим зазором две карточки в строку либо не помещаются, либо оставляют щель. */ .page-case .stages-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--rr-space-14); gap: var(--rr-space-5); } .page-case .stage { background: var(--case-surface); border: 1px solid var(--case-line); border-radius: var(--rr-radius-card); padding: var(--rr-space-8); box-sizing: border-box; width: auto; margin: 0; } .page-case .stage-title { font-weight: 600; font-size: 1.125rem; line-height: 1.3; color: var(--case-text); margin-bottom: var(--rr-space-3); } /* Номер этапа — служебная часть заголовка, она не должна спорить с названием. */ .page-case .stage-title span { display: block; margin-bottom: var(--rr-space-2); font-family: var(--rr-font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--case-accent); } /* ── Текстовые блоки ─────────────────────────────────────────────────────── */ .page-case .single-catalog-new-info { margin-top: var(--rr-space-24); } .page-case .single-catalog-new-information p, .page-case .single-catalog-new-chto_sdelali p { font-size: 1.0625rem; line-height: 1.65; color: var(--case-text-2); } .page-case .single-catalog-new-information p + p, .page-case .single-catalog-new-chto_sdelali p + p { margin-top: var(--rr-space-4); } /* ── Цифры результата ────────────────────────────────────────────────────── */ .page-case .case-result-new { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: var(--rr-space-24); gap: var(--rr-space-5); } /* Прежние правила рисовали вокруг цифр ещё одну коробку со светлой рамкой и полями 35x70 — на тёмном фоне получалась рамка внутри рамки и полэкрана пустоты. Здесь коробка не нужна: каждая цифра уже карточка. */ .page-case .case-numbers-new { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--rr-space-5); width: 100%; /* max-width: 380px из мобильного блока style.css переживал всё остальное и в диапазоне 421-767 px прижимал блок цифр к левому краю. */ max-width: none; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; } .page-case .case-number-new { /* width: 50% из style.css считался теперь от ячейки сетки: карточка занимала ровно половину своего трека и жалась влево, а на «Рекламный бюджет» оставалось 84 px — по слову в строку. */ width: auto; margin: 0; background: var(--case-surface); border: 1px solid var(--case-line); border-radius: var(--rr-radius-card); padding: var(--rr-space-8); box-sizing: border-box; font-family: var(--rr-font-display); font-weight: 700; font-size: clamp(1.5rem, 1.1rem + 2vw, 2.25rem); line-height: 1.05; color: var(--case-text); } .page-case .case-number-new p { margin: var(--rr-space-3) 0 0; font-family: var(--rr-font-text); font-weight: 400; font-size: 13px; line-height: 1.3; letter-spacing: .04em; text-transform: uppercase; color: var(--case-text-3); } .page-case .case-result-extra-new { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--rr-space-5); width: 100%; max-width: none; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; } .page-case .case-result-extra-new p { margin: 0; padding: var(--rr-space-6); background: var(--case-surface); border: 1px solid var(--case-line); border-radius: var(--rr-radius-card); font-size: 1.0625rem; line-height: 1.4; color: var(--case-text-2); } /* ── Соседние кейсы и следующий проект ───────────────────────────────────── */ /* Старый .wrap-flex раскладывал карточки по ширинам из прежней сетки: при новых полях они разъезжались лесенкой разной высоты. Сетка решает это без магических процентов. */ body.single-catalog .related-cases { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--rr-space-6); margin-top: var(--rr-space-24); } body.single-catalog .related-case { display: flex; flex-direction: column; background: var(--case-surface); border: 1px solid var(--case-line); border-radius: var(--rr-radius-card); overflow: hidden; box-sizing: border-box; width: auto; /* max-width: 250px из style.css оставлял карточку уже ячейки сетки: на планшете и телефоне между карточками зияли пустые полосы. */ max-width: none; margin: 0; } /* Превью есть не у всех кейсов. Без своей заливки карточка без картинки выглядела дырой: сверху пусто, снизу подпись. Заливка делает её карточкой в любом случае. */ body.single-catalog .related-case-img { display: block; aspect-ratio: 4 / 3; background-color: var(--case-surface-2); background-size: cover; background-position: center; border-bottom: 1px solid var(--case-line); } body.single-catalog .related-case-meta { display: inline; padding: 0; font-family: var(--rr-font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--case-text-3); } /* Метки печатаются подряд отдельными span, и в колоночном флексе каждая становится своей строкой. Отступ нужен КАЖДОЙ: раньше он стоял только на первой, и вторая метка липла к краю карточки. */ body.single-catalog .related-case-meta { padding-inline: var(--rr-space-5); } body.single-catalog .related-case-meta:first-of-type { padding-top: var(--rr-space-5); } body.single-catalog .related-case-title { display: block; margin-top: auto; padding: var(--rr-space-3) var(--rr-space-5) var(--rr-space-5); font-weight: 600; font-size: 1rem; line-height: 1.3; color: var(--case-text); transition: color var(--rr-dur) var(--rr-ease); } body.single-catalog .related-case-title:hover, body.single-catalog .next-case-title:hover { color: var(--case-accent); } body.single-catalog .next-case { margin-top: var(--rr-space-24); padding-bottom: var(--rr-space-24); } body.single-catalog .next-case .suptitle { margin-bottom: var(--rr-space-3); } body.single-catalog .next-case-title { display: block; margin-bottom: var(--rr-space-9); padding: 0; font-family: var(--rr-font-display); font-weight: 700; font-size: var(--rr-size-h2); line-height: 1.1; letter-spacing: -.01em; color: var(--case-text); transition: color var(--rr-dur) var(--rr-ease); } body.single-catalog .next-case-image { display: block; /* height из style.css (400 px, на телефоне 500) выигрывает у пропорции: когда заданы обе оси, aspect-ratio не работает вовсе. */ height: auto; aspect-ratio: 16 / 7; background-size: cover; background-position: center; border-radius: var(--rr-radius-card); overflow: hidden; } body.single-catalog .next-case-image img { display: block; width: 100%; height: 100%; object-fit: cover; } /* ── Форма заявки ────────────────────────────────────────────────────────── */ /* Блок призыва остаётся тёмным — и это не отступление от «белого кейса», а его исходное устройство. В прежней вёрстке `.open-form` залит `--bgcolor2` (#1B1B1D), и весь текст внутри задан белым: заголовок, подпись, строка «Позвоним вам в течение 15 минут». Стоило сделать панель светлой — и половина текста пропала, потому что белым по светлому. Красить каждую строку в тёмный значит переписывать чужой каскад ради результата, который и так был задуман: тёмная карточка призыва в конце светлой страницы. */ body.single-catalog .open-form { margin-top: var(--rr-space-24); padding: var(--rr-space-16) var(--rr-space-14); background: var(--rr-bg-deep); border: 1px solid var(--rr-bg-deep); border-radius: var(--rr-radius-card); box-sizing: border-box; /* Сетка вместо флекса с переносом. В style.css колонки панели заданы как 45 % + отступ 15 % + 40 % — в сумме ровно 100 %, и этого хватает, чтобы от любого округления или зазора колонка с полями срывалась под текст. Ловилось на 1300 px. Сетка держит две колонки при любой ширине, а нижняя граница правой (340 px) не даёт ей стать уже виджета капчи. */ display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); align-items: start; column-gap: var(--rr-space-16); row-gap: var(--rr-space-9); } body.single-catalog .open-form > .open-form-left, body.single-catalog .open-form > .open-form-right { width: auto; max-width: none; margin-right: 0; } body.single-catalog .open-form h2, body.single-catalog .open-form h3, body.single-catalog .open-form h4 { font-family: var(--rr-font-display); font-weight: 700; font-size: var(--rr-size-h2); line-height: 1.15; color: var(--rr-text-primary); margin: 0 0 var(--rr-space-4); } /* Мелкий текст формы в прежней вёрстке местами не покрашен вовсе и брал цвет у страницы — на белой странице он оставался тёмным и на тёмной панели пропадал. Задаём явно. */ body.single-catalog .open-form :is(p, h5, h6, span, label, div) { color: var(--rr-text-secondary); } body.single-catalog .open-form :is(h5, h6) { color: var(--rr-text-primary); } body.single-catalog .open-form input[type="text"], body.single-catalog .open-form input[type="tel"], body.single-catalog .open-form input[type="email"], body.single-catalog .open-form textarea { width: 100%; padding: 14px 16px; background: var(--case-field); border: 1px solid var(--case-field-line); border-radius: var(--rr-radius-input); /* Текст в поле — под цвет поля: селектор внутри формы красит всё подряд в светлое, и без этой строки человек не видел бы, что печатает. */ color: var(--case-field-text); box-sizing: border-box; } body.single-catalog .open-form input::placeholder, body.single-catalog .open-form textarea::placeholder { color: var(--case-text-4); } /* Видимый фокус. В style.css стоит глобальное `* { outline: 0 }` (строка 241), поэтому пройти кейс табом было нельзя вообще: где стоишь — не видно. Больнее всего в форме: перейдя в поле с клавиатуры, человек не понимает, куда печатает. WCAG 2.4.7. */ body.single-catalog :is(a, button, input, textarea, select, [tabindex]):focus-visible { outline: 2px solid var(--rr-accent); outline-offset: 2px; border-radius: 4px; } /* Кнопка отправки — главное действие страницы, а отзыва на наведение и на фокус у неё не было никакого. */ body.single-catalog .open-form :is(input[type="submit"], .wpcf7-submit):hover { background: var(--rr-lime-500); filter: brightness(1.08); } body.single-catalog .open-form :is(input[type="submit"], .wpcf7-submit):active { filter: brightness(.94); } body.single-catalog .open-form input[type="submit"], body.single-catalog .open-form .wpcf7-submit { max-width: 100%; white-space: normal; padding: 15px 28px; /* Кнопка — единственное место, где на светлой странице уместен яркий лайм: он тут заливка под тёмным текстом, а не сам текст. */ background: var(--rr-accent); border: 0; border-radius: var(--rr-radius-pill); color: #141414; font-weight: 600; cursor: pointer; } /* Виджет капчи приходит с жёсткими 300px — та же история, что в CTA нового слоя: без потолка он выносит колонку за экран. */ body.single-catalog .smart-captcha { max-width: 100%; overflow: hidden; margin-bottom: var(--rr-space-4); } /* ── Планшет и телефон ───────────────────────────────────────────────────── */ @media (max-width: 1023px) { .page-case .case-numbers-new { grid-template-columns: repeat(2, minmax(0, 1fr)); } .page-case .single-catalog-new-row ul { grid-template-columns: minmax(0, 1fr); } .page-case .single-catalog-new-margin { grid-template-columns: minmax(0, 1fr); } body.single-catalog .open-form { padding: var(--rr-space-14) var(--rr-space-8); grid-template-columns: minmax(0, 1fr); } body.single-catalog .related-cases { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Виджет капчи приходит с жёсткими width и min-width 300 px. В карточке формы на 320 px содержимому остаётся 268 — виджет вылезал на 33 px и уносил страницу в горизонтальную прокрутку. Сжимаем целиком: клики по масштабированному элементу браузер пересчитывает сам. Тот же приём уже работает на страницах нового слоя. */ @media (max-width: 374px) { body.single-catalog .open-form { padding: var(--rr-space-8) var(--rr-space-5); } body.single-catalog .smart-captcha { transform: scale(.72); transform-origin: left top; margin-bottom: -26px; } } @media (max-width: 639px) { .page-case .single-post-main { padding: var(--rr-space-14) 0 var(--rr-space-11); } /* На телефоне широкая полоса превращается в щель — берём пропорцию поближе к вертикали, иначе от макета клиента остаётся одна строка пикселей. */ .page-case .main-case-image { aspect-ratio: 3 / 2; } .page-case .single-catalog-new-margin, .page-case .single-catalog-new-stages-info, .page-case .single-catalog-new-info, .page-case .case-result-new, body.single-catalog .related-cases, body.single-catalog .next-case, body.single-catalog .open-form { margin-top: var(--rr-space-16); } body.single-catalog .related-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rr-space-4); } .page-case .case-numbers-new { grid-template-columns: minmax(0, 1fr); } .page-case .single-catalog-new-col, .page-case .stage, .page-case .case-number-new { padding: var(--rr-space-6); } .rr-header--case .rr-container { padding-block: var(--rr-space-3); } .rr-case-close { width: 42px; height: 42px; } } /* ── Подвал сайта ──────────────────────────────────────────────────────────── В style.css есть правило `body.catalog-template-single-catalog-new-php .open-form, ... footer { display: none }` (строка 3105). Оно писалось, когда footer.php печатал прежний подвал и на кейсе он был не нужен. Сейчас footer.php подключает общий `