/** * BlueArk Tools — Mega menú curado (BAMM_) * * Estilos del panel que reemplaza el submenú de un ítem del menú principal. * * ------------------------------------------------------------------------- * CÓMO CONVIVE ESTO CON GENERATEPRESS — leer antes de tocar nada * ------------------------------------------------------------------------- * El tema oculta y muestra los submenús él mismo. Su estado OCULTO es * (assets/css/main.css, regla `.main-navigation ul ul`): * * position: absolute; left: -99999px; opacity: 0; * height: 0; overflow: hidden; pointer-events: none; width: 200px; * * y su estado VISIBLE (regla `.main-navigation:not(.toggled) ul li:hover > ul`): * * left: auto; opacity: 1; height: auto; overflow: visible; pointer-events: auto; * * De ahí sale la regla de oro de este archivo: **nunca fijar `left`, `height`, * `overflow`, `opacity` ni `pointer-events` en el estado base del panel.** Eso * es justamente lo que lo dejaría visible siempre. Solo se tocan en el estado * revelado, y solo `left`/`right`, para que el panel ocupe el ancho del header * en vez de los 200px de un submenú normal. * * El segundo punto delicado: nuestras listas internas son `ul ul ul` para el * tema, así que heredan ese mismo estado oculto y hay que devolverlas al flujo * explícitamente. Se hace con UNA sola regla, con especificidad suficiente para * ganarle tanto a la base (0,1,2) como a la de móvil (0,3,2). */ /* ========================================================================= 1. Reset de las listas internas — imprescindible en escritorio Y en móvil ========================================================================= */ /* * Especificidad (0,4,2): le gana a `.main-navigation ul ul` (0,1,2) del estado * base y a `.main-navigation.toggled .main-nav ul ul` (0,3,2), que en móvil * les pondría visibility:hidden. Una sola regla cubre los dos modos, así que * no hay empates de especificidad que dependan del orden de carga del CSS. */ .main-navigation .main-nav ul.bamm-panel ul.bamm-col-list { position: static; float: none; display: block; width: auto; height: auto; left: auto; right: auto; top: auto; opacity: 1; visibility: visible; overflow: visible; pointer-events: auto; box-shadow: none; border-bottom: 0; transition: none; margin: 0; padding: 0; /* * El tema pinta TODOS los submenús con `.main-navigation ul ul { * background-color: var(--base) }` (CSS dinámico del Personalizador, * especificidad 0,1,2). Sin este reset, cada lista interna aparece con un * recuadro gris detrás de los enlaces, porque para el tema también es un * "submenú". El panel ya pone su propio fondo blanco; las listas de adentro * tienen que ser transparentes. */ background: transparent; } .main-navigation .main-nav ul.bamm-panel li.bamm-row { width: auto; float: none; margin: 0; padding: 0; border: 0; background: transparent; } /* * El color va explícito y no heredado: así el panel se ve igual sin depender * de los ajustes de color de submenú del Personalizador, que un cambio de tema * o de paleta podría dejar ilegibles sobre el fondo blanco del panel. * Especificidad (0,4,3), por encima de la del CSS dinámico de GeneratePress. */ .main-navigation .main-nav ul.bamm-panel li.bamm-row > a { display: block; padding: 6px 0; font-size: 13px; line-height: 1.4; font-weight: 400; color: #555555; background: none; text-decoration: none; white-space: normal; transition: color 0.2s ease; } .main-navigation .main-nav ul.bamm-panel li.bamm-row > a:hover, .main-navigation .main-nav ul.bamm-panel li.bamm-row > a:focus { color: #1a1a1a; background: none; text-decoration: none; } /* ========================================================================= 2. Escritorio ========================================================================= */ @media (min-width: 769px) { /* * position:static saca al
  • de ser el bloque contenedor del panel, para * que el panel se posicione respecto de .inside-navigation (que el tema ya * declara position:relative) y pueda ocupar todo el ancho del header. */ .main-navigation .main-nav li.bamm-has-panel { position: static; } /* * Estado BASE del panel. Sin left / height / overflow / opacity: eso lo * sigue manejando el tema (ver cabecera de este archivo). * * Especificidad (0,3,1) contra la base del tema (0,1,2): gana por número * de clases. * * El `:not(.slideout-navigation)` excluye el panel deslizante de GP * Premium (ver sección 7). Ese panel es angosto y vertical aunque la * ventana sea ancha — si se puede abrir por encima de 768px, la grilla y * el posicionamiento de escritorio lo romperían. Sumar el `:not()` no baja * la especificidad, la sube: cuenta como una clase más. */ .main-navigation:not(.slideout-navigation) .main-nav ul.bamm-panel { box-sizing: border-box; width: 100%; max-width: var(--bamm-max-width, 1320px); margin: 0 auto; display: grid; grid-template-columns: repeat(var(--bamm-cols, 4), minmax(0, 1fr)); gap: 0 40px; padding: 40px 40px 44px; background: #ffffff; border-top: 1px solid #ececec; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08); text-align: left; } /* * Estado REVELADO. Única capa donde tocamos la posición horizontal. * left+right+width con márgenes auto deja el panel centrado dentro del * header (comportamiento estándar de CSS para cajas absolutas * sobre-restringidas: los márgenes auto se reparten el sobrante). * * Especificidad (0,5,2) contra la del tema (0,3,3): gana por clases. * * El `:not(.slideout-navigation)` importa aquí más que en la regla de * arriba: el panel deslizante NUNCA lleva la clase `toggled` (abre con * `slide-opened` en el ), así que sin esta exclusión pasar el cursor * por encima de un ítem del panel deslizante dispararía la revelación de * escritorio. */ .main-navigation:not(.toggled):not(.slideout-navigation) .main-nav li.bamm-has-panel:hover > ul.bamm-panel, .main-navigation:not(.toggled):not(.slideout-navigation) .main-nav li.bamm-has-panel.sfHover > ul.bamm-panel { left: 0; right: 0; } /* Las columnas son celdas de la grilla, no ítems de menú flotados. */ .main-navigation .main-nav ul.bamm-panel > li.bamm-col { width: auto; float: none; display: block; padding: 0; margin: 0; border: 0; } /* * En escritorio el es solo un rótulo: no se puede plegar. * pointer-events:none evita además que un clic sobre el título cierre la * columna por accidente. */ .bamm-panel .bamm-col-title { pointer-events: none; cursor: default; padding: 0 0 12px; margin: 0 0 12px; border-bottom: 1px solid #ececec; } .bamm-panel .bamm-col-title::after { content: none; } } /* ========================================================================= 3. Rótulo de columna (compartido) ========================================================================= */ .bamm-panel .bamm-col-box { margin: 0; } .bamm-panel .bamm-col-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #1a1a1a; list-style: none; } /* Oculta el triángulo nativo del
    en todos los navegadores. */ .bamm-panel .bamm-col-title::-webkit-details-marker { display: none; } .bamm-panel .bamm-col-title::marker { content: ""; } /* ========================================================================= 4. Tarjeta promocional ========================================================================= */ .bamm-panel .bamm-promo { box-sizing: border-box; height: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 28px 26px; border-radius: 8px; background: var(--bamm-promo-bg, #f4f7f5); } .bamm-panel .bamm-promo__eyebrow { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bamm-eyebrow-color, #7a8b70); } .bamm-panel .bamm-promo__heading { margin: 0 0 4px; font-size: 20px; line-height: 1.3; font-weight: 700; color: #1a1a1a; } .bamm-panel .bamm-promo__list { margin: 0 0 4px; } .bamm-panel .bamm-promo__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; /* * El mismo valor que el tema le impone a cualquier enlace dentro de un * submenú (`.main-navigation .main-nav ul ul li a`, 0,3,3), que le gana a * esta regla (0,2,0). Se declara igual para que el botón mida lo mismo en * los tres contextos: escritorio, menú desplegable del tema y panel * deslizante (donde sí manda la regla de la sección 7). */ padding: 10px 20px; border-radius: 999px; font-weight: 600; line-height: 1.3; text-decoration: none; background: var(--bamm-cta-bg, #2e6b40); color: var(--bamm-cta-color, #ffffff); } .main-navigation .main-nav ul.bamm-panel .bamm-promo__cta { color: var(--bamm-cta-color, #ffffff); } /* * Tipografía del botón, en una sola regla con los cuatro selectores en vez de * repetir el valor cuatro veces: la especificidad se calcula por selector, así * que cada uno le gana a su rival correspondiente y el tamaño vive en un solo * lugar. * * Contra quién hay que ganar: * * text-transform — GeneratePress aplica la tipografía de navegación del * Personalizador con `.main-navigation a, .menu-toggle` (0,1,1). Si ahí está * configurado "Mayúsculas", el botón sale gritado aunque el texto se haya * escrito en minúsculas desde el editor del panel. El encabezado y el rótulo * pequeño no sufren esto porque son

    , no enlaces. Se anula explícitamente: * es un botón dentro de una tarjeta, no un ítem de menú. * * font-size — misma regla del tema, más las reglas de id del panel * deslizante de GP Premium (ver sección 7), que son las que además le meten * el padding de ítem de menú. */ .bamm-panel .bamm-promo__cta, .main-navigation .main-nav ul.bamm-panel .bamm-promo__cta, #generate-slideout-menu.main-navigation .main-nav ul.bamm-panel .bamm-promo__cta, .main-navigation.slideout-navigation .main-nav ul.bamm-panel .bamm-promo__cta { font-size: 12px; text-transform: none; letter-spacing: normal; } /* ========================================================================= 5. Móvil — el panel se apila y cada columna con título se pliega ========================================================================= */ /* * Especificidad (0,5,1): le gana a la regla `.toggled-on` del tema (0,4,2), * que si no dejaría el panel en display:block sin nuestro espaciado. */ .main-navigation.toggled .main-nav ul.sub-menu.bamm-panel { display: block; width: 100%; max-width: none; margin: 0; padding: 0; background: transparent; border-top: 0; box-shadow: none; } .main-navigation.toggled .main-nav ul.bamm-panel > li.bamm-col { width: 100%; float: none; display: block; padding: 0; border: 0; } @media (max-width: 768px) { .bamm-panel .bamm-col-title { padding: 12px 20px; cursor: pointer; border-bottom: 1px solid rgba(0, 0, 0, 0.05); } /* * Indicador de plegado. Es puramente decorativo: el estado real lo lleva el * atributo [open] del

    , que el navegador gestiona solo. */ .bamm-panel .bamm-col-title::after { content: "+"; font-size: 16px; font-weight: 400; line-height: 1; } .bamm-panel .bamm-col-box[open] > .bamm-col-title::after { content: "\2013"; } /* * La sangría de acordeón solo aplica a las columnas de lista. Dentro de la * tarjeta promocional los enlaces ya están indentados por el padding de la * propia tarjeta, y sumarles esto los dejaría descolgados hacia la derecha. */ .main-navigation .main-nav ul.bamm-panel > li.bamm-col--list li.bamm-row > a { padding: 10px 20px 10px 32px; } .bamm-panel .bamm-promo { height: auto; margin: 12px 20px; } } /* ========================================================================= 6. Blindaje contra el CSS de mega menú heredado (WPCode) ------------------------------------------------------------------------- Si el ítem de menú conserva la clase `mega-menu` de la implementación anterior, ese CSS le impondría display:flex y columnas del 25 % a nuestro panel. Lo recomendable es quitar esa clase desde Apariencia → Menús, pero el layout no debería depender de que alguien se acuerde: estas dos reglas lo neutralizan. Especificidad (0,3,2) y (0,3,3) contra las (0,2,2) y (0,2,3) de aquel CSS. ========================================================================= */ @media (min-width: 769px) { nav .main-nav .mega-menu > ul.bamm-panel { display: grid; } nav .main-nav .mega-menu > ul.bamm-panel > li.bamm-col { width: auto; display: block; } } /* ========================================================================= 7. Panel deslizante (Off Canvas Panel de GP Premium) ------------------------------------------------------------------------- En producción el menú móvil no es el desplegable del propio tema (`.main-navigation.toggled`) sino el panel deslizante de GP Premium: un