/* * marketing-dark-1 — design tokens * Источник: # (извлечено 2026-04-13 через Chrome DevTools) * * На сайте CSS custom properties НЕ используются (стили legacy). * Все значения ниже выведены из computed styles + анализа частотности. * Именование — семантическое, не копия исходных классов. */ :root { /* ─── Цвета / фоны (тёмная тема) ────────────────────────────── */ --md1-bg-base: #1C2032; /* основной фон страницы */ --md1-bg-elevated: #21253A; /* карточки, шапка, блоки */ --md1-bg-overlay: #191C2C; /* модалы, тёмные выделения */ --md1-bg-hover: #2A2F4A; /* hover на карточках */ --md1-bg-translucent: rgba(196, 201, 223, 0.09); /* полупрозрачный surface */ /* ─── Текст (вся иерархия — белый с разной opacity) ──────────── */ --md1-text: #FFFFFF; /* заголовки, акценты */ --md1-text-secondary: rgba(255, 255, 255, 0.70); /* подзаголовки */ --md1-text-muted: rgba(255, 255, 255, 0.55); /* body — самый частый */ --md1-text-subtle: rgba(255, 255, 255, 0.45); /* подписи */ --md1-text-dim: rgba(255, 255, 255, 0.40); /* disabled */ /* ─── Брендовый синий (primary accent) ───────────────────────── */ --md1-brand: #4E8EFD; /* ссылки, иконки, подсветка */ --md1-brand-strong: #2067E2; /* основные CTA-кнопки */ --md1-brand-muted: #376DBF; /* pressed / вторичный */ /* ─── Категорийные акценты (тарифы, бейджи) ──────────────────── */ --md1-success: #36C185; --md1-success-alt: #17CD65; --md1-success-dark: #30AD77; --md1-success-darker: #13A853; --md1-warning: #FB9966; /* оранжевый — промо */ --md1-error: #B61818; /* красный — акции, alerts */ --md1-purple: #5C62D1; /* VPS тир */ --md1-purple-light: #999EFF; --md1-purple-pale: #A1A6FF; --md1-mint: #6EDDD0; /* ─── Разделители ────────────────────────────────────────────── */ --md1-divider: rgba(129, 140, 175, 0.53); --md1-divider-muted: rgba(255, 255, 255, 0.07); --md1-border-subtle: rgba(255, 255, 255, 0.25); /* ─── Типографика ────────────────────────────────────────────── */ --md1-font-body: 'Circe', helvetica, arial, sans-serif; --md1-font-display: 'PF Din Text Comp Pro', helvetica, arial, sans-serif; --md1-font-fallback: Arial, Helvetica, sans-serif; /* Кегли (реальная шкала с сайта) */ --md1-fs-10: 10px; --md1-fs-12: 12px; --md1-fs-14: 14px; --md1-fs-15: 15px; --md1-fs-16: 16px; --md1-fs-18: 18px; /* BASE — самый частый */ --md1-fs-21: 21px; --md1-fs-24: 24px; --md1-fs-32: 32px; --md1-fs-40: 40px; --md1-fs-60: 60px; --md1-fs-96: 96px; /* hero цифры */ /* Веса. Сайт в основном light (300) — важная черта стиля. */ --md1-fw-light: 300; /* body, навигация, заголовки */ --md1-fw-regular: 400; --md1-fw-medium: 500; /* Line heights */ --md1-lh-tight: 1.0; /* большие цифры */ --md1-lh-normal: 1.43; /* body (25.71px / 18px) */ --md1-lh-relaxed: 1.67; /* расслабленный body */ --md1-lh-heading: 1.25; /* заголовки */ /* Letter spacing для uppercase */ --md1-ls-tight: 0.5px; --md1-ls-normal: 1px; --md1-ls-wide: 1.92px; --md1-ls-wider: 2.16px; --md1-ls-widest: 2.7px; /* навигация */ /* ─── Радиусы ────────────────────────────────────────────────── */ --md1-radius-sm: 4px; --md1-radius-md: 12px; /* карточки — основной */ --md1-radius-lg: 16px; --md1-radius-xl: 22px; /* большие блоки */ --md1-radius-pill: 100px; /* кнопки, бейджи */ --md1-radius-circle: 50%; /* ─── Тени / "glow borders" ──────────────────────────────────── */ /* * Сигнатурная техника marketing-dark-1: вместо `border: 1px solid` — * двойная тень (outer + inset) в цвет акцента. На живом сайте это * сделано через `blur 1px` (размытая полутень), alpha 0.10-0.20. * * Здесь мы адаптируем технику для каталожной подачи: * – используется spread 1px без blur (`0 0 0 1px`) — чёткая 1px-обводка, * – alpha слегка усилена, чтобы границы были читаемы на скриншотах. * Визуально близко к живому сайту, но не исчезает в плотных секциях. */ --md1-glow-white: 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.14); --md1-glow-white-strong: 0 0 0 1px rgba(255, 255, 255, 0.32), inset 0 0 0 1px rgba(255, 255, 255, 0.32); --md1-glow-brand: 0 0 0 1px var(--md1-brand), inset 0 0 0 1px var(--md1-brand); --md1-glow-brand-strong: 0 0 0 1px var(--md1-brand-strong), inset 0 0 0 1px var(--md1-brand-strong); --md1-glow-success: 0 0 0 1px var(--md1-success), inset 0 0 0 1px var(--md1-success); --md1-glow-error: 0 0 0 1px var(--md1-error), inset 0 0 0 1px var(--md1-error); --md1-glow-warning: 0 0 0 1px var(--md1-warning), inset 0 0 0 1px var(--md1-warning); --md1-glow-purple: 0 0 0 1px var(--md1-purple), inset 0 0 0 1px var(--md1-purple); --md1-shadow-drop: 0 2px 12px rgba(0, 0, 0, 0.35); /* ─── Transitions (сигнатурный easing) ───────────────────────── */ --md1-ease: cubic-bezier(0.25, 0.74, 0.22, 0.99); --md1-ease-alt: cubic-bezier(0.12, 0.65, 0.32, 0.99); --md1-ease-alt2: cubic-bezier(0.25, 0.62, 0.39, 0.99); --md1-duration-fast: 0.24s; --md1-duration-base: 0.40s; --md1-duration-slow: 0.48s; --md1-transition: all var(--md1-duration-base) var(--md1-ease); /* ─── Spacing (наблюдаемые, не строгая шкала) ────────────────── */ --md1-space-1: 4px; --md1-space-2: 8px; --md1-space-3: 12px; --md1-space-4: 16px; --md1-space-5: 20px; --md1-space-6: 24px; --md1-space-8: 30px; /* gap 30px между секциями */ --md1-space-10: 40px; /* padding крупных карточек */ --md1-space-12: 48px; --md1-space-16: 64px; /* ─── Layout ─────────────────────────────────────────────────── */ --md1-container-max: 1280px; /* визуальная оценка */ --md1-container-px: 24px; } /* * Рекомендации по использованию: * – body { background: var(--md1-bg-base); color: var(--md1-text-muted); font: var(--md1-fw-light) var(--md1-fs-18)/var(--md1-lh-normal) var(--md1-font-body); } * – Заголовки — var(--md1-font-display), uppercase, letter-spacing: var(--md1-ls-widest). * – Карточка — bg: var(--md1-bg-elevated); border-radius: var(--md1-radius-md); box-shadow: var(--md1-glow-white). * – Primary CTA — bg: var(--md1-brand-strong); border-radius: var(--md1-radius-pill); uppercase; box-shadow: var(--md1-glow-brand-strong). */