/* ========================================================================== AQARA KRD — BASE (структура, без цветов тем) Сценарная витрина с прайсингом · mobile-first · v2.0 -------------------------------------------------------------------------- Архитектура CSS (подключать в этом порядке): 1) aqara-krd-three-base.css ← ЭТОТ ФАЙЛ (reset, структура, компоненты) 2) aqara-krd-theme-warm.css ← токены темы (по умолчанию) 3) aqara-krd-theme-light.css ← токены темы 4) aqara-krd-theme-soft-dark.css ← токены темы Темы переключаются атрибутом data-theme на . Грузить можно все три (активна та, что в data-theme) либо только нужную. -------------------------------------------------------------------------- Здесь НЕТ ни одного цвета темы — только var(--...). Все --color-*, --nav-active-*, --sat-color, --hub-glow-color, --top-* и т.п. определены в theme-файлах. Компоненты витрины (крошки, прайсинг, sticky buy, bottom-sheet, группировка корзины) и доступность (EAA/WCAG) — здесь. -------------------------------------------------------------------------- ГЛОБАЛЬНАЯ КАРТА ОТВЕТСТВЕННОСТИ (что за что отвечает): • БАЗА (этот файл) — структура, размеры, анимации, hidden-стейты, скролл-стейт (.aq-is-scrolling), позиционирование орбиты/корзины/кнопки «наверх». Цвета — только через токены. • theme-warm/light/dark — СВЕТОВЫЕ ПАЛИТРЫ: значения всех --color-*, --sat-color, --hub-glow-color, --nav-active-*, --menu-ripple-*, blueprint-opacity. Один токен — три значения, по одному на тему. • app-bus.js — шина событий (контракт см. в файле). • app-global.js — тема (setTheme), мобильное меню, аккордеоны, шапка. • app-cards.js — ВЛАДЕЛЕЦ корзины: показ/скрытие/пульс/полёт, скролл-стейт, карусель категорий. • app-orbital.js — хаб/орбита, слои поиск/сценарии, кнопка «наверх». ПАЛИТРЫ ПО ТЕМАМ (бренд-навигация → CTA-покупка разведены намеренно): warm — тёплый интерьер, nav/CTA в #C98B5F, primary #426D9E. light — фирменный Aqara-blue #1F6FEB для nav/орбиты, CTA — тёплый #C98B5F. dark — холодный голубой #7FB0F6 для nav/орбиты, CTA — тёплый #D2A074. ========================================================================== */ /* ===== RESET / BASE + НЕТЕМНЫЕ ТОКЕНЫ ===== */ /* ========================================================================== AQARA KRD — THREE THEMES SYSTEM (CORRECTED & SYNCHRONIZED) Warm • Light • Soft-Dark v1.3 ========================================================================== */ /* ========================================================================== 1. НАСТРОЙКИ СБРОСА, БАЗОВЫХ СТИЛЕЙ И БЕЗОПАСНОСТИ ПЕРЕПОЛНЕНИЯ (RESET / BASE) ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; transition: background-color 0.3s ease, color 0.3s ease; -webkit-text-size-adjust: 100%; overflow-x: clip !important; } body { margin: 0; min-width: 320px; overflow-x: clip; } @supports not (overflow: clip) { html, body { overflow-x: hidden; } } body, button, input, textarea, select { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg, video, canvas { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { background: none; border: none; padding: 0; cursor: pointer; } input, textarea, select { font: inherit; } :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } ::selection { background: var(--color-primary-soft); color: var(--color-text); } /* ========================================================================== 2. ДИЗАЙН-ТОКЕНЫ СИСТЕМЫ (DESIGN TOKENS) ========================================================================== */ :root { --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-full: 9999px; --transition-base: 180ms ease; --transition-smooth: 350ms cubic-bezier(0.16, 1, 0.3, 1); } /* ===== НОВЫЕ ОБЩИЕ ТОКЕНЫ ВИТРИНЫ (v1.4) ===== */ :root { /* Высота шапки: уменьшаем, освобождаем вертикаль под крошки. Используется и в JS для scroll-margin, и в layout. */ --aq-header-h: 60px; --aq-header-h-scrolled: 52px; --aq-crumb-h: 38px; /* Прайсинг — цена это главная ось витрины, выносим в токены */ --aq-price-color: var(--color-text); /* самый контрастный текст темы */ --aq-price-from-color: var(--color-text-muted); /* префикс «от» / «проект от» */ --aq-price-weight: 800; /* Sticky buy bar */ --aq-buybar-h: 72px; --aq-buybar-bg: color-mix(in srgb, var(--color-bg) 82%, transparent); --aq-buybar-border: color-mix(in srgb, var(--color-border) 60%, transparent); /* Bottom-sheet */ --aq-sheet-radius: 22px; --aq-sheet-handle: color-mix(in srgb, var(--color-text-faint) 55%, transparent); /* CTA — самый сильный action темы. По умолчанию = тёплый акцент, чтобы коммерческое действие визуально отделялось от бренд-навигации. */ --aq-cta-bg: var(--color-accent-warm); --aq-cta-bg-hover: var(--color-accent-warm-hover); --aq-cta-text: #FFFFFF; } /* ========================================================================== 4. БАЗОВЫЕ УТИЛИТЫ И СТРУКТУРНЫЕ КЛАССЫ (BASE UTILITIES) ========================================================================== */ body.aq-theme-active { background: var(--gradient-bg) !important; color: var(--color-text) !important; } main { min-width: 0; overflow-x: visible !important; position: relative; z-index: 1; } main > .block.md\:hidden > .space-y-10 { padding-top: 8px; } .w-13 { width: 52px; } .h-13 { height: 52px; } .no-scrollbar::-webkit-scrollbar { display: none !important; } .no-scrollbar { -ms-overflow-style: none !important; scrollbar-width: none !important; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .animate-fade-in { animation: fadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards; } /* ========================================================================== 6. СТЕКЛЯННАЯ ШАПКА САЙТА (GLASS HEADER) ========================================================================== */ .glass-header { z-index: 100 !important; position: sticky; top: 0; isolation: isolate; border-bottom: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent) !important; box-shadow: none !important; background: color-mix(in srgb, var(--color-bg) 58%, transparent) !important; backdrop-filter: blur(22px) saturate(145%) !important; -webkit-backdrop-filter: blur(22px) saturate(145%) !important; transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease; } .glass-header::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: linear-gradient( to bottom, color-mix(in srgb, var(--color-surface) 28%, transparent) 0%, color-mix(in srgb, var(--color-surface) 14%, transparent) 46%, color-mix(in srgb, var(--color-surface) 5%, transparent) 100% ); opacity: 0.95; } .glass-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 28px; pointer-events: none; z-index: 0; background: linear-gradient( to bottom, color-mix(in srgb, var(--color-bg) 24%, transparent) 0%, color-mix(in srgb, var(--color-bg) 10%, transparent) 52%, transparent 100% ); opacity: 1; } .glass-header > * { position: relative; z-index: 1; } .glass-header.is-scrolled { background: color-mix(in srgb, var(--color-bg) 72%, transparent) !important; border-bottom: 1px solid color-mix(in srgb, var(--color-border) 68%, transparent) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important; backdrop-filter: blur(24px) saturate(150%) !important; -webkit-backdrop-filter: blur(24px) saturate(150%) !important; } /* ========================================================================== 5. ДИНАМИЧЕСКИЙ ЛОГОТИП И ОРБИТАЛЬНЫЙ СПУТНИК (LOGO / LOGO ORBIT) ========================================================================== */ .aq-dynamic-logo { transition: filter 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease; } .aq-logo-orbit-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 168px; height: 72px; isolation: isolate; } .aq-logo-orbit-wrap--tech { transform-style: preserve-3d; perspective: 800px; } .aq-logo-animated { position: relative; z-index: 4; filter: drop-shadow(0 10px 26px color-mix(in srgb, var(--color-primary) 16%, transparent)); animation: aq-logo-tech-float 6.2s cubic-bezier(0.37, 0, 0.2, 1) infinite; } @keyframes aq-logo-tech-float { 0%, 100% { transform: translate3d(0, 0, 0); } 25% { transform: translate3d(0.6px, -1px, 0); } 50% { transform: translate3d(0, -1.6px, 0); } 75% { transform: translate3d(-0.6px, -0.8px, 0); } } .aq-logo-orbit-glow { position: absolute; inset: 50% auto auto 50%; width: 108px; height: 38px; transform: translate(-50%, -50%); border-radius: 999px; background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 16%, transparent) 0%, transparent 70%); filter: blur(12px); opacity: 0.7; z-index: 1; animation: aq-logo-glow-breathe 6.2s ease-in-out infinite; } @keyframes aq-logo-glow-breathe { 0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.96); } 50% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.05); } } .aq-logo-orbit-satellite { position: absolute; top: 48%; left: 26%; z-index: 5; pointer-events: none; width: 0; height: 0; transform: rotateX(68deg) rotateY(-14deg); transform-style: preserve-3d; } .aq-logo-orbit-dot { position: absolute; width: 9px; height: 9px; border-radius: 999px; transform: translate(-50%, -50%); animation: aq-ellipse-orbit 4.2s linear infinite; } @keyframes aq-ellipse-orbit { 0% { transform: rotateZ(360deg) translateX(36px) rotateZ(-360deg) scale(1); } 50% { transform: rotateZ(180deg) translateX(36px) rotateZ(-180deg) scale(0.7); opacity: 0.4; } 100% { transform: rotateZ(0deg) translateX(36px) rotateZ(0deg) scale(1); } } /* ========================================================================== 7. СИСТЕМА МЕНЮ — ЕДИНОЕ АКТИВНОЕ СОСТОЯЯНИЕ (MENU SYSTEM) ========================================================================== */ .aq-menu-link, .aq-nav-item, .mobile-nav-link { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, opacity 0.25s ease; } .aq-menu-link, .mobile-nav-link { color: var(--color-text-muted) !important; border: 1px solid transparent !important; } #aq-mob-nav .aq-nav-item { position: relative; color: var(--color-text-muted) !important; opacity: 0.8; padding-left: 0; } #aq-mob-nav .aq-nav-item:hover { color: var(--color-text) !important; opacity: 1; transform: translateX(6px); } #aq-mob-nav .aq-nav-item.is-active { color: var(--color-text) !important; opacity: 1 !important; transform: translateX(20px); } #aq-mob-nav .aq-nav-item.is-active::before { content: ""; position: absolute; left: -20px; top: 15%; width: 4px; height: 70%; border-radius: var(--radius-full); background: var(--nav-active-bg); box-shadow: 0 0 8px var(--nav-active-bg), 0 0 18px color-mix(in srgb, var(--nav-active-bg) 60%, transparent), 0 0 28px color-mix(in srgb, var(--nav-active-bg) 30%, transparent); animation: aq-neon-track-pulse 2s ease-in-out infinite; display: inline-block; vertical-align: middle; } @keyframes aq-neon-track-pulse { 0%, 100% { opacity: 0.8; filter: brightness(1); } 50% { opacity: 1; filter: brightness(1.2); } } /* ========================================================================== 8. МОБИЛЬНЫЙ КАТАЛОГ И СТЕКЛЯННАЯ ПАНЕЛЬ КАТЕГОРИЙ (MOBILE CATALOG) ========================================================================== */ .mobile-section-block { min-width: 0; scroll-margin-top: 96px !important; } .glass-subcategory { background-color: color-mix(in srgb, var(--color-bg) 86%, transparent) !important; backdrop-filter: blur(22px) saturate(135%) !important; -webkit-backdrop-filter: blur(22px) saturate(135%) !important; border-top: 1px solid color-mix(in srgb, var(--color-border) 18%, transparent) !important; box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.03) !important; } .mobile-nav-link { background-color: color-mix(in srgb, var(--color-surface) 62%, transparent) !important; color: var(--color-text-muted) !important; border: 1px solid transparent !important; transform: translateY(0) !important; box-shadow: none !important; } .mobile-nav-link.is-active { transform: translateY(0) !important; } /* ========================================================================== 9. СИНХРОНИЗИРОВАНО: КАРТОЧКИ ТОВАРОВ БЕЗ ЛИШНИХ ВНУТРЕННИХ РАМОК ========================================================================== */ .ms2_product, .aq-dark-card { background-color: var(--color-card-bg) !important; border: 1px solid var(--color-border) !important; box-shadow: var(--shadow-sm) !important; border-radius: 20px; color: var(--color-text) !important; transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; padding: 8px; /* Оптимальный компактный внутренний отступ всей карточки */ } /* Контейнер картинок — теперь полностью сквозной и без внутренних рамок */ .aq-img-container, .ms2_product .w-full.aspect-square, div[class*="aspect-square"] { background-color: transparent !important; border: none !important; /* Убираем любые остаточные бордюры */ border-radius: 16px !important; overflow: hidden !important; padding: 0 !important; /* Убираем паддинг, чтобы картинка росла */ } /* Обеспечиваем максимальный размер графики внутри контейнера */ .aq-img-container img, .ms2_product .w-full.aspect-square img, .main-product-img { width: 100% !important; height: 100% !important; object-fit: contain !important; border-radius: 16px !important; } /* ========================================================================== 10. ПЕРЕКЛЮЧАТЕЛЬ ТЕМ ОФОРМЛЕНИЯ (THEME SWITCHER) ========================================================================== */ .aq-theme-switcher { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--color-border); border-radius: 9999px; background: var(--color-surface-soft); box-shadow: var(--shadow-sm); } .aq-theme-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 9999px; color: var(--color-text-faint); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .aq-theme-btn:hover { color: var(--color-text); } .aq-theme-btn.is-active { color: var(--color-text) !important; background: var(--color-surface) !important; border-color: var(--color-border) !important; } .aq-theme-btn-dot { width: 6px; height: 6px; border-radius: 50%; } .aq-theme-switcher--micro { gap: 3px; padding: 3px; width: 100%; max-width: 214px; } .aq-theme-switcher--micro .aq-theme-btn { height: 28px; flex: 1; justify-content: center; font-size: 9px; padding: 0; } .aq-theme-switcher--micro .aq-theme-btn-dot { width: 5px; height: 5px; } /* ========================================================================== 11. МОБИЛЬНОЕ ВЫЕЗЖАЮЩЕЕ МЕНЮ (MOBILE DRAWER) ========================================================================== */ #mobile-menu { z-index: 150 !important; backdrop-filter: blur(20px) saturate(140%) !important; -webkit-backdrop-filter: blur(20px) saturate(140%) !important; } /* ========================================================================== 12. АНИМАЦИИ, ЭФФЕКТЫ ХАБА, РАДИАЛЬНЫЕ ВОЛНЫ И ОРБИТА (VISUAL EFFECTS) ========================================================================== */ #aq-hub-neon-cloud { fill: var(--hub-glow-color); mix-blend-mode: screen; } .orbital-item button { background-color: var(--sat-color) !important; color: var(--sat-color-text) !important; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px color-mix(in srgb, var(--sat-color) 30%, transparent); transition: background-color 0.2s ease, transform 0.2s ease; } .orbital-item button:hover { transform: scale(1.08); } #btn-scroll-top { background-color: var(--top-bg) !important; color: var(--top-color) !important; border: 1px solid var(--top-border) !important; } #aq-orbital-container.is-active #aq-hub-neon-cloud { opacity: 0.6; animation: hub-cloud-pulse 2.2s infinite ease-in-out; } @keyframes hub-cloud-pulse { 0%, 100% { opacity: 0.45; transform: scale(0.96); transform-origin: 400px 400px; } 50% { opacity: 0.75; transform: scale(1.14); transform-origin: 400px 400px; } } #mobile-menu-panel { position: relative; isolation: isolate; } /* ПРИМЕЧАНИЕ: рабочее определение .aq-ripple-wave и его keyframes находятся ниже (раздел 15, ~стр. 640). Прежний дубль с aq-menu-sonic-slow удалён как мёртвый — он полностью перекрывался. */ .orbital-item[data-action="search"] { --angle: -90deg; --radius: 94px; } .orbital-item[data-action="scenarios"] { --angle: -135deg; --radius: 100px; } .orbital-item[data-action="projects"] { --angle: -180deg; --radius: 94px; } .orbital-item[data-action="filters"] { --angle: -135deg; --radius: 100px; } .orbital-item[data-action="constructor"] { --angle: -180deg; --radius: 94px; } .orbital-item[data-action="main-menu"] { --angle: -225deg; --radius: 82px; } .orbital-item { transform: translate(0, 0) scale(0.5); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease; will-change: transform, opacity; } #aq-orbital-container.is-active .orbital-item { opacity: 1; transform: translate(calc(cos(var(--angle)) * var(--radius)), calc(sin(var(--angle)) * var(--radius))) scale(1); pointer-events: auto; } /* ========================================================================== 13. ПОДСВЕТКА И ЭФФЕКТЫ БУКВ И СЛОВ (SPOTLIGHT EFFECT) ========================================================================== */ .aq-spotlight-word span { position: relative; color: color-mix(in srgb, var(--color-text-faint) 85%, transparent 15%); animation: aq-letter-spotlight 5s cubic-bezier(0.25, 1, 0.5, 1) infinite; animation-delay: calc(var(--i) * 0.08s); will-change: color, text-shadow; } @keyframes aq-letter-spotlight { 0%, 22%, 100% { color: color-mix(in srgb, var(--color-text-faint) 85%, transparent 15%); text-shadow: none; } 4% { color: #FFFFFF; } 8% { color: #FFFFFF; text-shadow: 0 0 4px var(--color-primary), 0 0 12px var(--color-primary); } } /* ========================================================================== 14. ИКОНКА БУРГЕРА (WIFI-STYLE) И АККОРДЕОНЫ ПОДВАЛА (INTERACTIVE DRAWER / ICONS) ========================================================================== */ .wifi-icon-box { position: relative; width: 24px; height: 24px; } .wifi-svg { width: 100%; height: 100%; display: block; overflow: visible; } .wifi-arc-1, .wifi-arc-2, .wifi-arc-3, .wifi-dot { transform-origin: center; will-change: transform, opacity; } .wifi-arc-1 { transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.20s ease; } .wifi-arc-2 { transition: transform 0.30s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.18s ease; } .wifi-arc-3 { transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.16s ease !important; } .wifi-dot { transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.14s ease; } .x-icon { position: absolute; top: 50%; left: 50%; display: block; line-height: 1; font-size: 28px; color: currentColor; opacity: 0; transform: translate(-50%, -50%) rotate(-110deg) scale(0.72); transform-origin: center; transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.18s ease; pointer-events: none; will-change: transform, opacity; } .burger-active .wifi-arc-1 { transform: scale(0.16) translateY(12px); opacity: 0; } .burger-active .wifi-arc-2 { transform: scale(0.30) translateY(7px); opacity: 0; } .burger-active .wifi-arc-3 { transform: scale(0.46) translateY(3px); opacity: 0; } .burger-active .wifi-dot { transform: scale(0); opacity: 0; } .burger-active .x-icon { opacity: 1 !important; transform: translate(-50%, -50%) rotate(0deg) scale(1) !important; } .burger-closing .wifi-arc-1, .burger-closing .wifi-arc-2, .burger-closing .wifi-arc-3, .burger-closing .wifi-dot { opacity: 0; } .burger-closing .wifi-dot { transform: scale(0); } .burger-closing .x-icon { opacity: 1; transform: translate(-50%, -50%) rotate(90deg) scale(0.92); } .footer-accordion .accordion-content { transition: opacity 0.25s ease; } .footer-accordion.accordion-active .node-line-1 { width: 8px; transform: translateX(-4px) rotate(45deg); } .footer-accordion.accordion-active .node-line-2 { width: 8px; transform: translateX(4px) rotate(-45deg); } .footer-accordion.accordion-active .node-center-dot { opacity: 1; transform: scale(1); } .footer-accordion .node-line-1, .footer-accordion .node-line-2 { width: 10px; top: 50%; } .footer-accordion .node-line-1 { left: calc(50% - 6px); transform: translateY(-50%) rotate(0deg); } .footer-accordion .node-line-2 { right: calc(50% - 6px); transform: translateY(-50%) rotate(0deg); } .footer-accordion .node-center-dot { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.5); } @media (min-width: 768px) { .footer-accordion .accordion-content { display: block !important; } } /* ========================================================================== 15. МЕДИА-ЗАПРОСЫ И УПРАВЛЕНИЕ АДАПТИВНОСТЬЮ (MEDIA QUERIES) ========================================================================== */ @media (max-width: 1023.98px) { .glass-header { border: none !important; box-shadow: none !important; background: color-mix(in srgb, var(--color-bg) 28%, transparent) !important; backdrop-filter: blur(18px) saturate(140%) !important; -webkit-backdrop-filter: blur(18px) saturate(140%) !important; } .glass-header::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: linear-gradient( to bottom, color-mix(in srgb, var(--color-surface) 18%, transparent) 0%, color-mix(in srgb, var(--color-surface) 8%, transparent) 48%, transparent 100% ); opacity: 0.9; } .glass-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 18px; pointer-events: none; z-index: 0; background: linear-gradient(to bottom, color-mix(in srgb, var(--color-bg) 14%, transparent) 0%, transparent 100%); opacity: 0.65; } .glass-header.is-scrolled { background: color-mix(in srgb, var(--color-bg) 36%, transparent) !important; border: none !important; box-shadow: none !important; } .glass-subcategory { border: none !important; box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.04) !important; background: color-mix(in srgb, var(--color-bg) 38%, transparent) !important; backdrop-filter: blur(18px) saturate(135%) !important; -webkit-backdrop-filter: blur(18px) saturate(135%) !important; } .mobile-nav-link { background-color: color-mix(in srgb, var(--color-surface) 58%, transparent) !important; } #mobile-menu { background: color-mix(in srgb, var(--color-bg) 72%, transparent) !important; backdrop-filter: blur(22px) saturate(135%) !important; -webkit-backdrop-filter: blur(22px) saturate(135%) !important; } #aq-hub-neon-cloud { opacity: 0.34 !important; } main > .block.md\:hidden > .space-y-10 { padding-top: 6px !important; padding-bottom: 90px !important; } } @media (max-width: 767px) { .mobile-section-block { scroll-margin-top: 96px; content-visibility: auto; contain-intrinsic-size: 1px 420px; } #aq-orbital-container { --orbital-safe-bottom: max(124px, calc(env(safe-area-inset-bottom) + 108px)); bottom: var(--orbital-safe-bottom); } } #mobile-menu-panel { touch-action: manipulation; overflow: hidden; } .aq-ripple-wave { position: absolute; width: 10px; height: 10px; border-radius: 50%; pointer-events: none; z-index: 2; opacity: 0.75; transform: translate(-50%, -50%) scale(1); border: 2px solid var(--menu-ripple-color); box-shadow: var(--menu-ripple-glow); will-change: transform, opacity; animation: aq-ripple-animation 0.65s cubic-bezier(0.1, 0.5, 0.2, 1) forwards; } @keyframes aq-ripple-animation { 0% { transform: translate(-50%, -50%) scale(1); opacity: 0.75; } 50% { opacity: 0.4; } 100% { transform: translate(-50%, -50%) scale(22); opacity: 0; border-width: 1px; } } /* ПРИМЕЧАНИЕ: дубли #aq-orbital-container.is-active .orbital-item, .mobile-nav-link / .w-13 / .h-13 / .no-scrollbar удалены отсюда — канонические определения см. в разделах 4, 8 и 12 выше. */ /* ========================================================================== 16. ОРБИТАЛЬНАЯ КОРЗИНА: ПОЗИЦИОНИРОВАНИЕ, HIDDEN-STATE И UX ========================================================================== */ /* Источник истины видимости — атрибут data-cart-empty (ставится из JS) */ #orbital-cart[data-cart-empty="1"] { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: scale(0) !important; transition: none !important; /* без "выстреливания" пустой корзины при загрузке */ } #orbital-cart[data-cart-empty="0"] { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: scale(1); } /* Базовое поведение кружка корзины */ #orbital-cart { background-color: var(--sat-color) !important; color: var(--sat-color-text) !important; z-index: 160 !important; box-shadow: 0 8px 22px color-mix(in srgb, var(--sat-color) 34%, transparent), 0 4px 12px rgba(0, 0, 0, 0.10) !important; transition: opacity 0.25s ease-in-out, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease !important; will-change: transform, opacity; } #orbital-cart:hover { transform: scale(1.06); } #orbital-cart:active { transform: scale(0.94); } #orbital-cart svg { color: var(--sat-color-text) !important; } /* Бейдж с числом товаров */ #orbital-cart-count { background: var(--color-text) !important; color: var(--color-bg) !important; box-shadow: var(--shadow-sm); pointer-events: none; } /* Сдвиг корзины вверх при раскрытии хаба */ #orbital-cart.is-shifted { transform: translateY(-72px) scale(0.92); } #orbital-cart.is-shifted:hover { transform: translateY(-72px) scale(0.98); } /* Пульс корзины при получении товара */ .aq-cart-pulse { animation: aq-cart-pulse 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes aq-cart-pulse { 0% { transform: scale(1); } 35% { transform: scale(1.22); } 60% { transform: scale(0.94); } 100% { transform: scale(1); } } #orbital-cart.is-shifted.aq-cart-pulse { animation: aq-cart-pulse-shifted 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes aq-cart-pulse-shifted { 0% { transform: translateY(-72px) scale(0.92); } 35% { transform: translateY(-72px) scale(1.12); } 60% { transform: translateY(-72px) scale(0.86); } 100% { transform: translateY(-72px) scale(0.92); } } /* Летящая частица "товар в корзину" */ .aq-fly-particle { position: fixed; z-index: 99999 !important; width: 46px; height: 46px; margin-left: -23px; margin-top: -23px; border-radius: 14px; overflow: hidden; pointer-events: none; background: var(--color-card-bg); box-shadow: var(--shadow-md); will-change: transform, opacity; animation: aq-fly-to-cart 0.68s cubic-bezier(0.25, 1, 0.5, 1) forwards; } .aq-fly-particle__img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; } .aq-fly-particle--dot { width: 18px; height: 18px; margin-left: -9px; margin-top: -9px; border-radius: 50%; background: var(--sat-color); box-shadow: 0 0 14px color-mix(in srgb, var(--sat-color) 60%, transparent); } @keyframes aq-fly-to-cart { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 45% { transform: translate(var(--fly-mid-point-dx), var(--fly-mid-point-dy)) scale(0.9); opacity: 1; } 100% { transform: translate(var(--fly-target-dx), var(--fly-target-dy)) scale(0.2); opacity: 0.2; } } @media (prefers-reduced-motion: reduce) { .aq-fly-particle { display: none !important; } .aq-cart-pulse { animation: none !important; } } /* ========================================================================== 17. ДИНАМИЧЕСКИЙ СКРОЛЛ-СТЕЙТ (ACTIVE SCROLLING STATE) ========================================================================== */ #aq-orbital-container { z-index: 140 !important; } #btn-scroll-top { z-index: 135 !important; } /* Плавность для синхронного затухания с орбитой (см. правило aq-is-scrolling ниже). Кривая и тайминги совпадают с #orbital-cart, чтобы кнопки гасли как одно целое. */ #orbital-scroll-top, #btn-scroll-top { transition: opacity 0.25s ease-in-out, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important; } body.aq-is-scrolling #aq-orbital-container:not(.is-active) { opacity: 0.55 !important; /* transform: scale(0.85) !important;*/ } /* Кнопка «наверх» гаснет СИНХРОННО с орбитой при активном скролле. Её собственный показ/скрытие (scrollY>400) задаёт JS через opacity-0/scale-0/pointer-events-none — это правило лишь приглушает уже видимую кнопку в унисон с #aq-orbital-container, не ломая логику. */ body.aq-is-scrolling #orbital-scroll-top:not(.opacity-0), body.aq-is-scrolling #btn-scroll-top { opacity: 0.55 !important; /* transform: scale(0.85) !important;*/ } /* В эффектах скролла участвует только непустая корзина. Поведение как у сателлитов хаба: мягко приглушаем (0.55), НЕ прячем и НЕ отключаем клики — корзина остаётся доступной при прокрутке. */ body.aq-is-scrolling #orbital-cart[data-cart-empty="0"]:not(.is-shifted) { opacity: 0.55 !important; } /* Сдвинутая корзина (раскрытый хаб) — тоже как сателлиты: приглушаем, не прячем. */ body.aq-is-scrolling #orbital-cart[data-cart-empty="0"].is-shifted { opacity: 0.55 !important; } /* Раскрытый хаб на скролле: сателлиты ОСТАЮТСЯ на местах и кликабельны (пользователь раскрыл станцию — он ей пользуется). Только мягко гасим, чтобы не мешали читать. Без transform — иначе позиции "уезжают". */ body.aq-is-scrolling #aq-orbital-container.is-active .orbital-item { opacity: 0.55 !important; } body.aq-is-scrolling #aq-orbital-container.is-active #aq-hub-neon-cloud { opacity: 0.3 !important; } body.aq-is-scrolling #aq-orbital-container.is-active { opacity: 0.55 !important; /* без scale: при открытом хабе масштаб контейнера двигает сателлиты */ } /* ========================================================================== КОМПОНЕНТЫ ВИТРИНЫ v1.4: крошки, прайсинг, sticky buy, bottom-sheet, группировка корзины, доступность, PDP-скролл, desktop-оговорки, подавление корзины на fullscreen-слоях. ========================================================================== */ /* ========================================================================== B. УМЕНЬШЕННАЯ ШАПКА + ХЛЕБНЫЕ КРОШКИ -------------------------------------------------------------------------- Шапку по структуре не трогаем (требование) — только высота. Под ней — тонкая sticky-строка крошек: возвращает «где я» без навигации маркетплейса. На mobile это критичный вертикальный космос. ========================================================================== */ /* Сжатие высоты шапки — мягко, без слома внутренней раскладки */ .glass-header { min-height: var(--aq-header-h); } .glass-header.is-scrolled { min-height: var(--aq-header-h-scrolled); } @media (max-width: 767px) { .glass-header { min-height: var(--aq-header-h); } } /* Контейнер крошек — липнет сразу под шапкой */ .aq-breadcrumbs { position: sticky; top: var(--aq-header-h); z-index: 95; /* ниже шапки (100), выше контента */ display: flex; align-items: center; gap: 6px; min-height: var(--aq-crumb-h); padding: 0 16px; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; background: color-mix(in srgb, var(--color-bg) 70%, transparent); backdrop-filter: blur(16px) saturate(135%); -webkit-backdrop-filter: blur(16px) saturate(135%); border-bottom: 1px solid color-mix(in srgb, var(--color-border) 40%, transparent); transition: top 0.3s ease, background-color 0.3s ease; } .aq-breadcrumbs::-webkit-scrollbar { display: none; } .glass-header.is-scrolled ~ .aq-breadcrumbs, .is-scrolled + .aq-breadcrumbs { top: var(--aq-header-h-scrolled); } .aq-crumb { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; color: var(--color-text-muted); flex: 0 0 auto; transition: color 0.2s ease; } .aq-crumb:hover { color: var(--color-text); } .aq-crumb[aria-current="page"] { color: var(--color-text); font-weight: 700; } /* Разделитель «/» — chevron через ::after, не текстом (легче для screen reader) */ .aq-crumb:not(:last-child)::after { content: ""; width: 6px; height: 6px; margin: 0 8px; border-right: 1.5px solid var(--color-text-faint); border-bottom: 1.5px solid var(--color-text-faint); transform: rotate(-45deg); flex: 0 0 auto; } /* На скролле крошки слегка тускнеют вместе с орбитой — контент важнее controls */ body.aq-is-scrolling .aq-breadcrumbs { opacity: 0.55; } .aq-breadcrumbs { transition: top 0.3s ease, opacity 0.25s ease, background-color 0.3s ease; } /* Контент под двумя липкими слоями не должен прятаться под якорный скролл */ .mobile-section-block, [id].aq-scroll-anchor { scroll-margin-top: calc(var(--aq-header-h) + var(--aq-crumb-h) + 12px) !important; } /* ========================================================================== C. ПРАЙСИНГ ВИТРИНЫ — ГЛАВНАЯ ЦЕННОСТЬ -------------------------------------------------------------------------- Покупатель должен понимать ПОРЯДОК ЦЕН на готовый сценарий до клика. Цепочка: каталог (проект от N) → раздел (диапазон) → PDP (состав+сумма) → корзина (группировка по сценариям). ========================================================================== */ /* --- Базовый ценник (единый вид по всему сайту) --- */ .aq-price { font-weight: var(--aq-price-weight); color: var(--aq-price-color); font-variant-numeric: tabular-nums; /* цифры не «прыгают» при изменении */ letter-spacing: -0.01em; line-height: 1.1; } .aq-price__from { font-size: 0.7em; font-weight: 600; color: var(--aq-price-from-color); margin-right: 4px; } .aq-price__cur { font-size: 0.85em; font-weight: 700; margin-left: 2px; } .aq-price--lg { font-size: 22px; } /* PDP */ .aq-price--md { font-size: 17px; } /* раздел / заголовок сценария */ .aq-price--sm { font-size: 15px; } /* карточка в каталоге */ /* --- Цена сценария в заголовке секции каталога: «проект от N ₽» --- */ .aq-scenario-price { display: inline-flex; align-items: baseline; gap: 4px; padding: 4px 12px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--color-surface) 70%, transparent); border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent); } .aq-scenario-price .aq-price { font-size: 15px; } /* --- Карточка-блок сценария в каталоге: только ценовое, без мини-PDP --- Док: остаются изображение, короткое название, артикул, цена, маленькая кнопка добавления. Глушим лишнее, если оно случайно отрендерится. */ .ms2_product .aq-card-price { margin-top: auto; } /* цена прижата вниз карточки */ .ms2_product .aq-card-badges > *:nth-child(n+2) { display: none; } /* max 1 бейдж */ /* Маленькая кнопка добавления в карточке каталога */ .aq-card-add { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: var(--radius-full); background: var(--aq-cta-bg); color: var(--aq-cta-text); font-size: 13px; font-weight: 700; box-shadow: 0 4px 12px color-mix(in srgb, var(--aq-cta-bg) 28%, transparent); transition: background-color 0.2s ease, transform 0.18s ease, box-shadow 0.2s ease; } .aq-card-add:hover { background: var(--aq-cta-bg-hover); transform: translateY(-1px); } .aq-card-add:active { transform: scale(0.96); } /* --- PDP: блок «что входит в сценарий» с подсчётом суммы --- */ .aq-scenario-kit { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--color-surface) 50%, transparent); padding: 14px 16px; } .aq-scenario-kit__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--color-divider); } .aq-scenario-kit__row:last-of-type { border-bottom: none; } .aq-scenario-kit__name { color: var(--color-text); font-size: 14px; font-weight: 600; } .aq-scenario-kit__qty { color: var(--color-text-faint); font-size: 12px; } .aq-scenario-kit__total { display: flex; align-items: baseline; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1.5px solid var(--color-border); } .aq-scenario-kit__total-label { font-size: 14px; font-weight: 700; color: var(--color-text); } /* ========================================================================== D. STICKY BUY BAR (PDP) -------------------------------------------------------------------------- Док: нижняя sticky-панель, визуально отделена от контента, главный приоритет, только самое важное — цена + миниатюра/название + основной CTA. ========================================================================== */ .aq-buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 130; /* над контентом, под мобильным меню (150) */ display: flex; align-items: center; gap: 12px; min-height: var(--aq-buybar-h); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--aq-buybar-bg); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border-top: 1px solid var(--aq-buybar-border); box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.08); transform: translateY(0); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); } /* Прячется только когда уходит из зоны (управляется классом из JS) */ .aq-buybar.is-hidden { transform: translateY(120%); } .aq-buybar__thumb { width: 44px; height: 44px; border-radius: var(--radius-md); object-fit: contain; background: var(--color-surface-soft); flex: 0 0 auto; } .aq-buybar__info { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; } .aq-buybar__name { font-size: 13px; font-weight: 600; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .aq-buybar__price { font-size: 18px; } .aq-buybar__cta { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: var(--radius-full); background: var(--aq-cta-bg); color: var(--aq-cta-text); font-size: 15px; font-weight: 800; box-shadow: 0 6px 18px color-mix(in srgb, var(--aq-cta-bg) 34%, transparent); transition: background-color 0.2s ease, transform 0.18s ease; } .aq-buybar__cta:hover { background: var(--aq-cta-bg-hover); } .aq-buybar__cta:active { transform: scale(0.97); } /* Контент PDP не должен прятаться под фиксированной панелью */ body.aq-pdp main { padding-bottom: calc(var(--aq-buybar-h) + env(safe-area-inset-bottom) + 16px); } /* ========================================================================== E. BOTTOM-SHEET ФИЛЬТР (РАЗДЕЛ) -------------------------------------------------------------------------- Док: расширенный фильтр в разделе открывается bottom-sheet, не тяжёлой страницей. mFilter2 темплейты tpl.mFilter2.aqara.* рендерятся внутрь. ========================================================================== */ .aq-sheet-backdrop { position: fixed; inset: 0; z-index: 170; background: color-mix(in srgb, #000 42%, transparent); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .aq-sheet-backdrop.is-open { opacity: 1; pointer-events: auto; } .aq-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 171; max-height: 85vh; display: flex; flex-direction: column; background: var(--color-bg); border-radius: var(--aq-sheet-radius) var(--aq-sheet-radius) 0 0; box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.22); transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); padding-bottom: env(safe-area-inset-bottom); } .aq-sheet.is-open { transform: translateY(0); } /* «Хватка» сверху — индикатор перетаскивания */ .aq-sheet__handle { width: 40px; height: 4px; margin: 10px auto 4px; border-radius: var(--radius-full); background: var(--aq-sheet-handle); flex: 0 0 auto; } .aq-sheet__header { display: flex; align-items: center; justify-content: space-between; padding: 8px 18px 12px; border-bottom: 1px solid var(--color-divider); } .aq-sheet__title { font-size: 16px; font-weight: 800; color: var(--color-text); } .aq-sheet__body { overflow-y: auto; padding: 16px 18px; flex: 1 1 auto; } .aq-sheet__footer { display: flex; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--color-divider); background: color-mix(in srgb, var(--color-surface) 50%, transparent); } .aq-sheet__apply { flex: 1 1 auto; height: 48px; border-radius: var(--radius-full); background: var(--color-primary); color: #fff; font-weight: 800; font-size: 15px; transition: background-color 0.2s ease, transform 0.18s ease; } .aq-sheet__apply:active { transform: scale(0.98); } .aq-sheet__reset { flex: 0 0 auto; height: 48px; padding: 0 18px; border-radius: var(--radius-full); border: 1px solid var(--color-border); color: var(--color-text-muted); font-weight: 700; font-size: 14px; } /* Быстрые чипы-подтипы в разделе (2–4 макс — правило дока) */ .aq-chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0; scrollbar-width: none; } .aq-chips::-webkit-scrollbar { display: none; } .aq-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: var(--radius-full); border: 1px solid var(--color-border); background: color-mix(in srgb, var(--color-surface) 55%, transparent); color: var(--color-text-muted); font-size: 13px; font-weight: 600; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .aq-chip.is-active { background: var(--nav-active-ghost); color: var(--color-text); border-color: color-mix(in srgb, var(--nav-active-bg) 50%, transparent); } /* ========================================================================== F. КОРЗИНА — ГРУППИРОВКА ПО СЦЕНАРИЯМ -------------------------------------------------------------------------- Корзина для заказа проекта → группируем по сценариям, а не плоский список. ========================================================================== */ .aq-cart-group { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-card-bg); margin-bottom: 12px; overflow: hidden; } .aq-cart-group__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: color-mix(in srgb, var(--color-surface) 60%, transparent); border-bottom: 1px solid var(--color-divider); } .aq-cart-group__title { font-size: 14px; font-weight: 800; color: var(--color-text); } .aq-cart-group__meta { font-size: 12px; color: var(--color-text-faint); } .aq-cart-group__sum { font-size: 15px; font-weight: 800; color: var(--aq-price-color); } /* ========================================================================== G. ДОСТУПНОСТЬ (EAA / WCAG 2.1 AA) — ЭТО ЗАКОН ЕС С 28.06.2025 -------------------------------------------------------------------------- Усиливаем focus-видимость и сохраняем цену читаемой. База уже даёт :focus-visible — здесь делаем его заметнее и добавляем skip-link. ========================================================================== */ :focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; border-radius: 4px; } /* CTA и интерактив получают чёткий focus-ринг поверх любого фона */ .aq-card-add:focus-visible, .aq-buybar__cta:focus-visible, .aq-sheet__apply:focus-visible, .aq-chip:focus-visible, .aq-crumb:focus-visible { outline: 3px solid var(--color-text); outline-offset: 2px; } /* Skip-link для клавиатуры/скринридеров */ .aq-skip-link { position: absolute; left: 8px; top: -48px; z-index: 200; padding: 10px 16px; border-radius: var(--radius-md); background: var(--color-primary); color: #fff; font-weight: 700; transition: top 0.2s ease; } .aq-skip-link:focus { top: 8px; } /* Reduced-motion: гасим декоративные пульсации (база гасит fly-particle) */ @media (prefers-reduced-motion: reduce) { .aq-buybar, .aq-sheet, .aq-sheet-backdrop { transition: none !important; } #aq-mob-nav .aq-nav-item.is-active::before { animation: none !important; } .aq-scenario-price, .aq-chip { transition: none !important; } } /* ========================================================================== H. ПОВЕДЕНИЕ НА СКРОЛЛЕ — PDP-СПЕЦИФИКА -------------------------------------------------------------------------- Док: на PDP «пилюля» уходит в орбиту при скролле, орбита становится навигацией по странице, sticky buy всегда доступен. Здесь только CSS-хуки под состояния (логику ставит JS). ========================================================================== */ .aq-pdp-pill { transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); } body.aq-pdp.aq-pill-docked .aq-pdp-pill { opacity: 0; transform: translateY(-10px) scale(0.9); pointer-events: none; } /* Sticky buy НЕ участвует в общем затухании controls на скролле — он всегда доступен (правило дока). Защищаем от .aq-is-scrolling. */ body.aq-is-scrolling .aq-buybar:not(.is-hidden) { opacity: 1 !important; transform: translateY(0) !important; } /* ========================================================================== I. DESKTOP-ОГОВОРКИ -------------------------------------------------------------------------- Витрина mobile-first, но на ≥768px sticky buy и bottom-sheet не нужны в мобильном виде — фильтр становится боковым, buybar инлайнится. ========================================================================== */ @media (min-width: 768px) { .aq-buybar { position: static; border-radius: var(--radius-lg); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); padding: 14px 18px; } body.aq-pdp main { padding-bottom: 0; } .aq-breadcrumbs { top: var(--aq-header-h); } /* Bottom-sheet на десктопе ведёт себя как обычная панель, не выезжает снизу */ .aq-sheet { max-width: 420px; left: auto; right: 24px; bottom: 24px; border-radius: var(--aq-sheet-radius); max-height: 78vh; } } /* ========================================================================== J. ПОДАВЛЕНИЕ КОРЗИНЫ НА FULLSCREEN-СЛОЯХ (меню / поиск) -------------------------------------------------------------------------- Ставится из JS (app-orbital.js / app-global.js) классом aq-cart-suppressed. Уважает источник истины data-cart-empty: пустую корзину и так не видно. ========================================================================== */ #orbital-cart.aq-cart-suppressed { opacity: 0 !important; transform: scale(0) !important; pointer-events: none !important; transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; } /* ========================================================================== MOBILE MENU — AQARA HUB BLUEPRINT (STRUCTURE) ========================================================================== */ .aq-menu-blueprint { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; user-select: none; transition: color 0.3s ease, opacity 0.3s ease; } .aq-menu-blueprint__svg { display: block; width: 100%; height: 100%; } /* ========================================================================== K. SECTION PAGE — КОНТЕЙНЕР, HERO, СЕТКА (responsive desktop → ultrawide) -------------------------------------------------------------------------- Крошки (.aq-breadcrumbs/.aq-crumb), цена (.aq-price), кнопка (.aq-card-add), чипы (.aq-chips/.aq-chip), карточка (.ms2_product) — НЕ здесь, это база/тема. Здесь только то, чего в базе нет: контейнер раздела, hero-композиция, раскладка product-grid и ecosystem на широких экранах. ========================================================================== */ /* ---------- Контейнер: композиция по ширинам, не один max-width ---------- */ .aq-sec-container { width: 100%; margin-inline: auto; padding-inline: 1rem; max-width: 1700px; } @media (min-width: 1024px) { .aq-sec-container { padding-inline: 2rem; } } @media (min-width: 1920px) { .aq-sec-container { max-width: 1760px; padding-inline: 2.5rem; } } @media (min-width: 2560px) { .aq-sec-container { max-width: 2360px; padding-inline: 3rem; } } @media (min-width: 3840px) { .aq-sec-container { max-width: 92vw; padding-inline: 4rem; } } @media (min-width: 5120px) { .aq-sec-container { max-width: 90vw; padding-inline: 5rem; } } /* ---------- Hero: сильнее на широких, двухзонный на uw+ ---------- */ .aq-sec-head { margin-top: 1.5rem; } @media (min-width: 1024px) { .aq-sec-head { margin-top: 2.5rem; } } .aq-sec-head__lead { max-width: 62ch; } .aq-sec-head__title { font-size: clamp(1.875rem, 4vw, 3.25rem); line-height: 1.08; letter-spacing: -0.02em; color: var(--color-text); font-weight: 700; } .aq-sec-head__intro { font-size: clamp(1rem, 1.4vw, 1.1875rem); line-height: 1.6; margin-top: 1rem; max-width: 58ch; color: var(--color-text-muted); } .aq-sec-head__aside { display: none; } @media (min-width: 2560px) { .aq-sec-head { display: grid; grid-template-columns: minmax(0, 62ch) 1fr; gap: 4rem; align-items: end; } .aq-sec-head__title { font-size: clamp(3.25rem, 3vw, 4.5rem); } .aq-sec-head__aside { display: block; min-height: 220px; border-radius: var(--radius-xl); background: var(--color-surface-soft); border: 1px solid var(--color-divider); } } @media (min-width: 3840px) { .aq-sec-head { grid-template-columns: minmax(0, 64ch) 1fr; gap: 6rem; } .aq-sec-head__title { font-size: clamp(4rem, 3vw, 5.5rem); } .aq-sec-head__aside { min-height: 320px; } } /* ---------- Products grid: только раскладка. Вид карточки — раздел 9 ---------- */ .aq-sec-products { margin-top: 2.5rem; } @media (min-width: 1024px) { .aq-sec-products { margin-top: 3.5rem; } } .aq-sec-products__grid { display: grid; gap: clamp(0.75rem, 1.5vw, 1.5rem); grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 768px) { .aq-sec-products__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1280px) { .aq-sec-products__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Wide: density guard — карточка не уже 280px, не растягивается в полосы */ @media (min-width: 1920px) { .aq-sec-products__grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; } } @media (min-width: 2560px) { .aq-sec-products__grid { gap: 1.75rem; } } @media (min-width: 3840px) { .aq-sec-products__grid { gap: 2rem; } } @media (min-width: 5120px) { .aq-sec-products__grid { gap: 2.25rem; } } /* Карточка тянется по ячейке грида (вид/фон/рамку даёт раздел 9) */ .aq-sec-products__grid > .ms2_product { width: 100%; height: 100%; } /* ---------- Ecosystem bridge ---------- */ .aq-sec-eco { border-top: 1px solid var(--color-divider); padding-top: clamp(1.5rem, 4vw, 2.5rem); margin-top: clamp(3.5rem, 6vw, 6rem); } .aq-sec-eco__label { display: block; font-size: 13px; font-weight: 600; color: var(--color-text-faint); margin-bottom: 0.75rem; } /* На широких чипы перестают скроллиться и переходят в свободный wrap */ @media (min-width: 1024px) { .aq-sec-eco__list { overflow-x: visible; flex-wrap: wrap; } } @media (min-width: 2560px) { .aq-sec-eco { display: grid; grid-template-columns: minmax(0, 18ch) 1fr; gap: 3rem; align-items: start; } .aq-sec-eco__label { margin-bottom: 0; } } @media (min-width: 3840px) { .aq-sec-eco { grid-template-columns: minmax(0, 20ch) 1fr; gap: 5rem; } }