/* ============================================================ nav-2026.css: the language switcher, plus the header capacity rules that a six-item nav forces. WHY THIS IS ITS OWN SHEET The header component (partials/home-2026/header.php) is shared by every page, but its CSS is not: home-2026.css, vps-template.css, vpn-template.css, dedicated-template.css and web-template.css each carry their own forked copy of .eug-nav*. Anything added to only one of them reaches some pages and not others, which is how the picker ended up rendering unstyled on the ~9 pages built on the vps/vpn templates. So this sheet is loaded by header.php itself, in body, right before the markup it styles. Being last in document order it also wins at equal specificity against whichever base sheet the page happens to load, which is what lets the capacity rules below override the forked defaults. Put anything that belongs to the shared header, and only to the shared header, in here rather than in one of the five base sheets. ============================================================ */ /* ---------- language switcher ---------- Sits to the right of the phone. Each entry is a root-relative link to the same page under another locale prefix; then keeps every relative link in that language, so there is no cookie and no redirect. See partials/home-2026/lang.php. */ .eug-flag { width: 22px; height: 15px; display: block; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,0.16) inset; } .eug-lang { position: relative; flex: none; } .eug-lang-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border-radius: var(--eug-pill); border: 1px solid rgba(244,250,255,0.16); background: transparent; color: var(--eug-frost); cursor: pointer; font: inherit; line-height: 1; } .eug-lang-btn:hover { border-color: var(--eug-blue); background: rgba(69,199,255,0.06); } .eug-lang-btn:focus-visible { outline: 2px solid var(--eug-blue); outline-offset: 2px; } .eug-lang-btn .eug-caret { font-size: 0.62rem; opacity: 0.7; transition: transform 0.2s; } .eug-lang.is-open .eug-lang-btn { border-color: var(--eug-blue); } .eug-lang.is-open .eug-lang-btn .eug-caret { transform: rotate(180deg); } /* right-aligned: the control lives at the right edge of the header */ .eug-lang-menu { position: absolute; top: calc(100% + 10px); right: 0; min-width: 210px; padding: 8px; z-index: 60; background: var(--eug-deep-navy); border: 1px solid var(--eug-border); border-radius: var(--eug-radius-sm); box-shadow: 0 18px 40px rgba(0,0,0,0.45); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s; } .eug-lang.is-open .eug-lang-menu { opacity: 1; visibility: visible; transform: translateY(0); } .eug-lang-menu a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; font-size: 0.9rem; color: var(--eug-muted); white-space: nowrap; } .eug-lang-menu a:hover { background: rgba(255,255,255,0.05); color: var(--eug-frost); } .eug-lang-menu a[aria-current] { color: var(--eug-blue); font-weight: 600; background: rgba(69,199,255,0.08); } @media (prefers-reduced-motion: reduce) { .eug-lang-menu { transition: none; } .eug-lang-btn .eug-caret { transition: none; } } /* ---------- mobile menu block ---------- */ .eug-mobile-lang { padding: 20px 0 4px; border-top: 1px solid var(--eug-border); } .eug-mobile-lang-h { margin: 0 0 12px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--eug-blue); } .eug-mobile-lang-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .eug-mobile-lang-grid a { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 10px; border-radius: 10px; font-size: 0.88rem; color: var(--eug-muted); } .eug-mobile-lang-grid a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .eug-mobile-lang-grid a[aria-current] { color: var(--eug-blue); font-weight: 600; background: rgba(69,199,255,0.08); } /* ---------- header capacity ---------- The row holds: logo, six top-level items, login, phone, language picker. .eug-shell caps at a 1264px content box, so widening the viewport past ~1400px adds NO room: whatever does not fit at 1264px never fits. Measured across all eleven locales (Spanish and Brazilian Portuguese are the widest, then Russian and Arabic), that row needs: no phone >= 1320px phone as icon >= 1380px phone in full never - it wants 1335px (en) to 1471px (es) of 1264px which is why the number itself is gone from the header and only the tap-to-call icon remains. It is still in the footer and on the contact page. The burger covers everything below 1320px. These sat at 980 / 1200 / always before the sixth nav item and the picker. Leaving them there put every page into horizontal scroll. To pull the burger threshold back down toward 1200px, shorten the nav labels in es/pt-BR/ru ("Servidores virtuales" -> "VPS" and so on): those locales are what set every number above. */ @media (max-width: 1320px) { .eug-nav-links { display: none; } .eug-nav-actions .eug-login, .eug-nav-actions .eug-btn-primary { display: none; } .eug-burger { display: inline-flex; } .eug-nav { margin-left: auto; } .eug-logo { margin-right: auto; } } @media (max-width: 1380px) { .eug-nav-actions .eug-nav-phone { display: none; } } /* font-size:0 kills the text node, so .eug-nav-phone carries an aria-label in the header partial for its accessible name. */ @media (min-width: 1381px) { .eug-nav-actions .eug-nav-phone { font-size: 0; gap: 0; padding: 9px 13px; } .eug-nav-actions .eug-nav-phone i { font-size: 0.95rem; } } /* Six items do not fit at the default 16px link padding either: at 1240px Russian ran 29px past the row. Tightening the links buys ~84px, and since the shell is capped there is no width at which it can be relaxed again. */ @media (min-width: 1321px) { .eug-nav-links { gap: 0; } .eug-nav-link { padding-left: 10px; padding-right: 10px; } }