/* ────────────────────────────────────────────────────────────────────────── * tg-i18n.css — the language picker. * * Small enough to live in a nav without asking for room, and legible enough * that somebody looking for their own language finds it in the list rather * than in a search box they did not know to use. Each language is written in * itself — a Greek speaker looks for Ελληνικά, not for "Greek". * ────────────────────────────────────────────────────────────────────────── */ .tg-lang { position: relative; display: inline-flex; --tgl-bg: #ffffff; --tgl-ink: var(--tg-ink, #0B0B12); --tgl-mute: var(--tg-ink-mute, #5A5A70); --tgl-rule: var(--tg-rule, #E8E6F3); --tgl-surf: var(--tg-surface-2, #F3F1FF); --tgl-accent: var(--tg-purple, #7A3CFF); } [data-tg-theme="dark"] .tg-lang { --tgl-bg: var(--tg-dark-surface, #10101C); --tgl-ink: var(--tg-dark-ink, #F5F5FA); --tgl-mute: var(--tg-dark-ink-mute, #7E7E96); --tgl-rule: var(--tg-dark-rule, #242438); --tgl-surf: var(--tg-dark-surface-2, #181828); } .tg-lang-li { display: flex; align-items: center; } /* In the header bar, immediately right of the wordmark, at every width — including the ones where the desktop link row is not rendered at all. The margin pushes the rest of the bar (links, hamburger) back to the right edge where it was. */ .tg-lang-nav { margin-left: 8px; margin-right: auto; flex: none; } .tg-lang-nav .tg-lang-btn { border-color: var(--tgl-rule); min-height: 34px; } @media (max-width: 700px) { /* Bigger tap target and no wasted width: on a phone this is a globe and a flag, and the language's own name is in the menu it opens. */ .tg-lang-nav .tg-lang-btn { padding: 8px 10px; min-height: 38px; } } .tg-lang-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--tgl-mute); font: 600 13px/1 var(--tg-font-body, ui-sans-serif, system-ui, sans-serif); cursor: pointer; transition: color 140ms ease, border-color 140ms ease; } .tg-lang-btn:hover { color: var(--tgl-ink); border-color: var(--tgl-rule); } .tg-lang-btn:focus-visible { outline: 2px solid var(--tgl-accent); outline-offset: 2px; } .tg-lang-flag { font-size: 14px; line-height: 1; } .tg-lang-name { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 900px) { .tg-lang-name { display: none; } } .tg-lang-float { position: fixed; right: 16px; top: 16px; z-index: 55; background: var(--tgl-bg); border: 1px solid var(--tgl-rule); border-radius: 999px; box-shadow: 0 2px 8px rgba(11, 11, 18, .07); } /* ── The menu is a child of , and JS puts it where it goes ──────────── * * Not of the picker. `position: fixed` is only fixed to the VIEWPORT when no * ancestor has a transform, a filter, or a backdrop-filter — any of those * makes that ancestor the containing block instead, and the header this * control mounts in is frosted glass: * * .nav { position: sticky; backdrop-filter: saturate(180%) blur(14px) } * * So the phone rule that used to live here — fixed, bottom: 12px — pinned the * menu to the bottom of a 60-pixel-tall HEADER and grew it upward from there. * Measured on the live site at 390px on 2026-09-15: a 506px menu whose top * was at -450px. Four hundred and fifty pixels of the language list were * above the top of the screen, and a listener pulling the page down to find * them could not, because it was not the page that was scrolled. One group * heading and one language were visible, and the control looked broken — * which, on every phone, it was. * * A containing block cannot be argued with from inside it. The menu is * therefore appended to , where nothing above it is frosted, and * `tg-i18n.js` writes top / left / width / max-height from the button's own * rectangle on every open. It drops DOWN and it scrolls, at every width, and * no future glass header anywhere in this product can move it again. * ────────────────────────────────────────────────────────────────────────── */ .tg-lang-menu { position: fixed; top: 0; left: 0; z-index: 2147483000; /* above the player bar, the room sheet and any modal */ width: 268px; max-height: 360px; display: flex; flex-direction: column; background: var(--tgl-bg); border: 1px solid var(--tgl-rule); border-radius: var(--tg-r, 12px); box-shadow: 0 8px 24px rgba(11, 11, 18, .12), 0 32px 64px rgba(122, 60, 255, .16); overflow: hidden; } .tg-lang-menu[hidden] { display: none; } .tg-lang-search { flex: none; margin: 8px; padding: 9px 11px; font: 400 13.5px/1.2 var(--tg-font-body, system-ui, sans-serif); color: var(--tgl-ink); background: var(--tgl-surf); border: 1px solid transparent; border-radius: var(--tg-r-sm, 8px); } .tg-lang-search:focus { outline: none; border-color: var(--tgl-accent); } /* `min-height: 0` is what makes this scroll rather than grow. * * A flex item's default minimum size is its content, so a column flex child * with `overflow-y: auto` and thirty-six rows in it pushes the menu past its * own max-height instead of clipping and scrolling. `overscroll-behavior` * stops a flick that reaches the end of the list from scrolling the page * underneath it, which on a phone reads as the menu closing itself. */ .tg-lang-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 6px 8px; -webkit-overflow-scrolling: touch; } .tg-lang-group { padding: 10px 8px 5px; font: 700 10.5px/1 var(--tg-font-body, system-ui, sans-serif); letter-spacing: .07em; text-transform: uppercase; color: var(--tgl-mute); } .tg-lang-group[hidden] { display: none; } .tg-lang-opt { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px; border: 0; border-radius: var(--tg-r-sm, 8px); background: transparent; color: var(--tgl-ink); font: 400 13.5px/1.2 var(--tg-font-body, system-ui, sans-serif); text-align: left; cursor: pointer; } .tg-lang-opt[hidden] { display: none; } .tg-lang-opt:hover { background: var(--tgl-surf); } .tg-lang-opt.is-on { background: var(--tgl-surf); font-weight: 700; } .tg-lang-opt.is-on::after { content: "✓"; margin-left: auto; color: var(--tgl-accent); } /* A finger is not a mouse pointer. Thirty-six languages in 8px rows is a list you scroll past your own language on a phone. */ @media (pointer: coarse) { .tg-lang-opt { padding: 11px 10px; font-size: 15px; min-height: 44px; } .tg-lang-search { padding: 11px 12px; font-size: 16px; } /* 16px: iOS zooms anything smaller on focus */ } /* A page mid-translation says so, once, quietly. Anything louder implies the English underneath it is broken, which it is not. */ html[data-i18n-busy] .tg-lang-btn { opacity: .6; }