/* --------------------------------------------------------------------------- La tormenta: el fondo del sitio. TODO lo de esta hoja cuelga de `[data-backdrop]` en el . Sin ese atributo no aplica una sola regla, asi que quitarlo devuelve el sitio al negro plano de antes, exacto, sin tocar nada mas. Y si un dia sobra del todo, se borra el de las dos paginas y no queda rastro. data-backdrop="storm-hero" la portada: la tormenta manda. data-backdrop="storm" /app/: la misma tormenta, pero con el suelo velado y todas las superficies en lamina, porque ahi hay que leer y ensayar, no admirar el fondo. POR QUE MASCARA Y NO IMAGEN DE FONDO Los dos SVG (`storm-glow.svg` y `storm-core.svg`, que escupe `Tools/SiteBuilder/storm_gen.py`) son blanco sobre transparente y aqui se usan con `mask-image`: recortan una capa de color, no la pintan. El color lo pone `var(--brand)`. Por eso el rayo es violeta hoy y se vuelve naranja o carmin solo con cambiar el de la paleta (`theme-purple.css`, `theme-orange.css`, `theme-red.css`), sin generar nada de nuevo: el fondo esta amarrado al tema en lugar de pelearse con el. POR QUE DOS CAPAS Un rayo son dos cosas a la vez: un nucleo casi blanco y un halo de color. Una mascara sola recorta un color solo. Asi que van dos pseudo-elementos —el halo en el color de marca, el nucleo casi blanco— sobre los mismos trazos. COMO SE PROTEGE LA LECTURA, QUE ES LO QUE IMPORTA Tres cosas, en este orden: 1. Toda superficie con texto es una LAMINA, no un cristal: la lateral, las tarjetas de la bienvenida, las ayudas, la tabla de ensayos y el reproductor van al 64% del color del panel, y la cabecera es opaca con la tormenta repintada dentro. Ese 64% no se eligio a ojo —esta medido contra el pixel mas claro que alcanza un rayo, y el peor caso del sitio es el color de marca a 4,94:1, hoy el `thead` de los ensayos—, asi que el rayo pasa apagado por detras del texto y ninguna pareja del tema se cae de AA. Un velo por superficie ademas del del suelo, porque el rayo no cae parejo. 2. Las dos capas van detras del fondo del (`z-index` negativo), y el lleva un velo PAREJO del color de fondo, anclado a la pantalla. Parejo y no abierto en los bordes: con `background-attachment: fixed` cualquier parrafo puede acabar en cualquier punto de el al hacer scroll, asi que un degradado solo decide en que momento el texto se cruza con la parte abierta. El porque completo esta en la regla, mas abajo. 3. Nada de esto depende del ancho: el velo del suelo es el mismo (70%) y las capas de la tormenta son las mismas a 320 px que a 1440, asi que el fondo se ve igual en un telefono que en un monitor. Apagarlas en angosto fue el primer intento y lo que hacia era borrar el fondo entero; el porque, en la consulta de medios del final. Lo que separa la portada de la zona de trabajo no es la intensidad del rayo sino ese velo y las laminas. El orden de pintado es el de CSS 2.1: fondo del (el color de la pagina y las nubes), capas de `z-index` negativo (los rayos), fondo del (el velo), y encima todo lo demas. No hace falta un solo `z-index` positivo nuevo. --------------------------------------------------------------------------- */ /* Las nubes. Van en el fondo del y no en una capa aparte porque son tres degradados y no necesitan mascara: es la neblina de color contra la que se recortan los rayos, y sin ella el rayo se ve pegado sobre negro plano. `--bg` cierra la pila: el fondo de la pagina sigue siendo el del tema. */ :root[data-backdrop^='storm'] { --storm-glow: 0.92; --storm-core: 0.74; /* De que parte del dibujo se recorta la pantalla. Es un token y no un `center` escrito cuatro veces porque las CUATRO capas —las dos fijas del fondo, las dos repintadas dentro de la cabecera y las dos de la tira de pestañas— tienen que coincidir al pixel: si una recorta por otro sitio, el rayo se parte en la costura de la franja. Asi el encuadre se cambia en un solo sitio y no puede desalinearse. En angosto se mueve; el porque esta en la consulta de medios del final. */ --storm-crop: center; background: radial-gradient( ellipse 70% 55% at 22% 18%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 70% ), radial-gradient( ellipse 60% 50% at 82% 72%, color-mix(in srgb, var(--brand) 17%, transparent), transparent 70% ), radial-gradient( ellipse 90% 70% at 50% 110%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 70% ), var(--bg); background-attachment: fixed; } /* La portada es una caratula: aqui la tormenta es el asunto. `--cover-edge` transparente es lo que la deja pasar: el degradado de la portada sigue pintando negro puro en el centro —que es lo que hace que el emblema flote en vez de verse como un disco pegado— pero ya no cierra en el fondo de la pagina, asi que de la mitad hacia afuera aparece el rayo. El emblema queda en el ojo de la tormenta, que es exactamente la imagen que se buscaba. */ :root[data-backdrop='storm-hero'] { --storm-glow: 0.95; --storm-core: 0.85; --cover-edge: transparent; } /* El degradado de la portada, con las paradas apretadas. El de `site.css` cierra en el borde del cuadro (100%), que a pantalla completa son ~800 px: con eso el negro se come la tormenta entera y solo asoma en las esquinas. Aqui el nucleo negro se queda justo del tamaño del emblema y de ahi se abre rapido, asi que el emblema sigue flotando sobre negro puro —que es la unica razon por la que ese nucleo existe— y el rayo empieza donde el emblema termina. */ :root[data-backdrop='storm-hero'] .cover-body { background: radial-gradient( circle at 50% 42%, var(--cover-core) 0%, var(--cover-core) 15%, var(--cover-mid) 24%, transparent 52% ), /* El velo de la columna. El nucleo de arriba resuelve el emblema, pero el rotulo dorado y el boton caen por debajo de el, y ahi el rayo pasa justo por detras de las letras: medido, el dorado se quedaba en 3,9:1 en escritorio y 2,8:1 en un telefono, o sea por debajo de AA las dos veces. Esta elipse es angosta y alta —cubre la columna donde vive el contenido y deja los dos costados abiertos— asi que la tormenta sigue entera a los lados, que es donde se mira, y se apaga solo detras del texto. */ radial-gradient( ellipse 40% 66% at 50% 54%, color-mix(in srgb, var(--bg) 92%, transparent), color-mix(in srgb, var(--bg) 62%, transparent) 55%, transparent 100% ); } /* Las dos capas comparten todo menos el archivo, el color y la altura. Fijas para que la tormenta no se desplace con el scroll —un fondo que corre con el texto se lee como ruido— y sin eventos para que no se coman ningun clic. */ :root[data-backdrop^='storm']::before, :root[data-backdrop^='storm']::after { content: ''; position: fixed; inset: 0; pointer-events: none; /* `cover` y centrado, como una foto: el dibujo es 4:3 y se recorta por donde sobre. Un rayo es fractal, asi que recortado por cualquier lado sigue siendo un rayo; por eso puede servir de fondo a cualquier pantalla sin versiones. */ -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: var(--storm-crop); mask-position: var(--storm-crop); -webkit-mask-size: cover; mask-size: cover; } /* El halo. Degradado y no color plano: un rayo no ilumina parejo de punta a punta, y con `var(--brand)` a secas la maraña entera queda del mismo violeta y se aplana. */ :root[data-backdrop^='storm']::before { z-index: -2; background: linear-gradient( 155deg, color-mix(in srgb, var(--brand) 82%, white), var(--brand) 45%, color-mix(in srgb, var(--brand) 62%, black) ); opacity: var(--storm-glow); -webkit-mask-image: url('../img/storm-glow.svg'); mask-image: url('../img/storm-glow.svg'); } /* El nucleo. Casi blanco pero con marca adentro: el blanco puro sobre el halo violeta se ve gris y apagado, y con un cuarto de marca encendido parece que quema. */ :root[data-backdrop^='storm']::after { z-index: -1; background: color-mix(in srgb, white 76%, var(--brand)); opacity: var(--storm-core); -webkit-mask-image: url('../img/storm-core.svg'); mask-image: url('../img/storm-core.svg'); } /* ---- Las tarjetas de la bienvenida ---------------------------------------- Translucidas para que el rayo pase por detras del texto. Aqui no hace falta desenfoque por la misma razon que en la lateral: son bloques en el flujo normal, no hay nada que les pase por debajo. Lo que si hace falta es QUITARLES el baño de marca, y esa es la parte interesante. La tarjeta opaca se pinta con `--card-tint` encima de `--panel`, un velo del color de marca que es lo que la hace sentirse de la casa. El violeta que ponia ese baño lo pone ahora la tormenta, que es de donde venia el color; el borde sigue siendo `--header-line`, asi que la tarjeta sigue siendo de la casa sin el. Cuando el titulo iba en el color de marca, quitarlo no era gusto sino obligacion: el baño le subia el fondo con su propio color y lo dejaba en 4,85:1 NI SIENDO LA TARJETA OPACA, o sea que translucida con baño no habia forma de llegar a AA. Hoy el titulo va en `--gold` y ya no depende de eso, pero el baño no vuelve: con el puesto la tarjeta se comeria justo la parte de tormenta que la hace verse translucida, que era el otro motivo para sacarlo. El 64% es el mismo de la tabla de ensayos, y esta escrito una vez en cada sitio a proposito: son la misma lamina, y si un dia se cambia uno hay que cambiar el otro o las dos secciones dejan de leerse como la misma superficie. Ese numero no salio de elegir un porcentaje sino de una banda que se probo en dos capas —45% sobre 34%— hasta que el peso quedo bien; 1-(1-0,45)(1-0,34) = 0,64, y ahora va de una sola capa. Quien manda en el numero es el color de marca sobre una superficie translucida, que a esta densidad da 4,94:1 y es el contraste mas justo del sitio. Lo llevaba el titulo de estas tarjetas; desde que los titulos de la bienvenida y de las ayudas pasaron a `--gold` —10,9:1, ver `site.css`— el caso mas justo es el `thead` de los ensayos, que sigue en morado. El numero no se mueve por eso: es el mismo color sobre la misma lamina, solo cambia en que texto se mide. Aqui el cuerpo va en 13,8:1 y los enlaces en 6,6:1, asi que sobra sitio. De Ayuda entra la tarjeta de cada uno, y va en la MISMA regla que la bienvenida y no en una copia con el mismo numero al lado: son la misma lamina —una caja de texto apoyada sobre la tormenta, con los mismos tokens en `site.css`— y escribir el 64% dos veces es firmar que un dia alguien cambie una y no la otra. Lo de DENTRO de la ayuda no esta aqui, y no es un olvido: el aviso destacado y los cuatro ejemplos no tienen relleno —solo borde—, asi que no hay nada que translucidar y ponerlos en esta lista les daria uno. El velo iria ademas doble donde caen sobre la tarjeta, y en vez de despegarlos los dibujaria como recortes pegados encima, que es justo lo que la seccion dejo de hacer. Si alguna vez recuperan su fondo, vuelven aqui con el. */ :root[data-backdrop^='storm'] .welcome-card, :root[data-backdrop^='storm'] .ayuda { background: color-mix(in srgb, var(--panel) 64%, transparent); } /* ---- El reproductor ------------------------------------------------------- La misma lamina de la bienvenida y de la tabla, puesta por variable y no por selector: el reproductor vive en un shadow root, y de fuera solo cruzan esa frontera las propiedades personalizadas. `--card-surface` y `--card-inset` —declaradas en `theme.css`, donde valen `--surface` y `--surface-2`— son justamente el hueco por donde entrar. La alternativa era duplicar esta hoja dentro del componente, que es la clase de copia que un dia se desincroniza. El 64% es el de las demas tarjetas, y ese numero manda: la tarjeta que peor lo pasa es la de la bienvenida, con el titulo en color de marca a 4,94:1, y aqui el titulo va en `--gold` —el color mas claro del sistema— asi que sobre la misma lamina sobra sitio. El peor caso del reproductor es `--muted` —la linea de artista/genero/año y el estado—, el mismo gris que sostiene la lateral con este mismo tinte. Lo hundido se translucida TAMBIEN, y no por simetria: los waveforms y el panel del tono son casi toda la superficie de la tarjeta, y opacos dejaban el reproductor practicamente macizo —una tarjeta translucida con un tapon en el medio—. Al caer encima de la lamina de la tarjeta, el velo va doble y da un 87% efectivo, que es exactamente lo que hacen los ejemplos de las ayudas dentro de su tarjeta: por ahi el rayo pasa apenas, lo justo para que no se lea como un agujero opaco, y las barras del waveform no compiten con nada. Los controles NO entran aqui: un boton es un objeto que se pulsa, no una lamina, y translucido deja de leerse como algo que sobresale. Se quedan en `--surface-2` opaco, que ademas es lo que los despega del panel del tono. */ :root[data-backdrop^='storm'] { --card-surface: color-mix(in srgb, var(--panel) 64%, transparent); --card-inset: color-mix(in srgb, var(--surface-2) 64%, transparent); } /* ---- La tabla de ensayos --------------------------------------------------- Mismo trato que las tarjetas de la bienvenida —`--panel` translucido sobre la tormenta—, aunque no al mismo porcentaje: ver abajo. La tabla usaba `--surface` en vez de `--panel` cuando era opaca; translucidas, esa diferencia ya no dice nada. El 64% no es el mismo numero que las tarjetas (34%) y tiene su razon. La banda del `thead` se probo primero con una segunda capa encima —45% sobre el 34% de la tabla—, que da una opacidad efectiva de 1-(1-0,45)(1-0,34) = 0,64; ese es el peso que quedo bien, y ahora lo lleva la tabla ENTERA, de una sola capa, en vez de pintarlo en dos. Asi la tabla es una sola lamina pareja y el `thead` se separa por lo que siempre lo separo: su linea de abajo y el cuerpo del texto. El `thead` pierde ademas su baño de marca, y eso no es gusto. Ese baño era un velo violeta puesto justo debajo de unos encabezados que TAMBIEN van en el color de marca, o sea que les subia el fondo con su propio color y les comia el contraste: el peor caso quedaba en 4,35:1, por debajo de AA. Cargar la lamina hace lo contrario —OSCURECE— y lo sube a 4,94:1. El violeta que se ve por detras lo pone ahora la tormenta, que es de donde venia el color en primer lugar. En angosto la tabla se deshace en fichas —una por ensayo— y cada ficha se pinta sola, asi que hay que translucirlas ahi tambien o en un telefono la tormenta se corta en cada bloque. Y ahi hay que APAGAR la de la tabla, que es la parte que no se ve venir: `site.css` le pone `background: none` al contenedor en angosto, pero con 0,1,0 de especificidad pierde contra el 0,3,0 de la regla de aqui, asi que la lamina del contenedor seguia puesta debajo de la de cada ficha. Dos velos del 64% dan un 87% efectivo: en un telefono las fichas de ensayos se veian casi el doble de opacas que una tarjeta de la bienvenida, y por ahi el rayo ya no pasaba. Se apaga abajo, en la misma consulta de medios, con el mismo selector —que es lo unico que le gana. */ :root[data-backdrop^='storm'] .ensayos { background: color-mix(in srgb, var(--panel) 64%, transparent); } :root[data-backdrop^='storm'] .ensayos th { background: none; } @media (max-width: 720px) { /* La superficie pasa a ser la ficha, asi que el contenedor deja de pintar: una sola lamina por caja, como en toda la pagina. */ :root[data-backdrop^='storm'] .ensayos { background: none; } :root[data-backdrop^='storm'] .ensayos tr { background: color-mix(in srgb, var(--panel) 64%, transparent); } } /* El velo de /app/, que es lo que sostiene la lectura. Va en el fondo del —que se pinta DESPUES de las capas de `z-index` negativo y ANTES de todo el contenido—, asi que no hace falta un tercer pseudo-elemento ni un `z-index`. `background-color: transparent` deshace el `var(--bg)` opaco que el trae de `site.css`: si se quedara, taparia la tormenta entera. El color de la pagina no se pierde, lo pinta ahora el . El velo es PAREJO, y eso no es pereza. Va con `background-attachment: fixed`, o sea anclado a la pantalla y no al documento, asi que al hacer scroll cualquier parrafo puede acabar en cualquier punto de el. Un degradado que se abre hacia abajo —que fue el primer intento— no protege nada: solo decide en que momento del scroll el texto se cruza con la parte abierta. Si el piso tiene que valer para todo el texto, tiene que ser el mismo en toda la pantalla. El numero decide cuanta tormenta se ve, y se mide contra el texto que se pinta DIRECTAMENTE sobre el suelo, sin una lamina debajo, tomando el pixel mas claro que alcanza un rayo en toda la pantalla. Ese texto es hoy solo este, y esta contado: los rotulos «Proximos»/«Realizados» en `--gold` y la etiqueta «Canción» del selector. Todo lo demas —tarjetas, fichas, ayuda, reproductor, pestañas— vive sobre una lamina y se mide contra ella, no contra el suelo. A este 70% el dorado da 5,66:1 y la etiqueta 7,85:1: los dos por encima del 4,5:1 de AA, y el dorado es el que manda. Subir el velo apaga la tormenta de mas; bajarlo tumba primero el dorado. Este mismo velo vale para TODOS los anchos, y eso es nuevo. Antes en angosto se cerraba al 92%, porque ahi la etiqueta del selector iba en `--muted` y sobre el suelo se quedaba en 3,09:1: el velo estaba tapando la tormenta entera para sostener un texto. Se arreglo donde estaba el problema —esa etiqueta pasa a tinta plena en `site.css`— y el velo pudo volver a ser uno solo. Que el fondo se vea igual en un telefono que en un monitor no es un efecto secundario: era el sintoma que se venia a arreglar. Va como degradado de un solo color y no como `background-color` porque el color de la pagina lo tiene que seguir poniendo el : pintado aqui taparia las nubes. La portada se excluye con `:not()` porque trae su propio velo. */ :root[data-backdrop^='storm'] body:not(.cover-body) { background-color: transparent; background-image: linear-gradient( color-mix(in srgb, var(--bg) 70%, transparent), color-mix(in srgb, var(--bg) 70%, transparent) ); background-attachment: fixed; } /* ---- La cabecera: opaca, pero con la tormenta repintada dentro ------------ EL PROBLEMA. La cabecera es pegajosa y el contenido le pasa por debajo al hacer scroll. Translucida, las tarjetas se veian correr por detras del nombre de la banda. Las dos salidas obvias son malas: opacarla corta el rayo justo en la esquina donde se junta con la lateral, y taparlo con `backdrop-filter` emborrona el rayo —convertir un filo en una mancha es literalmente su trabajo—, con lo que la franja de arriba y la columna de la izquierda dejan de parecer la misma cosa. EL TRUCO. La cabecera vuelve a ser OPACA —asi no hay nada que se le vea pasar por debajo— y se le repinta la tormenta adentro, en las mismas coordenadas de pantalla. Las capas son dos pseudo-elementos de 100vw x 100vh anclados a la esquina de arriba a la izquierda del documento, recortados a la franja con `overflow: hidden`. Como la cabecera esta pegada arriba (`top: 0`), esa esquina es la del viewport, y `mask-size: cover` sobre 100vw x 100vh da EXACTAMENTE el mismo encuadre que las capas fijas del fondo. O sea que el rayo que entra por arriba de la lateral sigue en linea recta dentro de la cabecera: no hay costura. `z-index: -1` las mete detras del nombre y de la tira, pero delante del fondo de la cabecera. Funciona porque la cabecera ya crea contexto de apilamiento propio (es pegajosa y tiene `z-index: 20`), asi que ese -1 es local y no se escapa detras de la pagina. LOS NUMEROS. Para que las dos superficies se vean iguales hay que reconstruir a mano lo que en la lateral hacen tres capas encadenadas: el rayo pasa primero por el velo del suelo (deja pasar el 30%) y luego por el tinte de la lamina (deja pasar el 36%), o sea 0,108 en total. Ese es `--storm-through`. Y el fondo opaco es la mezcla de esas mismas dos capas ya resueltas: 72% de `--panel` sobre `--bg`. Si se cambia el tinte de la lateral o el velo del suelo, estos dos numeros hay que rehacerlos o aparece la costura. */ :root[data-backdrop^='storm'] { --storm-through: 0.108; } :root[data-backdrop^='storm'] .site-head { background: color-mix(in srgb, var(--panel) 72%, var(--bg)); overflow: hidden; } :root[data-backdrop^='storm'] .site-head::before, :root[data-backdrop^='storm'] .site-head::after { content: ''; position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: var(--storm-crop); mask-position: var(--storm-crop); -webkit-mask-size: cover; mask-size: cover; } :root[data-backdrop^='storm'] .site-head::before { background: linear-gradient( 155deg, color-mix(in srgb, var(--brand) 82%, white), var(--brand) 45%, color-mix(in srgb, var(--brand) 62%, black) ); opacity: calc(var(--storm-glow) * var(--storm-through)); -webkit-mask-image: url('../img/storm-glow.svg'); mask-image: url('../img/storm-glow.svg'); } :root[data-backdrop^='storm'] .site-head::after { background: color-mix(in srgb, white 76%, var(--brand)); opacity: calc(var(--storm-core) * var(--storm-through)); -webkit-mask-image: url('../img/storm-core.svg'); mask-image: url('../img/storm-core.svg'); } /* La lateral va translucida y SIN desenfoque. La diferencia con la cabecera —que es opaca con la tormenta repintada dentro— no es capricho, son dos problemas distintos: - La cabecera es pegajosa y el contenido le pasa por debajo al hacer scroll. Ahi el desenfoque es obligatorio: sin el se leerian los renglones de la tabla corriendo por detras del nombre de la banda. - La lateral es una columna de la rejilla. Nada le pasa por debajo, asi que no hay nada que esconder. Y sobre todo: el desenfoque es justo lo que MATA el rayo. Convertir un filo en una mancha es literalmente su trabajo, asi que con `blur(34px)` la lateral se veia como una tira de neblina violeta y no como una tormenta. Quitandolo se ven las descargas de verdad, que es de lo que se trataba. El velo del se pinta a todo el ancho de la pagina, asi que TAMBIEN esta detras de la lateral: lo que asoma aqui es la misma tormenta ya amortiguada al 82% que hay en el suelo del contenido. Pero eso no basta, y conviene dejarlo escrito porque la intuicion dice lo contrario: por donde pasa la lateral cae un rayo mas cargado que por el suelo de abajo, y medido, el gris de los enlaces se quedaba en 4,18:1 —por debajo de AA— mientras el mismo gris sobre el suelo daba 5,10:1. El velo es parejo; la tormenta no. El tinte era del 44%, que sobre estos dos colores —`--panel` y `--bg` estan a cinco puntos de gris uno del otro— no pinta practicamente nada: lo unico que hacia era dejar pasar el rayo casi entero. Y ahi esta lo que se veia: la franja de arriba es una tira de 68 px, asi que por ella asoma una rebanada de tormenta; la lateral es una columna de pantalla completa y por ella cruza el rayo ENTERO. Misma transmision por pixel, pero veinte veces mas superficie encendida, y eso no se lee como la misma superficie: la cabecera se lee asentada y la lateral como un hueco por donde se ve el fondo de la pagina. De ahi este 64%, que es el mismo tinte de las tarjetas de la bienvenida y de la tabla de ensayos: la lateral pasa a ser esa misma lamina y no una excepcion. El rayo sigue pasando —un tercio mas apagado, no borrado— y el gris de los enlaces, que era el peor caso en 4,18:1, solo puede mejorar, porque la lamina oscurece. Sigue SIN desenfoque, que es lo otro que se probo y lo que de verdad mata el rayo: convertir un filo en una mancha es literalmente su trabajo. Cargar la lamina apaga parejo; el desenfoque borra el dibujo. */ :root[data-backdrop^='storm'] .sidebar { background: color-mix(in srgb, var(--panel) 64%, transparent); } /* Sin `backdrop-filter` no hay nada que esconda el contenido que pasa por debajo de la cabecera al hacer scroll, asi que ahi vuelve a ser opaca: se pierde el efecto, no la lectura. La lateral no aparece porque no usa filtro: su tinte funciona igual en todos lados. */ /* En la portada la tormenta respira. Es la misma idea que la luz del emblema —que ya late a 9 s— pero mas lenta y desfasada, para que las dos no suban y bajen juntas, que se notaria como un parpadeo del sitio entero. Solo cambia la opacidad de una capa que no ocupa espacio: no hay geometria que se mueva ni reflujo que provocar. */ :root[data-backdrop='storm-hero']::before { animation: storm-breathe 13s ease-in-out infinite; } @keyframes storm-breathe { 0%, 100% { opacity: 0.62; } 50% { opacity: 0.86; } } /* Sin movimiento para quien lo pidio en el sistema: se queda en el punto medio. */ @media (prefers-reduced-motion: reduce) { :root[data-backdrop='storm-hero']::before { animation: none; opacity: 0.74; } } /* En angosto NO se toca la tormenta: /app/ se ve igual a 320 px que a 1440. Antes si se tocaba, y de tres maneras a la vez —`--storm-glow` a 0,2, `--storm-core` a 0,12 y el velo del suelo cerrado al 92%—, lo que multiplicado dejaba pasar un 1,6% del rayo: en un telefono el fondo del sitio no era una tormenta atenuada, era negro plano. Lo que queda aqui es solo el velo de la PORTADA, que es otra cosa: ahi el rayo si pasa por detras del texto, porque la portada no tiene tarjetas. Por que el recorte era el instrumento equivocado, y esto esta medido: la mascara va con `cover`, asi que el nucleo del rayo esta en pantalla igual a 320 px que a 1440 —el pixel mas claro del suelo es EL MISMO en los cinco anchos que se probaron: 320, 360, 390, 430 y 720—. El ancho no cambia cuanto quema el rayo, solo cuanto sitio le queda al margen del texto. Y ese margen dejo de importar cuando TODA superficie con texto paso a ser una lamina —tarjetas, tabla hecha fichas, reproductor, lateral vuelta pestañas—: sobre el suelo desnudo no queda mas texto que dos rotulos y una etiqueta, y los tres se miden arriba, en la regla del velo. Tambien se probo compensar al reves —dejar el suelo cerrado en angosto y aligerar la lamina de las tarjetas para que transmitieran lo mismo— y sale peor: hay que bajarla del 64% al 33%, la tarjeta deja de leerse como una superficie y encima hay dos numeros distintos que mantener a la par para que las dos anchuras se parezcan. Un solo velo para los dos anchos no necesita mantenimiento. */ @media (max-width: 720px) { /* ---- El encuadre: de donde se recorta el dibujo en un telefono ------------- La mascara va con `cover` y el dibujo es 4:3, asi que en una pantalla alta y angosta lo que entra es una FRANJA VERTICAL del original: a 390 px de ancho el dibujo se escala por el alto y sobran ~810 px de ancho que se recortan. Por eso `cover` no necesita versiones del archivo —un rayo recortado sigue siendo un rayo— pero si decide CUANTOS trazos caben en pantalla, y con el recorte centrado en un telefono tocaba una zona floja: una tarjeta podia caer justo donde no pasa ningun rayo y leerse maciza, aunque su lamina fuera la misma que en escritorio. El 65% esta medido, no elegido: se probaron nueve encuadres sobre el suelo desnudo a 390 px contando que porcentaje de la pantalla queda encendido por encima del suelo. Centrado da 34,5%; a 65% da 43,3%, o sea un cuarto mas de rayo a la vista. Y el pico no se mueve —(74,65,89) en los dos, el dorado de los rotulos se queda en 5,66:1—, asi que esto no gasta nada del margen de contraste: no cambia cuanto quema el rayo, cambia cuanto rayo hay. La posicion VERTICAL no aparece porque no hace nada, y conviene dejarlo escrito para que nadie la ajuste a ciegas: con `cover` en una pantalla mas alta que 4:3, el dibujo se escala por el alto y encaja justo, asi que solo se puede correr en horizontal. Medido: `50% 0%`, `50% 100%` y `center` dan el mismo resultado al pixel. Va solo en /app/ (`data-backdrop='storm'`) y no en la portada: alla la composicion esta armada alrededor del emblema en el ojo de la tormenta, y correr el dibujo mueve justo eso. */ :root[data-backdrop='storm'] { --storm-crop: 65% 50%; } /* ---- La tira de pestañas: el mismo truco de la cabecera -------------------- En angosto la lateral se acuesta y pasa a ser una barra de pestañas PEGAJOSA justo debajo de la cabecera (`top: var(--head-h)` en `site.css`). Y ahi hereda el problema de la cabecera, no el de la columna: el contenido le pasa por debajo al hacer scroll, y translucida se veian los renglones de la tabla y los titulos de las tarjetas atravesando las pestañas. En ancho no pasa —la lateral es una columna de la rejilla y no tiene nada por debajo—, asi que la lamina se queda alli tal cual y esto solo aplica aqui. La solucion es la misma que resolvio la cabecera, con las mismas dos capas y los mismos dos numeros, y por eso no hay una tercera receta que mantener: la barra se vuelve OPACA —asi no hay nada que se le vea pasar— y se le repinta la tormenta adentro en las mismas coordenadas de pantalla. LO UNICO QUE CAMBIA es el desplazamiento vertical. Las capas de la cabecera son de 100vw x 100vh ancladas a su esquina de arriba a la izquierda, que —al estar pegada en `top: 0`— es la del viewport. Esta barra esta pegada mas abajo, a la altura de la cabecera, asi que sus capas se suben otro tanto: `top: calc(-1 * var(--head-h))` deja la caja empezando otra vez en la esquina del viewport, y con `mask-size: cover` sobre 100vw x 100vh el encuadre vuelve a ser EXACTAMENTE el de las capas fijas del fondo. El rayo entra por la cabecera, sigue por las pestañas y continua en el contenido sin una costura. `--head-h` es una variable, asi que esto sigue solo al cambio de alto de la cabecera a 520 px. El fondo opaco y `--storm-through` son los de la cabecera, literalmente los mismos tokens: las dos franjas quedan pegadas una encima de la otra y cualquier diferencia se leeria como una raya. Si un dia se cambia el tinte de la lateral o el velo del suelo, esos dos numeros se rehacen una vez y valen para las dos. `overflow: hidden` recorta las capas a la franja. La tira de pestañas ya se desliza en horizontal por dentro (`.side-nav`, que tiene su propio `overflow-x`), asi que esto no le quita el arrastre. */ :root[data-backdrop^='storm'] .sidebar { background: color-mix(in srgb, var(--panel) 72%, var(--bg)); overflow: hidden; } :root[data-backdrop^='storm'] .sidebar::before, :root[data-backdrop^='storm'] .sidebar::after { content: ''; position: absolute; top: calc(-1 * var(--head-h)); left: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: var(--storm-crop); mask-position: var(--storm-crop); -webkit-mask-size: cover; mask-size: cover; } :root[data-backdrop^='storm'] .sidebar::before { background: linear-gradient( 155deg, color-mix(in srgb, var(--brand) 82%, white), var(--brand) 45%, color-mix(in srgb, var(--brand) 62%, black) ); opacity: calc(var(--storm-glow) * var(--storm-through)); -webkit-mask-image: url('../img/storm-glow.svg'); mask-image: url('../img/storm-glow.svg'); } :root[data-backdrop^='storm'] .sidebar::after { background: color-mix(in srgb, white 76%, var(--brand)); opacity: calc(var(--storm-core) * var(--storm-through)); -webkit-mask-image: url('../img/storm-core.svg'); mask-image: url('../img/storm-core.svg'); } /* En un telefono la columna de la portada ocupa casi todo el ancho, asi que el velo angosto no alcanza: se ensancha y se carga un punto. La tormenta se ve igual arriba y abajo del bloque, que es todo el sitio que queda. */ :root[data-backdrop='storm-hero'] .cover-body { background: radial-gradient( circle at 50% 42%, var(--cover-core) 0%, var(--cover-core) 15%, var(--cover-mid) 24%, transparent 52% ), radial-gradient( ellipse 78% 46% at 50% 62%, color-mix(in srgb, var(--bg) 95%, transparent), color-mix(in srgb, var(--bg) 72%, transparent) 55%, transparent 100% ); } }