/* ========================================================================= Custom LCPtracker main navigation — supplemental styles ------------------------------------------------------------------------- El markup reutiliza las clases de ElementsKit y va envuelto en la cadena de wrappers del widget original, así que el CSS de ElementsKit y el que Elementor generó para ese widget ya hacen casi todo el trabajo. ESTRUCTURA IMPORTANTE: La Sección 1 va dentro de @layer lcp-fallback. Una regla dentro de una capa SIEMPRE pierde contra una regla normal (sin capa), sin importar especificidad ni orden de carga. Eso es exactamente lo que queremos: - Con ElementsKit activo -> mandan sus estilos y los del widget. - Con ElementsKit apagado -> entra mi respaldo y el menú sigue usable. Las Secciones 2 y 3 van FUERA de la capa a propósito, porque sí deben ganar: son los estados que maneja mi JS y el drawer móvil. Todo está limitado a .lcp-static-menu, así que nada se filtra a otros menús del sitio. ========================================================================= */ /* Variables (fuera de la capa: nadie más las define). Se declaran también en el wrapper del widget porque --lcp-bar-offset se usa en .ekit-wid-con, que es ANCESTRO de .lcp-static-menu, y las variables CSS solo heredan hacia abajo. */ .lcp-static-menu, .lcp-menu-skin, .elementor-shortcode:has(.lcp-static-menu) { --lcp-panel-bg: #ffffff; --lcp-panel-hover-bg: #f4f7fa; --lcp-panel-border: #e3e9ef; --lcp-panel-shadow: 0 10px 30px rgba(16, 33, 51, 0.12); --lcp-panel-width: 250px; --lcp-panel-radius: 4px; --lcp-panel-link-color: #1d2b3a; --lcp-panel-link-hover-color: #0a5ca8; --lcp-panel-link-padding: 10px 20px; --lcp-transition: 200ms ease; /* Nudge vertical de la barra. Positivo = baja, negativo = sube. */ --lcp-bar-offset: 0px; /* Aire entre el item de primer nivel y su panel. El puente invisible del hover se calcula con este mismo valor, así que puedes cambiarlo sin que el dropdown se cierre al bajar el mouse. */ --lcp-panel-offset: 12px; /* --- Drawer móvil ------------------------------------------------ OJO: el fondo del drawer lo pinta el CSS generado de Elementor para el widget original, y es AZUL MARINO OSCURO. No lo controlamos desde aquí (--lcp-panel-bg se declara blanco y pierde contra su selector por ID). Así que todo lo que va dentro del drawer tiene que estar pensado para fondo oscuro, no para fondo blanco. Ese fue el bug de la primera versión de los CTA: heredaban --lcp-panel-link-hover-color (#0a5ca8, azul oscuro) para borde y texto, que sobre azul marino no contrasta y se veía lavado. */ --lcp-cta-primary-bg: #0a5ca8; --lcp-cta-primary-hover-bg: #ffffff; --lcp-cta-primary-color: #ffffff; --lcp-cta-primary-hover-color: #10243a; --lcp-cta-ghost-border: rgba(255, 255, 255, 0.55); --lcp-cta-ghost-color: #ffffff; --lcp-cta-ghost-hover-bg: #ffffff; --lcp-cta-ghost-hover-color: #10243a; /* Botón de cerrar del drawer. */ --lcp-close-color: rgba(255, 255, 255, 0.85); --lcp-close-hover-color: #ffffff; /* Aire lateral del drawer. Un solo valor para los items del menú, los CTA y el panel de identidad, así todo queda alineado en la misma columna. */ --lcp-drawer-pad-x: 22px; /* Hueco superior del drawer: reserva el sitio del panel de identidad (logo + cerrar), que va en position:absolute a top:14px y mide unos 40px de alto. 54px lo deja justo debajo; el aire visual lo aporta el padding-top de los propios items del menú. Si cambias el logo por uno más alto y el primer item queda pegado, este es el número a subir. */ --lcp-drawer-pad-top: 54px; /* Separación entre los hijos directos del drawer (la lista y el bloque de CTA). Elementor declara gap:14px en .elementskit-menu-container desde su CSS generado; antes era inofensivo porque el contenedor no era flex, pero al forzarlo a flex column pasó a contar. Se replica aquí para que el espaciado sea nuestro y no dependa de un ajuste del widget que alguien pueda cambiar sin darse cuenta. */ --lcp-drawer-gap: 14px; /* Tipografía de los items del drawer. El widget original los pinta en un peso muy grueso que sobre azul saturado cuesta leer; 500 mantiene la jerarquía sin cansar. Si tu familia tipográfica no trae 500, prueba 400 — con 600+ vuelve el problema. */ --lcp-drawer-link-weight: 500; --lcp-drawer-link-size: 15px; /* Flecha del acordeón. Blanca porque el fondo del drawer es azul saturado; Elementor la pinta con --e-global-color-accent (azul) y ahí casi no se distingue. */ --lcp-drawer-indicator-color: #ffffff; } /* ========================================================================= 1. RESPALDO — solo aplica si ElementsKit no está definiendo lo mismo ========================================================================= */ @layer lcp-fallback { .lcp-static-menu { position: relative; z-index: 99; } /* --- Barra de primer nivel ---------------------------------------- */ .lcp-static-menu .elementskit-navbar-nav { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; } .lcp-static-menu .elementskit-navbar-nav.elementskit-menu-po-center { justify-content: center; } .lcp-static-menu .elementskit-navbar-nav li { margin: 0; padding: 0; list-style: none; } .lcp-static-menu .elementskit-navbar-nav > li { position: relative; } .lcp-static-menu .elementskit-navbar-nav > li > a { display: flex; align-items: center; gap: 6px; padding: 12px 15px; color: inherit; font: inherit; line-height: 1.3; text-decoration: none; white-space: nowrap; cursor: pointer; transition: color var(--lcp-transition); } /* --- Paneles ------------------------------------------------------ */ .lcp-static-menu .elementskit-submenu-panel { position: absolute; top: 100%; left: 0; z-index: 100; min-width: var(--lcp-panel-width); margin: 0; padding: 8px 0; list-style: none; background: var(--lcp-panel-bg); border: 1px solid var(--lcp-panel-border); border-radius: var(--lcp-panel-radius); box-shadow: var(--lcp-panel-shadow); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity var(--lcp-transition), transform var(--lcp-transition), visibility var(--lcp-transition); } /* El puente invisible del hover vive fuera de la capa, en la Sección 2, junto a la regla que separa el panel: los dos dependen de --lcp-panel-offset y tienen que moverse siempre juntos. */ .lcp-static-menu .elementskit-submenu-panel > li > a { display: block; padding: var(--lcp-panel-link-padding); color: var(--lcp-panel-link-color); font: inherit; font-size: 15px; line-height: 1.4; text-decoration: none; cursor: pointer; transition: background-color var(--lcp-transition), color var(--lcp-transition); } .lcp-static-menu .elementskit-submenu-panel > li > a:hover, .lcp-static-menu .elementskit-submenu-panel > li > a:focus { background: var(--lcp-panel-hover-bg); color: var(--lcp-panel-link-hover-color); } .lcp-static-menu .elementskit-submenu-panel > li.elementskit-dropdown-has > a { display: flex; align-items: center; justify-content: space-between; gap: 10px; } /* --- Segundo y tercer nivel abren hacia el costado ---------------- */ .lcp-static-menu .elementskit-submenu-panel .elementskit-submenu-panel { top: -8px; left: 100%; transform: translateX(-8px); } /* --- Apertura por hover (solo punteros de escritorio) ------------- */ @media (hover: hover) and (pointer: fine) { .lcp-static-menu .elementskit-dropdown-has:hover > .elementskit-submenu-panel { opacity: 1; visibility: visible; transform: translateY(0); } .lcp-static-menu .elementskit-submenu-panel .elementskit-dropdown-has:hover > .elementskit-submenu-panel { transform: translateX(0); } } /* --- Flecha del submenú ------------------------------------------- */ .lcp-static-menu .elementskit-submenu-indicator { flex: none; line-height: 1; transition: transform var(--lcp-transition); } /* Las anidadas apuntan a la derecha, igual que en producción. Si ElementsKit ya define su propia rotación, la suya gana (está fuera de la capa) y tampoco pasa nada. */ .lcp-static-menu .elementskit-submenu-panel .elementskit-submenu-indicator { transform: rotate(-90deg); } /* NO añadir aquí un caret de respaldo con ::before. Se intentó y rompía el icono real: las capas solo resuelven declaraciones en conflicto, así que ElementsKit ganaba el "content" pero border/width/height/transform del respaldo seguían aplicándose sobre el glifo bueno. */ } /* ========================================================================= 2. ESTADOS Y AÑADIDOS — estos SÍ deben ganar (fuera de la capa) ========================================================================= */ /* Apertura por teclado (:focus-within) y por JS (.lcp-submenu-open). */ .lcp-static-menu .elementskit-dropdown-has:focus-within > .elementskit-submenu-panel, .lcp-static-menu .elementskit-dropdown-has.lcp-submenu-open > .elementskit-submenu-panel { opacity: 1; visibility: visible; transform: translateY(0); } .lcp-static-menu .elementskit-submenu-panel .elementskit-dropdown-has:focus-within > .elementskit-submenu-panel, .lcp-static-menu .elementskit-submenu-panel .elementskit-dropdown-has.lcp-submenu-open > .elementskit-submenu-panel { transform: translateX(0); } /* --- Separación del panel respecto al item padre ---------------------- Va fuera de la capa porque tiene que ganarle al posicionamiento de ElementsKit. El ::before es un puente invisible que cubre exactamente el hueco creado: sin él, al mover el mouse del item al panel se cruza una zona muerta y el dropdown se cierra. Ambos usan --lcp-panel-offset, así que se mantienen sincronizados si cambias el valor. */ .lcp-static-menu .elementskit-navbar-nav > li > .elementskit-submenu-panel { margin-top: var(--lcp-panel-offset, 12px); } .lcp-static-menu .elementskit-navbar-nav > li > .elementskit-submenu-panel::before { position: absolute; top: calc(var(--lcp-panel-offset, 12px) * -1); left: 0; right: 0; height: var(--lcp-panel-offset, 12px); content: ""; } /* Los padres sin href se renderizan como role="button". */ .lcp-static-menu a[role="button"] { cursor: pointer; } .lcp-static-menu a:focus-visible, .lcp-static-menu button:focus-visible { outline: 2px solid var(--lcp-panel-link-hover-color); outline-offset: 2px; } /* Que los paneles nunca queden recortados por un contenedor del header. */ .lcp-static-menu, .lcp-static-menu .elementskit-navbar-nav { overflow: visible; } /* --- Separación de widget de Elementor ------------------------------- Elementor mete margin-block-end: var(--kit-widget-spacing, 20px) a todo widget que cumpla .elementor-widget:not(:last-child). Nuestro Shortcode NO es el último hijo (el widget de ElementsKit oculto va después) y display:none no lo saca de :not(:last-child), así que se llevaba 20px de margen inferior: esa era la banda blanca sobre el header. Especificidad 0,3,0 a propósito, para ganarle a .elementor-widget:not( :last-child) (0,2,0) sin recurrir a !important. Nota: si algún día quieres darle margen inferior desde el panel de Elementor, esta regla lo va a pisar. Bórrala si ese caso llega. */ .elementor-element.elementor-widget-shortcode:has(.lcp-static-menu) { margin-block-end: 0; } /* --- Centrado vertical dentro del widget Shortcode -------------------- El widget Shortcode envuelve todo en un
que el widget original de ElementsKit no tenía, y ese div no estira ni centra su contenido: por eso el menú queda pegado arriba en vez de alineado con el logo. Estiramos toda la cadena y centramos. Solo en escritorio: en móvil el contenedor pasa a position:fixed y este centrado no aplica (además movería la hamburguesa al centro). Si el menú queda unos píxeles alto o bajo, ajusta --lcp-bar-offset (ej. 2px o -3px) en el bloque de variables de arriba. Se usa "top" y no "transform" a propósito: un transform en un ancestro convierte el position:fixed del drawer móvil en absolute y lo rompe. */ @media (min-width: 1025px) { /* El :not([class*="elementor-hidden"]) NO es decorativo. Sin él, este display:flex (0,2,0) le gana a .elementor-hidden-desktop de Elementor (0,1,0), que no lleva !important. Consecuencia real: si alguien oculta el widget Shortcode desde Elementor, seguía mostrándose igual, y el header terminaba con DOS menús. Solo hace falta en el wrapper externo: si ese queda en display:none, lo de dentro no se pinta pase lo que pase con su display. */ .elementor-widget-shortcode:has(.lcp-static-menu):not([class*="elementor-hidden"]), .elementor-shortcode:has(.lcp-static-menu), .elementor-shortcode:has(.lcp-static-menu) > .elementor-element, .elementor-shortcode:has(.lcp-static-menu) > .elementor-element > .elementor-widget-container, .elementor-shortcode:has(.lcp-static-menu) .ekit-wid-con { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .elementor-shortcode:has(.lcp-static-menu) .ekit-wid-con { position: relative; top: var(--lcp-bar-offset, 0); } } /* --- Banda apretada: 1025px–1499px ----------------------------------- DECISIÓN DE PRODUCTO: en laptops pequeños se muestra el menú horizontal completo, no la hamburguesa. Si no cabe en una fila, se acepta que pase a dos. Esconderlo por debajo de 1200px se probó y se descartó: dejaba el header vacío en pantallas de 1198px, que es peor. Los 7 items de primer nivel ocupan ~1150px con el padding y la letra de escritorio, así que UNA sola fila solo es posible por encima de ~1500px. Aquí el padding y la letra se comprimen con el viewport para estirar ese punto lo más abajo posible y, cuando ya no alcanza, para que las dos filas queden compactas en vez de inflar el header. Si quieren una sola fila también en laptops pequeños, el CSS ya no da más: la palanca es acortar los labels en lcp_menu_items() ("Events" en vez de "Events & Webinars", "Partners" en vez de "Preferred Providers"). Es decisión de contenido, no técnica. Los !important son necesarios, no pereza: el CSS generado de ElementsKit apunta con #ekit-megamenu-menu1 (especificidad 1,1,0) y un ID le gana a cualquier cantidad de clases, así que 0,3,0 no alcanza. Es el mismo motivo documentado en el acordeón móvil más abajo. Las interpolaciones son lineales entre los extremos de la banda, no un vw suelto (un vw suelto casi no comprime en el extremo bajo): padding: 4px @1025px -> 15px @1500px = calc(2.32vw - 19.8px) font-size: 13px @1025px -> 17px @1500px = calc(0.84vw + 4.4px) El clamp fija esos topes para que nada se salga de rango si el @media cambia. Para calibrar: si quieren estirar la fila única un poco más abajo, baja el mínimo del font-size (13px); por debajo de 12px el nav se vuelve difícil de leer y no vale la pena. */ @media (min-width: 1025px) and (max-width: 1499px) { .lcp-static-menu .elementskit-navbar-nav > li > a { padding-right: clamp(4px, calc(2.32vw - 19.8px), 15px) !important; padding-left: clamp(4px, calc(2.32vw - 19.8px), 15px) !important; /* Vertical más corto: con dos filas, 12px arriba y abajo por fila estiraban el header casi al doble de alto. */ padding-top: 8px !important; padding-bottom: 8px !important; font-size: clamp(13px, calc(0.84vw + 4.4px), 17px) !important; } /* La segunda fila es un estado esperado en esta banda, no un accidente: se centra igual que la primera (lo hace justify-content del contenedor) y lleva un poco de aire entre filas. */ .lcp-static-menu .elementskit-navbar-nav { flex-wrap: wrap !important; row-gap: 2px !important; } } /* Hamburguesa y panel offcanvas: ocultos en escritorio. */ .lcp-static-menu-hamburger { display: none; } /* Los CTA del drawer solo existen en móvil (en escritorio los pinta Elementor en el header). Ver sección 3. */ .lcp-static-menu-cta { display: none; } .lcp-static-menu .elementskit-nav-identity-panel { display: none; } @media (prefers-reduced-motion: reduce) { .lcp-static-menu .elementskit-submenu-panel, .lcp-static-menu .elementskit-submenu-indicator { transition: none; } } /* ========================================================================= 3. MÓVIL — drawer offcanvas ------------------------------------------------------------------------- Breakpoint: 1024px. Coincide a propósito con el data-responsive-breakpoint="1024" del widget original, así el CSS de ElementsKit conmuta en el mismo punto que el nuestro y no hay una banda donde él crea que es escritorio y nosotros estemos pintando el drawer. Se probó subirlo a 1199px para que la hamburguesa llegara antes de que la barra se partiera en dos filas, y se DESCARTÓ: dejaba el header sin navegación en pantallas de ~1198px. En laptops pequeños se prefiere el menú horizontal completo, aunque ocupe dos filas. La compresión de la sección 2 es lo que mantiene esas dos filas presentables. Si algún día mueves el breakpoint, cámbialo en TRES lugares: - este @media - el @media (min-width: 1025px) de la sección 2 - MOBILE_QUERY en custom-lcp-menu.js ...y sube también el "responsive breakpoint" del widget ElementsKit oculto en Elementor, o su CSS de escritorio se peleará con el drawer. ========================================================================= */ @media (max-width: 1024px) { .lcp-static-menu-hamburger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; border: 0; background: none; color: inherit; cursor: pointer; } .lcp-static-menu-hamburger .elementskit-menu-hamburger-icon { display: block; width: 100%; height: 2px; background: currentColor; border-radius: 2px; } /* El contenedor se convierte en panel deslizante. */ .lcp-static-menu.elementskit-menu-offcanvas-elements { position: fixed; top: 0; left: 0; z-index: 9999; width: min(320px, 85vw); height: 100%; /* El hueco de arriba reserva el sitio del panel de identidad (logo + cerrar), que va en position:absolute. Se pone en el padding del drawer y no como margin del primer hijo a propósito: así el hueco existe sin importar QUÉ hijo quede primero. !important obligatorio: ElementsKit define el padding del offcanvas desde #ekit-megamenu-menu1 (1,1,0) y le ganaba a este selector (0,2,0). Por eso los items del menú y los botones se veían pegados al borde, a unos 8px, en vez de a 22px. */ padding: var(--lcp-drawer-pad-top) var(--lcp-drawer-pad-x) 24px !important; overflow-y: auto; /* Contenido ANCLADO ARRIBA. ElementsKit hace de este contenedor un flex con la columna INVERTIDA y además deja que el