/* ========================================= text.css نظام النصوص والطباعة لنادي الفرسان ========================================= */ /* نستخدم ألوان النص المكملة للألوان الأساسية */ :root { --color-on-main: #f5f7f8; /* نص فوق الأخضر */ --color-on-light: #0f6b63; /* نص فوق الخلفيات الفاتحة */ } /* ----------------------------------------- 1) الأساس (Body + اتجاه النص) ----------------------------------------- */ body { font-family: "Cairo", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #222; line-height: 1.7; } /* اتجاه عام حسب الـ dir في */ html[dir="rtl"] body { direction: rtl; } html[dir="ltr"] body { direction: ltr; } /* إخفاء النسخة غير المختارة من النص حسب اللغة */ body.lang-ar .lang-en { display: none !important; } body.lang-en .lang-ar { display: none !important; } /* ----------------------------------------- 2) عناوين وفقرات عامة ----------------------------------------- */ h1, h2, h3, h4, h5, h6 { margin: 0 0 0.6em; font-weight: 700; line-height: 1.3; color: var(--color-dark); } p { margin: 0 0 0.8em; } /* ----------------------------------------- 3) عناوين الأقسام (Section Titles) ----------------------------------------- */ .section-title { margin-bottom: 32px; } .section-title h2 { margin: 0; font-size: 28px; font-weight: 700; } .section-tag { font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-muted); } /* ----------------------------------------- 4) كتل النص العامة ----------------------------------------- */ .text-block h2 { font-size: 24px; margin-bottom: 16px; } .text-block p { line-height: 1.9; margin: 0 0 8px; font-size: 15px; } /* ----------------------------------------- 5) القوائم (الأهداف) ----------------------------------------- */ .goals-list { list-style: none; padding: 0; margin: 0; } .goals-list li { position: relative; padding-inline-start: 20px; margin-bottom: 10px; font-size: 15px; } .goals-list li::before { content: ""; position: absolute; top: 9px; inset-inline-start: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--color-main); } /* ----------------------------------------- 6) نصوص قسم الفريق ----------------------------------------- */ .team-number { font-size: 32px; font-weight: 700; color: var(--color-main-dark); } .team-label { font-size: 13px; color: var(--color-muted); } .team-title { margin-top: 6px; font-size: 15px; font-weight: 600; } /* ----------------------------------------- 7) نصوص الاقتباس ----------------------------------------- */ .quote-card h2 { margin: 0; font-size: 30px; } /* ----------------------------------------- 8) نصوص التذييل ----------------------------------------- */ /* الخلفية تبقى في style.css – هنا فقط اللون */ .section-footer { color: #d7dde2; } .footer-links { font-size: 13px; } /* ----------------------------------------- 9) أدوات ألوان النص ----------------------------------------- */ /* نص فوق الخلفية الخضراء */ .text-on-main { color: var(--color-on-main); } /* نص فوق الخلفية الفاتحة (رمادي / أبيض) */ .text-on-light { color: var(--color-on-light); } /* نص هادئ */ .text-muted { color: var(--color-muted); } /* ----------------------------------------- 10) أدوات المحاذاة ----------------------------------------- */ .text-center { text-align: center; } html[dir="rtl"] .text-start { text-align: right; } html[dir="ltr"] .text-start { text-align: left; } html[dir="rtl"] .text-end { text-align: left; } html[dir="ltr"] .text-end { text-align: right; } /* ----------------------------------------- 11) أحجام خط إضافية ----------------------------------------- */ .text-sm { font-size: 13px; } .text-md { font-size: 15px; } /* نفس الافتراضي تقريباً */ .text-lg { font-size: 20px; } .text-xl { font-size: 28px; } .text-xxl { font-size: 38px; } /* ----------------------------------------- 12) أوزان الخط (Utilities) ----------------------------------------- */ .fw-300 { font-weight: 300; } .fw-400 { font-weight: 400; } .fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; } .fw-800 { font-weight: 800; } /* ----------------------------------------- 13) Kicker / Label صغيرة أعلى العناوين ----------------------------------------- */ .text-kicker { font-size: 14px; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.8; } .text-label { font-size: 13px; letter-spacing: 0.08em; opacity: 0.85; } /* ----------------------------------------- 14) شارات النص (Text Chips) ----------------------------------------- */ .text-chip { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: 0.03em; white-space: nowrap; } /* خلفية فاتحة */ .text-chip--light { background-color: var(--color-light); color: var(--color-on-light); border: 1px solid rgba(0, 0, 0, 0.06); } /* خلفية داكنة */ .text-chip--dark { background-color: var(--color-dark); color: #f5f7f8; } /* أخضر أساسي */ .text-chip--main { background-color: var(--color-main); color: var(--color-on-main); } /* إطار فقط */ .text-chip--outline { background-color: transparent; border: 1px solid var(--color-main); color: var(--color-main); } /* ----------------------------------------- 15) line-height و letter-spacing ----------------------------------------- */ .lh-1 { line-height: 1; } .lh-13 { line-height: 1.3; } .lh-15 { line-height: 1.5; } .lh-18 { line-height: 1.8; } .ls-1 { letter-spacing: 0.05em; } .ls-2 { letter-spacing: 0.15em; } .ls-3 { letter-spacing: 0.25em; }