# راهنمای سبک — Bavarsa Portfolio

راهنمای طراحی هر ۱۲ دمو: پالت رنگ، تایپوگرافی، معماری چیدمان و منطق طراحی. مقادیر رنگ
مربوط به حالتی است که هر دمو در آن **طراحی شده** (تیره‌محور یا روشن‌محور)؛ حالت مقابل هم
در `css/theme.css` همان دمو تعریف شده است.

## اصول مشترک

- **تایپوگرافی:** فونت **رخ** برای تیترها (`--rp-font-display`)، **دانا** برای متن
  (`--rp-font-body`) و **Plus Jakarta Sans** برای لاتین، کد و اعداد (`--rp-font-mono`).
- **مقیاس فونت سیال:** همه‌ی اندازه‌ها با `clamp()` تعریف شده‌اند و بدون media query
  با عرض صفحه مقیاس می‌گیرند.
- **ریتم عمودی:** فاصله‌ی بین سکشن‌ها با `--rp-section-y` کنترل می‌شود.
- **حرکت:** منحنی `cubic-bezier(0.22, 1, 0.36, 1)` به‌عنوان easing استاندارد؛ همه‌ی
  انیمیشن‌ها با `prefers-reduced-motion` خاموش می‌شوند.
- **پنج معماری چیدمان (A–E):** هرکدام دست‌کم دو بار، با ترتیب سکشن و بخش‌های اختصاصی متفاوت
  (B و C هرکدام سه بار).

---

## ۰۱ — توسعه‌دهنده وب · Web Developer

- **معماری:** A — هیرو دوستونه با پنل کد + ریل عمودی شبکه‌های اجتماعی. تیره‌محور.
- **پالت (تیره):** اصلی `#3ddc84` · تاکید `#22d3ee` · پس‌زمینه `#070a12` · سطح `#0d1220`
- **تایپوگرافی:** تیتر رخ، اعداد و چیپ‌ها با فونت مونو (حس ابزار توسعه).
- **بخش‌های امضا:** پنل کد زنده با تایپ انیمیشنی، شبکه‌ی فعالیت (کامیت)، استک فناوری.
- **منطق:** حس ویرایشگر کد — شبکه‌ی گراف‌پیپر پس‌زمینه، دکمه‌های کم‌گردی، رنگ سبز
  ترمینال. تیره‌محور چون مخاطبش شب‌ها کد می‌زند.

## ۰۲ — توسعه‌دهنده اپلیکیشن · App Developer

- **معماری:** D — هیرو مرکزی با ماک‌آپ سه گوشی. روشن‌محور.
- **پالت (روشن):** اصلی `#5b5bd6` · تاکید `#ec4899` · پس‌زمینه `#ffffff` · سطح `#f6f6fd`
- **تایپوگرافی:** تیتر رخ، فاصله‌ی زیاد، گردی بالا (حس سیستم‌عامل موبایل).
- **بخش‌های امضا:** ماک‌آپ گوشی با ناچ، ردیف‌های قابلیت متناوب، اسلایدر اسکرین، بج استور.
- **منطق:** زبان بصری یک سیستم‌عامل مدرن موبایل — گرادیان اورورا، اسکوئرکل آیکون اپ،
  کارت‌های نرم. تمیز و روشن.

## ۰۳ — طراح رابط کاربری · UI/UX Designer

- **معماری:** E — شبکه‌ی بنتوی نامتقارن + تایپ درشت. روشن‌محور، فضای سفید زیاد.
- **پالت (روشن):** اصلی `#7c3aed` · تاکید `#14b8a6` · پس‌زمینه `#ffffff` · سطح `#faf7ff`
- **تایپوگرافی:** بزرگ‌ترین مقیاس تیتر بین همه‌ی دموها؛ هایلایت ماژیکی زیر کلمه‌ی کلیدی.
- **بخش‌های امضا:** بنتوی ترکیبی (پرتره/عدد/سواچ/تصویر)، کارت مطالعه‌ی موردی با متریک،
  ریل فرایند چهارمرحله‌ای با شماره‌ی فارسی پشت‌زمینه.
- **منطق:** خود اثر باید نمونه‌ی کار طراح باشد — رنگی، جسور در تایپوگرافی، سخاوتمند در
  فضای خالی.

## ۰۴ — وکیل دادگستری · Lawyer

- **معماری:** B — تحریریه‌ای و متقارن + نوار ابزار بالای هدر. روشن‌محور.
- **پالت (روشن):** اصلی `#a8862a` (طلایی) · تاکید `#1d3a5f` (سرمه‌ای) · پس‌زمینه `#fffdf8`
- **تایپوگرافی:** تیتر رخ با تراکینگ باز، eyebrow با فاصله‌ی حروف زیاد (حس سربرگ رسمی).
- **بخش‌های امضا:** نوار مدارک، حوزه‌های تخصص با خطوط مویی، تایم‌لاین سوابق، بلوک نتایج.
- **منطق:** گرامر بصری کاغذ سربرگ — گوشه‌های تقریباً تیز (شعاع ۲–۴px)، خطوط مویی
  به‌جای سایه، رنگ سرمه‌ای و طلای محافظه‌کارانه. اعتماد و اقتدار.

## ۰۵ — پزشک متخصص · Doctor

- **معماری:** C — هیرو تمام‌عرض + کارت نوبت‌دهی روی‌هم‌افتاده. روشن‌محور.
- **پالت (روشن):** اصلی `#0e8f8f` · تاکید `#34c98a` (مینت) · پس‌زمینه `#ffffff` · سطح `#eef8f8`
- **تایپوگرافی:** تیتر رخ، لحن آرام، بدون کنتراست تند.
- **بخش‌های امضا:** کارت نوبت‌دهی که لبه‌ی هیرو را می‌پوشاند، تخصص‌ها، ساعات + بیمه، فرم نوبت.
- **منطق:** آرام اما نه سرد — آبی و مینت برای انتقال سلامت و اعتماد، لبه‌های نرم،
  کارت نوبت‌دهی که اقدام اصلی را غیرقابل‌چشم‌پوشی می‌کند.

## ۰۶ — مشاور کسب‌وکار · Consultant

- **معماری:** A — دوستونه اما داده‌محور (نه کدمحور مثل دموی ۰۱). روشن‌محور.
- **پالت (روشن):** اصلی `#d97706` (کهربایی) · تاکید `#0284c7` · پس‌زمینه `#ffffff` · سطح `#f4f5f7`
- **تایپوگرافی:** تیتر رخ، اعداد و شماره‌ها با فونت مونو (حس گزارش).
- **بخش‌های امضا:** نمودار ستونی CSS در هیرو، نوار KPI، خدمات جدولی، فرایند شماره‌دار،
  مطالعات موردی به‌صورت عدد.
- **منطق:** جدی و نتیجه‌محور — گوشه‌های تیز، تک‌رنگ سیگنال کهربایی، همه‌چیز به عدد
  ختم می‌شود. برخلاف دموی ۰۱ که با همان معماری، کدمحور و تیره است.

## ۰۷ — کارآفرین · Entrepreneur

- **معماری:** E — بنتوی بلوک‌های سنگین + هیرو تک‌بلوک اشباع. روشن‌محور.
- **پالت (روشن):** اصلی `#ea580c` (نارنجی) · تاکید `#7c3aed` (بنفش) · پس‌زمینه `#ffffff`
- **تایپوگرافی:** تیتر رخ درشت روی بلوک رنگی، وارونه.
- **بخش‌های امضا:** بلوک هیروی گرادیانی، بنتوی آمار، کارت کسب‌وکارها با وضعیت، تایم‌لاین
  دوطرفه‌ی نقاط عطف، خبرنامه.
- **منطق:** بلند و پرانرژی — برخلاف بنتوی هوادار دموی ۰۳، اینجا بلوک‌ها بزرگ، سنگین و
  اشباع‌اند. نارنجی و بنفش گرم و جسور.

## ۰۸ — نویسنده محتوا · Content Writer

- **معماری:** B — تایپوگرافیک با یک ستون خوانا (مثل دموی ۰۴ ولی ادبی نه اداری). روشن‌محور.
- **پالت (روشن):** اصلی `#b4471f` (آجری) · تاکید `#3f6f5f` · پس‌زمینه `#fffdf9` (کرم)
- **تایپوگرافی:** متن بزرگ‌تر و فاصله‌ی خطوط بازتر (`--rp-lh-base: 1.95`)، حروف اول بزرگ
  (drop cap)، نقل‌قول برجسته.
- **بخش‌های امضا:** نوار «منتشرشده در»، ستون روایت با drop cap، فهرست مقالات با خط
  (نه کارت)، خدمات شماره‌دار.
- **منطق:** صفحه‌ای که مثل یک کتاب خوش‌صفحه‌آرایی رفتار می‌کند — بدون جعبه، بدون سایه،
  فقط تایپ و خط. کرم گرم و آجری.

## ۰۹ — فریلنسر · Freelancer

- **معماری:** D — صمیمی و شخصی (مثل دموی ۰۲ ولی گفت‌وگومحور). روشن‌محور.
- **پالت (روشن):** اصلی `#f4643f` (مرجانی) · تاکید `#2c9c8f` · پس‌زمینه `#fffaf7` (شنی)
- **تایپوگرافی:** تیتر رخ، لحن اول‌شخص، ایموجی دست تکان‌دهنده‌ی انیمیشنی.
- **بخش‌های امضا:** پرتره‌ی بلابی با بج «ظرفیت آزاد»، مراحل کار، **بسته‌های قیمت‌گذاری**
  (منحصر به این دمو)، گالری کار.
- **منطق:** گرم و در دسترس — شکل‌های نرم بلابی، رنگ‌های مرجانی و شنی، روایت شخصی.
  برخلاف دموی ۰۲ که محصول‌محور و کریسپ است.

## ۱۰ — بازیگر · Actor

- **معماری:** C — سینمایی تمام‌عرض زیر هدر شفاف (مثل دموی ۰۵ ولی وارونه در حس). تیره‌محور.
- **پالت (تیره):** اصلی `#e11d48` (قرمز خونی) · تاکید `#d4b483` (طلای مات) · پس‌زمینه `#08070a`
- **تایپوگرافی:** تیتر رخ بسیار درشت با تراکینگ باز (حس کارت عنوان فیلم)، eyebrow با
  فاصله‌ی حروف زیاد.
- **بخش‌های امضا:** هیروی سینمایی با اسکریم، نماهنگ معرفی با دکمه‌ی پخش، جدول کارنامه،
  گالری با فیلتر خاکستری، نقل‌قول رسانه‌ها، جوایز.
- **منطق:** تئاتر تاریک — تصاویر تمام‌عرض با کنتراست و دساتوره، قرمز دراماتیک تنها
  رنگ تاکید. برخلاف دموی ۰۵ که روز روشن و آرام است، اینجا شب و دراماتیک.

## ۱۱ — مهندس نرم‌افزار · Software Engineer

- **معماری:** B — تحریریه‌ای و سندمحور (مثل دموی ۰۴ ولی فنی نه اداری). روشن‌محور.
- **پالت (روشن):** اصلی `#2563eb` · تاکید `#a855f7` · پس‌زمینه `#ffffff` · سطح `#f1f5f9`
- **تایپوگرافی:** تیتر رخ، شعاع گوشه‌های کوچک (۴–۱۰px)، فونت مونو فقط روی متن لاتین
  (نام مخزن و تگ RFC) — چون مونو گلیف فارسی ندارد و اتصال حروف را می‌شکند.
- **بخش‌های امضا:** نوار متادیتای سند در بالای هیرو، برگه مشخصات چهارستونی،
  **نمودار معماری چهارلایه‌ی تمام‌CSS** و کارت‌های مخزن متن‌باز با نقطه‌ی زبان.
- **منطق:** صفحه باید مثل یک سند طراحی داخلی خوانده شود، نه یک بروشور: خط مویی
  به‌جای سایه، فهرست به‌جای کارت، و هر ادعا کنار عددش. برخلاف دموی ۰۱ که با همان
  حرفه‌ی نزدیک، تیره و ویرایشگرمحور است.

## ۱۲ — متخصص بازاریابی دیجیتال · Digital Marketing Specialist

- **معماری:** C — هیروی تمام‌عرض با نوار نتایج روی‌هم‌افتاده (مثل دموی ۰۵ ولی پرانرژی). روشن‌محور.
- **پالت (روشن):** اصلی `#c026d3` · تاکید `#eab308` · پس‌زمینه `#ffffff` · سطح `#fdf4ff`
- **تایپوگرافی:** تیتر رخ درشت روی اسکریم سرخابی، دکمه‌های کاملاً گرد (`--rp-btn-radius: 999px`).
- **بخش‌های امضا:** نوار نتایج شناور روی هیرو، **قیف تبدیل تمام‌CSS** (عرض هر پله از
  `--w` می‌آید)، کمپین‌های قابل فیلتر با عدد مهرشده روی عکس، و آکاردئون پرسش‌های متداول.
- **منطق:** پوستر کمپین — رنگ اشباع، زرد به‌عنوان تنها رنگ سیگنال و همه‌چیز به یک
  عدد ختم می‌شود. برخلاف دموی ۰۵ که با همان اسکلت، آرام و روز روشن است و دموی ۱۰
  که شب و دراماتیک است.

---

## عکاسی و تصاویر

همه‌ی تصاویر پکیج **عکس واقعی** با لایسنس Unsplash هستند (استفاده‌ی تجاری آزاد). هیچ
تصویر تولیدشده با هوش مصنوعی و هیچ پنل انتزاعی SVG در دموها به کار نرفته است. نقشه‌ی
اینکه هر اسلات با کدام عکس پر می‌شود در `scripts/photos.mjs` است و
`node scripts/fetch-photos.mjs` آن را داخل `demos/<demo>/img/` می‌ریزد.

### قواعد انتخاب عکس برای هر دمو

| دمو | جهت‌گیری تصویری |
|-----|------------------|
| ۰۱ Web Developer | میز کار شب، دستگاه‌ها، فلت‌لی تیره — هم‌رنگ با تم تیره |
| ۰۲ App Developer | محتوای پرکنتراست و رنگی داخل قاب گوشی (مثل گالری یک اپ) |
| ۰۳ UI/UX Designer | استودیو: نمونه‌ی چاپی، حروف‌نگاری، اشیای طراحی |
| ۰۴ Lawyer | معماری نهادی، ستون، سنگ، کتاب — وقار و ماندگاری |
| ۰۵ Doctor | نور روز، گیاه، فضای تمیز — آرام و بهداشتی |
| ۰۶ Consultant | مقیاس شرکتی: برج، سالن، اتاق جلسه |
| ۰۷ Entrepreneur | پرتره‌ی گرم و پرانرژی؛ همین عکس بنر هیرو را می‌سازد |
| ۰۸ Content Writer | کاغذ، جوهر، ماشین‌تحریر، چای — میز کار نویسنده |
| ۰۹ Freelancer | کافه، چوب گرم، تراکوتا — دفتر واقعی فریلنسر |
| ۱۰ Actor | نور صحنه، تجهیزات فیلم، نمای سالن نمایش (با فیلتر خاکستری تم) |
| ۱۱ Software Engineer | میز کار مرتب، دستگاه، سطح ساختارمند — با دساتوره‌ی ملایم تم |
| ۱۲ Digital Marketing Specialist | شهر، جمعیت، رنگ زنده — تصویر بیرونی و پرانرژی |

### اسلات‌ها و نسبت ابعاد

- `hero.jpg` — ۳:۴ (در قاب ستونی) یا ۱۶:۱۱ (تمام‌عرض سینمایی)
- `portrait.jpg` — ۹:۱۱، بخش «درباره من»
- `work-1..6.jpg` — ۴:۳؛ در دموی ۰۲ عمودی ۳:۴ چون داخل صفحه‌ی گوشی می‌نشیند
- `avatar-1..4.jpg` — ۱:۱
- `logo-1..6.svg` و `favicon.svg` — برداری می‌مانند و با `gen-art.mjs` ساخته می‌شوند

جایگزینی عکس = عوض کردن فایل هم‌نام. اگر ابعاد را تغییر دادید، `width`/`height` تصویر
را هم در `index.html` به‌روز کنید (برای صفر ماندن CLS).

### قواعد ریسپانسیو تصاویر

1. هیچ‌گاه `max-inline-size` پیکسلی روی تصویری که در ستون باریک می‌نشیند، بدون
   `inline-size: 100%` نگذارید؛ در موبایل کل صفحه shrink-to-fit می‌شود.
2. ستون‌های گرید که تصویر می‌گیرند با `minmax(0, …)` تعریف شوند.
3. برای موزاییک‌ها (گالری دموی ۱۰) در موبایل به‌جای ارتفاع ثابت ردیف، از
   `aspect-ratio` استفاده کنید تا سلول خالی و حفره ایجاد نشود.

---

## جدول جمع‌بندی پالت‌ها

| # | حرفه | اصلی | تاکید | حالت طراحی |
|---|------|------|-------|------------|
| ۰۱ | Web Developer | `#3ddc84` | `#22d3ee` | تیره |
| ۰۲ | App Developer | `#5b5bd6` | `#ec4899` | روشن |
| ۰۳ | UI/UX Designer | `#7c3aed` | `#14b8a6` | روشن |
| ۰۴ | Lawyer | `#a8862a` | `#1d3a5f` | روشن |
| ۰۵ | Doctor | `#0e8f8f` | `#34c98a` | روشن |
| ۰۶ | Consultant | `#d97706` | `#0284c7` | روشن |
| ۰۷ | Entrepreneur | `#ea580c` | `#7c3aed` | روشن |
| ۰۸ | Content Writer | `#b4471f` | `#3f6f5f` | روشن |
| ۰۹ | Freelancer | `#f4643f` | `#2c9c8f` | روشن |
| ۱۰ | Actor | `#e11d48` | `#d4b483` | تیره |
| ۱۱ | Software Engineer | `#2563eb` | `#a855f7` | روشن |
| ۱۲ | Digital Marketing Specialist | `#c026d3` | `#eab308` | روشن |