/* loader.css is render-blocking (linked in ), so it paints BEFORE the app bundle. Set the page background to the brand surface here so a hard load of /explore never flashes white (which made it feel like a full page reload), and render a static top bar that matches the real NetworkBar so the bar appears instantly and persists through the Vue mount. The FOUC script sets .dark/.light before paint, so these theme variants are correct on first paint. */ html, body { margin: 0; background: #0a0a0b; } html.light, html.light body { background: #f8fafc; } #loading-bg { background: var(--initial-loader-bg, transparent); } /* Static top bar — visually matches @bryanlabs/ui NetworkBar; replaced seamlessly when Vue mounts its own bar into #app. */ #static-topbar { position: sticky; top: 0; z-index: 50; inline-size: 100%; block-size: 40px; border-block-end: 2px solid transparent; border-image: linear-gradient(135deg, #60a5fa 0%, #8b5cf6 100%) 1; background: #161618; } html.light #static-topbar { background: #ffffff; } .stb-inner { display: flex; align-items: center; gap: 24px; block-size: 40px; padding-inline: 16px; } @media (min-width: 640px) { .stb-inner { padding-inline: 24px; } } @media (min-width: 1024px) { .stb-inner { padding-inline: 32px; } } .stb-logo { display: flex; align-items: center; gap: 8px; text-decoration: none; flex-shrink: 0; } .stb-logo img { block-size: 28px; inline-size: 28px; } .stb-word { font-weight: 600; font-size: 16px; color: #ededf0; } html.light .stb-word { color: #1e293b; } .stb-grad { background: linear-gradient(to right, #60a5fa, #8b5cf6); -webkit-background-clip: text; background-clip: text; color: transparent; } .stb-nav { display: flex; align-items: center; gap: 4px; font-size: 14px; } .stb-nav a { padding: 4px 10px; border-radius: 6px; color: #9ca3af; text-decoration: none; } .stb-nav .stb-active { background: rgba(139, 92, 246, 0.15); color: #a78bfa; } .loading-logo { position: absolute; inset-block-start: 40%; inset-inline-start: calc(50% - 75px); } .pre-loading { position: absolute; box-sizing: border-box; border: 3px solid transparent; block-size: 55px; border-radius: 50%; inline-size: 55px; inset-block-start: calc(40% + 35px); inset-inline-start: calc(50% - 27.5px); } .pre-loading .effect-1, .pre-loading .effect-2, .pre-loading .effect-3 { position: absolute; box-sizing: border-box; border: 3px solid transparent; block-size: 100%; border-inline-start: 3px solid var(--initial-loader-color, #eee); border-radius: 50%; inline-size: 100%; } .pre-loading .effect-1 { animation: rotate 1s ease infinite; } .pre-loading .effect-2 { animation: rotate-opacity 1s ease infinite 0.1s; } .pre-loading .effect-3 { animation: rotate-opacity 1s ease infinite 0.2s; } .pre-loading .effects { transition: all 0.3s ease; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(1turn); } } @keyframes rotate-opacity { 0% { opacity: 0.1; transform: rotate(0deg); } 100% { opacity: 1; transform: rotate(1turn); } }