/* ============================================================ ReqTone preloader — standalone web build. Extracted from the ReqTone desktop app's splash screen and made dependency-free (no React, no build step, no webfonts, no network calls). Colours are driven by the tokens below. Override them on :root in your own stylesheet to match reqtone.com. ============================================================ */ .rt-preloader { /* ── Tokens (dark, default) ─────────────────────────────── */ --rt-pre-bg-base: #101116; --rt-pre-bg-panel: #171922; --rt-pre-accent: #5b9dff; --rt-pre-accent-soft: rgba(91, 157, 255, 0.16); --rt-pre-accent-glow: rgba(91, 157, 255, 0.45); position: fixed; inset: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; background: var(--rt-pre-bg-base); background: radial-gradient( ellipse at 50% 50%, var(--rt-pre-bg-panel) 0%, var(--rt-pre-bg-base) 70% ); cursor: default; user-select: none; -webkit-user-select: none; opacity: 1; transition: opacity 320ms ease-out; } /* ── Light theme ─────────────────────────────────────────── Auto by system preference, and overridable with / . */ @media (prefers-color-scheme: light) { html:not([data-theme='dark']) .rt-preloader { --rt-pre-bg-base: #f4f5f8; --rt-pre-bg-panel: #ffffff; --rt-pre-accent: #2f7ff0; --rt-pre-accent-soft: rgba(47, 127, 240, 0.11); --rt-pre-accent-glow: rgba(47, 127, 240, 0.28); } } html[data-theme='light'] .rt-preloader { --rt-pre-bg-base: #f4f5f8; --rt-pre-bg-panel: #ffffff; --rt-pre-accent: #2f7ff0; --rt-pre-accent-soft: rgba(47, 127, 240, 0.11); --rt-pre-accent-glow: rgba(47, 127, 240, 0.28); } /* Leaving: fade out, and stop swallowing input the moment it starts — the page underneath is live and should be reachable before the fade ends. */ .rt-preloader.is-leaving { opacity: 0; pointer-events: none; } /* Scroll lock while the preloader covers the page. */ html.rt-preloading, html.rt-preloading body { overflow: hidden; } /* ── Backdrop rings ─────────────────────────────────────────── */ .rt-preloader__ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid var(--rt-pre-accent); opacity: 0.05; pointer-events: none; } .rt-preloader__ring--1 { width: 40vmax; height: 40vmax; } .rt-preloader__ring--2 { width: 65vmax; height: 65vmax; } .rt-preloader__ring--3 { width: 90vmax; height: 90vmax; } /* ── Stage ──────────────────────────────────────────────────── */ .rt-preloader__stage { position: relative; width: clamp(220px, 34vmin, 460px); height: clamp(220px, 34vmin, 460px); display: flex; align-items: center; justify-content: center; } .rt-preloader__svg { position: relative; z-index: 2; width: 100%; height: 100%; overflow: visible; transition: filter 500ms ease-out; } .rt-preloader__canvas { position: absolute; inset: 0; z-index: 1; pointer-events: none; } /* ── Glow states ────────────────────────────────────────────── */ .rt-preloader__svg.is-ignite { filter: drop-shadow(0 0 18px var(--rt-pre-accent-glow)); } .rt-preloader__svg.is-settled { filter: drop-shadow(0 0 8px var(--rt-pre-accent-soft)); transition: filter 1200ms ease-out; } /* ── Marks and glyphs ───────────────────────────────────────── */ .rt-preloader__path { fill: var(--rt-pre-accent); transition: opacity 350ms ease; } .rt-preloader__glyph { font-family: ui-monospace, 'Cascadia Mono', 'Cascadia Code', Consolas, 'JetBrains Mono', 'Fira Code', Menlo, 'DejaVu Sans Mono', monospace; font-weight: 300; fill: var(--rt-pre-accent); /* `fill-box` keeps the pulse centred on the glyph itself rather than on the SVG origin, so it scales in place instead of drifting. */ transform-box: fill-box; transform-origin: center; will-change: transform, opacity, filter; } .rt-preloader__caret { fill: var(--rt-pre-accent); } /* The caret is a rect, not a `▌` glyph: a block character's width varies with whichever monospace font actually resolved, which would force a runtime measurement and a wait on document.fonts.ready before the animation starts. */ .rt-preloader__caret.is-blinking { animation: rt-preloader-caret 750ms step-end infinite; } @keyframes rt-preloader-caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* ── Reduced motion ─────────────────────────────────────────── */ /* The preloader still shows — nothing moves. The mark fades up and hands over. */ @media (prefers-reduced-motion: reduce) { .rt-preloader__ring, .rt-preloader__caret.is-blinking { animation: none; } .rt-preloader__svg, .rt-preloader__path { transition: opacity 300ms ease; } }