/* Full-screen splash loader shown while DB-driven content is fetched. The element starts visible; ns-loaded class on hides it. */ #ns-page-loader { position: fixed; inset: 0; z-index: 99999; background-color: #0a0a0a; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.028) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.028) 1px, transparent 1px); background-size: 52px 52px; background-position: center center; display: flex; align-items: center; justify-content: center; opacity: 1; transition: opacity 0.32s ease; pointer-events: auto; } #ns-page-loader .ns-spinner { width: 52px; height: 52px; border: 3px solid rgba(255, 255, 255, 0.10); border-top-color: rgba(255, 255, 255, 0.92); border-radius: 50%; animation: ns-spin 0.85s linear infinite; } @keyframes ns-spin { to { transform: rotate(360deg); } } /* Hide the rest of the page while the loader is up so there's no flash */ html:not(.ns-loaded) body > *:not(#ns-page-loader) { visibility: hidden; } /* Fade out once loaded */ html.ns-loaded #ns-page-loader { opacity: 0; pointer-events: none; } /* Remove from layout after fade so it doesn't capture clicks */ html.ns-loaded #ns-page-loader { transition: opacity 0.32s ease, visibility 0s linear 0.32s; visibility: hidden; }