/* * جمعية الماهر بالقرآن وعلومه — طبقة الهوية البصرية. * * تُحمَّل فوق style_ar.css وتُفعَّل بالصنف body.theme-v2. * قيم المتغيّرات الافتراضية هنا، ويعيد تعريفها من جدول * site_settings حتى تُدار الألوان من لوحة التحكم بلا تعديل كود. * * ملاحظة: لا تضف letter-spacing على النصوص العربية — تفصل الحروف وتكسر الوصل. */ body.theme-v2 { --brand: #683B50; --brand-2: #8A8674; --brand-dark: #4A2839; --brand-ink: #241B20; --brand-soft: #F2E9ED; --brand-line: rgba(104, 59, 80, 0.14); --brand-shadow: 0 18px 42px rgba(36, 27, 32, 0.12); background: linear-gradient(180deg, #FAF6F8 0%, #F2E9ED 44%, #ffffff 100%) !important; color: var(--brand-ink); } body.theme-v2 a { color: var(--brand); } body.theme-v2 .modern-header-desktop { background: rgba(255, 255, 255, 0.96) !important; box-shadow: 0 12px 34px rgba(36, 27, 32, 0.12) !important; border-bottom: 1px solid var(--brand-line); } body.theme-v2 .modern-header-desktop .top-info-bar { background: var(--brand-dark) !important; } body.theme-v2 .modern-header-desktop .top-info-bar .container-fluid, body.theme-v2 .modern-header-desktop .contact-item, body.theme-v2 .modern-header-desktop .social-media a { color: rgba(255, 255, 255, 0.86) !important; } body.theme-v2 .modern-header-desktop .main-header-bar { height: 92px !important; background: linear-gradient(90deg, rgba(104, 59, 80, 0.05), rgba(138, 134, 116, 0.08) 55%, rgba(255, 255, 255, 0.95)) !important; box-shadow: none !important; } body.theme-v2 .modern-header-desktop .site-logo, body.theme-v2 #header.onPhonee .logo-container, body.theme-v2 .footer-logo a { background: transparent; border: none; border-radius: 0; box-shadow: none; padding: 0 !important; } body.theme-v2 .modern-header-desktop .site-logo img { height: 76px !important; max-width: 185px !important; } body.theme-v2 .modern-header-desktop .main-navigation .nav-link { color: var(--brand-dark) !important; border-radius: 8px !important; padding: 8px 9px !important; background: transparent !important; font-size: 0.84rem !important; } body.theme-v2 .modern-header-desktop .main-navigation .nav-link:hover, body.theme-v2 .modern-header-desktop .main-navigation .nav-link.active { color: #ffffff !important; background: var(--brand) !important; box-shadow: 0 8px 18px rgba(104, 59, 80, 0.22); } body.theme-v2 .modern-header-desktop .main-navigation .nav-link:hover .nav-icon, body.theme-v2 .modern-header-desktop .main-navigation .nav-link.active .nav-icon { color: #ffffff !important; } body.theme-v2 .modern-header-desktop .action-btn, body.theme-v2 #header.onPhonee .btn-zakat-mobile, body.theme-v2 #header.onPhonee .btn-lang-switcher, body.theme-v2 #header.onPhonee .navbar-toggler { color: var(--brand) !important; background: #ffffff !important; border: 1px solid rgba(104, 59, 80, 0.18) !important; border-radius: 8px !important; box-shadow: 0 10px 20px rgba(36, 27, 32, 0.08); } body.theme-v2 .modern-header-desktop .action-btn:hover, body.theme-v2 #header.onPhonee .btn-zakat-mobile:hover, body.theme-v2 #header.onPhonee .btn-lang-switcher:hover, body.theme-v2 #header.onPhonee .navbar-toggler:hover { background: var(--brand) !important; color: #ffffff !important; border-color: var(--brand) !important; } body.theme-v2 #header.onPhonee { background: rgba(255, 255, 255, 0.97) !important; border-bottom: 1px solid var(--brand-line); box-shadow: 0 12px 30px rgba(36, 27, 32, 0.12) !important; } body.theme-v2 #header.onPhonee .navbar { background: linear-gradient(90deg, rgba(104, 59, 80, 0.05), rgba(138, 134, 116, 0.08)) !important; } /* ── Center logo in mobile header ── */ body.theme-v2 #header.onPhonee .container-fluid { position: relative; } body.theme-v2 #header.onPhonee .logo-container { position: absolute !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; z-index: 1; } body.theme-v2 #header.onPhonee .mobile-actions-container { margin-right: auto !important; position: relative; z-index: 2; } body.theme-v2 #header.onPhonee .logo-container img { height: 58px !important; max-width: 180px !important; width: auto !important; object-fit: contain !important; } body.theme-v2 #header.onPhonee .navbar-collapse, body.theme-v2 #header .main-navB-1, body.theme-v2 .mobile-bottom-nav { background: var(--brand-dark) !important; border-color: var(--brand-dark) !important; } body.theme-v2 #header.onPhonee .nav-link.active, body.theme-v2 #header.onPhonee .nav-link:hover, body.theme-v2 .mobile-nav-item.active, body.theme-v2 .mobile-nav-item:hover { background: transparent !important; color: #ffffff !important; } /* Bottom nav — force white icons & text regardless of theme-v2 link color */ body.theme-v2 .mobile-bottom-nav .mobile-nav-item, body.theme-v2 .mobile-bottom-nav a.mobile-nav-item, body.theme-v2 .mobile-bottom-nav button.mobile-nav-item { color: rgba(255,255,255,.72) !important; } body.theme-v2 .mobile-bottom-nav .mobile-nav-item.active, body.theme-v2 .mobile-bottom-nav .mobile-nav-item:hover, body.theme-v2 .mobile-bottom-nav a.mobile-nav-item.active, body.theme-v2 .mobile-bottom-nav a.mobile-nav-item:hover { color: #ffffff !important; } body.theme-v2 .mobile-bottom-nav .mobile-nav-donate-btn { color: #CFB0C0 !important; } body.theme-v2 .carousel, body.theme-v2 .carousel-inner, body.theme-v2 .iftar-banner-link img, body.theme-v2 .abwab-hero-img, body.theme-v2 .bsb-hero-1 { border-radius: 8px !important; overflow: hidden; box-shadow: var(--brand-shadow); } body.theme-v2 .carousel { border: 1px solid var(--brand-line); } body.theme-v2 .panel .card, body.theme-v2 .card, body.theme-v2 .project-card, body.theme-v2 .achievement-card, body.theme-v2 .news-card { border: 1px solid var(--brand-line) !important; border-radius: 8px !important; box-shadow: 0 14px 30px rgba(36, 27, 32, 0.10) !important; overflow: hidden; } body.theme-v2 .panel .card .card-title, body.theme-v2 h1, body.theme-v2 h2, body.theme-v2 h3, body.theme-v2 h4, body.theme-v2 .main-title { color: var(--brand) !important; } /* ===== UNIFIED HERO BACKGROUND ===== */ body.theme-v2 .page-hero, body.theme-v2 .about-hero, body.theme-v2 .rpt-hero, body.theme-v2 .prj-hero, body.theme-v2 .zakat-hero, body.theme-v2 .adahi-hero, body.theme-v2 .iftar-hero, body.theme-v2 .contact-hero, body.theme-v2 .board-hero, body.theme-v2 .ded-hero, body.theme-v2 .cat-hero, body.theme-v2 .skd-hero, body.theme-v2 .search-hero, body.theme-v2 .deleg-hero, body.theme-v2 .news-hero, body.theme-v2 .awqaf-hero { background: linear-gradient(to left, #36183A 0%, #4A2839 55%, #553042 100%) !important; position: relative; isolation: isolate; } /* ===== White text on ALL green/dark backgrounds ===== */ /* Page heroes & section heroes */ body.theme-v2 .page-hero h1, body.theme-v2 .page-hero h2, body.theme-v2 .page-hero h3, body.theme-v2 .page-hero h4, body.theme-v2 .page-hero p, body.theme-v2 .page-hero span, body.theme-v2 .page-hero i, body.theme-v2 .about-hero h1, body.theme-v2 .about-hero h2, body.theme-v2 .about-hero h3, body.theme-v2 .about-hero p, body.theme-v2 .rpt-hero h1, body.theme-v2 .rpt-hero h1 i, body.theme-v2 .rpt-hero p, body.theme-v2 .prj-hero h1, body.theme-v2 .prj-hero h2, body.theme-v2 .prj-hero p, body.theme-v2 .prj-hero span, body.theme-v2 [style*="background:linear-gradient(135deg, #241B20"] h1, body.theme-v2 [style*="background:linear-gradient(135deg, #241B20"] h2, body.theme-v2 [style*="background:linear-gradient(135deg, #241B20"] p { color: #ffffff !important; } /* Quick donate panel header */ body.theme-v2 .qd-head h3, body.theme-v2 .qd-head h1, body.theme-v2 .qd-head h2, body.theme-v2 .qd-head *, body.theme-v2 #qdClose { color: #ffffff !important; } /* Quick donate button */ body.theme-v2 .qd-donate-btn, body.theme-v2 .qd-donate-btn h1, body.theme-v2 .qd-donate-btn h2, body.theme-v2 .qd-donate-btn h3, body.theme-v2 .qd-donate-btn span { color: #ffffff !important; } /* Toggle button */ body.theme-v2 #qdToggle { color: #ffffff !important; } /* Any element with green background should have white children */ body.theme-v2 [style*="background:#683B50"] *, body.theme-v2 [style*="background: #683B50"] *, body.theme-v2 [style*="background:#4A2839"] *, body.theme-v2 [style*="background: #4A2839"] * { color: #ffffff !important; } /* Green buttons (BTN-1 / btn-success) text */ body.theme-v2 .BTN-1, body.theme-v2 .BTN-1 *, body.theme-v2 .btn-success, body.theme-v2 .btn-success * { color: #ffffff !important; } /* Stats section */ body.theme-v2 .stats-section h2, body.theme-v2 .stats-section h3, body.theme-v2 .stats-section p, body.theme-v2 .stats-section span { color: inherit; } body.theme-v2 .BTN-1, body.theme-v2 .btn-success, body.theme-v2 .panel .card .card-body .BTN-1, body.theme-v2 #fastDonate .fast_donateBtn, body.theme-v2 #fastDonate .dropend .dropdown-toggle, body.theme-v2 #projectsTabs .panel .card .card-body .wiseBtn .active { background: var(--brand) !important; border-color: var(--brand) !important; color: #ffffff !important; border-radius: 8px !important; } body.theme-v2 .BTN-1:hover, body.theme-v2 .btn-success:hover, body.theme-v2 .panel .card .card-body .BTN-1:hover, body.theme-v2 #fastDonate .fast_donateBtn:hover { background: var(--brand-dark) !important; border-color: var(--brand-dark) !important; } body.theme-v2 .BTN-2, body.theme-v2 .panel .card .card-body .BTN-2 { background: var(--brand-dark) !important; border-color: var(--brand-dark) !important; color: #ffffff !important; border-radius: 8px !important; } body.theme-v2 .panel .card .card-body .progress .bg-success1, body.theme-v2 .progress-bar, body.theme-v2 .bg-success { background-color: var(--brand) !important; } body.theme-v2 #projectsTabs .nav-pills .nav-link.active { color: var(--brand) !important; border-bottom-color: var(--brand) !important; } body.theme-v2 input:focus, body.theme-v2 textarea:focus, body.theme-v2 select:focus, body.theme-v2 .form-control:focus, body.theme-v2 .form-select:focus { border-color: var(--brand-2) !important; box-shadow: 0 0 0 0.2rem rgba(138, 134, 116, 0.18) !important; } body.theme-v2 .footer, body.theme-v2 footer.footer { background: linear-gradient(180deg, #ffffff 0%, #F2E9ED 45%, rgba(138, 134, 116, 0.12) 100%) !important; color: var(--brand-dark) !important; border-top: 1px solid var(--brand-line); } body.theme-v2 .footer-logo-img { width: 110px !important; } body.theme-v2 .footer-info-strip i, body.theme-v2 .footer-mobile-line i { color: var(--brand) !important; } body.theme-v2 .footer-social-btn, body.theme-v2 .footer-social-btn i { color: #ffffff !important; } body.theme-v2 .footer-copyright { background: var(--brand-dark) !important; } body.theme-v2 .back-button { background: var(--brand-dark) !important; } body.theme-v2 .back-button:hover, body.theme-v2 .up-button, body.theme-v2 .up-button:hover { background: var(--brand) !important; } body.theme-v2 .cart-badge, body.theme-v2 .mobile-nav-item .badge { background: var(--brand-2) !important; } @media (max-width: 991.98px) { body.theme-v2 #header.onPhonee .logo-container { padding: 4px 10px !important; } body.theme-v2 #header.onPhonee .btn-zakat-mobile, body.theme-v2 #header.onPhonee .btn-lang-switcher, body.theme-v2 #header.onPhonee .navbar-toggler { margin-bottom: 0 !important; } } @media (max-width: 575.98px) { body.theme-v2 #header.onPhonee .logo-container img { height: 52px !important; max-width: 160px !important; } body.theme-v2 .footer-logo-img { width: 95px !important; } } /* زخرفة العناوين — بلا قاعدة كانت تُعرض بحجمها الطبيعي فتُخِلّ بالسطر */ .leaf-icon { height: 1.15em; width: auto; margin-inline-end: .5rem; vertical-align: -0.12em; flex: 0 0 auto; } /* ── بيانات ترخيص المشروع — منقولة من إعمار وملوّنة بهوية الماهر ── */ .license-strip { background: #fff; border: 1px solid rgba(104, 59, 80,.14); border-radius: 12px; padding: 6px 12px; box-shadow: 0 4px 16px rgba(31,43,36,.07); display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 0.68rem; color: #4A2839; text-align: center; } .lic-item { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 5px; width: 100%; } .lic-item > i { color: #683B50; flex-shrink: 0; } .lic-label { font-weight: 600; color: #4A2839; } .lic-val { color: #333; } .lic-sep { color: #aaa; margin: 0 6px; } .lic-dates { gap: 8px; justify-content: center; } .lic-footer { gap: 8px; margin-top: 1px; justify-content: center; } .lic-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 20px; font-size: 0.65rem; font-weight: 600; } .lic-pct { background: rgba(104, 59, 80,.09); color: #683B50; border: 1px solid rgba(104, 59, 80,.2); } .lic-cash { background: rgba(180,0,0,.07); color: #900; border: 1px solid rgba(180,0,0,.18); } .lic-cash i { color: #c00; } /* ── بطاقة العضوية عند التبرّع («التبرع باسم العضوية المسجلة») ── */ .member-donor-card { display: flex; align-items: center; gap: .9rem; width: 100%; padding: 1rem 1.1rem; border: 1px solid var(--brand-line); border-radius: 14px; background: linear-gradient(180deg, #fff 0%, var(--brand-soft) 160%); box-shadow: 0 10px 26px -18px rgba(36, 27, 32, .35); } .member-donor-card-icon { flex: 0 0 auto; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--brand); color: #fff; font-size: 1.05rem; } .member-donor-card-body { flex: 1 1 auto; min-width: 0; display: block; } .member-donor-card-label { display: block; font-size: .8rem; color: rgba(36, 27, 32, .55); } .member-donor-card-name { display: block; margin-top: .1rem; font-weight: 700; font-size: 1.02rem; color: var(--brand-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .member-donor-card-meta { display: flex; flex-wrap: wrap; gap: .25rem .9rem; margin-top: .3rem; font-size: .82rem; color: rgba(36, 27, 32, .55); } .member-donor-card-meta i { margin-inline-end: .25rem; opacity: .7; } .member-donor-card-anon { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .85rem; font-size: .85rem; font-weight: 600; color: var(--brand); background: #fff; border: 1px solid var(--brand-line); border-radius: 999px; cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease; } .member-donor-card-anon:hover { background: var(--brand-soft); border-color: var(--brand); } /* الحالة المفعّلة: التبرّع كفاعل خير */ .member-donor-card-anon.is-on { background: var(--brand); border-color: var(--brand); color: #fff; } @media (max-width: 575.98px) { .member-donor-card { flex-wrap: wrap; } .member-donor-card-anon { width: 100%; justify-content: center; } } @media (prefers-reduced-motion: reduce) { .member-donor-card-anon { transition: none; } } /* ── شارات صورة المشروع (زيارات/متبرعين/دولة) ── */ /* حاوية صورة المشروع — الشارات تستقرّ فوقها */ .proj-img-wrap { position: relative; display: block; } .proj-img-badges { position: absolute; bottom: 12px; right: 12px; left: 12px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; z-index: 5; pointer-events: none; } .proj-img-badges { gap: 4px; bottom: 6px; right: 6px; left: 6px; } .proj-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.85); backdrop-filter: blur(6px); color: #2b3b32; font-size: 0.7rem; font-weight: 400; box-shadow: 0 2px 8px rgba(0,0,0,.10); border: 1px solid rgba(255,255,255,.5); white-space: nowrap; pointer-events: auto; transition: transform .18s, box-shadow .18s; } .proj-badge:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.14); } .proj-badge i { font-size: 0.78rem; flex-shrink: 0; } .proj-badge-views i, .proj-badge-donors i, .proj-badge-country i { color: rgba(104, 59, 80, .75); } .proj-badge { padding: 3px 8px; font-size: 0.65rem; } .proj-badge i { font-size: 0.72rem; } /* ── وسائل الدفع: صفّ أفقي بأيقونات SVG ── */ .payment-methods-container { width: 100%; overflow-x: auto; /* يسمح بالتمرير الأفقي في الشاشات الصغيرة جداً */ padding: 10px 0; -webkit-overflow-scrolling: touch; } .payment-methods-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: row; flex-wrap: nowrap; /* فرض الصف الواحد */ gap: 10px; align-items: stretch; } .payment-methods-list li { flex: 1; min-width: 100px; /* عرض أدنى مناسب للأيقونات الكبيرة */ } .payment-methods-list .form-check-label { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px 5px; border: 1.5px solid #e0e0e0; border-radius: 12px; cursor: pointer; transition: all 0.2s ease-in-out; background: #ffffff; height: 100%; text-align: center; box-sizing: border-box; } .payment-methods-list .form-check-input:checked + .form-check-label { border-color: #683B50; background-color: #FAF6F8; box-shadow: 0 4px 12px rgba(104, 59, 80, 0.12); position: relative; } .payment-methods-list .form-check-input:checked + .form-check-label::after { content: '✓'; position: absolute; top: -6px; right: -6px; background: #683B50; color: white; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; border: 2px solid white; z-index: 1; } .payment-methods-list .form-check-label img { width: 80%; /* تأخذ 80% من عرض المربع */ max-width: 70px; /* أقصى عرض للصورة */ height: 50px; /* زيادة الارتفاع */ object-fit: contain; /* الحفاظ على أبعاد الصورة */ margin-bottom: 8px; } .payment-methods-list .form-check-label span { font-size: 12px; font-weight: 700; color: #241B20; line-height: 1.2; display: block; } .payment-methods-list li { min-width: 50px; } .payment-methods-list .form-check-label img { height: 40px; /* حجم كبير حتى على الهاتف */ max-width: 60px; } .payment-methods-list .form-check-label span { font-size: 10px; } /* ═══════════════════════════════════════════════════════════════ طبقة التوحيد مع الأشقاء (اللاندينج + النادي) — أُضيفت 2026-08-31 ملاحظة: هذه الطبقة تأتي بعد كل شيء فتفوز على Bootstrap ═══════════════════════════════════════════════════════════════ */ /* رموز موحّدة */ body.theme-v2 { --mahr-plum: #683B50; --mahr-plum-deep: #4A2839; --mahr-muted: rgba(36, 27, 32, .58); /* بديل أخضر إعمار الثانوي */ --mahr-line: #E7DCE2; --r-sm: 12px; --r-md: 16px; --r-pill: 999px; } /* نقش ماسي خفيف تحت كل بطل (يطابق طبقة الأشقاء) */ body.theme-v2 .page-hero::before, body.theme-v2 .about-hero::before, body.theme-v2 .prj-hero::before, body.theme-v2 .rpt-hero::before, body.theme-v2 .zakat-hero::before, body.theme-v2 .adahi-hero::before, body.theme-v2 .iftar-hero::before, body.theme-v2 .contact-hero::before, body.theme-v2 .board-hero::before, body.theme-v2 .ded-hero::before, body.theme-v2 .cat-hero::before, body.theme-v2 .skd-hero::before, body.theme-v2 .search-hero::before, body.theme-v2 .deleg-hero::before, body.theme-v2 .news-hero::before, body.theme-v2 .awqaf-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .07; background-image: linear-gradient(45deg, #fff 1px, transparent 1px), linear-gradient(-45deg, #fff 1px, transparent 1px); background-size: 56px 56px; } /* سلّم استدارة موحّد */ body.theme-v2 .card, body.theme-v2 .project-card, body.theme-v2 .news-card, body.theme-v2 .achievement-card, body.theme-v2 .feat-card { border-radius: var(--r-md) !important; box-shadow: 0 1px 2px rgba(36,27,32,.04), 0 8px 24px -16px rgba(36,27,32,.22) !important; transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s; } body.theme-v2 .card:hover, body.theme-v2 .project-card:hover, body.theme-v2 .news-card:hover, body.theme-v2 .feat-card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -24px rgba(104,59,80,.45) !important; } /* أزرار كبسولة موحّدة + هدف لمس 44px */ body.theme-v2 .BTN-1, body.theme-v2 .BTN-2, body.theme-v2 .btn-success, body.theme-v2 .predefinedamount, body.theme-v2 .qd-amount-btn, body.theme-v2 .feat-donate-btn, body.theme-v2 .featured-load-more-btn { border-radius: var(--r-pill) !important; min-height: 44px; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; } body.theme-v2 .BTN-1:hover, body.theme-v2 .BTN-2:hover, body.theme-v2 .btn-success:hover, body.theme-v2 .feat-donate-btn:hover { transform: translateY(-2px); } body.theme-v2 .BTN-1:active, body.theme-v2 .BTN-2:active, body.theme-v2 .btn-success:active, body.theme-v2 .feat-donate-btn:active { transform: scale(.98); } body.theme-v2 button:disabled, body.theme-v2 .BTN-1:disabled { opacity: .5; } /* حلقة تركيز للوحة المفاتيح — كانت غائبة كلياً */ body.theme-v2 a:focus-visible, body.theme-v2 button:focus-visible, body.theme-v2 input:focus-visible, body.theme-v2 select:focus-visible, body.theme-v2 .predefinedamount:focus-visible, body.theme-v2 .value-button:focus-visible { outline: 2px solid var(--mahr-plum) !important; outline-offset: 3px; border-radius: 4px; } /* حارس: لا تباعد أحرف على العربية (يكسر الوصل) */ body.theme-v2 :lang(ar), body.theme-v2 h1, body.theme-v2 h2, body.theme-v2 h3, body.theme-v2 h4, body.theme-v2 p, body.theme-v2 span:not(.ltr) { letter-spacing: normal !important; } /* أهداف لمس آمنة للأزرار الأيقونية */ body.theme-v2 .value-button { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }