/* ТеплоЛайф — Liquid Glass: правки по канону Apple (скил liquid-glass-design). Подключать ПОСЛЕ theme-liquid.css. Только overlay-улучшения, без дублей базы. Цель: вернуть ГЛУБИНУ и ИЕРАРХИЮ — стекло только на «плавающих» элементах. */ /* ════ 1. УБРАТЬ «СТЕКЛО НА СТЕКЛЕ» ════ Анти-паттерн скила: «Applying glass to every view» + «Nesting too many glass effects». Большие секции-обёртки делаем ПРОЗРАЧНЫМИ — тогда стеклянные карточки внутри реально читаются как плавающие панели над цветным фоном-глоу. */ .calc, .reviews, .faq { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* FAQ-ответ внутри стеклянного item — тоже снимаем вложенное стекло */ .faq__a { background: transparent !important; } /* Footer: лёгкая разделительная плёнка вместо полноценного стекла */ footer { background: rgba(255,255,255,.16) !important; backdrop-filter: blur(10px) saturate(160%) !important; -webkit-backdrop-filter: blur(10px) saturate(160%) !important; } /* ════ 2. ИЕРАРХИЯ ГЛУБИНЫ (depth tiers) ════ Скил: «maintain strict visual hierarchy». Три уровня стекла по важности: tier-1 плавающие (hero-карточки, результат калькулятора, модалка) — сильнее блюр + длиннее тень; tier-2 карточки товаров/отзывы — средний; tier-3 мелкие пилюли/строки — лёгкий. Базовый файл уже близок — усиливаем контраст уровней. */ .hero__card, .calc__result, .calc__box { box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 0 0 1px rgba(255,255,255,.18), 0 22px 60px rgba(180,90,40,.22) !important; /* выше «парят» */ } .svc-row, .dlv-row, .dp__item, .pay-opt, .map__load, .badge { box-shadow: inset 0 1px 0 var(--glass-hi), 0 3px 10px rgba(180,90,40,.08) !important; /* ниже «лежат» */ } /* ════ 3. SPECULAR-КРОМКА КАК В iOS 26 ════ Скил: «real-time refraction, specular highlights». Светлая кромка не только сверху, но и тонкое затухание по нижнему краю — стекло выглядит цельным, а не «наклейкой». */ .hero__card, .card, .rev, .calc__result, .calc__box, .ws-modal__box { border-bottom-color: rgba(255,255,255,.35) !important; } /* ════ 4. ДОСТУПНОСТЬ — fallback для прозрачности ════ Скил: «Ensure accessibility contrast — text on glass must remain readable». Если ОС/браузер просят меньше прозрачности — отключаем блюр и даём плотный фон, текст остаётся читаемым (важно для пожилой аудитории тёплых полов). */ @media (prefers-reduced-transparency: reduce) { .hdr, .badge, .hero__card, .card, .rev, .calc__result, .calc__box, .svc-row, .dlv-row, .dp__item, .pay-opt, .map__load, .cart-link, .ws-modal__box, .ws-modal, [class*="modal-box"], footer, input:not([type=range]):not([type=checkbox]):not([type=radio]), select, textarea, .cart-row, .cart-empty, .cart-total, .step-box, .checkout-summary, .thanks-page, .return-memo, .legal, .deliv-opt, .steps-nav__item { background: #fffaf4 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-color: rgba(180,110,60,.28) !important; } body { background: #fff4ea !important; } } /* ════ 5а. COOKIE-БАННЕР НЕ ПЕРЕКРЫВАЕТ КОНТЕНТ (мобильные) ════ Пока баннер виден (#cookie без [hidden]) — приподнимаем контент отступом снизу, чтобы низ hero/кнопка «Посмотреть каталог» не уходили под баннер. После выбора баннер получает [hidden] → отступ исчезает. */ @media (max-width: 860px) { body:has(#cookie:not([hidden])) { padding-bottom: 200px !important; } } /* ════ 5б. КАТАЛОГ: карточки не вылезают за сетку (выравнивание с вкладками) ════ Баг: grid `repeat(4,1fr)` не давал трекам сжиматься уже контента (цена+кнопка в .card__foot), из-за чего карточки выходили вправо за пределы .cards и не совпадали с рядом вкладок. Фикс: minmax(0,1fr) разрешает трекам сжиматься; .card__foot может переноситься, чтобы кнопка «В корзину» не распирала карточку. */ .cards { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } @media (max-width: 1024px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (max-width: 640px) { .cards { grid-template-columns: 1fr !important; } } .card { min-width: 0 !important; } .card__foot { flex-wrap: wrap !important; gap: 8px !important; } .card__img img, .card img { max-width: 100% !important; } /* ════ 6. ПРОИЗВОДИТЕЛЬНОСТЬ — мягкая деградация блюра на слабых GPU ════ Скил предупреждает: вложенные/частые backdrop-filter «degrade performance». На устройствах без hover (тач) уменьшаем радиус блюра — меньше перерисовок, плавный скролл. */ @media (hover: none) { :root { --glass-blur: blur(20px) saturate(200%); } .hero__card { backdrop-filter: blur(24px) saturate(210%) !important; -webkit-backdrop-filter: blur(24px) saturate(210%) !important; } } /* ════ 7. ПРОЗРАЧНАЯ «СТЕКЛЯННАЯ» ШАПКА + COOKIE НАД ВСЕМ САЙТОМ ════ Запрос пользователя (29.06): шапка и cookie-плашка — почти полностью прозрачное стекло, плавающее над контентом (контент проходит под ними, слегка размытый). Шапка и так position:sticky;top:0 — «висит» над сайтом при скролле; снимаем только плотный фон. Этот блок идёт ПОЗЖЕ всех правил (включая фолбэк reduced-transparency из раздела 4), поэтому перебивает их по порядку каскада — прозрачность видна даже при включённом в macOS «Уменьшить прозрачность». */ .hdr { background: transparent !important; /* полностью прозрачная */ -webkit-backdrop-filter: none !important; /* без размытия (чистое стекло) */ backdrop-filter: none !important; border-bottom: 0 !important; box-shadow: none !important; } /* cookie-плашка — тоже прозрачная, без фроста; чуть фона ради читаемости кнопок */ .cookie { background: rgba(255,255,255,.06) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 1px solid rgba(255,255,255,.20) !important; box-shadow: 0 12px 40px rgba(120,70,30,.10) !important; } /* перебиваем reduced-transparency-фолбэк адресно — чтобы прозрачность осталась именно у этих «плавающих» элементов */ @media (prefers-reduced-transparency: reduce) { .hdr { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .cookie { background: rgba(255,255,255,.06) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } }