/* ============================================================================ Аквакультура — оживление витрины ---------------------------------------------------------------------------- Куда вставлять: Настройки сайта → Вставка кода → Пользовательские CSS-стили ПРАВИЛО, КОТОРОЕ ЗДЕСЬ СОБЛЮДАЕТСЯ: трогаем только те свойства, которые не участвуют в раскладке — transition, box-shadow, transform, border-color, background, opacity. НЕ трогаем position, display, width, height, float, margin — на них держится сетка Тильды, и поломка будет неочевидной. ПРО ДВОЙНЫЕ КЛАССЫ вида .t-store__card.t-store__card — это не опечатка. У Тильды на те же элементы уже висят свои правила (анимация появления карточек, переходы у кнопок), и одиночный селектор ими перебивается. Повтор класса поднимает приоритет, не прибегая к !important, который потом трудно отследить. Версия 1.6 (2026-09-11) — карточки одной высоты, фото не режется ========================================================================== */ /* --- 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; } /* --- выезжающая панель бургера --- */ .t446[class*="tmenu-mobile__menucontent"] { width: 100% !important; height: auto !important; max-height: calc(100vh - 84px); overflow-y: auto; background: #fff; padding: 8px 0 20px; box-shadow: 0 8px 20px rgba(30, 25, 20, .10); } .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] Выравнивать кнопки в карточках по низу После этого Тильда отдаёт неподрезанный файл и ставит с `object-fit: contain` вместо фонового блока. Высота рамки (370 px) остаётся общей для всех, то есть сетка не разъезжается. ВНИМАНИЕ НА БУДУЩЕЕ: класса `.t-store__card__bgimg` больше нет — в режиме оригинальных пропорций это ``. Старые правила, написанные под bgimg, молча перестают работать. ЧТО ДОДЕЛАНО ЗДЕСЬ: - поля вокруг фото, чтобы оно не упиралось в край карточки; - заголовку отведено ровно две строки, описанию — ровно две; - цена прижата к низу, поэтому у всех карточек она на одной линии; - у карточки без описания это место просто остаётся пустым. Результат: все 36 карточек ровно 522 px. 150 px — минимальная высота, при которой сетка ещё не разъезжается; взято 152 px с запасом. */ .t-store__card.t-store__card { position: relative; transition: transform .18s ease; } .t-store__card.t-store__card::before { content: ""; position: absolute; top: -14px; bottom: -14px; left: 6px; right: 6px; z-index: -1; border-radius: 10px; background: #fff; box-shadow: 0 6px 22px rgba(30, 25, 20, .14); opacity: 0; transition: opacity .18s ease; pointer-events: none; } .t-store__card.t-store__card:hover { transform: translateY(-2px); } .t-store__card.t-store__card:hover::before { opacity: 1; } /* Поля вокруг фото. padding + box-sizing ужимают область, в которой object-fit вписывает картинку, — сама рамка 370 px не меняется. Заодно эти поля гасят увеличение на наведении: картинке есть куда расти, и она не упирается в край. */ .t-store__card__imgwrapper .t-store__card__img { 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); } /* Текстовая часть одной высоты у всех карточек. */ .t-store__card__textwrapper { display: flex !important; flex-direction: column !important; min-height: 152px !important; box-sizing: border-box !important; } /* Заголовок — ровно две строки. Короткий занимает столько же места, длинный обрезается многоточием, а не растит карточку. */ .t-store__card__title { min-height: 54px !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; } /* Цена прижата к низу — у всех карточек она оказывается на одной линии. */ .t-store__card__price-wrapper { margin-top: auto !important; } /* --- 4. Кнопки: нажатие ощущается ------------------------------------------ Наведение — чуть темнее и на пиксель выше. Нажатие — кнопка «вдавливается» обратно. ЗДЕСЬ ЕДИНСТВЕННОЕ МЕСТО, ГДЕ ПРИШЛОСЬ ПОСТАВИТЬ !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; } /* --- 5. Пустой раздел: человеческая заглушка вместо «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; } /* --- 6. Фильтры категорий: видно, что это ссылки --------------------------- */ .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: #ca6139; border-color: #ca6139; } /* --- 7. Отзывы: карусель больше не замирает на полкарточки ---------------- У ленты отзывов (.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; } /* --- 8. Корзина: строка товара подсвечивается ------------------------------ */ .t706__product { transition: background-color .15s ease; } .t706__product:hover { background-color: rgba(202, 97, 57, .045); } /* --- 9. Поля ввода: акцентная рамка в фокусе ------------------------------- */ .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: #ca6139 !important; box-shadow: 0 0 0 3px rgba(202, 97, 57, .14); outline: none; } /* --- 10. Иконки соцсетей ---------------------------------------------------- */ .t-sociallinks__item { transition: transform .15s ease, opacity .15s ease; } .t-sociallinks__item:hover { transform: translateY(-2px); opacity: .85; } /* --- 11. Клавиатурный фокус ------------------------------------------------ Сейчас пройти сайт с клавиатуры невозможно — не видно, где находишься. :focus-visible срабатывает только при навигации с клавиатуры, мышью эта обводка не появляется. */ a:focus-visible, button:focus-visible, .t-btn:focus-visible, .t-store__card:focus-visible, [tabindex]:focus-visible { outline: 2px solid #ca6139; outline-offset: 3px; border-radius: 2px; } /* --- 12. Уважение к настройкам системы ------------------------------------- Если у человека в системе отключены анимации (укачивание, вестибулярные расстройства, слабое устройство) — выключаем все переходы. */ @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; } }