/* Адаптив и переходы между страницами. Часть v3/core.css; порядок частей важен — см. static/README.md. */ @media (max-width: 900px) { .section-head__inner { grid-template-columns: 1fr; gap: var(--section-head-mobile-gap); min-height: 36px; } .section-head__right { justify-content: flex-start; width: 100%; } .section-head__controls { justify-content: flex-start; width: 100%; } .section-head__text { font-size: var(--section-head-title-size); } .section-head--compact-rail .section-head__inner { grid-template-columns: minmax(0, 1fr) auto; } .section-head--compact-rail .section-head__right { width: auto; justify-content: flex-end; } } @media (max-width: 640px) { .info-trigger:not(.menu-button) { position: relative; } .info-trigger:not(.menu-button)::after { content: ''; position: absolute; inset: -10px; } .content-container { padding: var(--surface-content-padding-mobile); } .content-container.surface--quiet { border-radius: var(--surface-quiet-radius, var(--surface-radius)); } .content-body--inset { padding: 10px; } .content-container--panel-shell { --content-panel-shell-padding-x: 10px; --content-panel-shell-padding-y: 10px; --content-panel-shell-body-padding-top: 8px; } } /* ── Page navigation loading bar ─────────────────────────────────────────── */ /* Shown while navigation-runtime.js fetches the next page via AJAX. */ /* Activated by setting data-page-loading on ; cleared on content:loaded. */ @keyframes page-nav-loading-sweep { 0% { transform: translateX(-110%); } 100% { transform: translateX(250%); } } html[data-page-loading]::before { content: ''; position: fixed; top: 0; left: 0; width: 60%; height: 2px; background: linear-gradient( to right, transparent, var(--brand-color) 25%, var(--brand-color) 75%, transparent ); pointer-events: none; z-index: 9999; animation: page-nav-loading-sweep 1.2s ease-in-out infinite; } /* Disable interaction on the main content area while an AJAX navigation is in flight — prevents double-taps and phantom clicks on stale content. */ main.content[aria-busy="true"] { pointer-events: none; cursor: wait; } /* ── View Transitions ─────────────────────────────────────────────────────── */ /* Named element for the main content area so the site header stays visually */ /* anchored while the page body transitions. */ main.content { view-transition-name: page-main; } /* Outgoing content fades out quickly; incoming content slides up and fades in. */ ::view-transition-old(page-main) { animation: vt-page-out 140ms ease-in both; } ::view-transition-new(page-main) { animation: vt-page-in var(--motion-dur-base) var(--motion-ease, cubic-bezier(0.22, 1, 0.36, 1)) both; } /* Root cross-fade is fast — the header is visually identical on most pages. */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 100ms; } @keyframes vt-page-out { from { opacity: 1; } to { opacity: 0; } } @keyframes vt-page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* Respect reduced-motion: ::view-transition-* are not covered by the */ /* base.css * selector, so they need an explicit override here. */ @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: 0.01ms !important; } html[data-page-loading]::before { animation: none; /* Keep the bar visible as a static indicator instead of sweeping. */ transform: none; width: 100%; opacity: 0.5; } /* Enter animations: instant appearance instead of fade+slide. */ [data-word-async-entering], .is-newly-loaded { animation: none; } }