/** * i18n-kit core — the parts that are true on every site. * * Nothing in here names a site's own classes. Two other stylesheets carry that: * * assets/generated.css written by build.py from site.json — per-script font * stacks and the letter-spacing blanket, both of which * need the site's own scope selector and brand face * assets/overrides.css hand-written per site — the typographic corrections * that only make sense against that site's markup * * Everything here is themeable through the custom properties at the top of the * switcher block, so a site restyles the control by setting four values rather * than by overriding a stack of rules. */ /* ── the pre-paint hold ─────────────────────────────────────────────────── Only ever applied for non-default languages, and always removed on a timeout, so the worst case is a visitor seeing English rather than a blank page. Print is exempt: a print stylesheet that inherits a hidden body produces blank paper, and the hold may still be up when the dialog opens. */ html.bik-wait body { visibility: hidden; } @media print { html.bik-wait body { visibility: visible; } } /* ── right-to-left ──────────────────────────────────────────────────────── dir="rtl" on already mirrors text direction, list markers, and any layout written with logical properties. What it does NOT mirror is a design built on physical left/right, which is most designs. These are the handful of resets that are safe to apply blind; anything structural belongs in the site's own overrides.css, where it can be checked against real markup. */ html[dir="rtl"] body { text-align: right; } html[dir="rtl"] .bik-lang { direction: rtl; } /* Latin fragments inside an RTL line — a URL, an email address, a brand name, a date range, a dimension like "9 x 3 x 3 ft" — need an isolation boundary or the bidi algorithm reorders their punctuation. Translators mark these in the resource files with , which needs no styling of its own, but any element the site tags this way gets the same treatment. */ html[dir="rtl"] [data-bik-ltr] { direction: ltr; unicode-bidi: isolate; display: inline-block; } /* ── the switcher ───────────────────────────────────────────────────────── A native : browsers match it on a plain mouse click too, because the element is keyboard-operable once open. Verified in Chromium — clicking the switcher matched both :focus-within and :focus-visible, so the accent ring appeared on click and then stayed after the menu closed, reading as a stuck highlight rather than as focus. So the switcher's inline script flags pointer interaction on the wrapper and these two rules opt out of the ring for that case only. A keyboard user tabbing to the control still gets a real, visible focus ring; a mouse user gets nothing, which is what they expect from a picker. Removing focus styling outright would have been the easier fix and an accessibility regression. */ .bik-lang:focus-within { border-color: var(--bik-sw-accent); } .bik-lang select:focus-visible { outline: 2px solid var(--bik-sw-accent); outline-offset: 2px; } .bik-lang.is-pointer:focus-within { border-color: var(--bik-sw-border); } .bik-lang.is-pointer select:focus, .bik-lang.is-pointer select:focus-visible { outline: none; } .bik-lang option { color: #1a1a1a; background: #fff; } @media (max-width: 560px) { .bik-lang select { font-size: .72rem; padding: 0 24px 0 11px; } html[dir="rtl"] .bik-lang select { padding: 0 11px 0 24px; } } @media print { .bik-lang { display: none; } } /* ── controls that were sized for English ───────────────────────────────── Generic safety net, scoped by the data-bik-fit attribute the site puts on any fixed-size control. German runs ~30% longer than English and will overflow a pill that was measured against a six-letter label; letting it wrap is always better than letting it spill. */ html:not([lang="en"]) [data-bik-fit] { white-space: normal; text-align: center; line-height: 1.25; hyphens: auto; }