/* ============================================================ الصفحة الرئيسية — تصميم مستوحى من أمازون (كثافة العرض + رفوف بيضاء على خلفية رمادية فاتحة)، مع هوية بصرية خاصة بـ basoos تميّزها: شريط أقسام أخضر غامق (بدل الأسود بتاع أمازون) + برتقالي العلامة التجارية للأسعار والأزرار. يتفعّل بس لما يكون فيه class="home-page" (متحدد من index.php)، فمش بيأثر على أي صفحة تانية في الموقع. ============================================================ */ body.home-page { --amz-shelf-bg: #EEF1F3; /* خلفية رمادية فاتحة زي أمازون بين الرفوف */ --amz-ribbon: #0B6E4F; /* أخضر basoos الغامق — هوية مميزة بدل الأسود */ --amz-ribbon-dark: #084F38; --amz-star: #FFA41C; /* لون النجوم/التقييم الذهبي */ --amz-deal: #CC0C39; /* أحمر شارة الخصم زي أمازون */ --amz-radius: 6px; /* زوايا أقرب لكثافة أمازون بدل الاستدارة الكبيرة */ --amz-radius-lg: 10px; background: var(--amz-shelf-bg); } /* ---------- شريط أقسام سريع أخضر أسفل الهيدر (هوية basoos) ---------- */ body.home-page .dept-strip-wrap { background: var(--amz-ribbon); border-radius: var(--amz-radius); padding: 6px 10px; margin: 16px 0 22px; } body.home-page .dept-strip { gap: 6px; } body.home-page .dept-chip { background: transparent; color: rgba(255,255,255,.92); border: none; font-weight: 700; font-size: 13px; padding: 9px 14px; border-radius: 4px; transition: background .15s ease; } body.home-page .dept-chip:hover { background: rgba(255,255,255,.14); color: #fff; } body.home-page .dept-chip.active { background: #fff; color: var(--amz-ribbon-dark); } /* ---------- كل قسم رئيسي بيبقى "رف" أبيض مرفوع عن الخلفية الرمادية ---------- */ body.home-page .home-section, body.home-page .featured-section { background: var(--surface); border: 1px solid #E3E6E8; border-radius: var(--amz-radius-lg); padding: 20px 20px 22px; margin: 18px 0; box-shadow: 0 1px 2px rgba(15,23,32,.04); } body.home-page .home-section-head h2, body.home-page .featured-section .section-title h2 { font-size: 18px; letter-spacing: -0.01em; } body.home-page .home-section-head h2 i { color: var(--amz-ribbon); } /* ---------- الأقسام الرئيسية (Grid دوائر التصنيفات) كرف منفصل بردو ---------- */ body.home-page .main-cat-grid { gap: 10px; } body.home-page .main-cat-tile { border-radius: var(--amz-radius); border: 1px solid #E3E6E8; padding: 12px 6px; transition: box-shadow .15s ease, border-color .15s ease; } body.home-page .main-cat-tile:hover { box-shadow: 0 4px 12px -4px rgba(15,23,32,.15); border-color: var(--amz-ribbon); } body.home-page .main-cat-icon { background: #F2F7F5; color: var(--amz-ribbon); } /* ---------- كروت المتاجر: زوايا أقرب لكثافة أمازون + حواف أوضح ---------- */ body.home-page .card { border-radius: var(--amz-radius); border-color: #E3E6E8; box-shadow: none; } body.home-page .card:hover { box-shadow: 0 6px 18px -8px rgba(15,23,32,.18); border-color: #D5D9DB; transform: translateY(-3px); } body.home-page .card--restaurant .card-media { height: 152px; } /* ---------- التقييم: نجمة ذهبية زي أمازون بدل الشارة الملونة ---------- */ body.home-page .rating { background: transparent; color: var(--ink); padding: 0; font-weight: 700; } body.home-page .rating i { color: var(--amz-star); } /* ---------- كروت المنتجات/العروض (الرايل الأفقي) ---------- */ body.home-page .deal-card, body.home-page .product-card { border-radius: var(--amz-radius); border-color: #E3E6E8; } body.home-page .deal-card:hover, body.home-page .product-card:hover { box-shadow: 0 6px 18px -8px rgba(15,23,32,.18); transform: translateY(-3px); } /* شارة الخصم بالأحمر الغامق زي أمازون بدل تدرج العلامة التجارية */ body.home-page .pc-discount-badge { background: var(--amz-deal); color: #fff; } /* السعر: برتقالي العلامة التجارية بوضوح أكبر، والسعر القديم بخط رفيع بجانبه */ body.home-page .pc-price { color: var(--primary); font-size: 17px; } body.home-page .pc-price-old { font-size: 12px; } body.home-page .pc-store-rating i { color: var(--amz-star); } /* زرار "أضف للسلة" يبان بس عند المرور بالماوس على الكارت (كثافة أعلى، إزعاج بصري أقل) */ body.home-page .pc-add-btn { opacity: 0; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease; } body.home-page .deal-card:hover .pc-add-btn, body.home-page .product-card:hover .pc-add-btn { opacity: 1; transform: translateY(0); } @media (hover: none) { body.home-page .pc-add-btn { opacity: 1; transform: none; } } /* ---------- فلاتر الترتيب/مفتوح دلوقتي كشريط رفيع فوق الشبكة الرئيسية ---------- */ body.home-page .filter-bar { background: var(--surface); border: 1px solid #E3E6E8; border-radius: var(--amz-radius); padding: 10px 14px; } /* ---------- قسم تحميل التطبيق: نفس الأخضر المميز بدل التدرج الافتراضي ---------- */ body.home-page .app-download-section { background: linear-gradient(120deg, var(--amz-ribbon-dark), var(--amz-ribbon)); border-radius: var(--amz-radius-lg); } /* ---------- شارة "مميز" فوق كارت المطاعم المميزة ---------- */ body.home-page .featured-badge-tag { background: var(--amz-star); color: #1A1200; } @media (max-width: 640px) { body.home-page .home-section, body.home-page .featured-section { padding: 16px 14px 18px; margin: 14px 0; } body.home-page .dept-strip-wrap { margin: 12px 0 16px; } }