12 · Academy Premium Body Pattern¶

Зачем¶

Apruvено CEO 2026-05-10 после 5 итераций (bg-a → a2 → a3 → light-v1 → compact-fit v1) на эталоне academy/dashboard.html. Замена plain var(--bg-secondary) body + var(--bg-primary) blocks → premium «не консольная страница» через depth (gradient body) + subtle разница body↔блоки в одной warm gamma + compact-fit для CEO viewport.

Применять ко всем экранам академии (academy/*.html): dashboard, courses, lesson-viewer, profile, login, onboarding, certificate, billing, settings, lesson-completed, lesson-quiz, receipt, saved-cards.

6 принципов · CSS снипеты¶

1. Body — gradient вместо plain (depth)¶

[data-theme="dark"] body {
  background: linear-gradient(180deg, #1C1C22 0%, #0E0E12 100%);
  background-attachment: fixed;
}
[data-theme="light"] body {
  background: linear-gradient(180deg, #FAFAF7 0%, #F0ECE0 100%);
  background-attachment: fixed;
}

background-attachment: fixed обязательно — gradient не скроллится с контентом, остаётся как холст.

2. Блоки — subtle разница от body (одна warm gamma)¶

Theme	Body bottom	Blocks	Δ
Dark	`#0E0E12`	`#0C0C12`	-2 пункта (темнее)
Light	`#F0ECE0`	`#FFFCF6`	вверх к white (premium «приподнятые cards»)

[data-theme="dark"] .dashboard-hero-action,
[data-theme="dark"] .dashboard-hero-stat,
[data-theme="dark"] .course-card,
[data-theme="dark"] .syndicate-nudge-row,
[data-theme="dark"] section .grid > aside > div.border {
  background: #0C0C12;
}
[data-theme="light"] .dashboard-hero-action,
[data-theme="light"] .dashboard-hero-stat,
[data-theme="light"] .course-card,
[data-theme="light"] .syndicate-nudge-row,
[data-theme="light"] section .grid > aside > div.border {
  background: #FFFCF6;
}

Direction разный (dark — блоки темнее body, light — светлее), логика «subtle разница без яркого контраста» — общая. Цвета остаются в warm gamma (не gray на cream — это chaotic).

3. Activity panel — flex stretch для симметрии¶

section .grid > aside { display: flex; flex-direction: column; }
section .grid > aside > div.border { flex: 1 1 auto; }

Bordered контейнер активности растягивается на высоту левой колонки — рамка симметрична. Без этого справа внизу было пустое место.

4. Activity hover — как Syndicate nudge (interactive feel)¶

section .grid > aside > div.border {
  transition: border-color 200ms ease;
}
[data-theme="dark"] section .grid > aside > div.border:hover {
  border-color: rgba(235,197,84,0.40);
}
[data-theme="light"] section .grid > aside > div.border:hover {
  border-color: rgba(153,128,24,0.40);
}

Dark — amber 40% / Light — deep bronze 40%. Зеркало hover'а .syndicate-nudge-row внизу.

5. Compact tier chip — `● L0` (dot indicator + tier label only)¶

.eco-status-chip {
  padding: 4px 10px !important;
  gap: 0 !important;
}
.eco-status-chip::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22C55E;
  margin-right: 6px;
  box-shadow: 0 0 8px rgba(34,197,94,0.6);
  vertical-align: middle;
  position: static;
}

HTML: <span class="eco-status-chip" id="user-tier-chip">L0</span> (без « · АКТИВЕН»)

JS: chipEl.textContent = tier; (без активного label — green dot indicator слева заменяет «АКТИВЕН» текст)

Why: chip L0 · АКТИВЕН (~140px) → ● L0 (~50px) = экономия ~80px ширины header. CEO 2026-05-10 на Waterfox setup: «иконка пользователя справа в углу вообще не видна почти» — поиск ⌘K SEARCH перекрывал profile icon. После compact chip — search влезает + profile icon видна полностью.

6. Responsive compact-fold — media query для viewports ≤ 920px¶

@media (max-height: 920px) {
  section.max-w-\[1400px\].py-2 { padding-top: 4px; padding-bottom: 4px; }
  .dashboard-hero-row { gap: 16px; margin-bottom: 12px; }
  section .grid.gap-6 { gap: 16px; }
  section .syndicate-nudge-row {
    margin-top: 14px;
    padding: 12px 22px;
  }
  .activity-row { padding: 6px 0; }
}

Why: CEO Waterfox setup на MacBook (1440×900 logical, content area ~770-790px из-за bookmarks bar + dock) даёт scroll 10-30px на dashboard. Media query уплотняет gap/padding только для viewports ≤ 920px → fit без scroll. На 14"/16"/external/4K мониторах (height > 920px) — стандартный spacing, не cramped feel. Шрифты, размеры блоков, paddings внутри блоков НЕ трогаем — читаемость одна для всех viewport tier'ов.

Какие селекторы блоков попадают под pattern¶

При расширении на новые academy экраны — заменить var(--bg-primary) / var(--bg-secondary) / Tailwind bg-bg-secondary на цвета pattern для всех:

.dashboard-hero-action (canonical hero card)
.dashboard-hero-stat (canonical stats grid)
.course-card (course list cards)
.syndicate-nudge-row (bottom CTA strip)
Activity bordered panel (aside > div.border)
Page-specific equivalents (.lesson-content / .lesson-sidebar / .profile-acc / .cert-card etc.)

Эталон + apruv-trail¶

academy/dashboard.html — apruvено CEO 2026-05-10 после 5 итераций:

#	Что	CEO feedback
bg-a	Warm Gray gradient `#16161A → #0B0B0D` + activity stretch	«утверждаем · очень крутая логика»
bg-a2	gradient чуть светлее `#1C1C22 → #0E0E12` + activity hover	принято
bg-a3	block bg `#0C0C12` (убрал «ярко-чёрные квадраты»)	«отлично. фиксируем»
light-v1	cream gradient `#FAFAF7 → #F0ECE0` + warm-white blocks `#FFFCF6` + bronze hover	«сейчас все идеально»
compact-fit v1	chip `● L0` (compact) + media query ≤ 920px (fit под CEO viewport)	«идеально. так и фиксируем»

Anti-patterns¶

❌ Plain solid body bg в академии (отсутствует depth — «консольная страница» feel)
❌ Pure white blocks #FFFFFF на cream body в light (слишком яркий контраст)
❌ Gray blocks #F5F5F5 на cream body (разные gamma — chaotic)
❌ Ярко-чёрные blocks #080808 на gradient body в dark
❌ Activity panel без flex stretch (несимметрия с длинной левой колонкой)
❌ Activity без hover (мёртвый блок)
❌ Замена цветов pattern на gray/cool оттенки (теряется warm GOLDJAXE feel)
❌ Chip L0 · АКТИВЕН (длинный текст) — забирает 80px width header → search/profile icon обрезаются на CEO viewport
❌ Уплотнение шрифтов / paddings внутри блоков для compact-fit (читаемость страдает на всех viewport tier'ах)
❌ Глобальное уплотнение без media query (cramped feel на 14"/16"/external)

Применение на новом academy экране (workflow)¶

Скопировать 6 CSS блоков выше из эталона dashboard.html в <style> нового экрана (принципы 1-6)
Расширить selector list блоков под page-specific классы (если экран использует свои контейнеры)
Заменить HTML chip text L0 · АКТИВЕН на L0 (или для другого tier — без · АКТИВЕН)
В JS убрать ' · ' + activeLabel из textContent установки user-tier-chip
Visual check обеих тем (light + dark) через headless Chrome или preview MCP
Visual check на CEO viewport ≤ 920px — chip ● L0 + media query должны давать fit без scroll
WCAG AA проверить контраст body↔text + blocks↔text + hover пар
Сравнить с эталоном dashboard.html (рядом, side-by-side)
Bump VERSION patch (academy экран — vX.Y.Z+1 patch) + CHANGELOG entry

Re-entry якорь¶

«прочти контекст academy-premium-body» или «academy bg pattern»

Скил перечитывает этот файл целиком + смотрит эталон academy/dashboard.html.