System Requirements Document for shadow-project

1. Introduction

shadow-project — публичный веб-сайт кофейни: одностраничный по духу, но трёхстраничный по структуре информационный сайт, который представляет кофейню, её меню и напитки, а также сведения для планирования визита (местоположение и часы работы). Продукт создаётся для кофейни, чей образ — «кофе как конфета»: яркое, фотогеничное, оптимистичное место, где напиток становится маленьким праздником.

Аудитория продукта:

• Посетитель сайта кофейни — человек, который ищет кофейню и хочет понять, что она предлагает: изучить меню и напитки, узнать о самой кофейне и её атмосфере, найти адрес и часы работы, чтобы решить, стоит ли прийти.
• Владелец кофейни — человек, которому нужен публичный сайт для представления своей кофейни: он определяет содержимое — меню, описание кофейни, контактные данные и часы работы — чтобы привлекать посетителей.

Сайт не является интернет-магазином, системой заказов, бронирования или доставки: он информирует и направляет к визиту. Все три страницы публичны и не требуют учётной записи.

2. System Overview

shadow-project — это публичный информационный веб-сайт кофейни, состоящий из трёх страниц:

1. Landing — анонимная первая страница сайта: представляет кофейню, объясняет её предложение и направляет посетителя к меню и сведениям для визита.
2. Menu — отдельная страница для просмотра представления кофейни, меню и напитков.
3. Visit Info — отдельная информационная страница с местоположением и часами работы для планирования визита.

Акторы:

• Посетитель сайта кофейни (человек) — просматривает Landing, изучает Menu, читает Visit Info, принимает решение о визите.
• Владелец кофейни (человек) — определяет содержимое сайта: меню, описание кофейни, контактные данные и часы работы.
• Система (веб-сайт) — не-персональный актор: отображает страницы, состояния загрузки, пустые состояния и ошибки.

Принятое поведение: представление кофейни и её предложения; просмотр меню и напитков; просмотр местоположения и часов работы; переходы между тремя страницами; корректные состояния загрузки, пустого содержимого, успеха, ошибки и восстановления.

Узкие исключения: сайт не принимает заказы, не обрабатывает платежи, не выполняет бронирование, не ведёт доставку, не требует учётной записи и не содержит личного кабинета. Это информационный сайт кофейни.

2a. Product Interpretation and Delivery Boundary

Владение доставкой. Продукт доставляется как собственный (first-party) веб-сайт приложения: все три страницы — Landing, Menu, Visit Info — принадлежат приложению и отрисовываются его собственным интерфейсом. Внешние провайдеры, сторонние платформы и headless-доставка источником не заданы и не используются.

Владение доступом. Все три страницы имеют access_requirement: none: они публичны и анонимны. Посетитель открывает сайт и сразу видит содержимое — без регистрации, входа, приглашения или провижининга. Учётная запись, сессия и личный кабинет не требуются и не создаются: ни одна принятая задача не создаёт долговременного персонального состояния, обязательства, права или передачи ценности, которое нужно было бы привязать к конкретному человеку и возобновить при следующем визите. Соответственно, нет ни анонимного пред-идентификационного жизненного цикла, ни защищённых страниц, ни управления доступом.

Роль владельца кофейни. Владелец кофейни — принятый человек-актор, который определяет содержимое сайта (меню, описание кофейни, контактные данные, часы работы). Это авторство содержимого, а не отдельная страница или модуль продукта: в текущем горизонте сайт не содержит административной панели, редактора контента или иного интерфейса управления. Содержимое, определённое владельцем, отображается на публичных страницах и является тем, что видит посетитель.

Границы текущего и будущего. Текущий горизонт — три публичные страницы и описанное выше поведение. Всё, что выходит за эти границы (заказы, платежи, бронирование, доставка, учётные записи, административные интерфейсы), в текущий продукт не входит.

2c. Page Content and Component Coverage

Landing

• Назначение и информация/состояние: анонимная первая страница сайта. Представляет кофейню, объясняет её предложение и направляет посетителя к меню и сведениям для визита. Отображает: название/образ кофейни, короткое описание предложения и атмосферы, визуальные якоря (глянцевые 3D-рендеры напитков, абстрактные blob-формы), точки перехода к Menu и Visit Info.
• Основные действия: переход к Menu («Смотреть меню»); переход к Visit Info.
• Поддерживающие действия: прокрутка страницы к секциям; навигация между страницами сайта.
• Доменные сущности: Кофейня (название, описание, образ); Напиток (представление, визуальный якорь); Меню (точка входа); Сведения для визита (точка входа).
• Компоненты:
  • Hero-блок: гигантский заголовок «Кофе как конфета» (Comfortaa 700, clamp(56px, 12vw, 128px), отрицательный трекинг, выравнивание по левому краю, уход за правый край с overflow: hidden), капсульная кнопка «Смотреть меню» (белый фон, розовый текст, глянцевый блик), 3D-рендер чашки латте с лаймовым акцентом в правом нижнем углу, частично выходящий за край; плоский розовый фон (#FF4D8D) с едва заметным шумом.
  • Секция представления кофейни: описание кофейни и её атмосферы.
  • Секция «О нас»: два перекрывающихся цветовых блока (розовый и лаймовый) с текстом внутри; крупный план зерна кофе как глянцевый 3D-объект.
  • Волнистые SVG-разделители между секциями, окрашенные в цвет следующего блока.
  • Навигация: фиксированная капсула внизу экрана на мобильном, сверху на десктопе; при скролле — плавающая капсула сверху с blur-эффектом.
• Состояния:
  • Загрузка: скелетон/плейсхолдеры для hero-заголовка, кнопки и 3D-рендера; контент появляется со stagger-анимацией (translateY 20px + opacity, 400ms ease-out).
  • Пустое: если описание кофейни или визуальный якорь недоступны — секция показывает нейтральную подложку и не ломает раскладку; заголовок и кнопка «Смотреть меню» остаются видимыми.
  • Успех: заголовок, кнопка и 3D-рендер отображаются целиком внутри вьюпорта и контейнера на 375px, 768px и 1280px; переходы к Menu и Visit Info доступны.
  • Ошибка: если 3D-рендер не загрузился — показывается абстрактная blob-форма-заменитель; заголовок и кнопка не затрагиваются.
  • Восстановление: повторная загрузка ресурса или замена на заменитель; страница остаётся полностью читаемой и навигируемой.

Menu

• Назначение и информация/состояние: отдельная страница для просмотра представления кофейни, меню и напитков. Отображает: категории меню, позиции напитков с названиями и описаниями, визуальные якоря напитков (глянцевые 3D-рендеры).
• Основные действия: просмотр категорий и позиций меню; чтение названий и описаний напитков.
• Поддерживающие действия: переход к Landing; переход к Visit Info; навигация между страницами сайта.
• Доменные сущности: Меню; Категория меню; Напиток (название, описание, визуальный якорь).
• Компоненты:
  • Заголовок страницы и микро-лейблы категорий (13px, letter-spacing 0.08em, uppercase только для категорий меню).
  • Карточки меню: мягкие прямоугольники с радиусом 32px, лёгкая тень, смещённая вниз (0 8px 24px rgba(255,77,141,0.12)); расположены лесенкой (staggered) с чередованием розового и лаймового фона; 3D-рендер напитка выглядывает за верхний край карточки.
  • Навигация: фиксированная капсула внизу экрана на мобильном, сверху на десктопе.
• Состояния:
  • Загрузка: карточки меню появляются со stagger-анимацией (translateY 20px + opacity, 400ms ease-out); плейсхолдеры для названий и описаний.
  • Пустое: если в категории нет позиций — категория показывает нейтральное сообщение об отсутствии позиций и не отображает пустые карточки; остальные категории остаются видимыми.
  • Успех: все категории и позиции отображаются; названия, описания и элементы управления целиком внутри вьюпорта и контейнера на 375px, 768px и 1280px.
  • Ошибка: если данные меню не загрузились — страница показывает сообщение об ошибке и действие «Повторить»; навигация к Landing и Visit Info остаётся доступной.
  • Восстановление: повторная загрузка данных меню; при повторной неудаче сообщение остаётся, страница не ломается.

Visit Info

• Назначение и информация/состояние: отдельная информационная страница с местоположением и часами работы для планирования визита. Отображает: адрес кофейни, часы работы, контактные данные, определённые владельцем кофейни.
• Основные действия: чтение адреса; чтение часов работы; чтение контактных данных.
• Поддерживающие действия: переход к Landing; переход к Menu; навигация между страницами сайта.
• Доменные сущности: Местоположение (адрес); Часы работы; Контактные данные.
• Компоненты:
  • Блок местоположения: адрес кофейни.
  • Блок часов работы: дни и интервалы.
  • Блок контактных данных: телефон и/или иные контакты, определённые владельцем.
  • Навигация: фиксированная капсула внизу экрана на мобильном, сверху на десктопе.
• Состояния:
  • Загрузка: плейсхолдеры для адреса, часов работы и контактов.
  • Пустое: если часы работы или контактные данные не заданы — блок показывает нейтральное сообщение «уточняется» и не отображает пустые строки; адрес отображается, если задан.
  • Успех: адрес, часы работы и контактные данные отображаются целиком внутри вьюпорта и контейнера на 375px, 768px и 1280px.
  • Ошибка: если данные не загрузились — страница показывает сообщение об ошибке и действие «Повторить»; навигация к Landing и Menu остаётся доступной.
  • Восстановление: повторная загрузка данных; при повторной неудаче сообщение остаётся, страница не ломается.

3. Functional Requirements

FR-1. Представление кофейни на первой странице

As a Посетитель сайта кофейни I should открыть первую страницу сайта и увидеть, что это за кофейня и что она предлагает, so that я могу решить, интересно ли мне это место.

• Provenance: required_inference (Landing, public_entry_surface).
• Триггер/вход: посетитель открывает сайт по адресу; анонимный доступ, без учётной записи.
• Наблюдаемый результат: отображаются название/образ кофейни, короткое описание предложения и атмосферы, визуальные якоря (глянцевые 3D-рендеры напитков, абстрактные blob-формы).
• Доступ: публичный, анонимный (access_requirement: none).
• Отказ/восстановление: если визуальный якорь не загрузился — показывается абстрактная blob-форма-заменитель; заголовок и описание остаются видимыми.
• Продолжение: посетитель переходит к Menu или Visit Info.

FR-2. Переход к меню с первой страницы

As a Посетитель сайта кофейни I should нажать «Смотреть меню» на первой странице и попасть на страницу меню, so that я могу изучить напитки.

• Provenance: required_inference (Landing → Menu).
• Триггер/вход: нажатие капсульной кнопки «Смотреть меню» (белый фон, розовый текст, глянцевый блик).
• Наблюдаемый результат: открывается страница Menu с меню и напитками.
• Доступ: публичный, анонимный.
• Отказ/восстановление: если переход не сработал — кнопка остаётся видимой и нажимаемой; повторное нажатие повторяет переход.
• Продолжение: просмотр меню (FR-4).

FR-3. Переход к сведениям для визита с первой страницы

As a Посетитель сайта кофейни I should перейти с первой страницы к сведениям для визита, so that я могу узнать адрес и часы работы.

• Provenance: required_inference (Landing → Visit Info).
• Триггер/вход: выбор перехода к Visit Info в навигации или в содержимом страницы.
• Наблюдаемый результат: открывается страница Visit Info с местоположением и часами работы.
• Доступ: публичный, анонимный.
• Отказ/восстановление: если переход не сработал — элемент навигации остаётся видимым и нажимаемым; повторный выбор повторяет переход.
• Продолжение: чтение сведений для визита (FR-6, FR-7).

FR-4. Просмотр меню и напитков

As a Посетитель сайта кофейни I should просматривать меню по категориям и читать названия и описания напитков, so that я могу понять, что предлагает кофейня.

• Provenance: required_inference (Menu).
• Триггер/вход: открытие страницы Menu; просмотр категорий и позиций.
• Наблюдаемый результат: отображаются категории меню и позиции напитков с названиями и описаниями; карточки меню — капсулы с чередованием розового и лаймового фона, расположенные лесенкой, с 3D-рендером напитка, выглядывающим за верхний край карточки.
• Доступ: публичный, анонимный.
• Отказ/восстановление: если данные меню не загрузились — сообщение об ошибке и действие «Повторить»; навигация к Landing и Visit Info остаётся доступной.
• Продолжение: посетитель переходит к Visit Info или возвращается на Landing.

FR-5. Пустое состояние категории меню

As a Посетитель сайта кофейни I should видеть понятное сообщение, если в категории меню нет позиций, so that я не принимаю пустую категорию за ошибку.

• Provenance: required_inference (состояние Menu).
• Триггер/вход: открытие категории, в которой нет позиций.
• Наблюдаемый результат: категория показывает нейтральное сообщение об отсутствии позиций; пустые карточки не отображаются; остальные категории остаются видимыми.
• Доступ: публичный, анонимный.
• Отказ/восстановление: не применимо — это уже корректное состояние.
• Продолжение: просмотр других категорий (FR-4).

FR-6. Просмотр местоположения

As a Посетитель сайта кофейни I should видеть адрес кофейни на странице сведений для визита, so that я могу понять, где находится кофейня.

• Provenance: required_inference (Visit Info).
• Триггер/вход: открытие страницы Visit Info.
• Наблюдаемый результат: отображается адрес кофейни, определённый владельцем кофейни.
• Доступ: публичный, анонимный.
• Отказ/восстановление: если данные не загрузились — сообщение об ошибке и действие «Повторить»; навигация к Landing и Menu остаётся доступной.
• Продолжение: чтение часов работы (FR-7).

FR-7. Просмотр часов работы

As a Посетитель сайта кофейни I should видеть часы работы кофейни, so that я могу спланировать визит.

• Provenance: required_inference (Visit Info).
• Триггер/вход: открытие страницы Visit Info.
• Наблюдаемый результат: отображаются дни и интервалы работы, определённые владельцем кофейни.
• Доступ: публичный, анонимный.
• Отказ/восстановление: если часы работы не заданы — блок показывает нейтральное сообщение «уточняется» и не отображает пустые строки; если данные не загрузились — сообщение об ошибке и действие «Повторить».
• Продолжение: посетитель принимает решение о визите.

FR-8. Просмотр контактных данных

As a Посетитель сайта кофейни I should видеть контактные данные кофейни, so that я могу связаться с кофейней при необходимости.

• Provenance: required_inference (Visit Info).
• Триггер/вход: открытие страницы Visit Info.
• Наблюдаемый результат: отображаются контактные данные, определённые владельцем кофейни.
• Доступ: публичный, анонимный.
• Отказ/восстановление: если контактные данные не заданы — блок показывает нейтральное сообщение «уточняется» и не отображает пустые строки.
• Продолжение: посетитель принимает решение о визите.

FR-9. Навигация между страницами сайта

As a Посетитель сайта кофейни I should перемещаться между Landing, Menu и Visit Info, so that я могу получить всю нужную информацию за один визит на сайт.

• Provenance: required_inference (навигация сайта).
• Триггер/вход: выбор пункта навигации; на мобильном — фиксированная капсула внизу экрана, на десктопе — сверху; при скролле капсула становится плавающей сверху с blur-эффектом.
• Наблюдаемый результат: открывается выбранная страница; текущая страница визуально отличима.
• Доступ: публичный, анонимный.
• Отказ/восстановление: если переход не сработал — элемент навигации остаётся видимым и нажимаемым; повторный выбор повторяет переход.
• Продолжение: продолжение просмотра выбранной страницы.

FR-10. Определение содержимого сайта владельцем кофейни

As a Владелец кофейни I should определить содержимое сайта — меню, описание кофейни, контактные данные и часы работы, so that сайт отражает мою кофейню и её предложение для внешней аудитории.

• Provenance: required_inference (роль владельца кофейни).
• Триггер/вход: владелец кофейни формирует содержимое: меню и напитки, описание кофейни и её атмосферы, контактные данные, часы работы.
• Наблюдаемый результат: определённое содержимое отображается на публичных страницах Landing, Menu и Visit Info и является тем, что видит посетитель.
• Доступ: в текущем горизонте сайт не содержит административной панели, редактора контента или иного интерфейса управления; содержимое, определённое владельцем, отображается на публичных страницах.
• Отказ/восстановление: если часть содержимого не задана — соответствующая секция показывает нейтральное состояние (см. FR-5, FR-7, FR-8) и не ломает раскладку.
• Продолжение: посетитель видит актуальное содержимое на публичных страницах.

4. User Personas

Посетитель сайта кофейни

Контекст продукта. Человек, который ищет кофейню и хочет понять, что она предлагает. Он заходит с телефона, хочет быстро увидеть меню, понять вайб и решить, идти ли сюда. Аудитория — городская, 18–35, ищет не только напиток, но и атмосферу: яркое, фотогеничное место, где кофе — это маленький праздник.

Основная цель. Получить нужную информацию о кофейне и спланировать визит.

Отличительные принятые обязанности. Просматривает первую страницу и составляет первое впечатление о кофейне; изучает меню по категориям и читает названия и описания напитков; читает адрес, часы работы и контактные данные; переходит между тремя страницами сайта.

Входы и решения. Вход — открытие сайта по адресу, без учётной записи. Решения: интересно ли место; что заказать; стоит ли идти и когда.

Взаимодействие с другими участниками. Владелец кофейни определяет содержимое, которое видит посетитель: меню, описание кофейни, контактные данные и часы работы. Посетитель — получатель этого содержимого; его собственное действие — чтение и выбор.

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

Владелец кофейни

Контекст продукта. Человек, которому нужен публичный сайт для представления своей кофейни. Он определяет содержимое, чтобы привлекать посетителей.

Основная цель. Сайт, отражающий кофейню и её предложение для внешней аудитории.

Отличительные принятые обязанности. Определяет меню и напитки; определяет описание кофейни и её атмосферы; определяет контактные данные; определяет часы работы.

Входы и решения. Вход — собственное знание кофейни: её меню, атмосфера, местоположение, часы работы, контакты. Решения: что включить в меню; как описать кофейню; какие контакты и часы указать.

Взаимодействие с другими участниками. Владелец кофейни — автор содержимого; посетитель сайта кофейни — его аудитория. Содержимое, определённое владельцем, отображается на публичных страницах и является тем, что видит посетитель.

Наблюдаемый успех. Сайт отражает кофейню и её предложение для внешней аудитории: посетитель видит меню, описание, контакты и часы работы.

5. Core User Flows

Flow 1. Посетитель впервые открывает сайт и составляет впечатление о кофейне

1. Стартовый контекст: посетитель сайта кофейни открывает сайт по адресу с телефона. Учётная запись не требуется; доступ анонимный.
2. Действие: посетитель видит страницу Landing.
3. Наблюдаемый результат: отображается hero-блок: гигантский заголовок «Кофе как конфета» (Comfortaa 700, clamp(56px, 12vw, 128px), отрицательный трекинг, выравнивание по левому краю, уход за правый край с overflow: hidden), капсульная кнопка «Смотреть меню» (белый фон, розовый текст, глянцевый блик), 3D-рендер чашки латте с лаймовым акцентом в правом нижнем углу, частично выходящий за край; плоский розовый фон (#FF4D8D) с едва заметным шумом.
4. Действие: посетитель прокручивает страницу.
5. Наблюдаемый результат: секции мягко всплывают при скролле; волнистые SVG-разделители, окрашенные в цвет следующего блока, создают эффект «перетекания» страницы; секция «О нас» показывает два перекрывающихся цветовых блока (розовый и лаймовый) с текстом внутри и крупный план зерна кофе как глянцевый 3D-объект.
6. Материальный отказ/восстановление: если 3D-рендер не загрузился — показывается абстрактная blob-форма-заменитель; заголовок и кнопка не затрагиваются.
7. Продолжение: посетитель переходит к Flow 2 или Flow 4.

Flow 2. Посетитель переходит к меню и изучает напитки

1. Стартовый контекст: посетитель находится на странице Landing.
2. Действие: посетитель нажимает капсульную кнопку «Смотреть меню».
3. Наблюдаемый результат: открывается страница Menu.
4. Действие: посетитель просматривает категории меню.
5. Наблюдаемый результат: карточки меню появляются со stagger-анимацией (translateY 20px + opacity, 400ms ease-out); карточки — капсулы с чередованием розового и лаймового фона, расположенные лесенкой, с 3D-рендером напитка, выглядывающим за верхний край карточки; микро-лейблы категорий — 13px, letter-spacing 0.08em, uppercase.
6. Действие: посетитель читает названия и описания напитков.
7. Наблюдаемый результат: названия, описания и элементы управления целиком внутри вьюпорта и контейнера на 375px, 768px и 1280px.
8. Материальный отказ/восстановление: если данные меню не загрузились — страница показывает сообщение об ошибке и действие «Повторить»; навигация к Landing и Visit Info остаётся доступной. Если в категории нет позиций — категория показывает нейтральное сообщение об отсутствии позиций, остальные категории остаются видимыми.
9. Продолжение: посетитель переходит к Flow 4 или возвращается на Landing (Flow 1).

Flow 3. Посетитель планирует визит: адрес, часы работы, контакты

1. Стартовый контекст: посетитель находится на странице Landing или Menu.
2. Действие: посетитель выбирает переход к Visit Info в навигации или в содержимом страницы.
3. Наблюдаемый результат: открывается страница Visit Info.
4. Действие: посетитель читает адрес кофейни.
5. Наблюдаемый результат: отображается адрес, определённый владельцем кофейни.
6. Действие: посетитель читает часы работы.
7. Наблюдаемый результат: отображаются дни и интервалы работы, определённые владельцем кофейни.
8. Действие: посетитель читает контактные данные.
9. Наблюдаемый результат: отображаются контактные данные, определённые владельцем кофейни.
10. Материальный отказ/восстановление: если часы работы или контактные данные не заданы — блок показывает нейтральное сообщение «уточняется» и не отображает пустые строки; если данные не загрузились — сообщение об ошибке и действие «Повторить», навигация к Landing и Menu остаётся доступной.
11. Продолжение: посетитель принимает решение о визите; при необходимости возвращается к меню (Flow 2).

Flow 4. Посетитель перемещается между страницами сайта

1. Стартовый контекст: посетитель находится на любой из трёх страниц сайта.
2. Действие: посетитель выбирает пункт навигации. На мобильном навигация — фиксированная капсула внизу экрана; на десктопе — сверху; при скролле капсула становится плавающей сверху с blur-эффектом.
3. Наблюдаемый результат: открывается выбранная страница; текущая страница визуально отличима.
4. Материальный отказ/восстановление: если переход не сработал — элемент навигации остаётся видимым и нажимаемым; повторный выбор повторяет переход.
5. Продолжение: продолжение просмотра выбранной страницы.

Flow 5. Владелец кофейни определяет содержимое сайта

1. Стартовый контекст: владелец кофейни формирует содержимое для публичного сайта своей кофейни.
2. Действие: владелец определяет меню и напитки.
3. Наблюдаемый результат: меню и напитки отображаются на странице Menu и являются тем, что видит посетитель.
4. Действие: владелец определяет описание кофейни и её атмосферы.
5. Наблюдаемый результат: описание отображается на странице Landing.
6. Действие: владелец определяет контактные данные и часы работы.
7. Наблюдаемый результат: контактные данные и часы работы отображаются на странице Visit Info.
8. Материальный отказ/восстановление: если часть содержимого не задана — соответствующая секция показывает нейтральное состояние (FR-5, FR-7, FR-8) и не ломает раскладку.
9. Продолжение: посетитель видит актуальное содержимое на публичных страницах (Flow 1–4).

6. Visuals Colors and Theme

Муза: Karim Rashid. Заголовок направления: Sensual pop minimalism for a coffee house that feels like a candy-coloured ritual.

Направление переводится в конкретные токены:

Палитра (light mode):

• background — #FFF5F7 (тёплый розовато-белый, не чистый белый, чтобы глянцевые поверхности читались).
• surface — #FFFFFF (карточки и капсулы).
• text — #1A1420 (почти чёрный с фиолетовым подтоном, не чистый чёрный).
• primary — #FF4D8D (насыщенный bubblegum pink; кнопки, активные состояния, крупные цветовые блоки; 15–20% площади).
• accent — #C6FF4D (кислотный лайм; микро-акценты, hover-состояния, маркеры в меню; не более 5%).
• muted — #F0D9E0 (разделители и второстепенные подложки).

Контраст: текст на фоне — 14:1; на розовом primary — 5.2:1 (достаточно для крупных кнопок; для мелкого текста использовать белый на primary).

Типографика:

• Заголовки — Comfortaa, веса 700 и 400; sentence case, лёгкий отрицательный трекинг (-0.02em); hero-заголовок 56px на мобильном, 128px на десктопе; никакого uppercase.
• Body — Quicksand.
• Шкала — модульная 1.333: 128/96/72/54/40/30/22/16/14. Базовый body — 16px с line-height 1.7. Заголовки — line-height 1.05–1.15. Микро-лейблы — 13px, letter-spacing 0.08em, uppercase только для категорий меню.

Язык формы: органические капсулы и blob-формы; border-radius от 24px до полной капсулы (999px). Кнопки — капсулы с глянцевым бликом (linear-gradient сверху). Карточки меню — мягкие прямоугольники с радиусом 32px и лёгкой тенью, смещённой вниз (0 8px 24px rgba(255,77,141,0.12)). Секции разделяются волнистыми краями (SVG-кривые), а не прямыми линиями. Крупные цветовые блоки — с закруглением только с одной стороны, чтобы создавать ощущение «капли».

Раскладка: асимметричная сетка с крупными цветовыми полями. Hero — полноэкранный розовый блок, внутри — гигантский заголовок, уходящий за край, и капсульная кнопка. Меню — карточки-капсулы, расположенные лесенкой (staggered), с чередованием цветов фона. Секция «О нас» — два перекрывающихся цветовых блока (розовый и лаймовый) с текстом внутри. Навигация — фиксированная капсула внизу экрана на мобильном, сверху на десктопе. Отступы: 24px на мобильном, 48px на планшете, 80px на десктопе.

Стиль изображений: глянцевые 3D-рендеры чашек и напитков на цветных фонах — как конфеты. Никакой стоковой фотографии людей. Каждый напиток — отдельный 3D-объект с мягким студийным светом и цветным отражением. Дополнительно — абстрактные blob-формы и капли, парящие в пространстве. Для секции «О нас» — крупный план зерна кофе, обработанный как глянцевый 3D-объект.

Запрещено: прямые углы и острые линии; стоковые фотографии людей с чашками кофе; градиентные blob-фоны и синие кнопки; шрифты Inter, Roboto, Arial, Helvetica, Poppins; тёмная тема; сложные анимации с резкими движениями; перегруженные текстом секции; квадратные фотографии. Общий шаблонный вид indigo/blue-on-white SaaS запрещён для этого проекта.

Читаемость: заголовки, вордмарки, лейблы, числа, текст карточек и элементы управления остаются целиком внутри вьюпорта и своего контейнера на 375px, 768px и 1280px, переносясь или масштабируясь (например, font-size: clamp(...) с мобильным размером). Изображения, декор и движение могут обрезаться, выходить за край, поворачиваться, перекрываться и обрезаться ровно так, как просит направление, если они не закрывают читаемый текст или элемент управления.

7. Signature Design Concept

Публичный вход — страница Landing.

Первый экран — полноэкранный блок цвета bubblegum pink (#FF4D8D). В левом верхнем углу — гигантский заголовок «Кофе как конфета» шрифтом Comfortaa 700, размером clamp(56px, 12vw, 128px), с отрицательным трекингом, выровненный по левому краю и уходящий за правый край экрана (overflow: hidden). Под заголовком — капсульная кнопка «Смотреть меню» с белым фоном и розовым текстом, с глянцевым бликом. В правом нижнем углу — 3D-рендер чашки латте с лаймовым акцентом, частично выходящий за край. Фон hero — не градиент, а плоский розовый с едва заметным шумом. Никаких центрированных заголовков и синих кнопок.

Сигнатурные приёмы, реализуемые на этой странице:

• Гигантский заголовок hero, уходящий за правый край экрана, обрезанный overflow: hidden — создаёт ощущение масштаба и движения.
• Капсульная навигация внизу экрана на мобильном, которая при скролле превращается в плавающую капсулу сверху с blur-эффектом.
• Волнистые SVG-разделители между секциями, окрашенные в цвет следующего блока — создают эффект «перетекания» страницы.
• Кнопки с анимированным глянцевым бликом, который скользит по поверхности при hover, как на глянцевом пластике.
• Секция «О нас» — два перекрывающихся цветовых блока (розовый и лаймовый) с текстом внутри.

Концепт только перекомпоновывает принятое содержимое, состояния и элементы управления: заголовок, кнопку «Смотреть меню», переходы к Menu и Visit Info, описание кофейни и визуальные якоря. Он не вводит нового поведения, страниц или назначений.

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: expressive Hero Dimensionality: layered_2d

Landing Hero Motion Brief

• Фокальный субъект: 3D-рендер чашки латте с лаймовым акцентом в правом нижнем углу hero-блока, частично выходящий за край; гигантский заголовок «Кофе как конфета», уходящий за правый край.
• Тезис вход → преобразование → результат: при загрузке страницы заголовок и кнопка «Смотреть меню» появляются как первый слой; 3D-рендер чашки всплывает как второй слой; при наведении на кнопку её глянцевый блик медленно скользит по поверхности (background-position shift), а сама кнопка слегка растягивается по горизонтали (scaleX 1.05) и меняет оттенок. Результат — hero выглядит как глянцевый объект желания, а не как статичная страница.
• Словарь движения направления: плавные liquid-морфы; никаких резких движений — только «дыхание» и «перетекание»; stagger-анимация появления (translateY 20px + opacity, 400ms ease-out); секции при скролле мягко всплывают; волнистые SVG-разделители окрашены в цвет следующего блока.
• Скомпонованный первый кадр: плоский розовый фон (#FF4D8D) с едва заметным шумом; гигантский заголовок в левом верхнем углу, обрезанный правым краем; капсульная кнопка «Смотреть меню» под заголовком; 3D-рендер чашки латте в правом нижнем углу, частично за краем.
• Состояние при reduced motion: при prefers-reduced-motion все анимации отключаются, контент показывается сразу: заголовок, кнопка и 3D-рендер видны в конечном положении без stagger, без скользящего блика и без всплытия секций.

9. Non-Functional Requirements

• NFR-1. Адаптивность и читаемость. Заголовки, вордмарки, лейблы, числа, текст карточек и элементы управления остаются целиком внутри вьюпорта и своего контейнера на 375px, 768px и 1280px, переносясь или масштабируясь (например, font-size: clamp(...) с мобильным размером). Никакой другой элемент не закрывает их. Provenance: explicit (направление, правило читаемости).
• NFR-2. Контраст. Контраст текста на фоне — 14:1; на розовом primary — 5.2:1; для мелкого текста на primary используется белый. Provenance: explicit (направление).
• NFR-3. Reduced motion. При prefers-reduced-motion все анимации отключаются, контент показывается сразу. Provenance: explicit (направление).
• NFR-4. Публичный анонимный доступ. Все три страницы доступны без учётной записи, входа, приглашения или провижининга. Provenance: explicit (Planning Scope, access_requirement: none).
• NFR-5. Отсутствие тёмной темы. Палитра светлая, конфетная, оптимистичная; тёмная тема не предусмотрена. Provenance: explicit (направление).
• NFR-6. Отсутствие стоковых фотографий людей. Используются только 3D-рендеры и абстрактные формы. Provenance: explicit (направление).
• NFR-7. Устойчивость состояний. Каждая страница имеет корректные состояния загрузки, пустого содержимого, успеха, ошибки и восстановления; ошибка загрузки данных не ломает раскладку и не блокирует навигацию. Provenance: required_inference (состояния страниц).
• NFR-8. Отсутствие заказов, платежей, бронирования и доставки. Сайт информационный; эти возможности в текущий продукт не входят. Provenance: explicit (границы продукта).

10. Tech Stack

• Frontend: React (веб-сайт приложения; три публичные страницы — Landing, Menu, Visit Info).
• Стилизация: CSS с токенами палитры и типографики направления; шрифты Comfortaa и Quicksand.
• Изображения: глянцевые 3D-рендеры напитков и абстрактные blob-формы как статические ресурсы.
• Backend: Python/FastAPI — для отдачи содержимого страниц (меню, описание кофейни, контактные данные, часы работы).
• Хранилище: хранилище содержимого сайта (меню, описание, контакты, часы работы), достаточное для отдачи публичным страницам.
• Развёртывание: Docker/docker-compose для локального запуска и развёртывания.

Примечание: конкретные технологии не заданы пользователем; перечисленное — минимальный набор, необходимый для доставки принятого поведения.

11. Assumptions and Constraints

• A-1. Сайт состоит ровно из трёх страниц: Landing, Menu, Visit Info. Страницы не добавляются, не удаляются, не объединяются, не разделяются, не переименовываются и не переупорядочиваются. Provenance: explicit (Planning Scope, page_contract_version=1).
• A-2. Все три страницы публичны и анонимны (access_requirement: none); учётная запись, сессия и личный кабинет не создаются. Provenance: explicit (Planning Scope).
• A-3. Активные человеческие роли — ровно две: Посетитель сайта кофейни и Владелец кофейни. Provenance: explicit (Planning Scope, personas).
• A-4. Владелец кофейни определяет содержимое сайта; в текущем горизонте сайт не содержит административной панели, редактора контента или иного интерфейса управления. Provenance: required_inference (роль владельца кофейни).
• A-5. Сайт не принимает заказы, не обрабатывает платежи, не выполняет бронирование и не ведёт доставку. Provenance: explicit (границы продукта).
• A-6. Конкретные значения меню, описания кофейни, контактных данных и часов работы определяются владельцем кофейни и не заданы в источнике; сайт отображает то, что определено. Provenance: required_inference.
• A-7. Визуальные токены (палитра, типографика, формы, раскладка, движение) заданы направлением и обязательны к соблюдению. Provenance: explicit (CREATIVE DIRECTION).
• A-8. Технологический стек не задан пользователем; выбран минимальный набор для доставки принятого поведения. Provenance: basic_default.

12. Glossary

• Landing — анонимная первая страница сайта; представляет кофейню, объясняет её предложение и направляет посетителя к меню и сведениям для визита.
• Menu — отдельная страница для просмотра представления кофейни, меню и напитков.
• Visit Info — отдельная информационная страница с местоположением и часами работы для планирования визита.
• Посетитель сайта кофейни — человек, который ищет кофейню и хочет понять, что она предлагает, чтобы решить, стоит ли прийти.
• Владелец кофейни — человек, которому нужен публичный сайт для представления своей кофейни; определяет содержимое сайта.
• Капсула — форма с border-radius от 24px до полной капсулы (999px), используемая для кнопок и навигации.
• Stagger-анимация — последовательное появление элементов со смещением (translateY 20px + opacity, 400ms ease-out).
• Liquid-морф — плавное «перетекание» формы или состояния без резких движений.
• Глянцевый блик — анимированный световой отблеск на кнопке, скользящий по поверхности при hover (background-position shift).
• Волнистый SVG-разделитель — криволинейная граница между секциями, окрашенная в цвет следующего блока.