// 01 DESIGN TOKENS · CSS variables

## Design tokens

Базовый набор CSS-переменных для всех баннеров. Положи в свой `:root` или используй namespace через класс. Совпадает с tokens из `app-screens.html` — единая система.

Tokens · :root CSS · 28 переменных
Цвета, glass-материал, accent, radius scale. Light-тема — override этих vars в `[data-theme="light"]` или `@media (prefers-color-scheme: light)`.

    :root {
      /* Background */
      --bg-primary: #181819;
      --bg-secondary: #0F0F10;

      /* Glass surface */
      --glass-bg: rgba(255, 255, 255, 0.05);
      --glass-bg-strong: rgba(255, 255, 255, 0.08);
      --glass-border: rgba(255, 255, 255, 0.12);
      --glass-border-strong: rgba(255, 255, 255, 0.22);
      --glass-highlight: rgba(255, 255, 255, 0.35);

      /* Brand accent */
      --accent-cyan: #54C4CE;
      --accent-cyan-soft: rgba(84, 196, 206, 0.25);
      --accent-cyan-text-on: #0E2A2C;

      /* Text */
      --text-primary: #FFFFFF;
      --text-secondary: rgba(255, 255, 255, 0.72);
      --text-tertiary: #9CA3AF;
      --text-muted: rgba(255, 255, 255, 0.45);

      /* Radius scale */
      --r-sm: 10px;
      --r-md: 14px;
      --r-lg: 18px;
      --r-xl: 24px;
      --r-pill: 999px;

      /* Typography */
      --font-sans: 'Manrope', system-ui, sans-serif;
      --font-mono: 'JetBrains Mono', monospace;
    }

// 02 PLUS BANNERS · 3 формата (mp4)

## PLUS Banners — анимированные mp4

Premium liquid-glass с динамическим свечением. 3 размера strip под breakpoints апп. Используются как PLUS-апсейл на /settings, hero на /subscriptions, лендинг-маркетинг. Загрузка через `<video muted loop autoplay playsinline>`.

Базовый CSS-класс .plus-banner + модификаторы
Один общий класс с aspect-ratio модификаторами под каждый breakpoint. `object-fit:cover` + `aspect-ratio` убирают letterbox при сжатии viewport.

    .plus-banner {
      display: block;
      width: 100%;
      max-width: 100%;
      height: auto;
      object-fit: cover;
      background: var(--bg-primary);
    }
    .plus-banner--mobile  { aspect-ratio: 393 / 180;  max-width: 393px; border-radius: var(--r-lg); }
    .plus-banner--tablet  { aspect-ratio: 768 / 261;  max-width: 768px; border-radius: var(--r-xl); }
    .plus-banner--desktop { aspect-ratio: 1200 / 260; max-width: 1200px; border-radius: 28px; }

PLUS · Mobile 393 × 180 · ~2.18:1 · mp4 (89 KB)
Mini App в Telegram (mobile viewport). PLUS-баннер на /settings, /profile.

    <video class="plus-banner plus-banner--mobile"
           src="/assets/banners/banner-mobile-393x180.mp4"
           muted loop autoplay playsinline></video>

Скачать: ↓ banner-mobile-393x180.mp4 источник: banner-mobile-9x16.mp4 (1080×1920 archive)
PLUS · Tablet 768 × 261 · ~2.94:1 · mp4 (495 KB)
Tablet breakpoint (640px ≤ width < 1024px). Auto-play, gradient liquid + cyan glow.

    <video class="plus-banner plus-banner--tablet"
           src="/assets/banners/banner-tablet-768x261.mp4"
           muted loop autoplay playsinline></video>

Скачать: ↓ banner-tablet-768x261.mp4 источник: banner-tablet-16x9.mp4 (1920×1080 archive)
PLUS · Desktop 1200 × 260 · ~4.6:1 · mp4 (1.3 MB)
Desktop breakpoint (width ≥ 1024px). Full desktop strip, content max-width 1120px.

    <video class="plus-banner plus-banner--desktop"
           src="/assets/banners/banner-desktop-1200x260.mp4"
           muted loop autoplay playsinline></video>

Скачать: ↓ banner-desktop-1200x260.mp4 источник: banner-desktop-16x9.mp4 (1920×1080 archive)
// 03 RELEASE NOTES · 3 формата (HTML/CSS)

## Release Notes Banners — HTML/CSS

«Что нового» — info-баннер для анонса релиза. Чистый HTML+CSS (без JS), liquid-glass + ambient blob-анимация + дышащая cyan accent-line. Два варианта интеграции: iframe-embed (быстро, как готовый компонент) или inline markup (вставить разметку напрямую и параметризовать).

Release Notes · Mobile 393 × 180 · ~2.18:1 · HTML
Mini App, mobile viewport. Vertical stack: chip → title → 4 фичи в 2×2.

    <iframe class="release-banner release-banner--mobile"
            src="/assets/banners/release-notes-mobile.html"></iframe>

    export function ReleaseNotesBanner({ size = "mobile" }) {
      return (
        <iframe
          className={`release-banner release-banner--${size}`}
          src={`/assets/banners/release-notes-${size}.html`}
        />
      );
    }

Скачать / открыть: ↓ release-notes-mobile.html открыть ↗ EN: release-notes-mobile-en.html
Release Notes · Tablet 768 × 261 · ~2.94:1 · HTML
Tablet breakpoint. Горизонтальная компоновка: chip + заголовок 42px слева, фичи 2×2 справа.

    <iframe class="release-banner release-banner--tablet"
            src="/assets/banners/release-notes-tablet.html"></iframe>

Скачать / открыть: ↓ release-notes-tablet.html открыть ↗ EN: release-notes-tablet-en.html
Release Notes · Desktop 1200 × 260 · ~4.6:1 · HTML
Desktop breakpoint. То же что у tablet, но шире и заголовок 56px. Hero release-анонс на /home или /news.

    <iframe class="release-banner release-banner--desktop"
            src="/assets/banners/release-notes-desktop.html"></iframe>

Скачать / открыть: ↓ release-notes-desktop.html открыть ↗ EN: release-notes-desktop-en.html
Базовый CSS-класс для iframe-embed .release-banner + модификаторы
Тот же подход что у PLUS: один класс с aspect-ratio. Iframe не имеет letterbox при сжатии за счёт `aspect-ratio + height:auto`.

    .release-banner {
      display: block;
      width: 100%;
      max-width: 100%;
      height: auto;
      border: 0;
      background: var(--bg-primary);
    }
    .release-banner--mobile  { aspect-ratio: 393 / 180;  max-width: 393px; border-radius: var(--r-lg); }
    .release-banner--tablet  { aspect-ratio: 768 / 261;  max-width: 768px; border-radius: var(--r-xl); }
    .release-banner--desktop { aspect-ratio: 1200 / 260; max-width: 1200px; border-radius: 28px; }

// 04 REACT/VUE · готовые обёртки

## React / Vue обёртки

Готовые компоненты с responsive-логикой через `matchMedia`: автоматически выбирают нужный формат под текущий viewport. Работают и для PLUS-видео, и для Release Notes-iframe.

PlusBanner.tsx (React) responsive · 1 компонент, 3 размера
Хук `useBreakpoint()` определяет mobile/tablet/desktop, рендерит соответствующий mp4. Mp4 файлы должны лежать в `/public/assets/banners/`.

    import { useEffect, useState } from 'react';

    type Breakpoint = 'mobile' | 'tablet' | 'desktop';

    function useBreakpoint(): Breakpoint {
      const [bp, setBp] = useState<Breakpoint>('desktop');
      useEffect(() => {
        const m = window.matchMedia('(max-width: 639px)');
        const t = window.matchMedia('(max-width: 1023px)');
        const apply = () => setBp(m.matches ? 'mobile' : t.matches ? 'tablet' : 'desktop');
        apply();
        m.addEventListener('change', apply);
        t.addEventListener('change', apply);
        return () => {
          m.removeEventListener('change', apply);
          t.removeEventListener('change', apply);
        };
      }, []);
      return bp;
    }

    const SIZES = {
      mobile:  { file: 'banner-mobile-393x180.mp4',  w: 393,  h: 180 },
      tablet:  { file: 'banner-tablet-768x261.mp4',  w: 768,  h: 261 },
      desktop: { file: 'banner-desktop-1200x260.mp4', w: 1200, h: 260 },
    } as const;

    export function PlusBanner() {
      const bp = useBreakpoint();
      const cfg = SIZES[bp];
      return (
        <video
          key={bp}
          className={`plus-banner plus-banner--${bp}`}
          src={`/assets/banners/${cfg.file}`}
          muted loop autoPlay playsInline
        />
      );
    }

ReleaseNotesBanner.tsx (React) responsive iframe embed · locale-aware
Берёт RU или EN HTML-вариант на основе `locale` пропа. Размер тот же breakpoint-driven подход.

    type Locale = 'ru' | 'en';

    export function ReleaseNotesBanner({ locale = 'ru' }: { locale?: Locale }) {
      const bp = useBreakpoint();
      const suffix = locale === 'en' ? '-en' : '';
      return (
        <iframe
          key={`${bp}-${locale}`}
          className={`release-banner release-banner--${bp}`}
          src={`/assets/banners/release-notes-${bp}${suffix}.html`}
          title="Release notes"
        />
      );
    }

// 05 FILES MANIFEST · что и куда

## Files manifest

Список всех ассетов баннеров с относительными путями от корня `brandbook-public/`. Скачай нужное и положи в `/public/assets/banners/` своего проекта.

Файл | Тип | Размер | Назначение |
--- | --- | --- | --- | ---
banner-mobile-393x180.mp4 | mp4 · h264 | 393×180 · 89 KB | PLUS · mobile | ↓
banner-tablet-768x261.mp4 | mp4 · h264 | 768×260 · 495 KB | PLUS · tablet | ↓
banner-desktop-1200x260.mp4 | mp4 · h264 | 1200×260 · 1.3 MB | PLUS · desktop | ↓
banner-mobile-9x16.mp4 | mp4 · archive | 1080×1920 | archive (исходный hero) | ↓
banner-tablet-16x9.mp4 | mp4 · archive | 1920×1080 | archive (исходный hero) | ↓
banner-desktop-16x9.mp4 | mp4 · archive | 1920×1080 | archive (исходный hero) | ↓
banners/release-notes-mobile.html | html · self-contained | 393×180 | Release notes · mobile · RU | ↓
banners/release-notes-tablet.html | html · self-contained | 768×261 | Release notes · tablet · RU | ↓
banners/release-notes-desktop.html | html · self-contained | 1200×260 | Release notes · desktop · RU | ↓
banners/release-notes-mobile-en.html | html · self-contained | 393×180 | Release notes · mobile · EN | ↓
banners/release-notes-tablet-en.html | html · self-contained | 768×261 | Release notes · tablet · EN | ↓
banners/release-notes-desktop-en.html | html · self-contained | 1200×260 | Release notes · desktop · EN | ↓

↳ Quick start:

1. Скачай 9 основных файлов (3 mp4 strip + 6 HTML) → положи в `/public/assets/banners/`
2. Скопируй CSS-блок с tokens и базовыми классами `.plus-banner` / `.release-banner`
3. Импортируй `PlusBanner` / `ReleaseNotesBanner` компоненты или используй HTML-сниппеты напрямую
4. Если нужен другой текст в Release Notes — отредактируй HTML-файлы или попроси нас параметризовать (template-version)