/* Intro de abertura do Calima (overlay 100% CSS). Cobre o boot e some quando o app sinaliza pronto (dismiss em splash-intro.js). Usa o fundo do app (var --bg-grad) -> emenda com claro/escuro sem flash. O ícone fica CONGELADO no centro exato desde o 1º frame (casa com a launch image estática do iOS, icons/startup/*), só o texto entra e a saída dá zoom. CSP: nada inline — só este arquivo. */ /* já visto nesta sessão (guard): não pinta o overlay — evita a 2ª execução no reload do service worker. A classe é posta no por splash-guard.js. */ html.splash-skip #splash { display: none; } #splash { position: fixed; inset: 0; z-index: 2147483000; background: var(--bg-grad, #ffffff); } /* ícone: CENTRO EXATO da tela, tamanho fixo desde o início (nada de "pop") */ #splash .sp-tile { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(38vw, 164px); aspect-ratio: 1 / 1; border-radius: 26%; overflow: hidden; background: #ffffff; box-shadow: 0 22px 50px rgba(20, 60, 140, .26), 0 7px 18px rgba(20, 60, 140, .14); } :root[data-theme='dark'] #splash .sp-tile { box-shadow: 0 26px 60px rgba(0, 10, 40, .5), 0 8px 22px rgba(0, 6, 30, .4); } #splash .sp-tile svg { width: 100%; height: 100%; display: block; } /* brilho diagonal cruzando o ícone (não move o ícone) */ #splash .sp-shine { position: absolute; top: -40%; left: 0; width: 42%; height: 180%; background: linear-gradient(105deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .7) 50%, rgba(255, 255, 255, 0) 100%); filter: blur(1px); opacity: 0; pointer-events: none; animation: sp-shine .85s ease .55s both; } /* texto ABAIXO do ícone, posicionado de forma absoluta p/ NÃO empurrar o ícone */ #splash .sp-text { position: absolute; left: 0; right: 0; top: calc(50% + min(19vw, 82px) + 26px); text-align: center; } #splash .sp-name { font-family: 'Inter Tight', 'Libre Franklin', -apple-system, system-ui, sans-serif; font-weight: 600; letter-spacing: .3px; font-size: clamp(26px, 8vw, 34px); color: #12447F; opacity: 0; animation: sp-rise .55s ease .4s both; } #splash .sp-tag { margin-top: 7px; font-family: 'Libre Franklin', -apple-system, system-ui, sans-serif; font-weight: 500; letter-spacing: .2px; font-size: clamp(13px, 3.6vw, 15px); color: #4A6693; /* azul rebaixado do sp-name — AA (≥4.5:1) em toda a faixa do --bg-grad claro */ opacity: 0; animation: sp-rise .55s ease .58s both; } :root[data-theme='dark'] #splash .sp-name { color: #EAF1FF; } :root[data-theme='dark'] #splash .sp-tag { color: #9FB2D6; } @keyframes sp-shine { 0% { opacity: 0; transform: translateX(-170%) rotate(18deg); } 30% { opacity: .8; } 100% { opacity: 0; transform: translateX(320%) rotate(18deg); } } @keyframes sp-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* dismiss: o ícone dá um zoom pra frente e o overlay some — "abre o app". Mantém o translate central no transform, senão o ícone saltaria pro canto. */ #splash.sp-done { opacity: 0; transition: opacity .6s ease; pointer-events: none; } #splash.sp-done .sp-tile { transform: translate(-50%, -50%) scale(5.5); transition: transform .65s cubic-bezier(.45, 0, .15, 1); } #splash.sp-done .sp-text { opacity: 0; transition: opacity .3s ease; } /* acessibilidade: sem animação de texto/brilho; ícone já está fixo no centro */ @media (prefers-reduced-motion: reduce) { #splash .sp-name, #splash .sp-tag { animation: none; opacity: 1; transform: none; } #splash .sp-shine { display: none; } }