/* GSMVanta atomic first-paint foundation. prepaint.js is synchronous in , so this gate applies to every runtime page that loads the shared design system: public, auth, client and admin. */ html { min-height: 100%; } /* Match the shell background while the complete UI is being prepared. */ html.gv-ui-preparing, html[data-app-area] { background: #ffffff; } html.gv-ui-preparing[data-theme="dark"], html.gv-ui-preparing[data-theme="premium-glass"], html[data-app-area="client"][data-theme="dark"], html[data-app-area="client"][data-theme="premium-glass"] { background: #05070a; } html[data-app-area="client"][data-theme="light"] { background: #f8f9fa; } html[data-app-area="client"][data-theme="system"] { background: #f8f9fa; } @media (prefers-color-scheme: dark) { html[data-app-area="client"][data-theme="system"] { background: #05070a; } } /* Atomic visibility: keep the real layout in flow so scripts can measure it, but never paint a partially enhanced page. This is intentionally global and does not depend on body.app-page or data-app-area, which also covers store, product, checkout, home, login/register and other public/auth documents. */ html.gv-ui-preparing[data-app-area="client"] body { opacity: 0 !important; pointer-events: none !important; transition: none !important; } html.gv-ui-ready[data-app-area="client"] body { opacity: 1; } html.gv-ui-preparing body { visibility: hidden !important; } html.gv-ui-ready body { visibility: visible; } /* Print must never inherit a transient runtime gate. */ @media print { html.gv-ui-preparing body { visibility: visible !important; } } /* administrator first-paint loader. Keep refreshes and cold navigations visually stable while the body is gated. The loader is neutral and theme-aware so dark mode never exposes a light sidebar/page flash before the administrator shell is ready. */ html.gv-ui-preparing[data-app-area="admin"]::before { content: ""; position: fixed; z-index: 2147483646; inset: 0; width: 100vw; height: 100dvh; background: #fff; pointer-events: all; } html.gv-ui-preparing[data-app-area="admin"]::after { content: ""; position: fixed; z-index: 2147483647; top: 50%; left: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border: 2px solid rgba(0,0,0,.16); border-top-color: #111; border-radius: 50%; animation: gv-admin-prepaint-spin .65s linear infinite; pointer-events: none; } html.gv-ui-preparing[data-app-area="admin"][data-theme="dark"]::before, html.gv-ui-preparing[data-app-area="admin"][data-theme="premium-glass"]::before { background: #0a0a0a; } html.gv-ui-preparing[data-app-area="admin"][data-theme="dark"]::after, html.gv-ui-preparing[data-app-area="admin"][data-theme="premium-glass"]::after { border-color: rgba(255,255,255,.18); border-top-color: #ededed; } @keyframes gv-admin-prepaint-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { html.gv-ui-preparing[data-app-area="admin"]::after { animation-duration: 1.8s; } } /* never paint a standalone language flag before the shell is ready. */ html:not(.gv-ui-ready) img.ui-flag { opacity: 0 !important; visibility: hidden !important; } html.gv-ui-ready img.ui-flag { opacity: 1 !important; visibility: visible !important; }