/* ══════════════════════════════════════════════════════════════════ FACETER — PRIMITIVES (v3, новый дизайн) Глобальный слой №2: переиспользуемые примитивы, общие для всех блоков. Кнопки, контейнер, секция, лейблы/заголовки секций, утилита анимации. Значения 1:1 из дизайн-системы Виталия (vitaly_test_site/CLAUDE.md). Частное конкретного блока сюда НЕ кладём — оно в его компоненте (scoped). ═══════════════════════════════════════════════════════════════════ */ /* ══════════════ Сдвиг контента под фикс-шапку (+ промо-ленту) ══════════════ */ /* Единое правило: контент всех v3-страниц клирит шапку и, если включена, промо-ленту. --header-h — константа; --promo-h = 0 (выкл) или высота ленты (её задаёт PromoBar). Поэтому компоненты НЕ добавляют свой margin-top под шапку — отступ один, здесь. */ body{ padding-top: calc(var(--header-h) + var(--promo-h)); } /* Фолбэк-высота ленты (до точного JS-замера). Активна только когда лента включена: BaseLayout ставит data-promo на . Иначе --promo-h = 0 (зазора нет). */ [data-promo]{ --promo-h:44px; } @media (max-width:600px){ [data-promo]{ --promo-h:80px; } } /* ══════════════ Container ══════════════ */ .container{ max-width:var(--container); margin:0 auto; padding:0 var(--container-pad); } @media (max-width:680px){ .container{ padding:0 20px; } } /* ══════════════ Section ══════════════ */ /* Стандартный вертикальный ритм секций (был инлайном через --section-py). */ .section{ padding:var(--section-py) 0; } /* ══════════════ Section card ══════════════ */ /* Голубая скруглённая подложка-карточка вокруг содержимого секции (Features, Demo, SpecialCases). Общий примитив (≥3 блока), потому в глобальном слое. */ .section-card{ background:var(--bg); border-radius:40px; padding:var(--section-py) 0; } /* ══════════════ Section label ══════════════ */ /* Мелкий uppercase-лейбл над заголовком (ДЕМО, ЦЕНЫ, …). */ .section-label{ display:inline-flex;align-items:center;gap:8px; font-family:var(--font-body); font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase; color:var(--accent-b);margin-bottom:16px; } /* ══════════════ Section title ══════════════ */ .section-title{ font-size:clamp(30px,3.5vw,48px); font-weight:800;line-height:1.1;letter-spacing:-.02em;color:var(--black); } .section-title span{ /* акцентное слово — синий градиент */ background:var(--grad); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } /* ══════════════ Buttons ══════════════ */ /* Базовое для всех кнопок. */ .btn-primary,.btn-outline,.btn-white,.btn-ghost,.btn-login{ display:inline-flex;align-items:center;gap:10px; font-family:var(--font-head); border-radius:var(--radius-pill); cursor:pointer;text-align:center;white-space:nowrap; } /* Основная — синий градиент */ .btn-primary{ background:var(--grad);color:#fff; font-size:15px;font-weight:700;padding:14px 28px;border:none; box-shadow:0 6px 28px rgba(21,136,255,.3); transition:transform .25s,box-shadow .25s; } .btn-primary:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 10px 36px rgba(21,136,255,.42)} /* Контурная — обводка primary */ .btn-outline{ background:transparent;color:var(--primary); font-size:15px;font-weight:600;padding:13px 28px;border:1.5px solid var(--primary); transition:background .2s,color .2s; } .btn-outline:hover{background:var(--primary);color:#fff} /* Белая — на синем фоне */ .btn-white{ background:#fff;color:var(--primary); font-size:15px;font-weight:700;padding:14px 28px;border:none; box-shadow:0 6px 28px rgba(0,0,0,.15); transition:transform .25s,box-shadow .25s; } .btn-white:hover{transform:translateY(-2px) scale(1.02)} /* Призрачная — на синем фоне */ .btn-ghost{ background:rgba(255,255,255,.15);color:#fff; font-size:15px;font-weight:600;padding:13px 28px;border:1.5px solid rgba(255,255,255,.35); transition:background .2s; } .btn-ghost:hover{background:rgba(255,255,255,.25)} /* Логин — компактная контурная (в шапке) */ .btn-login{ color:var(--primary);font-size:13px;font-weight:600; padding:7px 18px;border:1.5px solid var(--primary); transition:background .2s,color .2s; } .btn-login:hover{background:var(--primary);color:#fff} /* ══════════════ Утилита: fade-up (появление при скролле) ══════════════ */ /* Класс .fade-up + JS-IntersectionObserver навешивает .visible (см. компонент-обвязку). */ .fade-up{ opacity:0;transform:translateY(28px); transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1); } .fade-up.visible{opacity:1;transform:translateY(0)} .fade-up[data-delay="1"]{transition-delay:.1s} .fade-up[data-delay="2"]{transition-delay:.2s} .fade-up[data-delay="3"]{transition-delay:.3s} .fade-up[data-delay="4"]{transition-delay:.4s} .fade-up[data-delay="5"]{transition-delay:.5s} .fade-up[data-delay="6"]{transition-delay:.6s} @media (prefers-reduced-motion:reduce){ .fade-up{opacity:1!important;transform:none!important;transition:none!important} }