/* ========================================================================== MAVTG global navigation — plan step 3.3 (Sep 23, 2026) One header for every MAVTG page: logo, divisions, dropdowns, a visible EN / ES / PT switch and a proper phone menu. Built on redesign-tokens.css v2 values (copied here as fallbacks so the header also works on pages that don't link the tokens file). Markup is written into each page by scripts/global-nav.mjs between markers. Everything is scoped under .mvn and starts from a reset, so old per-page rules such as `nav{...}` or `nav a{...}` can't restyle it. ========================================================================== */ .mvn, .mvn *:not(svg):not(svg *), .mvn *::before, .mvn *::after { all: revert; box-sizing: border-box; } .mvn svg { display: block; flex: none; width: 16px; height: 16px; margin: 0; } .mvn { --n-navy: var(--mv-navy, #06111F); --n-text: var(--mv-text-light, #F7F9FC); --n-dim: rgba(247,249,252,.78); --n-line: rgba(247,249,252,.14); --n-bright: var(--mv-electric-bright, #4FADFF); --n-btn: var(--mv-electric-btn, #0D6FCC); --n-coral: var(--mv-coral-btn, #D6363C); --n-tap: 44px; position: sticky; top: 0; z-index: 2000; display: block; width: 100%; margin: 0; padding: 0; background: var(--n-navy); color: var(--n-text); border-bottom: 1px solid var(--n-line); font: 500 15px/1.3 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; } /* Old pages reserved room for their own fixed nav; the new header is sticky (in flow). */ body:has(> .mvn) { padding-top: 0 !important; } /* overflow-x:hidden on makes body a scroll box and silently breaks sticky; clip keeps the same "no sideways scroll" effect without that (a scroll lock with overflow:hidden still works). */ body:has(> .mvn) { overflow-x: clip !important; } html:has(.mvn) { scroll-padding-top: 76px; } .mvn .mvn-bar { display: flex; align-items: center; gap: 16px; max-width: 1280px; min-height: 64px; margin: 0 auto; padding: 0 24px; } .mvn .mvn-logo { display: inline-flex; align-items: center; min-height: var(--n-tap); font: 800 22px/1 'Manrope', 'Inter', system-ui, sans-serif; letter-spacing: .02em; color: var(--n-text); text-decoration: none; white-space: nowrap; flex: none; } .mvn .mvn-logo-tg { color: var(--mv-electric, #1597FF); } .mvn .mvn-nav { display: block; margin-left: auto; } .mvn .mvn-list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; } .mvn .mvn-list > li { position: relative; list-style: none; margin: 0; padding: 0; } .mvn .mvn-link { display: inline-flex; align-items: center; gap: 6px; min-height: var(--n-tap); padding: 0 12px; border: 0; border-radius: 8px; background: transparent; font: inherit; font-weight: 600; color: var(--n-text); text-decoration: none; cursor: pointer; white-space: nowrap; } .mvn .mvn-link:hover { background: rgba(247,249,252,.08); color: #fff; } .mvn .mvn-link[aria-current="page"] { color: var(--n-bright); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; } .mvn .mvn-drop[data-section="true"] > .mvn-drop-btn { color: var(--n-bright); } .mvn .mvn-caret { display: inline-block; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s; } .mvn .mvn-drop-btn[aria-expanded="true"] .mvn-caret { transform: translateY(1px) rotate(-135deg); } .mvn .mvn-sub { display: none; position: absolute; top: calc(100% + 6px); left: 0; min-width: 230px; margin: 0; padding: 8px; list-style: none; background: #fff; color: #0B1625; border-radius: 12px; box-shadow: 0 16px 40px rgba(6,17,31,.28); border: 1px solid rgba(11,22,37,.10); } .mvn .mvn-sub[data-open="true"] { display: block; } .mvn .mvn-sub li { list-style: none; margin: 0; padding: 0; } .mvn .mvn-sub a { display: flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 8px; color: #0B1625; font-weight: 500; text-decoration: none; white-space: nowrap; } .mvn .mvn-sub a:hover { background: #EDF1F6; color: #0B66BD; } .mvn .mvn-sub a[aria-current="page"] { color: #0B66BD; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; } .mvn .mvn-cta { display: inline-flex; align-items: center; min-height: var(--n-tap); padding: 0 18px; margin-left: 6px; border-radius: 999px; background: var(--n-coral); color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap; } .mvn .mvn-cta:hover { filter: brightness(1.08); } /* Search — opens the site-wide search overlay (global-search.js, static index) */ .mvn .mvn-search { display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 40px; min-width: 40px; padding: 0 12px; border: 1px solid var(--n-line); border-radius: 999px; background: transparent; color: var(--n-text); font: 600 14px/1 'Inter', system-ui, sans-serif; cursor: pointer; } .mvn .mvn-search:hover { background: rgba(247,249,252,.08); } /* Language switch — always visible, desktop and phone */ .mvn .mvn-lang { display: inline-flex; align-items: center; flex: none; gap: 2px; padding: 3px; border: 1px solid var(--n-line); border-radius: 999px; } .mvn .mvn-lang a { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 36px; padding: 0 8px; border-radius: 999px; color: var(--n-dim); font: 700 13px/1 'Inter', system-ui, sans-serif; letter-spacing: .04em; text-decoration: none; } .mvn .mvn-lang a:hover { color: #fff; background: rgba(247,249,252,.10); } .mvn .mvn-lang a[aria-current="true"] { background: var(--n-btn); color: #fff; } .mvn .mvn-toggle { display: none; align-items: center; gap: 8px; min-height: var(--n-tap); min-width: var(--n-tap); padding: 0 12px; border: 1px solid var(--n-line); border-radius: 10px; background: transparent; color: var(--n-text); font: 700 14px/1 'Inter', system-ui, sans-serif; cursor: pointer; } .mvn .mvn-bars, .mvn .mvn-bars::before, .mvn .mvn-bars::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; content: ""; position: relative; transition: transform .2s, background .2s; } .mvn .mvn-bars::before { position: absolute; top: -6px; left: 0; } .mvn .mvn-bars::after { position: absolute; top: 6px; left: 0; } .mvn .mvn-toggle[aria-expanded="true"] .mvn-bars { background: transparent; } .mvn .mvn-toggle[aria-expanded="true"] .mvn-bars::before { transform: translateY(6px) rotate(45deg); } .mvn .mvn-toggle[aria-expanded="true"] .mvn-bars::after { transform: translateY(-6px) rotate(-45deg); } .mvn a:focus-visible, .mvn button:focus-visible { outline: 3px solid var(--n-bright); outline-offset: 2px; } .mvn .mvn-sub a:focus-visible { outline-color: #0B66BD; } /* ---- Tablet + phone: collapse into the menu button ---- */ @media (max-width: 1280px) { .mvn .mvn-bar { padding: 0 16px; gap: 10px; flex-wrap: wrap; } .mvn .mvn-search { margin-left: auto; } .mvn .mvn-toggle { display: inline-flex; } .mvn .mvn-nav { display: none; flex-basis: 100%; margin: 0; padding: 8px 0 16px; border-top: 1px solid var(--n-line); max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); order: 10; overflow-y: auto; } .mvn[data-menu="open"] .mvn-nav { display: block; } .mvn .mvn-list { flex-direction: column; align-items: stretch; gap: 0; } .mvn .mvn-link { width: 100%; justify-content: space-between; font-size: 17px; padding: 0 8px; } .mvn .mvn-sub { position: static; display: none; min-width: 0; margin: 0 0 8px; padding: 4px 0 4px 12px; background: transparent; box-shadow: none; border: 0; border-left: 2px solid var(--n-line); border-radius: 0; } .mvn .mvn-sub[data-open="true"] { display: block; } .mvn .mvn-sub a { color: var(--n-dim); min-height: var(--n-tap); font-size: 16px; } .mvn .mvn-sub a:hover { background: rgba(247,249,252,.08); color: #fff; } .mvn .mvn-sub a[aria-current="page"] { color: var(--n-bright); } .mvn .mvn-sub a:focus-visible { outline-color: var(--n-bright); } .mvn .mvn-cta { margin: 12px 0 0; justify-content: center; width: 100%; } } @media (max-width: 420px) { .mvn .mvn-bar { gap: 8px; padding: 0 12px; } .mvn .mvn-logo { font-size: 20px; } .mvn .mvn-lang a { min-width: 34px; padding: 0 6px; } .mvn .mvn-search { padding: 0; justify-content: center; width: 40px; } .mvn .mvn-search-text, .mvn .mvn-toggle-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } } @media (prefers-reduced-motion: reduce) { .mvn *, .mvn *::before, .mvn *::after { transition: none !important; } } @media print { .mvn { display: none; } } /* Old floating language pickers are replaced by the switch in the header. */ body:has(> .mvn) #mvlang { display: none !important; }