/* ========================================================================== 02-TYPOGRAPHY.CSS — Al Aliyah Supermarket implementation kit Status: PENDING REVIEW. **************************************************************** * HARD RULE — READ BEFORE EDITING THIS FILE: * Cormorant Garamond (--font-display) is a BRAND-DISPLAY FACE ONLY. * Approved uses: the wordmark area, hero statements, section openers, * category department titles, editorial/marketing copy blocks. * FORBIDDEN uses, no exceptions: prices, buttons, product titles, form * labels, nav items, breadcrumbs, table content, anything under 18px. * Inter (--font-sans) carries 100% of the shopping UI. * The ONLY selector allowed to set font-family: var(--font-display) is * `.aly-display` (and its Arabic sibling `.aly-display[lang="ar"]` / * `[dir="rtl"] .aly-display`, which uses Amiri instead). If a component * file elsewhere in this kit needs brand-serif treatment, it must add * the `.aly-display` class to the markup — it must NOT reach for * var(--font-display) directly. This keeps the "never on a price/button/ * title" rule enforceable by grep: `grep -rn "font-display" css/` outside * this file and outside `.aly-display` itself should return nothing. **************************************************************** ========================================================================== */ html { font-family: var(--font-sans); font-size: 100%; /* 1rem = 16px, respects user browser zoom/base size */ } body { font-family: var(--font-sans); font-size: var(--fs-base); color: var(--color-text-body); background-color: var(--color-bg); } /* Arabic body copy swaps the whole body stack to the Arabic sans, never the Arabic display face — the display/body split is preserved per-language. */ [lang="ar"], [dir="rtl"] { font-family: var(--font-ar); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); /* Inter — headings are UI, not brand-display, per the hard rule above */ font-weight: var(--fw-semibold); line-height: var(--lh-tight); color: var(--color-text); } h1 { font-size: var(--fs-3xl); } h2 { font-size: var(--fs-2xl); } h3 { font-size: var(--fs-xl); } h4 { font-size: var(--fs-lg); } h5 { font-size: var(--fs-md); } h6 { font-size: var(--fs-base); } p { line-height: var(--lh-normal); } small, .text-sm { font-size: var(--fs-sm); } .text-xs { font-size: var(--fs-xs); } a { color: var(--color-link); text-underline-offset: 0.15em; } a:hover { color: var(--color-link-hover); text-decoration: underline; } a:focus-visible { outline: 2px solid var(--color-focus-outline); outline-offset: 2px; border-radius: var(--radius-xs); } /* -------------------------------------------------------------------------- .aly-display — the ONE gate to the brand-display serif. Cormorant Garamond runs optically small/light versus Inter, so every step here is pre-inflated ~1.2x versus its nominal Inter equivalent and set to weight 600 (not 400) by default, per the brand brief. Never apply this class below 18px-equivalent content or to interactive controls. -------------------------------------------------------------------------- */ .aly-display { font-family: var(--font-display); font-weight: var(--fw-display); /* 600 */ line-height: var(--lh-snug); letter-spacing: 0.005em; font-size: var(--fs-display-md); } .aly-display--sm { font-size: var(--fs-display-sm); } .aly-display--md { font-size: var(--fs-display-md); } .aly-display--lg { font-size: var(--fs-display-lg); } .aly-display--xl { font-size: var(--fs-display-xl); } /* Bold display copy (e.g. a hero headline's emphasised word) steps up to 700 rather than relying on faux-bold synthesis. */ .aly-display strong, .aly-display b { font-weight: var(--fw-bold); } /* Arabic display swaps to Amiri and backs off the weight/letter-spacing tweaks that are specific to the Latin serif's optical-size behaviour — Amiri does not share Cormorant's "runs small and light" quirk. */ [dir="rtl"] .aly-display, .aly-display[lang="ar"] { font-family: var(--font-ar-display); font-weight: var(--fw-semibold); letter-spacing: 0; } /* -------------------------------------------------------------------------- Numerals, prices, points, quantities — tabular figures everywhere they appear, so a changing digit never reflows a neighbouring column. Applies regardless of language direction: per the brief, numerals never mirror. -------------------------------------------------------------------------- */ .aly-price, .aly-qty, .aly-points, [data-numeric] { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; unicode-bidi: plaintext; /* keeps AED 12.50 reading LTR even inside an RTL sentence */ } .aly-price { font-family: var(--font-sans); /* prices are UI, never the display serif */ font-weight: var(--fw-semibold); color: var(--color-text); } .aly-price__currency { font-size: 0.72em; font-weight: var(--fw-medium); color: var(--color-text-muted); margin-inline-end: 0.25em; } .aly-price--was { color: var(--color-text-muted); font-weight: var(--fw-regular); text-decoration: line-through; font-size: 0.85em; margin-inline-start: var(--space-2); } .aly-price--per-unit { font-size: var(--fs-xs); color: var(--color-text-muted); font-weight: var(--fw-regular); } /* -------------------------------------------------------------------------- ALL-CAPS catalogue title normalisation strategy (used by 05-product-card and anywhere else a raw catalogue string is rendered). Real titles are messy: "THREE COWS WHITE CHEESE LIGHT 500GM" (all caps, readable as a whole), "AL RAWABI Juice Guava 200ml" (mixed case already). A blanket `text-transform: capitalize` would wreck genuine acronyms and units (500GM, 200ml, L(36)) by title-casing every word. Instead: `text-transform: none` is the default (respect the source string), and a SEPARATE opt-in utility softens a *fully*-uppercase run without touching mixed-case strings, by rendering everything at a small-caps-like visual weight rather than remapping letters — this preserves acronyms/units exactly as authored while making a shouty all-caps title easier to scan. -------------------------------------------------------------------------- */ .aly-title { font-family: var(--font-sans); text-transform: none; /* never blanket-transform catalogue strings */ } .aly-title--soften-caps { /* Only apply this class to a title the JS/PHP layer has detected as ALL-CAPS (e.g. no lowercase letters present) — see the note in 05-product-card.css. It does not alter the characters, so a genuine unit like "500GM" or "200ml" embedded in a mixed-case title is unaffected if this class is withheld for mixed-case strings. */ font-variant-caps: all-small-caps; letter-spacing: 0.01em; } /* -------------------------------------------------------------------------- Line length / measure utilities -------------------------------------------------------------------------- */ .aly-prose { max-inline-size: 65ch; line-height: var(--lh-loose); }