/* ============================================================================= TG Access — design tokens, taken from design/mockup.png One palette for both surfaces: the public site and the tenant dashboard. The mockup renders the dashboard inside the landing page, so they are literally the same design and must not drift into two. Everything here is a custom property and nothing here is a rule, so importing this file changes nothing on its own. Written for logical properties throughout (inline-start, margin-inline): the whole interface mirrors for Arabic by setting dir="rtl", with no separate stylesheet and no overrides. That predates this redesign and is kept. ========================================================================== */ /* ----------------------------------------------------------------------------- Tajawal — the mockup's Arabic face, self-hosted. Identified by rendering the mockup's own headline in five candidates and comparing letterforms (Tajawal, Cairo, Almarai, IBM Plex Sans Arabic, Noto Kufi Arabic); Tajawal matches its compact geometric forms and flat kaf terminals. If the original file names a different face, this is one swap. Self-hosted, not pulled from a font CDN, for three reasons: the CSP sets font-src 'self', a third-party font host is a request on every page load that leaks the visitor's IP to someone else, and a CDN outage would silently fall back to a system face. 8 files, 77 KB total: Latin and Arabic subsets kept separate with their unicode-ranges, so an English visitor never downloads the Arabic glyphs and an Arabic visitor never downloads the Latin ones. Licensed under the SIL Open Font License 1.1 — see ../fonts/OFL.txt, which ships alongside as that licence requires. -------------------------------------------------------------------------- */ /* Turkish letters Tajawal does not carry (Ğ ğ İ Ş ş; ı is already in its Latin file). Noto Sans, Latin Extended subset, one variable-weight file, SIL OFL 1.1 (../fonts/OFL-NotoSans.txt). Same family name, so the stack is unchanged and the browser fetches the file only on a page that actually contains one of these letters. One rule PER WEIGHT on purpose: the browser groups faces by weight before it applies unicode-range, so a "400 800" rule would never be combined with Tajawal's exact-weight ones. */ @font-face { font-family: 'Tajawal'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/notosans-latin-ext-var.woff2') format('woff2'); unicode-range: U+011E-011F, U+0130, U+015E-015F; } @font-face { font-family: 'Tajawal'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/notosans-latin-ext-var.woff2') format('woff2'); unicode-range: U+011E-011F, U+0130, U+015E-015F; } @font-face { font-family: 'Tajawal'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/notosans-latin-ext-var.woff2') format('woff2'); unicode-range: U+011E-011F, U+0130, U+015E-015F; } @font-face { font-family: 'Tajawal'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/notosans-latin-ext-var.woff2') format('woff2'); unicode-range: U+011E-011F, U+0130, U+015E-015F; } /* Russian (Cyrillic). Noto Sans, Cyrillic and Cyrillic Extended subsets, one variable-weight file each, SIL OFL 1.1 (../fonts/OFL-NotoSans.txt), fetched from the Google Fonts CSS blocks labelled `cyrillic` and `cyrillic-ext` (D-489). Same family name as above, one rule PER WEIGHT for the same reason: faces are grouped by weight before unicode-range is applied. The unicode-range is Google's own for each subset; the browser downloads a file only on a page that uses its letters. */ @font-face { font-family: 'Tajawal'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/notosans-cyrillic-var.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Tajawal'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/notosans-cyrillic-var.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Tajawal'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/notosans-cyrillic-var.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Tajawal'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/notosans-cyrillic-var.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Tajawal'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/notosans-cyrillic-ext-var.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'Tajawal'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/notosans-cyrillic-ext-var.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'Tajawal'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/notosans-cyrillic-ext-var.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'Tajawal'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/notosans-cyrillic-ext-var.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* Persian (fa). Tajawal's Arabic subset has پ but NOT چ ژ گ ک ی or the Persian digits ۰-۹ (measured by tests/test_persian_technical.py), and a word set half in one face and half in another loses its cursive joins, so Persian pages use ONE face for all Arabic-script text: Noto Sans Arabic (SIL OFL, licence beside it in OFL-NotoSansArabic.txt), the `arabic` subset from Google Fonts CSS (v33), one variable-weight file. It lives under its OWN family name, selected by `html[lang="fa"]` below, so the Arabic pages keep Tajawal exactly as they were. One @font-face PER WEIGHT (Chrome groups faces by weight before unicode-range). Latin and digits are not in this subset and fall through to Tajawal in the stack. */ @font-face { font-family: 'Tajawal Persian'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/notosansarabic-arabic-var.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-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: 'Tajawal Persian'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/notosansarabic-arabic-var.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-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: 'Tajawal Persian'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/notosansarabic-arabic-var.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-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: 'Tajawal Persian'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/notosansarabic-arabic-var.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-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[lang="fa"] { --font: "Tajawal Persian", "Tajawal", "Noto Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --dash-font: "Tajawal Persian", Tajawal, system-ui, -apple-system, "Segoe UI", sans-serif; } /* Hindi (hi). Tajawal has no Devanagari at all, so every Hindi letter would fall to whatever the phone happens to have (and on a bare Linux or Windows box that is a box). Pages in Hindi therefore use Noto Sans Devanagari (SIL OFL, licence beside it in OFL-NotoSansDevanagari.txt), the `devanagari` subset of the Google Fonts CSS (v30), ONE variable-weight file. It lives under its OWN family name, selected by `html[lang="hi"]` below, so no other page changes. One @font-face PER WEIGHT (Chrome groups faces by weight before unicode-range). Latin and digits are not in this subset and fall through to Tajawal's Latin file; a system Devanagari font is named last so a failed font download still renders words, not boxes. */ @font-face { font-family: 'Tajawal Hindi'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/notosansdevanagari-var.woff2') format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A; } @font-face { font-family: 'Tajawal Hindi'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/notosansdevanagari-var.woff2') format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A; } @font-face { font-family: 'Tajawal Hindi'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/notosansdevanagari-var.woff2') format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A; } @font-face { font-family: 'Tajawal Hindi'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/notosansdevanagari-var.woff2') format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A; } html[lang="hi"] { --font: "Tajawal Hindi", "Tajawal", "Noto Sans Devanagari", "Mangal", "Nirmala UI", "Lohit Devanagari", "Kohinoor Devanagari", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --dash-font: "Tajawal Hindi", Tajawal, "Noto Sans Devanagari", "Nirmala UI", "Mangal", system-ui, -apple-system, "Segoe UI", sans-serif; } /* Persian text on a page that is NOT Persian (D-499, review N63): the language picker's own name on every page, the admin's Persian editing blocks, a Persian channel or plan name an owner typed. Tajawal's Arabic subset lacks ی ک گ چ ژ, so without this the browser draws those letters from a system face and the letter at the switch loses its join. The @font-face rules above already exist; this selects them. */ [lang|="fa"]:not(html) { font-family: "Tajawal Persian", "Tajawal", "Noto Sans Arabic", system-ui, sans-serif; } /* The rule above must not reach what keeps its own face: code and the LTR isolates stay monospace, form fields keep the page stack (they inherit it, they do not take the element's). */ [lang|="fa"]:not(html) :is(code, pre, kbd, samp, .mono) { font-family: var(--font-mono); } [lang|="fa"]:not(html) :is(input, textarea, select, button) { font-family: inherit; } /* Hindi text on a page that is NOT Hindi (D-502), the same solution as Persian above: the language picker's own name, the admin's Hindi editing blocks, a Hindi channel or plan name an owner typed. Tajawal has no Devanagari, so without this the browser draws those letters from whatever the system has. */ [lang|="hi"]:not(html) { font-family: "Tajawal Hindi", "Tajawal", "Noto Sans Devanagari", system-ui, sans-serif; } [lang|="hi"]:not(html) :is(code, pre, kbd, samp, .mono) { font-family: var(--font-mono); } [lang|="hi"]:not(html) :is(input, textarea, select, button) { font-family: inherit; } @font-face { font-family: 'Tajawal'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/tajawal-arabic-400.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, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; } @font-face { font-family: 'Tajawal'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/tajawal-latin-400.woff2') format('woff2'); unicode-range: U+0000-00FF, 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: 'Tajawal'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/tajawal-arabic-500.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, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; } @font-face { font-family: 'Tajawal'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/tajawal-latin-500.woff2') format('woff2'); unicode-range: U+0000-00FF, 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: 'Tajawal'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/tajawal-arabic-700.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, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; } @font-face { font-family: 'Tajawal'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/tajawal-latin-700.woff2') format('woff2'); unicode-range: U+0000-00FF, 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: 'Tajawal'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/tajawal-arabic-800.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, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; } @font-face { font-family: 'Tajawal'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/tajawal-latin-800.woff2') format('woff2'); unicode-range: U+0000-00FF, 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; } /* ============================================================================= `hidden` has to actually hide. ============================================================================= The UA stylesheet's `[hidden] { display: none }` is a plain attribute rule, so it LOSES to any class rule that sets `display` — and most things worth hiding set one. The failure is silent and total: the script sets `hidden`, `el.hidden` reads `true`, and the browser goes on painting and go on accepting clicks. It has cost this project three separate defects, each found only by driving a real browser: * the hero demo painted all four payment buttons under the plan buttons on first load (D-159); * the guide's closed lightbox covered the page and swallowed every click on it, including the screenshots it exists to open (D-161); * the demo's checkout sheets intercepted taps on the conversation behind them (D-162). Two of those were fixed with a scoped override, and the third landed just outside the scope of both. So it is one rule, here, for every page — the standard modern reset, with the reason written down so nobody deletes it as noise. `!important` is load-bearing: the whole point is to beat class rules. */ [hidden] { display: none !important; } :root { color-scheme: light; /* ---- brand blues → purples (the gradient the mockup uses everywhere) --- */ --blue-950: #0b1233; --blue-900: #12193f; --blue-800: #1b2a6b; --blue-700: #2249b8; --blue-600: #2f6bff; --blue-500: #4a83ff; --blue-400: #7aa4ff; --blue-300: #a8c4ff; --blue-200: #cfdeff; --blue-100: #e8f1fe; --blue-50: #f3f7ff; --purple-700: #4c2fd6; --purple-600: #6d4aff; --purple-500: #7c5cff; --purple-400: #9b82ff; --purple-200: #ddd4ff; --purple-100: #efeafe; /* ---- the yellow every primary call to action uses ---- */ --yellow-600: #e8a800; --yellow-500: #ffc93c; --yellow-400: #ffd451; --yellow-100: #fff6e5; --on-yellow: #1a1a2e; /* ---- neutrals ---- */ --ink: var(--blue-900); --ink-muted: #5b6588; --ink-subtle: #8a93b0; --surface: #ffffff; --canvas: #f6f7fb; --line: #e6e9f4; --line-strong:#d4d9ec; /* ---- neutral ramp ---- The dashboards need more greys than the marketing page does: table rules, disabled states, secondary chrome. Biased slightly blue so they sit with the brand rather than reading as unconsidered mid-grey. */ --slate-50: #f8f9fc; --slate-100: #f1f3f9; --slate-200: #e6e9f4; --slate-300: #d4d9ec; --slate-400: #a8b0cc; --slate-500: #7d86a6; --slate-600: #5b6588; --slate-700: #3d4665; /* Names the admin stylesheet has used since before the M5 palette. Kept as aliases rather than renamed at every call site: one definition here is cheaper than an edit everywhere, and both names mean the same colour. */ --silver-50: var(--slate-50); --silver-100: var(--slate-100); --silver-200: var(--slate-200); --silver-300: var(--slate-300); --silver-400: var(--slate-400); --silver-500: var(--slate-500); --silver-600: var(--slate-600); /* ---- state ---- */ --green-600: #0f9d58; --green-100: #e9f9f0; --green-50: #f2fbf6; --amber-600: #d97706; --amber-100: #fff4e0; --amber-50: #fffaf0; --red-600: #e2483d; --red-100: #fdeceb; --red-50: #fef6f5; /* ---- pastel card tints, in the mockup's order ---- */ --tint-lavender: #efeafe; --tint-blue: #e8f1fe; --tint-cream: #fff6e5; --tint-mint: #e9f9f0; /* ---- gradients ---- */ --grad-brand: linear-gradient(135deg, var(--blue-600) 0%, var(--purple-600) 100%); --grad-hero: linear-gradient(160deg, #f3f2ff 0%, #eaf1ff 45%, #f6f7fb 100%); --grad-deep: linear-gradient(135deg, var(--blue-900) 0%, var(--purple-700) 100%); --grad-yellow: linear-gradient(135deg, var(--yellow-500) 0%, var(--yellow-400) 100%); /* ---- shape ---- */ --radius-sm: 10px; --radius: 16px; --radius-lg: 24px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(18, 25, 63, .06); --shadow: 0 6px 20px -6px rgba(18, 25, 63, .12), 0 2px 6px -2px rgba(18, 25, 63, .06); --shadow-lg: 0 28px 56px -20px rgba(18, 25, 63, .22), 0 10px 24px -12px rgba(18, 25, 63, .12); --shadow-brand: 0 14px 32px -12px rgba(47, 107, 255, .45); --shadow-yellow: 0 12px 26px -10px rgba(232, 168, 0, .5); --ease: cubic-bezier(.2, .7, .3, 1); /* Arabic is the tenants' language (D-101), so the mockup's Arabic face leads the stack and serves the Latin text too — Tajawal has both, which is why the English page does not change typeface. The fallbacks cover the moment before the font loads and any platform that refuses it. */ --font: "Tajawal", "Tajawal Persian", "Tajawal Hindi", "Noto Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* ----------------------------------------------------------------------------- SPACING, TYPE AND CONTROL SCALES (D-265). Added because there were none. The tenant dashboard alone used 29 distinct font sizes — .72, .78, .8, .82, .84rem among them, four of which are inside .06rem of each other and so read as the same size while never aligning — 54 distinct padding values and 63 distinct pixel numbers. That is what makes an interface feel subtly unfinished even when every individual screen looks fine: nothing lines up with anything, because nothing was measured from a common unit. One 4px grid. Every spacing value in the product is a step on it, so two cards built by two different people on two different days have the same rhythm. -------------------------------------------------------------------------- */ --space-0: 0; --space-px: 1px; --space-1: .25rem; /* 4px */ --space-2: .5rem; /* 8px */ --space-3: .75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ /* Seven sizes, not twenty-nine. Each step is far enough from the next to be seen as deliberate; anything closer is noise a reader cannot use. The base is 14px because that is what the dashboard already is. */ --text-xs: .75rem; /* 12px — table meta, badge text, helper lines */ --text-sm: .8125rem; /* 13px — secondary body, dense table cells */ --text-base: .875rem; /* 14px — body, labels, inputs, buttons */ --text-md: 1rem; /* 16px — card titles, emphasised numbers */ --text-lg: 1.125rem; /* 18px — section headings */ --text-xl: 1.375rem; /* 22px — page titles */ --text-2xl: 1.75rem; /* 28px — stat figures, the one number per card */ --leading-tight: 1.2; /* headings and stat figures */ --leading-snug: 1.4; /* labels, table cells */ --leading: 1.6; /* body copy and help text */ /* Controls share one height so an input, a select and a button sitting in a row have their baselines and edges aligned without per-page nudging. */ --control-h: 2.5rem; /* 40px — the default */ --control-h-sm: 2rem; /* 32px — table row actions, filters */ /* Both are raised to 44px on a touch-sized viewport at the bottom of this file: 40px and 32px are comfortable for a pointer and under the floor for a thumb. */ --control-h-lg: 3rem; /* 48px — the primary action on empty states */ --control-pad: var(--space-3); /* One focus ring everywhere, visible against both themes. Never removed without a replacement: keyboard users navigate by it. */ --ring: 0 0 0 3px color-mix(in srgb, var(--blue-500) 45%, transparent); --ring-danger: 0 0 0 3px color-mix(in srgb, var(--red-600) 40%, transparent); --motion-fast: 120ms; /* state flips: hover, switch, badge */ --motion: 200ms; /* the default; matches --dash-speed */ --motion-slow: 320ms; /* panels and drawers entering */ } /* ============================================================================ Brand logo Lives in tokens.css because every surface uses it: the public site, both dashboards and /admin all pull this file. ============================================================================ */ .brand-logo { display: inline-flex; align-items: center; /* The artwork is 1356x512 (logo) or square (icon); height drives it and the aspect ratio does the rest, so one number changes the size everywhere. */ block-size: 34px; } .brand-logo .brand-svg { block-size: 100%; inline-size: auto; display: block; overflow: visible; /* the plane lifts out of its box on hover */ } .brand-logo-icon { block-size: 32px; } /* Visible to screen readers, and to a browser that could not load the SVG, without showing the wordmark twice to everyone else. */ .brand-sr { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* --- the hover animation ----------------------------------------------------- The plane lifts and the trail brightens. Deliberately small: this is a logo in a header, and a logo that leaps at you is a logo that irritates by the tenth page. Transform and opacity only, so it composites on the GPU and cannot reflow the header. The transform is written with a translate on both axes because the plane flies up and forward, not straight up — matching the angle of its own trail. */ .brand-plane, .brand-trail { transition: transform .34s cubic-bezier(.22, 1, .36, 1), opacity .34s ease, filter .34s ease; transform-box: fill-box; transform-origin: center; } .brand:hover .brand-plane, .brand:focus-visible .brand-plane { transform: translate(6px, -9px); } .brand:hover .brand-trail, .brand:focus-visible .brand-trail { /* Brighter and slightly drawn back, as though the plane just left it. */ opacity: 1; filter: drop-shadow(0 0 6px rgba(255, 211, 77, .85)) saturate(1.15); transform: translate(-3px, 4px); } .brand:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 3px; } /* Someone who has asked for less motion gets the brightening but no movement: the hover still acknowledges itself, without anything sliding. */ @media (prefers-reduced-motion: reduce) { .brand-plane, .brand-trail { transition: opacity .2s ease, filter .2s ease; } .brand:hover .brand-plane, .brand:focus-visible .brand-plane { transform: none; } .brand:hover .brand-trail, .brand:focus-visible .brand-trail { transform: none; } } /* ---------------------------------------------------------------- touch sizing A thumb is not a mouse pointer. Lighthouse wants 48px and Apple documents 44; this raises the two control-height tokens to 44 below 900px, which is the one change that lifts every control at once — buttons, inputs, selects, chips and row actions all derive their height from these. Done HERE rather than in dashboard.css's own media query, where it was first written: `.input, .select, .textarea { min-block-size: var(--control-h) }` appears LATER in that file than the media block did, so with equal specificity it won and every select stayed 40px. Changing the token instead means there is no cascade race to lose — and nothing to remember when the next control family is added. `--control-h-lg` is already 48px and needs nothing. */ @media (max-width: 900px) { :root { --control-h: 2.75rem; /* 44px */ --control-h-sm: 2.75rem; /* 44px — a row action is still a thumb target */ } }