/** * MENÚ MÓVIL — cajón lateral * ========================================================================== * Sustituye la navegación handheld de Storefront por debajo del punto de * quiebre. Arriba de ese ancho este archivo no pinta absolutamente nada: * todo lo visible vive dentro de la media query de abajo. * * NO TOCA header-custom.css, y header-custom.css no debe tocar esto. * Regla 5 del PRD: todo el CSS del header de escritorio vive allá; el menú * móvil es un componente aparte con su propio archivo. * * --------------------------------------------------------------------------- * SOBRE EL 768 ESCRITO A MANO * * La fuente de verdad del punto de quiebre es * Mitienda_Menu_Movil::PUNTO_QUIEBRE (inc/class-mitienda-menu-movil.php). * De ahí sale --mm-punto-quiebre (inyectada con wp_add_inline_style) y de * ahí lo lee el JS. * * Las media queries NO aceptan var(): `@media (max-width: var(--x))` no es * válido y el navegador descarta el bloque entero sin avisar. Así que el * número se escribe literal acá, y SOLO acá. Si se mueve el breakpoint hay * que cambiar la constante de PHP y estas dos media queries a la vez. * * --------------------------------------------------------------------------- * SOBRE LOS PREFIJOS mm- * * El prototipo usaba clases sueltas (.panel, .lista, .enlace, .barra). En * una instalación con Storefront + WooCommerce + plugins eso es una * colisión esperando: .panel y .lista son nombres que cualquiera usa. La * estructura del markup es la del prototipo v8; los nombres van prefijados. * ========================================================================== */ /* Tokens del componente. Provisionales: son los colores del prototipo v8. Cuando el sitio migre al sistema de tokens semánticos (pendiente 12.1 del PRD), esto es UN bloque que se reemplaza, no una cacería por el archivo. Por eso ninguna regla de abajo escribe un color literal. */ .mm-cajon, .mm-velo, .mm-abrir { --mm-fondo: #0b0b0b; --mm-panel: #111111; --mm-tinta: #ede9e4; --mm-tinta-tenue: #8a8681; --mm-linea: #262626; --mm-velo-color: rgba( 0, 0, 0, .6 ); --mm-display: "Times New Roman", Times, serif; --mm-util: ui-sans-serif, -apple-system, "Helvetica Neue", Arial, sans-serif; --mm-dur: .42s; --mm-ease: cubic-bezier( .25, .46, .45, .94 ); /* ---------- TIPOGRAFÍA ---------- Los valores son los del prototipo v8 y siguen siendo el default. Están como variables porque los controla el Personalizador (Apariencia > Personalizar > "Menú móvil - Tipografía"): Mitienda_Menu_Movil:: estilos_personalizador() reescribe SOLO las que el usuario cambió, con wp_add_inline_style sobre este mismo handle. Por eso la sobrescritura del PHP apunta a esta misma lista de selectores y no a :root: estas declaraciones están puestas en los elementos, así que un :root con la misma variable perdería siempre. Al repetir el selector gana el que llega después, que es el inline. Las dos familias se dejan como stacks literales, no como var(--fuente-*) de tipografia.css: el default del menú es el del prototipo. El Personalizador sí ofrece las cinco familias del sistema como opción, y ahí entra el token. */ --mm-ft-enlace: 22px; --mm-ls-enlace: .01em; --mm-tt-enlace: none; --mm-ft-categoria: 12px; --mm-ft-rotulo: 10px; --mm-ft-vende-rotulo: 11px; /* título del bloque Vende y su botón */ --mm-ft-vende-texto: 13px; /* ---------- ESCALA DE APILAMIENTO ---------- Estos tres números NO son los del prototipo v8 (30/40/50), y el motivo importa: en el prototipo la barra superior no competía con nada. Acá sí. Lo que ya hay en el sitio, de menor a mayor: 100 .site-header (sticky, CON FONDO OPACO) header-custom.css 900 .mitienda-volver-arriba site-custom.css 9996 .mitienda-news-esquina site-custom.css 9997 .mitienda-news-aviso site-custom.css 9998 .renta-burbuja site-custom.css 9999 .renta-aviso site-custom.css 99999 .mitienda-news-modal site-custom.css El header en 100 con fondo opaco es el que manda: cualquier valor por debajo deja la hamburguesa DIBUJADA PERO TAPADA. No desaparece del DOM, no da error, simplemente el header se pinta encima y además se come el clic. Es exactamente el síntoma "el menú no aparece a 768px". Y no alcanza con superar 100: si el cajón quedara debajo de 9998, la burbuja de renta flotaría sobre el menú abierto. Por eso van arriba de todo el grupo flotante. La única excepción deliberada es el modal del newsletter (99999), que es bloqueante y debe seguir ganando. El velo va ARRIBA de la hamburguesa a propósito: con el cajón abierto el botón queda tapado, y cerrar se hace con la X o tocando el velo. */ --mm-z-abrir: 10000; --mm-z-velo: 10001; --mm-z-cajon: 10002; } /* -------------------------------------------------------------------------- FUERA DE MÓVIL: nada existe. El markup se imprime SIEMPRE, en todos los anchos (ver el comentario de render() en la clase PHP: con LiteSpeed cacheando páginas, renderizar según el ancho o el user agent significa servirle a un escritorio la copia cacheada de un móvil). Se apaga acá, con CSS, que sí es inmune a la caché de página. display:none y no visibility/opacity: así el cajón tampoco queda en el árbol de accesibilidad ni en el orden de tabulación en escritorio. -------------------------------------------------------------------------- */ .mm-abrir, .mm-velo, .mm-cajon { display: none; } /* ========================================================================== MÓVIL — 768px hacia abajo. El 768 sale de Mitienda_Menu_Movil::PUNTO_QUIEBRE. Ver la cabecera. ========================================================================== */ @media ( max-width: 768px ) { /* ---------- BOTÓN HAMBURGUESA ---------- Va fijo arriba a la izquierda, no dentro del header. Motivo: el markup entero se imprime en wp_footer para no pelear con la estructura de .col-full de Storefront (dos .col-full anidados ya dieron problemas, trampa 5 del PRD). Desde el footer, la única forma de que el botón aparezca arriba es sacarlo del flujo. El alto se toma de --mitienda-header-alto, que publica js/header-alto.js, así queda centrado contra la barra real en vez de contra un número adivinado. El respaldo de 57px es el alto del prototipo, para el instante antes de que corra el script. OJO CON EL max() — NO SIMPLIFICAR A var() A SECAS. En la portada el header arranca OCULTO (opacity/visibility, ver style.css) y recién se muestra cuando el hero termina de pasar. Si en ese estado la medición del header llega en 0 (o el script no llegó a correr y algo más dejó la variable en 0px), el botón queda de alto cero: sigue en el DOM, no tira ningún error, y en pantalla no hay nada que tocar. El síntoma exacto es "arriba de todo no se ve el menú, aparece recién al scrollear", porque al hacerse visible el header vuelve a medir. El max() le pone un piso: 56px, el mismo del ancho, que ya es un blanco táctil correcto. Y EL VELO DE FONDO: el botón se dibuja encima del video del hero, que cambia de brillo cuadro a cuadro. Sin nada detrás, el icono claro se pierde sobre un cuadro claro. El degradado es negro y se desvanece a transparente, así que sobre el header (que es casi negro) no se nota, y sobre el video da el contraste que falta. La sombra del icono hace el resto. */ /* EN EL FLUJO DEL HEADER, NO PEGADO A LA VENTANA (cambio de 2.73.2). Estaba en position:fixed contra la esquina superior izquierda de la pantalla. Como el header envuelve en dos renglones en móvil y el carrito cae en el segundo, la hamburguesa quedaba arriba de todo y el carrito más abajo: los dos únicos controles de la barra, cada uno por su lado. Ahora el botón se imprime dentro del header (ver Mitienda_Menu_Movil::boton()) y lo acomoda el mismo `order` que al carrito y al buscador, así que viajan juntos pase lo que pase con el envoltorio. */ .mm-abrir { position: relative; z-index: var( --mm-z-abrir ); order: 0; flex: 0 0 auto; align-self: center; display: grid; place-items: center; width: 44px; height: 44px; color: var( --mm-tinta ); background: radial-gradient( circle at 28px 28px, rgba( 0, 0, 0, .45 ), rgba( 0, 0, 0, 0 ) 72% ); border: 0; padding: 0; cursor: pointer; } .mm-abrir .mm-icono { width: 20px; height: 20px; display: block; stroke: currentColor; fill: none; stroke-width: 1.1; filter: drop-shadow( 0 1px 3px rgba( 0, 0, 0, .75 ) ); } /* ---------- LA NAVEGACIÓN QUE EL CAJÓN SUSTITUYE ---------- Abajo del punto de quiebre el cajón es LA navegación. Todo lo que navegaba antes se apaga acá. Son dos cosas distintas y conviene no confundirlas: a) La barra de pestañas del tema (.main-navigation). Storefront la esconde sola en pantallas chicas -- pone display:none sobre ul.nav-menu y saca la hamburguesa en su lugar -- pero header-custom.css le pone display:flex SIN media query, porque el rediseño de pestañas es anterior al cajón y en su momento la barra tenía que seguir sirviendo en móvil (por eso a 900px se le hizo envolver en varias filas, ver header-custom.css). Resultado hasta ahora: abajo de 768px se veían las dos navegaciones, la barra de pestañas envuelta Y la hamburguesa. No era intencional; era el rediseño del header pisando una regla de Storefront que nadie volvió a mirar cuando entró el cajón. Lo que NO se apaga: carrito, buscador y selector de idioma. No son navegación de menú y el cajón no los reemplaza. En el markup de Storefront son hermanos de .main-navigation, no hijos, así que esconder el