/* ========================================================================== AQARA KRD — THEME: WARM (тёплая, по умолчанию) -------------------------------------------------------------------------- Подключать ПОСЛЕ aqara-krd-three-base.css. Активна при (либо :root по умолчанию). Содержит ТОЛЬКО токены темы + тема-специфичные правила (фильтр логотипа, blend картинок, spotlight, активные состояния навигации). Warm — основная тема витрины: тёплый интерьерный фон, цена в --color-text, CTA в тёплом акценте (коммерческое действие отделено от навигации). ========================================================================== */ /* ===== ТОКЕНЫ ТЕМЫ ===== СВЕТОВАЯ ПАЛИТРА WARM (по умолчанию, :root). Тёплый интерьерный фон, nav/орбита/CTA в тёплом акценте #C98B5F, primary #426D9E. Цена — в --color-text (не дублирует оранжевый). Только цвета этой темы. */ :root, [data-theme="warm"], html[data-theme="warm"] { --color-bg: #F6F1E8; --color-surface: #EFE7DA; --color-surface-soft: #FBF7F2; --color-surface-strong: #E8DDCF; --color-card-bg: rgba(251, 247, 242, 0.84); --color-img-bg: transparent; --color-text: #2F2A24; --color-text-muted: #6E655C; --color-text-faint: #9A8F83; --color-primary: #426D9E; --color-primary-hover: #355A84; --color-primary-soft: #DCE7F2; --color-accent-warm: #C98B5F; --color-accent-warm-hover: #B6794D; --color-accent-soft: rgba(201, 139, 95, 0.15); --color-success: #5F7D4A; --color-warning: #B57A3F; --color-danger: #A65C52; --color-border: #DDD1C2; --color-divider: #E8DED2; --shadow-sm: 0 4px 14px rgba(47, 42, 36, 0.04); --shadow-md: 0 10px 30px rgba(47, 42, 36, 0.06); --shadow-lg: 0 18px 44px rgba(47, 42, 36, 0.08); --gradient-bg: radial-gradient(circle at top right, rgba(201, 139, 95, 0.10), transparent 28%), linear-gradient(180deg, #FBF7F2 0%, #F6F1E8 100%); --nav-active-bg: #C98B5F; --nav-active-text: #FFFFFF; --nav-active-border: #C98B5F; --nav-active-shadow: 0 8px 18px color-mix(in srgb, #C98B5F 24%, transparent); --nav-active-ghost: color-mix(in srgb, #C98B5F 10%, transparent); --hub-glow-color: #d27b4c; --sat-color: #C98B5F; --sat-color-text: #FFFFFF; --top-bg: #f6ebd8; --top-color: #C98B5F; --top-border: rgba(201, 139, 95, 0.25); --menu-ripple-color: rgba(210, 123, 76, 0.4); --menu-ripple-glow: 0 0 20px #d27b4c, inset 0 0 8px rgba(255,170,0,0.2); } /* ===== CTA (v1.4) ===== */ /* Warm: CTA тёплый, но цена НЕ должна дублировать оранжевый (правило из дока). Цена остаётся --color-text. Здесь только закрепляем CTA. */ [data-theme="warm"], html[data-theme="warm"] { --aq-cta-bg: var(--color-accent-warm); --aq-cta-bg-hover: var(--color-accent-warm-hover); } /* ===== ТЕМА-СПЕЦИФИЧНЫЕ ПРАВИЛА ===== */ /* logo filter */ [data-theme="warm"] .aq-dynamic-logo { filter: brightness(0) saturate(100%) invert(43%) sepia(45%) saturate(541%) hue-rotate(344deg) brightness(91%) contrast(88%); } /* logo orbit dot */ html[data-theme="warm"] .aq-logo-orbit-dot { background: radial-gradient(circle at 35% 35%, #fff 0%, #ffaa00 40%, #ff6a00 100%); box-shadow: 0 0 0 3px color-mix(in srgb, #ff6a00 10%, transparent), 0 0 14px #ff6a00; } /* img blend (warm+light общие, но для warm-файла берём warm-часть) */ [data-theme="warm"] .aq-img-container img, [data-theme="warm"] .ms2_product .w-full.aspect-square img { mix-blend-mode: multiply; } /* theme switcher dot */ .aq-theme-btn[data-theme-set="warm"] .aq-theme-btn-dot { background: #C98B5F; } /* mobile-menu bg */ [data-theme="warm"] #mobile-menu { background: rgba(246, 241, 232, 0.95) !important; } /* spotlight warm */ html[data-theme="warm"] .aq-spotlight-word span { animation: aq-letter-spotlight-warm 5s cubic-bezier(0.25, 1, 0.5, 1) infinite; animation-delay: calc(var(--i) * 0.08s); } @keyframes aq-letter-spotlight-warm { 0%, 22%, 100% { color: color-mix(in srgb, var(--color-text-faint) 85%, transparent 15%); text-shadow: none; } 4% { color: #ff5100; text-shadow: none; } 8% { color: #ffbb00; text-shadow: none; } } /* mobile-nav active */ html[data-theme="warm"] .mobile-nav-link.is-active { background-color: #d47e4d !important; color: #ffffff !important; border-color: #d47e4d !important; } /* Blueprint: тёплая тема */ [data-theme="warm"] .aq-menu-blueprint, html[data-theme="warm"] .aq-menu-blueprint { color: var(--color-text-muted); /* Взяли более контрастный токен */ opacity: 0.65; /* Подняли с 0.20 */ } html[data-theme="warm"] { --aq-search-scrim: rgba(246, 240, 232, 0.22); --aq-search-scrim-pressed: rgba(246, 240, 232, 0.8); }