/* ========================================================== CBT UPI-YPTK PWA SPLASH Native browser splash -> this HTML splash -> application ========================================================== */ #cbtPwaSplash { display: none; } /* * Splash hanya boleh terlihat pada launch pertama sesi PWA. * Class cbt-pwa-first-launch dipasang oleh script inline di * sebelum halaman dirender sehingga tidak ada flash di menu berikutnya. */ html.cbt-pwa-first-launch #cbtPwaSplash { position: fixed; inset: 0; z-index: 2147483640; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #fff; background: radial-gradient(circle at 18% 6%, rgba(38,225,255,.32), transparent 29%), radial-gradient(circle at 85% 28%, rgba(19,130,255,.28), transparent 31%), linear-gradient(155deg, #0877f3 0%, #0756d7 34%, #063aab 58%, #032a7e 78%, #021a52 100%); opacity: 1; visibility: visible; transition: opacity .42s ease, visibility .42s ease; -webkit-user-select: none; user-select: none; touch-action: none; } #cbtPwaSplash.cbt-splash-hide { opacity: 0; visibility: hidden; pointer-events: none; } .cbt-splash-grid { position: absolute; inset: auto 0 0; height: 47%; opacity: .22; background-image: linear-gradient(rgba(71,220,255,.19) 1px, transparent 1px), linear-gradient(90deg, rgba(71,220,255,.19) 1px, transparent 1px); background-size: 48px 48px; transform: perspective(480px) rotateX(58deg) scale(1.5); transform-origin: bottom; -webkit-mask-image: linear-gradient(to top,#000 0%,rgba(0,0,0,.8) 50%,transparent); mask-image: linear-gradient(to top,#000 0%,rgba(0,0,0,.8) 50%,transparent); } .cbt-splash-circuit { position: absolute; width: 45%; height: 2px; opacity: .48; background: linear-gradient(90deg,transparent,rgba(70,223,255,.35),#45e9ff); } .cbt-splash-circuit::after { content:""; position:absolute; right:-2px; top:50%; width:7px; height:7px; transform:translateY(-50%); border-radius:50%; background:#47edff; box-shadow:0 0 14px #47edff; } .cbt-splash-circuit.c1 { left:-7%; top:22%; transform:rotate(8deg); } .cbt-splash-circuit.c2 { right:-7%; top:29%; transform:rotate(172deg); } .cbt-splash-circuit.c3 { left:-10%; bottom:15%; transform:rotate(-7deg); } .cbt-splash-circuit.c4 { right:-10%; bottom:17%; transform:rotate(187deg); } .cbt-splash-inner { position:relative; z-index:3; width:min(88vw,520px); padding:max(24px,env(safe-area-inset-top)) 14px max(22px,env(safe-area-inset-bottom)); text-align:center; } .cbt-splash-logo-wrap { position:relative; width:clamp(128px,31vw,190px); aspect-ratio:1; margin:0 auto 27px; display:grid; place-items:center; animation:cbtLogoFloat 2.7s ease-in-out infinite; } .cbt-splash-logo { position:relative; z-index:3; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 20px 28px rgba(0,13,65,.34)); } .cbt-splash-orbit { position:absolute; border-radius:50%; border:1px solid rgba(63,232,255,.35); } .cbt-splash-orbit.orbit-1 { inset:-13%; animation:cbtOrbit 4.4s linear infinite; } .cbt-splash-orbit.orbit-2 { inset:-27%; border-style:dashed; opacity:.56; animation:cbtOrbit 9s linear infinite reverse; } .cbt-splash-title { margin:0; font-size:clamp(31px,8.1vw,50px); line-height:1; font-weight:900; letter-spacing:-1.4px; text-shadow:0 6px 18px rgba(0,22,82,.30); } .cbt-splash-title strong { color:#55e8ff; font-weight:900; } .cbt-splash-separator { width:min(70%,300px); height:1px; margin:18px auto 15px; background:linear-gradient(90deg,transparent,#47e7ff,transparent); box-shadow:0 0 12px rgba(71,231,255,.65); } .cbt-splash-subtitle { margin:0; color:rgba(255,255,255,.96); font-size:clamp(15px,4vw,20px); font-weight:650; } .cbt-splash-campus { margin:7px 0 0; color:rgba(215,239,255,.80); font-size:clamp(10.5px,2.9vw,13.5px); } .cbt-splash-powered { margin-top:22px; display:inline-flex; align-items:center; gap:6px; padding:7px 11px; border:1px solid rgba(98,221,255,.20); border-radius:999px; color:rgba(219,240,255,.70); background:rgba(0,32,108,.18); font-size:9px; letter-spacing:.5px; text-transform:uppercase; } .cbt-splash-powered strong { color:#69eaff; font-size:10px; letter-spacing:.8px; } .cbt-splash-loading { width:min(78vw,380px); margin:clamp(62px,10vh,100px) auto 0; } .cbt-splash-loading-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; color:rgba(224,243,255,.82); font-size:10.5px; } .cbt-splash-progress { position:relative; width:100%; height:7px; overflow:hidden; border:1px solid rgba(94,227,255,.48); border-radius:999px; background:rgba(0,25,91,.58); box-shadow:inset 0 0 11px rgba(0,7,46,.36),0 0 12px rgba(68,228,255,.10); } .cbt-splash-progress span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#159dff,#46e9ff,#83ffff); box-shadow:0 0 13px rgba(64,238,255,.88); transition:width .27s ease; } .cbt-splash-dots { display:flex; justify-content:center; gap:6px; margin-top:18px; } .cbt-splash-dots i { width:6px; height:6px; display:block; border-radius:50%; background:#50eaff; opacity:.25; animation:cbtDot 1s ease-in-out infinite; } .cbt-splash-dots i:nth-child(2) { animation-delay:.16s; } .cbt-splash-dots i:nth-child(3) { animation-delay:.32s; } @keyframes cbtLogoFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-7px); } } @keyframes cbtOrbit { to { transform:rotate(360deg); } } @keyframes cbtDot { 0%,100% { opacity:.25; transform:scale(.75); } 50% { opacity:1; transform:scale(1.15); } } @media (max-height:680px) { .cbt-splash-logo-wrap { width:115px; margin-bottom:18px; } .cbt-splash-title { font-size:32px; } .cbt-splash-loading { margin-top:38px; } .cbt-splash-powered { margin-top:15px; } } @media (min-width:768px) { .cbt-splash-logo-wrap { width:170px; } .cbt-splash-loading { margin-top:75px; } } @media (prefers-reduced-motion:reduce) { .cbt-splash-logo-wrap, .cbt-splash-orbit, .cbt-splash-dots i { animation:none!important; } }