/* * Cookie-баннер под вид витрины. * * Ядро рисует плашку тёмной карточкой с крупным скруглением (--brand-radius-lg), * оранжевой ссылкой и градиентной кнопкой — это стиль системной темы MuseCMS, * которую витрина Sofa не подключает вовсе. Рядом с шапкой Aspro такая плашка * выглядела как чужой виджет, приклеенный снизу. * * Здесь тот же баннер приводится к языку витрины, снятому с живых элементов: * шрифт Open Sans 13–15px, текст #555, кнопка #bd1c3c со скруглением 2px и * подписью 13px без жирного, скругления темы — 2–3px, а не 16. * * Разметку и логику не трогаем: это ядровый `cookie.js` (task-143), у него * классы .ck-*. * * Селекторы намеренно удвоены (`.ck-bar.ck-bar`). Наш файл подключается в * из shell.php, а системный cookie.css добавляет ФИНАЛИЗАТОР — то есть * позже нас, и при равной специфичности выигрывал он. Удвоение класса поднимает * вес правила, не прибегая к !important. * * Попутно чинится поломка, которая была видна и до стилизации: ядро задаёт * кнопке `background: var(--grad)`, а скругление — `var(--brand-radius-lg)`. * Обе переменные объявлены в системной теме, которую витрина Sofa не грузит, * поэтому кнопка «Принять» оставалась вовсе без заливки, а карточка — без * скругления. Здесь значения заданы явно. */ .ck-bar.ck-bar { /* Светлая карточка: витрина светлая, тёмная полоса читалась как чужеродная. */ background: #fff; color: #555; border: 1px solid #e5e5e5; border-radius: 3px; box-shadow: 0 6px 24px rgba(29, 32, 41, .14); font-family: "Open Sans", Arial, sans-serif; padding: 18px 22px; gap: 16px; /* Полоса во всю ширину смотрелась бы плитой: держим её по ширине контента темы (та же максимальная ширина, что у .maxwidth-theme), по центру. */ left: 50%; right: auto; transform: translate(-50%, 16px); width: calc(100% - 32px); max-width: 1100px; } .ck-bar.ck-bar.ck-in { transform: translate(-50%, 0); } .ck-bar.ck-bar.ck-hide { transform: translate(-50%, calc(100% + 24px)) scale(.985); } .ck-text.ck-text { color: #555; font-size: 14px; line-height: 1.6; } /* Ссылка «Подробнее» — как обычные ссылки витрины: тёмная, подчёркнутая по наведению, без оранжевого акцента системной темы. */ .ck-link.ck-link { color: #222; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .ck-link.ck-link:hover { color: #bd1c3c; opacity: 1; } /* Кнопка ровно та же, что кнопки темы (.btn.btn-default): фирменный красный, скругление 2px, 13px без жирного начертания. */ .ck-btn.ck-btn { font-family: inherit; font-size: 13px; font-weight: 400; line-height: 18px; border-radius: 2px; padding: 8px 20px 10px; transition: background-color .3s ease; } .ck-ok.ck-ok { background: #bd1c3c; border: 1px solid #bd1c3c; color: #fff; } .ck-ok.ck-ok:hover { background: #a3172f; border-color: #a3172f; } .ck-ghost.ck-ghost { background: transparent; color: #888; border: 1px solid #ccc; } .ck-ghost.ck-ghost:hover { color: #222; border-color: #999; } /* Иконка-печенька ядра нарисована под тёмный фон — на светлой карточке её нужно приглушить, иначе она единственная кричит цветом. */ .ck-ic.ck-ic svg { opacity: .55; } @media (max-width: 640px) { .ck-bar.ck-bar { width: calc(100% - 16px); padding: 14px 16px; gap: 12px; } .ck-text.ck-text { font-size: 13px; } }