/* Font URLs are relative to THIS stylesheet (../fonts/), not to the server * root. A static file cannot know the mount subdirectory, and a root-relative * URL breaks the moment the app is served from anywhere but a domain root — * which is exactly what happened under http://localhost/cida-egypt.org. */ /* CIDA Egypt — typography. GENERATED by tokens/build-css.py — do not edit. * * Newsreader is DISPLAY ONLY. Its opsz axis is pinned at 72, which is what got * the file from 186KB to 52KB and the en/fr/de locale under its 120KB budget. * Never use it for body copy — that is Archivo's job. */ @font-face { font-family: 'Newsreader'; src: url('../fonts/Newsreader.subset.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0100-017F,U+1E9E,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD,U+0131,U+02BB-02BC,U+02C6,U+02DA,U+02DC; } @font-face { font-family: 'Archivo'; src: url('../fonts/Archivo.subset.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0100-017F,U+1E9E,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD,U+0131,U+02BB-02BC,U+02C6,U+02DA,U+02DC; } @font-face { font-family: 'Reem Kufi'; src: url('../fonts/ReemKufi.subset.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200F,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFF; } @font-face { font-family: 'Tajawal'; src: url('../fonts/Tajawal-Regular.subset.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200F,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFF; } @font-face { font-family: 'Tajawal'; src: url('../fonts/Tajawal-Medium.subset.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200F,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFF; } @font-face { font-family: 'Tajawal'; src: url('../fonts/Tajawal-Bold.subset.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200F,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFF; } :root { /* ---- stacks ---- */ --font-display: 'Newsreader', ui-serif, Georgia, serif; --font-ui: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-display-ar: 'Reem Kufi', 'Tajawal', system-ui, sans-serif; --font-ui-ar: 'Tajawal', system-ui, sans-serif; /* ---- fluid scale (360 -> 1440 viewport) ---- */ --text-display-1: clamp(2.75rem, 1.6667rem + 4.8148vw, 6.0rem); --text-display-2: clamp(2.25rem, 1.5833rem + 2.9630vw, 4.25rem); --text-display-3: clamp(1.875rem, 1.5000rem + 1.6667vw, 3.0rem); --text-heading-1: clamp(1.625rem, 1.4167rem + 0.9259vw, 2.25rem); --text-heading-2: clamp(1.375rem, 1.2500rem + 0.5556vw, 1.75rem); --text-heading-3: clamp(1.1875rem, 1.1250rem + 0.2778vw, 1.375rem); --text-body-lg: clamp(1.0625rem, 1.0208rem + 0.1852vw, 1.1875rem); --text-body: clamp(1.0rem, 0.9792rem + 0.0926vw, 1.0625rem); --text-body-sm: clamp(0.9375rem, 0.9375rem + 0.0000vw, 0.9375rem); --text-caption: clamp(0.8125rem, 0.7917rem + 0.0926vw, 0.875rem); /* ---- line heights ---- */ --lh-display: 1.06; --lh-heading: 1.18; --lh-body: 1.55; /* ---- tracking. MUST resolve to 0 under RTL — see below. ---- */ --tracking-display: -0.02em; --tracking-ui: 0; --tracking-caps: 0.08em; } /* -------------------------------------------------------------------------- * Arabic compensation. * * These are experienced starting values, NOT constants. Proof them optically at * real size before treating them as settled: * display Arabic 0.92-0.96x Latin * UI/body Arabic 1.05-1.10x Latin * weight step Arabic DOWN one stop (Latin 700 <-> Arabic 600) * leading Arabic +10-15% * Arabic also runs ~1.2x the English character count — layouts must absorb it. * -------------------------------------------------------------------------- */ :lang(ar) { --font-display: var(--font-display-ar); --font-ui: var(--font-ui-ar); --lh-body: 1.9; --lh-heading: 1.42; --lh-display: 1.22; /* HARD RULE: letter-spacing breaks Arabic joining. Never allow a brand tracking token to reach an Arabic string. */ --tracking-display: 0; --tracking-ui: 0; --tracking-caps: 0; letter-spacing: 0 !important; text-transform: none; } [dir="rtl"] { --tracking-display: 0; --tracking-ui: 0; --tracking-caps: 0; } /* Optical size compensation, applied at the element rather than the root so a mixed-script line can opt out. */ :lang(ar) .t-display { font-size: 0.94em; font-weight: 600; } :lang(ar) .t-ui { font-size: 1.07em; } /* -------------------------------------------------------------------------- * Credential codes and numerals. * Western digits in ALL four locales, including Arabic. * -------------------------------------------------------------------------- */ .code { direction: ltr; unicode-bidi: isolate; font-family: var(--font-ui); font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0.04em; } .ltr-inline { direction: ltr; unicode-bidi: isolate; } /* -------------------------------------------------------------------------- * Base elements. * -------------------------------------------------------------------------- */ body { font-family: var(--font-ui); font-size: var(--text-body); line-height: var(--lh-body); letter-spacing: var(--tracking-ui); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3 { font-family: var(--font-display); line-height: var(--lh-heading); letter-spacing: var(--tracking-display); font-weight: 500; } h1 { font-size: var(--text-display-3); } h2 { font-size: var(--text-heading-1); } h3 { font-size: var(--text-heading-2); } .eyebrow { font-family: var(--font-ui); font-size: var(--text-caption); letter-spacing: var(--tracking-caps); text-transform: uppercase; font-weight: 600; }