/* ============================================================= /article-demo/ — АНИМАЦИОННЫЙ СЛОЙ (26.08.2026) Работает только при (инлайн-скрипт в article-demo.php). Если JS не загрузился — класс снимается по таймауту и страница остаётся полностью статичной/видимой. Все правила скоупированы под .ssg-artdemo. ============================================================= */ html.adm-js .ssg-artdemo { --e: cubic-bezier(.16, 1, .3, 1); --e-soft: cubic-bezier(.25, .46, .45, .94); } /* --------------------------------------------------------------- 1. БАЗОВЫЙ REVEAL — блоки прячутся строго через CSS (без FOUC), JS только вешает .is-in и раздаёт --d (задержку каскада). --------------------------------------------------------------- */ /* Появляются ТОЛЬКО карточки, цитаты и служебные элементы. Любой текст — абзацы, плашки-врезки, строки аккордеона, колонки, «Содержание», текст внутри баннеров, кнопка в шапке — статичен (Настя 03.09, Кирилл 05.09). */ html.adm-js .ssg-artdemo .adm-main blockquote, html.adm-js .ssg-artdemo .adm-grid2 > *, html.adm-js .ssg-artdemo .adm-stats .adm-stat, html.adm-js .ssg-artdemo .adm-cost .adm-stat, html.adm-js .ssg-artdemo .adm-arrows, html.adm-js .ssg-artdemo .adm-final-card { opacity: 0; transform: translate3d(0, var(--rise, 24px), 0); /* 07.09.26: .85/.95s → .45/.5s, подъём 42 → 24px — появление короткое, без дыр и серых карточек при прокрутке */ transition: opacity .45s var(--e) var(--d, 0ms), transform .5s var(--e) var(--d, 0ms); } html.adm-js .ssg-artdemo .adm-grid2 > *, html.adm-js .ssg-artdemo .adm-stats .adm-stat, html.adm-js .ssg-artdemo .adm-cost .adm-stat { --rise: 24px; transform: translate3d(0, var(--rise), 0) scale(.985); } /* включённое состояние */ html.adm-js .ssg-artdemo .is-in { opacity: 1 !important; transform: none !important; filter: none !important; } /* --------------------------------------------------------------- 2. ЗАГОЛОВКИ — статичны (правка Насти 03.09.2026: анимацию текста убрали, пословная маска-ревил удалена вместе с ней) --------------------------------------------------------------- */ /* --------------------------------------------------------------- 3. КАРТИНКИ И ПЛЕЙСХОЛДЕРЫ — шторка + внутренний зум --------------------------------------------------------------- */ html.adm-js .ssg-artdemo .adm-imgrow .ph, html.adm-js .ssg-artdemo .adm-gallery .ph { clip-path: inset(0 0 100% 0 round 12px); transition: clip-path 1.15s var(--e) var(--d, 0ms); will-change: clip-path; } html.adm-js .ssg-artdemo .adm-imgrow .ph.is-in, html.adm-js .ssg-artdemo .adm-gallery .ph.is-in { clip-path: inset(0 0 0 0 round 12px); } html.adm-js .ssg-artdemo .adm-hero-art, html.adm-js .ssg-artdemo .adm-final-decor { /* картинка внутри до появления увеличена (--zoom) — без overflow она раздвигала страницу вбок на мобилке, clip-path scroll-область не режет */ overflow: hidden; clip-path: inset(0 0 100% 0); transition: clip-path 1.15s var(--e) var(--d, 0ms); will-change: clip-path; } html.adm-js .ssg-artdemo .adm-hero-art.is-in, html.adm-js .ssg-artdemo .adm-final-decor.is-in { clip-path: inset(0 0 0 0); } html.adm-js .ssg-artdemo .adm-hero-art img, html.adm-js .ssg-artdemo .adm-final-decor img { transform: scale(var(--zoom, 1.16)); transition: transform 1.4s var(--e); will-change: transform; } html.adm-js .ssg-artdemo .adm-hero-art.is-in img, html.adm-js .ssg-artdemo .adm-final-decor.is-in img { --zoom: 1; } /* --------------------------------------------------------------- 4. ТЁМНЫЕ CTA-БАННЕРЫ — шторка снизу вверх, контент каскадом, иллюстрация уезжает параллаксом --------------------------------------------------------------- */ html.adm-js .ssg-artdemo .adm-banner { clip-path: inset(0 0 100% 0 round 20px); transition: clip-path 1.1s var(--e); will-change: clip-path; } html.adm-js .ssg-artdemo .adm-banner.is-in { clip-path: inset(0 0 0 0 round 20px); } /* текст и кнопка внутри баннера статичны — появляются вместе со шторкой (каскад убран 05.09: «анимацию по тексту не убрал») */ /* параллакс баннера убран ещё 28.08, оставшийся масштаб 1.05 подрезал иллюстрацию по нижней кромке — снят по правке Насти 03.09 (п.4) */ html.adm-js .ssg-artdemo .adm-banner-art { will-change: auto; } /* --------------------------------------------------------------- 5. ТАБЛИЦЫ И СТРОКИ-ОПРЕДЕЛЕНИЯ — статичны (правка Насти 03.09.2026) --------------------------------------------------------------- */ /* --------------------------------------------------------------- 6. НУМЕРОВАННЫЕ ШАГИ — кружок с засечкой выезжает с перелётом --------------------------------------------------------------- */ html.adm-js .ssg-artdemo .adm-step .num { transform: scale(.6) rotate(-15deg); opacity: 0; transition: transform .45s cubic-bezier(.34, 1.4, .64, 1) calc(var(--d, 0ms) + 60ms), opacity .3s ease calc(var(--d, 0ms) + 60ms); } html.adm-js .ssg-artdemo .adm-step.is-in .num { transform: none; opacity: 1; } /* --------------------------------------------------------------- 7. СЛАЙДЕРЫ — карточки въезжают сбоку, drag-курсор, стрелки --------------------------------------------------------------- */ html.adm-js .ssg-artdemo .adm-track > * { opacity: 0; transform: translate3d(24px, 0, 0); transition: opacity .45s var(--e) var(--d, 0ms), transform .5s var(--e) var(--d, 0ms); } html.adm-js .ssg-artdemo .adm-track > *.is-in { opacity: 1; transform: none; } html.adm-js .ssg-artdemo .adm-track { cursor: grab; /* листание и инерцию трека считает JS — нативный smooth их демпфирует */ scroll-behavior: auto; } html.adm-js .ssg-artdemo .adm-track.adm-drag { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; } html.adm-js .ssg-artdemo .adm-track.adm-drag * { pointer-events: none; } /* одна анимация — перекраска плашки, как у .button.prev/.next на главной */ html.adm-js .ssg-artdemo .adm-arrow[disabled] { opacity: .35; pointer-events: none; } /* --------------------------------------------------------------- 8. КНОПКИ — заливка-развёртка (как .button.main на сайте) + магнит к курсору (JS двигает --mx/--my) --------------------------------------------------------------- */ html.adm-js .ssg-artdemo a.adm-btn { position: relative; overflow: hidden; isolation: isolate; transform: translate3d(0, var(--rise, 0px), 0); transition: opacity .45s var(--e) var(--d, 0ms), transform .45s var(--e), color .35s ease, border-color .35s ease; } html.adm-js .ssg-artdemo a.adm-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #E23006; transform: scaleX(0); transform-origin: 0 50%; transition: all .475s; } html.adm-js .ssg-artdemo a.adm-btn:hover { opacity: 1; } html.adm-js .ssg-artdemo a.adm-btn:hover::before { transform: scaleX(1); } /* второстепенная кнопка — «перекатывание» букв, как .button.outline на главной */ html.adm-js .ssg-artdemo a.adm-btn.outline::before { content: none; } html.adm-js .ssg-artdemo a.adm-btn.outline { gap: 5px; transition: all .8s ease; } html.adm-js .ssg-artdemo a.adm-btn.outline:hover { background-color: #ADD0EE; border-color: #043063; color: #043063; } html.adm-js .ssg-artdemo a.adm-btn.outline .text { position: relative; display: flex; justify-content: center; align-items: center; overflow: hidden; } html.adm-js .ssg-artdemo a.adm-btn.outline .span-mother, html.adm-js .ssg-artdemo a.adm-btn.outline .span-mother2 { display: flex; overflow: hidden; } html.adm-js .ssg-artdemo a.adm-btn.outline .span-mother2 { position: absolute; } html.adm-js .ssg-artdemo a.adm-btn.outline .span-mother2 span { transform: translateY(-1.2em); } html.adm-js .ssg-artdemo a.adm-btn.outline:hover .span-mother span { transform: translateY(1.2em); } html.adm-js .ssg-artdemo a.adm-btn.outline:hover .span-mother2 span { transform: translateY(0); } html.adm-js .ssg-artdemo a.adm-btn.outline svg { width: 18px; height: 18px; transition: all .8s ease; } html.adm-js .ssg-artdemo a.adm-btn.outline:hover svg { transform: translateX(5px); } /* хиро-кнопка прячется вместе с текстом */ /* сабмит формы — та же развёртка */ html.adm-js .ssg-artdemo .adm-final-form input[type="submit"] { transition: background-color .4s cubic-bezier(.6, 0, .2, 1), opacity .2s ease, transform .35s var(--e); } html.adm-js .ssg-artdemo .adm-final-form input[type="submit"]:hover { background-color: #E23006; opacity: 1; transform: translateY(-2px); } /* --------------------------------------------------------------- 9. КАРТОЧКИ — мягкий подъём под курсором --------------------------------------------------------------- */ /* плашки не кликабельны — наведение их не трогает (без подъёма и тени) */ html.adm-js .ssg-artdemo .adm-card, html.adm-js .ssg-artdemo .adm-step, html.adm-js .ssg-artdemo .adm-house, html.adm-js .ssg-artdemo .adm-service, html.adm-js .ssg-artdemo .adm-stat { transition: opacity .45s var(--e) var(--d, 0ms), transform .5s var(--e); } /* --------------------------------------------------------------- 10. АККОРДЕОН — плавное раскрытие (grid-template-rows) --------------------------------------------------------------- */ html.adm-js .ssg-artdemo .adm-acc-body { display: grid; grid-template-rows: 0fr; /* в живых статьях в теле пункта бывает НЕСКОЛЬКО абзацев: они попадали в неявные строки, а те по умолчанию auto — закрытый пункт показывал текст («2. хуйня якась», правка Насти 03.09) */ grid-auto-rows: 0fr; padding: 0; transition: grid-template-rows .6s var(--e), padding .6s var(--e); } html.adm-js .ssg-artdemo .adm-acc-body > * { min-height: 0; overflow: hidden; } html.adm-js .ssg-artdemo .adm-acc-item.open .adm-acc-body { grid-template-rows: 1fr; grid-auto-rows: auto; padding: 4px 0 22px; } /* правка Насти 28.08: сдвиг заголовка при наведении и смена цвета убраны — «как будто перебор». Кликабельность держит нативный cursor:pointer + иконка +/− */ html.adm-js .ssg-artdemo .adm-acc-icon { transition: transform .5s var(--e); } /* --------------------------------------------------------------- 11. СОДЕРЖАНИЕ — рельс прогресса, бегунок, каскад пунктов --------------------------------------------------------------- */ html.adm-js .ssg-artdemo .adm-toc { position: sticky; } html.adm-js .ssg-artdemo .adm-toc-list { position: relative; } html.adm-js .ssg-artdemo .adm-toc-rail { position: absolute; left: 0; top: 2px; bottom: 2px; width: 2px; border-radius: 2px; background: #ECECEC; overflow: hidden; } /* заливка рельса: высота = позиция бегунка (--h), чтобы линия и точка всегда совпадали; градиент лежит на внутреннем слое фиксированной высоты — при росте заливки он не сжимается */ html.adm-js .ssg-artdemo .adm-toc-rail i { position: absolute; left: 0; top: 0; width: 100%; height: var(--h, 0px); overflow: hidden; transition: height .55s cubic-bezier(.16, 1, .3, 1); } html.adm-js .ssg-artdemo .adm-toc-rail i b { position: absolute; left: 0; top: 0; width: 100%; height: var(--rail-h, 600px); background: linear-gradient(180deg, #043063 0%, #2F6DA8 55%, #FF542C 100%); } html.adm-js .ssg-artdemo .adm-toc-dot { position: absolute; left: -4px; top: 0; z-index: 2; width: 10px; height: 10px; box-sizing: border-box; border: 2px solid #fff; border-radius: 50%; background: #FF542C; box-shadow: 0 0 0 3px rgba(255, 84, 44, .18); transform: translate3d(0, var(--y, 0px), 0) scale(var(--s, 0)); transition: transform .55s var(--e); } /* пункты «Содержания» статичны (05.09) — остаются только hover/active */ html.adm-js .ssg-artdemo .adm-toc a.sub { transition: color .25s ease, padding-left .35s var(--e); } html.adm-js .ssg-artdemo .adm-toc a.sub:hover { padding-left: 26px; } html.adm-js .ssg-artdemo .adm-toc a.sub.active { padding-left: 26px; font-weight: 500; } /* --------------------------------------------------------------- 12. АБЗАЦ С ПОСЛОВНОЙ ЗАЛИВКОЙ — УБРАН 01.09.2026 (правка Насти «убери тут анимацию на тексте»). Класс .adm-fill больше не навешивается, слова не режутся. --------------------------------------------------------------- */ /* --------------------------------------------------------------- 13. ПРОГРЕСС ЧТЕНИЯ + КНОПКА «НАВЕРХ» --------------------------------------------------------------- */ html.adm-js .adm-progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 100000; background: transparent; pointer-events: none; } html.adm-js .adm-progress i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #043063 0%, #2F6DA8 55%, #FF542C 100%); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; transition: transform .12s linear; } /* кнопка живёт вне .ssg-artdemo (в body), поэтому её стили усилены — в теме есть глобальные правила для button (оранжевый фон, паддинги) */ html.adm-js .adm-totop { position: fixed; right: 28px; bottom: 28px; width: 54px !important; min-width: 0 !important; max-width: none !important; height: 54px !important; border: none !important; border-radius: 50% !important; background: #fff !important; box-shadow: 0 10px 30px rgba(4, 48, 99, .18) !important; cursor: pointer; z-index: 99998; opacity: 0; transform: translate3d(0, 18px, 0) scale(.85); transition: opacity .45s cubic-bezier(.16, 1, .3, 1), transform .45s cubic-bezier(.16, 1, .3, 1); display: grid !important; place-items: center; padding: 0 !important; margin: 0 !important; font-size: 0; overflow: visible !important; } html.adm-js .adm-totop.show { opacity: 1; transform: none; } html.adm-js .adm-totop:hover { transform: translate3d(0, -3px, 0); } html.adm-js .adm-totop svg { position: absolute; inset: 0; width: 54px; height: 54px; transform: rotate(-90deg); } html.adm-js .adm-totop svg circle { fill: none; stroke-width: 2; } html.adm-js .adm-totop svg .bg { stroke: rgba(4, 48, 99, .12); } html.adm-js .adm-totop svg .fg { stroke: #FF542C; stroke-linecap: round; stroke-dasharray: 157; stroke-dashoffset: calc(157 - 157 * var(--p, 0)); transition: stroke-dashoffset .12s linear; } html.adm-js .adm-totop b { position: relative; display: block; width: 10px !important; height: 10px !important; background: none !important; border-left: 2px solid #043063; border-top: 2px solid #043063; transform: rotate(45deg) translate(1px, 1px); } /* на мобилке иллюстрация баннера кадрируется в CSS (object-fit) — остаточный зум от снятого параллакса тут только сбивал кадр */ @media (max-width: 767px) { html.adm-js .ssg-artdemo .adm-banner-art { transform: none; } } @media (max-width: 1023px) { html.adm-js .adm-totop { display: none !important; } } /* --------------------------------------------------------------- 14. Уважение к настройкам ОС и печать --------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html.adm-js .ssg-artdemo *, html.adm-js .ssg-artdemo *::before, html.adm-js .ssg-artdemo *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } } @media print { html.adm-js .ssg-artdemo * { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; } html.adm-js .adm-progress, html.adm-js .adm-totop { display: none !important; } } /* --------------------------------------------------------------- 15. Отключение нативного smooth, пока работает инерционный скролл --------------------------------------------------------------- */ html.adm-smooth { scroll-behavior: auto !important; } /* --------------------------------------------------------------- 16. Врезка: черта статична (07.09.26). Раньше прорастала по .is-in, но 05.09 .adm-callout убран из REVEAL — класс не ставился, и черта оставалась scaleY(0) везде («линия пропала», Настя 07.09). --------------------------------------------------------------- */ /* --------------------------------------------------------------- 17. Курсор-кольцо (только мышь, только внутри статьи) --------------------------------------------------------------- */ html.adm-js .adm-cursor { position: fixed; top: 0; left: 0; width: 36px; height: 36px; margin: -18px 0 0 -18px; border: 1.5px solid rgba(4, 48, 99, .38); border-radius: 50%; pointer-events: none; z-index: 99997; opacity: 0; transition: opacity .35s ease, background-color .35s ease, border-color .35s ease; } html.adm-js .adm-cursor.on { opacity: 1; } html.adm-js .adm-cursor.hot { background: rgba(255, 84, 44, .12); border-color: rgba(255, 84, 44, .55); }