CSS و استایل
لایه‌های CSS
هر صفحه این فایل‌ها را به همین ترتیب لود می‌کند:
1. assets/vendor/phosphor/regular/style.css ← آیکون‌ها (و bold در صورت نیاز)
2. assets/css/pc-tokens.css ← فونت‌ها، توکن‌ها، سه پوسته، ریست، حرکت
3. assets/css/pc-site.css ← سیستم «کارت»: هدر، دکمه، فیلد، ردیف قیمت، فوتر
4. یکی از این‌ها:
pc-pages.css ← همه صفحه‌های داخلی (محصول، سبد، پنل، مجله، تماس…)
pc-home-card.css ← صفحه اصلی اول (index.html)
pc-home-specimen.css ← صفحه اصلی دوم (index-alt.html)
pc-home-poster.css ← صفحه اصلی سوم (index-dark.html)
pc-demo.css ← صفحه معرفی (demo.html)
Tailwind و Swiper دیگر لازم نیستند. هیچ رنگ یا اندازه‌ای مستقیم در کامپوننت‌ها نوشته نشده؛ همه از توکن‌ها می‌آیند.
توکن‌ها (pc-tokens.css)
نقش‌های رنگ
| توکن | کاربرد |
|---|---|
--bg | زمینه صفحه (۷۰ تا ۹۰ درصد سطح) |
--surface، --surface-2 | یک و دو پله تیره‌تر از زمینه: پنل، فیلد، ردیف |
--ink | همه متن‌ها و علامت‌های اصلی |
--muted | فقط متن‌های فرعی |
--accent و --accent-ink | دکمه اصلی و متن روی آن |
--field-1 و --field-1-ink | بخش‌های تمام‌رنگ (فوتر، صفحه تأیید سفارش) |
سطح‌ها با یک پله تفاوت رنگ از هم جدا می‌شوند، نه با خط یا سایه.
اندازه‌های تایپ
فقط پنج پله؛ اندازه تازه اضافه نکنید:
| توکن | اندازه | کاربرد |
|---|---|---|
--step-small | ۱۳–۱۴px | زیرنویس، توضیح فیلد، ردیف فرعی |
--step-body | ۱۷–۱۹px | متن اصلی |
--step-lead | ۲۰–۲۶px | جمله پشتیبان، تیتر گروه |
--step-head | ۳۲–۶۴px | تیتر هر بخش |
--step-display | ۴۸–۱۳۶px | تیتر صفحه اول |
فاصله‌ها: --margin (حاشیه دو طرف صفحه، ۱۶ تا ۳۲ پیکسل)، --gutter و --section (فاصله بین بخش‌ها).
سه پوسته
پوسته روی تعیین می‌شود و فقط توکن‌ها را عوض می‌کند:
| پوسته | صفحه | فونت | رنگ |
|---|---|---|---|
card | صفحه اصلی اول و همه صفحه‌های داخلی | دانا | زیتونی روی استخوانی، با تم تاریک |
specimen | صفحه اصلی دوم | ایران‌یکان | سفید، نعنایی، صورتی، دکمه سبز تیره |
poster | صفحه اصلی سوم | کلمه (Black برای تیتر) | مرجانی، زرد، استخوانی، سبز، مشکی |
برای تغییر رنگ برند، مقادیر :root (پوسته card) و :root[data-theme="dark"] را عوض کنید. برای پوسته‌های دیگر، بلوک body[data-skin="…"] همان فایل.
نشانه شکل: لبه زبانه
دکمه‌ها، تب‌های پوشه و عکس‌های اصلی پوسته card دو گوشه بالای پخ‌خورده دارند (--tab). این همان زبانه پوشه‌های صفحه اول است. برای شکل ساده، کلاس .chamfer یا .tabbed را بردارید.
کامپوننت‌های اصلی (pc-site.css)
| کلاس | کاربرد |
|---|---|
.wrap | حاشیه دو طرف صفحه |
.bar | نوار بالا: نام، چند پیوند، سبد |
.btn، .btn--quiet، .btn--block | دکمه اصلی، دکمه دوم، تمام‌عرض |
.textlink | پیوند متنی |
.field، .input، .select، .textarea، .hint، .error | فرم (کادر با حاشیه، پررنگ‌تر هنگام فوکوس) |
.tabs | تب متنی (فعال: aria-selected="true") |
.rows و .row | نام و قیمت روی یک خط، مثل منو |
.acc | پرسش‌ها با |
.qty | کم و زیاد کردن تعداد |
.panel، .empty، .state | پنل، حالت خالی، برچسب وضعیت داخل جدول |
.foot | فوتر: پشت کارت با نوار مغناطیسی |
حرکت
data-riseروی عناصر صفحه اول: هنگام لود بالا می‌آیند (باstyle="--i:1"برای ترتیب).data-revealروی هر چیز دیگر: یک بار هنگام ورود به صفحه ظاهر می‌شود.shutterهمراهdata-revealروی قاب عکس: عکس از پایین باز می‌شود.driftروی عکس: حرکت آرام همراه اسکرول.
بدون جاوااسکریپت، یا وقتی کاربر «کاهش حرکت» را روشن کرده، همه محتوا بی‌حرکت و کامل نمایش داده می‌شود.