ИНСТРУКЦИЯ-СКРИПТ: Создание обложек страниц MOTIVERIKON

Роль ассистента: получить исходные материалы по странице → выдать готовый HTML+CSS код обложки в единой стилистике системы.

---

???? ЗАДАЧА

Создать HTML-обложку для новой страницы сайта MOTIVERIKON в точно такой же стилистике, как остальные обложки системы. Обложка ставится сразу после уже стоящего блока-зеро (блок-зеро — это служебная шапка с датой/версией, которую пользователь ставит вручную и которая присутствует на каждой странице).

---

???? КОНТЕКСТ ПРОЕКТА — что уже есть на странице

На каждой странице уже стоит блок-зеро (служебная шапка) — его писать НЕ НУЖНО, он ставится отдельно вручную пользователем. Привожу его только для справки, чтобы ассистент понимал дизайн-систему (цвета, шрифты, ширины, градиенты):

<details> <summary>???? Код блока-зеро (только для справки — НЕ дублировать в ответе)</summary>

html

<style>
.mv-h1{
  position:relative!important;
  max-width:var(--mv-w,1170px)!important;
  margin:0 auto!important;
  padding:0 40px!important;
  font-family:var(--mv-font,'Inter',sans-serif)!important;
  background:#0f0f1a!important;
}
.mv-h1-entry{position:relative!important;max-width:800px!important;margin:0 auto!important;padding:44px 0 48px!important}
.mv-h1-date{display:flex!important;align-items:center!important;gap:12px!important;margin:0 0 10px!important;padding:0!important}
.mv-h1-date-dot{width:8px!important;height:8px!important;border-radius:50%!important;background:linear-gradient(135deg,#a78bfa,#d4af37)!important;opacity:.5!important;flex-shrink:0!important}
.mv-h1-date-text{font-size:.78em!important;font-weight:600!important;letter-spacing:.18em!important;line-height:1.3!important;text-transform:uppercase!important;color:#a78bfa!important;margin:0!important;padding:0!important}
.mv-h1-date-moon{font-size:.72em!important;font-weight:400!important;letter-spacing:.12em!important;line-height:1.3!important;color:#a0a0b6!important;margin:0!important;padding:0!important}
.mv-h1-links{display:flex!important;flex-wrap:wrap!important;gap:6px 16px!important;margin:0 0 20px!important;padding:0!important}
.mv-h1-links a{font-size:.76em!important;font-weight:600!important;letter-spacing:.08em!important;line-height:1.3!important;color:#d4af37!important;text-decoration:none!important;border-bottom:1px solid rgba(212,175,55,.25)!important;transition:border-color .2s!important}
.mv-h1-links a:hover{border-color:#d4af37!important}
.mv-h1-label{font-size:.68em!important;font-weight:700!important;letter-spacing:.22em!important;line-height:1.3!important;text-transform:uppercase!important;color:#a0a0b6!important;margin:0 0 8px!important;padding:0!important}
.mv-h1-event{font-size:1em!important;font-weight:400!important;line-height:1.65!important;color:#e2e0ff!important;margin:0 0 28px!important;padding:0!important}
.mv-h1-note-label{font-size:.68em!important;font-weight:700!important;letter-spacing:.22em!important;line-height:1.3!important;text-transform:uppercase!important;color:#706f80!important;margin:0 0 8px!important;padding:0!important}
.mv-h1-note{font-size:.92em!important;font-weight:400!important;line-height:1.6!important;color:#a0a0b6!important;margin:0!important;padding:16px 0 0!important;border-top:1px solid rgba(212,175,55,.06)!important}
.mv-hd{position:relative!important;max-width:var(--mv-w,1170px)!important;margin:0 auto!important;padding:4px 40px!important;background:#0f0f1a!important}
.mv-hd-inner{max-width:800px!important;margin:0 auto!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:16px!important}
.mv-hd-line{flex:1!important;height:1px!important;background:linear-gradient(90deg,transparent 0%,rgba(167,139,250,.45) 30%,rgba(212,175,55,.45) 70%,transparent 100%)!important}
.mv-hd-dots{display:flex!important;align-items:center!important;gap:6px!important;flex-shrink:0!important}
.mv-hd-dot{width:3px!important;height:3px!important;border-radius:50%!important;background:#a78bfa!important;opacity:.6!important}
.mv-hd-dot-center{width:5px!important;height:5px!important;border-radius:50%!important;background:linear-gradient(135deg,#a78bfa,#d4af37)!important;opacity:.8!important}
.mv-h1-num{font-size:.64em!important;font-weight:700!important;letter-spacing:.22em!important;line-height:1.3!important;text-transform:uppercase!important;color:#706f80!important;margin:0 0 16px!important;padding:0!important}
.mv-h1-num span{background:linear-gradient(135deg,#a78bfa,#d4af37)!important;-webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important;background-clip:text!important;font-weight:800!important}
@media(max-width:700px){
  .mv-h1{padding:0 16px!important}
  .mv-h1-entry{padding:32px 0 36px!important}
  .mv-h1-date{flex-wrap:wrap!important;gap:6px 12px!important}
  .mv-h1-date-text{font-size:.72em!important}
  .mv-h1-date-moon{font-size:.68em!important}
  .mv-h1-event{font-size:.95em!important}
  .mv-h1-note{font-size:.88em!important}
  .mv-hd{padding:4px 16px!important}
}
</style>

</details>

Из блока-зеро берём константы дизайн-системы:

• Ширина страницы: max-width: var(--mv-w, 1170px)
• Шрифт: font-family: var(--mv-font, 'Inter', sans-serif)
• Фон соседних блоков: #0f0f1a (тёмно-сине-фиолетовый)
• Основной градиент бренда: linear-gradient(135deg, #a78bfa, #d4af37) (фиолет → золото)
• Цвет светлого текста: #e2e0ff
• Цвет приглушённого текста: #a0a0b6, #c0bfd6
• Цвет акцентного фиолета: #a78bfa
• Цвет акцентного золота: #d4af37

---

???? СТРУКТУРА ОБЛОЖКИ — эталонный шаблон

Обложка состоит из двух слоёв:

1. Внешний слой (.mv-hX) — подложка с цветом соседних блоков (#0f0f1a), на всю ширину 1170px.
2. Карточка (.mv-hX-card) — внутри внешнего слоя, с более тёмным фоном (#0a0a0f) и скруглёнными углами (18px), визуально выделяется.

Внутри карточки — 5 текстовых элементов (сверху вниз):

#	Класс	Роль	Что туда писать
1	.mv-hX-brand	Бренд-каптион (мелкие буквы, градиент, вразрядку)	Краткая метка: «СИСТЕМА MOTIVERIKON», «ДОКУМЕНТ СИСТЕМЫ», «БЛОК СИСТЕМЫ» и т.п. — 2–4 слова, КАПС
2	.mv-hX-title	H1 — главный заголовок (крупный, жирный, с акцентным <span>)	Название страницы. Ключевое слово оборачивается в <span> — оно окрашивается в градиент
3	.mv-hX-tag	Тег-раздел (мелкие буквы, вразрядку, серо-фиолет)	Формат: «Раздел · <Суть>». Например: «Раздел · Живой архив», «Раздел · Идентичность»
4	.mv-hX-sub	Подзаголовок-описание (средний, серо-фиолет)	1–2 предложения, передающие суть страницы
5	.mv-hX-quote	Цитата (курсив, фиолет, сверху разделитель)	Самая сильная фраза из материала, в кавычках-ёлочках

---

???? КРИТИЧЕСКИ ВАЖНЫЕ ПРАВИЛА — ЧТОБЫ ПЕРЕБИТЬ КОНСТРУКТОР САЙТА

Сайт собран на конструкторе (типа Tilda/Webflow), у которого свои глобальные стили для фонов, шрифтов, заголовков, отступов. Поэтому:

⚠️ Правило №1 — !important на КАЖДОМ свойстве

Абсолютно каждое CSS-свойство в обложке пишется с !important:

css

color:#e2e0ff!important;
margin:0 0 20px!important;
font-family:var(--mv-font,'Inter',sans-serif)!important;

Без !important конструктор перебьёт наши стили своими — сломаются шрифты, цвета, отступы.

⚠️ Правило №2 — явно задавать ВСЕ текстовые свойства

У каждого текстового элемента (<p>, <h1>) обязательно:

• font-size (в em — чтобы масштабировалось от родителя)
• font-weight
• letter-spacing
• line-height
• color (или -webkit-text-fill-color для градиентного текста)
• margin: 0 0 ... (сброс верхнего отступа — конструкторы часто добавляют свои)
• padding: 0

⚠️ Правило №3 — явно задавать шрифт и ширину на корне

На корневом .mv-hX:

css

font-family: var(--mv-font, 'Inter', sans-serif) !important;
max-width: var(--mv-w, 1170px) !important;
margin: 0 auto !important;

⚠️ Правило №4 — уникальный префикс классов

Для каждой новой обложки используется свой префикс, чтобы стили разных обложек не конфликтовали между собой на сайте:

Страница	Префикс	Буква
Отчёты об обновлениях	.mv-hR-*	R — Reports
О границах системы	.mv-hB-*	B — Boundaries
Название системы	.mv-hN-*	N — Name
Новая страница	.mv-hX-*	X — подбирается по смыслу

Буква всегда одна, заглавная, мнемоническая (первая буква ключевого слова страницы на латинице).

⚠️ Правило №5 — градиентный текст = 4 свойства подряд

Для бренда, акцентного <span> в заголовке:

css

background: linear-gradient(135deg, #a78bfa, #d4af37) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;

Все четыре свойства обязательны — без -webkit-text-fill-color текст не станет прозрачным в Safari.

---

???? ЭТАЛОННЫЙ ОБРАЗЕЦ (страница «Отчёты об обновлениях»)

Это референс, на который ориентируется ассистент при создании любой новой обложки:

html

<style>
/* Внешний слой-подложка — цвет соседних блоков */
.mv-hR{
  position:relative!important;
  width:100%!important;
  max-width:var(--mv-w,1170px)!important;
  margin:0 auto!important;
  padding:0!important;
  font-family:var(--mv-font,'Inter',sans-serif)!important;
  background:#0f0f1a!important;
  overflow:hidden!important;
}
/* Сама карточка — темнее, визуально выделена */
.mv-hR-card{
  position:relative!important;
  border-radius:18px!important;
  background:#0a0a0f!important;
  overflow:hidden!important;
  padding:56px 20px 48px!important;
  margin:0!important;
}
.mv-hR-glow{
  position:absolute!important;
  top:-20%!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  width:900px!important;
  height:900px!important;
  border-radius:50%!important;
  background:radial-gradient(circle,rgba(167,139,250,.06) 0%,transparent 55%)!important;
  pointer-events:none!important;
}
.mv-hR-body{
  position:relative!important;
  z-index:2!important;
  max-width:780px!important;
  margin:0 auto!important;
  text-align:center!important;
}
.mv-hR-brand{
  font-size:.78em!important;
  font-weight:700!important;
  letter-spacing:.28em!important;
  line-height:1.2!important;
  margin:0 0 20px!important;
  padding:0!important;
  text-transform:uppercase!important;
  background:linear-gradient(135deg,#a78bfa,#d4af37)!important;
  -webkit-background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  background-clip:text!important;
}
.mv-hR-title{
  font-size:clamp(2em,5vw,3.6em)!important;
  font-weight:900!important;
  letter-spacing:.03em!important;
  line-height:1.15!important;
  margin:0 0 20px!important;
  padding:0!important;
  color:#e2e0ff!important;
}
.mv-hR-title span{
  background:linear-gradient(135deg,#a78bfa,#d4af37)!important;
  -webkit-background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  background-clip:text!important;
}
.mv-hR-tag{
  font-size:.72em!important;
  font-weight:600!important;
  letter-spacing:.22em!important;
  line-height:1.3!important;
  margin:0 0 16px!important;
  padding:0!important;
  text-transform:uppercase!important;
  color:#a0a0b6!important;
}
.mv-hR-sub{
  font-size:1.1em!important;
  font-weight:400!important;
  letter-spacing:.02em!important;
  line-height:1.55!important;
  margin:0 0 28px!important;
  padding:0!important;
  color:#c0bfd6!important;
}
.mv-hR-quote{
  font-size:1.05em!important;
  font-style:italic!important;
  line-height:1.45!important;
  margin:0 auto!important;
  padding:24px 0 0!important;
  color:#a78bfa!important;
  border-top:1px solid rgba(167,139,250,.2)!important;
  max-width:520px!important;
}
@media(max-width:700px){
  .mv-hR-card{padding:36px 12px 32px!important}
  .mv-hR-title{font-size:clamp(1.7em,7vw,2.6em)!important}
  .mv-hR-brand{font-size:.72em!important}
  .mv-hR-tag{font-size:.68em!important}
  .mv-hR-quote{font-size:.95em!important}
}
</style>

<div class="mv-hR">
  <div class="mv-hR-card">
    <div class="mv-hR-glow"></div>
    <div class="mv-hR-body">
      <p class="mv-hR-brand">СИСТЕМА MOTIVERIKON</p>
      <h1 class="mv-hR-title">Отчёты об <span>обновлениях</span> системы</h1>
      <p class="mv-hR-tag">Раздел · Живой архив</p>
      <p class="mv-hR-sub">Три состояния наблюдения: что зафиксировано, что готово к публикации, что требует дальнейшей работы.</p>
      <p class="mv-hR-quote">«Система растёт тогда, когда жизнь оставляет в ней след»</p>
    </div>
  </div>
</div>

---

???? АЛГОРИТМ РАБОТЫ АССИСТЕНТА (пошагово)

Когда пользователь присылает материалы для новой страницы:

Шаг 1. Прочитать исходные материалы

Внимательно изучить присланный текст страницы. Выделить:

• Название страницы (из заголовка документа)
• Суть страницы в одном предложении (о чём она)
• Ключевое слово заголовка (которое пойдёт в <span> под градиент)
• Сильную цитату — самую ёмкую фразу, манифест страницы
• Раздел — к какой смысловой категории относится страница

Шаг 2. Придумать 5 текстов

1) Бренд-каптион (.mv-hX-brand) — выбрать один из форматов:

• СИСТЕМА MOTIVERIKON — универсальный
• ДОКУМЕНТ СИСТЕМЫ — для базовых документов идентичности
• БЛОК СИСТЕМЫ — для тематических блоков
• АРХИВ СИСТЕМЫ — для исторических/архивных разделов
• АВТОР · MOTIVERIKON — для страниц про автора

2) Заголовок H1 (.mv-hX-title) — правила:

• 2–5 слов
• Одно ключевое слово обернуть в <span> (оно окрасится в градиент)
• Это слово должно нести смысловой удар страницы

3) Тег-раздел (.mv-hX-tag) — формат:

• Раздел · <Одно-два слова сути>
• Примеры: «Раздел · Идентичность», «Раздел · Честный разговор», «Раздел · Живой архив», «Раздел · Манифест»

4) Подзаголовок (.mv-hX-sub) — правила:

• 1–2 предложения
• Раскрывает суть страницы
• Не дублирует заголовок, а дополняет

5) Цитата (.mv-hX-quote) — правила:

• В кавычках-ёлочках: «...»
• Самая сильная/афористичная фраза из материала
• 1 предложение, максимум 2
• Манифест страницы

Шаг 3. Выбрать префикс классов

• Одна заглавная латинская буква — первая буква ключевого слова страницы на английском/транслите
• Проверить, не конфликтует ли с уже использованными: R (Reports), B (Boundaries), N (Name)

Шаг 4. Выдать готовый код

• Скопировать эталонный CSS из образца
• Заменить все префиксы mv-hR на mv-hX (где X — новая буква)
• Подставить 5 придуманных текстов в HTML-разметку
• max-width у .quote можно подстроить под длину цитаты (стандарт 520–560px)
• Проверить, что все свойства с !important
• Проверить, что ключевое слово в заголовке обёрнуто в <span>

---

✅ ЧЕК-ЛИСТ ПЕРЕД СДАЧЕЙ ОТВЕТА

•  Префикс классов уникальный (.mv-hX-*, не совпадает с существующими)
•  На каждом CSS-свойстве стоит !important
•  На корневом .mv-hX явно задан font-family и max-width
•  Фон внешнего слоя: #0f0f1a
•  Фон карточки: #0a0a0f, border-radius: 18px
•  Градиент бренда и <span>: linear-gradient(135deg, #a78bfa, #d4af37) + все 4 background-clip свойства
•  Цвет заголовка: #e2e0ff
•  Цвет подзаголовка: #c0bfd6
•  Цвет цитаты: #a78bfa, курсив, с border-top
•  Внутри заголовка есть <span> с акцентным словом
•  Присутствует медиа-запрос @media(max-width:700px) с адаптивом
•  Присутствует .mv-hX-glow — декоративный фиолетовый glow сверху
•  Структура HTML: .mv-hX → .mv-hX-card → .mv-hX-glow + .mv-hX-body → 5 элементов

---

???? ФОРМАТ ОТВЕТА АССИСТЕНТА

Когда пользователь присылает материалы, ассистент отвечает по структуре:

1. Краткое вступление (1 предложение) — «Делаю обложку для страницы «...» с префиксом .mv-hX-*»
2. Готовый код в одном блоке html ... (style + разметка)
3. Таблица «Что в обложке» — 5 строк, что в каждом элементе и почему (обоснование из материалов)
4. Альтернативы (опционально) — 2–3 варианта заголовка и 2–3 варианта цитаты на выбор
5. Рекомендация — какая связка «заголовок + цитата» лучше всего работает и почему

---

???? ПРИМЕЧАНИЕ ПО КОНТЕКСТУ САЙТА

На картинке, которую видел ассистент (первая страница сайта с крупным MOTIVERIKON, орбитами и 4-лучевой звездой) — это отдельный hero-блок главной страницы, а НЕ обложка внутренней страницы. Обложки внутренних страниц (которые мы делаем по этой инструкции) — более скромные, сдержанные, документальные: без звёзд, орбит и огоньков. Это сознательное разделение:

• Hero главной = эмоция, космос, магия
• Обложки внутренних = ясность, структура, документ

Поэтому в обложках внутренних страниц используется только:

• плоская тёмная карточка #0a0a0f
• мягкий фиолетовый glow сверху (едва заметный)
• типографика + градиент на ключевых словах

Никаких орбит, звёзд, огоньков в обложках внутренних страниц не добавлять.

---

Конец инструкции.