/* ════════════════════════════════════════════════════════════════ سيرا — «خيط الضوء» · نظام تصميم الصفحة الرئيسية 2026-08 من الصفر بالكامل. أبيض فاخر + سراج أزرق #00B6E6 + شعلة #FFC233 الموتيف: شفرة الضوء (من الشعار نفسه) + المعيّن (شظية مدوّرة) ════════════════════════════════════════════════════════════════ */ /* ──────────────── 0.0 · خطوط احتياطية مطابقة المقاس ──────────────── السبب: القياس أثبت أن أكبر مصدر لإزاحة التخطيط (CLS) هو لحظة وصول خطوط جوجل واستبدالها بخط النظام — لأن مقاسات الخطين مختلفة، فيُعاد لفّ كل فقرة وينزاح ما تحتها. الأرقام أدناه مقيسة فعليا في المتصفح: عرض النص نفسه بالخط الحقيقي مقابل الخط الاحتياطي. size-adjust يجعل الاحتياطي يشغل المساحة نفسها، فلا يتحرك شيء عند التبديل والنص يبقى مقروءا من أول رسمة. Metric-matched fallbacks. Measured, not guessed: Alexandria renders 12.7% wider than Tahoma and IBM Plex Sans Arabic 11.7% narrower, so the swap used to re-wrap every paragraph. Re-measure with scratchpad/font_metrics.js if a family ever changes. */ @font-face{ font-family:"Alexandria Fallback"; src:local("Tahoma"),local("Segoe UI"),local("Arial"); size-adjust:112.7%; font-display:swap; } @font-face{ font-family:"Plex Arabic Fallback"; src:local("Tahoma"),local("Segoe UI"),local("Arial"); size-adjust:88.3%; font-display:swap; } @font-face{ font-family:"Grotesk Fallback"; src:local("Arial"),local("Helvetica"),local("Segoe UI"); size-adjust:112.3%; font-display:swap; } /* ───────────────────────── 0 · Tokens ───────────────────────── */ :root{ --paper:#FFFFFF; --mist:#F0F9FD; /* غسلة سماوية للأقسام المتبادلة */ --mist-2:#E3F4FB; --ink:#07293D; /* كحلي بحري عميق — نصوص وعناوين */ --slate:#4A6579; /* نص ثانوي */ --sky:#00B6E6; /* سراج أزرق — اللون الأساسي */ --sky-ink:#0083B4; /* أزرق قابل للقراءة للروابط والأزرار */ --sky-soft:rgba(0,182,230,.10); --flame:#FFC233; /* شعلة دافئة — للتمييز فقط */ --flame-deep:#EBA400; --line:#DBEDF5; --shadow-s:0 1px 2px rgba(7,41,61,.05),0 4px 14px rgba(7,41,61,.06); --shadow-m:0 2px 6px rgba(7,41,61,.06),0 18px 44px rgba(7,41,61,.10); --shadow-l:0 8px 24px rgba(7,41,61,.10),0 32px 80px rgba(7,41,61,.16); --r-s:12px; --r-m:20px; --r-l:32px; --font-d:"Alexandria","Alexandria Fallback","IBM Plex Sans Arabic",system-ui,sans-serif; --font-b:"IBM Plex Sans Arabic","Plex Arabic Fallback",system-ui,sans-serif; --font-t:"Space Grotesk","Grotesk Fallback","IBM Plex Sans Arabic",monospace; --wrap:1240px; --header-h:76px; } html[data-theme="dark"]{ --paper:#06202F; --mist:#082636; --mist-2:#0A2C3E; --ink:#EAF6FC; --slate:#9DBACB; --sky-ink:#35C8EF; --sky-soft:rgba(0,182,230,.14); --line:#12384D; --shadow-s:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.3); --shadow-m:0 2px 6px rgba(0,0,0,.35),0 18px 44px rgba(0,0,0,.4); --shadow-l:0 8px 24px rgba(0,0,0,.4),0 32px 80px rgba(0,0,0,.5); } /* ───────────────────────── 1 · Base ───────────────────────── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip} body{ font-family:var(--font-b); background:var(--paper); color:var(--ink); line-height:1.8; font-size:16.5px; overflow-x:hidden; } img,svg,video{max-width:100%;display:block} a{color:inherit;text-decoration:none} ul,ol{list-style:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} ::selection{background:var(--sky);color:#fff} :focus-visible{outline:2px solid var(--sky);outline-offset:3px;border-radius:4px} .tech{font-family:var(--font-t);font-weight:600;letter-spacing:.01em} main section[id]{scroll-margin-top:calc(var(--header-h) + 12px)} h1,h2,h3,h4{font-family:var(--font-d);line-height:1.45;font-weight:700} /* شريط تقدم القراءة أعلى الصفحة */ .scroll-progress{ position:fixed;inset-inline:0;top:0;height:3px;z-index:1200; background:linear-gradient(270deg,var(--sky),var(--flame)); transform:scaleX(0);transform-origin:right;pointer-events:none; } html[dir="ltr"] .scroll-progress{transform-origin:left} /* ───────────────────────── 2 · Utilities ───────────────────────── */ .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(20px,4vw,40px)} .sec{padding-block:clamp(72px,9vw,128px);position:relative} .sec--mist{background:var(--mist)} /* ترويسة قسم: معيّنان متراكبان + سطران — بصمة 2p بلغة سيرا */ .kicker{display:flex;align-items:flex-start;gap:18px;margin-bottom:clamp(30px,4vw,52px)} .kicker .gem{position:relative;width:46px;height:46px;flex:0 0 auto;margin-top:6px} .kicker .gem::before,.kicker .gem::after{ content:"";position:absolute;inset:0;border-radius:10px;transform:rotate(45deg); } .kicker .gem::before{background:linear-gradient(135deg,var(--flame),var(--sky));opacity:.22;inset:-7px -7px 7px 7px} html[dir="ltr"] .kicker .gem::before{inset:-7px 7px 7px -7px} .kicker .gem::after{border:2.5px solid var(--sky);background:var(--paper)} .kicker .gem i{ position:absolute;inset:14px;border-radius:4px;transform:rotate(45deg); background:linear-gradient(135deg,var(--sky),var(--flame));z-index:1; } .kicker hgroup .up{ display:block;font-family:var(--font-d);font-weight:500;color:var(--sky-ink); font-size:clamp(15px,1.6vw,19px);margin-bottom:2px;letter-spacing:.02em; } .kicker h2{font-size:clamp(26px,3.4vw,42px);font-weight:800;line-height:1.35} .kicker .note{max-width:52ch;color:var(--slate);margin-top:10px;font-size:15.5px} .kicker--center{flex-direction:column;align-items:center;text-align:center} .kicker--center .gem{margin-top:0} .lead{color:var(--slate);font-size:clamp(16px,1.8vw,18.5px);line-height:2} /* أزرار */ .btn{ display:inline-flex;align-items:center;gap:10px; font-family:var(--font-d);font-weight:600;font-size:15.5px; padding:14px 28px;border-radius:14px; transition:transform .25s ease,box-shadow .25s ease,background .25s ease,color .25s ease; will-change:transform; } .btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(0)} .btn .arw{width:18px;height:18px;transition:transform .25s ease} .btn:hover .arw{transform:translateX(-4px)} html[dir="ltr"] .btn:hover .arw{transform:translateX(4px)} .btn--flame{ background:linear-gradient(160deg,#FFD25E,var(--flame) 55%,var(--flame-deep)); color:#43300A;box-shadow:0 6px 18px rgba(255,194,51,.35); } .btn--flame:hover{box-shadow:0 10px 26px rgba(255,194,51,.45)} .btn--sky{background:var(--sky-ink);color:#fff;box-shadow:0 6px 18px rgba(0,131,180,.28)} .btn--sky:hover{background:var(--sky);box-shadow:0 10px 26px rgba(0,182,230,.38)} .btn--ghost{border:1.5px solid var(--line);color:var(--ink);background:var(--paper)} .btn--ghost:hover{border-color:var(--sky);color:var(--sky-ink)} .btn--glass{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} .btn--glass:hover{background:rgba(255,255,255,.24)} /* سهم داخل معيّن — عنصر تنقّل موحد */ .dbtn{ width:48px;height:48px;position:relative;display:inline-grid;place-items:center; transition:transform .25s ease;flex:0 0 auto; } .dbtn::before{ content:"";position:absolute;inset:4px;border-radius:12px;transform:rotate(45deg); border:2px solid var(--sky);background:var(--paper);transition:background .25s,border-color .25s; } .dbtn svg{width:20px;height:20px;position:relative;z-index:1;stroke:var(--sky-ink);transition:stroke .25s} .dbtn:hover{transform:translateY(-3px)} .dbtn:hover::before{background:var(--sky);border-color:var(--sky)} .dbtn:hover svg{stroke:#fff} .dbtn:disabled{opacity:.35;pointer-events:none} /* ترقيم كواروسيل بأسلوب 2p: 01 02 03 … */ .cnums{display:flex;align-items:center;gap:18px;direction:ltr} .cnums .n{ font-family:var(--font-t);font-weight:600;font-size:19px;color:#B9D8E6; position:relative;padding-bottom:8px;transition:color .3s; } html[data-theme="dark"] .cnums .n{color:#2E5A73} .cnums .n::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:2.5px;border-radius:2px; background:var(--flame);transform:scaleX(0);transition:transform .35s ease; } .cnums .n.on{color:var(--ink)} .cnums .n.on::after{transform:scaleX(1)} /* كشف بالتمرير (يشغّله main.js عبر .revealed) */ [data-reveal],[data-reveal-stagger]>*{ opacity:0;transform:translateY(28px); transition:opacity .7s cubic-bezier(.22,.9,.3,1),transform .7s cubic-bezier(.22,.9,.3,1); } [data-reveal].revealed,[data-reveal-stagger].revealed>*{opacity:1;transform:none} [data-reveal-stagger].revealed>*:nth-child(2){transition-delay:.09s} [data-reveal-stagger].revealed>*:nth-child(3){transition-delay:.18s} [data-reveal-stagger].revealed>*:nth-child(4){transition-delay:.27s} [data-reveal-stagger].revealed>*:nth-child(5){transition-delay:.36s} [data-reveal-stagger].revealed>*:nth-child(6){transition-delay:.45s} /* ───────────────────────── 2.5 · شاشة التحميل ───────────────────────── */ #splash{ position:fixed;inset:0;z-index:3000;background:#fff; display:flex;flex-direction:column;align-items:center;justify-content:center; transition:opacity .6s ease,visibility .6s ease,transform .6s cubic-bezier(.22,.9,.3,1); } #splash::before{ /* غسلة سماوية خفيفة تكسر بياض الشاشة الصلب */ content:"";position:absolute;inset:0;pointer-events:none; background: radial-gradient(620px 420px at 50% 38%,rgba(0,182,230,.07),transparent 70%), radial-gradient(520px 360px at 50% 100%,rgba(255,194,51,.06),transparent 70%); } #splash.done{opacity:0;visibility:hidden;pointer-events:none;transform:scale(1.04)} #splash .sp-stage{position:relative;width:110px;height:110px;display:grid;place-items:center;perspective:600px} #splash .sp-halo{ position:absolute;inset:0;border-radius:26px;transform:rotate(45deg); border:2.5px dashed rgba(0,182,230,.35); animation:spOrbit 7s linear infinite; } #splash .sp-halo::after{ content:"";position:absolute;top:-6px;left:50%;width:11px;height:11px;border-radius:3px; background:linear-gradient(135deg,var(--flame),var(--flame-deep));transform:translateX(-50%) rotate(45deg); box-shadow:0 0 14px rgba(255,194,51,.7); } @keyframes spOrbit{to{transform:rotate(405deg)}} #splash .sp-mark{ width:64px;height:auto; animation:spCoin 2.1s cubic-bezier(.45,.05,.25,.95) infinite; filter:drop-shadow(0 12px 26px rgba(0,182,230,.28)); } @keyframes spCoin{0%{transform:rotateY(0)}55%{transform:rotateY(360deg)}100%{transform:rotateY(360deg)}} #splash .sp-name{ margin-top:22px;font-family:var(--font-d);font-weight:800;font-size:20px;color:var(--ink);letter-spacing:.01em; animation:spRise .7s cubic-bezier(.22,.9,.3,1) both; } @keyframes spRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} #splash .sp-line{ width:148px;height:3px;border-radius:3px;margin-top:16px;overflow:hidden;position:relative; background:var(--mist-2); } #splash .sp-line::after{ content:"";position:absolute;inset-block:0;width:46%;border-radius:3px; background:linear-gradient(270deg,var(--sky),var(--flame)); animation:spSweep 1.15s cubic-bezier(.45,.1,.45,.9) infinite alternate; } @keyframes spSweep{from{inset-inline-start:0}to{inset-inline-start:54%}} #splash .sp-txt{margin-top:12px;font-family:var(--font-d);font-weight:500;font-size:13.5px;color:var(--slate)} #splash .sp-dots i{font-style:normal;animation:spDot 1.4s ease-in-out infinite} #splash .sp-dots i:nth-child(2){animation-delay:.2s} #splash .sp-dots i:nth-child(3){animation-delay:.4s} @keyframes spDot{0%,60%,100%{opacity:.2}30%{opacity:1}} @media (prefers-reduced-motion:reduce){ #splash .sp-halo,#splash .sp-mark,#splash .sp-line::after,#splash .sp-dots i{animation:none} } html[data-theme="dark"] #splash{background:var(--paper)} /* لا وميض أبيض في الداكن */ /* ───────────────────────── 3 · Header ───────────────────────── */ .site-header{ position:fixed;inset-inline:0;top:0;z-index:1000; background:transparent; transition:background .35s ease,box-shadow .35s ease,transform .35s ease; } .site-header::before{ /* خيط ضوء رفيع أعلى الموقع */ content:"";position:absolute;inset-inline:0;top:0;height:3px; background:linear-gradient(270deg,var(--sky) 0%,var(--flame) 100%); opacity:0;transition:opacity .35s; } .site-header.scrolled{ /* سفاري قبل 16.2 لا يعرف color-mix — الاحتياطي أولا وإلا بقي الهيدر شفافا */ background:rgba(255,255,255,.9); background:color-mix(in srgb,var(--paper) 88%,transparent); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); box-shadow:var(--shadow-s); } .site-header.scrolled::before{opacity:1} .header-inner{ max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(20px,4vw,40px); height:var(--header-h);display:flex;align-items:center;gap:28px; } .brand{display:flex;align-items:center;gap:11px;flex:0 0 auto} .brand .mk{width:30px;height:33px} .brand .txt b{display:block;font-family:var(--font-d);font-weight:700;font-size:17px;line-height:1.3;color:#fff;transition:color .35s} .brand .txt small{display:block;font-family:var(--font-t);font-size:10.5px;color:rgba(255,255,255,.72);letter-spacing:.06em;transition:color .35s} .site-header.scrolled .brand .txt b,.site-header.solid .brand .txt b{color:var(--ink)} .site-header.scrolled .brand .txt small,.site-header.solid .brand .txt small{color:var(--slate)} .main-nav{display:flex;align-items:center;gap:4px;margin-inline-start:auto} .main-nav>a,.nav-drop>button{ font-family:var(--font-d);font-weight:500;font-size:15px;color:rgba(255,255,255,.92); padding:9px 14px;border-radius:10px;position:relative;display:inline-flex;align-items:center;gap:6px; transition:color .3s,background .3s; } .site-header.scrolled .main-nav>a,.site-header.scrolled .nav-drop>button{color:var(--ink)} .main-nav>a::after{ content:"";position:absolute;inset-inline:14px;bottom:4px;height:2.5px;border-radius:2px; background:var(--flame);transform:scaleX(0);transform-origin:center;transition:transform .3s ease; } .main-nav>a:hover::after,.main-nav>a[aria-current="page"]::after{transform:scaleX(1)} .main-nav>a:hover,.nav-drop>button:hover{background:rgba(0,182,230,.10)} /* قابلية قراءة فوق الشرائح الفاتحة قبل التمرير */ .site-header:not(.scrolled):not(.solid) .main-nav>a, .site-header:not(.scrolled):not(.solid) .nav-drop>button, .site-header:not(.scrolled):not(.solid) .brand .txt b, .site-header:not(.scrolled):not(.solid) .brand .txt small, .site-header:not(.scrolled):not(.solid) .nav-cta #langToggle, .site-header:not(.scrolled):not(.solid) .nav-cta .lang-toggle, .site-header:not(.scrolled):not(.solid) .nav-cta .theme-toggle{ text-shadow:0 1px 3px rgba(4,26,40,.45),0 2px 16px rgba(4,26,40,.5); } .site-header:not(.scrolled):not(.solid) .menu-toggle{filter:drop-shadow(0 1px 4px rgba(4,26,40,.55))} .nav-drop{position:relative} .nav-drop>button svg{width:14px;height:14px;transition:transform .3s} .nav-drop:hover>button svg,.nav-drop:focus-within>button svg{transform:rotate(180deg)} .nav-menu{ position:absolute;top:calc(100% + 14px);inset-inline-start:0;min-width:300px; background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m); box-shadow:var(--shadow-m);padding:10px;display:grid;gap:2px; opacity:0;visibility:hidden;transform:translateY(12px); transition:opacity .3s ease,transform .3s ease,visibility .3s; } .nav-drop:hover .nav-menu,.nav-drop:focus-within .nav-menu{opacity:1;visibility:visible;transform:none} .nav-menu a{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;padding:11px 14px;border-radius:12px;transition:background .25s} .nav-menu a:hover{background:var(--sky-soft)} .nav-menu .gm{ grid-row:span 2;width:34px;height:34px;border-radius:9px;transform:rotate(45deg); background:linear-gradient(135deg,var(--sky-soft),rgba(255,194,51,.18)); border:1.5px solid var(--sky);display:grid;place-items:center;margin-top:4px; } .nav-menu .gm svg{width:16px;height:16px;transform:rotate(-45deg);stroke:var(--sky-ink)} .nav-menu b{font-family:var(--font-d);font-weight:600;font-size:14.5px;color:var(--ink)} .nav-menu span{font-size:12.5px;color:var(--slate);line-height:1.6} .nav-cta{display:flex;align-items:center;gap:10px;flex:0 0 auto} .nav-cta .btn{padding:10.5px 20px;font-size:14px;border-radius:12px} /* زر اللغة الذي يحقنه i18n.js وزر الثيم من main.js — تجميل عام */ .nav-cta .lang-toggle,.nav-cta #langToggle,.nav-cta .theme-toggle{ border:1.5px solid rgba(255,255,255,.4);color:#fff;border-radius:11px; font-family:var(--font-t);font-weight:600;font-size:13px;padding:8px 13px; transition:all .3s;background:transparent; } .site-header.scrolled .nav-cta .lang-toggle,.site-header.scrolled .nav-cta #langToggle, .site-header.scrolled .nav-cta .theme-toggle{border-color:var(--line);color:var(--ink)} .nav-cta .lang-toggle:hover,.nav-cta #langToggle:hover,.nav-cta .theme-toggle:hover{border-color:var(--sky);color:var(--sky)} /* زر القائمة للجوال */ .menu-toggle{display:none;width:44px;height:44px;position:relative;z-index:1101} .menu-toggle span,.menu-toggle span::before,.menu-toggle span::after{ content:"";position:absolute;width:22px;height:2.5px;border-radius:2px;background:#fff; left:11px;transition:all .3s ease; } .site-header.scrolled .menu-toggle span,.site-header.scrolled .menu-toggle span::before, .site-header.scrolled .menu-toggle span::after{background:var(--ink)} .menu-toggle span{top:21px} .menu-toggle span::before{top:-7px;left:0} .menu-toggle span::after{top:7px;left:0} .menu-toggle[aria-expanded="true"] span{background:transparent!important} .menu-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg);background:var(--ink)} .menu-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg);background:var(--ink)} .mobile-menu{ position:fixed;inset:0;top:0;background:var(--paper);z-index:1100; padding:calc(var(--header-h) + 24px) 28px 40px;display:flex;flex-direction:column;gap:2px; transform:translateY(-100%);transition:transform .45s cubic-bezier(.22,.9,.3,1); overflow-y:auto; } .mobile-menu.open{transform:none} .mobile-menu a{ font-family:var(--font-d);font-weight:600;font-size:19px;padding:13px 6px; border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px; } .mobile-menu a::before{ content:"";width:8px;height:8px;border-radius:2px;transform:rotate(45deg); background:var(--sky);opacity:.5;flex:0 0 auto; } .mobile-menu .mm-group{ font-family:var(--font-t);font-size:12px;letter-spacing:.1em;color:var(--sky-ink); margin:22px 0 6px;text-transform:uppercase; } /* ───────────────────────── 4 · Hero ───────────────────────── */ /* 100vh أولا لسفاري القديم، ثم svh للأجهزة التي تحترم شريط العنوان المتحرك */ .hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;color:#fff;overflow:hidden;background:var(--ink)} .hero-slides{position:absolute;inset:0} .hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease;visibility:hidden} .hero-slide.on{opacity:1;visibility:visible} .hero-slide img{ width:100%;height:100%;object-fit:cover;object-position:center 22%; transform:scale(1.08);transition:transform 7s linear; } .hero-slide.on img{transform:scale(1)} /* تظليل للقراءة: أدكن من جهة النص (يمين RTL) وأسفل */ /* تظليل للقراءة — بلون الفوتر نفسه (#051E2E → #062334) ليقفل الصفحة بنفس النبرة. كان مقلوبا: التدرج الأفقي 270deg يبدأ من اليمين بشفافية .10 وينتهي يسارا بـ.72، والنص العربي على اليمين — أي أنه كان يعتم الجهة الفارغة ويترك النص فوق أفتح مناطق الصورة. القياس أثبتها: ٩ من ١٦ كتلة نص كانت دون حد WCAG، وواحدة عند 2.32 فقط. الطبقات الثلاث أدناه: قاعدة موحدة تضمن حدا أدنى مهما كانت الصورة، ثم تعتيم متدرج على جهة النص، ثم تثبيت الأعلى للهيدر والأسفل لشريط التحكم. */ .hero-shade{position:absolute;inset:0; background: linear-gradient(180deg,rgba(5,30,46,.74) 0%,rgba(5,30,46,.70) 45%,rgba(6,35,52,.82) 100%), linear-gradient(90deg,rgba(5,30,46,.14) 0%,rgba(5,30,46,.72) 34%,rgba(5,30,46,.94) 100%), linear-gradient(to top,rgba(6,35,52,.90) 0%,rgba(6,35,52,.28) 26%,rgba(6,35,52,0) 56%); } /* في الإنجليزية النص على اليسار، فينعكس التدرج الأفقي وحده */ html[dir="ltr"] .hero-shade{background: linear-gradient(180deg,rgba(5,30,46,.74) 0%,rgba(5,30,46,.70) 45%,rgba(6,35,52,.82) 100%), linear-gradient(270deg,rgba(5,30,46,.14) 0%,rgba(5,30,46,.72) 34%,rgba(5,30,46,.94) 100%), linear-gradient(to top,rgba(6,35,52,.90) 0%,rgba(6,35,52,.28) 26%,rgba(6,35,52,0) 56%)} /* شفرة الضوء — التوقيع: قطر مضيء من الشعار يقطع البطل */ /* الشفرة توقيع بصري، لا يجوز أن تمر تحت النص: كانت تبدأ عند 52% من جهة النص فتقطع سطر التعريف، وامتزاجها screen يجعلها أسطع كلما أعتمنا خلفها — فتصير أسوأ نقطة تباين في البطل كله. أزحناها إلى الجهة الفارغة وخففنا حدتها. */ .hero-blade{ position:absolute;inset-block:-12%;inset-inline-start:68%;width:30%;pointer-events:none; background:linear-gradient(115deg,transparent 0%,rgba(0,182,230,.26) 42%,rgba(255,194,51,.24) 58%,transparent 100%); transform:skewX(-14deg);mix-blend-mode:screen;filter:blur(3px); animation:bladeBreathe 9s ease-in-out infinite; } @keyframes bladeBreathe{0%,100%{opacity:.55}50%{opacity:.85}} .hero-body{position:relative;z-index:2;flex:1;display:flex;align-items:center;padding-top:calc(var(--header-h) + 20px);padding-bottom:28px} .hero-copy{max-width:780px} .hero-eyebrow{ display:inline-flex;align-items:center;gap:10px; font-family:var(--font-d);font-weight:500;font-size:clamp(13.5px,1.5vw,15.5px); color:#FFE9AE;background:rgba(255,194,51,.12);border:1px solid rgba(255,194,51,.35); padding:8px 18px;border-radius:99px;margin-bottom:26px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); } .hero-eyebrow::before{content:"";width:8px;height:8px;border-radius:2px;transform:rotate(45deg);background:var(--flame)} [data-slide-copy]:not([hidden]){animation:copyIn .8s cubic-bezier(.22,.9,.3,1)} @keyframes copyIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} /* دخول البطل بعد انقشاع شاشة التحميل — تتابع مقصود لا حركات متناثرة */ .hero-copy .hero-eyebrow, .hero-copy .hero-title, .hero-copy .hero-lead, .hero-cta, .hero-deck, .trust-rail{animation:heroEnter .9s cubic-bezier(.22,.9,.3,1) both} .hero-copy .hero-title{animation-delay:.08s} .hero-copy .hero-lead{animation-delay:.16s} .hero-cta{animation-delay:.24s} .hero-deck{animation-delay:.34s} .trust-rail{animation-delay:.42s} @keyframes heroEnter{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}} /* بعد أول شريحة يتكفل copyIn بالتبديل، فلا نكرر حركة الدخول */ .hero-slides ~ .hero-body [data-slide-copy][hidden]{animation:none} .hero-title{ font-size:clamp(32px,4.9vw,58px);font-weight:800;line-height:1.42;color:#fff; margin-bottom:24px;text-wrap:balance;max-width:19ch; } .hero-title .hl{position:relative;color:#5FD9F8;white-space:nowrap} .hero-title .hl::after{ content:"";position:absolute;inset-inline:2px;bottom:6px;height:10px;border-radius:5px; background:linear-gradient(270deg,rgba(0,182,230,.5),rgba(255,194,51,.55)); z-index:-1;filter:blur(1px); } .hero-lead{font-size:clamp(15.5px,1.9vw,19.5px);line-height:2.05;color:#EAF6FC;max-width:58ch;margin-bottom:38px} /* ظل نصي خفيف: يضمن القراءة فوق أي بقعة فاتحة في الصورة دون أن نضطر لإغراق الصورة بالسواد. الحل الأول هو التظليل أعلاه؛ هذا تأمين إضافي لا بديل عنه. */ .hero-title,.hero-lead{text-shadow:0 1px 2px rgba(3,20,32,.45),0 2px 18px rgba(3,20,32,.40)} .hero-title .hl{text-shadow:0 1px 2px rgba(3,20,32,.5)} .hero-cta{display:flex;flex-wrap:wrap;gap:14px} .hero-cta .btn{padding:16px 32px;font-size:16px} /* شريط التحكم أسفل البطل */ .hero-deck{position:relative;z-index:2;padding-bottom:34px} .hero-deck-row{display:flex;align-items:flex-end;justify-content:space-between;gap:28px} /* مصغرات الشرائح القادمة — بصمة 2p */ .hero-thumbs{display:flex;align-items:center;gap:14px} .hero-thumb{ width:150px;height:88px;border-radius:16px;overflow:hidden;position:relative; border:2px solid rgba(255,255,255,.35);box-shadow:0 10px 30px rgba(0,0,0,.35); transition:transform .3s ease,border-color .3s;background:#0A3049; } .hero-thumb img{width:100%;height:100%;object-fit:cover;opacity:.85;transition:opacity .3s} .hero-thumb:hover{transform:translateY(-5px);border-color:var(--flame)} .hero-thumb:hover img{opacity:1} .hero-thumb .tl{ position:absolute;inset-inline:0;bottom:0;padding:7px 10px 6px;font-size:11.5px;font-weight:500; font-family:var(--font-d);line-height:1.5; background:linear-gradient(to top,rgba(4,26,40,.92) 0%,rgba(4,26,40,.4) 70%,transparent);color:#fff; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .hero-arrows{display:flex;gap:10px} .hero-arrows .dbtn::before{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5)} .hero-arrows .dbtn svg{stroke:#fff} .hero-arrows .dbtn:hover::before{background:var(--flame);border-color:var(--flame)} .hero-arrows .dbtn:hover svg{stroke:#43300A} /* ترقيم + مؤشر السحب */ .hero-side{display:flex;align-items:flex-end;gap:34px} .hero-count{display:flex;align-items:center;gap:14px;direction:ltr} .hero-count .n{font-family:var(--font-t);font-size:17px;font-weight:600;color:rgba(255,255,255,.45);transition:color .3s,font-size .3s} .hero-count .n.on{color:#fff;font-size:22px} .hero-count .bar{width:74px;height:2.5px;border-radius:2px;background:rgba(255,255,255,.25);overflow:hidden} .hero-count .bar i{display:block;height:100%;width:100%;background:var(--flame);transform:scaleX(0);transform-origin:left} .hero-count .bar i.run{animation:heroBar var(--hero-ms,6.5s) linear forwards} @keyframes heroBar{to{transform:scaleX(1)}} .scroll-hint{display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.85);font-family:var(--font-d);font-size:13.5px;font-weight:500;white-space:nowrap} .scroll-hint .mouse{ width:26px;height:42px;border:2px solid rgba(255,255,255,.7);border-radius:14px; display:flex;justify-content:center;padding-top:7px; } .scroll-hint .mouse i{width:3.5px;height:9px;border-radius:3px;background:var(--flame);animation:wheel 1.8s ease-in-out infinite} @keyframes wheel{0%,100%{transform:translateY(0);opacity:1}55%{transform:translateY(9px);opacity:.15}} /* شريط الثقة أسفل البطل */ .trust-rail{position:relative;z-index:2;background:rgba(4,26,40,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.14)} .trust-rail .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:14px 42px;padding-block:15px} .trust-item{display:inline-flex;align-items:center;gap:10px;font-size:13.5px;color:rgba(236,248,253,.88)} .trust-item svg{width:19px;height:19px;stroke:var(--flame);flex:0 0 auto} .trust-item b{color:#fff} /* ───────────────────────── 5 · من نحن ───────────────────────── */ .about-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(40px,6vw,84px);align-items:center} .about-fig{position:relative} .about-fig .ph{ border-radius:36% 64% 62% 38% / 42% 38% 62% 58%;overflow:hidden; box-shadow:var(--shadow-l);aspect-ratio:.94; animation:blobShift 14s ease-in-out infinite alternate; } @keyframes blobShift{ 0%{border-radius:36% 64% 62% 38% / 42% 38% 62% 58%} 100%{border-radius:58% 42% 40% 60% / 40% 56% 44% 60%} } .about-fig .ph img{width:100%;height:100%;object-fit:cover} .about-fig .shard{ /* شظية ذهبية خلف الصورة */ content:"";position:absolute;width:34%;aspect-ratio:1;border-radius:24px; transform:rotate(45deg);z-index:-1; } .about-fig .shard--a{background:linear-gradient(135deg,var(--flame),#FFD97A);top:-6%;inset-inline-end:-4%} .about-fig .shard--b{border:2.5px solid var(--sky);bottom:2%;inset-inline-start:-7%;width:26%} .about-fig .chip{ position:absolute;bottom:8%;inset-inline-end:-3%;background:var(--paper); border-radius:18px;box-shadow:var(--shadow-m);padding:14px 22px; display:flex;align-items:center;gap:14px;border:1px solid var(--line); } .about-fig .chip .gm{ width:42px;height:42px;border-radius:11px;transform:rotate(45deg); background:linear-gradient(135deg,var(--sky),var(--flame));display:grid;place-items:center; } .about-fig .chip .gm svg{width:20px;height:20px;transform:rotate(-45deg);stroke:#fff} .about-fig .chip b{display:block;font-family:var(--font-t);font-size:19px;color:var(--ink);line-height:1.3} .about-fig .chip span{font-size:12.5px;color:var(--slate)} .about-copy .lead{margin-bottom:26px} .about-points{display:grid;gap:14px;margin-bottom:34px} .about-points li{display:flex;gap:14px;align-items:flex-start;font-size:15.5px;color:var(--ink)} .about-points .tick{ width:26px;height:26px;flex:0 0 auto;border-radius:8px;transform:rotate(45deg);margin-top:4px; background:var(--sky-soft);border:1.5px solid var(--sky);display:grid;place-items:center; } .about-points .tick svg{width:13px;height:13px;transform:rotate(-45deg);stroke:var(--sky-ink)} .about-points b{font-weight:600} .about-points p{color:var(--slate);font-size:14px;line-height:1.8} /* عدادات */ .stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:clamp(46px,6vw,72px)} .stat-card{ background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m); padding:38px 24px 34px;text-align:center;position:relative;overflow:hidden; box-shadow:var(--shadow-s);transition:transform .3s ease,box-shadow .3s ease; } .stat-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-m)} .stat-card::before{ content:"";position:absolute;top:-26px;inset-inline-end:-26px;width:64px;height:64px; border-radius:16px;transform:rotate(45deg);background:var(--sky-soft); } .stat-card .ic{width:62px;height:62px;margin:6px auto 20px;border-radius:16px;transform:rotate(45deg); border:2.5px solid var(--sky);display:grid;place-items:center;background:var(--paper)} .stat-card .ic svg{width:28px;height:28px;transform:rotate(-45deg);stroke:var(--sky-ink)} .stat-card b{display:block;font-family:var(--font-t);font-size:clamp(36px,3.6vw,52px);font-weight:700;color:var(--ink);line-height:1.15;direction:ltr} .stat-card b em{font-style:normal;color:var(--flame-deep)} .stat-card>span{font-size:15.5px;color:var(--slate);font-family:var(--font-d);font-weight:500;line-height:1.7} /* ───────────────────────── 6 · وحدات الأعمال (خدمات) ───────────────────────── */ .units-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(28px,4vw,44px)} .units-head .kicker{margin-bottom:0} .units-ctrl{display:flex;align-items:center;gap:26px} .units-ctrl .arrows{display:flex;gap:10px} .units-track{ display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 48px)/3); gap:24px;overflow-x:auto;scroll-snap-type:x mandatory; padding:10px 4px 26px;margin-inline:-4px; scrollbar-width:none; } .units-track::-webkit-scrollbar{display:none} .unit-card{ scroll-snap-align:start;background:var(--paper); border:1.5px solid var(--line);border-radius:26px; padding:34px 30px 28px;position:relative;overflow:hidden; display:flex;flex-direction:column;gap:16px;min-height:320px; transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease; } .unit-card:hover{transform:translateY(-8px);border-color:var(--sky);box-shadow:var(--shadow-m)} .unit-card::after{ /* شفرة تظهر عند الحوم */ content:"";position:absolute;inset-block:-30%;inset-inline-end:-42%;width:56%; background:linear-gradient(115deg,transparent,rgba(0,182,230,.08) 45%,rgba(255,194,51,.10) 60%,transparent); transform:skewX(-14deg);opacity:0;transition:opacity .45s ease,transform .6s ease; } .unit-card:hover::after{opacity:1;transform:skewX(-14deg) translateX(-36%)} .unit-num{ position:absolute;top:22px;inset-inline-start:26px; font-family:var(--font-t);font-size:14px;font-weight:600;color:#AFCFDF; } html[data-theme="dark"] .unit-num{color:#2E5A73} .unit-gem{ width:64px;height:64px;border-radius:17px;transform:rotate(45deg);margin:10px auto 2px; border:2px solid var(--sky);background:linear-gradient(135deg,var(--sky-soft),rgba(255,194,51,.10)); display:grid;place-items:center;transition:background .35s,transform .35s; } .unit-card:hover .unit-gem{transform:rotate(45deg) scale(1.06);background:linear-gradient(135deg,var(--sky),#22C8F0)} .unit-gem svg{width:28px;height:28px;transform:rotate(-45deg);stroke:var(--sky-ink);transition:stroke .35s} .unit-card:hover .unit-gem svg{stroke:#fff} .unit-card h3{font-size:20px;font-weight:700;text-align:center} .unit-card>p{font-size:14.5px;color:var(--slate);text-align:center;line-height:1.95;flex:1} .unit-more{ margin:0 auto;display:inline-flex;align-items:center;gap:8px; font-family:var(--font-d);font-weight:600;font-size:13.5px;color:var(--sky-ink); } .unit-more svg{width:15px;height:15px;transition:transform .3s} .unit-card:hover .unit-more svg{transform:translateX(-4px)} html[dir="ltr"] .unit-card:hover .unit-more svg{transform:translateX(4px)} /* ───────────────────────── 7 · المنتجات ───────────────────────── */ .prod-feature{ display:grid;grid-template-columns:1.1fr 1fr;border-radius:var(--r-l);overflow:hidden; background:linear-gradient(135deg,#07293D,#0A3A55 62%,#0B4867);color:#fff; box-shadow:var(--shadow-l);position:relative;margin-bottom:26px; } .prod-feature .txt{padding:clamp(34px,4.5vw,64px);position:relative;z-index:1} .prod-feature .blade{ position:absolute;inset-block:-20%;inset-inline-start:44%;width:26%;pointer-events:none; background:linear-gradient(115deg,transparent,rgba(0,182,230,.35) 46%,rgba(255,194,51,.25) 58%,transparent); transform:skewX(-14deg);mix-blend-mode:screen; } .prod-feature .logo{height:44px;width:auto;margin-bottom:22px} .prod-feature h3{font-size:clamp(22px,2.6vw,30px);font-weight:800;margin-bottom:14px} .prod-feature p{color:rgba(236,248,253,.88);line-height:2;font-size:15.5px;max-width:52ch;margin-bottom:22px} .prod-badges{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px} .prod-badges span{ display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-family:var(--font-d); border:1px solid rgba(255,255,255,.3);border-radius:99px;padding:7px 15px;color:#DFF4FC; background:rgba(255,255,255,.07); } .prod-badges img{height:15px;width:auto;filter:brightness(0) invert(1)} .prod-feature .fig{position:relative;min-height:340px} .prod-feature .fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%} .prod-feature .fig::before{ content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(90deg,#0A3A55 0%,rgba(10,58,85,.1) 40%,transparent 70%); } html[dir="ltr"] .prod-feature .fig::before{background:linear-gradient(270deg,#0A3A55 0%,rgba(10,58,85,.1) 40%,transparent 70%)} .prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .prod-card{ border:1.5px solid var(--line);border-radius:26px;padding:32px 28px; background:var(--paper);position:relative;overflow:hidden; display:flex;flex-direction:column;gap:14px; transition:transform .35s ease,box-shadow .35s ease,border-color .35s; } .prod-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-m);border-color:var(--sky)} .prod-card .logo{height:34px;width:auto;align-self:flex-start} .prod-card .prod-gem{ width:52px;height:52px;border-radius:14px;transform:rotate(45deg);margin:4px 6px 6px; border:2px solid var(--sky);background:linear-gradient(135deg,var(--sky-soft),rgba(255,194,51,.10)); display:grid;place-items:center;align-self:flex-start; } .prod-card .prod-gem svg{width:24px;height:24px;transform:rotate(-45deg);stroke:var(--sky-ink)} .prod-card h3{font-size:19px} .prod-card p{font-size:14px;color:var(--slate);line-height:1.9;flex:1} .prod-card .soon{ position:absolute;top:20px;inset-inline-end:20px;font-size:11.5px;font-family:var(--font-d);font-weight:600; background:rgba(255,194,51,.15);color:var(--flame-deep);border:1px solid rgba(255,194,51,.4); padding:4px 12px;border-radius:99px; } .prod-card .go{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-d);font-weight:600;font-size:13.5px;color:var(--sky-ink)} .prod-card .go svg{width:15px;height:15px;transition:transform .3s} .prod-card:hover .go svg{transform:translateX(-4px)} html[dir="ltr"] .prod-card:hover .go svg{transform:translateX(4px)} /* ───────────────────────── 8 · حزام الأرقام الداكن ───────────────────────── */ .band{ background: radial-gradient(1100px 500px at 82% -10%,rgba(0,182,230,.22),transparent 60%), radial-gradient(800px 420px at 12% 110%,rgba(255,194,51,.14),transparent 55%), linear-gradient(150deg,#051E2E,#07293D 55%,#083049); color:#fff;position:relative;overflow:hidden; } .band .blade{ position:absolute;inset-block:-16%;inset-inline-start:58%;width:26%;pointer-events:none; background:linear-gradient(115deg,transparent,rgba(0,182,230,.30) 46%,rgba(255,194,51,.22) 58%,transparent); transform:skewX(-14deg);mix-blend-mode:screen; } .band .kicker hgroup .up{color:#6FDCF9} .band .kicker h2{color:#fff} .band .kicker .gem::after{background:transparent;border-color:#6FDCF9} .band .kicker .note{color:rgba(236,248,253,.75)} .band-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .band-cell{ border:1px solid rgba(255,255,255,.16);border-radius:26px;padding:clamp(34px,3.4vw,50px) 26px; background:rgba(255,255,255,.06);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);position:relative;overflow:hidden; transition:transform .3s ease,background .3s ease,border-color .3s ease;text-align:center; display:flex;flex-direction:column;align-items:center;gap:12px; } .band-cell::before{ /* معيّن توقيع صغير في زاوية الخلية */ content:"";position:absolute;top:18px;inset-inline-start:20px;width:11px;height:11px; border-radius:3px;transform:rotate(45deg); background:linear-gradient(135deg,var(--sky),var(--flame));opacity:.9; } .band-cell:hover{transform:translateY(-6px);background:rgba(255,255,255,.1);border-color:rgba(0,182,230,.55)} .band-cell b{display:block;font-family:var(--font-t);font-size:clamp(44px,5vw,68px);font-weight:700;line-height:1.1;color:#fff;direction:ltr;letter-spacing:-.01em} .band-cell b em{font-style:normal;color:var(--flame)} .band-cell>span{font-size:clamp(15px,1.5vw,17px);font-weight:500;color:rgba(236,248,253,.92);font-family:var(--font-d);line-height:1.7;max-width:24ch} /* ───────────────────────── 8.5 · شغل نفتخر به — مربعات كبيرة ───────────────────────── */ .pride-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px} .pride-card{ position:relative;overflow:hidden; border:1.5px solid var(--line);border-radius:30px;background:var(--paper); padding:clamp(36px,3.8vw,56px); display:flex;flex-direction:column;gap:18px;box-shadow:var(--shadow-s); transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease; } .pride-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-m);border-color:var(--sky)} .pride-card::after{ /* شفرة ضوء تعبر عند الحوم */ content:"";position:absolute;inset-block:-30%;inset-inline-end:-46%;width:58%; background:linear-gradient(115deg,transparent,rgba(0,182,230,.09) 45%,rgba(255,194,51,.11) 60%,transparent); transform:skewX(-14deg);opacity:0;transition:opacity .45s ease,transform .65s ease;pointer-events:none; } .pride-card:hover::after{opacity:1;transform:skewX(-14deg) translateX(-40%)} .pride-num{ position:absolute;top:26px;inset-inline-end:30px; font-family:var(--font-t);font-size:15px;font-weight:600;color:#AFCFDF; } .pride-gem{ width:86px;height:86px;border-radius:22px;transform:rotate(45deg);margin:8px 10px 18px; border:2.5px solid var(--sky); background:linear-gradient(135deg,var(--sky-soft),rgba(255,194,51,.12)); display:grid;place-items:center;flex:0 0 auto; transition:background .35s ease,transform .35s ease; } .pride-card:hover .pride-gem{transform:rotate(45deg) scale(1.06);background:linear-gradient(135deg,var(--sky),#22C8F0)} .pride-gem svg{width:38px;height:38px;transform:rotate(-45deg);stroke:var(--sky-ink);transition:stroke .35s} .pride-card:hover .pride-gem svg{stroke:#fff} .pride-card h3{font-size:clamp(20px,2.3vw,27px);font-weight:800} .pride-card>p{color:var(--slate);font-size:15.5px;line-height:2.05;flex:1;max-width:52ch} .pride-list{display:grid;gap:10px;margin-top:2px} .pride-list li{display:flex;align-items:center;gap:11px;font-family:var(--font-d);font-weight:600;font-size:14.5px;color:var(--ink)} .pride-list li::before{ content:"";width:9px;height:9px;border-radius:2.5px;transform:rotate(45deg);flex:0 0 auto; background:linear-gradient(135deg,var(--sky),var(--flame)); } /* ───────────────────────── 9 · آلية العمل ───────────────────────── */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;position:relative} .steps::before{ /* خيط يصل الخطوات */ content:"";position:absolute;top:33px;inset-inline:8%;height:2px; background:repeating-linear-gradient(270deg,var(--sky) 0 10px,transparent 10px 20px); opacity:.45; } .step{position:relative;text-align:center;padding-top:0} .step .gm{ width:66px;height:66px;margin:0 auto 20px;position:relative;z-index:1; border-radius:17px;transform:rotate(45deg); background:var(--paper);border:2.5px solid var(--sky); display:grid;place-items:center;box-shadow:var(--shadow-s); transition:background .35s,transform .35s; } .step:hover .gm{background:var(--sky);transform:rotate(45deg) scale(1.07)} .step .gm b{transform:rotate(-45deg);font-family:var(--font-t);font-size:21px;color:var(--sky-ink);transition:color .35s} .step:hover .gm b{color:#fff} .step h3{font-size:17.5px;margin-bottom:8px} .step p{font-size:13.5px;color:var(--slate);line-height:1.9;max-width:26ch;margin-inline:auto} .step .tag{ display:inline-block;margin-top:10px;font-family:var(--font-t);font-size:11.5px; color:var(--flame-deep);background:rgba(255,194,51,.12);border-radius:99px;padding:3px 12px; } /* ───────────────────────── 10 · الامتثال + الشهادات ───────────────────────── */ .comply{display:grid;grid-template-columns:1fr auto;gap:clamp(28px,5vw,64px);align-items:center; border:1.5px solid var(--line);border-radius:var(--r-l);padding:clamp(28px,4vw,48px); background:linear-gradient(135deg,var(--paper),var(--mist));box-shadow:var(--shadow-s)} .comply h3{font-size:clamp(19px,2.2vw,25px);margin-bottom:10px} .comply p{color:var(--slate);font-size:15px;max-width:58ch} .comply-logos{display:flex;align-items:stretch;gap:clamp(14px,1.8vw,20px);flex-wrap:wrap} .comply-logos .cl{ /* بلاطة تؤطر الشعار بدل أن يطفو في الفراغ */ display:grid;justify-items:center;align-content:center;gap:11px;min-width:158px; background:var(--paper);border:1.5px solid var(--line);border-radius:20px; padding:24px 26px 18px;box-shadow:var(--shadow-s);position:relative; transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease; } /* الختم الثاني: السجل التجاري الموثق — يوازن البلاطة ويظل ادعاء صادقا */ .comply-logos .seal{ width:clamp(42px,4.4vw,50px);height:clamp(42px,4.4vw,50px);border-radius:13px;transform:rotate(45deg); border:2px solid var(--flame);background:rgba(255,194,51,.10);color:var(--flame-deep); display:grid;place-items:center; } .comply-logos .seal svg{width:21px;height:21px;transform:rotate(-45deg)} .comply-logos .cl--seal:hover small{color:var(--sky-ink)} .comply-logos .cl::before{ content:"";position:absolute;top:12px;inset-inline-start:14px;width:8px;height:8px; border-radius:2px;transform:rotate(45deg); background:linear-gradient(135deg,var(--sky),var(--flame));opacity:.75; } .comply-logos .cl:hover{transform:translateY(-4px);box-shadow:var(--shadow-m);border-color:var(--sky)} .comply-logos img{height:clamp(36px,4.2vw,50px);width:auto;opacity:.92;transition:opacity .3s} .comply-logos .cl:hover img{opacity:1} .comply-logos small{font-family:var(--font-d);font-weight:600;font-size:12.5px;color:var(--slate)} /* شهادات العملاء */ .quotes-zone{position:relative} .quotes-track{ display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 48px)/3);gap:24px; overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 4px 26px;margin-inline:-4px; scrollbar-width:none; } .quotes-track::-webkit-scrollbar{display:none} .quote-card{ scroll-snap-align:start;background:var(--paper);border:1.5px solid var(--line); border-radius:26px;padding:34px 30px;position:relative; display:flex;flex-direction:column;gap:18px; transition:transform .35s ease,box-shadow .35s,border-color .35s; } .quote-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-m);border-color:var(--sky)} .quote-card .qm{ width:44px;height:44px;border-radius:12px;transform:rotate(45deg); background:linear-gradient(135deg,var(--sky),var(--flame));display:grid;place-items:center; position:absolute;top:-20px;inset-inline-start:30px;box-shadow:0 8px 18px rgba(0,182,230,.3); } .quote-card .qm svg{width:20px;height:20px;transform:rotate(-45deg);fill:#fff} .quote-card blockquote{font-size:15px;line-height:2;color:var(--ink);flex:1;padding-top:8px} .quote-card footer{display:flex;align-items:center;gap:13px} .quote-card footer .av{ width:46px;height:46px;border-radius:13px;transform:rotate(45deg);overflow:hidden; border:2px solid var(--sky);display:grid;place-items:center;background:var(--sky-soft); font-family:var(--font-d);font-weight:700;color:var(--sky-ink); } .quote-card footer .av i{transform:rotate(-45deg);font-style:normal} .quote-card footer b{display:block;font-family:var(--font-d);font-size:14.5px} .quote-card footer span{font-size:12.5px;color:var(--slate)} .quote-card .stars{color:var(--flame);letter-spacing:3px;font-size:13px} /* شريط القطاعات المتحرك (main.js يضاعف المحتوى تلقائيا) */ .sectors-strip{ margin-top:34px;overflow:hidden;position:relative; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); } .marquee-track{ display:inline-flex;align-items:center;gap:34px;white-space:nowrap; animation:marquee 36s linear infinite;padding-block:8px;will-change:transform; } .sectors-strip:hover .marquee-track{animation-play-state:paused} @keyframes marquee{to{transform:translateX(50%)}} @keyframes marqueeL{to{transform:translateX(-50%)}} html[dir="ltr"] .marquee-track{animation-name:marqueeL} .marquee-track .sx{ font-family:var(--font-d);font-weight:600;font-size:clamp(16px,2vw,21px); color:var(--slate);transition:color .3s; } .marquee-track .sx:hover{color:var(--sky-ink)} .marquee-track .dot{ width:9px;height:9px;border-radius:2.5px;transform:rotate(45deg); background:linear-gradient(135deg,var(--sky),var(--flame));flex:0 0 auto; } /* ───────────────────────── 11 · المدونة ───────────────────────── */ .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .bcard{ background:var(--paper);border:1.5px solid var(--line);border-radius:26px;overflow:hidden; transition:transform .35s ease,box-shadow .35s,border-color .35s;position:relative; } .bcard:hover{transform:translateY(-8px);box-shadow:var(--shadow-m);border-color:var(--sky)} .bcard .bbody{padding:28px 26px;display:flex;flex-direction:column;gap:12px} .bcard .badge{ align-self:flex-start;font-size:11.5px;font-family:var(--font-d);font-weight:600; color:var(--sky-ink);background:var(--sky-soft);border-radius:99px;padding:5px 14px; } .bcard h3{font-size:17.5px;line-height:1.7} .bcard h3 a{transition:color .3s} .bcard h3 a:hover{color:var(--sky-ink)} .bcard p{font-size:13.5px;color:var(--slate);line-height:1.9} .bcard .bmeta{display:flex;gap:8px;font-size:12px;color:var(--slate);font-family:var(--font-d)} /* ───────────────────────── 12 · الختام CTA ───────────────────────── */ .close-cta{position:relative;overflow:hidden;text-align:center; background: radial-gradient(900px 480px at 50% 120%,rgba(0,182,230,.14),transparent 60%), var(--mist); } .close-cta .blade{ position:absolute;inset-block:-20%;inset-inline-start:64%;width:24%;pointer-events:none; background:linear-gradient(115deg,transparent,rgba(0,182,230,.14) 46%,rgba(255,194,51,.16) 58%,transparent); transform:skewX(-14deg); } .close-cta{padding-block:clamp(64px,8vw,108px) clamp(72px,9vw,128px)} /* يضبط الفراغ إذا اختفت المدونة والتقى قسمان بخلفية mist */ .close-cta h2{font-size:clamp(28px,4vw,48px);font-weight:800;max-width:22ch;margin:0 auto 18px;text-wrap:balance} .close-cta h2 .hl{color:var(--sky-ink);position:relative} .close-cta h2 .hl::after{ content:"";position:absolute;inset-inline:0;bottom:4px;height:10px;border-radius:5px;z-index:-1; background:linear-gradient(270deg,rgba(0,182,230,.25),rgba(255,194,51,.45)); } .close-cta .lead{max-width:60ch;margin:0 auto 36px} .close-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin-bottom:18px} .close-actions .btn{padding:16px 34px;font-size:16px} .close-fine{font-size:13.5px;color:var(--slate)} .close-fine a{color:var(--sky-ink);font-weight:600;border-bottom:1.5px dashed var(--sky)} /* ───────────────────────── 13 · Footer ───────────────────────── */ .site-footer{ background:linear-gradient(165deg,#051E2E,#07293D 70%,#062334);color:#CFE7F2; position:relative;overflow:hidden;font-size:14px; } .site-footer::before{ /* خيط الضوء يقفل الصفحة */ content:"";position:absolute;inset-inline:0;top:0;height:3px; background:linear-gradient(270deg,var(--sky),var(--flame)); } .foot-grid{ display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(30px,4vw,56px); padding-block:clamp(52px,6vw,80px) 40px; } .foot-brand .brand{margin-bottom:18px} .foot-brand .brand .txt b{color:#fff} .foot-brand .brand .txt small{color:#8FB6C9} .foot-brand p{line-height:2;color:#A9CBDC;max-width:34ch} .socials{display:flex;gap:10px;margin-top:22px} .socials a{ width:42px;height:42px;border-radius:12px;transform:rotate(45deg); border:1.5px solid rgba(255,255,255,.25);display:grid;place-items:center; transition:background .3s,border-color .3s,transform .3s; } .socials a svg{width:17px;height:17px;transform:rotate(-45deg);fill:#CFE7F2} .socials a svg[fill="none"]{fill:none} .socials a:hover{background:var(--sky);border-color:var(--sky);transform:rotate(45deg) translate(-2px,-2px)} .foot-col h5,.foot-col h2{ font-family:var(--font-d);color:#fff;font-size:15.5px;margin-bottom:18px; display:flex;align-items:center;gap:9px; } .foot-col h5::before,.foot-col h2::before{content:"";width:8px;height:8px;border-radius:2px;transform:rotate(45deg);background:var(--flame)} .foot-col ul{display:grid;gap:10px} .foot-col a{color:#A9CBDC;transition:color .3s,padding .3s} .foot-col a:hover{color:#fff;padding-inline-start:6px} /* شريط السجل التجاري — عقد ثابت مع site-data.js */ .footer-legal{ display:flex;align-items:center;gap:22px;flex-wrap:wrap; border:1px solid rgba(255,255,255,.16);border-radius:20px; background:rgba(255,255,255,.05);padding:20px 26px;margin-bottom:34px; } .footer-legal .cr-shield{ width:58px;height:58px;flex:0 0 auto;border-radius:16px;transform:rotate(45deg); border:2px solid var(--flame);background:rgba(255,194,51,.08); display:grid;place-items:center;color:var(--flame); } .footer-legal .cr-shield svg{width:26px;height:26px;transform:rotate(-45deg)} .footer-legal .cr-no a{transition:opacity .3s} .footer-legal .cr-no a:hover{opacity:.8} .footer-legal .cr-txt{flex:1;min-width:220px} .footer-legal .cr-txt b{display:block;color:#fff;font-family:var(--font-d);font-size:15.5px;margin-bottom:4px} .footer-legal .cr-txt span{font-size:13px;color:#A9CBDC} .footer-legal .cr-no{text-align:center} .footer-legal .cr-no span{display:block;font-size:12px;color:#A9CBDC;margin-bottom:2px} .footer-legal .cr-no b{font-size:19px;color:var(--flame)} .foot-bar{ display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.12);padding-block:22px 26px;font-size:13px;color:#8FB6C9; } .foot-bar .links{display:flex;gap:22px} .foot-bar a{color:#A9CBDC} .foot-bar a:hover{color:#fff} /* ───────────────────────── 13.5 · عدة الصفحات الداخلية ───────────────────────── */ /* بطل داخلي كحلي مع شفرة ضوء وفتات خبز */ .page-hero{ position:relative;overflow:hidden;color:#fff; background: radial-gradient(900px 420px at 80% -20%,rgba(0,182,230,.25),transparent 60%), radial-gradient(700px 380px at 10% 130%,rgba(255,194,51,.12),transparent 55%), linear-gradient(150deg,#051E2E,#07293D 55%,#0B4867); padding:calc(var(--header-h) + clamp(52px,7vw,88px)) 0 clamp(46px,6vw,76px); } .page-hero .blade{ position:absolute;inset-block:-18%;inset-inline-start:60%;width:26%;pointer-events:none; background:linear-gradient(115deg,transparent,rgba(0,182,230,.30) 46%,rgba(255,194,51,.22) 58%,transparent); transform:skewX(-14deg);mix-blend-mode:screen; } .crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:18px;font-family:var(--font-d);font-size:13px;color:rgba(236,248,253,.72)} .crumbs a{transition:color .3s} .crumbs a:hover{color:#fff} .crumbs i{width:6px;height:6px;border-radius:2px;transform:rotate(45deg);background:var(--flame);flex:0 0 auto} .crumbs [aria-current]{color:#6FDCF9;font-weight:600} /* The AR↔EN link on the MedMax pages. Sits at the end of the breadcrumb rail so it reads as navigation, not as body copy, and so the page stops being an orphan that only hreflang knows about. */ .crumbs .crumb-lang{ margin-inline-start:auto;display:inline-flex;align-items:center;gap:7px; padding:5px 12px;border-radius:999px;font-weight:600; border:1px solid rgba(111,220,249,.4);color:#6FDCF9; background:rgba(0,182,230,.10);transition:background .3s,border-color .3s,color .3s } .crumbs .crumb-lang::before{content:"";width:7px;height:7px;border-radius:2px;transform:rotate(45deg);background:var(--flame)} .crumbs .crumb-lang:hover{background:rgba(0,182,230,.24);border-color:#6FDCF9;color:#fff} .page-hero h1{font-size:clamp(30px,4.6vw,52px);font-weight:800;line-height:1.4;max-width:22ch;margin-bottom:14px;text-wrap:balance} .page-hero h1 .hl{color:#5FD9F8} .page-hero .lead{color:rgba(236,248,253,.88);max-width:62ch} .page-hero .hero-eyebrow{margin-bottom:20px} /* نموذج — حقول موحدة */ .form-card{ background:var(--paper);border:1.5px solid var(--line);border-radius:30px; padding:clamp(28px,3.5vw,46px);box-shadow:var(--shadow-m);position:relative;overflow:hidden; } .form-card::before{ content:"";position:absolute;inset-inline:0;top:0;height:4px; background:linear-gradient(270deg,var(--sky),var(--flame)); } .f-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px} .f-group{display:flex;flex-direction:column;gap:8px} .f-group.full{grid-column:1/-1} .f-group label{font-family:var(--font-d);font-weight:600;font-size:13.5px;color:var(--ink)} .f-group label small{color:var(--slate);font-weight:400} .input,.select,.textarea{ width:100%;font:inherit;font-size:15px;color:var(--ink); background:var(--mist);border:1.5px solid var(--line);border-radius:14px; padding:13px 16px;transition:border-color .3s,background .3s,box-shadow .3s; } .textarea{min-height:140px;resize:vertical} .input:focus,.select:focus,.textarea:focus{ outline:none;border-color:var(--sky);background:var(--paper); box-shadow:0 0 0 4px rgba(0,182,230,.12); } .input::placeholder,.textarea::placeholder{color:#9DB6C4} .form-note{display:flex;align-items:center;gap:8px;justify-content:center;font-size:12.5px;color:var(--slate);margin-top:14px} .form-success{text-align:center;padding:40px 16px 28px} .form-success .fs-gem{ width:74px;height:74px;margin:0 auto 22px;border-radius:19px;transform:rotate(45deg); background:linear-gradient(135deg,var(--sky),var(--flame));display:grid;place-items:center; box-shadow:0 14px 34px rgba(0,182,230,.35); } .form-success .fs-gem svg{width:34px;height:34px;transform:rotate(-45deg);stroke:#fff} .form-success h3{font-size:22px;margin-bottom:8px} .form-success p{color:var(--slate);font-size:15px;margin-bottom:22px} /* بطاقة معلومات جانبية */ .side-card{ background:var(--paper);border:1.5px solid var(--line);border-radius:26px; padding:28px 26px;box-shadow:var(--shadow-s);display:flex;flex-direction:column;gap:16px; } .side-card h3,.side-card h2{font-size:18px;display:flex;align-items:center;gap:10px} .side-card h3::before,.side-card h2::before{content:"";width:9px;height:9px;border-radius:2.5px;transform:rotate(45deg);background:linear-gradient(135deg,var(--sky),var(--flame))} .side-row{display:flex;align-items:center;gap:14px} .side-row .gm{ width:44px;height:44px;flex:0 0 auto;border-radius:12px;transform:rotate(45deg); border:2px solid var(--sky);background:var(--sky-soft);display:grid;place-items:center; } .side-row .gm svg{width:19px;height:19px;transform:rotate(-45deg);stroke:var(--sky-ink)} .side-row b{display:block;font-family:var(--font-d);font-size:14.5px;color:var(--ink)} .side-row a,.side-row span.v{font-size:13.5px;color:var(--slate);transition:color .3s} .side-row a:hover{color:var(--sky-ink)} /* نص تحريري (سياسات ومحتوى طويل) */ .prose{max-width:820px;margin-inline:auto} .prose h2{font-size:clamp(21px,2.4vw,28px);font-weight:800;margin:44px 0 14px;display:flex;align-items:center;gap:12px} .prose h2::before{content:"";width:11px;height:11px;border-radius:3px;transform:rotate(45deg);flex:0 0 auto;background:linear-gradient(135deg,var(--sky),var(--flame))} .prose h3{font-size:18.5px;margin:28px 0 10px} .prose p{color:var(--slate);line-height:2.1;margin-bottom:14px;font-size:15.5px} .prose ul{display:grid;gap:10px;margin:14px 0 20px} .prose ul li{display:flex;gap:11px;color:var(--slate);font-size:15px;line-height:1.9} .prose ul li::before{content:"";width:8px;height:8px;border-radius:2px;transform:rotate(45deg);background:var(--sky);flex:0 0 auto;margin-top:11px} .prose a{color:var(--sky-ink);font-weight:600;border-bottom:1.5px dashed var(--sky)} .prose strong{color:var(--ink)} /* أكورديون (يشغله main.js عبر .accordion-head/.open) */ .accordion{display:grid;gap:14px;max-width:860px;margin-inline:auto} .accordion-item{ background:var(--paper);border:1.5px solid var(--line);border-radius:20px;overflow:hidden; transition:border-color .3s,box-shadow .3s; } .accordion-item.open{border-color:var(--sky);box-shadow:var(--shadow-s)} .accordion-head{ width:100%;display:flex;align-items:center;gap:14px;text-align:start; padding:20px 24px;font-family:var(--font-d);font-weight:700;font-size:16px;color:var(--ink); } .accordion-head .ax{ margin-inline-start:auto;width:30px;height:30px;flex:0 0 auto;border-radius:9px;transform:rotate(45deg); border:2px solid var(--sky);display:grid;place-items:center;transition:background .3s,transform .3s; } .accordion-head .ax svg{width:14px;height:14px;transform:rotate(-45deg);stroke:var(--sky-ink);transition:transform .3s,stroke .3s} .accordion-item.open .ax{background:var(--sky)} .accordion-item.open .ax svg{stroke:#fff;transform:rotate(135deg)} .accordion-body{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.22,.9,.3,1)} .accordion-item.open .accordion-body{max-height:400px} .accordion-body p{padding:0 24px 22px;color:var(--slate);font-size:14.5px;line-height:2} /* شبكات مساعدة */ .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:26px} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .chip-row{display:flex;flex-wrap:wrap;gap:10px} .chip{ display:inline-flex;align-items:center;gap:8px;font-family:var(--font-d);font-weight:600;font-size:13px; color:var(--sky-ink);background:var(--sky-soft);border:1px solid rgba(0,182,230,.25); border-radius:99px;padding:7px 16px; } .chip::before{content:"";width:7px;height:7px;border-radius:2px;transform:rotate(45deg);background:var(--flame)} /* ───────────────────────── 13.7 · حاويات الرسوم التوضيحية القديمة ───────────────────────── .ph--ill / .fig--ill: تحييد قصّ/نسب حاويات الصور عندما تحمل مشهد .ill بدل صورة */ .ph--ill, .about-fig .ph--ill, .svc-fig .ph--ill{ aspect-ratio:auto;overflow:visible;border-radius:0;box-shadow:none;background:none;animation:none; } .ph--ill::before,.ph--ill::after{display:none} .fig--ill{position:relative;min-height:0;padding:clamp(20px,3vw,38px);display:flex;align-items:center} .fig--ill::before{display:none!important} .fig--ill .ill{width:100%} /* ───────────────────────── 13.8 · بانر الكوكيز (consent.js) ───────────────────────── consent.js يحقن الماركب بلا أي تنسيق خاص به — التنسيق مسؤولية ملف التصميم الحالي. */ .ck{ position:fixed;z-index:99999;inset-inline:0;bottom:0; display:flex;justify-content:center;padding:0 16px 16px; opacity:0;transform:translateY(14px); transition:opacity .35s cubic-bezier(.22,.9,.3,1),transform .35s cubic-bezier(.22,.9,.3,1); pointer-events:none; } .ck.is-open{opacity:1;transform:none} .ck-card{ pointer-events:auto;width:min(880px,100%); display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px; padding:20px 24px;background:var(--paper);border:1.5px solid var(--line); border-radius:22px;box-shadow:0 -10px 46px -14px rgba(4,52,74,.3); } .ck-ic{ width:46px;height:46px;flex:none;display:grid;place-items:center; border-radius:13px;transform:rotate(45deg);color:var(--sky-ink); background:linear-gradient(135deg,rgba(0,182,230,.15),rgba(255,194,51,.12)); border:1.5px solid var(--sky); } .ck-ic svg{width:22px;height:22px;transform:rotate(-45deg)} .ck-body h2{font-size:17px;margin:0 0 5px;font-family:var(--font-d)} .ck-body p{font-size:13.5px;line-height:1.8;color:var(--slate);margin:0} .ck-link{color:var(--sky-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px} .ck-link:hover{color:#006C95} .ck-link-b{display:inline-block;margin-top:14px;font-size:13px} .ck-acts{display:flex;align-items:center;gap:9px;flex:none;flex-wrap:wrap} .ck-btn{ font-family:var(--font-d);font-weight:600;font-size:13.5px; padding:11px 18px;min-height:44px;white-space:nowrap; border:1.5px solid transparent;border-radius:999px;cursor:pointer; transition:transform .3s ease,background-color .2s,color .2s,border-color .2s; } .ck-btn:hover{transform:translateY(-2px)} .ck-btn-yes{background:var(--sky-ink);color:#fff} .ck-btn-yes:hover{background:var(--sky)} .ck-btn-no{background:var(--paper);color:var(--ink);border-color:var(--line)} .ck-btn-no:hover{border-color:var(--sky);color:var(--sky-ink)} .ck-btn-ghost{background:transparent;color:var(--slate);padding-inline:10px} .ck-btn-ghost:hover{color:var(--sky-ink)} .ck-card:has(.ck-rows){grid-template-columns:1fr} .ck-rows{display:flex;flex-direction:column;gap:12px;margin:4px 0 2px} .ck-row{ display:flex;align-items:flex-start;justify-content:space-between;gap:16px; padding:14px 16px;background:var(--mist);border:1px solid var(--line);border-radius:14px; } .ck-row-txt b{display:block;font-family:var(--font-d);font-size:14.5px;margin-bottom:4px} .ck-row-txt span{display:block;font-size:12.5px;line-height:1.75;color:var(--slate)} .ck-lock{ flex:none;font-family:var(--font-t);font-size:11.5px;font-weight:600; color:#1B7F46;background:rgba(46,204,113,.12);border:1px solid rgba(46,204,113,.32); padding:6px 12px;border-radius:999px; } .ck-sw{ flex:none;position:relative;width:52px;height:30px;cursor:pointer;border-radius:999px; background:var(--line);border:1px solid var(--line); transition:background-color .25s ease,border-color .25s; } .ck-sw::after{ content:'';position:absolute;top:3px;inset-inline-start:3px;width:22px;height:22px; border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(4,52,74,.3); transition:transform .25s ease; } .ck-sw.on{background:var(--sky-ink);border-color:var(--sky-ink)} .ck-sw.on::after{transform:translateX(22px)} html[dir="rtl"] .ck-sw.on::after{transform:translateX(-22px)} @media (max-width:860px){ .ck{padding:0 10px 10px} .ck-card{grid-template-columns:1fr;gap:14px;padding:18px;text-align:start} .ck-ic{display:none} .ck-acts{width:100%} .ck-btn{flex:1 1 auto;text-align:center} } @media (max-width:430px){ .ck-btn{width:100%;flex:1 1 100%} .ck-row{flex-direction:column;align-items:stretch} } /* ───────────────────────── 14 · عناصر عائمة ───────────────────────── */ .fab{ position:fixed;z-index:900;width:54px;height:54px;border-radius:16px; display:grid;place-items:center;box-shadow:var(--shadow-m); transition:transform .3s ease,opacity .3s ease,visibility .3s; } .fab.wa{background:#25D366;color:#fff;bottom:26px;inset-inline-start:26px} .fab.wa svg{width:26px;height:26px} .fab.wa:hover{transform:translateY(-4px) scale(1.05)} .fab.top{ bottom:26px;inset-inline-end:26px;background:var(--paper);border:2px solid var(--sky); border-radius:15px;transform:rotate(45deg) scale(0);opacity:0;visibility:hidden; } .fab.top svg{width:20px;height:20px;stroke:var(--sky-ink);transform:rotate(-45deg)} .fab.top.show{transform:rotate(45deg) scale(1);opacity:1;visibility:visible} .fab.top:hover{background:var(--sky)} .fab.top:hover svg{stroke:#fff} /* ───────────────────────── 15 · Responsive ───────────────────────── */ @media (max-width:1080px){ .main-nav{display:none} .menu-toggle{display:block} .nav-cta .btn--sky{display:none} .units-track{grid-auto-columns:calc((100% - 24px)/2)} .quotes-track{grid-auto-columns:calc((100% - 24px)/2)} .about-grid{grid-template-columns:1fr;gap:56px} .about-fig{max-width:520px;margin-inline:auto} .prod-feature{grid-template-columns:1fr} .prod-feature .fig{min-height:260px;order:-1} .prod-feature .fig::before{background:linear-gradient(to top,#0A3A55 4%,rgba(10,58,85,.05) 55%)!important} .prod-grid{grid-template-columns:1fr 1fr} .stats-row{grid-template-columns:1fr 1fr} .band-grid{grid-template-columns:1fr 1fr} .pride-grid{grid-template-columns:1fr} .grid-2{grid-template-columns:1fr} .grid-3{grid-template-columns:1fr 1fr} .steps{grid-template-columns:1fr 1fr;gap:40px 22px} .steps::before{display:none} .comply{grid-template-columns:1fr} .blog-grid{grid-template-columns:1fr 1fr} .foot-grid{grid-template-columns:1fr 1fr} } @media (max-width:640px){ body{font-size:15.5px} .hero-thumbs{display:none} .hero-deck-row{flex-direction:column;align-items:flex-start;gap:20px} .hero-side{width:100%;justify-content:space-between} .hero-cta .btn{width:100%;justify-content:center} .hero-eyebrow{padding:7px 14px;margin-bottom:20px} .hero-deck{padding-bottom:24px} .hero-side{gap:14px} .hero-count{gap:10px} .hero-count .n{font-size:15px} .hero-count .n.on{font-size:19px} .hero-count .bar{width:38px} .scroll-hint{gap:8px;font-size:12.5px} .scroll-hint .mouse{width:22px;height:36px;border-radius:12px;padding-top:6px} .trust-rail .wrap{gap:7px 22px;padding-block:12px} .trust-item{font-size:12.5px} .about-fig .shard--a{top:-4%;inset-inline-end:-1%} .about-fig .shard--b{inset-inline-start:-3%} .units-track{grid-auto-columns:88%} .quotes-track{grid-auto-columns:88%} .units-head{flex-direction:column;align-items:flex-start} /* The page numbers grew a 44px tap-target minimum on phones, so six of them plus their gaps measured 486px inside a 354px column. The row overflowed to the left (RTL) and pushed BOTH arrows completely off-screen — they were unreachable on every phone. Give the control row the full width, let the numbers scroll inside it, and the arrows stay where a thumb can reach them. The 44px targets are kept; only the row is allowed to move. */ .units-ctrl{width:100%;justify-content:space-between;gap:14px;min-width:0} .units-ctrl .arrows{flex:0 0 auto} .cnums{flex:1 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden; gap:10px;scrollbar-width:none;-ms-overflow-style:none; scroll-snap-type:x proximity;overscroll-behavior-x:contain} .cnums::-webkit-scrollbar{display:none} .cnums .n{flex:0 0 auto;scroll-snap-align:center} .stats-row{grid-template-columns:1fr 1fr;gap:12px} .stat-card{padding:22px 14px} .prod-grid{grid-template-columns:1fr} .band-grid{grid-template-columns:1fr 1fr;gap:12px} .band-cell{padding:22px 14px} .steps{grid-template-columns:1fr;gap:36px} .step p{max-width:40ch} .f-grid{grid-template-columns:1fr} .grid-3{grid-template-columns:1fr} .blog-grid{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr;gap:34px} .footer-legal{flex-direction:column;text-align:center} .footer-legal .cr-txt{min-width:0} .fab{width:48px;height:48px} .kicker .gem{width:38px;height:38px} .kicker .gem i{inset:11px} } /* ═══════════════════════════════════════════════════════════════════════ 17 · طبقة الهواتف — تجاوب على كل المقاسات وتوافق كروم/سفاري/بريف/سامسونج مكتوبة بعد كل شيء عمدا لتفوز في التتالي بلا !important ═══════════════════════════════════════════════════════════════════════ */ /* 17.1 · أساسيات اللمس */ html{ -webkit-text-size-adjust:100%;text-size-adjust:100%; /* سفاري يكبّر النص أفقيا بلا هذا */ -webkit-tap-highlight-color:rgba(0,182,230,.18); /* وميض لمس بلون العلامة بدل الرمادي */ } body{overscroll-behavior-y:none} /* يمنع سحب الصفحة المطاطي خلف الهيدر */ a,button,[role="button"],input,select,textarea{touch-action:manipulation} /* يلغي تأخير 300ms */ /* لا تُلصق حالات الحوم على شاشات اللمس: تُطبق فقط حيث يوجد مؤشر حقيقي */ @media (hover:none){ .btn:hover,.dbtn:hover,.unit-card:hover,.pride-card:hover,.prod-card:hover, .stat-card:hover,.band-cell:hover,.quote-card:hover,.bcard:hover,.socials a:hover, .comply-logos .cl:hover,.hero-thumb:hover,.fab:hover{transform:none} } /* كاروسيلات بسحب سلس على iOS */ .units-track,.quotes-track{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain} /* كلمات طويلة (روابط/بريد) لا تكسر التخطيط على الشاشات الضيقة */ h1,h2,h3,p,li,td,.lead,.hero-title{overflow-wrap:break-word;word-wrap:break-word} /* 17.2 · مساحات الأمان (نوتش iPhone وشريط الإيماءات) */ .fab.wa{bottom:calc(26px + env(safe-area-inset-bottom));inset-inline-start:calc(26px + env(safe-area-inset-left))} .fab.top{bottom:calc(26px + env(safe-area-inset-bottom));inset-inline-end:calc(26px + env(safe-area-inset-right))} .ck{padding-bottom:calc(16px + env(safe-area-inset-bottom))} .mobile-menu{padding-bottom:calc(40px + env(safe-area-inset-bottom))} .header-inner{ padding-inline-start:max(clamp(20px,4vw,40px),env(safe-area-inset-left)); padding-inline-end:max(clamp(20px,4vw,40px),env(safe-area-inset-right)); } .trust-rail .wrap{padding-bottom:max(15px,env(safe-area-inset-bottom))} /* 17.3 · أهداف لمس لا تقل عن ٤٤ بكسل (توصية آبل وجوجل) */ @media (hover:none),(max-width:820px){ .cnums .n,.hero-count .n{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center} .cnums .n::after{inset-inline:8px} .unit-more,.prod-card .go,.svc-more,.bcard h3 a,.close-fine a{min-height:44px;display:inline-flex;align-items:center} .foot-col a,.foot-bar a,.crumbs a{display:inline-flex;align-items:center;min-height:38px} .socials a{width:46px;height:46px} .accordion-head{min-height:56px} /* روابط مستقلة: رقم السجل، وبيانات التواصل في البطاقات الجانبية */ .footer-legal .cr-no a,.side-card a,.side-row a,.ch-card a{min-height:44px;display:inline-flex;align-items:center} .footer-legal .cr-no{padding-block:2px} /* مربعات الاختيار ملفوفة بـ