/** * DEPORTES JIMMY — v6.0 "SENSACIÓN DE MOUSE" * ------------------------------------------------------------- * Efectos de interacción para la home: elegantes primero, modernos * y con un puntito agresivo después. La regla de oro es que se * sientan igual de vivos con el mouse en computadora que con el * dedo en tablet y celular — en pantalla táctil no existe el * ":hover" de verdad, así que en vez de depender solo de eso, * estos efectos también reaccionan a ":active" (el instante en que * el dedo está apoyado) y, donde hace falta más control, a clases * que pone interactions.js con Pointer Events — que en un teléfono * se disparan igual al tocar que un mouse al pasar por encima. * * Todo respeta "reducir movimiento": quien lo pida en su sistema * ve las secciones quietas y completas, sin perderse nada. */ :root { --dj-fx-ease: cubic-bezier(0.16, 1, 0.3, 1); /* v7.4 — ARRANQUE SUAVE Y LLEGADA ELÁSTICA. Antes era cubic-bezier(0.22, 1, 0.36, 1): esa curva sale disparada en el primer cuadro y frena en seco al final. En un movimiento largo como este se siente "golpeado", sobre todo al cambiar de un lado al otro (el arranque brusco choca contra el frenazo del lado que se está yendo). v8.7 — CURVA AÚN MÁS SUAVE, a pedido del cliente. La de v8.6 (0.22, 0.61, 0.36, 1) ya no rebotaba, pero arrancaba con bastante empuje. Esta arranca casi sin fuerza y dedica la mayor parte del recorrido a frenar: el panel "se desliza y se posa" en vez de salir disparado y detenerse. Sigue sin pasarse nunca de su destino. */ --dj-fx-ease-soft: cubic-bezier(0.16, 0.84, 0.28, 1); /* Un pelín más largo que antes (1.15s): con la curva de arriba, estirarlo hace que el frenado final se lea todavía más suave. */ --dj-gender-dur: 1.35s; } /* =========================================================== 1. .dj-hover-fx ----------------------------------------------------------- Brillo diagonal + anillo rojo + elevación. Se usa en las fichas de "Compra por Deporte" y "Arma Tu Gym En Casa": un vidrio que destella y la ficha que se despega del fondo, como si de verdad hubiera algo ahí debajo reaccionando al mouse. =========================================================== */ /** * ⚠️ El anillo rojo y la sombra de elevación van en el propio * ".dj-hover-fx" (box-shadow del elemento), NUNCA en un "::before" con * inset:0 — la ficha (.dj-sport-tile / .dj-gym-tile) tiene * "overflow: hidden" para recortar la foto en las esquinas * redondeadas, y ESE overflow SÍ recorta el box-shadow de un hijo * (el "::before") que se sale de sus bordes, aunque no recorte el * box-shadow del propio elemento. Puesto en el elemento, el anillo se * ve completo; puesto en el pseudo-elemento, se vería cortado por los * cuatro lados y el "efecto agresivo" se perdería justo donde más se * nota (el mouse encima). */ .dj-hover-fx { position: relative; isolation: isolate; transition: transform 0.4s var(--dj-fx-ease), box-shadow 0.4s var(--dj-fx-ease); } .dj-hover-fx::after { /* El destello: una franja de luz que cruza la ficha en diagonal */ content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; background: linear-gradient( 115deg, transparent 30%, rgba(255, 255, 255, 0.4) 46%, rgba(255, 255, 255, 0.08) 58%, transparent 72% ); background-size: 240% 240%; background-position: 130% -20%; } /** * v7.1 — EL ":active" A SECAS SE QUITÓ DE AQUÍ. * * "Compra por Deporte" (.dj-sport-tile) vive DENTRO de un carrusel * que se arrastra con el dedo. ":active" se dispara en el instante * mismo del toque — antes de que el carrusel sepa si el dedo va a * quedarse quieto o va a arrastrar — así que el brillo/elevación * competía con el swipe justo al empezar y se sentía "raro"/con * tirones (el mismo síntoma que en las tarjetas de producto, ver * product-hover.js). "Arma Tu Gym En Casa" (.dj-gym-tile) NO está en * un carrusel, así que para esa ficha ":active" seguía siendo seguro * — se mantiene, pero ya no en TODOS los ".dj-hover-fx". * * Ahora, en táctil, es interactions.js el que "arma" el efecto con un * pequeño retraso y lo cancela si el dedo se mueve de verdad (o sea, * si es un swipe) — la clase que pone es ".is-fx-active", que ya * estaba aquí desde el principio. Con mouse de escritorio no cambia * nada: ":hover" sigue disparando al instante, como siempre. */ .dj-hover-fx:hover, .dj-hover-fx.is-fx-active, .dj-gym-tile.dj-hover-fx:active { transform: translate3d(0, -8px, 0) scale(1.025); z-index: 5; box-shadow: 0 26px 46px rgba(0, 0, 0, 0.32), 0 0 0 2.5px var(--dj-red, #ff0000), 0 0 26px 2px rgba(255, 0, 0, 0.45); } .dj-hover-fx:hover::after, .dj-hover-fx.is-fx-active::after, .dj-gym-tile.dj-hover-fx:active::after { opacity: 1; animation: dj-fx-sweep 0.85s var(--dj-fx-ease) forwards; } @keyframes dj-fx-sweep { from { background-position: 130% -20%; } to { background-position: -30% 120%; } } /* Los tiles ya suben (dj-tilt) con la 3D del mouse en escritorio; aquí solo añadimos un pelín más de contraste a la foto al reaccionar, para que se note que "algo pasó" y no sea solo el marco el que se mueve. */ .dj-sport-tile.dj-hover-fx:hover .dj-sport-tile__bg, .dj-sport-tile.dj-hover-fx.is-fx-active .dj-sport-tile__bg, .dj-gym-tile.dj-hover-fx:hover .dj-gym-tile__bg, .dj-gym-tile.dj-hover-fx:active .dj-gym-tile__bg { filter: saturate(1.15) contrast(1.05); } /* =========================================================== 2. COLECCIÓN HOMBRE / MUJER — el panel que se estira hacia la mano de su lado y se resalta ----------------------------------------------------------- Al pasar el mouse (o el dedo) sobre "Hombre", esa columna crece hacia la IZQUIERDA (su lado) y empuja un poco a "Mujer"; al revés con "Mujer", que crece hacia la DERECHA. El texto y la foto de la columna activa además se acercan y se iluminan — el "resalte". Las clases is-hover-men / is-hover-women las pone interactions.js con Pointer Events, así que responden igual al mouse que al dedo. =========================================================== */ /** * v6.0.2 — MÁS SUTIL Y EN TODOS LOS ANCHOS. * * Dos correcciones sobre la v6.0.1: * * 1) SUTIL, NO UN GOLPE. El vaivén de antes (1.55 / 0.6, casi 72/28) * cambiaba de golpe visual el ancho de las dos columnas Y el zoom * de la foto Y un anillo rojo duro Y el texto, todo a la vez y con * una curva que arranca rápido (buena para algo "agresivo" como * Compra por Deporte, mala para algo que tiene que sentirse fino). * Ahora el vaivén es mínimo (1.12 / 0.88, más o menos 56/44 — * apenas se nota que una columna "respira" hacia su lado), la * curva es una que ACELERA Y FRENA suave por igual (sin arranque * brusco) y TODO —ancho, foto, sombra, texto— tarda exactamente lo * mismo, así se siente como un solo movimiento, no cuatro * animaciones peleando entre sí. * * 2) TAMBIÉN EN CELULAR. Antes el crecimiento de columnas solo pasaba * a partir de 641px — por eso "no hacía nada" en móvil (probando * con la ventana angosta, ni con mouse se veía). Se quitó ese * límite: ahora responde igual de ancho a angosto. El toque en * pantalla táctil dura lo que dura el dedo apoyado (interactions.js * ya usa Pointer Events, que en táctil se comportan igual que un * "mouseenter/mouseleave"), así que con el dedo quieto un instante * sobre la foto se alcanza a ver perfectamente. */ /** * v7.3 — EL EFECTO, TAL CUAL EL CÓDIGO QUE PIDIÓ EL CLIENTE. * ----------------------------------------------------------- * Antes esto animaba "flex-grow" (1.12 / 0.88). Se sentía "de golpe": * con las columnas en "flex: 1 1 0%", el ancho final sale de un * reparto proporcional que el navegador recalcula, y esa cuenta no * siempre se interpola suave. * * Ahora se anima FLEX-BASIS directamente —50% en reposo, 65% el lado * que se toca y 35% el contrario— que es la técnica exacta del * fragmento que mandó el cliente, con su misma curva * (cubic-bezier(.22, 1, .36, 1)) y su mismo tiempo (0.7s). El ancho * es un valor concreto que va de 50% a 65%, así que el navegador lo * anima punto por punto y el movimiento se siente continuo. * * Se escribe DOS VECES el mismo efecto, a propósito: * * 1. Con ":hover" / ":has()" — funciona aunque el JavaScript no * llegue a cargar (es literalmente el código del cliente). * 2. Con las clases ".is-hover-men" / ".is-hover-women" que pone * interactions.js con Pointer Events — es la única versión que * responde AL DEDO en tablet y celular, donde ":hover" no * existe de verdad. * * Las dos apuntan a los mismos valores, así que nunca se contradicen. */ .dj-gender-split__col { transition: flex-basis var(--dj-gender-dur) var(--dj-fx-ease-soft), box-shadow var(--dj-gender-dur) var(--dj-fx-ease-soft), filter var(--dj-gender-dur) var(--dj-fx-ease-soft); } /* --- 1. Versión CSS pura (escritorio, sin depender del JS) --- */ .dj-gender-split__col:hover { flex-basis: 65%; } .dj-gender-split:has(.dj-gender-split__col:hover) .dj-gender-split__col:not(:hover) { flex-basis: 35%; } /* --- 2. Versión por clase (la que responde al dedo) --- */ .dj-gender-split.is-hover-men .dj-gender-split__col--men { flex-basis: 65%; } .dj-gender-split.is-hover-men .dj-gender-split__col--women { flex-basis: 35%; } .dj-gender-split.is-hover-women .dj-gender-split__col--women { flex-basis: 65%; } .dj-gender-split.is-hover-women .dj-gender-split__col--men { flex-basis: 35%; } /* Cada foto respira hacia SU lado: Hombre hacia la izquierda, Mujer hacia la derecha — por eso el transform-origin cambia. El zoom es chico a propósito (iba a 1.12 antes; ahora 1.05, lo mismo que ya usa el resto del tema para fotos "en reposo activo", ver .dj-card-live) — que se note, no que salte. */ .dj-gender-split__col--men .dj-gender-split__bg { transform-origin: left center; } .dj-gender-split__col--women .dj-gender-split__bg { transform-origin: right center; } /* ⚠️ OJO: ".is-active" en ".dj-gender-split__bg" ya significa otra cosa (home.js, initGenderRotate: "esta es la foto que toca ahora en la rotación"). Para el estado de "esta columna tiene el mouse/dedo encima" usamos a propósito un nombre distinto, ".is-fx-hover", puesto por interactions.js con Pointer Events — así nunca se pisan. */ .dj-gender-split__col--men.is-fx-hover .dj-gender-split__bg.is-active, .dj-gender-split__col--women.is-fx-hover .dj-gender-split__bg.is-active { transform: scale(1.05); } /* El resalte: la foto se aclara un poco (nada de anillos duros de color, que es justo lo que se sentía como "golpe") y el texto se acerca un pelín, casi imperceptible. */ .dj-gender-split__col.is-fx-hover { box-shadow: inset 0 -120px 110px -60px rgba(0, 0, 0, 0.22); } .dj-gender-split__col.is-fx-hover .dj-gender-split__bg.is-active { filter: brightness(1.08) saturate(1.05); } .dj-gender-split__col .dj-gender-split__bg { transition: opacity 1s ease, transform var(--dj-gender-dur) var(--dj-fx-ease-soft), filter var(--dj-gender-dur) var(--dj-fx-ease-soft); } /* v8.6 — la transición del oscurecido va en la regla BASE, no dentro del estado con el mouse/dedo encima. Antes estaba solo en ".is-fx-hover", así que al ENTRAR se animaba pero al SALIR el degradado volvía de golpe — medio efecto suave y medio salto. */ .dj-gender-split__col .dj-gender-split__overlay { transition: background var(--dj-gender-dur) var(--dj-fx-ease-soft); } .dj-gender-split__col.is-fx-hover .dj-gender-split__overlay { background: linear-gradient(0deg, rgba(0,0,0,0.68) 0%, rgba(0,0,0,0.14) 60%, rgba(0,0,0,0.26) 100%); } .dj-gender-split__col .dj-gender-split__content { transition: transform var(--dj-gender-dur) var(--dj-fx-ease-soft); } .dj-gender-split__col--men.is-fx-hover .dj-gender-split__content { transform: translateX(3px); } .dj-gender-split__col--women.is-fx-hover .dj-gender-split__content { transform: translateX(-3px); } .dj-gender-split__col .dj-btn { transition: background-color var(--dj-gender-dur) ease, border-color var(--dj-gender-dur) ease, color var(--dj-gender-dur) ease; } .dj-gender-split__col.is-fx-hover .dj-btn { background: var(--dj-red, #ff0000); border-color: var(--dj-red, #ff0000); color: #fff; } @media (prefers-reduced-motion: reduce) { .dj-gender-split, .dj-gender-split__col, .dj-gender-split__bg, .dj-gender-split__content { transition: none !important; } } /* =========================================================== 2-bis. ⚠️ POR QUÉ HOMBRE/MUJER SE MOVÍA "DE GOLPE" (v8.8) ----------------------------------------------------------- Esto costó encontrarlo, así que queda escrito. La animación de entrada de las tarjetas (alive.css, ".dj-rise") se le aplica también a estas dos columnas — alive.js las arma porque ".dj-gender-split" está en su lista de rejillas. Y esa regla declara: transition: opacity 0.66s ..., transform 0.66s ...; "transition" es una propiedad ATAJO: al declararla de nuevo, REEMPLAZA la lista entera anterior. Y ".dj-rise.is-armed" (dos clases) le gana en especificidad a ".dj-gender-split__col" (una clase), donde estaba declarada la transición del efecto. Resultado: "flex-basis" se quedaba SIN transición ninguna. Por eso el ancho de las columnas saltaba de 50% a 65% de un frame al otro — un golpe seco — por más que arriba se afinara la curva: esa curva nunca se estaba aplicando. Aquí se declaran las dos cosas juntas, con tres clases para ganar por especificidad. Las demoras van por propiedad: la cascada de entrada conserva la suya (--dj-i * 85ms) y el movimiento del panel arranca sin demora (0s), para que responda apenas se posa el mouse. =========================================================== */ .dj-gender-split__col.dj-rise.is-armed { transition: opacity 0.66s var(--dj-ease-out) calc(var(--dj-i, 0) * 85ms), transform 0.66s var(--dj-ease-out) calc(var(--dj-i, 0) * 85ms), flex-basis var(--dj-gender-dur) var(--dj-fx-ease-soft) 0s, box-shadow var(--dj-gender-dur) var(--dj-fx-ease-soft) 0s, filter var(--dj-gender-dur) var(--dj-fx-ease-soft) 0s; } /* =========================================================== 3. .dj-spotlight — Ofertas de Jimmy / Envío Gratis ----------------------------------------------------------- ESCRITORIO (mouse de verdad, "hover: hover" + "pointer: fine"): un foco de luz que sigue al cursor, como pasar una linterna por encima de la franja — moderno, un poco "premium", sin dejar de ser sutil. Las coordenadas las pone interactions.js en --dj-mx / --dj-my sobre la marcha. TABLET Y CELULAR: la linterna no tiene sentido sin cursor, así que ahí el estilo es OTRO, más simple y directo — un pulso de brillo + un ligerísimo hundimiento al tocar, para que se sienta el toque sin que la franja entera "salte" en una pantalla chica. =========================================================== */ .dj-spotlight { position: relative; isolation: isolate; } .dj-spotlight::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 0.4s ease; } @media (hover: hover) and (pointer: fine) { .dj-spotlight::before { background: radial-gradient( 420px circle at var(--dj-mx, 50%) var(--dj-my, 50%), rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.08) 38%, transparent 65% ); mix-blend-mode: overlay; } .dj-spotlight:hover::before { opacity: 1; } .dj-spotlight { transition: transform 0.45s var(--dj-fx-ease), box-shadow 0.45s var(--dj-fx-ease); } .dj-spotlight:hover { transform: scale(1.012); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.28); z-index: 3; } .dj-spotlight:hover .dj-sale-ship__title, .dj-spotlight:hover .dj-sale-ship__ship-title { text-shadow: 0 0 22px rgba(255, 60, 40, 0.55); } } /* Tablet / celular: otro estilo, pensado para el dedo (:active) */ @media (hover: none), (pointer: coarse) { .dj-spotlight { transition: transform 0.25s ease, filter 0.25s ease; } .dj-spotlight:active { transform: scale(0.985); filter: brightness(1.1) saturate(1.08); } .dj-spotlight::before { background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.22), transparent 70%); } .dj-spotlight:active::before { opacity: 1; transition: opacity 0.15s ease; } } @media (prefers-reduced-motion: reduce) { .dj-spotlight, .dj-spotlight::before { transition: none !important; animation: none !important; } } /* =========================================================== 4. TARJETAS DE PRODUCTO — un poco más de vida al tocarlas (el cambio de foto/color lo hace product-hover.js; esto es solo el "se despega" de la tarjeta, igual con dedo que con mouse) ----------------------------------------------------------- ⚠️ En la tienda/categorías, ".woocommerce ul.products li.product" (shop.css) ya sube la tarjeta en ":hover" — aquí solo le sumamos ":active" para que el dedo en tablet/celular sienta lo mismo. Esa rejilla NO se arrastra con el dedo, así que ":active" ahí es seguro. En la HOME esa regla de shop.css no llega a aplicarse nunca (el ".woocommerce" del selector es una clase que pone el propio WooCommerce alrededor de la rejilla en la tienda, y la home no pasa por ahí — ver el comentario de "CARRUSEL GENÉRICO" en home.css), así que ahí la elevación la da esta segunda regla, agarrada a ".dj-product-carousel" — la clase que SÍ llevan Fresh Del Camión, Los Más Vendidos y Producto Estrella. v7.1: a ".dj-product-carousel ... li.product" se le QUITÓ el ":active" — esos tres carruseles SÍ se arrastran con el dedo, y ":active" se disparaba en el instante del toque, compitiendo con el swipe (el mismo problema que en .dj-hover-fx, arriba, y el causante del "desplazamiento raro" que se reportó en Producto estrella). El dedo ahí sigue viendo elevación, pero ahora la decide product-hover.js con su propio retraso-y-cancela-si-hay-swipe, no un ":active" a secas. */ .woocommerce ul.products li.product, .woocommerce-page ul.products li.product, .dj-product-carousel .dj-carousel__track > li.product { transition: transform 0.35s var(--dj-fx-ease), box-shadow 0.35s var(--dj-fx-ease); } .woocommerce ul.products li.product:active, .woocommerce-page ul.products li.product:active, .dj-product-carousel .dj-carousel__track > li.product:hover, .dj-product-carousel .dj-carousel__track > li.product.is-fx-active { box-shadow: var(--dj-shadow-md, 0 8px 24px rgba(0,0,0,0.14)); transform: translateY(-5px); z-index: 2; } @media (prefers-reduced-motion: reduce) { .woocommerce ul.products li.product, .woocommerce-page ul.products li.product, .dj-product-carousel .dj-carousel__track > li.product { transition: none !important; } }