/* The language button, and the panel it opens — one file, four pages. * --------------------------------------------------------------------------- * The landing page, Privacy, Terms and Contact each keep their own stylesheet * and each carries its own copy of the header, the theme button and the type * ramp. That is four copies of every rule, and the theme button has been living * with it. This control is not going to: it is new, it is the same drawing in * all four places, and a fifth page is a `` rather than another paste. * * Loaded after each page's own sheet so the tokens it names (`--card`, `--line`, * `--brand`) are already defined, and it names nothing else — every colour here * comes from the page it is sitting on, which is what keeps it right in both * palettes without a dark block of its own. */ /* ---- the language button ---- Wears the theme button's box, because it is the same kind of control in the same seat: one person's preference about how this page reads, answerable without leaving it. What is different is that it has to *say* something — an unlabelled globe has an invisible state, and the state is the whole reason anybody presses it — so the glyph shrinks and the code sits under it, in the language's own script. That is what makes the button findable to the one reader it exists for: somebody who cannot yet read the header around it. `position: relative` on the wrapper, because the menu hangs off it. */ .langsel { position: relative; flex: none; } .lang-btn { flex-direction: column; gap: 0; line-height: 1; } .lang-btn svg { width: 17px; height: 17px; display: block; margin-bottom: 1px; } .lang-btn .lang-code { font-size: .55rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; } .lang-btn[aria-expanded="true"] { color: var(--ink); border-color: var(--brand); } /* The landing pages have no menu of their own to borrow, so this is the whole panel: the app's `.menu` shape (css/app.css) in the two variables these pages share with it. Kept small — two rows of one word each. */ .menu-lang { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; width: min(210px, calc(100vw - 24px)); background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 14px 36px rgba(50, 38, 20, .18); padding: 6px; } .menu-lang[hidden] { display: none; } .lang-item { display: flex; width: 100%; text-align: start; gap: 10px; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); cursor: pointer; font: inherit; } .lang-item:hover, .lang-item:focus-visible { background: var(--line); } .lang-item .mi-text { display: flex; flex-direction: column; min-width: 0; } .lang-item .mi-label { font-weight: 600; } .lang-item .mi-hint { font-size: .78rem; color: var(--muted); } .lang-item.on { background: var(--brand-soft, rgba(63, 125, 82, .12)); } .lang-item.on .mi-label { color: var(--brand-ink, var(--brand)); font-weight: 700; } /* Devanagari sets taller than Latin at the same nominal size — its matras want the room above and below the line. A little more leading on the attribute the server writes into , rather than a second type ramp. */ [data-lang="hi"] body { line-height: 1.66; }