/* ============================================================ GEIZER · Уведомление о cookie (магазин автохимии) Разметку создаёт shared/cookie-notice.js, подключение на все страницы магазина пишет tools/chemistry-shop-header.py рядом с shop-head.css/js. РЕШЕНИЕ ВЛАДЕЛЬЦА 16.09.2026: «чтобы клиенты кликали понятно и тем самым соглашались» — одна кнопка согласия и ссылка на политику. Кнопки «Отклонить» нет намеренно: GTM (GTM-WGXQ8NFW) и Метрика подключены в и стартуют до любого клика, отключить их отсюда нечем — кнопка отказа была бы показухой. Как отказаться на самом деле (настройки браузера, права субъекта) написано в политике, ссылка в полосе. ВИД. Тот же «синее стекло», что у панели покупки (.pdp-bar) и панели выбранного (.selection-bar): токены --gz-glass-* заданы в shop-head.css, который на страницах магазина подключён всегда. Значения через var(..., запасное) — если полосу однажды поставят на страницу без shop-head.css, она не станет прозрачным пятном. ============================================================ */ .gz-cookie { position: fixed; z-index: 95; /* выше .selection-bar (90), .callback (70) и .pdp-bar (65), ниже шторки фильтров (110/120) */ left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 0); box-sizing: border-box; width: min(620px, calc(100% - 24px)); display: flex; align-items: center; gap: 10px 16px; padding: 13px 14px 13px 18px; border: 1px solid var(--gz-glass-line, rgba(140, 200, 255, .32)); border-radius: 18px; background: var(--gz-glass-bg, linear-gradient(135deg, rgba(24, 82, 158, .52), rgba(8, 30, 66, .68))); -webkit-backdrop-filter: var(--gz-glass-blur, blur(18px) saturate(170%)); backdrop-filter: var(--gz-glass-blur, blur(18px) saturate(170%)); box-shadow: var(--gz-glass-shadow, 0 22px 50px -18px rgba(0, 6, 20, .85), inset 0 1px 0 rgba(255, 255, 255, .18)); color: #d6e6fb; } /* Стекло без размытия читается как дыра в странице — там, где браузер backdrop-filter не умеет, кладём плотный фон (так же, как .pdp-bar). */ @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .gz-cookie { background: var(--gz-glass-solid, rgba(10, 36, 76, .96)); } } .gz-cookie__t { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 13px; line-height: 1.45; } .gz-cookie__l { color: var(--shop-h-cyan, #45bbff); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; } .gz-cookie__l:hover { color: #8fd4ff; } .gz-cookie__ok { flex: none; min-height: 40px; padding: 10px 22px; border: 0; border-radius: 999px; background: linear-gradient(110deg, #087cff, #31a9ff); color: #fff; font: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer; transition: filter .2s, transform .2s; } .gz-cookie__ok:hover { filter: brightness(1.08); } .gz-cookie__ok:active { transform: translateY(1px); } /* Клавиатура: полоса стоит первым элементом , поэтому кнопка — первая в порядке Tab. Обводку рисуем сами: в тёмном стекле системная не видна. */ .gz-cookie__ok:focus-visible, .gz-cookie__l:focus-visible { outline: 2px solid var(--shop-h-gold, #ffd873); outline-offset: 3px; } /* ---------- ничего не перекрываем ---------- Полоса стоит у самого низа, а там же живут панель покупки на странице товара, панель выбранного на витрине и виджеты правого угла. Пока полоса видна, поднимаем их на её высоту: --gz-cookie-h ставит cookie-notice.js. Поднимаем через margin-bottom, а не через bottom, — у этих плашек свои вычисляемые bottom (в т.ч. --floating-top-bottom, который navigation.js пишет инлайном), и переписывать их значило бы спорить с чужой логикой. */ .gz-cookie-on .pdp-bar, .gz-cookie-on .selection-bar, .gz-cookie-on .callback, .gz-cookie-on .floating-to-top, .gz-cookie-on .scroll-companion { margin-bottom: var(--gz-cookie-h, 0px); } /* ---------- появление ---------- При prefers-reduced-motion: reduce полоса просто есть — блок ниже не применяется, и .is-on ничего не меняет. */ @media (prefers-reduced-motion: no-preference) { .gz-cookie { opacity: 0; transform: translate(-50%, 14px); transition: opacity .25s ease, transform .3s cubic-bezier(.2, .8, .2, 1); } .gz-cookie.is-on { opacity: 1; transform: translate(-50%, 0); } .gz-cookie-on .pdp-bar, .gz-cookie-on .selection-bar, .gz-cookie-on .callback, .gz-cookie-on .floating-to-top, .gz-cookie-on .scroll-companion { transition: margin-bottom .3s cubic-bezier(.2, .8, .2, 1); } } /* ---------- телефон ---------- Текст на всю ширину, кнопка под ним справа: кнопка во всю ширину делает полосу выше, а панель покупки уезжает вверх ровно на её высоту. */ @media (max-width: 640px) { .gz-cookie { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); width: calc(100% - 16px); flex-wrap: wrap; gap: 8px; padding: 12px 14px; border-radius: 16px; } .gz-cookie__t { flex: 1 1 100%; font-size: 12.5px; } .gz-cookie__ok { margin-left: auto; padding: 9px 20px; font-size: 13px; } }