/* ========================================================================== 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; } /* ============================================================ АКЦЕНТНЫЕ ТЕМЫ ЛЕНДИНГОВ ------------------------------------------------------------ Один файл — один источник правды по цвету. Базовая палитра живёт в tokens.css на .tsv-root; здесь только акцентная группа, переопределяемая внутри обёртки конкретного лендинга. Почему так, а не в каждом файле: раньше акценты были вписаны прямо в лендинги, и одинаковые по смыслу цвета успели разойтись между страницами. Здесь их видно рядом — расхождение сразу заметно глазом. Правила: 1. Переопределяем ТОЛЬКО акцентную группу. Фон, текст, поверхности и границы остаются общими — иначе страницы перестанут выглядеть одним сайтом. 2. Насыщенность держим приглушённой. Проект намеренно несатурированный: сначала гасим, потом добавляем. 3. Каждая тема обязана давать контраст текста к фону не хуже базовой: --tsv-accent-bright используется для кикеров на тёмном, это рабочий текст, а не украшение. 4. Тень и свечение пересчитываются под оттенок — иначе цветная рамка ложится на фиолетовое свечение. Как подключать: файл идёт следом за tokens.css. Лендинг получает тему автоматически по своему классу-обёртке. ============================================================ */ /* ---------- Витрины и разделы ---------- */ /* Главная — общий знаменатель всего сайта, базовый фиолетовый. Своей темы у неё нет намеренно: она показывает все направления сразу и не должна принадлежать ни одному из них. */ /* Курсы — тёплый янтарь: обучение, настольная лампа, вечер. */ .tsv-root.tsv-chub { --tsv-accent: #d9a05b; --tsv-accent-bright: #f0c68d; --tsv-accent-dim: #8a6234; --tsv-accent-soft: rgba(217, 160, 91, 0.15); --tsv-accent-glow: rgba(217, 160, 91, 0.38); --tsv-border-soft: rgba(217, 160, 91, 0.17); } /* Эффекты и титры — холодная бирюза: инструмент, экран, точность. */ .tsv-root.tsv-ehub { --tsv-accent: #58b6b0; --tsv-accent-bright: #8ad8d2; --tsv-accent-dim: #356e6a; --tsv-accent-soft: rgba(88, 182, 176, 0.15); --tsv-accent-glow: rgba(88, 182, 176, 0.38); --tsv-border-soft: rgba(88, 182, 176, 0.17); } /* О проекте — приглушённый индиго: спокойный разговор о людях, ближе всех к базовому фиолетовому, потому что это лицо сайта. */ .tsv-root.tsv-about { --tsv-accent: #8f8ae0; --tsv-accent-bright: #b6b2f0; --tsv-accent-dim: #55519a; --tsv-accent-soft: rgba(143, 138, 224, 0.15); --tsv-accent-glow: rgba(143, 138, 224, 0.38); --tsv-border-soft: rgba(143, 138, 224, 0.17); } /* Консультации — тёплый коралл: живой человек, разговор, единственная страница проекта с чужим временем в основе. */ .tsv-root.tsv-cons { --tsv-accent: #de8a72; --tsv-accent-bright: #f2b39f; --tsv-accent-dim: #8e5344; --tsv-accent-soft: rgba(222, 138, 114, 0.15); --tsv-accent-glow: rgba(222, 138, 114, 0.38); --tsv-border-soft: rgba(222, 138, 114, 0.17); } /* ---------- Нейросети ---------- */ /* ComfyUI — справочник: холодный сине-стальной, цвет консоли. Самая техническая страница проекта, теплу тут делать нечего. */ .tsv-root.tsv-comfy { --tsv-accent: #6b93d6; --tsv-accent-bright: #9dbcea; --tsv-accent-dim: #3f5a86; --tsv-accent-soft: rgba(107, 147, 214, 0.15); --tsv-accent-glow: rgba(107, 147, 214, 0.38); --tsv-border-soft: rgba(107, 147, 214, 0.17); } /* Лаунчер — зеленовато-мятный: «всё проверено, можно запускать». Разведён с ComfyUI по тону: это соседние страницы, и на переходе между ними смена цвета должна читаться. */ .tsv-root.tsv-launcher { --tsv-accent: #5fb98d; --tsv-accent-bright: #92d9b4; --tsv-accent-dim: #37704f; --tsv-accent-soft: rgba(95, 185, 141, 0.15); --tsv-accent-glow: rgba(95, 185, 141, 0.38); --tsv-border-soft: rgba(95, 185, 141, 0.17); } /* Krita — розово-пурпурный: рисование, холст, кисть. */ .tsv-root.tsv-krita { --tsv-accent: #cf7fb8; --tsv-accent-bright: #e8aad4; --tsv-accent-dim: #834d74; --tsv-accent-soft: rgba(207, 127, 184, 0.15); --tsv-accent-glow: rgba(207, 127, 184, 0.38); --tsv-border-soft: rgba(207, 127, 184, 0.17); } /* ---------- Закрытое и поддержка ---------- */ /* Уроки для патронов — глубокое золото: благодарность, свой круг. */ .tsv-root.tsv-excl { --tsv-accent: #c9a34e; --tsv-accent-bright: #e6c982; --tsv-accent-dim: #7d642c; --tsv-accent-soft: rgba(201, 163, 78, 0.15); --tsv-accent-glow: rgba(201, 163, 78, 0.38); --tsv-border-soft: rgba(201, 163, 78, 0.17); } /* Поддержать проект — тёплая лаванда. Один селектор на обе страницы поддержки: русскую и двуязычную. */ .tsv-root.tsv-support { --tsv-accent: #a385e2; --tsv-accent-bright: #c4aef3; --tsv-accent-dim: #6a5399; --tsv-accent-soft: rgba(163, 133, 226, 0.15); --tsv-accent-glow: rgba(163, 133, 226, 0.40); --tsv-border-soft: rgba(163, 133, 226, 0.18); } /* ---------- Продуктовые лендинги ---------- Значения перенесены из самих лендингов один в один: вид не менялся, менялось только место хранения. Локальные градиенты, скругления и декоративные цвета остались внутри страниц — они принадлежат конкретной вёрстке, а не палитре. */ /* Пак переходов — базовый фиолетовый с уходом в тёплую магенту: направление склейки, кадр уходит — кадр приходит. */ .tsv-root.tsv-tr001 { --tsv-accent: #9a7ae8; --tsv-accent-bright: #c1a5ff; --tsv-accent-dim: #63479f; --tsv-accent-soft: rgba(154, 122, 232, 0.15); --tsv-accent-glow: rgba(178, 130, 232, 0.42); --tsv-border-soft: rgba(154, 122, 232, 0.18); } /* Творческий пак — неоновые акценты обложки на тёмной основе. */ .tsv-root.tsv-mfx001 { --tsv-accent: #f15bb5; --tsv-accent-bright: #ff8fd2; --tsv-accent-dim: #b982ff; --tsv-accent-soft: rgba(241, 91, 181, 0.13); --tsv-accent-glow: rgba(241, 91, 181, 0.34); --tsv-border-soft: rgba(255, 143, 210, 0.18); } /* Виртуальная камера — холодный оптический стально-индиговый: стекло, металл, свет площадки. */ .tsv-root.tsv-fx001 { --tsv-accent: #7b8ad6; --tsv-accent-bright: #9fabe6; --tsv-accent-dim: #4b568f; --tsv-accent-soft: rgba(123, 138, 214, 0.16); --tsv-accent-glow: rgba(123, 138, 214, 0.42); --tsv-border-soft: rgba(123, 138, 214, 0.19); } /* Цифровые титры — бирюзово-циановый неон ночного города. */ .tsv-root.tsv-tl001 { --tsv-accent: #35bcd8; --tsv-accent-bright: #7ee7f4; --tsv-accent-dim: #1c6d85; --tsv-accent-soft: rgba(53, 188, 216, 0.17); --tsv-accent-glow: rgba(53, 188, 216, 0.46); --tsv-border-soft: rgba(53, 188, 216, 0.22); } /* Титры для соцсетей — тёплый коралл с закатной охрой. */ .tsv-root.tsv-tl002 { --tsv-accent: #de7b86; --tsv-accent-bright: #f2a99f; --tsv-accent-dim: #9c4d58; --tsv-accent-soft: rgba(222, 123, 134, 0.17); --tsv-accent-glow: rgba(222, 123, 134, 0.44); --tsv-border-soft: rgba(222, 123, 134, 0.20); } /* Конструктор заставок — глубокий индиго, свет проекционной лампы. */ .tsv-root.tsv-tl003 { --tsv-accent: #5a6ede; --tsv-accent-bright: #a2b1f7; --tsv-accent-dim: #35438f; --tsv-accent-soft: rgba(90, 110, 222, 0.17); --tsv-accent-glow: rgba(90, 110, 222, 0.45); --tsv-border-soft: rgba(90, 110, 222, 0.20); } /* Курс по кеингу — приглушённый изумруд, цвет гринскрина. */ .tsv-root.tsv-keying { --tsv-accent: #4fb98c; --tsv-accent-bright: #74d4a8; --tsv-accent-dim: #2d7a5c; --tsv-accent-soft: rgba(79, 185, 140, 0.16); --tsv-accent-glow: rgba(79, 185, 140, 0.34); --tsv-border-soft: rgba(79, 185, 140, 0.20); } /* Быстрый старт в монтаже — розово-лавандовый. Тот же оттенок, каким этот курс помечен на главной и в разделе курсов (--tsv-course-start): человек приходит с витрины и попадает в знакомый цвет. */ .tsv-root.tsv-start { --tsv-accent: #d99ac2; --tsv-accent-bright: #edbdda; --tsv-accent-dim: #8c5c7c; --tsv-accent-soft: rgba(217, 154, 194, 0.15); --tsv-accent-glow: rgba(217, 154, 194, 0.38); --tsv-border-soft: rgba(217, 154, 194, 0.17); } /* Мультиэкран, ретушь видео и курс во Fusion свою акцентную группу не переопределяют: у них базовая палитра либо тема задана внутри карточек. */ /* ---------- Приложения ---------- */ /* Общий раздел приложений — спокойный сине-индиговый. Он не повторяет цвет отдельного продукта и подходит для будущего каталога. */ .tsv-root.tsv-ahub { --tsv-accent: #718bd1; --tsv-accent-bright: #a9bbed; --tsv-accent-dim: #465a96; --tsv-accent-soft: rgba(113, 139, 209, 0.15); --tsv-accent-glow: rgba(113, 139, 209, 0.38); --tsv-border-soft: rgba(113, 139, 209, 0.17); } /* Timesaver Runner — орхидея, снятая с самого приложения. Цвет не выбран, а замерен: по трём скриншотам собрана гистограмма насыщенных пикселей, и #d850e8 набрал 32 тысячи против 6 тысяч у ближайшего варианта. Это акцент приложения по умолчанию. На странице он приглушён до #c85ad6 — сайт намеренно несатурированный, и сырой цвет интерфейса рядом с остальными лендингами кричал бы. Оттенок при этом тот же, так что страница и скриншоты читаются как одна вещь. От соседей отличается тоном, а не яркостью: у Krita пыльно-розовый #cf7fb8, у «Творческого пака» горячий #f15bb5 (на тридцать градусов краснее), у поддержки лавандовый #a385e2 (синее). Контрасты: --tsv-accent-bright к фону 9.0∶1, к карточке 8.3∶1. */ .tsv-root.tsv-runner { --tsv-accent: #c85ad6; --tsv-accent-bright: #e290ec; --tsv-accent-dim: #7a3585; --tsv-accent-soft: rgba(200, 90, 214, 0.15); --tsv-accent-glow: rgba(200, 90, 214, 0.38); --tsv-border-soft: rgba(200, 90, 214, 0.17); } /* Timesaver Commander — индиго и синий из канонического значка приложения. */ .tsv-root.tsv-neuro { --tsv-accent: #6f65df; --tsv-accent-bright: #a9a4f4; --tsv-accent-dim: #47418f; --tsv-accent-soft: rgba(111, 101, 223, 0.15); --tsv-accent-glow: rgba(99, 102, 241, 0.40); --tsv-border-soft: rgba(111, 101, 223, 0.18); } /* Новости — тёплая бумажная графика с приглушённым янтарным акцентом. */ .tsv-root.tsv-newshub, .tsv-root.tsv-newsarticle, .tsv-root.tsv-news2111 { --tsv-news-ink: #3c302b; --tsv-accent: #c6a278; --tsv-accent-bright: #e7c9a5; --tsv-accent-dim: #866746; --tsv-accent-soft: rgba(198, 162, 120, 0.14); --tsv-accent-glow: rgba(198, 162, 120, 0.30); --tsv-border-soft: rgba(198, 162, 120, 0.20); } /* ---------- Тематические цвета курсов ---------- Живут внутри карточек как --card-accent и только в линиях. Здесь собраны, чтобы совпадали на главной, в разделе курсов и на лендинге самого курса. */ .tsv-root { --tsv-course-start: #d99ac2; /* монтаж с нуля — розово-лавандовый */ --tsv-course-keying: #62b98d; /* кеинг — зелёный */ --tsv-course-makeup: #e0a878; /* ретушь видео — янтарный */ --tsv-course-fusion: #b6a4f2; /* моушн в Fusion — базовый светлый */ } /* ============================================================ ОБЩИЕ КОМПОНЕНТЫ ЛЕНДИНГОВ ------------------------------------------------------------ Подключается ко всем фрагментам вместе с tokens.css и accents.css. Здесь живут приёмы, которые обязаны выглядеть одинаково на всех страницах. Тематический цвет берётся из акцентных токенов, поэтому компонент автоматически принимает тему своего лендинга. Правило: сюда попадает только то, что повторяется минимум трижды и должно править́ся в одном месте. Всё уникальное остаётся в самом лендинге. ============================================================ */ /* ============================================================ СЛАЙДЕР ОТЗЫВОВ — .tsv-slider ------------------------------------------------------------ Разметка:
  • …карточка отзыва…
Почему прокрутка, а не трансформ: нативный скролл даёт инерцию на тачпаде и телефоне бесплатно, работает без JS и не ломает выделение текста. Кнопки и точки — надстройка сверху. ============================================================ */ .tsv-root .tsv-slider { position: relative; } .tsv-root .tsv-slider-viewport { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; /* полосу рисуем сами — точками */ -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; /* свайп не уводит страницу назад */ } .tsv-root .tsv-slider-viewport::-webkit-scrollbar { display: none; } .tsv-root .tsv-slider-track { display: flex; gap: 16px; margin: 0; padding: 2px 0 4px; /* место под кольцо фокуса */ list-style: none; } .tsv-root .tsv-slide { flex: 0 0 auto; width: min(420px, 82%); scroll-snap-align: start; display: flex; /* карточка тянется на высоту слайда */ --tsv-card-tint: var(--tsv-accent); } /* Карточки отличаются только лёгкой тонировкой. Цикл из пяти оттенков работает при любом количестве отзывов и сохраняет акцент лендинга на первой карточке. */ .tsv-root .tsv-slide:nth-child(5n + 2) { --tsv-card-tint: var(--tsv-tone-indigo); } .tsv-root .tsv-slide:nth-child(5n + 3) { --tsv-card-tint: var(--tsv-tone-teal); } .tsv-root .tsv-slide:nth-child(5n + 4) { --tsv-card-tint: var(--tsv-tone-amber); } .tsv-root .tsv-slide:nth-child(5n + 5) { --tsv-card-tint: var(--tsv-tone-rose); } /* ---------- Карточка отзыва ---------- */ .tsv-root .tsv-quote { display: flex; flex-direction: column; width: 100%; margin: 0; /* снимаем стандартные поля
*/ padding: 22px 24px 20px; background: var(--tsv-bg-glass, rgba(255, 255, 255, 0.03)); background: color-mix(in srgb, var(--tsv-card-tint) 9%, var(--tsv-bg-glass, rgba(255, 255, 255, 0.03))); border: 1px solid var(--tsv-border-soft); border-color: color-mix(in srgb, var(--tsv-card-tint) 28%, transparent); border-radius: var(--tsv-radius, 16px); } .tsv-root .tsv-quote-text { margin: 0; font-size: 15px; line-height: 1.62; color: var(--tsv-fg-dim); } /* Подпись прижата к низу: у отзывов разная длина, а имена должны стоять на одной линии — иначе ряд карточек выглядит рваным. */ .tsv-root .tsv-quote-who { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--tsv-border-soft); border-top-color: color-mix(in srgb, var(--tsv-card-tint) 20%, transparent); margin-top: auto; } .tsv-root .tsv-quote-name { display: block; font-size: 14px; font-weight: 600; color: var(--tsv-fg); } .tsv-root .tsv-quote-note { display: block; margin-top: 3px; font-family: var(--tsv-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--tsv-fg-mute); } /* ---------- Управление ---------- Стрелки и точки — не три отдельных элемента у левого края, а один пульт по центру под слайдером: рамка и фон стоят на самой полосе .tsv-slider-nav, поэтому разметка не менялась. Ширина по содержимому плюс margin-inline: auto — центрируется и когда стрелки скрыты. */ .tsv-root .tsv-slider-nav { display: flex; align-items: center; gap: 2px; width: fit-content; margin: 22px auto 0; padding: 5px; background: var(--tsv-bg-glass, rgba(255, 255, 255, 0.03)); border: 1px solid var(--tsv-border-soft); border-radius: 999px; } .tsv-root .tsv-slider-btn { flex: 0 0 auto; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 0; font: inherit; color: var(--tsv-fg-dim); background: none; /* рамка теперь у пульта, не у кнопки */ border: 0; border-radius: 999px; cursor: pointer; transition: background var(--dur-base, .18s) var(--ease-out, ease), color var(--dur-base, .18s) var(--ease-out, ease), opacity var(--dur-base, .18s) var(--ease-out, ease); } .tsv-root .tsv-slider-btn svg { display: block; } .tsv-root .tsv-slider-btn[disabled] { opacity: .28; cursor: default; } .tsv-root .tsv-slider-btn:focus-visible { outline: 2px solid var(--tsv-accent-bright); outline-offset: -2px; /* внутрь: снаружи кольцо срезал бы пульт */ } .tsv-root .tsv-slider-dots { display: flex; align-items: center; gap: 8px; padding: 0 12px; } .tsv-root .tsv-slider-dot { position: relative; width: 6px; height: 6px; padding: 0; border: 0; border-radius: 999px; background: var(--tsv-fg-mute); opacity: .45; cursor: pointer; transition: background var(--dur-base, .18s) var(--ease-out, ease), opacity var(--dur-base, .18s) var(--ease-out, ease), width var(--dur-base, .18s) var(--ease-out, ease); } .tsv-root .tsv-slider-dot[aria-current="true"] { width: 22px; background: var(--tsv-accent); opacity: 1; } /* Тап-цель у точки крупнее самой точки: сама она 6px, палец — 44px */ .tsv-root .tsv-slider-dot::before { content: ""; position: absolute; inset: -19px -4px; } .tsv-root .tsv-slider-dot:focus-visible { outline: 2px solid var(--tsv-accent-bright); outline-offset: 4px; } @media (hover: hover) and (pointer: fine) { .tsv-root .tsv-slider-btn:not([disabled]):hover { background: var(--tsv-bg-elev-2, rgba(255, 255, 255, 0.06)); color: var(--tsv-accent-bright); } .tsv-root .tsv-slider-dot:not([aria-current="true"]):hover { opacity: .85; } } /* На узком экране карточка занимает почти всю ширину, а стрелки уходят: там листают пальцем, и две кнопки только отнимают место. Вместе со стрелками снимается и оправа пульта: рамка вокруг одних точек читается как пустая коробочка, а не как элемент управления. */ @media (max-width: 699px) { .tsv-root .tsv-slide { width: 86%; } .tsv-root .tsv-slider-track { gap: 12px; } .tsv-root .tsv-quote { padding: 18px 18px 16px; } .tsv-root .tsv-slider-btn { display: none; } .tsv-root .tsv-slider-nav { margin-top: 16px; padding: 0; background: none; border: 0; } .tsv-root .tsv-slider-dots { padding: 0; } } @media (prefers-reduced-motion: reduce) { .tsv-root .tsv-slider-viewport { scroll-behavior: auto; } .tsv-root .tsv-slider-dot { transition: none; } } /* ============================================================ ЕДИНЫЙ ФАСАД ВИДЕО — .tsv-video-facade ------------------------------------------------------------ До клика браузер показывает только WebP-постер и центральную кнопку. Само видео создаётся общим components.js: тяжёлый MP4 не грузится раньше времени, а обложка и Play выглядят одинаково на всех новых лендингах. ============================================================ */ .tsv-root .tsv-video-facade { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--tsv-border-soft); border-radius: var(--tsv-radius-lg, var(--tsv-radius, 16px)); background: #05040a; box-shadow: 0 12px 32px -16px rgba(0,0,0,.68), 0 0 22px -12px var(--tsv-accent-glow); } .tsv-root .tsv-video-facade-poster, .tsv-root .tsv-video-facade video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; } .tsv-root .tsv-video-facade-poster { object-fit: cover; } .tsv-root .tsv-video-facade video { z-index: 3; object-fit: contain; background: #000; } .tsv-root .tsv-video-facade-play { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; width: 100%; padding: 0; border: 0; color: var(--tsv-fg); background: linear-gradient(180deg, rgba(5,4,10,.08), rgba(5,4,10,.48)); font: inherit; cursor: pointer; } .tsv-root .tsv-video-facade-play[hidden] { display: none; } .tsv-root .tsv-video-facade-icon { position: relative; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; color: #100a18; background: var(--ts-gradient); box-shadow: 0 8px 28px -8px var(--tsv-accent-glow); transition: transform var(--dur-base, .18s) var(--ease-out, ease); } .tsv-root .tsv-video-facade-icon svg { width: 27px; height: 27px; margin-left: 4px; } .tsv-root .tsv-video-facade-play:hover .tsv-video-facade-icon { transform: scale(1.06); } .tsv-root .tsv-video-facade-label { font-size: 14px; font-weight: 700; letter-spacing: .04em; text-shadow: 0 2px 12px rgba(0,0,0,.75); } .tsv-root .tsv-video-facade-alt { display: block; min-height: 44px; padding: 12px 8px; color: var(--tsv-fg-mute); font-size: 13px; text-align: center; text-decoration: none; } .tsv-root .tsv-video-facade-alt:hover { color: var(--tsv-accent-bright); } @media (max-width: 699px) { .tsv-root .tsv-video-facade-icon { width: 62px; height: 62px; } } @media (prefers-reduced-motion: reduce) { .tsv-root .tsv-video-facade-icon { transition: none; } } /* ============================================================ ПЕРЕКРЁСТНЫЕ ССЫЛКИ — .tsv-xlinks ------------------------------------------------------------ Разметка: Правила текста, ради которых компонент и заведён отдельно: 1. Ярлык вверху называет ОТНОШЕНИЕ к текущей странице («после этого пака», «то же место в проекте», «если упёрлись»), а не рубрику каталога. Рубрику человек и так видит в меню. 2. Строка-крючок сообщает факт, полезный сам по себе — даже если по ссылке не пойдут. Обещаний выгоды здесь нет: «Переход соединяет два кадра» работает, «Вы научитесь монтировать как профи» — нет. 3. Ни восклицательных знаков, ни обращений, ни «спешите». Три-четыре карточки максимум: длинный список читается как баннерная сетка, а не как совет. Компонент —