/* ============================================================ THEME 2 — FOOTER 2026 ------------------------------------------------------------ فوتر مُعاد هيكلته: مبسّط، مصغّر، ومبني للجوال أولاً. البنية: footer.nxf └ .nxf__main → الشبكة (هوية / روابط / روابط / تواصل) └ .nxf__bar → شريط الحقوق السفلي على الجوال (≤767px) تتحول مجموعتا الروابط إلى أكورديون
، وتظهر أزرار الإجراء السريع (.nxf__quick) بدل قائمة بيانات التواصل الطويلة. سكربت صغير أسفل الفوتر يفتح الأكورديون دائماً على الشاشات الكبيرة. يُحمَّل هذا الملف آخر شيء في داخل تخطيط الثيم 2 فقط، أي أنه يعلو على style.css و modern-2026.css. كل الأنماط مُنطاقة تحت footer.nxf فلا تمسّ أي فوتر آخر. المسافات منطقية (padding-inline / margin-inline-start) فتعمل في الاتجاهين rtl و ltr دون ملف مقابل. ============================================================ */ footer.nxf { /* ── ألوان الفوتر: مشتقة من توكنات الموقع ────────────── */ --nxf-ink: #FFFFFF; --nxf-ink-soft: rgba(255, 255, 255, .64); --nxf-ink-mute: rgba(255, 255, 255, .44); --nxf-line: rgba(255, 255, 255, .10); --nxf-line-2: rgba(255, 255, 255, .17); --nxf-tile: rgba(255, 255, 255, .055); --nxf-brand: var(--m-brand, #B8541A); position: relative; isolation: isolate; margin-top: 56px; padding: 0 !important; background-color: var(--m-dark, #2A1F17) !important; background-image: none !important; color: var(--nxf-ink-soft); font-family: var(--m-font-body, "Inter", "Tajawal", sans-serif); overflow: hidden; } /* صورة خلفية الفوتر القديمة تبقى — لكن كطبقة نسيج خافتة جداً بدل صورة صاخبة خلف النص. تُمرَّر عبر --nxf-tex من الـ blade. */ footer.nxf::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--nxf-tex, none); background-size: cover; background-position: center; opacity: .03; filter: grayscale(1); pointer-events: none; } footer.nxf .nxf__main, footer.nxf .nxf__bar { position: relative; z-index: 1; } /* توهج خفيف بلون العلامة أعلى الفوتر */ .nxf__main::before { content: ""; position: absolute; inset-block-start: -60px; inset-inline-start: -40px; width: 340px; height: 220px; background: radial-gradient(closest-side, rgba(var(--theme-brand-rgb, 184, 84, 26), .20), transparent 70%); pointer-events: none; z-index: -1; } /* ============================================================ 1. الشبكة ============================================================ */ .nxf__main { padding-block: 42px 30px; } .nxf__grid { display: grid; grid-template-columns: 1.45fr .85fr .85fr 1.25fr; gap: 30px; align-items: start; } @media (max-width: 1199.98px) { .nxf__grid { grid-template-columns: 1.3fr .9fr .9fr 1.2fr; gap: 24px; } } @media (max-width: 991.98px) { .nxf__main { padding-block: 34px 24px; } .nxf__grid { grid-template-columns: 1fr 1fr; gap: 26px 24px; } .nxf__col--brand, .nxf__col--contact { grid-column: 1 / -1; } } /* ============================================================ 2. عمود الهوية ============================================================ */ .nxf__logo { display: inline-flex; align-items: center; text-decoration: none; line-height: 1; } .nxf__logo img { height: 46px; width: auto !important; max-width: 180px; object-fit: contain; } .nxf__wordmark { font-family: var(--m-font-display, "Playfair Display", serif); font-size: 1.5rem; font-weight: 700; color: var(--nxf-ink); letter-spacing: .01em; } .nxf__about { margin: 14px 0 0; font-size: .875rem; line-height: 1.8; color: var(--nxf-ink-soft); max-width: 38ch; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* روابط التواصل الاجتماعي */ .nxf__social { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .nxf__social a { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--nxf-tile); border: 1px solid var(--nxf-line); color: var(--nxf-ink); font-size: .85rem; text-decoration: none; transition: background .22s ease, color .22s ease, transform .22s ease, border-color .22s ease; } .nxf__social a:hover, .nxf__social a:focus-visible { background: var(--nxf-brand); border-color: transparent; color: #fff; transform: translateY(-2px); } /* ============================================================ 3. عناوين الأعمدة (هي نفسها رأس الأكورديون على الجوال) ============================================================ */ .nxf__head { display: flex; align-items: center; gap: 9px; margin: 0 0 16px; font-family: var(--m-font-body, "Inter", "Tajawal", sans-serif); font-size: .82rem; font-weight: 700; color: var(--nxf-ink); list-style: none; cursor: default; } /* مؤشر
الأصلي — يُخفى في كل المحركات */ footer.nxf summary.nxf__head::-webkit-details-marker { display: none; } footer.nxf summary.nxf__head::marker { content: ""; font-size: 0; } .nxf__head > i:first-child { color: var(--nxf-brand); font-size: .9rem; width: 1em; text-align: center; } /* التباعد الحرفي والأحرف الكبيرة للاتينية فقط — الخط العربي متصل ويتشوّه مع letter-spacing. */ [dir="ltr"] .nxf__head { text-transform: uppercase; letter-spacing: .07em; } /* السهم للأكورديون — لا وجود له إلا على الجوال. الـ !important لأن FontAwesome يفرض display:inline-block على .fas بنفس الأولوية. */ footer.nxf .nxf__caret { margin-inline-start: auto; font-size: .68rem; color: var(--nxf-ink-mute); transition: transform .25s ease; display: none !important; } /* ============================================================ 4. قوائم الروابط ============================================================ */ .nxf__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .nxf__links a { display: inline-flex; align-items: center; gap: 8px; color: var(--nxf-ink-soft); font-size: .875rem; text-decoration: none; transition: color .2s ease; } .nxf__links a::before { content: ""; flex: 0 0 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--nxf-brand); opacity: 0; transition: opacity .2s ease; } .nxf__links a:hover, .nxf__links a:focus-visible { color: var(--nxf-ink); } .nxf__links a:hover::before, .nxf__links a:focus-visible::before { opacity: 1; } /* ============================================================ 5. بيانات التواصل (سطح المكتب) ============================================================ */ .nxf__contacts { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; } .nxf__contact { display: flex; align-items: center; gap: 10px; color: var(--nxf-ink-soft); font-size: .855rem; line-height: 1.6; text-decoration: none; transition: color .2s ease; } .nxf__contact > i { flex: 0 0 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--nxf-tile); border: 1px solid var(--nxf-line); color: var(--nxf-brand); font-size: .78rem; transition: background .22s ease, color .22s ease, border-color .22s ease; } .nxf__contact:hover { color: var(--nxf-ink); } .nxf__contact:hover > i { background: var(--nxf-brand); border-color: transparent; color: #fff; } .nxf__contact span { min-width: 0; } .nxf__contact--addr { align-items: flex-start; } .nxf__contact--addr > i { margin-block-start: 1px; } .nxf__contact--addr span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ============================================================ 6. النشرة البريدية ============================================================ */ .nxf__head--news { margin-block-start: 0; } .nxf__news { display: flex; align-items: center; gap: 4px; padding: 4px; background: var(--nxf-tile); border: 1px solid var(--nxf-line-2); border-radius: 999px; transition: border-color .22s ease, box-shadow .22s ease; max-width: 360px; } .nxf__news:focus-within { border-color: rgba(var(--theme-brand-rgb, 184, 84, 26), .65); box-shadow: 0 0 0 3px rgba(var(--theme-brand-rgb, 184, 84, 26), .18); } .nxf__news input { flex: 1 1 auto; min-width: 0; height: 38px; background: transparent; border: 0; outline: 0; color: var(--nxf-ink); font-size: .85rem; padding-inline: 14px 4px; } .nxf__news input::placeholder { color: var(--nxf-ink-mute); } .nxf__news button { flex: 0 0 38px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--nxf-brand); color: #fff; display: grid; place-items: center; font-size: .82rem; cursor: pointer; transition: background .22s ease, transform .22s ease; } .nxf__news button:hover:not(:disabled) { background: var(--m-brand-dark, #8B3F12); transform: scale(1.05); } .nxf__news button:disabled { opacity: .6; cursor: not-allowed; } /* الطائرة الورقية تشير لليمين — تُقلب في الواجهة العربية */ [dir="rtl"] .nxf__news button i { transform: scaleX(-1); } .nxf__news-note { margin: 10px 0 0; font-size: .74rem; color: var(--nxf-ink-mute); line-height: 1.6; } /* ============================================================ 7. أزرار الإجراء السريع — جوال فقط ============================================================ */ .nxf__quick { display: none; } /* ============================================================ 8. شريط الحقوق ============================================================ */ /* البطاقات المقبولة — its own strip above the copyright line. */ .nxf__cards { position: relative; z-index: 1; border-top: 1px solid var(--nxf-line); padding: 16px 0; display: flex; justify-content: center; } .nxf__bar { border-top: 1px solid var(--nxf-line); background: rgba(0, 0, 0, .20); } .nxf__bar-in { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; padding-block: 14px; } .nxf__copy { margin: 0; font-size: .78rem; color: var(--nxf-ink-mute); } .nxf__legal { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; } .nxf__legal a { font-size: .78rem; color: var(--nxf-ink-mute); text-decoration: none; transition: color .2s ease; } .nxf__legal a:hover, .nxf__legal a:focus-visible { color: var(--nxf-ink); } /* ============================================================ 9. إتاحة الوصول ============================================================ */ footer.nxf a:focus-visible, footer.nxf button:focus-visible, footer.nxf summary:focus-visible { outline: 2px solid var(--nxf-brand); outline-offset: 3px; border-radius: 6px; } @media (prefers-reduced-motion: reduce) { footer.nxf *, footer.nxf *::before, footer.nxf *::after { transition: none !important; } } /* ============================================================ 10. الجوال (≤767px) — النسخة المصغّرة ============================================================ */ @media (max-width: 767.98px) { footer.nxf { margin-top: 36px; } .nxf__main { padding-block: 26px 4px; } .nxf__main::before { width: 220px; height: 160px; } .nxf__grid { grid-template-columns: 1fr; gap: 0; } /* ── الهوية: مُوسّطة ومختصرة ── */ .nxf__col--brand { text-align: center; padding-bottom: 6px; } .nxf__logo { justify-content: center; } .nxf__logo img { height: 40px; max-width: 150px; } .nxf__wordmark { font-size: 1.28rem; } .nxf__about { margin: 10px auto 0; font-size: .8rem; line-height: 1.7; max-width: 42ch; -webkit-line-clamp: 2; } /* ── إجراءات سريعة: اتصال / بريد / فروع ── */ .nxf__quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0 14px; } .nxf__quick a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 62px; padding: 10px 6px; border-radius: 14px; background: var(--nxf-tile); border: 1px solid var(--nxf-line); color: var(--nxf-ink-soft); font-size: .705rem; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; transition: background .2s ease, color .2s ease, border-color .2s ease; } .nxf__quick a > i { font-size: .95rem; color: var(--nxf-brand); transition: color .2s ease; } .nxf__quick a:active { background: var(--nxf-brand); border-color: transparent; color: #fff; } .nxf__quick a:active > i { color: #fff; } .nxf__social { justify-content: center; margin-top: 0; } .nxf__social a { width: 34px; height: 34px; font-size: .8rem; } /* ── مجموعات الروابط تصبح أكورديون ── */ .nxf__acc { border-top: 1px solid var(--nxf-line); margin-top: 4px; } .nxf__acc:first-of-type { margin-top: 18px; } .nxf__head { margin: 0; padding: 15px 2px; cursor: pointer; font-size: .845rem; user-select: none; -webkit-tap-highlight-color: transparent; } footer.nxf .nxf__caret { display: block !important; } .nxf__acc[open] > .nxf__head > .nxf__caret { transform: rotate(180deg); } .nxf__acc[open] > .nxf__head { color: var(--nxf-brand); } .nxf__acc-body { padding: 0 2px 16px; } .nxf__links { gap: 14px; } .nxf__links a { font-size: .845rem; } .nxf__links a::before { opacity: .45; } /* ── عمود التواصل: النشرة فقط (الاتصال في الأزرار أعلاه) ── */ .nxf__col--contact { border-top: 1px solid var(--nxf-line); padding-block: 16px 4px; } .nxf__head--contact, .nxf__contacts { display: none; } .nxf__head--news { margin-bottom: 12px; } .nxf__news { max-width: none; } .nxf__news input { height: 40px; font-size: .85rem; } .nxf__news button { flex-basis: 40px; width: 40px; height: 40px; } .nxf__news-note { text-align: center; } /* ── شريط الحقوق: مُوسّط ومضغوط ── */ .nxf__bar-in { justify-content: center; text-align: center; gap: 8px; padding-block: 13px; } .nxf__bar-in > * { flex: 1 1 100%; } .nxf__legal { justify-content: center; gap: 4px 14px; } .nxf__copy { font-size: .74rem; order: 2; } .nxf__legal { order: 1; } } /* الشاشات الضيقة جداً */ @media (max-width: 359.98px) { .nxf__quick { grid-template-columns: repeat(3, 1fr); gap: 6px; } .nxf__quick a { font-size: .66rem; min-height: 58px; } }