/* =====================================================================
ТЕМА PUNTO
---------------------------------------------------------------------
Подключается ПОСЛЕ style.css / webapp.css / marketplace.css.
Работает через переопределение CSS-переменных: базовые файлы верстки
не трогаются, поэтому патчи движка ложатся на них без конфликтов.
Если понадобится вернуть исходную тему — достаточно убрать один
на этот файл, ничего больше.
Палитра взята из боевого css/style.css сайта PUNTO:
#a98f71 основной (золотисто-бежевый)
#8a745c тёмный вариант основного
#c9b7a3 светлый вариант основного
#1a1a1a фон страницы
#121212 фон «глубже»
#2d2d2d карточка
#e0e0e0 основной текст
#404040 линии
#e74c3c / #f39c12 / #27ae60 нет в наличии / мало / в наличии
===================================================================== */
:root{
/* ---- Тёмная основа. В исходной теме это был бордовый фон ---------- */
--burgundy:#1a1a1a;
--burgundy-deep:#121212;
--burgundy-soft:#242424;
/* ---- Поверхности. Были кремовые, стали тёмно-серые ---------------- */
/* Плита меню на эталоне сливается с фоном страницы, а карточки блюд
стоят на ней светлее — так фотографии читаются как отдельные плитки.
До этого плита была светлее фона и лезла в глаза серой полосой. */
--vanilla:#1c1c1c; /* плита меню, панели, модалки */
--vanilla-2:#2b2b2b; /* карточки блюд, поля ввода */
--vanilla-3:#333333; /* самая светлая поверхность */
--vanilla-line:#404040; /* линии и рамки на поверхностях */
/* ---- Текст на поверхностях ---------------------------------------- */
--ink:#e6e6e6;
--ink-soft:#c2c2c2;
--ink-mute:#9a9a9a;
/* ---- Текст поверх тёмного фона (шапка, hero, подвал) -------------- */
--on-dark:#e0e0e0;
--on-dark-mute:#9a9a9a;
/* ---- Акцент ------------------------------------------------------- */
--terracotta:#a98f71; /* цены, активные состояния, иконки */
--khaki:#8a745c;
--stripe:#a98f71;
--gold:#c9b7a3;
--blue:#2c5aa0; /* тёмный: используется как текст на светлых плашках статуса */
/* ---- Акцентный ТЕКСТ на светлой поверхности ----------------------- */
--accent-ink:#c9b7a3;
--accent-ink-soft:#a98f71;
/* ---- Кнопки ------------------------------------------------------- */
/* Тёмная кнопка остаётся ТЁМНОЙ. Соблазн сделать её золотой велик, но
этот токен используется и как фон активных чипов, и как заливка шапок
панелей, где поверх лежит светлый текст (--on-dark). Золото + светлый
текст дают контраст 2.3:1 — не читается. Золото отдано главным
кнопкам точечно, ниже. */
--btn-dark:#3a3a3a;
--btn-dark-soft:#4a4a4a;
--btn-hover:#c9b7a3;
/* ---- Статусы ------------------------------------------------------ */
--ok:#1e8b4f; /* чуть темнее эталонного #27ae60: на нём лежит белый текст */
--err:#e74c3c;
/* ---- Панели (были захардкожены в градиенте) ----------------------- */
--panel-1:#2d2d2d;
--panel-2:#1f1f1f;
/* ---- Типографика --------------------------------------------------
PUNTO набран Inter. Оба токена ведут на него: в исходной теме
--mono был моноширинным, а --disp — узким гротеском Oswald;
смешение двух гарнитур — часть той айдентики, не этой. */
--mono:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
--disp:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
/* ---- Геометрия и тени --------------------------------------------- */
--r:12px; --r-sm:8px;
--shadow:0 10px 25px rgba(0,0,0,.4);
/* ---- Те же цвета тройками, для rgba() -------------------------------
Без них шапка и подвал остаются бордовыми: их фон задан не токеном,
а rgba(51,15,23,.86) и rgba(30,8,13,.62) — цифрами прямо в правиле.
Ровно на этом сайт и «поехал» в бордо при первом запуске. */
--on-dark-rgb:224,224,224; /* светлое поверх тёмного */
--vanilla-line-rgb:64,64,64; /* линии внутри поверхностей */
--ink-rgb:230,230,230; /* пунктирные рамки и подсветка — светлеют */
--scrim-rgb:0,0,0; /* затемнение поверх фото — остаётся тёмным */
--terracotta-rgb:169,143,113;
--burgundy-rgb:26,26,26;
--burgundy-deep-rgb:18,18,18;
--err-rgb:231,76,60;
--ok-rgb:30,139,79;
/* Затемняющие слои шапки и подвала: нейтральные, без бордового подтона */
--shade-1-rgb:0,0,0; --shade-2-rgb:0,0,0; --shade-3-rgb:0,0,0; --shade-4-rgb:0,0,0;
/* ---- Шум. В тёмной теме бумажная текстура превращается в грязь ----- */
--grain-paper:none;
--grain-dark:none;
}
/* =====================================================================
ТОЧЕЧНЫЕ ПРАВКИ
Всё, что переменными не выражается: фоновая картинка, заставка,
и места, где светлая тема опиралась на белый цвет.
===================================================================== */
/* Фон страницы. Файл bg-hero.jpg и правило в style.css оставлены на месте —
ничего не вырезано. Здесь он просто перекрыт ровным тёмным цветом: снимок
нарисован в бордовой гамме и с этой палитрой не сочетается.
Нужен фотофон — убрать это правило, картинка вернётся сама.
Слайдер главной (админка -> Слайдер главной) работает независимо и лежит
отдельным слоем поверх фона. */
body::before{
background:var(--burgundy) !important;
}
/* Маска над слайдером героя тоже перекрашивается: значение приходит из
настроек (hero_mask_color), в чистой базе там уже #1a1a1a. */
/* ---- ЗАСТАВКА -------------------------------------------------------
Логотип PUNTO собирается на глазах: P U N T прорисовываются обводкой,
«О» прилетает точкой справа и раскрывается в круг. Ниже — подпись,
счётчик и полоса заполнения.
Анимации идут ОДИН РАЗ и замирают (forwards, без infinite): собранный
знак просто стоит, пока заставка не уедет. Раньше цикл повторялся и в
конце стирал логотип обратно — гость видел, как знак пропадает прямо
перед показом сайта.
Механику скрытия не трогаем: контейнеры .mshtm-loader (витрина) и
.wa-loader (приложение) остались прежними, ими управляет JS движка.
--pu-cycle 2100мс — длительность сборки. Минимальный показ в
js/script.js и js/webapp.js поднят до 3000мс: знак успевает собраться
(примерно к 1600мс) и ещё почти секунду стоит целиком. Меняешь одно —
проверь второе, обе константы помечены комментариями. */
.mshtm-loader,
.wa-loader{
background:var(--burgundy-deep);
}
.mshtm-loader::after{ display:none; } /* зерно бумаги поверх тёмного — грязь */
.pu{
--pu-cycle:2100ms;
--pu-ink:#ffffff; /* весь знак белый: золотая «О» на почти
чёрном выпадала отдельным пятном */
--pu-dot:#ffffff;
width:min(560px, 72vw);
display:flex; flex-direction:column; gap:30px;
font-family:var(--mono);
}
.pu-logo{ width:100%; height:auto; overflow:visible; }
.pu-strokes{ stroke:var(--pu-ink); stroke-width:3.5; stroke-linecap:butt; fill:none }
.pu-strokes path{
stroke-dasharray:1;
stroke-dashoffset:1;
animation:pu-draw var(--pu-cycle) cubic-bezier(.65,0,.35,1) 1 forwards;
}
/* Задержки задают порядок сборки: стойка P, его дуга, U, две стойки и
перекладина N, затем перекладина и стойка T. Доли цикла, а не
миллисекунды: поменяешь --pu-cycle — раскладка не поедет. */
.pu-strokes path:nth-child(1){ animation-delay:0 }
.pu-strokes path:nth-child(2){ animation-delay:calc(var(--pu-cycle) * .029) }
.pu-strokes path:nth-child(3){ animation-delay:calc(var(--pu-cycle) * .062) }
.pu-strokes path:nth-child(4){ animation-delay:calc(var(--pu-cycle) * .095) }
.pu-strokes path:nth-child(5){ animation-delay:calc(var(--pu-cycle) * .117) }
.pu-strokes path:nth-child(6){ animation-delay:calc(var(--pu-cycle) * .133) }
.pu-strokes path:nth-child(7){ animation-delay:calc(var(--pu-cycle) * .167) }
.pu-strokes path:nth-child(8){ animation-delay:calc(var(--pu-cycle) * .188) }
.pu-dot{
fill:var(--pu-dot);
transform-box:fill-box; transform-origin:center;
animation:pu-dot var(--pu-cycle) cubic-bezier(.34,1.4,.5,1) 1 forwards;
}
.pu-row{ display:flex; align-items:baseline; justify-content:space-between; gap:16px }
.pu-label{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; opacity:.6; color:var(--pu-ink) }
.pu-pct{ font-size:11px; letter-spacing:.12em; font-variant-numeric:tabular-nums; opacity:.6; color:var(--pu-ink) }
.pu-track{
height:1px; width:100%; margin-top:-18px;
background:var(--vanilla-line);
}
.pu-track i{
display:block; height:1px; width:100%; background:var(--pu-ink);
transform-origin:left center; transform:scaleX(0);
animation:pu-track 3000ms cubic-bezier(.4,0,.2,1) 1 forwards;
}
/* Ключевые кадры без обратного хода: дорисовали — и оставили.
Доли сохранены из макета, чтобы темп штриха не поплыл: сам штрих
занимает 22% цикла, остаток кадр держит готовое состояние. Если
растянуть рисование на весь цикл, линии ползут вдвое медленнее. */
@keyframes pu-draw{
0% { stroke-dashoffset:1 }
22% { stroke-dashoffset:0 }
100% { stroke-dashoffset:0 }
}
@keyframes pu-dot{
0% { transform:translateX(-840px) scale(.075); opacity:1 }
26% { transform:translateX(-840px) scale(.075); opacity:1 }
50% { transform:translateX(0) scale(.075); opacity:1 }
62% { transform:translateX(0) scale(1); opacity:1 }
100% { transform:translateX(0) scale(1); opacity:1 }
}
@keyframes pu-track{
from { transform:scaleX(0) }
to { transform:scaleX(1) }
}
/* Гостю, который просил убрать анимации, показываем собранный логотип. */
@media (prefers-reduced-motion:reduce){
.pu-strokes path, .pu-dot, .pu-track i{ animation:none }
.pu-strokes path{ stroke-dashoffset:0 }
.pu-dot{ opacity:1; transform:none }
.pu-track i{ transform:scaleX(1) }
}
/* ---- ЛОГОТИП БЕЗ ПОДЛОЖКИ ------------------------------------------
В исходной теме знак ставили на кремовую карточку с рамкой, пунктиром
внутри и бумажной текстурой — под светлый макет. На тёмном фоне такая
карточка превращается в серый прямоугольник вокруг логотипа. Знак
лежит прямо на фоне, как на эталонном сайте PUNTO. */
.brand .mark-chip,
.hero-logo,
.foot-brand .foot-plate,
.wa-mark,
.wa-hero-plate{
background:none !important;
border:0 !important;
box-shadow:none !important;
padding:0 !important;
}
.hero-logo::before, .hero-logo::after,
.foot-brand .foot-plate::before, .foot-brand .foot-plate::after{ display:none !important; }
/* ---- ШАПКА ----------------------------------------------------------
Слева только знак — словесная надпись рядом с ним дублирует логотип,
на эталоне её нет. Справа глобус и телефон без «таблетки». */
.brand .wm, .wa-brand-t{ display:none; }
.brand .mark-chip img{ height:64px; width:auto; } /* в файле 200x100, но 15% сверху и снизу — поля */
.lang-btn{
background:none;
border:0;
}
/* ---- ГЕРОЙ ----------------------------------------------------------
Поверх слайдера логотипа быть не должно: он уже стоит в шапке, а на
фотографии зала только заголовок, подзаголовок и кнопка. */
.hero-logo{ display:none !important; }
.hero-tag{
font-family:var(--disp);
font-size:clamp(28px, 4vw, 46px);
font-weight:700;
letter-spacing:0;
text-transform:none;
border:0;
padding:0;
color:var(--on-dark);
}
.hero-sub{
max-width:640px;
font-size:clamp(14px, 1.5vw, 17px);
letter-spacing:0;
}
/* ---- ПРИЛОЖЕНИЕ: ГЕРОЙ ПЕРЕСТАЁТ ПРЫГАТЬ ---------------------------
На витрине слой фотографии — position:fixed, и это НЕ дефект, а
параллакс: фото стоит, контент едет. Его не трогаем.
Дёргался герой ПРИЛОЖЕНИЯ, и по другой причине: .wa-hero задан в dvh.
dvh — «динамическая» высота окна, она пересчитывается каждый раз, когда
мобильный браузер прячет или показывает адресную строку. Стоит чуть
прокрутить — окно вырастает на полсотни пикселей, герой вместе с ним, и
фотография перекадрируется рывком.
svh — «малая» высота окна: та, что остаётся при ВИДИМОЙ адресной строке.
Она не меняется при прокрутке вовсе, поэтому дёрганья не будет, а
контент гарантированно помещается в экран в обоих состояниях.
Те же единицы у соседних блоков: их dvh-высоты меняли длину документа
при каждом движении строки и добавляли к рывку подёргивание прокрутки. */
.wa-hero{ min-height:52svh; }
.wa{ min-height:100svh; }
.wa-pad{ min-height:calc(100svh - var(--head-h)); }
.wa-sheet{ min-height:60svh; }
/* ---- ГЕРОЙ: ВЫСОТА СЛАЙДЕРА -----------------------------------------
Фотография зала лежит слоем .hero-slides высотой --hero-band, а эту
переменную js/script.js считает как offsetTop плиты меню, то есть
«шапка + герой». Значит увеличивать надо не слайдер, а сам .hero —
слой подстроится сам, и кадрирование в админке останется честным.
Контент центрируем по вертикали, иначе он прижмётся к верху. */
.hero{
/* 61vh — это 76vh минус пятая часть: с 76 герой занимал почти весь
первый экран и лента категорий пряталась под сгибом. */
min-height:calc(61vh - 66px); /* 66px — высота шапки (.header-row) */
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
@media (max-width:560px){
/* На телефоне 76vh — это почти весь экран, до меню пришлось бы
листать. Оставляем героя заметным, но не во весь рост. */
.hero{ min-height:calc(46vh - 66px); }
}
/* ---- ЛЕНТА КАТЕГОРИЙ ------------------------------------------------
Под кнопками в движке идёт border-bottom — при прокрутке он читается
как посторонняя полоса поперёк экрана. Убираем.
Заодно тянем подложку на всю ширину окна: панель липкая и живёт внутри
.wrap (максимум 1200px), поэтому на широком мониторе по бокам от неё
проезжал контент. margin-left со сдвигом на половину окна безопасен —
у body стоит overflow-x:hidden, горизонтальной прокрутки не будет. */
.filter-bar{
border-bottom:0;
width:100vw;
margin-left:calc(50% - 50vw);
margin-right:calc(50% - 50vw);
padding-left:max(20px, calc(50vw - 600px));
padding-right:max(20px, calc(50vw - 600px));
background:var(--vanilla);
}
/* ---- ШИРИНА КОНТЕНТА ------------------------------------------------
.wrap — единый контейнер: шапка, герой, лента категорий, меню и подвал
держатся за него. Расширяем один раз, симметрия сохраняется сама. */
.wrap{ max-width:1400px; }
/* Боковые отступы липкой ленты считаются от половины окна и должны
совпасть с новой шириной: 1400 / 2 = 700. Не поправишь — кнопки
разъедутся с карточками под ними. */
.filter-bar{
padding-left:max(20px, calc(50vw - 700px));
padding-right:max(20px, calc(50vw - 700px));
}
/* Фотография блюда: в движке кадр 4:3 — вытянутый в ширину прямоугольник,
в котором круглая тарелка обрезается сверху и снизу. Делаем квадрат:
тарелка помещается целиком, ряд карточек выглядит плотнее.
Правило общее для всех ширин — object-fit:cover у картинки внутри уже
стоит, так что кадрирование остаётся центральным на любом экране. */
.card-media{ aspect-ratio:1 / 1; }
/* ---- КАРТОЧКА БЛЮДА -------------------------------------------------
Высота карточек выравнивается по одинаковым блокам: название — ровно
одна строка, описание — ровно четыре. Что не поместилось, гость
дочитает в модалке. Без этого карточки в ряду прыгали по высоте:
у одного блюда описание в две строки, у соседнего в восемь.
line-clamp с -webkit-префиксом: свойство работает во всех текущих
браузерах именно в такой записи, стандартного аналога пока нет.
ВСЁ ЭТО ТОЛЬКО ДЛЯ ЭКРАНОВ ШИРЕ 560px. На телефоне движок сам режет
название до одной строки, а описание до трёх, и шрифты там мельче —
фиксированная высота, посчитанная от десктопного кегля, оставила бы
под текстом пустую полосу. */
@media (min-width:561px){
.grid{ gap:26px; }
.card-title{
font-size:19px;
line-height:1.25;
height:calc(19px * 1.25); /* ровно одна строка */
display:-webkit-box;
-webkit-line-clamp:1;
-webkit-box-orient:vertical;
overflow:hidden;
}
.card-desc{
font-size:13.5px;
line-height:1.5;
min-height:0;
height:calc(13.5px * 1.5 * 4); /* ровно четыре строки */
margin:10px 0 14px;
display:-webkit-box;
-webkit-line-clamp:4;
-webkit-box-orient:vertical;
overflow:hidden;
}
.card-weight{ font-size:12.5px; }
.price{ font-size:17px; }
.price .cur{ font-size:13px; }
}
/* ---- КАРТИНКА В МОДАЛКЕ БЛЮДА --------------------------------------
В движке кадр 5:4 с object-position:center top — низ тарелки срезался.
Ставим квадрат и кадрируем от центра: снимок 4:3 обрезается по бокам
поровну, а не снизу.
max-height оставляем: без него на невысоком экране квадрат в 520px
вытолкнул бы описание и цену за пределы окна. Если он всё же сработает,
кадр обрежется симметрично сверху и снизу — центр тарелки на месте. */
.modal-media{
aspect-ratio:1 / 1;
max-height:min(58dvh, 520px);
}
.modal-media > img{ object-position:center center; }
/* То же в мобильном приложении — там кадр тоже 5:4. */
.wa-item-media{
aspect-ratio:1 / 1;
max-height:52dvh;
}
.wa-card-media{ aspect-ratio:1 / 1; }
/* ВАЖНО ПРО ПОРЯДОК: этот блок обязан идти ПОСЛЕ правил .modal-media выше.
Специфичность у них одинаковая, поэтому решает позиция в файле — когда
блок стоял раньше, базовое `aspect-ratio:1/1` перебивало `auto`, и на
десктопе фотография оставалась квадратной, не заполняя колонку. */
/* ---- МОДАЛКА БЛЮДА НА ДЕСКТОПЕ: ДВЕ КОЛОНКИ ------------------------
Как было в старом меню PUNTO: слева фотография, справа описание со своим
скроллом. В движке модалка одна на все ширины — узкая колонка 520px, где
под фотографией тянется длинный текст. На телефоне это правильно, на
мониторе выглядит колодцем.
КВАДРАТНАЯ ФОТОГРАФИЯ — ГЛАВНОЕ ТРЕБОВАНИЕ. Поэтому размер задаём не
колонке, а всему окну: aspect-ratio 2/1 у .modal делает высоту ровно
половиной ширины, а каждая из двух равных колонок получается квадратной
сама собой. Снимок заполняет свой квадрат целиком, по бокам ничего не
срезается сверх обычного кадрирования.
Ширина ограничена тремя величинами сразу, и третья тут не для красоты:
при aspect-ratio 2/1 высота = ширина/2, поэтому чтобы окно влезало в
невысокий экран, ширину нужно ограничить и высотой окна — 176dvh даёт
ровно 88dvh по высоте. Без этого на низком мониторе сработал бы
max-height, пропорция бы поехала и колонки перестали быть квадратными.
Разметку и JS не трогаем: порядок элементов в DOM тот же, меняется
только раскладка. Ниже 1024px всё остаётся как было.
ВАЖНО ПРО ПОРЯДОК: блок обязан идти ПОСЛЕ базовых правил .modal-media
выше. Специфичность одинаковая, решает позиция в файле. */
@media (min-width:1024px){
.modal{
/* Две строки подряд — не опечатка, а запасной вариант: если браузер не
знает dvh, он отбросит ВСЁ объявление с этой единицей, и останется
предыдущее. Без запасной строки уцелел бы только max-width:none, и
окно растянулось бы во всю ширину экрана. */
width:min(1100px, 94vw);
width:min(1100px, 94vw, 176dvh);
max-width:none;
min-height:0; /* окно не должно расти под длинное описание */
aspect-ratio:2 / 1; /* две квадратные колонки */
height:auto;
/* Штатный предохранитель движка НЕ снимаем, а повторяем — у оверлея нет
собственной прокрутки, и окно выше экрана оказалось бы недоступным
краями. В современном браузере он не сработает никогда: ширина уже
ограничена 176dvh, значит высота = ширина/2 <= 88dvh. А вот на
запасном пути (браузер без dvh) он и спасёт: пропорция 2:1 уступит,
колонки перестанут быть строго квадратными, но окно останется
целиком видимым. Две строки — тот же приём с запасной единицей. */
max-height:88vh;
max-height:88dvh;
display:grid;
grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
grid-template-rows:100%;
}
/* #modalMedia — безымянная обёртка из разметки, внутри неё .modal-media,
которую наполняет JS. Тянем обе на всю высоту квадрата. */
#modalMedia{ grid-column:1; grid-row:1; min-height:0; height:100%; }
.modal-media{
aspect-ratio:auto; /* размер задан колонкой, она уже квадратная */
max-height:none;
height:100%;
}
.modal-scroll{ grid-column:2; grid-row:1; min-height:0; height:100%; }
/* Шапка модалки лежит абсолютом поверх всего окна: бейдж категории — над
фотографией, крестик — над правой колонкой. Даём тексту отступ сверху,
чтобы заголовок не оказался под крестиком. */
.modal-body{ padding:58px 30px 30px; }
}
/* ---- КНОПКА «СМОТРЕТЬ МЕНЮ» ----------------------------------------
Убираем иконку вилки: она сдвигала надпись вправо от центра кнопки.
Прячем в теме, а не вырезаем из разметки, — иконка остаётся в HTML и
вернётся, если убрать эту строку.
justify-content:center нужен отдельно: .btn в движке inline-flex, без
него единственный оставшийся прижимался бы к началу. Разрядка
у прописных добавляет пробел после последней буквы, поэтому текст
сдвинут на её половину влево — компенсируем text-indent. */
.hero-cta .btn-primary > i{ display:none; }
.hero-cta .btn-primary{
justify-content:center;
gap:0;
padding-left:28px;
padding-right:28px;
text-indent:1.5px;
}
/* ---- ВИТРИНА: ЗАЛИВКИ, КОТОРЫЕ БЫЛИ БОРДОВЫМИ ----------------------
То же самое, что уже разведено в приложении, но на витрине и в корзине.
В прошлый раз я объявил витрину чистой — и ошибся: искал background
:var(--burgundy), а здесь цвет записан с запасным значением,
var(--burgundy,#4a1620), и поиск такие строки не нашёл. Правильный
запрос — по «var(--burgundy» без учёта того, что идёт следом.
Роли те же: действие — акцент с тёмным текстом, панель — приподнятый
нейтральный тон со светлым. */
/* Действия: «Получить код», кнопки-ссылки, счётчик количества, метка. */
.mp-btn,
.mp-btn-wide{
background:var(--terracotta);
color:#1a1a1a;
}
.mp-btn-ghost{
background:transparent;
color:var(--accent-ink);
border-color:rgba(var(--on-dark-rgb),.4);
}
.mp-qty button{ border-color:rgba(var(--on-dark-rgb),.4); }
.mp-qty button:hover,
.mp-back:not(:disabled):hover{
background:var(--terracotta);
color:#1a1a1a;
}
/* Переключатели в модалке блюда: пустой кружок было почти не видно, а
отмеченный заливался цветом фона и пропадал совсем — вместе с точкой
внутри, которая красилась в цвет поверхности. */
.mod-pick input{
border-color:rgba(var(--on-dark-rgb),.45);
background:var(--vanilla-3);
}
.mod-pick input:checked{
background:var(--terracotta);
border-color:var(--terracotta);
}
.mod-pick input[type=checkbox]:checked::after{ border-color:#1a1a1a; }
.mod-pick input[type=radio]:checked::after{ background:#1a1a1a; }
/* Согласие на SMS: в движке это системный чекбокс, на тёмном фоне он
выглядит чужеродно и в разных браузерах по-разному. Рисуем свой —
такой же, как в приложении. */
.mp-consent input{
appearance:none; -webkit-appearance:none;
width:20px; height:20px; flex:0 0 auto; margin-top:1px;
border:1.5px solid rgba(var(--on-dark-rgb),.5);
border-radius:6px;
background:var(--vanilla-3);
position:relative; cursor:pointer;
}
.mp-consent input:checked{ background:var(--terracotta); border-color:var(--terracotta); }
.mp-consent input:checked::after{
content:""; position:absolute; left:6px; top:2px; width:5px; height:10px;
border:solid #1a1a1a; border-width:0 2px 2px 0; transform:rotate(45deg);
}
/* Панели и плашки — не действия, поэтому нейтральный тон. */
.mp-panel,
.mp-seg-b.active,
.mp-ord-modal-box .mp-od-total,
.modal-x:hover{ background:var(--btn-dark); }
/* Метка на карте выбора адреса — как в приложении. */
.ymp-pin::before{
background:var(--terracotta);
border-color:#1a1a1a;
}
/* Ползунки прокрутки: бордовый на тёмном превращался в невидимый. */
body::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb,
.modal-scroll::-webkit-scrollbar-thumb{ background:var(--btn-dark); }
/* ---- ПРИЛОЖЕНИЕ: ЗАЛИВКИ, КОТОРЫЕ БЫЛИ БОРДОВЫМИ -------------------
Корень проблемы тот же, что уже ловили с текстом: токен играл две роли.
В движке --burgundy был И фоном страницы, И заливкой кнопок, чекбоксов,
плашек итога — они стояли на кремовой плите и потому читались. В тёмной
теме --burgundy стал цветом фона, и все эти элементы слились с ним:
кнопка «Получить код», галочка согласия, выбор модификаторов, итоги.
Делим по смыслу:
действие -> акцентная заливка + тёмный текст;
панель -> приподнятая нейтральная плашка + светлый текст. */
/* Главные кнопки приложения. Текст и иконка тёмные: светлые на золоте
дают меньше 2.5:1 и не читаются. */
.wa-btn-dark, .wa-btn-light{
background:var(--terracotta);
color:#1a1a1a;
}
.wa-btn-dark i, .wa-btn-light i{ color:#1a1a1a; }
/* На витрине у главной кнопки иконку убрали — в приложении делаем так же. */
.wa-btn-light > i{ display:none; }
/* Чекбоксы согласия и выбор модификаторов. Рамка — по линиям поверхностей,
отметка — акцентом, галочка внутри тёмная. */
.wa-check input,
.wa-mod input{
/* Рамка светлее линий-разделителей: у пустого квадратика это
единственное, чем он обозначен, и на 1.7:1 его просто не видно. */
border-color:rgba(var(--on-dark-rgb),.5);
background:var(--vanilla-3);
}
.wa-check input:checked,
.wa-mod input:checked{
background:var(--terracotta);
border-color:var(--terracotta);
}
.wa-check input:checked::after,
.wa-mod input[type=checkbox]:checked::after{ border-color:#1a1a1a; }
.wa-mod input[type=radio]:checked::after{ background:#1a1a1a; }
/* Панели и плашки: не действия, поэтому не золото, а приподнятый тон. */
.wa-total,
.wa-od-total,
.wa-me-ic,
.wa-seg-b.is-on,
.wa-geo{ background:var(--btn-dark); }
/* Метка на карте. Была тёмная с тёмной обводкой — на светлой карте
превращалась в пятно без силуэта. */
.ymp-pin::before{
background:var(--terracotta);
border-color:#1a1a1a;
}
/* Знак в шапке приложения: в движке 26px под компактный логотип MUSHTUM.
У знака PUNTO треть высоты файла — пустые поля, поэтому при 26px он
выглядел вдвое мельче, чем на витрине. Высота шапки 58px, 42 влезает. */
.wa-mark img{ height:42px; }
/* ---- СВЕТЛЫЕ ЗАЛИВКИ, ЗАБИТЫЕ ЦИФРАМИ ------------------------------
Четвёртая грань той же истории. Раньше ловили #hex, var(--token,#hex)
и rgba(); здесь цвет задан ГОЛЫМ светлым hex, без всякого токена:
#fbf6ec у полей ввода, #faf6ec и #fff у плиток истории заказов, #fff
у кнопки звонка. Такое не находится ни поиском по токену, ни скриптом
контраста (он смотрит пары «текст на фоне», а здесь текст берётся из
var(--ink), который в тёмной теме СВЕТЛЫЙ — светлое на светлом).
Нашлось полным перебором: резолвим каждое объявление background и
считаем яркость получившегося цвета. Всё, что светлее половины, в
тёмной теме заведомо чужое. */
/* Поле ввода внутри панели оформления: в движке перекрашено в #fbf6ec
поверх общего правила .mp-inp, поэтому токен тут не помогает. */
.mp-box .mp-inp{
background:var(--vanilla-3);
color:var(--ink);
border-color:var(--vanilla-line);
}
.mp-inp::placeholder{ color:var(--ink-mute); opacity:1; }
/* Плитки истории заказов. Активная — светлее обычной, как и было
задумано, но обе теперь в тёмной гамме. */
.mp-ord-card{
background:var(--vanilla-2);
border-color:var(--vanilla-line);
}
.mp-ord-card.active{
background:var(--vanilla-3);
border-color:var(--terracotta);
}
/* Кнопку «позвонить» тут НЕ трогаем: она уже перекрашена ниже в этом же
файле (патч 1.5.121, блок про белые плашки) — золотом с тёмным текстом.
Правило, поставленное здесь, всё равно проиграло бы тому по позиции,
зато осталось бы мёртвой строкой, противоречащей соседней. */
/* ---- ПОДВАЛ ---------------------------------------------------------
Четыре колонки в ряд и выключка влево, как на эталоне: знак с подписью,
«Язык», «Категории меню», «Контакты».
Правило под min-width:561px намеренно: ниже этой ширины в движке
работает аккордеон в одну колонку, и перебивать его нельзя. */
/* Колонка «Язык» в движке спрятана на десктопе (переключатель есть в шапке),
на эталоне PUNTO она в подвале есть — возвращаем. Без неё в сетке из
четырёх колонок оставалось три блока, и подвал разъезжался. */
.foot-lang{ display:block; }
@media (min-width:561px){
.foot-grid{
grid-template-columns:1.3fr 1fr 1fr 1.2fr;
gap:40px;
align-items:start;
}
/* Колонки ссылок — по центру, как в движке: заголовок и ссылки под ним
должны стоять по одной оси. Прошлая правка двигала влево весь столбец,
и заголовки разъехались с центрированными ссылками. Влево выключен
только блок со знаком — там подпись читается длинной строкой. */
/* Весь подвал по центру, включая блок со знаком: логотип и подпись под
ним стоят на одной оси, как и заголовки колонок со ссылками. */
.foot-brand, .foot-brand *,
.foot-col, .foot-col *,
.foot-acc, .foot-acc *{ text-align:center; }
.foot-brand .foot-plate{ margin:0 auto 18px; }
/* Ссылки — блоками в столбик, чтобы подчёркивание активного языка шло
по ширине колонки, а не по ширине слова. */
.foot-acc{ display:flex; flex-direction:column; align-items:stretch; }
}
.foot-brand .foot-plate img{
height:auto; max-height:76px; max-width:min(200px, 60vw);
/* ПОПРАВКА ПО УМОЛЧАНИЮ ВЫКЛЮЧЕНА.
Замер обоих скриншотов подвала попиксельно показал, что логотип,
подпись и нижняя строка стоят по центру экрана с точностью до
половины пикселя. Введённый было сдвиг -5% увёл знак на 7.6px влево и
сделал перекос настоящим — поэтому здесь 0.
Ручка оставлена: у этого начертания центр тяжести пикселей смещён
вправо на 12% ширины (тонкие штрихи слева, плотный круг справа), и
если знак ВСЁ РАВНО читается сдвинутым, крутить надо это число.
Отрицательное двигает влево, положительное вправо, проценты — от
ширины картинки, поэтому масштаб держится на любом экране. */
transform:translateX(var(--foot-logo-optical, 0));
}
/* Подпись под знаком: в движке это слоган с золотой полоской сверху и
разрядкой. На эталоне — обычная строка в две строки без украшений. */
.foot-tag{
border-top:0;
padding-top:0;
display:block;
/* Ширина ограничена, чтобы строка ломалась на две, как на эталоне,
а auto по бокам держит её по центру под знаком. */
max-width:320px;
margin-left:auto;
margin-right:auto;
font-family:var(--mono);
font-size:14px;
font-weight:400;
letter-spacing:0;
text-transform:none;
line-height:1.55;
color:rgba(var(--on-dark-rgb),.62);
}
.foot-col h4, .foot-col .foot-head{
font-family:var(--disp);
font-size:17px;
font-weight:700;
letter-spacing:0;
text-transform:none;
color:var(--on-dark);
margin-bottom:18px;
}
.foot-col a, .foot-col p{
font-size:15px;
letter-spacing:0;
margin-bottom:14px;
color:rgba(var(--on-dark-rgb),.72);
}
.foot-col a:hover{ color:var(--terracotta); }
/* Активный язык — акцентом и с подчёркиванием, как на эталоне. */
.foot-lang-link.active{
color:var(--terracotta);
border-bottom:1px solid rgba(var(--terracotta-rgb),.5);
padding-bottom:10px;
}
/* Нижняя строка: в движке 10.5px разрядкой и .5 прозрачности — на тёмном
фоне подвала это 3.8:1, читается на пределе. Крупнее и плотнее. */
.foot-bottom{
font-size:14px;
letter-spacing:0;
text-transform:none;
color:rgba(var(--on-dark-rgb),.62);
}
/* ---- ГЛАВНЫЕ КНОПКИ -------------------------------------------------
Золотая заливка и тёмный текст задаются ПАРОЙ. Порознь получается
светлое на светлом (или, как было у .modal-add, тёмное на тёмном). */
.btn-primary,
.mp-btn-primary,
.wa-btn-gold,
.modal-add{
background:var(--terracotta) !important;
color:#1a1a1a !important;
border-color:var(--terracotta) !important;
font-weight:600;
}
.btn-primary:hover,
.mp-btn-primary:hover,
.wa-btn-gold:hover,
.modal-add:hover{
background:var(--gold) !important;
border-color:var(--gold) !important;
}
/* ---- ПОЛЯ ВВОДА -----------------------------------------------------
Браузерная автоподстановка в Chrome заливает поле белым независимо от
фона. На тёмной теме получается белый прямоугольник с белым текстом. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill{
-webkit-text-fill-color:var(--ink);
-webkit-box-shadow:0 0 0 1000px var(--vanilla-2) inset;
caret-color:var(--ink);
transition:background-color 9999s ease-in-out 0s;
}
/* Плейсхолдеры на тёмном фоне почти не видны при наследовании цвета. */
::placeholder{ color:var(--ink-mute); opacity:1 }
/* ---- КАРТА ----------------------------------------------------------
Виджет Яндекса приходит со своей светлой подложкой. Не перекрашиваем
саму карту (это чужой iframe/canvas), но приводим обвязку к теме. */
.wa-mapov, .mp-map-wrap{ background:var(--burgundy-deep) }
/* ---- ВЫДЕЛЕНИЕ ТЕКСТА ---------------------------------------------- */
::selection{ background:var(--terracotta); color:#1a1a1a }
/* ---- ЗОЛОТЫЕ АКЦЕНТЫ ТОЧЕЧНО --------------------------------------
Там, где элемент должен быть золотым, задаём заливку И тёмный текст
одной парой — иначе получается светлое на светлом. */
.cat-btn.active,
.wa-chip.is-on,
.wa-badge,
.mod-req{
background:var(--terracotta);
color:#1a1a1a;
border-color:var(--terracotta);
}
/* Кнопка «позвонить» в карточке заказа стоит на белой плашке —
в тёмной теме основной текст светлый и на белом исчезает. */
.mp-od-btn-call{
background:var(--terracotta);
color:#1a1a1a;
border-color:var(--terracotta);
}