/* stepforge_site/assets/css/dl.css * * "Daylight" (design/redesign_v2_light_simple.md) — рабочий CSS редизайна * публичного сайта. Реализует §3 (шапка/подвал), §5 (компоненты) и разметку * из четырёх вьюх §4 (главная, каталог, карточка приложения, форум) — * статический прототип design/redesign_preview_v2_daylight.html здесь * превращён в боевые классы для реальных PHP-страниц. * * ═══════════════════════════════════════════════════════════════════════ * ГРАНИЦА СКОУПА ЭТОЙ ЗАДАЧИ (важно прочитать перед правкой) — Daylight * покрывает только 4 вьюхи: home.php, apps_browse.php, app_detail.php, * forum_categories.php/forum_threads.php/forum_thread_view.php/ * forum_thread_new.php. Все остальные страницы маркетплейса (account.php, * login.php, developer_*.php, google_callback.php, telegram_web_exchange.php, * sitemap.php, lang.php) СОЗНАТЕЛЬНО не редизайнятся сейчас — под них нет * утверждённой спеки, и превращать их в Daylight означало бы придумывать * дизайн без утверждения владельца. Эти страницы рендерятся через тот же * _chrome.php и те же marketplace.css/forum.css — этот файл их не трогает * (см. секцию 1 ниже про единственное осознанное исключение — шапку/подвал). * ═══════════════════════════════════════════════════════════════════════ * * ОБНОВЛЕНИЕ 2026-07-20 (design/redesign_v2_light_simple.md §10) — граница * выше расширена ДВАЖДЫ в один день: сначала login.php, затем account.php — * оба теперь ТОЖЕ Daylight (готовые конверсии, см. §19 ниже и сами файлы; * account.php потребовал одного мелкого добавочного компонента сверх * буквального текста §10 — .dl-account-profile-row/-facts, §19.11, обёртка * "аватар + факты профиля", которой не было ни у одной из 4 исходных * Daylight-вьюх). marketplace/pages/developer_*.php по-прежнему ждут своей * конверсии следующим шагом — CSS для них уже добавлен (§19), разметка тех * файлов пока не тронута этой задачей. * * Подключать ПОСЛЕДНИМ в стеке (см. _chrome.php) — после dl-tokens.css * (переменные) и после marketplace.css/forum.css (чтобы секция 1 ниже * гарантированно выигрывала каскад при равной специфичности селектора). * * Namespace — только новые классы .dl-*, ничего существующего не * переименовано и не удалено (design/redesign_v2_light_simple.md §9: чистый * namespace, не мост поверх --mk-* / --sf-*). */ /* ═══════════════════════════════════════════════════════════════════════ * 0. Холст страницы — opt-in через * ═══════════════════════════════════════════════════════════════════════ * mk_render_header() принимает необязательный параметр $bodyClass (см. * _chrome.php) — только 4 редизайненные страницы передают 'dl-page' и * получают светлый холст/системный шрифт Daylight на уровне ; все * остальные страницы параметр не передают, класс отсутствует, это правило * не совпадает — их текущий фон/типографика (marketplace.css, --sf-bg и * т.д.) не меняются НИ НА БИТ. Без этого класса-переключателя пришлось бы * либо переопределять глобальный body{} (тогда все НЕ-Daylight страницы * тоже получили бы холст Daylight под всё ещё Foundry-контентом — разъезд), * либо оставить Daylight-страницы плавать на голубом фоне Foundry поверх * белых карточек Daylight — тоже разъезд. opt-in класс — самый безопасный * аддитивный вариант. */ body.dl-page { background: var(--dl-bg); color: var(--dl-ink); font-family: var(--dl-font-sans); font-variant-numeric: tabular-nums; } /* :where() держит специфичность этого правила на уровне голого `a` (0,0,1) — без него `body.dl-page a` (0,1,2) перебивал бы любой одноклассовый цветовой рецепт вида `.dl-tabs-item { color: ... }`/`.mk-header__nav a { color: ... }` (оба (0,1,0)/(0,1,1)), молча стирая задуманный цвет (найдено живым ревью 2026-07-20: активная/неактивная вкладка таб-бара кабинета разработчика оказались неотличимы по цвету на первых страницах, где одновременно есть и body.dl-page, и .dl-tabs — тот же корень тише гасит и .mk-header__nav a на уже отгруженных страницах). */ :where(body.dl-page) a { color: inherit; text-decoration: none; } body.dl-page img, body.dl-page svg { display: block; max-width: 100%; } @media (prefers-reduced-motion: reduce) { body.dl-page *, body.dl-page *::before, body.dl-page *::after { transition: none !important; } } /* ═══════════════════════════════════════════════════════════════════════ * 1. Рескин общей шапки/подвала (.mk-header/.mk-footer) — ЕДИНСТВЕННОЕ * отклонение от чистой аддитивности в этом файле, и оно осознанное. * ═══════════════════════════════════════════════════════════════════════ * .mk-header/.mk-footer рендерятся из _chrome.php и используются АБСОЛЮТНО * ВСЕМИ страницами маркетплейса, включая страницы вне скоупа Daylight — * альтернативы переопределению не было (нельзя сделать "две шапки", не * задваивая разметку в _chrome.php ради 4 страниц из ~25). Решение: * перекрасить существующую шапку/подвал ВИЗУАЛЬНО везде, СТРУКТУРУ * (разметку, классы, ссылки навигации — "Apps", переключатель языка, * логин/дропдоу пользователя) не менять ни на одной странице. Т.е. на * страницах вне скоупа (аккаунт, кабинет разработчика, логин...) после этой * задачи будет светлая/зелёная шапка Daylight над всё ещё голубым Foundry- * контентом ниже — это временный, наглядный, но безопасный разъезд стилей * (структура и работоспособность страниц не затронуты), который снимается * будущим редизайном тех страниц. Спека явно допускает такой путь (см. * design/redesign_v2_light_simple.md §3.1/§3.2 — "то же дерево навигации, * просто перекрашено"). * * НЕ добавлены (сознательно): пункты навигации "Forum"/"About" и строка * поиска из прототипа — на сайте нет ни общесайтового /forum (форум * привязан к приложению: /apps/{slug}/forum), ни /about, ни бэкенда поиска. * Дорисовать несуществующие ссылки/красивую, но неработающую строку поиска * значило бы нарушить принцип "honest-disabled", уже принятый в этом * кодбейзе (footer __soon, mk_render_dev_subnav no-op) — вместо этого * навигация остаётся как есть, просто в новых цветах/шрифте. * * .mk-btn-foundry переиспользуется на несвязанных страницах (login.php, * apps_browse.php, home.php, google_callback.php) — поэтому его * переопределение ниже намеренно СКОУПЛЕНО селектором `.mk-header * .mk-btn-foundry`, а не голым `.mk-btn-foundry`: красится только кнопка * "Войти" внутри самой шапки, кнопка с тем же классом на остальных * страницах остаётся прежней Foundry-кнопкой (не в скоупе задачи). */ .mk-header { background: var(--dl-surface); box-shadow: none; border-bottom: 1px solid var(--dl-border); } .mk-header__inner { max-width: var(--dl-content-max); min-height: 56px; padding: 0 var(--dl-space-5); gap: var(--dl-space-6); font-family: var(--dl-font-sans); } .mk-header__wordmark { color: var(--dl-ink); font-size: 16px; font-weight: 700; letter-spacing: -0.01em; gap: var(--dl-space-2); } .mk-header__nav a { color: var(--dl-ink-soft); font-size: 15px; font-weight: 400; transition: color .12s ease-out; } .mk-header__nav a:hover { color: var(--dl-ink); } .mk-header__auth { gap: var(--dl-space-4); } .mk-lang-switch__select { font-family: var(--dl-font-sans); font-size: 13px; color: var(--dl-ink-soft); background: var(--dl-surface-2); border: 1px solid var(--dl-border); border-radius: var(--dl-radius-sm); padding: 5px 8px; cursor: pointer; } .mk-user-menu__toggle { font-family: var(--dl-font-sans); font-size: 14px; color: var(--dl-ink-soft); } .mk-user-menu__avatar { background: var(--dl-accent); font-family: var(--dl-font-sans); } .mk-user-menu__dropdown { background: var(--dl-surface); border: 1px solid var(--dl-border); border-radius: var(--dl-radius-md); box-shadow: var(--dl-shadow-float); font-family: var(--dl-font-sans); } .mk-user-menu__dropdown a, .mk-user-menu__logout { color: var(--dl-ink); font-size: 14px; } .mk-user-menu__dropdown a:hover, .mk-user-menu__logout:hover { background: var(--dl-surface-2); color: var(--dl-accent); } /* Имя/email пользователя в шапке (marketplace.css/_chrome.php mk_render_header(): mk-user-menu__name раньше вообще не имел правил — $displayName берётся из display_name ИЛИ, если оно пустое, из сырого email (см. _chrome.php), т.е. могло быть произвольной длины и распирать шапку на любой ширине экрана, не только на мобильном. Обрезаем многоточием — полное имя всё равно видно в дропдауне под кнопкой и на /account, здесь это просто ярлык. */ .mk-user-menu__name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mk-header .mk-btn-foundry { font-family: var(--dl-font-sans); font-weight: 600; font-size: 14px; color: #fff; background: var(--dl-accent-strong); border: none; border-radius: var(--dl-radius-sm); box-shadow: none; padding: 8px 16px; transition: background .12s ease-out; } .mk-header .mk-btn-foundry:hover { background: #095332; box-shadow: none; } .mk-header .mk-btn-foundry:active { transform: none; background: #083f26; } .mk-header .mk-btn-foundry:focus-visible { outline: 2px solid var(--dl-accent); outline-offset: 2px; } .mk-footer { background: var(--dl-surface); color: var(--dl-ink-soft); border-top: 1px solid var(--dl-border); margin-top: var(--dl-space-9); font-family: var(--dl-font-sans); } .mk-footer__inner { max-width: var(--dl-content-max); padding: var(--dl-space-8) var(--dl-space-5) var(--dl-space-6); } .mk-footer__wordmark { color: var(--dl-ink); font-size: 16px; } .mk-footer__tagline { color: var(--dl-ink-soft); font-size: 14px; line-height: 1.6; } .mk-footer__columns h3 { color: var(--dl-ink-soft); font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } .mk-footer__columns a { color: var(--dl-ink); font-size: 15px; } .mk-footer__columns a:hover { color: var(--dl-accent); text-decoration: underline; } .mk-footer__soon { color: var(--dl-ink-faint); } .mk-footer__soon-tag { border-color: var(--dl-ink-faint); color: var(--dl-ink-faint); border-radius: var(--dl-radius-sm); } .mk-footer__bottom { color: var(--dl-ink-faint); font-size: 13px; border-top: 1px solid var(--dl-border); padding-top: var(--dl-space-5); } @media (max-width: 767px) { /* ─── Фикс "лого и название налазят на приложение" (owner, n/n5.md live-фидбек на только что задеплоенный Daylight) ─────────────────────────────────── На ~375px сумма минимальных ширин wordmark(+добавленная сегодня иконка- логотип) + пункт нава "Приложения"/"Apps" + переключатель языка + меню пользователя реально превышает ширину экрана — а .mk-header__inner (marketplace.css) это display:flex БЕЗ flex-wrap и без min-width:0 ни на одном ребёнке, так что строка не переносится и не сжимается ниже min-content каждого элемента: лишнее либо вылезает за край экрана, либо наезжает на соседний элемент. Три меры вместе (не хак с одним свойством): 1) иконка-логотип (чисто декоративная, alt="") скрывается первой — она не несёт уникальной информации (текст "StepForge" рядом её дублирует по смыслу) и именно она добавила лишние ~32px и спровоцировала переполнение; 2) имя пользователя дополнительно ужимается (базовое правило — выше, у .mk-user-menu__name — работает на всех ширинах, здесь только меньше max-width для тесного экрана); 3) flex-wrap — честный отходной путь на случай, когда даже после (1) и (2) не помещается (напр. залогиненный пользователь с длинным именем на самом узком телефоне): блок языка/аккаунта целиком переносится на вторую строку, а НЕ наезжает на текст и не обрезается за экраном. */ .mk-header__inner { padding: 0 var(--dl-space-4); gap: var(--dl-space-3); flex-wrap: wrap; row-gap: var(--dl-space-2); } .mk-header__wordmark { /* Бренд-текст никогда не сжимается и не переносится — при нехватке места первой уступает место иконка (правило ниже), не сам текст "StepForge". */ flex-shrink: 0; } .mk-header__logo-mark { display: none; } .mk-header__auth { /* 16px (--dl-space-4) — тот же зазор, что и на десктопе, где места достаточно; на телефоне ужимаем до 8px ради освобождения места под переключатель языка + меню пользователя. min-width:0 разрешает этому блоку сжиматься ниже суммарного min-content своих детей — без него ужатый .mk-user-menu__name (см. правило выше) не смог бы реально уменьшить ширину всего блока auth в расчётах flex-строки. */ gap: var(--dl-space-2); min-width: 0; margin-left: auto; /* если auth целиком переносится на вторую строку — прижимаем её к правому краю, как на десктопе, а не к левому */ } .mk-user-menu { min-width: 0; } .mk-user-menu__name { max-width: 92px; } .mk-footer__inner { padding: var(--dl-space-6) var(--dl-space-4) var(--dl-space-5); } } /* ═══════════════════════════════════════════════════════════════════════ * 2. Контейнер / ритм секций (§2.3) — далее всё аддитивно, новые .dl-* * ═══════════════════════════════════════════════════════════════════════ */ .dl-container { max-width: var(--dl-content-max); margin: 0 auto; padding: 0 var(--dl-space-5); } @media (max-width: 767px) { .dl-container { padding: 0 var(--dl-space-4); } } .dl-section { margin-top: var(--dl-space-9); } .dl-section:first-of-type { margin-top: 0; } @media (max-width: 767px) { .dl-section { margin-top: var(--dl-space-7); } } /* Утилита моно-цифр внутри sans-текста (версии/даты/счётчики) — намеренно .dl-mono, а не голый .mono из прототипа: короткие неймспейс-свободные имена классов рискуют когда-нибудь столкнуться с чужим правилом в общем CSS, весь новый код этой задачи держится в .dl-* без исключений. */ .dl-mono { font-family: var(--dl-font-mono); } /* ═══════════════════════════════════════════════════════════════════════ * 3. Типографика — роли по §2.2 * ═══════════════════════════════════════════════════════════════════════ */ .dl-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--dl-ink-soft); text-transform: uppercase; margin: 0 0 var(--dl-space-3); } .dl-hero-h { font-size: 40px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin: 0; max-width: 20ch; color: var(--dl-ink); } .dl-h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.01em; margin: 0; color: var(--dl-ink); } .dl-h2 { font-size: 20px; font-weight: 600; margin: 0; color: var(--dl-ink); } .dl-h3 { font-size: 16px; font-weight: 600; margin: 0; color: var(--dl-ink); } .dl-lead { font-size: 18px; font-weight: 400; color: var(--dl-ink-soft); line-height: 1.5; margin: var(--dl-space-4) 0 0; max-width: 56ch; } .dl-body { font-size: 16px; line-height: 1.6; color: var(--dl-ink); max-width: 66ch; margin: 0; } .dl-body + .dl-body { margin-top: var(--dl-space-4); } .dl-meta { font-size: 14px; color: var(--dl-ink-soft); } @media (max-width: 767px) { .dl-hero-h { font-size: 30px; max-width: none; } .dl-h1 { font-size: 24px; } } /* ═══════════════════════════════════════════════════════════════════════ * 4. Кнопки и ссылки (§5) — скруглённый прямоугольник, НЕ таблетка * ═══════════════════════════════════════════════════════════════════════ */ .dl-btn-primary { display: inline-flex; align-items: center; gap: 6px; background: var(--dl-accent-strong); color: #fff; border: none; border-radius: var(--dl-radius-sm); padding: 12px 20px; font-family: var(--dl-font-sans); font-size: 15px; font-weight: 600; line-height: 1.2; cursor: pointer; text-decoration: none; transition: background .12s ease-out; } .dl-btn-primary:hover { background: #095332; } .dl-btn-primary:active { background: #083f26; } .dl-btn-primary:focus-visible { outline: 2px solid var(--dl-accent); outline-offset: 2px; } .dl-btn-secondary { display: inline-flex; align-items: center; gap: 6px; background: var(--dl-surface); color: var(--dl-ink); border: 1px solid var(--dl-border-strong); border-radius: var(--dl-radius-sm); padding: 11px 20px; font-family: var(--dl-font-sans); font-size: 15px; font-weight: 600; line-height: 1.2; cursor: pointer; text-decoration: none; transition: border-color .12s ease-out, background .12s ease-out; } .dl-btn-secondary:hover { background: var(--dl-surface-2); } .dl-btn-disabled { display: inline-flex; align-items: center; gap: 6px; background: var(--dl-surface-2); color: var(--dl-ink-faint); border: 1px solid var(--dl-border); border-radius: var(--dl-radius-sm); padding: 12px 20px; font-family: var(--dl-font-sans); font-size: 15px; font-weight: 600; line-height: 1.2; cursor: default; } .dl-link { font-family: var(--dl-font-sans); font-size: 15px; font-weight: 600; color: var(--dl-accent); background: none; border: none; cursor: pointer; padding: 0; text-decoration: none; } .dl-link:hover { text-decoration: underline; } .dl-link-quiet { font-family: var(--dl-font-sans); font-size: 15px; color: var(--dl-ink-soft); background: none; border: none; cursor: pointer; padding: 0; text-decoration: none; } .dl-link-quiet:hover { color: var(--dl-ink); } /* ═══════════════════════════════════════════════════════════════════════ * 5. Чипы/теги (§5) — sans 12/600, radius-sm, никогда таблетка * ═══════════════════════════════════════════════════════════════════════ */ .dl-chip { display: inline-flex; align-items: center; gap: 5px; font-family: var(--dl-font-sans); font-size: 12px; font-weight: 600; border-radius: var(--dl-radius-sm); padding: 5px 10px; line-height: 1.2; } .dl-chip-verified { background: var(--dl-accent-soft); color: var(--dl-accent); } .dl-chip-role { background: var(--dl-accent-soft); color: var(--dl-accent); font-size: 11px; padding: 3px 8px; text-transform: uppercase; letter-spacing: .03em; } /* ═══════════════════════════════════════════════════════════════════════ * 6. Строка фактов (герой главной) — §5 .dl-factline * ═══════════════════════════════════════════════════════════════════════ */ .dl-factline { font-family: var(--dl-font-sans); font-size: 15px; color: var(--dl-ink-soft); margin-top: var(--dl-space-5); } .dl-factline .pos { color: var(--dl-accent); font-weight: 600; } /* ═══════════════════════════════════════════════════════════════════════ * 7. Иконка приложения — квадрат radius-lg, буква-заглушка если нет icon_url * ═══════════════════════════════════════════════════════════════════════ */ .dl-appicon { flex: none; display: flex; align-items: center; justify-content: center; background: var(--dl-surface-2); border: 1px solid var(--dl-border); border-radius: var(--dl-radius-lg); font-family: var(--dl-font-sans); font-weight: 700; color: var(--dl-ink); overflow: hidden; } .dl-appicon img { width: 100%; height: 100%; object-fit: cover; } .dl-appicon-56 { width: 56px; height: 56px; font-size: 22px; } .dl-appicon-72 { width: 72px; height: 72px; font-size: 28px; } /* ═══════════════════════════════════════════════════════════════════════ * 8. Карточка приложения — §5 .dl-appcard (рендерится * marketplace/_cards.php::mk_render_app_card_daylight(), см. её докблок) * ═══════════════════════════════════════════════════════════════════════ */ .dl-appcard { display: block; background: var(--dl-surface); border: 1px solid var(--dl-border); border-radius: var(--dl-radius-md); box-shadow: var(--dl-shadow-card); padding: 28px; transition: border-color .12s ease-out, box-shadow .12s ease-out; } a.dl-appcard { text-decoration: none; color: inherit; } .dl-appcard:hover { border-color: var(--dl-border-strong); box-shadow: 0 2px 4px rgba(20,25,35,.06), 0 8px 20px rgba(20,25,35,.08); } .dl-appcard-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--dl-space-4); } .dl-appcard-name { display: flex; align-items: center; gap: var(--dl-space-4); } .dl-appcard-name h2, .dl-appcard-name h3 { font-size: 20px; font-weight: 600; margin: 0; color: var(--dl-ink); } .dl-appcard-tag { font-size: 16px; color: var(--dl-ink-soft); margin: var(--dl-space-3) 0 0; } .dl-appcard-meta { font-size: 14px; color: var(--dl-ink-soft); margin-top: var(--dl-space-4); display: flex; align-items: center; justify-content: space-between; gap: var(--dl-space-3); flex-wrap: wrap; } .dl-appcard-meta .pos { color: var(--dl-accent); } .dl-appcard-view { font-size: 14px; font-weight: 600; color: var(--dl-accent); flex: none; } .dl-catalog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--dl-space-5); } .dl-catalog-list { display: flex; flex-direction: column; gap: var(--dl-space-4); } @media (max-width: 767px) { .dl-catalog-grid { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════════════════════════════════ * 9. "Почему StepForge" — три колонки, §4.1 п.3 * ═══════════════════════════════════════════════════════════════════════ */ .dl-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--dl-space-6); margin-top: var(--dl-space-6); } .dl-why-item .check { color: var(--dl-accent); font-size: 18px; font-weight: 700; } .dl-why-item h3 { font-size: 16px; font-weight: 600; margin: 10px 0 6px; color: var(--dl-ink); } .dl-why-item p { font-size: 15px; color: var(--dl-ink-soft); line-height: 1.5; margin: 0; } @media (max-width: 767px) { .dl-why-grid { grid-template-columns: 1fr; gap: var(--dl-space-5); } } /* ═══════════════════════════════════════════════════════════════════════ * 11. Шапка страницы-списка (каталог §4.2, форум-лендинг §4.4 — общий приём) * ═══════════════════════════════════════════════════════════════════════ */ .dl-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--dl-space-4); flex-wrap: wrap; } .dl-page-count { font-size: 14px; color: var(--dl-ink-soft); } .dl-page-sub-row { display: flex; align-items: center; justify-content: space-between; gap: var(--dl-space-4); margin-top: 10px; flex-wrap: wrap; } /* ═══════════════════════════════════════════════════════════════════════ * 12. Карточка приложения (детальная страница) — §4.3 identity-блок * ═══════════════════════════════════════════════════════════════════════ */ .dl-identity-card { background: var(--dl-surface); border: 1px solid var(--dl-border); border-radius: var(--dl-radius-md); box-shadow: var(--dl-shadow-card); padding: var(--dl-space-6); } .dl-identity-top { display: flex; align-items: flex-start; gap: var(--dl-space-5); } .dl-identity-name-row { display: flex; align-items: center; gap: var(--dl-space-4); flex-wrap: wrap; } .dl-identity-name-row h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.01em; margin: 0; color: var(--dl-ink); } .dl-identity-tag { font-size: 16px; color: var(--dl-ink-soft); margin: var(--dl-space-2) 0 0; } .dl-identity-cat { font-size: 14px; color: var(--dl-ink-soft); margin: 6px 0 0; } .dl-identity-cta-row { display: flex; align-items: center; gap: var(--dl-space-4); flex-wrap: wrap; margin-top: var(--dl-space-5); } .dl-identity-cta-meta { font-size: 14px; color: var(--dl-ink-soft); } .dl-identity-cta-meta .pos { color: var(--dl-accent); } @media (max-width: 767px) { .dl-identity-card { padding: var(--dl-space-5); } .dl-identity-top { gap: var(--dl-space-4); } } /* ═══════════════════════════════════════════════════════════════════════ * 13. Двухколоночная сетка карточки приложения + липкий сайдбар — §4.3/§6 * ═══════════════════════════════════════════════════════════════════════ * Брейкпоинт 1024px — из спеки §6 ("desktop >= 1024px"). Ниже него сайдбар * (.dl-sidebar-stack) скрыт, а страница обязана показать инлайн-дубликаты * At a glance / Forum через классы .dl-glance--inline/.dl-forum-card--inline * прямо в identity-блоке (см. §4.3 "mobile order") — сами карточки .dl-glance/ * .dl-forum-card переиспользуются 1:1 в обоих местах, меняется только обёртка. */ .dl-detail-grid { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: var(--dl-space-7); } @media (min-width: 1024px) { .dl-detail-grid { grid-template-columns: 2fr 1fr; gap: var(--dl-space-7); align-items: start; } .dl-glance--inline, .dl-forum-card--inline { display: none; } } /* n/n5.md item 7/8 (live-фидбек, 2026-07-20) — правый сайдбар "уезжал" на десктопе, а на мобильном страница скроллилась вбок шире экрана. Один и тот же корень: grid-item'ы (.dl-main/