/* app/static/css/page_transitions.css v0.3.2 — прелоадер: убрана тёмная подложка под зубом, чистый знак в орбите 01.06.2026: .ptr-logo-img без фона, только золотое свечение */ /* ═══════════════════════════════════════════════════════════════ ANTI-FOUC — скрываем body пока DOM+CSS не готовы ═══════════════════════════════════════════════════════════════ Класс page-not-ready ставится сразу на в base.html. Снимается JS-обработчиком как только DOMContentLoaded. Это гарантирует, что пользователь НИКОГДА не видит неоформленный HTML — даже на медленном соединении. */ /* ═══════════════════════════════════════════════════════════════ СТАБИЛЬНЫЙ SCROLLBAR — резервируем место всегда ═══════════════════════════════════════════════════════════════ Без этого: на коротких страницах scrollbar исчезает → viewport становится шире на ~10px → сайдбар "прыгает" горизонтально при каждом переходе. scrollbar-gutter всегда держит место. */ html { scrollbar-gutter: stable; } /* На узких экранах scrollbar-gutter:stable отключаем. На мобильных скроллбар оверлейный (поверх контента, ширины не занимает), поэтому резервировать 18px не нужно. А само резервирование делало layout viewport шире видимого на 18px: fixed-элементы с left:0;right:0 (прогресс-бар, оверлей, окно чата) растягивались на 429px при ширине экрана 411px — отсюда горизонтальный сдвиг и «дёргание» интерфейса. */ @media (max-width: 1024px) { html { scrollbar-gutter: auto; } } html.page-not-ready body { /* visibility вместо display:none — чтобы layout уже посчитался и при появлении не было перерасчёта геометрии */ visibility: hidden; } /* Когда страница готова — плавно проявляем контент */ html.page-ready body { visibility: visible; animation: ptr-content-fadein 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); } @keyframes ptr-content-fadein { from { opacity: 0; } to { opacity: 1; } } /* ═══════════════════════════════════════════════════════════════ ПОЛНОЭКРАННЫЙ ОВЕРЛЕЙ-ПРЕЛОАДЕР ═══════════════════════════════════════════════════════════════ */ .ptr-overlay { /* Перекрывает ТОЛЬКО контентную часть (справа от сайдбара). Вместо непрозрачного фона — лёгкое затемнение + blur, чтобы был виден прежний контент в размытом виде (премиум-ощущение, как у Apple/macOS Spotlight). Сайдбар остаётся чётким. */ position: fixed; top: 0; left: 264px; /* ширина сайдбара из _shell.html */ /* width вместо right:0 — right:0 у fixed тянет элемент до края layout viewport (в эмуляторе DevTools он на 18px шире видимой области). width считается от видимой ширины — горизонтального переполнения нет. */ width: calc(100% - 264px); bottom: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; /* Лёгкая вуаль + подсветка акцента по центру */ background: radial-gradient(ellipse at center, rgba(var(--accent-rgb), 0.08) 0%, var(--overlay-backdrop) 60%, var(--overlay-backdrop) 100%); /* Блюр того что лежит ниже (контент страницы) */ backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); opacity: 1; pointer-events: auto; transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.55s linear, backdrop-filter 0.55s ease; } /* На мобильных — sidebar скрыт, оверлей растягивается на весь экран */ @media (max-width: 1024px) { .ptr-overlay { left: 0; right: 0; width: auto; } } /* На мобильных — sidebar скрыт, оверлей растягивается на весь экран */ @media (max-width: 1024px) { .ptr-overlay { left: 0; right: 0; width: auto; } } .ptr-overlay.is-hidden { opacity: 0; pointer-events: none; visibility: hidden; /* Чтобы при скрытии оверлей не блокировал клики */ transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.55s; } /* Логотип внутри оверлея — плавно appears с лёгким scale */ .ptr-overlay .ptr-overlay-inner { transform: scale(1); transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1); } .ptr-overlay.is-hidden .ptr-overlay-inner { transform: scale(0.94); } /* Контейнер с логотипом и текстом по центру */ .ptr-overlay-inner { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; /* Анимация появления контента при показе оверлея */ animation: ptr-inner-pulse 2s ease-in-out infinite; } @keyframes ptr-inner-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.85; } } /* ── ЛОГОТИП Д (буква акцента в круге с орбитой) ───────────── */ .ptr-logo { position: relative; width: 88px; height: 88px; display: flex; align-items: center; justify-content: center; } /* Внешняя орбита-кольцо (тонкое) */ .ptr-logo::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(var(--accent-rgb), 0.18); box-shadow: 0 0 24px rgba(var(--accent-rgb), 0.10), inset 0 0 12px rgba(var(--accent-rgb), 0.05); } /* Вращающаяся дуга акцента (сегмент кольца) */ .ptr-logo::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--accent); border-right-color: var(--accent-strong); animation: ptr-logo-spin 1.1s linear infinite; filter: drop-shadow(0 0 4px rgba(var(--accent-rgb), 0.55)); } @keyframes ptr-logo-spin { to { transform: rotate(360deg); } } /* Логотип-зуб в центре орбиты. Тёмная подложка-круг, чтобы золотой прозрачный PNG читался ярко и не сливался с золотыми кольцами вокруг. Сам зуб — с мягким золотым свечением и лёгким пульсом. */ .ptr-logo-img { position: relative; z-index: 1; width: 58px; height: 58px; object-fit: contain; filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), 0.5)); animation: ptr-logo-breathe 2s ease-in-out infinite; } /* Лёгкое «дыхание» лого синхронно с орбитой — premium-ощущение. */ @keyframes ptr-logo-breathe { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), 0.4)); } 50% { transform: scale(1.04); filter: drop-shadow(0 0 12px rgba(var(--accent-rgb), 0.6)); } } /* ── ПОДПИСЬ И МИКРОДЕТАЛИ ────────────────────────────────── */ .ptr-brand-name { font-family: 'Inter', -apple-system, sans-serif; font-size: 18px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-primary, #e8eaed); margin: 0; } .ptr-brand-name .accent { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .ptr-brand-sub { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-tertiary, #6e7681); margin: 0; } /* Три точки-индикатора (мелкая деталь снизу) */ .ptr-dots { display: inline-flex; gap: 6px; margin-top: 8px; } .ptr-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: 0.4; animation: ptr-dot-pulse 1.4s ease-in-out infinite; } .ptr-dots span:nth-child(2) { animation-delay: 0.18s; } .ptr-dots span:nth-child(3) { animation-delay: 0.36s; } @keyframes ptr-dot-pulse { 0%, 100% { opacity: 0.25; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.1); } } /* ═══════════════════════════════════════════════════════════════ ТОНКИЙ ПРОГРЕСС-БАР СВЕРХУ ═══════════════════════════════════════════════════════════════ Появляется при клике на навигационную ссылку, ползёт до ~70%, потом резко до 100% когда страница готова. Скрывается. */ .ptr-progress { /* Прогресс-бар над контентной частью (НЕ над сайдбаром), как в Notion */ position: fixed; top: 0; left: 264px; /* ширина сайдбара */ /* width вместо right:0 — см. комментарий у .ptr-overlay */ width: calc(100% - 264px); height: 2.5px; z-index: 99998; background: transparent; pointer-events: none; opacity: 0; transition: opacity 0.25s ease-out; } /* На мобильных — sidebar скрыт, прогресс-бар на всю ширину */ @media (max-width: 1024px) { .ptr-progress { left: 0; right: 0; width: auto; } } .ptr-progress.is-active { opacity: 1; } .ptr-progress-bar { height: 100%; width: 0%; background: linear-gradient( 90deg, var(--accent-strong) 0%, var(--accent) 50%, var(--accent-strong) 100% ); box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.55), 0 0 16px rgba(var(--accent-rgb), 0.25); transition: width 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); border-radius: 0 2px 2px 0; } /* Световой блик впереди прогресс-бара — добавляет премиум-ощущение */ .ptr-progress-bar::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 80px; background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.45) 100% ); filter: blur(2px); transform: translateX(50%); } /* ═══════════════════════════════════════════════════════════════ РЕАКЦИЯ НА ССЫЛКИ ПРИ ХОВЕРЕ ═══════════════════════════════════════════════════════════════ Когда мышь над навигационной ссылкой — лёгкое сияние подсказывает, что переход «премиальный». Опционально, чисто косметика. */ a.ptr-link-active { /* Слегка осветляем для индикации что переход идёт */ pointer-events: none; opacity: 0.85; transition: opacity 0.15s; } /* ═══════════════════════════════════════════════════════════════ УЧЁТ ПРЕДПОЧТЕНИЯ "УМЕНЬШИТЬ АНИМАЦИИ" ═══════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { html.page-ready body { animation: none; } .ptr-overlay-inner { animation: none; } .ptr-logo::after { animation: ptr-logo-spin 2.5s linear infinite; } .ptr-dots span { animation: none; opacity: 0.7; } .ptr-progress-bar { transition: width 0.15s linear; } } /* ═══════════════════════════════════════════════════════════════ FALLBACK: если JS отключён, оверлей должен исчезнуть сам ═══════════════════════════════════════════════════════════════ Через 2 секунды показа оверлей плавно скрывается даже без JS. Если JS работает — он скроет оверлей раньше через .is-hidden. */ .ptr-overlay { animation: ptr-overlay-failsafe 2.5s 0.5s forwards; } @keyframes ptr-overlay-failsafe { /* На 0% оставляем как есть (видимым) — анимация стартует через 0.5s */ 0%, 80% { opacity: 1; pointer-events: auto; visibility: visible; } 100% { opacity: 0; pointer-events: none; visibility: hidden; } } /* Если JS сработал быстрее и поставил .is-hidden — отменяем fallback */ .ptr-overlay.is-hidden { animation: none; } /* И если JS подтвердил, что управляет (поставил .ptr-js-controlled) — тоже отменяем fallback, чтобы JS управлял временем самостоятельно */ .ptr-overlay.ptr-js-controlled { animation: none; }