/* ============================================================================ MOVIMIENTO DEL SITIO ============================================================================ El sitio se veia plano: todo aparecia de golpe al cargar, los numeros eran texto muerto y casi nada respondia al mouse. Esto le agrega vida sin tocar el diseno: mismos colores, mismo espaciado, mismas cajas. DOS REGLAS QUE NO SE NEGOCIAN ----------------------------- 1. SI EL JAVASCRIPT NO CORRE, EL SITIO SE VE COMPLETO. Es el error clasico de estas animaciones: se pone opacity:0 en el CSS y se sube a 1 desde JS. Si el JS falla —un error en otro script, un navegador viejo, un bloqueador— la pagina queda EN BLANCO con todo el contenido invisible. Aca nada arranca invisible por CSS solo. Todo lo que se oculta cuelga de .js-anim, una clase que un script en linea le pone al antes de pintar. Sin JS no hay clase, sin clase no hay ocultamiento, y el sitio se ve como siempre: quieto, pero entero. 2. QUIEN PIDIO MENOS MOVIMIENTO NO VE NADA DE ESTO. prefers-reduced-motion no es una preferencia estetica: hay gente a la que el movimiento en pantalla le produce mareo o migrana. Al final del archivo se apaga todo de una sola vez. ============================================================================ */ /* --------------------------------------------------------------------------- 1. APARECER AL HACER SCROLL Cada bloque entra cuando llega a la pantalla, no todos juntos al cargar. 30px y 420ms. Los numeros salen de la guia de Nielsen Norman: hasta 500ms para un movimiento con varias propiedades, y desplazamientos cortos. Con 700ms —como estaba— la entrada se siente como una espera; con 42px de recorrido la pagina parece que salta en vez de respirar. El desenfoque es lo que convierte la entrada en "enfocando" en vez de "apareciendo": para un negocio de tecnologia, esa lectura vale mas que cualquier efecto agregado encima. --------------------------------------------------------------------------- */ .js-anim [data-reveal] { opacity: 0; transform: translateY(30px) scale(.97); filter: blur(4px); transition: opacity .42s cubic-bezier(.16,1,.3,1), transform .46s cubic-bezier(.16,1,.3,1), filter .42s cubic-bezier(.16,1,.3,1); } .js-anim [data-reveal].visible { opacity: 1; transform: none; filter: none; } /* --- La version nativa, sin JavaScript ------------------------------------ animation-timeline: view() hace que el navegador ate la animacion a la posicion del elemento en la pantalla. No hay listener de scroll, no hay IntersectionObserver, no pasa por el hilo principal: lo maneja el compositor, igual que el desplazamiento. Por que importa aca: la mayoria de los clientes del taller entra desde un celular de gama baja. Con JavaScript, cada animacion compite con el resto del hilo principal y el scroll se siente pegajoso; con timeline nativo no, porque va por otro carril. @supports lo hace opcional: donde no exista, no se aplica nada de este bloque y sigue funcionando el camino con IntersectionObserver de arriba. Soporte hoy: Chrome/Edge 115+, Safari 18+, Firefox 132+. EL RANGO ES LO QUE DEFINE EL CARACTER Hay dos formas de usarlo y aca se usan las dos, segun para que: - "entry X cover Y" con Y chico: el bloque aparece y se queda quieto. Sirve para lo que hay que LEER, porque termina de moverse antes de que la vista llegue ahi. - "entry X cover 100%": el bloque aparece y despues sigue derivando muy despacio todo el tiempo que esta a la vista. Sirve para TARJETAS, que es lo que hace que la pagina se sienta viva al desplazarse en vez de dar un salto y quedarse muerta. La deriva total es de 30px repartidos en una pantalla entera: cuadro a cuadro es imperceptible, como sensacion se nota. Eso es lo que se pidio con "que se muevan de a poco, que no sea brusco". */ @supports (animation-timeline: view()) { /* Bloques sueltos: entran y derivan apenas. Son cajas grandes, y ahi un desplazamiento marcado se lee como que el diseno se desarma. */ .js-anim [data-reveal] { transition: none; animation: entrar-y-derivar-suave linear both; animation-timeline: view(); animation-range: entry 8% cover 100%; } /* Las variantes laterales NO derivan: se usan en secciones de dos columnas, y si las dos mitades se movieran cada una por su lado el bloque se veria desalineado todo el tiempo. Entran y se quedan. */ .js-anim [data-reveal="izq"] { animation-name: revelar-izq; animation-range: entry 8% cover 32%; } .js-anim [data-reveal="der"] { animation-name: revelar-der; animation-range: entry 8% cover 32%; } .js-anim [data-reveal="zoom"] { animation-name: revelar-zoom; animation-range: entry 8% cover 32%; } /* En telefono tampoco por el camino nativo: los keyframes laterales desplazan 38px igual que la version con transiciones, y desbordarian lo mismo. Vuelven a la entrada vertical. */ @media (max-width: 767px) { .js-anim [data-reveal="izq"], .js-anim [data-reveal="der"] { animation-name: entrar-y-derivar-suave; } } /* Grillas de tarjetas: cada hija tiene su propio timeline, asi que entra cuando le toca por su posicion real en la pantalla. Sale mas natural que el retraso fijo del camino con JS, donde la ultima de una fila larga espera su turno aunque ya este a la vista. Todo va en UNA animacion a proposito: dos animaciones distintas tocando transform en el mismo elemento se pisan —gana la ultima declarada— y la entrada se perderia. */ .js-anim [data-reveal-hijos] > * { transition: none; transition-delay: 0s; animation: entrar-y-derivar linear both; animation-timeline: view(); animation-range: entry 4% cover 100%; } /* Tres profundidades alternadas: las tarjetas no se mueven todas juntas como un bloque rigido, se separan unos pocos pixeles entre si. Es lo que da sensacion de capas sin que ninguna se vaya de lugar. */ .js-anim [data-reveal-hijos] > *:nth-child(3n+2) { animation-name: entrar-y-derivar-medio; } .js-anim [data-reveal-hijos] > *:nth-child(3n+3) { animation-name: entrar-y-derivar-hondo; } } @keyframes entrar-y-derivar { 0% { opacity: 0; transform: translateY(28px) scale(.96); filter: blur(3px); } 20% { opacity: 1; transform: translateY(11px) scale(1); filter: blur(0); } 100% { opacity: 1; transform: translateY(-13px) scale(1); filter: blur(0); } } @keyframes entrar-y-derivar-medio { 0% { opacity: 0; transform: translateY(28px) scale(.96); filter: blur(3px); } 20% { opacity: 1; transform: translateY(17px) scale(1); filter: blur(0); } 100% { opacity: 1; transform: translateY(-19px) scale(1); filter: blur(0); } } @keyframes entrar-y-derivar-hondo { 0% { opacity: 0; transform: translateY(28px) scale(.96); filter: blur(3px); } 20% { opacity: 1; transform: translateY(23px) scale(1); filter: blur(0); } 100% { opacity: 1; transform: translateY(-25px) scale(1); filter: blur(0); } } @keyframes entrar-y-derivar-suave { 0% { opacity: 0; transform: translateY(30px) scale(.97); filter: blur(4px); } 24% { opacity: 1; transform: translateY(8px) scale(1); filter: blur(0); } 100% { opacity: 1; transform: translateY(-8px) scale(1); filter: blur(0); } } /* El desenfoque es lo que hace que la entrada se lea como "enfocando" y no como "apareciendo". Es la diferencia entre un sitio que se mueve y uno que parece un equipo renderizando lo que muestra. ("revelar" a secas ya no existe: lo reemplazo entrar-y-derivar-suave, que hace lo mismo y ademas sigue moviendose mientras el bloque esta a la vista. Quedaba definido y sin invocar.) */ @keyframes revelar-izq { from { opacity: 0; transform: translateX(-38px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } } @keyframes revelar-der { from { opacity: 0; transform: translateX(38px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } } @keyframes revelar-zoom { from { opacity: 0; transform: scale(.94); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } } /* Variantes: para lo que entra desde un costado en las secciones a dos columnas, donde subir se ve raro porque el bloque de al lado no se mueve. La regla .visible que las devuelve a su lugar ya esta declarada arriba y vale para todas: repetirla aca solo agregaba una linea que se puede olvidar de actualizar. */ .js-anim [data-reveal="izq"] { transform: translateX(-38px); } .js-anim [data-reveal="der"] { transform: translateX(38px); } .js-anim [data-reveal="zoom"] { transform: scale(.94); } /* EN TELEFONO NO SE ENTRA DE COSTADO. Dos motivos, y los dos importan: 1. Mientras dura la animacion el bloque sobresale 38px del borde. En una pantalla angosta eso deja correr la pagina de lado y aparece una franja en blanco a la derecha: el diseno entero se ve descuadrado. 2. Entrar desde un costado tiene sentido cuando hay DOS columnas y cada una llega de su lado. En telefono esas columnas quedan una debajo de la otra, asi que el movimiento lateral no explica nada; solo empuja. Se resuelve en la causa y no tapandolo con overflow:hidden en el body, que ademas rompe el encabezado pegajoso en varios navegadores. */ @media (max-width: 767px) { .js-anim [data-reveal="izq"], .js-anim [data-reveal="der"] { transform: translateY(30px) scale(.97); } } /* Escalonado: los hijos entran uno detras del otro en vez de en bloque. El retraso lo pone el JS en --i; el maximo de 8 evita que la ultima tarjeta de una grilla larga tarde tres segundos en aparecer. */ .js-anim [data-reveal-hijos] > * { opacity: 0; transform: translateY(28px) scale(.96); filter: blur(3px); transition: opacity var(--t-suave) cubic-bezier(.16,1,.3,1), transform .44s cubic-bezier(.16,1,.3,1), filter .4s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--i, 0) * 55ms); } .js-anim [data-reveal-hijos].visible > * { opacity: 1; transform: none; filter: none; } /* --------------------------------------------------------------------------- 2. LA PORTADA AL ENTRAR Lo primero que ve el visitante. Entra en orden de lectura —insignia, titulo, texto, botones, sellos— para que la vista siga el camino en vez de tener que elegir por donde empezar. --------------------------------------------------------------------------- */ .js-anim [data-hero] > * { opacity: 0; transform: translateY(20px); animation: entrada .7s cubic-bezier(.22,.61,.36,1) forwards; } .js-anim [data-hero] > *:nth-child(1) { animation-delay: .05s; } .js-anim [data-hero] > *:nth-child(2) { animation-delay: .14s; } .js-anim [data-hero] > *:nth-child(3) { animation-delay: .23s; } .js-anim [data-hero] > *:nth-child(4) { animation-delay: .32s; } .js-anim [data-hero] > *:nth-child(5) { animation-delay: .41s; } @keyframes entrada { to { opacity: 1; transform: none; } } /* La tarjeta del catalogo entra desde la derecha, un poco despues. */ .js-anim [data-hero-tarjeta] { opacity: 0; transform: translateY(26px) scale(.97); animation: entrada .8s cubic-bezier(.22,.61,.36,1) .3s forwards; } /* Flotacion permanente de la tarjeta y del globo de servicios. Cuatro pixeles y seis segundos: se nota que esta vivo, no distrae. */ .flota { animation: flotar 6s ease-in-out infinite; } .flota-lento{ animation: flotar 8s ease-in-out 1s infinite; } @keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } /* Manchas de color que se mueven despacio detras de la portada. Es lo que rompe la sensacion de fondo pintado. */ .mancha { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; opacity: .5; } .mancha-1 { width: 380px; height: 380px; top: -110px; right: -80px; background: color-mix(in srgb, var(--brand) 30%, transparent); animation: deriva 18s ease-in-out infinite; } .mancha-2 { width: 300px; height: 300px; bottom: -130px; left: -70px; background: color-mix(in srgb, var(--brand2) 26%, transparent); animation: deriva 22s ease-in-out 3s infinite reverse; } @keyframes deriva { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(26px, -18px) scale(1.07); } 66% { transform: translate(-18px, 22px) scale(.95); } } /* --------------------------------------------------------------------------- 3. LAS TARJETAS RESPONDEN AL MOUSE card-hover ya existia pero levantaba 2px, que no se percibe. Ahora la tarjeta sube, la sombra se abre y el borde toma el color de la marca: se entiende que es cliqueable antes de leerla. --------------------------------------------------------------------------- */ .card-hover { transition: transform var(--t-suave) cubic-bezier(.22,.61,.36,1), box-shadow .28s, border-color .28s; } .card-hover:hover { transform: translateY(-6px); box-shadow: var(--sombra-3); border-color: var(--brand); } /* Aca habia un zoom al pasar el mouse sobre la foto del servicio. Se reemplazo por el zoom atado al scroll (zoom-scroll, en tecnologia.css) porque el hover no existe en celular, y de ahi viene la mayoria de las visitas: era un efecto que casi nadie iba a ver. Ademas los dos peleaban: una animacion y una transicion sobre transform en el mismo elemento no se suman, gana la animacion y la otra no hace nada. */ /* La flecha de "ver mas" se corre al pasar el mouse: es la senal mas barata de que el enlace lleva a algun lado. */ .flecha-corre i, .flecha-corre .bi { transition: transform var(--t-suave); display: inline-block; } .flecha-corre:hover i, .flecha-corre:hover .bi { transform: translateX(4px); } /* --------------------------------------------------------------------------- 4. LOS BOTONES Un brillo que cruza el boton al pasar el mouse, y hundimiento al hacer clic. El hundimiento importa mas de lo que parece: en celular es la unica confirmacion de que el toque se registro. --------------------------------------------------------------------------- */ .btn-brand, .btn-lustre { position: relative; overflow: hidden; transition: transform var(--t-base), box-shadow var(--t-suave), filter var(--t-base); } .btn-brand::after, .btn-lustre::after { content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 100%); transform: skewX(-20deg); transition: left .55s ease; pointer-events: none; } .btn-brand:hover::after, .btn-lustre:hover::after { left: 125%; } .btn-brand:hover { transform: translateY(-2px); box-shadow: var(--sombra-marca-2); } .btn-brand:active { transform: translateY(0) scale(.985); } /* Enlaces con subrayado que crece desde la izquierda. */ .sub-crece { position: relative; display: inline-block; } .sub-crece::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--t-suave) cubic-bezier(.22,.61,.36,1); } .sub-crece:hover::after { transform: scaleX(1); } /* --------------------------------------------------------------------------- 5. LOS PASOS DE "COMO TRABAJAMOS" Una linea punteada los une, para que se lean como un recorrido y no como cuatro cajas sueltas. En celular la linea desaparece: ahi los pasos van uno debajo del otro y una linea horizontal no significa nada. --------------------------------------------------------------------------- */ .pasos-linea { position: relative; } @media (min-width: 768px) { .pasos-linea::before { content: ''; position: absolute; top: 28px; left: 12%; right: 12%; height: 2px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--brand) 40%, transparent) 0 8px, transparent 8px 16px); z-index: 0; } } .paso-circulo { position: relative; z-index: 1; transition: transform var(--t-suave) cubic-bezier(.34,1.56,.64,1), box-shadow var(--t-suave); } .paso:hover .paso-circulo { transform: scale(1.14) rotate(-6deg); box-shadow: var(--sombra-marca-2); } /* Pulso en el circulo del paso que esta a la vista: guia el ojo. */ .paso-circulo::before { content: ''; position: absolute; inset: -6px; border-radius: 999px; border: 2px solid color-mix(in srgb, var(--brand) 45%, transparent); opacity: 0; transition: opacity var(--t-suave); } .paso:hover .paso-circulo::before { opacity: 1; animation: pulso 1.6s ease-out infinite; } @keyframes pulso { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.35); opacity: 0; } } /* --------------------------------------------------------------------------- 6. LAS MARCAS Entran en gris y toman su color al pasar el mouse. Asi la fila no compite con el resto de la pagina, pero deja de ser una tira de texto plano. --------------------------------------------------------------------------- */ /* SIN ANIMACION Y SIN ASPECTO DE BOTON. Tenian grayscale + opacity + translateY(-4px) + scale(1.04) + sombra al pasar el mouse, sobre una tarjeta blanca con borde y sombra. El resultado era una grilla de doce botones que se levantaban al tocarlos, y el visitante los leia como acciones -"si aprieto HP, algo pasa"- cuando lo unico que dicen es con que marcas trabaja el taller. Ahora son texto: gris, y al pasar el mouse se oscurece. Nada se mueve. La opacidad tambien se fue, por dos motivos. Atenuar al reposo y aclarar al pasar el mouse es el gesto de un boton, que es justo lo que se queria sacar. Y rompia el contraste sin que se notara: el color declarado pasa AA, pero al 75% sobre slate-50 el que se veia de verdad era #3e93b7 -3.31:1-. El tono ya sale oscurecido lo justo desde color_legible(). */ .marca-chip { transition: color var(--t-base); } /* --------------------------------------------------------------------------- 7. LOS NUMEROS QUE CUENTAN El valor final ya esta escrito en el HTML: el JS lo lee, arranca desde cero y sube. Si el JS no corre, el numero final es lo que se ve, que es justamente lo que tiene que verse. --------------------------------------------------------------------------- */ .contador { font-variant-numeric: tabular-nums; } /* --------------------------------------------------------------------------- 8. LA CABECERA AL BAJAR Se compacta y gana sombra cuando la pagina se desplaza. Da la sensacion de que la barra flota sobre el contenido en vez de estar pegada encima. --------------------------------------------------------------------------- */ header.sticky { transition: box-shadow var(--t-suave), background-color var(--t-suave), padding var(--t-suave); } header.sticky.bajando { box-shadow: var(--sombra-1); background: rgba(255,255,255,.92); backdrop-filter: blur(10px); } /* --------------------------------------------------------------------------- 9. TESTIMONIOS Una comilla grande de fondo y las estrellas que aparecen una por una. --------------------------------------------------------------------------- */ .testimonio { position: relative; overflow: hidden; } .testimonio::before { content: '\201C'; position: absolute; top: -26px; right: 10px; font-size: 110px; line-height: 1; color: color-mix(in srgb, var(--brand) 10%, transparent); font-family: Georgia, serif; pointer-events: none; transition: transform var(--t-suave), color var(--t-suave); } .testimonio:hover::before { transform: scale(1.12) rotate(-5deg); color: color-mix(in srgb, var(--brand) 18%, transparent); } .js-anim .visible .estrella { animation: estrella-entra .4s cubic-bezier(.34,1.56,.64,1) backwards; } @keyframes estrella-entra { from { opacity: 0; transform: scale(0) rotate(-45deg); } to { opacity: 1; transform: none; } } /* --------------------------------------------------------------------------- 10. BOTON FLOTANTE DE WHATSAPP Aparece despues de bajar un poco: arriba del todo estorba, porque ahi el visitante todavia no sabe si quiere escribir. --------------------------------------------------------------------------- */ .wa-flotante { position: fixed; right: 18px; bottom: 18px; z-index: 45; width: 56px; height: 56px; border-radius: 999px; display: grid; place-items: center; background: #25d366; color: #fff; font-size: 28px; box-shadow: 0 10px 26px -8px rgba(37,211,102,.6); opacity: 0; transform: translateY(20px) scale(.8); pointer-events: none; transition: opacity var(--t-suave), transform var(--t-suave) cubic-bezier(.34,1.56,.64,1); } .wa-flotante.visible { opacity: 1; transform: none; pointer-events: auto; } .wa-flotante:hover { transform: scale(1.08); } /* El boton de llamar, arriba del de WhatsApp y solo en celular. Mismo tamano y misma logica de aparicion: son dos formas de lo mismo, y si uno se viera distinto del otro pareceria que uno es menos importante. */ .tel-flotante { position: fixed; right: 18px; bottom: 84px; z-index: 45; width: 56px; height: 56px; border-radius: 999px; display: grid; place-items: center; background: var(--brand); color: #fff; font-size: 24px; box-shadow: var(--sombra-marca-2); opacity: 0; transform: translateY(20px) scale(.8); pointer-events: none; transition: opacity var(--t-suave), transform var(--t-suave) cubic-bezier(.34,1.56,.64,1); } .tel-flotante.visible { opacity: 1; transform: none; pointer-events: auto; } .tel-flotante:active { transform: scale(.94); } .wa-flotante::before { content: ''; position: absolute; inset: 0; border-radius: 999px; border: 2px solid #25d366; animation: pulso 2.2s ease-out infinite; } /* --------------------------------------------------------------------------- 11. LA SECCION DE CONTACTO Las tres tarjetas —WhatsApp, telefono, correo— se levantan y el icono crece. Son el objetivo de toda la pagina; que reaccionen importa. --------------------------------------------------------------------------- */ .contacto-tarjeta { transition: transform var(--t-suave) cubic-bezier(.22,.61,.36,1), background-color var(--t-suave); } .contacto-tarjeta:hover { transform: translateY(-6px); } .contacto-tarjeta i { transition: transform var(--t-suave) cubic-bezier(.34,1.56,.64,1); } .contacto-tarjeta:hover i { transform: scale(1.18) translateY(-2px); } /* --------------------------------------------------------------------------- 12. APAGADO TOTAL Va al final para ganarle a todo lo de arriba. No se atenua el movimiento: se elimina. A quien le produce mareo, media animacion le sigue produciendo mareo. --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .js-anim [data-reveal], .js-anim [data-reveal-hijos] > *, .js-anim [data-hero] > *, .js-anim [data-hero-tarjeta] { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; } .flota, .flota-lento, .mancha-1, .mancha-2, .paso-circulo::before, .wa-flotante::before, .js-anim .visible .estrella { animation: none !important; } .mancha { opacity: .35; } /* Los DOS botones de contacto se ven igual. Al agregar el de llamar me olvide de sumarlo aca y quedaba invisible para quien pidio menos movimiento: un enlace para llamar al taller no puede depender de una animacion. Lo cazo el test que exige que nada quede oculto fuera del interruptor. */ .wa-flotante, .tel-flotante { opacity: 1; transform: none; pointer-events: auto; } .card-hover, .btn-brand, .contacto-tarjeta, .marca-chip, .paso-circulo, .testimonio::before { transition: none !important; } .card-hover:hover, .btn-brand:hover, .contacto-tarjeta:hover, .marca-chip:hover, .paso:hover .paso-circulo { transform: none !important; } }