/* ===== هوية سكويرز الرسمية (SKUARES · Service as a product) ===== كل لون هنا مقروء من ملف الشعار نفسه لا مُختار بالذوق. عيّنة الألوان المأخوذة من brand/src/mark-master.png أعطت عائلتين لا ثالث لهما: • البرتقالي: #F06828 (الطرف الغامق) ← #F08820 (القلب) ← #F8B018 (العنبري) • البنفسجي: #7020A0 ← #9828C8 ولذلك: --primary = #F08820 حرفيًا لون قلب الشعار --primary-light = #F8B018 حرفيًا طرفه العنبري --grad = مسار البرتقالي في الشعار نفسه بثلاث محطات --grad-accent = مسار البنفسجي في الشعار نفسه --deep = بنفسجي الهوية الغامق — بديل البنّي القديم الذي لم يكن منها الدرجات المشتقّة (ink / 050 / line) هي اللون نفسه بإضاءة مختلفة، وكل درجة نصّية فُحصت تباينًا: أدنى نسبة هنا ٦٫٦:١ وحدّ WCAG AA هو ٤٫٥:١. */ :root{ --primary:#F08820; --primary-dark:#D97612; --primary-light:#F8B018; --primary-ink:#8F4A05; /* برتقالي الهوية عند إضاءة ٢٩٪ — للنصوص على خلفية فاتحة */ --primary-050:#FEF3E4; --primary-line:#F7D3A6; --accent:#7B1FA2; --accent-ink:#5D1780; --accent-050:#F5EAFA; --bg:#F5F5F7; --card:#FFFFFF; --text:#1A1A2E; --text2:#5F6875; /* الأخضر والأحمر دلاليّان لا هوية: «تم» و«خطأ» يفهمهما الناس من اللون قبل النص. صبغهما ببرتقالي الهوية يجعل الشاشة أجمل وأقلّ وضوحًا — والوضوح أولى. */ --success:#27AE60; --success-ink:#1B7A43; --success-050:#E8F7EE; --danger:#E74C3C; --danger-ink:#B02A1B; --danger-050:#FDECEC; --star:#FFD700; --line:#E5E5EA; --on-primary:#2A0A33; --deep:#5D1780; --deep-2:#33094D; --grad:linear-gradient(135deg,#F06828,#F08820,#F8B018); --grad-accent:linear-gradient(135deg,#7020A0,#9828C8); --grad-deep:linear-gradient(150deg,var(--deep),var(--deep-2)); /* شريط الهوية كاملًا: بنفسجي ← برتقالي ← عنبري، بترتيب الشعار نفسه */ --grad-brand:linear-gradient(120deg,#7020A0,#9828C8,#F06828,#F08820,#F8B018); /* رمادياتٌ كانت مكتوبةً صراحةً في ملفات أخرى (#E8E8EC، #CFCFD6…)، فلم تكن تقلب مع الوضع الداكن. صارت رموزًا لها قيمةٌ في الحالتين. */ --line-strong:#CFCFD6; --line-soft:#EFEFF3; --success-line:#BFE6CE; --accent-line:#DAD4FB; --tint-warm:#FFEEDA; --tint-danger:#F5C4BE; /* 🔴 ثابتان عمدًا: نصٌّ فوق سطحٍ أبيضَ لا يقلب (الأزرار على شريط الهوية). لو تبعا الوضع لصارا فاتحَين على أبيض — ولا يكشف ذلك فحصُ الرموز، لأن كلّ رمزٍ سليمٌ وحده والعطل في اقترانهما. */ --on-white:#8F4A05; --on-white-accent:#5D1780; /* رقاقةٌ مصمتة بلون الهوية: الأرض والحبر يقلبان معًا، وإلا صار أبيضُ على بنفسجيٍّ فاتح (٢٫٣:١). رموز «الحبر» للنصّ لا للأرض. */ --chip-accent-bg:#5D1780; --chip-accent-fg:#FFFFFF; --chip-success-bg:#1B7A43; --chip-success-fg:#FFFFFF; --chip-danger-bg:#B02A1B; --chip-danger-fg:#FFFFFF; --on-white-050:#FEF3E4; --on-white-accent-050:#F5EAFA; /* ألوان رسم الخدمات — رموزٌ لا قيم، فتقلب مع الوضع الداكن. جسمٌ ترابيّ غامق يختفي على أرضٍ داكنة، واللمعةُ البيضاء تصير بقعةً ساطعة. وكلّها مقيسة على أرض البطاقة: أدنى نسبة ٣٫٤:١ (رسمٌ لا نصّ). */ --i-body:#5A4632; --i-soil:#8B6F4F; --i-leaf:#3E9B5F; --i-leaf-2:#2E7D4F; --i-accent:#F08820; --i-water:#3AA0D8; --i-water-2:#7FC6EA; --i-shine:#FFFFFF; --radius:16px; --shadow:0 1px 2px rgba(26,26,46,.04), 0 8px 24px rgba(26,26,46,.06); --shadow-lg:0 2px 4px rgba(26,26,46,.05), 0 18px 48px rgba(240,136,32,.18); } /* ═══════════════════════════════════════════════════════════════════════════ الوضع الداكن ═══════════════════════════════════════════════════════════════════════════ ثلاث حالاتٍ لا اثنتان، وهذا ما يُسقط أكثر تنفيذات الوضع الداكن: • اختيارٌ صريح → data-theme="dark" أو "light" على • «اتبع النظام» → **لا سمة إطلاقًا**، ويحسم prefers-color-scheme وحده والافتراض هو الثالثة. فالكتابة تحت `@media` وحدها تترك من اختار الفاتح على نظامٍ داكن يقرأ نصًّا فاتحًا على أرضٍ فاتحة — ولذلك الوسيط مشروطٌ بـ :not([data-theme="light"]) ليخسر أمام الاختيار الصريح. 🔴 والقاعدة التي لا تُخرق: **لا لونَ يُعرَّف داخل كتلة داكنة وحدها.** كل رمزٍ هنا له قيمةٌ في :root الفاتح أعلاه، وهذه الكتلة تُعيد تعريفه لا تخترعه. الرمز الذي يُولد هنا يبقى غير معرَّفٍ في الحالة الافتراضية — أي في أكثر الحالات شيوعًا. والأرض ليست رماديًّا محايدًا: فيها ميلٌ بنفسجيّ خفيف نحو #7B1FA2 من الهوية، فتبدو الشاشة من عائلة العلامة لا من قالبٍ جاهز. ⚠️ وكل درجة نصّية هنا مقيسة لا مُختارة: أدنى نسبة ٧٫٣:١ وحدّ WCAG AA هو ٤٫٥:١. يحرس ذلك verify/test-theme.mjs — يحسب النِّسب ويرسب دونها. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#101018; --card:#1A1A24; --text:#F2F2F7; --text2:#A8A8BA; --line:#2E2E3C; /* البرتقالي يُرفع إضاءةً قليلًا: #F08820 على أرضٍ داكنة يفقد حيويّته. */ --primary:#F79A3C; --primary-dark:#E9862A; --primary-light:#FFC163; --primary-ink:#FFB454; /* الحبر يقلب اتجاهه: فاتحٌ على داكن */ --primary-050:#2B1D0E; --primary-line:#4A3316; --accent:#B968DE; --accent-ink:#CF93EA; --accent-050:#241333; --success:#3DD07E; --success-ink:#5FE09A; --success-050:#0F2E1D; --danger:#F2685C; --danger-ink:#FF8A80; --danger-050:#331512; --star:#FFD700; /* على البرتقالي يبقى النصّ غامقًا في الوضعين: الزرّ نفسه لا يقلب. */ --on-primary:#2A0A33; --deep:#2A0E3D; --deep-2:#1A0826; /* الظلّ على أرضٍ داكنة لا يُرى — الفصل يصير بحدٍّ لا بظلّ. */ --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.42); --shadow-lg:0 2px 4px rgba(0,0,0,.55), 0 18px 48px rgba(0,0,0,.5); /* رمادياتٌ كانت مكتوبةً صراحةً في الملفات الأخرى، فلم تكن تقلب. */ --on-white:#8F4A05; --on-white-accent:#5D1780; --chip-accent-bg:#CF93EA; --chip-accent-fg:#14061A; --chip-success-bg:#5FE09A; --chip-success-fg:#04140B; --chip-danger-bg:#FF8A80; --chip-danger-fg:#1A0503; --on-white-050:#FEF3E4; --on-white-accent-050:#F5EAFA; /* الرسم يقلب: الجسم يفتح ليُرى على الداكن، واللمعة تصير بلون الأرض فتقرأ قطعًا لا بقعةً ساطعة. */ --i-body:#C9B79E; --i-soil:#8D7457; --i-leaf:#5FCF87; --i-leaf-2:#46B36B; --i-accent:#F79A3C; --i-water:#5CB8E8; --i-water-2:#9BD6F2; --i-shine:#1A1A24; --line-strong:#3C3C4E; --line-soft:#262633; --success-line:#1E5A38; --accent-line:#432560; --tint-warm:#2B1D0E; --tint-danger:#3A1A16; } } :root[data-theme="dark"] { --bg:#101018; --card:#1A1A24; --text:#F2F2F7; --text2:#A8A8BA; --line:#2E2E3C; /* البرتقالي يُرفع إضاءةً قليلًا: #F08820 على أرضٍ داكنة يفقد حيويّته. */ --primary:#F79A3C; --primary-dark:#E9862A; --primary-light:#FFC163; --primary-ink:#FFB454; /* الحبر يقلب اتجاهه: فاتحٌ على داكن */ --primary-050:#2B1D0E; --primary-line:#4A3316; --accent:#B968DE; --accent-ink:#CF93EA; --accent-050:#241333; --success:#3DD07E; --success-ink:#5FE09A; --success-050:#0F2E1D; --danger:#F2685C; --danger-ink:#FF8A80; --danger-050:#331512; --star:#FFD700; /* على البرتقالي يبقى النصّ غامقًا في الوضعين: الزرّ نفسه لا يقلب. */ --on-primary:#2A0A33; --deep:#2A0E3D; --deep-2:#1A0826; /* الظلّ على أرضٍ داكنة لا يُرى — الفصل يصير بحدٍّ لا بظلّ. */ --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.42); --shadow-lg:0 2px 4px rgba(0,0,0,.55), 0 18px 48px rgba(0,0,0,.5); /* رمادياتٌ كانت مكتوبةً صراحةً في الملفات الأخرى، فلم تكن تقلب. */ --on-white:#8F4A05; --on-white-accent:#5D1780; --chip-accent-bg:#CF93EA; --chip-accent-fg:#14061A; --chip-success-bg:#5FE09A; --chip-success-fg:#04140B; --chip-danger-bg:#FF8A80; --chip-danger-fg:#1A0503; --on-white-050:#FEF3E4; --on-white-accent-050:#F5EAFA; /* الرسم يقلب: الجسم يفتح ليُرى على الداكن، واللمعة تصير بلون الأرض فتقرأ قطعًا لا بقعةً ساطعة. */ --i-body:#C9B79E; --i-soil:#8D7457; --i-leaf:#5FCF87; --i-leaf-2:#46B36B; --i-accent:#F79A3C; --i-water:#5CB8E8; --i-water-2:#9BD6F2; --i-shine:#1A1A24; --line-strong:#3C3C4E; --line-soft:#262633; --success-line:#1E5A38; --accent-line:#432560; --tint-warm:#2B1D0E; --tint-danger:#3A1A16; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ font-family:"Tajawal",-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,sans-serif; color:var(--text); background:var(--card); line-height:1.75; -webkit-font-smoothing:antialiased; overflow-x:hidden; min-height:100vh; display:flex; flex-direction:column; } main{flex:1} .wrap{max-width:1120px;margin:0 auto;padding:0 20px;width:100%} a{color:inherit;text-decoration:none} img{max-width:100%} :focus-visible{outline:3px solid var(--primary-ink);outline-offset:2px;border-radius:6px} .col.good :focus-visible,.cta-band :focus-visible,.deep-panel :focus-visible{outline-color:#fff} /* ⚠️ ٨٨px كانت تعني ١٧٦px بين كل قسمين — فراغٌ يجعل الصفحة أطول ممّا فيها، ويُشعر القارئ أنه يمرّر في لا شيء. ٦٤ يُبقي الفصل واضحًا ويقصّر الصفحة الرئيسية نحو ٢٠٪. (ملاحظة مراجعة ٢٩ أغسطس ٢٠٢٦: «الموقع فيه مساحات كثيرة».) */ section{padding:64px 0} h1,h2,h3{line-height:1.3;font-weight:800;letter-spacing:-.01em} h2{font-size:clamp(1.6rem,3.4vw,2.35rem)} .eyebrow{ display:inline-block;font-size:.82rem;font-weight:700;color:var(--primary-ink); background:var(--primary-050);padding:6px 14px;border-radius:999px;margin-bottom:16px } .lead{color:var(--text2);font-size:1.05rem;max-width:56ch} .center{text-align:center} .center .lead{margin-inline:auto} .tint{background:var(--bg);border-block:1px solid var(--line)} /* روابط التخطي لقارئات الشاشة ولوحة المفاتيح */ .skip-link{ position:absolute;right:-9999px;top:8px;z-index:200;background:var(--card); color:var(--primary-ink);padding:10px 18px;border-radius:10px;font-weight:700; border:1px solid var(--line) } .skip-link:focus{right:16px} .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0 } /* حقل ملفات مخفيّ بصريًّا لكنه مرسوم فعلًا. لا display:none ولا سمة hidden: بعض إصدارات سفاري تتجاهل النقر البرمجي على حقل ملفات بلا صندوق، فلا تُفتح الكاميرا ولا يظهر خطأ. */ .file-offscreen{ position:fixed;bottom:0;left:0;width:1px;height:1px; opacity:0;pointer-events:none;border:0;padding:0;margin:0 } /* ----- الأزرار (نفس صفحة الهبوط) ----- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:13px 26px;border-radius:12px;font-weight:700;font-size:.97rem; border:1px solid transparent;cursor:pointer;transition:.18s ease;font-family:inherit; text-align:center } .btn:disabled{opacity:.55;cursor:not-allowed} .btn-primary{background:var(--grad);color:var(--on-primary)} .btn-primary:hover:not(:disabled){background:linear-gradient(135deg,var(--primary-dark),var(--primary));transform:translateY(-1px);box-shadow:var(--shadow)} .btn-ghost{background:var(--card);color:var(--primary-ink);border-color:var(--line)} .btn-ghost:hover:not(:disabled){border-color:var(--primary-light);background:var(--primary-050)} .btn-quiet{background:var(--bg);color:var(--text);border-color:var(--line)} .btn-quiet:hover:not(:disabled){background:#ECECF1} .btn-danger{background:var(--danger-050);color:var(--danger-ink);border-color:#F5C4BE} .btn-danger:hover:not(:disabled){background:#FBDBD7} /* ⚠️ سطحٌ ثابت: أبيضُ فوق شريط الهوية في الوضعين. فنصّه من رمزٍ ثابت لا من --primary-ink الذي يقلب فاتحًا في الداكن (١٫٧٦:١ على أبيض). */ .btn-white{background:#fff;color:var(--on-white)} .btn-white:hover{background:var(--on-white-050)} .btn-outline-w{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)} .btn-outline-w:hover{background:rgba(255,255,255,.1)} .btn-sm{padding:10px 20px;font-size:.9rem} .btn-block{width:100%} /* ===== علامة سكويرز في الترويسة ===== أصل الهوية الرسمية صورة نقطية عالية الدقة (brand/mark.png) لا رسمًا متجهًا. تُعرض بضعف مقاسها المطلوب فتبقى حادّة على الشاشات عالية الكثافة. ⚠️ لا border-radius ولا خلفية ولا overflow:hidden — العلامة شكل سداسي له أطراف، وأي قصّ مربّع يبترها. */ .logo-mark{ display:inline-flex;align-items:center;flex:0 0 auto;line-height:0 } .logo-mark .logo-img{ width:auto;height:34px;display:block } .logo{display:inline-flex;align-items:center;gap:11px;font-weight:800}