/* ============================================================================ Аквакультура — оживление витрины ---------------------------------------------------------------------------- Куда вставлять: Настройки сайта → Вставка кода → Пользовательские CSS-стили ПРАВИЛО, КОТОРОЕ ЗДЕСЬ СОБЛЮДАЕТСЯ: трогаем только те свойства, которые не участвуют в раскладке — transition, box-shadow, transform, border-color, background, opacity. НЕ трогаем position, display, width, height, float, margin — на них держится сетка Тильды, и поломка будет неочевидной. ПРО ДВОЙНЫЕ КЛАССЫ вида .t-store__card.t-store__card — это не опечатка. У Тильды на те же элементы уже висят свои правила (анимация появления карточек, переходы у кнопок), и одиночный селектор ими перебивается. Повтор класса поднимает приоритет, не прибегая к !important, который потом трудно отследить. Версия 2.2 (2026-09-12) — страница товара, дизайн-система вынесена в отдельный раздел (см. DESIGN-SYSTEM.md) ========================================================================== */ /* ============================================================================ ДИЗАЙН-СИСТЕМА — ШПАРГАЛКА ---------------------------------------------------------------------------- Подробное объяснение «почему именно так» — в файле DESIGN-SYSTEM.md рядом с этим стилем. Здесь — только то, что нужно держать перед глазами, когда делаешь новый блок или новую страницу. 1. ЦВЕТ Оранжевый --aq-brand — только на то, что можно нажать или на цену. Если оранжевого на экране больше одного смыслового пятна — что-то не так. Серый --aq-ink-soft — второстепенное: категория, подпись, описание. Серый + зачёркивание — и только оно — означает «старая цена». Фон витрины --aq-ground, поверхности карточек — белые. 2. ШРИФТ: размер = роль, а не «покрупнее/помельче» 30 / 1.25 700 заголовок страницы товара 26-30 700 цена (число) 22 / 1.3 600 заголовок раздела («Ваш заказ») 20 / 1.35 600 название товара в карточке 18 / 1.35 600 «Итого» 17 / 1.35 600 строка товара в корзине, количество, сумма строки 16 / 1.7 400 описание (основной текст) 18 / 500 приписки к цене: «р.» и «/1 кг» 15 / 400 ссылки-возвраты, вторичные подписи 14 / 400 категория товара, бренд 13 / .06em caps подпись над полем ввода 13 / 500 приписки к старой цене Разный вес при одинаковом размере читается как «другой шрифт» — этого избегаем: меняем что-то одно. 3. ОТСТУПЫ — шаг 4, ходовые значения 8 / 14 / 20 / 26 / 32 / 56 / 80. Ничто не прилипает к краю: у любого блока с фоном или рамкой есть внутренний отступ не меньше 14. 4. РАЗМЕРЫ ЭЛЕМЕНТОВ УПРАВЛЕНИЯ главная кнопка 52 высота, радиус 8, минимум 240 ширины поле/список 44 высота, радиус 8 круглая кнопка ± 30, радиус 50% кнопка удаления 38, радиус 50% Радиусы: 8 — элементы управления, 10-14 — поверхности (карточка, фото). 5. РЕАКЦИЯ НА ДЕЙСТВИЕ — обязательна у всего нажимаемого. Наведение: цвет темнеет или появляется рамка/подчёркивание, .15s ease. Нажатие: transform: translateY(1px). Фокус с клавиатуры: кольцо 3px rgba(206,97,55,.16). 6. ПРОЧНОСТЬ К ЧУЖОМУ КОНТЕНТУ Владелец завтра загрузит фото другой пропорции и название в три строки. Поэтому: у фото — фиксированная пропорция и object-fit/background-size: contain (никогда cover — режет товар); у названий — -webkit-line-clamp и min-height, чтобы соседние карточки не разъезжались; у текста — max-width около 62 символов. Правило: содержимое не должно уметь растянуть раскладку. ========================================================================== */ /* --- 0. Палитра ------------------------------------------------------------ Цвета не придуманы, а взяты пипеткой из логотипа (файл 1182x1182). Два цвета покрывают 90 % пикселей логотипа: #ce6137 оранжевый — 113 770 пикселей #545456 серый — 19 431 пиксель Раньше в стилях стоял #ca6139 «на глаз» — близко, но мимо. Заменено. Остальное выведено отсюда: чернила чуть теплее серого, линии — тот же серый в прозрачности, фон витрины — почти белый с тёплым уклоном, чтобы белые карточки на нём читались как карточки. */ :root { --aq-brand: #ce6137; /* оранжевый из логотипа */ --aq-brand-dk: #b4502b; /* он же темнее — для нажатия */ --aq-ink: #2e2a27; /* заголовки: тёплый тёмный, НЕ чистый чёрный */ --aq-ink-soft: #6f6a66; /* описания, второстепенное */ --aq-line: rgba(84, 84, 86, .14); /* волосяная линия из серого логотипа */ --aq-ground: #faf8f6; /* фон витрины */ --aq-shadow: 46, 42, 39; /* тень в тон чернилам, а не чёрная */ } /* --- 1. Служебное: убрать «от N дней» у вариантов доставки ----------------- Поле «Срок доставки» обязательное, и у варианта «Доставка по адресу» Тильда молча возвращает 0 обратно в 1. Поэтому подпись убираем стилями. */ .t706 .delivery-minimum-time { display: none !important; } /* --- 2. Меню ME302: перестаёт перекрывать каталог + бургер на мобильных ---- ГЛАВНАЯ ПОЛОМКА, НАЙДЕННАЯ 11.09. Одна причина — три видимых симптома. Блок меню T446 рассчитан лежать ПОВЕРХ обложки (блок «Обложка» выключен). Поэтому на широком экране он `position: absolute`, а его запись в потоке имеет высоту 0. То есть это невидимый прямоугольник 400 px высотой, лежащий поверх начала страницы. Замерено на живом сайте: меню-невидимка y = 0 … 400 фильтр категорий y = 210 … 273 <- целиком под меню первая карточка y = 313 … <- верх тоже под меню иконки соцсетей x = 1309…1511, y = 200…400 <- поверх карточки №3 Отсюда: - фильтр не нажимался вообще (elementFromPoint в центре кнопки «Все» возвращал div.t446, а не саму кнопку); - при наведении на карточку №3 подсвечивалась иконка соцсети, и рамки «пересекались»; - на узком экране (<= 980 px) меню становится обычным блоком высотой 649 px и съедает весь первый экран целиком. Лечение без вмешательства в вёрстку: меню перестаёт ловить мышь, ловят только ссылки и логотип. Ничего не двигается, клики проходят насквозь к каталогу. */ #rec1823839381 .t446 { pointer-events: none; } #rec1823839381 .t446 a, #rec1823839381 .t446 img, #rec1823839381 .t446 .t-menu__link-item { pointer-events: auto; } /* Иконки соцсетей из меню висели прямо над карточкой №3. Ровно тот же набор из 4 сетей уже есть в блоке контактов внизу (rec1823839481), так что здесь ничего не теряется. */ #rec1823839381 .t446__additionalwrapper { display: none; } /* На узком экране (<= 980 px) меню разворачивалось в столбик высотой 649 px и съедало первый экран целиком. Сначала мы обошли это, уложив пункты в строку. 11.09 выяснилось, что обход не нужен: блок меню — это **ME302**, а не легаси-T446 (классы `t446__*` — просто его разметка). У ME302 есть штатная настройка, и она была выключена: Настройки блока меню → НАСТРОЙКИ МОБИЛЬНОЙ ВЕРСИИ [x] Показывать «гамбургер» в мобильной версии [x] Фиксация при скролле в мобильной версии [x] Располагать логотип в шапке меню в мобильной версии Цвет «гамбургера» #1e1914 Цвет подложки #ffffff Прежний обход (раскладка пунктов в строку) отсюда УБРАН намеренно: в режиме бургера пункты живут в выезжающей панели, и правила вида `.t446__list { display: flex }` эту панель ломали бы. Осталось из CSS только то, чего в настройках блока нет. */ /* Логотип в мобильной шапке. Штатная настройка «Ширина изображения» одна на все экраны — уменьшив её, мы уменьшили бы и десктопный логотип. Поэтому размер задаём здесь, адресно для мобильной шапки: при 200 px шапка вырастала до 240 px и закрывала пол-экрана телефона. С 64 px шапка получается 84 px — обычная высота мобильной шапки. ПРО ВЫЕЗЖАЮЩУЮ ПАНЕЛЬ. Тильда показывает её сама: вешает на блок инлайн-стили `display: block/none` и `top: <высота шапки>`, позиция — `fixed`. Поэтому position и top мы НЕ трогаем: стоит выставить `position: static`, и панель начинает занимать место в потоке даже когда закрыта — каталог уезжает вниз на 400 px. Проверено. Чинить надо две другие вещи: 1) у панели нет фона — пункты меню читались поверх фотографий товара; 2) внутри панели остаётся ДЕСКТОПНАЯ раскладка (контейнер 1200 px, половинки меню absolute слева и справа), из-за чего «Каталог» уезжал за экран. Разворачиваем пункты в столбик. Инлайновую `height: 200px` тоже снимаем — на пять пунктов её не хватает. */ @media screen and (max-width: 980px) { .tmenu-mobile .tmenu-mobile__logo img, .tmenu-mobile img { width: 64px !important; } .tmenu-mobile .tmenu-mobile__container { padding-top: 10px !important; padding-bottom: 10px !important; } /* Шапка зафиксирована, поэтому каталог должен начинаться ниже неё, иначе фильтр категорий уезжает под шапку и снова не нажимается. 84 px шапка + запас. */ #rec1823839431.t-rec_pt_210 { padding-top: 104px !important; } /* Шапка должна отделяться от витрины. Без этого белая шапка на белом контенте выглядит как ничто — именно на это и жаловались. */ .tmenu-mobile { border-bottom: 1px solid var(--aq-line) !important; box-shadow: 0 2px 10px rgba(var(--aq-shadow), .07) !important; } /* --- выезжающая панель бургера --- Панель раскрывается ПОВЕРХ карточек товара. Без собственного фона, границы и заметной тени получалось белое по белому: пункты меню висели прямо на фотографиях. Тень здесь намеренно сильнее обычной. */ .t446[class*="tmenu-mobile__menucontent"] { width: 100% !important; height: auto !important; max-height: calc(100vh - 84px); overflow-y: auto; background: #fff !important; padding: 8px 0 20px; border-bottom: 1px solid var(--aq-line) !important; box-shadow: 0 14px 34px rgba(var(--aq-shadow), .20) !important; } /* Пункты разделены волосяной линией — список читается как список. */ .t446[class*="tmenu-mobile__menucontent"] .t446__list_item { border-top: 1px solid rgba(84, 84, 86, .10); } .t446[class*="tmenu-mobile__menucontent"] .t446__leftwrapper .t446__list_item:first-child { border-top: 0; } .t446[class*="tmenu-mobile__menucontent"] .t446__maincontainer { width: 100% !important; height: auto !important; display: block !important; } .t446[class*="tmenu-mobile__menucontent"] .t446__leftwrapper, .t446[class*="tmenu-mobile__menucontent"] .t446__rightwrapper { position: static !important; width: 100% !important; height: auto !important; padding: 0 !important; float: none !important; } .t446[class*="tmenu-mobile__menucontent"] .t446__leftmenuwrapper, .t446[class*="tmenu-mobile__menucontent"] .t446__rightmenuwrapper { width: 100% !important; height: auto !important; } .t446[class*="tmenu-mobile__menucontent"] .t446__list { display: block !important; height: auto !important; } .t446[class*="tmenu-mobile__menucontent"] .t446__list_item { display: block !important; width: auto !important; text-align: center; margin: 0 !important; padding: 11px 0 !important; } /* логотип уже стоит в шапке, второй раз внутри панели не нужен */ .t446[class*="tmenu-mobile__menucontent"] .t446__logowrapper, .t446[class*="tmenu-mobile__menucontent"] .t446__logowrapper2 { display: none !important; } } /* --- 3. Карточка товара: одна высота, фото целиком, отклик на курсор ------- ЧТО БЫЛО НЕ ТАК (найдено 11.09 на экране 1920): 1) ВЫСОТА КАРТОЧЕК ПЛЫЛА. Замерено: 468 px у большинства, 495 px там, где заголовок занимает две строки, 498 px у единственного товара с описанием («Филе форели горной»). Ряд тянется по самой высокой карточке, поэтому «ступеньки» были видны между рядами. 2) ФОТО ОБРЕЗАЛОСЬ. Тильда отдавала картинку с CDN уже подрезанной под квадрат: `/-/cover/432x444/`. Оригинал «Форели Горной» — 686x1024, то есть примерно треть кадра просто выбрасывалась. Отсюда и «фото упирается в край» и «вылезает за рамку при наведении». ЧТО ИСПРАВЛЕНО НАСТРОЙКОЙ БЛОКА (не здесь, но связано): Настройки блока каталога → КАРТОЧКИ [x] Оригинальное соотношение сторон изображений [x] Выравнивать кнопки в карточках по низу После этого Тильда отдаёт неподрезанный файл и ставит тег img с `object-fit: contain` вместо фонового блока. Высота рамки (370 px) остаётся общей для всех, то есть сетка не разъезжается. ВНИМАНИЕ НА БУДУЩЕЕ: класса `.t-store__card__bgimg` больше нет — в режиме оригинальных пропорций это img.t-store__card__img. Старые правила, написанные под bgimg, молча перестают работать. ЧТО ДОДЕЛАНО ЗДЕСЬ: - поля вокруг фото, чтобы оно не упиралось в край карточки; - заголовку отведено ровно две строки, описанию — ровно две; - цена прижата к низу, поэтому у всех карточек она на одной линии; - у карточки без описания это место просто остаётся пустым. Результат: все 36 карточек ровно 522 px. 150 px — минимальная высота, при которой сетка ещё не разъезжается; взято 152 px с запасом. */ /* Фон витрины. Белые карточки на чистом белом не читаются как карточки — нужна подложка хоть на пару тонов темнее. */ #rec1823839431 { background-color: var(--aq-ground) !important; } .t-store__card.t-store__card { position: relative; transition: transform .18s ease; } /* Поверхность карточки. Раньше она показывалась только на наведении, теперь видна всегда — товар должен выглядеть как товар на полке, а не как вырезка на белом листе. ВАЖНО ПРО z-index. Здесь стоит 0, а не -1. С -1 псевдоэлемент уходит ЗА фон секции, и как только у витрины появился свой цвет фона — карточки просто исчезли. Проверено: поймали ровно этот эффект. Поэтому подложка на 0, а содержимое карточки поднято на 1. */ .t-store__card.t-store__card::before { content: ""; position: absolute; top: -14px; bottom: -14px; left: 6px; right: 6px; z-index: 0; border-radius: 12px; background: #fff; border: 1px solid var(--aq-line); box-shadow: 0 1px 2px rgba(var(--aq-shadow), .05), 0 4px 10px rgba(var(--aq-shadow), .04); transition: box-shadow .18s ease, border-color .18s ease; pointer-events: none; } .t-store__card.t-store__card > * { position: relative; z-index: 1; } .t-store__card.t-store__card:hover { transform: translateY(-2px); } .t-store__card.t-store__card:hover::before { border-color: rgba(206, 97, 55, .35); box-shadow: 0 2px 4px rgba(var(--aq-shadow), .07), 0 12px 26px rgba(var(--aq-shadow), .13); } /* Поля вокруг фото. padding + box-sizing ужимают область, в которой object-fit вписывает картинку, — сама рамка 370 px не меняется. Заодно эти поля гасят увеличение на наведении: картинке есть куда расти, и она не упирается в край. width/height: 100% — НЕ УБИРАТЬ. Без них картинки схлопываются в миниатюры. Механика такая: Тильда просит у CDN файл под фактический размер элемента. У img здесь `width/height: auto`, ограниченные только `max-width/max-height: 100%`, поэтому размер элемента берётся из собственного размера картинки. Получается замкнутый круг: маленький элемент → у CDN запрашивается маленький файл → элемент становится ещё меньше. Поймано на ширине окна 1207 px: с CDN приезжал файл 25x38, и фото висело размером с иконку посреди карточки. Жёсткие 100% разрывают круг: коробка всегда во всю рамку, а вписыванием занимается object-fit. */ .t-store__card__imgwrapper .t-store__card__img { width: 100% !important; height: 100% !important; padding: 16px !important; box-sizing: border-box !important; object-fit: contain !important; } /* Мягкое приближение фото под курсором. Селектор по img, а не по bgimg — см. предупреждение выше. */ .t-store__card__imgwrapper { overflow: hidden; } .t-store__card__imgwrapper .t-store__card__img, .t-store__card__imgwrapper img { transition: transform .35s ease; } .t-store__card:hover .t-store__card__imgwrapper .t-store__card__img, .t-store__card:hover .t-store__card__imgwrapper img { transform: scale(1.04); } /* Текстовая часть одной высоты у всех карточек. 172, а не 160: замерено по всем 36 карточкам — с описанием в одну строку блок вырастает до 172, и карточки расходились ровно на эти 12 px. Берём максимум, тогда высота у всех одна независимо от описания. */ .t-store__card__textwrapper { display: flex !important; flex-direction: column !important; min-height: 172px !important; box-sizing: border-box !important; } /* Поля по бокам — текст не должен упираться в край карточки. */ .t-store__card__textwrapper { padding-left: 18px !important; padding-right: 18px !important; } /* Заголовок — ровно две строки. Короткий занимает столько же места, длинный обрезается многоточием, а не растит карточку. max-width уже ширины карточки специально: иначе длинное название («Осьминоги молодые очищенные 40-60 с/м») тянется во всю ширину и упирается в оба края. С 230 px оно переносится на вторую строку раньше и получает воздух по бокам. Цвет — тёплый тёмный из палитры, а не чистый чёрный: именно чёрный на белом и давал ощущение «картонной вырезки». */ .t-store__card__title { font-size: 20px !important; /* было 18 — для главного текста карточки мелко */ line-height: 1.35 !important; min-height: 56px !important; /* ровно две строки при 20/1.35 */ max-width: 240px; margin-left: auto !important; margin-right: auto !important; color: var(--aq-ink) !important; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Описание — не больше двух строк, приглушённым серым. */ .t-store__card__descr { display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-height: 44px !important; color: var(--aq-ink-soft) !important; } /* Цена — брендовым оранжевым: на карточке это главное число. */ .js-store-prod-price-val { color: var(--aq-brand) !important; } /* Цена прижата к низу — у всех карточек она оказывается на одной линии. padding-top даёт гарантированный зазор от описания: прижатая `auto`-полями цена иначе вплотную подходит к тексту, когда описание занимает две строки (на телефоне это происходит почти всегда). Замерено: было 0 px. */ .t-store__card__price-wrapper { margin-top: auto !important; padding-top: 12px !important; } /* Цена состояла из трёх цветов: число оранжевое, «р.» чёрное, а единица («/1 кг») выглядела серой. Серой она была не по цвету, а из-за opacity: 0.5 — цвет там такой же чёрный. Снимаем прозрачность: у текущей цены единица становится чёрной, как и «р.», а у старой цены остаётся серой, потому что там серый задан цветом. Итог: серый в карточке означает ровно одно — «старая цена». */ .t-store__prod__price-portion { opacity: 1 !important; } /* «р.» и «/1 кг» — одного размера и веса. Было: «р.» 26 px, «/1 кг» 20.8 px, обе 700. Одинаковый вес при разном размере читается как разный вес — отсюда ощущение «одно жирное, другое обычное». Обе уводим в 18/500: число остаётся героем строки, приписки к нему — ровным подголоском. У старой цены то же самое, но мельче. */ .t-store__card__price-currency, .t-store__prod__price-portion { font-size: 18px !important; font-weight: 500 !important; } .t-store__card__price_old .t-store__card__price-currency, .t-store__card__price_old .t-store__prod__price-portion { font-size: 13px !important; font-weight: 500 !important; } /* --- 4. Меню: видно, на каком пункте курсор ------------------------------ Пункты меню никак не отзывались на наведение — непонятно, куда попадёшь. На десктопе подчёркиваем и притемняем, на телефоне подсвечиваем всю строку: пальцем в узкую подпись не целятся, нажимают по строке целиком. */ .t446 .t-menu__link-item { border-bottom: 1px solid transparent; transition: color .15s ease, border-color .15s ease; } .t446 .t446__list_item:hover .t-menu__link-item { color: var(--aq-brand-dk) !important; border-bottom-color: currentColor; } @media screen and (max-width: 980px) { .t446[class*="tmenu-mobile__menucontent"] .t446__list_item { transition: background-color .15s ease; } .t446[class*="tmenu-mobile__menucontent"] .t446__list_item:hover, .t446[class*="tmenu-mobile__menucontent"] .t446__list_item:active { background-color: rgba(206, 97, 55, .07); } /* в выехавшей панели подчёркивание лишнее — подсветки строки достаточно */ .t446[class*="tmenu-mobile__menucontent"] .t446__list_item:hover .t-menu__link-item { border-bottom-color: transparent; } /* сам значок бургера тоже отзывается на нажатие */ .tmenu-mobile [class*="menuburger"] { transition: opacity .15s ease; } .tmenu-mobile [class*="menuburger"]:active { opacity: .55; } } /* --- 5. Кнопки: нажатие ощущается ------------------------------------------ Наведение — чуть темнее и на пиксель выше. Нажатие — кнопка «вдавливается» обратно. ЗДЕСЬ ЕДИНСТВЕННОЕ МЕСТО, ГДЕ ПРИШЛОСЬ ПОСТАВИТЬ !important НА transition. Тильда для каждого блока с кнопкой печатает прямо в страницу правило вида #rec1823839431 .t-btnflex.t-btnflex_type_button { transition: ... } В нём есть id блока, а вес id в CSS перебить повтором классов нельзя в принципе. Свой transition поэтому помечен !important. Сами эффекты (:hover / :active) обходятся без !important — Тильда их не задаёт, конфликта нет. */ .t-btn.t-btn, .t-submit.t-submit, .t-btnflex.t-btnflex, .t-store__card__btn.t-store__card__btn, .t-store__prod-popup__btn.t-store__prod-popup__btn { transition: filter .15s ease, transform .12s ease, box-shadow .15s ease, background-color .2s ease-in-out, color .2s ease-in-out !important; } .t-btn.t-btn:hover, .t-submit.t-submit:hover, .t-btnflex.t-btnflex:hover, .t-store__card__btn.t-store__card__btn:hover, .t-store__prod-popup__btn.t-store__prod-popup__btn:hover { filter: brightness(.92); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(30, 25, 20, .18); } .t-btn.t-btn:active, .t-submit.t-submit:active, .t-btnflex.t-btnflex:active, .t-store__card__btn.t-store__card__btn:active, .t-store__prod-popup__btn.t-store__prod-popup__btn:active { transform: translateY(0); box-shadow: none; } /* --- 6. Пустой раздел: человеческая заглушка вместо «Nothing found» ------ Когда в разделе нет товаров, Тильда пишет `Nothing found` / «Ничего не найдено» — сухо и не по-нашему. Почему было именно по-английски: Настройки сайта → Ещё → ЯЗЫК САЙТА стоял в положении «Автоопределение», то есть язык брался из браузера посетителя. У кого браузер английский — тот видел и `Nothing found`, и `All` вместо «Все», и `1 kg` вместо «1 кг». Сейчас там жёстко выставлен «Русский», магазин у нас всё равно только для России. Сам текст заглушки настройкой не меняется, поэтому подменяем его здесь: исходную строку схлопываем в нулевой размер, свою выводим псевдоэлементами. */ .t-store__empty-part-msg { font-size: 0 !important; line-height: 0 !important; } .t-store__empty-part-msg::before { content: "Сети пока пусты"; display: block; font-size: 26px; line-height: 1.3; margin-bottom: 10px; } .t-store__empty-part-msg::after { content: "Этот раздел мы ещё наполняем. Загляните в соседние — там улов побогаче."; display: block; font-size: 16px; line-height: 1.5; opacity: .7; } /* --- 7. Фильтры категорий: видно, что это ссылки --------------------------- */ .t-store__tabs__item, .t-store__filter__item, .t-store__parts-switch-btn, .t-feed__parts-switch-btn { transition: color .15s ease, border-color .15s ease, background-color .15s ease; } .t-store__tabs__item:hover, .t-store__filter__item:hover, .t-store__parts-switch-btn:hover, .t-feed__parts-switch-btn:hover { color: var(--aq-brand); border-color: var(--aq-brand); } /* --- 8. Отзывы: карусель больше не замирает на полкарточки ---------------- У ленты отзывов (.t1186__slider) стоит overflow-x: auto, то есть её можно утащить вбок обычным горизонтальным жестом тачпада — что легко сделать случайно, просто прокручивая страницу. Браузер запоминает это положение, и отзывы открываются «с середины»: первые два отзыва уехали за левый край, третий обрезан справа. На холодной загрузке лента стоит правильно (scrollLeft = 20, первая карточка вровень с заголовком) — поломка появляется именно от случайного бокового жеста. scroll-snap заставляет ленту всегда доезжать до границы карточки, а не замирать в произвольной точке. proximity, а не mandatory: mandatory спорит с собственной анимацией стрелок Тильды, proximity только подтягивает к ближайшей карточке. */ .t1186__slider { scroll-snap-type: x proximity; } .t1186__item { scroll-snap-align: start; } /* --- 9. Корзина: строка товара подсвечивается ------------------------------ */ .t706__product { transition: background-color .15s ease; } .t706__product:hover { background-color: rgba(206, 97, 55, .05); } /* --- 10. Поля ввода: акцентная рамка в фокусе ------------------------------- */ .t-input, .t-inputtel, textarea.t-input { transition: border-color .15s ease, box-shadow .15s ease; } .t-input:focus, .t-inputtel:focus, textarea.t-input:focus { border-color: var(--aq-brand) !important; box-shadow: 0 0 0 3px rgba(206, 97, 55, .16); outline: none; } /* --- 11. Иконки соцсетей ---------------------------------------------------- */ .t-sociallinks__item { transition: transform .15s ease, opacity .15s ease; } .t-sociallinks__item:hover { transform: translateY(-2px); opacity: .85; } /* --- 12. Клавиатурный фокус ------------------------------------------------ Сейчас пройти сайт с клавиатуры невозможно — не видно, где находишься. :focus-visible срабатывает только при навигации с клавиатуры, мышью эта обводка не появляется. */ a:focus-visible, button:focus-visible, .t-btn:focus-visible, .t-store__card:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--aq-brand); outline-offset: 3px; border-radius: 2px; } /* --- 13. Уважение к настройкам системы ------------------------------------- Если у человека в системе отключены анимации (укачивание, вестибулярные расстройства, слабое устройство) — выключаем все переходы. */ @media (prefers-reduced-motion: reduce) { .t-store__card, .t-store__card__imgwrapper img, .t-store__card__imgwrapper .t-store__card__img, .t-btn, .t-submit, .t-btnflex, .t-store__card__btn, .t-store__prod-popup__btn, .t-store__tabs__item, .t-store__filter__item, .t-store__parts-switch-btn, .t-feed__parts-switch-btn, .t706__product, .t-input, .t-sociallinks__item { transition: none !important; } .t-store__card:hover, .t-store__card:hover .t-store__card__imgwrapper img, .t-btn:hover, .t-sociallinks__item:hover { transform: none !important; } } /* --- 14. Зазор между рядами карточек --------------------------------------- Подложка карточки выступает на 14 px вверх и вниз — значит двум соседним рядам нужно минимум 28 px между собой, иначе подложка нижнего ряда накрывает цену верхнего. На ширине окна 1207 px замерено: зазор между рядами РОВНО 0. Это не наша поломка — без нашего CSS там тоже 0, просто без подложки этого не было видно. Причина в сетке Тильды: на этой ширине третья карточка не влезает в контейнер (1192 px) буквально на несколько пикселей, ряды из трёх сжимаются, ряды из двух — нет, и карточки получаются двух разных ширин (360 и 324). Высота у них тоже разная, отсюда и схлопывание зазора. 30 px с запасом перекрывают 28 px выступа. Проверено на трёх ширинах: 1920 — зазор 120, 1207 — 30, 430 — 90. Нигде не накладывается. */ .t-store__card.t-store__card { margin-bottom: 30px !important; } /* --- 15. Корзина ---------------------------------------------------------- Корзина у Тильды — блок T706, одна и та же вёрстка и в боковой панели с главной страницы, и на странице оформления. Что было не так: - «Ваш заказ» — 16 px, меньше обычного текста в карточке товара; - у строки товара padding: 0, поэтому подсветка при наведении прилипала вплотную к тексту и картинке; - числа в блоке количества и сумма строки шли весом 300, а название — 600. Одинаковым шрифтом, но разным весом — отсюда ощущение, что это «другое семейство»; - кнопки −, + и удаления — картинки img из тильдовской библиотеки linea размером 16 и 20 px: блёклые тонкие линии; - кнопка «Оформить заказ» — тёмно-серая (#333) с оранжевым текстом. Иконки заменены на свои, вписанные прямо в CSS как data:image/svg+xml. Внешние файлы не подключаются: иконки не мылятся на любом экране и красятся брендовым цветом. ПРОВЕРЕНО, что кнопки продолжают работать после подмены оформления: «+» увеличил количество до 4, «−» вернул на 3, корзина обновилась; корзина реально очищается по кнопке удаления. Прятать внутри кнопки безопасно — обработчик висит на самой кнопке. Выравнивание: у Тильды кнопки и число стоят на базовой линии (vertical-align: baseline), из-за чего число оказывалось на 10 px ниже кружков. Замерено. Лечится общим vertical-align: middle. */ .t706__cartpage-heading { font-size: 22px !important; line-height: 1.3 !important; font-weight: 600 !important; } .t706__cartpage-top { min-height: 64px !important; } /* строка товара: поля + подсветка, выходящая в поля симметрично */ .t706__product { padding: 18px 14px !important; margin-left: -14px !important; margin-right: -14px !important; border-radius: 10px; transition: background-color .15s ease; } .t706__product:hover { background-color: rgba(206, 97, 55, .05); } .t706__product-title { font-size: 17px !important; line-height: 1.35 !important; } .t706__product-title__portion { font-size: 13px !important; color: var(--aq-ink-soft) !important; } .t706__product-plusminus, .t706__product-quantity { font-size: 17px !important; font-weight: 600 !important; } .t706__product-amount, .t706__product-amount--portion { font-size: 17px !important; font-weight: 600 !important; } /* свои иконки вместо картинок Тильды */ .t706__product-minus img, .t706__product-plus img, .t706__product-del img { display: none !important; } /* Оранжевый в покое читался как «выключено»: тонкий штрих 2.2 на 17 px светлым #ce6137 на белом даёт слишком мало контраста. Берём тёмный тон палитры (#b4502b), утолщаем штрих до 2.9 и добавляем еле заметную оранжевую заливку и такую же рамку — кнопка в покое сразу читается как кнопка, а не как подсказка. */ .t706__product-minus, .t706__product-plus { width: 30px !important; height: 30px !important; border: 1px solid rgba(206, 97, 55, .32); border-radius: 50%; background-color: rgba(206, 97, 55, .06); background-repeat: no-repeat; background-position: center; background-size: 18px 18px; transition: background-color .15s ease, border-color .15s ease; cursor: pointer; } .t706__product-minus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b4502b' stroke-width='2.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E"); } .t706__product-plus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b4502b' stroke-width='2.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E"); } .t706__product-minus:hover, .t706__product-plus:hover { background-color: rgba(206, 97, 55, .16); border-color: rgba(206, 97, 55, .60); } /* всё на одной линии */ .t706__product-minus, .t706__product-plus, .t706__product-quantity, .t706__product-del { vertical-align: middle !important; } .t706__product-quantity { display: inline-block !important; line-height: 32px !important; min-width: 38px !important; text-align: center !important; padding: 0 !important; } /* удалить: крупная тёмная корзина в кружке. Маленький серый значок не читался — непонятно было, что это и что оно удаляет. */ .t706__product-del { width: 38px !important; height: 38px !important; border: 1px solid rgba(84, 84, 86, .20); border-radius: 50%; background-repeat: no-repeat; background-position: center; background-size: 21px 21px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a4542' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7h14M10 7V5.5h4V7M8.5 7l.8 11.5h5.4L15.5 7M10.5 10.5v5M13.5 10.5v5'/%3E%3C/svg%3E") !important; opacity: 1 !important; transition: background-color .15s ease, border-color .15s ease; cursor: pointer; } .t706__product-del:hover { background-color: rgba(206, 97, 55, .12) !important; border-color: rgba(206, 97, 55, .5) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ce6137' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7h14M10 7V5.5h4V7M8.5 7l.8 11.5h5.4L15.5 7M10.5 10.5v5M13.5 10.5v5'/%3E%3C/svg%3E") !important; } /* итог — главная строка экрана */ .t706__cartwin-totalamount-row_total .t706__cartwin-totalamount-label, .t706__cartwin-totalamount-row_total .t706__cartwin-totalamount-info_value { font-size: 20px !important; font-weight: 700 !important; } .t706__cartwin-totalamount-row_total .t706__cartwin-totalamount-info_value { color: var(--aq-brand) !important; } /* главные кнопки покупки — брендовым цветом, а не тёмно-серым */ .t706__cartpage .t-submit, .t706__cartpage .t-btn, .t706 .t-submit, .t-store__prod-popup__btn { background-color: var(--aq-brand) !important; color: #fff !important; border-radius: 8px !important; } .t706__cartpage .t-submit:hover, .t706__cartpage .t-btn:hover, .t706 .t-submit:hover, .t-store__prod-popup__btn:hover { background-color: var(--aq-brand-dk) !important; } /* --- 16. Страница товара (/tproduct/...) ----------------------------------- Что это такое. Отдельной «страницы товара» в проекте нет: Тильда берёт тот же блок T754 и разворачивает его карточку на всю страницу. Обёртка называется .t-store__product-snippet — её нет ни на главной, ни в попапе, поэтому все правила ниже привязаны к ней и на главную не протекают. Важно и не чинится стилями: на этой странице НЕТ ни меню, ни подвала. Ни один блок в проекте не помечен как «шапка»/«подвал», поэтому Тильда их сюда не подставляет. Человек, пришедший по QR-коду прямо на товар, не видит ни условий доставки, ни отзывов, ни телефона. Это вопрос структуры, а не оформления — вынесен владельцу. Что было не так по оформлению: - ФОТО ОБРЕЗАЛОСЬ. У слайдера стоит background-size: cover — ровно тот же дефект, что был в карточках каталога. Квадратной фотографии форели повезло, а упаковка в пропорции 4:3 теряет края. Ставим contain. Пробовали ещё добавить внутренний отступ через padding на .t-slds__bgimg — НЕ ДЕЛАТЬ: высота слайда считается от этого элемента, и слайд схлопывается с 600 px до 44. Замерено. - ТИПОГРАФИКА ЦЕНЫ РАСПОЛЗАЛАСЬ. «1 190» 26/700, «р.» 26/700, «/1 кг» 18/500 — три разных размера в одной строке. В карточке мы это уже чинили, но там класс .t-store__card__price-currency, а здесь .t-store__prod-popup__price-currency — правило просто не доставало. - ОПИСАНИЕ 14 px весом 300 — мельче и бледнее, чем текст в карточке каталога. Основной текст страницы не может быть мельче подписи. - «РАЗМЕРНЫЙ РЯД» — стандартный серый select 150x28 с чёрным треугольником, нарисованным через ::after (border-trick). Треугольник убираем, ставим свою шевронную иконку в цвете бренда. - «Все товары» ничем не отличался от обычного текста — единственный способ вернуться в каталог выглядел как подпись. - На телефоне фотография упиралась в края экрана, а текст под ней имел отступ 20 px. Выравниваем. */ .t-store:has(.t-store__product-snippet) { padding: 56px 0 80px !important; } /* возврат в каталог — это ссылка, и она должна выглядеть как ссылка */ .t-store__product-snippet .t-store__prod-popup__close-txt-wr { margin-bottom: 28px !important; } .js-store-close-text { font-size: 15px !important; color: var(--aq-ink-soft) !important; border-bottom: 1px solid transparent; padding-bottom: 2px; transition: color .15s ease, border-color .15s ease; } .t-store__prod-popup__close-txt-wr:hover .js-store-close-text { color: var(--aq-brand) !important; border-bottom-color: var(--aq-brand); } /* фотография: рамка-поверхность как у карточки + товар целиком */ .t-store__product-snippet .t-slds__main { background: #fff; border: 1px solid var(--aq-line); border-radius: 14px; overflow: hidden; } .t-store__product-snippet .t-slds__items-wrapper .t-slds__bgimg { background-size: contain !important; } .t-store__product-snippet .t-slds__thumbsbullet-wrapper { margin-top: 14px !important; } /* Миниатюры оставляем в cover — намеренно. Это не показ товара, а указатель «какая фотография сейчас открыта»: в квадрате 60x60 вписанная целиком горизонтальная фотография превращается в полоску и опознать по ней ничего нельзя. Обрезка здесь читается лучше. */ .t-store__product-snippet .t-slds__thumbsbullet .t-slds__bgimg { border-radius: 8px; } .t-store__product-snippet .t-slds__thumbsbullet-border { border: 1px solid var(--aq-line) !important; border-radius: 8px !important; transition: border-color .15s ease; } .t-store__product-snippet .t-slds__thumbsbullet:hover .t-slds__thumbsbullet-border { border-color: rgba(206, 97, 55, .45) !important; } .t-store__product-snippet .t-slds__bullet_active .t-slds__thumbsbullet-border { border: 2px solid var(--aq-brand) !important; } /* заголовок и категория */ .t-store__product-snippet .js-store-prod-name { font-size: 30px !important; line-height: 1.25 !important; color: var(--aq-ink) !important; } .t-store__product-snippet .t-store__prod-popup__brand { font-size: 14px !important; color: var(--aq-ink-soft) !important; margin-top: 6px !important; } /* цена: число — герой строки, приписки — ровный подголосок (как в карточке) */ .t-store__product-snippet .js-product-price { font-size: 30px !important; } .t-store__prod-popup__price-currency, .t-store__product-snippet .t-store__prod__price-portion { font-size: 18px !important; font-weight: 500 !important; color: var(--aq-ink) !important; } /* выбор варианта */ .t-store__product-snippet .t-product__option-title { font-size: 13px !important; letter-spacing: .06em; text-transform: uppercase; color: var(--aq-ink-soft) !important; margin-bottom: 8px !important; } .t-store__product-snippet .t-product__option-variants::after { display: none !important; } .t-store__product-snippet .t-product__option-select { height: 44px !important; min-width: 190px; font-size: 15px !important; color: var(--aq-ink) !important; background-color: #fff !important; border: 1px solid rgba(84, 84, 86, .22) !important; border-radius: 8px !important; padding: 0 42px 0 14px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ce6137' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 14px center !important; background-size: 16px 16px !important; transition: border-color .15s ease, box-shadow .15s ease; cursor: pointer; } .t-store__product-snippet .t-product__option-select:hover { border-color: rgba(206, 97, 55, .45) !important; } .t-store__product-snippet .t-product__option-select:focus { border-color: var(--aq-brand) !important; box-shadow: 0 0 0 3px rgba(206, 97, 55, .16) !important; outline: none !important; } /* главная кнопка страницы — по размеру главной кнопки корзины */ .t-store__product-snippet .t-store__prod-popup__btn-wrapper { margin-top: 26px !important; } .t-store__product-snippet .t-store__prod-popup__btn { min-width: 240px; height: 52px !important; font-size: 16px !important; border-radius: 8px !important; letter-spacing: .01em; } /* описание: основной текст страницы, отделён волосяной линией. max-width держит строку около 62 символов — сколько бы владелец ни написал, строки не растянутся на всю ширину экрана. */ .t-store__product-snippet .js-store-prod-text { margin-top: 32px !important; padding-top: 26px !important; border-top: 1px solid var(--aq-line); font-size: 16px !important; line-height: 1.7 !important; color: var(--aq-ink) !important; max-width: 62ch; } @media screen and (max-width: 640px) { .t-store:has(.t-store__product-snippet) { padding: 28px 0 56px !important; } /* Поле в 20 px по краям — ОДНО на всю страницу, и задаётся оно снаружи, на обёртке. Первая попытка была другой: margin: 0 20px на слайдере. Так делать нельзя — ширину слайдов Тильда считает скриптом от ширины слайдера, поэтому слайдер оставался 430 px и вылезал за экран: document.scrollWidth 450 при ширине окна 430, появлялась горизонтальная прокрутка. Замерено на эмуляции 430x900. Отступ на обёртке скрипт видит ДО расчёта — слайдер честно становится 390 px. Внутренние поля Тильды при этом нужно занулить, иначе у текста получится 40 px, а у фотографии 20. */ .t-store__product-snippet { padding-left: 20px; padding-right: 20px; box-sizing: border-box; } .t-store__product-snippet .t-store__prod-popup__info { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } .t-store__product-snippet .t-store__prod-popup__slider { margin-left: 0 !important; margin-right: 0 !important; } .t-store__product-snippet .t-store__prod-popup__close-txt-wr { margin-left: 0 !important; padding-left: 0 !important; } .t-store__product-snippet .js-store-prod-name { font-size: 24px !important; } .t-store__product-snippet .js-product-price { font-size: 26px !important; } .t-store__product-snippet .t-store__prod-popup__btn { width: 100%; min-width: 0; } } /* --- 17. Сквозная уборка: одинаковые кнопки на всех страницах ------------- Проверка «а одинаково ли выглядят страницы» делается не на глаз, а перебором: пройти по всем элементам страницы и собрать те, у кого фон #333 или цвет #ca6139. Так нашлись три кнопки, до которых раньше не доходили руки. Все три — из настроек блоков Тильды, не из этого файла. Отдельно про цвет. В настройках блоков стоит оранжевый #ca6139, а в логотипе — #ce6137. Разница в три единицы, глазом не различить, и мы её НЕ переопределяем стилями: иначе настройка в Тильде перестанет работать, и следующий человек будет долго искать, почему. Правильное место для правки — сами настройки блока. */ /* 17.1 «Оформить заказ» в боковой корзине на главной был чёрным (#333) с оранжевым текстом — ровно то, на что жаловались: «чёрный мешок с оранжевым шрифтом». На странице оформления заказа кнопка уже оранжевая, а здесь класс другой (.t706__sidebar-continue), и правило до неё не доставало. Теперь обе одинаковые. */ .t706__sidebar-continue { background-color: var(--aq-brand) !important; border-radius: 8px !important; } .t706__sidebar-continue, .t706__sidebar-continue .t-btnflex__text { color: #fff !important; } .t706__sidebar-continue:hover { background-color: var(--aq-brand-dk) !important; } /* 17.2 «Загрузить ещё» был сплошным чёрным прямоугольником — по весу такой же, как «Добавить в корзину». Но это второстепенное действие: оно не покупает, а всего лишь показывает ещё товары. Делаем контурной кнопкой: тот же цвет, меньше веса. Заодно пропадает чёрный, которого в палитре нет. */ /* Селектор с ID блока — вынужденный. Тильда кладёт прямо в страницу правило #rec1823839431 .t-btnflex.t-btnflex_type_button { border-style: none !important } — прямо внутрь кнопки, тегом style. Вес у него (1 id + 2 класса), поэтому #rec… .t-store__load-more-btn (1 id + 1 класс) проигрывает, и рамки не появляется вообще. Замерено: border-style остаётся none. Дописываем те же два класса — становится (1 id + 3 класса), и правило выигрывает. Заодно border разложен на составляющие: перебить нужно именно border-style, сокращённая запись тут не помогает. */ #rec1823839431 .t-store__load-more-btn.t-btnflex.t-btnflex_type_button { background-color: transparent !important; border-style: solid !important; border-width: 1px !important; border-color: rgba(206, 97, 55, .45) !important; border-radius: 8px !important; transition: background-color .15s ease, border-color .15s ease; } #rec1823839431 .t-store__load-more-btn.t-btnflex, #rec1823839431 .t-store__load-more-btn .t-btnflex__text { color: var(--aq-brand) !important; } #rec1823839431 .t-store__load-more-btn.t-btnflex.t-btnflex_type_button:hover { background-color: rgba(206, 97, 55, .08) !important; border-color: var(--aq-brand) !important; } /* 17.3 Кнопка «Подписаться»: серый текст #525252 на оранжевом фоне. Это не вкусовщина, а нечитаемо — контраст ниже любого разумного порога. Текст белый, как у всех остальных заливных кнопок. */ #rec1823839511 .t-submit, #rec1823839511 .t-submit .t-btnflex__text { color: #fff !important; } /* --- 18. Кнопка «В корзину» и счётчик прямо в карточке каталога ----------- 12.09 в блоке включены три штатные настройки Тильды (никакого своего JS): Контент → КАРТОЧКИ → Кнопка 2: текст «В корзину», действие «Добавить в корзину» Настройки → КНОПКИ → Счётчик: «Добавить в плитку товаров» Настройки → КНОПКИ → Опции: показывать выбор варианта в плитке Зачем: раньше, чтобы положить второй товар, надо было открыть карточку, нажать «Добавить», вернуться назад, открыть следующую. Для магазина, где берут по 4-6 позиций, это основная потеря. ДВЕ ВЕЩИ, КОТОРЫЕ ВАЖНО ЗНАТЬ ПРО ЭТУ НАСТРОЙКУ: 1. Кнопка должна быть именно ВТОРОЙ. В t_store_get_productCard_link действие первой кнопки (btnLink1) используется ещё и для ссылки, в которую завёрнута вся карточка. Поставить «Добавить в корзину» первой кнопкой — и нажатие в любое место карточки будет класть товар в корзину вместо открытия страницы товара. Первая кнопка остаётся пустой с действием «Подробнее о товаре». 2. Показ вариантов в плитке обязателен, а не по вкусу. Из 53 товаров у семи есть обязательный выбор: Форель Горная ПСГ (4 размера), Лангустины, три вида креветок, Том ям (с рисом / без), Тунец (100/240 г). Без селектора нажатие «В корзину» молча кладёт первый вариант — человек заказывает «1-2 кг», думая, что выбрал свой размер. Счётчик у Тильды означает «сколько положить», а НЕ «сколько уже в корзине»: после добавления он возвращается к 1, карточка не получает никакого признака «уже в корзине». Это её модель, переделка потребовала бы своего JS с синхронизацией по корзине. Оформление ниже: кнопка контурная и заливается при наведении — чтобы 36 одинаковых оранжевых прямоугольников не спорили с ценой, которая тоже оранжевая. */ #rec1823839431 .t-store__card .t-store__card__btns-wrapper { gap: 8px; align-items: center; justify-content: center; } /* Кнопка. Селектор с тремя классами — Тильда кладёт в страницу #rec1823839431 .t-btnflex.t-btnflex_type_button2 { border-style: solid !important; border-color: #000 !important }, это 1 id + 2 класса. */ #rec1823839431 .t-store__card__btn_second.t-btnflex.t-btnflex_type_button2 { height: 40px !important; border-radius: 8px !important; border-style: solid !important; border-width: 1px !important; border-color: rgba(206, 97, 55, .45) !important; background-color: transparent !important; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } #rec1823839431 .t-store__card__btn_second.t-btnflex.t-btnflex_type_button2, #rec1823839431 .t-store__card__btn_second .t-btnflex__text { color: var(--aq-brand) !important; } #rec1823839431 .t-store__card__btn_second.t-btnflex.t-btnflex_type_button2:hover { background-color: var(--aq-brand) !important; border-color: var(--aq-brand) !important; } #rec1823839431 .t-store__card__btn_second.t-btnflex.t-btnflex_type_button2:hover .t-btnflex__text { color: #fff !important; } #rec1823839431 .t-store__card__btn_second.t-btnflex.t-btnflex_type_button2:active { transform: translateY(1px); } /* Счётчик. Свои знаки вместо тильдовских: минус и плюс там нарисованы линейным градиентом в 1 px и на светлом фоне почти не видны — та же история, что была с кнопками в корзине. */ #rec1823839431 .t-store__card .t-store__prod__quantity { height: 40px !important; border-radius: 8px !important; border: 1px solid rgba(84, 84, 86, .20) !important; display: inline-flex !important; align-items: center !important; } #rec1823839431 .t-store__card .t-store__prod__quantity__minus, #rec1823839431 .t-store__card .t-store__prod__quantity__plus { width: 26px !important; height: 26px !important; border-radius: 50% !important; background-color: transparent !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 16px 16px !important; } #rec1823839431 .t-store__card .t-store__prod__quantity__minus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b4502b' stroke-width='2.9' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E") !important; } #rec1823839431 .t-store__card .t-store__prod__quantity__plus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b4502b' stroke-width='2.9' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") !important; } #rec1823839431 .t-store__card .t-store__prod__quantity-input { font-size: 15px !important; color: var(--aq-ink) !important; font-variant-numeric: tabular-nums; } /* Выбор варианта в карточке. Обязательно через .t-store__card — страница товара лежит в том же #rec1823839431, и без этого класса правило перебило бы её поле на 44 px (раздел 16). */ #rec1823839431 .t-store__card .t-product__option-variants::after { display: none !important; } #rec1823839431 .t-store__card .t-product__option-select { height: 34px !important; border-radius: 8px !important; font-size: 13px !important; color: var(--aq-ink) !important; background-color: #fff !important; border: 1px solid rgba(84, 84, 86, .22) !important; padding: 0 34px 0 12px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ce6137' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 11px center !important; background-size: 14px 14px !important; -webkit-appearance: none !important; appearance: none !important; cursor: pointer; } /* :not(..._buttons) — обязательно. Тильда вешает класс .t-product__option-title и на подпись блока («Размерный ряд»), и на текст внутри кнопки-варианта. Без исключения это правило уводило в CAPS сами варианты: «БЕЗ РИСА» вместо «Без риса». */ #rec1823839431 .t-store__card .t-product__option-title:not(.t-product__option-title_buttons) { font-size: 12px !important; letter-spacing: .05em; text-transform: uppercase; color: var(--aq-ink-soft) !important; } #rec1823839431 .t-store__card .t-store__card__prod-controls-wrapper { padding-top: 10px !important; } #rec1823839431 .t-store__card .js-product-edition-option { margin: 0 !important; } /* --- 19. «Взвешивание» в карточке каталога -------------------------------- Задача: дать положить товар в корзину прямо с витрины, но не раздувать карточку. Раньше счётчик и выбор варианта висели в карточке всегда — строки с товарами-с-вариантами получались на ~50 px выше соседних, а 36 счётчиков подряд превращали витрину в таблицу. Решение (идея владельца проекта): у карточки два состояния. ОБЫЧНОЕ кнопка «Выбрать», счётчик и выбор варианта скрыты, нажатие на карточку открывает страницу товара. ВЗВЕШИВАНИЕ кнопка становится «В корзину», счётчик и выбор варианта появляются ПОВЕРХ нижней части фотографии, нажатие на карточку никуда не ведёт. «минус» на единице = отмена, возврат в обычное состояние. Ключевое: высота карточки не меняется ни на пиксель — элементы не добавляются в поток, а позиционируются поверх фото. Замерено: 610 → 610. ЧЕГО ЗДЕСЬ НЕЛЬЗЯ ДЕЛАТЬ — ПЕРЕНОСИТЬ УЗЛЫ В DOM. Первая попытка переносила блок опций и счётчик внутрь контейнера фотографии. Выглядело правильно, а в корзину уходило options: undefined, количество 1 и базовая цена 1190 вместо 1390 — Тильда ищет данные варианта по положению узла в дереве. Молча неправильный заказ. Поэтому узлы остаются на своих местах, а переносит их только CSS (position: absolute). Про счётчик: количество Тильда берёт из своих обработчиков «плюс/минус», а не из value поля. Программно выставленное значение игнорируется — поэтому счётчик здесь именно родной тильдовский, а не свой. Про наложение: у карточки есть подложка ::before (раздел 3), а прямые потомки подняты на z-index: 1. Поэтому затемнение фото сделано на ::after карточки с z-index: 2, а колонка с текстом и кнопками поднимается на z-index: 3 — иначе затемнение накрывает сами элементы управления, и они не видны (так и было в первой версии). */ /* в обычном состоянии элементов управления не видно */ #rec1823839431 .t-store__card .js-product-controls-wrapper, #rec1823839431 .t-store__card .t-store__prod__quantity { display: none !important; } /* затемнение нижней части фотографии */ #rec1823839431 .t-store__card.aq-weigh::after { content: ""; position: absolute; /* 6 px, а не 0: подложка карточки (раздел 3) сама вставлена на 6 px с каждой стороны. С нулём затемнение шире подложки, и на телефоне, где промежутки между карточками узкие, белая полоса вылезает за край карточки. */ left: 6px; right: 6px; z-index: 2; top: calc(var(--aq-img-h, 370px) - var(--aq-ctrl-h, 51px) - 110px); height: calc(var(--aq-ctrl-h, 51px) + 110px); background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.97) 26%, #fff 46%); pointer-events: none; } #rec1823839431 .t-store__card.aq-weigh .t-store__card__wrap_txt-and-btns { z-index: 3 !important; } /* отрицательный top — потому что позиционирование считается от колонки с текстом, а она начинается сразу под фотографией */ #rec1823839431 .t-store__card.aq-weigh .js-product-controls-wrapper { display: flex !important; position: absolute !important; left: 16px; right: 16px; /* top от РЕАЛЬНОЙ высоты блока опций (--aq-ctrl-h ставит скрипт). Было фиксированное -104px, и блок наезжал на счётчик: у списка высота 51, у кнопок 54, у «Тунца» 46 — налезание от 1 до 4 px и разные зазоры на разных карточках. Теперь низ блока всегда на 12 px выше счётчика, чем бы варианты ни отображались. max-height — страховка: если владелец заведёт вариант с шестью кнопками, они не вылезут за фотографию, а получат прокрутку. */ top: calc(-66px - var(--aq-ctrl-h, 51px)); max-height: calc(var(--aq-img-h, 370px) - 96px); overflow-y: auto; margin: 0 !important; padding: 0 !important; justify-content: center; } #rec1823839431 .t-store__card.aq-weigh .t-store__prod__quantity { display: inline-flex !important; position: absolute !important; left: 50%; transform: translateX(-50%); top: -54px; margin: 0 !important; } /* у товара без вариантов счётчик встаёт чуть ниже — он там один */ #rec1823839431 .t-store__card.aq-weigh.aq-noopts .t-store__prod__quantity { top: -64px; } #rec1823839431 .t-store__card.aq-weigh a[href*="tproduct"] { cursor: default; } /* Подпись кнопки меняется БЕЗ участия JS — через ::after. Это не украшательство: Тильда перерисовывает сетку при каждом нажатии на раздел и на «Загрузить ещё», и подпись, проставленная скриптом, каждый раз терялась бы. Правило на псевдоэлементе применяется само. visibility вместо display — чтобы ширина кнопки не прыгала между состояниями: «Выбрать» короче, чем «В корзину». */ #rec1823839431 .t-store__card:not(.aq-weigh) .t-store__card__btn_second { position: relative; } #rec1823839431 .t-store__card:not(.aq-weigh) .t-store__card__btn_second .t-btnflex__text { visibility: hidden; } #rec1823839431 .t-store__card:not(.aq-weigh) .t-store__card__btn_second::after { content: "Выбрать"; position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; color: inherit; } /* Телефон. Фотография там 190 px вместо 370 — затемнение в 152 px закрывало её почти целиком, от товара оставалась пятая часть. Уменьшаем до 118 и подтягиваем элементы управления. width:auto счётчику — на узких экранах Тильда растягивает его на всю ширину карточки, и он оказывался шире выпадающего списка над ним. */ @media screen and (max-width: 960px) { #rec1823839431 .t-store__card.aq-weigh::after { top: calc(var(--aq-img-h, 190px) - var(--aq-ctrl-h, 51px) - 84px); height: calc(var(--aq-ctrl-h, 51px) + 84px); /* затемнение здесь ниже, и подпись блока («РИС», «РАЗМЕРНЫЙ РЯД») попадала в зону полупрозрачности — на пёстрой фотографии еды читалась плохо. Сжимаем растушёвку. */ background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.97) 15%, #fff 32%); } #rec1823839431 .t-store__card.aq-weigh .js-product-controls-wrapper { left: 10px; right: 10px; top: calc(-58px - var(--aq-ctrl-h, 51px)); } #rec1823839431 .t-store__card.aq-weigh .t-store__prod__quantity { top: -50px; width: auto !important; } #rec1823839431 .t-store__card.aq-weigh.aq-noopts .t-store__prod__quantity { top: -58px; } } /* Варианты-кнопки. У части товаров вариант выводится не списком, а кнопками — это настройка самого товара в каталоге Тильды (data-view-type="buttons"; сейчас так у «Том ям острый» и «Том ям не острый»). Родное оформление там — прямоугольники без скруглений, шрифт 16 px, активный отличается только тем, что рамка чуть темнее. В карточке это и крупно, и непонятно, какой выбран. Приводим к тем же фишкам, что и везде: скругление 8, 13 px, активный — оранжевой рамкой с лёгкой заливкой. */ #rec1823839431 .t-store__card .t-product__option-variants_buttons { justify-content: center; gap: 6px; } #rec1823839431 .t-store__card label.t-product__option-item { margin: 0 !important; padding: 5px 11px !important; font-size: 13px !important; line-height: 1.3 !important; text-transform: none !important; border-radius: 8px !important; border: 1px solid rgba(84, 84, 86, .22) !important; color: var(--aq-ink) !important; background: #fff !important; transition: border-color .15s ease, background-color .15s ease, color .15s ease; cursor: pointer; } #rec1823839431 .t-store__card label.t-product__option-item:hover { border-color: rgba(206, 97, 55, .45) !important; } #rec1823839431 .t-store__card label.t-product__option-item_active { border-color: var(--aq-brand) !important; background: rgba(206, 97, 55, .08) !important; color: var(--aq-brand-dk) !important; font-weight: 600 !important; } #rec1823839431 .t-store__card .t-product__option-title_buttons { text-transform: none !important; letter-spacing: normal !important; font-size: 13px !important; color: inherit !important; }