---
name: Кварта
description: Лендинг минской обжарки — «недельный календарь и штамп даты»
colors:
  cream: "#F3EBDD"
  paper: "#FBF7F0"
  kraft: "#DCC7A1"
  roast: "#1E120C"
  ink: "#2A1810"
  muted: "#5E4636"
  placeholder: "#7A6352"
  rule-soft: "#C9B595"
  cherry: "#B3221B"
  cherry-deep: "#8F1A14"
  cherry-on-dark: "#E8604F"
  muted-on-dark: "#BFA88A"
  ok: "#2E5E3A"
typography:
  display:
    fontFamily: "Golos Text, system-ui, sans-serif"
    fontSize: "clamp(2.75rem, 1.6rem + 5.2vw, 6rem)"
    fontWeight: 900
    lineHeight: 0.92
    letterSpacing: "-0.035em"
  headline:
    fontFamily: "Golos Text, system-ui, sans-serif"
    fontSize: "clamp(2rem, 1.4rem + 2.8vw, 3.5rem)"
    fontWeight: 800
    lineHeight: 1
    letterSpacing: "-0.03em"
  title:
    fontFamily: "Golos Text, system-ui, sans-serif"
    fontSize: "clamp(1.5rem, 1.3rem + 0.6vw, 1.875rem)"
    fontWeight: 800
    lineHeight: 1.05
    letterSpacing: "-0.02em"
  lead:
    fontFamily: "Golos Text, system-ui, sans-serif"
    fontSize: "clamp(1.125rem, 1rem + 0.5vw, 1.375rem)"
    fontWeight: 400
    lineHeight: 1.45
  body:
    fontFamily: "Golos Text, system-ui, sans-serif"
    fontSize: "1.0625rem"
    fontWeight: 400
    lineHeight: 1.55
  small:
    fontFamily: "Golos Text, system-ui, sans-serif"
    fontSize: "0.875rem"
    fontWeight: 500
    lineHeight: 1.45
  mono-tag:
    fontFamily: "Martian Mono, ui-monospace, monospace"
    fontSize: "0.75rem"
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: "0.08em"
  mono-price:
    fontFamily: "Martian Mono, ui-monospace, monospace"
    fontSize: "clamp(1.375rem, 1.2rem + 0.8vw, 2rem)"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "-0.02em"
    fontFeature: "\"tnum\" 1"
  mono-date:
    fontFamily: "Martian Mono, ui-monospace, monospace"
    fontSize: "clamp(1.75rem, 1.2rem + 2.2vw, 3.25rem)"
    fontWeight: 700
    lineHeight: 1
    letterSpacing: "-0.04em"
    fontVariation: "\"wdth\" 87.5"
  stamp:
    fontFamily: "Martian Mono, ui-monospace, monospace"
    fontSize: "1rem"
    fontWeight: 700
    lineHeight: 1
    letterSpacing: "0.04em"
    fontVariation: "\"wdth\" 112.5"
rounded:
  none: "0px"
  hair: "2px"
spacing:
  "1": "4px"
  "2": "8px"
  "3": "12px"
  "4": "16px"
  "5": "20px"
  "6": "24px"
  "8": "32px"
  "12": "48px"
  "18": "72px"
  "32": "128px"
components:
  button-primary:
    backgroundColor: "{colors.cherry}"
    textColor: "{colors.paper}"
    rounded: "{rounded.none}"
    padding: "0 24px"
    height: "52px"
  button-primary-hover:
    backgroundColor: "{colors.cherry-deep}"
    textColor: "{colors.paper}"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: "0 20px"
    height: "52px"
  button-secondary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.cream}"
  input:
    backgroundColor: "{colors.paper}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: "0 14px"
    height: "52px"
  label-card:
    backgroundColor: "{colors.kraft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: "20px"
---

# Design System: Кварта

## Overview

**Creative North Star: «Четверг на этикетке»**

«Кварта» — четвёртая, и весь сайт стоит на четверге. Страница читается как настенный календарь и крафтовая пачка одновременно: неделя ПН…ВС набрана плотным гротеском с тонкими линейками, четверг (обжарка) и пятница (доставка) выделены красным кофейной ягоды, а на пачках и в первом экране стоит резиновый штамп с датой ближайшей обжарки. Свежесть доказывается датой, а не словом «свежий». Ассортимент — этикетки пачек: название гротеском, ноты строкой через «•», вес и цена моноширинным, по диагонали лента-наклейка «обжарено в чт».

Плотно, плоско, печатно. Никаких теней, градиентов и скруглений: глубину дают линейки, крафт и штамп. Красный — только там, где речь о дне, действии или ошибке.

**Key Characteristics:**
- Кремовый фон, тёмно-коричневые текст и линейки, один акцент — красный ягоды.
- Golos Text для всего текста, Martian Mono только для дат, цен, веса, часов и штампов.
- Радиус 0. Тени 0. Линейки 1px и 2px цвета `ink`.
- Подпись бренда — штамп даты с «неровной краской» (SVG-фильтр) и лента недели.
- Две авторские анимации: оттиск штампа и «заполнение» недели. Остальное — состояния.

### Словарь приёмов

| Приём | Что это | Где используется |
|---|---|---|
| **Лента недели** (`WeekStrip`) | 7 дней «буква + число», тонкие линейки, ЧТ и ПТ красным, подписи «обжарка»/«доставка» на линейке, скобка «1–3 день — в чашке» под ПТ–ВС | Блок «почему свежесть» (полная), OG-картинка (статичная), микро-версия в логотипе (7 штрихов, 4-й красный) |
| **Штамп** (`Stamp`) | Двойная прямоугольная рамка, текст Martian wdth 112.5 капсом, поворот −7…+5°, смещение, неровность краски | Первый экран (дата ближайшей обжарки, анимирован), поле «дата обжарки» на этикетках (статичный), успех формы «ПРИНЯТО» (анимирован), OG |
| **Этикетка** (`Label`) | Крафт-прямоугольник пачки, контент разделён линейками на поля, как на печатной этикетке | Карточки сортов, дрип-пакеты, подписка |
| ~~Лента-наклейка~~ | Снята в итерации критика 1: повторяла штамп «ЧТ 22.10» на каждой этикетке, 8 красных пятен подряд | Нигде |
| **Поле этикетки** | Подпись mono-tag слева, значение справа, линейка 1px снизу | Внутри Label, в блоке подписки, в часах самовывоза |

## Colors

Палитра печатной пачки: крем бумаги, крафт, кофейные чернила и одна красная краска.

### Primary
- **Красный ягоды** (`cherry` #B3221B): основная кнопка, ЧТ/ПТ в ленте недели, штамп, лента-наклейка, линия ошибки. Текст `cherry` допустим на `cream` (5.61:1) и `paper` (6.22:1), но не на `kraft` (4.03:1 — только крупный текст ≥24px или 700 ≥18.66px).
- **Красный глубокий** (`cherry-deep` #8F1A14): hover/active основной кнопки, текст ошибок полей (8.45:1 на `paper`, 7.63:1 на `cream`), красный мелкий текст на крафте (5.47:1).
- **Красный на тёмном** (`cherry-on-dark` #E8604F): акцентный текст и штрихи на `roast` (5.42:1). Только в тёмных секциях.

### Neutral
- **Крем** (`cream` #F3EBDD): фон страницы. Сплошной, без градиентов и шума.
- **Бумага** (`paper` #FBF7F0): фон полей формы, блока формы, уведомлений; текст на красных кнопках и ленте.
- **Крафт** (`kraft` #DCC7A1): поверхность этикеток и блока подписки. Только сплошной цвет, без текстуры-картинки.
- **Обжарка** (`roast` #1E120C): фон секции «доставка/самовывоз» и подвала.
- **Чернила** (`ink` #2A1810): весь основной текст, линейки, рамки, фокус-обводка на светлом.
- **Приглушённый** (`muted` #5E4636): второстепенный текст, подписи полей этикетки, рамка полей формы.
- **Плейсхолдер** (`placeholder` #7A6352): только `::placeholder` на `paper` (5.27:1).
- **Линейка мягкая** (`rule-soft` #C9B595): декоративные разделители внутри одной группы (1.69:1 к крему — не несёт смысла, не годится для рамок контролов). Фон disabled-кнопки.
- **Приглушённый на тёмном** (`muted-on-dark` #BFA88A): второстепенный текст на `roast` (8.01:1).
- **Успех** (`ok` #2E5E3A): только иконка-галочка и текст в уведомлении «заявка принята» (6.38:1 на `cream`, 7.08:1 на `paper`). Нигде больше.

### Контраст (WCAG 2.x, проверено)

| Пара | Контраст | Использование |
|---|---|---|
| ink / cream | 14.34 | основной текст |
| ink / paper | 15.90 | поля, форма |
| ink / kraft | 10.29 | этикетки |
| muted / cream | 7.37 | второстепенный |
| muted / kraft | 5.29 | подписи на этикетке |
| muted / paper | 8.18 | рамка поля (≥3:1 ок) |
| placeholder / paper | 5.27 | плейсхолдер |
| cherry / cream | 5.61 | красный текст, ЧТ/ПТ |
| paper / cherry | 6.22 | основная кнопка, лента |
| paper / cherry-deep | 8.45 | hover кнопки |
| cherry-deep / kraft | 5.47 | красный мелкий текст на крафте |
| cream / roast | 15.46 | текст на тёмном |
| muted-on-dark / roast | 8.01 | второстепенный на тёмном |
| cherry-on-dark / roast | 5.42 | акцент на тёмном |
| ok / paper | 7.08 | успех |

### Named Rules
**Правило одной краски.** Красный занимает ≤10% экрана. Если на экране уже есть красная кнопка, штамп рядом делается без анимации.
**Правило чёрного по крафту.** На `kraft` мелкий красный текст — только `cherry-deep`.

### Tailwind 4 `@theme` (вставить в `apps/landing/src/app/globals.css`)

```css
@import 'tailwindcss';

@theme {
  --color-*: initial; /* отключить палитру Tailwind: никаких neutral-*/red-* */
  --color-cream: #F3EBDD;
  --color-paper: #FBF7F0;
  --color-kraft: #DCC7A1;
  --color-roast: #1E120C;
  --color-ink: #2A1810;
  --color-muted: #5E4636;
  --color-placeholder: #7A6352;
  --color-rule-soft: #C9B595;
  --color-cherry: #B3221B;
  --color-cherry-deep: #8F1A14;
  --color-cherry-on-dark: #E8604F;
  --color-muted-on-dark: #BFA88A;
  --color-ok: #2E5E3A;
  --color-transparent: transparent;
  --color-current: currentColor;

  --radius-*: initial;
  --radius-none: 0px;
  --radius-hair: 2px;
  --shadow-*: initial;

  --text-display: clamp(2.75rem, 1.6rem + 5.2vw, 6rem);
  --text-display--line-height: 0.92;
  --text-display--letter-spacing: -0.035em;
  --text-headline: clamp(2rem, 1.4rem + 2.8vw, 3.5rem);
  --text-headline--line-height: 1;
  --text-headline--letter-spacing: -0.03em;
  --text-title: clamp(1.5rem, 1.3rem + 0.6vw, 1.875rem);
  --text-title--line-height: 1.05;
  --text-title--letter-spacing: -0.02em;
  --text-lead: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --text-lead--line-height: 1.45;
  --text-body: 1.0625rem;
  --text-body--line-height: 1.55;
  --text-small: 0.875rem;
  --text-small--line-height: 1.45;
  --text-tag: 0.75rem;
  --text-tag--line-height: 1.3;
  --text-tag--letter-spacing: 0.08em;
  --text-price: clamp(1.375rem, 1.2rem + 0.8vw, 2rem);
  --text-price--line-height: 1;
  --text-date: clamp(1.75rem, 1.2rem + 2.2vw, 3.25rem);
  --text-date--line-height: 1;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-quart: cubic-bezier(0.5, 0, 0.75, 0);

  --container-page: 1280px;
}

@theme inline {
  --font-sans: var(--font-golos), system-ui, sans-serif;
  --font-mono: var(--font-martian), ui-monospace, monospace;
}

@layer base {
  html { background: var(--color-cream); color: var(--color-ink); scroll-padding-top: 16px; }
  body { font-family: var(--font-sans); font-size: var(--text-body); line-height: 1.55; -webkit-tap-highlight-color: transparent; }
  ::selection { background: var(--color-cherry); color: var(--color-paper); }
  :focus-visible { outline: 2px solid var(--color-ink); outline-offset: 3px; }
  .on-dark :focus-visible { outline-color: var(--color-cream); }
  input, textarea { caret-color: var(--color-cherry); }
  a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
}
```

После `--color-*: initial` существующие `border-neutral-*`, `text-red-700` в `LeadForm.tsx` перестанут работать — классы заменить на токены при вёрстке (только `className`, логику и data-атрибуты не трогать).

## Typography

**Display/Body:** Golos Text (variable, wght 400–900), `--font-golos`.
**Mono:** Martian Mono (variable, wght 100–800, wdth 75–112.5), `--font-martian`.

```ts
// app/layout.tsx
import { Golos_Text, Martian_Mono } from 'next/font/google';
const golos = Golos_Text({ subsets: ['cyrillic', 'latin'], variable: '--font-golos', display: 'swap' });
const martian = Martian_Mono({ subsets: ['cyrillic', 'latin'], variable: '--font-martian', axes: ['wdth'], display: 'swap' });
// <html lang="ru" className={`${golos.variable} ${martian.variable}`}>
```

**Character:** плотный гротеск с тяжёлыми заголовками, как на настенном календаре; моно — как цифры датера и весов. Курсива нет вообще, serif нет вообще.

### Hierarchy (mobile 390 → desktop 1440)

| Роль | Шрифт | Размер 390 → 1440 | LH | Tracking | Вес | Где |
|---|---|---|---|---|---|---|
| display | Golos | 44 → 96px | 0.92 | −0.035em | 900 | только H1 первого экрана; `text-wrap: balance` |
| headline | Golos | 32 → 56px | 1.0 | −0.03em | 800 | H2 секций |
| title | Golos | 24 → 30px | 1.05 | −0.02em | 800 | название сорта, «Доставка»/«Самовывоз», H3 |
| lead | Golos | 18 → 22px | 1.45 | 0 | 400 | подзаголовок под H1/H2, ≤ 46ch |
| body | Golos | 17px | 1.55 | 0 | 400 (500 — выделение) | абзацы, ≤ 62ch |
| small | Golos | 14px | 1.45 | 0 | 500 | регион сорта, примечания, ошибки полей |
| label (UI) | Golos | 15px | 1.3 | 0 | 600 | подписи полей, кнопки (кнопки 16px/700) |
| tag | Martian | 12px | 1.3 | 0.08em | 500, wdth 100, CAPS | подписи полей этикетки, ноты, «обжарка»/«доставка» |
| price | Martian | 22 → 32px | 1.0 | −0.02em | 600, wdth 100, `tnum` | цены «32 BYN», вес «250 г» (вес — 16px/500) |
| date | Martian | 28 → 52px | 1.0 | −0.04em | 700, **wdth 87.5** | числа в ленте недели |
| day-letter | Golos | 14 → 16px | 1 | 0.04em | 800, CAPS | «ПН», «ВТ» в ленте |
| stamp | Martian | 14–22px (по размеру штампа) | 1 | 0.04em | 700, **wdth 112.5**, CAPS | текст штампа |
| hours | Martian | 15px | 1.4 | 0 | 500, wdth 100, `tnum` | часы самовывоза, телефон |

`wdth` задавать через `font-stretch: 87.5%` / `112.5%`. Если next/font не объявит диапазон `font-stretch`, использовать `font-variation-settings: "wdth" 87.5` (вес продолжает задаваться `font-weight`).

### Named Rules
**Правило моно-фактов.** Martian Mono — только для чисел, дат, веса, цен, часов, телефона и коротких CAPS-меток. Предложения и заголовки моно не набираются.
**Правило без сплошного капса.** CAPS — только tag, day-letter и stamp. Заголовки — в предложном регистре.
**Правило неразрывных.** Тексты из site.ts выводятся через `typo()` (`lib/typo.ts`): неразрывный пробел после коротких предлогов и союзов, между числом и единицей (5 кг, 250 г, 32 BYN), неразрывный дефис в двойных латинских фамилиях. Фразы, которые не должны рваться (ноты), — через `keep()`. Цена подписки: число и «BYN» моно, единица «в месяц» — Golos 16px `muted`.

## Layout

- **Mobile-first.** Брейкпоинты Tailwind по умолчанию: `md` 768 (две колонки), `lg` 1024 (12-колоночная сетка), `xl` 1280.
- **Сетка:** 390 — 4 колонки, гаттер 16px, поля 20px. ≥1024 — 12 колонок, гаттер 24px, поля 48px, контейнер `max-w-page` 1280px по центру (на 1440 поля ≈ 80px).
- **Ритм секций:** padding-y 48px (390) → 80px (1440), между соседними секциями 96 → 160px. Отступ над H2 больше, чем под ним: H2 → лид 16px, лид → контент 40px (390) / 64px (1440).
- **Разделение секций:** не фоном-плашкой, а линейкой 2px `ink` по ширине контейнера сверху секции + сменой поверхности только у тёмного блока и формы.
- **Шкала отступов:** 4, 8, 12, 16, 20, 24, 32, 48, 72, 128.

## Elevation & Depth

Плоско. `box-shadow` не используется нигде (токены теней обнулены). Глубину дают: смена поверхности (cream → kraft → paper → roast), линейки 1/2px, наложение штампа поверх фото и края колонки, лента-наклейка, срезанная краем этикетки (`overflow: hidden`).

**Правило печати.** Если хочется тени — нужна линейка или смена поверхности.

## Shapes

- Радиус 0 у всего: кнопки, поля, этикетки, фото, уведомления, фокус-обводка. `hair` 2px — запас для мелких SVG-квадратиков (маркер выбранного интереса), больше нигде.
- Линейки: `1px ink` — внутри этикеток и ленты недели; `1.5px` — рамки кнопок secondary и полей формы (`muted`, в фокусе/ошибке 2px); `2px ink` — верх секций, рамка штампа (внешняя 2px + внутренняя 1px, зазор 3px), рамка блока формы.
- Перфорация дрип-пакета: верхний край — SVG пунктир (dash 6, gap 4, 1px ink).

## Components

### Stamp
Резиновый оттиск даты. Inline SVG, чтобы фильтр краски жил внутри SVG, а анимировалась обёртка.
- **Props:** `lines: string[]` (1–3 строки, CAPS), `size: 'sm' | 'md' | 'lg'` (ширина 112 / 168 / 232px), `rotate` (−7…+5°, по умолчанию −6), `animate?: boolean`, `tone: 'cherry' | 'cherry-on-dark'`.
- **Вид:** двойная рамка (2px снаружи, 1px внутри, зазор 3px), цвет `cherry`, `opacity: 0.92`; текст Martian 700, wdth 112.5; строки разделены линейкой 1px. Смещение «мимо приводки»: внутренний текст сдвинут на `translate(1px, -1px)` относительно рамки.
- **Неровность краски:** один общий `<svg><defs><filter id="stamp-ink">` в layout: `feTurbulence type=fractalNoise baseFrequency=0.9 numOctaves=2 seed=4` → `feDisplacementMap scale=1.6` (дрожание края) + вторая `feTurbulence baseFrequency=0.06` → `feColorMatrix` в альфу → `feComposite operator=in` (пропуски краски ~10%). Фильтр статичен, не анимируется.
- **Экземпляры:** hero — `lg`, строки «ОБЖАРКА» / «ЧТ 22.10» (дата вычисляется) / «МИНСК»; этикетка — `sm`, «ЧТ 22.10»; успех формы — `md`, «ПРИНЯТО» и «ДОПИСАЛИ» для `clarified`.
- **Доступность:** SVG `aria-hidden`, рядом визуально скрытый текст «Ближайшая обжарка — четверг, 22 октября».

### Дата ближайшей обжарки
`lib/roastWeek.ts`: `getRoastWeek(now: Date)` в часовом поясе Europe/Minsk → `{ days: {letter, date, iso}[7] (пн–вс), roast: четверг (сегодня, если сегодня чт, иначе следующий), delivery: roast + 1 }`. Страница — серверный компонент с `export const revalidate = 3600`. Формат: `ЧТ 22.10`. Это следует из факта «обжарка по четвергам», ничего не добавляет.

### WeekStrip
- **390 (вертикально, «дни столбиком»):** 7 строк по 48px. Строка: слева колонка 64px — day-letter над числом date; справа линейка 1px `ink` по базовой линии, на ней tag-подпись. ЧТ: буква и число `cherry`, подпись «ОБЖАРКА · ПАРТИЯ 5 КГ». ПТ: `cherry`, «ДОСТАВКА ПО МИНСКУ». СБ, ВС и ПТ справа охвачены вертикальной скобкой 2px `cherry` с подписью «1–3 ДЕНЬ — ЗЕРНО У ВАС». Остальные дни `muted`, без подписи.
- **1440 (горизонтально):** 7 равных колонок на 12-колоночной сетке, высота ~200px. Сверху day-letter, под ним date (52px), снизу общая линейка 1px через всю ширину; подписи tag под линейкой в колонках ЧТ и ПТ. Под ПТ–ВС — горизонтальная скобка (2px, загнутые концы 8px) с подписью «1–3 ДЕНЬ ПОСЛЕ ОБЖАРКИ — ЗЕРНО У ВАС». Вертикальные разделители колонок — 1px `rule-soft`.
- **Разметка:** `<ol aria-label="Неделя обжарки">` из 7 `<li>`; у ЧТ и ПТ подпись — текст в `<li>`, не только цвет. Числа в `<time dateTime>`.

### Label (карточка сорта)
```
┌─────────────────────────────────┐ ← kraft, 1px ink, overflow hidden
│ КВАРТА · МИНСК                  │ tag, muted
│                                 │
│ Эфиопия                         │ title 800
│ Иргачеффе                       │ small 500, muted
│─────────────────────────────────│ 1px ink
│ НОТЫ   ЦВЕТОЧНЫЙ • БЕРГАМОТ       │ tag muted / tag ink
│─────────────────────────────────│
│ ОБЖАРКА  светлая                 │ spec из site.ts, если есть
│─────────────────────────────────│
│ ДАТА ОБЖАРКИ          [ЧТ 22.10] │ поле + Stamp sm
│─────────────────────────────────│
│ 250 г                    32 BYN │ PriceTag
│ [ Заказать эту пачку         ]  │ button-secondary, 100%
└─────────────────────────────────┘
```
- Padding 20px (390) / 24px (1440). Поля этикетки — строки min-height 40px, подпись tag `muted` колонкой 96px, значение tag `ink`.
- Поле `spec` (site.ts) только из фактов: Эфиопия — «ОБЖАРКА — светлая», Бразилия — «ДЛЯ — эспрессо», дрип — «КАК — заваривается прямо в чашке», у Колумбии поля нет (в ТЗ нет — не выдумывать). Значение — Golos small 500.
- Строка «ДАТА ОБЖАРКИ»: min-height 72px, `align-items: center`, padding-y 12px; под ней сразу линейка цены (без зазора). Штамп `lg`-строкой шириной 136px; повороты −4°, 3°, −2°, 5° и сдвиги по X 0 / 12 / 4 / 20px (Эфиопия, Колумбия, Бразилия, дрип).
- Лент-наклеек нет (сняты в итерации критика 1).
- На ≥768 карточки сортов делят строки сетки через `grid-template-rows: subgrid` (шапка / поля / цена): линейка под названием на одной высоте у всех; строка «дата обжарки» растягивается, если полей меньше.
- Значения полей — line-height 1.3; «•» между нотами склеен неразрывным пробелом со следующей нотой.
- Вес «250 г»: число и единица — отдельные span, отступ 0.25em через CSS вместо моноширинного пробела.
- Ноты склеены неразрывным пробелом внутри ноты («красное яблоко» не рвётся).
- **Дрип-пакеты:** вариант `Label variant="drip"`: на 1440 горизонтальный (вся ширина, высота ~180px; слева название «Дрип-пакеты» + «ассорти», в центре поля «10 ШТ», справа цена и кнопка), сверху перфорация вместо сплошной линии. На 390 — как обычная этикетка, но ниже (без поля нот). Лента та же.
- Никаких фото внутри этикеток и никаких вложенных карточек.

### PriceTag
`<p>`: вес слева (Martian 16px/500), цена справа (price, 600, `tnum`), «BYN» тем же шрифтом на 60% размера, базовая линия общая. Подписка: «54 BYN» + «/ мес» (16px, `muted`). Сверху линейка 1px `ink`. Цена — всегда текст, не картинка.

### Кнопки
Тач-цель ≥ 52px высотой, на 390 основные CTA на всю ширину. Шрифт Golos 16px/700, без CAPS. Переходы только `background-color`, `color`, `transform`.

| Состояние | primary (`cherry`) | secondary (рамка 1.5px `ink`) | on-dark secondary |
|---|---|---|---|
| idle | bg cherry, текст paper | bg transparent, текст ink | рамка и текст cream |
| hover (`@media (hover:hover)`) | bg cherry-deep, 120ms ease-out | bg ink, текст cream, 120ms | bg cream, текст roast |
| focus-visible | outline 2px ink, offset 3px (на тёмном — cream) | то же | outline cream |
| active | bg cherry-deep, `translateY(1px)`, 60ms | `translateY(1px)` | `translateY(1px)` |
| disabled (не отправка) | bg rule-soft, текст ink (8.51:1), `cursor: not-allowed`, без hover | рамка rule-soft, текст muted | — |
| submitting (`aria-busy="true"`) | bg cherry остаётся (не «серая»), текст «Отправляем…» из FORM_TEXT, справа три квадратика 4px paper, мигают по очереди (opacity 0.3→1, шаг 160ms), `cursor: progress`; ширина кнопки фиксирована `min-width` по idle, чтобы не прыгала | — | — |
| success | кнопка исчезает вместе с формой (так в LeadForm); фокус уходит на «Отправить ещё одну» (secondary) | | |
| error | кнопка возвращается в idle; над ней блок уведомления (см. ниже) | | |

Стили submitting вешать на `[aria-busy="true"]`, disabled-вид — на `:disabled:not([aria-busy])`. Иконка-стрелка в secondary этикетки — SVG 16px, stroke 1.5.

### Поля формы (`LeadForm`, data-атрибуты уже есть)
- **Блок формы:** `paper`, рамка 2px `ink`, padding 20px (390) / 40px (1440). Шапка блока — строка «ЗАЯВКА» tag слева и Stamp-место справа (пусто до успеха).
- **Label:** Golos 15px/600 ink, отступ до поля 8px. Между полями 20px.
- **Input/textarea:** высота 52px (textarea min 112px), bg `paper`, рамка 1.5px `muted`, радиус 0, padding 0 14px, Golos 17px (≥16px — iOS не зумит). Плейсхолдер `placeholder`.
- **focus-visible / focus:** рамка 2px `ink` (padding компенсировать −0.5px), outline 2px `ink` offset 2px.
- **`[data-invalid]`:** рамка 2px `cherry`; текст ошибки `[data-field-error]` — small 500 `cherry-deep`, отступ 6px, слева SVG «!» в квадрате 14px `cherry`. Ошибка не только цветом: есть текст и `aria-describedby` (уже в коде).
- **Интерес (`fieldset[role=radiogroup]`):** три «талона» — `label` min-height 48px, рамка 1.5px `muted`, padding 0 16px; на 390 столбиком на всю ширину, ≥768 в ряд. Нативный radio визуально скрыт (`sr-only`, не `display:none`). `[data-checked]`: bg `ink`, текст `cream`, слева кружок радиокнопки 12px: в idle рамка 1.5px `muted`, в checked — кольцо 1.5px `cream` с точкой `cherry` 6px. Выбор одиночный, поэтому кружок, не квадрат. Фокус: `label:has(:focus-visible)` outline 2px ink offset 2px. `fieldset[data-invalid]` — у всех талонов рамка `cherry`.
- **Honeypot:** не трогать.

### Уведомления (`[data-lead-notice]`, по `data-notice` на обёртке)
- **created / clarified (`data-state="success"`):** блок paper, рамка 2px `ink`, padding 24px; Stamp `md` «ПРИНЯТО» (или «ДОПИСАЛИ» для clarified), поворот −5°, анимация оттиска; рядом текст title 800 из FORM_TEXT; галочка SVG `ok` 20px. Ниже — кнопка secondary «Отправить ещё одну».
- **failed / rate_limited (`data-state="error"`):** блок paper, линейка 2px `cherry` сверху (не слева), tag `cherry-deep` «НЕ ОТПРАВЛЕНО», текст body, телефон — Martian 18px/600, ссылка `tel:`, тач-цель 44px.
- `aria-live="polite"` уже стоит; блок не прыгает: при появлении — только opacity 0→1, 160ms.

### StickyCta (только < 768px)
- Фиксирован снизу, `padding: 8px 20px calc(8px + env(safe-area-inset-bottom))`, bg `cream`, линейка 1px `ink` сверху, без тени. Внутри слева подпись `site.stickyCta.note` («Обжарка в четверг, доставка в пятницу», small 500, `muted`, 2 строки максимум), справа CtaButton primary 52px «Заказать кофе» (`site.stickyCta.label`).
- `interest: 'one_time'`, без comment, `source="sticky"`.
- Показывается, когда главная CTA первого экрана ушла из вьюпорта; скрывается, когда в вьюпорте `#lead`, или фокус внутри формы, или открыта клавиатура (`visualViewport.height < innerHeight * 0.75`). Один IntersectionObserver на два якоря. В скрытом состоянии `aria-hidden="true"` и `inert`.
- Подвалу на мобиле — `padding-bottom: 88px`, чтобы бар не закрывал контакты.

### Шапка
Не липкая. Высота 64px. Слева логотип: SVG-знак (7 вертикальных штрихов 3×20px, шаг 3px, 4-й `cherry`, остальные `ink`) + «Кварта» Golos 900 22px. Справа на 390 — ссылка-иконка телефона 44×44 (`aria-label="Позвонить: +375 29 000-00-00"`); на ≥1024 — якоря «Сорта», «Подписка», «Доставка» (Golos 15px/600, подчёркивание при hover) и телефон Martian 15px.

## Секции

Тексты — из `content/site.ts` (пишет копирайтер), CTA-подписи — тоже из site.ts. Ниже — композиция и факты, которые обязаны попасть в блок.

### 1. Первый экран `#hero`
- **Факты:** обжарка по четвергам, развоз по пятницам, Минск. Дата ближайшей обжарки — в штампе.
- **390:** шапка 64 → H1 display (≤ 3 строк, ≤ 40 знаков) → lead (≤ 3 строк) → 24px → primary CTA на всю ширину → 12px → secondary CTA на всю ширину → 56px → фото зерна во всю ширину экрана (без полей), 390×300, Stamp на бумажной подложке (`backing`, иначе красный на тёмном зерне нечитаем) наезжает на верхний левый край фото (top −56px, left 20px, rotate −6°). Первый вьюпорт (≈ 750px) вмещает H1, lead, CTA и верх штампа.
- **1440:** 12 колонок. Кол. 1–7: H1 96px, lead (≤ 46ch), ряд CTA (primary + ссылка). Кол. 8–12: фото зерна 4:5 (≈ 500×625), выровнено по верху H1, обрезано правым полем контейнера. Stamp `lg` лежит на левом нижнем углу фото, заходя на 64px в кол. 7. Высота секции ≈ 760px.
- **CTA (по site.ts):** primary — CtaButton `site.hero.ctaPrimary` (`subscription`), secondary — CtaButton `site.hero.ctaSecondary` (`one_time`, без comment). `site.hero.eyebrow` не выводится: надзаголовки запрещены (см. Don't).
- **Фото:** GDmiFs9lfrQ (Mona Jain, зерно на весь кадр). `next/image`, `priority`, `fetchPriority="high"`, `sizes="(min-width: 1024px) 500px, 100vw"`, `object-fit: cover; object-position: center`. Alt: «Обжаренное кофейное зерно крупным планом».

### 2. Почему свежесть `#fresh`
- **Факты:** обжарка в четверг партиями по 5 кг; развоз по Минску в пятницу; зерно у вас на 1–3 день после обжарки.
- **390:** H2 → lead → WeekStrip вертикальный.
- **1440:** H2 и lead в кол. 1–6, WeekStrip горизонтальный на все 12 колонок ниже.
- **Анимация:** WeekStrip (см. «Моушн»). CTA нет. Фото нет. SVG: скобка, линейки.

### 3. Ассортимент `#coffee`
- **Факты:** три сорта и дрип-пакеты — названия, ноты, вес, цены точно по ТЗ; под сеткой строка small «Доставка по Минску от 50 BYN — бесплатно» со ссылкой на `#delivery`.
- **390:** H2 → 3 Label столбиком (gap 16px) → Label drip.
- **768:** 2 колонки, drip на всю ширину.
- **1440:** 3 Label по 4 колонки, ниже drip горизонтальный на 12 колонок.
- **CTA (secondary в каждой этикетке, `source="coffee"`):**
  - Эфиопия: `one_time`, comment «Эфиопия Иргачеффе, 250 г»
  - Колумбия: `one_time`, «Колумбия Уила, 250 г»
  - Бразилия: `one_time`, «Бразилия Серрадо, 250 г»
  - Дрип: `one_time`, «Дрип-пакеты ассорти, 10 шт»
- Фото нет. SVG: перфорация, стрелка, штампы (статичные, повороты и сдвиги — см. Label).
- Дрип на ≥1024: три зоны (название / поля / цена и кнопка) по центру по вертикали, между зонами вертикальная линейка 1px `ink`, верхних линеек у первой строки полей и у цены нет.

### 4. Подписка `#subscription`
- **Факты:** 2 пачки по 250 г раз в месяц, доставка бесплатно, 54 BYN/мес.
- **Вид:** одна большая этикетка-абонемент на `kraft`, без ленты. Внутри поля: «СОСТАВ — 2 ПАЧКИ × 250 Г», «КАК ЧАСТО — РАЗ В МЕСЯЦ», «ДОСТАВКА — БЕСПЛАТНО»; справа/снизу PriceTag крупно: «54 BYN / мес» (price ×1.5 = 48px на 1440). SVG: два силуэта пачки (прямоугольник с клапаном, 1.5px ink, без заливки), во второй пачке маленький знак «7 штрихов».
- **390:** H2 → lead → этикетка (поля столбиком, цена внизу) → primary CTA во всю ширину.
- **1440:** H2 + lead в кол. 1–5; этикетка в кол. 6–12: слева поля, справа цена и primary CTA.
- Цена без своей линейки: поля подписки замкнуты линейкой снизу, цена и CTA выровнены по низу полей; примечание — строкой под всей этикеткой.
- **CTA:** CtaButton `site.subscription.cta` (`subscription`, comment «Подписка: 2 пачки в месяц»).

### 5. Кто мы `#about`
- **Факты:** с 2019 года, основатели Аня и Дмитрий, бывшие бариста, партии по 5 кг. Ничего больше (ни цитат, ни наград).
- **390:** фото на всю ширину 390×260 → H2 → body → одна tag-строка `site.about.factsLine` (Martian 12px `muted`, CAPS) между линейками 1px `ink`, padding-y 12px. Ряд крупных цифр не делаем (hero-метрики).
- **1440:** фото кол. 1–6 (3:2, ≈ 610×407), текст кол. 8–12, выровнен по низу фото.
- **Фото:** _7CVm353m7A (Scott Soltys-Curry, охладитель ростера). `sizes="(min-width: 1024px) 610px, 100vw"`, `object-position: center 40%`, lazy. Alt: «Свежеобжаренное зерно остывает в охладителе ростера». Подпись/текст не утверждает, что это цех «Кварты».
- CTA нет.

### 6. Доставка и самовывоз `#delivery` (тёмная, класс `on-dark`)
- **Фон:** `roast`, текст `cream`. Факты: доставка по Минску в пятницу, от 50 BYN бесплатно, дешевле — стоимость уточнит менеджер; самовывоз ул. Короля, 9; пн–пт 8:00–20:00, сб–вс 10:00–18:00.
- **<768:** фото мешка скрыто (рядом уже охладитель), секция начинается с H2, padding-top 48px. **768–1023:** фото полосой сверху. **≥1024:** фото абсолютно слева на 42% ширины экрана, контент в колонках 7–12 контейнера 1280. **390:** H2 → блок «Доставка» (title; поля этикетки: подпись `muted-on-dark`, значение `cream`, линейки 1px `muted-on-dark`) → блок «Самовывоз»: адрес title, часы таблицей Martian (`<dl>`: «ПН–ПТ  8:00–20:00», «СБ–ВС  10:00–18:00»), ссылка «Открыть в Яндекс Картах» (`https://yandex.by/maps/?text=Минск, ул. Короля, 9`, `target=_blank rel=noopener`) → secondary on-dark CTA.
- **1440:** фото кол. 1–5 на всю высоту секции (bleed влево до края экрана), справа кол. 7–12: H2, два блока рядом (по 3 колонки), CTA снизу.
- Строки доставки — поля с tag-подписью `muted-on-dark` (`site.delivery.delivery.labels`); акцент `cherry-on-dark` только на слове `accent` («бесплатно»).
- Под сеткой ассортимента — строка small `site.catalog.deliveryNote` ссылкой на `#delivery`.
- **Фото:** obV_LM0KjxY (Tina Guina, мешок на тёмном). `sizes="(min-width: 1024px) 40vw, 100vw"`, `object-position: center`, lazy. Alt: «Открытый мешок с кофейным зерном».
- **CTA:** CtaButton secondary on-dark, `interest: 'question'`, без comment (подпись `site.delivery.cta`). Акценты (ПТ, «бесплатно») — `cherry-on-dark`.
- Карты-iframe нет (производительность).

### 7. Форма `#lead`
- Существующий `LeadForm` в блоке paper (см. «Поля формы»). `scroll-mt-4` уже есть.
- **390:** H2 → lead → «Или позвоните:» отдельной строкой small `muted` → номер Martian 22px/600 ссылкой `tel:`, `nowrap`, высота 44px → блок формы на всю ширину.
- **1440:** кол. 1–5: H2, lead, телефон Martian 22px, часы работы tag; кол. 6–12: блок формы.
- Комментарий, пришедший из CTA, виден в textarea — посетитель его видит и может стереть.

### 8. Подвал (`roast`, `on-dark`)
Логотип (знак + «Кварта» cream), адрес, часы, телефон; строка small `muted-on-dark`: «Фото: Mona Jain, Tina Guina, Scott Soltys-Curry — Unsplash». Без соцсетей (их нет в ТЗ). На 390 — колонкой, на 1440 — 4 колонки по 3.

### Фото: общая техника
Скачать три фото в `apps/landing/public/photos/` (`beans.jpg`, `sack.jpg`, `cooler.jpg`, ширина 2000px, JPEG q≈78) — без `remotePatterns`. Фото без фильтров и цветокора «под бежевый»; допустим только кроп.

## Моушн

Только CSS (`@keyframes`, `transition`) + один общий хук `useInView` на IntersectionObserver (`threshold: 0.35`, `once`). Анимируются только `transform` и `opacity` (у скобки — `transform: scaleX/scaleY`). Bounce, overshoot, spring — нет.

**Видимое по умолчанию.** Без JS всё в финальном состоянии. Инлайн-скрипт в `<head>` ставит `document.documentElement.dataset.motion = ''` только если `!matchMedia('(prefers-reduced-motion: reduce)').matches && 'IntersectionObserver' in window`. Начальные состояния анимаций пишутся под `[data-motion] .x:not([data-inview])`.

| Движение | Триггер | Длительность / задержка | Easing | Что | Reduced motion |
|---|---|---|---|---|---|
| Оттиск штампа (hero) | загрузка, CSS-анимация, без IO | 380ms, delay 250ms | `--ease-out-expo` | opacity 0→0.92, scale 1.18→1, rotate (r−3°)→r | статичен с начала |
| Оттиск штампа (успех формы) | `data-state="success"` | 380ms, delay 80ms | `--ease-out-expo` | то же | статичен |
| Штампы на этикетках | — | — | — | не анимируются | — |
| Лента недели | IO 0.35 | линейка scaleX 0→1 600ms (origin left); ЧТ: цвет-подложка opacity 0→1 + подпись translateY(6px)→0, opacity, 320ms, delay 300ms; ПТ — то же, delay 480ms; скобка scaleX (на 390 scaleY) 0→1 500ms, delay 680ms, подпись скобки opacity 240ms, delay 1000ms | `--ease-out-quart` | красный текст ЧТ/ПТ — отдельный слой поверх серого, меняется opacity (не `color`) | всё в финале сразу |
| Кнопка hover | pointer | 120ms | ease-out | background-color | без изменений (это не движение) |
| Кнопка active | press | 60ms | linear | translateY(1px) | убрать translate |
| Submitting-точки | `aria-busy` | цикл 480ms, шаг 160ms | steps(1) | opacity 0.3↔1 | точки статичны (все 1), текст «Отправляем…» остаётся |
| Уведомление | появление | 160ms | ease-out | opacity | мгновенно |
| StickyCta | IO по якорям | показ 240ms `--ease-out-quart`, скрытие 180ms `--ease-in-quart` | | translateY(100%)↔0 | только мгновенное появление/скрытие |
| Скролл к форме | CTA | нативный smooth (уже в prefillLead) | | | `auto` (уже в коде) |

`will-change` не ставить заранее. Никаких parallax, scroll-linked, marquee, анимаций на каждой секции.

## Do's and Don'ts

### Do:
- **Do** показывать свежесть датой: штамп «ЧТ 22.10», лента недели.
- **Do** держать все цены и условия из ТЗ текстом, видимыми без клика.
- **Do** использовать линейки 1/2px `ink` для структуры вместо плашек.
- **Do** давать Martian Mono только числам и коротким меткам.
- **Do** разные повороты штампов (−7…+5°), смещение текста относительно рамки.
- **Do** проверять на 390 и 1440 с реальными текстами из site.ts.

### Don't (impeccable + «бежевый AI»):
- **Don't** мягкие бежевые градиенты, шум/зерно-оверлеи, «тёплую» дымку на фото.
- **Don't** скруглённые карточки с тенями; `box-shadow` любой, включая жёсткую смещённую.
- **Don't** generic hero с чашкой/латте-артом, руками, людьми, паром.
- **Don't** фиолетовые, градиентные, неоновые акценты; второй акцентный цвет; градиентный текст.
- **Don't** курсив и serif — ни в заголовках, ни в цитатах.
- **Don't** надзаголовки-«кикеры» над H2 и номера секций «01/02/03».
- **Don't** сетку «иконка + заголовок + текст» в одинаковых карточках, hero-метрики «5 кг / 2019 / 1–3 дня» крупными цифрами.
- **Don't** вложенные карточки (этикетка внутри этикетки).
- **Don't** сплошной CAPS и тотальный моно (берём из FreshColor/Altura только поле даты и ноты).
- **Don't** пёструю палитру Altura, белый фон и сетку месяца календаря Rationale.
- **Don't** `border-left` цветной на уведомлениях; эмодзи и юникод-глифы вместо иконок (иконки — свой SVG, stroke 1.5).
- **Don't** выдумывать отзывы, рейтинги, «лучший кофе в Минске», соцсети, адреса, цены доставки ниже 50 BYN.
- **Don't** тяжёлые библиотеки анимаций (framer-motion, GSAP, Lottie), карты-iframe, видео.

## Доступность

- Порядок фокуса = визуальный порядок: шапка → hero CTA → … → форма → подвал. StickyCta в DOM последней; скрытая — `inert`.
- Фокус: `:focus-visible` outline 2px `ink` offset 3px; на тёмном — `cream`; у талонов интереса — на `label:has(:focus-visible)`. Никогда `outline: none` без замены.
- Тач-цели ≥ 44×44 (кнопки 52px, талоны 48px, ссылки-якоря с padding до 44px, телефон в шапке 44×44).
- Ошибки — текстом + `aria-invalid` + `aria-describedby` (уже в коде), не только цветом. ЧТ/ПТ в ленте — подписью, не только цветом.
- `lang="ru"`. Один H1. H2 у каждой секции, у секций `aria-labelledby`.
- Alt фото — см. секции; декоративные SVG `aria-hidden`.
- Поля 17px (iOS без зума). `inputmode`/`autocomplete` уже стоят.
- Контраст — таблица в «Colors». Масштаб текста 200% без горизонтального скролла на 390.

## OG-картинка 1200×630 (`app/opengraph-image.tsx`, next/og)

```
┌────────────────────────────────────────────────────────────┐ cream
│ ▮▮▮▮▮▮▮ Кварта                          ┌──────────────┐    │ знак + Golos 900 64px
│                                         │ ОБЖАРКА ПО   │    │ Stamp cherry,
│ Свежая обжарка                          │ ЧЕТВЕРГАМ    │    │ rotate −6°, 300px
│ в Минске                                └──────────────┘    │ Golos 900 88px, ink, lh .92
│────────────────────────────────────────────────────────────│ 2px ink, y=380
│  ПН    ВТ    СР   [ЧТ]   [ПТ]    СБ    ВС                   │ day-letter 26px; ЧТ/ПТ cherry
│                  ОБЖАРКА ДОСТАВКА                            │ Martian 20px
│                        └──── 1–3 день — зерно у вас ──┘      │ скобка 2px cherry
│ kvarta.unuchak.com                     +375 29 000-00-00    │ Martian 20px muted
└────────────────────────────────────────────────────────────┘
```
- Тексты из site.ts: заголовок — `site.hero.title`, штамп — `site.hero.stamp`, подписи ленты — `site.freshness.days`, `alt` — `site.meta.ogTitle` (скетч выше — композиция, не текст).
- Поля 64px. Без фото и без дат (картинка кешируется), только дни недели.
- Satori не поддерживает SVG-фильтры и variable-шрифты: штамп — двойная рамка без «краски», шрифты — статичные TTF (Golos Text 900 и 500, Martian Mono 700), загружаются `fetch` из файлов в `src/app/og-fonts/` (подмножество кириллица+латиница). `alt`: «Кварта — свежая обжарка в Минске, обжарка по четвергам».