/* ============================================================================ VD4 «HOME-POLISH» — home.css (v1, 2026-09-19) ---------------------------------------------------------------------------- Страница-специфика главной new-sst.ru в светлой Positive-стилистике: · белый фон страницы, чередование секций #FFFFFF / #F5F7FA; · текст navy #0B1F3A, вторичный #64748B; · красный #E30613 — ЕДИНСТВЕННЫЙ главный CTA-цвет (кнопки/маркеры-акценты); · шрифт PT Sans (400/700), подключён в ; · футер — контрастный тёмно-navy #0B1F3A с белым текстом. Файл подключается ПОСЛЕДНИМ (после base/landing/mainpage/cro/mp-anim/header-neon), поэтому переопределяет только визуал, не трогая хуки JS (все классы-хуки сохранены). Скоуп: body.home-positive (+ .mp для контентной области). Шапка .mn-* НЕ тронута (зона VD2), FAB/sticky-cta/.v-* переведены на светлую версию здесь, т.к. живут вне .mp, но на этой странице. ========================================================================== */ /* --------------------------------------------------------------------------- 0. ТОКЕНЫ СТРАНИЦЫ + БАЗА --------------------------------------------------------------------------- */ body.home-positive { /* Positive-палитра страницы */ --hp-navy: #0B1F3A; --hp-red: #E30613; --hp-red-dark: #C00511; --hp-dim: #566779; --hp-faint: #94A3B8; --hp-line: #E2E8F0; --hp-bg-alt: #F5F7FA; --hp-bg-soft: #F8FAFF; --hp-font: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Светлые значения сайтовых токенов для элементов вне .mp (FAB, sticky-cta) */ --bg-0: #FFFFFF; --bg-1: #F5F7FA; --bg-2: #FFFFFF; --bg-3: #EEF2FF; --cyan: #E30613; --cyan-soft: rgba(227, 6, 19, 0.08); --violet: #0B1F3A; --magenta: #0B1F3A; --grad-accent: linear-gradient(120deg, #0B1F3A 0%, #0B1F3A 100%); --grad-cta: linear-gradient(120deg, #E30613 0%, #E30613 100%); --text: #0B1F3A; --text-dim: #64748B; --text-faint: #94A3B8; --glass: #FFFFFF; --glass-strong: #FFFFFF; --border: #E2E8F0; --border-strong: #CBD5E1; --glow-cyan: none; --glow-violet: none; --shadow-card: 0 1px 2px rgba(11, 31, 58, 0.05), 0 12px 32px rgba(11, 31, 58, 0.10); --radius-lg: 16px; --radius-md: 14px; --radius-sm: 10px; /* CRO-шрифты → PT Sans (для ротатора/квиза/FAB) */ --cro-font-body: var(--hp-font); --cro-font-display: var(--hp-font); background: #FFFFFF; color: var(--hp-navy); font-family: var(--hp-font); } /* Гасим тёмный ambient-фон base.css (неон-сетки) только на главной */ body.home-positive::before, body.home-positive::after { display: none; } /* Тот же набор токенов внутри контентной области .mp (перекрывает mainpage.css) */ body.home-positive .mp { --bg-0: #FFFFFF; --bg-1: #F5F7FA; --bg-2: #FFFFFF; --bg-3: #EEF2FF; --cyan: #E30613; --cyan-soft: rgba(227, 6, 19, 0.08); --violet: #0B1F3A; --magenta: #0B1F3A; --grad-accent: linear-gradient(120deg, #0B1F3A 0%, #0B1F3A 100%); --grad-cta: linear-gradient(120deg, #E30613 0%, #E30613 100%); --text: #0B1F3A; --text-dim: #64748B; --text-faint: #94A3B8; --glass: #FFFFFF; --glass-strong: #FFFFFF; --border: #E2E8F0; --border-strong: #CBD5E1; --glow-cyan: none; --glow-violet: none; --shadow-card: 0 1px 2px rgba(11, 31, 58, 0.05), 0 12px 32px rgba(11, 31, 58, 0.10); background: #FFFFFF; color: var(--hp-navy); font-family: var(--hp-font); } body.home-positive .mp h1, body.home-positive .mp h2, body.home-positive .mp h3, body.home-positive .mp h4, body.home-positive .mp .v-h2, body.home-positive .mp .v-h3, body.home-positive .mp .cro-h2 { font-family: var(--hp-font); letter-spacing: -0.01em; color: var(--hp-navy); } body.home-positive a { color: var(--hp-red); } body.home-positive a:hover { color: var(--hp-red-dark); } /* Ссылки внутри текста — с мягким подчёркиванием */ body.home-positive .mp .mp-lead a, body.home-positive .mp .mp-card__text a, body.home-positive .mp .mp-faq__a a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(227, 6, 19, 0.35); } body.home-positive ::selection { background: rgba(227, 6, 19, 0.16); color: var(--hp-navy); } /* --------------------------------------------------------------------------- 1. HERO — светлая подложка: radial #F8FAFF→#EEF2FF + тонкая сетка --------------------------------------------------------------------------- */ body.home-positive .mp .mp-hero { background: radial-gradient(120% 90% at 50% -10%, #F8FAFF 0%, #EEF2FF 62%, #FFFFFF 100%); border-bottom: 1px solid var(--hp-line); } /* тонкая инженерная сетка rgba(11,31,58,.04) */ body.home-positive .mp .mp-hero::before { background-image: linear-gradient(rgba(11, 31, 58, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 31, 58, 0.04) 1px, transparent 1px); background-size: 56px 56px; opacity: 0.9; } body.home-positive .mp .mp-hero__title { font-size: clamp(34px, 5vw, 56px); line-height: 1.1; font-weight: 700; letter-spacing: -0.015em; color: var(--hp-navy); max-width: 640px; } body.home-positive .mp .mp-grad { background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: currentColor; color: var(--hp-navy); } /* бейдж-hero: белый pill с рамкой */ body.home-positive .mp .mp-kicker, body.home-positive .mp .mp-kicker--violet { color: var(--hp-navy); background: #FFFFFF; border: 1px solid var(--hp-line); box-shadow: 0 1px 2px rgba(11, 31, 58, 0.04); } body.home-positive .mp .mp-hero__lead { color: var(--hp-dim); } body.home-positive .mp .mp-hero__note { color: var(--hp-faint); } /* правая панель — белая карточка без неон-аур */ body.home-positive .mp .mp-hero__panel { background: #FFFFFF; border: 1px solid var(--hp-line); box-shadow: 0 1px 2px rgba(11, 31, 58, 0.04), 0 18px 44px rgba(11, 31, 58, 0.10); } body.home-positive .mp .mp-hero__panel::before { display: none; } body.home-positive .mp .mp-hero__panel:hover { border-color: #CBD5E1; box-shadow: 0 2px 6px rgba(11, 31, 58, 0.06), 0 22px 52px rgba(11, 31, 58, 0.13); } /* quick-answer / expert-answer — светлые версии (были тёмными инлайн-стилями) */ body.home-positive .quick-answer { margin: 0; padding: 18px 20px; border: 1px solid var(--hp-line); border-left: 3px solid var(--hp-red); border-radius: 10px; background: var(--hp-bg-soft); font-size: 16px; line-height: 1.6; color: var(--hp-navy); max-width: none; } body.home-positive .quick-answer .qa-tag { display: block; font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hp-red); margin-bottom: 8px; font-weight: 700; } body.home-positive .quick-answer p { margin: 0 0 8px; } body.home-positive .quick-answer p:last-of-type { margin-bottom: 0; } body.home-positive .qa-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--hp-line); font-size: 14px; color: var(--hp-dim); } body.home-positive .qa-links a { color: var(--hp-navy); text-decoration: none; border-bottom: 1px dashed rgba(11, 31, 58, 0.35); } body.home-positive .qa-links a:hover, body.home-positive .qa-links a:focus { color: var(--hp-red); border-color: var(--hp-red); } body.home-positive .expert-answer { margin: 18px 0 0; padding: 16px 20px; border: 1px solid var(--hp-line); border-left: 3px solid #2FBF71; border-radius: 10px; background: #FFFFFF; font-size: 14.5px; line-height: 1.6; color: var(--hp-navy); } body.home-positive .expert-answer .ea-tag { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #1E9E5A; margin-bottom: 8px; font-weight: 700; } body.home-positive .expert-answer p { margin: 0; } /* --------------------------------------------------------------------------- 2. РОТАТОР HERO — красный текст + маркер-подчёркивание (animated width) Хук cro.js §2: .cro-rotator__text/__sub + класс .is-out — сохранены. --------------------------------------------------------------------------- */ body.home-positive .cro-rotator__text { font-family: var(--hp-font); font-weight: 700; font-size: clamp(19px, 2.3vw, 26px); line-height: 1.3; letter-spacing: -0.01em; color: var(--hp-red); background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: currentColor; position: relative; padding-bottom: 5px; } /* маркер: красная черта под фразой; анимация ширины перезапускается на каждой смене фразы (cro.js снимает .is-out → селектор снова матчится → анимация идёт) */ body.home-positive .cro-rotator__text::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; border-radius: 2px; background: var(--hp-red); transform-origin: left center; } body.home-positive .cro-rotator:not(.is-out) .cro-rotator__text::after { animation: hp-marker-draw 0.65s cubic-bezier(0.25, 0.8, 0.3, 1) both; } @keyframes hp-marker-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } } body.home-positive .cro-rotator__caret { background: var(--hp-red); } body.home-positive .cro-rotator__sub { color: var(--hp-dim); } body.home-positive .cro-rotator__sub b { color: var(--hp-navy); } /* --------------------------------------------------------------------------- 3. КНОПКИ — красный главный CTA + ghost-navy вторичная --------------------------------------------------------------------------- */ body.home-positive .mp .mp-btn--primary, body.home-positive .v-btn--cta, body.home-positive .mp .mp-services__cta-btn, body.home-positive #mp-tech2027 .mp-cta__btn { background: var(--hp-red); color: #FFFFFF; box-shadow: 0 8px 24px rgba(227, 6, 19, 0.26); } body.home-positive .mp .mp-btn--primary:hover, body.home-positive .mp .mp-btn--primary:focus-visible, body.home-positive .v-btn--cta:hover, body.home-positive .v-btn--cta:focus-visible, body.home-positive .mp .mp-services__cta-btn:hover, body.home-positive #mp-tech2027 .mp-cta__btn:hover { background: var(--hp-red-dark); color: #FFFFFF; transform: translateY(-2px); box-shadow: 0 12px 32px rgba(227, 6, 19, 0.32); filter: none; animation: none; /* гасим синюю пульсацию cro.css §3 — красный CTA статично-спокоен */ } body.home-positive .mp .mp-btn--primary:focus-visible, body.home-positive .v-btn--cta:focus-visible { outline: 2px solid rgba(227, 6, 19, 0.55); outline-offset: 2px; } /* вторичная ghost — navy */ body.home-positive .mp .mp-btn--ghost, body.home-positive .v-btn--ghost { background: #FFFFFF; border: 1.5px solid rgba(11, 31, 58, 0.45); color: var(--hp-navy); } body.home-positive .mp .mp-btn--ghost:hover, body.home-positive .mp .mp-btn--ghost:focus-visible, body.home-positive .v-btn--ghost:hover, body.home-positive .v-btn--ghost:focus-visible { background: var(--hp-navy); border-color: var(--hp-navy); color: #FFFFFF; transform: translateY(-1px); } body.home-positive .v-btn--ghost:focus-visible { outline: 2px solid rgba(11, 31, 58, 0.5); outline-offset: 2px; } /* бейджи — белые pill с рамкой */ body.home-positive .v-badge { background: #FFFFFF; border: 1px solid var(--hp-line); color: var(--hp-dim); } body.home-positive .v-badge b { color: var(--hp-navy); } /* --------------------------------------------------------------------------- 4. СЕКЦИИ — чередование #FFF/#F5F7FA; заголовки с красной маркер-чертой --------------------------------------------------------------------------- */ body.home-positive .hp-alt { background: var(--hp-bg-alt); } body.home-positive .mp .mp-section--alt { background: var(--hp-bg-alt); border-top: 1px solid var(--hp-line); border-bottom: 1px solid var(--hp-line); } body.home-positive .mp .mp-services { padding: 72px 0; background: var(--hp-bg-alt); border-top: 1px solid var(--hp-line); border-bottom: 1px solid var(--hp-line); } body.home-positive .mp .mp-eco { padding: 72px 0; } body.home-positive .mp .mp-services__kicker { display: inline-flex; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hp-navy); background: #FFFFFF; border: 1px solid var(--hp-line); border-radius: 999px; padding: 7px 14px; margin: 0 0 20px; } body.home-positive .mp .mp-services__title { font-size: clamp(26px, 3.4vw, 38px); line-height: 1.18; font-weight: 700; margin: 0 0 14px; } body.home-positive .mp .mp-services__lead { color: var(--hp-dim); } /* красная тонкая маркер-черта слева (24×3) у заголовков секций */ body.home-positive .mp .mp-title, body.home-positive .mp .mp-services__title, body.home-positive .mp-trust .mp-h2, body.home-positive #mp-tech2027 .mp-h2, body.home-positive .cro-h2 { position: relative; padding-left: 34px; color: var(--hp-navy); } body.home-positive .mp .mp-title::before, body.home-positive .mp .mp-services__title::before, body.home-positive .mp-trust .mp-h2::before, body.home-positive #mp-tech2027 .mp-h2::before, body.home-positive .cro-h2::before { content: ""; position: absolute; left: 0; top: 0.52em; width: 24px; height: 3px; border-radius: 2px; background: var(--hp-red); } body.home-positive .mp .mp-lead { color: var(--hp-dim); } body.home-positive .mp .mp-lead b, body.home-positive .mp .mp-lead strong { color: var(--hp-navy); } /* --------------------------------------------------------------------------- 5. СЕТКИ И КАРТОЧКИ — светлые, рамка #E2E8F0, hover-подготовка (VD3) --------------------------------------------------------------------------- */ body.home-positive .mp .mp-container { max-width: var(--container, 1180px); margin: 0 auto; padding: 0 28px; } body.home-positive .mp .mp-grid--2 { grid-template-columns: 1fr; } @media (min-width: 768px) { body.home-positive .mp .mp-grid--2 { grid-template-columns: repeat(2, 1fr); } } body.home-positive .mp .mp-card { background: #FFFFFF; border: 1px solid var(--hp-line); box-shadow: 0 1px 2px rgba(11, 31, 58, 0.04); } body.home-positive .mp .mp-card::after { background: linear-gradient(90deg, var(--hp-red) 0%, var(--hp-navy) 100%); } body.home-positive .mp .mp-card:hover { border-color: rgba(11, 31, 58, 0.35); box-shadow: 0 2px 6px rgba(11, 31, 58, 0.06), 0 18px 44px rgba(11, 31, 58, 0.13); } body.home-positive .mp .mp-card__num { font-family: var(--mp-mono, ui-monospace, Menlo, monospace); color: var(--hp-faint); } body.home-positive .mp .mp-card__tag { color: var(--hp-dim); border-color: var(--hp-line); } body.home-positive .mp .mp-card__title { color: var(--hp-navy); } body.home-positive .mp .mp-card__text { color: var(--hp-dim); } body.home-positive .mp .mp-card__link { color: var(--hp-red); } body.home-positive .mp .mp-card__link:hover { color: var(--hp-red-dark); } /* иконки экосистемы: тонкие линейные navy (SVG stroke 1.5 currentColor) */ body.home-positive .mp .mp-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; background: var(--hp-bg-alt); border: 1px solid var(--hp-line); color: var(--hp-navy); margin-bottom: 14px; } body.home-positive .mp .mp-card__icon svg { width: 24px; height: 24px; } body.home-positive .mp .mp-eco .mp-card__link::after { content: none; } /* --- карточки услуг --- */ body.home-positive .mp .mp-services__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 20px; } body.home-positive .mp .mp-service-card { position: relative; display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid var(--hp-line); border-radius: 16px; padding: 24px; box-shadow: 0 1px 2px rgba(11, 31, 58, 0.04); transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease; } /* hover-подготовка под VD3 (анимации усилит mp-anim/cro-lift) */ body.home-positive .mp .mp-service-card:hover, body.home-positive .mp .mp-service-card:focus-within { transform: translateY(-4px); border-color: rgba(11, 31, 58, 0.35); box-shadow: 0 2px 6px rgba(11, 31, 58, 0.06), 0 18px 44px rgba(11, 31, 58, 0.13); } body.home-positive .mp .mp-service-card__ico { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; background: var(--hp-bg-alt); border: 1px solid var(--hp-line); color: var(--hp-navy); margin-bottom: 14px; } body.home-positive .mp .mp-service-card__ico svg { width: 24px; height: 24px; } body.home-positive .mp .mp-service-card__marker { font-family: var(--mp-mono, ui-monospace, Menlo, monospace); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--hp-faint); display: block; margin-bottom: 10px; } body.home-positive .mp .mp-service-card__name { font-size: 17.5px; font-weight: 700; line-height: 1.3; margin: 0 0 8px; } body.home-positive .mp .mp-service-card__name a { color: var(--hp-navy); text-decoration: none; } body.home-positive .mp .mp-service-card__name a:hover, body.home-positive .mp .mp-service-card__name a:focus-visible { color: var(--hp-red); } body.home-positive .mp .mp-service-card__desc { font-size: 14.5px; line-height: 1.6; color: var(--hp-dim); margin: 0 0 12px; } body.home-positive .mp .mp-service-card__fact { font-size: 13.5px; line-height: 1.55; color: var(--hp-navy); background: var(--hp-bg-soft); border: 1px solid var(--hp-line); border-radius: 10px; padding: 10px 12px; margin: 0; } body.home-positive .mp .mp-service-card__go { margin-top: 16px; font-size: 14.5px; font-weight: 700; color: var(--hp-red); text-decoration: none; align-self: flex-start; } body.home-positive .mp .mp-service-card__go:hover { color: var(--hp-red-dark); } body.home-positive .mp .mp-services__extra { margin-top: 20px; padding: 18px 22px; border: 1px dashed var(--hp-line); border-radius: 14px; background: #FFFFFF; } body.home-positive .mp .mp-services__extra-title { margin: 0; font-size: 16.5px; font-weight: 700; } body.home-positive .mp .mp-services__extra-title a { color: var(--hp-navy); text-decoration: none; } body.home-positive .mp .mp-services__extra-title a:hover { color: var(--hp-red); } body.home-positive .mp .mp-services__extra-desc { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: var(--hp-dim); } body.home-positive .mp .mp-services__cta { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; } body.home-positive .mp .mp-services__cta-text { margin: 0; font-size: 15px; color: var(--hp-dim); } body.home-positive .mp .mp-services__cta-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 26px; border-radius: 10px; font-weight: 700; font-size: 15px; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: transform 0.18s ease, box-shadow 0.22s ease, background 0.18s ease; } body.home-positive .mp .mp-services__footnote { margin: 18px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--hp-faint); } @media (min-width: 640px) { body.home-positive .mp .mp-services__grid { grid-template-columns: repeat(2, 1fr); } body.home-positive .mp .mp-eco .mp-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { body.home-positive .mp .mp-services__grid { grid-template-columns: repeat(3, 1fr); } body.home-positive .mp .mp-eco .mp-grid { grid-template-columns: repeat(3, 1fr); } } /* --- экосистема: мост и CTA --- */ body.home-positive .mp .mp-bridge { margin-top: 26px; padding: 20px 24px; border: 1px solid var(--hp-line); border-radius: 14px; background: #FFFFFF; } body.home-positive .mp .mp-bridge__text { margin: 0; font-size: 15px; line-height: 1.65; color: var(--hp-dim); } body.home-positive .mp .mp-bridge__text strong { color: var(--hp-navy); } body.home-positive .mp .mp-bridge__link { color: var(--hp-red); font-weight: 700; text-decoration: none; } body.home-positive .mp .mp-bridge__link:hover { color: var(--hp-red-dark); } body.home-positive .mp .mp-eco .mp-cta { padding: 0; margin-top: 22px; text-align: left; border-radius: 0; } /* --------------------------------------------------------------------------- 6. ТРАСТ-БАР HERO — белая полоса с рамкой сверху; счётчики navy 32px --------------------------------------------------------------------------- */ body.home-positive .mp .mp-hero__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin-top: 44px; background: #FFFFFF; border: 1px solid var(--hp-line); border-top: 3px solid var(--hp-navy); border-radius: 14px; box-shadow: 0 1px 2px rgba(11, 31, 58, 0.04), 0 14px 36px rgba(11, 31, 58, 0.07); padding: 22px 26px; } body.home-positive .mp .mp-stat { padding: 10px 12px; } body.home-positive .mp .mp-stat__value { font-family: var(--hp-font); font-size: 32px; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--hp-navy); } body.home-positive .mp .mp-stat__label { font-size: 13px; color: var(--hp-dim); margin-top: 4px; line-height: 1.45; min-height: 0; } @media (min-width: 900px) { body.home-positive .mp .mp-hero__stats { grid-template-columns: repeat(4, 1fr); } } /* чипы доверия (cro-trust) — светлые */ body.home-positive .cro-trust__item { background: #FFFFFF; border: 1px solid var(--hp-line); color: var(--hp-dim); } body.home-positive .cro-trust__item b { color: var(--hp-navy); } body.home-positive .cro-trust__check { background: rgba(11, 31, 58, 0.07); color: var(--hp-navy); } body.home-positive .cro-lift:hover, body.home-positive .cro-lift:focus-within { border-color: rgba(11, 31, 58, 0.35); box-shadow: 0 2px 6px rgba(11, 31, 58, 0.06), 0 18px 44px rgba(11, 31, 58, 0.13); } /* --------------------------------------------------------------------------- 7. ТЕХНОЛОГИИ-2027 — светлая версия (был тёмный инлайн-