/* * 99 by CleanWhale — ПОЛЬСКИЙ визуальный слой поверх родительской ListingHive. * * КОНТРАКТ ФАЙЛА (утверждён планом редизайна): * - файл ОБЩИЙ для всех этапов редизайна; каждый этап только ДОБАВЛЯЕТ свою * секцию с заголовком-комментарием (/ * ===== X. Название ===== * /) и НЕ * редактирует чужие секции; * - грузится ПОСЛЕДНИМ из стилей темы (functions.php, приоритет 999), версия * по filemtime — бампать руками НЕ надо; * - токены НЕ дублируем: используем --cw99-* из :root в home-reference.css * (он грузится на каждой странице, кастом-проперти глобальны независимо от * порядка подключения). Третий неймспейс не заводить. * - каждое правило обязано иметь ОБЛАСТЬ (класс страницы/медиазапрос): * все регрессии прошлых кругов — правки шире нужного. * * Дизайн-система (см. .claude/skills/board-design/references/brand.md + * фактический язык главной в home-reference.css): * плоский #2457C6 · futura-pt (веса 400/500/700 — 600 в ките НЕТ, браузер * его подделает) · карточки белые, radius var(--cw99-r), тень-ореол * 0 0 Nvw rgba(0,0,0,a) БЕЗ смещения · кнопки radius 6 · пилюли 999px · * ценник жёлтый с чёрным текстом · БЕЗ uppercase, letter-spacing, серого * текста (приглушение — opacity на чёрном) и рамок у карточек. * * Примечание к истории: этап A («фундамент») не выполнился — файл создан * этапом B вместе с подключением в functions.php. Протечки чужих цветов * родительской темы (#FFC107/#15CD72) сняты У ИСТОЧНИКА — theme mods * primary_color/secondary_color переведены на бренд-значения (см. handoff), * поэтому здесь их точечных переопределений почти нет. */ /* ═════════════════════════════════════════════════════════════ ===== B. Каталог ===== /listing/, страницы категорий, выдача поиска. Область: body.hp-template--listings-view-page — этот класс стоит на всех трёх поверхностях (проверено на живых body-классах каталога и категории; поиск — тот же архивный шаблон). Логика фильтров НЕ тронута — только вид. ═════════════════════════════════════════════════════════════ */ /* ── B1. Капс-микролейблы: снять uppercase + разрядку ────────── Замер живой страницы: родительская тема даёт text-transform:uppercase и letter-spacing:1px счётчику выдачи, подписям полей, селекту сортировки, бейджу категории на карточке, дате и пилюле «N ogłoszeń» в hero категории. Запрещено дизайн-системой — снимаем на всей поверхности каталога. */ .hp-template--listings-view-page .hp-result-count, .hp-template--listings-view-page .hp-form__label, .hp-template--listings-view-page .hp-form__label span, .hp-template--listings-view-page .hp-field__label, .hp-template--listings-view-page .hp-field__label span, .hp-template--listings-view-page .hp-form--listing-sort select, .hp-template--listings-view-page .hp-form--listing-sort .select2-selection__rendered, .hp-template--listings-view-page .hp-listing--view-block .hp-listing__categories a, .hp-template--listings-view-page .hp-listing__created-date, .hp-template--listings-view-page .hp-listing-category__count { text-transform: none; letter-spacing: normal; } /* Выпадашка select2 рендерится в конце , ВНЕ area-класса страницы — поэтому отдельным правилом. Оно глобально по необходимости и безопасно: uppercase в опциях select2 не нужен нигде на сайте. */ .select2-results__option { text-transform: none; letter-spacing: normal; } /* ── B2. Топбар: счётчик и сортировка ──────────────────────── Приглушение — opacity на чёрном, не серый цвет (правило системы). */ .hp-template--listings-view-page .hp-result-count { color: #000; opacity: .55; font-size: .95em; } .hp-template--listings-view-page .hp-form--listing-sort .hp-form__label, .hp-template--listings-view-page .hp-form--listing-sort .hp-form__label span { color: #000; opacity: .55; font-weight: 500; } .hp-template--listings-view-page .hp-page__topbar .select2-selection { border-radius: 6px; border-color: var(--cw99-line, #e9e9e9); } /* ── B3. Карточка объявления: язык главной ─────────────────── Было: серая #FAFAFA с радиусом .3vw (3.84px на 1280) — сырой вид родителя. Стало как у карточек главной: белая, radius var(--cw99-r), тень-ореол без смещения. overflow:hidden скругляет и фото 4:3 сверху; невидимые зоны нажатия кнопок футера (::after, inset -4px) остаются внутри карточки — не обрезаются. */ .hp-template--listings-view-page .hp-listing--view-block { background: #fff; border-radius: var(--cw99-r, 12px); box-shadow: 0 0 max(9px, 1vw) rgba(0, 0, 0, .07); /* пол — иначе на 320 блюр 3.2px и ореол исчезает (канон) */ overflow: hidden; } .hp-template--listings-view-page .hp-listing--view-block:hover { box-shadow: 0 0 max(13px, 1.4vw) rgba(0, 0, 0, .12); } /* ── B4. Иерархия карточки: заголовок → ценник → мета тихо ─── Цена — главное на доске, а стояла в подвале карточки после даты. Блок listing_attributes_primary перенесён из футера в контент шаблонным фильтром (functions.php, «цена после заголовка»), здесь — только раскладка. Жёлтую плашку рисует канонический style.css (селекторы не зависят от места блока — все правила ленты, включая переносы вилки зарплаты, продолжают работать). Дата уезжает В КОНЕЦ контента через order и глохнет. Выравнивание рядов не тронуто: height:100% у карточки и margin-top:auto у футера — из канона, футер по-прежнему прижат к низу, кнопки справа. */ .hp-template--listings-view-page .hp-listing--view-block .hp-listing__content { display: flex; flex-direction: column; align-items: stretch; } .hp-template--listings-view-page .hp-listing--view-block .hp-listing__content .hp-listing__attributes--primary { /* канон даёт flex:1 1 auto под старый футер-ряд; в колонке контента это растягивало бы плашку по вертикали */ flex: 0 0 auto; align-self: flex-start; margin: 8px 0 0; border-radius: 6px; padding: 4px 10px; font-weight: 700; /* бренд: ценник 600-700; 600 в ките нет — берём 700 */ } .hp-template--listings-view-page .hp-listing--view-block .hp-listing__attributes--secondary { margin-top: 10px; } .hp-template--listings-view-page .hp-listing--view-block .hp-listing__details--primary { order: 9; margin: 10px 0 0; } .hp-template--listings-view-page .hp-listing--view-block .hp-listing__created-date { color: #000; opacity: .5; font-size: .8em; } /* Бейдж категории над заголовком — тихий, без капса (снят в B1) */ .hp-template--listings-view-page .hp-listing--view-block .hp-listing__categories a { font-size: .8em; font-weight: 500; } /* Футер после переезда цены — только круглые кнопки, разделительная черта над ними читалась как рамка у карточки (запрещено) */ .hp-template--listings-view-page .hp-listing--view-block .hp-listing__footer { border-top: 0; padding-top: 0; } /* ── B5. Сайдбар фильтров: карточка по токенам ─────────────── ЛОГИКИ ФИЛЬТРОВ НЕ КАСАЕМСЯ (параллельная сессия чинит фильтр цены) — только поверхность. Чекбоксы/радио уже синие в каноне; ползунок цены перекрашиваем с вторичного цвета темы на синий. */ .hp-template--listings-view-page .site-sidebar .hp-form--listing-filter { background: #fff; border-radius: var(--cw99-r, 12px); box-shadow: 0 0 max(9px, 1vw) rgba(0, 0, 0, .07); padding: 22px 20px; } /* Форма фильтра живёт внутри .hp-modal--mobile: НИЖЕ 768px это настоящее модальное окно (не трогаем), а с 768px тема показывает его инлайном в сайдбаре — но КОРОБКА модалки (тень 0 0 3vw .2 + паддинг 34px + свой радиус) ехала вместе с ним, и вокруг белой карточки фильтра рисовалась вторая, «двойная» карточка (замер на живой 1280: у обёртки shadow 38.4px и padding 34px). В сайдбаре коробку гасим целиком — карточкой остаётся сама форма. */ @media (min-width: 48em) { .hp-template--listings-view-page .site-sidebar .hp-modal--mobile { background: transparent; box-shadow: none; padding: 0; border-radius: 0; } } .hp-template--listings-view-page .hp-form--listing-filter .hp-field__label, .hp-template--listings-view-page .hp-form--listing-filter .hp-field__label span { color: #000; font-weight: 500; font-size: .95em; } .hp-template--listings-view-page .hp-form--listing-filter input[type="text"], .hp-template--listings-view-page .hp-form--listing-filter input[type="number"], .hp-template--listings-view-page .hp-form--listing-filter select, .hp-template--listings-view-page .hp-form--listing-filter .select2-selection { border-radius: 6px; border-color: var(--cw99-line, #e9e9e9); } .hp-template--listings-view-page .hp-form--listing-filter input[type="text"]:focus, .hp-template--listings-view-page .hp-form--listing-filter input[type="number"]:focus, .hp-template--listings-view-page .hp-form--listing-filter select:focus { border-color: var(--cw99-blue, #2457c6); } /* Слайдер цены (jQuery UI). Было: дорожка 5px без заливки, ручка 23px белая с рамкой 2px и смещённой тенью 0 2px 4px темы, Arial из ui-theme (2026-09-03, замер модалки «Filtruj» на 390 и сайдбара на 1440). Стало: дорожка 4px --cw99-line, диапазон и ручки — сплошной брендовый синий, без рамок и смещённых теней, шрифт сайта; цель нажатия ручки 44px невидимым ::before (ручка 18px — иначе она перекроет поля Min/Max). Фокус — синее кольцо. */ .hp-template--listings-view-page .hp-field--number-range .ui-slider { height: 4px; border: 0; border-radius: 999px; background: var(--cw99-line, #e9e9e9); font-family: inherit; } .hp-template--listings-view-page .hp-field--number-range .ui-slider .ui-slider-range { border: 0; border-radius: 999px; background: var(--cw99-blue, #2457c6); } .hp-template--listings-view-page .hp-field--number-range .ui-slider .ui-slider-handle { top: -7px; width: 18px; height: 18px; margin-left: -9px; border: 0; border-radius: 50%; background: var(--cw99-blue, #2457c6); box-shadow: none; outline: 0; cursor: pointer; z-index: 3; /* зона ::before выше соседних полей (select2 позиционирован) */ } .hp-template--listings-view-page .hp-field--number-range .ui-slider .ui-slider-handle::before { /* Канон рисует на ::before точку 7×7 внутри ручки — здесь он становится невидимой зоной 44×44 (замер elementFromPoint: с одним inset зона оставалась 7px, ширину/высоту задавала точка). */ content: ''; position: absolute; top: -13px; right: -13px; bottom: -13px; left: -13px; width: auto; height: auto; margin: 0; border: 0; border-radius: 0; background: transparent; transform: none; } .hp-template--listings-view-page .hp-field--number-range .ui-slider .ui-slider-handle:hover, .hp-template--listings-view-page .hp-field--number-range .ui-slider .ui-slider-handle.ui-state-active { background: var(--cw99-blue-hover, #1c47a6); } .hp-template--listings-view-page .hp-field--number-range .ui-slider .ui-slider-handle:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--cw99-blue, #2457c6); } /* ── B6. Пагинация: активная страница — синяя ──────────────── Кольцо — inset-тень, как у чипов главной (это «border» контрола, а не рамка карточки). Стрелка next/prev — те же боксы. */ .hp-template--listings-view-page .pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .hp-template--listings-view-page .pagination .nav-links .page-numbers { min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border-radius: 6px; background: #fff; color: #000; box-shadow: inset 0 0 0 1px var(--cw99-line, #e9e9e9); font-weight: 500; margin: 0; } .hp-template--listings-view-page .pagination .nav-links a.page-numbers:hover { color: var(--cw99-blue, #2457c6); box-shadow: inset 0 0 0 1px var(--cw99-blue, #2457c6); } .hp-template--listings-view-page .pagination .nav-links .page-numbers.current { background: var(--cw99-blue, #2457c6); color: #fff; box-shadow: none; } /* ── B7. Hero страницы категории ───────────────────────────── Оставлен ПЛОСКИМ синим — осознанное решение: эталон (главная) плоский, и чекер дизайн-системы запрещает градиенты; включать hero-v3 (159КБ PNG) ради внутренних страниц незачем. Пилюля счётчика — полупрозрачная белая на синем, белый текст (тот же приём, что бейдж региона на главной). */ .hp-template--listings-view-page .hp-listing-category__count { display: inline-block; padding: 5px 14px; border-radius: 999px; background: rgba(255, 255, 255, .16); color: #fff; font-size: .9em; font-weight: 500; } /* ═════════════════════════════════════════════════════════════ ===== C. Объявление ===== Страница одного объявления. Область: body.hp-template--listing-view-page (класс проверен на живом body). Ленту цены (.cw99-price-ribbon) НЕ трогаем — её чинили три круга; здесь меняются только контейнеры вокруг неё (фон/радиус/тень карточки), геометрия самой ленты не задета ни одним правилом секции. ═════════════════════════════════════════════════════════════ */ /* ── C1. Капс-микролейблы: снять uppercase + разрядку ────────── Запрещено дизайн-системой. На этой странице капсом стояли: пилюля категории над заголовком («SAMOCHODY OSOBOWE»), дата публикации («DODANE 5 SIERPNIA») и стаж продавца в карточке («CZŁONEK OD 6 SIERPNIA 2026»). */ .hp-template--listing-view-page .hp-listing__categories a, .hp-template--listing-view-page .hp-listing__created-date, .hp-template--listing-view-page .hp-vendor__details, .hp-template--listing-view-page .hp-vendor__registered-date { text-transform: none; letter-spacing: normal; } /* Приглушение метаданных — opacity на чёрном, не серый цвет (правило системы) */ .hp-template--listing-view-page .hp-listing__created-date, .hp-template--listing-view-page .hp-vendor__registered-date { color: #000; opacity: .55; } .hp-template--listing-view-page .hp-listing__categories a { font-weight: 500; } /* ── C2. Атрибуты (secondary) → чипы ───────────────────────── Было: «2016 r. / 198 000 km / Diesel» плавали текстом в две колонки грида без обрамления (канонная зебра #fafafa на белом не читалась). Стало: язык пилюль главной — чип #eef2fc с синим текстом (5.76:1, замер главной), как у пилюль типа и города в сайдбаре. Грид hp-row/hp-col распускаем во flex-поток: чип обнимает содержимое, а не тянется на полколонки. ⚠️ Специфичность 0-4-0 обязательна: канон держит зебру селектором .hp-listing__attribute:nth-child(odd) (0-4-0), при 0-3-0 фон чипа молча проигрывал бы ей (файлы у нас позже, но каскад решает специфичность). */ .hp-template--listing-view-page .hp-listing__attributes--secondary .hp-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; } .hp-template--listing-view-page .hp-listing__attributes--secondary .hp-row > [class*="hp-col-"] { flex: 0 0 auto; width: auto; max-width: none; padding: 0; } .hp-template--listing-view-page .hp-listing__attributes--secondary [class*="hp-col-"] > .hp-listing__attribute { display: inline-flex; align-items: center; padding: 7px 16px; border-radius: 999px; background: #eef2fc; color: var(--cw99-blue, #2457c6); font-size: .95em; font-weight: 500; } /* ── C3. Карточки сайдбара: язык главной ───────────────────── Было: #fafafa с радиусом .3vw (3.8px на 1280) — сырой вид родителя. Стало: белые, radius var(--cw99-r), тень-ореол без смещения — как карточки каталога (B3) и главной. У ленты цены меняется только ПОДЛОЖКА-карточка. */ .hp-template--listing-view-page .hp-listing__attributes--primary.widget, .hp-template--listing-view-page .hp-listing__actions--primary.widget, .hp-template--listing-view-page .hp-page__sidebar .hp-vendor--view-block { background: #fff; border-radius: var(--cw99-r, 12px); box-shadow: 0 0 max(9px, 1vw) rgba(0, 0, 0, .07); } /* ── C4. Кнопки действий: из призраков — во вторичные кнопки ── Было: «Napisz opinię» / «Zgłoś ogłoszenie» — текст rgba(0,0,0,.6) на бледной плашке, иконки rgba(7,36,86,.25) — не читались вовсе (замер живой страницы). Стало: вторичная кнопка в языке контролов B6 — белая, кольцо inset 1px (это «border» контрола, а не рамка карточки), чёрный текст, синяя иконка. Ховер — синее кольцо; у «Zgłoś» — цвет ошибки (канонный ховер сохранён). */ .hp-template--listing-view-page .hp-listing__actions--primary .hp-link { display: flex; align-items: center; justify-content: center; gap: 8px; /* Контейнер — flex-колонка родительской темы с align-items:flex-start и gap 12px (замер живой страницы): без stretch кнопка сжималась до текста (149px) и стояла ступенькой к соседям; отступ даёт gap, не margin. */ align-self: stretch; padding: 10px 16px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px var(--cw99-line, #e9e9e9); color: #000; font-size: .95em; font-weight: 500; transition: box-shadow .2s, color .2s; } .hp-template--listing-view-page .hp-listing__actions--primary .hp-link .hp-icon { color: var(--cw99-blue, #2457c6); transition: color .2s; } .hp-template--listing-view-page .hp-listing__actions--primary .hp-link:hover { color: var(--cw99-blue, #2457c6); box-shadow: inset 0 0 0 1px var(--cw99-blue, #2457c6); } .hp-template--listing-view-page .hp-listing__actions--primary .hp-listing__action--report:hover { color: #e4410d; box-shadow: inset 0 0 0 1px #e4410d; } .hp-template--listing-view-page .hp-listing__actions--primary .hp-listing__action--report:hover .hp-icon { color: #e4410d; } /* Главная кнопка: в ките futura-pt нет веса 600 (канонные 600 браузер подделывает) — берём честный 700, как у ценников. white-space — у темы на .button стоит nowrap, и на 768 (узкий сайдбар, 173px под кнопку при 209px текста) «Odpowiedz na ogłoszenie» обрезалось краем кнопки — замер живой страницы; текст обязан переноситься, а не резаться. */ .hp-template--listing-view-page .hp-listing__action--message.button { font-weight: 700; white-space: normal; } /* «Dodaj do ulubionych» в топбаре: пилюля была с серым #444 текстом и серым сердцем — до читаемой. Красный ховер канона сохранён. */ .hp-template--listing-view-page .hp-listing__actions--secondary .hp-listing__action--favorite { border-color: var(--cw99-line, #e9e9e9); color: #000; font-weight: 500; } .hp-template--listing-view-page .hp-listing__actions--secondary .hp-listing__action--favorite i { color: var(--cw99-blue, #2457c6); } .hp-template--listing-view-page .hp-listing__actions--secondary .hp-listing__action--favorite:hover, .hp-template--listing-view-page .hp-listing__actions--secondary .hp-listing__action--favorite:hover i { color: #e4410d; } /* ── C5. Карточка продавца ─────────────────────────────────── Имя — 700 (600 в ките нет), «Wyślij wiadomość» — из голой строки-ссылки во вторичную кнопку на всю ширину подвала (той же породы, что C4). Подпись кнопке даёт канонный ::after{content:attr(title)} — здесь только вид. */ .hp-template--listing-view-page .hp-page__sidebar .hp-vendor--view-block .hp-vendor__name { font-weight: 700; } .hp-template--listing-view-page .hp-vendor__footer .hp-vendor__actions--primary { width: 100%; } .hp-template--listing-view-page .hp-page__sidebar .hp-vendor--view-block .hp-vendor__action--message { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 10px 16px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px var(--cw99-line, #e9e9e9); color: #000; font-size: .95em; font-weight: 500; transition: box-shadow .2s, color .2s; } .hp-template--listing-view-page .hp-page__sidebar .hp-vendor--view-block .hp-vendor__action--message i { color: var(--cw99-blue, #2457c6); } .hp-template--listing-view-page .hp-page__sidebar .hp-vendor--view-block .hp-vendor__action--message:hover { color: var(--cw99-blue, #2457c6); box-shadow: inset 0 0 0 1px var(--cw99-blue, #2457c6); } /* ── C6. Галерея и плейсхолдер «Brak zdjęcia» ──────────────── Радиус галереи — в токен (канонные 12px фиксированы, --cw99-r даёт 10-16). Плейсхолдер выводит наш шаблон hivepress/listing/view/page/listing-images.php (до него объявление без фото начиналось сразу с атрибутов, а стили .cw99-noimg в каноне лежали мёртвыми); базовый вид — канонный .cw99-noimg (плоский синий, 16/7), здесь — бирка бренда. Наклон -10° (как у знака) — трансформом на svg: transform внутри viewBox обрезался бы его краем. */ .hp-template--listing-view-page .hp-listing__images, .hp-template--listing-view-page .cw99-noimg { border-radius: var(--cw99-r, 12px); } .hp-template--listing-view-page .cw99-noimg__mark { width: 58px; height: 58px; transform: rotate(-10deg); } .hp-template--listing-view-page .cw99-noimg span { font-weight: 500; } @media (max-width: 48em) { .hp-template--listing-view-page .cw99-noimg__mark { width: 44px; height: 44px; } } /* ═════════════════════════════════════════════════════════════ ===== D. Формы и кабинет ===== Поверхности: страница входа (body.hp-template--user-login-page), подача объявления (body.hp-template--listing-submit-page), кабинет /account/* (body.hp-template--user-account-page — стоит на «мои объявления», избранном, сообщениях, треде и настройках; классы проверены на живых body). Модалки (.hp-modal) — глобально, как select2 в B1: fancybox переносит их в конец body, а вид модалки един на всём сайте. Канонный style.css уже одел модалки и auth-формы (секции «submit-auth»/«account» 2026-07-12) — здесь только то, чего канон не покрыл или что он сам ломает на PL. ═════════════════════════════════════════════════════════════ */ /* ── D1. Капс-микролейблы: снять uppercase + разрядку ────────── Родительская тема даёт .hp-form__label uppercase + letter-spacing 1px (замер: 11px/uppercase/1px), канон снимает это только косвенно и не везде. Запрещено дизайн-системой — снимаем на всех четырёх поверхностях разом: лейблы форм, «(opcjonalne)», статусы объявлений, даты сообщений. */ .hp-template--user-account-page .hp-form__label, .hp-template--user-account-page .hp-form__label span, .hp-template--user-account-page .hp-form__label small, .hp-template--user-login-page .hp-form__label, .hp-template--user-login-page .hp-form__label span, .hp-template--user-login-page .hp-form__label small, .hp-template--listing-submit-page .hp-form__label, .hp-template--listing-submit-page .hp-form__label span, .hp-template--listing-submit-page .hp-form__label small, .hp-modal .hp-form__label, .hp-modal .hp-form__label span, .hp-modal .hp-form__label small, .hp-template--user-account-page .hp-status span, .hp-template--user-account-page .hp-message__date, .hp-template--user-account-page .hp-listing__created-date { text-transform: none; letter-spacing: normal; } /* Лейблы: чёрные 500, «(opcjonalne)» — приглушение альфой на чёрном, не серым */ .hp-template--user-account-page .hp-form__label, .hp-template--user-login-page .hp-form__label, .hp-template--listing-submit-page .hp-form__label, .hp-modal .hp-form__label { color: #000; font-weight: 500; font-size: .95em; } .hp-template--user-account-page .hp-form__label small, .hp-template--user-login-page .hp-form__label small, .hp-template--listing-submit-page .hp-form__label small, .hp-modal .hp-form__label small { color: rgba(0, 0, 0, .5); font-weight: 400; } /* ── D2. Меню кабинета ──────────────────────────────────────── Канон (style.css «account») уже дал карточку и круглые иконки, но на живом PL три дефекта, все проверены замером: 1) подпись АКТИВНОГО пункта невидима: правило style.css:604 (.hp-menu__item--current > a span { color: var(--cw-blue) !important } — оно для вкладок страницы объявления, но БЕЗ ОБЛАСТИ) прямо матчится на span и бьёт белый цвет канона 2158, который задан только на ; прямое попадание сильнее наследования. Наше правило — 0-5-1 с !important, выигрывает у 0-2-1; 2) все иконки — шестерёнки: пер-пунктовые селекторы канона (2151-2155, 0-2-1) СЛАБЕЕ его же базового правила с f013 (2143, 0-3-1) — глифы молча не применялись. Здесь те же глифы с достаточным весом; 3) подписи прижаты к правому краю: родительская тема держит justify-content: space-between, канон задал только gap. */ .hp-template--user-account-page .hp-page__sidebar .hp-menu--user-account { background: #fff; border: 0; border-radius: var(--cw99-r, 12px); box-shadow: 0 0 max(9px, 1vw) rgba(0, 0, 0, .07); padding: 12px; } .hp-template--user-account-page .hp-page__sidebar .hp-menu--user-account .hp-menu__item > a { justify-content: flex-start; border-radius: 8px; } .hp-template--user-account-page .hp-page__sidebar .hp-menu--user-account .hp-menu__item--current > a { font-weight: 700; /* 600 в ките нет */ } .hp-template--user-account-page .hp-page__sidebar .hp-menu--user-account .hp-menu__item--current > a span { color: #fff !important; } /* Ховер по активному пункту не должен превращать его в обычный (канонный ховер 2157 красит фон в светлый, текст в синий — на активном получалась мигалка «то выбран, то нет») */ .hp-template--user-account-page .hp-page__sidebar .hp-menu--user-account .hp-menu__item--current > a:hover { background: var(--cw99-blue, #2457c6); color: #fff !important; } /* Пер-пунктовые иконки: специфичность 0-5-1 > канонного базового 0-3-1 */ .hp-template--user-account-page .hp-page__sidebar .hp-menu--user-account .hp-menu__item--listings-edit > a::before { content: '\f03a'; } .hp-template--user-account-page .hp-page__sidebar .hp-menu--user-account .hp-menu__item--listings-favorite > a::before { content: '\f004'; } .hp-template--user-account-page .hp-page__sidebar .hp-menu--user-account .hp-menu__item--messages-thread > a::before { content: '\f0e0'; } .hp-template--user-account-page .hp-page__sidebar .hp-menu--user-account .hp-menu__item--user-edit-settings > a::before { content: '\f013'; } .hp-template--user-account-page .hp-page__sidebar .hp-menu--user-account .hp-menu__item--user-logout > a::before { content: '\f2f5'; background: #f5f6fa; color: rgba(0, 0, 0, .45); } /* «Выйти»: канон красит серым (запрещено) — чёрный с альфой; ховер — канонный красный действий-разрушений, как у «Zgłoś» в C4 */ .hp-template--user-account-page .hp-page__sidebar .hp-menu__item--user-logout { border-top: 1px solid var(--cw99-line, #e9e9e9); } .hp-template--user-account-page .hp-page__sidebar .hp-menu--user-account .hp-menu__item--user-logout > a { color: rgba(0, 0, 0, .6) !important; } .hp-template--user-account-page .hp-page__sidebar .hp-menu--user-account .hp-menu__item--user-logout > a:hover { background: #fdede7; color: #e4410d !important; } .hp-template--user-account-page .hp-page__sidebar .hp-menu--user-account .hp-menu__item--user-logout > a:hover::before { background: #fdede7; color: #e4410d; } /* ── D3. Таблицы кабинета: строки-карточки в языке главной ──── Канон дал #fafafa с радиусом 10 — на белом фоне страницы серые строки читались как выключенные, а у статуса просвечивал белый прямоугольник. Стало как B3: белые, radius var(--cw99-r), тень-ореол. */ .hp-template--user-account-page .hp-page__content .hp-table tr { background: #fff; box-shadow: 0 0 max(9px, 1vw) rgba(0, 0, 0, .07); } .hp-template--user-account-page .hp-page__content .hp-table tr:hover { box-shadow: 0 0 max(12px, 1.4vw) rgba(0, 0, 0, .12); } .hp-template--user-account-page .hp-page__content .hp-table td:first-child { border-radius: var(--cw99-r, 12px) 0 0 var(--cw99-r, 12px); } .hp-template--user-account-page .hp-page__content .hp-table td:last-child { border-radius: 0 var(--cw99-r, 12px) var(--cw99-r, 12px) 0; } /* Статусы: капс снят в D1; серый текст канона → чёрный с альфой;«Опубликовано» — единственное место, где уместен брендовый зелёный успеха */ .hp-template--user-account-page .hp-page__content .hp-status span { font-weight: 500; } .hp-template--user-account-page .hp-page__content .hp-status--draft span { color: rgba(0, 0, 0, .65) !important; background: #f0f0f0; } .hp-template--user-account-page .hp-page__content .hp-status--publish span { background: rgba(89, 183, 139, .16); color: var(--cw99-green-dark, #1f7a57) !important; } /* Даты и ссылка на объявление в списке диалогов: приглушение альфой */ .hp-template--user-account-page .hp-listing--edit-block .hp-listing__date, .hp-template--user-account-page .hp-messages.hp-table .hp-message__date { color: rgba(0, 0, 0, .55); } .hp-template--user-account-page .hp-messages.hp-table .hp-message__listing a { color: rgba(0, 0, 0, .6); } .hp-template--user-account-page .hp-messages.hp-table .hp-message__listing a:hover { color: var(--cw99-blue, #2457c6); } /* ── D4. Формы кабинета: контролы в языке B5/B6 ─────────────── Настройки профиля и отправка сообщения — голая родительская тема (граница rgba(0,0,0,.2), кнопка с градиентной плёнкой поверх синего, canon их не покрывает). */ .hp-template--user-account-page .hp-form input[type="text"], .hp-template--user-account-page .hp-form input[type="email"], .hp-template--user-account-page .hp-form input[type="password"], .hp-template--user-account-page .hp-form input[type="number"], .hp-template--user-account-page .hp-form textarea, .hp-template--user-account-page .hp-form select { border-color: var(--cw99-line, #e9e9e9); border-radius: 6px; } .hp-template--user-account-page .hp-form input[type="text"]:focus, .hp-template--user-account-page .hp-form input[type="email"]:focus, .hp-template--user-account-page .hp-form input[type="password"]:focus, .hp-template--user-account-page .hp-form input[type="number"]:focus, .hp-template--user-account-page .hp-form textarea:focus, .hp-template--user-account-page .hp-form select:focus { border-color: var(--cw99-blue, #2457c6); } /* Глаз показа пароля: приглушение альфой, ховер синий */ .hp-template--user-account-page .hp-form .hp-field__icon { color: rgba(0, 0, 0, .45); } .hp-template--user-account-page .hp-form .hp-field__icon:hover { color: var(--cw99-blue, #2457c6); } /* Главные кнопки («Zapisz zmiany», «Wyślij wiadomość»): плоский бренд-синий без градиентной плёнки родителя, вес 700 (600 в ките нет) */ .hp-template--user-account-page .hp-form__button.button-primary { background: var(--cw99-blue, #2457c6); background-image: none; border-radius: 6px; font-weight: 700; } .hp-template--user-account-page .hp-form__button.button-primary:hover { background: var(--cw99-blue-hover, #1c47a6); background-image: none; } /* «Wybierz obrazek» (аватар в настройках): вторичная кнопка B6 вместо мутной сине-серой плашки rgba(7,36,86,.086) с радиусом 3px */ .hp-template--user-account-page .hp-field--attachment-upload .hp-field--button { background: #fff; background-image: none; box-shadow: inset 0 0 0 1px var(--cw99-line, #e9e9e9); border-radius: 6px; color: #000; font-weight: 500; transition: box-shadow .2s, color .2s; } .hp-template--user-account-page .hp-field--attachment-upload .hp-field--button:hover { color: var(--cw99-blue, #2457c6); box-shadow: inset 0 0 0 1px var(--cw99-blue, #2457c6); } /* «Usuń konto»: тихая ссылка, ховер — цвет разрушения */ .hp-template--user-account-page .hp-form__action--user-delete { color: rgba(0, 0, 0, .6); } .hp-template--user-account-page .hp-form__action--user-delete .hp-icon { color: rgba(0, 0, 0, .35); } .hp-template--user-account-page .hp-form__action--user-delete:hover, .hp-template--user-account-page .hp-form__action--user-delete:hover .hp-icon { color: #e4410d; } /* ── D5. Тред сообщений ─────────────────────────────────────── Свой пузырь (--sent) у родителя — светло-зелёный от вторичного цвета темы; зелёный по системе — только успех. Свои — светло-синие #EEF2FC (язык чипов главной), чужие остаются канонными #F5F6FA. Поле ввода — пилюля, как у Агента 99 (это чат, а не анкета), кнопка — плоская синяя пилюля без градиентной плёнки. */ .hp-template--user-account-page .hp-message--view-block.hp-message--sent { background: #eef2fc; } /* Хвостик пузыря — треугольник из бордера на ::before; без правки оставался зелёным и торчал из-под синего пузыря (замер: border-left rgb(239,250,245)) */ .hp-template--user-account-page .hp-message--view-block.hp-message--sent::before { border-left-color: #eef2fc; } .hp-template--user-account-page .hp-form--message-send textarea { border-color: var(--cw99-line, #e9e9e9); border-radius: 25px; } .hp-template--user-account-page .hp-form--message-send textarea:focus { border-color: var(--cw99-blue, #2457c6); } .hp-template--user-account-page .hp-form--message-send .hp-form__button.button-primary { border-radius: 999px; } /* Поле ввода на телефоне сжималось в кружок 62px рядом с кнопкой: форма — flex-строка (fields flex:1 1 0% + footer auto), wrap не срабатывал, потому что fields умеет ужиматься до нуля. min-width заставляет перенос, кнопка уходит на свою строку и берёт 100% (штатное правило HivePress ≤48em). */ @media (max-width: 47.99em) { .hp-template--user-account-page .hp-form--message-send .hp-form__fields { min-width: 100%; } .hp-template--user-account-page .hp-form--message-send .hp-form__footer { flex: 1 1 100%; } } /* Чип объявления внутри пузыря: чёрный текст 500, синяя иконка (был серый) */ .hp-template--user-account-page .hp-message--view-block .hp-message__listing { color: #000; font-weight: 500; } .hp-template--user-account-page .hp-message--view-block .hp-message__listing .hp-icon { color: var(--cw99-blue, #2457c6); } /* ── D6. Избранное: карточки в языке B3/B4 ──────────────────── Единственное место в кабинете с карточками объявлений; область B — каталог — сюда не достаёт, поэтому декларации B3/B4 повторены с областью кабинета (контракт файла запрещает редактировать чужую секцию, но не повторять её язык). Цена уже в контенте — фильтр шаблона в functions.php («цена после заголовка») работает на всех view_block. */ .hp-template--user-account-page .hp-listing--view-block { background: #fff; border-radius: var(--cw99-r, 12px); box-shadow: 0 0 max(9px, 1vw) rgba(0, 0, 0, .07); overflow: hidden; } .hp-template--user-account-page .hp-listing--view-block:hover { box-shadow: 0 0 max(12px, 1.4vw) rgba(0, 0, 0, .12); } .hp-template--user-account-page .hp-listing--view-block .hp-listing__content { display: flex; flex-direction: column; align-items: stretch; } .hp-template--user-account-page .hp-listing--view-block .hp-listing__content .hp-listing__attributes--primary { flex: 0 0 auto; align-self: flex-start; margin: 8px 0 0; border-radius: 6px; padding: 4px 10px; font-weight: 700; } .hp-template--user-account-page .hp-listing--view-block .hp-listing__attributes--secondary { margin-top: 10px; } .hp-template--user-account-page .hp-listing--view-block .hp-listing__details--primary { order: 9; margin: 10px 0 0; } .hp-template--user-account-page .hp-listing--view-block .hp-listing__created-date { color: #000; opacity: .5; font-size: .8em; } .hp-template--user-account-page .hp-listing--view-block .hp-listing__categories a { font-size: .8em; font-weight: 500; text-transform: none; letter-spacing: normal; } .hp-template--user-account-page .hp-listing--view-block .hp-listing__footer { border-top: 0; padding-top: 0; } /* ── D7. Страница входа ─────────────────────────────────────── Канонная карточка auth-форм — #fafafa с радиусом .3vw (3.8px на 1280); доводим до языка карточек: белая, radius var(--cw99-r), тень-ореол. Кнопка Google (gsi-material-button) — родная разметка гайдлайнов Google, её не трогаем. */ .hp-template--user-login-page .site-content .hp-form--user-login { background: #fff; border-radius: var(--cw99-r, 12px); box-shadow: 0 0 max(9px, 1vw) rgba(0, 0, 0, .07); } /* ── D8. Модалки: радиус токеном ────────────────────────────── Канонный var(--cw-radius) = .3vw — 3.8px на 1280, почти прямые углы. Остальное (поля, кнопки, заголовок с жёлтым штрихом) — канон, не трогаем. */ .hp-modal { border-radius: var(--cw99-r, 12px); } /* ── D9. Подача объявления ──────────────────────────────────── Карточка формы — до языка карточек (была канонная #fafafa/3.8px). Дропзона фото: канон её нарисовал (style.css:1963), но под старую разметку .hp-field__button — у живого HivePress кнопка называется .hp-field--button, и правило лежало мёртвым: вместо дропзоны торчала голая серая кнопка. Те же декларации, правильный селектор, область — страница подачи. */ .hp-template--listing-submit-page .hp-form--listing-submit { background: #fff; border-radius: var(--cw99-r, 12px); box-shadow: 0 0 max(9px, 1vw) rgba(0, 0, 0, .07); } .hp-template--listing-submit-page .hp-field--attachment-upload label { /* HivePress common.min.css держит label { float:left; width:auto!important } — механизм клика по скрытому input[file] внутри. float даёт shrink-to-fit, и дропзона сжималась до текста (замер: 143px при 688px родителя). width со своим !important (специфичность выше) возвращает полную ширину, float и overflow не трогаем — на них живёт клик по полю. */ display: block; width: 100% !important; } .hp-template--listing-submit-page .hp-field--attachment-upload .hp-field--button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 112px; border: 2px dashed #bfcff0; border-radius: var(--cw99-r, 12px); background: #f7f9fe; background-image: none; color: var(--cw99-blue, #2457c6); font-weight: 500; cursor: pointer; transition: background .2s, border-color .2s; text-align: center; } .hp-template--listing-submit-page .hp-field--attachment-upload .hp-field--button::before { content: '\f030'; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 1.5em; /* У родительской темы ::before на .button — слой подсветки (absolute, inset 0, прозрачный до ховера): глиф применялся, но растягивался на всю кнопку невидимым (замер: высота 108px). Возвращаем псевдоэлемент в поток и в видимость — тогда это снова просто иконка над текстом. */ position: static; opacity: 1; width: auto; height: auto; background: none; line-height: 1; } .hp-template--listing-submit-page .hp-field--attachment-upload .hp-field--button:hover { background: #eef2fc; border-color: var(--cw99-blue, #2457c6); } /* ── D10. Аватар в настройках аккаунта ──────────────────────── Область: body.hp-template--user-account-page (класс стоит и на /account/settings/ — HivePress вешает всю цепочку родителей шаблона: …--user-edit-settings-page + …--user-account-page), внутри — поле HivePress .hp-field--attachment-upload. Что было сломано. Разметка поля (дословный рендер \HivePress\Forms\ User_Update): .hp-row → плитка .hp-col-sm-2 с и ДВУМЯ ссылками .hp-field__button (--download, --delete), затем пустой блок сообщений, затем
  • высотой 84px — то есть синяя полоска 3px оказывалась у САМОГО ВЕРХА экрана, оторванной от своего пункта (замер на /listing/, 1280 и 1440: top 0, bottom 81, height 3). Переставляем к низу пункта, где подчёркивание и читается как «ты здесь». Геометрия и цвет темы не трогаются — только вертикальная привязка. */ .header-navbar__menu > ul > li.current-menu-item::before { top: auto; bottom: 0; } /* ═════════════════════════════════════════════════════════════ O. РЕЖИМ ЧЕРНОВИКА БЕЗ ПЕРСОНАЖА (2026-08-21, круг 3) Решение владельца (дословно): «это мы убираем, забываем про нашего агента. он просто не нужен». Тёмная шапка .agent-topbar (робот, имя «Agent 99», подпись) снята из ОБОИХ режимов панели; в режиме черновика (/agent/?draft=… и /?draft=… на главной) карточку подписывает нейтральная светлая строка .agent-drafthead — «Szkic ogłoszenia» с иконкой doc из своего заливочного набора в канонной подложке чипа #eef2fc. Реплики в ленте идут БЕЗ аватара (agent.js, круг 3) — дымки на всю ширину смысловой колонки. ⚠️ Хрупкая механика панели (publishPanelTop/--cw99-agent-top, потолок при баннере согласия) завязана на .cw99-agent-box и НЕ тронута: бокс жив, менялась только внутренность оболочки. */ .cw99-agent-box .agent-drafthead { display: flex; align-items: center; gap: 10px; padding: clamp(12px, 1vw, 16px) clamp(14px, 1.2vw, 20px); border-bottom: 1px solid var(--cw99-line); background: #fff; } .cw99-agent-box .agent-drafthead__ic { display: inline-flex; width: 40px; height: 40px; flex: 0 0 40px; align-items: center; justify-content: center; border-radius: 10px; background: #eef2fc; color: var(--cw99-blue); } .cw99-agent-box .agent-drafthead__ic .cw99-i { width: 20px; height: 20px; } .cw99-agent-box .agent-drafthead__tx { display: flex; min-width: 0; flex-direction: column; } .cw99-agent-box .agent-drafthead__title { color: #000; font-size: clamp(16px, 1.25vw, 20px); font-weight: 700; line-height: 1.2; } .cw99-agent-box .agent-drafthead__sub { color: var(--cw99-muted); font-size: clamp(12px, .85vw, 14px); line-height: 1.3; } /* Реплики без аватара: канонный отступ колонки под аватар (42px в style.css у .agent-chips/.agent-cards) к дымкам не относится, а сам дымок и так лежит первым флекс-ребёнком строки — правил не нужно. Отступа-костыля под несуществующий аватар НЕ добавлять. */ /* ── O2. /agent/?draft= — карточка сверху, не у дна ─────────── Замер критика (1440x900): между шапкой страницы и карточкой черновика 146px пустого #fafafa — карточку прижимал к низу margin-top:auto первого ребёнка ленты (мессенджерная идиома «содержимое у дна»), но на странице черновика переписки нет и не будет. Область — только шаблон /agent/ (body-класс page-template-agent), главная и будущие ленты не задеты. На 390 дефекта не было (слак нулевой) — правило там безвредно. */ body.page-template-agent .cw99-agent-box .agent-chat > .agent-draft:first-child { margin-top: 0; } /* ── O3. Чекбокс регулямина: честная геометрия цели ─────────── Инпут 13x13, строка label ~20px — тап-зона до 44 уже добрана псевдоэлементом (секция J), но сама строка оставалась тонкой, и критик дважды помечал её как цель ниже нормы. min-height выравнивает геометрию с зоной; центрирование — чтобы галочка не висела у верхней кромки потолстевшей строки. */ .cw99-agent-box .agent-draft .agent-terms { min-height: 44px; align-items: center; } /* ── O4. /agent/?draft= — панель по высоте содержимого ──────── Минорка критика: под карточкой черновика ~150px пустого поля (лента .agent-chat 474px при карточке 322px) — панель держала фиксированную высоту, нужную только чату с прокруткой. На странице черновика прокручивать нечего: пусть оболочка обнимает контент. Область — только шаблон /agent/. */ body.page-template-agent .cw99-agent-box { height: auto; min-height: 0; } body.page-template-agent .cw99-agent-box .agent-shell { height: auto; } body.page-template-agent .cw99-agent-box .agent-chat { flex: 0 0 auto; } /* ── P. Пометка объявлений оператора (регулямин § 15) ───────── Демонстрационные объявления остаются на доске после запуска — значит обязаны быть видимо помечены. Разметку печатают два part-шаблона (hivepress/listing/view/cw99-origin-badge.php и .../view/page/...), различает их по АВТОРУ поста functions.php, секция «ПОМЕТКА ОБЪЯВЛЕНИЙ ОПЕРАТОРА». ОБЛАСТЬ. Все правила секции начинаются с собственных классов .cw99-origin / .cw99-origin-note, которых до этой правки в проекте не было ни одного: ни одно существующее правило доски не может быть ими задето. Жёлтой ленты цены (.hp-listing__attributes--primary) секция не касается ни одним селектором — её ломали дважды правками шире нужного. Цвета: демо — тихий контур (это НЕ предложение, кричать незачем), объявление оператора — плоский фирменный синий (это утверждение о том, кто стоит за объявлением). Жёлтый не берём намеренно: на доске жёлтый занят ценником, и пометка рядом с ним читалась бы как часть цены. */ .cw99-origin { display: inline-flex; align-items: center; align-self: flex-start; /* контент карточки — колоночный flex: без этого пилюля растянется на всю ширину */ max-width: 100%; border-radius: 999px; padding: 3px 12px 4px; font-size: .78em; font-weight: 500; line-height: 1.4; text-align: left; } .cw99-origin--demo { background: #fff; color: #000; /* серых цветов нет; приглушение — opacity в .cw99-origin-note */ /* Кольцо — inset-тень, а не border: рамка добавила бы пилюле высоты и сдвинула бы соседей на пиксель (тот же приём, что у чипов главной). */ box-shadow: inset 0 0 0 1px #d7dae0; } .cw99-origin--official { background: var(--cw99-blue, #2457c6); color: #fff; } /* Оператор ИЩЕТ, а не предлагает (объявления о найме и о закупке рекламной поверхности). Тот же фирменный синий, но контуром, а не заливкой: заливка у доски означает «это наша оферта», и повторить её здесь значило бы сказать про наём то же, что про услугу. Контур читается как «оператор», сплошная заливка — как «оператор предлагает». Логика вида — functions.php, cw99_pl_origin_kind(). */ .cw99-origin--seeking { background: #fff; color: var(--cw99-blue, #2457c6); /* Кольцо — inset-тень, а не border: ровно по той же причине, что у демо. */ box-shadow: inset 0 0 0 1px var(--cw99-blue, #2457c6); } /* Карточка каталога: пометка стоит между рубрикой и заголовком, поэтому отбивается только снизу — сверху отступ уже дала рубрика. */ .hp-listing--view-block .cw99-origin { margin: 2px 0 8px; } /* Страница объявления: пилюля плюс строка объяснения над H1. */ .cw99-origin-note { margin: 0 0 14px; } /* Пилюля и абзац — #000 с opacity .6 (было #5c5c5c, вне палитры). Ссылок внутри нет, opacity безопасна. */ .cw99-origin-note .cw99-origin--demo { opacity: .6; } .cw99-origin-note p { margin: 8px 0 0; max-width: 62ch; color: #000; opacity: .6; font-size: .88em; line-height: 1.5; } /* 390: пилюля переносится по словам, а не вылезает за карточку. Область — только сама пометка. */ @media (max-width: 30em) { .cw99-origin { white-space: normal; } .cw99-origin-note p { font-size: .85em; } } /* Главная, ряд «Najnowsze ogłoszenia»: у карточки главной своя вёрстка (front-page.php, .cw99-reference-card), в потоке тела для пометки места нет — карточка держит ровно три строки текста по решению владельца. Поэтому пометка ложится НА снимок, в свободный нижний левый угол: абсолютная, потока не трогает, высоту карточки не меняет. Верхний левый угол занят бейджем рубрики, нижний правый — пусто. */ .cw99-reference-card__media .cw99-origin { position: absolute; left: .42vw; bottom: .42vw; max-width: calc(100% - .84vw); overflow: hidden; padding: .18vw .45vw; /* Пол поднят 10 → 11px (круг 2026-08-30-тер): прежние ступени задавали пометке 11.3px на телефоне, и базовые 10px читались бы как уменьшение ровно там, где текст и так самый мелкий на карточке. */ font-size: clamp(11px, .7vw, 12px); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; } .cw99-reference-card__media .cw99-origin--demo { /* На фотографии белая пилюля с серым контуром теряется — на снимке нужен плотный фон. Тёмный нейтральный, чтобы не спорить ни с синим бейджем рубрики, ни с жёлтым ценником в теле карточки. */ background: rgba(36, 36, 36, .82); color: #fff; box-shadow: none; } .cw99-reference-card__media .cw99-origin--seeking { /* На снимке тонкое синее кольцо не читается — нужна плотная заливка. Берём белую, а не синюю: сплошной синий на доске означает «оферта оператора», и на объявлении о найме это было бы то же ложное утверждение, ради снятия которого знак и разделили. */ background: #fff; color: var(--cw99-blue, #2457c6); box-shadow: none; } /* ОТСТУП пометки на снимке считается в vw и потому обязан повторять ступени бейджа рубрики (home-reference.css, брейкпойнты 1025 и 760): без этого на телефоне .42vw = полтора пикселя, пилюля упирается в край снимка и её скругление срезается радиусом карточки. Сверялось глазами на 390. ⚠️ КЕГЛЬ ИЗ ЭТИХ СТУПЕНЕЙ УБРАН (круг 2026-08-30-тер). Он повторял ступени бейджа буквально, вместе с их дефектом: 2.9vw = 22px при 760 против 10px при 761 и 12.3→10px на границе 1026. Кегль пометки теперь один и непрерывный (базовое правило выше); в ступенях — только геометрия. */ @media (max-width: 1025px) { .cw99-reference-card__media .cw99-origin { left: 1vw; bottom: 1vw; max-width: calc(100% - 2vw); padding: .5vw 1.2vw; } } @media (max-width: 760px) { .cw99-reference-card__media .cw99-origin { left: min(2vw, 8.6px); bottom: min(2vw, 8.6px); max-width: calc(100% - 4vw); padding: min(1vw, 4.3px) min(2.6vw, 11.2px); border-radius: min(10vw, 43px); } } /* ───────────────────────────────────────────────────────────── Пометка о непроверяемости отзывов (dyrektywa Omnibus). Область: только .cw99-review-disclaimer — вставляется functions.php у блока отзывов на странице объявления и у общей оценки в профиле продавца. Тон спокойный: это не предупреждение, а обязательное уведомление. Токены бренда, без капса и letter-spacing. ───────────────────────────────────────────────────────────── */ .cw99-review-disclaimer { margin: .8rem 0 1.2rem; padding: .7rem .9rem; border-left: 3px solid var(--cw-yellow, #FFC73B); background: rgba(36, 87, 198, .04); border-radius: 6px; color: var(--cw-grey, rgba(0, 0, 0, .6)); font-size: .85rem; line-height: 1.5; } /* В компактной шапке профиля продавца (vendor_details_primary) пометка стоит под звёздами — прижимаем её к оценке и убираем нижний разгон. */ .hp-vendor__details-primary .cw99-review-disclaimer, [class*="vendor"][class*="details-primary"] .cw99-review-disclaimer { margin: .5rem 0 0; font-size: .8rem; } /* ═════════════════════════════════════════════════════════════ Q. ГЛАВНАЯ «AI-first» — HERO + AI-ПОИСК + ПАНЕЛЬ ПОДКЛЮЧЕНИЯ + «NAJLEPSZE DOPASOWANIA» (2026-08-30, макет владельца) Эволюция светлой главной (2026-08-22): H1 «Ogłoszenia, które rozumie Twoje AI.», под ним карточка AI-поиска (штатный поиск доски с извлечением ключевых слов, front-page.php), панель «Połącz swoją AI jednym kliknięciem» (пять плиток LLM + блок «Dla agentów i aplikacji»), ряд «Najlepsze dopasowania» с бейджем «% dopasowania» на карточках. Каждое правило — со СВОЕЙ областью .cw99-home2 / .cw99-connect2 / .cw99-aisearch / .cw99-matches / .cw99-match-pill (правило прошлых кругов: не трогать существующие селекторы). Токены — общие (:root в home-reference.css). Марки внутри плиток — фирменные вендорские (cw99_connect_icon()), новых цветов доски нет. ───────────────────────────────────────────────────────────── */ /* Q1. HERO. Тексты ПРИЖАТЫ ВЛЕВО (макет владельца 2026-08-30 — сверка по скриншотам): H1, подзаголовок и строка AI-поиска стоят у ЛЕВОГО края контентной колонки, не центрируются. ⚠️ max-width на .cw99-home2-wrap СНЯТ (круг 2026-08-30-бис). Было 1040px с автополями — то есть hero центрировался внутри .cw99-reference-wrap (94vw) и ехал вправо тем сильнее, чем шире экран: замер на живом давал левый край H1 200px при 1440 и 120px при 1280, тогда как лента объявлений начиналась с 43 и 38 — расхождение до 157px, две разные сетки на одной странице. Канон запрещает max-width-ограничители контейнеров прямо (design/DESIGN.md, «Запрещено»). Теперь единственная сетка страницы — .cw99-reference-wrap, и hero, панель, строка поиска и карточки делят один левый край. */ .cw99-home2-hero { padding: clamp(28px, 4vw, 72px) 0 clamp(20px, 2.4vw, 40px); } /* .cw99-home2-wrap — только псевдоним .cw99-reference-wrap, своей ширины у него нет (см. выше). */ /* ⚠️ ПИКСЕЛЬНЫЕ ПОТОЛКИ HERO СНЯТЫ (круг 2026-08-30-тер). Было: .cw99-home2-head max-width 780px, .cw99-home2-sub 620px, .cw99-aisearch 780px. Замер на живом при 1440 давал на первом экране ТРИ разных правых края — 663 (лид), 823 (H1 и строка поиска) и 1397 (панель подключения и лента объявлений); при 1680 — те же 663/823 против 1622. То есть с ~860px hero переставал расти, а всё под ним продолжало, и справа от строки поиска оставалась пустая половина экрана. Канон запрещает max-width-ограничители контейнеров прямым пунктом (design/DESIGN.md). Что вместо них. • Контейнеры (.cw99-home2-head, .cw99-aisearch) потолка не имеют вовсе и живут на единственной сетке страницы .cw99-reference-wrap. Строка поиска — КОНТРОЛ, а не абзац: меры строки у неё нет по определению, и правый край она делит с панелью подключения и лентой карточек. • Потолок длины строки остаётся только у ТЕКСТА и считается ОТ КЕГЛЯ (em), а не в пикселях: кегль здесь сам растёт по vw, поэтому мера растёт вместе с экраном и никогда не «замирает». 16em на H1 = 768px при 1440 (было 780), 33em на лиде = 625px (было 620) — вид не меняется, зависимость меняется. */ .cw99-home2-head { margin: 0 0 clamp(18px, 2vw, 34px); text-align: left; } .cw99-home2-title { /* Мера строки заголовка в em ОТ СОБСТВЕННОГО КЕГЛЯ (см. преамбулу выше): ~16em ≈ 55–60 знаков futura-pt — верх диапазона читаемости для крупного H1. На телефоне мера не срабатывает вовсе: 16em от 33px = 528px шире сетки (359px при 390), ограничивает ширину контейнер. */ max-width: 16em; margin: 0 0 clamp(10px, 1vw, 18px); /* Канон: текст #000; --cw99-dark (#242424) — только тёмная поверхность футера. Было #242424 у H1, заголовка панели и названий плиток, при этом заголовки секций уже стояли #000 — цвет заголовков разъезжался. */ color: #000; font-size: clamp(30px, 4.4vw, 62px); font-weight: 700; line-height: 1.06; /* Трекинг канона: letter-spacing запрещён (design/DESIGN.md). Было -0.01em (≈ -0.62px на 62px) — снято, размер и вес не трогаем. */ letter-spacing: normal; } .cw99-home2-title__ai { color: var(--cw99-blue, #2457c6); } .cw99-home2-title__dot { color: #000; } /* Подзаголовок hero: ОДНА непрерывная шкала. Было clamp(15px, 1.25vw, 21px) на десктопе и сырые 4vw в телефонном медиазапросе — 15.6px при 390, 30.4px при 760 (крупнее заголовка панели, вдвое крупнее нормы лида) и обрыв до 15px при 761. Формула проходит через 15.5px на 390 и 19px на 1440 — требование «не меньше 15 и не больше ~20» выполняется на всей сетке. */ .cw99-home2-sub { /* Мера строки лида в em от собственного кегля: 33em ≈ 65–70 знаков — норма для набора в одну колонку. Пиксельные 620px давали то же число на 1440, но переставали расти вместе с текстом. */ max-width: 33em; margin: 0; /* Приглушение канона: серого текста нет — #000 с opacity .55, не сплошной --cw99-muted (design/DESIGN.md). */ color: #000; opacity: .55; font-size: clamp(15px, 14.2px + .33vw, 19px); line-height: 1.45; } /* Q2. AI-ПОИСК. Белая карточка-строка: синяя искра слева, пример-плейсхолдер, синяя кнопка «Znajdź» справа. ⚠️ РАМКА СНЯТА (круг 2026-08-30-бис): канон запрещает рамки у карточек — «воздух и ореол вместо рамок» (design/DESIGN.md, «Запрещено»). Эталон на этой же странице — .cw99-reference-card: border:none + 0 0 14.4px .07. Ореол здесь того же словаря, с полом max(9px, …), иначе на телефоне блюр 3-4px и ореол пропадает вовсе. ⚠️ ПОТОЛОК 780px СНЯТ (круг 2026-08-30-тер, см. преамбулу Q1). Строка поиска — контрол, а не абзац: меры строки у неё нет, и правый край она делит с панелью подключения и лентой карточек. Прежний потолок оставлял при 1440 пустыми 530px справа от кнопки «Znajdź», при 1680 — 800px. */ .cw99-aisearch { display: flex; align-items: center; gap: clamp(8px, .8vw, 14px); width: 100%; margin: 0; padding: clamp(7px, .6vw, 11px) clamp(8px, .7vw, 12px) clamp(7px, .6vw, 11px) clamp(12px, 1vw, 18px); border: 0; border-radius: 12px; background: #fff; box-shadow: 0 0 max(9px, 1vw) rgba(0, 0, 0, .07); } /* Фокус — одно синее кольцо поверх того же ореола (кольцо остаётся доступной подсветкой, а не декоративной рамкой). */ .cw99-aisearch:focus-within { box-shadow: 0 0 0 2px var(--cw99-blue, #2457c6), 0 0 max(9px, 1vw) rgba(0, 0, 0, .07); } .cw99-aisearch__spark { display: flex; flex: 0 0 auto; align-items: center; } .cw99-aisearch__spark svg { width: clamp(18px, 1.5vw, 22px); height: clamp(18px, 1.5vw, 22px); display: block; } .cw99-aisearch__field { display: flex; flex: 1; min-width: 0; } /* Селектор с типом элемента (0,2,1): у родительской темы кегль и высота поля висят на `input[type=search]`, и одиночный класс (0,1,0) им проигрывал — замер на живом давал 16px и 40px высоты на ВСЕХ ширинах, включая телефон, где правило просило 3.9vw. Поэтому здесь и кегль, и норма тапа ≥44px задаются честной специфичностью, а не !important. Высоту строки поиска это не меняет: её и раньше держала кнопка «Znajdź» со своим min-height 44px. */ .cw99-aisearch input.cw99-aisearch__input { width: 100%; min-width: 0; min-height: 44px; padding: clamp(8px, .7vw, 12px) 0; border: 0; background: transparent; color: #000; font-family: inherit; font-size: clamp(15px, 14.4px + .19vw, 17px); line-height: 1.3; } .cw99-aisearch__input:focus { outline: none; } .cw99-aisearch__input::placeholder { color: var(--cw99-muted, #5b6472); opacity: 1; } .cw99-aisearch__btn { flex: 0 0 auto; /* Цель тапа ≥44px и на десктопе (мелочь E4). Было ~40px от одних паддингов; мобильные 46px задаёт медиазапрос ниже — этот min-height их не трогает. */ min-height: 44px; padding: clamp(9px, .8vw, 13px) clamp(18px, 1.6vw, 30px); border: 0; border-radius: 8px; background: var(--cw99-blue, #2457c6); /* Плоская CTA канона: снять глянцевую плёнку темы (linear-gradient на button[type=submit]). ⚠️ Этой строки НЕ ХВАТАЕТ — она проигрывает теме по специфичности; рабочее правило ниже, сразу за :focus-visible. */ background-image: none; color: #fff; font-family: inherit; font-size: clamp(14px, 1.05vw, 17px); font-weight: 700; cursor: pointer; transition: background .18s ease; } .cw99-aisearch__btn:hover { background: var(--cw99-blue-hover, #1c47a6); } /* Одно кольцо фокуса, не два: у всей строки уже есть кольцо :focus-within (см. выше), поэтому у самой кнопки собственный контур подавляем — иначе на тапе по «Znajdź» видны два кольца сразу (мелочь канона E4). */ .cw99-aisearch__btn:focus-visible { outline: none; } /* Плоская кнопка «Znajdź» — рабочее правило (замер на живом 2026-08-30: getComputedStyle давал linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.2)) на ВСЕХ вьюпортах). Причина: у родительской темы listinghive/style.css плёнка висит на `button[type=submit]` — это (0,1,1), а наш `.cw99-aisearch__btn` выше — (0,1,0), и по специфичности проигрывал. Здесь специфичность поднята честно, областью + типом элемента (0,2,1), без !important. Правило задаёт ТОЛЬКО background-image, поэтому телефонные переопределения размеров кнопки в медиазапросе ниже не задевает; hover и focus перечислены явно, чтобы плёнка не возвращалась в этих состояниях. Канон: градиенты на кнопках запрещены (design/DESIGN.md). */ .cw99-aisearch button.cw99-aisearch__btn, .cw99-aisearch button.cw99-aisearch__btn:hover, .cw99-aisearch button.cw99-aisearch__btn:focus, .cw99-aisearch button.cw99-aisearch__btn:active { background-image: none; } /* Кегль кнопки — той же специфичностью (0,2,1) и по той же причине, что у поля: тема держит его на `button[type=submit]` и печатала 16px везде. */ .cw99-aisearch button.cw99-aisearch__btn { font-size: clamp(15px, 14.4px + .19vw, 17px); } /* Q3. ПАНЕЛЬ «Połącz swoją AI jednym kliknięciem». Белая карточка с ореолом; заголовок + приглушённый подзаголовок; ряд плиток + блок для разработчиков. ⚠️ max-width 1040px и автополя СНЯТЫ, РАМКА СНЯТА (круг 2026-08-30-бис) — те же две причины, что у hero: ограничитель контейнера уводил панель на свою сетку (левый край 200px при 1440 против 43px у ленты объявлений), а рамка у карточки запрещена каноном. Панель теперь во всю ширину .cw99-reference-wrap и держится на ореоле словаря (0 0 1vw .07). */ .cw99-connect2 { width: 100%; margin: clamp(22px, 2.6vw, 44px) 0 0; padding: clamp(18px, 1.8vw, 32px) clamp(16px, 1.7vw, 30px) clamp(20px, 2vw, 34px); border: 0; border-radius: var(--cw99-r-lg, 18px); background: #fff; box-shadow: 0 0 max(9px, 1vw) rgba(0, 0, 0, .07); } .cw99-connect2__head { text-align: left; margin-bottom: clamp(16px, 1.6vw, 26px); } .cw99-connect2__title { margin: 0 0 clamp(4px, .4vw, 8px); /* Канон: #000 (см. .cw99-home2-title). */ color: #000; font-size: clamp(19px, 1.7vw, 30px); font-weight: 700; line-height: 1.2; } /* Подпись панели — непрерывная шкала. Было clamp(13px, 1.05vw, 17px) на десктопе и 3.6vw на телефоне: 14px при 390, 27.4px при 760, обрыв до 13px при 761. Формула даёт 14px на 390 и 16.5px на 1440. */ .cw99-connect2__sub { margin: 0; /* Приглушение канона: #000 с opacity .55 вместо сплошного --cw99-muted. */ color: #000; opacity: .55; font-size: clamp(13.5px, 13.05px + .24vw, 16.5px); line-height: 1.4; } .cw99-connect2__sub--narrow { display: none; } .cw99-connect2__body { display: flex; align-items: stretch; gap: clamp(14px, 1.4vw, 24px); } .cw99-connect2__tiles { display: grid; flex: 1; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(8px, .9vw, 16px); } /* Плитка: прозрачный квадрат, иконка, название, синяя ссылка «Połącz». Вся плитка кликабельна. ⚠️ РАМКА И БЕЛАЯ ЗАЛИВКА СНЯТЫ (круг 2026-08-30-бис). Плитки стоят ВНУТРИ белой карточки-панели, а «карточки в карточках» канон запрещает отдельным пунктом (design/DESIGN.md, «Запрещено») — ровно поэтому у рельса категорий hero, единственного готового прецедента «карточка с плитками» в словаре, плитки прозрачные. Здесь так же: разделяет их воздух, отзыв даёт ховер. */ .cw99-connect2-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: clamp(6px, .55vw, 10px); padding: clamp(14px, 1.3vw, 22px) clamp(6px, .6vw, 12px) clamp(12px, 1.1vw, 18px); border: 0; border-radius: var(--cw99-r, 14px); background: transparent; color: #000; text-decoration: none; transition: box-shadow .2s ease, transform .2s ease; } .cw99-connect2-tile:hover { box-shadow: 0 0 max(9px, 1.2vw) rgba(0, 0, 0, .1); transform: translateY(-2px); } .cw99-connect2-tile:focus-visible { outline: 3px solid var(--cw99-blue, #2457c6); outline-offset: 2px; } .cw99-connect2-tile__ic { display: flex; width: clamp(36px, 3vw, 46px); height: clamp(36px, 3vw, 46px); align-items: center; justify-content: center; } .cw99-connect2-tile__ic svg { width: 100%; height: 100%; display: block; } /* Название плитки — непрерывная шкала: 13.2px на 390, 15.5px на 1440 (требование «не меньше 13 и не больше ~16»). Было clamp(12px, .92vw, 15px) на десктопе и 3.4vw на телефоне — 25.8px при 760 и 12px при 761. */ .cw99-connect2-tile__name { font-size: clamp(13px, 12.35px + .22vw, 15.5px); /* 500, не 600: в ките futura-pt веса 600 нет, браузер его подделывает (запрет канона; мелочь E1). */ font-weight: 500; line-height: 1.2; text-align: center; } /* «Połącz» — та же непрерывная шкала, на полступени ниже названия. */ .cw99-connect2-tile__cta { color: var(--cw99-blue, #2457c6); font-size: clamp(12.5px, 11.9px + .19vw, 14px); font-weight: 700; } /* Выделенная плитка ChatGPT: ОДНО синее кольцо. Было два сразу — рамка 1px плюс inset-кольцо 1px, вместе линия в 2px (круг 2026-08-30-бис). Рамок у плиток больше нет вовсе, поэтому остаётся кольцо. */ .cw99-connect2-tile.is-featured { box-shadow: inset 0 0 0 1px var(--cw99-blue, #2457c6); padding-top: clamp(20px, 1.9vw, 30px); } .cw99-connect2-tile.is-featured:hover { box-shadow: inset 0 0 0 1px var(--cw99-blue, #2457c6), 0 0 max(9px, 1.2vw) rgba(0, 0, 0, .1); } .cw99-connect2-tile__badge { position: absolute; top: clamp(-9px, -.7vw, -7px); left: clamp(8px, .8vw, 14px); display: inline-flex; align-items: center; gap: 4px; padding: 3px clamp(7px, .6vw, 10px); border-radius: 999px; background: var(--cw99-blue, #2457c6); color: #fff; /* Непрерывная шкала (телефонные 2.8vw давали 21.3px при 760 против 10px при 761). */ font-size: clamp(10.5px, 10px + .14vw, 12px); font-weight: 700; line-height: 1; white-space: nowrap; } /* Значок бейджа — в em от его же кегля: одна величина следует за другой и отдельной шкалы (а с ней и отдельного разрыва) не заводит. */ .cw99-connect2-tile__badge svg { width: 1.1em; height: 1.1em; flex: 0 0 auto; } /* Блок «Dla agentów i aplikacji»: вертикальный разделитель + две плитки (API, MCP) + ссылка на документацию. */ .cw99-connect2__dev { display: flex; flex: 0 0 auto; gap: clamp(14px, 1.4vw, 24px); } .cw99-connect2__divider { width: 1px; align-self: stretch; background: var(--cw99-line, #e9e9e9); } .cw99-connect2__devinner { display: flex; flex-direction: column; gap: clamp(8px, .8vw, 14px); } .cw99-connect2__devhead { margin: 0; color: #000; opacity: .6; /* приглушение альфой, не сплошным muted (ссылок внутри нет) */ font-size: clamp(12.5px, 11.9px + .19vw, 14px); font-weight: 700; } .cw99-connect2__devtiles { display: grid; grid-template-columns: repeat(2, minmax(96px, 1fr)); gap: clamp(8px, .9vw, 16px); } .cw99-connect2__doclink { position: relative; display: inline-flex; align-self: flex-start; align-items: center; gap: 5px; color: var(--cw99-blue, #2457c6); font-size: clamp(13px, 12.4px + .19vw, 15px); /* 500, не подделываемый 600 (мелочь канона E1). */ font-weight: 500; text-decoration: none; } /* Зона нажатия ≥44px тем же приёмом, что у ссылок «Zobacz wszystkie…»: строка была высотой 15px (замер на живом), сама ссылка расти не должна. */ .cw99-connect2__doclink::before { content: ''; position: absolute; top: 50%; left: -8px; width: calc(100% + 16px); height: 44px; transform: translateY(-50%); } .cw99-connect2__doclink .cw99-i { width: 1.05em; height: 1.05em; } .cw99-connect2__doclink:hover { text-decoration: underline; } /* Q4. «NAJNOWSZE OGŁOSZENIA». Карточки — существующий .cw99-reference-card (переиспользуется), сетка своя. СЕТКА НАБИРАЕТ КОЛОНКИ ПОСТЕПЕННО (круг 2026-08-30-тер). Было жёстко `repeat(3, 1fr)` на десктопе и `1fr` в телефонном медиазапросе — то есть один столбец до 760 включительно и сразу три с 761. Замер на живом: карточка 699px при 760 и 230px при 761, скачок масштаба ×3. Ровно это и означает «раздутый телефон» на полосе 600–760: карточка в 700px — не карточка, а страница объявления. auto-fill вместо счёта колонок: число столбцов вычисляет браузер из ширины контейнера, поэтому НИ ОДНОГО рукотворного брейкпоинта здесь нет и полоса 761–1025 перестаёт быть особым случаем. `min(100%, 260px)` обязателен: без него на 320-360px минимум 260px шире трека и появляется горизонтальный скролл. Единственное явное правило — потолок в три колонки на десктопе (≥1026, брейкпоинт канона): auto-fill при 1354px поставил бы пять, а утверждённый макет держит три крупные карточки. Замер после правки (ширина карточки): 359 (390) → 396 (430) → 270 (600) → 338 (760) → 346 (761) → 267 (900) → 307 (1024) → 307 (1026) → 387 (1280) → 437 (1440). Наибольший шаг −32% приходится на честный переход 1→2 колонки; прежние ×3 нет. */ .cw99-matches__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: clamp(12px, 1.2vw, 22px); } @media (min-width: 1026px) { .cw99-matches__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .cw99-matches__all--narrow { display: none; } /* * Здесь до 2026-08-30 лежал бейдж `.cw99-match-pill` — белая пилюля * «NN% dopasowania» на снимке карточки. Удалён вместе с породившей его * функцией cw99_home2_match_pct(): процент был выдуман (одна и та же * последовательность 89/96/95/93/91/95 при любом запросе и без запроса), * а честной меры релевантности в долях у доски нет — поиск отвечает ДА/НЕТ. * Полный разбор — в шапке удалённой функции в functions.php. */ /* Q5. ПЛОТНОСТЬ ПЕРВОГО ЭКРАНА (2026-08-30, сверка с макетом владельца). Проблема замера: на живом при 1440×940 hero съедал экран целиком — «Najlepsze dopasowania» начинались на 893px, то есть карточки объявлений были ниже сгиба, тогда как в макете они помещаются на первый экран. Ничего не удаляем: сжимаем ПРОПОРЦИИ (кегли и пустоту), порядок, тексты, цвета и проводка ссылок «Połącz» не меняются. Что было главным пожирателем (замеры getComputedStyle до правки): 1) Плитка LLM 214px при иконке 43px — то есть 170px пустоты. Высоту задавала НЕ плитка, а соседняя колонка «Dla agentów i aplikacji»: .cw99-connect2__body растягивает обе колонки (align-items: stretch), а естественная высота dev-колонки была 214px против 139px у ряда плиток. Внутри dev-колонки 16px из этих 214 давал margin-bottom абзаца

    родительской темы у .cw99-connect2__devhead — правило Q3 задавало margin:0 слабее темы и проигрывало по специфичности. 2) Заголовок панели: правило Q3 просило clamp(19px,1.7vw,30px) = 24px, а реально печатался 27.2px с margin-bottom 22px — тоже перебивала тема. Поэтому здесь селекторы усилены до .cw99-connect2 .cw99-connect2__title. 3) Зазоры hero: 58px до H1, 37px поиск→панель, 78px панель→объявления. ИТОГ (замер на живом после выката, 1440×940): H1 62→48px, заголовок панели 27.2→20.2px, плитка 214→130px при иконке 43→45px, «Najlepsze dopasowania» 893→608px, верх первой карточки 940→655px — карточки видны без скролла. Область каждого правила — своя (.cw99-home2 / .cw99-aisearch / .cw99-connect2 / .cw99-matches), чужие селекторы не тронуты. Канон: веса только 400/500/700, letter-spacing нет, тени не добавляются. ───────────────────────────────────────────────────────────── */ /* Hero: отступ от шапки до H1 58→32px, нижний отступ секции 35→12px. */ .cw99-home2-hero { padding: clamp(18px, 2.2vw, 36px) 0 clamp(9px, .85vw, 15px); } /* H1: ОДНА непрерывная шкала на весь диапазон, 33px на 390 → 48px на 1440. Круг Q5 сжимал только десктоп (clamp(28px, 3.35vw, 48px)) и оставлял телефонные 8.4vw в медиазапросе ниже — на стыке полос кегль рвался: замер на живом давал 63.84px при 760 и сразу 28px при 761, а на планшетной середине проваливался до 30.15px (900). Линейная формула ниже проходит через обе прежние опорные точки (390: 8.4vw = 32.8px; 1440: 48px), поэтому ни телефон, ни достигнутая плотность десктопа не меняются, а промежуток больше не схлопывается. Медиазапрос телефона свой font-size отдал — там осталась только его line-height. */ .cw99-home2-title { font-size: clamp(31px, 27.3px + 1.44vw, 48px); margin-bottom: clamp(8px, .75vw, 14px); } /* Подзаголовок → строка поиска: 29→14px. Нижняя граница 14px бережёт мобильный ритм, где своего переопределения у этого отступа нет. */ .cw99-home2-head { margin-bottom: clamp(14px, 1vw, 17px); } /* Строка поиска 63→59px: поля обжаты, пол кнопки 44px (тап-норма) не тронут. */ .cw99-aisearch { padding: clamp(5px, .45vw, 7px) clamp(6px, .55vw, 9px) clamp(5px, .45vw, 7px) clamp(10px, .9vw, 16px); } /* Панель подключения: зазор поиск→панель 37→22px, поля 26/29→17/14px. */ .cw99-connect2 { margin-top: clamp(14px, 1.5vw, 24px); padding: clamp(12px, 1.2vw, 20px) clamp(16px, 1.7vw, 30px) clamp(12px, 1.15vw, 20px); } .cw99-connect2 .cw99-connect2__head { margin-bottom: clamp(12px, .85vw, 15px); } /* Заголовок панели: тоже ОДНА непрерывная шкала, 19.5px на 390 → 21px на 1440. Прежняя пара медиазапросов рвала кегль ровно там же, где H1: 5vw давали 38px при 760, а десктопный clamp(16px, 1.4vw, 22px) сразу за границей падал на свой пол 16px и держал его до ~1140 — то есть на всей планшетной полосе заголовок панели печатался кеглем обычного текста и переставал читаться как заголовок. Нижняя опора 19.5px совпадает с авторскими 5vw на телефоне, верхняя (21px) на 1440 отличается от прежних 20.16px меньше чем на пиксель, поэтому плотность первого экрана сохранена. Селектор из двух классов — иначе выигрывает h2 родительской темы (см. преамбулу, п. 2). По той же причине авторское `.cw99-connect2__title` в телефонном медиазапросе ниже (одиночный класс) остаётся страховкой на случай, если тема когда-нибудь перестанет перебивать: на кегль оно сейчас не влияет. */ .cw99-connect2 .cw99-connect2__title { margin: 0 0 clamp(4px, .3vw, 6px); font-size: clamp(19px, 18.6px + 0.23vw, 21px); line-height: 1.2; } /* Плитка LLM: пустоты меньше, иконка крупнее (43→45px) — плитка ниже, а выглядит плотнее. Мобильные паддинги задаёт медиазапрос ниже (та же специфичность, идёт позже — выигрывает он); размер значка с этого круга единый на весь диапазон (см. следующее правило). */ .cw99-connect2-tile { padding: clamp(12px, 1.2vw, 20px) clamp(6px, .6vw, 12px) clamp(10px, 1.05vw, 17px); gap: clamp(5px, .48vw, 9px); } .cw99-connect2-tile.is-featured { padding-top: clamp(16px, 1.55vw, 25px); } /* Значок плитки — тоже ОДНА непрерывная шкала. Телефонные 11vw давали 84px при 760 против 34px при 761: после того как кегли подписей перестали раздуваться, этот разрыв стал бы самым заметным на странице. Формула даёт 40px на 390, 42px на 760 и 46px на 1440 — прежние опорные значения плотности (45-46px на десктопе, ~43px на телефоне) сохранены. */ .cw99-connect2-tile__ic { width: clamp(40px, 37.8px + .57vw, 46px); height: clamp(40px, 37.8px + .57vw, 46px); } /* Подпись «Połącz»: line-height 1.5 темы → 1.25, минус 4px в каждой плитке. */ .cw99-connect2-tile__cta { line-height: 1.25; } /* Dev-колонка — та самая, что растягивала плитки. Снимаем margin абзаца темы у заголовка (−16px) и обжимаем колонку до высоты ряда плиток. */ .cw99-connect2__devinner .cw99-connect2__devhead { margin: 0; line-height: 1.15; } .cw99-connect2__dev .cw99-connect2__devinner { gap: clamp(6px, .42vw, 8px); } .cw99-connect2__devinner .cw99-connect2__doclink { line-height: 1.25; } /* Плитки API/MCP — служебные, им хватает меньшего значка. Только десктоп и планшет: на телефоне dev-плитки стоят в общем ряду и держат 40px значок, а специфичность в два класса перебила бы мобильное правило. */ @media (min-width: 761px) { .cw99-connect2__devtiles .cw99-connect2-tile--dev { padding: clamp(7px, .6vw, 10px) clamp(6px, .6vw, 12px) clamp(6px, .55vw, 9px); gap: clamp(4px, .35vw, 6px); } .cw99-connect2-tile--dev .cw99-connect2-tile__ic { width: clamp(22px, 1.7vw, 26px); height: clamp(22px, 1.7vw, 26px); } } /* Q6. ОДИН ВОЗДУХ НАД ОДИНАКОВЫМИ ЗАГОЛОВКАМИ СЕКЦИЙ (круг 2026-08-30-тер). Замер на живом при 1440: над «Najlepsze dopasowania» 24px, над «Kategorie» 121px — пятикратная разница у двух заголовков ОДНОГО уровня, стоящих на одной странице. Собиралась она из трёх независимых слагаемых: margin-top шапки секции (3vw = 43px у каталога, переопределённый до 12px внутри .cw99-matches кругом Q5), padding-top секции discovery (3vw = 43px) и margin-bottom ленты объявлений (clamp(20px, 2.4vw, 40px) = 35px). Теперь величина ОДНА и лежит переменной на .cw99-home2: каждый заголовок отбивается ею от предыдущего блока, а собственные отступы слагаемых обнулены. Потолок 18px выбран не на глаз: инвариант первого экрана требует, чтобы при 1440×940 верх .cw99-matches оставался ≤620 (замер до правки 612, hero кончается на 600) — 20px и выше его нарушали. Область — только главная (.cw99-home2): .cw99-reference-section-head общая с каталогом, там ритм свой и не тронут. */ .cw99-home2 { --cw99-home2-sectiongap: clamp(14px, 1.2vw, 18px); } .cw99-home2 .cw99-reference-section-head { margin-top: 0; } .cw99-home2 .cw99-matches { margin-top: var(--cw99-home2-sectiongap); margin-bottom: 0; } .cw99-home2 .cw99-reference-discovery { padding-top: var(--cw99-home2-sectiongap); } /* ── Планшет: панель подключения переносит dev-блок под плитки ── */ @media (max-width: 1023px) { .cw99-connect2__body { flex-direction: column; } .cw99-connect2__dev { flex-direction: column; } .cw99-connect2__divider { width: auto; height: 1px; } .cw99-connect2__devtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 320px; } } /* ── Телефон ─────────────────────────────────────────────────── */ @media (max-width: 760px) { .cw99-home2-hero { padding: 7vw 0 5vw; } /* Кегль H1 задаёт непрерывная шкала выше (на 390 она даёт те же ~33px, что и прежние 8.4vw); здесь остаётся только более тесная интерлиньяж телефона. Отдельный font-size вернул бы разрыв на границе 760/761. */ .cw99-home2-title { line-height: 1.08; } /* Кегль лида задаёт непрерывная шкала выше: сырые 4vw давали 30.4px при 760 (крупнее заголовка панели) и обрыв до 15px при 761. */ /* ⚠️ СЫРЫЕ vw В ЭТОМ БЛОКЕ ОГРАНИЧЕНЫ СВЕРХУ (круг 2026-08-30-тер). Полоса ≤760 — это диапазон шириной вдвое: 390 и 760 отличаются в 1.95 раза, и любое значение в голых vw к верхнему краю полосы раздувается ровно во столько же. Замер на живом: панель подключения 597px высоты при 760 против 351 при 761 — «раздутый телефон» ровно из этих паддингов. Пол каждого clamp равен прежнему значению при 390 (телефон не меняется), потолок посажен близко к тому, что даёт десктопная шкала сразу за границей 761, — стык перестал рваться. Кегли здесь не задаются вовсе: их держат непрерывные шкалы выше. */ /* AI-поиск: искра+строка в ряд, кнопка «Znajdź» синей полосой во всю ширину. */ .cw99-aisearch { flex-wrap: wrap; gap: clamp(9px, 2.5vw, 14px); padding: clamp(11px, 3vw, 16px) clamp(13px, 3.5vw, 18px); border-radius: 14px; } .cw99-aisearch__field { flex: 1 1 60%; } /* Кегль поля задаёт непрерывная шкала выше; здесь остаются только поля. */ .cw99-aisearch input.cw99-aisearch__input { padding: clamp(7px, 2vw, 11px) 0; } .cw99-aisearch__btn { flex: 1 0 100%; order: 3; /* Цель тапа ≥44px (мелочь E4). */ min-height: 46px; padding: clamp(13px, 3.4vw, 18px); border-radius: 10px; } .cw99-connect2 { margin-top: clamp(26px, 7vw, 30px); padding: clamp(19px, 5vw, 22px) clamp(15px, 4vw, 18px) clamp(23px, 6vw, 26px); border-radius: 16px; } /* Кегли заголовка, подписи, названий плиток, «Połącz» и бейджа отданы непрерывным шкалам выше — сырые vw ломались на границе 760/761. */ .cw99-connect2__sub--wide { display: none; } .cw99-connect2__sub--narrow { display: inline; } .cw99-connect2__body { gap: clamp(19px, 5vw, 22px); } .cw99-connect2__dev { gap: clamp(15px, 4vw, 17px); } .cw99-connect2__devtiles { max-width: none; } .cw99-connect2-tile--dev { padding: clamp(15px, 4vw, 17px) clamp(8px, 2vw, 11px); } /* Число колонок ряда объявлений телефонный медиазапрос БОЛЬШЕ НЕ ЗАДАЁТ: жёсткий `minmax(0, 1fr)` держал один столбец до 760 включительно, из-за чего карточка на 760 разрасталась до 699px и на границе 761 схлопывалась втрое. Считает auto-fill (см. Q4); здесь остаётся только зазор. */ .cw99-matches__grid { gap: 4vw; } .cw99-matches__all--wide { display: none; } .cw99-matches__all--narrow { display: inline; } } /* ── Рельс плиток LLM: только НАСТОЯЩИЙ телефон (≤600) ─────── Рельс с горизонтальной прокруткой жил до 760 включительно, и на верхнем краю полосы это было главным пожирателем первого экрана: плитка 34.4vw давала 261px при 760 (против 130px при 761), панель вырастала до 597px высоты и схлопывалась до 347px на границе. Пять плиток по 261px — это уже не «телефонный рельс», это раздутый телефон. Порог 600, а не 760, потому что рельс нужен ровно там, где пять плиток в ряд физически не помещаются: при 601 внутренняя ширина панели ~505px даёт плитку 95px (значок 36px + подпись 13px — читается), при 760 — 121px, а сразу за границей 761 штатная сетка даёт 130px. То есть переход 600→601→760→761 идёт ступеньками по 20-25%, а не втрое. Уравнение «обрезка приходится на середину третьей плитки» (круг 2026-08-30-бис) сохранено ДОСЛОВНО: T = .344V при левом поле .08V и зазорах .03V. Проверено, что оно верно на всех телефонных ширинах (360, 390, 430, 500, 600). Пиксельный потолок ширины плитки по-прежнему НЕ ставится — он разрывает эту связь и на какой-нибудь ширине сажает обрезку в стык плиток; вместо потолка сужена сама область правила. Вылет вправо (margin: 0 -8vw 0 -4vw) — поле панели плюс поле сетки страницы: рельс доходит РОВНО до края вьюпорта, горизонтальной прокрутки страницы не создаёт. Пол 122px — читаемость подписи на 320. */ @media (max-width: 600px) { .cw99-connect2__tiles { display: flex; grid-template-columns: none; gap: min(3vw, 12.9px); overflow-x: auto; margin: 0 -8vw 0 -4vw; padding: min(1.5vw, 6.5px) min(4vw, 17.2px) min(3vw, 12.9px); scroll-snap-type: x proximity; scroll-padding-left: 4vw; -webkit-overflow-scrolling: touch; } .cw99-connect2-tile { flex: 0 0 auto; width: max(122px, 34.4vw); scroll-snap-align: start; padding: min(4.5vw, 19.4px) min(2vw, 8.6px) min(3.5vw, 15.1px); } .cw99-connect2-tile.is-featured { padding-top: 6vw; } } /* ═════════════════════════════════════════════════════════════ ===== R. КАТАЛОГ /listing/: строка поиска и лестница сетки ===== Круг 2026-08-30-тер. Область каждого правила — шаблон каталога (.hp-template--listings-view-page); главная и страница объявления не затронуты. ───────────────────────────────────────────────────────────── */ /* R1. СТРОКА ПОИСКА — В СЛОВАРЬ КАРТОЧЕК: воздух и ореол, без рамки. Замер до правки (1280): border 1px solid rgba(7, 36, 86, .075) и border-radius 3.84px. Рамка прилетала от родительской темы, а радиус — от легаси-токена `--cw-radius: .3vw`, который на 1280 даёт практически прямой угол. Рядом, на той же странице, карточки объявлений уже стоят БЕЗ рамок, с радиусом 15px и ореолом — одна поверхность в двух разных словарях. Канон: «Рамки у карточек — воздух и ореол вместо рамок»; «.3vw — легаси, в новом коде не использовать» (design/DESIGN.md). Эталон взят с .cw99-reference-card и .cw99-aisearch главной: border 0, радиус из шкалы --cw99-r, ореол 0 0 без смещения. Пол max(9px, …) — иначе на телефоне блюр 3-4px и ореол пропадает вовсе. Фокус внутри поля даёт синее кольцо поверх того же ореола: подсветка доступности, не рамка. */ .hp-template--listings-view-page .hp-form--listing-search { border: 0; border-radius: var(--cw99-r, 15px); box-shadow: 0 0 max(9px, 1vw) rgba(0, 0, 0, .07); } .hp-template--listings-view-page .hp-form--listing-search:focus-within { box-shadow: 0 0 0 2px var(--cw99-blue, #2457c6), 0 0 max(9px, 1vw) rgba(0, 0, 0, .07); } /* R2. ПОЛОСА 768–1025: поля строки поиска больше не обрубаются. Замер до правки: при 900 пять полей делили 836px строки и получали 106/106/106/154/172px — «Słowa kluczowe» печаталось как «Słowa k», локация как «Lokali.», а ЦЕНОВОЕ поле (внутри него два инпута Min и Max плюс тире) рендерилось двумя пустыми ячейками: на 106px ни одна подпись не влезала. При 768 строка ломалась ещё грубее — поля по 61-65px в два ряда. Решение — перенос в ДВЕ строки, а не скрытие: фильтры каталога здесь единственный способ сузить выдачу (модалка «Filtruj» на этой полосе не показывается, см. R3), и прятать их значило бы отобрать функцию. Поля получают пол ширины 200px и переносятся, кнопка «Szukaj» уходит на всю ширину второй строки. Область — ровно полоса, где ряд не помещается; на ≥1026 строка-панель не тронута, на ≤767 работает своя колонковая раскладка (H6/I2 выше). */ @media (min-width: 768px) and (max-width: 1025px) { .hp-template--listings-view-page .hp-form--listing-search .hp-form__fields { flex-wrap: wrap; row-gap: 10px; } .hp-template--listings-view-page .hp-form--listing-search .hp-form__field:not(.hp-field--hidden) { flex: 1 1 200px; min-width: 200px; } /* Ценовое поле шире соседних: внутри него ДВА инпута и тире между ними. `:not(.hp-field--hidden)` здесь не для отбора, а ради СПЕЦИФИЧНОСТИ — общее правило выше весит 0-4-0 (свой `:not` считается), и без этого довеска (0-3-0) ценовое поле садилось на общие 200px вместе с соседями: замер на 850 давал ему 202px вместо 260. */ .hp-template--listings-view-page .hp-form--listing-search .hp-form__field--number-range:not(.hp-field--hidden) { flex: 1 1 260px; min-width: 260px; } /* Кнопка «Szukaj» живёт не в .hp-form__fields, а в .hp-form__footer, то есть она и так стоит отдельной строкой под полями. Здесь только цель тапа. */ .hp-template--listings-view-page .hp-form--listing-search .hp-field--submit { min-height: 44px; } } /* R3. ЛЕСТНИЦА СЕТКИ: колонки набираются постепенно. Замер до правки (ширина карточки объявления): 326 (390) → 536 (600) → 696 (760) → 697 (767) → 213 (768) → 257 (900) → 299 (1024) → 359 (1280). То есть на 767 карточка занимала всю страницу (фото 697px шириной — раздутый телефон), а на 768 схлопывалась в 3.27 раза. Ломали её ДВА события сразу, ровно на одном пикселе: родительская тема на 48em включает колонки .hp-col-sm-6 (50%) И выводит сайдбар, забирающий треть строки. Разводим события по разным местам: • R3a — сайдбар с фильтрами на полосе 768–1025 встаёт ПОД выдачу, а не сбоку. Он остаётся на месте в DOM и в JS (catalog-sidebar.js кладёт форму в сайдбар на ≥48em и продолжает это делать) — меняется только раскладка, поэтому ни fancybox, ни перенос узла не задеты. Порядок выбран «сначала результаты»: на планшете фильтр — уточнение, а не вход. • R3b — число колонок карточек считает auto-fill из ширины строки, а не медиазапрос. Рукотворных брейкпоинтов нет вовсе, поэтому переход через 768 перестаёт быть событием: строка просто становится шире, и колонок становится больше на ОДНУ. Минимум 240px выбран из инварианта десктопа: он единственный, при котором на 1280 и 1440 сохраняются прежние две колонки (третьей нужно 784px строки при 781 доступных), а на 1024 помещаются три, а не четыре. Замер после правки: 358 (390) → 268 (600) → 348 (760) → 352 (768) → 268 (900) → 309 (1024) → 316 (1026) → 374 (1280). Наибольший шаг — честный переход 1→2 и 2→3 колонки; прежнего ×3.27 нет. */ @media (min-width: 768px) and (max-width: 1025px) { .hp-template--listings-view-page .hp-page > .hp-row > .hp-page__sidebar, .hp-template--listings-view-page .hp-page > .hp-row > .hp-page__content { flex: 0 0 100%; max-width: 100%; } .hp-template--listings-view-page .hp-page > .hp-row > .hp-page__content { order: 1; } .hp-template--listings-view-page .hp-page > .hp-row > .hp-page__sidebar { order: 2; } /* Ставший широким сайдбар обязан перестать быть узкой колонкой. Оболочка .hp-modal--mobile несёт max-width: 420px (она же служит модалкой на телефоне) — во всю строку карточка фильтра оставляла бы половину ширины пустой, а поля стояли бы одной длинной лентой. Снимаем потолок и раскладываем поля в ряд: получается горизонтальная панель фильтра под выдачей, а не растянутый мобильный список. */ .hp-template--listings-view-page .hp-page__sidebar .hp-modal--mobile { max-width: none; } .hp-template--listings-view-page .hp-page__sidebar .hp-form--listing-filter .hp-form__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px 24px; align-items: start; } .hp-template--listings-view-page .hp-page__sidebar .hp-form--listing-filter .hp-form__field { margin-bottom: 0; } } .hp-template--listings-view-page .hp-listings .hp-row { display: grid; /* Зазоры повторяют прежние поплавковые: 32px по горизонтали (поле элемента 16px с двух сторон) и 24px по вертикали (его margin-bottom). */ grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 24px 32px; margin: 0; } .hp-template--listings-view-page .hp-listings .hp-row > .hp-grid__item { width: auto; max-width: none; padding: 0; margin-bottom: 0; } /* R4. Кнопка «Dodaj ogłoszenie» в шапке: цель тапа ≥44px. Замер на 1280: 156×43.5px (поля 10.5px + интерлиньяж 22.5). Не хватало полпикселя, и это единственная жёлтая CTA вьюпорта. Добираем min-height, а не паддингом: паддинг задан в vw и на 1440 уже даёт 46px — фикс в пикселях сломал бы верх диапазона. Флекс с центрированием нужен, чтобы подпись стояла посередине выросшего бокса. */ .header-navbar__menu .menu-item a[href*="submit-listing"] { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; } /* R5. Страница входа: честные веса вместо faux-600. Замер (проверяющий круга 2026-08-30): заголовок «Zaloguj się» 27.2px/600, подпись кнопки 16.3px/600, ссылки-переключатели «Zarejestruj się» / «Zaloguj się» 15.2px/600. Веса 600 в ките futura-pt нет — браузер рисует faux-bold (канон: только 400/500/700). Ставим 700. Правило I7 выше гасило до 500 контейнер `p.hp-form__action`, но вес 600 сидит на вложенной ссылке и наследование его перебивало — поэтому здесь селектор доведён до самого . Область: страница входа и модалка (одна и та же форма HivePress рендерится в обоих местах). Соседняя Google-кнопка (.gsi-material-button) — брендбук Google, не трогаем. */ .hp-template--user-login-page .hp-page__title, .hp-template--user-login-page .hp-form--user-login .hp-field--submit, .hp-template--user-login-page .hp-form--user-login .hp-field--submit span, .hp-template--user-login-page .hp-form__action a, .hp-modal .hp-form--user-login .hp-field--submit, .hp-modal .hp-form--user-login .hp-field--submit span, .hp-modal .hp-form__action a { font-weight: 700; } /* ═════════════════════════════════════════════════════════════ ===== S. ОБЩИЙ ХРОМ САЙТА: одна сетка, один язык внутренних страниц ===== Круг 2026-09-02. Диагноз владельца («дизайн всё равно кривой и дешёвый») подтверждён скриншотами всех страниц: у сайта было ДВА визуальных языка — новая главная и всё остальное на дефолте темы HivePress/ListingHive (синяя плашка-заголовок во всю ширину, жёлтые чёрточки над H1, три разные сетки, градиентные плёнки на кнопках). Секция убирает дефолт темы везде. Область каждого правила — body-класс темы (.hp-theme--listinghive стоит на каждой странице доски), шаблон страницы или собственный класс. ═════════════════════════════════════════════════════════════ */ /* S1. ОДНО ПОЛЕ СТРАНИЦЫ. Было три сетки: шапка на фиксированных 32px (padding .header-navbar 1rem 2rem), главная на 3vw (.cw99-reference-wrap = 94vw с потолком 1680), каталог/объявление//ai//формы/футер на .container родительской темы (75.25rem = 1204px по центру + поля 2rem → на 1440 левый край контента 150px против 43px у главной, на 1680 — 270 против 50). Замер до правки (measure-grid): шапка 32 / главная 43.2 / каталог 150 / футер 150 на 1440. Токен повторяет формулу главной один в один: 3vw, а за 1787px — половина остатка от потолка 1680, так что главная, шапка, каталог и футер стоят на одной вертикали на любой ширине. Телефон: обёртка главной там 92vw → поле 4vw. */ :root { --cw99-gutter: max(3vw, calc((100vw - 1680px) / 2)); } @media (max-width: 760px) { :root { --cw99-gutter: 4vw; } } .hp-theme--listinghive .site-header .header-navbar { padding-left: var(--cw99-gutter); padding-right: var(--cw99-gutter); } /* Родительская тема выносит меню на −1rem вправо за поле шапки (margin -1rem -1rem -1rem 0), из-за чего правый край CTA стоял на 48px при левом крае бирки 32px. Меню заканчивается ровно на поле. */ .hp-theme--listinghive .site-header .header-navbar__menu { margin-right: 0; } /* …и последний пункт (CTA «Dodaj ogłoszenie») без правого поля li (тема: padding 0 1rem) — иначе синяя кнопка стоит на 16px внутри поля, а бирка слева — ровно на нём (замер после первого выката: 59.2 против 43.2). Не :last-child: в DOM после CTA стоит «Zaloguj się», порядок на экране задаёт order — поэтому пункт выбирается по ссылке. */ .hp-theme--listinghive .site-header .header-navbar__menu > ul > li:has(> a[href*="submit-listing"]) { padding-right: 0; } /* Главная свою обёртку .container распускает сама (home-reference.css) — :not(.cw99-home) обязателен, иначе это правило (позже в каскаде) вернуло бы ей поля. */ .hp-theme--listinghive:not(.cw99-home) .site-content > .container, .hp-theme--listinghive .site-footer > .container, .hp-theme--listinghive .site-header .header-hero__content > .container { width: 100%; max-width: none; padding-left: var(--cw99-gutter); padding-right: var(--cw99-gutter); } /* S2. СИНЯЯ ПЛАШКА-ЗАГОЛОВОК — СНЯТА НА ВСЕХ ВНУТРЕННИХ СТРАНИЦАХ. Родительская тема печатает под шапкой

    с центрированным белым H1 на сплошной синей полосе (канонный style.css красит её в --cw-blue !important и даёт тексту белый с text-shadow) — /ai/, /zglos-nielegalne-tresci/, /regulamin/, /polityka-prywatnosci/, /agent/, страницы категорий. Самый дешёвый элемент сайта. Заголовок становится обычным H1 в потоке: слева, чёрный, шкала заголовков секций главной (clamp(22px, 1.95vw, 36px) / 700), воздух сверху clamp(22..40). Разметка темы остаётся (шаблон page-header.php общий с SE-доской и печатается фильтром hivetheme/v1/areas/site_hero) — меняется только вид. !important нужны ровно там, где канонный style.css сам ставит !important (фон); порядок каскада — skin.css грузится последним. */ .hp-theme--listinghive .site-header .header-hero { padding: 0; background: transparent !important; background-image: none !important; color: #000; } .hp-theme--listinghive .site-header .header-hero::after, .hp-theme--listinghive .site-header .header-hero--cover::after { display: none; } .hp-theme--listinghive .site-header .header-hero__content > .container { padding-top: clamp(22px, 2.4vw, 40px); padding-bottom: 0; } .hp-theme--listinghive .site-header .header-hero h1, .hp-theme--listinghive .site-header .header-hero .hp-listing-category__name { margin: 0; color: #000; font-size: clamp(22px, 1.95vw, 36px); font-weight: 700; line-height: 1.2; text-align: left; text-shadow: none; } .hp-theme--listinghive .site-header .header-hero p { color: #000; opacity: 1; text-shadow: none; } /* Категория: тема центрировала колонку col-sm-8 offset-2 — заголовок во всю ширину, счётчик объявлений под ним приглушённой строкой (был белой полупрозрачной пилюлей на синем). column-reverse: в разметке счётчик стоит ПЕРЕД именем. */ .hp-theme--listinghive .site-header .header-hero .row { margin: 0; } .hp-theme--listinghive .site-header .header-hero .row > [class*="col-"] { flex-basis: 100%; max-width: 100%; margin-left: 0; padding: 0; } .hp-theme--listinghive .site-header .header-hero .hp-listing-category__header { display: flex; flex-direction: column-reverse; align-items: flex-start; text-align: left; } .hp-theme--listinghive .site-header .header-hero .hp-listing-category__count { display: block; margin: .35em 0 0; padding: 0; border-radius: 0; background: none; color: #000; opacity: .55; font-size: clamp(14px, .95vw, 16px); } /* /ai/ печатает собственный H1 в теле страницы («Podłącz tablicę do swojego AI») — плашка с дублирующим заголовком «Podłącz AI» там лишняя целиком. */ .page-template-template-ai .site-header .header-hero { display: none; } /* S3. ЖЁЛТЫЕ ЧЁРТОЧКИ НАД ЗАГОЛОВКАМИ. Родительская тема рисует над .hp-page__title / .hp-section__title / .title / .content-title / заголовками виджетов футера линию 45×4px #ffc107 через ::before (+ padding-top 1rem под неё): «Zaloguj się», «Recenzje», «Ustawienia», заголовки кабинета. Главная её не использует — снимаем везде. Модалки fancybox уносит в конец body, поэтому область — body-класс, а не .site-container. */ .hp-theme--listinghive .hp-page__title, .hp-theme--listinghive .hp-section__title, .hp-theme--listinghive .title, .hp-theme--listinghive .content-title, .hp-theme--listinghive .widget--footer .widget__title { padding-top: 0; } .hp-theme--listinghive .hp-page__title::before, .hp-theme--listinghive .hp-section__title::before, .hp-theme--listinghive .title::before, .hp-theme--listinghive .content-title::before, .hp-theme--listinghive .widget--footer .widget__title::before { display: none; content: none; } /* Заголовки внутренних страниц — чёрные, шкала секций главной. Тема давала rgba(15,23,39,.85) и 2.25rem. */ .hp-theme--listinghive .site-content .hp-page__title, .hp-theme--listinghive .hp-modal .hp-page__title { color: #000; font-size: clamp(22px, 1.95vw, 36px); font-weight: 700; line-height: 1.2; } .hp-theme--listinghive .site-content .hp-section__title { color: #000; font-weight: 700; } /* Заголовок страницы объявления: канон даёт 2.1em / 1.5em на ≤760 — обрыв 24→33.6px на стыке 760/761 (fluid-type-audit). Одна шкала на весь диапазон. */ .hp-template--listing-view-page .hp-listing--view-page h1.hp-listing__title { color: #000; /* тема: rgba(15,23,39,.85) — единственный не-чёрный H1 после свипа */ font-size: clamp(24px, 1.5vw + 12px, 34px); } /* S4. КНОПКИ — сплошной свип. Родительская тема кладёт на .button, button[type=submit] и input[type=submit] градиентную плёнку (background-image: linear-gradient) и слой подсветки ::before; канон местами добавлял ореол под кнопку (Filtruj, Zaloguj się: 0 0 1.2vw .12) и радиус 8. Свип 2026-09-02 (scripts buttons.mjs, 8 страниц): плёнка осталась на «Wyślij zgłoszenie», радиус 8 — на «Odpowiedz na ogłoszenie» и «Zaloguj się». Все первичные — плоский #2457c6, радиус 6, вес 700, белый текст, ≥44px, без тени. Кружки-иконки и ссылки сюда не входят. */ .hp-theme--listinghive .button, .hp-theme--listinghive button[type="submit"], .hp-theme--listinghive input[type="submit"], .hp-theme--listinghive .hp-form__button, .hp-theme--listinghive .hp-form__button.button-primary, .hp-theme--listinghive .hp-form--user-login button[type="submit"], .hp-theme--listinghive .hp-form--user-register button[type="submit"], .hp-theme--listinghive .hp-modal button[type="submit"], .hp-theme--listinghive .hp-listing__action--message.button { min-height: 44px; border-radius: 6px; background-image: none !important; box-shadow: none; font-weight: 700; } .hp-theme--listinghive .button::before { display: none; } .hp-theme--listinghive .button--primary, .hp-theme--listinghive .hp-form__button.button-primary, .hp-theme--listinghive button[type="submit"]:not(.cw99-footer__cookies) { background-color: var(--cw99-blue, #2457c6); color: #fff; } .hp-theme--listinghive .button--primary:hover, .hp-theme--listinghive .hp-form__button.button-primary:hover, .hp-theme--listinghive button[type="submit"]:not(.cw99-footer__cookies):hover { background-color: var(--cw99-blue-hover, #1c47a6); } /* Вторичная: кнопка Google на входе (разметка плагина hivepress-social-login по гайдлайну Google — серая рамка #747775, радиус 4, Roboto, 40px). Здесь она вторичная кнопка канона: белая, кольцо inset 1px --cw99-line, радиус 6, ≥44px, шрифт сайта, вес 500; ховер — синее кольцо и синий текст; серая плёнка-состояние Google снята. Иконка G остаётся цветной. */ .hp-theme--listinghive .hp-social-links .gsi-material-button { min-height: 44px; height: auto; padding: 10px 14px; border: 0; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px var(--cw99-line, #e9e9e9); color: #000; font-family: inherit; font-size: 1em; } .hp-theme--listinghive .hp-social-links .gsi-material-button .gsi-material-button-contents { font-family: inherit; font-weight: 500; } .hp-theme--listinghive .hp-social-links .gsi-material-button .gsi-material-button-state { display: none; } .hp-theme--listinghive .hp-social-links .gsi-material-button:not(:disabled):hover, .hp-theme--listinghive .hp-social-links .gsi-material-button:not(:disabled):focus-visible { box-shadow: inset 0 0 0 1px var(--cw99-blue, #2457c6); color: var(--cw99-blue, #2457c6); } /* S5. ВХОД / РЕГИСТРАЦИЯ — язык главной. Карточка (белая, ореол, без рамки) уже в D7; здесь поля: канон давал рамку 2px #e9e9e9 с радиусом 8 и жёлто- голубой outline фокуса. Теперь — кольцо inset 1px --cw99-line, радиус 6, фокус — синее кольцо 2px (на белом все кольца синие, DESIGN.md). Область: страница входа и модалка входа/регистрации (одна форма HivePress рендерится в обоих местах). */ .hp-template--user-login-page .hp-form--user-login input[type="text"], .hp-template--user-login-page .hp-form--user-login input[type="password"], .hp-template--user-login-page .hp-form--user-register input[type="text"], .hp-template--user-login-page .hp-form--user-register input[type="email"], .hp-template--user-login-page .hp-form--user-register input[type="password"], .hp-modal .hp-form--user-login input[type="text"], .hp-modal .hp-form--user-login input[type="password"], .hp-modal .hp-form--user-register input[type="text"], .hp-modal .hp-form--user-register input[type="email"], .hp-modal .hp-form--user-register input[type="password"], .hp-modal .hp-form--user-password-request input[type="text"] { border: 0; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--cw99-line, #e9e9e9); background: #fff; color: #000; } .hp-template--user-login-page .hp-form--user-login input:focus, .hp-template--user-login-page .hp-form--user-register input:focus, .hp-modal .hp-form--user-login input:focus, .hp-modal .hp-form--user-register input:focus, .hp-modal .hp-form--user-password-request input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--cw99-blue, #2457c6); } .hp-template--user-login-page .hp-form__action a, .hp-modal .hp-form__action a { color: var(--cw99-blue, #2457c6); } /* S6. ХВОСТЫ ПОСЛЕ СНЯТИЯ ПЛАШКИ (скриншоты после первого выката). 1) Категория: родительская тема поднимает строку поиска на −100px, чтобы она «плавала» на синей полосе; без полосы она легла на H1 «Rzeczy» и счётчик. На страницах категорий строка встаёт в поток. 2) Между заголовком в потоке и содержимым — 4rem паддинга .site-content (тема) плюс собственный отступ шаблона: на /zglos-nielegalne-tresci/ получалось 64px пустоты под H1. Там, где плашка есть, паддинг содержимого укорачивается (кроме /ai/ — там плашка скрыта, а свой H1 страницы стоит в потоке с прежним воздухом). :has() — Chrome/Safari/ Firefox ≥121; без поддержки остаётся прежний воздух, ничего не ломается. */ .tax-hp_listing_category .hp-page__header .hp-form--listing-search { margin-top: 0; } .hp-theme--listinghive:not(.page-template-template-ai) .site-header:has(.header-hero) + .site-content { padding-top: clamp(14px, 1.6vw, 26px); } /* S7. Вкладки страницы объявления («Szczegóły» / «Recenzje»): индикатор активной вкладки был жёлтым #ffc107 с градиентной плёнкой (дефолт темы), подпись — жёлтой. Активная вкладка — синяя, плоская; текст чёрный 700. Область: страница объявления и кабинет (единственные места с .hp-menu--tabbed). */ .hp-theme--listinghive .hp-menu--tabbed .hp-menu__item--current::before { background-color: var(--cw99-blue, #2457c6); background-image: none; } .hp-theme--listinghive .hp-menu--tabbed .hp-menu__item--current a { color: #000; font-weight: 700; } /* ═════════════════════════════════════════════════════════════ ===== T. КАТАЛОГ, ЭТАП 2: КАРТОЧКА НА ЯЗЫКЕ ГЛАВНОЙ ===== 2026-09-02. Эталон — hero-карточка утверждённой главной (.cw99-reference-card): фото 4:3 с бейджем рубрики и пометкой оператора НА снимке, заголовок чёрный 700, цена СИНИМ ТЕКСТОМ 700 («60 zł / godz.»), строка гео с пином, ОДНА строка атрибутов через разделитель, сердце в углу с целью 44px. Было (замер 1440/390): жёлтая плашка цены, под ней стопка пилюль (тип, район, м², комнаты, этат, B2B…), дата, два кружка 36px — карточка 260×577 (ratio 2.22) на 1440 и 359×624 (1.74) на 390. ОБЛАСТЬ — компонент .hp-listing--view-block (карточка каталога, категорий, поиска, избранного и профиля продавца — везде одна разметка и один вид). Разметку тела печатают part-шаблоны hivepress/listing/view/block/ (listing-attributes-primary/secondary, cw99-category-badge), рубрику и пометку в шапку кладёт functions.php («КАРТОЧКА КАТАЛОГА — ЯЗЫК ГЛАВНОЙ»). Канон style.css (общий с SE) не редактируется — переопределяется здесь с большей специфичностью; где канон держит !important, оно повторено. ═════════════════════════════════════════════════════════════ */ /* ── T1. Шапка со снимком: опора для бейджей ─────────────────── */ .hp-listing--view-block .hp-listing__header { position: relative; } .hp-listing--view-block .hp-listing__image { overflow: hidden; } /* ── T2. Бейдж рубрики на снимке (язык .cw99-reference-card__tag) ── Канон держит `background: transparent !important` на ссылке рубрики (style.css, «категория на карточке — тихий uppercase-линк»), поэтому заливка здесь тоже с !important — при большей специфичности (0-4-0 против 0-3-0). Цвет — по корневой рубрике, модификатор печатает part-шаблон; Карта «корень → цвет» (2026-09-03, единая с главной, home-reference.css .cw99-reference-card__tag--*) — только токены канона: Rzeczy синий, Praca жёлтый, Nieruchomości зелёный secondary (чёрный текст 8.6:1), Usługi тёмная нейтраль #242424 (белый 15.4:1), Motoryzacja / Dostawa / Produkty rolne — светлая нейтраль (белая пилюля, чёрный текст). Фиолетовый и бирюза сняты — вне палитры бейджей. */ .hp-listing--view-block .hp-listing__header .cw99-cbadge { position: absolute; top: clamp(6px, .5vw, 8px); left: clamp(6px, .5vw, 8px); z-index: 2; max-width: calc(100% - 2 * clamp(6px, .5vw, 8px)); margin: 0; line-height: 1; } .hp-listing--view-block .hp-listing__header .cw99-cbadge a { display: inline-block; max-width: 100%; overflow: hidden; padding: clamp(3px, .25vw, 4px) clamp(8px, .55vw, 9px) clamp(4px, .3vw, 5px); border-radius: 999px; background: var(--cw99-blue, #2457c6) !important; color: #fff; font-size: clamp(11px, .75vw, 13px); font-weight: 700; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; } .hp-listing--view-block .hp-listing__header .cw99-cbadge a:hover { background: var(--cw99-blue-hover, #1c47a6) !important; color: #fff; } .hp-listing--view-block .hp-listing__header .cw99-cbadge--jobs a { background: var(--cw99-yellow, #ffc73b) !important; color: #000; } .hp-listing--view-block .hp-listing__header .cw99-cbadge--jobs a:hover { background: var(--cw99-yellow-soft, #ffea84) !important; color: #000; } .hp-listing--view-block .hp-listing__header .cw99-cbadge--realty a { background: var(--cw99-green, #59b78b) !important; color: #000; } .hp-listing--view-block .hp-listing__header .cw99-cbadge--realty a:hover { background: var(--cw99-green-dark, #1f7a57) !important; color: #fff; } .hp-listing--view-block .hp-listing__header .cw99-cbadge--services a { background: var(--cw99-dark, #242424) !important; } .hp-listing--view-block .hp-listing__header .cw99-cbadge--services a:hover { background: #000 !important; } .hp-listing--view-block .hp-listing__header .cw99-cbadge--motoryzacja a, .hp-listing--view-block .hp-listing__header .cw99-cbadge--delivery a, .hp-listing--view-block .hp-listing__header .cw99-cbadge--farm a { background: #fff !important; color: #000; } .hp-listing--view-block .hp-listing__header .cw99-cbadge--motoryzacja a:hover, .hp-listing--view-block .hp-listing__header .cw99-cbadge--delivery a:hover, .hp-listing--view-block .hp-listing__header .cw99-cbadge--farm a:hover { background: #eef2fc !important; color: var(--cw99-blue, #2457c6); } /* ── T3. Пометка оператора на снимке (как на главной, секция P) ── Нижний левый угол снимка; на фотографии нужен плотный фон — тёмный нейтральный у демо, белый с синим текстом у «CleanWhale poszukuje», синий у официальной услуги (базовые цвета секции P). */ .hp-listing--view-block .hp-listing__header .cw99-origin { position: absolute; left: clamp(6px, .5vw, 8px); bottom: clamp(6px, .5vw, 8px); z-index: 2; max-width: calc(100% - 2 * clamp(6px, .5vw, 8px)); overflow: hidden; margin: 0; padding: clamp(3px, .25vw, 4px) clamp(8px, .55vw, 9px); font-size: clamp(11px, .7vw, 12px); font-weight: 500; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; } .hp-listing--view-block .hp-listing__header .cw99-origin--demo { background: rgba(36, 36, 36, .82); color: #fff; box-shadow: none; } .hp-listing--view-block .hp-listing__header .cw99-origin--seeking { background: #fff; color: var(--cw99-blue, #2457c6); box-shadow: none; } /* ── T4. Тело карточки: заголовок → цена → гео → атрибуты ───── Дата (details--primary) снята: карточка главной её не носит, а на карточке она занимала строку под ценой; полная дата — на странице объявления. Нижнее поле тела — своё: футер с сердцем больше не в потоке (T6). */ .hp-listing--view-block .hp-listing__content { display: flex; flex-direction: column; gap: clamp(4px, .35vw, 6px); padding: clamp(12px, 1vw, 16px) clamp(12px, 1.1vw, 18px) clamp(12px, 1vw, 16px); } .hp-listing--view-block .hp-listing__content .hp-listing__details--primary { display: none; } .hp-listing--view-block .hp-listing__content .hp-listing__title { display: -webkit-box; overflow: hidden; margin: 0; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: #000; font-size: clamp(14px, 1.1vw, 17px); font-weight: 700; line-height: 1.25; } .hp-listing--view-block .hp-listing__content .hp-listing__title a { color: #000; font-weight: 700; } .hp-listing--view-block .hp-listing__content .hp-listing__title a:hover { color: var(--cw99-blue, #2457c6); } /* ── T5. Цена — синий жирный текст (part-шаблон listing-attributes-primary) ── Пустой контейнер (объявление без цены и без единицы) не рисуется. */ .hp-listing--view-block .cw99-cprice { color: var(--cw99-blue, #2457c6); font-size: clamp(15px, 1.15vw, 18px); font-weight: 700; line-height: 1.3; } .hp-listing--view-block .cw99-cprice:empty { display: none; } .hp-listing--view-block .cw99-cprice__unit { font-size: .85em; font-weight: 500; } /* ── T6. Мета: строка гео с пином + одна строка атрибутов ───── Part-шаблон listing-attributes-secondary печатает district отдельной строкой, остальное — подряд; классы hp-listing__attribute сохранены (по ним JS вешает cw99-type--seek), поэтому канонные пилюли (style.css) и H4 гасятся здесь селекторами 0-5-0. Приглушение — opacity на чёрном; строка гео — тоже #000 с opacity (ссылок внутри нет; было --cw99-muted — вне допустимого множества свипа цветов 2026-09-03). Последней строке зарезервирован правый паддинг под сердце (T7): зона нажатия 44px, а не иконка. */ .hp-listing--view-block .hp-listing__attributes--secondary.cw99-cmeta { display: flex; flex-direction: column; gap: clamp(3px, .25vw, 4px); margin: 0; } .hp-listing--view-block .cw99-cmeta > :last-child { padding-right: 44px; } .hp-listing--view-block .cw99-cmeta .cw99-cmeta__geo { display: flex; align-items: center; gap: .3em; min-width: 0; color: #000; opacity: .55; font-size: clamp(11px, .85vw, 13px); line-height: 1.35; } .hp-listing--view-block .cw99-cmeta .cw99-cmeta__geo .cw99-i { flex: 0 0 auto; width: 1.05em; height: 1.05em; } .hp-listing--view-block .cw99-cmeta .cw99-cmeta__line { display: flex; flex-wrap: wrap; min-width: 0; font-size: clamp(11px, .85vw, 13px); line-height: 1.35; } .hp-listing--view-block .hp-listing__attributes--secondary.cw99-cmeta .cw99-cmeta__geo .hp-listing__attribute, .hp-listing--view-block .hp-listing__attributes--secondary.cw99-cmeta .cw99-cmeta__line .hp-listing__attribute { display: inline; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 0; outline: 0; background: none; color: inherit; font-size: inherit; font-weight: 400; line-height: inherit; } .hp-listing--view-block .hp-listing__attributes--secondary.cw99-cmeta .cw99-cmeta__geo .hp-listing__attribute { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hp-listing--view-block .hp-listing__attributes--secondary.cw99-cmeta .cw99-cmeta__line .hp-listing__attribute { color: #000; opacity: .55; white-space: nowrap; } .hp-listing--view-block .hp-listing__attributes--secondary.cw99-cmeta .cw99-cmeta__line .hp-listing__attribute + .hp-listing__attribute::before { content: '·'; margin: 0 .45em; } /* «Poszukuję» — сторона рынка видна сразу: синий 700 без приглушения. С 2026-09-03 тип печатается ТОЛЬКО когда это «Poszukuję» (part-шаблон listing-attributes-secondary; дефолтное «Oferuję» — шум), поэтому правило больше не зависит от JS-класса cw99-type--seek — но класс оставлен. */ .hp-listing--view-block .hp-listing__attributes--secondary.cw99-cmeta .cw99-cmeta__line .hp-listing__attribute--type, .hp-listing--view-block.cw99-type--seek .hp-listing__attributes--secondary.cw99-cmeta .cw99-cmeta__line .hp-listing__attribute--type { color: var(--cw99-blue, #2457c6); font-weight: 700; opacity: 1; } /* ── T7. Сердце в углу: цель 44px, без кружка ───────────────── Футер выходит из потока в правый нижний угол карточки (у неё overflow:hidden и position:relative из канона). Кнопка сообщения на карточке снята: карточка главной её не носит, а «Odpowiedz na ogłoszenie» — первичная кнопка страницы объявления. Сердце — цель 44×44 целиком (не 36 + невидимый добор): канонный ::before с inset:-4px обнуляется. 2026-09-03: иконка — ТОТ ЖЕ инлайн-SVG контура, что на главной (cw99_pl_favorite_toggle, part cw99-favorite): чёрный контур stroke 1.75, ховер и активное — синий, активное — заливка. Font Awesome rgba(7,36,86,.25) снят; плагина скрыт (нужен его JS). */ .hp-listing--view-block .hp-listing__footer { position: absolute; right: clamp(6px, .5vw, 8px); bottom: clamp(6px, .5vw, 8px); margin: 0; padding: 0; border: 0; } .hp-listing--view-block .hp-listing__footer .hp-listing__actions--primary { gap: 0; } .hp-listing--view-block .hp-listing__footer .hp-listing__actions--primary .hp-listing__action--message { display: none; } .hp-listing--view-block .hp-listing__footer .hp-listing__actions--primary .hp-listing__action--favorite { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; border-radius: 50%; background: transparent; color: #000; opacity: 1; transition: color .2s, background .2s; } .hp-listing--view-block .hp-listing__footer .hp-listing__actions--primary .hp-listing__action--favorite::before { inset: 0; } .hp-listing--view-block .hp-listing__footer .hp-listing__actions--primary .hp-listing__action--favorite i { display: none; } .hp-listing--view-block .hp-listing__footer .hp-listing__actions--primary .hp-listing__action--favorite .cw99-i { width: 18px; height: 18px; } .hp-listing--view-block .hp-listing__footer .hp-listing__actions--primary .hp-listing__action--favorite:hover { background: transparent; color: var(--cw99-blue, #2457c6); } .hp-listing--view-block .hp-listing__footer .hp-listing__actions--primary .hp-listing__action--favorite[data-state="active"], .hp-listing--view-block .hp-listing__footer .hp-listing__actions--primary .hp-listing__action--favorite.hp-listing__action--active { color: var(--cw99-blue, #2457c6); } .hp-listing--view-block .hp-listing__footer .hp-listing__actions--primary .hp-listing__action--favorite[data-state="active"] .cw99-i { fill: currentColor; } /* ── T8. Список рубрик фильтра: целиком и без дыры на 768–1025 ── a) HivePress держит на .hp-field--radio max-height 389px с overflow:auto (замер 1280): на странице категории список подрубрик обрывался на «Książki» — скроллбар на Mac невидим, и это читалось как обрезанная вёрстка. В сайдбаре (≥48em) потолок снят — список показывается целиком; в мобильной модалке (<48em) штатный скролл остаётся. b) R3 раскладывает поля фильтра сеткой auto-fit под выдачей; список рубрик (радио-колонка) задавал высоту ряда, а соседние короткие поля оставляли под собой ~248px пустоты (замер 900). Рубрики занимают всю первую строку, вложенные уровни раскладываются в ряд (уровень с подрубриками — на всю ширину), короткие поля идут второй строкой. */ @media (min-width: 48em) { .hp-template--listings-view-page .hp-page__sidebar .hp-form--listing-filter .hp-field--radio { max-height: none; overflow: visible; } } @media (min-width: 768px) and (max-width: 1025px) { .hp-template--listings-view-page .hp-page__sidebar .hp-form--listing-filter .hp-form__field--radio { grid-column: 1 / -1; } .hp-template--listings-view-page .hp-page__sidebar .hp-form--listing-filter .hp-field--radio ul ul { display: flex; flex-wrap: wrap; gap: 4px 22px; width: 100%; margin: 4px 0 0; padding: 0; } .hp-template--listings-view-page .hp-page__sidebar .hp-form--listing-filter .hp-field--radio ul ul > li { margin: 0; } .hp-template--listings-view-page .hp-page__sidebar .hp-form--listing-filter .hp-field--radio ul ul > li:has(> ul) { flex: 0 0 100%; } } /* ═════════════════════════════════════════════════════════════ ===== U. СТРАНИЦА ОБЪЯВЛЕНИЯ, ЭТАП 2: ЦЕНА СИНИМ, БЕЗ РАМОК И ЖЁЛТЫХ ЧЁРТОЧЕК ===== 2026-09-02. Область: body.hp-template--listing-view-page. Замер до правки (1440): лента цены — жёлтая плашка rgb(255,199,59) 20px/700 с единицей 13px/600; у виджета цены, виджета действий, карточки продавца и её подвала — рамка 1px rgba(7,36,86,.075) от родительской темы поверх ореола C3; у пилюль типа и района — нижняя граница 1px; пилюля «Dodaj do ulubionych» — border 2px; пометка Omnibus — жёлтая полоса слева. Лента .cw99-price-ribbon здесь ПЕРЕКРАШИВАЕТСЯ (решение этапа 2: цена на всём сайте — синий текст, как на главной), её геометрия и переносы кусков в каноне не тронуты. ═════════════════════════════════════════════════════════════ */ /* ── U1. Виджет цены: цена крупно синим 700, тип — тихой пилюлей, гео строкой ── */ .hp-template--listing-view-page .hp-listing--view-page .hp-listing__attributes--primary.widget { border: 0; padding: clamp(18px, 1.6vw, 24px); text-align: left; } .hp-template--listing-view-page .hp-listing--view-page .hp-listing__attributes--primary .cw99-price-ribbon { display: block; padding: 0; border-radius: 0; background: transparent; color: var(--cw99-blue, #2457c6); font-size: clamp(24px, 2.1vw, 32px); font-weight: 700; line-height: 1.15; } .hp-template--listing-view-page .hp-listing--view-page.hp-listing .hp-listing__attributes--primary .cw99-price-ribbon .hp-listing__attribute--price-unit { padding-left: .3em; font-size: .5em; font-weight: 500; } .hp-template--listing-view-page .hp-listing--view-page .hp-listing__attributes--primary.widget .hp-listing__attribute { border: 0; } .hp-template--listing-view-page .hp-listing--view-page .hp-listing__attributes--primary .hp-listing__attribute--type { margin: 14px 0 0; padding: 6px 14px; font-weight: 500; font-size: .92em; } .hp-template--listing-view-page .hp-listing--view-page .hp-listing__attributes--primary .hp-listing__attribute--district { display: flex; width: 100%; margin: 12px 0 0; padding: 0; border-radius: 0; background: none; color: #000; opacity: .6; font-size: .95em; font-weight: 400; } .hp-template--listing-view-page .hp-listing--view-page .hp-listing__attributes--primary .hp-listing__attribute--district::before { color: #000; } /* ── U2. Рамки родительской темы — снять (воздух и ореол, C3) ── */ .hp-template--listing-view-page .hp-listing__actions--primary.widget, .hp-template--listing-view-page .hp-page__sidebar .hp-vendor--view-block, .hp-template--listing-view-page .hp-page__sidebar .hp-vendor--view-block .hp-vendor__footer { border: 0; } .hp-template--listing-view-page .hp-page__sidebar .hp-vendor--view-block .hp-vendor__name, .hp-template--listing-view-page .hp-page__sidebar .hp-vendor--view-block .hp-vendor__name a { color: #000; } /* ── U3. «Dodaj do ulubionych» в топбаре: вторичная кнопка словаря C4 ── Было: пилюля с рамкой 2px #e9e9e9 (канон). Кольцо inset 1px, радиус 6, цель ≥44px; красный ховер канона сохранён. */ .hp-template--listing-view-page .hp-listing__actions--secondary .hp-listing__action--favorite { min-height: 44px; padding: 9px 16px; border: 0; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--cw99-line, #e9e9e9); transition: box-shadow .2s, color .2s; } .hp-template--listing-view-page .hp-listing__actions--secondary .hp-listing__action--favorite:hover { box-shadow: inset 0 0 0 1px #e4410d; } /* ── U4. Пометка Omnibus без жёлтой чёрточки и бокса ───────── Компонент .cw99-review-disclaimer (страница объявления и профиль продавца): жёлтая полоса слева читалась как декор у «Recenzje»; жёлтый на доске — только ценник и CTA. Спокойный приглушённый абзац. */ .cw99-review-disclaimer { padding: 0; border-left: 0; border-radius: 0; background: transparent; color: #000; opacity: .6; /* ссылок внутри нет — приглушение альфой, не сплошным muted */ } /* ═════════════════════════════════════════════════════════════ ===== V. ПОСЛЕДНИЙ СЛОЙ (2026-09-03): КОНТЕЙНЕР, СТРАНИЦА ОБЪЯВЛЕНИЯ, ГОЛОВА МОБИЛЬНОГО КАТАЛОГА ===== Хвосты, подтверждённые замером владельцем задачи. Каждое правило — со своей областью (body-класс шаблона HivePress или собственный класс). ═════════════════════════════════════════════════════════════ */ /* ── V1. Контейнер HivePress: ограничитель снят ─────────────── frontend.min.css плагина: .hp-page { max-width: 80rem; margin: 0 auto } — каталог, категории, объявление, вход, регистрация и кабинет стояли в 1280px по центру: на 1440 левый край 80 при бирке шапки 43.2, на 1680 — 200 против 50.4 (замер getBoundingClientRect .hp-page.site-main). Прежний grid-audit мерил .site-content > .container — у него поле уже было верным (S1), отсюда ложный PASS. Поле страницы — --cw99-gutter из S1 (у .container), самой .hp-page ограничитель не нужен: канон запрещает max-width-ограничители контейнеров. */ .hp-theme--listinghive .site-content .hp-page { max-width: none; } /* ── V2. Страница объявления: на белом, без серой обёртки ───── Канон style.css красит ЛЮБОЙ .hp-listing (в том числе корневой .hp-row страницы объявления) в #fafafa с радиусом .3vw (4.3px на 1440, 3.9 на 390) и ореолом .9vw (на 390 — 3.5px, ниже пола 9px): вся страница лежала в серой карточке. Страница — на белом, как главная; секции описания и отзывов — в потоке без плитки; карточки сайдбара остаются белыми с ореолом и --cw99-r (C3). overflow:visible — ореолы карточек сайдбара не режутся обёрткой. */ .hp-template--listing-view-page .hp-listing--view-page { padding: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; } /* ── V2b. Телефон: цена и «Odpowiedz» — сразу после галереи ──── Замер 390 до правки: описание 853, «Recenzje» 1150, а карточка цены — 1236 и «Odpowiedz na ogłoszenie» — 1443: главное действие после всего текста. DOM для десктопа не меняется (там сайдбар справа): на полосе, где HivePress складывает колонки в столбик (<48em), обёртки колонок и sticky-обвязка сайдбара распускаются display:contents, а порядок задаёт order: рубрика/пометка/H1/дата/табы/галерея (0) → цена (1) → действия (2) → описание и таблица атрибутов (3) → отзывы (4) → продавец (5) → прочие виджеты сайдбара (6). !important у сайдбара — не прихоть: как только aside теряет бокс, JS HivePress/theia-sticky-sidebar (замер ширины 0) пишет ему инлайновый style="display:none", и без !important колонка исчезала целиком (проверено на живой 390 после первого выката). Обёртка sticky получает от того же JS класс is-affixed — поэтому выбирается «любой div, кроме виджета», а не div:not([class]). */ @media (max-width: 47.99em) { .hp-template--listing-view-page .hp-listing--view-page { display: flex; flex-direction: column; margin: 0; } .hp-template--listing-view-page .hp-listing--view-page > .hp-page__content, .hp-template--listing-view-page .hp-listing--view-page > .hp-page__sidebar, .hp-template--listing-view-page .hp-listing--view-page > .hp-page__sidebar > div:not(.widget):not(.hp-widget), .hp-template--listing-view-page .hp-listing--view-page > .hp-page__sidebar .inner-wrapper-sticky { display: contents !important; } .hp-template--listing-view-page .hp-listing--view-page .hp-listing__attributes--primary.widget { order: 1; } .hp-template--listing-view-page .hp-listing--view-page .hp-listing__actions--primary.widget { order: 2; } /* 2026-09-03 (W20): продавец поднят с 5 на 3 — до правки карточка продавца попадала ПОСЛЕ блока «Recenzje» и читалась как его хвост (замер 390: описание 1267, «Recenzje» 1520, продавец 1694), хотя это отдельная сущность и единственный способ понять, с кем имеешь дело. Описание и отзывы съехали на позицию ниже, порядок остальных не тронут: цена 1 → действия 2 → продавец 3 → описание 4 → отзывы 5. */ .hp-template--listing-view-page .hp-listing--view-page .hp-page__sidebar .hp-vendor--view-block { order: 3; } .hp-template--listing-view-page .hp-listing--view-page .hp-page__content > .hp-listing__description, .hp-template--listing-view-page .hp-listing--view-page .hp-page__content > .hp-listing__attributes--secondary, .hp-template--listing-view-page .hp-listing--view-page .hp-page__content > .hp-listing__attributes--ternary { order: 4; } .hp-template--listing-view-page .hp-listing--view-page .hp-page__content > .hp-section { order: 5; } .hp-template--listing-view-page .hp-listing--view-page .hp-page__sidebar .widget--sidebar { order: 6; } /* Описание идёт после карточки действий: отбивка сверху вместо canon-ных 6px (виджет и так несёт 2rem снизу — здесь только страховка от нуля). */ .hp-template--listing-view-page .hp-listing--view-page .hp-page__content > .hp-listing__description { margin-top: 0; } } /* ── V3. Голова мобильного каталога: 245px дефолтов → ~120 ───── Замер 390 до правки: низ поисковой карточки 263, «Filtruj» — button.hp-button--mobile 359×51 белым без формы (читался как жирный текст, 295–346), топбар столбиком «Wyniki 1–12 z 21» (394) + «Sortuj według» + select 27px (449–476), первая карточка 508. Стало: «Filtruj» — вторичная кнопка словаря C4 (белая, кольцо inset 1px --cw99-line, 44px, синяя иконка, 500), счётчик и сортировка в одну строку с контролом 44px, зазоры 10px. Область: <48em — единственная полоса, где кнопка вообще существует (.hp-button--mobile скрыта с 48em плагином). */ @media (max-width: 47.99em) { .hp-template--listings-view-page .hp-page__header .hp-form--listing-search { margin-bottom: 10px; } .hp-template--listings-view-page .hp-page__header:not(:last-child) { margin-bottom: 10px; } .hp-theme--listinghive.hp-template--listings-view-page .hp-page__header .hp-button--listing-filter { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: auto; min-height: 44px; height: 44px; margin: 0; padding: 0 16px; border: 0; border-radius: 6px; background: #fff; background-image: none; box-shadow: inset 0 0 0 1px var(--cw99-line, #e9e9e9); color: #000; font-size: 16px; font-weight: 500; line-height: 1; transition: box-shadow .2s, color .2s; } .hp-theme--listinghive.hp-template--listings-view-page .hp-page__header .hp-button--listing-filter i { margin: 0; color: var(--cw99-blue, #2457c6); font-size: 15px; } .hp-theme--listinghive.hp-template--listings-view-page .hp-page__header .hp-button--listing-filter:hover, .hp-theme--listinghive.hp-template--listings-view-page .hp-page__header .hp-button--listing-filter:focus-visible { background: #fff; box-shadow: inset 0 0 0 1px var(--cw99-blue, #2457c6); color: var(--cw99-blue, #2457c6); } .hp-template--listings-view-page .hp-page__topbar { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 10px; margin-bottom: 10px; } .hp-template--listings-view-page .hp-page__topbar .hp-result-count { margin: 0; } } /* Контрол сортировки — на всех ширинах 44px (select2 темы давал 27px и кегль 11px у подписи): кольцо inset вместо рамки, радиус 6, подпись 14px. */ .hp-template--listings-view-page .hp-page__topbar .hp-form--listing-sort .hp-form__label, .hp-template--listings-view-page .hp-page__topbar .hp-form--listing-sort .hp-form__label span { font-size: 14px; } .hp-template--listings-view-page .hp-page__topbar .hp-form--listing-sort .select2-container .select2-selection--single { display: flex; align-items: center; height: 44px; padding: 0 28px 0 12px; border: 0; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--cw99-line, #e9e9e9); } .hp-template--listings-view-page .hp-page__topbar .hp-form--listing-sort .select2-container .select2-selection--single .select2-selection__rendered { padding: 0; line-height: 44px; font-size: 14px; color: #000; } .hp-template--listings-view-page .hp-page__topbar .hp-form--listing-sort .select2-container .select2-selection--single .select2-selection__arrow { top: 0; right: 6px; height: 44px; } .hp-template--listings-view-page .hp-page__topbar .hp-form--listing-sort .select2-container--open .select2-selection--single, .hp-template--listings-view-page .hp-page__topbar .hp-form--listing-sort .select2-container--focus .select2-selection--single { box-shadow: inset 0 0 0 1px var(--cw99-blue, #2457c6); } /* ── V4. Футер: цвет родительской темы и нижнее меню ────────── Тема даёт .site-footer color #cfcfcf — им красились ссылки нижнего меню («CleanWhale — sprzątanie», «Podłącz AI», 19px) и всё, что не перекрыл канон. Серых нет: приглушение на #242424 — белый с альфой (.72 — 8.6:1), как у колонок и юридических ссылок канона (style.css 1.38.0); цель нажатия ссылок меню — 44px паддингом. Область: футер темы. */ .hp-theme--listinghive .site-footer { color: rgba(255, 255, 255, .72); } .hp-theme--listinghive .site-footer .footer-navbar__menu a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 0; color: rgba(255, 255, 255, .72); } .hp-theme--listinghive .site-footer .footer-navbar__menu a:hover { color: var(--cw99-yellow, #ffc73b); } /* ═════════════════════════════════════════════════════════════ СЕКЦИЯ W — КРАФ И ГЕОМЕТРИЯ (2026-09-03, две независимые критики) Здесь чинятся КЛАССЫ дефектов, найденные программным свипом, а не названные критиками экземпляры. Каждое правило — со своей областью; рядом с каждым стоит замер живого сайта ДО правки. ═════════════════════════════════════════════════════════════ */ /* ── W1. Веса и цвет заголовков: 600 нет в ките ──────────────── Свип по 9 страницам (design/sweep): 50 узлов с computed font-weight 600 — 27 §-заголовков /regulamin/, 20 /polityka-prywatnosci/, псевдозаголовок «Opis» страницы объявления и два screen-reader-заголовка каталога. Причина ОДНА и общая: канон style.css:30 задаёт `h1…h6 { font-weight: 600 }`, а HivePress frontend.min.css — `h1…h6 { color: rgba(15,23,39,.85) }`. Все места, которые «выглядели правильно», были переопределены поштучно; здесь переопределена сама база. Веса в futura-pt: 400/500/700, серых цветов в каноне нет вовсе (DESIGN.md). Область — контент страницы; шапка и футер свои цвета держат сами и правилом ниже не задеваются (там нет h1…h6). */ .site-content h1, .site-content h2, .site-content h3, .site-content h4, .site-content h5, .site-content h6 { color: #000; font-weight: 700; } /* Тот же класс, псевдозаголовок: «Opis» на странице объявления рисуется через ::before и наследует 600 + #242424 (тёмная нейтраль футера как цвет текста — вне канона). Замер до правки: 18.4px / 600 / rgb(36,36,36). Кегль доведён до «Recenzje» (27.2px): это заголовки ОДНОГО уровня в одной колонке, а рисовались двумя разными. 1.7em от 16px — ровно та величина, которую тема даёт h2 (шкала одна, не выдуманная). */ .hp-listing--view-page .hp-listing__description::before { color: #000; font-size: 1.7em; font-weight: 700; } /* ── W2. Серые значки родительской темы ─────────────────────── Свип цветов (включая ::before, чего colors-audit до сегодня не смотрел): `.hp-icon` входа и шеврон `.menu-item::after` приезжают с rgba(7,36,86,.25) и .55 — на белом это #C1C8D5 / #7787A2, то есть серый сплошным цветом, а не альфа на #000. Одна правка снимает их на ВСЕХ страницах: значки живут в общей шапке. */ .header-navbar .hp-icon, .header-navbar .menu-item::after, .header-navbar .menu-item::before, .header-navbar__burger > ul::before, .header-navbar__burger > ul .menu-item.parent::after { color: rgba(0, 0, 0, .55) !important; } /* ── W3. Плашка рубрики: ОДИН компонент вместо пяти заливок ──── Замер /listing/ до правки: .cw99-cbadge жил в пяти заливках — rgb(36,87,198), rgb(36,36,36), rgb(89,183,139), rgb(255,199,59), rgb(255,255,255). «Sprzątanie» на одном экране был и чёрным, и жёлтым (рубрика решается корнем, а один и тот же лист висит под разными корнями), Motoryzacja и Dostawa делили белый. Цветового кода из этого не получается — получается конфетти. Остаётся один вид: синяя пилюля канона, различие рубрик несёт текст. Модификаторы не удаляются из разметки (их печатает part-шаблон), а обесцвечиваются здесь — так правило видно рядом с причиной. */ .hp-listing--view-block .hp-listing__header .cw99-cbadge--jobs a, .hp-listing--view-block .hp-listing__header .cw99-cbadge--realty a, .hp-listing--view-block .hp-listing__header .cw99-cbadge--services a, .hp-listing--view-block .hp-listing__header .cw99-cbadge--motoryzacja a, .hp-listing--view-block .hp-listing__header .cw99-cbadge--delivery a, .hp-listing--view-block .hp-listing__header .cw99-cbadge--farm a { background: var(--cw99-blue, #2457c6) !important; color: #fff; } .hp-listing--view-block .hp-listing__header .cw99-cbadge--jobs a:hover, .hp-listing--view-block .hp-listing__header .cw99-cbadge--realty a:hover, .hp-listing--view-block .hp-listing__header .cw99-cbadge--services a:hover, .hp-listing--view-block .hp-listing__header .cw99-cbadge--motoryzacja a:hover, .hp-listing--view-block .hp-listing__header .cw99-cbadge--delivery a:hover, .hp-listing--view-block .hp-listing__header .cw99-cbadge--farm a:hover { background: var(--cw99-blue-hover, #1c47a6) !important; color: #fff; } /* ── W4. Сетка каталога: 1280 перестаёт быть провалом ────────── Замер ширины карточки до правки: 900→261, 1024→300, 1100→323, 1280→242, 1440→276. То есть канонический ноутбучный 1280 давал САМУЮ УЗКУЮ карточку сайта — уже, чем 1024 и 1440. Причина: минимум колонки 240px, и в колонке выдачи 791px помещалось три штуки по 242. Порог 260 отдаёт 1280 две колонки по 379. Пила при переносе строки в раскладке auto-fill неустранима в принципе (ширина = W/n), но её дно поднимается с 242 до 260, и ни один из четырёх канонических вьюпортов на дне не стоит. */ .hp-template--listings-view-page .hp-listings .hp-row { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); } /* ── W5. Кнопки: одна строка словаря ────────────────────────── Замер до правки: высоты первичных 43/44/46/48/50, радиусы 6px и 8px, вторичная кнопка нарисована двумя несовместимыми способами (белая с кольцом --cw99-line и чёрным текстом на странице объявления — словарь; белая с СИНИМ кольцом и синим текстом на /ai/ — самодеятельность). Здесь: радиус 6 у всех, высота 46 у всех первичных. Вторичная приведена к словарю в template-ai.php (её стили живут в шаблоне). */ .hp-page__content .hp-form__button, .hp-page__sidebar .hp-form__button, .hp-form--listing-search .hp-form__button, .hp-listing__action--message, .hp-template--user-login-page .hp-form--user-login .hp-field--submit, .hp-modal .hp-form--user-login .hp-field--submit, .cw99-rp__submit, .cw99-aisearch__btn, .cw99-cc__btn, /* Вторичные кнопки страницы объявления («Napisz opinię», «Zgłoś nielegalne treści») жили на 43px — полпикселя до нормы и три пикселя до соседней первичной. Тот же словарь. */ .hp-listing__action--review, .hp-listing__action--report { min-height: 46px; padding-top: 0; padding-bottom: 0; border-radius: 6px; } /* ── W6. Цели нажатия на телефоне ───────────────────────────── Замер на 390: кнопка «в избранное» карточки главной 35×35 (шесть штук), ссылки-разделы «Zobacz wszystkie» 131×20, «Cała tablica» 94×20, «Zobacz dokumentację» 135×16. Норма 44. Растёт только площадь попадания: иконка и кегль остаются на месте. */ .cw99-reference-card__fav { min-width: 44px; min-height: 44px; } .cw99-reference-section-head a, .cw99-connect2__doclink { min-height: 44px; padding-block: 12px; } /* ── W7. Мобильное меню — та же поверхность, что и весь сайт ─── Замеры открытой панели на 390 до правки: CTA «Dodaj ogłoszenie» — rgb(255,199,59) с текстом rgb(26,26,26), пилюля 999px шириной 142px, тогда как в шапке и везде та же CTA синяя, белым, радиус 6px. Пункты меню — #1a1a1a (канон style.css:80 бьёт по специфичности общее правило #000), панель занимает весь экран при четырёх пунктах, а шесть категорий лежат в свёрнутом sub-menu. */ .header-navbar .header-navbar__burger > ul .menu-item > a, .header-navbar .header-navbar__burger > ul a { color: #000 !important; } /* CTA бургера: словарь синей кнопки, а не жёлтая пилюля (K7 выше отменена этим правилом). Селектор полный — иначе правило «пункты бургера чёрным» строкой выше (0,3,2) перебивает его по специфичности (было 0,3,1) и белый текст CTA приезжал чёрным на синем. */ .header-navbar .header-navbar__burger > ul .menu-item > a[href*="submit-listing"] { width: auto; justify-content: center; margin-top: 6px; padding: 6px 18px; border-radius: 6px; background: var(--cw99-blue, #2457c6); color: #fff !important; } /* Категории раскрыты: панель перестаёт быть пустой на 2/3, а содержимое — настоящее (те же шесть рубрик, что в шапке), ничего не выдумано. */ .header-navbar .header-navbar__burger > ul .sub-menu { display: block !important; width: auto; height: auto; padding-left: 16px; position: static; box-shadow: none; opacity: 1; visibility: visible; } /* Цель нажатия у раскрытых подпунктов — те же 44px, что у пунктов верхнего уровня (замер после раскрытия: было 37px). */ .header-navbar .header-navbar__burger > ul .sub-menu .menu-item > a { display: flex; align-items: center; min-height: 44px; padding: 4px 0; font-size: 15px; } .header-navbar .header-navbar__burger > ul .menu-item.parent::after { content: none; } /* Значок входа в бургере приезжал жёлтым — жёлтый в интерфейсе значит CTA. */ .header-navbar .header-navbar__burger > ul .hp-icon { color: rgba(0, 0, 0, .55) !important; } /* ── W8. Страница объявления ────────────────────────────────── Замеры на 1440 до правки: правый рельс .hp-vendor кончается на y=849 при высоте документа 2101 — 60% страницы идут с пустой колонкой 430px; таб-бар .hp-menu--tabbed содержит РОВНО ОДИН пункт и рисует активное подчёркивание (артефакт темы, ждущей несколько вкладок); дисклеймер отзывов 13.6px при ширине 892px — самый мелкий и одновременно самый широкий текст страницы. */ /* Колонка тянется на всю высоту ряда (флекс-stretch темы), поэтому липким делается её содержимое: карточка продавца 700px едет вдоль галереи и описания вместо того, чтобы кончиться на 849 и оставить 633px пустоты. */ .hp-template--listing-view-page .hp-page__sidebar > * { position: sticky; top: 24px; } .hp-listing--view-page .hp-menu--tabbed:not(:has(li:nth-child(2))) { display: none; } .cw99-review-disclaimer { /* Мера 62ch (было max(560px, 42vw) — 726px при 1728, ≈85 знаков; свип X5). Не 72ch: у futura-pt широкий ch, 72ch давали 85–90 знаков в строке; 62ch — ≈70–78 (критик 2026-09-05). */ width: min(100%, 62ch); font-size: 16px; } /* ── W9. Юридические страницы ───────────────────────────────── Замер /regulamin/ до правки: полоса текста 1354px (≈180 знаков в строке), 37 134px высоты без единого якоря, 3 472px внутреннего журнала изменений ПЕРЕД первым параграфом. Ширина колонки задана через vw (max-width как ограничитель контейнера каноном запрещён), пол 560px держит меру на планшете. Оглавление и сворачивание журнала — functions.php, W9-PHP. */ /* ⚠️ Мера вешается на ТИПОГРАФИЧЕСКИЕ ДЕТИ .page__text, а не на сам блок: .page__text — прямой ребёнок .container, и сжатие его самого grid-audit честно засчитал как «правый край контента ≠ поле шапки» (FAIL на четырёх ширинах, поймано этим же аудитом). Контейнер остаётся во всю ширину поля 3vw, короче становится только строка текста. */ .page__text > p, .page__text > ul, .page__text > ol, .page__text > blockquote, .cw99-legal__changelog > p, .cw99-legal__changelog > ul { /* 62ch от собственного кегля (было max(560px, 40vw) — 691px при 1728, чуть шире 75ch; свип X5). 72ch у futura-pt — это 85–90 знаков (ch у шрифта широкий), 62ch — ≈70–78 (критик 2026-09-05). */ width: min(100%, 62ch); } .cw99-legal__changelog { margin: 0 0 clamp(18px, 1.6vw, 26px); padding: clamp(12px, 1.1vw, 18px) clamp(14px, 1.3vw, 20px); border-radius: var(--cw99-r, 14px); background: #fff; box-shadow: 0 0 max(9px, 1vw) rgba(0, 0, 0, .07); } .cw99-legal__changelog > summary { cursor: pointer; font-weight: 700; list-style: none; } .cw99-legal__changelog > summary::-webkit-details-marker { display: none; } .cw99-legal__changelog > summary::after { content: "+"; margin-left: .5em; color: var(--cw99-blue, #2457c6); } .cw99-legal__changelog[open] > summary::after { content: "−"; } .cw99-legal__toc { margin: 0 0 clamp(22px, 2vw, 34px); } .cw99-legal__toc > b { display: block; margin-bottom: .6em; font-weight: 700; } .cw99-legal__toc ol { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 2px 24px; margin: 0; padding: 0; list-style: none; } .cw99-legal__toc a { display: inline-flex; align-items: center; min-height: 34px; color: var(--cw99-blue, #2457c6); line-height: 1.25; text-decoration: none; } .cw99-legal__toc a:hover { color: var(--cw99-blue-hover, #1c47a6); text-decoration: underline; } .site-content h2[id^="par-"] { scroll-margin-top: 90px; } /* ── W10. Баннер cookie: серый текст ────────────────────────── Замер: .cw99-cc__desc — rgb(91,100,114) сплошным цветом на всех восьми страницах. Приглушение в каноне — только альфа на #000. */ .cw99-cc__desc { color: #000; opacity: .66; } /* ── W11. Рельс логотипов ИИ — СНЯТО 2026-09-05 ─────────────── Здесь стояло правило ≤760 (margin 0, padding 15px), убиравшее вынос рельса .cw99-connect2__tiles до края экрана: замер на 390 показал рельс до x=390 при правом крае карточки 374, и это прочли как переполнение. Регресс круга fb5fbdc (критик, 390): в рельсе видны только ChatGPT и Claude, третья плитка целиком за клипом (её значок 385…425 при клипе 359), а плитки без рамок и ореола сами по себе как «листай» не читаются — единственный признак прокрутки и был срезанный край третьей плитки. Правило снято целиком: на ≤600 действует рельс секции выше (T = .344V, margin 0 -8vw 0 -4vw, scroll-padding-left 4vw — обрезка на середине третьей плитки, замер 360/390/430: right третьей плитки больше clientWidth рельса на 62/67/74px, scrollWidth > clientWidth); на 601…760 плитки стоят штатной сеткой по пять и никакого паддинга не требуют. */ /* ── W12. Ритм секций главной ───────────────────────────────── Замер на 1440 до правки: над «Kategorie» 17px и под ним 17px — заголовок равноудалён от чужого блока сверху и от своего снизу, группировка по близости не работает; белая карточка доверия упиралась в чёрный футер зазором 0px. Инвариант первого экрана (верх .cw99-matches виден при 1440×940) сохраняется: 28+8 против прежних 17+17 сдвигают ленту на 11px. Область — только главная (.cw99-home2). */ .cw99-home2 { --cw99-home2-sectiongap: clamp(20px, 1.95vw, 30px); } .cw99-home2 .cw99-reference-section-head { margin-bottom: clamp(6px, .6vw, 9px); } .cw99-home2 .cw99-reference-trust { margin-bottom: clamp(34px, 3.2vw, 52px); } /* ── W13. Пояснение к пометке под галереей ──────────────────── Пара к W-a в functions.php: чип остался над H1, объяснение уехало вниз. Мера — та же, что у описания объявления (описание живёт в колонке 618px при 16px, ≈80 знаков); приглушение — opacity на #000, как у самой пометки. */ .cw99-origin-explain { margin: 0 0 clamp(14px, 1.2vw, 20px); width: min(100%, 62ch); /* было max(560px, 42vw) — 726px при 1728; свип X5; 72ch у futura-pt = 85–90 знаков, 62ch ≈ 70–78 */ color: #000; opacity: .6; font-size: 15px; line-height: 1.5; } /* ── W14. У каталога появляется видимый заголовок ───────────── Замер до правки: на /listing/ h1 «Ogłoszenia» несёт class="screen-reader- text" (скрыт визуально), и на 390 после шапки идёт ~110px пустоты, а первый текст страницы — «Wyniki 1–12 z 21». На /listing-category/items/ на том же месте видимый заголовок «Rzeczy» той же типографики (28.08px/700) — две почти одинаковые страницы открывались по-разному. Заголовок просто перестаёт быть спрятанным; текст, разметка и h1-уровень не меняются. */ /* !important — не прихоть: класс .screen-reader-text ядра WP объявлен с `position: absolute !important` (замер живого: после первой правки h1 остался absolute и лёг ПОВЕРХ строки поиска). Снимаются ровно те четыре свойства, которые прячут узел. */ .hp-template--listings-view-page .hp-page__header > h1.screen-reader-text { position: static !important; clip: auto !important; clip-path: none !important; width: auto !important; height: auto !important; margin: 0 0 clamp(10px, .9vw, 16px); overflow: visible !important; color: #000; font-size: clamp(22px, 20.5px + .53vw, 30px); font-weight: 700; white-space: normal; } /* ── W15. Сайдбар категории не длиннее собственной выдачи ───── Замер /listing-category/items/ на 1440 ДО правки: сайдбар тянулся до y≈1110 при пяти карточках, кончавшихся на y≈845 — под результатами оставалась пустая белая зона ~265px на две трети ширины. А цели нажатия 44px (W16) удлинили список подрубрик ещё вдвое, до 980px. ⚠️ Прокруткой это НЕ лечится: секция T8 выше СНЯЛА штатный max-height HivePress осознанно — на Mac скроллбар невидим, и обрезанный список читался как сломанная вёрстка. Поэтому список остаётся целым, но перестаёт быть одной колонкой: подрубрики раскладываются в две колонки и высота падает вдвое. Ничего не скрыто, ни одного счётчика не выдумано. */ @media (min-width: 48em) { /* Колонки получает ИМЕННО длинный уровень, а не любой вложенный: дерево рубрик здесь трёхуровневое («Wszystkie kategorie» → «Rzeczy» → 18 подрубрик), и раскладка среднего уровня из одного пункта ничего не давала, только сужала колонку внуку. :has(> li:nth-child(6)) выбирает список, в котором есть хотя бы шесть пунктов. */ .hp-template--listings-view-page .hp-page__sidebar .hp-field--radio ul:has(> li:nth-child(6)) { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); column-gap: 12px; } } /* ── W16. Нативные чекбокс и радио — единственные несделанные контролы сайта. Замер: input[type=radio] 13×13px в мобильной модалке фильтра и чекбокс согласия формы жалобы ~13–16px при норме цели 44px, причём без чекбокса юридическую форму нельзя отправить. Рисуем сами: бокс 22px, вся строка с подписью — цель нажатия. */ .hp-form input[type="checkbox"], .hp-form input[type="radio"], .cw99-rp input[type="checkbox"], .cw99-rp input[type="radio"] { width: 22px; height: 22px; flex: 0 0 22px; margin: 0 10px 0 0; accent-color: var(--cw99-blue, #2457c6); } .hp-field--radio label, .hp-field--checkbox label, .cw99-rp label:has(> input[type="checkbox"]), .cw99-rp label:has(> input[type="radio"]) { display: flex; align-items: center; min-height: 44px; gap: 0; cursor: pointer; } /* Ручка ресайза у textarea тянулась в обе стороны и ломала колонку. */ .hp-form textarea, .cw99-rp textarea { resize: vertical; } /* ── W17. Ползунок цены в фильтре снят ──────────────────────── Замер: .ui-slider (jQuery UI, 315×4px с двумя круглыми ручками) — единственный ползунок на всём сайте, и он растянут на диапазон 30–749 000 злотых: одним пикселем ручки это ~2400 zł. Для такого разброса он бесполезен, а рядом стоят честные поля «od / do», которые и работают. Поля остаются, ползунок уходит. */ .hp-form--listing-filter .ui-slider { display: none; } /* ── W18. Юридические ссылки подвала — один стиль ───────────── Замер: в ряду «Regulamin · Polityka prywatności · Zgłoś nielegalne treści · Ustawienia cookies» подчёркнута была ровно одна — «Ustawienia cookies» (единственный