/* * Language switcher (.inc/embed/lang-switcher.php). * * Self-contained and theme-agnostic: the app has three different chromes * (marketing = Tailwind `.dark` class, portal/auth = `[data-theme]` attribute), * so every colour here is a CSS variable resolved against BOTH conventions. * Drop the widget anywhere and it inherits the right palette. */ .cp-lang { --cpl-bg: #ffffff; --cpl-fg: #0f172a; --cpl-muted: #64748b; --cpl-border: rgba(15, 23, 42, .12); --cpl-hover: rgba(15, 23, 42, .05); --cpl-accent: #16a34a; --cpl-shadow: 0 18px 44px -12px rgba(2, 6, 23, .28); position: relative; display: inline-block; font-size: 14px; line-height: 1.2; } /* Dark mode — marketing (.dark on ) and portal/auth ([data-theme]). */ .dark .cp-lang, [data-theme="dark"] .cp-lang { --cpl-bg: #0f1524; --cpl-fg: #e2e8f0; --cpl-muted: #94a3b8; --cpl-border: rgba(255, 255, 255, .12); --cpl-hover: rgba(255, 255, 255, .07); --cpl-accent: #34d399; --cpl-shadow: 0 18px 44px -12px rgba(0, 0, 0, .7); } /* ── Trigger ──────────────────────────────────────────────────────────── */ .cp-lang > summary { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--cpl-border); border-radius: 10px; color: var(--cpl-fg); background: transparent; cursor: pointer; user-select: none; list-style: none; transition: border-color .15s ease, background-color .15s ease; } .cp-lang > summary::-webkit-details-marker { display: none; } .cp-lang > summary::marker { content: ""; } .cp-lang > summary:hover { border-color: var(--cpl-accent); } .cp-lang > summary:focus-visible { outline: 2px solid var(--cpl-accent); outline-offset: 2px; } .cp-lang-btn-name { font-weight: 600; white-space: nowrap; max-width: 12ch; overflow: hidden; text-overflow: ellipsis; } .cp-lang--compact .cp-lang-btn-name { display: none; } .cp-lang-caret { width: 13px; height: 13px; color: var(--cpl-muted); transition: transform .18s ease; flex: none; } .cp-lang[open] .cp-lang-caret { transform: rotate(180deg); } /* ── Flags ────────────────────────────────────────────────────────────── */ .cp-flag { width: 21px; height: 14px; flex: none; border-radius: 2.5px; box-shadow: 0 0 0 1px rgba(15, 23, 42, .12) inset; display: block; } .dark .cp-flag, [data-theme="dark"] .cp-flag { box-shadow: 0 0 0 1px rgba(255, 255, 255, .18) inset; } /* ── Panel ────────────────────────────────────────────────────────────── */ .cp-lang-panel { position: absolute; z-index: 120; top: calc(100% + 8px); right: 0; width: 270px; max-width: calc(100vw - 24px); padding: 8px; border: 1px solid var(--cpl-border); border-radius: 14px; background: var(--cpl-bg); color: var(--cpl-fg); box-shadow: var(--cpl-shadow); animation: cpLangIn .14s ease-out; } .cp-lang--footer .cp-lang-panel { top: auto; bottom: calc(100% + 8px); left: 0; right: auto; } [dir="rtl"] .cp-lang-panel { right: auto; left: 0; } [dir="rtl"] .cp-lang--footer .cp-lang-panel { left: auto; right: 0; } @keyframes cpLangIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .cp-lang-panel { animation: none; } .cp-lang-caret { transition: none; } } /* ── Search ───────────────────────────────────────────────────────────── */ .cp-lang-search { position: relative; margin-bottom: 6px; } .cp-lang-search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--cpl-muted); pointer-events: none; } [dir="rtl"] .cp-lang-search svg { left: auto; right: 10px; } .cp-lang-search input { width: 100%; padding: 9px 10px 9px 32px; border: 1px solid var(--cpl-border); border-radius: 9px; background: transparent; color: inherit; font: inherit; font-size: 13.5px; } [dir="rtl"] .cp-lang-search input { padding: 9px 32px 9px 10px; } .cp-lang-search input::placeholder { color: var(--cpl-muted); } .cp-lang-search input:focus { outline: none; border-color: var(--cpl-accent); } .cp-lang-search input::-webkit-search-cancel-button { cursor: pointer; } /* ── List ─────────────────────────────────────────────────────────────── */ .cp-lang-list { list-style: none; margin: 0; padding: 0; max-height: 328px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } .cp-lang-list::-webkit-scrollbar { width: 8px; } .cp-lang-list::-webkit-scrollbar-thumb { background: var(--cpl-border); border-radius: 99px; } .cp-lang-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; color: inherit; text-decoration: none; transition: background-color .12s ease; } .cp-lang-item:hover, .cp-lang-item:focus-visible { background: var(--cpl-hover); outline: none; } .cp-lang-item-name { flex: 1 1 auto; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cp-lang-item.is-active .cp-lang-item-name { font-weight: 700; } .cp-lang-tick { width: 15px; height: 15px; flex: none; color: var(--cpl-accent); } .cp-lang-empty { margin: 6px 0 2px; padding: 10px; text-align: center; font-size: 13px; color: var(--cpl-muted); } /* ── Inline (mobile nav / footer column) variant ───────────────────────── */ .cp-lang--inline { display: block; } .cp-lang--inline > summary { width: 100%; justify-content: space-between; } .cp-lang--inline .cp-lang-btn-name { display: block; max-width: none; text-align: start; flex: 1 1 auto; } .cp-lang--inline .cp-lang-panel { position: static; width: 100%; max-width: none; box-shadow: none; margin-top: 6px; } .cp-lang--inline .cp-lang-list { max-height: 240px; } /* ── Host-specific placement ───────────────────────────────────────────── */ /* Auth pages (auth.css): float the switcher above the card. * * It must stay `position: absolute` at EVERY width. `body.au` is a centring * flexbox, so a statically-positioned .au-lang becomes a flex *sibling* of * .au-card — the two lay out side by side, the card is squeezed to a fraction * of the screen, and the panel (anchored right:0 to a pill that is now on the * left) hangs off the left edge of the viewport. Narrow the offsets on small * screens; never take it out of the flow. */ .au-lang { position: absolute; top: 16px; right: 16px; z-index: 30; } [dir="rtl"] .au-lang { right: auto; left: 16px; } @media (max-width: 480px) { .au-lang { top: 14px; right: 12px; } } /* Marketing nav slot (site-header.php): the pill from 640px up; below that the * mobile drawer's `inline` switcher takes over. * * A plain class rather than Tailwind's `hidden sm:block`. `assets/css/site.tw.css` * is a COMMITTED build with no build step in this repo, and it never contained * `sm:block` — so `hidden` applied at every width and the switcher was invisible * in the desktop nav on every marketing page, leaving the footer as the only way * to change language. Utilities that are not already in that file cannot be used. */ .cp-lang-navslot { display: none; } @media (min-width: 640px) { .cp-lang-navslot { display: block; } } /* Portal sidebar footer (portal.css): full-width, opens upwards. */ .pt-sb-lang { margin-bottom: 10px; } .pt-sb-lang .cp-lang { display: block; } .pt-sb-lang .cp-lang > summary { width: 100%; justify-content: space-between; } .pt-sb-lang .cp-lang-btn-name { display: block; max-width: none; flex: 1 1 auto; text-align: start; } .pt-sb-lang .cp-lang-panel { bottom: calc(100% + 8px); top: auto; left: 0; right: 0; width: auto; } .pt-sb-lang .cp-lang-list { max-height: 260px; } /* Portal mobile top bar: flag-only, pushed next to the avatar. */ .pt-mobtop .cp-lang { margin-inline-start: auto; margin-inline-end: 10px; } /* ── Hosted checkout ────────────────────────────────────────────────────────── The buyer pages are a self-contained shell (.cx) with their own tokens, so the switcher is centred under the card footer rather than docked to a nav. */ .cx-lang { display: flex; justify-content: center; margin: 18px 0 4px; } .cx-lang .cp-lang-btn { font-size: 12px; color: var(--muted, #6b7280); } .cx-lang .cp-lang-panel { bottom: calc(100% + 8px); top: auto; left: 50%; transform: translateX(-50%); } [dir="rtl"] .cx-lang .cp-lang-panel { left: auto; right: 50%; transform: translateX(50%); }