/* ========================================================================== Quality Immigration — language switcher Google Translate is the engine; none of its UI is used. The widget host is clipped out of sight, its banner/tooltip/highlight chrome is suppressed, and everything the visitor sees is the markup rendered from functions.php. Caveats that must not be re-broken ---------------------------------- 1. `body { top: 0 !important }` — GT writes an inline `top: 40px` on to make room for its banner iframe. The banner is hidden here, so without this the whole page sits 40px low. A stylesheet !important beats an inline declaration, which is why this works without JS. 2. The GT gadget host must NOT be a direct child of : `body > .skiptranslate` is how the banner is killed, and the gadget carries the same class. It lives inside #qi-gt-host instead. 3. .qi-lang is marked translate="no" — otherwise GT translates the language names in our own menu and "Nederlands" comes back as "Dutch". ========================================================================== */ /* -------------------------------------------------------------------------- 1. The switcher -------------------------------------------------------------------------- */ .qi-lang { position: relative; display: inline-flex; align-items: center; direction: ltr; flex: 0 0 auto; } .qi-lang-toggle { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; height: 38px; padding: 0 .55rem; margin: 0; border: 1px solid var(--qi-hairline); border-radius: var(--qi-radius-btn); background-color: transparent; color: var(--qi-ink); font-family: var(--qi-font-body); font-size: .75rem; font-weight: 600; line-height: 1; letter-spacing: .08em; cursor: pointer; transition: border-color .22s var(--qi-ease), color .22s var(--qi-ease), background-color .22s var(--qi-ease); } .qi-lang-toggle:hover { border-color: rgba(11, 68, 68, .3); background-color: rgba(17, 100, 102, .06); color: var(--qi-teal-600); } .qi-lang-toggle:focus-visible { outline: 2px solid var(--qi-teal-600); outline-offset: 2px; } .qi-lang.is-open > .qi-lang-toggle { border-color: rgba(11, 68, 68, .3); background-color: rgba(17, 100, 102, .07); color: var(--qi-teal-600); } .qi-lang svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .qi-lang-globe { width: 17px; height: 17px; flex: 0 0 auto; } .qi-lang-chevron { width: 11px; height: 11px; stroke-width: 2; flex: 0 0 auto; transition: transform .22s var(--qi-ease); } .qi-lang.is-open .qi-lang-chevron { transform: rotate(180deg); } .qi-lang-code { font-variant-numeric: tabular-nums; padding-top: 1px; } /* Selection is committed with a reload; the button acknowledges the tap. */ .qi-lang.is-busy > .qi-lang-toggle { opacity: .55; pointer-events: none; } /* -------------------------------------------------------------------------- 2. The panel -------------------------------------------------------------------------- */ .qi-lang-menu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 130; min-width: 212px; padding: .5rem .4rem .4rem; background-color: var(--qi-ivory); border: 1px solid var(--qi-hairline); border-radius: var(--qi-radius-btn); box-shadow: 0 20px 44px -26px rgba(6, 47, 48, .55), 0 2px 6px -4px rgba(6, 47, 48, .3); opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none; transition: opacity .2s var(--qi-ease), transform .2s var(--qi-ease), visibility .2s; } .qi-lang.is-open > .qi-lang-menu { opacity: 1; visibility: visible; transform: none; pointer-events: auto; } .qi-lang-menu-head { margin: 0 0 .35rem; padding: 0 .65rem; font-family: var(--qi-font-body); font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--qi-gold-ink); } .qi-lang-list { margin: 0; padding: 0; list-style: none; max-height: min(62vh, 460px); overflow-y: auto; overscroll-behavior: contain; } .qi-lang-option { display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%; min-height: 40px; padding: .4rem .65rem; margin: 0; border: 0; border-radius: 7px; background-color: transparent; color: var(--qi-ink); font-family: var(--qi-font-body); font-size: .9375rem; font-weight: 500; line-height: 1.3; text-align: left; cursor: pointer; transition: background-color .16s var(--qi-ease), color .16s var(--qi-ease); } .qi-lang-option:hover, .qi-lang-option:focus-visible { background-color: rgba(17, 100, 102, .09); color: var(--qi-teal-800); outline: none; } .qi-lang-option:focus-visible { box-shadow: inset 0 0 0 1.5px var(--qi-teal-600); } .qi-lang-option[aria-checked="true"] { color: var(--qi-teal-800); font-weight: 600; } .qi-lang-check { width: 15px; height: 15px; flex: 0 0 auto; stroke-width: 2; color: var(--qi-gold-ink); opacity: 0; transform: scale(.7); transition: opacity .16s var(--qi-ease), transform .16s var(--qi-ease); } .qi-lang-option[aria-checked="true"] .qi-lang-check { opacity: 1; transform: none; } /* Native names must render in their own script at their own size. */ .qi-lang-option[lang="ar"] .qi-lang-name, .qi-lang-option[lang="zh-CN"] .qi-lang-name { font-size: 1rem; } .qi-lang-option[lang="ar"] .qi-lang-name { direction: rtl; } @media (prefers-reduced-motion: reduce) { .qi-lang-menu, .qi-lang-chevron, .qi-lang-check { transition-duration: .01ms; } } /* -------------------------------------------------------------------------- 3. Desktop placement — after the nav and the CTA pill -------------------------------------------------------------------------- */ body.qi header#header [data-device="desktop"] .qi-lang { margin-left: .9rem; } /* -------------------------------------------------------------------------- 4. Mobile placement — a 44px control immediately left of the hamburger, sharing its midline. The panel is not hung off the button (there is no room for a 212px box at the right edge of a 390px bar); it is pinned under the whole bar, full width, with 48px rows. -------------------------------------------------------------------------- */ body.qi header#header [data-device="mobile"] [data-items] { display: flex; align-items: center; gap: 8px; /* Blocksy sets its own column-gap longhand on this container, which beats the `gap` shorthand above no matter how specific it is. */ column-gap: 8px; } body.qi header#header [data-device="mobile"] .qi-lang { margin-right: 0; } /* Blocksy puts a 10px margin-left on the trigger, which stacked on the 8px gap above and pushed the pair apart. The margin existed to hold the hamburger off the logo; the globe now does that job. */ body.qi header#header [data-device="mobile"] .ct-header-trigger { margin-left: 0; } .qi-lang--mobile > .qi-lang-toggle { width: 48px; height: 44px; min-height: 44px; gap: .18rem; padding: 0; font-size: .625rem; letter-spacing: .04em; /* The hamburger beside it carries no chrome at all, so a full-strength outline reads as the loudest thing in the bar. A soft tile with a near-invisible edge keeps the affordance without the weight. The fill is the warm ivory band, not a teal wash: 5% peacock over ivory lands on a cool #F1F2EE that reads as grey next to the warm bar. */ border-color: rgba(11, 68, 68, .13); background-color: var(--qi-ivory-deep); } .qi-lang--mobile > .qi-lang-toggle:hover, .qi-lang--mobile.is-open > .qi-lang-toggle { background-color: #EDE6DA; border-color: rgba(11, 68, 68, .2); } .qi-lang--mobile .qi-lang-globe { width: 19px; height: 19px; } /* The chevron does not survive at this size; the open state is carried by the button's own fill and the panel appearing directly beneath it. */ .qi-lang--mobile .qi-lang-chevron { display: none; } .qi-lang--mobile .qi-lang-code { font-size: .5625rem; letter-spacing: .02em; padding-top: 0; } .qi-lang--mobile > .qi-lang-menu { position: fixed; top: var(--qi-lang-anchor, 64px); right: 14px; left: 14px; min-width: 0; padding: .6rem .45rem .5rem; border-radius: var(--qi-radius); box-shadow: 0 26px 60px -28px rgba(6, 47, 48, .6), 0 2px 8px -4px rgba(6, 47, 48, .28); } /* Ten stacked 48px rows is a 540px sheet that swallows the whole hero. Two columns keeps the 48px target, halves the height and reads as a deliberate sheet rather than a dropdown that ran away. */ .qi-lang--mobile .qi-lang-list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; max-height: calc(100vh - var(--qi-lang-anchor, 64px) - 24px); } .qi-lang--mobile .qi-lang-option { min-height: 48px; padding-inline: .7rem; font-size: .9375rem; border-radius: 9px; /* In a half-width cell, a check pinned to the far edge floats away from the word it belongs to. Keep it beside the name. */ justify-content: flex-start; gap: .5rem; } .qi-lang--mobile .qi-lang-check { width: 14px; height: 14px; margin-left: -.1rem; } .qi-lang--mobile .qi-lang-menu-head { padding-inline: .85rem; } /* The mobile lockup is absolutely positioned and capped against the hamburger alone; the globe takes another 54px out of the bar. */ @media (max-width: 700px) { body.qi .site-logo-container img, body.qi .site-branding img { max-width: calc(100vw - 182px); } } /* -------------------------------------------------------------------------- 5. Google Translate chrome — suppressed entirely -------------------------------------------------------------------------- */ /* The gadget host. Clipped rather than display:none — the widget has to be laid out for its element to initialise. */ #qi-gt-host { position: absolute !important; top: 0; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } /* Banner iframe + the "did you mean" balloon, both injected onto . */ body > .skiptranslate, iframe.skiptranslate, .goog-te-banner-frame, .goog-te-ftab-frame { display: none !important; } /* The 40px shove. See caveat 1. */ body { top: 0 !important; } html { margin-top: 0 !important; } html.translated-ltr body, html.translated-rtl body { top: 0 !important; } /* Hover tooltip / original-text balloon. */ #goog-gt-tt, .goog-tooltip, .goog-tooltip:hover, .goog-te-balloon-frame, .goog-te-spinner-pos { display: none !important; } /* Translated runs are wrapped in with a highlight background. */ .goog-text-highlight, font[style] { background: none !important; background-color: transparent !important; box-shadow: none !important; } /* -------------------------------------------------------------------------- 6. RTL safety (Arabic) -------------------------------------------------------------------------- */ /* Deliberately not a mirrored layout. `unicode-bidi: plaintext` gives each block its own base direction from its first strong character, so Arabic reorders and punctuates correctly, while the LTR grid, the one left rail and every hard-coded alignment in qi-design.css stay exactly as designed. */ html.translated-rtl body.qi :is(p, h1, h2, h3, h4, h5, h6, li, dd, dt, blockquote, figcaption, label, summary, .qi-eyebrow, .qi-stat-label, .qi-btn, .qi-btn-outline, .qi-btn-gold, .qi-btn-ivory) { unicode-bidi: plaintext; } /* Long unbroken Arabic strings must wrap rather than widen a card. */ html.translated-rtl body.qi p, html.translated-rtl body.qi li, html.translated-rtl body.qi h1, html.translated-rtl body.qi h2, html.translated-rtl body.qi h3 { overflow-wrap: break-word; } /* Our own chrome is never translated and never flips. */ .qi-lang, .qi-lang * { direction: ltr; } .qi-lang-option[lang="ar"] .qi-lang-name { direction: rtl; }