/* ============================================ نُزه - Nuzha App التخطيط والهيكل العام layout.css ============================================ */ /* --- App Container (Phone Frame) --- */ .app-container { width: 100%; max-width: var(--app-max-width); min-height: 100vh; /* التدرّج على وحده: تكراره هنا يعني تدرّجين متجاورين يبدأ كلّ منهما من أعلاه، فيلتقيان بحافّة ظاهرة عند حدّ الحاوية. */ background: transparent; position: relative; overflow-x: hidden; overflow-y: auto; padding-bottom: calc(var(--navbar-height) + 20px); } /* رابط وصول سريع لمستخدمي لوحة المفاتيح وقارئات الشاشة */ .skip-link { position: fixed; inset-inline-start: var(--spacing-lg); inset-block-start: var(--spacing-lg); z-index: 1000; padding: var(--spacing-sm) var(--spacing-lg); color: var(--color-bg-darker); background: var(--color-gold-light); border-radius: var(--border-radius-sm); transform: translateY(-200%); transition: transform 0.2s ease; } .skip-link:focus-visible { transform: translateY(0); outline: 3px solid var(--color-text-primary); outline-offset: 3px; } /* --- الخلفية الزخرفية: أُزيلت --- ‼ كانت طبقةً مثبَّتة تملأ الشاشة، فيها هالتان ذهبيتان: واحدة عند الركن الأعلى والأخرى عند المقابل. والقصد أن تكسر استواء الخلفية. وأثرها الفعلي على خضرة الموقع الداكنة مسحةٌ صفراء وسخة عند الأطراف العليا، لا لمعةٌ خفيفة. قِيست بالبكسل لا بالنيّة: الركن الأعلى يميل إلى الذهبي بمقدار ‎13.2‎ فوق وسط الشاشة، والذي يقابله بمقدار ‎6.8‎. وهي زخرفةٌ لا تحمل معنىً ولا تدلّ على شيء، فحذفُها لا يُفقد الصفحة إلا وسخاً. ولها في تاريخ المستودع موضعٌ إن أُريدت يوماً. */ /* --- Header Top Bar --- */ .header-bar { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-xl) var(--spacing-lg); position: relative; z-index: 10; height: var(--header-height); } .header-bar__login, .header-bar__help { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; color: var(--color-gold); padding: 10px 20px; position: relative; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; } /* زرّا الرأس: شكلٌ واحد لهما. كان لكلٍّ منهما حدٌّ ذهبي بسمك 2px من جهةٍ واحدة، وأربع زوايا بأنصاف أقطار مختلفة (‎0 15px 5px 30px‎) معكوسة بين الزرّين، وبقعة ضوء ذهبية مموّهة في الزاوية. فخرج الزرّان شكلين مقصوصين لا يشبه أحدهما الآخر ولا يشبهان بقية أزرار الموقع، والخطّ الذهبي الغليظ يسحب العين إلى إطار الشاشة بدل ما فيها. والذهبي باقٍ حيث ينفع: في النصّ والأيقونة. */ .header-bar__login, .header-bar__help { background: var(--veil-40); /* بلا إطارٍ ذهبي أصلاً. ترقيقه إلى 1px شفّاف لم يكفِ: الخيط الذهبي حول الزرّ يبقى أوّل ما تقع عليه العين في أعلى الشاشة، فيتقدّم على الشعار وعلى ما تحته. والخلفية وحدها تكفي ليُعرف أنه زرّ، والذهبي يبقى في النصّ والأيقونة. */ border: none; border-radius: var(--border-radius-pill); box-shadow: none; } .header-bar__login:hover, .header-bar__help:hover { background: rgba(201, 168, 76, 0.25); color: var(--color-text-primary); } .header-bar__login:active, .header-bar__help:active { background: rgba(201, 168, 76, 0.4); color: var(--color-gold-light); } /* إخفاء صندوق اللمس والـ Outline */ .header-bar__login, .header-bar__help { outline: none; -webkit-tap-highlight-color: transparent; user-select: none; } .header-bar__logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; justify-content: center; z-index: 15; } .header-bar__logo-img { height: 85px; width: auto; object-fit: contain; filter: drop-shadow(0 0 20px rgba(201, 168, 76, 0.3)); } /* --- Page Title --- */ .page-title { text-align: center; padding: var(--spacing-sm) var(--spacing-xl) var(--spacing-lg); position: relative; z-index: 5; } .page-title h1 { font-size: var(--font-size-xxl); font-weight: 800; color: var(--color-text-primary); margin-bottom: var(--spacing-xs); } /* --- Main Content Area --- */ .main-content { position: relative; z-index: 5; padding: 0 var(--spacing-lg); } /* --- Section Heading --- */ .section-heading { text-align: center; padding: var(--spacing-xl) 0 var(--spacing-md); font-size: var(--font-size-xl); font-weight: 700; color: var(--color-text-primary); } /* --- التذييل --- */ /* يظهر في آخر كل صفحة فوق الشريط السفلي، فيحتاج فسحة أسفله لئلا يختفي آخر سطر تحت الشريط الثابت. */ /* التذييل يُفصَل بلونه لا بحدّه وحده: خلفيةٌ أغمق درجةً تقول «انتهت الصفحة» قبل أن يُقرأ فيها حرف. والخطّ فوقه يمتدّ على عرض الشاشة كلّه لا على عرض الحاوية: حدٌّ ينتهي عند حافة المحتوى يُقرأ حدَّ بطاقةٍ لا فاصلَ صفحة. ولذلك يُمدّ بـ100vw ويُزاح إلى منتصف الشاشة، ويُمنع التمرير الأفقي على body لأن 100vw تشمل عرض شريط التمرير. */ .site-footer { position: relative; margin-top: var(--spacing-xl); padding: calc(var(--spacing-xl) + 6px) var(--spacing-lg) calc(var(--navbar-height) + var(--spacing-xl)); background: var(--color-footer-bg); box-shadow: 0 0 0 100vmax var(--color-footer-bg); clip-path: inset(0 -100vmax); } .site-footer::before { content: ''; position: absolute; inset-block-start: 0; inset-inline-start: 50%; width: 100vw; height: 1px; transform: translateX(50%); background: linear-gradient(90deg, transparent 0%, var(--color-gold-border) 22%, var(--color-gold) 50%, var(--color-gold-border) 78%, transparent 100%); } .site-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--spacing-lg); max-width: 900px; margin-inline: auto; } .site-footer__title { margin: 0 0 var(--spacing-sm); font-size: 14px; font-weight: 700; color: var(--color-gold-light); } .site-footer__list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13px; } .site-footer__list--inline { flex-direction: row; flex-wrap: wrap; gap: var(--spacing-sm) var(--spacing-lg); } /* حسابات التواصل سطراً سطراً لا صفّاً واحداً. كانت ‎--inline‎ فتلتفّ المعرّفات على سطرين بلا انتظام، ولا يُعرف أيّ معرّفٍ لأيّ شعار. والعمود يجعل كل حسابٍ سطراً يُقرأ وحده، وشعاراته تصطفّ على محورٍ واحد فتُمسح بالعين مسحةً واحدة. */ .site-footer__list--social a { display: inline-flex; align-items: center; gap: var(--spacing-sm); } .site-footer__list a { color: var(--color-text-secondary); text-decoration: none; } .site-footer__list a:hover, .site-footer__list a:focus-visible { color: var(--color-gold-light); } .site-footer__muted { color: var(--color-text-muted); } /* شارة التوثيق: «موثّق من» فوق بطاقةٍ بيضاء فيها الشعار وحده. والبياض ليس زينة: الشعارات الرسمية تُصمَّم على أبيض، ووضعُها على الأخضر الداكن يجعل حوافها هالةً رمادية. */ .site-footer__trust { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: var(--spacing-lg); } .cr-badge__label { font-size: 11px; color: var(--color-text-muted); } .cr-badge { display: inline-flex; align-items: center; justify-content: center; padding: 12px 18px; border-radius: var(--border-radius-md); background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18); transition: box-shadow 0.2s ease, transform 0.2s ease; max-width: 100%; } a.cr-badge:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28); transform: translateY(-2px); } .cr-badge__img { height: 48px; width: auto; max-width: 100%; object-fit: contain; } /* الشعار عريضٌ (3:1)، فيصغر على الشاشات الضيّقة ولا يفيض */ @media (max-width: 380px) { .cr-badge { padding: 10px 14px; } .cr-badge__img { height: 38px; } } /* حُذف ‎.cr-badge__meta‎ مع الرقم ورابط «نسخة الشهادة»: قواعدٌ لا عنصر لها تُقرأ لاحقاً على أنها مستعملة فتُصان بلا سبب. */ @media (prefers-reduced-motion: reduce) { .cr-badge { transition: none; } a.cr-badge:hover { transform: none; } } .site-footer__rights { max-width: 900px; margin: var(--spacing-xl) auto 0; padding-top: var(--spacing-lg); border-top: 1px solid rgba(201, 168, 76, 0.10); font-size: 12px; color: var(--color-text-muted); text-align: center; } /* شارات التواصل في التذييل: الأيقونة تسبق القيمة وتحمل لون قناتها، فتُعرف المحادثة من البريد قبل قراءة النصّ. */ .site-footer__list--contact li a { display: inline-flex; align-items: center; gap: var(--spacing-sm); } .site-footer__badge { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; } .site-footer__badge--wa { color: #25d366; background: rgba(37, 211, 102, 0.12); } .site-footer__badge--mail { color: var(--color-gold-light); background: rgba(201, 168, 76, 0.12); } .site-footer__svg { width: 16px; height: 16px; fill: currentColor; }