/* =============================================================== language.css — the app-side language selector, in one place Deliberately design-system-agnostic, like public_html/lang.css is for the marketing site. The app has five surfaces that need this control and they do NOT share a stylesheet: base.html Tailwind, light or dark via .dark on auth/login.html Tailwind, always dark auth/onboarding.html Tailwind, always dark auth/forgot.html Tailwind, always dark booking/_base.html NO Tailwind at all — hand-rolled inline styles Writing this in Tailwind utilities meant it could never work on the booking pages, which is how those ended up with a hand-copied selector carrying its own colours and its own JavaScript. Plain classes plus a `.cz-lang-dark` opt-in cover all five. Rendered by /static/js/language.js. =============================================================== */ .cz-lang { position: relative; display: inline-flex; } .cz-lang-block { display: block; width: 100%; } /* ---- Trigger ---- */ .cz-lang-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 6px; /* 44x44 minimum. The app header pill was h-9/h-10 (36-40px) and on a phone this is the only language control there is. */ min-height: 44px; min-width: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid transparent; background: #F1F5F9; /* slate-100 */ color: #334155; /* slate-700 — body-text contrast, not a grey hint */ font: inherit; line-height: 1; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .cz-lang-trigger:hover { background: #E2E8F0; /* slate-200 */ color: #0F172A; /* slate-900 */ } .cz-lang-trigger:focus-visible { outline: 2px solid #16A34A; outline-offset: 2px; } .cz-lang-code { font-size: 0.688rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .cz-lang-icon { font-size: 0.875rem; flex-shrink: 0; } /* Full-width row for the mobile sidebar drawer, where the control reads as a menu item rather than a pill. */ .cz-lang-trigger-wide { width: 100%; justify-content: space-between; gap: 12px; padding: 0 16px; min-height: 48px; border-radius: 10px; background: transparent; } .cz-lang-trigger-wide:hover { background: #F1F5F9; } .cz-lang-trigger-wide .cz-lang-label { display: inline-flex; align-items: center; gap: 12px; font-size: 0.875rem; font-weight: 500; } .cz-lang-trigger-wide .cz-lang-code { background: #E2E8F0; padding: 3px 8px; border-radius: 6px; } /* ---- Panel ---- */ .cz-lang-panel { position: absolute; right: 0; top: 100%; margin-top: 8px; z-index: 1200; width: 240px; padding: 4px; background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 16px; box-shadow: 0 20px 40px rgba(15, 23, 42, 0.18); } /* In the sidebar drawer the trigger sits near the bottom of the viewport, so the panel opens upward and matches the row's width. */ .cz-lang-panel-up { top: auto; bottom: 100%; left: 0; right: 0; width: auto; margin-top: 0; margin-bottom: 8px; } .cz-lang-panel[hidden] { display: none; } .cz-lang-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid #E2E8F0; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #475569; /* slate-600 */ } .cz-lang-auto { color: #16A34A; letter-spacing: 0.06em; } .cz-lang-list { /* Caps the panel so ten languages cannot run off the bottom of a short phone; the list scrolls instead. */ max-height: 15rem; overflow-y: auto; -webkit-overflow-scrolling: touch; } .cz-lang-option { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 10px; border: 0; border-radius: 8px; background: transparent; color: #334155; font: inherit; text-align: left; cursor: pointer; transition: background 0.15s ease; } .cz-lang-option:hover { background: #F1F5F9; } .cz-lang-option:focus-visible { outline: 2px solid #16A34A; outline-offset: -2px; } .cz-lang-flag { font-size: 1.0625rem; line-height: 1; flex-shrink: 0; } .cz-lang-names { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; } .cz-lang-native { font-size: 0.8125rem; font-weight: 600; } /* Not decoration: the English name is how someone who picked a script they cannot read finds their way back. #475569 clears AA on this panel. */ .cz-lang-english { font-size: 0.6875rem; color: #475569; } .cz-lang-tick { flex-shrink: 0; color: #16A34A; font-size: 0.75rem; opacity: 0; } .cz-lang-option[aria-selected="true"] .cz-lang-tick { opacity: 1; } .cz-lang-option[aria-selected="true"] .cz-lang-native { color: #15803D; } .cz-lang-note { padding: 8px 10px 4px; margin: 4px 0 0; border-top: 1px solid #E2E8F0; font-size: 0.625rem; color: #475569; } /* ---- Dark ---- `.dark` is Tailwind's class strategy on (see tailwind.config.js darkMode: 'class'). `.cz-lang-dark` is the manual opt-in for the pages that are always dark but never set that class — booking/_base.html. */ .dark .cz-lang-trigger, .cz-lang-dark .cz-lang-trigger { background: #1E293B; /* slate-800 */ color: #E2E8F0; /* slate-200 */ } .dark .cz-lang-trigger:hover, .cz-lang-dark .cz-lang-trigger:hover { background: #334155; color: #FFFFFF; } .dark .cz-lang-trigger-wide, .cz-lang-dark .cz-lang-trigger-wide { background: transparent; } .dark .cz-lang-trigger-wide:hover, .cz-lang-dark .cz-lang-trigger-wide:hover { background: #1E293B; } .dark .cz-lang-trigger-wide .cz-lang-code, .cz-lang-dark .cz-lang-trigger-wide .cz-lang-code { background: #334155; } .dark .cz-lang-panel, .cz-lang-dark .cz-lang-panel { background: #0F172A; /* opaque: this sits over content, and a translucent menu is where contrast goes */ border-color: #334155; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.55); } .dark .cz-lang-head, .cz-lang-dark .cz-lang-head, .dark .cz-lang-note, .cz-lang-dark .cz-lang-note { border-color: #334155; color: #CBD5E1; /* slate-300 */ } .dark .cz-lang-option, .cz-lang-dark .cz-lang-option { color: #E2E8F0; } .dark .cz-lang-option:hover, .cz-lang-dark .cz-lang-option:hover { background: #1E293B; } .dark .cz-lang-english, .cz-lang-dark .cz-lang-english { color: #CBD5E1; } .dark .cz-lang-tick, .cz-lang-dark .cz-lang-tick, .dark .cz-lang-auto, .cz-lang-dark .cz-lang-auto { color: #4ADE80; } .dark .cz-lang-option[aria-selected="true"] .cz-lang-native, .cz-lang-dark .cz-lang-option[aria-selected="true"] .cz-lang-native { color: #4ADE80; } @media (prefers-reduced-motion: reduce) { .cz-lang-trigger, .cz-lang-option { transition: none; } } /* ---- Google Translate chrome ---- The widget injects a banner that shoves the page down 40px, a floating tooltip and a gadget. The app drives translation from its own selector and shows none of them. */ .goog-te-banner-frame, .goog-te-banner, .skiptranslate, .goog-te-gadget, #goog-gt-tt, .goog-te-balloon-frame, #google_translate_element, .VIpgJd-ZGain-xl05Fe-OJuWdf { display: none !important; } body { top: 0 !important; } .goog-tooltip, .goog-tooltip:hover { display: none !important; } .goog-text-highlight, font { background-color: transparent !important; box-shadow: none !important; }