/* Add custom CSS styles below */ /* font */ @import url("https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800;900&display=swap"); * { font-family: "Cairo", sans-serif; } /* global */ .md\:mb-\[112px\] { margin-bottom: 25px; } .main-nav-container.fixed-pinned .inner { background-color: rgba(0, 0, 0, 0.1882352941); } /* top slider */ i.sicon-lightning { color: #fff; } .slider-top * { color: #fff !important; } .top-navbar { display: none; } header.store-header { gap: 0; } .index .navbar-brand img{ filter:brightness(0) invert(1) } .navbar-brand img { max-height: 10rem; width: 100%; } .main-menu li > a { font-size: 1rem; } .main-nav-container.fixed-pinned .navbar-brand img { max-height: 65px; } .index .main-menu li.root-level > a { color: white; } .index #mainnav svg path { stroke: white; } .main-menu { justify-content: center; } .main-menu li.root-level > a { padding: 0.5rem 1rem; } /* main banner */ .landing-page-fixed-bannar-0 { background-size: cover; } @media (min-width: 768px) { .landing-page-fixed-bannar-0 .container { width: 50%; margin-left: 5%; } } .landing-page-fixed-bannar-7 h1, .landing-page-fixed-bannar-0 h1 { margin-top: 7rem; font-size: 36px; font-weight: 700; line-height: 45px; } .landing-page-fixed-bannar-7 p, .landing-page-fixed-bannar-0 p { font-size: 24px; line-height: 32px; max-width: 650px; margin-top: 1rem ; } .landing-page-fixed-bannar-7 .w-\[100\%\], .landing-page-fixed-bannar-0 .w-\[100\%\] { width: 80%; margin-right: 5%; } /* categories */ .g_cat .mb-\[55px\] { margin: 2rem auto !important; } .g_cat { margin-bottom: 1rem; } .ads p { color: black; } .g_cat .grid-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 768px) { .g_cat .swiper-wrapper { justify-content: center; } } /* offers */ .product_deadline { box-shadow: none; } .product_deadline { background-color: white; border-radius: 0.5rem; } .weeklyOffers .flex.justify-between.h-full.flex-col-reverse.lg\:flex-row.swiper-slide.swiper-slide-active { display: flex; flex-direction: row; } .dead_line { margin-top: 2rem; margin-bottom: 2rem; } .product_deadline salla-add-product-button div { height: 100%; } .product_deadline .data .s-button-primary { color: #fff; } .ad-star-btn { background-color: var(--color-primary) !important; } .s-block--best-offers { margin: 2rem auto; } .s-product-card-image-cover, .s-product-card-image-contain { -o-object-fit: cover; object-fit: cover; height: 300px; } .s-block--photos-slider:not(:first-of-type) { margin: 2rem 0; } .slider-bannars { padding: 0; margin: 2rem auto; } .slider-bannars h2 { color: var(--color-primary); } .slider-bannars button { border: 1px solid var(--color-primary); background-color: white !important; } .landing-page-fixed-bannar-7 { max-height: 555px; } .g_features { margin: 2rem 0 !important; } .section_c_r { gap: 0; } .section_c_r .justify-center { gap: 0; } .section_c_r { margin: 2rem auto; } .outof-stock { color: white; } section.weeklyOffers{ background: linear-gradient(180deg, #000000 28.77%, #D7C358 100%); } .banner_ad > div:not(.img1) .text { background-color: rgba(255, 255, 255, 0.25); margin: 0; height: 100%; display: flex; align-items: center; justify-content: center; } .banner_ad .bg-cover { background-position: center; background-size: cover; } .banner_ad .item-text { font-size: 32px; line-height: 1.2; margin-bottom: 1rem; } #video-banner .video-parent .bg-image { object-fit: cover; max-width: 100%; } #video-banner .video-parent::after { display: none; } footer .s-apps-icons h3, footer p.text-sm.text-\[\#636363\], footer h2.mb-4.text-sm.font-medium, footer h2.text-xl.font-semibold { color: #fff; } footer input#mc-embedded-subscribe { color: var(--color-primary); background-color: #fff; } .copyright-text p, .copyright-text p a:hover { color: white !important; } .store-footer a:hover { color: #ae445a; } footer .relative.bg-\[var\(--s-color\)\].py-8 { padding-bottom: 0; } footer .m-auto.flex.justify-start.max-w-\[1300px\].items-center.flex-wrap.max-lg\:justify-start.gap-9.md\:gap-6.px-5 { padding: 1rem; text-align: center; justify-content: center; } .s-payments-list-item { background-color: white; } footer img.max-w-24.mb-2 { filter: brightness(0); } @media (min-width: 992px) { .rtl\:lg\:pl-20:where([dir="rtl"], [dir="rtl"] *) { padding-left: 1rem; } } @media (max-width: 767px) { .s-block--best-offers { margin: 1rem auto; } .weeklyOffers .flex.justify-between.h-full.flex-col-reverse.lg\:flex-row.swiper-slide.swiper-slide-active { display: flex; flex-direction: column-reverse; } .landing-page-fixed-bannar-0 { background-size: cover; background-color: rgba(0, 0, 0, 0.25); background-blend-mode: overlay; } .landing-page-fixed-bannar-7, .landing-page-fixed-bannar-0 { max-height: 425px; } .landing-page-fixed-bannar-0 .container, .landing-page-fixed-bannar-7 .container { width: fit-content; margin-left: auto; } .gap-8 { gap: 0.5rem; } section:nth-child(1 of .g_cat) { margin-bottom: 2rem; } section:nth-child(2 of .g_cat) .container { overflow:visible } .landing-page-fixed-bannar-7 .w-\[100\%\], .landing-page-fixed-bannar-0 .w-\[100\%\] { width: 100%; margin-right: auto; text-align: center !important; } .landing-page-fixed-bannar-7 h1, .landing-page-fixed-bannar-0 h1 { width: 100%; margin-top: 7rem; font-size: 1.25rem; line-height: 1.5; text-align: center; padding: 0.5rem; } .landing-page-fixed-bannar-7 h1 { margin-top: 5rem; border-radius: 0.5rem; background-color: rgba(255, 255, 255, 0.5); } .ads .img .over .text { text-align: center; justify-content: center; align-items: center !important; } .banner_ad .item-text { font-size: 18px; } .banner_ad .img1 .text { width: 80%; } .g_cat h3 { font-size: 1rem; } .s-products-slider-card { max-width: 215px !important; } #slider_bannars_5.slider-bannars .slider-bannars-moving { height: 300px; } .slider-bannars h2 { font-size: 1.25rem; } #video-banner.h-\[400px\] { height: 200px; margin-bottom: 2rem; } .mb-\[56px\] { margin-bottom: 25px; } .footer-is-light .store-footer { padding: 0; } .mb-\[120px\] { margin-bottom: 70px; } salla-user-menu.hydrated { width: fit-content; display: block; margin: auto; } footer .flex.justify-center.gap-6 { flex-direction: column; } #contact-slot, .contact-custom { background: transparent; } } /* تعديل عناوين الأقسام زي "منتجات جميلة" */ .g_cat h3, .section-title, .section-title h3 { background: none !important; /* إزالة أي خلفية أو صورة */ border: 1px solid #000; /* إطار أسود */ color: #000 !important; /* لون النص أسود */ padding: 0.5rem 1rem; /* مسافة داخلية */ border-radius: 0 !important; /* زوايا حادة */ display: inline-block; /* الإطار على قد النص */ } /* 1- إخفاء الشريط الأحمر العلوي */ .slider-top { display: none !important; } /* 2- إزالة البرواز الذهبي في العناوين */ .g_cat h3, .section-title, .section-title h3 { background: none !important; border: none !important; color: #000 !important; padding: 0.5rem 1rem; border-radius: 0 !important; display: inline-block; } /* 3- تغيير لون شريط النشرة البريدية للأسود */ footer .bg-\[var\(--s-color\)\] { background-color: #000 !important; } /* إزالة البرواز/الفرشة الذهبية مهما كان مصدرها */ /* العنوان نفسه */ .g_cat h3, .section-title, .section-title h3 { background: none !important; background-image: none !important; border: none !important; box-shadow: none !important; color: #000 !important; display: inline-block; padding: 0.5rem 1rem; } /* أي عناصر داخل العنوان قد تكون بتحط الخلفية */ .g_cat h3 *, .section-title *, .section-title h3 * { background: none !important; background-image: none !important; border: none !important; box-shadow: none !important; } /* لو البرواز معمول بـ ::before / ::after */ .g_cat h3::before, .g_cat h3::after, .section-title::before, .section-title::after, .section-title h3::before, .section-title h3::after { content: none !important; background: none !important; background-image: none !important; border: none !important; box-shadow: none !important; } /* أحيانًا بتكون صورة مضافة داخل العنوان */ .g_cat h3 img, .section-title img { display: none !important; }/* تغيير لون الشريطين الأصفر في الفوتر (أعلى وأسفل) للأسود */ footer .bg-\[var\(--s-color\)\], footer [class*="bg-\\[var\\(--s-color\\)\\]"] { background-color: #000000 !important; /* أسود */ background-image: none !important; } /* تغيير لون النصوص داخلهم للأبيض عشان تبقى مقروءة */ footer .bg-\[var\(--s-color\)\] *, footer [class*="bg-\\[var\\(--s-color\\)\\]"] * { color: #ffffff !important; } /* تغيير لون أيقونات القلب والشنطة للأبيض */ header .sicon-heart, header .sicon-bag { color: #ffffff !important; stroke: #ffffff !important; fill: #ffffff !important; } /* تغيير لون أيقونات القلب والشنطة للأبيض سواء كانت SVG أو Font Icon */ svg[class*="heart"], svg[class*="bag"], i[class*="heart"], i[class*="bag"] { color: #ffffff !important; /* للأيقونات النصية */ fill: #ffffff !important; /* للأيقونات SVG */ stroke: #ffffff !important; /* حدود الأيقونة SVG */ } /* جعل أيقونات القلب والشنطة بيضاء بالكامل */ svg[class*="heart"] path, svg[class*="bag"] path, i[class*="heart"] path, i[class*="bag"] path { fill: #ffffff !important; stroke: #ffffff !important; } /* لو الأيقونة Font Icon مش SVG */ i[class*="heart"], i[class*="bag"] { color: #ffffff !important; } /* قلب لون المتجر العام إلى أسود */ :root { --s-color: #000000 !important; } footer { --s-color: #000000 !important; } /* تأكيد داخل الفوتر */ /* أي عنصر لونه متضبط بـ var(--s-color) داخل الفوتر */ footer [class*="bg-\\[var\\(--s-color\\)\\]"], footer .bg-\[var\(--s-color\)\], footer [style*="--s-color"], footer [style*="background:#c2a620"], footer [style*="background-color:#c2a620"]{ background-color: #000 !important; background-image: none !important; border-color: #000 !important; } footer [class*="bg-\\[var\\(--s-color\\)\\]"] *, footer .bg-\[var\(--s-color\)\] * { color: #fff !important; } /* العنوان نفسه */ .g_cat .section-title, .g_cat h3, .section-title, .section-title h3 { background: none !important; background-image: none !important; border: none !important; box-shadow: none !important; color: #000 !important; display: inline-block; padding: .5rem 1rem; } /* امسح أي before/after بيضيفوا الفرشة */ .g_cat .section-title::before, .g_cat .section-title::after, .g_cat h3::before, .g_cat h3::after, .section-title::before, .section-title::after, .section-title h3::before, .section-title h3::after { content: none !important; display: none !important; background: none !important; background-image: none !important; border: 0 !important; box-shadow: none !important; } /* في بعض القوالب بتكون صورة داخلية */ .g_cat .section-title img, .g_cat h3 img { display: none !important; } /* لو اللون ماشي بالـ currentColor خلّي الأب أبيض */ .store-header, header.store-header, .main-nav-container { --icon-color: #fff; /* لو فيه متغير داخلي */ } /* أجبر الأيقونات نفسها */ header .s-icons a, header .s-icons button, header a[class*="icon"], header button[class*="icon"] { color: #ffffff !important; } /* أي SVG داخل الهيدر */ header svg, header svg * { fill: #ffffff !important; stroke: #ffffff !important; } /* احتياطي: لو الأسماء فيها heart/bag */ header svg[class*="heart"] *, header svg[class*="bag"] * { fill:#fff !important; stroke:#fff !important; /* قتل البرواز الذهبي لعناوين الأقسام نهائيًا */ .g_cat .section-title, .g_cat h3, .section-title, .section-title h3, .section-header, .section-header .section-title, .section-title .title { background: none !important; background-image: none !important; border: 0 !important; box-shadow: none !important; -webkit-mask: none !important; mask: none !important; border-image: none !important; } /* لو البرواز جاى من before/after */ .g_cat .section-title::before, .g_cat .section-title::after, .g_cat h3::before, .g_cat h3::after, .section-title::before, .section-title::after, .section-title h3::before, .section-title h3::after { content: none !important; display: none !important; background: none !important; background-image: none !important; border: 0 !important; box-shadow: none !important; -webkit-mask: none !important; mask: none !important; border-image: none !important; } /* لو البرواز صورة/ SVG داخل العنوان */ .g_cat .section-title img, .g_cat h3 img, .section-title img, .section-title svg { display: none !important; } /* لو في عنصر داخلي هو اللي شايل الخلفية */ .g_cat .section-title *[style*="background"], .section-title *[style*="background"], .g_cat .section-title *[style*="background-image"], .section-title *[style*="background-image"] { background: none !important; background-image: none !important; } /* احتياطي لاستهداف أي brush/فرشة */ .g_cat .section-title [class*="brush"], .section-title [class*="brush"] { display: none !important; } /* رجّع لون نصوص الفوتر العادية لأسود */ footer, .store-footer { color: #000 !important; } footer a, footer p, footer h1, footer h2, footer h3, footer h4, footer h5, footer h6, footer li, footer span, footer div { color: #000 !important; } /* استثناء: داخل الشرائط/الصناديق اللي لونها من متغيّر القالب خلّي النص أبيض */ footer .bg-\[var\(--s-color\)\] *, footer [class*="bg-\\[var\\(--s-color\\)\\]"] * { color: #fff !important; } /* لو كان عندك قواعد قديمة كانت بتجبر الفوتر على الأبيض، عطّلها */ footer .s-apps-icons h3, footer p.text-sm.text-\[\#636363\], footer h2.mb-4.text-sm.font-medium, footer h2.text-xl.font-semibold, .copyright-text p, .copyright-text p a:hover { color: inherit !important; /* خليها تمشي مع القاعدة العامة فوق */ } /* تأكيد لون الشريطين نفسهم (اللي فوق النشرة وتحت الحقوق) أسود */ footer .bg-\[var\(--s-color\)\], footer [class*="bg-\\[var\\(--s-color\\)\\]"] { background-color: #000 !important; background-image: none !important; border-color: #000 !important; } /* رجّع لون نصوص الفوتر العادية لأسود */ footer, .store-footer { color: #000 !important; } footer a, footer p, footer h1, footer h2, footer h3, footer h4, footer h5, footer h6, footer li, footer span, footer div { color: #000 !important; } /* استثناء: داخل الشرائط/الصناديق اللي لونها من متغيّر القالب خلّي النص أبيض */ footer .bg-\[var\(--s-color\)\] *, footer [class*="bg-\\[var\\(--s-color\\)\\]"] * { color: #fff !important; } /* لو كان عندك قواعد قديمة كانت بتجبر الفوتر على الأبيض، عطّلها */ footer .s-apps-icons h3, footer p.text-sm.text-\[\#636363\], footer h2.mb-4.text-sm.font-medium, footer h2.text-xl.font-semibold, .copyright-text p, .copyright-text p a:hover { color: inherit !important; /* خليها تمشي مع القاعدة العامة فوق */ } /* تأكيد لون الشريطين نفسهم (اللي فوق النشرة وتحت الحقوق) أسود */ footer .bg-\[var\(--s-color\)\], footer [class*="bg-\\[var\\(--s-color\\)\\]"] { background-color: #000 !important; background-image: none !important; border-color: #000 !important; }/* النصوص العادية في الفوتر باللون الأسود */ footer, footer * { color: #000000 !important; } /* النصوص فوق الخلفية السوداء (الشريطين) باللون الأبيض */ footer .bg-\[var\(--s-color\)\] *, footer [class*="bg-\\[var\\(--s-color\\)\\]"] *, footer .bg-black *, footer [style*="background-color:#000000"] * { color: #ffffff !important; }/* 1) إلغاء أي تلوين عام اتطبق على كل الـ SVGs/الأيقونات في الموقع */ svg, svg *, i { fill: unset !important; stroke: unset !important; color: inherit !important; } /* 2) خلّي أيقونات الهيدر بس أبيض (شنطة/قلب) */ header .sicon-bag, header .sicon-heart, header [class*="bag"], header [class*="heart"] { color: #fff !important; } header [class*="bag"] svg, header [class*="bag"] svg *, header [class*="heart"] svg, header [class*="heart"] svg * { fill: #fff !important; stroke: #fff !important; } /* 3) الفوتر يرجع نصه أسود عادي */ footer, footer * { color: #000 !important; } /* 4) استثناء: النص جوه الشريطين اللي خلّيناهم سود يكون أبيض */ footer .bg-\[var\(--s-color\)\] *, footer [class*="bg-\\[var\\(--s-color\\)\\]"] * { color: #fff !important; }