/* ========================================================================== AQARA KRD — THEME: SOFT-DARK (мягкая тёмная) -------------------------------------------------------------------------- Подключать ПОСЛЕ aqara-krd-three-base.css. Активна при . -------------------------------------------------------------------------- Для tech-first аудитории и вечернего использования. Не «бесцветная тёмная панель»: основной active/nav тон — холодный светло-синий #7FB0F6 (а НЕ серый #9e9e9e/#374151 — устранено по дизайн-доку). Орбита — самый «живой» светящийся элемент темы; цена — светлый текст без цветных эффектов. ========================================================================== */ /* ===== ТОКЕНЫ ТЕМЫ ===== СВЕТОВАЯ ПАЛИТРА SOFT-DARK. Значения токенов для тёмного фона: nav/орбита — холодный голубой #7FB0F6, CTA — тёплый #D2A074. Карточки монолитные (без белых дыр), картинки в plus-lighter. Только цвета этой темы. */ [data-theme="soft-dark"], html[data-theme="soft-dark"] { --color-bg: #22262F; --color-surface: #2A303C; --color-surface-soft: #333A49; --color-surface-strong: #40495C; --color-card-bg: #2A303C; /* Монолитный сочный цвет карточки без белых дыр */ --color-img-bg: transparent; /* Убираем белую рамку полностью */ --color-text: #F3F5F7; --color-text-muted: #AAB4BF; --color-text-faint: #8793A0; --color-primary: #7FB0F6; --color-primary-hover: #5D96EA; --color-primary-soft: rgba(127, 176, 246, 0.16); --color-accent-warm: #D2A074; --color-accent-warm-hover: #BF8B5D; --color-accent-soft: rgba(210, 160, 116, 0.16); --color-success: #6F9360; --color-warning: #B98245; --color-danger: #B25B55; --color-border: rgba(255, 255, 255, 0.08); --color-divider: rgba(255, 255, 255, 0.05); --shadow-sm: 0 6px 18px rgba(7, 10, 14, 0.2); --shadow-md: 0 14px 34px rgba(7, 10, 14, 0.25); --shadow-lg: 0 24px 54px rgba(7, 10, 14, 0.3); --gradient-bg: radial-gradient(circle at top right, rgba(210, 160, 116, 0.07), transparent 34%), linear-gradient(180deg, #2A303C 0%, #22262F 100%); --nav-active-bg: var(--color-primary); /* #7FB0F6 — холодный голубой (фикс серого) */ --nav-active-text: #16181F; --nav-active-border: #D2A074; --nav-active-shadow: 0 10px 22px color-mix(in srgb, #D2A074 20%, transparent); --nav-active-ghost: color-mix(in srgb, #D2A074 14%, transparent); --hub-glow-color: #ffffff; --sat-color: #7FB0F6; --sat-color-text: #16181F; --top-bg: #2A303C; --top-color: #7FB0F6; --top-border: rgba(127, 176, 246, 0.3); --menu-ripple-color: rgba(127, 176, 246, 0.4); --menu-ripple-glow: 0 0 24px #4338ca, inset 0 0 10px rgba(255,255,255,0.1); } /* ===== CTA: тёплый акцент (коммерческое действие) ===== */ [data-theme="soft-dark"], html[data-theme="soft-dark"] { --aq-cta-bg: var(--color-accent-warm); --aq-cta-bg-hover: var(--color-accent-warm-hover); } /* ===== ТЕМА-СПЕЦИФИЧНЫЕ ПРАВИЛА ===== */ /* logo filter */ [data-theme="soft-dark"] .aq-dynamic-logo { filter: drop-shadow(0 0 12px color-mix(in srgb, var(--color-primary) 40%, transparent)) brightness(0) invert(1) opacity(0.95); } /* glass-header dark overrides */ [data-theme="soft-dark"] .glass-header { background: color-mix(in srgb, var(--color-bg) 64%, transparent) !important; border-bottom: 1px solid color-mix(in srgb, var(--color-border) 44%, transparent) !important; } [data-theme="soft-dark"] .glass-header::before { opacity: 0.84; } [data-theme="soft-dark"] .glass-header::after { opacity: 0.76; } [data-theme="soft-dark"] .glass-header.is-scrolled { background: color-mix(in srgb, var(--color-bg) 78%, transparent) !important; border-bottom: 1px solid color-mix(in srgb, var(--color-border) 58%, transparent) !important; box-shadow: 0 12px 32px rgba(7, 10, 14, 0.22) !important; } /* logo orbit dot */ html[data-theme="soft-dark"] .aq-logo-orbit-dot { background: radial-gradient(circle at 35% 35%, #ffffff 0%, #f3f4f6 40%, #e5e7eb 100%); box-shadow: 0 0 0 3px color-mix(in srgb, #ffffff 20%, transparent), 0 0 14px #ffffff; } /* img blend (plus-lighter, без белых артефактов) */ [data-theme="soft-dark"] .aq-img-container img, [data-theme="soft-dark"] .ms2_product .w-full.aspect-square img { mix-blend-mode: plus-lighter; } /* theme switcher dot */ .aq-theme-btn[data-theme-set="soft-dark"] .aq-theme-btn-dot { background: #9e9e9e; } /* mobile-menu bg */ [data-theme="soft-dark"] #mobile-menu { background: rgba(34, 38, 47, 0.97) !important; } /* mobile-nav active (холодный голубой) */ html[data-theme="soft-dark"] .mobile-nav-link.is-active { background-color: var(--color-primary) !important; color: #16181F !important; border-color: var(--color-primary) !important; } /* Blueprint: тёмная тема */ [data-theme="soft-dark"] .aq-menu-blueprint, html[data-theme="soft-dark"] .aq-menu-blueprint { color: var(--color-primary); opacity: 0.85; /* Подняли с 0.10 (в темной теме нужен больший контраст для неона) */ } html[data-theme="soft-dark"] { --aq-search-scrim: rgba(24, 26, 32, 0.34); --aq-search-scrim-pressed: rgba(24, 26, 32, 0.8); }