/** * Holnix — Header styles * Header, navegación, menú mobile/desktop y botones de cuenta/CTA. * * Sticky + opaco por defecto: ocupa su propio espacio real en el flujo del * documento (position: sticky), sin backdrop-filter ni recompute en cada * frame de scroll. * * Excepción — páginas donde el primer bloque real es "ancho completo" * (align:full, cualquiera de los ~30 bloques del tema, o el hero de una * entrada con imagen destacada, .holnix-single-hero): el recibe la * clase .has-transparent-header (ver holnix_page_has_overlay_hero() en * inc/theme-setup.php) y ese bloque lleva margin-top negativo (regla * genérica ".alignfull:first-child" en style.css) para arrancar detrás del * header. Ahí el header queda transparente en TODA la página, no solo sobre * ese primer bloque — nunca pasa a sólido, sin importar cuánto se scrollee. */ /* ================================== HEADER ================================== */ .holnix-header { position: sticky; top: 0; z-index: 100; width: 100%; color: #fff; background: #171717; } body.has-transparent-header .holnix-header { background: transparent; } .site { position: relative; } .holnix-header__container { max-width: 1440px; margin: 0 auto; padding: 28px 0; width: 100%; } @media (min-width: 768px) { .holnix-header__container { padding-left: 40px; padding-right: 40px; } } @media (min-width: 1024px) { .holnix-header__container { padding-left: 64px; padding-right: 64px; } } .holnix-header__inner { position: relative; display: flex; align-items: center; justify-content: center; gap: var(--wp--preset--spacing--small); padding: var(--wp--preset--spacing--x-small) 0; } .holnix-header__inner a{ color: #fff; } .holnix-header__logo { display: flex; align-items: center; flex-shrink: 0; z-index: 1; } .holnix-header__logo img { display: block; width: 141.6px !important; height: 32px !important; } .holnix-header__site-title { font-size: var(--wp--preset--font-size--medium); font-weight: 700; color: var(--wp--preset--color--white); } .holnix-header__btn { display: inline-flex; align-items: center; justify-content: center; padding: var(--wp--preset--spacing--x-small) var(--wp--preset--spacing--small); border-radius: var(--wp--custom--border-radius--md); font-size: var(--wp--preset--font-size--normal); font-weight: 700; text-decoration: none; transition: background-color 0.3s ease, color 0.3s ease; } .holnix-header__btn--primary { background-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--white); } .holnix-header__btn--primary:hover, .holnix-header__btn--primary:focus-visible { background-color: var(--wp--preset--color--primary-hover); } /* ================================== NAVEGACIÓN ================================== */ .holnix-header__menu-toggle-wrap { position: relative; display: flex; flex-shrink: 0; width: 44px; height: 44px; /* * Por encima del z-index:90 de .holnix-header__nav-wrapper.is-open en * mobile (ver media query más abajo): el menú abierto ahora cubre toda la * pantalla, incluida el área del header, así que el botón de cerrar * necesita quedar explícitamente arriba en el stacking order para seguir * siendo clickeable. */ z-index: 95; } .holnix-header__menu-toggle { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: transparent; border: none; cursor: pointer; } .holnix-header__menu-icon { position: relative; display: block; width: 14.4px; height: 1.2px; background-color: var(--wp--preset--color--white); transition: background-color 0.3s ease; } .holnix-header__menu-icon::before, .holnix-header__menu-icon::after { content: ""; position: absolute; left: 0; width: 14.4px; height: 1.2px; background-color: var(--wp--preset--color--white); transition: transform 0.3s ease, top 0.3s ease; } .holnix-header__menu-icon::before { top: -4.8px; } .holnix-header__menu-icon::after { top: 4.8px; } .holnix-header__menu-toggle[aria-expanded="true"] .holnix-header__menu-icon { background-color: transparent; } .holnix-header__menu-toggle[aria-expanded="true"] .holnix-header__menu-icon::before { top: 0; transform: rotate(45deg); } .holnix-header__menu-toggle[aria-expanded="true"] .holnix-header__menu-icon::after { top: 0; transform: rotate(-45deg); } .holnix-header__nav-wrapper { position: absolute; top: 100%; left: 0; right: 0; display: none; flex-direction: column; /* * Sólido fijo, sin alpha — todo el panel del menú (principal + submenús) * queda igual de opaco, no solo los submenús (ver .sub-menu.liquid-glass * más abajo). El slider de ACF (header_mobile_nav_overlay_opacity) ya NO * controla este panel, solo la pill de arriba (.holnix-header__inner) — * quedaba ilegible con el hero atravesando el menú abierto en valores bajos. */ background: rgb(23, 23, 23); box-shadow: var(--wp--custom--shadow--md); padding: var(--wp--preset--spacing--small); border-radius: var(--wp--custom--border-radius--xl); } .holnix-header__nav-wrapper.is-open { display: flex; } /* * Mobile: el menú abierto flota como un panel dropdown (91% de ancho, * anclado justo debajo del header), siguiendo el diseño de Figma — * "Navbar & Menu dropdown" (node 1178:15215): el panel se ajusta a su * contenido (altura auto/"hug"), no ocupa toda la pantalla ni queda * centrado en el medio del viewport. max-height + overflow-y:auto quedan * de fallback para menús muy largos en pantallas chicas. * El botón de cerrar queda visible encima gracias al z-index de * .holnix-header__menu-toggle-wrap. */ @media (max-width: 1023.98px) { /* * Todo el panel (menú principal + submenús anidados) sólido fijo — ver * el comentario en la regla base .holnix-header__nav-wrapper de arriba. * El slider de ACF ya no toca este elemento. */ .holnix-header__nav-wrapper.is-open { position: fixed; top: 100px; right: 4.5%; left: 4.5%; max-height: calc(100dvh - 116px); background: rgb(23, 23, 23); border-radius: var(--wp--custom--border-radius--xl); overflow-y: auto; z-index: 90; box-shadow: var(--wp--custom--shadow--lg); padding: var(--wp--preset--spacing--small); } } .holnix-header__nav { margin: 16px 24px; padding: 18px 44px; border-radius: 30px; } /* * Performance Mode (D1): "Liquid Glass" ya no lleva backdrop-filter ni el * filtro SVG de desplazamiento (ver el historial de assets/js/liquid-glass.js * y assets/js/displacement-utils.js, removidos del enqueue) — backdrop-filter * obliga a recomponer en vivo lo que hay detrás en cada frame de scroll, en * cualquier ancho, no solo mobile. Queda solo el "recipe" plano (overlay + * inset highlights) que ya sostenía el look sin blur. * Overlay oscuro fijo (no token de marca) para que el texto blanco de los * links se lea encima de cualquier fondo, incluido blanco. * rgba fijos en el box-shadow: son el "recipe" del efecto (glass-box del repo), no tokens de marca. */ .liquid-glass { /* Overlay oscuro: sin esto, sobre páginas de fondo blanco el texto de los links (blanco) queda ilegible. */ background: rgba(0, 0, 0, 0.20); box-shadow: 1px 1px 1px 0px rgba(255, 255, 255, 0.6) inset, -1px -1px 1px 0px rgba(255, 255, 255, 0.6) inset, 0px 0px 16px 0px rgba(0, 0, 0, 0.04); } .liquid-glass--circle { border-radius: 50%; overflow: hidden; } /* * Variante para barras/píldoras (ej. holnix-tabla-de-precios__toggle): * mismo criterio que --circle, pero con el radio "full" del design system en * vez de 50% — liquid-glass.js lee el border-radius computado del elemento * (parseFloat(getComputedStyle(el).borderRadius), ver applyGlass()) para * pasarlo como radio al filtro SVG, así que la forma la define este CSS, no * el JS. */ .liquid-glass--pill { border-radius: 9999px; overflow: hidden; } /* * Glass estático — mismo "recipe" visual de .liquid-glass (fondo + inset * highlights), sin blur alguno. Ya era la variante sin JS para elementos * chicos/repetidos (ej. los chips de ícono de publisher-metadata); en * Performance Mode es idéntica a .liquid-glass salvo por no llevar * overflow:hidden con forma propia. */ .glass-static { background: rgba(0, 0, 0, 0.20); box-shadow: 1px 1px 1px 0px rgba(255, 255, 255, 0.6) inset, -1px -1px 1px 0px rgba(255, 255, 255, 0.6) inset, 0px 0px 16px 0px rgba(0, 0, 0, 0.04); } /* * Sin el "pill" visual en el nav de links en mobile (el wrap circular del * menu-toggle sí lo mantiene). */ @media (max-width: 1023.98px) { .holnix-header__nav.liquid-glass { background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } /* Sin margin/padding propios del nav en mobile: el espaciado ya lo da la ventana flotante */ .holnix-header__nav { margin: 0; padding: 0; } /* * El submenú (ej. "Solutions" > "For Publishers"...) NO usa * --holnix-header-mobile-nav-overlay-alpha — ese slider es solo para el * menú principal (el panel .holnix-header__nav-wrapper). Color sólido * fijo, sin alpha: si el admin baja el overlay del menú principal a algo * transparente, el submenú (que no tiene caja propia, solo se apoya en lo * que haya detrás) no debe transparentarse con él. */ .holnix-header__menu .sub-menu.liquid-glass { background: rgb(23, 23, 23); box-shadow: none; } /* Fuente más chica en mobile: el nav y los botones tenían texto cortado */ .holnix-header__menu a { font-size: 12px; } a.secondary-btn, button.secondary-btn, a.primary-btn, button.primary-btn, input.primary-btn, .holnix-header__btn--gradient, .primary-btn .wp-block-button__link, .secondary-btn .wp-block-button__link { padding: 6px 10px; font-size: 12px; white-space: nowrap; } /* La fila del header (logo + botones + hamburguesa) no hace wrap: en pantallas angostas se pasaba del ancho disponible y generaba overflow horizontal. Achico gaps para que entre. */ .holnix-header__inner { gap: var(--wp--preset--spacing--x-small); margin: 12px auto; } .holnix-header__account-wrapper { gap: 6px; } /* * Wrapper del menú mobile (logo + cuenta + hamburguesa) envuelto en liquid * glass. fit-content (no 100% ni max-width fijo): el pill se envuelve al * tamaño real de sus elementos internos en vez de estirarse al ancho del * container — con el padding lateral del container en 0 (ver arriba) y * margin:auto centrándolo, así no queda ni con hueco fijo en las esquinas * en celulares chicos ni estirado como barra vacía en anchos más grandes. */ .holnix-header__inner.liquid-glass { width: fit-content; height: 56px; padding: var(--wp--preset--spacing--x-small) var(--wp--preset--spacing--small); border-radius: 30px; /* Overlay oscuro con alpha ajustable — esta es la barra que se ve siempre (logo + login + demo + hamburguesa), no solo el panel del menú desplegable (.holnix-header__nav-wrapper.is-open, arriba). Mismo campo ACF (header_mobile_nav_overlay_opacity) controla ambas. Reemplaza el rgba(0,0,0,0.20) fijo heredado de .liquid-glass, que quedaba demasiado transparente para leer el logo/botones sobre fondos claros. */ background: rgba(23, 23, 23, var(--holnix-header-mobile-nav-overlay-alpha, 1)); } .holnix-header__logo img { width: 100px !important; height: 22px !important; } } @media (min-width: 768px) and (max-width: 1023.98px) { /* * En tablet el pill sí debe ocupar el ancho completo del container (a * diferencia de mobile, que se envuelve a su contenido): sobreescribe el * width:fit-content de la regla mobile de arriba para que haya espacio * real donde distribuir logo (izquierda) y cuenta+hamburguesa (derecha). */ .holnix-header__inner.liquid-glass { width: 100%; } /* * Con el pill a ancho completo, .holnix-header__inner (justify-content: * center heredado del base) apilaba logo + cuenta + hamburguesa juntos en * el centro. Diseño pide logo pegado a la izquierda y cuenta+hamburguesa * pegados a la derecha: margin-left:auto en account-wrapper absorbe todo * el espacio libre antes de él, empujando ese grupo (cuenta + toggle, * que mantienen su gap normal entre sí) al extremo derecho. */ .holnix-header__account-wrapper { margin-left: auto; } } /* Pantallas muy angostas: el logo se mantiene siempre visible, pero se achica más y se ajustan gaps/padding de cuenta+hamburguesa para que todo siga entrando en el ancho disponible sin overflow horizontal (.holnix-header__inner no hace wrap, ver regla arriba). */ @media (max-width: 417.98px) { .holnix-header__logo img { width: 72px !important; height: 16px !important; } .holnix-header__inner { gap: 6px; } .holnix-header__account-wrapper { gap: 4px; } a.secondary-btn, button.secondary-btn, a.primary-btn, button.primary-btn, input.primary-btn, .holnix-header__btn--gradient, .primary-btn .wp-block-button__link, .secondary-btn .wp-block-button__link { padding: 6px 8px; } } /* Sin Liquid Glass en el .holnix-header__inner en desktop: en desktop no hay hamburguesa que envolver, y el blur/shadow del cristal se vería como un recuadro flotando sobre el logo/CTA sin necesidad. */ @media (min-width: 1024px) { .holnix-header__inner.liquid-glass { background-color: transparent; box-shadow: none; } } .holnix-header__menu { display: flex; flex-direction: column; align-items: center; gap: var(--wp--preset--spacing--x-small); list-style: none; } .holnix-header__menu ul { list-style: none; } .holnix-header__menu a { display: block; padding: 0; color: var(--wp--preset--color--white); font-size: 14px; font-weight: 700; text-align: center; text-decoration: none; transition: color 0.3s ease; } .holnix-header__menu a:hover, .holnix-header__menu a:focus-visible { color: var(--wp--preset--color--primary); } /* Textos del menú mobile alineados a la izquierda en vez de centrados */ @media (max-width: 1023.98px) { .holnix-header__menu { align-items: flex-start; } .holnix-header__menu a { /* Sin flash de fondo del navegador al tocar un link (ni azul ni morado); el feedback de click es el color de texto en :active de abajo */ -webkit-tap-highlight-color: transparent; color: #FAFAFA; text-align: left; } .holnix-header__menu > li > a { color: #737373; } /* Al hacer click/tap el link se pone morado, y se mantiene así si queda como la página activa */ .holnix-header__menu a:active, .holnix-header__menu .current-menu-item > a { color: #A825C4; } .holnix-header__menu > li.menu-item-has-children { width: 100%; margin-bottom: 35px; } /* * Sin dropdown/acordeón en mobile: el submenú (ej. "Solutions") se * muestra siempre aplanado debajo de su padre, como una lista simple. * El toggle de assets/js/main.js (clase .is-submenu-open) queda limitado * a desktop. */ .holnix-header__menu .sub-menu { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--x-small); margin-top: var(--wp--preset--spacing--x-small); padding-left: var(--wp--preset--spacing--small); } /* * Efecto blur experimental (ACF "Header - Barra de navegación * (mobile/tablet)" → header_mobile_glass_blur_effect, default apagado — * ver holnix_body_class_mobile_glass_enabled() en theme-setup.php). * Sin transparencia el blur no se nota (blurear un color plano no cambia * nada) — por eso, con el switch prendido, el fondo sólido de arriba se * reemplaza por el mismo rgba(23,23,23, alpha) que ya usa la barra * superior (header_mobile_nav_overlay_opacity), + backdrop-filter. Mayor * especificidad que las reglas sólidas de arriba (body + clase extra), * así que gana sin importar el orden. */ body.holnix-mobile-glass-on .holnix-header__inner.liquid-glass { background: rgba(23, 23, 23, var(--holnix-header-mobile-nav-overlay-alpha, 1)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* * El panel del menú (.holnix-header__nav-wrapper.is-open) siempre queda * sólido en #171717, sin importar el slider de opacidad ni el switch de * glass — igual que el criterio de .sub-menu.liquid-glass más arriba. El * slider de ACF (header_mobile_nav_overlay_opacity) es solo para la pill * superior (.holnix-header__inner). */ body.holnix-mobile-glass-on .holnix-header__nav-wrapper.is-open { background: rgb(23, 23, 23); backdrop-filter: none; -webkit-backdrop-filter: none; } } /* * Toggle/tabs de idioma en mobile: wrapper armado por JS (assets/js/main.js) * agrupando los
  • sueltos del menú. Mismo segmented * control con 2 idiomas (toggle) o más (tabs) — el layout escala solo. */ .holnix-header__lang-toggle { display: flex; justify-content: flex-start; width: 100%; } .holnix-header__lang-toggle-list { display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 9999px; background: rgba(255, 255, 255, 0.12); list-style: none; } .holnix-header__lang-toggle-list .lang-item a { display: block; padding: 6px 14px; border-radius: 9999px; color: var(--wp--preset--color--white); font-size: 12px; font-weight: 700; text-align: center; text-decoration: none; transition: background-color 0.3s ease, color 0.3s ease; } .holnix-header__lang-toggle-list li:not(.current-lang) a:hover, .holnix-header__lang-toggle-list li:not(.current-lang) a:focus-visible { color: #A528C5; } .holnix-header__lang-toggle-list .current-lang a { background: #A528C5; color: var(--wp--preset--color--white); } .holnix-header__nav-wrapper .holnix-header__btn { margin-top: var(--wp--preset--spacing--small); width: 100%; } /* ================================== ACCOUNT / CTA (Login + Get a Demo) ================================== */ .holnix-header__account-wrapper { display: flex; align-items: center; gap: var(--wp--preset--spacing--x-small); } /* * Selector de idioma (Polylang) junto al Login: solo desktop. En mobile * sigue viviendo únicamente dentro del menú (holnix-header__menu), como * ya estaba. Ver holnix_render_desktop_lang_switcher() en inc/theme-setup.php. */ .holnix-header__lang-switcher-wrap { display: none; position: relative; } .holnix-header__lang-switcher-toggle { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: transparent; border: none; color: var(--wp--preset--color--white); cursor: pointer; } .holnix-header__lang-switcher-icon { width: 20px; height: 20px; } /* * Dropdown de idiomas: mismo "recipe" visual que .holnix-header__menu * .sub-menu (panel oscuro opaco, sin backdrop-filter), abierto vía JS * (assets/js/main.js) agregando .is-open al wrap. */ .holnix-header__lang-switcher-menu { display: none; position: absolute; top: 100%; right: -8px; flex-direction: column; min-width: 40px; margin-top: var(--wp--preset--spacing--x-small); padding: var(--wp--preset--spacing--x-small); border-radius: var(--wp--custom--border-radius--lg); background: rgba(20, 20, 20, 0.72); list-style: none; z-index: 5; } .holnix-header__lang-switcher-wrap.is-open .holnix-header__lang-switcher-menu { display: flex; } .holnix-header__lang-switcher-menu a { display: block; padding: var(--wp--preset--spacing--x-small); color: var(--wp--preset--color--white); font-size: 14px; font-weight: 700; text-align: center; text-decoration: none; white-space: nowrap; transition: color 0.3s ease; } .holnix-header__lang-switcher-menu li:not(.current-lang) a:hover, .holnix-header__lang-switcher-menu li:not(.current-lang) a:focus-visible { color: #A528C5; } .holnix-header__lang-switcher-menu .current-lang > a { background: #A528C5; color: var(--wp--preset--color--white); border-radius: var(--wp--custom--border-radius--sm); } /* * .secondary-btn * Calificado con "a"/"button" a propósito: cuando esta clase se usa como * className de un bloque core/button, WordPress la pone en el
    que * envuelve al link (ver .secondary-btn .wp-block-button__link más abajo). * Sin el tag, esta regla también pintaría ese div como botón completo, * duplicando el estilo (div + link) y generando un "botón doble" visual. * Colores placeholder (pendiente confirmar hex exactos en Figma — * la API de variables devolvió 403, ver .claude/context/design-system.md). * Al confirmarse, solo hace falta actualizar estas 3 variables. */ a.secondary-btn, button.secondary-btn { --secondary-btn-bg: #FFFFFF; --secondary-btn-border: #787878; --secondary-btn-color: #333333; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 8px 16px; border-radius: 24px; border: 1px solid var(--secondary-btn-border); background: var(--secondary-btn-bg); color: var(--secondary-btn-color); font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; line-height: 1.21; letter-spacing: 0; text-decoration: none; cursor: pointer; transition: background-color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease; } a.secondary-btn:hover, button.secondary-btn:hover { background: var(--wp--preset--color--light-gray, #F4F4F4); } a.secondary-btn:focus-visible, button.secondary-btn:focus-visible { outline: 2px solid #A825C4; outline-offset: 2px; } a.secondary-btn:disabled, button.secondary-btn:disabled { opacity: 0.5; cursor: not-allowed; background: var(--secondary-btn-bg); border-color: var(--secondary-btn-border); } /* * .holnix-header__btn--gradient * Fondo morado sólido translúcido + borde en gradiente de marca (Figma: * fondo rgba(165,36,196,0.8), borde 2px linear-gradient 135deg). * border-image no respeta border-radius, por eso el borde en gradiente * se hace con doble background (padding-box + border-box). */ .holnix-header__btn--gradient { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 8px 16px; border: 2px solid transparent; border-radius: 24px; background: linear-gradient(rgba(165, 36, 196, 0.8), rgba(165, 36, 196, 0.8)) padding-box, linear-gradient(135deg, var(--light-purple, #A24DD1) 0%, var(--purple, #A524C4) 50%, var(--pink, #FD31B6) 100%) border-box; color: var(--wp--preset--color--white); font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; line-height: 1.21; letter-spacing: 0; text-decoration: none; cursor: pointer; transition: opacity 0.3s ease; } .holnix-header__btn--gradient:hover, .holnix-header__btn--gradient:focus-visible { opacity: 0.85; } .holnix-header__btn--gradient:disabled { opacity: 0.5; cursor: not-allowed; } /* * .primary-btn * Botón genérico de marca para usar fuera del header (bloques, CTAs, etc.). * Mismos estilos que .holnix-header__btn--gradient — se separa en su propia * clase para no acoplar el resto del sitio al contexto del header. * Calificado con "a"/"button" por la misma razón que .secondary-btn arriba: * evitar que la regla también pinte el
    * que envuelve al link cuando se usa como className de un core/button. */ a.primary-btn, button.primary-btn, input.primary-btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 8px 16px; border: 2px solid transparent; border-radius: 24px; background: linear-gradient(rgba(165, 36, 196, 0.8), rgba(165, 36, 196, 0.8)) padding-box, linear-gradient(135deg, var(--light-purple, #A24DD1) 0%, var(--purple, #A524C4) 50%, var(--pink, #FD31B6) 100%) border-box; color: var(--wp--preset--color--white); font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; line-height: 1.21; letter-spacing: 0; text-decoration: none; cursor: pointer; transition: opacity 0.3s ease; } a.primary-btn:hover, button.primary-btn:hover, input.primary-btn:hover, a.primary-btn:focus-visible, button.primary-btn:focus-visible, input.primary-btn:focus-visible { opacity: 0.85; } a.primary-btn:disabled, button.primary-btn:disabled, input.primary-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* * .primary-btn / .secondary-btn dentro de un bloque core/button * La clase va en el
    que envuelve al link (Gutenberg quita ahí * "wp-block-button" vía render_block en inc/acf-blocks.php para que no * queden ambas clases mezcladas), no en el * — por eso acá se repiten los mismos estilos apuntando al link interno. */ .primary-btn .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 8px 16px; border: 2px solid transparent; border-radius: 24px; background: linear-gradient(rgba(165, 36, 196, 0.8), rgba(165, 36, 196, 0.8)) padding-box, linear-gradient(135deg, var(--light-purple, #A24DD1) 0%, var(--purple, #A524C4) 50%, var(--pink, #FD31B6) 100%) border-box; color: var(--wp--preset--color--white); font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; line-height: 1.21; letter-spacing: 0; text-decoration: none; cursor: pointer; transition: opacity 0.3s ease; } .primary-btn .wp-block-button__link:hover, .primary-btn .wp-block-button__link:focus-visible { opacity: 0.85; } .secondary-btn .wp-block-button__link { --secondary-btn-bg: #FFFFFF; --secondary-btn-border: #787878; --secondary-btn-color: #333333; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 8px 16px; border-radius: 24px; border: 1px solid var(--secondary-btn-border); background: var(--secondary-btn-bg); color: var(--secondary-btn-color); font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; line-height: 1.21; letter-spacing: 0; text-decoration: none; cursor: pointer; transition: background-color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease; } .secondary-btn .wp-block-button__link:hover { background: var(--wp--preset--color--light-gray, #F4F4F4); } .secondary-btn .wp-block-button__link:focus-visible { outline: 2px solid #A825C4; outline-offset: 2px; } /* Tablet (768px+) */ @media (min-width: 768px) { .holnix-header__inner { padding: var(--wp--preset--spacing--small) 0; } } /* Desktop (1024px+) */ @media (min-width: 1024px) { /* * Grid de 3 columnas (logo / nav / cuenta) en vez de flex + space-between: * con space-between el nav queda centrado SOLO si logo y cuenta+CTA miden * exactamente lo mismo, algo que no pasa acá (Figma: nodo 4:15 del header, * el
      de Solutions/Product/Pricing/Resources va centrado en el ancho * total del header, no "en el espacio que sobra entre logo y cuenta"). * Con columnas 1fr auto 1fr, la columna central (nav) queda siempre * centrada en el ancho total sin importar cuánto midan los costados. * * grid-row: 1 explícito en los 3 hijos: en el HTML, account-wrapper (col 3) * viene antes que nav-wrapper (col 2) — sin fila explícita, el cursor de * auto-placement de Grid ya "pasó" la columna 2 al ubicar la cuenta en la * fila 1 y no puede retroceder, así que nav-wrapper caía solo a una fila 2 * nueva (más alta que logo/cuenta, y align-items:center lo centraba dentro * de ESA fila en vez de compartir la fila con el resto → menú desalineado * hacia abajo). */ .holnix-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; justify-content: initial; } .holnix-header__menu-toggle-wrap { display: none; } .holnix-header__logo { grid-row: 1; grid-column: 1; justify-self: start; } .holnix-header__nav-wrapper { grid-row: 1; grid-column: 2; justify-self: center; position: static; display: flex; flex-direction: row; align-items: center; gap: var(--wp--preset--spacing--medium); background: none; box-shadow: none; padding: 0; width: auto; } .holnix-header__account-wrapper { grid-row: 1; grid-column: 3; justify-self: end; } .holnix-header__lang-switcher-wrap { display: flex; flex-shrink: 0; width: 40px; height: 40px; } /* El switcher de idioma dentro del menú es el de mobile: en desktop se muestra solo la copia de .holnix-header__lang-switcher-wrap, junto al Login. */ .holnix-header__menu .lang-item, .holnix-header__menu .holnix-header__lang-toggle { display: none; } .holnix-header__nav { width: auto; } .holnix-header__menu { flex-direction: row; align-items: center; gap: var(--wp--preset--spacing--medium); } .holnix-header__menu a { padding: 0; } .holnix-header__nav-wrapper .holnix-header__btn { margin-top: 0; width: auto; } /* Submenús (ej. "Solutions"): ocultos hasta hacer click, con Liquid Glass */ .holnix-header__menu li.menu-item-has-children { position: relative; } .holnix-header__menu li.menu-item-has-children > a { display: inline-flex; align-items: center; gap: 6px; } .holnix-header__menu li.menu-item-has-children > a::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-top: -4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); } .holnix-header__menu > li > a { padding: 8px 16px; margin: -8px -16px; border-radius: 9999px; transition: background-color 0.3s ease, color 0.3s ease; } .holnix-header__menu > li > a:hover, .holnix-header__menu > li > a:focus-visible, .holnix-header__menu > li.current-menu-item > a { background: #A529C6; color: var(--wp--preset--color--white); } .holnix-header__menu .sub-menu { display: none; position: absolute; top: 100%; left: -40px; flex-direction: column; min-width: 200px; margin-top: calc(var(--wp--preset--spacing--small) + 10px); padding: 20px; border-radius: var(--wp--custom--border-radius--xl); /* Panel opaco oscuro — sin backdrop-filter (Performance Mode, ver D1) */ background: rgba(20, 20, 20, 0.92); z-index: 5; } /* * Blur solo acá: únicamente la barra de navegación (el pill con los links * Solutions/Product/Pricing/Resources + CTA) y únicamente en desktop * (1024px+, ya dentro de este media query). En mobile/tablet este mismo * selector queda neutralizado más arriba (.holnix-header__nav.liquid-glass * { background:none; box-shadow:none } dentro de @media max-width:1023.98px) * y no lleva backdrop-filter — el resto de usos de .liquid-glass en el sitio * (logo+cuenta en mobile, círculo del hamburger, submenús, otros bloques) * no se tocan. */ .holnix-header__nav.liquid-glass { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* * Switch ON/OFF (ACF "Header - Efecto Liquid Glass (desktop)", campo * header_desktop_glass_effect) — .holnix-desktop-glass-off en el * viene de holnix_body_class_desktop_glass_disabled() en theme-setup.php. * Mayor especificidad que la regla de arriba (body + 2 clases vs 1 clase), * así que gana sin importar el orden. Solo apaga el blur — el fondo * rgba(0,0,0,0.20) de .liquid-glass (base, cualquier ancho) se mantiene. */ body.holnix-desktop-glass-off .holnix-header__nav.liquid-glass { backdrop-filter: none; -webkit-backdrop-filter: none; } .holnix-header__menu li.menu-item-has-children.is-submenu-open > .sub-menu { display: flex; } .holnix-header__menu .sub-menu a { padding: var(--wp--preset--spacing--x-small); border-radius: var(--wp--custom--border-radius--md); text-align: left; white-space: nowrap; } .holnix-header__menu .sub-menu a:hover { background: #A529C6; color: var(--wp--preset--color--white); } } /* * Performance Mode (D4): el hack de pointer-events que angostaba el área * clickeable del header a sus píxeles reales de contenido se elimina — solo * existía porque el header era position:fixed y su caja (huecos vacíos * incluidos) cubría contenido real detrás al scrollear. Sticky nunca * superpone contenido de esa forma: el header ocupa su propio espacio en el * flujo, así que no hay nada "detrás" que pueda quedar bloqueado. */ /* Accesibilidad */ @media (prefers-reduced-motion: reduce) { .holnix-header__menu-icon, .holnix-header__menu-icon::before, .holnix-header__menu-icon::after, .holnix-header__btn, .holnix-header__menu a, a.secondary-btn, button.secondary-btn, a.primary-btn, button.primary-btn, input.primary-btn, .primary-btn .wp-block-button__link, .secondary-btn .wp-block-button__link { transition: none; } }