НАПОМИНАЛКА MOTIVERIKON Вёрстка архитектуры v9.5

Главная / Статьи / НАПОМИНАЛКА MOTIVERIKON Вёрстка архитектуры v9.5

0

20 May 2026

НАПОМИНАЛКА · MOTIVERIKON · Вёрстка архитектуры v9.5

Версия напоминалки: 2.0 Дата: Май 2026 Назначение: Единый протокол вёрстки 36 блоков архитектуры MOTIVERIKON в HTML/CSS для встраивания в редактор (Tilda / WordPress / любой rich-editor).

0. КОНТЕКСТ ПРОЕКТА

Что верстаем: документ «MOTIVERIKON · Архитектура системы v9.5» — 36 разделов, 12 Книг, 10 Расширений, 20 Приложений. Автор — Сергей Колост.

Эталонный исходник: файл MOTIVERIKON_Arkhitektura_v9.5.docx (даётся пользователем в чате). При любом противоречии между моими ранее сделанными блоками и этим файлом — правке подлежит блок.

Цель вёрстки: каждый раздел исходника → один автономный HTML-блок, который:

встраивается в редактор как единое целое
работает изолированно от других стилей страницы
адаптивен (desktop / tablet / mobile)
визуально выражает смысл раздела (палитра, акценты, иерархия)

1. ТЕХНИЧЕСКИЕ ТРЕБОВАНИЯ

1.1 Изоляция CSS

Каждый блок имеет уникальный префикс класса: mv-aXX, где XX — двузначный порядковый номер (mv-a02, mv-a03, …, mv-a37).
Все селекторы блока начинаются с этого префикса.
На всех свойствах — !important (защита от стилей редактора).
box-sizing:border-box!important для блока и всех его потомков (.mv-aXX *).

1.2 Полноширинная верстка

Каждый блок растягивается на всю ширину окна, выходя за рамки контейнера редактора:

css

.mv-aXX{
  position:relative!important;
  width:100vw!important;
  margin-left:calc(50% - 50vw)!important;
  margin-right:calc(50% - 50vw)!important;
  margin-top:0!important;
  margin-bottom:0!important;
  max-width:none!important;
}

1.3 Фон и базовая типографика

Фон блока: #0f0f1a (тёмный фиолетово-синий, единый для всех 36 блоков).
Основной цвет текста: #e2e0ff (светло-лавандовый).
Вторичный текст: #c0bfd6.
Приглушённый текст / лейблы: #a0a0b6.
Шрифт: font-family:var(--mv-font,'Inter',sans-serif).
Padding блока: 80px 40px 90px (desktop) → 60px 20px 70px (tablet) → 48px 14px 56px (mobile).

1.4 Внутренний контейнер

Контент центрируется внутри блока:

css

.mv-aXX-inner{
  position:relative!important;
  z-index:2!important;
  max-width:920px!important;
  margin:0 auto!important;
}

1.5 Декоративные свечения

Каждый блок имеет 1–2 радиальных свечения в палитре блока (опционально, но желательно):

css

.mv-aXX-glow{
  position:absolute!important;
  top:-15%!important;
  right:-12%!important;
  width:700px!important;
  height:700px!important;
  border-radius:50%!important;
  background:radial-gradient(circle,rgba(R,G,B,.09) 0%,transparent 55%)!important;
  pointer-events:none!important;
  z-index:1!important;
}

2. ПАЛИТРА 36 БЛОКОВ

Каждому блоку назначен ведущий цвет (акцент) и светлый вариант для градиентов. Палитра — единая система: цвета связаны со смыслом блока и перекликаются между связанными разделами.

№	Раздел (короткое имя)	Префикс	Акцент	Светлый	Смысловая нить
I	Оглавление	mv-a02	базовая	—	нейтрально
II	Название системы	mv-a03	`#d4af37` золото	`#fde047`	Источник, изначальное
III	Что такое MOTIVERIKON	mv-a04	`#a78bfa` аметист	`#c4b5fd`	Система в целом
IV	Архитектура человека	mv-a05	`#6366f1` индиго	`#818cf8`	Глубина, слои
V	Код Мотива	mv-a06	`#8b5cf6` фиолет + `#d4af37` золото	`#a78bfa`	Идентификация
VI	Завеса/Источник/Живость	mv-a07	`#06b6d4` циан + `#d4af37` золото	`#67e8f9`	Двери, проницание
VII	Динамика тени	mv-a08	`#dc2626` кровь + `#fb923c` янтарь + `#5eead4` бирюза	—	Стадии работы с тенью
VIII	12 типов	mv-a09	`#a78bfa` аметист	`#c4b5fd`	Ядро системы
IX	Двойной двигатель К/ОТ	mv-a10	`#5eead4` бирюза + `#ef4444` кровь	—	Биполярность мотива
X	12 ступеней	mv-a11	`#d4af37` золото	`#fde047`	Вертикаль пути
X-bis	Принцип стадийности	mv-a12	`#d4af37` (приглушённое)	—	Сквозной принцип
XI	Проявленность	mv-a13	`#22d3ee` циан-яркий	`#67e8f9`	Воплощение
XII	Карта сфер	mv-a14	`#34d399` изумруд	`#6ee7b7`	Горизонталь жизни
XII-bis	Принцип отношений	mv-a15	`#34d399` (приглушённое)	—	Сквозной принцип
XIII	Резонанс	mv-a16	`#ec4899` маджента	`#f9a8d4`	Между людьми
XIV	Предназначение	mv-a17	`#fbbf24` тёплое золото	`#fde68a`	Предназначение
XV	Вера	mv-a18	`#fb923c` янтарь	`#fdba74`	Энергия мотива
XVI	У-вэй	mv-a19	`#06b6d4` циан	`#67e8f9`	Состояние-дверь
XVII	Воображение	mv-a20	`#c084fc` лиловый	`#d8b4fe`	Творческое мышление
XVIII	Карта и Звезда	mv-a21	`#d4af37` золото + `#a78bfa` аметист	—	Навигация
XIX	Корпус тезисов	mv-a22	`#6366f1` индиго	`#818cf8`	Фундамент текста
XX	7 принципов	mv-a23	`#a78bfa` аметист	`#c4b5fd`	Базовые принципы
XXI	Кодекс	mv-a24	`#d4af37` золото	`#fde047`	12 оснований
XXII	Стиль и голос	mv-a25	`#e2e0ff` (базовый текст как акцент)	—	Метаслой
XXIII	Структура книг	mv-a26	`#6366f1` индиго	`#818cf8`	Корпус книг
XXIV	Матрица доступа	mv-a27	`#34d399` изумруд → `#d4af37` золото градиент	—	4 уровня
XXV	Приложения А–У	mv-a28	`#a78bfa` аметист	`#c4b5fd`	20 приложений
XXVI	Расширения А–К	mv-a29	`#22d3ee` циан-яркий	`#67e8f9`	10 расширений
XXVII	На плечах гигантов	mv-a30	`#fbbf24` тёплое золото	`#fde68a`	Корни, традиция
XXVIII	Сайт системы	mv-a31	`#5eead4` бирюза	`#99f6e4`	Фундамент / точка входа
XXIX	Практики системы	mv-a32	`#fb923c` янтарь	`#fdba74`	Делание
XXX	Теневые пары	mv-a33	`#dc2626` кровь	`#f87171`	Тень типичная
XXXI	Код Мотива (док)	mv-a34	`#8b5cf6` фиолет	`#a78bfa`	Отдельный документ
XXXII	Ступени (док)	mv-a35	`#d4af37` золото	`#fde047`	Отдельный документ
XXXIII	Дело	mv-a36	`#34d399` изумруд	`#6ee7b7`	Сфера 01
XXXIV	Ступень × Передача	mv-a37	`#fbbf24` тёплое золото	`#fde68a`	Экспертность
XXXV	Практики проявленности	mv-a38	`#ec4899` маджента	`#f9a8d4`	Природная тень, тело
XXXVI	Протокол изменений	mv-a39	базовая нейтральная	—	Версионирование

Принципы палитры

Связанные блоки делят цвет: золото (II, X, XXI, XXXII) → источник/путь/основания; аметист (III, VIII, XX, XXV) → ядро системы; бирюза/циан (VI, XVI, XXVIII) → проницание/у-вэй.
Биполярные блоки (VII, IX, XXX) используют два или три цвета для выражения полярности или стадий.
Сквозные принципы (X-bis, XII-bis) используют приглушённый вариант основного цвета связанного блока.

3. ТИПОВАЯ СТРУКТУРА БЛОКА

Каждый блок строится по схеме:

3.1 Шапка (head)

html

<div class="mv-aXX-head">
  <span class="mv-aXX-eyebrow">Раздел N</span>
  <h2 class="mv-aXX-h1">Название с <span>акцентом</span></h2>
  <p class="mv-aXX-lead">Короткий вводный абзац с <b>ключевыми словами</b> и <em>смысловыми акцентами</em>.</p>
</div>

eyebrow — капсула с номером раздела, цвет акцента блока.
h1 — заголовок с градиентным акцентом на ключевом слове.
lead — 1–3 предложения, передающие суть раздела.

3.2 Тело (контент)

Зависит от типа раздела. Типовые паттерны:

Тип контента	Решение
Таблица 2–4 колонки	`grid-template-columns:...` + шапка `thead` + строки `step/type/row`
Список принципов / правил	grid 2–3 колонки с карточками `rule`
Парные противопоставления	flex с разделителем `⇄`
Стадии / фазы	grid 3 колонки с цветовой кодировкой по фазам
Сравнительные блоки	grid 2 колонки с разной цветовой границей слева

3.3 Следствие (cons)

Закрывает блок ключевой мыслью:

html

<div class="mv-aXX-cons">
  <span class="mv-aXX-cons-arr">→</span>
  <p class="mv-aXX-cons-t">Основной вывод с <b>ключевыми терминами</b> и <em>акцентами</em>.</p>
</div>

Стрелка → слева — фирменный знак системы (см. п. XXII оригинала: «Следствие начинается со стрелки →»).
Фон следствия — лёгкий градиент в палитре блока.

3.4 Предупреждения (warning)

Когда в исходнике стоит ⚠:

html

<div class="mv-aXX-warn">
  <span class="mv-aXX-warn-ic">⚠</span>
  <p class="mv-aXX-warn-t">Текст предупреждения.</p>
</div>

Цвет — янтарный #fb923c или красный #dc2626 в зависимости от тона.

4. АДАПТИВ

Три брейкпойнта:

css

@media(max-width:900px){
  /* tablet: */
  /* — grid 4 колонок → 2 колонки */
  /* — таблицы → карточки с лейблами через :before */
  /* — padding блока 60px 20px 70px */
}

@media(max-width:600px){
  /* mobile: */
  /* — grid 2 → 1 колонка */
  /* — padding 48px 14px 56px */
  /* — уменьшение декоративных элементов */
}

Правило: на мобильном таблицы превращаются в карточки — номер слева, остальное справа в столбец. Лейблы колонок выводятся через :before { content:"Метка:" }.

5. ТИПОГРАФИКА И АКЦЕНТЫ

5.1 Размеры

h1 блока: clamp(1.7em, 3.2vw, 2.4em), font-weight:800, line-height:1.2.
h2/sec-title: 1.3em, font-weight:800.
h3/подзаголовки карточек: 1em–1.1em, font-weight:800.
Основной текст: .92em–1em, line-height:1.55–1.6.
Лейблы/eyebrow: .72em–.82em, letter-spacing:.08em–.14em, text-transform:uppercase, font-weight:800.

5.2 Смысловые акценты в тексте

<b> — структурный акцент (термин, ключевое слово). Цвет: #e2e0ff (ярче основного).
<em> — смысловой акцент (важная мысль). Цвет: акцент блока (например #d4af37). font-style:normal!important — не курсив, а цвет.
Курсив через стиль (например font-style:italic) — для ОТ-полюсов, цитат, имён ступеней.

5.3 Запрещённые слова (из п. XXII оригинала)

При наборе текста блоков не использовать:

«закон» (применительно к Кону)
«архетип» (применительно к типам)
«МТ-12», «Мотив-Зодиак» (упразднено)
канцелярит: «данный», «следует отметить», «рассматриваемый»
мотивационные клише: «потенциал», «лучшая версия», «новый уровень»

6. ИНТЕРАКТИВНОСТЬ

6.1 Hover-эффекты

Карточки, строки таблиц, элементы списков:

css

.mv-aXX-card{ transition:background .25s ease, transform .25s ease, border-color .25s ease!important; }
.mv-aXX-card:hover{
  background:rgba(R,G,B,.06)!important;
  transform:translateY(-3px)!important;
  border-color:rgba(R,G,B,.4)!important;
}

6.2 Без JS

Все блоки — чистый HTML+CSS. Никакого JavaScript. Все эффекты — через CSS-transitions.

7. ???? СЦЕНАРИЙ «СВЕРКА С ЭТАЛОНОМ» ⭐

Когда срабатывает: пользователь сбрасывает в чат свежий файл MOTIVERIKON_Arkhitektura_vX.X.docx в середине работы над блоками.

Что это означает:

Это НЕ задание на новые блоки — это эталон для правки уже сделанных + основа для всех следующих.

Приоритет:

Новый исходник vX.X > мои ранее сделанные блоки → блоки правке подлежат

Алгоритм действий:

Подтвердить получение эталона и спросить:
- С какого блока начинать сверку (с первого / с последнего / с конкретного)
- Идём построчно или выборочно (только расхождения)
- Формат отчёта: переделанный блок целиком + diff, или только diff
Для каждого сверяемого блока: а. Открыть текущую версию блока в контексте б. Открыть соответствующий раздел эталона в. Сверить построчно: формулировки, термины, цифры, структура таблиц, порядок элементов г. Найти расхождения и зафиксировать в diff-формате д. Применить улучшайзинг: визуальные апгрейды, новые UI-элементы, лучшая иерархия е. Выдать переделанный блок целиком

Формат отчёта об изменениях:

✏️ ТЕКСТ
• было: «...» → стало: «...» (раздел эталона: X)
• добавлено: «...» (нет в моей версии)
• удалено: «...» (нет в эталоне)

???? ВИЗУАЛ
• улучшено: ... (зачем)
• новый элемент: ... (логика)

⚠️ СПОРНЫЕ МОМЕНТЫ
• вопрос: ... — нужно решение

Правило тишины при сверке:
- Не генерить новые блоки, пока идёт сверка уже сделанных
- Не предлагать «продолжить с блока N+1», пока юзер не закрыл текущий

Триггеры включения сценария:

Юзер кидает файл Arkhitektura_vX.X.docx
Юзер пишет «сверь с эталоном», «равняясь на документ», «по новому исходнику»
Юзер указывает на расхождение между блоком и оригиналом

8. ПРОТОКОЛ ОТВЕТА АССИСТЕНТА

8.1 При вёрстке нового блока

Структура ответа:

Краткое описание: какой блок, какая палитра, какая логика
HTML+CSS код в одном ```html-блоке
«Что в блоке N» — пояснение решений (палитра, структура, связки с другими блоками)
Адаптив — описание поведения на мобильном
Прогресс-таблица: что сделано / что сейчас / что следующее
Предложение следующего шага с указанием префикса и палитры

8.2 При сверке (сценарий 7)

Структура ответа:

Эталон зафиксирован: версия документа, дата
План сверки: какие блоки, в каком порядке
Запрос подтверждения перед началом работы

После подтверждения — для каждого блока:

Diff-отчёт (формат из п.7.3)
Переделанный блок целиком в ```html
Резюме изменений одним абзацем

8.3 Длина и форматирование ответа

Длинный код не вызывает резюме «вот ваш код» — сразу к делу.
При выдаче нескольких блоков подряд — между ними горизонтальные разделители ---.
В конце каждого блока кода — пояснительный текст, не пустота.

9. КОНТРОЛЬНЫЕ ТОЧКИ КАЧЕСТВА

Перед выдачей каждого блока проверить:

Префикс mv-aXX уникален и соответствует таблице из п.2
Все CSS-свойства с !important
Блок растягивается на 100vw, фон #0f0f1a
Внутренний контейнер max-width:920px
Палитра из таблицы п.2 применена корректно
Адаптив отрабатывает на 900px и 600px
Таблицы превращаются в карточки на мобильном
Все цитаты, цифры, термины из эталона переданы точно
Нет запрещённых слов (п.5.3)
→ используется для следствий, ⚠ для предупреждений
Есть hover-эффекты на карточках
Нет JavaScript
HTML валидный, теги закрыты

10. ПРОГРЕСС-ТАБЛИЦА (актуализируется в каждом ответе)

№	Раздел	Префикс	Статус	Версия
I	Оглавление	mv-a02	✅ сверстан	требует сверки с v9.5
II	Название системы	mv-a03	✅ сверстан	требует сверки с v9.5
III	Что такое MOTIVERIKON	mv-a04	✅ сверстан	требует сверки с v9.5
IV	Архитектура человека	mv-a05	✅ сверстан	требует сверки с v9.5
V	Код Мотива	mv-a06	✅ сверстан	требует сверки с v9.5
VI	Завеса/Источник/Живость	mv-a07	✅ сверстан	требует сверки с v9.5
VII	Динамика тени	mv-a08	✅ сверстан	требует сверки с v9.5
VIII	12 типов	mv-a09	✅ сверстан	требует сверки с v9.5
IX	Двойной двигатель К/ОТ	mv-a10	⏸ начат, прерван	—
X — XXXVI	…	…	⏳ не начато	—

11. ПРАВИЛА ЯЗЫКА

Отвечаю на том же языке, что и последний запрос пользователя (русский).
Внутри кода (комментарии, классы) — латиница, английский.
Тексты блоков — русский, точно по эталону.

12. ФИНАЛЬНОЕ НАПОМИНАНИЕ

Главный принцип работы:

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

При сверке с эталоном точность важнее красоты. Сначала — соответствие тексту v9.5. Потом — улучшайзинг. Никогда наоборот.

Отзывы

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