/* * uf-fx — capa de efectos de Ufópolis. * * Qué es: los recursos visuales por los que se compra un tema como Salient * —tarjetas con la ficha superpuesta, revelado al entrar en pantalla, cabecera * que se solidifica, menú a pantalla partida, titulares vivos— reimplementados * para este tema. * * Por qué no se copia el CSS de Salient. Aquel código es de 2022 y depende de * jQuery, de waypoints y del marcado que genera WPBakery: `.nectar-post-grid`, * `.wpb_column`, `.vc_row`. Nada de eso existe aquí, así que copiarlo no daría * el efecto, daría reglas muertas. Además Salient anima con JavaScript sobre el * hilo principal; aquí se anima con `animation-timeline`, que corre en el * compositor. Se porta el efecto, no el código. * * Cómo se enciende. Cada bloque está detrás de una clase en que emite * functions.php a partir de la opción `ufopolis_fx`: * * uf-fx-cards ficha superpuesta sobre el póster * uf-fx-reveal revelado al entrar en pantalla * uf-fx-header cabecera transparente que se solidifica al bajar * uf-fx-menu menú a pantalla partida * uf-fx-titles palabras rotativas, banda, subrayado, contadores * uf-fx-video vídeo en capa * uf-fx-transitions nombre propio de la cabecera en las transiciones * * Así los efectos son datos, no despliegues: se encienden, se apagan y se * gradúan con `bin/uf.sh fx` sin tocar esta hoja ni subir la versión del tema. * * Dos reglas que se cumplen en todo el fichero: * * - Todo lo que se mueve vive dentro de `prefers-reduced-motion: no-preference`. * Sin excepción: quien pide menos movimiento recibe la página quieta y * completa, nunca a medias. * - Nada depende de que la animación ocurra. Si el navegador no soporta * `animation-timeline`, el estado final es el estado por defecto y el * contenido se ve igual. No hay `opacity: 0` sin red. */ :root { /* Valores por defecto. functions.php los sobrescribe desde la opción. * * Cada uso repite su valor como reserva —`var(--uf-fx-scrim, 0.92)`— y no * es redundancia defensiva porque sí: un `var()` que no resuelve invalida * **la declaración entera**, así que un velo escrito como * `rgba(6, 19, 29, var(--uf-fx-scrim))` sin reserva no se queda pálido, se * queda sin pintar, y el titular blanco cae directamente sobre el * fotograma. Pasó en el editor de bloques, donde `add_editor_style()` * reescribe los selectores y `:root` nunca llega a casar. En el frontend * pasaría lo mismo si el estilo en línea no se emitiera. */ --uf-fx-reveal-shift: 22px; --uf-fx-reveal-scale: 0.985; --uf-fx-card-zoom: 1.06; --uf-fx-card-lift: 6px; --uf-fx-scrim: 0.92; --uf-fx-marquee-speed: 38s; --uf-fx-rotate-step: 2.6s; --uf-fx-ease: cubic-bezier(0.22, 0.61, 0.36, 1); } /* ========================================================================== * 1. Revelado al entrar en pantalla * * El equivalente de `asset-reveal-animation` de Salient, que allí es jQuery y * waypoints. Aquí es una línea de tiempo de scroll: el navegador la resuelve en * el compositor y no hay listener de scroll en el hilo principal. * * `animation-range: entry 5% entry 60%` significa: empieza cuando el elemento * asoma un 5 % por el borde inferior y termina cuando ha entrado un 60 %. Cerca * del borde, no a media pantalla: revelar tarde hace que el lector vea el hueco * antes que el contenido. * * Los dos extremos son `entry` a propósito, y esto costó un fallo. La primera * versión terminaba en `cover 20%`, que se mide sobre el recorrido completo del * elemento por la pantalla: entrar, cruzarla y salir por arriba. Lo que está al * final del documento nunca hace ese recorrido, porque el scroll se acaba antes * de que llegue a salir. Resultado: la última fila de tarjetas se quedaba a * medio revelar, con opacidad parcial y para siempre. En la comprobación, el * subrayado de un párrafo final se quedó clavado en el 38 %. * * `entry` termina cuando el elemento ha acabado de entrar, y eso sí ocurre * siempre: al llegar al fondo del documento, lo último que hay queda visible * por definición. Regla para todo este fichero: ningún rango de scroll termina * en `cover` ni en `exit`. * ========================================================================== */ @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { .uf-fx-reveal .uf-video-card, .uf-fx-reveal .uf-article-card, .uf-fx-reveal .uf-category-tile, .uf-fx-reveal .uf-section-heading, .uf-fx-reveal .uf-fx-reveal-item { animation: uf-fx-rise linear both; animation-timeline: view(); animation-range: entry 5% entry 60%; } /* La rejilla escalona sus hijos: cada columna entra un poco después que * la anterior. Es lo que separa un revelado de una cortina que sube. */ .uf-fx-reveal .wp-block-post-template > li:nth-child(2n) { animation-delay: 0s; animation-range: entry 2% entry 66%; } .uf-fx-reveal .wp-block-post-template > li:nth-child(3n) { animation-range: entry 0% entry 72%; } } } @keyframes uf-fx-rise { from { opacity: 0; transform: translate3d(0, var(--uf-fx-reveal-shift, 22px), 0) scale(var(--uf-fx-reveal-scale, 0.985)); } to { opacity: 1; transform: none; } } /* ========================================================================== * 2. Videoteca: la ficha sobre el póster * * `masonry-meta-overlaid` de Salient, sobre el marcado que ya genera el tema: * .uf-video-card contiene la imagen destacada y .uf-video-card-copy. No hace * falta tocar ningún patrón; basta con recolocar la copia sobre la imagen. * * El degradado no es decorativo: un titular claro sobre un fotograma cualquiera * puede quedar en 1,5:1. El velo garantiza el contraste pase lo que pase en el * póster, que es contenido del cliente y no se controla desde aquí. * ========================================================================== */ .uf-fx-cards .uf-video-card { position: relative; /* `clip` y no `hidden`. Los dos recortan igual, pero `hidden` convierte la * caja en un contenedor de scroll, y `animation-timeline: view()` se ancla * al contenedor de scroll mas cercano: cualquier animacion de scroll dentro * de una caja con `hidden` queda anclada a una caja que nunca se desplaza, y * por tanto congelada. Aqui costo un Ken Burns clavado en 1,07. `clip` no * crea contenedor de scroll, que es exactamente para lo que existe. */ overflow: clip; border-radius: 10px; isolation: isolate; background-color: var(--wp--preset--color--navy); } .uf-fx-cards .uf-video-card .wp-block-post-featured-image { margin: 0; overflow: clip; border-radius: inherit; } .uf-fx-cards .uf-video-card .wp-block-post-featured-image img { display: block; width: 100%; height: 100%; object-fit: cover; transform: translateZ(0); transition: transform 700ms var(--uf-ease, cubic-bezier(0.16, 1, 0.3, 1)), filter 700ms var(--uf-ease, cubic-bezier(0.16, 1, 0.3, 1)); } /* El velo. Se apoya en el propio contenedor de la imagen para heredar el * redondeo y no añadir un elemento más al árbol. */ .uf-fx-cards .uf-video-card .wp-block-post-featured-image::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: linear-gradient( to top, rgba(6, 19, 29, var(--uf-fx-scrim, 0.92)) 0%, rgba(6, 19, 29, 0.62) 34%, rgba(6, 19, 29, 0.08) 68%, rgba(6, 19, 29, 0) 100% ); transition: opacity 480ms var(--uf-fx-ease, cubic-bezier(0.22, 0.61, 0.36, 1)); } .uf-fx-cards .uf-video-card-copy { position: absolute; inset-inline: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; gap: 0.35rem; padding: 2.6rem 1.15rem 1.2rem; /* La copia lleva su propio velo, además del que tiene la imagen. * * El de la imagen es un degradado fijo sobre la altura de la tarjeta, y eso * no basta: la ficha crece hacia arriba cuando el titular ocupa dos líneas o * cuando el extracto está visible, y el kicker, que va el primero, acaba en * la zona donde el degradado ya casi no tapa. Medido sobre los pósters * reales, el oro sobre un fotograma brillante daba 1,05:1. Ilegible. * * Este segundo velo va pegado a la caja del texto, así que la acompaña * crezca lo que crezca. El padding superior le da recorrido para * desvanecerse en lugar de cortarse en seco sobre la imagen. * * `contrast-check.mjs` no lo detectaba: resuelve el fondo apilando colores * translúcidos y no puede leer los píxeles de una imagen. Por eso daba cero * fallos mientras esto estaba roto en producción. */ background-image: linear-gradient( to top, rgba(6, 19, 29, 0.95) 0%, rgba(6, 19, 29, 0.90) 48%, rgba(6, 19, 29, 0.58) 80%, rgba(6, 19, 29, 0) 100% ); /* La copia tapa la mitad inferior del póster y se tragaba los clics: el * enlace de la imagen, que es el que abre el vídeo, quedaba accesible solo * por su mitad de arriba. Se comprobó en producción, no en la vista previa. * Los huecos entre líneas dejan pasar el clic al póster; los enlaces de la * copia lo siguen recibiendo. */ pointer-events: none; } .uf-fx-cards .uf-video-card-copy a { pointer-events: auto; } /* El kicker va sobre base opaca, no sobre el velo. * * El oro de la marca, #b79854, es un tono medio: su luminancia ronda 0,32, así * que necesita un fondo genuinamente oscuro para separarse. Sobre el velo * semitransparente encima de un fotograma brillante se medía entre 1,97:1 y * 3,98:1 —ilegible—, mientras los titulares en blanco pasaban de 18:1 sin * despeinarse. No es el mismo problema con la misma solución: el blanco tolera * un fondo a medias y el oro no. * * Subir la opacidad del velo hasta que el oro pase habría tapado el póster * entero, que es lo que la tarjeta está enseñando. La etiqueta opaca resuelve * solo su propia caja y deja el resto de la imagen a la vista. Es lo que hace * Salient con las suyas, y por esto. */ .uf-fx-cards .uf-video-card-copy .uf-card-meta { margin: 0; align-self: flex-start; padding: 0.2rem 0.5rem; border-radius: 3px; background-color: var(--wp--preset--color--surface-deep, #06131d); color: var(--wp--preset--color--gold, #b79854); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; } .uf-fx-cards .uf-video-card-copy .wp-block-post-title { margin: 0; font-size: 1.02rem; line-height: 1.28; text-wrap: balance; } .uf-fx-cards .uf-video-card-copy .wp-block-post-title a { color: var(--wp--preset--color--white); text-decoration: none; } /* El extracto solo aparece al acercarse. Sobre un fotograma, tres líneas de * texto permanentes tapan justamente lo que se quiere enseñar. */ .uf-fx-cards .uf-video-card-excerpt { margin: 0; color: var(--wp--preset--color--mist); font-size: 0.82rem; line-height: 1.45; opacity: 0; max-height: 0; overflow: hidden; transition: opacity 320ms var(--uf-ease, cubic-bezier(0.16, 1, 0.3, 1)), max-height 420ms var(--uf-ease, cubic-bezier(0.16, 1, 0.3, 1)); } /* El "Ver vídeo →" del extracto es un enlace, y sin esto sale con el azul por * defecto del navegador sobre el póster. */ .uf-fx-cards .uf-video-card-excerpt a { color: var(--wp--preset--color--gold); text-decoration: none; white-space: nowrap; } /* focus-within, no solo hover: con el teclado hay que poder llegar al enlace * "Ver vídeo" del extracto. */ .uf-fx-cards .uf-video-card:hover .uf-video-card-excerpt, .uf-fx-cards .uf-video-card:focus-within .uf-video-card-excerpt { opacity: 1; max-height: 6.5rem; } @media (prefers-reduced-motion: no-preference) { /* v0.14.10: los estados al pasar el cursor usan la curva de rollover del sitio * -`--uf-ease`, salida exponencial- y no `--uf-fx-ease`, que es la de las * entradas por scroll. Dos curvas distintas para dos cosas distintas: una * entrada acompaña al lector, un rollover responde a su mano. */ .uf-fx-cards .uf-video-card { transition: translate var(--uf-t-move, 560ms) var(--uf-ease, cubic-bezier(0.16, 1, 0.3, 1)), box-shadow var(--uf-t-move, 560ms) var(--uf-ease, cubic-bezier(0.16, 1, 0.3, 1)); } /* v0.14.10: el alzado estaba en `transform` y no ocurría. La misma tarjeta es * objetivo del revelado de la sección 1, cuya animación acaba en * `transform: none` con relleno `both`, y un valor animado gana a una * declaración normal: el `none` se quedaba puesto y se comia el alzado. * `translate` es propiedad propia, la animación no la escribe y las dos * componen. La sombra sí se veía, que es lo que disimulaba el fallo. */ .uf-fx-cards .uf-video-card:hover, .uf-fx-cards .uf-video-card:focus-within { translate: 0 calc(var(--uf-fx-card-lift, 6px) * -1); box-shadow: 0 18px 44px -18px rgba(0, 0, 0, 0.85); } .uf-fx-cards .uf-video-card:hover .wp-block-post-featured-image img, .uf-fx-cards .uf-video-card:focus-within .wp-block-post-featured-image img { transform: scale(var(--uf-fx-card-zoom, 1.06)); } } /* Indicador de reproducción. Aparece al acercarse y confirma que la tarjeta * lleva a un vídeo, no a un artículo. */ .uf-fx-cards .uf-video-card .wp-block-post-featured-image::before { content: ""; position: absolute; top: 50%; left: 50%; z-index: 2; width: 54px; height: 54px; margin: -27px 0 0 -27px; border: 1px solid rgba(232, 238, 241, 0.55); border-radius: 50%; background-color: rgba(6, 19, 29, 0.42); backdrop-filter: blur(2px); opacity: 0; transform: scale(0.86); transition: opacity 360ms var(--uf-ease, cubic-bezier(0.16, 1, 0.3, 1)), transform 360ms var(--uf-ease, cubic-bezier(0.16, 1, 0.3, 1)); pointer-events: none; /* El triángulo va como SVG en línea, no como fuente de iconos ni como * fichero: es un data URI, así que no añade una petición ni depende de que * cargue nada. Un borde CSS no serviría aquí, porque el pseudoelemento ya * es el círculo y solo hay uno por caja. */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M0 0l12 7-12 7z' fill='%23ffffff'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 57% 50%; background-size: 13px 15px; } .uf-fx-cards .uf-video-card:hover .wp-block-post-featured-image::before, .uf-fx-cards .uf-video-card:focus-within .wp-block-post-featured-image::before { opacity: 1; transform: scale(1); } /* El póster de un vídeo borrado de YouTube. Ni la tarjeta se descuadra ni * aparece el icono de imagen rota: el hueco lo ocupa el lienzo del tema, con el * mismo resplandor que la cabecera, y la ficha superpuesta se lee igual. */ .uf-poster-sin-senal { background-color: var(--wp--preset--color--navy); background-image: radial-gradient(120% 100% at 30% 20%, rgba(0, 169, 211, 0.14), transparent 62%), radial-gradient(90% 80% at 78% 84%, rgba(183, 152, 84, 0.10), transparent 60%); } /* Columnas configurables desde el bloque «Rejilla de vídeos». * * `style.css` ya dispone `.uf-video-query > .wp-block-post-template` como * rejilla de cuatro columnas, y baja a dos por debajo de 1100 px y a una por * debajo de 560 px. Esta regla solo sustituye el número **por encima de esos * cortes**, de modo que los tres tramos responsive siguen mandando: una rejilla * de seis columnas en escritorio sigue siendo de dos en tableta y de una en * móvil, que es lo que hay que hacer con tarjetas de vídeo. * * El número llega en `--uf-cols`, que render.php escribe en el elemento. Si * falta, se queda en cuatro, que es lo que hacían los patrones. */ @media (min-width: 1101px) { .uf-fx-cols > .wp-block-post-template { grid-template-columns: repeat(var(--uf-cols, 4), minmax(0, 1fr)); } } /* -------------------------------------------------------------------------- * Mosaico. Salient llama masonry a una rejilla que coloca con JavaScript * midiendo alturas. Aquí la desigualdad es declarada: la primera tarjeta ocupa * dos columnas y dos filas. Sale sola, sin medir nada, y no salta al cargar. * Es opt-in por clase porque cambia la jerarquía de la sección. * -------------------------------------------------------------------------- */ @media (min-width: 782px) { .uf-fx-mosaic .wp-block-post-template { grid-auto-rows: 1fr; } .uf-fx-mosaic .wp-block-post-template > li:first-child { grid-column: span 2; grid-row: span 2; } .uf-fx-mosaic .wp-block-post-template > li:first-child .wp-block-post-title { font-size: 1.6rem; } .uf-fx-mosaic .wp-block-post-template > li:first-child .uf-video-card-excerpt { opacity: 1; max-height: 6.5rem; } /* La tarjeta grande necesita que la imagen llene la celda, no que imponga * su proporción: si no, deja una banda vacía debajo. */ .uf-fx-mosaic .wp-block-post-template > li .uf-video-card, .uf-fx-mosaic .wp-block-post-template > li .wp-block-post-featured-image { height: 100%; } } /* ========================================================================== * 3. Cabecera transparente que se solidifica * * `header-perma-transparent` de Salient. Allí, un listener de scroll que añade * y quita `.scrolled-down`. Aquí, una línea de tiempo sobre el documento: el * estado de la cabecera es una función de la posición, no de una secuencia de * eventos, así que no se descuadra si el scroll salta. * * Se pega la barra de navegación, no la cabecera entera. La cabecera de * Ufópolis son tres filas —topbar, masthead con el logo y la cita, y navegación— * y pegarlas todas dejaría fija casi un tercio de la pantalla. Lo que tiene que * seguir accesible al bajar es el menú; el masthead ya ha cumplido su papel. * * Convive con el parallax de v0.11.7, que anima .uf-header::before: son * elementos distintos y ninguna de las dos reglas toca la capa de la otra. * ========================================================================== */ .uf-fx-header .uf-main-nav { position: sticky; top: 0; z-index: 100; } @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: scroll()) { .uf-fx-header .uf-main-nav { animation: uf-fx-solidify linear both; animation-timeline: scroll(root block); /* El rango arranca donde termina el masthead: hasta ahí la barra * viaja sobre el fondo de la cabecera y no necesita vestirse. */ animation-range: 120px 260px; } } } @keyframes uf-fx-solidify { from { background-color: rgba(6, 19, 29, 0); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); backdrop-filter: blur(0px); } to { background-color: rgba(6, 19, 29, 0.86); box-shadow: 0 10px 30px -22px rgba(0, 0, 0, 0.9); backdrop-filter: blur(9px); } } /* ========================================================================== * 4. Menú a pantalla partida * * `off-canvas/fullscreen-split` de Salient, sobre el desplegable nativo del * bloque de navegación. WordPress ya hace lo difícil —abrir, cerrar, atrapar el * foco, cerrar con Escape, marcar con has-modal-open—, así que esto es * solo su vestido. Sin JavaScript propio: lo que ya funciona no se reescribe. * * Es , no : medido con el menú abierto, `body.has-modal-open` no * casa nunca. Para reaccionar al modal abierto, `.is-menu-open` en el propio * contenedor, que es lo que usan esta sección y style.css. */ * ========================================================================== */ .uf-fx-menu .uf-main-nav-menu .wp-block-navigation__responsive-container.is-menu-open { padding: 0; background-color: var(--wp--preset--color--surface-deep); } @media (min-width: 782px) { .uf-fx-menu .uf-main-nav-menu .wp-block-navigation__responsive-container.is-menu-open { /* La partición. A la izquierda el menú, a la derecha el lienzo con el * resplandor de la marca. */ background-image: radial-gradient(120% 90% at 82% 30%, rgba(0, 169, 211, 0.16), transparent 62%), radial-gradient(90% 70% at 88% 78%, rgba(183, 152, 84, 0.12), transparent 60%), linear-gradient(to right, var(--wp--preset--color--surface-deep) 0 46%, var(--wp--preset--color--navy) 46% 100%); } } /* Acotada a `.is-menu-open` como el resto de la sección, que es lo que le * faltaba. WordPress deja este contenedor en el marcado también con el menú * cerrado; en móvil no se notaba porque style.css lo esconde con `display: * none`, pero de 782 px en adelante llevaba puesto el vestido del modal sin * ser un modal: los 9vh se convertían en 81 px de banda vacía por arriba y * otros 81 por abajo —la cabecera pasaba de 215 px a 370 px— y los 7vw * empujaban el menú 90 px a la derecha, fuera de la vertical del logotipo. */ .uf-fx-menu .uf-main-nav-menu .is-menu-open .wp-block-navigation__responsive-container-content { align-items: flex-start; justify-content: center; padding: clamp(2rem, 9vh, 6rem) clamp(1.5rem, 7vw, 6rem); } .uf-fx-menu .uf-main-nav-menu .is-menu-open .wp-block-navigation__container { gap: clamp(0.4rem, 1.6vh, 1rem); } .uf-fx-menu .uf-main-nav-menu .is-menu-open .wp-block-navigation-item__content { font-family: var(--wp--preset--font-family--editorial-sans); font-size: clamp(1.9rem, 5.2vw, 3.4rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.015em; color: var(--wp--preset--color--white); text-decoration: none; } /* El oro solo al pasar por encima: si todo el menú fuera oro, dejaría de * señalar dónde está el puntero. */ .uf-fx-menu .uf-main-nav-menu .is-menu-open .wp-block-navigation-item__content:hover, .uf-fx-menu .uf-main-nav-menu .is-menu-open .wp-block-navigation-item__content:focus-visible { color: var(--wp--preset--color--gold); } /* v0.14.10: y las hermanas se retiran. * * A este tamaño el color no basta para decir dónde está el puntero: cinco * palabras de 3,4 rem compiten todas por la mirada, y la que cambia de color lo * hace en un campo que sigue igual de cargado. Cuando la lista entera se * atenúa, el destino no se ilumina: emerge. Es el gesto que separa un menú a * pantalla completa de una lista grande. * * El atenuado se dispara desde el contenedor y no desde cada entrada, porque * así solo ocurre mientras el puntero está dentro del menú; al salir, las * cinco vuelven juntas. La transición vive en `style.css`, en la única regla * del menú desplegado, porque aquella lleva `!important` y ganaría a esta. */ .uf-fx-menu .uf-main-nav-menu .is-menu-open .wp-block-navigation__container:hover .wp-block-navigation-item__content { opacity: 0.42; } /* Y lo mismo con el teclado. Quien recorre el menú con el tabulador no pasa el * puntero por encima, así que el atenuado no le llegaba: el foco iluminaba su * entrada, pero las hermanas seguían igual de encendidas. `:has(:focus-visible)` * y no `:focus-within`, porque el segundo también se enciende con un clic o un * toque, y este gesto es para quien navega con teclado, como el propio foco. * El `:where()` deja esta regla por debajo en especificidad de la que devuelve * la opacidad a la entrada enfocada; sin él empatarían y decidiría el orden. */ .uf-fx-menu .uf-main-nav-menu .is-menu-open .wp-block-navigation__container:where(:has(:focus-visible)) .wp-block-navigation-item__content { opacity: 0.42; } .uf-fx-menu .uf-main-nav-menu .is-menu-open .wp-block-navigation__container .wp-block-navigation-item__content:hover, .uf-fx-menu .uf-main-nav-menu .is-menu-open .wp-block-navigation__container .wp-block-navigation-item__content:focus-visible { opacity: 1; } @media (prefers-reduced-motion: no-preference) { .uf-fx-menu .uf-main-nav-menu .is-menu-open .wp-block-navigation-item { animation: uf-fx-menu-in 520ms var(--uf-fx-ease, cubic-bezier(0.22, 0.61, 0.36, 1)) both; } /* Escalonado: las entradas caen una tras otra. Seis pasos bastan para el * menú actual (cinco entradas) y sobra uno de margen. */ .uf-fx-menu .uf-main-nav-menu .is-menu-open .wp-block-navigation-item:nth-child(1) { animation-delay: 40ms; } .uf-fx-menu .uf-main-nav-menu .is-menu-open .wp-block-navigation-item:nth-child(2) { animation-delay: 100ms; } .uf-fx-menu .uf-main-nav-menu .is-menu-open .wp-block-navigation-item:nth-child(3) { animation-delay: 160ms; } .uf-fx-menu .uf-main-nav-menu .is-menu-open .wp-block-navigation-item:nth-child(4) { animation-delay: 220ms; } .uf-fx-menu .uf-main-nav-menu .is-menu-open .wp-block-navigation-item:nth-child(5) { animation-delay: 280ms; } .uf-fx-menu .uf-main-nav-menu .is-menu-open .wp-block-navigation-item:nth-child(n+6) { animation-delay: 340ms; } } @keyframes uf-fx-menu-in { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } } /* ========================================================================== * 5. Titulares vivos * ========================================================================== */ /* -- 5.1 Palabras rotativas ------------------------------------------------- * `element-rotating-words-title`. El titular mantiene una palabra en rotación. * Sin JavaScript: las palabras se apilan en la misma celda de una rejilla y * cada una entra con su retardo. * * El contenedor reserva la altura de una línea; el ancho lo marca la palabra * más larga, porque todas ocupan la misma celda. Así el titular no se * recompone en cada vuelta. */ .uf-fx-rotate { display: inline-grid; vertical-align: bottom; overflow: hidden; text-align: left; } .uf-fx-rotate > * { grid-area: 1 / 1; color: var(--wp--preset--color--gold); white-space: nowrap; } /* Sin animación, se ve la primera palabra y las demás se apartan. El titular * sigue teniendo sentido: "La verdad sobre los crop circles". */ .uf-fx-rotate > *:not(:first-child) { visibility: hidden; } @media (prefers-reduced-motion: no-preference) { .uf-fx-titles .uf-fx-rotate > * { visibility: visible; animation-timing-function: var(--uf-fx-ease, cubic-bezier(0.22, 0.61, 0.36, 1)); animation-iteration-count: infinite; animation-fill-mode: both; } .uf-fx-titles .uf-fx-rotate > *:nth-child(1) { animation-delay: calc(var(--uf-fx-rotate-step, 2.6s) * 0); } .uf-fx-titles .uf-fx-rotate > *:nth-child(2) { animation-delay: calc(var(--uf-fx-rotate-step, 2.6s) * 1); } .uf-fx-titles .uf-fx-rotate > *:nth-child(3) { animation-delay: calc(var(--uf-fx-rotate-step, 2.6s) * 2); } .uf-fx-titles .uf-fx-rotate > *:nth-child(4) { animation-delay: calc(var(--uf-fx-rotate-step, 2.6s) * 3); } /* La ventana visible de cada palabra es una fracción del ciclo, y esa * fracción depende de cuántas palabras haya. En CSS no se puede parametrizar * un porcentaje de @keyframes con una variable, así que hay un juego de * fotogramas por cada número admitido y la clase dice cuál se usa. Tres y * cuatro cubren lo que pide un titular; con más, la palabra pasa demasiado * deprisa para leerse. * * uf-fx.js pone la clase sola contando los hijos, así que en el marcado * basta con escribir las palabras. */ .uf-fx-titles .uf-fx-rotate--3 > * { animation-name: uf-fx-word-3; animation-duration: calc(var(--uf-fx-rotate-step, 2.6s) * 3); } .uf-fx-titles .uf-fx-rotate--4 > * { animation-name: uf-fx-word-4; animation-duration: calc(var(--uf-fx-rotate-step, 2.6s) * 4); } } /* Tres palabras: cada una manda un tercio del ciclo. * * La salida de una palabra tiene que solaparse con la entrada de la siguiente. * Con la primera versión de estos fotogramas —salida terminada en el 33 %, que * es justo donde arranca la siguiente— el titular se quedaba sin palabra * durante un instante en cada vuelta: se veía "La verdad sobre los" y nada * detrás. Se detectó en la captura de comprobación, no leyendo el CSS. * * Ahora la salida termina en el 36 % y la entrada de la siguiente ocurre entre * el 33,3 % y el 36,3 %: los tres puntos de solape hacen un fundido cruzado y * el hueco desaparece. */ @keyframes uf-fx-word-3 { 0% { opacity: 0; transform: translate3d(0, 100%, 0); } 3%, 30% { opacity: 1; transform: none; } 36%, 100% { opacity: 0; transform: translate3d(0, -100%, 0); } } /* Cuatro palabras: un cuarto del ciclo cada una, con el mismo solape. */ @keyframes uf-fx-word-4 { 0% { opacity: 0; transform: translate3d(0, 100%, 0); } 3%, 22% { opacity: 1; transform: none; } 27%, 100% { opacity: 0; transform: translate3d(0, -100%, 0); } } /* -- 5.2 Banda de texto ------------------------------------------------------ * `element-scrolling-text`. La lista se duplica en el marcado —uf-fx.js lo hace * si falta— y se desplaza media anchura: al llegar al final, la copia está * exactamente donde estaba el original y el bucle no tiene costura. */ .uf-fx-marquee { display: flex; overflow: clip; width: 100%; padding-block: 0.7rem; border-block: 1px solid var(--wp--preset--color--hairline); /* Los bordes se desvanecen para que el texto no aparezca cortado en seco. * El prefijo va primero: Safari no entendió `mask-image` sin él hasta 15.4, * y si no se reconoce ninguna de las dos la banda simplemente tiene los * bordes duros, que es un defecto estético y no un fallo. */ -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); user-select: none; } .uf-fx-marquee__track { display: flex; flex: 0 0 auto; gap: 2.4rem; padding-right: 2.4rem; white-space: nowrap; font-family: var(--wp--preset--font-family--editorial-sans); font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--wp--preset--color--mist); } .uf-fx-marquee__track > * { flex: 0 0 auto; } /* La copia no se lee dos veces con un lector de pantalla: uf-fx.js la marca * aria-hidden al duplicarla. */ @media (prefers-reduced-motion: no-preference) { .uf-fx-titles .uf-fx-marquee__track { animation: uf-fx-slide var(--uf-fx-marquee-speed, 38s) linear infinite; } .uf-fx-titles .uf-fx-marquee:hover .uf-fx-marquee__track { animation-play-state: paused; } } @keyframes uf-fx-slide { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-100%, 0, 0); } } /* -- 5.3 Subrayado que se traza --------------------------------------------- * `element-highlighted-text` y `element-morphing-outline`. El trazo se dibuja * cuando la frase entra en pantalla, no al cargar: si se dibujara al cargar, * en una frase que está más abajo nadie lo vería nunca. */ .uf-fx-mark { background-image: linear-gradient(to right, var(--wp--preset--color--gold), var(--wp--preset--color--gold)); background-repeat: no-repeat; background-position: 0 88%; background-size: 100% 2px; padding-bottom: 0.06em; } @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { .uf-fx-titles .uf-fx-mark { animation: uf-fx-underline linear both; animation-timeline: view(); animation-range: entry 20% entry 85%; } } } @keyframes uf-fx-underline { from { background-size: 0% 2px; } to { background-size: 100% 2px; } } /* Variante de caja: el trazo rodea la frase en lugar de subrayarla. */ .uf-fx-outline { position: relative; display: inline-block; padding: 0.1em 0.34em; } .uf-fx-outline::before { content: ""; position: absolute; inset: 0; border: 1px solid var(--wp--preset--color--gold); border-radius: 2px; clip-path: inset(0 0 0 0); } @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { .uf-fx-titles .uf-fx-outline::before { animation: uf-fx-trace linear both; animation-timeline: view(); animation-range: entry 20% entry 85%; } } } @keyframes uf-fx-trace { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } /* -- 5.4 Contadores --------------------------------------------------------- * `element-milestone`. El único efecto con JavaScript propio, porque no hay * forma fiable de interpolar un número y que además quede en el DOM como texto * legible por un lector de pantalla. uf-fx.js escribe el valor final en el * marcado antes de animar, así que sin JavaScript la cifra sigue ahí. */ .uf-fx-count { font-family: var(--wp--preset--font-family--editorial-sans); font-size: clamp(2.2rem, 6vw, 3.6rem); font-weight: 600; line-height: 1; color: var(--wp--preset--color--white); font-variant-numeric: tabular-nums; } .uf-fx-count + .uf-fx-count-label { display: block; margin-top: 0.4rem; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--gold); } .uf-fx-stats { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 6vw, 4.5rem); justify-content: center; margin-block-start: clamp(2rem, 5vw, 3.5rem); padding-block-start: clamp(1.5rem, 4vw, 2.5rem); border-block-start: 1px solid var(--wp--preset--color--hairline); text-align: center; } .uf-fx-stat { flex: 0 1 auto; min-width: 8rem; } /* ========================================================================== * 6. Vídeo en capa * * `element-video-lightbox`. Se usa