/* ============================================================ Каркас: сетка страницы, сайдбар, шапка, модалки, всплывающие слои, тосты. Только здесь задаются z-index (см. шкалу в base.css). ============================================================ */ /* ---------------- Сетка страницы ---------------- Документ прокручивается сам. Никакой стеклянной рамки с blur вокруг — она делала бы себя контейнером для всех fixed-слоёв и обрезала подложки. */ /* Сетка — на обёртке, а не на : диалоги и тосты лежат в рядом с ней, и как grid-элементы они теряли бы центровку через margin: auto. */ .app { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; } @media (min-width: 1024px) { .app { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); } } .skip-link { position: absolute; top: 8px; left: 8px; z-index: var(--z-toast); padding: 10px 16px; border-radius: var(--r-sm); background: var(--brand); color: #fff; font-weight: 600; transform: translateY(-200%); } .skip-link:focus { transform: none; } /* ---------------- Сайдбар ---------------- */ .sidebar { display: flex; flex-direction: column; gap: 4px; background: var(--white); color: var(--dark); padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } /* Уже lg — выезжающая панель поверх содержимого. */ @media (max-width: 1023.98px) { .sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: var(--z-drawer); width: min(320px, 86vw); height: 100vh; height: 100dvh; border-radius: 0 var(--r-lg) var(--r-lg) 0; box-shadow: var(--shadow); translate: -100% 0; visibility: hidden; transition: translate 0.25s ease, visibility 0s linear 0.25s; padding-top: calc(18px + env(safe-area-inset-top)); } .sidebar[data-open] { translate: none; visibility: visible; transition: translate 0.25s ease; } } /* От lg — колонка сетки, липнет к верху, высотой в окно. */ @media (min-width: 1024px) { .sidebar { position: sticky; top: 16px; height: calc(100vh - 32px); height: calc(100dvh - 32px); margin: 16px 0 16px 16px; border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 22px 18px; } } .sidebar-overlay { position: fixed; inset: 0; z-index: var(--z-overlay); background: var(--scrim); } @media (min-width: 1024px) { .sidebar-overlay { display: none !important; } } .sidebar__top { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; } .sidebar__logo { display: flex; align-items: center; gap: 10px; font-size: 1.5rem; font-weight: 700; padding: 4px 6px; border-radius: var(--r-sm); flex: 1; min-width: 0; } .sidebar__logo-mark { width: 30px; height: 30px; color: var(--brand); } /* Специфичность выше .icon-btn из components.css — иначе он перебьёт display. */ .icon-btn.sidebar__close { display: none; } @media (max-width: 1023.98px) { .icon-btn.sidebar__close { display: inline-flex; } } .nav-section { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray-5); margin: 16px 8px 8px; } .nav-item { display: flex; align-items: center; gap: 12px; min-height: var(--h-ctl); padding: 8px 14px; border-radius: var(--r-md); font-size: var(--fs-base); font-weight: 500; color: var(--dark); transition: background 0.15s ease; } .nav-item:hover { background: var(--gray-2); } .nav-item.active { background: var(--brand); color: #fff; } .nav-item .icon { width: 19px; height: 19px; } .nav-sub { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; } .nav-sub .nav-item { min-height: var(--h-ctl-sm); font-size: var(--fs-md); padding: 6px 14px; } .nav-sub .nav-item .icon { width: 17px; height: 17px; } .sidebar__hint { padding: 10px 8px 0; font-size: var(--fs-md); color: var(--gray-5); } .sidebar__quota { padding: 14px 8px 0; } .sidebar__footer { margin-top: auto; padding-top: 16px; } /* ---------------- Колонка содержимого ---------------- */ .main { display: flex; flex-direction: column; min-width: 0; padding: 0 12px calc(24px + env(safe-area-inset-bottom)); } @media (min-width: 640px) { .main { padding: 0 20px 28px; } } @media (min-width: 1024px) { .main { padding: 0 24px 28px 20px; } } .content { display: flex; flex-direction: column; min-width: 0; } .content > * + * { margin-top: var(--gap); } .content > .mb-3 + * { margin-top: 0; } /* ---------------- Шапка ---------------- */ .topbar { display: flex; align-items: center; gap: 10px; min-height: var(--topbar-h); padding: 10px 0; } /* На телефоне шапка липнет к верху: бургер всегда под рукой. Размытие тут допустимо — внутри шапки нет всплывающих меню. */ @media (max-width: 1023.98px) { .topbar { position: sticky; top: 0; z-index: var(--z-sticky); margin: 0 -12px; padding: calc(8px + env(safe-area-inset-top)) 12px 8px; background: color-mix(in srgb, var(--bg) 80%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } } @media (min-width: 640px) and (max-width: 1023.98px) { .topbar { margin: 0 -20px; padding-left: 20px; padding-right: 20px; } } @media (min-width: 1024px) { .topbar { min-height: 76px; padding: 22px 0 14px; gap: 14px; } } .topbar__text { min-width: 0; flex: 1 1 auto; } .topbar__title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: var(--fs-xl); font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; } @media (min-width: 640px) { .topbar__title { font-size: var(--fs-2xl); } } @media (min-width: 1024px) { .topbar__title { font-size: var(--fs-3xl); } } .topbar__title .tone { font-size: var(--fs-xs); } .topbar__subtitle { color: var(--gray-6); font-size: var(--fs-md); margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .topbar__tools { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .icon-btn.burger { display: inline-flex; } @media (min-width: 1024px) { .icon-btn.burger { display: none; } } .tzchip { display: none; align-items: center; gap: 8px; height: var(--h-ctl); padding: 0 14px; border-radius: var(--r-pill); background: var(--white); color: var(--gray-6); font-size: var(--fs-sm); font-weight: 600; cursor: default; box-shadow: var(--shadow-sm); } @media (min-width: 640px) { .tzchip { display: inline-flex; } } /* ---------------- Модальные окна ---------------- Нативный