/* ===== الهيدر المشترك ديال الموقع ===== كيتزاد ف أي صفحة بـ . الألوان كلها من assets/theme.css، إذن الوضع الفاتح كيخدم بوحدو. */ /* ===== البار واقفة بحق: fixed ماشي sticky ===== sticky كيتكسر بسهولة — يكفي شي جد عندو overflow ولا transform (حركة الدخول ديال الصفحة مثلا) باش يرجع البار كتمشي مع السكرول. fixed ماعندوش هاد المشكل، بشرط أن البار تكون ولد مباشر ديال — وهادشي كيديرو site-header.js. --site-header-h: الـJS كيقيسو بالضبط ملي يرسم البار، ولكن القيمة هنا خاصها تكون قريبة من الحقيقة *قبل* ما يوصل الـJS. إلا كانت بعيدة (72 والحقيقة 92)، المحتوى كينقز لتحت ملي يوصل الرقم الصحيح. الأرقام مقيسة، ماشي مخمّنة. */ :root { --site-header-h: 92px; } @media (max-width: 1000px) { :root { --site-header-h: 122px; } } @media (max-width: 1000px) and (pointer: coarse) { :root { --site-header-h: 134px; } } .site-header { position: fixed; top: 0; inset-inline: 0; z-index: 60; padding: 12px var(--gutter); background: color-mix(in srgb, var(--ink) 86%, transparent); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); } /* البار خارجة من التدفق — خاص المحتوى ما يدخلش تحتيها. هاد الملف كيتحمّل غير ف الصفحات اللي فيهم البار، إذن ماخاصناش نستناو شي class من الـJS. بلا هادشي، الصفحة كتبان أول 200ms بلا بار وبلا فراغ، ومن بعد كلشي كينقز 92px لتحت — وهادا هو "الرعشة" اللي كتبان ف كل برْكة. */ body { padding-top: var(--site-header-h); } /* رابط داخلي (#…) ماخاصوش يوقف تحت البار */ :target { scroll-margin-top: calc(var(--site-header-h) + 12px); } /* ===== الانتقال بين الأقسام: البار ما كتغيبش ===== Lesen ← Hören هوما جوج صفحات مختلفين، إذن المتصفح كيهدم الصفحة القديمة والبار معاها وكيعاود يبنيها. مهما دار الـCSS، البار كتغمض فداك الوقت. View Transitions ديال المتصفح كتحل هادشي: كياخد صورة ديال البار قبل ما يمشي، وكيربطها بالبار ديال الصفحة الجديدة (بنفس view-transition-name). النتيجة: البار كتبقى واقفة فبلاصتها والمحتوى برك هو اللي كيتبدل. Chrome/Edge 126+ و Safari 18+ كيدعموها. Firefox ما زال — تما كلشي كيبقى خدام بحال قبل، غير بلا هاد النعومة. */ @view-transition { navigation: auto; } .site-header { view-transition-name: de-bar; } .site-level-wrap { view-transition-name: de-level; } /* المحتوى (root) كيخرج لفوق وكيدخل من تحت. البار عندها اسم ديالها، إذن ماشي جزء من root — ما كتشاركش فهاد الحركة وكتبقى واقفة فبلاصتها. المؤشر الأحمر كيزلق بوحدو من Lesen ل Hören حيت المتصفح كيربط الجوج بنفس الاسم. */ ::view-transition-old(root) { animation: de-vt-out .18s cubic-bezier(.4, 0, 1, 1) both; } ::view-transition-new(root) { animation: de-vt-in .26s cubic-bezier(.22, .8, .3, 1) both; } @keyframes de-vt-out { to { opacity: 0; transform: translateY(-7px); } } @keyframes de-vt-in { from { opacity: 0; transform: translateY(9px); } } /* البار: بدل ما تغمض وتشعل، كتدوز بنعومة قصيرة */ ::view-transition-old(de-bar), ::view-transition-new(de-bar) { animation-duration: .2s; } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } .site-header-inner { /* الصفحة الرئيسية RTL والباقي LTR. بلا هادشي الهيدر كينقلب فوحدة وكيبقى فالأخرى — كنثبتوه باش يكون نفسو فكل بلاصة. النصوص العربية داخلو كتبقى كتتقرا مزيان. */ direction: ltr; max-width: var(--shell); margin: 0 auto; display: flex; align-items: center; gap: 14px; padding: 8px 14px; border-radius: 18px; border: 1px solid var(--line-gold); background: var(--surface); box-shadow: var(--shadow); } /* ---- العلامة ---- */ .site-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); flex: 0 0 auto; } .site-brand img { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; } .site-brand-text { display: flex; flex-direction: column; line-height: 1.15; } .site-brand-name { font-weight: 900; font-size: 16px; } .site-brand-name span { color: var(--gold); } .site-brand-sub { font-size: 10px; font-weight: 700; letter-spacing: .6px; color: var(--muted); text-transform: uppercase; } /* ---- التنقل ---- */ .site-nav { display: flex; gap: 2px; margin: 0 auto; padding: 4px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); overflow-x: auto; scrollbar-width: none; } .site-nav::-webkit-scrollbar { display: none; } .site-nav a { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 18px; border-radius: 999px; text-decoration: none; color: var(--muted); font-weight: 700; font-size: 14px; white-space: nowrap; transition: color .15s ease, background .15s ease; } .site-nav a:hover { color: var(--text); background: color-mix(in srgb, var(--gold) 10%, transparent); } .site-nav a.active { background: linear-gradient(135deg, var(--gold), var(--gold-dark)); color: var(--ink); } /* ---- الأزرار على اليمين ---- */ .site-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .site-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 0 16px; border-radius: 11px; border: 1px solid var(--line); background: transparent; color: var(--text); font: inherit; font-weight: 700; font-size: 13px; text-decoration: none; cursor: pointer; white-space: nowrap; } .site-btn:hover { border-color: var(--gold); color: var(--gold); } .site-btn-primary { background: linear-gradient(135deg, var(--gold), var(--gold-dark)); border-color: transparent; color: var(--ink); } .site-btn-primary:hover { color: var(--ink); filter: brightness(1.06); } .site-btn-icon { width: 40px; padding: 0; } .site-user { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 12px 0 6px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; color: var(--text); font-weight: 700; font-size: 13px; } .site-user:hover { border-color: var(--gold); } .site-avatar { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--gold), var(--gold-dark)); color: var(--ink); font-weight: 900; font-size: 13px; } .site-premium { padding: 3px 8px; border-radius: 999px; font-size: 10px; font-weight: 900; letter-spacing: .4px; background: color-mix(in srgb, var(--gold) 20%, transparent); color: var(--gold); border: 1px solid var(--line-gold); } [hidden] { display: none !important; } /* ---- التيليفون ---- */ @media (max-width: 1000px) { .site-header-inner { flex-wrap: wrap; } .site-nav { order: 3; width: 100%; margin: 4px 0 0; justify-content: flex-start; } .site-actions { margin-inline-start: auto; } } /* من 1000px لتحت البار كتولي سطرين. كانت هاد القواعد كتبدا غير من 560px — النتيجة: بين 561 و1000 (tablet، تيليفون مقلوب) البار كانت 152px واقفين فوق الشاشة. */ @media (max-width: 1000px) { .site-header { padding: 8px 10px; } .site-brand-sub { display: none; } .site-brand img { width: 34px; height: 34px; } .site-nav a { padding: 0 13px; font-size: 13px; min-height: 38px; } .site-btn { padding: 0 12px; font-size: 12.5px; } .site-btn-label-long { display: none; } } /* ===== ما يخرجش على عرض الشاشة ===== */ .site-header, .site-header-inner { max-width: 100%; box-sizing: border-box; } .site-header-inner { flex-wrap: wrap; min-width: 0; } .site-brand { min-width: 0; } .site-brand-name { white-space: nowrap; } .site-nav { max-width: 100%; min-width: 0; } .site-actions { min-width: 0; flex-wrap: wrap; } /* ===== البار ف التيليفون ===== ولات fixed وكتبقى واقفة ديما، إذن كل بيكسل زائد فيها هو بيكسل ناقص من المحتوى. كنخليوها ف سطرين: (العلامة + الحساب) فوق، والتنقل تحت. */ @media (max-width: 1000px) { .site-header { padding: 6px 10px; } .site-header-inner { gap: 6px; padding: 6px 8px; } .site-brand-name { font-size: 14px; } .site-btn { min-height: 38px; padding: 0 11px; font-size: 12px; } .site-btn-icon { width: 38px; } .site-user { font-size: 12px; padding: 0 10px 0 5px; } .site-user-name { max-width: 9ch; } .site-nav { padding: 3px; } /* العلامة كتصغر قبل ما الأزرار تنزل لسطر ديالها */ .site-brand { flex: 0 1 auto; overflow: hidden; } .site-brand-name { overflow: hidden; text-overflow: ellipsis; } } /* شاشة صغيرة بزاف (320px): الاسم + الزرين ما كيدخلوش ف سطر، وكيولّيو تلات سطورة. كنخليو غير الشعار. */ @media (max-width: 380px) { .site-brand-text { display: none; } .site-user-name { max-width: 7ch; } } /* ===== مبدّل المستوى (Telc B1 / Telc B2) ===== */ /* المبدّل خرج من البار (البار ولات fixed وخاصها تبقى خفيفة). دابا هو شريط عادي تحتها وكيمشي مع السكرول. */ .site-level-wrap { direction: ltr; display: flex; justify-content: center; margin: 12px auto 0; padding: 0 var(--gutter); } .site-level { display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); } .site-level a { min-height: 38px; padding: 0 24px; border-radius: 999px; display: inline-flex; align-items: center; text-decoration: none; color: var(--muted); font-weight: 800; font-size: 13.5px; } .site-level a:hover { color: var(--text); } .site-level a.active { background: linear-gradient(135deg, var(--gold), var(--gold-dark)); color: var(--ink); } @media (max-width: 560px) { .site-level a { padding: 0 18px; font-size: 13px; } } /* ===== حجم اللمس ===== على الشاشات ديال اللمس (تيليفون/تابليت)، كل زر فالهيدر خاصو على الأقل 44px باش يتنقر بالصبع بلا ما تخطئ. على PC بالفأر ماكاينش هاد المشكل. */ @media (pointer: coarse) { .site-brand { min-height: 44px; } .site-nav a, .site-level a, .site-btn, .site-user { min-height: 44px; } .site-btn-icon { width: 44px; } } /* حتى ف الشاشات الصغار ماكنقصوش تحت 44 فاللمس */ @media (max-width: 560px) and (pointer: coarse) { .site-btn { min-height: 44px; padding: 0 13px; } .site-btn-icon { width: 44px; padding: 0; } .site-nav a { min-height: 44px; } } /* ===== قائمة الحساب ===== الزر ديال المستعمل كان غير رابط. ولا زر كيحل قائمة فيها تبديل الاسم وتسجيل الخروج. */ .site-account { position: relative; display: inline-flex; } .site-user { background: transparent; font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; transition: border-color .15s ease, background .15s ease; } .site-account.is-open .site-user { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, transparent); } .site-user-name { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .site-user-caret { width: 8px; height: 8px; margin-inline-start: 1px; border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor; border-radius: 1px; opacity: .55; transform: rotate(45deg) translateY(-2px); transition: transform .18s ease; } .site-account.is-open .site-user-caret { transform: rotate(225deg) translateY(-2px); } .site-menu { position: absolute; inset-block-start: calc(100% + 8px); /* الصفحة LTR والقائمة RTL — الخاصيات المنطقية كيتقلبو عليها، إذن كنستعملو right ديال بصح. */ right: 0; z-index: 60; min-width: 250px; padding: 7px; border-radius: 16px; border: 1px solid var(--line); background: var(--card, var(--bg)); box-shadow: 0 18px 44px rgba(0, 0, 0, .22); direction: rtl; text-align: start; animation: site-menu-in .16s ease; } @keyframes site-menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .site-menu { animation: none; } .site-user-caret { transition: none; } } .site-menu-head { display: flex; align-items: center; gap: 10px; padding: 9px 10px 12px; border-block-end: 1px solid var(--line); margin-block-end: 6px; } .site-avatar-lg { width: 38px; height: 38px; font-size: 16px; flex: 0 0 auto; } .site-menu-who { display: grid; gap: 2px; min-width: 0; } .site-menu-who strong { font-size: 13.5px; } .site-menu-who span { font-size: 11.5px; opacity: .65; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: start; } .site-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 10px; border: 0; border-radius: 11px; background: transparent; color: var(--text); font: inherit; font-weight: 700; font-size: 13px; text-align: start; text-decoration: none; cursor: pointer; } .site-menu-item:hover, .site-menu-item.is-open { background: color-mix(in srgb, var(--gold) 12%, transparent); } .site-menu-item:disabled { opacity: .55; cursor: default; } .site-menu-icon { width: 17px; height: 17px; flex: 0 0 auto; opacity: .8; } .site-menu-up { color: var(--gold); } .site-menu-out { color: #e05252; } .site-menu-out:hover { background: color-mix(in srgb, #e05252 12%, transparent); } .site-menu-form { display: grid; grid-template-columns: 1fr auto; gap: 6px; padding: 4px 10px 8px; } .site-menu-input { min-height: 38px; padding: 0 11px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--text); font: inherit; font-size: 13px; min-width: 0; } .site-menu-input:focus { outline: 2px solid var(--gold); outline-offset: 1px; } .site-menu-save { min-height: 38px; padding: 0 14px; border: 0; border-radius: 10px; background: linear-gradient(135deg, var(--gold), var(--gold-dark)); color: var(--ink); font: inherit; font-weight: 800; font-size: 12.5px; cursor: pointer; } .site-menu-save:disabled { opacity: .6; cursor: default; } .site-menu-note { grid-column: 1 / -1; margin: 2px 0 0; font-size: 11.5px; opacity: .8; } .site-menu-note.is-bad { color: #e05252; opacity: 1; } @media (max-width: 560px) { .site-menu { min-width: 0; width: min(280px, calc(100vw - 28px)); } .site-user-name { max-width: 9ch; } .site-menu-item { min-height: 44px; } } /* ===== الانتقال بين الأقسام (Lesen ↔ Hören ↔ …) ===== اللي خاصو يوقع: البار ديال فوق ما يتحركش ولا يغمض — غير المحتوى اللي تحتيه هو اللي يتبدل، والمؤشر الحمر يزلق للتبويب الجديد. جربنا Cross-document View Transitions (اللي المفروض المتصفح يديرها بوحدو): الصفحة القديمة كتبدا الانتقال ديما، ولكن الجديدة كتلغيه ف 3 مرات من 4 حيت الصفحات ديالنا تقيلة وكتاخد وقت باش تترسم. يعني شي مرة كتبان الحركة وشي مرة لا — وهادشي خايب من والو. إذن كنديروها احنا: نفس الحركة عند كلشي. والصفحة الجاية كتوجد قبل (prerender ف site-header.js) باش ملي نمشيو ليها تكون ديجا مرسومة — والبار ما يغمضش. */ /* ---- المؤشر ديال التبويب ---- */ .site-nav { position: relative; } .site-nav a { position: relative; z-index: 1; } /* ملي كاين المؤشر، خلفية الرابط النشيط كتمشي ليه */ .site-nav.has-pill a.active { background: transparent; } .site-nav-pill { position: absolute; z-index: 0; inset-block-start: 0; inset-inline-start: 0; border-radius: 999px; background: linear-gradient(135deg, var(--gold), var(--gold-dark)); box-shadow: 0 4px 14px color-mix(in srgb, var(--gold) 32%, transparent); pointer-events: none; transition: transform .3s cubic-bezier(.34, 1.2, .5, 1), width .3s cubic-bezier(.34, 1.2, .5, 1); } /* أول رسمة ما تزلقش — كتوقف مباشرة تحت النشيط */ .site-nav-pill.is-first { transition: none; } /* ---- المحتوى: كيخرج وكيدخل ---- الهيدر ماشي داخل فهاد الحركة — كيبقى واقف. الدخول مكتوب فالـCSS نيت باش يبدا مع أول رسمة. */ body > *:not(#site-header):not(.site-header):not(script):not(style) { animation: de-page-in .34s cubic-bezier(.22, .8, .3, 1) backwards; } html.de-leaving body > *:not(#site-header):not(.site-header):not(script):not(style) { animation: de-page-out .26s cubic-bezier(.4, 0, 1, 1) both; } /* المتصفح كيدعم View Transitions؟ إذن هو اللي كيدير الحركة، وهادي كتوقف — وإلا المحتوى كيغمض مرتين. site-header.js كيزيد .de-vt دغيا (سكريبت عادي فوق الصفحة)، قبل ما يتلوّن المحتوى ديال تحت. */ html.de-vt body > *:not(#site-header):not(.site-header):not(script):not(style), html.de-vt.de-leaving body > *:not(#site-header):not(.site-header):not(script):not(style) { animation: none; } @keyframes de-page-in { from { opacity: 0; transform: translateY(9px); } } @keyframes de-page-out { to { opacity: 0; transform: translateY(-7px); } } @media (prefers-reduced-motion: reduce) { .site-nav-pill { transition: none; } body > *:not(#site-header):not(.site-header):not(script):not(style), html.de-leaving body > *:not(#site-header):not(.site-header):not(script):not(style) { animation: none; } }