/* iiJobs custom web splash overlay — Lần 190 * Logo chữ i (image) xếp ngay ngắn trên "iiJobs" wordmark + 3 orbit dots. * Bỏ tagline tiếng Việt (đối tượng đa ngôn ngữ). * Critical CSS được inline trong để paint ~0ms, file này extend animations. */ .ii-splash { position: fixed; inset: 0; z-index: 99999; background: #ffffff; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; opacity: 1; transition: opacity 320ms ease-out; pointer-events: none; } .ii-splash.is-hiding { opacity: 0; } /* Logo image — chữ i flame, xếp trên wordmark */ .ii-splash__logo { width: 96px; height: 96px; display: block; margin: 0 auto 14px; object-fit: contain; animation: iiSplashLogoIn 600ms cubic-bezier(0.16, 1, 0.3, 1) both; } /* Wordmark — kích thước CỐ ĐỊNH, không bị resize theo viewport */ .ii-splash__brand { display: flex; align-items: baseline; font-family: 'Helvetica Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-weight: 900; font-size: 52px; letter-spacing: -0.02em; margin: 0 0 28px; animation: iiSplashLogoIn 600ms 80ms cubic-bezier(0.16, 1, 0.3, 1) both; } .ii-splash__brand-ii { color: #FF6B00; } .ii-splash__brand-jobs { color: #1a2540; } /* Loading: orbit dots — 3 chấm quay quanh tâm */ .ii-splash__loader { position: relative; width: 56px; height: 56px; animation: iiSplashLoaderIn 500ms 200ms ease-out both; } .ii-splash__dot { position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #FF6B00; transform-origin: 5px 5px; animation: iiSplashOrbit 1.2s linear infinite; } .ii-splash__dot:nth-child(2) { background: #2563eb; animation-delay: -0.4s; } .ii-splash__dot:nth-child(3) { background: #10b981; animation-delay: -0.8s; } @keyframes iiSplashOrbit { from { transform: rotate(0deg) translateX(20px); } to { transform: rotate(360deg) translateX(20px); } } @keyframes iiSplashLogoIn { from { opacity: 0; transform: translateY(8px) scale(0.94); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes iiSplashFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes iiSplashLoaderIn { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .ii-splash__dot { animation: iiSplashDotPulse 1.4s ease-in-out infinite; transform: none; } .ii-splash__dot:nth-child(1) { left: calc(50% - 18px); top: 50%; } .ii-splash__dot:nth-child(2) { left: 50%; top: 50%; animation-delay: 0.2s; } .ii-splash__dot:nth-child(3) { left: calc(50% + 6px); top: 50%; animation-delay: 0.4s; } } @keyframes iiSplashDotPulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } /* Mobile rất nhỏ — giảm size logo */ @media (max-width: 360px) { .ii-splash__brand { font-size: 44px; } .ii-splash__logo { width: 80px; height: 80px; } }