/* ВИДЫ ПОЛОСЫ - НАШ ФАЙЛ, А НЕ ЗЕРКАЛО, И ЭТО ЗАМЕР, А НЕ ПРИДУМКА. * * Числа сняты включением каждого семейства в живом образце и записаны в * `docs/konkurent/shapka-nabory-zamer.md`. Первая редакция этого файла была собрана ПО ПАМЯТИ, * и владелец сразу увидел цену: «4 из 5 стилей полностью одинаковые». * * ГЛАВНОЕ, ЧТО ПОКАЗАЛ ЗАМЕР: у образца ЦВЕТ И СЕМЕЙСТВО - РАЗНЫЕ ОСИ. Плоскость задаётся * отдельным рядом кружков палитры; у трёх разных семейств она пришла одна и та же. Семейство * решает УСТРОЙСТВО: рост полосы, форму плоскости, форму пункта, форму кнопки. * * Прежняя редакция брала осью цвет - две тёмные полосы и две светлые. Убери цвет, и остаётся * одна и та же полоса. Отсюда правило файла: вид обязан быть различим на плитке БЕЗ * увеличения даже при одинаковой палитре. * * ПЯТЬ ВИДОВ И ИХ ИСТОЧНИКИ: * plain - наш базовый: бумага, волосяная линия, рост 68; у образца прямой пары нет; * band - `header-basic`: рост 117, плотная плоскость во всю ширину, знак 69; * glass - `header-flush-transparent`: рост 86, бумага в половину силы, знак 48; * plate - `header-detached-transparent`: рост 62, плашка радиусом 16, поля 24, отступ 16; * chips - `header-pill-nav`: рост 72, плоскости нет, пункты пилюлями, кнопка контурная. * * РОСТ НЕ ЗАДАЁТСЯ ЧИСЛОМ - его считает формула кита `pad * 2 + max(hit, logo)`. Замеренные * у образца 117 / 86 / 62 / 72 ложатся в неё без единой поправки, и это проверено * арифметикой, а не подгонкой. Слагаемые ОБЯЗАНЫ жить на `.ls-site`: формула объявлена там, * и объявление слагаемого ниже по дереву даёт сумму, вычисленную без него. * * ЦВЕТА ЗДЕСЬ НЕТ НИ ОДНОГО. Плоскость считает PHP (`sc_site_bar_colors()`) с проверкой * контраста и печатает сырьём (`--ls-bar-fill`); всё, чем красится вёрстка ниже, - роли * палитры и `currentColor`. */ /* --- плоскость: сырьё от PHP, ветки от таблицы -------------------------------- */ /* * МАРШРУТИЗАЦИЯ СТОИТ НА `.ls-bar`, ПОТОМУ ЧТО СЫРЬЁ ЛЕЖИТ ТАМ ЖЕ. * * Инлайновый стиль печатается на самой полосе, значит `--ls-bar-fill` объявлен НА НЕЙ. * Переменная наследуется вниз, а не вверх: правило на родителе видит её пустой и молча * уходит в запасное значение. Замерено - лента вышла бумажной при верном сырье на полосе * (`--ls-bar-fill: #1E1912`) и бумажной плоскости на родителе. * * Отсюда и форма веток ниже: они пишутся ПОТОМКОМ (`.ls-site[...] .ls-bar`), иначе * объявление полосы перекрывало бы их всегда - переменная берётся с ближайшего узла, где * она объявлена, и вес родительского правила тут не решает ничего. */ .ls-bar { --ls-bar-plane: var(--ls-bar-fill, var(--ls-paper, #fff)); /* Чернило маршрутизируется ровно так же и ровно поэтому же: печатай его инлайном потребителем - и ни одна ветка состояния перебить его не сможет. Замерено: над первым экраном чернило оставалось тёмным при полностью написанной ветке. */ --ls-ink: var(--ls-bar-ink, #1a1a18); --ls-muted: var(--ls-bar-muted, #5d5a53); --ls-line: var(--ls-bar-line, #e2ded7); } /* * НАЛОЖЕНИЕ НА ПЕРВЫЙ ЭКРАН - НАСТРОЙКА, И ПРИЗНАК ПЕЧАТАЕТ СЕРВЕР (`data-over`). * * Пока не прокрутили, полоса прозрачна и линии под ней нет; отъехали от верха - возвращается * посчитанная плоскость вида, потому что оговорка `:not([data-scrolled])` перестаёт * совпадать. Уплотнение при этом НЕ называет цвет само (отступление в `adopt-header.php`): * названная бумага обелила бы тёмную ленту. */ .ls-site[data-over]:not([data-scrolled]) .ls-bar { --ls-bar-plane: transparent; --ls-bar-rule: 0px; /* Над первым экраном чернило СВЕТЛОЕ: наложение всегда идёт с тёмной вуалью (у образца замерено `oklab(0 0 0 / .4)`), то есть под полосой заведомо тёмная плоскость, какой бы ни была фотография. Считать контраст к неизвестному снимку невозможно; вуаль делает вопрос решаемым. */ --ls-ink: var(--ls-bar-ink-over, #fff); --ls-muted: var(--ls-bar-muted-over, rgba(255,255,255,.72)); --ls-line: var(--ls-bar-line-over, rgba(255,255,255,.24)); /* * И ВУАЛЬ ВКЛЮЧАЕТСЯ ЗДЕСЬ ЖЕ, ИНАЧЕ СВЕТЛОЕ ЧЕРНИЛО ВИСИТ НИ НА ЧЁМ. * * Кит объявляет `--ls-bar-veil: 0` и поднимал её только у семей B, которых в реестре * больше нет: узел вуали печатался, красился ничем, и замерено это как `rgba(0,0,0,0)` * при полностью исправной разметке. То есть довод «под полосой заведомо темно» был * НЕПРАВДОЙ, а светлый текст ложился на любую фотографию, включая светлую. * * Плотность 0.4 - замер образца (`oklab(0 0 0 / .4)` у `header-basic`). Высота вуали * считается от роста полосы, а не числом: рост у видов разошёлся вдвое. */ --ls-bar-veil: .4; --ls-bar-veil-h: calc(var(--ls-bar-h, 80px) * 2.2); } /* * И ПОЛОСА ПЕРЕСТАЁТ РЕЗЕРВИРОВАТЬ СВОЁ МЕСТО - ИНАЧЕ ОНА НЕ НАД ЭКРАНОМ, А ПЕРЕД НИМ. * * Кит держит оба поведения одной записью: `margin-block-end: (over - 1) * высота`. При * `over: 1` это ноль, при `0` - минус высота, и первый экран уезжает под полосу. Поднимали * `over: 0` те же семьи B, которых в реестре больше нет, - то есть наложение было сделано * наполовину: плоскость снималась, вуаль печаталась, а полоса всё равно стояла ПЕРЕД * снимком. На экране это выглядело как серая пустая лента над фотографией. * * Правило отдельным блоком, а не строкой выше: `--ls-bar-over` читает САМА полоса в своём * поле, и признак прокрутки его не касается - под прокруткой наложение остаётся. */ .ls-site[data-over] .ls-bar { --ls-bar-over: 0; } /* --- состояние прокрутки: сквозная полоса становится стеклом ------------------ */ /* * ЗАМЕР ОБРАЗЦА: прозрачная полоса, отъехав от верха, становится БУМАГОЙ В 76,5% С * РАЗМЫТИЕМ 12 и переворачивает чернило - над фотографией оно светлое, на стекле чёрное. * Владелец прислал оба состояния снимками и назвал это прямо: «меняется бэкграунд И цвет * текста». * * ПРИЗНАК `data-thin` ПЕЧАТАЕТ СЕРВЕР по плоскости из реестра, а не список имён видов здесь: * менять нечего у плотной ленты, и побелеть при прокрутке было бы дефектом. Перечисли виды * тут - и шестой сквозной вид молча останется без состояния прокрутки. * * Оба набора цветов считает PHP заранее: в момент прокрутки его уже нет, а контраст нужен. */ .ls-site[data-thin][data-scrolled] .ls-bar { --ls-bar-plane: var(--ls-bar-fill-on, var(--ls-paper, #fff)); --ls-ink: var(--ls-bar-ink-on, #1a1a18); --ls-muted: var(--ls-bar-muted-on, #5d5a53); --ls-line: var(--ls-bar-line-on, #e2ded7); backdrop-filter: blur(12px); } /* --- рост и слагаемые: по одному объявлению на вид ---------------------------- */ .ls-site--plain { --ls-bar-pad-rest: 12px; --ls-bar-pad-tight: 12px; --ls-bar-logo-max: 40px; --ls-bar-rule: 1px; } .ls-site--band { --ls-bar-pad-rest: 24px; --ls-bar-pad-tight: 12px; --ls-bar-logo-max: 69px; --ls-bar-rule: 0px; --ls-bar-name: 26px; } .ls-site--glass { --ls-bar-pad-rest: 19px; --ls-bar-pad-tight: 12px; --ls-bar-logo-max: 48px; --ls-bar-rule: 0px; } .ls-site--plate { --ls-bar-pad-rest: 9px; --ls-bar-pad-tight: 9px; --ls-bar-logo-max: 44px; --ls-bar-rule: 0px; } .ls-site--chips { --ls-bar-pad-rest: 12px; --ls-bar-pad-tight: 12px; --ls-bar-logo-max: 48px; --ls-bar-rule: 0px; } /* * ВЫСОКАЯ ПОЛОСА ПОДЖИМАЕТСЯ ПРИ ПРОКРУТКЕ - РЕШЕНИЕ ВЛАДЕЛЬЦА. * * У образца этого нет: замерено 117 в обоих состояниях. То есть число наше, а не снятое, и * объявлено вслух здесь и в реестре. Сжимается только отступ - знак и поле нажатия не * трогаются: рост считает формула кита `pad * 2 + max(hit, logo)`, и она пересчитается сама. * * Маршрут ДВУХСТУПЕНЧАТЫЙ намеренно: вид объявляет два своих числа, а какое из них сейчас в * силе, решает одно правило на весь проект. Списка имён «какие виды высокие» нет и быть не * должно - у низких видов оба числа совпадают, и правило для них ничего не меняет. */ .ls-site { --ls-bar-pad-block: var(--ls-bar-pad-rest, 18px); } .ls-site[data-scrolled] { --ls-bar-pad-block: var(--ls-bar-pad-tight, var(--ls-bar-pad-rest, 18px)); } /* * ПЕРЕХОД ВЕШАЕТСЯ НА ТОТ УЗЕЛ, ЧЕЙ ОТСТУП МЕНЯЕТСЯ, - на ряд, а не на полосу. У кита на * `.ls-bar` объявлен свой переход (плоскость, тень, цвет), и дописывать в него чужое * свойство значило бы перебить весь список: `transition` не складывается. * * Глушение движения - у кита один разрешённый медиазапрос, и он перечисляет узлы поимённо; * `.ls-bar__row` в том списке нет, поэтому оговорка своя. */ .ls-bar__row { transition: padding-block var(--ls-dur-med, 180ms) cubic-bezier(.22, 1, .36, 1); } @media (prefers-reduced-motion: reduce) { .ls-bar__row { transition-duration: 0s; } } /* --- форма плоскости --------------------------------------------------------- */ /* * ПЛАШКА - ЭТО РЯД, А НЕ САМА ПОЛОСА. Залить `.ls-bar` значило бы залить и закреплённую * коробку целиком: скругление ушло бы под край окна, а боковые поля превратились бы в поля * страницы. Красится ряд, а полоса остаётся прозрачной подложкой - и оба правила пишут * СВОЙСТВО `background`, потому что переменную запирает инлайн. * * Числа замерены у `header-detached-transparent`: поля 24, отступ сверху 16, скругление 16. */ .ls-site--plate .ls-bar { background: transparent; } .ls-site--plate .ls-bar__row { margin-inline: 24px; margin-block-start: 16px; border-radius: calc(16px * var(--ls-r-k,1)); background: var(--ls-bar-plane, var(--ls-paper, #fff)); /* Плавание даёт ТЕНЬ, а не густота плоскости: густота у тёмной палитры уходит в другую сторону, тень работает у обеих. Цвет тени - чернило в четверть силы, а не чёрный: чёрный на тёмной палитре не виден вовсе. */ box-shadow: 0 6px 24px color-mix(in oklab, var(--ls-ink, #1a1a18) 14%, transparent); } .ls-site--plate .ls-bar__in { padding-inline: 20px; } /* * ПОЛЯ ПЛАШКИ РАВНЫ ПО ВЕРТИКАЛИ И ГОРИЗОНТАЛИ - СНАРУЖИ И ВНУТРИ (владелец 05.10.2026, SCRUM-534). * Было: снаружи 16 сверху и 24 по бокам, внутри 9 сверху и 24 + 20 по бокам - знак и кнопка * стояли далеко от краёв плашки, и на телефоне это читалось как «громадные отступы». Теперь * внутреннее поле сбоку - то же число, что сверху (`--ls-bar-pad-block`), а внешнее одно на все * три стороны. */ .ls-site--plate { --ls-bar-plate-gap: 16px; } .ls-site--plate .ls-bar__row { margin-inline: var(--ls-bar-plate-gap, 16px); margin-block-start: var(--ls-bar-plate-gap, 16px); padding-inline: var(--ls-bar-pad-block, 9px); } .ls-site--plate .ls-bar__in { padding-inline: 0; } /* * ПЛАШКА ЛЕЖИТ ПОВЕРХ ПЕРВОГО ЭКРАНА (`data-float`, печатает `sc_site_v2_site_bits()`): полоса не * занимает места - первый экран уезжает под неё на всю её коробку, вместе с внешним полем * сверху. Своя плоскость у плашки остаётся, поэтому чернило не меняется. */ .ls-site[data-float] .ls-bar { /* Нулевой рост, а не отрицательное поле по формуле: формула роста считает знак по пределу `--ls-bar-logo-max`, а настоящая плашка выходила выше (замерено 70 при формуле 62), и первый экран начинался на 16 точек ниже верха. Липкость нулевой коробке не мешает: содержимое свисает вниз, этаж остаётся. */ block-size: 0; margin-block-end: 0; /* Своя область вёрстки: иначе верхнее поле плашки проваливается сквозь нулевую коробку и сдвигает первый экран вниз на те же 12-16 точек (замерено живьём). */ display: flow-root; } /* * У СТЕКЛА РАЗМЫТИЕ - ЧАСТЬ ВИДА, А НЕ УКРАШЕНИЕ. Полупрозрачная плоскость без него читается * как выцветшая заливка; с ним - как стекло поверх снимка. Сама полупрозрачность приходит из * сырья (`rgba(...,.5)`), которое считает PHP: у полупрозрачного цвета яркости нет, и * чернило по нему не посчитать - опорой остаётся плотная бумага. */ .ls-site--glass .ls-bar { backdrop-filter: blur(12px); } /* --- форма пункта ------------------------------------------------------------ */ /* * ПИЛЮЛЯ - ЭТО ПУНКТ, А НЕ ССЫЛКА ВНУТРИ НЕГО. Форма вешается на `.ls-link` и на кнопку * выпадающего: оба - органы одного ряда, и разная форма у соседей читается как поломка. * * Числа замерены у `header-pill-nav`: фон - чернило в 16%, скругление 16, поля по 15. Поле * нажатия при этом НЕ трогается: у образца пилюля 30 точек ростом, то есть ниже предела * доступности - это его дефект, и повторять его мы не будем. Рисунок его, цель наша. */ .ls-site--chips .ls-bar .ls-link, .ls-site--chips .ls-bar .ls-dd__btn { padding-inline: 15px; border-radius: calc(16px * var(--ls-r-k,1)); background: color-mix(in oklab, var(--ls-ink, #1a1a18) 16%, transparent); } .ls-site--chips .ls-bar .ls-link:hover, .ls-site--chips .ls-bar .ls-dd__btn:hover { background: color-mix(in oklab, var(--ls-ink, #1a1a18) 26%, transparent); } /* Разделителю рядом с пилюлями места нет: он читается как шестая пилюля без подписи. */ .ls-site--chips .ls-bar__div { display: none; } /* --- форма кнопки ------------------------------------------------------------ */ /* УГОЛ КНОПКИ ПОЛОСЫ СНЯТ 15.09.2026, И ЭТО ОБЪЯВЛЕННОЕ ОТСТУПЛЕНИЕ ОТ ЗАМЕРА ОБРАЗЦА. * * Замер остаётся верным: у образца скругление кнопки полосы одно на все пять семейств, и было * оно 16. Но у нас кнопка одна на весь сайт - решение владельца 08.09.2026 «все кнопки на сайте * должны быть в одном стиле», - а свод даёт 14. Пока это правило стояло, на одном экране жили * два угла: 16 в полосе и 14 в секциях, и владелец показал на это словами «кнопка в Hero * отличается от кнопки в Header». * * Своего значения здесь больше нет вовсе: форму даёт `.ls-btn.ls-btn` из `site-v2.css`. Впиши * мы сюда те же 14 - у одного значения стало бы двое хозяев, и разошлись бы они при первой * правке свода. */ /* * КОНТУРНАЯ КНОПКА - ПРИЗНАК `chips`, У ОСТАЛЬНЫХ ЧЕТЫРЁХ ПЛОТНАЯ. Замерено: у образца * контурная стоит ровно у одного семейства из пяти, и это единственное место, где кнопка * призыва не залита акцентом. * * Цвет берётся `currentColor`, а не ролью палитры: на прозрачной полосе чернило считает PHP * от опоры, и рамка обязана идти за ним, а не за палитрой страницы. */ .ls-site--chips .ls-bar .ls-btn { border: 1px solid currentColor; background: transparent; color: inherit; } /* --- прижатие меню: одна ось на все виды ------------------------------------- */ /* * ПРИЖАТИЕ ОПИСАНО ЗДЕСЬ ОДИН РАЗ, А НЕ У КАЖДОГО ВИДА. Кит писал его от класса набора * (`.ls-site--a1[data-align="end"]`), то есть повторял бы правило для каждого нового вида - * пять копий одного смысла, которые разъедутся при первой правке. */ .ls-site[data-align="end"] .ls-menu { margin-inline-start: auto; } .ls-site[data-align="center"] .ls-menu { margin-inline: auto; } /* Кнопки всегда у дальнего края: это действие, ради которого сайт и сделан. */ .ls-site .ls-bar__cta { margin-inline-start: auto; } /* * У ЦЕНТРИРОВАННОГО МЕНЮ КНОПКИ УЖЕ ПРИЖАТЫ ЕГО ВТОРЫМ `auto` - второй `auto` на кнопках * съел бы половину свободного места и сдвинул меню влево от центра. Отбирается оговоркой, а * не порядком строк: порядок переживёт одну перестановку и вернёт дефект молча. */ .ls-site[data-align="center"] .ls-bar__cta { margin-inline-start: 0; } /* * ТЕСНО - ПОЛОСА В УЗКОМ ВИДЕ НА ЛЮБОЙ ШИРИНЕ (замер владельца 02.10.2026, SCRUM-510). * * Признак `data-cramped` ставит `site-v2.js`, когда пункты меню не помещаются в ряд: порог 700 * считает ширину бумаги, а не длину меню, и семь немецких пунктов наползали на кнопку во всех * видах полосы. Правила повторяют узкую ветку зеркала шапки (`header.css`, `@container ls * (width <= 700px)`) и узкую ветку `site-v2.css` - бургер слева, полка, одна кнопка, - потому * что видом это ОНА ЖЕ, только включённая содержимым. Полка и подложка - соседи полосы, а не * её дети, отсюда `~`. */ .ls-bar[data-cramped] .ls-menu, .ls-bar[data-cramped] .ls-barSoc, .ls-bar[data-cramped] .ls-bar__tel, .ls-bar[data-cramped] .ls-lang--nav, .ls-bar[data-cramped] .ls-bar__cta > .ls-btn:not(:first-child) { display: none; } /* Бургер справа, знак слева - как в узкой ветке ниже (SCRUM-534); разделитель за знаком на узком виде отделять нечего. */ .ls-bar[data-cramped] .ls-burger { display: inline-grid; order: 10; } .ls-bar[data-cramped] .ls-bar__div { display: none; } /* Пустое место - одно и за знаком: прижатия вправо у переключателя языка и кнопки делили бы его надвое, и бургер повисал бы посередине ряда. */ .ls-bar[data-cramped] .ls-bar__in > * { margin-inline-start: 0; } .ls-bar[data-cramped] .ls-bar__in > :first-child { margin-inline-end: auto; } .ls-bar[data-cramped] ~ .ls-scrim { display: block; } .ls-bar[data-cramped] ~ .ls-sheet { display: grid; } /* * ПЕРЕКЛЮЧАТЕЛЬ «РЯДОМ С КНОПКАМИ» ПРИЖИМАЕТСЯ К НИМ (SCRUM-510): прижатие вправо стоит у * кнопок (`margin-inline-start:auto` выше), и переключатель перед ними оставался у меню, через * весь пустой ряд от кнопок. Прижатие переезжает на него, кнопки встают вплотную. */ .ls-site .ls-lang--buttons { margin-inline-start: auto; } .ls-site .ls-lang--buttons ~ .ls-bar__cta { margin-inline-start: 0; } .ls-site[data-align="center"] .ls-lang--buttons { margin-inline-start: 0; } /* * ОБЁРТКА СОДЕРЖИМОГО ПОЛКИ (замер 02.10.2026). Полка закрывается одной строкой сетки `0fr`, и * всё её содержимое обязано лежать в этой одной строке - иначе кнопка и ряд языков висели * пустой полосой под шапкой. Обёртка сама - сетка: её дети остаются элементами сетки, как были * детьми полки, и кнопка призыва сохраняет блочный вид и полную ширину. */ .ls-sheet__in { display: grid; align-content: start; min-block-size: 0; /* Поля полки - поля страницы: у кита их не было вовсе, и пункты лежали у самого края экрана. Поля сверху и снизу - ТОЛЬКО у открытой полки (замечание владельца 05.10.2026): поля не сжимаются строкой `0fr`, и закрытая полка держала под шапкой пустые 32px до первого экрана. */ padding-block: 0; padding-inline: var(--ls-page-gut, 20px); transition: padding-block 240ms cubic-bezier(.22, 1, .36, 1); } .ls-sheet[data-open] .ls-sheet__in { padding-block: 8px 24px; } /* Полка лежит НАД подложкой, как полоса: подложка (этаж 29) затемняла и саму полку - пункты меню читались серыми. Этаж тот же, что у полосы, выше оснастки холста он не поднимается. * * ПОЛКА ЛИПНЕТ ПОД ШАПКОЙ, КАК САМА ШАПКА (замечание владельца 05.10.2026). В потоке страницы она * раскрывалась НАВЕРХУ страницы: прокрутил чуть ниже, нажал бургер - темнеет экран, а меню за его * краем. Отступ сверху ставит скрипт при открытии - низ шапки на экране (`--ls-sheet-top`). Липкость, * а не `fixed`: на холсте редактора полка обязана жить внутри бумаги, а не всего окна. */ .ls-sheet { position: sticky; inset-block-start: var(--ls-sheet-top, 0px); z-index: 30; } .ls-sheet[data-open] { max-block-size: calc(100dvh - var(--ls-sheet-top, 0px)); overflow-y: auto; } @media (prefers-reduced-motion: reduce) { .ls-sheet__in { transition: none; } } html.atx-rm .ls-sheet__in { transition: none; } /* Кнопка призыва в полке - кнопкой, в цвет первой кнопки полосы, а не голой ссылкой. */ .ls-sheet__cta { display: flex; align-items: center; justify-content: center; margin-block-start: 16px; border-radius: calc(12px * var(--ls-r-k, 1)); background: var(--ls-acc, #1a1a18); color: var(--ls-acc-on, #fff); font-weight: 600; text-decoration: none; } /* * ЗАКРЕПЛЕНИЕ, ШИРИНА И ТЕЛЕФОН - SCRUM-534 (05.10.2026), замер редактора эталонного конструктора. * * 1. На холсте редактора полоса НЕ прилипает никогда (`.ls-page[data-edit]`): прилипшая закрывает * верх каждой секции и её панель. У эталона так же - в редакторе полоса `relative` при * включённом Sticky. В просмотре (`[data-prev]` у холста) и на сайте прилипает с первого * пикселя прокрутки, если тумблер включён; выключенный печатает `data-static`. * `relative`, а не `static`: этаж полосы (z-index) держится только у позиционированного узла. */ .ls-page[data-edit] .ls-bar, .ls-site[data-static] .ls-bar { position: relative; } [data-prev] .ls-page[data-edit] .ls-site:not([data-static]) .ls-bar { position: sticky; } /* * 2. Contained Width выключен (`data-wide`) - содержимое полосы во всю ширину окна. Объявленное * исключение из правила единого контейнера, решение владельца; поля страницы остаются. */ .ls-site[data-wide] .ls-bar__in { max-inline-size: none; } /* * 3. ТЕЛЕФОН: знак слева, бургер справа, полоса 56 (эталон: 57, поля 12/24, бургер 28 круглый). * * Здесь же лечится настоящая причина «громадных отступов»: слагаемые роста по видам * (`.ls-site--band { --ls-bar-pad-rest: 24px; --ls-bar-logo-max: 69px }` выше) стоят ВНЕ * контейнерного запроса и в файле ПОСЛЕ зеркала, то есть перебивали его узкую ветку - лента на * телефоне выходила 117 точек, «чистая» 68. Селектор с предком весит больше класса вида. * * Зона нажатия бургера остаётся 44 (доступность), вид бургера прежний. */ @container ls (width <= 700px) { .ls-page .ls-site { --ls-bar-pad-rest: 6px; --ls-bar-pad-tight: 6px; --ls-bar-logo-max: 32px; --ls-bar-name: 20px; } /* Бургер меняет только МЕСТО: вид (черты, без подложки) остаётся прежним - круг под ним был добавлен без просьбы и снят по слову владельца 05.10.2026. */ .ls-burger { order: 10; } .ls-site--plate { --ls-bar-plate-gap: 12px; } .ls-bar__div { display: none; } .ls-bar__in > * { margin-inline-start: 0; } .ls-bar__in > :first-child { margin-inline-end: auto; } }