/* Armenius PWA in-app chrome: navigation loader and pull-to-refresh. The installed app has no browser UI, so both are supplied by the page. Everything is fixed-position overlay with no layout impact, and everything is scoped to standalone so a normal browser tab (which has real chrome) never sees it. */ #armenius-appnav-loader, #armenius-appnav-refresh { /* Default off: a browser tab must never show these. */ display: none; } #armenius-appnav-refresh[hidden] { display: none !important; } @media (display-mode: standalone) { #armenius-appnav-loader.is-visible, #armenius-appnav-refresh:not([hidden]) { display: flex; } } /* Second signal: some iOS versions report display-mode unreliably, so the script also stamps this class on once it confirms standalone. */ html.armenius-standalone #armenius-appnav-loader.is-visible, html.armenius-standalone #armenius-appnav-refresh:not([hidden]) { display: flex; } /* * Painted in the FIRST frame of the incoming document. * * The inline script stamps this class when a navigation was in flight, so * the bar is already on screen before anything else renders — no transition, no * waiting for the deferred script. Without it the new page appears bare and the * spinner arrives late, which reads as a stall rather than a continuation. */ html.armenius-nav-loading #armenius-appnav-loader { display: flex; transform: translateY(0); transition: none; } /* --------------------------------------------------- navigation loader -- */ /* Bottom, not top: never collides with the notch, the status bar or the WP admin bar, and it is where a thumb is already looking. */ #armenius-appnav-loader { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; align-items: center; justify-content: center; height: calc(46px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--color-bg, #fff); border-top: 1px solid var(--color-border, #ddd); box-shadow: 0 -3px 16px rgb(0 0 0 / 0.12); transform: translateY(100%); transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1); pointer-events: none; } #armenius-appnav-loader.is-visible { transform: translateY(0); } /* * On the outgoing page there is no time to animate: the browser suspends rendering * as soon as it commits the navigation, so a 240ms slide-up is simply never seen. * This variant appears in the frame it is added. */ #armenius-appnav-loader.is-instant { transition: none; transform: translateY(0); } .armenius-appnav__spinner { display: block; width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--color-border, #ddd); border-top-color: var(--color-accent, #fc0); animation: armenius-appnav-spin 0.7s linear infinite; } /* ---------------------------------------------------- pull to refresh -- */ /* * z-index 1, against #page at z-index 2 below: the indicator sits BEHIND the * page and is revealed only in the gap opened by dragging the page down. */ #armenius-appnav-refresh { position: fixed; top: 14px; left: 50%; transform: translateX(-50%) scale(0.6); z-index: 1; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; background: var(--color-bg, #fff); color: var(--color-dark-2, #2e2e2e); box-shadow: 0 1px 6px rgb(0 0 0 / 0.16); opacity: 0; pointer-events: none; } body.admin-bar #armenius-appnav-refresh { top: 46px; } /* Past the trigger point: tint so the release threshold is unmistakable. */ #armenius-appnav-refresh.is-armed { background: var(--color-accent, #fc0); } #armenius-appnav-refresh svg { display: block; } #armenius-appnav-refresh.is-refreshing svg { animation: armenius-appnav-spin 0.7s linear infinite; } /* * The page shell must paint above the indicator, and must be opaque, or the * indicator would show through the content instead of from behind it. * Standalone only — this leaves ordinary browser tabs completely untouched. */ @media (display-mode: standalone) { #page { position: relative; z-index: 2; background: var(--color-bg-muted, #f9f9f9); } } html.armenius-standalone #page { position: relative; z-index: 2; background: var(--color-bg-muted, #f9f9f9); } @keyframes armenius-appnav-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { #armenius-appnav-loader { transition: none; } .armenius-appnav__spinner, #armenius-appnav-refresh.is-refreshing svg { animation-duration: 1.8s; } }