/* Comparisons — language switcher (loaded site-wide). */ .cmp-lang { position: relative; display: inline-block; font-size: 14px; } .cmp-lang > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid rgba(127, 140, 170, .35); border-radius: 8px; background: #141a2b; color: #e9edf6; font-weight: 600; white-space: nowrap; } .cmp-lang > summary::-webkit-details-marker { display: none; } .cmp-lang > summary:hover { border-color: #5b8cff; } .cmp-lang-caret { font-size: 10px; opacity: .7; } .cmp-lang[open] .cmp-lang-caret { transform: rotate(180deg); } .cmp-lang-menu { position: absolute; z-index: 9999; margin: 6px 0 0; padding: 6px; list-style: none; width: max-content; min-width: 200px; max-width: 80vw; max-height: 60vh; overflow-x: hidden; overflow-y: auto; box-sizing: border-box; scrollbar-gutter: stable; background: #141a2b; border: 1px solid rgba(127, 140, 170, .35); border-radius: 10px; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .85); } /* In the navigation menu: sit inline at the right end of the nav. */ .cmp-lang--nav { display: inline-flex; align-items: center; margin-left: auto; } li.cmp-lang-nav-item { display: flex; align-items: center; list-style: none; } .cmp-lang--nav > summary { padding: 5px 10px; font-size: 14px; } /* Right-aligned switchers (nav + header bar + floating): open the menu toward the * left so it never runs off the right edge of the viewport. */ .cmp-lang--nav .cmp-lang-menu, .cmp-lang--bar .cmp-lang-menu, .cmp-lang--float .cmp-lang-menu { left: auto; right: 0; } .cmp-lang--float .cmp-lang-menu { bottom: calc(100% + 6px); margin: 0 0 6px; } .cmp-lang-opt { display: block; padding: 8px 12px; border-radius: 6px; color: #c6cde0; text-decoration: none; white-space: nowrap; } .cmp-lang-opt:hover { background: #1d2740; color: #fff; } .cmp-lang-opt.is-active { background: #5b8cff; color: #fff; font-weight: 700; } /* Header bar: a slim full-width strip injected at the top of . */ .cmp-langbar { display: flex; justify-content: flex-end; background: #0b0f1a; border-bottom: 1px solid rgba(127, 140, 170, .25); padding: 6px 16px; } .cmp-lang--bar > summary { padding: 5px 10px; font-size: 13px; } /* Floating, fixed to the bottom-right corner site-wide. */ .cmp-lang--float { position: fixed; right: 16px; bottom: 16px; z-index: 9998; } @media (max-width: 600px) { .cmp-lang--float { right: 10px; bottom: 10px; } } @media (prefers-reduced-motion: reduce) { .cmp-lang[open] .cmp-lang-caret { transform: none; } }