/* ===================================================================== لاست بلس، تخصيص ثيم ملاك (ANGEL) يُلصق في: تخصيص متقدم ← تخصيص باستخدام CSS باليت فانتوم الرسمية. لايت مود ثابت. ===================================================================== */ /* خط ثمانية الرقمي، وهو thmanyah Sans لا السيرف، بوزن ثقيل. @font-face يعمل في أي موضع من الملف، بعكس @import الذي يُشترط أن يكون أول شيء، لهذا يُحمّل من هنا فيغطي كل الصفحات لا الرئيسية وحدها. اسم العائلة مخصص كي لا يتعارض مع النسخة المحمّلة في بلوك الهيرو. */ @font-face{ font-family:'Thmanyah Sans LP'; src:url('https://cdn.jsdelivr.net/gh/engdawood/thmanyah-font-web@4266a9d/fonts/thmanyah-sans/woff2/thmanyah-sans-Black.woff2') format('woff2'); font-weight:700 900; font-style:normal; font-display:swap; } /* ---------- 1. المتغيرات، وهي الرافعة الأساسية ---------- */ :root{ /* باليت فانتوم */ /* ــــ سُلّم الأساسي، كله على صبغة 249° ــــ من الأغمق للأفتح. القاعدة: الأساسي وما دونه نصه أبيض، وما فوقه (اللافندر فما أفتح) نصه حبر. */ --lp-primary-d:#5138d4; /* الهوفر · مع الأبيض 7.33 */ --lp-primary:#624be7; /* كل فعل وتأكيد · مع الأبيض 5.71، ومع الحبر 2.99 فلا تضعه */ --lp-lav:#ab9ff2; /* تِنت متوسط · مع الحبر 7.52 */ --lp-lav-soft:#ded9fc; /* تِنت فاتح · مع الحبر 12.94 */ --lp-primary-l:#efedfd; /* أخف تِنت، لخلفيات هادئة · مع الحبر 15.26 */ /* ــــ المحايدات، بُرِّدت إلى صبغة الأساسي نفسها ــــ كانت عند 40-43° أي رمادياً دافئاً مصفرّاً، وهو أظهر تنافر في الباليتة بجانب بنفسجي بارد. الفرق في الإضاءة لا يتجاوز 4% فالتغيير هادئ، لكن حرارة الصفحة كلها تتوحّد. */ --lp-ink:#191820; /* كان #1c1c1c رمادياً محايداً · على الأرضية 17.09 */ --lp-plum:#3c315b; /* النص الثانوي، كان في العائلة أصلاً (256°) */ --lp-ground:#fcfbff; /* أرضية الصفحة */ --lp-paper:#fbfbfe; /* كان #fffdf8 دافئاً */ --lp-g1:#e3e1ea; /* كان #e8e6e2 */ --lp-g2:#cac9d4; /* كان #d2d0cc */ /* ــــ اللمسات: صبغاتها بعيدة عمداً، فهي نقاط انتباه لا عائلة ــــ */ --lp-green:#2ec08b; --lp-orange:#ff7243; --lp-yellow:#ffd13f; --lp-pink:#ffdadc; /* إعادة تعريف متغيرات الثيم */ --color-primary:var(--lp-primary); --color-primary-dark:var(--lp-primary-d); --color-primary-light:var(--lp-primary-l); --color-primary-reverse:var(--lp-plum); --color-primary-d:var(--lp-primary-d); --color-primary-l:var(--lp-primary-l); /* نص الأزرار أبيض الآن، لأن الأساسي داكن. والحبر عليه 2.99 ولا يمر. */ --text-btn:#ffffff; --bg-color:var(--lp-ground); --header-bg:#ffffff; /* الأسطح كلها بيضاء صافية، والأرضية وحدها ملوّنة بخفة */ --menu-bg:#ffffff; --footer-bg:#ffffff; --main-text-color:var(--lp-ink); --main-text-color-dark:var(--lp-ink); --color-text:var(--lp-plum); --color-grey:var(--lp-g1); --color-light-grey:var(--lp-g1); /* الأحرف المرسلة تُفعّل بوسم salt، وهو ما يوثّقه موقع ثمانية الرسمي */ --lp-display:'Thmanyah Sans','Thmanyah Sans LP','IBM Plex Sans Arabic',system-ui,sans-serif; --lp-swash:'salt' 1; --font-main:'IBM Plex Sans Arabic', system-ui, sans-serif; --font-secondary:'IBM Plex Sans Arabic', system-ui, sans-serif; --lp-r-lg:24px; --lp-r-md:16px; /* الحدود مصبوغة بالبرقوقي لا بالأسود، بألفا أعلى قليلاً لتبقى بنفس الوزن البصري السابق */ --lp-line:rgba(60,49,91,.13); --lp-line-2:rgba(60,49,91,.22); } /* ---------- 2. الأرضية والنص ---------- */ body{ background:var(--lp-ground); color:var(--lp-ink); font-family:var(--font-main); } /* ---------- 3. الطباعة: خط عرض للعناوين ---------- */ /* كل أوزان الخط هنا بـ !important لسبب واحد: ثيم ملاك يحوي القاعدة الكاسحة *,:after,:before{font-weight:inherit!important} فتُلغي أي وزن نضعه مهما علت خصوصيته. هذا سبب بقاء العناوين غير عريضة. */ h1,h2,h3,h4, .s-block__title, .divider-title, .centered-title{ font-family:var(--lp-display); font-weight:900 !important; font-feature-settings:var(--lp-swash); letter-spacing:-.02em; } .s-block__title{color:var(--lp-ink)} /* ---------- 4. الأزرار ---------- */ .s-button-primary, .btn--primary, button.btn-primary{ background:var(--lp-primary) !important; color:#fff !important; border-color:transparent !important; border-radius:100px !important; font-family:'IBM Plex Sans Arabic',system-ui,sans-serif; font-weight:600 !important; min-height:46px; } .s-button-primary:hover, .btn--primary:hover{ background:var(--lp-primary-d) !important; color:#fff !important; } salla-add-product-button .s-button-primary{width:100%} /* أي زر ثانوي أو محدد */ .btn--outline, .s-button-outline{ border-radius:100px !important; border-color:var(--lp-line-2) !important; color:var(--lp-ink) !important; } /* ---------- 5. بطاقة المنتج ---------- */ .s-product-card-entry{ background:#ffffff; border:1px solid var(--lp-line); border-radius:var(--lp-r-lg); overflow:hidden; transition:border-color .18s ease, transform .18s cubic-bezier(.16,1,.3,1); } .s-product-card-entry:hover{ border-color:var(--lp-line-2); transform:translateY(-2px); } .s-product-card-image{border-radius:var(--lp-r-md)} .s-product-card-content-title, .s-product-card-content-title a{ font-family:'IBM Plex Sans Arabic',system-ui,sans-serif; font-weight:600 !important; color:var(--lp-ink); } .s-product-card-content-subtitle{color:var(--lp-plum)} .s-product-card-price{ font-family:'IBM Plex Sans Arabic',system-ui,sans-serif; font-weight:700 !important; color:var(--lp-ink); font-variant-numeric:tabular-nums; } .s-product-card-sale-price{ color:var(--lp-plum); font-variant-numeric:tabular-nums; } /* شارة العرض: سطح وردي بنص حبر، تباين 13.24 */ .s-product-card-promotion-title{ background:var(--lp-pink) !important; color:var(--lp-ink) !important; border-radius:100px; font-family:'IBM Plex Sans Arabic',system-ui,sans-serif; font-weight:600 !important; } /* شارة نفاد الكمية: برتقالي بنص حبر، تباين 6.28 */ .s-product-card-out-badge{ background:var(--lp-orange) !important; color:var(--lp-ink) !important; border-radius:100px; font-weight:600 !important; } .s-product-card-out-of-stock{opacity:.72} .s-product-card-rating{color:var(--lp-plum)} .s-product-card-wishlist-btn{ background:var(--lp-paper); border:1px solid var(--lp-line); border-radius:100px; } /* ---------- 6. إيقاع الأقسام ---------- */ .s-block__title{margin-bottom:clamp(16px,2.4vw,26px)} /* ---------- 7. الهيدر والتذييل ---------- */ /* الأسطح بيضاء صافية، والأرضية وحدها ملوّنة بخفة، فيبقى الهيدر متميزاً عنها */ .store-header{ background:var(--header-bg); border-bottom:1px solid var(--lp-line); } .store-footer{ background:#ffffff; border-top:1px solid var(--lp-line); } /* ---------- 8. الحقول ---------- */ input[type="text"],input[type="email"],input[type="tel"], input[type="search"],input[type="number"],textarea,select{ border-radius:100px !important; border-color:var(--lp-line-2) !important; background:#ffffff; color:var(--lp-ink); } textarea{border-radius:var(--lp-r-md) !important} /* ---------- 9. الأرقام والأسعار ---------- */ /* أرقام ثمانية الرقمي تطابق أرقام خط النص، لكنه يستبدل ر.س برمز الريال ﷼، فتبقى الأسعار على خط النص مهما كان الوسم عنواناً. */ .s-product-card-price, .s-product-card-sale-price, .total-price, salla-cart-summary, .total,.price,.money{ font-family:var(--font-main); font-variant-numeric:tabular-nums; } /* ---------- 10. الوصولية ---------- */ a:focus-visible,button:focus-visible, .s-button-primary:focus-visible, input:focus-visible,select:focus-visible{ outline:2px solid var(--lp-plum) !important; outline-offset:3px; } @media (prefers-reduced-motion:reduce){ .s-product-card-entry:hover{transform:none} *{animation-duration:.01ms !important;transition-duration:.01ms !important} } /* ---------- 11. شريط الإعلان العلوي ---------- */ .angel-ad, .angel-ad__slider{ background:var(--lp-ink) !important; color:var(--lp-paper) !important; } .angel-ad__item, .angel-ad__content{color:var(--lp-paper) !important} /* أيقونة البوق تُخفى، الدستور يمنع الزينة في العناوين */ .angel-ad__icon{display:none !important} /* ---------- 12. شارة التوفير ---------- */ /* الأحمر الصارخ خارج الباليت، والوردي بنص حبر تباينه 13.24 */ .product-save, .money-save, .product-save .bg-red-500, .money-save.bg-red-500{ background:var(--lp-pink) !important; color:var(--lp-ink) !important; border-color:transparent !important; border-radius:100px !important; font-family:'IBM Plex Sans Arabic',system-ui,sans-serif; font-weight:600 !important; } .product-save .sicon-fire, .product-save [class*="sicon"]{color:var(--lp-ink) !important} .product-save > *{border:0 !important} /* السعر القديم المشطوب: برقوقي لا أحمر */ .total-price del, del, s{color:var(--lp-plum) !important;opacity:.85} /* ---------- 13. الأحمر الدخيل ---------- */ /* الثيم يستعمل text-red-400 وهو ‎#f87171. قِسته على الأرضية فأعطى 2.51، أي فاشل مقابل 4.5 المطلوبة، وهو خارج باليت فانتوم أصلاً. المحددات هنا وسم+صنف كي تتفوق على أدوات تيلويند ذات الصنف الواحد. */ span.total-price, span.total-price > i, .total-price .sicon-sar{ color:var(--lp-ink) !important; /* التباين يصير 15.44 */ } div.details__title, div.details__title span, div.details__title .sicon-fire{ color:var(--lp-plum) !important; /* معلومة ثانوية، 10.67 */ } /* زر إغلاق شريط الإعلان يتبع لون نص الشريط لا الأحمر */ .angel-ad .ad-close, a.ad-close{color:var(--lp-paper) !important} /* السعر القديم المشطوب يبقى برقوقياً، وتأتي بعد ما سبق كي لا تُدهس */ .total-price del, .total-price s{color:var(--lp-plum) !important;opacity:.85} /* ---------- 14. مكعبات قسم المميزات ---------- */ /* نفس ألوان الباليت الثلاثة، مرفوعة درجة واحدة بمزجها مع الأبيض 15%. الهوية اللونية تبقى كما هي، والتباين يتحسّن، وأثقلها الأزرق كان 4.90 وهو أضعف رقم في التصميم كله فصار 6.02. !important ضرورية لأن نمط البلوك يأتي في الجسم بعد هذا الملف. */ .lp2{ --lav:#b8adf4 !important; /* من ‎#ab9ff2 · تباين 8.38 */ --blue:#6599f4 !important; /* من ‎#4a87f2 · تباين 6.02 */ --org:#ff875f !important; /* من ‎#ff7243 · تباين 7.21 */ } /* ---------- 15. رفع مستوى بطاقات المنتجات ---------- */ /* أعمدة الثيم repeat(4,1fr) فتُثبَّت البطاقتان يميناً ويبقى نصف الصف فارغاً. auto-fit بحد أعلى للعرض يجعلها تتوسّط مهما كان عددها. الحد الأقصى 280px لا أكثر، لأن auto-fit يحسب عدد الأعمدة بالأقصى لا بالأدنى، فأي رقم أكبر ينزل بصفحات التصنيفات من أربعة أعمدة إلى ثلاثة. */ .s-products-list-wrapper{ grid-template-columns:repeat(auto-fit,minmax(240px,280px)) !important; justify-content:center; gap:18px !important; } /* السعر هو أهم رقم في البطاقة، وكان أحمر ‎#f87171 بحجم 14px فقط. تباينه على الأبيض 2.51 وفاشل. */ /* المحددات موسّعة لأن سلة قد تبدّل وسم السعر عند تغيير العملة */ .s-product-card-sale-price h4, .s-product-card-content-footer h4, .s-product-card-content-footer .total-price{ font-family:var(--lp-display) !important; font-weight:900 !important; font-size:23px !important; line-height:1.15 !important; color:var(--lp-ink) !important; font-variant-numeric:tabular-nums; } /* السعر القديم كان رمادي ‎#9ca3af، تباينه 2.54 */ .s-product-card-sale-price span, .s-product-card-content-footer del, .s-product-card-content-footer s{ color:var(--lp-plum) !important; opacity:.72; font-size:14px !important; } .s-product-card-sale-price{display:flex;flex-direction:column;gap:1px;align-items:flex-start} /* التذييل: السعر يمين والزر يملأ ما تبقى بلا انكسار */ .s-product-card-content-footer{ display:flex !important; align-items:center; gap:12px; margin-top:14px; } .s-product-card-content-footer salla-add-product-button{flex:1;min-width:0} .s-product-card-content-footer .s-button-primary{width:100%;white-space:nowrap;padding-inline:14px} /* عمق خفيف يرفع البطاقة عن الأرضية شبه البيضاء */ .s-product-card-entry{ box-shadow:0 1px 2px rgba(28,28,28,.04); } .s-product-card-entry:hover{ box-shadow:0 12px 28px rgba(60,49,91,.10); } /* لا انحناء على الصورة نفسها. البطاقة عندها overflow:hidden وحواف 24px، فهي تقصّ الصورة من أعلى وحدها. انحناء الصورة كان يكشف بياض البطاقة في الزوايا. */ .s-product-card-image, .s-product-card-image img, .s-product-card-vertical .s-product-card-image{ border-radius:0 !important; padding:0 !important; } /* شارة العرض تُثبَّت في زاوية الصورة بحجم مقروء */ .s-product-card-promotion-title{ font-size:12px !important; padding:5px 12px !important; line-height:1.4 !important; } /* ---------- 16. قسم اختيار الاشتراك ---------- */ /* البطاقات صارت متوسّطة والعنوان بقي يميناً فاختلّ ميزان القسم. .s-block__title في الثيم فلكس بـspace-between، فالتوسيط يصلحه. */ .s-block__title{ justify-content:center !important; gap:18px; text-align:center; } /* التقييم كان رمادي ‎#9ca3af وتباينه 2.54، ونحوّله شارة مقروءة على الصورة */ .s-product-card-rating{ color:var(--lp-ink) !important; background:var(--lp-paper); border:1px solid var(--lp-line); border-radius:100px; padding:4px 11px; font-size:12.5px !important; font-weight:600 !important; width:fit-content; max-width:max-content; backdrop-filter:saturate(140%) blur(6px); } .s-product-card-rating svg, .s-product-card-rating span svg{fill:var(--lp-yellow) !important} /* إيقاع أهدأ داخل البطاقة: العنوان أوضح والوصف أخفت */ .s-product-card-content-title a{font-size:16.5px;line-height:1.55} .s-product-card-content-subtitle{ color:var(--lp-plum) !important; font-size:13px !important; margin-bottom:0 !important; opacity:.85; } /* البطاقة الأولى تُميَّز كخيار موصى به. التمييز بالموضع لا بالمنتج، فإن غيّرت الترتيب انتقل التمييز معه. */ .s-products-list-wrapper > :first-child .s-product-card-entry{ border-color:var(--lp-primary) !important; box-shadow:0 0 0 3px rgba(98,75,231,.22), 0 10px 26px rgba(60,49,91,.10); } .s-products-list-wrapper > :first-child .s-product-card-entry:hover{ box-shadow:0 0 0 3px rgba(171,159,242,.38), 0 16px 34px rgba(60,49,91,.14); } /* ---------- 17. إيقاع المسافات بين الأقسام ---------- */ /* كانت المسافة تتضاعف: قسم الثيم يعطي حشوة، وكل بلوك من بلوكاتنا يضيف حشوته فوقها، فبلغ الفاصل 240px على الديسكتوب. القياس: قسم 64 + بلوك 56 + بلوك 56 + قسم 64. الحل توحيد المصدر: القسم وحده يتحكم، والبلوك بلا حشوة رأسية. */ .s-block{padding-block:clamp(28px,3.6vw,52px) !important} /* سلة تلفّ كل بلوك HTML في عنصر داخلي يحمل صنف s-block هو أيضاً (‎
‎ ثم ‎‎، واسم العنصر عشوائي فلا يصلح استهدافه بالاسم). فبلا هذه القاعدة تُطبَّق الحشوة مرتين متداخلتين ويتضاعف الفاصل. القسم الخارجي وحده يتحكم. */ .s-block .s-block{padding-block:0 !important} .lp-hero,.lp2,.lp3,.lp4,.lp5,.lp6,.lp7,.lp8{padding-block:0 !important} /* ⚠︎ الهيدر في ملاك خارج التدفق تماماً: ‎
‎ ولا توجد في الثيم أي قاعدة تعوّض ارتفاعه. فهو يفترض أن أول قسم صورة ملء الشاشة يطفو فوقها. وهيرونا نصّي، فالخلوص من مسؤوليته وحده. لهذا لا تقس المسافة العلوية كفراغ مرئي: أول ~55px منها يبتلعها الهيدر. المسافة كانت تأتي من ثلاثة مصادر متنافسة (حشوة القسم، وحشوة الغلاف الداخلي، وحشوة الهيرو)، وقيمة القسم يضبطها الثيم من ‎--padding-y-mobile‎ الذي يتغير من محرر سلة لكل بلوك. نصفّر كل ما فوقه ونجعله المصدر الوحيد. ‎:has‎ يمسك القسم والغلاف معاً لأن كليهما s-block يحوي ‎.lp-hero‎. الحساب: ارتفاع الهيدر ≈ ارتفاع اللوقو + 22px. مع لوقو 30px على الجوال يصير 52px، و82 − 52 = 30px فراغاً مرئياً تحت الهيدر. وعلى الديسكتوب 130px، وهي نفس ما كان يعطيه الثيم قبل التوحيد (132px). ⚠︎ لو أُعيد تفعيل شريط الإعلان ‎.angel-ad‎ داخل الهيدر ازداد ارتفاعه ~44px، فتحتاج زيادة الحدين بمقدارها. */ .s-block:has(.lp-hero){padding-top:0 !important} .lp-hero{padding-block:clamp(82px,10vw,130px) 0 !important} /* شارة «سنة كاملة · تفعيل فوري» في قسم مستقل عن العنوان، فبدونها يفصلهما 104px. نُلغي ما بينهما لتلتصق بعنوانها. */ .s-block:has(.lp8){padding-bottom:0 !important} .s-block:has(.lp8) + .s-block{padding-top:0 !important} /* ---------- 18. إخفاء عنوان الثيم المكرر ---------- */ /* بلوك رأس الاشتراكات lp9 يحمل العنوان بنفسه، فعنوان بلوك «منتجات ثابتة» يتكرر تحته. نخفي عنوان القسم التالي لبلوكنا وحده، لا كل العناوين. نستهدف عنصر العنوان لا القسم، فلو كان العنوان داخل قسم المنتجات نفسه بقيت البطاقات ظاهرة. */ .s-block:has(.lp9) + .s-block .s-block__title{display:none !important} /* وإن كان العنوان في قسم مستقل، يبقى القسم فارغاً فنطوي حشوته */ .s-block:has(.lp9) + .s-block:not(:has(.s-products-list-wrapper)):not(:has(.s-product-card-entry)){ padding-block:0 !important; } /* ---------- 19. صفحة المنتج ---------- */ /* أربعة ألوان دخيلة من الثيم، قِستها كلها فوجدتها تفشل في AA. */ /* شارة العرض فوق صورة المنتج: خلفية ‎#f87e7e ونص أبيض، تباين 2.54 */ p.promotion-title{ background:var(--lp-pink) !important; /* حبر على وردي = 13.24 */ color:var(--lp-ink) !important; border-radius:100px; font-weight:600 !important; } /* السعر القديم المشطوب: رمادي ‎#9ca3af، تباين 2.46 */ span.before-price, .price_is_on_sale .before-price{ color:var(--lp-plum) !important; /* 10.67 */ opacity:.75; } /* «متوفر» بأخضر ‎#22c55e، تباين 2.21. وأخضر الباليت نفسه لا يصلح نصاً على أبيض، فالنص حبر والنقطة خضراء. */ .product-availablity strong, .product-availablity .text-green-500{color:var(--lp-ink) !important} .product-availablity [class*="bg-green"]{background:var(--lp-green) !important} /* حقوق التذييل: رمادي ‎#9ca3af فوق شفافية .75، تباين 2.54 */ .copyrights{opacity:1 !important} .copyrights, .copyrights p, .copyrights a{color:var(--lp-plum) !important} /* ---------- 20. هرم صفحة المنتج ---------- */ /* القياس كشف أن اسم المنتج والسعر كليهما 20px، فالعنصران الأهم يتنافسان ولا هرم بينهما. */ /* الاسم يقود الصفحة */ .main-content h1{ font-size:clamp(23px,2.6vw,32px) !important; line-height:1.32; letter-spacing:-.02em; } /* السعر هو العنصر الحاسم في قرار الشراء، فيأخذ حجماً يليق به. محصور في المحتوى الرئيسي كي لا ينتفخ في الشريط السفلي الثابت. */ .main-content .price_is_on_sale{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap} .main-content .price_is_on_sale .total-price, .main-content .total-price{ font-family:var(--lp-display) !important; font-weight:900 !important; font-size:clamp(30px,3.4vw,38px) !important; line-height:1.1 !important; letter-spacing:-.02em; } .main-content .before-price{font-size:17px !important} /* الشريط السفلي الثابت يقع داخل .main-content أيضاً، فيلتقط قاعدة التكبير. نعيده لحجمه لأن ارتفاعه 84px فقط ولا يحتمل سعراً بـ38px. */ /* الشريط فيه عنصرا سعر، واحد للديسكتوب وآخر للجوال، وليس كلاهما داخل price_is_on_sale. فنستهدف أي سعر داخل الشريط، بثلاثة أصناف تساوي خصوصية قاعدة التكبير، والأسبقية لنا لأننا بعدها في الملف. */ .main-content .sticky-product-bar .total-price{ font-family:var(--font-main) !important; font-weight:700 !important; font-size:20px !important; letter-spacing:normal; } .main-content .sticky-product-bar .before-price{font-size:14px !important} /* عدد مرات الشراء: كان يشغل صفاً كاملاً، الرقم في طرف والعنوان في الطرف الآخر */ .is-sold .details__container{justify-content:flex-start !important;gap:10px} .is-sold .details__title{gap:7px} .is-sold .sold-count{ font-weight:600 !important; font-variant-numeric:tabular-nums; color:var(--lp-ink); } /* ---------- 21. إخفاء شارات المنتج ---------- */ /* ثلاث شارات نصّها تجريبي «رؤلارؤلا» وما شابه، والمالك لا يريدها. ملاحظة: الإخفاء بصري فقط، والنص يبقى في مصدر الصفحة. */ .p-block--features{display:none !important} /* ---------- 22. وصف منتجَي بلس ---------- */ /* الوصف يحمل أنماطاً سطرية تكفي وحدها، لأن سلة قد تُسقط class. وما هنا تحسينات لا يستطيعها السطري: مؤشر الطي، الحوم، ومقاسات الجوال. */ /* المثلث الافتراضي يظهر في يمين السطر بالعربية ويزاحم النص، فنستبدله بسهم مرسوم في الطرف المقابل يدور عند الفتح. */ .lpd-s{ display:flex !important; align-items:center; justify-content:flex-start; /* لا space-between: الشعار في §23 عنصر ثالث فكان يتفرّق الثلاثة */ gap:10px; list-style:none; transition:color .18s ease; } .lpd-s::-webkit-details-marker{display:none} /* الحدود فيزيائية لا منطقية: المنطقية تنعكس مع RTL فينقلب اتجاه السهم. المطوي يشير يساراً (اتجاه القراءة العربية)، والمفتوح يشير أسفل. */ .lpd-s::after{ content:""; flex:none; width:9px;height:9px; border:2px solid var(--lp-plum,#3c315b); border-top:0; border-right:0; margin-inline-start:auto; /* يدفع السهم إلى الطرف بعد إلغاء space-between */ transform:rotate(45deg) translateX(2px); transition:transform .22s cubic-bezier(.16,1,.3,1); } .lpd-d[open] .lpd-s::after{transform:rotate(315deg) translateY(-3px)} .lpd-d{transition:border-color .18s ease} .lpd-d[open],.lpd-d:hover{border-color:var(--lp-line-2) !important} /* هوامش عناصر قوائم الأكورديون في CSS لا سطرياً، توفيراً لحد الـ20 ألف حرف الذي تفرضه سلة على الوصف. لو سقط الclass بقيت القائمة مقروءة بلا تباعد. */ .lpd-b li{margin:0 0 6px;list-style:disc} .lpd-b li:last-child{margin-bottom:0} /* أول بند في القائمة لا يحتاج فاصلاً علوياً، فالعنوان فوقه */ .lpd-inc .lpd-i:first-child{border-top:0 !important;padding-top:0 !important} @media (max-width:600px){ .lpd-h{font-size:19px !important} .lpd-lede{font-size:15px !important} .lpd-d{padding-inline:14px !important} /* الشريط 15:1، فيصغر كثيراً على شاشة ضيقة؛ نقتطع منه بدل تصغيره. ⚠︎ والاتجاه هنا ltr عمداً وليس سهواً: الصورة 660px داخل حاوية ~388px، وفي RTL تلتصق حافتها اليمنى بيمين الحاوية فيُقصّ طرفها الأيسر — أي تختفي انستقرام وتيك توك وواتساب ويوتيوب ولا يبقى إلا ريديت فما بعدها، فيفتتح الوصف بأضعف الأيقونات. قِستُ الإزاحة: ‎-272px‎. مع ltr تلتصق الحافة اليسرى فتظهر الأشهر أولاً، والتعليق يستعيد rtl لنفسه. */ .lpd-apps{ overflow:hidden; border-radius:12px; direction:ltr; } .lpd-apps-img{ max-width:none !important; width:auto !important; height:44px !important; border-radius:0 !important; } .lpd-apps-cap{margin-top:8px;direction:rtl} /* شبكة الثقة تنهار إلى عمود واحد تحت 432px (minmax الأدنى 200px)، فتصير ثلاث خلايا بعرض 386 وارتفاع 79.5 ونصّها في الزاوية وحولها فراغ. قِستُ ذلك. نجعل كل خلية سطراً واحداً: العنوان يميناً وشرحه يساراً، فينزل ارتفاع الكتلة الثلاثية من ~240px إلى ~120px ويُستعمل العرض كله. */ .lpd-trust{grid-template-columns:1fr !important} .lpd-t{display:flex !important;align-items:baseline;justify-content:space-between; gap:14px;padding:11px 14px !important} .lpd-t b{display:inline !important;margin-bottom:0 !important;white-space:nowrap} .lpd-t > span{text-align:left} } @media (prefers-reduced-motion:reduce){ .lpd-s::after,.lpd-d{transition:none} } /* ــــ تبريد محايدات الوصف ــــ القسم 25 يجرّ بلوكات الصفحة الرئيسية إلى :root عبر متغيراتها المحلية، لكن وصف المنتج لا متغيرات فيه: ألوانه مكتوبة سطرياً قيماً صريحة (‎#1c1c1c‎ و‎rgba(28,28,28,.10)‎) لأنه يجب أن يبقى مقروءاً لو أسقطت سلة الـclass. وتعديلها في مكانها يوجب إعادة كتابة وصفين طولهما ~19 ألف حرف لكل تغيير لون، فنتجاوزها من هنا. الأنماط السطرية تتقدم على الملف فلزم !important. ملاحظة: ‎--lp-plum‎ لم يتغيّر أصلاً فلا حاجة لتجاوز ‎#3c315b‎. */ .lpd-h,.lpd-t b,.lpd-i b,.lpd-s,.lpd-b b,.lpd-save strong{color:var(--lp-ink) !important} .lpd-trust{background:var(--lp-line) !important;border-color:var(--lp-line) !important} .lpd-d,.lpd-i,.lpd-inc{border-color:var(--lp-line) !important} /* ---------- 23. شعارات التطبيقات في أكورديون الوصف ---------- */ /* الشعارات في CSS لا في الوصف: الوصف قارب حدّ الـ20 ألف حرف الذي تفرضه سلة، وإضافة وسم لكل صف كانت ستتجاوزه. والربط بترتيب الصفوف عبر nth-of-type، لأن الأكورديونين (التطبيقات ثم «كل ما تحتاج معرفته») أشقّاء في الأب نفسه: الصفوف 1..10 تطبيقات، وما بعدها معلومات فلا شعار لها. ⚠︎ لو أعدت ترتيب صفوف التطبيقات أو أضفت صفاً في وسطها، أعد ترقيم القواعد أدناه. المصدر شريطا أيقونات على CDN سلة تستعملهما الواجهة أصلاً، فلا طلب إضافي ولا ارتباط بمضيف طرف ثالث. قِست الشريطين: 12 أيقونة، عرض 144، خطوة 180، الإجمالي 2160×144. وساوند كلاود ليست فيهما فهي مضمّنة أدناه. */ .lpd-d:nth-of-type(-n+10) .lpd-s::before{ content:""; flex:none; width:26px; height:26px; border-radius:29%; /* لتدوير أيقونة ساوند كلاود المربّعة؛ البقية زواياها شفافة أصلاً */ background-repeat:no-repeat; background-image:url(https://cdn.salla.sa/GQyPw/qW8lbRERSMDzWBa1jOEzLdDG8MCHnMxbxiXF9ylO.png); background-size:390px 26px; /* 2160×144 مصغّراً بنسبة 26/144 */ } .lpd-d:nth-of-type(1) .lpd-s::before{background-position:0 0} /* انستقرام */ .lpd-d:nth-of-type(2) .lpd-s::before{background-position:-65px 0} /* واتساب */ .lpd-d:nth-of-type(3) .lpd-s::before{background-position:-32.5px 0} /* تيك توك */ .lpd-d:nth-of-type(4) .lpd-s::before{background-position:-97.5px 0} /* يوتيوب */ .lpd-d:nth-of-type(5) .lpd-s::before{background-position:-130px 0} /* تويتر X */ .lpd-d:nth-of-type(6) .lpd-s::before{background-position:-195px 0} /* التصميم — بيكس آرت */ .lpd-d:nth-of-type(7) .lpd-s::before{background-image:url(https://cdn.salla.sa/GQyPw/F5gEnxu9j4dSxIkknrcRi7bcGKwxMLaDo5z3zI6T.png);background-position:-260px 0} /* مدفوعة — بروكريت */ .lpd-d:nth-of-type(8) .lpd-s::before{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAG7UlEQVR42u2azWtTTxfHvzNzk5qmtY1tUttAowSEIijiQtwoFUuRqoi4UQSxf4baLqzduHPhykXFii5d2IUKiuhGDEjjS6GIiKZgbKv1JVWTmzvnWTycITe/vuVp0l8fmYHLcO4MvXM+PXPOmTMRAAi2LdqkRWABWUAWkAVkAVlAFpAFZJsFZAFZQBaQBWQBWUAWkG0WkAVUreas9wUKIXwy0dqW0MV6K9oLISDlfw3b87wFx5VSICJorWsObF0BEkL8Q+HGxkaEw2EAwPz8PH7+/OkbV0otCPKv22KlcPr6+nD06FHs3r0b8Xgc4XAYQgjkcjlkMhmkUimMjY3hwYMH8DwPUkoQUc2sif6tRwhBSikSQpAQghKJBD19+pRW2sbHx+nUqVPm70kpa7HOfw8QP4FAgADQlStXiIgon8+T67rkeR5prX2P53lmjNudO3coFosRAFJK/f8AYgtZ6D0A6ujooEOHDpn//PXr16lYLJLruiuyIIZFRDQ5OUnJZLLqllTTPIiIfA6UI5RSCgBw7Ngx3L17F8FgEACgtTZjK0ripITjOHBdF9u2bcP9+/fR1tYGIjKRcF0lirxgzl06OjrQ19fnc8JaazO/oaEBAEyUKs95VtoCgQBc10UymcTo6Oiq/lZNAWmtUSwWjRWcOHECY2NjqK+vBxGht7cXt27dMtEmEolAKYWNGzeuWimG1NPTg/7+fnieV5E11hQQm/POnTsxMDDgA6C1RiQSAQDs378fJ0+eNHJzczMAGECrbZxADg4OIhwOQ2sNIcSqwFcV0OHDh3Hx4kWjcGtrK6SUaGpqMkA8z0Nra6sPEPer3RZSSmit0dnZiSNHjhifxz7JcZyKfZOsNJkrVaL0WAAALS0t8DwPsVgMALBp0yZjSQAQjUahlDKAGhsbq2pBHBiICMePH/dZEG//SgOBU+nHF1oMQ4rFYlBKIRqNYnJy8h8WwqBaWlp8gKplQbzNhBA4ePAg7t27h87OTgDA1NQUnjx5gtu3b+Pdu3fmW8tl33I5k1VK+Zzuw4cPjdzc3IwdO3aYUM6Kc89bi/tyIBy9+H01T/+RSAS9vb3o6upCV1cXenp6MDQ0hPHxcVy4cAFEtCL/JJeLSnzWAYDu7m4cOHAA8XgcANDf349nz56hrq7OpzhvLQ7j5eGcgW3YsMH3vhY5mNba6FEsFtHQ0IChoSGMjo4a618KklzK6e7btw/Dw8NwXdfkNVprbN26FQCwfft2hEIhJBIJHwj2KQyA37McCoUAwCSI9fX1NTn8KqUgpTQ7wXEcEBEKhQJOnz6NgYEBnwFUDOjMmTM4d+4cNm/eDABob2+HlNJY0JYtW0BEBhgrXg6AZcdxfO8DgQAAGAtcq6pBIBCA53k4f/48ksnkkpDkYlsLABKJBDzPw65du3xOlqNQNBqFEMIAY4UZAAPh97wI9mHc87y1Lq0Eg0GcPXvWt7ZlAXFIlFKivb0dSikkk0mfJZT7FnbKvJdZcf7oYh+v1nFgNZC6u7sXrV4u6aTr6uoMEHa+rHi5pfC8pdKB0p4Xw5Zay4rgcjldPB5HMBg0UW3FgErrvaxAubzY1iwUCgCAYrEIAMbJl8vc8/z1cjGwJCCGUCgUkMvlAAAzMzM+RX79+uWT8/m8r//z549P/v37t28+yzw+Pz+/5lA4yZ2amkI+n1+wHr5kFCMifP78GUSEDx8+AIApmH///t0HqlxmsAyKZQbx48cPH6jyQvxaARJC4NGjRz73UVGY//jxI4QQePv2LQBgbm4OADA7O+uTv3z54gPB7xkEA+Rxlnmc5681nHw+j5GREZ97qCiTfvPmDbLZLDKZDABgenra1zMolr9+/errFwNaPs5beC0uBYkIrutCKYVLly7h/fv3UEpVBoid6bVr17B3716z8E+fPoGIkM1mF5Snp6ehtTbAeIuWAtVa+8CWzi8NDtV++DQvhEAwGMTNmzcxPDy87L3akhlaLpdDLpdDIBAwigghjEIzMzMQQhgLmJ2dhZTSyNls1jd/bm4OUkofoNL5nNFWq5680I1tPp/H5cuXMTg4aOpH/3O5g3MFtqgbN24glUoZZ/zq1Ss8f/4c3759AwC8fPkS6XTa+KTXr19jYmLCyOl0Gi9evDCA0uk0UqkUZmdnIYTA1atXsWfPHrS1tVU1kXRdF5lMBo8fP8bIyAgmJiZM1FpuW6/q6lkIYW4VSs85HM6llAiFQr4w7jiOAV56dcwLdhwHTU1NVfNHQgi4rmsCQqXX1RUBYjOtVea7EpNfTXMcx5Q/1uzHC+UJVjXkWkWvv+LnL7C/MLOALCALyDYLyAKygCwgC8gCsoAsIAvIIrCALCALyAKygCygv7X9B5w+858jRPavAAAAAElFTkSuQmCC);background-size:26px 26px;background-position:0 0} /* أفلام وموسيقى — ساوند كلاود */ .lpd-d:nth-of-type(9) .lpd-s::before{background-image:url(https://cdn.salla.sa/GQyPw/F5gEnxu9j4dSxIkknrcRi7bcGKwxMLaDo5z3zI6T.png);background-position:-65px 0} /* ألعاب — براول ستارز */ .lpd-d:nth-of-type(10) .lpd-s::before{background-image:url(https://cdn.salla.sa/GQyPw/F5gEnxu9j4dSxIkknrcRi7bcGKwxMLaDo5z3zI6T.png);background-position:-325px 0} /* إنتاجية — دولينجو */ /* على الجوال يتغيّر المقياس فتتغيّر كل المواضع تبعاً له */ @media (max-width:600px){ .lpd-d:nth-of-type(-n+10) .lpd-s::before{width:24px;height:24px;background-size:360px 24px} .lpd-d:nth-of-type(2) .lpd-s::before{background-position:-60px 0} .lpd-d:nth-of-type(3) .lpd-s::before{background-position:-30px 0} .lpd-d:nth-of-type(4) .lpd-s::before{background-position:-90px 0} .lpd-d:nth-of-type(5) .lpd-s::before{background-position:-120px 0} .lpd-d:nth-of-type(6) .lpd-s::before{background-position:-180px 0} .lpd-d:nth-of-type(7) .lpd-s::before{background-position:-240px 0} .lpd-d:nth-of-type(8) .lpd-s::before{background-size:24px 24px} .lpd-d:nth-of-type(9) .lpd-s::before{background-position:-60px 0} .lpd-d:nth-of-type(10) .lpd-s::before{background-position:-300px 0} } /* ---------- 24. تعميم اللون الأساسي على البلوكات المكتوبة يدوياً ---------- */ /* كل بلوك HTML يحمل ألوانه في نمطه الخاص داخل الجسم، فيأتي بعد هذا الملف ويغلبه. لذلك !important هنا ضرورية لا زينة — نفس سبب §14. وأصلحناها من هنا لا بإعادة كتابة البلوكات، لأن بلوك «ابدأ اليوم» يحمل صورة base64 بثمانية كيلوبايت لا داعي لنسخها يدوياً. القاعدة الحاكمة: الأساسي #624be7 نصه أبيض دائماً (5.71)، والحبر عليه 2.99 ولا يمر. فكل خلفية تتحول للأساسي يتحول نصها معها. */ /* زر «ابدأ اليوم مع لاست بلس» */ .lp6-1{background:var(--lp-primary) !important;color:#fff !important} .lp6-1:hover{color:#fff !important} /* حلقة السهم كانت داكنة على زر فاتح؛ صارت فاتحة على زر داكن */ .lp6-1 .lp6-arw{background:rgba(255,255,255,.22) !important} /* نقاط قائمة «وش يشمل الاشتراك» في بلوك تفاصيل الاشتراك: الدائرة تصير أساسياً والنقطة داخلها بيضاء، وكانت لافندر بنقطة سوداء */ .lp7-it i{background:var(--lp-primary) !important} .lp7-it i::before{background:#fff !important} /* علامات الصح في وصف منتجَي بلس. الأنماط سطرية داخل الوصف، وتغييرها هناك يوجب إعادة كتابة وصفين كاملين، فنتجاوزها من هنا. العلامة مرسومة بالحدود لا بمحرف، فيكفي قلب لونها. */ .lpd-ck{background:var(--lp-primary) !important} .lpd-ck > span{border-color:#fff !important} /* ---------- 25. تبريد محايدات البلوكات المكتوبة يدوياً ---------- */ /* كل بلوك في الصفحة الرئيسية يحمل نسخته الخاصة من الباليتة في متغيرات محلية على جذره (‎--i‎ للحبر و‎--pap‎ للورقي و‎--ln‎ للحدود)، وقد كُتبت حين كانت المحايدات دافئة. ولأن ‎