/* ═══════════════════════════════════════════════════════════════════════════ Hisabi Platform — الأنماط المشتركة لصفحات المنصّة والمشاريع ⚠️ index.html و privacy.html و delete-account.html بلا أنماط مضمّنة إطلاقاً: مظهرها كلّه من هذا الملف، فأي تغيير في :root ينعكس عليها مباشرةً. الهوية اللونية لكل مشروع تأتي من متغيّرات --p / --p-dk / --p-dkr / --p-lt التي يعيد كل تعريفها أدناه. ═══════════════════════════════════════════════════════════════════════════ */ /* ── هوية المنصّة: أزرق مستخرج من شعار HisabiPro ── القيم مأخوذة من ألوان الشعار الفعلية (assets/brand/platform-logo-master.png): #072F86 الوجه الداكن للسداسي · #008DF1 الوجه الساطع · #4ED7FF وهج العقد. --p-dkr هو لون الشعار الداكن حرفياً؛ --p و--p-dk اشتُقّا من الأزرق الساطع بتغميق يرفع التباين على الأبيض إلى مستوى اللوحة الخضراء السابقة أو أفضل. ⚠️ لا تلمس ألوان بطاقات المشاريع (.pjcard[data-pj=...]) — لكل مشروع هويته. */ :root { --p: #0A7CE0; --p-dk: #0B5FB5; --p-dkr: #072F86; --p-lt: #E1EFFD; --p-ltr: #F2F8FE; --gold: #38C7F5; --ink: #0B1526; --muted: #55647D; --soft: #94A2B8; --bg: #FFFFFF; --bg-alt: #F4F7FB; --border: #E1E9F4; --r: 20px; --rl: 26px; --rs: 12px; --sh-sm: 0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04); --sh-md: 0 4px 16px rgba(0,0,0,.10),0 2px 4px rgba(0,0,0,.06); --sh-lg: 0 20px 60px rgba(0,0,0,.16),0 4px 12px rgba(0,0,0,.07); } /* ── هوية ظامت: تراثية — بنّي داكن وذهبي ── */ body[data-project="zamat"] { --p: #8A5A2B; --p-dk: #5E3A16; --p-dkr: #3E2610; --p-lt: #F5E9D7; --p-ltr: #FBF5EC; --gold: #C8901F; --ink: #2A1B0D; --muted: #6E5A44; --soft: #A0846A; --bg-alt: #FAF4EA; --border: #EADCC7; } /* ── هوية بلوت: أنيقة — أخضر طاولة عميق وذهبي ورقي ── */ body[data-project="belote"] { --p: #1F6F52; --p-dk: #14503A; --p-dkr: #0C3527; --p-lt: #E3F0EA; --p-ltr: #F3F9F6; --gold: #C9A227; --ink: #10201A; --muted: #4F6960; --soft: #8AA096; --bg-alt: #F4F8F6; --border: #DDEAE4; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} html,body{background:var(--bg);color:var(--ink);font-family:'Cairo','Inter',system-ui,sans-serif;line-height:1.65;-webkit-font-smoothing:antialiased} body[lang="en"],body[lang="fr"]{font-family:'Inter','Cairo',system-ui,sans-serif;direction:ltr} body[lang="ar"]{direction:rtl} a{color:var(--p-dk);text-decoration:none;transition:color .15s} a:hover{color:var(--p-dkr)} img{max-width:100%;display:block} .wrap{max-width:1160px;margin:0 auto;padding:0 24px} /* ── شريط التنقّل: صف علوي باسم المنصّة كبيراً في المنتصف + صف أزرار تحته ── */ .nav{position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid var(--border);z-index:100} .nav-top{display:flex;align-items:center;justify-content:center;position:relative;padding:18px 0 14px} .plat-brand{display:inline-flex;align-items:center;gap:13px;color:var(--p-dkr)} .brand-mark{width:46px;height:46px;border-radius:13px;overflow:hidden;box-shadow:var(--sh-sm);flex-shrink:0} .brand-mark img{width:100%;height:100%;object-fit:cover} .plat-title{font-size:clamp(22px,4.2vw,32px);font-weight:900;letter-spacing:-.01em;line-height:1.15} .plat-sub{display:block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:3px} .nav-top .lang-sw{position:absolute;inset-inline-end:0;top:50%;transform:translateY(-50%)} .nav-tabs{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;border-top:1px solid var(--border);padding:11px 0} .nav-tabs a{padding:8px 20px;border-radius:999px;font-size:14.5px;font-weight:800;color:var(--muted);border:1px solid transparent;transition:all .15s} .nav-tabs a:hover{background:var(--bg-alt);color:var(--p-dk);border-color:var(--border)} .nav-tabs a.on{background:var(--p);color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.18)} /* ── ترويسة صفحة المنصّة ── */ .plat-hero{padding:62px 0 46px;text-align:center;background:linear-gradient(160deg,var(--p-ltr) 0%,var(--bg) 72%);border-bottom:1px solid var(--border)} .plat-hero h1{font-size:clamp(26px,4.8vw,42px);font-weight:900;line-height:1.25;color:var(--p-dkr);margin-bottom:14px} .plat-lead{font-size:clamp(15px,2.2vw,17.5px);color:var(--muted);max-width:680px;margin:0 auto;line-height:1.8} .pjhead{text-align:center;margin-bottom:30px} .pjhead .sec-sub{margin-inline:auto} .lang-sw{display:flex;gap:3px;background:var(--bg-alt);border:1px solid var(--border);border-radius:999px;padding:4px} .lang-sw button{border:none;background:transparent;padding:6px 14px;border-radius:999px;font:inherit;cursor:pointer;color:var(--muted);font-weight:700;font-size:13px;transition:all .15s} .lang-sw button:hover{color:var(--p-dk)} .lang-sw button.active{background:var(--p);color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.18)} /* ── ترويسة صفحة المشروع ── */ .phero{padding:64px 0 52px;background:linear-gradient(160deg,var(--p-ltr) 0%,var(--bg) 70%);border-bottom:1px solid var(--border)} .phero-in{display:flex;align-items:center;gap:30px;flex-wrap:wrap} .plogo{width:104px;height:104px;border-radius:26px;overflow:hidden;box-shadow:var(--sh-lg);flex-shrink:0;background:#fff} .plogo img{width:100%;height:100%;object-fit:cover} .phero-txt{flex:1;min-width:260px} .tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--p-dk);background:var(--p-lt);padding:6px 14px;border-radius:999px;margin-bottom:14px} .phero h1{font-size:clamp(28px,5vw,44px);font-weight:900;line-height:1.2;color:var(--p-dkr);margin-bottom:12px} .plead{font-size:clamp(15px,2.2vw,17.5px);color:var(--muted);max-width:640px;line-height:1.75} /* ── الأقسام ── */ .sec{padding:64px 0} .sec.alt{background:var(--bg-alt)} .sec-h{font-size:clamp(21px,3.4vw,27px);font-weight:900;color:var(--p-dkr);margin-bottom:8px} .sec-sub{color:var(--muted);font-size:14.5px;margin-bottom:28px;max-width:660px;line-height:1.7} /* ── شبكة المميزات ── */ .fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:18px} .fcard{background:var(--bg);border:1px solid var(--border);border-radius:var(--r);padding:24px;box-shadow:var(--sh-sm);transition:transform .18s,box-shadow .18s} .fcard:hover{transform:translateY(-3px);box-shadow:var(--sh-md)} .ficon{width:44px;height:44px;border-radius:13px;background:var(--p-lt);color:var(--p-dk);display:flex;align-items:center;justify-content:center;margin-bottom:14px;font-size:21px} .fcard h3{font-size:16.5px;font-weight:800;margin-bottom:7px;color:var(--ink)} .fcard p{font-size:14px;color:var(--muted);line-height:1.7} /* ── لقطات الشاشة (أماكن مخصّصة) ── */ .shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px} .shot{aspect-ratio:9/16;border:2px dashed var(--border);border-radius:var(--r);background:var(--p-ltr);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--soft);text-align:center;padding:18px} .shot svg{width:32px;height:32px;opacity:.5} .shot span{font-size:12.5px;font-weight:700;line-height:1.5} .shot.wide{aspect-ratio:16/10} /* ── أزرار التحميل ── */ .dgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px} .dcard{background:var(--bg);border:1px solid var(--border);border-radius:var(--r);padding:22px;box-shadow:var(--sh-sm);display:flex;flex-direction:column;align-items:flex-start;gap:11px;position:relative} .dbadge{position:absolute;top:14px;inset-inline-end:14px;background:var(--p-lt);color:var(--p-dk);font-size:11px;font-weight:800;padding:4px 10px;border-radius:999px} .dicon{width:40px;height:40px;color:var(--p-dk)} .dname{font-size:16px;font-weight:800;color:var(--ink)} .dspec{font-size:13px;color:var(--muted);line-height:1.6} .dbtn{margin-top:auto;display:inline-flex;align-items:center;gap:8px;background:var(--p);color:#fff;padding:10px 20px;border-radius:999px;font-weight:800;font-size:14px;box-shadow:var(--sh-sm);transition:filter .15s,transform .15s} .dbtn:hover{filter:brightness(1.08);transform:translateY(-1px);color:#fff} .dbtn svg{width:15px;height:15px} .dbtn.soon{background:var(--bg-alt);color:var(--muted);box-shadow:none;cursor:default} .dbtn.soon:hover{filter:none;transform:none;color:var(--muted)} /* ── آخر التحديثات ── */ .ulist{display:flex;flex-direction:column;gap:14px;max-width:780px} .uitem{background:var(--bg);border:1px solid var(--border);border-inline-start:4px solid var(--p);border-radius:var(--rs);padding:18px 22px} .uitem .uver{font-size:12.5px;font-weight:800;color:var(--p-dk);letter-spacing:.04em;margin-bottom:5px} .uitem h4{font-size:15.5px;font-weight:800;margin-bottom:6px;color:var(--ink)} .uitem p{font-size:14px;color:var(--muted);line-height:1.7} .uempty{border-style:dashed;border-inline-start-style:dashed;color:var(--soft);text-align:center;padding:34px 22px} /* ── بطاقات المشاريع (تُستخدم في الصفحة الرئيسية أيضاً) ── */ .pjgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px} .pjcard{background:var(--bg);border:1px solid var(--border);border-radius:var(--rl);padding:26px;box-shadow:var(--sh-sm);display:flex;flex-direction:column;gap:13px;transition:transform .18s,box-shadow .18s} .pjcard:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)} .pjtop{display:flex;align-items:center;gap:14px} .pjlogo{width:58px;height:58px;border-radius:16px;overflow:hidden;box-shadow:var(--sh-sm);flex-shrink:0;background:#fff} .pjlogo img{width:100%;height:100%;object-fit:cover} .pjname{font-size:18.5px;font-weight:900;color:var(--pj-ink,var(--p-dkr));line-height:1.25} .pjkind{font-size:12px;font-weight:700;color:var(--muted)} .pjdesc{font-size:14px;color:var(--muted);line-height:1.75;flex:1} .pjstate{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;padding:5px 12px;border-radius:999px;background:var(--pj-lt,var(--p-lt));color:var(--pj-dk,var(--p-dk));align-self:flex-start} .pjbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--pj,var(--p));color:#fff;padding:11px 20px;border-radius:999px;font-weight:800;font-size:14.5px;box-shadow:var(--sh-sm);transition:filter .15s,transform .15s} .pjbtn:hover{filter:brightness(1.08);transform:translateY(-1px);color:#fff} .pjbtn svg{width:16px;height:16px} /* هوية كل بطاقة داخل الشبكة الموحّدة */ .pjcard[data-pj="hisabi"]{--pj:#1A8C7A;--pj-dk:#0F6B5C;--pj-ink:#084E43;--pj-lt:#E0F2EF} .pjcard[data-pj="zamat"] {--pj:#8A5A2B;--pj-dk:#5E3A16;--pj-ink:#3E2610;--pj-lt:#F5E9D7} .pjcard[data-pj="belote"]{--pj:#1F6F52;--pj-dk:#14503A;--pj-ink:#0C3527;--pj-lt:#E3F0EA} /* ── التذييل ── */ .pfoot{background:var(--p-dkr);color:rgba(255,255,255,.55);padding:34px 0;margin-top:8px} .pfoot-in{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px} .pfoot a{color:rgba(255,255,255,.8)} .pfoot a:hover{color:#fff} /* ── إظهار اللغة (نفس آلية الصفحة الرئيسية) ── */ [data-lang]{display:none} body[lang="ar"] [data-lang="ar"], body[lang="en"] [data-lang="en"], body[lang="fr"] [data-lang="fr"]{display:revert} /* ── الاستجابة ── */ @media(max-width:900px){ .nav-inner{justify-content:center;text-align:center} } @media(max-width:640px){ .wrap{padding:0 18px} .phero{padding:44px 0 38px} .phero-in{gap:20px} .plogo{width:80px;height:80px;border-radius:22px} .sec{padding:48px 0} .brand{font-size:17px} .nav-links a{padding:5px 10px;font-size:13px} }