/* ========================================================================== Samer Choucair — Arabic typography stylesheet خطوط عربية (Tajawal + Bahij Janna) + ضبط تنسيق النص العربي / RTL. يُحمّل بعد style.css فيتجاوز خطوط Montserrat/Poppris للحروف العربية فقط. الحروف اللاتينية والأرقام تبقى Montserrat؛ العربية تُرسم بخط عربي مضبوط. ========================================================================== */ /* ----- تعريف الخطوط (Font faces) — مسارات نسبية من assets/css/ ----- */ @font-face { font-family: 'Tajawal'; src: url('../fonts/tajawal/Tajawal-Regular.woff2') format('woff2'), url('../fonts/tajawal/Tajawal-Regular.woff') format('woff'), url('../fonts/tajawal/Tajawal-Regular.ttf') format('truetype'); font-weight: 400 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Bahij Janna'; src: url('../fonts/bahij/BahijJanna.woff2') format('woff2'), url('../fonts/bahij/BahijJanna.woff') format('woff'), url('../fonts/bahij/BahijJanna.ttf') format('truetype'); font-weight: 400 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Bahij Janna'; src: url('../fonts/bahij/BahijJanna-Bold.woff2') format('woff2'), url('../fonts/bahij/BahijJanna-Bold.woff') format('woff'), url('../fonts/bahij/BahijJanna-Bold.ttf') format('truetype'); font-weight: 700 900; font-style: normal; font-display: swap; } /* ----- الأساس: كل النصوص ----- */ /* Montserrat أولًا للاتيني/الأرقام، ثم Tajawal للحروف العربية عبر آلية الـ fallback */ body, button, input, select, textarea, p, a, li, span, div, label, blockquote, figcaption, dd, dt, th, td { font-family: 'Montserrat', 'Tajawal', sans-serif; } /* راحة أكبر لقراءة العربي */ body { line-height: 1.85; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* العربي لا يحتاج تباعد حروف؛ تصفيره يمنع تشقق الكلمات */ p, li, a, span, .primary-menu a, .btn-gold, .btn-outline-gold, .site-button { letter-spacing: 0; } /* ----- العناوين: خط Bahij Janna (عرض/ثقيل) ----- */ h1, h2, h3, h4, h5, h6, .section-heading, .home-intro__title, .home-why__title, .about-story__title, .about-story__subtitle, .media-section__title, .media-card__title, .pages-intro__title, .wwd-card__title, .client-card__title, .contact-info__title, .contact-form-section__title, .vmv-box__title, .ins-single__title, .ins-featured__title, .ins-card__title, .ins-item__title, .ins-flex__title, .site-footer__title { font-family: 'Bahij Janna', 'Montserrat', sans-serif; line-height: 1.5; letter-spacing: 0; } /* الأرقام العدّادية والزخارف الرقمية تبقى Poppins (أرقام لاتينية) */ .step__num, .step__label span, .impact-stat__num, .journey__num { font-family: 'Poppins', sans-serif; } /* ----- ضبط اتجاه RTL (الموقع dir=ltr على ) ----- نُبقي المحاذاة كما صُمّمت (كثير من العناوين متمركزة عن قصد)، ونضبط الاتجاه فقط حيث يلزم فعلًا: متن المقالات وحقول النماذج. unicode-bidi: plaintext يضمن موضع علامات الترقيم الصحيح دون تغيير المحاذاة. */ .entry-content, .ins-single__title, .ins-single .entry-content p, .ins-single .entry-content li { direction: rtl; unicode-bidi: plaintext; text-align: right; } /* حقول نماذج الاتصال */ input[type="text"], input[type="email"], input[type="tel"], input[type="search"], textarea, select { direction: rtl; text-align: right; } input::placeholder, textarea::placeholder { text-align: right; } /* ========================================================================== إصلاحات تخطيط RTL (الموقع مبني LTR بخصائص فيزيائية) — تطبّق على النسخة العربية ========================================================================== */ /* ----- قسم "عن سامر": الخلفية النازفة تعكس اتجاهها في العربي ----- */ @media (min-width: 992px) { [dir="rtl"] .about-box--left { margin-left: 0; margin-right: calc(50% - 50vw); padding-left: 32px; padding-right: calc(50vw - 50% + 32px); border-radius: 12px 0 0 12px; } [dir="rtl"] .about-box--right { margin-right: 0; margin-left: calc(50% - 50vw); padding-right: 32px; padding-left: calc(50vw - 50% + 32px); border-radius: 0 12px 12px 0; } } /* ----- قسم الإنترو (الهيرو): تعكس خلفية الصورة للجهة المقابلة في العربي ----- */ [dir="rtl"] .home-intro { background-position: left center; } /* ----- قسم الخطوات: الخط الواصل بين النقاط ينمو من اليمين ----- */ [dir="rtl"] .step:not(:last-child) .step__marker::after { left: auto; right: 50%; transform-origin: right center; } /* نفس المعالجة لمخطّط الرحلة (about-journey) إن وُجد أفقيًا */ [dir="rtl"] .journey-step:not(:last-child) .journey-step__marker::after { left: auto; right: 50%; transform-origin: right center; } /* ----- قسم الرؤية/الرسالة/القيم: قائمة القيم تُحاذى يمين والنقطة على اليمين ----- */ [dir="rtl"] .vmv-values-list { text-align: right; } [dir="rtl"] .vmv-values-list li { padding-left: 0; padding-right: 20px; } [dir="rtl"] .vmv-values-list li::before { left: auto; right: 4px; } /* ----- الفوتر: محاذاة يمين بدل يسار في العربي ----- */ [dir="rtl"] .site-footer__top, [dir="rtl"] .site-footer__top > [class*='col'], [dir="rtl"] .site-footer__about, [dir="rtl"] .site-footer__title, [dir="rtl"] .site-footer__menu, [dir="rtl"] .site-footer__menu a, [dir="rtl"] .site-footer__newsletter, [dir="rtl"] .site-footer__bottom, [dir="rtl"] .site-footer__copyright { text-align: right; } /* اللوجو والنبذة يلتزمان جهة اليمين */ [dir="rtl"] .site-footer__about { margin-left: auto; margin-right: 0; } /* النشرة البريدية: الحقول والنص جهة اليمين */ [dir="rtl"] .site-footer__newsletter input[type="email"], [dir="rtl"] .site-footer__newsletter input[type="text"], [dir="rtl"] .site-footer__newsletter .tnp, [dir="rtl"] .site-footer__newsletter .tnp-field { direction: rtl; text-align: right; }