Новая статья

0

30 Apr 2026

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

???? Что я понял из настоящего mv-s-2 (эталон страницы)

Что я думал	Что на самом деле
Палитра только фиолет + золото	Палитра ТРЁХЦВЕТНАЯ: фиолет `#a78bfa` + нефрит `#22d3ee` + золото `#fbbf24`
Никаких эмодзи-символов	Unicode-символы ◆ ▲ ★ — это стандарт страницы, а не ошибка
`#d4af37` золотой	На странице `#fbbf24` (более яркий янтарь)
CSS должен быть лаконичным	Эталоны — подробные, с hover, animations, `color-mix`, многослойными свечениями
`!important` на всех свойствах	`!important` только на конфликтных (margin/padding/font/color) — Tilda
Используются `var(--mv-w)`, `var(--mv-font)`	Используются ещё `--mv-v`, `--mv-v-light`, `--mv-g`, `--mv-head`, `--mv-body`, `--mv-dim`
Нумерация шагов «Шаг N»	Не всегда — у `mv-s-2` метка `Один вопрос`, тематическая
Глобальный фон в Zero	На каждом блоке свой фон + свечения + декор-точки `mv-sky`

???? НАПОМИНАЛКА v3 — ФИНАЛЬНАЯ (на базе настоящих эталонов)

Контекст: манифест Сергея на Tilda, тёмная тема, серия презентационных секций mv-s-1, mv-s-2, mv-s-3, mv-s-4...
На странице есть Zero-блок с переменными: --mv-w, --mv-font, --mv-v, --mv-v-light, --mv-g, --mv-head, --mv-body, --mv-dim, и декор mv-sky (точки + звёзды).

???? ШАГ 1. Перед началом — всегда уточняй

Номер блока? (mv-s-5...) — для уникального префикса. Используем формат mv-s-N через дефис (так в проекте).
Покажи 1-2 соседних блока — копируем ритм и структуру.
Какая роль? — текстовый (mv-s1), презентационный с триадой (mv-s-2), концептуальный с формулой (mv-s-3), деловой с финалом (mv-s-4).
Метка? — тематическая (Один вопрос, Зачем именно дело) или нумерованная (Шаг N, Часть N).
Сколько смысловых частей? — метка → отрицания/H2 → мост → главный H1/H2 → триада → вводка → формула → итог.

???? ШАГ 2. Архитектура — копируем с эталона

Жёсткая обёртка:

css

.mv-s-N{
  position:relative;
  max-width:var(--mv-w);
  margin:0 auto!important;
  padding:130px 40px 130px!important;
  overflow:hidden;
}

Слои внутри `.mv-s-N`:

html

<div class="mv-s-N">
  <!-- 1. Декор: точки и звёзды (общий компонент) -->
  <div class="mv-sky">
    <div class="mv-sky-dots">
      <span style="top:14%;left:10%;..."></span>
      <!-- 5 точек со случайными координатами -->
    </div>
    <div class="mv-sky-stars">
      <div class="mv-sky-star" style="...;color:#a78bfa">✦</div>
      <div class="mv-sky-star" style="...;color:#fbbf24">✦</div>
    </div>
  </div>

  <!-- 2. Свечения (минимум 2 круга разного цвета) -->
  <div class="mv-s-N-glow"></div>
  <div class="mv-s-N-glow2"></div>

  <!-- 3. Опционально: гигантский фоновый знак (?, !, ∞, ★) -->
  <div class="mv-s-N-mark" aria-hidden="true">?</div>

  <!-- 4. Контент -->
  <div class="mv-s-N-body">
    ...
  </div>
</div>

Свечения (2 шт обязательно):

css

.mv-s-N-glow{
  position:absolute; top:5%; left:50%;
  transform:translateX(-50%);
  width:1000px; height:1000px; border-radius:50%;
  background:radial-gradient(circle, rgba(167,139,250,.06) 0%, transparent 55%);
  pointer-events:none; z-index:0;
  filter:blur(80px);
}
.mv-s-N-glow2{
  position:absolute; bottom:-10%; right:-10%;
  width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle, rgba(251,191,36,.04) 0%, transparent 60%);
  pointer-events:none; z-index:0;
  filter:blur(80px);
}

???? ШАГ 3. ПАЛИТРА — ТРИ цвета (а не два!)

Цвет	Hex	Переменная	Семантика
Фиолет	`#a78bfa`	`--mv-v`	Метки, основная сила, «работа», запреты
Нефрит / Циан	`#22d3ee`	—	Промежуточный акцент, «дело», поток
Янтарь / Золото	`#fbbf24`	`--mv-g`	Финал, «цель», победа, мотив
Фиолет светлый	`#c4b5fd`	`--mv-v-light`	В градиентах H2

Текстовые переменные:

--mv-head — основные заголовки
--mv-body — обычный текст в карточках
--mv-dim — приглушённый, курсив-подзаголовки

Главный приём — `color-mix` для динамики:

css

color: color-mix(in srgb, var(--c, #a78bfa) 65%, white 35%);
border-color: color-mix(in srgb, var(--c, #a78bfa) 28%, transparent);
background: color-mix(in srgb, var(--c, #a78bfa) 6%, transparent);

Это позволяет одним классом + CSS-переменной --c перекрашивать карточки во все 3 цвета триады.

Триада — стандарт:

css

.mv-s-N-tri--work{ --c:#a78bfa }   /* фиолет */
.mv-s-N-tri--biz { --c:#22d3ee }   /* нефрит */
.mv-s-N-tri--goal{ --c:#fbbf24 }   /* золото */

???? ШАГ 4. Типографика и ритм

Заголовки:

Гигантский H2 (главный вопрос/тезис): clamp(40px, 6.5vw, 78px), font-weight:900, letter-spacing:-.02em
Крупный H2 (с меткой): clamp(38px, 5.5vw, 60px), font-weight:800
Средний H3 (раздел внутри): clamp(26px, 3.4vw, 36px), font-weight:800
Слово в формуле: clamp(22px, 2.8vw, 30px), font-weight:800

Метка (стандарт):

css

.mv-s-N-label{
  display:inline-flex; align-items:center; gap:14px;
  margin:0 0 36px!important;
  padding:9px 22px!important;
  background:rgba(167,139,250,.05);
  border:1px solid rgba(167,139,250,.22);
  border-radius:100px;
  font-size:11.5px!important;
  font-weight:700!important;
  letter-spacing:.36em!important;
  text-transform:uppercase;
  color:rgba(167,139,250,.9)!important;
}
.mv-s-N-label-dot{
  width:5px; height:5px; border-radius:50%;
  background:rgba(167,139,250,.7);
  animation:mvSNPulse 2.4s ease-in-out infinite;
}

Отступы (вертикальный ритм):

padding секции: 130px 40px (десктоп), 80px 24px (≤900px), 70px 16px (≤600px)
Метка → следующий блок: 36px
После H2 главного: 80px
Между смысловыми частями: 48-80px
Карточки → формула: 80px
Формула → итог: 56px

✨ ШАГ 5. Обязательные приёмы (то, что отличает блок от «обычного»)

Анимации:
- Пульс точек у метки mvSNPulse (2.4s)
- Покачивание у акцентного символа mvSNSwing (3s)
- hover на карточках: transform:translateY(-4px) + смена border

Карточки с верхней светящейся линией:

css

.mv-s-N-tri::before{
  content:''; position:absolute; top:0; left:0; right:0;
  height:3px;
  background:linear-gradient(90deg, transparent, var(--c, #a78bfa), transparent);
  opacity:.6;
}

Иконка в карточке — Unicode-символ (◆ ▲ ★ ✦ ◇ ●) в плашке 54x54, цвет = цвет карточки, с filter:drop-shadow.
Формула «весы» (1fr auto 1fr) — два бокса + кружок VS или × в центре.
Финальный блок-итог — отдельная карточка со светящейся линией сверху, курсив, акцентная строка через <span class="...-out-accent">.
Опционально: гигантский фоновый символ (?, !, ∞) — clamp(360px, 52vw, 760px), прозрачный градиент текста.

???? ШАГ 6. Адаптив — 3 брейкпоинта

css

@media (max-width: 980px){
  .mv-s-N-trio{ grid-template-columns:1fr; gap:14px }
}
@media (max-width: 900px){
  .mv-s-N{ padding:80px 24px 80px!important }
  .mv-s-N-formula{ grid-template-columns:1fr; gap:12px; padding:24px 20px!important }
  .mv-s-N-form-vs{ padding:6px 0!important }
}
@media (max-width: 600px){
  .mv-s-N{ padding:70px 16px 70px!important }
  .mv-s-N-mark{ font-size:280px!important }
  /* Все остальные размеры пересчитать */
}

⚠️ ШАГ 7. Чего избегать (грабли)

❌ Не делать	✅ Делать
Только 2 цвета (фиолет+золото)	Использовать всю триаду (фиолет+нефрит+янтарь)
`#d4af37` (тёмное золото)	`#fbbf24` (янтарь страницы)
Свои переменные `--sN-*`	Глобальные `--mv-v`, `--mv-g`, `--mv-head` и т.д.
Лаконичный CSS на 80 строк	Подробный CSS на 250-400 строк (как у эталонов)
Без анимаций	Pulse у точек метки, swing у акцентов, hover на карточках
Без `mv-sky` декора	Всегда добавлять точки и 2 звёздочки
`!important` на всём подряд	Только на конфликтных свойствах (margin, padding, font, color)
Один `glow`	Минимум 2 свечения разных цветов
Без верхней линии у карточек	Всегда `::before` с градиентом
Иконка как просто текст	Иконка в плашке `54x54` с фоном, рамкой и `drop-shadow`
Жёсткие цвета в hex	Использовать `color-mix(in srgb, var(--c) X%, white Y%)`

???? ШАГ 8. Чек-лист перед отправкой

Префикс mv-s-N (через дефис)
Использует переменные --mv-w, --mv-v, --mv-g, --mv-head, --mv-body, --mv-dim
Палитра тройная: #a78bfa + #22d3ee + #fbbf24
Есть mv-sky декор (точки + 2 звезды)
Есть 2 свечения glow + glow2
Метка — плашка с пульсирующими точками + animation
H2 гигантский (минимум 60-78px на десктопе)
Карточки с ::before верхней линией
Иконки в плашках 54x54 с drop-shadow
Используется color-mix для динамики цветов
Hover-эффекты на интерактивных элементах
3 брейкпоинта: 980, 900, 600
Финальный блок-итог с ::before и -out-accent

???? Эталоны для копирования

Презентационный с вопросом и триадой: mv-s-2 (метка → отрицания → мост → H2 → триада → формула → итог)
Концептуальный с формулой: mv-s-3
Деловой с финалом-капсулой: mv-s-4
Простой текстовый: mv-s1 (параграфы + триплет)

???? Главное правило v3

Сначала смотрим соседний блок Сергея — копируем его архитектуру 1-в-1. Потом меняем содержание, но оставляем все слои: декор → свечения → метка → H2 → триада → формула → итог.
Если возникает соблазн «упростить» — остановись. Эталоны намеренно подробные. Простота = выпадение из ритма страницы.

Старт работы (правильная фраза):
«Делаем mv-s-N. Соседний блок: [код]. Роль: [...]. Метка: [...]. Структура: метка → ... → итог. Триада: фиолет/нефрит/янтарь = [тема1]/[тема2]/[тема3]».

Отзывы

Нет комментариев