/* ========================================================================== Serikov Coffee 2026 — ВСПЛЫВАЮЩАЯ КАРТОЧКА «ТОВАР ДОБАВЛЕН» Заменяет модальное окно .sc-added: заказчик сказал, что модалка после каждого добавления неудобна. Карточка выезжает под шапкой у значка корзины и уходит сама. Макет — Frame 647 (Figma 8i6OJVbgxwTEd7Uka5r7fA, узел 52:3865), 416×187. Все числа ниже — координаты и размеры оттуда, ничего не придумано: фото 20/20, коробка 152×147, изображение вписано заголовок 191/20, ширина 205, Gotham Pro Black 24/1.1, ЗАГЛАВНЫМИ, #00723b, одна строка с многоточием подпись под заголовком с промежутком 16, Gotham Pro 14/1.3, чёрная счётчик 184/116, 84×51 (Frame 665, узел 52:3883) две кнопки 52×52, промежуток 12, слева 280, сверху 115 Правая кромка карточки ставится по правому краю шапки — это делает cart-popover.js, потому что у .head-plate поля заданы в двух файлах (site-hf.css 40*--u, site.css 48*--u, выигрывает второй) и повторять их числом здесь значило бы завести третье место, которое разъедется. ЕДИНИЦЫ. --scp-u — масштаб карточки. На десктопе это общий --u: карточка висит у шапки, а шапка (.head-inner, .hd-city-confirm) считана на --u, и при другом масштабе карточка выбивалась бы из ряда. На планшете и телефоне --u стоит на своём минимуме 0,70px (см. шапку mobile/tablet.css), поэтому там --scp-u:1px — числа макета читаются как пиксели один в один. СЛОЙ. Разбор фиксированных слоёв шаблона (он же в mobile/nav.css): контент 0–8, #site-header 100, .mnav 110, .fab/.hd-drop/.sc-added 120, .sc-addr-modal 130, .cookie 250, .pmodal 300, .promo15 400, .widgetScreen 500, .sc-city-modal 1000, .epay-alt 2000. Берём 125: выше содержимого, шапки, нижней панели и выпадающего меню каталога (с ним карточка пересекается геометрически — обе висят под шапкой, и только что появившаяся карточка должна быть сверху), но ниже самой нижней модалки .sc-addr-modal — любое модальное окно её накрывает. ========================================================================== */ .scp{ --scp-u:var(--u); /* Размеры счётчика вынесены в переменные: на телефоне тот же счётчик собирается из других чисел, а правила остаются одни. */ --scp-sw:calc(84 * var(--scp-u)); /* коробка счётчика */ --scp-sh:calc(51 * var(--scp-u)); --scp-so:calc(4 * var(--scp-u)); /* насколько рукотворный контур выходит за коробку */ --scp-sg:calc(11.76 * var(--scp-u));/* ширина знаков «−» и «+» */ position:fixed; /* До первой установки координат карточка стоит за краем экрана: JS считает место только когда она уже видима и её ширина известна. */ top:0;left:-9999px; z-index:125; width:calc(416 * var(--scp-u)); height:calc(187 * var(--scp-u)); background:#fff; border-radius:calc(32 * var(--scp-u)); box-shadow:0 0 calc(1.6 * var(--scp-u)) 0 #00723b; overflow:hidden; /* во фрейме включена обрезка содержимого */ font-family:var(--font); opacity:0; transform:translateY(calc(-8 * var(--scp-u))); transition:opacity .2s var(--ease),transform .2s var(--ease); } .scp.is-on{opacity:1;transform:none} /* Ниже по файлу карточка становится сеткой (телефон), а объявленный display перебил бы [hidden]{display:none} из таблицы браузера. */ .scp[hidden]{display:none} /* ---- фото ---- */ .scp-photo{ position:absolute;left:calc(20 * var(--scp-u));top:calc(20 * var(--scp-u)); width:calc(152 * var(--scp-u));height:calc(147 * var(--scp-u)); display:flex;align-items:center;justify-content:center; } .scp-photo[hidden]{display:none} .scp-photo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain} /* ---- название и подпись ---- */ .scp-text{ position:absolute;left:calc(191 * var(--scp-u));top:calc(20 * var(--scp-u)); width:calc(205 * var(--scp-u)); } .scp-name{ font-weight:900;font-size:calc(24 * var(--scp-u));line-height:1.1; text-transform:uppercase;color:#00723b; /* «одна строка, длинное название обрезается многоточием» — из макета */ white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .scp-name[hidden]{display:none} .scp-meta{ margin:calc(16 * var(--scp-u)) 0 0; font-weight:400;font-size:calc(14 * var(--scp-u));line-height:1.3;color:#000; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .scp-meta[hidden]{display:none} /* ---- счётчик «− 1 +» (Frame 665) ---- */ .scp-step{ position:absolute;left:calc(184 * var(--scp-u));top:calc(116 * var(--scp-u)); width:var(--scp-sw);height:var(--scp-sh); /* Ряд «− 1 +» собирается так же, как в карточке (card-actions.css): знаки своей ширины, промежуток 12 из макета, всё по центру коробки. Раньше кнопки были шириной 44 и стояли по краям, а знак отодвигался внутрь полем — но общее правило .scp-step button{padding:0} весит больше (0,1,1 против 0,1,0) и это поле съедало. Знаки прижимались вплотную к контуру: заказчик это и увидел. padding-top 2 при выравнивании по центру опускает ряд на 1 — тот самый сдвиг вниз, что стоит во фрейме. */ box-sizing:border-box; display:flex;align-items:center;justify-content:center; gap:calc(12 * var(--scp-u)); padding-top:calc(2 * var(--scp-u)); } /* Контур — отдельная рукотворная линия, она шире коробки на 4px с каждой стороны. max-width:none перебивает общее img{max-width:100%} из site.css (класс против элемента, порядок подключения тут ни при чём). */ .scp-line{ position:absolute;z-index:0;pointer-events:none;top:0;left:calc(-1 * var(--scp-so)); width:calc(var(--scp-sw) + 2 * var(--scp-so));height:var(--scp-sh); max-width:none; } /* Кнопки шире своих знаков: тап-цель 44×51 при знаках на местах из макета. Знак ставим полем от края кнопки, а не центрированием, — тогда «−» начинается ровно на 15px от левого края счётчика, а «+» кончается на 15px от правого, как во фрейме. Кнопки выходят за коробку на 2px в стороны — там пусто: слева фото кончается на 172, справа круглые кнопки начинаются на 280. */ .scp-step button{ position:relative;z-index:1;flex:none; display:grid;place-items:center; width:var(--scp-sg);height:100%; margin:0;padding:0;border:0;background:none;color:inherit; -webkit-appearance:none;appearance:none;cursor:pointer; } /* Тап-цель шире знака, но не занимает места в ряду — иначе знаки уехали бы от макетных 15px от края. Вверх цель уходит на padding-top коробки. */ .scp-step button::after{ content:"";position:absolute;top:calc(-2 * var(--scp-u));bottom:0; left:calc(-15 * var(--scp-u));right:calc(-15 * var(--scp-u)); } /* Фокус с клавиатуры — свечение по знаку «−»/«+», без прямоугольной обводки (правило «без обводки», BRAND-RULES §3.2); прозрачная тап-цель ::after не светится. Раньше обводилась она — прямоугольник внутри счётчика. */ .scp-step button:focus-visible{ outline:none;filter:drop-shadow(0 0 3px var(--green-brand)); } /* Высоту не задаём: у знаков она своя (1.728 и 11.616 при ширине 11.76), при height:auto пропорция файла сохраняется сама. */ .scp-step button img{width:var(--scp-sg);height:auto} /* Число — обычный элемент ряда, ширину не задаём: в макете «1» занимает 6,48, и это просто естественная ширина знака. Своя ширина развалила бы ряд 11,76 + 12 + число + 12 + 11,76 = 54 из фрейма. */ .scp-qty{ position:relative;z-index:1;flex:none; text-align:center; font-weight:500;font-size:calc(18 * var(--scp-u));line-height:1.6;color:#000; font-variant-numeric:tabular-nums; -webkit-user-select:none;user-select:none; pointer-events:none; /* число не должно перехватывать нажатия у кнопок */ } /* ---- бордовая «убрать» и зелёная «перейти в корзину» ---- */ .scp-acts{ position:absolute;left:calc(280 * var(--scp-u));top:calc(115 * var(--scp-u)); display:flex;gap:calc(12 * var(--scp-u)); } .scp-acts > *{ display:block;flex:none; width:calc(52 * var(--scp-u));height:calc(52 * var(--scp-u)); padding:0;background:none;border:0;cursor:pointer; } .scp-acts img{width:100%;height:100%} /* Пока запрос в пути — не даём нажать второй раз. */ .scp.is-busy .scp-step, .scp.is-busy .scp-del{opacity:.55;pointer-events:none} /* ========================================================================== ПОЛОСА ПРО СКИДКУ (.scp-loy) Герман 18.09.2026: «когда появляется плашка, когда в корзину закидываем, там нужно красиво отобразить процент скидки той ступени, на которой клиент, либо что за регистрацию идёт 15 % на первый заказ». В кадре Frame 647 такой полосы нет, и внутрь 416×187 её не вписать: между подписью и счётчиком пусто 36px, а фразы бывают в две строки. Поэтому полоса стоит ПОД кадром, а сам кадр остаётся ровно таким, как нарисован. Держится это так: дети карточки позиционированы absolute и высоты не дают, полоса — единственный обычный элемент в потоке, и её верхнее поле в 175 опускает её ниже кнопок (они кончаются на 167). Высоту карточки при этом снимаем: .scp--loy{height:auto}. Класс ставит cart-popover.js, когда сервер ответил, что покупателю есть что сказать. ПЛАШКИ БОЛЬШЕ НЕТ. Сначала полоса была зелёным прямоугольником (--green-pale со скруглением). Герман 21.09.2026: «мне не нравится зелёная обводка, убери обводку, сделай симпатичнее и крупнее». Поэтому теперь полоса ничем не подложена — она просто продолжение карточки, а вес ей дают не рамка и не фон, а кегль: подпись 15, цена 26. Это и ближе к правилу «без прямоугольной обводки» (BRAND-RULES §3.2): второй прямоугольник внутри карточки был ровно тем, чего оно не велит. ЦЕНА. Рядом с подписью стоят две цены: зачёркнутая — ровно та, что покупатель видел на полке, и новая, со скидкой. Черта у старой цены — та же рисованная cross.svg, что в карточке каталога (её ставит cart-popover.js), поэтому зачёркивание выглядит одинаково на всём сайте. ========================================================================== */ .scp-loy{ margin:calc(175 * var(--scp-u)) calc(20 * var(--scp-u)) calc(18 * var(--scp-u)); font-family:var(--font-ui); font-size:calc(15 * var(--scp-u));line-height:1.3; color:var(--green-deep-2); } .scp-loy[hidden]{display:none} /* Без полосы карточка остаётся кадром 416×187 — правило выше её не трогает. */ .scp--loy{height:auto} .scp-loy-line{display:block;font-weight:700} .scp-loy-line:empty{display:none} /* Строка цен. Перенос разрешён, но на практике не случается: два числа в одну строку помещаются даже на самом узком телефоне. */ .scp-loy-price{display:flex;flex-wrap:wrap;align-items:baseline; gap:0 calc(12 * var(--scp-u));margin-top:calc(5 * var(--scp-u))} .scp-loy-price[hidden]{display:none} /* Старая цена: чёрная, как в карточке каталога, — зачёркивает её рисунок, а не браузерная черта (text-decoration снят намеренно). */ .scp-loy-was{position:relative;color:#000;font-weight:700; font-size:calc(15 * var(--scp-u));text-decoration:none;white-space:nowrap} .scp-loy-was .pcross{position:absolute;left:calc(-2 * var(--scp-u));top:50%; width:calc(100% + 4 * var(--scp-u));max-width:none;height:auto; transform:translateY(-50%)} /* Новая цена — главное число полосы. */ .scp-loy-now{font-weight:900;font-size:calc(26 * var(--scp-u)); line-height:1;color:var(--green-brand);white-space:nowrap} /* «До скидки 7 % осталось 12 400 ₸» — вторая строка, тише первой. */ .scp-loy-hint{display:block;margin-top:calc(3 * var(--scp-u)); font-weight:400;font-size:calc(12.5 * var(--scp-u));opacity:.85} .scp-loy-hint[hidden]{display:none} .scp-loy-cta{display:inline-block;margin-top:calc(4 * var(--scp-u)); font-weight:700;color:var(--green-brand);text-decoration:underline} .scp-loy-cta[hidden]{display:none} .scp-loy-cta:focus-visible{outline:none;filter:drop-shadow(0 0 3px var(--green-brand))} /* ========================================================================== ТО ЖЕ ОКНО ПРО ИЗБРАННОЕ (.scp--fav) Заказчик просил подтверждение и на «в избранное». Отдельного кадра в макете нет, поэтому вторую карточку не рисуем: класс переодевает эту же. Отличие ровно одно и только здесь — счётчика нет: в избранном лежит сам товар, количества у него не бывает. Фото, название, подпись с весом и пара круглых кнопок 52×52 остаются на своих местах из Frame 647, у зелёной меняется только адрес (это делает cart-popover.js). display:none, а не visibility: коробка счётчика на телефоне занимает колонку сетки, и спрятанная «в невидимость» она растянула бы ряд. Специфичность 0,2,0 против 0,1,0 у .scp-step — !important не нужен. ========================================================================== */ .scp--fav .scp-step{display:none} /* ---- окно избранного без бордовой кнопки (.scp--nodrop) ---- Убрать товар из избранного можно только по номеру отложенной позиции, а у ТОЛЬКО ЧТО отложенного его нет: addToBasket.php не возвращает basket_id (см. canDrop() в cart-popover.js). Нажатие такой кнопки не сняло бы товар, а увело бы покупателя из каталога на страницу избранного — поэтому её вообще не показываем. Класс ставит render(), и он снимется сам, как только номер появится. display:none, как и у счётчика: на телефоне .scp-acts — колонка сетки, и «невидимая» кнопка держала бы её ширину. Заодно кнопка уходит из обхода клавиатурой, чего visibility/opacity не дают. Специфичность 0,3,0 против 0,2,0 у .scp-acts > * — !important не нужен. */ .scp--fav.scp--nodrop .scp-del{display:none} /* Зелёная кнопка остаётся одна. Коробка .scp-acts стоит слева на 280 из Frame 647 и рассчитана на пару 52+12+52, поэтому одинокая кнопка висела бы посреди карточки с провалом справа. Сдвигаем коробку на место второй кнопки: 280 + 52 + 12 = 344 — правая кромка ряда остаётся ровно там, где её нарисовали. Телефонная раскладка правится ниже, в своём медиа. */ .scp--fav.scp--nodrop .scp-acts{left:calc(344 * var(--scp-u))} /* ========================================================================== ПЛАНШЕТ В ПОРТРЕТЕ (768–1023px) Раскладка та же, что на десктопе, меняется только масштаб: --u здесь стоит на минимуме 0,70px, и на нём карточка вышла бы 291×131 с текстом в 16px и тап-целями в 30px. --scp-u:1px возвращает числа макета. ========================================================================== */ @media (min-width:768px) and (max-width:1023px) and (min-height:521px){ .scp{--scp-u:1px} } /* ========================================================================== ТЕЛЕФОН Отдельного макета всплывашки заказчик не рисовал. Поэтому здесь минимум: те же элементы в том же порядке, карточка во всю ширину минус поля и прижата к низу — на телефоне значка корзины в шапке нет, он переехал в нижнюю панель .mnav (mobile/nav.js). Высота панели 60px + «чёлка» взята из mobile/nav.css, сверху ещё 10px просвета. ========================================================================== */ @media (max-width:767px), (max-width:1023px) and (max-height:520px){ .scp{ --scp-u:1px; left:12px;right:12px;top:auto; bottom:calc(70px + env(safe-area-inset-bottom,0px)); width:auto;height:auto; border-radius:24px; padding:14px; display:grid; grid-template-columns:88px minmax(0,1fr) auto; /* Полоса про скидку — третьим рядом во всю ширину. Ряд появляется только когда полоса есть: пустой grid-area места не занимает. */ grid-template-areas: 'photo text text' 'photo step acts' 'loy loy loy'; column-gap:12px;row-gap:12px; align-items:center; transform:translateY(8px); /* выезжает снизу, а не сверху */ } .scp.is-on{transform:none} /* В разделах каталога над нижней панелью висит ещё и бутстраповская кнопка «Фильтр» (.btn.fixed-bottom, высота 52, поднята над панелью в mobile/base.css). Без поправки она накрывала нижнюю половину всплывашки — ровно счётчик и кнопки. Поднимаем над обеими: 60 панель + 52 кнопка + 10 просвет. */ body:has(.btn.fixed-bottom) .scp{ bottom:calc(122px + env(safe-area-inset-bottom,0px))} .scp-photo{position:static;grid-area:photo;width:88px;height:88px} .scp-text{position:static;grid-area:text;width:auto;align-self:end} .scp-name{font-size:18px} .scp-meta{margin-top:6px;font-size:13px} /* position:relative вместо absolute: знаки внутри по-прежнему считаются от коробки счётчика. */ .scp-step{position:relative;grid-area:step;left:auto;top:auto;justify-self:start} .scp-acts{position:relative;grid-area:acts;left:auto;top:auto;justify-self:end} /* Десктопный сдвиг ряда кнопок (344) телефону не нужен: здесь коробка стоит в сетке и прижата вправо (justify-self:end), одинокая зелёная кнопка встаёт на место сама. Повторяем ту же специфичность 0,3,0, что и у правила выше, — иначе оно перебило бы left:auto и вытолкнуло кнопки за край. */ .scp--fav.scp--nodrop .scp-acts{left:auto} /* Полоса скидки в сетке: верхнее поле в 175 (им она на десктопе уходила под кадр) здесь не нужно — ряд и так третий. Поля по бокам тоже: у карточки на телефоне своё padding:14. */ .scp-loy{grid-area:loy;margin:0;font-size:14px} .scp-loy-price{gap:0 10px;margin-top:4px} .scp-loy-was{font-size:14px} .scp-loy-now{font-size:22px} .scp-loy-hint{margin-top:3px;font-size:12px} .scp-loy-cta{margin-top:4px} }