Запоминалка для следующих блоков

Запоминалка для следующих блоков

 

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

---

???? ГЛАВНЫЕ ПРАВИЛА БЕЗОПАСНОСТИ (новое в v4)

Правило №1. Фон на корне секции — ВСЕГДА #0f0f1a явно

Без этого Tilda делает фон прозрачным и блок «проваливается» на белое. 

 

/* ❌ ПЛОХО — фон исчезнет под Tilda */
.mv-s-N{
  position:relative;
  max-width:var(--mv-w);
  padding:130px 40px;
}

/* ✅ ХОРОШО — фон железно держится */
.mv-s-N{
  position:relative!important;
  max-width:var(--mv-w,1200px)!important;
  margin:0 auto!important;
  padding:130px 40px 130px!important;
  font-family:var(--mv-font,'Inter',sans-serif)!important;
  background:#0f0f1a!important;
  overflow:hidden!important;
}

 

Запомнить: background:#0f0f1a!important — это обязательный реквизит корневого .mv-s-N, как position:relative. Без фона блок ломается.

---

Правило №2. font-family — ВСЕГДА с фолбэком на корне

Без этого Tilda подставляет свой стандартный шрифт и блок «выпадает» из ритма страницы.

 

/* ❌ ПЛОХО — Tilda заменит шрифт */
.mv-s-N{ ... }

/* ✅ ХОРОШО — шрифт держится */
.mv-s-N{
  font-family:var(--mv-font,'Inter',sans-serif)!important;
}

/* ❌ ПЛОХО — Tilda заменит шрифт */
.mv-s-N{ ... }

/* ✅ ХОРОШО — шрифт держится */
.mv-s-N{
  font-family:var(--mv-font,'Inter',sans-serif)!important;
}

 

Запомнить: font-family ставим только на корне .mv-s-N — дочерние элементы наследуют. Не нужно дублировать на каждой карточке.

---

Правило №3. Цвета текста — ВСЕГДА hex или с фолбэком

var(--mv-head), var(--mv-body), var(--mv-dim), var(--mv-muted) — на странице либо не определены, либо переопределяются Tilda во что-то невидимое. Текст становится прозрачным.

 

/* ❌ ПЛОХО — текст невидим */
color:var(--mv-head)!important;
color:var(--mv-body)!important;
color:var(--mv-muted)!important;

/* ✅ ХОРОШО — жёсткий hex */
color:#f5f5f7!important;        /* основные заголовки */
color:#e2e0ff!important;        /* H2 акцентный */
color:#c8c8d0!important;        /* обычный текст */
color:#c4c2d6!important;        /* лид-параграф */
color:#a0a0b6!important;        /* приглушённый */
color:#8a8a96!important;        /* подпись */
color:#706f80!important;        /* метка-индекс */

/* ✅ ИЛИ с фолбэком (страховка) */
color:#f5f5f7!important;
color:var(--mv-head, #f5f5f7)!important; 

 

/* ❌ ПЛОХО */
background:linear-gradient(135deg, var(--mv-v), var(--mv-g))!important;

/* ✅ ХОРОШО */
background:linear-gradient(135deg, #a78bfa, #fbbf24)!important;
/* или */
background:linear-gradient(135deg, var(--mv-v,#a78bfa), var(--mv-g,#fbbf24))!important;

 

Правило №4. !important — на ВСЕХ свойствах в обёртке

Раньше я писал «только на конфликтных» — это было ошибкой. Tilda переопределяет margin, padding, font, color, display, position, gap, width, height, border, background, transform, transition, opacity, line-height, letter-spacing, text-transform. Под Tilda — !important на всех свойствах внутри .mv-s-N и его детей.

css

/* ❌ ПЛОХО — половина свойств слетит */
.mv-s-N-card{
  position:relative;
  padding:28px 24px!important;
  background:rgba(255,255,255,.022);
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;
  font-size:14px!important;
}

/* ✅ ХОРОШО — всё держится */
.mv-s-N-card{
  position:relative!important;
  margin:0!important;
  padding:28px 24px!important;
  background:rgba(255,255,255,.022)!important;
  border:1px solid rgba(255,255,255,.06)!important;
  border-radius:18px!important;
  font-size:14px!important;
  transition:transform .35s ease!important;
}

Эталон проверки: в mv-h1, mv-p1 Сергея — каждая строка CSS заканчивается на !important. Это не паранойя, это норма проекта.

---

Правило №5. Структурная обёртка — три уровня (как в mv-p1)

Между корнем и контентом — отдельный body-контейнер. Это нужно чтобы glow-слои лежали под контентом.

html

<div class="mv-s-N">                <!-- 1. Корень: фон #0f0f1a, padding, overflow:hidden -->
  <div class="mv-s-N-glow"></div>   <!-- Свечение 1 (z-index:0) -->
  <div class="mv-s-N-glow2"></div>  <!-- Свечение 2 (z-index:0) -->
  <div class="mv-s-N-body">         <!-- 2. Body: max-width:900-1180, z-index:2 -->
    <!-- весь контент -->
  </div>
</div>

css

.mv-s-N{
  position:relative!important;
  background:#0f0f1a!important;
  font-family:var(--mv-font,'Inter',sans-serif)!important;
  overflow:hidden!important;
  /* padding, max-width */
}
.mv-s-N-body{
  position:relative!important;
  z-index:2!important;
  max-width:900px!important;     /* или 1180px для широких */
  margin:0 auto!important;
  padding:0!important;
}

---

????️ ЧЕКЛИСТ «ЗАЩИТА ОТ TILDA» — перед каждой отправкой

#	Проверка	Эталон
1	На корне .mv-s-N есть background:#0f0f1a!important	✅
2	На корне есть font-family:var(--mv-font,'Inter',sans-serif)!important	✅
3	На корне есть position:relative!important + overflow:hidden!important	✅
4	max-width:var(--mv-w,1200px)!important — с фолбэком	✅
5	Все color — это hex или var(...,#hex)	✅
6	Все background-image, linear-gradient — hex или var(...,#hex)	✅
7	Все border-color — hex/rgba или var(...,#hex)	✅
8	!important на каждом свойстве внутри .mv-s-N и детей	✅
9	Структура: корень → glow1 → glow2 → body → контент	✅
10	На body стоит z-index:2, на glow — z-index:0	✅

---

???? Шаблон-стартер для нового блока (копировать целиком)

css

.mv-s-N{
  position:relative!important;
  max-width:var(--mv-w,1200px)!important;
  margin:0 auto!important;
  padding:130px 40px 130px!important;
  font-family:var(--mv-font,'Inter',sans-serif)!important;
  background:#0f0f1a!important;
  overflow:hidden!important;
}
.mv-s-N-glow{
  position:absolute!important;
  top:5%!important; left:50%!important;
  transform:translateX(-50%)!important;
  width:1000px!important; height:1000px!important;
  border-radius:50%!important;
  background:radial-gradient(circle, rgba(167,139,250,.06) 0%, transparent 55%)!important;
  pointer-events:none!important;
  z-index:0!important;
  filter:blur(80px)!important;
}
.mv-s-N-glow2{
  position:absolute!important;
  bottom:-10%!important; right:-10%!important;
  width:600px!important; height:600px!important;
  border-radius:50%!important;
  background:radial-gradient(circle, rgba(251,191,36,.04) 0%, transparent 60%)!important;
  pointer-events:none!important;
  z-index:0!important;
  filter:blur(80px)!important;
}
.mv-s-N-body{
  position:relative!important;
  z-index:2!important;
  max-width:900px!important;
  margin:0 auto!important;
  padding:0!important;
}

---

???? Палитра в hex (никаких голых переменных!)

Назначение	Hex	Где использовать
Главный заголовок	#f5f5f7	H1, H2
Заголовок с фиолетом	#e2e0ff	как в mv-p1
Лид/параграф	#c4c2d6 или #c8c8d0	основной текст
Приглушённый	#a0a0b6	подзаголовки, цитаты
Подпись/мелкий	#8a8a96	подписи к карточкам
Метка-индекс	#706f80	«Элемент 1», «01»
Фиолет основной	#a78bfa	акценты, метки, рамки
Фиолет светлый	#c4b5fd	в градиентах H2
Циан/нефрит	#22d3ee	средний акцент триады
Янтарь/золото	#fbbf24	финал триады, CTA
Тревожный	#fca5a5	warning-блоки
Фон секции	#0f0f1a	ОБЯЗАТЕЛЬНО на корне

---

⚡ Старт работы (правильная фраза)

«Делаем mv-s-N. Соседний блок: [код mv-h1 или mv-p1]. Роль: [...]. Метка: [...]. Структура: метка → H2 → … → итог. Триада: фиолет/нефрит/янтарь = [тема1]/[тема2]/[тема3]. Защита от Tilda обязательна: #0f0f1a, font-family, !important на всех свойствах, hex-цвета.»

---

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

Если фон прозрачный, шрифт сменился или текст исчез — это не баг блока, это защита не сработала. Проверяй пункты 1, 2, 5 чеклиста — в 99% случаев забыто одно из трёх:

1. background:#0f0f1a!important на корне
2. font-family:var(--mv-font,'Inter',sans-serif)!important на корне
3. var(--mv-head) без фолбэка → текст невидим

 

 

 

 

 

Никогда не использовать var(--mv-head), var(--mv-body), var(--mv-muted) без фолбэка — на странице эти переменные либо не определены, либо переопределяются Tilda во что-то невидимое.

Правило для будущих блоков: 

/* ❌ ПЛОХО */
color:var(--mv-head)!important;

/* ✅ ХОРОШО */
color:#f5f5f7!important;        /* основной текст */
color:#c8c8d0!important;        /* обычный текст */
color:#8a8a96!important;        /* приглушённый */ 

 

Или с фолбэком, если очень хочется переменную:

color:#f5f5f7!important;
color:var(--mv-head, #f5f5f7)!important; 

 

---