/* ============================================================ cx-navbar — Resizable scrolling navbar (Aceternity-style morph) Non-invasive: layered on top of .cx-nav from cx-v2.css Adds: shrink-on-scroll + floating pill shape + hover indicator ============================================================ */ /* Smooth base transition on navbar */ .cx-nav { transition: width .55s cubic-bezier(.4, 0, .2, 1), max-width .55s cubic-bezier(.4, 0, .2, 1), top .55s cubic-bezier(.4, 0, .2, 1), left .55s cubic-bezier(.4, 0, .2, 1), right .55s cubic-bezier(.4, 0, .2, 1), border-radius .55s cubic-bezier(.4, 0, .2, 1), border-color .35s ease, background-color .35s ease, box-shadow .45s ease, backdrop-filter .35s ease, -webkit-backdrop-filter .35s ease, transform .55s cubic-bezier(.4, 0, .2, 1); will-change: width, top, transform, border-radius; } /* ---------- Scrolled state ---------- */ body.cx-nav-scrolled .cx-nav { top: 14px; left: 50%; right: auto; transform: translateX(-50%); width: min(94%, 1140px); border-radius: 999px; background: rgba(255, 255, 255, .82); border: 1px solid rgba(15, 23, 42, .08); border-bottom-color: rgba(15, 23, 42, .08); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); box-shadow: 0 0 0 1px rgba(15, 23, 42, .04), 0 6px 24px -8px rgba(15, 23, 42, .12), 0 16px 50px -18px rgba(15, 23, 42, .18), inset 0 1px 0 rgba(255, 255, 255, .55); } /* Inner needs to keep working — adjust padding when collapsed */ body.cx-nav-scrolled .cx-nav__inner { padding: 0 16px; } /* Squeeze hidden / unused stuff a touch when scrolled */ body.cx-nav-scrolled .cx-nav__phone span { display: none; } body.cx-nav-scrolled .cx-nav__phone { padding: 8px 10px; } /* Megamenu: when the navbar is collapsed, the dropdown should still align cleanly under the trigger. We give the megamenu a soft floating shadow that matches. */ body.cx-nav-scrolled .cx-megamenu { margin-top: 6px; border-radius: 18px; box-shadow: 0 0 0 1px rgba(15, 23, 42, .06), 0 14px 40px -12px rgba(15, 23, 42, .22), 0 28px 64px -24px rgba(15, 23, 42, .28); } /* ---------- Hover pill indicator under nav items ---------- */ .cx-nav__links { /* static (no relative) para que el megamenú absolute se centre en .cx-nav__inner */ position: static; } .cx-nav__pill { position: absolute; top: 50%; left: 0; width: 0; height: 36px; margin-top: -18px; border-radius: 10px; background: rgba(15, 23, 42, .06); opacity: 0; pointer-events: none; transition: transform .35s cubic-bezier(.4, 0, .2, 1), width .35s cubic-bezier(.4, 0, .2, 1), opacity .25s ease; z-index: 0; } .cx-nav__inner.is-hovered .cx-nav__pill { opacity: 1; } .cx-nav__link { position: relative; z-index: 1; } /* Cancel the default hover background — the pill replaces it */ .cx-nav__inner.is-hovered .cx-nav__link:hover { background: transparent; } /* But still highlight current/open state */ .cx-nav__item--open > .cx-nav__link { background: rgba(15, 23, 42, .06); } /* ---------- Dark mode ---------- */ html[data-theme="dark"] body.cx-nav-scrolled .cx-nav { background: rgba(13, 13, 16, .72); border-color: rgba(255, 255, 255, .08); box-shadow: 0 0 0 1px rgba(255, 255, 255, .04), 0 6px 24px -8px rgba(0, 0, 0, .4), 0 16px 50px -18px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .04); } html[data-theme="dark"] body.cx-nav-scrolled .cx-megamenu { box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 14px 40px -12px rgba(0, 0, 0, .6), 0 28px 64px -24px rgba(0, 0, 0, .7); } html[data-theme="dark"] .cx-nav__pill { background: rgba(255, 255, 255, .08); } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .cx-nav, .cx-nav__pill { transition-duration: .2s !important; } } /* ---------- Mobile: keep current behavior (no shrink) ---------- */ @media (max-width: 900px) { body.cx-nav-scrolled .cx-nav { top: 0; left: 0; right: 0; width: 100%; transform: none; border-radius: 0; box-shadow: 0 2px 12px -4px rgba(15, 23, 42, .14); } body.cx-nav-scrolled .cx-nav__inner { padding: 0 24px; } .cx-nav__pill { display: none; } } /* ════════════ Selector de idioma — desplegable (Català / Español / English) ════════════ */ .cx-nav__lang { position: relative; display: inline-flex; padding: 0; height: auto; background: transparent; border: none; } .cx-nav__lang-btn { display: inline-flex; align-items: center; gap: 5px; padding: 0 10px; height: 40px; border-radius: var(--cx-r-pill); background: transparent; border: none; font-size: 13px; font-weight: 600; color: var(--cx-ink-soft); cursor: pointer; font-family: inherit; transition: color .15s; } .cx-nav__lang-btn:hover { color: var(--cx-ink); } .cx-nav__lang-cur { letter-spacing: .02em; } .cx-nav__lang-chev { width: 9px; height: 9px; opacity: .65; transition: transform .15s; flex-shrink: 0; } .cx-nav__lang-btn[aria-expanded="true"] .cx-nav__lang-chev { transform: rotate(180deg); } .cx-nav__lang-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 132px; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--cx-line); border-radius: var(--cx-r); box-shadow: var(--cx-shadow-lg); z-index: 1100; } .cx-nav__lang-menu[hidden] { display: none; } .cx-nav__lang-menu li { margin: 0; padding: 0; } .cx-nav__lang-opt { display: block; width: 100%; text-align: left; padding: 9px 12px; border: none; background: transparent; border-radius: var(--cx-r-sm); font-size: 14px; font-weight: 500; color: var(--cx-ink); cursor: pointer; font-family: inherit; } .cx-nav__lang-opt:hover { background: var(--cx-bg-mute); } .cx-nav__lang-opt[aria-current="true"] { color: var(--cx-blue); font-weight: 700; } /* ════════════ Megamenú: fix desbordamiento en escritorios estrechos ════════════ .cx-megamenu--wide/--mid usaban min-width fijo (1100/880px) que gana al max-width:95vw → en ventanas 1025-1200px el menú se forzaba a 1100px y se salía/cortaba por los lados. Con width:min(Npx,94vw) se mantiene igual en pantallas anchas y encoge para caber. */ .cx-megamenu--wide { min-width: 0; width: min(1100px, 94vw); } .cx-megamenu--mid { min-width: 0; width: min(880px, 94vw); } /* ════════════ Megamenú: centrado SIN position:fixed (apertura por HOVER) ════════════ ⚠️ NUNCA position:fixed aquí: bloquea los clics (el panel fixed se quedaba capturando). El panel se centra en pantalla porque su containing block pasa a ser .cx-nav__inner (centrado: max-width 1240 + margin auto). Para ello el