/* Start:/local/templates/welle/css/usloviya-raboty.css?179088268311600*/ /* ========================================================================================== * ФОРМА ЭКРАНА «УСЛОВИЯ РАБОТЫ» — /usloviya-raboty/, РЕДАКЦИЯ 3 * * ОТКУДА ВЗЯТО. Замороженный эталон формы, принятый владельцем 01.10.2026 (редакция 3): * Design/etalony-zamorozhennye/usloviya-raboty/ * UsloviyaRaboty_red3__2026-10-01_1537__sha256-0d919a6836ed1009…e848c355.dc.html * кусок «ФОРМА ЭКРАНА „УСЛОВИЯ РАБОТЫ“» до «ОБВЯЗКА ФАЙЛА ПРИЁМКИ» — его sha256 * 06061f73fdf2b892… = отпечатку паспорта заморозки («CSS экрана — знак в знак»). * Слово владельца 01.10: «Третью редакцию прототипа страницы «Условия работы» … * Полностью принимаю.» * Ниже разделителя — тот кусок ЗНАК В ЗНАК, вынутый машиной, с одним названным * исключением (см. ② ). Редакция 2 (16.09) этого файла заменена целиком: предмет правки — * тело страницы (три случая вместо пяти, два новых общих блока, класс .uw-gen). * Слой обвязки файла приёмки (.doc-*, .frame-*, пометки, подписи кадров) в бой не едет. * * ПОЧЕМУ ОТДЕЛЬНЫЙ ФАЙЛ, А НЕ styles.css. Правила нужны РОВНО одной странице. Подключение — * $APPLICATION->SetAdditionalCSS() из usloviya-raboty/index.php, тем же приёмом, что * contacts.css на соседнем экране. Радиус правки: одна страница, ядро шаблона не тронуто. * * ① СТОЛКНОВЕНИЙ КЛАССОВ НЕТ. Единственный новый класс ред. 3 — `.uw-gen`; сплошной поиск * по /local/ и /usloviya-raboty/ 01.10 — 0 вхождений до правки. Все 17 классов `uw-*` * тела эталона определены в этом файле; `wt-*` (обёртки, крошки, H1) живут в боевом * css/integration.css и в style.css шаблона крошек, сюда не копируются — копия правила * была бы вторым носителем одной сущности. * * ② 🔴 ЕДИНСТВЕННОЕ ОТСТУПЛЕНИЕ ОТ БУКВЫ ЭТАЛОНА — ЧЕТЫРЕ СТРОКИ ЗАГОЛОВКОВ ЗАПРОСОВ. * В эталоне пороги записаны как `@container wtscreen (…)`: демо-кадр файла приёмки * задаёт ширину сам. В БОЮ КАДРОВ НЕТ — элемента с `container-name: wtscreen` на сайте * нет ни одного, и все четыре блока не применились бы МОЛЧА. Возвращаю `@media` с ТЕМИ ЖЕ * порогами: 790 · 1200 · 860 · 560 (`width >= N` ≡ `min-width: N`, `width <= N` ≡ * `max-width: N`). То же записанное решение, что у ред. 2 этого файла и у css/contacts.css. * Перевод сделан машиной, а не руками: замена ровно четырёх строк, `@container` — 0. * ========================================================================================== */ /* ═══════════ НИЖЕ — ЭТАЛОН РЕД. 3, CSS ЭКРАНА, ЗНАК В ЗНАК (кроме четырёх строк ② ) ═══════════ */ /* ═══ ФОРМА ЭКРАНА «УСЛОВИЯ РАБОТЫ» ═══ */ /* ═══════════════════════════════════════════════════════════════════════════ ФОРМА ЭКРАНА «УСЛОВИЯ РАБОТЫ» — редакция 3 (01.10.2026), правка редакции 2 (16.09). Значения — токены ярусов 0/1. Литералов два, и оба не палитра: тач-зона 44 px и рамка 2 px у панели действия. Новое против ред. 2 — только класс .uw-gen. ═══════════════════════════════════════════════════════════════════════════ */ /* H1 — по боевой шкале заголовков: 18 px на телефоне, 24 px с 790 px. */ .uw-h1 { margin: 0 0 var(--space-4); font-size: var(--text-lg); font-weight: 700; line-height: var(--leading-tight); color: var(--foreground); } @media (min-width: 790px) { .uw-h1 { font-size: var(--text-2xl); } } /* ── ПЕРЕЧЕНЬ ОТРАСЛЕЙ — ФИЛЬТР, А НЕ УКРАШЕНИЕ (без изменений) ──────────── */ .uw-branch { margin: 0 0 var(--space-4); padding: var(--space-4); background: var(--secondary); border-left: 4px solid var(--primary); border-radius: var(--radius); font-size: var(--text-lg); line-height: var(--leading-normal); color: var(--foreground); } .uw-branch__k { font-weight: 700; color: var(--primary); white-space: nowrap; } .uw-branch__v { font-weight: 500; } /* Лид — тише перечня. С 01.10 его вторая фраза — оглавление страницы: шесть тем в том же порядке, в каком стоят блоки ниже. */ .uw-lead { margin: 0 0 var(--space-6); max-width: 86ch; font-size: var(--text-base); line-height: var(--leading-normal); color: var(--muted-foreground); } /* ── КАРТОЧКИ БЛОКОВ (без изменений) ─────────────────────────────────────── */ .uw-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); } .uw-h2 { margin: 0 0 var(--space-2); font-size: var(--text-lg); font-weight: 700; line-height: var(--leading-tight); color: var(--foreground); } .uw-p { margin: 0 0 var(--space-3); max-width: 72ch; font-size: var(--text-base); line-height: var(--leading-normal); color: var(--foreground); } .uw-p:last-child { margin-bottom: 0; } /* «Что нужно, чтобы начать» — условие входа; полоса --primary слева (без изменений). */ .uw-start { border-left: 3px solid var(--primary); margin-bottom: var(--space-6); } /* ── ТРИ СЛУЧАЯ — ОДИН РЯД НА 1440 ───────────────────────────────────────── Было пять случаев, стало три. Поток колонками ред. 2 выбирался под ПЯТЬ карточек: он балансировал колонки по высоте. Три карточки поток кладёт по одной в колонку, и выравнивать ему нечего: первая сборка 01.10 дала ряд 335 · 169 · 169 px — под двумя короткими карточками пустота, ряд рваный (поймано глазами на рендере 1440). Поэтому от 1200 px — сетка в три колонки: раскладка та же, 1-1-1, но карточки ряда одной высоты. Ниже 1200 px — механизм ред. 2 без изменений (2 колонки потоком, одна на телефоне). */ .uw-cases { columns: 2; column-gap: var(--space-5); margin-bottom: var(--space-1); } @media (min-width: 1200px) { .uw-cases { columns: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-5); } } .uw-case { break-inside: avoid; margin: 0 0 var(--space-5); } /* ── НОВОЕ 01.10: ДВА ОБЩИХ БЛОКА — «ДОСТАВКА» И «ВОЗВРАТ И ОБМЕН» ───────── Это не случаи одного сегмента, а условия для всех, кто уже заказывает, поэтому в ряд случаев они не встают: каждый — карточкой на всю ширину колонки, тем же приёмом, что «Что нужно, чтобы начать», но без полосы --primary (полоса остаётся единственной у условия входа). Абзац держит те же 72 знака строки, что во всех блоках: возврат — самый длинный блок страницы, три абзаца, и широкая строка сделала бы его нечитаемым. Порядок — по времени сделки, как в тексте. */ .uw-gen { margin-bottom: var(--space-6); } /* ── «КУДА ПИСАТЬ» — ДЕЙСТВИЕ, А НЕ ПРИМЕЧАНИЕ (без изменений) ───────────── */ .uw-act { border: 2px solid var(--primary); box-shadow: 0 6px 20px oklch(0.372 0.127 258 / 12%); } .uw-p--act { max-width: 76ch; font-size: var(--text-lg); line-height: 2.5; } .uw-do { display: inline-flex; align-items: center; gap: var(--space-1_5); min-height: 44px; padding: 0 var(--space-2_5); margin: 0; border-radius: var(--radius); border: 1px solid var(--border); background: var(--background); color: var(--foreground); text-decoration: none; font-size: var(--text-base); font-weight: 600; line-height: var(--leading-none); vertical-align: middle; overflow-wrap: anywhere; } .uw-do:hover { border-color: color-mix(in oklab, var(--primary) 45%, var(--border)); background: var(--secondary); } .uw-do:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } .uw-do svg { flex: 0 0 auto; } .uw-do--quiet { color: var(--muted-foreground); font-weight: 600; } .uw-do--quiet:hover { color: var(--foreground); } .uw-nb { white-space: nowrap; } /* ── 375: один поток, ничего не прячется (без изменений + .uw-gen) ──────── */ @media (max-width: 860px) { .uw-cases { columns: 1; } } @media (max-width: 560px) { .wt-layout { padding-top: var(--space-4); padding-left: var(--space-4); padding-right: var(--space-4); } .uw-h1 { margin-bottom: var(--space-3); } .uw-branch { padding: var(--space-3); font-size: var(--text-base); } .uw-lead { margin-bottom: var(--space-5); } .uw-card { padding: var(--space-4); } /* Ряд случаев своего отступа на телефоне не получает: под ним теперь карточка, а не панель действия, и его 20 px поверх отступа последней карточки давали зазор 40 px против 20 у соседей (поймано глазами на рендере 375). */ .uw-start, .uw-gen { margin-bottom: var(--space-5); } .uw-p--act { font-size: var(--text-base); line-height: 2.3; } } /* 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/usloviya-raboty.css?179088268311600 */ /* /local/templates/welle/components/bitrix/breadcrumb/welle/style.css?17918999715185 */