# Patterns: marketing-light-5

Композиционные правила и поведенческие паттерны, поддерживающие суперсилы из [`dna.md`](dna.md).

---

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

Порядок секций на home:

1. **Nav-bar** — fixed `--ml5-nav-height: 4.25rem`, transparent → ivory-light on scroll.
   - Left: typographic wordmark
   - Center: 5-6 nav-links (Research / Research Programs / Commitments / Learn / News)
   - Right: single primary CTA pill (`slate-dark bg + ivory text`)

2. **Hero** — `padding-top: --ml5-section-page-top` (96-192px), `padding-bottom: --ml5-section-lg` (112-224px).
   - Layout: 12-col grid, **H1 в левой 6-7 колонках**, body-паргараф в правых 3-4 колонках (издательская разворотная схема).
   - H1 sans 700, display-xxl, подчёркнуты 1-2 ключевых слова editorial-underline-as-editing.
   - Body: serif paragraph-m weight 400, 2-3 предложения.
   - **БЕЗ hero-image / hero-video / gradient-bg.** Чистая типографика.

3. **Dark Inset Inversion Block** — первый content block, section-main от hero.
   - `max-width: 89.5rem`, margin centered, `border-radius: 16px`, `background: --ml5-color-slate-dark`.
   - Padding `--ml5-dark-inset-padding` (48-80px).
   - Content: drop-cap serif italic ~120px проект-name + body serif paragraph-l + 1 CTA ghost-variant.
   - Справа может быть generative-illustration (voronoi-mesh, SVG grid, biomimicry pattern) или пусто.
   - **НЕ full-bleed** — это критично.

4. **Editorial Release Cards Grid** — section-main от предыдущего.
   - H2 serif 400 display-l слева колонкой, grid 3-up справа.
   - Release card: `ivory-medium bg`, `radius 16px`, `padding --ml5-card-padding` (36-48px).
   - Структура card: title serif display-l → short body → divider → DATE · CATEGORY tabular mono → читательская CTA-link с arrow.
   - Grid на mobile: 1-up full-width.

5. **Mission Statement + Proof-Links** — section-main.
   - Ассиметричный 12-col: H2 sans bold в левой 4-col, table-links в правой 8-col.
   - Table: каждая строка = ссылка на манифест/политику, справа category (detail-s sans uppercase).
   - Никаких иконок, никаких цветных bedge-ей. Чистая editorial table.

6. **Footer Mega-Menu** — slate-dark bg, ivory text.
   - 4 primary columns (Products / Solutions / Resources / Company).
   - Под ними — 3-4 secondary groups (Platform / Help / Terms / Careers).
   - Totально ~60 links. Dense typography `detail-s 14px`.
   - Logo reduced к monogram в левом углу.
   - Social icons monochrome ivory (не brand-colors).

---

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

DOMINANT: `--ml5-section-main: clamp(5.5rem, 4.12rem + 5.88vw, 10rem)` — 88-160px.

Это rhythm между 90% секций. Hero имеет больший ритм (`section-lg` 112-224px) и выше (`section-page-top` 96-192px).

**Visual cadence:**
```
hero-padding-top (page-top 96-192px)
  H1 + body
hero-padding-bottom (lg 112-224px)
[dark inset block — visual pause]
section-main (88-160px)
  release cards
section-main (88-160px)
  mission + proof-links
[footer]
```

**Никаких** других section-spacing токенов (`section-xs/sm/md`) в основной композиции. Они доступны для locally nested elements.

---

## Grid паттерны

### Container

- `max-width: 89.5rem` (1432px)
- `margin-inline: auto`
- `padding-inline: clamp(2rem, 1.08rem + 3.92vw, 5rem)` (edge 32-80px)

### 12-col grid

- `display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));`
- `gap: clamp(1.75rem, 1.67rem + 0.33vw, 2rem)` (column gutter)

### Section grid templates

| Тип секции | Grid | Collapse mobile |
|---|---|---|
| Hero (H1 + body) | 12-col: `span 7 / span 4` с gap-2 | → 1-col stack |
| Release cards grid | 12-col: H2 `span 3` / cards `span 9` (3-up inside) | → H2 сверху, cards 1-up |
| Mission statement | 12-col: H2 `span 4` / links `span 8` | → H2 сверху, links ниже |
| Footer mega-menu | 12-col: logo `span 2` / cols `span 10` (4×2.5) | → stack с разделителем |
| Dark inset content | Single column inside inset (max-width 40rem editorial prose) | Padding уменьшается |

---

## Mobile поведение

### Breakpoints (layout-reflow only, НЕ для type/space)

- `991px` — tablet landscape: 12-col → 6-col/3-up, edge-margin ~48px
- `767px` — tablet portrait: → 2-up cards, hamburger появляется
- `479px` — mobile portrait: → 1-col stack, edge-margin min 32px
- `1249px` — desktop boundary: full 12-col с max 89.5rem

### Mobile nav

Hamburger иконка top-right (24×24px, `--ml5-color-slate-dark` stroke).
"Start free" CTA остаётся persistent в nav-bar (единственная always-visible acción).

При tap → `menuOpen` keyframe:
```css
@keyframes menuOpen {
  0%   { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }
  100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
```
400ms, `--ml5-ease-default` cubic-bezier(0.77, 0, 0.175, 1). Curtain-down reveal.

Drawer: full-screen ivory-light, nav-categories вертикальным стеком с sub-accordion.

### Mobile composition

- Hero двухколоночный → вертикальный стек, H1 сверху
- Release cards 3-up → 1-up full-width
- Mission statement ассимметрия → H2 сверху, links таблица ниже
- Footer 4-col mega → вертикальный стек с `--ml5-space-6` разделителем

### Touch-targets

- Pill CTA: `padding 0.75rem 1.5rem` → ~44×44px min
- Nav-link в drawer: `padding 0.75rem 0` + `line-height 1.6` → ≥44px row
- Footer link: `padding 0.5rem 0` → 44px row

### Мобильные суперсилы (отсутствие)

ZERO swipe / carousel / pull-to-refresh / bottom-sheet. Scroll-only. Read-like-magazine. Consistent с editorial voice: не app, не feed.

---

## Deviations from type

Отклонения от типичного `marketing-light`:

1. **1432px grid вместо 1200-1280px** — +150-230px для editorial long-form.
2. **Serif в body, Sans в display** — инверсия стандарта marketing-light (где обычно sans-body).
3. **Cream substrate вместо white** — стандарт marketing-light обычно pure white.
4. **НЕТ trust-row / logo-garden** — стандарт marketing-light обычно имеет «As seen in…» row.
5. **НЕТ testimonials grid** — вместо них "Core views" proof-links table.
6. **НЕТ pricing tier на главной** — marketing-light стандарт включает pricing. Здесь pricing вынесен на отдельный subdomain.
7. **НЕТ hero-image / hero-video** — стандарт marketing-light использует hero-image. Здесь чистая типографика.
8. **Dark inset inversion block** — редкий pattern, обычно marketing-light full-light.
9. **Mono-tabular category metadata** — вместо цветных category tags.

Эти deviations — и есть то что делает `marketing-light-5` отдельным архетипом внутри типа.

---

## Composition guardrails

- **Один dark inset на страницу** — максимум. Больше = потеря editorial tension.
- **Один editorial underline в H1** — максимум на странице. Больше = декоративный glitch.
- **Один drop-cap serif italic** — максимум на странице, только в dark inset или в editorial-manifesto параграфе ≥60 слов.
- **Максимум 2 появления clay на viewport** — CTA accents (nav hover, special CTA).
- **Никаких pricing cards на home** — выносится на отдельный subdomain/page.
- **Никаких colored chip-badges** — metadata всегда tabular mono uppercase.
- **Никаких social-proof photos** (testimonials с лицами) — text-only quotes максимум.

---

## Остаточные замечания review

(Заполнится после Phase 6 Compile и Phase 9 Evaluator, если будут нерешённые issues.)