/* RANKRIX — SITE LOADER (theme port; matches latest preview) */ .rkxl { position: fixed; inset: 0; z-index: 9999; background: #03040a; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: rgba(255, 255, 255, 0.86); will-change: opacity, transform; } body.rkxl-locked { overflow: hidden; } /* returning visitors: hidden before paint via the script (no flash) */ html.rkxl-seen .rkxl { display: none !important; } .rkxl::before { content: ''; position: absolute; inset: 0; background-image: var(--rkx-bg-image, url("assets/galactic.jpg")); background-size: cover; background-position: center center; background-repeat: no-repeat; background-color: #03040a; z-index: 0; animation: rkxl-bg-in 1600ms cubic-bezier(0.22, 1, 0.36, 1) backwards; } @keyframes rkxl-bg-in { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: scale(1); } } .rkxl__bg { position: absolute; inset: 0; z-index: 1; background: rgba(3, 4, 10, 0.42); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); pointer-events: none; animation: rkxl-veil-in 1200ms cubic-bezier(0.22, 1, 0.36, 1) 200ms backwards; } @keyframes rkxl-veil-in { from { opacity: 0; } to { opacity: 1; } } .rkxl__stars { position: absolute; inset: 0; z-index: 2; background-image: radial-gradient(1.2px 1.2px at 18% 22%, rgba(255,255,255,0.78), transparent), radial-gradient(1px 1px at 76% 14%, rgba(255,255,255,0.6), transparent), radial-gradient(1.4px 1.4px at 42% 58%, rgba(255,255,255,0.85), transparent), radial-gradient(1px 1px at 88% 72%, rgba(255,255,255,0.5), transparent), radial-gradient(1.2px 1.2px at 8% 78%, rgba(255,255,255,0.65), transparent); opacity: 0.38; pointer-events: none; animation: rkxl-twinkle 4.5s ease-in-out infinite alternate; } @keyframes rkxl-twinkle { from { opacity: 0.28; } to { opacity: 0.5; } } .rkxl__grain { position: absolute; inset: 0; z-index: 3; opacity: 0.045; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); pointer-events: none; } .rkxl__hud { position: absolute; inset: clamp(12px, 2.4vw, 28px); z-index: 4; pointer-events: none; } .rkxl__corner { position: absolute; width: clamp(18px, 2vw, 32px); height: clamp(18px, 2vw, 32px); border: 1px solid rgba(255, 255, 255, 0.22); transition: border-color 600ms ease; } .rkxl__corner--tl { top: 0; left: 0; border-right: none; border-bottom: none; } .rkxl__corner--tr { top: 0; right: 0; border-left: none; border-bottom: none; } .rkxl__corner--bl { bottom: 0; left: 0; border-right: none; border-top: none; } .rkxl__corner--br { bottom: 0; right: 0; border-left: none; border-top: none; } .rkxl__hud-bot { position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%); font-family: 'Poppins', 'Inter', -apple-system, sans-serif; font-size: clamp(9px, 0.8vw, 11px); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.42); white-space: nowrap; animation: rkxl-hud-in 900ms cubic-bezier(0.22, 1, 0.36, 1) 400ms backwards; } @keyframes rkxl-hud-in { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } } .rkxl__stack { position: relative; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: clamp(18px, 2.4vw, 32px); padding: clamp(16px, 4vw, 32px); max-width: 92vw; width: 100%; } .rkxl__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: 'Poppins', 'Inter', -apple-system, sans-serif; font-size: clamp(10px, 0.95vw, 12px); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #ffffff; opacity: 0; animation: rkxl-fade-up 760ms cubic-bezier(0.22, 1, 0.36, 1) 600ms forwards; } @keyframes rkxl-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .rkxl__eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 10px #4ade80, 0 0 4px rgba(74, 222, 128, 0.7); animation: rkxl-eyebrow-pulse 2s cubic-bezier(0.4, 0, 0.2, 1) infinite; flex-shrink: 0; } @keyframes rkxl-eyebrow-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.75); } } .rkxl__logo-wrap { position: relative; display: inline-block; width: clamp(180px, 38vw, 520px); aspect-ratio: 1563 / 313; } .rkxl__logo { width: 100%; height: auto; display: block; overflow: visible; } .rkxl__logo path { fill: transparent; stroke: #ffffff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: rkxl-draw 900ms cubic-bezier(0.4, 0, 0.2, 1) forwards; filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.18)); transition: fill 360ms cubic-bezier(0.4, 0, 0.2, 1); } @keyframes rkxl-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } .rkxl__logo g[data-i="0"] path { animation-delay: 850ms; transition-delay: 0ms; } .rkxl__logo g[data-i="1"] path { animation-delay: 970ms; transition-delay: 120ms; } .rkxl__logo g[data-i="2"] path { animation-delay: 1090ms; transition-delay: 240ms; } .rkxl__logo g[data-i="3"] path { animation-delay: 1210ms; transition-delay: 360ms; } .rkxl__logo g[data-i="4"] path { animation-delay: 1330ms; transition-delay: 480ms; } .rkxl__logo g[data-i="5"] path { animation-delay: 1450ms; transition-delay: 600ms; } .rkxl__logo g[data-i="6"] path { animation-delay: 1570ms; transition-delay: 720ms; } .rkxl__logo.is-filled path { fill: #ffffff; } .rkxl__status { display: flex; align-items: center; gap: clamp(10px, 1.5vw, 16px); width: 100%; max-width: clamp(260px, 36vw, 420px); opacity: 0; animation: rkxl-fade-up 760ms cubic-bezier(0.22, 1, 0.36, 1) 650ms forwards; } .rkxl__status-label { font-family: 'Poppins', 'Inter', sans-serif; font-size: clamp(9px, 0.85vw, 11px); font-weight: 600; letter-spacing: 0.18em; color: rgba(255, 255, 255, 0.48); text-transform: uppercase; white-space: nowrap; } .rkxl__bar { flex: 1; height: 1px; background: rgba(255, 255, 255, 0.12); overflow: hidden; position: relative; border-radius: 1px; } .rkxl__bar-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #1D24CA 0%, #818cf8 100%); box-shadow: 0 0 10px rgba(29, 36, 202, 0.55); will-change: width; } .rkxl__pct { font-family: 'Poppins', 'Inter', sans-serif; font-size: clamp(10px, 0.9vw, 12px); font-weight: 600; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.82); font-variant-numeric: tabular-nums; min-width: 3.5ch; text-align: right; } .rkxl__log { font-family: 'Poppins', 'Inter', sans-serif; font-size: clamp(10px, 0.9vw, 12px); letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.45); opacity: 0; animation: rkxl-fade-up 760ms cubic-bezier(0.22, 1, 0.36, 1) 780ms forwards; display: inline-flex; align-items: center; gap: 4px; min-height: 1.2em; } .rkxl__log::before { content: '› '; color: #818cf8; margin-right: 2px; } .rkxl__log .rkxl__caret { display: inline-block; width: 6px; height: 1em; background: rgba(29, 36, 202, 0.85); margin-left: 1px; animation: rkxl-blink 1s steps(2) infinite; } @keyframes rkxl-blink { 50% { opacity: 0; } } .rkxl__enter { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; background: rgba(29, 36, 202, 0.10); border: 1px solid rgba(29, 36, 202, 0.45); color: #ffffff; font-family: 'Inter', -apple-system, sans-serif; font-size: clamp(11px, 0.9vw, 12px); font-weight: 600; letter-spacing: 0.01em; cursor: pointer; overflow: hidden; border-radius: 1px; transition: background 280ms cubic-bezier(0.4, 0, 0.2, 1), border-color 280ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), transform 240ms cubic-bezier(0.4, 0, 0.2, 1); opacity: 0; transform: translateY(8px); pointer-events: none; user-select: none; -webkit-tap-highlight-color: transparent; } .rkxl__enter.is-ready { opacity: 1; transform: translateY(0); pointer-events: auto; animation: rkxl-enter-in 620ms cubic-bezier(0.34, 1.56, 0.64, 1), rkxl-enter-pulse 2000ms ease-in-out 720ms infinite; } @keyframes rkxl-enter-in { 0% { opacity: 0; transform: translateY(12px) scale(0.92); } 60% { transform: translateY(-2px) scale(1.04); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes rkxl-enter-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(29, 36, 202, 0.5), 0 0 16px rgba(29, 36, 202, 0.22); border-color: rgba(29, 36, 202, 0.5); background: rgba(29, 36, 202, 0.10); } 50% { box-shadow: 0 0 0 8px rgba(29, 36, 202, 0), 0 0 34px rgba(29, 36, 202, 0.6); border-color: rgba(77, 171, 255, 0.95); background: rgba(29, 36, 202, 0.22); } } .rkxl__enter.is-holding { animation: none; } .rkxl__enter:hover { background: rgba(29, 36, 202, 0.20); border-color: rgba(29, 36, 202, 0.7); box-shadow: 0 0 24px rgba(29, 36, 202, 0.35); } .rkxl__enter:active { transform: scale(0.97); } .rkxl__enter:focus-visible { outline: 2px solid rgba(29, 36, 202, 0.8); outline-offset: 3px; } .rkxl__enter-fill { position: absolute; top: 0; left: 0; bottom: 0; width: 0%; background: linear-gradient(90deg, rgba(29, 36, 202, 0.4) 0%, rgba(29, 36, 202, 0.6) 100%); pointer-events: none; z-index: 0; transition: width 100ms linear; } .rkxl__enter-fill::after { content: ''; position: absolute; top: 0; right: -2px; width: 2px; height: 100%; background: #818cf8; box-shadow: 0 0 10px #818cf8; opacity: 0; transition: opacity 80ms; } .rkxl__enter.is-holding .rkxl__enter-fill::after { opacity: 1; } .rkxl__enter > * { position: relative; z-index: 1; } .rkxl__enter-label { white-space: nowrap; } .rkxl__enter-icon { width: 11px; height: 11px; transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1); flex-shrink: 0; } .rkxl__enter:hover .rkxl__enter-icon { transform: translateX(3px); } .rkxl__hint { font-family: 'Poppins', 'Inter', sans-serif; font-size: clamp(9px, 0.78vw, 11px); letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.38); opacity: 0; transition: opacity 480ms cubic-bezier(0.22, 1, 0.36, 1) 200ms; text-align: center; } .rkxl__hint.is-ready { opacity: 1; } .rkxl__hint kbd { font-family: 'Poppins', 'Inter', sans-serif; font-size: 0.92em; color: rgba(255, 255, 255, 0.65); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.15); padding: 1px 5px; border-radius: 2px; margin: 0 2px; } .rkxl.is-exiting { pointer-events: none; animation: rkxl-exit-out 1000ms cubic-bezier(0.22, 1, 0.36, 1) forwards; } @keyframes rkxl-exit-out { 0% { opacity: 1; } 60% { opacity: 0.6; } 100% { opacity: 0; transform: scale(1.03); } } .rkxl.is-exiting .rkxl__stack { animation: rkxl-stack-out 700ms cubic-bezier(0.22, 1, 0.36, 1) forwards; } @keyframes rkxl-stack-out { 0% { opacity: 1; transform: translateY(0); filter: blur(0); } 100% { opacity: 0; transform: translateY(-18px); filter: blur(6px); } } @media (prefers-reduced-motion: reduce) { .rkxl, .rkxl *, .rkxl *::before, .rkxl *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .rkxl__logo path { stroke-dashoffset: 0 !important; fill: #fff !important; } .rkxl__eyebrow-dot { animation: none !important; } } @media (max-width: 359px) { .rkxl__stack { gap: 14px; padding: 14px; } .rkxl__logo-wrap { width: 82vw; } .rkxl__status { max-width: 80vw; } .rkxl__corner { width: 14px; height: 14px; } .rkxl__hud-bot { font-size: 9px; letter-spacing: 0.14em; } } @media (min-width: 360px) and (max-width: 639px) { .rkxl__stack { gap: 18px; } .rkxl__logo-wrap { width: 72vw; } .rkxl__status { max-width: 78vw; } } @media (min-width: 640px) and (max-width: 1023px) { .rkxl__logo-wrap { width: 52vw; max-width: 480px; } .rkxl__status { max-width: 56vw; } } @media (min-width: 1024px) and (max-width: 1535px) { .rkxl__logo-wrap { width: 38vw; max-width: 520px; } } @media (min-width: 1536px) and (max-width: 1919px) { .rkxl__logo-wrap { width: 36vw; max-width: 560px; } } @media (min-width: 1920px) and (max-width: 2559px) { .rkxl__logo-wrap { width: 32vw; max-width: 620px; } .rkxl__eyebrow { font-size: 13px; } .rkxl__pct, .rkxl__log, .rkxl__status-label { font-size: 13px; } .rkxl__enter { padding: 8px 16px; font-size: 13px; } .rkxl__hud-bot { font-size: 11px; } } @media (min-width: 2560px) and (max-width: 3839px) { .rkxl__logo-wrap { width: 30vw; max-width: 720px; } .rkxl__status { max-width: 480px; } .rkxl__eyebrow { font-size: 14px; letter-spacing: 0.2em; } .rkxl__pct, .rkxl__log, .rkxl__status-label { font-size: 14px; } .rkxl__enter { padding: 10px 20px; font-size: 14px; gap: 10px; } .rkxl__enter-icon { width: 13px; height: 13px; } .rkxl__hud-bot { font-size: 13px; } .rkxl__corner { width: 32px; height: 32px; } } @media (min-width: 3840px) { .rkxl__logo-wrap { width: 24vw; max-width: 900px; } .rkxl__status { max-width: 600px; } .rkxl__eyebrow { font-size: 16px; letter-spacing: 0.22em; } .rkxl__pct, .rkxl__log, .rkxl__status-label { font-size: 16px; } .rkxl__enter { padding: 12px 24px; font-size: 16px; gap: 12px; } .rkxl__enter-icon { width: 14px; height: 14px; } .rkxl__hud-bot { font-size: 15px; } .rkxl__corner { width: 42px; height: 42px; } } @media (max-height: 600px) { .rkxl__stack { gap: 12px; padding: 8px; } .rkxl__logo-wrap { width: clamp(140px, 24vw, 320px); } } @media (max-height: 420px) { .rkxl__stack { gap: 10px; } .rkxl__logo-wrap { width: clamp(120px, 20vw, 260px); } .rkxl__hint { display: none; } } /* Loader tweaks (v1.5.1) - thicker, more visible progress bar - slightly larger LOADING + percentage - "LOADING … 100%" row spans exactly the wordmark width - more prominent footer copyright */ /* Single source of truth for the wordmark width; the status row reuses it. */ .rkxl__stack { --rkxl-logo-w: clamp(180px, 38vw, 520px); } .rkxl__logo-wrap { width: var(--rkxl-logo-w); } .rkxl__status { width: var(--rkxl-logo-w); max-width: var(--rkxl-logo-w); } /* A little bigger */ .rkxl__status-label { font-size: clamp(11px, 1.05vw, 13px); } .rkxl__pct { font-size: clamp(12px, 1.1vw, 15px); } /* Thicker, more visible bar */ .rkxl__bar { height: 4px; border-radius: 3px; background: rgba(255, 255, 255, 0.16); } .rkxl__bar-fill { border-radius: 3px; box-shadow: 0 0 14px rgba(29, 36, 202, 0.75); } /* More prominent footer copyright */ .rkxl__hud-bot { font-size: clamp(11px, 1vw, 14px); font-weight: 600; letter-spacing: 0.2em; color: rgba(255, 255, 255, 0.74); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55); } /* Keep the shared width = wordmark width at every breakpoint */ @media (max-width: 359px) { .rkxl__stack { --rkxl-logo-w: 82vw; } } @media (min-width: 360px) and (max-width: 639px) { .rkxl__stack { --rkxl-logo-w: 72vw; } } @media (min-width: 640px) and (max-width: 1023px) { .rkxl__stack { --rkxl-logo-w: min(52vw, 480px); } } @media (min-width: 1024px) and (max-width: 1535px) { .rkxl__stack { --rkxl-logo-w: min(38vw, 520px); } } @media (min-width: 1536px) and (max-width: 1919px) { .rkxl__stack { --rkxl-logo-w: min(36vw, 560px); } } @media (min-width: 1920px) and (max-width: 2559px) { .rkxl__stack { --rkxl-logo-w: min(32vw, 620px); } } @media (min-width: 2560px) and (max-width: 3839px) { .rkxl__stack { --rkxl-logo-w: min(30vw, 720px); } } @media (min-width: 3840px) { .rkxl__stack { --rkxl-logo-w: min(24vw, 900px); } } @media (max-height: 600px) { .rkxl__stack { --rkxl-logo-w: clamp(140px, 24vw, 320px); } } @media (max-height: 420px) { .rkxl__stack { --rkxl-logo-w: clamp(120px, 20vw, 260px); } } /* Loader tweaks (v1.6.0) - progress line: fully blue gradient + layered glow - Hold-to-Enter button: hard 1px corners - complete scaling ladder 360px -> 8K: everything grows with the screen */ /* Blue line + glow (radius stays sharp) */ .rkxl__bar { height: 4px; border-radius: 1px; background: rgba(255, 255, 255, 0.14); } .rkxl__bar-fill { border-radius: 1px; background: linear-gradient(90deg, #1D24CA 0%, #1D24CA 48%, #2d35e0 78%, #4d5dff 100%); box-shadow: 0 0 8px rgba(29, 36, 202, 0.9), 0 0 22px rgba(45, 53, 224, 0.55), 0 0 44px rgba(29, 36, 202, 0.28); } /* Sharp button */ .rkxl__enter { border-radius: 1px; } /* ---- Scaling ladder ---- Small phones stay compact; from FHD upward every element steps up (fonts, bar, button, icon, hints, corners, spacing) so the loader reads clearly at 2K, 4K, 5K and 8K instead of shrinking into the screen. */ @media (max-width: 639px) { .rkxl__bar { height: 3px; } } @media (min-width: 1920px) and (max-width: 2559px) { .rkxl__stack { gap: 18px; } .rkxl__bar { height: 5px; } .rkxl__status { gap: 16px; } .rkxl__status-label { font-size: 13px; } .rkxl__pct { font-size: 15px; } .rkxl__log { font-size: 13px; } .rkxl__hint { font-size: 12px; } .rkxl__enter { padding: 9px 18px; font-size: 14px; gap: 9px; } .rkxl__enter-icon { width: 12px; height: 12px; } .rkxl__hud-bot { font-size: 12px; } .rkxl__corner { width: 26px; height: 26px; } } @media (min-width: 2560px) and (max-width: 3839px) { .rkxl__stack { gap: 22px; } .rkxl__bar { height: 6px; } .rkxl__status { gap: 20px; } .rkxl__status-label { font-size: 15px; } .rkxl__pct { font-size: 18px; } .rkxl__log { font-size: 15px; } .rkxl__hint { font-size: 14px; } .rkxl__hint kbd { padding: 2px 7px; } .rkxl__enter { padding: 12px 24px; font-size: 16px; gap: 11px; } .rkxl__enter-icon { width: 14px; height: 14px; } .rkxl__hud-bot { font-size: 14px; } .rkxl__corner { width: 34px; height: 34px; } } @media (min-width: 3840px) and (max-width: 5119px) { .rkxl__stack { gap: 28px; } .rkxl__stack { --rkxl-logo-w: min(24vw, 1000px); } .rkxl__bar { height: 8px; } .rkxl__bar-fill { box-shadow: 0 0 12px rgba(29, 36, 202, 0.9), 0 0 34px rgba(45, 53, 224, 0.55), 0 0 70px rgba(29, 36, 202, 0.3); } .rkxl__status { gap: 26px; max-width: none; } .rkxl__status-label { font-size: 19px; letter-spacing: 0.2em; } .rkxl__pct { font-size: 23px; } .rkxl__log { font-size: 19px; } .rkxl__log .rkxl__caret { width: 9px; } .rkxl__hint { font-size: 17px; } .rkxl__hint kbd { padding: 3px 9px; } .rkxl__enter { padding: 15px 30px; font-size: 20px; gap: 14px; border-width: 2px; } .rkxl__enter-icon { width: 18px; height: 18px; } .rkxl__enter-fill::after { width: 3px; right: -3px; } .rkxl__hud-bot { font-size: 18px; } .rkxl__corner { width: 44px; height: 44px; border-width: 2px; } } @media (min-width: 5120px) and (max-width: 7679px) { .rkxl__stack { gap: 34px; } .rkxl__stack { --rkxl-logo-w: min(23vw, 1280px); } .rkxl__bar { height: 10px; border-radius: 2px; } .rkxl__bar-fill { border-radius: 2px; box-shadow: 0 0 16px rgba(29, 36, 202, 0.9), 0 0 44px rgba(45, 53, 224, 0.55), 0 0 90px rgba(29, 36, 202, 0.32); } .rkxl__status { gap: 32px; max-width: none; } .rkxl__status-label { font-size: 24px; letter-spacing: 0.22em; } .rkxl__pct { font-size: 29px; } .rkxl__log { font-size: 24px; } .rkxl__log .rkxl__caret { width: 11px; } .rkxl__hint { font-size: 21px; } .rkxl__hint kbd { padding: 4px 12px; } .rkxl__enter { padding: 19px 38px; font-size: 25px; gap: 17px; border-width: 2px; } .rkxl__enter-icon { width: 22px; height: 22px; } .rkxl__enter-fill::after { width: 4px; right: -4px; } .rkxl__hud-bot { font-size: 22px; letter-spacing: 0.24em; } .rkxl__corner { width: 56px; height: 56px; border-width: 2px; } } @media (min-width: 7680px) { .rkxl__stack { gap: 48px; } .rkxl__stack { --rkxl-logo-w: min(22vw, 1900px); } .rkxl__bar { height: 14px; border-radius: 2px; } .rkxl__bar-fill { border-radius: 2px; box-shadow: 0 0 22px rgba(29, 36, 202, 0.9), 0 0 62px rgba(45, 53, 224, 0.55), 0 0 130px rgba(29, 36, 202, 0.34); } .rkxl__status { gap: 44px; max-width: none; } .rkxl__status-label { font-size: 34px; letter-spacing: 0.24em; } .rkxl__pct { font-size: 42px; } .rkxl__log { font-size: 34px; } .rkxl__log .rkxl__caret { width: 15px; } .rkxl__hint { font-size: 30px; } .rkxl__hint kbd { padding: 5px 16px; } .rkxl__enter { padding: 26px 52px; font-size: 36px; gap: 24px; border-width: 3px; } .rkxl__enter-icon { width: 32px; height: 32px; } .rkxl__enter-fill::after { width: 6px; right: -6px; } .rkxl__hud-bot { font-size: 32px; letter-spacing: 0.26em; } .rkxl__corner { width: 80px; height: 80px; border-width: 3px; } } /* ============================================================ Loader logo v2 — raster wordmark (assets/rankrix-wordmark.png) Bigger at every breakpoint + clip-wipe entrance. Placed last so its --rkxl-logo-w overrides the earlier size ladders. ============================================================ */ .rkxl__logo { animation: rkxl-logo-wipe 1100ms cubic-bezier(0.4, 0, 0.2, 1) 650ms backwards; } @keyframes rkxl-logo-wipe { from { clip-path: inset(0 100% 0 0); opacity: 0; } to { clip-path: inset(0 0 0 0); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .rkxl__logo { animation: none !important; opacity: 1 !important; clip-path: none !important; } } .rkxl__stack { --rkxl-logo-w: clamp(220px, 46vw, 620px); } @media (max-width: 359px) { .rkxl__stack { --rkxl-logo-w: 88vw; } } @media (min-width: 360px) and (max-width: 639px) { .rkxl__stack { --rkxl-logo-w: 82vw; } } @media (min-width: 640px) and (max-width: 1023px) { .rkxl__stack { --rkxl-logo-w: min(60vw, 560px); } } @media (min-width: 1024px) and (max-width: 1535px) { .rkxl__stack { --rkxl-logo-w: min(46vw, 640px); } } @media (min-width: 1536px) and (max-width: 1919px) { .rkxl__stack { --rkxl-logo-w: min(44vw, 700px); } } @media (min-width: 1920px) and (max-width: 2559px) { .rkxl__stack { --rkxl-logo-w: min(40vw, 780px); } } @media (min-width: 2560px) and (max-width: 3839px) { .rkxl__stack { --rkxl-logo-w: min(36vw, 900px); } } @media (min-width: 3840px) and (max-width: 5119px) { .rkxl__stack { --rkxl-logo-w: min(30vw, 1240px); } } @media (min-width: 5120px) and (max-width: 7679px) { .rkxl__stack { --rkxl-logo-w: min(28vw, 1560px); } } @media (min-width: 7680px) { .rkxl__stack { --rkxl-logo-w: min(26vw, 2300px); } } @media (max-height: 600px) { .rkxl__stack { --rkxl-logo-w: clamp(180px, 30vw, 380px); } } @media (max-height: 420px) { .rkxl__stack { --rkxl-logo-w: clamp(150px, 24vw, 320px); } }