/* * Дополнение к app.css (собранный Tailwind оригинала). * Здесь только то, что в оригинале делал framer-motion: появление блоков * при скролле и заголовки, которые проявляются по словам. * * Класс js-reveal ставит инлайн-скрипт в : без JS страница * показывается целиком, ничего не прячется навсегда. */ .reveal { transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1); will-change: opacity, transform; } .reveal.is-visible { opacity: 1 !important; transform: none !important; } .hero-word { display: inline-block; } .js-reveal .hero-word { opacity: 0; transform: translateY(.35em); animation: heroWordIn .8s cubic-bezier(.16, 1, .3, 1) forwards; animation-delay: calc(var(--hero-i, 0) * .07s); } @keyframes heroWordIn { to { opacity: 1; transform: none; } } /* Шапка притемняется, когда страница прокручена. */ #site-header.is-scrolled { background-color: rgb(0 0 0 / .8); backdrop-filter: blur(20px); } #site-header.is-scrolled #site-header-line { opacity: 1; background: linear-gradient(90deg, transparent, rgb(255 255 255 / .08), transparent); } @media (prefers-reduced-motion: reduce) { .reveal { transition: none; opacity: 1 !important; transform: none !important; } .js-reveal .hero-word { opacity: 1; transform: none; animation: none; } }