/* ====== Tokens ====== */ :root{ --bg:#0d0d0d; --fg:#ffffff; --muted:#a0a0a0; --pri:#0ea5ff; --pri2:#2563eb; --card:#151515; } /* Light mode (auto) */ @media (prefers-color-scheme: light){ :root{ --bg:#f7f8fa; --fg:#0b0b0b; --muted:#4b5563; --pri:#136ee5; --pri2:#0ea5ff; --card:#ffffff; } } /* High contrast toggle (add .high-contrast on ) */ .high-contrast{ --bg:#000; --fg:#fff; --muted:#e5e7eb; --card:#000; --pri:#00c8ff; --pri2:#00e7ff; } /* ====== Base ====== */ html{ overflow-y:auto; overflow-x:hidden; scrollbar-gutter:stable both-edges; /* يمنع ميلان المحتوى عن المنتصف */ scroll-behavior:smooth; } body{ min-height:100svh; overflow-y:auto; overflow-x:hidden; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; background:var(--bg); color:var(--fg); margin:0; padding:0; } body.menu-open{overflow:hidden} *{box-sizing:border-box} a{color:var(--pri); text-decoration:none} a:hover{opacity:.9} .container{ width:min(1100px,92%); margin-inline:auto; padding-inline:20px; /* حواف داخلية خفيفة افتراضيًا */ } :focus-visible{outline:2px solid var(--pri); outline-offset:2px; border-radius:8px} /* Reduced motion */ @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation:none!important; transition:none!important} } /* ====== Nav ====== */ .nav{ position:sticky; top:0; z-index:10; background:rgba(13,13,13,.8); backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid #1f1f1f; } @media (prefers-color-scheme: light){ .nav{ background:rgba(255,255,255,.9); border-bottom:1px solid #e5e7eb } } .nav__row{display:flex; align-items:center; justify-content:space-between; padding:10px 0} .brand{display:flex; align-items:center; gap:10px; color:var(--fg); font-weight:700} .brand__logo{width:34px; height:34px; border-radius:10px} .nav__toggle{display:none; background:transparent; border:0; color:var(--fg); font-size:24px; cursor:pointer} .nav__menu{display:flex; gap:18px} .nav__menu a{color:#ddd} .nav__menu a:hover{color:#fff} @media (prefers-color-scheme: light){ .nav__menu a{ color:#374151 } .nav__menu a:hover{ color:#0b0b0b } } /* ====== Hero ====== */ .hero{ padding:72px 0 56px; background:radial-gradient(60% 60% at 50% 10%, #1a1a1a 0%, #0d0d0d 60%); text-align:center; } @media (prefers-color-scheme: light){ .hero{ background:radial-gradient(60% 60% at 50% 10%, #eef2ff 0%, #f7f8fa 60%) } } .hero__logo{ width:96px; height:96px; border-radius:18px; box-shadow:0 10px 30px rgba(0,0,0,.35); margin-bottom:16px; } h1{font-size:40px; margin:6px 0 10px} p{color:var(--muted)} /* ====== Sections & Cards ====== */ .section{padding:56px 0} .section--alt{background:#0f0f0f} @media (prefers-color-scheme: light){ .section--alt{ background:#f3f4f6 } } .grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px} .card{ background:var(--card); padding:22px; border-radius:16px; border:1px solid #1f1f1f; } @media (prefers-color-scheme: light){ .card{ border-color:#e5e7eb } } .card h3{margin:4px 0 8px} .pill{display:inline-block; padding:6px 10px; border:1px solid #1f1f1f; border-radius:999px; background:var(--card); color:var(--muted); font-weight:700; font-size:12px} @media (prefers-color-scheme: light){ .pill{ border-color:#e5e7eb } } /* ====== Forms & Buttons ====== */ .form{display:flex; gap:10px; margin-top:14px} .form--stack{flex-direction:column; gap:12px; max-width:560px} input,textarea{ width:100%; padding:12px 14px; border-radius:10px; border:1px solid #2a2a2a; background:#121212; color:#fff; } @media (prefers-color-scheme: light){ input,textarea{ background:#fff; color:#0b0b0b; border-color:#d1d5db } } .btn{ background:linear-gradient(90deg,var(--pri2),var(--pri)); color:#fff; padding:12px 22px; border:none; border-radius:12px; font-weight:700; cursor:pointer; } .btn--ghost{background:transparent; border:1px solid #2a2a2a} .form__msg{color:var(--muted); height:18px; display:inline-block} /* ====== Download ====== */ #download .container{ text-align:center; } #download h2, #download p, #download .form__msg{ margin-left:auto; margin-right:auto; } #download .form, #download .social{ justify-content:center; } #download .form input[type=email]{ margin:0 auto; max-width:420px; } /* ====== Footer ====== */ .footer{ border-top:1px solid #1f1f1f; background:#0b0b0b; padding:18px 0; color:#bbb; text-align:center; /* توسيط النص داخل الفوتر */ } @media (prefers-color-scheme: light){ .footer{ background:#f3f4f6; color:#374151; border-top:1px solid #e5e7eb } } .footer__row{ display:flex; align-items:center; justify-content:center; /* بدلاً من space-between */ flex-direction:column; gap:10px; } .footer__links{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; } .footer__links a{color:inherit} .footer__links a:hover{color:#fff} @media (prefers-color-scheme: light){ .footer__links a:hover{ color:#0b0b0b } } /* ====== Accessibility FAB + Panel ====== */ .a11y-fab{ position:fixed; right:16px; bottom:16px; z-index:60; width:52px; height:52px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:#0ea5ff; /* أزرق ثابت مثل الصورة */ border:0; box-shadow:0 12px 28px rgba(0,0,0,.35); } .a11y-fab:focus-visible{ box-shadow:0 0 0 3px rgba(255,255,255,.6), 0 12px 28px rgba(0,0,0,.35); } .a11y-fab svg{ width:24px; height:24px } .a11y-panel{ position:fixed; right:0; top:0; height:100dvh; width:min(360px,90vw); background:var(--card); color:var(--fg); border-left:1px solid #1f1f1f; transform:translateX(100%); transition:transform .25s ease; z-index:70; display:flex; flex-direction:column; } @media (prefers-color-scheme: light){ .a11y-panel{ border-left-color:#e5e7eb } } .a11y-panel.open{ transform:translateX(0) } .a11y-head{ display:flex; align-items:center; justify-content:space-between; padding:14px; border-bottom:1px solid #1f1f1f } @media (prefers-color-scheme: light){ .a11y-head{ border-bottom-color:#e5e7eb } } .a11y-body{ padding:14px; overflow:auto } .a11y-body .control{ display:flex; align-items:center; gap:8px; margin:8px 0 } .a11y-body button,.a11y-body select{ border:1px solid #2a2a2a; background:#121212; color:#fff; border-radius:10px; padding:8px 10px; } @media (prefers-color-scheme: light){ .a11y-body button,.a11y-body select{ background:#fff; color:#0b0b0b; border-color:#d1d5db } } /* Backdrop when panel open (optional, add element with this class) */ .a11y-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:55; backdrop-filter:blur(2px); } /* ====== Cookie banner (polish) ====== */ .cookie-banner{ position:fixed; left:var(--pad,16px); right:var(--pad,16px); bottom:var(--pad,16px); background:var(--card); color:var(--fg); border:1px solid #1f1f1f; border-radius:14px; padding:14px; box-shadow:0 12px 28px rgba(0,0,0,.35); z-index:1000; max-width:720px; margin-inline:auto; } @media (prefers-color-scheme: light){ .cookie-banner{ border-color:#e5e7eb } } .cookie-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px} .btn-min{padding:10px 12px; border-radius:10px; border:1px solid #2a2a2a; background:#121212; color:#fff; font-weight:700} .btn-accept{background:linear-gradient(90deg,var(--pri2),var(--pri)); color:#00131a; border:0} @media (prefers-color-scheme: light){ .btn-min{ background:#fff; color:#0b0b0b; border-color:#d1d5db } } /* ====== Responsive ====== */ @media (max-width:900px){ .grid-3{grid-template-columns:1fr 1fr} } @media (max-width:640px){ /* حواف إضافية في الجوال لإبعاد المحتوى عن الأطراف */ .container{ padding-inline:24px; } .nav__toggle{ display:inline-block; margin-right:6px; /* يبعد زر الثلاث خطوط عن الحافة */ padding:10px 12px; /* مساحة نقر أكبر */ border-radius:12px; } .nav__menu{ display:none; flex-direction:column; background:#0f0f0f; position:fixed; right:4%; top:60px; padding:10px 14px; border:1px solid #1f1f1f; border-radius:12px; z-index:100; } @media (prefers-color-scheme: light){ .nav__menu{ background:#fff; border-color:#e5e7eb } } .nav__menu.show{display:flex} h1{font-size:30px} }