#splash-screen { position: fixed; /* يجعلها تغطي الصفحة */ top: 0; left: 0; width: 100vw; height: 100vh; background-color: #ffffff; /* الخلفية بيضاء */ z-index: 9999; /* فوق كل العناصر */ display: flex; align-items: center; justify-content: center; } .splash-logo { width: 120px; height: auto; animation: fadeIn 1.5s ease; } @keyframes fadeIn { 0% { opacity: 0; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1); } } :root { --main-blue: #304bb3; --light-blue: #5d73d6; } /* ==== خلفية صناعية ==== */ body { background-color: #f4f4f4 !important; background-image: url('https://www.transparenttextures.com/patterns/black-thread-light.png'); background-repeat: repeat; font-family: 'Cairo', sans-serif !important; color: #333 !important; } /* ==== هيدر شفاف مع ظل خفيف ==== */ .header { background-color: rgba(255, 255, 255, 0.95) !important; backdrop-filter: blur(5px); transition: all 0.3s ease-in-out; box-shadow: 0 2px 8px rgba(0,0,0,0.05); } /* ==== أزرار ==== */ button, .btn, .btn-primary { background: linear-gradient(135deg, var(--main-blue), var(--light-blue)) !important; border-radius: 8px !important; color: #fff !important; padding: 10px 20px !important; } /* ==== اللوجو ينبض ==== */ @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } .navbar-brand img { animation: pulse 2s infinite; transition: transform 0.5s ease-in-out; } /* ==== تأثير زوم على صور المنتجات ==== */ .product-item img { transition: transform 0.4s ease-in-out; } .product-item:hover img { transform: scale(1.05); } /* ==== فريم متحرك حول بطاقات المنتجات ==== */ @keyframes spin-border { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .product-item { border-radius: 16px !important; overflow: hidden !important; background-color: #fff !important; padding: 20px !important; position: relative; box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important; transition: all 0.3s ease-in-out; border: 2px solid var(--main-blue); } .product-item:hover { box-shadow: 0 8px 20px rgba(48, 75, 179, 0.15) !important; border-color: var(--light-blue); } .product-item::after { content: ''; position: absolute; top: -4px; left: -4px; width: calc(100% + 8px); height: calc(100% + 8px); border-radius: 20px; border: 2px dashed var(--light-blue); animation: spin-border 10s linear infinite; z-index: 0; } /* ==== القلب ينبض عند الضغط ==== */ @keyframes heartbeat { 0% { transform: scale(1); } 25% { transform: scale(1.2); } 50% { transform: scale(1); } 75% { transform: scale(1.2); } 100% { transform: scale(1); } } .product-item .wishlist-icon { position: absolute; top: 12px; right: 12px; background-color: #fff; color: #e74c3c; border-radius: 50%; padding: 8px; font-size: 18px; z-index: 2; box-shadow: 0 2px 6px rgba(0,0,0,0.1); transition: transform 0.3s; } .product-item .wishlist-icon:active { animation: heartbeat 0.6s ease-in-out; } .product-item .wishlist-icon:hover { transform: scale(1.2); } /* ==== البنرات بشكل 3D + فريم متحرك ==== */ .main-banner, .hero-banner, .banner-wrapper { position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.25); z-index: 1; transform-style: preserve-3d; transition: transform 0.5s ease; } .main-banner:hover, .hero-banner:hover, .banner-wrapper:hover { transform: perspective(1000px) rotateX(3deg) rotateY(-3deg); } .main-banner::before, .hero-banner::before, .banner-wrapper::before { content: ''; position: absolute; top: -4px; left: -4px; width: calc(100% + 8px); height: calc(100% + 8px); border: 2px dashed var(--light-blue); border-radius: 24px; animation: spin-border 12s linear infinite; z-index: 0; } /* ==== تنسيق نص البانرات ==== */ .main-banner h2, .main-banner p { text-align: center !important; color: #fff !important; text-shadow: 0 2px 4px rgba(0,0,0,0.5); } /* ==== قائمة التنقل ==== */ .navbar-nav > li > a { padding: 12px 18px !important; font-weight: bold !important; font-size: 15px !important; transition: all 0.3s !important; border-radius: 6px !important; } .navbar-nav > li > a:hover { background: linear-gradient(135deg, var(--main-blue), var(--light-blue)) !important; color: white !important; } /* ==== التصنيفات الجانبية ==== */ .sidebar-categories a { padding: 10px 15px !important; border-radius: 10px !important; border: 1px solid #eee; background-color: #fff; margin-bottom: 8px; display: block; transition: all 0.3s ease; } .sidebar-categories a:hover { background: linear-gradient(135deg, var(--main-blue), var(--light-blue)) !important; color: #fff !important; border-color: var(--light-blue); } /* ==== الفوتر داكن جذاب ==== */ .footer { background-color: #121212 !important; color: #aaa !important; padding: 30px 0; } .footer a { color: var(--light-blue) !important; } .footer a:hover { text-decoration: underline; } /* ==== إزالة اللون الأخضر من أيقونة العميل العلوية ==== */ .icon-user, .header .icon-user, .customer-icon, .user-icon { background-color: transparent !important; color: #333 !important; font-size: 18px !important; border: none !important; box-shadow: none !important; padding: 6px !important; transition: all 0.3s ease-in-out; } .icon-user:hover, .header .icon-user:hover { color: var(--light-blue) !important; transform: scale(1.05); } /* ==== أسهم السلايدر يمين ويسار - أبيض بالكامل ==== */ .slick-prev, .slick-next, .slider-arrow { color: #fff !important; background-color: rgba(255, 255, 255, 0.2) !important; border-radius: 50% !important; z-index: 10; padding: 10px !important; transition: all 0.3s ease; } .slick-prev::before, .slick-next::before { color: #fff !important; font-size: 24px; opacity: 1 !important; } /* تغيير لون أيقونة المستخدم داخل الزر إلى الأبيض */ .header-btn__icon.sicon-user-circle { color: #ffffff !important; } /* تغيير لون كل الأسهم SVG إلى الأبيض */ svg path[d*="arrow"], svg path[d*="Arrow"], svg path[d*="chevron"], svg path[d*="Chevron"], svg path[d*="keyboard_arrow"], svg path[d*="Keyboard_arrow"] { fill: #ffffff !important; } /* إذا كان السهم داخل زر */ button svg path, a svg path, div svg path { fill: #ffffff !important; } /* البطاقة الأساسية */ .s-product-card-entry { background-color: #ffffff; border-radius: 12px; padding: 10px; position: relative; transition: transform 0.3s ease, box-shadow 0.3s ease; } /* التأثير عند المرور بالماوس - خلف البطاقة */ .s-product-card-entry:hover { transform: translateY(-6px); box-shadow: 0 12px 30px rgba(0, 153, 255, 0.25); /* ظل أزرق فاتح */ } /* استهداف الصورة داخل الكتلة */ .slide--cat-entry img { transition: transform 0.5s ease; } /* التدوير عند المرور */ .slide--cat-entry:hover img { transform: rotate(360deg); } /* فريم أزرق أنيق حول البطاقة كاملة */ .s-product-card-entry { border: 3px solid #1e1eaa; /* لون أزرق واضح */ border-radius: 18px; /* حواف دائرية أنيقة */ padding: 15px; background-color: #ffffff; /* خلفية بيضاء داخلية */ transition: box-shadow 0.3s ease, transform 0.3s ease; } /* حركة عند المرور لإبراز البطاقة */ .s-product-card-entry:hover { box-shadow: 0 10px 25px rgba(0, 123, 255, 0.2); /* ظل أزرق ناعم */ transform: translateY(-5px); } .s-reviews-testimonial__icon svg { fill: #007bff; /* أزرق */ } /* === تأثير وهج / نبض أزرق خلف البنرات === */ img[src*="cdn.salla.sa/form-builder"] { position: relative; z-index: 1; box-shadow: 0 0 10px rgba(0, 123, 255, 0.5); animation: glowPulse 2.5s infinite ease-in-out; border-radius: 06px; } /* إضافة إطار أزرق منحني للصور داخل صفحة المنتج */ img.object-contain { border: 3px solid #1e1eaa; /* أزرق */ border-radius: 12px; /* منحنيات الزوايا */ padding: 4px; box-shadow: 0 4px 10px rgba(0, 123, 255, 0.2); /* ظل خفيف */ transition: transform 0.3s ease; } img.object-contain:hover { transform: scale(1.03); /* تكبير بسيط عند المرور */ } /* تأكد من أن كرت المنتج لديه موقع نسبي */ custom-salla-product-card.s-product-card-out-of-stock { position: relative; } /* العبارة في وسط القالب، شفافة قليلاً */ custom-salla-product-card.s-product-card-out-of-stock::before { content: " خلصت الكمية "; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(222, 0, 0, 0.8); /* شفافية أعلى */ color: #fff; font-size: 22px; font-weight: bold; padding: 10px 40px; border-radius: 8px; z-index: 10; text-align: center; pointer-events: none; } /* تغيير لون نجوم التقييم إلى ذهبي */ .s-rating-stars-btn-star svg path { fill: #FFD700 !important; /* اللون الذهبي */ }

a[href*="offers"], 
a[href*="discounts"] {
    display: none !important;
}