/* ‏G2 · ورقةُ الموقع التسويقيّ — **منفصلةٌ عن التطبيق عمدًا**. * * التطبيقُ يحمل نظامَ رموزٍ كاملًا (`src/styles/`) يحرسه `tests/css-tokens.mjs` * ويقيس تباينَه `tests/css-contrast.mjs`. وربطُ صفحةِ هبوطٍ به يعني أن كلَّ * تغييرٍ تسويقيٍّ يمرّ على حارسَي التطبيق — وأن كلَّ تغييرٍ في التطبيق يُخاطِر * بالموقع. فهما طبقتان لهما جمهوران، وتُفصلان. * * والألوانُ هنا قليلةٌ وصريحة: لا رموزَ دلاليّة لصفحةٍ ساكنة. والتباينُ * مقيسٌ يدويًّا عند AA على الأقلّ للنصّ العاديّ. */ :root { --ink: #12181f; --ink-soft: #4a5462; --line: #dfe4ea; --bg: #ffffff; --bg-soft: #f6f8fa; --accent: #176b52; /* أخضرُ تشييدنا — تباينُه على الأبيض 5.86:1 (brand-tokens.json) */ --accent-soft: #e7f2ef; --warn: #8a5a00; --max: 68rem; } /* ‏D6 · **لا وضعَ داكنًا افتراضيًّا هنا أيضًا** — قرارُ صاحب المنتج. * * وصفحةٌ ساكنةٌ بلا زرِّ سِمةٍ ولا تخزين: فالاتّباعُ هو الافتراضُ الوحيد * الممكن، ونزعُه يعني لوحةً واحدةً فاتحة. والكتلةُ تبقى مكتوبةً ومعطّلةً * بمُحدِّدٍ لا يُطابق شيئًا — لأن حذفَها يفقد لوحةً محسوبةَ التباين، ومن أراد * إعادتها غدًا يرفع سطرًا واحدًا لا يُعيد اختيارَ عشرةِ ألوان. * * ولماذا `:root[data-theme="dark"]` بالذات وليس `:root.never`: هو نفسُ * المُحدِّد المستعمَل في `styles.css` للغرض نفسِه، فمن قرأ أحدَهما عرف الآخر. * ولو أُضيف زرُّ سِمةٍ للموقع يومًا، يعمل بلا تعديلِ هذه الكتلة. */ @media (prefers-color-scheme: dark) { :root[data-theme="dark"] { --ink: #eef2f6; --ink-soft: #a9b4c0; --line: #2a323c; --bg: #10151a; --bg-soft: #171e25; --accent: #5fd3b6; --accent-soft: #16302a; --warn: #e0b050; } } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.7 system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif; } /* الشجرةُ العربية `dir="rtl"` على ``؛ ولا شيء هنا يفترض جهةً بعينها: * `margin-inline` و`padding-inline` و`border-inline-start` لا `left/right`. */ .wrap { max-width: var(--max); margin-inline: auto; padding: 0 1.25rem; } header.top { border-bottom: 1px solid var(--line); background: var(--bg); position: sticky; top: 0; z-index: 5; } header.top .wrap { display: flex; align-items: center; gap: 1rem; min-height: 4rem; flex-wrap: wrap; } .brand { display: inline-flex; align-items: center; text-decoration: none; } .brand img { display: block; height: 40px; width: auto; } nav.top-nav { margin-inline-start: auto; display: flex; gap: 1.1rem; flex-wrap: wrap; } nav.top-nav a { color: var(--ink-soft); text-decoration: none; } nav.top-nav a:hover, nav.top-nav a:focus-visible { color: var(--accent); text-decoration: underline; } .hero { padding: 3.5rem 0 2.5rem; } .hero h1 { font-size: clamp(1.8rem, 4vw, 2.7rem); line-height: 1.25; margin: 0 0 1rem; } .hero p.lede { font-size: 1.15rem; color: var(--ink-soft); max-width: 46rem; margin: 0 0 1.5rem; } .cta { display: inline-block; background: var(--accent); color: #fff; padding: 0.7rem 1.4rem; border-radius: 0.4rem; text-decoration: none; font-weight: 600; } .cta.ghost { background: transparent; color: var(--accent); border: 1px solid var(--accent); } /* ‏D6: تُعطَّل مع اللوحة. كان `--accent` ينقلب إلى أخضرَ فاتحٍ تحت الوضع * الداكن فيلزمُه نصٌّ غامق؛ وقد توقّف الانقلابُ، فبقاءُ هذا السطر يُعطي * **نصًّا غامقًا على أخضرَ غامق** — أي زرَّ إجراءٍ لا يُقرأ على كلّ هاتفٍ * مضبوطٍ على الداكن. وهذا صنفُ العطب الذي لا يُسقِط فحصًا ويراه الزائرُ وحدَه. */ @media (prefers-color-scheme: dark) { :root[data-theme="dark"] .cta { color: #08221c; } } section { padding: 2.5rem 0; border-top: 1px solid var(--line); } section h2 { font-size: 1.5rem; margin: 0 0 0.5rem; } section > .wrap > p { color: var(--ink-soft); max-width: 46rem; } .grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin-top: 1.5rem; } .card { border: 1px solid var(--line); border-radius: 0.6rem; padding: 1.1rem 1.2rem; background: var(--bg-soft); } .card h3 { margin: 0 0 0.4rem; font-size: 1.05rem; } .card p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; } /* ‏D5 · لقطاتُ المنتج ------------------------------------------------------- * * إطارٌ واحدٌ خفيفٌ وظلٌّ واحد: اللقطةُ نفسُها مزدحمةٌ بالمعلومات، وكلُّ زخرفةٍ * حولها تنافسُها. والعرضُ كاملٌ لأن الشاشةَ ماليّةٌ وأرقامُها تُقرأ — ولقطةٌ * بحجم إبهامٍ تُعرَض «إثباتًا» وهي لا تُقرأ ليست إثباتًا. * * و`width`/`height` على الوسم بأبعاد الملفّ الحقيقيّة (‏1940×1680): يُحجَز * مكانُ الصورة قبل وصولها فلا تتزحزح الصفحةُ تحت إصبعِ القارئ (‏CLS). * * **ولا `aspect-ratio` ولا `object-fit: cover` هنا.** أوّلُ نسخةٍ أعلنت * `1280×840` — وهي أبعادٌ خُمِّنت لا قِيست — والملفُّ 1940×1680. والنسبتان * 1.524 و1.155، فكان `cover` **يقصّ ثلثَ الشاشة** ليُطابق نسبةً مخترَعة: * صورةٌ تُعرَض إثباتًا وقد حُذف منها ما لا نعرف. و`height: auto` مع أبعادٍ * صحيحةٍ يُعطي الحجزَ نفسَه بلا قصّ. */ .shots figure { margin: 2rem 0 0; } .shots img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 0.6rem; background: var(--bg-soft); } .shots figcaption { margin-top: 0.65rem; color: var(--ink-soft); font-size: 0.95rem; max-width: 46rem; } .shots figcaption strong { color: var(--ink); } .note { border-inline-start: 4px solid var(--warn); background: var(--bg-soft); padding: 0.9rem 1.1rem; border-radius: 0 0.4rem 0.4rem 0; margin: 1.5rem 0; } .note strong { color: var(--warn); } table { width: 100%; border-collapse: collapse; margin-top: 1.25rem; font-size: 0.95rem; } th, td { text-align: start; padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--line); vertical-align: top; } th { font-weight: 600; } .scroller { overflow-x: auto; } .prose h2 { margin-top: 2rem; } .prose h3 { margin-top: 1.5rem; font-size: 1.05rem; } .prose ul { padding-inline-start: 1.4rem; color: var(--ink-soft); } .prose li { margin: 0.3rem 0; } footer.bottom { border-top: 1px solid var(--line); padding: 2rem 0 3rem; color: var(--ink-soft); font-size: 0.9rem; } footer.bottom nav { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.75rem; } footer.bottom a { color: var(--ink-soft); } a:focus-visible, .cta:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }