/* ========================================================================== Дизайн-токены Концепция: «Маршрут подключения» (по ТЗ дизайн) Тема: Telegram-стиль — светлая и тёмная ========================================================================== */ /* Указываем браузеру, что поддерживаем обе темы — влияет на скроллбары и нативные контролы (date-picker, валидация форм и т.п.) */ :root { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } :root { /* ---------- Брендовая палитра (графит + бирюза) ---------- Используется как «бренд-нейтральная» основа (btn--inverse, тёмные плашки, плашки в светлой теме). Тема на них обычно НЕ влияет, но для адаптивных инверсных секций (section--inverse, .contacts, .site-footer и т.п.) теперь есть отдельные тематические токены --tg-bg-inverse, --tg-text-inverse и др. в light/dark вариантах. */ --color-graphite-900: #111827; --color-graphite-800: #1F2937; /* основной тёмный */ --color-graphite-700: #374151; --color-graphite-500: #6B7280; /* приглушённый текст */ --color-graphite-300: #D1D5DB; --color-graphite-200: #E5E7EB; --color-graphite-100: #F3F4F6; --color-graphite-50: #F9FAFB; --color-turquoise-700: #0F766E; --color-turquoise-600: #0D9488; --color-turquoise-500: #14B8A6; --color-turquoise: #0EA5A5; /* акцентный (legacy) */ --color-turquoise-100: #CCFBF1; --color-turquoise-50: #F0FDFA; /* Литерал «всегда белый» — для контрастного текста на цветных кнопках, для btn--inverse внутри тёмной секции и т.п. Не зависит от темы. */ --color-white: #FFFFFF; /* ---------- Telegram-палитра: СВЕТЛАЯ ТЕМА (по умолчанию) ---------- */ --tg-bg-page: #FFFFFF; /* основной фон страницы */ --tg-bg-panel: #F4F4F5; /* вторичный фон (alt-секции) */ --tg-bg-bubble: #FFFFFF; /* фон «входящего сообщения» — карточки */ --tg-bg-bubble-out: #EBF5FF; /* фон «исходящего» — подсветка */ --tg-text: #0F1419; /* основной текст */ --tg-text-hint: #707579; /* приглушённый текст */ --tg-accent: #3390EC; /* фирменный синий Telegram */ --tg-accent-hover: #2483D4; --tg-accent-soft: #E8F0FE; /* фон под акцентом */ --tg-accent-rgb: 51, 144, 236; /* rgb-каналы --tg-accent для rgba(...) */ --tg-border: #DADCE0; --tg-meta-theme: #3390EC; /* для meta theme-color */ /* ---------- Инверсные секции (адаптивные к теме) ---------- В светлой теме — светлый фон с тёмным текстом. В тёмной теме — тёмный фон со светлым текстом. Применяются в .section--inverse, .social-proof, .solution-card, .contacts. Футер использует отдельный --tg-footer-bg (обычно глубже). */ --tg-bg-inverse: #F4F4F5; /* фон инверсной секции в light */ --tg-bg-inverse-card: #FFFFFF; /* фон карточки внутри инверсной секции в light */ --tg-border-inverse: #DADCE0; /* граница карточки / тонкий разделитель в light */ --tg-text-inverse: #0F1419; /* основной текст в инверсной секции в light */ --tg-text-inverse-muted: #707579; /* приглушённый текст в инверсной секции в light */ --tg-text-inverse-rgb: 15, 20, 25; /* rgb-каналы --tg-text-inverse для rgba */ --tg-footer-bg: var(--tg-bg-inverse); /* футер отдельно — светлый фон (как --tg-bg-inverse) в light */ /* ---------- Семантические токены (то, что использует весь сайт) ---------- Теперь это тонкие алиасы на Telegram-палитру — один источник правды для смены темы. */ --color-bg: var(--tg-bg-page); --color-surface: var(--tg-bg-bubble); --color-surface-alt: var(--tg-bg-panel); --color-surface-call: var(--tg-bg-bubble-out); /* «исходящий пузырь» */ --color-text: var(--tg-text); --color-text-muted: var(--tg-text-hint); --color-accent: var(--tg-accent); --color-accent-hover: var(--tg-accent-hover); --color-accent-soft: var(--tg-accent-soft); --color-accent-text: var(--tg-accent); --color-border: var(--tg-border); --color-border-strong: var(--tg-border); --color-border-input: #A6AEB9; /* заметная граница полей ввода */ /* ---------- Цвета: состояния ---------- */ --color-success: #10B981; --color-success-bg: #D1FAE5; --color-warning: #F59E0B; --color-warning-bg: #FEF3C7; --color-error: #EF4444; --color-error-bg: #FEE2E2; --color-success-text: #065F46; --color-success-border: #6EE7B7; --color-warning-text: #92400E; --color-warning-border: #FCD34D; --color-error-text: #991B1B; --color-error-border: #FCA5A5; /* ---------- Типографика ---------- */ --font-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace; /* Шкала размеров (база 16px) */ --fs-xs: 0.75rem; /* 12 */ --fs-sm: 0.875rem; /* 14 */ --fs-base: 1rem; /* 16 */ --fs-lg: 1.125rem; /* 18 */ --fs-xl: 1.25rem; /* 20 */ --fs-2xl: 1.5rem; /* 24 */ --fs-3xl: 1.875rem; /* 30 */ --fs-4xl: 2.25rem; /* 36 */ --fs-5xl: 3rem; /* 48 */ --fs-6xl: 3.75rem; /* 60 */ /* Высота строки */ --lh-tight: 1.15; --lh-snug: 1.3; --lh-base: 1.5; --lh-relaxed: 1.7; /* Веса */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Межбуквенный интервал */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.02em; /* ---------- Отступы (8px сетка) ---------- */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ --space-20: 5rem; /* 80 */ --space-24: 6rem; /* 96 */ --space-32: 8rem; /* 128 */ /* ---------- Радиусы ---------- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px; /* ---------- Тени (мягкие, ненавязчивые) ---------- */ --shadow-xs: 0 1px 2px rgba(17, 24, 39, 0.04); --shadow-sm: 0 2px 4px rgba(17, 24, 39, 0.05); --shadow-md: 0 4px 12px rgba(17, 24, 39, 0.06), 0 2px 4px rgba(17, 24, 39, 0.04); --shadow-lg: 0 12px 32px rgba(17, 24, 39, 0.08), 0 4px 8px rgba(17, 24, 39, 0.04); --shadow-xl: 0 24px 48px rgba(17, 24, 39, 0.12), 0 8px 16px rgba(17, 24, 39, 0.04); /* ---------- Контейнер ---------- */ --container-max: 1200px; --container-narrow: 880px; --container-padding: var(--space-5); /* ---------- Брейкпоинты (для справки, в медиа-запросах) ---------- */ --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; /* ---------- Переходы ---------- */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; /* ---------- Z-индексы ---------- */ --z-base: 1; --z-sticky: 100; --z-header: 200; --z-overlay: 500; --z-modal: 1000; --z-toast: 2000; /* ---------- Hero ---------- */ --hero-min-height: 560px; /* ---------- Узкие текстовые блоки ---------- */ --prose-max: 720px; /* ---------- Эффекты фона (слои декора, см. effects.css) ---------- Раскрашивают аврору, lens-пятно за курсором, mesh-сетку, glow. В тёмной теме те же пятна становятся сине-нав и менее активными — поэтому темы «следят» за переключателем data-theme автоматически. */ --fx-aurora-1: rgba(51, 144, 236, 0.17); --fx-aurora-2: rgba(20, 184, 166, 0.15); --fx-aurora-3: rgba(148, 197, 255, 0.16); --fx-aurora-opacity: 0.5; --fx-lens: rgba(94, 150, 235, 0.13); --fx-mesh-1: rgba(51, 144, 236, 0.06); --fx-mesh-2: rgba(20, 184, 166, 0.05); --fx-grid-line: rgba(15, 23, 42, 0.05); --fx-glow: rgba(51, 144, 236, 0.10); } /* ========================================================================== Telegram-палитра: ТЁМНАЯ ТЕМА Активируется атрибутом data-theme="dark" на (управляется JS). Меняются ТОЛЬКО Telegram-токены → каскадно меняются семантические → вся страница. ========================================================================== */ :root[data-theme="dark"] { --tg-bg-page: #0F1419; /* основной фон страницы */ --tg-bg-panel: #181818; /* вторичный фон (alt-секции) */ --tg-bg-bubble: #212D3B; /* фон «входящего сообщения» — карточки */ --tg-bg-bubble-out: #2B5278; /* фон «исходящего» — подсветка */ --tg-text: #FFFFFF; --tg-text-hint: #708499; --tg-accent: #62A8E8; /* светлее для контраста в dark */ --tg-accent-hover: #82B9E8; --tg-accent-soft: rgba(98, 168, 232, 0.16); --tg-accent-rgb: 98, 168, 232; /* rgb-������ --tg-accent ��� rgba(...) */ --tg-border: #2A2A2A; --color-border-input: #4A5260; /* заметная граница полей ввода в тёмной теме */ --tg-meta-theme: #0F1419; /* Инверсные секции в тёмной теме — тёмный фон со светлым текстом, единый стиль с --tg-bg-page/bubble/border. */ --tg-bg-inverse: #181818; /* фон инверсной секции в dark (как --tg-bg-panel) */ --tg-bg-inverse-card: #212D3B; /* фон карточки в dark (как --tg-bg-bubble) */ --tg-border-inverse: #2A2A2A; /* граница карточки / разделитель в dark */ --tg-text-inverse: #FFFFFF; /* основной текст в инверсной секции в dark */ --tg-text-inverse-muted: #708499; /* приглушённый текст в dark (как --tg-text-hint) */ --tg-text-inverse-rgb: 255, 255, 255; /* rgb-каналы для rgba-разделителей */ --tg-footer-bg: #111827; /* самый тёмный — для футера в dark */ /* Палитра акцентов для тёмной темы: приглушаем яркие бирюзовые оттенки, чтобы они не «горели» на тёмном фоне. Глубокие (500–700) оставляем — они и так работают как контрастный акцент. */ --color-turquoise-700: #0E7490; --color-turquoise-600: #0891B2; --color-turquoise-500: #06B6D4; --color-turquoise: #0EA5A5; --color-turquoise-100: rgba(98, 168, 232, 0.18); --color-turquoise-50: rgba(98, 168, 232, 0.08); /* Слегка приглушаем «брендовый графит» — чтобы он не был ярче, чем основной тёмный фон Telegram. */ --color-graphite-800: #1F2937; /* оставлено для section--inverse */ --color-graphite-700: #2A3441; --color-graphite-500: #708499; --color-graphite-300: #4A5260; --color-graphite-200: #3A4150; --color-graphite-100: #2A2A2A; --color-graphite-50: #1E2329; /* Спец-токены для состояний: подгоняем под тёмный фон */ --color-success-bg: rgba(16, 185, 129, 0.15); --color-warning-bg: rgba(245, 158, 11, 0.15); --color-error-bg: rgba(239, 68, 68, 0.15); --color-success-text: #6EE7B7; --color-success-border: rgba(110, 231, 183, 0.4); --color-warning-text: #FDE68A; --color-warning-border: rgba(253, 230, 138, 0.4); --color-error-text: #FCA5A5; --color-error-border: rgba(252, 165, 165, 0.4); /* Усиленные тени для тёмной темы (в тёмном фоне тени должны быть глубже) */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.35); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.40), 0 2px 4px rgba(0, 0, 0, 0.30); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45), 0 4px 8px rgba(0, 0, 0, 0.30); --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.55), 0 8px 16px rgba(0, 0, 0, 0.35); /* Эффекты фона в тёмной теме — приглушённые сине-нав тона, меньше активности */ --fx-aurora-1: rgba(56, 120, 198, 0.22); --fx-aurora-2: rgba(34, 96, 128, 0.19); --fx-aurora-3: rgba(30, 64, 108, 0.22); --fx-aurora-opacity: 0.38; --fx-lens: rgba(70, 130, 210, 0.11); --fx-mesh-1: rgba(80, 130, 200, 0.06); --fx-mesh-2: rgba(40, 100, 130, 0.06); --fx-grid-line: rgba(160, 180, 210, 0.045); --fx-glow: rgba(80, 140, 230, 0.12); }