/* ================================================================ KmZero — Splash Screen CSS Carregado via diretamente no , antes de qualquer JS. Garante que a tela de loading apareça instantaneamente. ================================================================ */ #kmzero-splash { position: fixed; inset: 0; z-index: 99999; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #0F1F38; background-image: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(59,130,246,0.12) 0%, transparent 70%), radial-gradient(ellipse 50% 40% at 80% 100%, rgba(43,91,170,0.10) 0%, transparent 60%); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; transition: opacity 0.5s ease, visibility 0.5s ease; user-select: none; -webkit-user-select: none; } #kmzero-splash.hiding { opacity: 0; visibility: hidden; } /* Conteúdo central */ .splash-content { display: flex; flex-direction: column; align-items: center; gap: 0; animation: splashFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; } /* Logo / ícone do velocímetro */ .splash-logo-wrap { position: relative; width: 96px; height: 96px; margin-bottom: 24px; display: flex; align-items: center; justify-content: center; } .splash-logo-ring { position: absolute; inset: -10px; border-radius: 30px; background: conic-gradient(from 180deg, #3B82F6 0%, rgba(59,130,246,0.1) 70%, transparent 100%); animation: splashRingRotate 2.5s linear infinite; opacity: 0.8; } .splash-logo-bg { position: relative; width: 96px; height: 96px; border-radius: 24px; background: linear-gradient(135deg, #162D52, #1A3A6B); border: 1px solid rgba(59,130,246,0.35); box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 25px rgba(59,130,246,0.2); display: flex; align-items: center; justify-content: center; overflow: hidden; z-index: 2; } .splash-logo-bg img { width: 68px; height: 68px; object-fit: contain; } /* Nome do App */ .splash-app-name { font-size: 32px; font-weight: 800; letter-spacing: -0.5px; color: #F4F7FF; margin-bottom: 4px; line-height: 1; } .splash-app-tagline { font-size: 13px; font-weight: 400; color: #8BA8C8; letter-spacing: 0.02em; margin-bottom: 40px; } /* Dots de loading */ .splash-dots { display: flex; align-items: center; gap: 8px; margin-bottom: 56px; } .splash-dot { width: 7px; height: 7px; border-radius: 50%; background: #3B82F6; opacity: 0.3; animation: splashDotPulse 1.4s ease-in-out infinite; } .splash-dot:nth-child(1) { animation-delay: 0s; } .splash-dot:nth-child(2) { animation-delay: 0.2s; } .splash-dot:nth-child(3) { animation-delay: 0.4s; } /* Rodapé SólidaTech */ .splash-footer { position: absolute; bottom: max(32px, env(safe-area-inset-bottom, 32px)); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; animation: splashFadeUp 0.8s 0.2s cubic-bezier(0.16, 1, 0.3, 1) both; } .splash-powered-by { font-size: 11px; font-weight: 500; color: #475569; letter-spacing: 0.08em; text-transform: uppercase; } .splash-brand { display: flex; align-items: center; gap: 8px; } .splash-brand-logo { width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(135deg, #2B5BAA, #3B82F6); display: flex; align-items: center; justify-content: center; } .splash-brand-name { font-size: 15px; font-weight: 700; color: #8BA8C8; letter-spacing: -0.01em; } .splash-brand-name span { color: #3B82F6; } /* ── Animações ── */ @keyframes splashFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes splashRingRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes splashDotPulse { 0%, 100% { opacity: 0.25; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.15); } }