/* R2.1 — оформление sikkia.com.ua поверх темы cardealer. * * Подключается ПОСЛЕДНИМ, все правила ограничены `body.sikkia-r21`. * Аварийный откат — снять одно подключение в , разметка при этом остаётся * рабочей: классы r21-* без этого файла ничего не значат. * * Что здесь НЕ делается (сознательно, по разбору Codex 14.08.2026): * — не снимается `site-layout-boxed` глобально: на этой теме от класса зависят * шапка, меню, слайдер и отрицательные поля, риск выше отдачи; * — не трогается RevSlider: он считает ширину слоёв скриптом, растяжение через * CSS ломает позиции надписей; * — не задаётся высота карточкам каталога: их высота должна стать следствием * цены и кнопки в R3, иначе получится пустой низ. * * ⚠️ Полноширинная полоса сделана через `margin-inline: calc(50% - 50vw)` при * `overflow-x: clip` у оболочки. Без clip вертикальная полоса прокрутки даёт * 100vw > ширины документа и появляется горизонтальный скролл. */ body.sikkia-r21 { --r21-light-bg: #f2f2f2; --r21-light-fg: #3a3a3a; --r21-light-head: #1a1a1a; --r21-light-link: #a81b1c; --r21-dark-fg: #e8e8e8; --r21-measure: 74ch; } /* полосы во всю ширину окна не должны рождать горизонтальную прокрутку */ body.sikkia-r21 #page, body.sikkia-r21 .page-wrapper, body.sikkia-r21 #main { overflow-x: clip; } /* ─── полоса во всю ширину окна ───────────────────────────────────────────── */ /* Полоса идёт по ширине оболочки сайта, а НЕ во всю ширину окна. * * ⚠️ Сначала было `width:100vw; margin-inline: calc(50% - 50vw)`. Технически * работало (горизонтальной прокрутки не появилось ни на одной из пяти * ширин), но выглядело дефектом: макет темы — рамочный, шапка и слайдер * держатся в 1240 px, и светлая полоса вылезала за рамку шире всего * остального. Полноширинные полосы имеют смысл только вместе со снятием * рамки, а снятие рамки на этой теме признано слишком рискованным. * * Внутренняя колонка ≈860 px: строка длиннее ~90 символов читается хуже, а * заголовок во всю ширину при узких абзацах даёт пустоту справа. */ body.sikkia-r21 .r21-band { padding-block: clamp(40px, 5vw, 80px); padding-inline: max(20px, calc(50% - 430px)); } /* ─── светлая текстовая секция ──────────────────────────────────────────── * Длинный текст на чёрном фоне читается тяжело, а тема красит заголовки в * #363636 — на чёрном это контраст 1.74:1 при норме 3:1. Лечим не перекраской * трёх заголовков, а темой секции: фон светлый, родной цвет заголовков * становится читаемым (10.6:1), заодно появляется ритм страницы. */ body.sikkia-r21 .r21-light { background: var(--r21-light-bg); color: var(--r21-light-fg); } body.sikkia-r21 .r21-light :is(h2, h3, h4, strong, b) { color: var(--r21-light-head); } body.sikkia-r21 .r21-light a { color: var(--r21-light-link); text-decoration: underline; text-underline-offset: 2px; } body.sikkia-r21 .r21-light a:hover { color: #7f1213; } body.sikkia-r21 .r21-light :is(p, li) { color: var(--r21-light-fg); } /* ─── типографика текстовых блоков ──────────────────────────────────────── * Масштаб задаём через clamp, а не фиксированными 45/35 «как у соседей»: * фиксированный крупный кегль на 360 px рвёт заголовок по одной букве. */ body.sikkia-r21 .r21-band h2 { font-size: clamp(26px, 2.6vw, 40px); line-height: 1.22; /* верхний отступ обязателен: без него заголовок раздела прилипает к списку предыдущего и разделы читаются как один сплошной текст */ margin-block: 1.9em 0.6em; } body.sikkia-r21 .r21-band > :is(h2, h3):first-child, body.sikkia-r21 .r21-band > div > :is(h2, h3):first-child { margin-top: 0; } body.sikkia-r21 .r21-band h3 { font-size: clamp(20px, 1.8vw, 28px); line-height: 1.3; margin-block: 1.6em 0.5em; } body.sikkia-r21 .r21-band :is(p, li) { font-size: clamp(15px, 1.05vw, 17px); line-height: 1.72; } body.sikkia-r21 .r21-band ul { margin-bottom: 1.2em; } body.sikkia-r21 .r21-band li { margin-bottom: 0.35em; } /* ─── карточка товара: заголовок описания на тёмном ─────────────────────── * Здесь секцию светлой не делаем — это короткий текст внутри вкладки карточки, * а не отдельная полоса. Достаточно вернуть заголовку читаемый цвет. */ body.sikkia-r21 .r21-on-dark :is(h2, h3) { color: #fff; } /* ─── бледный серый на светлых секциях ──────────────────────────────────── * Тема ставит #999 на белом — 2.85:1. Телефон и почта на странице контактов * читаются хуже всего остального на сайте. */ body.sikkia-r21 .section-title span, body.sikkia-r21 .feature-box .content p, body.sikkia-r21 .feature-box .content li { color: #5f5f5f; } /* ─── текстовый блок на светлом фоне темы ───────────────────────────────── * Страница дилеров: длинный текст с раскрывающимся списком лежит на белом фоне * секции темы, а тема красит списки в #999 — 2.85:1. Блок опознаём по * раскрывающемуся элементу: он на сайте ровно один на страницу. */ body.sikkia-r21 .wpb_raw_html:has(details) :is(p, li, h4, h5) { color: var(--r21-light-fg); } /* ─── фирменный красный на тёмном ───────────────────────────────────────── * #db2d2e на #191919 — 3.71:1 при 13 px. Осветляем ровно там, где фон тёмный, * не трогая красный на светлых секциях и кнопках. */ body.sikkia-r21 .page-breadcrumb a, body.sikkia-r21 .topbar a, body.sikkia-r21 #navigation a, /* активный пункт главного меню — тема красит его фирменным красным; селектор именно `.menu-links .current-menu-item > a`, а не `#navigation a`: первая попытка правила промахнулась мимо этого элемента, и контраст 3.71 остался на месте при зелёном отчёте о применении CSS */ /* ⚠️ Специфичность здесь не косметика: тема адресует этот пункт селектором с ДВУМЯ идентификаторами (`#header … #primary-menu > li.menu-item > a`), и правило вида `body.sikkia-r21 .menu-links .current-menu-item > a` проигрывает молча — CSS подключён, отчёт зелёный, контраст остаётся 3.71. */ /* ⚠️ Два промаха подряд по этому элементу, оба с зелёным отчётом о применении CSS: сначала селектор без идентификаторов проиграл правилу темы, потом селектор с `#header` не сработал вовсе — меню лежит НЕ внутри `#header` (проверено выводом цепочки предков живого узла: `DIV.col-lg-12 > UL#primary-menu > LI.current-menu-item > A`). Здесь `!important` уместен: правило темы адресует пункт двумя идентификаторами. */ body.sikkia-r21 #primary-menu > li.current-menu-item > a, body.sikkia-r21 #primary-menu > li.current-menu-ancestor > a, body.sikkia-r21 #primary-menu > li.menu-item > a:hover { color: #ec5f60 !important; } /* Цифра в кружке кластера на карте дилеров: белым по светло-коралловому это * 2.72:1. Меняем только цвет цифры, сам кружок не трогаем — он опознаваемый * элемент карты. */ body.sikkia-r21 .marker-cluster span { color: #1a1a1a; font-weight: 700; } /* ─── мелкие детали, которые дают ощущение опрятности ─────────────────────── */ /* Ряды плиток в каталоге идут вплотную — между ними нет ни пикселя, и три ряда * читаются как одна сплошная решётка. Разводим вертикально. */ body.sikkia-r21 .car-item { margin-bottom: clamp(16px, 1.8vw, 26px); } /* плитка каталога: изображение не прыгает при наведении, тень мягче */ body.sikkia-r21 .car-item { transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1); } body.sikkia-r21 .car-item:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgb(0 0 0 / 45%); } /* видимый фокус с клавиатуры — у темы его нет вовсе */ body.sikkia-r21 :is(a, button, input, textarea, select):focus-visible { outline: 2px solid #db2d2e; outline-offset: 2px; } /* кнопка отправки формы должна отзываться на нажатие */ body.sikkia-r21 input[type="submit"]:active, body.sikkia-r21 button:active { transform: scale(0.985); } @media (prefers-reduced-motion: reduce) { body.sikkia-r21 .car-item, body.sikkia-r21 input[type="submit"], body.sikkia-r21 button { transition: none; transform: none; } }