/* Site language switcher — self-contained so it never depends on the compiled frontend.css. The dropdown menu is absolutely positioned so opening it never reflows the page (no layout shift). */ /* Translation veil: while a non-English language is being applied on load, the page content is held hidden (visibility) so untranslated English never flashes; the switcher removes .ws-translating once translation has been applied (instant for cached content). An inline head script and the switcher both enforce a safety timeout so content can never remain hidden. The "loading" feedback itself lives inside the language modal (see .ws-lang-modal-loading below), not in a separate overlay. */ html.ws-translating { background-color: #f8f5ef; } html.ws-translating body.ws-body { visibility: hidden !important; } /* --- In-modal translating state --- */ /* Once a language is chosen, the modal body is swapped for this spinner + label until the page reloads. */ .ws-lang-modal-loading { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 28px 10px 16px; text-align: center; } .ws-lang-modal-card.is-loading .ws-lang-modal-body { display: none; } .ws-lang-modal-card.is-loading .ws-lang-modal-loading { display: flex; } .ws-lang-loader-spinner { width: 58px; height: 58px; border-radius: 50%; background: conic-gradient(from 90deg, rgba(118, 167, 19, 0) 0%, rgba(118, 167, 19, 0.15) 25%, #76a713 100%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px)); mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px)); animation: ws-lang-spin 0.85s linear infinite; } @keyframes ws-lang-spin { to { transform: rotate(360deg); } } .ws-lang-loader-text { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: 0.2px; color: #0f1720; text-align: center; } .ws-lang-loader-lang { color: #0b3a18; font-weight: 700; } @media (prefers-reduced-motion: reduce) { .ws-lang-loader-spinner { animation-duration: 1.6s; } } /* Header translation tolerance: Indic-script nav labels are wider and taller than the English originals, so the header's fixed spacing crowds the logo and CTA once translated. These rules shrink the nav gap/font and trim the CTA + contact spacing only while a non-English language is active (scoped by the attribute the switcher sets) so the menu keeps clear of the logo and other elements. English (lang="en"/"en-*") is never affected. */ html[lang]:not([lang^="en"]) .ws-header-layout-1 .ws-desktop-nav-list, html[lang]:not([lang^="en"]) .ws-header-layout-2 .ws-desktop-nav-list, html[lang]:not([lang^="en"]) .ws-header-layout-3 .ws-desktop-nav-list { gap: clamp(8px, 0.9vw, 20px); row-gap: 6px; /* When the translated labels do not fit on one row, wrap to the next line instead of overflowing behind the language selector / CTA. */ flex-wrap: wrap; justify-content: center; } html[lang]:not([lang^="en"]) .ws-header-layout-1 .ws-desktop-nav-list .ws-desktop-nav-link, html[lang]:not([lang^="en"]) .ws-header-layout-2 .ws-desktop-nav-list .ws-desktop-nav-link, html[lang]:not([lang^="en"]) .ws-header-layout-3 .ws-desktop-nav-list .ws-desktop-nav-link { font-size: 0.875rem; white-space: nowrap; } /* Give the menu room on the logo side so it does not run into the logo. */ html[lang]:not([lang^="en"]) .ws-header-layout-1 .ws-desktop-nav, html[lang]:not([lang^="en"]) .ws-header-layout-2 .ws-desktop-nav, html[lang]:not([lang^="en"]) .ws-header-layout-3 .ws-desktop-nav { padding-left: clamp(10px, 1.5vw, 28px); } /* Trim the CTA + contact spacing so the wider translated menu has room. */ html[lang]:not([lang^="en"]) .ws-header-layout-1 .ws-header-contact, html[lang]:not([lang^="en"]) .ws-header-layout-2 .ws-header-contact, html[lang]:not([lang^="en"]) .ws-header-layout-3 .ws-header-contact { margin-left: clamp(8px, 1vw, 16px); } html[lang]:not([lang^="en"]) .ws-header-contact .ws-contact-btn { white-space: nowrap; min-width: 0; } /* Heading tolerance for translated (non-English) content: Indic scripts render taller and heavier, so the English display sizes look oversized and the fixed-px line-heights crowd stacked glyphs and wrapped lines. For non-English only, trim the heading font sizes a little and switch to roomier, relative line-heights. English (lang="en"/"en-*") is never affected. */ html[lang]:not([lang^="en"]) h1, html[lang]:not([lang^="en"]) h2, html[lang]:not([lang^="en"]) h3, html[lang]:not([lang^="en"]) h4, html[lang]:not([lang^="en"]) h5, html[lang]:not([lang^="en"]) h6 { line-height: 1.35; } html[lang]:not([lang^="en"]) .ws-text-size-120 { font-size: 6.25rem; line-height: 1.15; } html[lang]:not([lang^="en"]) .ws-text-size-100 { font-size: 5.25rem; line-height: 1.15; } html[lang]:not([lang^="en"]) .ws-text-size-66 { font-size: 3.5rem; line-height: 1.2; } html[lang]:not([lang^="en"]) .ws-text-size-50 { font-size: 2.65rem; line-height: 1.25; } html[lang]:not([lang^="en"]) .ws-text-size-44 { font-size: 2.35rem; line-height: 1.3; } html[lang]:not([lang^="en"]) .ws-text-size-40 { font-size: 2.15rem; line-height: 1.3; } html[lang]:not([lang^="en"]) .ws-text-size-36 { font-size: 1.95rem; line-height: 1.35; } html[lang]:not([lang^="en"]) .ws-text-size-30 { font-size: 1.65rem; line-height: 1.4; } html[lang]:not([lang^="en"]) .ws-text-size-26, html[lang]:not([lang^="en"]) .text-size-26 { font-size: 1.45rem; line-height: 1.4; } html[lang]:not([lang^="en"]) .ws-text-size-24 { font-size: 1.35rem; line-height: 1.4; } html[lang]:not([lang^="en"]) .ws-text-size-22 { font-size: 1.25rem; line-height: 1.45; } html[lang]:not([lang^="en"]) .ws-text-size-20 { font-size: 1.15rem; line-height: 1.45; } html[lang]:not([lang^="en"]) .ws-sub-banner-con .ws-sub-banner-title { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.2; } .ws-lang-switcher { position: relative; display: inline-flex; align-items: center; font-family: inherit; line-height: 1; } .ws-lang-toggle { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border: 1px solid rgba(0, 0, 0, 0.14); border-radius: 999px; background: #ffffff; color: #1a1a1a; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; } .ws-lang-toggle:hover { border-color: rgba(0, 0, 0, 0.28); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); } .ws-lang-toggle:focus-visible { outline: 2px solid #0d6efd; outline-offset: 2px; } .ws-lang-toggle-icon { width: 18px; height: 18px; flex: 0 0 auto; display: inline-block; } .ws-lang-current { display: inline-block; min-width: 3.5em; text-align: left; } .ws-lang-caret { width: 10px; height: 10px; flex: 0 0 auto; opacity: 0.6; } /* ------------------------------------------------------------------ * * Language modal popup * A custom, centered dialog that lists every language. It only closes * when the user hits the close button, presses Escape, or picks a * language — clicking the backdrop does NOT dismiss it. * ------------------------------------------------------------------ */ .ws-lang-modal { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 20px; } .ws-lang-modal[hidden] { display: none; } .ws-lang-modal-backdrop { position: absolute; inset: 0; background: rgba(9, 14, 24, 0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity 0.22s ease; } .ws-lang-modal.is-open .ws-lang-modal-backdrop { opacity: 1; } .ws-lang-modal-card { position: relative; width: min(600px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; padding: clamp(20px, 3vw, 30px); background: #ffffff; border-radius: 22px; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.35); transform: translateY(18px) scale(0.97); opacity: 0; transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease; } .ws-lang-modal.is-open .ws-lang-modal-card { transform: translateY(0) scale(1); opacity: 1; } .ws-lang-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; } .ws-lang-modal-heading { min-width: 0; } .ws-lang-modal-title { margin: 0; font-size: clamp(18px, 2.4vw, 22px); font-weight: 700; line-height: 1.2; color: #0f1720; } .ws-lang-modal-sub { margin: 6px 0 0; font-size: 13.5px; line-height: 1.4; color: #64748b; } .ws-lang-modal-close { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: #f1f5f9; color: #334155; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease; } .ws-lang-modal-close svg { width: 20px; height: 20px; } .ws-lang-modal-close:hover { background: #e2e8f0; color: #0f1720; } .ws-lang-modal-close:focus-visible { outline: 2px solid #0d6efd; outline-offset: 2px; } .ws-lang-modal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .ws-lang-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 14px 16px; border: 1.5px solid #e6eaf0; border-radius: 14px; background: #ffffff; color: #1f2933; text-align: left; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease; } .ws-lang-card:hover { border-color: #b9c6dd; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08); transform: translateY(-1px); } .ws-lang-card:focus-visible { outline: 2px solid #0d6efd; outline-offset: 2px; } .ws-lang-card.is-active { border-color: #0d5bdd; background: #eef4ff; } .ws-lang-card-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ws-lang-card-native { font-size: 17px; font-weight: 700; line-height: 1.2; color: #0f1720; } .ws-lang-card-name { font-size: 12.5px; font-weight: 500; color: #7686a0; } .ws-lang-card.is-active .ws-lang-card-name { color: #3b74d6; } .ws-lang-card-check { width: 20px; height: 20px; flex: 0 0 auto; color: #0d5bdd; opacity: 0; transform: scale(0.6); transition: opacity 0.15s ease, transform 0.15s ease; } .ws-lang-card.is-active .ws-lang-card-check { opacity: 1; transform: scale(1); } /* Lock background scroll while the modal is open. */ body.ws-lang-modal-open { overflow: hidden; } .ws-lang-switcher--drawer { display: flex; width: 100%; } .ws-lang-switcher--drawer .ws-lang-toggle { width: 100%; justify-content: space-between; height: 44px; } @media (max-width: 520px) { .ws-lang-modal-grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 991px) { .ws-lang-switcher--header { display: none; } } @media (min-width: 992px) { .ws-lang-switcher--drawer { display: none; } }