* { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #1b1b18; background: #eef1f6; } .block-label { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #97a0ad; } .layout { min-height: 100vh; } /* VK Mini App (games/__vk_puzzlum, см. docs/INTEGRATIONS.md) грузит страницу в iframe ФИКСИРОВАННОЙ высоты и не пробрасывает скролл документа дальше самого iframe — обычная схема этой вёрстки (скролл всей страницы через body/html) внутри VK не работает: контент просто обрезается по границе iframe. Класс .vk-embed (ставится на , см. PuzzlumRoute::isVkContext() в каждой вьюхе Пазлум) превращает раскладку в классический "app shell": html/body сами не скроллятся, .layout становится колонкой на всю высоту iframe, а единственная скроллящаяся область — сам .app-main (шапка и бургер-панель остаются на месте, т.к. лежат вне этой прокручиваемой зоны). На обычном сайте (без класса) поведение не меняется — там по-прежнему скроллится обычный document. */ html.vk-embed, html.vk-embed body { height: 100%; overflow: hidden; } html.vk-embed .layout { display: flex; flex-direction: column; height: 100%; min-height: 0; } html.vk-embed .layout-body { flex: 1; min-height: 0; overflow: hidden; } html.vk-embed .app-main { height: 100%; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } .app-header { position: sticky; top: 0; z-index: 20; height: 64px; display: flex; align-items: center; padding: 0 20px; background: #fff; box-shadow: 0 1px 0 rgba(20, 30, 50, 0.08), 0 4px 10px rgba(20, 30, 50, 0.04); } /* Три части шапки в строку (см. docs/MENUS.md): лево (бургер + опциональные кнопки быстрого управления приложения) / центр (лого) / право (пользователь). Левая и правая часть — по равной доле оставшегося места и прижаты каждая к своему краю, тогда центр остаётся ровно по центру независимо от того, насколько левая и правая части отличаются по ширине. */ .app-header-left, .app-header-right { display: flex; align-items: center; flex: 1 1 0; min-width: 0; } .app-header-left { justify-content: flex-start; gap: 10px; } .app-header-right { justify-content: flex-end; } .app-header-center { flex: 0 0 auto; } .header-user-widget { display: flex; align-items: center; justify-content: center; height: 36px; padding: 0 16px; border-radius: 8px; background: #e4e8ef; color: #6b7280; font-size: 13px; font-weight: 600; white-space: nowrap; } .sidebar-burger { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-right: 6px; padding: 0; border: none; border-radius: 8px; background: transparent; color: #1b1b18; cursor: pointer; } .sidebar-burger:hover { background: #f0f2f6; } .sidebar-burger svg { width: 22px; height: 22px; } .sidebar-overlay { display: none; position: fixed; inset: 64px 0 0 0; z-index: 25; background: rgba(15, 20, 30, 0.45); opacity: 0; transition: opacity 0.2s ease; } .sidebar-overlay.is-open { display: block; opacity: 1; } .app-logo { display: flex; align-items: center; gap: 10px; cursor: pointer; text-decoration: none; color: inherit; } .app-logo-icon { width: 34px; height: 34px; flex-shrink: 0; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.15)); transition: transform 0.2s ease; } .app-logo:hover .app-logo-icon { transform: rotate(-8deg) scale(1.08); } .app-logo-text { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; background: linear-gradient(135deg, #ff6b6b, #ffa94d 45%, #4dabf7 75%, #9775fa); -webkit-background-clip: text; background-clip: text; color: transparent; } .layout-body { display: flex; align-items: flex-start; min-height: calc(100vh - 64px); } /* Панель, которую открывает бургер в шапке (см. docs/MENUS.md) — единый для ЛЮБОЙ ширины экрана элемент интерфейса приложения: всегда выезжающая слева панель поверх контента, скрытая по умолчанию (закрыта — за пределами экрана слева), открывается классом .is-open. Не зависит от ширины окна — в этом и есть "единый вид меню для конечных приложений", о котором договорились: на десктопе бургер и эта панель ведут себя точно так же, как на телефоне. Отдельно от неё — .app-desktop-sidebar ниже: самостоятельный, специфичный для Пазлум элемент (полный список категорий, всегда виден на широких экранах), к бургеру отношения не имеющий. max-width:300px делает width:82vw практических неотличимым от фиксированных 300px на любом экране шире ~366px — то есть на десктопе ширина панели такая же, как на мобильном. */ .app-sidebar { position: fixed; top: 64px; left: 0; bottom: 0; z-index: 26; width: 82vw; max-width: 300px; padding: 20px; background: #f3f5f9; box-shadow: 2px 0 12px rgba(20, 30, 50, 0.2); overflow-y: auto; transform: translateX(-100%); transition: transform 0.25s ease; } .app-sidebar.is-open { transform: translateX(0); } /* Самостоятельный десктопный сайдбар Пазлум с полным списком категорий — виден только на широких экранах (см. @media ниже), не связан с бургер-панелью выше и живёт рядом с ней одновременно. */ .app-desktop-sidebar { flex-shrink: 0; width: 240px; padding: 20px; background: #f3f5f9; box-shadow: 1px 0 0 rgba(20, 30, 50, 0.06); /* Липкий сайдбар: остаётся на месте при длинном скролле страницы (см. .app-header — тот же 64px, под которым он "прилипает"), а если список категорий сам выше экрана — не ломает раскладку и не обрезается, а скроллится внутри собственных границ. */ position: sticky; top: 64px; max-height: calc(100vh - 64px); overflow-y: auto; } .sidebar-categories { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; } .sidebar-block-label-spaced { display: block; margin-top: 24px; } .sidebar-category-link { display: block; padding: 9px 12px; border-radius: 8px; font-size: 14px; font-weight: 600; color: #4b5563; text-decoration: none; transition: background 0.15s ease, color 0.15s ease; } .sidebar-category-adult-badge { display: inline-block; margin-left: 4px; padding: 1px 5px; border-radius: 4px; background: #c0392b; color: #fff; font-size: 10px; font-weight: 800; vertical-align: middle; } .sidebar-category-link:hover { background: #e9ecf2; } .sidebar-category-link.is-active { background: #fff; color: #1b1b18; box-shadow: 0 1px 4px rgba(20, 30, 50, 0.1); } .sidebar-nav-spaced { margin-top: 24px; } /* "Все категории" — та же ссылка визуально, но это