/* ============================================================================ Аквакультура — оживление витрины ---------------------------------------------------------------------------- Куда вставлять: Настройки сайта → Вставка кода → Пользовательские CSS-стили ПРАВИЛО, КОТОРОЕ ЗДЕСЬ СОБЛЮДАЕТСЯ: трогаем только те свойства, которые не участвуют в раскладке — transition, box-shadow, transform, border-color, background, opacity. НЕ трогаем position, display, width, height, float, margin — на них держится сетка Тильды, и поломка будет неочевидной. ПРО ДВОЙНЫЕ КЛАССЫ вида .t-store__card.t-store__card — это не опечатка. У Тильды на те же элементы уже висят свои правила (анимация появления карточек, переходы у кнопок), и одиночный селектор ими перебивается. Повтор класса поднимает приоритет, не прибегая к !important, который потом трудно отследить. Версия 1.3 (2026-09-11) — починено меню-невидимка, перекрывавшее каталог ========================================================================== */ /* --- 1. Служебное: убрать «от N дней» у вариантов доставки ----------------- Поле «Срок доставки» обязательное, и у варианта «Доставка по адресу» Тильда молча возвращает 0 обратно в 1. Поэтому подпись убираем стилями. */ .t706 .delivery-minimum-time { display: none !important; } /* --- 2. Меню T446: перестаёт перекрывать каталог --------------------------- ГЛАВНАЯ ПОЛОМКА, НАЙДЕННАЯ 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 и съедает первый экран целиком: логотип 200 px, под ним пять пунктов в столбик, под ними соцсети. До первого товара — 957 px, это полтора экрана телефона. Настоящего бургера тут сделать нельзя: у T446 разметки бургера нет в принципе, а CSS разметку не создаёт. Но столбик из пяти пунктов можно положить в строку — и этого хватает, чтобы товар оказался на первом экране. Замерено (окно 900 x 623): было: меню 649 px, фильтр y=859, первая карточка y=957 стало: меню 231 px, фильтр y=271, первая карточка y=369 При 500 px ширины пункты переносятся в две строки — проверено, читаемо: было: меню 649, карточка y=983 стало: меню 278, карточка y=442 !important здесь вынужденный: высоту меню (200 px) и размер логотипа Тильда пишет прямо в inline-стиль элемента, а inline не перебивается никаким селектором. */ @media screen and (max-width: 980px) { /* высота задана инлайном и режет строку меню — снимаем */ #rec1823839381 .t446 { height: auto !important; overflow: visible !important; } #rec1823839381 .t446__maincontainer { height: auto !important; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } /* логотип — отдельной строкой и вдвое меньше */ #rec1823839381 .t446__logowrapper { display: block !important; height: auto !important; order: 1; flex: 0 0 100%; } #rec1823839381 .t446__imglogo { width: 120px !important; max-width: 120px !important; } /* два блока ссылок встают в одну строку под логотипом */ #rec1823839381 .t446__leftwrapper { order: 2; flex: 0 0 auto; width: auto; } #rec1823839381 .t446__rightwrapper { order: 3; flex: 0 0 auto; width: auto; } #rec1823839381 .t446__leftmenuwrapper, #rec1823839381 .t446__rightmenuwrapper { width: auto; } #rec1823839381 .t446__list { display: flex; flex-wrap: wrap; justify-content: center; } #rec1823839381 .t446__list_item { padding: 6px 14px; margin: 0; } /* у блока каталога отступ сверху 210 px — он был рассчитан на то, что сверху лежит меню-накладка. На узком экране накладки нет, и отступ превращается в пустую полосу перед фильтром. */ #rec1823839431.t-rec_pt_210 { padding-top: 40px !important; } } /* --- 3. Карточка товара: отзывается на курсор ------------------------------ Сейчас каталог выглядит неподвижной таблицей. Лёгкий подъём и подложка дают понять, что карточка — это объект, на который можно нажать. Подложку рисует ::before, а не сама карточка. Причина: у карточки padding сверху и снизу равен нулю (по бокам 20 px), поэтому тень, повешенная на саму карточку, обрезала фото вплотную сверху и кнопку снизу — выглядело так, будто у карточки нет полей. ::before растянут на 14 px выше и ниже карточки, поэтому подложка ложится с одинаковым отступом со всех сторон и НЕ меняет раскладку: абсолютный слой не участвует в потоке, соседние карточки не двигаются. position: relative добавлен только чтобы ::before было от чего считать — без сдвигов элемент в потоке остаётся ровно на своём месте. */ .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; } /* Фотография мягко приближается внутри своей рамки. overflow:hidden нужен, чтобы увеличенное фото не вылезало за карточку. */ .t-store__card__imgwrapper { overflow: hidden; } .t-store__card__imgwrapper .t-store__card__bgimg, .t-store__card__imgwrapper img { transition: transform .35s ease; } .t-store__card:hover .t-store__card__imgwrapper .t-store__card__bgimg, .t-store__card:hover .t-store__card__imgwrapper img { transform: scale(1.04); } /* --- 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. Фильтры категорий: видно, что это ссылки --------------------------- */ .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; } /* --- 6. Отзывы: карусель больше не замирает на полкарточки ---------------- У ленты отзывов (.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; } /* --- 7. Корзина: строка товара подсвечивается ------------------------------ */ .t706__product { transition: background-color .15s ease; } .t706__product:hover { background-color: rgba(202, 97, 57, .045); } /* --- 8. Поля ввода: акцентная рамка в фокусе ------------------------------- */ .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; } /* --- 9. Иконки соцсетей ---------------------------------------------------- */ .t-sociallinks__item { transition: transform .15s ease, opacity .15s ease; } .t-sociallinks__item:hover { transform: translateY(-2px); opacity: .85; } /* --- 10. Клавиатурный фокус ------------------------------------------------ Сейчас пройти сайт с клавиатуры невозможно — не видно, где находишься. :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; } /* --- 11. Уважение к настройкам системы ------------------------------------- Если у человека в системе отключены анимации (укачивание, вестибулярные расстройства, слабое устройство) — выключаем все переходы. */ @media (prefers-reduced-motion: reduce) { .t-store__card, .t-store__card__imgwrapper img, .t-store__card__imgwrapper .t-store__card__bgimg, .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; } }