/* Морда не подключает theme.css с глобальным сбросом, поэтому у неё box-sizing остаётся content-box и padding прибавлялся к max-width: футер выходил 1240px вместо 1200. Задаём внутри футера явно. */ .cs-footer, .cs-footer *, .cs-footer *::before, .cs-footer *::after { box-sizing: border-box; } /* Ширина футера. На блоге её задавал .cs-wrap из blog.css, а морда его не подключает — там футер растягивался на всю ширину окна. Держим 1200px, как у контейнера Тильды (.t-container), чтобы совпадать с остальной мордой. */ .cs-footer .cs-wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 20px; } /* «Рецепты» и «Блог» живут в одной колонке, друг под другом. */ .cs-footer__stack { display: grid; gap: 28px; align-content: start; } /* Стили единого футера. Вынесены из blog.css, потому что футер теперь общий для блога и морды — морда подключает только этот файл, а не весь blog.css. Источник правил не менялся. */ .cs-logo { display: inline-flex; align-items: baseline; gap: 6px; font-weight: 600; font-size: 20px; letter-spacing: -0.01em; color: var(--color-text-primary, #121212); text-decoration: none; white-space: nowrap; } .cs-logo span { font-size: 14px; font-weight: 600; color: var(--cs-link); } /* ---------- Footer (вид = футер морды / public/index.html, T396) ---------- Цвета захардкожены (не через семантические токены), чтобы футер выглядел одинаково в светлой и тёмной теме блога — как неизменный тёмный футер морды. */ .cs-footer { margin-top: 64px; background: #1a1a1a; color: #fff; } .cs-footer__inner { /* Раскладка как в новом футере морды: бренд + каталог (с подгруппами) + инфо + блог. «Последние статьи» убраны по решению Founder. */ display: grid; gap: 40px 40px; /* Четыре колонки: бренд + каталог + инфо + (рецепты над блогом). Каталогу больше места — у него двухуровневая структура и длинные подписи. */ grid-template-columns: 1.45fr 1.4fr .85fr .95fr; padding: 64px 20px 44px; align-items: start; } .cs-footer__brand p { margin: 18px 0 0; color: #9a9a9a; font-size: 15px; line-height: 1.5; max-width: 300px; } .cs-logo--footer { color: #fff; font-size: 24px; letter-spacing: .02em; } .cs-logo--footer span { color: var(--color-brand-500, #fe5834); } .cs-footer__nav { display: flex; flex-direction: column; gap: 15px; } .cs-footer__title { /* Значения сняты с футера морды в браузере: 18px/700, uppercase, letter-spacing normal, до первого пункта 64px по верхам строк. */ margin: 0 0 38px; font-weight: 700; font-size: 18px; line-height: 1.4; color: #fff; text-transform: uppercase; letter-spacing: normal; } .cs-footer__nav a { color: #c5c5c5; font-size: 16px; line-height: 1.4; transition: color .15s; } /* Подгруппы каталога: белый кликабельный заголовок группы, под ним модели */ .cs-footer__group { display: flex; flex-direction: column; gap: 15px; } .cs-footer__group + .cs-footer__group { margin-top: 25px; } .cs-footer__nav--catalog .cs-footer__grouphead { color: #fff; font-size: 20px; font-weight: 400; line-height: 1; margin-bottom: 4px; } .cs-footer__nav--catalog .cs-footer__grouphead:hover { color: var(--color-brand-500, #fe5834); } .cs-footer__nav a:hover { color: #fff; } /* Каталог: приглушённые ссылки, как товарные ссылки в футере морды */ .cs-footer__nav--catalog a { color: #9a9a9a; } .cs-footer__nav--catalog a:hover { color: #fff; } /* Контакты: email — крупный белый (как на морде), телефон — приглушённый */ .cs-footer__contact { margin: 22px 0 0; display: flex; flex-direction: column; gap: 8px; } .cs-footer__email { font-size: 20px; font-weight: 500; color: #fff; } .cs-footer__email:hover { color: var(--color-brand-500, #fe5834); } .cs-footer__phone { font-size: 16px; color: #9a9a9a; letter-spacing: .01em; } .cs-footer__phone:hover { color: #fff; } /* Соцсети: круглые иконки 50×50 (#252525 круг + белый глиф), как на морде */ /* Пять иконок строго в одну строку. Размер прежний (46px) — вместо уменьшения иконок расширена сама колонка бренда, см. grid ниже. */ .cs-footer__socials { display: flex; flex-wrap: nowrap; gap: 10px; margin-top: 24px; } .cs-footer__social { display: inline-flex; width: 46px; height: 46px; flex: 0 0 auto; border-radius: 50%; overflow: hidden; transition: transform .15s, filter .15s; } .cs-footer__social:hover { transform: translateY(-2px); filter: brightness(1.25); } .cs-footer__social svg, .cs-footer__social img { width: 100%; height: 100%; display: block; } /* Нижняя строка: разделитель #303030, слева — политика, справа — копирайт (как на морде) */ .cs-footer__copy { padding: 26px 20px; border-top: 1px solid #303030; color: #c5c5c5; font-size: 16px; font-weight: 500; display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; align-items: center; } .cs-footer__copy a { color: #c5c5c5; } .cs-footer__copy a:hover { color: #fff; } /* Маркетплейсы: полоса с логотипами (блог-специфичная, на морде её нет — оформлена в тёмном стиле футера, чтобы не выбиваться из вида морды) */ .cs-footer__markets { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; padding: 24px 20px; border-top: 1px solid #303030; } .cs-footer__markets-label { color: #9a9a9a; font-size: 15px; font-weight: 500; } .cs-footer__markets-list { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; padding: 0; } .cs-footer__markets-list a { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 14px; border-radius: var(--radius-10); background: #fff; transition: transform .15s, box-shadow .15s; } .cs-footer__markets-list a:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.35); } .cs-footer__markets-list img { height: 34px; width: auto; display: block; } /* Плитка «где купить»: у маркетплейсов иконка-кружок сама несёт фон, поэтому подложку и внутренние поля им не даём — иначе двойная рамка. Широкий логотип фирменного магазина остаётся с полями. */ /* Маркетплейсы отдаются готовыми кружками с собственным фоном (иконки смартми) — белая плитка под ними давала двойную рамку. Плитку оставляем только логотипам, которые нарисованы под светлый фон: фирменный магазин и digbox. */ .cs-footer__markets-list .cs-market { background: none; padding: 0; height: 38px; border-radius: 0; } .cs-footer__markets-list .cs-market img { height: 38px; } /* Белая плашка нужна логотипам маркетплейсов: они тёмные и на чёрном футере не читаются. Логотипу своего магазина она НЕ нужна — он белый с оранжевой капсулой и рассчитан на тёмный фон. Пока плашка стояла и под ним, белая надпись «cosori» сливалась с ней и пропадала. */ .cs-footer__markets-list .cs-market--tile { background: #fff; padding: 0 14px; height: 40px; border-radius: var(--radius-10); } .cs-footer__markets-list .cs-market--wide { background: none; padding: 0; height: 40px; border-radius: 0; } .cs-footer__markets-list .cs-market--wide img { height: 30px; } .cs-footer__markets-list .cs-market--tile img { height: 32px; } @media (max-width: 1024px) { .cs-footer__inner { grid-template-columns: 1.3fr .9fr 1fr; gap: 32px; } .cs-footer__brand { grid-column: 1 / -1; } } @media (max-width: 860px) { .cs-burger { display: inline-flex; order: 5; } .cs-header__inner { flex-wrap: wrap; gap: 10px; } .cs-logo { margin-right: auto; } .cs-nav { order: 10; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 2px; display: none; } .cs-header.is-open .cs-nav { display: flex; } .cs-nav > a, .cs-nav__item > a { padding: 12px; min-height: 44px; justify-content: space-between; } .cs-nav__item { position: static; } .cs-sub { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; padding: 0 0 6px 12px; display: none; min-width: 0; } .cs-has-sub.is-expanded .cs-sub { display: flex; } .cs-has-sub .cs-caret { transition: transform .15s; } .cs-has-sub.is-expanded .cs-caret { transform: rotate(180deg); } } @media (max-width: 720px) { /* Три колонки: каталог + инфо + (рецепты над блогом). Бренд — своей строкой. */ .cs-footer__inner { grid-template-columns: 1.3fr .9fr 1fr; gap: 28px 20px; padding: 44px 20px 32px; } .cs-footer__nav a, .cs-footer__grouphead { font-size: 13px; } .cs-footer__title { font-size: 12px; } .cs-footer__brand { grid-column: 1 / -1; } .cs-art-title, .cs-hero h1 { font-size: 24px; } .cs-prose { font-size: 18px; } .cs-postnav { grid-template-columns: 1fr; } .cs-byline__avatar { width: 36px; height: 36px; } } @media (max-width: 560px) { .cs-footer__inner { grid-template-columns: 1fr 1fr; gap: 28px 20px; } .cs-footer__brand p { max-width: none; } .cs-footer__copy { justify-content: flex-start; gap: 8px; } .cs-footer__markets { gap: 14px 16px; } } @media (prefers-reduced-motion: reduce) { .cs-card, .cs-recipe, .cs-buy__item, .cs-postnav__link, .cs-card:hover, .cs-recipe:hover, .cs-buy__item:hover, .cs-postnav__link:hover, .cs-featured__more svg, .cs-recipe__cta svg, .cs-footer__social, .cs-footer__markets-list a, .cs-footer__markets-list a:hover, .cs-nav > a, .cs-nav__item > a, .cs-sub, .cs-caret, .cs-theme-toggle, .cs-burger { transition: none !important; transform: none !important; } } /* Базовая типографика футера. На блоге её задавали theme.css/blog.css через body, но морда их не подключает — без этого футер уезжал на засечный дефолт браузера. Задаём на самом футере, чтобы он был самодостаточен. */ .cs-footer, .cs-footer input, .cs-footer button { font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Разделитель между разделами и списком популярных рецептов в колонке. */ .cs-footer__sep { display: block; height: 1px; margin: 14px 0 4px; background: rgba(255, 255, 255, .14); max-width: 40px; } /* Кнопка «наверх» — те же правила, что в блоге (вынесены, чтобы работали и на морде, которая blog.css не подключает). */ /* ============================================================ Кнопка «наверх» с кольцом прогресса. Слева внизу: справа внизу висит виджет чата, там бы столкнулись. Кольцо показывает прочитанное (на статье — по телу текста, на остальных страницах — прокрутку всей страницы). ============================================================ */ .cs-top { position: fixed; left: 24px; bottom: 24px; z-index: 50; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; /* Фолбэки: на морде theme.css не подключён, переменных нет — кнопка оказывалась прозрачной и на тёмном футере пропадала. */ background: var(--color-surface-default, #fff); box-shadow: 0 2px 6px rgba(35,31,32,.10), 0 10px 24px rgba(35,31,32,.14); color: var(--color-text-primary, #121212); opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease; } .cs-top.is-in { opacity: 1; transform: translateY(0); } .cs-top:hover { box-shadow: 0 4px 10px rgba(35,31,32,.14), 0 14px 32px rgba(35,31,32,.2); } .cs-top:focus-visible { outline: 2px solid var(--color-brand-500, #fe5834); outline-offset: 3px; } .cs-top__ring { position: absolute; inset: 0; transform: rotate(-90deg); } .cs-top__track { stroke: var(--cs-hairline, #e3e3e3); } .cs-top__bar { stroke: var(--color-brand-500, #fe5834); transition: stroke-dashoffset .12s linear; } .cs-top__arrow { position: relative; } @media (max-width: 720px) { .cs-top { left: 16px; bottom: 16px; } } @media (prefers-reduced-motion: reduce) { .cs-top { transition: none; } .cs-top__bar { transition: none; } } /* На карточках товара снизу выезжает липкая панель Тильды («Купить / Скидка», z-index 990, во всю ширину). Она перекрывала кнопку «наверх»: та сидела на bottom:24 и z-index:50. Поднимаем кнопку над панелью и подвигаем выше её высоты, когда панель показана (класс ставит morda.js). */ .cs-top { z-index: 995; } body.cs-fixbar-open .cs-top { bottom: 116px; } /* Вторая строка подписи на морде: гарантия/доставка/подделки. Тоном тише первой, чтобы главной осталась «Официальный сайт Cosori в России». */ .cs-footer__note + .cs-footer__note { margin-top: 2px; } .cs-footer__note { margin-top: 4px; color: #a5a5a5; font-size: 14px; line-height: 1.45; } /* ---------- Видеоблок на главной (зеро-блок rec512441761) ---------- У артборда была фиксированная высота (1265×736 = 1.72), а ролик 16:9 — при object-fit:cover обрезались края кадра. Привязываем высоту блока к пропорции видео, тогда кадр виден целиком и без полей. */ #rec512441761 .t396__artboard, #rec512441761 .t396__filter, #rec512441761 .t396__carrier { height: auto !important; aspect-ratio: 16 / 9; } #rec512441761 .tn-elem { top: 0 !important; height: 100% !important; } #rec512441761 .tn-atom { height: 100% !important; } /* Кнопка звука. Автозапуск разрешён браузерами только без звука, поэтому звук предлагаем явно, а не прячем в панели плеера. */ .cs-video__sound { position: absolute; right: 20px; bottom: 64px; z-index: 5; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px 10px 12px; border: 0; border-radius: 30px; background: rgba(0, 0, 0, .62); color: #fff; cursor: pointer; font-family: 'Manrope', Arial, sans-serif; font-size: 14px; font-weight: 500; backdrop-filter: blur(3px); transition: background .15s ease, opacity .15s ease; } .cs-video__sound:hover { background: #fe5834; } .cs-video__sound:focus-visible { outline: 2px solid #fe5834; outline-offset: 2px; } .cs-video__sound[aria-pressed="true"] { opacity: .55; } /* Иконка динамика рисуется бордерами — без лишнего запроса за картинкой. */ .cs-video__sound-ico { position: relative; width: 16px; height: 16px; flex: 0 0 auto; } .cs-video__sound-ico::before { content: ''; position: absolute; left: 0; top: 4px; width: 0; height: 0; border: 4px solid transparent; border-right: 7px solid #fff; border-left: 0; } .cs-video__sound-ico::after { content: ''; position: absolute; left: 9px; top: 3px; width: 6px; height: 10px; border: 2px solid #fff; border-left: 0; border-radius: 0 8px 8px 0; } .cs-video__sound[aria-pressed="true"] .cs-video__sound-ico::after { opacity: .4; } @media (max-width: 639px) { .cs-video__sound { right: 12px; bottom: 56px; padding: 8px 12px 8px 10px; font-size: 13px; } } /* ---------- Блок «Мы в магазинах» (зеро-блок Тильды, 12 страниц) ---------- Digbox убран по решению Founder. Ячейки в блоке абсолютные, поэтому просто спрятать логотип нельзя — осталась бы дыра и лишние разделители. Блок переводится в обычный ряд: :has() ловит любую его копию по ссылке внутри, id у копий разные. Клик-зоны и линии-разделители (shape) скрываем — ссылки есть на самих логотипах. ВАЖНО: :not(.t-popup *). Ссылки на магазины есть не только в этой полосе, но и внутри попапов «Купить» — тот же зеро-блок с сеткой логотипов. Без этой отсечки правила прилетали и туда: артборд попапа терял заданную высоту (832px -> 508px), абсолютно позиционированные атомы схлопывались в ряд, и попап на /dual-blaze/ выглядел полосой поверх страницы. Попапы должны остаться ровно такими, как в слепке Тильды. */ .t396__artboard:has(a[href*="DBCosori"]):not(.t-popup *), .t396__artboard:has(a[href*="DBCosori"]):not(.t-popup *) .t396__filter, .t396__artboard:has(a[href*="DBCosori"]):not(.t-popup *) .t396__carrier { height: auto !important; min-height: 0 !important; } .t396__artboard:has(a[href*="DBCosori"]):not(.t-popup *) { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px 56px; padding: 28px 16px; /* Обязательно: у артбордов Тильды box-sizing по умолчанию content-box, и боковые отступы прибавлялись к ширине 100%. Блок становился шире окна ровно на 32px и давал горизонтальную прокрутку всей страницы. */ box-sizing: border-box; } .t396__artboard:has(a[href*="DBCosori"]):not(.t-popup *) .tn-elem { position: static !important; width: auto !important; height: auto !important; margin: 0 !important; transform: none !important; } .t396__artboard:has(a[href*="DBCosori"]):not(.t-popup *) .tn-elem[data-elem-type="shape"], .t396__artboard:has(a[href*="DBCosori"]):not(.t-popup *) .tn-elem:has(a[href*="DBCosori"]) { display: none !important; } .t396__artboard:has(a[href*="DBCosori"]):not(.t-popup *) .tn-atom, .t396__artboard:has(a[href*="DBCosori"]):not(.t-popup *) .tn-atom > a { display: block; height: auto !important; width: auto !important; } /* Свой магазин — первым, как и в футере: порядок в разметке случайный. */ .t396__artboard:has(a[href*="DBCosori"]):not(.t-popup *) .tn-elem:has(a[href*="shop.cosori.ru"]) { order: -1; } .t396__artboard:has(a[href*="DBCosori"]):not(.t-popup *) img { height: 38px !important; width: auto !important; max-width: 200px; display: block; object-fit: contain; } @media (max-width: 639px) { .t396__artboard:has(a[href*="DBCosori"]):not(.t-popup *) { gap: 18px 28px; padding: 20px 12px; } .t396__artboard:has(a[href*="DBCosori"]):not(.t-popup *) img { height: 30px !important; } } /* На страницах рецептов Django кладёт своё правило для