/* ========================================================================== DreamBridgeUSA — design system نظام التصميم — يحافظ على الهوية البصرية للموقع السابق ========================================================================== */ :root{ --navy:#0b1d3a; --navy-2:#1b3a6b; --navy-d:#061426; --red:#b22234; --red-b:#c92a3d; --sky:#dce6f2; --sky-2:#c2d2e6; --sky-3:#93a9c6; --paper:#f2f2f2; --ink:#0b1d3a; --muted:#5a6b80; --line:#dfe5ec; --ok:#0f7a52; --warn:#a56a0a; --green:#3e5a54; --green-2:#2f4641; --green-3:#6e8882; /* patina, from the mark */ --grey:#f2f2f2; /* ------------------------------------------------------------- roles --- A colour that is both a fill and an ink needs two values, not one. Old Glory Red carries white text at 6.6:1 — an excellent button. As text it sits at 6.6:1 on white too, so on paper one value served both jobs. On a #06111c ground the same red drops to 2.87:1 and the error messages, the required-field marks and the section eyebrows all faded into the background. The same happened to the greens and the amber. So each of these now has a FILL role (a surface white text sits on) and an INK role (text that sits on the page). In light mode the two are identical; in dark they part company, and that is the whole fix. اللون الواحد كان يؤدي دورين: خلفية ونصاً. على الورق الأبيض نجح الدوران بقيمة واحدة، وعلى الأرضية الداكنة سقط النص إلى ٢٫٨٧ فبهت واختفى. لكل لون الآن قيمة للتعبئة وقيمة للنص — تتطابقان نهاراً وتفترقان ليلاً. */ --navy-fill:#0b1d3a; /* solid brand surface; always carries white text */ --red-ink:#b22234; /* red as text: errors, eyebrows, required marks */ --ok-ink:#0f7a52; --warn-ink:#a56a0a; --green-ink:#3e5a54; --font-display:'Playfair Display',Georgia,'Times New Roman',serif; --font-ui:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif; --font-ar:'Cairo','Montserrat',system-ui,sans-serif; --font-deva:'Noto Sans Devanagari','Nirmala UI','Mangal',system-ui,sans-serif; --font-han:'Noto Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei',system-ui,sans-serif; --shadow:0 20px 50px -22px rgba(11,29,58,.35); --r:14px; } /* --------------------------------------------------------------- scripts -- A typeface is chosen by writing system, not by text direction. Montserrat and Playfair carry no Devanagari and no Han: left on them, Hindi and Chinese fall to whatever the device happens to substitute, at the wrong weight and the wrong size. Each script names its own stack, and the display face is dropped where it has no glyphs rather than silently mismatching. الخط يُختار حسب نظام الكتابة لا حسب اتجاه النص — الهندية والصينية لهما خطوط خاصة لأن خطوط الواجهة لا تحتوي حروفهما -------------------------------------------------------------------------- */ html[data-script="devanagari"]{--font-ui:var(--font-deva);--font-display:var(--font-deva)} html[data-script="han"]{--font-ui:var(--font-han);--font-display:var(--font-han)} html[data-script="arabic"]{--font-ui:var(--font-ar);--font-display:var(--font-ar)} /* Devanagari and Han sit taller than Latin at the same size: the tracking that flatters Playfair crowds them, and 1.2 line-height clips their marks. الحروف الهندية والصينية أطول — نوسّع السطر ونلغي التقارب الحرفي */ html[data-script="devanagari"] h1,html[data-script="devanagari"] h2, html[data-script="devanagari"] h3,html[data-script="devanagari"] h4, html[data-script="han"] h1,html[data-script="han"] h2, html[data-script="han"] h3,html[data-script="han"] h4{letter-spacing:0;line-height:1.45;font-weight:700} html[data-script="devanagari"] body,html[data-script="han"] body{line-height:1.7} *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:var(--font-ui);background:#fff;color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.55} html[dir="rtl"] body{font-family:var(--font-ar)} img,svg{display:block;max-width:100%} a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit;color:inherit} .wrap{width:min(1180px,93vw);margin:0 auto} .hidden{display:none !important} /* ------------------------------------------------------------- typography */ h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.01em;line-height:1.2;font-weight:700;color:var(--navy)} /* Playfair carries no Arabic, so Arabic headings stay on Cairo. */ html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] h4, html[dir="rtl"] .brand b{font-family:var(--font-ar);font-weight:800} html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] h4{letter-spacing:0;line-height:1.4} .muted{color:var(--muted)} .small{font-size:13px} /* ------------------------------------------------------------------ chrome */ .ribbon{background:var(--navy-fill);color:#dce3ed;font-size:12.5px;padding:8px 0;text-align:center} .nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)} .nav .wrap{display:flex;align-items:center;gap:14px;padding:11px 0} .brand{display:flex;align-items:center;gap:10px} .brand .mark{width:42px;height:42px;flex:0 0 42px;object-fit:contain} .brand b{display:block;font-size:20px;font-weight:800;letter-spacing:-.03em;color:var(--navy);position:relative}.brand b::after{content:'';display:none} html[dir="rtl"] .brand b{letter-spacing:0} .brand small{display:block;font-size:10.5px;color:var(--muted);font-weight:600} .nav-links{display:flex;gap:2px;margin-inline-start:auto;align-items:center;flex-wrap:wrap} .nav-links>a{color:#33455c;font-size:14px;font-weight:600;padding:9px 13px;border-radius:9px;transition:.2s} .nav-links>a:hover{color:var(--navy);background:var(--sky)} .nav-links>a.active{color:var(--navy);background:var(--sky)} /* ------------------------------------------------------------------ buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;cursor:pointer; padding:13px 26px;border-radius:10px;font-size:14.5px;font-weight:700;transition:.22s;white-space:nowrap} .btn:disabled{opacity:.55;cursor:not-allowed} .btn-primary{background:var(--red);color:#fff;box-shadow:0 12px 26px -12px rgba(178,34,52,.9)} .btn-primary:hover:not(:disabled){background:var(--red-b);transform:translateY(-2px)} .btn-navy{background:var(--navy-fill);color:#fff} .btn-navy:hover:not(:disabled){background:var(--navy-2);transform:translateY(-2px)} .btn-ghost{background:#fff;color:var(--navy);border:2px solid var(--navy)} .btn-ghost:hover:not(:disabled){background:var(--navy-fill);color:#fff} .btn-soft{background:var(--sky);color:var(--navy);border:1px solid var(--line)} .btn-soft:hover:not(:disabled){background:var(--sky-2)} .btn-sm{padding:8px 15px;font-size:13px;border-radius:8px} .btn-danger{background:#fff;color:var(--red-ink);border:1px solid var(--red)} .btn-danger:hover:not(:disabled){background:var(--red);color:#fff} /* -------------------------------------------------------------------- cards */ .card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px} .card+.card{margin-top:14px} .card h3{font-size:17px;margin-bottom:12px} .grid{display:grid;gap:16px} .grid-3{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))} .grid-2{grid-template-columns:repeat(auto-fill,minmax(380px,1fr))} .grid-4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))} /* -------------------------------------------------------------------- forms */ .field{margin-bottom:14px} .field label{display:block;font-size:13px;font-weight:700;margin-bottom:6px;color:#2b3f57} .field .req{color:var(--red-ink)} .field input,.field select,.field textarea{ width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:9px; background:#f7f9fc;font-size:14.5px;outline:none;transition:.2s} .field textarea{min-height:90px;resize:vertical;font-family:inherit} .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--navy);background:#fff;box-shadow:0 0 0 4px rgba(11,29,58,.08)} .field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--red);background:#fff5f6} .field .err{color:var(--red-ink);font-size:12px;margin-top:5px;display:none} .field.invalid .err{display:block} .field-check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:#4c5f75;margin-bottom:12px} .field-check input{width:17px;height:17px;flex:0 0 17px;margin-top:2px;accent-color:var(--navy)} .row{display:grid;grid-template-columns:1fr 1fr;gap:14px} .row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px} @media(max-width:640px){.row,.row-3{grid-template-columns:1fr}} /* ------------------------------------------------------------------- badges */ .badge{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase; padding:4px 9px;border-radius:6px;background:var(--sky);color:var(--navy);white-space:nowrap} html[dir="rtl"] .badge{letter-spacing:0;font-size:12px} .badge.ok{background:rgba(15,122,82,.12);color:var(--ok-ink)} .badge.warn{background:rgba(165,106,10,.14);color:var(--warn-ink)} .badge.red{background:rgba(178,34,52,.1);color:var(--red-ink)} .chip{font-size:12.5px;background:var(--sky);color:#33455c;padding:5px 10px;border-radius:7px;display:inline-block;margin:2px} /* ------------------------------------------------------------------ notices */ .notice{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--line); border-inline-start:4px solid var(--navy);background:#f6f8fb;border-radius:10px; padding:12px 15px;font-size:13.5px;line-height:1.65;color:#2b3f57;margin-bottom:16px} .notice.legal{border-inline-start-color:var(--red);background:#fff6f7} .notice.ok{border-inline-start-color:var(--ok);background:#f2fbf7} .notice svg{flex:0 0 18px;margin-top:2px} /* ------------------------------------------------------------------- tables */ .table{width:100%;border-collapse:collapse;font-size:13.8px} .table th{text-align:start;font-weight:800;color:var(--navy);padding:11px 10px;border-bottom:2px solid var(--line);white-space:nowrap} .table td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:middle} .table tr:hover td{background:#f7f9fc} .table-wrap{overflow-x:auto} /* ------------------------------------------------------------------ toast */ /* Hidden by visibility, not by a percentage transform: translateY is relative to the element's own height, so an empty toast may not travel far enough to leave the screen — and an invisible box in the corner still eats clicks. الإخفاء بالرؤية لا بالإزاحة النسبية — الصندوق غير المرئي يبتلع النقر */ .toast{position:fixed;bottom:22px;inset-inline-end:22px;z-index:200;background:var(--navy-fill);color:#fff; padding:14px 20px;border-radius:11px;box-shadow:var(--shadow);border-inline-start:4px solid var(--red); opacity:0;visibility:hidden;pointer-events:none;transform:translateY(150%); transition:transform .35s cubic-bezier(.2,.8,.3,1),opacity .24s ease,visibility 0s linear .35s; font-size:14px;max-width:min(420px,88vw)} .toast.show{opacity:1;visibility:visible;pointer-events:auto;transform:none; transition:transform .35s cubic-bezier(.2,.8,.3,1),opacity .24s ease,visibility 0s} .toast.ok{border-inline-start-color:var(--ok)} /* ------------------------------------------------------------------ modal */ .overlay{position:fixed;inset:0;background:rgba(6,20,38,.66);backdrop-filter:blur(5px);z-index:100; display:none;align-items:flex-start;justify-content:center;padding:26px 16px;overflow-y:auto} .overlay.open{display:flex} .modal{background:#fff;width:min(720px,100%);border-radius:18px;overflow:hidden;box-shadow:0 40px 90px -30px rgba(0,0,0,.6)} .modal-head{background:var(--navy-fill);color:#fff;padding:20px 26px;position:relative} .modal-head h3{color:#fff;font-size:19px} .modal-head p{font-size:13px;color:#b8c6d8;margin-top:4px} .modal-body{padding:22px 26px;max-height:66vh;overflow-y:auto} .modal-foot{padding:15px 26px;background:var(--paper);border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap} .close-x{position:absolute;top:16px;inset-inline-end:16px;background:rgba(255,255,255,.15);border:0;color:#fff; width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:19px;line-height:1} .close-x:hover{background:var(--red)} /* --------------------------------------------------------------- dashboard */ .dash{display:grid;grid-template-columns:238px 1fr;gap:22px;align-items:start;padding:24px 0 60px} .side{position:sticky;top:74px;background:linear-gradient(180deg,#0b1d3a 0%,#071d43 100%);border:1px solid rgba(255,255,255,.08);border-radius:var(--r);padding:12px;display:grid;gap:3px;box-shadow:0 18px 40px -28px rgba(6,20,38,.65)} .side a{display:flex;align-items:center;gap:9px;padding:10px 13px;border-radius:9px;font-size:14px;font-weight:650;color:#fff;transition:.18s} .side a:hover{background:rgba(255,255,255,.12);color:#fff;transform:translateX(-2px)} .side a.active{background:var(--red);color:#fff;box-shadow:0 8px 18px -10px rgba(178,34,52,.95)} .side .side-head{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff;padding:12px 13px 7px;opacity:1} .side a[data-v="profile"],.side a[data-v="dashboard"]{color:#fff} .side a[data-v="profile"]:hover,.side a[data-v="dashboard"]:hover{color:#fff} html[dir="rtl"] .side .side-head{letter-spacing:0} .view h2{font-size:23px;margin-bottom:6px} .view>p.muted{margin-bottom:18px} @media(max-width:860px){.dash{grid-template-columns:1fr}.side{position:static;display:flex;flex-wrap:wrap}} /* --------------------------------------------------------------- stat tiles */ .stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px;position:relative;overflow:hidden} .stat::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--navy),var(--red))} .stat b{display:block;font-size:28px;font-weight:900;color:var(--navy);line-height:1} .stat span{display:block;margin-top:6px;font-size:12.5px;color:var(--muted);font-weight:600} /* -------------------------------------------------------------- job / uni */ .item{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;transition:.25s} .item:hover{transform:translateY(-4px);box-shadow:0 22px 44px -26px rgba(11,29,58,.5);border-color:var(--sky-3)} .item h3{font-size:16.5px;margin-bottom:3px} .item .org{color:var(--muted);font-size:13px;margin-bottom:10px} .item .meta{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:11px} .item p.desc{font-size:13.6px;color:#54637a;flex:1;margin-bottom:14px} .item .foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:13px;border-top:1px dashed var(--line)} .salary{font-weight:900;font-size:15px;color:var(--navy)} .salary small{display:block;font-weight:500;font-size:11px;color:var(--muted)} /* ------------------------------------------------------------- timeline */ .timeline{position:relative;padding-inline-start:22px} .timeline::before{content:'';position:absolute;inset-inline-start:5px;top:6px;bottom:6px;width:2px;background:var(--line)} .timeline li{list-style:none;position:relative;padding:0 0 16px 0;font-size:13.6px} .timeline li::before{content:'';position:absolute;inset-inline-start:-22px;top:5px;width:12px;height:12px;border-radius:50%;background:var(--sky-3);border:2px solid #fff;box-shadow:0 0 0 2px var(--sky-2)} .timeline li.done::before{background:var(--ok);box-shadow:0 0 0 2px rgba(15,122,82,.25)} .timeline li b{display:block;color:var(--navy)} .timeline li span{color:var(--muted);font-size:12.5px} /* ------------------------------------------------------------------ meter */ .meter{height:7px;border-radius:99px;background:var(--sky);overflow:hidden;min-width:70px} .meter i{display:block;height:100%;background:linear-gradient(90deg,var(--navy),var(--red))} /* ------------------------------------------------------------------ footer */ footer{background:var(--navy-d);color:#a3b1c4;padding:44px 0 20px;font-size:13.5px;margin-top:60px} footer h5{color:#fff;font-size:14px;margin-bottom:12px} footer a{display:block;padding:5px 0} footer a:hover{color:#fff} .f-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:28px;padding-bottom:26px;border-bottom:1px solid rgba(255,255,255,.1)} .f-bottom{padding-top:16px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12px;color:#78889c} @media(max-width:760px){.f-grid{grid-template-columns:1fr}} /* ------------------------------------------------------------------- misc */ .spinner{width:22px;height:22px;border:3px solid var(--sky);border-top-color:var(--navy);border-radius:50%;animation:spin .7s linear infinite;margin:30px auto} @keyframes spin{to{transform:rotate(360deg)}} .empty{text-align:center;padding:46px 20px;color:var(--muted)} .pill-row{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:18px} .pill{padding:8px 15px;border-radius:99px;border:1px solid var(--line);background:#fff;color:#33455c;font-weight:700;font-size:13px;cursor:pointer;transition:.18s} .pill:hover{border-color:var(--navy)} .pill.on{background:var(--navy-fill);color:#fff;border-color:var(--navy-fill)} .filters{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:10px;background:#fff;padding:12px;border-radius:var(--r);border:1px solid var(--line);margin-bottom:20px} .filters input,.filters select{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:9px;background:#f7f9fc;font-size:14px;outline:none} @media(max-width:860px){.filters{grid-template-columns:1fr 1fr}} @media(max-width:560px){.filters{grid-template-columns:1fr}} /* ======================================================================== Premium dashboard sidebar + theme system ======================================================================== */ /* ---------------------------------------------------------------- DARK ---- The single place the dark palette is defined. It used to be split across two blocks a hundred lines apart — one owning the neutrals, the other the surfaces — which is how the state colours ended up in neither and kept their daylight values. كانت الألوان الليلية معرّفة في كتلتين متباعدتين، فسقطت ألوان الحالات بينهما واحتفظت بقيم النهار — الآن كتلة واحدة -------------------------------------------------------------------------- */ html[data-theme="dark"]{ color-scheme:dark; /* grounds and neutrals */ --paper:#08131f; --ink:#e9eef4; --muted:#a3b1c4; --line:#243549; --page:#06111c; --surface:#0d1a2c; --surface-2:#091625; --sky:#12233a; --sky-2:#1a2f4c; --sky-3:#3a5677; /* brand, as ink */ --navy:#7ba2d8; --navy-2:#93b6e4; --navy-d:#050e1c; /* brand, as fill — a light blue behind white text is unreadable, so the filled surfaces keep a deep navy that white still sits on at 11:1. الأسطح المملوءة تبقى داكنة ليقرأ النص الأبيض فوقها */ --navy-fill:#1d3c6b; /* state colours, re-tuned for this ground. Every one clears AA on both the page and a card; see the ratios in the header comment of :root. */ --red-ink:#f0808f; /* 7.41 on the page, 6.82 on a card */ --ok-ink:#6fb894; /* 8.11 / 7.46 */ --warn-ink:#d6a24a; /* 8.26 / 7.60 */ --green-ink:#8fb8ab; /* 8.70 / 8.00 */ --green-3:#8fb8ab; /* --red keeps its daylight value: it is a fill, and white on it is 6.6:1 in both themes. Only the ink role above needed to change. الأحمر يبقى كما هو لأنه لون تعبئة — النص الأبيض فوقه مقروء في الوضعين */ --ring:rgba(122,170,240,.16); --grad-navy:linear-gradient(135deg,#12294a 0%,#0a1c36 55%,#050e1c 100%); --shadow:0 24px 60px -24px rgba(0,0,0,.55); --lift:0 24px 48px -28px rgba(0,0,0,.6); --lift-lg:0 40px 80px -40px rgba(0,0,0,.7); /* ---- the action blue, night values (see the v12 block at the end) ------ Same fill/ink split as the brand colours above: --blue-fill is a surface white text sits on and therefore stays dark in both themes, while --blue and --blue-ink are inks and lighten for this ground. نفس الفصل: لون التعبئة يبقى داكناً ليحمل النص الأبيض، والحبر يفتح ليلاً */ --blue:#3b82e8; /* 6.35 on the page — icons, rules, marks */ --blue-2:#5c9bf0; --blue-3:#7db0f5; --blue-ink:#7db0f5; /* 7.9 on the page, 7.3 on a card */ --blue-fill:#1a56b8; /* white on it: 6.85 */ --blue-soft:#12294a; --blue-soft-2:#183358; --bar:#071527; --bar-2:#050f1d; --band:#08131f; } html[data-theme="dark"] body{background:#06111c;color:var(--ink)} html[data-theme="dark"] h1,html[data-theme="dark"] h2,html[data-theme="dark"] h3,html[data-theme="dark"] h4{color:#f1f4f8} html[data-theme="dark"] .nav{background:rgba(7,18,38,.92);border-color:#1e3452} html[data-theme="dark"] .nav-links>a{color:#c2cddb} html[data-theme="dark"] .nav-links>a:hover,html[data-theme="dark"] .nav-links>a.active{background:#13253c;color:#fff} html[data-theme="dark"] .card, html[data-theme="dark"] .item, html[data-theme="dark"] .stat, html[data-theme="dark"] .path{background:#0d1a2c;border-color:#243549} html[data-theme="dark"] .field label{color:#b4c1d1} html[data-theme="dark"] .field input, html[data-theme="dark"] .field select, html[data-theme="dark"] .field textarea{background:#081422;border-color:#27394e;color:#e9eef4} html[data-theme="dark"] .field input:focus, html[data-theme="dark"] .field select:focus, html[data-theme="dark"] .field textarea:focus{background:#0b1a2d;border-color:#7ba2d8;box-shadow:0 0 0 4px rgba(106,160,237,.14)} html[data-theme="dark"] .table tr:hover td{background:#0f1e33} html[data-theme="dark"] .notice{background:#0d1c2f;color:#bdd0e9;border-color:#27394e} html[data-theme="dark"] .modal{background:#0d1a2c} html[data-theme="dark"] .modal-foot{background:#081422;border-color:#243549} html[data-theme="dark"] .btn-ghost{background:transparent;color:#d7dfea;border-color:#6a8db8} html[data-theme="dark"] .btn-soft{background:#13253c;color:#d7dfea;border-color:#2a3d55} /* A white button on a dark page reads as a hole punched in the screen, and its red ink — now lightened for the dark ground — would be sitting on white. So in dark it becomes an outlined button on the card it lives in. الزر الأبيض على صفحة داكنة يبدو ثقباً، وحبره الفاتح فوق أبيض غير مقروء */ html[data-theme="dark"] .btn-danger{background:transparent;color:var(--red-ink);border-color:var(--red-ink)} html[data-theme="dark"] .btn-danger:hover:not(:disabled){background:var(--red);color:#fff;border-color:var(--red)} html[data-theme="dark"] .chip{background:#13253c;color:#d2dbe7} html[data-theme="dark"] .item p.desc{color:#aab7c8} html[data-theme="dark"] .stat span{color:#9aa7b8} html[data-theme="dark"] .ribbon{background:#050e1c} .dash{grid-template-columns:252px minmax(0,1fr);transition:grid-template-columns .32s cubic-bezier(.2,.8,.25,1);position:relative} .dash.sidebar-collapsed{grid-template-columns:78px minmax(0,1fr)} .side{ min-height:calc(100vh - 120px); position:sticky;top:86px; padding:10px; gap:4px; overflow:hidden; transition:width .32s cubic-bezier(.2,.8,.25,1),padding .32s ease,box-shadow .25s ease; } .side-top{display:flex;align-items:center;gap:8px;padding:5px 4px 10px;margin-bottom:3px} .side-brand{min-width:0;flex:1;display:flex;align-items:center;gap:10px;color:#fff} .side-brand-mark{width:36px;height:36px;flex:0 0 36px;border-radius:10px;background:rgba(255,255,255,.12);display:grid;place-items:center;font-weight:900;font-size:15px} .side-brand-copy{min-width:0;overflow:hidden} .side-brand-copy b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .side-brand-copy span{display:block;font-size:10px;color:#b4c1d1;white-space:nowrap} .side-toggle{ width:34px;height:34px;flex:0 0 34px;border:1px solid rgba(255,255,255,.15); border-radius:9px;background:rgba(255,255,255,.08);color:#fff;cursor:pointer; display:grid;place-items:center;transition:.2s; } .side-toggle:hover{background:var(--red);transform:translateY(-1px)} .side a{min-height:42px;position:relative} .side a .side-icon{width:19px;height:19px;flex:0 0 19px;display:grid;place-items:center;opacity:.95} .side a .side-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .18s,transform .25s} .side-divider{height:1px;background:rgba(255,255,255,.12);margin:8px 4px} .side-bottom{margin-top:auto;display:grid;gap:4px} .side-tool{ display:flex;align-items:center;gap:9px;width:100%;min-height:42px;padding:10px 13px; border:0;border-radius:9px;background:rgba(255,255,255,.06);color:#fff;cursor:pointer;text-align:start; transition:.2s; } .side-tool:hover{background:rgba(255,255,255,.13)} .side-tool .side-icon{width:19px;height:19px;flex:0 0 19px} .side-tool .side-label{white-space:nowrap} .side-account{display:flex;align-items:center;gap:10px;padding:10px 8px 4px;color:#fff} .side-avatar{width:34px;height:34px;flex:0 0 34px;border-radius:50%;background:linear-gradient(135deg,#fff,#d2dbe7);color:var(--navy);display:grid;place-items:center;font-weight:900} .side-account-copy{min-width:0} .side-account-copy b,.side-account-copy span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .side-account-copy b{font-size:12px}.side-account-copy span{font-size:10px;color:#b4c1d1} .dash.sidebar-collapsed .side{padding-inline:8px} .dash.sidebar-collapsed .side-head,.dash.sidebar-collapsed .side-brand-copy, .dash.sidebar-collapsed .side-label, .dash.sidebar-collapsed .side-account-copy{display:none} .dash.sidebar-collapsed .side-top{justify-content:center} .dash.sidebar-collapsed .side-brand{flex:0} .dash.sidebar-collapsed .side-toggle{transform:rotate(180deg)} .dash.sidebar-collapsed .side a, .dash.sidebar-collapsed .side-tool{justify-content:center;padding-inline:0} .dash.sidebar-collapsed .side a .side-icon, .dash.sidebar-collapsed .side-tool .side-icon{margin:0} .dash.sidebar-collapsed .side-account{justify-content:center} .dash.sidebar-collapsed .side-avatar{margin:0} .side a[data-tooltip]::after,.side-tool[data-tooltip]::after{ content:attr(data-tooltip);position:absolute;inset-inline-start:calc(100% + 10px);top:50%;transform:translateY(-50%) translateX(-4px); background:#061426;color:#fff;padding:7px 10px;border-radius:7px;font-size:11px;white-space:nowrap;pointer-events:none; opacity:0;transition:.16s;z-index:20;box-shadow:0 10px 25px rgba(0,0,0,.25) } html[dir="rtl"] .side a[data-tooltip]::after,html[dir="rtl"] .side-tool[data-tooltip]::after{transform:translateY(-50%) translateX(4px)} .dash.sidebar-collapsed .side a:hover::after,.dash.sidebar-collapsed .side-tool:hover::after{opacity:1;transform:translateY(-50%) translateX(0)} .sidebar-backdrop{display:none} @media(max-width:860px){ .dash,.dash.sidebar-collapsed{display:block;padding-top:14px} .side,.dash.sidebar-collapsed .side{ position:fixed;z-index:120;top:0;bottom:0;inset-inline-start:0;width:min(310px,88vw);height:100vh;min-height:0; border-radius:0 18px 18px 0;margin:0;padding:14px;transform:translateX(-110%); transition:transform .32s cubic-bezier(.2,.8,.25,1);box-shadow:0 30px 80px rgba(0,0,0,.35) } html[dir="rtl"] .side,html[dir="rtl"] .dash.sidebar-collapsed .side{inset-inline-start:auto;inset-inline-end:0;border-radius:18px 0 0 18px;transform:translateX(110%)} .dash.sidebar-open .side{transform:translateX(0)} .dash.sidebar-collapsed .side-head,.dash.sidebar-collapsed .side-brand-copy,.dash.sidebar-collapsed .side-label,.dash.sidebar-collapsed .side-account-copy{display:block} .dash.sidebar-collapsed .side a,.dash.sidebar-collapsed .side-tool{justify-content:flex-start;padding:10px 13px} .dash.sidebar-collapsed .side-top{justify-content:initial} .dash.sidebar-collapsed .side-brand{flex:1} .dash.sidebar-collapsed .side-toggle{transform:none} .sidebar-backdrop{position:fixed;inset:0;z-index:110;background:rgba(3,12,28,.58);backdrop-filter:blur(3px);display:block;opacity:0;pointer-events:none;transition:opacity .25s} .dash.sidebar-open .sidebar-backdrop{opacity:1;pointer-events:auto} .mobile-side-trigger{display:inline-grid!important} } .mobile-side-trigger{display:none;width:40px;height:40px;border:1px solid var(--line);background:var(--paper);color:var(--navy);border-radius:10px;place-items:center;cursor:pointer} @media(min-width:861px){.dash .side{transform:none!important}} /* ========================================================================== Landing chrome — v11 نظام الصفحة العامة: شريط تنقل متجاوب، وضع ليلي، أقسام جديدة ========================================================================== */ /* ---------------------------------------------------------------- surfaces */ :root{ --surface:#ffffff; /* cards, nav, anything raised */ --surface-2:#f6f9fe; /* quiet fills inside a card */ --page:#ffffff; /* the page itself */ --ring:rgba(11,29,58,.09); /* focus + hairline glow */ --grad-navy:linear-gradient(135deg,#1b3a6b 0%,#0b1d3a 55%,#061426 100%); --grad-accent:linear-gradient(90deg,var(--navy),var(--red)); --lift:0 24px 48px -28px rgba(11,29,58,.45); --lift-lg:0 40px 80px -40px rgba(11,29,58,.55); --ease:cubic-bezier(.2,.8,.25,1); } /* The dark palette lives in one block only — see the DARK section above. */ body{background:var(--page)} /* Keyboard users get a visible ring everywhere, mouse users never see it. */ a:focus-visible,button:focus-visible,input:focus-visible, select:focus-visible,textarea:focus-visible,summary:focus-visible{ outline:3px solid var(--red);outline-offset:2px;border-radius:8px } /* ------------------------------------------------------------ reveal on scroll */ [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)} [data-reveal].shown{opacity:1;transform:none} [data-reveal][data-delay="1"]{transition-delay:.05s} [data-reveal][data-delay="2"]{transition-delay:.1s} [data-reveal][data-delay="3"]{transition-delay:.15s} [data-reveal][data-delay="4"]{transition-delay:.2s} [data-reveal][data-delay="5"]{transition-delay:.25s} @media(prefers-reduced-motion:reduce){ [data-reveal]{opacity:1;transform:none;transition:none} html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} } /* ------------------------------------------------------------------- nav v11 */ .nav{background:color-mix(in srgb,var(--surface) 92%,transparent);border-bottom:1px solid var(--line)} @supports not (background:color-mix(in srgb,#fff 90%,transparent)){.nav{background:var(--surface)}} .nav .wrap{gap:10px} .brand .mark{width:44px;height:44px;flex:0 0 44px;border-radius:11px;transition:transform .3s var(--ease)} .brand:hover .mark{transform:translateY(-2px) rotate(-3deg)} .brand b{font-size:19px} .nav-tools{display:inline-flex;align-items:center;gap:6px;margin-inline-start:6px} .icon-btn{ width:36px;height:36px;flex:0 0 36px;display:grid;place-items:center;cursor:pointer; border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--navy); transition:.2s var(--ease) } .icon-btn:hover{background:var(--sky);border-color:var(--sky-3);transform:translateY(-1px)} .nav-toggle{display:none} @media(max-width:920px){ .nav .wrap{flex-wrap:wrap} .nav-toggle{display:grid;margin-inline-start:auto} .nav-links{ order:3;flex-basis:100%;flex-direction:column;align-items:stretch;gap:4px; max-height:0;overflow:hidden;opacity:0; transition:max-height .34s var(--ease),opacity .24s ease,padding .24s ease;padding:0 } .nav.nav-open .nav-links{max-height:520px;opacity:1;padding:10px 0 14px;border-top:1px solid var(--line);margin-top:8px} .nav-links>a{padding:12px 14px;font-size:15px} .nav-links>a.btn{justify-content:center;margin-top:4px} .nav-tools{margin:8px 0 0;justify-content:flex-start} } /* ------------------------------------------------------------------- buttons */ .btn{position:relative;overflow:hidden} .btn-lg{padding:15px 30px;font-size:15.5px;border-radius:12px} .btn-white{background:#fff;color:var(--navy-fill);box-shadow:0 12px 26px -14px rgba(0,0,0,.5)} .btn-white:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 18px 34px -16px rgba(0,0,0,.55)} .btn-outline-light{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.55)} .btn-outline-light:hover:not(:disabled){background:rgba(255,255,255,.14);border-color:#fff} /* ---------------------------------------------------------------- eyebrows */ .eyebrow{ display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800; letter-spacing:.16em;text-transform:uppercase;color:var(--red-ink);margin-bottom:12px } html[dir="rtl"] .eyebrow{letter-spacing:0;font-size:13px} .eyebrow::before{content:'';width:22px;height:2px;background:var(--red);border-radius:2px} .sec-head .eyebrow{justify-content:center} /* ------------------------------------------------------------------ trustbar */ .trustbar{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin-top:26px} .trustbar li{ list-style:none;display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:650; color:var(--muted) } .trustbar svg{flex:0 0 16px;color:var(--ok-ink)} /* --------------------------------------------------------------- step cards */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:step} @media(max-width:980px){.steps{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.steps{grid-template-columns:1fr}} .step{ position:relative;background:var(--surface);border:1px solid var(--line);border-radius:16px; padding:26px 22px 22px;transition:.28s var(--ease) } .step:hover{transform:translateY(-5px);box-shadow:var(--lift);border-color:var(--sky-3)} .step .num{ counter-increment:step;width:40px;height:40px;border-radius:12px;display:grid;place-items:center; background:var(--sky);color:var(--navy);font-weight:900;font-size:16px;margin-bottom:14px } .step .num::before{content:counter(step,decimal)} .step:hover .num{background:var(--navy-fill);color:#fff} .step h3{font-size:17px;margin-bottom:7px} .step p{font-size:13.8px;color:var(--muted);line-height:1.75} /* the connecting rule between steps, desktop only */ @media(min-width:981px){ .step:not(:last-child)::after{ content:'';position:absolute;top:46px;inset-inline-end:-16px;width:16px;height:2px; background:var(--line) } } /* ------------------------------------------------------------ feature cards */ .features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} @media(max-width:980px){.features{grid-template-columns:repeat(2,1fr)}} @media(max-width:620px){.features{grid-template-columns:1fr}} .feature{ background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px 22px; transition:.28s var(--ease) } .feature:hover{transform:translateY(-4px);box-shadow:var(--lift);border-color:var(--sky-3)} .feature .pic{ width:44px;height:44px;border-radius:12px;display:grid;place-items:center; background:var(--sky);color:var(--navy);margin-bottom:14px;transition:.28s var(--ease) } .feature:hover .pic{background:var(--red);color:#fff} .feature h3{font-size:16.5px;margin-bottom:7px} .feature p{font-size:13.8px;color:var(--muted);line-height:1.75} /* --------------------------------------------------------------------- FAQ */ .faq{max-width:820px;margin:0 auto;display:grid;gap:10px} .faq details{ background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden; transition:border-color .2s ease,box-shadow .2s ease } .faq details[open]{border-color:var(--sky-3);box-shadow:var(--lift)} .faq summary{ list-style:none;cursor:pointer;padding:18px 20px;font-weight:700;font-size:15.5px;color:var(--navy); display:flex;align-items:center;gap:14px } .faq summary::-webkit-details-marker{display:none} .faq summary::after{ content:'';margin-inline-start:auto;flex:0 0 11px;width:11px;height:11px; border-inline-end:2.5px solid var(--muted);border-block-end:2.5px solid var(--muted); transform:rotate(45deg);transition:transform .25s var(--ease);margin-block-start:-4px } .faq details[open] summary::after{transform:rotate(-135deg);margin-block-start:2px} .faq summary:hover{color:var(--red-ink)} .faq .ans{padding:0 20px 20px;font-size:14.2px;line-height:1.85;color:var(--muted)} /* --------------------------------------------------------------- CTA band */ .cta-band{ background:var(--grad-navy);color:#fff;border-radius:24px;padding:clamp(34px,5vw,58px); text-align:center;position:relative;overflow:hidden } .cta-band::before{ content:'';position:absolute;inset:0;pointer-events:none; background:radial-gradient(60% 90% at 80% 0%,rgba(178,34,52,.34),transparent 62%), radial-gradient(50% 80% at 12% 100%,rgba(143,184,224,.26),transparent 62%) } .cta-band>*{position:relative} .cta-band h2{color:#fff;font-size:clamp(24px,3.4vw,36px)} .cta-band p{color:#c4cfdd;max-width:560px;margin:14px auto 26px;line-height:1.8} .cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} /* -------------------------------------------------------------- footer v11 */ footer{background:var(--navy-d)} .f-grid{grid-template-columns:1.7fr 1fr 1fr 1fr} @media(max-width:900px){.f-grid{grid-template-columns:1fr 1fr}} @media(max-width:560px){.f-grid{grid-template-columns:1fr}} .f-brand{display:flex;align-items:center;gap:11px;margin-bottom:14px} .f-brand img{width:40px;height:40px;border-radius:10px} .f-brand b{color:#fff;font-size:18px;font-weight:800} .f-note{ margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1); font-size:12px;line-height:1.8;color:#8593a6;max-width:640px } .to-top{ position:fixed;inset-inline-end:22px;bottom:22px;z-index:90;width:44px;height:44px;border-radius:50%; display:grid;place-items:center;border:1px solid var(--line);background:var(--surface);color:var(--navy); cursor:pointer;box-shadow:var(--lift);opacity:0;pointer-events:none;transform:translateY(12px); transition:.28s var(--ease) } .to-top.on{opacity:1;pointer-events:auto;transform:none} .to-top:hover{background:var(--red);color:#fff;border-color:var(--red)} /* ----------------------------------------------- dark theme, public surfaces */ html[data-theme="dark"] .ribbon{background:#050e1c;color:#a8bfe0} html[data-theme="dark"] .step, html[data-theme="dark"] .feature, html[data-theme="dark"] .faq details{background:var(--surface);border-color:var(--line)} html[data-theme="dark"] .step .num, html[data-theme="dark"] .feature .pic{background:#152945;color:#d2dbe7} html[data-theme="dark"] .icon-btn{background:#0e1c30;border-color:#24384e;color:#ced8e5} html[data-theme="dark"] .icon-btn:hover{background:#162b47;border-color:#3a5677} html[data-theme="dark"] .faq summary{color:#e2e8f0} html[data-theme="dark"] .btn-navy{background:#1d3c6b;color:#fff} html[data-theme="dark"] .btn-navy:hover:not(:disabled){background:#26497e} html[data-theme="dark"] .to-top{background:#0e1c30;border-color:#24384e;color:#ced8e5} html[data-theme="dark"] .flagchip{background:#13253c;border-color:#24384e;color:#d2dbe7} html[data-theme="dark"] .pill{background:#0e1c30;border-color:#24384e;color:#d2dbe7} html[data-theme="dark"] .pill.on{background:#1d3c6b;border-color:#1d3c6b;color:#fff} html[data-theme="dark"] .filters{background:var(--surface);border-color:var(--line)} html[data-theme="dark"] .filters input, html[data-theme="dark"] .filters select{background:#081422;border-color:#27394e;color:#e9eef4} html[data-theme="dark"] .notice.legal{background:#2a1219;border-color:#4a2028} html[data-theme="dark"] .notice.ok{background:#0c2a20;border-color:#1d4a38} html[data-theme="dark"] .auth-card, html[data-theme="dark"] .pay-card{border-color:var(--line)} html[data-theme="dark"] .role-opt{background:#091625;border-color:#24384e} html[data-theme="dark"] .role-opt:hover{border-color:#3a5677} html[data-theme="dark"] .role-opt.on{background:#152945;border-color:#5e88c4} html[data-theme="dark"] .role-opt span{color:#a3b1c4} html[data-theme="dark"] .field-check{color:#b4c1d1} html[data-theme="dark"] .legal-doc th{background:#13253c;color:#dce3ed} html[data-theme="dark"] .legal-doc th, html[data-theme="dark"] .legal-doc td{border-color:#24384e} html[data-theme="dark"] .auth-foot{color:#a3b1c4} html[data-theme="dark"] .auth-foot a{color:#89aede} html[data-theme="dark"] .hero-badge{background:var(--surface);border-color:var(--line);color:#dce3ed} html[data-theme="dark"] .btn-ghost{border-color:#5e88c4;color:#d2dbe7} html[data-theme="dark"] .btn-ghost:hover:not(:disabled){background:#1d3c6b;color:#fff;border-color:#1d3c6b} /* ========================================================================== Identity — the board's palette and typefaces applied الهوية: لوحة الألوان والخطوط من لوحة الهوية ========================================================================== */ /* The wordmark: Playfair, wide-tracked, exactly as the identity sets it. */ .brand b{ font-family:var(--font-display);font-weight:700;letter-spacing:.06em; font-size:18px;text-transform:uppercase } .brand small{ font-family:var(--font-ui);font-size:9.5px;font-weight:600;letter-spacing:.13em; text-transform:uppercase;color:var(--red-ink);margin-top:2px } html[dir="rtl"] .brand b{letter-spacing:0;text-transform:none;font-size:19px} html[dir="rtl"] .brand small{letter-spacing:0;text-transform:none;font-size:10.5px} /* Playfair's numerals and small text are for display only — UI copy, buttons, labels and tables stay on Montserrat so they hold at 12–14px. بلايفير للعناوين فقط، وواجهة الاستخدام على مونتسيرات */ .btn,.badge,.chip,.pill,.field label,.table th,.side a,.side-tool, .stat span,.eyebrow,.hire-card .n,.f-bottom,.ribbon{font-family:var(--font-ui)} html[dir="rtl"] .btn,html[dir="rtl"] .badge,html[dir="rtl"] .chip, html[dir="rtl"] .pill,html[dir="rtl"] .field label,html[dir="rtl"] .table th, html[dir="rtl"] .side a,html[dir="rtl"] .side-tool,html[dir="rtl"] .stat span, html[dir="rtl"] .eyebrow,html[dir="rtl"] .ribbon{font-family:var(--font-ar)} /* The stat figures are the one place Playfair's numerals earn their keep. */ .stat b{font-family:var(--font-display);font-weight:700;letter-spacing:-.01em} /* Patina green — the statue's colour — is the identity's third ink. Used for confirmation and for the marks of trust, never for a call to action. الأخضر الباتينا لونٌ ثالث: للتأكيد وعلامات الثقة، لا للأزرار */ .trustbar svg{color:var(--green-ink)} .notice.ok{border-inline-start-color:var(--green);background:#eef3f1} .badge.ok{background:rgba(62,90,84,.13);color:var(--green-ink)} .timeline li.done::before{background:var(--green);box-shadow:0 0 0 2px rgba(62,90,84,.24)} .meter i{background:linear-gradient(90deg,var(--navy),var(--green))} html[data-theme="dark"] .notice.ok{background:#12211d;border-color:#25403a} html[data-theme="dark"] .badge.ok{background:rgba(110,136,130,.18);color:#9dbab3} /* The lockup — mark over wordmark — for auth cards and anywhere the brand has to introduce itself rather than just sit in a corner. */ .brand-lockup{display:block;margin:0 auto 22px;width:min(240px,72%)} .brand-lockup img{width:100%;height:auto} /* ═══════════════════════════════════════════════════════════════════════════ PHASES 5–8 — compliance, travel, billing, insights المراحل ٥–٨ ═══════════════════════════════════════════════════════════════════════════ */ /* ------------------------------------------------------- completion bar */ /* Same visual language as .meter, but a standalone block with an accessible role — a percentage a screen reader can announce, not just a coloured strip. نفس لغة .meter لكن ككتلة مستقلة يقرؤها قارئ الشاشة */ .progress{height:9px;border-radius:99px;background:var(--sky);overflow:hidden;width:100%} .progress > i{display:block;height:100%;background:linear-gradient(90deg,var(--navy),var(--ok)); transition:width .5s cubic-bezier(.2,.8,.25,1)} /* ------------------------------------------------------------ stat states */ .stat.warn b{color:var(--red-ink)} .stat.warn::after{background:linear-gradient(90deg,var(--red),#f0a33c)} /* --------------------------------------------------------- monthly bars */ /* A chart small enough not to need a charting library: twelve columns, a title attribute for the exact figure, and a scroll container so a narrow phone scrolls the chart rather than the page. رسم بسيط بلا مكتبة — وحاوية تمرير كي لا تتمدّد الصفحة على الهاتف */ .bars{display:flex;align-items:flex-end;gap:6px;height:150px;overflow-x:auto;padding-top:8px} .bar-col{flex:1 0 34px;display:flex;flex-direction:column;justify-content:flex-end; align-items:center;height:100%;gap:6px} .bar-col > i{display:block;width:100%;min-height:3px;border-radius:6px 6px 0 0; background:linear-gradient(180deg,var(--navy),#3d6fb4)} .bar-col > span{font-size:11px;color:var(--muted);white-space:nowrap} /* ------------------------------------------------------ screen-reader only */ /* Table captions and skip links: read aloud, never drawn. `display:none` would hide them from assistive technology too, which defeats the purpose. يُقرأ ولا يُرسم — و display:none يخفيه عن قارئ الشاشة أيضاً */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} /* A skip link is invisible until it has focus, then it must be clearly visible. */ .skip-link{position:absolute;inset-inline-start:-9999px;top:8px;z-index:100; background:var(--navy-fill);color:#fff;padding:10px 16px;border-radius:8px;font-weight:700} .skip-link:focus{inset-inline-start:8px} /* --------------------------------------------------------------- focus ring */ /* Every interactive element gets a visible focus ring. Several controls are rendered as