Studio Bloom — концепт-сайт салона красоты

Задача

Показать, как должен выглядеть сайт авторского салона красоты в нише премиум: не «розовая страничка с прайсом и инстаграм-кнопкой», а атмосферное цифровое пространство, которое передаёт ощущение тишины, ухода и эстетики ещё до того, как клиентка дошла до раздела «Запись».

Концепция «Quiet Luxury»: пыльно-розовый и тёплый бронзовый вместо кричащего розового, серифные заголовки (EB Garamond) для женственности, чистый sans-serif (Manrope) для функциональных блоков, лёгкая бумажная грейн-текстура поверх всего — ощущение премиум-каталога, а не лендинга.

Решение

Стартовая точка — собственная дизайн-система «Quiet Luxury»: палитра из четырёх токенов primary (от soft #a87176 до глубокого #815154), бронзовый secondary #765931, шесть оттенков кремовых surface-контейнеров, типографическая пара EB Garamond (заголовки, курсивные акценты) + Manrope (тексты), скруглённые формы 8–24px, мягкие тени с лёгким розовым подтоном. По системе спроектировано 4 концепт-экрана (главная, услуги, мастера, запись). Затем — ручная сборка в полноценный одностраничник с расширенной анимацией и интерактивом.

Bento-сетка услуг

Не сухой список — карточная композиция в духе Apple/Linear: одна крупная карточка («Стрижка и укладка», 2 колонки) и 4 квадратные. Каждая — большое AI-фото с градиентом темнения снизу и тонкой типографикой: категория uppercase-капс, название серифом, цена цветом secondary-light. На hover — scale(1.1) через 700ms transition.

Многошаговая запись с живой панелью

4 шага в одной форме:

1. Услуга — 6 кнопок-карточек с data-name/data-price/data-time атрибутами
2. Мастер — select c указанием специализации
3. Дата + время — нативный <input type="date"> и chip-кнопки 10:00–20:30
4. Контакты — имя, телефон, пожелания

Справа — sticky-панель «Ваш визит». При клике по любой услуге она мгновенно обновляет название (font-display, размер +50%), длительность и цену через JS. Цены форматируются с разделителями (toLocaleString('ru-RU')). Submit морфит кнопку в «✓ Запись подтверждена — ждём вас!».

Прайс с табами по категориям

24 услуги, разбитые на 4 раздела (Волосы / Ногти / Лицо / Брови). Активный таб — солидная заливка primary, остальные — outline. Под табами — крупная карточка с двумя колонками и тонкой разделительной линией между позициями. Структура каждой строки: название серифом, ниже — мелким шрифтом длительность и описание, справа — цена цветом primary.

Мастера с цветовыми палитрами

3 карточки с фото портретов 4:5, имя серифом, специализация uppercase-капс, стаж, и — фишка — три цветовые точки, отражающие палитру мастера (для парикмахера — тона волос от тёмного к светлому, для маникюрши — оттенки гель-лака, для бровиста — пигменты). Бейдж «Топ-стилист / Nail-эксперт / Визажист» в правом верхнем углу.

Hero в эстетике Quiet Luxury

«Красота,» собирается побуквенно с задержкой 80 мс и лёгким rotateZ(-6deg). «Раскрывается» — курсивом с бегущим розовым шиммером (linear-gradient + background-position). За контентом — Ken Burns на фото интерьера салона (opacity 0.3), 28 розовых полупрозрачных лепестков-частиц летят снизу вверх с разной скоростью и сносом. Контент следует за курсором (mouse parallax ±12px). Поверх всего — бумажная грейн-текстура через SVG-фильтр feTurbulence с mix-blend-mode: multiply.

Soft-анимации фона

В тёмных и средних секциях:

• Pink dots field — мерцающие розовые точки (14–20 шт. на секцию) с собственным ритмом 3–7 сек
• Blob pulse — мягкие розовые и тёплые бронзовые пятна с blur(70px), пульсация каждые 14 сек с индивидуальной задержкой
• Pulse-glow на CTA — расширяющийся розовый ореол

Всё гасится через @media (prefers-reduced-motion: reduce).

Результат

Сайт развёрнут на поддомене bloom.nazarov-evgeniy.pro по HTTPS (Let’s Encrypt), отдаётся за миллисекунды (~58 KB на index.html). Бэкенд не подключён — это концепт-демо. Для продакшена достаточно: подключить запись к YClients или DIKIDI (стандартные beauty-CRM в РФ), вставить реальные фото салона и мастеров, добавить страницу акций и Bloom Club (программа лояльности).

Архитектурно сайт готов к масштабированию: добавить блог о трендах ухода, страницы под конкретные процедуры (/uslugi/keratinovoe-vyprjamlenie/), интеграцию с Telegram-ботом для напоминаний — структура и стили это допускают без рефакторинга.

Стек технологий

• Frontend: Vanilla HTML5 + Tailwind CSS (CDN, без сборки) + Vanilla JS
• Анимации: CSS @keyframes (Ken Burns, blob pulse, letter reveal, shimmer, petals float-up, twinkle dots, pulse-glow), IntersectionObserver для scroll-reveal, SVG feTurbulence для бумажной грейн-текстуры
• Типографика: EB Garamond 400–600 (заголовки + курсивные акценты), Manrope 400–700 (тексты), Material Symbols (иконки)
• Изображения: AI-арт под цветовую палитру + Unsplash для портретов мастеров
• UX-паттерны: многошаговая запись со sticky summary, табы прайса без перезагрузки, bento-сетка с hover-zoom, нативные <input type="date">, time-chip selection
• Дизайн-этап: собственная дизайн-система «Quiet Luxury» (палитра пыльных розовых, типографика серифов, тени, скругления, spacing-токены) под бренд-концепцию авторского салона красоты
• Хостинг: свой VPS, Nginx + Let’s Encrypt SSL