/* ════════════════════════════════════════════════ التصميم الفخم (Theme Pro) — أسود + ذهبي يُفعّل بإضافة الكلاس theme-pro على لا يغيّر أي محتوى أو نصوص — فقط الشكل والألوان وطريقة العرض ════════════════════════════════════════════════ */ /* زر التصميم الحديث (يظهر دائماً بالهيدر الكلاسيكي والفخم) */ .theme-modern-btn{ display:flex;align-items:center;justify-content:center; width:34px;height:34px; background:rgba(196,168,90,.10); border:1px solid var(--border2); border-radius:50%; cursor:pointer; font-size:17px; color:var(--gold2); transition:all .2s; flex-shrink:0; title:"التصميم الحديث"; } .theme-modern-btn:hover{background:rgba(196,168,90,.25);transform:scale(1.12)} html.theme-pro .theme-modern-btn{border-color:var(--gold3);color:var(--gold-light)} .theme-toggle{ display:flex;align-items:center;gap:6px; background:rgba(196,168,90,.10); border:1px solid var(--border2); border-radius:100px; padding:6px 14px; cursor:pointer; font-family:'Tajawal',sans-serif; font-size:12.5px; color:var(--brown2); transition:all .2s; flex-shrink:0; } .theme-toggle:hover{background:rgba(196,168,90,.22);transform:translateY(-1px)} .theme-toggle .tt-icon{font-size:13px;color:var(--gold2);line-height:1} .theme-toggle .tt-label::after{content:'التصميم الفخم'} html.theme-pro .theme-toggle .tt-label::after{content:'التصميم الكلاسيكي'} html.theme-pro .theme-toggle{ background:rgba(196,168,90,.16); border-color:var(--gold3); color:var(--gold-light); } @media(max-width:640px){ .theme-toggle .tt-label{display:none} .theme-toggle{padding:7px 9px} } /* ══════════════════════════════════════════════ من هنا فصاعداً: كل القواعد تعمل فقط عند وجود الكلاس theme-pro على ══════════════════════════════════════════════ */ /* ── المتغيرات الأساسية ── */ html.theme-pro{ --cream:#0e0a04; --cream2:#171108; --cream3:#211808; --parchment:#2b2010; --white:#161009; --text:#EFE6D2; --text2:#C9BA96; --text3:#A4925F; --border:rgba(196,168,90,.30); --border2:rgba(212,168,19,.55); --gold:#C9A23A; --gold2:#D8AE2E; --sh:0 4px 18px rgba(0,0,0,.45); --sh-md:0 8px 28px rgba(0,0,0,.5); --sh-lg:0 14px 44px rgba(0,0,0,.55); } html.theme-pro body{background:var(--cream)} /* ── العناوين التي تستخدم --brown كلون نص (نستبدلها هنا فقط، بدون لمس متغير --brown نفسه لأنه يُستخدم أيضاً كخلفية بأماكن أخرى) ── */ html.theme-pro .hero h1, html.theme-pro .hero-tagline, html.theme-pro .sec-title, html.theme-pro .qcard-title, html.theme-pro .about-text h3, html.theme-pro .about-text strong, html.theme-pro .nc-name, html.theme-pro .cn, html.theme-pro .ev-body h3, html.theme-pro .stat-n, html.theme-pro .lb-info h2, html.theme-pro .disc-modal-body h3, html.theme-pro .tn.open, html.theme-pro .nav-links a:hover, html.theme-pro .nav-links a.active{ color:var(--gold-light); } html.theme-pro .lb-badge{color:var(--gold2)} /* ── الهيدر / شريط التنقل ── */ html.theme-pro nav.main-nav{ background:rgba(14,10,4,.94); border-bottom-color:rgba(196,168,90,.25); box-shadow:0 2px 16px rgba(0,0,0,.4); } html.theme-pro .nav-links a{color:var(--text2)} html.theme-pro .nav-links a:hover, html.theme-pro .nav-links a.active{background:rgba(196,168,90,.14)} html.theme-pro .nav-links.open{background:var(--cream)} html.theme-pro .ham{border-color:var(--border2)} html.theme-pro .ham span{background:var(--gold-light)} /* ── الهيرو ── */ html.theme-pro .hero{position:relative} html.theme-pro .hero::before{ content:'';position:absolute;inset:0; background:rgba(8,5,2,.42);pointer-events:none;z-index:1; } html.theme-pro .hero::after{ background:linear-gradient(180deg,rgba(14,10,4,0) 0%,rgba(14,10,4,.3) 45%,rgba(14,10,4,.85) 100%); } html.theme-pro .hero-desc{color:var(--text2)} html.theme-pro .btn-outline{ border-color:var(--gold-light); color:var(--gold-light); background:rgba(255,255,255,.05); } html.theme-pro .btn-outline:hover{background:var(--gold-light);color:#0e0a04} html.theme-pro .btn-primary{border:1px solid var(--gold3)} /* ── شريط الإحصائيات ── */ html.theme-pro .stats-bar{border-color:rgba(196,168,90,.18)} html.theme-pro .stat-item{border-color:rgba(196,168,90,.14)} /* ── الأقسام (الخلفيات تتحدث تلقائياً عبر متغيرات white/cream أعلاه، لا حاجة لتكرارها) ── */ /* ── بطاقات الإطار الذهبي (الشخصيات/الشعراء/الأعيان) — طريقة عرض مختلفة: صورة كاملة بزوايا دائرية + اسم معلّق فوق تدرّج شفاف بأسفل الصورة بدل الإطار المزدوج وشريط الاسم المنفصل بالتصميم الكلاسيكي ── */ html.theme-pro .port-frame{ background:#000; border:1px solid rgba(196,168,90,.3); border-radius:18px; padding:0; overflow:hidden; box-shadow:0 12px 32px rgba(0,0,0,.5); } html.theme-pro .port-frame::before{display:none} html.theme-pro .port-frame img{height:300px;border-radius:0} html.theme-pro .port-banner{ position:relative; margin-top:-76px; padding:46px 14px 14px; background:linear-gradient(180deg,rgba(10,7,3,0) 0%,rgba(10,7,3,.9) 65%,rgba(10,7,3,.98) 100%); border-top:none; } html.theme-pro .port-banner::before{display:none} html.theme-pro .port-banner h3{color:var(--gold-light)} html.theme-pro .notables-grid, html.theme-pro .ayaan-grid{grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:26px} html.theme-pro .more-tag{border-color:var(--border2)} /* ── المساعد الذكي: استبدال حرف "ض" برسمة رمزية لشخص بالغترة والعقال ── */ html.theme-pro .bot-av, html.theme-pro .msg.bot .mav, html.theme-pro .bot-fab-icon{ background-image:url('../images/bot-avatar.svg'); background-size:78%; background-position:center bottom; background-repeat:no-repeat; background-color:rgba(196,168,90,.14); color:transparent; font-size:0; } /* ── الشجرة ── */ html.theme-pro .tn:hover{background:rgba(212,168,19,.10)} html.theme-pro .tn.hl{background:rgba(212,168,19,.22)!important} /* ── الصندوق الافتتاحي بالأعلى (Lightbox) والنافذة المنبثقة تستخدم متغيرات cream/white أصلاً، لا تعديل إضافي مطلوب ── */ /* ── أزرار الهيرو: لمسة سهم بسيطة على الزر الأساسي ── */ html.theme-pro .btn-primary::after{content:' ←';margin-right:2px;opacity:.85} /* ── بطاقات الروابط السريعة (شجرة العائلة / الشخصيات / الشعراء / الأعيان / الصور) تحويلها لبطاقة أيقونة + زر دائري بدل الرابط النصي البسيط ── */ html.theme-pro .qcard{ background:var(--white); border:1px solid var(--border); border-radius:14px; } html.theme-pro .qcard:hover{border-color:var(--gold3);box-shadow:0 14px 34px rgba(0,0,0,.5)} html.theme-pro .qcard-icon{background:rgba(196,168,90,.10);border-color:var(--border2)} html.theme-pro .qcard-desc{color:var(--text3)} html.theme-pro .qcard-lnk{ display:inline-block;margin-top:6px;padding:6px 18px; border:1px solid var(--border2);border-radius:100px; font-weight:600;transition:all .2s; } html.theme-pro .qcard-lnk::after{content:' ←'} html.theme-pro .qcard:hover .qcard-lnk{background:var(--gold-light);color:#0e0a04;border-color:var(--gold-light)} /* ── خريطة انتشار القبيلة: بطاقات دول أوضح وأبرز بالتصميم الداكن ── */ html.theme-pro .country{background:var(--white);border:1px solid var(--border)} html.theme-pro .country:hover{border-color:var(--gold3);box-shadow:0 10px 26px rgba(0,0,0,.45)} html.theme-pro .cbar{background:var(--gold-light);opacity:.85} html.theme-pro .places-text{color:var(--text2)}