/* ========================================================================== Cookie Notice RU — стили Светлая тема, полоса внизу экрана. Все цвета вынесены в CSS-переменные ниже — меняйте их, чтобы перекрасить окно. ========================================================================== */ :root { --cnru-bg: #ffffff; /* фон панели */ --cnru-text: #1f2933; /* основной текст */ --cnru-title: #0b1220; /* заголовок */ --cnru-border: #e4e8ee; /* тонкая рамка сверху */ --cnru-shadow: rgba(15, 23, 42, 0.12); --cnru-primary-bg: #2563eb; /* кнопка «Согласиться» */ --cnru-primary-text: #ffffff; --cnru-primary-hover: #1d4ed8; --cnru-ghost-text: #374151; /* кнопка «Отклонить» */ --cnru-ghost-border: #cbd2dc; --cnru-ghost-hover: #f3f4f6; --cnru-link: #2563eb; /* ссылка «Подробнее» */ --cnru-radius: 10px; --cnru-max-width: 1120px; } /* -------------------------------------------------------------------------- Панель. Фиксируем внизу экрана поверх всего контента. z-index намеренно очень высокий, чтобы окно не пряталось за темой/плагинами. -------------------------------------------------------------------------- */ .cnru-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147483000; /* почти максимум int — выше типовых меню и попапов */ background: var(--cnru-bg); color: var(--cnru-text); border-top: 1px solid var(--cnru-border); box-shadow: 0 -4px 24px var(--cnru-shadow); box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-size: 15px; line-height: 1.5; /* Плавное появление снизу вверх. */ transform: translateY(0); transition: transform 0.35s ease, opacity 0.35s ease; } /* Внутренний контейнер: ограничиваем ширину и центрируем содержимое. */ .cnru-banner__inner { max-width: var(--cnru-max-width); margin: 0 auto; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; } /* Текстовый блок. */ .cnru-banner__title { display: block; color: var(--cnru-title); font-size: 16px; margin-bottom: 4px; } .cnru-banner__message { margin: 0; max-width: 720px; } /* Блок кнопок. */ .cnru-banner__actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; flex-wrap: wrap; } /* -------------------------------------------------------------------------- Кнопки -------------------------------------------------------------------------- */ .cnru-btn { display: inline-block; padding: 10px 18px; border-radius: var(--cnru-radius); font-size: 14px; font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; white-space: nowrap; } .cnru-btn:focus-visible { outline: 2px solid var(--cnru-primary-bg); outline-offset: 2px; } /* Главная кнопка «Согласиться» — контрастная. */ .cnru-btn--primary { background: var(--cnru-primary-bg); color: var(--cnru-primary-text); } .cnru-btn--primary:hover { background: var(--cnru-primary-hover); color: var(--cnru-primary-text); } /* «Отклонить» — второстепенная кнопка с рамкой. */ .cnru-btn--ghost { background: transparent; color: var(--cnru-ghost-text); border-color: var(--cnru-ghost-border); } .cnru-btn--ghost:hover { background: var(--cnru-ghost-hover); } /* «Подробнее» — текстовая ссылка. */ .cnru-btn--link { background: transparent; color: var(--cnru-link); padding-left: 6px; padding-right: 6px; } .cnru-btn--link:hover { text-decoration: underline; } /* -------------------------------------------------------------------------- Показ / скрытие -------------------------------------------------------------------------- */ /* Состояние «спрятано» до решения JS — уводим панель за нижний край. */ .cnru-banner--hidden { transform: translateY(110%); opacity: 0; pointer-events: none; } /* Класс, который скрипт вешает на сразу при загрузке (см. script.js). Пока JS не отработал, панель спрятана — это убирает «моргание» окна у тех, кто согласие уже давал. */ .cnru-js .cnru-banner { visibility: hidden; } .cnru-js .cnru-banner.cnru-banner--visible { visibility: visible; } /* -------------------------------------------------------------------------- Fallback: JavaScript отключён. Класс .no-js остаётся на , если скрипт не выполнился. В этом случае показываем панель статично (без анимаций и кнопки закрытия через JS — ссылка «Подробнее» продолжает работать как обычная ссылка). -------------------------------------------------------------------------- */ .no-js .cnru-banner { position: static; /* не перекрываем контент, если нельзя закрыть */ transform: none; opacity: 1; box-shadow: none; pointer-events: auto; } .no-js .cnru-banner[hidden] { display: block; /* показываем, даже если стоит атрибут hidden */ } /* Кнопки закрытия без JS бесполезны — прячем, оставляем только «Подробнее». */ .no-js .cnru-banner__actions [data-cnru-action] { display: none; } /* -------------------------------------------------------------------------- Адаптив: на мобильных складываем в колонку. -------------------------------------------------------------------------- */ @media (max-width: 720px) { .cnru-banner__inner { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px; } .cnru-banner__actions { justify-content: flex-end; } .cnru-btn--primary, .cnru-btn--ghost { flex: 1 1 auto; text-align: center; } } /* Уважаем настройку «уменьшить движение» в системе пользователя. */ @media (prefers-reduced-motion: reduce) { .cnru-banner { transition: none; } }