/* Доп. анимации лендинга. Подключается после Tailwind, не зависит от его сборки. */ /* Плавный скролл по якорям меню (отключается при reduce-motion) */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* Отступ для sticky-шапки, чтобы якорь не уезжал под неё */ section[id] { scroll-margin-top: 5.5rem; } /* Тень шапки при прокрутке */ header { transition: box-shadow .3s ease; } header.scrolled { box-shadow: 0 8px 24px -12px rgba(124, 58, 237, .35); } /* Появление блоков при прокрутке. Скрываем элементы только если работает JS (класс .js на ), иначе без JS контент остаётся видимым. */ .js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } .js [data-reveal].is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } } /* Плавающий бейдж «Напечатано» на hero-карточке. Позиционирование тут, т.к. нужных offset-утилит нет в собранном Tailwind. */ .hero-badge { position: absolute; top: -1.25rem; right: -0.75rem; z-index: 10; box-shadow: 0 20px 40px -12px rgba(124, 58, 237, .45); } @media (min-width: 640px) { .hero-badge { right: -1.25rem; } }