* ========================================== 🌌 SPACE THEME – FINAL CLEAN CSS (V2) ========================================== */ /* ------------------------------------------ 1. GLOBAL & BACKGROUND FIXES ------------------------------------------ */ body { /* خلفية الفضاء الأساسية */ background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%); position: relative; overflow-x: hidden; color: #fff; /* ضمان أن النص الافتراضي أبيض */ } body#app { background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%) !important; } .app-inner.flex.flex-col.min-h-full { background: transparent !important; } /* طبقات النجوم (طبقتان فقط عبر CSS) */ body::before, body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; /* النجوم خلف كل شيء */ } /* الطبقة البعيدة */ body::before { background-image: radial-gradient(circle, #fff 0.5px, transparent 0.5px), radial-gradient(circle, rgba(255,255,255,.8) .3px, transparent .3px), radial-gradient(circle, rgba(255,255,255,.4) .2px, transparent .2px); background-size: 550px 550px, 250px 250px, 80px 80px; background-position: 0 0, 130px 270px, 300px 200px; background-repeat: repeat; animation: stars-move-1 240s linear infinite; } /* الطبقة المتوسطة */ body::after { background-image: radial-gradient(circle, #fff 1px, transparent 1px), radial-gradient(circle, rgba(200,220,255,.8) .7px, transparent .7px); background-size: 450px 450px, 200px 200px; background-position: 0 0, 200px 150px; background-repeat: repeat; animation: stars-move-2 180s linear infinite; } /* حاوية النجوم اللامعة (تُملأ بالـJS) */ #stars-bright { position: fixed; inset: 0; pointer-events: none; z-index: -1; } /* أنواع النجوم */ .star { position: absolute; background: #fff; border-radius: 50%; animation: twinkle linear infinite; } .star-large { width: 2px; height: 2px; box-shadow: 0 0 6px 2px rgba(255,255,255,.8); animation-duration: 3s; } .star-medium { width: 1.5px; height: 1.5px; box-shadow: 0 0 4px 1px rgba(255,255,255,.6); animation-duration: 4s; } .star-small { width: 1px; height: 1px; box-shadow: 0 0 2px .5px rgba(255,255,255,.4); animation-duration: 5s; } .star-blue { background: #aaccff; box-shadow: 0 0 4px 1px rgba(170,204,255,.7); } .star-red { background: #ffccaa; box-shadow: 0 0 4px 1px rgba(255,204,170,.6); } /* الحركات */ @keyframes stars-move-1 { from { transform: translateY(0) translateX(0); } to { transform: translateY(-100px) translateX(-50px); } } @keyframes stars-move-2 { from { transform: translateY(0) translateX(0); } to { transform: translateY(-80px) translateX(40px); } } @keyframes twinkle { 0%,100% { opacity: .3; transform: scale(1); } 50% { opacity: 1; transform: scale(1.2); } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes pulse { 0%,100% { opacity: .6; } 50% { opacity: 1; } } /* ------------------------------------------ 2. LOADER & TRANSITION FIXES ------------------------------------------ */ .page-transition-overlay { position: fixed; inset: 0; background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%) !important; z-index: 99999; /* يجب أن يكون أعلى من كل شيء */ display: flex; align-items: center; justify-content: center; flex-direction: column; opacity: 1; /* يبدأ مرئياً */ pointer-events: all; transition: opacity .6s ease; } .loading-spinner { width: 60px; height: 60px; border: 4px solid #1e90ff; border-top-color: transparent; border-radius: 50%; animation: spin 1s linear infinite; } .loading-text { color: #fff; margin-top: 1rem; font-size: 1.2rem; } /* ------------------------------------------ 3. HEADER & NAVIGATION (Glassmorphism) ------------------------------------------ */ .main-nav-container { background: rgba(27,39,53,.85) !important; backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255,255,255,.1); box-shadow: 0 8px 32px rgba(0,0,0,.4); position: relative; z-index: 100; /* الهيدر فوق كل شيء ما عدا الـ Loader */ } .top-navbar { background: rgba(27,39,53,.7) !important; backdrop-filter: blur(15px); } /* أيقونات الهيدر */ .header-btn__icon { color: #fff !important; background: rgba(255,255,255,.1) !important; border: 1px solid rgba(255,255,255,.2) !important; border-radius: 12px !important; transition: all .3s ease; backdrop-filter: blur(10px); } .header-btn__icon:hover { background: rgba(255,255,255,.2) !important; box-shadow: 0 0 20px rgba(100,150,255,.4); transform: translateY(-2px); } .sicon-menu::before { color: #fff !important; } /* قائمة الجوال (إصلاح زر الإغلاق) */ .mm-spn.mm-spn--light { background: rgba(9,10,15,.98) !important; backdrop-filter: blur(20px); color: #fff !important; } /* إصلاح زر الإغلاق (X) في القائمة الجانبية */ .mm-spn .mm-close { background: #ff4d4d !important; /* خلفية حمراء واضحة */ border-radius: 8px !important; opacity: 1 !important; } .mm-spn .mm-close::before, .mm-spn .mm-close::after { background: #fff !important; /* خطوط بيضاء */ } /* ------------------------------------------ 4. PRODUCT CARDS & BUTTONS ------------------------------------------ */ .s-product-card-entry { background: rgba(255,255,255,.08) !important; backdrop-filter: blur(15px); border: 1px solid rgba(255,255,255,.15); border-radius: 20px !important; box-shadow: 0 8px 32px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.05); transition: all .4s cubic-bezier(.175,.885,.32,1.275); overflow: hidden; position: relative; z-index: 1; } .s-product-card-entry:hover { transform: translateY(-12px) scale(1.02); border-color: rgba(100,150,255,.4) !important; box-shadow: 0 16px 48px rgba(100,150,255,.25), inset 0 0 0 1px rgba(100,150,255,.2), 0 0 40px rgba(100,150,255,.15); } /* تأثير الـ hover الداخلي */ .s-product-card-entry::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle,rgba(100,150,255,.1) 0%,transparent 70%); opacity: 0; transition: opacity .4s; } .s-product-card-entry:hover::before { opacity: 1; } /* صورة المنتج */ .s-product-card-image { background: rgba(255,255,255,.05) !important; border-radius: 16px; overflow: hidden; position: relative; } .s-product-card-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg,rgba(100,150,255,.1) 0%,transparent 50%); opacity: 0; transition: opacity .3s; } .s-product-card-entry:hover .s-product-card-image::after { opacity: 1; } /* اسم المنتج (إصلاح نهائي) */ .s-product-card-content-title a, .s-product-card-entry h3, .s-product-card-entry .product-title { color: #FFFFFF !important; font-weight: 700 !important; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important; } /* سعر المنتج (إصلاح نهائي) */ .s-product-card-price, .s-product-card-entry .price, .s-product-card-entry .product-price { color: #82c3ff !important; font-weight: 800 !important; font-size: 1.2em !important; text-shadow: 0 0 12px rgba(130, 195, 255, 0.7) !important; margin-top: 8px !important; display: block !important; } .s-product-card-price .sicon-sar { color: #82c3ff !important; } /* زر المفضلة (القلب) - إصلاح جذري */ .s-product-card-wishlist-btn.s-button-wrap, .s-product-card-wishlist-btn .s-button-element { all: unset !important; position: absolute !important; top: 10px; left: 10px; z-index: 10; cursor: pointer; } .s-product-card-wishlist-btn .sicon-heart { color: rgba(255, 255, 255, 0.7) !important; font-size: 20px !important; transition: all 0.2s ease-in-out !important; text-shadow: 0 1px 3px rgba(0,0,0,0.5); } .s-product-card-wishlist-btn:hover .sicon-heart { color: #FFFFFF !important; transform: scale(1.15); } .s-product-card-wishlist-btn.added .sicon-heart, .s-product-card-wishlist-btn.favorited .sicon-heart { color: #ff6b81 !important; transform: scale(1.1); } /* زر “أضف للسلة” */ salla-add-product-button[width="wide"] { background: linear-gradient(135deg,#667eea 0%,#764ba2 100%) !important; border: none !important; border-radius: 12px !important; box-shadow: 0 4px 20px rgba(102,126,234,.4); transition: all .3s ease; overflow: hidden; position: relative; } salla-add-product-button[width="wide"]:hover { transform: translateY(-3px); box-shadow: 0 8px 30px rgba(102,126,234,.6), 0 0 0 4px rgba(102,126,234,.2); } /* ------------------------------------------ 5. FOOTER & Z-INDEX FIX (الحل الجذري) ------------------------------------------ */ .store-footer { position: relative !important; z-index: 10; /* تم تخفيضه لضمان أن الـ Modals (9999) فوقه */ } .footer-is-light .store-footer .store-footer__inner { background: rgba(9,10,15,.95) !important; backdrop-filter: blur(20px); border-top: 1px solid rgba(255,255,255,.1); color: #fff !important; box-shadow: 0 -8px 32px rgba(0,0,0,.4); } .store-footer a { color: #6eb6ff !important; transition: all .3s ease; } .store-footer a:hover { color: #fff !important; text-shadow: 0 0 10px rgba(110,182,255,.8); transform: translateX(-3px); } /* إصلاح مشكلة عدم الضغط على روابط الفوتر */ .store-footer .store-footer__inner { pointer-events: auto !important; } /* ------------------------------------------ 6. GENERAL GLASSMORPHISM & BLOCKS ------------------------------------------ */ .container, .content-wrapper, main { position: relative; z-index: 1; } .card, .s-block { background: rgba(255,255,255,.05) !important; backdrop-filter: blur(15px); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; position: relative; z-index: 1; } .shadow-default { box-shadow: 0 8px 32px rgba(0,0,0,.3) !important; } /* العناوين الرئيسية */ .s-block__title, .s-slider-block__title { background: linear-gradient(135deg,rgba(102,126,234,.2) 0%,rgba(118,75,162,.2) 100%) !important; backdrop-filter: blur(15px); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 20px !important; box-shadow: 0 8px 32px rgba(0,0,0,.3); position: relative; z-index: 1; } .s-block__title h2, .s-slider-block__title h2 { color: #fff !important; text-shadow: 0 0 20px rgba(110,182,255,.6); font-weight: 700 !important; } /* ------------------------------------------ 7. CART PAGE FIXES (إصلاحات سلة المشتريات) ------------------------------------------ */ /* مسار التنقل (Breadcrumbs) */ .breadcrumbs, .s-breadcrumb-item a, .s-breadcrumb-item { color: rgba(255, 255, 255, 0.8) !important; position: relative; z-index: 1; } .s-breadcrumb-item:last-child { color: #FFFFFF !important; font-weight: 600 !important; } .s-breadcrumb-arrow svg path { fill: rgba(255, 255, 255, 0.6) !important; } /* صندوق معلومات المنتج في السلة (إزالة الخلفية الرمادية) */ section.cart-item.bg-white { background: rgba(255, 255, 255, 0.08) !important; backdrop-filter: blur(15px) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.3) !important; position: relative; z-index: 1; } /* إزالة الخلفية الرمادية من الحاوية الرئيسية لسلة المشتريات */ .cart-page .s-block { background: transparent !important; border: none !important; box-shadow: none !important; } .cart-item h1 a { color: #FFFFFF !important; font-weight: 700 !important; } .cart-item .item-price, .cart-item .text-gray-500 { color: rgba(255, 255, 255, 0.7) !important; } .cart-item .item-total, .cart-item p.text-primary { color: #82c3ff !important; font-weight: 700 !important; text-shadow: 0 0 8px rgba(130, 195, 255, 0.6) !important; } /* إصلاح وضوح الأرقام في حقل الكمية (داخل سلة المشتريات) */ .s-quantity-input-input { color: #000 !important; /* جعل لون النص أسود لضمان الوضوح */ background: #fff !important; /* التأكد من أن الخلفية بيضاء */ border: 1px solid #000 !important; } /* إصلاح وضوح ملخص الطلب (Order Summary) */ .s-cart-summary-total { background: rgba(9,10,15,.95) !important; /* خلفية داكنة */ color: #fff !important; /* نص أبيض */ border: 1px solid rgba(255,255,255,.1) !important; box-shadow: 0 8px 32px rgba(0,0,0,.4) !important; } .s-cart-summary-total .text-gray-500, .s-cart-summary-total .text-gray-700, .s-cart-summary-total .text-sm { color: #fff !important; /* التأكد من أن كل النصوص بيضاء */ } .s-cart-summary-total .text-primary { color: #82c3ff !important; /* لون أزرق ساطع للمجموع النهائي */ } /* ------------------------------------------ 8. SEARCH & INPUTS ------------------------------------------ */ input[type="search"], .search-input { background: rgba(255,255,255,.08) !important; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.15) !important; border-radius: 12px !important; color: #fff !important; } input[type="search"]::placeholder, .search-input::placeholder { color: rgba(255,255,255,.5) !important; } /* ------------------------------------------ 9. FULL-WIDTH BLOCK FIX (إصلاح تمديد الأقسام) ------------------------------------------ */ .home-page .s-block { width: 100vw !important; position: relative !important; left: 50% !important; transform: translateX(-50%) !important; box-sizing: border-box !important; padding-left: 15px !important; padding-right: 15px !important; border-radius: 0 !important; } .home-page .s-block .s-block__title { border-radius: 16px !important; } .home-page .s-block .s-block__content { max-width: 1200px; margin: 0 auto !important; } /* ------------------------------------------ 10. MEDIA QUERIES ------------------------------------------ */ @media (max-width: 991px) { .s-product-card-entry { border-radius: 16px !important; } .main-nav-container { backdrop-filter: blur(15px); } } /* ============================ 🎯 إصلاح مشاكل الوضوح العامة ============================ */ /* ✅ 1. تصحيح صفحات المحتوى (مثل سياسة الاستخدام) */ .page-content, .policy-page, .static-page, section.content, .article-content { background: rgba(255, 255, 255, 0.97) !important; color: #111 !important; border-radius: 16px !important; padding: 20px !important; box-shadow: 0 8px 24px rgba(0,0,0,0.2); } .page-content p, .page-content h1, .page-content h2, .page-content h3 { color: #111 !important; } /* ✅ 2. توضيح النصوص داخل ملخص الطلب */ .s-cart-summary-total, .s-cart-summary-total * { color: #000 !important; background: #fff !important; } /* ✅ 3. السلة الفارغة */ .no-content-placeholder, .no-content-placeholder * { color: #fff !important; text-shadow: 0 0 8px rgba(255,255,255,0.3); } .no-content-placeholder .icon { background: rgba(255,255,255,0.15) !important; color: #fff !important; } /* ✅ 4. جعل زر العودة في السلة الفارغة يرجع للرئيسية */ .no-content-placeholder a.btn--outline-primary { background: transparent !important; border-color: #82c3ff !important; color: #82c3ff !important; } .no-content-placeholder a.btn--outline-primary:hover { background: rgba(130,195,255,0.3) !important; color: #fff !important; } .no-content-placeholder a.btn--outline-primary[href="/"], .no-content-placeholder a.btn--outline-primary[href*="home"] { cursor: pointer; } /* ✅ 5. إزالة الخلفية الداكنة من خلف المنتجات */ .s-block, .s-block__content, .s-products-list-wrapper, .s-products-list-wrapper > div { background: transparent !important; backdrop-filter: none !important; } /* ✅ 6. تصحيح ألوان القوائم المنسدلة */ select, select option { color: #fff !important; background-color: rgba(9,10,15,0.95) !important; border: 1px solid rgba(255,255,255,0.2) !important; } select:focus { outline: none !important; box-shadow: 0 0 8px rgba(130,195,255,0.6); } /* ✅ 7. الفوتر على الكمبيوتر */ .footer-is-light .store-footer .store-footer__inner { background: rgba(9,10,15,.96) !important; color: #fff !important; border-top: 1px solid rgba(255,255,255,.1); box-shadow: 0 -8px 32px rgba(0,0,0,.4); } .footer-is-light .store-footer .store-footer__inner a { color: #6eb6ff !important; } .footer-is-light .store-footer .store-footer__inner a:hover { color: #fff !important; } /* ============================== 🌌 إصلاح مشكلة تغطية النجوم من الهيدر ============================== */ /* اجعل خلفية الهيدر شبه شفافة بالكامل */ .main-nav-container, header.store-header, .top-navbar { background: rgba(10, 15, 25, 0.4) !important; /* شفافية أقل من 50% */ backdrop-filter: blur(10px) !important; /* ضباب خفيف فقط */ border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: none !important; /* بدون ظل يغطي النجوم */ z-index: 50 !important; /* أقل من النجوم الأمامية */ } /* إلغاء أي تداخل من عناصر تمتد تحت الهيدر */ .main-nav-container::before, header.store-header::before { background: transparent !important; } /* عند التمرير للأسفل، اجعل الهيدر يختفي تدريجيًا */ @media (min-width: 768px) { body.scrolled .main-nav-container { background: rgba(10, 15, 25, 0.3) !important; backdrop-filter: blur(6px) !important; } } // /* ========================== 🌌 إزالة أي غطاء يغطي النجوم ========================== */ /* هذه أهم نقطة — أي طبقة تغطي النجوم تصير شفافة تماماً */ .page-transition-overlay, body::before, body::after, #page-overlay, #background-layer, .s-block::before, .s-block__content::before, .section-background, .page-header::before { background: transparent !important; backdrop-filter: none !important; box-shadow: none !important; opacity: 1 !important; } /* لو فيه سكشن غامق داخل المنتجات */ .s-block, .s-block__content, section, main { background: transparent !important; box-shadow: none !important; } /* حتى الحاوية الأساسية للنجوم تبقى فوق */ #stars-bright { z-index: 0 !important; opacity: 0.8 !important; pointer-events: none !important; position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; } /* أي شيء كان يغطي النجوم يرجع للخلف */ header, footer, main, section, div { background-blend-mode: normal !important; } /* لمنع العناصر الداكنة التي تأتي من ثيم سلة */ .store-section, .store-home, .page-wrapper, .container, .s-products-list-wrapper { background: transparent !important; backdrop-filter: none !important; } ////// /* =========================================== 🌌 حل نهائي لاختفاء النجوم أثناء التمرير =========================================== */ /* إزالة أي خلفية فوق النجوم */ .page-transition-overlay, body::before, body::after, .page-content::before, .page-content::after, .main-content::before, .main-content::after, .section-background, .s-block::before, .s-block::after, div[style*="background-color"], div[style*="rgba"], div[style*="background: rgb"], div[style*="background: #0"] { background: transparent !important; background-color: transparent !important; box-shadow: none !important; backdrop-filter: none !important; opacity: 1 !important; } /* إجبار جميع السكاشن أن تكون شفافة فوق النجوم */ main, section, .s-block, .s-products-list-wrapper, .page-content, .container { background: transparent !important; } /* ضمان بقاء النجوم خلف كل شيء لكن ظاهرة */ #stars-bright { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; z-index: 0 !important; pointer-events: none !important; opacity: 0.9 !important; } /* أي عنصر يحمل خلفية صلبة يخضع للتفتيح */ [class*="header"], [class*="footer"], [class*="bar"], [class*="section"], [class*="wrapper"] { background: rgba(10, 15, 25, 0.15) !important; backdrop-filter: blur(6px) !important; } /* ========================================== 🚀 إزالة الخلفية الضبابية من المنتجات فقط ========================================== */ /* إزالة أي خلفية أو ضباب من أقسام المنتجات */ .s-block, .s-block__content, .s-products-list-wrapper, .s-products-list-wrapper > div, .s-product-card-entry, .s-product-card, .s-product-list, .s-product-grid { background: transparent !important; backdrop-filter: none !important; box-shadow: none !important; border: none !important; } /* منع أي تأثير داخلي للـ blur في البطاقات */ .s-product-card-image::after, .s-product-card-entry::before { display: none !important; content: none !important; } /* التأكد أن النصوص والصور تظل واضحة فوق النجوم */ .s-product-card-entry *, .s-block__title *, .s-products-list-wrapper * { color: #fff !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important; } /* الحفاظ على حدود ناعمة فقط */ .s-product-card-entry { border: 1px solid rgba(255,255,255,0.05) !important; border-radius: 20px !important; } /////// /* ========================================== 🪐 تصميم المنتجات النهائي (بدون ضباب) ========================================== */ .s-product-card-entry { background: #0b1220 !important; /* خلفية داكنة ثابتة وواضحة */ border-radius: 18px !important; border: 1px solid rgba(255,255,255,0.08) !important; box-shadow: 0 6px 20px rgba(0,0,0,0.4) !important; backdrop-filter: none !important; /* إزالة الضباب */ overflow: hidden !important; transition: all 0.3s ease !important; } .s-product-card-entry:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 10px 30px rgba(100,150,255,0.3) !important; } /* الصورة تظهر نظيفة وواضحة */ .s-product-card-image { background: transparent !important; border-bottom: 1px solid rgba(255,255,255,0.05) !important; } /* اسم المنتج */ .s-product-card-content-title a, .s-product-card-entry h3 { color: #ffffff !important; font-weight: 700 !important; font-size: 1.05em !important; text-align: center !important; } /* السعر */ .s-product-card-price, .s-product-card-entry .price { color: #8ecaff !important; font-weight: 800 !important; text-align: center !important; margin-top: 6px !important; } /* الزر */ salla-add-product-button[width="wide"] { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; border-radius: 10px !important; border: none !important; color: #fff !important; font-weight: 600 !important; margin-top: 10px !important; transition: all 0.3s ease; } salla-add-product-button[width="wide"]:hover { transform: translateY(-2px); box-shadow: 0 0 15px rgba(102,126,234,0.4); } /* الخلفية العامة للمنتجات تبقى شفافة عشان النجوم تبان */ .s-products-list-wrapper, .s-products-list-wrapper > div { background: transparent !important; backdrop-filter: none !important; border: none !important; box-shadow: none !important; } /// /* ========================================== 🧱 Footer sits naturally at the end of page ========================================== */ /* Ensure page structure supports footer push */ html, body { height: 100%; margin: 0; padding: 0; display: flex; flex-direction: column; } /* Make main/content stretch so footer sits below */ main, .content-wrapper, .page-wrapper, .store-home, .store-section, .container { flex: 1 0 auto !important; } /* Footer appears AFTER content, at bottom of page only */ .store-footer { flex-shrink: 0 !important; position: relative !important; bottom: auto !important; left: 0 !important; width: 100% !important; z-index: 10 !important; margin-top: 40px !important; /* adds a nice gap */ background: rgba(10, 10, 15, 0.95) !important; backdrop-filter: blur(10px) !important; border-top: 1px solid rgba(255,255,255,0.1); box-shadow: 0 -4px 20px rgba(0,0,0,0.5); } /* Keep stars behind everything */ #stars-bright { position: fixed !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; } /// /* ========================================== 🚫 Remove unwanted space under the footer ========================================== */ /* Remove any extra margin/padding at bottom */ html, body, .page-wrapper, .content-wrapper, .store-home, .store-section, .container { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* Ensure footer touches the bottom edge exactly */ .store-footer { margin-bottom: 0 !important; padding-bottom: 20px !important; /* keep internal padding only */ position: relative !important; } /* Prevent scroll gap below the footer */ body { overflow-x: hidden !important; overflow-y: auto !important; } /* For rare cases, force body height match viewport */ html, body { min-height: 100vh !important; height: auto !important; } //// /* ========================================== 🌑 Final Fix: Remove invisible bottom space ========================================== */ /* Kill any ghost elements after footer */ .store-footer + *, body::after, html::after, .page-wrapper::after, .store-home::after, footer::after { display: none !important; content: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } /* Remove forced gaps or reserved height from containers */ .page-wrapper, .store-home, .store-section, .container, main { margin-bottom: 0 !important; padding-bottom: 0 !important; min-height: auto !important; } /* Ensure footer touches the viewport bottom exactly */ .store-footer { margin: 0 !important; padding-bottom: 20px !important; /* internal padding only */ position: relative !important; bottom: 0 !important; left: 0 !important; width: 100% !important; } /* Prevent extra scroll caused by hidden elements */ html, body { overflow-x: hidden !important; overflow-y: auto !important; height: auto !important; } /// /* ========================================== 🧩 Proper Layout Fix — Footer at Bottom (Clean) ========================================== */ /* Ensure page uses full height flexbox layout */ html, body { height: 100%; margin: 0; padding: 0; display: flex; flex-direction: column; } /* Identify your main content wrapper */ main, .page-wrapper, .content-wrapper, .store-home, .store-section { flex: 1 0 auto !important; /* fills available space above footer */ margin-bottom: 0 !important; padding-bottom: 0 !important; } /* Footer — stays at bottom, never overlaps or floats */ .store-footer { flex-shrink: 0 !important; position: relative !important; bottom: 0 !important; left: 0 !important; width: 100% !important; margin-top: auto !important; /* pushes it below content */ background: rgba(10, 10, 15, 0.95) !important; border-top: 1px solid rgba(255,255,255,0.1); box-shadow: 0 -4px 20px rgba(0,0,0,0.5); backdrop-filter: blur(10px); } /* Make sure no “ghost” divs add height below footer */ body > div:last-child:not(.store-footer) { display: none !important; } /* Keep stars behind everything but visible */ #stars-bright { position: fixed !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; opacity: 0.9 !important; } /* Prevent the “scroll gap” illusion */ html, body { overflow-x: hidden !important; overflow-y: auto !important; } /// /* ========================================== 🧩 Final Professional Footer + Layout Fix ========================================== */ /* ✅ Make sure the page fills the viewport */ html, body { height: 100%; margin: 0; padding: 0; } /* ✅ Turn only the BODY into flex container (not html!) */ body { display: flex; flex-direction: column; min-height: 100vh; /* body = full viewport height */ overflow-x: hidden !important; overflow-y: auto !important; } /* ✅ Let main/content grow and push footer down naturally */ main, .page-wrapper, .content-wrapper, .store-home, .store-section { flex: 1 0 auto !important; margin-bottom: 0 !important; padding-bottom: 0 !important; } /* ✅ Footer sits perfectly at the bottom, not floating */ .store-footer { flex-shrink: 0 !important; position: relative !important; bottom: 0 !important; left: 0 !important; width: 100% !important; margin-top: auto !important; /* pushes it below content */ margin-bottom: 0 !important; padding-bottom: 20px !important; background: rgba(10, 10, 15, 0.95) !important; border-top: 1px solid rgba(255,255,255,0.1); box-shadow: 0 -4px 20px rgba(0,0,0,0.5); backdrop-filter: blur(10px); z-index: 10 !important; } /* ✅ Keep stars perfectly in the background */ #stars-bright { position: fixed !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; opacity: 0.9 !important; } //// /* ========================================== 🌌 FINAL CLEAN LAYOUT FIX (No double scroll) ========================================== */ /* ---- Global structure ---- */ html { height: 100%; overflow-y: scroll; /* only one vertical scrollbar */ overflow-x: hidden; /* never scroll sideways */ } body { display: flex; flex-direction: column; min-height: 100vh; /* full screen height */ margin: 0; padding: 0; overflow: hidden; /* prevent body scrollbar */ } /* ---- Main content expands ---- */ main, .page-wrapper, .content-wrapper, .store-home, .store-section { flex: 1 0 auto !important; margin: 0 !important; padding: 0 !important; } /* ---- Footer sticks to bottom ---- */ .store-footer { flex-shrink: 0 !important; position: relative !important; width: 100% !important; margin-top: auto !important; margin-bottom: 0 !important; background: rgba(10, 10, 15, 0.95) !important; backdrop-filter: blur(10px) !important; border-top: 1px solid rgba(255,255,255,0.1); box-shadow: 0 -4px 20px rgba(0,0,0,0.5); z-index: 10 !important; } /* ---- Stars stay fixed but never cause overflow ---- */ #stars-bright { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; z-index: 0 !important; pointer-events: none !important; overflow: hidden !important; } /* ---- Safety: prevent horizontal overflow from star layers ---- */ body::before, body::after { max-width: 100%; overflow: hidden; position: fixed; inset: 0; }