a, b, li, p, strong { color: inherit } .bghover_c3:hover, .bghover_c4:hover { transition: background-color .5s,color .3s } .bottom-header .main-menu-list li, .top-header .top-header-menu li { margin-left: 0; display: inline-block } .img-fluid, .img-fluid img { object-fit: cover; object-position: center center } /*@font-face { font-family: WPGFont; src: url("/assets/fonts/YekanBakhFaNum-Light.woff") format("woff"); font-style: normal; font-weight: 200 }*/ @font-face { font-family: WPGFont; src: url("/assets/fonts/IRANYekanWPGNumFa.woff") format("woff"); font-style: normal; font-weight: 400 } @font-face { font-family: WPGFont; src: url("/assets/fonts/IRANYekanWPGNumFa.woff") format("woff"); font-style: normal; font-weight: 700 } @font-face { font-family: WPGFont; src: url("/assets/fonts/IRANYekanWPGNumFa.woff") format("woff"); font-style: normal; font-weight: 900 } /*@font-face { font-family: WPGFont; src: url("/assets/fonts/YekanBakhFaNum-ExtraBold.woff") format("woff"); font-style: normal; font-weight: 900 }*/ :root { --C0: #ffffff; --C1: #294a41; --C2: #e0fbf4; --C3: #08a379; --C4: #d4f8e8; --C5: #86ccb8; --C6: #052a14; --C7: #021f11; --C8: #e0ffef; --C9: #05382a; --C10: #07281fed; --selection-bg: var(--C1); --selection-text: var(--C2); --bs-body-bg: #e9fff9 !important; --bs-secondary-bg: #95cdb0 } body { overflow-x: clip; font-family: WPGFont; direction: rtl; font-size: 90% !important; color: var(--C6); min-height: 100vh; display: flex; flex-direction: column; } #preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--C2); z-index: 99999999; display: flex; justify-content: center; align-items: center; transition: opacity .5s,visibility .5s } .loader-content { text-align: center; font-size: 1.2em; color: var(--C1); display: flex; flex-direction: column; align-items: center } .spinner { border: 4px solid var(--C2); border-left-color: var(--C1); border-radius: 50%; width: 30px; height: 30px; animation: 1s linear infinite spin; margin-top: 10px } .no-right-radius, .no-top-radius { border-top-right-radius: unset !important } .no-left-radius, .no-top-radius { border-top-left-radius: unset !important } .no-bottom-radius, .no-right-radius { border-bottom-right-radius: unset !important } .no-bottom-radius, .no-left-radius { border-bottom-left-radius: unset !important } .swiper-button-next, .swiper-button-prev, .text-primary { color: var(--C1) !important } .bg-primary { background-color: var(--C1) !important; color: var(--C2) !important } /* بج/پس‌زمینه قرمز: متن سفید برای خوانایی */ .bg-danger { color: #fff !important; } .bg-danger a { color: #fff !important; } .bg-light, .bg-lightsilver { color: var(--C6) !important } .bg-primary .btn-close { --bs-btn-close-color: whitesmoke; background-color: #fff; position: absolute; left: 20px; top: 20px } .main { background-color: var(--C2); padding-top: 118px; flex: 1 0 auto; } img[alt] { color: transparent; font-size: 0; } @media (max-width: 767.98px) { .main { padding-top: 65px } } @media (max-width: 1200px) { .container, .container-lg, .container-md, .container-sm, .container-xl { max-width: 95%; } } input[type=email]:focus, input[type=tel]:focus, input[type=text]:focus, textarea:focus { border-color: var(--C1) !important; box-shadow: unset; outline: 0 } /* بدون حلقه/سایهٔ :focus-visible (Bootstrap/مرورگر). :focus جداست و برای فیلدها همان قوانین بالا اعمال می‌شود. */ *:focus-visible { outline: none !important; box-shadow: none !important; outline-offset: 0 } .audiobox, .main-menu-list, .search-container, img.lazy, img.lazy2, img.lazy3, img.lazy4, img.lazy5 { position: relative } img.lazy2::before, img.lazy3::before, img.lazy4::before, img.lazy5::before, img.lazy::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg,#534a4a00,rgb(181 181 181 / 40%),#43333300); animation: 1.5s infinite shimmer; z-index: 1 } .audio-player-container.fixed-bottom-player h5, img.lazy.loaded::before, img.lazy2.loaded::before, img.lazy3.loaded::before, img.lazy4.loaded::before, img.lazy5.loaded::before { display: none } img.lazy6 { color: transparent !important; font-size: 0 !important } img.lazy6::after, img.lazy6::before { content: none } .full-height-slider { height: auto; max-height: 100vh } /* بک‌دراپ مودال/آف‌کنواس — فید نرم + بلر (مثل قبلی، با انیمیشن باز/بسته) */ .modal-backdrop, .offcanvas-backdrop { --bs-backdrop-opacity: 1; background-color: #000000a3; } .modal-backdrop.fade, .offcanvas-backdrop.fade { opacity: 0; backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); transition: opacity 0.35s ease, backdrop-filter 0.35s ease, -webkit-backdrop-filter 0.35s ease; } .modal-backdrop.show, .offcanvas-backdrop.show { opacity: 1; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); isolation: isolate; transform: translateZ(0); } @media (max-width: 992px) { .modal-backdrop.fade, .offcanvas-backdrop.fade { opacity: 0; backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); transition: opacity 0.42s ease-in-out, backdrop-filter 0.42s ease-in-out, -webkit-backdrop-filter 0.42s ease-in-out; } .modal-backdrop.show, .offcanvas-backdrop.show { opacity: 1; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } } @media (prefers-reduced-motion: reduce) { .modal-backdrop.fade, .offcanvas-backdrop.fade { transition: none; } } .main-slider, .top-section { height: 100vh } .main-slider.content-slider-hero, .content-slider-bottom.content-slider-hero { height: var(--slider-height-desktop, 300px) } @media (max-width: 767px) { .main-slider.content-slider-hero, .content-slider-bottom.content-slider-hero { height: var(--slider-height-mobile, 200px) } /* فاصله از لبه در موبایل برای اسلایدر بالا و پایین (هرجا از همین مدل استفاده شود) */ .content-slider-hero.main-slider-wrapper { padding-left: calc(var(--bs-gutter-x) * .5); padding-right: calc(var(--bs-gutter-x) * .5); } } .content-slider-hero.main-slider-wrapper { border-radius: 10px; overflow: hidden; } /* اسلایدر پایین: والد لودر هم border-radius و overflow تا گوشهٔ پایین هم گرد شود */ .site-loader-wrap:has(.content-slider-bottom-wrapper) { border-radius: 10px; overflow: hidden; } .content-slider-hero .swiper-slide { height: 100%; display: flex; align-items: stretch } .content-slider-hero .img-fluid, .content-slider-hero .content-slider-video-wrap { width: 100%; height: 100%; min-height: 100%; display: block } .content-slider-hero .content-slider-video-wrap { position: relative } .content-slider-hero .img-fluid img { width: 100%; height: 100%; object-fit: cover; transition: opacity .25s ease; } .content-slider-hero .swiper-slide:hover .img-fluid img { opacity: .9; } .content-slider-hero .background-video { transition: opacity .25s ease; } .content-slider-hero .swiper-slide:hover .background-video { opacity: .9; } /* گردی گوشه‌ها روی خود تصویر/ویدیو/محتوای اسلاید */ .content-slider-hero .img-fluid, .content-slider-hero .img-fluid img, .content-slider-hero .content-slider-video-wrap, .content-slider-hero .background-video, .content-slider-hero .content-slider-html, .content-slider-hero .content-slider-placeholder { border-radius: 10px; } .content-slider-hero .background-video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; } /* ویدیو اسلایدر: بدون صدا، اتوپلی، بدون نمایش کنترل‌ها */ .content-slider-hero .background-video::-webkit-media-controls { display: none !important; } .content-slider-hero .background-video::-webkit-media-controls-enclosure { display: none !important; } .content-slider-hero .background-video::-webkit-media-controls-panel { display: none !important; } .content-slider-hero .background-video::-webkit-media-controls-play-button { display: none !important; } .content-slider-hero .background-video::-webkit-media-controls-start-playback-button { display: none !important; } .content-slider-hero .content-slider-html { width: 100%; height: 100%; overflow: auto } /* پلیس‌هولدر اسلایدر وقتی تصویر/ویدیو نیست */ .content-slider-hero .content-slider-placeholder { width: 100%; height: 100%; min-height: 100%; display: flex; align-items: center; justify-content: center; background: var(--bs-light, #f8f9fa); border: 2px dashed rgba(0,0,0,.15); color: var(--bs-secondary, #6c757d); } .content-slider-hero .content-slider-placeholder-inner { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .content-slider-hero .content-slider-placeholder i { font-size: 2.5rem; opacity: 0.7; } .content-slider-hero .content-slider-placeholder-text { font-size: 0.9rem; } #preloader.hide { opacity: 0; visibility: hidden } .hide { display: none !important } /* خنثی‌سازی استایل .ratio > * بوت‌استرپ — در این پروژه از ratio استفاده نمی‌شود */ .ratio > * { position: static !important; width: auto !important; height: auto !important; top: auto !important; left: auto !important; } :hover { transition: background-color .3s ease-in-out } .ltr { direction: ltr } .footer, .header, .header .col-md-6.text-center .search-box .input-group, .rtl { direction: rtl } a { text-decoration: none } .bottom-header .search-icon .btn-link:hover, hr { color: var(--C5) } p { line-height: 1.8rem; font-size: 1rem } h2 { line-height: 2.3rem } .header-bg h2 { line-height: 1.8rem !important } .bottom-header .col-md-3, .text-right { text-align: right !important } .text-left { text-align: left !important } .text-center { text-align: center !important } .text-justify { text-align: justify !important } .float-left { float: left !important } .float-right { float: right !important } .bg-light { background-color: var(--C2) !important } .bg-lightsilver { background-color: var(--C8) !important } .bg-silver { background-color: var(--C4); color: var(--C6) } .about-bg, .bg-black, .bg-dark, .bg-gray, .blog-bg, .chemical-petrochemical-bg, .contact-bg, .faq-bg, .food-and-pharmaceutical-bg, .header-bg, .metals-and-mining-bg, .oil-and-gas-bg, .power-generation-bg, .text-light, .water-and-wastewater-bg { color: var(--C2) !important } .bg-gray { background-color: var(--C3) !important } .bg-dark { background-color: var(--C7) !important } .bg-black { background-color: var(--C6) !important } /* بردکرامب — پایه و موبایل */ .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0; } .breadcrumb-item + .breadcrumb-item::before { float: unset !important; color: var(--C4) !important } .breadcrumb-item.active { color: var(--C5) !important } @media (max-width: 767.98px) { .breadcrumb { font-size: 0.8125rem; padding: 0.5rem 0; margin-bottom: 0.75rem; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .breadcrumb::-webkit-scrollbar { display: none; } .breadcrumb-item { white-space: nowrap; } } /* صفحه محصول: breadcrumb کامل با اسکرول افقی در مسیرهای بلند */ .product-breadcrumb-nav { width: 100%; max-width: 100%; min-width: 0; } .product-breadcrumb-nav .breadcrumb.breadcrumb--scroll-x, .breadcrumb.breadcrumb--scroll-x { display: flex; flex-wrap: nowrap; align-items: center; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; max-width: 100%; padding: 0.5rem 0; margin-bottom: 0.75rem; } .product-breadcrumb-nav .breadcrumb.breadcrumb--scroll-x::-webkit-scrollbar, .breadcrumb.breadcrumb--scroll-x::-webkit-scrollbar { display: none; } .product-breadcrumb-nav .breadcrumb.breadcrumb--scroll-x .breadcrumb-item, .breadcrumb.breadcrumb--scroll-x .breadcrumb-item { white-space: nowrap; flex-shrink: 0; } @media (max-width: 767.98px) { .product-breadcrumb-nav .breadcrumb.breadcrumb--scroll-x, .breadcrumb.breadcrumb--scroll-x { font-size: 0.8125rem; } } .header-bg { background: var(--C1) url('/assets/images/main/back.jpg') no-repeat; background-size: cover } .about-bg { background: var(--C1) url('/assets/images/header/about.jpg') no-repeat; background-size: cover } .contact-bg { background: var(--C1) url('/assets/images/header/contact.jpg') no-repeat; background-size: cover } .blog-bg { background: var(--C1) url('/assets/images/header/blog.jpg') no-repeat; background-size: cover } .faq-bg { background: var(--C1) url('/assets/images/header/faq.jpg') no-repeat; background-size: cover } .rules-bg { background: var(--C1) url('/assets/images/header/rules.jpg') no-repeat; background-size: cover } .buying-guide-bg { background: var(--C1) url('/assets/images/header/buying-guide.jpg') no-repeat; background-size: cover } .category-bg { background: var(--C1) url('/assets/images/header/category.jpg') no-repeat; background-size: cover } .media-bg { background: var(--C1) url('/assets/images/header/media.jpg') no-repeat; background-size: cover } .oil-and-gas-bg { background: var(--C1) url('/assets/images/header/oil-and-gas.jpg') no-repeat; background-size: cover } .chemical-petrochemical-bg { background: var(--C1) url('/assets/images/header/chemical-petrochemical.jpg') no-repeat; background-size: cover } .power-generation-bg { background: var(--C1) url('/assets/images/header/power-generation.jpg') no-repeat; background-size: cover } .water-and-wastewater-bg { background: var(--C1) url('/assets/images/header/water-and-wastewater.jpg') no-repeat; background-size: cover } .facilities-and-ventilation-bg { background: var(--C1) url('/assets/images/header/building-services.jpg') no-repeat; background-size: cover; color: var(--C2) !important } .food-and-pharmaceutical-bg { background: var(--C1) url('/assets/images/header/food-and-pharmaceutical.jpg') no-repeat; background-size: cover } .metals-and-mining-bg { background: var(--C1) url('/assets/images/header/metals-and-mining.jpg') no-repeat; background-size: cover } .accordion-header h4 button, .card-title { font-weight: 500 } .card-text { text-align: justify; } .bottom-header .col-md-9, .header, .top-header .logo { text-align: right } .card a { overflow: hidden } .card img { transition: transform .5s; transform: scale(1) } .card { border-radius: .875rem } hr { height: 1px } .tooltip-icon i { font-weight: 700 !important } .no-radius { border-radius: unset !important } ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-thumb { background: var(--C5); border-radius: 4px; } ::-webkit-scrollbar-track { background: var(--C4); } html { scrollbar-color: var(--C5) var(--C4); scrollbar-gutter: stable; scrollbar-width: thin; } /* قفل اسکرول پشت منو/مودال — gutter روی html عرض را ثابت نگه می‌دارد */ body.main-menu-open, body.profile-menu-open, body.mobile-account-menu-open, body.modal-open, body.header-search-open { overflow: hidden !important; padding-right: 0 !important; padding-left: 0 !important; } .header-search-results { scrollbar-color: var(--C5) var(--C4); scrollbar-width: thin; } .bghover_c3:hover { background-color: var(--C3); color: var(--C2) } .bghover_c4:hover { background-color: var(--C4) } ::selection { background-color: var(--selection-bg); color: var(--selection-text) } ::-moz-selection { background-color: var(--selection-bg); color: var(--selection-text) } .header { background-color: var(--C10); padding-top: 5px; padding-bottom: 0; font-weight: 400; transition: background-color .8s,color .3s,box-shadow .7s; position: fixed; top: 0; width: 100%; z-index: 1050; color: var(--C2) } .header:hover { background-color: var(--C10); color: var(--C2) } .header.scrolled .bottom-header .main-menu-list li a, .header.scrolled .bottom-header .search-icon .btn-link, .header.scrolled .top-header-menu li a, .header:hover .bottom-header .main-menu-list li a, .header:hover .bottom-header .search-icon .btn-link, .header:hover .top-header-menu li a, .industry-category-icon { color: var(--C2) } .header.scrolled { background-color: var(--C10); color: var(--C2); box-shadow: 0 13px 20px #292929a3 } .footer .container, .header .container { margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0 } /* فوتر — لوگو، کارت‌های بخش میانی */ .footer { border-top: 1px solid var(--C6) } .footer .footer-logo-img { display: block; max-width: 120px; width: 100%; height: auto; margin-left: auto; margin-right: auto } .footer .footer-card { height: 100%; padding: 1.2rem 1.3rem; border-radius: 1rem; background: linear-gradient(165deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.04) 55%, rgba(0, 0, 0, 0.12) 100%); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .footer .footer-card:hover { border-color: rgba(255, 255, 255, 0.22); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.1); } .footer .footer-card .footer-card-title { letter-spacing: -0.02em; padding-bottom: 0.55rem; margin-bottom: 0.85rem !important; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .footer .footer-trust-img { display: block; width: 90px; height: auto; vertical-align: middle; background: #8acfb1; } .footer .footer-about-text { text-align: center; text-align-last: center; } @media (min-width: 992px) { .footer .footer-about-text { text-align: justify; text-align-last: auto; text-justify: inter-word; } } @media (max-width: 992px) { .footer .footer-bottom-nav { justify-content: center !important; } .footer-copyright, .footer-bottom-link { text-align: center } } @media (max-width: 992px) and (orientation: portrait) { .footer { padding-bottom: calc(152px + env(safe-area-inset-bottom, 0px)) !important; } } .header .row { display: flex; } /* ترتیب رسم: top-header بالاتر از bottom-header تا منوی حساب زیر مگامنو نره — در صورت بروز مشکل z-index: 1100 رو بر top-header برگردون */ .header .top-header { position: relative; z-index: 1200; } .header .bottom-header { position: relative; z-index: 100 } .top-header { padding-top: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--C5) } .bottom-header, .top-header .logo { padding-top: 0; padding-bottom: 0 } .top-header .row { display: flex; justify-content: space-between; align-items: center } .top-header .col-md-6.text-right { text-align: right !important; order: 1 } .top-header .col-md-6.text-left { text-align: left !important; order: 2 } .top-header .top-header-menu { margin-bottom: 0 !important; padding-right: 0 } .top-header .top-header-menu li { margin-right: 20px; position: relative } .top-header .top-header-menu li:last-child { margin-left: 0 } .top-header .top-header-menu li a { color: var(--C2); font-size: 12px; text-decoration: none; transition: color .3s; font-weight: 400; position: relative } .top-header .top-header-menu li::after { content: ''; position: absolute; top: 0; right: 0; width: 2px; height: 0; background-color: #fff; transition: height .3s } .top-header .top-header-menu li:hover::after { height: 100% } .detail-box-list li i, .top-header .top-header-menu li a i { margin-left: 5px } .top-header .top-header-menu li a:hover { color: #fff } /* آیتم تغییر تم — متمایز از لینک‌ها، بدون خط عمودی هاور */ .top-header .top-header-menu li.site-theme-toggle-wrap { margin-right: 14px; } .top-header .top-header-menu li.site-theme-toggle-wrap::after { display: none; } .site-theme-toggle-mobile-wrap { display: flex; align-items: center; justify-content: center } .site-theme-toggle-mobile-wrap .nightmode { height: 40px } .site-theme-toggle-mobile-wrap .dark-mode-toggle { width: 50px; height: 26px } .site-theme-toggle-mobile-wrap .dark-mode-toggle-thumb { width: 22px; height: 22px; font-size: 13px; top: 2px; right: 2px; } .site-theme-toggle-mobile-wrap .dark-mode-toggle-thumb .dark-mode-icon { font-size: 13px; } /* دکمه تغییر تم در هدر — استایل مثل Footballbazz (سوئیچ خورشید/ماه) */ .site-theme-toggle-wrap { margin-right: 20px; position: relative; display: inline-block; vertical-align: middle } .nightmode { width: auto; height: 45px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .3s ease; padding: 0 5px } .nightmode:hover { transform: scale(1.05) } .dark-mode-toggle { position: relative; width: 54px; height: 28px; background: linear-gradient(135deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,.2) 100%); border-radius: 30px; cursor: pointer; transition: background .35s ease, box-shadow .35s ease; box-shadow: inset 0 2px 6px rgba(0,0,0,.1), 0 2px 4px rgba(0,0,0,.1); backdrop-filter: blur(10px) } .dark-mode-toggle:hover { box-shadow: inset 0 2px 6px rgba(0,0,0,.15), 0 4px 8px rgba(0,0,0,.15) } .dark-mode-toggle-thumb { position: absolute; top: 3px; right: 3px; left: auto; width: 22px; height: 22px; background: linear-gradient(135deg, #fff 0%, #f5f5f5 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 6px rgba(0,0,0,.2); transition: transform .45s cubic-bezier(0.34, 1.2, 0.64, 1), background .35s ease, box-shadow .35s ease; transform: translateX(0) } .dark-mode-toggle-thumb .dark-mode-icon { font-size: 12px; line-height: 1; } .dark-mode-toggle-thumb .light-icon { display: block; color: #c2410c; } .dark-mode-toggle-thumb .dark-icon { display: none; } :root[data-bs-theme="dark"] .dark-mode-toggle { background: linear-gradient(135deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,.2) 100%) } :root[data-bs-theme="dark"] .dark-mode-toggle-thumb { background: linear-gradient(135deg, #05ff9c 0%, #056c3c 100%); box-shadow: 0 3px 8px rgba(255,192,5,.4); transform: translateX(-26px) } :root[data-bs-theme="dark"] .dark-mode-toggle-thumb .light-icon { display: none; } :root[data-bs-theme="dark"] .dark-mode-toggle-thumb .dark-icon { display: block; color: #1a1a1a; } @media (max-width: 992px) { .nightmode { padding: 0 3px; height: 40px } .dark-mode-toggle { width: 50px; height: 26px } .dark-mode-toggle-thumb { width: 22px; height: 22px; font-size: 13px; top: 2px; right: 2px; transform: translateX(0); filter: drop-shadow(0 1px 2px rgba(0,0,0,.15)) } .dark-mode-toggle-thumb .dark-mode-icon { font-size: 13px; } :root[data-bs-theme="dark"] .dark-mode-toggle-thumb { transform: translateX(-24px); filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)) } } /* زیرمنوی حساب کاربری در هدر — دسکتاپ (بالا بودن منو با z-index سطح top-header حل شده) */ .header-account-dropdown-wrap { margin-right: 20px; position: relative; z-index: 1300 } .header-account-dropdown-wrap .dropdown-menu { z-index: 1301 !important; inset: 10px auto auto 0px !important; } .top-header-menu-account-trigger { color: var(--C2) !important; font-size: 13px; text-decoration: none; display: inline-flex; align-items: center; font-weight: 400; padding: 0 8px } .top-header-menu-account-trigger:hover { color: #fff !important } /* حذف فلش پیش‌فرض Bootstrap تا فقط یک فلش داشته باشیم */ .top-header-menu-account-trigger::after { display: none !important } .top-header-menu-account-trigger .header-account-chevron { font-size: 14px; opacity: .85; transition: transform .25s ease; margin-right: 5px; } .top-header-menu-account-trigger[aria-expanded="true"] .header-account-chevron { transform: rotate(180deg) } .header-account-dropdown-menu { min-width: 220px; padding: 1rem 30px .5rem; border-radius: .875rem; box-shadow: 0 8px 24px rgba(0,0,0,.2); border: 1px solid rgba(255,255,255,.1); background-color: var(--C1) !important; z-index: 1301 !important } .header-account-dropdown-menu li { width: 100%; list-style: none; margin-right: unset !important } .header-account-dropdown-wrap .top-header-menu-account-trigger { position: relative; display: inline-flex; align-items: center; flex-wrap: nowrap; gap: 0.15rem; } .header-account-total-badge { position: absolute; top: -7px; inset-inline-end: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 50%; background: var(--bs-danger); color: #fff; font-size: 0.65rem; font-weight: 700; line-height: 14px; text-align: center; border: 2px solid var(--C1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); display: flex; align-items: center; justify-content: center; z-index: 2; pointer-events: none; transition: transform 0.3s ease, background-color 0.3s ease; } .header-account-dropdown-menu .dropdown-item { font-size: 13px; padding: .5rem 1rem; display: flex; align-items: center; color: var(--C2); width: 100%; box-sizing: border-box; border: none; background: none; text-align: right; text-decoration: none; cursor: pointer } .header-account-dropdown-menu .dropdown-item .badge { flex-shrink: 0; min-width: 1.35rem; font-size: 0.72rem; font-weight: 700; line-height: 1.2; padding: 0.2rem 0.45rem; } .header-account-dropdown-menu .badge.bg-primary { background-color: var(--C3, #08a379) !important; color: #fff !important; } [data-bs-theme="dark"] .header-account-dropdown-menu .badge.bg-primary { color: #0b1220 !important; } .header-account-dropdown-menu .dropdown-item:hover { background-color: rgba(255,255,255,.1); color: var(--C2) } .header-account-dropdown-menu .dropdown-item i { font-size: 1rem; width: 20px; text-align: center; opacity: .9; flex-shrink: 0 } .header-account-dropdown-menu .dropdown-divider { margin: .35rem 0; border-color: rgba(255,255,255,.15) } .header-account-dropdown-menu .dropdown-item.text-danger { color: #f1aeb5 !important } .header-account-dropdown-menu .dropdown-item.text-danger:hover { background-color: rgba(220,53,69,.25); color: #f1aeb5 !important } .header-account-phone-row { display: flex; align-items: center; justify-content: space-between; padding: .5rem 1rem; color: var(--C2); font-size: 13px } .header-account-phone-row .header-account-phone-item { padding: 0; cursor: default; display: inline-flex; align-items: center } .header-account-phone-row .header-account-phone-item:hover { background: none } .header-account-phone-row .header-account-phone-value { opacity: .95 } .top-header .logo a { display: inline-block } .top-header .logo img { max-width: 170px; height: auto; vertical-align: middle } .bottom-header .main-menu-list { margin-bottom: 0 !important; text-align: right; padding: 0 } .bottom-header .main-menu-list li a { color: var(--C2); font-size: 13px; text-decoration: none; transition: color .3s; padding: 15px 8px 15px 10px; font-weight: 400; display: block } /*.bottom-header .main-menu-list li a:hover { color: #fff !important }*/ .bottom-header .search-icon .btn-link { color: var(--C2); font-size: 18px; text-decoration: none } .header .col-md-6.text-center .search-box .form-control { border-radius: 0 30px 30px 0; border-right: none; border-left: 1px solid var(--C2); padding-right: 20px; padding-left: 20px; font-size: 14px; box-shadow: none !important; height: 40px } .header .col-md-6.text-center .search-box .form-control:focus { border-color: var(--C5); box-shadow: 0 0 0 .1rem rgba(0,123,255,.25) !important } .header .col-md-6.text-center .search-box .input-group-append .btn { border-radius: 30px 0 0 30px; border-left: none; border-right: 1px solid var(--C2); background-color: transparent; color: var(--C2); height: 40px; padding-left: 20px; padding-right: 20px } .header .col-md-6.text-center .search-box .input-group-append .btn:hover { background-color: var(--C2); color: var(--C6) } .mega-menu-column { padding-left: 15px } .detail-box-list li:last-child, .mega-menu-links li:last-child { margin-bottom: 0 } .card-post-date-meta, .wpglink { text-align: left } .header .bottom-header .main-menu-list li.mega-menu-item { position: static } .header .bottom-header .main-menu-list li.mega-menu-item .dropdown-menu.mega-menu { border: none; background-color: var(--C2); width: 100%; left: 0; right: 0; top: 100%; padding: 20px; box-shadow: 0 4px 28px rgba(0,0,0,.7); display: block; opacity: 0; visibility: hidden; transform: translateX(20px); z-index: 100; border-radius: 0 0 5px 5px } @media (min-width:992px) { .header .bottom-header .main-menu-list li.mega-menu-item .dropdown-menu.mega-menu { display: block; opacity: 0; visibility: hidden; transform: translateX(20px); transition: opacity .1s ease-in,opacity .3s ease-out,visibility .1s ease-in,visibility .3s ease-out,transform .5s ease-in-out } .header .bottom-header .main-menu-list li.mega-menu-item:hover > .dropdown-menu.mega-menu { opacity: 1; visibility: visible; transform: translateX(0); transition-delay: 0.3s } .header .bottom-header .main-menu-list li.mega-menu-item:hover::after { content: ''; position: fixed; top: 110px; left: 0; width: 100%; height: calc(100vh - 110px); background-color: rgba(0,0,0,.7); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 98; pointer-events: none; transition: background-color .3s,backdrop-filter .3s } } .header .bottom-header .main-menu-list li.mega-menu-item::after { content: ''; position: fixed; top: 118px; left: 0; width: 100%; height: calc(100vh - 118px); z-index: 98; pointer-events: none; opacity: 0; visibility: hidden; transition: -webkit-backdrop-filter .7s ease-in,backdrop-filter .7s ease-in,background-color .7s ease-in,opacity .7s ease-in,visibility .7s ease-in } .header .bottom-header .main-menu-list li.mega-menu-item:hover::after { opacity: 1; visibility: visible; background-color: rgba(0,0,0,.7); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); transition-delay: .3s } .mega-menu-column-image { text-align: center; padding-right: 20px } .mega-menu-main-image { max-width: 100%; height: auto; border-radius: 5px } .mega-menu-columns-container { display: flex; flex-wrap: wrap } .mega-menu-column { width: 25%; padding-right: 15px } .mega-menu-column-title { font-size: 15px; font-weight: 700; color: var(--C6); margin-bottom: 10px; padding-bottom: 5px; border-bottom: 1px solid var(--C5); text-align: right } .mega-menu-links { list-style: none; padding: 0; margin: 0 } .mega-menu-links li { margin-bottom: 8px; width: 100% } .mega-menu-links li a.dropdown-item { display: block; padding: 8px 0; color: var(--C3); font-size: 14px; text-decoration: none; transition: color .3s } .mega-menu-links li a.dropdown-item:hover { color: var(--C4) !important; background-color: transparent } .mega-menu-link-item { display: flex; border-bottom: 1px solid var(--C5); align-items: center; border-radius: 5px; color: var(--C1); padding: 10px 10px 10px 45px; transform-origin: center center; transition: background-color .5s ease-in,background-color .8s ease-out,color .6s,box-shadow .7s; position: relative; overflow: hidden } .mega-menu-link-item:hover { background-color: var(--C1); color: var(--C2); font-weight: 700; box-shadow: 0 4px 12px rgba(0,0,0,.3) } .mega-menu-link-item::before { content: ''; transition: opacity .8s; position: absolute; top: 5px; left: 7px; height: 90%; width: 30px; background-image: url('/assets/images/main/logo-v.png'); background-size: contain; background-repeat: no-repeat; background-position: center left; opacity: 0 } .mega-menu-link-item:hover::before { opacity: .9 } .mega-menu-link-image { margin-left: 10px; width: 80px; overflow: hidden; border-radius: 5px; display: flex; justify-content: center; align-items: center } .mega-menu-link-image img { max-width: 80px; height: auto; border-radius: 5px; display: block; transition: transform .5s ease-in,transform .8s ease-out } .category-item:hover .category-image, .mega-menu-link-item:hover .mega-menu-link-image img { transform: scale(1.05) } .mega-menu-link-text { font-size: 15px; margin-right: 2px } .mega-menu-link-text span { display: inherit; font-size: 12px; opacity: 0; height: 0; transition: margin-top .5s,height .3s,opacity .8s } .mega-menu-link-item:hover .mega-menu-link-text span { opacity: 1; height: 20px; margin-top: 5px } .search-box-postion { position: absolute; left: 0 } .search-icon .ti-search { font-size: 1.5rem; font-weight: 700 } @media screen and (max-width:767px) { .search-box-postion { position: unset; left: unset } .mega-menu-link-image { width: 80px !important } } @media (max-width:1200px) { .mega-menu-link-text span { text-overflow: ellipsis; overflow: hidden; width: 100px } } @media (max-width:992px) { /* تا ۹۹۲px تاپ‌هدر مخفی؛ لوگو و دکمه تم موبایل در نوار پایین نمایش داده شوند */ .header .top-header { display: none !important; } .bottom-header .col-5.text-center.d-lg-none { display: block !important; } .bottom-header .site-theme-toggle-mobile-wrap.d-lg-none { display: flex !important; } /* در ۹۹۲px Bootstrap با col-lg-* نسبت ستون‌ها را عوض می‌کند؛ اینجا مثل ۹۹۱ با col-2 و col-5 ثابت می‌کنیم */ .bottom-header .row > .col-lg-12.col-2 { flex: 0 0 16.666667% !important; max-width: 16.666667% !important; } .bottom-header .row > .col-lg-6.col-5 { flex: 0 0 41.666667% !important; max-width: 41.666667% !important; } .bottom-header .row > .col-lg-1.col-5 { flex: 0 0 41.666667% !important; max-width: 41.666667% !important; } .bottom-header, .header, .top-header { padding-bottom: 0 } .bottom-header, .header, .top-header, .top-header .logo, .top-header .row { text-align: center } .header { padding-top: 7px; padding-bottom: 7px; position: fixed; background-color: var(--C1) } .header .container { padding-left: 10px; padding-right: 10px } .top-header { padding-top: 10px } .mega-menu-columns-container, .top-header .row { flex-direction: column } .top-header .col-md-6.text-left, .top-header .col-md-6.text-right { text-align: center !important; order: unset } .top-header .top-header-menu { padding-right: 0; margin-top: 10px } .top-header .top-header-menu li { display: block; margin-right: 0; margin-bottom: 5px; text-align: center } .top-header .top-header-menu li:last-child { margin-bottom: 0 } .top-header .top-header-menu li a { font-size: 12px; margin-right: 0; padding: 5px; display: block } .top-header .logo { margin-bottom: 10px } .top-header .logo img { max-width: 150px } .bottom-header { padding-top: 0 } .bottom-header .row { flex-direction: row } .bottom-header .col-md-3, .bottom-header .col-md-9 { text-align: center !important; padding: 0 !important } .bottom-header .main-menu.animate-element-fade, .main-menu.animate-element-fade { opacity: 1 !important; transform: none !important; transition: none !important; } .main-menu > .main-menu-list { display: none !important; } .bottom-header .main-menu-list li { display: block; margin-left: 0 } .bottom-header .main-menu-list > li:last-child { border-bottom: none } .bottom-header .main-menu-list li a { display: block; padding: 15px 20px; font-size: 14px; text-align: right; border-radius: 0 } .main-menu-list .no-hamburger-copy, .main-menu-list .header-account-dropdown-menu { display: none !important; } .bottom-header .search-icon { margin: 5px } .header .col-md-6.text-center .search-box { width: 100%; margin: 15px auto; display: flex; justify-content: center } .header .col-md-6.text-center .search-box .input-group { width: 100% } .header .col-md-6.text-center .search-box .form-control { border-radius: 5px; border: 1px solid var(--C2); border-left: 1px solid var(--C2); border-right: 1px solid var(--C2); text-align: right } .header .col-md-6.text-center .search-box .input-group-append .btn { border-radius: 5px; border: 1px solid var(--C2); border-right: 1px solid var(--C2); border-left: 1px solid var(--C2) } .hamburger-menu { display: flex; margin-left: auto; margin-right: 10px } .bottom-header .col-md-9 { text-align: right } .mega-menu-link-image { width: 0 } .header .bottom-header .main-menu-list li.mega-menu-item .dropdown-menu.mega-menu, .main-menu-offcanvas .main-menu-list li.mega-menu-item .dropdown-menu.mega-menu { display: none; padding: 5px 0 20px; position: static; width: 100%; background-color: var(--C9); box-shadow: none; opacity: 1; visibility: visible; transform: none } .header .bottom-header .main-menu-list li.mega-menu-item.open .dropdown-menu.mega-menu, .main-menu-offcanvas .main-menu-list li.mega-menu-item.open .dropdown-menu.mega-menu { display: inline; border-radius: 5px } .mega-menu-column { width: 100%; padding-left: 0; padding-right: 0 } .mega-menu-column-image { display: none } .mega-menu-link-item { padding: 10px; background-color: var(--C1); margin-bottom: 5px; border-radius: 5px } .mega-menu-link-text { color: var(--C2) } .mega-menu-link-text span { color: var(--C2); opacity: .7 } } /* از 993px به بالا: رفتار دسکتاپ منوی مگا (تا 992 مثل موبایل بماند) */ @media (min-width: 993px) { .header .bottom-header .main-menu-list li.mega-menu-item:hover > .dropdown-menu.mega-menu { opacity: 1; visibility: visible; transform: translateX(0) } .header .bottom-header .main-menu-list li.mega-menu-item:hover::after { content: ''; position: fixed; top: 118px; left: 0; width: 100%; height: calc(100vh - 118px); background-color: rgba(0,0,0,.7); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 98; pointer-events: none; transition: background-color .7s 0.3s,backdrop-filter .7s 0.3s } } .hamburger-menu { display: none; flex-direction: column; cursor: pointer; padding: 5px; z-index: 1001 } .bar { width: 25px; height: 3px; background-color: var(--C2); margin: 3px 0; transition: .4s } .custom-table tbody tr:nth-child(2n), .menu-line { background-color: #fff } .hamburger-menu.active .bar:first-child { transform: rotate(-45deg) translate(-5px,6px) } .hamburger-menu.active .bar:nth-child(2) { opacity: 0 } .hamburger-menu.active .bar:nth-child(3) { transform: rotate(45deg) translate(-5px,-6px) } .menu-line { position: absolute; bottom: 0; height: 2px; transition: .3s; pointer-events: none; right: 0 } @media screen and (max-width:992px) { .hamburger-menu { display: flex; margin-right: 10px } .main-menu-offcanvas .main-menu-list, #mainMenuOffcanvasBody .main-menu-list { display: flex !important; flex-direction: column; position: static !important; width: 100%; max-width: none; text-align: right; padding: 12px 0 max(24px, env(safe-area-inset-bottom)); margin: 0; overflow: visible; background: transparent; box-shadow: none; transform: none !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto; height: auto; max-height: none; } .main-menu-list li { padding: 0 15px; border-bottom: none; margin-bottom: 2px; } .main-menu-list li a { display: flex; align-items: center; padding: 14px 16px; font-size: 0.95rem; font-weight: 500; color: var(--C5); text-align: right; border-radius: 12px; transition: all 0.2s ease; } .main-menu-list li a i { font-size: 1.25rem; margin-left: 12px; opacity: 0.85; } .main-menu-list li a:active, .main-menu-list li a:hover { background-color: rgba(255, 255, 255, 0.07); color: var(--C3); } .main-menu-list li.active a { background-color: rgba(8, 163, 121, 0.12); color: var(--C3); font-weight: 700; } .main-menu-list li::after, .mega-menu-column-image, .menu-line { display: none } .mega-menu { position: static; box-shadow: none } .mega-menu .container { width: 100%; padding: 0 } .mega-menu .row { flex-direction: column } .mega-menu-column-title { margin-top: 20px } .dropdown-item { padding-right: 30px } .mega-menu-links li a.dropdown-item { padding: 0 } .mega-menu-links li { margin-bottom: 0 } .hamburger-menu { display: flex; margin-left: 20px } } .category-caption, .full-width-section, .industry-categories-section, .slider-box { text-align: center } @media (max-width:767px) { .wpglink { text-align: center; margin-top: 20px; margin-bottom: 30px; font-size: 16px; font-weight: 700 } .img-fluid { height: 65vh; width: 100% } .img-fluid img { width: 100%; height: 100% !important } .img-fluid video { position: unset !important; width: 100%; height: 100%; object-fit: cover; object-position: center center; z-index: 0; } } .img-fluid { width: 100% } .img-fluid img { height: 100vh; width: 100% } .img-fluid video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; z-index: 0; } .mainslide-box { padding: 100px inherit; background: url('/assets/images/main/slider.jpg') center center/cover no-repeat; width: 100%; height: 100%; z-index: -1 } .slider-box { position: absolute; bottom: 5%; left: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; margin-left: -25%; margin-top: 0; background-color: rgba(0,0,0,.3); backdrop-filter: blur(5px); padding: 30px; border-radius: 5px; width: 50%; color: var(--C2) } .slider-box-title { font-size: 2.5rem; margin-bottom: 20px; color: var(--C2); font-weight: 700 } .slider-box-text { font-size: .9rem; color: var(--C2); line-height: 1.6; margin-bottom: 30px; width: 80% } .slider-box-buttons { display: flex; justify-content: center; gap: 20px } .slider-box-button { display: inline-block; padding: 12px 30px; border-radius: 5px; text-decoration: none; color: var(--C2); transition: background-color .3s } .slider-box-button-products { background-color: var(--C2); color: var(--C6); white-space: pre; min-width: 200px } .slider-box-button-products:hover { background-color: var(--C4) } .slider-box-button-more { background-color: var(--C1); white-space: pre; min-width: 40% } .slider-box-button-more:hover { background-color: var(--C7) } .industry-categories-title, .industry-category-name { color: var(--C6); font-weight: 700 } .search-box, .search-input { background-color: var(--C2) } .search-box { overflow: hidden; width: 0; transition: width .6s ease-out,opacity 1s ease-in-out; border-radius: 4px; opacity: 0 } .search-box.active { width: 100%; opacity: 1 } .search-icon button { color: var(--C1); font-size: 0.8rem; } .search-input { border: none; outline: 0; padding: 5px; width: 100%; border-radius: 5px; font-size: 13px } .category-image, .category-item { border-radius: 5px; display: block } .animate-element, .animate-element-fade { opacity: 0; transition: opacity .8s ease-out,transform .8s ease-out } .animate-element-fade.animate-fade-in { opacity: 1; transform: none } .animate-element.animate-in { opacity: 1; transform: translateY(0) translateX(0) } .animate-from-top { transform: translateY(-50px) } .animate-from-right { transform: translateX(50px) } .animate-from-left { transform: translateX(-50px) } .animate-from-bottom { transform: translateY(50px) } .animate-fade-in { transform: none } .animate-delay-0-1s, .animate-delay-0-2s { transition-delay: 0.2s } .animate-delay-0-3s { transition-delay: 0.3s } .animate-delay-0-4s { transition-delay: 0.4s } .animate-delay-0-5s { transition-delay: 0.5s } .animate-delay-0-6s { transition-delay: 0.6s } .animate-delay-0-7s { transition-delay: 0.7s } .animate-delay-0-8s { transition-delay: 0.8s } .animate-delay-1s { transition-delay: 1s } .animate-delay-1-2s { transition-delay: 1.2s } .animate-duration-0-3s { transition-duration: .3s } .animate-duration-0-5s { transition-duration: .5s } .animate-duration-0-7s { transition-duration: .7s } .animate-duration-1s { transition-duration: 1s } .animate-duration-1-2s { transition-duration: 1.2s } .industry-category-box { background-color: var(--C3); border-radius: 5px; box-shadow: 0 0 15px rgba(0,0,0,.1); display: flex; flex-direction: column; justify-content: space-between; padding: 25px 20px; text-align: center; box-sizing: border-box; align-items: center } .industry-category-box:hover { transition: background-color .3s ease-in-out; background-color: var(--C1) } .industry-category-name { line-height: 1.4 } .industry-category-button { transition: background-color .3s; width: 110px } .industry-category-button:hover { background-color: var(--C7); color: var(--C2) !important } .industry-categories-container, .product-actions { display: flex; flex-direction: row } .industry-category-box { width: auto; margin: 5px; flex-basis: auto; flex-grow: 1 } .animated-button { display: inline-flex; flex-direction: row-reverse; justify-content: center; overflow: hidden; transition: background-color .3s,width .3s ease-in-out } .animated-button::before { display: inline-block; content: '\290C'; width: 0; margin-right: 0; font-weight: 900; transform: translateY(0); opacity: 0; transition: opacity .3s ease-out,opacity .1s ease-out,margin-right .3s ease-in-out,width .3s ease-in,width .1s ease-out } .button-with-text-hover span, .button-with-text-hover::before { transition: opacity .3s ease-out,width .3s ease-in-out,margin-right .3s ease-in-out } .animated-button:hover::before { width: 15px; opacity: 1; transform: translateY(0); margin-right: 5px } .button-with-text-hover { display: inline-flex; flex-direction: row-reverse; align-items: center; overflow: hidden; transition: color .3s,width .3s ease-in-out,background-color .3s; padding-right: 15px; padding-left: 15px; position: relative } .button-with-text-hover:hover { background-color: var(--C1) !important } .button-with-text-hover::before { content: '\290C'; font-weight: 900; opacity: 1; margin-right: 0; position: relative } .button-with-text-hover span { opacity: 0; white-space: nowrap; width: 0 } .button-with-text-hover:hover::before { margin-right: 20px } .button-with-text-hover:hover span { transition: opacity .3s ease-in-out,width .3s ease-in-out; width: 50px; opacity: 1; left: 0 } .category-item { overflow: hidden; box-shadow: 0 15px 40px rgba(0,0,0,.15); transition: box-shadow .3s; position: relative } .category-item:hover { box-shadow: 0 20px 50px rgba(0,0,0,.25) } .category-image { width: 100%; height: auto; transition: transform .5s; transform-origin: center center; overflow: hidden } .category-caption { position: absolute; bottom: 5%; left: 2.5%; width: 95%; background-color: rgba(0,0,0,.3); color: var(--C2); padding: 15px 10px 5px; box-sizing: border-box; opacity: 1; border-radius: 4px; backdrop-filter: blur(5px) } .category-title { font-size: 1.8rem; font-weight: 600; color: var(--C2); margin-bottom: 10px; line-height: 1.3 } .category-description { font-size: 1rem; color: var(--C2); line-height: 1.5; margin-bottom: 20px; max-height: 100px; overflow: hidden; display: -webkit-box; line-clamp: 3; -webkit-box-orient: vertical } /*@media (max-width:768px) { .animate-element, .animate-element-fade { opacity: unset !important; transition: unset !important; } .animate-element-fade.animate-fade-in { opacity: unset !important;; transform: unset !important; } .animate-element.animate-in { opacity: unset !important; transform: unset !important; } .animate-from-top { transform: unset !important; } .animate-from-right { transform: unset !important; } .animate-from-left { transform: unset !important; } .animate-from-bottom { transform: unset !important; } .animate-fade-in { transform: none } .animate-delay-0-1s, .animate-delay-0-2s { unset !important; } .animate-delay-0-3s { unset !important; } .animate-delay-0-4s { unset !important; } .animate-delay-0-5s { unset !important; } .animate-delay-0-6s { unset !important; } .animate-delay-0-7s { unset !important; } .animate-delay-0-8s { unset !important; } .animate-delay-1s { unset !important; } .animate-delay-1-2s { unset !important; } .animate-duration-0-3s { unset !important; } .animate-duration-0-5s { unset !important; } .animate-duration-0-7s { unset !important; } .animate-duration-1s { unset !important; } .animate-duration-1-2s { unset !important; } }*/ @media (max-width:767px) { .slider-box { position: static; height: 35vh; transform: none; top: auto; left: auto; width: 100%; border-radius: 0; margin-bottom: 20px; background-color: var(--C1); backdrop-filter: none; margin-top: 0 } .slider-box-title { font-size: 1.5rem; margin-bottom: 15px; color: var(--C2) } .slider-box-text { font-size: .8rem; margin-bottom: 20px; color: var(--C2); width: 90% } .slider-box-buttons { flex-direction: column; gap: 10px } .slider-box-button { padding: 10px 20px; font-size: .9rem } .slider-box-button-more { background-color: var(--C5); color: var(--C6) } .slider-box-button-more:hover { background-color: var(--C4) } .industry-categories-container { flex-direction: row; justify-content: flex-start; align-items: flex-start; align-items: stretch } .industry-category-box { width: calc(50% - 10px); max-width: none; flex-direction: column; text-align: center; justify-content: space-between; align-items: center; padding-right: 20px; padding-left: 20px; display: flex } .industry-categories-container > .industry-category-box:last-child:nth-child(odd) { width: 94%; margin: 5px } .industry-category-name { margin-bottom: 20px; text-align: center } .industry-category-button { font-size: .9rem; padding: 10px 25px } .swiper-slide .animate-from-left, .swiper-slide .animate-from-right { transform: none } .animate-from-left, .animate-from-right { transform: translateY(-50px) } .category-caption, .category-image, .category-item { border-radius: 5px } .row.row-cols-md-2.g-4 { --bs-gutter-x: 1.5rem; --bs-gutter-y: 1.5rem } .category-item { box-shadow: 0 8px 20px rgba(0,0,0,.1) } .category-caption { padding: 15px; backdrop-filter: blur(3px) } .category-title { font-size: 1.6rem; margin-bottom: 8px } .category-description { font-size: .9rem; margin-bottom: 15px; max-height: 80px; display: none !important } } .full-width-section { position: relative; width: 100%; height: auto; min-height: 600px; overflow: hidden; color: var(--C2); display: flex; justify-content: center; align-items: center } .full-width-section-background { padding: 100px inherit; background: url('/assets/images/main/back.jpg') center center/cover no-repeat; width: 100%; height: 100% } .full-width-section-bg-image { width: 100%; height: 100% } .full-width-section-content { position: relative; padding: 50px; margin: 0 auto; max-width: 1200px; width: 100%; box-sizing: border-box } .full-width-section-title { font-size: 2.5rem; font-weight: 700; margin: 30px auto; text-shadow: 2px 2px 4px rgba(0,0,0,.5) } .full-width-section-text { font-size: 1rem; line-height: 2; margin: 40px auto; max-width: 900px; text-shadow: 1px 1px 2px rgba(0,0,0,.5); text-align: justify } .full-width-section-button-container { margin-bottom: 50px } .full-width-section-button { display: inline-block; padding: 15px 40px; border-radius: 8px; background-color: inherit; color: var(--C2); text-decoration: none; font-size: 1.1rem; font-weight: 700; transition: background-color .3s } .full-width-section-button:hover { background-color: inherit } .full-width-section-logo-image { width: 300px; height: auto } .full-width-section-logo-text { font-size: 1.5rem; font-weight: 700; margin-bottom: 5px } .full-width-section-logo-subtext { font-size: 1rem; opacity: .8 } .card-post-header { background-color: transparent; border-bottom: none; padding: .5rem; font-size: .9rem } .card-post-meta { font-size: 13px } .card-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; font-size: .9em; opacity: .8 } .card-post-author-icon { margin-right: 3px } .card-post-date-icon { margin-left: 3px } .card-post-date { direction: ltr; text-align: left; margin-left: 0 } .card-post-meta-bar { gap: .35rem .6rem } .card-post-meta-bar .card-post-meta-item { font-size: .8rem; white-space: nowrap } .card-post-meta-bar .ti { font-size: .9em; opacity: .85 } /* کارت مقاله: باکس‌های روی تصویر */ .card-post-img-link { display: block; text-decoration: none; color: inherit; } .card-img-wrap { overflow: hidden; } .card-img-wrap .card-img-top { display: block; width: 100%; } .card-post-overlay { position: absolute; top: 10px; padding: 4px 5px; border-radius: 8px; font-size: .6rem; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; background: rgb(11 91 59 / 50%); color: var(--C2); box-shadow: 0 2px 12px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); white-space: nowrap; } .card-post-overlay .ti { font-size: 1em; opacity: .95; } .card-post-overlay-date { right: 10px; } .card-post-overlay-stats { left: 10px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: rgba(255,255,255,.18); box-shadow: 0 2px 16px rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.15); } .card-post-author-only { background-color: transparent; border-bottom: none; font-size: .85rem; } .dynamicSwiper { margin: 0 auto; overflow: hidden; padding: 20px 0; display: flex; justify-content: center } .swiper { padding-bottom: 20px !important; display: flex !important; background: none transparent; } .swiper.main-slider { padding: 0 !important; background: none !important; } /* دکمه‌های قبلی/بعدی اسلایدر — مینیمال، عمودی وسط، سازگار با لایت/دارک */ .main-slider .swiper-button-next, .main-slider .swiper-button-prev { position: absolute !important; top: 50% !important; bottom: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; width: 44px !important; height: 44px !important; padding: 0 !important; border: none !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; transform: translateY(-50%) !important; background: rgba(255, 255, 255, 0.14) !important; color: rgba(255, 255, 255, 0.95) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); opacity: 0.85 !important; transition: opacity 0.2s ease, background 0.2s ease, transform 0.2s ease, color 0.2s ease !important; z-index: 10; } .main-slider .swiper-button-next::after, .main-slider .swiper-button-prev::after { font-size: 18px !important; font-weight: 700 !important; } .main-slider .swiper-button-next:hover, .main-slider .swiper-button-prev:hover { opacity: 1 !important; background: rgba(255, 255, 255, 0.22) !important; color: #fff !important; transform: translateY(-50%) scale(1.06) !important; } .main-slider .swiper-button-next.swiper-button-disabled, .main-slider .swiper-button-prev.swiper-button-disabled { opacity: 0.25 !important; cursor: not-allowed; } .swiper.main-slider .swiper-pagination { bottom: 20px !important; } /* دکمه‌های Swiper دسته‌بندی — مثل اسلایدر اصلی، عمودی دقیقاً وسط */ .category-swiper { position: relative; margin-bottom: 1rem; } .category-swiper .swiper-button-next, .category-swiper .swiper-button-prev { position: absolute !important; top: 50% !important; bottom: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; width: 44px !important; height: 44px !important; padding: 0 !important; border: none !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; transform: translateY(-50%) !important; background: rgba(255, 255, 255, 0.95) !important; color: var(--C6) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.06); opacity: 0.9 !important; transition: opacity 0.2s ease, background 0.2s ease, transform 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important; z-index: 10; } .category-swiper .swiper-button-next::after, .category-swiper .swiper-button-prev::after { font-size: 18px !important; font-weight: 700 !important; } .category-swiper .swiper-button-next:hover, .category-swiper .swiper-button-prev:hover { opacity: 1 !important; background: #fff !important; color: var(--C1) !important; transform: translateY(-50%) scale(1.06) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.08); } .category-swiper .swiper-button-next.swiper-button-disabled, .category-swiper .swiper-button-prev.swiper-button-disabled { opacity: 0.3 !important; cursor: not-allowed; } /* وقتی ناوبری غیرفعال است دکمه‌های چپ/راست را مخفی کن */ .swiper[data-navigation="false"] .swiper-button-next, .swiper[data-navigation="false"] .swiper-button-prev { display: none !important; } @media (max-width: 767px) { .main-slider .swiper-button-next, .main-slider .swiper-button-prev { display: none !important; } .swiper.main-slider .swiper-pagination { bottom: 8px !important; } } .swiper-slide img { width: 100% !important } .swiper-wrapper { display: flex; transition-property: transform; box-sizing: content-box; flex-wrap: nowrap } .swiper-slide { overflow: hidden; height: unset !important; flex-shrink: 0; padding: 0; background-color: inherit; text-align: center; justify-content: center; align-items: center; box-sizing: border-box } .main-slider .swiper-slide { width: inherit !important } .dynamic-carousel-item-content img { max-width: 100%; transition: transform .3s; transform-origin: center center; overflow: hidden; display: block } .dynamic-carousel-item-content img:hover { transform: scale(1.05); cursor: pointer } .swiper-pagination { position: absolute; bottom: 0 !important; left: 0; width: 100%; display: flex; justify-content: center; align-items: center } .swiper-pagination-bullet { width: 10px; height: 10px; background-color: var(--C5); opacity: .8; border-radius: 50%; margin: 0 5px; cursor: pointer } .swiper-pagination-bullet-active { background-color: var(--C3); opacity: 1 } /* سکشن تخفیف‌های ویژه — دسکتاپ: باکس سبز + گرادینت + آیکن */ @media (min-width: 992px) { .home-hot-discounts-box { position: relative; display: flex; flex-direction: row; align-items: stretch; gap: 0; border-radius: 16px; overflow: hidden; min-height: 300px; background-color: #2aab4a; background-image: repeating-linear-gradient(48deg, #8c2c2c00, #0000 14px, rgba(0, 0, 0, 0.05) 60px, rgba(0, 0, 0, 0.07) 56px), linear-gradient(242deg, #1d8a3f 0%, #2db854 28%, #52d96a 62%, #6ee87f 100%); box-shadow: 0 8px 32px rgba(20, 100, 45, 0.25); } .home-hot-discounts-title--desktop { position: absolute; top: 1.25rem; right: 1.5rem; left: auto; z-index: 3; margin: 0 !important; color: #fff; text-align: left; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); } .home-hot-discounts-main { flex: 1 1 auto; min-width: 0; padding: 3.25rem 0.5rem 1.15rem 1.5rem; } .home-hot-discounts-empty { color: rgba(255, 255, 255, 0.92) !important; } .home-hot-discounts-deco { flex: 0 0 250px; position: relative; min-height: 260px; pointer-events: none; } .home-hot-discounts-deco__pct { position: absolute; top: 30%; left: 50%; right: auto; transform: translateX(-50%); width: min(175px, 92%); height: auto; object-fit: contain; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.2)); } .home-hot-discounts-deco__icons { position: absolute; bottom: 22%; left: 50%; right: auto; transform: translateX(-42%); display: flex; flex-direction: row; align-items: flex-end; justify-content: center; gap: 0; width: max-content; } .home-hot-discounts-deco__adobe { width: 90px; height: auto; object-fit: contain; margin-bottom: 10px; margin-inline-end: -32px; position: absolute; left: 0; z-index: 2; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.18)); } .home-hot-discounts-deco__laptop { width: 170px; height: auto; object-fit: contain; position: relative; z-index: 1; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.2)); } .home-hot-discounts-section .recent-discounts-pagination .swiper-pagination-bullet { background-color: rgba(255, 255, 255, 0.55); opacity: 1; } .home-hot-discounts-section .recent-discounts-pagination .swiper-pagination-bullet-active { background-color: #fff; } } @media (min-width: 992px) { :root[data-bs-theme="dark"] .home-hot-discounts-box { background-color: #0f3d24; background-image: repeating-linear-gradient(48deg, transparent, transparent 14px, rgba(0, 0, 0, 0.22) 60px, rgba(0, 0, 0, 0.22) 56px), linear-gradient(242deg, #0c2c1a 0%, #1e3728 35%, #051a0e 70%, #0a2e1a 100%); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45); } :root[data-bs-theme="dark"] .home-hot-discounts-title--desktop { color: #d8f5e4; } } /* سکشن تخفیف‌های ویژه: چیدمان درست کارت، ارتفاع یکسان با بزرگترین کارت */ .recent-discounts-swiper .swiper-wrapper { align-items: stretch !important; } /* عرض اولیه اسلایدها قبل از init — هم‌خوان با data-breakpoints (بعد از init عرض را Swiper تنظیم می‌کند) */ .recent-discounts-swiper .swiper-slide { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; text-align: right !important; min-height: 0 !important; height: auto !important; width: calc((100% - 12px) / 2); flex-basis: calc((100% - 12px) / 2); } @media (min-width: 576px) { .recent-discounts-swiper .swiper-slide { width: calc((100% - 24px) / 3); flex-basis: calc((100% - 24px) / 3); } } @media (min-width: 768px) { .recent-discounts-swiper .swiper-slide { width: calc((100% - 32px) / 3); flex-basis: calc((100% - 32px) / 3); } } @media (min-width: 992px) { .recent-discounts-swiper .swiper-slide { width: calc((100% - 42px) / 4); flex-basis: calc((100% - 42px) / 4); } } /* بعد از init، عرض را به Swiper بسپار (جلوگیری از تداخل flex-basis با slidesPerView) */ .recent-discounts-swiper.swiper-initialized .swiper-slide { width: auto; flex-basis: auto; } .recent-discounts-swiper .swiper-slide [class*="col-"] { width: 100% !important; max-width: 100% !important; flex: 1 1 auto !important; min-width: 0 !important; min-height: 0 !important; display: flex !important; } .recent-discounts-swiper .swiper-slide .product-card { height: 100% !important; min-height: 100% !important; writing-mode: horizontal-tb !important; text-align: right !important; display: flex !important; flex-direction: column !important; } .recent-discounts-swiper .swiper-slide .product-card .card-body { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; } .recent-discounts-swiper .swiper-slide .product-card .product-card-content { flex: 1 1 auto !important; } .recent-discounts-swiper .swiper-slide .animate-element, .recent-discounts-swiper .swiper-slide .animate-from-right { transform: none !important; opacity: 1 !important; } .recent-discounts-swiper .product-card .card-title, .recent-discounts-swiper .product-card .card-body, .recent-discounts-swiper .product-card .product-card-content { writing-mode: horizontal-tb !important; white-space: normal !important; } /* سکشن محصولات ویژه / محصولات مرتبط — عرض اولیه از data-initial-slides تا لود اول درست باشد؛ بعد Swiper از data-breakpoints استفاده می‌کند */ .featured-products-swiper .swiper-wrapper { align-items: stretch !important; } .featured-products-swiper .swiper-slide { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; text-align: right !important; min-height: 0 !important; height: auto !important; box-sizing: border-box !important; } /* عرض اولیه قبل از init: ۲ کارت (صفحه اصلی) */ .featured-products-swiper[data-initial-slides="2"] .swiper-slide { width: calc((100% - 12px) / 2); flex-basis: calc((100% - 12px) / 2); } @media (min-width: 576px) { .featured-products-swiper[data-initial-slides="2"] .swiper-slide { width: calc((100% - 24px) / 3); flex-basis: calc((100% - 24px) / 3); } } @media (min-width: 768px) { .featured-products-swiper[data-initial-slides="2"] .swiper-slide { width: calc((100% - 48px) / 4); flex-basis: calc((100% - 48px) / 4); } } @media (min-width: 992px) { .featured-products-swiper[data-initial-slides="2"] .swiper-slide { width: calc((100% - 64px) / 5); flex-basis: calc((100% - 64px) / 5); } } /* عرض اولیه قبل از init: ۱ کارت (محصولات مرتبط) */ .featured-products-swiper[data-initial-slides="1"] .swiper-slide { width: 100%; flex-basis: 100%; } @media (min-width: 768px) { .featured-products-swiper[data-initial-slides="1"] .swiper-slide { width: calc((100% - 48px) / 4); flex-basis: calc((100% - 48px) / 4); } } @media (min-width: 992px) { .featured-products-swiper[data-initial-slides="1"] .swiper-slide { width: calc((100% - 64px) / 5); flex-basis: calc((100% - 64px) / 5); } } .featured-products-swiper .swiper-slide [class*="col-"] { width: 100% !important; max-width: 100% !important; flex: 1 1 auto !important; min-width: 0 !important; min-height: 0 !important; display: flex !important; } .featured-products-swiper .swiper-slide .product-card { height: 100% !important; min-height: 100% !important; writing-mode: horizontal-tb !important; text-align: right !important; display: flex !important; flex-direction: column !important; } .featured-products-swiper .swiper-slide .product-card .card-body { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; } .featured-products-swiper .swiper-slide .product-card .product-card-content { flex: 1 1 auto !important; } .featured-products-swiper .swiper-slide .animate-element, .featured-products-swiper .swiper-slide .animate-from-right { transform: none !important; opacity: 1 !important; } .featured-products-swiper .product-card .card-title, .featured-products-swiper .product-card .card-body, .featured-products-swiper .product-card .product-card-content { writing-mode: horizontal-tb !important; white-space: normal !important; } /* کروسل دسته‌بندی (صفحه اصلی + زیردسته) — عرض اسلاید قبل از init Swiper (مشابه محصولات ویژه) */ .home-categories-swiper .swiper-wrapper, .category-swiper .swiper-wrapper { align-items: stretch !important; } .home-categories-swiper .swiper-slide, .category-swiper .swiper-slide { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; min-height: 0 !important; height: auto !important; box-sizing: border-box !important; } /* صفحه اصلی: data-breakpoints ۲/۳/۴/۶ و فاصله‌ها ۱۲/۱۲/۱۶/۱۶ */ .home-categories-swiper[data-initial-slides="2"] .swiper-slide { width: calc((100% - 12px) / 2); flex-basis: calc((100% - 12px) / 2); } @media (min-width: 576px) { .home-categories-swiper[data-initial-slides="2"] .swiper-slide { width: calc((100% - 24px) / 3); flex-basis: calc((100% - 24px) / 3); } } @media (min-width: 768px) { .home-categories-swiper[data-initial-slides="2"] .swiper-slide { width: calc((100% - 48px) / 4); flex-basis: calc((100% - 48px) / 4); } } @media (min-width: 992px) { .home-categories-swiper[data-initial-slides="2"] .swiper-slide { width: calc((100% - 80px) / 6); flex-basis: calc((100% - 80px) / 6); } } /* صفحه دسته: ۲/۳/۴ کارت و spaceBetween=16 (breakpoint 0 / 576 / 992) */ .category-swiper[data-initial-slides="2"] .swiper-slide { width: calc((100% - 16px) / 2); flex-basis: calc((100% - 16px) / 2); } @media (min-width: 576px) { .category-swiper[data-initial-slides="2"] .swiper-slide { width: calc((100% - 32px) / 3); flex-basis: calc((100% - 32px) / 3); } } @media (min-width: 992px) { .category-swiper[data-initial-slides="2"] .swiper-slide { width: calc((100% - 128px) / 8); flex-basis: calc((100% - 128px) / 8); } } .home-categories-swiper .swiper-slide .category-col, .category-swiper .swiper-slide .category-col { width: 100% !important; min-width: 0 !important; flex: 1 1 auto !important; } /* سکشن مقالات صفحه اصلی — Swiper؛ عرض اسلاید از اول (مانند محصولات) تا کارت اول قبل از init بزرگ نزند */ .home-articles-swiper .swiper-wrapper { align-items: stretch !important; } .home-articles-swiper .swiper-slide { display: flex !important; flex-direction: column !important; align-items: stretch !important; min-height: 0 !important; height: auto !important; width: 100%; flex-basis: 100%; } @media (min-width: 576px) { .home-articles-swiper .swiper-slide { width: calc((100% - 12px) / 2); flex-basis: calc((100% - 12px) / 2); } } @media (min-width: 768px) { .home-articles-swiper .swiper-slide { width: calc((100% - 32px) / 3); flex-basis: calc((100% - 32px) / 3); } } @media (min-width: 992px) { .home-articles-swiper .swiper-slide { width: calc((100% - 32px) / 3); flex-basis: calc((100% - 32px) / 3); } } @media (min-width: 1200px) { .home-articles-swiper .swiper-slide { width: calc((100% - 48px) / 4); flex-basis: calc((100% - 48px) / 4); } } .home-articles-swiper .swiper-slide .col { width: 100% !important; flex: 1 1 auto !important; min-width: 0 !important; } .home-articles-swiper .swiper-slide .card { height: 100% !important; } .home-articles-swiper .swiper-slide .card-title { text-align: right !important; } /* کارت مقاله: بدنه و فوتر مثل کارت محصول — دکمه مشاهده در فوتر */ .article-card.card { display: flex; flex-direction: column; } .article-card .card-body { flex: 1 1 auto; } .article-card .card-title { font-size: 0.875rem; font-weight: 500; line-height: 1.65; margin-bottom: 0; } /* تصویر: گوشه بالای تصویر = گوشه بالای کارت */ .article-card > a.card-post-img-link { border-top-left-radius: var(--bs-card-border-radius); border-top-right-radius: var(--bs-card-border-radius); overflow: hidden; } .article-card .card-img-wrap .card-img-top { border-top-left-radius: .875rem !important; border-top-right-radius: .875rem !important } /* بج تاریخ/آمار روی تصویر: دسکتاپ با هاور از بالا می‌آید؛ موبایل/تاچ همیشه دیده می‌شود */ @media (hover: hover) and (pointer: fine) { .article-card .card-post-overlay { transition: transform 0.2s ease-out, opacity 0.17s ease-out; transform: translate3d(0, calc(-100% - 14px), 0); opacity: 0; } .article-card .card-post-overlay-stats { transition-delay: 0.03s; } .article-card:hover .card-img-wrap .card-post-overlay, .article-card:focus-within .card-img-wrap .card-post-overlay { transform: translate3d(0, 0, 0); opacity: 1; } } @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) { .article-card .card-post-overlay { transition: none; transform: none; opacity: 1; } } .article-card .card-footer { flex-shrink: 0; border-top: 1px solid rgba(0,0,0,.08); padding: 5px 0 !important; background-color: var(--bs-card-cap-bg); } :root[data-bs-theme="dark"] .article-card .card-footer { border-top-color: rgba(255,255,255,.1); } /* تصویر کارت مقاله بدون نسبت ثابت — ارتفاع طبیعی تصویر */ .home-articles-swiper .card-img-wrap .card-img-top { width: 100%; height: auto; display: block; } .home-articles-swiper .card-img-wrap img.lazy { min-height: 0 !important; max-height: none !important; height: auto !important; } .home-articles-swiper .swiper-slide .animate-element, .home-articles-swiper .swiper-slide .animate-from-right { transform: none !important; opacity: 1 !important; } /* سایر سوایپرها (غیر از main-slider) */ .swiper-button-next, .swiper-button-prev { transition: all .3s ease-in-out; color: var(--C5); opacity: .15 !important; top: 50%; margin-top: 0; transform: translateY(-50%); background-color: #00000030; padding: 47px 19px !important; border-radius: 5px } .swiper-button-next:hover, .swiper-button-prev:hover { transition: all .3s ease-in-out; opacity: .9 !important; color: var(--C1) } .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled { opacity: .1 !important; } .swiper-pagination-bullet { width: 8px !important; border-radius: 5px !important } .swiper-pagination-bullet-active { width: 20px !important; border-radius: 5px !important; transition: all .3s ease-in-out } .product-detail { padding-top: 30px; padding-bottom: 30px } .product-title { font-size: 2rem } .product-description { line-height: 1.8; text-align: justify } .detail-box { border-radius: 8px; padding: 20px } .detail-box-title { font-size: 1.1rem; color: var(--C6) } .detail-box ul { padding: 0 } .detail-box-list li { margin-bottom: .5rem; border-bottom: 1px solid var(--C4) } .product-actions .btn { font-size: 1rem; padding: unset 1.5rem } .product-image { border-radius: 10px; max-width: 100%; height: auto } .product-detail-right { display: flex; justify-content: center; border-radius: 12px; overflow: hidden; position: sticky; top: 140px } .product-detail-right img { transition: transform .5s ease-in-out; transform: scale(1) } .product-detail-right img:hover { transition: transform .5s ease-in-out; transform: scale(1.15) } .product-detail-left { padding-right: 20px; padding-top: 10px } .quantity-selector { display: flex; flex-direction: column; align-items: center; } @media (max-width:992px) { .category-description { display: none } .product-actions { flex-direction: column } } .custom-table { border-collapse: collapse; width: 100%; margin-bottom: 1rem } .custom-table td, .custom-table th { border-left: none; border-right: none; border-top: 1px solid #495057; border-bottom: 1px solid #495057; padding: .75rem; vertical-align: middle; line-height: 1.5; font-size: .9rem } .custom-table thead th { background-color: #f8f9fa; font-weight: 700; color: #212529; border-bottom: 2px solid #495057 } .custom-table tbody td { color: #343a40; background: unset } .custom-table tbody tr:nth-child(odd) { background-color: #f8f9fa } .custom-table tbody tr:hover, .product-resources .resource-link:hover { background-color: #e9ecef } .table-bordered > :not(caption) > * > * { border-width: 0 } .table-bordered > :not(caption) > :not(thead) > * > * { border-top-width: 1px } .table-bordered > :not(caption) > thead > * > * { border-bottom-width: 2px } .product-resources .list-group-item { border-left: none; border-right: none; border-top: none; padding-top: .75rem; padding-bottom: .75rem; margin-bottom: 0; display: flex; justify-content: space-between; align-items: center } .product-resources .list-group-item:last-child, .pwa-features li:last-child, .specification-box > .specification-item:last-child { border-bottom: none } .product-resources .list-group-item i.bi { font-size: 1.2rem; color: var(--C6) } .product-resources .list-group-item .file-count { font-size: .9rem; color: var(--C5); margin-right: .5em } .product-resources .resource-link { color: var(--C1); text-decoration: none; padding: .5rem; border-radius: .25rem; background-color: var(--C2); display: inline-flex; justify-content: center; align-items: center } .product-resources .resource-link i.bi-download { font-size: 1rem; color: var(--C1) } .specification-box { padding: 15px } .specification-item { border-bottom: 1px solid var(--C5); padding: 9px 7px 5px } .specification-item:hover { background-color: var(--C5) } [data-bs-theme="dark"] .specification-item:hover { background-color: var(--C1) } .item-title { color: var(--C6); display: block; margin-bottom: 5px; font-size: .9rem } .item-value { font-weight: 700; color: var(--C6); font-size: .9rem; text-align: left; line-break: anywhere } .lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000000a3; display: none; justify-content: center; align-items: center; z-index: 999999; transition: opacity .3s ease-in-out; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); isolation: isolate; transform: translateZ(0); } .lightbox-content { max-width: 90%; max-height: 90% } .lightbox-next, .lightbox-prev { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(0,0,0,.5); color: #fff; border: none; padding: 10px 20px; cursor: pointer; border-radius: 5px } .lightbox-prev { right: 10px } .lightbox-next { left: 10px } .lightbox-title { color: var(--C2); text-align: center; padding: 10px 20px; background-color: rgba(0,0,0,.3); position: absolute; bottom: 0; left: 0; right: 0 } @media (max-width:767px) { .full-width-section { min-height: 400px; text-align: center } .full-width-section-content { padding: 30px } .full-width-section-title { font-size: 2rem; margin-bottom: 20px } .full-width-section-text { font-size: 1rem; margin-bottom: 30px } .full-width-section-button-container { margin-bottom: 40px } .full-width-section-button { padding: 12px 30px; font-size: 1rem } .full-width-section-logo { position: static; margin-top: 30px; text-align: center; bottom: auto; right: auto } .full-width-section-logo-image { margin-left: auto; margin-right: auto } .full-width-section-logo-subtext, .full-width-section-logo-text { text-align: center } .product-detail-left { padding-right: 0 } .product-image { margin-top: 20px } .lightbox-next, .lightbox-prev { top: unset; bottom: 50px } } .lightbox-close, .lightbox-download { top: 20px; background: 0 0; border: none; font-size: 24px; cursor: pointer; z-index: 999; position: absolute; color: #fff } .lightbox-close { left: 30px } .lightbox-download { right: 30px; text-decoration: none } .lightbox-loader { position: absolute; top: 50%; transform: translate(-50%,-50%); border: 4px solid var(--C1); border-top: 4px solid var(--C2); border-radius: 50%; width: 40px; height: 40px; animation: 2s linear infinite spin; display: none } @keyframes spin { 0% { transform: rotate(0) } 100% { transform: rotate(360deg) } } .lightbox-close, .lightbox-content, .lightbox-download, .lightbox-loader, .lightbox-next, .lightbox-prev, .lightbox-title { transition: opacity .3s ease-in-out,.3s ease-in-out } .banner, .banner:hover { transition: opacity .6s } .uploadimgbox { margin: 2px 5px 20px; display: grid; min-height: 50px; min-width: 50px; padding: 13px; background: var(--C4); border-radius: .875rem; } .uploadimgbox img { color: transparent; font-size: 1px; border-radius: 0.875rem } .uploadimgdiv { min-height: 50px; text-align: center; border-radius: 0.875rem; background: url(/assets/images/main/loader-main.gif) center center no-repeat #f1f1f1 } .uploadimg { width: 100% !important; border-radius: 0.875rem } .uploadimgalt { padding: 4% 1% 1.5%; float: right; direction: rtl; text-align: center; font-size: 75%; font-weight: 700 } .uploadimgbox320 { display: inline-grid; float: right; margin: 1%; width: 100% } /* ویدیو داخل متن (مقالات / توضیحات محصول) — کپی از مرکز آپلود در CKEditor */ .content-video-wrap { margin: 1rem 0; max-width: 100%; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,.08); background: #000 } .content-video-wrap .content-video { display: block; width: 100%; height: auto; max-height: 70vh; vertical-align: middle } .card-header > h1, h2, h3, h4, h5, h6 { margin: 5px 0; font-weight: bold } .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) { margin-right: calc(var(--bs-border-width) * -1); border-top-right-radius: 0; border-bottom-right-radius: 0 } .d-flex .card .card-text { } .card .button-with-text-hover { position: absolute; bottom: 10px; left: 10px } .border-right-8 { border-right: 8px solid var(--C5) } .border-right-5 { border-right: 5px solid var(--C5) } .border-right-3 { border-right: 3px solid var(--C5) } @media screen and (max-width:767px) { .border-right-3, .border-right-5, .border-right-8 { border-right: unset } } .lazy, .lazy2, .lazy3, .lazy4, .lazy5 { max-height: 200px !important; min-height: 70px !important; display: block !important; color: transparent !important } .lazy-loaded { max-height: initial !important; min-height: initial !important; display: initial !important } .modal.modal-animate .modal-dialog { transition: transform .5s,opacity .5s } .modal.modal-animate .modal-dialog.hide-animation { transform: translateY(-30px); opacity: 0 } .form-floating > .form-control-plaintext ~ label, .form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-select ~ label { font-size: 80%; font-weight: 700 } .form-floating > .form-control:focus ~ label::after, .form-floating > .form-control:not(:placeholder-shown) ~ label::after { background-color: transparent } .row > .form-floating > label { right: .75rem } .banner { border-radius: 5px; opacity: 1 } .banner:hover { opacity: .85 } .banner img { border-radius: 5px; width: 100% } .accordion-header h4, .pwa-features { padding: 0; margin: 0 } .pwa-features li { display: flex; align-items: center; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid #eee } .pwa-features i { font-size: 1.5rem; color: var(--primary-color) } .linear-loader { position: fixed; top: 0; left: 0; width: 100%; height: 4px; background: 0 0; z-index: 9999; pointer-events: none } .linear-loader .loader-bar { position: absolute; top: 0; left: 0; width: 0; height: 100%; background: var(--C2); transition: width .3s; overflow: hidden } .linear-loader .loader-bar::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-right: 2px solid var(--C2); background: linear-gradient(90deg,rgb(50 50 50 / 0%) 0,hsl(0deg 0% 0% / 60%) 50%,rgb(0 0 0 / 10%) 30%); animation: 1.5s infinite shimmer } [data-bs-theme="dark"] .linear-loader .loader-bar { position: absolute; top: 0; left: 0; width: 0; height: 100%; background: var(--C5); transition: width .3s; overflow: hidden } [data-bs-theme="dark"] .linear-loader .loader-bar::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-right: 2px solid var(--C5); background: linear-gradient(90deg,rgb(50 50 50 / 0%) 0,hsl(0deg 0% 0% / 60%) 50%,rgb(0 0 0 / 10%) 30%); animation: 1.5s infinite shimmer } /* ========== لودر یکسان سایت (صفحه / کارت / مودال) — مثل پنل، با بلر و سازگار با دارک‌مود ========== */ .site-loader-wrap { position: relative; min-height: 60px; } .site-loader-wrap.loading { pointer-events: none; } .site-loader-wrap.loading::before { content: ''; position: absolute; inset: 0; background: rgb(210 249 239 / 78%); z-index: 10; border-radius: inherit; display: block; backdrop-filter: blur(2px); } .site-loader-spinner { position: absolute; inset: 0; margin: auto; z-index: 11; display: none; width: 36px; height: 36px; border: 3px solid rgba(0,0,0,0.08); border-left-color: var(--C1); border-radius: 50%; animation: spin 0.75s linear infinite; } .site-loader-wrap.loading .site-loader-spinner { display: block; } /* لودر لیست محصولات (صفحه دسته) — سمت راست */ #productsWrapper.site-loader-wrap .site-loader-spinner { inset: auto; right: 2rem; top: 50%; margin: 0; transform: translateY(-50%); } .site-loader-spinner-sm { width: 22px; height: 22px; border-width: 2px; } .site-loader-wrap.loading .site-loader-spinner-sm { display: block; } .site-loader-wrap-inline { min-height: 0; } .site-loader-wrap-inline.loading::before { display: none !important; } .site-loader-wrap-inline .site-loader-spinner, .site-loader-wrap-inline .site-loader-spinner-sm { position: static; transform: none; margin: 0; } /* ردیف تعداد محصولات در فیلتر — لودر سمت راست متن */ .products-count-row { display: flex; align-items: center; gap: 0.45rem; } [dir="rtl"] .products-count-row #filtersLoader { order: 1; } [dir="rtl"] .products-count-row #productsCountText { order: 2; } html:not([dir="rtl"]) .products-count-row #productsCountText { order: 1; } html:not([dir="rtl"]) .products-count-row #filtersLoader { order: 2; } .modal-content { background-color: var(--C8); border-radius: 1rem !important } .modal-header { background-color: var(--C1) !important; border: unset !important; border-top-right-radius: 1rem !important; border-top-left-radius: 1rem !important; -moz-border-radius-topleft: 1rem !important; -moz-border-radius-topleft: 1rem !important } .modal-header h5 { color: var(--C2) !important } .modal-header .btn-close { filter: var(--bs-btn-close-white-filter) } /* مودال انتخاب واریانت (master-fa): چیدمان دکمه‌ها مثل صفحهٔ محصول — اسکرول بدنه با modal-dialog-scrollable بوت‌استرپ */ #productVariantModal .product-variant-modal-img-link { display: block; border-radius: 0.5rem; transition: opacity 0.2s ease, box-shadow 0.2s ease; } #productVariantModal .product-variant-modal-img-link:hover { opacity: 0.92; } #productVariantModal .product-variant-modal-img { display: block; width: 80px; height: 80px; border-radius: 0.5rem; overflow: hidden; background: #fff; } #productVariantModal .product-variant-modal-img img { display: block; width: 100%; height: 100%; object-fit: cover; } #productVariantModal .product-variant-modal-title-link .card-title { transition: color 0.2s ease; } #productVariantModal .product-variant-modal-title-link:hover .card-title { color: var(--C3) !important; } #productVariantModal .product-variant-selector { direction: rtl; } #productVariantModal .product-variant-selector .variant-buttons-wrapper { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.7rem; align-items: stretch; padding-top: 0.25rem; } #productVariantModal .variant-buttons-wrapper .variant-select-btn { width: 100%; min-height: 2.8rem; padding: 0.6rem 0.85rem; border-radius: 14px; border: 1px solid var(--C3); background: var(--C8); font-size: 0.7rem; font-weight: 400; line-height: 1.45; text-align: center; justify-content: center; box-shadow: none; transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease; white-space: normal; word-break: keep-all; } #productVariantModal .variant-buttons-wrapper .variant-select-btn:hover { transform: translateY(-1px); border-color: var(--C1); background: var(--C1); } #productVariantModal .variant-buttons-wrapper .variant-select-btn.active, #productVariantModal .variant-buttons-wrapper .variant-select-btn.btn-primary { background: var(--C1); border-color: var(--C1); color: var(--C8); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12); transform: translateY(-1px); } #productVariantModal .variant-buttons-wrapper .variant-color-swatch { width: 16px; height: 16px; border-radius: 999px; flex-shrink: 0; border: 1px solid var(--C3) !important; } #productVariantModal .variant-buttons-wrapper .variant-select-btn.position-relative { overflow: visible; } #productVariantModal .variant-discount-badge { position: absolute; top: -8px; inset-inline-start: 6px; z-index: 2; font-size: 0.85rem; font-weight: 700; line-height: 1.1; padding: 0.15rem 0.35rem; border-radius: 8px; background: #dc3545; color: #fff; white-space: nowrap; max-width: 90%; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 767.98px) { #productVariantModal .product-variant-selector > label { font-size: 0.88rem; } #productVariantModal .product-variant-selector .variant-buttons-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; } #productVariantModal .variant-buttons-wrapper .variant-select-btn { min-height: 2.55rem; padding: 0.5rem 0.65rem; font-size: 0.74rem; border-radius: 12px; } } @media (max-width: 420px) { #productVariantModal .product-variant-selector .variant-buttons-wrapper { grid-template-columns: 1fr; } } [data-bs-theme="dark"] #productVariantModal .variant-buttons-wrapper .variant-select-btn.btn-outline-secondary { color: var(--C6); } /* فوتر مودال واریانت: قیمت/موجودی چندخطی + دکمه سبد */ #productVariantModal .product-variant-modal-footer { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; flex-wrap: nowrap; padding: 0.85rem 1rem; } #productVariantModal .product-variant-modal-footer-meta { min-width: 50%; display: flex; flex-direction: column; align-items: flex-start; gap: 0.12rem; line-height: 1.35; } #productVariantModal .product-variant-modal-price-old { font-size: 0.8rem; font-weight: 500; opacity: 0.85; } #productVariantModal .product-variant-modal-price { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; } #productVariantModal .product-variant-modal-stock { font-size: 0.78rem; margin-top: 0.1rem; } #productVariantModal .product-variant-modal-add-btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; white-space: nowrap; border-radius: 0.75rem; font-weight: 600; padding: 0.55rem 1.1rem; } #productVariantModal .product-variant-modal-add-btn .ti { font-size: 1.15rem; line-height: 1; } #productVariantModal .product-variant-modal-add-btn.is-cart-btn-loading, .add-to-cart-btn.is-cart-btn-loading { justify-content: center; min-width: 2.5rem; } @media (max-width: 767.98px) { #productVariantModal .product-variant-modal-footer { padding: 0.75rem 0.85rem; } #productVariantModal .product-variant-modal-price { font-size: 1.05rem; } #productVariantModal .product-variant-modal-add-btn { width: 2.75rem; height: 2.75rem; min-width: 2.75rem; padding: 0; border-radius: 50%; } #productVariantModal .product-variant-modal-add-btn .product-variant-modal-add-btn-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } } /* ========== دسته‌بندی‌ها — کاروسل و کارت (ساختار مشترک؛ جزئیات کارت در بلاک بعد از [data-bs-theme="dark"] .category-box) ========== */ .home-categories-swiper .category-col { width: 100%; min-width: 0; padding: 0; } /* محو لبهٔ کاروسل: پیش‌فرض پس‌زمینهٔ سکشن؛ در صفحهٔ دستهٔ محصول روی تم روشن رنگ هم‌نشین سفید */ .category-swiper-fade-outer { --cat-fade-w: 2.75rem; --cat-fade-rgb: 248, 249, 250; position: relative; } #categoryPageRoot .category-swiper-fade-outer { --cat-fade-rgb: 255, 255, 255; } /* همان دارک عمومیٔ لبهٔ کاروسل؛ ID صفحهٔ دسته باید بازنویسی شود وگرنه #categoryPageRoot بدون دارک بر سطح بالاتری از [data-bs-theme] غالب است */ [data-bs-theme="dark"] #categoryPageRoot .category-swiper-fade-outer, :root[data-bs-theme="dark"] #categoryPageRoot .category-swiper-fade-outer { --cat-fade-rgb: 10, 25, 21; } .category-swiper-fade-outer::before, .category-swiper-fade-outer::after { content: ""; position: absolute; top: 0; bottom: 0; width: var(--cat-fade-w); z-index: 2; pointer-events: none; opacity: 0; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1); background: rgb(var(--cat-fade-rgb)); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-repeat: no-repeat; mask-size: 100% 100%; } .category-swiper-fade-outer::before { inset-inline-start: 0; } .category-swiper-fade-outer::after { inset-inline-end: 0; } html[dir=rtl] .category-swiper-fade-outer::before { -webkit-mask-image: linear-gradient(to left, #000 0%, rgba(0,0,0,0.45) 50%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(to left, #000 0%, rgba(0,0,0,0.45) 50%, rgba(0,0,0,0) 100%); } html[dir=rtl] .category-swiper-fade-outer::after { -webkit-mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,0.45) 50%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,0.45) 50%, rgba(0,0,0,0) 100%); } html[dir=ltr] .category-swiper-fade-outer::before { -webkit-mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,0.45) 50%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,0.45) 50%, rgba(0,0,0,0) 100%); } html[dir=ltr] .category-swiper-fade-outer::after { -webkit-mask-image: linear-gradient(to left, #000 0%, rgba(0,0,0,0.45) 50%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(to left, #000 0%, rgba(0,0,0,0.45) 50%, rgba(0,0,0,0) 100%); } [data-bs-theme="dark"] .category-swiper-fade-outer { --cat-fade-rgb: 10, 25, 21; } .category-swiper-fade-outer.is-swiper-locked::before, .category-swiper-fade-outer.is-swiper-locked::after { opacity: 0 !important; } .category-swiper-fade-outer.has-edge-fade-start::before { opacity: 1; } .category-swiper-fade-outer.has-edge-fade-end::after { opacity: 1; } .category-col { padding: 0; } .category-box-icon .category-icon { max-height: 30px; max-width: 64px; object-fit: contain; } .category-box-icon-only .category-icon-only { max-height: 56px; max-width: 72px; object-fit: contain; } .category-box-banner { overflow: hidden; } .category-banner-inner { position: relative; padding: 0; overflow: hidden; border-radius: 5px; } .category-banner-full-img { width: 100%; height: auto; display: block; vertical-align: top; position: relative; z-index: 0; opacity: 1; transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1); } .category-banner-title { position: absolute; top: 0.75rem; right: 0.75rem; margin: 0; font-size: 0.95rem; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.6); z-index: 2; pointer-events: none; transition: text-shadow 0.35s ease; } .category-banner-count { position: absolute; bottom: 0.5rem; left: 0.5rem; font-size: 0.8rem; background: rgba(0,0,0,0.5); color: #fff; padding: 0.2rem 0.5rem; border-radius: 4px; z-index: 2; pointer-events: none; transition: background 0.35s ease, box-shadow 0.35s ease; } .category-box.category-box-banner:hover { box-shadow: 0 12px 28px rgba(15, 46, 74, 0.12), 0 2px 10px rgba(143, 31, 47, 0.08), 0 0 0 1px rgba(143, 31, 47, 0.07); } .category-box.category-box-banner:hover .category-banner-full-img { opacity: 0.88; } .category-box.category-box-banner:hover .category-banner-title { text-shadow: 0 2px 8px rgba(0,0,0,0.75); } .category-box.category-box-banner:hover .category-banner-count { background: rgba(0,0,0,0.65); box-shadow: 0 1px 4px rgba(0,0,0,0.25); } :root[data-bs-theme="dark"] .category-box.category-box-banner:hover { box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5), 0 4px 14px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.1); } :root[data-bs-theme="dark"] .category-box.category-box-banner:hover .category-banner-full-img { opacity: 0.8; } :root[data-bs-theme="dark"] .category-box.category-box-banner:hover .category-banner-title { text-shadow: 0 2px 14px rgba(0,0,0,0.95), 0 1px 3px rgba(0,0,0,0.85); } :root[data-bs-theme="dark"] .category-box.category-box-banner:hover .category-banner-count { background: rgba(0,0,0,0.78); box-shadow: 0 2px 10px rgba(0,0,0,0.5); } /* گرید دسته‌های ریشه (/fa/category/) — موبایل: ردیف اول تمام‌عرض + ۲ ستون؛ دسکتاپ: ۳ ستون */ .root-category-grid { display: flex; flex-wrap: wrap; gap: 0.55rem 0.5rem; align-items: stretch; } .root-category-col { flex: 0 0 calc(50% - 0.25rem); max-width: calc(50% - 0.25rem); min-width: 0; box-sizing: border-box; } .root-category-col:first-child { flex: 0 0 100%; max-width: 100%; } .root-category-card { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07); transition: transform 0.3s ease, box-shadow 0.3s ease; } .root-category-card:hover { transform: translateY(-4px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.11); color: inherit; } .root-category-img { position: relative; flex: 0 0 auto; padding-top: 48%; background: linear-gradient(135deg, #f0f0f0 0%, #e5e5e5 100%); background-size: cover; background-position: center; background-repeat: no-repeat; } .root-category-count { position: absolute; bottom: 0.28rem; right: 0.28rem; font-size: 0.58rem; line-height: 1.25; text-align: center; background: rgb(0 45 5 / 54%); color: #fff; padding: 0.12rem 0.28rem; border-radius: 5px; } .root-category-count .ti { font-size: 0.62rem; } .root-category-count .me-1 { margin-left: 0.15rem !important; margin-right: 0 !important; } .root-category-title { margin: 0.35rem 0.35rem 0.45rem; font-size: 0.72rem; font-weight: 600; line-height: 1.35; color: var(--C6); } .root-category-img--all { display: flex; align-items: center; justify-content: center; padding-top: 48%; background: linear-gradient(135deg, color-mix(in srgb, var(--C3, #08a379) 22%, #fff) 0%, color-mix(in srgb, var(--C8, #e0ffef) 65%, #fff) 100%); } .root-category-all-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: clamp(2rem, 6vw, 2.75rem); color: var(--C3, #08a379); opacity: 0.92; } .root-category-all-icon i { font-size: clamp(2rem, 6vw, 2.75rem); } .root-category-card--all:hover .root-category-all-icon { opacity: 1; } :root[data-bs-theme="dark"] .root-category-img--all { background: linear-gradient(135deg, color-mix(in srgb, var(--C3, #047b54) 28%, var(--C2, #10261e)) 0%, var(--C1, #032822) 100%); } @media (min-width: 768px) { .root-category-grid { gap: 1rem 1.25rem; } .root-category-col, .root-category-col:first-child { flex: 0 0 calc((100% - 2.5rem) / 3); max-width: calc((100% - 2.5rem) / 3); } .root-category-img { padding-top: 48%; } .root-category-title { margin: 0.55rem 0.75rem 0.75rem; font-size: 0.98rem; font-weight: 700; line-height: 1.45; } .root-category-count { bottom: 0.5rem; right: 0.5rem; left: auto; font-size: 0.78rem; padding: 0.28rem 0.55rem; border-radius: 8px; text-align: inherit; } .root-category-count .ti { font-size: inherit; } .root-category-count .me-1 { margin-left: 0.25rem !important; } .root-category-card { border-radius: 14px; } } @media (max-width: 767.98px) { .root-category-img { padding-top: 52%; } .root-category-col:first-child .root-category-img { padding-top: 42%; } .root-category-card { border-radius: 10px; } .root-category-all-icon { font-size: 1.65rem; } } @media (max-width: 767px) { .category-swiper .category-col { min-width: 0; } } .category-box .stretched-link { text-decoration: none !important; } .category-box .stretched-link::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; } .category-box { background-color: var(--C5); } /* دارک مود کل سایت و حساب کاربری — یک تنظیم از هدر */ :root[data-bs-theme="dark"] { --C0: #182e28; --C1: #032822; --C2: #10261e; --C3: #047b54; --C4: #1f3a2d; --C5: #81ad9f; --C6: #e5e7eb; --C7: #0e261c; --C8: #0b1411; --C9: #043522; --C10: #032823f0; --selection-bg: #3d8553; --selection-text: #ffffff; color-scheme: dark; --bs-body-bg: #0a1915 !important; --bs-secondary-bg: #022217; } [data-bs-theme="dark"] ::selection { background-color: var(--C5); color: var(--selection-text); } [data-bs-theme="dark"] ::-moz-selection { background-color: var(--C5); color: var(--selection-text); } [data-bs-theme="dark"] { caret-color: var(--C6); } :root[data-bs-theme="dark"] body { background-color: var(--C0); color: var(--C6); } :root[data-bs-theme="dark"] .main { background-color: var(--C8); } /* در دارک: معنی .text-dark و .text-light برعکس — متن خوانا روی پس‌زمینه تیره */ [data-bs-theme="dark"] .text-dark { color: var(--C6) !important; } [data-bs-theme="dark"] .text-light { color: var(--C5) !important; } /* هدر و فوتر خودشان دارک هستند — در دارک مود رنگ‌شان عوض نشود */ :root[data-bs-theme="dark"] .header { --C1: #03281c; --C2: #e7e7ff; --C10: #032820f0; } :root[data-bs-theme="dark"] .footer { --C1: #03281b; --C2: #e7e7ff; --C6: #002f1e; background-color: #00140b !important; } /* تکمیل دارک مود — باکس دسته، سایدبار فیلتر، کارت، دکمه، جستجو */ [data-bs-theme="dark"] .category-box { background-color: var(--C1); color: var(--C6); } [data-bs-theme="dark"] .category-box:hover .card-body { background-color: var(--C4); color: var(--C6); } [data-bs-theme="dark"] .category-box .card-title { color: var(--C6) !important; } [data-bs-theme="dark"] .category-box:hover .card-title { color: var(--C6) !important; } [data-bs-theme="dark"] .category-box .badge { color: var(--C6); } [data-bs-theme="dark"] .category-box-icon .category-icon { filter: hue-rotate(-342deg) saturate(8) brightness(0.8); } [data-bs-theme="dark"] #categoryPageRoot .category-swiper .category-box:not(.category-box-banner):hover .category-icon { filter: hue-rotate(-342deg) saturate(0) brightness(10); } /* کارت دسته — صفحهٔ دسته و سوایپر اصل: یکسان (تم روشن/تیره) */ #categoryPageRoot .category-swiper .category-box, .home-categories-swiper .category-box { border: 2px solid transparent; background-color: var(--C5); border-radius: 5px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; height: 100%; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } #categoryPageRoot .category-swiper .category-box::before, .home-categories-swiper .category-box::before { content: ''; position: absolute; top: 0; right: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--C1) 0%, var(--C3) 100%); transform: scaleX(0); transform-origin: right; transition: transform 0.3s ease; } #categoryPageRoot .category-swiper .category-box:hover, .home-categories-swiper .category-box:hover { box-shadow: 0 12px 24px rgba(143, 31, 47, 0.15); border-color: var(--C1); background: var(--C3); } #categoryPageRoot .category-swiper .category-box:hover::before, .home-categories-swiper .category-box:hover::before { transform: scaleX(1); } #categoryPageRoot .category-swiper .category-box .card-body, .home-categories-swiper .category-box .card-body { padding: unset !important; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; position: relative; z-index: 1; } #categoryPageRoot .category-swiper .category-box .card-title, .home-categories-swiper .category-box .card-title { font-size: 1rem !important; margin-bottom: 0.75rem !important; font-weight: 700 !important; color: var(--C6) !important; line-height: 1.5; transition: color 0.3s ease; } #categoryPageRoot .category-swiper .category-box:hover .card-title, .home-categories-swiper .category-box:hover .card-title { color: var(--C1) !important; } #categoryPageRoot .category-swiper .category-box .badge, .home-categories-swiper .category-box .badge { font-size: 0.8rem !important; padding: 0.4rem 0.8rem !important; border-radius: 20px !important; background: linear-gradient(135deg, var(--C1) 0%, var(--C3) 100%) !important; color: #fff !important; font-weight: 600 !important; box-shadow: 0 2px 6px rgba(143, 31, 47, 0.2); transition: all 0.3s ease; } #categoryPageRoot .category-swiper .category-box:hover .badge, .home-categories-swiper .category-box:hover .badge { transform: scale(1.1); box-shadow: 0 4px 12px rgba(143, 31, 47, 0.3); } [data-bs-theme="dark"] #categoryPageRoot .category-swiper .category-box, [data-bs-theme="dark"] .home-categories-swiper .category-box { background-color: var(--C1); color: var(--C6); } [data-bs-theme="dark"] #categoryPageRoot .category-swiper .category-box:hover .card-body, [data-bs-theme="dark"] .home-categories-swiper .category-box:hover .card-body { background-color: var(--C3); color: var(--C6); } [data-bs-theme="dark"] #categoryPageRoot .category-swiper .category-box .card-title, [data-bs-theme="dark"] .home-categories-swiper .category-box .card-title { color: var(--C3) !important; } [data-bs-theme="dark"] #categoryPageRoot .category-swiper .category-box:hover .card-title, [data-bs-theme="dark"] .home-categories-swiper .category-box:hover .card-title { color: var(--C6) !important; } [data-bs-theme="dark"] #categoryPageRoot .category-swiper .category-box .badge, [data-bs-theme="dark"] .home-categories-swiper .category-box .badge { color: var(--C6); } :root[data-bs-theme="dark"] #categoryPageRoot .category-swiper .category-box:not(.category-box-banner):hover, :root[data-bs-theme="dark"] .home-categories-swiper .category-box:not(.category-box-banner):hover { box-shadow: 0 12px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.12) !important; border-color: rgba(4, 123, 84, 0.55) !important; } :root[data-bs-theme="dark"] #categoryPageRoot .category-swiper .category-box:not(.category-box-banner):hover .card-title, :root[data-bs-theme="dark"] .home-categories-swiper .category-box:not(.category-box-banner):hover .card-title { color: #f3f4f6 !important; } [data-bs-theme="dark"] .product-filters-sidebar { background-color: var(--C2); border: 1px solid var(--C4); color: var(--C6); } [data-bs-theme="dark"] .product-filters-sidebar .form-label { color: var(--C6); } [data-bs-theme="dark"] .product-filters-sidebar .btn-outline-primary { color: var(--C3) !important; border-color: var(--C3) !important; background: transparent !important; } [data-bs-theme="dark"] .product-filters-sidebar .btn-outline-primary:hover { color: var(--C2) !important; background-color: var(--C3) !important; border-color: var(--C3) !important; } [data-bs-theme="dark"] .product-filters-sidebar .input-group .form-control { background-color: var(--C4); border-color: var(--C5); color: var(--C6); } [data-bs-theme="dark"] .product-filters-sidebar .input-group .form-control::placeholder { color: var(--C5); } [data-bs-theme="dark"] .product-filters-sidebar .input-group .form-control:focus { border-color: var(--C3); box-shadow: 0 0 0 0.2rem rgba(235,158,50,.25); } [data-bs-theme="dark"] .card.bghover_c4:hover { box-shadow: 0 0 11px 4px #2f2f2f; } [data-bs-theme="dark"] .card-post-overlay { color: #fff !important; } [data-bs-theme="dark"] .modal-title { color: var(--C6) !important; } [data-bs-theme="dark"] .swiper-button-next, [data-bs-theme="dark"] .swiper-button-prev, [data-bs-theme="dark"] .text-primary { color: var(--C3) !important; } [data-bs-theme="dark"] .swiper-button-next:hover, [data-bs-theme="dark"] .swiper-button-prev:hover { color: var(--C3) !important; } /* اسلایدر صفحه اصلی در دارک */ [data-bs-theme="dark"] .slider-box { background-color: rgba(0,0,0,.55); color: var(--C6); } [data-bs-theme="dark"] .slider-box-title, [data-bs-theme="dark"] .slider-box-text { color: var(--C6); } [data-bs-theme="dark"] .slider-box-button { color: var(--C6); } [data-bs-theme="dark"] .slider-box-button-products { background-color: var(--C3); color: var(--C6); } [data-bs-theme="dark"] .slider-box-button-products:hover { background-color: var(--C4); color: var(--C6); } [data-bs-theme="dark"] .slider-box-button-more { background-color: var(--C4); color: var(--C6); border: 1px solid var(--C5); } [data-bs-theme="dark"] .slider-box-button-more:hover { background-color: var(--C5); color: var(--C6); border-color: var(--C3); } [data-bs-theme="dark"] .main-slider .swiper-pagination-bullet { background-color: rgba(255,255,255,.45) !important; } [data-bs-theme="dark"] .main-slider .swiper-pagination-bullet-active { background-color: var(--C3) !important; } [data-bs-theme="dark"] .main-slider .swiper-button-next, [data-bs-theme="dark"] .main-slider .swiper-button-prev { background: rgba(0, 0, 0, 0.35) !important; color: rgba(255, 255, 255, 0.9) !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } [data-bs-theme="dark"] .main-slider .swiper-button-next:hover, [data-bs-theme="dark"] .main-slider .swiper-button-prev:hover { background: rgba(0, 0, 0, 0.5) !important; color: var(--C3) !important; } [data-bs-theme="dark"] .category-swiper .swiper-button-next, [data-bs-theme="dark"] .category-swiper .swiper-button-prev, [data-bs-theme="dark"] .home-categories-swiper .swiper-button-next, [data-bs-theme="dark"] .home-categories-swiper .swiper-button-prev { background: rgba(0, 0, 0, 0.35) !important; color: rgba(255, 255, 255, 0.9) !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } [data-bs-theme="dark"] .category-swiper .swiper-button-next:hover, [data-bs-theme="dark"] .category-swiper .swiper-button-prev:hover, [data-bs-theme="dark"] .home-categories-swiper .swiper-button-next:hover, [data-bs-theme="dark"] .home-categories-swiper .swiper-button-prev:hover { background: rgba(0, 0, 0, 0.5) !important; color: var(--C3) !important; } /* اسلایدر محتوا (content-slider-hero): لودر و اسلاید HTML در دارک */ [data-bs-theme="dark"] .content-slider-loader { background-color: var(--C2) !important; } [data-bs-theme="dark"] .content-slider-loader .spinner-border { color: var(--C3) !important; } [data-bs-theme="dark"] .content-slider-hero .content-slider-html { background-color: var(--C2); color: var(--C6); } [data-bs-theme="dark"] .content-slider-hero .content-slider-placeholder { background: var(--C2); border-color: rgba(255,255,255,.2); color: var(--C5); } /* full-width-section و industry-category در دارک */ [data-bs-theme="dark"] .full-width-section { color: var(--C6); } [data-bs-theme="dark"] .full-width-section-content { color: var(--C6); } [data-bs-theme="dark"] .full-width-section-title { color: var(--C6); text-shadow: 2px 2px 4px rgba(0,0,0,.6); } [data-bs-theme="dark"] .full-width-section-text { color: var(--C5); text-shadow: 1px 1px 2px rgba(0,0,0,.6); } [data-bs-theme="dark"] .full-width-section-button { color: var(--C6); border: 1px solid var(--C5); background-color: rgba(0,0,0,.3); } [data-bs-theme="dark"] .full-width-section-button:hover { background-color: var(--C3); color: var(--C6); border-color: var(--C3); } [data-bs-theme="dark"] .full-width-section-logo-text, [data-bs-theme="dark"] .full-width-section-logo-subtext { color: var(--C6); } [data-bs-theme="dark"] .industry-category-box { background-color: var(--C4); color: var(--C6); box-shadow: 0 0 15px rgba(0,0,0,.3); } [data-bs-theme="dark"] .industry-category-box:hover { background-color: var(--C3); color: var(--C6); box-shadow: 0 0 20px rgba(0,0,0,.4); } [data-bs-theme="dark"] .industry-category-name { color: var(--C6); } [data-bs-theme="dark"] .industry-category-box .industry-category-button { background-color: var(--C2); color: var(--C6); border-color: var(--C5); } [data-bs-theme="dark"] .industry-category-box:hover .industry-category-button { background-color: var(--C3); color: var(--C6); border-color: var(--C3); } [data-bs-theme="dark"] .industry-category-box .industry-category-button:hover { background-color: var(--C3); color: var(--C6); border-color: var(--C3); } /* ارزش‌افزوده (صفحه محصول) در دارک */ [data-bs-theme="dark"] .va-option-item { background-color: var(--C2); border-color: var(--C5); color: var(--C6); } [data-bs-theme="dark"] .va-option-item:hover { border-color: var(--C5); box-shadow: 0 2px 8px rgba(0,0,0,.25); } [data-bs-theme="dark"] .va-option-item:has(.va-option:checked) { border-color: var(--C3); background-color: rgba(235,158,50,.08); box-shadow: 0 0 0 1px rgba(235,158,50,.25); } [data-bs-theme="dark"] .va-option-item .form-check-label { color: var(--C6); } [data-bs-theme="dark"] .va-option-item .form-check-input.va-option { border-color: var(--C5); background-color: var(--C2); } [data-bs-theme="dark"] .va-option-item .form-check-input:checked { background-color: var(--C3); border-color: var(--C3); } /* دکمه‌های انتخاب واریانت (سایز/رنگ) در دارک — حالت غیرفعال با بوردر و پس‌زمینه مشخص */ [data-bs-theme="dark"] .variant-buttons-wrapper .variant-select-btn.btn-outline-secondary { background-color: var(--C2); border-color: var(--C5); color: var(--C6); } [data-bs-theme="dark"] .variant-buttons-wrapper .variant-select-btn.btn-outline-secondary:hover { border-color: var(--C4); color: var(--C6) !important; background-color: var(--C3); } [data-bs-theme="dark"] .variant-buttons-wrapper .variant-select-btn.active, [data-bs-theme="dark"] .variant-buttons-wrapper .variant-select-btn.btn-primary { border-color: var(--C3); background-color: var(--C3); color: var(--C2); } [data-bs-theme="dark"] .variant-buttons-wrapper .variant-select-btn.active:hover, [data-bs-theme="dark"] .variant-buttons-wrapper .variant-select-btn.btn-primary:hover { background-color: var(--C3); border-color: var(--C7); color: var(--C2); } /* نوار ثابت موبایل صفحه محصول در دارک */ [data-bs-theme="dark"] .product-sticky-bar { background-color: var(--C2); border-top-color: var(--C5); box-shadow: 0 -2px 12px rgba(0,0,0,.4); } [data-bs-theme="dark"] .product-sticky-bar .product-sticky-bar-price .price-value { color: var(--C6); } [data-bs-theme="dark"] .product-sticky-bar .price-currency { color: var(--C6); opacity: .9; } [data-bs-theme="dark"] .product-sticky-bar .product-sticky-qty { color: var(--C6); opacity: .85; } /* مودال‌ها در دارک؛ دکمه outline کارت افزودن به سبد (نه دکمهٔ قلب/سبد آینده صفحه محصول) */ [data-bs-theme="dark"] .modal-content { background-color: var(--C8); } [data-bs-theme="dark"] .modal-header { background-color: var(--C1) !important; } [data-bs-theme="dark"] .add-to-cart-card .btn-outline-primary { color: var(--C3) !important; border-color: var(--C3) !important; background: transparent !important; } [data-bs-theme="dark"] .add-to-cart-card .btn-outline-primary:hover { color: var(--C2) !important; background-color: var(--C3) !important; border-color: var(--C3) !important; } [data-bs-theme="dark"] #savedCartModal .form-control { background-color: var(--C4); border-color: var(--C5); color: var(--C6); } [data-bs-theme="dark"] #savedCartModal .form-control::placeholder { color: var(--C5); } /* منوی پایین موبایل در دارک */ [data-bs-theme="dark"] .mobile-bottom-menu { background-color: var(--C2); } [data-bs-theme="dark"] .mobile-bottom-menu .menu-item { color: var(--C5); } [data-bs-theme="dark"] .mobile-bottom-menu .menu-item:active, [data-bs-theme="dark"] .mobile-bottom-menu .menu-item:focus { color: var(--C6); } [data-bs-theme="dark"] .mobile-bottom-menu .menu-item.active, [data-bs-theme="dark"] .mobile-bottom-menu .menu-item.active:focus { color: var(--C3); font-weight: bold; } [data-bs-theme="dark"] .mobile-bottom-menu .menu-item.active i { color: var(--C3); } /* هر سکشن/المان با bg-white در دارک */ [data-bs-theme="dark"] .bg-white { background-color: var(--C8) !important; color: var(--C6); } [data-bs-theme="dark"] .bg-white h1, [data-bs-theme="dark"] .bg-white h2, [data-bs-theme="dark"] .bg-white h3, [data-bs-theme="dark"] .bg-white h4 { color: var(--C6); } [data-bs-theme="dark"] .bg-white p, [data-bs-theme="dark"] .bg-white li, [data-bs-theme="dark"] .bg-white td { color: var(--C6); } [data-bs-theme="dark"] .bg-white a { color: var(--C3); } [data-bs-theme="dark"] .bg-white a:hover { color: var(--C6); } [data-bs-theme="dark"] .bg-white table { border-color: var(--C5); } [data-bs-theme="dark"] .bg-white th, [data-bs-theme="dark"] .bg-white td { border-color: var(--C5); } /* سوالات متداول (صفحه محصول) — متن پاسخ‌ها در دارک */ [data-bs-theme="dark"] .accordion-body { color: var(--C6); background-color: var(--C2); } [data-bs-theme="dark"] .accordion-body p { color: var(--C6); } [data-bs-theme="dark"] .faq-section h3 { color: var(--C6); } [data-bs-theme="dark"] .faq-section h3 i { color: var(--C3); } [data-bs-theme="dark"] .header-search-dropdown { border-color: var(--C4); color: var(--C6); } [data-bs-theme="dark"] .header-search-inner { border-bottom-color: var(--C4); } [data-bs-theme="dark"] .header-search-input:focus { border-color: var(--C3); } [data-bs-theme="dark"] .header-search-close-btn { background: var(--C4); color: var(--C6); } [data-bs-theme="dark"] .header-search-close-btn:hover { background: var(--C5); color: var(--C6); } [data-bs-theme="dark"] .header-search-all-row { color: var(--C6); } [data-bs-theme="dark"] .header-search-all-row:hover { background: var(--C8); color: var(--C3); } [data-bs-theme="dark"] .header-search-cat-title { color: var(--C5); } [data-bs-theme="dark"] .header-search-cat-title:hover { background: var(--C8); color: var(--C6); } [data-bs-theme="dark"] .header-search-cat-title .header-search-cat-title-query { color: var(--C3); } [data-bs-theme="dark"] .header-search-cat-title .header-search-cat-title-text { color: var(--C5); } [data-bs-theme="dark"] .header-search-cat-title:hover .header-search-cat-title-query { color: var(--C3); } [data-bs-theme="dark"] .header-search-cat-title i.ti-search { color: var(--C5); } [data-bs-theme="dark"] .header-search-cat-title:hover i.ti-search { color: var(--C6); } [data-bs-theme="dark"] .header-search-item { color: var(--C6); } [data-bs-theme="dark"] .header-search-item:hover { background: var(--C8); color: var(--C6); } /* منوی همبرگر در دارک — خط زیر آیتم‌ها روشن نباشد */ [data-bs-theme="dark"] .main-menu-list li { border-bottom-color: rgba(255,255,255,.08); } [data-bs-theme="dark"] .bottom-header .main-menu-list li { border-bottom-color: rgba(255,255,255,.08); } /* مقاله، مگامنو و هدر در دارک */ [data-bs-theme="dark"] .article-body { background-color: var(--C7); } [data-bs-theme="dark"] .header .bottom-header .main-menu-list li.mega-menu-item .dropdown-menu.mega-menu { background-color: var(--C4); border-color: var(--C4); color: var(--C6); } [data-bs-theme="dark"] .header .bottom-header .main-menu-list li.mega-menu-item .dropdown-menu.mega-menu .mega-menu-column-title { color: var(--C6); border-bottom-color: var(--C5); } [data-bs-theme="dark"] .header .bottom-header .main-menu-list li.mega-menu-item .dropdown-menu.mega-menu .mega-menu-links li a.dropdown-item { color: var(--C6); } [data-bs-theme="dark"] .header .bottom-header .main-menu-list li.mega-menu-item .dropdown-menu.mega-menu .mega-menu-links li a.dropdown-item:hover { color: var(--C3); } [data-bs-theme="dark"] .header .bottom-header .main-menu-list li.mega-menu-item .dropdown-menu.mega-menu .mega-menu-link-item { background-color: var(--C2); color: var(--C6); border-bottom-color: var(--C5); } [data-bs-theme="dark"] .header .bottom-header .main-menu-list li.mega-menu-item .dropdown-menu.mega-menu .mega-menu-link-item:hover { background-color: var(--C1); color: var(--C2); } [data-bs-theme="dark"] .header .bottom-header .main-menu-list li.mega-menu-item .dropdown-menu.mega-menu .mega-menu-link-text { color: inherit; } [data-bs-theme="dark"] .mega-menu-wpg .mega-menu-left-panel { background: var(--C8); border-right-color: var(--C5); } [data-bs-theme="dark"] .mega-menu-wpg .mega-menu-left-panel .mega-menu-col-title a { color: var(--C6) !important; } [data-bs-theme="dark"] .mega-menu-wpg .mega-menu-left-panel .mega-menu-col-title a:hover { color: var(--C3) !important; } [data-bs-theme="dark"] .mega-menu-wpg .mega-menu-left-panel .mega-menu-col-links a { color: var(--C5) !important; } [data-bs-theme="dark"] .mega-menu-wpg .mega-menu-left-panel .mega-menu-col-links a:hover { color: var(--C3) !important; } [data-bs-theme="dark"] .mega-menu-wpg .mega-menu-left-panel .mega-menu-all-link { color: var(--C3); } [data-bs-theme="dark"] .mega-menu-wpg .mega-menu-left-panel .mega-menu-all-link:hover { color: var(--C3); background: rgba(255,255,255,.06); } [data-bs-theme="dark"] .mega-menu-wpg .mega-menu-right-panel { background: var(--C4); border-radius: 0 0 0 12px; } [data-bs-theme="dark"] .mega-menu-wpg .mega-menu-cats-header { color: var(--C6); border-bottom-color: var(--C5); } [data-bs-theme="dark"] .mega-menu-wpg .mega-menu-cats-header .ti { color: var(--C5); } [data-bs-theme="dark"] .mega-menu-wpg .mega-menu-main-cats { background: var(--C4); } [data-bs-theme="dark"] .mega-menu-wpg .mega-menu-main-cats li a { color: var(--C6) !important; } [data-bs-theme="dark"] .mega-menu-wpg .mega-menu-main-cats li:hover a, [data-bs-theme="dark"] .mega-menu-wpg .mega-menu-main-cats li.active a { color: var(--C2) !important; background: rgba(255,255,255,.08) !important; border-right-color: var(--C3) !important; } [data-bs-theme="dark"] .mega-menu-wpg .mega-menu-main-cats li a .mega-menu-cat-icon { color: var(--C5); } [data-bs-theme="dark"] .mega-menu-wpg .mega-menu-main-cats li:hover a .mega-menu-cat-icon, [data-bs-theme="dark"] .mega-menu-wpg .mega-menu-main-cats li.active a .mega-menu-cat-icon { color: var(--C3) !important; } [data-bs-theme="dark"] .header.scrolled { box-shadow: 0 13px 20px rgba(0,0,0,.5); } [data-bs-theme="dark"] .header-account-dropdown-menu { border-color: var(--C5); } [data-bs-theme="dark"] .header-account-dropdown-menu .dropdown-item:hover { background-color: rgba(255,255,255,.08); } [data-bs-theme="dark"] .cart-summary-box { background-color: var(--C1); border-color: var(--C5); color: var(--C6); } /* هدر صفحات (عنوان و بردکرامب) در دارک — متن روشن برای خوانایی */ [data-bs-theme="dark"] .header-bg { color: var(--C6) !important; } [data-bs-theme="dark"] .header-bg h2 { color: var(--C6) !important; } [data-bs-theme="dark"] .header-bg .breadcrumb-item { color: var(--C5) !important; } [data-bs-theme="dark"] .header-bg .breadcrumb-item.active { color: var(--C6) !important; } [data-bs-theme="dark"] .header-bg .breadcrumb-item + .breadcrumb-item::before { color: var(--C5) !important; } [data-bs-theme="dark"] .header-bg a { color: var(--C6) !important; } [data-bs-theme="dark"] .header-bg a:hover { color: var(--C3) !important; } /* بردکرامب در دارک (صفحه محصول و هر جایی خارج از header-bg) */ [data-bs-theme="dark"] .breadcrumb-item { color: var(--C5) !important; } [data-bs-theme="dark"] .breadcrumb-item.active { color: var(--C6) !important; } [data-bs-theme="dark"] .breadcrumb-item + .breadcrumb-item::before { color: var(--C5) !important; } [data-bs-theme="dark"] .breadcrumb-item a { color: var(--C6) !important; text-decoration: none; } [data-bs-theme="dark"] .breadcrumb-item a:hover { color: var(--C3) !important; } /* mega-menu-subcats در دارک */ [data-bs-theme="dark"] .mega-menu-subcats { background-color: var(--C8); border-left-color: var(--C5); } [data-bs-theme="dark"] .mega-menu-subcats a { color: var(--C6) !important; } [data-bs-theme="dark"] .mega-menu-subcats a:hover { color: var(--C3) !important; border-bottom-color: var(--C3); } [data-bs-theme="dark"] .mega-menu-wpg .mega-menu-subcats .mega-menu-col-title a { color: var(--C6) !important; } [data-bs-theme="dark"] .mega-menu-wpg .mega-menu-subcats .mega-menu-col-links a { color: var(--C5) !important; } [data-bs-theme="dark"] .mega-menu-wpg .mega-menu-subcats .mega-menu-col-links a:hover { color: var(--C3) !important; } /* صفحه درباره ما در دارک */ [data-bs-theme="dark"] section.bg-light { background-color: var(--C8) !important; } [data-bs-theme="dark"] .about-intro-card { color: var(--C6); } [data-bs-theme="dark"] .about-intro-card h2, [data-bs-theme="dark"] .about-intro-card .lead { color: var(--C6); } [data-bs-theme="dark"] .about-card { background-color: var(--C2); border-color: var(--C5); box-shadow: 0 4px 15px rgba(0,0,0,.25); } [data-bs-theme="dark"] .about-card:hover { box-shadow: 0 8px 25px rgba(0,0,0,.35); border-color: var(--C3); } [data-bs-theme="dark"] .about-card h3 { color: var(--C3); } [data-bs-theme="dark"] .about-card h3::after { background: linear-gradient(90deg, var(--C3) 0%, var(--C5) 100%); } [data-bs-theme="dark"] .about-card-icon { box-shadow: 0 4px 15px rgba(0,0,0,.3); } [data-bs-theme="dark"] .about-card-icon i { color: var(--C6); } [data-bs-theme="dark"] .ceo-message-card { background: linear-gradient(135deg, var(--C2) 0%, var(--C8) 100%); border-color: var(--C5); } [data-bs-theme="dark"] .ceo-message-header { border-bottom-color: var(--C5); } [data-bs-theme="dark"] .ceo-message-header h3 { color: var(--C6); } [data-bs-theme="dark"] .ceo-message-icon i { color: var(--C6); } [data-bs-theme="dark"] .ceo-greeting { color: var(--C6); } [data-bs-theme="dark"] .ceo-salutation, [data-bs-theme="dark"] .ceo-greeting-text { color: var(--C6); } [data-bs-theme="dark"] .ceo-quote { background: linear-gradient(135deg, var(--C4) 0%, var(--C8) 100%); border-right-color: var(--C3); } [data-bs-theme="dark"] .ceo-quote-text { color: var(--C3); } [data-bs-theme="dark"] .ceo-signature { border-top-color: var(--C5); } [data-bs-theme="dark"] .ceo-name { color: var(--C3); } [data-bs-theme="dark"] .ceo-title { color: var(--C5); } /* متن کم‌رنگ در دارک مود — خوانایی روی پس‌زمینه تیره */ [data-bs-theme="dark"] .text-muted { color: var(--C5) !important; } [data-bs-theme="dark"] .site-loader-wrap.loading::before { background: rgb(10 35 27 / 88%); } [data-bs-theme="dark"] .site-loader-spinner { border-color: rgba(255,255,255,0.1); border-left-color: var(--C3); } .site-ajax-overlay { position: fixed; inset: 0; background: rgb(210 249 239 / 78%); z-index: 99990; display: none; align-items: center; justify-content: center; backdrop-filter: blur(3px); } .site-ajax-overlay.show { display: flex; } .site-ajax-overlay .site-loader-spinner { position: static; transform: none; display: block; } [data-bs-theme="dark"] .site-ajax-overlay { background: rgb(11 32 25 / 82%); } @keyframes shimmer { 0% { transform: translateX(-100%) } 100% { transform: translateX(100%) } } .swiper-pagination-bullet { background: var(--C3) !important } .swiper-pagination-bullet-active { background: var(--C1) !important } .back { position: relative; z-index: 1 } .back::before { content: ""; position: absolute; inset: 0; background: url('/assets/images/main/Negarchi-logo-dark.png') center center no-repeat; opacity: .2; z-index: -1; pointer-events: none } .card.bghover_c4:hover { box-shadow: 0 0 11px 4px #c7c7c7; transition: box-shadow .3s } .request-price, .wishlist { width: 220px } .request-price .btn-primary:hover { background-color: #1c7a1c } .wishlist .btn-secondary:hover { background-color: #ffc005 !important; color: var(--C6) } .fixed-bottom-player audio { width: 100%; margin-top: 0 } .audio-player-container.fixed-bottom-player { position: fixed; bottom: 0; left: 0; right: 0; z-index: 999; transition: .3s ease-in-out; opacity: 1; background-color: var(--C2); box-shadow: 0 4px 20px rgba(0,0,0,.8); margin-bottom: 0 !important; border-bottom-right-radius: 0; border-bottom-left-radius: 0 } .audio-player-container.fixed-bottom-player-space { opacity: 0; visibility: hidden; transition: opacity .5s ease-in-out,visibility .5s ease-in-out } .audio-player-container.fixed-bottom-player.hidden { opacity: 0; transform: translateY(100%) } .audio-player-loader { position: absolute; left: 10px; bottom: 15px; width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; z-index: 10; opacity: 1; transition: opacity .3s ease-in-out } #audio-player .audio-player-loader { left: 21px; top: 16px } .audio-player-loader.hidden { opacity: 0; pointer-events: none } .audio-player-loader .spinner { width: 30px; height: 30px; border: 4px solid var(--C1); border-top: 4px solid var(--C2); border-radius: 50%; animation: 1s linear infinite spin } .accordion-body, .accordion-button { border: 1px solid var(--C4); padding: 1rem } .accordion-button { background-color: var(--C2); color: var(--C6); font-weight: 500; text-align: right; transition: .3s } .accordion-body, .faq-section h3 i { color: var(--C1) } .accordion-button:not(.collapsed) { background-color: var(--C1); color: #fff } .accordion-button:focus { box-shadow: none; border-color: var(--C1) } /* فلش آکاردیون (::after): بدون آبی primary بوت‌استرپ؛ هماهنگ لایت/دارک و پس‌زمینه C2 / باز C1 */ .accordion-button::after { margin-right: auto; margin-left: 0; filter: none; opacity: 0.9; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23052a14' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e") !important; } .accordion-button:not(.collapsed)::after { opacity: 1; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e") !important; } [data-bs-theme="dark"] .accordion-button::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2390baa8' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e") !important; opacity: 0.95; } [data-bs-theme="dark"] .accordion-button:not(.collapsed)::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ecfff9' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e") !important; opacity: 1; } /* کارت‌های faq (صفحه مرکزی سوالات، راهنمای خرید): پس شفاف / هایلایت ملایم — فلش با متن */ .faq-accordion .accordion-button::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23052a14' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e") !important; opacity: 0.88; } .faq-accordion .accordion-button:not(.collapsed)::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23294a41' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e") !important; opacity: 1; } [data-bs-theme="dark"] .faq-accordion .accordion-button::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a8cbbf' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e") !important; } [data-bs-theme="dark"] .faq-accordion .accordion-button:not(.collapsed)::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2356e0b8' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e") !important; } .accordion-body { background-color: var(--C0); border-top: none; border-radius: 0 0 8px 8px; text-align: justify; line-height: 1.8 } .accordion-body p { margin-bottom: 0; font-size: 90% } .faq-section { margin-top: 3rem; margin-bottom: 3rem } .faq-section h3 { display: flex; align-items: center; gap: .5rem } /* بدون بولت مرورگر برای