# Patterns — marketing-dark-4

Композиция, ритм, mobile-поведение и type-deviations для B2B AdTech-маркетплейс лендинга в honest-flat dark стиле.

## Композиция главной страницы

12 секций, ~9100px полная высота на 1440 viewport.

| # | Section | Role | Bg | Padding (px) | Components |
|---|---|---|---|---|---|
| 0 | Cookie banner | overlay | white | min-h 80, fixed bottom | Text + 2 buttons «Хорошо / Узнать больше» |
| 1 | Header (sticky) | nav | transparent | h 56 | Logo + 6 nav items + «Войти» + «Задать вопрос» pill |
| 2 | Hero | hero | dark #181a1a | pt-pb 100 | H1 (centered, brand-word yellow) + lead + 2 CTAs (primary + secondary) + 4 doodle ornaments |
| 3 | Tier cards | pricing-anchor | dark #181a1a (overlapping hero) | pt 0 pb 80 | 3 white cards: brand-logo cluster + tier name + pastel rainbow strip + discount % + body + CTA |
| 4 | Demo block | feature-showcase | light #fff | pt-pb 80 | Mobile + desktop UI mockups skewed, search input with filter pills, skeleton-loader fade-in |
| 5 | Trust logos | social-proof | light #fff | pt-pb 80 | "С нами работают / 300+ крупнейших" + marquee ticker (logo strip running-string) |
| 6 | Audience | persona | alt-grey #f5f5f5 | pt-pb 80 | "Кому подойдет?" + 4 tab persona-cards (Рекламодателям / Агентствам / In-house / др) |
| 7 | Features carousel | feature-deep | dark #181a1a | pt-pb 80 | "Используйте возможности" + 4-slide swiper with numbered pagination + Previous/Next |
| 8 | Process 3-step | how-it-works | light #fff | pt-pb 80 | "Как начать?" + 3 numbered cards (Заявка → Аккаунт → Закупка) |
| 9 | Advantages | benefits | light #fff | pt-pb 80 | "Оцените все преимущества" + 6 cards (2x3 grid: иконка + title + description) |
| 10 | FAQ | faq | light #fff | pt-pb 80 | "Частые вопросы" + 15 accordion items + «Показать ещё» button |
| 11 | Events | events-calendar | dark #181a1a | pt-pb 80 | "Афиша мероприятий" + day-picker grid + event card отраслевой конференции |
| 12 | Partners certified | trust-deep | light #fff | pt-pb 80 | "Сертифицированные партнёры" + 9 cards grid (крупные RU AdTech-платформы) |
| 13 | CTA-band | cta-final | dark #181a1a | pt-pb 100 | Финальное обещание (короткая декларативная фраза) + 2 CTAs (Попробовать + Стать партнёром) |
| 14 | Newsletter | secondary-cta | dark gradient или solid | pt-pb 60 | "Рассылка" + email input + Подписаться |
| 15 | Footer | footer | dark #181a1a | pt-pb 60 | 5 columns: Продукты / Информация / Полезное / Связаться / соц + copyright |

**Total dark sections:** 5 (hero, features carousel, events, CTA-band, footer)
**Total light sections:** 7 (demo, trust logos, tier cards backdrop, process, advantages, FAQ, partners)
**Total alt-grey sections:** 1 (audience)

---

## Вертикальный ритм

```
80 80 80 80 80 80 80 80 80 80 80 80 100 100 60 60
↑                              ↑    ↑       ↑
"default"                       "huge: hero/CTA"  "footer/newsletter"
```

**Pattern:** дефолт 80px, выделенные секции (hero, events, CTA-band) — 100px, secondary блоки (newsletter, footer) — 60px.

**Section transitions:** резкие, без gradient transitions. Tier cards (#3) — единственное исключение: overlap с hero (стартует на dark, выходит в light), создавая «карточки парят над холмом».

**Внутри секций:**
- `gap` между крупными блоками: 24px / 32px / 44px
- `padding` карточек: 24px / 32px / 36px
- `gap` грид-сеток: 16px (default), 24px (lg)

---

## Grid паттерны

| Section | Grid | Columns | Gap |
|---|---|---|---|
| Tier cards (hero) | `repeat(3, 1fr)` | 3 | 24px |
| Trust logos | `flex` (marquee ticker) | unlimited | 60px |
| Audience tabs | `repeat(4, 1fr)` | 4 | 16px |
| Features carousel | `swiper` | 1 visible / 4 total | 24px between slides |
| Process 3-step | `repeat(3, 1fr)` | 3 | 24px |
| Advantages | `repeat(3, 1fr)` (2 rows) | 3 | 16px |
| FAQ | single column | 1 | 0 (accordion) |
| Reviews (testimonials) | asymmetric `162 162 162 569 162` | 5 (1 large + 4 small) | 16px |
| Partners certified | `repeat(3, 1fr)` (3 rows) | 3 | 24px |
| Footer | `repeat(5, 1fr)` | 5 | 24px |

**Signature asymmetric grid:** `Reviews_desktop_grid` использует `162.656px 162.672px 162.672px 569.328px 162.672px` — 4 small + 1 large (569px), позиционированный 4-м из 5. Это создаёт **«фокус на 4-м»** — нестандартное решение для testimonials grid.

---

## Mobile поведение (≤768px)

| Element | Desktop | Mobile |
|---|---|---|
| Container width | 1280-1440px | full-width |
| Header nav | 6 items + 2 CTAs visible | hamburger drawer (предполагаемо — UI требует адаптации) |
| H1 size | 46/64 | 28/36 |
| Hero CTAs | inline horizontal | full-width vertical stack (350px wide, 44px height) |
| Tier cards | 3 in row | vertical stack или horizontal scroll-snap |
| Trust logos | marquee | marquee + reduced gap |
| Audience tabs | 4 in row | 2x2 grid OR collapsed accordion |
| Features carousel | 4 visible thumbs + Previous/Next | swipe + dots (hide arrows) |
| Process 3-step | 3 in row | vertical stack |
| Advantages | 2x3 grid | vertical stack или 2x3 (smaller cards) |
| FAQ | accordion (already mobile-friendly) | unchanged, +44px tap target |
| Events calendar | day-picker grid | day-picker grid (но риск overflow на 320-360px — нужна вертикальная компоновка) |
| Partners certified | 3x3 grid | 2x4 или scroll-snap horizontal |
| Footer | 5 columns | 2 columns или single accordion |

**Mobile-specific:**
- Datepicker selected day на мобиле использует **signature yellow** (`#effd37`) bg — design-system-reuse приём
- Section padding уменьшается до 44px на mobile (со 80px desktop)
- Sticky header высотой 56px (--topline-mobile-height)
- Doodle ornaments в hero — **скрывать всё кроме одного** (на узком экране становятся шумом)

**Touch targets:** все кнопки ≥44px height (соответствует Apple HIG). Card-tap targets ≥48px.

**Risks identified:**
- 9-element partner grid (3x3) — на мобиле неизбежно ломается, нужен horizontal scroll или 3x3-stack
- Asymmetric reviews grid (1 large + 4 small) — не масштабируется, нужно перестроить как vertical с большой featured card сверху
- Cookie banner может перекрыть sticky-CTA — нужен temporary CTA-shift при cookie shown

---

## Деviations from typical marketing-dark

Этот бук **отклоняется** от типового marketing-dark genre в следующем:

| Standard marketing-dark | md4 deviation |
|---|---|
| Glassmorphism cards (backdrop-blur) | Flat solid white cards on dark |
| Gradient hero (linear/radial multi-color) | Solid #181a1a hero |
| Glow на CTA (box-shadow с цветом) | Bg-color invert на hover, без shadow |
| Multi-layer dropshadows на cards | Один universal popup shadow для tooltip/notification |
| Noise/grain texture для depth | Чистый solid color sections |
| Gradient text для display | Solid color H1 + single yellow brand-word |
| Conic-gradient logo box | Standard SVG logo |
| Bento grid с разными размерами cards | Standard equal-size 3-up grid |
| Dot/grid background pattern | Чистый solid background |
| Many accent colors / iris-like palette | Single yellow accent |

**Принцип:** бук **намеренно** не использует marketing-dark «sugar» 2024-2026. Это позиционирование «honest B2B without sugar» — анти-trend как differentiator.

---

## Композиционные сигнатуры (что узнаётся с первого взгляда)

1. **Centred narrow hero column** (970px max) с большим воздухом по бокам — не full-width banner
2. **Tier cards «парят» над hero/light boundary** — overlap-композиция
3. **Brand-word yellow inside white H1** — single point of color
4. **Outline doodles в углах hero** (4 штуки в asymmetric positions)
5. **Pastel rainbow strip посреди tier-card body** — единственный rainbow на сайте
6. **Day-picker grid в events секции** — нестандартный компонент для marketing landing
7. **Marquee ticker для trust logos** — не статический grid
8. **Section zebra dark↔light↔alt** не строгая 50/50, а распределённая по смыслу

---

## Анимации в работе

| Animation | Trigger | Duration | Easing |
|---|---|---|---|
| Cookie banner in | First visit | 500ms | linear |
| Cookie banner out | After "Хорошо" | 1500ms | linear (длинное «спасибо») |
| Marquee ticker | Always | ~20s loop | linear infinite |
| Mobile demo fade-in | Section enters viewport | ~400ms | ease-out (opacity + translateY -10→0) |
| Spinner | Loading state | 1s | linear infinite |
| Carousel slide | Previous/Next click | 300ms | ease |
| FAQ accordion | Click | 250ms | ease |
| Tooltip | Hover ≥1s | 250ms | linear |
| Button bg | Hover | 250ms | linear |
| Input border | Focus | 100ms | linear |
| Datepicker day border | Hover | 250ms | linear |

**Какие анимации отсутствуют:**
- Scroll-reveal stagger (нет fade-in-up по элементам)
- Parallax на background или mockups
- Hover-lift cards (translateY на cards при hover)
- Cinematic intro animations
- Page transitions (классический Next.js без motion)

---

## Composition mirror — что копировать в демо

При генерации демо для marketing-dark-4:

**Обязательно:**
1. Hero centered narrow (970px) на dark canvas с doodles в углах
2. H1 с brand-word yellow (одно слово)
3. 3 tier cards белыми поверх dark, с overlapping brand-logo cluster + pastel rainbow strip
4. Section zebra dark↔light↔alt (минимум 8 секций)
5. Один acid-yellow CTA (повторяется ≥3 раза — hero, advantages, footer)
6. Trust logos marquee ticker
7. FAQ accordion с «Показать ещё»
8. Big CTA-band с короткой декларативной фразой (эквивалент «Решений много. Бренд один.»)

**Опционально (для глубины):**
- Process 3-step numbered cards
- Persona tabs (audience)
- Features carousel с numbered pagination
- Day-picker для events
- Mobile + desktop UI mockup в demo-section

**Не нужно:**
- 9 partner-card grid (специфика конкретной индустрии)
- Календарь как обязательный элемент (зависит от concept)
- 15-FAQ list с «Показать ещё» (можно 5-7 без load-more)