/* Centred loading overlay — a single SVG circle that fills clockwise in * DR red plus the word "Loading" underneath, floating on a soft cream * scrim. Same visual the shopify-reporting reports use. Pages including * this stylesheet must also include /static/loading-overlay.js (which * wires the overlay to internal clicks). * * Inherits --dr-red from the host page; if a page doesn't define it the * fallback in `stroke` below keeps the visual identifiable. */ .brain-loading-overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(253, 251, 247, 0.78); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); z-index: 10000; opacity: 0; transition: opacity 200ms ease-out; } .brain-loading-overlay.active { display: flex; opacity: 1; } .brain-loading-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; } .brain-loading-svg { display: block; } .brain-loading-track { fill: none; stroke: rgba(27, 22, 18, 0.08); stroke-width: 2; } .brain-loading-fill { fill: none; stroke: var(--dr-red, #C02526); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 150.8; stroke-dashoffset: 150.8; animation: brain-loading-fill 2.4s cubic-bezier(0.55, 0, 0.45, 1) infinite; } @keyframes brain-loading-fill { 0% { stroke-dashoffset: 150.8; } 100% { stroke-dashoffset: 0; } } .brain-loading-label { font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 10px; letter-spacing: 0.30em; text-transform: uppercase; font-weight: 400; color: rgba(27, 22, 18, 0.65); line-height: 1; margin-left: 0.30em; } /* Dark mode — activates only on pages that opt in with AND when the device prefers dark. Pages without the class are untouched. */ @media (prefers-color-scheme: dark) { body.dark-auto .brain-loading-overlay { background: rgba(23, 18, 14, 0.80); } body.dark-auto .brain-loading-track { stroke: rgba(253, 251, 247, 0.10); } body.dark-auto .brain-loading-label { color: rgba(253, 251, 247, 0.65); } }