/* ========================================================================== Moha — Web Developer & Designer Design tokens: deep graphite-blue background, amber signal accent, teal secondary, monospace "terminal invoice" as the signature element. ========================================================================== */ /* رابط الخطوط انتقل لملف (preconnect + مباشر) بدل @import هنا — @import يحجب اكتشاف الخط لحد ما يُحمَّل ويُحلَّل هذا الملف نفسه أولًا. */ :root{ /* الموقع داكن فقط حاليًا — بدون وضع فاتح ولا زر تبديل */ --bg: #10131A; --bg-elevated: #171B24; --bg-card: #1B202B; --border: #262C3A; --text-primary: #ECEEF3; --text-secondary:#8891A3; --accent: #F2A93B; /* amber signal */ --accent-hover: #D9932E; /* نسخة أهدأ من الكهرماني لحالة التحويم */ --accent-soft: #F2A93B22; --teal: #2FB8A6; --danger: #E5636B; --nav-bg: rgba(16,19,26,.75); --radius: 14px; --font-ar-display: 'Cairo', sans-serif; --font-ar-body: 'Tajawal', sans-serif; --font-en-display: 'Space Grotesk', sans-serif; --font-en-body: 'Inter', sans-serif; --font-mono: 'JetBrains Mono', monospace; } *{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; scrollbar-width:thin; scrollbar-color:var(--accent) var(--bg); overflow-x:hidden; max-width:100%; } ::-webkit-scrollbar{ width:10px; height:10px; } ::-webkit-scrollbar-track{ background:var(--bg); } ::-webkit-scrollbar-thumb{ background:var(--accent); border-radius:10px; border:2px solid var(--bg); } ::-webkit-scrollbar-thumb:hover{ background:var(--accent-hover); } body{ background:var(--bg); color:var(--text-primary); font-family:var(--font-ar-body); line-height:1.75; overflow-x:hidden; max-width:100%; position:relative; transition:background-color .25s ease, color .25s ease; } body.lang-en{ font-family:var(--font-en-body); } [dir="ltr"] body{ font-family:var(--font-en-body); } h1,h2,h3,h4{ font-family:var(--font-ar-display); font-weight:800; line-height:1.3; } body.lang-en h1, body.lang-en h2, body.lang-en h3, body.lang-en h4{ font-family:var(--font-en-display); font-weight:700; } a{ color:inherit; text-decoration:none; } img{ max-width:100%; display:block; } .container{ max-width:1140px; margin:0 auto; padding:0 24px; } section{ padding:110px 0; position:relative; } /* language toggle text swap */ [data-ar][data-en]{ } /* تبديل اللغة يتم الآن عبر JavaScript (استبدال النص مباشرة) وليس عبر إخفاء CSS */ /* ---------- nav ---------- */ .nav{ position:fixed; top:0; inset-inline:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:18px 32px; background:var(--nav-bg); backdrop-filter:blur(14px); border-bottom:1px solid var(--border); } .nav .logo{ font-family:var(--font-mono); font-weight:600; font-size:20px; color:var(--accent-hover); letter-spacing:.5px; display:flex; align-items:center; gap:10px; } .nav .logo .logo-mark{ height:26px; width:auto; } .nav ul{ list-style:none; display:flex; gap:26px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); } .nav ul a{ font-size:15px; font-weight:600; color:var(--accent-hover); transition:opacity .2s; } .nav ul a:hover{ opacity:.75; } .nav-actions{ display:flex; align-items:center; gap:16px; } .lang-switch{ font-family:var(--font-mono); font-size:13px; color:var(--text-secondary); border:1px solid var(--border); border-radius:999px; padding:6px 14px; cursor:pointer; background:transparent; transition:.2s; } .lang-switch:hover{ border-color:var(--accent); color:var(--accent); } .nav-cta{ background:#F2A93B; color:#10131A; font-weight:700; font-size:14px; padding:9px 20px; border-radius:999px; } .nav-toggle{ display:none; width:34px; height:34px; border-radius:50%; border:1px solid var(--border); background:transparent; color:var(--text-primary); font-size:16px; cursor:pointer; transition:.2s; align-items:center; justify-content:center; } .nav-toggle:hover{ border-color:var(--accent); color:var(--accent); } /* ---------- hero ---------- */ .hero{ padding:150px 0 90px; position:relative; } .hero::before{ content:''; position:absolute; inset:0; z-index:-1; background: radial-gradient(circle at 15% 20%, #F2A93B14, transparent 45%), radial-gradient(circle at 85% 75%, #2FB8A614, transparent 45%); } .hero-eyebrow{ font-family:var(--font-mono); font-size:14px; color:var(--teal); display:flex; align-items:center; gap:10px; margin-bottom:22px; } .hero-eyebrow .dot{ width:8px; height:8px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 4px #2FB8A622; } .hero h1{ font-size:clamp(38px,6vw,68px); max-width:820px; margin-bottom:22px; color:var(--text-primary); } .hero h1 .accent{ color:var(--accent); } .hero p.lead{ font-size:19px; color:var(--text-secondary); max-width:560px; margin-bottom:38px; } .hero-actions{ display:flex; gap:16px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; gap:10px; padding:14px 28px; border-radius:10px; font-weight:600; font-size:15px; transition:transform .15s ease, box-shadow .15s ease, background .25s ease, color .25s ease; border:1px solid transparent; cursor:pointer; } .btn:hover{ transform:translateY(-2px); } .btn-primary{ background:#F2A93B; color:#10131A; box-shadow:0 8px 24px -8px #F2A93B66; } .btn-outline{ border-color:var(--border); color:var(--text-primary); } .btn-outline:hover{ border-color:var(--accent); } /* signature: live browser mockup — shows the client an actual website preview, not code */ .browser-mock{ margin-top:64px; max-width:480px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:0 30px 60px -30px #000a; position:relative; } .browser-bar{ display:flex; align-items:center; gap:10px; padding:12px 16px; background:var(--bg-elevated); border-bottom:1px solid var(--border); } .browser-bar span{ width:11px; height:11px; border-radius:50%; } .browser-bar span:nth-child(1){ background:#E5636B; } .browser-bar span:nth-child(2){ background:#F2A93B; } .browser-bar span:nth-child(3){ background:#2FB8A6; } .browser-url{ flex:1; background:var(--bg); border-radius:6px; padding:6px 14px; font-family:var(--font-mono); font-size:12px; color:var(--text-secondary); text-align:center; } .browser-content{ padding:26px 24px 30px; } .mock-nav{ display:flex; align-items:center; gap:8px; margin-bottom:26px; } .mock-dot{ width:20px; height:20px; border-radius:50%; background:var(--accent); flex-shrink:0; } .mock-bar{ height:7px; border-radius:4px; background:var(--border); } .mock-nav .mock-bar{ width:34px; } .mock-nav .mock-bar:last-child{ margin-inline-start:auto; width:52px; background:var(--accent); opacity:.5; } .mock-heading{ height:14px; border-radius:4px; background:var(--text-secondary); opacity:.5; margin-bottom:10px; } .mock-heading.w1{ width:78%; } .mock-heading.w2{ width:55%; } .mock-para{ height:6px; border-radius:4px; background:var(--border); margin-bottom:8px; } .mock-para.w1{ width:92%; } .mock-para.w2{ width:80%; } .mock-para.w3{ width:60%; } .mock-cta{ margin-top:18px; width:120px; height:32px; border-radius:8px; background:var(--accent); } .price-badge{ position:absolute; bottom:-18px; inset-inline-end:22px; background:var(--accent); color:#10131A; font-weight:800; font-size:14px; padding:12px 20px; border-radius:12px; box-shadow:0 12px 26px -10px #F2A93B88; font-family:var(--font-ar-display); } /* ---------- section heading ---------- نفس نمط hero-eyebrow بالضبط (نقطة + نص، بدون خلفية) — عشان يصير عنوان واحد موحّد بكل الموقع بدل شكلين مختلفين (شارة بيضاوية بالأقسام، نقطة بالهيرو). */ .section-head{ margin:0 auto 56px; max-width:640px; text-align:center; } .section-eyebrow{ font-family:var(--font-mono); font-size:16px; font-weight:700; color:var(--accent-hover); margin-bottom:16px; letter-spacing:.4px; display:inline-flex; align-items:center; gap:10px; justify-content:center; } .section-eyebrow::before{ display:none; } .section-head h2{ font-size:clamp(30px,4.2vw,44px); text-wrap:balance; } .section-head p{ color:var(--text-secondary); margin-top:14px; font-size:16px; } .page-hero h1{ text-wrap:balance; } /* ---------- about ---------- */ /* .about صف "مرتفع" فاتح عام — تُستخدم بأي صفحة (من نحن، صفحة خدمة...) كوحدة تلوين متبادل بسيطة (فاتح مع الكلاس، غامق بدونه تلقائيًا). */ .about{ background:var(--bg-elevated); border-top:1px solid var(--border); border-bottom:1px solid var(--border); } .about-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:center; } /* تلوين متبادل صارم لأقسام الصفحة الرئيسية تحديدًا (من نحن → الفوتر) — بالـid عشان يتغلّب على لون .about العام أعلاه بالضبط بهذا التسلسل. */ #about{ background:var(--bg); border-top:1px solid var(--border); border-bottom:1px solid var(--border); } #how{ background:var(--bg-elevated); border-top:1px solid var(--border); } #why{ background:var(--bg); border-top:1px solid var(--border); } #service{ background:var(--bg-elevated); border-top:1px solid var(--border); } #clients{ background:var(--bg); border-top:1px solid var(--border); } #portfolio{ background:var(--bg-elevated); border-top:1px solid var(--border); } #tools{ background:var(--bg); border-top:1px solid var(--border); } .about-photo{ aspect-ratio:1/1.1; border-radius:var(--radius); background:var(--bg-card); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); color:var(--text-secondary); font-size:14px; overflow:hidden; } .about-photo img{ width:100%; height:100%; object-fit:contain; } .about-text p{ color:var(--text-secondary); font-size:16px; margin-bottom:24px; text-align:justify; text-align-last:right; } body.lang-en .about-text p{ text-align-last:left; } .stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:32px; } .stat b{ font-family:var(--font-mono); font-size:28px; color:var(--accent); display:block; } .stat span{ font-size:13px; color:var(--text-secondary); } .skills{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; } .skill-tag{ font-family:var(--font-mono); font-size:13px; padding:6px 14px; border-radius:999px; border:1px solid var(--border); color:var(--text-secondary); } /* ---------- service / pricing ---------- */ #service .container{ max-width:1280px; } .services-wrap{ position:relative; } .services-grid{ display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; cursor:grab; padding:6px 6px 12px; margin:-6px -6px 0; scrollbar-width:none; -ms-overflow-style:none; align-items:stretch; } .services-grid.dragging{ cursor:grabbing; scroll-snap-type:none; user-select:none; } .services-grid::-webkit-scrollbar{ display:none; } .service-card{ flex:0 0 380px; scroll-snap-align:start; background:var(--bg-card); border:1px solid var(--border); border-radius:20px; padding:36px; display:flex; flex-direction:column; position:relative; overflow:hidden; transition:background .25s ease, border-color .25s ease; } .service-card::after{ content:''; position:absolute; top:-40%; inset-inline-end:-10%; width:400px; height:400px; background:radial-gradient(circle, #F2A93B1a, transparent 70%); pointer-events:none; } .service-card:hover{ border-color:var(--accent); transform:translateY(-3px); } .service-card:hover::after{ display:none; } .service-card h3{ font-size:22px; margin-bottom:12px; transition:color .25s ease; } .service-icon{ width:52px; height:52px; border-radius:14px; background:var(--accent-soft); display:flex; align-items:center; justify-content:center; margin-bottom:22px; color:var(--accent); transition:background .25s ease, color .25s ease; } /* رسمة توضيحية بدل الأيقونة الصغيرة — بدون خلفية دائرية، حجم أكبر يبرزها */ .service-icon.has-illustration{ width:96px; height:96px; background:none; } .service-icon.has-illustration svg{ width:100%; height:100%; } .service-card p{ color:var(--text-secondary); margin-bottom:20px; font-size:14px; text-align:justify; text-align-last:right; transition:color .25s ease; } body.lang-en .service-card p{ text-align-last:left; } .includes{ list-style:none; display:grid; gap:12px; margin-bottom:24px; } .includes li{ display:flex; align-items:center; gap:12px; font-size:14px; color:var(--text-primary); transition:color .25s ease; } .includes li .check{ width:22px; height:22px; border-radius:50%; background:var(--teal-soft, #2FB8A61a); color:var(--teal); font-family:var(--font-mono); font-size:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:background .25s ease, color .25s ease; } .price-box{ background:var(--bg-elevated); border:1px solid var(--border); border-radius:16px; padding:28px; text-align:center; margin-top:auto; transition:background .25s ease, border-color .25s ease; display:flex; flex-direction:column; align-items:center; } .price-box-icon{ color:var(--accent); margin-bottom:12px; transition:color .25s ease; } .price-box-icon svg{ width:26px; height:26px; } .price-box-lead{ font-size:14.5px; color:var(--text-primary); line-height:1.65; margin-bottom:18px; transition:color .25s ease; } .price-box .note{ font-size:12px; color:var(--text-secondary); margin-top:14px; transition:color .25s ease; } .price-box .p-link{ color:var(--accent-hover); transition:color .25s ease; } .services-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:44px; height:44px; border-radius:50%; background:var(--bg-card); border:1px solid var(--border); color:var(--text-primary); font-size:20px; display:none; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 10px 24px -8px #000a; transition:.2s; } .services-arrow:hover{ border-color:var(--accent); color:var(--accent); } .services-arrow.prev{ inset-inline-start:-22px; } .services-arrow.next{ inset-inline-end:-22px; } @media (max-width:860px){ .service-card{ flex-basis:300px; } .services-arrow{ display:none !important; } } /* ---------- portfolio ---------- */ .portfolio-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px; } .p-card{ background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:transform .2s, border-color .2s; } .p-card:hover{ transform:translateY(-4px); border-color:var(--accent); } .p-thumb{ aspect-ratio:16/10; background:var(--bg-elevated); display:flex; align-items:center; justify-content:center; color:var(--text-secondary); font-family:var(--font-mono); font-size:13px; overflow:hidden; } .p-thumb .thumb-icon{ color:var(--accent); opacity:.55; } .p-thumb .thumb-icon svg{ width:40px; height:40px; } .p-thumb img{ width:100%; height:100%; object-fit:cover; } .p-body{ padding:24px; } .p-cat{ font-family:var(--font-mono); font-size:12px; color:var(--teal); margin-bottom:8px; display:block; } .p-body h3{ font-size:19px; margin-bottom:10px; } .p-body p{ color:var(--text-secondary); font-size:14px; } /* ---------- المدونة: 5 مقالات بالصف بدل 2 ---------- */ .blog-grid{ grid-template-columns:repeat(5,1fr); gap:18px; } .blog-grid .p-body{ padding:16px; } .blog-grid .p-body h3{ font-size:15px; margin-bottom:6px; line-height:1.4; } .blog-grid .p-body p{ font-size:12.5px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .blog-grid .p-cat{ font-size:11px; margin-bottom:6px; } .blog-grid .post-meta{ font-size:11.5px; } .blog-grid .p-link{ font-size:12.5px; } @media (max-width:1180px){ .blog-grid{ grid-template-columns:repeat(4,1fr); } } @media (max-width:900px){ .blog-grid{ grid-template-columns:repeat(3,1fr); } } @media (max-width:680px){ .blog-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:460px){ .blog-grid{ grid-template-columns:1fr; } } .blog-category-grid{ display:flex; flex-wrap:nowrap; align-items:center; gap:10px; overflow-x:auto; padding:4px 2px 10px; scrollbar-width:none; } .blog-category-grid::-webkit-scrollbar{ display:none; } .blog-category-card{ flex:0 0 auto; padding:10px 20px; display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; text-align:center; background:transparent; border:1px solid var(--border); border-radius:999px; transition:transform .2s ease, border-color .2s ease, background .2s ease; } .blog-category-card:hover{ transform:translateY(-2px); border-color:var(--accent); background:var(--accent-soft); } .blog-category-card.is-active{ background:var(--accent); border-color:var(--accent); color:#10131A; } .blog-category-name{ font-family:var(--font-ar-body); font-size:15px; font-weight:700; } .blog-selected-category{ margin-top:64px; } .blog-back-link{ display:inline-flex; color:var(--text-secondary); font-family:var(--font-mono); font-size:13px; margin-bottom:24px; } .blog-back-link:hover{ color:var(--accent); } @media (max-width:680px){ .blog-category-grid{ grid-template-columns:repeat(2,1fr); gap:12px; } .blog-category-card{ min-height:0; padding:12px 10px; flex-direction:row; gap:6px; } .blog-category-icon{ display:none; } .blog-category-name{ font-size:13px; } .blog-category-count{ font-size:10px; } .blog-selected-category{ margin-top:48px; } } /* ---------- بطاقات مضغوطة (نماذج أعمال/مقالات ذات صلة بصفحة الخدمة) — تتكيف تلقائيًا مع عدد العناصر الفعلي بدل عمودين ثابتين ياخذوا الصفحة كاملة ---------- */ .compact-grid{ grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:18px; } .compact-grid .p-thumb{ aspect-ratio:16/11; } .compact-grid .p-thumb .thumb-icon svg{ width:26px; height:26px; } .compact-grid .p-body{ padding:16px; } .compact-grid .p-body h3{ font-size:15px; margin-bottom:4px; } .compact-grid .p-body p{ font-size:12.5px; } .compact-grid .p-cat{ font-size:11px; margin-bottom:6px; } .compact-grid .p-link{ font-size:12.5px; margin-top:10px; } .p-link{ display:inline-flex; align-items:center; gap:6px; margin-top:16px; font-size:13px; color:var(--accent-hover); font-family:var(--font-mono); } /* زر سهم دائري بدل السهم النصي (↗) — لبطاقات الخدمات تحديدًا */ .p-link-arrow{ gap:10px; } .p-link-icon{ width:32px; height:32px; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--accent-hover); transition:background .2s ease, border-color .2s ease, color .2s ease; } .p-link-arrow:hover .p-link-icon{ background:var(--accent); border-color:var(--accent); color:#10131A; } .p-work-type{ font-size:13px; color:var(--text-secondary); margin-bottom:10px; } .status-badge{ display:inline-block; font-family:var(--font-mono); font-size:11.5px; font-weight:600; background:var(--accent-soft); color:var(--accent-hover); padding:5px 12px; border-radius:999px; margin-top:6px; } /* ---------- شريط عملاء وثقوا بنا / الأدوات: صف ثابت في نص الشاشة (بدون حركة) ---------- */ .trust-strip-static{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:28px 56px; margin-top:8px; } #tools .trust-strip-static{ gap:36px 90px; } #tools .trust-strip-logo{ height:108px; } .trust-strip-logo{ display:flex; align-items:center; justify-content:center; height:72px; opacity:1; transition:transform .2s ease; } .trust-strip-logo:hover{ transform:scale(1.06); } .trust-strip-logo img{ max-height:100%; width:auto; object-fit:contain; } /* توحيد الحجم البصري لشعارات الأدوات — شعار Google كثيف الشكل فيبان أكبر طبيعيًا من باقي الشعارات رغم تساوي الصندوق، فنكبّر الأخف بصريًا شوي. */ #tools .trust-strip-logo img[src*="cloudflare"]{ transform:scale(1.7); } #tools .trust-strip-logo img[src*="claude"]{ transform:scale(1.5); } #tools .trust-strip-logo img[src*="openai"]{ transform:scale(1.5); } #tools .trust-strip-logo img[src*="hostinger"]{ transform:scale(1.4); } #tools .trust-strip-logo img[src*="adobe"]{ transform:scale(1.4); } #tools .trust-strip-logo img[src*="github"]{ transform:scale(1.35); } #tools .trust-strip-logo img[src*="vscode"]{ transform:scale(1.35); } #tools .trust-strip-logo img[src*="supabase"]{ transform:scale(1.3); } #tools .trust-strip-logo img[src*="microsoft"]{ transform:scale(1.3); } .trust-strip-logo span{ font-family:var(--font-mono); font-size:14px; font-weight:600; color:var(--text-secondary); } /* ---------- contact ---------- */ .contact{ background:var(--bg-elevated); border-top:1px solid var(--border); } .contact-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; } .contact-info .item{ margin-bottom:26px; } .contact-info .item .label{ font-family:var(--font-mono); font-size:12px; color:var(--teal); display:block; margin-bottom:6px; } .contact-info .item a, .contact-info .item span{ font-size:17px; } .social-row{ display:flex; gap:12px; margin-top:32px; flex-wrap:wrap; } .social-row a{ width:42px; height:42px; border-radius:10px; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--accent); transition:.2s; } .social-row a:hover{ border-color:var(--accent); background:var(--accent-soft); } .form-group{ margin-bottom:18px; } .form-group label{ display:block; font-size:13px; color:var(--text-secondary); margin-bottom:8px; font-family:var(--font-mono); } .form-group input, .form-group textarea, .form-group select{ width:100%; background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:14px 16px; color:var(--text-primary); font-family:inherit; font-size:15px; } .form-group select{ cursor:pointer; } .form-group input:focus, .form-group textarea:focus, .form-group select:focus{ outline:none; border-color:var(--accent); } #formMsg{ margin-top:14px; font-size:14px; } #formMsg.ok{ color:var(--teal); } #formMsg.err{ color:var(--danger); } /* ---------- footer ---------- */ footer{ padding:36px 0; text-align:center; color:var(--text-secondary); font-size:13px; border-top:1px solid var(--border); } footer .mono{ font-family:var(--font-mono); color:var(--accent-hover); } /* ---------- whatsapp floating ---------- */ .wa-float{ position:fixed; bottom:26px; inset-inline-end:26px; z-index:90; width:58px; height:58px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px -8px #25D36699; transition:transform .2s; } .wa-float:hover{ transform:scale(1.08); } /* ---------- reveal on scroll ---------- */ .reveal{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; } .reveal.in{ opacity:1; transform:translateY(0); } /* ---------- focus & motion ---------- */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } /* ---------- إتاحة: عناصر مخفية بصريًا لكن مقروءة لقارئ الشاشة ---------- */ .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; } /* ---------- إتاحة: رابط التخطي — مخفي حتى يستلم التركيز بالكيبورد ---------- */ .skip-link{ position:absolute; top:-100px; right:16px; z-index:1000; background:var(--accent); color:#fff; padding:12px 20px; border-radius:8px; font-size:14px; font-weight:600; text-decoration:none; transition:top .2s ease; } .skip-link:focus{ top:16px; } body.lang-en .skip-link{ right:auto; left:16px; } @media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } } /* ---------- why choose me ---------- */ .why-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; } .why-card{ background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:30px; transition:border-color .2s, transform .2s; } .why-card:hover{ border-color:var(--accent); transform:translateY(-3px); } .why-num{ font-family:var(--font-mono); color:var(--accent-hover); font-size:13px; margin-bottom:14px; display:block; } .why-card h3{ font-size:18px; margin-bottom:10px; } .why-card p{ color:var(--text-secondary); font-size:14px; } /* ---------- process steps ---------- */ .process{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; position:relative; } .process::before{ content:''; position:absolute; top:19px; inset-inline:var(--process-inset, 12.5%); height:1px; background:var(--border); z-index:0; } .step{ position:relative; z-index:1; text-align:center; } .step-num{ width:38px; height:38px; border-radius:50%; background:var(--bg); border:1px solid var(--accent); color:var(--accent-hover); font-family:var(--font-mono); font-weight:600; font-size:15px; display:flex; align-items:center; justify-content:center; margin:0 auto 18px; } .step h3{ font-size:16px; margin-bottom:8px; } .step p{ color:var(--text-secondary); font-size:13px; } /* ---------- hero trust badges ---------- */ .trust-row{ display:flex; gap:22px; flex-wrap:wrap; margin-top:36px; } .trust-row .item{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-secondary); } .trust-row .item b{ color:var(--text-primary); } .trust-row .item .icon{ color:var(--teal); display:inline-flex; flex-shrink:0; } /* ---------- أيقونات مساندة مضمّنة بالنص (تواصل، بيانات مقال...) ---------- */ .meta-icon{ display:inline-flex; vertical-align:-3px; color:var(--teal); margin-inline-end:6px; } .contact-info .item .label .meta-icon{ margin-inline-end:7px; } .post-meta .meta-icon{ color:var(--accent); margin-inline-end:5px; } @media (max-width: 860px){ .why-grid{ grid-template-columns:1fr; } .process{ grid-template-columns:1fr; gap:32px; } .process::before{ display:none; } .blog-category-grid{ gap:8px; } .blog-category-card{ padding:9px 16px; } .blog-category-name{ font-size:13px; } } .nav-mobile-extra{ display:none; } @media (max-width: 860px){ /* شريط الجوال: الشعار + زر القائمة بس — الباقي (روابط/لغة/CTA) بقائمة منسدلة */ .nav{ padding:14px 20px; } .nav-actions{ gap:10px; } .nav-actions .lang-switch, .nav-actions .nav-cta{ display:none; } .nav ul{ display:none; position:absolute; top:100%; inset-inline:0; flex-direction:column; align-items:stretch; gap:2px; background:var(--nav-bg); backdrop-filter:blur(14px); border-bottom:1px solid var(--border); padding:10px 20px 18px; left:auto; transform:none; } .nav ul.open{ display:flex; } .nav ul li{ border-top:1px solid var(--border); } .nav ul li:first-child{ border-top:none; } .nav ul a{ display:block; padding:14px 4px; font-size:16px; } .nav-mobile-extra{ display:list-item; border-top:1px solid var(--border); padding-top:14px; margin-top:8px; text-align:center; } .nav-mobile-extra .lang-switch{ display:inline-block; } .nav-mobile-extra .nav-cta{ display:inline-block; margin-top:10px; } .nav-toggle{ display:flex; } .about-grid, .service-card, .contact-grid{ grid-template-columns:1fr; } .portfolio-grid{ grid-template-columns:1fr; } .stats{ grid-template-columns:repeat(3,1fr); gap:10px; } section{ padding:72px 0; } } /* ---------- هيرو الصفحات الفرعية (خدمات/مدونة) ---------- */ .page-hero{ padding:150px 0 70px; position:relative; } .page-hero::before{ content:''; position:absolute; inset:0; z-index:-1; background:radial-gradient(circle at 15% 20%, #F2A93B14, transparent 45%); } /* زخرفة تقنية بنفس روح الرئيسية (نقاط متصلة) بجانب عنوان كل صفحة فرعية */ .page-hero::after{ content:''; position:absolute; top:50%; inset-inline-end:max(24px, calc(50% - 545px)); transform:translateY(-50%); width:130px; height:130px; opacity:.55; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cpath d='M30 40L100 20L130 100L50 120Z' stroke='%23F2A93B' stroke-width='1' fill='none' opacity='.6'/%3E%3Ccircle cx='30' cy='40' r='4' fill='%23F2A93B'/%3E%3Ccircle cx='100' cy='20' r='4' fill='%232FB8A6'/%3E%3Ccircle cx='130' cy='100' r='4' fill='%23F2A93B'/%3E%3Ccircle cx='50' cy='120' r='4' fill='%232FB8A6'/%3E%3C/svg%3E"); background-size:contain; background-repeat:no-repeat; } @media (max-width:1180px){ .page-hero::after{ display:none; } } .page-hero .container{ max-width:780px; } .back-link{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:13px; color:var(--text-secondary); margin-bottom:22px; transition:color .2s; } .back-link:hover{ color:var(--accent); } .page-hero h1{ font-size:clamp(30px,4.5vw,46px); margin-bottom:16px; color:var(--text-primary); } .page-hero .lead{ font-size:17px; color:var(--text-secondary); max-width:640px; } .page-meta{ display:flex; gap:14px; align-items:center; margin-top:18px; font-family:var(--font-mono); font-size:12.5px; color:var(--text-secondary); flex-wrap:wrap; } .page-meta .tag{ background:var(--accent-soft); color:var(--accent-hover); padding:4px 12px; border-radius:999px; } .page-meta .tag.text-price{ font-family:var(--font-ar-display); font-size:13px; } body.lang-en .page-meta .tag.text-price{ font-family:var(--font-en-display); } /* ---------- هَب الخدمات: نفس نسق بطاقات الخدمة بالرئيسية (3 أعمدة، وسط) ---------- */ .hub-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .hub-card{ background:var(--bg-card); border:1px solid var(--border); border-radius:16px; padding:24px 20px; display:flex; flex-direction:column; align-items:center; text-align:center; transition:border-color .2s, transform .2s; } .hub-card:hover{ border-color:var(--accent); transform:translateY(-3px); } .hub-card .service-icon{ width:44px; height:44px; margin-bottom:16px; } .hub-card .service-icon svg{ width:20px; height:20px; } .hub-card .service-icon.has-illustration{ width:104px; height:104px; } .hub-card .service-icon.has-illustration svg{ width:100%; height:100%; } .hub-card h3{ font-size:17px; margin-bottom:8px; } .hub-card p{ color:var(--text-secondary); font-size:13px; margin-bottom:14px; flex:1; } .hub-card .p-link{ font-family:var(--font-mono); font-size:13px; color:var(--accent-hover); display:inline-flex; align-items:center; gap:6px; } @media (max-width:960px){ .hub-grid{ grid-template-columns:repeat(2,1fr); } } /* ---------- أسئلة شائعة ---------- */ .faq-list{ display:flex; flex-direction:column; max-width:760px; margin:0 auto; } .faq-item{ border-bottom:1px solid var(--border); padding:22px 0; } .faq-item:first-child{ border-top:1px solid var(--border); } .faq-item-head{ display:flex; align-items:flex-start; gap:12px; margin-bottom:10px; } .faq-icon{ color:var(--accent); flex-shrink:0; margin-top:2px; } .faq-item h3{ font-size:16px; color:var(--text-primary); } .faq-item p{ color:var(--text-secondary); font-size:14.5px; margin-inline-start:30px; } /* ---------- بلوك دعوة لإجراء (خدمات/مدونة) ---------- */ .cta-band{ background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:44px; text-align:center; max-width:760px; margin:0 auto; } .cta-band h3{ font-size:24px; margin-bottom:12px; } .cta-band p{ color:var(--text-secondary); margin-bottom:24px; } .cta-band .btn-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; } /* ---------- محتوى المقال ---------- */ .post-content{ max-width:720px; margin:0 auto; } .post-content p{ color:var(--text-secondary); font-size:16px; margin-bottom:22px; line-height:1.9; } .post-meta{ display:flex; gap:16px; align-items:center; margin-bottom:8px; font-family:var(--font-mono); font-size:12.5px; color:var(--text-secondary); flex-wrap:wrap; } .post-cover{ max-width:720px; margin:0 auto 44px; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); aspect-ratio:16/9; background:var(--bg-card); } .post-cover img{ width:100%; height:100%; object-fit:cover; } .related-box{ max-width:720px; margin:56px auto 0; padding-top:36px; border-top:1px solid var(--border); } .related-box .related-label{ font-size:14px; font-family:var(--font-mono); color:var(--accent-hover); margin-bottom:16px; } .related-box h2{ font-size:19px; margin-bottom:8px; } .related-box ul{ list-style:none; display:flex; flex-direction:column; gap:10px; } .related-box a{ color:var(--text-primary); font-size:15px; transition:color .2s; } .related-box a:hover{ color:var(--accent); } /* ---------- شريط تقدّم القراءة (أقسام المقال) ---------- */ .reading-progress{ position:fixed; top:0; inset-inline:0; height:3px; z-index:99; background:var(--border); } .reading-progress-bar{ height:100%; width:0%; background:var(--accent); transition:width .1s linear; } /* ---------- أقسام المقال (بدل فقرة طويلة وحدة) ---------- */ .post-sections{ max-width:720px; margin:0 auto; display:flex; flex-direction:column; gap:52px; } .post-section-num{ font-size:13px; color:var(--accent-hover); letter-spacing:1px; margin-bottom:10px; } .post-section h2{ font-size:24px; margin-bottom:18px; text-wrap:balance; } .post-section p{ color:var(--text-secondary); font-size:16px; margin-bottom:22px; line-height:1.9; } .post-section-img{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); aspect-ratio:16/9; background:var(--bg-card); margin-bottom:22px; } .post-section-img img{ width:100%; height:100%; object-fit:cover; } /* ---------- تقييم المقال (5 نجوم، بدون تسجيل بيانات) ---------- */ .rate-box{ max-width:720px; margin:48px auto 0; padding-top:36px; border-top:1px solid var(--border); text-align:center; } .rate-box .related-label{ font-size:14px; font-family:var(--font-mono); color:var(--accent-hover); margin-bottom:16px; } .rate-stars{ display:flex; justify-content:center; gap:6px; margin-bottom:12px; } .rate-star{ background:none; border:none; padding:2px; cursor:pointer; color:var(--border); transition:color .15s, transform .15s; } .rate-star:hover{ transform:scale(1.12); } .rate-star.is-hover, .rate-star.is-selected{ color:var(--accent); } .rate-stars.is-voted .rate-star{ cursor:default; } .rate-stars.is-voted .rate-star:hover{ transform:none; } .rate-summary{ color:var(--text-secondary); font-size:14px; font-family:var(--font-mono); } .rate-thanks{ color:var(--accent-hover); font-size:14px; margin-top:6px; } @media (max-width:860px){ .hub-grid{ grid-template-columns:1fr; } } /* ---------- منع تحديد ونسخ محتوى الموقع ---------- */ body{ -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; -webkit-touch-callout:none; /* يمنع قائمة "حفظ/نسخ" عند الضغط المطوّل بأجهزة iOS */ } .form-group input, .form-group textarea, .form-group select{ -webkit-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text; -webkit-touch-callout:default; } /* ---------- حماية الصور من النسخ والحفظ (جوال وكمبيوتر) ---------- */ img{ -webkit-user-select:none; -moz-user-select:none; user-select:none; -webkit-user-drag:none; -webkit-touch-callout:none; pointer-events:none; } a img, button img{ pointer-events:auto; } /* ========================================================================== بصمة التنسيق الموحّدة لكل صفحات الموقع (مو الرئيسية بس): عكس أدوار العنوان، وتلوين متبادل بين الأقسام. مطبّقة عالميًا بدل ما تكون مقيّدة بـ body.page-home، عشان كل صفحة (من نحن، خدمة، ...) تاخذ نفس البصمة. ========================================================================== */ /* عكس أدوار العنوان: الـeyebrow يصير عنوان القسم البارز، وH2 الحالي يصير نصًا ناعمًا وأصغر تحته. المستوى الدلالي (h2) ما تغيّر — بس الحجم البصري. */ .section-eyebrow{ font-family:var(--font-ar-display); font-size:clamp(24px,3vw,34px); font-weight:800; color:var(--accent-hover); letter-spacing:normal; } body.lang-en .section-eyebrow{ font-family:var(--font-en-display); } .section-head h2, .about-text h2, .contact-info h2{ font-size:19px; font-weight:600; color:var(--text-secondary); margin-bottom:0; text-wrap:initial; letter-spacing:normal; } .section-head{ margin-bottom:48px; } .about-text .section-eyebrow{ margin-bottom:10px; } .about-text h2{ margin-bottom:18px; } /* ---------- الهيرو: عنوان أصغر وأكثر انضباطًا + أيقونة تقنية زخرفية ---------- */ body.page-home .hero h1{ font-size:clamp(26px,3.8vw,44px); max-width:680px; } body.page-home .hero p.lead{ font-size:16px; max-width:520px; } .hero-deco{ position:absolute; top:50%; transform:translateY(-50%); z-index:0; pointer-events:none; opacity:.85; width:220px; height:220px; } .hero-deco svg{ width:100%; height:100%; } body.lang-ar .hero-deco{ left:max(24px, calc(50% - 545px)); } body.lang-en .hero-deco{ right:max(24px, calc(50% - 545px)); } @media (max-width:1180px){ .hero-deco{ display:none; } } /* ---------- زخارف تقنية مبعثرة بأقسام إضافية — نفس فكرة hero-deco بأشكال مختلفة (مثلث نقاط، قوس، شبكة نقاط) عشان الموقع كله يحس بنفس الهوية. ---------- */ .section-deco{ position:absolute; z-index:0; pointer-events:none; width:100px; height:100px; opacity:.5; } .section-deco svg{ width:100%; height:100%; } .section-deco-why{ top:36px; inset-inline-end:max(24px, calc(50% - 545px)); } .section-deco-service{ bottom:24px; inset-inline-start:max(24px, calc(50% - 615px)); width:90px; height:90px; } .section-deco-tools{ top:30px; inset-inline-start:max(24px, calc(50% - 545px)); width:80px; height:80px; opacity:.4; } @media (max-width:1180px){ .section-deco{ display:none; } } /* ---------- من نحن: صورة بدون حدود/صندوق واضح ---------- */ body.page-home .about-photo{ background:none; border:none; } /* ---------- ليش تختارني: سطر واحد بدون صناديق ---------- */ body.page-home #why .why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px; } body.page-home #why .why-card{ background:none; border:none; padding:0; border-radius:0; } body.page-home #why .why-card:hover{ transform:none; } @media (max-width:860px){ body.page-home #why .why-grid{ grid-template-columns:repeat(2,1fr); gap:28px; } } @media (max-width:560px){ body.page-home #why .why-grid{ grid-template-columns:1fr; } } @media (max-width:560px){ .service-work-strip{ display:flex; flex-wrap:nowrap; overflow-x:auto; gap:18px; padding:0 4px 8px; scrollbar-width:thin; scrollbar-color:var(--accent) var(--bg); } .service-work-strip .p-card{ flex:0 0 180px; } .service-work-strip .p-body h3{ font-size:13px; line-height:1.4; } .service-work-strip .p-cat{ font-size:10px; } .related-articles-strip{ display:flex; flex-wrap:nowrap; overflow-x:auto; gap:18px; padding:0 4px 8px; scrollbar-width:thin; scrollbar-color:var(--accent) var(--bg); } .related-articles-strip .p-card{ flex:0 0 220px; } .related-articles-strip .p-body p{ display:none; } .related-articles-strip .p-body h3{ font-size:15px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } body.page-home #tools .trust-strip-static{ flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; gap:44px; padding:0 4px 8px; scrollbar-width:none; } body.page-home #tools .trust-strip-static::-webkit-scrollbar{ display:none; } body.page-home #tools .trust-strip-logo{ flex:0 0 auto; height:64px; } body.page-home #tools .trust-strip-logo img{ max-height:52px; } } @media (max-width:560px){ body.page-home #portfolio .portfolio-strip{ display:flex; flex-wrap:nowrap; overflow-x:auto; gap:18px; padding:0 4px 8px; scrollbar-width:none; } body.page-home #portfolio .portfolio-strip::-webkit-scrollbar{ display:none; } body.page-home #portfolio .portfolio-box{ flex:0 0 248px; } } @media (max-width:560px){ /* تطابق ارتفاع الحاوية مع أبعاد الصورة حتى لا يظهر فراغ قبل النص */ body.page-home .about-photo{ aspect-ratio:auto; } body.page-home .about-grid{ gap:28px; } body.page-home .skills{ justify-content:center; } body.page-home .about-photo picture, body.page-home .about-photo img{ width:100%; height:auto; } } @media (max-width:560px){ body.page-home #clients .trust-strip-static{ flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; gap:44px; padding:0 4px 8px; scrollbar-width:none; } body.page-home #clients .trust-strip-static::-webkit-scrollbar{ display:none; } body.page-home #clients .trust-strip-logo{ flex:0 0 auto; height:56px; } body.page-home #clients .trust-strip-logo img{ max-height:48px; } } /* ---------- أعمالنا: شريط أفقي قابل للتمرير بدل الشبكة الكبيرة ---------- */ .portfolio-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; } @media (max-width:860px){ .portfolio-strip{ grid-template-columns:repeat(2,1fr); } } @media (max-width:520px){ .portfolio-strip{ grid-template-columns:1fr; } } .portfolio-box{ text-decoration:none; color:inherit; background:var(--bg-card); border:1px solid var(--border); border-radius:16px; padding:24px 20px; text-align:center; display:block; transition:border-color .2s ease, transform .2s ease; } a.portfolio-box:hover{ border-color:var(--accent); transform:translateY(-3px); } .portfolio-box .icon{ width:44px; height:44px; margin:0 auto 16px; border-radius:12px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; overflow:hidden; } .portfolio-box .icon img{ width:100%; height:100%; object-fit:cover; } .portfolio-box .cat{ display:block; font-family:var(--font-mono); font-size:11px; color:var(--teal); margin-bottom:6px; } .portfolio-box h3{ font-size:15.5px; margin:0; } .portfolio-box .status{ display:block; font-size:11px; color:var(--text-secondary); margin-top:10px; line-height:1.5; } /* ---------- خدماتنا: شبكة ثابتة 3×2 بدل الشريط القابل للسحب ---------- */ body.page-home .services-arrow{ display:none !important; } body.page-home #service{ padding:64px 0; } body.page-home #service .section-head{ margin-bottom:28px; } body.page-home .services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; overflow:visible; cursor:default; } body.page-home .service-card{ flex:none; align-items:center; text-align:center; padding:20px 18px; border-radius:16px; } body.page-home .service-card::after{ display:none; } body.page-home .service-icon{ width:40px; height:40px; border-radius:11px; margin-bottom:14px; margin-inline:auto; } body.page-home .service-icon svg{ width:19px; height:19px; } body.page-home .service-icon.has-illustration{ width:88px; height:88px; } body.page-home .service-icon.has-illustration svg{ width:100%; height:100%; } body.page-home .service-card h3{ font-size:16px; margin-bottom:8px; } body.page-home .service-card p{ font-size:12.5px; line-height:1.55; margin-bottom:10px; } body.page-home .service-card .p-link{ justify-content:center; margin-top:auto; padding-top:8px; font-size:13px; } @media (max-width:960px){ body.page-home .services-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:600px){ body.page-home .services-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; } body.page-home .service-card{ min-height:0; padding:16px 10px; } body.page-home .service-card p{ display:none; } body.page-home .service-card h3{ font-size:14px; } body.page-home .service-card p{ font-size:11.5px; } body.page-home .service-card .p-link{ display:none; } body.page-home .service-card .p-link-icon{ transform:translate(-4px, -3px); } } /* ---------- تواصل: بيانات أوضح + نموذج بمساحة أقل ---------- */ body.page-home .contact-info .item .label{ font-size:13px; } body.page-home .contact-info .item a, body.page-home .contact-info .item span{ font-size:21px; font-weight:600; } body.page-home .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } body.page-home .form-row .form-group{ margin-bottom:0; } body.page-home .form-group{ margin-bottom:14px; } body.page-home .form-group input, body.page-home .form-group textarea, body.page-home .form-group select{ padding:11px 14px; } @media (max-width:640px){ body.page-home .form-row{ grid-template-columns:1fr; gap:0; } body.page-home .form-row .form-group{ margin-bottom:14px; } }