/* Globe language button — sits inline inside #site-footer next to copyright text. */ #site-footer #lang-wrap { display: inline-block; position: relative; margin-left: 4px; vertical-align: baseline; } #site-footer #lang-btn { background: none; border: none; padding: 0 2px; margin: 0; cursor: pointer; color: rgba(0, 0, 0, 0.4); font: inherit; line-height: inherit; vertical-align: middle; display: inline-flex; align-items: center; transition: color 0.15s ease; } #site-footer #lang-btn:hover { color: rgba(0, 0, 0, 0.7); } #site-footer #lang-btn svg { width: 11px; height: 11px; display: block; } #site-footer #lang-menu { display: none; position: absolute; right: 0; bottom: calc(100% + 4px); background: #fff; border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); z-index: 200; min-width: 110px; font-family: "Ubuntu", sans-serif; } #site-footer #lang-menu.open { display: block; } #site-footer #lang-menu button { display: block; width: 100%; text-align: left; padding: 6px 10px; border: none; background: none; cursor: pointer; font-size: 11px; font-family: inherit; font-weight: 300; color: #333; } #site-footer #lang-menu button:hover { background: #f0f4ff; } #site-footer #lang-menu button.active { font-weight: 600; color: #1f77b4; } /* ── Mobile language picker overlay ────────────────────────────── Hidden by default. Runtime adds .show only on mobile (≤1024px) and only when no per-session choice exists yet. Z-index above the orientation-lock overlay so language is picked first. */ #lang-picker-overlay { display: none; position: fixed; inset: 0; background: rgba(20, 20, 20, 0.92); z-index: 100000; align-items: center; justify-content: center; padding: 24px; -webkit-tap-highlight-color: transparent; } #lang-picker-overlay.show { display: flex; } #lang-picker-overlay .lang-picker-card { background: #fff; border-radius: 16px; padding: 28px 22px 24px; max-width: 360px; width: 100%; text-align: center; font-family: "Ubuntu", sans-serif; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35); } #lang-picker-overlay .lang-picker-globe { margin: 0 auto 14px; display: block; color: #333; } #lang-picker-overlay .lang-picker-prompt { font-size: 15px; font-weight: 300; color: #555; margin: 0 0 20px; line-height: 1.5; } #lang-picker-overlay .lang-picker-prompt span { display: block; margin-top: 2px; font-style: italic; } #lang-picker-overlay .lang-picker-buttons { display: flex; flex-direction: column; gap: 10px; } #lang-picker-overlay .lang-picker-buttons button { font-family: inherit; font-size: 18px; font-weight: 400; padding: 14px 20px; border: 1px solid #333; border-radius: 8px; background: #fff; color: #333; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } #lang-picker-overlay .lang-picker-buttons button:hover, #lang-picker-overlay .lang-picker-buttons button:active { background: #333; color: #fff; } /* ── Swahili overflow handling ────────────────────────────────── Framer locks font-size via inline style on

, so overrides need !important. Only applied when Swahili is the active language (set on by i18n.js). Allow wrapping + shrink the worst-offending nav buttons. */ html[lang="sw"] [data-nav-button] p.framer-text { white-space: normal !important; word-break: normal !important; overflow-wrap: break-word !important; hyphens: auto !important; line-height: 1.05em !important; } /* Support button: longest Swahili string. Shrink + tighten leading. Force the + its inner divs into a flex-centered column so the shrunken text sits vertically centered (Framer's original layout reserves vertical space for ~3 lines at 35px; at 26px the text is shorter and would otherwise sit top-anchored). */ html[lang="sw"] a[data-nav-button="support"] { display: flex !important; align-items: center !important; justify-content: center !important; } html[lang="sw"] a[data-nav-button="support"] > div, html[lang="sw"] a[data-nav-button="support"] > div > div { position: static !important; width: 100% !important; height: auto !important; transform: none !important; } html[lang="sw"] [data-nav-button="support"] p.framer-text { font-size: 26px !important; --framer-font-size: 26px !important; letter-spacing: -0.2px !important; line-height: 1.15em !important; } /* Cool Buildings Guide: ~30% longer in Swahili. Slight font-size reduction. */ html[lang="sw"] [data-nav-button="cbg"] p.framer-text { font-size: 26px !important; --framer-font-size: 26px !important; } /* Support page tagline: Swahili is much longer than English, reduce font size */ html[lang="sw"] p.framer-text[data-i18n="support.tagline"] { font-size: 20px !important; --framer-font-size: 20px !important; line-height: 1.2em !important; } /* Support page mission paragraphs: Swahili text is significantly longer, shrink to avoid overlapping images */ html[lang="sw"] [data-i18n^="support.mission"], html[lang="sw"] [data-i18n^="support.larger.mission"] { font-size: 18px !important; --framer-font-size: 18px !important; line-height: 1.4em !important; }