/* Atmaal PoC — Testing Guide (/guide). Mehwar editorial language: cream paper, ink, Thmanyah type, hairline rules, terracotta reserved for the dial number + small brand moments. Token values mirror packages/design-system/styles/themes/mehwar.css (light). Single deliberate light look — this is a print-like customer artifact. Logical properties throughout: one sheet serves rtl (ar) and ltr (en). */ @font-face { font-family: "Thmanyah Sans"; src: url("fonts/thmanyahsans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Thmanyah Sans"; src: url("fonts/thmanyahsans-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Thmanyah Sans"; src: url("fonts/thmanyahsans-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Thmanyah Serif Display"; src: url("fonts/thmanyahserifdisplay-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Thmanyah Serif Display"; src: url("fonts/thmanyahserifdisplay-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Thmanyah Serif Display"; src: url("fonts/thmanyahserifdisplay-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } :root { --bg: oklch(0.952 0.018 78); /* #F7F3EC cream */ --paper: oklch(0.97 0.012 78); /* #FBF8F2 */ --ink: oklch(0.18 0.01 60); /* #1A1815 */ --ink-2: oklch(0.235 0.012 60); /* #3D3933 */ --muted: oklch(0.48 0.022 70); /* AA on cream */ --line: oklch(0.78 0.05 75); /* visible hairline */ --line-soft: oklch(0.87 0.032 75); --terracotta: oklch(0.59 0.142 38); /* #C7553A */ --terracotta-ink: oklch(0.5 0.135 38); /* darker for small text */ --terracotta-soft: oklch(0.88 0.044 38); /* #E9CFC4 */ --sans: "Thmanyah Sans", "Segoe UI", Tahoma, system-ui, sans-serif; --serif: "Thmanyah Serif Display", Georgia, "Times New Roman", serif; } * { margin: 0; padding: 0; box-sizing: border-box; } html { background: var(--bg); } body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16.5px; line-height: 1.8; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Arabic is cursive — inherited letter-spacing must never break joining */ .lang-ar { letter-spacing: normal; } /* language visibility — guide.js flips data-lang on */ html[data-lang="en"] .lang-ar { display: none; } html[data-lang="ar"] .lang-en { display: none; } /* Latin digits stay LTR inside Arabic text */ .num, .cell-nid, .g-phone, .g-phone-backup { font-variant-numeric: tabular-nums; unicode-bidi: isolate; direction: ltr; } a { color: var(--terracotta-ink); text-decoration: underline; text-decoration-color: var(--terracotta-soft); text-underline-offset: 3px; transition: text-decoration-color 120ms ease; } a:hover { text-decoration-color: var(--terracotta); } .g-wrap { max-width: 820px; margin: 0 auto; padding: 56px 28px 72px; } /* ── masthead ─────────────────────────────────────────── */ .g-topline { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--ink); } .g-eyebrow { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .lang-switch { display: flex; gap: 18px; } .lang-switch button { appearance: none; background: none; border: none; padding: 0 0 2px; font-family: var(--sans); font-size: 0.85rem; font-weight: 500; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; } .lang-switch button.active { color: var(--ink); border-bottom-color: var(--terracotta); } .lang-switch button:not(.active):hover { color: var(--ink-2); } .g-masthead { padding-top: 40px; padding-bottom: 8px; } .g-title { font-family: var(--serif); font-weight: 500; font-size: clamp(2.3rem, 6vw, 3.1rem); line-height: 1.25; letter-spacing: -0.01em; } .g-sub { margin-top: 10px; font-size: 1.08rem; color: var(--muted); max-width: 56ch; } .g-console-link { display: inline-block; margin-top: 18px; font-size: 0.85rem; color: var(--muted); text-decoration: none; } .g-console-link:hover { color: var(--terracotta-ink); } /* ── editorial sections ───────────────────────────────── */ .g-sec { margin-top: 52px; } .g-sec-head { display: flex; align-items: baseline; gap: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 20px; } .g-sec-num { font-family: var(--serif); font-weight: 400; font-size: 0.95rem; color: var(--terracotta); font-variant-numeric: tabular-nums; } .g-sec-title { font-family: var(--serif); font-weight: 500; font-size: 1.45rem; line-height: 1.35; } .g-sec p { max-width: 68ch; } .g-sec p + p { margin-top: 10px; } /* ── dial callout ─────────────────────────────────────── */ .g-dial { margin: 6px 0 26px; } .g-phone { display: inline-block; font-size: clamp(1.7rem, 5vw, 2.3rem); font-weight: 700; letter-spacing: 0.02em; color: var(--terracotta); text-decoration: none; line-height: 1.2; } .g-phone:hover { text-decoration: underline; text-decoration-color: var(--terracotta-soft); text-underline-offset: 6px; } .g-phone-backup { display: block; margin-top: 4px; font-size: 0.85rem; color: var(--muted); direction: unset; unicode-bidi: unset; } .g-phone-backup .num { font-weight: 500; color: var(--ink-2); } .g-mini-head { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; } /* ── call-flow steps ──────────────────────────────────── */ .g-steps { list-style: none; } .g-steps li { display: flex; gap: 18px; padding: 13px 0; } .g-steps li + li { border-top: 1px solid var(--line-soft); } .g-step-num { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; color: var(--terracotta); min-width: 1.4em; text-align: center; line-height: 1.6; font-variant-numeric: tabular-nums; } .g-step-title { font-weight: 700; font-size: 1rem; } .g-step-note { color: var(--muted); font-size: 0.95rem; max-width: 60ch; } .g-keys { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 6px; } html[data-lang="en"] .g-keys.lang-ar, html[data-lang="ar"] .g-keys.lang-en { display: none; } .g-key { display: inline-flex; align-items: center; gap: 9px; font-size: 0.95rem; } .g-key .key { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; background: var(--paper); font-weight: 700; font-size: 0.85rem; font-variant-numeric: tabular-nums; } .g-key-note { font-size: 0.8rem; color: var(--muted); } /* ── two OTP paths ────────────────────────────────────── */ .g-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; } .g-way { padding-block: 4px; } .g-way:first-child { border-inline-end: 1px solid var(--line-soft); padding-inline-end: 36px; } .g-way-tag { display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; color: var(--terracotta-ink); margin-bottom: 8px; } .g-way-tag.alt { color: var(--ink-2); } .g-way p { font-size: 0.98rem; color: var(--ink-2); } /* ── persona table ────────────────────────────────────── */ .table-wrap { overflow-x: auto; } .g-personas-table { width: 100%; border-collapse: collapse; min-width: 640px; } .g-personas-table th { text-align: start; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; color: var(--muted); padding: 0 0 10px; border-bottom: 1px solid var(--line); } .g-personas-table td { vertical-align: top; padding: 16px 0; border-bottom: 1px solid var(--line-soft); } .g-personas-table th + th, .g-personas-table td + td { padding-inline-start: 22px; } .g-personas-table tr:last-child td { border-bottom: none; } .cell-nid { font-weight: 700; font-size: 1.02rem; color: var(--terracotta); white-space: nowrap; } .cell-name { min-width: 108px; } .name-en { display: block; font-weight: 700; font-size: 0.95rem; line-height: 1.5; } .name-ar { display: block; font-size: 0.8rem; color: var(--muted); } .g-persona-role { display: block; font-weight: 700; font-size: 0.92rem; } .g-persona-desc { display: block; font-size: 0.88rem; color: var(--muted); max-width: 34ch; margin-top: 2px; } .g-quote { display: block; font-size: 0.95rem; font-weight: 500; line-height: 1.6; max-width: 26ch; } .g-quote-alt { display: block; font-size: 0.8rem; color: var(--muted); margin-top: 3px; max-width: 30ch; } /* Latin quote lines shown inside the Arabic view keep LTR punctuation */ .lang-ar .g-quote-alt { direction: ltr; unicode-bidi: isolate; text-align: end; } /* ── footer ───────────────────────────────────────────── */ .g-footer { margin-top: 64px; padding-top: 18px; border-top: 1px solid var(--ink); display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .g-footer-note { font-size: 0.85rem; color: var(--muted); } .g-footer-brand { font-family: var(--serif); font-weight: 500; font-size: 0.95rem; } .g-footer-brand a { color: var(--ink); text-decoration: none; } .g-footer-brand a:hover { color: var(--terracotta-ink); } /* ── responsive ───────────────────────────────────────── */ @media (max-width: 680px) { .g-wrap { padding: 36px 20px 56px; } .g-masthead { padding-top: 28px; } .g-sec { margin-top: 40px; } .g-two { grid-template-columns: 1fr; gap: 22px; } .g-way:first-child { border-inline-end: none; padding-inline-end: 0; border-bottom: 1px solid var(--line-soft); padding-bottom: 22px; } }