/* ========================================================================== TIMESAVER VFX — DESIGN TOKENS (единый источник истины / single source of truth) -------------------------------------------------------------------------- ВАЖНО: всё объявлено на классе .tsv-root, а НЕ на :root. Это значит: переменные НЕ протекают в страницу-хост (WordPress / Elementor). Каждый лендинг оборачивается в
и наследует эти токены. Меняешь значение здесь — меняется во всех лендингах. Палитра: тёмная, премиальная, сдержанный фиолетовый. Акцент: #9a7ae8 · Фон: #0a0612 ========================================================================== */ .tsv-root { /* ---------- ФОНЫ / SURFACES ---------- */ --tsv-bg: #0a0612; /* базовый фон лендинга */ --tsv-bg-elev: #15102a; /* приподнятая поверхность (карточки) */ --tsv-bg-elev-2: #1f1838; /* ещё выше (инпуты, hovered) */ --tsv-bg-glass: rgba(31, 24, 56, 0.6); /* ---------- ТЕКСТ ---------- */ --tsv-fg: #ece9f5; /* основной текст */ --tsv-fg-dim: #b6adcc; /* вторичный */ --tsv-fg-mute: #7a7396; /* приглушённый / подписи */ /* ---------- АКЦЕНТ (бренд) ---------- */ --tsv-accent: #9a7ae8; --tsv-accent-bright: #b394f0; --tsv-accent-dim: #63479f; --tsv-accent-soft: rgba(154, 122, 232, 0.16); --tsv-accent-glow: rgba(154, 122, 232, 0.45); /* ---------- ДОПОЛНИТЕЛЬНЫЕ ДЕКОРАТИВНЫЕ ТОНА ---------- Только для лёгкой тонировки повторяющихся поверхностей. Главные кнопки, ссылки и состояния по-прежнему используют акцент лендинга. */ --tsv-tone-indigo: #7480c8; --tsv-tone-teal: #5f9f95; --tsv-tone-amber: #b58b59; --tsv-tone-rose: #ae718b; /* ---------- СТАТУСЫ ---------- */ --tsv-ok: #57c290; --tsv-err: #ea6480; --tsv-warn: #eaa94e; /* ---------- ГРАНИЦЫ ---------- */ --tsv-border: #2a2240; --tsv-border-soft: rgba(154, 122, 232, 0.18); /* ---------- РАДИУСЫ ---------- */ --tsv-radius: 14px; --tsv-radius-sm: 10px; --tsv-radius-lg: 20px; /* ---------- ШРИФТЫ ---------- */ --tsv-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --tsv-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* ---------- Платформенные оттенки (карточки поддержки) ---------- */ --tsv-boosty: #de5a2e; --tsv-vk: #4a76a8; --tsv-patreon: #e86767; --tsv-donate: #57c290; /* ======================================================================== РАСШИРЕННАЯ ШКАЛА (используется более сложными лендингами, напр. Fusion). Все имена --ts-* / семантические --bg/--fg/--accent сведены к тем же брендовым значениям выше — единый вид во всех лендингах. ======================================================================== */ /* --- Бренд-рамп фиолетового (500 = акцент) --- */ --ts-magenta: #a565d4; --ts-violet: var(--tsv-accent); --ts-indigo: #7480d6; --ts-violet-100: #ece6f6; --ts-violet-200: #d6cbec; --ts-violet-300: #bba9de; --ts-violet-400: #b394f0; /* = accent-bright */ --ts-violet-500: #9a7ae8; /* = accent (primary) */ --ts-violet-600: #8259cf; --ts-violet-700: #63479f; /* = accent-dim */ --ts-violet-800: #4d3c85; --ts-violet-900: #2e2452; /* --- Фирменные градиенты (только для hero-акцентов) --- */ --ts-gradient: linear-gradient(135deg, #a565d4 0%, #9a7ae8 50%, #7480d6 100%); --ts-gradient-soft: linear-gradient(135deg, rgba(154,122,232,0.16) 0%, rgba(116,128,214,0.16) 100%); --ts-gradient-glow: radial-gradient(circle at 30% 30%, rgba(154,122,232,0.22), transparent 60%), radial-gradient(circle at 70% 70%, rgba(116,128,214,0.20), transparent 60%); /* --- Нейтральный рамп (тёплый-холодный тёмный) --- */ --ts-ink-0: #0a0a0e; --ts-ink-50: #0a0612; /* сведён к --tsv-bg */ --ts-ink-100: #15102a; /* = --tsv-bg-elev */ --ts-ink-200: #1f1838; /* = --tsv-bg-elev-2 */ --ts-ink-300: #25252d; --ts-ink-400: #2a2240; /* = --tsv-border */ --ts-ink-500: #4b4b57; --ts-ink-600: #7a7396; /* = --tsv-fg-mute */ --ts-ink-700: #93939f; --ts-ink-800: #b6adcc; /* = --tsv-fg-dim */ --ts-ink-900: #ece9f5; /* = --tsv-fg */ --ts-ink-1000: #f5f4f8; /* --- Семантические bg/fg (сведены к tsv-*) --- */ --bg: var(--tsv-bg); --bg-elevated: var(--tsv-bg-elev); --bg-raised: var(--tsv-bg-elev-2); --bg-input: var(--tsv-bg-elev-2); --bg-input-hover:#25252d; --fg: var(--tsv-fg); --fg-muted: var(--tsv-fg-dim); --fg-subtle: var(--tsv-fg-mute); --fg-faint: #6e6e7b; --fg-disabled: #4b4b57; --fg-on-accent: #ffffff; --border: var(--tsv-border); --border-subtle: rgba(255,255,255,0.06); --border-strong: rgba(255,255,255,0.12); --border-accent: var(--tsv-accent); --accent: var(--tsv-accent); --accent-hover: var(--tsv-accent-bright); --accent-press: var(--tsv-accent-dim); --accent-soft: var(--tsv-accent-soft); --accent-ring: var(--tsv-accent-glow); --info: #8195d4; --info-soft: rgba(129,149,212,0.12); --success: var(--tsv-ok); --success-soft: rgba(87,194,144,0.12); --warning: var(--tsv-warn); --warning-soft: rgba(234,169,78,0.12); --danger: var(--tsv-err); --danger-soft: rgba(234,100,128,0.12); /* --- Типографика (единый системный стек; веб-шрифты не тянем ради автономности) --- */ --font-display: var(--tsv-sans); --font-body: var(--tsv-sans); --font-mono: var(--tsv-mono); --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; --fw-black: 900; --fs-xs: 12px; --fs-sm: 13px; --fs-base: 15px; --fs-md: 17px; --fs-lg: 20px; --fs-xl: 24px; --fs-2xl: 32px; --fs-3xl: 44px; --fs-4xl: 60px; --fs-5xl: 80px; --fs-hero: 104px; --lh-tight: 1.05; --lh-snug: 1.2; --lh-base: 1.5; --lh-loose: 1.7; --ls-tight: -0.02em; --ls-tighter: -0.035em; --ls-base: 0; --ls-wide: 0.04em; --ls-caps: 0.12em; /* --- Spacing (шаг 4px) --- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* --- Радиусы (расширенные имена) --- */ --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-2xl: 28px; --r-pill: 999px; /* --- Тени / свечение --- */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.35); --shadow-md: 0 6px 18px rgba(0,0,0,0.32), 0 1px 2px rgba(0,0,0,0.5); --shadow-lg: 0 18px 48px rgba(0,0,0,0.42), 0 2px 6px rgba(0,0,0,0.4); --shadow-xl: 0 32px 90px rgba(0,0,0,0.5), 0 4px 10px rgba(0,0,0,0.4); --glow-accent: 0 0 0 1px rgba(154,122,232,0.4), 0 10px 32px rgba(154,122,232,0.22); --glow-accent-soft: 0 0 28px rgba(154,122,232,0.18); /* --- Тайминги --- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 280ms; /* --- Z-слои --- */ --z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 400; --z-modal: 500; --z-toast: 700; }