/* ========================================================= Two Lives — Unified Production CSS (Transparent Banners & Cards) ========================================================= */ /* خطوط (اختياري) */ @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700;900&display=swap'); @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css'); /* ======= متغيرات الهوية والمقاسات ======= */ :root{ /* ألوان */ --ink: #0f172a; /* نص داكن */ --muted: #667085; /* نص ثانوي */ --brand: #10b981; /* أخضر مساعد (اختياري للعناوين) */ --sky: #0EA5E9; /* أزرق سماوي من الشعار */ --sky-dark: #0284C7; /* هوفر للزر */ --white: #ffffff; /* مقاسات البانرات (ارتفاع الصورة) */ --banner-h-desktop: 340px; --banner-h-tablet: 240px; --banner-h-mobile: 160px; /* مقاسات صور المنتجات */ --prod-h-desktop: 280px; --prod-h-tablet: 220px; --prod-h-mobile: 190px; --radius: 16px; --dur: .35s; --ease: cubic-bezier(.4,0,.2,1); } /* أساسيات */ html,body{font-family:'Cairo', system-ui, Arial, sans-serif; color:var(--ink); background:#fff;} img{max-width:100%; height:auto;} /* ========================================================= (A) البنرات — شفافة تمامًا + بدون قص + دعم PNG ========================================================= */ /* إزالة الخلفيات/الحدود/الظلال من كل حاويات البنرات */ section.s-block.s-block--fixed-banner, section.s-block.s-block--fixed-banner.wide-placeholder, section.s-block.s-block--fixed-banner .container, .s-block--banners, .s-block--banners .container, .s-block--banners .grid, a.banner-entry, a.banner-entry.square-photos, .banner, .square-photos{ background: transparent !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; margin: 0; } /* توسيط البنرات الثابتة على الدسكتوب */ section.s-block.s-block--fixed-banner .container{ display:flex !important; justify-content:center !important; } section.s-block.s-block--fixed-banner .banner--fixed{ display:block !important; margin-inline:auto !important; max-width: 1200px; /* عدّلها لو حاب */ width: 100%; } /* صور البنر: لا تقص وخلّي الارتفاع تلقائي (يحافظ على شفافية PNG) */ section.s-block.s-block--fixed-banner .banner--fixed img, a.banner-entry img, .banner img, .square-photos img{ display:block !important; margin-inline:auto !important; /* يضمن التوسيط لو العرض أقل من الحاوية */ width:100% !important; height:auto !important; object-fit: contain !important; /* يمنع القص يمين/شمال */ background: transparent !important; border-radius: 0 !important; transform: translateZ(0); } /* شبكة البنرات المخصّصة (سكشن العناصر المخصّصة) */ section.s-block.s-block--banners.container{ width: 100% !important; margin: 2rem auto !important; padding: 0 10px !important; } section.s-block.s-block--banners.container .grid{ display:grid !important; grid-template-columns: repeat(2, 1fr) !important; /* دسكتوب = عمودين */ gap:16px !important; align-items:stretch !important; justify-items:center !important; } section.s-block.s-block--banners.container .banner-entry{ width:100% !important; aspect-ratio: 16 / 9 !important; /* نسبة ثابتة أنيقة */ overflow:hidden !important; border-radius: var(--radius) !important; background: transparent !important; box-shadow:none !important; } section.s-block.s-block--banners.container .banner-entry img{ width:100% !important; height:100% !important; object-fit: contain !important; /* بدون قص */ object-position:center !important; } /* تابلت */ @media (max-width: 991px){ section.s-block.s-block--banners.container .grid{ grid-template-columns: repeat(2,1fr) !important; gap:12px !important; } section.s-block.s-block--banners.container .banner-entry{ aspect-ratio: 4 / 3 !important; } } /* موبايل (مطلوب: عنصرين في صف واحد أفقي) */ @media (max-width: 600px){ section.s-block.s-block--banners.container{ margin-top:1rem !important; padding:0 !important; } section.s-block.s-block--banners.container .grid{ grid-template-columns: repeat(2, 1fr) !important; /* صف أفقي من عنصرين */ gap:10px !important; } section.s-block.s-block--banners.container .banner-entry{ aspect-ratio: 4 / 3 !important; border-radius:10px !important; } } /* حماية إضافية من أي ستايل قديم يجبر cover */ @media (max-width: 1024px){ section.s-block.s-block--fixed-banner .banner--fixed img, .s-block--banners .grid .banner-entry img, .banners-grid .banner img, a.banner-entry.square-photos img{ height:auto !important; object-fit: contain !important; } } /* ========================================================= (B) كروت المنتجات — بدون خلفية أو كادر (الصورة هي البطل) ========================================================= */ .s-product-card-vertical{ background: transparent !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; overflow:visible; transition: transform var(--dur) var(--ease); } .s-product-card-image{ background: transparent !important; border-radius:0 !important; } .s-product-card-image img{ width:100%; height: var(--prod-h-desktop); object-fit: contain; display:block; background:transparent; filter: drop-shadow(0 8px 20px rgba(0,0,0,.10)); transition: transform .6s var(--ease), filter .6s var(--ease); } .s-product-card-vertical:hover .s-product-card-image img{ transform: scale(1.05) rotate(-.6deg); filter: drop-shadow(0 12px 28px rgba(0,0,0,.15)); } /* عنوان/سعر نظيف */ .s-product-card-content{ background:transparent !important; padding-top:.5rem; } .s-product-card-content-title a{ display:block; text-align:center; font-weight:800; color:var(--ink); transition: color var(--dur) var(--ease); } .s-product-card-content-title a:hover{ color:var(--brand); } .s-product-card-sale-price h4, .s-product-card-sale-price span{ color: var(--brand); font-weight:800; text-align:center; } /* زر الإضافة للسلة — أزرق سماوي من الشعار */ .s-product-card-content-footer .s-button-btn{ border-radius: 999px; background: var(--sky) !important; color:#fff !important; border:0; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); box-shadow: 0 10px 28px rgba(14,165,233,.25); position:relative; overflow:hidden; isolation:isolate; } .s-product-card-content-footer .s-button-btn:hover{ background: var(--sky-dark) !important; transform: translateY(-2px); box-shadow: 0 14px 34px rgba(2,132,199,.28); } /* إخفاء الأيقونة */ .s-product-card-content-footer .s-button-btn i, .s-product-card-content-footer .s-button-btn .sicon-shopping-bag{ display:none !important; } /* ripple بسيط */ .s-product-card-content-footer .s-button-btn::after{ content:""; position:absolute; left:50%; top:50%; width:0; height:0; border-radius:50%; background: radial-gradient(circle, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 60%); transform: translate(-50%,-50%); transition: width .45s var(--ease), height .45s var(--ease); } .s-product-card-content-footer .s-button-btn:active::after{ width:220%; height:220%; } /* مقاسات صور المنتجات حسب الجهاز */ @media (max-width: 991px){ .s-product-card-image img{ height: var(--prod-h-tablet); } } @media (max-width: 600px){ .s-product-card-image img{ height: var(--prod-h-mobile); } } /* ========================================================= (C) شبكة البنرات العامة (لو استخدمت block السلة الافتراضي) ========================================================= */ .s-block.s-block--banners .grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:12px; } @media (max-width: 991px){ .s-block.s-block--banners .grid{ grid-template-columns: repeat(3,1fr); gap:10px; } } @media (max-width: 600px){ .s-block.s-block--banners .grid{ grid-template-columns: repeat(2,1fr); gap:6px; } } /* ========================================================= (D) الفوتر — نفس تنسيق المرجع الذي اعتمدته ========================================================= */ /* إلغاء أي موجة/تدرّج قديم */ footer.store-footer:before, .store-footer:before { content:none !important; display:none !important; } /* أساس الفوتر */ footer.store-footer, .store-footer__inner, .footer{ background: var(--main-color, #1e3a5f) !important; /* يستخدم main-color لو متعرّف عندك */ color: var(--white) !important; padding: 3rem 0 2rem 0; position: relative; overflow:hidden; box-shadow: none; } /* خط علوي متدرّج */ footer.store-footer::before, .footer::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background: linear-gradient(90deg, var(--secondary-color, #4a90c2), var(--accent-color, #27ae60)); } /* شبكة الأعمدة */ .store-footer__inner .container, .footer .container{ display:flex; flex-wrap:wrap; gap:2rem; justify-content:space-between; align-items:flex-start; } /* عناوين */ .store-footer__inner h3, .footer h3{ color:#fff !important; font-size:1.3rem; font-weight:700; margin-bottom:1rem; position:relative; } .store-footer__inner h3::after, .footer h3::after{ content:""; position:absolute; bottom:-8px; right:0; width:50px; height:3px; background: var(--accent-color, #27ae60); border-radius:2px; } /* القوائم والروابط */ .store-footer__inner ul li, .footer ul li{ margin-bottom:8px; color:rgba(255,255,255,.9); transition:color var(--dur) var(--ease); } .store-footer__inner ul li a, .footer ul li a{ color:rgba(255,255,255,.9); text-decoration:none; transition:all var(--dur) var(--ease); } .store-footer__inner ul li a:hover, .footer ul li a:hover{ color: var(--secondary-color, #4a90c2); transform: translateX(-5px); } /* سوشيال */ .store-footer__inner .s-social-list, .footer .social-links{ display:flex; gap:1rem; justify-content:center; margin-top:1rem; } .store-footer__inner .s-social-list i, .footer .social-links i{ color:#fff !important; font-size:1.5rem; padding:10px; background:rgba(255,255,255,.1); border-radius:50%; transition:all var(--dur) var(--ease); } .store-footer__inner .s-social-list i:hover, .footer .social-links i:hover{ color: var(--secondary-color, #4a90c2) !important; background: rgba(255,255,255,.2); transform: translateY(-3px) rotate(10deg); } /* موبايل للفوتر */ @media (max-width: 768px){ .store-footer__inner .container, .footer .container{ flex-direction:column; text-align:center; } .store-footer__inner h3::after, .footer h3::after{ left:50%; transform:translateX(-50%); } } /* الحقوق */ copyright-text, .store-footer__copyright{ display:block; text-align:center; color:rgba(255,255,255,.9); margin-top:1rem; white-space:nowrap; } /* ========================================================= (E) تحسينات حركة/وصول ========================================================= */ @media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } } :nth-child(1 of section.s-block.s-block--fixed-banner.wide-placeholder){ margin-top:0; } section.s-block.s-block--fixed-banner.wide-placeholder .container{ max-width: 100%; padding:0; } section.s-block.s-block--banners.container{ margin-top:2rem !important; } section.s-block.s-block--banners.container{ width: 100% !important; margin-right: auto !important; margin-left: auto !important; padding-right: 10px !important; padding-left: 10px !important; } @media(max-width:768px){ section.s-block.s-block--banners.container .grid{ grid-template-columns: 1fr 1fr !important; } section.s-block.s-block--banners.container .grid .banner-entry{ height:80px; } section.s-block.s-block--banners.container { margin-top: 1rem !important; } }