/** * Motyw Royality — używaj w projektach z klasą .royality na lub . * https://royality.pl/additional/loader/ */ html.royality, body.royality { --rl-bg-deep: #060606; --rl-bg-panel: rgba(15, 15, 15, 0.92); --rl-gold: #d4af37; --rl-gold-bright: #e8c547; --rl-gold-dim: #9a7b2c; --rl-gold-glow: rgba(212, 175, 55, 0.38); --rl-text: #e8e6e3; --rl-text-muted: #8a8680; --rl-line: rgba(212, 175, 55, 0.22); --rl-overlay-scrim: rgba(6, 6, 6, 0.82); --rl-vignette: radial-gradient( ellipse 72% 58% at 50% 42%, rgba(212, 175, 55, 0.09) 0%, transparent 52% ), radial-gradient(ellipse 100% 100% at 50% 100%, rgba(0, 0, 0, 0.65) 0%, transparent 55%); --rl-spinner-track: rgba(212, 175, 55, 0.18); --rl-radius: 12px; --rl-font-body: "Sora", system-ui, sans-serif; } html.royality .rl-overlay, body.royality .rl-overlay { position: fixed; inset: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; font-family: var(--rl-font-body); background: var(--rl-vignette), var(--rl-overlay-scrim); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.32s ease, visibility 0.32s ease; } html.royality .rl-overlay.is-visible, body.royality .rl-overlay.is-visible { opacity: 1; visibility: visible; pointer-events: auto; } html.royality .rl-overlay__inner, body.royality .rl-overlay__inner { display: flex; flex-direction: column; align-items: center; gap: 1.15rem; padding: 1.75rem 2rem; border-radius: calc(var(--rl-radius) + 4px); border: 1px solid var(--rl-line); background: linear-gradient(165deg, rgba(22, 22, 22, 0.95) 0%, rgba(10, 10, 10, 0.98) 100%); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4) inset, 0 24px 64px rgba(0, 0, 0, 0.55), 0 0 80px rgba(212, 175, 55, 0.06); } html.royality .rl-overlay__label, body.royality .rl-overlay__label { margin: 0; font-family: var(--rl-font-body); font-size: 0.92rem; font-weight: 500; color: var(--rl-text); letter-spacing: 0.03em; } html.royality .rl-spinner, body.royality .rl-spinner { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 3px solid var(--rl-spinner-track); border-top-color: var(--rl-gold-bright); border-right-color: var(--rl-gold-dim); animation: rl-spin 0.85s linear infinite; filter: drop-shadow(0 0 12px var(--rl-gold-glow)); } html.royality .rl-spinner--sm, body.royality .rl-spinner--sm { width: 1.8rem; height: 1.8rem; border-width: 2px; filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.25)); } html.royality .rl-preview, body.royality .rl-preview { position: relative; width: 100%; max-width: 280px; border-radius: var(--rl-radius); overflow: hidden; background: var(--rl-bg-deep); border: 1px solid var(--rl-line); aspect-ratio: 1 / 1; box-sizing: border-box; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); } html.royality .rl-preview__media, body.royality .rl-preview__media { display: block; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.28s ease; } html.royality .rl-preview__media.is-ready, body.royality .rl-preview__media.is-ready { opacity: 1; } html.royality .rl-preview__shim, body.royality .rl-preview__shim { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient( circle at 50% 45%, rgba(212, 175, 55, 0.07) 0%, transparent 55% ), radial-gradient(ellipse 90% 80% at 50% 100%, rgba(0, 0, 0, 0.5) 0%, transparent 50%), rgba(8, 8, 8, 0.88); transition: opacity 0.28s ease, visibility 0.28s ease; } html.royality .rl-preview__shim.is-hidden, body.royality .rl-preview__shim.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; } html.royality .rl-preview__error, body.royality .rl-preview__error { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; padding: 0.85rem; text-align: center; font-family: var(--rl-font-body); font-size: 0.8rem; line-height: 1.45; color: #e8c4a0; background: rgba(24, 14, 8, 0.92); border-top: 1px solid rgba(251, 191, 36, 0.25); } html.royality .rl-preview.is-error .rl-preview__error, body.royality .rl-preview.is-error .rl-preview__error { display: flex; } html.royality .rl-preview.is-error .rl-preview__media, body.royality .rl-preview.is-error .rl-preview__media { display: none; }