Стиль лендинга
«Мягкий эксперт»

Цветовая палитра

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

CSS-переменные

:root {
  --bg:      #F5F1EB;   /* Основной фон */
  --bg-alt:  #EFE9E2;   /* Чередующийся фон */
  --bg-dark: #EDE6DD;   /* Акцентный фон */
  --card:    #FFFFFF;   /* Фон карточек */
  --text:    #2E2E2E;   /* Основной текст */
  --muted:   #7A736C;   /* Приглушённый текст */
  --head:    #1F1F1F;   /* Заголовки + тёмная шапка/футер */
  --cta:     #C46A4A;   /* Кнопки и акценты */
  --ctah:    #8F442C;   /* Hover состояние кнопки */
  --accent:  #D6A15C;   /* Золотые разделители */
}

Типографика

Два шрифта. Один — для заголовков, создаёт элегантность и тепло. Второй — для текста, обеспечивает читаемость.

Шкала размеров

Межстрочный интервал (line-height)

Подключение шрифтов

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Manrope:wght@300;400;500;600&display=swap" rel="stylesheet">

Отступы и сетка

Контейнер

.wrap {
  max-width: 860px;
  margin: 0 auto;
  /* Горизонтальные отступы задаются у секции: padding: 100px 24px */
}

Вертикальные отступы секций

Разделитель между заголовком и контентом

.div {
  width: 40px;
  height: 2px;
  background: #D6A15C; /* золотой акцент */
  margin: 24px 0;
}

Внутренние отступы карточек

Зазоры в сетках (gap)

Border-radius карточек

--r: 12px;  /* карточки */
border-radius: 10px;  /* кнопки, инпуты */
border-radius: 40px;  /* теги/чипы */
border-radius: 16px;  /* квиз-контейнер */

Компоненты

Кнопка CTA

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cta);        /* #C46A4A */
  color: #fff;
  font-family: 'Manrope', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 17px 30px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, box-shadow 0.2s;
  min-height: 54px;
  letter-spacing: 0.01em;
  white-space: normal;           /* перенос текста */
  line-height: 1.35;
}
.btn:hover { background: var(--ctah); box-shadow: 0 8px 20px rgba(0,0,0,.1); }
.btn:active { transform: scale(0.98); }
/* На мобиле: width: 100%; display: flex; */

Лейбл-заголовок секции

.label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cta);
  margin-bottom: 16px;
}

Карточка

.card {
  background: var(--card);       /* #FFFFFF */
  border-radius: var(--r);       /* 12px */
  padding: 28px 24px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}
/* Нет border — только тень. Это важно для мягкого стиля. */

Цитата / Выделенный текст

.quote-block {
  padding: 22px 26px;
  background: var(--card);
  border-radius: var(--r);
  box-shadow: 0 6px 16px rgba(0,0,0,0.05);
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.1rem;
  color: var(--head);
  line-height: 1.7;
}

Акцентная плашка (hero-note)

.hero-note {
  padding: 18px 22px;
  background: rgba(196,106,74, 0.07);  /* полупрозрачный CTA */
  border-left: 3px solid var(--cta);
  border-radius: 0 8px 8px 0;
  font-size: 0.9rem;
  line-height: 1.7;
}

SP-item (список с акцентной линией)

.sp-item {
  padding: 18px 22px;
  border-left: 2px solid var(--accent);  /* золото */
  background: rgba(255,255,255,0.4);
  border-radius: 0 8px 8px 0;
}

Тег / чип

.tag {
  padding: 9px 16px;
  background: var(--card);
  border-radius: 40px;
  font-size: 0.82rem;
  font-weight: 500;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

Sticky-кнопка (мобиль)

.sticky {
  display: none;  /* показывать только на мобиле */
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 100;
  padding: 10px 16px 18px;
  background: var(--bg);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
}
@media(max-width: 760px) { .sticky { display: block; } }

FAQ-аккордеон

/* Открытие через JS: item.classList.toggle('open') */
.fq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.fq.open .fq-a { max-height: 300px; }
/* Стрелка */
.fq-arr::after { content:''; display:block; width:7px; height:7px;
  border-right: 2px solid var(--cta); border-bottom: 2px solid var(--cta);
  transform: rotate(45deg); transition: transform 0.3s; }
.fq.open .fq-arr::after { transform: rotate(-135deg); }

Структура блоков (11 блоков)

Каждый блок чередует фоны: --bg → --bg-alt → --bg → --bg-dark и т.д. Никогда два подряд одинаковых фона.

Анимации и поведение

Fade-in при скролле (основная анимация)

/* CSS */
.fi {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s ease-out, transform 0.65s ease-out;
}
.fi.on {
  opacity: 1;
  transform: none;
}

/* JS — IntersectionObserver */
var obs = new IntersectionObserver(function(entries) {
entries.forEach(function(el) {
if (el.isIntersecting) {
el.target.classList.add(‘on’);
obs.unobserve(el.target);
}
});
}, { threshold: 0.08 });

document.querySelectorAll(’.fi’).forEach(function(el) { obs.observe(el); });

SVG-визуал в Hero (анимация дыхания)

/* Концентрические кольца с пульсацией */
@keyframes pulse1 {
  0%, 100% { r: var(--r0); opacity: 0.6; }
  50%       { r: var(--r1); opacity: 1; }
}

/* Применяется: */
.cv-r1 { animation: pulse1 4s ease-in-out infinite; }
.cv-r2 { animation: pulse1 4s ease-in-out infinite 0.8s; }
.cv-r3 { animation: pulse1 4s ease-in-out infinite 1.6s; }
/* Каждое кольцо смещено на 0.8s → эффект волны */

Таблица всех переходов

Мобильная адаптация

Брейкпоинты

Ключевые мобильные правила

@media(max-width: 760px) {
  section { padding: 60px 20px; }

/* Грид → 1 колонка */
.steps, .cases, .sp-grid, .safety-grid, .prices {
grid-template-columns: 1fr;
}

/* Все CTA-кнопки — на всю ширину */
section .btn {
display: flex;
width: 100%;
justify-content: center;
box-sizing: border-box;
}

/* Отступ под sticky-кнопку */
body { padding-bottom: 86px; }

/* Показать sticky */
.sticky { display: block; }
}

Hero на мобиле

/* SVG-визуал идёт ВЫШЕ текста на мобиле */
/* Реализуется через order или порядок в HTML */
.clarity-visual { max-width: 260px; margin: 0 auto; }
.hero-inner { gap: 36px; padding: 60px 20px 72px; }

Квиз и Telegram-бот

Структура квиза

Логика навигации

// Кнопка "Далее" появляется только после выбора ответа
// Кнопка "Назад" — со 2-го вопроса
// При возврате — сохранённый ответ подсвечен
// Нельзя пойти вперёд без ответа (показывается подсказка)

document.querySelectorAll(’.qb’).forEach(function(btn) {
btn.addEventListener(‘click’, function() {
qa[‘q’ + q] = this.dataset.v;  // сохраняем ответ
document.getElementById(‘qbtn-next’).style.display = ‘block’;
setTimeout(function() { qStep++; qGo(qStep); }, 340); // автопереход
});
});

Отправка в Telegram-бот

// Не нужен сервер — прямой вызов Telegram Bot API
var BOT = 'ВАШ_ТОКЕН';   // от @BotFather
var CID = 'ВАШ_CHAT_ID'; // от @userinfobot

fetch(‘https://api.telegram.org/bot’ + BOT + ‘/sendMessage’, {
method: ‘POST’,
headers: { ‘Content-Type’: ‘application/json’ },
body: JSON.stringify({
chat_id: CID,
text: msg,
parse_mode: ‘Markdown’
})
});

Как получить токен и Chat ID

Формат сообщения в бот

???? *Новая заявка с сайта*

???? *Имя:* Мария Иванова
???? *Телефон:* +79001234567

???? *Ответы:*
1️⃣ Качели: то тепло, то холод
2️⃣ Страх ошибиться и потерять отношения
3️⃣ Очень срочно — я на пределе
4️⃣ Да, если увижу смысл и результат

Юридика и технические требования

Обязательные страницы и элементы

В футере обязательно

Иванова Мария Сергеевна
Самозанятая (НПД) / ИП
ИНН 000000000000
г. Город
email@example.com

Cookie-баннер (скрипт)

// Показываем только при первом визите
if (localStorage.getItem('ck')) {
  document.getElementById('cookie').style.display = 'none';
}

// Кнопка «Понятно»
document.getElementById(‘cookie’).style.display = ‘none’;
localStorage.setItem(‘ck’, ‘1’);

Стиль страниц оферты/согласия

/* Белый фон, тёмный текст — максимальная читаемость */
body { background: #FFFFFF; color: #1F1F1F; font-size: 15.5px; line-height: 1.85; }
h2 { text-transform: uppercase; letter-spacing: 0.04em;
     border-bottom: 1px solid #F0EDEA; padding-bottom: 10px; }
/* Шрифт тот же: Manrope */

Чеклист запуска

Контент

• Написаны тексты для всех 11 блоков
• Подготовлено фото эксперта (вертикальное, 3:4, светлый фон или нейтральный)
• Написаны 3 кейса в формате «Было → Стало → Цитата»
• Написано 8–10 FAQ вопросов от первого лица ЦА
• Определены цены и форматы работы

Технически

• Создан Telegram-бот через @BotFather
• Получен Chat ID через @userinfobot
• Токен и Chat ID вставлены в код квиза
• Проверена отправка тестовой заявки
• Все три файла в одной папке: index.html + oferta.html + consent.html

Юридика

• В оферте заполнены: ФИО, ИНН, статус, email, город
• В футере заполнены все реквизиты
• В согласии на ПД актуальный email для отзыва
• Ссылки на оферту и согласие работают
• Cookie-баннер показывается при первом открытии

Перед запуском рекламы

• Сайт открыт на мобиле — всё отображается корректно
• Квиз пройден полностью — заявка пришла в бот
• Кнопки на всю ширину на мобиле
• Sticky-кнопка внизу видна и работает
• Скорость загрузки < 3 секунд (проверить: PageSpeed Insights)
• Добавлен счётчик Яндекс.Метрики
• Настроены цели: клик по CTA-кнопкам + отправка квиза