/* ── الخطوط المستضافة ذاتياً (public/fonts/، راجع HEAD_FONT_LINKS أعلاه للسياق الكامل) ────── unicode-range منسوخ حرفياً من استجابة fonts.gstatic.com الرسمية لكتلتَي arabic/latin فقط — لا latin-ext/cyrillic-ext/vietnamese (بلا فائدة لتطبيق ثنائي اللغة عربي/إنجليزي حصراً)، فلا يُحمَّل من كل عائلة إلا الملفّ الذي تحتاجه اللغة الظاهرة فعلاً. */ @font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/ibm-plex-sans-arabic-300-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; } @font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/ibm-plex-sans-arabic-300-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/ibm-plex-sans-arabic-400-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; } @font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/ibm-plex-sans-arabic-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/ibm-plex-sans-arabic-500-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; } @font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/ibm-plex-sans-arabic-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/ibm-plex-sans-arabic-600-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; } @font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/ibm-plex-sans-arabic-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/ibm-plex-sans-arabic-700-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; } @font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/ibm-plex-sans-arabic-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Rakkas'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/rakkas-400-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; } @font-face { font-family: 'Rakkas'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/rakkas-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/space-grotesk-400-latin.woff2') format('woff2'); } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/space-grotesk-500-latin.woff2') format('woff2'); } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/space-grotesk-600-latin.woff2') format('woff2'); } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/space-grotesk-700-latin.woff2') format('woff2'); } /* خطّ احتياطيّ اصطناعيّ لتقليل انزياح التخطيط (CLS) وقت تبديل swap — مقاييسه محسوبة رياضياً لتطابق مقاييس IBM Plex Sans Arabic الفعلية فوق Arial (المضمون وجوده في كل النظم)، بصيغة next/font القياسية: sizeAdjust = (xAvgCharWidth_web/upm_web)÷(xAvgCharWidth_arial/upm_arial) = (632/1000)÷(904/2048) ≈ 1.432؛ ascent/descent-override = نسبة IBM Plex الفعلية ÷ sizeAdjust (fontTools على ملفّي public/fonts/ibm-plex-sans-arabic-400-*.woff2 + Windows Arial، 2026-09-07). الأثر: صندوق النصّ بالخط الاحتياطيّ يقارب حجم IBM Plex Sans Arabic النهائي منذ أوّل رسم، فينخفض الانزياح المُقاس تاريخياً (.nav-links 547←604px، .nav-brand-name 59×18←71×24) بغضّ النظر عن توقيت وصول الخط الحقيقيّ — لا تحايلاً بإخفاء التبديل بل تصغيراً فعلياً لفارق المقاس المسبِّب له. */ @font-face { font-family: 'IBM Plex Sans Arabic Fallback'; src: local('Arial'); ascent-override: 75.8%; descent-override: 29%; line-gap-override: 0%; size-adjust: 143.2%; } :root { /* ── C.1 خلفيات ───────────────────────────────────────────────────── */ /* هذه المجموعة كانت محايدات مصبوغة بأخضر خفيف (H≈145-155°) لتنسجم مع --brand الأخضر القديم. بعد إصلاح الهوية إلى الأحمر-البرتقاليّ المعتمَد أعلاه، أُزيلت الصبغة (نفس درجة الإضاءة L حرفياً لكل قيمة — فالتباين المحسوب سابقاً يبقى صحيحاً تقريباً بلا حاجة لإعادة كل حساب من الصفر) مع بقاء ميلٍ دافئ طفيف جداً (H=20° بتشبّع ≤6%) ينسجم مع العائلة الجديدة بدل محايدٍ بارد يصطدم بها. مُتحقَّق حيّاً بعد التعديل عبر wcag-contrast.mjs — راجع التعليقات الأصلية أسفل كل قيمة لسند القياس التاريخيّ الذي بقي صحيحاً. */ --ivory: #f7f6f6; --paper: #ecebea; --white: #FFFFFF; --card: var(--white); /* ── C.2 حدود ونصوص ───────────────────────────────────────────────── */ --line: #d2d1d0; --ink: #1d1b1a; --ink-2: var(--ash); /* تنبيه: #888888 كان 3.17:1 على --paper (رسوبٌ حقيقيّ التقطه verify-live-edge-cdp.mjs على task.zayenha.com الحيّ — الفحص الساكن wcag-contrast.mjs لم يلتقطه لأنه لا يحلّ خلفية العنصر الفعلية). القيمة الجديدة 6.98:1 على أضيق خلفية (--paper) و7.81:1 على --white. */ --ash: #4e4b4a; --mist: #6d6a69; --silver: #b9b8b7; /* ── C.3 ألوان العلامة — هوية التطبيق المعتمَدة في M0 (لا الافتراض العامّ teal/purple) ──── */ --teal: #0D9488; /* لا --purple: القيمة المرجعية العامّة في DESIGN_SYSTEM.md (#7C3AED) هي حرفياً اللون المحظور في DESIGN-CEILING §1 ("أشهر بصمة لواجهةٍ صنعها نموذج") — تعارضٌ بين مثالين في نفس القالب. المتغيّر لم يكن مُستخدَماً فعلياً في أي مكوّن (بحث شامل: صفر var(--purple))، فحُذف بدل استبداله بقيمة أخرى — هوية التطبيق (--brand/--brand2) لا تحتاج لوناً ثانوياً عامّاً هنا. */ /* هوية الشعار المعتمَدة في M0 (current.json → app.brand_color/brand_color_2): أحمر-برتقاليّ دافئ #d23f2c → #fcaa64 — لا الأخضر الذي كان هنا. --brand-text/--action-bg درجتان أغمق من نفس اللون خُصّصتا للنصّ والأزرار (لا اللون الخام) لأنّ #d23f2c وحده 4.68:1 على أبيض فقط — فوق حدّ AA بهامش ضيّق لا يكفي لالتزام §7 (AAA حيثما أمكن). مقيس حيّاً: --brand-text (#A62F1F) 6.89:1، --action-bg (#8C2A1C) مع نصّ أبيض 8.53:1. */ --brand: #d23f2c; --brand-2: #fcaa64; --brand-text: #A62F1F; --action-bg: #8C2A1C; --action-fg: #FFFFFF; --accent-warm: #A65F18; /* ── C.4 ألوان الحالة ──────────────────────────────────────────────── */ --green: #16A34A; --red: #DC2626; --amber: #D97706; --blue: #1D4ED8; /* --danger مصدرها --red-text لا --red الخام: كل استخدام حقيقيّ لـ--danger في الكود نصٌّ أو حدود (grep شامل: account.ts، design.ts رسائل الأخطاء، صفحات /admin/*) — لا خلفيّة مشبَّعة تحتاج نصّاً أبيض فوقها (تلك تستعمل --red مباشرة: زرّ الإملاء النشِط، toast). رسوبٌ مقاسٌ حيّاً على task.zayenha.com/account: h2 بـcolor:var(--danger) فوق --card الغامق 3.52:1 فقط (دون AA 4.5) لأنّ --red لم يكن له نظير غامق — --red-text أدناه له (السطر التالي)، فربط --danger به يُصلح كل موقع دفعة واحدة بلا لمس كلّ استدعاء على حدة. */ --danger: var(--red-text); /* نسخة نصّية أغمق من --red لاستخدامها فوق خلفيات فاتحة (--btn-danger) — --red الخام 4.11:1 على #fde8e6 دون حدّ AA (مقيس حيّاً بحارس التباين الحتميّ). #b91c1c = 6.02:1 على نفس الخلفية، و6.47:1 على --card الأبيض. */ --red-text: #b91c1c; /* نسخة نصّية أغمق من --green لاستخدامها فوق خلفيات فاتحة (بطاقة عضو نشِط، S) — --green الخام 3.30:1 على --white دون حدّ AA (مقيس حيّاً). #166534 = 7.13:1 على نفس الخلفية (AAA أيضاً). */ --green-text: #166534; --success: var(--green); /* ── C.5 Border Radius ─────────────────────────────────────────────── */ --r-card: 20px; --r-btn: 14px; --r-pill: 100px; --radius-sm: 8px; --radius-md: var(--r-btn); --radius-lg: var(--r-card); /* ── مسافات (سلّم 4/8، K.5) ────────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-8: 48px; /* ── D الخطوط — الهوية المعتمَدة في M0 ─────────────────────────────── */ /* 'IBM Plex Sans Arabic Fallback' يسبق 'Noto Sans Arabic'/Arial — خطّ @font-face اصطناعيّ (مُعرَّف أعلى هذا الملفّ) بمقاييس مطابَقة رياضياً لـIBM Plex Sans Arabic، يقلّل انزياح التخطيط وقت التبديل بصرف النظر عن أيّ خطّ نظام يُستبدَل فعلياً. */ --font-body: 'IBM Plex Sans Arabic', 'IBM Plex Sans Arabic Fallback', 'Noto Sans Arabic', Arial, sans-serif; --font-hero: 'Rakkas', 'IBM Plex Sans Arabic', Tahoma, Arial, sans-serif; /* للحظات hero/الواجهة الأولى فقط — لا نصّ جسم */ --font-num: 'Space Grotesk', 'IBM Plex Sans Arabic', sans-serif; /* .num فقط — محتوى رقميّ مؤكَّد لا عربيّ مختلط */ color-scheme: light; } /* ── J.6.1 الثيم الغامق ──────────────────────────────────────────────── */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ivory: #0e0d0c; --paper: #161515; --white: #1d1c1c; --card: var(--white); --line: #383635; --ink: #f4f4f4; --ash: #bcbbba; --mist: #9d9b9a; --silver: #5e5c5b; /* نفس هوية الشعار (#d23f2c → #fcaa64) بدرجات مناسبة لخلفية داكنة: --brand أفتح للأيقونات والحدود (7.19:1 على الأسود تقريباً)، --brand-text يعيد استخدام #fcaa64 المعتمَد مباشرة (10.45:1) لأنه فاتح كفاية أصلاً، و--action-bg/--action-fg زوجٌ فاتح/غامق معكوس (9.44:1). */ --brand: #f2794f; --brand-2: #fcaa64; --brand-text: #fcaa64; --action-bg: #fcaa64; --action-fg: #26120A; /* --green-text الفاتح (root) غير مقروء على --white الغامق (#1E1E1E) — 2.34:1. #22c55e = 7.32:1. */ --green-text: #22c55e; /* --red-text الفاتح (root، #b91c1c) غير مقروء على --card الغامق — 3.52:1 (رسوبٌ مقاسٌ حيّاً على /account، دون AA 4.5). #f87171 = 6.15:1 على نفس الخلفية؛ --danger يتبعها تلقائياً (مُعرَّف أعلاه كـvar(--red-text) — لا تُعرَّف --danger هنا مباشرة، احترام نفس البنية). */ --red-text: #f87171; color-scheme: dark; } } :root[data-theme="dark"] { --ivory: #0e0d0c; --paper: #161515; --white: #1d1c1c; --card: var(--white); --line: #383635; --ink: #f4f4f4; --ash: #bcbbba; --mist: #9d9b9a; --silver: #5e5c5b; /* كان هذا القسم لا يزال يحمل اللوحة الخضراء القديمة رغم إصلاح القسمين الآخرين (الفاتح والغامق بحسب تفضيل النظام) — هذا الفرع تحديداً يتحكّم بالتبديل اليدويّ الصريح (زر الثيم)، فكان أي مستخدم يبدّل الثيم يدوياً يرى الأخضر القديم رغم كل الإصلاحات السابقة. نفس قيم السطر 119-120 حرفياً (المصدر الوحيد لهذه الدرجات، لا تُشتقّ ثانيةً). */ --brand: #f2794f; --brand-2: #fcaa64; --brand-text: #fcaa64; --action-bg: #fcaa64; --action-fg: #26120A; --green-text: #22c55e; --red-text: #f87171; /* نفس قيمة السطر 244 حرفياً — القسمان يجب أن يتطابقا (نفس الدرس أعلاه) */ color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--paper); color: var(--ink); font-family: var(--font-body); min-height: 100dvh; -webkit-font-smoothing: antialiased; letter-spacing: 0; /* D.3.1 — ممنوع letter-spacing موجب على العربية */ } button, input, textarea, select { font-family: inherit; } /* درسٌ مُثبَت هذه الجلسة — عناصر النموذج لا ترث خط الصفحة افتراضياً */ textarea, input[type="text"], input[type="search"], input[type="email"] { unicode-bidi: plaintext; } /* H.2.2 */ .zh-dictation-wrap { display:grid; width:100%; min-width:0; flex:1 1 auto; } .zh-dictation-wrap > input, .zh-dictation-wrap > textarea, .zh-dictation-wrap > [contenteditable="true"] { grid-area:1 / 1; width:100%; min-width:0; padding-inline-end:84px !important; } .zh-dictation-button { grid-area:1 / 1; align-self:center; justify-self:end; z-index:2; display:inline-grid; place-items:center; width:34px; height:34px; margin-inline-end:6px; padding:0; border:1px solid var(--line); border-radius:10px; color:var(--brand-text); background:color-mix(in srgb, var(--card) 90%, transparent); cursor:pointer; } .zh-dictation-language { grid-area:1 / 1; align-self:center; justify-self:end; z-index:2; width:34px; height:28px; margin-inline-end:44px; padding:0; border:0; border-inline-end:1px solid var(--line); color:var(--ink-2); background:transparent; font:700 10px/1 var(--font-num); cursor:pointer; } .zh-dictation-wrap > textarea ~ .zh-dictation-button, .zh-dictation-wrap > [contenteditable="true"] ~ .zh-dictation-button, .zh-dictation-wrap > textarea ~ .zh-dictation-language, .zh-dictation-wrap > [contenteditable="true"] ~ .zh-dictation-language { align-self:start; margin-block-start:7px; } .zh-dictation-button svg { width:18px; height:18px; } .zh-dictation-button:hover:not(:disabled) { border-color:var(--brand); background:color-mix(in srgb, var(--brand) 12%, transparent); } .zh-dictation-button:focus-visible, .zh-dictation-language:focus-visible { outline:3px solid color-mix(in srgb, var(--brand) 34%, transparent); outline-offset:2px; } .zh-dictation-button.is-listening { color:#fff; border-color:var(--red); background:var(--red); box-shadow:0 0 0 5px color-mix(in srgb, var(--red) 18%, transparent); animation:zh-dictation-pulse 1.4s ease-in-out infinite; } .zh-dictation-button:disabled { opacity:.48; cursor:not-allowed; } @keyframes zh-dictation-pulse { 50% { box-shadow:0 0 0 9px transparent; } } @media (prefers-reduced-motion: reduce) { .zh-dictation-button.is-listening { animation:none; } } a { color: inherit; } img { max-width: 100%; } .num { font-family: var(--font-num); font-variant-numeric: tabular-nums; } /* لمحتوى رقميّ مؤكَّد فقط — لا عربيّ مختلط */ .zh-container { max-width: 1120px; margin-inline: auto; padding-inline: var(--space-5); } /* H.1 logical properties */ .zh-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } [hidden] { display: none !important; } /* ── H.2.1 focus-visible ─────────────────────────────────────────────── */ :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; } /* ── M7 E.1.2: رابط تخطٍّ يجب أن يظهر عند تركيزه بلوحة المفاتيح ────────── */ .zh-skip-link:focus { position: fixed; inset-block-start: var(--space-3); inset-inline-start: var(--space-3); width: auto; height: auto; padding: var(--space-2) var(--space-4); margin: 0; overflow: visible; clip: auto; white-space: normal; background: var(--action-bg); color: var(--action-fg); border-radius: 6px; z-index: 9999; outline: 2px solid var(--action-fg); outline-offset: 2px; } /* ── I.4 prefers-reduced-motion (إلزامي) ─────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ── E الأزرار ────────────────────────────────────────────────────────── */ .btn, .zh-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 10px 20px; font-size: 14px; border-radius: var(--r-btn); font-weight: 700; border: 1.5px solid transparent; cursor: pointer; text-decoration: none; transition: transform .15s ease, opacity .15s ease, box-shadow .15s ease, border-color .15s ease; font-family: inherit; } .btn:disabled, .zh-btn:disabled { opacity: .55; cursor: not-allowed; } .btn-sm { padding: 7px 14px; font-size: 13px; border-radius: 10px; } .btn-lg { padding: 14px 28px; font-size: 16px; border-radius: 16px; } .btn-xl { padding: 18px 36px; font-size: 17px; border-radius: 18px; } .btn-primary, .zh-btn-primary { background: var(--action-bg); color: var(--action-fg); } .btn-primary:hover:not(:disabled), .zh-btn-primary:hover { opacity: .92; } .btn-brand { background: var(--action-bg); color: var(--action-fg); } .btn-brand:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(210,63,44,.25); } .btn-teal { background: linear-gradient(135deg, var(--teal), #0f766e); color: #fff; } .btn-teal:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(13,148,136,.25); } .btn-outline, .zh-btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn-outline:hover:not(:disabled) { border-color: var(--ash); } .btn-ghost { background: transparent; color: var(--ink); border-color: transparent; } .btn-ghost:hover:not(:disabled) { background: var(--ivory); } .btn-danger { background: #fde8e6; color: var(--red-text); } .btn-danger:hover:not(:disabled) { background: #fbd5d1; } /* ── F.1 البطاقات ─────────────────────────────────────────────────────── */ .card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: 24px; transition: border-color .2s, box-shadow .2s; } .card.hoverable:hover { border-color: var(--ash); box-shadow: 0 4px 16px rgba(0,0,0,.05); transform: translateY(-1px); } /* ── F.2 النماذج ──────────────────────────────────────────────────────── */ .form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; } .form-input, .form-select, .form-textarea { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; font-family: var(--font-body); font-size: 14px; background: var(--ivory); color: var(--ink); unicode-bidi: plaintext; } .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--ash); } /* --danger لا --red الخام: نصٌّ 12px يحتاج التباين النصّيّ 4.5:1، و--red يعطي 4.06:1 على --paper و3.52:1 فقط على --card الغامق (رسوبٌ مقاسٌ حيّاً — نفس علّة --danger الموثَّقة أعلاه قبل ربطها بـ--red-text؛ .form-error فاتها ذلك الإصلاح). --danger يحلّها في الثيمين معاً. */ .form-error { font-size: 12px; color: var(--danger); } .form-hint { font-size: 12px; color: var(--ash); margin-top: 4px; } /* ── F.3 Navbar ───────────────────────────────────────────────────────── */ .nav { background: var(--white); border-bottom: 1px solid var(--line); padding-inline: 32px; height: 64px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; } .nav-links { display: flex; align-items: center; gap: var(--space-5); } .nav-actions { display: flex; align-items: center; gap: var(--space-3); } /* تنبيه R.5/R.6: قائمة الجوال المنسدلة — display هنا كصفٍّ عاديّ لا سطر مضمَّن عمداً: سطرٌ مضمَّن على العنصر نفسه (style="display:flex") كان يهزم سمة hidden (خاصّيّة UA بخصوصيّة منخفضة، [hidden]{display:none}، لا تستطيع التغلّب على سطرٍ مضمَّن) — فتبقى القائمة مفتوحة دائماً على الجوال بصرف النظر عن حالة الزرّ، مهما بدا JS التبديل صحيحاً (وهو كان كذلك: removeAttribute/ setAttribute سليمان). القاعدة أدناه صريحة الأسبقية على [hidden] فلا يتكرّر العطل إن أُضيف سطرٌ مضمَّن آخر لاحقاً على نفس العنصر. */ .zh-hb-menu { border-bottom: 1px solid var(--line); background: var(--white); padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: 4px; } .zh-hb-menu[hidden] { display: none; } /* ── صفحة الهبوط — الهيرو الكبير (أصلٌ مرخَّص من public/demo/index.html المعتمَد في M0، لا صورة جديدة — Ken Burns بطيء بديل صادق عن فيديو حتى يُوفَّر مصدر فيديو حقيقيّ) ─────────── */ .zh-hero { position: relative; min-height: min(84vh, 680px); display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; } .zh-hero-bg { position: absolute; inset: 0; background: url('/hero/demo/mountain-vista.webp') center 60% / cover no-repeat; transform: scale(1.12); animation: zhHeroPan 26s ease-in-out infinite alternate; will-change: transform; } @keyframes zhHeroPan { 0% { transform: scale(1.12) translateX(-2.5%); } 100% { transform: scale(1.12) translateX(2.5%); } } /* طبقة تعتيم — القياس على أفتح إطار في المقطع لا تقديراً (CLAUDE.md §13-و.٤): تباين النصّ الأبيض فوقها فوق أفتح جزء من الصورة (السماء) يتجاوز 7:1 — مُتحقَّق بلقطة شاشة + wcag-contrast.mjs. */ .zh-hero-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,4,3,.90) 0%, rgba(10,4,3,.60) 40%, rgba(10,4,3,.22) 70%, rgba(10,4,3,.08) 100%); } :root:not([data-theme="light"]) .zh-hero-scrim { background: linear-gradient(0deg, rgba(4,2,2,.94) 0%, rgba(4,2,2,.68) 42%, rgba(4,2,2,.3) 72%, rgba(4,2,2,.12) 100%); } :root[data-theme="dark"] .zh-hero-scrim { background: linear-gradient(0deg, rgba(4,2,2,.94) 0%, rgba(4,2,2,.68) 42%, rgba(4,2,2,.3) 72%, rgba(4,2,2,.12) 100%); } .zh-hero-content { position: relative; z-index: 2; padding-block: var(--space-8) var(--space-6); width: 100%; } .zh-hero-badge { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 12.5px; font-weight: 700; color: #fff; background: rgba(255,255,255,.14); backdrop-filter: blur(3px); border-radius: 999px; padding: 7px 16px; margin-bottom: var(--space-4); } .zh-hero-content h1 { color: #fff; max-width: 18ch; font-size: clamp(28px, 4.6vw, 46px); font-weight: 800; line-height: 1.28; margin: 0 0 var(--space-4); text-shadow: 0 2px 18px rgba(0,0,0,.35); } .zh-hero-lead { color: rgba(255,255,255,.9); font-size: 17px; line-height: 1.85; max-width: 58ch; margin: 0 0 var(--space-5); } .zh-hero-ghost { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.4); } .zh-hero-ghost:hover { background: rgba(255,255,255,.2); } .zh-hero-note { color: rgba(255,255,255,.78); font-size: 13px; margin: var(--space-4) 0 0; } .zh-hero-credit { color: rgba(255,255,255,.5); font-size: 11px; margin: var(--space-2) 0 0; } .zh-hero-credit a { color: rgba(255,255,255,.72); } @media (prefers-reduced-motion: reduce) { .zh-hero-bg { animation: none; transform: scale(1.03); } } @media (max-width: 640px) { .zh-hero { min-height: 72vh; } } /* ── قسم "التحوّل الحيّ" — نفس المفهوم من الديمو المعتمَد، تفاعليّ فعلياً على الصفحة الرئيسية ── */ .zh-transform-section { padding-block: var(--space-8); text-align: center; } .zh-section-lead { color: var(--ink-2); font-size: 14.5px; margin: 0 0 var(--space-4); } .zh-lens-switch { display: inline-flex; padding: 4px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; gap: 4px; margin-bottom: var(--space-5); } .zh-lens-tab { border: 0; background: transparent; color: var(--ink-2); font: inherit; font-weight: 700; font-size: 13.5px; padding: 9px 16px; border-radius: 10px; cursor: pointer; transition: color .2s ease, background-color .2s ease, box-shadow .2s ease; display: inline-flex; align-items: center; gap: 7px; } .zh-lens-tab svg { width: 15px; height: 15px; flex: none; } .zh-lens-tab[aria-selected="true"], .zh-lens-tab[aria-pressed="true"] { background: var(--white); color: var(--brand-text); box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px -12px rgba(0,0,0,.18); } .zh-lens-tab:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .zh-morph-stage { background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: var(--space-6); min-height: 220px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; max-width: 520px; margin-inline: auto; } .zh-task-card { width: 100%; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: 18px 20px; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px -12px rgba(0,0,0,.18); transition: background-color .45s cubic-bezier(.22,1,.36,1), border-color .45s cubic-bezier(.22,1,.36,1), border-radius .45s cubic-bezier(.22,1,.36,1), transform .45s cubic-bezier(.22,1,.36,1); text-align: start; } .zh-task-row1 { display: flex; align-items: center; gap: 12px; } .zh-task-check { width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--line); flex: none; display: flex; align-items: center; justify-content: center; cursor: pointer; } .zh-task-check svg { width: 13px; height: 13px; opacity: 0; } .zh-task-title { font-weight: 700; font-size: 15.5px; flex: 1; } .zh-task-meta { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .zh-pill { font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--paper); color: var(--ink-2); border: 1px solid var(--line); } .zh-pill-brand { background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand-text); border-color: transparent; } .zh-kpi-strip { display: none; gap: 16px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); } .zh-kpi { font-size: 11px; color: var(--ink-2); font-weight: 600; } .zh-kpi b { display: block; font-size: 16px; color: var(--ink); } .zh-quest-xp { display: none; align-items: center; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); text-align: start; } .zh-xp-icon { width: 26px; height: 26px; border-radius: 8px; background: var(--action-bg); color: var(--action-fg); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; flex: none; } .zh-xp-text { font-size: 12.5px; color: var(--ink-2); font-weight: 600; } .zh-morph-stage[data-lens="quick"] .zh-task-card { border-radius: 12px; } .zh-morph-stage[data-lens="quick"] .zh-kpi-strip { display: none; } .zh-morph-stage[data-lens="pro"] .zh-task-card { border-top: 3px solid var(--brand); } .zh-morph-stage[data-lens="pro"] .zh-kpi-strip { display: flex; } .zh-morph-stage[data-lens="adv"] .zh-task-card { background: linear-gradient(155deg, color-mix(in srgb, var(--brand) 14%, var(--white)), var(--white)); border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); } .zh-morph-stage[data-lens="adv"] .zh-task-title { font-family: 'Rakkas', 'IBM Plex Sans Arabic', Tahoma, Arial, sans-serif; font-size: 19px; font-weight: 400; } .zh-morph-stage[data-lens="adv"] .zh-task-card.is-demo-done .zh-quest-xp { display: flex; } .zh-morph-stage[data-lens="adv"] .zh-kpi-strip { display: none; } .zh-hint { text-align: center; color: var(--ink-2); font-size: 12.5px; margin-top: var(--space-4); } /* ── قسم عرض الميزات — كل بطاقة مشحونة فعلياً (لا وعدٌ يفوق القدرة، CLAUDE.md §ك.٤٠) ─────────── */ .zh-features-section, .zh-lenses-section, .zh-diff-section { padding-block: var(--space-8); } .zh-section-head { text-align: center; max-width: 640px; margin: 0 auto var(--space-6); } .zh-section-head h2 { font-size: clamp(22px, 3vw, 30px); font-weight: 800; margin: 0 0 var(--space-2); } .zh-section-head p { color: var(--ink-2); font-size: 15px; margin: 0; line-height: 1.8; } .zh-feature-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .zh-feature-card { display: block; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--space-5); text-decoration: none; color: inherit; transition: border-color .2s, box-shadow .2s, transform .2s; } .zh-feature-card:hover { border-color: var(--brand); box-shadow: 0 4px 16px rgba(0,0,0,.06); transform: translateY(-2px); } .zh-feature-card svg { color: var(--brand-text); } /* CSS تغلب سمتَي width/height الحاضرتين في نصّ SVG المصدر (خاصّية تقديميّة أضعف تخصيصاً من أيّ قاعدة CSS مستهدِفة) — فبطاقة تستهلك أيقونة مرسومة أصلاً بحجم أكبر (كـICON_CHAIN في streaks.ts، 40×40 في سياقها الأصليّ) تُعاد إلى القياس المناسب هنا بلا لمس السلسلة نفسها ولا نسخة مُعدَّلة منها — مصدر حقيقة واحد للرسم (dashboard.ts::ql-featured-tools). */ .zh-feature-head svg { width: 22px; height: 22px; flex: 0 0 auto; } .zh-feature-head { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-3) 0 var(--space-2); flex-wrap: wrap; } .zh-feature-head h3 { font-size: 16.5px; margin: 0; } .zh-feature-badge { font-size: 10.5px; font-weight: 800; padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand-text); } .zh-feature-card p { color: var(--ink-2); font-size: 13.5px; line-height: 1.8; margin: 0; } /* ── قسم العدسات الثلاث (لماذا) ────────────────────────────────────────────────────────── */ .zh-lens-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .zh-lens-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--space-5); } .zh-lens-card svg { color: var(--brand-text); } .zh-lens-card h3 { font-size: 18px; margin: var(--space-3) 0 var(--space-2); } .zh-lens-card p { color: var(--ink-2); font-size: 14px; line-height: 1.8; margin: 0; } /* ── قسم التمايز التنافسيّ ──────────────────────────────────────────────────────────────── */ .zh-diff-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); max-width: 900px; margin: 0 auto; } .zh-diff-item { display: flex; gap: var(--space-3); align-items: flex-start; } .zh-diff-item b { display: block; font-size: 15px; margin-bottom: 4px; } .zh-diff-item p { color: var(--ink-2); font-size: 13.5px; line-height: 1.8; margin: 0; } /* ── دعوات ختامية (تسعير + CTA نهائيّ) ─────────────────────────────────────────────────────── */ .zh-pricing-teaser, .zh-final-cta { text-align: center; padding-block: var(--space-8); } .zh-pricing-teaser h2, .zh-final-cta h2 { font-size: clamp(22px, 3vw, 30px); font-weight: 800; margin: 0 0 var(--space-2); } .zh-pricing-teaser p, .zh-final-cta p { color: var(--ink-2); font-size: 15px; margin: 0 0 var(--space-4); } .zh-final-cta { background: var(--paper); border-radius: var(--r-card); margin-inline: var(--space-5); } .zh-btn-lg { padding: 14px 32px; font-size: 16px; } /* ── J.1 الشعار ───────────────────────────────────────────────────────── */ .app-logo { width: 88px; height: 88px; border-radius: 44px; } .nav-brand { display: flex; align-items: center; gap: var(--space-2); text-decoration: none; color: var(--ink); } .nav-brand-icon { width: 38px; height: 38px; border-radius: 11px; } .nav-brand-text { display: flex; flex-direction: column; line-height: 1.25; } .nav-brand-name { font-weight: 700; font-size: 16px; } /* #174: دومين التطبيق بجوار اسمه — لاتينيّ دائماً فـdir=ltr صريح يمنع أيقونات RTL من عكس النقاط. */ .nav-brand-domain { font-size: 11px; font-weight: 500; color: var(--ash); direction: ltr; unicode-bidi: isolate; } /* #175: رابط الهبّ في الهيدر — يتمايز بصرياً عن روابط التطبيق الداخلية بحدّ خفيف. */ .nav-link-hub { padding-inline-start: var(--space-3); margin-inline-start: var(--space-1); border-inline-start: 1px solid var(--line); font-weight: 600; font-size: 14px; text-decoration: none; color: var(--ink); } /* #198: بانر تفعيل لمرّة واحدة (?activated=1) — أعلى المحتوى، لا يُخفي الهيدر. */ .zh-activated-banner { background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand-text); text-align: center; padding: 10px 16px; font-weight: 600; font-size: 14px; } /* ── G Toast ──────────────────────────────────────────────────────────── */ #toast { position: fixed; inset-inline: 0; bottom: 24px; display: flex; justify-content: center; pointer-events: none; z-index: 1000; } #toast .toast-msg { background: var(--ink); color: var(--white); padding: 12px 20px; border-radius: var(--r-pill); font-size: 14px; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,.18); pointer-events: auto; max-width: 90vw; } #toast .toast-msg.err { background: var(--red); } /* ── S.2 نافذة المشاركة الاحتياطية (navigator.share غير متاح) ────────────── */ #zh-share-dialog { border: none; border-radius: var(--r-card); padding: var(--space-5); width: min(360px, 90vw); background: var(--white); color: var(--ink); box-shadow: 0 20px 60px rgba(0,0,0,.25); } #zh-share-dialog::backdrop { background: rgba(0,0,0,.5); } .zh-share-opt { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; border: 1px solid var(--line); border-radius: var(--r-btn); background: var(--ivory); color: var(--ink); text-decoration: none; font-size: 12px; font-family: inherit; cursor: pointer; } .zh-share-opt:hover { border-color: var(--ash); background: var(--paper); } /* ── لوحة البحث السريع (Ctrl+K) — تبحث في المهام والمشاريع وتنقل لصفحات التطبيق ─────────── */ #zh-switcher-dialog { border: none; border-radius: var(--r-card); padding: 0; width: min(560px, 92vw); max-height: min(70vh, 520px); background: var(--white); color: var(--ink); box-shadow: 0 24px 70px rgba(0,0,0,.3); overflow: hidden; flex-direction: column; } /* دون [open] هنا: قاعدة author بلا شرط تكتب فوق display:none الافتراضيّ من UA للحوار المغلَق (author يغلب UA بصرف النظر عن الخصوصية) — فيظهر مكوَّناً دائماً على الصفحة قبل أوّل استدعاء showModal، كما وقع فعلاً هنا قبل هذا الإصلاح. flex يُفعَّل فقط حين يفتحه JS فعلاً. */ #zh-switcher-dialog[open] { display: flex; } #zh-switcher-dialog::backdrop { background: rgba(0,0,0,.5); } .zh-switcher-input-row { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-block-end: 1px solid var(--line); flex: 0 0 auto; } .zh-switcher-input-row svg { flex: 0 0 auto; color: var(--ink-2); } #zh-switcher-input { flex: 1 1 auto; min-width: 0; border: none; outline: none; background: transparent; color: var(--ink); font: inherit; font-size: 15px; } .zh-switcher-results { overflow-y: auto; flex: 1 1 auto; padding: 8px; } .zh-switcher-group-title { padding: 8px 10px 4px; font-size: 11.5px; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; } .zh-switcher-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border: none; border-radius: 10px; background: transparent; color: var(--ink); font: inherit; font-size: 14px; text-align: start; cursor: pointer; } .zh-switcher-item[aria-selected="true"] { background: color-mix(in srgb, var(--brand) 12%, transparent); } .zh-switcher-item:hover { background: var(--paper); } .zh-switcher-item svg { flex: 0 0 auto; color: var(--ink-2); } .zh-switcher-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zh-switcher-empty { padding: 24px 10px; text-align: center; color: var(--ink-2); font-size: 13.5px; } .zh-switcher-hint { flex: 0 0 auto; padding: 8px 16px; border-block-start: 1px solid var(--line); font-size: 11.5px; color: var(--ink-2); text-align: center; } @media (max-width: 560px) { #zh-switcher-dialog { width: 94vw; max-height: 80vh; } } /* ── جولة الترحيب الأولى (Onboarding tour) — أربع خطوات، مساحة العمل فقط ────────────────── */ #zh-onboarding-dialog { border: none; border-radius: var(--r-card); padding: 0; width: min(440px, 92vw); max-height: min(84vh, 560px); background: var(--white); color: var(--ink); box-shadow: 0 24px 70px rgba(0,0,0,.3); overflow: hidden; flex-direction: column; } /* دون [open] هنا لنفس سبب #zh-switcher-dialog أعلاه (commit 3ca4859): قاعدة author بلا شرط تكتب فوق display:none الافتراضيّ من UA للحوار المغلَق — flex فقط ضمن [open]. */ #zh-onboarding-dialog[open] { display: flex; } #zh-onboarding-dialog::backdrop { background: rgba(0,0,0,.5); } .zh-onb-head { display: flex; align-items: center; justify-content: space-between; padding-block: 12px 0; padding-inline: 16px 12px; flex: 0 0 auto; } .zh-onb-progress { font-size: 12.5px; font-weight: 700; color: var(--ink-2); } .zh-onb-body { overflow-y: auto; flex: 1 1 auto; padding: 4px 22px 8px; } .zh-onb-step { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; text-align: start; } .zh-onb-step svg { width: 22px; height: 22px; padding: 9px; border-radius: 14px; background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand-text); } .zh-onb-step h2 { margin: 4px 0 0; font-size: 17px; line-height: 1.35; } .zh-onb-step p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--ink-2); } .zh-onb-try { margin-top: 2px; } .zh-onb-foot { display: flex; flex-direction: column; gap: 12px; padding: 12px 16px 16px; border-block-start: 1px solid var(--line); flex: 0 0 auto; } .zh-onb-dots { display: flex; align-items: center; justify-content: center; gap: 6px; } .zh-onb-dot { width: 7px; height: 7px; padding: 0; border: none; border-radius: 50%; background: var(--line); cursor: pointer; transition: width .15s ease, border-radius .15s ease; } .zh-onb-dot[aria-current="true"] { width: 18px; border-radius: 4px; background: var(--brand); } .zh-onb-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; } @media (max-width: 480px) { #zh-onboarding-dialog { width: 94vw; } } /* ── اختصارات لوحة المفاتيح (؟) — مساحة العمل فقط، نفس هيكل حوار الجولة الترحيبية ─────────── */ #zh-shortcuts-dialog { border: none; border-radius: var(--r-card); padding: 0; width: min(420px, 92vw); max-height: min(80vh, 520px); background: var(--white); color: var(--ink); box-shadow: 0 24px 70px rgba(0,0,0,.3); overflow: hidden; flex-direction: column; } /* دون [open] هنا لنفس سبب #zh-switcher-dialog أعلاه (commit 3ca4859). */ #zh-shortcuts-dialog[open] { display: flex; } #zh-shortcuts-dialog::backdrop { background: rgba(0,0,0,.5); } .zh-kbd-group-title { margin: 14px 0 6px; font-size: 11.5px; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; } .zh-kbd-group-title:first-child { margin-top: 0; } .zh-kbd-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 13.5px; } .zh-kbd-keys { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; white-space: nowrap; } .zh-kbd-row kbd { display: inline-block; min-width: 20px; padding: 2px 7px; border: 1px solid var(--line); border-block-end-width: 2px; border-radius: 6px; background: var(--paper); color: var(--ink); font: 650 12px/1.5 var(--font-num), monospace; text-align: center; } @media (max-width: 480px) { #zh-shortcuts-dialog { width: 94vw; } } /* ── نواة المهامّ — العدسة السريعة (task_core، M4) ───────────────────────── */ .ql-page { max-width: 1180px; padding-block: 34px 80px; } .ql-page-head { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 18px; } .ql-page-head h1 { margin: 0; font-size: clamp(32px, 5vw, 52px); line-height: 1.15; } .ql-page-head > div:first-child > p:last-child { max-width: 58ch; margin: 12px 0 0; color: var(--ash); line-height: 1.8; } .ql-week-stat { min-width: 126px; padding-inline-start: 20px; border-inline-start: 1px solid var(--line); } .ql-week-stat strong { display: block; color: var(--brand-text); font: 700 38px/1 var(--font-num); } .ql-week-stat span { display: block; max-width: 14ch; margin-top: 7px; color: var(--ash); font-size: 12px; } #zh-quick-lens { display: grid; grid-template-columns: 176px minmax(0, 1fr); gap: 30px; align-items: start; margin-top: 22px; } .ql-work-area { min-width: 0; } .ql-tabs { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 3px; padding-inline-end: 18px; border-inline-end: 1px solid var(--line); } .ql-tab, .ql-tab-link { width: 100%; flex: 0 0 auto; padding: 9px 12px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--ink-2); font-family: inherit; font-size: 13.5px; text-align: start; cursor: pointer; } /* --brand لم تعد ثابتة عبر الثيمين بعد إعادة العلامة إلى الأخضر (فاتح غامق/داكن فاتح) — فأيّ خلفية مصمتة بنصّ أبيض حرفيّ تفشل في الثيم الداكن (مقيس حيّاً: 2.43:1). التوكن الصحيح لخلفية مصمتة بنصّ مضمون التباين في الثيمين هو --action-bg/--action-fg (نفسه في .btn-primary). */ .ql-tab[aria-current="true"] { background: var(--action-bg); color: var(--action-fg); } .ql-tab:focus-visible, .ql-tab-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } /* .ql-tab-link — رابطٌ حقيقيّ (/calendar) بنفس مظهر مشاهد .ql-tab بصرياً، بـclass مستقلّ عمداً: مستمع النقر أدناه (document.querySelectorAll('.ql-tab')) يقرأ data-scene ويستدعي qlLoadScene() بلا e.preventDefault() — رابط عادي بلا data-scene يطابق .ql-tab نفسها كان سيُطلق نداء مشهدٍ مكسور (scene=null) عند كل نقرة، فوق التنقّل الفعليّ لا بدلاً عنه. لا backtick هنا عمداً — GLOBAL_CSS نفسها قالبٌ نصّيّ محاط بـbackticks، وأيّ backtick داخل تعليق ينهيه قبل أوانه (نفس درس CLAUDE.md §19 المطبَّق في calendar-client.ts). */ .ql-tab-link { text-decoration: none; display: block; } .ql-tab-link:hover { color: var(--brand-text); } /* فيضٌ أفقيّ حقيقيّ مقيس على mobile 375px (275px+): أربعة عناصر (عنوان + متى؟ 160px ثابتة + زرّ + رابط) بلا flex-wrap تفرض عرضاً أدنى يتجاوز الشاشات الضيّقة دائماً. */ .ql-quick-add { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-2); padding: 16px; margin-block-end: var(--space-5); background: var(--white); border: 1px solid var(--line); border-radius: 12px; } .ql-quick-add input { flex: 1 1 200px; min-width: 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-btn); font-family: inherit; font-size: 15px; background: var(--white); color: var(--ink); } .ql-quick-add input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; } .ql-when-input { flex: 1 1 140px; width: auto; max-width: 160px; } .ql-when-confirm { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-block: calc(-1 * var(--space-3)) var(--space-4); padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--paper); font-size: 13.5px; color: var(--ink); } .ql-task-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .ql-task { display: flex; align-items: center; gap: var(--space-3); padding: 12px 13px; border: 1px solid transparent; border-block-end-color: var(--line); background: transparent; } .ql-task:hover { background: var(--white); border-color: var(--line); border-radius: 9px; } .ql-task-done .ql-task-title { text-decoration: line-through; color: var(--ash); } .ql-check { width: 22px; height: 22px; flex: 0 0 auto; border: 2px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; } .ql-task-done .ql-check { background: var(--brand); border-color: var(--brand); } .ql-check:focus-visible, .ql-del:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .ql-task-title { flex:1; padding:0; border:0; background:transparent; font:inherit; font-size:15px; color:var(--ink); text-align:start; word-break:break-word; cursor:pointer; } .ql-del { flex: 0 0 auto; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--ash); font-size: 20px; line-height: 1; cursor: pointer; border-radius: var(--r-btn); } .ql-del:hover { color: var(--red-text); background: var(--paper); } .ql-task-meta { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); } .ql-start { flex: 0 0 auto; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--ink-2); font-size: 15px; line-height: 1; cursor: pointer; border-radius: var(--r-btn); } .ql-start:hover { color: var(--brand-text); background: var(--paper); } .ql-task-inprogress { border-color: var(--brand); } #ql-empty { padding: var(--space-6) 0; text-align: center; color: var(--ash); font-size: 14px; } .ql-empty-rich { display: flex; flex-direction: column; align-items: center; gap: 6px; } .ql-example-chip { display: inline-block; margin: 2px 4px; padding: 6px 12px; border: 1px dashed var(--line); border-radius: var(--r-btn); background: var(--white); color: var(--ink); font-family: inherit; font-size: 13px; cursor: pointer; } .ql-example-chip:hover { border-color: var(--brand); color: var(--brand); } .ql-example-chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .ql-resume-banner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding: 10px 14px; margin-block-end: var(--space-4); border: 1px solid var(--brand); border-radius: var(--r-card); background: var(--paper); font-size: 14px; color: var(--ink); } .ql-what-i-own { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding: 8px 0; margin-block-end: var(--space-2); font-size: 13px; color: var(--ink-2); } .ql-what-i-own-link { color: var(--brand-text); text-decoration: none; font-weight: 600; } .ql-what-i-own-link:hover { text-decoration: underline; } .ql-motto { display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,.8fr);gap:24px;align-items:center;padding:clamp(18px,3vw,30px);margin-block:18px 26px;border:1px solid color-mix(in srgb,var(--brand) 24%,var(--line));border-radius:22px;background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 8%,var(--white)),var(--white));box-shadow:0 20px 55px rgba(12,55,42,.08)} .ql-motto blockquote{margin:6px 0;font-size:clamp(21px,3vw,34px);line-height:1.45;font-weight:720;color:var(--ink)}.ql-motto>div>p:last-child{margin:0;color:var(--ink-2);font-size:13px}.ql-motto details{border-inline-start:1px solid var(--line);padding-inline-start:20px}.ql-motto summary{cursor:pointer;font-weight:700}.ql-motto form{display:grid;gap:10px;margin-top:12px}.ql-motto textarea{width:100%;font:inherit;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--white);color:var(--ink);resize:vertical}.ql-motto fieldset{display:flex;gap:7px;flex-wrap:wrap;border:0;padding:0}.ql-motto legend{font-size:12px;color:var(--ink-2);margin-bottom:6px}.ql-motto fieldset label{font-size:12px;border:1px solid var(--line);border-radius:999px;padding:5px 8px} /* مكتبة العبارات (بلاغ مالك مباشر 2026-09-10) — مشتركة بين لوحة العمل وعدسة المغامرة (نفس الأصناف على .ql-motto و.adv-motivation معاً، CLAUDE.md §10). */ .ql-motto-library,.adv-motivation .adv-motto-library{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)} .ql-motto-library .te-actions,.adv-motto-library .te-actions{margin-top:0} .ql-motto-library input[type=text],.adv-motto-library input[type=text]{flex:1;min-width:160px;font:inherit;padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:var(--white);color:var(--ink)} .ql-library-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px} .ql-library-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--white);font-size:13px} .ql-library-item span{flex:1;min-width:0;overflow-wrap:anywhere} .ql-library-item label{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--ink-2);white-space:nowrap} .ql-library-item button{flex:0 0 auto;padding:4px 8px;font-size:12px} .ql-library-empty{font-size:12.5px;color:var(--ink-2);margin:10px 0 0} #ql-load-more { display: block; margin: var(--space-4) auto 0; } /* ── I.2 Skeleton ─────────────────────────────────────────────────────── */ .skeleton { background: linear-gradient(90deg, var(--paper) 25%, var(--line) 50%, var(--paper) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius-sm); } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ── I.3 Empty/Error state ───────────────────────────────────────────── */ .empty-state, .zh-state { text-align: center; padding: 48px 24px; color: var(--ash); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); } .error-state { text-align: center; padding: 48px 24px; color: var(--danger); } /* ── I.1 Responsive ───────────────────────────────────────────────────── */ @media (max-width: 768px) { .nav { padding-inline: 16px; } .nav-links { display: none; } /* #180: nav-brand (أيقونة+اسم+دومين) + nav-actions (لغة+دخول/حسابي+ابدأ الآن+هامبرغر) في صفّ واحد ضيّق — الدومين أوّل ما يُحذَف بصرياً (زخرفة لا وظيفة، موجود في الفوتر أيضاً). */ .nav-brand-domain { display: none; } .wrap, .zh-container { padding-inline: 16px; } .grid-2, .grid-3 { grid-template-columns: 1fr; } .ql-page-head { align-items: flex-start; flex-direction: column; } .ql-motto{grid-template-columns:1fr}.ql-motto details{border-inline-start:0;border-top:1px solid var(--line);padding:16px 0 0} .ql-week-stat { display: flex; align-items: baseline; gap: 10px; padding: 0; border: 0; } #zh-quick-lens { grid-template-columns: 1fr; gap: 18px; } .ql-tabs { position: static; flex-direction: row; overflow-x: auto; padding: 0 0 10px; border-inline-end: 0; border-block-end: 1px solid var(--line); } .ql-tab, .ql-tab-link { width: auto; } } @media (max-width: 480px) { /* #180: زرّ الدخول الثانويّ يُخفى دون حذف الوظيفة — نفس الرابط موجود داخل قائمة الهامبرغر. */ .nav-cta-secondary { display: none; } } /* ── شريط التنقّل السفليّ (مساحة العمل، جوّال فقط — M7 §B) ─────────────────────────────── */ .zh-bottom-nav { display: none; } @media (max-width: 768px) { .zh-bottom-nav { display: flex; position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 55; background: var(--card); border-block-start: 1px solid var(--line); padding-block: 6px calc(6px + env(safe-area-inset-bottom, 0px)); } .zh-bottom-nav a { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding-block: 4px; color: var(--ink-2); text-decoration: none; font-size: 10.5px; min-width: 0; } .zh-bottom-nav a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .zh-bottom-nav a svg { width: 22px; height: 22px; } .zh-bottom-nav a[aria-current="page"] { color: var(--brand-text); font-weight: 700; } /* الهامبرغر يخدم مساحة العمل بلا هذا الشريط أصلاً (خمس روابط مكرّرة داخله) — الشريط السفليّ يحلّ محلّه هنا تحديداً فقط؛ الصفحات التسويقية تبقي الهامبرغر كما هو. */ body.zh-workspace [data-hamburger] { display: none !important; } body.zh-workspace #zh-main { padding-block-end: 64px; } body.zh-workspace .zh-cookie-notice { inset-block-end: 58px; } } /* ── الفوتر الموحَّد (Q) ──────────────────────────────────────────────── */ .zh-footer { background: var(--ivory); border-top: 1px solid var(--line); margin-top: var(--space-8); } .zh-footer-gift { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px 16px; border-bottom: 1px solid var(--line); } .zh-footer-gift a { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 600; padding: 8px 14px; border: 1.5px solid var(--line); border-radius: var(--r-pill); transition: border-color .2s, color .2s; } .zh-footer-gift a:hover { border-color: var(--brand); color: var(--brand-text); } .zh-footer-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-6); padding: var(--space-6) var(--space-5); } @media (max-width: 900px) { .zh-footer-cols { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .zh-footer-cols { grid-template-columns: 1fr; } } .zh-footer-col h3 { font-size: 14px; font-weight: 700; margin: 0 0 var(--space-3); color: var(--ink); } .zh-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); } .zh-footer-col a { color: var(--ash); text-decoration: none; font-size: 14px; display: inline-flex; align-items: center; gap: 4px; } .zh-footer-col a:hover { color: var(--ink); } .zh-footer-ext-arrow { display: inline-block; width: 12px; height: 12px; } [dir="rtl"] .zh-footer-ext-arrow { transform: scaleX(-1); } .zh-footer-brand { display: flex; flex-direction: column; gap: var(--space-3); } .zh-footer-brand p { color: var(--ash); font-size: 13px; margin: 0; max-width: 32ch; } .zh-newsletter { text-align: center; padding: var(--space-6) var(--space-5); border-top: 1px solid var(--line); } .zh-newsletter h3 { margin: 0 0 var(--space-2); font-size: 16px; } .zh-newsletter p { color: var(--ash); font-size: 13px; margin: 0 0 var(--space-4); } .zh-newsletter form { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; max-width: 520px; margin: 0 auto; } .zh-newsletter .cc-select { min-width: 0; max-width: 40vw; border: 1px solid var(--line); border-radius: 12px; padding: 11px 10px; background: var(--white); font-family: inherit; } .zh-newsletter input[type="email"], .zh-newsletter input[type="tel"] { flex: 1 1 160px; min-width: 0; border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; font-family: inherit; background: var(--white); color: var(--ink); } /* B.2/B.3: مجموعة مفتاح الدولة+الجوّال عنصرٌ فرعيّ داخل form الأصل (flex-wrap) — بلا min-width:0 يرث الحدّ الأدنى الافتراضيّ auto (= مجموع أعرض محتوى أبنائه) فيفيض أفقياً على 375px (فحصٌ حيّ رصده: 32px overflow على mobile EN). */ .zh-newsletter-phone-group { flex: 1 1 200px; min-width: 0; max-width: 100%; } .zh-newsletter .consent-line { font-size: 11px; color: var(--ash); max-width: 480px; margin: var(--space-3) auto 0; } .zh-footer-actions { display: flex; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-5); border-top: 1px solid var(--line); flex-wrap: wrap; } .zh-social-row { display: flex; align-items: center; justify-content: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--line); } .zh-social-row a { color: var(--ash); display: inline-flex; } .zh-social-row a:hover { color: var(--brand-text); } .zh-legal { text-align: center; padding: var(--space-5); color: var(--ash); font-size: 12px; display: flex; flex-direction: column; gap: 4px; } .zh-legal a { color: inherit; } /* ── واجهة المنتج 2026: خريطة تقدّم حيّة بدل صورة زخرفية عامة ─────────── */ .zt-hero { padding-block: clamp(56px, 8vw, 104px); background: radial-gradient(circle at 78% 20%, color-mix(in srgb, var(--brand) 12%, transparent) 0 18%, transparent 42%), var(--ivory); border-block-end: 1px solid var(--line); } .zt-hero-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(440px, 1.08fr); align-items: center; gap: clamp(40px, 7vw, 88px); } .zt-hero-copy { max-width: 640px; } .zt-kicker { color: var(--brand-text); font-size: 13px; font-weight: 800; margin: 0 0 14px; } .zt-hero h1 { max-width: 16ch; margin: 0; font-size: clamp(36px, 4.8vw, 64px); line-height: 1.11; letter-spacing: -.035em; text-wrap: balance; } [dir="rtl"] .zt-hero h1 { letter-spacing: 0; } .zt-lead { max-width: 58ch; margin: 24px 0 0; color: var(--ink-2); font-size: clamp(17px, 1.7vw, 20px); line-height: 1.9; } .zt-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .zt-trust { display: flex; flex-wrap: wrap; gap: 9px 24px; margin: 24px 0 0; padding: 0; list-style: none; color: var(--ash); font-size: 13px; } .zt-trust li::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-inline-end: 8px; border-radius: 50%; background: var(--brand); vertical-align: middle; } .zt-map { position: relative; padding: clamp(22px, 3vw, 34px); overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: 30px 10px 30px 10px; box-shadow: 0 24px 70px -42px rgba(16,39,29,.56); } .zt-map::after { content: ''; position: absolute; inset-inline-end: -80px; inset-block-end: -110px; width: 220px; height: 220px; border: 42px solid color-mix(in srgb, var(--brand) 9%, transparent); border-radius: 50%; pointer-events: none; } .zt-map-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 20px; } .zt-map-head div { display: grid; gap: 5px; } .zt-map-head small, .zt-map-head > span { color: var(--ash); font-size: 12px; } .zt-map-head strong { font-size: 16px; } .zt-map .zh-lens-switch { margin: 0 0 18px; background: var(--ivory); } .zt-map .zh-morph-stage { max-width: none; min-height: 260px; padding: 54px 20px 22px; background: linear-gradient(150deg, color-mix(in srgb, var(--paper) 82%, transparent), var(--ivory)); } .zt-map .zh-task-card { position: relative; z-index: 2; max-width: 420px; } .zt-map .zh-task-check[aria-pressed="true"] { background: var(--action-bg); border-color: var(--action-bg); color: var(--action-fg); } .zt-map .zh-task-check[aria-pressed="true"] svg { opacity: 1; } .zt-map .zh-task-check[aria-pressed="true"] + .zh-task-title { color: var(--ash); text-decoration: line-through; text-decoration-thickness: 1px; } .zt-map .zh-task-meta { color: var(--ash); font-size: 12px; } .zt-route { position: absolute; inset: 22px 24px auto; height: 34px; border-top: 1px solid var(--line); } .zt-route::before { content: ''; position: absolute; inset-inline: 0; top: -2px; width: 42%; height: 3px; background: var(--brand); transform-origin: inline-start; animation: ztRoute .8s cubic-bezier(.22,1,.36,1) both; } .zt-route i { position: absolute; top: -6px; width: 11px; height: 11px; border: 2px solid var(--white); border-radius: 50%; background: var(--line); } .zt-route i:nth-child(1) { inset-inline-start: 0; background: var(--brand); } .zt-route i:nth-child(2) { inset-inline-start: 33%; background: var(--brand); } .zt-route i:nth-child(3) { inset-inline-start: 66%; } .zt-route i:nth-child(4) { inset-inline-end: 0; } .zt-map-caption { margin: 16px 0 0; color: var(--ash); font-size: 12.5px; line-height: 1.7; } @keyframes ztRoute { from { transform: scaleX(0); } to { transform: scaleX(1); } } .zt-scenarios { padding-block: clamp(64px, 9vw, 112px); } .zt-scenarios > h2, .zt-how h2, .zt-capabilities h2, .zt-adventure h2, .zt-final h2, .pricing-hero h1, .guide-hero h1 { text-wrap: balance; } .zt-scenarios > h2 { max-width: 19ch; margin: 0 0 42px; font-size: clamp(28px, 4vw, 45px); line-height: 1.25; } .zt-scenarios > div { border-block-start: 1px solid var(--line); } .zt-scenarios article { display: grid; grid-template-columns: 54px 1fr; gap: 20px; padding-block: 24px; border-block-end: 1px solid var(--line); } .zt-scenarios article > span { color: var(--brand-text); font-family: var(--font-num); font-size: 13px; font-weight: 700; } .zt-scenarios h3 { margin: 0 0 6px; font-size: 19px; } .zt-scenarios p { margin: 0; color: var(--ash); line-height: 1.75; } .zt-how { padding-block: clamp(60px, 8vw, 96px); background: var(--ink); color: var(--ivory); } .zt-how header { display: grid; grid-template-columns: minmax(0, .75fr) minmax(280px, .55fr); gap: 48px; align-items: end; margin-bottom: 48px; } .zt-how h2 { max-width: 18ch; margin: 0; font-size: clamp(30px, 4vw, 48px); line-height: 1.25; } .zt-how header p { margin: 0; color: color-mix(in srgb, var(--ivory) 74%, transparent); line-height: 1.85; } .zt-steps { display: grid; grid-template-columns: repeat(3, 1fr); border-block-start: 1px solid color-mix(in srgb, var(--ivory) 18%, transparent); } .zt-steps article { min-width: 0; padding: 32px clamp(0px, 3vw, 34px); border-inline-end: 1px solid color-mix(in srgb, var(--ivory) 18%, transparent); } .zt-steps article:first-child { padding-inline-start: 0; } .zt-steps article:last-child { border-inline-end: 0; } .zt-steps svg { width: 30px; height: 30px; color: color-mix(in srgb, var(--brand) 70%, white); } .zt-steps h3 { margin: 22px 0 8px; font-size: 22px; } .zt-steps p { margin: 0; color: color-mix(in srgb, var(--ivory) 72%, transparent); line-height: 1.85; } .zt-capabilities { display: grid; grid-template-columns: minmax(250px, .72fr) minmax(0, 1.28fr); gap: clamp(44px, 8vw, 100px); padding-block: clamp(70px, 10vw, 120px); } .zt-capabilities header { position: sticky; top: 94px; align-self: start; } .zt-capabilities h2 { margin: 0; font-size: clamp(30px, 4vw, 46px); line-height: 1.25; } .zt-capabilities header p { color: var(--ash); line-height: 1.85; } .zt-capability-list { border-block-start: 1px solid var(--line); } .zt-capability-list article { display: grid; grid-template-columns: minmax(130px, .45fr) 1fr; gap: 24px; padding-block: 23px; border-block-end: 1px solid var(--line); } .zt-capability-list h3, .zt-capability-list p { margin: 0; } .zt-capability-list h3 { font-size: 16px; } .zt-capability-list p { color: var(--ash); line-height: 1.75; } /* هذا القسم بأكمله (زخرفة صفحة/فقرة المغامرة على الرئيسية و/adventure) كان بألوان خضراء ثابتة بلا صلة بمتغيّرات العلامة إطلاقاً (لا var()) — فبقي أخضر حتى بعد إصلاح كل توكِنات --brand في المشروع. القيم أدناه دافئة (أحمر-برتقالي محروق/بنّي) بنفس درجة التباين تقريباً؛ لا تُخلَط بألوان الأفاتار الشخصية أسفل (tide/grove) فتلك تنويعٌ مقصود لكل شخصية، لا هوية بصرية للصفحة نفسها. */ .zt-adventure { padding-block: clamp(70px, 9vw, 110px); background: linear-gradient(145deg, #2b120a, #4a2414); color: #FBF3EC; overflow: hidden; } .zt-adventure-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(300px, .65fr); gap: 64px; align-items: center; } .zt-adventure h2 { max-width: 14ch; margin: 0; font-size: clamp(34px, 5vw, 58px); line-height: 1.2; } .zt-adventure p:not(.zt-kicker) { max-width: 58ch; color: #E8D3C4; line-height: 1.9; } .zt-adventure .zt-kicker { color: #fcaa64; } .zt-adventure .zh-btn-primary { background: #FCE4D2; color: #4a2414; } .zt-orbit { position: relative; width: min(360px, 78vw); aspect-ratio: 1; margin-inline: auto; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; display: grid; place-items: center; } .zt-orbit::before, .zt-orbit::after { content: ''; position: absolute; inset: 18%; border: 1px dashed rgba(255,255,255,.2); border-radius: 50%; } .zt-orbit::after { inset: 37%; background: rgba(255,255,255,.06); } .zt-orbit span { position: relative; z-index: 2; font: 700 44px/1 var(--font-num); color: #FCE4D2; } .zt-orbit i { position: absolute; width: 17px; height: 17px; border-radius: 50%; background: #fcaa64; box-shadow: 0 0 0 7px rgba(252,170,100,.15); animation: ztMilestone .9s cubic-bezier(.22,1,.36,1) both; } .zt-orbit i:nth-of-type(1) { top: 7%; inset-inline-start: 47%; } .zt-orbit i:nth-of-type(2) { top: 51%; inset-inline-end: -2%; animation-delay: .14s; } .zt-orbit i:nth-of-type(3) { bottom: 7%; inset-inline-start: 19%; animation-delay: .28s; } .zt-orbit b { position: absolute; inset-block-end: 20%; inset-inline-end: -8%; padding: 9px 14px; background: #FCE4D2; color: #4a2414; border-radius: 8px; font-size: 12px; } .zt-adventure-preview{position:relative;margin:0;overflow:hidden;border:1px solid rgba(255,255,255,.24);border-radius:30px 10px 30px 10px;box-shadow:0 36px 90px rgba(0,0,0,.32)}.zt-adventure-preview img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}.zt-adventure-preview figcaption{position:absolute;inset-inline:18px;inset-block-end:18px;padding:10px 14px;text-align:center;color:#fff;background:rgba(30,14,8,.76);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.2);border-radius:10px;font-size:12px;font-weight:700} @keyframes ztMilestone { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: scale(1); } } .adv-page { max-width: 1120px; padding-block: 38px 90px; } .adv-hero { display: grid; grid-template-columns: minmax(0, .82fr) minmax(380px, 1.18fr); align-items: center; gap: 46px; padding: clamp(28px, 5vw, 56px); overflow: hidden; background: linear-gradient(145deg, #2b120a, #54281a); color: #FBF3EC; border-radius: 36px 12px 36px 12px; } .adv-hero h1 { max-width: 11ch; margin: 0; font-size: clamp(36px, 5vw, 62px); line-height: 1.16; text-wrap: balance; } .adv-hero p:not(.zt-kicker) { color: #E8D3C4; line-height: 1.85; } .adv-hero .zt-kicker { color: #fcaa64; } .adv-route-map { --adv-avatar-cloak:#7c243d; --adv-avatar-shadow:#3f1022; --adv-avatar-arm:#6b1d34; width: 100%; max-height: 330px; overflow: visible; filter: drop-shadow(0 28px 35px rgba(1,20,13,.28)); } .adv-route-map[data-avatar="tide"] { --adv-avatar-cloak:#216b83; --adv-avatar-shadow:#123c55; --adv-avatar-arm:#1c5a72; } .adv-route-map[data-avatar="grove"] { --adv-avatar-cloak:#4d7f45; --adv-avatar-shadow:#234c35; --adv-avatar-arm:#3c693d; } #adv-world-wrap { position: relative; width: 100%; } .adv-phaser-mount { width: 100%; aspect-ratio: 680 / 330; border-radius: inherit; overflow: hidden; touch-action: none; } .adv-phaser-mount canvas { display: block; width: 100% !important; height: 100% !important; border-radius: inherit; } #adv-view-toggle { margin-top: 10px; } .adv-route-map image { opacity:.92; } .adv-route-map [data-world] { opacity:.46; mix-blend-mode:soft-light; } .adv-route-map [data-character-only] { display:none; } .adv-route-map[data-character="lantern"] [data-character-only="lantern"], .adv-route-map[data-character="scout"] [data-character-only="scout"], .adv-route-map[data-character="sage"] [data-character-only="sage"] { display:block; } .adv-route-map [hidden] { display: none; } .adv-route-base, .adv-route-progress { fill:none; stroke-linecap:round; stroke-width:6; } .adv-route-base { stroke:rgba(255,255,255,.24); stroke-dasharray:3 14; } .adv-route-progress { stroke:#f4df9a; filter:drop-shadow(0 0 7px rgba(244,223,154,.72)); transition:stroke-dasharray .75s cubic-bezier(.22,1,.36,1); } .adv-stars circle:nth-child(2n), .adv-spark circle { animation: advTwinkle 2.8s ease-in-out infinite alternate; transform-origin: center; } .adv-grove circle { transform-box: fill-box; transform-origin: center bottom; animation: advBreathe 4s ease-in-out infinite alternate; } .adv-stops circle { fill:#173d32; stroke:rgba(255,255,255,.5); stroke-width:4; transition:fill .4s,stroke .4s,transform .4s; transform-box:fill-box; transform-origin:center; } .adv-stops circle.is-complete { fill:#f4df9a; stroke:#fff7d7; } .adv-stops circle.is-current { fill:#fff7d7; stroke:#f4df9a; transform:scale(1.32); filter:drop-shadow(0 0 8px #f4df9a); } #adv-character { transition:transform .8s cubic-bezier(.22,1,.36,1); } .adv-character-body { transform-box:fill-box; transform-origin:center bottom; animation:advCharacterFloat 2.7s ease-in-out infinite alternate; } .adv-cloak { fill:var(--adv-avatar-cloak); } .adv-cloak-shadow { fill:var(--adv-avatar-shadow); opacity:.7; } .adv-arm { stroke:var(--adv-avatar-arm); } .adv-you-are-here rect { fill:#fff7d7; } .adv-you-are-here text { fill:#173d32; font:700 10px var(--font-body); } .adv-wave { animation:advWave 3.2s ease-in-out infinite alternate; } .adv-market-lanterns circle:nth-child(2n) { animation: advTwinkle 2.4s ease-in-out infinite alternate; transform-origin: center; } .adv-observatory-stars circle:nth-child(3n) { animation: advTwinkle 3.6s ease-in-out infinite alternate; transform-origin: center; } .adv-constellation { animation: advTwinkle 5s ease-in-out infinite alternate; transform-origin: center; } .adv-route-map.is-step-celebrating .adv-character-body { animation:advCharacterWin .8s cubic-bezier(.22,1,.36,1); } .adv-route-map.is-chapter-celebrating { animation:advWorldGlow 1.45s cubic-bezier(.22,1,.36,1); } .adv-route-map.is-chapter-celebrating .adv-spark { animation: advSpark 1.2s cubic-bezier(.22,1,.36,1); transform-origin: 620px 120px; } @keyframes advTwinkle { from { opacity: .35; transform: scale(.75); } to { opacity: 1; transform: scale(1.15); } } @keyframes advBreathe { from { transform: rotate(-1deg); } to { transform: rotate(1.5deg); } } @keyframes advSpark { from { opacity: 0; transform: scale(.25); } to { opacity: 1; transform: scale(1.25); } } @keyframes advCharacterFloat { from { transform:translateY(1px) rotate(-1deg); } to { transform:translateY(-4px) rotate(1deg); } } @keyframes advCharacterWin { 0%,100% { transform:translateY(0) scale(1); } 42% { transform:translateY(-15px) scale(1.12); } } @keyframes advWorldGlow { 40% { filter:drop-shadow(0 0 32px rgba(244,223,154,.8)) brightness(1.16); } } @keyframes advWave { from { transform:translateX(-6px); } to { transform:translateX(8px); } } .adv-page > #adv-status { min-height: 24px; margin: 20px 0 0; color: var(--ash); } .adv-progress-panel { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(220px, 1fr); gap: 22px 38px; align-items: end; margin-top: 26px; padding: 28px; background: var(--white); border: 1px solid var(--line); border-radius: 10px 28px 10px 28px; } .adv-progress-panel h2 { margin: 0 0 8px; } .adv-progress-panel progress { width: 100%; height: 13px; accent-color: var(--brand); } #adv-badges { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; } /* تدقيق تسويقيّ لاحق (2026-09-10، #148 متابعة): repeat(3,...) كان بقايا تصميم العوالم الثلاثة القديم — الآن 5 بطاقات (garden/market/coast/summit/observatory، renderWorlds() في services/adventure/client.ts). auto-fit بدل رقم ثابت: يتّسع البطاقات ذاتياً بلا كسر لو أُضيف عالم سادس مستقبلاً، ويطوي الصفّ تدريجياً على العروض الأضيق بدل قفزة 3+2 فجائية على المكتب ثم عمود واحد فجأة على الجوّال (media query سطر ~1125 يبقى كما هو، الآن تكرار لا استبدال). */ .adv-worlds { grid-column:1 / -1; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; padding-top:8px; } .adv-world-card { display:grid; grid-template-columns:58px 1fr; grid-template-rows:auto auto; gap:2px 10px; min-width:0; padding:10px; text-align:start; color:var(--ink); background:var(--ivory); border:1px solid var(--line); border-radius:12px; cursor:pointer; } .adv-world-card strong,.adv-world-card small { min-width:0; overflow-wrap:anywhere; } .adv-world-card small { color:var(--ash); } .adv-world-card.is-selected { border-color:var(--brand); box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 18%,transparent); } .adv-world-card.is-locked { opacity:.58; cursor:not-allowed; } .adv-world-thumb { grid-row:1 / 3; position:relative; min-height:48px; overflow:hidden; border-radius:8px; background:linear-gradient(#276147,#7eb489); } .adv-world-thumb i,.adv-world-thumb b { position:absolute; inset-inline:0; bottom:-7px; height:28px; border-radius:50% 50% 0 0; background:#285a3f; } .adv-world-thumb b { inset-inline-start:24px; bottom:2px; width:24px; height:35px; background:#83bd78; } .is-coast .adv-world-thumb { background:linear-gradient(#275d75 48%,#78c6c0 49%); } .is-coast .adv-world-thumb i { background:#d9eee6; width:9px; height:35px; inset-inline-start:34px; bottom:5px; border-radius:2px; } .is-coast .adv-world-thumb b { background:#d0674c; width:15px; height:8px; inset-inline-start:31px; bottom:35px; border-radius:2px; } .is-summit .adv-world-thumb { background:linear-gradient(#253c38,#81918a); } .is-summit .adv-world-thumb i { height:50px; bottom:-16px; background:#52665e; clip-path:polygon(50% 0,100% 100%,0 100%); border-radius:0; } .is-summit .adv-world-thumb b { width:3px; height:28px; inset-inline-start:39px; bottom:9px; background:#e9d078; border-radius:0; } .is-market .adv-world-thumb { background:linear-gradient(#2b1a3d,#c96a3f); } .is-market .adv-world-thumb i { height:20px; bottom:0; background:#3a2418; border-radius:0; clip-path:polygon(10% 100%,10% 30%,50% 0,90% 30%,90% 100%); } .is-market .adv-world-thumb b { width:6px; height:6px; inset-inline-start:26px; bottom:22px; background:#f8cf6d; border-radius:50%; } .is-observatory .adv-world-thumb { background:linear-gradient(#050a1a,#1d2b52); } .is-observatory .adv-world-thumb i { width:16px; height:16px; inset-inline-start:16px; bottom:14px; background:#f6d78a; border-radius:50%; clip-path:polygon(45% 0,100% 0,100% 100%,45% 100%,65% 50%); } .is-observatory .adv-world-thumb b { width:3px; height:3px; inset-inline-start:38px; bottom:30px; background:#eaf3ff; border-radius:50%; box-shadow:8px 6px 0 -0.5px #eaf3ff,4px 16px 0 -1px #eaf3ff; } .adv-badge { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px; color: var(--ash); background: var(--paper); border: 1px solid var(--line); border-radius: 12px 5px 12px 5px; } .adv-badge svg { width: 34px; height: 34px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; } .adv-badge span { display: grid; min-width: 0; } .adv-badge strong { color: inherit; font-size: 13px; } .adv-badge small { font-size: 11px; } .adv-badge.is-earned { color: var(--brand-text); background: color-mix(in srgb,var(--brand) 10%,var(--white)); border-color: color-mix(in srgb,var(--brand) 42%,var(--line)); } .adv-badge.is-near { color: var(--ink); border-style: dashed; } .adv-badge.is-locked { opacity: .52; filter: grayscale(1); } .adv-tasks-panel { margin-block: 46px; } .adv-current-quest { display:grid; grid-template-columns:1fr auto; gap:7px 24px; align-items:center; margin-top:22px; padding:20px 22px; color:#f7fbf8; background:linear-gradient(135deg,#173d32,#245e46); border-radius:8px 24px 8px 24px; box-shadow:0 18px 45px -34px #10271d; } .adv-current-quest[hidden] { display:none; } .adv-current-quest span { color:#aee3c6; font-size:12px; font-weight:800; } .adv-current-quest strong { grid-column:1; font-size:clamp(18px,2vw,24px); } .adv-quest-label { grid-column:1; font-style:normal; font-weight:800; font-size:13px; color:#f4df9a; } .adv-quest-label[hidden] { display:none; } .adv-quest-flavor { grid-column:1; margin:2px 0 0; font-size:13.5px; line-height:1.6; color:#cfe9d9; } .adv-quest-flavor[hidden] { display:none; } .adv-current-quest .btn { grid-column:2; grid-row:1 / 3; background:#f4df9a; color:#173d32; } .adv-focus-run { margin-block:28px 54px; overflow:hidden; border:1px solid #315947; border-radius:30px 10px 30px 10px; background:#10271d; color:#f7fbf8; } .adv-focus-run > header { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,.72fr); gap:28px; padding:28px; } .adv-focus-run h2 { margin:4px 0 10px; max-width:18ch; font-size:clamp(25px,3vw,38px); } .adv-focus-run header p:not(.zt-kicker) { margin:0; max-width:62ch; color:#bfd6ca; line-height:1.75; } .adv-focus-setup { display:grid; grid-template-columns:1fr 90px; gap:10px; align-self:end; } .adv-focus-setup label:first-child { grid-column:1 / -1; } .adv-focus-setup label { color:#cfe2d8; font-size:12px; font-weight:750; } .adv-focus-setup select,.adv-focus-setup input { width:100%; margin-top:5px; padding:9px 10px; color:#10271d; background:#f5f8f5; border:1px solid #719282; border-radius:9px; font:inherit; } .adv-focus-setup #adv-focus-start { grid-column:1 / -1; } .adv-chase-stage { position:relative; min-height:340px; overflow:hidden; isolation:isolate; background-position:center; background-size:cover; border-block-start:1px solid rgba(255,255,255,.14); } .adv-page[data-world="garden"] .adv-chase-stage { background-image:linear-gradient(rgba(5,20,15,.22),rgba(5,20,15,.52)),url('/assets/adventure/garden-lanterns-v1.webp'); } .adv-page[data-world="coast"] .adv-chase-stage { background-image:linear-gradient(rgba(5,20,28,.2),rgba(5,20,28,.5)),url('/assets/adventure/coast-achievement-v1.webp'); } .adv-page[data-world="summit"] .adv-chase-stage { background-image:linear-gradient(rgba(8,17,35,.18),rgba(8,17,35,.5)),url('/assets/adventure/summit-focus-v1.webp'); } .adv-chase-stage::after { content:''; position:absolute; inset:auto 0 0; z-index:-1; height:34%; background:linear-gradient(transparent,rgba(5,17,13,.75)); } .adv-chase-mist { position:absolute; inset:0; z-index:-1; opacity:.32; background:repeating-linear-gradient(103deg,transparent 0 90px,rgba(255,255,255,.2) 105px,transparent 125px); background-size:240% 100%; animation:advMist 12s linear infinite; } .adv-chase-hud { position:absolute; inset-block-start:18px; inset-inline:18px; display:flex; justify-content:space-between; align-items:center; gap:18px; padding:10px 14px; background:rgba(7,25,18,.76); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.2); border-radius:12px; } .adv-chase-hud strong { flex:none; color:#f4df9a; font:800 30px/1 var(--font-num); } .adv-chase-hud span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .adv-chase-progress { position:absolute; inset-inline:18px; inset-block-end:82px; height:8px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.2); } .adv-chase-progress i { display:block; width:0; height:100%; background:linear-gradient(90deg,#f4df9a,#f19d62); box-shadow:0 0 14px #f4df9a; transition:width .25s linear; } .adv-focus-actions { position:absolute; inset-inline:18px; inset-block-end:18px; display:flex; gap:8px; } .adv-focus-actions[hidden] { display:none; } .adv-focus-actions .btn-outline { color:#fff; background:rgba(7,25,18,.62); border-color:rgba(255,255,255,.35); } .adv-runner { position:absolute; z-index:4; inset-block-end:96px; inset-inline-start:18%; width:45px; height:69px; transition:inset-inline-start .25s linear; filter:drop-shadow(0 8px 8px rgba(0,0,0,.45)); } .adv-runner span { position:absolute; inset:9px 6px 5px; border-radius:50% 50% 28% 28%; background:var(--adv-runner,#8b3451); clip-path:polygon(50% 0,84% 24%,100% 100%,0 100%,14% 24%); } .adv-page[data-avatar="tide"] { --adv-runner:#276d86; }.adv-page[data-avatar="grove"] { --adv-runner:#4f8249; } .adv-runner::before { content:''; position:absolute; z-index:2; width:17px; height:17px; inset-inline-start:14px; top:7px; border-radius:50%; background:#12251c; box-shadow:-4px 7px 0 -2px #f4df9a,4px 7px 0 -2px #f4df9a; } .adv-runner i { position:absolute; inset-inline-end:-13px; top:35px; width:24px; height:24px; border-radius:50%; background:radial-gradient(circle,#fff9d4 0 18%,#f6c862 19% 35%,transparent 70%); } .adv-chase-stage[data-state="running"] .adv-runner { animation:advRun .52s ease-in-out infinite alternate; } .adv-shadow-beast { position:absolute; z-index:2; inset-block-end:93px; inset-inline-start:-12%; width:110px; height:104px; opacity:.84; transition:inset-inline-start .25s linear; filter:blur(.2px) drop-shadow(0 0 18px rgba(9,8,20,.8)); } .adv-shadow-beast::before { content:''; position:absolute; inset:25px 5px 0; border-radius:52% 48% 20% 20%; background:linear-gradient(#111023,#03040a); clip-path:polygon(50% 0,67% 15%,83% 8%,79% 29%,100% 70%,81% 100%,18% 100%,0 68%,21% 29%,17% 8%,35% 15%); } .adv-shadow-beast i,.adv-shadow-beast b { position:absolute; z-index:2; top:49px; width:8px; height:5px; border-radius:50%; background:#8ee0b9; box-shadow:0 0 9px #8ee0b9; } .adv-shadow-beast i { inset-inline-start:42px; }.adv-shadow-beast b { inset-inline-start:62px; } .adv-chase-stage[data-mode="lanterns"] .adv-shadow-beast { display:none; } .adv-chase-stage[data-mode="lanterns"] .adv-obstacles i { border-radius:50%; border:0; background:radial-gradient(circle,#fff9d4 0 15%,#f6c862 16% 32%,transparent 68%); } .adv-chase-stage[data-mode="lanterns"] .adv-obstacles i:not(.is-passed) { opacity:.22; filter:grayscale(1); } .adv-chase-stage[data-mode="lanterns"] .adv-obstacles i.is-passed { opacity:1; transform:scale(1.35); filter:drop-shadow(0 0 12px #f6c862); } .adv-chase-stage[data-mode="lanterns"] #adv-chase-fill { background:linear-gradient(90deg,#8ee0b9,#f6d78a); } .adv-chase-stage[data-mode="gates"] .adv-obstacles i.is-passed { opacity:0; transform:translateY(28px) rotate(14deg) scale(.45); } .adv-chase-stage[data-mode="gates"] #adv-chase-fill { background:linear-gradient(90deg,#e2674e,#f4df9a); } .adv-obstacles { position:absolute; inset:0; pointer-events:none; } .adv-obstacles i { position:absolute; z-index:3; bottom:99px; width:20px; height:54px; border:3px solid #f4df9a; border-block-end:0; border-radius:9px 9px 0 0; box-shadow:0 0 15px rgba(244,223,154,.52); transition:opacity .3s,transform .3s; } .adv-obstacles i:nth-child(1){inset-inline-start:31%}.adv-obstacles i:nth-child(2){inset-inline-start:43%}.adv-obstacles i:nth-child(3){inset-inline-start:55%}.adv-obstacles i:nth-child(4){inset-inline-start:67%}.adv-obstacles i:nth-child(5){inset-inline-start:79%} .adv-obstacles i.is-passed { opacity:.18; transform:scale(.65); } .adv-chase-stage[data-state="expired"] { filter:saturate(.45); } .adv-focus-run > #adv-focus-status { min-height:20px; margin:0; padding:10px 28px 14px; color:#cfe2d8; font-size:13px; } /* بلاغ مالك حيّ — تباين معدوم تقريباً (≈1:1) في الثيم الفاتح فقط: .btn-outline يفرض color:var(--ink) الذي ينقلب أسود في الفاتح، فوق خلفيتَي .adv-hero (زرّ العرض الثابت/التفاعلي) و.adv-focus-run (زرّ الصوت) الغامقتين ثابتاً بلا صلة بالثيم. النصّ المحيط بهما بالفعل (color أعلاه: #FBF3EC/#f7fbf8) صحيحٌ ومتباينٌ بدرجة AAA (≈14-18:1 محسوبةً) — فقط أُورِث الزرّ إياه. */ .adv-hero .btn-outline, .adv-focus-run .btn-outline { color: inherit; border-color: currentColor; } .adv-hero .btn-outline:hover:not(:disabled), .adv-focus-run .btn-outline:hover:not(:disabled) { border-color: currentColor; background: color-mix(in srgb, currentColor 14%, transparent); } /* بلاغ مالك حيّ — «مطاردة الظل» تُظهر نفس عمود «البوابات» الذهبيّ المضيء (لا تنسيق خاصّ بها إطلاقاً، خلافاً للفوانيس أعلاه)، ووحش الظلّ (حصريّ للمطاردة وفق ADVENTURE-SYSTEM-MAP.md §40) يتسرّب باهتاً (opacity:.24) إلى وضع البوابات بدل أن يُخفى كما في الفوانيس. الإصلاح: عائقٌ داكن مميَّز فعلاً لوضع المطاردة (لا عمود ذهبيّ)، وإخفاء الوحش تماماً خارج المطاردة — لحظة «الكسر» نفسها في البوابات (السطر أعلاه) كانت مميَّزة أصلاً ولم تُمَسّ. */ .adv-chase-stage[data-mode="gates"] .adv-shadow-beast { display:none; } .adv-chase-stage[data-mode="chase"] .adv-obstacles i { border-color:#5b4a86; background:linear-gradient(180deg,#2c2140,#120c22); box-shadow:0 0 15px rgba(91,74,134,.55); } .adv-chase-stage[data-mode="chase"] .adv-obstacles i.is-passed { opacity:.15; transform:scale(.55) translateX(-6px); filter:blur(1px); } @keyframes advMist { to { background-position:240% 0; } } @keyframes advRun { from { transform:translateY(1px) rotate(-2deg); } to { transform:translateY(-7px) rotate(2deg); } } .adv-tasks-panel > h2 { font-size: clamp(26px, 3vw, 38px); } .adv-create { display: flex; align-items: end; gap: 12px; padding: 22px; background: var(--paper); border-radius: 12px; } .adv-create label { flex: 1; min-width: 220px; font-weight: 700; } .adv-create input, .adv-page select, .adv-page details input, .adv-page details select, .adv-share-page input { width: 100%; margin-top: 7px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); color: var(--ink); font: inherit; } .adv-tasks-panel > label { display: inline-flex; align-items: center; gap: 10px; margin-block: 20px 10px; font-weight: 700; } .adv-tasks-panel > label select { width: auto; margin: 0; } #adv-tasks { margin: 0; padding: 0; list-style: none; border-block-start: 1px solid var(--line); } .adv-task-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-block: 15px; border-block-end: 1px solid var(--line); } .adv-task-row > span { overflow-wrap: anywhere; } .adv-task-row .adv-task-title-wrap { display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; } .adv-task-row .adv-quest-tag { font-size: 11.5px; font-weight: 700; color: var(--brand-text); } .adv-page details { margin-block: 28px; padding: 20px 22px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; } .adv-page summary { cursor: pointer; font-size: 17px; font-weight: 800; } .adv-page details form, #adv-social form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 20px; } .adv-page details form > p, .adv-page details form > button, #adv-social form > button { grid-column: 1 / -1; } #adv-social { margin-block: 36px; padding: clamp(24px, 4vw, 40px); background: var(--paper); border-radius: 30px 10px 30px 10px; } #adv-social h2 { margin-top: 0; } #adv-link-label { display: block; margin-top: 18px; font-weight: 700; } .adv-share-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:9px; } .adv-avatar-picker { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:10px; padding:14px; border:1px solid var(--line); border-radius:12px; } .adv-avatar-picker legend { padding-inline:7px; font-weight:800; } .adv-avatar-picker label { display:flex; align-items:center; gap:7px; padding:8px 10px; border:1px solid var(--line); border-radius:10px; cursor:pointer; } .adv-avatar-swatch { width:24px; height:30px; border-radius:12px 12px 6px 6px; background:linear-gradient(145deg,#9d3957,#3f1022); } .adv-avatar-swatch.is-tide { background:linear-gradient(145deg,#3b91ad,#123c55); } .adv-avatar-swatch.is-grove { background:linear-gradient(145deg,#70a863,#234c35); } .adv-character-token { position:relative; width:27px; height:32px; border-radius:50% 50% 30% 30%; background:#263d34; } .adv-character-token::after { content:''; position:absolute; width:11px; height:11px; inset-inline-start:8px; top:6px; border-radius:50%; background:#f4df9a; box-shadow:0 0 8px #f4df9a; } .adv-character-token.is-scout { clip-path:polygon(50% 0,100% 30%,80% 100%,20% 100%,0 30%); background:#2d6f87; } .adv-character-token.is-sage { border-radius:5px 5px 45% 45%; background:#4e7d48; box-shadow:-8px 7px 0 -4px #b68a53; } .adv-motivation { display:grid; grid-template-columns:minmax(240px,.72fr) minmax(0,1.28fr); gap:28px; margin-block:42px 24px; padding:28px; background:linear-gradient(140deg,var(--paper),var(--white)); border:1px solid var(--line); border-radius:10px 28px 10px 28px; } .adv-motivation blockquote { min-height:76px; margin:8px 0 16px; font-size:clamp(20px,2.5vw,30px); font-weight:800; line-height:1.55; } .adv-motivation form { display:grid; gap:12px; } .adv-motivation textarea { width:100%; margin-top:6px; padding:11px; color:var(--ink); background:var(--white); border:1px solid var(--line); border-radius:9px; font:inherit; } .adv-motivation fieldset { display:flex; flex-wrap:wrap; gap:8px 14px; padding:12px; border:1px solid var(--line); border-radius:10px; } .adv-motivation legend { padding-inline:6px; font-weight:800; } .adv-motivation form > div { display:flex; flex-wrap:wrap; gap:8px; } .adv-achievement { width:min(760px,calc(100vw - 24px)); padding:0; overflow:visible; color:#fff; background:transparent; border:0; } .adv-achievement::backdrop { background:radial-gradient(circle,rgba(34,99,70,.72),rgba(3,13,9,.94)); backdrop-filter:blur(10px); } .adv-achievement-card { position:relative; z-index:2; padding:clamp(38px,8vw,82px); text-align:center; overflow:hidden; background:radial-gradient(circle at 50% 0,#2f7d59,#10271d 70%); border:1px solid rgba(244,223,154,.55); border-radius:38px 12px 38px 12px; box-shadow:0 40px 120px rgba(0,0,0,.55),inset 0 0 80px rgba(244,223,154,.08); animation:advAchievementIn .75s cubic-bezier(.16,1,.3,1); } .adv-achievement-card::before { content:''; position:absolute; inset:20px; border:1px solid rgba(244,223,154,.24); border-radius:28px 8px 28px 8px; pointer-events:none; } .adv-achievement-mark { display:grid; place-items:center; width:132px; aspect-ratio:1; margin:0 auto 25px; color:#173d32; background:radial-gradient(circle,#fff9d8,#f4c55f); border-radius:50%; font:900 30px/1 var(--font-num); box-shadow:0 0 0 12px rgba(244,223,154,.09),0 0 55px rgba(244,223,154,.5); animation:advAchievementMark 1s cubic-bezier(.16,1,.3,1); } .adv-achievement-card p { margin:0; color:#aee3c6; font-weight:800; } .adv-achievement-card h2 { margin:9px auto; max-width:18ch; font-size:clamp(28px,5vw,50px); line-height:1.25; } .adv-achievement-card > strong { color:#f4df9a; } .adv-achievement-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:9px; margin-top:30px; } .adv-achievement .btn-outline { color:#fff; border-color:rgba(255,255,255,.4); } .adv-confetti i { position:fixed; z-index:1; top:50%; left:50%; width:10px; height:22px; background:hsl(calc(var(--i)*31deg) 70% 65%); animation:advConfetti 1.5s cubic-bezier(.18,.8,.3,1) both; animation-delay:calc(var(--i)*-25ms); } @keyframes advAchievementIn { from { opacity:0; transform:scale(.68) translateY(50px); } } @keyframes advAchievementMark { 0% { transform:scale(0) rotate(-80deg); } 65% { transform:scale(1.16) rotate(6deg); } } @keyframes advConfetti { to { transform:translate(calc(cos(var(--i)*20deg)*46vw),calc(sin(var(--i)*20deg)*46vh)) rotate(720deg); opacity:0; } } #adv-social-list { margin-top: 30px; border-block-start: 1px solid var(--line); } #adv-social-list h3 { margin-top: 26px; } #adv-social-list p { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 10px; border-block-end: 1px solid var(--line); } .adv-ledger-note { margin-top: 44px; padding-top: 18px; border-block-start: 1px solid var(--line); color: var(--ash); font-size: 13px; } .adv-share-page { max-width: 780px; padding-block: 64px 90px; } .adv-share-page h1 { margin: 0 0 30px; font-size: clamp(36px, 5vw, 58px); } .adv-share-stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 24px; padding-block: 22px; border-block: 1px solid var(--line); } .adv-share-stats strong { color: var(--brand-text); font: 700 32px/1 var(--font-num); } .zt-final { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding-block: clamp(60px, 8vw, 96px); } .zt-final h2 { max-width: 18ch; margin: 0; font-size: clamp(28px, 4vw, 44px); line-height: 1.25; } .zt-final p { max-width: 58ch; color: var(--ash); line-height: 1.8; } .zt-final > div:last-child { display: flex; flex-wrap: wrap; gap: 10px; } /* الدليل والأسعار: كثافة تحريرية واضحة بلا صفوف بطاقات متطابقة. */ .guide-hero, .pricing-hero { padding-block: clamp(54px, 8vw, 88px); } .guide-hero > p, .pricing-hero > p:first-child { color: var(--brand-text); font-weight: 800; font-size: 13px; } .guide-hero h1, .pricing-hero h1 { max-width: 18ch; margin: 10px 0 16px; font-size: clamp(36px, 5vw, 62px); line-height: 1.18; } .guide-hero > span, .pricing-hero > p { display: block; max-width: 65ch; color: var(--ash); line-height: 1.85; } .guide-hero .zh-btn { margin-top: 24px; } .guide-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 56px; padding-block-end: 90px; } .guide-toc { position: sticky; top: 88px; align-self: start; display: grid; border-block-start: 1px solid var(--line); } .guide-toc a { padding: 12px 0; color: var(--ash); text-decoration: none; border-block-end: 1px solid var(--line); font-size: 13px; } .guide-toc a:hover { color: var(--brand-text); } .guide-toc a.active { color: var(--brand-text); font-weight: 800; border-block-end-color: var(--brand); } .guide-section { padding: 0 0 54px; scroll-margin-top: 90px; } .guide-section header { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 16px; } .guide-section header svg { width: 28px; height: 28px; color: var(--brand-text); } .guide-section h2 { margin: 0 0 8px; font-size: clamp(23px, 3vw, 31px); } .guide-section header p { margin: 0; color: var(--ash); line-height: 1.8; } .guide-section ol { margin: 22px 54px 0 0; padding-inline-start: 22px; line-height: 1.95; } [dir="ltr"] .guide-section ol { margin: 22px 0 0 54px; } .guide-section aside { margin: 18px 54px 0 0; padding: 14px 16px; border-inline-start: 3px solid var(--brand); background: var(--ivory); color: var(--ash); } [dir="ltr"] .guide-section aside { margin: 18px 0 0 54px; } .guide-faq { border-block-start: 1px solid var(--line); padding-top: 38px; } .guide-faq details { border-block-end: 1px solid var(--line); } .guide-faq summary { padding-block: 18px; font-weight: 700; cursor: pointer; } .guide-faq p { color: var(--ash); line-height: 1.8; } /* ── صفحات الأدلة العامة (/learn/*, /solutions/*, /tools/*) + شريط الأدلة في الرئيسية + مؤقت بومودورو ── */ .zt-learn { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 64px); align-items: center; padding-block: clamp(34px, 5vw, 58px); border-block-end: 1px solid var(--line); } .zt-learn h2 { margin: 0 0 8px; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.3; text-wrap: balance; } .zt-learn p { margin: 0; color: var(--ash); line-height: 1.8; } .zt-learn ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; } .zt-learn li a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink); font-size: 14px; font-weight: 700; text-decoration: none; } .zt-learn li a:hover { border-color: var(--brand); color: var(--brand-text); } .guide-learn { padding-block: 0 44px; } .guide-learn h2 { margin: 0 0 10px; font-size: clamp(22px, 2.6vw, 30px); text-wrap: balance; } .guide-learn p { max-width: 74ch; margin: 0; color: var(--ash); line-height: 1.95; } .guide-learn a { color: var(--brand-text); text-underline-offset: 3px; } .zl-hero { padding-block: clamp(34px, 6vw, 72px) clamp(28px, 4vw, 48px); background: radial-gradient(circle at 82% 10%, color-mix(in srgb, var(--brand) 11%, transparent) 0 20%, transparent 46%), var(--ivory); border-block-end: 1px solid var(--line); } .zl-hero-tool { padding-block: 22px 26px; } .zl-hero-tool h1 { font-size: clamp(28px, 3.6vw, 42px); } .zl-hero-tool .zl-lead { margin-top: 12px; font-size: 16px; line-height: 1.8; } .zl-hero-tool .zt-actions { margin-top: 16px; } .zl-hero-tool .zl-updated { margin-top: 12px; } .zl-hero-tool .zl-crumbs ol { margin-bottom: 12px; } .zl-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 22px; padding: 0; list-style: none; color: var(--ash); font-size: 13px; } .zl-crumbs li + li::before { content: '/'; margin-inline-end: 6px; } .zl-crumbs a { color: var(--ash); text-underline-offset: 3px; } .zl-hero h1 { max-width: 24ch; margin: 0; font-size: clamp(30px, 4.6vw, 54px); line-height: 1.2; text-wrap: balance; } [dir="rtl"] .zl-hero h1 { letter-spacing: 0; } .zl-lead { max-width: 66ch; margin: 20px 0 0; color: var(--ink-2); font-size: clamp(16px, 1.6vw, 19px); line-height: 1.95; } .zl-lead a, .zl-body a { color: var(--brand-text); text-underline-offset: 3px; } .zl-updated { margin: 22px 0 0; color: var(--ash); font-size: 13px; } .zl-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); padding-block: clamp(36px, 5vw, 64px) 90px; } .zl-toc { position: sticky; top: 88px; align-self: start; border-block-start: 1px solid var(--line); } .zl-toc > p { margin: 14px 0 6px; color: var(--brand-text); font-size: 12px; font-weight: 800; } .zl-toc ol { display: grid; margin: 0; padding: 0; list-style: none; } .zl-toc a { display: block; padding: 10px 0; border-block-end: 1px solid var(--line); color: var(--ash); font-size: 13px; line-height: 1.5; text-decoration: none; } .zl-toc a:hover { color: var(--brand-text); } .zl-body { max-width: 74ch; min-width: 0; } .zl-section { padding-block: 0 44px; scroll-margin-top: 90px; } .zl-section h2 { margin: 0 0 14px; font-size: clamp(22px, 2.8vw, 30px); line-height: 1.3; text-wrap: balance; } .zl-section p, .zl-section li { color: var(--ink); line-height: 1.95; } .zl-section p { margin: 0 0 14px; } .zl-section ul { display: grid; gap: 8px; margin: 12px 0 16px; padding-inline-start: 22px; } .zl-section code { padding: 1px 6px; border-radius: 6px; background: var(--paper); font-size: .92em; } .zl-table-wrap { margin: 18px 0; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--white); } .zl-table { width: 100%; border-collapse: collapse; font-size: 14px; } .zl-table th, .zl-table td { padding: 12px 14px; border-block-end: 1px solid var(--line); text-align: start; vertical-align: top; line-height: 1.7; } .zl-table th { background: var(--paper); font-weight: 800; white-space: nowrap; } .zl-table tr:last-child td { border-block-end: 0; } .zl-faq { border-block-start: 1px solid var(--line); padding-block-start: 34px; } .zl-qa { padding-block: 16px; border-block-start: 1px solid var(--line); } .zl-qa:first-of-type { border-block-start: 0; padding-block-start: 0; } .zl-qa h3 { margin: 0 0 6px; font-size: 17px; line-height: 1.6; } .zl-qa p { margin: 0; } .zl-closing { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-block: 8px 48px; padding: clamp(22px, 3vw, 34px); border-radius: 24px 8px 24px 8px; background: linear-gradient(145deg, #2b120a, #4a2414); color: #FBF3EC; } .zl-closing p { max-width: 44ch; margin: 0; font-size: clamp(17px, 2vw, 21px); font-weight: 700; line-height: 1.6; } .zl-closing .zh-btn-primary { background: #FCE4D2; color: #4a2414; } .zl-related h2 { margin: 0 0 14px; font-size: 18px; } .zl-related ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; } .zl-related a { display: block; height: 100%; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); color: var(--ink); font-weight: 700; text-decoration: none; } .zl-related a:hover { border-color: var(--brand); color: var(--brand-text); } .zl-timer { padding-block: clamp(24px, 4vw, 44px) 0; } .zl-timer-card { max-width: 560px; margin-inline: auto; padding: clamp(22px, 4vw, 36px); border: 1px solid var(--line); border-radius: 30px 10px 30px 10px; background: var(--white); box-shadow: 0 24px 70px -42px rgba(16,39,29,.56); text-align: center; } .zl-timer-mode { margin: 0; color: var(--brand-text); font-size: 15px; font-weight: 800; } .zl-timer-clock { margin: 8px 0 18px; font-size: clamp(56px, 14vw, 96px); font-weight: 700; line-height: 1; direction: ltr; font-variant-numeric: tabular-nums; } .zl-timer-bar { height: 8px; overflow: hidden; border-radius: 999px; background: var(--paper); } .zl-timer-bar i { display: block; width: 0; height: 100%; background: var(--brand); } .zl-timer-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-top: 22px; text-align: start; } .zl-timer-fields label { display: grid; gap: 6px; font-size: 13px; font-weight: 700; } .zl-timer-fields input { box-sizing: border-box; width: 100%; min-width: 0; min-height: 46px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--ivory); color: var(--ink); font: inherit; font-size: 18px; } .zl-timer-fields input[aria-invalid="true"] { border-color: var(--brand-text); box-shadow: 0 0 0 2px var(--brand-text); } .zl-timer-fields input:disabled { opacity: .7; } .zl-timer-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; } .zl-timer-actions .zh-btn { min-width: 130px; } .zl-timer-error { margin: 14px 0 0; color: var(--brand-text); font-size: 14px; font-weight: 700; } .zl-timer-error:empty { display: none; } .zl-timer-status { min-height: 1.5em; margin: 12px 0 0; color: var(--ink); font-weight: 700; } .zl-timer[data-state="running"] .zl-timer-card { border-color: var(--brand); } @media (max-width: 980px) { .zl-layout { grid-template-columns: 1fr; } .zl-toc { display: none; } .zt-learn { grid-template-columns: 1fr; } } @media (max-width: 640px) { .zl-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .zl-table, .zl-table tbody, .zl-table tr, .zl-table td { display: block; width: 100%; } .zl-table tr { padding: 10px 0; border-block-end: 1px solid var(--line); } .zl-table tr:last-child { border-block-end: 0; } .zl-table td { padding: 5px 14px; border: 0; } .zl-table td::before { content: attr(data-label); display: block; color: var(--brand-text); font-size: 12px; font-weight: 800; } .zl-timer-fields { grid-template-columns: minmax(0, 1fr); } .zl-closing { flex-direction: column; align-items: flex-start; } } .pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding-block-end: 36px; } .pricing-plan { position: relative; padding: clamp(26px, 4vw, 42px); background: var(--white); border: 1px solid var(--line); border-radius: 12px 30px 12px 30px; } .pricing-plan.is-featured { border-color: var(--brand); box-shadow: 0 24px 60px -45px rgba(16,39,29,.7); } /* شارة على مستوى البطاقة (مثال: "قريباً") — ابن مباشر من .pricing-plan لا من header، بلوحة اللون الموحّدة نفسها المستخدَمة في .zh-pill-brand/.zh-feature-badge (لا نمط جديد). */ .pricing-plan > span { display: inline-flex; align-items: center; margin-block: 14px 0; padding: 4px 12px; border-radius: 999px; background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand-text); font-size: 12px; font-weight: 800; } .pricing-plan h2 { margin: 10px 0; font-size: 28px; } .pricing-plan > p { color: var(--ash); line-height: 1.75; } .pricing-plan strong { display: block; margin-block: 24px; font: 700 34px/1.2 var(--font-body); font-variant-numeric: tabular-nums; } .pricing-plan strong small { color: var(--ash); font: 500 13px/1.2 var(--font-body); } /* سعر أصلي مشطوب + شارة خصم — الباقة الاحترافية فقط (النسبة محسوبة في pricing.ts من الرقمين). */ .pricing-price-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-block-start: 18px; } .pricing-old-price { color: var(--ash); font-size: 15px; font-weight: 600; text-decoration: line-through; text-decoration-thickness: 1px; font-variant-numeric: tabular-nums; } .pricing-discount-badge { font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand-text); white-space: nowrap; } .pricing-guarantee { margin: 10px 0 0; font-size: 12.5px; font-weight: 700; color: var(--brand-text); } .pricing-guarantee a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .pricing-plan ul { display: grid; gap: 12px; margin: 24px 0; padding: 20px 0 0; border-block-start: 1px solid var(--line); list-style: none; } .pricing-plan li { display: flex; align-items: flex-start; gap: 9px; } .pricing-plan li svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--brand-text); stroke-width: 2; } .pricing-actions { display: flex; flex-wrap: wrap; gap: 10px; } .pricing-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding-block: 30px; } .pricing-notes article { padding-block-start: 16px; border-block-start: 2px solid var(--line); } .pricing-notes h3 { margin: 0 0 7px; font-size: 16px; } .pricing-notes p { margin: 0; color: var(--ash); line-height: 1.7; font-size: 13px; } .zt-work-footer { display: flex; justify-content: space-between; gap: 24px; padding: 18px max(24px, calc((100vw - 1120px) / 2)); border-block-start: 1px solid var(--line); color: var(--ash); font-size: 12px; } .zt-work-footer nav { display: flex; flex-wrap: wrap; gap: 18px; } .zt-work-footer a { color: inherit; text-decoration: none; } @media (max-width: 980px) { .nav-links { gap: 14px; } .zt-hero-grid, .zt-capabilities, .zt-adventure-grid { grid-template-columns: 1fr; } .zt-hero-copy { max-width: 720px; } .zt-map { max-width: 680px; } .zt-capabilities header { position: static; } } @media (max-width: 768px) { .zt-hero { padding-block: 44px 60px; } .zt-hero h1 { font-size: clamp(37px, 11vw, 56px); } .zt-map { padding: 18px; border-radius: 22px 8px 22px 8px; } .zt-map-head { align-items: start; flex-direction: column; } .zt-map .zh-lens-switch { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); } .zt-map .zh-lens-tab { justify-content: center; padding-inline: 7px; } .zt-how header, .zt-steps, .zt-capability-list article, .guide-layout, .pricing-grid, .pricing-notes { grid-template-columns: 1fr; } .zt-how header { gap: 20px; } .zt-steps article { padding: 25px 0; border-inline-end: 0; border-block-end: 1px solid color-mix(in srgb, var(--ivory) 18%, transparent); } .zt-final { align-items: flex-start; flex-direction: column; } .guide-toc { position: static; grid-auto-flow: column; grid-auto-columns: minmax(160px, 1fr); overflow-x: auto; margin-bottom: 36px; } .guide-section ol, [dir="ltr"] .guide-section ol, .guide-section aside, [dir="ltr"] .guide-section aside { margin-inline: 0; } .zt-work-footer { flex-direction: column; padding-inline: 16px; } .adv-hero, .adv-progress-panel, .adv-page details form, #adv-social form { grid-template-columns: 1fr; } .adv-hero { gap:18px; padding:26px 20px; } .adv-hero > div:first-child p:not(.zt-kicker) { margin-bottom:0; } .adv-current-quest { grid-template-columns:1fr; } .adv-current-quest .btn { grid-column:1; grid-row:auto; width:100%; } #adv-badges { grid-template-columns: repeat(2,minmax(0,1fr)); } .adv-worlds { grid-template-columns:1fr; } .adv-focus-run > header,.adv-motivation { grid-template-columns:1fr; } .adv-chase-stage { min-height:390px; } .adv-chase-hud { align-items:flex-start; flex-direction:column; } .adv-chase-hud strong { font-size:26px; } .adv-chase-progress { inset-block-end:128px; } .adv-focus-actions { align-items:stretch; flex-direction:column; } .adv-runner,.adv-shadow-beast { inset-block-end:143px; } .adv-obstacles i { bottom:146px; } .adv-create { align-items: stretch; flex-direction: column; } .adv-create .btn { width: 100%; } .adv-progress-panel > *, .adv-page details form > *, #adv-social form > * { grid-column: 1; } } @media (max-width: 420px) { .zt-actions > *, .zt-final > div:last-child, .zt-final > div:last-child > * { width: 100%; } .zt-orbit b { inset-inline-end: 0; } #adv-badges { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .adv-stars circle, .adv-spark circle, .adv-grove circle, .adv-character-body, .adv-wave, .adv-route-map.is-step-celebrating .adv-character-body, .adv-route-map.is-chapter-celebrating, .adv-route-map.is-chapter-celebrating .adv-spark, .adv-market-lanterns circle, .adv-observatory-stars circle, .adv-constellation { animation: none; } #adv-character, .adv-route-progress, .adv-stops circle { transition:none; } .adv-chase-mist,.adv-chase-stage[data-state="running"] .adv-runner,.adv-achievement-card,.adv-achievement-mark,.adv-confetti i { animation:none; } } /* ── PWA install ──────────────────────────────────────────────────────── */ .zh-install-fab { position: fixed; inset-block-end: 20px; inset-inline-end: 20px; z-index: 60; display: none; align-items: center; gap: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.18); } .zh-install-fab.show { display: inline-flex; } body.zh-cookie-notice-visible .zh-install-fab { inset-block-end: 84px; } /* ── إشعار الكوكيز — بوّابة موافقة حقيقية (قياس زيّنها المركزي، GTM-NMBBVB2Z): كوكيز التحليلات اختيارية فعلياً الآن (Consent Mode v2 عبر public/analytics-init.js)، فالزرّان يُغيّران سلوكاً حقيقياً لا يُخفيان إشعاراً فقط — القرار يُكتب في كوكي zh_cookie_consent المشتركة عبر *.zayenha.com (عقد الهب المركزي، ZAYENHA_APP_SPEC_v2 §12.9.9/§38.1). */ .zh-cookie-notice { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 65; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); background: var(--card); color: var(--ink); border-block-start: 1px solid var(--line); box-shadow: 0 -4px 20px rgba(0,0,0,.12); } .zh-cookie-notice p { margin: 0; font-size: 13.5px; line-height: 1.6; max-width: 62ch; } .zh-cookie-notice a { text-decoration: underline; font-weight: 600; } .zh-cookie-notice[hidden] { display: none; } .zh-cookie-notice-actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; flex-shrink: 0; } @media (max-width: 560px) { .zh-cookie-notice { justify-content: stretch; text-align: center; } .zh-cookie-notice p { max-width: none; } .zh-cookie-notice-actions { justify-content: center; width: 100%; } } /* ── طباعة (M7 §H — كانت غائبة كلياً): نصّ داكن على أبيض دائماً، بصرف النظر عن الثيم الحيّ — وإلّا طبع الثيم الداكن أبيض-على-أبيض غير مقروء تماماً. تُخفى عناصر التنقّل/الإجراءات التي لا معنى لها على ورق. */ @media print { body { background: #fff !important; color: #000 !important; } header, footer, .zh-install-fab, .zh-cookie-notice, #toast, [data-hamburger], .zh-hb-menu, #zh-float-install, .zh-skip-link, .zh-bottom-nav, button:not(.zh-print-keep) { display: none !important; } main { margin: 0 !important; } a[href]:after { content: " (" attr(href) ")"; font-size: 0.85em; color: #444; } * { box-shadow: none !important; text-shadow: none !important; } }