/* ===================================================== Language switcher (shared) — the header "SR ▾" control. Markup for the menu is built by assets/lang-switch.js; the trigger (.lang) already lives in each page's header. ===================================================== */ .lang { cursor: pointer; -webkit-user-select: none; user-select: none; } /* The Figma control is only 70x19, which is a stingy hit target — this pseudo element pads it out without disturbing the absolutely positioned children. */ .lang::before { content: ""; position: absolute; inset: -14px -12px; border-radius: 14px; } .lang-label { transition: color 0.2s ease; } .lang:hover .lang-label { color: #006aff; } .lang-chevron { transition: transform 0.25s ease; } .lang.open .lang-chevron { transform: rotate(180deg); } /* Offset clears the bottom edge of the floating header card (its own height, less where the 19px-tall trigger sits inside it) so the menu hangs free instead of clipping the corner of the Kontakt button. */ .lang-menu { position: absolute; top: calc(100% + 46px); left: -12px; min-width: 168px; padding: 6px; background: #fdfdff; border: 1px solid #e3e6f4; border-radius: 16px; box-shadow: 0 15px 30px rgba(0,99,238,0.14); opacity: 0; visibility: hidden; transform: translateY(-6px); z-index: 30; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease; } .lang.open .lang-menu { opacity: 1; visibility: visible; transform: none; } .lang-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: none; border-radius: 11px; background: none; cursor: pointer; font-family: inherit; font-weight: 500; font-size: 14px; line-height: 1.4; color: #6e7a8c; text-align: left; transition: background 0.18s ease, color 0.18s ease; } .lang-opt:hover { background: #f2f1f9; color: #006aff; } .lang-opt[aria-selected="true"] { color: #006aff; } .lang-opt-code { margin-left: auto; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 1px; color: #afb5c2; } /* Shown only when the page is opened off disk, where translation cannot work. */ .lang-note { margin: 4px 6px 2px; max-width: 200px; font-size: 11px; line-height: 1.45; color: #9aa3b2; white-space: normal; } .lang-opt:hover .lang-opt-code, .lang-opt[aria-selected="true"] .lang-opt-code { color: #006aff; } @media (max-width: 1279px) { .lang-menu { top: calc(100% + 39px); left: auto; right: -12px; } } /* ===== Google Translate widget cleanup ===== The widget wants to inject a banner iframe at the top of the page and shove down 40px, which breaks the absolutely positioned header. Hide the frame, keep body where it was, and drop the yellow hover highlight. */ #google_translate_element { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } iframe.skiptranslate, .goog-te-banner-frame, .goog-te-gadget-icon { display: none !important; } body { top: 0 !important; position: static !important; } .goog-text-highlight { background: none !important; box-shadow: none !important; }