/* ============================================================================ SailorOS V2 — дизайн-система, слой компонентов. Источник правды: SAILOROS_V2_SPECIFICATION/05_DESIGN_SYSTEM/02_COMPONENTS.md Требует подключённого tokens.css и атрибута data-sailoros="v2" на . Именование: s- (SailorOS) + компонент + модификатор через два дефиса. Старые классы портала (pcard, pill, btn-primary) НЕ переиспользуются — они принадлежат тёмной теме «Deep Ocean» и живут своей жизнью до перевода страниц на V2. ============================================================================ */ /* ===== Основа страницы ===================================================== */ [data-sailoros="v2"] body { margin: 0; background: var(--bg-100); color: var(--ink-900); font-family: var(--font-body); font-size: var(--text-body); line-height: var(--leading-body); -webkit-font-smoothing: antialiased; } /* Числа в таблицах и деньгах — табличные, иначе колонки зарплат «пляшут» */ [data-sailoros="v2"] .s-num, [data-sailoros="v2"] table td, [data-sailoros="v2"] .s-salary { font-variant-numeric: tabular-nums; } [data-sailoros="v2"] :focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); } /* ===== Типографика ========================================================= */ [data-sailoros="v2"] .s-display { font-size: var(--text-display); line-height: var(--leading-display); font-weight: var(--weight-display); } [data-sailoros="v2"] .s-h1 { font-size: var(--text-h1); line-height: var(--leading-h1); font-weight: var(--weight-h1); } [data-sailoros="v2"] .s-h2 { font-size: var(--text-h2); line-height: var(--leading-h2); font-weight: var(--weight-h2); } [data-sailoros="v2"] .s-h3 { font-size: var(--text-h3); line-height: var(--leading-h3); font-weight: var(--weight-h3); } [data-sailoros="v2"] .s-body-lg { font-size: var(--text-body-lg); line-height: var(--leading-body-lg); } [data-sailoros="v2"] .s-strong { font-weight: var(--weight-body-strong); } [data-sailoros="v2"] .s-caption { font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--ink-500); } [data-sailoros="v2"] .s-overline { font-size: var(--text-overline); line-height: var(--leading-overline); font-weight: var(--weight-overline); letter-spacing: var(--tracking-overline); text-transform: uppercase; color: var(--ink-500); } /* §3.3: строка не длиннее 75 знаков, заголовки без точки в конце */ [data-sailoros="v2"] .s-prose { max-width: var(--text-max); color: var(--ink-700); } /* ===== 1. Кнопка =========================================================== */ [data-sailoros="v2"] .s-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--control-md); padding: 0 var(--space-4); border-radius: var(--radius-md); border: 1px solid transparent; font: inherit; font-size: var(--text-body); font-weight: var(--weight-body-strong); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background var(--motion-hover) var(--ease-out), border-color var(--motion-hover) var(--ease-out); } [data-sailoros="v2"] .s-btn:active:not(:disabled) { transform: translateY(1px); } [data-sailoros="v2"] .s-btn:disabled { opacity: .4; cursor: default; } [data-sailoros="v2"] .s-btn--lg { height: var(--control-lg); padding: 0 var(--space-5); } [data-sailoros="v2"] .s-btn--sm { height: var(--control-sm); padding: 0 var(--space-3); } [data-sailoros="v2"] .s-btn--primary { background: var(--brand-600); color: #FFFFFF; } [data-sailoros="v2"] .s-btn--primary:hover:not(:disabled) { background: var(--brand-500); } [data-sailoros="v2"] .s-btn--secondary { background: var(--bg-000); color: var(--brand-600); border-color: var(--brand-300); } [data-sailoros="v2"] .s-btn--secondary:hover:not(:disabled) { background: var(--brand-50); } [data-sailoros="v2"] .s-btn--quiet { background: transparent; color: var(--ink-700); } [data-sailoros="v2"] .s-btn--quiet:hover:not(:disabled) { background: var(--bg-100); } [data-sailoros="v2"] .s-btn--danger { background: var(--bg-000); color: var(--danger-600); border-color: var(--danger-600); } [data-sailoros="v2"] .s-btn--danger:hover:not(:disabled) { background: var(--danger-50); } /* §1: отключённая кнопка обязана нести рядом объяснение «почему недоступно» */ [data-sailoros="v2"] .s-btn-reason { font-size: var(--text-caption); color: var(--ink-500); } /* ===== 2. Ссылка =========================================================== */ [data-sailoros="v2"] a { color: var(--brand-600); text-decoration: none; } [data-sailoros="v2"] a:hover { text-decoration: underline; } [data-sailoros="v2"] .s-prose a { text-decoration: underline; } /* ===== 3. Поле ввода ======================================================= */ [data-sailoros="v2"] .s-field { display: flex; flex-direction: column; gap: var(--space-2); } /* §3: подпись всегда видна — плейсхолдер вместо подписи запрещён */ [data-sailoros="v2"] .s-label { font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--ink-500); } [data-sailoros="v2"] .s-input, [data-sailoros="v2"] .s-select, [data-sailoros="v2"] .s-textarea { height: var(--control-md); padding: 0 var(--space-3); background: var(--bg-000); color: var(--ink-900); border: 1px solid var(--line-300); border-radius: var(--radius-md); font: inherit; font-size: var(--text-body); width: 100%; box-sizing: border-box; transition: border-color var(--motion-hover) var(--ease-out); } [data-sailoros="v2"] .s-textarea { height: auto; min-height: 96px; padding: var(--space-3); line-height: var(--leading-body); } [data-sailoros="v2"] .s-input:hover, [data-sailoros="v2"] .s-select:hover { border-color: var(--ink-400); } [data-sailoros="v2"] .s-input:focus, [data-sailoros="v2"] .s-select:focus, [data-sailoros="v2"] .s-textarea:focus { border-color: var(--brand-600); } [data-sailoros="v2"] .s-input:disabled { background: var(--bg-100); } [data-sailoros="v2"] .s-input::placeholder { color: var(--ink-400); } [data-sailoros="v2"] .s-field--error .s-input { border-color: var(--danger-600); } [data-sailoros="v2"] .s-error { font-size: var(--text-caption); color: var(--danger-600); } [data-sailoros="v2"] .s-hint { font-size: var(--text-caption); color: var(--ink-500); } /* §3: отмечаем НЕобязательные поля, а не обязательные звёздочкой */ [data-sailoros="v2"] .s-optional { color: var(--ink-400); } @media (max-width: 640px) { [data-sailoros="v2"] .s-input, [data-sailoros="v2"] .s-select { height: var(--control-lg); } [data-sailoros="v2"] .s-btn { height: var(--control-lg); } } /* ===== 4. Переключатели выбора ============================================ */ [data-sailoros="v2"] .s-check { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; } [data-sailoros="v2"] .s-check input { width: 20px; height: 20px; accent-color: var(--brand-600); margin: 0; } /* Тумблер — только для мгновенно применяемых настроек, не в формах с кнопкой сохранения */ [data-sailoros="v2"] .s-switch { position: relative; width: 44px; height: 24px; } /* ===== 5. Чип фильтра ====================================================== */ [data-sailoros="v2"] .s-chip { display: inline-flex; align-items: center; gap: var(--space-2); height: 32px; padding: 0 var(--space-3); background: var(--bg-000); color: var(--ink-700); border: 1px solid var(--line-300); border-radius: var(--radius-full); font-size: var(--text-body); cursor: pointer; transition: background var(--motion-hover) var(--ease-out); } [data-sailoros="v2"] .s-chip:hover { background: var(--bg-100); } [data-sailoros="v2"] .s-chip--on { background: var(--brand-600); color: #FFFFFF; border-color: var(--brand-600); } [data-sailoros="v2"] .s-chip__count { color: inherit; opacity: .75; } /* ===== 6. Бейджи =========================================================== */ [data-sailoros="v2"] .s-badge { display: inline-flex; align-items: center; gap: var(--space-1); height: 24px; padding: 0 var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-caption); font-weight: 600; white-space: nowrap; } [data-sailoros="v2"] .s-badge--verified { background: var(--success-50); color: var(--success-600); } [data-sailoros="v2"] .s-badge--urgent { background: var(--warning-50); color: var(--warning-600); } [data-sailoros="v2"] .s-badge--new { background: var(--brand-50); color: var(--brand-600); } [data-sailoros="v2"] .s-badge--archived { background: var(--bg-100); color: var(--ink-500); } [data-sailoros="v2"] .s-badge--expert { background: var(--brand-50); color: var(--brand-600); } [data-sailoros="v2"] .s-badge--own { background: var(--bg-100); color: var(--ink-700); } /* ===== 7. Индикатор соответствия ========================================== */ [data-sailoros="v2"] .s-match { display: inline-flex; align-items: baseline; gap: var(--space-2); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-body); font-weight: var(--weight-body-strong); font-variant-numeric: tabular-nums; } [data-sailoros="v2"] .s-match__word { font-size: var(--text-caption); font-weight: 400; } [data-sailoros="v2"] .s-match__value--big { font-size: var(--text-h1); line-height: var(--leading-h1); font-weight: var(--weight-h1); } /* Списки на странице вакансии: чего не хватает — нейтральные точки, НЕ крестики */ [data-sailoros="v2"] .s-match-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); } [data-sailoros="v2"] .s-match-list li { display: flex; gap: var(--space-2); font-size: var(--text-body); } [data-sailoros="v2"] .s-match-list--matched li::before { content: "✓"; color: var(--success-600); } [data-sailoros="v2"] .s-match-list--missing li::before { content: "•"; color: var(--ink-400); } [data-sailoros="v2"] .s-match-list--unknown li::before { content: "•"; color: var(--ink-400); } /* ===== 8-10. Карточки ===================================================== */ /* §5 основы: в покое БЕЗ тени, с границей. Тень появляется при наведении */ [data-sailoros="v2"] .s-card { background: var(--bg-000); border: 1px solid var(--line-300); border-radius: var(--radius-lg); padding: var(--space-6); transition: box-shadow var(--motion-hover) var(--ease-out); } [data-sailoros="v2"] .s-card--hover:hover { box-shadow: var(--shadow-sm); } [data-sailoros="v2"] .s-card__divider { height: 1px; background: var(--line-200); border: 0; margin: var(--space-4) 0; } @media (max-width: 640px) { [data-sailoros="v2"] .s-card { padding: var(--space-4); } } /* Логотип компании: при отсутствии — плашка brand-50 с первой буквой brand-600 */ [data-sailoros="v2"] .s-logo { width: var(--logo-sm); height: var(--logo-sm); border-radius: var(--radius-md); object-fit: cover; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-50); color: var(--brand-600); font-weight: 700; font-size: var(--text-h3); } /* ===== 12. Пара «ключ — значение» ========================================= */ [data-sailoros="v2"] .s-kv { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: var(--space-2) var(--space-4); } [data-sailoros="v2"] .s-kv dt { font-size: var(--text-caption); color: var(--ink-500); } [data-sailoros="v2"] .s-kv dd { margin: 0; font-weight: var(--weight-body-strong); } @media (max-width: 640px) { [data-sailoros="v2"] .s-kv { grid-template-columns: 1fr; gap: var(--space-1); } } /* ===== 13. Таблица ======================================================== */ [data-sailoros="v2"] .s-table { width: 100%; border-collapse: collapse; background: var(--bg-000); } [data-sailoros="v2"] .s-table th { text-align: left; padding: var(--space-3) var(--space-4); background: var(--bg-100); font-size: var(--text-overline); font-weight: var(--weight-overline); letter-spacing: var(--tracking-overline); text-transform: uppercase; color: var(--ink-500); border-bottom: 1px solid var(--line-300); } [data-sailoros="v2"] .s-table td { padding: var(--space-3) var(--space-4); height: var(--row-min); border-bottom: 1px solid var(--line-200); } [data-sailoros="v2"] .s-table tbody tr:hover { background: var(--brand-50); } /* Числовые колонки — вправо, табличными цифрами */ [data-sailoros="v2"] .s-table .s-col-num { text-align: right; font-variant-numeric: tabular-nums; } /* §13: прокрутка широкой таблицы живёт ВНУТРИ карточки и никогда не распирает страницу. min-width:0 обязателен и обёртке, и её родителям-flex/grid — без него элемент не сжимается меньше содержимого, прокрутка не срабатывает и горизонтально едет вся страница. */ [data-sailoros="v2"] .s-table-wrap { overflow-x: auto; min-width: 0; } [data-sailoros="v2"] .s-card > .s-table-wrap, [data-sailoros="v2"] .s-detail > *, [data-sailoros="v2"] .s-catalog > * { min-width: 0; } /* Уехав вправо к двигателю и агенту, человек должен видеть, к какому контракту относится строка: первые две колонки закрепляются */ [data-sailoros="v2"] .s-table--sticky2 th:nth-child(-n+2), [data-sailoros="v2"] .s-table--sticky2 td:nth-child(-n+2) { position: sticky; background: var(--bg-000); z-index: 1; } [data-sailoros="v2"] .s-table--sticky2 th:nth-child(-n+2) { background: var(--bg-100); } [data-sailoros="v2"] .s-table--sticky2 th:nth-child(1), [data-sailoros="v2"] .s-table--sticky2 td:nth-child(1) { left: 0; } [data-sailoros="v2"] .s-table--sticky2 th:nth-child(2), [data-sailoros="v2"] .s-table--sticky2 td:nth-child(2) { left: var(--sticky-col-1, 140px); } /* §13: НА МОБИЛЬНОМ ТАБЛИЦА ПРЕВРАЩАЕТСЯ В КАРТОЧКИ, а не прокручивается. Каждая строка — карточка с парами «ключ — значение»; ключ берётся из data-label ячейки. Пары в две колонки, длинные значения — во всю ширину (модификатор s-cell--wide на ячейке). */ @media (max-width: 640px) { [data-sailoros="v2"] .s-table, [data-sailoros="v2"] .s-table tbody, [data-sailoros="v2"] .s-table tr, [data-sailoros="v2"] .s-table td { display: block; width: auto; } [data-sailoros="v2"] .s-table thead { display: none; } [data-sailoros="v2"] .s-table tr { border: 1px solid var(--line-300); border-radius: var(--radius-lg); padding: var(--space-4); margin-bottom: var(--space-3); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-4); } [data-sailoros="v2"] .s-table tbody tr:hover { background: var(--bg-000); } [data-sailoros="v2"] .s-table td { height: auto; padding: 0; border: 0; } [data-sailoros="v2"] .s-table td::before { content: attr(data-label); display: block; font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--ink-500); } [data-sailoros="v2"] .s-table td.s-cell--wide { grid-column: 1 / -1; } [data-sailoros="v2"] .s-table .s-col-num { text-align: left; } [data-sailoros="v2"] .s-table-wrap { overflow-x: visible; } } /* ===== 15. Раскладка страницы ============================================= */ [data-sailoros="v2"] .s-page { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter-desktop); } [data-sailoros="v2"] .s-section { margin-bottom: var(--space-10); } [data-sailoros="v2"] .s-catalog { display: grid; grid-template-columns: var(--filters-col) 1fr; gap: var(--space-6); } [data-sailoros="v2"] .s-detail { display: grid; grid-template-columns: 1fr var(--actions-col); gap: var(--space-6); } @media (max-width: 1439px) { [data-sailoros="v2"] .s-page { padding: 0 var(--gutter-laptop); } } @media (max-width: 1023px) { [data-sailoros="v2"] .s-page { padding: 0 var(--gutter-tablet); } [data-sailoros="v2"] .s-catalog, [data-sailoros="v2"] .s-detail { grid-template-columns: 1fr; } } @media (max-width: 640px) { [data-sailoros="v2"] .s-page { padding: 0 var(--gutter-mobile); } } /* ===== 16-17. Служебные блоки и пустые состояния ========================= */ [data-sailoros="v2"] .s-note { padding: var(--space-4); border-radius: var(--radius-md); font-size: var(--text-body); } [data-sailoros="v2"] .s-note--info { background: var(--brand-50); color: var(--brand-900); } [data-sailoros="v2"] .s-note--success { background: var(--success-50); color: var(--success-600); } [data-sailoros="v2"] .s-note--warning { background: var(--warning-50); color: var(--warning-600); } [data-sailoros="v2"] .s-note--danger { background: var(--danger-50); color: var(--danger-600); } /* §1 паттернов: пустая выдача обязана назвать виновный фильтр и дать снять его */ [data-sailoros="v2"] .s-empty { text-align: center; padding: var(--space-12) var(--space-6); color: var(--ink-500); } [data-sailoros="v2"] .s-empty__title { font-size: var(--text-h3); font-weight: var(--weight-h3); color: var(--ink-900); margin-bottom: var(--space-2); } /* ===== 14. Панель фильтров =============================================== */ [data-sailoros="v2"] .s-filters { width: var(--filters-col); display: flex; flex-direction: column; gap: var(--space-6); } [data-sailoros="v2"] .s-filters__group { display: flex; flex-direction: column; gap: var(--space-3); } [data-sailoros="v2"] .s-filters__title { font-size: var(--text-overline); line-height: var(--leading-overline); font-weight: var(--weight-overline); letter-spacing: var(--tracking-overline); text-transform: uppercase; color: var(--ink-500); display: flex; align-items: center; justify-content: space-between; cursor: pointer; } /* §14: нулевое значение показывается отключённым, но НЕ скрывается */ [data-sailoros="v2"] .s-filters__option--empty { opacity: .4; pointer-events: none; } [data-sailoros="v2"] .s-filters__count { color: var(--ink-500); font-variant-numeric: tabular-nums; } /* Мобильный: кнопка «Фильтры (N)» и панель снизу на 90% высоты с закреплённой кнопкой «Показать N вакансий» — число обновляется до применения */ [data-sailoros="v2"] .s-filters-sheet { position: fixed; left: 0; right: 0; bottom: 0; height: 90vh; background: var(--bg-000); border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; transition: transform var(--motion-panel) var(--ease-panel); } [data-sailoros="v2"] .s-filters-sheet__body { flex: 1; overflow-y: auto; padding: var(--space-4); } [data-sailoros="v2"] .s-filters-sheet__footer { padding: var(--space-4); border-top: 1px solid var(--line-300); } @media (max-width: 1023px) { [data-sailoros="v2"] .s-filters { width: auto; } } /* ===== 15. Навигация ===================================================== */ [data-sailoros="v2"] .s-header { position: sticky; top: 0; z-index: 10; height: 64px; background: var(--bg-000); border-bottom: 1px solid var(--line-300); display: flex; align-items: center; gap: var(--space-6); } [data-sailoros="v2"] .s-header__nav { display: flex; align-items: center; gap: var(--space-6); } [data-sailoros="v2"] .s-header__link { color: var(--ink-700); padding: 0 0 var(--space-1); } [data-sailoros="v2"] .s-header__link:hover { text-decoration: none; color: var(--brand-600); } [data-sailoros="v2"] .s-header__link--active { color: var(--brand-600); box-shadow: inset 0 -2px 0 0 var(--brand-600); } [data-sailoros="v2"] .s-header__actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); } [data-sailoros="v2"] .s-header__burger { display: none; } /* §15: мобильная шапка — логотип, поиск, гамбургер. Пять пунктов меню и правые действия на узком экране не помещаются и распирают страницу горизонтально */ @media (max-width: 640px) { [data-sailoros="v2"] .s-header { height: 56px; gap: var(--space-3); } [data-sailoros="v2"] .s-header__nav, [data-sailoros="v2"] .s-header__actions { display: none; } [data-sailoros="v2"] .s-header__burger { display: inline-flex; margin-left: auto; } } /* Хлебные крошки: последний элемент не ссылка, разделитель «›» */ [data-sailoros="v2"] .s-crumbs { font-size: var(--text-caption); color: var(--ink-500); display: flex; gap: var(--space-2); flex-wrap: wrap; } [data-sailoros="v2"] .s-crumbs li + li::before { content: "›"; margin-right: var(--space-2); color: var(--ink-400); } [data-sailoros="v2"] .s-crumbs { list-style: none; padding: 0; margin: 0; } /* Табы: не более пяти, иначе список */ [data-sailoros="v2"] .s-tabs { display: flex; gap: var(--space-6); border-bottom: 1px solid var(--line-300); } [data-sailoros="v2"] .s-tab { padding: var(--space-3) 0; color: var(--ink-700); background: none; border: 0; font: inherit; cursor: pointer; } [data-sailoros="v2"] .s-tab--active { color: var(--brand-600); box-shadow: inset 0 -2px 0 0 var(--brand-600); } /* Подвал: четыре колонки */ [data-sailoros="v2"] .s-footer { background: var(--bg-000); border-top: 1px solid var(--line-300); padding: var(--space-12) 0 var(--space-8); } [data-sailoros="v2"] .s-footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-8); } @media (max-width: 640px) { [data-sailoros="v2"] .s-footer__cols { grid-template-columns: 1fr 1fr; gap: var(--space-6); } } /* ===== 16. Гейт доступа, уведомление, модальное окно ===================== */ /* §16: гейт НЕ прячет структуру — человек видит, что данные есть, и понимает, как их получить */ [data-sailoros="v2"] .s-gate { background: var(--brand-50); border-radius: var(--radius-md); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); } [data-sailoros="v2"] .s-gate__title { font-size: var(--text-h3); line-height: var(--leading-h3); font-weight: var(--weight-h3); } [data-sailoros="v2"] .s-gate__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; } /* Тёмная плашка: светлая терялась бы на карточках. Один тост одновременно */ [data-sailoros="v2"] .s-toast { position: fixed; bottom: var(--space-6); right: var(--space-6); z-index: 50; background: var(--ink-900); color: #FFFFFF; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); box-shadow: var(--shadow-md); font-size: var(--text-body); animation: s-toast-in var(--motion-toast) var(--ease-panel); } @media (max-width: 640px) { [data-sailoros="v2"] .s-toast { left: var(--space-4); right: var(--space-4); bottom: var(--space-4); text-align: center; } } @keyframes s-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } [data-sailoros="v2"] .s-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, .4); z-index: 40; } [data-sailoros="v2"] .s-modal { max-width: 560px; width: 100%; background: var(--bg-000); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: var(--space-6); } /* §16: опасная кнопка справа, отмена слева */ [data-sailoros="v2"] .s-modal__actions { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-6); } @media (max-width: 640px) { [data-sailoros="v2"] .s-modal { position: fixed; left: 0; right: 0; bottom: 0; max-width: none; border-radius: var(--radius-xl) var(--radius-xl) 0 0; } } /* ===== 19. Прогресс заполнения профиля =================================== */ /* Процент никогда не идёт без объявленной цены следующего шага */ [data-sailoros="v2"] .s-progress { height: 8px; border-radius: var(--radius-full); background: var(--line-200); overflow: hidden; } [data-sailoros="v2"] .s-progress__fill { height: 100%; background: var(--brand-600); border-radius: var(--radius-full); } [data-sailoros="v2"] .s-progress-note { font-size: var(--text-caption); color: var(--ink-500); margin-top: var(--space-2); } /* ===== 18. Загрузка ======================================================= */ /* §18: скелет повторяет форму содержимого, мерцание 1.5 с. Список при смене фильтров не заменяется пустым экраном — старое приглушается до 0.35, поверх ложится скелет */ [data-sailoros="v2"] .s-skeleton { background: var(--line-200); border-radius: var(--radius-sm); height: var(--leading-body); animation: s-pulse 1.5s ease-in-out infinite; } [data-sailoros="v2"] .s-list--loading { opacity: .35; } @keyframes s-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }