/* ========================================================================== Mumtaz marketing site — single stylesheet RTL-aware: uses CSS logical properties (inline-start/end, margin-inline…) so the same rules work for LTR (en) and RTL (ar) pages. ========================================================================== */ /* ---- Fonts (self-hosted, subset by unicode-range) ----------------------- */ @font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/ibm-plex-sans-latin-var.woff2") format("woff2"); font-weight: 100 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; } @font-face { font-family: "IBM Plex Sans Arabic"; src: url("/assets/fonts/ibm-plex-sans-arabic-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; } @font-face { font-family: "IBM Plex Sans Arabic"; src: url("/assets/fonts/ibm-plex-sans-arabic-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; } @font-face { font-family: "IBM Plex Sans Arabic"; src: url("/assets/fonts/ibm-plex-sans-arabic-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; } /* ---- Design tokens ------------------------------------------------------ */ :root { --teal: #0e7c6b; --teal-strong: #0a5f52; --sand: #d99a2b; --sand-ink: #8a5f14; /* darker sand, safe for small text on light bg */ --bg: #f7f9f8; --surface: #ffffff; --ink: #17242c; --muted: #4d5e66; --hairline: #dbe3e0; --tint: #e9f2ef; --link: var(--teal); /* Answer feedback. Never the only signal — the practice page also sets an icon and a text verdict — but these must stay legible in both themes. */ --ok: #17663f; --ok-tint: #e4f2ea; --bad: #a3302a; --bad-tint: #f9eae9; --radius: 14px; --container: 70rem; --font-stack: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* Dark theme tokens. Applied two ways: 1. data-theme="dark" set on by the header theme switch (persisted); 2. system preference, unless the user explicitly chose light. */ :root[data-theme="dark"] { --bg: #0f1a1f; --surface: #15242b; --ink: #e8eeec; --muted: #a3b4ae; --hairline: #27383c; --tint: #14302b; --teal-strong: #0e7c6b; --link: #4fb8a4; --sand-ink: #e0aa4d; --ok: #6fd39f; --ok-tint: #143026; --bad: #f0938c; --bad-tint: #341d1c; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0f1a1f; --surface: #15242b; --ink: #e8eeec; --muted: #a3b4ae; --hairline: #27383c; --tint: #14302b; --teal-strong: #0e7c6b; --link: #4fb8a4; --sand-ink: #e0aa4d; --ok: #6fd39f; --ok-tint: #143026; --bad: #f0938c; --bad-tint: #341d1c; } } /* ---- Base --------------------------------------------------------------- */ * { box-sizing: border-box; } /* The UA rule for [hidden] is display:none, but it loses to ANY author rule that sets display — so `.btn { display: inline-flex }` silently un-hides a