/* * global_responsive_fonts.css — نظام الخطوط المتجاوب العالمي لمنصة آفاق * يُضمَّن في كل صفحة لضمان توحيد أحجام الخطوط عبر جميع الأجهزة * CRITICAL: يجب تضمين هذا الملف في كل صفحة PHP في المشروع */ /* ── تحميل نظام التخطيط المتجاوب العالمي (للصفحات التي لا تُضمِّن rtl_global.css) ── */ @import url('global_layout.css'); /* ══════════════════════════════════════════════════════════════ FLUID TYPOGRAPHY SYSTEM — نظام الخطوط المتجاوب السلس استخدام clamp() للتدرج التلقائي بين الأحجام ══════════════════════════════════════════════════════════════ */ /* Base body font — يتدرج تلقائياً مع حجم الشاشة */ body { font-size: 15px; /* Fallback for browsers without clamp() */ font-size: clamp(15px, 2.2vw, 18px); line-height: 1.6; } /* Headings — تتدرج بشكل سلس من الموبايل للديسكتوب */ h1, .h1 { font-size: 1.5rem; /* Fallback */ font-size: clamp(1.5rem, 4vw, 2.5rem); line-height: 1.2; } h2, .h2 { font-size: 1.35rem; /* Fallback */ font-size: clamp(1.35rem, 3.5vw, 2.2rem); line-height: 1.25; } h3, .h3 { font-size: 1.2rem; /* Fallback */ font-size: clamp(1.2rem, 3vw, 1.8rem); line-height: 1.3; } h4, .h4 { font-size: 1.1rem; /* Fallback */ font-size: clamp(1.1rem, 2.5vw, 1.5rem); line-height: 1.35; } h5, .h5 { font-size: 1rem; /* Fallback */ font-size: clamp(1rem, 2vw, 1.25rem); line-height: 1.4; } h6, .h6 { font-size: 0.95rem; /* Fallback */ font-size: clamp(0.95rem, 1.8vw, 1.1rem); line-height: 1.45; } /* Body text elements inherit from body */ p, span, div, a, li, td, th, label { font-size: inherit; line-height: inherit; } /* Form inputs — responsive sizing */ input, select, textarea, button { font-size: 0.875rem; /* Fallback */ font-size: clamp(0.875rem, 2vw, 1rem); line-height: 1.5; } /* ══════════════════════════════════════════════════════════════ LEGACY BREAKPOINT OVERRIDES (for specific adjustments) ══════════════════════════════════════════════════════════════ */ @media (max-width: 767px) { /* Mobile-specific adjustments if needed */ input, select, textarea, button { font-size: 15px; /* Prevent iOS zoom on focus */ } } @media (min-width: 768px) and (max-width: 1023px) { /* Tablet-specific adjustments if needed */ } @media (min-width: 1024px) { /* Desktop-specific adjustments if needed */ } /* ══════════════════════════════════════════════════════════════ LOGO & IMAGE RESPONSIVE FIXES ══════════════════════════════════════════════════════════════ */ /* Logo في الهيدر - شفاف ومتمركز على الموبايل */ .nav-brand-img, .profile-pic, .hero-logo-wrap img, .logo-box img { background: transparent !important; mix-blend-mode: multiply; -webkit-object-fit: contain !important; object-fit: contain !important; } /* لوجو الحجز الدائري — يملأ الدائرة بالكامل */ .logo { -webkit-object-fit: cover !important; object-fit: cover !important; -webkit-object-position: center !important; object-position: center !important; mix-blend-mode: normal !important; } /* ══════════════════════════════════════════════════════════════ BOOKING PORTAL — DESKTOP CENTERING (≥ 1024px) البطاقة تبقى ضيقة ومركزية كما في Calendly/Booking.com ══════════════════════════════════════════════════════════════ */ @media (min-width: 1024px) { /* الكارت: أقصى عرض 560px مركزي */ .card { max-width: 560px !important; width: 100% !important; margin: 0 auto !important; padding: 2rem 2.5rem !important; border-radius: 1.5rem !important; } /* اللوجو */ .logo-img { width: 130px !important; height: 130px !important; } .logo-fallback { width: 130px !important; height: 130px !important; } .logo-fallback span { font-size: 2.5rem !important; } .logo-wrap { margin-bottom: 1.25rem !important; } /* العناوين */ .title-wrap h1 { font-size: 1.6rem !important; line-height: 1.3 !important; } .title-wrap p { font-size: 0.95rem !important; margin-top: 0.5rem !important; } .title-wrap { margin-bottom: 1.5rem !important; } /* اللابل */ .card label { font-size: 0.9rem !important; margin-bottom: 0.5rem !important; } /* خانات الإدخال */ .portal-input { font-size: 1rem !important; padding: 0.75rem 1rem !important; border-radius: 0.75rem !important; margin-bottom: 1rem !important; border-width: 2px !important; } /* الزرار */ .submit-btn { font-size: 1rem !important; padding: 0.875rem !important; border-radius: 0.75rem !important; gap: 0.5rem !important; } /* الرابط السفلي */ .back-link { font-size: 0.875rem !important; margin-top: 1rem !important; } /* رسائل الخطأ */ .msg-box { font-size: 0.875rem !important; padding: 0.75rem 1rem !important; border-radius: 0.75rem !important; } /* الفاصل */ .card .divider { margin: 1.25rem 0 !important; height: 1px !important; } /* الفوتر */ .footer-txt { font-size: 0.8rem !important; margin-top: 1.5rem !important; } } @media (max-width: 767px) { /* Center hero/landing logos but NOT the navbar logo */ .hero-logo-wrap img, .logo-box img { display: block; margin-left: auto !important; margin-right: auto !important; } /* Navbar logo stays left-aligned (or right in RTL) */ .navbar .nav-brand-img { margin: 0 !important; mix-blend-mode: normal !important; } } /* ══════════════════════════════════════════════════════════════ SLIDER IMAGES - CONTAIN ON ALL DEVICES ══════════════════════════════════════════════════════════════ */ .slide-img-bg img, .slider-wrap img, .slide img, img[class*="slide"] { -webkit-object-fit: contain !important; object-fit: contain !important; width: 100%; height: auto; display: block; } /* ══════════════════════════════════════════════════════════════ PREVENT TEXT OVERFLOW & ENSURE READABILITY ══════════════════════════════════════════════════════════════ */ * { word-wrap: break-word; overflow-wrap: break-word; } /* ══════════════════════════════════════════════════════════════ ACCESSIBILITY & CONTRAST ══════════════════════════════════════════════════════════════ */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ══════════════════════════════════════════════════════════════ PRINT STYLES ══════════════════════════════════════════════════════════════ */ @media print { body { font-size: 12pt !important; } h1 { font-size: 18pt !important; } h2 { font-size: 16pt !important; } h3 { font-size: 14pt !important; } h4, h5, h6 { font-size: 12pt !important; } }