/* ============================================= COOKIE BANNER — hellomyteacher.ru Для интеграции в MODX: вставьте CSS в свой основной файл стилей, HTML — в chunk или шаблон, JS — в конец или отдельный файл скрипта. ============================================= */ #cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 99999; background-color: #F04E23; padding: 28px 40px 32px; box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15); font-family: 'Arial', sans-serif; box-sizing: border-box; /* Анимация появления */ transform: translateY(100%); opacity: 0; transition: transform 0.4s ease, opacity 0.4s ease; } #cookie-banner.cookie-banner--visible { transform: translateY(0); opacity: 1; } #cookie-banner.cookie-banner--hidden { transform: translateY(110%); opacity: 0; pointer-events: none; } .cookie-banner__inner { max-width: 860px; margin: 0 auto; } .cookie-banner__title { font-size: 18px; font-weight: 700; color: #1a1a1a; text-align: center; margin: 0 0 14px; } .cookie-banner__text { font-size: 14px; line-height: 1.6; color: #1a1a1a; text-align: justify; margin: 0 0 24px; } .cookie-banner__text a { color: #1a1a1a; text-decoration: underline; font-weight: 600; } .cookie-banner__text a:hover { opacity: 0.75; } .cookie-banner__buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } .cookie-banner__btn { flex: 1; max-width: 320px; min-width: 160px; padding: 14px 24px; font-size: 15px; font-weight: 600; font-family: inherit; border-radius: 6px; cursor: pointer; border: 2px solid #1a1a1a; transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease; text-align: center; } .cookie-banner__btn:active { transform: scale(0.97); } /* Кнопка "Принять" */ .cookie-banner__btn--accept { background-color: #ffffff; color: #1a1a1a; } .cookie-banner__btn--accept:hover { background-color: #1a1a1a; color: #ffffff; } /* Кнопка "Отклонить" */ .cookie-banner__btn--decline { background-color: transparent; color: #1a1a1a; } .cookie-banner__btn--decline:hover { background-color: #1a1a1a; color: #F04E23; } @media (max-width: 600px) { #cookie-banner { padding: 20px 20px 24px; } .cookie-banner__title { font-size: 16px; } .cookie-banner__text { font-size: 13px; text-align: left; } .cookie-banner__btn { max-width: 100%; font-size: 14px; } }