@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&family=Tajawal:wght@400;500;700;800;900&display=swap'); /* ========================================================================== Base typography, direction and shared primitives -------------------------------------------------------------------------- Direction is handled by CSS logical properties throughout the codebase (`margin-inline-start` rather than `margin-left`, and so on). That makes the Arabic RTL layout a consequence of `dir="rtl"` on rather than a parallel stylesheet to maintain (spec §18). ========================================================================== */ /* -------------------------------------------------------------------------- Fonts -------------------------------------------------------------------------- Self-hosted: a CDN would violate the strict CSP and leak visitor IPs to a third party. `swap` keeps text readable while the face loads. If a font file is absent the stack falls through to the system UI face, so the site degrades to a slightly different typeface rather than breaking. -------------------------------------------------------------------------- */ @font-face { font-family: 'Cairo'; src: url('../fonts/cairo-variable.woff2') format('woff2-variations'); font-weight: 200 1000; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2190-21BB; } @font-face { font-family: 'Inter'; src: url('../fonts/inter-variable.woff2') format('woff2-variations'); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2190-21BB; } /* -------------------------------------------------------------------------- Document -------------------------------------------------------------------------- */ html { font-family: var(--font-en); font-size: 100%; } /* Arabic is the primary language, so its face leads whenever lang="ar". */ html[lang='ar'] { font-family: var(--font-ar); line-height: var(--leading-relaxed); } body { background: var(--bg-base); color: var(--text-primary); font-size: var(--text-base); transition: background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out); } /* -------------------------------------------------------------------------- Focus -------------------------------------------------------------------------- `:focus-visible` shows the ring for keyboard users without putting one around every mouse click (spec §35). -------------------------------------------------------------------------- */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: var(--radius-sm); } /* -------------------------------------------------------------------------- Selection and scrollbars -------------------------------------------------------------------------- */ ::selection { background: var(--primary-soft); color: var(--text-primary); } * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } *::-webkit-scrollbar { inline-size: 10px; block-size: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-full); border: 2px solid transparent; background-clip: content-box; } /* -------------------------------------------------------------------------- Accessibility helpers -------------------------------------------------------------------------- */ /* Available to screen readers, invisible on screen. */ .sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Skip link: hidden until focused, then pinned to the top of the viewport. */ .skip-link { position: absolute; inset-block-start: -100%; inset-inline-start: var(--space-4); z-index: var(--z-toast); padding: var(--space-3) var(--space-5); background: var(--primary); color: var(--primary-text); border-radius: var(--radius-md); font-weight: var(--weight-medium); transition: inset-block-start var(--duration-fast) var(--ease-out); } .skip-link:focus { inset-block-start: var(--space-4); } /* -------------------------------------------------------------------------- Typography scale -------------------------------------------------------------------------- */ .page-title { font-size: var(--text-3xl); font-weight: var(--weight-bold); letter-spacing: -0.02em; } .section-title { font-size: var(--text-xl); font-weight: var(--weight-semibold); } .text-secondary { color: var(--text-secondary); } .text-muted { color: var(--text-muted); font-size: var(--text-sm); } .text-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* Digits that change in place — countdowns, remaining days — must not make the line reflow on every tick. */ .tabular { font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- Layout primitives -------------------------------------------------------------------------- */ .stack > * + * { margin-block-start: var(--space-4); } .stack-sm > * + * { margin-block-start: var(--space-2); } .stack-lg > * + * { margin-block-start: var(--space-8); } .row { display: flex; align-items: center; gap: var(--space-3); } .row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .row-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); } .grid { display: grid; gap: var(--space-5); } /* `auto-fit` with `minmax` gives a responsive grid without a media query per breakpoint; `min()` stops the minimum from overflowing narrow phones. */ .grid-auto { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); } .flex-1 { flex: 1; } .text-center { text-align: center; } /* -------------------------------------------------------------------------- Directional icons -------------------------------------------------------------------------- Arrows and chevrons must point the other way in RTL. Marking an icon with `data-flip-rtl` opts it in; a check mark or a download arrow does not flip (spec §18). -------------------------------------------------------------------------- */ [dir='rtl'] [data-flip-rtl] { transform: scaleX(-1); }