/* ====================================================================== HERO — las fotos que se van cruzando ====================================================================== QUÉ HACE ESTE ARCHIVO La portada tenía UNA foto fija. Ahora hay tres por sección y se van pasando de una a la otra con un fundido lento, más un zoom apenas perceptible mientras entra la nueva. La idea es que se sienta caro y tranquilo, no un slideshow de PowerPoint. EL PROBLEMA QUE HUBO QUE RESOLVER El HTML del hero es de otro agente y no se puede tocar: la sección es un solo
con el texto adentro, y la foto la pone el CSS con background-image. O sea: no hay dónde meter una segunda imagen. LA SOLUCIÓN Se usan DOS capas de foto sin agregar ni una etiqueta: 1. el propio background-image de .hero → la foto que se está viendo 2. el pseudo-elemento .hero::before → la foto que está entrando El JS le pone a ::before la foto siguiente con opacidad 0 y la lleva a 1. Cuando terminó el fundido, esa misma foto pasa a ser el fondo de .hero y ::before se apaga de golpe. Como en ese instante las dos capas muestran exactamente lo mismo, el cambio es invisible y queda todo listo para la vuelta siguiente. Un solo pseudo-elemento alcanza para rotar infinitas fotos. POR QUÉ ::before Y NO ::after Porque ::after ya está usado en tienda.css: en el celular es el velo blanco degradado que deja leer el texto sobre la foto. Ese velo tiene que quedar ARRIBA de las fotos, y como ::after se pinta después de ::before, sale gratis. CÓMO SE HABLAN EL CSS Y EL JS El JS NO sabe cómo se llaman los archivos: sólo escribe dos atributos en la sección, data-foto="2" y data-entrante="3", y este CSS traduce esos números a fotos. Toda la lista de archivos vive acá abajo, en un solo lugar. Y lo mejor: como el JS no escribe estilos en línea, los @media siguen mandando siempre, así que girar el teléfono o agrandar la ventana cambia sola la foto horizontal por la vertical, sin una línea de JS. QUÉ SE PISA DE tienda.css (agente 9) Este archivo se carga después, así que gana. Se le cambian a .hero: · background-image → pasa a leerse de la variable --hero-foto. · background-position → pasa a leerse de --hero-encuadre, así el fondo y la capa de arriba encuadran igual. · overflow / isolation → nuevos, hacen falta para el zoom y para que la capa de arriba se ubique en la altura correcta (ver más abajo). El background-color de tienda.css NO se toca: es el color real del fondo del estudio y es lo que se ve mientras baja la primera foto. Sin él la portada arrancaría en blanco. ====================================================================== */ /* --- La lista de fotos ------------------------------------------------ Cuatro bloques: mujer y hombre, y de cada uno la versión de escritorio y la de celular. Los dos juegos van bien separados: entrar a "Hombre" y encontrarse con una modelo mujer da la sensación de haber clickeado mal. Son todas prendas de INVIERNO —buzos, camperas, térmicas— porque es la temporada que se está vendiendo. -------------------------------------------------------------------- */ .hero { --foto-1: url("/img/hero-757190e3e274a607092d014de1c39d4c.jpg"); /* térmica Crush, fondo violeta */ --foto-2: url("/img/hero-2-ab7ebd5e0f117944bea9226e2451e4c1.jpg"); /* rompeviento Narux, fondo arena */ --foto-3: url("/img/hero-3-f55bc295c476f87276ad03d356114bb3.jpg"); /* tejido Oleva, fondo azul */ } /* La portada general —cuando no se eligió sección— lleva una pareja: un hombre y una mujer, juntos y centrados. Es la única que muestra las dos secciones a la vez, porque es la puerta de entrada del sitio. Adentro de Mujer u Hombre eso sería confuso: quien entró a Hombre no espera ver una modelo. Por eso cada sección conserva sus propias fotos. BONIQUES NO ESTÁ ACÁ, y es una decisión. Se intentó tres veces y las tres se descartaron por la misma razón de fondo: de esa marca hay tres fotos de Instagram, la más grande de 1373 de ancho, contra las de Miwok que vienen en 3400. Una portada donde una de cada tres fotos se ve peor que las otras es una portada peor. Vuelve el día que haya material de catálogo; mientras tanto la marca vive en el menú, en los filtros y en sus fichas de producto. */ .hero.hero-todo { --foto-1: url("/img/hero-todo-ec0f517a4368d5fa25ab811ac4b03a52.jpg"); /* buzo Cave, fondo arena */ --foto-2: url("/img/hero-todo-2-bf79ea1cd615425776ee99189ced36a3.jpg"); /* tejido Oleva entero, fondo azul */ --foto-3: url("/img/hero-todo-3-81d5debdcadeb3b1343856ace7c4eb53.jpg"); /* térmica Crush entera, fondo verde */ } .hero.hero-hombre { --foto-1: url("/img/hero-hombre-cb096a4b6838e203f54280be68eaba93.jpg"); /* canguro Tolne, fondo azul acero */ --foto-2: url("/img/hero-hombre-2-91613f31e4c90dbe5839b13cec4800e6.jpg"); /* medio cierre Fenix, fondo arena */ --foto-3: url("/img/hero-hombre-3-02dd0ac7dcf14264f004e3d008e827cb.jpg"); /* campera Holster Up, fondo verde */ } /* En el celular la pantalla es vertical y la foto ancha dejaría a la persona del tamaño de una uña, así que va la versión vertical de cada una. Ojo: acá sólo cambian las variables; las reglas que las usan son las mismas de más abajo y no hace falta repetirlas. */ @media (max-width: 900px) { .hero { --foto-1: url("/img/hero-movil-be594821b1ea338d59e4b22abbc98b91.jpg"); --foto-2: url("/img/hero-2-movil-57b71b06b21b7df4868d923141179dc0.jpg"); --foto-3: url("/img/hero-3-movil-4bfcf7ebabb0a582cf2067293f40f80d.jpg"); } .hero.hero-todo { --foto-1: url("/img/hero-todo-movil-9846752a85137c5f5a47d8d2937ca45d.jpg"); --foto-2: url("/img/hero-todo-2-movil-573d17d0e0b5e85c34688a8581ecccb5.jpg"); --foto-3: url("/img/hero-todo-3-movil-37e9e5d3fe4b55753a0f6c22a9a6941e.jpg"); } .hero.hero-hombre { --foto-1: url("/img/hero-hombre-movil-350bd73a2dc204f1d26ddbb1279de03a.jpg"); --foto-2: url("/img/hero-hombre-2-movil-b0d5cd4602c63dae9fdafee0f9517c6c.jpg"); --foto-3: url("/img/hero-hombre-3-movil-0293893c8609b0f68e3d6ef0ba5f73e4.jpg"); } } /* --- Del número a la foto -------------------------------------------- Esto es todo lo que el JS necesita: le pone a la sección data-foto="2" y acá se resuelve qué archivo es, según la sección y el tamaño de pantalla. El JS no sabe ni tiene por qué saber ningún nombre de archivo. -------------------------------------------------------------------- */ .hero[data-foto="1"] { --hero-foto: var(--foto-1); } .hero[data-foto="2"] { --hero-foto: var(--foto-2); } .hero[data-foto="3"] { --hero-foto: var(--foto-3); } .hero[data-entrante="1"] { --hero-entrante: var(--foto-1); } .hero[data-entrante="2"] { --hero-entrante: var(--foto-2); } .hero[data-entrante="3"] { --hero-entrante: var(--foto-3); } /* --- La sección --------------------------------------------------------- */ .hero { /* Cuántas fotos hay. El JS lee este número de acá para saber hasta dónde contar; si algún día se agrega una cuarta foto, se toca este archivo y nada más. */ --hero-cantidad: 3; /* La foto que se ve. Arranca en la primera: si el JS no corre nunca, la portada queda exactamente como antes, con una foto quieta. */ --hero-foto: var(--foto-1); /* Encuadre. Las personas van centradas en la foto —así las arma portada-figuras.py— y el aire queda repartido a los costados, que es lo que el recorte de "cover" se puede comer sin tocar a nadie. Las dos capas usan el mismo valor para que al cruzarse no se corra ni un píxel. */ --hero-encuadre: center center; /* Desde dónde "empuja" el zoom de la foto que entra. Se ancla sobre las figuras para que queden quietas y lo único que se mueva sea el aire de alrededor. */ --hero-anclaje: center center; /* Cuánto dura el cruce. Está acá y no en el JS porque el JS lo lee de esta misma variable: un solo número, imposible que se desincronicen. */ --hero-cruce: 1800ms; background-image: var(--hero-foto); background-position: var(--hero-encuadre); /* La foto que entra arranca un poquito más grande que el marco. Sin esto, ese sobrante asomaría por los costados de la sección. */ overflow: hidden; /* Crea un "contexto de apilado" propio. Traducido: le avisa al navegador que lo que esté adentro de .hero se ordena adentro de .hero. Hace falta porque la capa de la foto que entra va con z-index negativo, y sin esto se iría a parar detrás del fondo de toda la página y no se vería nunca. */ isolation: isolate; } /* --- La capa de la foto que entra ------------------------------------- Está vacía hasta que el JS le pone un data-entrante (--hero-entrante arranca en "none"). Si el JS no corre nunca, este pseudo-elemento no se ve y el hero queda igual de bien con la primera foto. z-index: -1 la deja entre el fondo de .hero y el texto: tapa la foto vieja pero nunca el título ni los botones. -------------------------------------------------------------------- */ .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--hero-entrante, none); background-size: cover; background-position: var(--hero-encuadre); background-repeat: no-repeat; /* Empieza invisible y apenas agrandada. El fundido la lleva a opacidad 1 y a tamaño exacto (scale 1) al mismo tiempo, así que justo cuando termina de aparecer coincide píxel a píxel con el fondo de .hero y el relevo entre capas no se nota. */ opacity: 0; transform: scale(1.055); transform-origin: var(--hero-anclaje); /* Sin transición mientras no esté cruzando: cuando el JS apaga la capa para preparar la vuelta siguiente, tiene que apagarse de golpe y no desvanecerse hacia atrás. */ transition: none; pointer-events: none; } /* El JS pone esta clase en .hero para largar el cruce. La transición vive acá adentro justamente para que exista sólo durante el cruce. */ .hero.hero-cruzando::before { opacity: 1; transform: scale(1); /* La opacidad entra y sale suave; el zoom frena de a poco al final (cubic-bezier), que es lo que le da el aire de cámara de cine en vez de motorcito uniforme. */ transition: opacity var(--hero-cruce) ease-in-out, transform var(--hero-cruce) cubic-bezier(.22, .61, .27, 1); } /* --- Celular: el encuadre --------------------------------------------- Las fotos verticales ya se cambiaron arriba; acá sólo se corrige por dónde se las mira. -------------------------------------------------------------------- */ @media (max-width: 900px) { .hero { /* La foto vertical trae a las dos personas centradas en el alto (las arma portada-figuras.py y las achica para que entren a lo ancho), así que se la mira por el medio. Antes se encuadraba al 12% porque la figura iba pegada arriba; con ese valor ahora se vería el aire de la cabeza y les cortaría las piernas. */ --hero-encuadre: center center; --hero-anclaje: center center; } /* El velo blanco de abajo, que es lo que permite leer el título sobre la foto, se define en tienda.css y arranca a desvanecerse al 58% de la altura. Con el título grande que tiene ahora el sitio, el texto sube más que antes y su primer renglón queda justo en la zona donde el velo ya casi no cubre: en la sección de hombre cae sobre el buzo negro del modelo y se lee al límite. Se estira el velo hasta el 74% y se le sube la opacidad del tramo del medio. Se toca acá y no en tienda.css porque el problema es del hero y de las fotos que rotan; el archivo base no tiene por qué saber qué foto está puesta. Ojo con el orden: este ::after es el MISMO elemento que declara tienda.css, no uno nuevo. Sólo se le pisa el fondo, y como esta hoja se carga después, gana. Todo lo demás (el inset, el content) sigue viniendo de allá. */ .hero::after { background: linear-gradient(to top, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .93) 34%, rgba(255, 255, 255, .72) 54%, rgba(255, 255, 255, 0) 74%); } } /* --- Quien pidió menos movimiento ------------------------------------- Con "reducir movimiento" activado en el sistema no hay rotación de fotos: una sola foto fija y listo. El JS también lo consulta y ni arranca, pero la regla queda igual por las dudas: si el JS fallara a mitad de un cruce, esto lo deja prolijo. -------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .hero::before, .hero.hero-cruzando::before { display: none; transition: none; } } /* ====================================================================== LA FOTO A PANTALLA COMPLETA ====================================================================== Pedido de Ramiro: "agrandale la foto d portada q sea transparente lo d arriba igual q miwok". En miwok.com.ar la foto de portada mide exactamente la ventana (lo medí: 895px de alto en una ventana de 895px) y el encabezado flota adentro, sin fondo. Eso es lo que hace que al abrir el sitio veas UNA imagen y no una barra de menú con una foto abajo. Acá antes medía 78vh como mucho, tope 660px: en un monitor grande quedaba una foto mediana con el catálogo asomando abajo, que es justo lo que le sacaba fuerza. ---------------------------------------------------------------------- */ .hero { /* 100vh primero como respaldo, y 100dvh encima para los navegadores que lo entienden. La diferencia se nota SÓLO en el celular: vh mide la ventana con la barra de direcciones escondida, así que al entrar —con la barra todavía a la vista— la foto queda más alta que la pantalla y empuja todo. dvh mide lo que realmente se ve en cada momento. */ min-height: 100vh; min-height: 100dvh; /* El encabezado ya no ocupa lugar (es fixed), así que la foto arranca en el pixel 0 y le pasa por debajo. Pero el TEXTO de la foto no puede quedar tapado por el menú: este padding lo corre hacia abajo justo lo que mide el encabezado. Como el alto sale de la misma variable que usa el encabezado, no hay forma de que se desfasen. */ padding-top: var(--alto-encabezado); } /* Con la foto ocupando la pantalla entera, la flechita de "seguí bajando" pasa a ser necesaria de verdad: sin ella, en un monitor grande no hay ninguna pista de que abajo hay catálogo. Se la baja un poco para separarla del borde. */ .hero-flecha { bottom: 34px; } /* --- La firma sobre la foto ------------------------------------------- El logo apoyado abajo y al centro de la foto, como en miwok.com.ar. -------------------------------------------------------------------- */ .hero-firma { position: absolute; left: 50%; bottom: 88px; /* arriba de la flechita, que va en 34px */ transform: translateX(-50%); width: clamp(112px, 11vw, 168px); height: auto; /* Apagado a propósito: es una firma, no un cartel. Al 34% se lee sin pelearle a la foto ni al título. */ opacity: .34; /* Un halo blanco muy suave detrás del logo. Desde que la portada es una foto a sangre, abajo y al centro puede caer cualquier cosa: en la sección de hombre cae el buzo negro del modelo, y ahí el logo gris apagado directamente desaparecía. El halo lo despega de lo oscuro sin que se note sobre lo claro, y evita tener que adivinar desde el CSS si la foto de turno es clara u oscura. */ filter: drop-shadow(0 0 7px rgba(255, 255, 255, .85)); /* No se puede tocar ni seleccionar: está apoyado encima de la foto y sin esto se comería clics que no le corresponden. */ pointer-events: none; user-select: none; } /* En el celular la foto es vertical y el texto ocupa toda la parte de abajo: la firma no entra sin encimarse con los botones. Se sube a la zona limpia de arriba, que en las fotos verticales es fondo del estudio. */ @media (max-width: 900px) { .hero-firma { top: calc(var(--alto-encabezado) + 18px); bottom: auto; width: 108px; opacity: .3; } } /* ====================================================================== SIN TEXTO, SIN VELO ====================================================================== En el celular, tienda.css le pone a .hero un velo blanco degradado (.hero::after) y acá arriba yo lo había reforzado hasta el 74% de la altura. Existía por una sola razón: que el título "miwok, en Chacabuco" se leyera sobre la parte oscura de la foto. Ese título ya no está: el hero es sólo la imagen. Un velo blanco tapando tres cuartos de la foto, sin nada que hacer legible, lo único que logra es lavarla justo en el celular, que es de donde entra casi toda la clientela. Se apaga. La firma de la marca y la flecha se leen solas: son chiquitas y están sobre el fondo del estudio, que es claro. ---------------------------------------------------------------------- */ @media (max-width: 900px) { .hero::after { display: none; } } /* Acá vivía el estilo de las zonas clickeables sobre cada modelo. Se sacó junto con el HTML: el apagado de la mitad de al lado, que servía para señalar cuál estaba activa, molestaba más de lo que ayudaba el atajo. La portada volvió a ser una imagen sola. */ /* La flecha de bajar sigue necesitando estar por encima de la foto. */ .hero-flecha { position: absolute; z-index: 3; }