/* ========================================================================== Podryad Common Styles Variables и primitives, переиспользуемые между /lk/ и /podryad/ ========================================================================== */ /* ----- 1. Variables ----- */ :root { /* Brand colors (vse-profi palette) */ --pc-color-primary: #4FC3F7; --pc-color-primary-pale: #E1F5FE; --pc-color-dark: #01103A; --pc-color-dark-navy: #081F5C; --pc-color-bg-light: #EFF9FF; --pc-color-bg-soft: #f5f7fb; /* MAX messenger icon gradient (135°, 3 стопа; RGB-тройки под rgb(var())) */ --pc-max-grad-start: 80, 79, 236; --pc-max-grad-mid: 122, 79, 236; --pc-max-grad-end: 155, 79, 236; /* Semantic colors */ --pc-color-success: #10b981; --pc-color-success-bg: #d1fae5; --pc-color-error: #ef4444; --pc-color-error-bg: #fee2e2; --pc-color-warning: #f59e0b; --pc-color-warning-bg: #fef3c7; --pc-color-info: var(--pc-color-primary); --pc-color-info-bg: var(--pc-color-primary-pale); /* Text colors */ --pc-color-text: #1f2937; --pc-color-text-muted: #6b7280; --pc-color-text-light: #9ca3af; /* Spacing */ --pc-spacing-xs: 0.25rem; --pc-spacing-sm: 0.5rem; --pc-spacing-md: 1rem; --pc-spacing-lg: 1.5rem; --pc-spacing-xl: 2rem; /* Typography */ --pc-font-size-xs: 0.75rem; --pc-font-size-sm: 0.875rem; --pc-font-size-base: 1rem; --pc-font-size-lg: 1.125rem; --pc-font-size-xl: 1.25rem; --pc-font-weight-normal: 400; --pc-font-weight-medium: 500; --pc-font-weight-semibold: 600; /* Borders */ --pc-border-radius: 0.375rem; --pc-border-radius-lg: 0.5rem; --pc-border-color: #e5e7eb; /* Transitions */ --pc-transition-fast: 150ms ease; --pc-transition-base: 200ms ease; } /* ----- 1b. Мост на брендовые токены ----- Раздел /podryad/ и /lk/ красится брендовой палитрой без переписывания 206 обращений к --pc-* (аудит Task 5, docs/plans/2026-08-06-pc-token-roles.md): старые имена получают новые значения, сами обращения в остальных CSS-файлах не трогаются. Scope на body — явная граница раздела и (0,1,0) против :root. Значения — только var(--c-*) из podryad-tokens.css, голых хексов быть не должно. Нецветовые --pc-* (spacing/font/radius/transition) намеренно не трогаем: токен радиуса управляет 13 объявлениями из ~75, вышло бы лоскутное одеяло. Три токена не переиспользуют семантически ближайший брендовый эквивалент 1:1 — см. комментарии у каждого ниже и у реанкора в cabinet.css:538. Селектор ниже — НЕ тот body.podryad-section, что чуть дальше в файле (сброс фона body, Phase 10.1, section «Podryad Header» — не трогаем и не вливаемся туда): это отдельный блок сразу после :root, как требует бриф Task 6. Он раньше в тексте файла, поэтому смоук-регекс (первое вхождение селектора, без флага g) находит именно его — проверка работает штатно. Дизайн: docs/plans/2026-08-06-product-reskin-design.md §3.2 Роли токенов: docs/plans/2026-08-06-pc-token-roles.md */ body.podryad-section { /* Бренд */ --pc-color-primary: var(--c-primary); --pc-color-primary-pale: var(--c-badge-fresh-bg); /* dark — 20 использований (аудит Task 5 §3/Приложение A): color 17, background 2, border-color 1. Здесь раньше стоял --c-navy-raise — он был подобран ради двух background-hover (.pc-btn--primary:hover ниже и .podryad-live-pill:hover в podryad-listing-archive.css), но не годится для доминирующих 17 color-использований: --c-ink (L 0.23) близко к исходному #01103A (L 0.195), а --c-navy-raise (L 0.30) заметно светлее — весь текст на этом токене посветлел бы. Токен возвращён к семантически ближайшему --c-ink; двум hover-правилам, которым нужен именно --c-navy-raise (пара «база / hover светлее», база — --c-navy L 0.24, см. dark-navy ниже), значение задано напрямую в их файлах, минуя мост — паттерн идентичен реанкору .pc-mode-tabs::-webkit-scrollbar-thumb (cabinet.css) на var(--c-divider), см. комментарий там же. */ --pc-color-dark-navy: var(--c-navy); --pc-color-dark: var(--c-ink); --pc-color-bg-light: var(--c-bg-tint); --pc-color-bg-soft: var(--c-bg); /* Статусы */ --pc-color-success: var(--c-badge-green-fg); --pc-color-success-bg: var(--c-badge-green-bg); --pc-color-error: var(--c-badge-red-fg); --pc-color-error-bg: var(--c-badge-red-bg); --pc-color-warning: var(--c-badge-orange-fg); --pc-color-warning-bg: var(--c-badge-orange-bg); --pc-color-info: var(--c-accent-info); --pc-color-info-bg: var(--c-badge-fresh-bg); /* Текст */ --pc-color-text: var(--c-text); --pc-color-text-muted: var(--c-text-muted); --pc-color-text-light: var(--c-text-soft); /* Границы. Сквозная замена безопасна для 20 из 21 использования (hairline border на белом фоне) — единственное исключение, background ползунка .pc-mode-tabs::-webkit-scrollbar-thumb (cabinet.css:538, аудит §5.2), переанкорено там напрямую на var(--c-divider), не через этот токен: у скроллбара другие требования к контрасту (сам по себе элемент управления, не hairline-рамка). */ --pc-border-color: var(--c-border); /* Полоса контента раздела — одна на всё (решение владельца 2026-08-12). До этого в разделе жили четыре разные ширины; замер на 1280: рама 1205, крошки и /lk/ 1100, страница объявления 720, лента Next 1080. Эталоном взята лента: 1080 — это --container-max, приехавший из источника правды podryad-web вместе с остальными токенами. --pc-band-outer — ВНЕШНЯЯ ширина обёртки. Контейнеры темы и рамы border-box, поэтому к полосе прибавляем её же паддинги; у Next контейнер content-box, и там max-width равен самой полосе. Числа сходятся, разной остаётся только арифметика box-sizing. ⚠️ 2026-08-19: полоса поднята с 1080 до 1348 (решение владельца). Эталоном по-прежнему остаётся --container-max из podryad-web — правка вносится там, здесь зеркало. Сверяет значения `node tools/smoke/grid-tokens-parity.mjs` из корня podryad-web (не tokens-parity.php: тот сверяет только имена и в этой среде не запускается — PHP на хосте нет, из php-контейнера веб не виден). Брейкпоинт 1120 при этом НЕ двигался: он переключает раскладку, а не край полосы. Полной ширины полоса достигает с вьюпорта 1396. */ --pc-band-outer: calc(var(--container-max) + 2 * var(--container-pad)); } /* ========================================================================== Полоса контента: контейнеры темы внутри раздела Bootstrap-контейнер темы задаёт 540/720/960/1140/1386 по брейкпоинтам (css-compl/main.css) и печатается ПОЗЖЕ плагина. Правило покрывает обёртки кабинета, страницы объявления и крошек разом: все три — темовский .container. ⚠️ `body` в селекторе несёт нагрузку, а не украшает: у кабинета к `.container` добавлен `.pd`, и темовское `.container.pd { padding }` имеет те же (0,2,0), что дал бы `.podryad-section .container`. При равной силе выигрывает тема — она печатается позже. Замер до правки: кабинет 1088@89 против рамы 1080@93. С `body` получается (0,2,1) — тема проигрывает. ========================================================================== */ body.podryad-section .container { max-width: var(--pc-band-outer); padding-left: var(--container-pad); padding-right: var(--container-pad); } /* Гутер bootstrap-сетки внутри полосы обнуляем. Все три шаблона раздела (кабинет, архив, объявление) — это `.row > .col-12`, то есть одна колонка на всю ширину: разделять гутеру нечего, он лишь даёт ряду отрицательные поля (−16px), а колонке — компенсирующий паддинг. Пока паддинг полосы был 20px, пара «−16/+16» умещалась внутри; на узких экранах полоса берёт 12px у рамы, и ряд вылезал за вьюпорт — замер на 320: горизонтальная прокрутка 4px, `.row` от −4 до 309. Обнуление снимает и это, и целый класс будущих расхождений «контент не по полосе». */ body.podryad-section .container > .row { --bs-gutter-x: 0; } /* ⚠️ Сужение --container-pad до 16px (≤768) и 12px (≤374) СНЯТО заходом «Шапка WP = шапка Next до пикселя» (2026-08-28, задача 2, решение владельца). История вопроса — чтобы следующая сессия не вернула тиры обратно как «потерянные»: сужение появилось, пока в мобильной гостевой шапке ещё жили бургер и текст кнопки ЛК — их суммарная ширина на 320px не умещалась в 296px бюджета при боковом поле 20px, и было решено ужать поле до 16/12. Заход «Нижняя панель» (2026-08-28, раньше этого) снёс бургер целиком и убрал кнопку ЛК из мобильной гостевой шапки — бюджет, ради которого сужали поле, испарился вместе с ними, но сама узкая пара 16/12 пережила ту правку нетронутой (там её не трогали намеренно, см. её же комментарий в истории файла). Замер (docs/plans/2026-08-28-header-parity-plan.md §1) сравнивал 390px, где у обеих систем 20px, и честно поймал разрыв — но выводить из него «Next держит 20px на ЛЮБОЙ ширине» было бы неверно. ⚠️ Токен НЕ константа: ниже 720px он 20px, с 720px и шире — 24px. Сам `:root` и `@media (min-width: 720px)` следом за ним объявлены НЕ в этом файле, а в `assets/css/podryad-tokens.css:144,147` — здесь только потребление через `var()`. Источник правды над обоими — `podryad-web/ app/styles/tokens.css:140,145`, откуда эти два числа зеркалятся в `podryad-tokens.css` дословно. Снятое сужение 16/12 было ДОПОЛНИТЕЛЬНЫМ слоем поверх этой пары, сужавшим именно 20px-ветку на двух подтирах — его снятие возвращает узкие ширины к паре 20/24 общего токена, а не схлопывает пару в одно число. Локальных сужений в разделе больше нет — гутер шапки (.podryad-header__inner, ниже по файлу), гутер контейнеров темы (body.podryad-section .container, выше) и вся полоса раздела везде читают ОДИН И ТОТ ЖЕ `--container-pad`, каким бы он ни был на конкретной ширине. Радиус поражения умышленно шире шапки — токен держит боковые поля всей полосы раздела (hero, стат-блок, кабинет, карточка объявления, подвал), это ожидаемое следствие решения владельца, а не дефект; отдельно проверено регрессией bottom-bar-ui.mjs и directions-menu-ui.mjs (задача 2), полный радиус — в задаче 3 плана. */ /* ----- 2. Buttons ----- */ .pc-btn { display: inline-block; padding: var(--pc-spacing-sm) var(--pc-spacing-lg); border: 1px solid transparent; border-radius: 15px; font-size: var(--pc-font-size-base); font-weight: var(--pc-font-weight-medium); line-height: 1.5; text-align: center; cursor: pointer; transition: all var(--pc-transition-base); text-decoration: none; } .pc-btn:disabled { opacity: 0.6; cursor: not-allowed; } .pc-btn:hover:not(:disabled) { transform: translateY(-1px); } /* Основная кнопка раздела — брендовый --c-primary (2026-08-11). Раньше была navy: карточка объявления и экран входа уже уехали на --c-primary своими скоупами, и держать примитив на другом цвете значило иметь две разные «главные кнопки» на соседних экранах. Пейволл (свой заход) получит тот же цвет — это сближение, а не поломка: у его кнопок собственная геометрия. */ .pc-btn--primary { background: var(--c-primary); color: var(--c-on-navy); border-color: var(--c-primary); } /* Hover — осветление фильтром, как в ленте (globals.css .btn:hover) и на карточке объявления. Прежняя пара «база --c-navy / hover --c-navy-raise» потеряла смысл вместе с переходом базы на --c-primary. */ .pc-btn--primary:hover:not(:disabled) { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-navy); filter: brightness(1.08); } .pc-btn--secondary { background: var(--c-surface); color: var(--c-ink); border-color: var(--c-border); } .pc-btn--secondary:hover:not(:disabled) { background: var(--c-bg-tint); border-color: var(--c-primary); } .pc-btn--danger { background: var(--c-surface); color: var(--pc-color-error); border-color: var(--pc-color-error); } .pc-btn--danger:hover:not(:disabled) { background: var(--pc-color-error); color: #fff; } /* ----- 3. Links ----- */ .pc-link { color: var(--pc-color-dark-navy); text-decoration: underline; transition: color var(--pc-transition-fast); } .pc-link:hover { color: var(--pc-color-primary); } /* ----- 4. Badges ----- Геометрия — язык бейджа карточки ленты Next (podryad-web/app/styles/globals.css:150-159): 12px/600, 4px 10px, --r-pill; на мобиле паддинг сужается до 4px 9px (FeedCard.module.css:37-41). Это буквально один и тот же бейдж на одних и тех же данных по обе стороны стыка «лента Next → карточка WP», поэтому форма берётся оттуда, а не изобретается здесь. */ .pc-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; font-size: 12px; font-weight: 600; /* line-height: 16px, а не normal и не безразмерное число — фолбэки шрифта асимметричны между лентой и WP. Лента подключает Onest через next/font с fallback-гранью, подогнанной под метрики шрифта (ascent/descent overrides); WP при провале self-hosted assets/fonts/onest-var.woff2 падает сразу на голый system-ui без такой подгонки. normal в обеих системах и правда даёт 24px — но только пока Onest фактически отрисован; если веб-шрифт в WP не догрузится, normal посчитается по метрикам system-ui и разъедет высоту сильнее прежнего хвоста в 0.19px. Абсолютные 16px не зависят от того, какой шрифт фактически отрисовался: 4px паддинг + 16px строка + 4px паддинг = 24px замером (не арифметикой) — совпадает с лентой независимо от фолбэка. Риск ленты (её собственный fallback) этой правкой не снимается — это её половина, не WP. Явная декларация обязательна в любом случае: без неё тема подставит через `*` свои 1.4em. */ line-height: 16px; border-radius: var(--r-pill); white-space: nowrap; } @media (max-width: 767px) { .pc-badge { padding: 4px 9px; } } /* Cabinet badges (view_type в истории просмотров) */ .pc-badge--free { background: var(--c-badge-green-bg); color: var(--c-badge-green-fg); } .pc-badge--subscription { background: var(--c-badge-fresh-bg); color: var(--c-badge-fresh-fg); } .pc-badge--limited { background: var(--c-badge-orange-bg); color: var(--c-badge-orange-fg); } /* Listing status badges. Тона — по маппингу podryad-web/lib/format.ts:28-39, который лента уже применяет к ЭТИМ ЖЕ именам классов: slots → green, slots-low → orange, slots-critical → red, expired и no-slots → dead. ⚠️ --no-slots меняется содержательно: был залитый красный #b91c1c с белым текстом, стал серым «мёртвым». Намеренно: «мест не осталось» — не ошибка, а исчерпание, и красный там конкурировал с --slots-critical («последнее место»), у которого сигнал противоположен по смыслу действия. */ .pc-badge--expired { background: var(--c-badge-dead-bg); color: var(--c-badge-dead-fg); } .pc-badge--no-slots { background: var(--c-badge-dead-bg); color: var(--c-badge-dead-fg); } .pc-badge--slots { background: var(--c-badge-green-bg); color: var(--c-badge-green-fg); } .pc-badge--slots-low { background: var(--c-badge-orange-bg); color: var(--c-badge-orange-fg); } .pc-badge--slots-critical { background: var(--c-badge-red-bg); color: var(--c-badge-red-fg); } /* Listing access badges. access-free остаётся bold filled (инверсия пастельных статус-бейджей выше); access-paid с 2026-08-19 сам стал пастельным — тот же токен --c-badge-fresh-*, что у status-бейджей (блок «По подписке» ниже), расхождение теперь только в имени класса, не в весе заливки. access-free скрыт с 2026-07-09 (TemplateHelpers::renderAccessBadge), правило держим — вернётся вместе с бейджем. */ .pc-badge--access-free { background: var(--c-badge-green-fg); color: var(--c-on-navy); /* Рамка переехала сюда из базы .pc-badge — это её единственный потребитель (кроме визуально неотличимого случая .pc-badge--featured ниже, где border-color всегда равен background). База должна совпадать по внешним размерам с .badge ленты Next (дизайн §3.2). */ border: 1px solid var(--c-badge-green-fg); } /* «По подписке» — синяя плашка с молнией: одежда бейджа ленты (`.badge--fresh`, podryad-web/app/styles/globals.css). С 2026-08-19 это один и тот же бейдж на всём пути «лента → карточка → страница объявления»; золотой градиент с короной (обмен дизайном с «Эксклюзивом», 2026-07-09) снят вместе с бейджем «Свежая», который он дублировал по смыслу — дизайн docs/plans/2026-08-19-badges-subscription-design.md. Геометрия — из базы .pc-badge выше; вес 700 — как у .badge--fresh. Расхождение теперь только в имени класса, а не в виде (дизайн §3.5). */ .pc-badge--access-paid { background: var(--c-badge-fresh-bg); color: var(--c-badge-fresh-fg); font-weight: 700; } .pc-badge--access-paid .pc-badge__bolt { width: 11px; height: 11px; flex-shrink: 0; } /* ⚠️ Молния рискует стать чернильной — тема красит каждый элемент правилом `*,p,li.div{…color:#01103A}` (css-compl/main.css), поэтому и получают СОБСТВЕННУЮ декларацию цвета, а `fill="currentColor"` читает именно её, а не цвет .pc-badge — наследование тут не работает никогда. Уже четвёртый случай этой грабли в проекте (VK-кнопка входа, иконки пейволла, тело страницы объявления) — форсируем заливку явно и на , и на : заранее не всегда очевидно, какой из двух узлов тема красит напрямую. */ .pc-badge--access-paid .pc-badge__bolt, .pc-badge--access-paid .pc-badge__bolt path { fill: var(--c-badge-fresh-fg); } /* Featured badge «Эксклюзив» (объявления заказчика) — Phase 11; с 2026-07-09 простой тёмно-синий. Корона тогда ушла к «По подписке» в обмен на золото; с 2026-08-19 короны в проекте не осталось вовсе (дизайн docs/plans/2026-08-19-badges-subscription-design.md §3.4). */ .pc-badge--featured { background: var(--pc-color-dark-navy); color: var(--c-on-navy); border-color: var(--pc-color-dark-navy); } /* ----- 5. Notices ----- */ /* Геометрия — как у статус-плашек формы входа (--r-md, 12/16), чтобы две плашки одного смысла на соседних экранах не отличались радиусом. Тона в базе заданы намеренно: тип нотиса приходит из transient и уходит в класс через esc_attr — незнакомый модификатор без базовых цветов дал бы бесцветный блок с полоской currentColor слева. Три известных типа ниже этот дефолт перекрывают. */ .pc-notice { margin: var(--pc-spacing-lg) 0; padding: 12px 16px; border-left: 4px solid; border-radius: var(--r-md); background: var(--c-badge-fresh-bg); border-color: var(--c-badge-fresh-fg); color: var(--c-badge-fresh-fg); font-size: 0.9375rem; line-height: 1.45; } /* Тона нотисов — те же три семейства статусов, что у бейджей: заливка bg, рамка и текст fg. Раньше текст был тремя голыми хексами (#065f46/#991b1b), не связанными с палитрой. */ .pc-notice--success { background: var(--c-badge-green-bg); border-color: var(--c-badge-green-fg); color: var(--c-badge-green-fg); } .pc-notice--error { background: var(--c-badge-red-bg); border-color: var(--c-badge-red-fg); color: var(--c-badge-red-fg); } .pc-notice--info { background: var(--c-badge-fresh-bg); border-color: var(--c-badge-fresh-fg); color: var(--c-badge-fresh-fg); } /* Чекбокс раздела. Размер и акцент объявлены ЗДЕСЬ, а не у потребителей: у класса тут же ниже живут состояния фокуса, то есть примитив и так наполовину был в этом файле — не хватало ровно внешнего вида, и он доставался дефолтом браузера (13×13, системный синий). 18×18 и --c-primary — числа НЕ новые: их завёл экран входа (`.pc-auth-form__consent-input`, заход «Эталонный экран входа» 2026-08-11). ⚠️ 2026-08-20: согласие на рекуррентные списания выглядело по-разному на экране входа и в кабинете — один и тот же по смыслу контрол, два вида. Найдено осмотром мобильного кабинета. Потребителей два: согласие в форме подписки (`widget-subscription.php`) и фильтр «Включая неактуальные» в архиве (`FiltersBar`). Вертикальное выравнивание сюда НЕ кладём — у первого бокс садится на первую строку двухстрочной подписи, у второго метка центрирована по одной строке; это разные задачи, и каждый потребитель решает её у себя. */ .pc-checkbox { width: 18px; height: 18px; accent-color: var(--c-primary); cursor: pointer; } /* ----- 6. Focus states ----- */ .pc-btn:focus-visible, .pc-link:focus-visible, .pc-checkbox:focus-visible { outline: 2px solid var(--pc-color-primary); outline-offset: 2px; border-radius: 2px; } .pc-btn:focus:not(:focus-visible), .pc-link:focus:not(:focus-visible), .pc-checkbox:focus:not(:focus-visible) { outline: none; } /* ----- 7. Responsive shared ----- */ @media (min-width: 768px) { .pc-btn { min-width: 120px; } .pc-notice { max-width: 600px; } } /* ----- 8. Modals (primitive) ----- Форс семейства шрифта (Finding 5 фикс-волны). ModalPrimitive и paywall-диалог вставляются в document.body (assets/js/podryad-listing.js: dialog.className = 'pc-modal pc-modal--', document.body.appendChild) — ВНЕ корней .podryad-archive / .podryad-cabinet, на которые заякорены форсы Task 7. Мост --pc-*/--c-* живёт на body и наследуется в модалку (цвета согласованы без правок), а шрифт — нет: без этого блока модалка рисовалась бы темовским Manrope, пока страница вокруг — Onest. Тот же двухблочный паттерн (форс тела + отдельный блок для заголовков), что на архиве и в /lk/ — прецеденты podryad-listing-archive.css:11-53, cabinet.css:9-31, podryad-single.css:9-20. Классы .pc-modal* не переименовывать — на них завязан JS (ModalPrimitive, PaywallFeature). */ .pc-modal, .pc-modal * { font-family: var(--font-body); } .pc-modal h1, .pc-modal h2, .pc-modal h3, .pc-modal h4, .pc-modal h5, .pc-modal h6 { font-family: var(--font-heading); } .pc-modal { /* Native : position fixed + top-layer через showModal(). Сбрасываем дефолтный border/padding/background браузера — фон рисует .pc-modal__inner. */ border: 0; padding: 0; background: transparent; max-width: 100%; max-height: 100%; } /* Подложка — брендовый navy с прозрачностью. `color-mix` вместо литерала rgba: в rgba() токен не подставить, а приём в проекте уже используется (свечение точки вкладки «Уведомления», cabinet.css). */ .pc-modal::backdrop { background: color-mix(in oklch, var(--c-navy) 50%, transparent); } .pc-modal__inner { background: var(--pc-color-bg-light); border-radius: var(--r-xl); padding: var(--pc-spacing-xl) var(--pc-spacing-lg); width: 100%; max-width: 600px; position: relative; box-sizing: border-box; } .pc-modal__close { position: absolute; top: var(--pc-spacing-lg); right: var(--pc-spacing-lg); width: 32px; height: 32px; padding: 6px; background: transparent; border: 0; cursor: pointer; color: var(--pc-color-text-muted); opacity: 0.5; transition: opacity var(--pc-transition-fast); line-height: 0; border-radius: 50%; } .pc-modal__close:hover, .pc-modal__close:focus-visible { opacity: 0.9; } .pc-modal__close:focus-visible { outline: 2px solid var(--pc-color-primary); outline-offset: 2px; } .pc-modal__close svg { width: 20px; height: 20px; } .pc-modal__header { margin-bottom: var(--pc-spacing-md); padding-right: 40px; /* отступ под кнопку-крестик */ } .pc-modal__title { margin: 0; font-size: var(--pc-font-size-xl); font-weight: var(--pc-font-weight-semibold); color: var(--pc-color-dark); line-height: 1.3; } .pc-modal__body { margin: 0 0 var(--pc-spacing-lg); color: var(--pc-color-text); line-height: 1.55; } .pc-modal__body p { margin: 0 0 var(--pc-spacing-sm); } .pc-modal__body p:last-child { margin-bottom: 0; } .pc-modal__footer { display: flex; flex-wrap: wrap; gap: var(--pc-spacing-md); align-items: center; margin-top: var(--pc-spacing-lg); } .pc-modal__footer:empty { display: none; } /* Responsive modal sizing */ @media (max-width: 767px) { .pc-modal__inner { padding: var(--pc-spacing-lg) var(--pc-spacing-md); max-width: calc(100vw - var(--pc-spacing-lg)); } .pc-modal__close { top: var(--pc-spacing-md); right: var(--pc-spacing-md); } .pc-modal__header { padding-right: 32px; } .pc-modal__title { font-size: var(--pc-font-size-lg); } } /* Reduced motion — placeholder для будущих transitions (10.4.2+) */ @media (prefers-reduced-motion: reduce) { .pc-modal, .pc-modal::backdrop { transition: none; } } /* ----- 9. Auth form (shared: modal + in-page) ----- */ /* Primitive переиспользуется в двух контекстах: auth-модалка на single и in-page форма на /lk/ (Phase 10.4.2.5). Мигрировано из listing.css. */ .pc-auth-form { display: flex; flex-direction: column; gap: var(--pc-spacing-md); } /* Интро шага 2 и «Входим…». Селектор одноклассовый намеренно: в состоянии «Входим…» формы в DOM уже нет, этот

— прямой потомок тела карточки. */ .pc-auth-form__intro { margin: 0; color: var(--c-text-muted); font-size: 0.9375rem; line-height: 1.5; } /* Подсказка «письмо могло уйти в спам» под интро шага ввода кода. Первая редакция (2026-09-04) была вторым приглушённым абзацем сразу под интро — и ровно поэтому не работала: две серые строки подряд глаз считывает как один блок служебной прозы и уезжает к полю ввода. Замер того же дня: 46 выданных кодов ни разу не отправили на проверку, то есть люди ждали письмо, лежавшее у них в спаме. Теперь это плашка со своим уровнем в иерархии. Подложка НЕЙТРАЛЬНАЯ, а не фирменная синяя: синюю занимает статус «Новый код отправлен» ниже, и после повторной отправки на экране оказались бы две одинаковые плитки подряд. Разница смысловая, а не декоративная — синяя говорит «сейчас произошло событие», эта стоит всегда и даёт совет. Цвет текста обычный, не приглушённый: подсказку надо читать, а не угадывать. */ .pc-auth-form__hint { margin: 0; padding: 10px 12px; border-radius: var(--r-md); background: var(--c-bg-tint); color: var(--c-text); font-size: 0.875rem; line-height: 1.45; } /* ⚠️ Цвет у обоих выделений задаётся ЯВНО, и это не дубль строки выше. Тема объявляет `*,p,li.div{color:#01103A}` — селектор `*` даёт каждому вложенному элементу СОБСТВЕННУЮ декларацию цвета, и наследование от родителя не срабатывает. Без этих правил жирные куски приехали бы чернильными от темы. Пятая встреча с этой граблей в проекте. */ .pc-auth-form__hint-lead, .pc-auth-form__hint-addr { font-weight: 600; color: var(--c-text); } /* Status-регион. Оформление привязано к МОДИФИКАТОРАМ, а не к :empty: правило `:empty` перестаёт срабатывать от единственного пробела, и на чистой загрузке появлялась бы пустая подложка. База — display:none, чтобы пустой регион не удваивал gap формы. */ .pc-auth-form__status { display: none; } .pc-auth-form__status--info, .pc-auth-form__status--error { display: block; margin: 0; padding: 10px 12px; border-radius: var(--r-md); font-size: 0.9375rem; line-height: 1.45; } /* Инфо («Новый код отправлен на …») — тот же тон, что у гостевой плашки на карточке объявления: фирменный, не тревожный. */ .pc-auth-form__status--info { background: var(--c-badge-fresh-bg); color: var(--c-badge-fresh-fg); } /* Ошибка — та же пара токенов, что у .pc-notice--error на этом же экране. Раньше здесь стоял литерал #991b1b, и две «ошибки» рядом отличались. */ .pc-auth-form__status--error { background: var(--c-badge-red-bg); color: var(--c-badge-red-fg); } /* showError кладёт текст в

без класса — правила ниже обязаны сохраниться. */ .pc-auth-form__status p { margin: 0; } .pc-auth-form__status p + p { margin-top: 4px; } .pc-auth-form__field { display: flex; flex-direction: column; gap: 6px; } /* Кегль/цвет задаются НА САМОМ текстовом узле: тема бьёт `*` напрямую, унаследованное с формы значение проигрывает. Так же ниже у подсказок. */ .pc-auth-form__label { font-size: 0.9375rem; font-weight: 600; line-height: 1.4; color: var(--c-ink); } /* Рамка поля — --c-divider, а не --c-border. Токена «рамка поля ввода» в бренде нет; единственная светлая рамка контрола в Next — литерал oklch(0.88 0.02 255) у select фильтров ленты, и --c-divider совпадает с ним по светлоте и тону (расхождение только по хроме, 0.005 — неразличимо). Прежний --pc-border-color светлее на 0.04 L — отсюда «выцветший» вид полей. 16px кегля — не вкус: на iOS Safari поле с меньшим кеглем зумит страницу при фокусе. */ .pc-auth-form__input { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--c-divider); border-radius: var(--r-sm); font-size: 1rem; line-height: 1.4; font-family: var(--font-body); color: var(--c-text); background: var(--c-surface); } .pc-auth-form__input::placeholder { color: var(--c-text-faint); } /* Единый фокус-паттерн Next: кольцо со смещением, без подкраски рамки — при offset 2px подкрашенная рамка читалась бы как второе кольцо. */ .pc-auth-form__input:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; } /* ⚠️ Специфичность (0,2,1) обязательна: тема правилом `textarea, input[type="text"], … { appearance:none; border-radius:0 }` (style.css, (0,1,1)) печатается ПОЗЖЕ плагина и обнуляет скругление поля OTP-кода. Тег в селекторе — не украшение, без него правило проигрывает. */ .podryad-cabinet input.pc-auth-form__input, .podryad-cabinet input.pc-auth-form__code { border-radius: var(--r-sm); } .pc-auth-form__submit { align-self: stretch; /* кнопка на всю ширину тела */ } /* Busy-состояние во время fetch — submit заблокирован. */ .pc-auth-form[aria-busy="true"] .pc-auth-form__submit { opacity: 0.7; cursor: wait; pointer-events: none; } /* Поле ввода OTP-кода — крупное, центрированное, с разрядкой. ⚠️ Класс несёт рамку и паддинги САМ, не полагаясь на парный .pc-auth-form__input: в ЛК («Способы входа» → привязка email) EmailLinkFeature создаёт поле кода только с этим классом. */ .pc-auth-form__code { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--c-divider); border-radius: var(--r-sm); background: var(--c-surface); color: var(--c-ink); text-align: center; font-size: 1.75rem; letter-spacing: 0.5em; font-weight: 600; padding-left: 0.5em; /* компенсация letter-spacing справа для центровки */ } .pc-auth-form__code:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; } /* Кнопка «Отправить код повторно» — вторичная. Эталона «светлая вторичная кнопка» в Next два (кнопка догрузки ленты и апселл статус-чипа), взят средний размер. min-height — страховка: JS создаёт кнопку пустой и наполняет текстом уже после вставки. */ .pc-auth-form__resend { align-self: center; min-height: 40px; margin-top: -4px; padding: 10px 18px; background: transparent; border: 1.5px solid var(--c-primary); border-radius: var(--r-md); color: var(--c-primary); font-size: 0.9375rem; font-weight: 600; line-height: 1.2; } .pc-auth-form__resend:hover:not(:disabled) { background: var(--c-bg-tint); transform: none; /* гасим лифт .pc-btn:hover — у вторичной он лишний */ } /* Первые 60 секунд шага 2 кнопка именно такая, поэтому состояние оформлено цветом, а не opacity: счётчик обязан оставаться читаемым. */ .pc-auth-form__resend:disabled { border-color: var(--c-divider); color: var(--c-text-soft); background: transparent; opacity: 1; cursor: default; pointer-events: none; } /* --- Success state --- */ .pc-auth-success { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--pc-spacing-sm); } .pc-auth-success:focus { outline: none; /* tabindex=-1 — программный фокус, без рамки */ } .pc-auth-success__icon { width: 48px; height: 48px; color: var(--pc-color-primary); } .pc-auth-success__icon svg { width: 100%; height: 100%; } .pc-auth-success__lead { margin: 0; font-weight: var(--pc-font-weight-semibold); } .pc-auth-success__hint { margin: 0; color: var(--pc-color-text-muted); font-size: var(--pc-font-size-base); line-height: 1.5; } .pc-auth-success__close { margin-top: var(--pc-spacing-sm); } /* Mobile */ @media (max-width: 767px) { .pc-auth-form__submit, .pc-auth-success__close { width: 100%; } } /* ----- 10. Auth card (in-page wrapper, e.g. /lk/) ----- */ /* Обёртка in-page auth-формы на маршруте /lk/ (Phase 10.4.2.5). Внутри — primitive .pc-auth-form (блок 9). */ /* Геометрия панели — та же, что у панели контактов на карточке объявления (podryad-single.css: --c-surface + 1px --c-border + --r-xl + --shadow-card). Одна и та же «карточка продукта» на обоих экранах. */ .pc-auth-card { max-width: 480px; margin: 40px auto; padding: 32px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-xl); box-shadow: var(--shadow-card); } .pc-auth-card__header { margin-bottom: 24px; text-align: center; } /* ⚠️ (0,2,1): cabinet.css задаёт `.podryad-cabinet h1 { margin-bottom: var(--pc-spacing-xl) }` со специфичностью (0,1,1) и перебивает одноклассовый заголовок — под ним оказывалось 32px вместо 8px, и подзаголовок визуально отрывался от h1, ломая иерархию блока. */ .podryad-cabinet h1.pc-auth-card__title { margin: 0 0 8px; font-family: var(--font-heading); font-size: 1.75rem; font-weight: 700; line-height: 1.2; color: var(--c-ink); } .pc-auth-card__subtitle { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--c-text-muted); } /* Ссылки карточки — «Подробнее» в согласии, ссылка в noscript, CTA ошибки. (0,1,1) против темы `a{color:#01103A}` (0,0,1): своего цвета у них не было, и они брали темовский тёмно-синий вместо брендового --c-link. ⚠️ Исключения обязательны: ссылки-кнопки (VK-вход, любая .pc-btn) — не текст, у них своя заливка и белая подпись. Без :not() правило подчёркивало кнопку «Войти через VK» и красило её текст в синий поверх синей пилюли — поймано живой проверкой сразу после первой редакции этого блока. */ .pc-auth-card a:not(.pc-btn):not(.pc-auth-social__vk) { color: var(--c-link); text-decoration: underline; text-underline-offset: 2px; } .pc-auth-card a:not(.pc-btn):not(.pc-auth-social__vk):hover { color: var(--c-link-hover); } .pc-auth-card a:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; border-radius: 2px; } /* Основная кнопка экрана — язык кнопки карточки объявления и ленты: --c-primary, Onest 600, --r-lg, тень, осветление на hover. Это закрывает расхождение, отмеченное в заходе по карточке: primary раздела оставался на --c-navy, а кнопка карточки уже уехала на --c-primary. Скоуп .pc-auth-card — глобальный примитив .pc-btn--primary не трогаем: он обслуживает ЛК и пейволл, у которых свои заходы. */ .pc-auth-card .pc-btn--primary { display: block; width: 100%; padding: 16px 20px; background: var(--c-primary); border-color: var(--c-primary); border-radius: var(--r-lg); box-shadow: var(--shadow-btn); color: var(--c-on-navy); font-family: var(--font-body); font-size: 1rem; font-weight: 600; line-height: 1.5; } .pc-auth-card .pc-btn--primary:hover:not(:disabled) { /* Фон и рамку переобъявляем явно: иначе выиграет .pc-btn--primary:hover с --c-navy-raise, и фильтр ляжет на другой цвет. */ background: var(--c-primary); border-color: var(--c-primary); filter: brightness(1.08); transform: none; } /* Согласие на обработку ПД: квадрат слева, текст колонкой справа. */ .pc-auth-form__consent { display: flex; align-items: flex-start; gap: 10px; margin: 0; cursor: pointer; } .pc-auth-form__consent-input { flex: 0 0 auto; width: 18px; height: 18px; /* (21px строки − 18px бокса) / 2 ≈ 2px — сажает квадрат на первую строку текста, а не на середину всего абзаца. */ margin: 2px 0 0; accent-color: var(--c-primary); cursor: pointer; } .pc-auth-form__consent-input:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; } .pc-auth-form__consent-text { font-size: 0.875rem; line-height: 1.5; color: var(--c-text-muted); } /* .pc-auth-card__body / __footer — структурные обёртки без своих стилей (padding карточки достаточен, footer пуст). DOM-маркеры для JS — в HTML-партиале. */ .pc-auth-card__noscript { margin: 16px 0 0; padding: 12px 14px; border-radius: var(--r-md); background: var(--c-badge-orange-bg); color: var(--c-text); font-size: 0.875rem; line-height: 1.5; } @media (max-width: 767px) { .pc-auth-card { margin: 20px 16px; padding: 24px 20px; } .pc-auth-card__title { font-size: 1.5rem; } } /* ----- 11. Social login (Telegram widget, Phase 12.2) ----- */ .pc-auth-social { margin-top: var(--pc-spacing-sm); text-align: center; } .pc-auth-social__divider { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--pc-color-text); font-size: var(--pc-font-size-sm); opacity: 0.7; } .pc-auth-social__divider::before, .pc-auth-social__divider::after { content: ""; flex: 1; height: 1px; background: rgba(8, 31, 92, 0.15); } .pc-auth-social__status { margin: 10px 0 0; min-height: 1.2em; font-size: var(--pc-font-size-sm); color: var(--pc-color-text); } /* Telegram-виджет — кросс-доменный iframe с прозрачным содержимым. В тёмной теме ОС браузер подкладывает ему тёмный UA-фон (color-scheme). Форсим светлую схему на контейнере И на самом iframe (only light — часть мобильных браузеров, особенно iOS Safari, игнорируют схему, заданную только на iframe), + прозрачный фон, чтобы за пилюлей-кнопкой не было чёрного прямоугольника. */ .pc-auth-social, .pc-auth-social iframe { color-scheme: only light; } .pc-auth-social iframe { background-color: transparent !important; } /* Belt-and-suspenders: клип iframe в скруглённый прямоугольник. Если браузер проигнорирует color-scheme и подложит тёмный UA-фон — чёрные углы за пилюлей обрезаются (overflow:hidden + border-radius). data-radius="20" на виджете держит радиус кнопки в тон обёртке. */ .pc-auth-social__tg { display: inline-block; vertical-align: middle; overflow: hidden; border-radius: 20px; line-height: 0; } /* VK ID (Phase 12.3) — кнопка-ссылка (серверный redirect-флоу, без JS). Геометрия в тон Telegram-виджету (large, data-radius=20): пилюля h≈40, r=20, белый текст + иконка. ⚠️ Фон НЕ ровно фирменный #0077ff: белым по нему выходит 4.13:1 при пороге AA 4.5:1 (замер в браузере 2026-08-18, кегль 15px, начертание 500). Поднять начертание до 700 здесь НЕ помогает: отношение от начертания не зависит, а исключение «крупный текст» с порогом 3:1 начинается с 18.66px при 700 — не с 14px. Взят #0a6ae0, на шаг темнее: 5.06:1. Тон не новый — он уже был выбран в этом же файле как hover этой же кнопки. Hover уведён на #0055bb (6.96:1), иначе состояния слились бы. */ .pc-auth-social__vk { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; margin-top: 10px; padding: 0 20px; border: none; border-radius: 20px; background: #0a6ae0; color: #fff; font-size: 15px; font-weight: 500; line-height: 1; text-decoration: none; vertical-align: middle; box-sizing: border-box; cursor: pointer; } .pc-auth-social__vk:hover, .pc-auth-social__vk:focus { background: #0055bb; color: #fff; text-decoration: none; } /* Тема vse-profi красит color через `* {color:#01103A}` — в т.ч. на самом , а fill=currentColor берёт color именно того элемента (path) → иконка темнела даже при color:#fff на svg. Поэтому задаём fill напрямую на svg И path (тема fill не трогает). */ .pc-auth-social__vk-icon { flex: 0 0 auto; } .pc-auth-social__vk-icon, .pc-auth-social__vk-icon path { fill: #fff; } /* ----- Типографика рамы ----- Тема (css-compl/main.css) задаёт `*, p, li.div { font-family:"Manrope"; font-size:16px; line-height:1.4em; color:#01103A }` — правило бьёт в КАЖДЫЙ элемент напрямую, поэтому наследование от контейнера проигрывает. Форсируем семейство на раме и её потомках; размеры и цвета задаются точечно ниже. Заголовки колонок подвала перебивают это своим --font-heading. Тот же паттерн: podryad-single.css:9-20, cabinet.css, podryad-listing-archive.css. */ .podryad-header, .podryad-header *, .podryad-footer, .podryad-footer * { font-family: var(--font-body); } .podryad-header h1, .podryad-header h2, .podryad-header h3, .podryad-footer h1, .podryad-footer h2, .podryad-footer h3, .podryad-footer h4, .podryad-footer h5, .podryad-footer h6 { font-family: var(--font-heading); } /* Тема внутри @media (max-width:767px) объявляет `footer a{text-decoration:none !important}` — это единственное место в разделе, где !important оправдан: перебить !important темы иначе нечем, а править тему запрещено (CLAUDE.md §7). */ @media (max-width: 767px) { .podryad-footer .pc-legal-links__item { text-decoration: underline !important; } } /* ========================================================================== Podryad Header (self-contained — без зависимостей от темы) ========================================================================== */ /* Сброс фона body на страницах раздела podryad (убирает зелёную полосу темы). Токен вместо прежнего литерала #fff — значение то же, но теперь фон раздела участвует в палитре. Страница объявления перекрывает его на --c-bg (body.single-podryad в podryad-single.css); /lk/ получит свой фон вместе с композицией в заходе по кабинету. */ body.podryad-section { background: var(--c-surface); } /* Task 4 (2026-08-07): вёрстка по таблице-спецификации брифа (замеры Next, адаптированные под светлую раму — task-4-brief.md в .superpowers/sdd/2026-08-07-frame-header-footer-plan/). Высота шапки НИГДЕ не задаётся явно — она производная от паддингов .podryad-header__inner и высоты кнопки ЛК, как в эталоне. Разметка — Task 3 (templates/partials/header.php). Главный брейкпоинт рамы — 1120px (переключение нав/логотипа/второй строки); тиры ≤768/≤374 ниже изначально (2026-08-07) были только компрессией размеров. ⚠️ Заходом «Нижняя панель» (2026-08-28) 768px тоже стал границей смены раскладки, не только размеров: на ней пропадает нижняя панель и появляются кнопка ЛК и строка-переключатель — то, что до заходов «Меню направлений» и «Нижняя панель» нёс бургер, которого в разделе больше нет ни у одной рамы. `padding: 0` ниже — явный, не «на всякий случай»: тема объявляет `header{padding:30px 0 15px}` голым элементным селектором ВНЕ медиазапроса (специфичность 0,0,1), и без собственного объявления паддинга у `.podryad-header` это правило темы выигрывает и добавляет 30/15px поверх паддингов `__inner`. Явный `padding: 0` перебивает тему той же специфичностью класса — не удалять при рефакторинге, иначе шапка молча раздуется чужими отступами (а в день X, когда тема уедет в отдельный репозиторий, наоборот незаметно похудеет). */ /* Тёмная рама (2026-08-11). Раньше шапка была светлой: логотип нёс пять путей #081F5C, и слово «ПРОФИ» пропало бы на navy. Решение — не CSS-перекраска (логотип вставляется , стили внутрь файла не достают), а второй файл assets/img/logo-on-dark.svg через Brand::logoOnDarkUrl(). Фон и токены те же, что у шапки ленты Next (SiteHeader.module.css:1-5), чтобы переход «лента → карточка» не менял вид рамы. */ .podryad-header { position: relative; width: 100%; /* Верхний safe-area добирает сама рама: с viewport-fit=cover (templates/partials/header.php) страница заходит под кромку экрана, и без этого паддинга полоса статус-бара в режиме приложения осталась бы цвета body, а не рамы. Селектор общий — правило нужно ОБЕИМ рамам, тёмной гостевой и светлой продуктовой. На устройствах без выреза env() = 0. Зеркало — .header в SiteHeader/ProductHeader.module.css фронта Next. */ padding: env(safe-area-inset-top) 0 0; background: var(--c-navy); box-shadow: var(--shadow-header); margin: 0; box-sizing: border-box; } .podryad-header * { box-sizing: border-box; } /* Горизонтальный гутер — из общей полосы раздела (см. блок «Полоса контента» ниже). Прежние 1440/30 отменены решением владельца 2026-08-12: рама была шире контента под ней на 53px с каждой стороны, и это первое, что видно глазом. Вертикальный паддинг и gap — из спецификации, их не трогаем. */ .podryad-header__inner { max-width: var(--pc-band-outer); margin: 0 auto; display: flex; align-items: center; padding: 14px var(--container-pad); gap: 12px; } /* ----- Skip-link ----- Вне фокуса вынесен за пределы экрана (НЕ display:none — иначе не получит фокус с клавиатуры); на :focus-visible возвращается в видимую область. ⚠️ ИСКЛЮЧЕНИЕ из инварианта «вся рама на navy»: плашка остаётся светлой осознанно. Она всплывает поверх тёмной шапки по Tab, и белое на navy заметнее, чем navy на navy. Это решение, а не пропущенный при перекраске узел — не «чинить» вслепую. */ .podryad-header__skip { position: absolute; top: -9999px; left: 0; z-index: 20; padding: 10px 16px; background: var(--c-surface); color: var(--c-ink); border-radius: 0 0 var(--r-sm) 0; font-size: 14px; font-weight: 600; text-decoration: none; } .podryad-header__skip:focus-visible { top: 0; } /* ----- Logo ----- Локап = инлайновый знак + слово живым текстом. Всё считается от одного кегля (--pl-size), который партиал ставит инлайном: высота знака 1.1×кегль, зазор 0.45×кегль. Пропорция локапа 5.618:1 (против 7.44:1 у прошлого знака) — размерные правила пересчитаны, а не подогнаны; метрики и бюджет ширины мобильной шапки — docs/plans/2026-08-18-logo-vivilist-design.md §3. */ .podryad-logo { --pl-size: 20px; display: inline-flex; align-items: center; gap: calc(var(--pl-size) * 0.45); flex: 0 0 auto; text-decoration: none; transition: opacity 120ms ease-out; } .podryad-logo__mark { height: calc(var(--pl-size) * 1.1); width: auto; display: block; flex: none; } .podryad-logo__word { font-family: var(--font-heading); font-weight: 800; font-size: var(--pl-size); line-height: 1; letter-spacing: -0.02em; white-space: nowrap; color: var(--c-navy); } /* font-family повторён явно, не унаследован: бланкетное правило рамы `.podryad-header *, .podryad-footer * { font-family: var(--font-body) }` (см. блок «Типографика рамы» выше) бьёт КАЖДЫЙ элемент напрямую, а не только неокрашенные — .podryad-logo__word защищён своим собственным font-family, а этот span, объявляя только color, ничем не перебивал бланкет и наследования тут нет: побеждало Onest вместо Manrope. line-height добавлен 2026-08-21 по той же причине и в ту же дыру: тема раздаёт `line-height: 1.4em` голым `h1..h6,a,i,li,b,strong,span,div`, и собственная декларация темы у этого span'а била line-height: 1 родителя. Строчный бокс слова раздувался с 20 до 28px (18 → 25.2 на мобильном тире), и весь локап мерился на 6px выше эталона — 28 против 22. Глифы при этом стояли на месте (локап центрируется в строке шапки), поэтому дефект не было видно глазом — его видно замером, и именно он ломал арифметику высоты рамы. Ширины правка не меняет: кегль не трогаем. */ .podryad-logo__accent { font-family: var(--font-heading); line-height: 1; color: var(--c-primary); } .podryad-logo--on-dark .podryad-logo__word { color: var(--c-on-navy); } .podryad-logo--on-dark .podryad-logo__accent { color: var(--c-accent-on-navy); } /* Вариант mono документирован в partial'е (templates/partials/logo.php) и печатает знак с fill="currentColor" — но правила `.podryad-logo--mono` не было ни одного, поэтому слово оставалось двухцветным (--c-navy + --c-primary), молча нарушая контракт варианта. Источник — Next (Logo.module.css `.mono .word { color: currentColor }`); __accent перебивается явно, а не через наследование от __word — в отличие от Next, здесь __accent красится собственным безусловным правилом выше (не только внутри --on-dark), и наследование его не достанет. */ .podryad-logo--mono .podryad-logo__word, .podryad-logo--mono .podryad-logo__accent { color: currentColor; } .podryad-logo:hover { opacity: 0.85; } .podryad-logo:active { opacity: 0.7; } .podryad-logo:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 4px; } .podryad-logo--on-dark:focus-visible { outline-color: var(--c-on-navy); } .podryad-header__logo { flex: 0 0 auto; } /* ----- Nav (раскрывается на ≥1120, см. media-блок ниже) ----- */ .podryad-header__nav { display: none; } /* Пункты меню на navy: приглушённый --c-nav-link, активный и hover — белый. Ровно как в ленте (SiteHeader.module.css:126-138): меняется только цвет, без жирного начертания и подчёркивания — иначе геометрия меню плясала бы от страницы к странице. */ .podryad-header__nav-link { color: var(--c-nav-link); text-decoration: none; } .podryad-header__nav-link.is-current, .podryad-header__nav-link:hover, .podryad-header__nav-link:focus-visible { color: var(--c-on-navy); } /* ----- ЛК-кнопка ----- Текст — белый (--c-on-navy), рамка --c-navy-border: та же пара, что у кнопки ЛК в шапке ленты (SiteHeader.module.css:31-45). До перевода рамы на navy цвет был --c-ink. Текст стилизуется явно, не через currentColor от .podryad-header__lk: тема красит `*` (в т.ч. span) напрямую — прецедент трижды задокументирован в проекте (Phase 12.3 VK-кнопка, Task 6 фундамента рескина). ⚠️ Рамка --c-navy-border даёт на navy ≈1.79:1 — ниже 3:1, которые WCAG 1.4.11 требует от границ, ОПОЗНАЮЩИХ элемент управления. Здесь это допустимо и принято осознанно: кнопка опознаётся по белой подписи «Личный кабинет» (16.63:1), рамка лишь очерчивает форму. Тот же токен и тот же контраст — у кнопки ЛК в ленте, менять его пришлось бы в обеих системах сразу; разбор в docs/decisions.md. ⚠️ Заходом «Нижняя панель» (2026-08-28) кнопка уходит с мобильного: её работу забрала правая ячейка нижней панели, а две одинаковые двери на одном экране — то самое задвоение, ради снятия которого заход делался. Разметка остаётся: с 768px панели нет (см. блок ниже), и кнопка снова единственный вход — display возвращается к inline-flex тем же брейкпоинтом. ⚠️ Иконка человечка (18×18, `.podryad-header__cabinet-icon`) и её `gap: 8px` сняты заходом «Шапка WP = шапка Next до пикселя» (2026-08-28, задача 2) — в эталоне Next кнопка текстовая, без иконки, и ровно эти 18 + 8 = 26px давали лишнюю ширину кнопки на 900 и 1348 (docs/plans/2026-08-28-header-parity-plan.md §1–2). `gap` убран вместе с иконкой: у флекс-контейнера с единственным дочерним узлом он ничего не раздвигает, оставлять его — мёртвый код. Текст «Личный кабинет» остаётся — доступное имя ссылки терять нельзя, решение владельца — убрать иконку из WP, а не добавлять её в Next (Next остаётся эталоном). */ .podryad-header__lk { position: relative; display: none; align-items: center; flex: 0 0 auto; margin-left: auto; padding: 8px 14px; border: 1px solid var(--c-navy-border); border-radius: var(--r-sm); /* Цвет задан и самой ссылке, хотя её текст лежит во вложенном .podryad-header__cabinet-text со своим цветом. Без этой строки сам остаётся выкрашенным темовским `*{color:#01103A}` — сейчас невидимо (собственного текстового узла у ссылки нет), но любой будущий узел внутри неё, положившийся на currentColor, тут же уйдёт в тёмно-синий на navy. Заряженная мина, снятая заранее. */ color: var(--c-on-navy); font-size: 13px; font-weight: 600; /* ⚠️ line-height: 17px — заход «Шапка WP = шапка Next до пикселя» (2026-08-28, задача 2). Next оставляет `normal`, WP всегда фиксировал число против бланкетного `line-height: 1.4` темы — но здесь числа не было вовсе, и кнопка ловила 18.2/18.9px вместо 17 на 900/1348 (высота 36.2/38.9 вместо 35/37). 17px — то, что Next рендерит СЕГОДНЯ при `normal`: 37 = 9+9 паддинга + 1+1 рамки + 17 (на 1348; на 900 те же 17 при паддинге 8 дают 35). Фиксируется числом, не `normal`, в обеих системах (зеркало — SiteHeader.module.css, `.lk`): цепочки фолбэка шрифта у систем разные (Next — Manrope через next/font с подгонкой по метрикам, WP падает на system-ui), на `normal` совпадение держалось бы только на том, что оба раза догрузился один и тот же шрифт — на этом уже обжигались в заходе «Порядок и геометрия бейджей». */ line-height: 17px; white-space: nowrap; text-decoration: none; transition: background-color 0.15s ease; } .podryad-header__lk:hover, .podryad-header__lk:focus-visible { background: var(--c-navy-raise); } /* ⚠️ line-height: 17px повторён ЗДЕСЬ, а не унаследован от .podryad-header__lk выше: текст живёт во вложенном , а тема красит `span` line-height 1.4em НАПРЯМУЮ (тот же приём, каким она уже красит цвет — комментарий у .podryad-header__lk про currentColor). Без этой строки собственный `line-height: 17px` родителя не помогает: — inline-flex с align-items: center, и его высоту по кросс-оси задаёт САМЫЙ ВЫСОКИЙ flex-child, а не line-height контейнера — им и оказывался span с чужими 18.2/18.9px (13px×1.4 и 13.5px×1.4), раздувая кнопку до 36.2/38.9 вместо 35/37. Заход «Шапка WP = шапка Next до пикселя», 2026-08-28, задача 2. */ .podryad-header__cabinet-text { color: var(--c-on-navy); font-size: 13px; line-height: 17px; white-space: nowrap; } @media (min-width: 768px) { .podryad-header__lk { display: inline-flex; } } /* ----- Фокус с клавиатуры на тёмной раме ----- До перекраски рама полагалась на дефолтный контур браузера: на белом фоне он читался, на navy — сливается (Chrome рисует тёмное кольцо с тонкой светлой каймой). Общий фокус-стиль плагина (`outline: 2px solid var(--pc-color-primary)`, блок 6) сюда не годится по той же причине: после моста это --c-primary, тёмно-синий на тёмно-синем. Белый контур со смещением — единственный вариант, читаемый на navy при любом состоянии кнопки. Подвал перечислен отдельно: он на --c-footer-bg, ещё темнее шапки. ⚠️ Селектор шапки заскоуплен на --guest намеренно: у продуктовой рамы фон белый, и белый контур на ней был бы невидим — ровно та же ошибка, от которой это правило спасало на navy, только зеркальная. Её фокус — ниже, в блоке продуктовой рамы. Подвал остаётся без скоупа: он тёмный в обоих режимах. */ .podryad-header--guest a:focus-visible, .podryad-header--guest button:focus-visible, .podryad-footer a:focus-visible { outline: 2px solid var(--c-on-navy); outline-offset: 2px; border-radius: 2px; } /* ----- Брейкпоинт рамы: 1120px (единственный) ----- */ @media (min-width: 1120px) { .podryad-header__inner { gap: 20px; } /* Прежние 40px до логотипа возвращаем точечно: бюджет строки пересобран под кнопку «Направления» и подпись направления (зеркало `SiteHeader.module.css:163-170`) — общий `gap: 40px` раздвигал бы и кнопку с подписью на те же 40px, хотя хендофф просит 20. ⚠️ Скоуп на --guest ОБЯЗАТЕЛЕН: `.podryad-header__logo` — общий класс, его же несёт продуктовая рама (`chrome-product.php`), а её собственный `gap: 36px` у `.podryad-header--product .podryad-header__inner` (строка ниже, брейкпоинт 768px) margin-right логотипа не перекрывает — для этого свойства там нет ни одного правила. Без --guest 20px протекли бы в залогиненную шапку и раздвинули зазор логотип→меню с 36 до 56 (регрессия ре-ревью финального захода направлений, найдена замером продуктовой рамы, которую общий смоук не трогает). */ .podryad-header--guest .podryad-header__logo { margin-right: 20px; } .podryad-header__nav { display: flex; align-items: center; gap: 28px; font-size: 14px; font-weight: 500; } .podryad-header__lk { font-size: 13.5px; padding: 9px 18px; } .podryad-header__cabinet-text { font-size: 13.5px; } .podryad-header--guest .podryad-header__logo { --pl-size: 28px; } } /* ----- Мобильные тиры сжатия ----- Паддинги/gap 12px/8px — смысл коммита 18b2d23 сохранён (буквальные строки — нет: состав другой, мессенджеры ушли, пришёл бургер). Логотип на этом тире — 18px, а не прежние 20px: шов с эталоном Next (`ProductHeader.module.css` `.brand { --pl-size: 18px }`). ⚠️ Прежняя редакция этой строки утверждала «на том же max-width: 767px» — и была неверна дважды: сам блок стоял на 768, а у эталона было 767. Обе границы сведены к 767.98 (правка 2026-08-21), логотип уехал в свой блок ниже. До перевода на 18px WP держал здесь 20px, а на ≤374px — отдельный шаг 16px, и оба расходились с Next: на 390px локап WP был крупнее ленты Next, на 360px — мельче (замеры и разбор — отчёт этого захода). ⚠️ Кнопка ЛК на этом диапазоне (≤767.98) не видна вовсе — с заходом «Нижняя панель» (2026-08-28, раньше этого) её роль ниже 768px несёт правая ячейка нижней панели, сама кнопка держит `display: none` (см. комментарий у `.podryad-header__lk` выше по файлу). Прежде здесь стояло другое: кнопка оставалась видимой иконкой, а текст «Личный кабинет» визуально прятался клипом ради сохранения доступного имени для скринридера. Оба факта устарели заходом «Шапка WP = шапка Next до пикселя» (задача 2, финальное ревью): иконку убрали, а правило клипа — мёртвый код (клипать нечего, кнопка и так не в потоке на этом диапазоне) и удалено целиком из `@media (max-width: 768px)` ниже по файлу вместе с дефектом ровно на 768px, который оно создавало (граница `min-width: 768px` у `.podryad-header__lk` совпадала с границей клипа `max-width: 768px` день в день, и на самом 768px кнопка становилась видимой пустой рамкой без иконки и без текста). */ /* ⚠️ Логотип живёт на СВОЁМ брейкпоинте — 767.98, а не 768 соседнего блока рамы — и это не разнобой: границы намеренно НЕ совпадают. Кегль логотипа обязан переключаться вместе с САМОЙ РАМОЙ, то есть на границе `min-width: 768px`, которая открывает меню продукта и правую часть. Пока обе границы (эта и рамы) стояли на 768, ровно на 768px получалась химера: десктопная рама с мобильным логотипом — 19.8px локапа против 22 у эталона (поймано смоуком chrome-parity.mjs, когда у замера убрали компенсацию полосы прокрутки и он впервые увидел настоящие 768). Число 767.98, а не 767: между целым 767 и min-width 768 остаётся дробная щель (767.5 — обычная ширина при браузерном зуме), в которой не срабатывает ни одно правило. Тот же приём и то же число — у зазоров под таб-баром ниже по файлу. ⚠️ Здесь раньше стояло другое обоснование границы, снятое финальным ревью захода «Шапка WP = шапка Next до пикселя» (2026-08-28) как неверное: «гутер полосы (--container-pad, ≤768) обязан совпасть с гутером ленты Next, у которой на 768 ещё 16px — поэтому там ровно 768». Оно ошибалось вдвойне. Тира ≤768 у токена `--container-pad` больше нет — сужение 16/12 снято тем же заходом (см. комментарий у --container-pad выше по файлу, строки ~178-201), и на всех ширинах токен читает пару 20/24 от границы 720px, не 768. А 16px у Next — не свойство токена, а осознанное решение спеки самой ЛЕНТЫ (`app/(app)/podryad/page.module.css` §9.6), к раме и к `--container-pad` отношения не имеющее. Не возвращать это обоснование и не сужать 767.98 обратно до 768 «чтобы совпало с Next» — это тот самый шаг, который снова сведёт обе границы в химеру выше. */ @media (max-width: 767.98px) { /* ⚠️ Заход «Шапка WP = шапка Next до пикселя» (2026-08-28, задача 2): тир был ОБЩИЙ для обеих рам (гостевой и продуктовой) — и это была ошибка парности, не читаемая по одной шапке отдельно. У Next мобильный --pl-size не совпадает между рамами: гостевой SiteHeader.module.css на мобильном НИЧЕГО не переопределяет (значит держит базовые 20px Logo.module.css), а продуктовый ProductHeader.module.css переопределяет ровно на 18px (`.brand { --pl-size: 18px }`, ≤767.98px). Замер (docs/plans/2026-08-28-header-parity-plan.md §1) сравнивал ГОСТЕВЫЕ шапки и справедливо показал разрыв «WP 18 против Next 20» — но общий для рам тир был скроен по продуктовой стороне пары. Правка сузила правило до --product: гостевая рама падает на базовые 20px .podryad-logo (следствие по цепочке — слово 20px, знак 21.3×22, высота шапки 50 вместо 47.8), продуктовая остаётся на 18px как и раньше — эту пару проверяет chrome-parity.mjs, продуктовая рама прямо выведена из периметра этого захода (план §6 «Границы захода»), трогать её нельзя. */ .podryad-header--product .podryad-header__logo { --pl-size: 18px; } /* Companion-правило к --pl-size выше, тот же приём, что в Next (`.brand :global(.pl-word)` того же тира). Трекинг слова зависит от кегля: -0.02em на полосе 20–34px, -0.015em на 16–19px (базовое .podryad-logo__word задаёт первую — верна она только для десктопных 28px/20px). Кегль 18px этого тира попадает во вторую полосу, и без переопределения слово ехало бы с чужим межбуквенным интервалом. Скоуп на --product обязателен той же логикой, что и у --pl-size выше — гостевая рама на этом тире держит 20px, для которых верна базовая -0.02em из .podryad-logo__word, переопределять нечего. */ .podryad-header--product .podryad-header__logo .podryad-logo__word { letter-spacing: -0.015em; } } /* ⚠️ Здесь раньше стоял блок `@media (max-width: 768px)` с двумя правилами — оба удалены финальным ревью захода «Шапка WP = шапка Next до пикселя» (2026-08-28) как мёртвый код и как источник дефекта. `.podryad-header__inner { padding: 14px var(--container-pad) }` дословно повторял базовое правило (см. `.podryad-header__inner` выше по файлу, строки ~1199-1206) — печать одного и того же значения дважды ничего не меняла, это был труп сужения 16px, снятого этим же заходом. `.podryad-header__cabinet-text { … clip: rect(0,0,0,0) … }` был вторым концом дефекта ровно на 768px: `.podryad-header__lk` показывается с `min-width: 768px` (inline-flex), а этот клип срабатывал до и ВКЛЮЧАЯ 768px (`max-width: 768px`) — на самом 768px кнопка становилась видимой, а её единственный ребёнок (текст «Личный кабинет») схлопывался в 1×1 и выпадал из потока: пустая рамка без иконки (иконку убрала задача 2 этого же захода) и без текста. Оба конца дефекта сходились на одном и том же целом числе не случайно — такую пару стоит искать намеренно при любой будущей паре `min-width`/`max-width` на одной границе. Само правило клипа при этом оказалось МЁРТВЫМ, а не просто смещённым: ниже 768px `.podryad-header__lk` держит `display: none` целиком (роль несёт правая ячейка нижней панели, заход «Нижняя панель», 2026-08-28) — клипать там уже нечего, кнопки нет в потоке. От 768px и выше клип не должен был применяться никогда — там должен быть виден полный текст, как в эталоне Next. Единственная ширина, где правило хоть что-то делало, — ровно 768px, и там оно ломало кнопку. Честнее было снять клип совсем, а не просто развести границы до 767.98/768.02: обоснование клипа («иначе ссылка потеряет доступное имя, иконка помечена aria-hidden») тоже умерло вместе с иконкой (см. комментарий у `.podryad-header__lk` выше по файлу) — а разведение границ сохранило бы правило без единой причины его иметь. */ /* Узкие экраны (≤374px: компактные Android, iPhone SE/mini-класс до 375) — дожимаем гэп между логотипом и остальным содержимым шапки, чтобы она гарантированно влезала вплоть до 320px (расчёт бюджета — в отчёте задачи). Боковые поля здесь больше НЕ дожимаются отдельно — читают тот же двухступенчатый `--container-pad`, что и вся полоса раздела (см. комментарий у `--container-pad` выше по файлу, строки ~178-201); прежний локальный паддинг `14px var(--container-pad)` этого блока удалён финальным ревью захода «Шапка WP = шапка Next до пикселя» как дословный дубль базового правила `.podryad-header__inner` (строки ~1199-1206) — печать того же значения второй раз ничего не меняла. Логотип здесь больше НЕ уменьшается: раньше тир держал отдельный шаг --pl-size: 16px (и парный трекинг), но это расходилось с эталоном Next, у которого ниже 767px дальнейших тиров логотипа нет вовсе — 18px тира ≤767.98 выше (со своим трекингом, блок «Мобильные тиры сжатия») несёт весь диапазон 320–767.98px без исключения, но с этим же заходом — только для продуктовой рамы (--product): гостевая рама на этом диапазоне держит базовые 20px `.podryad-logo` (у эталона гостевой шапки Next своего мобильного тира --pl-size тоже нет). Снятие шага 16px расширяет бюджет ширины логотипа на 320px, а не сужает его — переполнения не даёт (проверено, отчёт этого захода). */ @media (max-width: 374px) { .podryad-header__inner { gap: 8px; } } /* ========================================================================== ПРОДУКТОВАЯ РАМА (залогиненный) — светлая шапка, зеркало ProductHeader фронта Next (components/app/ProductHeader.module.css). Разметка — templates/partials/chrome-product.php, развилка — Frontend\Chrome. Всё в этом блоке заскоуплено на модификатор --product и потому не может задеть гостевую раму: гостевые правила выше идут одноклассовой специфичностью (0,1,0), продуктовые — (0,2,0) и выигрывают независимо от порядка печати. Ничего из гостевого блока переписывать не пришлось, кроме скоупа фокуса (см. комментарий там). ========================================================================== */ /* Поверхность и граница — буквально из эталона (.header): белый фон и тонкая линия вместо тени. `box-shadow: none` обязателен явно: базовое `.podryad-header` несёт --shadow-header, и без сброса светлая рама висела бы над контентом с тёмной подложкой, которой в эталоне нет. */ .podryad-header--product { background: var(--c-surface); border-bottom: 1px solid var(--c-border); box-shadow: none; } /* Полоса та же, что у всего раздела (--pc-band-outer) — её не трогаем, иначе шапка разъедется с контентом под ней. Меняются только вертикальные паддинги: 12px против гостевых 14px, как в эталоне. ⚠️ min-height — ПОЛ, а не высота, и он остаётся нужен даже после появления правой части (заход 2026-08-21). Высота эталона не постоянна: её держит самый высокий узел справа, а он разный по ролям — апсейл-чип 37px (9+9 паддинги + 1+1 рамка + строка 17) даёт 12+37+12+1 = 62, а у NEWBIE и SUBSCRIBER чип всего 33px, выше него аватар 34 → 12+34+12+1 = 59. Наш локап логотипа ниже обоих, поэтому без пола шапка на ролях с низким чипом села бы до 12+34+12+1 — то есть ровно в 59, и пол там не связывает. Он работает в единственном случае: если правая часть не отрисовалась вовсе (сбой сессии) — тогда шапка держит 59, а не схлопывается к логотипу. ⚠️ НЕ поднимать 58 → 61 «чтобы совпало с 62»: это зафиксировало бы ветку 62 для всех ролей, и NEWBIE/SUBSCRIBER стали бы на 3px выше эталона. Значения min-height на 1px меньше целевой высоты: 1px добирает border-bottom (box-sizing: border-box в границу паддинг-бокса не включает рамку при расчёте min-height). */ .podryad-header--product .podryad-header__inner { padding: 12px 16px; min-height: 50px; } /* ⚠️ Паддинг здесь НЕ читает --container-pad, хотя выглядит кандидатом на токен — заход «Шапка WP = шапка Next до пикселя» (2026-08-28, фикс финального ревью) сначала перевёл это правило на токен и этим случайно задел продуктовую раму, которую план прямо обещал не трогать (план §6 «Границы захода»): у продуктовой рамы своя сетка, дословно совпадающая с эталоном (`ProductHeader.module.css` `.inner { padding: 12px 16px }` до 1120px), а не с полосой раздела. Токен там 20px ниже 720 и 24px от 720 — ни одно из двух значений не совпадает с 16px эталона нигде до 1120px. Литералы возвращают раму к эталону; гостевая рама и полоса раздела по-прежнему читают токен (не тронуты). */ @media (min-width: 1120px) { .podryad-header--product .podryad-header__inner { padding: 12px 24px; } } /* Логотип — вариант on-light партиала logo.php. Собственного кегля не задаём: базовый --pl-size: 20px из .podryad-logo несёт десктоп продуктовой рамы (эталон Next там тоже 20px, десктопные 28px поднимаются только у гостевой). Мобильный тир 18px — свой, скоуплен на --product (см. комментарий у @media (max-width: 767.98px) выше, заход «Шапка WP = шапка Next до пикселя» 2026-08-28): у гостевой рамы своего мобильного тира больше нет, она держит базовые 20px на всех ширинах, как и эталон. */ /* ----- Меню продукта ----- Три пункта максимум, поэтому бургер не нужен вовсе: до 768px меню прячется, и его роль забирает нижний таб-бар (эталонная развилка). Брейкпоинт 768 — свой, гостевой 1120 не трогаем: там пять пунктов маркетингового меню плюс кнопка ЛК, у них другой бюджет ширины. */ .podryad-header__product-nav { display: none; } .podryad-header__product-link { /* Цвет задаём каждому пункту явно, а не наследованием от