/* * f7c_template :: layout-обвязка (.tpl-*). * Граница с дизайн-системой — f7c_design docs/THEMING.md, раздел * «Граница с шаблоном»: только композиция и геометрия на токенах --ds-*; * никаких новых визуальных компонентов, никаких переопределений .ds-*. * Брейкпоинты — контрактные (sm 640 / md 768 / lg 1024 / xl 1280). */ /* 🔴 ГРАНИЦА СО СКРОЛЛБАРОМ (v0.156.0). Её назвал вслух `c-design` в самом ядре и оставил шаблону: вынос стрелок карусели в гаттер считается как `max(-54px, calc((100% - 100vw) / 2))`, а `100vw` ВКЛЮЧАЕТ классический скроллбар, тогда как клиентская область — нет. Где зажим упирается (узко), стрелка встаёт ровно по краю `100vw`, то есть на полширины полосы ЗА краем видимого. ЗАМЕР (forbion, headful Chromium под Xvfb, полоса 15 px — оверлейная полоса headless этот случай НЕ воспроизводит и все мои прежние «прокрутки нет» были фактом о МОЁМ браузере): до: 1200→+8 1250→+8 1251→+8 1280→+8 1300→+8 1310→+3 1366→0 1440→0 правый край стрелки на 1200 = 1192.5 при клиентских 1185 — ровно 7.5 = 15/2. ⚠ `clip`, а НЕ `hidden`: `hidden` создаёт контейнер прокрутки — он ломает `position: sticky` у шапки и делает `overflow-y` вычисляемым как `auto`. `clip` не создаёт ни того, ни другого и допускает `overflow-y: visible`. ⚠ Safari < 16 `clip` не знает — там останется прежнее поведение (полоса прокрутки), то есть НЕ хуже сегодняшнего: дефолт-фолбэк здесь безопасен. 🔴 ЧЕГО ЭТО ПРАВИЛО ДЕЛАТЬ НЕ ДОЛЖНО — ПРЯТАТЬ СОДЕРЖАНИЕ. Полчаса назад за край вьюпортa вылезали чипы-статусы (мой промах с носителем координат, v0.155.1): клип срезал бы им правые концы и убрал бы прокрутку — то есть убрал бы ЕДИНСТВЕННЫЙ признак дефекта, а не дефект. Поэтому правило вводится ТОЛЬКО после замера «за клиентским краем не осталось ничего, кроме стрелки» (0 узлов на 16 ширинах), и этот замер — часть приёмки, а не разовая доглядка. Широкое содержимое своей прокрутки не теряет: у таблиц и ленты собственные контейнеры с `overflow-x: auto`, клип страницы их не касается. */ html { overflow-x: clip; } /* Сетка карточек: 1 колонка → 2 → 3 */ .tpl-grid { /* Значения раскладки объявлены ЗДЕСЬ и один раз; медиаблоки ниже их только включают (см. комментарий у ступени хаба). */ --tpl-grid-cols: repeat(6, 1fr); --tpl-grid-span: span 2; --tpl-grid-span-lg: span 3; display: grid; grid-template-columns: 1fr; gap: var(--ds-space-6); } /* 🔴 СЕТКА РЕШАЕТ ОДНОЙ ГРАНИЦЕЙ 900|901, А НЕ ДВУМЯ СВОИМИ (v0.214.0; наряд integrator-c2, находка c-ops бисекцией + перечисление медиазапросов). ЗАМЕР КАНОНА: 1 → 3 колонки ОДНИМ шагом на 900|901. У нас одно решение канона распалось на ДВА, и НИ ОДНО не совпадало с ним: 1 → 2 колонки на 639|640 · 2 → 3 колонки на 1023|1024 ⇒ между 640 и 900 канон СТОЛБИКОМ, а мы уже в две колонки; между 901 и 1023 канон в ТРИ, а мы всё ещё в две. Два коридора расхождения, и оба невидимы на 390 и 1366 — там, где мы мерили весь день. ⚠ ПОРОГ 640 СНЯТ ЦЕЛИКОМ, а не сдвинут: канон между 640 и 900 держит одну колонку, значит промежуточной ступени у него НЕТ ВОВСЕ. Сдвинуть 640 → 901 значило бы сохранить ступень, которой у источника нет. 📌 И это четвёртый за сутки случай «починили одного из потребителей»: 1024 вынимали из типографики калькулятора и считали предмет закрытым — носитель остался и раздавал ту же границу лестнице, cta, inc и герою. */ @media (min-width: 901px) { /* 🔴 ШЕСТЬ КОЛОНОК ВМЕСТО ТРЁХ, ДЕФОЛТ — span 2 (v0.115.0). Для секций без выделенных карточек это ТО ЖЕ САМОЕ: три штуки в ряд. Но появляется выразимость канона «2 больших + 3 обычных»: большая занимает span 3. Замер канона (c-design): сетка хаба 6 колонок, big = span 3 (531px), обычная = span 2 (349px). */ .tpl-grid { grid-template-columns: var(--tpl-grid-cols); } .tpl-grid > * { grid-column: var(--tpl-grid-span); } .tpl-grid > .tpl-card--featured { grid-column: var(--tpl-grid-span-lg); } /* Крупная иллюстрация — свойство ВАРИАНТА, не ассета: тот же файл 168×134. */ .tpl-card--featured { --tpl-illu-w: 168px; } } /* 🔴 У СЕТКИ ХАБА СВОЯ СТУПЕНЬ — 761, А НЕ ОБЩАЯ 901 (v0.231.0). ЗАМЕР `c-ops` по восемнадцати ширинам на живом и мой по секциям канона: #hub 760 → 1 колонка · 761 → «2+3» ⇒ ступень канона 760|761 у нас 900 → 1 колонка · 901 → «2+3» ⇒ полоса 761…900 расходится На этих 140 px наша карточка ВДВОЕ шире канонной (737…848 против 348…417). ⚠ Это НЕ отмена решения v0.214.0 «одна граница вместо двух»: та мерилась на ДРУГОЙ сетке, и там у канона действительно один шаг. Сегодня замерено, что ступень у канона СЕКЦИОННАЯ — `#hub` ломается на 761, `#srv` идёт своей лестницей (2+2 на 700 · 3+1 на 760…900 · 4 с 1000). Снятая ступень 640 не возвращается: между 640 и 760 канон по-прежнему столбиком. 🔴 ЧИСЛА РАСКЛАДКИ ОБЪЯВЛЕНЫ ОДИН РАЗ (`--tpl-grid-cols|-span|-span-lg` на `.tpl-grid`), а медиаблоки их только ВКЛЮЧАЮТ. Скопируй я «repeat(6, 1fr)» во второй блок — получилось бы два источника одного значения, и они разъехались бы при первой же правке (мой собственный класс, пойманный сегодня на резерве иллюстрации: два автора на одну величину). ⚠ ОСТАТОК НАЗЫВАЮ: `--tpl-illu-w` в полосе 761…900 остаётся обычным (103) — ширины канонной иллюстрации на этой полосе я НЕ мерил, а ставить не мерянное значило бы выдать догадку за замер. Резерв абзаца там даёт ядро (78). */ @media (min-width: 761px) and (max-width: 900px) { .tpl-grid--hub { grid-template-columns: var(--tpl-grid-cols); } .tpl-grid--hub > * { grid-column: var(--tpl-grid-span); } .tpl-grid--hub > .tpl-card--featured { grid-column: var(--tpl-grid-span-lg); } } /* ПРЕСЕТЫ КАЛЬКУЛЯТОРА (`control: "presets"`, v0.118.0). Канон: конфигурация выбирается КНОПКОЙ, полей ввода нет как класса. Под кнопкой — нативный radio: без JS выбор работает и читается скринридером, а JS уже умеет читать radio-группу (правок скрипта не потребовалось). Состояние «выбран» ловим через `:has(input:checked)` — тот же приём, что у ядрового ds-segment; сам input визуально убран, но остаётся доступным клавиатуре (не `display:none`). */ .tpl-presets { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); margin: 0; padding: 0; border: 0; } .tpl-preset { /* 🔴 КЕГЛЬ КНОПКИ-ПРЕСЕТА — РОЛЬ ПОЛЯ, А НЕ ШКАЛА (v0.175.0; токен ядра `--ds-field-size`, у forbion 13, DESIGN v0.228.0). ⚠ Токен объявлен и в ядре читается — но правилом `.ds-input/.ds-select/ .ds-textarea`, а наши пресеты это `.tpl-preset`: замер дал 16 при объявленных 13. То есть «значение есть — читателя нет», и читателем должен стать МОЙ класс: пресет — способ ввода того же поля, кегль у него полевой. ⚠ Фолбэк — прежние 16 (`--ds-fs-md`): бренды без токена не двигаются. */ font-size: var(--ds-field-size, var(--ds-fs-md)); position: relative; display: flex; flex-direction: column; gap: var(--ds-space-1); padding: var(--ds-space-3) var(--ds-space-4); border: 1px solid var(--ds-border-default); border-radius: var(--ds-radius-md); cursor: pointer; /* 🔴 ФОН НЕ ЗАДАЁМ. Первая редакция ставила `var(--ds-surface-page)`, и объявление было МЁРТВЫМ: замер показал `#ECF2F2` — поверхность контролов ядра (`--ds-surface-raised`), которая выигрывает у моего правила. Строка читалась как решение, но ничего не решала — наш класс «правило есть, эффекта нет», третий случай за сутки и первый в моём же файле. Поверхность неактивного контрола принадлежит ЯДРУ (канон подтвердил роль #ECF2F2 отдельно от фона секций) — значит и объявлять её должно оно одно. */ } .tpl-preset input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; } .tpl-preset:has(input:checked) { border-color: var(--ds-color-primary); background: var(--ds-surface-raised); } .tpl-preset:focus-within { outline: 2px solid var(--ds-color-primary); } .tpl-preset__price { font-size: var(--ds-fs-lg); font-weight: var(--ds-fw-bold); } .tpl-preset__cfgs { display: flex; flex-wrap: wrap; gap: var(--ds-space-1); } /* 🔴 СПИСОК КОНФИГУРАЦИЙ ВНУТРИ СТУПЕНИ — ВИДЕН НА ВСЕХ ШИРИНАХ (правка 17.08, РЕШЕНИЕ ВЛАДЕЛЬЦА ПОВЕРХ КАНОНА). До этой правки список `display:none` на ≥901 и `flex` на ≤900, по замеру канона (`#calc .cfg button`, v0.145.0): у эталона широкая ступень — ОДНА СТРОКА ЦЕНЫ, имя показывалось только на мобильном. Владелец, увидев живой стенд, решил иначе: клиент на десктопе обязан видеть, ЧТО он выбирает, не только цену — отступление от канона ОСОЗНАННОЕ, записано `DEVIATIONS.md`. ⚠ Порог 901 (та же точка, что у шахматки героя и карточек формы) остаётся для РЯДА (равные доли/nowrap ниже) — он не про видимость имени, его не трогаю. 🔴 ПРАВИЛО ПРЯТАВШЕЕ СТОЯЛО ПОСЛЕ БАЗОВОГО `.tpl-preset__cfgs { display: flex }` НАРОЧНО (при равной специфичности решает порядок) — это тот же приём, только теперь без строки `display:none`, прятать нечем и порядок уже не имеет значения. */ @media (min-width: 901px) { /* 🔴 РАВНЫЕ ДОЛИ РЯДА (v0.147.0). Замер канона: набор ступеней 630×54, `nowrap`, пять детей ПО 121 — то есть доли РАВНЫЕ, а не по содержимому. ⚠ Первая попытка (`flex: 1 1 0` в v0.145.0) дала 47×242 и была снята — но виновата была не модель, а ряд шириной 268: поле со ступенями занимало одну из двух колонок моей же парной сетки. С `tpl-field--wide` ряд стал 635, и равные доли дают ~123 — канонные 121 плюс наши паддинги. 📌 Класс c-design, второй случай за день: ряд, выровненный СОДЕРЖИМЫМ, — не выровненный ряд. Пока подписи похожей длины, это выглядит работающим. */ .tpl-presets { flex-wrap: nowrap; } .tpl-preset { flex: 1 1 0; min-width: 0; } /* ⚠ ДЕЛЕНИЕ РЯДА ПОРОВНУ (`flex: 1 1 0`) ПРОБОВАЛ И СНЯЛ — ЗАМЕР ХУЖЕ. Ступени сели в один ряд, но по 47px при высоте 242: подпись переносилась по одному слову, и секция стала выше, а не ниже. Причина в том, что делить нечего: набор ступеней у нас 268px шириной, а у канона 630 — потому что `.ds-calc` у нас `display:block`, и двухколоночной раскладки калькулятора НЕТ ВОВСЕ (у канона grid 669/418). Пока колонок нет, любая правка ступеней переставляет мебель в комнате не того размера. Предмет назван числами и отдан: он в компоненте ядра, не в ширине пилюли. */ } .tpl-preset__cfg { font-size: var(--ds-fs-xs); color: var(--ds-text-secondary); } /* ПЕРЕЧЕНЬ ФАКТОВ (`text.items[]`, v0.116.0). Не карточки и не «галочки» ядра: простой список с брендовым маркером. Маркер — псевдоэлемент, а не символ в тексте: символ в значении слота уехал бы литералом (наш класс), и его нельзя было бы ни перекрасить, ни выключить. */ .tpl-facts { margin: var(--ds-space-4) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--ds-space-2); } .tpl-facts li { position: relative; padding-inline-start: var(--ds-space-6); } /* Два уровня в пункте перечня — та же форма, что у преимуществ формы (`form.aside.perks[]`): имя крупнее, описание мельче и приглушённое. Замер канона: 14.5px/800 против 12px/500; у нас ИМЕНОВАННЫЕ ступени (`md`/`sm`) — своё число рядом с типошкалой ядра стало бы вторым источником. */ .tpl-facts__title { font-weight: var(--ds-fw-bold); } .tpl-facts__text { display: block; font-size: var(--ds-fs-sm); color: var(--ds-text-secondary); } .tpl-facts li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.55em; width: 8px; height: 2px; background: var(--ds-color-primary); } /* Читабельная ширина текстовых секций */ .tpl-prose { max-width: 44rem; } .tpl-prose p { margin: 0 0 var(--ds-space-4); } /* Узкая обёртка (формы и пр.) — не растягивать на всю ширину контейнера */ .tpl-narrow { max-width: 32rem; } /* Карточка входа в кабинет (ЛК 1С, наряд ГП 17.08) — только композиция и зазоры на токенах (CONTRACT §3: новый визуальный компонент не заводится). `.ds-denial`, `.ds-field`, `.ds-input`, `.ds-btn`, `.ds-form` — роли ядра, этот блок их не переопределяет, только расставляет. */ .tpl-login { margin-inline: auto; display: flex; flex-direction: column; gap: var(--ds-space-3); } .tpl-login .ds-form { display: flex; flex-direction: column; gap: var(--ds-space-3); margin-top: var(--ds-space-2); } .tpl-login__ways { margin: 0; font-size: var(--ds-fs-sm); text-align: center; } /* Чекбокс согласия 152-ФЗ: только компоновка, стили текста наследуются */ .tpl-consent { display: flex; gap: var(--ds-space-2); align-items: flex-start; } .tpl-consent input { margin-top: 0.25em; } /* Калькулятор: только ритм; типографика итога — семантика strong */ .tpl-calc__total { margin: var(--ds-space-6) 0 var(--ds-space-3); } .tpl-calc__disclaimer { margin: var(--ds-space-3) 0 0; } /* Замещающий текст на месте исчезнувшего по `when` поля (санкция 04.08, модель forbion-1c «1С:Фреш» п.4 — «Базовый»: доп. база не продаётся, счётчик убран, на его месте «по запросу»). Не форм-контрол — hidden переключается JS напрямую, без истинного удаления из DOM. */ .tpl-calc-unavailable { color: var(--ds-text-muted); font-size: 0.9em; } /* Раскрывашка «Ставки расчёта» в калькуляторе (не FAQ — FAQ теперь ds-faq дизайн-системы): только ритм, без визуальных стилей */ .tpl-disclosure { margin: 0 0 var(--ds-space-3); } .tpl-disclosure__q { cursor: pointer; } .tpl-disclosure__a { margin: var(--ds-space-2) 0 0; padding-left: var(--ds-space-4); } /* 🔴 «СТАВКИ РАСЧЁТА» СКРЫТЫ ОТ КЛИЕНТА С JS, ОСТАЮТСЯ БЕЗ JS (v0.242.0; наряд владельца Н5 17.08 — у канона узла нет на видимом скриншоте, а условие 3 визы v0.4/v0.5 требует, чтобы посетитель БЕЗ JS мог посчитать формулу сам). Разметка НЕ меняется — обязательство цело. ⚠ Селектор СКОПИРОВАН именно под `.ds-calc__form`, а не голым `.tpl-disclosure`: тот же класс несёт аккордеон тарифов (см. комментарий ниже) — задень я общий класс, погасил бы чужой узел, у которого другой предмет и другой держатель. 🔴 ТОЛЬКО `.calc-ready`, БЕЗ `.js` (17.08 — живой инцидент, нашла c-design, подтвердил c-web-1). Раньше правило требовало ОБА класса: `.js` (JS_DETECT_SCRIPT, инлайн-скрипт) доказывал только «браузер выполняет скрипты», `.calc-ready` — что калькулятор ДОРАБОТАЛ. `.calc-ready` ставит САМ tpl-calc.js последней строкой, ПОСЛЕ успешной инициализации; при сетевом обрыве/исключении/блокировщике этот класс не появится, и правило не сработает — узел останется видимым, как и без JS. Это по-прежнему так. ⚠ НО `.calc-ready` — СТРОГОЕ ПОДМНОЖЕСТВО «`.js` истинен»: он не может стать true без работающего JS, а «`.js` истинен» ничего не говорит о том, доработал ли калькулятор. Требовать оба класса разом добавляло ЛОЖНУЮ зависимость: на живом стенде CSP (`script-src 'self'` без хеша) молча заблокировал инлайн-скрипт, `.js` не появлялся НИКОГДА, и правило не срабатывало ВООБЩЕ — панель «Ставки расчёта» была раскрыта постоянно, хотя `tpl-calc.js` (внешний файл, не инлайн) работал и `.calc-ready` стоял. Урок: наличие уже достаточного сигнала — повод убрать избыточный, а не оставить его страховкой; избыточное само стало точкой отказа. */ [data-tpl-calc-root].calc-ready .ds-calc__form > details.tpl-disclosure { display: none; } /* Аккордеон тарифов (наряд integrator-c 02.08, решение владельца: аккордеон вместо новой табличной секции — переиспользует .tpl-disclosure выше, здесь только ритм между группами и раскладка чипов). Сам
— нативный, без JS: содержимое присутствует в HTML независимо от open/closed. Чип .cfgc (наряд c-seo §K67/K75/K78, форма — из concept): цвет/декорация заданы ЯВНО, не через наследование — тот класс дефекта («правило живёт не в классе, а в его СИЛЕ над соседним», .ttab td a перекрашивал чип в концепте) здесь структурно исключён: у чипа нет table/td-контекста, где могло бы стоять конкурирующее по специфичности правило. */ .tpl-tariff-accordion { display: flex; flex-direction: column; gap: var(--ds-space-3); } .tpl-tariff-chips { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); } .cfgc { /* inline-flex, а не inline-block: чипу нужна иконка ПЕРЕД текстом (v0.91.0), и выравнивать её baseline'ом пришлось бы магическими числами. */ display: inline-flex; align-items: center; gap: var(--ds-space-1); /* 🔴 ГЕОМЕТРИЯ ЧИПА СВЕДЕНА К КАНОНУ (v0.209.0; замер c-design @390, чип к чипу: канон `padding: 3px 9px`, `line-height: normal`, высота 21 — у нас было 4px 12px, lh 17.5, высота 26). 🔴 ВЕДУЩАЯ ВЕЛИЧИНА — ГОРИЗОНТАЛЬНОЕ ПОЛЕ, И ЭТО УМНОЖЕНИЕ, А НЕ СЛОЖЕНИЕ (числа c-ops на пяти ширинах): чип шире ⇒ в ряд входит меньше ⇒ РЯДОВ ПЕРЕНОСА больше, и каждый стоит полной высоты чипа. Отсюда +186 на 390 против +30 на 1366, где переносов нет вовсе. Поправь я одну вертикаль — высота ряда сошлась бы, а число рядов осталось. ⚠ `line-height: normal`, а не число: у канона чип 21 = кегль 12.5 в естественном строчном боксе; ступень `--ds-lh-*` в одностроч­ном чипе лишняя. */ padding: 3px 9px; border-radius: var(--ds-radius-full); /* Зелёная подложка — это ОБЫЧНОЕ состояние чипа (замер канона: #EDF6E3), а не выделение; в выделенной строке чип, наоборот, белеет. Прежний `--ds-surface-raised` (#ECF2F2) читался как «неактивный контрол». */ background: var(--ds-surface-highlight); color: var(--ds-text-primary); font-size: 12.5px; font-weight: 600; text-decoration: none; line-height: normal; /* 🔴 СЛОЙ ПЛОЩАДИ НАЖАТИЯ ВОЗВРАЩЁН, И ЭТО НЕ КОЛЕБАНИЕ, А РАЗВЕДЕНИЕ ЕДИНИЦ (v0.211.0). Хронология важна, потому что решение зависело от того, ЧТО мерили: v0.209.0 слой заведён по прецеденту степпера; v0.210.0 снят: замер тапа (c-ops) показал, что Chromium уже тянет попадание до середины промежутка между рядами; v0.211.0 возвращён: integrator-c2 уточнил, что отменял ОБЯЗАТЕЛЬНОСТЬ, а не запрещал, и что замеры расходятся ПО ЕДИНИЦЕ. ⚠ ДВЕ РАЗНЫЕ ВЕЛИЧИНЫ, обе верные: `elementFromPoint` даёт КОРОБКУ ПОПАДАНИЯ (её `::before` реально расширяет — мой замер: 44 со слоем против 22 без), а тап-прилипание делится МЕЖДУ СОСЕДНИМИ рядами и коробкой не управляется. Что из этого чувствует палец — решает ТАП на выложенном артефакте, и это замер c-ops, не мой. ⚠ ЧИСЛА ЭФФЕКТИВНОЙ ЗОНЫ ЗДЕСЬ НЕТ НАМЕРЕННО, И НИКАКОГО НЕ БУДЕТ ДО ЗАМЕРА НА КАНОННОЙ ПЛОТНОСТИ. За один час предмет получил ТРИ числа — «≈29» (арифметика integrator-c2, смешавшая НАШ зазор 8 с КАНОННОЙ высотой 21), «≈25» (его же поправка по канонному шагу) и «44» (моя коробка через `elementFromPoint`), — и все три оказались О РАЗНОМ. Число объявляется ПО ФАКТУ, с именем единицы и того, кто его снял. 🔴 И САМА ПРИЧИНА СНЯТИЯ СЛОЯ В v0.210.0 ОКАЗАЛАСЬ НЕВЕРНОЙ: c-ops отозвал своё «прилипание делит промежуток пополам» — он вывел это из ОДНОГО наблюдения и обобщил на случай, которого не мерил (слой у ВСЕХ чипов). Замер при слое у всех: чип с двумя соседями 26 → тап 33; чип с одним соседом 40 → 48. ⇒ слой пальцу выигрыш ДАЁТ. ⚠ ПОБОЧНОЕ СЛЕДСТВИЕ СЛОЯ ЗАВИСИТ ОТ ПЛОТНОСТИ РЯДОВ, А НЕ ОТ СЛОЯ (уточнено c-ops на выложенном v152). На ПРЕЖНЕЙ плотности (чип 26, шаг 34) граница между рядами шла НЕ по центру: вверх 22 / вниз 10 — палец, целясь чуть ниже чипа, попадал в чип выше. На КАНОННОЙ плотности (чип 21, шаг 24) это НЕ воспроизводится: у внутренних чипов 11/10, то есть симметрично в пределах пикселя; краевой 61/45. ⇒ предмет «предсказуемость границы» ЗАКРЫТ замером, а не передан дальше. ⚠ Запись оставлена с УСЛОВИЕМ намеренно: без него она уехала бы как действующая — «верно о плотности 26/34, неверно о 21/24». Общее же остаётся верным: симметрия ПРАВИЛА не даёт симметрии ПОПАДАНИЯ, когда слои соседей перекрываются; переменная здесь — ПЛОТНОСТЬ, не слой. */ position: relative; } a.cfgc::before { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: 44px; transform: translate(-50%, -50%); } a.cfgc:hover { background: var(--ds-surface-sunken); } /* Иконка чипа (v0.91.0). Габариты в `em` — как у ядровых `.ds-badge__icon` / `.ds-eyebrow__icon`: иконка обязана масштабироваться с кеглем чипа, а не жить в пикселях. `flex-shrink: 0` — чтобы длинное имя конфигурации не сплющивало глиф. Класс МОЙ: чип — шаблонный компонент, ядро о нём не знает. */ .cfgc__icon { width: 0.9em; height: 0.9em; flex-shrink: 0; } /* Счётчик конфигураций (правка c-design 04.08): факт «сколько внутри» обязан читаться и при закрытой группе — живёт В summary, не в сворачиваемой части, приглушённым весом относительно цены. */ .tpl-tariff-count { font-weight: 400; color: var(--ds-text-muted); } /* Сноска-дисклеймер под секцией (`note` у `cards`/`text`, v0.89.0). ОДИН класс на всех потребителей идиомы — заводить `.tpl-cards-note` и `.tpl-text-note` отдельно значило бы через три релиза иметь пять почти одинаковых правил, которые разойдутся. Вид — как у `.tpl-compare-foot__note` (вторичный текст, ограниченная строка): сноска обязана читаться как сноска, а не как лид. Повод не косметический: юр-дистанция «цена ↔ дисклеймер» ±2 секции, и без слота её чинили бы перестановкой канонного порядка. */ .tpl-section-note { margin: var(--ds-space-4) 0 0; font-size: var(--ds-fs-sm); color: var(--ds-text-secondary); max-width: 44rem; } /* `note_kind: "legal"` (v0.256.0, «Шаг 2», наряд c-design 18.08): роль `.ds-legal-note` грузится в `assets/ds/index.css` — ПЕРЕД этим файлом (`build_page_shell()`: ds → theme → tpl.css) — и при равной специфичности (оба класса, 0,1,0) мой `.tpl-section-note` молча перебил бы её font-size/ color/max-width просто порядком подключения. Компаунд-селектор (0,2,0) решает это НАВСЕГДА, а не порядком строк: побеждает при любой перестановке файлов. 🔴 `margin` ДОБАВЛЕН следом (DESIGN v0.373.0, тот же наряд, уточнение 18.08): роль изначально заявляла только кегль/интерлиньяж/ширину/цвет, отступы оставались моими — и это оказалось ПЕРЕЛЁТОМ ЧЕРЕЗ НОЛЬ. Замер c-design КОРОБКИ в потоке (не узла): канон `.offer-note.rev` несёт отступы 14/9.5 = 23.5, мой `.tpl-section-note` — 16/0 = 16, разница 7.5px постоянна на всех ширинах. Без токена правка кегля увела бы нас из «+14.5 выше канона» в «−7.5 ниже» — величина ЗНАКОВАЯ, «починили кегль» ≠ «расхождение упало». Фолбэк — мой прежний `--ds-space-4 0 0`: без брендового значения роль отступы не навязывает. */ .tpl-section-note.ds-legal-note { margin: var(--ds-legal-note-mar, var(--ds-space-4) 0 0); font-size: var(--ds-legal-note-size, var(--ds-fs-sm)); color: var(--ds-legal-note-ink, var(--ds-text-secondary)); max-width: var(--ds-legal-note-max, 44rem); } /* БРЕНД-ПАТТЕРН декор-слоем секции (`pattern`, v0.87.0). Слой выбран c-design: механизм нейтральный здесь, ассет и его правила — в бренд-пакете. Раскладка один-в-один с орбами: угол + ступень размера, ничего свободного (свободное число потребовало бы inline style, а его запрещает CSP и ловит гейт). 🔴 ПЛОТНОСТЬ — ССЫЛКА НА ТОКЕН БРЕНДА С РАБОЧИМ ФОЛБЭКОМ, и это не лень. `--ds-pattern-opacity-soft/-strong` заводит c-design своим тегом; на момент этого релиза их в ДС ЕЩЁ НЕТ (проверил и тег v0.61.0, и её рабочее дерево — 0 вхождений). `var(--x, 0.06)` в этом случае НЕ немой отказ: применяется фолбэк, эффект есть, а как только она затегает токен — её значение победит автоматически, без правки шаблона. Поэтому мой же токен-гейт требует объявления только для `var()` БЕЗ фолбэка: молча умирает именно такой, а не этот. */ .tpl-pattern { position: absolute; z-index: 0; pointer-events: none; width: 200px; height: auto; } .tpl-pattern--sm { width: 140px; } .tpl-pattern--md { width: 200px; } .tpl-pattern--lg { width: 300px; } .tpl-pattern--soft { opacity: var(--ds-pattern-opacity-soft, 0.06); } .tpl-pattern--strong { opacity: var(--ds-pattern-opacity-strong, 0.12); } .tpl-pattern--tl { top: 0; left: 0; } .tpl-pattern--tr { top: 0; right: 0; } .tpl-pattern--bl { bottom: 0; left: 0; } .tpl-pattern--br { bottom: 0; right: 0; } .tpl-pattern--c { top: 50%; left: 50%; transform: translate(-50%, -50%); } /* ОБЩИЙ CTA под рядом карточек (`cards.cta`, v0.86.0). Одно действие на все карточки ряда — центрируем под сеткой, отступ ритмом секции. Кнопка своих размеров не получает: она ядровая `.ds-btn--lg`, шаблон задаёт только МЕСТО. Тот же раздел труда, что у орбов: размещение моё, вид — ядра. */ .tpl-cards-cta { display: flex; justify-content: center; margin-top: var(--ds-space-6); } /* ТАБЛИЧНАЯ ФОРМА тарифного блока (form:"table", наряд integrator-c2 11.08, решение владельца «таблица, как в прототипе»; CALC-MODEL.md §4-бис). 🔴 ЗДЕСЬ Я СНОШУ СВОЮ ЖЕ СТРУКТУРНУЮ ЗАЩИТУ, И ЭТО НАДО ЧИТАТЬ ВМЕСТЕ С КОММЕНТАРИЕМ ВЫШЕ. Там сказано: дефект «.ttab td a перекрашивал чип» (кегль 12.5→13.5, вес 600→800, цвет чернильный→зелёный, ширина 139→151 — замер c-design в концепте) исключён СТРУКТУРНО, потому что у чипа нет table/td-контекста. Таблица этот контекст ВОЗВРАЩАЕТ — значит структурной защиты больше нет, и на её место обязана встать проверяемая: 1. я НЕ пишу ни одного правила вида `.ttab td a` / `.ttab a` — по построению нет конкурента, который перебил бы `.cfgc` по специфичности (у `.cfgc` (0,1,0), у `.ttab td a` было бы (0,1,2) и оно бы выиграло); 2. `.cfgc` выше задаёт цвет, кегль, вес и декорацию ЯВНО, а не наследованием — то есть даже унаследованные от таблицы значения до чипа не доходят; 3. проверка — НЕ рассуждением: тест сверяет обе формы на СМЕШАННОМ наборе чипов (часть с href, часть без), а равенство computed снимается рендером. Структурный довод здесь недостаточен by design: он и в прошлый раз звучал убедительно. Тот, кто соберётся добавить сюда `.ttab td a { … }`, — прочти пункт 1 и сначала объясни, почему чип это переживёт. */ .tpl-ttab-wrap { /* Три колонки на 360px не помещаются. Прокрутка обязана жить ЗДЕСЬ, иначе таблица роняет горизонтальный скролл ВСЕЙ страницы — дефект, невидимый для boundingBox секции (переполнение вытекает за коробку, коробка в норме). */ overflow-x: auto; -webkit-overflow-scrolling: touch; } .ttab { width: 100%; border-collapse: collapse; text-align: left; } /* 🔴 ТИПОГРАФИКА ТАБЛИЦЫ ТАРИФОВ — ПЯТЬ ЧИТАТЕЛЕЙ К ПЯТИ ТОКЕНАМ (v0.218.0; `--ds-ttab-*`, DESIGN v0.290.0). Значения ЖИЛИ НА ЖИВОМ И НЕ ЧИТАЛИСЬ НИКЕМ: у величины был автор, но не было читателя — зеркало нашей же формы «носитель без роли». Своих чисел здесь нет ни одного, только имена. 🔴 ЗАМЕР ПО ШАГАМ, И ОН ПОКАЗЫВАЕТ ЛОВУШКУ ПРИЁМКИ ПО ИТОГУ (канон 321, ряды 61/69/48/48/48): шаг 0 как есть 330 · 71/67/49/49/49 1 lh: normal 321 · 62/67/49/49/49 ← ИТОГ РОВНО КАНОННЫЙ ПРИ ЧЕТЫРЁХ НЕВЕРНЫХ РЯДАХ 2 + кегль 21 330 · 68/67/50/50/50 3 + единица 11 330 · 68/67/50/50/50 (внутри строки — высоту не двигает) 4 + метка 9.5 327 · 65/67/50/50/50 5 + поля ячейки 11 317 · 63/67/48/48/48 ⇒ приняв «321» на первом шаге, мы закрыли бы предмет с четырьмя неверными рядами. Приёмка идёт ПО РЯДАМ, и это правило integrator-c2, проверенное здесь на числах. ⚠ ВКЛАД СВОЙСТВА ЗАВИСИТ ОТ СТОПКИ: тот же `lh` до кегля даёт −9, после — +9 к первому ряду. Поэтому каждое число выше названо ВМЕСТЕ с шагом, на котором снято, а не само по себе. 📌 Итог: ряды 3·4·5 сошлись ТОЧНО (48 = 48), первый +2, второй −2, таблица 317 против канонных 321 — мы теперь НИЖЕ на 4, и это остаток разной природы, а не общий перевес. */ .ttab tbody th { font-size: var(--ds-ttab-price-size, inherit); line-height: var(--ds-ttab-price-lh, var(--ds-lh-normal, 1.5)); } .ttab tbody th small { font-size: var(--ds-ttab-unit-size, 1em); } .ttab .rmark { font-size: var(--ds-ttab-rmark-size, 12px); } .ttab th, .ttab td { padding: var(--ds-ttab-cell-pad, var(--ds-space-3)); border-bottom: 1px solid var(--ds-border-default); vertical-align: top; } .ttab thead th { font-size: 13px; font-weight: 600; color: var(--ds-text-muted); white-space: nowrap; } .ttab tbody th[scope="row"] { font-weight: 700; color: var(--ds-text-primary); white-space: nowrap; } .ttab small { font-size: 12px; font-weight: 400; color: var(--ds-text-muted); } /* 🔴 ВЫДЕЛЕННАЯ СТУПЕНЬ — ЗЕРКАЛО, А НЕ ЗАЛИВКА (v0.133.0; замер канона + встречный замер c-design). Прежняя редакция красила СТРОКУ в `--ds-surface-raised` (#ECF2F2, поверхность неактивного контрола) — то есть изобретала третье поведение. Канон: выделенная строка: ЯЧЕЙКИ #EDF6E3, чипы внутри БЕЛЫЕ обычные строки : ячейки прозрачны, чипы #EDF6E3 Выделение у канона — ОТНОШЕНИЕ между соседями, а не значение цвета: тот же зелёный носят и выделенные ячейки, и обычные чипы, а разводит их инверсия. ⚠ Фон — на ЯЧЕЙКАХ, не на ``: у строки фон рисуется под ячейками и пропадает, как только у ячейки есть свой. Мой прежний замер `tr.hi` дал `rgba(0,0,0,0)` и выглядел как «канон ничего не красит» — я мерил элемент, который в таблице фон и не несёт. */ /* 🔴 ЗАЛИВКУ ЯЧЕЕК ОТДАЛ ЯДРУ (v0.134.0): `.ds-row--picked > th/td` появился в `DESIGN v0.171.0`, и держать своё второе определение того же предмета — будущее расхождение, которого никто не заметит в момент появления. Здесь остаётся ровно то, чего правило ядра ДОСТАТЬ НЕ МОЖЕТ: побеление чипа. Ядро целит `.ds-badge`, а чип конфигурации — `.cfgc`, шаблонный класс (и у канона он тоже свой, `.cfgc`, а не бейдж). Одно правило вместо двух. */ .ttab tr.hi .cfgc { background: var(--ds-surface-picked-chip); } /* Метка ступени. Цвет — `--ds-color-accent` (тем же токеном красит акцентный текст ядро: badge/mark). ⚠ Изобретённый токен здесь стоил бы молча: неизвестная var делает объявление НЕВАЛИДНЫМ, свойство просто не применяется — ни ошибки, ни красного гейта. Поймал на себе в этой же правке: писал `--ds-text-accent` и `--ds-border-muted`, в ДС нет ни того, ни другого. */ .rmark { display: block; margin-top: var(--ds-space-1); font-size: 12px; font-weight: 600; color: var(--ds-color-accent); white-space: nowrap; } /* Ячейка состава: те же flex-правила, что у аккордеонной .tpl-tariff-chips — раскладка чипов одна на обе формы, различается только обёртка строки. */ .cfgcell { /* 🔴 ЯЧЕЙКА ОСТАЁТСЯ ЯЧЕЙКОЙ — `display: flex` СНЯТ (v0.211.0; ведущий носитель по замеру c-ops, −111 из остатка). Я делал раскладку чипов флексом «как у аккордеонной полосы» — и тем самым ЗАМЕНИЛ табличный поток на флексовый: у флекса каждый ряд получает свой зазор 8 и полную высоту чипа, у строчного потока переносы стоят дешевле. ⚠ Своего `display` тут не пишу вовсе: у `` он `table-cell` ПО УМОЛЧАНИЮ, и объявить его значило бы завести второго автора тому, что и так верно. Снятие — не «поставить другое значение», а убрать лишнее. ЗАМЕР (моя сборка против канона): @390 508 → 480 при канонных 480 · @768 421 → 408 при 409 · @899/901/1366 332 → 330 при 321. ⚠ Зазор между чипами теперь даёт СТРОЧНЫЙ ПОТОК (пробелы разметки), как у канона; `gap` в табличной ячейке не действует и потому снят тоже. */ min-width: 22ch; } /* ⚠ Поля ячейки состава по канону 9px 12px (замер c-design). Доля МАЛАЯ — на 1366 без переносов это +3 на ячейку, — и правится вместе с чипом, а не вместо: ведущая величина здесь ширина чипа. 🔴 СЕЛЕКТОР С ЭЛЕМЕНТОМ, И ЭТО ЗАМЕР, А НЕ ВКУС: рядом живёт `.ttab td` (0,1,1), и правило на голом `.cfgcell` (0,1,0) проиграло бы ему по СПЕЦИФИЧНОСТИ — оказалось бы мёртвым при зелёной сборке. */ .ttab td.cfgcell { padding: 9px 12px; } /* Карусель героя (hero.slides[]): контейнер/слайды/точки/стрелки и их состояние .is-active — теперь ВЛАДЕЕТ ЯДРО ДС (components/carousel/carousel.css, DESIGN v0.19.0). Здесь остаётся только раскладка панели внутри слайда (зона шаблона): центрируем ds-компонент (купон/аудит). Две площадки, один хелпер: 1) слайд БЕЗ copy — панель центрируется на всю площадь слайда (как было); 2) слайд С copy (v0.40.0) — обёртка внутри .ds-hero__media центрирует панель в ПРАВОЙ КОЛОНКЕ, паритет с эталоном (.promo-visual{justify-content:center}, сверка c-design-2). Центруем именно обёрткой, а не флексом на самом .ds-hero__media: тот глобально сломал бы .ds-media-stack{margin-left:auto} слайда-1 — чат-сцена уехала бы от правого края. */ /* ПРЕИМУЩЕСТВА У ФОРМЫ (`form.aside.perks[]`, v0.108.0; 4 значка 19×19 по разбору c-design). Список ШАБЛОННЫЙ: у ядрового `.ds-card__checks` каждый пункт уже несёт галочку `::before`, и значок стал бы ВТОРОЙ меткой строки — здесь метка одна. Карточка формы тёмная, поэтому цвет берём от неё (currentColor), своего не объявляем. */ .tpl-perks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--ds-space-2); /* Канонные кегль и интерлиньяж пункта (`--ds-plate-item-*`, DESIGN v0.215.0): 15.5/1.45 против наших 16/1.2. ⚠ Наш пункт был НИЖЕ канонного (38 против 45) — «список длинный» было бы неверным диагнозом: он короче, а плита выше по другим причинам. Фолбэк = прежние значения (соседи не двигаются). */ font-size: var(--ds-plate-item-size, inherit); /* 🔴 ФОЛБЭК = ПРЕЖНЕЕ ЗНАЧЕНИЕ, А НЕ «НЕЙТРАЛЬНОЕ». Первая редакция ставила здесь `inherit`, а у `.tpl-perk` снимала `--ds-lh-tight` — и для брендов БЕЗ токена это меняло интерлиньяж с 1.2 на унаследованный 1.5: замер izibuh показал секцию заявки короче на 16 px. «Нейтральное умолчание» и «прежний рендер» — разные вещи, и второе здесь обязательно. */ line-height: var(--ds-plate-item-lh, var(--ds-lh-tight)); } .tpl-perk { display: flex; align-items: flex-start; gap: var(--ds-space-2); /* 🔴 ИНТЕРЛИНЬЯЖ ПУНКТА — КАНОННЫЙ И ПРИХОДИТ СВЕРХУ (v0.170.0). Свой `--ds-lh-tight` (1.2) стоял здесь и ПЕРЕБИВАЛ ролевой `--ds-plate-item-lh` (1.45), объявленный на списке: замер показал пункт 38 при канонных 45 — то есть роль доезжала до `ul`, а рисовал `li`. Четвёртая форма семейства «значение + носитель + связь», ровно та, что я нашёл у ядра утром, и снова у себя. Наследование оставляем: один источник на величину. */ line-height: inherit; } /* ДВА ТИПОГРАФИЧЕСКИХ УРОВНЯ В ПУНКТЕ (замер канона: имя 15.5/600, описание 14/500 приглушённое). Кегли — ИМЕНОВАННЫЕ ступени шкалы (`md` 16 и `sm` 14), а не канонные 15.5: своё число здесь стало бы вторым источником рядом с типошкалой ядра. Приглушение — прозрачностью, а не цветом: карточка формы тёмная, и токен светлого текста дал бы на ней обратный эффект. */ .tpl-perk__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .tpl-perk__title { font-size: var(--ds-fs-md); font-weight: var(--ds-fw-semibold); } .tpl-perk__text { font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-medium); opacity: 0.78; } .tpl-perk__icon { flex: none; width: 19px; height: 19px; opacity: 0.9; } /* Ссылка в пункте списка панели (`audit.items[].href`, v0.112.0). Цвет — от карточки (currentColor), подчёркивание появляется на наведении: пункт остаётся пунктом списка, а не превращается в ряд синих ссылок. */ .tpl-check__link { color: inherit; text-decoration: none; } .tpl-check__link:hover { text-decoration: underline; } /* ПРОМО-ПАНЕЛЬ СЛАЙДА — ТРИ КАРТОЧКИ (`panel: "promo"`, v0.111.0; решение владельца, форма — замер канона c-design: значок 58×58, величина 23px/900, заголовок 13.5px/700, текст 12px/500). Компонента в ядре ДС нет (проверено на пине v0.138.0: badge…stepper, промо- карточки среди них нет) — поэтому классы шаблонные и композиция на токенах. 🔴 Кегли — ИМЕНОВАННЫЕ ступени шкалы (`xl` 22 · `sm` 14 · `xs` 12), а не канонные 23/13.5/12: своё число рядом с типошкалой ядра стало бы вторым источником на один предмет. Габарит значка (58) — геометрия, а не типографика, его беру как есть. Ряд переносится: в узкой колонке слайда три карточки по 355 не встают, и перенос честнее сжатия — текст остаётся читаемым. */ .tpl-pcards { /* 🔴 `width: 100%` — не косметика. Обёртка панели центрирует содержимое гридом (`place-items: center`), поэтому ряд получал ШИРИНУ ПО СОДЕРЖИМОМУ (замер: 759px при доступных 1200) и три карточки переносились в два ряда — расхождение с каноном, где они в одну строку. 🔴 15.08, НАРЯД «СДЕЛАТЬ ГРИДОМ» НЕ БЕРУ, И ЭТО ЗАМЕР, А НЕ СПОР. Основание наряда: у канона `.promo-grid` — grid, колонки 354.66 ×3, дети 355×141 равные; у нас флекс и высоты 185 · 203 · 203 ⇒ «правка одной строкой». Собрал на ЖИВОМ конфиге: носитель `.tpl-pcards` шириной **494** — он лежит ВНУТРИ панели героя, а канонный ряд идёт во всю ширину секции (≈1088). При 494 три колонки дают карточки **154×314** вместо канонных 355×141. ⇒ у нас это не ряд, а СТОЛБИК: карточки 355 не помещаются по три и переносятся, поэтому «185 · 203 · 203» — высоты трёх СТРОК, а не ряда. Равновысокость нельзя дать ряду, которого нет: предмет — ГДЕ живёт носитель, а это структура, а не строка CSS. Числа отданы наверх. */ width: 100%; display: flex; flex-wrap: wrap; gap: var(--ds-space-4); justify-content: center; } /* Слайд «текст сверху, панель под ним» (`copy_place: "top"`, v0.172.0). Копи-блок получает ширину СОДЕРЖИМОГО контейнера — тем же выражением из двух объявленных токенов, что и ряд плиток: два места, одна величина, один источник. Вертикальный зазор — шаг шкалы, своего числа здесь нет. ⚠ ВЫРАВНИВАНИЕ ТЕКСТА НЕ ЗАДАЮ: у канона я его не мерил, а поставить «по центру, как красивее» значило бы завести вид без замера. Наследуется левое, как во всех прочих слайдах; если у канона иначе — это строка c-design. */ .tpl-slide-stack { display: grid; gap: var(--ds-space-8); padding-inline: var(--ds-container-pad); } .tpl-slide-stack > * { max-width: calc(var(--ds-container-max) - 2 * var(--ds-container-pad)); margin-inline: auto; width: 100%; } /* Панель внутри стопки поле уже получила от неё — снимаем её собственное, иначе гаттер удвоится (тот же случай, что у `--bare` внутри `.ds-hero__inner`). */ .tpl-slide-stack > .tpl-carousel__panel--bare { padding-inline: 0; } /* 🔴 РЯД ТРЁХ ПЛИТОК — ТОЛЬКО ТАМ, ГДЕ У НЕГО ЕСТЬ КАНОННАЯ ШИРИНА (v0.171.0). Путь канона (замер c-design, тег `concept-v0.30.20-draft`, 1366): .promo-grid ← .wrap (1088) ← .slide.slide-promo (во всю ширину вьюпорта) ряд 1088 · колонки 354.66 ×3 · зазор 12 · дети 355×141 ⇒ ширину даёт КОНТЕЙНЕР слайда, а панели, аналогичной нашей, у канона там нет. ⚠ ПОЭТОМУ ГРИД — НЕ БЕЗУСЛОВНЫЙ. У нас промо-слайд несёт копи-колонку, и панель получает 494: замер показал, что три колонки там дают карточки **154×314** вместо канонных 355×141 — то есть грид не выравнивает, а сжимает. Правило вешаю на `--bare` (слайд БЕЗ копи-колонки) — единственное место, где у ряда есть ширина контейнера. Пока конфиг держит `copy` у промо-слайда, ряд остаётся столбиком, и это НЕ дефект раскладки, а состав: убрать копи-колонку — решение `c-web-1`, у меня к нему всё готово. ⚠ 355 явно не задаю: у канона `.promo-grid` — роль, её второй экземпляр в `#srv` даёт те же 1088 при ЧЕТЫРЁХ колонках. Число колонок следует из состава, ширина ряда — из контейнера. Зазор канонный: 12 (`--ds-space-3`). */ .tpl-carousel__panel--bare .tpl-pcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ds-space-3); } /* 🔴 ШИРИНУ РЯДУ ДАЁТ КОНТЕЙНЕР — И ЕГО ПРИШЛОСЬ ЗАВЕСТИ ЯВНО. У канона ряд лежит в `.wrap` шириной 1088 внутри полноширинного слайда; у нас голая панель слайда — 1314 (вьюпорт минус гаттер), своего контейнера в ней нет. ⚠ ОПЫТ, который это и показал: сняв потолок карточки (355), я получил колонки **430** вместо канонных 354.66 — то есть прежние «355» выходили не из контейнера, а из МОЕГО ЖЕ ПОТОЛКА, случайно совпавшего с каноном. Число, которое сходится по случайности, — не сошедшееся число. ⇒ ряду даётся ширина СОДЕРЖИМОГО контейнера, посчитанная из двух объявленных токенов, а не литералом: контейнер border-box, значит content = max − 2·pad. Потолок карточки в этой ветке снимаем: иначе он снова подменит источник. */ .tpl-carousel__panel--bare .tpl-pcards { max-width: calc(var(--ds-container-max) - 2 * var(--ds-container-pad)); margin-inline: auto; } .tpl-carousel__panel--bare .tpl-pcard { max-width: none; } .tpl-pcard { /* Глобального border-box в ядре нет (решение c-design отложено), поэтому объявляю локально: иначе паддинг и рамка прибавляются к max-width, и карточка выходит шире, чем сказано. */ box-sizing: border-box; flex: 1 1 260px; max-width: 355px; display: flex; flex-direction: column; align-items: flex-start; gap: var(--ds-space-1); padding: var(--ds-space-6); border-radius: var(--ds-radius-lg); background: var(--ds-surface-raised); border: 1px solid var(--ds-border-default); } .tpl-pcard__icon { width: 58px; height: 58px; color: var(--ds-color-primary); } .tpl-pcard__icon svg { width: 100%; height: 100%; } .tpl-pcard__value { font-size: var(--ds-fs-xl); font-weight: var(--ds-fw-black); line-height: var(--ds-lh-tight); } .tpl-pcard__title { font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-bold); } .tpl-pcard__text { margin: 0; font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-medium); color: var(--ds-text-secondary); } /* 🔴 СЕТКА «ПОЧЕМУ МЫ» (`panel: "why"`, v0.238.0; наряд владельца 17.08 через c-design — DESIGN v0.340.0 несёт карточку `.ds-card--why`, сетка ВОКРУГ неё моя). Числа — замер канона (`.power-grid`/`.wcard`, concept-latest.html): база (≥901) grid 2×1fr, gap 14, margin-top 32, max-width 760 · 761…900 grid 1×1fr, gap 12, margin-top 18 · ≤760 ГОРИЗОНТАЛЬНАЯ ЛЕНТА со scroll-snap (карточки не переносятся, а прокручиваются) — та же механика, что канон держит и у `.promo-grid`, найдена ПРЯМЫМ чтением канона (наряд называл только «колонка (flex)» для узкой ширины — проверка канона дала больше: там не простая колонка, а лента; см. письмо c-design). `.tpl-pcards` (`panel: "promo"`) этой ленты СЕГОДНЯ не несёт — известный, отдельно объявленный гэп, не в этом наряде. */ .tpl-why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 32px; max-width: 760px; } @media (max-width: 900px) { .tpl-why-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 18px; } } @media (max-width: 760px) { .tpl-why-grid { display: flex; flex-wrap: nowrap; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scroll-padding-left: 2px; padding-bottom: 6px; scrollbar-width: none; } .tpl-why-grid::-webkit-scrollbar { display: none; } .tpl-why-grid > * { flex: 0 0 78%; min-width: 78%; scroll-snap-align: start; } .tpl-why-grid > *:last-child { margin-right: 16px; } } /* ИЛЛЮСТРАЦИЯ КАРТОЧКИ (`cards.items[].illustration`, v0.114.0; спецификация — замер канона c-design). Абсолют в правом нижнем углу, НЕ заменяет значок: значок остаётся в потоке у заголовка, это два разных слота. 🔴 Размер — свойство РАСКЛАДКИ, не ассета: один файл идёт 168×134 у больших карточек и 103×83 у обычных. Пока варианта «большая карточка» в схеме НЕТ (сетка 1→2→3 равными), поэтому все получают ОБЫЧНЫЙ габарит — это названное отступление, а не молчаливое: появится вариант — размер задаст одна строка через `--tpl-illu-w`. `currentColor` внутри ассета работает только у инлайна, здесь — цвет несёт сам файл (обводка), это осознанно: инлайн 200×160 в каждой карточке раздул бы HTML, а тема иллюстрации не касается. */ /* Контекст позиционирования для НАКЛАДОК карточки (иллюстрация и/или паттерн). Класс один на оба случая: два класса с одинаковыми объявлениями разъехались бы при первой правке, а `position` на ядровом `.ds-card` трогать нельзя. */ .tpl-card--decor { position: relative; overflow: hidden; } /* Паттерн в углу карточки: место и плотность из канона, ступень `card` ядра (0.10). `data-ds-decor` обязателен — иначе секционное правило свечения поднимет декор в поток и над контентом (см. историю v0.99.0). */ .tpl-card__pattern { position: absolute; right: 0; bottom: 0; width: 148px; height: auto; opacity: var(--ds-pattern-opacity-card); pointer-events: none; z-index: 0; } .tpl-card__illu { position: absolute; right: var(--ds-space-4); bottom: var(--ds-space-4); width: var(--tpl-illu-w, 103px); height: auto; pointer-events: none; opacity: 0.9; } /* 🔴 РЕЗЕРВ ПОД ИЛЛЮСТРАЦИЮ ДЕРЖИТ БРЕНД — ОКОНЧАТЕЛЬНО (v0.234.0). За вечер он трижды менял держателя, и дважды предмет оставался БЕЗ него: v0.230.0 мой calc → v0.231.0 снял (наряд «доводит c-design») → c-design снял своё в DESIGN v0.328.0 (дыра: заезд 97 @390, 162 @1366) → v0.233.0 вернул мой → DESIGN v0.332.0/v0.334.0 вернул свой ПО РОЛЯМ ⚠ Если оставить моё, оно ПОБЕДИТ его молча: (0,2,0) против (0,1,0), и три его числа станут мёртвыми — тот самый способ, который я сам и назвал. ⇒ снимаю СВОЁ И ПИНЮ ТОТ ЖЕ ТЕГОМ ПАКЕТ, ГДЕ ЕГО ОБЪЯВЛЕНИЯ ЖИВЫ (v0.334.0): снятие и приход держателя не должны быть двумя разными подачами — именно так и открылась дыра. Гейт ниже проверяет ПИН, а не переписку. 📌 И числа у него теперь по РОЛЯМ, чего у меня не было вовсе: обычная 112, крупная 94 ниже 901 и 186 с 901 — наша картинка 103 против канонных 87 на узком, поэтому канонные 78 дали бы заезд. Его форма точнее моей. */ /* ЧИПЫ ПЕРВОГО ЭКРАНА (`hero.chips[]`, v0.107.0; строка A3 сверки). Компонента чип-строки в ядре ДС нет (проверено на пине v0.131.0), поэтому классы шаблонные, композиция — на токенах. Значок наследует currentColor, размер — доля кегля строки: значок и текст обязаны расти вместе, иначе на узких строка «поедет» относительно иконки. ⚠ Это НЕ плитка `ds-stat`: у чипа одна строка и значок, у плитки — значение с подписью. Разные элементы, разные ключи, и смешение уже случалось. */ .tpl-hero__chips { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--ds-space-2); align-items: flex-start; } .tpl-hero__chip { display: flex; align-items: center; gap: var(--ds-space-2); font-size: var(--ds-fs-sm); line-height: var(--ds-lh-tight); color: var(--ds-text-secondary); } /* Одиночный чип у карточки цены (`hero.aside_chip`): та же форма, другая роль — условие акции, а не свойство тарифа. Прижат к панели, поэтому центрируется вместе с ней и не тянет левый край колонки. ⚠ Блок был записан ДВАЖДЫ подряд, слово в слово (снято в v0.129.0): второй экземпляр ничего не менял и потому не был виден ни в одном замере. */ .tpl-hero__chips--aside { align-items: center; margin-top: var(--ds-space-3); } .tpl-hero__chip-icon { flex: none; width: 1.15em; height: 1.15em; color: var(--ds-color-primary); } /* Значок телефона в полоске — из набора ДС (v0.107.0), поэтому размер задаём мы, а рисунок принадлежит ядру. Прежний запечённый SVG был 15×15. */ .tpl-topbar__tel-icon { width: 15px; height: 15px; flex: none; } .tpl-topbar__lk-icon { width: 14px; height: 14px; flex: none; margin-inline-end: var(--ds-space-1); } /* ИДЕНТИФИКАЦИЯ ЮРЛИЦА В ПОДВАЛЕ (`footer.legal_entity[]`, v0.106.0). `
` — элемент контактных данных владельца документа, а не украшение; курсив браузера снимаем: вид не должен нести смысл «цитата». Компонента в ядре ДС нет, поэтому композиция на токенах и класс шаблонный. */ /* 🔴 ПУНКТ-ФАКТ В КОЛОНКЕ ПОДВАЛА (`footer.columns[].items[]` без `href`, v0.163.0). Реестровая запись — четыре ФАКТА, и адреса у них нет ни в одном нашем источнике; сочинять URL в юр-блоке нельзя. ⚠ Отдельный класс, а НЕ `ds-footer__link`: тот несёт цвет ссылки и ховер, то есть ОБЕЩАНИЕ ПЕРЕХОДА. Обещание без перехода — та же «ссылка в никуда», только выраженная видом, а не адресом. Цвет берём тем же токеном роли, что и ссылки: факт стоит в одном столбце с ними и не должен читаться как другой сорт текста; отличать его должно ОТСУТСТВИЕ реакции, а не другой оттенок. */ .tpl-footer__fact { color: var(--ds-footer-link, var(--ds-text-muted)); font-size: var(--ds-fs-sm); cursor: default; text-decoration: none; } .tpl-footer__entity { font-style: normal; margin-top: var(--ds-space-4); /* Цвет НЕ задаём: подвал уже красит своё содержимое, а свой цвет здесь стал бы вторым источником на один предмет — сменят тему подвала, блок отстанет. */ } .tpl-footer__entity-line { margin: 0 0 var(--ds-space-1); font-size: var(--ds-fs-sm); line-height: var(--ds-lh-base); opacity: 0.85; } /* ТИХАЯ СТРОКА НАД ЗАГОЛОВКОМ (`pretitle`; канонный `.h2a`, 11 мест). 🔴 СНАРУЖИ h1/h2 (v0.105.0, вердикт c-seo): заголовок несёт РОВНО ОДНО утверждение, кикеры и тихие строки в его текст не входят. Внутри заголовка (как было в v0.103.0) accessible name читался склейкой — довод доступности, не выдачи. 🔴 РАЗМЕР — ИМЕНОВАННАЯ СТУПЕНЬ, а не доля кегля. Снаружи `em` от заголовка недоступен, а у героя кегль РЕСПОНСИВНЫЙ (3xl / 4xl ≥768 / 2xl ≤479): повторить эту лестницу у себя значило бы завести ВТОРОЙ источник на один предмет — ровно то, чего мы избегаем весь день. Ступени подобраны по замеру канонной доли: секции 0.64 × 28 = 17.92 → `lg` (18); герой 0.64 × 36 = 23.04 → `xl` (22). ⚠ Следствие названо: на ≥768 заголовок героя растёт до 48px, а тихая строка остаётся 22 — канонная доля дала бы 30.7. Нужна третья ступень — её заводит c-design, механизм подхватит без правок шаблона. */ .tpl-pretitle { /* 🔴 ЗАЗОР ДО ЗАГОЛОВКА СНЯТ (v0.217.0; наряд integrator-c2, ход «б»). У канона тихая строка живёт ВНУТРИ `h2` (`span.h2a`), то есть зазора между ними нет вовсе. Внутрь узел не переносим — это ЗАКРЫТОЕ решение v0.103.0 по ДОСТУПНОСТИ (2.4.6): внутри `h2` accessible name склеивался в одну строку без паузы, а навигация по заголовкам давала склейку; `c-seo` тогда сам сузил свой довод о выдаче. Виза на возврат внутрь ЗАПРОШЕНА И НЕ ДАНА: «канон диктует ВИД, а не ПОВЕДЕНИЕ — у канонного span вопроса об accessible name не стояло вовсе». 📌 ЦЕНА ОТЛИЧИЯ НАЗВАНА ЧИСЛОМ И ПЕРЕМЕРЕНА (v0.103.0 давала ≈16px/узел — число протухло; свежий замер `c-design` 17.08 ≈3px/узел, ≈33px на 11 узлах). Зазор снят здесь же (`margin:0`); остаток — ЛИШНИЙ СТРОЧНЫЙ БОКС отдельного узла, он остаётся по решению о доступности. Отклонение записано числом в `DEVIATIONS.md` (f7c_hq) — решение c-tpl + c-seo, v0.103.0, подтверждено ГП 17.08 (П631: наряд на перенос внутрь `h2` отменён, потому что не видел этого решения при выдаче). */ margin: 0; font-size: var(--ds-fs-lg); font-weight: var(--ds-fw-medium); line-height: var(--ds-lh-tight); color: var(--ds-text-secondary); } .tpl-pretitle--hero { font-size: var(--ds-fs-xl); } /* 🔴 ПОРОГ 1250 НА ЧИПАХ СНЯТ (v0.129.0) — ОН БЫЛ ИЗМЕРЕН НА ДРУГОМ ОБЪЕКТЕ. v0.121.0 прятал `.tpl-hero__chips` ниже 1250 со ссылкой на замер канона: «0 чипов на 1024/1100/1240, ШЕСТЬ — с 1280». Число «шесть» и было уликой — чипов у нас ЧЕТЫРЕ, и оно лежало в моём же комментарии. Прямой замер канона (`concept-v0.30.20-draft`, 15.08, вьюпорты 768…1440) развёл два элемента: .fchip ШЕСТЬ пилюль-статусов, ПРАВАЯ колонка (Бэкап · Менеджер · ФНС · Обновление · SQL · ИТС) — display:none ниже 1280 ← порог ИХ .trust ЧЕТЫРЕ строки со значками, ЛЕВАЯ колонка (ИТС Техно в тарифе · SQL входит · выделенный менеджер · …) — display:flex на ВСЕХ ширинах 768…1440, не скрыты нигде ← это наши чипы Три текста из четырёх совпадают ДОСЛОВНО: предмет опознан по содержимому, а не по имени. Шести пилюль у нас нет вовсе (объявленное отступление №3) — порог остался без своего объекта и снят. 🔴 И СВОЙ УЩЕРБ НАЗЫВАЮ. Правило било по БАЗОВОМУ классу, а его несёт ещё и одиночный чип у карточки цены (`hero.aside_chip`, модификатор `--aside`). Замер живого 15.08: «+15 дней в подарок и F7: диск 20 ГБ, почта, CRM» — display:none на 1250 · 1100 · 1024 · 900 · 760 · 390. Обещание владельца не доезжало НИ ДО ОДНОГО телефона, и об этом никто не сообщил: дифф снимали на 1440 и 1024, где оно видно, и заметили лишь МЕСТО строки. ⚠ Следующему: порог, написанный для роли-списка, съедает роль-одиночку через общее имя. Скрывать можно только МОДИФИКАТОР роли, не базовый класс — это стережёт тест «ни одно правило не гасит базовый .tpl-hero__chips». */ /* СТРОКА ЦЕНЫ ДЛЯ УЗКОГО ЭКРАНА (`hero.price_line`, v0.120.0). На широком цену держит карточка рядом с заголовком — строка не нужна и скрыта; на телефоне карточка уезжает вниз, и цена обязана остаться на первом экране. Порог 760px — ИЗМЕРЕННЫЙ c-design (block на 420…720, none на 767), не моя догадка: своей точки слома под чужой предмет не завожу. 🔴 Скрытие — `display:none`, а не визуальное прятание: строка ДУБЛИРУЕТ цену из карточки, и на широком экране скринридер прочитал бы её дважды. */ /* 🔴 КЕГЛЬ/ИНТЕРЛИНЬЯЖ — РОЛЬ, А НЕ ШКАЛА (наряд c-design 17.08, замер @390): канон 14px/normal, одна строка, высота 16px; было 18px без явного line-height (наследовался `--ds-lh-base`=1.5 → 27px, перенос в две строки при ширине БОЛЬШЕ канонной — виновен кегль, не теснота). Ширина у нас 358 против канонных 338, значит перенос ломал не контейнер. */ .tpl-hero__price { display: none; margin: var(--ds-space-3) 0 0; font-size: var(--ds-fs-sm); line-height: var(--ds-lh-tight); font-weight: var(--ds-fw-bold); } @media (max-width: 760px) { .tpl-hero__price { display: block; } } /* ВЫСОТА ПЕРВОГО ЭКРАНА (`hero.flush`, v0.119.0). Канон даёт герою 0/0, ядро — 96/96 на ≥768 (`.ds-hero{padding: var(--ds-space-24) 0}`): минус 192px. 🔴 Правило БЕЗ медиазапроса и той же специфичности, что ядровое, но ПОЗЖЕ по порядку подключения (tpl.css грузится после ds/index.css) — поэтому выигрывает и на ≥768, и ниже. Вес не поднимаю: гонка специфичности запрещена и не нужна. ⚠ Класс ОПТ-ИН: у брендов без ключа ничего не меняется. Токен --ds-space-24 тронуть нельзя — его же читает отступ подвала. */ .tpl-hero--flush { padding-top: 0; padding-bottom: 0; } /* СФЕРЫ: позиций у меня БОЛЬШЕ НЕТ — они живут в бренд-теме именами (`.ds-sphere--hero-center` и т.д., DESIGN v0.152.0). Прежние `tpl-sphere--tl/tr/…` сняты вместе со словарём углов: канонные координаты ПРОЦЕНТНЫЕ (44 % · 4 % · 7 %, сходятся на 1280/1440/1920 с точностью ≤1px), а вынос `-32px` резал сферу краем ПО ПОСТРОЕНИЮ. Шаблон теперь не знает ни одной координаты — и это правильно: геометрия канона принадлежит бренду, а не носителю. */ /* ПОРЯДОК ГЕРОЯ НА УЗКОМ ЭКРАНЕ (v0.102.0, наряд integrator-c2 14.08). Замер c-design @390: карточка цены была на 1144 (ниже сгиба на 300); из всех вариантов порог берёт только перестановка — карточка ПЕРЕД плитками даёт 632, выше сгиба на 212. Копирайт бессилен: плитки 372px, лид 245 — снять лид целиком и то мало. И это ВОЗВРАТ К МАКЕТУ: в каноне на 390 карточка на 664. Механизм: колонка героя режется на две СВОИ группы, а на точке слома ядра становится `display: contents` — группы поднимаются в ту же сетку, и порядок задают три `order` на МОИХ классах (`tpl-hero__lead`, `tpl-hero__aside`, `tpl-hero__facts`). Ни одного чужого имени: панель несёт своё имя рядом с ядровым, поэтому мой же гейт «tpl.css не трогает .ds-hero__media» (охраняет ds-media-stack слайда-1) остаётся в силе и НЕ ослаблен под эту задачу. 🔴 1023px — не круглое число, а ТОЧКА СЛОМА ЯДРА: ровно там `.ds-hero--media .ds-hero__inner` уходит в одну колонку (section.css ядра). Своей точки я не завожу — вторая точка слома на том же предмете разъехалась бы с чужой при первом же её изменении. */ /* 🔴 БАЗОВЫХ ПРАВИЛ У ГРУПП НЕТ, И ЭТО РЕШЕНИЕ, А НЕ ЗАБЫВЧИВОСТЬ. Первая редакция делала колонку и группы флексами с `gap` — на 1500 это сдвинуло купон на 12px, а плитки на 24px: флекс отменяет схлопывание отступов, и вертикальный ритм считался заново. Дефекта не видно глазом, но «композиция не поехала» стало бы неправдой. Группы оставлены обычными блоками: на широкой разметка ведёт себя ровно как до дробления колонки (замер: ноль отличий), а на узкой боксы всё равно исчезают под `display: contents`. */ /* 🔴 ПОРОГ ГЕРОЯ — 900/901, А НЕ 1023 (v0.121.0; замер c-design: канон переключает раскладку на десяти порогах, ядро знает два, совпадений НОЛЬ). Ядро схлопывает `.ds-hero--media` в одну колонку на ≤1023, канон — на ≤900. Разрыв 901…1023 = у канона две колонки, у нас одна: экран владельца ровно оттуда, а наши замеры на 390/1440 обе точки этого разрыва ПРОПУСКАЮТ по построению. ⚠ Поэтому здесь я СОЗНАТЕЛЬНО перекрываю ядровую точку слома — но только внутри своего опт-ин класса: у брендов без `hero.aside` ничего не меняется. Просить c-design сдвинуть порог в ядре нельзя: это число общее всем брендам, а канон — forbion. Радиус решает класс, а не уговор. */ /* 🔴 ЧИПЫ УХОДЯТ ВНИЗ И ВСТАЮТ В ДВА СТОЛБЦА НА УЗКОМ (v0.148.0; строки 81–82 диффа партии 5). ЗАМЕР КАНОНА @390: порядок по вертикали — h1 128 · лид 260 · кнопка 338 · цена 392 · реестр 423 · ЧИПЫ 478, то есть строки со значками стоят ПОСЛЕДНИМИ, а не сразу под заголовком; сами чипы — `flex-wrap: wrap`, ширина 338, ДВА ряда по два. 🔴 МЕХАНИЗМ КАНОНА ВЗЯТ ЕГО ЖЕ: у него `.trust { order: 9 }` — в разметке чипы стоят вторыми (после h1), а вниз их уводит ПОРЯДОК. Разметку не трогаю: на широком чипы обязаны остаться в правой клетке шахматки, и DOM-порядок там несущий. Одно правило вместо двух разметок. ⚠ ОСТАТОК НАЗЫВАЮ: у канона чипы идут ПОСЛЕ плашки реестра, у нас — после цены, но ДО реквизитов: реквизиты лежат в соседней группе (`tpl-hero__facts`), и чтобы пропустить чипы за них, пришлось бы расплющить обе обёртки и переназначить порядок ВСЕМ узлам — это тронуло бы измеренную раскладку v0.102.0 (карточка цены перед плитками, замер @390: 1144 → 632). Предмет назван числом, дешёвая половина сделана. */ @media (max-width: 900px) { /* 🔴 РИТМ ГРУППЫ ЗАДАЁТ НОСИТЕЛЬ — И ДО v0.150.0 ЕГО НЕ ЗАДАВАЛ НИКТО. Находка c-design (строка 83, которую он сперва объявил своей и вернул мне замером): у всех детей `margin: 0` — это КОНТРАКТ ЯДРА («ритм задаёт раскладка»), а `.tpl-hero__lead` был `display:block` без полей и зазора. Ядро своё выполнило, носитель — нет: зазор между заголовком, лидом и кнопками выходил РОВНО НОЛЬ. Глазами это читалось как «значки наезжают на h1» — но наезд давала сфера (её c-design закрыл в v0.190.0), а слипание строк давал отсутствующий ритм. Два разных дефекта в одном кадре. ⚠ ЗАМЕР КАНОНА @390: контейнер `grid` с `gap: 6`, но у КАЖДОГО ребёнка свой `margin-top` (16 · 16 · 8 · 9 · 13) — эффективные зазоры 22 · 22 · 14 · 15 · 19. Ритм у канона НЕРАВНОМЕРНЫЙ, одним значением он не воспроизводится, а раздавать своим детям поля нельзя: `margin: 0` — контракт ядра, и я его не переписываю ради одной секции. Беру `--ds-space-6` (24) — ближайшая ступень к доминирующим 22; расхождение с нижними 14…19 объявлено. */ .tpl-hero__lead { display: flex; flex-direction: column; gap: var(--ds-space-6); } .tpl-hero__chips { order: 9; flex-direction: row; flex-wrap: wrap; } .tpl-hero__chip { flex: 0 0 calc(50% - var(--ds-space-2)); } } /* 🔴 ОСТАТОК v0.148.0 ЗАКРЫТ: РЕЕСТР НАД ПАНЕЛЬЮ, ДОВЕРИЕ ПОСЛЕ РЕЕСТРА (v0.226.0, решение integrator-c2 16.08 по собранным парам узлов). ЗАМЕР КАНОНА @390, порядок по вертикали (пары наш ↔ канонный названы до чисел): h1 → лид → кнопки → цена → реестр → доверие → [панель] У нас было: h1 → лид → кнопки → цена → доверие → [панель] → реестр, то есть реквизиты стояли ПОД панелью, а у канона весь текст НАД ней. ⚠ В v0.148.0 я назвал это остатком и оценил как «расплющить обе обёртки и переназначить порядок ВСЕМ узлам». Оценка была верной по механизму и НЕВЕРНОЙ по цене: переупорядочивать надо не все узлы, а только МОИ. Ядровые дети (`h1`, лид, кнопки) остаются с `order: 0` и держат DOM-порядок между собой — ни одного чужого имени класса в расстановке по-прежнему нет. 🔴 РИТМ: расплющив группы, я теряю их флекс-зазор 24 — все ряды садятся на сеточный `row-gap` 48, то есть вертикальный ритм текста удвоился бы. Поэтому зазор сетки на узком становится тем же `--ds-space-6` (24) — и это ПРИБЛИЖЕНИЕ к канону с двух сторон сразу: у него внутри текста 22·22·14·15·19, а между колонкой и панелью 25, тогда как у нас между группами стояло 48. Своего числа не завожу: 24 — та же ступень, что стояла внутри группы до расплющивания. */ @media (max-width: 900px) { /* Колонка исчезает как БОКС, но не как группировка: её дети становятся элементами той же сетки, и между ними работает сеточный gap. То же и с двумя группами внутри неё — иначе доверие и реестр лежат в разных боксах и не могут встать друг за другом. */ .tpl-hero--reorder .tpl-hero__col, .tpl-hero--reorder .tpl-hero__lead, .tpl-hero--reorder .tpl-hero__facts { display: contents; } .tpl-hero--reorder .ds-hero__inner { row-gap: var(--ds-space-6); } /* Порядок — только на СВОИХ классах; `.tpl-hero__facts > *` адресует реквизиты через мою обёртку, не называя ядровое имя. */ .tpl-hero--reorder .tpl-hero__price { order: 5; } .tpl-hero--reorder .tpl-hero__facts > * { order: 6; } .tpl-hero--reorder .tpl-hero__chips { order: 7; } .tpl-hero--reorder .tpl-hero__aside { order: 8; } } /* 901…1023: ядро уже сложило сетку в одну колонку, а канон держит две. Возвращаем две ровно в этом окне и ровно для опт-ин героя. */ @media (min-width: 901px) and (max-width: 1023px) { .tpl-hero--reorder .ds-hero__inner { grid-template-columns: 1.05fr 0.95fr; } } /* 🔴 ДВУХПОЛОСНАЯ ТЕКСТОВАЯ КОЛОНКА (`hero.split_text`, v0.130.0). ЗАМЕР КАНОНА (`concept-v0.30.20-draft`, 1440 и 1024): текстовая колонка героя — САМА сетка в две клетки, три строки: h1 | чипы лид | кнопка реквизиты | — 🔴 КЛЕТКИ НЕ НАЗНАЧАЮ — У КАНОНА ЧИСТАЯ АВТОРАССТАНОВКА, и повторяю именно её. Назначь я `grid-column/row` поимённо — правило было бы привязано к сегодняшнему составу узлов, и любой новый ключ молча уехал бы в чужую клетку. Цена решения объявлена и вынесена в ОТКАЗ сборки: лишний узел (кикер, плитки) сдвигает шахматку целиком, поэтому валидатор роняет сборку с именем ключа. ⚠ Обёртки становятся `display: contents` — они группировка, а не бокс: дети поднимаются в ту же сетку. Тот же приём, что в блоке ≤900 выше; ни одного чужого имени класса в расстановке не участвует. Отношение `1.15fr 1fr` — ЗАМЕРЕНО: 558.406/485.578 на 1440 и 496.359/431.625 на 1024 дают одно и то же с точностью до 0.001, то есть это отношение канона, а не подобранное число. 🔴 ЗАЗОР — ТОКЕН НАЗНАЧЕНИЯ `--ds-hero-grid-gap` (DESIGN v0.167.0), И ЭТО ЧЕТВЁРТЫЙ ВАРИАНТ, ЛУЧШЕ МОЕГО МЕНЮ. Я предлагал выбрать между «завести ступень 44», «взять 48 с объявленным расхождением 4px» и «ждать»; в v0.130.0 стояло второе. c-design померил СЛОВАРЬ ЗАЗОРОВ КАНОНА ЦЕЛИКОМ — 12·9·14·7·8· 16·11·44·10·18·26·28·30, и 44 встречается ШЕСТЬ РАЗ. Значит это собственное значение макета, а не округление нашего: у канона своя система, к шкале ДС не сводимая, и «расхождение 4px» описывало бы несуществующее родство. ⇒ число живёт в БРЕНД-ПАКЕТЕ (forbion 44, ядро — var(--ds-space-12), izibuh как был 48), а шаблон читает ИМЯ и не знает ни одного числа. 📌 Мой инстинкт «своего числа рядом с чужой шкалой не завожу» был верен, а вывод из него — нет: я искал ступень В шкале, тогда как предмет требовал токена НАЗНАЧЕНИЯ. Не всякое чужое число обязано лечь в чужую же шкалу. Ниже 901 композиция одноколоночная — там правит блок переупорядочивания. */ @media (min-width: 901px) { .tpl-hero--split-text .tpl-hero__col { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--ds-hero-grid-gap); align-items: center; } .tpl-hero--split-text .tpl-hero__lead, .tpl-hero--split-text .tpl-hero__facts { display: contents; } } /* 3) hero.aside (v0.98.0) — панель в правой колонке ПЕРВИЧНОГО героя, когда карточка обязана быть на первом экране рядом с h1. Селектор ГРУППОВОЙ, а не второе правило с теми же объявлениями: два правила на один смысл расходятся молча (ровно тот дефект, что я поймал у себя на .cfgc). Третья площадка центрируется тем же кодом — значит и выглядит так же по построению. */ .tpl-carousel__panel, .tpl-hero__panel { display: grid; place-items: center; min-height: 100%; /* 🔴 ГАТТЕР КОНТЕЙНЕРА — обязателен, а не косметика (c-design, контракт купона v0.44.0). Декор ядра намеренно торчит наружу: .ds-coupon__hole вынесен на -min(15px, --ds-container-pad). Канон это не переполняет, потому что купон стоит В КОНТЕЙНЕРЕ, и вылет уходит в его поле. Слайд С `copy` рендерится через .ds-hero__inner — там паддинг есть. А ЭТА ветка (панель БЕЗ копи-колонки) клала панель голой: поля нет → вылет упирался во вьюпорт и давал горизонтальный скролл на узких. Я сам померил это на своей фикстуре и передал c-design как ДЕФЕКТ ЯДРА — но корень был здесь, в моей разметке (izibuh чист именно потому, что у него слайды с copy). Поле даём здесь: «плейсмент — зона шаблона», ядру незачем знать, кто его обернул. 🔴 ТОЛЬКО на --bare: у слайда С `copy` поле уже даёт .ds-hero__inner, и общий padding удвоил бы гаттер (16+16=32) — замер izibuh @360 показал сужение купона 396→364. Вопрос задал c-design, подтвердил замером я. */ } .tpl-carousel__panel--bare { padding-inline: var(--ds-container-pad); } /* Рамка карусели — сужает ЯДРОВУЮ .ds-carousel до фактической контент-ширины, чтобы вынос стрелки (.ds-carousel__arrow left/right:-54px @≥1200px, оффсет ядра) лёг в боковое поле, а не за вьюпорт. Секция полноширинная (фон), поэтому несуженная .ds-carousel растягивалась бы во всю ширину и стрелки уезжали за экран (замер c-design-2 на корне: prev −54, next 1493). Сужаем шаблонной обёрткой, НЕ оверрайдя .ds-* (§2). ⚠ Ширина = fit-content, НЕ var(--ds-container-max): ядровый .ds-hero__inner — grid (1.05fr 0.95fr), его min-content ПРЕВЫШАЕТ --ds-container-max (замер: токен 1100, реальная колонка 1132 — max-width у грида не зажимает min-content). Рамка с фикс-токеном 1100 сдавила бы герой на 32px (регресс). fit-content ужимает рамку по НАТУРАЛЬНОЙ ширине содержимого — колонка не едет (1132→1132), стрелки садятся в гаттер относительно ИСТИННОГО края, и это отслеживает контент, а не прибитое число. max-width:100% — фолбэк на узких (< контент-ширины). */ .tpl-carousel-frame { width: fit-content; max-width: 100%; margin-inline: auto; /* 🔴 КОНТЕКСТ ПОЗИЦИОНИРОВАНИЯ ДЛЯ ОРГАНОВ СЛАЙДЕРА — СТАВИТСЯ ЗАРАНЕЕ И НАМЕРЕННО (v0.229.0, парная правка с DESIGN v0.318.0). У канона `.sctrl` (точки + метка экрана) стоит ВНЕ ПОТОКА и висит над низом слайда — вклад в высоту НОЛЬ; у нас те же два узла стоят В ПОТОКЕ и берут 62 px на всех трёх ширинах. Ядро сделает свою половину — `position: absolute; bottom: 15` у `.ds-carousel__dots`. ⚠ И БЕЗ ЭТОЙ СТРОКИ ЕГО ПОЛОВИНА ОПАСНА, А НЕ ПРОСТО БЕСПОЛЕЗНА: рамка была `static`, поэтому абсолютные органы уехали бы к ближайшему позиционированному предку — то есть неизвестно куда. Поэтому строку кладу РАНЬШЕ его тега: сама по себе она инертна (позиционированных детей у рамки сегодня нет, замер: у соседей и у forbion ноль расхождений рендера), но она снимает возможность приземлить его половину в одиночку. Порядок правок не должен быть условием их безопасности. */ position: relative; } /* Отзывы-strip (reviews.paged, concept-v1.7.2): горизонтальный скролл-вьюпорт с листанием на ЯДРОВОЙ стрелке .ds-carousel__arrow (её визуал/позиция берём из ядра). Здесь — только раскладка strip'а (зона шаблона) + состояние гашения стрелки на краю: скоуплено в .tpl-reviews + data-tpl-off, чтобы НЕ рестайлить глобально DS-класс. Без JS вьюпорт скроллится/свайпается нативно. */ .tpl-reviews { position: relative; margin-top: var(--ds-space-6); } .tpl-reviews__viewport { overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x proximity; scrollbar-width: none; /* Firefox */ } .tpl-reviews__viewport::-webkit-scrollbar { display: none; } .tpl-reviews__track { display: flex; gap: var(--ds-space-4); width: max-content; } .tpl-reviews__track > .ds-review { width: var(--ds-marquee-item-width, 340px); /* тот же токен, что у ленты */ flex-shrink: 0; scroll-snap-align: start; } /* гашение стрелки на краю — template-состояние, скоуплено внутри .tpl-reviews */ .tpl-reviews .ds-carousel__arrow[data-tpl-off] { opacity: 0; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .tpl-reviews__viewport { scroll-behavior: auto; } } /* Лого в подвале (плейсмент — зона шаблона; ассет/вариант — владелец бренда). Только раскладка: инлайн-блок + отступ до описания. Визуал лого — из ассета. */ .tpl-footer-logo { display: inline-block; margin-bottom: var(--ds-space-3); } /* 🔴 Мобильный горизонтальный скролл (замер c-ops playwright@360, воспроизвёл: docScrollWidth=416 при vw=360, +56px). Причина: подвальное лого несёт АТРИБУТЫ width/height из logo.display.footer пакета (izibuh 400×92) — они обязательны (анти-CLS, P1.6 c-seo), но без max-width дают min-content 400px, и 1fr-трек .ds-footer__inner растягивает контейнер за вьюпорт. Глобального img-ресета в ЯДРЕ нет (шапку ядро клампит точечно с DESIGN v0.26.0, подвал — нет). Клампим СВОЁ лого (наш класс, наша разметка — плейсмент подвала зона шаблона), ядро не оверрайдим. height:auto обязателен в паре: без него атрибутная высота 92px осталась бы при сузившейся ширине и лого исказилось бы. */ .tpl-footer-logo img { max-width: 100%; height: auto; } /* Дисклеймер У ЦЕНЫ в split-панели (v0.65.0, условие входной визы c-legal). Стоит ПОД ядровым __foot (цена ↔ кнопка) — тот flex-ряд, третий элемент внутри встал бы в строку с ценой. 🔴 Цвет — ТА ЖЕ идиома, что у ядрового .ds-split-panel__lead: color-mix(on-primary 80%). Не изобретаю свой уровень контраста и не беру --ds-text-muted: панель тёмная градиентная, а on-primary парен к ней по норме п.12 (у forbion on-primary ЧЁРНЫЙ — литерал #fff сломал бы его). Кегль sm, не xs: это юридическое примечание, его обязано быть видно. */ .tpl-split-note { margin: var(--ds-space-4) 0 0; font-size: var(--ds-fs-sm); color: color-mix(in srgb, var(--ds-color-on-primary) 80%, transparent); } /* Лид секции (наряд D-4 п.2). В ядре есть только .ds-hero__lead — секционного нет, а заводить визуальный компонент шаблону нельзя (CONTRACT §2), поэтому здесь только композиция на токенах, ритм как у ядрового лида героя. */ .tpl-section-lead { max-width: 40rem; margin: var(--ds-space-3) 0 0; color: var(--ds-text-secondary); /* 🔴 ЛИД ЧИТАЕТ РОЛЕВЫЕ ТОКЕНЫ ЛИДА, А НЕ ОБЩУЮ ШКАЛУ (v0.222.0; `--ds-section-lead-size|-lh`, DESIGN v0.306.0). Раньше здесь стояли ступени шкалы (`--ds-fs-lg` 18 / `--ds-lh-loose` 1.7) — они и были «вторым автором» канонных 15.5/1.6: значение объявлено у бренда, а читатель брал своё. Фолбэк = прежние ступени ⇒ izibuh и tezum не двигаются. */ font-size: var(--ds-section-lead-size, var(--ds-fs-lg)); line-height: var(--ds-section-lead-lh, var(--ds-lh-loose)); } /* 🔴 РОЛЕВОЙ КЕГЛЬ ЛИДА (v0.228.0). Бренд объявил `--ds-honest-lead-size` 16 и `--ds-calc-lead-size` 14.5 (канонные исключения из базовых 15.5), класс роли приезжал в разметку — а ЧИТАТЕЛЯ не было, и обе секции держали базовые 15.5. Ровно наша форма «значение объявлено, читателя нет»: токен на живом ЕСТЬ, а действия у него НОЛЬ. ⚠ Почему не переопределяю `--ds-section-lead-size` на самой роли: запись вида `--ds-section-lead-size: var(--ds-honest-lead-size, var(--ds-section-lead-size))` — ЦИКЛ, и по спецификации всё свойство становится недействительным. Поэтому роль читает СВОЙ токен здесь, а общий остаётся вторым звеном цепочки: роль → общий → ступень шкалы. Три звена вместо двух — но ни одно не выдумано мной. 📌 Знак расхождения с каноном у `#honest` МЕНЯЕТСЯ с шириной (замер c-design: −69 @390 · +84 @901 · +112 @1366) ⇒ кегль правит все три сразу и в разные стороны; подгонять по одной ширине здесь нельзя. */ .tpl-section--honest .tpl-section-lead { font-size: var(--ds-honest-lead-size, var(--ds-section-lead-size, var(--ds-fs-lg))); } .tpl-section--calc .tpl-section-lead { font-size: var(--ds-calc-lead-size, var(--ds-section-lead-size, var(--ds-fs-lg))); } /* Карточка с НОМЕРОМ-МЕТКОЙ (v0.70.1, вердикт c-design-2 по канону concept-izibuh-v2.3.0: `.card + card-num`). Номер — ТЕКСТ в углу, иконка ПЕРВОЙ в потоке. 🔴 Почему не ядровый .ds-card--step: его счётчик-кружок ::before стоит В ПОТОКЕ сверху и выталкивает иконку вниз на 69px — это и был дефект блока «Что берёт главбух». Ядро не трогаем: --step ВЕРЕН для «Недели» (там иконок нет), правка ядра сломала бы соседний блок. Здесь только КОМПОЗИЦИЯ: position + типографика на токенах. Новый визуальный компонент не заводится, `.ds-card` не переопределяется — `position:relative` висит на МОЁМ классе, добавленном к тому же элементу. Смещения 22/24px — из канона дословно (24 = --ds-space-6; для 22 точного токена нет, канон-паритет важнее округления до шкалы). */ .tpl-card--num { position: relative; } .tpl-card-num { position: absolute; top: 22px; right: var(--ds-space-6); font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-bold); color: var(--ds-text-muted); line-height: 1; } /* Выравнивание строк FAQ (S3, вердикт владельца: TOP-anchor). Свёрнутые summary разной длины (1 строка vs 2) давали разную высоту → ряды не выровнены (замер c-ops-2: 53 vs 74). Равняем к 2 строкам min-height'ом; первые строки вопросов встают на один уровень, номер (.ds-faq__num, top:15 у первой строки) — вровень. 🔴 min-height:2lh — content-box (в ядре border-box нет): 42 контента + 32 паддинга ядра = 74; НЕ 84 (тот при content-box дал бы 116 — box-sizing). align-items — СЕГОДНЯ не несущий (A/B-замер playwright, v0.52.0, izibuh-тема: flex-start и ядровый baseline дают ИДЕНТИЧНО boxH=74, текст=18, номер=15 и на 1-, и на 2-строчном summary — байт-в-байт). Причина: единственный in-flow flex-элемент здесь — текст (номер absolute, шеврон align-self:center), а для одного baseline-элемента baseline ≡ flex-start. Ядро на v0.52.0 = baseline (center был лишь в откаченном v0.53.0). Фиксирую start ЯВНО как робастность: держу izibuh-намерение «первая строка» независимо от дефолта ядра, если в summary появится второй in-flow элемент иной высоты. Это вид, решённый владельцем, а не расчёт на текущее значение ядра. min-height аддитивен (в ядре его нет), align-items — по указанию integrator-c в мой слой (развилка «в шаблон», не в ядро). */ .tpl-faq-q { /* 🔴 РЕЗЕРВ В ДВЕ СТРОКИ — РЕШЕНИЕ ВЛАДЕЛЬЦА IZIBUH, А НЕ ОБЩЕЕ ПРАВИЛО (v0.185.0). `c-design` замерил у forbion: канон держит вопрос ОДНОЙ строкой (`summary` 65), а `min-height: 2lh` даёт +18 на каждой закрытой строке — на четырёх рядах это 72 из 113 всего расхождения списка. Признак, по которому это мой слой, он назвал верно: правило пришло из `tpl.css`, в его компоненте `min-height` нет вовсе. ⚠ НО СНЯТЬ ЕГО ЦЕЛИКОМ НЕЛЬЗЯ: резерв заводился под канон izibuh («равняем к двум строкам», решение владельца, v0.52.0) — там он не расхождение, а принятый вид. Снял бы — сменил бы чужой бренд молча, и это ровно то, за что мы сегодня ловили друг друга пять раз. ⇒ величина уезжает в токен с фолбэком на ПРЕЖНЕЕ значение: forbion объявит своё (канонная одна строка), izibuh не объявляет — и остаётся при своих двух. Одно выражение вместо ветвления, и у величины один автор. */ min-height: var(--ds-faq-q-min-h, 2lh); align-items: flex-start; } /* Визуально скрыто, семантически ЕСТЬ (sr-only). Для осиротевшего label поля-матрицы (v0.71.0): с JS оси подписаны легендами сегментов, обёрточный заголовок «стаканит»; но БЕЗ JS единственный контроль —