/* Shared EVT header layout. Keep this file loaded last in . */ html, body { max-width: 100%; overflow-x: hidden; } @supports (overflow: clip) { html, body { overflow-x: clip; } } nav#main-nav, nav#main-nav * { box-sizing: border-box; } nav#main-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: 88px; width: 100%; display: grid; align-items: center; background: rgba(10, 10, 10, 0.93); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 1px 0 rgba(255,255,255,0.05), 0 6px 32px rgba(0,0,0,0.8), 0 16px 64px rgba(0,0,0,0.5); transition: height 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease; } nav#main-nav.scrolled, [data-nav-scrolled] nav#main-nav { height: 72px; background: rgba(10, 10, 10, 0.99); box-shadow: 0 1px 0 rgba(255,255,255,0.07), 0 8px 40px rgba(0,0,0,0.95), 0 20px 80px rgba(0,0,0,0.7); } nav#main-nav .nav-logo { display: flex; align-items: center; min-width: 0; color: var(--white); text-decoration: none; } nav#main-nav .nav-logo img { display: block; width: auto; height: 52px; max-width: 100%; object-fit: contain; mix-blend-mode: screen; } nav#main-nav .nav-links { margin: 0; padding: 0; list-style: none; } nav#main-nav .nav-links a, nav#main-nav .nav-cta, nav#main-nav .lang-switch { white-space: nowrap; } nav#main-nav .nav-links a { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 32px; width: 100%; color: var(--muted); text-decoration: none; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 500; transition: color 0.2s ease; } nav#main-nav .nav-links a::after { content: ''; position: absolute; bottom: -4px; left: 50%; width: 0; height: 1px; background: var(--accent); transform: translateX(-50%); transition: width 0.3s ease; } nav#main-nav .nav-links a:hover, nav#main-nav .nav-links a.active { color: var(--white); } nav#main-nav .nav-links a:hover::after, nav#main-nav .nav-links a.active::after { width: 100%; } nav#main-nav .nav-cta { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 14px; line-height: 1; background: var(--accent); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; border: 0; cursor: pointer; transition: background-color 0.2s ease, transform 0.2s ease; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); } nav#main-nav .nav-cta:hover { background: var(--accent2); transform: translateY(-1px); } nav#main-nav .lang-switch { display: flex; align-items: center; gap: 6px; font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 2px; } nav#main-nav .lang-active { color: var(--white); font-weight: 700; } nav#main-nav .lang-divider { color: var(--border); } nav#main-nav .lang-link { color: var(--muted); text-decoration: none; transition: color 0.2s ease; } nav#main-nav .lang-link:hover { color: var(--accent); } nav#main-nav .menu-toggle { display: none; width: 44px; padding: 8px; background: none; border: 0; cursor: pointer; } nav#main-nav .menu-toggle span { display: block; width: 24px; height: 1.5px; margin: 5px auto; background: var(--white); transition: transform 0.3s ease, opacity 0.3s ease; } @media (min-width: 1101px) { nav#main-nav { grid-template-columns: clamp(150px, 16vw, 220px) minmax(560px, 1fr) clamp(166px, 14vw, 190px) 52px; column-gap: clamp(12px, 1.5vw, 28px); padding-left: clamp(24px, 4vw, 48px); padding-right: clamp(24px, 4vw, 48px); } nav#main-nav .nav-logo { justify-self: start; width: clamp(150px, 16vw, 220px); } nav#main-nav .nav-links { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; width: min(100%, 680px); justify-self: center; align-items: center; } nav#main-nav .nav-links li { min-width: 0; text-align: center; } nav#main-nav .nav-cta { justify-self: end; width: clamp(166px, 14vw, 190px); min-width: 0; text-align: center; } nav#main-nav .lang-switch { justify-self: end; justify-content: flex-end; width: 52px; min-width: 52px; } nav#main-nav .menu-toggle { display: none; } } @media (min-width: 769px) and (max-width: 1100px) { nav#main-nav { grid-template-columns: minmax(130px, 1fr) 52px 44px; column-gap: 20px; padding-left: 28px; padding-right: 28px; } nav#main-nav .nav-logo { justify-self: start; max-width: 220px; } nav#main-nav .nav-links, nav#main-nav .nav-cta { display: none; } nav#main-nav .lang-switch { display: flex; justify-content: flex-end; justify-self: end; width: 52px; } nav#main-nav .menu-toggle { display: block; justify-self: end; } nav#main-nav .nav-links[style] li, nav#main-nav .nav-links[style] a { width: fit-content; max-width: 100%; } nav#main-nav .nav-links[style] a { justify-content: flex-start; } } @media (max-width: 768px) { nav#main-nav { left: 0; right: 0; grid-template-columns: minmax(0, 1fr) 52px 44px; column-gap: 14px; padding-left: 16px; padding-right: 16px; } nav#main-nav .nav-logo { justify-self: start; max-width: 48vw; } nav#main-nav .nav-logo img { height: auto; max-height: 52px; } nav#main-nav .nav-links, nav#main-nav .nav-cta { display: none; } nav#main-nav .lang-switch { display: flex; justify-content: flex-end; justify-self: end; width: 52px; font-size: 10px; } nav#main-nav .menu-toggle { display: block; justify-self: end; } } @media (max-width: 420px) { nav#main-nav { column-gap: 12px; padding-left: 14px; padding-right: 14px; } nav#main-nav .nav-logo { max-width: 46vw; } }