/* main.css — minjabl.com (RTL) * ضع الملف في: /assets/css/main.css * خطوط مقترحة: Tajawal عبر في */ :root{ --gold:#F0A500; --dark:#1F1F1F; --muted:#f4f4f6; --text:#222; --link:#0b66c3; } *{box-sizing:border-box} html,body{margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:'Tajawal', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--text); background:#fff; line-height:1.6; } img{max-width:100%;height:auto;display:block} a{color:var(--link);text-decoration:none} a:hover{text-decoration:underline} .container{max-width:1100px;margin:auto;padding:0 16px} .page{min-height:55vh;padding:32px 0} /* ========================= Header / Navbar ========================= */ .site-header{ position:sticky; top:0; z-index:1000; background:var(--dark); color:#fff; box-shadow:0 2px 8px rgba(0,0,0,.12); } .site-header .container{ display:flex; align-items:center; gap:16px; padding:12px 16px; } .brand{color:#fff; text-decoration:none; font-weight:700; font-size:1.05rem} .nav{display:flex; gap:8px; margin-inline-start:auto} .nav a{ color:#ddd; text-decoration:none; padding:6px 10px; border-radius:8px; transition:.2s ease; } .nav a:hover,.nav a.active{color:#000; background:var(--gold)} .btn{ display:inline-block; padding:10px 16px; border-radius:10px; text-decoration:none; border:0; cursor:pointer; transition:.2s ease; } .btn-gold{background:var(--gold); color:#000; font-weight:700} .btn-ghost{border:2px solid var(--gold); color:#000; background:transparent} .btn:hover{transform:translateY(-1px); filter:brightness(1.02)} /* ========================= Hero ========================= */ .hero{ background:linear-gradient(120deg,#222,#444); color:#fff; padding:72px 0; margin-bottom:24px; } .hero .container{display:flex; flex-direction:column; gap:12px} .hero h1{margin:0 0 8px; font-size:2.2rem} /* ========================= Sections / Cards / Grid ========================= */ h1,h2,h3{color:#111; margin-top:0} .services h2,.projects h2{margin-bottom:16px} .grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px; } .card{ background:var(--muted); padding:16px; border-radius:14px; box-shadow:0 1px 2px rgba(0,0,0,.05); } .card h3{margin:.2rem 0 .4rem} .project img{ width:100%; height:180px; object-fit:cover; border-radius:10px 10px 0 0; background:#ddd; } .cta{background:#111;color:#fff;padding:32px 0;margin-top:24px;text-align:center} /* ========================= Forms (Login / Contact) ========================= */ .form{display:grid; gap:12px} label{display:block; font-weight:600} .input, .select, textarea.input{ width:100%; padding:12px 10px; border:1px solid #ddd; border-radius:10px; background:#fff; color:#222; outline:none; transition:border-color .2s ease; } .input:focus, .select:focus, textarea.input:focus{border-color:var(--gold)} .alert{padding:10px 12px; border-radius:10px} .alert-danger{background:#ffecec; color:#7a1010} .alert-success{background:#eaffea; color:#0a5f0a} /* Align login form nicely on large screens */ @media (min-width:580px){ .page[style*="max-width:520px"]{margin-inline:auto} } /* ========================= Footer ========================= */ .site-footer{background:#0f0f10;color:#bbb;margin-top:40px} .site-footer .container{padding:24px 16px;text-align:center} /* ========================= RTL helpers (optional) ========================= */ html[dir="rtl"] .nav{flex-direction:row-reverse} html[dir="rtl"] .nav a{text-align:center} /* ===== Sidebar (RTL-ready) ===== */ :root{ --sb-w: 260px; } .layout{ display:flex; gap:16px; } .sidebar{ width:var(--sb-w); background:#121212; color:#ddd; border-radius:14px; padding:14px; flex:0 0 var(--sb-w); height:fit-content; max-height:calc(100vh - 24px); position:sticky; top:12px; box-shadow:0 2px 10px rgba(0,0,0,.15); } .sb-profile{display:flex; flex-direction:column; align-items:center; gap:6px; margin-bottom:10px} .sb-avatar{width:72px;height:72px;border-radius:50%;object-fit:cover;background:#222} .sb-avatar--placeholder{display:flex;align-items:center;justify-content:center;font-size:32px;color:#888} .sb-name{font-weight:700;color:#fff;text-align:center} .sb-role{font-size:.9rem;color:#aaa} .sb-nav{display:flex; flex-direction:column; gap:4px; margin-top:10px} .sb-link{ display:flex; align-items:center; gap:10px; color:#cfcfcf; text-decoration:none; padding:10px 12px; border-radius:10px; transition:.2s ease; background:transparent; } .sb-link:hover{ background:#1c1c1c; color:#fff } .sb-link.active{ background:#F0A500; color:#000; font-weight:700 } .sb-ic{width:22px; text-align:center} .sb-sep{height:1px;background:#2a2a2a;margin:10px 0} .sb-footer{margin-top:12px} .sb-logout{display:inline-block;color:#ffb3b3;text-decoration:none;padding:8px 12px} .sb-logout:hover{text-decoration:underline} .content{ flex:1 1 auto; min-width:0; } /* Header tweak: زر الهامبرغر لفتح/إغلاق على الموبايل */ .hamb{display:none;cursor:pointer;color:#fff;background:#333;border:0;border-radius:10px;padding:8px 10px} @media (max-width: 980px){ .layout{gap:0} .sidebar{ position:fixed; inset-block:0; /* أعلى/أسفل */ /* في RTL نجعلها تخرج من اليمين */ inset-inline-end:0; transform:translateX(100%); z-index:1200; max-height:100vh; border-radius:0; width:var(--sb-w); } body.sidebar-open .sidebar{ transform:translateX(0); } .sidebar-overlay{ content:""; position:fixed; inset:0; background:rgba(0,0,0,.35); opacity:0; visibility:hidden; z-index:1190; transition:.2s ease; } body.sidebar-open .sidebar-overlay{ opacity:1; visibility:visible; } .hamb{display:inline-block} }