/* ===================================================================== Al-Taswia Legal Services Company / شركة التسوية للخدمات القانونية Design tokens for www.al-taswia.com. This is the ONE file with every colour, font, spacing value etc. Drop it in as site/css/tokens.css. Components (css/site.css) only use these variables. RTL (Arabic) is the base; every English page under /en/ sets (13 pages + articles). Brand colours = exact colours of the approved logo (logo1-vector.svg): grey #4C4C4C, gold #FFCB29. ===================================================================== */ /* ---------- Fonts: local, self-hosted WOFF2 (SIL OFL 1.1, licences in assets/fonts/) ---------- Variable fonts, subset to Arabic + Latin, one file per family. Paths are relative to THIS file. If tokens.css moves to site/css/, use url("../assets/fonts/…"). */ @font-face { font-family: "Cairo"; src: url("../assets/fonts/Cairo-Variable.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; } @font-face { font-family: "Noto Sans Arabic"; src: url("../assets/fonts/NotoSansArabic-Variable.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: "Montserrat"; src: url("../assets/fonts/Montserrat-Variable.woff2") format("woff2"); font-weight: 500 800; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("../assets/fonts/Inter-Variable.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } :root { /* ---------- Brand ---------- */ --c-brand: #4C4C4C; /* logo grey: headings, dark panels, footer, primary text-on-gold */ --c-brand-900: #2E2E2E; /* deepest shade (hover on dark buttons, image overlays) */ --c-brand-800: #3D3D3D; /* shade for depth inside dark panels (same as profile --ink-deep) */ --c-brand-700: #5C5C5C; /* lighter tint of the grey for borders on dark panels */ --c-gold: #FFCB29; /* logo gold: ACCENT / FILL ONLY. 1.52:1 on white, never small text on white */ --c-gold-600: #F0B800; /* hover/pressed state of gold fills */ --c-gold-300: #FFE07A; /* soft gold: focus halo, highlights on dark (6.62:1 on #4C4C4C) */ --c-gold-100: #FFF3C4; /* gold tint: chips, badges */ --c-gold-50: #FFF9E6; /* faint gold wash: callouts, featured cards on white */ --c-gold-text: #7A5900; /* the ONLY "gold" allowed for text on white/light bg: 6.45:1 on #FFF, 5.0:1 on gold-50 */ /* ---------- Neutrals ---------- */ --c-white: #FFFFFF; --c-bg: #FFFFFF; /* page background */ --c-bg-soft: #F5F5F3; /* alternate section background ("mist" in the profile) */ --c-bg-muted: #EDEDEA; /* inputs, table zebra on soft bg */ --c-border: #E3E3E0; /* hairlines, card borders */ --c-border-strong: #CFCFCB; /* input borders, dividers that must be visible (decorative only, not for meaning) */ --c-text: #2F2F2F; /* body text: 13.4:1 on white */ --c-text-strong: #1F1F1F; /* text on gold fills: 10.9:1 */ --c-heading: #4C4C4C; /* headings = brand grey: 8.6:1 */ --c-text-muted: #6B6B6B; /* meta, captions: 5.3:1 on white, 4.9:1 on bg-soft (AA) */ --c-text-subtle: #767672; /* lowest allowed for text (4.56:1 on white). Never lighter. */ --c-on-dark: #FFFFFF; /* text on #4C4C4C: 8.6:1 */ --c-on-dark-muted: #D9D9D6; /* secondary text on #4C4C4C: 6.1:1 */ --c-gold-on-dark: #FFCB29; /* gold text IS fine on the brand grey: 5.65:1 */ /* ---------- States ---------- */ --c-link: #4C4C4C; /* links: brand grey + gold underline (underline is decorative; colour+underline = 2 cues) */ --c-link-hover: #1F1F1F; --c-focus: #1F1F1F; /* focus outline on light bg (with gold halo); on dark bg use --c-gold */ --c-success: #1F6F43; --c-success-bg: #E7F4EC; --c-warning: #9A5B00; --c-warning-bg: #FFF4E0; --c-error: #B42318; --c-error-bg: #FDECEA; --c-info: #1E5AA8; --c-info-bg: #E8F0FB; --c-whatsapp: #1F6F43; /* muted green for the WhatsApp button (white text 6.2:1); not the loud brand green */ /* ---------- Typography ---------- Arabic: Cairo (headings, 700/800) + Noto Sans Arabic (body, 400–700) = same pairing as the approved profile/CV. Latin: Montserrat (headings) + Inter (body, UI, numbers, emails, phone) = same pairing as the profile/CV. Each stack falls back to the other script's font so mixed Arabic/Latin text never drops to a system font. */ --ff-ar-head: "Cairo", "Montserrat", "Segoe UI", Tahoma, sans-serif; --ff-ar-body: "Noto Sans Arabic", "Inter", "Segoe UI", Tahoma, sans-serif; --ff-en-head: "Montserrat", "Cairo", "Segoe UI", Arial, sans-serif; --ff-en-body: "Inter", "Noto Sans Arabic", "Segoe UI", Arial, sans-serif; --ff-head: var(--ff-ar-head); /* switched for :lang(en) below */ --ff-body: var(--ff-ar-body); /* fluid type scale (min at 390px, max at 1440px) */ --fs-display: clamp(2.125rem, 1.6rem + 2.2vw, 3.5rem); /* 34 → 56 hero H1 */ --fs-h1: clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem); /* 30 → 44 page H1 */ --fs-h2: clamp(1.5rem, 1.3rem + 0.9vw, 2.125rem); /* 24 → 34 */ --fs-h3: clamp(1.1875rem, 1.12rem + 0.35vw, 1.375rem); /* 19 → 22 */ --fs-h4: 1.125rem; /* 18 */ --fs-lead: clamp(1.0625rem, 1.02rem + 0.25vw, 1.25rem); /* 17 → 20 intro paragraphs */ --fs-body: 1.0625rem; /* 17px: Arabic body (Arabic needs ~1px more than Latin for the same legibility) */ --fs-body-en: 1rem; /* 16px: Latin body */ --fs-sm: 0.9375rem; /* 15 */ --fs-xs: 0.8125rem; /* 13 meta, chips (never below 13px) */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; --lh-body-ar: 1.9; --lh-body-en: 1.65; --lh-head-ar: 1.45; --lh-head-en: 1.2; --lh-tight: 1.3; --ls-eyebrow-en: 0.12em; /* uppercase Latin eyebrows only; Arabic never gets letter-spacing */ --measure: 46rem; /* max line length for reading text (~80 Arabic chars / ~75 Latin chars) */ /* ---------- Spacing (4px base) ---------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem; --section-y: clamp(3.5rem, 2.5rem + 4vw, 6rem); /* vertical padding of page sections */ --gutter: clamp(1.25rem, 0.8rem + 2vw, 2.5rem); /* container side padding */ --grid-gap: clamp(1rem, 0.7rem + 1.2vw, 1.75rem); /* ---------- Radii (profile: 5–6 mm panels, pill capsules) ---------- */ --r-xs: 4px; --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px; /* ---------- Borders & accent bars ---------- */ --bw-hair: 1px; --accent-bar-w: 5px; /* gold bar on the inline-START side of cards/quotes (right in RTL, left in LTR) */ --title-bar-w: 56px; --title-bar-h: 6px; /* gold bar above section titles (profile: 14 × 1.6 mm) */ /* ---------- Shadows (soft, grey-based; never gold glows) ---------- */ --sh-1: 0 1px 2px rgba(31,31,31,.06), 0 1px 1px rgba(31,31,31,.04); --sh-2: 0 6px 18px -6px rgba(31,31,31,.14), 0 2px 6px rgba(31,31,31,.05); --sh-3: 0 18px 40px -12px rgba(31,31,31,.22); --sh-focus: 0 0 0 4px var(--c-gold-300); /* ---------- Layout ---------- */ --container: 1200px; /* default content width */ --container-wide: 1320px; /* header, footer, hero */ --container-narrow: 760px; /* article body / reading column */ --header-h: 76px; --header-h-mobile: 64px; --topbar-h: 36px; --z-header: 50; --z-dropdown: 60; --z-drawer: 80; --z-fab: 70; --fab-h: 48px; /* floating WhatsApp button height (mobile) */ --fab-offset: 1rem; /* distance of the button from the screen edge */ --fab-reserve: calc(var(--fab-h) + 2 * var(--fab-offset) + env(safe-area-inset-bottom, 0px)); /* space kept free at the page end on mobile */ /* ---------- Motion ---------- */ --ease: cubic-bezier(.2,.7,.2,1); --dur-fast: 120ms; --dur: 200ms; --dur-slow: 320ms; } /* Breakpoints (CSS variables can't be used inside @media; use these literal values everywhere): --bp-sm 480px · --bp-md 768px · --bp-lg 1024px · --bp-xl 1280px · --bp-2xl 1440px (mobile-first: min-width queries) */ /* ---------- Language / direction switches ---------- */ :root:lang(en), [lang="en"], :root:lang(tr), [lang="tr"], :root:lang(zh), [lang="zh"] { --ff-head: var(--ff-en-head); --ff-body: var(--ff-en-body); } /* Sorani and Persian use the Arabic faces already on the site. */ :root:lang(ckb), [lang="ckb"], :root:lang(fa), [lang="fa"] { --ff-head: var(--ff-ar-head); --ff-body: var(--ff-ar-body); } /* Arabic runs inside English pages (Arabic firm name, «العربية · AR» switch) */ html[lang="en"] [lang="ar"] { --ff-head: var(--ff-ar-head); --ff-body: var(--ff-ar-body); } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; } } /* RTL RULES (summary, details in README): 1. dir="rtl" lang="ar" on is the default. All English pages (/en/...): dir="ltr" lang="en" – same CSS, no separate stylesheet. 2. Use logical properties only: margin-inline-start, padding-inline-end, inset-inline-start, border-inline-start, text-align: start. 3. Directional icons: author the LTR glyph (arrow-right = "forward") with class .ic-dir; it flips in RTL. Non-directional icons never flip. 4. Latin runs inside Arabic (emails, URLs, @handles, law codes) are isolated LTR runs: dir="ltr" + (classes .email / .ltr-run). 5. The phone is ALWAYS an isolated LTR run so it reads exactly "+964 771 100 2200" in RTL pages: +964 771 100 2200 (.phone = direction:ltr; unicode-bidi:isolate; display:inline-block in css/site.css). Never put the bare number in Arabic text. 6. Numerals: Western digits (0–9), as in all approved texts. 7. No letter-spacing and no uppercase transforms on Arabic. */