/* Start:/local/templates/welle/css/kak-eto-rabotaet.css?178966500415989*/ /* ========================================================================================== * ФОРМА ЭКРАНА 11 — РАЗДЕЛ «КАК ЭТО РАБОТАЕТ», главная страница (рубрикатор). * * Постановка: «2026-09-17 — bitrix-development — Акт 2: страница-рубрикатор „Как это * работает" в бой». Подключается со страницы /kak-eto-rabotaet/ через SetAdditionalCSS — * тем же приёмом, что contacts.css и usloviya-raboty.css на соседних экранах. * * ═══ ОТКУДА ВЗЯТО ═══ * Замороженный эталон, принятый владельцем 17.09.2026 в 16:34 («Прототип главной страницы * блога … версия 6. Принимаю полностью»): * Design/etalony-zamorozhennye/kak-eto-rabotaet-rubrikator/ * KakEtoRabotaet_rubrikator__2026-09-17_1634__sha256-a4ba1dd2…904c7b6b.dc.html * Правила ЭКРАНА А — строки 564–675 эталона, знак в знак. Блоки узких ширин — строки * 806–831, оттуда взяты только правила ЭКРАНА А (правила статьи не поехали: у неё свой * экран, своя заморозка и свой такт кода). * * 🔴 ИСТОЧНИК — ЗАМОРОЖЕННЫЙ ФАЙЛ, А НЕ СБОРЩИК ПРОТОТИПА. Сборщик * Design/prototypes/2026-09-17 — как это работает, разрез/общее.py после заморозки ушёл * вперёд: в нём появились правила `.kr-go__t` (подчёркнутый анкор строки-перехода), * которых в принятом файле НЕТ НИ ОДНОГО ВХОЖДЕНИЯ — проверено счётом. Возьми я CSS * из сборщика — в бой уехала бы форма, которую владелец не принимал. * * ═══ ЧТО ИЗМЕНЕНО ПРОТИВ ЭТАЛОНА — ТРИ ВЕЩИ, ВСЕ НАЗВАНЫ ═══ * * ① `@container wtscreen (…)` → `@media (…)`, пороги ЗНАК В ЗНАК: 790 · 900 · 560 · 360. * В эталоне пороги записаны через контейнерные запросы, потому что демо-кадр файла * приёмки задаёт ширину сам. В БОЮ КАДРОВ НЕТ: элемента с `container-name: wtscreen` * на сайте не существует ни одного — все четыре блока не применились бы МОЛЧА, * и телефон получил бы десктопную раскладку. Запись `width >= N` и `min-width: N` * тождественны, `width <= N` и `max-width: N` — тоже. Это уже записанное решение * проекта, а не новое: тем же приёмом переведены формы соседних экранов * (css/contacts.css, css/usloviya-raboty.css). * * ② ОБЁРТКИ `.wt-layout` / `.wt-content` / `.wt-crumbs` / `.wt-h1` ЗДЕСЬ НЕ ПОВТОРЯЮТСЯ — * они живут в боевом css/integration.css и в style.css шаблона крошек. Две строки * `.wt-layout` внутри блоков 560 и 360 px ниже не копия, а поправка отступов, принятая * владельцем в составе формы (боковой отступ 16 px на 320 — замеренный контракт). * * ③ 🆕 ДОБАВЛЕНО ОДНО ПРАВИЛО, КОТОРОГО В ЭТАЛОНЕ НЕТ И НЕ МОГЛО БЫТЬ: `.kr-pusto__a`. * На момент заморозки слов пустого состояния не существовало (паспорт: «клиентский * текст, хозяин — welle-copy; их ещё нет, на макете стоит размеченное место»), поэтому * ссылки внутри них в эталоне нет. Слова приняты владельцем в тот же день, и ссылка * в них предусмотрена носителем: «на словах „откройте каталог", адрес /catalog/». * Правило держит ровно её вид и ничего сверх: цвет акцента и подчёркивание. * ⛔ Отдельной кнопки не заводится — её нет в принятой форме (прямой запрет постановки). * ========================================================================================== */ /* ═══════════ НИЖЕ — ЭТАЛОН, СТРОКИ 564–675, ЗНАК В ЗНАК (кроме четырёх строк ① ) ═══════════ */ /* ═══════════════════════════════════════════════════════════════════════════ ФОРМА ДВУХ ЭКРАНОВ РАЗДЕЛА «КАК ЭТО РАБОТАЕТ» — редакция 2, 17.09.2026. Значения — токены ярусов 0/1. Литералов четыре, и ни один не палитра: 44 px — минимальная тач-зона (контракт доступности); 999px — радиус капсулы; 72ch/68ch — мера строки для длинного текста; 4/3 — отношение сторон места под фото, одно на все четыре (на нём держатся пары). ═══════════════════════════════════════════════════════════════════════════ */ /* H1 — боевая шкала заголовков: 18 px на телефоне, 24 px с 790 px. Своего кегля не изобретаю: браузерный дефолт дал бы 32 px — ступени, которой в шкале нет. */ .kr-h1 { margin: 0 0 var(--space-3); font-size: var(--text-lg); font-weight: 700; line-height: var(--leading-tight); color: var(--foreground); } @media (min-width: 790px) { .kr-h1 { font-size: var(--text-2xl); } } /* ── ЭКРАН А. Лид под H1 — текст владельца, 🆕 ДВА АБЗАЦА (17.09, ночь). Между абзацами — отбивка меры абзаца (--space-4, как у .kr-p); последний абзац держит прежнее расстояние до блока «о чём тут пишут» (--space-6), чтобы рост лида не съел границу между лидом и следующим блоком. Кегль и мера строки — принятые. */ .kr-lead { margin: 0 0 var(--space-6); max-width: 72ch; font-size: var(--text-base); line-height: var(--leading-normal); color: var(--muted-foreground); } .kr-lead:not(:last-of-type) { margin-bottom: var(--space-4); } /* ── 🆕 «О ЧЁМ ТУТ ПИШУТ» — четыре карточки «имя + подпись вторым ярусом». Две колонки, а не четыре: подпись дословна и в колонку 285 px ломается на семь строк. Правится сетка, а не подпись. */ .kr-about { margin: 0 0 var(--space-6); max-width: 78ch; } .kr-about__h { margin: 0 0 var(--space-3); font-size: var(--text-base); font-weight: 700; color: var(--foreground); } .kr-ablist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: 1fr; } @media (min-width: 900px) { .kr-ablist { grid-template-columns: 1fr 1fr; } } .kr-ab { display: flex; flex-direction: column; gap: var(--space-1_5); padding: var(--space-4); background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--primary); border-radius: var(--radius); } .kr-ab__h { font-size: var(--text-base); font-weight: 700; line-height: var(--leading-tight); color: var(--foreground); } .kr-ab__p { font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--muted-foreground); } /* ── РУБРИКИ КАПСУЛАМИ — фильтр над лентой: только имя и счётчик, подписи здесь нет. Пустая рубрика НЕ ссылка: места в разделе она не теряет, а вести в пустой результат ей нечем. */ .kr-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-4); } .kr-chip { display: inline-flex; align-items: center; gap: var(--space-1_5); min-height: 36px; padding: 0 var(--space-3); border: 1px solid var(--border); border-radius: 999px; background: var(--background); color: var(--foreground); font-size: var(--text-sm); font-weight: 600; text-decoration: none; } .kr-chip:hover { border-color: color-mix(in oklab, var(--primary) 45%, var(--border)); background: var(--secondary); } .kr-chip:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } .kr-chip--on { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); } .kr-chip--on:hover { background: var(--primary); } .kr-chip--pusto { border-style: dashed; color: var(--muted-foreground); cursor: default; } .kr-chip__n { font-size: var(--text-xs); font-weight: 700; opacity: .75; font-variant-numeric: tabular-nums; } /* ── ЛЕНТА. Строка во всю меру колонки, а не плитка в сетке: форма не зависит от числа статей и не выглядит поломанной сеткой при одной. */ .kr-feed { list-style: none; margin: 0 0 var(--space-8); padding: 0; max-width: 78ch; display: flex; flex-direction: column; gap: var(--space-4); } .kr-item__l { display: block; padding: var(--space-5); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); text-decoration: none; color: inherit; } .kr-item__l:hover { border-color: color-mix(in oklab, var(--primary) 45%, var(--border)); box-shadow: 0 4px 16px oklch(0 0 0 / 6%); } .kr-item__l:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } .kr-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); } .kr-rub { display: inline-block; padding: 2px var(--space-2); border-radius: var(--radius-sm); background: var(--secondary); color: var(--secondary-foreground); font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-wide); } .kr-date { font-size: var(--text-xs); color: var(--muted-foreground); font-variant-numeric: tabular-nums; } .kr-item__h { display: block; max-width: 60ch; font-size: var(--text-lg); font-weight: 700; line-height: var(--leading-tight); color: var(--foreground); } .kr-item__s { display: block; max-width: 72ch; margin-top: var(--space-2); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--muted-foreground); } /* ── 🆕 ПУСТОЕ СОСТОЯНИЕ ЛЕНТЫ. Статей ноль — стоит размеченное место, а не выдуманная карточка. Пунктир и приглушённый цвет — тот же язык чертежа, что у места под фото: видно, что здесь будет содержимое и что его сегодня нет. Мера и отступы — как у карточки ленты, чтобы появление первой статьи не двигало страницу. */ .kr-pusto { display: flex; flex-direction: column; gap: var(--space-1_5); max-width: 78ch; margin: 0 0 var(--space-8); padding: var(--space-5); border: 1px dashed color-mix(in oklab, var(--primary) 35%, var(--border)); border-radius: var(--radius-lg); background: var(--muted); } .kr-pusto__t { font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--muted-foreground); } .kr-pusto__p { font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--muted-foreground); } /* ── ПЕРЕХОД В КАТАЛОГ — строки, а не баннер. Анкор описательный, боевое имя раздела. */ .kr-tocat { max-width: 78ch; border-top: 1px solid var(--border); padding-top: var(--space-5); margin-bottom: var(--space-4); } .kr-tocat__h { margin: 0 0 var(--space-3); font-size: var(--text-base); font-weight: 700; color: var(--foreground); } .kr-golist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); } .kr-go { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: var(--space-2) var(--space-3); border-radius: var(--radius); background: var(--secondary); border-left: 3px solid var(--primary); color: var(--foreground); text-decoration: none; font-size: var(--text-base); font-weight: 600; line-height: var(--leading-normal); } .kr-go:hover { background: color-mix(in oklab, var(--primary) 8%, var(--secondary)); } .kr-go:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } .kr-go__i { flex: 0 0 auto; color: var(--primary); } /* ═══════════ КОНЕЦ ЭТАЛОНА ═══════════ */ /* ③ ССЫЛКА ВНУТРИ ПУСТОГО СОСТОЯНИЯ — единственное правило сверх эталона, см. шапку. Слова приняты владельцем 17.09 уже ПОСЛЕ заморозки формы, и ссылка предусмотрена их носителем. Вид — акцентный цвет и подчёркивание; ни фона, ни рамки, ни кнопки: это ссылка в предложении, а не действие второго уровня. */ .kr-pusto__a { color: var(--primary); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; } .kr-pusto__a:hover { text-decoration-thickness: 3px; } .kr-pusto__a:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } /* ── УЗКИЕ ШИРИНЫ. Ничего не прячется и не уезжает: меняется только плотность. Эталон, строки 806–831; взяты правила ЭКРАНА А. Правила статьи (.kr-zav, .kr-h2, .kr-check, .kr-step, .kr-step__p, .kr-go--big, .kr-tbl) не поехали: у статьи свой экран, своя заморозка и свой такт кода — она едет актом 3. */ @media (max-width: 560px) { .wt-layout { padding-top: var(--space-4); padding-left: var(--space-4); padding-right: var(--space-4); } .kr-item__l { padding: var(--space-4); } .kr-ab { padding: var(--space-3); } } @media (max-width: 360px) { /* 320 — самый узкий телефон. Боковой отступ не опускается ниже 16 px: это контракт, а не вкус, и он замерен. */ .wt-layout { padding-left: 16px; padding-right: 16px; } .kr-chips { gap: var(--space-1_5); } .kr-chip { padding: 0 var(--space-2_5); font-size: var(--text-xs); } } /* End */ /* Start:/local/templates/welle/components/bitrix/breadcrumb/welle/style.css?17918999715185*/ /* Хлебные крошки — ЕДИНСТВЕННЫЙ носитель стиля крошек на весь сайт. Форма — эталон сквозной рамки ред. 4 (Design/etalony-zamorozhennye/ramka/ Ramka_red4__2026-10-11_1239__sha256-2834a69e…dc.html, строки 554–569), правило Р10 (DECISIONS 11.10): размер --text-xs, цвет --muted-foreground; ссылки подчёркнуты ВСЕГДА, при наведении темнеют до --foreground; текущее звено и «/» не подчёркнуты (правила на них нет). Значения — только токены css/tokens/, литералов не заводим. Подчёркивание задано явно (underline), а не браузерным умолчанием: в бою подключён /bitrix/css/main/bootstrap.min.css, и сброс a { text-decoration: none } в нём или в другом файле снял бы умолчание (справка design по Р10, §3). Отступ снизу — --space-2, как в рамке. Кто подключает файл: bitrix:breadcrumb сам (SetAdditionalCSS в component.php ядра) — каталог и статьи «Как это работает»; страницы со статической разметкой .wt-crumbs — строкой SetAdditionalCSS на странице: «Условия работы», «Контакты», рубрикатор, корзина (/personal/cart/index.php), оформление заказа (/personal/order/make/index.php). Копий этих правил в стилях других шаблонов быть не должно: до 11.10 они жили в sale.basket.basket и sale.order.ajax (bootstrap_v4/style.css и .min.css) и сняты решением владельца 11.10 «Р10 доходит до корзины и оформления заказа…». */ .wt-crumbs { font-size: var(--text-xs); line-height: var(--leading-normal); color: var(--muted-foreground); margin-bottom: var(--space-2); } /* ЗОНА КЛИКА ССЫЛКИ — больше, на экране не сдвигается ни пиксель (акт №83, 13.10.2026; DECISIONS 13.10 «ХЛЕБНЫЕ КРОШКИ: ЗОНА КЛИКА БОЛЬШЕ БЕЗ ВИДИМЫХ ИЗМЕНЕНИЙ»). Повод — Clarity 13.10: щелчок у нижнего края «Отводы нержавеющие» ушёл мимо (шрифт 12 px, строка 18 px, запаса не было). Как устроено: у строчной ссылки поля (padding) расширяют область, по которой браузер засчитывает щелчок, а строку не раздвигают — вертикальные поля строчного элемента высоту строки не меняют, горизонтальные гасятся равным отрицательным полем (margin), поэтому ни одна буква не сдвигается. Кольцо фокуса с клавиатуры поля бы увеличили — для него правило ниже (:focus-visible). Почему именно эти шаги: · снизу --space-1_5 (6 px) — туда пришёлся промах; до следующего блока под крошками ~10 px, не дотягивается; · сверху половина --space-0_5 (1 px) — больше нельзя: при переносе крошек на вторую строку (телефон) ссылка нижней строки перехватывала бы щелчок у нижнего края текста верхней (у Segoe UI запас строки всего 2 px); · по бокам --space-0_5 (2 px) — пробел до «/» 3,4 px: «/» остаётся ничьим. Справа поле работает только у последней ссылки — пробел после ссылки идёт позже по разметке и щелчок над ним забирает себе. */ .wt-crumbs a { color: inherit; text-decoration: underline; padding: calc(var(--space-0_5) / 2) var(--space-0_5) var(--space-1_5); margin: 0 calc(-1 * var(--space-0_5)); } /* Кольцо фокуса с клавиатуры обводит поля ссылки и с полями стало бы больше (на стенде 13.10 отличались 120 снимков фокуса из 120). В фокусе с клавиатуры поля снимаются, и кольцо рисуется по тем же коробкам, что до акта №83 (снимки фокуса 120 из 120 равны «было»). Щелчок мышью это не задевает: у ссылки, нажатой мышью, :focus-visible браузер не включает. */ .wt-crumbs a:focus-visible { padding: 0; margin: 0; } .wt-crumbs a:hover { color: var(--foreground); text-decoration: underline; } /* End */ /* /local/templates/welle/css/kak-eto-rabotaet.css?178966500415989 */ /* /local/templates/welle/components/bitrix/breadcrumb/welle/style.css?17918999715185 */