/**
* Page transition overlay — liquid glass, minimal. AdminPanel's own
* copy (resources/views/admin/layout.blade.php,
* resources/views/admin/auth/login.blade.php) — deliberately forked
* from Themes/DefaultTheme/Resources/assets/css/page-transition.css
* (published to public/themes/default/css/) rather than shared from
* public/shared-assets, so the admin panel's own theme (ThemeScope::Admin
* — currently dark) and the storefront's own theme (ThemeScope::Storefront
* — currently light) never bleed into each other's loading screen even
* for the instant before ThemeEngine\Http\Middleware\ShareEffectiveTheme
* resolves. Both copies still read the same --primary/--secondary/--bg/
* --glass-blur variable contract (see admin.css's own docblock) so they
* only diverge if a future change deliberately wants them to.
* Paired with public/shared-assets/js/page-transition.js (still shared —
* that file is pure DOM/show-hide logic with no color or scope
* awareness), which is the only thing that ever toggles the
* `.pt-hidden` class below.
*
* This is a classic server-rendered multi-page app (no Vite/SPA router
* per the Master Prompt's shared-hosting requirement), so "page
* transitions" means: paint this overlay the instant a new document
* starts rendering, then fade it out once that page is ready — and
* fade it back in for the split second before a link click actually
* navigates away. Falls back to a plain opacity swap (no spin/scale)
* under prefers-reduced-motion.
*/
#page-transition-overlay {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
background: color-mix(in srgb, var(--bg, #0f172a) 82%, transparent);
backdrop-filter: blur(var(--glass-blur, 18px));
-webkit-backdrop-filter: blur(var(--glass-blur, 18px));
opacity: 1;
visibility: visible;
transition: opacity 260ms ease, visibility 0s linear 0s;
}
/* Added by page-transition.js once the page is ready, and removed just
before a link click navigates away — see that file's show()/hide(). */
#page-transition-overlay.pt-hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 220ms ease, visibility 0s linear 220ms;
}
.pt-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.9rem;
}
/* Admin-configured custom loading icon (Settings → Loading Screen).
May be a static image or an animated .gif — either way it just
renders as a plain , so no separate animation handling is
needed here; a .gif animates on its own once painted. */
.pt-icon {
width: 88px;
height: 88px;
object-fit: contain;
border-radius: 18px;
filter: drop-shadow(0 4px 18px color-mix(in srgb, var(--primary, #6366f1) 35%, transparent));
}
/* loading_screen_logo_animate (Settings → Loading Screen) — off by
default (static icon/logo). #page-transition-overlay.pt-logo-animate
is added by all three loading screens from this single setting (see
Settings\Http\Middleware\ShareLoadingScreenSettings), so the
grow/shrink pulse below applies identically to .pt-icon (a dedicated
loading icon) and .pt-spinner__logo (the site-logo fallback) alike,
on every screen, rather than each one deciding independently. */
#page-transition-overlay.pt-logo-animate .pt-icon,
#page-transition-overlay.pt-logo-animate .pt-spinner__logo {
animation: pt-pulse 1200ms ease-in-out infinite;
}
/* loading_screen_icon_light/loading_screen_icon_dark — same
data-theme-mode swap as .auth-card__logo/.pt-spinner__logo just
below (admin.css's copy of this exact pattern). Both s are
always in the DOM when set; only one is ever visible.
This rule (and .pt-spinner__logo's copy of it further down) is ALSO
inlined verbatim into admin/layout.blade.php's and admin/auth/
login.blade.php's own , ahead of this stylesheet's own
— so the swap still works the instant HTML parses even if this file
is slow/blocked/momentarily fails to fetch, instead of both logos
sitting visible side by side until it does. Keep all copies
identical if this rule ever changes. */
.pt-icon.site-logo--dark { display: none; }
html[data-theme-mode="dark"] .pt-icon.site-logo--light { display: none; }
html[data-theme-mode="dark"] .pt-icon.site-logo--dark { display: block; }
.pt-brand {
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 0.01em;
background: linear-gradient(135deg, var(--primary, #6366f1), var(--secondary, #8b5cf6));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Site name standing in for the logo entirely — enabled loading screen
with no dedicated icon, no site logo, and no custom text configured
(see the layouts' own `$loadingScreenShowNameFallback`). Always
pulses, unlike .pt-icon/.pt-spinner__logo above which only pulse
under `.pt-logo-animate`: with no actual logo on screen in this
branch, the name IS the logo, so it always gets the grow/shrink
treatment regardless of that toggle. */
.pt-brand--logo {
animation: pt-pulse 1200ms ease-in-out infinite;
}
.pt-spinner {
position: relative;
width: 88px;
height: 88px;
display: grid;
place-items: center;
}
/* Site logo (Settings → site_logo_light/site_logo_dark) — see
resources/views/admin/layout.blade.php's own comment for why this
only renders when no dedicated loading icon is set. Rendered at the
same size as .pt-icon (no ring/dot around it — that used to draw a
circle over the logo instead of reading as a loading animation; the
pulse animation now carries that job). Both s are always in the
DOM; which one is visible swaps with the admin's own data-theme-mode
on (see admin.css:67's html[data-theme-mode="dark"] rule for
the same attribute), same theme-aware swap the storefront's
navbar/footer already use for this exact pair of settings. */
.pt-spinner__logo {
position: absolute;
inset: 0;
margin: auto;
width: 88px;
height: 88px;
object-fit: contain;
border-radius: 18px;
filter: drop-shadow(0 4px 18px color-mix(in srgb, var(--primary, #6366f1) 35%, transparent));
}
.pt-spinner__logo.site-logo--dark { display: none; }
html[data-theme-mode="dark"] .pt-spinner__logo.site-logo--light { display: none; }
html[data-theme-mode="dark"] .pt-spinner__logo.site-logo--dark { display: block; }
/* Visually hidden but still announced to screen readers via the
overlay's role="status" aria-live region. */
.pt-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
@keyframes pt-pulse {
0%, 100% { transform: scale(0.82); opacity: 0.7; }
50% { transform: scale(1.05); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
#page-transition-overlay,
#page-transition-overlay.pt-hidden {
transition: opacity 120ms linear, visibility 0s linear 0s;
}
.pt-icon,
.pt-spinner__logo,
.pt-brand--logo {
animation: none;
}
}