/* * f7c_design — единая точка подключения дизайн-системы ячейки C. * 🔴 ЭТОТ ФАЙЛ СОБРАН из index.order.txt скриптом tools/build-index.py — РУКАМИ НЕ ПРАВИТЬ. * Правьте компонент и пересоберите; порядок — в index.order.txt. * Почему один файл, а не 27 @import: цепочка импортов даёт гонку — страница успевает * отрисоваться БЕЗ стилей (замер 15.08: 0 правил при отданных 200). */ /* ═══ tokens/tokens.css ═══ */ /* * f7c_design — дизайн-токены ячейки C (CSS custom properties). * Источник истины: tokens/tokens.json. Правки — только синхронно с ним. * Подключение: первым, до components/*.css. */ :root { /* ---- color.brand ---- */ --ds-color-primary: #2456d6; --ds-color-primary-hover: #1b44af; --ds-color-primary-active: #153689; --ds-color-on-primary: #ffffff; /* текст/иконки на primary; контраст с primary >= 4.5 */ --ds-color-accent: #0b7c7b; /* ---- color.text ---- */ --ds-text-primary: #1a1f2b; --ds-text-secondary: #5a6274; --ds-text-muted: #8b92a3; --ds-text-inverse: #ffffff; --ds-text-link: var(--ds-color-primary); /* ---- color.surface ---- */ --ds-surface-page: #ffffff; --ds-surface-raised: #f6f7f9; --ds-surface-sunken: #edeff3; --ds-surface-inverse: #161a23; /* ---- color.border ---- */ --ds-border-default: #d9dde5; --ds-border-strong: #b7bdca; --ds-border-focus: var(--ds-color-primary); --ds-focus-ring: color-mix(in srgb, var(--ds-color-primary) 15%, transparent); /* ---- color.feedback ---- */ --ds-color-success: #188a42; --ds-color-warning: #b45309; --ds-color-error: #c0262c; --ds-color-info: #2456d6; /* ---- typography ---- */ --ds-font-base: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; --ds-font-heading: var(--ds-font-base); --ds-font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace; --ds-fs-xs: 0.75rem; --ds-fs-sm: 0.875rem; --ds-fs-md: 1rem; --ds-fs-lg: 1.125rem; --ds-fs-xl: 1.375rem; --ds-fs-2xl: 1.75rem; --ds-fs-3xl: 2.25rem; --ds-fs-4xl: 3rem; --ds-fw-regular: 400; --ds-fw-medium: 500; --ds-fw-semibold: 600; --ds-fw-bold: 700; --ds-fw-black: 800; --ds-lh-tight: 1.2; --ds-lh-base: 1.5; --ds-lh-loose: 1.7; /* Голос заголовков (тема бренда задаёт значения; нейтральные дефолты = текущий вид) */ --ds-heading-weight: var(--ds-fw-bold); --ds-heading-tracking: 0; --ds-heading-leading: var(--ds-lh-tight); /* ---- space (шкала 4px) ---- */ --ds-space-1: 0.25rem; --ds-space-2: 0.5rem; --ds-space-3: 0.75rem; --ds-space-4: 1rem; --ds-space-6: 1.5rem; --ds-space-8: 2rem; --ds-space-12: 3rem; --ds-space-16: 4rem; --ds-space-24: 6rem; /* ---- radius / shadow ---- */ --ds-radius-sm: 4px; --ds-radius-md: 8px; --ds-radius-lg: 16px; --ds-radius-xl: 24px; --ds-radius-full: 9999px; /* Форма компонентов (тема задаёт: пилюля-кнопка, мягкие карточки) */ --ds-radius-btn: var(--ds-radius-md); --ds-radius-card: var(--ds-radius-lg); --ds-card-radius: var(--ds-radius-card); --ds-card-icon-inline-margin: 0 0 var(--ds-space-3) var(--ds-space-4); --ds-card-promo-icon-size: 58px; --ds-card-ladder-icon-size: 104px; /* значок ступени; умолчание = прежнее */ --ds-card-ladder-glyph: 26px; /* глиф внутри плиты ступени */ --ds-stepper-btn-font: var(--ds-fs-lg); /* кегль знака степпера; умолчание = прежнее */ /* значок промо-плитки; умолчание = прежнее */ /* роль радиуса КАРТОЧКИ; умолчание = прежнее */ /* Строка FAQ. Умолчания = ПРЕЖНИЙ рендер (плоская поверхность + рамка): роль поверхности объявляет бренд. Объявлены здесь, а не только запасным значением в компоненте, потому что возврат тёмной у бренда обязан возвращать К ЧЕМУ-ТО — гейт «возврат светлой» ловит именно это: токен есть в тёмном возврате, а базового значения в ядре нет. */ --ds-faq-gap: var(--ds-space-4); --ds-faq-item-bg: var(--ds-surface-page); --ds-faq-item-border-width: 1.5px; --ds-faq-item-border-color: var(--ds-border-default); --ds-faq-item-radius: var(--ds-radius-card); --ds-faq-item-shadow: none; --ds-faq-item-pad-left: 62px; --ds-faq-q-pad: var(--ds-space-4) 0; --ds-section-title-gap: var(--ds-space-8); --ds-calc-gap-after-tabs: 0; --ds-calc-panel-gap: 0; /* карточка→блок итога; действует только при ДВУХ детях */ /* зазор табы→первый шаг; умолчание = прежний рендер */ --ds-calc-panel-pad: var(--ds-space-8); --ds-calc-form-pad: var(--ds-space-8); --ds-calc-includes-gap: 0; /* добор ритма карточки тарифа; умолчание = прежнее */ /* поля формы; умолчание = прежнее */ /* поля панели итога; умолчание = прежнее */ --ds-calc-sum-gap-after-caption: var(--ds-space-2); /* подпись → сумма */ --ds-calc-sum-gap-after-total: var(--ds-space-6); /* сумма → строка расчёта */ --ds-calc-sum-gap-after-line: var(--ds-space-6); /* строка расчёта → следующий узел */ --ds-shadow-card: none; --ds-shadow-sm: 0 1px 2px rgba(22, 26, 35, 0.08); --ds-shadow-md: 0 4px 12px rgba(22, 26, 35, 0.1); --ds-shadow-lg: 0 12px 32px rgba(22, 26, 35, 0.14); /* цветная тень глубины (акцентные оболочки: ds-calc и т.п.) */ --ds-shadow-brand: 0 24px 60px -18px color-mix(in srgb, var(--ds-color-primary) 22%, transparent); /* ---- layout ---- */ /* 🔴 ПОВЕРХНОСТЬ ОКРАШЕННОЙ СЕКЦИИ — ОТДЕЛЬНО ОТ ПОВЕРХНОСТИ КОНТРОЛА (15.08). Замер канона forbion показал ДВЕ разные роли под одним нашим токеном: секции и карточки → #FFFFFF (23 узла, основная площадь страницы) НЕАКТИВНЫЕ КОНТРОЛЫ (полоса вкладок калькулятора, невыбранные ступени цены) → #ECF2F2 Один `--ds-surface-raised` обслуживал обе; сведя его к белому, мы бы СТЁРЛИ контролы, а оставив серым — держим секции не как в макете. Умолчание = прежнее значение, поэтому izibuh и tezum не двигаются. */ --ds-surface-section: var(--ds-surface-raised); /* Поверхность КАРТОЧКИ-КОНТРОЛА (опция калькулятора и родня). Отдельная роль, потому что у канона это его собственный `--card`, и он НЕ равен ни странице, ни приподнятой поверхности: светлая #FFFFFF, тёмная #27271F. Здесь умолчание ролевое, число канона — в бренд-пакете. */ --ds-surface-card: var(--ds-surface-raised); /* 🔴 ВЫДЕЛЕННЫЙ НОСИТЕЛЬ — ПОДЪЁМ К БЕЛОМУ, не «добавить цвета» (15.08). Канон выделяет карточку и строку ИНВЕРСИЕЙ: носитель светлеет, а его внутренние метки теряют подложку. Умолчания = прежний вид (поверхность секции, метка без фона). */ --ds-surface-picked: var(--ds-surface-section); --ds-surface-picked-chip: transparent; /* 🔴 ЗАЗОР ВНУТРЕННЕЙ СЕТКИ ГЕРОЯ — ТОКЕН НАЗНАЧЕНИЯ (15.08, вопрос c-tpl). Канон forbion держит внутри текстовой колонки героя сетку 2×3 с зазором **44px**, а в нашей шкале такого шага нет (…24, 32, 48…). Шкалу НЕ трогаю: 44 — число канона forbion, в ядре оно стало бы обязательным для izibuh и tezum. ⚠ И не «48 с расхождением 4px»: 44 встречается в каноне ШЕСТЬ раз — это его значение, а не округление нашего. Умолчание = прежний ближайший шаг, чужие бренды не двигаются. */ --ds-hero-grid-gap: var(--ds-space-12); /* 🔴 ВЕС ЦЕНЫ — ТОКЕН НАЗНАЧЕНИЯ (15.08, вопрос c-tpl «шкала кончилась»). Канон forbion держит вес **900** на 26 узлах — это цена, крупные числа и словомарк; самая тяжёлая ступень шкалы ДС — `--ds-fw-black` = 800. Тот же случай, что зазор 44: число живёт в каноне многократно, значит это ЕГО значение, а не округление нашего. Шкалу не трогаю — 900 обязательным для izibuh и tezum быть не должно. */ --ds-fw-price: var(--ds-fw-black); /* 🔴 ПОВЕРХНОСТЬ ВЫДЕЛЕНИЯ «выбрано / входит / выгодно» (15.08, замер канона forbion). У канона это отдельная роль на 6+ носителях: выделенная строка тарифа («выбирают чаще»), 16 чипов конфигураций, АКТИВНАЯ кнопка калькулятора (плюс рамка 1px primary), полоса «Бесплатно при переезде», колонка «У нас в тарифе». Чернила везде --ds-text-primary. ⚠ У нас такой роли не было ни одним токеном: акцентная колонка сравнения — СПЛОШНОЙ primary с инверсным текстом, то есть другой приём. Умолчание = прежняя приподнятая поверхность. */ --ds-surface-highlight: var(--ds-surface-raised); --ds-container-max: 1200px; --ds-container-pad: var(--ds-space-4); /* 🔴 ШАПКА — СВОЯ ОСЬ ШИРИНЫ (15.08). Умолчание = контейнер, поэтому izibuh и tezum не двигаются ни на пиксель. Заведён потому, что канон forbion держит шапку ТЕКУЧЕЙ (`88%`), а секции — фиксированными: одним токеном две модели не разводятся, и попытка сделать шапку текучей через `--ds-container-max` растащила бы все секции сайта. */ --ds-header-max: var(--ds-container-max); --ds-hero-media-max: none; /* ограничение ширины hero-media композиции (тема задаёт) */ /* вертикальный ритм секций: на мобиле уменьшается (см. media ниже) */ --ds-section-pad-y: var(--ds-space-16); --ds-section-pad-normal: var(--ds-section-pad-y); /* роль «обычная»: умолчание = прежнее */ /* ---- градиенты (темизируемые; только декор и интерактив с проверенным контрастом) ---- */ --ds-gradient-brand: linear-gradient(118deg, var(--ds-color-primary), var(--ds-color-accent)); /* Градиент ДЛЯ ТЕКСТА (сквозь глифы). Отдельный от --ds-gradient-brand НАМЕРЕННО: brand лежит ФОНОМ под белым текстом в 9 местах ядра (кнопка, панель калькулятора, колонка сравнения, купон, FAQ, сегмент...) — осветлив его, мы сломали бы их контраст. В светлой теме совпадает с brand: дельта 0. Тёмный вариант — ниже, в тёмном блоке. */ --ds-gradient-text: var(--ds-gradient-brand); --ds-gradient-soft: linear-gradient(160deg, var(--ds-surface-raised), var(--ds-surface-sunken)); /* панель итога (ds-calc__panel и т.п.); текст на ней — on-primary: контраст ≥4.5 к САМОЙ СВЕТЛОЙ точке градиента — обязанность темы */ --ds-gradient-panel: var(--ds-gradient-brand); /* декоративный орб (ds-section--decor, ds-calc__panel--orb): цвет и размер — параметры */ --ds-orb-color: color-mix(in srgb, var(--ds-color-accent) 25%, transparent); --ds-orb-size: 280px; /* палитра декоративных свечений-орбов (blur-пятна за контентом; тема задаёт). Дефолты выведены из существующих токенов — система не знает про конкретные цвета. */ --ds-orb-color-primary: color-mix(in srgb, var(--ds-color-primary) 16%, transparent); --ds-orb-color-accent: color-mix(in srgb, var(--ds-color-accent) 16%, transparent); --ds-orb-color-alt: color-mix(in srgb, var(--ds-color-primary) 10%, var(--ds-color-accent) 10%); --ds-mark-color: color-mix(in srgb, var(--ds-color-accent) 30%, transparent); /* интерактивные акценты контролов (тема может усилить: сегмент — градиент, ползунок — акцент) */ --ds-segment-active-bg: var(--ds-color-primary); --ds-range-color: var(--ds-color-primary); /* карусель (ds-carousel): дефолты наследуют ядро → бренд получает тему без правок; точечный override — через тему при расширении контракта (письмо-ДО c-tpl) */ --ds-carousel-dot-idle: var(--ds-border-strong); --ds-carousel-dot-active: var(--ds-gradient-brand); --ds-carousel-arrow-bg: var(--ds-surface-page); --ds-carousel-arrow-border: var(--ds-border-default); --ds-carousel-arrow-ink: var(--ds-color-primary); /* ---- движение (v0.5.0; темизируемые) ---- */ --ds-motion-scale: 1; /* 0 = всё движение выключено (reduced-motion ставит 0) */ --ds-motion-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ds-anim-rise-duration: 0.7s; --ds-anim-drift-duration: 14s; --ds-anim-float-duration: 6s; --ds-anim-pop-duration: 0.5s; --ds-anim-bump-duration: 0.3s; --ds-marquee-duration: 45s; --ds-marquee-item-width: 340px; --ds-steps-columns: 5; /* Форма разделителя секций (маска для .ds-divider); дефолт — пологая волна, бренд может заменить своей формой в теме */ --ds-divider-shape: url('data:image/svg+xml,'); } /* * Брейкпоинты (mobile-first, min-width) — CSS-переменные в media query не работают, * значения фиксируются контрактом и дублируются в компонентах как есть: * sm: 640px | md: 768px | lg: 1024px | xl: 1280px */ /* Мобильная адаптация значений токенов (глобально; компоненты используют их) */ @media (max-width: 767px) { :root { /* 🔴 РАСХОЖДЕНИЕ С КАНОНОМ, чинить ТОЛЬКО В СВЯЗКЕ (пометка c-design-2 как держателя канона). Здесь 12px (space-3), а канон concept-v2.2.0:612/:636 даёт .wrap padding 18px/16px. Следствие уже ловили: вылет насечки купона 15px > гаттера 12px переполнял планшет 480-767 на 3px даже у канон-верно размещённого купона (v0.44.0 закрыл СИМПТОМ через min(), но само расхождение живёт и всплывёт другими краевыми элементами). Это ВТОРОЕ расхождение метрик контейнера с каноном. Первое — рендер 1132 против канонных 1100 из-за отсутствия глобального box-sizing (см. components/coupon/coupon.css). ⚠ НЕ ПРАВИТЬ ПООДИНОЧКЕ. Обе правки двигают вид и требуют ре-визы c-design-2, поэтому делаются ОДНИМ окном: *{box-sizing:border-box} (1132->1100) + гаттер планшета к 16-18px. Одно окно = один сдвиг, одна ре-виза, один показ. Окно назначает c-design-2 ПОСЛЕ показа прайс-пачки владельцу (сразу после принятой победы принятый экран не двигают). 📋 УСЛОВИЯ ИСПОЛНЕНИЯ И ЧЕК-ЛИСТ РЕ-ВИЗЫ: docs/WINDOW-container-metrics.md (там же: дельты НЕ аддитивны, порядок «обе правки -> один прогон -> ре-виза по итогу», опорные bounding-rect стрелок ДО окна для сверки сдвига). */ --ds-container-pad: var(--ds-space-3); /* поля контейнера уже на планшете */ --ds-section-pad-y: var(--ds-space-12); /* меньше вертикали секций */ } } @media (max-width: 479px) { :root { --ds-container-pad: var(--ds-space-4); /* на телефоне вернуть комфортные поля */ --ds-section-pad-y: var(--ds-space-8); /* компактный ритм */ --ds-orb-size: 200px; /* мельче свечения — не давят на узком */ --ds-marquee-item-width: 280px; /* карточка ленты влезает на 320px */ } } /* Крупные тач-таргеты на сенсорных экранах (WCAG 2.5.5 ≥ 44px) */ @media (pointer: coarse) { .ds-segment__btn { min-height: 44px; } .ds-stepper__btn { min-height: 44px; } .ds-stepper__input { min-height: 44px; } } /* Базовая типографика страницы */ body { font-family: var(--ds-font-base); font-size: var(--ds-fs-md); line-height: var(--ds-lh-base); color: var(--ds-text-primary); background: var(--ds-surface-page); margin: 0; } /* 🔴 color: inherit, а НЕ var(--ds-text-primary). Разбор D-8 (замер c-design-2, светлая тема): заголовок внутри do-not-flip поверхности оставался ЧЕРНИЛЬНЫМ на брендовом градиенте — .ds-compare__col--gradient задаёт color: on-primary, но h3 не наследовал его, потому что ЯВНЫЙ цвет здесь бил наследование. Явный цвет на h1-h4 — и есть корень. Класс, а не случай: поверхностей, задающих собственный color, в ядре 14 (on-primary, text-inverse, ...). Лечили их ПЕРЕЧИСЛЕНИЕМ (.ds-section--inverse h1..h4 — прецедент в section.css), а для .ds-compare__col--gradient и .ds-split-panel перечислить забыли. Правило, которое надо не забыть, — не механизм: оно ломается ровно на следующем компоненте. inherit чинит все 14 сразу и будущие тоже: body задаёт --ds-text-primary, поэтому на обычной странице цвет ТОТ ЖЕ (дельта 0), а на цветной поверхности заголовок наследует её цвет. ⚠ Обратный риск проверен по эталонам: заголовок внутри контейнера с muted/secondary цветом стал бы приглушённым. Такой в ядре ровно один — .ds-split-panel__col--card h3, ему оставлен явный --ds-text-primary (см. split-panel.css). У .ds-compare__col--muted цвет висит на __item, а не на колонке, поэтому её заголовок не задет. 🔴 В ТЁМНОЙ ТЕМЕ ЭТОТ ДЕФЕКТ НЕВИДИМ: text-primary там почти белый и случайно совпадает с верным ответом. Мы принимали страницу в тёмной — зелёный в dark не доказывал ничего про light. */ h1, h2, h3, h4 { font-family: var(--ds-font-heading); line-height: var(--ds-heading-leading); letter-spacing: var(--ds-heading-tracking); color: inherit; margin: 0 0 var(--ds-space-4); } h1 { font-size: var(--ds-fs-3xl); font-weight: var(--ds-heading-weight); } h2 { font-size: var(--ds-fs-2xl); font-weight: var(--ds-heading-weight); } h3 { font-size: var(--ds-fs-xl); font-weight: var(--ds-fw-semibold); } h4 { font-size: var(--ds-fs-lg); font-weight: var(--ds-fw-semibold); } a { color: var(--ds-text-link); text-decoration: none; } a:hover { text-decoration: underline; } /* Базовый ресет картинок. Заведён 17.07 по находке c-ops (playwright@360: горизонтальный скролл) + c-tpl. Класс дефекта: bare с атрибутом width (напр. подвальное лого width="400") даёт min-content = 400px -> на вьюпорте 360 горизонтальный скролл. Точечные правила ядра (.ds-header__logo img, .ds-card__media img) закрывали только свои места; этот ресет закрывает КЛАСС для любой будущей картинки. Проверено c-tpl СИМУЛЯЦИЕЙ на живой сборке izibuh (addStyleTag, замер ВСЕХ до/после, vw=1400 и vw=360): визуальной дельты НЕТ ни у одного img — шапку ядро клампит специфичнее, подвал c-tpl зажал у себя (.tpl-footer-logo img, v0.61.2). То есть ресет = чистое усиление на будущее, не лечение сегодняшнего случая (тот уже закрыт на стороне шаблона). Почему нужен, хотя сегодня дельта нулевая (аргумент c-tpl): `heroMedia.inline` — opt-in ПОБРЕНДОВО. izibuh его включил (inline-SVG), но будущий бренд с heroMedia и БЕЗ inline получит именно — и без этого ресета повторит тот же overflow. height:auto держит аспект при явных width/height атрибутах. Согласовано письмом-ДО с c-tpl (контракт: изменения ядра, затрагивающие его рендер, — до тега). */ img { max-width: 100%; height: auto; } .ds-container { max-width: var(--ds-container-max); margin: 0 auto; padding: 0 var(--ds-container-pad); } /* ───────────────────────────────────────────────────────────────────────── * ТЁМНАЯ ТЕМА — наряд integrator-c 15.07 (виза владельца). * * СПЕЦИФИЧНОСТЬ = УСЛОВИЕ РАБОТЫ, а не стиль записи. * Порядок загрузки: tokens.css → brands//theme.css, и бренд объявляет `:root {…}`. * Тёмный блок вида `@media { :root {…} }` имел бы ТУ ЖЕ специфичность (0,1,0), а бренд * грузится ПОЗЖЕ → перебил бы его, и тёмная тема молча не работала бы ни в одном бренде, * то есть НИГДЕ. Селекторы ниже дают (0,2,0) и перебивают брендовый `:root`. * Бренду со своей тёмной палитрой нужна та же специфичность (не `:root`). * NB: `:where()` здесь применять НЕЛЬЗЯ — его специфичность ноль, защита обнулится. * * DO-NOT-FLIP (CELL.md п.12 «ломается ПАРА, а не значение») — здесь НЕ переопределены: * --ds-color-primary/-hover/-active, --ds-color-accent — цвета бренда, не темы; * --ds-color-on-primary — СПАРЕН с primary; primary не переворачивается → и он тоже, * КАКИМ БЫ бренд его ни задал. У forbion он ЧЁРНЫЙ (#1d1d1b): * зелёный #70b62c с белым даёт 2.50. Правило «в тёмной теме * делаем его тёмным» сломало бы forbion в ОБРАТНУЮ сторону; * --ds-text-inverse — СПАРЕН с --ds-surface-inverse; * --ds-surface-inverse — фиксированная тёмная поверхность (инверс-полосы, подвал). * Проверяется НЕГАТИВНЫМ ТЕСТОМ в tools/check.sh, а не глазами. * * link/border-focus переопределены НАМЕРЕННО, хотя выводятся из primary: primary как * ЗАЛИВКА кнопки обязан остаться (пара с on-primary), но primary как ТЕКСТ на тёмном * не читается. Связь рвём точечно — это и есть «не трогать пару», а не «не трогать значение». * * Производные (--ds-gradient-soft, --ds-orb-color-*, --ds-mark-color, --ds-shadow-brand, * --ds-segment-active-bg, --ds-range-color) собраны через var()/color-mix — едут за темой * сами, отдельных переопределений не требуют. * ───────────────────────────────────────────────────────────────────────── */ :root[data-theme="dark"] { --ds-surface-card: var(--ds-surface-raised); /* пара к светлой; значение бренда — в его тёмном блоке */ --ds-surface-page: #1a1e27; --ds-surface-raised: #242a36; /* 🔴 15.08, ПОСЛЕ ЖИВОГО ДЕФЕКТА: `--ds-surface-section` был заведён только в светлом `:root`. Тёмные блоки его НЕ переопределяли — и брендовое светлое значение переехало в тёмную тему: на живом секции `#calc` и `#navi` стали БЕЛЫМИ при светлом тексте, 46 узлов из 55 ниже AA, худший контраст 1.06. Нашёл c-ops вычитанием базы «до»; глазами в светлой тег бы приняли. Умолчание тёмной = тёмная приподнятая поверхность, как у всех прочих. */ --ds-surface-section: var(--ds-surface-raised); --ds-surface-highlight: var(--ds-surface-raised); --ds-surface-picked: var(--ds-surface-section); --ds-surface-picked-chip: transparent; --ds-surface-sunken: #2f3543; --ds-text-primary: #f6f8fd; --ds-text-secondary: #d2d8e6; --ds-text-muted: #a5adc2; --ds-border-default: #39404f; --ds-border-strong: #545e73; --ds-text-link: #93a4f0; --ds-border-focus: #93a4f0; --ds-color-success: #4fd08a; --ds-color-warning: #e8b366; --ds-color-error: #f08c90; --ds-color-info: #93a4f0; --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45); --ds-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --ds-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6); --ds-focus-ring: rgba(147, 164, 240, 0.28); /* Фон секций .ds-section--soft. Заведён в тёмный блок 17.07 по признаку владельца («тёмная тема не каскадирует на секции»). Класс тот же, что mark-color/orb: БРЕНД задаёт --ds-gradient-soft светлым ЛИТЕРАЛОМ в своём :root (izibuh: #f2f4fe→#fdeef7), а ядро тёмного варианта не имело → в тёмной секции --soft оставались СВЕТЛЫМИ (герой тёмный, полоса services светлая, calc тёмный — разрыв). Ядро задаёт тёмный дефолт: специфичность :root[data-theme=dark] (0,2,0) перебивает брендовый :root (0,1,0). Бренд, желающий СВОЙ тёмный градиент, задаёт :root[data-theme=dark] в theme.css (0,2,0, грузится позже — выиграет). Замерено на живом: единственный каскад-дефект секций; surface-inverse/gradient-panel уже тёмные, gradient-brand (кнопки) ярким и должен остаться. */ --ds-gradient-soft: linear-gradient(160deg, var(--ds-surface-raised), var(--ds-surface-sunken)); /* Стрелки карусели в тёмной (признак владельца/c-design-2 17.07: стрелки сливаются). arrow-ink=primary (do-not-flip синий) на тёмном фоне даёт 2.5, иконка (SVG stroke= currentColor) почти не видна; рамка тоже тёмная. Класс тот же, что secondary/stepper/ mark. Задаём светлые варианты: иконка -- text-primary (виден на тёмном), рамка -- border-strong (контур читается). arrow-bg=surface-page флипается сам. */ --ds-carousel-arrow-ink: var(--ds-text-primary); --ds-carousel-arrow-border: var(--ds-border-strong); /* Подсветка ds-mark. Заведена в тёмный блок 17.07 по признаку владельца (обвёл «изи» в h1). ⚠ Диагноз наряда «тёмное на тёмном, нечитаемо» — НЕ подтвердился: проверил рендером на CSS СБОРКИ (DESIGN=v0.28.0, mark.css побайтно тот же) — текст наследует --ds-text-primary, который в тёмной СВЕТЛЫЙ, слово читается. Реальный дефект мягче: подложка ВЫЦВЕТАЕТ. Канон это подтверждает независимо — у него `:root[data-theme="dark"] mark → rgba(240,85,159,.45)` против .32 в светлой. КЛАСС, а не случай (прогон тёмной темы 17.07): токен с АЛЬФОЙ от брендового цвета, положенный на ПОВЕРХНОСТЬ. Альфа подбиралась под светлую поверхность; сам цвет не флипается (do-not-flip, и правильно), а поверхность под ним флипается — та же альфа на тёмном читается слабее. В этом классе ещё --ds-orb-color* (см. письмо). Токены, выведенные из ФЛИПАЮЩИХСЯ (carousel-arrow-bg → surface-page, arrow-border → border-default, gradient-soft → surface-raised), лечатся сами — проверено. */ --ds-mark-color: color-mix(in srgb, var(--ds-color-accent) 45%, transparent); /* Текстовый градиент в тёмной: стопы осветлены 70/30 белым. Считается из ТОКЕНОВ БРЕНДА (primary/accent), поэтому работает для любого бренда без знания его стопов. izibuh: 2.52/3.31/3.25 -> 4.70/~6.7/5.18 к фону #1a1e27 — AA(4.5) проходит. Дефект D-9 (замер c-design-2): брендовый градиент НЕ флипается, а фон страницы флипается — зеркало D-8. Там был флипающий текст на не-флипающейся поверхности, здесь наоборот. */ --ds-gradient-text: linear-gradient(118deg, color-mix(in srgb, var(--ds-color-primary) 70%, white), color-mix(in srgb, var(--ds-color-accent) 70%, white)); /* Свечение в ТЁМНОЙ теме — 12% вместо 22% светлой (расчёт c-design-2, подтверждён моим замером композита). Соотношение, а не вкус: светлая при .22 даёт ореолу контраст к фону 1.29 — это норма заметности канона; тёмная при .12 даёт 1.16, то есть заметно тише светлой («приглушённое» по решению владельца 20.07), но выше порога различимости 1.08. Ниже .10 свечение перестаёт нести смысл и читается шумом рендера. 🔴 Канон :41 в тёмной свечение УБИРАЛ (чёрная тень глубины) — решение владельца его перекрывает, и канон меняется вместе с ним (тег концепта c-design-2). Это НЕ отклонение: отклонение заводят, когда стенд расходится с каноном, здесь канон меняется сам. */ --ds-shadow-brand: 0 24px 60px -18px color-mix(in srgb, var(--ds-color-primary) 12%, transparent); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ds-surface-page: #1a1e27; --ds-surface-raised: #242a36; --ds-surface-section: var(--ds-surface-raised); /* см. довод в блоке [data-theme=dark] выше */ --ds-surface-highlight: var(--ds-surface-raised); --ds-surface-sunken: #2f3543; --ds-text-primary: #f6f8fd; --ds-text-secondary: #d2d8e6; --ds-text-muted: #a5adc2; --ds-border-default: #39404f; --ds-border-strong: #545e73; --ds-text-link: #93a4f0; --ds-border-focus: #93a4f0; --ds-color-success: #4fd08a; --ds-color-warning: #e8b366; --ds-color-error: #f08c90; --ds-color-info: #93a4f0; --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45); --ds-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --ds-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6); --ds-focus-ring: rgba(147, 164, 240, 0.28); /* Фон секций .ds-section--soft. Заведён в тёмный блок 17.07 по признаку владельца («тёмная тема не каскадирует на секции»). Класс тот же, что mark-color/orb: БРЕНД задаёт --ds-gradient-soft светлым ЛИТЕРАЛОМ в своём :root (izibuh: #f2f4fe→#fdeef7), а ядро тёмного варианта не имело → в тёмной секции --soft оставались СВЕТЛЫМИ (герой тёмный, полоса services светлая, calc тёмный — разрыв). Ядро задаёт тёмный дефолт: специфичность :root[data-theme=dark] (0,2,0) перебивает брендовый :root (0,1,0). Бренд, желающий СВОЙ тёмный градиент, задаёт :root[data-theme=dark] в theme.css (0,2,0, грузится позже — выиграет). Замерено на живом: единственный каскад-дефект секций; surface-inverse/gradient-panel уже тёмные, gradient-brand (кнопки) ярким и должен остаться. */ --ds-gradient-soft: linear-gradient(160deg, var(--ds-surface-raised), var(--ds-surface-sunken)); /* Стрелки карусели в тёмной (признак владельца/c-design-2 17.07: стрелки сливаются). arrow-ink=primary (do-not-flip синий) на тёмном фоне даёт 2.5, иконка (SVG stroke= currentColor) почти не видна; рамка тоже тёмная. Класс тот же, что secondary/stepper/ mark. Задаём светлые варианты: иконка -- text-primary (виден на тёмном), рамка -- border-strong (контур читается). arrow-bg=surface-page флипается сам. */ --ds-carousel-arrow-ink: var(--ds-text-primary); --ds-carousel-arrow-border: var(--ds-border-strong); /* Подсветка ds-mark. Заведена в тёмный блок 17.07 по признаку владельца (обвёл «изи» в h1). ⚠ Диагноз наряда «тёмное на тёмном, нечитаемо» — НЕ подтвердился: проверил рендером на CSS СБОРКИ (DESIGN=v0.28.0, mark.css побайтно тот же) — текст наследует --ds-text-primary, который в тёмной СВЕТЛЫЙ, слово читается. Реальный дефект мягче: подложка ВЫЦВЕТАЕТ. Канон это подтверждает независимо — у него `:root[data-theme="dark"] mark → rgba(240,85,159,.45)` против .32 в светлой. КЛАСС, а не случай (прогон тёмной темы 17.07): токен с АЛЬФОЙ от брендового цвета, положенный на ПОВЕРХНОСТЬ. Альфа подбиралась под светлую поверхность; сам цвет не флипается (do-not-flip, и правильно), а поверхность под ним флипается — та же альфа на тёмном читается слабее. В этом классе ещё --ds-orb-color* (см. письмо). Токены, выведенные из ФЛИПАЮЩИХСЯ (carousel-arrow-bg → surface-page, arrow-border → border-default, gradient-soft → surface-raised), лечатся сами — проверено. */ --ds-mark-color: color-mix(in srgb, var(--ds-color-accent) 45%, transparent); /* Текстовый градиент в тёмной: стопы осветлены 70/30 белым. Считается из ТОКЕНОВ БРЕНДА (primary/accent), поэтому работает для любого бренда без знания его стопов. izibuh: 2.52/3.31/3.25 -> 4.70/~6.7/5.18 к фону #1a1e27 — AA(4.5) проходит. Дефект D-9 (замер c-design-2): брендовый градиент НЕ флипается, а фон страницы флипается — зеркало D-8. Там был флипающий текст на не-флипающейся поверхности, здесь наоборот. */ --ds-gradient-text: linear-gradient(118deg, color-mix(in srgb, var(--ds-color-primary) 70%, white), color-mix(in srgb, var(--ds-color-accent) 70%, white)); /* Свечение в ТЁМНОЙ теме — 12% вместо 22% светлой (расчёт c-design-2, подтверждён моим замером композита). Соотношение, а не вкус: светлая при .22 даёт ореолу контраст к фону 1.29 — это норма заметности канона; тёмная при .12 даёт 1.16, то есть заметно тише светлой («приглушённое» по решению владельца 20.07), но выше порога различимости 1.08. Ниже .10 свечение перестаёт нести смысл и читается шумом рендера. 🔴 Канон :41 в тёмной свечение УБИРАЛ (чёрная тень глубины) — решение владельца его перекрывает, и канон меняется вместе с ним (тег концепта c-design-2). Это НЕ отклонение: отклонение заводят, когда стенд расходится с каноном, здесь канон меняется сам. */ --ds-shadow-brand: 0 24px 60px -18px color-mix(in srgb, var(--ds-color-primary) 12%, transparent); } } /* ═══ components/section/section.css ═══ */ /* f7c_design :: Секция страницы (обвязка + hero). Требует tokens/tokens.css. */ /* 🔴 СЕКЦИЯ ПОЗИЦИОНИРОВАНА (15.08). Базовая секция не была `relative` — только `--decor`. Следствие поймано на живом: сфера с местом `formats-right` (`top: 67px`) отсчиталась ОТ СТРАНИЦЫ и встала ВНУТРИ ШАПКИ, хотя объявлена в секции форматов правильно. ⚠ Виновником выглядел конфиг (`c-web-1` проверил — сфера в нужной секции с v46), а предмет был здесь: у носителя не было системы отсчёта. `place` даёт координату ВНУТРИ носителя — значит носитель обязан ею быть. Канон делает так же: его базовое правило `section { padding:76px 0; position:relative }`. */ /* 🔴 ВЕРТИКАЛЬНОЕ ПОЛЕ СЕКЦИИ — РОЛЬ, А НЕ ОДНО ЧИСЛО (партия 9, замер 1366). У канона их ШЕСТЬ, и каждое привязано к классу роли: 0 герой · 24 калькулятор · 32 сравнение · 50 обычная · 62 «что входит»/сервер · 96 форма У нас **64 на всех** — отсюда систематический прирост: калькулятор +80, обычные +28, форма −64 (мы там КОРОЧЕ канона). В сумме по странице это около 200 из 1452. Модификаторы читают токены, умолчание каждого = текущее общее значение: izibuh и tezum не двигаются, пока потребитель не поставит класс. Значения канона — в бренд-пакете. */ .ds-section { /* 🔴 ДЛИННЫЕ СВОЙСТВА, А НЕ СОКРАЩЁННОЕ (находка `c-tpl`, 15.08). Здесь стояло `padding: var(--ds-section-pad-y) 0`, и сокращённое свойство **сбрасывало `padding-block` целиком** — все четыре ролевых модификатора были инертны, хотя стояли выше и с той же специфичностью. Правило-победитель не «сильнее», оно просто пишет ОБЕ оси. */ /* 🔴 РОЛЬ «ОБЫЧНАЯ СЕКЦИЯ» — ИМЕНОВАННАЯ, А НЕ УМОЛЧАНИЕ ШКАЛЫ (ре-виза строки 102, виза integrator-c2, 15.08). Канон держит ШЕСТЬ значений поля по ролям (0 · 24 · 32 · 50 · 62 · 96); четыре крайних уже вышли модификаторами, пятое — «обычная 50» — до сих пор приходило умолчанием `--ds-section-pad-y` (64) и потому было без автора. ⚠ 50 в шкале (4·8·12·16·24·32) НЕТ, и шкалу под одно число я не расширяю: у величины должен быть свой адрес, иначе через неделю её «поправят на 48 для равномерности». Умолчание = прежнее: кто токен не объявляет (izibuh, tezum), получает `--ds-section-pad-y`. Герой не затронут по построению: у него поле задаёт сокращённое `padding` потребителя (`.tpl-hero--flush{padding:0}`), а оно сбрасывает `padding-block` целиком. */ padding-block: var(--ds-section-pad-normal, var(--ds-section-pad-y)); padding-inline: 0; background: var(--ds-surface-page); position: relative; } .ds-section--raised { background: var(--ds-surface-section); } .ds-section--inverse { background: var(--ds-surface-inverse); color: var(--ds-text-inverse); } /* Перечисление h1-h4 здесь УДАЛЕНО в v0.45.0: с тех пор h1-h4 наследуют цвет родителя (tokens.css), и заголовок берёт --ds-text-inverse от самой секции. Это был ПРЕЦЕДЕНТ лечения перечислением — и именно его забыли повторить для .ds-compare__col--gradient и .ds-split-panel (дефект D-8). Оставить дубль значило бы учить копировать приём, который ломается на следующем компоненте. */ /* Компактный ритм для плотных страниц */ .ds-section--tight { padding: var(--ds-space-8) 0; } /* Декоративный слой: мягкий градиентный фон (значение задаёт тема/бренд-пакет) */ .ds-section--soft { background: var(--ds-gradient-soft); } /* Разделитель-волна между секциями. Форма — ПАРАМЕТР (--ds-divider-shape, маска data-uri), цвет — фон следующей секции. Бренд может заменить форму в своей теме, система формы не навязывает. 🔴 15.08: ПОЙМАНО НА СЕБЕ ПОСЛЕ СВОЕЙ ЖЕ ПРАВКИ. Разделитель красился `--ds-surface-raised` — «фоном следующей секции». Разведя роли (секция → белая, контрол → #ECF2F2), я оставил здесь КОНТРОЛЬНУЮ поверхность: комментарий обещал фон секции, а правило брало цвет вкладок. Волна отделяла бы секцию от цвета, которого рядом нет — и выглядела бы как «так задумано». ⚠ Класс тот же, что c-tpl нашёл у себя часом раньше: правило читается как решение и решает не то. Своя правка ломает своё же соседнее правило ТИШЕ, чем чужое. */ .ds-divider { display: block; /* 🔴 15.08: ВЫСОТА И ЦВЕТ — ТОКЕНЫ (возврат снятого предмета, находка c-tpl). Замер канона: волна — **инлайновый ** первым и последним ребёнком БЕЛОЙ секции, высота **32**, заливка — **цвет СТРАНИЦЫ** (#F7FAF3), ширина во всю секцию. У нас было 70 и заливка цветом следующей секции. Умолчания прежние. */ height: var(--ds-divider-height, 70px); margin-bottom: -1px; background: var(--ds-divider-color, var(--ds-surface-section)); -webkit-mask: var(--ds-divider-shape, none) center / 100% 100% no-repeat; mask: var(--ds-divider-shape, none) center / 100% 100% no-repeat; } .ds-divider--soft { background: var(--ds-gradient-soft); } .ds-divider--flip { transform: scaleY(-1); } /* Декоративный орб секции: цвет/размер — токены-параметры (--ds-orb-*). Не хардкод: бренд задаёт значения темой, конфиг сайта включает модификатором. */ .ds-section--decor { position: relative; overflow: hidden; } .ds-section--decor::before { content: ""; position: absolute; width: var(--ds-orb-size); height: var(--ds-orb-size); border-radius: 50%; top: calc(var(--ds-orb-size) / -3); right: calc(var(--ds-orb-size) / -4); background: var(--ds-orb-color); filter: blur(70px); pointer-events: none; } .ds-section--decor-left::before { right: auto; left: calc(var(--ds-orb-size) / -4); } .ds-section--decor > * { position: relative; } /* ── ВЕРТИКАЛЬНОЕ ПОЛЕ ПО РОЛИ СЕКЦИИ (партия 9; исправлено по замеру `c-tpl`) ────────── 🔴 ИМЕНА РАЗВЕДЕНЫ НАМЕРЕННО: в файле уже жил `.ds-section--tight` с ДРУГИМ смыслом («компактный ритм плотных страниц», `--ds-space-8`). Мои роли назывались так же — и класс менял вид, **но не по той причине и не на то число**: калькулятор давал 32 вместо 24 и вместо 64. Это тише всех прочих отказов: «что-то изменилось» читается как «работает». ⇒ новая шкала зовётся `--pad-*`, старый `--tight` остаётся как был, ничей смысл не тронут. Значения канона — в бренд-пакете; умолчание каждого = текущее общее поле. */ .ds-section--pad-tight { padding-block: var(--ds-section-pad-tight, var(--ds-section-pad-y)); } .ds-section--pad-compact { padding-block: var(--ds-section-pad-compact, var(--ds-section-pad-y)); } .ds-section--pad-wide { padding-block: var(--ds-section-pad-wide, var(--ds-section-pad-y)); } .ds-section--pad-final { padding-block: var(--ds-section-pad-final, var(--ds-section-pad-y)); } .ds-section__inner { max-width: var(--ds-container-max); margin: 0 auto; padding: 0 var(--ds-container-pad); } .ds-section__title { /* 🔴 ЭТИ 32 СХЛОПЫВАЛИСЬ С ОТСТУПОМ ПОТРЕБИТЕЛЯ И ТИХО ПОБЕЖДАЛИ (нашёл `c-tpl`, 15.08). Он объявил `margin-top: 18` у сетки секции «что входит» — правило применялось, значение доехало, а на экране оставалось 32: соседние вертикальные margin'ы СХЛОПЫВАЮТСЯ в `max(32, 18)`. **У величины снова два автора, и второй — я.** Причём мой автор невидим для потребителя: он смотрит на свой отступ и видит его же в `computed`. Токен не меняет умолчание (прежние 32) — он даёт потребителю право снять МОЮ половину там, где ритм секции его. ⚠ И правильный ход у него — НЕ ставить `0` рядом со своим margin'ом, а провести своё число через этот токен: тогда у зазора снова один автор. */ margin-bottom: var(--ds-section-title-gap, var(--ds-space-8)); } /* ---- Hero: первый экран ---- */ .ds-hero { padding: var(--ds-section-pad-y) 0; } @media (min-width: 768px) { .ds-hero { padding: var(--ds-space-24) 0; } } .ds-hero__inner { max-width: var(--ds-container-max); margin: 0 auto; padding: 0 var(--ds-container-pad); display: flex; flex-direction: column; gap: var(--ds-space-6); align-items: flex-start; } .ds-hero--center .ds-hero__inner { align-items: center; text-align: center; } /* 🔴 КЕГЛЬ ЗАГОЛОВКА ГЕРОЯ — ТОКЕН (15.08, находка c-tpl на высоте первого экрана). Наш заголовок стоял фиксированным (`4xl` = 48px) на всех ширинах ≥768, а канонный ТЕЧЁТ. Замер канона по восьми ширинам дал точную формулу — она же лежит в его css: `clamp(28px, 3vw, 36px)` → 28 на 901 · 30.72 на 1024 · 36 с 1200 и выше ниже 901 (мобильная раскладка) — фиксированные 34px Следствие фиксации: высота h1 у нас **403px против канонных 166** на 1024, и первый экран выходит 822 против 656. Символов при этом почти поровну (46 против 44) — **дело не в тексте, а в кегле**: один узел даёт бо́льшую часть разницы. ⚠ Умолчания прежние (`3xl` / `4xl` / `2xl`), izibuh и tezum не двигаются. */ .ds-hero__title { font-size: var(--ds-hero-title-size, var(--ds-fs-3xl)); /* 🔴 ВЕС И ИНТЕРЛИНЬЯЖ ЗАГОЛОВКА ГЕРОЯ — ЛОКАЛЬНЫЕ ТОКЕНЫ, А НЕ ГЛОБАЛЬНЫЕ (16.08). Замер обеих сторон: кегль СХОДИТСЯ (34 @390 · 36 @1366), а вес 800 против наших 700 и интерлиньяж 1.08 против 1.20 — при равном числе рядов (3 и 5) это +12 и +22 высоты. ⚠ Глобальные `--ds-heading-weight` / `--ds-heading-leading` НЕ ТРОГАЮ: они держат все заголовки сайта, и правка потребовала бы перемерить его целиком. Умолчания — они же. */ font-weight: var(--ds-hero-title-weight, var(--ds-heading-weight)); letter-spacing: var(--ds-heading-tracking); line-height: var(--ds-hero-title-leading, var(--ds-heading-leading)); margin: 0; } @media (min-width: 768px) { .ds-hero__title { font-size: var(--ds-hero-title-size-md, var(--ds-fs-4xl)); } } /* Очень узкие экраны: заголовок не должен переполнять — на ступень мельче и перенос длинных слов */ @media (max-width: 479px) { .ds-hero__title { font-size: var(--ds-hero-title-size-sm, var(--ds-fs-2xl)); overflow-wrap: anywhere; } } .ds-hero__lead { /* Лид героя: канон ступает на 761 — 13/1.40 ниже и 14/1.60 от 761 (бисекция 16.08: @760 = 13px/18.2, @761 = 14px/22.4). Тот же рубеж, что у кикера и полей секции — третий узел на нём. Вес у канона 500 против наших 400. */ font-size: var(--ds-hero-lead-size, var(--ds-fs-lg)); font-weight: var(--ds-hero-lead-weight, inherit); color: var(--ds-text-secondary); line-height: var(--ds-hero-lead-leading, var(--ds-lh-loose)); max-width: 40rem; margin: 0; } .ds-section--inverse .ds-hero__lead { color: var(--ds-text-muted); } .ds-hero__actions { display: flex; gap: var(--ds-space-3); flex-wrap: wrap; } /* ---- Hero со слотом media: контент слева, ассет справа (снизу на узких) ---- */ .ds-hero--media .ds-hero__inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--ds-space-12); align-items: center; } @media (max-width: 1023px) { .ds-hero--media .ds-hero__inner { grid-template-columns: 1fr; } } .ds-hero__content { display: flex; flex-direction: column; gap: var(--ds-space-6); align-items: flex-start; } .ds-hero__media { min-width: 0; } .ds-hero__media img, .ds-hero__media svg { display: block; max-width: 100%; /* не растягивать ассет выше натуральной ширины (паритет-наряд №3) */ height: auto; } /* ---- Композиция media из нескольких ассетов: базовый + плавающие поверх. Ассеты — из бренд-пакета; позиции — модификаторами, анимация — .ds-float. ---- */ .ds-media-stack { position: relative; /* Ограничение ширины композиции — темизируемый токен (дефолт none = как раньше); при заданном максимуме композиция прижимается к правому краю колонки */ max-width: var(--ds-hero-media-max, none); margin-left: auto; } /* На стеке (мобиле) композиция центрируется и не выносит декор за край */ @media (max-width: 1023px) { .ds-media-stack { margin-left: auto; margin-right: auto; } } /* 🔴 БЫЛО 559 — на пиксель мимо канонной границы `560max`. Ровно на 560 канон правило применяет, мы — нет. Тот же класс, что 899: граница, сдвинутая на единицу, даёт коридор в один пиксель и не ловится ничем, кроме прицельного замера. */ @media (max-width: 560px) { /* плавающие карточки декоративны и торчат за край на узком — скрываем, базовый ассет остаётся */ .ds-media-stack__float { display: none; } } .ds-media-stack__float { position: absolute; width: 44%; filter: drop-shadow(0 10px 24px color-mix(in srgb, var(--ds-color-primary) 18%, transparent)); } .ds-media-stack__float--tl { top: -4%; left: -2%; } .ds-media-stack__float--br { bottom: -2%; right: -4%; } /* ── ВОЛНА-КАЙМА БЕЛОЙ СЕКЦИИ (c-design, 15.08; решение по запросу integrator-c2) ────────────── * ЗАМЕР КАНОНА: 8 волн — ПО ДВЕ (верх и низ) у #calc, #srv, #inc, #form; высота 32, во всю * ширину, заливка ЦВЕТОМ СТРАНИЦЫ поверх белой секции. Доказательство парности числом: * низ #srv кончается на 3112, верх #inc начинается на 3116 — ДВЕ отдельные волны подряд, * а не одна на стыке. ⇒ это КАЙМА СЕКЦИИ, а не разделитель промежутка. * * 🔴 ПОЧЕМУ ПСЕВДОЭЛЕМЕНТЫ, А НЕ УЗЕЛ `.ds-divider`: * · парность приходит даром — два псевдоэлемента вместо двух узлов и двух ключей; * · шаблону нужен ОДИН булев ключ у секции, а не два элемента в разных местах; * · волну нельзя применить наполовину и нельзя поставить между не теми секциями; * · узел `.ds-divider` остаётся для izibuh/tezum — их модель (один, 70px) не тронута. * ⚠ ФОРМА — та же маска (`--ds-divider-shape`), что у `.ds-divider`: у канона ``, * у нас маска. Механизмы разные, результат один; сводить не буду, пока не увижу расхождения * в кадре — иначе это работа без предмета. * 🔴 НЕ СОЧЕТАТЬ С `--decor`: тот занимает `::before` под орб. Совмещение молча съест верхнюю * волну — назвал здесь, потому что гейта на это нет. */ .ds-section--wave { position: relative; } /* ── ПОЛОСЫ-ПОДЛОЖКА (`--bars`) — роль ДС, 16.08 по решению integrator-c2 ──────────────── * Замер канона: `svg.bars` — ДВА многоугольника в коробке 100×100, заливка `var(--g)` * (брендовый зелёный), у каждого экземпляра свои размер, положение и прозрачность: * hero 360×320 op .07 · секция сравнения 222×192 op .16 · форма 297×257 op .09 * ⚠ ПОЧЕМУ РОЛЬЮ, А НЕ КАРТИНКОЙ: час назад мы сняли `img.tpl-pattern` из героя по доводу * «у канона `img` нет ни одного во всём документе». Поставить его сюда значило бы закрыть * строку «нет вовсе» и своей же рукой завести строку «замена носителя» — перекладывание, * а не прогресс (формулировка integrator-c2, и она верна). * ⚠ РАЗМЕТКИ НЕ ТРЕБУЕТ — тем же приёмом, что волна: псевдоэлемент + маска. Включается * одним классом на секции, как `wave: true` у потребителя. Умолчание — не рисовать ничего. */ .ds-section--bars { position: relative; /* 🔴 ОБРЕЗКА ОБЯЗАТЕЛЬНА, И ЭТО НАШЁЛ ГЕЙТ, А НЕ Я. Подложка вынесена за правый край (`right: -60px` у канона), и без обрезки это горизонтальная прокрутка на узких. Гейт «декоративный вынос без объявленного механизма» покраснел на первой же сборке — ровно та проверка, ради которой он писался после орба и стрелок. */ overflow: hidden; } .ds-section--bars::after { /* Содержимое — токен: `none` полностью гасит псевдоэлемент. Нужно там, где декор у канона принадлежит НЕ секции, а узлу внутри неё (см. секцию сравнения). */ content: var(--ds-bars-content, ""); position: absolute; z-index: 0; pointer-events: none; /* 🔴 ЧЕТЫРЕ СТОРОНЫ, А НЕ ДВЕ (16.08, отзыв `c-ops` + разметка канона). У канона ТРИ экземпляра, и каждый посажен СВОЕЙ парой сторон: #topSlider top −40 right −60 360×320 op .07 .cmp-sec bottom −30 right −40 220×190 op .16 ← пара нашего #honest #form top −30 left −70 300×260 op .09 ⇒ роль обязана принимать любую пару; умолчание `auto` не двигает того, кто её не задал. */ top: var(--ds-bars-top, auto); right: var(--ds-bars-right, auto); bottom: var(--ds-bars-bottom, auto); left: var(--ds-bars-left, auto); width: var(--ds-bars-width, 360px); height: var(--ds-bars-height, 320px); opacity: var(--ds-bars-opacity, 0.07); background: var(--ds-bars-color, var(--ds-color-primary)); -webkit-mask: var(--ds-bars-shape, none) center / 100% 100% no-repeat; mask: var(--ds-bars-shape, none) center / 100% 100% no-repeat; } /* ── ПОЛОСЫ ОТДЕЛЬНЫМ УЗЛОМ (`.ds-bars`) — второй носитель той же роли (c-design, 17.08) ── * * 🔴 ЗАЧЕМ ВТОРОЙ НОСИТЕЛЬ, ЕСЛИ ЕСТЬ `--bars`. У секции ровно ДВА псевдоэлемента, и волна * занимает оба (`::before` + `::after`). Значит на секции с волной полосы приткнуть некуда, и * `scaffold` отказывает на паре `bars`+`wave` — отказ верный. Обходя его, я взял чужой крючок: * `.ds-section--pad-final > .ds-section__inner::after`, то есть роль ОТБИВОК как адрес декора. * Это работает и читается как ошибка — следующий будет искать полосы там, где написано «поле». * ⇒ носитель, у которого своих псевдоэлементов не отнимают: ОТДЕЛЬНЫЙ УЗЕЛ. * * 🔴 И ЭТО НЕ ОБХОД, А ФОРМА КАНОНА. У канона полосы — настоящий ``, три * экземпляра, каждый ПРЯМОЙ ребёнок полноширинного узла. Мы воспроизводим его конструкцию, * а не изобретаем свою: тогда «где отсчитывается декор» перестаёт быть вопросом. * * 🔴 ЧТО ЭТИМ ЗАКРЫВАЕТСЯ ПО СУЩЕСТВУ — ЯКОРЬ. Замер 17.08 по КРАСКЕ (снимок с полосами и без, * разница даёт истинную коробку) на трёх наших экземплярах против канонных: * #form носитель СТАТИЧЕН ⇒ отсчёт идёт от СЕКЦИИ; краска 0…230 против канонных 0…210, * левый край у обоих 0 ⇒ Δ ПО ЯКОРЮ = 0, расхождение только в РИСУНКЕ * #hero носитель `.ds-carousel__slide` ПОЗИЦИОНИРОВАН и шириной 1140 ⇒ x = 113 + 840 = 953 * против канонных 1066 при 1366 ⇒ Δ = −113 = 1366 − 1253. ЭТО и есть предмет * #honest носитель — внутренняя колонка у обеих сторон, Δ −7 * ⚠ В карте оба экземпляра записаны как «−113». Половина записи неверна: у формы якорь СОШЁЛСЯ, * и «починка» там сдвинула бы верное. Отдельный узел закрывает предмет КОНСТРУКЦИЕЙ: у прямого * ребёнка секции отсчёт не зависит от того, оказался ли какой-то предок позиционирован. * * ПОТРЕБИТЕЛЮ: узел ставится ПРЯМЫМ ребёнком полноширинного узла, до содержимого. * Разметка — зона `c-tpl`; здесь только роль и умолчания. Токены те же, что у `--bars`, * поэтому бренд-пакет переписывать не нужно: значения читаются одни и те же. */ .ds-bars { position: absolute; z-index: 0; pointer-events: none; top: var(--ds-bars-top, auto); right: var(--ds-bars-right, auto); bottom: var(--ds-bars-bottom, auto); left: var(--ds-bars-left, auto); width: var(--ds-bars-width, 360px); height: var(--ds-bars-height, 320px); opacity: var(--ds-bars-opacity, 0.07); background: var(--ds-bars-color, var(--ds-color-primary)); -webkit-mask: var(--ds-bars-shape, none) center / 100% 100% no-repeat; mask: var(--ds-bars-shape, none) center / 100% 100% no-repeat; } /* Носитель обязан быть позиционирован и обрезать вынос — иначе декор уедет к первому позиционированному предку и даст горизонтальную прокрутку (тот же довод, что у `--bars`). */ .ds-bars-host { position: relative; overflow: hidden; } .ds-section--wave::before, .ds-section--wave::after { content: ""; position: absolute; left: 0; right: 0; height: var(--ds-divider-height, 70px); background: var(--ds-divider-color, var(--ds-surface-page)); -webkit-mask: var(--ds-divider-shape, none) center / 100% 100% no-repeat; mask: var(--ds-divider-shape, none) center / 100% 100% no-repeat; pointer-events: none; } .ds-section--wave::before { top: 0; transform: scaleY(-1); } .ds-section--wave::after { bottom: 0; } /* ═══ components/orb/orb.css ═══ */ /* f7c_design :: Декоративное свечение-орб (наряд c-ops «декор-слой»: атмосфера секций из размытых разноцветных пятен, как в прототипе izibuh .orb). Требует tokens.css. Ставится внутрь позиционированного контейнера (напр. .ds-section с position:relative); за контентом, кликами не перехватывается. Позицию задаёт рендер утилитами --ds-orb-x/-y (или inline у сайта — но CSP: только через класс-позицию). */ .ds-orb { position: absolute; z-index: 0; /* Собственный размер орба вынесен в переменную: на неё опираются СМЕЩЕНИЯ (ниже), поэтому доля видимой площади одинакова на любой ступени. */ /* 🔴 ПОЛ 280px — МЕХАНИЗМОМ, а не гейтом-жалобой. Просьба держателя канона была «секционный орб <280 → красный», но статический гейт computed-диаметра не видит, а красный постфактум ловит уже собранное. max() делает нарушение НЕВОЗМОЖНЫМ при любом токене бренда. Почему именно 280: это МИНИМУМ канона (размеры 280…460, ни одного мельче). Плюс механика размытия — при filter: blur(70px) пик яркости в центре = 1-exp(-R²/2σ²): у орба 210px это 68% заданной альфы, у 280px — 86%, у 450px — 99%. То есть мелкий орб не только мал, но и БЛЕДНЕЕ объявленного, причём computed этого не показывает: в CSS честно стоит .10, а на экране .068. Ниже канонного минимума орб перестаёт быть свечением и становится каймой. 🔴 ПОЛ 290, А НЕ 280 — И ЭТО ПОПРАВКА К МОЕЙ ЖЕ ПЕРВОЙ ВЕРСИИ (находка c-web-1 до сборки). Я задал пол по ДИАМЕТРУ канонного минимума (280px), а критерий приёмки — ПРОИЗВЕДЕНИЕ площади на видимую долю (≥34 741 px²). Это разные величины, и 280 их не связывает: 280px × 54.8% = 33 743 px² — НЕ ХВАТАЕТ 998 до порога; 290px × 54.8% = 36 196 px² — проходит с запасом. Почему канону 280 хватало, а нам нет: канон держал свой минимум при доле 56.4%, наши смещения (-28%/-32%) дают 54.8% — чуть жёстче. Минимальный диаметр под наш критерий 284.1px. Отсюда норма, которую стоит запомнить: пол обязан гарантировать РЕЗУЛЬТАТ источника, а не воспроизводить его ЧИСЛО. 290px «не как в каноне» по диаметру — но даёт ровно то, что канон давал по существу. ⚠ Следствие, которое надо знать: при токене 300 ступень --sm упирается в пол и совпадает с --md. Это не дефект механизма, а честный ответ — В КАНОННОМ ДИАПАЗОНЕ МЕСТА ПОД МАЛУЮ СТУПЕНЬ ПРОСТО НЕТ. Шкала остаётся втроём ради читаемости API, но sm перестаёт быть ловушкой: он больше не может отрендериться каймой. */ --ds-orb-w: max(290px, var(--ds-orb-size)); width: var(--ds-orb-w); height: var(--ds-orb-w); border-radius: 50%; background: var(--ds-orb-color); filter: blur(70px); pointer-events: none; } /* Цветовые варианты — из палитры токенов (все декоративные) */ .ds-orb--primary { background: var(--ds-orb-color-primary); } .ds-orb--accent { background: var(--ds-orb-color-accent); } .ds-orb--alt { background: var(--ds-orb-color-alt); } /* Позиции (класс, не inline — CSP style-src 'self') */ /* 🔴 СМЕЩЕНИЯ — ДОЛИ ОРБА, А НЕ ПРОЦЕНТЫ СЕКЦИИ. Это корень жалобы владельца, найденный c-design-2 (орбы срезаны до 25-29% площади), и он глубже размера ступеней. Было `top: -12%` — процент от ВЫСОТЫ СЕКЦИИ. Секции разной высоты, поэтому одна и та же разметка давала разный срез: на секции 400px малый орб видно на 77%, на 1200px — на 31%, а при высокой секции он срезается целиком. Величина, которой мы управляли, не та, которую хотели держать. Канон позиционирует орбы в ПИКСЕЛЯХ, и эти пиксели пропорциональны самому орбу: замер по десяти орбам канона — вертикаль 19-36% (среднее 29%), горизонталь 21-47% (среднее 36%). Поэтому и здесь доли ОРБА через --ds-orb-w: видимая площадь становится ПОСТОЯННОЙ и не зависит ни от ступени, ни от высоты секции. Взяты -28% / -32% (чуть мягче среднего канона): численный расчёт площади круга под срезом даёт 55% для УГЛОВОГО орба (срез по двум осям — худший случай) и 72% для бокового. Канон для сравнения: минимум 47%, среднее 59%, угловые 45-56%. То есть мы попадаем в его диапазон и проходим критерий «≥50% внутри», которого сам канон достигает в 9 случаях из 10. ⚠ --c (центральный) смещений не имеет и не срезается — проценты секции там уместны. */ .ds-orb--tl { top: calc(var(--ds-orb-w) * -0.28); left: calc(var(--ds-orb-w) * -0.32); } .ds-orb--tr { top: calc(var(--ds-orb-w) * -0.28); right: calc(var(--ds-orb-w) * -0.32); } .ds-orb--bl { bottom: calc(var(--ds-orb-w) * -0.28); left: calc(var(--ds-orb-w) * -0.32); } .ds-orb--br { bottom: calc(var(--ds-orb-w) * -0.28); right: calc(var(--ds-orb-w) * -0.32); } .ds-orb--c { top: 30%; left: 40%; } /* Крупнее/мельче отдельного пятна */ /* 🔴 ДРЕЙФ — канон concept-v2.3.0:103: `.orb{animation:drift 14s ease-in-out infinite alternate}`, БЕЗУСЛОВНО на всех орбах. Замер c-ops: у нас animation-name:none, transform неподвижен 2.5с при no-preference — то есть орбы статичны у ВСЕХ, а не только под запросом покоя. Дрейф в ядре был, но подключён к ДРУГИМ элементам: ::before секции и панели калькулятора (.ds-section--decor-drift / .ds-calc__panel--orb-drift). До компонента .ds-orb он не доходил. Это не «не реализовано вообще», а «реализовано не там» — важное различие: сам keyframes ds-drift рабочий и проверен, подключаем существующий механизм к нужному элементу. Безусловно, а не под флагом: так в каноне. Гашение покоя — универсальным правилом motion.css (v0.47.0), отдельного здесь не нужно; строка выше оставлена как локальная страховка. */ .ds-orb { animation: ds-drift var(--ds-anim-drift-duration) ease-in-out infinite alternate; } .ds-orb--lg { --ds-orb-w: max(290px, calc(var(--ds-orb-size) * 1.5)); } /* 🔴 --md ЯВНОЙ СТУПЕНЬЮ, хотя размер ×1.0 и так даёт базовый класс. Наряд просил «добавить третью ступень», и первым ответом было «она уже есть — это .ds-orb без модификатора». Формально верно, но это НЕ ответ: шкала из --sm и --lg БЕЗ середины учит, что размер выбирается из двух, и middle читается как «забыли», а не как «по умолчанию». c-design-2 померила распределение канона (кластеры 311 и 407, отношение 1.31) против ступеней ядра (210/450, отношение 2.14 — вдвое шире) и показала, что семь орбов из десяти теряли бы 25-34% размера. Причина промаха не в отсутствии размера, а в АСИММЕТРИИ ИМЁН. Поэтому --md заводится как псевдоним базы: значение то же, шкала становится читаемой втроём, и шаблон может эмитить ступень симметрично, не полагаясь на «отсутствие класса». Тот же класс, что «эталон учит употреблению»: API, где середины не видно, её и не используют. */ .ds-orb--md { --ds-orb-w: max(290px, var(--ds-orb-size)); } .ds-orb--sm { --ds-orb-w: max(290px, calc(var(--ds-orb-size) * 0.7)); } /* Контейнер для явных орбов: позиционирование + обрезка размытых краёв. (ds-section--decor тоже relative+overflow, но несёт СВОЙ ::before-орб; --glow — чистый контейнер под произвольный набор .ds-orb.) */ .ds-section--glow { position: relative; overflow: hidden; } /* 🔴 КОНТРАКТ ДЕКОРАТИВНОГО РЕБЁНКА (14.08, находка integrator-c2 на живом forbion). Это правило поднимает содержимое секции над орбами — и оно ЗНАЛО про декоративных детей, но исключало ТОЛЬКО СВОЕГО (`.ds-orb`). Чужой декор — брендовый паттерн шаблона, `.tpl-pattern` с `position:absolute` (0,1,0) — проигрывал этому правилу (0,2,0), падал в поток, занимал 285 px и сдвигал первый экран вниз. Владелец увидел «пустоту сверху». 🔴 ДС вывела исключение для себя и не оставила контракта для чужих — чинится это контрактом, а не заплаткой: дописать сюда `.tpl-pattern` значило бы, что ЯДРО знает класс ШАБЛОНА, а поднять вес в шаблоне — гонка, которая повторится на следующем компоненте. ⚠ ПРИЗНАК — атрибут `data-ds-decor`, а не класс: класс потребовал бы согласовывать имя в двух неймспейсах, атрибут нейтрален к обоим. Помечает его ПОТРЕБИТЕЛЬ (шаблон/сборка) на своём декоре; ядро не знает ни одного чужого имени. ⚠ Список внутри ОДНОГО `:not()` — намеренно: специфичность `:not()` равна самому весомому аргументу, поэтому `(0,2,0)` СОХРАНЯЕТСЯ. Два раздельных `:not()` дали бы (0,3,0) и молча перебили бы чужие правила — правка «на всякий случай» стала бы новым дефектом. */ /* 🔴 15.08: В ЭТУ ЖЕ ЯМУ УПАЛ МОЙ СОБСТВЕННЫЙ КОМПОНЕНТ. `.ds-sphere` (0,1,0) с `position:absolute` проигрывал этому правилу (0,2,0), получал `position:relative`, переставал блокифицироваться, оставался строчным — БОКС 0×0, градиент рисовать негде. На живом: «в разметке 3 сферы, на экране ничего» (нашёл c-ops по пикселям, Д-7). ⚠ Довод шапки был про ЧУЖОЙ класс: ядро не должно знать имён шаблона. `.ds-sphere` — ИМЯ ЯДРА, поэтому оно здесь законно, а `data-ds-decor` остаётся контрактом для чужих. ⚠ Дописано ВНУТРЬ того же `:not()`: вес (0,2,0) сохраняется (см. абзац выше). */ /* 🔴 17.08: ТРЕТИЙ РАЗ ТА ЖЕ ЯМА, И НА ЭТОТ РАЗ ЕЁ НАШЁЛ ГЕЙТ ДО ВЫКЛАДКИ. Новый `.ds-bars` (полосы отдельным узлом) — такой же `position:absolute` (0,1,0) и проиграл бы этому (0,2,0): блокификация пропадает, бокс 0×0, на экране НИЧЕГО при зелёном счёте узлов. Прежние два раза это ловили на живом — `.tpl-pattern` глазами владельца, `.ds-sphere` по пикселям у `c-ops`. 📌 Класс закрыт не бдительностью, а гейтом «декор ядра исключён из подъёма»: он перечисляет декор-классы ядра и требует, чтобы каждый стоял здесь. Третий однотипный случай — повод строить перечень, и перечень уже был построен; он и сработал. ⚠ Дописано ВНУТРЬ того же `:not()`: вес (0,2,0) сохраняется. */ .ds-section--glow > :not(.ds-orb, .ds-sphere, .ds-bars, [data-ds-decor]) { position: relative; z-index: 1; } @media (prefers-reduced-motion: reduce) { .ds-orb { animation: none; } /* дрейф ниже — гасится вместе со всем движением */ } /* ═══ components/sphere/sphere.css ═══ */ /* f7c_design :: СФЕРА — плотный декоративный шар. Требует tokens.css. * * ПОВОД (15.08, визуальный дифф первого экрана). В каноне между заголовком и купоном стоит * ПЛОТНЫЙ шар 110×110 с бликом и тенью; на живом его нет вовсе. Компонента под него не было. * * 🔴 ЭТО НЕ ОРБ, И СМЕШИВАТЬ ИХ НЕЛЬЗЯ: * `ds-orb` — мягкое пятно-подсветка: сотни пикселей, размытие, служит ФОНОМ секции; * `ds-sphere` — предметный шар: сотня пикселей, чёткий край, блик и падающая тень. * Первое красит воздух, второе — вещь в кадре. У них разные роли, поэтому разные компоненты. * * Значения СНЯТЫ С КАНОНА (замер вычисленных стилей), а не подобраны: * градиент radial-gradient(circle at 33% 28%, блик, #A8DC6C 46%, #5F9C26 100%) * тень 0 28px 46px -18px rgba(87,141,36,.5) + внутренняя подсветка сверху * прозрачность .5 · радиус 50% · три размера в каноне: 110 · 89 · 71 * * ⚠ Цвета шара НЕ выведены из --ds-color-primary: в каноне это своя пара (светлее и темнее * фирменного), и вывод из primary дал бы другой объём. Поэтому — свои токены бренда. */ .ds-sphere { position: absolute; /* 🔴 `display:block` ИЗБЫТОЧЕН при `position:absolute` — и стоит здесь именно поэтому. 15.08 чужое правило (0,2,0) перебило `position` на `relative`; блокификация пропала, `span` остался строчным, ширина/высота НЕ ПРИМЕНИЛИСЬ → бокс 0×0 и НИЧЕГО НА ЭКРАНЕ. Провал был МОЛЧАЛИВЫМ: узлы в разметке есть, счёт даёт 3 из 3, гейты зелёные. С этой строкой следующая такая перебивка даст сферу НЕ ТАМ — то есть КРИЧАЩИЙ провал, который видно глазом и который нельзя принять за «сделано». */ display: block; border-radius: 50%; pointer-events: none; z-index: 0; width: var(--ds-sphere-size, 110px); height: var(--ds-sphere-size, 110px); opacity: var(--ds-sphere-opacity, 0.5); background: radial-gradient(circle at 33% 28%, var(--ds-sphere-hi, rgba(255, 255, 255, 0.95)), var(--ds-sphere-mid, #a8dc6c) 46%, var(--ds-sphere-low, #5f9c26) 100%); box-shadow: 0 28px 46px -18px var(--ds-sphere-shadow, rgba(87, 141, 36, 0.5)), inset 0 -12px 26px var(--ds-sphere-inner, rgba(62, 112, 19, 0.28)); } /* Три ступени — по трём вхождениям в каноне (110 · 89 · 71), а не «на всякий случай». */ .ds-sphere--lg { --ds-sphere-size: 110px; } .ds-sphere--md { --ds-sphere-size: 89px; } .ds-sphere--sm { --ds-sphere-size: 71px; } /* 🔴 ДВИЖЕНИЕ — ТОЛЬКО ПО СОГЛАСИЮ СРЕДЫ. В каноне шар плавает (`floaty` 5.2s). * Здесь анимация включается лишь при отсутствии запрета: у нас записано, что в моей среде * reduce ВКЛЮЧЁН, и «я не видел движения» — не доказательство его отсутствия. */ @media (prefers-reduced-motion: no-preference) { .ds-sphere--float { animation: ds-sphere-floaty 5.2s ease-in-out infinite alternate; } } @keyframes ds-sphere-floaty { from { transform: translateY(0); } to { transform: translateY(-14px); } } /* Раскладка ТОЛЬКО для примера в sphere.html — потребитель позиционирует сам. Живут здесь, потому что inline style= запрещён CSP (гейт 1). */ .ds-sphere-demo { position: relative; height: 200px; } .ds-sphere-demo__a { left: 40px; top: 20px; } .ds-sphere-demo__b { left: 200px; top: 40px; } .ds-sphere-demo__c { left: 340px; top: 60px; } /* ═══ components/eyebrow/eyebrow.css ═══ */ /* f7c_design :: Эйбр — плашка-подпись над заголовком секции. Требует tokens.css. */ .ds-eyebrow { display: inline-flex; align-items: center; gap: var(--ds-space-2); /* размер и интерлиньяж — тоже бренд-решение: канон forbion даёт 11.5px и высоту 14, ядро — `--ds-fs-xs` и наследование. Умолчания прежние, чужие бренды не двигаются. */ font-size: var(--ds-eyebrow-size, var(--ds-fs-xs)); /* ⚠ УМОЛЧАНИЕ `inherit`, А НЕ `normal`: до правки строки не было вовсе и интерлиньяж НАСЛЕДОВАЛСЯ. `normal` выглядит нейтральным, но это ДРУГОЕ значение — izibuh поехал 34→30 на первом же замере. Нейтральное умолчание — то, что воспроизводит прежний рендер, а не то, что нейтрально звучит. */ line-height: var(--ds-eyebrow-lh, inherit); font-weight: var(--ds-fw-bold); letter-spacing: var(--ds-eyebrow-tracking, 0.12em); text-transform: uppercase; color: var(--ds-color-accent); /* 🔴 ПЛАШКА ИЛИ ГОЛАЯ ПОДПИСЬ — РЕШАЕТ БРЕНД (15.08). Канон forbion: подписи БЕЗ фона и БЕЗ полей — высота 14 против наших 34, то есть это не «другой отступ», а ДРУГОЙ ОБЪЕКТ. Умолчания оставлены прежними: izibuh и tezum остаются с плашкой. */ background: var(--ds-eyebrow-bg, var(--ds-surface-raised)); border-radius: var(--ds-radius-full); padding: var(--ds-eyebrow-pad, var(--ds-space-2) var(--ds-space-4)); /* 🔴 ЗАЗОР ПОД КИКЕРОМ — ТОКЕН, а не число (15.08, вопрос c-tpl). Канон forbion-1c: `.eyebrow{margin-bottom:8px}`, высота 14 ⇒ ЗАЗОР 8, ШАГ 22. ⚠ Моя партия 4 отдавала «22», и это ШАГ между верхами узлов. Поставить 22 в margin — получить шаг 36. Число без единицы уехало бы в правку: единица здесь — ЗАЗОР. ⚠ И «до h2» неверно: в `#calc` следующий узел — `div.calc-head`. Правило канона — «до СЛЕДУЮЩЕГО УЗЛА», поэтому у секций с тихой строкой оно достижимо, а не отменяется. Умолчание ядра оставлено прежним (16) — izibuh и tezum не двигаются; forbion берёт 8 в своём бренд-пакете. ОБЛАСТЬ ПРАВКИ = ОБЛАСТЬ РЕШЕНИЯ. */ margin-bottom: var(--ds-eyebrow-gap, var(--ds-space-4)); } /* Опциональный маркер-иконка (из набора components/icons) */ /* 🔴 ТИРЕ-ЛИНИЯ ПЕРЕД КИКЕРОМ — приём канона forbion (15.08, строка 22 диффа глазами). Замер: `::before` шириной 22px, высотой 2px, цвет primary. Умолчание — БЕЗ линии (ширина 0), поэтому izibuh и tezum не получают ничего нового. */ .ds-eyebrow::before { content: ""; display: inline-block; width: var(--ds-eyebrow-dash, 0); height: 2px; background: var(--ds-color-primary); flex: 0 0 auto; } .ds-eyebrow__icon { width: 0.85em; height: 0.85em; flex-shrink: 0; } /* ═══ components/stat/stat.css ═══ */ /* f7c_design :: Плитки-цифры. Требует tokens.css. */ /* 🔴 КОЛОНКИ — МЕХАНИЗМ, А НЕ СОВПАДЕНИЕ ШИРИН (15.08, находка c-ops на живом). Было `flex-wrap`: плитки брали ширину ПО СОДЕРЖИМОМУ (160 · 256 · 166), поэтому левая кромка второй колонки держалась тем, что тексты первой оказались похожей длины. Замер показал разъезд 224 против 230 — Δ6 на всех шести комбинациях тем×ширин. ⚠ Дефект здесь не «6 пикселей», а ОСНОВАНИЕ: правка текста у `c-copy` сдвигала бы колонку, и виноват был бы текст, а не раскладка. Ряд, выровненный содержимым, — не выровненный ряд. Сетка с равными долями делает кромку следствием ПРАВИЛА: любой текст, любая тема, любой брейк. ⚠ `minmax(0, 1fr)`, а не `1fr`: у грид-элемента `min-width:auto`, и длинное слово в значении распирало бы колонку — тот же content-sized дефект, только через заднюю дверь. На узком (<480) колонка одна: две доли по 160 там не помещаются. */ .ds-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-space-8) var(--ds-space-12); align-items: start; } @media (max-width: 479px) { .ds-stats { grid-template-columns: minmax(0, 1fr); } } /* 🔴 БЛОК `.ds-stat` СОБСТВЕННЫХ ПРАВИЛ НЕ ИМЕЛ ВОВСЕ — и это НЕ забытое имя, а решение, которое до сегодня нигде не было записано (нашёл гейт `c-tpl`, 16.08, четвёртой сиротой). Вид плитки дают ЭЛЕМЕНТЫ (`__value`, `__label`, `__icon`) и модификатор `--plain`; геометрию — контейнер `.ds-stats` (грид с равными долями). Блоку принадлежать нечему. ⚠ Но «нечему» обязано быть НАПИСАНО: незаписанное решение неотличимо от забытого, и сегодня это уже стоило нам четырёх разборов. Объявляю `display: block` — ровно то, что и так даёт `
`, то есть контракт зафиксирован, а рендер не двигается. ⚠ ЧЕСТНО О ДОКАЗАТЕЛЬСТВЕ: узлов `.ds-stat` нет ни на одной доступной мне поверхности (`ts.f7cloud.ru` 0, `izibuh.ru` 0) — «рендер не двигается» здесь следует ИЗ ПОСТРОЕНИЯ (умолчание `
`), а не из замера. Если шаблон печатает блок иным тегом, чем `
`, правило станет изменением — скажите, и пересмотрю. */ .ds-stat { display: block; } .ds-stat__value { display: block; font-size: var(--ds-fs-2xl); font-weight: var(--ds-fw-bold); line-height: var(--ds-lh-tight); font-variant-numeric: tabular-nums; /* Градиент — декоративен: крупный кегль (2xl bold) допускает его по WCAG для largescale-текста; для мелких значений использовать модификатор --plain */ background: var(--ds-text-link); background: var(--ds-gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; } .ds-stat--plain .ds-stat__value { background: none; /* text-link, не color-primary: тот же класс R11-btn (17.07). Основной __value — градиент (color:transparent), а --plain красит текст брендовым синим на прозрачном фоне → do-not-flip primary в тёмной теме нечитаем. text-link флипается. */ color: var(--ds-text-link); } /* ── ИКОНКА ПЛИТКИ (c-design 14.08) ──────────────────────────────────────────────── * 🔴 ЗАКРЫВАЮ ОБЪЯВЛЕННЫЙ ДОЛГ ШАБЛОНА, а не завожу новое. `c-tpl` в `TEMPLATE v0.100.0` * добавил иконку плитке и НАЗВАЛ причину вслух: у ядрового `.ds-stat` слота иконки нет, * а изобретать `ds-*` из шаблона нельзя — поэтому там временный класс `tpl-stat__icon` * с пометкой «заведёт c-design `ds-stat__icon` — мой класс снимается». * Долг был объявлен ДО работы, а не после; отвечаю тем же — слот заведён, класс можно снимать. * * ⚠ Иконка здесь ДЕКОРАТИВНАЯ спутница значения, а не носитель смысла: плитка читается * и без неё (значение + подпись). Поэтому цвет приглушённый и размер привязан к кеглю * ПОДПИСИ, а не значения: у значения градиентный 2xl, и иконка в его размере спорила бы * с числом за внимание — а число здесь главное. */ .ds-stat__icon { display: block; width: 1.25em; height: 1.25em; margin-bottom: var(--ds-space-2); /* 🔴 ЦВЕТ ПРИВЕДЁН К ИДИОМЕ КАНОНА (14.08, вопрос integrator-c2). Я поставил приглушённый, * рассудив «иконка не должна спорить с числом». Довод мой, а не канона — а приказ владельца * «как в макете». Замер канона: значков со ссылкой на символ 47 штук, у 45 из них * stroke = rgb(62,112,19) — БРЕНДОВЫЙ ЗЕЛЁНЫЙ; приглушённых/серых нет ни одного. * ⚠ Плиток value/label в каноне НЕТ ВООБЩЕ, поэтому «как в каноне» задаёт не размер, а ИДИОМУ: * размер 18 остаётся (канонные значки 14–22 в тех же ролях), цвет уходит к брендовому. * Токен `--ds-text-link`, а не литерал #3E7013: последний не наш утверждённый цвет — его уже * сводили к бренду (#478016), и повторять чужую опечатку канона нельзя. */ color: var(--ds-text-link); font-size: var(--ds-fs-sm); } .ds-stat__label { display: block; margin-top: var(--ds-space-1); font-size: var(--ds-fs-sm); color: var(--ds-text-secondary); max-width: 16rem; } /* ═══ components/mark/mark.css ═══ */ /* f7c_design :: Подсветка слова маркером. Требует tokens.css. Цвет подсветки -- токен --ds-mark-color (полупрозрачный акцент). --- ds-mark и color в тёмной теме (признак владельца 17.07, "изи" в h1) --- Тег несёт user-agent color (marktext / чёрный). Без переопределения текст внутри mark чёрный при любом контексте: в светлой теме не видно (заголовок и так тёмный), в тёмной заголовок светлый (--ds-text-primary), а mark остаётся чёрным -> чёрное на тёмно-розовой подложке, слово в главном h1 нечитаемо. Лечение: color:inherit -- mark наследует цвет контекста (h1), который флипается вместе с темой. Проверено на живом проде (c-design-2): inline color:inherit даёт rgb(246,248,253) в тёмной. -webkit-text-fill-color НЕ нужен: он не перебивает color (тот же inline-тест дал светлый, а не чёрный), реальный UA его отдельно не ставит. ПРАВИЛО РАЗМЕТКИ ЭТОГО ФАЙЛА (следствие реального бага 17.07): color:inherit стоит ПЕРВЫМ свойством, вплотную после '{', а комментарий -- ВНЕ тела правила (здесь, перед селектором). Комментарий между '{' и первым свойством в external @import CSS СЪЕДАЛ color из распарсенного правила (CSSOM .ds-mark оставался без color -> mark брал UA-чёрный, computed #000 в обеих темах). c-design-2 намерил это по CSSOM на проде; мой inline-тест в артефакте не воспроизводил (inline