/** * تحذير: هذا الملف موجود للتوافق فقط. * استخدم pharma-bundle.css في المشاريع الجديدة. * سيُحذف في v3.0 */ /** * premium-ui.css — تسلسل بصري أوضح + تفاعلات لمس خفيفة * يُحمّل بعد mobile-ux.css * * أداء الصور: راجع lazy في HTML/JS؛ للضغط استخدم أدوات مثل squoosh.app أو cwebp قبل الرفع. */ /* ─── تسلسل بصري (عناوين أقسام أوضح) ─── */ .p-sec-hd h2, .p-sec-hd .p-sec-title, section[aria-labelledby] .p-sec-hd h2 { font-weight: 900; letter-spacing: -0.02em; line-height: 1.2; color: #0a1628; } .p-sec-hd .p-sec-sub, .p-sec-hd p.p-sec-sub { color: #475569; font-weight: 600; font-size: clamp(0.9rem, 2.2vw, 1rem); margin-top: 0.35rem; } .p-sec-hd { padding-bottom: 0.25rem; border-bottom: 1px solid rgba(148, 163, 184, 0.22); margin-bottom: clamp(1.25rem, 3vw, 2rem) !important; } body.index-page .p-sec { position: relative; } /* فصل خفيف بين الأقسام (بدون إرهاق بصري) */ body.index-page .p-sec + .p-sec::before { content: ""; display: block; height: 1px; margin: 0 auto 0; max-width: min(1100px, 94vw); background: linear-gradient( 90deg, transparent, rgba(0, 135, 90, 0.14), transparent ); } /* بطاقات منتجات: عمق خفيف عند التركيز باللمس */ @media (hover: hover) and (pointer: fine) { .pc:focus-within { box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 12px 28px -8px rgba(0, 135, 90, 0.12); } } /* ─── micro-interactions — ضغطة خفيفة (يُحترم prefers-reduced-motion) ─── */ @media (prefers-reduced-motion: no-preference) { button:not(:disabled), [role="button"]:not([aria-disabled="true"]), .p-hbtn, .p-cart-btn, .p-nav-mob, .to-top, #toTopBtn, .pc-wa-fab, .pc-fab-cart, .p-srch-btn, .srch-btn, .login-btn, a.p-cat { transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.2s ease, filter 0.2s ease, background 0.2s ease, border-color 0.2s ease; } button:not(:disabled):active, [role="button"]:not([aria-disabled="true"]):active, .p-hbtn:active, .p-cart-btn:active, .p-nav-mob:active, .to-top:active, #toTopBtn:active, .pc-wa-fab:active, .pc-fab-cart:active, .p-srch-btn:active, .srch-btn:active, .login-btn:active { transform: scale(0.97); } /* أزرار لها تحريك خاص — لا نكسرها */ .p-hbtn-wa:active { transform: translateY(1px) scale(0.985); } .swiper-button-next:active, .swiper-button-prev:active { transform: scale(0.94); } } /* ─── Scroll: ظهور أعمق عند التمرير (يتماشى مع app.js initScrollReveal) ─── */ @media (prefers-reduced-motion: no-preference) { .reveal { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity 0.62s cubic-bezier(0.16, 1, 0.3, 1), transform 0.62s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; } .reveal.in { opacity: 1; transform: translate3d(0, 0, 0); animation: none !important; will-change: auto; } /* بطاقات نصائح / أي عنصر scroll-reveal عام */ .reveal-card:not(.is-visible) { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 0.72s cubic-bezier(0.16, 1, 0.3, 1), transform 0.72s cubic-bezier(0.16, 1, 0.3, 1); } .reveal-card.is-visible { opacity: 1; transform: translate3d(0, 0, 0); } /* أقسام كاملة (.p-sec-fade) — أعمق قليلاً من store-enhancements الافتراضي */ .p-sec-fade { opacity: 0; transform: translate3d(0, 36px, 0); transition: opacity 0.88s cubic-bezier(0.16, 1, 0.3, 1), transform 0.88s cubic-bezier(0.16, 1, 0.3, 1); } .p-sec-fade.is-visible { opacity: 1; transform: translate3d(0, 0, 0); } /* توزيع زمني خفيف لعناصر الشبكة (لا يُطبَّق إلا عند إضافة .in) */ .pgrid6 > .reveal:nth-child(1), .cat-page-grid > .reveal:nth-child(1), .subcat-grid > .reveal:nth-child(1), #homeTopOrderedGrid > .reveal:nth-child(1) { transition-delay: 0s; } .pgrid6 > .reveal:nth-child(2), .cat-page-grid > .reveal:nth-child(2), .subcat-grid > .reveal:nth-child(2), #homeTopOrderedGrid > .reveal:nth-child(2) { transition-delay: 0.04s; } .pgrid6 > .reveal:nth-child(3), .cat-page-grid > .reveal:nth-child(3), .subcat-grid > .reveal:nth-child(3), #homeTopOrderedGrid > .reveal:nth-child(3) { transition-delay: 0.08s; } .pgrid6 > .reveal:nth-child(4), .cat-page-grid > .reveal:nth-child(4), .subcat-grid > .reveal:nth-child(4), #homeTopOrderedGrid > .reveal:nth-child(4) { transition-delay: 0.12s; } .pgrid6 > .reveal:nth-child(5), .cat-page-grid > .reveal:nth-child(5), .subcat-grid > .reveal:nth-child(5), #homeTopOrderedGrid > .reveal:nth-child(5) { transition-delay: 0.16s; } .pgrid6 > .reveal:nth-child(6), .cat-page-grid > .reveal:nth-child(6), .subcat-grid > .reveal:nth-child(6), #homeTopOrderedGrid > .reveal:nth-child(6) { transition-delay: 0.2s; } .pgrid6 > .reveal:nth-child(7), .cat-page-grid > .reveal:nth-child(7), .subcat-grid > .reveal:nth-child(7), #homeTopOrderedGrid > .reveal:nth-child(7) { transition-delay: 0.24s; } .pgrid6 > .reveal:nth-child(8), .cat-page-grid > .reveal:nth-child(8), .subcat-grid > .reveal:nth-child(8), #homeTopOrderedGrid > .reveal:nth-child(8) { transition-delay: 0.28s; } .pgrid6 > .reveal:nth-child(n + 9), .cat-page-grid > .reveal:nth-child(n + 9), .subcat-grid > .reveal:nth-child(n + 9), #homeTopOrderedGrid > .reveal:nth-child(n + 9) { transition-delay: 0.32s; } } /* Hover خفيف — شاشات بفأرة فقط، بعد ظهور البطاقة */ @media (hover: hover) and (pointer: fine) { .reveal-card.is-visible { transition: opacity 0.72s cubic-bezier(0.16, 1, 0.3, 1), transform 0.72s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.38s cubic-bezier(0.22, 1, 0.36, 1); } .reveal-card.is-visible:hover { transform: translate3d(0, -5px, 0); box-shadow: 0 14px 36px -14px rgba(15, 23, 42, 0.14), 0 4px 12px rgba(0, 135, 90, 0.08); } } @media (prefers-reduced-motion: reduce) { button:active, .p-hbtn:active, .p-cart-btn:active, .to-top:active, #toTopBtn:active { transform: none; } .reveal, .reveal.in, .p-sec-fade, .p-sec-fade.is-visible, .reveal-card, .reveal-card.is-visible { opacity: 1; transform: none; animation: none !important; transition: none !important; will-change: auto; transition-delay: 0s !important; } }