:root { --primary-color: #C9A227; /* ذهبي دافئ بدل الأحمر */ --gold-soft: #E3C563; --bg-dark: #0B0E13; /* حبر داكن مزرق بدل الأسود الخالص */ --bg-card: #141922; --bg-card-2: #1C232E; --line: #262E3A; --text-light: #EDEFF3; --text-muted: #8B93A1; --green: #3FB98C; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; transition: all 0.3s ease-in-out; } /* التبديل التلقائي للخط والاتجاه بناءً على لغة الصفحة */ body { background-color: var(--bg-dark); color: var(--text-light); line-height: 1.65; -webkit-font-smoothing: antialiased; } /* عناوين اللغة الإنجليزية بخط Fraunces الأنيق (serif راقٍ)، والبقية Inter */ h1, h2, h3, .logo, .section-title { font-family: 'Fraunces', Georgia, serif; font-weight: 600; letter-spacing: -.01em; } /* ملاحظة: الاعتماد على html[dir="rtl"] وليس html[dir="rtl"] body لأن سمة dir توضع دائماً على وسم في كل صفحات الموقع، والخاصية تنتقل للأبناء تلقائياً. الأولوية (!important) هنا تضمن أن كل العناصر، حتى العناوين، تستعمل الخط العربي بدل الخط الإنجليزي عند التبديل للعربية. */ html[dir="rtl"] { font-family: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important; } html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] .logo, html[dir="rtl"] .section-title { font-family: 'IBM Plex Sans Arabic', sans-serif !important; font-weight: 700; letter-spacing: 0; } /* Header Navigation */ header { background-color: rgba(11, 14, 19, 0.92); backdrop-filter: blur(14px); padding: 15px 5%; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 100; } .logo { font-size: 1.7rem; font-weight: 600; color: var(--text-light); text-decoration: none; letter-spacing: 0; } .logo span, .logo > span { color: var(--primary-color); } .nav-controls { display: flex; align-items: center; gap: 15px; } nav ul { list-style: none; display: flex; gap: 15px; align-items: center; } nav a { color: var(--text-muted); text-decoration: none; font-weight: 500; font-size: 0.93rem; } nav a:hover { color: var(--text-light); } .lang-switch-btn, .lang-btn { background: transparent; color: var(--text-muted); border: 1px solid var(--line); padding: 6px 12px; border-radius: 8px; cursor: pointer; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; text-decoration: none; } .lang-switch-btn:hover, .lang-btn:hover { border-color: var(--primary-color); color: var(--gold-soft); } #currency-selector { background: transparent; color: var(--text-light); border: 1px solid var(--line); padding: 6px 10px; border-radius: 8px; outline: none; cursor: pointer; font-size: 0.85rem; } .cart-icon { font-size: 1.2rem; cursor: pointer; position: relative; color: var(--text-light); } .cart-count { position: absolute; top: -8px; right: -10px; background-color: var(--primary-color); color: #16181C; font-size: 0.75rem; padding: 2px 5px; border-radius: 50%; font-weight: 700; } /* Hero Section */ .hero { text-align: center; padding: 90px 20px 74px; background: radial-gradient(900px 380px at 50% -12%, rgba(201, 162, 39, .13), transparent 70%), var(--bg-dark); border-bottom: 1px solid var(--line); } .hero h1 { font-size: 3.2rem; margin-bottom: 20px; color: var(--text-light); } .hero h1 span { color: var(--primary-color); white-space: nowrap; /* لمنع انكسار "MVP STORE" بين سطرين بشكل غير أنيق */ } .hero p { font-size: 1.1rem; color: var(--text-muted); max-width: 580px; margin: 0 auto 32px; } .btn-primary { background-color: var(--primary-color); color: #16181C; padding: 12px 30px; border: none; border-radius: 9px; font-size: 1.05rem; cursor: pointer; text-decoration: none; font-weight: 600; display: inline-block; } .btn-primary:hover { background-color: var(--gold-soft); transform: translateY(-2px); } /* Products Section & Professional Cards */ .products-section { padding: 44px 5% 60px; } .section-title { text-align: center; font-size: 2.1rem; margin-bottom: 40px; position: relative; color: var(--text-light); } .section-title::after { content: ''; display: block; width: 50px; height: 2px; background-color: var(--primary-color); margin: 14px auto; } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 26px; } .card { background-color: var(--bg-card); border-radius: 14px; overflow: hidden; border: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25); } .card:hover { transform: translateY(-5px); border-color: rgba(201, 162, 39, .5); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35); } .card-img { width: 100%; height: 190px; background-color: var(--bg-card-2); display: flex; justify-content: center; align-items: center; overflow: hidden; position: relative; border-bottom: 1px solid var(--line); } .card-img img { width: 100%; height: 100%; object-fit: contain; padding: 10px; transition: transform 0.5s ease; } .card:hover .card-img img { transform: scale(1.06); } .card-body { padding: 20px; text-align: center; display: flex; flex-direction: column; justify-content: space-between; flex-grow: 1; } .card-title { font-family: 'Inter', sans-serif; font-size: 1.05rem; font-weight: 600; color: var(--text-light); margin-bottom: 8px; min-height: 45px; } html[dir="rtl"] .card-title { font-family: 'IBM Plex Sans Arabic', sans-serif !important; } /* حالة التوفر بتصميم أنيق */ .card-stock { font-size: 0.85rem; color: var(--green); background: rgba(63, 185, 140, 0.1); padding: 4px 10px; border-radius: 20px; display: inline-block; margin: 0 auto 10px; } .card-price { color: var(--primary-color); font-size: 1.4rem; font-weight: 700; margin-bottom: 15px; font-family: 'Fraunces', serif; } html[dir="rtl"] .card-price { font-family: 'IBM Plex Sans Arabic', sans-serif !important; } /* تنسيق الأزرار داخل البطاقة */ .card-actions { display: flex; flex-direction: column; gap: 8px; } .btn-add { width: 100%; padding: 10px; background-color: transparent; color: var(--text-light); border: 1px solid var(--primary-color); border-radius: 8px; cursor: pointer; font-weight: 600; } .btn-add:hover { background-color: var(--primary-color); color: #16181C; } .btn-whatsapp-card { color: var(--green) !important; text-decoration: none !important; font-weight: 600; font-size: 0.9rem; display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: 5px; transition: 0.3s; } .btn-whatsapp-card:hover { color: #59d1a6 !important; text-decoration: underline !important; } /* Support Chat Widget & Notifications Enhancements */ .support-widget-btn { position: fixed; bottom: 25px; right: 25px; background: var(--primary-color); color: #16181C; width: 58px; height: 58px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 1.5rem; box-shadow: 0 8px 22px rgba(201, 162, 39, 0.35); cursor: pointer; z-index: 999; border: none; } html[dir="rtl"] body .support-widget-btn { right: auto; left: 25px; } footer { background-color: #090C11; padding: 30px 5%; text-align: center; border-top: 1px solid var(--line); margin-top: 50px; } footer p { color: var(--text-muted); } /* ---------------------------------------------- عناصر عامة مشتركة (نماذج، أزرار، تنبيهات) هذه الأصناف تُستخدم في صفحات تسجيل الدخول/التسجيل/الطلبات/الدعم الفني */ input, textarea, select { background: var(--bg-card-2); border: 1px solid var(--line); color: var(--text-light); border-radius: 8px; outline: none; } input:focus, textarea:focus, select:focus { border-color: var(--primary-color); } /* Mobile Responsive Adjustments - قائمة هامبرغر نظيفة على الهواتف */ @media (max-width: 768px) { header { padding: 12px 15px; flex-wrap: nowrap; } .logo { font-size: 1.3rem; letter-spacing: 1px; } .nav-controls { display: flex; align-items: center; gap: 8px; } #main-nav { display: none; position: absolute; top: 100%; inset-inline: 0; background: var(--bg-card); border-bottom: 1px solid var(--line); box-shadow: 0 10px 20px rgba(0,0,0,0.4); padding: 10px 15px; } #main-nav.nav-open { display: block; } #main-nav ul { flex-direction: column; align-items: flex-start !important; gap: 4px !important; } #main-nav ul li { width: 100%; } #main-nav ul li a { display: block; padding: 10px 5px; font-size: 0.95rem; border-bottom: 1px solid var(--line); } #mobile-menu-toggle { display: flex !important; } #currency-selector, .lang-switch-btn, .lang-btn { padding: 4px 8px; font-size: 0.8rem; height: 28px; } .cart-icon { font-size: 1.1rem; } .hero { padding: 50px 15px 40px; } .hero h1 { font-size: 2rem; } .hero p { font-size: 0.95rem; } .section-title { font-size: 1.6rem; } }