/* public/static/boot.css Linked from index.html so Vite does not inline this as html-proxy CSS. The pre-runtime boot loader: what xwui.dev paints before the XWUI runtime exists, and the rule that keeps the crawler-only prerender block off screen. WHY plain CSS and literal geometry: what is loading during this window IS the XWUI runtime, so no element and no design token exists yet to draw this. The moment the runtime lands, src/boot-splash.ts mounts the real XWUISplashScreen over this, and the two must line up: the numbers below are the splash's own layout (logo 176px wide by 147 tall via --xwui-splash-logo-size, 1rem gap, 24px spinner, then a 0.875rem message line), so the hand-over is a cross-fade with nothing moving. Change one, change the other. */ /* --xw-boot-bg and --xw-boot-accent are written by the synchronous script in index.html from the returning visitor's persisted style preset, so a dark-preset user never gets a white flash. The fallbacks are the default preset (Glass Light), which is what a first visit gets. */ html, body { background: var(--xw-boot-bg, #ffffff); } html.xw-js #xwui-prerender { display: none; } html.xw-js:not(.xw-app-ready) #app { min-height: 100vh; } /* The mark is the SAME file XWUILogo renders for the xwui brand (styles/brand/xwui/logo.json -> logo/xwui-logo.svg, served from the site root), and the same file boot-splash.ts hands the splash as its logoUrl, so the loader and the splash show one logo, not two. */ html.xw-js:not(.xw-app-ready) #app::after { content: ''; position: fixed; left: calc(50% - 88px); top: calc(50% - 112px); width: 176px; height: 147px; background: url('/styles/brand/xwui/logo/xwui-logo.svg') center / contain no-repeat; animation: xw-boot-breathe 2.4s ease-in-out infinite; } html.xw-js:not(.xw-app-ready) #app::before { content: ''; position: fixed; left: calc(50% - 12px); top: calc(50% + 51px); width: 24px; height: 24px; border-radius: 50%; border: 2.5px solid color-mix(in srgb, var(--xw-boot-accent, #2563eb) 18%, transparent); border-top-color: var(--xw-boot-accent, #2563eb); animation: xw-boot-spin 0.8s linear infinite; } @keyframes xw-boot-spin { to { transform: rotate(360deg); } } @keyframes xw-boot-breathe { 50% { opacity: 0.55; } } @media (prefers-reduced-motion: reduce) { html.xw-js:not(.xw-app-ready) #app::before { animation-duration: 2s; } html.xw-js:not(.xw-app-ready) #app::after { animation: none; } }