/* Uniseller brand fonts — declared here so they are available to the pre-mount loader AND every blank-layout page (e.g. the 404 page), independent of the Vite bundle. Files live in public/fonts. swap = never block first paint. */ @font-face { font-display: swap; font-family: Benzin; font-weight: 400; src: url("/fonts/benzin-regular.woff2") format("woff2"); } @font-face { font-display: swap; font-family: "PP Mori"; font-weight: 400; src: url("/fonts/ppmori-regular.woff2") format("woff2"); } @font-face { font-display: swap; font-family: "PP Mori"; font-weight: 600; src: url("/fonts/ppmori-semibold.woff2") format("woff2"); } body { margin: 0; } html { overflow: hidden scroll; } #loading-bg { --u-amber-500: #ffa92c; --u-grad-amber: linear-gradient(96deg, #ffd58a 0%, #ffa92c 100%); /* theme tokens — defaults = brand dark (the app's default theme). The inline script flips data-loader-theme to "light" when needed. */ --u-word: rgba(255, 255, 255, 95%); --u-cap: #6b7480; --u-line: rgba(255, 255, 255, 8%); --u-bloom: rgba(255, 169, 44, 10%); position: fixed; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--initial-loader-bg, #0a0b0d); font-family: "PP Mori", -apple-system, blinkmacsystemfont, "Segoe UI", sans-serif; inset: 0; } html[data-loader-theme="light"] #loading-bg { --u-word: #14161b; --u-cap: #93a0ad; --u-line: rgba(10, 12, 16, 8%); --u-bloom: rgba(255, 169, 44, 18%); } /* atmosphere bloom */ #loading-bg::before { position: absolute; background: radial-gradient(820px 520px at 50% -10%, var(--u-bloom), transparent 62%); content: ""; inset: 0; pointer-events: none; } .u-loader-mark { position: relative; z-index: 1; animation: u-lo-float 3s ease-in-out infinite; block-size: 84px; inline-size: 84px; } .u-loader-logo { position: relative; z-index: 2; display: grid; border-radius: 22px; background: var(--u-grad-amber); block-size: 84px; box-shadow: 0 18px 50px -14px rgba(255, 169, 44, 60%); color: #0a0a0a; font-family: Benzin, Impact, sans-serif; font-size: 42px; font-weight: 700; inline-size: 84px; place-items: center; } .u-loader-pulse { position: absolute; z-index: 0; border: 2px solid var(--initial-loader-color, #ffa92c); border-radius: 30px; animation: u-lo-pulse 2.2s ease-out infinite; inset: -10px; opacity: 0; } .u-loader-arc { position: absolute; z-index: 1; inset: -26px; } .u-loader-arc svg { animation: u-lo-spin 1.15s linear infinite; block-size: 100%; inline-size: 100%; } .u-loader-arc circle { fill: none; stroke: var(--initial-loader-color, #ffa92c); stroke-dasharray: 70 220; stroke-linecap: round; stroke-width: 3; } .u-loader-word { color: var(--u-word); font-family: Benzin, Impact, sans-serif; font-size: 22px; font-weight: 400; letter-spacing: -0.01em; margin-block-start: 34px; } .u-loader-cap { display: flex; align-items: center; color: var(--u-cap); font-size: 12.5px; gap: 5px; letter-spacing: 0.04em; margin-block-start: 8px; } .u-loader-dot { border-radius: 50%; animation: u-lo-blink 1.4s infinite; background: var(--initial-loader-color, #ffa92c); block-size: 4px; inline-size: 4px; } .u-loader-bar { position: relative; overflow: hidden; border-radius: 3px; background: var(--u-line); block-size: 4px; inline-size: 200px; margin-block-start: 26px; } .u-loader-bar i { position: absolute; border-radius: 3px; animation: u-lo-load 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite; background: var(--u-grad-amber); inline-size: 40%; inset-block: 0; inset-inline-start: 0; } @keyframes u-lo-float { 50% { transform: translateY(-7px); } } @keyframes u-lo-pulse { 0% { opacity: 0.5; transform: scale(0.9); } 100% { opacity: 0; transform: scale(1.25); } } @keyframes u-lo-spin { to { transform: rotate(360deg); } } @keyframes u-lo-blink { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } } @keyframes u-lo-load { from { transform: translateX(-100%); } to { transform: translateX(250%); } }