/* ===================================================================== * brand-market.css — тема BREADLY MARKET. * * Подключается ПОСЛЕДНИМ (после style.css / marketplace.css / webapp.css). * Принцип, заданный жёстко: тема = ТОЛЬКО цветовая палитра. Разметка, * геометрия, шрифты и поведение остаются как в MUSHTUM — так патчи * переносятся между форками правкой, а не заменой файла. * Откат темы = убрать . * * Палитра из макета market.breadly.uz: * #a78b6b акцент (тёплое золото) ← терракота #b0502c * #0d0d0d тёмная поверхность ← бордовый #4a1620 * #f6f2ec фон страницы ← ваниль #ece1cb * #faf8f5 карточка ← #f3ebd9 * #f0ece5 поля ввода * #57534e текст второго уровня ← #4d4842 * #8a8580 приглушённый текст ← #837b6f * * Палитра СВЕТЛАЯ, как и исходная: тёмное осталось тёмным, светлое * светлым. Поэтому разводить токены по ролям, как пришлось в тёмной * теме PUNTO, здесь не нужно — хватает подмены значений. * =====================================================================*/ :root{ /* ── тёмные поверхности: шапка, подвал, модалки, кнопки ────────── */ --burgundy:#0d0d0d; --burgundy-deep:#000000; --burgundy-soft:#1c1c1c; /* ── светлые поверхности ───────────────────────────────────────── */ /* 1.5.136: фон страницы притемнён (#f6f2ec → #f0ebe2). Карточки и поля остались светлее его — раньше вся страница была почти одного тона, и плоскости не читались как отдельные. Контраст основного текста при этом 16.4:1, то есть ничего не потеряно. */ --vanilla:#f0ebe2; --vanilla-2:#faf8f5; --vanilla-3:#ffffff; --vanilla-line:#ddd4c6; /* границы плотнее, чтобы рамки были видны */ /* ── текст ─────────────────────────────────────────────────────── */ /* ⚠️ 1.5.136: приглушённый текст был #8a8580 — 3.28:1 на фоне, ниже нормы WCAG 4.5. Им набраны вес порции, «сум», счётчики позиций, метки полей, хлебные крошки — 60 правил, и все они читались с трудом. Стало 4.8:1. Второй уровень (описания блюд) тоже уплотнён: 6.84 → 7.9. ⚠️ Проверено: ни одно из этих правил не применяется на ТЁМНЫХ блоках, поэтому затемнение нигде не бьёт по светлому тексту на чёрном. */ --ink:#0d0d0d; --ink-soft:#423e39; --ink-mute:#5f5a53; /* ── акцент и служебные ────────────────────────────────────────── */ --terracotta:#a78b6b; --gold:#a78b6b; --khaki:#8a8580; --blue:#57534e; --stripe:#a78b6b; --ok:#5e7d3a; --err:#b00020; /* ── ⚠️ ТОКЕНЫ ВИТРИНЫ И ПРИЛОЖЕНИЯ, КОТОРЫЕ НИГДЕ НЕ ОБЪЯВЛЕНЫ ── marketplace.css и webapp.css пишут var(--mp-…, #hex) и var(--wa-…, #hex) в 76 местах, а сами токены не заводит НИКТО — работают жёсткие запасные значения. Из-за этого правка палитры их не догоняла: подписи второго уровня в модалках и в приложении остались бы #57534e при затемнённом --ink-soft, а рамки — светлыми при плотном --vanilla-line. Объявляем их здесь и привязываем к нашим токенам, чтобы палитра была одна. */ --mp-ink:var(--ink); --wa-ink:var(--ink); --mp-ink-2:var(--ink-soft); --wa-ink-2:var(--ink-soft); --mp-line:var(--vanilla-line); --wa-line:var(--vanilla-line); --mp-card:var(--vanilla-2); --wa-card:var(--vanilla-2); --mp-err:var(--err); --wa-err:var(--err); --mp-accent:var(--gold); /* поле ввода и плита под фото: раньше #f0ece5 и #f4eee5 — почти в тон новому фону #f0ebe2, элементы сливались бы с полотном. Опускаем на пару ступеней. */ --mp-field:#eae4d9; --wa-field:#eae4d9; --mp-tile:#ebe5da; /* маска героя приложения: запасное значение в webapp.css — БОРДОВЫЙ MUSHTUM (74,22,32). Обычно его перебивает инлайн из PHP, но если слайдера нет, подставится чужой бренд. */ --wa-mask-rgb:var(--ink-rgb); --wa-mask:.72; /* ── те же цвета для rgba() ────────────────────────────────────── */ --vanilla-rgb:240,235,226; /* ⚠️ пара к --vanilla: rgba() берут отсюда */ --vanilla2-rgb:250,248,245; --vanilla-line-rgb:221,212,198; --ink-rgb:13,13,13; --terracotta-rgb:167,139,107; --burgundy-rgb:13,13,13; --burgundy-deep-rgb:0,0,0; --err-rgb:176,0,32; --ok-rgb:94,125,58; --scrim-rgb:13,13,13; --shadow:0 18px 50px rgba(13,13,13,.18); /* Фактура «бумаги» и «зерна»: на бордово-ванильной палитре она читалась как печать, на чистой светлой — как шум. Тот же вывод, что был сделан на модалке «закрыто» патчем 1.5.97. */ --grain-paper:none; --grain-dark:none; } /* ───────────────────────────────────────────────────────────────────── ГОЛЫЕ HEX БЕЗ ТОКЕНА. Подмена переменных до них не доходит — правила перечислены поимённо. ⚠️ Перед добавлением правила: grep селектора ПО ЭТОМУ ЖЕ файлу, иначе получится мёртвая строка под уже существующей (урок PUNTO 1.5.135). ───────────────────────────────────────────────────────────────────── */ /* Подложка страницы (в базе — бордовый + фоновый снимок bg-hero.jpg). 1.5.132: СВЕТЛАЯ И БЕЗ СНИМКА. Это фон за шапкой и героем на всю высоту экрана — именно тёмное фото и делало верх сайта чёрным. Фактуру всегда можно вернуть слайдером главной (админка → Слайдер): он рисуется своим слоем поверх подложки, со своей маской. ⚠️ Снимок убираем `background:` целиком, а не background-color: иначе картинка осталась бы поверх нового цвета. */ body::before{ background:#f0ebe2; } /* Плашка-заглушка под фото товара (в базе #332f2b → #211e1b). 1.5.132: светлая. ⚠️ ПАРОЙ с иконкой: в базе она белая (brightness(0) invert(1)) и на светлом фоне исчезла бы совсем — переворачиваем в тёмную. */ .mp-item-thumb{ background:linear-gradient(160deg,#ebe5da,#ded6c8); } .mp-item-noimg img{ filter:brightness(0) !important; opacity:.22 !important; } /* Переключатель языка в шапке (в базе #3a3631). 1.5.132: пилюля стала светлой (см. секцию «СВЕТЛАЯ СХЕМА»), поэтому и hover светлый — прежний #1c1c1c мигал бы чёрным на белой шапке. */ .lang-btn:hover{ background:#f0ece5; } /* поля ввода внутри светлых блоков (в базе #fbf6ec) */ .mp-box .mp-inp{ background:#f0ece5; } /* плитка заказа в истории (в базе #faf6ec) */ .mp-ord-card{ background:#faf8f5; } /* золотая кнопка панели (в базе #caa46e / #3a1119) — приводим к акценту темы */ /* .mp-btn-panel отдельным правилом больше не красим: с 1.5.139 его перекрывает .mp-btn:not(.mp-btn-ghost) — специфичность (0,2,0) против (0,1,0) у базового #caa46e. Два места правды не нужны. */ /* цвет текста в нативном селекте (в базе #2a2724) */ .mp-panel-sel option{ color:#0d0d0d; } /* ───────────────────────────────────────────────────────────────────── АКЦЕНТ КАК ЦВЕТ ТЕКСТА НА СВЕТЛОМ ФОНЕ. Единственная реальная проблема этой палитры: #a78b6b хорош заливкой, рамкой и текстом на тёмном (6.1:1 на чёрной шапке), но как ЦВЕТ ТЕКСТА на бежевом даёт 2.9:1. Терракота на её месте давала 4.6:1 и проходила. Ниже — только те правила движка, где акцент красит текст или иконку НА СВЕТЛОЙ поверхности. Тон #7a6349: 5.1:1 на фоне, 5.3:1 на карточке. ⚠️ Сам токен --terracotta НЕ трогаем: он же рамки, подсветка и текст на тёмных поверхностях (шапка, подвал, модалка) — там инверсия сломала бы обратное. ───────────────────────────────────────────────────────────────────── */ .cat-index, /* номер категории над списком */ .cat-btn:hover, /* чип категории под курсором */ .fact i, /* иконка в плашке характеристики */ .btn-primary i, /* иконка на СВЕТЛОЙ кнопке hero */ .lang-opt:hover, /* пункт светлого меню языков */ .lang-opt.active, .mp-link, /* «изменить номер», «отправить ещё»*/ .mp-in-ic, /* иконка в поле ввода */ .mp-back i, /* стрелка кнопки «назад» */ .mp-page-back, /* «← в меню» на /cart и /orders */ .mp-crumbs a:hover, /* хлебные крошки */ .wa-back, /* «назад к корзине» в приложении */ .wa-link{ color:#7a6349; } /* текстовые кнопки в приложении */ /* Текст ошибки под кнопкой «в корзину» в базе красится терракотой. В новой палитре это, во-первых, 2.9:1, во-вторых, золото не читается как ошибка. Отдаём ему служебный красный — он для того и заведён. */ .modal-add-err{ color:var(--err); } /* ───────────────────────────────────────────────────────────────────── ЗАСТАВКА — «НАЛИВАЮЩИЙСЯ ЛОГОТИП» (1.5.134) Логотип разложен на три слоя: знак, слово BREADLY, слово MARKET. Каждый лежит в двух экземплярах — бледный «призрак» и цветной поверх; цветной открывается снизу вверх через clip-path, будто форма наполняется. ⚠️ СОВМЕЩЕНИЕ СЛОЁВ: у картинок обрезаны прозрачные поля, ширины заданы в ПРОЦЕНТАХ от общего блока, а заливка позиционируется inset:0 по нему же — поэтому призрак и заливка совпадают на любом экране без ручной подгонки. ⚠️ Прежние правила заставки (.ml-logo/.ml-one/.wa-ml/.wa-ml-one и анимация bmLoaderIn) УДАЛЕНЫ, а не оставлены рядом: тех элементов в разметке больше нет, и мёртвые строки в теме — то, за что уже приходилось краснеть на PUNTO. Откат: удалить секцию — заставка станет без стилей, но останется рабочей (её снимает тот же JS, что и раньше). ───────────────────────────────────────────────────────────────────── */ .bm-ld{ position:relative; width:min(300px,64vw); } .bm-ld-sm{ width:min(230px,58vw); } /* приложение — экран уже */ .bm-ld-stack{ display:flex; flex-direction:column; align-items:center; gap:16px; } .bm-ld-words{ display:flex; flex-direction:column; align-items:center; gap:9px; width:100%; } .bm-ld-stack img{ display:block; height:auto; -webkit-user-drag:none; user-select:none; } /* ⚠️ aspect-ratio ОБЯЗАТЕЛЕН: без него до загрузки картинок высота слоёв равна нулю — заставка показывает одну подпись, а потом логотип «прыгает» на своё место. У прежней заставки размер держал .ml-logo (200×232), здесь высоту задают сами картинки, поэтому место резервируем их пропорциями. */ .bm-ld-mark{ width:72%; aspect-ratio:840/454; } .bm-ld-word{ width:100%; aspect-ratio:1056/154; } .bm-ld-sub{ width:45%; aspect-ratio:640/99; } /* призрак задаёт высоту блока, заливка ложится точно поверх него */ .bm-ld-ghost{ opacity:.14; } .bm-ld-fill{ position:absolute; inset:0; animation:bmFillCycle 2.8s linear infinite; } /* Наполнение снизу вверх, пауза на полном логотипе, затем мягкое угасание — и цикл повторяется, пока страница не догрузилась. */ @keyframes bmFillCycle{ 0% { clip-path:inset(100% 0 0 0); opacity:1; } 62% { clip-path:inset(0 0 0 0); opacity:1; } 86% { clip-path:inset(0 0 0 0); opacity:1; } 100% { clip-path:inset(0 0 0 0); opacity:0; } } /* Подпись под логотипом дышит в такт заливке. */ .ml-cap, .wa-ml-cap{ animation:bmCapBlink 2.8s ease-in-out infinite; } @keyframes bmCapBlink{ 0%,100%{ opacity:.35 } 50%{ opacity:1 } } @media (max-width:560px){ .bm-ld{ width:min(240px,68vw); } } /* Кому движение мешает — показываем сразу собранный логотип. */ @media (prefers-reduced-motion:reduce){ .bm-ld-fill{ animation:none; clip-path:inset(0 0 0 0); opacity:1; } .ml-cap, .wa-ml-cap{ animation:none; opacity:1; } } /* ══════════════════════════════════════════════════════════════════ ЗОЛОТЫЕ ВЫДЕЛЕНИЯ (1.5.128) ------------------------------------------------------------------ Просьба Артёма: чёрные выделения по всему сайту заменить золотом. Меняем ТОЛЬКО «выделения» — состояния выбора и кнопки действия. Тёмные ПОВЕРХНОСТИ (шапка, подвал, подложки модалок, заглушки картинок) остаются чёрными: если залить золотом и их, сайт превратится в сплошное золото и выделять станет нечем. ⚠️ Текст на золоте — ТЁМНЫЙ. Белый на #a78b6b даёт 2.4:1 и нечитаем; тёмный — 6.1:1. Это единственная причина, по которой ниже везде явно прописан цвет текста: без него он остался бы белым от базовых правил. Откат: удалить эту секцию (или весь темы) — базовые стили целы. ══════════════════════════════════════════════════════════════════ */ /* ⚠️ Границы золотых плашек — ТЁМНОЕ золото #7a6349, а не сам акцент. Золото на светлом фоне даёт 2.88:1 — ниже порога 3:1 для границ элементов, и край плашки на витрине терялся: выделение читалось хуже прежнего чёрного. Тёмный тон даёт 5.1:1 и возвращает чёткость, оставаясь в той же гамме. */ /* ---- витрина: категории и сегменты ---- */ .cat-btn.active { background: var(--gold, #a78b6b) !important; color: var(--burgundy, #0d0d0d) !important; border-color: var(--gold-deep, #7a6349) !important; } .mp-seg-b.active { background: var(--gold, #a78b6b) !important; color: var(--burgundy, #0d0d0d) !important; border-color: var(--gold-deep, #7a6349) !important; } /* ---- модалка «как получить заказ» ---- */ .mm-seg-b.active { background: var(--gold, #a78b6b) !important; color: var(--burgundy, #0d0d0d) !important; border-color: var(--gold-deep, #7a6349) !important; } .mm-loc.on { background: var(--gold, #a78b6b) !important; border-color: var(--gold-deep, #7a6349) !important; } .mm-loc.on b, .mm-loc.on span, .mm-loc.on::after { color: var(--burgundy, #0d0d0d) !important; } .mm-go { background: var(--gold, #a78b6b) !important; color: var(--burgundy, #0d0d0d) !important; } /* выбранная точка в корзине — тот же язык выделения */ .mp-loc.active { border-color: var(--gold-deep, #7a6349) !important; box-shadow: inset 0 0 0 2px var(--gold, #a78b6b) !important; } /* ---- кнопки действия ---- */ .modal-add, .mp-btn-wide { background: var(--gold, #a78b6b) !important; color: var(--burgundy, #0d0d0d) !important; } /* ---- приложение ---- */ .wa-chip.is-on { background: var(--gold, #a78b6b) !important; color: var(--burgundy, #0d0d0d) !important; border-color: var(--gold-deep, #7a6349) !important; } .wa-seg-b.active { background: var(--gold, #a78b6b) !important; color: var(--burgundy, #0d0d0d) !important; border-color: var(--gold-deep, #7a6349) !important; } .wa-loc.is-on { background: var(--gold, #a78b6b) !important; border-color: var(--gold-deep, #7a6349) !important; box-shadow: none !important; } .wa-loc.is-on b, .wa-loc.is-on span { color: var(--burgundy, #0d0d0d) !important; } /* ══════════════════════════════════════════════════════════════════ СВЕТЛАЯ СХЕМА (1.5.132) ------------------------------------------------------------------ Просьба Артёма: «сайт очень тёмный, много чёрных элементов». Осветляем три большие плоскости — ШАПКУ, ПОДВАЛ и ГЕРОЙ. Тёмными намеренно остаются: панель итога в корзине (эталон BREADLY — светлые карточки товаров против тёмной панели справа), шапки модалок и оверлеи: это точечные акценты, а не фон страницы. ⚠️ ЦВЕТ ТЕКСТА МЕНЯЕТСЯ ПАРОЙ С ФОНОМ. Базовые правила красят текст шапки и подвала в var(--vanilla) — сменив только фон, мы получили бы кремовое по кремовому. Поэтому каждый блок ниже перечисляет и поверхность, и всё, что на ней написано. ⚠️ Акцент #a78b6b как ЦВЕТ ТЕКСТА на светлом даёт 2.9:1 — везде, где он теперь оказался на светлой поверхности, стоит тёмное золото #7a6349 (5.1:1). Заливкой акцент остаётся собой. Откат: удалить эту секцию — остальная тема и база целы. ══════════════════════════════════════════════════════════════════ */ /* ---- ФОН СТРАНИЦЫ ---- */ /* Сам body в базе тёмный (var(--burgundy)), в приложении — чёрный (webapp.css: html,body). Подложка body::before его закрывает, но она fixed: тёмное вылезает «резинкой» overscroll и мелькает до её отрисовки. Палитра у витрины, мобильной версии и приложения ОДНА, поэтому правило общее — приложение больше не исключение (см. секцию «ПРИЛОЖЕНИЕ»). */ html, body{ background:var(--vanilla,#f0ebe2); } /* ---- ПОЛОСА ПРОКРУТКИ ---- */ /* Ползунок в базе красится var(--burgundy) — в этой палитре он чёрный, и на светлом сайте это самый заметный тёмный элемент: он на экране всегда. Отдаём фирменное тёмное золото — остаётся в гамме и не спорит с фоном. ⚠️ Дорожка задаётся ЯВНЫМ цветом, а не transparent: прозрачная показывает фон страницы, и вид полосы менялся бы от страницы к странице (три итерации по этому поводу на MUSHTUM, патч 1.5.82). ⚠️ scrollbar-color НАСЛЕДУЕТСЯ — правило на html задаёт вид и вложенным блокам, поэтому webkit-ползунки перечислены рядом. */ /* ⚠️ 1.5.139 + аудит. Полосу прокрутки в приложении вернул мой же 1.5.132: scrollbar-color НАСЛЕДУЕТСЯ, а у элемента с ним Chrome переходит на стандартную отрисовку и перестаёт слушать ::-webkit-scrollbar. В приложении ширину гасит `::-webkit-scrollbar{width:0}` — и внутренние прокручиваемые блоки (список карточек, шторка) снова показали полосу. У ОКНА её прячет `html{scrollbar-width:none}` — это свойство НЕ наследуется, поэтому окно было чистым, а списки внутри — нет. ⚠️ Правило обязано остаться НА html: движок задаёт там свой scrollbar-color (style.css), а окно берёт значение с html, когда оно не auto — с body его было бы не перебить, и ползунок витрины стал бы чёрным. Наследование в приложение обрываем на его body: auto возвращает потомкам webkit-отрисовку, а окно приложения по-прежнему без полосы. */ html{ scrollbar-color:#7a6349 var(--vanilla-2,#faf8f5); } body.wa-body{ scrollbar-color:auto; } body::-webkit-scrollbar-thumb{ background:#7a6349; } *::-webkit-scrollbar-thumb{ background:#7a6349; } /* у списка в модалке блюда своё правило с классом — звёздочка выше его не перебьёт, поэтому называем поимённо, иначе внутри светлой модалки остался бы чёрный ползунок при золотом на всей остальной странице */ .modal-scroll::-webkit-scrollbar-thumb{ background:#7a6349; } /* ---- ШАПКА ---- */ .site-header{ background:rgba(var(--vanilla-rgb,240,235,226),.92); border-bottom:1px solid var(--vanilla-line,#ddd4c6); } /* ЛОГОТИП В ШАПКЕ (1.5.135). Чипа-рамки и набранного текста «BREADLY MARKET» больше нет: в шапке стоит горизонтальный локап целиком. Высоту шапки подняли с 66 до 76 px — на прежней локап пришлось бы ужать до 38 px, и знак с словом MARKET переставали читаться (сравнивал макеты). Правила прежнего чипа и надписи удалены, а не оставлены рядом: элементов под них в разметке нет. */ .header-row{ height:76px; } /* ⚠️ ПАРА К ВЫСОТЕ ШАПКИ: панель категорий липкая и прилипает к её низу (движок: .filter-bar{top:66px}). Подняв шапку до 76 px в 1.5.135, я эту пару не поправил — при прокрутке верхние 10 px панели уезжали ПОД шапку (у неё z-index 30 против 20). Мобильный порог тоже: шапка там 62 px. */ .filter-bar{ top:76px; } /* ⚠️ И ЯКОРЬ КАТЕГОРИИ: при клике по чипу блок прокручивается с запасом scroll-margin-top (движок: 132 = шапка 66 + панель 66). Со шапкой 76 запаса не хватало на те же 10 px — заголовок категории вставал под панель. */ .cat-block{ scroll-margin-top:142px; } /* 76 + 62 + 4 запаса */ /* ⚠️ И ЛИПКИЕ ПАНЕЛИ КОРЗИНЫ. Движок липит их на top:16px от верха окна, но шапка тоже липкая (z-index 30 против их 1) — верх панели уходил ПОД неё. Дефект был и раньше, с шапкой 66 px; подняв её до 76, я сделал его на 10 px заметнее, поэтому чиню здесь: 76 + прежний зазор 16. Панели живут только в две колонки (сетка схлопывается на 820–860 px), так что мобильных значений не нужно. */ .mp-panel, .mp-checkout-col, .mp-ord-aside{ top:92px; } /* ⚠️ СЕЛЕКТОР ОБЯЗАН БЫТЬ ДВУХКЛАССОВЫМ. В движке есть `.brand img{height:32px}` внутри @media(max-width:560px) — специфичность (0,1,1) против (0,1,0) у голого .brand-logo, и на телефоне ПОБЕЖДАЛО БЫ ОНО: логотип 32px = 181px ширины, а вся раскладка шапки посчитана на 158px. Проверено эмулятором каскада. */ .brand .brand-logo{ height:46px; width:auto; display:block; } /* Логотип не должен сжиматься — ужимается кнопка способа получения: её текст и так обрезается многоточием. */ .brand{ flex:0 0 auto; } .header-actions{ min-width:0; } /* ⚠️ Медиазапросы обязаны идти ПОСЛЕ правил выше: специфичность у них одинаковая, @media её не повышает, и при обратном порядке высота 76px перебила бы мобильную. Первая сборка патча именно так и промахнулась. ⚠️ Локап широкий (5.66:1), поэтому на телефоне режем его сильнее, чем просилось бы по высоте: в шапке витрины рядом ещё кнопка точки, телефон и язык. Ширины при 30px — 170px, при 26px — 147px; кнопке точки на этих же порогах ужимаем предел, иначе она вытесняет всё остальное. */ @media (max-width:560px){ .header-row{ height:62px; } .filter-bar{ top:62px; } /* ⚠️ 62 + 62 + 4 запаса. Панель категорий на мобильном ТОЖЕ 62 px (padding 24 + чип 37 + рамка 1) — правила для .filter-bar и .cat-btn в мобильном медиазапросе движка те же, что на десктопе. Прежние 116 px считались от 58 и не добирали 4 px ещё до всех патчей. */ .cat-block{ scroll-margin-top:128px; } .brand .brand-logo{ height:28px; } /* 158px по ширине */ .header-actions{ gap:8px; } .mode-btn{ max-width:88px; } } /* Совсем узкие: у кнопки точки остаётся одна иконка — ровно тем же приёмом движок уже прячет номер телефона на мобильном (.phone-link span). Иначе локап, кнопка, телефон и язык в 320–400px не помещаются вовсе. */ @media (max-width:400px){ .brand .brand-logo{ height:24px; } /* 136px */ .mode-btn{ max-width:none; padding:7px 10px; } .mode-btn span{ display:none; } } .phone-link{ color:var(--ink-soft,#4a4640); opacity:1; } .phone-link i{ color:#7a6349; } .phone-link:hover{ color:var(--ink,#0d0d0d); } /* пилюля языка была чёрной — самое заметное тёмное пятно в светлой шапке */ .lang-btn{ background:var(--vanilla-3,#fff); color:var(--ink,#0d0d0d); border:1px solid var(--vanilla-line,#ddd4c6); } .lang-menu{ box-shadow:0 12px 30px rgba(13,13,13,.14); } /* ---- ГЕРОЙ (только при СВЕТЛОЙ маске) ---- Класс hero-light вешает index.php, посчитав яркость маски из админки: маска тёмная — ничего не меняется, герой остаётся прежним. */ .hero-light .hero-tag{ color:var(--ink,#0d0d0d); border-top-color:#7a6349; } .hero-light .hero-sub{ color:var(--ink-soft,#4a4640); } /* светлая кнопка на светлом фоне пропадает — отдаём ей акцент заливкой */ .hero-light .btn-primary{ background:var(--gold,#a78b6b); color:var(--burgundy,#0d0d0d); } .hero-light .btn-primary:hover{ background:#b89a78; } .hero-light .btn-primary i{ color:var(--burgundy,#0d0d0d); } .hero-light .btn-ghost{ color:var(--ink,#0d0d0d); border-color:rgba(13,13,13,.28); } .hero-light .btn-ghost:hover{ color:#7a6349; border-color:#7a6349; } .hero-light .btn-ghost i{ color:#7a6349; } .hero-light .hero-logo{ box-shadow:0 14px 34px rgba(13,13,13,.12); } /* ---- ПОДВАЛ ---- */ /* ⚠️ Запасное значение у var() обязательно: без него пропажа переменной делает ВСЁ объявление background недействительным и подвал становится прозрачным (ровно это чинили на MUSHTUM патчем 1.5.61). */ .site-footer{ background:var(--vanilla-2,#faf8f5); border-top:1px solid var(--vanilla-line,#ddd4c6); color:var(--ink-soft,#4a4640); } .foot-brand .foot-plate{ box-shadow:0 10px 26px rgba(13,13,13,.10); } .foot-tag{ color:var(--ink,#0d0d0d); border-top-color:#7a6349; } .foot-col h4{ color:#7a6349; } .foot-col a,.foot-col p{ color:var(--ink-soft,#4a4640); } .foot-col a:hover{ color:#7a6349; } .foot-bottom{ color:var(--ink-soft,#4a4640); border-top:1px solid var(--vanilla-line,#ddd4c6); } /* ══════════════════════════════════════════════════════════════════ ПРИЛОЖЕНИЕ — ТА ЖЕ СВЕТЛАЯ ПАЛИТРА (1.5.132) ------------------------------------------------------------------ Требование Артёма: палитра витрины, мобильной версии и приложения не должна отличаться. Базовый webapp.css рисует приложение тёмным (фон .wa, шапка, таббар, подложки под фото), поэтому здесь те же поверхности переводятся в светлые — и КАЖДАЯ парой со своим текстом, иначе кремовое осталось бы на кремовом. Тёмными остаются РОВНО ТЕ ЖЕ элементы, что на сайте: панель итога (.wa-total / .wa-od-total ↔ .mp-panel), шапка шторки товара (.wa-sheet-head ↔ .modal-top), затемнения и плашки поверх фото (.wa-ov, .wa-sold, .wa-item-cat, .wa-item-x). Это точечные акценты. Откат: удалить секцию — приложение вернётся к тёмной теме. ══════════════════════════════════════════════════════════════════ */ /* ---- полотно и шапка ---- */ .wa{ background:var(--vanilla,#f0ebe2); } .wa-head{ background:rgba(var(--vanilla-rgb,240,235,226),.94); border-bottom:1px solid var(--vanilla-line,#ddd4c6); } /* Шапка приложения уже (430 px) — локап мельче, но рядом только две иконки, места хватает с запасом. */ /* В приложении родитель другой (.wa-brand), поэтому правило выше сюда не достаёт — задаём и размеры, и раскладку. */ /* ⚠️ height:auto + потолок, а не жёсткие 30px: с тремя пилюлями в шапке (1.5.142) на узких экранах flex давит именно картинку, и при жёсткой высоте она сузилась бы, исказив пропорции. */ .wa-brand-logo{ height:auto; max-height:30px; max-width:100%; width:auto; display:block; } /* пилюля языка была чёрной — как и в шапке сайта, делаем светлой с рамкой */ .wa-lang{ background:var(--vanilla-3,#fff); color:var(--ink,#0d0d0d); border:1px solid var(--vanilla-line,#ddd4c6); } /* ---- герой приложения (только при светлом фоне, класс вешает webapp.php) ---- */ .wa-hero-light .wa-hero-tag{ color:var(--ink,#0d0d0d); border-top-color:#7a6349; } .wa-hero-light .wa-hero-sub{ color:var(--ink-soft,#4a4640); } /* светлая кнопка на светлом фоне пропадает — тот же приём, что у .btn-primary */ .wa-hero-light .wa-btn-light{ background:var(--gold,#a78b6b); color:var(--burgundy,#0d0d0d); } .wa-hero-light .wa-btn-light i{ color:var(--burgundy,#0d0d0d); } .wa-hero-light .wa-btn-ghost{ color:var(--ink,#0d0d0d); border-color:rgba(13,13,13,.28); } .wa-hero-light .wa-btn-ghost i{ color:#7a6349; } /* ---- подложки под фото ---- ⚠️ ПАРОЙ с плейсхолдером: в базе это логотип с opacity .5 на чёрном. На светлой подложке он сливается, поэтому гасим сильнее и делаем тёмным. */ /* плита #f4eee5 — цвет из макета; отдельного токена под неё в теме нет, поэтому голый hex (как у .mp-box .mp-inp выше) */ .wa-card-media, .wa-card-ph, .wa-item-media, .wa-cart-img{ background:var(--mp-tile,#ebe5da); } .wa-card-ph img{ filter:brightness(0); opacity:.22; } /* ---- нижний таббар ---- */ .wa-tabs{ background:rgba(var(--vanilla-rgb,240,235,226),.96); border:1px solid var(--vanilla-line,#ddd4c6); } .wa-tabs-dash{ border-color:rgba(var(--ink-rgb,13,13,13),.14); } .wa-tab{ color:var(--ink-soft,#4a4640); } /* активная вкладка в базе кремовая — на светлом таббаре её не видно вовсе; отдаём тот же акцент, которым на сайте выделяются активные категории */ .wa-tab.is-on{ background:var(--gold,#a78b6b); color:var(--burgundy,#0d0d0d); } /* ---- переключатель «доставка / самовывоз» ---- ⚠️ В приложении он размечен ДВУМЯ разными классами активности: .is-on в корзине (webapp.php) и .active в модалке «как получить заказ». Секция «ЗОЛОТЫЕ ВЫДЕЛЕНИЯ» знала только .active, поэтому в корзине сегмент оставался чёрным, а в модалке был золотым — один и тот же элемент выглядел по-разному. Красим оба состояния. */ .wa-seg-b.is-on{ background:var(--gold,#a78b6b) !important; color:var(--burgundy,#0d0d0d) !important; border-color:var(--gold-deep,#7a6349) !important; } /* ---- кнопки действия приложения ---- ⚠️ На сайте кнопки действия уже золотые (.modal-add / .mp-btn-wide в секции «ЗОЛОТЫЕ ВЫДЕЛЕНИЯ»), а их прямые аналоги в приложении — «в корзину», «получить код», «подтвердить», «сохранить» — оставались чёрными: один и тот же шаг выглядел по-разному в двух клиентах. Текст на золоте ТЁМНЫЙ (6.1:1), белый дал бы 2.4:1. */ .wa-btn-dark{ background:var(--gold,#a78b6b); color:var(--burgundy,#0d0d0d); } .wa-btn-dark i{ color:var(--burgundy,#0d0d0d); } /* ---- две находки аудита приложения ---- */ /* Счётчик корзины на вкладке: в базе золотая заливка + КРЕМОВЫЙ текст (2.9:1), а теперь под ним ещё и активная вкладка стала золотой — бейдж слился бы с ней полностью. Делаем наоборот: тёмная заливка со светлым текстом (17.4:1) — читается и на бежевом таббаре, и поверх золотой вкладки. */ .wa-badge{ background:var(--ink,#0d0d0d); color:var(--vanilla,#f0ebe2); } /* Пояснение в окне «филиал уже закрылся»: светло-розовый #ffb4ae достался от тёмной темы и на светлой карточке окна даёт 1.5:1 — текста фактически нет. Отдаём служебный красный (6.6:1), тот же, что у ошибок на витрине. */ .wa-closed-note{ color:var(--err,#b00020); } /* ══════════════════════════════════════════════════════════════════ ЧИТАЕМОСТЬ ПОДПИСЕЙ НА ТЁМНЫХ ПАНЕЛЯХ (1.5.136) ------------------------------------------------------------------ Панель итога и её аналог в приложении остались тёмными намеренно, но подписи внутри набраны кремовым с прозрачностью .55–.7 — на чёрном это выглядит выцветшим ровно так же, как приглушённый текст на светлом фоне, из-за которого и затевался патч. Уплотняем. Строку «в том числе НДС» поднимаем сильнее прочих: она мелкая (11.5px) и на скриншоте читалась хуже всего. ══════════════════════════════════════════════════════════════════ */ .mp-panel-title, .wa-total-l{ color:rgba(var(--vanilla-rgb,240,235,226),.86); } .mp-panel-vat, .wa-total-vat{ color:rgba(var(--vanilla-rgb,240,235,226),.78); } /* Плейсхолдеры полей ввода: браузерный по умолчанию ещё бледнее приглушённого текста, а на бежевом поле он почти исчезал. */ .mp-inp::placeholder, .mp-in::placeholder, .wa-inp::placeholder, input::placeholder, textarea::placeholder{ color:var(--ink-mute,#6b665f); opacity:1; } /* ══════════════════════════════════════════════════════════════════ ВТОРОЙ ЗАХОД ПО ЧИТАЕМОСТИ (1.5.137) ------------------------------------------------------------------ Артём со скриншотов: «текст затемнить, всё равно не видно» и «названия позиций не помещаются — сделать меньше». ══════════════════════════════════════════════════════════════════ */ /* ---- 1. НАЗВАНИЯ ПОЗИЦИЙ: МЕНЬШЕ КЕГЛЬ, ДВЕ СТРОКИ ---- В приложении имя рисуется в ОДНУ строку с многоточием (nowrap), и почти каждое превращалось в «DOUBLE…»: у всех позиций длинные имена из iiko с хвостом MARKET. Уменьшаем кегль и разрешаем ТРИ строки. ⚠️ Число строк подобрано по РЕАЛЬНЫМ именам из базы (67 активных позиций, колонка 183 px на экране 390 px): в одну строку помещалось 5 имён, в две — 56, в три — ВСЕ 67. Двух не хватало ровно тем названиям, что на скриншоте («DOUBLE CAPPUCCINO MARKET»), поэтому берём три. ⚠️ Высоту НЕ фиксируем на три строки: по тем же данным имя занимает одну строку у 11 позиций и две у 45 — жёсткие 3.15em раздули бы 56 карточек пустотой. Ставим min-height в две строки, а расти до трёх разрешаем. Цены в ряду всё равно стоят на одной линии: .card-meta/.wa-card-meta прижаты margin-top:auto, а ячейки сетки тянутся по высоте (stretch). */ .wa-card-name{ font-size:14px; letter-spacing:.3px; white-space:normal; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; height:auto; min-height:2.1em; } /* Мобильная витрина: то же самое. Базовое правило движка (@media 560) зажимает заголовок в одну строку — перебиваем в своём медиазапросе, он идёт позже. */ @media (max-width:560px){ /* ⚠️ display / box-orient / overflow повторяем явно: без них правило работает только потому, что их задаёт базовый @media движка. Стоит его когда-нибудь тронуть — и наш клэмп молча перестанет обрезать. */ .card-title{ font-size:15px; letter-spacing:.3px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; height:auto; min-height:2.1em; } } /* ---- 2. АКЦЕНТ КАК ЦВЕТ ТЕКСТА ---- ⚠️ Само золото #a78b6b на светлом даёт 3.03:1 — именно им набраны стрелка «назад», иконки полей и подсказок, состав в карточке заказа. Токен не трогаем (как ЗАЛИВКА он даёт тёмному тексту 6.06:1 и менять его нельзя) — перекрашиваем ровно те места, где он работает ТЕКСТОМ: #7a6349, 5.34:1. */ /* ⚠️ Здесь ТОЛЬКО то, чего не было в секции «АКЦЕНТ КАК ЦВЕТ ТЕКСТА» выше: .btn-primary i, .mp-in-ic, .mp-back i, .mp-page-back и .mp-crumbs a:hover покрашены там ещё на этапе 0 — повторять их значит заводить второе место правды. (Первая сборка 1.5.137 их продублировала, аудит убрал.) */ .mp-back, .mp-od-it-m, .mp-pickup i, .mp-saved-del:hover, .mp-saved-pick i, .mp-tri-ic, .mp-x:hover, .ymp-toggle, .ymp-toggle i, .mp-consent input, .btn-ghost i, .btn-ghost:hover, .foot-toggle{ color:#7a6349; } /* ---- 3. «БЕСПЛАТНО» У МОДИФИКАТОРОВ ---- var(--ok) #5e7d3a на карточке — 4.43:1, чуть ниже нормы, а строк таких в модалке блюда много. Тон глубже: 6.01:1. */ /* ⚠️ ТОЛЬКО ВИТРИНА: в приложении «бесплатно» не рисуется вовсе — webapp.js создаёт .wa-mod-p лишь при цене > 0, и класса free там нет. Правила для .wa-mod-p.free были бы мёртвыми. */ .mod-item .p.free{ color:#4d6730; } /* ══════════════════════════════════════════════════════════════════ ПУНКТИР НА КАРТОЧКАХ — ТОЛЬКО ПОД ФОТО (1.5.138) ------------------------------------------------------------------ В движке декоративная пунктирная рамка висит на ВСЕЙ карточке (.card::before / .wa-card::after, inset:8px, z-index:2) и проходит поверх снимка блюда — на фото она смотрится грязью. Гасим её там и перевешиваем на текстовую часть: рамка обводит только низ плитки. ⚠️ Гасим через `display:none`, а не content:"" — правило движка задаёт и рамку, и позиционирование; убирать надо весь блок целиком. ⚠️ Родителю нужен position:relative — у .card-body и .wa-card-body он уже есть в движке, но повторяем явно: правило не должно зависеть от чужого объявления. Откат: удалить секцию. ══════════════════════════════════════════════════════════════════ */ .card::before, .wa-card::after{ display:none; } .card-body, .wa-card-body{ position:relative; } .card-body::before, .wa-card-body::after{ content:""; position:absolute; inset:8px; border:1px dashed rgba(var(--ink-rgb,13,13,13),.16); border-radius:6px; pointer-events:none; z-index:2; } /* ══════════════════════════════════════════════════════════════════ МОДАЛКИ ВИТРИНЫ — КАК В ПРИЛОЖЕНИИ (1.5.139) ------------------------------------------------------------------ Артём: «модалка входа на мобильной и десктопной отличается от webapp — сделать как в webapp». Разница ровно в двух вещах: в приложении кнопка действия ЗОЛОТАЯ (.wa-btn-dark перекрашена ещё в 1.5.132), а на витрине .mp-btn осталась чёрной; и галочка согласия в приложении тёмная, а на витрине — золотая. ⚠️ Красим .mp-btn ЧЕРЕЗ :not(.mp-btn-ghost): у призрачной кнопки специфичность такая же, а наше правило идёт позже — без :not она тоже залилась бы золотом и перестала быть «второстепенной». ══════════════════════════════════════════════════════════════════ */ .mp-btn:not(.mp-btn-ghost){ background:var(--gold,#a78b6b); color:var(--burgundy,#0d0d0d); } .mp-btn:not(.mp-btn-ghost) i{ color:var(--burgundy,#0d0d0d); } /* галочка согласия — тем же тоном, что отмеченный чекбокс приложения */ .mp-consent input{ accent-color:var(--ink,#0d0d0d); } /* ══════════════════════════════════════════════════════════════════ ПОЛОСА СЛАЙДЕРА НА ДЕСКТОПЕ ВЫШЕ (1.5.140) ------------------------------------------------------------------ Артём: «на десктопной версии слайдер немного больше сделать по высоте». ⚠️ Высоту полосы задаёт НЕ CSS слайдера: слой .hero-slides растянут на --hero-band, а её замеряет js/script.js как расстояние до верха плиты меню — то есть ШАПКА + ГЕРОЙ. Значит крутить надо отступы героя, и слайдер подтянется сам, без правки JS. Прибавляем 36 px сверху и 32 px снизу — полоса вырастает примерно на 70 px. Мобильные размеры (@media 560: 40/34) не трогаем: там герой и так занимает почти весь экран. ══════════════════════════════════════════════════════════════════ */ /* ⚠️ Селектор `.hero-slides ~ .hero`: прибавка нужна ТОЛЬКО когда слайдер реально заведён. Без кадров слоя .hero-slides в разметке нет вовсе (index.php рендерит его под условием), и лишние 68 px превратились бы в пустое бежевое поле над меню. Оба элемента — соседи в body, поэтому общий сиблинг работает. */ /* ⚠️ И по высоте окна тоже. Полоса = шапка + герой ≈ 666 px после прибавки; на ноутбуке 1366×768 видимая часть страницы около 658 px, и кремовая плита меню ушла бы за экран целиком — гость увидел бы только снимок и не понял, что ниже есть товары. До 860 px высоты оставляем прежние отступы: там прибавка стоила бы дороже, чем даёт. */ @media (min-width:901px) and (min-height:860px){ .hero-slides ~ .hero{ padding-top:92px; padding-bottom:76px; } } /* ══════════════════════════════════════════════════════════════════ МОДАЛКА БЛЮДА И КНОПКА СПОСОБА ПОЛУЧЕНИЯ (1.5.141) ══════════════════════════════════════════════════════════════════ */ /* ---- 1. КРЕСТИК И ПЛАШКА КАТЕГОРИИ ПО ЦЕНТРУ ---- Артём со скриншота: «крестик и категория не по центру серого выделения». Причина у обоих одна — вертикальная метрика шрифта. У круглой кнопки символ × сидит в своей строке выше середины em-box, а у плашки к padding 7/13 добавляется межстрочный интервал по умолчанию. Прибиваем line-height:1 и центрируем содержимое флексом. */ .wa-item-x, .modal-x{ display:flex; align-items:center; justify-content:center; line-height:1; padding:0; text-align:center; } /* ⚠️ padding:0 забрал бы у крестика ВИТРИНЫ тап-таргет: там кнопка без заданных размеров, и её площадь держал браузерный padding (≈38×28 px). Возвращаем размер явно — 36×36, как у круглой кнопки приложения (34). У .wa-item-x размеры свои, 34×34, их не трогаем. */ .modal-x{ width:36px; height:36px; } /* Пустая категория (у позиции нет раздела) не должна оставлять висящую плашку: JS пишет пустую строку, а padding сохранял бы серый прямоугольник. */ .wa-item-cat:empty, .modal-top h2:empty{ display:none; } .wa-item-cat, .modal-top h2{ line-height:1; display:inline-flex; align-items:center; } /* ---- 2. КНОПКА СПОСОБА ПОЛУЧЕНИЯ В ШАПКЕ ПРИЛОЖЕНИЯ ---- Такая же круглая, как соседние иконки шапки. */ .wa-modebtn{ color:var(--ink,#0d0d0d); } .wa-modebtn i{ color:#7a6349; } /* Крестик окна «как получить заказ»: в правом верхнем углу карточки. ⚠️ Карточка прокручивается (overflow:auto), поэтому крестик держим position:sticky внутри её потока — absolute уехал бы вверх вместе с содержимым. Отрицательные отступы возвращают его в угол, не сдвигая заголовок. */ .wa-modex{ position:sticky; top:0; float:right; margin:-6px -4px 0 0; width:34px; height:34px; display:flex; align-items:center; justify-content:center; background:transparent; border:none; border-radius:50%; color:var(--ink-soft,#423e39); font-size:24px; line-height:1; cursor:pointer; } .wa-modex:hover{ background:rgba(var(--ink-rgb,13,13,13),.06); } .wa-modebox{ position:relative; } /* ══════════════════════════════════════════════════════════════════ ШАПКА И ОКНО «КАК ПОЛУЧИТЬ ЗАКАЗ» В ПРИЛОЖЕНИИ (1.5.142) ══════════════════════════════════════════════════════════════════ */ /* ---- 1. КНОПКА СПОСОБА ПОЛУЧЕНИЯ: ПИЛЮЛЯ, А НЕ КВАДРАТ ---- ⚠️ Класс .wa-ic задуман для ССЫЛКИ (телефон) и не сбрасывает оформление кнопки: у