/* Page-navigation loading feedback, shared by the storefront and the staff portals. Server-rendered pages give nothing between clicking a link and the next page arriving, which reads as a dead click — especially on mobile and on the slower admin queries. page-loader.js adds .page-leaving to on same-origin navigation; pageshow removes it (covers back/forward-cache restores). Colours come from theme.css, so this works anywhere theme.css is loaded. Storefront-specific chrome stacking (announcement bar, header, tab bar) stays in storefront.css — it has no meaning here. */ /* Veil that fades the page while the next one loads. Static, not animation-dependent, so it stays visible even on engines that freeze animations once navigation is in flight (iOS Safari). */ body.page-leaving::before { content: ""; position: fixed; inset: 0; background: var(--page-veil); z-index: 1990; pointer-events: none; } /* Centered spinner ring. If the engine freezes the rotation mid-flight, a static partial ring on a dimmed page still reads as "loading". */ body.page-leaving::after { content: ""; position: fixed; top: 50%; left: 50%; width: 2.5rem; height: 2.5rem; margin: -1.25rem 0 0 -1.25rem; border: 3px solid color-mix(in srgb, var(--primary-color) 10%, transparent); border-top-color: var(--primary-color); border-radius: 50%; z-index: 2000; pointer-events: none; animation: page-load-spin 0.8s linear infinite; } @keyframes page-load-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { /* The veil still says "something is happening"; the ring just stops spinning rather than vanishing. */ body.page-leaving::after { animation: none; } }