/* ========================================================= BORDO — цветовые темы (переключаются через [data-theme] на ) 6 тем, используются всеми 3 дизайнами. ========================================================= */ :root { --font-heading: 'Playfair Display', Georgia, serif; --font-body: 'Montserrat', 'Segoe UI', sans-serif; --radius: 14px; --shadow: 0 10px 40px rgba(0,0,0,.25); } /* 1) БОРДО / ВИННЫЙ — фирменный, текущий бренд-цвет */ [data-theme="bordo"] { --bg: #150a0d; --bg-alt: #1f1013; --surface: #2a1418; --text: #f3e6e6; --text-muted: #c9a8ac; --accent: #a3223e; --accent-2: #d88a97; --accent-soft: rgba(163,34,62,.18); --border: rgba(216,138,151,.18); --gold: #c9a24b; } /* 2) ЧЁРНО-ЗОЛОТОЙ — люкс */ [data-theme="gold"] { --bg: #0c0c0d; --bg-alt: #141414; --surface: #1c1a16; --text: #f2ede1; --text-muted: #b8ab8f; --accent: #c9a24b; --accent-2: #e9cf8a; --accent-soft: rgba(201,162,75,.16); --border: rgba(201,162,75,.22); --gold: #c9a24b; } /* 3) ПУДРОВО-РОЗОВЫЙ / ГРАФИТ — мягкий, чувственный */ [data-theme="blush"] { --bg: #1a1418; --bg-alt: #221a1f; --surface: #2c222a; --text: #f5e9ee; --text-muted: #c9aeb8; --accent: #e0879f; --accent-2: #f2b8c6; --accent-soft: rgba(224,135,159,.16); --border: rgba(242,184,198,.18); --gold: #d9b98e; } /* 4) ТЁМНО-ФИОЛЕТОВЫЙ — ночной, интимный */ [data-theme="violet"] { --bg: #120c1a; --bg-alt: #1a1224; --surface: #241a30; --text: #eee6f5; --text-muted: #b6a3c9; --accent: #8a4fd1; --accent-2: #c9a3f2; --accent-soft: rgba(138,79,209,.18); --border: rgba(201,163,242,.18); --gold: #c9a24b; } /* 5) ЧЁРНО-КРАСНЫЙ — дерзкий, контраст */ [data-theme="crimson"] { --bg: #0a0a0a; --bg-alt: #131313; --surface: #1c1c1c; --text: #f5f0f0; --text-muted: #b8a8a8; --accent: #e2273c; --accent-2: #ff5c6c; --accent-soft: rgba(226,39,60,.18); --border: rgba(226,39,60,.22); --gold: #d9b98e; } /* 6) ИЗУМРУДНО-ЧЁРНЫЙ — редкий, премиальный акцент */ [data-theme="emerald"] { --bg: #0a1210; --bg-alt: #101a17; --surface: #17221f; --text: #eaf3ef; --text-muted: #a9c2ba; --accent: #2fa878; --accent-2: #7fd9b3; --accent-soft: rgba(47,168,120,.16); --border: rgba(127,217,179,.18); --gold: #c9a24b; } /* ========================================================= LIGHT MODE — накладывается поверх каждой цветовой темы через [data-mode="light"] на . Тёмный — дефолт. ========================================================= */ [data-theme="bordo"][data-mode="light"] { --bg: #fbf4f2; --bg-alt: #f4e6e3; --surface: #ffffff; --text: #2a1418; --text-muted: #7a5a5e; --accent: #a3223e; --accent-2: #7c1a30; --accent-soft: rgba(163,34,62,.10); --border: rgba(163,34,62,.16); --gold: #a5792e; --shadow: 0 10px 30px rgba(42,20,24,.10); } [data-theme="gold"][data-mode="light"] { --bg: #faf7ef; --bg-alt: #f2ead4; --surface: #ffffff; --text: #262117; --text-muted: #7d7256; --accent: #a5792e; --accent-2: #8a621f; --accent-soft: rgba(165,121,46,.10); --border: rgba(165,121,46,.18); --gold: #a5792e; --shadow: 0 10px 30px rgba(38,33,23,.10); } [data-theme="blush"][data-mode="light"] { --bg: #fdf3f5; --bg-alt: #fbe6ea; --surface: #ffffff; --text: #33222a; --text-muted: #8a6b74; --accent: #c85f7c; --accent-2: #a8425f; --accent-soft: rgba(200,95,124,.10); --border: rgba(200,95,124,.16); --gold: #b08a5a; --shadow: 0 10px 30px rgba(51,34,42,.10); } [data-theme="violet"][data-mode="light"] { --bg: #f8f5fc; --bg-alt: #eee3f8; --surface: #ffffff; --text: #251c33; --text-muted: #7c6c93; --accent: #7440b8; --accent-2: #5c2f96; --accent-soft: rgba(116,64,184,.10); --border: rgba(116,64,184,.16); --gold: #a5792e; --shadow: 0 10px 30px rgba(37,28,51,.10); } [data-theme="crimson"][data-mode="light"] { --bg: #fbf7f5; --bg-alt: #f5e3e3; --surface: #ffffff; --text: #241414; --text-muted: #806c6c; --accent: #c41f33; --accent-2: #9a1827; --accent-soft: rgba(196,31,51,.10); --border: rgba(196,31,51,.18); --gold: #b08a5a; --shadow: 0 10px 30px rgba(36,20,20,.10); } [data-theme="emerald"][data-mode="light"] { --bg: #f5faf6; --bg-alt: #e3f2e8; --surface: #ffffff; --text: #12241b; --text-muted: #5f8071; --accent: #22815b; --accent-2: #1b6749; --accent-soft: rgba(34,129,91,.10); --border: rgba(34,129,91,.18); --gold: #a5792e; --shadow: 0 10px 30px rgba(18,36,27,.10); } /* ===== базовое применение переменных ===== */ html { background: var(--bg); overflow-x: hidden; } body { background: var(--bg); color: var(--text); font-family: var(--font-body); overflow-x: hidden; max-width: 100vw; } a { color: var(--accent-2); } .text-muted-custom { color: var(--text-muted) !important; } .bg-surface { background: var(--surface) !important; } .bg-alt { background: var(--bg-alt) !important; } .border-custom { border-color: var(--border) !important; } .text-accent { color: var(--accent) !important; } .text-gold { color: var(--gold) !important; } .btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; } .btn-accent:hover { background: var(--accent-2); border-color: var(--accent-2); color: #150a0d; } .btn-outline-accent { border: 1px solid var(--accent); color: var(--accent-2); background: transparent; } .btn-outline-accent:hover { background: var(--accent); color: #fff; } /* ===== переключатель тем ===== */ .theme-switcher { position: fixed; right: 18px; bottom: 18px; z-index: 1050; display: flex; gap: 8px; padding: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; box-shadow: var(--shadow); } .theme-swatch { width: 26px; height: 26px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: transform .15s ease, border-color .15s ease; } .theme-swatch:hover { transform: scale(1.15); } .theme-swatch.active { border-color: #fff; } .theme-swatch[data-swatch="bordo"] { background: linear-gradient(135deg,#a3223e,#d88a97); } .theme-swatch[data-swatch="gold"] { background: linear-gradient(135deg,#c9a24b,#e9cf8a); } .theme-swatch[data-swatch="blush"] { background: linear-gradient(135deg,#e0879f,#f2b8c6); } .theme-swatch[data-swatch="violet"] { background: linear-gradient(135deg,#8a4fd1,#c9a3f2); } .theme-swatch[data-swatch="crimson"] { background: linear-gradient(135deg,#e2273c,#ff5c6c); } .theme-swatch[data-swatch="emerald"] { background: linear-gradient(135deg,#2fa878,#7fd9b3); } /* ===== переключатель светлый/тёмный ===== */ .mode-switcher { position: fixed; right: 18px; bottom: 72px; z-index: 1050; display: flex; gap: 4px; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; box-shadow: var(--shadow); } .mode-btn { width: 30px; height: 30px; border-radius: 50%; border: none; background: transparent; color: var(--text-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: .85rem; transition: background .15s ease, color .15s ease; } .mode-btn.active { background: var(--accent); color: #fff; }