/* * DGA "Platforms Code" typography scale * * Source: DGA's own published guideline text at * /guidelines/foundations/typography (saved locally by the client, VPN-only * site), which documents the full Display/Text type scale with exact * px/rem/line-height/tracking values. Cross-checked against two real * computed rules found in the compiled CSS from the same capture: * - Display 2xl -> font-size:72px;line-height:90px;letter-spacing:-1.44px * (-1.44px = exactly -2% of 72px, confirming "tracking: -2%" means * letter-spacing = -2% of font-size) * - Display xs -> font-size:24px;line-height:32px (no letter-spacing, * matching the guideline listing no tracking for this step) * Both matched the documented table exactly, so the untested steps below * (xl/lg/md/sm and the Text sizes) are taken directly from DGA's own text * with high confidence, not guessed. * * NOT verified / needs follow-up: * - Responsive behavior: DGA's site shrinks the root font-size at smaller * breakpoints (see note in dga-tokens.css), which would shrink all rem * values below proportionally on mobile. Not replicated here for the * same reason noted there (inconsistent capture). These values are the * desktop/default sizes. * - Only two of the twelve steps were cross-checked against real compiled * CSS (see above); the rest come from the guideline text alone. */ /* Sitewide default -- previously IBM Plex Sans Arabic was only applied component-by-component wherever a .dga-* class was added; the theme's own base font (Tailwind's `fontFamily.sans`, "TheSans Trial") was still what and every untouched element actually rendered in. This is the real foundation-level fix for DGA criterion #3 (Fonts). Element selector + !important: needs to reliably beat Tailwind's own html/body-level font-family from Preflight, but anything with its own explicit font-family (e.g. .dga-font-saudi for National/Founding Day headings) is unaffected -- a child's own declared font-family always wins over what it would otherwise inherit, regardless of !important on the ancestor. */ body { font-family: var(--font-family-arabic) !important; } :root { /* Font weights (IBM Plex Sans Arabic ships 400/500/600/700) */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Saudi font: heading-only, national/seasonal occasions (National Day, Founding Day) per DGA guideline -- not for body text */ --font-weight-saudi-regular: 400; --font-weight-saudi-bold: 700; /* Display scale -- headings only, not body text */ --font-size-display-2xl: 4.5rem; /* 72px */ --line-height-display-2xl: 5.625rem; /* 90px */ --letter-spacing-display-2xl: -0.02em; /* -1.44px, verified */ --font-size-display-xl: 3.75rem; /* 60px */ --line-height-display-xl: 4.5rem; /* 72px */ --letter-spacing-display-xl: -0.02em; --font-size-display-lg: 3rem; /* 48px */ --line-height-display-lg: 3.75rem; /* 60px */ --letter-spacing-display-lg: -0.02em; --font-size-display-md: 2.25rem; /* 36px */ --line-height-display-md: 2.75rem; /* 44px */ --letter-spacing-display-md: -0.02em; --font-size-display-sm: 1.875rem; /* 30px */ --line-height-display-sm: 2.375rem; /* 38px */ --font-size-display-xs: 1.5rem; /* 24px, verified */ --line-height-display-xs: 2rem; /* 32px, verified */ /* Text scale -- body copy, labels, UI elements */ --font-size-text-xl: 1.25rem; /* 20px */ --line-height-text-xl: 1.875rem; /* 30px */ --font-size-text-lg: 1.125rem; /* 18px */ --line-height-text-lg: 1.75rem; /* 28px */ --font-size-text-md: 1rem; /* 16px */ --line-height-text-md: 1.5rem; /* 24px */ --font-size-text-small: 0.875rem; /* 14px */ --line-height-text-small: 1.25rem; /* 20px */ --font-size-text-xs: 0.75rem; /* 12px */ --line-height-text-xs: 1.125rem; /* 18px */ --font-size-text-2xs: 0.625rem; /* 10px */ --line-height-text-2xs: 0.875rem; /* 14px */ } /* * Ready-to-use classes built from the tokens above, so theme templates can * apply a scale step directly (e.g.

) instead of * composing font-size/line-height/letter-spacing by hand every time. / .dga-display-2xl, .dga-display-xl, .dga-display-lg, .dga-display-md, .dga-display-sm, .dga-display-xs, .dga-text-xl, .dga-text-lg, .dga-text-md, .dga-text-small, .dga-text-xs, .dga-text-2xs { font-family: var(--font-family-arabic); font-weight: var(--font-weight-regular); margin: 0; } .dga-display-2xl { font-size: var(--font-size-display-2xl); line-height: var(--line-height-display-2xl); letter-spacing: var(--letter-spacing-display-2xl); } .dga-display-xl { font-size: var(--font-size-display-xl); line-height: var(--line-height-display-xl); letter-spacing: var(--letter-spacing-display-xl); } .dga-display-lg { font-size: var(--font-size-display-lg); line-height: var(--line-height-display-lg); letter-spacing: var(--letter-spacing-display-lg); } .dga-display-md { font-size: var(--font-size-display-md); line-height: var(--line-height-display-md); letter-spacing: var(--letter-spacing-display-md); } .dga-display-sm { font-size: var(--font-size-display-sm); line-height: var(--line-height-display-sm); } .dga-display-xs { font-size: var(--font-size-display-xs); line-height: var(--line-height-display-xs); } .dga-text-xl { font-size: var(--font-size-text-xl); line-height: var(--line-height-text-xl); } .dga-text-lg { font-size: var(--font-size-text-lg); line-height: var(--line-height-text-lg); } .dga-text-md { font-size: var(--font-size-text-md); line-height: var(--line-height-text-md); } .dga-text-small { font-size: var(--font-size-text-small); line-height: var(--line-height-text-small); } .dga-text-xs { font-size: var(--font-size-text-xs); line-height: var(--line-height-text-xs); } .dga-text-2xs { font-size: var(--font-size-text-2xs); line-height: var(--line-height-text-2xs); } / Display styles default to Bold per DGA's own compiled example (Display 2xl -> font-weight:700) / .dga-display-2xl, .dga-display-xl, .dga-display-lg, .dga-display-md { font-weight: var(--font-weight-bold); } / * Saudi Font variant -- ONLY for National Day / Founding Day / seasonal * occasion headings, per DGA's explicit guidance. Do not use for regular * page headings or body copy. Apply alongside a .dga-display-* class, * e.g.

. */ .dga-font-saudi { font-family: var(--font-family-display); }