/* * landing-1 — design tokens (Agency / Long-Form Landing) * Источник: — (обезличено) * * Значения выведены из computed styles одностраничного лендинга * (16 секций, ~18900px высота) и CSS-правил сайта (Bootstrap 4 base * + кастомные переопределения). * * Жанр: agency long-form landing. * – airy vertical rhythm (90-150px между секциями) * – signature green pill CTA с glow-shadow * – pill inputs с inset shadow + крупным left-padding под иконку * – основная палитра — light-grey body + 2 финальные тёмные секции * – типографика regular weight, негативный letter-spacing нет; * uppercase кнопки с positive letter-spacing 1.54px */ :root { /* ═══ ФОНЫ ════════════════════════════════════════════════════ */ --ld1-bg-base: #F4F5F6; /* body — основной светло-серый */ --ld1-bg-white: #FFFFFF; /* белые секции (services, cta-form) */ --ld1-bg-cream: #F9F7F4; /* fill инпутов и subtle cards */ --ld1-bg-dark: #232425; /* финальные dark-секции (gantt, team) */ --ld1-bg-dark-elev: #2E2F30; /* приподнятые блоки на dark */ /* ═══ ТЕКСТ ═══════════════════════════════════════════════════ */ --ld1-text: #292929; /* основной — body, заголовки */ --ld1-text-on-dark: #FFFFFF; /* текст на dark-секциях */ --ld1-text-secondary: #2D2D2D; /* slightly darker — крупные акценты */ --ld1-text-muted: rgba(102, 102, 102, 0.75); /* placeholder, meta */ --ld1-text-subtle: #999999; /* подписи, captions */ --ld1-text-on-dark-dim: rgba(255, 255, 255, 0.5); /* meta на dark */ /* ═══ БРЕНД / АКЦЕНТЫ ═════════════════════════════════════════ */ --ld1-accent-green: rgba(108, 183, 98, 0.99); /* primary CTA — signature */ --ld1-accent-green-h: #5CA653; /* hover вариант */ --ld1-accent-green-soft: rgb(131, 187, 92); /* мягкий вариант для текста */ --ld1-accent-orange: #FF613F; /* secondary — теги, выноски */ --ld1-accent-blue: #5C9FFB; /* edit / редкий accent */ --ld1-accent-indigo: #39467A; /* навигация / inset элементы */ /* ═══ СТАТУСЫ ═════════════════════════════════════════════════ */ --ld1-success: #28A745; /* Bootstrap success */ --ld1-error: #DC3545; --ld1-warning: #FFC107; --ld1-info: #17A2B8; /* ═══ РАЗДЕЛИТЕЛИ / БОРДЕРЫ ═══════════════════════════════════ */ --ld1-border-light: rgba(221, 221, 221, 0.5); --ld1-border-medium: #DBDBDB; --ld1-border-strong: #C4C4C4; /* ═══ ТИПОГРАФИКА ═════════════════════════════════════════════ */ /* Источник использовал коммерческий MuseoSansCyrl (100/300/500/700). Заменён на Manrope — близкая по характеру кириллическая безсерифная с теми же 5 весами. Подключается из Google Fonts. */ --ld1-font-body: 'Manrope', -apple-system, 'Segoe UI', Roboto, sans-serif; --ld1-font-display: 'Manrope', -apple-system, 'Segoe UI', Roboto, sans-serif; /* Кегли (15px base — нестандартный для марк-сайтов, даёт «компактный» feel) */ --ld1-fs-11: 11px; --ld1-fs-12: 12px; --ld1-fs-13: 13px; --ld1-fs-14: 14px; --ld1-fs-15: 15px; /* BASE — 440 исп */ --ld1-fs-16: 16px; --ld1-fs-17: 17px; --ld1-fs-19: 19px; --ld1-fs-22: 22px; --ld1-fs-25: 25px; /* H4 / sub */ --ld1-fs-28: 28px; --ld1-fs-30: 30px; /* H3 */ --ld1-fs-38: 38px; --ld1-fs-40: 40px; /* H2 */ --ld1-fs-45: 45px; /* H1 hero */ /* Веса — широкая шкала */ --ld1-fw-thin: 200; /* MuseoSansCyrl100 → Manrope 200 */ --ld1-fw-light: 300; /* dominant — 522 исп */ --ld1-fw-medium: 500; --ld1-fw-bold: 700; /* для кнопок и крупных акцентов — 117 исп */ /* Line-heights (привязаны к base 15px) */ --ld1-lh-tight: 1.0; --ld1-lh-snug: 1.2; --ld1-lh-base: 1.5; /* 22.5px / 15px = 1.5 — 367 исп */ --ld1-lh-relaxed: 1.6; --ld1-lh-display: 1.15; /* для крупных заголовков */ /* Letter-spacing */ --ld1-ls-cta: 1.54px; /* uppercase кнопки — signature */ --ld1-ls-cta-loose: 1.61px; --ld1-ls-display: -0.2px; --ld1-ls-body: 0; /* normal */ --ld1-ls-meta: 0.5px; /* uppercase подзаголовки */ /* ═══ РАДИУСЫ ═════════════════════════════════════════════════ */ --ld1-radius-sm: 4px; --ld1-radius-md: 8px; /* карточки, изображения */ --ld1-radius-lg: 11px; /* большие карточки */ --ld1-radius-xl: 38px; /* SIGNATURE pill — кнопки */ --ld1-radius-input: 37px; /* SIGNATURE pill — инпуты */ --ld1-radius-circle: 50%; --ld1-radius-round: 100%; /* ═══ ТЕНИ / СВЕЧЕНИЕ ════════════════════════════════════════ */ /* SIGNATURE — green glow под primary CTA. Используется на ВСЕХ кнопках primary действия, создаёт фирменное «мягкое» свечение. */ --ld1-shadow-cta-glow: rgba(151, 216, 141, 0.35) -11px 11px 30px 0px, rgba(255, 255, 255, 0.25) 0px -1px 2px 0px inset; /* Card lift — глубокая длинная тень для карточек кейсов / фич */ --ld1-shadow-card-lift: rgba(82, 76, 84, 0.15) 0px 30px 90px 0px; /* Card subtle — для карточек на белом */ --ld1-shadow-card-soft: rgba(128, 128, 128, 0.1) -11px 11px 65px 0px; /* Inset для inputs — даёт ощущение «утопленности» */ --ld1-shadow-input-inset: rgba(30, 30, 30, 0.1) 1px 1px 6px 0px inset; /* Hover на dark — fallback */ --ld1-shadow-modal: rgba(0, 0, 0, 0.15) 0px 9.375px 28.125px 0px; /* ═══ TRANSITIONS ═════════════════════════════════════════════ */ --ld1-transition-fast: all 0.15s ease-in-out; --ld1-transition-base: all 0.4s ease; --ld1-transition-slow: all 0.6s ease; /* ═══ SPACING (airy vertical rhythm) ══════════════════════════ */ --ld1-space-1: 4px; --ld1-space-2: 8px; --ld1-space-3: 12px; --ld1-space-4: 16px; --ld1-space-5: 20px; --ld1-space-6: 24px; --ld1-space-8: 32px; --ld1-space-10: 40px; --ld1-space-12: 48px; --ld1-space-15: 60px; /* margin между блоками */ --ld1-space-20: 80px; --ld1-space-24: 96px; --ld1-space-section: 120px; /* типичный vertical padding секции */ --ld1-space-section-lg: 150px; /* для крупных hero-блоков */ /* ═══ LAYOUT ══════════════════════════════════════════════════ */ --ld1-container-max: 960px; /* Bootstrap-like contained layout */ --ld1-container-px: 15px; --ld1-content-narrow: 720px; /* для текстовых параграфов в hero */ /* ═══ BREAKPOINTS ═════════════════════════════════════════════ */ --ld1-bp-sm: 576px; --ld1-bp-md: 768px; --ld1-bp-lg: 992px; --ld1-bp-xl: 1200px; } /* * Рекомендации по использованию: * * body { * background: var(--ld1-bg-base); * color: var(--ld1-text); * font: var(--ld1-fw-light) var(--ld1-fs-15)/var(--ld1-lh-base) var(--ld1-font-body); * } * * H1 hero — 45px / weight 300 / line-height 1.15. Регулярный вес, не bold. * H2 — 40px / weight 700. * H3 — 25-30px / weight 700. * * Primary CTA — bg: var(--ld1-accent-green); color: white; * radius: var(--ld1-radius-xl); padding: 18px 32px; * text-transform: uppercase; letter-spacing: var(--ld1-ls-cta); * font-weight: 700; font-size: 14-15px; * box-shadow: var(--ld1-shadow-cta-glow); border: 0. * * Input — bg: var(--ld1-bg-cream); border: 1px solid var(--ld1-border-medium); * radius: var(--ld1-radius-input); padding: 12px 24px 12px 65px; * box-shadow: var(--ld1-shadow-input-inset). * Левый паддинг 65px — место под decorative icon. * * Card (case) — bg: white; radius: var(--ld1-radius-md); * box-shadow: var(--ld1-shadow-card-lift). * * Section — padding: var(--ld1-space-section) 0; * для airy hero-блоков — var(--ld1-space-section-lg). * * Dark section — bg: var(--ld1-bg-dark); color: var(--ld1-text-on-dark). * Используется в финале страницы для контраста (gantt-table, team). */