/* ============================================================================ Каркас приложения: шапка, навигация, сетки страниц, правая панель. Здесь только расположение. Внешний вид элементов внутри — в components.css. ============================================================================ */ /* ================================================================== оболочка */ .shell { display: flex; flex-direction: column; min-height: 100vh; } .shell__main { flex: 1; padding: var(--space-6) 0 var(--space-12); } /* Общая рабочая ширина. Разжата до 1600px, потому что главный экран — таблица лидов на десяток столбцов: на 1180px она либо ужимается до нечитаемого, либо уезжает в горизонтальную прокрутку. */ .wrap { width: 100%; max-width: var(--shell-max); margin: 0 auto; padding: 0 var(--space-7); } /* ==================================================================== шапка Прилипает: навигация и поиск нужны в любой момент, а не только наверху страницы. Полупрозрачность с размытием — чтобы уехавшее под шапку содержимое читалось как «уехало», а не обрывалось. */ .topbar { position: sticky; top: 0; z-index: var(--z-sticky); background: color-mix(in srgb, var(--bg-surface) 88%, transparent); backdrop-filter: saturate(1.6) blur(10px); border-bottom: 1px solid var(--line); } .topbar__inner { display: flex; align-items: center; gap: var(--space-6); height: var(--shell-header); } .brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--fg); font-size: var(--text-lg); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); flex: none; } .brand:hover { color: var(--fg); } .brand__mark { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-md); background: var(--accent); color: var(--accent-on); } /* Поиск занимает свободное место между логотипом и навигацией, но не растягивается бесконечно: поле в 700px выглядит ошибкой вёрстки. */ .topbar__search { flex: 1 1 auto; max-width: 380px; } .nav { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; } .nav__link { display: inline-flex; align-items: center; gap: var(--space-2); height: 34px; padding: 0 var(--space-4); border-radius: var(--radius-md); color: var(--fg-muted); font-size: var(--text-sm); font-weight: var(--weight-medium); white-space: nowrap; transition: color var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out); } .nav__link:hover { color: var(--fg); background: var(--bg-hover); } /* Текущий раздел — цветом И жирностью. Одного цвета мало: раздел должен считываться боковым зрением, не вчитываясь. */ .nav__link[aria-current="page"] { color: var(--accent-fg); font-weight: var(--weight-semi); background: var(--accent-soft); } /* Метка «есть новое» у раздела. Точка, а не число: точное количество здесь не нужно, а число заставляет его прочитать. */ .nav__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .topbar__user { flex: none; } /* ============================================================== хлебные крошки Отвечают на «где я и как вернуться». Последний элемент — текущая страница, не ссылка. */ .crumbs { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-5) 0 0; color: var(--fg-muted); font-size: var(--text-xs); flex-wrap: wrap; } .crumbs__sep { color: var(--line-strong); } .crumbs a { color: var(--fg-muted); } .crumbs a:hover { color: var(--accent-fg); } .crumbs__current { color: var(--fg-soft); font-weight: var(--weight-medium); } /* ============================================================ шапка страницы */ .page-head { display: flex; align-items: flex-start; gap: var(--space-6); flex-wrap: wrap; margin: var(--space-5) 0 var(--space-6); } .page-head__body { min-width: 0; display: grid; gap: var(--space-3); } .page-head__title { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; font-size: var(--text-2xl); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); } .page-head__sub { color: var(--fg-muted); font-size: var(--text-sm); } .page-head__actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } /* ==================================================================== сетки */ /* Вертикальная стопка блоков страницы — самый частый случай. minmax(0, 1fr), а не 1fr: у элемента сетки минимальная ширина по умолчанию равна ширине содержимого, и он ОТКАЗЫВАЕТСЯ сжиматься. Широкая таблица внутри карточки тогда распирает карточку, карточка — страницу, и весь документ уезжает в горизонтальную прокрутку вместе с шапкой. Полоса прокрутки при этом появляется не у таблицы, где ей место, а у всей страницы. */ .stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); } .stack--tight { gap: var(--space-4); } .stack--loose { gap: var(--space-7); } /* Ряд KPI-плиток. auto-fit, а не фиксированные четыре колонки: на узком экране плитки перестраиваются сами, без отдельного медиазапроса. */ .kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-5); } /* Панель фильтров: поля разной ширины, переносятся по мере надобности. */ .filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-4); align-items: end; } .filters__wide { grid-column: span 2; } .filters__actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; grid-column: 1 / -1; } .filters__actions--end { justify-content: flex-end; } @media (max-width: 720px) { .filters__wide { grid-column: auto; } } /* ------------------------------------------------- карточка лида: три колонки Слева справка о компании, в центре работа, справа — с кем и когда. Средняя колонка — единственная резиновая: расширять надо место для текста сообщения, а не для реквизитов. */ .record { display: grid; grid-template-columns: var(--rail-width) minmax(0, 1fr) var(--rail-width); gap: var(--space-5); align-items: start; } .record__rail { display: grid; gap: var(--space-5); min-width: 0; } .record__main { display: grid; gap: var(--space-5); min-width: 0; } /* Боковые колонки едут за экраном: продукт, контакты и следующий шаг нужны, пока правишь текст письма. На узком экране прилипание снимается — иначе колонка съедает половину высоты. */ @media (min-width: 1280px) { .record__rail--sticky { position: sticky; top: calc(var(--shell-header) + var(--space-5)); } } /* Две колонки: правая (с кем и когда) важнее левой (справка), поэтому левая уходит вниз первой. */ @media (max-width: 1279px) { .record { grid-template-columns: minmax(0, 1fr) var(--rail-width); } .record__rail--left { grid-column: 1 / -1; order: 3; } } @media (max-width: 900px) { .record { grid-template-columns: minmax(0, 1fr); } .record__rail--left, .record__rail--right { grid-column: auto; } } /* Список с боковой панелью: таблица лидов + карточка выбранного. */ .with-aside { display: grid; grid-template-columns: minmax(0, 1fr) var(--drawer-width); gap: var(--space-5); align-items: start; } @media (max-width: 1200px) { .with-aside { grid-template-columns: minmax(0, 1fr); } } /* ============================================================= правая панель Сводка по выбранному лиду. На широком экране — колонка в потоке (список рядом остаётся виден и кликабелен). На узком — накрывающая панель, потому что колонка в 380px не оставила бы таблице места. Панель —