/* ################################################################## HerboMax — EL MENU: el cajon lateral de las tres lineas Viste UNA sola pieza: el cajon que entra desde la IZQUIERDA cuando se tocan las tres lineas del encabezado (.hbx-mn-fondo > .hbx-mn-panel). El marcado lo escribe inc/menu.php, y el contenido sale del menu que el dueno administra en Apariencia > Menus: aca no hay ni un enlace escrito a mano. ES EL HERMANO DEL CAJON DEL CARRO Las medidas, la sombra, el velo, la duracion de la transicion y el comportamiento del foco son los mismos que los de template-parts/carro.css. Solo cambia el lado: el carro entra por la derecha y este por la izquierda. Dos cajones que se comportan distinto en el mismo sitio se sienten como dos sitios. OJO CON LAS VARIABLES DE COLOR El cajon se cuelga de por JavaScript (position:fixed muere bajo un antepasado con transform, y Woodmart los usa), asi que queda FUERA de la envoltura .hbx y no ve --morado, --naranja ni --hueso. Por eso aca se usan SIEMPRE los nombres --hbx-*, que viven en :root, y cada uno lleva su valor literal de respaldo: si el bloque de paleta compartida no estuviera, el menu igual sale con los colores de la marca en vez de negro. PIEZAS COMPARTIDAS QUE ESTE ARCHIVO NO DEFINE (las escribe style.css): .hbx-sr texto solo para lector de pantalla EL CORTE DE ESCRITORIO ES 1025, NO 900 El resto del tema corta en 900 px, pero entre 900 y 1024 Woodmart TODAVIA muestra las tres lineas. Esconder el cajon ahi dejaria un boton que no abre nada. Desde 1025 manda el menu horizontal que Woodmart ya dibuja en la cabecera y este cajon no existe. El mismo numero esta en HBX_MENU_ESCRITORIO, en inc/menu.php: si se cambia uno, hay que cambiar el otro. Movil primero. Pantalla de referencia 375 px. ################################################################## */ /* ══════════════════════════════════════════════════════════════════════ 1 · El velo y el panel ══════════════════════════════════════════════════════════════════════ */ .hbx-mn-fondo{ position:fixed; inset:0; /* 9450: por encima del boton flotante de WhatsApp (~9000) y por DEBAJO del cajon del carro (9500). Los dos no conviven —el JS cierra el carro antes de abrir este—, pero si algun dia se cruzaran, el que tiene que quedar arriba es el que lleva la plata. */ z-index:9450; background:rgba(20,23,58,.45); display:flex; justify-content:flex-start; } /* Mas especifico que la regla de arriba: [hidden] tiene que ganar. */ .hbx-mn-fondo[hidden]{display:none} /* Mientras el cajon esta abierto la pagina de atras no se mueve, y el boton de WhatsApp desaparece: si no, queda flotando sobre el panel. */ body.hbx-mn-abierto{overflow:hidden} body.hbx-mn-abierto .joinchat{display:none} .hbx-mn-panel{ position:relative; /* 84% de 375 px son 315: el velo que queda a la derecha es la salida mas grande y mas obvia del cajon. */ width:84%; max-width:320px; height:100%; /* Leccion ya pagada: sin min-width:0 un hijo flex crece hasta el ancho de su contenido y se sale de la pantalla. */ min-width:0; background:#fff; display:flex; flex-direction:column; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; box-shadow:8px 0 32px rgba(0,12,70,.18); /* Poppins tambien aca: el cajon vive fuera de .hbx y no la hereda. */ font-family:var(--hbx-fuente, 'Poppins', system-ui, -apple-system, sans-serif); color:var(--hbx-texto, #14173a); font-size:1rem; line-height:1.5; /* Entra desde la izquierda. La clase --on la pone el JS un cuadro despues de destapar el velo, para que la transicion se vea. */ transform:translateX(-100%); transition:transform .22s ease; } .hbx-mn-fondo--on .hbx-mn-panel{transform:translateX(0)} .hbx-mn-panel *{box-sizing:border-box} /* OJO: este reset y el de los botones valen (0,2,0). Toda regla de mas abajo que quiera pintar un color distinto tiene que ir prefijada con .hbx-mn-panel, o pierde contra el color:inherit de aca y se queda con el del panel. Medido en pantalla: el submenu salia en tinta oscura en vez del gris secundario. */ .hbx-mn-panel a{text-decoration:none; color:inherit} .hbx-mn-panel p, .hbx-mn-panel ul, .hbx-mn-panel li{margin:0; padding:0} .hbx-mn-panel ul{list-style:none} /* PISA el reset de botones de Woodmart, que le pone fondo, borde, color propio y min-height:var(--btn-height) = 42 px a TODO boton del sitio. Especificidad (0,2,0) contra la (0,1,0) de su :is(...): gana sin !important. */ .hbx-mn-panel button{ font-family:inherit; cursor:pointer; color:inherit; background:none; border:none; border-radius:0; min-height:0; padding:0; text-align:left; box-shadow:none; } /* Foco visible propio: Woodmart lo borra en varios botones. Va hacia adentro (offset negativo) porque las filas ocupan todo el ancho y un contorno por fuera se comeria el borde del panel. */ .hbx-mn-panel a:focus-visible, .hbx-mn-panel button:focus-visible{ outline:2px solid var(--hbx-morado, #581fb6); outline-offset:-3px; } /* ══════════════════════════════════════════════════════════════════════ 2 · La cabecera del cajon ══════════════════════════════════════════════════════════════════════ */ .hbx-mn-cab{ display:flex; align-items:center; gap:8px; padding:8px 8px 8px 18px; border-bottom:1px solid var(--hbx-borde, #e6e2f0); /* Pegajosa: con un menu largo, el aspa de cerrar nunca se va de pantalla. */ position:sticky; top:0; background:#fff; z-index:1; } .hbx-mn-marca{ flex:1; min-width:0; /* Woodmart escribe font-family en varios elementos de texto: se nombra la herencia a proposito. */ font-family:inherit; font-size:1.2rem; font-weight:700; letter-spacing:-.05em; color:var(--hbx-texto, #14173a); } .hbx-mn-marca b{color:var(--hbx-morado, #581fb6); font-weight:700} .hbx-mn-marca sup{font-size:.42em; font-weight:500; top:-.7em} .hbx-mn-panel .hbx-mn-cerrar{ width:44px; height:44px; flex:none; display:grid; place-items:center; border-radius:12px; color:var(--hbx-texto, #14173a); } /* El hover OSCURECE, nunca aclara: aclarar justo al tocar empeora el contraste en el momento exacto en que se mira. */ .hbx-mn-cerrar:hover, .hbx-mn-cerrar:active{background:#f4f1fa} /* ══════════════════════════════════════════════════════════════════════ 3 · Las filas ══════════════════════════════════════════════════════════════════════ */ .hbx-mn-nav{padding-bottom:32px} .hbx-mn-fila{border-bottom:1px solid var(--hbx-borde, #e6e2f0)} /* La fila de un padre son DOS blancos: el enlace a su pagina y el boton que despliega los hijos. */ .hbx-mn-linea{ display:flex; align-items:stretch; min-width:0; } .hbx-mn-panel .hbx-mn-enlace{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex:1; min-width:0; /* 64 px de alto: el dedo no falla y el menu se lee de un vistazo. */ min-height:64px; padding:0 18px; font-family:inherit; font-size:1.125rem; font-weight:600; letter-spacing:-.025em; line-height:1.25; color:var(--hbx-texto, #14173a); } .hbx-mn-enlace:hover, .hbx-mn-enlace:active{background:#f7f5fb; color:var(--hbx-texto, #14173a)} /* La flecha morada del prototipo. Es decorativa: pintarla con CSS y no con marcado la deja fuera del texto que se copia y se lee. */ .hbx-mn-enlace::after{ content:'\203A'; flex:none; color:var(--hbx-morado, #581fb6); font-size:1.5rem; font-weight:700; line-height:1; } /* Un elemento de menu sin destino (el clasico enlace personalizado con "#") se dibuja como rotulo: sin flecha, porque no lleva a ninguna parte, y en el gris secundario, que sobre blanco da 7:1. */ .hbx-mn-panel .hbx-mn-enlace--rotulo{ color:var(--hbx-texto-2, #5d6081); font-weight:500; cursor:default; } .hbx-mn-enlace--rotulo::after{content:none} .hbx-mn-enlace--rotulo:hover{background:none} /* "Mi cuenta" no sale del menu del dueno: la agrega inc/menu.php porque el cajon de Woodmart al que reemplazamos la traia. Se separa del resto y va en el gris secundario (7:1 sobre blanco) para que se lea como lo que es: una utilidad, no una seccion del sitio. */ .hbx-mn-fila--cuenta{margin-top:10px; border-top:1px solid var(--hbx-borde, #e6e2f0)} .hbx-mn-panel .hbx-mn-fila--cuenta .hbx-mn-enlace{ min-height:56px; font-size:1rem; font-weight:500; color:var(--hbx-texto-2, #5d6081); } /* La pagina que se esta viendo. Barra morada a la izquierda y el texto en morado: 8,6:1 sobre blanco. */ .hbx-mn-fila--actual{box-shadow:inset 4px 0 0 var(--hbx-morado, #581fb6)} .hbx-mn-panel .hbx-mn-enlace[aria-current], .hbx-mn-panel .hbx-mn-sub-enlace[aria-current]{color:var(--hbx-morado, #581fb6)} /* ══════════════════════════════════════════════════════════════════════ 4 · El boton que despliega un submenu ══════════════════════════════════════════════════════════════════════ */ .hbx-mn-panel .hbx-mn-mas{ flex:none; width:56px; min-height:64px; display:grid; place-items:center; /* La linea vertical avisa que ahi hay un segundo blanco, distinto del enlace de al lado. */ border-left:1px solid var(--hbx-borde, #e6e2f0); } .hbx-mn-mas:hover, .hbx-mn-mas:active{background:#f7f5fb} /* La misma flecha de las demas filas: cerrada apunta a la derecha, y al desplegarse gira hasta apuntar hacia abajo. Una sola forma para una sola idea. */ .hbx-mn-mas::after{ content:'\203A'; color:var(--hbx-morado, #581fb6); font-size:1.5rem; font-weight:700; line-height:1; transform:rotate(0deg); transition:transform .18s ease; } .hbx-mn-fila--abierta .hbx-mn-mas::after{transform:rotate(90deg)} /* Cuando el padre no tiene pagina propia, el boton ocupa la fila entera y lleva el texto dentro. Especificidad (0,2,0) para ganarle a .hbx-mn-mas, que esta mas arriba. */ .hbx-mn-panel .hbx-mn-enlace.hbx-mn-mas--solo{ display:flex; width:100%; border-left:none; justify-content:space-between; } /* La fila del padre no dibuja su propia flecha: la pone el boton. Si no, saldrian dos. */ .hbx-mn-fila--padre .hbx-mn-enlace::after{content:none} .hbx-mn-fila--padre .hbx-mn-enlace{padding-right:10px} .hbx-mn-enlace.hbx-mn-mas--solo{padding:0 18px} .hbx-mn-enlace.hbx-mn-mas--solo::after{content:'\203A'} /* ══════════════════════════════════════════════════════════════════════ 5 · El submenu ══════════════════════════════════════════════════════════════════════ */ .hbx-mn-sub{ background:#faf9fd; border-top:1px solid var(--hbx-borde, #e6e2f0); } /* Mas especifico que la regla de arriba: [hidden] tiene que ganar. */ .hbx-mn-sub[hidden]{display:none} .hbx-mn-sub li + li .hbx-mn-sub-enlace{ border-top:1px solid var(--hbx-borde, #e6e2f0); } .hbx-mn-panel .hbx-mn-sub-enlace{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; min-height:52px; /* Sangrado a la izquierda: se ve de un vistazo que cuelga de la fila de arriba. */ padding:0 18px 0 30px; font-family:inherit; font-size:1rem; font-weight:500; line-height:1.3; color:var(--hbx-texto-2, #5d6081); } .hbx-mn-sub-enlace:hover, .hbx-mn-sub-enlace:active{background:#f4f1fa; color:var(--hbx-texto, #14173a)} .hbx-mn-sub-enlace::after{ content:'\203A'; flex:none; color:var(--hbx-morado, #581fb6); font-size:1.25rem; font-weight:700; line-height:1; } .hbx-mn-sub-enlace.hbx-mn-enlace--rotulo::after{content:none} /* ══════════════════════════════════════════════════════════════════════ 6 · Escritorio Desde 1025 px el menu vive horizontal en la cabecera de Woodmart y este cajon no tiene por que existir. El JavaScript usa el MISMO numero y ni siquiera intercepta el clic, asi que si el dueno dejara las tres lineas visibles en escritorio, se abriria el menu de Woodmart y no un cajon escondido. ══════════════════════════════════════════════════════════════════════ */ @media (min-width:1025px){ .hbx-mn-fondo{display:none} } /* ══════════════════════════════════════════════════════════════════════ 7 · Movimiento reducido ══════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce){ .hbx-mn-panel, .hbx-mn-mas::after{transition:none} .hbx-mn-panel{transform:none} }