@charset "UTF-8"; /* ═══════════════════════════════════════════════════════════════════════ مُونَتْنا — عناصر الواجهة المشتركة الشريط الإعلاني · الشرائط الأفقية · شريط الضمانات · زر التواصل العائم بيستعمل نفس رموز style.css — ولا لون جديد ولا خط جديد. منحمّلو بكل الصفحات لأن الشريط الإعلاني والزر العائم بكل الموقع. ═══════════════════════════════════════════════════════════════════════ */ /* ── ١. الشريط الإعلاني المتحرّك ───────────────────────────────────── */ /* الارتفاع متغيّر لأنو شريط التنقّل مثبّت فوقو: لمّا ينسكّر الشريط لازم النافبار ينزل والمحتوى يطلع، بلا قفزة ولا فراغ. الحجز بصنف .has-announce يلي بيحطّو header.php عالـ — يعني بيشتغل حتى لو الجافاسكربت مقفول. الجافاسكربت بس بيشيل الصنف لمّا الزائر يسكّر الشريط. */ :root { --announce-h-on: 42px; --announce-h: 0px; } .has-announce { --announce-h: var(--announce-h-on); } .announce { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 1001; height: var(--announce-h-on); background: linear-gradient(90deg, var(--green-deep), var(--green)); color: #fff; overflow: hidden; } .announce[hidden] { display: none; } .announce__in { height: 100%; width: min(100% - 1.6rem, var(--maxw)); margin-inline: auto; display: flex; align-items: center; gap: .55rem; } .announce__icon { display: flex; flex: none; opacity: .85; } .announce__icon svg { width: 17px; height: 17px; } /* الرسائل مكدّسة فوق بعض — وحدة ظاهرة والباقي مخفيّة. position:absolute حتى ما يتمدّد الشريط على ارتفاع كل الرسائل. */ .announce__track { position: relative; flex: 1; min-width: 0; height: 100%; } .announce__msg { position: absolute; inset: 0; display: flex; align-items: center; font-family: var(--f-head); font-weight: 700; font-size: var(--t-xs); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(70%); pointer-events: none; /* الطالعة بتختفي بسرعة، والجديدة بتتأخّر شوي — بلا هالتأخير بينقرا السطرين فوق بعض لنص ثانية وبيبيّن وسخ */ transition: opacity .22s var(--ease), transform .3s var(--ease); } .announce__msg.is-on { opacity: 1; transform: none; pointer-events: auto; transition: opacity .3s var(--ease) .2s, transform .4s var(--ease) .16s; } /* الرسالة الطالعة بتطلع لفوق — بيبيّن إنها راحت والجديدة طالعة وراها */ .announce__msg.is-out { opacity: 0; transform: translateY(-70%); } .announce__x { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: inherit; opacity: .75; transition: opacity .2s, background-color .2s; } .announce__x:hover { opacity: 1; background: rgba(255,255,255,.16); } .announce__x svg { width: 16px; height: 16px; } /* شريط التنقّل والمحتوى بينزاحوا تحت الشريط الإعلاني */ .navbar { inset-block-start: var(--announce-h); } body { padding-top: calc(var(--navbar-h) + var(--announce-h)); } /* العناصر اللزجة (الفلاتر · ملخّص الطلب · صورة المنتج) لازم تحسب الشريط كمان، وإلا بينحشروا تحتو وقت التمرير */ .filters { top: calc(104px + var(--announce-h)); } .summary, .pdp__media { top: calc(108px + var(--announce-h)); } .portal__rail { top: calc(var(--navbar-h) + 12px + var(--announce-h)); } @media (max-width: 620px) { :root { --announce-h-on: 38px; } .announce__in { width: calc(100% - 1rem); gap: .4rem; } .announce__icon { display: none; } /* الشاشة الصغيرة: النص أهم من الأيقونة */ .announce__msg { font-size: .82rem; } } /* ── ١ب. فاصل النقطة ──────────────────────────────────────────────── */ /* النقطة الفاصلة كنص («·») بتنقرا صفر عربي لمّا تكون جنب الأرقام الهندية: «٦ منتج · ١ تاجر» بتبيّن للعين «٦ منتج ١٠ تاجر». لهيك منرسمها بالـCSS بين الأبناء بدل ما نكتبها. */ .dotsep { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .45rem; } .dotsep > span + span::before { content: ""; display: inline-block; vertical-align: middle; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .55; margin-inline-end: .45rem; } /* ── ٢. الشرائط الأفقية (rails) ────────────────────────────────────── */ /* بديل خفيف عن Swiper/Slick: scroll-snap تبع المتصفّح. عالموبايل بيشتغل باللمس بلا ولا كيلوبايت JS، وعالديسكتوب الأزرار بتحرّكو بـscrollBy. الأزرار بتنخبّى إذا ما في مجال تمرير. */ .rail__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); } .section__title--start { text-align: start; } .section__sub--start { text-align: start; margin-inline: 0; max-width: 52ch; } .rail__nav { display: flex; gap: .5rem; flex: none; } .rail__btn { width: 46px; height: 46px; border-radius: 50%; background: var(--white); border: 1px solid var(--line); box-shadow: var(--sh-1); color: var(--ink); display: grid; place-items: center; transition: background-color .2s, color .2s, opacity .2s, transform .2s var(--ease); } .rail__btn svg { width: 20px; height: 20px; } .rail__btn:hover:not(:disabled) { background: var(--green); color: #fff; transform: translateY(-2px); } .rail__btn:disabled { opacity: .3; cursor: not-allowed; } .rail { display: flex; gap: var(--s3); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; /* مساحة للظل تبع البطاقة وقت الرفع — بلاها بينقص من فوق وتحت */ padding-block: .4rem 1rem; /* البطاقة الأخيرة لازم توصل لحافة الشاشة عالموبايل */ padding-inline: 0; margin-inline: 0; } .rail::-webkit-scrollbar { display: none; } .rail__item { flex: 0 0 auto; width: 234px; scroll-snap-align: start; display: flex; } .rail__item > * { width: 100%; } .rail--rvs .rail__item { width: 320px; } /* بالموبايل الشريط بيمتدّ لحافة الشاشة — بيبيّن إنّو في كمان بضاعة. .wrap عرضو calc(100% - 1.6rem) يعني ٠.٨rem هامش من كل جهة، فالسالب بيرجّعو لحافة الشاشة والـpadding بيحمي أول بطاقة. */ @media (max-width: 620px) { .rail { margin-inline: -.8rem; padding-inline: .8rem; gap: .7rem; } .rail__item { width: 165px; } .rail--rvs .rail__item { width: 268px; } .rail__nav { display: none; } /* باللمس ما إلها لزوم */ .rail__head { margin-bottom: var(--s3); } } /* ── ٣. شريط الضمانات ──────────────────────────────────────────────── */ .trustbar { background: var(--paper-2); border-block: 1px solid var(--line); padding-block: var(--s5); } .trustbar__grid { display: grid; gap: var(--s3); grid-template-columns: repeat(4, 1fr); } .trustbar__item { display: flex; align-items: flex-start; gap: .8rem; font-size: var(--t-xs); line-height: 1.6; } .trustbar__item b { display: block; font-family: var(--f-head); font-size: var(--t-sm); color: var(--ink); margin-bottom: .1rem; } .trustbar__item > span > span { color: var(--muted); display: block; } .trustbar__ico { flex: none; width: 46px; height: 46px; border-radius: var(--r-md); background: var(--green-soft); color: var(--green-deep); display: grid; place-items: center; } .trustbar__ico svg { width: 23px; height: 23px; } @media (max-width: 900px) { .trustbar__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .trustbar { padding-block: var(--s4); } .trustbar__grid { grid-template-columns: 1fr; gap: var(--s2); } .trustbar__ico { width: 38px; height: 38px; } .trustbar__ico svg { width: 19px; height: 19px; } } /* ── ٤. زر التواصل السريع العائم ───────────────────────────────────── */ .qc { position: fixed; z-index: 900; /* الزاوية المقابلة للسلة بالنافبار — ما بيغطّي ولا زر أساسي. safe-area حتى ما يقع تحت شريط الـiOS السفلي. */ inset-block-end: calc(1rem + env(safe-area-inset-bottom, 0px)); inset-inline-start: 1rem; display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; } .qc__fab { position: relative; width: 56px; height: 56px; border-radius: 50%; background: var(--green); color: #fff; box-shadow: 0 10px 26px rgba(0,122,61,.34); display: grid; place-items: center; transition: transform .25s var(--ease), background-color .2s; } .qc__fab:hover { transform: translateY(-3px) scale(1.04); } .qc__fab svg { width: 25px; height: 25px; grid-area: 1 / 1; } .qc__ico-close { opacity: 0; transform: rotate(-90deg) scale(.6); transition: opacity .2s, transform .25s var(--ease); } .qc__ico-open { opacity: 1; transform: none; transition: opacity .2s, transform .25s var(--ease); } .qc.is-open .qc__fab { background: var(--ink); } .qc.is-open .qc__ico-open { opacity: 0; transform: rotate(90deg) scale(.6); } .qc.is-open .qc__ico-close { opacity: 1; transform: none; } /* نبضة خفيفة مرّة وحدة بعد ما تهدا الصفحة — بتلفت النظر بلا إزعاج */ .qc__fab::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--green); opacity: 0; } .qc.is-hint .qc__fab::after { animation: qcPulse 1.6s var(--ease) 2; } @keyframes qcPulse { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } } .qc__menu { display: flex; flex-direction: column; gap: .5rem; animation: qcIn .22s var(--ease); } .qc__menu[hidden] { display: none; } @keyframes qcIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .qc__opt { display: flex; align-items: center; gap: .7rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-pill); box-shadow: var(--sh-2); padding: .5rem 1.1rem .5rem .7rem; min-height: 52px; max-width: min(78vw, 270px); transition: transform .2s var(--ease), border-color .2s; } .qc__opt:hover { transform: translateX(-3px); border-color: var(--clay); } .qc__opt svg { width: 22px; height: 22px; flex: none; } .qc__opt b { display: block; font-family: var(--f-head); font-size: var(--t-sm); line-height: 1.25; } .qc__opt > span > span { display: block; font-size: .78rem; color: var(--muted); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qc__opt--wa svg { color: #25D366; } .qc__opt--tel svg { color: var(--green-deep); } .qc__opt--req svg { color: var(--red); } @media (max-width: 620px) { .qc { inset-inline-start: .8rem; inset-block-end: calc(.8rem + env(safe-area-inset-bottom, 0px)); } .qc__fab { width: 52px; height: 52px; } } @media print { .announce, .qc { display: none !important; } }