/* ====================================================================== 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.jpg"); /* térmica negra, la que ya estaba */ --foto-2: url("/img/hero-2.jpg"); /* buzo Oleva, tejido color ladrillo */ --foto-3: url("/img/hero-3.jpg"); /* buzo Narux, rompeviento verde */ } .hero.hero-hombre { --foto-1: url("/img/hero-hombre.jpg"); /* buzo Tolne, canguro negro (el que ya estaba) */ --foto-2: url("/img/hero-hombre-2.jpg"); /* campera Holster Up, matelaseada */ --foto-3: url("/img/hero-hombre-3.jpg"); /* buzo Cave, micropolar 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.jpg"); --foto-2: url("/img/hero-2-movil.jpg"); --foto-3: url("/img/hero-3-movil.jpg"); } .hero.hero-hombre { --foto-1: url("/img/hero-hombre-movil.jpg"); --foto-2: url("/img/hero-hombre-2-movil.jpg"); --foto-3: url("/img/hero-hombre-3-movil.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. En escritorio la persona está a la derecha de una foto muy ancha; en el celular la foto es vertical y lo que importa es la cara, que está arriba. Las dos capas usan el mismo valor para que al cruzarse no se corra ni un píxel. */ --hero-encuadre: 72% center; /* Desde dónde "empuja" el zoom de la foto que entra. Se ancla sobre la persona para que la figura quede quieta y lo único que se mueva sea el aire de alrededor: así el título nunca baila. */ --hero-anclaje: right 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 se encuadra por la cara, que está arriba. */ --hero-encuadre: center 12%; /* Y el zoom se ancla ahí mismo: la cara queda clavada y el movimiento se lo come el fondo. */ --hero-anclaje: center 12%; } /* 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; } /* ====================================================================== EL LOGO DE MIWOK EN LA PORTADA ====================================================================== */ /* --- Dentro del título ------------------------------------------------- La palabra "Miwok" del

es el logo de la marca, no texto. Para que conviva con la coma y el renglón de abajo tiene que comportarse como si fuera una palabra más. -------------------------------------------------------------------- */ .hero-marca { /* ESTA LÍNEA ES LA QUE HACE QUE FUNCIONE, y cuesta encontrarla: tienda.css tiene una regla general "img { display: block }" —cómoda para las fotos, que casi siempre van solas— y block significa "ocupo mi propio renglón". Con eso, el logo empujaba la coma al renglón de abajo y el título se leía como tres pedazos sueltos. Acá el logo hace de PALABRA adentro de una frase, así que tiene que comportarse como una: inline-block se ubica en el renglón como una letra, pero sigue aceptando alto y ancho. Es un buen ejemplo de por qué las reglas generales sobre etiquetas (img, a, p) se pagan después: hay que acordarse de destaparlas. */ display: inline-block; /* La medida va en "em", o sea EN PROPORCIÓN al tamaño del título. Como el título usa clamp() y crece con la pantalla, el logo lo sigue solo: no hay que escribir un tamaño por cada tamaño de pantalla, y nunca se puede desfasar. 0.58em y no más: el logo es mucho más ancho que alto (30 por 6,3, o sea casi cinco veces), así que un alto que en una letra parecería normal lo convierte en una barra que se come el renglón entero. */ height: .58em; width: auto; /* Sin esto el logo se apoya en la línea de base como una letra con cola (la "p" de "papá") y queda flotando arriba de la coma. Los -0.02em lo terminan de sentar. */ vertical-align: -.02em; /* Que la coma que va pegada no se vaya sola al renglón siguiente. */ margin-right: .02em; } /* --- 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; /* 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; } }