/* ========================================================================== فواتيري — الصفحات القانونية (شروط الاستخدام + سياسة الخصوصية) لا يُعرَّف هنا أي لون أو مسافة: كل شيء من tokens.css، فالصفحتان تبقيان على هوية اللاندينق نفسها إن تغيّرت التوكنز. يُحمَّل هذا الملف على الصفحتين وحدهما — لا داعي لإثقال الرئيسية به. ========================================================================== */ /* ---------- تبديل اللغة ---------- نص الوثيقتين طويل جداً (عشرون بنداً في كل لغة)، ووضعه في i18n.js كان سيضاعف حجم القاموس ويُحمَّل على الرئيسية بلا فائدة. فاللغتان مكتوبتان معاً في الـHTML، ويُظهر المتصفح إحداهما تبعاً لـ الذي يضبطه i18n.js أصلاً. الفائدة الجانبية: بلا جافاسكربت تبقى العربية ظاهرة. */ [data-lang-block] { display: none; } html[lang='ar'] [data-lang-block='ar'] { display: block; } html[lang='en'] [data-lang-block='en'] { display: block; } /* ========================================================================== 1) ترويسة الصفحة ========================================================================== */ .legal-head { padding-block-start: calc(var(--s-10) + var(--s-6)); padding-block-end: var(--s-7); background: linear-gradient(180deg, var(--gold-wash), var(--ivory)); border-block-end: 1px solid var(--gold-mist); } .legal-head__inner { inline-size: min(100% - (var(--gutter) * 2), var(--container-narrow)); margin-inline: auto; } .legal-head h1 { font-size: var(--fs-h2); line-height: var(--lh-tight); color: var(--ink); margin-block: var(--s-3) var(--s-4); } .legal-head__lead { font-size: var(--fs-lead); line-height: var(--lh-snug); color: var(--ink-3); max-inline-size: 58ch; } /* تاريخ التحديث: كبسولة صغيرة تُقرأ كبيانات لا كنص جسم */ .legal-head__updated { display: inline-flex; align-items: center; gap: var(--s-2); margin-block-start: var(--s-5); padding: var(--s-2) var(--s-4); border: 1px solid var(--gold-soft); border-radius: var(--r-pill); background: var(--surface); font-size: var(--fs-xs); color: var(--gold-deep); font-weight: 500; } .legal-head__updated::before { content: ''; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--gold); flex: none; } /* حالة حيّة (صفحة تواصل معنا): النقطة خضراء لا ذهبية، فتُقرأ كحالة لا كتاريخ */ .legal-head__updated--live { color: var(--live-deep); border-color: var(--live); } .legal-head__updated--live::before { background: var(--live); } /* ---------- فتات الخبز ---------- */ .legal-crumb { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-xs); color: var(--ink-4); } .legal-crumb a { color: var(--ink-3); transition: color var(--t-fast) var(--ease); } .legal-crumb a:hover { color: var(--gold-deep); } /* الفاصل مائل مع اتجاه الكتابة: يشير للأمام في الحالتين */ .legal-crumb__sep { color: var(--gold-soft); } html[dir='rtl'] .legal-crumb__sep { transform: scaleX(-1); } /* ========================================================================== 2) جسم الوثيقة ========================================================================== */ .legal-body { padding-block: var(--s-8); } .legal-body__inner { inline-size: min(100% - (var(--gutter) * 2), var(--container-narrow)); margin-inline: auto; } /* ---------- فهرس المحتويات ---------- */ .legal-toc { margin-block-end: var(--s-8); padding: var(--s-5) var(--s-6); background: var(--ivory-2); border: 1px solid var(--gold-mist); border-radius: var(--r-lg); } .legal-toc__title { font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--gold-deep); margin-block-end: var(--s-4); } .legal-toc ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--s-2) var(--s-5); counter-reset: toc; } .legal-toc li { counter-increment: toc; } .legal-toc a { display: flex; gap: var(--s-3); font-size: var(--fs-sm); line-height: var(--lh-snug); color: var(--ink-2); padding-block: var(--s-1); transition: color var(--t-fast) var(--ease); } /* الرقم من العدّاد لا من النص: يبقى مرتّباً لو أُعيد ترتيب البنود */ .legal-toc a::before { content: counter(toc) '.'; color: var(--gold); font-weight: 700; font-variant-numeric: tabular-nums; flex: none; } .legal-toc a:hover { color: var(--gold-deep); } /* ---------- المقدمة ---------- */ .legal-intro { font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--ink-2); padding-inline-start: var(--s-5); border-inline-start: 3px solid var(--gold-soft); margin-block-end: var(--s-8); } .legal-intro p + p { margin-block-start: var(--s-4); } /* ---------- البنود ---------- */ .legal-section + .legal-section { margin-block-start: var(--s-8); } .legal-section h2 { display: flex; align-items: baseline; gap: var(--s-3); font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--ink); margin-block-end: var(--s-4); padding-block-end: var(--s-3); border-block-end: 1px solid var(--gold-mist); scroll-margin-block-start: var(--s-9); /* الهيدر ثابت — لا يبتلع العنوان عند القفز إليه */ } /* رقم البند: يكتبه الـHTML صراحةً ليطابق ترقيم الوثيقة الرسمية */ .legal-section__num { flex: none; font-size: var(--fs-sm); font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; } .legal-section h3 { font-size: var(--fs-body); font-weight: 700; color: var(--ink); margin-block: var(--s-5) var(--s-3); } .legal-section p { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); } .legal-section p + p { margin-block-start: var(--s-4); } /* ---------- القوائم ---------- */ .legal-section ul, .legal-section ol { margin-block: var(--s-4); padding-inline-start: var(--s-5); display: grid; gap: var(--s-3); } .legal-section li { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); } .legal-section ul { list-style: none; padding-inline-start: 0; } /* نقطة ذهبية بدل النقطة الافتراضية — نفس لغة البصر في اللاندينق */ .legal-section ul > li { position: relative; padding-inline-start: var(--s-5); } .legal-section ul > li::before { content: ''; position: absolute; inset-inline-start: 0; inset-block-start: calc(var(--lh-body) * 0.5em - 3px); inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--gold-soft); } .legal-section ol { list-style: decimal; } .legal-section ol > li::marker { color: var(--gold); font-weight: 700; } /* ---------- تنبيه داخل بند ---------- */ .legal-note { margin-block: var(--s-5); padding: var(--s-4) var(--s-5); background: var(--gold-wash); border-radius: var(--r-md); border-inline-start: 3px solid var(--gold); } .legal-note p { color: var(--ink-2); } /* ---------- البريد ---------- */ .legal-mail { display: inline-block; margin-block-start: var(--s-3); font-size: var(--fs-lead); font-weight: 700; color: var(--gold-deep); word-break: break-word; transition: color var(--t-fast) var(--ease); } .legal-mail:hover { color: var(--gold-dark); } /* ========================================================================== 3) ذيل الوثيقة — الانتقال إلى الوثيقة الأخرى ========================================================================== */ .legal-pair { margin-block-start: var(--s-9); padding-block-start: var(--s-7); border-block-start: 1px solid var(--gold-mist); } .legal-pair__note { font-size: var(--fs-sm); color: var(--ink-3); line-height: var(--lh-body); margin-block-end: var(--s-5); } .legal-pair__links { display: flex; flex-wrap: wrap; gap: var(--s-3); } /* ========================================================================== 4) خاتمة صفحة «من نحن» — لأن وقتك لعملك نصّها قصير فهو في القاموس لا في كتلتَي اللغة، ولذلك يقع خارجهما. ========================================================================== */ .about-close { margin-block-start: var(--s-9); padding: var(--s-7) var(--s-6); background: var(--gold-wash); border: 1px solid var(--gold-mist); border-radius: var(--r-lg); text-align: center; } .about-close__eyebrow { font-size: var(--fs-h3); font-weight: 700; color: var(--gold-deep); line-height: var(--lh-snug); margin-block-end: var(--s-4); } .about-close__lead { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); max-inline-size: 62ch; margin-inline: auto; } .about-close__sign { margin-block: var(--s-5) var(--s-6); font-size: var(--fs-lead); font-weight: 700; color: var(--ink); } .about-close__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); } /* ========================================================================== 5) صفحة «تواصل معنا» ========================================================================== */ .contact-block + .contact-block { margin-block-start: var(--s-8); } .contact-block__title { font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--ink); margin-block-end: var(--s-4); padding-block-end: var(--s-3); border-block-end: 1px solid var(--gold-mist); scroll-margin-block-start: var(--s-9); } .contact-block__lead { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); max-inline-size: 62ch; } .contact-block__links { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block-start: var(--s-5); } /* ---------- شبكة القنوات ---------- */ .contact-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--s-4); } /* البطاقة ترث أيقونة القناة وعناوينها من sections.css (.channel__*) فلا تُكرَّر هنا — هذا الملف لا يضيف إلا هيئة البطاقة نفسها */ .contact-card { display: flex; align-items: flex-start; gap: var(--s-4); inline-size: 100%; block-size: 100%; padding: var(--s-5); text-align: start; font: inherit; color: inherit; background: var(--surface); border: 1px solid var(--gold-mist); border-radius: var(--r-lg); box-shadow: var(--sh-xs); transition: box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease); } .contact-card:hover { border-color: var(--gold-soft); box-shadow: var(--sh-md); transform: translateY(-3px); } .contact-card__body { display: grid; gap: var(--s-1); } .contact-card__value { display: block; margin-block-start: var(--s-2); font-size: var(--fs-sm); font-weight: 700; color: var(--gold-deep); word-break: break-word; } /* ---------- قائمة «ما الذي يسرّع الرد» ---------- */ .contact-list { list-style: none; margin-block: var(--s-4); padding-inline-start: 0; display: grid; gap: var(--s-3); } .contact-list > li { position: relative; padding-inline-start: var(--s-5); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); } .contact-list > li::before { content: ''; position: absolute; inset-inline-start: 0; inset-block-start: calc(var(--lh-body) * 0.5em - 3px); inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--gold-soft); } /* ---------- صفّ السوشيال ---------- */ .contact-social { margin-block-start: var(--s-5); } /* ---------- نداء الختام ---------- */ .contact-cta { margin-block-start: var(--s-9); padding: var(--s-6); background: var(--gold-wash); border: 1px solid var(--gold-mist); border-radius: var(--r-lg); } .contact-cta__title { font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--ink); margin-block-end: var(--s-3); } .contact-cta__lead { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); margin-block-end: var(--s-5); max-inline-size: 60ch; } .contact-cta__links { display: flex; flex-wrap: wrap; gap: var(--s-3); } /* ========================================================================== 6) الشاشات الصغيرة ========================================================================== */ @media (max-width: 599px) { .legal-head { padding-block-start: calc(var(--s-9) + var(--s-4)); } .legal-toc { padding: var(--s-4) var(--s-5); } .legal-toc ol { grid-template-columns: 1fr; } .legal-pair__links .btn { inline-size: 100%; } .about-close { padding: var(--s-6) var(--s-5); } .about-close__links .btn { inline-size: 100%; } .contact-card { padding: var(--s-4); } .contact-cta { padding: var(--s-5); } .contact-cta__links .btn, .contact-block__links .btn { inline-size: 100%; } } /* ========================================================================== 7) الطباعة — الوثائق القانونية تُطبع وتُرفَق كثيراً ========================================================================== */ @media print { .header, .menu-panel, .footer, .legal-toc, .legal-crumb, .legal-pair, .sticky-cta, #crisp-chatbox { display: none !important; } .legal-head { padding-block: 0 var(--s-5); background: none; } .legal-body { padding-block: var(--s-5) 0; } .legal-section h2 { break-after: avoid; } .legal-section li, .legal-section p { break-inside: avoid; } }