/* ArabSchool — font stack. Baloo 2 for Latin, Baloo Bhaijaan 2 for Arabic. Same foundry (ITF), purpose-paired to share x-height, baseline, and weight balance across scripts — so a kid (or parent) flipping the language toggle gets the same friendly visual rhythm in both directions. Both fonts are self-hosted from /wwwroot/fonts/ because network latency between Jordan and Google Fonts CDNs is unreliable for the school cafés and tahtakasa libraries we're targeting. History note: Phase 5A originally shipped Nunito (Latin) + Cairo (Arabic) but the Cairo files were never dropped on disk, and after a visual review in May 2026 Ed switched the platform to Baloo 2 / Baloo Bhaijaan 2 for a warmer, more kid-friendly feel across all surfaces (public, admin, family, and kid views all share the same family now). Nunito is kept as a graceful fallback for the historic Latin glyphs already in /wwwroot/fonts/nunito/. Drop the actual .woff2 binaries into wwwroot/fonts/{baloo-2, baloo-bhaijaan-2}/ — see wwwroot/fonts/README.md for the fetch recipe and licensing (OFL-1.1 for both). These @font-face declarations tolerate a missing file gracefully because of the fallback stack — the page won't explode in dev before binaries land. */ /* ---- Baloo 2 (Latin, variable) -------------------------------------- */ @font-face { font-family: 'Baloo 2'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/fonts/baloo-2/Baloo2.woff2') format('woff2'); } /* ---- Baloo Bhaijaan 2 (Arabic, variable) ---------------------------- */ @font-face { font-family: 'Baloo Bhaijaan 2'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/fonts/baloo-bhaijaan-2/BalooBhaijaan2.woff2') format('woff2'); } /* ---- Nunito (Latin, variable) — legacy fallback --------------------- */ /* Kept as a fallback only — covers the case where the Baloo woff2 hasn't downloaded yet (e.g. first paint on a cold cache, or a deploy that accidentally drops the Baloo binaries). Not in the front of any stack. */ @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 200 1000; font-display: swap; src: url('/fonts/nunito/Nunito.woff2') format('woff2'); } /* ---- Font-family custom properties ---------------------------------- */ /* `--font` is the single app-wide token. site.css, kids.css, admin panels — everything inherits it from html. The value swaps based on : LTR pages lead with Baloo 2; RTL pages lead with Baloo Bhaijaan 2. Each stack includes the other family so a runaway English word inside Arabic prose (or vice versa) still has a sane glyph source. Nunito + system-Arabic remain at the back of each stack as historical fallbacks; if the Baloo binaries are missing the page still renders recognisably instead of flashing to Times New Roman. */ :root { --font-latin: 'Baloo 2', 'Baloo Bhaijaan 2', 'Nunito', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif; --font-arabic: 'Baloo Bhaijaan 2', 'Baloo 2', 'Segoe UI Arabic', 'Segoe UI', system-ui, 'Nunito', Arial, sans-serif; --font: var(--font-latin); } html[dir='rtl'] { --font: var(--font-arabic); } /* Set font-family on too so anything that doesn't inherit from body (e.g. form controls on some UAs) still picks up the right font. */ html { font-family: var(--font); }