/* ========================================== i18n.css — Aspire Pharmaceuticals Devanagari self-hosted font + EN｜हिं toggle pill + no-flash cloak. SCOPED TO html[lang="hi"] ONLY. lang="en" is completely unaffected: the @font-face blocks define an unused family in EN (no download — browsers fetch a face only when a matching glyph is rendered), and every rule below is gated on html[lang="hi"]. The toggle pill itself is the sole EN-visible element, and it carries no layout/typography impact on page content. ========================================== */ /* --- Self-hosted Noto Sans Devanagari (weights 400 / 500 / 700) --- */ @font-face { font-family: 'Noto Sans Devanagari'; src: url('../assets/fonts/NotoSansDevanagari-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Noto Sans Devanagari'; src: url('../assets/fonts/NotoSansDevanagari-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Noto Sans Devanagari'; src: url('../assets/fonts/NotoSansDevanagari-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* --- Hindi font stack --- Prepend Noto so Devanagari codepoints render in Noto; the woff2 subset has NO Latin glyphs, so any remaining Latin (GMP, CIN, mg, &, …) falls through to the existing brand fonts. font-SIZE / clamp() are untouched per brief — only the family changes. */ html[lang="hi"] body, html[lang="hi"] body * { font-family: 'Noto Sans Devanagari', 'Proxima Nova', 'Space Grotesk', sans-serif; } /* --- No-flash-of-English cloak (Hindi only) --- The inline snippet sets documentElement.lang from localStorage before body paint. While Hindi and not yet translated, hide the body; i18n.js adds html.i18n-ready right after the DOM is translated, revealing already-Hindi content. A keyframe failsafe reveals after 3s so a JS failure never leaves a blank page. EN never matches this selector -> no cloak in English. */ html[lang="hi"]:not(.i18n-ready) body { visibility: hidden; } html[lang="hi"].i18n-ready body { visibility: visible; } @keyframes aspire-i18n-failsafe-reveal { to { visibility: visible; } } html[lang="hi"]:not(.i18n-ready) body { animation: aspire-i18n-failsafe-reveal 0s linear 3s forwards; } /* --- EN｜हिं language toggle pill --- Lives INSIDE the header action row (.header-actions, a flex container). order:-1 makes it the first flex item, so it renders left of