/* The Firewall Mindset (tema) — retoques de componente. Un tema aporta tokens; aquí solo va lo que NO es expresable como token. OJO CON EL ORDEN: `templates/element/head.php` pinta fonts.css → bootstrap → theme.css → overrides.css → alumneflex-ui.css. Con la misma especificidad ganaría la capa común, así que aquí se antepone `:root` para subir un punto y ganar. Casi todo lo de este fichero existe por una razón: el fondo de acceso de esta marca es una animación CLARA (la figura sobre circuitería blanca), y la pantalla de acceso de la capa común da por hecho un telón oscuro. Ver el bloque de abajo. */ /* --- Pantalla de acceso sobre fondo claro ------------------------------------- `alumneflex-ui.css` §11 monta el acceso para un telón oscuro: el pie va en blanco translúcido QUEMADO (rgba(255,255,255,.5)) y el velo de la imagen es un halo del color del escenario. Sobre el GIF de la marca —blanco casi de punta a punta— ese pie es invisible y la tarjeta blanca se disuelve en el fondo. No se arregla bajando --surface-stage a un color claro: ese token lo comparten el visor SCORM, el reproductor, el organigrama y el lienzo del editor de diplomas, donde el telón tiene que seguir siendo oscuro en los dos modos. Así que se arregla aquí, y solo aquí. Son cuatro gestos: 1. La tarjeta se va a la derecha en pantallas anchas, para no aterrizar encima de la figura del GIF: la animación respira a la izquierda y el formulario ocupa su tercio. 2. Un lavado del lienzo por la derecha, bajo la tarjeta, que calma la circuitería justo donde hay que leer, y deja el resto de la animación intacto. 3. La tarjeta se dibuja con filo, sombra propia y el degradado del escudo arriba: sobre blanco, una tarjeta blanca necesita borde, no solo sombra. 4. El pie pasa del blanco al marino. */ /* 1. La tarjeta, a la derecha. Por debajo de 992 px se queda centrada: ahí ocupa casi todo el ancho y no hay sitio que ceder. */ @media (min-width: 992px) { :root .af-auth--image { justify-content: flex-end; padding-right: clamp(40px, 9vw, 168px); } } /* 2. El velo. La capa común pinta un halo del escenario (marino) en el centro, que sobre una imagen clara deja un borrón gris. Aquí es un lavado del lienzo que crece hacia la derecha, donde está el formulario. */ :root .af-auth--image .af-auth-bgwrap::after { background: linear-gradient(180deg, rgba(247,250,253,.72) 0%, rgba(247,250,253,.30) 30%, rgba(247,250,253,.30) 100%); } @media (min-width: 992px) { :root .af-auth--image .af-auth-bgwrap::after { background: linear-gradient(90deg, transparent 0%, transparent 42%, rgba(247,250,253,.62) 74%, rgba(247,250,253,.94) 100%), linear-gradient(180deg, rgba(247,250,253,.55) 0%, transparent 26%); } } /* 3. La tarjeta. El filete superior es el degradado del escudo (cielo → azul → marino), la única firma de marca de esta pantalla. Nada de overflow:hidden para recortarlo: eso cortaría cualquier desplegable de dentro de la tarjeta, así que el filete lleva el radio del panel en sus dos esquinas de arriba. */ :root .af-auth-card { position: relative; border: 1px solid var(--border-subtle); box-shadow: 0 24px 64px rgba(0,19,78,.20), 0 2px 10px rgba(0,19,78,.10); } :root .af-auth-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--gradient-brand); border-radius: var(--radius-panel) var(--radius-panel) 0 0; } /* El lockup es de 4,3:1: a los 36 px de la capa común se queda en 155 px dentro de una tarjeta de 408 y no se lee «The Firewall». */ :root .af-auth-logo { height: 46px; } /* 4. El pie, sobre la imagen clara. Los tres selectores de la capa común van en blanco quemado; aquí pasan al marino del logotipo, con la misma escala de tres pesos. Los alfas no son a ojo: compuestos sobre el lavado del lienzo (#F7FAFD) dan 5,4:1 el texto, 4,7:1 la línea de copyright y 9,4:1 los enlaces legales. La línea de copyright sube respecto al diseño de la capa común (allí es un .38 sobre marino) porque son 12 px y por debajo del 4,5:1 no pasa el AA. */ :root .af-auth--image .af-auth-foot { color: rgba(0,19,78,.64); } :root .af-auth--image .af-auth-foot-copy { color: rgba(0,19,78,.60); } :root .af-auth--image .af-auth-foot a { color: rgba(0,19,78,.80); } :root .af-auth--image .af-auth-foot a:hover { color: var(--navy-800); } /* --- El halo naranja de las pantallas de error --------------------------------- `templates/layout/error.php` (y el acceso cuando el tema no aporta imagen) pintan un SVG con la rejilla y un halo QUEMADOS en el naranja de Alumne Flex: los stops #FF5A2D están en el marcado, no en un token, así que ningún tema los ve. En un 404 de este cliente eso es una mancha naranja en medio de una marca azul. No se puede arreglar con un token y un tema no toca plantillas, así que se gira el tono del SVG entero: los puntos naranjas pasan a azul y la rejilla, que es blanca sin saturación, no se entera. Solo se aplica cuando NO hay imagen de zona; en el acceso, que sí la tiene, este SVG ni existe. */ :root .af-auth:not(.af-auth--image) .af-auth-bg { filter: hue-rotate(198deg); } /* --- Peso de titulares -------------------------------------------------------- Montserrat es geométrica y de trazo fino: en los titulares grandes el 600 de la capa común se queda aguado al lado del 700 con el que titula su landing. Solo sube el titular; el resto de la interfaz (botones, etiquetas) se queda en semibold, que a 13-14 px es donde Montserrat se lee mejor. */ :root :is(h1, h2, h3), :root .af-display, :root .af-hero-title, :root .af-auth-title, :root .af-kpi-value, :root .af-hero-stat-value, :root .af-topbar-title { font-weight: var(--weight-bold); } /* --- El canto azul del elemento activo ---------------------------------------- El imagotipo es un escudo: un perímetro. El equivalente en la navegación es un canto sólido en el borde del elemento activo, sobre el fondo azul suave que ya le pone la capa común. Es el mismo gesto en la barra lateral (vertical) y en el título de página. */ :root .af-nav-link.active { box-shadow: inset 3px 0 0 var(--border-brand); } :root .af-page-head h1::after { content: ""; display: block; width: 48px; height: 3px; border-radius: 2px; background: var(--border-brand); margin-top: var(--space-4); }