/* ============================================================ أنماط بطاقات المنتج — 10 أشكال تُختار من: لوحة العمل ← الموقع الإلكتروني ← تصميم الموقع التفعيل: كلاس cs-1 .. cs-10 على (cs-0 أو بدونه = الشكل الافتراضي) تنطبق على بطاقات الرئيسية (.hp-card) وشبكة المنتجات (.p-card) ============================================================ */ /* أدوات مشتركة */ .cs-1 .hp-card, .cs-1 .p-card, .cs-2 .hp-card, .cs-2 .p-card, .cs-3 .hp-card, .cs-3 .p-card, .cs-4 .hp-card, .cs-4 .p-card, .cs-5 .hp-card, .cs-5 .p-card, .cs-6 .hp-card, .cs-6 .p-card, .cs-7 .hp-card, .cs-7 .p-card, .cs-8 .hp-card, .cs-8 .p-card, .cs-9 .hp-card, .cs-9 .p-card, .cs-10 .hp-card, .cs-10 .p-card { position: relative; } @keyframes csSheen { 0%, 55% { transform: translateX(170%); } 80%, 100% { transform: translateX(-170%); } } @keyframes csFloat { 50% { transform: translateY(-6px); } } @keyframes csSpin { to { transform: rotate(360deg); } } /* ============ 1: الكروم الدوار ============ */ .cs-1 .hp-card, .cs-1 .p-card { clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); border: 1px solid var(--line); overflow: hidden; transition: transform .35s cubic-bezier(.2,.7,.3,1), border-color .35s, box-shadow .35s; } .cs-1 .hp-card:hover, .cs-1 .p-card:hover { transform: translateY(-7px); border-color: rgba(201,209,217,.55); box-shadow: 0 14px 34px rgba(0,0,0,.45), 0 0 24px rgba(201,209,217,.12); } .cs-1 .hp-thumb, .cs-1 .p-thumb { position: relative; overflow: hidden; } .cs-1 .hp-thumb::after, .cs-1 .p-thumb::after { content: ''; position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 43%, rgba(255,255,255,.14) 50%, transparent 57%); transform: translateX(170%); animation: csSheen 6s ease-in-out infinite; pointer-events: none; } .cs-1 .hp-card:hover .hp-thumb img, .cs-1 .p-card:hover .p-thumb img { transform: scale(1.08); } .cs-1 .hp-thumb img, .cs-1 .p-thumb img { transition: transform .45s cubic-bezier(.2,.7,.3,1); } /* ============ 2: الزجاجي ============ */ .cs-2 .hp-card, .cs-2 .p-card { background: linear-gradient(160deg, rgba(255,255,255,.065), rgba(255,255,255,.015) 60%) !important; border: 1px solid rgba(255,255,255,.13) !important; border-radius: 18px !important; backdrop-filter: blur(10px); transition: transform .4s cubic-bezier(.2,.7,.3,1), border-color .4s, box-shadow .4s; } .cs-2 .hp-card::before, .cs-2 .p-card::before { content: ''; position: absolute; inset: 0 0 55% 0; border-radius: 18px 18px 40% 40%; background: linear-gradient(180deg, rgba(255,255,255,.07), transparent); pointer-events: none; } .cs-2 .hp-card:hover, .cs-2 .p-card:hover { transform: translateY(-7px) scale(1.012); border-color: rgba(255,216,77,.45) !important; box-shadow: 0 20px 46px rgba(0,0,0,.5), 0 0 30px rgba(255,216,77,.1); } /* ============ 3: اللوح المعدني ============ */ .cs-3 .hp-card, .cs-3 .p-card { clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); background: radial-gradient(circle 3px at 10px 22px, #8d99a6 40%, transparent 45%), radial-gradient(circle 3px at calc(100% - 10px) 10px, #8d99a6 40%, transparent 45%), radial-gradient(circle 3px at 10px calc(100% - 10px), #8d99a6 40%, transparent 45%), radial-gradient(circle 3px at calc(100% - 10px) calc(100% - 22px), #8d99a6 40%, transparent 45%), repeating-linear-gradient(100deg, transparent 0 7px, rgba(255,255,255,.014) 7px 8px), linear-gradient(145deg, #232a33, #14181d 45%, #1b2129 90%) !important; border: 1px solid #303a45 !important; box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 -2px 0 rgba(0,0,0,.4) inset; transition: transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s; } .cs-3 .hp-card:hover, .cs-3 .p-card:hover { transform: translateY(-7px); box-shadow: 0 18px 40px rgba(0,0,0,.5), 0 0 26px rgba(255,216,77,.1), 0 1px 0 rgba(255,255,255,.06) inset; } .cs-3 .hp-price b, .cs-3 .p-price { color: #ffd84d; } /* ============ 4: الهولوجرام ============ */ .cs-4 .hp-card, .cs-4 .p-card { border-radius: 16px !important; overflow: hidden; z-index: 0; transition: transform .4s; } .cs-4 .hp-card::before, .cs-4 .p-card::before { content: ''; position: absolute; inset: -80%; z-index: -2; background: conic-gradient(#ffd84d, #c9d1d9, #8fd3ff, #d9a7ff, #ffd84d); animation: csSpin 7s linear infinite; opacity: .5; } .cs-4 .hp-card::after, .cs-4 .p-card::after { content: ''; position: absolute; inset: 1.5px; z-index: -1; border-radius: 15px; background: linear-gradient(168deg, #171c23, #101419 60%); } .cs-4 .hp-card:hover, .cs-4 .p-card:hover { transform: translateY(-7px); } .cs-4 .hp-card:hover::before, .cs-4 .p-card:hover::before { opacity: 1; } /* ============ 5: منظار السنايبر ============ */ .cs-5 .hp-card, .cs-5 .p-card { border-radius: 6px !important; border: 1px solid #29323d !important; background: #0d1117 !important; transition: transform .35s, border-color .35s, box-shadow .35s; } .cs-5 .hp-card::before, .cs-5 .p-card::before { content: ''; position: absolute; top: -2px; right: -2px; width: 15px; height: 15px; border: 2px solid #e5534b; border-width: 2px 2px 0 0; transition: .3s; z-index: 2; } .cs-5 .hp-card::after, .cs-5 .p-card::after { content: ''; position: absolute; bottom: -2px; left: -2px; width: 15px; height: 15px; border: 2px solid #e5534b; border-width: 0 0 2px 2px; transition: .3s; z-index: 2; } .cs-5 .hp-card:hover, .cs-5 .p-card:hover { transform: translateY(-6px); border-color: rgba(229,83,75,.55) !important; box-shadow: 0 14px 34px rgba(0,0,0,.5), 0 0 24px rgba(229,83,75,.12); } .cs-5 .hp-card:hover::before, .cs-5 .p-card:hover::before, .cs-5 .hp-card:hover::after, .cs-5 .p-card:hover::after { width: 23px; height: 23px; } .cs-5 .hp-thumb, .cs-5 .p-thumb { position: relative; background-image: repeating-linear-gradient(0deg, rgba(229,83,75,.05) 0 1px, transparent 1px 5px) !important; } .cs-5 .hp-badge-sale { background: #e5534b !important; color: #fff !important; } /* ============ 6: الغلاف السينمائي ============ */ .cs-6 .hp-card, .cs-6 .p-card { border-radius: 16px !important; overflow: hidden; padding: 0 !important; transition: transform .4s, box-shadow .4s; } .cs-6 .hp-thumb, .cs-6 .p-thumb { height: 200px !important; border-radius: 0 !important; margin: 0 !important; border: 0 !important; position: relative; } .cs-6 .hp-thumb::after, .cs-6 .p-thumb::after { content: ''; position: absolute; inset: 55% 0 0 0; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(8,10,13,.85)); } .cs-6 .hp-thumb img, .cs-6 .p-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.3,1); } .cs-6 .hp-card:hover, .cs-6 .p-card:hover { transform: translateY(-7px); box-shadow: 0 20px 46px rgba(0,0,0,.55); } .cs-6 .hp-card:hover .hp-thumb img, .cs-6 .p-card:hover .p-thumb img { transform: scale(1.1); } .cs-6 .hp-name, .cs-6 .hp-price, .cs-6 .p-price { padding: 0 12px; } .cs-6 .hp-name { margin-top: 10px; } .cs-6 .hp-card > *:last-child, .cs-6 .p-card > *:last-child { padding-bottom: 12px; } .cs-6 .hp-badge { top: 10px !important; } /* ============ 7: المنتج الطائر ============ */ .cs-7 .hp-card, .cs-7 .p-card { overflow: visible !important; border-radius: 16px !important; transition: transform .4s, border-color .4s, box-shadow .4s; } .cs-7 .hp-thumb, .cs-7 .p-thumb { background: transparent !important; border: 0 !important; overflow: visible !important; position: relative; } .cs-7 .hp-thumb::after, .cs-7 .p-thumb::after { content: ''; position: absolute; bottom: 2px; left: 15%; right: 15%; height: 12px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,216,77,.28), transparent); filter: blur(3px); } .cs-7 .hp-thumb img, .cs-7 .p-thumb img { filter: drop-shadow(0 14px 16px rgba(0,0,0,.5)); animation: csFloat 4.5s ease-in-out infinite; transition: transform .45s cubic-bezier(.2,.7,.3,1); } .cs-7 .hp-card:hover, .cs-7 .p-card:hover { transform: translateY(-6px); border-color: rgba(255,216,77,.4); box-shadow: 0 18px 40px rgba(0,0,0,.45), 0 0 26px rgba(255,216,77,.08); } .cs-7 .hp-card:hover .hp-thumb img, .cs-7 .p-card:hover .p-thumb img { transform: scale(1.12) rotate(-4deg); } /* ============ 8: الشريط المائل ============ */ .cs-8 .hp-card, .cs-8 .p-card { border-radius: 14px !important; overflow: hidden; transition: transform .35s; } .cs-8 .hp-thumb, .cs-8 .p-thumb { clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%); border-radius: 10px 10px 0 0 !important; position: relative; overflow: hidden; background-image: linear-gradient(115deg, rgba(63,185,106,.12), transparent 55%), linear-gradient(160deg, #23282f, #12151a) !important; } .cs-8 .hp-thumb::after, .cs-8 .p-thumb::after { content: ''; position: absolute; inset: -20% -10%; background: repeating-linear-gradient(115deg, transparent 0 24px, rgba(63,185,106,.06) 24px 28px); pointer-events: none; } .cs-8 .hp-card:hover, .cs-8 .p-card:hover { transform: translateY(-6px) skewY(-.7deg); } .cs-8 .hp-badge-sale { background: linear-gradient(120deg, #6ee7a0, #3fb96a) !important; color: #0b1510 !important; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); } /* ============ 9: الذهبي الفاخر ============ */ .cs-9 .hp-card, .cs-9 .p-card { border-radius: 4px !important; border: 1px solid rgba(202,166,75,.5) !important; outline: 1px solid rgba(202,166,75,.16); outline-offset: 4px; background: #12151a !important; transition: transform .4s, border-color .4s, outline-color .4s, box-shadow .4s; } .cs-9 .hp-card::before, .cs-9 .p-card::before { content: ''; position: absolute; top: 4px; right: 4px; width: 12px; height: 12px; border: 1px solid #caa64b; border-width: 1px 1px 0 0; z-index: 2; transition: .3s; } .cs-9 .hp-card::after, .cs-9 .p-card::after { content: ''; position: absolute; bottom: 4px; left: 4px; width: 12px; height: 12px; border: 1px solid #caa64b; border-width: 0 0 1px 1px; z-index: 2; transition: .3s; } .cs-9 .hp-card:hover, .cs-9 .p-card:hover { transform: translateY(-6px); border-color: #ffd84d !important; outline-color: rgba(255,216,77,.4); box-shadow: 0 16px 40px rgba(0,0,0,.5), 0 0 28px rgba(202,166,75,.14); } .cs-9 .hp-card:hover::before, .cs-9 .p-card:hover::before, .cs-9 .hp-card:hover::after, .cs-9 .p-card:hover::after { width: 18px; height: 18px; border-color: #ffd84d; } .cs-9 .hp-price b, .cs-9 .p-price { background: linear-gradient(120deg, #ffd84d, #caa64b); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ============ 10: المينيمال الحاد ============ */ .cs-10 .hp-card, .cs-10 .p-card { border-radius: 0 !important; background: transparent !important; border: 1px solid var(--line) !important; box-shadow: none !important; transition: transform .3s, border-color .3s, background .3s; } .cs-10 .hp-card::after, .cs-10 .p-card::after { content: ''; position: absolute; bottom: -1px; right: 0; height: 2px; width: 0; background: linear-gradient(90deg, #c9d1d9, #ffd84d); transition: width .45s cubic-bezier(.2,.7,.3,1); } .cs-10 .hp-card:hover, .cs-10 .p-card:hover { transform: translateY(-5px); border-color: #3a4450 !important; background: rgba(255,255,255,.015) !important; } .cs-10 .hp-card:hover::after, .cs-10 .p-card:hover::after { width: 100%; } .cs-10 .hp-thumb, .cs-10 .p-thumb { border-radius: 0 !important; } .cs-10 .hp-badge { border-radius: 0 !important; } /* ============================================================ إصلاح قصّ الزخارف البارزة خارج حدود البطاقة (أقواس التصويب في نمط 5 كانت تُقص من الأعلى عند ارتفاع البطاقة) ============================================================ */ .cs-5 .hp-card, .cs-5 .p-card { overflow: visible !important; } /* شبكة صفحة المنتجات: مجال للارتفاع فلا يُقص أعلى البطاقة */ .cs-1 .p-grid, .cs-4 .p-grid, .cs-5 .p-grid, .cs-7 .p-grid, .cs-9 .p-grid, .cs-10 .p-grid { padding-top: 10px; } /* ============================================================ لون إطار مخصص لكل نمط — يُختار من: تصميم الموقع ← زر «تعديل» تحت النمط يُفعّل بكلاس cs-custom على مع المتغير --cs-accent ============================================================ */ .cs-custom .hp-card, .cs-custom .p-card { border: 1.5px solid var(--cs-accent) !important; } .cs-custom .hp-card:hover, .cs-custom .p-card:hover { border-color: var(--cs-accent) !important; box-shadow: 0 16px 38px rgba(0,0,0,.5), 0 0 26px var(--cs-accent-glow) !important; } /* الزخارف الملونة حسب النمط */ .cs-custom.cs-5 .hp-card::before, .cs-custom.cs-5 .p-card::before, .cs-custom.cs-5 .hp-card::after, .cs-custom.cs-5 .p-card::after, .cs-custom.cs-9 .hp-card::before, .cs-custom.cs-9 .p-card::before, .cs-custom.cs-9 .hp-card::after, .cs-custom.cs-9 .p-card::after { border-color: var(--cs-accent) !important; } .cs-custom.cs-5 .hp-badge-sale, .cs-custom.cs-8 .hp-badge-sale { background: var(--cs-accent) !important; color: #0b0e12 !important; } .cs-custom.cs-9 .hp-card, .cs-custom.cs-9 .p-card { outline-color: var(--cs-accent-glow) !important; } .cs-custom.cs-9 .hp-price b, .cs-custom.cs-9 .p-price, .cs-custom.cs-3 .hp-price b, .cs-custom.cs-3 .p-price { background: none !important; color: var(--cs-accent) !important; -webkit-text-fill-color: var(--cs-accent) !important; } .cs-custom.cs-10 .hp-card::after, .cs-custom.cs-10 .p-card::after { background: var(--cs-accent) !important; } .cs-custom.cs-4 .hp-card::before, .cs-custom.cs-4 .p-card::before { background: conic-gradient(var(--cs-accent), rgba(255,255,255,.55), var(--cs-accent), rgba(255,255,255,.25), var(--cs-accent)) !important; } .cs-custom.cs-7 .hp-thumb::after, .cs-custom.cs-7 .p-thumb::after { background: radial-gradient(closest-side, var(--cs-accent-glow), transparent) !important; } .cs-custom.cs-6 .hp-card, .cs-custom.cs-6 .p-card { border-width: 2px !important; }