@charset "UTF-8"; /* --------------------------------------------------------------------------- Splash screen — variante anillo: dos arcos girando alrededor del logo. Intercambiable con las otras variantes: en index.html se cambia el href del link y nada mas, porque ninguna necesita markup. index.html no lleva markup: el servicio (FuseSplashScreenService) solo pone y quita la clase .fuse-splash-screen-hidden en el body, asi que el splash se dibuja con los pseudo-elementos de y . body::before fondo a pantalla completa body::after logo html::before anillo --------------------------------------------------------------------------- */ :root { --splash-bg: #f1f5f9; --splash-fg: #1e293b; --splash-dot: #4f46e5; /* El tamaño del logo lo manda la diagonal, no el lado: un cuadrado de 100px mide 141px en diagonal y el interior del anillo son 173px, asi que las esquinas quedan con aire. Con 120px la diagonal daba 170px y rozaba. */ --splash-logo-w: 100px; --splash-anillo-w: 200px; } @media (prefers-color-scheme: dark) { :root { --splash-bg: #0f172a; --splash-fg: #f9fafb; } } /* --- Piezas comunes --- Las tres capas son fijas, no reciben clics y comparten el mismo fundido de salida que dispara la clase del body. */ html::before, body::before, body::after { content: ""; position: fixed; pointer-events: none; opacity: 1; visibility: visible; transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1); } /* --- Fondo --- */ body::before { inset: 0; z-index: 999997; background-color: var(--splash-bg); } /* --- Logo --- Va incrustado en base64 y no como url() a un archivo a proposito: es lo primero que tiene que verse, y una imagen enlazada se pide recien cuando el navegador pinta la capa, asi que llegaba despues del resto. Asi viaja dentro de este CSS, que ya esta en el , y esta lista en el primer frame sin una sola peticion. Es images/logo/favicon.png reducido a 192px y con la paleta acotada: pesa menos de 2 KB. Si cambia el logo hay que volver a generarlo. */ body::after { top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 999999; width: var(--splash-logo-w); height: var(--splash-logo-w); background-image: url("data:image/png;base64,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"); background-repeat: no-repeat; background-position: center; background-size: contain; animation: splash-logo-entrada 420ms cubic-bezier(0.2, 0.7, 0.2, 1) backwards; } /* --- Anillo --- Los arcos van en SVG y no con bordes CSS porque un border-radius corta las puntas en angulo recto; stroke-linecap="round" es lo que da las puntas redondeadas. Son dos circulos con el mismo stroke-dasharray, el segundo desplazado media vuelta para quedar enfrentado, y el de atras con menos opacidad para dar la sensacion de estela. El SVG entra como mascara y no como imagen para que el color siga saliendo de --splash-dot: lo que se ve es el background-color recortado por los arcos. Ademas asi no hay que meter el color dentro del data URI. Empieza a girar despues del logo, que es lo primero que debe verse. */ html::before { top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 999998; width: var(--splash-anillo-w); height: var(--splash-anillo-w); background-color: var(--splash-dot); -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20100%20100%22%3E%3Ccircle%20cx=%2250%22%20cy=%2250%22%20r=%2245%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%227%22%20stroke-linecap=%22round%22%20stroke-dasharray=%22108%2033.35%22%20opacity=%22.3%22/%3E%3Ccircle%20cx=%2250%22%20cy=%2250%22%20r=%2245%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%227%22%20stroke-linecap=%22round%22%20stroke-dasharray=%22108%2033.35%22%20stroke-dashoffset=%22-70.675%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20100%20100%22%3E%3Ccircle%20cx=%2250%22%20cy=%2250%22%20r=%2245%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%227%22%20stroke-linecap=%22round%22%20stroke-dasharray=%22108%2033.35%22%20opacity=%22.3%22/%3E%3Ccircle%20cx=%2250%22%20cy=%2250%22%20r=%2245%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%227%22%20stroke-linecap=%22round%22%20stroke-dasharray=%22108%2033.35%22%20stroke-dashoffset=%22-70.675%22/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; animation: splash-anillo-aparece 300ms linear 420ms backwards, splash-giro 1.4s linear 420ms infinite; } /* --- Entrada, una sola vez --- */ @keyframes splash-logo-entrada { from { transform: translate(-50%, -50%) scale(0.6); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } } @keyframes splash-anillo-aparece { from { opacity: 0; } to { opacity: 1; } } /* El translate va repetido en cada paso porque una animacion de transform reemplaza la propiedad entera, incluido el centrado. */ @keyframes splash-giro { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } /* Sin movimiento para quien lo pidio en su sistema: el anillo se queda quieto, pero hay que dejarle el centrado que traia la animacion. */ @media (prefers-reduced-motion: reduce) { body::after { animation: none; } html::before { animation: none; transform: translate(-50%, -50%); } } /* --- Salida --- */ body:not(.fuse-splash-screen-hidden) { overflow: hidden; } body.fuse-splash-screen-hidden::before, body.fuse-splash-screen-hidden::after, html:has(body.fuse-splash-screen-hidden)::before { visibility: hidden; opacity: 0; }