/* ========================================================================== Carbon — تم روشن -------------------------------------------------------------------------- این فایل فقط وقتی فعال می‌شود که کلاس .theme-light داشته باشد. بنابراین صفحاتی که این کلاس را ندارند هیچ تغییری نمی‌کنند. برای غیرفعال‌کردن کامل: کافی است در layouts/app.blade.php خط @yield('body_class') را از تگ بردارید. ========================================================================== */ .theme-light { /* ---- پس‌زمینه و سطوح ---- */ --c-bg: #FFFFFF; --c-surface: #F7F9FC; /* کارت‌ها و پنل‌ها */ --c-surface-2: #EEF2F8; /* سطح کمی تیره‌تر */ --c-border: #E3E8F0; --c-border-strong: #CFD8E6; /* ---- سورمه‌ای: جایگزین نوشته‌های سفید ---- */ --c-navy: #14213D; /* عنوان‌ها (جای text-white) */ --c-navy-700: #26365C; /* متن اصلی */ --c-navy-500: #4A5A7A; /* متن ثانویه (جای text-gray-300) */ --c-navy-400: #6B7A96; /* متن کم‌رنگ (جای text-gray-400/500) */ /* ---- نارنجی، سطح ۱: متن و آیکون (ملایم ولی خوانا) ---- */ --c-orange-ink: #C86E28; --c-orange-ink-deep: #B05F1C; /* برای متن ریز */ /* ---- نارنجی، سطح ۲: پاستیلی برای پس‌زمینه و بج ---- */ --c-orange-soft: #F7D3B5; --c-orange-wash: #FDF3EB; --c-orange-border: #EFC29B; /* ---- دکمه‌ها ---- */ --c-orange-btn-1: #E08A4A; --c-orange-btn-2: #C86E28; --c-shadow: rgba(20, 33, 61, 0.08); --c-shadow-lg: rgba(20, 33, 61, 0.12); } /* ========================================================================== ۱. بدنه‌ی صفحه ========================================================================== */ /* تخصص عمداً بالا برده شده (‎html + body[class]‎) تا بر قاعده‌ی عمومی [class*="from-gray-"] در بخش ۴ غلبه کند؛ وگرنه بدنه رنگ سطح می‌گیرد نه سفید. */ html.theme-light body[class] { background: var(--c-bg) !important; background-image: none !important; color: var(--c-navy-700) !important; } /* ========================================================================== ۲. متن‌ها -------------------------------------------------------------------------- نوشته‌های سفید سورمه‌ای می‌شوند — به‌جز جایی که روی پس‌زمینه‌ی رنگی (دکمه‌های نارنجی، پیام‌های موفقیت/خطا و ...) نشسته‌اند و باید سفید بمانند. ========================================================================== */ .theme-light .text-white:not([class*="bg-orange"]):not([class*="from-orange"]):not([class*="via-orange"]):not([class*="bg-amber"]):not([class*="from-amber"]):not([class*="bg-red"]):not([class*="from-red"]):not([class*="bg-green"]):not([class*="from-green"]):not([class*="bg-blue"]):not([class*="from-blue"]):not([class*="bg-purple"]):not([class*="from-purple"]):not([class*="bg-indigo"]):not([class*="from-indigo"]):not([class*="bg-teal"]):not([class*="from-teal"]) { color: var(--c-navy) !important; } /* خاکستری‌های روشن که برای متن روی تم تیره بودند */ .theme-light [class*="text-gray-100"], .theme-light [class*="text-gray-200"], .theme-light [class*="text-gray-300"] { color: var(--c-navy-500) !important; } .theme-light [class*="text-gray-400"], .theme-light [class*="text-gray-500"] { color: var(--c-navy-400) !important; } /* خاکستری‌های تیره روی پس‌زمینه‌ی سفید مشکلی ندارند، فقط هماهنگ می‌شوند */ .theme-light [class*="text-gray-600"] { color: var(--c-navy-400) !important; } .theme-light [class*="text-gray-700"], .theme-light [class*="text-gray-800"], .theme-light [class*="text-gray-900"] { color: var(--c-navy-700) !important; } .theme-light [class*="placeholder-gray"]::placeholder { color: var(--c-navy-400) !important; opacity: 1; } /* ========================================================================== ۳. نارنجی — سطح ۱ (متن و آیکون) ========================================================================== */ .theme-light [class*="text-orange-"]:not([class*="bg-orange"]):not([class*="from-orange"]):not([class*="via-orange"]):not([class*="bg-amber"]):not([class*="from-amber"]), .theme-light [class*="text-amber-"]:not([class*="bg-orange"]):not([class*="from-orange"]):not([class*="bg-amber"]):not([class*="from-amber"]) { color: var(--c-orange-ink) !important; } /* متن ریز کمی تیره‌تر تا خوانا بماند */ .theme-light .text-xs[class*="text-orange-"], .theme-light .text-sm[class*="text-orange-"] { color: var(--c-orange-ink-deep) !important; } /* حالت hover روی لینک‌ها */ .theme-light [class*="hover:text-orange"]:hover, .theme-light [class*="hover:text-white"]:hover { color: var(--c-orange-ink-deep) !important; } .theme-light .group:hover [class*="group-hover:text-orange"], .theme-light .group:hover [class*="group-hover:text-white"] { color: var(--c-orange-ink-deep) !important; } /* ========================================================================== ۴. پس‌زمینه‌ها ========================================================================== */ .theme-light [class*="bg-gray-700"], .theme-light [class*="bg-gray-800"], .theme-light [class*="bg-gray-900"], .theme-light [class*="bg-gray-950"], .theme-light [class*="bg-slate-700"], .theme-light [class*="bg-slate-800"], .theme-light [class*="bg-slate-900"] { background-color: var(--c-surface) !important; } .theme-light [class*="bg-gray-600"], .theme-light [class*="bg-gray-300"] { background-color: var(--c-surface-2) !important; } /* گرادیان‌های خاکستری → سطح یکدست روشن */ .theme-light [class*="from-gray-"], .theme-light [class*="from-slate-"] { background-image: none !important; background-color: var(--c-surface) !important; } /* پس‌زمینه‌های نارنجی کم‌رنگ → پاستیلی */ .theme-light [class*="bg-orange-900"], .theme-light [class*="bg-orange-800"] { background-color: var(--c-orange-wash) !important; } /* ========================================================================== ۵. نارنجی — سطح ۲ (دکمه‌ها و گرادیان‌ها) ========================================================================== */ .theme-light [class*="from-orange-"] { --tw-gradient-from: var(--c-orange-btn-1) !important; --tw-gradient-stops: var(--c-orange-btn-1), var(--tw-gradient-to, var(--c-orange-btn-2)) !important; } .theme-light [class*="to-orange-"] { --tw-gradient-to: var(--c-orange-btn-2) !important; } .theme-light [class*="via-orange-"] { --tw-gradient-via: var(--c-orange-btn-1) !important; } /* -------------------------------------------------------------------------- تفاوت دکمه و بج: گرادیان بدون شفافیت = دکمه‌ی توپر با متن سفید. گرادیانی که شفافیت دارد (مثل from-orange-900/20) = بج یا چیپ نرم، که باید پاستیلی شود با متن نارنجی تیره. -------------------------------------------------------------------------- */ /* ۵-۱ | دکمه‌های توپر */ .theme-light [class*="from-orange-"][class*="to-orange-"]:not([class*="from-orange-900/"]):not([class*="from-orange-800/"]):not([class*="from-orange-700/"]):not([class*="from-orange-600/"]):not([class*="from-orange-500/"]) { background-image: linear-gradient(to left, var(--c-orange-btn-1), var(--c-orange-btn-2)) !important; color: #FFFFFF !important; } .theme-light [class*="from-orange-"][class*="to-orange-"]:not([class*="from-orange-900/"]):not([class*="from-orange-800/"]):not([class*="from-orange-700/"]):not([class*="from-orange-600/"]):not([class*="from-orange-500/"]):hover { background-image: linear-gradient(to left, var(--c-orange-btn-2), var(--c-orange-ink-deep)) !important; } .theme-light [class*="from-orange-"][class*="to-orange-"]:not([class*="from-orange-900/"]):not([class*="from-orange-800/"]):not([class*="from-orange-700/"]):not([class*="from-orange-600/"]):not([class*="from-orange-500/"]) * { color: #FFFFFF !important; } /* ۵-۲ | بج و چیپ‌های نرم */ .theme-light [class*="from-orange-900/"], .theme-light [class*="from-orange-800/"], .theme-light [class*="from-orange-700/"], .theme-light [class*="from-orange-600/"], .theme-light [class*="from-orange-500/"] { background-image: none !important; background-color: var(--c-orange-wash) !important; color: var(--c-orange-ink) !important; } .theme-light [class*="from-orange-900/"] *, .theme-light [class*="from-orange-800/"] *, .theme-light [class*="from-orange-700/"] *, .theme-light [class*="from-orange-600/"] *, .theme-light [class*="from-orange-500/"] * { color: var(--c-orange-ink) !important; } /* ۵-۳ | پس‌زمینه‌ی نارنجی توپر بدون گرادیان (مثل bg-orange-600 روی دکمه‌ها). اینجا عمداً از انتخابگر کلاس دقیق استفاده شده نه [class*=]، چون «bg-orange-500» زیررشته‌ی «bg-orange-50» است و با تطبیق زیررشته‌ای قاطی می‌شوند. ضمناً کلاسِ شفاف (bg-orange-600/20) نام کلاس متفاوتی دارد و اینجا نمی‌افتد. */ .theme-light .bg-orange-500, .theme-light .bg-orange-600, .theme-light .bg-orange-700, .theme-light .bg-orange-800 { background-color: var(--c-orange-btn-2) !important; color: #FFFFFF !important; } .theme-light .bg-orange-500 *, .theme-light .bg-orange-600 *, .theme-light .bg-orange-700 *, .theme-light .bg-orange-800 * { color: #FFFFFF !important; } .theme-light [class*="hover:bg-orange-"]:hover { background-color: var(--c-orange-ink-deep) !important; } /* نارنجی‌های از پیش روشن → همان پاستیلی پالت */ .theme-light .bg-orange-50, .theme-light .bg-orange-100, .theme-light .bg-orange-200 { background-color: var(--c-orange-wash) !important; color: var(--c-orange-ink) !important; } /* چیپ‌های آیکون در سایر رنگ‌ها (آبی، سبز و ...) نیز نرم می‌شوند */ .theme-light [class*="from-blue-600/"], .theme-light [class*="from-green-600/"], .theme-light [class*="from-purple-600/"], .theme-light [class*="from-red-600/"] { background-image: none !important; background-color: var(--c-surface-2) !important; } /* ========================================================================== ۶. حاشیه‌ها ========================================================================== */ .theme-light [class*="border-gray-"], .theme-light [class*="border-slate-"] { border-color: var(--c-border) !important; } .theme-light [class*="border-orange-"] { border-color: var(--c-orange-border) !important; } .theme-light [class*="divide-gray-"] > * + * { border-color: var(--c-border) !important; } .theme-light [class*="hover:border-orange"]:hover { border-color: var(--c-orange-ink) !important; } /* ========================================================================== ۷. کلاس‌های سفارشی قالب ========================================================================== */ .theme-light .glass-effect { background: rgba(255, 255, 255, 0.85) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--c-border) !important; box-shadow: 0 1px 3px var(--c-shadow); } .theme-light .gradient-text { background: linear-gradient(90deg, #D98B4A, var(--c-orange-ink), #A85A1E) !important; background-size: 200% auto !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; } .theme-light .gradient-border { background: linear-gradient(15deg, #FFFFFF, var(--c-surface)) padding-box, linear-gradient(45deg, var(--c-orange-soft), var(--c-orange-border)) border-box !important; border: 1px solid transparent !important; } .theme-light .hero-section { background: linear-gradient(160deg, var(--c-orange-wash) 0%, #FFFFFF 55%) !important; } .theme-light .input-glow:focus { box-shadow: 0 0 0 3px rgba(200, 110, 40, 0.18) !important; } /* ========================================================================== ۸. سایه‌ها، انیمیشن‌ها و اسکرول‌بار ========================================================================== */ .theme-light .shadow-lg, .theme-light .shadow-xl, .theme-light .shadow-2xl { box-shadow: 0 8px 24px var(--c-shadow) !important; } .theme-light .hover-card-effect:hover, .theme-light .animate-card-hover { box-shadow: 0 20px 40px var(--c-shadow-lg) !important; } .theme-light .animate-glow-pulse { animation: none !important; box-shadow: 0 0 0 3px var(--c-orange-wash) !important; } .theme-light::-webkit-scrollbar-track, .theme-light body::-webkit-scrollbar-track { background: var(--c-surface-2) !important; } .theme-light::-webkit-scrollbar-thumb, .theme-light body::-webkit-scrollbar-thumb { background: linear-gradient(to bottom, var(--c-orange-btn-1), var(--c-orange-btn-2)) !important; } .theme-light::-webkit-scrollbar-thumb:hover, .theme-light body::-webkit-scrollbar-thumb:hover { background: linear-gradient(to bottom, var(--c-orange-btn-2), var(--c-orange-ink-deep)) !important; } /* ========================================================================== ۹. فرم‌ها ========================================================================== */ .theme-light input, .theme-light textarea, .theme-light select { background-color: #FFFFFF !important; border-color: var(--c-border-strong) !important; color: var(--c-navy-700) !important; } .theme-light input:focus, .theme-light textarea:focus, .theme-light select:focus { border-color: var(--c-orange-ink) !important; outline: none; } /* ========================================================================== ۱۰. کلید تم روشن / تیره -------------------------------------------------------------------------- قواعد بدون پیشوند .theme-light عمداً در هر دو حالت اعمال می‌شوند، چون خودِ کلید در تم تیره هم دیده می‌شود. ========================================================================== */ .theme-switch { cursor: pointer; -webkit-tap-highlight-color: transparent; } .theme-switch:focus-visible { outline: 2px solid var(--c-orange-btn-1, #E08A4A); outline-offset: 2px; } .theme-switch .theme-switch-knob { transition: transform .25s ease, background .25s ease; will-change: transform; } /* در RTL دستگیره از سمت راست شروع می‌شود و در تم روشن به چپ می‌لغزد. مسافت = عرض ریل (۳.۵rem) − عرض دستگیره (۱.۵rem) − دو برابر فاصله (۰.۱۲۵rem) */ .theme-light .theme-switch .theme-switch-knob { transform: translateX(-1.75rem); } /* ظاهر ریل در تم روشن. باید بعد از قواعد عمومی bg-gray و border-gray بیاید تا در برابری تخصص، ترتیب به نفع این قاعده تمام شود. */ .theme-light .theme-switch { background-color: var(--c-surface-2) !important; border-color: var(--c-border-strong) !important; } .theme-light .theme-switch:hover { border-color: var(--c-orange-ink) !important; } .theme-light .theme-switch .theme-switch-knob { background-image: linear-gradient(to bottom left, var(--c-orange-btn-1), var(--c-orange-btn-2)) !important; color: #FFFFFF !important; }