/* =========================================================================== BGD Design System — global entry point. Consumers link THIS file only. Keep it to @import lines. =========================================================================== */ @import url('./tokens/colors.css'); @import url('./tokens/typography.css'); @import url('./tokens/spacing.css'); @import url('./tokens/effects.css'); @import url('./tokens/base.css'); /* === BGD bilingual switch === */ /* Both language copies live in the DOM; the attr reveals one. Default (no attr yet) shows English so content paints before lang.js runs. */ html[data-lang="hi"] [lang="en"] { display: none !important; } html[data-lang="en"] [lang="hi"] { display: none !important; } [lang="hi"] { font-family: 'Tiro Devanagari Hindi', var(--font-display); } /* Language toggle active-state (used in the header utility bar) */ .bgd-langbtn { cursor: pointer; background: none; border: none; padding: 0; font: inherit; color: inherit; opacity: .55; transition: opacity var(--dur-fast) var(--ease-standard); } .bgd-langbtn:hover { opacity: .85; } html[data-lang="en"] .bgd-langbtn[data-lang-set="en"], html[data-lang="hi"] .bgd-langbtn[data-lang-set="hi"] { opacity: 1; color: #fff; font-weight: 700; } /* === BGD responsive layer (website pages) === NOTE: the DC runtime re-serialises inline styles with a space after the colon (e.g. `font-size: 84px`, `justify-content: space-between`). Value-based selectors therefore include the space; unspaced variants are kept as a fallback for any raw-rendered context. */ @media (max-width: 860px){ .bgd-page [style*="grid-template-columns"]{ grid-template-columns:1fr !important; } .bgd-page [style*=" 56px"]{ padding-left:24px !important; padding-right:24px !important; } .bgd-page [style*="justify-content: space-between"], .bgd-page [style*="justify-content:space-between"]{ flex-wrap:wrap !important; } .bgd-page [style*="display: flex"][style*="justify-content: center"], .bgd-page [style*="display:flex"][style*="justify-content:center"]{ flex-wrap:wrap !important; } .bgd-page img{ max-width:100%; } /* Stat bands read 2-up rather than one tall column on phones (override the grid-collapse rule above — same specificity, later wins). */ .bgd-page [style*="repeat(5, 1fr)"], .bgd-page [style*="repeat(5,1fr)"], .bgd-page [style*="repeat(6, 1fr)"], .bgd-page [style*="repeat(6,1fr)"]{ grid-template-columns:repeat(2,1fr) !important; } } @media (max-width: 560px){ .bgd-page [style*="font-size: 84px"], .bgd-page [style*="font-size:84px"]{ font-size:40px !important; } .bgd-page [style*="font-size: 72px"], .bgd-page [style*="font-size:72px"]{ font-size:38px !important; } .bgd-page [style*="font-size: 64px"], .bgd-page [style*="font-size:64px"]{ font-size:36px !important; } .bgd-page [style*="font-size: 56px"], .bgd-page [style*="font-size:56px"]{ font-size:33px !important; } .bgd-page [style*="font-size: 52px"], .bgd-page [style*="font-size:52px"]{ font-size:32px !important; } .bgd-page [style*="font-size: 50px"], .bgd-page [style*="font-size:50px"]{ font-size:31px !important; } .bgd-page [style*="font-size: 48px"], .bgd-page [style*="font-size:48px"]{ font-size:31px !important; } .bgd-page [style*="font-size: 46px"], .bgd-page [style*="font-size:46px"]{ font-size:30px !important; } .bgd-page [style*="font-size: 44px"], .bgd-page [style*="font-size:44px"]{ font-size:29px !important; } .bgd-page [style*="font-size: 42px"], .bgd-page [style*="font-size:42px"]{ font-size:28px !important; } .bgd-page [style*="font-size: 40px"], .bgd-page [style*="font-size:40px"]{ font-size:27px !important; } }