ТЗ: одностраничный сайт бизнес-коуча (HTML/CSS/JS)
1) Цель и идея
Цель: довести до одного действия — **контакт** через CTA в конце.
Главная мысль: **«Не решу за тебя. Научу так, чтобы проблема не возникала.»** (формулировку можно варьировать, смысл сохранить).
### 2) Технологии
* **Vanilla HTML/CSS/JS**, без фреймворков и тяжёлых библиотек.
* Быстро, лёгкие стили/скрипты, оптимизированные изображения.
* Адаптив: мобила/десктоп.
* Доступность: клавиатура, aria, focus-trap в модалке, ESC.
### 3) Структура (4 секции)
#### 3.1 Hero (100vh)
* Маленький бренд капсом + крупный заголовок (h1):
**«Не решу за тебя. Научу так, чтобы проблема не возникала.»**
* Подзаголовок 1–2 строки про систему/мышление/профилактику хаоса.
* **2–3 фото**: монохром (grayscale), высокий контраст; одно основное, 1–2 “накладкой” (смещение + поворот 2–4°). Лёгкий grain/film (по желанию).
* Кнопки: максимум 2 (например: “Связаться”, “Коротко описать задачу”).
#### 3.2 Scroll-driven тезисы (главная механика)
* Контейнер высотой **N * 100vh** (N=10–14 тезисов).
* Внутри sticky-карточка на весь экран: `position: sticky; top:0; height:100vh;`
* На карточке:
* крупный тезис
* снизу тонкий прогресс-бар (градиент **жёлтый→фиолетовый**)
* микро-лейбл капсом (например “ДАЛЬШЕ ХУЖЕ / ЕЩЁ 1 ШАГ / СМОТРИ ВПЕРЁД”)
* **Смена тезисов без явных переходов** (без fade/slide).
* “Нагнетание”: каждый следующий тезис жёстче; последние 2–3 — призыв.
* **Последний тезис** появляется только под конец и “раскрывается” на последних процентах прокрутки (см. алгоритм).
**Оригинальность прокрутки (без анимаций):**
* При каждом новом тезисе слегка рандомизировать (значения фиксированы для тезиса, не дёргаются):
* размер шрифта: десктоп 36–56px, мобила 26–40px
* смещение X/Y: ±10–14% области
#### 3.3 Финальный блок
* Заголовок: “Ок. Хочешь научиться избегать этого?”
* Текст: “Один короткий разговор… я показываю, где рождается проблема и чему научиться, чтобы не повторялась.”
#### 3.4 Footer
* Минимум: год / имя / одна строка контакта.
### 4) Визуальный стиль
* Фон: почти чёрный `#05050a`/`#0a0a14`, деликатные `radial-gradient` подсветки фиолет/жёлт (opacity ~0.08–0.16).
* Текст: `#f6f7fb`, вторичный `rgba(...,0.68)`.
* Акценты только:
* жёлтый `#f6d445`
* фиолетовый `#7c3aed`
* Типографика: современный гротеск, жирные заголовки; микро-лейблы капсом с трекингом (`letter-spacing ~0.18em`).
* Фото: строго монохром через CSS, без цветных пятен; grain через лёгкий overlay (noise png/svg) с низкой прозрачностью.
### 5) CTA (важно)
* Одна **floating CTA-кнопка** (fixed), **скрыта** по умолчанию.
* **Появляется только почти в конце**: когда футер (или sentinel) виден в viewport ~15–25%.
* Реализация: `IntersectionObserver` (добавлять/убирать класс видимости).
### 6) Модалка (по CTA)
* Поля: “Имя” (input), “Коротко опиши ситуацию” (textarea).
* Действия:
* “Написать в Telegram” → ссылка `
* “Позвонить” → `tel:`
* Доступность:
* `role="dialog"`, `aria-modal="true"`, `aria-labelledby`
* закрытие по ESC, по клику на backdrop, по кнопке “×”
* focus-trap внутри, возврат фокуса на CTA после закрытия
* блокировка скролла фона при открытой модалке
### 7) Алгоритм скролла (JS)
* Рассчитать прогресс секции:
`p = clamp((scrollY – start) / (end – start), 0..1)`
* Индекс тезиса: `i = min(N-1, floor(p * N))` (подкрутить, чтобы последний не появлялся рано).
* Рандомизацию (fontSize, offsetX/Y, label) **предвычислить** на старте и хранить в массиве по тезисам.
* Раскрытие последнего тезиса: если `p > 0.90`, показывать подстроку по `tail = (p-0.90)/0.10`.
### 8) prefers-reduced-motion
Если `prefers-reduced-motion: reduce`:
* не использовать sticky/scroll-механику;
* показать тезисы обычным списком блоков.
### 9) Приёмка
* Стили и структура соответствуют.
* Scroll-карточка работает, тезисы меняются без переходов, прогресс-бар корректен.
* Последний тезис поздний и раскрывается в конце.
* Floating CTA появляется только у футера.
* Модалка доступная (ESC, focus-trap, aria), Telegram-ссылка корректно формируется.
* В режиме reduced-motion — список вместо sticky.