/* ============================================================ GUSTOLIX LOADER — link this in on every page ============================================================ */ #gustolix-loader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; height: 100dvh; z-index: 99999; background: #0E0E10; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; overflow: hidden; -webkit-transform: translateZ(0); transform: translateZ(0); font-family: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; -webkit-transition: opacity .6s ease, visibility .6s ease; transition: opacity .6s ease, visibility .6s ease; } #gustolix-loader.gx-done { opacity: 0; visibility: hidden; pointer-events: none; } #gustolix-loader .gx-bracket { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-family: 'JetBrains Mono', 'Courier New', monospace; font-weight: 700; color: #FFD60A; opacity: 0.06; font-size: clamp(120px, 28vw, 360px); line-height: 1; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #gustolix-loader .gx-bracket.l { left: 4%; } #gustolix-loader .gx-bracket.r { right: 4%; } #gustolix-loader .gx-content { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 28px; padding: 0 24px; -webkit-animation: gx-fade-in .6s ease both; animation: gx-fade-in .6s ease both; } @-webkit-keyframes gx-fade-in { from { opacity: 0; -webkit-transform: translateY(8px); transform: translateY(8px); } to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes gx-fade-in { from { opacity: 0; -webkit-transform: translateY(8px); transform: translateY(8px); } to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } #gustolix-loader .gx-logo { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; font-family: 'JetBrains Mono', 'Courier New', monospace; font-weight: 700; } #gustolix-loader .gx-logo .gx-b { font-size: clamp(40px, 9vw, 56px); color: #FFD60A; line-height: 1; } #gustolix-loader .gx-logo .gx-g { font-family: 'Sora', -apple-system, sans-serif; font-size: clamp(48px, 11vw, 64px); font-weight: 800; color: #0A84FF; letter-spacing: -0.05em; line-height: 1; -webkit-animation: gx-pop 1.4s ease-in-out infinite; animation: gx-pop 1.4s ease-in-out infinite; } @-webkit-keyframes gx-pop { 0%, 100% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.06); transform: scale(1.06); } } @keyframes gx-pop { 0%, 100% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.06); transform: scale(1.06); } } #gustolix-loader .gx-name { font-family: 'Caveat', cursive; font-weight: 600; font-size: clamp(22px, 6vw, 28px); color: #E63756; margin-top: -6px; } #gustolix-loader .gx-bar { width: clamp(180px, 60vw, 240px); height: 3px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden; position: relative; } #gustolix-loader .gx-bar .gx-fill { position: absolute; top: 0; left: 0; height: 100%; width: 0%; background: #FFD60A; border-radius: 2px; -webkit-transition: width .35s ease-out; transition: width .35s ease-out; } #gustolix-loader .gx-meta { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 11px; letter-spacing: 0.12em; color: rgba(255,255,255,0.5); text-transform: uppercase; text-align: center; } #gustolix-loader .gx-msg span { color: #FFD60A; } #gustolix-loader .gx-pct { color: #FFD60A; font-weight: 700; min-width: 38px; text-align: left; } @media (max-width: 480px) { #gustolix-loader .gx-content { gap: 22px; } #gustolix-loader .gx-bracket { opacity: 0.04; } #gustolix-loader .gx-meta { gap: 12px; font-size: 10px; } } @media (prefers-reduced-motion: reduce) { #gustolix-loader .gx-logo .gx-g, #gustolix-loader .gx-content { -webkit-animation: none; animation: none; } } html.gx-loading, body.gx-loading { overflow: hidden; }