/* ========================================================================== سیستم رنگ: حالت شب (پیش‌فرض) و حالت روز (دقیقاً معکوسِ رنگی حالت شب) با تغییر کلاس "light-mode" روی ، تمام رنگ‌های سایت (چون از این متغیرها تغذیه می‌کنند) آنی و کامل عوض می‌شوند. ========================================================================== */ :root { --c-background: 15 19 29; --c-error: 255 180 171; --c-error-container: 147 0 10; --c-inverse-on-surface: 44 48 59; --c-inverse-primary: 109 94 0; --c-inverse-surface: 223 226 241; --c-on-background: 223 226 241; --c-on-error: 105 0 5; --c-on-error-container: 255 218 214; --c-on-primary: 57 48 0; --c-on-primary-container: 114 99 0; --c-on-primary-fixed: 33 27 0; --c-on-primary-fixed-variant: 82 70 0; --c-on-secondary: 77 38 0; --c-on-secondary-container: 67 33 0; --c-on-secondary-fixed: 47 21 0; --c-on-secondary-fixed-variant: 110 57 0; --c-on-surface: 223 226 241; --c-on-surface-variant: 206 198 173; --c-on-tertiary: 86 31 0; --c-on-tertiary-container: 153 78 39; --c-on-tertiary-fixed: 53 16 0; --c-on-tertiary-fixed-variant: 118 51 13; --c-outline: 151 145 122; --c-outline-variant: 75 71 52; --c-primary: 255 252 255; --c-primary-container: 253 224 71; --c-primary-fixed: 255 226 76; --c-primary-fixed-dim: 226 198 45; --c-secondary: 255 183 125; --c-secondary-container: 217 119 7; --c-secondary-fixed: 255 220 195; --c-secondary-fixed-dim: 255 183 125; --c-surface: 15 19 29; --c-surface-bright: 53 57 68; --c-surface-container: 28 31 42; --c-surface-container-high: 38 42 53; --c-surface-container-highest: 49 53 64; --c-surface-container-low: 23 27 38; --c-surface-container-lowest: 10 14 24; --c-surface-dim: 15 19 29; --c-surface-tint: 226 198 45; --c-surface-variant: 49 53 64; --c-tertiary: 255 252 255; --c-tertiary-container: 255 216 199; --c-tertiary-fixed: 255 219 204; --c-tertiary-fixed-dim: 255 182 147; /* رنگ درخشش‌های تزئینی (پس‌زمینه‌ی محیطی، هاله‌ی لوگو، تب فعال) */ --glow-accent: 253 224 71; } html.light-mode { --c-background: 240 236 226; --c-error: 0 75 84; --c-error-container: 108 255 245; --c-inverse-on-surface: 211 207 196; --c-inverse-primary: 146 161 255; --c-inverse-surface: 32 29 14; --c-on-background: 32 29 14; --c-on-error: 150 255 250; --c-on-error-container: 0 37 41; --c-on-primary: 198 207 255; --c-on-primary-container: 141 156 255; --c-on-primary-fixed: 222 228 255; --c-on-primary-fixed-variant: 173 185 255; --c-on-secondary: 178 217 255; --c-on-secondary-container: 188 222 255; --c-on-secondary-fixed: 208 234 255; --c-on-secondary-fixed-variant: 145 198 255; --c-on-surface: 32 29 14; --c-on-surface-variant: 49 57 82; --c-on-tertiary: 169 224 255; --c-on-tertiary-container: 102 177 216; --c-on-tertiary-fixed: 202 239 255; --c-on-tertiary-fixed-variant: 137 204 242; --c-outline: 104 110 133; --c-outline-variant: 180 184 203; --c-primary: 0 3 0; --c-primary-container: 2 31 184; --c-primary-fixed: 0 29 179; --c-primary-fixed-dim: 29 57 210; --c-secondary: 0 72 130; --c-secondary-container: 38 136 248; --c-secondary-fixed: 0 35 60; --c-secondary-fixed-dim: 0 72 130; --c-surface: 240 236 226; --c-surface-bright: 202 198 187; --c-surface-container: 227 224 213; --c-surface-container-high: 217 213 202; --c-surface-container-highest: 206 202 191; --c-surface-container-low: 232 228 217; --c-surface-container-lowest: 245 241 231; --c-surface-dim: 240 236 226; --c-surface-tint: 29 57 210; --c-surface-variant: 206 202 191; --c-tertiary: 0 3 0; --c-tertiary-container: 0 39 56; --c-tertiary-fixed: 0 36 51; --c-tertiary-fixed-dim: 0 73 108; --glow-accent: 2 31 184; } /* رنگ اختصاصیِ آیکون‌های دسته‌بندی: در هر دو حالت روز/شب همیشه طلایی می‌ماند */ :root, html.light-mode { --icon-accent: 253 224 71; } /* رنگ آیکون فلشِ «اسکرول کن»: دقیقاً هم‌رنگ با پیل فعالِ دسته‌بندی‌ها در هر تم (طلایی در شب، همان آبیِ دقیقِ روز) — بر خلاف --icon-accent که ثابت می‌ماند */ :root { --icon-accent-arrow: 253 224 71; } html.light-mode { --icon-accent-arrow: 2 31 184; } /* گذار نرم هنگام تعویض تم بین حالت شب و روز */ html, body, header, nav, main, footer, section, div, span, a, img, button, h1, h2, h3, p { transition: background-color .5s ease, border-color .5s ease, color .35s ease, box-shadow .5s ease; } /* کلاس‌های کمکیِ درخشش که با تم عوض می‌شوند (جایگزین رنگ‌های ثابتِ کهربایی) */ .glow-logo { box-shadow: 0 0 12px rgba(var(--glow-accent), 0.25); } .bg-ambient-page { background-image: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(var(--glow-accent), 0.14), transparent 70%); } .bg-ambient-hero { background-image: radial-gradient(circle at 50% 0%, rgba(var(--glow-accent), 0.14), transparent 60%); } .glow-tab-active { box-shadow: 0 0 15px -3px rgba(var(--glow-accent), 0.4); } /* درخشش ملایم و پیوسته دور قاب عکس‌های واقعی آیتم‌ها (به‌جای آیکون) */ @keyframes photo-glow { 0%, 100% { box-shadow: 0 0 0 rgba(var(--glow-accent), 0); } 50% { box-shadow: 0 0 14px 1px rgba(var(--glow-accent), 0.35); } } .photo-glow { animation: photo-glow 3.6s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .photo-glow { animation: none !important; } } /* ========================================================================== آیکون‌های دسته‌بندی: رنگ طلایی ثابت + انیمیشن تکون‌خوردن ========================================================================== */ .icon-accent { color: rgb(var(--icon-accent)); } /* آیکون فلش «اسکرول کن»: با جاوااسکریپت بین نسخه‌ی طلایی (شب) و آبی (روز) جابه‌جا می‌شود -- دقیقاً هم‌رنگ با پیل فعالِ دسته‌بندی‌ها در هر تم */ .text-scroll-accent { color: rgb(var(--icon-accent-arrow)); } @keyframes icon-wiggle { 0%, 100% { transform: rotate(0deg) scale(1); } 20% { transform: rotate(-12deg) scale(1.1); } 50% { transform: rotate(0deg) scale(1); } 80% { transform: rotate(12deg) scale(1.1); } } /* انیمیشن پیوسته و ملایم برای آیکون‌های همیشه‌دیده (نوار دسته‌بندی و سرتیتر هر بخش) */ .icon-wiggle { display: inline-block; transform-origin: 50% 65%; animation: icon-wiggle 3.4s ease-in-out infinite; } /* انیمیشن فقط با هاور، برای آیکون‌های زیاد و تکراری روی کارت محصولات */ .icon-wiggle-hover { display: inline-block; transform-origin: 50% 65%; } .icon-wiggle-hover:hover, .group:hover .icon-wiggle-hover { animation: icon-wiggle 0.7s ease-in-out; } @media (prefers-reduced-motion: reduce) { .icon-wiggle, .icon-wiggle-hover:hover, .group:hover .icon-wiggle-hover, .scroll-bounce { animation: none !important; } } /* حرکت آرام و کند بالا/پایین برای نشانگر «اسکرول کن» در هدر */ @keyframes scroll-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } } .scroll-bounce { animation: scroll-bounce 2.6s ease-in-out infinite; } /* ========================================================================== استایل‌های پایه ========================================================================== */ html, body { margin: 0; padding: 0; font-family: 'Vazirmatn', 'Plus Jakarta Sans', sans-serif; scroll-behavior: smooth; } body { overscroll-behavior: none; } main > :first-child { margin-top: 0 !important; } main > :last-child { margin-bottom: 0 !important; } /* مخفی کردن اسکرول‌بار (برای نوار دسته‌بندی افقی) */ .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } /* دسترس‌پذیری: نمایان بودن فوکوس کیبورد روی تب‌ها و لینک‌ها */ a:focus-visible, button:focus-visible { outline: 2px solid rgb(var(--c-primary-container)); outline-offset: 2px; border-radius: 9999px; } /* ========================================================================== بخش‌های دسته‌بندی همه‌ی دسته‌ها هم‌زمان روی صفحه و پشت‌سرهم قرار دارند تا با اسکرول عادی دیده شوند. "scroll-margin-top" فاصله‌ی لازم از هدر ثابت + نوار دسته‌بندی چسبان را هنگام پرش با کلیک روی هر دسته رعایت می‌کند، تا عنوان بخش زیر نوارها پنهان نشود. ========================================================================== */ .category-section { scroll-margin-top: 10rem; /* ارتفاع هدر فیکس (۵rem) + نوار دسته‌بندی فیکس (~۵rem) */ } /* ========================================================================== انیمیشن نمایش تدریجی کارت‌ها هنگام اسکرول وضعیت اولیه: محو و کمی پایین‌تر. با ورود به دید (IntersectionObserver در script.js) کلاس "in" اضافه می‌شود و کارت به حالت طبیعی می‌رسد. ========================================================================== */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s cubic-bezier(.22,.61,.36,1), transform .5s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; } .reveal.in { opacity: 1; transform: translateY(0); } /* احترام به تنظیم کاربر برای کاهش انیمیشن */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .category-section.is-active { animation: none !important; } }