/* ===== Synmetrica Theme System ===== * Цветовые темы по доменам. Применяются через data-domain + data-theme на . * Переопределяют переменные --c-* из :root в style.css. * Специфичность [attr][attr] = (0,2,0) > :root (0,1,0) — победа гарантирована. * =========================================== */ /* ===== PSY DARK — лендинг, hero-страницы ===== */ [data-domain="psy"][data-theme="dark"], .theme-psy-dark { /* Midnight Navy */ --c-bg: #0c1628; --c-bg-secondary: #122038; --c-surface: #182c48; --c-surface-light: #1e3856; --c-bg-grad: linear-gradient(170deg, #0c1628 0%, #122038 40%, #182c48 100%); --c-muted-bg: #182c48; --c-primary: #122038; --c-primary-dark: #0c1628; --c-primary-light: #1e3856; /* Emerald */ --c-accent: #34d399; --c-accent-dark: #28b880; /* Gold — микро-акцент */ --c-gold: #d4a853; --c-gold-light: #e8c070; --c-gold-dark: #b8922e; /* Текст */ --c-text: #c8d8e8; --c-text-bright: var(--c-text-heading); /* deprecated, использовать --c-text-heading напрямую */ --c-text-secondary: var(--c-text-heading); /* alias */ --c-muted: #7a96b4; /* Границы */ --c-border: rgba(255, 255, 255, 0.08); --c-teal-light: rgba(52, 211, 153, 0.15); /* Accent opacity variants — для hero, badges, слайдера */ --c-accent-glow: rgba(52, 211, 153, 0.12); --c-accent-subtle: rgba(52, 211, 153, 0.08); --c-accent-faint: rgba(52, 211, 153, 0.06); --c-accent-line: rgba(52, 211, 153, 0.20); --c-accent-strong: rgba(52, 211, 153, 0.60); --c-accent-grid: rgba(52, 211, 153, 0.094); --c-accent-hover-border: rgba(52, 211, 153, 0.55); --c-accent-shadow: rgba(52, 211, 153, 0.35); --c-accent-shadow-hover: rgba(52, 211, 153, 0.50); /* Semantic faint variants */ --c-coral-faint: rgba(224, 122, 95, 0.12); --c-gold-glow: rgba(212, 168, 83, 0.20); --c-gold-shadow: rgba(212, 168, 83, 0.40); --c-gold-shadow-light:rgba(212, 168, 83, 0.15); --c-bg-translucent: rgba(12, 22, 40, 0.60); /* Системные */ --c-coral: #e07a5f; --c-danger: #ef4444; --c-warning: #f59e0b; /* Glass fallback bg */ --c-glass-bg-fallback: rgba(24, 44, 72, 0.95); /* CTA — золотой градиент на тёмной теме */ --c-cta-bg: linear-gradient(135deg, #e8c070 0%, #d4a853 50%, #b8922e 100%); --c-cta-text: #0c1628; --c-cta-shadow: 0 4px 20px rgba(212, 168, 83, 0.28); --c-cta-hover: linear-gradient(135deg, #f0cc80 0%, #e8c070 50%, #d4a853 100%); /* Secondary CTA — ghost emerald */ --c-cta-secondary-bg: transparent; --c-cta-secondary-border: rgba(52, 211, 153, 0.30); --c-cta-secondary-text: #34d399; /* Тени — глубокие для тёмной темы */ --shadow-sm: 0 1px 3px rgba(0,0,0,.25); --shadow: 0 4px 16px rgba(0,0,0,.35); --shadow-lg: 0 12px 32px rgba(0,0,0,.45); /* Scale bar — track/tick */ --track: rgba(255,255,255,0.10); --tick: rgba(255,255,255,0.45); /* Уровни severity — 8 pathological + neutral + resource */ --c-severity-normal-bg: rgba(52,211,153,0.12); --c-severity-normal-text: #6ee7b7; --c-severity-normal-border: rgba(52,211,153,0.25); --c-severity-minimal-bg: rgba(52,211,153,0.12); --c-severity-minimal-text: #6ee7b7; --c-severity-minimal-border: rgba(52,211,153,0.25); --c-severity-mild-bg: rgba(163,230,53,0.12); --c-severity-mild-text: #bef264; --c-severity-mild-border: rgba(163,230,53,0.25); --c-severity-elevated-bg: rgba(250,204,21,0.12); --c-severity-elevated-text: #fcd34d; --c-severity-elevated-border: rgba(250,204,21,0.25); --c-severity-moderate-bg: rgba(251,146,60,0.12); --c-severity-moderate-text: #fdba74; --c-severity-moderate-border: rgba(251,146,60,0.25); --c-severity-moderately_severe-bg: rgba(249,115,22,0.12); --c-severity-moderately_severe-text: #fb923c; --c-severity-moderately_severe-border: rgba(249,115,22,0.30); --c-severity-severe-bg: rgba(248,113,113,0.18); --c-severity-severe-text: #fecaca; --c-severity-severe-border: rgba(248,113,113,0.40); --c-severity-very_severe-bg: rgba(220,38,38,0.28); --c-severity-very_severe-text: #fee2e2; --c-severity-very_severe-border: rgba(220,38,38,0.55); --c-severity-clinical-bg: rgba(127,29,29,0.55); --c-severity-clinical-text: #ffffff; --c-severity-clinical-border: rgba(127,29,29,0.85); --c-severity-neutral-bg: rgba(139,92,246,0.15); --c-severity-neutral-text: #c4b5fd; --c-severity-neutral-border: rgba(139,92,246,0.30); --c-severity-resource-bg: rgba(52,211,153,0.12); --c-severity-resource-text: #6ee7b7; --c-severity-resource-border: rgba(52,211,153,0.25); /* Success state tokens (L1 контракт) */ --c-success-bg: rgba(52, 211, 153, 0.12); --c-success-border: rgba(52, 211, 153, 0.25); --c-success-text: #6ee7b7; /* Предупреждения / ошибки */ --c-warning-bg: rgba(245, 158, 11, 0.10); --c-warning-border: rgba(245, 158, 11, 0.35); --c-warning-text: #fcd34d; --c-danger-bg: rgba(239, 68, 68, 0.10); --c-danger-border: rgba(239, 68, 68, 0.40); --c-danger-text: #fca5a5; /* Info-блоки (AI teaser, синие акценты) */ --c-info-bg: rgba(59, 130, 246, 0.08); --c-info-border: rgba(59, 130, 246, 0.20); --c-info-accent: #60a5fa; --c-indigo: #818cf8; /* Indigo bg/surface variants */ --c-indigo-bg: rgba(139, 92, 246, 0.10); --c-indigo-pill-bg: rgba(139, 92, 246, 0.20); --c-indigo-deep: #c4b5fd; --c-indigo-border: rgba(139, 92, 246, 0.25); --c-gradient-indigo: linear-gradient(135deg, #818cf8, #a78bfa); /* Шаги / пайплайн бейджи */ --c-step-done-bg: rgba(52, 211, 153, 0.12); --c-step-done-text: #6ee7b7; --c-step-done-border: rgba(52, 211, 153, 0.25); --c-step-current-bg: rgba(245, 158, 11, 0.12); --c-step-current-text: #fcd34d; --c-step-current-border: rgba(245, 158, 11, 0.25); --c-step-test-bg: rgba(59, 130, 246, 0.10); --c-step-test-text: #93c5fd; --c-step-test-border: rgba(59, 130, 246, 0.25); --c-step-form-bg: rgba(139, 92, 246, 0.10); --c-step-form-text: #c4b5fd; --c-step-form-border: rgba(139, 92, 246, 0.25); /* Продуктовые бейджи */ --c-badge-free-bg: rgba(52, 211, 153, 0.12); --c-badge-free-text: #6ee7b7; --c-badge-paid-bg: rgba(245, 158, 11, 0.12); --c-badge-paid-text: #fcd34d; /* AI Badge */ --c-ai-badge-text: #c4b5fd; --c-ai-badge-bg: rgba(139, 92, 246, 0.15); /* Heading — светлый для тёмных поверхностей */ --c-text-heading: #e0eaf4; /* Glassmorphism card tokens */ --c-glass-card-bg: rgba(255, 255, 255, 0.035); --c-glass-card-border: rgba(255, 255, 255, 0.07); --c-glass-card-inset: rgba(255, 255, 255, 0.05); --c-glass-card-hover-border:rgba(52, 211, 153, 0.25); --c-glass-card-hover-glow: rgba(52, 211, 153, 0.05); /* ===== Header pill — border via background-clip padding-box/border-box ===== */ /* Dark: opacity бампнут с 0.42 до 0.72 — иначе оверлей сливается со страницей. */ --pill-bg: rgba(24, 44, 72, 0.72); /* Vertical linear с top + bottom пиками. Предыдущий conic намеренно делал bottom почти невидимым (peak at top, valley at 270°) — отсюда баг «не виден нижний контур». Linear to bottom даёт чёткий border и сверху, и снизу, с мягкими сторонами. */ --pill-border-grad: linear-gradient( to bottom, rgba(255,255,255,0.50) 0%, rgba(255,255,255,0.20) 30%, rgba(255,255,255,0.15) 65%, rgba(255,255,255,0.45) 100% ); --pill-shadow: 0 8px 32px rgba(0,0,0,0.50), 0 2px 8px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.40), inset 0 -1px 0 rgba(0,0,0,0.20); --pill-expanded-shadow: 0 16px 48px rgba(0,0,0,0.60), 0 4px 16px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -1px 0 rgba(0,0,0,0.20); --pill-text: #e0eaf4; --pill-body: #c8d8e8; --pill-nav-color: rgba(224,234,244,0.72); --pill-nav-hover: rgba(255,255,255,0.06); --pill-divider: rgba(255,255,255,0.08); --pill-input-bg: rgba(255,255,255,0.05); --pill-input-border: rgba(255,255,255,0.10); --pill-muted: #7a96b4; --pill-auth-bg: rgba(52,211,153,0.10); --pill-auth-border: rgba(52,211,153,0.25); --pill-accent: #34d399; } /* ===== PSY LIGHT — тесты, контент, каталог ===== */ [data-domain="psy"][data-theme="light"] { /* Warm Cream */ --c-bg: #eae5dc; --c-bg-secondary: #e2dcd2; --c-surface: #f5f2ec; --c-surface-light: #faf7f2; --c-bg-grad: linear-gradient(165deg, #eae5dc 0%, #e2dcd2 100%); --c-muted-bg: #eef0f5; --c-primary: #122038; --c-primary-dark: #0c1628; --c-primary-light: #182c48; /* Emerald — затемнённый для кремового фона */ --c-accent: #1e9a6a; --c-accent-dark: #167a54; /* Gold — микро-акцент на светлом */ --c-gold: #9a7a20; /* Текст */ --c-text: #2a2218; --c-text-heading: #182c48; --c-text-secondary: #6a5e4e; --c-muted: #6a5e4e; /* Границы */ --c-border: rgba(0, 10, 40, 0.10); --c-teal-light: rgba(30, 154, 106, 0.06); /* Accent opacity variants — для hero, badges, слайдера */ --c-accent-glow: rgba(30, 154, 106, 0.10); --c-accent-subtle: rgba(30, 154, 106, 0.06); --c-accent-faint: rgba(30, 154, 106, 0.04); --c-accent-line: rgba(30, 154, 106, 0.15); --c-accent-strong: rgba(30, 154, 106, 0.50); --c-accent-grid: rgba(30, 154, 106, 0.07); --c-accent-hover-border: rgba(30, 154, 106, 0.45); --c-accent-shadow: rgba(30, 154, 106, 0.35); --c-accent-shadow-hover: rgba(30, 154, 106, 0.50); /* Semantic faint variants */ --c-coral-faint: rgba(224, 122, 95, 0.10); --c-gold-glow: rgba(212, 168, 83, 0.15); --c-gold-shadow: rgba(212, 168, 83, 0.30); --c-gold-shadow-light:rgba(212, 168, 83, 0.10); --c-bg-translucent: rgba(234, 229, 220, 0.60); /* warm cream rgba (= #eae5dc) */ /* Системные */ --c-coral: #e07a5f; --c-danger: #ef4444; --c-warning: #f59e0b; /* CTA — emerald градиент на светлой теме */ --c-cta-bg: linear-gradient(135deg, #28b880 0%, #1e9a6a 100%); --c-cta-text: #ffffff; --c-cta-shadow: 0 2px 12px rgba(30, 154, 106, 0.20); --c-cta-hover: linear-gradient(135deg, #34d399 0%, #28b880 100%); /* Secondary CTA — ghost emerald */ --c-cta-secondary-bg: rgba(30, 154, 106, 0.06); --c-cta-secondary-border: rgba(30, 154, 106, 0.25); --c-cta-secondary-text: #1e9a6a; /* Уровни severity — 8 pathological + neutral + resource */ --c-severity-normal-bg: #d1fae5; --c-severity-normal-text: #064e3b; --c-severity-normal-border: #6ee7b7; --c-severity-minimal-bg: #ecfdf5; --c-severity-minimal-text: #065f46; --c-severity-minimal-border: #a7f3d0; --c-severity-mild-bg: #ecfccb; --c-severity-mild-text: #365314; --c-severity-mild-border: #bef264; --c-severity-elevated-bg: #fef9c3; --c-severity-elevated-text: #713f12; --c-severity-elevated-border: #fcd34d; --c-severity-moderate-bg: #ffedd5; --c-severity-moderate-text: #7c2d12; --c-severity-moderate-border: #fb923c; --c-severity-moderately_severe-bg: #fed7aa; --c-severity-moderately_severe-text: #7c2d12; --c-severity-moderately_severe-border: #f97316; --c-severity-severe-bg: #fecaca; --c-severity-severe-text: #7f1d1d; --c-severity-severe-border: #ef4444; --c-severity-very_severe-bg: #fca5a5; --c-severity-very_severe-text: #450a0a; --c-severity-very_severe-border: #b91c1c; --c-severity-clinical-bg: #f87171; --c-severity-clinical-text: #ffffff; --c-severity-clinical-border: #7f1d1d; --c-severity-neutral-bg: #ede9fe; --c-severity-neutral-text: #4c1d95; --c-severity-neutral-border: #8b5cf6; --c-severity-resource-bg: #d1fae5; --c-severity-resource-text: #064e3b; --c-severity-resource-border: #10b981; /* Success state tokens (L1 контракт) */ --c-success-bg: #e8f5e9; --c-success-border: #c8e6c9; --c-success-text: #2e7d32; /* Предупреждения / ошибки */ --c-warning-bg: #fffbeb; --c-warning-border: #fbbf24; --c-warning-text: #92400e; --c-danger-bg: #fff0f0; --c-danger-border: #dc3545; --c-danger-text: #721c24; /* Info-блоки (AI teaser, синие акценты) */ --c-info-bg: #f0f7ff; --c-info-border: rgba(59, 130, 246, 0.25); --c-info-accent: #3b82f6; --c-indigo: #4f46e5; /* Indigo bg/surface variants */ --c-indigo-bg: #f5f3ff; --c-indigo-pill-bg: #ede9fe; --c-indigo-deep: #5b21b6; --c-indigo-border: rgba(99, 102, 241, 0.25); --c-gradient-indigo: linear-gradient(135deg, #667eea, #764ba2); /* Шаги / пайплайн бейджи */ --c-step-done-bg: #e8f5e9; --c-step-done-text: #2e7d32; --c-step-done-border: #c8e6c9; --c-step-current-bg: #fff8e1; --c-step-current-text: #f57f17; --c-step-current-border: #ffecb3; --c-step-test-bg: #e3f2fd; --c-step-test-text: #1565c0; --c-step-test-border: #bbdefb; --c-step-form-bg: #f3e5f5; --c-step-form-text: #7b1fa2; --c-step-form-border: #e1bee7; /* Продуктовые бейджи */ --c-badge-free-bg: #e8f5e9; --c-badge-free-text: #2e7d32; --c-badge-paid-bg: #fff3e0; --c-badge-paid-text: #e65100; /* AI Badge */ --c-ai-badge-text: #7c3aed; --c-ai-badge-bg: linear-gradient(135deg, #ede9fe, #ddd6fe); /* ===== Header pill — border via background-clip padding-box/border-box ===== */ --pill-bg: rgba(255,255,255,0.50); /* Vertical linear с top + bottom пиками (см. комментарий в dark секции). */ --pill-border-grad: linear-gradient( to bottom, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.40) 30%, rgba(255,255,255,0.35) 65%, rgba(255,255,255,0.80) 100% ); --pill-shadow: 0 8px 32px rgba(20,30,60,0.12), 0 2px 8px rgba(20,30,60,0.08), inset 0 1px 0 rgba(255,255,255,0.75), inset 0 -1px 0 rgba(20,30,60,0.05); --pill-expanded-shadow: 0 16px 48px rgba(20,30,60,0.18), 0 4px 16px rgba(20,30,60,0.10), inset 0 1px 0 rgba(255,255,255,0.80), inset 0 -1px 0 rgba(20,30,60,0.05); --pill-text: #182c48; --pill-body: #2a2218; --pill-nav-color: rgba(24,44,72,0.72); --pill-nav-hover: rgba(12,22,40,0.05); --pill-divider: rgba(20,30,60,0.08); --pill-input-bg: rgba(255,255,255,0.55); --pill-input-border: rgba(20,30,60,0.10); --pill-muted: #6a5e4e; --pill-auth-bg: rgba(30,154,106,0.08); --pill-auth-border: rgba(30,154,106,0.25); --pill-accent: #1e9a6a; } /* ===== Fallback для backdrop-filter (бюджетный Android) ===== */ @supports not (backdrop-filter: blur(12px)) { [data-domain="psy"][data-theme="dark"] .glass, [data-domain="psy"][data-theme="dark"] [class*="glass"], [data-domain="psy"][data-theme="dark"] .card, [data-domain="psy"][data-theme="dark"] .question-card, [data-domain="psy"][data-theme="dark"] .concern-card, [data-domain="psy"][data-theme="dark"] .test-card, [data-domain="psy"][data-theme="dark"] .pricing-card, [data-domain="psy"][data-theme="dark"] .featured-card, .theme-psy-dark .glass, .theme-psy-dark [class*="glass"] { background: var(--c-glass-bg-fallback, rgba(24, 44, 72, 0.95)) !important; } }