.req-div{ margin: 15px 0; font-family: 'Gilroy'; } #cookie-banner{ position:fixed; bottom:20px; left:50%; transform:translateX(-50%); max-width:700px; width:90%; background:#f5f7f9; border-radius:12px; padding:20px 25px; font-size:14px; line-height:1.5; color:#333; box-shadow:0 4px 12px rgba(0,0,0,0.15); z-index:9999; transition:opacity 0.5s ease, visibility 0.5s ease; } /* ответ уже дан (html.cookie-ok ставит скрипт в до первой отрисовки) — баннер спрятан; раньше он был скрыт по умолчанию и появлялся после JS, становясь LCP-элементом (аудит 19.09) */ html.cookie-ok #cookie-banner{ opacity:0; visibility:hidden; } /* пока баннер виден — фокус на поле у нижнего края не уезжает под него (аудит 19.09) */ html.cookie-open{ scroll-padding-bottom: 230px; } #cookie-banner a{ color:#4a7800; text-decoration:underline; } /* было #578e00 — 3.7:1 на #f5f7f9, не дотягивало до 4.5 (аудит 19.09) */ #cookie-accept{ padding:8px 20px; background: #FFC70B; color: black; border:none; border-radius:4px; font-size:14px; cursor:pointer; } /* «Отклонить» была белым текстом с белой рамкой на светлом #f5f7f9 — кнопку не было видно (контраст 1.07). По закону отказ должен быть так же доступен, как согласие (17.09) */ #cookie-reject{ padding:8px 20px; background: #fff; color: #333; border:1px solid #b9c0cc; border-radius:4px; font-size:14px; cursor:pointer; } /* ===== Читаемость и вёрстка карточек старого оформления (автотест «Вид и читаемость», 17.09) ===== Правило E.16: текст, который человек должен прочитать, — контраст не ниже 4.5:1. Здесь только то, что договорились чинить; фирменные цвета подвала и меню ждут решения. */ /* «Нет в наличии» и наведение на «В корзину»: белый по #919BB4 давал 2.78. Выключенное — как выключенные кнопки сайта: светлый фон #e9ecf3, серый текст #5f6784 (4.72) */ .card-purchase-basket button:hover { background: #5f6883; } .product-disabled .card-purchase-basket button, .product-disabled .product-purchase-basket button { background: #e9ecf3 !important; color: #5f6784 !important; } .product-disabled .card-quantity-counter-btn, .product-disabled .product-quantity-counter-btn { background: #c9cfdc !important; } /* подписи «КОЛ-ВО», «ИТОГО», артикул, «упак.» — #919BB4 (2.78) */ .card-quantity-counter-input p, .card-purchase-sum .purchase-text, .card-art-index, .card-quantity-counter-input label { color: #5f6883; } /* форма «Задать вопрос менеджеру»: подписи полей #919BB4 (2.78), согласие #949494 (3.03) */ .connection-form-input label { color: #5f6883; } .connection-form span { color: #5f6576; } .connection-form a { color: #3f6b0a; } /* цена и кнопка не помещались в строку карточки (250 px): цена «2 926,75 ₽» шрифтом 28 px — 130 px, кнопка — 120–129 px. Кнопка вылезала за карточку на 5–16 px и налезала на цену. Цена чуть мельче, кнопка по ширине текста; если и так не влезет — перенос, а не вылет */ .card-purchase { gap: 6px; flex-wrap: wrap; row-gap: 8px; } .card-purchase-sum .purchase-default, .card-purchase-sum .purchase-stock { font-size: 24px; } .card-purchase-basket button { width: auto; min-width: 96px; padding: 0 12px; font-size: 14px; } @media (max-width: 480px) { .card-purchase-sum .purchase-default, .card-purchase-sum .purchase-stock { font-size: 22px; } } /* цена за штуку: не переносим «₽/шт.» отдельно. На телефоне у цены фиксированный отступ 35 px, и при «198,84 ₽/шт.» блок вылезал за карточку на 3–10 px — отдаём ей свободное место */ .card-quantity-price p { font-size: 15px; white-space: nowrap; } @media (max-width: 480px) { .card-quantity-price { margin-left: auto !important; padding-left: 8px; } } /* счётчик количества: блок «КОЛ-ВО / поле / упак.» и кнопки-стрелки стояли на разной высоте (разброс центров 5.5–13 px), а «упак.» переносилась на новую строку */ .card-quantity-counter { align-items: center; } .card-quantity-counter-input label { white-space: nowrap; } /* подвал: колонки по 260 px стояли вплотную — реквизиты («…ОГРН», «…Кемерово,») касались меню справа, промежуток 1 px на 1710–1920 px (Михаил 17.09: «этот текст бы раздвинуть») */ .footer-nav { column-gap: 40px; } @media (max-width: 1024px) { .footer-nav { column-gap: 24px; } } /* страница товара: кнопка «В корзину» стоит сразу за суммой, и при росте суммы (12 999,6 → 13 564,8 ₽) сдвигалась вправо — у суммы не было своей ширины, x кнопки гулял на 40 px (Михаил 17.09: «Привяжи её»). Сумме — место под длинную цену «999 999,99 ₽» */ .product-content-info-description .product-purchase-sum { min-width: 215px; } @media (max-width: 575px) { .product-content-info-description .product-purchase-sum { min-width: 0; } } /* шапка, пункт «Интернет магазин ▼» (ShopMenuItem). Шире 1259 px — выпадающий список по наведению, в меню-бургере (1259 px и уже) — только по нажатию и с подразделами. Режим выбирает ширина окна сейчас, а не при загрузке страницы (Михаил 17.09: «реагирует на наведение, можно только на нажатие?») */ .menu-shop-toggle, .menu-shop-sub { display: none; } @media (min-width: 1260px) { .menu-shop-hover > .menu-nav-container-part-nested, .menu-shop-open > .menu-nav-container-part-nested, .menu-shop:focus-within > .menu-nav-container-part-nested { display: block; } } @media (max-width: 1259px) { .menu-shop > p { cursor: pointer; } .menu-shop-open > .menu-nav-container-part-nested { display: block; } .menu-shop-open > p .span-arrow { display: inline-block; transform: rotate(180deg); } /* название и ▼ — одной строкой: длинное название переносится само, кнопка остаётся рядом с ним */ .menu-shop-row { display: flex; align-items: center; gap: 6px; } .menu-shop-row > a { min-width: 0; } .menu-shop-row > .menu-shop-toggle { flex: none; } .menu-shop .menu-shop-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; background: transparent; color: #C1884F; font-size: 12px; line-height: 1; cursor: pointer; } .menu-shop .menu-shop-toggle[aria-expanded="true"] { transform: rotate(180deg); } .menu-shop .menu-shop-sub:not([hidden]) { display: block; margin: 2px 0 4px; padding: 0 0 0 16px; list-style: none; } .menu-shop .menu-shop-sub li { margin-top: 12px; } /* подразделы — новый уровень меню, читаемым тёмно-коричневым (5.9:1), фирменный #C1884F у разделов не трогаем */ .menu-shop .menu-shop-sub a { color: #7a5230; font-size: 16px; line-height: 1.35; text-decoration: none; } .menu-shop .menu-shop-sub a:hover { color: #C1884F; text-decoration: underline; } /* меню высотой 100vh начинается на 50–53 px ниже верха окна, и его низ уходит за экран: с раскрытым каталогом последние пункты не докручивались. Запас снизу больше этого сдвига */ .menu { padding-bottom: 100px; } /* боковой каталог и «Возник вопрос? — Задать вопрос менеджеру» на этих ширинах со страниц убраны (Михаил 17.09): каталог — в меню, вопрос — через чат. Контент — на всю ширину */ .score-nav { display: none; } .product-content { margin-left: 0; max-width: 100%; } .score-production-block { padding-left: 0; } } /* 1082–1259: без каталога заголовки («Коробка cupbox…» у шапки, «Новинки» на главной) встали к левому краю — на полосатый круг декора. Ниже 1082 старая вёрстка этот декор уже прячет, делаем так же */ @media (min-width: 1082px) and (max-width: 1259px) { .sub-head-parallax, .main-score-parallax { display: none; } }