CSS و استایل

لایه‌های CSS

هر صفحه معمولاً این لایه‌ها را به ترتیب لود می‌کند:

1. output.css          ← Tailwind utilities
2. swiper-bundle.min.css
3. novira.css          ← پایه و کامپوننت‌های ds-*
4. novira-support.css  ← ویجت پشتیبانی (اکثر صفحات)
5. novira-XXX.css      ← استایل مخصوص صفحه

قرارداد نام‌گذاری: پیشوند ds-*

تمام کامپوننت‌های سفارشی با ds- شروع می‌شوند:

کلاس	کاربرد
`ds-page`	wrapper اصلی body
`ds-container`	عرض max و padding
`ds-header`	هدر سایت
`ds-logo`	لوگو
`ds-nav-link`	لینک منو
`ds-product-card`	کارت محصول
`ds-footer`	فوتر
`ds-btn`	دکمه

نکته: هنگام شخصی‌سازی، کلاس‌های ds-* را حفظ کنید تا JS و layout نشکند.

متغیرهای CSS (:root)

در novira.css:

:root {
  --ds-brand: #EF4056;
  --ds-brand-dark: #D32F45;
  --ds-green: #00A049;
  --ds-text: #3F3F3F;
  --ds-text-secondary: #424750;
  --ds-text-muted: #81858B;
  --ds-border: #E0E0E2;
  --ds-bg: #F5F5F5;
}

برای تغییر تم کلی، همین متغیرها را ویرایش کنید.

تم‌های صفحه

مارکت اصلی (`index.html`)

کلاس body: ds-page
هدر: ds-header--market
نوار منو با گرادیان برند

پوشاک (`fashion.html`)

کلاس body: ds-page ds-page--fashion
هدر: ds-header-fashion--rich
برند UI: نوویراستایل
فایل: novira-fashion.css

سوپرمارکت (`fresh.html`)

کلاس body: ds-page ds-page--fresh
تم سبز
فایل: novira-fresh.css

بازار (`bazaar.html`)

کلاس body: ds-page ds-page--bazaar
هدر: ds-header-bazaar--rich
تم بنفش (#6929C4)
فایل: novira-bazaar.css

Tailwind (output.css)

کلاس‌های utility در HTML استفاده می‌شوند:

برای افزودن utility جدید نیاز به rebuild Tailwind دارید. در غیر این صورت از CSS سفارشی در novira.css استفاده کنید.

Swiper

HTML

...

Thumbnail

کلاس .thumbnail با data-index برای کنترل اسلاید — منطق در main.js.

RTL

html dir="rtl" lang="fa"
margin/padding با logical properties یا overrideهای RTL در CSS
اسلایدر Swiper: جهت پیش‌فرض برای RTL در تنظیمات JSON قابل تنظیم است

رسپانسیو

Breakpoints رایج در CSS:

موبایل: تا 640px — منوی همبرگری، drawer
تبلت: 641–1024px
دسکتاپ: 1025px+

کلاس‌های کمکی Tailwind مثل md:, lg: در HTML استفاده شده‌اند.

افزودن استایل صفحه جدید

فایل assets/css/novira-mypage.css بسازید
در head صفحه لینک دهید (بعد از novira.css)
از پیشوند ds- برای کامپوننت‌های جدید استفاده کنید