/* ========================================================================== AQARA KRD — THEME: LIGHT (светлая, фирменная Aqara) -------------------------------------------------------------------------- Подключать ПОСЛЕ aqara-krd-three-base.css. Активна при . -------------------------------------------------------------------------- ВАЖНО: завязана на фирменный Aqara-blue #1F6FEB (а НЕ на прежний #5765f2/ #0055ff, который уводил в Discord/tech-template — устранено по дизайн-доку). Навигация и орбита — в Aqara-blue; CTA «купить» — в тёплом акценте, чтобы развести бренд-навигацию и коммерческое действие. ========================================================================== */ /* ===== ТОКЕНЫ ТЕМЫ (Aqara-blue) ===== СВЕТОВАЯ ПАЛИТРА LIGHT. Здесь задаются ЗНАЧЕНИЯ токенов, которые база потребляет через var(): фон/поверхности, текст, primary (nav/орбита), warm-accent (CTA-покупка), границы, тени, орбита (--sat-color/--hub-glow), ripple меню, blueprint. Структуру не описываем — только цвета этой темы. */ [data-theme="light"], html[data-theme="light"] { --color-bg: #FAFAFA; --color-surface: #F4F5F8; --color-surface-soft: #FFFFFF; --color-surface-strong: #EAECF4; --color-card-bg: rgba(255, 255, 255, 0.92); --color-img-bg: transparent; --color-text: #16181F; --color-text-muted: #6E7485; --color-text-faint: #A1A6B3; --color-primary: #1F6FEB; --color-primary-hover: #175FCC; --color-primary-soft: color-mix(in srgb, #1F6FEB 14%, white); --color-accent-warm: #C98B5F; --color-accent-warm-hover: #B6794D; --color-accent-soft: rgba(201, 139, 95, 0.10); --color-success: #4D7C57; --color-warning: #B7791F; --color-danger: #C05656; --color-border: #E4E7F0; --color-divider: #F1F3F8; --shadow-sm: 0 4px 14px rgba(21, 25, 38, 0.04); --shadow-md: 0 10px 30px rgba(21, 25, 38, 0.06); --shadow-lg: 0 18px 44px rgba(21, 25, 38, 0.08); --gradient-bg: radial-gradient(circle at top right, rgba(31, 111, 235, 0.06), transparent 25%), linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%); --nav-active-bg: #1F6FEB; --nav-active-text: #FFFFFF; --nav-active-border: #1F6FEB; --nav-active-shadow: 0 10px 24px color-mix(in srgb, #1F6FEB 28%, transparent); --nav-active-ghost: color-mix(in srgb, #1F6FEB 10%, transparent); --hub-glow-color: #1F6FEB; --sat-color: #1F6FEB; --sat-color-text: #FFFFFF; --top-bg: #e6efff; --top-color: #1F6FEB; --top-border: rgba(31, 111, 235, 0.15); --menu-ripple-color: rgba(31, 111, 235, 0.35); --menu-ripple-glow: 0 0 20px #1F6FEB, inset 0 0 8px rgba(31,111,235,0.15); } /* ===== CTA: тёплый акцент (отделяем покупку от навигации) ===== */ [data-theme="light"], html[data-theme="light"] { --aq-cta-bg: var(--color-accent-warm); --aq-cta-bg-hover: var(--color-accent-warm-hover); } /* ===== ТЕМА-СПЕЦИФИЧНЫЕ ПРАВИЛА ===== */ /* logo filter */ [data-theme="light"] .aq-dynamic-logo { filter: brightness(0) saturate(100%) invert(37%) sepia(59%) saturate(4422%) hue-rotate(227deg) brightness(97%) contrast(97%); } /* logo orbit dot (Aqara-blue) */ html[data-theme="light"] .aq-logo-orbit-dot { background: radial-gradient(circle at 35% 35%, #fff 0%, #4D94FF 40%, #1F6FEB 100%); box-shadow: 0 0 0 3px color-mix(in srgb, #1F6FEB 10%, transparent), 0 0 14px #1F6FEB; } /* img blend */ [data-theme="light"] .aq-img-container img, [data-theme="light"] .ms2_product .w-full.aspect-square img { mix-blend-mode: multiply; } /* theme switcher dot (Aqara-blue) */ .aq-theme-btn[data-theme-set="light"] .aq-theme-btn-dot { background: #1F6FEB; } /* mobile-menu bg (Aqara-blue tint) */ [data-theme="light"] #mobile-menu { background: color-mix(in srgb, #ffffff 90%, #1F6FEB 10%) !important; } /* spotlight light */ html[data-theme="light"] .aq-spotlight-word span { animation: aq-letter-spotlight-light 5s cubic-bezier(0.25, 1, 0.5, 1) infinite; animation-delay: calc(var(--i) * 0.08s); } @keyframes aq-letter-spotlight-light { 0%, 22%, 100% { color: color-mix(in srgb, var(--color-text-faint) 85%, transparent 15%); text-shadow: none; } 8% { color: #000000; text-shadow: none; } } /* mobile-nav active (Aqara-blue) */ html[data-theme="light"] .mobile-nav-link.is-active { background-color: #1F6FEB !important; color: #fff !important; border-color: #1F6FEB !important; } /* Blueprint: светлая тема */ [data-theme="light"] .aq-menu-blueprint, html[data-theme="light"] .aq-menu-blueprint { color: var(--color-primary); opacity: 0.75; /* Подняли с 0.12 */ } html[data-theme="light"] { --aq-search-scrim: rgba(255, 255, 255, 0.20); --aq-search-scrim-pressed: rgba(255, 255, 255, 0.8); }