/* themes.css — цветатека Два варианта: D (светлая, по умолчанию) и B (тёмная). Переключаются через data-theme="D" / data-theme="B" на . */ /* ═══════════════════════════════════════════════════ THEME D — Modern Soft (светлая, по умолчанию) Тёплый крем, мягкие тени, скруглённые прямоугольники. ═══════════════════════════════════════════════════ */ [data-theme="D"] { --bg: #fdf6f0; --bg-soft: #f5ebe2; --surface: rgba(255, 251, 247, 0.92); --surface-solid: #fffbf7; --text: #3a2630; --text-mid: #57394a; --text-soft: #7a5c6a; --text-dim: #9e8088; --accent-text: #b54e6e; --icon-color: #c85070; --link-color: #b54e6e; --primary: #e0506e; --primary-strong: #c83b58; --accent: #ee8f60; --line: rgba(180, 130, 148, 0.26); --ok: #2e9f7b; --body-bg-overlay: radial-gradient(700px 420px at 88% -8%, rgba(235, 175, 198, 0.18), transparent 55%); --header-bg: rgba(253, 246, 240, 0.94); --header-border: rgba(180, 130, 148, 0.18); --footer-bg: rgba(245, 235, 226, 0.82); --footer-border: rgba(180, 130, 148, 0.18); --bottom-bar-bg: rgba(253, 246, 240, 0.97); --bottom-bar-border: rgba(180, 130, 148, 0.22); --cta-bg: linear-gradient(125deg, rgba(252, 224, 234, 0.7), rgba(255, 238, 216, 0.65)); --shadow: 0 12px 36px rgba(58, 38, 48, 0.1); --shadow-card: 0 2px 8px rgba(58, 38, 48, 0.05), 0 6px 22px rgba(58, 38, 48, 0.07); --shadow-btn: 0 6px 18px rgba(224, 80, 110, 0.28); --shadow-btn-hover: 0 10px 26px rgba(224, 80, 110, 0.38); --focus-ring: rgba(224, 80, 110, 0.16); --radius-lg: 22px; --radius-md: 14px; --radius-sm: 10px; --radius-btn: 10px; } [data-theme="D"] .badge { background: rgba(255, 251, 247, 0.9); border-color: rgba(200, 148, 164, 0.28); } [data-theme="D"] .art-stage { background: radial-gradient(circle at 18% 20%, rgba(255, 236, 226, 0.85), rgba(253, 246, 240, 0.65)); border-color: rgba(200, 155, 168, 0.26); } [data-theme="D"] .icon-wrap { background: rgba(224, 80, 110, 0.09); border-radius: 10px; } [data-theme="D"] .pack-card.premium { background: linear-gradient(135deg, rgba(255, 238, 228, 0.9), rgba(255, 248, 218, 0.8)); } [data-theme="D"] .pack-card.wow { background: linear-gradient(135deg, rgba(255, 228, 238, 0.9), rgba(255, 236, 208, 0.85)); } [data-theme="D"] .faq-item[open] { background: rgba(255, 251, 247, 0.98); border-color: rgba(200, 148, 164, 0.42); } [data-theme="D"] .review::before { color: rgba(224, 80, 110, 0.14); } /* ═══════════════════════════════════════════════════ THEME B — Expressive / Dark (тёмная) Тёмная слива, неоновый роз, высокий контраст. ═══════════════════════════════════════════════════ */ [data-theme="B"] { --bg: #170b13; --bg-soft: #220d1a; --surface: rgba(38, 14, 29, 0.9); --surface-solid: #26101d; --text: #fce8f2; --text-mid: #e2bad0; --text-soft: #c098b0; --text-dim: #8e6a7e; --accent-text: #ff8ac0; --icon-color: #f0206e; --link-color: #ff8ac0; --primary: #f0206e; --primary-strong: #d9115d; --accent: #ff9d58; --line: rgba(240, 32, 110, 0.22); --ok: #3bc490; --body-bg-overlay: radial-gradient(900px 700px at 80% -5%, rgba(240, 32, 110, 0.16), transparent 55%), radial-gradient(600px 500px at 5% 95%, rgba(80, 10, 50, 0.45), transparent 65%); --header-bg: rgba(18, 7, 14, 0.9); --header-border: rgba(240, 32, 110, 0.18); --footer-bg: rgba(14, 5, 11, 0.92); --footer-border: rgba(240, 32, 110, 0.12); --bottom-bar-bg: rgba(18, 7, 14, 0.97); --bottom-bar-border: rgba(240, 32, 110, 0.2); --cta-bg: linear-gradient(125deg, rgba(240, 32, 110, 0.1), rgba(255, 157, 88, 0.07)); --shadow: 0 20px 60px rgba(240, 32, 110, 0.2); --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.5); --shadow-btn: 0 8px 32px rgba(240, 32, 110, 0.42); --shadow-btn-hover: 0 14px 44px rgba(240, 32, 110, 0.58); --focus-ring: rgba(240, 32, 110, 0.25); --radius-lg: 20px; --radius-md: 14px; --radius-sm: 10px; --radius-btn: 999px; } [data-theme="B"] .btn-primary { background: linear-gradient(135deg, var(--primary), #ff5a8e); } [data-theme="B"] .btn-ghost { background: rgba(255, 255, 255, 0.06); color: var(--text-mid); border-color: rgba(240, 32, 110, 0.2); } [data-theme="B"] .badge { background: rgba(240, 32, 110, 0.12); border-color: rgba(240, 32, 110, 0.26); color: var(--accent-text); } [data-theme="B"] .brand-mark { background: rgba(240, 32, 110, 0.2); box-shadow: 0 0 0 4px rgba(240, 32, 110, 0.16); color: #ff8ac0; } [data-theme="B"] .art-stage { background: radial-gradient(circle at 20% 25%, rgba(240, 32, 110, 0.1), transparent 50%), var(--surface-solid); border-color: rgba(240, 32, 110, 0.18); } [data-theme="B"] .glass-note { background: rgba(38, 14, 29, 0.85); border-color: rgba(240, 32, 110, 0.28); } [data-theme="B"] .icon-wrap { background: rgba(240, 32, 110, 0.14); } [data-theme="B"] .chip span { background: rgba(255, 255, 255, 0.05); border-color: rgba(240, 32, 110, 0.2); color: var(--text-mid); } [data-theme="B"] .chip span small { color: var(--text-soft); } [data-theme="B"] .chip input:checked + span { background: var(--primary); color: #fff; border-color: var(--primary); } [data-theme="B"] .chip input:checked + span small { color: rgba(255, 255, 255, 0.92); } [data-theme="B"] .pack-card { background: rgba(255, 255, 255, 0.04); border-color: rgba(240, 32, 110, 0.18); } [data-theme="B"] .pack-card.premium { background: rgba(240, 32, 110, 0.07); } [data-theme="B"] .pack-card.wow { background: rgba(240, 32, 110, 0.12); } [data-theme="B"] .pack-card:has(input:checked) { border-color: var(--primary); box-shadow: 0 8px 28px rgba(240, 32, 110, 0.3); } [data-theme="B"] .radio-card { background: rgba(255, 255, 255, 0.05); border-color: rgba(240, 32, 110, 0.24); } [data-theme="B"] .radio-card span { color: var(--text); } [data-theme="B"] .radio-card small { color: var(--text-soft); } [data-theme="B"] .radio-card:has(input:checked) { border-color: var(--primary); background: linear-gradient(180deg, rgba(240, 32, 110, 0.28), rgba(240, 32, 110, 0.12)); box-shadow: 0 10px 24px rgba(240, 32, 110, 0.34); } [data-theme="B"] .radio-card:has(input:checked) span, [data-theme="B"] .radio-card:has(input:checked) small { color: #fff2f8; } [data-theme="B"] .radio-card-custom input[type="text"] { background: rgba(12, 5, 10, 0.8); border-color: rgba(240, 32, 110, 0.32); color: var(--text); } [data-theme="B"] .radio-card-custom input[type="text"]:disabled { opacity: 0.88; color: var(--text-dim); } [data-theme="B"] fieldset { border-color: rgba(240, 32, 110, 0.16); } [data-theme="B"] input, [data-theme="B"] textarea, [data-theme="B"] select { background: rgba(255, 255, 255, 0.06); border-color: rgba(240, 32, 110, 0.2); color: var(--text); } [data-theme="B"] input::placeholder, [data-theme="B"] textarea::placeholder { color: var(--text-dim); } [data-theme="B"] .summary-list li { border-bottom-color: rgba(240, 32, 110, 0.16); } [data-theme="B"] .review::before { color: rgba(240, 32, 110, 0.18); } [data-theme="B"] .faq-item[open] { background: rgba(38, 14, 29, 0.98); border-color: var(--primary); } [data-theme="B"] .tilt:hover { box-shadow: 0 24px 44px rgba(240, 32, 110, 0.24); } [data-theme="B"] .messenger-btn { background: rgba(255, 255, 255, 0.06); border-color: rgba(240, 32, 110, 0.2); color: var(--text-mid); }