/* ============================================================ ОЖИВЛЕНИЕ КНОПОК — единый язык hover. Как устроена кнопка на этом сайте: сама кнопка Tilda — ПРОЗРАЧНАЯ ссылка (ни фона, ни рамки, ни тени — проверено вычисленными стилями), а её вид «пилюли» рисует отдельный Zero-элемент-картинка позади. Поэтому на курсор должна реагировать подложка, а не кнопка: сама кнопка невидима. Приём, который на сайте уже был: поверх базовой подложки лежит второй элемент со свечением (*_.png / *-1.png) с opacity:0, и Tilda проявляет его по hover через data-animate-sbs-trgels. Так работало у 4 кнопок из 33. Цвет свечения во всех ассетах один: голубой #A9DAF7, максимальная альфа ~0.3. Ни сдвига, ни масштаба в приёме нет — только свечение, и мы это повторяем. Ещё у двух кнопок ассет свечения был нарисован, но trgels скопировали от чужой кнопки и не поправили. Это вылечено в самой разметке (index.html), родным механизмом Tilda — без CSS и JS. Остальным кнопкам ассет свечения просто не нарисовали. Повторяем ореол средствами CSS: filter:drop-shadow идёт по альфе картинки, поэтому свечение обнимает силуэт пилюли, а не её прямоугольник. Это работает, потому что у всех подложек вокруг пилюли прозрачные поля — проверено: углы и края alpha=0, прозрачных пикселей от 44 до 68 процентов. Класс .eb-glow навешивает js/eb-buttons.js. Сначала связь «кнопка → подложка» была сделана на чистом CSS через :has() на артборде (подложка лежит в DOM раньше кнопки, предыдущего соседа в CSS не выбрать). От :has() отказались: в проверке значение opacity скакало между 0 и 1 при одном и том же положении курсора — инвалидация :has() на большом поддереве оказалась ненадёжной. Переключение класса из JS детерминировано и заодно снимает вопрос о поддержке :has() в старых браузерах. !important здесь обязателен: Tilda описывает эти элементы селектором с id записи (#recNNN .tn-elem[...] .tn-atom), а id перебивает любое число классов. Перечислять 12 записей ради специфичности хуже, чем один important. ============================================================ */ :root{ --eb-btn-glow:169,218,247; /* #A9DAF7 — тот же голубой, что в готовых ассетах */ --eb-btn-glow-warm:253,136,80; /* #FD8850 — заливка кнопки «Купить билет» */ --eb-btn-speed:.25s; } /* Подложки, которым добавляем ореол. Перечислены по id элемента, поэтому одно правило накрывает все 12 записей, где кнопки повторяются. */ .tn-elem[data-elem-id="1773507868801000011"] .tn-atom, /* чёрная «Обсудить проект» */ .tn-elem[data-elem-id="1773577880385000003"] .tn-atom, /* «Подробнее» */ .tn-elem[data-elem-id="1773578104896000010"] .tn-atom, /* «Подробнее», второй набор */ .tn-elem[data-elem-id="1773577987598000007"] .tn-atom, /* «Купить билет» */ .tn-elem[data-elem-id="1773578104896000013"] .tn-atom{ /* «Купить билет», второй набор */ /* Фильтр висит ТОЛЬКО на ховере, и это осознанно. Пробовал объявить его и в покое с нулевой альфой (чтобы браузер не пересоздавал слой) — на маке стало хуже: Safari посчитал область фильтра по состоянию покоя и обрезал свечение по прямоугольнику, у кнопок проступили углы. Откачено 10.09.2026. */ transition:filter var(--eb-btn-speed) ease-in-out !important; } /* ───────────────────────────────────────────────────────────── КНОПКИ ШАПКИ: логотип, конверт, бургер. ВАЖНО, что именно здесь подсвечивать. Круглая подложка (photo.png) — это НЕ кольцо кнопки, а мягкая тёмная виньетка: чистый чёрный с альфой от 149 в центре до 6 у края, белых пикселей в файле нет вообще. Она задумана почти невидимой и нужна лишь чтобы белая иконка читалась на пёстром фоне. Белое кольцо и сам глиф целиком лежат в SVG иконки. Поэтому свечение вешаем НА ИКОНКУ, а не на подложку. Первая попытка была box-shadow на подложке — светлый ореол снаружи её бокса 89x89 проявил ту самую виньетку, и вместо аккуратной подсветки получилась тёмная клякса со светлым обводом (спасибо за скриншот). Чем светим саму иконку — разбор ниже, в блоке «ПОЧЕМУ ЗДЕСЬ box-shadow, А НЕ filter». Класс отдельный — .eb-glow-icon, чтобы не пересекаться с .eb-glow. Курсор в шапке МЕНЯЕМ, в отличие от кнопок в теле: рукописный скрипт меню-оверлея уже ставит cursor:pointer на иконки конверта и бургера, так что здесь это сложившаяся норма. Подложки делаем такими же, чтобы вся кнопка вела себя одинаково. ───────────────────────────────────────────────────────────── */ #rec2001050241 .tn-elem[data-elem-id="1773515243678000001"], #rec2001050241 .tn-elem[data-elem-id="1773515312548000002"], #rec2001050241 .tn-elem[data-elem-id="1773515330908000003"]{ cursor:pointer; } /* ── ПОЧЕМУ ЗДЕСЬ box-shadow, А НЕ filter ── У иконок шапки свечение сначала было сделано так же, как у пилюль, — filter:drop-shadow. На маке это дало две беды сразу (10.09.2026): — иконка подрагивала на каждое наведение. Фильтр включается только на ховере, и браузер на этот момент заводит под элемент отдельный слой, заново растрируя содержимое в буфер, выровненный по целым пикселям. На ретине сдвиг в доли пикселя, но тонкому белому кольцу хватает; — попытка вылечить это постоянным фильтром с нулевой альфой сделала хуже: Safari посчитал область фильтра по состоянию покоя и обрезал свечение по прямоугольнику — у кнопки проступили углы. Здесь фильтр не нужен вовсе. Иконка — круг ровно по своему боксу (логотип 32x32, конверт и бургер 34x34, первый путь в каждом SVG это окружность по краю кадра). Значит border-radius:50% плюс box-shadow дают тот же ореол по кромке круга, но рисуются как обычная тень: слой не создаётся, содержимое не перерастрируется, двигаться нечему и обрезать нечего. Пилюлям в теле страницы такой приём не годится — у их подложек вокруг пилюли широкие прозрачные поля, и тень пошла бы по прямоугольнику картинки, а не по силуэту. Нулевые радиусы в покое нужны, чтобы обе тени совпадали по числу и переход шёл плавно, а не скачком. */ #rec2001050241 .tn-elem[data-elem-id="1772787365670000001"], #rec2001050241 .tn-elem[data-elem-id="1772787365671000002"], #rec2001050241 .tn-elem[data-elem-id="1772787365671000003"]{ border-radius:50%; box-shadow:0 0 0 rgba(var(--eb-btn-glow),0), 0 0 0 rgba(var(--eb-btn-glow),0), inset 0 0 0 rgba(var(--eb-btn-glow),0), inset 0 0 0 rgba(var(--eb-btn-glow),0); transition:box-shadow var(--eb-btn-speed) ease-in-out; } /* Свечение туже и ярче, чем у пилюль: цель — тонкая белая обводка, на широком мягком ореоле она просто размылась бы. Теней четыре, и внутренние — не для красоты. Прежний filter:drop-shadow светил по альфе всей картинки, то есть по обе стороны кольца сразу: и наружу, и внутрь круга. Одна внешняя тень это половина эффекта — свет лежал только снаружи, кнопка выглядела обведённой, а не светящейся (замечено 10.09.2026). Пара inset добавляет вторую половину: мягкий ореол по внутренней кромке. Он ложится под содержимое элемента, поэтому конверту и полоскам бургера не мешает, а у логотипа просто скрыт его сплошным кругом — там хватает наружного. Число теней в покое и на ховере совпадает и inset стоят на тех же местах, иначе переход пошёл бы скачком, а не плавно. */ #rec2001050241 .tn-elem.eb-glow-icon{ box-shadow:0 0 8px rgba(var(--eb-btn-glow),.8), 0 0 18px rgba(var(--eb-btn-glow),.42), inset 0 0 8px rgba(var(--eb-btn-glow),.55), inset 0 0 16px rgba(var(--eb-btn-glow),.3); } /* Голубой ореол — как в готовых ассетах */ .tn-elem.eb-glow .tn-atom{ filter:drop-shadow(0 0 8px rgba(var(--eb-btn-glow),.5)) drop-shadow(0 0 20px rgba(var(--eb-btn-glow),.28)) !important; } /* «Купить билет» залита брендовым оранжевым #FD8850. Голубой ореол на оранжевом дал бы грязь на стыке комплиментарных цветов — в брендбуке об этом прямо предупреждают, — поэтому здесь светим тёплым. */ .tn-elem.eb-glow[data-elem-id="1773577987598000007"] .tn-atom, .tn-elem.eb-glow[data-elem-id="1773578104896000013"] .tn-atom{ filter:drop-shadow(0 0 8px rgba(var(--eb-btn-glow-warm),.5)) drop-shadow(0 0 20px rgba(var(--eb-btn-glow-warm),.3)) !important; } /* ───────────────────────────────────────────────────────────── Рукописные кнопки мобильного слоя. У .eb-btn и его вариантов не было ни одного состояния. На тач-устройстве осмысленна реакция на нажатие, а не на курсор, поэтому :active. ───────────────────────────────────────────────────────────── */ #ebMobile .eb-btn{ transition:transform .12s ease-out, box-shadow .2s ease-out, border-color .2s ease-out; -webkit-tap-highlight-color:transparent; /* серая вспышка не должна спорить с нашим состоянием */ } #ebMobile .eb-btn:active{ transform:scale(.97); } #ebMobile .eb-btn-line:active{ border-color:rgba(255,255,255,.9); } #ebMobile .eb-btn-cta:active{ box-shadow:0 4px 16px rgba(253,119,49,.28); /* при нажатии кнопка «прижимается» */ } /* Тем, кто просит меньше движения, состояния оставляем, а плавность и сжатие убираем. */ @media (prefers-reduced-motion: reduce){ .tn-elem[data-elem-id="1773507868801000011"] .tn-atom, .tn-elem[data-elem-id="1773577880385000003"] .tn-atom, .tn-elem[data-elem-id="1773578104896000010"] .tn-atom, .tn-elem[data-elem-id="1773577987598000007"] .tn-atom, .tn-elem[data-elem-id="1773578104896000013"] .tn-atom, #rec2001050241 .tn-elem[data-elem-id="1772787365670000001"], #rec2001050241 .tn-elem[data-elem-id="1772787365671000002"], #rec2001050241 .tn-elem[data-elem-id="1772787365671000003"], #ebMobile .eb-btn{ transition-duration:0s !important; } #ebMobile .eb-btn:active{ transform:none; } }