/* Base visual del sitio: la tipografia, el reset de caja y el fondo animado * de estrellas con sus animaciones. * * Estas nueve reglas estaban copiadas palabra por palabra en styles.css y en * home.css, las dos hojas de pagina, que nunca se cargan juntas. Son ~140 * lineas y las mueve el mismo background_motion.js en las dieciseis paginas, * asi que tener dos copias solo servia para que se desviaran. * * ORDEN: esta hoja tiene que cargarse ANTES que la de cada pagina. No es * cosmetico: `body::after` de las hojas de pagina redefine `inset`, que la * regla compartida `body::before, body::after` tambien fija. Si esta fuera la * ultima ganaria ella y la capa de estrellas se descolocaria en todo el sitio. * Por eso se enlaza desde head_base.html, al principio del , y no desde * pwa_head.html, que va al final. */ @font-face { font-family: 'Ubuntu'; src: url("../fonts/ubuntu.1137a80d87c3.woff2") format('woff2'); font-weight: normal; font-style: normal; font-display: swap; } *, *::before, *::after { box-sizing: inherit; } html::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -2; background: radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.78) 0 1px, transparent 2px), radial-gradient(circle at 26% 64%, rgba(207, 229, 255, 0.64) 0 1px, transparent 2px), radial-gradient(circle at 44% 36%, rgba(255, 255, 255, 0.72) 0 1px, transparent 2px), radial-gradient(circle at 58% 82%, rgba(210, 181, 255, 0.62) 0 1px, transparent 2px), radial-gradient(circle at 76% 28%, rgba(255, 255, 255, 0.7) 0 1px, transparent 2px), radial-gradient(circle at 88% 72%, rgba(194, 222, 255, 0.58) 0 1px, transparent 2px); background-size: 340px 340px, 460px 460px, 620px 620px, 760px 760px, 980px 980px, 1240px 1240px; opacity: 0.46; will-change: transform, opacity; /* starDrift va y vuelve (alternate): con `linear infinite` el campo de estrellas saltaba de golpe del final al principio en cada ciclo. */ animation: starDrift 80s ease-in-out infinite alternate, starTwinkleSlow 18s ease-in-out infinite alternate; } html::after { content: ''; position: fixed; top: 12%; left: 78%; width: 180px; height: 2px; pointer-events: none; z-index: -1; opacity: 0; transform: rotate(-24deg) translate3d(0, 0, 0); transform-origin: right center; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(210, 232, 255, 0.98) 55%, rgba(255, 255, 255, 0.1)); filter: drop-shadow(0 0 8px rgba(181, 214, 255, 0.86)); animation: shootingStar 19s linear infinite; } body::before, body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; } html.background-motion-paused::before, html.background-motion-paused::after, html.background-motion-paused body::before, html.background-motion-paused body::after { animation-play-state: paused !important; } @keyframes starTwinkleSlow { from { opacity: 0.34; } to { opacity: 0.58; } } @keyframes starDrift { from { transform: translate3d(-2%, -1%, 0) scale(1.02); } to { transform: translate3d(2%, 1%, 0) scale(1.02); } } @keyframes shootingStar { 0% { opacity: 0; transform: rotate(-24deg) translate3d(0, 0, 0) scaleX(0.35); } 78% { opacity: 0; transform: rotate(-24deg) translate3d(0, 0, 0) scaleX(0.35); } 80% { opacity: 0.95; transform: rotate(-24deg) translate3d(-8px, 6px, 0) scaleX(1); } 84% { opacity: 0.9; transform: rotate(-24deg) translate3d(-300px, 190px, 0) scaleX(1); } 88% { opacity: 0; transform: rotate(-24deg) translate3d(-520px, 330px, 0) scaleX(0.75); } 100% { opacity: 0; transform: rotate(-24deg) translate3d(-520px, 330px, 0) scaleX(0.75); } } /* Modo rendimiento: en pantallas pequenas o con reduced-motion se apagan las * cuatro capas del fondo. Estaba repetido igual en las dos hojas de pagina, que * conservan lo suyo dentro de la misma media query (el fondo plano de cada una). * Aqui el orden no importa porque va todo con !important. */ @media (max-width: 900px), (prefers-reduced-motion: reduce) { html::before, html::after, body::before, body::after { content: none !important; animation: none !important; filter: none !important; } }