/* ============================================================================ TOKENS DEL SITIO ============================================================================ POR QUE EXISTE ESTE ARCHIVO No trae diseño nuevo. Recoge los valores que el sitio YA usa y los deja en un solo lugar, porque estaban repartidos y contradiciendose entre si. Lo que se encontro al medirlo, contando declaraciones reales en _header.php, animaciones.css y tecnologia.css: SOMBRAS 13 declaraciones, 13 valores DISTINTOS. Ni dos iguales. Una sombra por componente, que es exactamente lo que hace que un sitio se vea "casi" profesional: nada esta mal, pero nada combina. DURACIONES 7 valores para el mismo gesto: .15s .18s .2s .28s .3s .35s .4s. Un boton respondia en 180ms y la tarjeta de al lado en 280ms. No se nota mirando; se nota usando. FOCO CERO reglas :focus-visible en todo el sitio. Quien navega con teclado no veia donde estaba parado. LA REGLA: nada nuevo se escribe con un valor suelto. Si hace falta una sombra o una duracion que no este aca, se agrega aca primero. NO se tocan la paleta ni las tipografias: --brand, --brand2 e --ink los define _header.php desde lo que el taller carga en el ERP, y siguen siendo la fuente de verdad. Esto se apoya en ellos. ========================================================================= */ :root { /* --- SOMBRAS: tres niveles, no trece -------------------------------- El criterio para agrupar fue la funcion, no el valor: 1 reposo algo que esta apoyado sobre la pagina 2 respuesta algo que reacciono a la accion del visitante 3 elevado algo que se levanto por encima del resto Los tres salen del cluster dominante de lo que ya habia: -2px, -10px y -16px de dispersion negativa respectivamente. */ --sombra-1: 0 2px 8px -2px rgba(15, 23, 42, .08); --sombra-2: 0 10px 24px -10px rgba(15, 23, 42, .18); --sombra-3: 0 18px 40px -16px rgba(15, 23, 42, .22); /* Variantes teñidas de marca. El sitio ya las usaba en botones y tarjetas -la sombra tomaba el color del boton en vez de ser gris-, y es un buen detalle: se conserva, pero con la misma escala de arriba. */ --sombra-marca-2: 0 10px 24px -10px color-mix(in srgb, var(--brand) 62%, transparent); --sombra-marca-3: 0 18px 40px -16px color-mix(in srgb, var(--brand) 55%, transparent); /* --- TIEMPOS: tres, no siete ---------------------------------------- Los tres que quedan son los que mas se repetian, redondeados: rapida confirmar un toque o un cambio de color base el gesto normal de respuesta suave algo que se mueve de lugar o cambia de tamaño Todo dentro de los 150-250ms que se piden para interaccion, salvo 'suave', que llega a 300 porque acompaña desplazamiento. */ --t-rapida: .15s; --t-base: .2s; --t-suave: .3s; /* Las dos curvas que el sitio ya usaba. Se les pone nombre para dejar de copiar cuatro numeros cada vez. */ --curva-salida: cubic-bezier(.22, .61, .36, 1); /* entra rapido, frena */ --curva-suave: cubic-bezier(.16, 1, .3, 1); /* la mas usada aca */ /* --- FOCO ------------------------------------------------------------ */ --foco-grosor: 3px; --foco-color: color-mix(in srgb, var(--brand) 45%, transparent); /* --- RADIOS: tres niveles, contados sobre el sitio real -------------- No se invento ninguno. Se contaron las clases de Tailwind que el sitio ya escribe, en todos los .php: rounded-lg 8px 95 usos <- DOMINANTE rounded-full pill 37 usos rounded-2xl 16px 31 usos rounded-xl 12px 27 usos Mas en CSS suelto: 12px (dos veces), 4px, 8px 8px, 999px, 50%. El dominante es 8px y por eso es la base. Los otros dos no son ruido: se usan de forma consistente para cosas mas grandes, asi que la escala que ya existia de hecho es 8 / 12 / 16, agrupada por tamano del elemento. Se le pone nombre y se deja de escribir el numero: 1 chico botones, badges, insignias, campos 8px 2 medio tarjetas de producto y de servicio 12px 3 grande banners, contenedores, paneles 16px El 4px que aparecia una vez -en el halo de foco- se sube a 6px para no tener un cuarto valor por un solo uso. */ --radio-1: 8px; --radio-2: 12px; --radio-3: 16px; --radio-pill: 999px; /* La imagen que ocupa el borde superior de una tarjeta lleva redondeadas SOLO las dos esquinas de arriba: redondear las cuatro deja dos muescas blancas donde la imagen se separa del cuerpo de la tarjeta. */ --radio-2-arriba: var(--radio-2) var(--radio-2) 0 0; } /* ============================================================================ EL FOCO VISIBLE — lo que faltaba en TODO el sitio ============================================================================ No habia una sola regla de foco. Quien se maneja con teclado -por costumbre, por una lesion, o porque esta usando el sitio con una mano mientras sostiene la laptop que va a dejar en el taller- recorria la pagina a ciegas. :focus-visible y no :focus, que es la diferencia importante: el navegador solo lo muestra cuando la navegacion es por teclado. Con el mouse no aparece nada, asi que el diseño no cambia para la mayoria. Va sobre todo lo que puede recibir foco, con el color de la marca. Se usa outline y no box-shadow para que sobreviva a los overflow:hidden que hay en las tarjetas del catalogo, donde una sombra de foco quedaria recortada. ========================================================================= */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: var(--foco-grosor) solid var(--foco-color); outline-offset: 2px; border-radius: 6px; } /* Sobre fondo de marca -la seccion de contacto, los botones solidos- un halo del mismo color no se ve. Ahi el foco va en blanco. */ .bg-brand a:focus-visible, .bg-brand button:focus-visible, [style*="background: var(--brand)"] a:focus-visible, [style*="background: var(--brand)"] button:focus-visible, .btn-brand:focus-visible, .wa-flotante:focus-visible, .tel-flotante:focus-visible { outline-color: rgba(255, 255, 255, .9); } /* El enlace de saltar al contenido ya se muestra solo al enfocarse: no necesita ademas el halo, seria decirlo dos veces. */ .saltar-al-contenido:focus-visible { outline: none; } /* ============================================================================ BARRA DE CONTACTO FIJA EN CELULAR ============================================================================ Las dos acciones que cierran una venta en este negocio -escribir por WhatsApp y llamar- estaban en dos botones flotantes redondos que aparecian recien pasada media pantalla y tapaban una esquina del contenido. Una barra al pie las pone SIEMPRE a mano, con el nombre de la accion escrito y no solo un icono. Reemplaza a los flotantes en celular: tener las dos cosas seria decir lo mismo dos veces y ocupar el doble de pantalla. El detalle que casi siempre se olvida: el padding-bottom del body. Sin el, la barra tapa el ultimo bloque de cada pagina -el pie, justo donde estan las direcciones- y en celular no hay forma de llegar a leerlo. env(safe-area-inset-bottom) es para el iPhone con la barra de gestos: sin eso, la franja del sistema se come la mitad de los botones. ========================================================================= */ .cta-movil { position: fixed; left: 0; right: 0; bottom: 0; z-index: 44; /* debajo del panel de la lista (60) */ display: grid; /* minmax(0,1fr) y no 1fr: con 1fr las columnas no bajan de su ancho minimo de contenido, y a 320px la barra medía 344 y desbordaba la pagina. */ grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 100vw; overflow: hidden; gap: 1px; background: #e2e8f0; padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -2px 12px -4px rgba(15, 23, 42, .18); } .cta-movil a { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 52px; font-weight: 600; font-size: 15px; color: #fff; transition: filter var(--t-base); } .cta-movil a:active { filter: brightness(.92); } /* El verde de WhatsApp de la marca (#25d366) con letra blanca da 1.98:1: es el peor contraste que habia en el sitio, en la barra que mas se toca. Se usa el verde oscurecido, que da 5.48:1 y sigue leyendose como WhatsApp por el icono y por la palabra. */ .cta-movil .cta-wa { background: var(--verde-wa); } .cta-movil .cta-tel { background: var(--brand-fondo); } /* El hueco para que la barra no tape el final de la pagina. */ @media (max-width: 639px) { body.con-cta-movil { padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px)); } } /* De sm en adelante la barra no existe y los flotantes vuelven a su lugar. */ @media (min-width: 640px) { .cta-movil { display: none; } } /* ============================================================================ EL HERO EN TELEFONOS DE PANTALLA BAJA ============================================================================ Medido a 320x568 —el iPhone SE y los Android economicos que todavia se usan en Puerto Cortes—: el hero medía 425px de 568, o sea el 75% de la pantalla. Descontando la cabecera (69px) y la barra fija de WhatsApp/Llamar (52px), de la banda de publicidad se asomaban 22px. Tecnicamente "se ve", pero 22px no se leen como un aviso: se leen como el borde de algo. La regla mira el ALTO, no el ancho. Un telefono de 414px de ancho y 896 de alto no necesita esto —ahi el hero ya ocupa el 42%—, y encogerlo seria apretar una pantalla que respira bien. Lo que hace falta apretar es la pantalla BAJA, y eso es exactamente lo que dice la consulta. Con esto el hero baja a ~358px (63%) y de la publicidad se asoman ~89px: se ve la banda de color, el titulo del aviso y se entiende que hay mas. ========================================================================= */ @media (max-width: 639px) and (max-height: 640px) { .hero-caja { padding-top: 1rem; padding-bottom: 1rem; } /* El titular sigue siendo lo mas grande de la pantalla, solo que a la escala que esa pantalla admite. */ .hero-caja h1 { font-size: 1.625rem; line-height: 1.15; margin-top: .5rem; } .hero-caja p { margin-top: .5rem; } /* Botones y tarjeta de catalogo: el aire entre bloques baja de 20 a 14px. */ .hero-caja [data-hero] > div, .hero-caja [data-hero] > a { margin-top: .875rem; } /* Y en pantalla baja el hero queda en titular + botones, nada mas. La franja de "10 items disponibles" se lleva 76px y dice lo mismo que el boton "Ver catalogo" que tiene justo encima. En una pantalla de 568px ese espacio vale mas mostrando el aviso del taller. En 375x812 y 414x896 la franja se conserva: ahi sobra alto. */ .hero-caja [data-hero] > a[href="tienda.php"] { display: none; } } /* ============================================================================ AREA TACTIL MINIMA ============================================================================ 44x44 es el minimo que pide Apple y 48 el de Material. Aca se aplica solo en pantallas tactiles -pointer:coarse-, porque en escritorio agrandar el area de un enlace de texto lo separaria del parrafo y se veria mal. Crece el AREA, no el dibujo: el icono se ve igual, el dedo acierta. */ @media (pointer: coarse) { .wa-flotante, .tel-flotante, .carousel-arrow, button[aria-label] { min-width: 44px; min-height: 44px; } } /* ============================================================================ ACORDEONES ============================================================================ Construidos sobre
/ nativos, no con JavaScript. Tres razones concretas: - funcionan sin JavaScript; - el navegador ya les da el comportamiento de teclado correcto (Enter y Espacio abren, el foco se ve) y el rol de accesibilidad correcto, que es justo lo que un acordeon hecho a mano suele olvidar; - el buscador lee el contenido aunque este cerrado, asi que las respuestas de las preguntas frecuentes se indexan igual. Se usan en las preguntas frecuentes y en el pie en celular. ========================================================================= */ .acordeon > summary { list-style: none; cursor: pointer; } /* La flechita gris que Safari y Chrome ponen por su cuenta: se quita para poner la propia, que sigue la direccion de apertura. */ .acordeon > summary::-webkit-details-marker { display: none; } .acordeon > summary::marker { content: ''; } .acordeon-titulo { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .875rem 1rem; /* 44px de alto minimo para el dedo. */ min-height: 44px; border-radius: var(--radio-2); transition: background-color var(--t-rapida); } .acordeon-titulo:hover { background: #f8fafc; } .acordeon[open] > .acordeon-titulo { border-radius: var(--radio-2) var(--radio-2) 0 0; } .acordeon-flecha { flex-shrink: 0; color: var(--brand-texto); transition: transform var(--t-base) var(--curva-salida); } .acordeon[open] .acordeon-flecha { transform: rotate(180deg); } @media (prefers-reduced-motion: reduce) { .acordeon-flecha { transition: none; } } /* ============================================================================ EL PIE, EN ACORDEONES SOLO EN CELULAR ============================================================================ El pie tiene cuatro grupos de enlaces. En una pantalla de 375px eso son cuatro pantallazos de desplazamiento hasta llegar a la direccion del taller, que es lo que la gente baja a buscar. Colapsados, el pie entero entra en una pantalla. De sm en adelante se abren todos y se ven como columnas, igual que hoy: el `open` lo pone el marcado y aca se anula el comportamiento de acordeon. ========================================================================= */ @media (min-width: 640px) { .pie-grupo > summary { cursor: default; pointer-events: none; /* no se puede cerrar en escritorio */ padding-left: 0; padding-right: 0; } .pie-grupo > summary:hover { background: transparent; } .pie-grupo .acordeon-flecha { display: none; } /* Aunque el
este cerrado, en escritorio el contenido se muestra. */ .pie-grupo > .pie-contenido { display: block !important; } } /* Carrusel de publicidad: radio de contenedor grande, igual que los otros carruseles. overflow:hidden recorta la imagen, el overlay y el degradado de las flechas por la esquina. */ .promo-marco { border-radius: var(--radio-3); /* Sombra 2 y no 1: sobre la bandeja tenida, la sombra suave no se veia y la tarjeta parecia pegada al fondo. */ box-shadow: var(--sombra-2); } .promo-marco img, .promo-marco picture { border-radius: inherit; } /* Los puntos y el boton de pausa quedaban sobre la esquina redondeada: se corren adentro. */ .promo-marco .absolute.bottom-0, .promo-marco [class*="bottom-2"] { margin-bottom: 2px; } /* Los puntos del banner NO entran en la regla de 44px de arriba: son de 6px y con doce avisos, 12x44 = 528px, que desbordaba la pantalla a 320px. El area tactil se agranda con un pseudo-elemento, sin agrandar el dibujo. */ /* Va sin (pointer: coarse): en un portatil con pantalla tactil el puntero se declara fino y el dedo igual falla. El area invisible no le cuesta nada al mouse y le salva el toque al dedo. */ button.promo-punto, button.carr-punto { min-width: 0; min-height: 0; position: relative; } /* 24x24 es el minimo de WCAG 2.5.8. El punto dibujado mide 8px; el resto lo pone este pseudo-elemento invisible, y la separacion de 18px entre puntos evita que dos areas se pisen -que es el otro motivo por el que axe falla-. */ button.promo-punto::after { content: ''; position: absolute; inset: -8px; } /* El punto del carrusel mide 6px de alto, no 8: necesita 9 de cada lado. */ button.carr-punto::after { content: ''; position: absolute; inset: -9px; } /* Con los puntos pegados, dos areas de 24px se pisan y axe lo cuenta como separacion insuficiente. Este es el hueco minimo para que no se toquen. */ [data-carr-puntos] { gap: 18px !important; } /* El boton de pausa va al lado de los puntos: sin esto su area se solapa con la del ultimo punto y el toque cae en el equivocado. */ .promo-pausa { position: relative; margin-left: 10px; } /* ============================================================================ EL AVISO EN CELULAR ES UNA TARJETA, NO UNA TIRA ============================================================================ Una pieza de 1920x400 (4.8:1) a 320px de ancho mide 67px de alto: el texto que trae dentro no se lee por mas que se agrande al disenarla, y los controles la tapan entera. Practica actual para publicidad en movil: proporcion cercana a 1.91:1 y el texto como HTML con contraste real, no incrustado en la imagen. ========================================================================= */ .promo-marco.promo-con-imagen { aspect-ratio: auto; } .promo-img { aspect-ratio: 1.91 / 1; object-fit: cover; } .promo-pie { background: #fff; } /* El area de los slides deja de ser absoluta en celular: la tarjeta crece con su contenido. */ @media (max-width: 639px) { .promo-marco .absolute.inset-0 { position: static; } .promo-marco .promo-slide { display: block; } /* Flechas y barra de progreso fuera: cubrian el aviso completo. */ .promo-marco [aria-label="Anterior"], .promo-marco [aria-label="Siguiente"], .promo-progreso { display: none !important; } /* Los puntos van DEBAJO de la tarjeta, no encima del aviso. */ .promo-puntos { position: static !important; margin-top: .5rem; } /* Debajo de la tarjeta el fondo es blanco: los puntos claros con sombra dejan de servir y pasan a color de marca. */ .promo-puntos .promo-punto { background: color-mix(in srgb, var(--brand) 28%, #fff); box-shadow: none; } .promo-puntos .promo-punto-on { background: var(--brand); } .promo-pausa { color: var(--brand-texto); opacity: 1; text-shadow: none; } /* El slide deja de ser absoluto, asi que h-full se resuelve a cero. */ .promo-slide, .promo-slide picture { height: auto; } } @media (min-width: 640px) { .promo-marco.promo-con-imagen { aspect-ratio: 1920 / 400; max-height: 380px; } .promo-img { aspect-ratio: auto; height: 100%; } } /* ============================================================================ CONTROLES DISCRETOS EN LOS CARRUSELES ============================================================================ El aviso es lo que se vende; el control es herramienta. Antes las flechas iban sobre dos bandas negras y los puntos dentro de una pastilla oscura: se leian antes que la publicidad. Ahora aparecen al acercar el mouse y quedan fijos al llegar por teclado. Nunca se ocultan con display:none ni se sacan del orden de foco. ========================================================================= */ .promo-flecha { opacity: 0; transition: opacity var(--t-base, .2s); } .promo-marco:hover .promo-flecha, .promo-marco:focus-within .promo-flecha { opacity: 1; } .promo-flecha:focus-visible { opacity: 1; } .promo-flecha-cir { background: rgba(255, 255, 255, .92); color: #0f172a; box-shadow: 0 1px 6px rgba(0, 0, 0, .18); } .promo-flecha:hover .promo-flecha-cir { background: #fff; } /* Los puntos se leen sobre cualquier arte por la sombra, sin pastilla. */ .promo-punto { background: rgba(255, 255, 255, .65); box-shadow: 0 0 3px rgba(0, 0, 0, .45); } .promo-punto:hover { background: #fff; } .promo-punto-on { background: #fff; } .promo-pausa { color: #fff; opacity: .7; text-shadow: 0 0 3px rgba(0, 0, 0, .6); } .promo-pausa:hover { opacity: 1; background: rgba(255, 255, 255, .2); } .promo-progreso { opacity: .55; } /* Mismo criterio en los carruseles de servicios y productos. */ .carousel-arrow { background: transparent; border-color: color-mix(in srgb, var(--brand) 22%, #fff); color: #64748b; } .carousel-arrow:hover:not([disabled]) { background: color-mix(in srgb, var(--brand) 8%, #fff); border-color: var(--brand); color: var(--brand-texto); } /* ============================================================================ EL CAMBIO DE AVISO: FUNDIDO CRUZADO, NO EMPUJON ============================================================================ El deslizamiento anterior movia el aviso 40px hacia el costado en 450ms. Con piezas de 1120px de ancho eso se lee como un tiron, no como un cambio. Ahora el que sale se desvanece mientras el que entra aparece encima con un acercamiento de 1.5%: los dos se superponen a proposito, que es lo que hace que se sienta continuo. La curva es la de salida suave -arranca rapido y frena largo-, que es como se mueve algo con peso. La entrada dura mas que la salida porque lo que llega es lo que importa. ========================================================================= */ .promo-tr { transition-property: opacity, transform; will-change: opacity, transform; } .promo-tr-ent { transition-duration: 900ms; transition-timing-function: cubic-bezier(.16, 1, .3, 1); } .promo-tr-sal { transition-duration: 600ms; transition-timing-function: cubic-bezier(.33, 0, .67, 1); } .promo-ent-ini { opacity: 0; transform: scale(1.015); } .promo-fin { opacity: 1; transform: scale(1); } .promo-sal-fin { opacity: 0; transform: scale(.995); } /* El que se va queda debajo del que llega: si no, durante el cruce se ve el viejo encima y parece que el nuevo entra por detras. */ .promo-capa { z-index: 1; } .promo-capa.promo-tr-sal { z-index: 0; } @media (prefers-reduced-motion: reduce) { .promo-tr-ent, .promo-tr-sal { transition-duration: 250ms; } .promo-ent-ini, .promo-sal-fin { transform: none; } } /* En celular los slides estan en el flujo, no absolutos: apilados en la misma celda de una grilla se pueden cruzar sin que la tarjeta salte de alto. */ @media (max-width: 639px) { .promo-pila { display: grid; } .promo-pila > .promo-capa { grid-area: 1 / 1; position: static; } } /* ============================================================================ LOS ENLACES DEL PIE SE PODIAN VER, PERO NO TOCAR ============================================================================ Medido a 375px: 17px de alto. WCAG 2.5.8 pide 24. Son enlaces apilados en listas -no enlaces dentro de una frase-, asi que no les aplica la excepcion de contenido en linea. Se agranda el AREA, no la letra: el pie se ve igual, cambia lo que responde al dedo. Y los que ya llegan a 24 no se tocan, para no separar las listas. ========================================================================= */ footer a { display: inline-flex; align-items: center; min-height: 24px; /* El espacio entre el icono y el texto era un nodo de texto suelto, y en un contenedor flex esos nodos se descartan: el telefono quedaba pegado a su icono. El hueco tiene que declararse. Los enlaces que ya traen gap-1.5 de Tailwind ganan por especificidad y conservan el suyo. */ gap: .35em; } /* Los iconos de redes son cuadrados y chicos: ahi si hace falta el ancho. */ footer a[aria-label] { min-width: 24px; justify-content: center; }