/* اصلاح نهایی برای نمایش کامل عنوان محصولات و ارتفاع کارت (ترکیب کد شما و تقویت) */ /* 1. اعمال ویژگی‌های نمایش کامل متن روی عنوان */ .product-box .title, .title.text-14px.\!font-medium.text-p-card-title.text-title.text-center.mt-6.px-2 { /* لغو محدودیت تک خطی */ white-space: normal !important; /* اجازه شکستن خطوط */ text-wrap: wrap !important; white-space: pre-line !important; /* لغو سه‌نقطه و برش */ overflow: visible !important; text-overflow: unset !important; display: block !important; height: auto !important; /* ارتفاع باید انعطاف پذیر باشد */ } /* 2. اصلاح محفظه والد برای انعطاف‌پذیری ارتفاع */ .product-box .h-\[55px\] { display: flex !important; flex-direction: column !important; justify-content: space-around !important; /* کاهش min-height برای کوتاه‌تر شدن کارت */ min-height: 80px !important; /* 80px به جای 120px قبلی */ height: auto !important; /* تضمین انعطاف‌پذیری ارتفاع */ } /* برای نوار اصلی و زیرمنوها */ .bg-menu-box, .bg-menu-bg { /* رنگ ملایم شما */ background-color: #E0E5E9 !important; } /* برای متن لینک‌ها */ .nav_group-item span, .nav_group-item a, .waterfall_menu-item-link { color: #1F2937 !important; /* آبی نفتی تیره */ } /* برای پس زمینه هاور (برای لغو آبی شدید قبلی) */ .nav_group-item:hover, .waterfall_menu-item:hover { background-color: #CCD6DF !important; /* رنگ ملایم برای هاور */ box-shadow: none !important; } /* هدف قرار دادن شبه‌عنصر که عامل اصلی مشکل بود */ .nav_group-item::before, .nav_group-item:hover::before { background-color: #CCD6DF !important; } body { background-color: #F5F5F5 !important; /* Sets the background to pure white */ } h2.text-blog-card-title { white-space: normal !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; } .text-footer-descriptions-title { white-space: normal !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; } .text-blog-item-title { white-space: normal !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; } text-badge-title { max-width: none !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; height: auto !important; } .text-single-service-title { white-space: normal !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* Unique selector to ensure override */ h3[data-v-ab0ca756].incredible__offer--name { /* IMPORTANT: This is to fix the ellipsis issue. white-space: normal allows text to wrap. */ white-space: normal !important; overflow: visible !important; text-overflow: clip !important; } body { background-color: #F5F5F5 !important; /* Sets the background to pure white */ } .bg-p-card-bg { /* Set rounded corners (iOS Style) */ border-radius: 30px !important; /* Balanced Padding: Reduced from 25px to 18px */ padding: 18px !important; /* Safe and smooth transition time */ transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out, border-radius 0.3s ease-in-out; /* Minimal base shadow */ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important; /* Remove borders and align text to right */ border: none !important; text-align: right !important; } .bg-p-card-bg:hover { /* Safe hover motion */ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important; transform: translateY(-1px); } /* Styling for the product title */ .title { font-weight: 700 !important; font-size: 15px !important; /* Slightly reduced font size */ text-align: right !important; padding-right: 0 !important; padding-left: 0 !important; } /* افزایش فاصله بالا و پایین نوار منو */ .bg-menu-box { margin-top: 40px !important; /* افزایش فاصله از بالا */ margin-bottom: 40px !important; /* افزایش فاصله از پایین (برای حل مشکل چسبیدگی به استوری) */ } /* 1. اصلاح ارتفاع نگهدارنده عنوان محصول */ /* کاهش حداقل ارتفاع برای کوتاه‌تر شدن کارت */ .h-\[55px\], .h-14, .product-box > a > div.h-\[55px\], .product-box > a > div.h-14 { height: auto !important; /* ارتفاع بهینه برای 3 تا 4 خط متن */ min-height: 80px !important; /* تراز کردن محتوا به سمت بالا */ justify-content: flex-start !important; align-items: flex-start !important; } /* 2. کاهش فاصله بالای عنوان محصول (رفع mt-6 Tailwind) */ .h-\[55px\] > .title, .product-box > a > div.h-\[55px\] > div.title { margin-top: 15px !important; /* کاهش فاصله از 24px به 5px */ } /* کاهش فاصله بالای عنوان محصول (رفع mt-6) */ .product-box .title { /* مقدار را به 12 یا 15 پیکسل افزایش دهید تا فاصله بیشتری ایجاد شود */ margin-top: 15px !important; padding: 0 5px !important; } /* 1. اعمال سایه بر محفظه اصلی اسلایدر تصویر در صفحه جزئیات */ .swiper.swiper-initialized.swiper-horizontal.swiper-rtl.relative.h-full.splide__slider--config.swiper-backface-hidden { overflow: hidden !important; background-color: #FFFFFF !important; /* ************* گرد کردن لبه‌ها ************* */ border-radius: 18px !important; /* مقدار را برای گردی بیشتر افزایش دادیم */ /* ******************************************* */ box-shadow: 0 15px 20px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -5px rgba(0, 0, 0, 0.04) !important; padding: unset !important; } /* 1. طراحی دکمه "نمایش محصولات" به سبک رنگی ملایم (Primary Light) */ /* حالت عادی: پس‌زمینه آبی نفتی ملایم */ .bg-emp-state-btn { background-color: #2F3A49 !important; /* رنگ آبی نفتی ملایم تر */ color: white !important; /* متن سفید */ border: none !important; /* حذف حاشیه */ box-shadow: none !important; } /* تضمین رنگ متن در حالت عادی */ .text-emp-state-btn-title { color: white !important; } /* حالت هاور (رنگ اصلی و پررنگ‌تر) */ .hover\:bg-emp-state-btn-hover:hover { background-color: #1F2937 !important; /* آبی نفتی اصلی و پررنگ */ color: white !important; /* نیازی به تغییر border-color نیست چون border حذف شده است */ } /* حالت فعال/کلیک (رنگ اصلی و پررنگ) */ .bg-emp-state-btn:active, .bg-emp-state-btn:focus { background-color: #1F2937 !important; /* آبی نفتی اصلی و پررنگ */ color: white !important; } /* 1. تبدیل کادر تصویر محصول به مربع (استفاده از تکنیک Aspect Ratio) */ /* هدف قرار دادن قوی‌ترین کلاس محفظه تصویر */ .block.relative.w-full.min-h-\[250px\].md\:min-h-\[400px\].overflow-hidden.bg-white.rounded-primary { /* ************* بخش حیاتی برای مربع شدن ************* */ /* حذف تنظیمات ارتفاع (Height) پیش‌فرض Tailwind */ height: 0 !important; min-height: 0 !important; /* استفاده از Padding-Bottom برای تنظیم نسبت 1:1 (مربع) */ /* Padding-Bottom: 100% برابر با عرض (Width) می‌شود */ padding-bottom: 100% !important; /* ************************************************* */ /* اطمینان از قرارگیری تصویر در مرکز و درون کادر */ display: flex !important; justify-content: center !important; align-items: center !important; } /* 2. اصلاح تصویر داخلی برای استفاده از فضای مربع جدید */ /* تصویر داخلی باید absolute باشد تا نسبت ابعاد را لغو نکند و کل فضای مربع را بپوشاند */ .block.relative.w-full.min-h-\[250px\].md\:min-h-\[400px\].overflow-hidden.bg-white.rounded-primary img { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; object-fit: contain !important; /* حفظ نسبت ابعاد تصویر در کادر */ } /* ======================================================= */ /* === 1. تعریف رنگ‌های گرادیانت دکمه‌ها و اضافه کردن کلاس‌های جدید === */ /* ======================================================= */ :root { /* تعریف رنگ‌های گرادیانت */ --gradient-start: #2e71da; /* آبی آسمانی */ --gradient-end: #20aec4; /* فیروزه‌ای */ } /* لیست تمام دکمه‌هایی که باید گرادیانت بگیرند */ .bg-p-card-btn, /* مشاهده محصول (کارت‌ها) */ .bg-search-btn, /* دکمه جستجو */ .bg-emp-state-btn, /* نمایش محصولات */ .bg-single-addtocart-btn, /* افزودن به سبد خرید */ .bg-primary-400, /* به من اطلاع دهید */ .bg-cart-btn { /* <<--- کلاس جدید: دکمه ثبت و مرحله بعد */ /* لغو پس‌زمینه تک‌رنگ قبلی و اعمال گرادیانت */ background: none !important; background-image: linear-gradient(to left, var(--gradient-start), var(--gradient-end)) !important; /* تنظیمات بصری */ color: white !important; border: none !important; box-shadow: 0 4px 10px rgba(46, 113, 218, 0.3) !important; transition: all 0.2s ease-in-out !important; } /* ======================================================= */ /* === 2. اعمال گرادیانت بر دکمه‌ها (حالت هاور و فعال) === */ /* ======================================================= */ /* هدف قرار دادن کلاس‌های هاور پیش‌فرض و همچنین خود کلاس دکمه */ .hover\:bg-p-card-btn-hover:hover, .bg-search-btn:hover, .hover\:bg-emp-state-btn-hover:hover, .hover\:bg-single-addtocart-btn-hover:hover, .hover\:bg-primary-500:hover, .bg-p-card-btn:hover, .bg-emp-state-btn:hover, .bg-single-addtocart-btn:hover, .bg-primary-400:hover, .hover\:bg-cart-btn-hover:hover, /* <<--- کلاس جدید هاور */ .bg-cart-btn:hover { /* <<--- کلاس جدید هاور */ /* گرادیانت معکوس برای افکت هاور */ background-image: linear-gradient(to right, var(--gradient-end), var(--gradient-start)) !important; color: white !important; /* افکت کمی بالا آمدن */ transform: translateY(-1px) !important; box-shadow: 0 6px 12px rgba(46, 113, 218, 0.4) !important; } /* حالت فعال/کلیک (Active/Focus State) */ .bg-single-addtocart-btn:active, .bg-single-addtocart-btn:focus, .bg-emp-state-btn:active, .bg-emp-state-btn:focus, .bg-primary-400:active, .bg-primary-400:focus, .bg-p-card-btn:active, .bg-p-card-btn:focus, .bg-search-btn:active, .bg-search-btn:focus, .bg-cart-btn:active, .bg-cart-btn:focus { /* <<--- کلاس جدید فعال */ background-image: linear-gradient(to right, var(--gradient-end), var(--gradient-start)) !important; transform: none !important; box-shadow: 0 2px 5px rgba(46, 113, 218, 0.5) inset !important; } /* ======================================================= */ /* === 3. تضمین رنگ متن دکمه‌ها === */ /* ======================================================= */ .text-p-card-btn-title, .text-search-btn-title, .text-emp-state-btn-title, .text-single-addtocart-btn-title, .text-base-50, .text-cart-btn-title, /* <<--- کلاس جدید متن عادی */ .hover\:text-cart-btn-title-hover:hover { /* <<--- کلاس جدید متن هاور */ color: white !important; } ----------------------------------------- /* ======================================================= */ /* === رفع سه‌نقطه (Truncate) و حذف محدودیت عرض بج‌های دسته‌بندی مقالات (نهایی) === */ /* ======================================================= */ /* هدف قرار دادن قوی تگ که شامل کلاس bg-badge-bg و truncate است */ span.block.truncate.bg-badge-bg { /* 1. لغو محدودیت عرض */ max-width: none !important; width: auto !important; /* 2. لغو دستورالعمل سه‌نقطه (Truncate) */ overflow: visible !important; text-overflow: clip !important; /* 3. اجازه شکستن خط (اگر متن خیلی طولانی است) */ white-space: normal !important; } /* هدف قرار دادن کلاس max-w-[120px] برای اطمینان بیشتر */ .max-w-\[120px\] { max-width: none !important; width: auto !important; }