/* Ключи Мастерства · LMS — дизайн-система Снята с действующего сайта. Холодный светлый фон, тёплые оранжевые акценты. Шрифты темы BuddyBoss: Open Sans (текст) + Roboto Condensed (заголовки). Кнопки НЕ таблетки — радиус 10px, как у полей и плашек. */ /* Атрибут hidden обязан побеждать display компонентов. Почти каждый класс здесь задаёт display: flex или block, и он перебивает правило браузера для [hidden] — спрятанный элемент остаётся на экране. Ловится это только глазами: разметка выглядит правильной. */ [hidden] { display: none !important; } :root { /* Цвет */ --km-accent: #E8703A; --km-accent-light: #EE8B5F; --km-peach: #FBE3D5; --km-warm-bg: #FDF2EB; --km-warm-border: #F3C9AE; --km-warm-text: #6B5347; --km-warm-text-strong: #8A4A28; --km-text: #3F4C5C; --km-text-secondary: #77869A; --km-text-muted: #9AA7B6; --km-text-faint: #B5BFCA; --km-star-bg: #FFF4D6; --km-star-border: #F6D58A; --km-page: #F6F8FB; --km-surface: #FFFFFF; --km-surface-alt: #FAFBFD; /* Стрелка выпадающего списка — одна на все места, где её рисуют: `.km-select` здесь и шов админки (`admin-rhythm.css`), который своим `background` её затирал (разбор этапа 6 звёзд, 13.10.2026). */ --km-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3 5.2l4 4 4-4' stroke='%239AA7B6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); /* Сиреневые фон и черта — карточка «Расписание трансляций» по макету `design/schedule-block-v1.html` (слово Алены 30.09.2026: цвет карточки — как в макете). Палитра трансляции (`--km-cast-*`) живёт только внутри `.km-cast`, а блок стоит и на страницах занятий, поэтому — здесь. */ --km-lilac-bg: #F8F5FA; --km-lilac-line: #EEE7F3; --km-border: #E7EBF0; --km-border-soft: #F1F4F8; --km-track: #EDF1F6; /* Служебное — то, что видит ведущий и не видит курсант. Холодный серо-синий: он не спорит с тёплыми акцентами занятия и сразу читается как «это не часть материала». Числа из макета `design/conditional-staff-note-v1.html`. */ --km-staff: #5B7089; --km-staff-bg: #EEF2F7; --km-staff-border: #D6DEE8; /* Рейтинг по звёздам («Звёзды курса» 1.28, 6.10; макет `design/reyting-vkladka-v1.dc.html`): кружки мест 1–3 — золото, серебро, бронза; «···» над своей строкой; буквы имени без фото — пять пар по кругу. */ --km-medal-gold: #F4B740; --km-medal-gold-ink: #6B3F06; --km-medal-silver: #D5DCE4; --km-medal-bronze: #E9B48C; --km-medal-bronze-ink: #5C3216; --km-rank-dots: #B7C1CD; --km-ava-1: #E7D3E8; --km-ava-1-ink: #5E4270; --km-ava-2: #DCE4EF; --km-ava-2-ink: #2F5A7A; --km-ava-3: #F3EAD9; --km-ava-3-ink: #7A5A2A; --km-ava-4: #E3EEDF; --km-ava-4-ink: #3F6A3A; --km-ava-5: #F4DFD2; --km-ava-5-ink: #8A4A28; /* Жёлтая плашка — «не сломалось, а не дописано». Заведена 27 августа 2026 под строку условного блока «блок не покажется никому». Отдельно от `--km-danger`: красный говорит «сломалось», и там, где человек просто не заполнил поле, он врёт про причину. Числа из макетов `conditional-block-v1.html` и `lesson-blocks-v2.html`. */ --km-warn-bg: #FEF8E7; --km-warn-border: #EFD9A0; --km-warn-text: #8A6A16; /* Фирменные цвета курса — тёмно-синий заголовка и бирюзовый. Сняты 6 сентября 2026 с продающей страницы курса вычисленными значениями (`getComputedStyle`), а не подобраны на глаз: promo.kluchimasterstva.ru/probuzhdenie-chakr-sentjabr-2026, заголовок там разбит на две части ровно так же. Токенами, а не по месту: цвет спрашивают заголовок, надзаголовок, подпись и имя ведущей, и второе написание разошлось бы молча. */ --km-brand-navy: #33315E; --km-brand-teal: #237C82; --km-danger: #B4432B; /* Красный «идёт эфир» — свой, а не danger: тревоги тут нет, есть «сейчас». */ --km-live: #D33A3A; --km-danger-bg: #FBE0DA; --km-danger-border: #F0BDB0; /* Типографика */ --km-font: 'Open Sans', system-ui, sans-serif; --km-font-display: 'Roboto Condensed', 'Open Sans', sans-serif; --km-mono: ui-monospace, SFMono-Regular, Menlo, monospace; /* Форма */ --km-ok: #2E7D5B; /* * ЗЕЛЁНЫЙ «СДЕЛАНО» — цвет системы. Решение Алены 13 сентября 2026. * * Им помечается пройденное: лента на обложке курса, плашка и полоса * в карточке прогресса, а дальше — пройденные занятия на карте * и карточка курса в «Моих курсах». * * **Имя новое, а число старое, и это нарочно.** Тот же зелёный уже * два этапа живёт в системе как `--km-ok` — состояние формы, «в порядке». * Напиши мы `#2E7D5B` второй раз, и одинаковое правило оказалось бы * записано дважды: сменят зелёный в одном месте, второе отстанет молча. * Поэтому здесь имя смысла, а значение берётся у того, кто его держит. * * Смыслов при этом два, и они не сливаются: `--km-ok` — «идёт как надо» * у формы, `--km-done` — «сделано» у человека. Разойдутся однажды — * правится одна строка, а не поиск по числу. */ --km-done: var(--km-ok); --km-done-bg: #E9F4F2; --km-done-border: #CBE5DE; /* * Светлее на наведение — пара к `--km-accent-light` и по той же причине: * заливка кнопки обязана отвечать на курсор, а высветлять её по месту * значило бы завести оттенок, которого в системе нет. * * Здесь число, а не ссылка: это самостоятельное значение, а не второе * написание `--km-done`. Ссылкой был бы тот же цвет под другим именем. */ --km-done-light: #3A9A70; /* Жёлтый «скоро понадобится» — между зелёным «ничего не надо» и красным «надо сейчас». До таблицы зачислений его в системе не было: цветов было два, а срочностей три. */ --km-warn: #C77700; /* * Отступ под подписью блока: подпись прижата к тому, что под ней, * а не стоит посередине между верхним и нижним. * * Числом, а не литералом в двух местах: так стоит подпись на карточке * и так же должна стоять подпись блока на странице — человек видит * эти два места рядом на одном экране, и разъехаться им негде. */ --km-gap-label: 10px; /* * Расстояние МЕЖДУ группами: между тем, что подписью друг другу * не является. Внутри группы — `--km-gap-label`. * * Число не новое: это то же шестнадцать, которым `km-stack` разносит * блоки по умолчанию. Оно и стояло литералом в трёх местах — здесь * получило имя, и литералов не осталось: `.km-stack` и отступ вкладок * читают отсюда. Одно число, одно написание. * * Заведено 3 сентября 2026 по карточке кабинета: там все пять * промежутков стояли на `--km-gap-label`, то есть групп не было вовсе, * и срок читался второй подписью к полосе прогресса — он стоял к ней * на 11 пикселей при 12 у самой подписи. */ --km-gap-group: 16px; /* * Расстояние между абзацами короткого текста: письма и окна на платформе. * * Число не новое: это двенадцать, которым `.km-letter-preview` разносил * абзацы письма литералом. Имя получило 22 сентября 2026, когда те же * абзацы понадобились окну (снимок Алены: всё шло одним комом через 10), * — и литерала у письма не осталось. Длинный текст занятия (`.km-prose`) * живёт на своих шестнадцати: там читают страницами, здесь — три строки. */ --km-gap-paragraph: 12px; --km-radius-card: 16px; --km-radius-control: 10px; --km-radius-badge: 6px; --km-shadow-card: 0 2px 12px rgba(63, 76, 92, 0.06); --km-shadow-lift: 0 6px 18px rgba(63, 76, 92, 0.14); /* Сколько сверху занимает чужая обвязка: липкая шапка темы, панель администратора, промо-полоса Elementor. Считает `assets/js/chrome.js` живым замером — числом это записать нельзя, потому что слагаемых три и каждое приходит и уходит само: панель видна администратору, промо-полоса закрывается крестиком, шапка есть всегда. Ноль по умолчанию — значение для стенда и для страницы без темы. Ошибка выбрана в заметную сторону: при нуле липкая колонка уезжает под шапку, и это видно; при завышенном числе над колонкой пустая полоса, и это читается как «так задумано». */ --km-chrome-top: 0px; /* Размер знака узла — ОДНО ЧИСЛО на дерево и на перечни. Дерево переопределяет его по уровням (топик мельче, колонка плеера мельче обоих), перечень берёт как есть. Написанное дважды, оно разъехалось бы на первой же правке лестницы — и разъехалось бы незаметно, на несколько пикселей. */ --km-glyph: 19px; } /* --------------------------------------------------------------------------- Чужая обвязка: единственное место, где дизайн-система правит не своё --------------------------------------------------------------------------- `.site` — контейнер темы BuddyBoss, и у него `overflow: hidden auto`. Горизонтальная половина там осмысленна: тема гасит боковую прокрутку от своих виджетов. Вертикальная — довесок сокращённой записи, и она **отменяет липкость всего, что лежит внутри**: `position: sticky` считает от ближайшего предка с прокруткой, а `.site` сам не прокручивается — прокручивается окно. Прилипать не к чему, и элемент просто стоит на месте. Так и вышло: колонка навигации плеера и боковая колонка страницы курса объявлены липкими с 0.72.0 и 0.73.0 — и ни одна не липла на боевом. Обе проверялись стендом, а `.site` там нет вовсе: стенд собран одним файлом без темы. Ровно тот класс, что записан в `CLAUDE.md` про экран и стенд — каждая часть по отдельности права, а видно это только на собранной странице. `clip` вместо `hidden` оставляет обрезку и **не заводит прокрутки**: для человека поведение то же, для липкости — разница между «работает» и «не работает». Проверено живым замером на боевом: колонка едет вдоль страницы, горизонтальной прокрутки не появилось. **Селектор подобран под чужой, а не взят с потолка.** Тема пишет так: body:not(.page-template-page-fullscreen, .elementor-page) .site { overflow-x: hidden } Это (0,2,1) — простой `.site` слабее и молча проиграл бы. **Наш селектор СИЛЬНЕЕ, (0,2,2), и не держится на порядке.** До 17 сентября 2026 он был той же силы, (0,2,1), и выигрывал ничью тем, что стоял позже: `design-system.css` печатался в подвале, после темы. С 1.263.0 (15 сентября) таблица печатается в голове — 45-й из 75, тема после неё, — ничья ушла теме, и колонка перестала липнуть на всех наших страницах. Заметила Алена на снимке 17 сентября: дерево обрывается посреди окна. Лишний `html` в начале — единственное, что отличает правило от прежнего, и снимать его нельзя: без него победа снова зависит от того, кто подключён позже. `:has()` держит охват на наших экранах: правило нужно там, где стоит липкая колонка, а не на всех страницах сайта. Двух корней хватает и они устойчивы — `.km-page` у всех наших экранов, `.km-player` у плеера, где `.km-page` нет по устройству. Найдено живым замером на боевом: до правки колонка при прокрутке не сдвигалась ни на пиксель, после — едет вдоль страницы, и горизонтальной прокрутки не появилось. */ html body .site:has(.km-page, .km-player) { overflow-x: clip; overflow-y: visible; } /* Основа */ body { margin: 0; background: var(--km-page); font-family: var(--km-font); font-size: 16px; line-height: 1.65; color: var(--km-text); -webkit-font-smoothing: antialiased; } * { box-sizing: border-box; } a { color: var(--km-accent); text-decoration: none; } a:hover { color: var(--km-accent-light); } /* Типографика: H1 36 / H2 32 / H3 26 / H4 24 / H5 20 — по кастомайзеру темы */ .km-h1, .km-h2, .km-h3, .km-h4, .km-h5 { font-family: var(--km-font-display); font-weight: 700; margin: 0; } .km-h1 { font-size: 36px; line-height: 1.2; } .km-h2 { font-size: 32px; line-height: 1.25; } .km-h3 { font-size: 26px; line-height: 1.3; } .km-h4 { font-size: 24px; line-height: 1.35; } .km-h5 { font-size: 20px; line-height: 1.4; } .km-text { font-size: 16px; line-height: 1.65; } .km-text-secondary { font-size: 14px; line-height: 1.6; color: var(--km-text-secondary); } .km-meta { font-size: 12px; line-height: 1.4; color: var(--km-text-muted); } /* Надзаголовок раздела — заглавными, заметная черта сайта */ .km-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--km-text-muted); } .km-section-title { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--km-text-muted); } /* Кнопки */ .km-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1; border: none; border-radius: var(--km-radius-control); padding: 13px 26px; cursor: pointer; transition: background 0.16s, border-color 0.16s, color 0.16s; } /* Состояния перечислены списком — те же, что трогает тема (см. разбор у `.km-btn--secondary` ниже). Наведение меняет оттенок строкой ниже. */ .km-btn--primary, .km-btn--primary:hover, .km-btn--primary:focus, .km-btn--primary:active { background: var(--km-accent); color: #fff; box-shadow: none; } .km-btn--primary:hover { background: var(--km-accent-light); }/* ЧУЖОЕ УМОЛЧАНИЕ КНОПКИ ГАСИТСЯ В ТЕХ ЖЕ СОСТОЯНИЯХ, В КАКИХ ОНО ОБЪЯВЛЕНО. * * Найдено стендом «Моих работ» 16 сентября 2026 — и найдено только потому, * что общую мерку `themeBleed` впервые позвали на **нашу кнопку**. До того * её звали на вкладку «Заметили ошибку» и крестик панели, а `.km-btn` * не спрашивал никто: дефект жил не потому, что его пропустили, а потому, * что вопрос не задавали. * * Тема BuddyBoss объявляет у `button` фон и тень в `:hover` и `:focus`. * Здесь фон стоял в базовом состоянии и в `:focus`, а `:hover` в список * не попал — и на наведении тема подкладывала белую плашку со своей тенью. * `:focus` при этом фон объявлял, но тень гасить было нечем. * * Тот же приём, что у `.km-tab` (правка 19 августа 2026) и у * `.km-btn--text` с `.km-btn--quiet`: состояния перечисляются списком — * ровно те, что перечислила тема. Вес у нас (0,2,0) против её (0,1,1), * так что выигрываем объявлением, а не утяжелением селектора. * * Цена на день находки: 47 употреблений в 24 файлах — каталог, страница * курса, занятие, кабинет и десять административных экранов. */ .km-btn--secondary, .km-btn--secondary:hover, .km-btn--secondary:focus, .km-btn--secondary:active { background: var(--km-surface); color: var(--km-text); border: 1px solid var(--km-border); box-shadow: none; } /* РАЗМЕР — ОТДЕЛЬНЫМ ПРАВИЛОМ, БЕЗ СОСТОЯНИЙ. *Дефект, найденный Аленой 23 сентября 2026: «кнопка меняет размер и обводку при наведении».* Поля стояли в списке состояний, и у списка вес (0,2,0) против (0,1,0) у `.km-btn--sm`: без курсора мелкая кнопка держала свои 9/18, под курсором её перебивали 12/25 — «Показать ещё» росла со 191×33 до 205×39 (замер на стенде). Вид решает цвет и рамку, размер решает размерный класс — и решает во всех состояниях. Правило стоит ВЫШЕ `--sm` и `--lg` с тем же весом: тогда размерный класс выигрывает порядком. */ .km-btn--secondary, /* Тёплая кнопка своего курса объявлена в разделе каталога, а размер её — здесь: правило обязано стоять выше `--sm` и `--lg`, иначе вид перебьёт размер уже без всякого наведения. */ .km-btn--warm { padding: 12px 25px; } /* Наведение меняет ТОЛЬКО рамку и подпись — фон объявлен выше во всех четырёх состояниях и перебивать его нечем и незачем. */ .km-btn--secondary:hover { border-color: var(--km-warm-border); color: var(--km-accent); } /* Кнопка «сделано» — зелёная заливка. Правка Алены 13 сентября 2026. * * Стоит она на карточке пройденного курса и говорит то же, что плашка над * ней: здесь всё закончено. Оранжевая звала бы к действию, а звать больше * некуда — человек приходит перечитать. * * Белым по плотному зелёному: на светлой заливке белый текст пропал бы, * а тёмный спорил бы с плашкой. */ .km-btn--done, .km-btn--done:hover, .km-btn--done:focus, .km-btn--done:active { background: var(--km-done); color: #fff; box-shadow: none; } .km-btn--done:hover { background: var(--km-done-light); } .km-btn--muted, .km-btn--muted:hover, .km-btn--muted:focus, .km-btn--muted:active { background: var(--km-peach); color: var(--km-warm-text-strong); box-shadow: none; } .km-btn--muted:hover { background: #F7D6C3; }.km-btn--text, .km-btn--text:focus{ background: transparent; color: var(--km-accent); } /* Размер — без состояний, см. разбор у `--secondary`. */ .km-btn--text { padding: 12px 14px; } .km-btn--text:hover { color: var(--km-accent-light); } /* Неяркое второстепенное действие: «Отметить пройденным» */ .km-btn--quiet, .km-btn--quiet:focus { background: transparent; color: var(--km-text-secondary); border: 1px solid var(--km-border); font-weight: 500; } /* Размер — без состояний, см. разбор у `--secondary`. */ .km-btn--quiet { font-size: 14px; padding: 12px 22px; } .km-btn--quiet:hover { color: var(--km-accent); border-color: var(--km-warm-border); } .km-btn--danger, .km-btn--danger:hover, .km-btn--danger:focus, .km-btn--danger:active { background: var(--km-surface); color: var(--km-danger); border: 1px solid var(--km-danger-border); font-weight: 500; box-shadow: none; } .km-btn--danger:hover { background: #FDF0EC; } /* КВАДРАТНАЯ КНОПКА — только знак, без подписи: стрелки в шапке занятия (12.2, решение Алены 23 сентября 2026). Размер задаёт она, вид — класс вида, как у любой другой кнопки; поля обнулены, иначе знак уехал бы из середины. Стоит выше `--sm` и `--lg` тем же весом: размер решает размерный класс, и последний из них выигрывает порядком. */ .km-btn--square { width: 34px; height: 34px; padding: 0; } .km-btn--sm { font-size: 13px; padding: 9px 18px; } .km-btn--lg { font-size: 16px; padding: 15px 32px; border-radius: 12px; } .km-btn--block { width: 100%; } .km-btn[disabled] { background: #F1F4F8; color: #B6C0CC; cursor: not-allowed; } /* Бейджи */ .km-badge { display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; border-radius: var(--km-radius-badge); padding: 5px 9px; white-space: nowrap; } .km-badge--accent { background: var(--km-accent); color: #fff; } .km-badge--peach { background: var(--km-peach); color: #A8592F; } .km-badge--neutral { background: #F1F4F8; color: var(--km-text-secondary); } .km-badge--outline { background: var(--km-surface); border: 1px solid var(--km-border); color: var(--km-text-muted); padding: 4px 8px; } .km-badge--danger { background: var(--km-danger-bg); color: var(--km-danger); } /* Плашка «сделано»: светлая заливка, зелёный текст, тонкая рамка. * * Кегль и строчные буквы — из макета `course-completed-v2.html`, и это * не отступление от общего вида бейджа, а его смысл: остальные бейджи * помечают ЧТО это (вид курса, скидка), а этот отвечает человеку про него * самого — «вы прошли». Заглавные десятым кеглем читаются как ярлык * на товаре, и рядом с «Ваш прогресс» это звучало бы чужим голосом. * * Галочка внутри — `svg` разметкой, а не символом шрифта: у значка нет * текста, и диктору читать его нечего. */ .km-badge--done { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; letter-spacing: 0; text-transform: none; padding: 5px 11px 5px 9px; border-radius: 8px; background: var(--km-done-bg); color: var(--km-done); border: 1px solid var(--km-done-border); } /* Крупный бейдж — шапка курса. Отдельный размер, а не «тот же, что в списке»: в макете он 11px с разрядкой 0.06em, потому что читается издали и стоит один-два, а не двадцать в строке таблицы. */ .km-badge--lg { font-size: 11px; letter-spacing: 0.06em; border-radius: 8px; padding: 6px 12px; } /* Поверх обложки бейджи полупрозрачны: сплошная заливка на светлой картинке выглядит наклейкой, а сквозь неё видно, что под ней фотография. ЗДЕСЬ СТОЯЛ ОДИН ЭТОТ КОММЕНТАРИЙ, А ПРАВИЛА ПОД НИМ НЕ БЫЛО. Обещание без кода: бейдж носил `km-badge--peach` — светлую заливку, — и на светлой обложке не читался вовсе. Найдено 3 сентября 2026 по слову человека. Подложка взята у бейджей шапки гостевой (`course-page-guest-v2.html`): белая с прозрачностью 0,9 и тёплый тёмный текст. Она перебивает `--peach` и любой другой вид: поверх картинки решает место, а не вид, и это единственное правило, у которого есть право так делать. */ /* ТЕКСТ ГЛАВНОЙ КНОПКИ ЗАДАЁТСЯ ЯВНО во всех состояниях. * * Шапка с наложением красит всё внутри белым, а тема добавляет своё * правило на нажатую ссылку — и на активной кнопке надпись пропадала: * белый по оранжевому превращался в оранжевый по оранжевому. Наследование * здесь не годится: цвет кнопки не зависит от того, на каком фоне * она стоит. */ .km-btn--primary, .km-btn--primary:link, .km-btn--primary:visited, .km-btn--primary:hover, .km-btn--primary:focus, .km-btn--primary:active { color: #fff; } /* Кнопка ПЕРЕД ценой — так в макете гостя. В липкой полосе порядок обратный, и это тоже макет: там цена читается первой, а кнопка стоит у самого края. Разметка одна, порядок решает место. */ .km-hero__body .km-actions { flex-direction: row-reverse; justify-content: flex-end; gap: 18px; } /* ЦЕНА С ПОДПИСЬЮ ПОД НЕЙ ОСТАЁТСЯ РЯДОМ С КНОПКОЙ. Макет: «в одну строку по общей средней линии». Подпись («или в три платежа», бесплатный срок) делала блок цены шире места рядом с кнопкой, и на 375 он уходил строкой ниже (стенд, 19 сентября 2026; у «даровых дней» — с 8 сентября). Блок цены сжимается, подпись переносится внутри него. */ .km-hero__body .km-actions > .km-price { flex: 1 1 0; min-width: 0; } /* ЦЕНА И СЧЁТ КУРСАНТОВ В ШАПКЕ — СВОИМИ ЦВЕТАМИ И РАЗМЕРАМИ. * * Общие правила писаны под светлый фон: цена тёмная, «от» и счёт серые, * подпись мелкая. Поверх обложки это нечитаемо — на снимке боевой цена * тонула в картинке, а счёт был почти невидим. * * Наследованием это не лечится: у цены свой цвет по дизайн-системе, * и он верен там, где она стоит на белом. Поэтому правила именно * для шапки с наложением, а не правка общих. */ /* Высокая шапка — только продающая страница: там она первое, что видит человек, и в неё вложены бейджи, подпись, цена с кнопкой и курсанты. У участника шапка это заголовок над рабочим экраном, и 460 отнимали у него пол-экрана ни за чем. */ .km-hero--tall .km-hero__body { min-height: 500px; } .km-hero--over .km-price { color: #fff; font-size: 17px; } .km-hero--over .km-price__from { color: rgba(255, 255, 255, 0.85); font-size: 15px; } /* Число платежей поверх обложки: белым, как сама цена, а не приглушённым серым. Затемнение обложки к низу почти сходит на нет (0,05 у края), и на светлой картинке `#9AA7B6` пропадал — измерено на боевом. Значения не новые: цвет от `.km-hero--over .km-price` строкой выше, кегль от `.km-price__from` — подпись и подпись. Непрозрачным, в отличие от «от»: «от» уточняет, а «× 3» меняет смысл суммы втрое. */ .km-hero--over .km-price__stages { color: #fff; font-size: 15px; } .km-hero--over .km-meta { color: rgba(255, 255, 255, 0.9); font-size: 14px; } .km-hero--over .km-hero__lead { color: rgba(255, 255, 255, 0.9); font-size: 16px; max-width: 560px; } /* Строка курсантов: кружки и подпись рядом, как в макете. */ .km-hero__learners { display: flex; align-items: center; gap: 12px; margin-top: 8px; } .km-hero--over .km-badge--peach { background: rgba(251, 227, 213, 0.95); color: var(--km-warm-text-strong); } .km-hero--over .km-badge--accent { background: rgba(232, 112, 58, 0.95); } /* Крошки: где человек находится. Разделитель — свой элемент, а не `::before` у соседа: он есть в макете подписью, и текст экрана должен читаться целиком, а не собираться из содержимого псевдоэлементов. */ .km-crumbs { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--km-text-muted); } /* Крошки не переносятся, а последняя обрезается многоточием. * * С переносом длинное название уезжало на вторую строку, а разделитель * оставался висеть в конце первой — «Мои курсы ·» и пустота. Ровно та же * висящая точка, что у надстрочника модуля на 375, и лечится тем же: * строка обязана остаться одной. * * Обрезать название здесь не потеря: оно стоит целиком строкой ниже, * в шапке, крупным. */ .km-crumbs > * { flex: none; } /* Ссылка в крошках цвета самих крошек, а не общего для ссылок оранжевого. Так во всех трёх макетах, где крошки нарисованы: «Мои курсы» серым, текущее место тёмным. Оранжевая ссылка в этой строке — единственное яркое пятно над обложкой, и глаз идёт к ней вместо названия курса. Наведение возвращает акцент: кликабельность остаётся, но по требованию. */ .km-crumbs a { color: inherit; } .km-crumbs a:hover { color: var(--km-accent); } /* Крошки библиотеки клиента — как в её макетах (`library-broadcast-*-v3`, `library-series-v1`): «Библиотека клиента» ссылкой акцентом, текущее место тёмным. Серия на странице трансляции — ссылка на страницу серии (решение 25 сентября 2026), а цветом — текущее место, как `` макета. */ .km-crumbs.km-crumbs--library a { color: var(--km-accent); } .km-crumbs.km-crumbs--library .km-crumbs__here { font-weight: 400; color: var(--km-text); } /* Крошки библиотеки переносятся, как в её макетах (`flex-wrap: wrap`): в три ступени название трансляции на 375 иначе обрезалось до буквы. */ .km-crumbs.km-crumbs--library { flex-wrap: wrap; row-gap: 2px; } .km-crumbs.km-crumbs--library .km-crumbs__here { flex: 0 1 auto; overflow: visible; white-space: normal; } .km-crumbs__here { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--km-text); } /* Бейдж поверх обложки — левый верхний угол, отступ 10px */ .km-cover { position: relative; overflow: hidden; border-radius: var(--km-radius-card); } .km-cover__badge { position: absolute; top: 10px; left: 10px; pointer-events: none; /* * ПОДЛОЖКА ЖИВЁТ ЗДЕСЬ, а не вторым определением рядом с комментарием * про полупрозрачность: у имени в CSS два определения не спорят, * а складываются, и через сессию их читают как один вид. Признак * записан в `CLAUDE.md` пятым случаем общего пространства имён. * * Перебивает `--peach` и любой другой вид намеренно: поверх картинки * решает место, а не вид. */ background: rgba(255, 255, 255, 0.9); color: var(--km-warm-text-strong); /* * МЕЖСТРОЧНЫЙ СВОЙ, а не страницы. Правка Алены 19 сентября 2026: * «разве в кабинете лейбл курса такой большой?». Кабинет стоит внутри * Elementor (межстрочный 1,65 — плашка 27 px), каталог — в странице темы * (27 px — плашка 37). Своего числа у плашки не было, и одна и та же * плашка была разной высоты на двух страницах; просвет под ней до * названия сжимался с 21 до 11. */ line-height: 1.65; } .km-cover__badge--right { left: auto; right: 10px; } /* Плашка «Курс пройден» на обложке карточки. Белым по плотному зелёному — * по тому же доводу, что у ленты на странице курса: обложки бывают любые, * и светлая по светлой не читается вовсе. */ .km-cover__badge--done { background: var(--km-done); color: #fff; text-transform: none; letter-spacing: 0; font-size: 11px; } /* Плашки */ .km-note { display: flex; align-items: flex-start; gap: 10px; border-radius: var(--km-radius-control); padding: 12px 14px; font-size: 14px; line-height: 1.55; } .km-note--warm { background: var(--km-warm-bg); border: 1px solid var(--km-warm-border); color: var(--km-warm-text); } .km-note--neutral { background: var(--km-page); border: 1px solid var(--km-border); color: var(--km-text-secondary); } .km-note--danger { background: #FDF0EC; border: 1px solid var(--km-danger-border); color: #8E3B27; } .km-note__icon { flex: none; margin-top: 1px; } /* Знак цветом акцента. Плашка красит текст в свой приглушённый цвет, и знак, наследуя его, теряется на тёплом фоне — видно только глазами. */ .km-note__icon--accent { color: var(--km-accent); } /* Текст плашки — **одним блоком**, а не россыпью детей. `.km-note` это флекс-строка (значок слева, текст справа), и всякий прямой ребёнок становится в ней отдельной колонкой. Плашка со ссылкой внутри фразы разъезжалась на три колонки: «…Они в разделе», «Мои работы», «.» — ссылка вставала у правого края, точка ещё правее. Разметка при этом правильная целиком, и ловится это только глазами. Отсюда правило: есть в плашке что-то, кроме голого текста, — текст заворачивается в `.km-note__text`. */ .km-note__text { flex: 1; } /* Плашка с действием справа: знак, текст, кнопка. Выравнивание по центру, а не по верху: кнопка выше строки текста, и при `flex-start` она свисала бы вниз. Кнопка не сжимается — иначе на узком экране надпись переносится по буквам. Строка переносится (`flex-wrap`), и это не запас на будущее: надпись на кнопке — название группы сообщества, а они длинные. «Практикум по Местам Вознесения 2026» даёт кнопку в 302 пикселя, и на 375 она вылезала за экран на сотню. Нашёл стенд, мерка «ничего не вылезает за ширину». */ .km-note--action { align-items: center; flex-wrap: wrap; } .km-note--action > .km-btn { flex: none; margin-left: auto; } @media (max-width: 640px) { /* На узком кнопка уходит на свою строку целиком: прижатая вправо, она читалась бы как продолжение текста. */ .km-note--action > .km-btn { width: 100%; margin-left: 0; text-align: center; } } /* Карточки */ .km-card { background: var(--km-surface); border: 1px solid var(--km-border); border-radius: var(--km-radius-card); box-shadow: var(--km-shadow-card); } .km-card--warm { border-color: var(--km-warm-border); } /* Приглушённая карточка: тёплая подложка, тёплая рамка, без тени. Секция «Что изменится» в макете `course-page-guest-v2.html`. Отдельно от `--warm`, у которого меняется только рамка: там карточка остаётся белой и выделяется среди белых, здесь — целая секция другого тона, и выделять внутри неё нечего. */ .km-card--quiet { background: var(--km-warm-bg); border-color: var(--km-warm-border); box-shadow: none; } .km-card--current { border-color: var(--km-warm-border); } .km-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: var(--km-gap-label); } .km-card__pad { padding: 24px; } .km-course-card { display: flex; flex-direction: column; overflow: hidden; } /* «ПРОДОЛЖИТЬ ОБУЧЕНИЕ» — блок вкладки «Обзор» (12.2). Строка: обложка, курс с прогрессом и занятием остановки, кнопка. Прогресс — полосой и словами в занятиях, процентов нет. Строке уже 380 px — кнопка уходит под текст во всю ширину: рядом с обложкой и названием она сжала бы текст в столбик. Решает ширина СПИСКА, а не экрана (задача Алены 30.09.2026): на планшете блок стоит в узкой колонке кабинета, и по ширине экрана кнопка оставалась рядом, зажимая «Пробуждение чакр» в две строки. 380 — замер 30.09: при нём на текст остаётся 170 px, и название курса и «Пройдено 2 из 18 занятий» встают в одну строку; уже — в две. */ .km-continue .km-card__body { gap: 8px; } /* Вид как у соседнего «Ближайшие трансляции» на «Обзоре»: заглавными, 17px, разрядка — слово Алены 15 сентября 2026. */ .km-continue__title { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.35; text-transform: uppercase; letter-spacing: 0.5px; color: var(--km-text); } .km-continue__list { container: km-continue / inline-size; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .km-continue__row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--km-border-soft); } .km-continue__row:first-child { border-top: none; } .km-continue__cover { flex: none; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: var(--km-warm-bg); } .km-continue .km-continue__cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .km-continue__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .km-continue__body > p { margin: 0; } .km-continue__name { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--km-text); text-decoration: none; overflow-wrap: anywhere; } .km-continue__name:hover { color: var(--km-accent); } .km-continue__lesson { font-size: 13px; line-height: 1.4; color: var(--km-text-secondary); overflow-wrap: anywhere; } .km-continue__row > .km-btn { flex: none; } @container km-continue (max-width: 379.98px) { .km-continue__row { flex-wrap: wrap; } .km-continue__row > .km-btn { flex: 1 0 100%; } } /* * ОБЛОЖКА ДЕРЖИТ ПРОПОРЦИЮ, А НЕ РАСТЁТ ПОД КАРТИНКУ. * * Найдено 3 сентября 2026 на боевых данных: у двух карточек из * одиннадцати обложка выходила 240 px вместо 202 при ОДИНАКОВОЙ ширине * карточек. Развалившимися выглядели колонки, а колонки были ровные — * разброс ширин ноль на всех проверенных ширинах окна. * * Причина: обложка — элемент внутри колонки (`.km-course-card` это flex), * и `min-height` у неё `auto`, то есть «не меньше содержимого». * Содержимое — картинка, и её собственная высота при ширине колонки * больше, чем даёт пропорция, когда картинка выше 16:9. Тогда `auto` * побеждает `aspect-ratio`, и обложка растёт. * * Задевало ровно тех, у кого картинка выше 16:9: «Техники трансформации» * 1521×1014 и «Самоценность» 1920×1280 — обе 3:2. Остальные девять * от 1,78 и шире, и у них 202. * * Проверено опытом на живых данных: с `min-height: 0` все одиннадцать * дают 202. */ .km-course-card__cover { position: relative; aspect-ratio: 16 / 9; min-height: 0; } /* Сила (0,2,1), а не (0,1,1): внутри Elementor `.elementor img { height: auto }` той же силы подключён позже и выигрывал ничью — картинка брала свою пропорцию вместо рамки (боевой, 19 сентября 2026; `ThemeSiteOverrideTest`). */ .km-course-card .km-course-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; } /* НАЗВАНИЕ НА ОБЛОЖКЕ КАРТОЧКИ — КАК В ШАПКЕ КУРСА. Правка Алены 6 сентября 2026, вторая редакция по образцу. Первая ставила название внизу, одной строкой и с затемнением во всю обложку. Образец другой: наверху под бейджем, двумя строками и двумя цветами, а текст лежит на светлой части картинки — ровно как в шапке. Кегль 22 — подобран под ширину карточки 359. При 26 «Практикум по Местам Вознесения» уходил в четыре строки, при 18 название переставало быть главным на карточке. Цвета — те же токены, что у шапки: второго написания не заводится. */ .km-cover__title { position: absolute; left: 14px; right: 14px; /* Под бейджем: он стоит на 10 сверху и высотой 27. Просвет 21 — правка 6 сентября 2026, название просили опустить. */ top: 58px; margin: 0; font-family: var(--km-font-display); font-size: 26px; font-weight: 700; line-height: 1.02; letter-spacing: -0.01em; text-transform: uppercase; z-index: 1; } /* Две строки: первое слово одной, остальные другой — как в шапке. */ .km-cover__title-lead, .km-cover__title-rest { display: block; } /* Длинные названия обрезаются, а не выталкивают карточку. */ .km-cover__title-lead { overflow-wrap: anywhere; } .km-cover__title-rest { /* Просвет между первой частью и второй — отступом, а не межстрочным: межстрочный раздвинул бы и строки ВНУТРИ второй части, а она бывает двухстрочной («по Местам Вознесения»). Правка Алены 6 сентября 2026. */ margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Тёмное название на светлой обложке — затемнения нет вовсе, как в шапке. */ .km-cover--ink .km-cover__title-lead { color: var(--km-brand-navy); } .km-cover--ink .km-cover__title-rest { color: var(--km-brand-teal); } /* Светлое — на тёмной обложке. Затемнение МЯГКИМ ПЯТНОМ под текстом, а не полосой поперёк всей обложки. Решение человека 6 сентября 2026. Полоса во всю ширину съедала картинку: в карточке обложка и так теряет бока — коробка 16:9 режет широкой по 122–550 пикселей, — и затемнять сверху донизу значило отнимать у неё второй раз. Пятно радиальное и смещено к левому верху, где стоят бейдж и название; к низу и вправо оно сходит на нет, и сюжет остаётся виден. */ .km-cover--lume .km-cover__title-lead, .km-cover--lume .km-cover__title-rest { color: #fff; } .km-cover--lume::after { content: ''; position: absolute; inset: 0; background: radial-gradient( 125% 78% at 6% 12%, rgba(28, 26, 46, 0.74) 0%, rgba(28, 26, 46, 0.46) 38%, rgba(28, 26, 46, 0.12) 66%, rgba(28, 26, 46, 0) 82% ); pointer-events: none; } /* Бейдж поверх затемнения и названия. */ .km-cover__badge { z-index: 2; } .km-course-card__title { font-family: var(--km-font-display); font-size: 20px; font-weight: 700; line-height: 1.3; } /* * КАРТОЧКА ПО СВОЕМУ СОДЕРЖИМОМУ — СЕТКА ЕЁ НЕ РАСТЯГИВАЕТ. * * Решение человека 3 сентября 2026, и оно ОТМЕНЯЕТ вчерашнее выравнивание * по ряду. Низы карточек в ряду не совпадут — это принято. * * СВОИМ ИМЕНЕМ, а не у `.km-grid-cards` целиком, и это не украшение. * Ту же сетку берут ещё двое: каталог и «Варианты участия» гостевой. * У вторых прижатие к низу — действующее решение 7.4 (`.km-plan .km-btn * { margin-top: auto }`), и оно держится ровно растяжкой: у одной карточки * три строки про содержимое, у другой пять. Сними растяжку у всех — и там * кнопки встанут лесенкой, то есть починка кабинета сломала бы гостевую. * * Второе определение `.km-grid-cards` завелось бы и без этого довода: * у имени стало бы два смысла, и они смешались бы молча — ровно случай * `.km-hint`, записанный в CLAUDE.md. * * Отсюда снято всё, что под растяжку заводилось: * `align-items: stretch` у сетки — умолчание, поэтому явный `start`; * `flex: 1 1 auto` у тела — растить его больше не нужно и нечем; * `margin-top: auto` у кнопки — свободного места в карточке нет, * `auto` вычислялся бы в ноль, и правило стало бы мёртвым. * * Разрыв перед кнопкой теперь один и тот же у всех: обычный ритм тела. * Ради этого и снимали — растянутая карточка отдавала весь излишек * в одно место, и разрыв гулял от карточки к карточке. */ .km-grid-cards--own { align-items: start; /* * НЕ БОЛЬШЕ ТРЁХ В РЯДУ. Правка Алены 19 сентября 2026: на `/kabinet-lms` * кабинет во всю страницу (1180 px), и «сколько влезет по 272» давало * четыре. Дорожка — не уже трети колонки за вычетом двух промежутков * `.km-grid-cards` (по 20) и не уже 272: в узкой колонке их меньше, * и считается это от КОЛОНКИ, а не от окна — кабинет стоит и во вкладке * рядом с меню, и во всю страницу. */ } /* Сила (0,2,0): общее `.km-grid-cards` той же силы стоит в файле ниже и выиграло бы ничью порядком — первая редакция так и осталась с четырьмя. */ .km-grid-cards.km-grid-cards--own { grid-template-columns: repeat(auto-fill, minmax(max(272px, calc((100% - 40px) / 3)), 1fr)); } /* * ЧИСЛО СТРОК ЗАКРЕПЛЕНО — и это про ДЛИНУ ТЕКСТА, а не про растяжку. * * ЗАКРЕПЛЕНИЕ ВЫСОТЫ СНЯТО 3 сентября 2026, обрезка осталась. Здесь * стояло `height: calc(...)` у обоих — под выравнивание по ряду, — и оно * пережило отмену растяжки, хотя заводилось ровно ради неё. * * ЧТО ОНО ДЕЛАЛО НА ЭКРАНЕ. Коробка на две строки при тексте в одну — * это пустая вторая строка, и в зазоре она не видна: зазор честно * отвечал 10 при провале в 40. Замер диапазонами по боевым данным, * одиннадцать карточек: * * пустота в названии 29 у ВОСЬМИ из одиннадцати (текст 23, коробка 52) * пустота в описании 28 у «Диагностики чакр маятником» (17 против 45) * буквы назв.→опис. 14 у трёх двухстрочных, 40 у восьми однострочных * буквы опис.→прогр. 14 у десяти, 37 у «Диагностики» * * ПОЧЕМУ МЕРИЛОСЬ НЕ ТО. Расстояние между соседними строками — не только * их зазор: у элемента с закреплённой высотой пустая строка лежит ВНУТРИ * коробки, и `getBoundingClientRect()` про неё молчит. Видно её только * диапазоном — `Range.selectNodeContents()`, — и это записанный в проекте * класс «текст меряется диапазоном, а не коробкой ячейки». * * ЧЕМ ЗА ЭТО ПЛАТИМ, названо вслух. Строки ниже названия по ряду теперь * разойдутся: у карточки с двухстрочным названием всё под ним стоит * на 29 пикселей ниже, чем у соседки с однострочным. Срок на одной линии * не встанет. Это принято — растяжка отменена категорически, низы в ряду * и так не совпадают, и держать пустоту ради совпадения одной строки * дороже, чем совпадение стоит. * * `line-clamp` остаётся и без высоты: он обрезает длинное. Половина, * которая «не поднимает короткое», больше не нужна — поднимать и есть * то, ради чего высота снята. */ .km-course-card__title, .km-course-card .km-card__body > .km-text-secondary { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } /* * ДВЕ ГРУППЫ ВНУТРИ КАРТОЧКИ, а не пять равных промежутков. * * Тело карточки разносит своих детей на `--km-gap-label` — на десять, * то есть «подпись и то, к чему она относится». Для соседей внутри группы * это верно, а между группами читается неправдой: строка «Доступ до…» * стояла к полосе прогресса ближе, чем сама полоса к своей подписи — * 11 пикселей между буквами против 12, — и человек читал срок второй * подписью к прогрессу. Найдено глазами на боевом 3 сентября 2026. * * Разница в буквах при равных зазорах коробок берётся из выносного * просвета: у текстовой строки он есть, у `` нет вовсе. * Поэтому равные десятки на экране равными не выглядят. * * Группы такие: * название + описание — про что курс; * строка прогресса + полоса — где человек в нём; * срок — до какого числа он открыт; * кнопка. * * ГРУППА — НАСТОЯЩИЙ УЗЕЛ, а не отступ на строке, и это не украшение. * * Первая редакция вешала `margin-top` прямо на строку прогресса и на строку * срока. Она провалила общую проверку стендов «у абзацев в колонках нет * своих полей» — и провалила по делу: та проверка заведена на браузерном * поле у `

`, которое молча складывается с `gap`, и отличить наше поле * от чужого она не может по устройству. Ослабить её значило бы завести * второе место, где решают, «какой отступ правильный». * * Узлом это выражается честнее: группа на экране есть, значит есть * и в разметке. Поле стоит на обёртке, а не на абзаце, и проверка * молчит не потому, что её обманули, а потому, что беды нет. * * Отступ ставится СВЕРХУ у каждой группы, а не снизу: последняя группа * не должна отодвигать кнопку — до неё ритм остаётся тесным. * * Считается разностью двух имён, а не числом: `gap` тела уже дал десять, * добрать надо остаток. Правка любого из двух не разъедется с этим местом. * * Группа из одной строки — не странность: «до когда» сегодня одна строка, * а завтра к ней встанет вторая, и правило не придётся переписывать. */ .km-course-card__group { display: flex; flex-direction: column; gap: var(--km-gap-label); margin-top: calc(var(--km-gap-group) - var(--km-gap-label)); } .km-course-card--archived .km-course-card__cover { filter: grayscale(1); } /* Цена на карточке каталога (7.3). Крупно и шрифтом заголовков: на карточке это второе, что читают после названия. «от» — приставка, и она тише самой суммы: главное здесь число, а «от» только объясняет, что бывает и дороже. */ .km-price { font-family: var(--km-font-display); font-size: 20px; font-weight: 700; line-height: 1.2; color: var(--km-text); } .km-price__from { font-family: var(--km-font); font-size: 14px; font-weight: 600; color: var(--km-text-muted); } /* Число платежей у цены: «от 6 200 ₽ × 3». Раздел 7.14, решение Алены 4 сентября 2026. Тем же кеглем и цветом, что «от»: обе подписи говорят про одно — что написанное число не вся сумма. Крупнее — начнёт спорить с самой ценой; мельче — перестанет читаться там, где нужна больше всего, то есть у рассрочки втрое дешевле полной оплаты. */ .km-price__stages { font-family: var(--km-font); font-size: 14px; font-weight: 600; color: var(--km-text-secondary); /* Отступ от суммы, а не пробел в строке: неразрывный пробел давал четыре пикселя, и «×» читался хвостом значка валюты. Ступень `--km-gap-label` — ровно про это отношение: подпись и то, к чему она относится. */ margin-left: var(--km-gap-label); white-space: nowrap; } /* Подпись ПОД ценой: «14 дней, потом 2 400 ₽». Макет `design/free-period-hero-v1.html`, 9 сентября 2026. Отдельно от `.km-price__stages`, и это не дубль: тот стоит В СТРОКЕ с суммой и говорит про саму сумму («× 3» — что число не вся оплата). Эта — ПОД суммой и говорит про то, что будет дальше. Слепи их в одно правило, и «14 дней, потом 2 400 ₽» встало бы хвостом к цене, растянув строку вдвое; на узком экране она и так делит место с кнопкой. Обычный вес и мелкий кегль: подпись не должна спорить с ценой — у бесплатного периода цена и так слово, а не число, и жирная подпись рядом читалась бы второй ценой. */ .km-price__note { display: block; margin-top: 3px; font-family: var(--km-font); font-size: 13px; font-weight: 400; line-height: 1.35; color: var(--km-text-muted); white-space: normal; } /* Поверх обложки — как у соседей по шапке: общие цвета писаны под белое, и подпись на картинке тонет ровно так же, как тонула цена. */ .km-hero--over .km-price__note { color: rgba(255, 255, 255, 0.75); } /* Вкладки. * * Поле сверху и снизу — правка вёрстки 4. `km-stack` разносит блоки * страницы на шестнадцать, а макет страницы курса разносит на двадцать * четыре; восемь — разница, и написана она разницей, а не итогом: * поменяется ритм стопки — вкладки поедут вместе со всем остальным, * а не останутся единственным блоком со своим числом. * * Поле, а не зазор у соседа: полоса вкладок стоит на трёх экранах, * и в каждом соседи свои. * * **Разница считается, а не записана числом.** Восьмёрка была верна ровно * до того дня, когда у страницы курса появился свой ритм: макет разносит * её блоки на 24, а стопка по умолчанию на 16. Стой здесь литерал — * вкладки получили бы 40 воздуха вместо 24, и заметил бы это глаз, * а не проверка. */ /* РЯД ПЕРЕНОСИТСЯ ЦЕЛЫМИ ПАРАМИ. Правка Алены 15 сентября 2026. В колонке кабинета на планшете (768: колонка 460 px) вкладки сжимались: названия в две строки, числа отрывались вниз, «Архив 0» уезжал за край на 44 px. Ряд переносится между вкладками: строка ломается раньше, чем вкладка успела бы сжаться, и пара «название + число» остаётся целой. Своего запрета сжиматься у вкладки нет намеренно: он был, и слом «снять его» уцелел — перенос ряда делает то же самое, вторая проверка лишняя. Подчёркивания у выбранной нет — только цвет, — и вторая строка ничего не ломает. На телефоне остаётся прокрутка: узкое правило стоит ниже в файле, перебивает перенос и само не даёт вкладкам сжиматься. */ .km-tabs { display: flex; flex-wrap: wrap; gap: 12px 28px; border-bottom: 1px solid var(--km-border); margin: calc(24px - var(--km-stack-gap, var(--km-gap-group))) 0; } .km-tab { padding: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--km-text-muted); cursor: pointer; background: none; border: none; font-family: inherit; } /* ЦВЕТ ТЕКСТА — ТО ЖЕ ЧУЖОЕ ПРАВИЛО, ШЕСТОЕ СВОЙСТВО. Задача 9.27. * * button:focus, button:hover { color: var(--bb-primary-button-text-hover) } * * ЗНАЧЕНИЕ РАЗНОЕ В РАЗНЫХ СРЕДАХ, и это довод сильнее любого одного цвета: * локально переменная равна `#ffffff`, на боевом — `#000000` (прочитано * живым запросом 25 августа 2026). То есть подпись в фокусе локально белела, * а на боевом чернела; и там и там — не своим цветом. * * *Здесь стояло «На боевом это белый». Неправда: цвет мерился локально, * а записан был про боевой — ровно та ошибка, от которой проект защищается * правилом «проверено на среде — это две разные записи».* * * Наш `:hover` чужой цвет перебивал, а `:focus` — нет, и вкладка в фокусе * БЕЗ наведения теряла свой цвет целиком. * * Пряталось это за наведением: мышью нажимают туда, куда смотрят, и `:hover` * с `:focus` приходят вместе — тогда выигрывает наш `:hover`. Видно дефект * ровно тогда, когда указатель ушёл, а фокус остался: после клика мышь * сдвинули, и подпись пропала. Измерено, а не выведено. * * Стоит ДО `:hover` намеренно: у обоих (0,2,0), и решает порядок. Ниже — * состояние наведения, ещё ниже выбранная вкладка. */ .km-tab:focus { color: var(--km-text-muted); } .km-tab:hover { color: var(--km-text); } /* ЧУЖОЕ УМОЛЧАНИЕ КНОПКИ ГАСИТСЯ В ТЕХ ЖЕ СОСТОЯНИЯХ, В КАКИХ ОНО ОБЪЯВЛЕНО. * * Найдено человеком на боевом 19 августа: при наведении на вкладку под ней * появлялась белая скруглённая плашка шире самой вкладки. Нашего `:hover` * в этом нет ни строчки — он меняет только цвет. * * Даёт её тема BuddyBoss, и механизм стоит записать целиком, потому что * он повторится: * * button:hover, button:focus { background-color: #FFFFFF } (0,1,1) * .km-tab { background: none } (0,1,0) * * Мы объявили фон в БАЗОВОМ состоянии, тема — в СОСТОЯНИИ НАВЕДЕНИЯ, * и её правило специфичнее нашего. Порядок подключения здесь ни при чём: * наш файл печатается позже, и это не помогает — сравниваются классы. * * Радиус приезжает оттуда же и другим путём: `button { border-radius: * var(--bb-button-radius) }` — на боевом это **100px**, — а `.km-tab` * радиуса не объявлял вовсе. Пока фон прозрачен, скругления не видно; * появился фон — появилась капсула. * * Прецедент в проекте уже есть и записан рядом: `.km-btn--primary` пришлось * задать цвет во всех состояниях, потому что тема красит нажатую ссылку. * Правило общее: **чужое умолчание гасится в том состоянии, в котором оно * объявлено**, а не в базовом. * * Стендом это НЕ ЛОВИТСЯ САМО СОБОЙ: стенд собран одним файлом, темы в нём * нет, и проверка была бы зелена при любом сломе. Поэтому общая мерка * подмешивает то самое правило селектором и специфичностью — и меряет * `:focus`, который тема объявляет тем же правилом и который можно вызвать * из скрипта. */ .km-tab, .km-tab:hover, .km-tab:focus, .km-tab:active { background: none; border: none; border-radius: 0; } /* ТЕНЬ ФОКУСА — ЧЕТВЁРТОЕ СВОЙСТВО ТОГО ЖЕ ЧУЖОГО ПРАВИЛА. Задача 9.27. * * Найдено человеком на боевом: при нажатии мышью вкладка обводится серым. * Правило выше гасило у того же механизма ТРИ свойства — фон, рамку * и радиус, — и этого оказалось мало: тема объявляет ещё и тень. * * button:focus { box-shadow: var(--bb-primary-button-focus-shadow) } (0,1,1) * .km-tab:focus { box-shadow: none } (0,2,0) * * Значение переменной прочитано живым запросом к боевому 25 августа 2026 * и совпало с локальным побайтно: * * 0 0 1px 2px rgba(0,0,0,.05), inset 0 0 0 2px rgba(0,0,0,.08) * * Это серый ободок снаружи плюс серый ободок внутри — та самая рамка. * * ЭТО ТЕНЬ, А НЕ `outline`, и в этом вся тонкость. Сам `outline` тема гасит * нулём в тех же состояниях (`button, button:focus, button:hover, * button:active { outline: 0 }`), поэтому браузерного кольца нет вовсе: * до этой правки человек, идущий табом, не видел **ничего** — ни нашего, * ни чужого, ни своего браузерного. * * ОБЪЯВЛЕНО У ТЕМЫ НА `:focus`, ЗНАЧИТ И ГАСИТСЯ НА `:focus`. Перенеси * гашение на `:focus-visible` — и тень вернётся от мыши, а выглядеть * написанное будет аккуратнее прежнего. Отдельная проверка держит именно * это, а не только наличие строки. * * Список — все наши `