/* Yosor staff guide site. Logical properties throughout so `dir="rtl"` on is enough to mirror the whole layout — no separate RTL ruleset. */ :root { /* ══ Ratified primitives ═══════════════════════════════════════════════ * TRANSCRIBED from the ratified design system, which lives OUTSIDE this * repository (`G:/reservation/design system/tokens/`) — the same posture * `web/` takes in its tailwind config, and for the same reason: this site * has no build step that could import anything. * * ⚠️ These are the RECORD. Edit them only to match a change in * `tokens/colors.css`, never to taste. Every one of them was wrong here * until 2026-09-18 — the palette was a hand-picked blue (`#2f6fed`) with * neutrals to match, near enough to every ratified value to look * deliberate and far enough to be a different brand. Nothing reported it, * because no gate in this repository reads `docs/staff-guide/`. */ --azure-50: #EAF3FE; --azure-100: #D2E6FD; --azure-200: #A6CCFB; --azure-300: #79B2F9; --azure-400: #4D97F7; --azure-500: #2E7BEA; --azure-600: #1668E3; --azure-700: #1153B8; --azure-800: #0D3F8C; --azure-900: #092C61; --navy: #0B1F3A; --slate-0: #FFFFFF; --slate-25: #F7F9FC; --slate-50: #F0F4FA; --slate-100: #E4EAF3; --slate-200: #D3DCE9; --slate-300: #B7C3D6; --slate-400: #8C99B3; --slate-500: #65748F; --slate-600: #4C5C76; --slate-700: #374763; --slate-800: #22314C; --slate-900: #0B1F3A; --amber-100: #FEF3C7; --amber-600: #B45309; /* Type — `tokens/typography.css`. Figtree is the Latin face and IBM Plex * Sans Arabic the Arabic one; the Arabic half of this guide rendered in * Tahoma before today. */ --font-sans: 'Figtree', 'IBM Plex Sans Arabic', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --font-arabic: 'IBM Plex Sans Arabic', 'Figtree', ui-sans-serif, system-ui, sans-serif; --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; /* ══ This site's names, mapped onto the ratified semantic aliases ══════ * The rest of this stylesheet refers only to the names below, so the * mapping is the only place the transcription is applied. */ --brand: var(--azure-600); /* --accent */ --brand-dark: var(--azure-700); /* --text-link */ --brand-hover: var(--azure-800); /* --text-link-hover */ --ink: var(--slate-900); /* --text-primary */ --ink-soft: var(--slate-600); /* --text-secondary */ --ink-faint: var(--slate-400); /* --text-muted */ --paper: var(--slate-0); /* --surface-card */ --sunken: var(--slate-50); /* --surface-sunken */ --line: var(--slate-200); /* --border-default */ --sidebar-bg: var(--slate-25); /* --surface-page */ --code-bg: var(--slate-100); --warn-bg: var(--amber-100); /* --warning-soft */ --focus-ring: var(--azure-500); --on-accent: #FFFFFF; /* --text-on-accent */ /* Search hit highlight. Not a ratified token — the design system has no * mark/highlight role — so it is built from the ratified amber rather than * invented. It carries its own INK because `color: inherit` on a fixed * light background renders light-on-light in dark mode, which is what the * literal it replaces did. */ --highlight-bg: var(--amber-100); --highlight-ink: var(--slate-900); --radius: 12px; /* --radius-lg */ --header-h: 60px; --sidebar-w: 268px; --toc-w: 220px; --content-max: 760px; color-scheme: light; } /* Dark — transcribed from `tokens/dark.css`. That file keys on * `[data-theme="dark"]`; this site has no theme switch and follows the * reader's OS, so the same values hang off the media query instead. */ @media (prefers-color-scheme: dark) { :root { --brand: #4D97F7; /* --accent */ --brand-dark: #79B2F9; /* --text-link — lighter in dark, not darker */ --brand-hover: #A6CCFB; /* --text-link-hover */ --ink: #EEF2F9; /* --text-primary */ --ink-soft: #A9B6CC; /* --text-secondary */ --ink-faint: #65748F; /* --text-muted */ --paper: #141E33; /* --surface-card */ --sunken: #101A2C; /* --surface-sunken */ --line: #243453; /* --border-default */ --sidebar-bg: #0D1526; /* --surface-page */ --code-bg: #1B2740; /* --surface-raised */ --warn-bg: rgba(217, 119, 6, .18); /* --warning-soft */ --focus-ring: #4D97F7; --on-accent: #FFFFFF; --highlight-bg: rgba(217, 119, 6, .38); --highlight-ink: var(--ink); color-scheme: dark; } } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font-sans); color: var(--ink); background: var(--paper); line-height: 1.6; font-size: 16px; } /* The Arabic face, scoped the way `tokens/base.css` scopes it — but ALSO on `body`, which is not optional here. `body` sets `font-family` explicitly, so an `[lang="ar"]` rule that matches only is inherited by nothing: the body rule wins for every descendant and the page renders in the Latin stack with a fallback doing the Arabic. Measured before this line existed — the Arabic chapters resolved to `Figtree, ...`, exactly as they had with the old system stack. */ [lang="ar"], [dir="rtl"], [lang="ar"] body, [dir="rtl"] body { font-family: var(--font-arabic); } a { color: var(--brand-dark); } a:hover { color: var(--brand-hover); } /* The mark is never recoloured — see `svgLogo()` in build.mjs. */ .brand-mark { display: block; flex: none; } .skip-link { position: absolute; inset-inline-start: -999px; top: 0; background: var(--brand); color: var(--on-accent); padding: 10px 16px; z-index: 100; } .skip-link:focus { inset-inline-start: 8px; top: 8px; border-radius: 6px; } .shell { min-height: 100%; display: flex; flex-direction: column; } /* ---------- topbar ---------- */ .topbar { min-height: var(--header-h); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--paper); position: sticky; top: 0; z-index: 20; } .menu-toggle { display: none; border: 1px solid var(--line); background: var(--sunken); color: var(--ink); border-radius: 8px; padding: 8px 10px; font: inherit; cursor: pointer; } .brand { display: flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; color: var(--ink); white-space: nowrap; } .brand svg { flex: none; } .brand .tagline { font-weight: 500; color: var(--ink-faint); font-size: 13px; border-inline-start: 1px solid var(--line); padding-inline-start: 8px; display: none; } @media (min-width: 640px) { .brand .tagline { display: inline; } } .topbar-search { flex: 1; position: relative; max-width: 420px; } #site-search { width: 100%; font: inherit; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--sunken); color: var(--ink); } #site-search:focus { outline: 2px solid var(--brand); outline-offset: -1px; background: var(--paper); } .search-results { position: absolute; top: calc(100% + 6px); inset-inline-start: 0; width: min(480px, 90vw); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(16, 25, 43, 0.16); max-height: 60vh; overflow: auto; z-index: 30; } .search-results a { display: block; padding: 10px 14px; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line); } .search-results a:last-child { border-bottom: none; } .search-results a:hover, .search-results a.active { background: var(--sunken); } .search-results .result-title { font-weight: 600; display: block; } .search-results .result-snippet { font-size: 13px; color: var(--ink-soft); display: block; margin-top: 2px; } .search-results mark { background: var(--highlight-bg); color: var(--highlight-ink); border-radius: 3px; } .search-results .search-empty { padding: 14px; color: var(--ink-faint); font-size: 14px; } .lang-switch { flex: none; text-decoration: none; font-weight: 600; font-size: 14px; border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px; color: var(--ink); } .lang-switch:hover { border-color: var(--brand); color: var(--brand-dark); } /* ---------- layout row ---------- */ .body-row { flex: 1; display: flex; align-items: flex-start; max-width: 1320px; margin-inline: auto; width: 100%; } .sidebar { flex: none; width: var(--sidebar-w); border-inline-end: 1px solid var(--line); background: var(--sidebar-bg); padding: 18px 14px 40px; position: sticky; top: var(--header-h); align-self: stretch; height: calc(100vh - var(--header-h)); overflow-y: auto; } .back-home { display: block; font-size: 13px; color: var(--ink-soft); text-decoration: none; margin-bottom: 14px; } .back-home:hover { color: var(--brand-dark); } .sidebar-vertical { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); margin: 6px 4px 8px; } .chapter-list { list-style: none; margin: 0; padding: 0; } .chapter-list li { margin: 1px 0; } .chapter-list a { display: block; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--ink-soft); font-size: 14.5px; } .chapter-list a:hover { background: var(--sunken); color: var(--ink); } .chapter-list a.active { background: var(--brand); color: var(--on-accent); font-weight: 600; } .scrim { display: none; } /* ---------- content ---------- */ .content { flex: 1; min-width: 0; padding: 28px 32px 60px; max-width: calc(var(--content-max) + 64px); margin-inline: auto; } .breadcrumb { font-size: 13px; color: var(--ink-faint); margin: 0 0 18px; } .breadcrumb a { color: var(--ink-faint); text-decoration: none; } .breadcrumb a:hover { color: var(--brand-dark); } .prose h1 { font-size: 30px; margin: 0 0 6px; line-height: 1.25; } .prose h2 { font-size: 22px; margin: 40px 0 12px; padding-top: 6px; border-top: 1px solid var(--line); } .prose h2:first-of-type { border-top: none; margin-top: 20px; } .prose h3 { font-size: 17px; margin: 26px 0 8px; } .prose h4 { font-size: 15px; margin: 20px 0 6px; color: var(--ink-soft); } .prose p { margin: 12px 0; color: var(--ink); } .prose ul, .prose ol { margin: 10px 0; padding-inline-start: 24px; } .prose li { margin: 5px 0; } .prose li > ul { margin: 6px 0; } .prose strong { font-weight: 700; } .prose em { color: var(--ink-soft); } .prose code { font-family: var(--font-mono); background: var(--code-bg); padding: 1px 6px; border-radius: 5px; font-size: 0.9em; unicode-bidi: plaintext; } .prose pre { background: var(--code-bg); padding: 12px 14px; border-radius: var(--radius); overflow-x: auto; font-size: 13.5px; } .prose pre code { background: none; padding: 0; } .table-wrap { overflow-x: auto; margin: 16px 0; } .prose table { border-collapse: collapse; width: 100%; font-size: 14.5px; } .prose th, .prose td { border: 1px solid var(--line); padding: 8px 10px; text-align: start; vertical-align: top; } .prose th { background: var(--sunken); font-weight: 600; } .prose tr:nth-child(even) td { background: color-mix(in srgb, var(--sunken) 45%, transparent); } .doc-img { max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 28px rgba(16, 25, 43, 0.10); margin: 14px 0 22px; display: block; cursor: zoom-in; } [data-lang="ar"] .doc-img { direction: ltr; } .mermaid { margin: 18px 0; } .page-footer { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line); } .print-btn { font: inherit; border: 1px solid var(--line); background: var(--sunken); color: var(--ink); border-radius: 8px; padding: 8px 14px; cursor: pointer; } .print-btn:hover { border-color: var(--brand); } /* ---------- on-this-page ---------- */ .on-this-page { flex: none; width: var(--toc-w); padding: 28px 16px 40px; position: sticky; top: var(--header-h); align-self: flex-start; max-height: calc(100vh - var(--header-h)); overflow-y: auto; display: none; } @media (min-width: 1180px) { .on-this-page { display: block; } } .on-this-page-title { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); margin: 0 0 8px; } .on-this-page ul { list-style: none; margin: 0; padding: 0; } .on-this-page li a { display: block; padding: 4px 0; font-size: 13.5px; color: var(--ink-soft); text-decoration: none; border-inline-start: 2px solid transparent; padding-inline-start: 10px; } .on-this-page li.lvl-3 a { padding-inline-start: 20px; font-size: 13px; } .on-this-page li a:hover { color: var(--brand-dark); border-inline-start-color: var(--line); } .site-footer { text-align: center; font-size: 12.5px; color: var(--ink-faint); padding: 18px 16px 26px; border-top: 1px solid var(--line); } /* ---------- landing pages ---------- */ body.landing { background: var(--sunken); } .landing-wrap { max-width: 860px; margin: 0 auto; padding: 48px 20px 80px; } .landing-wrap h1 { font-size: 32px; margin: 12px 0 6px; } .landing-intro { color: var(--ink-soft); font-size: 17px; margin: 0 0 28px; } .landing-note { color: var(--ink-faint); font-size: 14px; margin-top: 28px; } .vertical-cards, .lang-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 18px 0 30px; } .vertical-card, .lang-card { display: flex; flex-direction: column; gap: 6px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 20px; text-decoration: none; color: var(--ink); box-shadow: 0 8px 20px rgba(16, 25, 43, 0.06); } .vertical-card:hover, .lang-card:hover { border-color: var(--brand); transform: translateY(-1px); } .vertical-card-title, .lang-card-lang { font-size: 19px; font-weight: 700; } .vertical-card-title-ar { font-size: 15px; color: var(--ink-soft); } .vertical-card-desc, .lang-card-desc { font-size: 14px; color: var(--ink-soft); } .landing-prose { margin-top: 20px; } /* ---------- responsive sidebar ---------- */ @media (max-width: 900px) { .menu-toggle { display: inline-flex; align-items: center; gap: 6px; } .sidebar { position: fixed; top: var(--header-h); bottom: 0; inset-inline-start: 0; width: min(84vw, 320px); height: auto; transform: translateX(-102%); transition: transform .18s ease; z-index: 40; box-shadow: 0 20px 40px rgba(16,25,43,.2); } [dir="rtl"] .sidebar { transform: translateX(102%); } .sidebar.open { transform: translateX(0); } .scrim { display: none; position: fixed; inset: var(--header-h) 0 0 0; background: rgba(10,14,26,.35); z-index: 35; } .scrim.open { display: block; } .content { padding: 20px 18px 48px; } .topbar { gap: 10px; } .brand span:not(.tagline) { display: none; } } @media (max-width: 560px) { /* The search box loses a losing battle for width beside Menu/brand/language on a phone, so it drops to its own full-width row instead of truncating. */ :root { --header-h: 108px; } .topbar-search { order: 3; flex-basis: 100%; max-width: none; } } @media print { .topbar, .sidebar, .scrim, .on-this-page, .page-footer, .site-footer, .breadcrumb { display: none !important; } .content { max-width: none; padding: 0; } .doc-img { box-shadow: none; break-inside: avoid; } a { color: inherit; text-decoration: none; } }