/* =========================================================================== Sisters Arabic - global typography. Applies the landing page's typeface to every front-end page. Loaded after assets/css/style.css so it cascades over the legacy defaults without touching a line of them. SOURCE OF TRUTH: assets/home/css/styles.css body { font-family: "Nunito", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } There is NO separate heading face in the handoff - headings inherit Nunito from body. The legacy site used "Poppins" for h1-h6 and .secondary-font, so those are the declarations being replaced. "Noto Kufi Arabic" is deliberately NOT loaded here. The handoff scopes it to Arabic-text components (.arabic-question, [lang="ar"], .letter-pad ...) that exist only on the homepage, which ships its own stylesheet. Nothing on an inner page renders Arabic script. NOT APPLIED TO: /_adminArea/ or /dashboard/ - both have their own and never load this file. =========================================================================== */ :root { --sa-font-body: "Nunito", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } /* --------------------------------------------------------------------------- Base. The icon exclusions are load-bearing, not defensive boilerplate. Font Awesome sets its family ON THE ELEMENT and WITHOUT !important (`.fa,.far,.fas{font-family:"Font Awesome 5 Free"}`), so a blanket `span { font-family: ... !important }` outranks it and the glyph collapses into a literal letter. components/functions/index.php:267 renders `` inside alert(), which appears on nearly every page, so this is a real breakage rather than a hypothetical one. Bootstrap Icons are already safe - they set the family on ::before with !important - but they are excluded too so the rule does not depend on that detail staying true. --------------------------------------------------------------------------- */ body, p, li, label, input, textarea, select, .form-control, .secondary-font, span:not(.fa):not(.fas):not(.far):not(.fal):not(.fad):not(.fab):not(.bi):not([class*="fa-"]):not([class*="bi-"]), a:not(.fa):not(.fas):not(.far):not(.fal):not(.fad):not(.fab):not(.bi):not([class*="fa-"]):not([class*="bi-"]), button:not(.fa):not(.fas):not(.far):not(.fal):not(.fad):not(.fab):not(.bi):not([class*="fa-"]):not([class*="bi-"]) { font-family: var(--sa-font-body) !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* --------------------------------------------------------------------------- Headings. .secondary-font is listed above rather than here on purpose: the legacy markup puts it on small body copy (fs-12 captions) as well as card titles, so it should pick up the family but not the display letter-spacing. The handoff has no bare h1-h6 rules; it tightens display type contextually (-0.038em on .hero h1, -0.04em on section h2s). Those values are tuned for very large type and would look cramped on an h5/h6, so this uses a mild -0.01em across the board. --------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .page-title, .section-title, .card-title, .widget-title { font-family: var(--sa-font-body) !important; letter-spacing: -0.01em; } /* --- interactive ---------------------------------------------------------- */ button:not([class*="fa-"]):not([class*="bi-"]), .btn:not([class*="fa-"]):not([class*="bi-"]), input[type="submit"], input[type="button"], input[type="reset"] { font-family: var(--sa-font-body) !important; letter-spacing: 0.01em; } /* --------------------------------------------------------------------------- Icon fonts - re-asserted. Belt and braces alongside the :not() guards above: this restores the family by icon class regardless of which tag carries it, so a future `` or `