/* * landing-2 — design tokens (Direct-Response Long-Form Landing) * Источник: — (обезличено) * * Значения выведены из computed styles одностраничного direct-response * лендинга (10 major content-блоков, ~25000 px высота, Bitrix-шаблон * с KitAnimate-fadeDown, Slick-slider и Fancybox-попапами). * * Жанр: Russian direct-response long-form (info-product sales page). * – dual-accent violet + orange с жёсткой ролевой асимметрией * (violet = action, orange = navigate — не инвертировать!) * – signature warm shadow: двухслойная drop-тень + orange-слой 0.05 opacity * – pill-radii extremes: 100px для CTA, 1000px для tags, НЕТ прямоугольных CTA * – long-form ~25000px scroll, 10 content-блоков с .b-N numbered naming * (Bitrix/Tilda-CMS наследие — namespace не семантика) * – body 15/22 (не 16/24) — уплотнение для длинного убеждающего текста * – weight 400 доминирует (1775 / 1806), иерархия через размер, не через вес * – letter-spacing 0.4-1px pervasive — подпись бренда даже на body * – green KPI-bubbles inline в текстовом потоке (17 bg), не отдельная stats-секция * – two-speed scroll-reveal: 0.8s блоков + 0.6s контента (KitAnimate + IO) */ :root { /* ═══ ФОНЫ ════════════════════════════════════════════════════ */ --ld2-bg-base: #FFFFFF; /* body — белый (109 bg-вхождений) */ --ld2-bg-cream: #FCFBFA; /* subtle cream на carded-блоках */ --ld2-bg-dark: #222222; /* тёмные секции (3 bg — редкий точечный акцент) */ --ld2-bg-deep: #0B0813; /* самый тёмный (1 вхождение — accent block) */ --ld2-bg-night: #050C1B; /* midnight blue (1 вхождение) */ /* ═══ ТЕКСТ ═══════════════════════════════════════════════════ */ --ld2-ink-primary: #0D0D10; /* основной — 1371 исп, blue-tinted dark (не #000) */ --ld2-ink-on-dark: #FFFFFF; /* текст на dark/accent-секциях */ --ld2-ink-muted-50: rgba(13, 13, 16, 0.5); /* meta, captions */ --ld2-ink-muted-black-50: rgba(0, 0, 0, 0.5); /* альтернативный muted */ --ld2-ink-grey-soft: #CCCCCC; /* edge-captions */ --ld2-ink-grey: #B2B2B3; /* подписи */ /* ═══ БРЕНД / АКЦЕНТЫ (dual-role) ═════════════════════════════ */ /* PRIMARY — violet, роль "action" (CTA bg, radio-checked, play, arrows, slick-arrows) */ --ld2-violet: #5E4ABB; /* 94,74,187 — primary hover (3 близких токена сведены) */ --ld2-violet-muted: #8E84B5; /* 142,132,181 — decorative dotted borders, secondary */ --ld2-violet-link: #5F4DB4; /* 95,77,180 — inline-link (44 исп), checked-state */ /* SECONDARY — orange, роль "navigate" (link-hover, tab-active, program-link) */ --ld2-orange: #FF8A00; /* 255,138,0 — main orange (23 color + 10 bg) */ --ld2-orange-deep: #EB3B00; /* 235,59,0 — deep-saturated variant (1 bg, CTA-vivid) */ --ld2-orange-warm: #FF8B2A; /* 255,139,42 — warm variant */ /* TERTIARY — peach/tan warm-palette (третий warm-tone, для checkbox-hover) */ --ld2-peach: #FFC887; /* 255,200,135 — чекбокс hover */ --ld2-tan: #DFB888; /* 223,184,136 — hero-капсула accent */ --ld2-tan-deep: #DCB586; /* 220,181,134 — tan-bg variant */ /* DORMANT brand-var — зарезервирован в source :root как --color-pg, но НЕ используется. */ /* Не тянуть в демо. Хранится для полноты. */ --ld2-neon-yellow-dormant: #E3FE39; /* ═══ СТАТУСЫ ═════════════════════════════════════════════════ */ --ld2-success: #76BE71; /* 118,190,113 — green KPI-bubbles (17 bg inline!) */ --ld2-success-h: #6BAC67; /* 107,172,103 — hover-state green */ --ld2-danger: #E85D54; /* 232,93,84 — red alert */ --ld2-danger-h: #D4544B; /* 212,84,75 — hover */ --ld2-info-blue: #5762E5; /* 87,98,229 — default button bg (browser-blue fallback) */ --ld2-info-cyan: #339FDF; /* 51,159,223 — rare info */ /* ЛЕГАСИ-АУТЛАЙЕР (документируется, но в демо НЕ использовать) */ --ld2-legacy-nav-red: #F2362D; /* 242,54,45 — nav-menu hover в оригинале, не вписывается в палитру */ /* ═══ РАЗДЕЛИТЕЛИ / БОРДЕРЫ ═══════════════════════════════════ */ --ld2-border-soft: rgba(0, 0, 0, 0.1); /* pervasive light border (5 исп) */ --ld2-border-ink-soft: rgba(13, 13, 16, 0.1); /* dark-subtle alternative */ --ld2-border-medium: #DDDDDD; /* 221,221,221 — bottom borders (54 исп) */ --ld2-border-strong: #DBDBDB; /* 219,219,219 — select border */ --ld2-border-violet: rgb(94, 74, 187); /* primary violet border (3 исп, chosen hover) */ --ld2-border-violet-dot: rgba(142, 132, 181, 0.3); /* dotted sub-violet borders */ /* ═══ ТИПОГРАФИКА ═════════════════════════════════════════════ */ /* Источник использовал Inter (open-source, без лицензии). Redundant fallback через system-ui, sans-serif. */ --ld2-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --ld2-font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* 1 вкрапление Playfair Display Italic на 25000px — точечный типографический хайлайт. Использовать для single accent (subline в hero или stat-highlight). */ --ld2-font-accent-italic: 'Playfair Display', 'Times New Roman', serif; /* Кегли — 15px body (НЕ 16), иерархия через размер, не через вес */ --ld2-fs-10: 10px; --ld2-fs-12: 12px; /* caption / label */ --ld2-fs-14: 14px; /* small meta */ --ld2-fs-15: 15px; /* BASE body — 1132 исп (не 16!) */ --ld2-fs-18: 18px; /* select / large body */ --ld2-fs-20: 20px; /* subheading — 214 исп */ --ld2-fs-21: 21px; /* button (округлено с 21.07 legacy) */ --ld2-fs-25: 25px; /* H4 */ --ld2-fs-30: 30px; /* H3 — 63 исп */ --ld2-fs-35: 35px; --ld2-fs-50: 50px; /* H2 hero — 26 исп */ --ld2-fs-52: 52px; /* H1 hero variant */ --ld2-fs-55: 55px; /* H1 MEGA hero */ /* Веса — 400 доминирует, иерархия через размер */ --ld2-fw-light: 300; /* 17 исп — сlightly-lighter */ --ld2-fw-regular: 400; /* DOMINANT — 1775 исп из 1806 */ --ld2-fw-medium: 500; /* 6 исп — button */ --ld2-fw-semibold: 600; /* 5 исп — popup title */ --ld2-fw-bold: 700; /* 3 исп — редкие акценты */ /* Line-heights */ --ld2-lh-tight: 1.0; /* крупные заголовки */ --ld2-lh-body: 22px; /* 1174 исп на 15px = ratio 1.47 — signature */ --ld2-lh-sub: 25px; /* для 20px */ --ld2-lh-h3: 35px; /* для 25/30 */ --ld2-lh-h1: 62px; /* для 50-55px hero */ --ld2-lh-nav: 20px; /* Letter-spacing — pervasive (signature) */ --ld2-ls-body: 0.4px; /* на body 15px — 103 исп */ --ld2-ls-meta: 0.5px; /* 71 исп */ --ld2-ls-input: 1px; /* на инпутах и uppercase labels — 66 исп */ --ld2-ls-tight: 0.2px; /* ═══ РАДИУСЫ (pill-dominant, НЕТ прямоугольных CTA) ══════════ */ --ld2-radius-none: 0px; /* инпуты flat — role contrast с pill CTA */ --ld2-radius-xs: 2px; --ld2-radius-sm: 5px; --ld2-radius-md: 20px; /* cards — 8 исп */ --ld2-radius-lg: 30px; --ld2-radius-xl: 40px; --ld2-radius-pill: 100px; /* CTA/buttons — SIGNATURE, 26 исп */ --ld2-radius-pill-xl: 1000px; /* tags/chips — полная капсула, 6 исп */ --ld2-radius-circle: 50%; /* Асимметричные dual-radii (точечные signature для особых surfaces) */ --ld2-radius-tab-top: 20px 20px 0 0; /* tab panel */ --ld2-radius-banner-btm: 0 0 26px 26px; /* dropdown / banner */ --ld2-radius-capsule-tl: 10px 10px 25px 25px; /* dual-direction card */ /* ═══ ТЕНИ (signature warm dual-layer) ════════════════════════ */ /* MAIN SIGNATURE — drop + orange-tint (57 occurrences). НЕ упрощать в single! */ --ld2-shadow-card: rgba(13, 13, 16, 0.1) 0px 35px 70px 0px, rgba(255, 138, 0, 0.05) 0px 15px 75px 0px; /* Усиленная версия (emphasis карточки, 7 occurrences) */ --ld2-shadow-card-strong: rgba(13, 13, 16, 0.35) 0px 0px 70px 0px, rgba(255, 138, 0, 0.05) 0px 15px 75px 0px; /* SIDE inset — 30px horizontal offset (17 occurrences, signature side-light) */ --ld2-shadow-inset-side: rgba(13, 13, 16, 0.1) 30px 25px 60px -10px inset, rgba(255, 138, 0, 0.05) 30px 25px 60px -10px inset; /* Subtle orange tint (accent only) */ --ld2-shadow-orange: rgba(255, 138, 0, 0.2) 0px 25px 35px 0px; /* VIOLET GLOW HOVER — единственный драматический motion сайта (6 occurrences) */ --ld2-shadow-glow-violet: rgba(94, 74, 187, 0.9) 0px 30px 70px 0px; --ld2-shadow-glow-violet-100: rgba(94, 74, 187, 0.9) 0px 30px 100px 0px; /* Input inner shadow — sqrt-2 (1.414px) offset — характерная дробная деталь */ --ld2-shadow-input-inner: rgba(30, 30, 30, 0.1) 1.414px 1.414px 6px 0px inset; /* Dark drop (для редких dark-секций) */ --ld2-shadow-dark-drop: rgba(30, 27, 30, 0.3) 0px 30px 60px 0px; /* ═══ OPACITY LADDER (второй инструмент палитры) ═══════════════ */ --ld2-op-10: 0.1; /* subtle */ --ld2-op-25: 0.25; --ld2-op-35: 0.35; --ld2-op-50: 0.5; /* hover-out / reveal start */ /* ═══ SPACING (4px base, 10-step scale) ═══════════════════════ */ --ld2-s0: 0; --ld2-s1: 4px; --ld2-s2: 8px; --ld2-s3: 12px; --ld2-s4: 16px; --ld2-s5: 22px; /* gap 22/23 — 13 occurrences */ --ld2-s6: 30px; /* 106 occurrences padding-left 30 */ --ld2-s7: 40px; --ld2-s8: 60px; --ld2-s9: 80px; --ld2-s10: 120px; /* ═══ LAYOUT ══════════════════════════════════════════════════ */ --ld2-container-max: 1265px; /* нестандартно, не 1200 не 1440 — signature */ --ld2-container-inner: 1140px; /* inner width для вложенных grid */ /* Hero split 2-col: text left / portrait right + CTA 'book-it' card inside */ --ld2-hero-text-w: 640px; --ld2-hero-visual-w: 560px; --ld2-cta-card-w: 420px; /* ═══ TRANSITIONS (two-speed scroll-reveal + universal 0.3s) ══ */ --ld2-t-base: all 0.3s ease-out; /* 1578 occurrences! universal default */ --ld2-t-fast: all 0.1s ease-out; /* button states */ --ld2-t-reveal-block: 0.8s ease-out; /* fadeDown блоков (37 occurrences) */ --ld2-t-reveal-item: opacity 0.6s ease-out, transform 0.6s ease-out; /* content (23) */ --ld2-t-reveal-fade: opacity 0.5s ease-out, visibility 0.5s ease-out; /* ═══ BREAKPOINTS ══════════════════════════════════════════════ */ --ld2-bp-mobile: 768px; --ld2-bp-tablet: 1024px; --ld2-bp-desktop: 1280px; } /* * Рекомендации по использованию: * * 1. Роли dual-accent фиксированы: * — violet (#5E4ABB) только для primary CTA и media-play контролов; * — orange (#FF8A00) только для link-hover, tab-active, in-text keyword highlight. * Инверсия сломает узнаваемость. * * 2. Shadows: * — Для карточек всегда двухслойная warm `var(--ld2-shadow-card)`. * — Inset 30px horizontal — только для surfaces с «side-light» эффектом. * — Violet glow — экономно, максимум 1-2 раза на viewport (play buttons). * * 3. Pill-radii 100/1000 — все CTA капсулы. Инпуты flat (radius 0). * Контраст кнопок и инпутов = signature. * * 4. Body 15/22 — не повышать до 16/24 «ради стандарта», уплотнение намеренно. * * 5. Weight 400 доминирует — не повышать body/captions до 500. * Иерархия через font-size (50/30/20/15), не через weight. * * 6. Letter-spacing 0.4px на body — сохранить, это часть бренда. * * 7. Green KPI-bubbles (#76BE71) inline внутри параграфа, не в отдельной * stats-section. Signature direct-response pattern. * * 8. Long-form scroll: 5-10 крупных content-блоков, асимметричные heights. * Не выравнивать в grid-ритм 600/800. * * 9. Scroll-reveal two-speed: * .fadeDown { transition: var(--ld2-t-reveal-block); opacity: 0; transform: translateY(24px); } * .fadeDown-show { opacity: 1; transform: translateY(0); } * Контент внутри блоков — `var(--ld2-t-reveal-item)`. */