/* ───────────────────────────────────────────────────────────────────────────── Base — fonts, reset, typography, layout primitives, accessibility. ───────────────────────────────────────────────────────────────────────────── */ @layer base { /* ── Fonts ──────────────────────────────────────────────────────────────── Self-hosted, one variable WOFF2 per family, subset to Arabic + Latin with every OpenType feature kept (joining, marks, shadda). Both are preloaded in , so on a normal connection they arrive before first paint. If a font is late, `swap` shows text immediately in a fallback whose size and vertical metrics were measured against the real font after HarfBuzz shaping, so the swap does not move the layout. Arial was measured and excluded: its Arabic is 31% narrower than Readex Pro. */ @font-face { font-family: "Readex Pro"; src: url("../assets/fonts/readex-pro.woff2") format("woff2"); font-weight: 300 600; font-style: normal; font-display: swap; } @font-face { font-family: "El Messiri"; src: url("../assets/fonts/el-messiri.woff2") format("woff2"); font-weight: 500 700; font-style: normal; font-display: swap; } @font-face { font-family: "Readex Pro Fallback Win"; src: local("Segoe UI"), local("SegoeUI"); size-adjust: 106.01%; ascent-override: 94.33%; descent-override: 23.58%; line-gap-override: 0%; } @font-face { font-family: "Readex Pro Fallback Android"; src: local("Noto Sans Arabic"), local("NotoSansArabic-Regular"); size-adjust: 109.23%; ascent-override: 91.55%; descent-override: 22.89%; line-gap-override: 0%; } @font-face { font-family: "El Messiri Fallback Win"; src: local("Segoe UI Bold"), local("SegoeUI-Bold"); size-adjust: 102.88%; ascent-override: 99.05%; descent-override: 52.88%; line-gap-override: 0%; } @font-face { font-family: "El Messiri Fallback Android"; src: local("Noto Sans Arabic Bold"), local("NotoSansArabic-Bold"); size-adjust: 98.37%; ascent-override: 103.58%; descent-override: 55.3%; line-gap-override: 0%; } /* ── Reset ──────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } /* `hidden` always hides, whatever display a component sets. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--s-6)); interpolate-size: allow-keywords; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { min-height: 100vh; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: var(--fs-body); font-weight: 400; line-height: var(--lh-body); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-x: clip; } img, picture, svg, video { display: block; max-width: 100%; } img { height: auto; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: 0; padding: 0; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; padding: 0; } summary { cursor: pointer; } summary::-webkit-details-marker { display: none; } /* ── Typography ───────────────────────────────────────────────────────── Arabic never takes letter-spacing: spacing letters apart breaks the joining between them. Headings use the display face; everything else the body face. */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: var(--lh-heading); color: var(--ink); text-wrap: balance; } p { text-wrap: pretty; } /* Latin runs and numbers inside Arabic text (phone, handles, ratings). */ .ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; } .num { font-variant-numeric: tabular-nums; } /* ── Layout primitives ──────────────────────────────────────────────────── */ .container { width: min(100% - (var(--gutter) * 2), var(--container)); margin-inline: auto; } .section { padding-block: var(--section-y); position: relative; } /* Follows a section of the same ground: the previous one already spaced it. */ .section--flush-top { padding-top: 0; } /* Hidden SVG icon sprite (symbols stay referenceable, unlike display:none). */ .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } /* ── Accessibility ──────────────────────────────────────────────────────── */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .skip-link { position: fixed; inset-inline-start: var(--s-4); top: var(--s-4); z-index: 100; padding: var(--s-3) var(--s-5); border-radius: var(--r-pill); background: var(--ink); color: var(--white); font-weight: 500; transform: translateY(-160%); transition: transform var(--dur-base) var(--ease-out); } .skip-link:focus-visible { transform: translateY(0); } :focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; border-radius: var(--r-xs); } ::selection { background: var(--pink-soft); color: var(--pink-deeper); } }