# Components — marketing-light-6

Каталог компонентов с примерами CSS на `--ml6-*` токенах. Полная палитра — [tokens.css](tokens.css), правила — [tokens.md](tokens.md).

## Buttons

### Primary CTA (signature)

```css
.ml6-btn-primary {
  background: var(--ml6-action-bg);            /* #000 — pure black */
  color: var(--ml6-action-text);               /* #fff */
  font-family: var(--ml6-font-primary);
  font-size: var(--ml6-fs-p-body);             /* 16px peak */
  font-weight: var(--ml6-fw-regular);          /* 400 — НЕ bold */
  line-height: 1.3em;
  padding: 0.7em 1em;                          /* loam button — 11/16 vertical, 16/16 horizontal */
  border: 0;
  border-radius: var(--ml6-radius-cta);        /* 12px SIGNATURE */
  letter-spacing: 0;
  cursor: pointer;
  transition:
    background-color var(--ml6-dur-slow) var(--ml6-ease-out-circ),
    transform var(--ml6-dur-base) var(--ml6-ease-out-quart);
}
.ml6-btn-primary:hover {
  background: var(--ml6-action-bg-hover);      /* slight warm oat-950 shift */
}
.ml6-btn-primary:active { transform: scale(0.985); }
.ml6-btn-primary:focus-visible {
  outline: 2px solid var(--ml6-accent-link);
  outline-offset: 3px;
}
```

### Secondary CTA — cream

```css
.ml6-btn-secondary {
  background: var(--ml6-surface-card-warm);    /* oat-300 #eee9df */
  color: var(--ml6-text-primary);
  /* остальное идентично primary */
  border-radius: var(--ml6-radius-cta);        /* 12px */
}
.ml6-btn-secondary:hover {
  background: var(--ml6-oat-400);
}
```

### Pill icon-button (signature pill 1584)

```css
.ml6-btn-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--ml6-gap-button);                  /* 16px icon-text */
  padding: 0.5em 1em;
  border-radius: var(--ml6-radius-pill);       /* 1584 — visually 100vw */
  background: var(--ml6-surface-card-subtle);
  border: 1px solid var(--ml6-border-default);
  font-weight: var(--ml6-fw-medium);
}
```

## Headings

```css
.ml6-h1 {
  font-size: var(--ml6-fs-h1);                 /* clamp 44.8 → 88 */
  font-weight: var(--ml6-fw-heading);          /* 600 — не 700 */
  line-height: var(--ml6-lh-h1);               /* 1.0 — peak compressed */
  letter-spacing: var(--ml6-ls-display);       /* -0.04em */
  color: var(--ml6-text-primary);
  margin-bottom: 0.2em;
}
.ml6-h2 { font-size: var(--ml6-fs-h2); font-weight: 600; line-height: 1.1; letter-spacing: -0.04em; margin-bottom: 0.2em; }
.ml6-h3 { font-size: var(--ml6-fs-h3); font-weight: 600; line-height: 1.2; letter-spacing: -0.04em; margin-bottom: 0.3em; }
.ml6-h4 { font-size: var(--ml6-fs-h4); font-weight: 600; line-height: 1.4; letter-spacing: 0;       margin-bottom: 0.4em; }
.ml6-h5 { font-size: var(--ml6-fs-h5); font-weight: 600; line-height: 1.4; letter-spacing: 0;       margin-bottom: 0.5em; }
.ml6-h6 { font-size: var(--ml6-fs-h6); font-weight: 600; line-height: 1.4; letter-spacing: 0;       margin-bottom: 0.6em; }
```

### Eyebrow (uppercase tracked label)

```css
.ml6-eyebrow {
  font-family: var(--ml6-font-mono);
  font-size: var(--ml6-fs-eyebrow);            /* 11.2 → 12.8 */
  font-weight: var(--ml6-fw-medium);           /* 500 */
  line-height: 1.2;
  letter-spacing: var(--ml6-ls-eyebrow);       /* +0.1em */
  text-transform: uppercase;
  color: var(--ml6-text-secondary);
  margin-bottom: 1.5em;                        /* большой отрыв перед H */
}
```

## Cards

### Feature card (loam_medium 28px)

```css
.ml6-card {
  background: var(--ml6-bg-page);
  border: 1px solid var(--ml6-border-default);
  border-radius: var(--ml6-radius-card);       /* 28px */
  padding: clamp(1rem, 0.5rem + 1.5vw, 1.5rem);
  transition: transform var(--ml6-dur-emerge) var(--ml6-ease-out-quart),
              box-shadow var(--ml6-dur-emerge) var(--ml6-ease-out-quart);
}
.ml6-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ml6-shadow-card-hover);
}
```

### Solution hero card (signature 40px rounded)

```css
.ml6-hero-card-solution {
  background: var(--ml6-chunk-solution-hero);  /* oat-200 #f3f2ed */
  border-radius: var(--ml6-radius-large);      /* 40 SIGNATURE */
  padding: clamp(2rem, 1rem + 4vw, 4rem);
  /* для solution-страниц — заменяет full-bleed bg */
}
```

### Product page hero canvas (deep navy full-bleed)

```css
.ml6-hero-product {
  background: var(--ml6-chunk-product-hero);   /* #002f67 blueberry-900 */
  color: var(--ml6-text-on-dark);
  padding-block: var(--ml6-section-pad-lg) var(--ml6-section-pad-md);
  border-radius: 0;                            /* full-bleed sharp */
}
.ml6-hero-product .ml6-h1 {
  color: var(--ml6-text-on-dark);
  font-size: clamp(2.8rem, 1.8rem + 3vw, 4rem); /* 44.8 → 64px — interior peak */
}
```

### Company page hero (forest green full-bleed)

```css
.ml6-hero-company {
  background: var(--ml6-chunk-company-hero);   /* #0dac65 matcha-500 */
  color: var(--ml6-text-on-dark);
  padding-block: var(--ml6-section-pad-lg);
}
```

### Testimonial poster card (each card own pop color)

```css
.ml6-testimonial-card {
  border-radius: var(--ml6-radius-card);       /* 28px */
  padding: var(--ml6-space-8) var(--ml6-space-7);
  color: var(--ml6-text-primary);              /* dark text on saturated bg */
  display: flex; flex-direction: column; gap: var(--ml6-space-6);
}
.ml6-testimonial--yellow  { background: var(--ml6-pop-yellow); }
.ml6-testimonial--green   { background: var(--ml6-pop-green); }
.ml6-testimonial--orange  { background: var(--ml6-pop-orange); }
.ml6-testimonial--cyan    { background: var(--ml6-pop-cyan); }
.ml6-testimonial--magenta { background: var(--ml6-pop-magenta); color: var(--ml6-text-on-dark); }
.ml6-testimonial--purple  { background: var(--ml6-pop-purple); color: var(--ml6-text-on-dark); }
```

## Pricing tier cards

```css
.ml6-pricing-card {
  background: var(--ml6-bg-page);
  border: 1px solid var(--ml6-border-default);
  border-radius: 16px;                         /* tier-card observed 16/18px */
  padding: var(--ml6-space-8) var(--ml6-space-6);
  display: flex; flex-direction: column; gap: var(--ml6-space-6);
}
.ml6-pricing-card--highlighted {
  background: var(--ml6-accent-emphasis-bg);   /* #3859f9 blueberry-450 */
  color: var(--ml6-text-on-dark);
  border: 0;
  border-radius: 18px;                         /* slightly larger for emphasis */
}
.ml6-pricing-card--highlighted .ml6-h3 { color: var(--ml6-text-on-dark); }
.ml6-pricing-card .ml6-badge {
  border-radius: var(--ml6-radius-sharp);      /* 8px tier-badge */
  padding: var(--ml6-space-1) var(--ml6-space-3);
  background: var(--ml6-blueberry-200);
  color: var(--ml6-blueberry-900);
  font-size: var(--ml6-fs-p-sm);
  font-weight: var(--ml6-fw-medium);
}
```

## Inputs

```css
.ml6-input {
  font-family: var(--ml6-font-primary);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5em;
  letter-spacing: 0;
  border: 1px solid var(--ml6-border-default);
  border-radius: var(--ml6-radius-sharp);      /* 8px loam_small */
  background: var(--ml6-bg-page);
  padding: 0.75em 1em;
  color: var(--ml6-text-primary);
  transition: border-color var(--ml6-dur-slow) var(--ml6-ease-out-circ);
}
.ml6-input::placeholder { color: var(--ml6-text-tertiary); }
.ml6-input:focus { outline: none; border-color: var(--ml6-accent-link); }
.ml6-input--label { font-weight: 500; font-size: 0.9rem; }
```

## Navigation (header)

```css
.ml6-nav {
  position: absolute;                          /* float over hero */
  inset-inline: 0; top: 0;
  background: transparent;                     /* sit on hero canvas */
  z-index: var(--ml6-z-nav);
  padding: var(--ml6-space-4) var(--ml6-space-6);
}
.ml6-nav-link {
  font-size: var(--ml6-fs-p-body);
  font-weight: var(--ml6-fw-medium);           /* 500 */
  color: var(--ml6-text-primary);
  text-decoration: none;
  letter-spacing: var(--ml6-ls-body-micro);
}
.ml6-nav-link:hover { color: var(--ml6-accent-link); }

/* dropdown grid — adaptive col-fixed minmax */
.ml6-nav-dropdown {
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 336px));
  gap: var(--ml6-gap-hairline);                /* 1px hairline divider trick */
  background: var(--ml6-border-default);       /* divider color */
}
.ml6-nav-dropdown-item {
  background: var(--ml6-bg-page);              /* fills cell, gap shows divider */
  padding: var(--ml6-space-4);
}
```

## Footer (mega illustrated)

```css
.ml6-footer {
  background: var(--ml6-bg-section-alt);       /* oat-100 */
  padding-block: var(--ml6-section-pad-xl);
  /* illustrated landscape scene rendered as full-width SVG/png above sitemap */
}
.ml6-footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--ml6-gap-md);
}
```

## Section rhythm helpers

```css
.ml6-section { padding-block: var(--ml6-section-pad-lg); }
.ml6-section--alt { background: var(--ml6-bg-section-alt); }
.ml6-section--xs { padding-block: var(--ml6-section-pad-xs); }
.ml6-section--xl { padding-block: var(--ml6-section-pad-xl); }

/* FAT mega-section: hosts 5 sub-blocks under single bg/padding */
.ml6-section--mega {
  padding-block: var(--ml6-section-pad-xl);
  background: var(--ml6-bg-page);
}
.ml6-section--mega > .ml6-feature-block + .ml6-feature-block {
  margin-top: var(--ml6-space-24);             /* ~96px between sub-features */
}
```

## Container

```css
.ml6-container {
  width: min(100% - 2rem, var(--ml6-container-max));
  margin-inline: auto;
}
```

## Inline metric chip (KPI bubble: ">2x", "3M+")

```css
.ml6-metric-chip {
  display: inline-flex;
  align-items: baseline;
  gap: var(--ml6-space-2);
  padding: var(--ml6-space-2) var(--ml6-space-4);
  border-radius: var(--ml6-radius-pill);
  background: var(--ml6-pop-green);            /* signature inline KPI green */
  color: var(--ml6-text-primary);
}
.ml6-metric-chip__num {
  font-weight: var(--ml6-fw-bold);             /* 700 — ONLY for nums */
  font-size: var(--ml6-fs-h4);
  letter-spacing: var(--ml6-ls-display);
}
```

## Trust-bar logo strip

```css
.ml6-trust-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--ml6-gap-main);
  padding-block: var(--ml6-section-pad-md);
  align-items: center;
}
.ml6-trust-bar img {
  filter: grayscale(100%) opacity(0.6);
  height: 32px; width: auto;
  margin-inline: auto;
  transition: filter var(--ml6-dur-slow) var(--ml6-ease-out-circ);
}
.ml6-trust-bar img:hover { filter: grayscale(0) opacity(1); }
```

## Repeated footer-CTA section (anchor pattern)

```css
.ml6-final-cta {
  text-align: center;
  padding-block: var(--ml6-section-pad-xl);
  background: var(--ml6-bg-section-alt);       /* oat-100 cream warmth */
}
.ml6-final-cta .ml6-h2 {
  font-size: clamp(2.5rem, 1.5rem + 3.5vw, 3.75rem); /* 60px peak, slightly bigger than regular H2 */
  margin-bottom: var(--ml6-space-8);
}
```

## Что НЕ создавать

- ❌ Heavy drop-shadow карточек на marketing — substitute через radius+border+alt-section.
- ❌ Gradient buttons — clay использует solid pure black.
- ❌ Bold (700+) headings — всегда 600.
- ❌ Pure `#000` body text — только oat-950.
- ❌ Smooth radius scale 4/6/10/16/20 — только signatures 0/8/12/24/28/40/pill.
- ❌ Glassmorphism / backdrop-blur — не используется.
- ❌ Single-accent palette — используй curated chromatic sampler.