/* ============================================================================ fa — editorial design system (RTL Persian) Encodes the "field atlas" editorial treatment: eyebrow rules, display/body weight contrast (one variable font), numbered sections, hairline tables, token-swappable palette, both themes. Adheres to artifact-design / frontend-design / ui-ux-pro-max principles so a page is FAST to compose: pour Persian content into these components, pick a scheme, done. USAGE - Everything is scoped under `.doc` (the RTL wrapper). This makes it drop-in for BOTH local mode (full document) and share mode (body-only Artifact, where you can't style /). Put dir="rtl" on the .doc element. - Font: pair with the @font-face from vazirmatn-inline.css (share) or the CDN link (local). Weight contrast (300 body ↔ 800/900 display) does the editorial work — no second font family needed. - Palette: defaults below are scheme "atlas" (navy + ember + steel). Swap by adding a scheme class to .doc, or override the 3 accent tokens inline for a bespoke subject palette. Neutrals are hue-biased, never flat grey. ============================================================================ */ /* ---- tokens: scheme "atlas" (default) — dark is primary ---- */ .doc { --ink: #0b1220; /* page ground — navy, not black */ --ink-2: #111a2e; /* raised surface */ --surface: #0f1728; /* card/callout ground */ --line: #243149; /* hairline rules */ --line-soft: #1a2338; --fg: #e7ecf5; /* body text */ --fg-muted: #93a1bd; /* decks, captions, secondary cells */ --accent: #86aee0; /* display headings, links, section titles (steel blue) */ --accent-2: #a9c6f0; --eyebrow: #e0955a; /* eyebrows, section numerals, intro lines (ember) */ --good: #6fcf9a; --display-w: 800; --body-w: 350; } @media (prefers-color-scheme: light) { .doc { --ink: #fbfaf7; --ink-2: #f3f1ea; --surface: #f6f4ee; --line: #d9d3c4; --line-soft: #e7e2d5; --fg: #1a2230; --fg-muted: #5c6678; --accent: #2f5f9e; --accent-2: #26507f; --eyebrow: #b5612a; --good: #2f8f5f; } } :root[data-theme="dark"] .doc { --ink: #0b1220; --ink-2: #111a2e; --surface: #0f1728; --line: #243149; --line-soft: #1a2338; --fg: #e7ecf5; --fg-muted: #93a1bd; --accent: #86aee0; --accent-2: #a9c6f0; --eyebrow: #e0955a; --good: #6fcf9a; } :root[data-theme="light"] .doc { --ink: #fbfaf7; --ink-2: #f3f1ea; --surface: #f6f4ee; --line: #d9d3c4; --line-soft: #e7e2d5; --fg: #1a2230; --fg-muted: #5c6678; --accent: #2f5f9e; --accent-2: #26507f; --eyebrow: #b5612a; --good: #2f8f5f; } /* ---- alternate schemes: add class to .doc (override only accent trio + ground) ---- */ .doc.scheme-ember { --accent: #e0955a; --accent-2: #eeb37f; --eyebrow: #cf6f6f; } .doc.scheme-forest { --ink: #0a1512; --ink-2: #0f1f19; --surface: #0e1c17; --line: #22453a; --accent: #7fd0a8; --accent-2: #a6e2c4; --eyebrow: #d8b25a; } .doc.scheme-plum { --ink: #130f1c; --ink-2: #1c1630; --surface: #191228; --line: #362a4d; --accent: #c9a2e8; --accent-2: #dcc0f2; --eyebrow: #e39ab0; } .doc.scheme-slate { --accent: #9fb2c9; --accent-2: #c0cee0; --eyebrow: #d6a15e; } /* ---- base ---- */ .doc * { box-sizing: border-box; } .doc { direction: rtl; text-align: right; font-family: "Vazirmatn", system-ui, "Tahoma", sans-serif; font-weight: var(--body-w); font-optical-sizing: auto; color: var(--fg); background: var(--ink); line-height: 2; font-size: 18px; max-width: 860px; margin: 0 auto; padding: 8px 22px 72px; -webkit-font-smoothing: antialiased; } .doc p { margin: 0 0 18px; } .doc strong { font-weight: 700; color: var(--fg); } .doc a { color: var(--accent); text-decoration-color: var(--line); text-underline-offset: 4px; } .doc em { font-style: normal; color: var(--accent-2); } /* Persian has no italics — emphasis via color */ /* Latin runs & code stay LTR-isolated (bidi correctness — non-negotiable) */ .doc bdi { unicode-bidi: isolate; } .doc code { font-family: "SFMono-Regular", ui-monospace, "Courier New", monospace; font-size: .82em; direction: ltr; unicode-bidi: isolate; background: var(--ink-2); border: 1px solid var(--line-soft); border-radius: 5px; padding: 1px 6px; color: var(--accent-2); } /* ---- eyebrow: letter-spaced uppercase label with a trailing hairline ---- */ .doc .eyebrow { display: flex; align-items: center; gap: 18px; color: var(--eyebrow); font-weight: 600; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; margin: 0 0 22px; } .doc .eyebrow bdi { letter-spacing: .22em; } .doc .eyebrow::after { content: ""; flex: 1; height: 1px; background: linear-gradient(to left, var(--line), transparent); } /* ---- hero: display headline + deck + optional decorative figure ---- */ .doc .hero { position: relative; padding: 40px 0 34px; } .doc .hero h1 { font-size: clamp(38px, 6vw, 62px); line-height: 1.18; margin: 0 0 20px; font-weight: var(--display-w); letter-spacing: -0.01em; text-wrap: balance; color: var(--fg); } .doc .hero h1 .lead-accent { color: var(--accent); } .doc .hero .deck { font-size: 20px; color: var(--fg-muted); max-width: 62ch; line-height: 1.9; } .doc .hero-figure { position: absolute; top: 0; left: 0; width: 340px; height: 340px; opacity: .5; pointer-events: none; z-index: 0; } .doc .hero > * { position: relative; z-index: 1; } .doc .rule { height: 1px; background: var(--line); border: 0; margin: 30px 0 54px; } /* ---- numbered sections: big numeral + title, intro line ---- */ .doc section { margin: 0 0 56px; } .doc .section-head { display: flex; align-items: baseline; gap: 18px; margin: 0 0 6px; } .doc .section-no { font-size: clamp(30px, 4vw, 44px); font-weight: 300; color: var(--eyebrow); line-height: 1; font-variant-numeric: tabular-nums; } .doc .section-head h2 { font-size: clamp(24px, 3.4vw, 32px); font-weight: 750; letter-spacing: -0.01em; margin: 0; color: var(--fg); text-wrap: balance; } .doc .section-intro { color: var(--accent); font-size: 18px; margin: 0 0 22px; } .doc h3 { font-size: 20px; font-weight: 700; color: var(--accent-2); margin: 26px 0 10px; } /* ---- editorial hairline table (no boxes; bottom rules; small caps headers) ---- */ .doc .atlas-table { width: 100%; border-collapse: collapse; margin: 8px 0 20px; font-size: 16px; } .doc .atlas-table thead th { color: var(--fg-muted); font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; text-align: right; padding: 0 4px 10px; border-bottom: 1px solid var(--line); } .doc .atlas-table td { padding: 15px 4px; border-bottom: 1px solid var(--line-soft); vertical-align: top; line-height: 1.85; } .doc .atlas-table tbody tr:last-child td { border-bottom: 0; } .doc .atlas-table td:first-child { font-weight: 700; color: var(--fg); white-space: nowrap; } .doc .atlas-table .num { font-variant-numeric: tabular-nums; } /* ---- callout / pull-quote ---- */ .doc .callout { background: var(--surface); border: 1px solid var(--line-soft); border-right: 3px solid var(--accent); border-radius: 10px; padding: 22px 26px; margin: 0 0 26px; } .doc .callout.is-key { border-right-color: var(--eyebrow); } .doc .callout .label { display: block; color: var(--eyebrow); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 10px; } .doc .pull { font-size: 24px; line-height: 1.7; font-weight: 500; color: var(--fg); border-right: 3px solid var(--eyebrow); padding: 4px 22px 4px 0; margin: 30px 0; } .doc .pull .by { display: block; font-size: 15px; color: var(--fg-muted); margin-top: 10px; font-weight: 400; } /* ---- cards grid (when content is parallel, not sequential) ---- */ .doc .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 0 0 24px; } .doc .card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 12px; padding: 20px 22px; transition: border-color .25s, transform .25s; } .doc .card:hover { border-color: var(--accent); transform: translateY(-3px); } .doc .card h3 { margin: 0 0 8px; } .doc ul { padding-right: 22px; margin: 0 0 18px; } .doc li { margin-bottom: 9px; } /* ---- provenance (section 0) — rendered in the hairline table idiom ---- */ .doc .provenance { margin: 8px 0 44px; } .doc .provenance .atlas-table td:first-child { color: var(--fg-muted); font-weight: 600; } /* ---- foot ---- */ .doc .foot { color: var(--fg-muted); font-size: 14px; margin-top: 48px; border-top: 1px solid var(--line); padding-top: 22px; line-height: 1.9; } /* ---- overflow guards & motion ---- */ .doc .scroll-x { overflow-x: auto; } @media (prefers-reduced-motion: reduce) { .doc * { transition: none !important; animation: none !important; } } @media (max-width: 640px) { .doc { padding: 8px 15px 56px; font-size: 17px; } .doc .hero-figure { width: 200px; height: 200px; opacity: .3; } .doc .atlas-table { font-size: 14px; } }