/* * ⚠ Pre-Vue splash. Plain CSS and a plain in , NOT Tailwind and not the app bundle, * because it must paint before any JS loads — which is also why the @font-face rules live here. * ⚠ It paints the brand, deliberately ignoring the light/dark cookie. */ @font-face { font-family: "Montserrat Variable"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("/fonts/montserrat-latin-wght-normal.woff2") format("woff2-variations"); unicode-range: u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+0304, u+0308, u+0329, u+2000-206f, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd; } @font-face { font-family: "Montserrat Variable"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("/fonts/montserrat-latin-ext-wght-normal.woff2") format("woff2-variations"); unicode-range: u+0100-02ba, u+02bd-02c5, u+02c7-02cc, u+02ce-02d7, u+02dd-02ff, u+0304, u+0308, u+0329, u+1d00-1dbf, u+1e00-1e9f, u+1ef2-1eff, u+2020, u+20a0-20ab, u+20ad-20c0, u+2113, u+2c60-2c7f, u+a720-a7ff; } /* * ⚠ `size-adjust` on the Arabic face — a measurement, not a taste, and a COMPROMISE rather than * a match. The two faces are one stack resolved per glyph, so every Arabic string in the app is * drawn by IBM Plex Sans Arabic at whatever `font-size` the component asked for, and the two * fonts do not agree on what that size means. Measured at a 100px em: * * Montserrat x-height 52.5 · cap height 70 * Plex Arabic ه 41.1 · ا 71.4 * * ⚠ There is no value that matches both. Arabic's TALL letters already out-reach Latin capitals * (71.4 vs 70), while its round body letters fall 28% short of Latin lowercase (41.1 vs 52.5) — * which is why Arabic screens read small even though nothing is smaller. Matching bodies exactly * would need 128%, and that grows every string by a quarter inside 32px controls and table cells. * 117% splits it: ه lands at 48.1 (8% under Latin lowercase, from 28%) and ا at 83.5. * * It lives here because one declaration then fixes the whole app — no per-locale font sizes, no * component knows about it, and `--ui-font-sans` in the user-owned variables.css is untouched. */ @font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-display: swap; font-weight: 400; size-adjust: 110%; src: url("/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2"); unicode-range: u+0600-06ff, u+0750-077f, u+0870-088e, u+0890-0891, u+0897-08e1, u+08e3-08ff, u+200c-200e, u+2010-2011, u+204f, u+2e41, u+fb50-fdff, u+fe70-fe74, u+fe76-fefc; } @font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-display: swap; font-weight: 500; size-adjust: 110%; src: url("/fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2") format("woff2"); unicode-range: u+0600-06ff, u+0750-077f, u+0870-088e, u+0890-0891, u+0897-08e1, u+08e3-08ff, u+200c-200e, u+2010-2011, u+204f, u+2e41, u+fb50-fdff, u+fe70-fe74, u+fe76-fefc; } @font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-display: swap; font-weight: 600; size-adjust: 110%; src: url("/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2") format("woff2"); unicode-range: u+0600-06ff, u+0750-077f, u+0870-088e, u+0890-0891, u+0897-08e1, u+08e3-08ff, u+200c-200e, u+2010-2011, u+204f, u+2e41, u+fb50-fdff, u+fe70-fe74, u+fe76-fefc; } @font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-display: swap; font-weight: 700; size-adjust: 110%; src: url("/fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2") format("woff2"); unicode-range: u+0600-06ff, u+0750-077f, u+0870-088e, u+0890-0891, u+0897-08e1, u+08e3-08ff, u+200c-200e, u+2010-2011, u+204f, u+2e41, u+fb50-fdff, u+fe70-fe74, u+fe76-fefc; } html, body { margin: 0; block-size: 100%; } #loading-bg { position: fixed; inset: 0; z-index: 999999; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #247ba0; color: #ffffff; font-family: "Montserrat Variable", "Montserrat", system-ui, -apple-system, "Segoe UI", roboto, sans-serif; text-align: center; transition: opacity 350ms ease, visibility 350ms; } #loading-bg.is-done { visibility: hidden; opacity: 0; pointer-events: none; } .app-loader__logo { display: flex; flex: 1 0 0; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; padding-block-end: 24px; animation: app-loader-enter 400ms ease-out both; transition: transform 350ms ease; } #loading-bg.is-done .app-loader__logo { transform: scale(0.96); } .app-loader__mark { inline-size: 56px; block-size: 56px; margin-block-end: 12px; } .app-loader__title { font-size: 26px; font-weight: 700; line-height: 1; } .app-loader__tagline { font-size: 10px; font-weight: 400; line-height: 1; letter-spacing: 0.08em; } .app-loader__track { position: relative; overflow: hidden; inline-size: 100%; block-size: 10px; background-color: #1f6a8a; } .app-loader__bar { position: absolute; inset-block: 0; inline-size: 45%; background-image: linear-gradient( to right, rgb(178 219 191 / 0%) 0%, rgb(178 219 191 / 40%) 45%, rgb(178 219 191 / 95%) 78%, #f3ffbd 100% ); box-shadow: 0 0 12px 1px rgb(243 255 189 / 50%); animation: app-loader-sweep 1400ms ease-in-out infinite; } [dir="rtl"] .app-loader__bar { transform: scaleX(-1); } @keyframes app-loader-sweep { from { inset-inline-start: -45%; } to { inset-inline-start: 100%; } } .app-loader__bottom { display: flex; flex: 1 0 0; flex-direction: column; align-items: center; justify-content: space-between; padding-block: 20px 28px; } .app-loader__pct { font-size: 18px; font-weight: 700; line-height: 1; } .app-loader__copy { font-size: 10px; font-weight: 400; line-height: 1; } @keyframes app-loader-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* ⚠ Motion off holds the bar as a static full-width fill rather than nothing, so the screen still reads as busy instead of stalled — and flat, since the gradient's tail reads as half-empty. */ @media (prefers-reduced-motion: reduce) { #loading-bg, .app-loader__logo { transition: none; animation: none; } .app-loader__bar { inset-inline-start: 0; inline-size: 100%; background-image: none; background-color: #b2dbbf; box-shadow: none; opacity: 0.6; animation: none; } }