# Handoff: Редизайн маркетплейса teeu

## Обзор
Полный редизайн покупательской части маркетплейса teeu (teeu.ru): десктоп (все ключевые страницы + оверлеи), мобильная версия и UI-kit. Цель редизайна — уйти от «шаблонного/нейронного» вида: плотный торговый стиль (по образцу Ozon/Avito), жёсткая типографическая иерархия с ценой как главным элементом, хайрлайны вместо мягких теней.

## О файлах дизайна
Файлы в этом пакете — **дизайн-референсы, созданные в HTML** (Design Components, поток `.dc.html`). Это прототипы, показывающие целевой внешний вид и поведение, а НЕ production-код для прямого копирования. Задача разработчика — **воссоздать эти макеты в существующем стеке целевой кодовой базы** (React/Vue/и т.д.) с использованием её паттернов и библиотек; если стека ещё нет — выбрать подходящий фреймворк и реализовать дизайн в нём.

Формат файлов: внутри `<x-dc>` — HTML-шаблон с инлайн-стилями (source of truth по всем значениям), в `<script data-dc-script>` — логика-класс с данными и обработчиками. Читайте их как спецификацию разметки и стилей.

## Fidelity
**High-fidelity.** Все цвета, шрифты, отступы, радиусы и состояния — финальные и точные. Воспроизводить пиксель-в-пиксель. Фото товаров — заглушки (полосатые плейсхолдеры с тонировкой): в реальном приложении на их месте фотографии товаров, object-fit: cover, соотношение 1:1.

## Файлы
- `Teeu Redesign.dc.html` — десктоп: главная, каталог, товар, корзина, страница продавца, кабинет (обзор / заказы / заказ / пункты выдачи / профиль / сообщения+чат / уведомления / избранное), справочный центр + статья; оверлеи: мега-меню категорий, дропдаун профиля, модалка выбора города, поисковые подсказки.
- `Teeu Mobile.dc.html` — мобильная версия (390px): главная, товар, корзина, избранное, кабинет, drawer-каталог, нижняя таб-навигация.
- `ProductCard.dc.html` — переиспользуемая карточка товара (единственный shared-компонент).
- `UI Kit.dc.html` — спецификация: логотип, палитры, типографика, кнопки, поля, бейджи, карточка, шапка, токены.
- `assets/teeu-logo.png` — логотип с прозрачным фоном (1162×526). Тёмные поверхности: filter: brightness(0) invert(1).

## Дизайн-токены
Шрифт: 'Golos Text' (Google Fonts), веса 400/500/600/700/800. Кириллица.

Цвета бренда:
- Primary #1E4FD8 (кнопки, ссылки, акценты), hover #1740B0, на тёмном hover #3765E8
- Primary Tint #EDF2FE (вторичные кнопки, активные пункты нав), hover #DCE6FD
- Ink #14151A (футер, тёмные панели)

Нейтральные: текст #16181D, body #3A3F4A, secondary #5A5F6A, muted #8A8F98, disabled/зачёркнутое #9AA0AB, бордер #E7E9EE, внутренние разделители #F0F1F5/#F6F7F9, hover-фон #F2F4F8/#F8F9FB, фон секций #F6F7F9.

Семантические (текст / фон-подложка):
- Скидка/ошибка #E5322D / #FDECEC
- Успех/наличие #1D7A44 / #E5F5EB
- Предупреждение #B4682B / #FFF1E3
- Рейтинг (звезда) #F5A623

Радиусы: 6px бейджи · 7-8px кнопки, поля, карточки · 12px крупные панели, баннеры · 20px чипы-пилюли.
Тени: по умолчанию только бордер 1px #E7E9EE; hover карточек: border-color #C6CCDA + 0 6px 18px rgba(20,30,60,.09); стики-панели/дропдауны: 0 4px 16px rgba(20,30,60,.05) и 0 20px 44px rgba(20,30,60,.14); модалки: 0 30px 80px rgba(20,30,60,.3).
Сетка: контейнер max-width 1320px, поля 24px, gap 12px, товары 6 колонок (десктоп) / 2 колонки (мобайл).
Шкала отступов: 4 / 8 / 12 / 16 / 24 / 32.

Типографика:
- H1 страницы 26px/800/ls -0.5; H2 секции 22px/800/-0.4; заголовок товара 21px/700/-0.3
- Цена крупная 28px/800/-0.6; цена в карточке 17px/800/-0.2; body 13.5px/400/lh 1.55
- Название в карточке 13px, максимум 2 строки (-webkit-line-clamp:2); подписи 12px #8A8F98
- Минимум интерактивной цели на мобайле 44px (кнопки 46px)

## Ключевые компоненты
ProductCard: бордер 1px #E7E9EE, радиус 8; фото 1:1 с бейджем скидки (#E5322D, «−15%», 11.5px/700, радиус 6, отступ 8px сверху-слева); тело padding 10px 12px 12px, gap 6px: цена (17/800) + зачёркнутая старая (12.5 #9AA0AB) → название (2 строки, min-height 35px) → ★ рейтинг + продавец (12px) → кнопка «В корзину» (фон #EDF2FE, текст #1E4FD8, 12.5/600, высота ~34px, прижата к низу). Клик по карточке — переход на товар; клик по кнопке — добавление в корзину (stopPropagation).

Шапка (62px + ряд категорий 38px, sticky): лого 34px → город (открывает модалку) → синяя кнопка «Категории» (открывает мега-меню) → поиск (input с бордером 1.5px #1E4FD8 + приклеенная кнопка «Найти») → иконки 40×40 (уведомления/избранное/корзина с бейджами-счётчиками 15px) → профиль с дропдауном. Ряд категорий обрезается mask-image fade справа.

Мега-меню: панель под шапкой (грид 280px + 1fr, высота min(560px,70vh)): слева список категорий (hover переключает активную: фон #EDF2FE, текст #1E4FD8), справа подразделы в 3 колонки (column-count:3).

Степпер статусов заказа: 6 шагов, круги 28px (активный: фон #1E4FD8 белая цифра; неактивные: белый фон, бордер #E7E9EE, цифра #9AA0AB), соединительная линия 2px #E7E9EE позади кругов.

Мобайл: нижняя таб-навигация 5 вкладок (иконка 22px + подпись 10.5px, активная #1E4FD8 с фоном #EDF2FE, бейджи на корзине/избранном), drawer-каталог слева (330px, аккордеон), горизонтальные скролл-ленты для акций (карточки 160px).

## Взаимодействия
- Все переходы мгновенные (SPA), без анимаций перехода; hover-состояния через изменение цвета/бордера/фона.
- Оверлеи (мега-меню, дропдауны, поиск) закрываются по клику на полупрозрачный фон rgba(20,21,26,.2); модалка города — rgba(20,21,26,.45).
- Поиск: подсказки при фокусе/вводе — до 4 категорий («Категория: …») + до 5 товаров (мини-превью 34px, название с ellipsis, продавец, цена) + «Показать все результаты».
- Корзина: чекбоксы выбора по товарам и по продавцу (группировка по продавцам), степперы количества (min 1), удаление; итог в стики-панели справа пересчитывается по выбранному; кнопка оформления disabled (opacity .45) при нуле выбранных.
- Пункты выдачи: приоритезируемый список (▲▼ перемещение, «Убрать»), карта — заглушка (в проде OpenStreetMap/Leaflet).
- Чат: пузыри исходящих справа (#1E4FD8, радиус 12 12 4 12), отправка добавляет сообщение.
- Город: выбор в модалке подставляется в шапку и строку доставки товара.

## Состояние (референс из прототипа)
page (home/catalog/product/cart/seller/account/help/article), productId, sellerName, cart [{id,qty}], выбранные позиции корзины, city, состояние оверлеев, активная вкладка кабинета, активный чат + черновик, прочитанность уведомлений, порядок пунктов выдачи. В проде — соответствующие роуты и серверные данные.

## Ассеты
- assets/teeu-logo.png — единственный брендовый ассет (из исходника заказчика, фон удалён).
- Иконки — простые line-иконки stroke 1.8px, viewBox 24 (в прототипе инлайн-SVG). В проде подойдёт Lucide/Feather (совпадает по стилю).
- Эмодзи не используются. Фото товаров — заглушки.

## Скриншоты (screenshots/)
Десктоп: 01 — главная · 02 — мега-меню категорий · 03 — каталог · 04 — карточка товара · 05 — страница продавца · 06 — корзина · 07 — кабинет (обзор) · 08 — заказ со степпером статусов · 09 — справочный центр.
Мобайл: 01 — главная · 02 — drawer-каталог · 03 — товар · 04 — корзина · 05 — кабинет.