/* РАСКЛАДКИ СЕКЦИИ ПОКАЗАТЕЛЕЙ - ЗЕРКАЛО, А НЕ СВОЯ ВЕРСИЯ. Источник: design/v4/site-stats/kit/ (3 файла). Собирает tools/adopt-stats.php; правка руками теряется при следующем срезе и теряется молча. Отступления от побайтовой копии объявлены В КОДЕ ИНСТРУМЕНТА и печатаются отчётом прогона. Их 11. */ /* ===== stats.css ===== */ /* СЕКЦИЯ ПОКАЗАТЕЛЕЙ - оболочка, роли, шкала, разделители, разметка пары. Слой САЙТА (sc-base): ни одного --sc-*. Наборы лежат в stats-a.css и stats-b.css. ОСИ. Их три, и они те же, что назвало ТЗ: data-split чем разделены столбцы: line | frame | card | none data-face какой гарнитурой набрано значение: text | head шапка сверху (семья A) | сбоку (семья B) - это класс набора, не признак Больше осей у секции нет: ни фотографии, ни состояний, ни движения. Шесть наборов и есть весь размер задачи - раздувать решётку сочетаниями, не дающими ЗАМЕРЯЕМОГО отличия, запрещено (та же оговорка, что в двух прошлых пакетах). ДВА ПОРОГА, второй объявлен осознанно: 700 - узкий: один столбец; 1040 - средний: два столбца. Шире 1040 - четыре. Без среднего порога не выражается НИ ОДИН четырёхколоночный набор: на 800 точках четыре колонки дают колонку в 194 точки, то есть подпись в 24 знака и пояснение в 18; один столбец на 800 - расточительство в полтора экрана прокрутки. Порог один на всю систему, а не по месту. Число то же, что в пакете первого экрана: две разные величины порога в одной теме - это два разных сайта. ШКАЛА КЕГЛЕЙ - те же десять ступеней с отношением 1,25 и МОНОТОННЫМ интерлиньяжем, проверенным на КИРИЛЛИЦЕ (минимум 1,109 из-за диакритики прописных Ё и Й): 12,8 - 1,4 | 16 - 1,5 | 20 - 1,4 | 25 - 1,3 | 31,25 - 1,25 39,06 - 1,2 | 48,83 - 1,18 | 61,04 - 1,15 | 76,29 - 1,14 | 95,37 - 1,12 Значению доступны три ступени - 48,83, 61,04, 76,29. Верхнюю ступень разведки (95,37 весом 700) мы НЕ берём: там она стоит при одной паре гарнитур, а у нас десять, и на узколицых парах 95,37 в колонке 300 точек не оставляет места подписи. Это первое намеренное расхождение с замером, см. 03-CAVEATS. ВЫСОТА НЕ ФИКСИРУЕТСЯ НИГДЕ. Ряд выравнивается по самой высокой ячейке (правило 06), потому что «Окно ответа» и «Response window» - разной высоты, а на иврите третьей. */ /* --- СИСТЕМНЫЕ ЗНАЧЕНИЯ СЛОЯ САЙТА. Те же, что в пакете первого экрана: файл автономен, потому что подключается один, но числа обязаны совпадать со hero.css - расхождение означало бы две шкалы органов на одном сайте. Роли палитры сюда НЕ входят: они приходят из данных клиента инлайном. --- */ .ls-w,.ls-stats-sec{--ls-body:20px;--ls-eb:12.8px;--ls-btn:16px;--ls-sm:14px; --ls-dur-fast:140ms;--ls-dur-base:220ms;--ls-ease:cubic-bezier(.2,.6,.3,1); --ls-focus-w:2px;--ls-tap:44px; --ls-pad-compact:56px;--ls-pad-cosy:96px;--ls-pad-spacious:144px;--ls-h2:48.83px; --ls-stats-hair:1px} .ls-w{container-type:inline-size;container-name:ls} .ls-stats-sec,.ls-stats-sec *,.ls-stats-sec *::before,.ls-stats-sec *::after{box-sizing:border-box} /* --- СЕКЦИЯ. Плоскость палитры, поля из общей шкалы. Высота - по содержимому всегда: у показателей нет полноэкранного роста, это не первый экран. --- */ .ls-stats-sec{position:relative; padding-block:var(--ls-stats-pad,96px);padding-inline:var(--ls-stats-pin,24px); background:var(--ls-paper,#fff);color:var(--ls-ink,#000); font-family:var(--ls-text-face,system-ui);font-size:var(--ls-body,20px);line-height:1.4} @container ls (max-width:1040px){.ls-stats-sec{--ls-stats-pad:72px}} @container ls (max-width:700px){.ls-stats-sec{--ls-stats-pad:56px;--ls-stats-pin:20px}} .ls-stats-sec__in{inline-size:100%;max-inline-size:var(--ls-stats-max,var(--ls-max,1536px));margin-inline:auto} /* --- ШАПКА. Общая на обе семьи: у A она стоит над рядом, у B в своей колонке, но набрана одинаково - это одна и та же шапка секции, а не два разных объекта. --- */ .ls-stats__head{display:grid;gap:16px;max-inline-size:var(--ls-stats-headw,640px); text-wrap:pretty} .ls-stats__eb{display:flex;align-items:center;gap:14px;margin:0; font-size:var(--ls-eb,12.8px);line-height:1.4;font-weight:500;letter-spacing:.025em; color:var(--ls-muted,#666)} /* Линия уходит вместе с надписью: одна висящая черта - мусор. */ .ls-stats__eb::before{content:"";inline-size:40px;block-size:1px;flex:none; background:currentColor;opacity:.6} .ls-stats__h{margin:0;font-family:var(--ls-head-face,inherit); font-size:var(--ls-h2,48.83px);line-height:var(--ls-stats-hlh,1.18); font-weight:var(--ls-stats-hw,600);letter-spacing:-0.01em} @container ls (max-width:1040px){.ls-stats__h{--ls-h2:39.06px;--ls-stats-hlh:1.2}} @container ls (max-width:700px){.ls-stats__h{--ls-h2:31.25px;--ls-stats-hlh:1.25}} .ls-stats__p{margin:0;font-size:var(--ls-body,20px);line-height:1.4;max-inline-size:60ch; color:var(--ls-muted,#666)} .ls-stats__acts{display:flex;flex-wrap:wrap;gap:12px;margin-block-start:8px} .ls-stats__btn{display:inline-flex;align-items:center;justify-content:center; min-block-size:52px;padding-block:14px;padding-inline:28px;border:0;border-radius:var(--ls-radius,14px); background:var(--ls-acc,#333);color:var(--ls-acc-on,#fff);font:inherit; font-size:var(--ls-btn,16px);font-weight:500;text-decoration:none;cursor:pointer; transition:background-color var(--ls-dur-fast,140ms) var(--ls-ease,ease)} .ls-stats__btn:hover{background:color-mix(in oklab,var(--ls-acc,#333) 88%,var(--ls-ink,#000))} /* НАЖАТИЕ: плоскость на ступень глубже и БЕЗ перехода. Отклик на нажатие обязан совпадать с пальцем - переход даже на 140 мс читается как задержка, потому что человек уже отпустил. Ни сдвига, ни масштаба: transform на кнопке в ряду сдвигает соседей по оптике, а правило 06 держит ряд ровным. */ .ls-stats__btn:active{background:color-mix(in oklab,var(--ls-acc,#333) 78%,var(--ls-ink,#000)); transition-duration:0s} .ls-stats__btn--ghost{background:transparent;color:inherit; box-shadow:inset 0 0 0 1px color-mix(in oklab,currentColor 42%,transparent)} .ls-stats__btn--ghost:hover{background:color-mix(in oklab,currentColor 12%,transparent)} .ls-stats__btn--ghost:active{background:color-mix(in oklab,currentColor 20%,transparent); transition-duration:0s} /* Шапки нет вовсе - допустимое состояние: секция из одной сетки. Отступ между шапкой и рядом принадлежит РЯДУ, а не шапке, поэтому при пустой шапке ничего не остаётся висеть. */ .ls-stats{margin-block-start:var(--ls-stats-gapy,56px)} .ls-stats-sec__in > .ls-stats:first-child{margin-block-start:0} /* --- РЯД. Одна переменная на всё, что меняется на узком - --ls-stats-cols. Инлайн печатает ПОТРЕБИТЕЛЯ (style="grid-template-columns:var(--ls-stats-cols,repeat(4,1fr))"), поэтому каждый порог только переопределяет переменную и ничего больше. --- */ .ls-stats{display:grid;grid-template-columns:var(--ls-stats-cols,repeat(4,1fr)); gap:var(--ls-stats-gap,0)} @container ls (max-width:1040px){.ls-stats{--ls-stats-cols:repeat(2,1fr)}} @container ls (max-width:700px){.ls-stats{--ls-stats-cols:1fr}} /* --- РАЗДЕЛИТЕЛИ. Не «линия у каждой ячейки, кроме первой»: номер первой зависит от числа колонок, а оно у нас меняется дважды и приходит инлайном - селектор :nth-child(4n+1) врёт на двух колонках и на одной. Не «линия у всех и обрез первой» тоже: этот приём держится на том, что сдвиг ряда РАВЕН толщине волоска, а на экране с дробным масштабом волосок печатается в 0,8 пикселя и у первого столбца остаётся сливер - линия, которой быть не должно (замер: грид на 47,0, обрез на 48,0, кромка 0,8). Наш приём: линия - это САМ ЗАЗОР решётки. Ряд залит цветом волосяной линии, ячейки кроют плоскостью, зазор в один пиксель остаётся видимым. Наружных линий тогда нет ПО ПОСТРОЕНИЮ - у крайних ячеек снаружи нет зазора. Ни отдельного правила на первый столбец, ни обрезки, ни сдвига, ни разницы между LTR и RTL, ни разницы между одной строкой и двумя: на стыке строк появляется своя горизонтальная линия, а вертикали второй строки стоят ровно под вертикалями первой, потому что это один грид. Ячейке нужна ПЛОТНАЯ подложка: --ls-stats-cell-bg по умолчанию плоскость палитры. Если набор ставит ряд на приподнятую плоскость, он переопределяет одну эту переменную. --- */ .ls-stats[data-split="line"]{background:var(--ls-line,rgba(0,0,0,.14)); gap:var(--ls-stats-hair,1px)} .ls-stats[data-split="line"] .ls-stats__item{background:var(--ls-stats-cell-bg,var(--ls-paper,#fff))} /* --- ЯЧЕЙКА. Пара «значение и что оно означает» - список определений: dt несёт подпись, первый dd значение, второй пояснение. Порядок в РАЗМЕТКЕ смысловой (подпись - значение - пояснение), порядок на ЭКРАНЕ обратный и делается сеткой. Диктор читает «Окно ответа - двадцать четыре часа», а не «двадцать четыре аш» в пустоту. Подробнее в 07-A11Y. Каждая ячейка - свой grid с тремя строками по имени, поэтому подписи, значения и пояснения выравниваются между ячейками, а не только внутри своей. --- */ .ls-stats__item{display:grid;grid-template-rows:auto auto 1fr; padding-block:var(--ls-stats-cell-pb,0);padding-inline:var(--ls-stats-cell-pi,0); gap:var(--ls-stats-cell-gap,10px)} .ls-stats__v{grid-row:1;margin:0; font-size:var(--ls-stats-val,61.04px);line-height:var(--ls-stats-val-lh,1.15); font-weight:var(--ls-stats-val-w,600);letter-spacing:var(--ls-stats-val-ls,-0.01em); font-family:var(--ls-stats-val-face,var(--ls-head-face,inherit)); /* value - СТРОКА, а не число: «+100K», «24h», «47%» смешивают цифры, буквы и знаки. Изоляция по направлению обязательна: в RTL-абзаце «+100K» иначе читается как «100K+». Табличных цифр НЕТ по умолчанию - в «100%» и «24h» они ставят цифры вразнобой рядом с буквами. Разряды не выравниваются: у «24h» и «100%» нет общего разряда. */ /* НАПРАВЛЕНИЕ ИЗОЛИРУЕТ ВНУТРЕННИЙ ПРОГОН, А НЕ ЭТОТ БЛОК. Строки вроде «+100K» смешивают цифры, буквы и знаки, и в RTL-абзаце порядок знаков в них переворачивается - «+100K» читается как «100K+». Поэтому направление задавать надо. Но задавать его АТРИБУТОМ НА ЭТОМ БЛОКЕ нельзя: dir меняет направление блока, а text-align:start вычисляется от блока, и в ивритской секции значение прижималось к ЛЕВОМУ краю ячейки, тогда как подпись и пояснение - к правому. Замер в B1: ячейка 44-691,2, глифы значения 44-313,2, глифы подписи 606,4-691,2 - между ними 293 точки пустоты в одной ячейке. text-align:match-parent это лечит по букве спецификации, но объявление поддержано не всюду: замер в нашем движке дал вычисленное значение start, то есть правило было отброшено и дефект остался. Ставить лечение, которое молча не работает, нельзя. Поэтому dir стоит на ВНУТРЕННЕМ прогоне:
… Блок остаётся в направлении секции и выравнивается вместе с подписью, а порядок знаков внутри значения защищён - у элемента с атрибутом dir браузер сам ставит unicode-bidi:isolate. Изоляция самого значения от соседей остаётся на блоке. */ unicode-bidi:isolate; /* Ширина не резервируется: от одного знака до восьми. Перенос запрещён - «+100K/мес» с переносом превращается в две строки разного кегля рядом с соседями. */ white-space:nowrap} /* Восемь знаков не сжимаются и не переносятся - ступают вниз по шкале. Признак ставит PHP при длине больше пяти знаков, ровно тем же способом, каким первый экран ставит data-long на длинный заголовок: посчитать знаки в CSS нельзя, а clamp() их не видит. СТУПЕНЬ ПРИ data-long - СВОЯ У КАЖДОГО НАБОРА, и здесь стоит только ССЫЛКА на неё. Абсолютное число в оболочке было дефектом каскада: правило стоит на самом dd, а наборы задают кегль переменной на dl, то есть оболочка оказывается ВЫШЕ и перебивает осознанные решения. Замер до правки: у B1 любое значение от шести знаков молча падало с 61,04 до 48,83, то есть до кегля семьи A, и ось «чем набрано значение» рассыпалась ровно на том формате (+100K), который пакет называет главной проверкой. Теперь ссылка одна, а число приходит от набора через --ls-stats-val-long. Запасное 39,06 отвечает базе 48,83 - это база четырёх наборов из шести. */ .ls-stats__v[data-long]{--ls-stats-val:var(--ls-stats-val-long,39.06px); --ls-stats-val-lh:var(--ls-stats-val-long-lh,1.2)} @container ls (max-width:700px){.ls-stats__v{--ls-stats-val:48.83px;--ls-stats-val-lh:1.18} .ls-stats__v[data-long]{--ls-stats-val:39.06px;--ls-stats-val-lh:1.2}} .ls-stats__l{grid-row:2;margin:0;font-size:var(--ls-stats-lab,20px); line-height:1.4;font-weight:var(--ls-stats-lab-w,500);color:var(--ls-ink,#000); text-wrap:pretty} .ls-stats__n{grid-row:3;margin:0;font-size:var(--ls-stats-note,16px);line-height:1.5; color:var(--ls-muted,#666);text-wrap:pretty;max-inline-size:34ch} /* Пояснения нет: строка 1fr остаётся пустой, и ячейка НЕ становится ниже или выше соседей. Правило 06 выполняется самой сеткой, а не подгонкой высоты. */ /* --- СОСТОЯНИЯ КОЛИЧЕСТВА. Показателей от двух до шести, колонок четыре. Сетка сжимается до числа показателей, а не оставляет пустую ячейку: пустая ячейка в ряду читается как «тут что-то не загрузилось». Печатает PHP - он знает число показателей, и это ОДНА переменная, ради которой ничего нового заводить не надо. --- */ .ls-stats[data-n="2"]{--ls-stats-cols:repeat(2,1fr)} .ls-stats[data-n="3"]{--ls-stats-cols:repeat(3,1fr)} .ls-stats[data-n="5"],.ls-stats[data-n="6"]{--ls-stats-cols:repeat(3,1fr)} @container ls (max-width:1040px){.ls-stats[data-n="3"],.ls-stats[data-n="5"], .ls-stats[data-n="6"]{--ls-stats-cols:repeat(2,1fr)}} @container ls (max-width:700px){.ls-stats[data-n="2"],.ls-stats[data-n="3"], .ls-stats[data-n="5"],.ls-stats[data-n="6"]{--ls-stats-cols:1fr}} /* НЕПОЛНОЙ ПОСЛЕДНЕЙ СТРОКИ НЕ БЫВАЕТ. Признак data-n сжимает сетку и решает случай «три показателя в четырёх колонках», но НЕ решает «пять в трёх»: там дыра просто переезжает во вторую строку. У наборов с карточками и с пустотой это безобидная пустота, а у набора с линиями фон ряда - сам цвет волосяной линии, и непокрытая область печатается ЗАЛИТЫМ тонированным прямоугольником 464x194 - ровно тем «тут что-то не загрузилось», ради которого сжатие и заведено. Правило: последняя ячейка занимает остаток строки. Пять показателей - единственный случай, где остаток возникает (при трёх колонках 3+2, при двух 2+2+1), поэтому правило одно и стоит у одного признака, а не размазано по селекторам с номерами узлов. */ .ls-stats[data-n="5"] .ls-stats__item:last-child{grid-column:span 2} @container ls (max-width:700px){.ls-stats[data-n="5"] .ls-stats__item:last-child{grid-column:auto}} /* --- КАРТОЧКА. Общая часть механизма живёт ЗДЕСЬ, а не в файле семьи: карточки есть и у A2, и у B2, а растасканный по двум файлам механизм даёт два разных вида в зависимости от того, какой файл подключён. В семейных файлах остаётся только то, что у набора СВОЁ - акцентная карточка у A2, размеры и число колонок у B2. ПОДЛОЖКА И ПРИГЛУШЁННЫЕ ЧЕРНИЛА ИДУТ ПАРОЙ. Приподнятая плоскость темнее плоскости, и приглушённые чернила, подобранные к плоскости, на ней теряют контраст - замер на тёплой палитре давал 4,26. Подложка без пересчёта роли - дефект, поэтому оба объявления стоят в ОДНОМ правиле и разойтись не могут. ВОЛОСЯНАЯ КРОМКА нужна потому, что в части палитр приподнятая плоскость почти не отличается от плоскости: замер на «белой с холодным» - бумага #ffffff, band #f7f8fa, контраст 1,063, и карточка пропадает. Кромка - одно правило на все 24 палитры: где плоскости различимы, её почти не видно. Считать контраст плоскостей в PHP и включать кромку по порогу не будем: это правило, которое работает по-разному в разных палитрах, то есть ровно то, что потом невозможно объяснить. --- */ .ls-stats[data-split="card"] .ls-stats__item{background:var(--ls-band,#eee); border-radius:var(--ls-radius,var(--ls-stats-card-r,18px)); box-shadow:inset 0 0 0 var(--ls-stats-hair,1px) var(--ls-line,rgba(0,0,0,.14)); --ls-stats-cell-bg:var(--ls-band,#eee); --ls-muted:color-mix(in oklab,var(--ls-ink,#000) 78%,var(--ls-band,#eee))} /* --- ССЫЛКА. Показатель сегодня не кликается (правило 04): наведение и указатель появляются ТОЛЬКО когда ячейка стала кликабельной. ССЫЛКОЙ СТАНОВИТСЯ НЕ ЯЧЕЙКА, А ПОДПИСЬ ВНУТРИ НЕЁ. Обёртка ячейки обязана остаться div: детьми dl могут быть только dt, dd и div, а вставленный между dl и dt тег a рвёт связь «термин - определение» в отображении на ARIA - то есть разваливает единственный вопрос доступности этой секции ровно там, где показатель стал ссылкой. Поэтому a стоит ВНУТРИ dt, вокруг текста подписи, и растягивает свою цель на всю ячейку накладкой ::after. Две выгоды сразу: модель dl цела, и у ссылки есть ИМЯ - подпись показателя. Растянутая пустая ссылка поверх ячейки имени не имеет вовсе и диктором читается как «ссылка» без продолжения. Кольцо фокуса при этом носит ЯЧЕЙКА, а не текстовый узел (правило 05): сама ссылка своё кольцо снимает, а ячейка рисует его себе по :has(:focus-visible). Отступ внутренний: у набора с линиями ячейки стоят вплотную, и наружное кольцо легло бы на соседнюю. --- */ .ls-stats__item:has(.ls-stats__a){position:relative} .ls-stats__a{color:inherit;text-decoration:none} .ls-stats__a::after{content:"";position:absolute;inset:0;z-index:1;cursor:pointer} .ls-stats__item:has(.ls-stats__a){transition:background-color var(--ls-dur-fast,140ms) var(--ls-ease,ease)} .ls-stats__item:has(.ls-stats__a):hover{background:color-mix(in oklab,var(--ls-stats-cell-bg,var(--ls-paper,#fff)) 94%,var(--ls-ink,#000))} .ls-stats__item:has(.ls-stats__a:focus-visible){outline:var(--ls-focus-w,2px) solid currentColor; outline-offset:-3px} .ls-stats__a:focus-visible{outline:none} /* КОЛЬЦО ФОКУСА ПОЯВЛЯЕТСЯ МГНОВЕННО. Перехода у него нет и не будет: обход с клавиатуры идёт быстрее любой длительности, и проявляющееся кольцо отстаёт от каретки на шаг. */ /* ОТСТУПЛЕНИЕ: своя рамка фокуса НЕ КРАСИТ ПРАВИМЫЙ ТЕКСТ. В правке у текстового слота своя рамка - голубая рамка системного акцента кабинета, одна на весь проект. Здесь селектор потомка ловил и её: специфичность у обоих (0,2,0), побеждает порядок подключения, и человек видел рамку цветом текста. Замерено на живом холсте: rgb(251,248,242) 2px вместо rgb(47,111,208) 1px. У посетителя `.sc-se__edit` не печатается вовсе - его рамка фокуса не меняется. */ .ls-stats-sec :focus-visible:not(.sc-se__edit){outline:var(--ls-focus-w,2px) solid currentColor;outline-offset:3px} /* --- ЗНАЧОК. Гарнитура объявляется В СЛОЕ САЙТА: base.css кабинета сюда не подключается, а без правила лигатура печатается СЛОВОМ - буквально TRENDING_UP посреди страницы. У показателей значка сегодня нет и ни один из шести наборов его не требует, но правило стоит здесь, потому что редактор ставит служебную строку со значком. --- */ .sc-icon-KIT-STATS{font-family:"Material Symbols Rounded";font-weight:300;font-style:normal; line-height:1;letter-spacing:normal;white-space:nowrap;font-feature-settings:"liga"; font-variation-settings:"FILL" 0,"wght" 300} /* Строка, видимая ТОЛЬКО в редакторе. У посетителя её нет. Тон - сообщение, не предупреждение. */ .ls-only-edit{display:none} .ls-w[data-edit] .ls-only-edit,.ls-page[data-edit] .ls-only-edit{display:flex;align-items:center;gap:8px;background:color-mix(in oklab,#fff 88%,transparent);color:#3f4650; margin-block-start:20px;padding-block:8px;padding-inline:12px; border-inline-start:2px solid var(--ls-line,rgba(0,0,0,.14)); font-size:var(--ls-sm,14px);color:var(--ls-muted,#666);text-wrap:pretty} .ls-only-edit .sc-icon{flex:none;font-size:18px;opacity:.7} /* Приподнятая плоскость темнее плоскости, и приглушённые чернила, подобранные к плоскости, на ней теряют контраст - на тёплой палитре замер давал 4,26. Своя роль считается от band. */ .ls-panel-ink{--ls-muted:color-mix(in oklab,var(--ls-ink,#000) 78%,var(--ls-band,#eee))} /* Правило 02: секция не двигается сама. Ни счётчиков, набегающих при прокрутке, ни появления по одному - «0» при счёте от нуля не двигается вовсе и выглядит сломанным, а «24h» и «+100K» не считаются. Здесь остаются только переходы наведения, и они тоже подменяются. */ /* ПРИ reduce - НОЛЬ, А НЕ «ПОКОРОЧЕ». Правило 07: мгновенная подмена. В пакете первого экрана здесь стоит 1ms - число небольшое, но проверка «ненулевых переходов ноль» на нём не проходит, и это расхождение стоит свести к нулю и там. Задержки тоже в ноль: остановить надо не только ход, но и ожидание. */ @media (prefers-reduced-motion:reduce){.ls-stats-sec *{transition-duration:0s !important; transition-delay:0s !important;animation:none !important}} /* ===== stats-a.css ===== */ /* СЕМЬЯ A - шапка сверху, показатели рядом под ней. Три набора, по одному варианту. Подключается ПОСЛЕ stats.css. Ни одного --sc-*. ОСЬ СЕМЬИ - чем разделены колонки, и только она: A1 зазор-линия между колонками ритм несёт разрезанная плоскость A2 карточка вокруг каждой, одна акцентная ритм несёт плоскость и одно пятно цвета A3 одна горизонтальная линия над рядом ритм несёт пустота между колонками Шапка у всех трёх стоит над рядом; её раскладка - следствие набора, а не отдельная ось. ЧЕМ ВСЯ СЕМЬЯ НАМЕРЕННО РАСХОДИТСЯ С РАЗВЕДКОЙ (числа замера - в скобках): поля секции 96/24 (120/24) - у нас общая шкала полей с первым экраном, 120 в ней нет; содержимое 1440 (1393) - 1393 это их содержимое минус их же поля, у нас другая мера; заголовок секции 48,83 (61,04) - 61,04 у нас занят первым экраном на среднем пороге, и секция второго уровня не имеет права набираться в один кегль с первым экраном; разрядка значения -0,01em (-0,025em) - замер на нашей паре ниже, п. «разрядка»; подпись весом 500 (600) - при значении весом 600 подпись того же веса спорит с ним; кнопки 52/14/28/14 (56/15/30/16) - у нас одна шкала органов на весь сайт. */ /* --- ОБЩЕЕ ПО СЕМЬЕ --- */ .ls-stats-sec--a{--ls-stats-pad:96px;--ls-stats-max:var(--ls-max,1536px)} /* Значение: текстовая гарнитура, а не заголовочная - это ось части 2, и у семьи A она зафиксирована на текстовой во всех трёх наборах. РАЗРЯДКА. Замер чужого прототипа даёт -0,025em (-1,22 при 48,83). Мы берём -0,01em, и вот ЧЕСТНАЯ причина, с числами нашего замера (Work Sans 600, кегль 48,83): «100%» 121,88 на -0,025em против 124,80 на -0,01em - разница 2,92 (2,3%) «+100 тыс» 209,54 против 215,40 - разница 5,86 (2,7%) «24h» 85,41 против 87,61 - разница 2,20 (2,5%) То есть -0,025em НЕ слепляет знаки: на четырёх знаках он отнимает три пикселя, и зазор между нулём и процентом сужается примерно на 0,7. Это заметно рядом, но не столкновение. Причина выбора другая и она про наш продукт, а не про их: отрицательная разрядка на цифрах - решение ПОГАРНИТУРНОЕ, а гарнитур у нас десять пар. Проверить -0,025em на всех десяти мы не можем, а выигрыш - 2,3% ширины значения, которое и так стоит в колонке 347. Берём безопасное значение общей шкалы. Если пара окажется широкой и значение перестанет влезать, разрядка правится одной переменной --ls-stats-val-ls на набор, а не переписью. */ .ls-stats-sec--a .ls-stats{--ls-stats-val-face:var(--ls-text-face,system-ui); --ls-stats-val:48.83px;--ls-stats-val-lh:1.18;--ls-stats-val-w:600;--ls-stats-val-ls:-0.01em; --ls-stats-val-long:39.06px;--ls-stats-val-long-lh:1.2; --ls-stats-lab:20px;--ls-stats-lab-w:500;--ls-stats-note:16px} /* --- A1. РЯД, РАЗДЕЛЁННЫЙ ЛИНИЯМИ --------------------------------------------------- Шапка в два столбца: заголовок по началу строки, абзац и кнопки по концу. Столбцы minmax(0,1fr) с зазором 64, а НЕ разгон по краям: при коротком заголовке разгон уносит абзац к самой кромке и пустота между ними становится вдвое шире заявленной. ЛЕСЕНКИ НЕТ. В разведке подпись этого набора - ступенчатые верхние отступы колонок (96, 64, 32, 0). Мы её не берём, и вот почему по пунктам: 1. Четыре разных значения на четырёх узлах не выражаются одной переменной (п. 4.2 рамки). Вывод из шага - calc(var(--ls-stats-step) * (n - 1)) - требует номера узла, а номера узла в CSS нет: :nth-child считает от начала списка, а не от начала СТРОКИ, и на двух колонках лесенка идёт 96, 64 / 32, 0 - то есть вторая строка начинается выше первой. Это не «почти работает», это перевёрнутый ряд. 2. При пяти и шести показателях ступеней не хватает: шага четыре, узлов шесть. Их прототип живёт с четырьмя, наш контракт разрешает шесть. 3. Ступенчатый ряд из четырёх цифр - визуальная подпись чужого продукта. Совпадение сетки-в-сетку здесь читалось бы сразу. ЧТО ВМЕСТО. Ритм несёт сама линия: ряд - это ОДНА плоскость, разрезанная волосками до кромки содержимого. Это тот же вопрос («чем разделить») с другим ответом, и он держится на 2, 3, 4, 5 и 6 показателях без единого исключения, потому что зазоры решётки не знают ни номера узла, ни номера строки, ни направления письма. --- */ .ls-st-a1 .ls-stats__head{display:grid;grid-template-columns:var(--ls-a1-head-cols,minmax(0,1fr) minmax(0,1fr)); gap:var(--ls-a1-head-gap,64px);max-inline-size:none;align-items:end} .ls-st-a1 .ls-stats__head-l{display:grid;gap:16px;align-content:start} .ls-st-a1 .ls-stats__head-r{display:grid;gap:24px;align-content:end} @container ls (max-width:1040px){.ls-st-a1 .ls-stats__head{--ls-a1-head-cols:minmax(0,1fr); --ls-a1-head-gap:32px}} .ls-st-a1 .ls-stats{--ls-stats-gapy:56px;--ls-stats-cell-pb:32px;--ls-stats-cell-pi:32px; --ls-stats-cell-gap:10px} /* Ячейки стоят вплотную, и внутреннее поле у них ЕСТЬ - иначе значение упирается в линию. Расстояние между текстами соседних колонок 32 + 1 + 32 = 65: это число называется в паре с A3 (там 40), см. комментарий у A3. На узком боковое поле снимается: одна колонка, линий по бокам нет, и поле только отодвигало бы текст от кромки бумаги. */ @container ls (max-width:700px){.ls-st-a1 .ls-stats{--ls-stats-cell-pi:0;--ls-stats-cell-pb:24px; --ls-stats-gapy:40px}} /* --- A2. РЯД КАРТОЧЕК С ОДНОЙ АКЦЕНТНОЙ ---------------------------------------------- Шапка одним столбцом по началу строки, кнопки под абзацем. КАКАЯ КАРТОЧКА АКЦЕНТНАЯ. Правило: ПЕРВАЯ. Не третья из четырёх, как в разведке, - там правила из разметки не читается вовсе, а «третья» перестаёт существовать при двух показателях. Первая существует всегда: при двух, трёх, четырёх, пяти и шести, на одной колонке и на четырёх, в LTR и в RTL (в RTL «первая» - справа, потому что это первая по ЧТЕНИЮ, а не слева). Акцент тогда читается как «отсюда начинать», а не как случайное пятно, и человеку не нужно объяснять, почему выделена именно эта. ВЫБОР ЧЕЛОВЕКОМ. Сегодня нет и не предлагается: это поле highlight у показателя, оно объявлено в 04-DATA-CONTRACT как предложение на будущее, а не как сегодняшнее поведение. Молча зашивать его в раскладку нельзя. РОЛИ. Обычная карточка - приподнятая плоскость (--ls-band) с чернилами палитры; акцентная - акцент (--ls-acc) с чернилами на акценте (--ls-acc-on). Приглушённые чернила на обеих считаются ОТ СВОЕЙ подложки, а не от плоскости секции: --ls-muted, подобранная к плоскости, на band давала 4,26, а на светлом акценте (медовая палитра, #d9a24b) - 2,9. КНОПКИ В ШАПКЕ ОБЕ КОНТУРНЫЕ. Акцент палитры уже израсходован на карточку; залитая кнопка рядом с акцентной карточкой даёт два акцента в одной секции, и они спорят. Это наша причина, а не копия их «кнопки третьей роли». --- */ .ls-st-a2 .ls-stats__head{--ls-stats-headw:720px} .ls-st-a2 .ls-stats{--ls-stats-gapy:72px;--ls-stats-gap:20px; --ls-stats-cell-pb:32px;--ls-stats-cell-pi:28px;--ls-stats-cell-gap:10px} /* Общая часть карточки - подложка, скругление, кромка, пересчёт приглушённых чернил от band - живёт в stats.css у [data-split="card"]: карточки есть и у A2, и у B2. Здесь только то, что у A2 СВОЕ - акцентная первая карточка. Кромки у неё нет: форму держит цвет. */ .ls-st-a2 .ls-stats__item:first-child{background:var(--ls-acc,#333);color:var(--ls-acc-on,#fff); box-shadow:none;--ls-stats-cell-bg:var(--ls-acc,#333); --ls-muted:color-mix(in oklab,var(--ls-acc-on,#fff) 76%,var(--ls-acc,#333))} .ls-st-a2 .ls-stats__item:first-child .ls-stats__l{color:inherit} @container ls (max-width:700px){.ls-st-a2 .ls-stats{--ls-stats-gapy:48px;--ls-stats-gap:12px; --ls-stats-cell-pb:24px;--ls-stats-cell-pi:22px}} /* --- A3. РЯД ПОД ОДНОЙ ЛИНИЕЙ -------------------------------------------------------- Шапка узким столбцом 640 по началу строки, абзац под заголовком. Шапка уже, чем у A2, намеренно: ряд без разделителей держится собственной пустотой, и широкая шапка над ним спорила бы с ним по весу. ЗАЗОР 40 ПРОТИВ 65 У A1. Это не косметика: без разделителей колонки обязаны стоять ТЕСНЕЕ, иначе ряд распадается на четыре отдельных блока. Оба числа наши и оба меряются как расстояние между ТЕКСТАМИ соседних колонок: у A1 32 + линия + 32 = 65, у A3 - чистый зазор 40. У разведки та же разница выражена как 96 против 66; направление то же, числа другие, потому что наша шкала отступов кратна 4 и 8, а 18 в ней нет. ЕДИНСТВЕННАЯ ЛИНИЯ НА УЗКОМ. Она остаётся и остаётся осмысленной: это верхняя кромка ряда, то есть «здесь начинаются показатели». Между показателями в столбце линий не появляется - иначе набор превратился бы в A1 с одной колонкой. Строки держит зазор 32. НАСТРАИВАТЬ НЕЧЕГО. У этого набора ни одной опции Customize: разделителя нет, акцента нет, кнопки принадлежат шапке секции, а не раскладке. Вкладка исчезает целиком. Органов ради симметрии с A1 и A2 мы ему не выдумываем. --- */ .ls-st-a3 .ls-stats__head{--ls-stats-headw:640px} .ls-st-a3 .ls-stats{--ls-stats-gapy:72px;--ls-stats-gap:40px; border-block-start:var(--ls-stats-hair,1px) solid var(--ls-line,rgba(0,0,0,.14)); padding-block-start:40px} @container ls (max-width:1040px){.ls-st-a3 .ls-stats{--ls-stats-gap:40px 32px}} @container ls (max-width:700px){.ls-st-a3 .ls-stats{--ls-stats-gapy:48px;--ls-stats-gap:32px; padding-block-start:32px}} /* Снимок состояния фокуса для холста: у посетителя это :focus-visible, здесь класс, потому что фокус нельзя удержать на статичной картинке. */ .is-focus{outline:var(--ls-focus-w,2px) solid currentColor;outline-offset:-3px} /* ===== stats-b.css ===== */ /* СЕМЬЯ B - шапка сбоку, показатели в своей области. Три набора, по одному варианту. Подключается ПОСЛЕ stats.css. Ни одного --sc-*. ДВЕ ОСИ, а не одна. У семьи A ось была одна - чем разделены колонки. Здесь к ней добавляется вторая, и она настоящая: ЧЕМ НАБРАНО ЗНАЧЕНИЕ B1 61,04 заголовочной значение читается как подзаголовок B2 48,83 текстовой значение читается как цифра B3 76,29 заголовочной значение крупнее заголовка секции Ширины на четыре колонки здесь нет, поэтому значение можно набрать крупнее, а пояснение становится длиннее - это следствие деления секции, а не отдельное решение. ДВЕ ПЕРЕМЕННЫЕ НА ДВА ИЗМЕНЕНИЯ, и это не нарушение п. 4.2. У семьи A на узком менялось одно - число колонок ряда (--ls-stats-cols). Здесь меняются ДВЕ разные вещи: деление секции на области (--ls-b-cols) и число колонок внутри области (--ls-stats-cols). Каждая выражена одной переменной; сливать их в одну нельзя - это два независимых решения, и на среднем пороге они расходятся (области уже сложились в столбец, а ряд внутри области ещё в две колонки). ЧЕМ ВСЯ СЕМЬЯ НАМЕРЕННО РАСХОДИТСЯ С РАЗВЕДКОЙ: поля секции 96/24 у всех трёх (у них 96 только у B1, у B2 и B3 - 120). Наша шкала полей одна на весь сайт, и 120 в ней нет; совпадение по B1 - следствие шкалы, не копия; деление секции: B1 640/1fr, B2 460/1fr, B3 280/1fr - ни одна пропорция не равна их 50/50, 41/59 и 232/1160; значение B3 76,29, а не 95,37 - см. B3; подпись весом 500, а не 600, во всех трёх. */ .ls-stats-sec--b{--ls-stats-pad:96px;--ls-stats-max:var(--ls-max,1536px)} /* --- ОБЩЕЕ ДЕЛЕНИЕ СЕКЦИИ. Одна переменная --ls-b-cols. На среднем пороге области складываются в столбец: две области по 500 с зазором 64 дают текстовой колонке меру в 62 знака, а области показателей - колонку 250 на значение 61,04. Ни то, ни другое не живёт. */ .ls-b__row{display:grid;grid-template-columns:var(--ls-b-cols,minmax(0,640px) minmax(0,1fr)); gap:var(--ls-b-gap,64px);align-items:start} @container ls (max-width:1040px){.ls-b__row{--ls-b-cols:minmax(0,1fr);--ls-b-gap:48px}} /* Шапка сбоку - это шапка секции, а не её половина: мера остаётся мерой. */ .ls-stats-sec--b .ls-stats__head{max-inline-size:none;gap:20px} .ls-stats-sec--b .ls-stats__head,.ls-st-b3 .ls-st-b3__eb{position:sticky; inset-block-start:calc(var(--ls-bar-h,80px) + 24px);align-self:start} @container ls (max-width:1040px){.ls-stats-sec--b .ls-stats__head, .ls-st-b3 .ls-st-b3__eb{position:static;inset-block-start:auto}} /* Область показателей стоит на своей плоскости и не наследует отступ ряда от семьи A. */ .ls-stats-sec--b .ls-stats{margin-block-start:0} /* --- B1. ТЕКСТ СЛЕВА, СПИСОК ПОКАЗАТЕЛЕЙ СПРАВА ------------------------------------ Слева шапка, справа показатели столбцом. Значение 61,04 ЗАГОЛОВОЧНОЙ гарнитурой: в столбце значение стоит над подписью в одной колонке, и текстовая гарнитура на этой ступени читается как продолжение подписи, а не как её заголовок. РАЗГОНА ПО ВЕРТИКАЛИ В ЛЕВОЙ КОЛОНКЕ НЕТ, и это отказ от приёма разведки. Там левая колонка разогнана (заголовок вверху, кнопка внизу), и на четырёх показателях это выглядит собранно. На шести не выглядит: замер нашего прототипа - область показателей 1201,6 высотой против текстовой 333,14, то есть между заголовком и кнопкой оказалось бы 868 пустоты, и кнопка перестаёт принадлежать заголовку. Разгон работает ровно при одном числе показателей, а у нас их от двух до шести. Кнопка стоит сразу за текстом с отступом 32. РАЗДЕЛИТЕЛИ. В разведке область размечена клетками: линия снизу у каждого показателя плюс линии по бокам области плюс внутренние поля 64/48. Мы берём из этого одну линию - РЕЙКУ по началу области - и линии между показателями. Полосу в рамке не берём: рамка вокруг части секции читается как вставленный блок, а показатели - это сама секция. ПОСЛЕДНЕЙ ЛИНИИ НЕТ ПО ПОСТРОЕНИЮ. Линия у нас - это зазор решётки, а после последнего показателя зазора нет. Отдельного правила «снять линию у последнего» не существует: снимать нечего. Тот же механизм отвечает и на вопрос про RTL - у зазора нет стороны, а рейка задана логическим border-inline-start и в RTL сама переходит к правому краю области. --- */ .ls-st-b1 .ls-stats__head{display:grid;align-content:start} .ls-st-b1 .ls-stats__acts{margin-block-start:32px} .ls-st-b1 .ls-b__area{border-inline-start:var(--ls-stats-hair,1px) solid var(--ls-line,rgba(0,0,0,.14)); padding-inline-start:var(--ls-b1-rail,40px)} /* ВОСЕМЬ ЗНАКОВ ЗДЕСЬ НЕ РОНЯЮТ СТУПЕНЬ, и это решение, а не недосмотр. 61,04 заголовочной - это и есть набор: значение читается как подзаголовок. Ронять его на 48,83 значит превращать B1 в семью A на самом частом формате значения. Ронять и не надо: колонка области 688, а «+100 тыс» на 61,04 Instrument Serif занимает 214 - места втрое больше нужного. Ступень уступает только на узком пороге, где колонка 350 и уступают все наборы. */ .ls-st-b1 .ls-stats{--ls-stats-cols:1fr;--ls-stats-val-face:var(--ls-head-face,inherit); --ls-stats-val:61.04px;--ls-stats-val-lh:1.15;--ls-stats-val-w:600;--ls-stats-val-ls:-0.01em; --ls-stats-val-long:61.04px;--ls-stats-val-long-lh:1.15; --ls-stats-lab:20px;--ls-stats-lab-w:500;--ls-stats-note:16px; --ls-stats-cell-pb:28px;--ls-stats-cell-gap:8px} /* В столбце значение и подпись меняются местами по СМЫСЛУ чтения: сначала подпись мелким, потом значение крупным - иначе список из шести крупных чисел читается как оглавление без темы. Порядок в разметке при этом не меняется (dt первым), меняются только строки сетки. */ .ls-st-b1 .ls-stats__item{grid-template-rows:auto auto 1fr} .ls-st-b1 .ls-stats__l{grid-row:1;color:var(--ls-muted,#666);font-size:var(--ls-eb,12.8px); font-weight:500;letter-spacing:.025em} .ls-st-b1 .ls-stats__v{grid-row:2} .ls-st-b1 .ls-stats__n{grid-row:3;max-inline-size:40ch;margin-block-start:4px} @container ls (max-width:700px){.ls-st-b1 .ls-b__area{--ls-b1-rail:20px} .ls-st-b1 .ls-stats{--ls-stats-cell-pb:20px}} /* --- B2. ТЕКСТ СЛЕВА, КАРТОЧКИ СПРАВА ----------------------------------------------- Деление 460/1fr с зазором 56: слева уже, справа шире. Не 41/59 из замера - у нас 34/66, потому что карточка с подписью на ступени 25 требует ширины, а шапка секции её не требует. Значение 48,83 ТЕКСТОВОЙ гарнитурой: в карточке значение и подпись стоят близко, и заголовочная гарнитура на 48,83 рядом с подписью 25 даёт две заголовочные строки подряд. СЕТКА НЕ 2x2, А «ДВЕ КОЛОНКИ, СТРОК СКОЛЬКО НУЖНО». 2x2 рассчитана ровно на четыре показателя, а контракт разрешает от двух до шести. Что происходит: 2 - одна строка; 4 - две; 6 - три. Ничего не сжимается и не прокручивается. 3 и 5 - остаток строки, и последняя карточка занимает его целиком (то же правило, что в семье A при пяти). Пустой ячейки в сетке не остаётся: она читается как «тут что-то не загрузилось», хотя человек ничего не сломал. Раскладка предлагается при любом числе от двух до шести - отказывать ей не за что. --- */ .ls-st-b2 .ls-b__row{--ls-b-cols:minmax(0,460px) minmax(0,1fr);--ls-b-gap:56px} @container ls (max-width:1040px){.ls-st-b2 .ls-b__row{--ls-b-cols:minmax(0,1fr)}} .ls-st-b2 .ls-stats{--ls-stats-cols:repeat(2,1fr);--ls-stats-gap:20px; --ls-stats-val-face:var(--ls-text-face,system-ui); --ls-stats-val:48.83px;--ls-stats-val-lh:1.18;--ls-stats-val-w:600;--ls-stats-val-ls:-0.01em; --ls-stats-val-long:39.06px;--ls-stats-val-long-lh:1.2; --ls-stats-lab:25px;--ls-stats-lab-w:500;--ls-stats-note:16px; --ls-stats-cell-pb:36px;--ls-stats-cell-pi:32px;--ls-stats-cell-gap:12px} .ls-st-b2 .ls-stats[data-n="3"] .ls-stats__item:last-child, .ls-st-b2 .ls-stats[data-n="5"] .ls-stats__item:last-child{grid-column:span 2} @container ls (max-width:700px){.ls-st-b2 .ls-stats{--ls-stats-cols:1fr;--ls-stats-gap:12px; --ls-stats-cell-pb:28px;--ls-stats-cell-pi:24px} .ls-st-b2 .ls-stats[data-n="3"] .ls-stats__item:last-child, .ls-st-b2 .ls-stats[data-n="5"] .ls-stats__item:last-child{grid-column:auto}} /* --- B3. КРУПНЫЕ ЗНАЧЕНИЯ В ДВЕ КОЛОНКИ --------------------------------------------- Слева узкая колонка, справа заголовок, абзац и показатели в две колонки. ЧТО СТОИТ В УЗКОЙ КОЛОНКЕ. В разведке там «00» - номер секции. Номеров секций у нас нет вовсе, и заводить их ради одной раскладки нельзя: это поле, которое кто-то должен заполнять, переводить и держать в порядке при переносе секций. Ставим туда НАДПИСЬ (eyebrow) целиком, а колонку расширяем до 280: на 232 при кегле 12,8 влезает 27 знаков с учётом волосяной черты, а надпись по контракту до 30. Черту при этом снимаем - край колонки делает ту же работу, а две горизонтали рядом спорят. Надписи нет - колонка остаётся пустой и держит деление: убрать её значит сдвинуть заголовок, а раскладка тогда перестаёт быть собой. ЗНАЧЕНИЕ КРУПНЕЕ ЗАГОЛОВКА - ПОДТВЕРЖДАЮ МЫСЛЬ, ОТКАЗЫВАЮСЬ ОТ ЧИСЛА. «Цифры, у которых есть заголовок» - главная мысль набора, и она верна. СНАЧАЛА ЧЕСТНЫЙ ЗАМЕР, потому что первое моё объяснение было неверным. Я написал, что 95,37 не влезает в колонку. Влезает: колонка показателя 500, «+100 тыс» на 95,37 занимает 334,35 в Instrument Serif и 375,16 в Bricolage Grotesque 700. Ни переноса, ни обрезки. Так что геометрия 95,37 не запрещает. ЗАПРЕЩАЕТ ОТНОШЕНИЕ. У них заголовок секции 76,29, а значение 95,37 - это ОДНА ступень разницы, отношение 1,25. У нас заголовок секции 48,83 (61,04 занят первым экраном на среднем пороге, и секция второго уровня не имеет права набираться в один кегль с первым экраном). Поставить значение на 95,37 значит развести их на ТРИ ступени, отношение 1,95 - и заголовок перестаёт быть заголовком, а секция перестаёт читаться как «цифры, у которых есть заголовок»: заголовка там просто не остаётся. Берём 76,29 вес 600 - две ступени, отношение 1,56. Мысль сохранена, число наше, и оно выведено из НАШЕЙ шкалы, а не подогнано к их. Верхняя ступень 95,37 остаётся первому экрану: одна шкала на весь сайт, и её вершина принадлежит тому, что стоит первым. КНОПОК НЕТ, и это решение набора. Если кнопки у клиента заполнены, раскладка НЕ предлагается вовсе - как A2 в пакете первого экрана. Прятать молча нельзя: человек ввёл подпись и ссылку и вправе видеть их на странице. Показывать ниже тоже нельзя: набор построен на том, что после последнего значения секция кончается. --- */ .ls-st-b3 .ls-b__row{--ls-b-cols:minmax(0,280px) minmax(0,1fr);--ls-b-gap:64px} .ls-st-b3 .ls-b__row[data-eb="off"]{--ls-b-cols:minmax(0,1fr);--ls-b-gap:0} @container ls (max-width:1040px){.ls-st-b3 .ls-b__row{--ls-b-cols:minmax(0,1fr);--ls-b-gap:32px}} .ls-st-b3 .ls-st-b3__eb{margin:0;font-size:var(--ls-eb,12.8px);line-height:1.4;font-weight:500; letter-spacing:.025em;color:var(--ls-muted,#666)} .ls-st-b3 .ls-st-b3__main{display:grid;gap:24px} .ls-st-b3 .ls-stats{--ls-stats-cols:repeat(2,1fr);--ls-stats-gap:48px; --ls-stats-val-face:var(--ls-head-face,inherit); --ls-stats-val:76.29px;--ls-stats-val-lh:1.14;--ls-stats-val-w:600;--ls-stats-val-ls:-0.01em; --ls-stats-val-long:61.04px;--ls-stats-val-long-lh:1.15; --ls-stats-lab:20px;--ls-stats-lab-w:500;--ls-stats-note:16px; --ls-stats-cell-gap:12px; margin-block-start:48px;padding-block-start:40px; border-block-start:var(--ls-stats-hair,1px) solid var(--ls-line,rgba(0,0,0,.14))} .ls-st-b3 .ls-stats__n{max-inline-size:40ch} /* Восемь знаков роняют ступень: 76,29 → 61,04, через --ls-stats-val-long выше. Причина не в ширине (замер: «+100 тыс» на 76,29 занимает 267,46 из 500), а в том, что на восьми знаках значение перестаёт схватываться одним взглядом - а весь набор построен на том, что цифра читается раньше подписи. Своего правила на dd у набора больше нет: ступень приходит переменной, как у остальных пяти. */ @container ls (max-width:1040px){.ls-st-b3 .ls-stats{--ls-stats-gap:40px}} @container ls (max-width:700px){.ls-st-b3 .ls-stats{--ls-stats-cols:1fr;--ls-stats-gap:32px; margin-block-start:32px;padding-block-start:32px}} /* Общая часть карточки (подложка var(--ls-band), скругление, волосяная кромка и пересчёт приглушённых чернил от band) лежит в stats.css у [data-split="card"] - один механизм на A2 и B2. Здесь у B2 только своё: число колонок, размеры, кегли и остаток строки. */