style.css — стилізація та CSS змінні

style.css — стилізація та CSS змінні

Обов'язковий скоуп

Всі CSS правила повинні бути скоуповані під .cms-section-{type} щоб не впливати на інші секції та глобальні стилі.

/* ✅ Правильно — скоупований */
.cms-section-hero .offer { background: #fff; }
.cms-section-hero .offer .price { font-size: 32px; color: #d32f2f; }

/* ❌ Неправильно — глобальний стиль ламає інші секції */
.offer { background: #fff; }
body { margin: 0; }

CSS custom properties (змінні)

Renderer автоматично генерує для кожної секції блок CSS змінних з усіх ключів data.vars:

/* Генерується Renderer автоматично */
#section-3f3f2e01 {
  --BG_COLOR: #b12f7a;
  --ACCENT_COLOR: #d32f2f;
  --PRODUCT_BG: url('/data/uploads/product.jpg');
  --NEW_PRICE: 890;
  --CURRENCY: грн.;
}

В style.css використовуй ці змінні з fallback значеннями:

.cms-section-hero .offer {
  background: var(--BG_COLOR, #b12f7a);    /* fallback якщо var не задана */
}
.cms-section-hero .offer .box {
  background-image: var(--PRODUCT_BG);     /* URL для зображення */
  background-size: cover;
  background-position: center;
}
.cms-section-hero .price-val {
  color: var(--ACCENT_COLOR, #d32f2f);
}

💡 Fallback значення (var(--NAME, fallback)) — обов'язкові: дозволяють секції виглядати правильно навіть якщо змінна не задана.

Зображення в CSS — через var()

Зображення що використовуються як CSS фон — не хардкодити, а задавати через CSS custom property:

/* style.css */
.cms-section-hero .box {
  background-image: var(--PRODUCT_BG);    /* значення з data.vars */
  background-position: 50% 0;
  background-repeat: no-repeat;
  height: 480px;
}

/* landing.json — data.vars */
/* "PRODUCT_BG": "url(img/product.jpg)"  ← installer замінить шлях */

⚠️ url(var(--X)) в CSS не працює. Значення змінної вже повинно містити url(...).

@keyframes — унікальний префікс

Назви анімацій глобальні. Якщо дві секції мають однакову назву анімації — конфлікт. Завжди додавай префікс з template ID:

/* ✅ Правильно */
@keyframes sy2-hero-pulse {
  from { transform: scale(1); }
  to   { transform: scale(1.05); }
}
.cms-section-hero .cta-btn {
  animation: sy2-hero-pulse 1.5s ease infinite alternate;
}

/* ❌ Неправильно — конфліктує з іншими секціями */
@keyframes pulse { ... }

Подвійне застосування CSS — уникати padding на .cms-section-{type}

Renderer обгортає секцію у <div class="cms-section cms-section-{type}">, а шаблон має свій кореневий <div class="offer cms-section-hero">. Обидва мають однаковий клас. Padding на класі застосовується двічі:

/* ❌ Неправильно — padding подвоюється */
.cms-section-countdown { padding: 15px 0 20px; }

/* ✅ Правильно — margin на внутрішньому елементі */
.cms-section-countdown { background: var(--BG_COLOR, #f5f5f5); }
.cms-section-countdown .countdown { margin: 15px auto 20px; }

Скоупування .wrap контейнера

Оригінальні лендинги мають глобальний .wrap { max-width:480px; margin:0 auto; }. У CMS такого контейнера немає — задати через global_styles.custom_css у landing.json:

"custom_css": ".cms-section { max-width:480px; margin-left:auto; margin-right:auto; overflow-x:hidden; }"