/* * Language switcher, and suppression of Google's injected chrome. * * Google's widget writes a toolbar iframe into the top of the document and * pushes down with an inline `top` style. None of it can be styled, it * breaks the sticky header, and it looks nothing like the rest of the site — so * it is hidden and replaced with the switcher below. * * The "Powered by Google Translate" attribution is NOT hidden; it is rendered * as part of our own control. */ /* --------------------------------------------- suppress Google's chrome -- */ .goog-te-banner-frame, .goog-te-banner-frame.skiptranslate, iframe.skiptranslate { display: none !important; visibility: hidden !important; } /* The widget sets body{top:40px} inline to make room for its banner. */ body { top: 0 !important; position: static !important; } /* The mount point exists only so the widget has somewhere to write. */ .jmns-translate__mount { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } /* Google wraps translated strings; these break layout and highlighting. */ .goog-text-highlight { background: none !important; box-shadow: none !important; } /* -------------------------------------------------------------- switcher -- */ /* * One line, always. With flex-wrap the control broke into three stacked rows * — label, select, attribution — inside the utility strip and pushed the whole * bar out of alignment. Nothing here is wide enough to need wrapping once the * select is capped. */ .jmns-translate { display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: nowrap; max-inline-size: 100%; } /* * The select carries its own accessible name, so the visible label is * redundant and costs horizontal space in a strip that has none to spare. */ .jmns-translate__label { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* * A quiet control, not a form field dropped into a text strip. * * Three things were wrong with it. The border was `currentColor` — ink, at * 14.10:1 — which made the least important item in the chrome carry the * heaviest boundary on it. There was no radius at all, so it met at square * corners while every other surface on the site uses the shared tokens. And its * padding was 0.3rem against a native caret that reserves its own space, so the * label sat hard against the arrow. * * border-strong is 3.64:1 on white: past the 3:1 SC 1.4.11 asks of a control's * boundary, and far below the shout of ink. */ .jmns-translate__select { min-block-size: 44px; /* Google's language list is long; without a cap the select sizes to its widest option and dominates the strip. */ max-inline-size: 11rem; text-overflow: ellipsis; /* Room on the end for the caret drawn below, which the UA no longer provides once appearance is reset. */ padding: 0.4rem 2.1rem 0.4rem 0.85rem; border: 1px solid var(--wp--preset--color--border-strong, #6F8D7A); border-radius: var(--r-pill, 999px); background-color: var(--wp--preset--color--surface, #FFFFFF); color: inherit; font: inherit; font-size: 0.8125rem; line-height: 1.2; cursor: pointer; transition: border-color 150ms ease, background-color 150ms ease; /* * Our own caret. appearance:none drops the UA arrow, which sizes and * positions itself differently on every platform and cannot be spaced * against the text. Inline data URI, never a hosted asset: §10.6 keeps * third-party origins out of the stylesheet. */ -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E6D63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.7rem center; background-size: 0.85rem 0.85rem; } /* RTL: the caret follows the text direction rather than staying pinned right. */ [dir="rtl"] .jmns-translate__select { padding-inline: 0.85rem 2.1rem; background-position: left 0.7rem center; } .jmns-translate__select:hover { border-color: var(--wp--preset--color--interactive, #245746); background-color: var(--wp--preset--color--background, #FAF8F2); } /* The select sits in the deep-green utility bar; native option lists inherit the system palette, so force readable colours for the popup. */ .jmns-translate__select option { color: var(--wp--preset--color--text-primary, #1F2925); background-color: var(--wp--preset--color--surface, #FFFFFF); } /* Attribution stays visible — Google's terms require it — but never wraps. */ /* * Rendered inside the disclaimer now, not in the utility bar — see ADR-035 and * footer_markup(). It sits under the disclaimer sentence, so it wraps with it * rather than forcing the strip wider. */ .jmns-translate__attribution { margin-block: 0.35rem 0; font-size: 0.6875rem; opacity: 0.85; } /* ------------------------------------------------------------ disclaimer -- */ /* * Shown only while a machine translation is active (§5.8). teal-700 on light-100 * measures 8.31:1, so it stays legible without relying on colour alone — the * wording carries the meaning. */ .jmns-translate__disclaimer { position: sticky; inset-block-end: 0; z-index: 90; margin: 0; padding: 0.6rem var(--wp--preset--spacing--30, 1rem); background-color: var(--wp--preset--color--background, #FAF8F2); border-block-start: 3px solid var(--wp--preset--color--interactive, #245746); color: var(--wp--preset--color--interactive, #245746); font-size: var(--wp--preset--font-size--small, 0.875rem); font-weight: 600; text-align: center; } .jmns-translate__disclaimer p { margin: 0; max-inline-size: 60rem; margin-inline: auto; } @media print { /* A printed translation must still say it is unofficial. */ .jmns-translate__disclaimer { position: static; display: block !important; } .jmns-translate { display: none; } }