@charset "UTF-8"; /* ========================================================================== BCFC FONT PREVIEW — a TEMPORARY font-evaluation harness. WHY THIS EXISTS, AND WHY IT IS BLUNT ------------------------------------ The design system has font TOKENS (--bcfc-ff-primary / -secondary / -tertiary), but they are not how this site actually gets its typeface. Measured across wwwroot/css: ~270 declarations name 'Almarai' as a LITERAL, plus ~40 more via page-local vars (--font, --lofd-font, --vm-font, --ct-font, --bcfc-media-font, --font-primary, --font-heading, --font-sans ...) that are themselves defined as the literal 'Almarai'. Only 9 declarations read --bcfc-ff-primary. So swapping the tokens changes almost nothing on screen. To let the client actually SEE the site in another face, the override has to reach every one of those literals -- which is what the `* { ... !important }` below is for. There is currently NO `font-family ... !important` anywhere else in wwwroot/css (verified), so this sheet wins outright without a specificity fight. This is deliberately NOT the shape a permanent theming feature should have. When the font is chosen, the correct end state is: pick the winner, replace the literals, delete this sheet and Views/Partials/FontPreview/. See the partials for the removal checklist. INERT UNTIL ASKED. Every rule is gated on the .bcfc-fontpreview flag class. With that class absent the sheet does nothing at all, so shipping it is safe. The var() carries the current stack as a fallback, so even a gate class with no --bcfc-font-preview set cannot drop the page to a UA serif. ========================================================================== */ /* -------------------------------------------------------------------------- 1. THE OVERRIDE THE GATE IS ONE FLAG CLASS, `.bcfc-fontpreview`, on EITHER or . Both carriers are needed and neither is optional: - is what the SERVER stamps, appended to the class string _RootLayout.cshtml already composes. The preset is resolved by _FontPreviewHead.cshtml, which runs inside -- after the tag is written -- so is the first tag the layout can reach. This is also the path that works with JavaScript off. - is what the inline SCRIPT stamps, for the switcher's stored choice. It must be : document.body does not exist during head parsing, and waiting for DOMContentLoaded puts the gate in place AFTER first paint, so the page would render in the server's font and then reflow. documentElement is available immediately. A CLASS RATHER THAN A data- ATTRIBUTE, for two measured reasons: 1. A tag helper in this project binds the `body` element, so C# anywhere in the attribute declaration area is RZ1031 -- a RUNTIME Razor failure, i.e. every page 500s with an empty response body. A class needs no C# in the attribute area. 2. Razor renders a null attribute value as an EMPTY attribute rather than omitting it, and `data-bcfc-font=""` still matched the gate -- so a normal page silently got flattened to the sheet's Almarai fallback, losing the few families that are legitimately not Almarai (Nunito, Poppins, the Georgia pull-quote). The class carries no font name, only "preview is on". WHICH font is the --bcfc-font-preview variable's job, set on :root by the head partial. One flag is the entire contract between the three files. Specificity: `.bcfc-fontpreview` is (0,1,0) and the descendant rule below is (0,1,1) (`:not()` contributes its most specific argument, a type selector). That keeps the switcher's own (0,2,0) rule winning over it -- see section 3. -------------------------------------------------------------------------- */ .bcfc-fontpreview, .bcfc-fontpreview *:not(code, pre, kbd, samp, tt) { /* code/pre/kbd/samp/tt are the ONLY safe `:not()` exclusions, because the UA stylesheet declares `font-family: monospace` on them explicitly. Everything else needs section 1b instead -- see the note there. Measured: with the exclusion, computes `monospace`. */ font-family: var(--bcfc-font-preview, "Almarai", Arial, sans-serif) !important; } /* -------------------------------------------------------------------------- 1b. ICON FONTS -- RESTORED, NOT MERELY EXCLUDED THIS IS THE ONE THING TO GET RIGHT IN THIS FILE, and the first attempt got it wrong. Icon glyphs ARE their font: repoint the family and every icon renders its ligature NAME as literal text -- "arrow_forward", "chevron_right", "check" -- in every button and card on the site. 557 .material-icons-outlined uses, 91 .material-symbols-outlined. The obvious fix, listing them in the `:not()` above, DOES NOT WORK, and fails silently. font-family is INHERITED, and the first selector in that rule is the gate element ITSELF. So an "excluded" icon span simply inherits the preview font from its ancestor and renders exactly the broken text the exclusion was supposed to prevent. Measured in headless Chrome against a fixture: every one of .material-icons-outlined / .material-symbols-outlined computed the preview stack while sitting inside the `:not()` list. So each icon family is RE-DECLARED here, with !important, after the override. PSEUDO-ELEMENTS NEED NOTHING. `*` does not match ::before/::after, and every pseudo-element icon in this codebase declares its own font-family beside its `content` (verified across wwwroot/css: 13 such rules, e.g. .re-v2 .faq__q::after, :where(.ins-v2) .bstep::after, .bcfc-sticky-rail--icons .bcfc-section-nav__link::before). Their own declaration beats inheritance, so they are already safe. NOT LISTED, AND WHY: - Font Awesome (.fa/.fas/.fab on 7 views) -- no Font Awesome stylesheet or @font-face is loaded anywhere in this project, so those icons render nothing today regardless of the family. Listing them would imply a fix that is not here. - Bootstrap Icons -- not used and not loaded. - `.material-icons` (13 uses) -- the legacy class, which no rule in this codebase and neither loaded Google sheet declares a family for. It already renders its ligature name as literal text; the preview changes the face of that text, not the defect. Fixing it is a separate change, not this harness's business. -------------------------------------------------------------------------- */ .bcfc-fontpreview .material-icons-outlined { font-family: "Material Icons Outlined" !important; } /* .ph is the Phosphor compatibility shim (site.css): ~24 legacy views use and the shim remaps them onto Material Symbols by giving the ELEMENT the family and the ::before only a `content`. So the element must be restored here or the ::before inherits the preview font and prints the ligature. */ .bcfc-fontpreview .material-symbols-outlined, .bcfc-fontpreview .ph { font-family: "Material Symbols Outlined" !important; } /* The Great Vibes script accent on the IMTIAZ "For Her" hero headline. A display flourish on one word, not body type -- the design's emphasis is the face itself. */ .bcfc-fontpreview em.script { font-family: "Great Vibes", cursive !important; } /* -------------------------------------------------------------------------- 2. TOKEN REMAP Belt and braces. The rule above already reaches every rendered element, but remapping the tokens keeps anything computed FROM them (a `font:` shorthand built in JS, a canvas/SVG measurement, a future component) consistent too. The page-local aliases are listed because they are what the page CSS actually reads -- see the header note. -------------------------------------------------------------------------- */ .bcfc-fontpreview { /* The design-system tokens. */ --bcfc-ff-primary: var(--bcfc-font-preview, "Almarai", Arial, sans-serif); --bcfc-ff-secondary: var(--bcfc-font-preview, "Almarai", Arial, sans-serif); --bcfc-ff-tertiary: var(--bcfc-font-preview, "Almarai", Arial, sans-serif); /* The page-local aliases that the page CSS actually reads. */ --font: var(--bcfc-font-preview, "Almarai", Arial, sans-serif); --font-sans: var(--bcfc-font-preview, "Almarai", Arial, sans-serif); --font-primary: var(--bcfc-font-preview, "Almarai", Arial, sans-serif); --font-heading: var(--bcfc-font-preview, "Almarai", Arial, sans-serif); --font-almarai: var(--bcfc-font-preview, "Almarai", Arial, sans-serif); --lofd-font: var(--bcfc-font-preview, "Almarai", Arial, sans-serif); --vm-font: var(--bcfc-font-preview, "Almarai", Arial, sans-serif); --ct-font: var(--bcfc-font-preview, "Almarai", Arial, sans-serif); --svc-font: var(--bcfc-font-preview, "Almarai", Arial, sans-serif); --sup-font: var(--bcfc-font-preview, "Almarai", Arial, sans-serif); --sds-font: var(--bcfc-font-preview, "Almarai", Arial, sans-serif); --re-font: var(--bcfc-font-preview, "Almarai", Arial, sans-serif); --blm-font: var(--bcfc-font-preview, "Almarai", Arial, sans-serif); --bcfc-media-font: var(--bcfc-font-preview, "Almarai", Arial, sans-serif); --bs-body-font-family: var(--bcfc-font-preview, "Almarai", Arial, sans-serif); --bs-font-sans-serif: var(--bcfc-font-preview, "Almarai", Arial, sans-serif); } /* Card design sheets wrap their tokens in @scope, where a :root prelude is dead (see the bcfc-card-sheet-scope-prelude-dead note). This sheet is unscoped and uses !important above, so it reaches inside those scopes regardless. Nothing extra is needed here -- recorded so nobody adds a redundant @scope block. */ /* ========================================================================== 3. THE SWITCHER WIDGET Only rendered when the harness is explicitly enabled -- see Views/Partials/FontPreview/_FontPreviewSwitcher.cshtml. Sits on the INLINE-START side because the AI assistant FAB owns inset-inline-end (bcfc-ai-assistant.css:58). ========================================================================== */ .bcfc-fontsw { position: fixed; inset-block-end: 1rem; inset-inline-start: 1rem; /* Above the sticky header and modals, below the cookie banner (1200) so a first-time visitor can still accept cookies. */ z-index: 1150; font-size: 0.875rem; line-height: 1.4; color: var(--bcfc-dark-ink, #101828); } /* The harness itself must NOT change with the font under test -- otherwise you cannot read the control you are using to compare. THE CLASS IS DOUBLED FOR SPECIFICITY, and it has to be. Section 1's selector `.bcfc-fontpreview *:not(code, pre, ...)` scores (0,1,1) -- the `:not()` adds the specificity of its most specific argument, which here is a type selector. A plain `.bcfc-fontsw *` is (0,1,0) and LOSES on the tiebreak, so the panel rendered in the font under test (measured, back when the gate was an attribute and the score was (0,1,2)). `.bcfc-fontsw.bcfc-fontsw *` is (0,2,0) and wins on class count outright, with no dependence on source order or on how the gate is spelled. */ .bcfc-fontsw.bcfc-fontsw, .bcfc-fontsw.bcfc-fontsw *, .bcfc-fontsw.bcfc-fontsw *::before, .bcfc-fontsw.bcfc-fontsw *::after { font-family: "Almarai", system-ui, sans-serif !important; box-sizing: border-box; } .bcfc-fontsw__toggle { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 40px; padding: 0 0.9rem; border: 1px solid rgba(7, 27, 51, 0.12); border-radius: 9999px; background: var(--bcfc-surface-raised, #fff); box-shadow: 0 8px 24px rgba(7, 27, 51, 0.16); color: var(--bcfc-dark-ink, #071b33); font-weight: 700; cursor: pointer; } .bcfc-fontsw__toggle:hover { background: var(--bcfc-surface-sunken, #f2f4f7); color: var(--bcfc-dark-ink, #071b33); } /* The "Aa" letterform glyph, replacing style="font-size:15px;font-weight:800;" on the toggle. */ .bcfc-fontsw__toggle-glyph { font-size: 0.9375rem; font-weight: 800; } .bcfc-fontsw__panel { display: none; width: 264px; margin-block-end: 0.5rem; padding: 0.875rem; border: 1px solid rgba(7, 27, 51, 0.12); border-radius: 14px; background: var(--bcfc-surface-raised, #fff); box-shadow: 0 16px 48px rgba(7, 27, 51, 0.22); } .bcfc-fontsw[data-open=true] .bcfc-fontsw__panel { display: block; } .bcfc-fontsw__title { margin: 0 0 0.5rem; font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bcfc-dark-ink-muted, #667085); } .bcfc-fontsw__select { width: 100%; min-height: 38px; padding: 0 0.6rem; border: 1px solid #d0d5dd; border-radius: 8px; background: var(--bcfc-surface-raised, #fff); color: var(--bcfc-dark-ink, #101828); font-size: 0.875rem; } .bcfc-fontsw__note { margin: 0.6rem 0 0; font-size: 0.75rem; color: var(--bcfc-dark-ink-muted, #667085); } .bcfc-fontsw__reset { display: inline-block; margin-block-start: 0.5rem; padding: 0; border: 0; background: none; color: var(--bcfc-dark-ink-brand, #004a98); font-size: 0.8125rem; font-weight: 700; text-decoration: underline; cursor: pointer; } /* The sample line renders IN the font under test -- the point of the panel -- so it has to beat the (0,2,0) rule above. Three classes: (0,3,0). */ .bcfc-fontsw.bcfc-fontsw .bcfc-fontsw__sample { margin: 0.6rem 0 0; padding-block-start: 0.6rem; border-block-start: 1px solid #e4e7ec; font-family: var(--bcfc-font-preview, "Almarai", Arial, sans-serif) !important; font-size: 1rem; color: var(--bcfc-dark-ink, #071b33); }