/* ========================================================================= أرشيف عائلة ال ظافر من ال حواش — حصاة قحطان public/style.css — ورقة الأنماط الكاملة والمستقلة ملاحظات عامة: • بدون أي استيراد خارجي (@import) وبدون أي طلب شبكة — الموقع يعمل دون اتصال. • الصفحة عربية RTL () — تُستخدم الخصائص المنطقية (inset-inline / padding-inline / margin-inline / border-inline) قدر الإمكان. • بوابة وضع التحرير: body.edit-mode ← كل ما يحمل class="edit-only" مخفي تمامًا إلا عند وجود هذا الصنف على body، ومعطّل التفاعل (pointer-events) أيضًا. ========================================================================= */ /* ================= ١) الخطوط المحلية (public/fonts) ================= */ /* ثلاث خطوط محلية فقط — لا Google Fonts ولا أي شبكة */ @font-face{ font-family:'Zain Length 2'; src:url('fonts/zain-length-2.ttf') format('truetype'); font-weight:normal;font-style:normal;font-display:swap; } @font-face{ font-family:'Zain Length 6'; src:url('fonts/zain-length-6.ttf') format('truetype'); font-weight:normal;font-style:normal;font-display:swap; } @font-face{ font-family:'Dima Naskh'; src:url('fonts/dima-naskh-arabic.ttf') format('truetype'); font-weight:normal;font-style:normal;font-display:swap; } /* ================= ٢) المتغيرات العامة ================= */ :root{ /* اللوحة التراثية: بيج / أخضر / ذهبي */ --beige:#f3ead8; --beige-2:#ece0c8; --beige-3:#dcc9a3; --cream:#faf5ea; --green:#1e4631; --green-2:#2d5a3d; --green-3:#3f7a54; --gold:#c9a227; --gold-2:#d4af37; --gold-3:#e8c96a; --brown:#6b4f2e; --ink:#2a2318; --danger:#8c2f24; --danger-2:#b23a2b; --dark:#142e20; /* قياسات ومساحات */ --radius:14px; --radius-lg:22px; --gutter:5vw; --eb-h:46px; /* ارتفاع شريط وضع التحرير (يُدفع به الموقع لأسفل) */ --hero-pt:150px; /* حشوة أعلى الواجهة (لتجاوز الترويسة الثابتة) */ --shadow:0 10px 26px rgba(42,35,24,.12); --shadow-lg:0 20px 44px rgba(30,70,49,.22); /* الخطوط */ --font-body:'Zain Length 6','Zain Length 2',system-ui,-apple-system,'Segoe UI',sans-serif; --font-head:'Zain Length 2','Zain Length 6',system-ui,serif; --font-poem:'Dima Naskh','Zain Length 6',serif; /* الطبقات */ --z-chrome:120; --z-editbar:140; --z-modal:200; --z-toast:260; /* حالة التحرير (يحوّلها وجود .edit-mode على body) */ --scroll-pad:120px; } /* ================= ٣) الأساسيات وإعادة الضبط ================= */ *{margin:0;padding:0;box-sizing:border-box} /* إخفاء يعتمد عليه الجافاسكربت لإخفاء حالات الفراغ */ [hidden]{display:none !important} html{ scroll-behavior:smooth; scroll-padding-top:var(--scroll-pad); } /* عند تفعيل التحرير يرتفع المحتوى بمقدار شريط التحرير */ html:has(body.edit-mode){--scroll-pad:calc(120px + var(--eb-h))} body{ font-family:var(--font-body); background:var(--beige); color:var(--ink); font-size:17px; line-height:1.8; overflow-x:hidden; text-rendering:optimizeLegibility; } /* نقشة ذهبية خفيفة على كامل الصفحة */ body::before{ content:"";position:fixed;inset:0;pointer-events:none;z-index:0; background-image: radial-gradient(rgba(201,162,39,.075) 1.2px, transparent 1.2px), radial-gradient(circle at 85% 15%, rgba(30,70,49,.05) 0 60px, transparent 61px); background-size:26px 26px, 100% 100%; } h1,h2,h3,h4,.ruqaa{font-family:var(--font-head);font-weight:700;line-height:1.6} p{line-height:1.9} img{max-width:100%;display:block;border-style:none} a{color:inherit;text-decoration:none} button{font-family:inherit;font-size:inherit;color:inherit;cursor:pointer;border:0;background:none} button:focus-visible,a:focus-visible,[tabindex]:focus-visible, input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:3px solid rgba(212,175,55,.65);outline-offset:2px; } ::selection{background:var(--gold-2);color:var(--green)} section{padding:90px var(--gutter);position:relative;z-index:1} /* بنية الأقسام ذات الخلفيات المختلفة */ #about{background:var(--beige)} #tree{background:linear-gradient(180deg,var(--beige) 0%,var(--beige-2) 50%,var(--beige) 100%)} #news{background:linear-gradient(180deg,var(--beige-2) 0%,var(--beige) 100%)} #history{background:linear-gradient(180deg,var(--beige-2) 0%,var(--beige) 100%)} #contributions{background:linear-gradient(180deg,var(--beige-2) 0%,var(--beige) 100%)} #funds{background:linear-gradient(180deg,var(--beige) 0%,var(--beige-2) 100%)} #stories{background:linear-gradient(180deg,var(--beige) 0%,var(--beige-2) 100%)} #poetry{background:linear-gradient(180deg,var(--beige) 0%,var(--beige-2) 100%)} /* ================= ٤) شريط وضع التحرير (#editBar) ================= */ /* ثابت في أعلى الصفحة، فوق الترويسة اللاصقة، ولا يظهر إلا في وضع التحرير */ .edit-bar{ position:fixed;inset-inline:0;top:0;z-index:var(--z-editbar); display:none;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap; min-height:var(--eb-h); padding:7px 16px; background:linear-gradient(90deg,var(--green),var(--green-2) 45%,var(--green)); color:var(--gold-3); font-weight:700;font-size:.86rem;text-align:center; border-bottom:1px solid var(--gold-2); box-shadow:0 6px 20px rgba(0,0,0,.28); } body.edit-mode .edit-bar{display:flex} .eb-dot{ inline-size:10px;block-size:10px;border-radius:50%;flex-shrink:0; background:var(--gold-2); animation:ebPulse 1.6s ease-in-out infinite; } @keyframes ebPulse{ 0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(212,175,55,.55)} 50%{opacity:.6;box-shadow:0 0 0 8px rgba(212,175,55,0)} } .eb-exit{ display:inline-flex;align-items:center; background:transparent;color:var(--cream); border:1px solid rgba(232,201,106,.65); padding:4px 16px;border-radius:999px; font-weight:800;font-size:.8rem;transition:.25s; } .eb-exit:hover{background:var(--gold-2);color:var(--green);border-color:var(--gold-2)} /* ================= ٥) بوابة .edit-only ================= */ /* مخفية تمامًا افتراضيًا — وغير تفاعلية حتى لو حاول أحد إظهارها */ .edit-only{ display:none !important; pointer-events:none; } body.edit-mode .edit-only:not([hidden]){ display:inline-flex !important; pointer-events:auto; } /* استثناءات لنوع العرض المناسب لكل عنصر داخل وضع التحرير */ body.edit-mode .edit-only.block:not([hidden]){display:block !important} body.edit-mode .edit-only.flex:not([hidden]){display:flex !important} body.edit-mode .sec-actions .edit-only:not([hidden]){display:inline-flex !important} /* ================= ٦) الهيكل العلوي: الترويسة والتنقل ================= */ .site-chrome{ position:fixed;inset-inline:0;top:0;z-index:var(--z-chrome); transition:top .3s ease; } /* في وضع التحرير يُدفع الشريط كله أسفل شريط التحرير فلا يتراكبان */ body.edit-mode .site-chrome{top:var(--eb-h)} header{ position:relative; display:flex;align-items:center;gap:8px; padding:9px var(--gutter); min-height:66px; background:rgba(30,70,49,.94); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:2px solid var(--gold); transition:background .4s,box-shadow .4s; } .logo{ display:flex;align-items:center;gap:10px;flex-shrink:0; color:var(--cream);margin-inline-end:auto; } .logo img{ inline-size:46px;block-size:46px;object-fit:contain; filter:drop-shadow(0 2px 6px rgba(0,0,0,.35)); } .logo span{ font-family:var(--font-head);font-size:1.35rem;color:var(--gold-3);white-space:nowrap; } nav{ display:flex;align-items:center;justify-content:center; gap:2px;flex-wrap:wrap;margin-inline-end:auto; } nav a{ color:var(--beige);font-weight:600;font-size:.86rem; padding:8px 10px;border-radius:6px;position:relative;transition:.3s; } nav a::after{ content:"";position:absolute;bottom:4px;inset-inline:11px;height:2px; background:var(--gold-2);transform:scaleX(0);transition:transform .3s; transform-origin:center; } nav a:hover,nav a.active{color:var(--gold-3)} nav a:hover::after,nav a.active::after{transform:scaleX(1)} .nav-toggle{ display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px; inline-size:42px;block-size:42px;flex-shrink:0; background:transparent;border:1px solid var(--gold-2);border-radius:8px;transition:.3s; } .nav-toggle:hover{background:rgba(232,201,106,.14)} .nav-toggle span{ display:block;inline-size:18px;block-size:2px;border-radius:2px; background:var(--gold-3);transition:.25s; } .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0} .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* ---------- مفتاح وضع التحرير (.edit-toggle) ---------- */ .edit-toggle{ display:inline-flex;align-items:center;gap:9px;flex-shrink:0; background:rgba(250,245,234,.09); border:1px solid rgba(232,201,106,.55); color:var(--beige); border-radius:999px;padding:6px 14px; font-family:var(--font-body);font-size:.82rem;font-weight:800; transition:.3s;white-space:nowrap; } .edit-toggle:hover{border-color:var(--gold-3);background:rgba(250,245,234,.16)} .et-track{ position:relative;display:inline-block;flex-shrink:0; inline-size:38px;block-size:20px;border-radius:999px; background:rgba(20,46,32,.75); border:1px solid rgba(232,201,106,.4); transition:.3s; } .et-knob{ position:absolute;top:2px;inset-inline-start:2px; inline-size:14px;block-size:14px;border-radius:50%; background:var(--beige-3); transition:transform .28s ease,background .28s ease; } .et-label{font-weight:800;line-height:1.4} /* الحالة المفعّلة / المطفأة */ .edit-toggle[aria-pressed="true"], body.edit-mode .edit-toggle{ background:linear-gradient(120deg,var(--gold),var(--gold-2)); color:var(--green); border-color:var(--gold-3); box-shadow:0 8px 22px rgba(201,162,39,.35); } .edit-toggle[aria-pressed="true"] .et-track, body.edit-mode .edit-toggle .et-track{ background:var(--green);border-color:var(--green-3); } .edit-toggle[aria-pressed="true"] .et-knob, body.edit-mode .edit-toggle .et-knob{ background:var(--gold-3); transform:translateX(-18px); /* RTL: ينزلق نحو نهاية المسار (يسارًا) */ } /* ================= ٧) الواجهة (.hero) ================= */ .hero{ position:relative;overflow:hidden; min-height:100vh; display:flex;align-items:center;justify-content:center; text-align:center;color:var(--cream); padding:var(--hero-pt) 20px 80px; } body.edit-mode .hero{padding-block-start:calc(var(--hero-pt) + var(--eb-h))} .hero-bg{ position:absolute;inset:-6%;z-index:0; background:url("assets/hero.jpg") center/cover no-repeat; animation:kenburns 26s ease-in-out infinite alternate; } @keyframes kenburns{from{transform:scale(1) translateY(0)}to{transform:scale(1.14) translateY(-2%)}} .hero::before{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(180deg,rgba(30,70,49,.68) 0%,rgba(30,70,49,.4) 45%,rgba(20,15,5,.85) 100%); } .hero-content{position:relative;z-index:2;padding:20px;max-width:900px} .hero .crest{ inline-size:148px;block-size:auto;margin:0 auto 18px;display:block; filter:drop-shadow(0 8px 22px rgba(0,0,0,.55)); animation:floaty 5s ease-in-out infinite; } @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}} .hero h1,#heroTitle{ font-family:var(--font-head); font-size:clamp(2.2rem,6vw,4.4rem); color:var(--gold-3);line-height:1.5; text-shadow:0 4px 24px rgba(0,0,0,.6); animation:riseIn 1.2s .2s both; } .hero .sub,#heroSub{ font-size:clamp(1rem,2.4vw,1.45rem); color:var(--beige);margin-top:12px;font-weight:400;line-height:1.9; animation:riseIn 1.2s .5s both; } .hero .divider{ inline-size:220px;block-size:2px;margin:26px auto;position:relative; background:linear-gradient(90deg,transparent,var(--gold-2),transparent); animation:riseIn 1.2s .7s both; } .hero .divider::before{ content:"";position:absolute;top:-5px; inset-inline:0;margin-inline:auto; /* توسيط منطقي بلا left/right */ inline-size:10px;block-size:10px; background:var(--gold-2); transform:rotate(45deg); } .hero .bism,#heroFounder{ font-family:var(--font-poem); font-size:1.3rem;color:var(--gold-3);opacity:.92; animation:riseIn 1.2s .9s both; } @keyframes riseIn{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}} .scroll-hint{ position:absolute;inset-block-end:26px; inset-inline:0;margin-inline:auto;inline-size:fit-content; z-index:2;color:var(--gold-3);font-size:.85rem;text-align:center; animation:bounce 2s infinite; } .scroll-hint svg{display:block;margin:6px auto 0;inline-size:22px;block-size:22px} @keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}} /* ================= ٨) ترويسات الأقسام والعناصر المشتركة ================= */ .sec-head{text-align:center;margin-bottom:56px} .sec-head .orn{ display:flex;align-items:center;justify-content:center;gap:14px; color:var(--gold);margin-bottom:10px;line-height:1; } .sec-head .orn::before,.sec-head .orn::after{ content:"";inline-size:70px;block-size:1px; background:linear-gradient(90deg,transparent,var(--gold)); } .sec-head .orn::after{background:linear-gradient(90deg,var(--gold),transparent)} .sec-head h2{ font-size:clamp(1.8rem,4.5vw,2.9rem); color:var(--green);position:relative;display:inline-block; } .sec-head h2::after{ content:"";position:absolute;bottom:-12px; inset-inline:0;margin-inline:auto; inline-size:64px;block-size:3px;border-radius:3px; background:linear-gradient(90deg,var(--gold),var(--green-3)); } .sec-head p{ color:var(--brown);margin-top:24px; max-width:660px;margin-inline:auto;font-size:1.05rem; } /* صف أزرار الإضافة أسفل ترويسة كل قسم */ .sec-actions{ display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap; margin:-30px auto 36px;position:relative;z-index:2; } /* زر الإضافة الذهبي */ .btn-add{ display:inline-flex;align-items:center;gap:8px; background:linear-gradient(120deg,var(--gold),var(--gold-2)); color:var(--green); border:1px solid var(--gold-3); padding:9px 22px;border-radius:999px; font-family:var(--font-body);font-weight:800;font-size:.9rem; box-shadow:0 8px 20px rgba(201,162,39,.3); transition:.3s; } .btn-add:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(201,162,39,.45)} .btn-add:active{transform:translateY(0)} /* حالات الفراغ */ .empty{ text-align:center;color:var(--brown);opacity:.85; font-size:1rem;padding:26px 16px;margin:0 auto;max-width:660px; position:relative;z-index:1; } .empty::before{ content:"◆";display:block;color:var(--gold);opacity:.6; font-size:.85rem;margin-bottom:8px;line-height:1; } /* على الأقسام الخضراء الداكنة */ #achievements .empty, #recordings .empty, #signatories .empty, #registry .empty{color:var(--beige);opacity:.8} #achievements .empty::before, #recordings .empty::before, #signatories .empty::before, #registry .empty::before{color:var(--gold-3);opacity:.75} /* معرّفات حالات الفراغ التي يتحكم بها الجافاسكربت */ #treeEmpty,#newsEmpty,#achEmpty,#historyEmpty,#storiesEmpty,#poemEmpty,#recEmpty, #contribEmpty,#fundEmpty,#sigEmpty{ transition:opacity .3s ease; } /* ================= ٩) شريط المكان (معرض الصور) ================= */ .najd-strip{ display:grid;grid-template-columns:repeat(3,1fr);gap:18px; max-width:1100px;margin-inline:auto; } .najd-card{ position:relative;border-radius:var(--radius);overflow:hidden;block-size:250px; box-shadow:var(--shadow); border:1px solid rgba(201,162,39,.4); background:var(--beige-2); } .najd-card img{ inline-size:100%;block-size:100%;object-fit:cover; transition:transform 1.2s ease; } .najd-card:hover img{transform:scale(1.12)} .najd-card figcaption{ position:absolute;inset:auto 0 0 0; padding:34px 16px 14px;color:var(--cream);font-weight:700; font-family:var(--font-head);font-size:1.1rem; background:linear-gradient(transparent,rgba(30,70,49,.92)); } /* ================= ١٠) شجرة العائلة ================= */ .tree-toolbar{ display:flex;justify-content:center;align-items:center;gap:14px; flex-wrap:wrap;margin-bottom:34px; position:relative;z-index:1; } #backBtn{ display:none;align-items:center;gap:8px; background:var(--green);color:var(--cream); border:1px solid var(--gold-2); padding:10px 22px;border-radius:30px; font-family:var(--font-body);font-size:1rem;font-weight:700; transition:.3s; } #backBtn:hover{ background:var(--green-3);transform:translateY(-2px); box-shadow:0 8px 20px rgba(30,70,49,.35); } #crumbs{ font-size:.95rem;color:var(--brown);font-weight:600; text-align:center;line-height:2; } #crumbs b{color:var(--green)} #crumbs span{color:var(--gold)} #treeView{ display:flex;flex-direction:column;align-items:center; overflow-x:auto;padding-bottom:20px; position:relative;z-index:1; scrollbar-width:thin;scrollbar-color:var(--gold) var(--beige-2); } #treeView::-webkit-scrollbar{height:10px} #treeView::-webkit-scrollbar-track{background:var(--beige-2);border-radius:10px} #treeView::-webkit-scrollbar-thumb{background:var(--gold);border-radius:10px} .tnode{display:flex;flex-direction:column;align-items:center;position:relative} /* الجذع وفروع الربط الذهبية */ .trunk{ inline-size:2px;block-size:46px; background:linear-gradient(180deg,var(--gold-2),var(--gold)); transform-origin:top; animation:growY .5s .1s both; } @keyframes growY{from{transform:scaleY(0)}to{transform:scaleY(1)}} .trow{ display:flex;justify-content:center;align-items:flex-start; list-style:none;position:relative; margin:0;padding:0; } .trow>li{ position:relative;padding:46px 12px 0; display:flex;flex-direction:column;align-items:center; } /* الخط العمودي النازل من الفرع */ .trow>li::before{ content:"";position:absolute;top:0; inset-inline:0;margin-inline:auto; inline-size:2px;block-size:46px; background:var(--gold); transform-origin:top; animation:growY .45s calc(var(--d,0) * 1ms + .25s) both; } /* الخط الأفقي الذي يصل الأشقاء */ .trow>li::after{ content:"";position:absolute;top:0; inset-inline:0;block-size:2px; background:var(--gold); transform-origin:center; animation:growX .5s .2s both; } .trow>li:first-child::after{inset-inline-start:50%} .trow>li:last-child::after{inset-inline-end:50%} .trow>li:only-child::after{display:none} @keyframes growX{from{transform:scaleX(0)}to{transform:scaleX(1)}} /* ---------- بطاقة الفرد (.tcard) ---------- */ .tcard{ position:relative; inline-size:190px; background:var(--cream); border:1px solid rgba(201,162,39,.55); border-radius:var(--radius); padding:18px 14px 14px; text-align:center; box-shadow:0 8px 22px rgba(42,35,24,.12); animation:pop .55s calc(var(--d,0) * 1ms + .35s) both; transition:transform .3s,box-shadow .3s; } @keyframes pop{from{opacity:0;transform:translateY(26px) scale(.92)}to{opacity:1;transform:none}} .tcard:hover{transform:translateY(-6px);box-shadow:0 16px 34px rgba(30,70,49,.22)} .tcard.clickable{cursor:pointer} .tcard.clickable::before{ content:"";position:absolute;inset:-3px;border-radius:17px; border:2px solid var(--gold-2);opacity:0;transition:.3s;pointer-events:none; } .tcard.clickable:hover::before{opacity:1;animation:pulse 1.6s infinite} @keyframes pulse{ 0%,100%{box-shadow:0 0 0 0 rgba(212,175,55,.45)} 50%{box-shadow:0 0 0 9px rgba(212,175,55,0)} } .tphoto{ inline-size:96px;block-size:96px;margin:0 auto 12px; border-radius:50%; border:3px solid var(--gold-2); background:var(--beige-2); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px; color:var(--brown);font-size:.7rem;overflow:hidden;position:relative; } .tphoto img{inline-size:100%;block-size:100%;object-fit:cover;border-radius:50%} .tphoto:has(img) span{display:none} .tphoto svg{inline-size:34px;block-size:34px;opacity:.55;flex-shrink:0} .tcard h4{ font-size:1.02rem;color:var(--green); line-height:1.65;min-height:2.6em; display:flex;align-items:center;justify-content:center; } .tmeta{font-size:.82rem;color:var(--brown);margin-top:3px;line-height:1.7} .tmeta.age{font-weight:700;color:var(--green-3)} .tbadge{ display:inline-block;margin-top:8px; font-size:.72rem;font-weight:800; background:rgba(63,122,84,.12);color:var(--green-2); border:1px solid rgba(63,122,84,.35); padding:2px 10px;border-radius:20px; } .founder-badge{ display:inline-block; background:var(--green);color:var(--gold-3); font-family:var(--font-head); padding:4px 18px;border-radius:24px; font-size:.95rem;margin-bottom:12px; border:1px solid var(--gold-2); } .tcard.dead{filter:grayscale(.35)} .tcard.dead .tbadge{ background:rgba(107,79,46,.1);color:var(--brown); border-color:rgba(107,79,46,.35); } /* متغيّرات البطاقة */ .tcard.founder{ inline-size:320px;padding:26px 22px 18px; border-width:2px; background:linear-gradient(160deg,var(--cream) 60%,rgba(232,201,106,.18)); } .tcard.founder .tphoto{inline-size:170px;block-size:170px;border-width:4px} .tcard.founder .tphoto svg{inline-size:58px;block-size:58px} .tcard.founder h4{font-size:1.7rem;min-height:auto} .tcard.focus{ inline-size:250px;border-color:var(--green-3);border-width:2px; background:linear-gradient(160deg,var(--cream) 60%,rgba(63,122,84,.12)); } .tcard.focus .tphoto{inline-size:120px;block-size:120px} .tcard.focus h4{font-size:1.3rem;min-height:auto} .tcard.mini{inline-size:150px;padding:12px 10px} .tcard.mini .tphoto{inline-size:58px;block-size:58px} .tcard.mini .tphoto svg{inline-size:22px;block-size:22px} .tcard.mini h4{font-size:.9rem;min-height:auto} .tcard.mini .tmeta{font-size:.72rem} .tcard.son{inline-size:180px} .tcard.kid{inline-size:160px;padding:14px 10px} .tcard.kid .tphoto{inline-size:64px;block-size:64px} .tcard.kid .tphoto svg{inline-size:24px;block-size:24px} .tcard.kid h4{font-size:.92rem;min-height:auto} .tree-note{ text-align:center;color:var(--brown);font-size:.9rem;margin-top:26px; position:relative;z-index:1; } /* ================= ١١) أدوات البطاقات (.card-tools) ================= */ /* تُرسم في وضع التحرير فقط (الجافاسكربت لا يولّدها إلا حينها) */ .card-tools{ position:absolute;inset-block-start:6px;inset-inline-end:6px;z-index:5; display:inline-flex;align-items:center;gap:4px; opacity:.35;transform:translateY(-3px); transition:opacity .25s ease,transform .25s ease; } .card-tools:hover, :hover > .card-tools{opacity:1;transform:none} .tool-btn{ display:inline-flex;align-items:center;justify-content:center; inline-size:28px;block-size:28px;padding:0;border-radius:8px; background:var(--cream);color:var(--green); border:1px solid rgba(201,162,39,.55); box-shadow:0 3px 10px rgba(42,35,24,.18); transition:.25s; } .tool-btn svg,.tool-btn img{inline-size:15px;block-size:15px;object-fit:contain} .tool-btn:hover{background:var(--gold-2);border-color:var(--gold-2);transform:translateY(-1px)} .tool-btn.danger{color:var(--danger);border-color:rgba(140,47,36,.45)} .tool-btn.danger:hover{background:var(--danger);color:#fff;border-color:var(--danger)} /* البطاقات التي لا تُربك أدواتها خطوط الوصل */ .tcard .card-tools{inset-block-start:4px;inset-inline-end:4px} .tcard .card-tools .tool-btn{inline-size:24px;block-size:24px} /* ================= ١٢) المرشحات (.filters) ================= */ .filters{ display:flex;justify-content:center;gap:10px;flex-wrap:wrap; margin-bottom:44px;position:relative;z-index:1; } .filters button{ background:transparent;color:var(--green); border:1px solid rgba(30,70,49,.32); padding:8px 20px;border-radius:24px; font-family:var(--font-body);font-weight:700;font-size:.92rem; transition:.3s; } .filters button:hover{border-color:var(--gold);color:var(--green-2)} .filters button.active{background:var(--green);color:var(--gold-3);border-color:var(--green)} /* على الأقسام الخضراء الداكنة (الإنجازات / التسجيلات / السجل) */ #achievements .filters button, #recordings .filters button, #registry .filters button{color:var(--beige);border-color:rgba(232,201,106,.5)} #achievements .filters button:hover, #recordings .filters button:hover, #registry .filters button:hover{border-color:var(--gold-3);color:var(--gold-3)} #achievements .filters button.active, #recordings .filters button.active, #registry .filters button.active{ background:var(--gold-2);color:var(--green);border-color:var(--gold-2); } /* ================= ١٣) أخبار العائلة ================= */ .news-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px; max-width:1200px;margin-inline:auto;position:relative;z-index:1; } .news-card{ position:relative;overflow:hidden; display:flex;flex-direction:column; background:var(--cream); border:1px solid rgba(201,162,39,.45); border-radius:var(--radius); padding:22px 22px 18px; box-shadow:0 8px 22px rgba(42,35,24,.1); transition:transform .35s,box-shadow .35s; animation:pop .5s both; } .news-card:hover{transform:translateY(-7px);box-shadow:0 18px 36px rgba(30,70,49,.18)} .news-card.hide{display:none} .news-card::before{ content:"";position:absolute;top:0;inset-inline-start:0; inline-size:6px;block-size:100%;background:var(--gold-2); } .news-card.t-زواج::before{background:linear-gradient(180deg,var(--gold-2),var(--gold-3))} .news-card.t-وفاة::before{background:linear-gradient(180deg,#6b4f2e,#8a6a42)} .news-card.t-تخرج::before{background:linear-gradient(180deg,var(--green-3),var(--green))} .news-top{display:flex;align-items:center;gap:12px;margin-bottom:12px} .news-icon{ inline-size:46px;block-size:46px;border-radius:12px;flex-shrink:0; display:flex;align-items:center;justify-content:center; background:rgba(201,162,39,.12); border:1px solid rgba(201,162,39,.45); color:var(--gold); } .news-icon svg{inline-size:24px;block-size:24px} .news-card.t-وفاة .news-icon{background:rgba(107,79,46,.1);border-color:rgba(107,79,46,.35);color:var(--brown)} .news-card.t-تخرج .news-icon{background:rgba(63,122,84,.12);border-color:rgba(63,122,84,.35);color:var(--green-2)} .news-type{font-size:.75rem;font-weight:800;color:var(--gold)} .news-card.t-وفاة .news-type{color:var(--brown)} .news-card.t-تخرج .news-type{color:var(--green-2)} .news-person{font-family:var(--font-head);font-size:1.08rem;color:var(--green);line-height:1.6} .news-card h3{font-family:var(--font-head);font-size:1.08rem;color:var(--ink);margin-bottom:8px} .news-card p{font-size:.92rem;color:var(--brown);line-height:1.85;flex:1} .news-date{ display:inline-block;margin-top:14px; font-size:.8rem;font-weight:700;color:var(--green-2); background:rgba(63,122,84,.1); padding:4px 14px;border-radius:16px; border:1px solid rgba(63,122,84,.3); } /* ================= ١٤) سجل الإنجازات ================= */ #achievements{ background:var(--green);position:relative;overflow:hidden; } #achievements::before{ content:"";position:absolute;inset:0;opacity:.07;pointer-events:none; background: repeating-linear-gradient(45deg,transparent 0 26px,var(--gold-3) 26px 27px), repeating-linear-gradient(-45deg,transparent 0 26px,var(--gold-3) 26px 27px); } #achievements .sec-head h2{color:var(--gold-3)} #achievements .sec-head h2::after{background:linear-gradient(90deg,var(--gold-3),transparent)} #achievements .sec-head p{color:var(--beige)} #achievements .sec-head .orn{color:var(--gold-3)} .ach-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px; max-width:1200px;margin-inline:auto;position:relative;z-index:1; } .ach-card{ position:relative; background:var(--cream); border-radius:var(--radius); border-inline-start:5px solid var(--gold-2); padding:24px; box-shadow:0 10px 26px rgba(0,0,0,.25); transition:transform .35s,box-shadow .35s,opacity .4s; animation:pop .5s both; } .ach-card:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(0,0,0,.35)} .ach-card.hide{display:none} .ach-top{display:flex;align-items:center;gap:14px;margin-bottom:14px} .ach-icon{ inline-size:52px;block-size:52px;border-radius:12px;flex-shrink:0; display:flex;align-items:center;justify-content:center; background:rgba(30,70,49,.08); border:1px solid rgba(201,162,39,.5); color:var(--green-2); } .ach-icon svg{inline-size:28px;block-size:28px} .ach-cat{font-size:.75rem;font-weight:800;color:var(--gold);letter-spacing:.4px} .ach-person{font-family:var(--font-head);font-size:1.15rem;color:var(--green);line-height:1.7} .ach-card h3{font-family:var(--font-head);font-size:1.15rem;color:var(--ink);margin-bottom:8px} .ach-card p{font-size:.92rem;color:var(--brown);line-height:1.85} .ach-date{ display:inline-block;margin-top:14px; font-size:.8rem;font-weight:700;color:var(--green-2); background:rgba(63,122,84,.1); padding:4px 14px;border-radius:16px; border:1px solid rgba(63,122,84,.3); } /* الوصف: ثلاثة أسطر بالضبط ثم يُفتح بالكامل */ .ach-desc{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; overflow:hidden; } .ach-card.open .ach-desc{ display:block; -webkit-line-clamp:none; line-clamp:none; overflow:visible; } .ach-more{ display:inline-block;margin-top:10px; background:none;border:0;padding:0; color:var(--green-3);font-weight:800;font-size:.82rem; border-bottom:1px dashed rgba(63,122,84,.6); transition:.25s; } .ach-more:hover{color:var(--gold);border-bottom-color:var(--gold)} .ach-card.open .ach-more{color:var(--gold);border-bottom-color:var(--gold)} /* ================= ١٥) تاريخ العائلة (الخط الزمني) ================= */ .timeline{ max-width:900px;margin-inline:auto; position:relative;padding:10px 0; z-index:1; } /* الخط الذهبي العمودي في المنتصف (توسيط منطقي) */ .timeline::before{ content:"";position:absolute;top:0;bottom:0; inset-inline:0;margin-inline:auto; inline-size:3px;border-radius:3px; background:linear-gradient(180deg,var(--gold-2),var(--green-3),var(--gold-2)); } .tl-item{ position:relative;inline-size:50%; padding-inline-end:44px;padding-block-end:56px; } .tl-item:nth-child(even){ margin-inline-start:50%; padding-inline-start:44px;padding-inline-end:0; } .tl-dot{ position:absolute;inset-block-start:8px;inset-inline-end:-9px; inline-size:18px;block-size:18px;border-radius:50%; background:var(--gold-2); border:3px solid var(--green); box-shadow:0 0 0 5px rgba(201,162,39,.25); z-index:2; transition:.3s; } .tl-item:nth-child(even) .tl-dot{inset-inline-end:auto;inset-inline-start:-9px} .tl-item:hover .tl-dot{transform:scale(1.25);box-shadow:0 0 0 8px rgba(201,162,39,.2)} .tl-box{ position:relative; background:var(--cream); border:1px solid rgba(201,162,39,.45); border-radius:12px; padding:20px 22px; box-shadow:0 8px 20px rgba(42,35,24,.1); transition:transform .3s,box-shadow .3s; } .tl-box:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(30,70,49,.18)} .tl-year{ font-family:var(--font-head); color:var(--gold);font-size:1.15rem;margin-bottom:6px; } .tl-box h3{font-size:1.08rem;color:var(--green);margin-bottom:6px} .tl-box p{font-size:.92rem;color:var(--brown);line-height:1.9} /* ================= ١٦) قصص الأجداد ================= */ .stories-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px; max-width:1150px;margin-inline:auto;position:relative;z-index:1; } .story-card{ position:relative; display:flex;flex-direction:column; background:var(--cream); border:1px solid rgba(201,162,39,.5); border-radius:var(--radius); overflow:hidden; box-shadow:0 8px 22px rgba(42,35,24,.1); transition:transform .35s,box-shadow .35s; } .story-card:hover{transform:translateY(-7px);box-shadow:0 18px 38px rgba(30,70,49,.2)} .story-cover{ position:relative;min-height:118px; background:linear-gradient(160deg,var(--green) 0%,var(--green-2) 100%); color:var(--gold-3); padding:22px 22px 18px; } .story-cover::after{ content:"";position:absolute;inset:8px;border:1px solid rgba(232,201,106,.35); border-radius:8px;pointer-events:none; } .story-cover .story-mark{ font-size:.75rem;font-weight:800;color:var(--gold-2); margin-bottom:8px; } .story-cover h3{ position:relative;z-index:1; font-family:var(--font-head);font-size:1.25rem;line-height:1.7; } .story-body{ display:flex;flex-direction:column;flex:1; padding:18px 20px 20px; } .story-era{font-size:.82rem;font-weight:700;color:var(--gold);margin-bottom:10px} .story-teaser{font-size:.92rem;color:var(--brown);line-height:1.9;flex:1} .story-full{ display:none; font-family:var(--font-poem); font-size:1rem;color:var(--ink);line-height:2.1; margin-top:12px;padding-top:12px; border-top:1px dashed rgba(201,162,39,.6); } .story-card.open .story-full{display:block} .story-card.open .story-teaser{display:none} .story-more{ align-self:flex-start;margin-top:16px; background:transparent;color:var(--green); border:1px solid var(--gold-2); padding:7px 18px;border-radius:24px; font-family:var(--font-body);font-weight:800;font-size:.85rem; transition:.25s; } .story-more:hover{background:var(--green);color:var(--gold-3)} /* ================= ١٧) ديوان الشعر ================= */ .poem-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px; max-width:1150px;margin-inline:auto;position:relative;z-index:1; } .poem-card{ position:relative; display:flex;flex-direction:column; background:var(--cream); border:1px solid rgba(201,162,39,.5); border-radius:var(--radius); overflow:hidden; box-shadow:0 8px 22px rgba(42,35,24,.1); transition:transform .35s,box-shadow .35s; } .poem-card:hover{transform:translateY(-7px) rotate(-.4deg);box-shadow:0 18px 38px rgba(30,70,49,.2)} .poem-head{ position:relative; background:var(--green);color:var(--gold-3); padding:16px 20px; } .poem-head::after{ content:"";position:absolute;bottom:-1px;inset-inline:0;block-size:3px; background:linear-gradient(90deg,var(--gold-2),transparent); } .poem-head h3{font-size:1.22rem;line-height:1.7} .poem-body{ display:flex;flex-direction:column;justify-content:space-between;flex:1; padding:18px 20px; } /* الأبيات */ .poem-verse{ font-family:var(--font-poem); font-size:1.15rem;color:var(--green-2); line-height:2.3;text-align:center;direction:rtl; } /* الصدر والعجز — شبكة بعمودين متساويين وفاصل رأسي واضح */ .verse-row{ display:grid;grid-template-columns:1fr 1fr; align-items:stretch; direction:rtl; } .sadr,.ajz{ font-family:var(--font-poem); font-size:1.12rem;line-height:2.5; color:var(--green-2); text-align:start; padding:6px 16px; min-width:0; overflow-wrap:break-word; } .sadr{border-inline-end:1px solid rgba(201,162,39,.65)} .poem-verse .verse-row{ margin:4px 0; border-block-end:1px dashed rgba(201,162,39,.35); padding-block-end:4px; } .poem-verse .verse-row:last-child{border-block-end:0} /* وضع الأبيات المرقّمة (صدر/عجز لكل بطاقة) */ .pairs-list{display:grid;gap:12px;margin:14px 0} .verse-pair{ position:relative; background:rgba(243,234,216,.6); border:1px solid rgba(201,162,39,.45); border-radius:12px; padding:12px 14px; } .verse-pair-head{ display:flex;align-items:center;justify-content:space-between;gap:10px; font-size:.78rem;font-weight:800;color:var(--green-3); margin-bottom:8px;padding-bottom:8px; border-block-end:1px dashed rgba(201,162,39,.5); } .pairs-tools{display:inline-flex;align-items:center;gap:6px} .pairs-tools .tool-btn{inline-size:26px;block-size:26px} .poem-meta{ display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap; margin-top:16px;padding-top:12px; border-top:1px dashed rgba(201,162,39,.6); font-size:.85rem;color:var(--brown); } .poem-meta b{color:var(--green);font-family:var(--font-head);font-weight:700;font-size:1rem} /* ================= ١٨) التسجيلات الصوتية (شكل المسجّل) ================= */ #recordings{background:var(--green);position:relative;overflow:hidden} #recordings::before{ content:"";position:absolute;inset:0;opacity:.07;pointer-events:none; background: repeating-linear-gradient(45deg,transparent 0 26px,var(--gold-3) 26px 27px), repeating-linear-gradient(-45deg,transparent 0 26px,var(--gold-3) 26px 27px); } #recordings .sec-head h2{color:var(--gold-3)} #recordings .sec-head h2::after{background:linear-gradient(90deg,var(--gold-3),transparent)} #recordings .sec-head p{color:var(--beige)} #recordings .sec-head .orn{color:var(--gold-3)} .rec-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px; max-width:1150px;margin-inline:auto;position:relative;z-index:1; } .rec-card{ position:relative; background:var(--cream); border:1px solid rgba(201,162,39,.5); border-radius:16px; overflow:hidden; box-shadow:0 10px 26px rgba(0,0,0,.25); transition:transform .35s,box-shadow .35s; } .rec-card:hover{transform:translateY(-7px);box-shadow:0 20px 40px rgba(0,0,0,.35)} .rec-deck{ position:relative; background:linear-gradient(180deg,#1a3a28,#142e20); padding:18px 18px 14px; } .rec-reels{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px} .rec-reel{ inline-size:52px;block-size:52px;border-radius:50%;flex-shrink:0; position:relative; background:radial-gradient(circle at 40% 35%,#3a5c46,#0e2216 70%); border:3px solid var(--gold-2); } .rec-reel::before{ content:"";position:absolute;inset:14px;border-radius:50%; background:var(--gold-3);opacity:.85; } .rec-reel::after{ content:"";position:absolute;inset:6px;border-radius:50%; background:repeating-conic-gradient(rgba(232,201,106,.25) 0 12deg,transparent 12deg 24deg); } .rec-tape{ flex:1;block-size:8px;border-radius:8px; background:linear-gradient(90deg,#1a1208,#3a2a14,#1a1208); border:1px solid rgba(201,162,39,.4); } .rec-wave{ display:flex;align-items:center;justify-content:center;gap:3px; block-size:36px;margin-bottom:4px; } .rec-wave i{ display:block;inline-size:3px;border-radius:2px; background:var(--gold-3);opacity:.75; animation:wavePulse 1.4s ease-in-out infinite; animation-play-state:paused; } .rec-card:hover .rec-wave i{animation-play-state:running} @keyframes wavePulse{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}} .rec-controls{display:flex;align-items:center;gap:12px} .rec-play{ inline-size:42px;block-size:42px;border-radius:50%;flex-shrink:0; display:flex;align-items:center;justify-content:center; background:rgba(232,201,106,.12); border:2px solid var(--gold-2); color:var(--gold-3);cursor:default; } .rec-play svg{inline-size:18px;block-size:18px} .rec-bar{ position:relative;flex:1;block-size:6px;border-radius:6px; background:rgba(243,234,216,.18);overflow:hidden; } .rec-bar span{ display:block;inline-size:0;block-size:100%;border-radius:6px; background:var(--gold-2);transition:width .3s ease; } .rec-time{ font-size:.72rem;font-weight:700;min-width:64px; color:rgba(232,201,106,.8); text-align:left;direction:ltr;unicode-bidi:embed; } .rec-body{padding:16px 18px 18px} .rec-kind{ display:inline-block;margin-bottom:8px; font-size:.72rem;font-weight:800;color:var(--green-2); background:rgba(63,122,84,.1); border:1px solid rgba(63,122,84,.3); padding:2px 10px;border-radius:14px; } .rec-body h3{font-size:1.1rem;color:var(--green);line-height:1.7;margin-bottom:8px} .rec-meta{ display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap; font-size:.82rem;color:var(--brown); } .rec-meta b{color:var(--green);font-family:var(--font-head);font-size:.95rem;font-weight:700} /* بديل «قريبًا» — منطقة المشغّل الحقيقي */ .rec-soon{ margin-top:12px;text-align:center; font-size:.8rem;font-weight:700;color:var(--brown); background:rgba(201,162,39,.12); border:1px dashed rgba(201,162,39,.5); padding:8px 12px;border-radius:10px; } .rec-audio{ display:flex;flex-direction:column;gap:8px; margin-top:14px;padding-top:12px; border-top:1px dashed rgba(201,162,39,.55); } /* ================= ١٩) السجل والإحصاءات ================= */ #registry{ background:var(--green);position:relative;overflow:hidden;text-align:center; } #registry::before{ content:"";position:absolute;inset:0;opacity:.06;pointer-events:none; background: repeating-linear-gradient(45deg,transparent 0 26px,var(--gold-3) 26px 27px), repeating-linear-gradient(-45deg,transparent 0 26px,var(--gold-3) 26px 27px); } #registry .sec-head h2{color:var(--gold-3)} #registry .sec-head h2::after{background:linear-gradient(90deg,var(--gold-3),transparent)} #registry .sec-head p{color:var(--beige)} #registry .sec-head .orn{color:var(--gold-3)} .stats{ display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:20px; max-width:1050px;margin-inline:auto;position:relative;z-index:1; } .stat{ position:relative; background:rgba(250,245,234,.06); border:1px solid rgba(232,201,106,.4); border-radius:16px; padding:30px 14px; transition:.35s; } .stat:hover{background:rgba(250,245,234,.12);transform:translateY(-6px);border-color:var(--gold-3)} .stat .num{ font-family:var(--font-head); font-size:3rem;color:var(--gold-3);line-height:1.2; font-variant-numeric:tabular-nums; } .stat .lbl{color:var(--beige);font-weight:700;margin-top:6px;font-size:.98rem} .stat .sub{color:rgba(243,234,216,.6);font-size:.8rem;margin-top:4px} /* ================= ٢٠) التذييل ================= */ footer{ position:relative;z-index:1; background:var(--dark);color:var(--beige); text-align:center; padding:46px var(--gutter) 30px; border-top:3px solid var(--gold); } footer .f-logo{ inline-size:88px;block-size:auto;margin:0 auto 12px; filter:drop-shadow(0 6px 16px rgba(0,0,0,.4)); } footer .f-name{font-family:var(--font-head);font-size:1.5rem;color:var(--gold-3)} footer .f-dua{ font-family:var(--font-poem); font-size:1.08rem;color:var(--beige); margin:14px auto;opacity:.85;max-width:720px; } footer .f-copy{font-size:.8rem;color:rgba(243,234,216,.55);margin-top:18px;line-height:2} #footRegion{color:var(--gold-2);font-weight:800} #footUpdated{color:rgba(243,234,216,.75);direction:ltr;unicode-bidi:embed;display:inline-block} /* ================= ٢١) النافذة المنبثقة (.modal) ================= */ .modal{ position:fixed;inset:0;z-index:var(--z-modal); display:flex;align-items:center;justify-content:center; padding:20px; background:rgba(20,46,32,.72); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); opacity:0;visibility:hidden;pointer-events:none; transition:opacity .32s ease,visibility .32s ease; } .modal.open{opacity:1;visibility:visible;pointer-events:auto} .modal-box{ position:relative; inline-size:100%;max-width:720px; max-height:88vh;overflow:auto; background:linear-gradient(165deg,var(--cream),var(--beige-2)); border:2px solid var(--gold); border-radius:var(--radius-lg); padding:34px 28px 26px; box-shadow:0 30px 70px rgba(0,0,0,.45); transform:translateY(26px) scale(.96); transition:transform .32s ease; scrollbar-width:thin;scrollbar-color:var(--gold) var(--beige-2); } .modal.open .modal-box{transform:none} .modal-box::-webkit-scrollbar{width:9px} .modal-box::-webkit-scrollbar-track{background:var(--beige-2);border-radius:9px} .modal-box::-webkit-scrollbar-thumb{background:var(--gold);border-radius:9px} .modal-close{ position:absolute;inset-block-start:14px;inset-inline-end:14px; inline-size:34px;block-size:34px;border-radius:50%; display:flex;align-items:center;justify-content:center; background:var(--green);color:var(--gold-3); border:1px solid var(--gold); transition:.3s; } .modal-close svg{inline-size:16px;block-size:16px} .modal-close:hover{background:var(--gold);color:var(--green);transform:rotate(90deg)} #modalTitle{ font-family:var(--font-head); font-size:1.5rem;color:var(--green); text-align:center;line-height:1.7; padding-inline:34px;margin-bottom:6px; } #modalBody{font-size:.96rem;color:var(--ink);line-height:1.95} #modalBody>p{margin-bottom:10px} #modalActions{} .modal-actions{ display:flex;align-items:center;justify-content:flex-start;gap:12px;flex-wrap:wrap; margin-top:22px;padding-top:18px; border-top:1px dashed rgba(201,162,39,.55); } /* ================= ٢٢) الأزرار العامة (.btn) ================= */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:10px 22px;border-radius:999px; font-family:var(--font-body);font-weight:800;font-size:.92rem;line-height:1.4; background:var(--beige-2);color:var(--green); border:1px solid rgba(201,162,39,.6); transition:.28s;white-space:nowrap; } .btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(42,35,24,.18)} .btn svg{inline-size:16px;block-size:16px} .btn.primary{ background:linear-gradient(120deg,var(--green),var(--green-2)); color:var(--gold-3); border-color:var(--gold-2); box-shadow:0 8px 20px rgba(30,70,49,.3); } .btn.primary:hover{ background:linear-gradient(120deg,var(--green-2),var(--green-3)); color:var(--cream); } .btn.ghost{ background:transparent;color:var(--green); border-color:rgba(201,162,39,.7); } .btn.ghost:hover{background:rgba(201,162,39,.15)} .btn.danger{ background:var(--danger);color:#fff;border-color:#6f231b; } .btn.danger:hover{background:var(--danger-2)} .btn:disabled,.btn[disabled]{ opacity:.5;cursor:not-allowed;transform:none;box-shadow:none; filter:grayscale(.35); } .btn.primary:disabled,.btn.primary[disabled]{ background:var(--beige-3);color:var(--brown);border-color:rgba(107,79,46,.4); } /* ================= ٢٣) نظام النماذج (.form) ================= */ .form{display:flex;flex-direction:column;gap:16px} .form-grid{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 16px; } .field{display:flex;flex-direction:column;gap:6px;min-width:0} .field.full,.form-grid .full{grid-column:1 / -1} .field label{font-size:.86rem;font-weight:800;color:var(--green)} /* علامة الحقل الإلزامي — تُضاف على وسم