/* ============================================================================
CRO-пакет W4 для new-sst.ru — cro.css (v1, 2026-09-19)
----------------------------------------------------------------------------
Подключать ПОСЛЕ base.css / landing.css / mainpage.css:
Все селекторы изолированы префиксом .cro-* либо жёстко скоуплены (.mp …),
чтобы не задевать чужие стили. Токены берутся из существующих переменных
сайта (светлая тема главной .mp и тёмная тема внутренних страниц) —
на обеих темах блоки выглядят корректно.
Разделы:
1. Шрифты и типографическая шкала (Inter + Manrope)
2. Динамический hero: ротатор заголовков
3. Микровзаимодействия: пульсация CTA, подъём карточек, счётчики
4. Квиз «Подберите услугу за 3 шага» (движок conversion.js)
5. Плавающая кнопка «Задать вопрос» (FAB)
6. Траст-бар
7. Формы: гарантия ответа, маска телефона
8. Плавный скролл и доступность
========================================================================== */
/* ---------------------------------------------------------------------------
1. ШРИФТЫ И ТИПОГРАФИЧЕСКАЯ ШКАЛА
---------------------------------------------------------------------------
Само подключение шрифтов — тегом в (см. INTEGRATION.md §2):
Inter 400/500/600/700 — основной текст (кириллица есть, проверено 19.09)
Manrope 600/700/800 — дисплейный для заголовков (кириллица есть)
В base.css Inter уже стоит вторым в стеке --font, поэтому body подключается
«сам». Здесь — только дисплейный слой и шкала.
--------------------------------------------------------------------------- */
:root {
--cro-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, sans-serif;
--cro-font-display: "Manrope", "Inter", -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, sans-serif;
/* Типографическая шкала (мобильный → 1440): 1.25 major third */
--cro-fs-display: clamp(30px, 4.6vw, 48px); /* H1 hero */
--cro-fs-h2: clamp(24px, 3.2vw, 36px); /* H2 секций */
--cro-fs-h3: 20px; /* H3 карточек */
--cro-fs-lead: clamp(16px, 1.6vw, 18.5px);/* лид-абзацы */
--cro-fs-body: 16px;
--cro-fs-small: 14px;
--cro-fs-micro: 12.5px;
--cro-lh-tight: 1.16;
--cro-lh-snug: 1.35;
--cro-lh-body: 1.62;
/* Динамическое включение дисплейного шрифта — только там, где включили
класс .cro-display на / или на конкретном заголовке.
Это защита от «слёта» шрифта на страницах, куда шрифт ещё не решено
подключать (см. INTEGRATION.md §2, шаг 4). */
--cro-track-tight: -0.02em;
}
.cro-display,
.cro-display h1, .cro-display h2, .cro-display h3,
[data-cro-display] {
font-family: var(--cro-font-display);
letter-spacing: var(--cro-track-tight);
}
/* Заголовки главной (только внутри .mp — светлая главная V5) */
.mp.cro-display .mp-hero__title,
.mp.cro-display h2, .mp.cro-display .v-h2 {
font-family: var(--cro-font-display);
letter-spacing: var(--cro-track-tight);
font-weight: 800;
line-height: var(--cro-lh-tight);
}
/* Базовые размеры для сниппетов пакета (не трогают существующие блоки) */
.cro-h2 { font-size: var(--cro-fs-h2); line-height: var(--cro-lh-tight); font-weight: 800; margin: 0 0 12px; font-family: var(--cro-font-display); letter-spacing: var(--cro-track-tight); }
.cro-lead { font-size: var(--cro-fs-lead); line-height: var(--cro-lh-body); color: var(--text-dim, #3f4c63); margin: 0; }
.cro-kicker { display: inline-block; font-size: var(--cro-fs-micro); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan, #1a56db); background: rgba(26, 86, 219, .08); border: 1px solid rgba(26, 86, 219, .18); border-radius: 999px; padding: 6px 14px; margin: 0 0 16px; }
/* ---------------------------------------------------------------------------
2. ДИНАМИЧЕСКИЙ HERO — РОТАТОР ЗАГОЛОВКОВ
---------------------------------------------------------------------------
Разметка: сниппет snippets/01-hero-rotator.html, логика — cro.js §2.
Первый вариант статично вшит в HTML (SEO + без-JS деградация),
остальные подменяет JS с fade-переходом. aria-live="off" — ротатор
НЕ спамит скринридеры.
--------------------------------------------------------------------------- */
.cro-rotator {
margin: 14px 0 10px;
min-height: 2.6em; /* фикс высоты: нет прыжков лэйаута */
display: flex;
flex-direction: column;
gap: 4px;
}
.cro-rotator__line {
display: flex;
align-items: baseline;
gap: 8px;
}
.cro-rotator__text {
font-family: var(--cro-font-display);
font-weight: 800;
font-size: clamp(19px, 2.3vw, 27px);
line-height: 1.25;
letter-spacing: var(--cro-track-tight);
color: var(--cyan, #1a56db);
background: var(--grad-accent, linear-gradient(120deg, #1a56db 0%, #3b82f6 55%, #7c3aed 100%));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
transition: opacity .45s ease, transform .45s ease;
}
/* мигающий каретка-курсор — «живой» текст */
.cro-rotator__caret {
flex: none;
width: 3px;
height: 1.05em;
align-self: center;
border-radius: 2px;
background: var(--cyan, #1a56db);
animation: cro-caret-blink 1.1s steps(1) infinite;
}
/* триггерный подтекст под ротатором */
.cro-rotator__sub {
font-size: var(--cro-fs-small);
line-height: 1.5;
color: var(--text-dim, #3f4c63);
transition: opacity .45s ease;
min-height: 1.5em;
}
.cro-rotator__sub b { color: var(--text, #0f1b2d); font-weight: 700; }
/* состояния фаз (управляет cro.js) */
.cro-rotator.is-out .cro-rotator__text { opacity: 0; transform: translateY(6px); }
.cro-rotator.is-out .cro-rotator__sub { opacity: 0; }
.cro-rotator .cro-rotator__text { opacity: 1; transform: translateY(0); }
.cro-rotator .cro-rotator__sub { opacity: 1; }
@keyframes cro-caret-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
/* ---------------------------------------------------------------------------
3. МИКРОВЗАИМОДЕЙСТВИЯ
---------------------------------------------------------------------------
3.1. Пульсация/свечение CTA при наведении (мягкая, 0.5с).
Работает для существующих кнопок сайта и для .cro-pulse.
--------------------------------------------------------------------------- */
@keyframes cro-cta-pulse {
0% { box-shadow: 0 8px 24px rgba(26, 86, 219, .28), 0 0 0 0 rgba(26, 86, 219, .30); }
100% { box-shadow: 0 12px 32px rgba(26, 86, 219, .34), 0 0 0 12px rgba(26, 86, 219, 0); }
}
.cro-pulse,
.mp .mp-btn--primary,
.v-btn--cta {
transition: transform .18s ease, box-shadow .25s ease, filter .18s ease;
}
.cro-pulse:hover, .cro-pulse:focus-visible,
.mp .mp-btn--primary:hover, .mp .mp-btn--primary:focus-visible,
.v-btn--cta:hover, .v-btn--cta:focus-visible {
animation: cro-cta-pulse .5s ease-out 1; /* мягкий одиночный «выдох» */
filter: brightness(1.05);
}
/* долгое наведение = продолжение лёгкой пульсации (0.5s/такт) */
.cro-pulse:hover,
.mp .mp-btn--primary:hover,
.v-btn--cta:hover {
animation: cro-cta-pulse-loop 1s ease-in-out infinite;
}
@keyframes cro-cta-pulse-loop {
0%, 100% { box-shadow: 0 10px 28px rgba(26, 86, 219, .30), 0 0 0 0 rgba(26, 86, 219, .22); }
50% { box-shadow: 0 12px 34px rgba(26, 86, 219, .36), 0 0 0 8px rgba(26, 86, 219, .04); }
}
/* 3.2. Подъём карточек. Утилита для любых карточек сниппетов пакета;
существующие .mp-service-card уже имеют lift (V5) — не дублируем. */
.cro-lift {
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
will-change: transform;
}
.cro-lift:hover, .cro-lift:focus-within {
transform: translateY(-4px);
box-shadow: 0 2px 6px rgba(15, 23, 42, .06), 0 18px 44px rgba(15, 23, 42, .13);
border-color: rgba(26, 86, 219, .35);
}
/* 3.3. Счётчики (анимирует cro.js §3; tabular-nums — цифры не «пляшут») */
.cro-stat { font-variant-numeric: tabular-nums; }
.cro-stat__value {
font-family: var(--cro-font-display);
font-weight: 800;
font-size: clamp(28px, 3vw, 38px);
line-height: 1.05;
color: var(--text, #0f1b2d);
}
.cro-stat__value em { font-style: normal; color: var(--cyan, #1a56db); }
.cro-stat__label {
font-size: var(--cro-fs-small);
color: var(--text-dim, #3f4c63);
line-height: 1.45;
margin-top: 4px;
}
/* ---------------------------------------------------------------------------
4. КВИЗ «ПОДБЕРИТЕ УСЛУГУ ЗА 3 ШАГА»
---------------------------------------------------------------------------
Движок — СУЩЕСТВУЮЩИЙ conversion.js ([data-quiz] + data-quiz-config),
цели Метрики: quiz_start (добавляет cro.js), quiz_result (уже в движке).
Здесь — только визуальный полиш поверх стандартных .quiz__* классов.
--------------------------------------------------------------------------- */
.cro-quiz {
background: var(--glass, #fff);
border: 1px solid var(--border, #e2e8f0);
border-radius: var(--radius-lg, 22px);
box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px rgba(15, 23, 42, .08);
padding: clamp(20px, 3vw, 34px);
}
.cro-quiz .quiz__progress {
background: var(--bg-3, #e8edf6);
border-radius: 999px;
}
.cro-quiz .quiz__progress i {
background: var(--grad-cta, linear-gradient(120deg, #1a56db, #7c3aed));
transition: width .4s ease;
}
.cro-quiz .quiz__q {
font-family: var(--cro-font-display);
font-weight: 800;
font-size: var(--cro-fs-h3);
color: var(--text, #0f1b2d);
}
.cro-quiz .quiz__opt {
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.cro-quiz .quiz__opt:hover, .cro-quiz .quiz__opt:focus-visible {
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(26, 86, 219, .16);
border-color: rgba(26, 86, 219, .45);
outline: none;
}
.cro-quiz .quiz__opt.is-sel {
background: var(--grad-cta, linear-gradient(120deg, #1a56db, #7c3aed));
border-color: transparent;
color: #fff;
box-shadow: 0 10px 26px rgba(26, 86, 219, .32);
}
.cro-quiz .quiz__note {
margin: 12px 0 0;
font-size: var(--cro-fs-micro);
color: var(--text-faint, #5a677e);
line-height: 1.5;
}
/* ---------------------------------------------------------------------------
5. ПЛАВАЮЩАЯ КНОПКА «ЗАДАТЬ ВОПРОС» (FAB)
---------------------------------------------------------------------------
Разметку строит cro.js §4 (нулевая правка HTML). Позиция — правый нижний
угол; на мобильных поднимается над .sticky-cta (панель conversion.js,
показывается <=860px, высота ~72px).
--------------------------------------------------------------------------- */
.cro-fab {
position: fixed;
right: 18px;
bottom: calc(18px + env(safe-area-inset-bottom));
z-index: 70; /* ниже .sticky-cta (z-index 80) и шапки */
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 10px;
opacity: 0;
transform: translateY(16px);
pointer-events: none;
transition: opacity .35s ease, transform .35s ease;
font-family: var(--cro-font-body);
}
.cro-fab.is-on { opacity: 1; transform: translateY(0); pointer-events: auto; }
@media (max-width: 860px) {
.cro-fab { bottom: calc(88px + env(safe-area-inset-bottom)); right: 12px; }
}
.cro-fab__btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 13px 20px;
border: 0;
border-radius: 999px;
cursor: pointer;
font: 700 15px/1.2 var(--cro-font-body);
color: #fff;
background: var(--grad-cta, linear-gradient(120deg, #1a56db, #7c3aed));
box-shadow: 0 10px 30px rgba(26, 86, 219, .35);
transition: transform .2s ease, box-shadow .25s ease, filter .18s ease;
}
.cro-fab__btn:hover, .cro-fab__btn:focus-visible {
transform: translateY(-2px);
filter: brightness(1.06);
animation: cro-cta-pulse-loop 1s ease-in-out infinite;
}
/* мягкая точка-индикатор «онлайн» */
.cro-fab__dot {
flex: none;
width: 8px; height: 8px;
border-radius: 50%;
background: #7ef0c2;
box-shadow: 0 0 0 0 rgba(126, 240, 194, .55);
animation: cro-dot-ping 2.2s ease-out infinite;
}
@keyframes cro-dot-ping {
0% { box-shadow: 0 0 0 0 rgba(126, 240, 194, .55); }
70% { box-shadow: 0 0 0 9px rgba(126, 240, 194, 0); }
100% { box-shadow: 0 0 0 0 rgba(126, 240, 194, 0); }
}
/* раскрывающаяся панель быстрых контактов */
.cro-fab__panel {
min-width: 240px;
background: var(--glass, #fff);
border: 1px solid var(--border, #e2e8f0);
border-radius: 16px;
box-shadow: 0 4px 12px rgba(15, 23, 42, .08), 0 24px 56px rgba(15, 23, 42, .18);
padding: 8px;
opacity: 0;
transform: translateY(8px) scale(.98);
transform-origin: bottom right;
pointer-events: none;
transition: opacity .25s ease, transform .25s ease;
}
.cro-fab.is-open .cro-fab__panel { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.cro-fab__panel-title {
font-size: var(--cro-fs-micro);
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--text-faint, #5a677e);
padding: 8px 12px 6px;
}
.cro-fab__action {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 11px 12px;
border: 0;
border-radius: 12px;
background: transparent;
text-decoration: none;
font: 600 15px/1.3 var(--cro-font-body);
color: var(--text, #0f1b2d);
cursor: pointer;
transition: background .15s ease, transform .15s ease;
}
.cro-fab__action:hover, .cro-fab__action:focus-visible {
background: rgba(26, 86, 219, .08);
transform: translateX(2px);
outline: none;
}
.cro-fab__action small { display: block; font-size: 12px; font-weight: 500; color: var(--text-faint, #5a677e); }
.cro-fab__action-ico { flex: none; font-size: 17px; line-height: 1; }
/* ---------------------------------------------------------------------------
6. ТРАСТ-БАР
---------------------------------------------------------------------------
Только подтверждённые факты (см. комментарий в сниппете 04). Чип «УСН»
по умолчанию ЗАКОММЕНТИРОВАН: налоговый режим ООО по RECENT_ACTIONS
от 2026-09-16 — UNKNOWN; включить только после подтверждения Owner.
--------------------------------------------------------------------------- */
.cro-trust {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 12px;
}
.cro-trust__item {
display: flex;
align-items: flex-start;
gap: 10px;
background: var(--glass, #fff);
border: 1px solid var(--border, #e2e8f0);
border-radius: var(--radius-md, 16px);
padding: 14px 16px;
font-size: var(--cro-fs-small);
line-height: 1.45;
color: var(--text-dim, #3f4c63);
}
.cro-trust__item b { color: var(--text, #0f1b2d); font-weight: 700; }
.cro-trust__check {
flex: none;
width: 22px; height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(26, 86, 219, .10);
color: var(--cyan, #1a56db);
font-size: 12px;
font-weight: 800;
margin-top: 1px;
}
/* ---------------------------------------------------------------------------
7. ФОРМЫ: гарантия ответа, маска телефона
--------------------------------------------------------------------------- */
/* бейдж-гарантия под кнопкой отправки */
.cro-guarantee {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 12px;
font-size: var(--cro-fs-small);
color: var(--text-dim, #3f4c63);
}
.cro-guarantee__ico { color: var(--cyan, #1a56db); font-weight: 800; }
/* мягкий фокус полей (не перекрывает существующие .v-field) */
.cro-field input:hover { border-color: rgba(26, 86, 219, .40); }
.cro-field input:focus-visible {
outline: 2px solid rgba(26, 86, 219, .55);
outline-offset: 1px;
}
/* ---------------------------------------------------------------------------
8. ПЛАВНЫЙ СКРОЛЛ, ДОСТУПНОСТЬ, REDUCED-MOTION
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
html.cro-js a[href^="#"] { scroll-behavior: smooth; }
}
/* Единый focus-ring для интерактивных элементов пакета */
.cro-fab__btn:focus-visible,
.cro-fab__action:focus-visible,
.cro-quiz .quiz__opt:focus-visible,
.cro-rotator__text:focus-visible {
outline: 2px solid rgba(26, 86, 219, .65);
outline-offset: 2px;
}
/* Уважение к reduced-motion: вся анимационная нагрузка снимается,
контент остаётся полностью доступным (V-канон проекта). */
@media (prefers-reduced-motion: reduce) {
.cro-rotator__text, .cro-rotator__sub { transition: none; }
.cro-rotator__caret { animation: none; }
.cro-pulse, .mp .mp-btn--primary, .v-btn--cta { animation: none !important; }
.cro-pulse:hover, .mp .mp-btn--primary:hover, .v-btn--cta:hover { animation: none !important; }
.cro-lift, .cro-lift:hover, .cro-lift:focus-within { transform: none; transition: none; }
.cro-fab { transition: opacity .2s linear; }
.cro-fab__btn, .cro-fab__btn:hover { animation: none; }
.cro-fab__dot { animation: none; }
.cro-quiz .quiz__opt, .cro-quiz .quiz__opt:hover { transform: none; transition: none; }
html { scroll-behavior: auto; }
}
/* ---------------------------------------------------------------------------
9. ИНЛАЙН CTA-БЛОК ПОСЛЕ ПЕРВОГО H2 — YA5 «КОНВЕРСИЯ-МАКС» (2026-09-19)
---------------------------------------------------------------------------
Разметку вставляет /root/ya5_cro.py на ТОП-20 страницах (кроме главной).
Кнопка mp-btn--primary здесь скоуплена ВНУТРЬ .cro-cta-inline — блок
самодостаточен и на тёмной теме внутренних страниц, и на светлой:
токены (--grad-cta/--cyan/--border/…) берутся из base.css страницы.
Цели Метрики: inline_cta_click (кнопка), inline_phone_click (телефон).
--------------------------------------------------------------------------- */
.cro-cta-inline {
margin: 26px 0 30px;
padding: 20px 22px 18px;
display: flex;
flex-direction: column;
gap: 14px;
background: var(--glass, #fff);
border: 1px solid var(--border, #e2e8f0);
border-left: 4px solid var(--cyan, #1a56db);
border-radius: var(--radius-md, 16px);
box-shadow: var(--shadow-card, 0 1px 2px rgba(15,23,42,.04), 0 12px 32px rgba(15,23,42,.08));
}
.cro-cta-inline__lead {
margin: 0;
font-size: clamp(16px, 1.6vw, 18.5px);
line-height: 1.5;
color: var(--text, #0f1b2d);
}
.cro-cta-inline__lead strong { font-weight: 800; }
.cro-cta-inline__row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px 22px;
}
/* Кнопка: самодостаточные стили mp-btn--primary (вне .mp-обёртки главной) */
.cro-cta-inline .mp-btn--primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 48px;
padding: 13px 28px;
border: 0;
border-radius: 10px;
cursor: pointer;
font: 700 16px/1.2 var(--cro-font-body, "Inter", sans-serif);
text-decoration: none;
color: #fff;
background: var(--grad-cta, linear-gradient(120deg, #1a56db, #7c3aed));
box-shadow: 0 10px 26px rgba(26, 86, 219, .32);
transition: transform .18s ease, box-shadow .25s ease, filter .18s ease;
}
.cro-cta-inline .mp-btn--primary:hover,
.cro-cta-inline .mp-btn--primary:focus-visible {
transform: translateY(-1px);
filter: brightness(1.06);
animation: cro-cta-pulse-loop 1s ease-in-out infinite; /* glow-пульсация §3 */
}
/* Телефон крупно рядом с кнопкой — кликабельный tel: */
.cro-cta-inline__tel {
font-family: var(--cro-font-display, "Manrope", "Inter", sans-serif);
font-weight: 800;
font-size: clamp(17px, 1.8vw, 20px);
line-height: 1.25;
color: var(--text, #0f1b2d);
text-decoration: none;
white-space: nowrap;
border-bottom: 2px solid rgba(26, 86, 219, .35);
transition: color .15s ease, border-color .15s ease;
}
.cro-cta-inline__tel span {
font-family: var(--cro-font-body, "Inter", sans-serif);
font-weight: 500;
font-size: 13.5px;
color: var(--text-dim, #3f4c63);
}
.cro-cta-inline__tel:hover, .cro-cta-inline__tel:focus-visible {
color: var(--cyan, #1a56db);
border-color: var(--cyan, #1a56db);
outline: none;
}
/* Траст-строка: только подтверждённые факты (ИНН/реестр МСП/2016) */
.cro-cta-inline__note {
margin: 0;
font-size: 13px;
line-height: 1.55;
color: var(--text-dim, #3f4c63);
}
.cro-cta-inline__note b { color: var(--text, #0f1b2d); font-weight: 700; }
@media (max-width: 560px) {
.cro-cta-inline { padding: 16px 16px 14px; }
.cro-cta-inline__row { flex-direction: column; align-items: stretch; gap: 12px; }
.cro-cta-inline .mp-btn--primary { width: 100%; }
.cro-cta-inline__tel { white-space: normal; width: 100%; }
}
/* Доступность: единый focus-ring (см. §8) */
.cro-cta-inline .mp-btn--primary:focus-visible,
.cro-cta-inline__tel:focus-visible {
outline: 2px solid rgba(26, 86, 219, .65);
outline-offset: 2px;
}
/* reduced-motion: пульсацию кнопки снимаем (контент доступен) */
@media (prefers-reduced-motion: reduce) {
.cro-cta-inline .mp-btn--primary,
.cro-cta-inline .mp-btn--primary:hover,
.cro-cta-inline .mp-btn--primary:focus-visible { animation: none !important; transform: none; }
}