/* * Identidad compartida por TODAS las paginas: portada, registro y los tres * paneles. Se carga antes que la hoja propia de cada pagina. * * Existe por dos razones: * * 1. Las fuentes tienen que servirse desde aqui. El diseno original traia un * @import de fonts.googleapis.com, pero helmet no declara `font-src` y por * lo tanto cae a `default-src 'self'`: el navegador bloqueaba los .woff2 de * fonts.gstatic.com sin decir nada y la pagina se veia con la tipografia de * respaldo del sistema. Los cuatro archivos de public/fuentes/ son el * subconjunto latin (cubre acentos y ñ) bajado de Google Fonts. Archivo e * Inter son fuentes variables: un solo archivo cubre todos sus pesos. * * 2. Entrar a la plataforma no puede parecer entrar a otro sitio. Los paneles * nacieron con su propia paleta y al lado de la portada nueva se veian de * otro producto. La paleta institucional (marino, azul y rojo de la * bandera) vive aqui y las dos hojas de estilo la consumen. */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500 800; font-display: swap; src: url('/fuentes/archivo-variable.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/fuentes/inter-variable.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fuentes/ibm-plex-mono-500.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fuentes/ibm-plex-mono-600.woff2') format('woff2'); } :root { --marino: #041e42; --marino-medio: #0a2a54; --marino-claro: #10345f; --azul-rd: #002d62; --azul-vivo: #3d7cc9; --rojo-rd: #ce1126; --rojo-claro: #ff4d5e; --rojo-oscuro: #a30d1e; --blanco: #ffffff; --texto: #eef2f8; --tenue: #93a5bd; --borde: #1b3a64; --exito: #35c58f; --error: #ff7b7b; --display: 'Archivo', sans-serif; --body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --mono: 'IBM Plex Mono', monospace; --suave: cubic-bezier(0.22, 1, 0.36, 1); } /* * La franja tricolor de la bandera. En la portada se dibuja sola al cargar * (body.cargado); en los paneles va fija, porque ahi no hay animacion de * entrada y una franja que tarda en aparecer solo se veria como un salto. */ .tricolor { display: grid; grid-template-columns: 1fr 1fr 1fr; height: 6px; position: relative; z-index: 60; } .tricolor span { transform: scaleX(0); transition: transform 1s var(--suave); } .tricolor span:nth-child(1) { background: var(--azul-rd); transform-origin: left; } .tricolor span:nth-child(2) { background: var(--blanco); transform-origin: center; transition-delay: 0.15s; } .tricolor span:nth-child(3) { background: var(--rojo-rd); transform-origin: right; transition-delay: 0.3s; } body.cargado .tricolor span { transform: scaleX(1); } /* Sin animacion de entrada: paneles y pie de pagina. */ .tricolor--estatica span, .tricolor--pie span { transform: scaleX(1); } /* Para paginas cuyo centra su contenido con flex (registro.html): ahi un div normal se encogeria al ancho de la tarjeta en vez de cruzar la pantalla. Fijada arriba cruza siempre. */ .tricolor--superior { position: fixed; top: 0; left: 0; right: 0; } @media (prefers-reduced-motion: reduce) { .tricolor span { transform: scaleX(1); transition: none; } }