/* * preloader.css — JIS Group Website Preloader * Include in every page before other stylesheets. */ #jis-preloader { position: fixed; inset: 0; z-index: 99999; background: #0B1F3A; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; transition: opacity 0.5s ease, visibility 0.5s ease; } #jis-preloader.pl-hidden { opacity: 0; visibility: hidden; pointer-events: none; } /* grid texture */ .pl-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; } /* particles */ .pl-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .pl-p { position: absolute; width: 2px; height: 2px; background: rgba(244,180,0,.5); border-radius: 50%; animation: plParticleDrift linear infinite; } @keyframes plParticleDrift { 0% { transform: translateY(0) translateX(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 0.6; } 100% { transform: translateY(-100vh) translateX(var(--dx, 0px)); opacity: 0; } } /* pulse rings */ .pl-rings { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } .pl-ring { position: absolute; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: plRingPulse 3s ease-in-out infinite; } .pl-ring:nth-child(1) { width: 220px; height: 220px; border: 1px solid rgba(244,180,0,.12); animation-delay: 0s; } .pl-ring:nth-child(2) { width: 320px; height: 320px; border: 1px solid rgba(244,180,0,.07); animation-delay: 0.4s; } .pl-ring:nth-child(3) { width: 440px; height: 440px; border: 1px solid rgba(244,180,0,.04); animation-delay: 0.8s; } @keyframes plRingPulse { 0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.03); } } /* corner brackets */ .pl-corner { position: absolute; width: 40px; height: 40px; opacity: 0.18; } .pl-corner.tl { top: 24px; left: 24px; border-top: 1.5px solid #F4B400; border-left: 1.5px solid #F4B400; } .pl-corner.tr { top: 24px; right: 24px; border-top: 1.5px solid #F4B400; border-right: 1.5px solid #F4B400; } .pl-corner.bl { bottom: 24px; left: 24px; border-bottom: 1.5px solid #F4B400; border-left: 1.5px solid #F4B400; } .pl-corner.br { bottom: 24px; right: 24px; border-bottom: 1.5px solid #F4B400; border-right: 1.5px solid #F4B400; } /* centre content */ .pl-center { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; } /* spinner logo */ .pl-logo-wrap { width: 90px; height: 90px; position: relative; margin-bottom: 24px; } .pl-arc { position: absolute; inset: 0; border-radius: 50%; border: 2.5px solid transparent; border-top-color: #F4B400; border-right-color: rgba(244,180,0,.3); animation: plSpin 1.4s cubic-bezier(.6,0,.4,1) infinite; } .pl-arc-2 { position: absolute; inset: 8px; border-radius: 50%; border: 1.5px solid transparent; border-bottom-color: rgba(244,180,0,.5); border-left-color: rgba(244,180,0,.2); animation: plSpin 2s cubic-bezier(.6,0,.4,1) infinite reverse; } @keyframes plSpin { to { transform: rotate(360deg); } } .pl-logo-inner { position: absolute; inset: 14px; background: rgba(244,180,0,.08); border-radius: 50%; border: 1px solid rgba(244,180,0,.2); display: flex; align-items: center; justify-content: center; } .pl-j { font-family: 'Playfair Display', Georgia, serif; font-size: 26px; font-weight: 700; color: #F4B400; letter-spacing: -1px; line-height: 1; animation: plJPulse 2s ease-in-out infinite; } @keyframes plJPulse { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; } } /* brand name */ .pl-brand { font-family: 'Playfair Display', Georgia, serif; font-size: 24px; font-weight: 700; color: #fff; letter-spacing: 0.5px; margin-bottom: 6px; animation: plFadeUp 0.6s ease 0.2s both; } .pl-brand span { color: #F4B400; } .pl-tagline { font-family: 'Inter', system-ui, sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: 36px; animation: plFadeUp 0.6s ease 0.35s both; } @keyframes plFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* progress bar */ .pl-bar-wrap { width: 220px; height: 2px; background: rgba(255,255,255,.08); border-radius: 2px; overflow: hidden; margin-bottom: 14px; position: relative; animation: plFadeUp 0.6s ease 0.5s both; } .pl-bar { height: 100%; width: 0%; background: linear-gradient(90deg, #C9940A 0%, #F4B400 60%, #FFD54F 100%); border-radius: 2px; transition: width 0.07s linear; position: relative; } .pl-bar::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 18px; background: linear-gradient(90deg, transparent, rgba(255,220,80,.5)); } .pl-pct { font-family: 'Inter', system-ui, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: rgba(255,255,255,.3); margin-bottom: 28px; animation: plFadeUp 0.6s ease 0.55s both; } .pl-pct em { font-style: normal; color: #F4B400; font-size: 13px; } /* loading dots */ .pl-dots { display: flex; gap: 6px; align-items: center; animation: plFadeUp 0.6s ease 0.65s both; } .pl-dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(244,180,0,.35); animation: plDotBounce 1.2s ease-in-out infinite; } .pl-dot:nth-child(1) { animation-delay: 0s; } .pl-dot:nth-child(2) { animation-delay: 0.18s; } .pl-dot:nth-child(3) { animation-delay: 0.36s; } @keyframes plDotBounce { 0%, 80%, 100% { transform: scale(1); background: rgba(244,180,0,.35); } 40% { transform: scale(1.6); background: #F4B400; } } /* status message */ .pl-msg { font-family: 'Inter', system-ui, sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,.2); position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); white-space: nowrap; animation: plFadeUp 0.6s ease 0.8s both; }