/* ============================================ نُزه - 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; } /* --- خلفية زخرفية --- */ /* تملأ الشاشة لا الحاوية: كانت بعرض الحاوية فيظهر طرفاها كمستطيل أفتح داخل صفحة أغمق، وهو الأثر الباقي من «الحدّ» بعد توحيد الخلفية — أخفّ من الأول ومن جنسه. */ .app-container::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse at top right, rgba(201, 168, 76, 0.06) 0%, transparent 50%), radial-gradient(ellipse at bottom left, rgba(201, 168, 76, 0.04) 0%, transparent 50%); pointer-events: none; z-index: 0; } /* --- 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); } /* --- زخرفة الزوايا --- */ .corner-decor { position: fixed; width: 100px; height: 100px; opacity: 0.15; pointer-events: none; z-index: 0; } /* عند زاوية الشاشة لا عند حافّة الحاوية: كانت تُثبَّت على الحدّ بالضبط فترسمه بنفسها بعد أن أُزيل من الخلفية. */ .corner-decor--top-right { top: 0; right: 0; } .corner-decor--top-left { top: 0; left: 0; transform: scaleX(-1); } .corner-decor svg { width: 100%; height: 100%; fill: var(--color-gold); } /* --- التذييل --- */ /* يظهر في آخر كل صفحة فوق الشريط السفلي، فيحتاج فسحة أسفله لئلا يختفي آخر سطر تحت الشريط الثابت. */ /* التذييل يُفصَل بلونه لا بحدّه وحده: خلفيةٌ أغمق درجةً تقول «انتهت الصفحة» قبل أن يُقرأ فيها حرف. والخطّ فوقه يمتدّ على عرض الشاشة كلّه لا على عرض الحاوية: حدٌّ ينتهي عند حافة المحتوى يُقرأ حدَّ بطاقةٍ لا فاصلَ صفحة. ولذلك يُمدّ بـ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); } .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 { font-size: 11px; color: var(--color-text-muted); } .cr-badge__meta .ltr-value { font-weight: 700; } .cr-badge__meta a { color: var(--color-text-muted); text-decoration: underline; } .cr-badge__meta a:hover { color: var(--color-gold); } @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; }