/* ========================================================================== ШТАТ — движение и футуристичные акценты. Подключается после main.css. Файл можно отключить целиком одной строкой в , и сайт останется полностью рабочим — здесь только оформление. Правила, которых придерживаемся: — анимируем только transform и opacity, чтобы не заставлять браузер пересчитывать раскладку на каждом кадре; — всё, что появляется по прокрутке, скрыто только при работающем JavaScript (класс .js на ), иначе контент пропал бы навсегда; — при системной настройке «уменьшить движение» движение выключается. ========================================================================== */ :root { --grid-line: rgba(14, 17, 22, .055); --ease-out: cubic-bezier(.22, 1, .36, 1); } :root[data-theme='dark'] { --grid-line: rgba(255, 255, 255, .06); } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --grid-line: rgba(255, 255, 255, .06); } } /* -------------------------------------------------------------------------- 1. Появление блоков при прокрутке -------------------------------------------------------------------------- */ .js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .65s var(--ease-out), transform .65s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); will-change: opacity, transform; } .js .reveal.is-visible { opacity: 1; transform: none; will-change: auto; } /* -------------------------------------------------------------------------- 2. Полоса прогресса прокрутки -------------------------------------------------------------------------- */ .scroll-progress { position: fixed; top: 0; left: 0; z-index: 70; width: 100%; height: 2px; background: var(--gradient); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; } /* -------------------------------------------------------------------------- 3. Первый экран: сетка, дышащее свечение, выход контента -------------------------------------------------------------------------- */ .hero::before { animation: orb-breathe 11s ease-in-out infinite; } @keyframes orb-breathe { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.14); opacity: 1; } } /* Координатная сетка — она же намёк на то, что за ответами стоит система */ .hero::after { content: ''; position: absolute; inset: -80px -40px auto -40px; height: 130%; z-index: 0; pointer-events: none; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 58px 58px; -webkit-mask-image: radial-gradient(ellipse 75% 65% at 68% 18%, #000 0%, transparent 72%); mask-image: radial-gradient(ellipse 75% 65% at 68% 18%, #000 0%, transparent 72%); animation: grid-drift 22s linear infinite; } @keyframes grid-drift { to { background-position: 58px 58px, 58px 58px; } } .js .hero__inner > * { opacity: 0; animation: hero-in .85s var(--ease-out) forwards; } .js .hero__inner > *:nth-child(1) { animation-delay: .08s; } .js .hero__inner > *:nth-child(2) { animation-delay: .26s; } @keyframes hero-in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } /* -------------------------------------------------------------------------- 4. Переписка: живой индикатор и медленный луч сканирования -------------------------------------------------------------------------- */ .chat { position: relative; overflow: hidden; } .chat::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 150px; z-index: 2; pointer-events: none; background: linear-gradient( 180deg, transparent, color-mix(in srgb, var(--accent) 9%, transparent), transparent); animation: scan 8s cubic-bezier(.55, 0, .45, 1) infinite; } @keyframes scan { 0% { transform: translateY(-160px); opacity: 0; } 12%, 62% { opacity: 1; } 100% { transform: translateY(760px); opacity: 0; } } .chat__status::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: currentColor; vertical-align: baseline; animation: pulse-dot 2.2s ease-in-out infinite; } /* Тот же живой огонёк на карточках демо: он и говорит, что сотрудник действительно на смене прямо сейчас, а не нарисован. */ .try__live::before { animation: pulse-dot 2.2s ease-in-out infinite; } @keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } } .chat__action { position: relative; overflow: hidden; } .chat__action::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, currentColor, transparent 80%); opacity: 0; transform: translateX(-100%); animation: action-sweep 6s ease-in-out 4.2s infinite; pointer-events: none; } @keyframes action-sweep { 0% { transform: translateX(-100%); opacity: 0; } 8% { opacity: .12; } 26%, 100% { transform: translateX(100%); opacity: 0; } } /* -------------------------------------------------------------------------- 5. Карточки: свечение следует за курсором -------------------------------------------------------------------------- */ .card, .integration { position: relative; } .card--hover::before, .plan::before { content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity .35s ease; pointer-events: none; background: radial-gradient( 340px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 15%, transparent), transparent 62%); } .card--hover:hover::before, .plan:hover::before { opacity: 1; } .card--hover:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); } /* -------------------------------------------------------------------------- 6. Шаги внедрения: линия, которая прочерчивается между карточками -------------------------------------------------------------------------- */ .step::before { transition: transform .4s var(--ease-out), box-shadow .4s ease; } .step:hover::before { transform: scale(1.12); box-shadow: 0 0 0 6px var(--accent-soft); } @media (min-width: 900px) { .step::after { content: ''; position: absolute; top: 44px; left: 100%; width: 22px; height: 1px; background: linear-gradient(90deg, var(--accent), transparent); transform: scaleX(0); transform-origin: left center; transition: transform .55s var(--ease-out) .35s; } .steps .step:last-child::after { display: none; } .step.is-visible::after { transform: scaleX(1); } } /* -------------------------------------------------------------------------- 7. Тариф «Бизнес»: вращающаяся градиентная рамка -------------------------------------------------------------------------- */ @supports (background: conic-gradient(from 0deg, red, blue)) { @property --ring-angle { syntax: ''; initial-value: 0deg; inherits: false; } .plan--featured { box-shadow: var(--shadow-lg); border-color: transparent; } /* Красим только контур: двухпиксельная рамка вырезается маской, середина остаётся прозрачной и не перекрывает содержимое карточки. */ .plan--featured::after { content: ''; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; pointer-events: none; background: conic-gradient( from var(--ring-angle), var(--accent), var(--accent-2), var(--accent-hover), var(--accent)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: ring-spin 7s linear infinite; } /* Рамка идёт по верхнему краю карточки и пересекла бы плашку — поднимаем её. */ .plan__badge { z-index: 2; } @keyframes ring-spin { to { --ring-angle: 360deg; } } } /* -------------------------------------------------------------------------- 8. Кнопки: блик по наведению -------------------------------------------------------------------------- */ /* Блик сделан дополнительным слоем фона, а не псевдоэлементом с обрезкой. Псевдоэлемент требовал overflow: hidden, и в Safari кнопка внутри шапки с backdrop-filter из-за этого теряла и фон, и текст. Слой фона такого класса ошибок не создаёт в принципе: рисовать нечего, кроме самого фона. */ .btn--primary { background-image: linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, .34) 50%, transparent 58%), var(--gradient); background-size: 260% 100%, 100% 100%; background-position: 190% 0, 0 0; background-repeat: no-repeat; } .btn--primary:hover { background-position: -70% 0, 0 0; transition: background-position .7s ease, box-shadow .18s, transform .12s; } /* -------------------------------------------------------------------------- 9. Интеграции: включаются по очереди -------------------------------------------------------------------------- */ .int { position: relative; transition: border-color .3s ease, transform .3s var(--ease-out), box-shadow .3s ease; } .int::after { content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0; pointer-events: none; box-shadow: 0 0 0 1px var(--c, var(--accent)), 0 0 18px -3px var(--c, var(--accent)); } .int.is-visible::after { animation: power-on .8s ease var(--pulse-delay, 0s); } .int:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c, var(--accent)) 45%, var(--border)); box-shadow: var(--shadow-md); } .int__mark { transition: transform .3s var(--ease-out); } .int:hover .int__mark { transform: scale(1.08) rotate(-3deg); } @keyframes power-on { 0% { opacity: 0; } 35% { opacity: .6; } 100% { opacity: 0; } } /* Центральный узел схемы: пульс и бегущие по проводам импульсы */ .hub__node { animation: node-pulse 3.4s ease-out infinite; } @keyframes node-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent), var(--shadow-lg); } 70% { box-shadow: 0 0 0 26px transparent, var(--shadow-lg); } 100% { box-shadow: 0 0 0 0 transparent, var(--shadow-lg); } } @media (min-width: 1000px) { .hub__ring::before, .hub__ring::after { background-image: linear-gradient(90deg, var(--accent-2), var(--accent-2)), linear-gradient(90deg, transparent, var(--accent)); background-size: 9px 100%, 100% 100%; background-repeat: no-repeat; background-position: -9px 0, 0 0; animation: wire-pulse 2.6s linear infinite; } .hub__ring::after { background-image: linear-gradient(90deg, var(--accent-2), var(--accent-2)), linear-gradient(90deg, var(--accent), transparent); animation-delay: 1.3s; } @keyframes wire-pulse { 0% { background-position: -9px 0, 0 0; } 60%, 100% { background-position: 100% 0, 0 0; } } } /* -------------------------------------------------------------------------- 10. Полоса призыва к действию: медленное северное сияние -------------------------------------------------------------------------- */ .cta-band { position: relative; overflow: hidden; isolation: isolate; } .cta-band::before { content: ''; position: absolute; inset: -60%; z-index: -1; background: radial-gradient(circle at 28% 30%, rgba(255, 255, 255, .22), transparent 42%), radial-gradient(circle at 74% 68%, rgba(34, 211, 238, .32), transparent 44%); animation: aurora 16s ease-in-out infinite alternate; } @keyframes aurora { from { transform: translate3d(-4%, -3%, 0) scale(1); } to { transform: translate3d(6%, 5%, 0) scale(1.18); } } /* -------------------------------------------------------------------------- 11. Знак в шапке: модули третьего штриха загораются по наведению -------------------------------------------------------------------------- */ .logo svg g rect { transition: opacity .25s ease; } .logo:hover svg g rect:nth-child(4) { animation: pix 1.5s ease-in-out infinite; } .logo:hover svg g rect:nth-child(5) { animation: pix 1.5s ease-in-out .18s infinite; } .logo:hover svg g rect:nth-child(6) { animation: pix 1.5s ease-in-out .36s infinite; } @keyframes pix { 0%, 100% { opacity: .3; } 45% { opacity: 1; } } /* -------------------------------------------------------------------------- 12. Цифры в блоке статистики -------------------------------------------------------------------------- */ .stat__num { font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- 13. Надзаголовки: подчёркивающая черта -------------------------------------------------------------------------- */ .eyebrow { position: relative; padding-left: 26px; } .eyebrow::before { content: ''; position: absolute; left: 0; top: 50%; width: 18px; height: 2px; border-radius: 1px; background: var(--gradient); transform: scaleX(0); transform-origin: left center; transition: transform .5s var(--ease-out) .2s; } .eyebrow.is-visible::before, .hero .eyebrow::before, .page-head .eyebrow::before { transform: scaleX(1); } .section-head--center .eyebrow { padding-left: 0; } .section-head--center .eyebrow::before { display: none; } /* -------------------------------------------------------------------------- 14. Уважение к системной настройке «уменьшить движение» -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .js .reveal, .js .hero__inner > * { opacity: 1 !important; transform: none !important; animation: none !important; } .hero::before, .hero::after, .chat::after, .chat__status::before, .try__live::before, .chat__action::after, .cta-band::before, .plan--featured::after, .int.is-visible::after, .hub__node, .hub__ring::before, .hub__ring::after, .logo:hover svg g rect { animation: none !important; } .eyebrow::before, .step::after { transform: scaleX(1) !important; } .scroll-progress { display: none; } }