https://www.figma.com/design/vRufQsGXMr0o0mFn68xo84/Untitled?node-id=0-1&t=zgC8aFE0VHxSp1nV-1 пример темы в Figma. Пароль thing-silver-horse-leaves

## 1. Цель проекта

Сверстать один адаптивный HTML-шаблон лендинга онлайн-сервиса, который может отображаться в 5 визуальных темах (условно: Тема 1, Тема 2, Тема 3, Тема 4, Тема 5). Все темы используют **единую структуру страниц и единый UX** (порядок блоков, поведение элементов, логика интерфейса одинаковы), но отличаются **UI-оформлением**: цветовой палитрой, фоновыми изображениями/паттернами, шрифтами и логотипом.

Дизайн-макет (пример одной темы, по которому оцениваются остальные 4): Figma-файл, предоставленный заказчиком.

---

## 2. Объём работ

1. Вёрстка единого набора страниц шаблона (перечень страниц уточняется по макету; ориентировочно: главная, внутренние информационные страницы, страница тарифов/подписки и т.п. — по структуре Figma-файла).
2. Реализация 5 тем оформления для этого набора страниц.
3. Демонстрационный переключатель тем — отдельный элемент интерфейса (например, в шапке или в виде демо-панели), позволяющий на живых HTML-страницах переключаться между всеми 5 темами без перезагрузки данных, чтобы наглядно показать разницу в оформлении.
4. Адаптивная вёрстка для трёх основных диапазонов: desktop (≥1200px), tablet (768–1199px), mobile (до 767px). Точки перелома (breakpoints) финально сверяются с Figma-макетом.
5. Реализация бургер-меню для мобильной и (при наличии в макете) планшетной версии: анимация открытия/закрытия, блокировка скролла фона при открытом меню, доступность (закрытие по клику вне меню и по Esc).

---

## 3. Технические требования

### 3.1 Препроцессор
- Вёрстка стилей — на **SCSS** (предпочтительно) либо LESS — по согласованию.
- Обязательное использование переменных препроцессора для всего, что отличается между темами: цвета, шрифты, отступы/радиусы, если они варьируются, пути к фоновым изображениям и логотипам.

### 3.2 Архитектура тем и наследование
- Общая логика: один базов