/* tenant-theme.css — палитры по темам. Применяется через атрибут data-theme на . Подключается на каждой странице кабинета. tenant-i18n.js выставляет тему из settings.theme (если её нет — fallback по business_type: salon/beauty/medical/education → light/soft, остальное → dark). */ /* Базовая dark (хоккей, фитнес, общее) */ html[data-theme="dark"] { --bg:#0a0f1e; --panel:#121a30; --panel-2:#1a2440; --line:#243355; --text:#e6edf7; --muted:#93a4c4; --accent:#5BC0EB; --accent-2:#2563eb; --success:#22c55e; --warn:#f59e0b; --danger:#ef4444; --shadow:0 8px 24px rgba(0,0,0,0.35); --bg-gradient: radial-gradient(ellipse at top, #142244 0%, var(--bg) 60%); } /* Светлая классическая */ html[data-theme="light"] { --bg:#f7f9fc; --panel:#ffffff; --panel-2:#eef2f8; --line:#dee5ef; --text:#1a2440; --muted:#6b7892; --accent:#2563eb; --accent-2:#1e40af; --success:#059669; --warn:#d97706; --danger:#dc2626; --shadow:0 4px 16px rgba(33,52,90,0.08); --bg-gradient: radial-gradient(ellipse at top, #e6edf7 0%, var(--bg) 60%); } /* Нежная розово-сиреневая — для салонов / beauty */ html[data-theme="soft-rose"] { --bg:#fff5f8; --panel:#ffffff; --panel-2:#fde7ef; --line:#f4cbdc; --text:#3a1f2e; --muted:#9b7488; --accent:#e879a4; --accent-2:#be4d7d; --success:#10b981; --warn:#f59e0b; --danger:#dc2626; --shadow:0 4px 20px rgba(232,121,164,0.12); --bg-gradient: radial-gradient(ellipse at top, #ffe0ec 0%, #fff5f8 50%, #faf0f5 100%); } /* Тёплая бежевая для massage / SPA */ html[data-theme="warm-sand"] { --bg:#fbf6ef; --panel:#ffffff; --panel-2:#f4ebd9; --line:#e6d7be; --text:#3a2e1f; --muted:#8a7a62; --accent:#c79a5b; --accent-2:#8b6539; --success:#10b981; --warn:#f59e0b; --danger:#dc2626; --shadow:0 4px 18px rgba(199,154,91,0.15); --bg-gradient: radial-gradient(ellipse at top, #f7eedd 0%, var(--bg) 60%); } /* Спокойная мятная для medical */ html[data-theme="mint"] { --bg:#f0f9f6; --panel:#ffffff; --panel-2:#e1f3ea; --line:#c3e0d1; --text:#1e3a2e; --muted:#5a7c6e; --accent:#10b981; --accent-2:#047857; --success:#16a34a; --warn:#d97706; --danger:#dc2626; --shadow:0 4px 16px rgba(16,185,129,0.1); --bg-gradient: radial-gradient(ellipse at top, #d7f0e4 0%, var(--bg) 60%); } /* Тёплая янтарная — рестораны и кафе. Кремовый фон, карамельно-оранжевый акцент. */ html[data-theme="warm-amber"] { --bg:#fdf6e8; --panel:#ffffff; --panel-2:#f8eccf; --line:#e8d4a8; --text:#3a2410; --muted:#8a6b3f; --accent:#d97706; --accent-2:#92400e; --success:#16a34a; --warn:#ea580c; --danger:#dc2626; --shadow:0 4px 18px rgba(217,119,6,0.14); --bg-gradient: radial-gradient(ellipse at top, #fbe8c3 0%, var(--bg) 55%, #f9efdc 100%); } /* Тёмный лаунж — кальянные и бары. Глубокий тёмно-кофейный с медным акцентом. */ html[data-theme="lounge-dark"] { --bg:#1a1410; --panel:#221a14; --panel-2:#2d2218; --line:#3d2f1e; --text:#f5e6c8; --muted:#a89272; --accent:#d4a574; --accent-2:#a16207; --success:#22c55e; --warn:#f59e0b; --danger:#ef4444; --shadow:0 8px 28px rgba(0,0,0,0.4); --bg-gradient: radial-gradient(ellipse at top, #2d1f15 0%, var(--bg) 60%); } /* Все темы (и тёмные, и светлые) — body использует свой bg-gradient */ html[data-theme] body { background: var(--bg-gradient); color: var(--text); } /* Общие переопределения для светлых тем — glass-карточки и кнопки выглядят уместно */ html[data-theme="light"] .glass, html[data-theme="soft-rose"] .glass, html[data-theme="warm-sand"] .glass, html[data-theme="warm-amber"] .glass, html[data-theme="mint"] .glass { background: rgba(255,255,255,0.85); backdrop-filter: blur(8px); border: 1px solid var(--line); box-shadow: var(--shadow); } html[data-theme="light"] input, html[data-theme="soft-rose"] input, html[data-theme="warm-sand"] input, html[data-theme="warm-amber"] input, html[data-theme="mint"] input, html[data-theme="light"] select, html[data-theme="soft-rose"] select, html[data-theme="warm-sand"] select, html[data-theme="warm-amber"] select, html[data-theme="mint"] select, html[data-theme="light"] textarea, html[data-theme="soft-rose"] textarea, html[data-theme="warm-sand"] textarea, html[data-theme="warm-amber"] textarea, html[data-theme="mint"] textarea { background: var(--panel); border: 1px solid var(--line); color: var(--text); } html[data-theme="light"] .nav-item.active, html[data-theme="soft-rose"] .nav-item.active, html[data-theme="warm-sand"] .nav-item.active, html[data-theme="warm-amber"] .nav-item.active, html[data-theme="mint"] .nav-item.active { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 18%, transparent), transparent); border-left: 2px solid var(--accent); color: var(--text); } /* Тёмный лаунж — для кальянных/баров: glass становится тёмным с тёплой подсветкой */ html[data-theme="lounge-dark"] .glass { background: rgba(34,26,20,0.78); backdrop-filter: blur(10px); border: 1px solid var(--line); box-shadow: var(--shadow); } html[data-theme="lounge-dark"] input, html[data-theme="lounge-dark"] select, html[data-theme="lounge-dark"] textarea { background: var(--panel-2); border: 1px solid var(--line); color: var(--text); } html[data-theme="lounge-dark"] .nav-item.active { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 22%, transparent), transparent); border-left: 2px solid var(--accent); color: var(--text); } /* Бордюр glass.border-b — мягкий на всех темах */ html[data-theme] .glass.border-b { border-bottom-color: var(--line); } /* ────────── Sprint 3.2 — Премиальные темы тенантов ────────── */ /* Premium Light — белоснежный + золото. Для премиум-сегмента, бутики, ювелирка. */ html[data-theme="premium-light"] { --bg:#ffffff; --panel:#ffffff; --panel-2:#faf7f1; --line:#ece4d2; --text:#1a1612; --muted:#766857; --accent:#b8945a; --accent-2:#8c6e3a; --success:#10b981; --warn:#d97706; --danger:#dc2626; --shadow:0 6px 22px rgba(40,30,15,0.08); --bg-gradient: linear-gradient(180deg, #ffffff 0%, #f8f3e9 100%); } /* Premium Dark — графит + золото. Премиум-стиль для вечерних/тёмных кабинетов. */ html[data-theme="premium-dark"] { --bg:#1a1a1f; --panel:#22222a; --panel-2:#2a2a34; --line:#3a3a44; --text:#f4ecd6; --muted:#a09784; --accent:#d4af37; --accent-2:#a8861e; --success:#22c55e; --warn:#f59e0b; --danger:#ef4444; --shadow:0 10px 32px rgba(0,0,0,0.45); --bg-gradient: radial-gradient(ellipse at top, #2a2a34 0%, var(--bg) 60%); } /* Boutique — нежный беж + терракот. Для бутиков, ателье, локальных салонов. */ html[data-theme="boutique"] { --bg:#fbf6ed; --panel:#ffffff; --panel-2:#f5ecd8; --line:#e8d9bc; --text:#2c1f14; --muted:#8a7559; --accent:#c47a6a; --accent-2:#a8604f; --success:#10b981; --warn:#f59e0b; --danger:#dc2626; --shadow:0 6px 22px rgba(168,96,79,0.12); --bg-gradient: radial-gradient(ellipse at top, #f5e6dd 0%, var(--bg) 55%); } /* Адаптация glass для премиум-светлых */ html[data-theme="premium-light"] .glass, html[data-theme="boutique"] .glass { background: rgba(255,255,255,0.92); backdrop-filter: blur(10px); border: 1px solid var(--line); box-shadow: var(--shadow); } html[data-theme="premium-light"] input, html[data-theme="premium-light"] select, html[data-theme="premium-light"] textarea, html[data-theme="boutique"] input, html[data-theme="boutique"] select, html[data-theme="boutique"] textarea { background: var(--panel); border: 1px solid var(--line); color: var(--text); } html[data-theme="premium-light"] .nav-item.active, html[data-theme="boutique"] .nav-item.active { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 16%, transparent), transparent); border-left: 2px solid var(--accent); color: var(--text); } /* Адаптация premium-dark glass */ html[data-theme="premium-dark"] .glass { background: rgba(34,34,42,0.82); backdrop-filter: blur(12px); border: 1px solid var(--line); box-shadow: var(--shadow); } html[data-theme="premium-dark"] input, html[data-theme="premium-dark"] select, html[data-theme="premium-dark"] textarea { background: var(--panel-2); border: 1px solid var(--line); color: var(--text); } html[data-theme="premium-dark"] .nav-item.active { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 22%, transparent), transparent); border-left: 2px solid var(--accent); color: var(--text); }