# Components — marketing-dark-4
Инвентарь компонентов с состояниями. Извлечено из CSS Modules `cdn.bundle-static/...` (Next.js production bundle).
## Button
**Anatomy:**
- `display: flex; align-items: center; justify-content: center;`
- `border: 1px solid transparent; cursor: pointer; white-space: nowrap;`
- `font-weight: 700; line-height: 24px;`
- `transition: 0.25s; transition-property: background-color;`
### Sizes (3)
| Size | Height | Radius | Font | Padding | LH |
|---|---|---|---|---|---|
| `sm` | 32px | 16px | 12px / 700 | 8px 16px | 16px |
| `md` | 44px | 22px | 14px / 700 | 12px 32px | 20px |
| `lg` | 52px | 26px | 16px / 700 | 14px 44px | 24px |
### Views (7)
| View | Background | Color | Border |
|---|---|---|---|
| `primaryLight` | `#181a1a` (--md4-color-bg-dark) | `#fff` | none |
| `primaryDark` ★ | `#effd37` (--md4-color-primary) | `#181a1a` | none |
| `secondaryLight` | transparent | `#181a1a` | `#757575` |
| `secondaryDark` | transparent | `#fff` | `#757575` |
| `textLight` | transparent | `#181a1a` | none |
| `textDark` | transparent | `#fff` | none |
| `actionItem` | `#f5f5f5` | inherit | none, justify-content: flex-start |
★ — signature CTA (acid-yellow on dark hero/CTA bands)
### State Matrix
#### `Button__view_primaryDark` (signature yellow CTA)
| State | Change |
|---|---|
| Default | `bg: #effd37; color: #181a1a` |
| **Hover** | `bg: #ffffff` ← **YELLOW → WHITE INVERSION** (signature) |
| Focus | `border-color: #181a1a; outline: 2px solid #6871e1` (gladiola halo) |
| Active | `bg: #d0cfcf` (pressed grey) |
| Disabled | `bg: #757575` |
#### `Button__view_primaryLight` (dark CTA on light)
| State | Change |
|---|---|
| Default | `bg: #181a1a; color: #fff` |
| Hover | `bg: #585858` (dark → grey-dark) |
| Focus | `border-color: #fff; outline: 2px solid #4443be` (violet halo) |
| Active | `color: #d0cfcf` |
| Disabled | `bg: #d0cfcf; color: #757575` |
```html
```
```css
.btn {
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid transparent; cursor: pointer; white-space: nowrap;
font-family: var(--md4-font-body); font-weight: var(--md4-font-weight-bold);
transition: var(--md4-transition-button);
}
.btn--lg { height: 52px; border-radius: var(--md4-radius-button-lg); font-size: 16px; line-height: 24px; padding: 14px 44px; }
.btn--md { height: 44px; border-radius: var(--md4-radius-button-md); font-size: 14px; line-height: 20px; padding: 12px 32px; }
.btn--sm { height: 32px; border-radius: var(--md4-radius-lg); font-size: 12px; line-height: 16px; padding: 8px 16px; }
.btn--primaryDark { background: var(--md4-color-primary); color: var(--md4-color-text-on-primary); }
.btn--primaryDark:hover { background: #fff; } /* SIGNATURE INVERSION */
.btn--primaryDark:focus { border-color: #181a1a; outline: var(--md4-outline-focus-on-dark); }
.btn--primaryDark:active { background: #d0cfcf; }
.btn--primaryDark:disabled { background: #757575; }
```
---
## Input
**Anatomy:**
- `width: 100%; align-items: center; display: flex; position: relative;`
- `border: 1px solid; outline: none; transition: 0.1s;`
- `font-weight: 400; line-height: 24px;`
### Sizes
| Size | Height | Radius | Font | Padding |
|---|---|---|---|---|
| `sm` | 32px | 16px | 14px | 6px 12px |
| `md` | 40px | 20px | 16px | 8px 16px |
| `lg` | 48px | 24px | 16px | 12px 20px |
### Views
| View | Bg | Border | Color |
|---|---|---|---|
| `light` | `#fff` | `#757575` | `#181a1a` |
| `dark` | transparent | `#d0cfcf` | `#fff` |
### State Matrix
| State | Light | Dark |
|---|---|---|
| Focus-within | `border: #181a1a; box-shadow: 0 0 0 3px #98a6ff` (signature halo) | `border: #fff; box-shadow: 0 0 0 3px rgba(104,113,225,.8)` |
| Disabled | `bg: #f5f5f5; border: #d0cfcf; color: #757575` | `border: #757575; color: #757575` |
| Error | `border: #ff7878` + halo `0 0 0 3px hsla(0,100%,74%,.4)` | same |
```html
```
```css
.input { width: 100%; }
.input__container {
align-items: center; display: flex; position: relative;
border: 1px solid var(--md4-color-border-strong); transition: var(--md4-transition-input);
font-weight: var(--md4-font-weight-regular); line-height: var(--md4-line-height-body);
}
.input--md .input__container { border-radius: var(--md4-radius-input-md); height: 40px; padding: 8px 16px; font-size: 16px; }
.input--light .input__container { background: #fff; color: var(--md4-color-text); }
.input--dark .input__container { background: transparent; border-color: var(--md4-color-border); color: #fff; }
.input__container:focus-within {
border-color: var(--md4-color-text);
box-shadow: var(--md4-shadow-focus-light);
}
.input--error .input__container { border-color: var(--md4-color-danger); }
.input--error .input__container:focus-within { box-shadow: var(--md4-shadow-focus-error); }
```
---
## Tooltip
Two themes, one shadow, one transition.
| Theme | Bg | Border | Color | Radius | Padding |
|---|---|---|---|---|---|
| `basicBlack` | `#242525` | `1px #242525` | `#fff` | 16px | 8px 16px |
| `basicWhite` | `#fff` | `1px #d0cfcf` | `#181a1a` | 16px | 8px 16px |
Universal: `box-shadow: 0 6px 12px rgba(0,0,0,0.12); transition: opacity .25s; z-index: 9999`
Animations: rootEnter→rootEnterActive (opacity 0→1, 0.25s); rootExit→rootExitActive (opacity 1→0).
Arrows generated as `:before` and `:after` borders (no SVG).
---
## Notification
| Mode | Width | Min-height | Border |
|---|---|---|---|
| `banner` | 480px | 80px | none |
| `toast` | 360px | 80px | 4px solid (color by variant) |
Universal: `bg: #fff; border-radius: 12px; font: 14/24/400; padding: 12px 32px 20px 16px;`
Variants (4): `success / info / warning / error` — каждый с `border_*` (см. tokens) и `background_*` (subtle).
```html
Готово
Заявка отправлена.
```
```css
.notif { background: #fff; border-radius: var(--md4-radius-md); font-size: 14px; line-height: 24px; padding: 12px 32px 20px 16px; }
.notif--toast { border-style: solid; border-width: 4px; box-shadow: var(--md4-shadow-popup); width: 360px; }
.notif--success { border-color: var(--md4-color-success); background-color: var(--md4-color-success-bg); }
.notif--success .notif__title { color: var(--md4-color-success); font-size: 16px; font-weight: 700; }
```
---
## Cookie Banner (signature animation)
Bottom-pinned. Slides in 500ms linear, slides out 1500ms (long, deliberate acknowledge).
```css
@keyframes cookies-in { 0% { bottom: -150px; } 100% { bottom: 0; } }
@keyframes cookies-out { 0% { bottom: 0; } 100% { bottom: -150px; } }
.cookie-banner {
position: fixed; left: 0; bottom: 0; width: 100%;
background: #fff; color: var(--md4-color-text);
min-height: 80px; box-sizing: border-box;
animation: cookies-in 500ms linear forwards;
}
.cookie-banner.cookie-banner--approved {
animation: cookies-out 1500ms linear forwards;
}
```
---
## Datepicker (event calendar)
Radial day cells (border-radius 50%), no rectangles.
| State | Light | Dark Mobile |
|---|---|---|
| Day default | flat | flat dark |
| Day hover | `border: #181a1a; border-radius: 50%` | `bg: #d0cfcf; color: #181a1a` |
| Day active | `border: #6871e1; border-radius: 50%` (gladiola) | same |
| Day selected | `bg: #181a1a; border-radius: 50%` (white text) | **`bg: #effd37; color: #181a1a`** ← yellow on selected (signature reused) |
---
## Logo Marquee (running-string ticker)
Horizontal infinite marquee for partner-logo strip — `animation: anim 20s linear infinite` (typical), translate from 0 to `-50% - 10px`.
```css
@keyframes md4-ticker { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-50% - 10px)); } }
.ticker { overflow: hidden; mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%); }
.ticker__track { display: flex; gap: var(--md4-ticker-gap); animation: md4-ticker var(--md4-marquee-speed) linear infinite; }
```
---
## Tier Card (signature pricing card)
Composition (top-to-bottom):
1. **Cluster of overlapping circular brand-logos** (-8px margin overlap)
2. Tier name (e.g., «Tier-1», «Tier-2», «Tier-3» или брендовые имена) — H3, weight 700
3. **Pastel rainbow gradient strip** (12px height, 4-color band — replaces classic % discount badge)
4. Body text describing the offer
5. CTA `«Оставить заявку»` — `Button.lg` `secondaryLight`
```css
.tier-card {
background: #fff;
border-radius: var(--md4-radius-button-lg); /* 26px signature card radius */
padding: var(--md4-space-7) var(--md4-space-6);
display: flex; flex-direction: column; gap: var(--md4-space-4);
}
.tier-card__logos { display: flex; }
.tier-card__logos img {
width: var(--md4-tier-logo-size); height: var(--md4-tier-logo-size);
border-radius: 50%; border: var(--md4-tier-logo-border);
margin-left: var(--md4-tier-logo-overlap);
}
.tier-card__logos img:first-child { margin-left: 0; }
.tier-card__strip {
height: var(--md4-discount-strip-h);
background: var(--md4-discount-strip);
border-radius: var(--md4-radius-pill);
}
```
---
## Hero (signature composition)
- Section bg: `#181a1a` (dark canvas)
- Container: centered, max ~1280px
- Outline doodle ornaments (SVG 1.5px stroke white opacity 0.5) scattered in 4 corners — star, wave, arc, dots
- H1: `46/64/800` centered, max-width 970px, white text with single brand-word in `#effd37`
- Sub: 20px lead paragraph, white-soft
- CTA pair below H1: `primaryDark` (yellow) + `secondaryDark` (outline)
```html
Brand —
маркетплейс рекламных площадок, сервисов и услуг
Упрощённый доступ к 500+ площадкам в едином окне.
```
```css
.hero {
position: relative;
background: var(--md4-section-dark-bg);
padding: var(--md4-section-pt-huge) 0;
text-align: center;
}
.hero__doodle { position: absolute; opacity: var(--md4-ornament-opacity); pointer-events: none; }
.hero__doodle--star { top: 8%; left: 12%; }
.hero__doodle--wave { top: 8%; right: 14%; }
.hero__doodle--arc { bottom: 14%; left: 18%; }
.hero__doodle--dots { bottom: 18%; right: 16%; }
.hero__title {
font-family: var(--md4-font-display);
font-size: var(--md4-font-size-h1); line-height: var(--md4-line-height-h1);
font-weight: var(--md4-font-weight-extrabold);
color: #fff;
max-width: var(--md4-hero-text-max);
margin: 0 auto var(--md4-space-7);
}
.hero__brand { color: var(--md4-color-primary); }
.hero__ctas { display: flex; gap: var(--md4-space-4); justify-content: center; }
```
---
## Section Inversion Pattern (zebra-by-section)
| Section role | Background | Text | Notes |
|---|---|---|---|
| Hero | `#181a1a` (dark) | `#fff` | Doodle ornaments + yellow CTA |
| Trust logos | `#ffffff` (light) | `#181a1a` | Marquee ticker |
| Tier cards | `#ffffff` (light) | `#181a1a` | 3-up grid, white cards on white = subtle border |
| Audience | `#f5f5f5` (alt) | `#181a1a` | Grid of role cards |
| Features carousel | `#181a1a` (dark) | `#fff` | Mockup screenshot showcase |
| Process 3-step | `#ffffff` | `#181a1a` | Numbered cards |
| Advantages | `#ffffff` | `#181a1a` | Icon grid |
| FAQ | `#ffffff` | `#181a1a` | Accordion + "Show more" |
| Events | `#181a1a` (dark) | `#fff` | Calendar widget |
| Partners certified | `#ffffff` | `#181a1a` | Logo grid |
| CTA-band | `#181a1a` (dark) | `#fff` | Big yellow CTA |
| Footer | `#181a1a` (dark) | `#fff` | Multi-column |
**Pattern:** dark→light→light→alt→dark→light→light→light→dark→light→dark→dark.
Не строгая зебра — сгруппировано по смыслу. 5 dark секций, 7 light/alt.
---
## Что НЕ компонент
Этот бук **НЕ имеет** этих типичных marketing-dark компонентов:
- glass card (нет backdrop-blur нигде)
- gradient hero text (только solid yellow accent word)
- glow button (нет box-shadow на CTA, только hover bg invert)
- floating sticky pill nav (header обычный, не floating-glass)
- conic-gradient logo box
- bento with mixed sizes (cards стандартного формата)
- noise/grain texture
- dot/grid background pattern
Это анти-buyer-buzzword stack — бук намеренно flat и неприглушённо B2B.