/* Manzil Al-Binaa — Saudi site stylesheet v29 Design: the approved reference stylesheet (2026-11), applied to the site's existing mab- markup. Part 1 is the reference as supplied. Part 2 adapts it to the full site (no builder iframe). Part 3 keeps the site-only components (native forms, calculator, packages, careers, project updates, lightbox, footer) from v28, recoloured onto the reference palette. */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@200;300;400;500;600&family=Cormorant+Garamond:wght@300;400&display=swap'); #mab{ --paper:#F4F2ED; --paper-2:#ECE9E2; --stone:#E4E1DA; --stone-2:#D3CFC7; --ink:#29374A; --ink-2:#1B2634; --deep:#2F2119; --text:#1E2833; --muted:#586471; --muted-d:#AEB9C6; --accent:#C2704F; --accent-2:#D08E72; --hair:rgba(41,55,74,.17); --hair-l:rgba(241,239,233,.17); --max:1720px; --pad:clamp(20px,5vw,88px); --sec:clamp(72px,11vw,132px); --gap:clamp(16px,1.6vw,28px); --nav:70px; --dur:.9s; --ease:cubic-bezier(.22,1,.36,1); font-family:'IBM Plex Sans Arabic',system-ui,'Segoe UI',sans-serif; font-size:15px; font-weight:300; line-height:1.75; color:var(--text); background:var(--paper); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } #mab *,#mab *::before,#mab *::after{box-sizing:border-box} #mab{overflow-x:clip} #mab h1,#mab h2,#mab h3,#mab h4,#mab p,#mab ul,#mab ol,#mab dl,#mab dd,#mab figure,#mab blockquote{margin:0;padding:0} #mab ul,#mab ol{list-style:none} #mab img,#mab video{display:block;max-width:100%} #mab a{color:inherit;text-decoration:none} #mab button{font:inherit;color:inherit} /* ثنائية اللغة */ #mab[data-lang="ar"] .mab-en{display:none} #mab[data-lang="en"] .mab-ar{display:none} #mab[data-lang="en"]{font-family:'IBM Plex Sans Arabic',system-ui,sans-serif} /* الخط العرضي للعناوين اللاتينية */ #mab .mab-en.mab-disp,#mab[data-lang="en"] .mab-disp{font-family:'Cormorant Garamond',Georgia,serif} /* ── الشبكة الأم ── */ #mab .mab-wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)} #mab .mab-sec{padding-block:var(--sec)} #mab .mab-paper{background:var(--paper)} #mab .mab-paper2{background:var(--paper-2)} #mab .mab-stone{background:#E4E1DA;--muted:#4C5663} #mab .mab-dark{background:var(--ink);color:#EDEFF2} #mab .mab-dark .mab-lead,#mab .mab-dark p{color:#C3CBD5} #mab .mab-deep{background:var(--deep);color:#F0E9E4} /* ── ترويسة القسم المرقّمة ── */ #mab .mab-eye{display:flex;align-items:center;gap:16px; font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent); font-weight:500;font-variant-numeric:tabular-nums} #mab .mab-eye i{font-style:normal;opacity:.9} #mab .mab-eye s{flex:0 0 46px;height:1px;background:currentColor;opacity:.5;text-decoration:none} #mab .mab-eye u{text-decoration:none;color:var(--muted);letter-spacing:.22em} #mab .mab-dark .mab-eye u{color:var(--muted-d)} #mab .mab-lead{margin-top:clamp(26px,3.4vw,46px); font-size:clamp(20px,2.5vw,38px);font-weight:200;line-height:1.42; letter-spacing:-.02em;max-width:34ch;color:var(--text);text-wrap:balance} #mab .mab-lead.mab-narrow{max-width:26ch} #mab .mab-note{margin-top:22px;max-width:62ch;font-size:15.5px;color:var(--muted);line-height:1.95} #mab .mab-dark .mab-note{color:var(--muted-d)} #mab .mab-micro{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)} #mab .mab-dark .mab-micro{color:var(--muted-d)} /* ── الغلاف ── */ #mab .mab-hero{position:relative;min-height:100vh;min-height:100svh; background:var(--ink-2);color:#fff;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end} #mab .mab-hero video,#mab .mab-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5} #mab .mab-hero::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(to top,rgba(27,38,52,.97) 0%,rgba(27,38,52,.72) 22%, rgba(27,38,52,.3) 58%,rgba(27,38,52,.8) 100%)} #mab .mab-hero .mab-wrap{position:relative;z-index:2;width:100%} #mab .mab-hbody{padding-block:clamp(40px,7vw,84px) clamp(22px,3vw,34px)} #mab .mab-hero .mab-eye{color:#D9BFB1} #mab .mab-hero .mab-eye u{color:#AEBCC9} #mab .mab-hero h1{margin-top:clamp(18px,2.4vw,28px); font-size:clamp(25px,4.15vw,58px);font-weight:200;line-height:1.18; letter-spacing:-.028em;max-width:31ch;text-wrap:balance} #mab .mab-hero .mab-sub{margin-top:clamp(14px,1.6vw,20px); font-size:clamp(15px,1.7vw,21px);font-weight:200;color:#C6D0DB;max-width:40ch} #mab .mab-hbar{position:relative;z-index:2;border-top:1px solid var(--hair-l); background:rgba(27,38,52,.5);backdrop-filter:blur(6px)} #mab .mab-hbar .mab-wrap{display:flex;justify-content:space-between;align-items:stretch;gap:24px; padding-block:0} #mab .mab-scroll{display:flex;align-items:center;gap:12px;padding-block:22px; font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:#AEBCC9} #mab .mab-scroll s{display:block;width:34px;height:1px;background:currentColor;text-decoration:none; transform-origin:center;animation:mabline 2.4s var(--ease) infinite} @keyframes mabline{0%,100%{transform:scaleX(.3)}50%{transform:scaleX(1)}} #mab .mab-next{display:flex;align-items:center;gap:clamp(16px,2vw,30px); padding:18px 0 18px clamp(16px,2vw,28px);border-inline-start:1px solid var(--hair-l);text-align:start} #mab .mab-next b{display:block;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase; color:#D9BFB1;font-weight:500} #mab .mab-next strong{display:block;margin-top:7px;font-size:clamp(15px,1.7vw,19px);font-weight:300} #mab .mab-next em{display:block;margin-top:3px;font-style:normal;font-size:11px; letter-spacing:.14em;color:#AEBCC9;text-transform:uppercase} #mab .mab-next span{font-size:20px;opacity:.7;transition:transform .5s var(--ease)} #mab .mab-next:hover span{transform:translateX(-7px)} #mab[data-lang="en"] .mab-next:hover span{transform:translateX(7px)} /* ── شبكة الأرقام (خطوط شعرية) ── */ #mab .mab-figs{margin-top:clamp(38px,4.6vw,66px); display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); border-top:1px solid var(--hair);border-inline-start:1px solid var(--hair)} #mab .mab-figs div{padding:clamp(22px,2.6vw,34px); border-bottom:1px solid var(--hair);border-inline-end:1px solid var(--hair)} #mab .mab-figs b{display:block;font-weight:200;font-variant-numeric:tabular-nums; font-size:clamp(28px,3.4vw,50px);line-height:1.05;letter-spacing:-.035em;color:var(--text); direction:ltr;unicode-bidi:isolate;text-align:start} #mab .mab-figs b sup{font-size:.44em;font-weight:300;vertical-align:baseline; letter-spacing:0;margin-inline-start:.16em;color:var(--muted)} #mab .mab-figs span{display:block;margin-top:14px;font-size:clamp(14px,1.45vw,17px); letter-spacing:.02em;color:var(--text);font-weight:400} #mab .mab-figs em{display:block;margin-top:7px;font-style:normal;font-size:13.5px;color:var(--muted)} /* ── قائمة مرقّمة (الحلول / الخدمات) ── */ #mab .mab-rows{margin-top:clamp(34px,4.4vw,60px);border-top:1px solid var(--hair)} #mab .mab-rows li{border-bottom:1px solid var(--hair)} #mab .mab-rows a,#mab .mab-rows .mab-rowin{display:grid; grid-template-columns:auto minmax(0,24ch) minmax(0,1fr) auto; align-items:center;gap:clamp(18px,3vw,52px);padding-block:clamp(22px,2.7vw,34px); transition:padding-inline .5s var(--ease),background .5s var(--ease)} #mab .mab-rows a:hover{padding-inline:clamp(8px,1.2vw,18px);background:rgba(194,112,79,.05)} #mab .mab-rows i{font-style:normal;font-size:11px;letter-spacing:.14em;color:var(--accent); font-variant-numeric:tabular-nums;font-weight:500} #mab .mab-rows h3{font-size:clamp(17px,2vw,25px);font-weight:300;letter-spacing:-.018em;line-height:1.3} #mab .mab-rows p{font-size:14.8px;color:var(--muted);line-height:1.85;max-width:52ch} #mab .mab-rows span{font-size:19px;color:var(--accent);opacity:.55;transition:transform .5s var(--ease),opacity .4s} #mab .mab-rows a:hover span{opacity:1;transform:translateX(-8px)} #mab[data-lang="en"] .mab-rows a:hover span{transform:translateX(8px)} #mab .mab-dark .mab-rows,#mab .mab-dark .mab-rows li{border-color:var(--hair-l)} #mab .mab-dark .mab-rows p{color:var(--muted-d)} #mab .mab-dark .mab-rows a:hover{background:rgba(255,255,255,.04)} /* ── شريط متحرك تلقائياً ── */ #mab .mab-strip{margin-top:clamp(32px,4vw,54px);overflow:hidden; -webkit-mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent); mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent)} #mab .mab-track{display:flex;gap:var(--gap);width:max-content; animation:mabrun 58s linear infinite} #mab .mab-strip:hover .mab-track,#mab .mab-strip:focus-within .mab-track{animation-play-state:paused} @keyframes mabrun{from{transform:translateX(0)}to{transform:translateX(-50%)}} #mab .mab-strip,#mab .mab-track{direction:ltr} #mab[data-lang="ar"] .mab-cardx{direction:rtl} #mab .mab-cardx{flex:0 0 clamp(250px,25vw,370px)} #mab .mab-cardx .mab-im{overflow:hidden;background:var(--stone-2);aspect-ratio:4/3} #mab .mab-cardx img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)} #mab .mab-cardx:hover img{transform:scale(1.055)} #mab .mab-cardx .mab-st{margin-top:18px;font-size:10px;letter-spacing:.2em;text-transform:uppercase; color:var(--accent-2);font-weight:500} #mab .mab-cardx h3{margin-top:9px;font-size:clamp(16px,1.8vw,20px);font-weight:300;line-height:1.35} #mab .mab-cardx h3 em{display:block;font-style:normal;font-size:.72em;color:var(--muted-d);margin-top:4px} #mab .mab-cardx dl{margin-top:16px;border-top:1px solid var(--hair-l)} #mab .mab-cardx dl>div{display:flex;justify-content:space-between;gap:14px; padding-block:9px;border-bottom:1px solid var(--hair-l);font-size:12.5px} #mab .mab-cardx dt{color:var(--muted-d);letter-spacing:.06em} #mab .mab-cardx dd{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate} /* ── ثلاثيات (الخدمات / المدونة) ── */ #mab .mab-tri{margin-top:clamp(34px,4.4vw,60px); display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,52px)} #mab .mab-cell{border-top:1px solid var(--hair);padding-top:clamp(20px,2.2vw,28px)} #mab .mab-cell i{font-style:normal;font-size:10.5px;letter-spacing:.2em;color:var(--accent);font-weight:500} #mab .mab-cell h3{margin-top:14px;font-size:clamp(17px,1.9vw,22px);font-weight:300;line-height:1.38} #mab .mab-cell p{margin-top:12px;font-size:14.8px;color:var(--muted);line-height:1.9} #mab .mab-cell .mab-im{overflow:hidden;background:var(--stone-2);margin-bottom:20px} #mab .mab-cell .mab-im img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform 1.1s var(--ease)} #mab .mab-cell:hover .mab-im img{transform:scale(1.05)} #mab .mab-cell time{display:block;font-size:10.5px;letter-spacing:.18em;color:var(--accent);text-transform:uppercase} #mab .mab-more{display:inline-flex;align-items:center;gap:9px;margin-top:16px; font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:500} #mab .mab-more s{display:block;width:22px;height:1px;background:currentColor;text-decoration:none; transition:width .5s var(--ease)} #mab .mab-cell:hover .mab-more s,#mab a:hover>.mab-more s{width:38px} /* ── النطاق / الأرقام الكبيرة على داكن ── */ #mab .mab-big{margin-top:clamp(34px,4.4vw,60px); display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--hair-l)} #mab .mab-big div{padding:clamp(26px,3vw,44px) clamp(18px,2vw,30px); border-bottom:1px solid var(--hair-l);border-inline-end:1px solid var(--hair-l)} #mab .mab-big div:last-child{border-inline-end:0} #mab .mab-big b{display:block;font-weight:200;font-size:clamp(30px,4.4vw,64px);line-height:1; letter-spacing:-.04em;font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;text-align:start} #mab .mab-big span{display:block;margin-top:14px;font-size:10.5px;letter-spacing:.2em; text-transform:uppercase;color:var(--muted-d)} /* ── CTA + نموذج ── */ #mab .mab-cta h2{font-size:clamp(26px,4.2vw,62px);font-weight:200;line-height:1.12; letter-spacing:-.032em;max-width:18ch;text-wrap:balance} #mab .mab-form{margin-top:clamp(30px,4vw,52px);display:grid; grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.8vw,22px);max-width:780px} #mab .mab-form label{display:block;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase; color:var(--muted-d);margin-bottom:9px} #mab .mab-form input,#mab .mab-form select,#mab .mab-form textarea{ width:100%;font:inherit;font-size:15px;font-weight:300;color:#fff;background:transparent; border:0;border-bottom:1px solid var(--hair-l);padding:10px 0;border-radius:0;transition:border-color .35s} #mab .mab-form textarea{resize:vertical;min-height:64px} #mab .mab-form input:focus,#mab .mab-form select:focus,#mab .mab-form textarea:focus{ outline:none;border-bottom-color:var(--accent-2)} #mab .mab-form select option{color:#111;background:#fff} #mab .mab-form .mab-full{grid-column:1/-1} #mab .mab-btn{display:inline-flex;align-items:center;gap:12px;margin-top:8px;cursor:pointer; background:var(--accent);border:0;color:#fff;padding:16px 34px; font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:500; transition:background .35s,transform .35s var(--ease)} #mab .mab-btn:hover{background:#B0603F;transform:translateY(-2px)} #mab .mab-alt{margin-top:22px;font-size:13.5px;color:var(--muted-d)} #mab .mab-alt a{color:var(--accent-2);border-bottom:1px solid rgba(208,142,114,.4)} /* ── الشريط العلوي والقائمة ── */ #mab .mab-bar{position:fixed;inset-block-start:0;inset-inline:0;z-index:60;height:var(--nav); display:flex;align-items:center;justify-content:space-between; padding-inline:var(--pad);background:rgba(27,38,52,0);transition:background .5s,backdrop-filter .5s} #mab .mab-bar[data-solid="1"]{background:rgba(27,38,52,.93);backdrop-filter:blur(9px)} #mab .mab-bar img{height:26px;width:auto} #mab .mab-bright{display:flex;align-items:center;gap:clamp(14px,2vw,26px)} #mab .mab-lang{display:flex;gap:9px;font-size:11px;letter-spacing:.14em} #mab .mab-lang button{background:none;border:0;cursor:pointer;color:rgba(255,255,255,.52);padding:4px 2px} #mab .mab-lang button[aria-pressed="true"]{color:#fff} #mab .mab-menubtn{background:none;border:0;cursor:pointer;color:#fff; font-size:11px;letter-spacing:.2em;text-transform:uppercase;display:flex;align-items:center;gap:11px} #mab .mab-menubtn s{display:block;width:26px;height:9px;text-decoration:none; border-top:1px solid currentColor;border-bottom:1px solid currentColor} #mab .mab-menu{position:fixed;inset:0;z-index:70;background:var(--ink-2);color:#fff; display:flex;align-items:center;justify-content:center; opacity:0;visibility:hidden;transition:opacity .55s var(--ease),visibility .55s} #mab .mab-menu[data-open="1"]{opacity:1;visibility:visible} #mab .mab-menu ol{text-align:center} #mab .mab-menu li{border-bottom:1px solid var(--hair-l)} #mab .mab-menu a{display:flex;align-items:baseline;justify-content:center;gap:16px; padding:clamp(13px,2vw,20px) clamp(20px,6vw,70px); font-size:clamp(19px,3vw,34px);font-weight:200;transition:color .35s} #mab .mab-menu a:hover{color:var(--accent-2)} #mab .mab-menu i{font-style:normal;font-size:10.5px;letter-spacing:.16em;color:var(--accent); font-variant-numeric:tabular-nums} #mab .mab-x{position:absolute;inset-block-start:18px;inset-inline-end:var(--pad); background:none;border:0;cursor:pointer;color:#fff;font-size:30px;line-height:1} /* ── الحاشية ── */ #mab .mab-foot{background:var(--ink-2);color:#C3CBD5;padding-block:clamp(50px,6vw,78px) 34px; font-size:13.5px} #mab .mab-fgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,44px); padding-bottom:clamp(34px,4vw,52px);border-bottom:1px solid var(--hair-l)} #mab .mab-fgrid dt{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-d)} #mab .mab-fgrid dd{margin-top:11px;color:#E4E8ED} #mab .mab-fgrid a:hover{color:var(--accent-2)} #mab .mab-fbot{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between; padding-top:26px;font-size:12px;color:var(--muted-d)} #mab .mab-soc{display:flex;flex-wrap:wrap;gap:clamp(12px,2vw,24px)} #mab .mab-soc a:hover{color:var(--accent-2)} /* ── ظهور تدريجي ── */ #mab .mab-rise{opacity:0;transform:translateY(26px); transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)} #mab .mab-rise[data-in="1"]{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ #mab .mab-rise{opacity:1;transform:none;transition:none} #mab .mab-scroll s{animation:none} } /* ── الجوال ── */ @media (max-width:1000px){ #mab .mab-tri,#mab .mab-big{grid-template-columns:1fr} #mab .mab-big div{border-inline-end:0} #mab .mab-rows a,#mab .mab-rows .mab-rowin{grid-template-columns:auto 1fr auto;gap:16px} #mab .mab-rows p{grid-column:2/-1;margin-top:8px} #mab .mab-form{grid-template-columns:1fr} #mab .mab-hbar .mab-wrap{flex-direction:column;gap:0} #mab .mab-next{border-inline-start:0;border-top:1px solid var(--hair-l);padding-inline:0;width:100%; justify-content:space-between} #mab .mab-scroll{display:none} } @media (max-width:620px){ #mab .mab-figs{grid-template-columns:1fr} #mab .mab-track{animation-duration:40s} } /* ── غلاف الصفحات الفرعية ── */ #mab .mab-phero{position:relative;min-height:min(72vh,660px);background:var(--ink-2);color:#fff; overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end} #mab .mab-phero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42} #mab .mab-phero::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(to top,rgba(27,38,52,.96) 0%,rgba(27,38,52,.66) 34%,rgba(27,38,52,.82))} #mab .mab-phero .mab-wrap{position:relative;z-index:2;width:100%; padding-block:clamp(48px,8vw,100px) clamp(40px,6vw,76px)} #mab .mab-crumb{display:flex;align-items:center;gap:10px;font-size:10.5px;letter-spacing:.2em; text-transform:uppercase;color:#AEBCC9} #mab .mab-crumb a:hover{color:var(--accent-2)} #mab .mab-crumb i{font-style:normal;opacity:.45} #mab .mab-phero h1{margin-top:clamp(18px,2.6vw,30px); font-size:clamp(28px,4.8vw,66px);font-weight:200;line-height:1.1; letter-spacing:-.032em;max-width:20ch;text-wrap:balance} #mab .mab-phero .mab-promise{margin-top:clamp(16px,2vw,24px);max-width:52ch; font-size:clamp(15px,1.7vw,19px);font-weight:200;color:#C6D0DB} /* ── بطاقات التحدّيات ── */ #mab .mab-quad{margin-top:clamp(34px,4.4vw,60px);display:grid; grid-template-columns:repeat(2,1fr);gap:clamp(22px,3vw,48px)} #mab .mab-quad>div{border-top:1px solid var(--hair);padding-top:clamp(18px,2vw,26px)} #mab .mab-quad i{font-style:normal;font-size:10.5px;letter-spacing:.2em;color:var(--accent);font-weight:500} #mab .mab-quad h3{margin-top:13px;font-size:clamp(16px,1.85vw,21px);font-weight:300;line-height:1.4} #mab .mab-quad p{margin-top:11px;font-size:14.8px;color:var(--muted);line-height:1.9} #mab .mab-dark .mab-quad>div{border-color:var(--hair-l)} #mab .mab-dark .mab-quad p{color:var(--muted-d)} /* ── قائمة الملاءمة ── */ #mab .mab-fit{margin-top:clamp(30px,3.6vw,48px);border-top:1px solid var(--hair);max-width:70ch} #mab .mab-fit li{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:baseline; padding-block:clamp(15px,1.8vw,21px);border-bottom:1px solid var(--hair);font-size:15.5px} #mab .mab-fit s{flex:none;width:16px;height:1px;background:var(--accent);text-decoration:none; align-self:center} /* ── شبكة التقنيات ── */ #mab .mab-tech{margin-top:clamp(34px,4.4vw,60px);display:grid; grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,32px)} #mab .mab-tech figure .mab-im{overflow:hidden;background:var(--stone-2)} #mab .mab-tech img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform 1.1s var(--ease)} #mab .mab-tech figure:hover img{transform:scale(1.06)} #mab .mab-tech figcaption{margin-top:16px} #mab .mab-tech h3{font-size:clamp(15px,1.6vw,18px);font-weight:300;line-height:1.4} #mab .mab-tech em{display:block;margin-top:6px;font-style:normal;font-size:10.5px; letter-spacing:.16em;text-transform:uppercase;color:var(--accent)} /* ── شبكة المشاريع ── */ #mab .mab-filters{margin-top:clamp(30px,3.6vw,48px);display:flex;flex-wrap:wrap;gap:9px} #mab .mab-filters button{cursor:pointer;background:transparent;border:1px solid var(--hair); color:var(--muted);padding:9px 20px;border-radius:999px;font-size:12.5px;letter-spacing:.06em; transition:.25s} #mab .mab-filters button:hover{border-color:var(--text);color:var(--text)} #mab .mab-filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff} #mab .mab-grid{margin-top:clamp(30px,3.6vw,48px);display:grid; grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,46px)} #mab .mab-card[hidden]{display:none} #mab .mab-card .mab-im{overflow:hidden;background:var(--stone-2);aspect-ratio:4/3} #mab .mab-card img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)} #mab .mab-card:hover img{transform:scale(1.055)} #mab .mab-card .mab-st{margin-top:18px;font-size:10px;letter-spacing:.2em;text-transform:uppercase; color:var(--accent);font-weight:500} #mab .mab-card h3{margin-top:9px;font-size:clamp(16px,1.8vw,21px);font-weight:300;line-height:1.35} #mab .mab-card h3 em{display:block;font-style:normal;font-size:.72em;color:var(--muted);margin-top:4px} #mab .mab-card dl{margin-top:16px;border-top:1px solid var(--hair)} #mab .mab-card dl>div{display:flex;justify-content:space-between;gap:14px;padding-block:9px; border-bottom:1px solid var(--hair);font-size:12.8px} #mab .mab-card dt{color:var(--muted);letter-spacing:.06em} #mab .mab-card dd{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate} /* ── الشهادات ── */ #mab .mab-certs{margin-top:clamp(30px,3.6vw,48px);border-top:1px solid var(--hair-l)} #mab .mab-certs li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px; padding-block:clamp(16px,2vw,24px);border-bottom:1px solid var(--hair-l);font-size:15.5px} #mab .mab-certs b{font-weight:300} #mab .mab-certs span{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-2); align-self:center} /* ── المقالات ── */ #mab .mab-article{max-width:72ch} #mab .mab-article h2{margin-top:clamp(34px,4vw,54px);font-size:clamp(20px,2.3vw,30px); font-weight:200;letter-spacing:-.02em;line-height:1.35} #mab .mab-article p{margin-top:18px;font-size:16px;color:var(--text);line-height:2} #mab .mab-article ul{margin-top:18px} #mab .mab-article li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline; padding-block:8px;font-size:15.5px;color:var(--muted);line-height:1.9} #mab .mab-article li s{width:14px;height:1px;background:var(--accent);text-decoration:none;align-self:center} @media (max-width:1000px){ #mab .mab-quad,#mab .mab-grid,#mab .mab-tech{grid-template-columns:1fr} } @media (min-width:620px) and (max-width:1000px){ #mab .mab-tech{grid-template-columns:repeat(2,1fr)} } /* ── تصحيح تباين البطاقات على الخلفيات الداكنة ── */ #mab .mab-dark .mab-cell p,#mab .mab-dark .mab-cell h3, #mab .mab-dark .mab-value p,#mab .mab-dark .mab-flow p{color:var(--muted-d)} #mab .mab-dark .mab-cell h3{color:#EDEFF2} #mab .mab-dark .mab-cell i{color:var(--accent-2)} /* محاذاة الأرقام مع تسمياتها */ #mab[data-lang="ar"] .mab-figs b,#mab[data-lang="ar"] .mab-big b{text-align:right} #mab[data-lang="en"] .mab-figs b,#mab[data-lang="en"] .mab-big b{text-align:left} /* زر واتساب أصغر ليقرأ كأداة لا كعنوان */ #mab .mab-wa{padding:8px 15px;font-size:11.5px;background:#1FBF5C;color:#fff} #mab .mab-wa svg{width:14px;height:14px} /* عنوان الصفحات الفرعية: يتّسع للعناوين الإحصائية الطويلة */ #mab .mab-phero h1{max-width:26ch} /* ── زر واتساب في الشريط العلوي ── */ #mab .mab-wa{display:inline-flex;align-items:center;gap:9px;padding:9px 18px;border-radius:999px; background:#25D366;color:#0B2A17;font-size:12px;font-weight:500;letter-spacing:.04em; transition:transform .35s var(--ease),filter .35s} #mab .mab-wa:hover{transform:translateY(-2px);filter:brightness(1.07)} #mab .mab-wa svg{width:15px;height:15px;fill:currentColor;flex:none} @media (max-width:620px){#mab .mab-wa span{display:none}#mab .mab-wa{padding:9px 11px}} /* ── الكلمة المتغيّرة في الغلاف ── */ #mab .mab-rot{display:block;margin-top:clamp(14px,1.8vw,22px); font-size:clamp(14px,1.5vw,18px);letter-spacing:.14em;color:#D9BFB1; display:flex;align-items:center;gap:12px;flex-wrap:wrap} #mab .mab-rot b{font-weight:400;color:#fff;min-width:7ch; transition:opacity .45s var(--ease),transform .45s var(--ease)} #mab .mab-rot b[data-out="1"]{opacity:0;transform:translateY(-7px)} #mab .mab-rot s{width:26px;height:1px;background:currentColor;opacity:.55;text-decoration:none} /* ── بطاقة Let's work together أسفل الغلاف ── */ #mab .mab-lets{display:flex;align-items:center;gap:clamp(18px,2.6vw,38px);flex-wrap:wrap; padding:20px 0 20px clamp(16px,2vw,30px);border-inline-start:1px solid var(--hair-l)} #mab .mab-lets p{font-size:clamp(17px,2vw,26px);font-weight:200;line-height:1.2;color:#fff; letter-spacing:-.02em;max-width:9ch} #mab .mab-lets a{display:inline-flex;align-items:center;gap:10px;padding:13px 26px; border:1px solid rgba(255,255,255,.4);border-radius:999px;font-size:12px;letter-spacing:.14em; white-space:nowrap;transition:background .35s,border-color .35s,color .35s} #mab .mab-lets a:hover{background:#fff;border-color:#fff;color:var(--ink-2)} #mab .mab-lets a s{width:18px;height:1px;background:currentColor;text-decoration:none; transition:width .4s var(--ease)} #mab .mab-lets a:hover s{width:28px} /* ── العمود الجانبي في «في سطور» ── */ #mab .mab-split{display:grid;grid-template-columns:minmax(0,1fr) auto; gap:clamp(26px,5vw,80px);align-items:start} #mab .mab-aside{text-align:start;padding-top:6px} #mab .mab-aside h3{font-size:clamp(18px,2.1vw,26px);font-weight:200;letter-spacing:-.02em; color:var(--text);margin-bottom:20px;white-space:nowrap} #mab .mab-pill{display:inline-flex;align-items:center;gap:12px;padding:14px 28px; border:1px solid var(--hair);border-radius:999px;font-size:13.5px;color:var(--text); transition:background .35s var(--ease),color .35s,border-color .35s,transform .35s var(--ease)} #mab .mab-pill:hover{background:var(--ink);border-color:var(--ink);color:#fff;transform:translateY(-2px)} #mab .mab-pill span{font-size:16px;line-height:1} @media (max-width:900px){ #mab .mab-split{grid-template-columns:1fr} #mab .mab-aside{padding-top:0} #mab .mab-aside h3{white-space:normal} } /* ── الحلول الموجّهة: صفوف بصور ── */ #mab .mab-solrows{margin-top:clamp(34px,4.4vw,60px);border-top:1px solid var(--hair)} #mab .mab-solrows li{border-bottom:1px solid var(--hair)} #mab .mab-solrows a{display:grid; grid-template-columns:clamp(96px,11vw,168px) minmax(0,21ch) minmax(0,1fr) auto; align-items:center;gap:clamp(16px,2.6vw,44px);padding-block:clamp(16px,2vw,24px); transition:padding-inline .5s var(--ease),background .5s var(--ease)} #mab .mab-solrows a:hover{padding-inline:clamp(8px,1.2vw,18px);background:rgba(194,112,79,.07)} #mab .mab-solrows .mab-im{overflow:hidden;background:var(--stone-2);aspect-ratio:4/3} #mab .mab-solrows img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)} #mab .mab-solrows a:hover img{transform:scale(1.07)} #mab .mab-solrows h3{font-size:clamp(17px,2vw,25px);font-weight:300;letter-spacing:-.018em;line-height:1.3} #mab .mab-solrows p{font-size:15px;color:var(--muted);line-height:1.85;max-width:52ch} #mab .mab-solrows>li>a>span{font-size:19px;color:var(--accent);opacity:.6; transition:transform .5s var(--ease),opacity .4s} #mab .mab-solrows a:hover>span{opacity:1;transform:translateX(-8px)} #mab[data-lang="en"] .mab-solrows a:hover>span{transform:translateX(8px)} @media (max-width:820px){ #mab .mab-solrows a{grid-template-columns:clamp(84px,24vw,120px) 1fr auto;gap:16px} #mab .mab-solrows p{grid-column:2/-1;margin-top:8px} } /* ═══ صفحة الهبوط ═══ */ /* النموذج على خلفية فاتحة */ #mab .mab-lead-form{margin-top:clamp(28px,3.6vw,46px);display:grid; grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,26px);max-width:840px} #mab .mab-lead-form label{display:block;font-size:13px;color:var(--muted);margin-bottom:9px} #mab .mab-lead-form input,#mab .mab-lead-form select,#mab .mab-lead-form textarea{ width:100%;font:inherit;font-size:15.5px;font-weight:300;color:var(--text);background:transparent; border:0;border-bottom:1px solid var(--hair);padding:11px 0;border-radius:0;transition:border-color .35s} #mab .mab-lead-form input:focus,#mab .mab-lead-form select:focus,#mab .mab-lead-form textarea:focus{ outline:none;border-bottom-color:var(--accent);border-bottom-width:2px} #mab .mab-lead-form textarea{resize:vertical;min-height:70px} #mab .mab-lead-form .mab-full{grid-column:1/-1} #mab .mab-yn{display:flex;gap:10px;margin-top:4px} #mab .mab-yn label{display:inline-flex;align-items:center;gap:8px;cursor:pointer;margin:0; padding:11px 26px;border:1px solid var(--hair);border-radius:999px;font-size:14px;color:var(--text); transition:.25s} #mab .mab-yn input{position:absolute;opacity:0;width:0;height:0} #mab .mab-yn label:has(input:checked){background:var(--ink);border-color:var(--ink);color:#fff} #mab .mab-btn-l{display:inline-flex;align-items:center;gap:12px;cursor:pointer; background:var(--accent);border:0;color:#fff;padding:17px 36px;border-radius:999px; font:inherit;font-size:14px;font-weight:500;letter-spacing:.03em; transition:background .35s,transform .35s var(--ease)} #mab .mab-btn-l:hover{background:#B0603F;transform:translateY(-2px)} /* الركائز المرقّمة الكبيرة */ #mab .mab-value{margin-top:clamp(34px,4.4vw,58px);display:grid; grid-template-columns:repeat(2,1fr);gap:clamp(24px,3.4vw,54px)} #mab .mab-value>div{border-top:2px solid var(--accent);padding-top:clamp(18px,2vw,26px)} #mab .mab-value h3{font-size:clamp(17px,1.95vw,22px);font-weight:400;line-height:1.4;color:var(--text)} #mab .mab-value p{margin-top:12px;font-size:15.2px;color:var(--muted);line-height:1.95} /* مراحل العمل — خط زمني */ #mab .mab-flow{margin-top:clamp(34px,4.4vw,58px);border-top:1px solid var(--hair)} #mab .mab-flow li{display:grid;grid-template-columns:auto minmax(0,26ch) minmax(0,1fr); gap:clamp(16px,2.8vw,48px);align-items:start; padding-block:clamp(20px,2.5vw,32px);border-bottom:1px solid var(--hair)} #mab .mab-flow b{font-size:clamp(20px,2.4vw,32px);font-weight:200;color:var(--accent); font-variant-numeric:tabular-nums;line-height:1;min-width:2.2ch} #mab .mab-flow h3{font-size:clamp(16px,1.85vw,21px);font-weight:400;line-height:1.4;color:var(--text)} #mab .mab-flow p{font-size:15px;color:var(--muted);line-height:1.95} @media (max-width:900px){ #mab .mab-value{grid-template-columns:1fr} #mab .mab-flow li{grid-template-columns:auto 1fr} #mab .mab-flow p{grid-column:2/-1;margin-top:8px} } /* الأسئلة الشائعة */ #mab .mab-faq{margin-top:clamp(30px,3.8vw,50px);border-top:1px solid var(--hair);max-width:88ch} #mab .mab-faq details{border-bottom:1px solid var(--hair)} #mab .mab-faq summary{cursor:pointer;list-style:none;padding-block:clamp(18px,2.2vw,26px); display:flex;align-items:center;justify-content:space-between;gap:20px; font-size:clamp(15.5px,1.75vw,19px);font-weight:400;color:var(--text);transition:color .3s} #mab .mab-faq summary::-webkit-details-marker{display:none} #mab .mab-faq summary:hover{color:var(--accent)} #mab .mab-faq summary i{font-style:normal;font-size:22px;font-weight:200;color:var(--accent); flex:none;line-height:1;transition:transform .4s var(--ease)} #mab .mab-faq details[open] summary i{transform:rotate(45deg)} #mab .mab-faq p{padding:0 0 clamp(20px,2.4vw,28px);font-size:15.4px;color:var(--muted); line-height:2;max-width:74ch} /* تبويبات معرض الأعمال */ #mab .mab-tabs{margin-top:clamp(28px,3.4vw,44px);display:flex;flex-wrap:wrap;gap:9px} #mab .mab-tabs button{cursor:pointer;background:transparent;border:1px solid var(--hair); color:var(--muted);padding:10px 22px;border-radius:999px;font-size:13.5px;transition:.25s} #mab .mab-tabs button:hover{border-color:var(--text);color:var(--text)} #mab .mab-tabs button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff} #mab .mab-shots{margin-top:clamp(26px,3.2vw,42px);display:grid; grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,30px)} #mab .mab-shot[hidden]{display:none} #mab .mab-shot{overflow:hidden;background:var(--stone-2);position:relative} #mab .mab-shot img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1.1s var(--ease)} #mab .mab-shot:hover img{transform:scale(1.06)} #mab .mab-shot figcaption{position:absolute;inset-inline:0;inset-block-end:0; padding:22px 18px 14px;font-size:13px;color:#fff; background:linear-gradient(to top,rgba(27,38,52,.88),transparent)} @media (max-width:900px){#mab .mab-shots{grid-template-columns:repeat(2,1fr)}} @media (max-width:560px){#mab .mab-shots{grid-template-columns:1fr}} /* ── الغلاف: المحتوى في الوسط، والكلمة المتغيّرة فوق العنوان ── */ #mab .mab-hero{justify-content:space-between} #mab .mab-hbody{flex:1;display:flex;flex-direction:column;align-items:center; justify-content:center;text-align:center;padding-block:clamp(90px,12vh,150px) clamp(30px,5vh,60px)} #mab .mab-hero h1{margin-top:clamp(16px,2vw,24px);margin-inline:auto;max-width:28ch} #mab .mab-rot{margin-top:0;justify-content:center} /* ── الحلول الموجّهة: بطاقات ── */ #mab .mab-solcards{margin-top:clamp(34px,4.4vw,60px);display:grid; grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,32px)} #mab .mab-solcard{display:flex;flex-direction:column;height:100%; background:var(--paper);border:1px solid var(--hair); transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .4s} #mab .mab-solcard:hover{transform:translateY(-6px);border-color:var(--accent); box-shadow:0 18px 44px rgba(41,55,74,.13)} #mab .mab-solcard .mab-im{overflow:hidden;background:var(--stone-2);aspect-ratio:4/3} #mab .mab-solcard img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)} #mab .mab-solcard:hover img{transform:scale(1.07)} #mab .mab-solcard .mab-body{padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column; flex:1;gap:12px} #mab .mab-solcard h3{font-size:clamp(16px,1.75vw,20px);font-weight:400;line-height:1.35; color:var(--text)} #mab .mab-solcard p{font-size:14.2px;color:var(--muted);line-height:1.85;flex:1} #mab .mab-solcard .mab-more{margin-top:0} @media (max-width:1100px){#mab .mab-solcards{grid-template-columns:repeat(2,1fr)}} @media (max-width:620px){#mab .mab-solcards{grid-template-columns:1fr}} /* ── عناوين صفحات الحلول: أقصر وأصغر ── */ #mab .mab-phero h1{font-size:clamp(24px,3.5vw,46px);max-width:20ch;line-height:1.16} #mab .mab-phero .mab-promise{font-size:clamp(14.5px,1.5vw,17px);max-width:46ch} /* ── قسم مواصفات التنفيذ ── */ #mab .mab-scope{margin-top:clamp(20px,2.4vw,30px);padding:18px 22px; border-inline-start:2px solid var(--accent);background:rgba(194,112,79,.07); font-size:14.6px;line-height:1.9;color:var(--text);max-width:74ch} #mab .mab-scope b{font-weight:500;color:var(--accent)} #mab .mab-specs{margin-top:clamp(28px,3.4vw,44px);border-top:1px solid var(--hair)} #mab .mab-specs details{border-bottom:1px solid var(--hair)} #mab .mab-specs summary{cursor:pointer;list-style:none;padding-block:clamp(16px,2vw,23px); display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px; font-size:clamp(15.5px,1.7vw,19px);font-weight:400;color:var(--text);transition:color .3s} #mab .mab-specs summary::-webkit-details-marker{display:none} #mab .mab-specs summary:hover{color:var(--accent)} #mab .mab-specs summary b{font-size:11px;letter-spacing:.14em;color:var(--accent);font-weight:500; font-variant-numeric:tabular-nums} #mab .mab-specs summary i{font-style:normal;font-size:21px;font-weight:200;color:var(--accent); line-height:1;transition:transform .4s var(--ease)} #mab .mab-specs details[open] summary i{transform:rotate(45deg)} #mab .mab-specs ul{padding-bottom:clamp(18px,2.2vw,26px)} #mab .mab-specs li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline; padding-block:8px;font-size:14.8px;color:var(--muted);line-height:1.95;max-width:84ch} #mab .mab-specs li s{width:13px;height:1px;background:var(--accent);text-decoration:none; align-self:center;opacity:.75} /* السعر */ #mab .mab-price{margin-top:clamp(30px,3.6vw,46px);display:grid; grid-template-columns:auto minmax(0,1fr);gap:clamp(22px,3.4vw,52px);align-items:start; border:1px solid var(--hair);padding:clamp(24px,3vw,38px)} #mab .mab-price .mab-num{display:flex;align-items:baseline;gap:9px;direction:ltr; unicode-bidi:isolate} #mab .mab-price b{font-size:clamp(42px,6vw,84px);font-weight:200;line-height:1; letter-spacing:-.04em;color:var(--text);font-variant-numeric:tabular-nums} #mab .mab-price .mab-unit{font-size:clamp(13px,1.4vw,16px);color:var(--muted);white-space:nowrap} #mab .mab-price p{font-size:15.2px;color:var(--text);line-height:1.95;max-width:56ch} #mab .mab-price ul{margin-top:16px;padding-top:14px;border-top:1px solid var(--hair)} #mab .mab-price li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline; padding-block:5px;font-size:13.6px;color:var(--muted);line-height:1.8} #mab .mab-price li s{width:11px;height:1px;background:var(--muted);text-decoration:none; align-self:center;opacity:.6} @media (max-width:820px){#mab .mab-price{grid-template-columns:1fr;gap:20px}} /* ═══ خلفية بيضاء بنقشة نقطية خفيفة، متصلة عبر الموقع ═══ */ #mab{ --paper:transparent; --paper-2:transparent; --stone:transparent; background-color:#FFFFFF; background-image:radial-gradient(circle at 1px 1px, rgba(41,55,74,.06) 1px, transparent 0); background-size:24px 24px; background-attachment:fixed; } #mab .mab-paper,#mab .mab-paper2{background:transparent} #mab .mab-stone{background:transparent;--muted:#4C5663} #mab .mab-sec{position:relative} /* الأقسام الداكنة تنساب في الخلفية بلا حدّ حاد */ #mab .mab-dark{background:transparent;isolation:isolate; padding-block:calc(var(--sec) + clamp(20px,3vw,44px))} #mab .mab-dark::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:linear-gradient(to bottom, rgba(41,55,74,0) 0%, var(--ink) 7%, var(--ink) 93%, rgba(41,55,74,0) 100%)} /* ═══ الصور: كيرف في كل مكان ═══ */ #mab .mab-im,#mab .mab-solcard .mab-im,#mab .mab-cardx .mab-im, #mab .mab-card .mab-im,#mab .mab-tech figure .mab-im, #mab .mab-shot,#mab .mab-cell .mab-im{border-radius:16px;overflow:hidden} #mab .mab-solcards .mab-im{border-radius:16px 16px 0 0} #mab .mab-shot img,#mab .mab-tech img{border-radius:0} /* الصور الكبيرة تتلاشى في الخلفية بدل حافة حادّة */ #mab .mab-hero video,#mab .mab-hero>img,#mab .mab-phero>img{ -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 9%,#000 88%,transparent 100%); mask-image:linear-gradient(to bottom,transparent 0,#000 9%,#000 88%,transparent 100%)} #mab .mab-hero::after{background:linear-gradient(to top, rgba(27,38,52,.92) 0%,rgba(27,38,52,.66) 26%,rgba(27,38,52,.3) 62%,rgba(27,38,52,.62) 100%)} #mab .mab-phero::after{background:linear-gradient(to top, rgba(27,38,52,.94) 0%,rgba(27,38,52,.62) 38%,rgba(27,38,52,.7) 100%)} #mab .mab-hero,#mab .mab-phero{background:#FFF} #mab .mab-hero::before,#mab .mab-phero::before{content:"";position:absolute;inset:0;z-index:0; background:var(--ink-2); -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 9%,#000 88%,transparent 100%); mask-image:linear-gradient(to bottom,transparent 0,#000 9%,#000 88%,transparent 100%)} #mab .mab-hero video,#mab .mab-hero>img,#mab .mab-phero>img{z-index:1} #mab .mab-hero::after,#mab .mab-phero::after{z-index:1} /* ═══ الغلاف ═══ */ #mab .mab-hero h1{font-size:clamp(29px,4.9vw,68px);max-width:26ch} #mab .mab-rot{font-size:clamp(15px,1.75vw,21px)} /* العنوان يرتفع ليخلّي مساحة تحته */ #mab .mab-hbody{justify-content:center;padding-block:clamp(80px,10vh,130px) 26vh} /* «لنعمل معاً» عند آخر الثلث الثاني، في الوسط تحت العنوان */ #mab .mab-lets{position:absolute;inset-block-start:66%;inset-inline:0; justify-content:center;z-index:3;border:0;padding:0 var(--pad); gap:clamp(14px,1.8vw,26px)} #mab .mab-lets p{color:#AEB9C6;font-size:clamp(16px,1.85vw,24px);max-width:none} #mab .mab-lets a{border-color:rgba(255,255,255,.34);color:#D5DCE4} #mab .mab-lets a:hover{background:#fff;border-color:#fff;color:var(--ink-2)} /* الشريط السفلي: بلا خط فاصل، ومؤشّر التصفّح عمودي */ #mab .mab-hbar{background:transparent;backdrop-filter:none;border-top:0; position:absolute;inset-block-end:0;inset-inline:0;z-index:3} #mab .mab-hbar .mab-wrap{justify-content:flex-start;padding-block:0} #mab .mab-scroll{writing-mode:vertical-rl;text-orientation:mixed; flex-direction:column;gap:14px;padding-block:0 clamp(22px,3vh,38px); letter-spacing:.3em;color:#9FAEBD} #mab .mab-scroll s{width:1px;height:46px;background:currentColor; transform-origin:top center;animation:mabvline 2.4s var(--ease) infinite} @keyframes mabvline{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}} @media (max-width:900px){ #mab .mab-lets{position:static;margin-top:clamp(26px,4vh,44px); justify-content:center;flex-direction:column;text-align:center} #mab .mab-lets p{text-align:center} #mab .mab-hbar{display:none} } /* ═══ «اطّلع على» ═══ */ #mab .mab-aside h3{font-weight:300} /* ═══ بطاقات الحلول القابلة للفتح ═══ */ #mab .mab-solcards{align-items:start} #mab .mab-solcard{background:rgba(255,255,255,.72);backdrop-filter:blur(2px); border:1px solid var(--hair);border-radius:16px;overflow:hidden} #mab .mab-solcard:hover{border-color:var(--accent)} #mab .mab-soltoggle{display:flex;width:100%;align-items:center;justify-content:space-between; gap:16px;cursor:pointer;background:none;border:0;text-align:start; padding:clamp(18px,2vw,24px) clamp(18px,2vw,26px)} #mab .mab-soltoggle h3{font-size:clamp(16px,1.75vw,20px);font-weight:400;line-height:1.35; color:var(--text);margin:0} #mab .mab-soltoggle i{font-style:normal;font-size:23px;font-weight:200;color:var(--accent); line-height:1;flex:none;transition:transform .4s var(--ease)} #mab .mab-solcard[data-open="1"] .mab-soltoggle i{transform:rotate(45deg)} #mab .mab-solpanel{display:grid;grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease)} #mab .mab-solcard[data-open="1"] .mab-solpanel{grid-template-rows:1fr} #mab .mab-solpanel>div{overflow:hidden} #mab .mab-solpanel .mab-inner{padding:0 clamp(18px,2vw,26px) clamp(20px,2.2vw,26px)} #mab .mab-solpanel p{font-size:14.4px;color:var(--muted);line-height:1.9;margin-bottom:14px} /* ═══ الأزرار ═══ */ /* غير الدائرية ← دائرية بلا لون */ #mab .mab-filters button,#mab .mab-tabs button{border-radius:999px} /* زر الـ CTA: بيضاوي مصمت بسهم مائل */ #mab .mab-btn{border-radius:999px;background:var(--accent);color:#fff;border:0; padding:17px 36px;font-size:13.5px;letter-spacing:.02em;font-weight:500;text-transform:none} #mab .mab-btn:hover{background:#B0603F} #mab .mab-btn s{display:inline-block;width:auto;height:auto;text-decoration:none; font-size:16px;line-height:1;transition:transform .4s var(--ease)} #mab .mab-btn:hover s{transform:translate(-3px,3px)} #mab[data-lang="en"] .mab-btn:hover s{transform:translate(3px,3px)} /* عنوان الـ CTA أثقل قليلاً */ #mab .mab-cta h2{font-weight:300;letter-spacing:-.028em;max-width:16ch} /* ═══ أغلفة صفحات الحلول: أصغر ═══ */ #mab .mab-phero{min-height:min(64vh,580px)} #mab .mab-phero h1{font-size:clamp(22px,3.1vw,40px);max-width:22ch;line-height:1.2} #mab .mab-phero .mab-promise{font-size:clamp(14px,1.4vw,16.5px);max-width:44ch} /* البطاقات على خلفية شفافة تحتاج أرضية خفيفة */ #mab .mab-cell .mab-im,#mab .mab-card .mab-im,#mab .mab-cardx .mab-im{background:#EFEDE8} #mab .mab-specs,#mab .mab-faq,#mab .mab-figs,#mab .mab-rows,#mab .mab-fit, #mab .mab-flow,#mab .mab-price{background:rgba(255,255,255,.6)} #mab .mab-price{border-radius:16px} /* ═══ الخلفية: أبيض صافي — بلا نقشة ولا نسيج ═══ */ #mab{ background-color:#FFFFFF; background-image:none; } #mab .mab-hero,#mab .mab-phero{background:#FFFFFF} /* ═══ بلا تراكب بين الأقسام — حدّ واضح كما كان أولاً ═══ */ #mab .mab-dark{background:var(--ink);isolation:auto; padding-block:var(--sec)} #mab .mab-dark::before{display:none} /* حواف الغلاف والصور الكبيرة: بلا تلاشٍ */ #mab .mab-hero video,#mab .mab-hero>img,#mab .mab-phero>img, #mab .mab-hero::before,#mab .mab-phero::before{ -webkit-mask-image:none; mask-image:none} /* ═══ على الأبيض الصافي: البطاقات واللوحات بأرضية بيضاء صريحة ═══ */ #mab .mab-solcard{background:#FFFFFF;backdrop-filter:none} #mab .mab-specs,#mab .mab-faq,#mab .mab-figs,#mab .mab-rows,#mab .mab-fit, #mab .mab-flow{background:transparent} #mab .mab-price{background:#F7F7F6} #mab .mab-cell .mab-im,#mab .mab-card .mab-im,#mab .mab-cardx .mab-im, #mab .mab-solcard .mab-im,#mab .mab-tech figure .mab-im,#mab .mab-shot{background:#EFEFEE} /* داخل الأقسام الداكنة تبقى اللوحات شفافة */ #mab .mab-dark .mab-specs,#mab .mab-dark .mab-faq,#mab .mab-dark .mab-figs, #mab .mab-dark .mab-rows,#mab .mab-dark .mab-fit,#mab .mab-dark .mab-flow{ background:transparent} /* ═══ توسيع العمود — هوامش جانبية أضيق ═══ */ #mab{--max:1800px; --pad:clamp(16px,2.6vw,44px)} /* ═══ سطر الغلاف الثابت — الكلمات الثلاث مع بعض ═══ */ #mab .mab-rot{display:flex;align-items:center;gap:12px;flex-wrap:wrap} #mab .mab-rot s{flex:none;width:34px;height:1px;background:var(--accent); text-decoration:none;opacity:.85} #mab .mab-rot em{font-style:normal;color:#fff;letter-spacing:.01em} #mab .mab-rot i{font-style:normal;color:var(--accent-2);padding-inline:2px} #mab .mab-rot span{color:rgba(255,255,255,.62)} @media (max-width:560px){ #mab .mab-rot{gap:8px;font-size:14px} #mab .mab-rot s{width:22px} } /* ═══ شهادات العملاء ═══ */ #mab .mab-revs{display:grid;grid-template-columns:repeat(2,1fr); gap:clamp(16px,1.8vw,26px);margin-top:clamp(34px,4.4vw,58px)} #mab .mab-rev{border:1px solid var(--hair);border-radius:16px; padding:clamp(22px,2.4vw,32px);display:flex;flex-direction:column; background:#fff} #mab .mab-rev .mab-stars{color:var(--accent);font-size:13px;letter-spacing:.22em; margin-bottom:14px} #mab .mab-rev p{font-size:clamp(14.5px,1.35vw,16.5px);line-height:2;color:var(--text); margin:0 0 20px;flex:1} #mab .mab-rev footer{display:flex;align-items:baseline;gap:10px; padding-top:16px;border-top:1px solid var(--hair)} #mab .mab-rev footer b{font-size:14.5px;font-weight:500;color:var(--text)} #mab .mab-rev footer u{text-decoration:none;font-size:12px;color:var(--muted); letter-spacing:.04em} #mab .mab-revsrc{margin-top:clamp(20px,2.4vw,30px);font-size:12.5px; color:var(--muted);letter-spacing:.06em;display:flex;align-items:center;gap:10px} #mab .mab-revsrc s{width:26px;height:1px;background:var(--hair); text-decoration:none;flex:none} @media (max-width:820px){ #mab .mab-revs{grid-template-columns:1fr} } /* داخل قسم داكن */ #mab .mab-dark .mab-rev{background:rgba(255,255,255,.04);border-color:var(--hair-l)} #mab .mab-dark .mab-rev p{color:#EDEBE6} #mab .mab-dark .mab-rev footer{border-top-color:var(--hair-l)} #mab .mab-dark .mab-rev footer b{color:#fff} #mab .mab-dark .mab-rev footer u,#mab .mab-dark .mab-revsrc{color:var(--muted-d)} /* ═══ سلايد القطاعات — عمودان: صورة كاملة + قائمة قابلة للطيّ ═══ */ /* العمود الأول (يمين في RTL) للصورة وهو الأعرض — النص أضيق ومزاح للجانب */ #mab .mab-solsplit{display:grid;grid-template-columns:1.5fr .92fr; gap:clamp(26px,3.4vw,58px);align-items:center;margin-top:clamp(30px,4vw,54px)} /* المسرح: صورة كاملة بلا قصّ مائل */ #mab .mab-solstage{position:relative;aspect-ratio:4/3; border-radius:clamp(18px,2.2vw,30px); overflow:hidden;background:#EFEFEE} #mab .mab-solstage figure{position:absolute;inset:0;margin:0;opacity:0; transition:opacity .6s var(--ease);pointer-events:none} #mab .mab-solstage figure[data-on="1"]{opacity:1} #mab .mab-solstage img{width:100%;height:100%;object-fit:cover;display:block} /* القائمة */ #mab .mab-sollist{border-top:1px solid var(--hair)} #mab .mab-solitem{border-bottom:1px solid var(--hair)} #mab .mab-solhead{display:flex;width:100%;align-items:center; justify-content:flex-start;gap:clamp(12px,1.4vw,18px);cursor:pointer;background:none; border:0;text-align:start;padding-block:clamp(18px,2.2vw,26px);color:inherit} #mab .mab-solhead h3{flex:1;font-size:clamp(16px,1.7vw,20px);font-weight:400; line-height:1.4;color:var(--text);margin:0;transition:color .3s} #mab .mab-solitem[data-open="1"] .mab-solhead h3{color:var(--accent)} /* العلامة مرسومة بالـCSS لا بحرف — الخط العربي لا يحوي رمز الطرح */ #mab .mab-solhead i{position:relative;flex:none;width:17px;height:17px} #mab .mab-solhead i::before,#mab .mab-solhead i::after{content:""; position:absolute;inset-inline:0;inset-block-start:50%;height:1.4px; background:var(--accent);transform:translateY(-50%)} #mab .mab-solhead i::after{transform:translateY(-50%) rotate(90deg); transition:opacity .35s var(--ease)} #mab .mab-solitem[data-open="1"] .mab-solhead i::after{opacity:0} #mab .mab-solbody{display:grid;grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease)} #mab .mab-solitem[data-open="1"] .mab-solbody{grid-template-rows:1fr} #mab .mab-solbody>div{overflow:hidden} #mab .mab-solbody p{font-size:14.4px;line-height:1.95;color:var(--muted); margin:0 0 18px;max-width:46ch} #mab .mab-solbody .mab-inner{padding-bottom:clamp(20px,2.4vw,28px)} #mab .mab-solmore{display:inline-flex;align-items:center;gap:10px; border:1px solid var(--hair);border-radius:999px;padding:11px 22px; font-size:13px;letter-spacing:.02em;color:var(--text); transition:border-color .3s,color .3s} #mab .mab-solmore:hover{border-color:var(--accent);color:var(--accent)} /* صورة داخل كل بند — على الشاشات الضيقة فقط، حيث يختفي المسرح */ #mab .mab-solthumb{display:none;border-radius:clamp(14px,4vw,20px);overflow:hidden; aspect-ratio:16/9;margin-bottom:16px;background:#EFEFEE} #mab .mab-solthumb img{width:100%;height:100%;object-fit:cover;display:block} @media (max-width:900px){ #mab .mab-solsplit{grid-template-columns:1fr;gap:22px;align-items:start} #mab .mab-solstage{display:none} #mab .mab-solthumb{display:block} } @media (max-width:560px){ #mab .mab-solhead h3{font-size:15px} } /* داخل قسم داكن */ #mab .mab-dark .mab-sollist,#mab .mab-dark .mab-solitem{border-color:var(--hair-l)} #mab .mab-dark .mab-solhead h3{color:#fff} #mab .mab-dark .mab-solbody p{color:var(--muted-d)} #mab .mab-dark .mab-solmore{border-color:var(--hair-l);color:#fff} /* ═══ قسم الحاسبة ═══ */ #mab .mab-calc{display:grid;grid-template-columns:1.15fr .85fr; gap:clamp(26px,4vw,72px);align-items:start;margin-top:clamp(30px,3.6vw,48px)} #mab .mab-calc h2{margin:0 0 18px} #mab .mab-calc>div>p{font-size:clamp(14.5px,1.4vw,16.5px);line-height:1.95; color:var(--muted);max-width:52ch;margin:0 0 26px} #mab .mab-calcrows{border-top:1px solid var(--hair)} #mab .mab-calcrows div{display:grid;grid-template-columns:auto 1fr;gap:18px; align-items:baseline;padding-block:clamp(14px,1.6vw,19px); border-bottom:1px solid var(--hair)} #mab .mab-calcrows b{font-size:11px;letter-spacing:.14em;color:var(--accent); font-weight:500;white-space:nowrap} #mab .mab-calcrows span{font-size:14.5px;color:var(--text);line-height:1.7} #mab .mab-calcnote{margin-top:22px;font-size:12.5px;color:var(--muted); line-height:1.8;max-width:46ch} @media (max-width:900px){ #mab .mab-calc{grid-template-columns:1fr} } /* ═══ صورة فوق كل مقال ═══ */ #mab .mab-postim{margin:clamp(26px,3.2vw,40px) 0 clamp(22px,2.6vw,34px); border-radius:clamp(18px,2.2vw,30px);overflow:hidden;background:#EFEFEE; aspect-ratio:16/9;max-width:980px} #mab .mab-postim img{width:100%;height:100%;object-fit:cover;display:block} @media (max-width:560px){ #mab .mab-postim{border-radius:clamp(14px,4vw,20px);aspect-ratio:4/3} } /* ═══ الرأس ═══ */ #mab .mab-nav{position:absolute;inset-block-start:0;inset-inline:0;z-index:60; transition:background .4s var(--ease),backdrop-filter .4s var(--ease), box-shadow .4s var(--ease)} #mab .mab-nav[data-fixed="1"]{position:fixed} #mab .mab-nav[data-solid="1"]{background:rgba(27,38,52,.94); backdrop-filter:saturate(1.2) blur(10px);box-shadow:0 1px 0 rgba(255,255,255,.08)} #mab .mab-nvwrap{display:flex;align-items:center;gap:clamp(14px,2vw,34px); max-width:var(--max);margin-inline:auto;padding:14px var(--pad)} #mab .mab-nvlogo{flex:none;display:block} #mab .mab-nvlogo img{height:clamp(30px,2.6vw,42px);width:auto;display:block} #mab .mab-nvmain{flex:1;min-width:0} #mab .mab-nvmain ul{display:flex;align-items:center;gap:clamp(8px,1.1vw,20px); list-style:none;margin:0;padding:0;justify-content:center;flex-wrap:nowrap} #mab .mab-nvi{position:relative;white-space:nowrap} #mab .mab-nvi>a{display:inline-flex;align-items:center;gap:6px; font-size:clamp(12.5px,.92vw,14.5px);letter-spacing:.01em; color:rgba(255,255,255,.9);padding-block:10px;transition:color .3s} #mab .mab-nvi>a:hover{color:#fff} #mab .mab-has>a>s{width:0;height:0;border-inline:4px solid transparent; border-block-start:4px solid currentColor;opacity:.75; transition:transform .3s var(--ease);text-decoration:none;display:inline-block} #mab .mab-has[data-open="1"]>a>s{transform:rotate(180deg)} #mab .mab-nvt{position:absolute;inset:0;background:none;border:0;cursor:pointer; width:100%;height:100%;opacity:0;display:none} /* المنسدلة */ #mab .mab-nvd{position:absolute;inset-block-start:calc(100% + 10px); inset-inline-start:50%;transform:translateX(50%) translateY(-6px); min-width:250px;background:#fff;border-radius:14px;padding:8px;margin:0; list-style:none;box-shadow:0 18px 44px rgba(27,38,52,.18); opacity:0;visibility:hidden;max-height:0;overflow:hidden; transition:opacity .28s var(--ease), transform .28s var(--ease),visibility .28s} #mab[data-lang="en"] .mab-nvd{transform:translateX(-50%) translateY(-6px)} #mab .mab-has:hover .mab-nvd,#mab .mab-has[data-open="1"] .mab-nvd{ opacity:1;visibility:visible;max-height:none;overflow:visible; transform:translateX(50%) translateY(0)} #mab[data-lang="en"] .mab-has:hover .mab-nvd, #mab[data-lang="en"] .mab-has[data-open="1"] .mab-nvd{transform:translateX(-50%) translateY(0)} #mab .mab-nvd a{display:block;padding:11px 14px;border-radius:9px; font-size:13.6px;line-height:1.5;color:var(--text);white-space:normal; transition:background .25s,color .25s} #mab .mab-nvd a:hover{background:var(--paper-2);color:var(--accent)} #mab .mab-nvend{flex:none;display:flex;align-items:center;gap:clamp(10px,1.2vw,18px)} #mab .mab-nvend .mab-lang button{color:rgba(255,255,255,.6);font-size:12px} #mab .mab-nvend .mab-lang button[aria-pressed="true"]{color:#fff} #mab .mab-nvcta{flex:none;background:var(--accent);color:#fff;border-radius:999px; padding:11px 22px;font-size:13px;letter-spacing:.02em;white-space:nowrap; transition:background .3s} #mab .mab-nvcta:hover{background:#B0603F} /* زر الجوال */ #mab .mab-nvburger{display:none;flex-direction:column;justify-content:center; gap:5px;width:34px;height:34px;background:none;border:0;cursor:pointer;padding:0} #mab .mab-nvburger s{display:block;width:22px;height:1.5px;background:#fff; text-decoration:none;transition:transform .35s var(--ease),opacity .25s} #mab .mab-nav[data-menu="1"] .mab-nvburger s:nth-child(1){transform:translateY(6.5px) rotate(45deg)} #mab .mab-nav[data-menu="1"] .mab-nvburger s:nth-child(2){opacity:0} #mab .mab-nav[data-menu="1"] .mab-nvburger s:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)} /* لوحة الجوال */ #mab .mab-nvpanel{display:none} @media (max-width:1150px){ #mab .mab-nvmain{display:none} #mab .mab-nvburger{display:flex} #mab .mab-nvend{display:contents} #mab .mab-nvlogo{order:1} #mab .mab-nvburger{order:2;margin-right:auto;margin-left:0} #mab .mab-nvwrap .mab-lang{order:3} #mab .mab-nvwrap>.mab-nvcta{order:4} #mab .mab-nvcta{display:none} #mab .mab-nvpanel{display:block;position:absolute;inset-inline:0; inset-block-start:100%;background:rgba(19,27,38,.985); backdrop-filter:blur(14px);padding:0 var(--pad); max-height:0;overflow:hidden; transition:max-height .45s var(--ease),padding .45s var(--ease)} #mab .mab-nvpanel[data-open="1"]{max-height:calc(var(--winh, 100vh) * .78);overflow-y:auto; padding:8px var(--pad) 26px} #mab .mab-nvpanel>ul{list-style:none;margin:0;padding:0} #mab .mab-nvpanel .mab-nvi{border-block-end:1px solid rgba(255,255,255,.1)} #mab .mab-nvpanel .mab-nvi>a{display:flex;justify-content:space-between; font-size:15.5px;padding-block:15px;color:#fff} #mab .mab-nvpanel .mab-has>a>s{display:none} #mab .mab-nvpanel .mab-nvt{display:block;position:absolute; inset-block-start:0;inset-inline-end:auto;left:0;right:auto; width:54px;height:52px;opacity:1;background:none} #mab[data-lang="en"] .mab-nvpanel .mab-nvt{left:auto;right:0} #mab .mab-nvpanel .mab-nvt::before,#mab .mab-nvpanel .mab-nvt::after{ content:"";position:absolute;inset-inline:18px;inset-block-start:50%; height:1.4px;background:rgba(255,255,255,.75);transform:translateY(-50%)} #mab .mab-nvpanel .mab-nvt::after{transform:translateY(-50%) rotate(90deg); transition:opacity .3s} #mab .mab-nvpanel .mab-has[data-open="1"] .mab-nvt::after{opacity:0} #mab .mab-nvpanel .mab-nvd{position:static;transform:none;opacity:1; visibility:visible;min-width:0;background:transparent;box-shadow:none; padding:0;max-height:0;overflow:hidden; transition:max-height .42s var(--ease),padding .42s var(--ease)} #mab .mab-nvpanel .mab-has[data-open="1"] .mab-nvd, #mab .mab-nvpanel .mab-has:hover .mab-nvd, #mab[data-lang="en"] .mab-nvpanel .mab-has[data-open="1"] .mab-nvd, #mab[data-lang="en"] .mab-nvpanel .mab-has:hover .mab-nvd{ position:static;transform:none;inset-inline-start:auto; max-height:300px;padding:2px 0 12px} #mab .mab-nvpanel .mab-nvd a{color:rgba(255,255,255,.72);font-size:14px; padding:9px 14px} #mab .mab-nvpanel .mab-nvd a:hover{background:rgba(255,255,255,.07);color:#fff} #mab .mab-nvcta2{display:inline-block;margin-top:20px;text-align:center;width:100%} } @media (max-width:560px){ #mab .mab-nvwrap{padding-block:11px} #mab .mab-nvlogo img{height:27px} } /* الغلاف يبدأ من تحت الرأس */ #mab .mab-hero .mab-hbody,#mab .mab-phero .mab-hbody{padding-block-start:120px} /* ── داخل إطار المنشئ: لا يوجد شريط علوي ثابت ── */ html,body{max-width:100%;overflow-x:hidden} #mab{--nav:0px;padding:0;margin:0;max-width:100%;overflow-x:clip; --pad:clamp(16px,3.2vw,66px);--max:1860px} #mab .mab-hero,#mab .mab-phero{width:100%;max-width:100%;box-sizing:border-box} #mab .mab-hero{aspect-ratio:auto;height:var(--winh,88vh); max-height:none;min-height:480px} #mab .mab-phero{min-height:0;height:auto;aspect-ratio:16/6.4; max-height:560px;min-height:380px} #mab .mab-hero .mab-hbody{padding-block:clamp(50px,7vw,90px) clamp(70px,11vw,150px)} #mab .mab-mini{position:absolute;inset-block-start:0;inset-inline:0;z-index:40; display:flex;align-items:center;justify-content:flex-end;gap:14px; padding:16px var(--pad)} #mab .mab-mini .mab-lang button{color:rgba(255,255,255,.6)} #mab .mab-mini .mab-lang button[aria-pressed="true"]{color:#fff} #mab .mab-rise{opacity:1;transform:none;transition:none} @media (max-width:1000px){ #mab .mab-hero{aspect-ratio:auto;height:var(--winh,88vh); min-height:440px;max-height:none} #mab .mab-phero{aspect-ratio:16/10;min-height:320px;max-height:460px} } @media (max-width:560px){ #mab .mab-hero{aspect-ratio:auto;height:var(--winh,88vh); min-height:460px;max-height:none} #mab .mab-phero{aspect-ratio:auto;height:auto;min-height:310px;max-height:none} #mab .mab-hero .mab-hbody{padding-block:64px 48px} #mab .mab-mini{padding:12px 16px;gap:10px} } /* ═══ تعديلات ٢٠٢٦-١٠-٠٥ ═══ */ #mab .mab-sec .mab-eye{font-size:clamp(16px,1.45vw,21px);letter-spacing:.06em} #mab .mab-sec .mab-eye u{letter-spacing:.06em} #mab .mab-sec .mab-eye s{flex:0 0 clamp(30px,3vw,46px)} #mab .mab-eyelink a{text-decoration:none;color:inherit;display:inline-flex; align-items:center;gap:10px;transition:color .3s var(--ease)} #mab .mab-eyelink a u{transition:color .3s var(--ease)} #mab .mab-eyelink a::after{content:"";width:7px;height:7px;flex:none; border-top:1px solid currentColor;border-left:1px solid currentColor; transform:rotate(-45deg);opacity:.5; transition:transform .35s var(--ease),opacity .3s} #mab[data-lang="en"] .mab-eyelink a::after{ border-left:0;border-right:1px solid currentColor;transform:rotate(45deg)} #mab .mab-eyelink a:hover u{color:var(--accent)} #mab .mab-eyelink a:hover::after{opacity:1;transform:rotate(-45deg) translate(-2px,-2px)} #mab[data-lang="en"] .mab-eyelink a:hover::after{transform:rotate(45deg) translate(2px,-2px)} #mab .mab-hbar .mab-wrap{justify-content:flex-end} #mab[data-lang="en"] .mab-hbar .mab-wrap{justify-content:flex-start} #mab a.mab-cardlink{display:block;color:inherit;text-decoration:none} #mab a.mab-cardlink h3{transition:color .3s var(--ease)} #mab a.mab-cardlink:hover h3{color:var(--accent)} #mab .mab-pager{display:flex;justify-content:center;align-items:center;gap:10px; margin-top:clamp(34px,4vw,56px)} #mab .mab-pager[hidden]{display:none} #mab .mab-pager button{min-width:40px;height:40px;padding:0 12px;cursor:pointer; background:none;border:1px solid var(--hair);border-radius:999px;color:var(--muted); font:inherit;font-size:14px;font-variant-numeric:tabular-nums; transition:border-color .3s,color .3s,background .3s} #mab .mab-pager button:hover{border-color:var(--accent);color:var(--accent)} #mab .mab-pager button[aria-current="true"]{background:var(--accent);border-color:var(--accent); color:#fff} #mab .mab-dark .mab-pager button{border-color:var(--hair-l);color:var(--muted-d)} #mab .mab-bgrid{display:grid;grid-template-columns:repeat(3,1fr); gap:clamp(22px,2.6vw,40px);margin-top:clamp(34px,4vw,56px); align-items:stretch;grid-auto-flow:dense} #mab .mab-bgrid-sm{grid-template-columns:repeat(6,1fr);gap:clamp(14px,1.5vw,24px)} @media (max-width:1500px){ #mab .mab-bgrid-sm{grid-template-columns:repeat(3,1fr)} } @media (max-width:980px){ #mab .mab-bgrid,#mab .mab-bgrid-sm{grid-template-columns:repeat(2,1fr)} } @media (max-width:620px){ #mab .mab-bgrid,#mab .mab-bgrid-sm{grid-template-columns:1fr} } #mab .mab-bcard{display:flex;flex-direction:column;min-width:0} #mab .mab-bim{border-radius:clamp(14px,1.6vw,22px);overflow:hidden; background:var(--stone-2);aspect-ratio:16/10} #mab .mab-bgrid-sm .mab-bim{aspect-ratio:4/3;border-radius:12px} #mab .mab-bim img{width:100%;height:100%;object-fit:cover;display:block; transition:transform 1s var(--ease)} #mab .mab-bcard:hover .mab-bim img{transform:scale(1.05)} #mab .mab-bcard time{display:block;margin-top:16px;font-size:10.5px;letter-spacing:.2em; text-transform:uppercase;color:var(--accent)} #mab .mab-bcard h3{margin-top:9px;font-weight:400;line-height:1.45;color:var(--text); font-size:clamp(16px,1.6vw,20px)} #mab .mab-bgrid-sm .mab-bcard h3{font-size:clamp(14.5px,1.15vw,17px)} #mab .mab-btease{margin-top:10px;font-size:14px;line-height:1.9;color:var(--muted);flex:1} #mab .mab-bgrid-sm .mab-btease{font-size:13px;line-height:1.8} #mab .mab-bmore{align-self:flex-start;margin-top:16px;cursor:pointer;background:none; display:inline-flex;align-items:center;gap:9px; border:1px solid var(--hair);border-radius:999px;padding:9px 18px; font:inherit;font-size:12.5px;letter-spacing:.02em;color:var(--text); transition:border-color .3s,color .3s} #mab .mab-bmore:hover{border-color:var(--accent);color:var(--accent)} #mab .mab-bmore s{width:14px;height:1px;background:currentColor;text-decoration:none; transition:transform .35s var(--ease)} #mab .mab-bcard[data-open="1"] .mab-bmore s{transform:rotate(180deg)} #mab .mab-bcard .mab-bclose{display:none} #mab .mab-bcard[data-open="1"] .mab-bopen{display:none} #mab .mab-bcard[data-open="1"] .mab-bclose{display:inline} #mab .mab-bbody{display:grid;grid-template-rows:0fr; transition:grid-template-rows .55s var(--ease)} #mab .mab-bcard[data-open="1"] .mab-bbody{grid-template-rows:1fr} #mab .mab-bbody>div{overflow:hidden} #mab .mab-bbody .mab-article{padding-top:clamp(18px,2vw,26px)} #mab .mab-bcard[data-open="1"]{grid-column:1 / -1; justify-self:center;width:min(960px,100%); padding-block:clamp(14px,1.6vw,24px); border-block:1px solid var(--hair)} #mab .mab-bcard[data-open="1"] .mab-bim{aspect-ratio:16/9;max-width:none; border-radius:clamp(14px,1.6vw,22px)} #mab .mab-bcard[data-open="1"] .mab-btease{display:none} #mab .mab-bcard[data-open="1"] h3{font-size:clamp(20px,2.4vw,30px);margin-top:12px} #mab .mab-bcard[data-open="1"] .mab-article{max-width:none} #mab .mab-dark .mab-bcard[data-open="1"]{border-color:var(--hair-l)} #mab .mab-dark .mab-bcard h3{color:#fff} #mab .mab-dark .mab-btease{color:var(--muted-d)} #mab .mab-dark .mab-bmore{border-color:var(--hair-l);color:#fff} #mab .mab-nvwrap{direction:ltr} #mab[data-lang="ar"] .mab-nvmain,#mab[data-lang="ar"] .mab-nvpanel{direction:rtl} #mab .mab-nvend{direction:ltr} /* ═══════════════════════════════════════════════════════════════════ Part 2 — the reference on the full site ═══════════════════════════════════════════════════════════════════ */ html,body{margin:0} #mab{ /* The reference read the parent window height into --winh inside the builder iframe. On the real page the window is the viewport. */ --winh:100svh; /* v28 names used by the site-only components, mapped onto the reference palette */ --navy:var(--ink); --navy-d:var(--ink-2); --navy-2:#3A4B61; --peach:var(--accent); --peach-d:#B0603F; --ivory:#F7F7F6; --x-paper:#F7F7F6; --x-stone:#EFEFEE; --x-ink:var(--text); --line:var(--hair); --line-l:var(--hair-l); --mute:var(--muted); --mute-l:var(--muted-d); --ar:'IBM Plex Sans Arabic',system-ui,'Segoe UI',sans-serif; --en:var(--ar); --mono:var(--ar); } @supports not (height:100svh){ #mab{--winh:100vh} } /* ═══════════════════════════════════════════════════════════════════ Part 3 — site-only components (from v28, on the reference palette) ═══════════════════════════════════════════════════════════════════ */ #mab s{text-decoration:none} #mab u{text-decoration:none} #mab i, #mab em{font-style:normal} #mab button{font:inherit; color:inherit; cursor:pointer} #mab :focus-visible{outline:2px solid var(--peach); outline-offset:3px; border-radius:2px} #mab .mab-h2{margin-top:clamp(26px,3.2vw,44px); font-size:clamp(24px,3.4vw,48px); line-height:1.25; font-weight:200; letter-spacing:-.025em; color:var(--text); max-width:24ch; text-wrap:balance} #mab .mab-dark .mab-h2{color:#EDEFF2} #mab[data-lang="en"] .mab-h2{letter-spacing:-.03em; line-height:1.12} #mab.mab-navonly{background:var(--navy-d)} #mab .mab-formmsg{margin-top:14px; font-size:14px; color:var(--peach)} #mab .mab-noimg{background:var(--navy-2) repeating-linear-gradient(135deg,rgba(244,241,236,.05) 0 1px,transparent 1px 18px)!important} #mab .mab-noimg>img, #mab img.mab-noimg{opacity:0} .mab-skip{position:absolute; inset-inline-start:12px; top:-60px; z-index:100; padding:10px 16px; border-radius:10px; background:#C2704F; color:#1B2634; font:600 14px 'IBM Plex Sans Arabic',sans-serif; transition:top .16s cubic-bezier(.23,1,.32,1)} .mab-skip:focus{top:12px} #mab .mab-phero-plain{min-height:clamp(380px,30vw,480px); background:var(--navy-d) repeating-linear-gradient(90deg,rgba(244,241,236,.035) 0 1px,transparent 1px 96px)} #mab .mab-phero-plain::before{display:none} #mab .mab-pending{display:flex; flex-direction:column; gap:6px; max-width:720px; padding:22px 24px; border:1px dashed rgba(41,55,74,.28); border-radius:14px; background:rgba(255,255,255,.45)} #mab .mab-dark .mab-pending{border-color:var(--line-l); background:rgba(255,255,255,.04)} #mab .mab-pending b{font-size:13px; font-weight:600; color:var(--peach-d)} #mab .mab-pending span{color:var(--mute)} #mab .mab-sec .mab-eye+.mab-pending, #mab .mab-facts+.mab-pending{margin-top:clamp(28px,3vw,40px)} #mab .mab-facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); margin-top:clamp(30px,3.4vw,48px); border-top:1px solid var(--line)} #mab .mab-facts>div{padding:24px clamp(14px,2vw,26px) 10px; border-inline-start:1px solid var(--line)} #mab .mab-facts>div:first-child{border-inline-start:0; padding-inline-start:0} #mab .mab-facts dt{font-size:12px; color:var(--mute); letter-spacing:.04em} #mab .mab-facts dd{margin-top:6px; font-size:clamp(20px,2vw,28px); font-weight:500; color:var(--navy); font-variant-numeric:tabular-nums} #mab .mab-linklist{margin-top:28px; max-width:720px; border-top:1px solid var(--line)} #mab .mab-linklist a{display:flex; align-items:center; justify-content:space-between; min-height:64px; border-bottom:1px solid var(--line); font-size:clamp(17px,1.6vw,21px); font-weight:500; color:var(--navy); transition:color .16s var(--ease)} #mab .mab-linklist a:hover{color:var(--peach-d)} #mab .mab-linklist s{width:10px; height:10px; border-top:1.5px solid currentColor; border-inline-start:1.5px solid currentColor; transform:rotate(var(--r,-45deg))} #mab[dir="ltr"] .mab-linklist s{--r:135deg} #mab .mab-hp{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap} #mab .mab-fielderr{display:block; margin-top:6px; font-size:13px; color:#F2A08C} #mab .mab-formmsg.is-ok{color:#9ED9B5} #mab .mab-foot-top{display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; padding-bottom:28px; border-bottom:1px solid var(--line-l)} #mab .mab-foot-logo img{height:40px; width:auto} #mab .mab-foot-links{display:flex; flex-wrap:wrap; gap:6px 26px} #mab .mab-foot-links a, #mab .mab-foot-contact a, #mab .mab-social a{display:inline-flex; align-items:center; min-height:40px; color:var(--ivory); opacity:.78; font-size:14px; transition:opacity .16s var(--ease),color .16s var(--ease)} #mab .mab-foot-links a:hover, #mab .mab-foot-contact a:hover, #mab .mab-social a:hover{opacity:1; color:var(--peach)} #mab .mab-foot-contact{display:flex; flex-wrap:wrap; gap:6px 28px; padding:22px 0} #mab .mab-foot-bottom{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:18px; border-top:1px solid var(--line-l); font-size:13px} #mab .mab-social{display:flex; flex-wrap:wrap; gap:4px 18px} #mab .mab-social a{font-size:13px} #mab .hidden{display:none!important} #mab .mab-eye-c{justify-content:center} #mab .mab-indexbar{display:flex; align-items:center; justify-content:space-between; gap:16px 24px; flex-wrap:wrap; margin-top:clamp(28px,3vw,40px); padding-block:14px; border-block:1px solid var(--line)} #mab .mab-count{display:flex; align-items:baseline; gap:12px; font-size:12px; font-weight:600; letter-spacing:.08em; color:var(--mute)} #mab .mab-count b{font-size:clamp(28px,3vw,40px); font-weight:500; letter-spacing:-.02em; color:var(--navy); font-variant-numeric:tabular-nums; line-height:1} #mab .mab-views{display:inline-flex; padding:4px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.5)} #mab .mab-views button{min-height:36px; padding:0 16px; border:0; border-radius:999px; background:transparent; font-size:12px; font-weight:600; letter-spacing:.06em; color:var(--mute); transition:background .18s var(--ease),color .18s var(--ease)} #mab .mab-views button[aria-pressed="true"]{background:var(--navy); color:var(--ivory)} #mab .mab-views button:active{transform:scale(.97)} #mab .mab-filters+.mab-indexbar{margin-top:20px} #mab .mab-card .mab-go{display:inline-flex; align-items:center; gap:10px; margin-top:16px; font-size:13px; font-weight:600; color:var(--navy)} #mab .mab-card .mab-go s{display:block; width:18px; height:1px; background:currentColor; position:relative; transition:width .2s var(--ease)} #mab .mab-card .mab-go s::after{content:""; position:absolute; inset-inline-end:0; top:-3px; width:7px; height:7px; border-top:1px solid currentColor; border-inline-end:1px solid currentColor; transform:rotate(var(--r,-135deg))} #mab[dir="ltr"] .mab-card .mab-go s::after{--r:45deg} #mab .mab-card:hover .mab-go s{width:30px} #mab .mab-grid.mab-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))} @media (max-width:760px){ #mab .mab-grid.mab-grid-2{grid-template-columns:minmax(0,1fr)} } #mab .mab-pages{display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:6px; margin-top:clamp(32px,3.4vw,48px)} #mab .mab-pages[hidden]{display:none} #mab .mab-pages button{min-width:40px; height:40px; padding:0 12px; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--x-ink); font:inherit; font-variant-numeric:tabular-nums; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:background .16s,border-color .16s,color .16s} #mab .mab-pages button:hover:not([disabled]){border-color:var(--navy)} #mab .mab-pages button[aria-current="true"]{background:var(--navy); border-color:var(--navy); color:var(--ivory)} #mab .mab-pages button[disabled]{opacity:.35; cursor:default} #mab[dir="ltr"] .mab-pages svg{transform:scaleX(-1)} #mab .mab-grid.is-list .mab-go{grid-area:go; margin:0; justify-self:end} @media (max-width:820px){ #mab .mab-grid.is-list .mab-go{justify-self:start} } #mab .mab-phero-careers .mab-promise-wide{max-width:62ch; font-size:clamp(16px,1.35vw,20px); line-height:1.8} #mab .mab-careers{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(40px,6vw,96px); align-items:start} #mab .mab-careers .mab-lead{max-width:34ch; font-size:clamp(22px,2.3vw,32px); line-height:1.55} #mab .mab-roles{border-top:1px solid var(--line); counter-reset:r} #mab .mab-role{position:relative; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:20px; min-height:112px; padding-block:22px; border-bottom:1px solid var(--line); color:var(--navy); isolation:isolate} #mab .mab-role::before{content:""; position:absolute; inset:0 -16px; z-index:-1; border-radius:14px; background:var(--x-paper); opacity:0; transform:scaleY(.92); transition:opacity .2s var(--ease),transform .25s var(--ease)} #mab .mab-role:hover::before, #mab .mab-role:focus-visible::before{opacity:1; transform:none} #mab .mab-role-n{font-family:var(--mono); font-size:12px; color:var(--peach-d)} #mab .mab-role-t{display:flex; flex-direction:column; gap:4px} #mab .mab-role-t b{font-size:clamp(22px,2.2vw,30px); font-weight:500; letter-spacing:-.01em} #mab .mab-role-t small{font-size:13px; color:var(--mute)} #mab .mab-role-a{width:44px; height:44px; border-radius:50%; border:1px solid var(--line); position:relative; transition:background .2s var(--ease),border-color .2s var(--ease),transform .25s var(--ease)} #mab .mab-role-a::after{content:""; position:absolute; inset:0; margin:auto; width:9px; height:9px; border-top:1.5px solid currentColor; border-left:1.5px solid currentColor; transform:translateX(var(--tx,2px)) rotate(var(--r,-45deg))} #mab[dir="ltr"] .mab-role-a::after{--r:135deg; --tx:-2px} #mab .mab-role:hover .mab-role-a{background:var(--peach); border-color:var(--peach); transform:translateX(var(--mv,-4px))} #mab[dir="ltr"] .mab-role:hover .mab-role-a{--mv:4px} #mab .mab-role:active .mab-role-a{transform:scale(.94)} #mab .mab-apply{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr); gap:clamp(32px,5vw,80px); align-items:start} #mab .mab-apply-side{position:sticky; top:110px} #mab .mab-steps{margin-top:28px; display:grid; gap:12px} #mab .mab-steps li{display:flex; align-items:center; gap:14px; font-size:15px; color:var(--navy)} #mab .mab-steps b{display:grid; place-items:center; width:30px; height:30px; border-radius:50%; border:1px solid var(--line); font-family:var(--mono); font-size:12px; font-weight:500} #mab .mab-steps a{border-bottom:1px solid var(--peach)} #mab .mab-formframe{position:relative; border-radius:18px; overflow:hidden; background:#fff; border:1px solid var(--line); box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 30px 60px -40px rgba(27,38,52,.35)} #mab .mab-formframe iframe{display:block; width:100%; border:0; background:transparent; opacity:0; transition:opacity .4s var(--ease)} #mab .mab-formframe.is-ready iframe{opacity:1} #mab .mab-formframe-load{position:absolute; inset:0; padding:40px; display:grid; align-content:start; gap:16px; pointer-events:none; transition:opacity .3s var(--ease)} #mab .mab-formframe.is-ready .mab-formframe-load{opacity:0} #mab .mab-formframe-load i{display:block; height:46px; border-radius:10px; background:linear-gradient(90deg,var(--x-stone),var(--x-paper),var(--x-stone)); background-size:200% 100%; animation:mabShimmer 1.4s linear infinite} #mab .mab-formframe-load i:first-child{width:55%; height:22px} #mab .mab-center{text-align:center; display:flex; flex-direction:column; align-items:center} #mab .mab-center .mab-h2, #mab .mab-center .mab-note{margin-inline:auto} #mab .mab-upload .mab-h2{color:var(--ivory)} #mab .mab-upload .mab-note{color:var(--mute-l); max-width:62ch} @media (max-width:960px){ #mab .mab-careers, #mab .mab-apply{grid-template-columns:1fr} #mab .mab-apply-side{position:static} } #mab .cx-sec{padding-top:clamp(40px,5vw,72px)} #mab .cx{--cx-1:var(--navy); --cx-2:#5B4B8A; --cx-3:#3E7A63; --cx-4:#3D4E8F; max-width:980px; margin-inline:auto; padding-inline:var(--pad); font-family:var(--ar); line-height:1.6} #mab .cx-card{background:#fff; border:1px solid var(--line); border-radius:18px; padding:clamp(18px,2.4vw,28px); margin-bottom:16px; box-shadow:0 1px 2px rgba(27,38,52,.04)} #mab .cx-card-lg{max-width:520px; margin-inline:auto; padding:clamp(24px,4vw,40px)} #mab .cx-head-c{text-align:center; margin-bottom:24px} #mab .cx-title{font-size:clamp(22px,2.4vw,28px); font-weight:600; color:var(--navy); letter-spacing:-.01em} #mab .cx-title-sm{font-size:19px} #mab .cx-sub{margin-top:4px; font-size:13px; color:var(--mute)} #mab .cx-stack{display:grid; gap:16px} #mab .cx-f label, #mab .cx-box legend{display:block; margin-bottom:6px; font-size:12px; font-weight:600; color:var(--mute)} #mab .cx input[type=text], #mab .cx input[type=tel], #mab .cx input[type=email], #mab .cx input[type=date], #mab .cx input[type=number], #mab .cx select{width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--x-paper); font:inherit; font-size:15px; color:var(--x-ink); transition:border-color .16s var(--ease),box-shadow .16s var(--ease),background .16s var(--ease); -moz-appearance:textfield} #mab .cx input::-webkit-inner-spin-button, #mab .cx input::-webkit-outer-spin-button{-webkit-appearance:none; margin:0} #mab .cx input:focus, #mab .cx select:focus{outline:0; border-color:var(--peach); background:#fff; box-shadow:0 0 0 4px rgba(194,112,79,.18)} #mab .cx .cx-big{text-align:center; font-size:18px; font-weight:600; font-variant-numeric:tabular-nums} #mab .cx-err{margin-top:6px; font-size:12px; color:#B4462E} #mab .cx-alert{margin-top:14px; padding:10px 14px; border-radius:12px; background:#FBEDE8; border:1px solid #F1C4B6; font-size:13px; color:#9A3B25} #mab .cx-btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:0 22px; border:0; border-radius:999px; background:var(--navy); color:var(--ivory); font-weight:600; font-size:15px; transition:background .18s var(--ease),transform .12s var(--ease),box-shadow .18s var(--ease)} #mab .cx-btn:hover{background:var(--navy-2); box-shadow:0 10px 24px -14px rgba(27,38,52,.6)} #mab .cx-btn:active, #mab .cx-ghost:active, #mab .sel-btn:active, #mab .pkg-card:active, #mab .cx-tab:active{transform:scale(.98)} #mab .cx-btn s{font-size:16px; line-height:1} #mab .cx-btn-full{width:100%; margin-top:20px} #mab .cx-btn-lg{min-height:56px; font-size:16px; margin:4px 0 16px} #mab .cx-btn-sm{min-height:44px; padding:0 18px; font-size:14px} #mab .cx-btn-2{background:var(--cx-2)} #mab .cx-btn-2:hover{background:#4C3E78} #mab .cx-btn-3{background:var(--cx-3)} #mab .cx-btn-3:hover{background:#336954} #mab .cx-btn-4{background:var(--cx-4)} #mab .cx-btn-4:hover{background:#33427C} #mab .cx-ghost{min-height:38px; padding:0 14px; border:1px solid var(--line); border-radius:10px; background:var(--x-paper); font-size:13px; font-weight:600; color:var(--navy); transition:background .16s var(--ease)} #mab .cx-ghost:hover{background:var(--x-stone)} #mab .cx-top-row{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:16px} #mab .cx-search{display:flex; gap:8px} #mab .cx-search input{flex:1; text-align:center; font-weight:600} #mab .cx-status{margin-top:10px; font-size:13px; text-align:center; color:var(--mute)} #mab .cx-status[data-tone=ok]{color:#2F7A55} #mab .cx-status[data-tone=err]{color:#B4462E} #mab .cx-tabs{position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:4px; padding:5px; margin:20px 0; border-radius:16px; background:var(--x-stone)} #mab .cx-tab{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:2px; min-height:56px; padding:8px 6px; border:0; border-radius:12px; background:transparent; transition:color .2s var(--ease)} #mab .cx-tab small{font-size:11px; color:var(--mute)} #mab .cx-tab b{font-size:13px; font-weight:600; color:var(--navy); text-align:center; line-height:1.3} #mab .cx-tab-ink{position:absolute; z-index:0; top:5px; bottom:5px; width:calc((100% - 10px - 12px)/4); inset-inline-start:calc(5px + var(--tab,0) * ((100% - 10px - 12px)/4 + 4px)); border-radius:12px; background:#fff; box-shadow:0 1px 3px rgba(27,38,52,.12); transition:inset-inline-start .32s var(--ease)} @media (max-width:560px){ #mab .cx-tabs{grid-template-columns:repeat(2,1fr)} #mab .cx-tab-ink{display:none} #mab .cx-tab.is-on{background:#fff; box-shadow:0 1px 3px rgba(27,38,52,.12)} #mab .cx-search{flex-direction:column} #mab .cx-search input{flex:none} #mab .cx-search input::placeholder{font-size:14px} } @media (max-width:359px){ #mab .cx-search input{padding-inline:8px} #mab .cx-search input::placeholder{font-size:12px} } #mab .cx-phase{animation:cxIn .35s var(--ease)} #mab .cx-h{position:relative; padding-inline-start:14px; font-size:15px; font-weight:600; color:var(--navy); margin-bottom:14px} #mab .cx-h::before{content:""; position:absolute; inset-inline-start:0; top:.2em; bottom:.2em; width:3px; border-radius:3px; background:var(--peach)} #mab .cx-h-ok::before{background:#3E7A63} #mab .cx-h4{margin:22px 0 10px; font-size:13px; font-weight:600; color:var(--mute)} #mab .cx-h-row{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px} #mab .cx-h-row .cx-h{margin:0} #mab .cx-link{font-size:13px; font-weight:600; color:var(--peach-d); border-bottom:1px solid transparent; transition:border-color .16s} #mab .cx-link:hover{border-color:currentColor} #mab .cx-choices{display:grid; grid-template-columns:repeat(4,1fr); gap:8px} #mab .sel-btn{min-height:50px; padding:8px; border:1.5px solid var(--line); border-radius:12px; background:#fff; font-size:14px; color:var(--x-ink); transition:border-color .16s var(--ease),background .16s var(--ease),color .16s var(--ease),transform .12s var(--ease)} #mab .sel-btn:hover{border-color:rgba(41,55,74,.35)} #mab .sel-btn.active{border-color:var(--navy); background:var(--navy); color:var(--ivory); font-weight:600} #mab .cx-pkgs{display:grid; grid-template-columns:repeat(3,1fr); gap:10px} #mab .pkg-card{display:flex; flex-direction:column; align-items:flex-start; gap:10px; min-height:96px; padding:16px; border:1.5px solid var(--line); border-radius:14px; background:#fff; text-align:start; transition:border-color .18s var(--ease),background .18s var(--ease),transform .12s var(--ease)} #mab .pkg-card i{display:grid; place-items:center; width:28px; height:28px; border-radius:50%; font-size:12px; font-weight:700; color:#fff; background:#2563eb} #mab .pkg-card b{font-size:15px; color:var(--navy)} #mab .pkg-card.sel-basic{border-color:#2563eb; background:#eff6ff} #mab .pkg-card.sel-dev{border-color:#7c3aed; background:#f5f3ff} #mab .pkg-card.sel-premium{border-color:#b7791f; background:#fffbeb} #mab .cx-grid2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px} #mab .cx-grid3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px} #mab .cx-grid4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px} #mab .cx-grid2+.cx-grid2, #mab .cx-grid3+.cx-grid2, #mab .cx-pill+.cx-grid4{margin-top:12px} #mab .cx-pill{margin:12px 0; padding:10px 14px; border-radius:12px; background:var(--x-paper); border:1px solid var(--line); text-align:center; font-size:13px; color:var(--mute)} #mab .cx-pill b{color:var(--navy); font-variant-numeric:tabular-nums} #mab .cx-pill-sm{margin:8px 0 0; padding:8px 12px; font-size:12px} #mab .cx-box{margin:14px 0 0; padding:14px; border:1px solid var(--line); border-radius:14px; background:var(--x-paper)} #mab .cx-box legend{padding:0 6px; margin:0} #mab .cx-box-t{font-size:12px; font-weight:600; color:var(--mute); margin-bottom:8px} #mab .cx-checks{display:grid; grid-template-columns:repeat(4,auto); justify-content:start; gap:10px 24px} #mab .cx-checks-2{grid-template-columns:repeat(2,auto)} #mab .cx-checks label, #mab .cx-check-row{display:inline-flex; align-items:center; gap:8px; min-height:36px; font-size:14px; cursor:pointer} #mab .cx-checks input, #mab .cx-check-row input{width:18px; height:18px; accent-color:var(--navy)} #mab .cx-check-row{align-self:end; min-height:44px} #mab .cx-rows{display:grid; gap:6px} #mab .cx-kv{display:flex; justify-content:space-between; gap:12px; font-size:13px} #mab .cx-kv span{color:var(--mute)} #mab .cx-kv b{font-weight:600; font-variant-numeric:tabular-nums} #mab .cx-total{display:flex; justify-content:space-between; margin-top:8px; padding-top:8px; border-top:1px solid var(--line); font-weight:700; font-size:14px} #mab .cx-total b{color:var(--navy)} #mab .cx-mt{margin-top:16px} #mab .cx-scroll{overflow-x:auto; margin-inline:-4px; padding-inline:4px; -webkit-overflow-scrolling:touch; scrollbar-width:thin} #mab .cx-table{width:100%; border-collapse:separate; border-spacing:0; font-size:13px} #mab .cx-table-wide{min-width:960px} #mab .cx-table th{position:sticky; top:0; padding:10px 8px; background:var(--navy); color:var(--ivory); font-size:12px; font-weight:600; text-align:center; white-space:nowrap} #mab .cx-table thead tr:first-child th:first-child{border-start-start-radius:10px} #mab .cx-table thead tr:first-child th:last-child{border-start-end-radius:10px} #mab .cx-table th.cx-th-hi{background:var(--peach-d)} #mab .cx-table th.cx-g1{background:#2C4C73} #mab .cx-table th.cx-g2{background:#2F6352} #mab .cx-table th.cx-g3{background:#8A6A2A} #mab .cx-table td{padding:6px; border-bottom:1px solid var(--line); text-align:center; font-variant-numeric:tabular-nums} #mab .cx-table td:first-child{position:sticky; inset-inline-start:0; z-index:1; background:#fff; text-align:start; font-weight:500; white-space:nowrap} #mab .cx-table tbody tr:hover td{background:var(--x-paper)} #mab .cx-table td.cx-g1{background:rgba(44,76,115,.05)} #mab .cx-table td.cx-g2{background:rgba(47,99,82,.05)} #mab .cx-table td.cx-g3{background:rgba(138,106,42,.06)} #mab .cx-table input, #mab .cx-table select{min-height:36px!important; padding:6px!important; border-radius:8px!important; text-align:center; font-size:13px!important} #mab .cx-table-dense input{min-width:64px} #mab .cx-table .cx-coef{background:#EEF3F8} #mab .cx-table .cx-unit{color:var(--mute); font-size:12px} #mab .cx-table .cx-out{color:var(--navy); font-weight:600} #mab .cx-table .cx-strong{color:#9A3B25} #mab .cx-table tfoot td{background:var(--x-stone)!important; font-weight:700; color:var(--navy); border-bottom:0} #mab .cx-subtabs{display:flex; gap:6px; overflow-x:auto; margin-bottom:16px; padding-bottom:2px} #mab .cx-subtabs button{flex:none; min-height:38px; padding:0 14px; border:1px solid var(--line); border-radius:999px; background:#fff; font-size:13px; font-weight:600; color:var(--mute); transition:background .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease)} #mab .cx-subtabs button.is-on{background:var(--navy); border-color:var(--navy); color:var(--ivory)} #mab .cx-result{border-color:rgba(41,55,74,.2)} #mab .cx-pop{animation:cxPop .45s var(--ease)} #mab .cx-hero-num{display:flex; flex-direction:column; align-items:center; gap:2px; margin-bottom:12px; padding:20px; border-radius:16px; background:linear-gradient(180deg,#F1F5FA,#fff); border:1px solid rgba(41,55,74,.12)} #mab .cx-hero-num b{font-size:clamp(36px,5vw,48px); font-weight:600; letter-spacing:-.02em; color:var(--navy); font-variant-numeric:tabular-nums; line-height:1.15} #mab .cx-hero-num small, #mab .cx-stat small, #mab .cx-budget small, #mab .cx-ref small{font-size:12px; color:var(--mute)} #mab .cx-v2{background:linear-gradient(180deg,#F4F1FA,#fff)} #mab .cx-v2 b{color:var(--cx-2)} #mab .cx-v4{background:linear-gradient(180deg,#EEF0F9,#fff)} #mab .cx-v4 b{color:var(--cx-4)} #mab .cx-stat{display:flex; flex-direction:column; align-items:center; gap:2px; padding:14px 10px; border-radius:14px; background:var(--x-paper); border:1px solid var(--line); text-align:center} #mab .cx-stat b{font-size:clamp(17px,2vw,21px); font-weight:600; color:var(--x-ink); font-variant-numeric:tabular-nums} #mab .cx-stat-strong{background:#fff; border-color:rgba(41,55,74,.22)} #mab .cx-stat-strong b{color:var(--navy)} #mab .cx-stat[data-pkg]{background:var(--pkb); border:2px solid var(--pk)} #mab .cx-stat[data-pkg] b{color:var(--pk)} #mab .cx-budget{display:flex; flex-direction:column; align-items:center; gap:4px; margin-top:12px; padding:20px; border-radius:16px; border:2px solid var(--pk,var(--navy)); background:var(--pkb,var(--x-paper)); text-align:center} #mab .cx-budget b{font-size:clamp(26px,3.6vw,34px); font-weight:700; color:var(--pk,var(--navy)); font-variant-numeric:tabular-nums} #mab .cx-save{margin-top:12px; text-align:center; font-size:12px; color:var(--mute); min-height:1em} #mab .cx-ref{display:flex; flex-direction:column; align-items:center; gap:4px; margin-top:12px; padding:14px; border-radius:14px; background:#F1F5FA; border:1px dashed rgba(41,55,74,.3)} #mab .cx-ref b{font-size:30px; font-weight:700; color:var(--navy); font-variant-numeric:tabular-nums; direction:ltr} #mab .cx-details{display:grid; gap:6px; margin-top:16px} #mab .cx-detail{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:#fff; font-size:13px; transition:background .16s var(--ease)} #mab .cx-detail:hover{background:var(--x-paper)} #mab .cx-detail>div{display:flex; gap:18px} #mab .cx-detail b{font-weight:700; font-variant-numeric:tabular-nums} #mab .cx-detail small{font-size:11px; font-weight:400; color:var(--mute)} #mab .cx-lo{color:#1d4ed8} #mab .cx-hi{color:#2F7A55} #mab .cx-rep-head{display:grid; grid-template-columns:1fr auto; gap:16px; padding:clamp(20px,3vw,28px); margin-bottom:16px; border-radius:18px; background:var(--navy); color:var(--ivory)} #mab .cx-rep-head h2{font-size:22px; font-weight:600} #mab .cx-rep-head p{margin-top:4px; color:#B9C6D4; font-size:14px} #mab .cx-rep-ref{text-align:end} #mab .cx-rep-ref small{font-size:12px; color:#B9C6D4} #mab .cx-rep-ref b{display:block; font-size:28px; font-weight:700} #mab .cx-rep-head dl{grid-column:1/-1; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding-top:14px; border-top:1px solid rgba(244,241,236,.16)} #mab .cx-rep-head dt{font-size:11px; color:#B9C6D4} #mab .cx-rep-head dd{font-weight:600} #mab .cx-rep-foot{display:flex; flex-direction:column; align-items:center; gap:4px; padding:16px; font-size:12px; color:var(--mute)} #mab .cx-rep-foot .cx-ghost{margin-top:10px} @media (max-width:720px){ #mab .cx-choices, #mab .cx-grid4{grid-template-columns:repeat(2,minmax(0,1fr))} #mab .cx-grid3{grid-template-columns:repeat(2,minmax(0,1fr))} #mab .cx-grid3>:first-child:nth-last-child(3){grid-column:1/-1} #mab .cx-checks{grid-template-columns:repeat(2,auto)} #mab .cx-pkgs{gap:8px} #mab .pkg-card{padding:12px; min-height:84px} #mab .cx-rep-head dl{grid-template-columns:1fr 1fr} #mab .cx-detail{flex-direction:column; align-items:flex-start} } @media print{ #mab .mab-noprint, #mab .phase-tabs, #mab .cx-search, #mab .cx-btn, #mab .cx-ghost{display:none!important} #mab .cx-card{box-shadow:none; break-inside:avoid} } @media (prefers-reduced-motion:reduce){ #mab .cx-phase, #mab .cx-pop, #mab .mab-formframe-load i{animation:none} #mab .cx-tab-ink, #mab .mab-role::before, #mab .mab-role-a{transition:none} } #mab .mab-noimg:not(.mab-phero):not(.mab-hero):not(img){position:relative} #mab .mab-noimg:not(.mab-phero):not(.mab-hero):not(img)::after{content:"صورة قيد الإضافة · Image pending"; position:absolute; inset:auto 0 50%; transform:translateY(50%); text-align:center; font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:rgba(244,241,236,.55); pointer-events:none} #mab .mab-apply-solo{max-width:880px} #mab .mab-note.mab-strong{font-weight:700; color:var(--navy)} #mab .mab-formframe-native{padding:clamp(22px,4vw,44px); overflow:visible} #mab .mab-nform-desc{margin:0 0 26px; color:var(--mute); font-size:15px; line-height:1.8} #mab .mab-nform{display:grid; gap:22px} #mab .mab-nform-row{display:grid; grid-template-columns:repeat(var(--n,1),minmax(0,1fr)); gap:22px} #mab .mab-nfield{display:grid; gap:8px; align-content:start; min-width:0} #mab .mab-nfield fieldset{border:0; margin:0; padding:0; min-width:0} #mab .mab-nlabel{display:block; font-size:15px; font-weight:600; color:var(--x-ink); line-height:1.6; padding:0} #mab .mab-nlabel i, #mab .mab-ncheck i{color:var(--peach-d); font-style:normal} #mab .mab-nhelp{color:var(--mute); font-size:13px; line-height:1.6} #mab .mab-nfield input:not([type=radio]):not([type=checkbox]), #mab .mab-nfield select, #mab .mab-nfield textarea{width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:var(--x-paper); color:var(--x-ink); font:inherit; font-size:16px; line-height:1.5; transition:border-color .18s,box-shadow .18s} #mab .mab-nfield textarea{resize:vertical; min-height:110px} #mab .mab-nfield input[dir=ltr]{text-align:right} #mab .mab-nfield input:focus, #mab .mab-nfield select:focus, #mab .mab-nfield textarea:focus{outline:0; border-color:var(--peach); box-shadow:0 0 0 3px rgba(194,112,79,.22)} #mab .mab-nchoices{display:flex; flex-wrap:wrap; gap:8px 10px; margin-top:8px} #mab .mab-nchoice{display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border:1px solid var(--line); border-radius:999px; background:var(--x-paper); font-size:14px; color:var(--x-ink); cursor:pointer; line-height:1.4} #mab .mab-nchoice input{accent-color:var(--peach-d); width:16px; height:16px; margin:0} #mab .mab-nchoice:has(input:checked){border-color:var(--peach-d); background:#FCEFEA} #mab .mab-nchoice:has(input:focus-visible){box-shadow:0 0 0 3px rgba(194,112,79,.3)} #mab .mab-ncheck{border-radius:12px; align-items:flex-start} #mab .mab-nfixed{padding:12px 14px; border:1px dashed var(--line); border-radius:10px; color:var(--mute); background:#fff} #mab .mab-nerr{color:#B4432C; font-size:13px; min-height:0} #mab .mab-nerr:empty{display:none} #mab .mab-nfield.is-error input, #mab .mab-nfield.is-error select, #mab .mab-nfield.is-error textarea, #mab .mab-nfield.is-error .mab-nchoice{border-color:#D9775F} #mab .mab-nform-alert{margin:0 0 20px; padding:12px 16px; border-radius:10px; background:#FCEFEA; color:#8A3320; font-size:14px} #mab .mab-nsubmit{justify-self:start; margin-top:6px; cursor:pointer} #mab .mab-nform-done{display:grid; gap:10px; justify-items:start; padding:clamp(10px,2vw,20px) 0} #mab .mab-nform-done b{font-size:clamp(20px,2.2vw,26px); color:var(--navy)} #mab .mab-nform-done p{margin:0; color:var(--mute)} #mab .mab-nform-again{color:var(--peach-d); font-weight:600; font-size:14px} @media (max-width:640px){ #mab .mab-nform-row{grid-template-columns:1fr} #mab .mab-formframe-native{padding:20px 16px} #mab .mab-nchoice{padding:8px 12px} } #mab .mab-upd{margin-top:30px} #mab .mab-upd-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:40px 24px} #mab .mab-upd-card{display:flex; flex-direction:column; gap:10px; color:inherit; text-decoration:none} #mab .mab-upd-card[hidden]{display:none} #mab .mab-upd-im{display:block; height:250px; border-radius:12px; overflow:hidden; background:var(--x-paper)} #mab .mab-upd-im img{width:100%; height:100%; object-fit:contain} #mab .mab-upd-t{font-size:17px; line-height:1.5; color:var(--navy)} #mab .mab-upd-card:hover .mab-upd-t, #mab .mab-upd-card:focus-visible .mab-upd-t{color:var(--peach-d)} #mab .mab-upd-d{font-size:14px; color:var(--mute); unicode-bidi:isolate; align-self:flex-start} #mab .mab-upd-pages{display:flex; justify-content:center; align-items:center; gap:6px; margin-top:32px} #mab .mab-upd-pages[hidden]{display:none} #mab .mab-upd-pages button{min-width:38px; height:38px; padding:0 10px; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--x-ink); font:inherit; cursor:pointer; display:inline-flex; align-items:center; justify-content:center} #mab .mab-upd-pages button[aria-current="true"]{background:var(--navy); border-color:var(--navy); color:var(--ivory)} #mab .mab-upd + .mab-pgal{margin-top:clamp(40px,5vw,64px)} #mab .mab-pgal{margin-top:30px} #mab .mab-pgal--grid .mab-pgal-it img{width:100%; aspect-ratio:1/1; object-fit:cover} #mab .mab-pgal--masonry .mab-pgal-it{break-inside:avoid; margin-bottom:var(--gap,16px)} #mab .mab-pgal--masonry .mab-pgal-it img{width:100%; height:auto} #mab .mab-pgal-it{margin:0; border-radius:12px; overflow:hidden; background:var(--navy-2)} #mab .mab-pgal-it a{display:block; cursor:zoom-in} #mab .mab-pgal-it img{display:block; transition:transform .4s var(--ease)} #mab .mab-pgal-it a:hover img{transform:scale(1.04)} #mab .mab-updtext{margin:0 auto clamp(28px,3.4vw,44px)} #mab .mab-updtext p{margin-top:0} #mab .mab-updimgs{display:grid; grid-template-columns:repeat(var(--n,3),minmax(0,1fr)); gap:24px; max-width:calc(var(--n,3) * 420px); margin-inline:auto} #mab .mab-updimgs figure{margin:0; border-radius:12px; overflow:hidden; background:var(--x-stone)} #mab .mab-updimgs img{display:block; width:100%; height:100%; aspect-ratio:400/368; object-fit:cover} #mab .mab-lb{position:fixed; inset:0; z-index:1000; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; padding:56px 12px 16px; background:rgba(15,22,31,.97)} #mab .mab-lb[hidden]{display:none} #mab .mab-lb-fig{margin:0; min-width:0; display:grid; justify-items:center} #mab .mab-lb-fig img{max-width:100%; max-height:calc(100vh - 100px); max-height:calc(100dvh - 100px); object-fit:contain} #mab .mab-lb-close, #mab .mab-lb-nav{border:0; border-radius:999px; background:rgba(244,241,236,.12); color:var(--ivory); font:inherit; line-height:1; cursor:pointer} #mab .mab-lb-close:hover, #mab .mab-lb-nav:hover{background:rgba(244,241,236,.24)} #mab .mab-lb-close:focus-visible, #mab .mab-lb-nav:focus-visible{outline:2px solid var(--peach); outline-offset:2px} #mab .mab-lb-close{position:absolute; top:10px; inset-inline-end:12px; width:44px; height:44px; font-size:30px} #mab .mab-lb-nav{width:48px; height:48px; font-size:34px} #mab .mab-lb-nav[hidden]{visibility:hidden; display:block} html.mab-lb-on{overflow:hidden} @media (max-width:1000px){ #mab .mab-upd-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:640px){ #mab .mab-upd-grid{grid-template-columns:1fr; gap:28px} #mab .mab-pgal--masonry .mab-pgal-it{margin-bottom:8px} #mab .mab-updimgs{grid-template-columns:1fr; gap:16px} #mab .mab-updimgs img{aspect-ratio:328/264} #mab .mab-lb{grid-template-columns:1fr; padding:56px 8px 72px} #mab .mab-lb-nav{position:absolute; bottom:14px; width:44px; height:44px} #mab .mab-lb-prev{inset-inline-start:12px} #mab .mab-lb-next{inset-inline-end:12px} #mab .mab-lb-fig img{max-height:calc(100vh - 140px); max-height:calc(100dvh - 140px)} } #mab .mab-pvideo .mab-pvideo-text{margin-top:clamp(18px,2.4vw,28px);max-width:62ch;color:#EDEFF2} #mab .mab-pvideo-frame{position:relative;margin-top:clamp(22px,3vw,40px);width:100%;max-width:1100px;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#0d141c;box-shadow:0 18px 50px rgba(0,0,0,.35)} #mab .mab-pvideo-frame iframe, #mab .mab-pvideo-frame video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#000} #mab .mab-pvideo-frame video{object-fit:contain} @media (max-width:640px){ #mab .mab-pvideo-frame{border-radius:10px;margin-inline:-4px;width:calc(100% + 8px)} } #mab .cx-tabs.cx-tabs-2{grid-template-columns:repeat(2,1fr)} #mab .cx-tabs.cx-tabs-2 .cx-tab-ink{width:calc((100% - 10px - 4px)/2); inset-inline-start:calc(5px + var(--tab,0) * ((100% - 10px - 4px)/2 + 4px))} #mab .mab-rev footer .mab-revg{align-self:flex-start; display:inline-flex; align-items:center; gap:6px; margin-top:10px; font-size:13px; font-weight:600; color:var(--navy); text-decoration:underline; text-underline-offset:3px} #mab .mab-rev footer .mab-revg:hover{color:var(--peach-d)} #mab .mab-pextra .mab-eye-gap{margin-top:clamp(48px,5vw,72px)} #mab .mab-prev{margin:clamp(24px,3vw,36px) 0 0; max-width:880px; padding:clamp(26px,3vw,40px); border-radius:18px; background:var(--ivory); border-inline-start:3px solid var(--peach)} #mab .mab-prev blockquote{margin:0} #mab .mab-prev blockquote p{font-size:clamp(17px,1.5vw,21px); line-height:1.8; font-weight:500} #mab .mab-prev figcaption{display:flex; flex-direction:column; gap:4px; margin-top:20px} #mab .mab-prev figcaption b{font-size:16px} #mab .mab-prev figcaption span{font-size:13px; color:var(--mute)} #mab .mab-tts{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:clamp(18px,2vw,28px); margin-top:clamp(24px,3vw,36px)} #mab .mab-tt{margin:0} #mab .mab-tt-frame{position:relative; aspect-ratio:9/16; max-height:640px; border-radius:14px; overflow:hidden; background:var(--navy-d)} #mab .mab-tt-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0} #mab .mab-tt figcaption{margin-top:10px; font-size:14px; color:var(--mute)} #mab .mab-pkglink{margin:0} #mab .mab-pkglink .mab-btn{margin-top:26px} #mab .mab-pkg-badges{display:flex; flex-wrap:wrap; gap:10px} #mab .mab-pkg-b{padding:7px 20px; border-radius:999px; font-size:14px; font-weight:700; color:#fff} #mab .mab-pkg-b.mab-pkg-basic{background:#2563eb} #mab .mab-pkg-b.mab-pkg-dev{background:#7c3aed} #mab .mab-pkg-b.mab-pkg-prem{background:#b45309} #mab .mab-pkg-wrap{margin-top:clamp(24px,3vw,36px); overflow-x:auto; border-radius:16px; border:1px solid var(--line); background:#fff} #mab .mab-pkg-t{width:100%; border-collapse:collapse; font-size:14px; line-height:1.7} #mab .mab-pkg-t thead th{padding:14px 16px; color:#fff; font-weight:700; text-align:center; background:var(--navy-d)} #mab .mab-pkg-t thead th:first-child{text-align:start} #mab .mab-pkg-t thead th.mab-pkg-basic{background:#2563eb} #mab .mab-pkg-t thead th.mab-pkg-dev{background:#7c3aed} #mab .mab-pkg-t thead th.mab-pkg-prem{background:#b45309} #mab .mab-pkg-t tbody th{padding:12px 16px; text-align:start; font-weight:600; color:var(--navy); vertical-align:top; min-width:180px} #mab .mab-pkg-t tbody td{padding:12px 16px; text-align:center; vertical-align:top; min-width:170px} #mab .mab-pkg-t tbody td.mab-pkg-basic{color:#1e40af} #mab .mab-pkg-t tbody td.mab-pkg-dev{color:#5b21b6} #mab .mab-pkg-t tbody td.mab-pkg-prem{color:#92400e} #mab .mab-pkg-t tbody tr{border-top:1px solid var(--line)} #mab .mab-pkg-t tbody tr:nth-child(even){background:#f8fafc} #mab .mab-pkg-note{margin-top:18px; font-size:13px; color:var(--mute)} @media (max-width:760px){ #mab .mab-pkg-wrap{overflow:visible; border:0; background:transparent} #mab .mab-pkg-t, #mab .mab-pkg-t tbody{display:block} #mab .mab-pkg-t thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap} #mab .mab-pkg-t tbody tr{display:block; margin-bottom:14px; border:1px solid var(--line); border-radius:14px; background:#fff; overflow:hidden} #mab .mab-pkg-t tbody tr:nth-child(even){background:#fff} #mab .mab-pkg-t tbody th{display:block; min-width:0; padding:12px 16px; background:var(--navy-d); color:#fff} #mab .mab-pkg-t tbody td{display:grid; grid-template-columns:minmax(92px,32%) 1fr; gap:12px; min-width:0; padding:10px 16px; text-align:start; border-top:1px solid var(--line)} #mab .mab-pkg-t tbody td::before{content:attr(data-label); font-weight:700; font-size:13px} #mab .mab-pkg-t tbody td[data-empty]::after{content:"—"; color:var(--mute)} } @keyframes mabShimmer{to{background-position:-200% 0}} @keyframes cxIn{from{opacity:0; transform:translateY(8px)}} @keyframes cxPop{from{opacity:0; transform:translateY(12px) scale(.99)}} /* ═══ States set by the site script ═══ */ /* Journal cards: script.js marks the open card with .is-open (the reference used data-open="1"). Same look. */ #mab .mab-bcard.is-open .mab-bmore s{transform:rotate(180deg)} #mab .mab-bcard.is-open .mab-bopen{display:none} #mab .mab-bcard.is-open .mab-bclose{display:inline} #mab .mab-bcard.is-open .mab-bbody{grid-template-rows:1fr} #mab .mab-bcard.is-open{grid-column:1 / -1;justify-self:center;width:min(960px,100%); padding-block:clamp(14px,1.6vw,24px);border-block:1px solid var(--hair)} #mab .mab-bcard.is-open .mab-bim{aspect-ratio:16/9;max-width:none;border-radius:clamp(14px,1.6vw,22px)} #mab .mab-bcard.is-open .mab-btease{display:none} #mab .mab-bcard.is-open h3{font-size:clamp(20px,2.4vw,30px);margin-top:12px} #mab .mab-bcard.is-open .mab-article{max-width:none} #mab .mab-dark .mab-bcard.is-open{border-color:var(--hair-l)} /* Projects index, list view (.is-list on the grid): one row per project, reference hairlines */ #mab .mab-grid.is-list{grid-template-columns:1fr;gap:0;border-top:1px solid var(--hair)} #mab .mab-grid.is-list .mab-card{display:grid;grid-template-columns:minmax(150px,220px) 1fr auto; grid-template-areas:"im h dl" "im st go";align-items:center;gap:4px clamp(18px,3vw,40px); padding-block:20px;border-bottom:1px solid var(--hair)} #mab .mab-grid.is-list .mab-card[hidden]{display:none} #mab .mab-grid.is-list .mab-im{grid-area:im;aspect-ratio:16/10} #mab .mab-grid.is-list h3{grid-area:h;margin:0} #mab .mab-grid.is-list .mab-st{grid-area:st;margin:0} #mab .mab-grid.is-list dl{grid-area:dl;margin:0;border:0;display:grid; grid-template-columns:repeat(3,auto);gap:0 clamp(16px,2vw,28px)} #mab .mab-grid.is-list dl>div{border:0;padding:0;flex-direction:column;gap:2px} @media (max-width:820px){ #mab .mab-grid.is-list .mab-card{grid-template-columns:120px 1fr;grid-template-areas:"im h" "im st" "dl dl" "go go"} #mab .mab-grid.is-list dl{grid-template-columns:repeat(2,auto);margin-top:12px} } /* ═══ 2026-11-08 changes ═══ */ /* «تصفّح»: written across, the moving line under it. Vertical writing split the Arabic letters, and letter spacing breaks Arabic joining. */ #mab .mab-scroll{writing-mode:horizontal-tb;flex-direction:column-reverse;align-items:center;gap:12px} #mab[data-lang="ar"] .mab-scroll{letter-spacing:0;font-size:13px} /* Menu dropdowns stay open while the pointer crosses the gap between the item and the list */ #mab .mab-nvmain .mab-nvd::before{content:"";position:absolute;inset-inline:0;bottom:100%;height:16px} /* The whole project card opens the project (the title link covers the card) */ #mab .mab-card,#mab .mab-cardx{position:relative} #mab .mab-cardlink::after{content:"";position:absolute;inset:0;z-index:1} #mab .mab-cardlink:focus-visible{outline:none} #mab .mab-cardlink:focus-visible::after{outline:2px solid var(--accent);outline-offset:4px;border-radius:16px} #mab .mab-card:hover h3 a,#mab .mab-cardx:hover h3 a{color:var(--accent)} /* Footer: white band — social icons on one side, e-mail and phone on the other (as on the original site) */ #mab .mab-foot.mab-foot-w{background:#fff;color:#111;padding-block:clamp(26px,3vw,40px); border-top:1px solid var(--hair);font-size:inherit} #mab .mab-fw{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap; gap:18px clamp(24px,4vw,64px);padding-inline-start:calc(var(--pad) + 96px)} #mab .mab-fw-soc{display:flex;align-items:center;gap:clamp(14px,1.4vw,20px)} #mab .mab-fw-soc a{display:block;color:#111;transition:color .3s,transform .3s var(--ease)} #mab .mab-fw-soc a:hover{color:var(--accent);transform:translateY(-2px)} #mab .mab-fw-soc svg{display:block;width:26px;height:26px;fill:currentColor} #mab .mab-fw-contact{display:flex;flex-wrap:wrap;align-items:center;gap:10px clamp(24px,3.6vw,56px); font-size:clamp(16px,1.45vw,21px);font-weight:400} #mab .mab-fw-contact a{color:#111;transition:color .3s} #mab .mab-fw-contact a:hover{color:var(--accent)} @media (max-width:720px){ #mab .mab-fw{flex-direction:column;justify-content:center;padding-inline:var(--pad);text-align:center} #mab .mab-fw-contact{flex-direction:column;gap:8px} #mab .mab-foot.mab-foot-w{padding-bottom:96px} /* room for the WhatsApp button */ } /* Round WhatsApp button, fixed in the corner on every page */ #mab .mab-wafloat{position:fixed;right:clamp(14px,1.8vw,26px);bottom:clamp(14px,1.8vw,26px);z-index:55; display:grid;place-items:center;width:clamp(56px,4.2vw,72px);height:clamp(56px,4.2vw,72px); border-radius:50%;background:#25D366;color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.22); transition:transform .3s var(--ease),box-shadow .3s} #mab .mab-wafloat:hover{transform:scale(1.06);box-shadow:0 10px 30px rgba(0,0,0,.28)} #mab .mab-wafloat svg{width:58%;height:58%;fill:currentColor} .mab-lb-on #mab .mab-wafloat{display:none} /* Article pictures under the text */ #mab .mab-artgal{margin-top:clamp(30px,4vw,54px)} /* Picture grids (project gallery, article pictures): the layout class is built in PHP (mab-pgal--grid / --masonry), so these rules were missed when v29 was assembled. Same as v28. */ #mab .mab-pgal--grid{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:var(--gap,16px)} #mab .mab-pgal--masonry{column-count:var(--cols,3);column-gap:var(--gap,16px)} @media (max-width:640px){ #mab .mab-pgal--grid{grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:8px} #mab .mab-pgal--masonry{column-gap:8px} } #mab .mab-pgal-it{background:var(--x-stone)} /* ═══ Project page — layout of the original site's project pages, with the site header ═══ */ /* Cover photo with the name, large and clear as on the current site's project pages */ #mab .mab-phero.mab-phero-prj{aspect-ratio:auto;height:calc(var(--winh,100vh) * .86);min-height:520px;max-height:none} #mab .mab-phero-prj>img{opacity:.8} #mab .mab-phero-prj::after{background:linear-gradient(to top,rgba(27,38,52,.88) 0%,rgba(27,38,52,.45) 34%, rgba(27,38,52,.08) 62%,rgba(27,38,52,.45) 100%)} #mab .mab-phero-prj h1{font-size:clamp(30px,5vw,72px);font-weight:400;max-width:none} #mab .mab-phero-prj .mab-promise{font-size:clamp(16px,1.6vw,22px);color:#E6EBF0} @media (max-width:560px){#mab .mab-phero.mab-phero-prj{height:auto;min-height:calc(var(--winh,100vh) * .7)}} /* Picture + name + data table */ #mab .mab-pintro{padding-block:clamp(44px,7vw,104px)} #mab .mab-pin{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(28px,7vw,120px);align-items:center} #mab .mab-pin-crumb{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--muted);margin-bottom:18px} #mab .mab-pin-crumb a:hover{color:var(--accent)} #mab .mab-pin-crumb i{font-style:normal;opacity:.5} #mab .mab-pin h2{font-size:clamp(24px,2.5vw,36px);font-weight:300;line-height:1.3;color:var(--text); letter-spacing:-.01em;margin:0 0 clamp(22px,2.6vw,34px)} #mab .mab-pin-table p{font-size:15px;line-height:1.9;color:var(--muted);margin:0 0 14px} #mab .mab-pin-table li,#mab .mab-pin-facts>div{display:flex;justify-content:space-between;align-items:baseline; gap:24px;padding-block:11px;font-size:14px;line-height:1.7;color:var(--muted)} #mab .mab-pin-table li strong,#mab .mab-pin-facts dt{flex:none;font-weight:400;color:var(--text)} #mab .mab-pin-table li{text-align:end} #mab .mab-pin-facts{margin:0} #mab .mab-pin-facts dd{margin:0;text-align:end} #mab .mab-pin-im{margin:0;overflow:hidden;background:var(--x-stone);aspect-ratio:11/8} #mab .mab-pin-im img{width:100%;height:100%;object-fit:cover;display:block} @media (max-width:900px){ #mab .mab-pin{grid-template-columns:1fr;gap:30px} #mab .mab-pin-im{order:-1} } /* Photos: white, no heading, square grid as on the original */ #mab .mab-pgalsec{padding-top:0} #mab .mab-pgalsec .mab-pgal{margin-top:0} #mab .mab-pgalsec .mab-pgal-it{border-radius:0} /* Contact band */ #mab .mab-pcta{background:#E5E5E5;text-align:center;padding-block:clamp(70px,9vw,140px)} #mab .mab-pcta h2{font-size:clamp(24px,2.6vw,38px);font-weight:300;line-height:1.3;color:#1d1e20;margin:0} #mab .mab-pcta p{max-width:44ch;margin:14px auto 0;font-size:clamp(15px,1.4vw,19px);line-height:1.7;color:#1d1e20} #mab .mab-pcta-btn{display:inline-block;margin-top:clamp(26px,3vw,40px);padding:14px 32px;border-radius:26px; background:#323232;color:#fff;font-size:15px;transition:background .3s} #mab .mab-pcta-btn:hover{background:#464646} /* the original project pages show the photos 3 per row with a narrow gap */ #mab .mab-pgalsec .mab-pgal--grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(6px,.9vw,12px)} /* ═══ Journal page: article pop-up ═══ */ html.mab-pop-on{overflow:hidden} #mab .mab-pop{position:fixed;inset:0;z-index:90;background:rgba(15,20,28,.72); display:flex;align-items:center;justify-content:center;padding:clamp(10px,3vw,40px)} #mab .mab-pop[hidden]{display:none} #mab .mab-pop-box{position:relative;width:min(860px,100%);max-height:100%;overflow-y:auto;background:#fff; border-radius:clamp(14px,1.6vw,22px);padding:clamp(20px,3.4vw,48px);box-shadow:0 30px 80px rgba(0,0,0,.35); overscroll-behavior:contain} #mab .mab-pop-x{position:sticky;top:0;float:inline-end;z-index:2;width:42px;height:42px;margin:-6px -6px 6px 0; border:1px solid var(--hair);border-radius:50%;background:#fff;cursor:pointer} #mab .mab-pop-x::before,#mab .mab-pop-x::after{content:"";position:absolute;inset-inline:12px;top:50%;height:1.5px; background:var(--text);transform:rotate(45deg)} #mab .mab-pop-x::after{transform:rotate(-45deg)} #mab .mab-pop-x:hover{border-color:var(--accent)} #mab .mab-pop-im{margin:0 0 clamp(18px,2.2vw,28px);border-radius:clamp(12px,1.4vw,18px);overflow:hidden; aspect-ratio:16/9;background:var(--x-stone);clear:both} #mab .mab-pop-im img{width:100%;height:100%;object-fit:cover;display:block} #mab .mab-pop-body time{display:block;font-size:11px;letter-spacing:.18em;color:var(--accent)} #mab .mab-pop-body h2{margin-top:10px;font-size:clamp(21px,2.4vw,32px);font-weight:300;line-height:1.35;color:var(--text)} #mab .mab-pop-body .mab-article{max-width:none} #mab .mab-pop-pics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:clamp(22px,2.6vw,34px)} #mab .mab-pop-pics a{display:block;border-radius:10px;overflow:hidden;background:var(--x-stone);aspect-ratio:1} #mab .mab-pop-pics img{width:100%;height:100%;object-fit:cover;display:block} @media (max-width:560px){#mab .mab-pop-pics{grid-template-columns:repeat(2,minmax(0,1fr))}} /* ═══ Project page — matched to the original project pages (e.g. /h-aljabri on manzilalbinaa.com) ═══ */ /* content 1224px wide, centred */ #mab .mab-pintro>.mab-wrap,#mab .mab-pgalsec>.mab-wrap,#mab .mab-pcta>.mab-wrap{max-width:calc(1224px + var(--pad) * 2)} #mab .mab-pintro{padding-block:clamp(40px,7vw,104px) clamp(40px,6vw,90px)} #mab .mab-pin{grid-template-columns:minmax(0,.98fr) minmax(0,1fr);gap:clamp(24px,6vw,120px)} /* name: normal weight, 32px (24px on phones), on the same edge as the values */ #mab .mab-pin h2{font-size:clamp(24px,2.4vw,32px);font-weight:400;line-height:1.3;color:#000;letter-spacing:0; text-align:end;margin:0 0 clamp(24px,2.6vw,34px)} /* table: label on one side, value on the other, black 14px */ #mab .mab-pin-table li,#mab .mab-pin-facts>div{padding-block:10px;font-size:14px;line-height:1.3;color:#000;gap:20px} #mab .mab-pin-table li strong,#mab .mab-pin-facts dt{font-weight:400;color:#000} #mab .mab-pin-table p{color:#000;font-size:14px} #mab .mab-pin-im{aspect-ratio:606/440;border-radius:0} @media (max-width:900px){ #mab .mab-pin{grid-template-columns:1fr;gap:28px} #mab .mab-pin-im{order:-1} #mab .mab-pin h2{text-align:start} #mab .mab-pin-table li,#mab .mab-pin-facts>div{font-size:12px} #mab .mab-pin-table li strong,#mab .mab-pin-facts dt{font-size:14px} } /* photos: 3 per row, square, 16px apart */ #mab .mab-pgalsec .mab-pgal--grid{gap:16px} #mab .mab-pgalsec .mab-pgal--masonry{column-gap:16px} #mab .mab-pgalsec .mab-pgal--masonry .mab-pgal-it{margin-bottom:16px} @media (max-width:640px){ #mab .mab-pgalsec .mab-pgal--grid{gap:8px} } /* contact band: #E6E6E6, 32px title, 20px text, dark square button */ #mab .mab-pcta{background:#E6E6E6;padding-block:clamp(56px,10vw,141px) clamp(56px,8vw,120px)} #mab .mab-pcta h2{font-size:clamp(24px,2.4vw,32px);font-weight:400;color:#000} #mab .mab-pcta p{font-size:clamp(18px,1.5vw,20px);color:#000;max-width:600px;margin-top:16px} #mab .mab-pcta-btn{border-radius:0;background:rgb(50,50,50);padding:14px 32px;font-size:16px;margin-top:34px} #mab .mab-pcta-btn:hover{background:rgb(70,70,70)} /* ═══ Phone menu: the open panel shows in full on every page ═══ */ /* The page covers clip their content (overflow:hidden); while the menu is open they let it show past them. */ @media (max-width:1150px){ .mab-menu-open #mab .mab-hero,.mab-menu-open #mab .mab-phero{overflow:visible} .mab-menu-open #mab .mab-nav{z-index:80} #mab .mab-nvpanel[data-open="1"]{max-height:calc(var(--winh,100vh) - 70px);overscroll-behavior:contain; box-shadow:0 18px 40px rgba(0,0,0,.25)} } /* ═══ Image viewer (article pictures in the journal pop-up, article and project pages) ═══ */ #mab .mab-lb{z-index:1000;padding:calc(64px + env(safe-area-inset-top,0px)) 12px calc(20px + env(safe-area-inset-bottom,0px))} /* × drawn with lines (not a font glyph), large and always visible */ #mab .mab-lb-close{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));inset-inline-end:12px;z-index:2; width:48px;height:48px;font-size:0;color:transparent;background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.35)} #mab .mab-lb-close::before,#mab .mab-lb-close::after{content:"";position:absolute;left:50%;top:50%;width:22px;height:2px; background:#fff;border-radius:2px;transform:translate(-50%,-50%) rotate(45deg)} #mab .mab-lb-close::after{transform:translate(-50%,-50%) rotate(-45deg)} #mab .mab-lb-nav{color:#fff} #mab .mab-lb-fig img{border-radius:6px} #mab .mab-lb-count{position:absolute;top:calc(26px + env(safe-area-inset-top,0px));inset-inline-start:16px; color:rgba(255,255,255,.8);font-size:14px;font-variant-numeric:tabular-nums;direction:ltr} @media (max-width:640px){ /* phone: the picture takes the full width, arrows under it */ #mab .mab-lb{grid-template-columns:1fr;padding:calc(72px + env(safe-area-inset-top,0px)) 0 calc(84px + env(safe-area-inset-bottom,0px))} #mab .mab-lb-fig img{width:100%;max-width:100%;max-height:calc(100dvh - 170px);border-radius:0} #mab .mab-lb-nav{bottom:calc(18px + env(safe-area-inset-bottom,0px))} } #mab .mab-lb{background:#0F161F} #mab .mab-lb-count{inset-inline-start:auto;left:50%;transform:translateX(-50%)} @media (max-width:1150px){ #mab .mab-nvpanel{background:#131B26;backdrop-filter:none} } /* ═══ Article page: «العودة إلى المدونة» at the end of the article ═══ */ #mab .mab-back{display:flex;justify-content:center;margin-top:clamp(40px,5vw,64px);padding-top:clamp(28px,3vw,40px); border-top:1px solid var(--hair)} #mab .mab-backbtn{display:inline-flex;align-items:center;gap:12px;padding:13px 28px;border:1px solid var(--hair); border-radius:999px;font-size:14.5px;color:var(--text);background:#fff; transition:border-color .3s,color .3s,transform .3s var(--ease)} #mab .mab-backbtn:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)} /* arrow pointing back (to the right in Arabic, to the left in English) */ #mab .mab-backbtn s{width:9px;height:9px;flex:none;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor; transform:rotate(45deg);text-decoration:none;transition:transform .3s var(--ease)} #mab[data-lang="en"] .mab-backbtn s{transform:rotate(-135deg)} #mab .mab-backbtn:hover s{transform:rotate(45deg) translate(2px,-2px)} #mab[data-lang="en"] .mab-backbtn:hover s{transform:rotate(-135deg) translate(2px,-2px)} /* the journal card it returns to sits below the top edge, not under it */ #mab .mab-bcard{scroll-margin-top:90px} /* ---------- Links page (/linktree): one phone-sized column on a project photo, navy shade, white logo and oval buttons (same look as the Syria links page) ---------- */ #mab .mab-lk{position:relative;isolation:isolate;display:grid;place-items:center;min-height:100vh;min-height:100svh; padding:max(32px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(32px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px)); background:var(--ink-2);color:#fff;overflow:hidden;text-align:center} #mab .mab-lk-bg{position:absolute;inset:0;z-index:-1} #mab .mab-lk-bg img{width:100%;height:100%;object-fit:cover} #mab .mab-lk-bg.mab-noimg{display:none} /* a background that does not load: the plain navy, not the «image pending» note */ #mab .mab-lk-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(27,38,52,.78) 0%,rgba(27,38,52,.9) 45%,rgba(27,38,52,.97) 100%)} #mab .mab-lk-card{display:grid;justify-items:center;width:100%;max-width:440px} #mab .mab-lk-logo{display:inline-flex;margin-bottom:clamp(22px,5vh,36px)} #mab .mab-lk-logo img{height:44px;width:auto} #mab .mab-lk-title{font-size:clamp(24px,6.4vw,32px);font-weight:300;line-height:1.4;letter-spacing:-.01em;text-wrap:balance;color:#fff} #mab .mab-lk-title::before{content:"";display:block;width:46px;height:1px;margin:0 auto 18px;background:var(--accent-2)} #mab .mab-lk-lead{margin-top:14px;font-size:15px;font-weight:300;line-height:1.9;color:#C6D0DB;text-wrap:pretty} #mab .mab-lk-list{display:grid;gap:12px;width:100%;margin:clamp(26px,5vh,40px) 0 0;padding:0;list-style:none} #mab .mab-lk-btn{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:12px 22px;border:1px solid rgba(255,255,255,.34);border-radius:999px; background:rgba(255,255,255,.06);color:#fff;font-size:15.5px;font-weight:500;text-align:start;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px); transition:background-color .25s,border-color .25s,color .25s,transform .25s} #mab .mab-lk-btn span{flex:1} #mab .mab-lk-arrow{flex:none;width:14px;height:14px;opacity:.7} #mab[dir="ltr"] .mab-lk-arrow{transform:scaleX(-1)} #mab .mab-lk-btn:hover{background:#fff;border-color:#fff;color:var(--ink-2);transform:translateY(-2px)} #mab .mab-lk-btn:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px} #mab .mab-lk-btn-primary{background:var(--accent);border-color:var(--accent)} #mab .mab-lk-btn-primary:hover{background:#A95E40;border-color:#A95E40;color:#fff} #mab .mab-lk-soc{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:clamp(24px,4vh,34px) 0 0;padding:0;list-style:none} #mab .mab-lk-soc a{display:grid;place-items:center;width:46px;height:46px;border:1px solid rgba(255,255,255,.3);border-radius:50%;color:#fff; transition:background-color .25s,border-color .25s,color .25s,transform .25s} #mab .mab-lk-soc a:hover{background:#fff;border-color:#fff;color:var(--ink-2);transform:translateY(-2px)} #mab .mab-lk-soc a:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px} #mab .mab-lk-soc svg{width:20px;height:20px;fill:currentColor} @media (prefers-reduced-motion:reduce){#mab .mab-lk-btn,#mab .mab-lk-soc a{transition:none}#mab .mab-lk-btn:hover,#mab .mab-lk-soc a:hover{transform:none}} /* «الصفحات الإضافية»: draft note, form and pictures under the text */ #mab .mab-xp-draft{margin-bottom:28px} #mab .mab-xp-form{margin-block:clamp(28px,4vw,48px)} #mab .mab-article + .mab-artgal, #mab .mab-xp-form + .mab-artgal{margin-top:clamp(28px,4vw,48px)} /* ---------- The gateway (/gateway): the home page cover without the menu bar; content in «محتوى الصفحات ← البوابة» ---------- */ #mab .mab-gw.mab-hero{background:var(--ink-2)} /* one screen: no white fade at the bottom */ #mab .mab-gw .mab-hbody{padding-block:clamp(60px,10vh,120px)} #mab .mab-gw .mab-rot em{color:#fff} /* every word of the line in the same colour */ #mab .mab-gw-sub{margin:clamp(14px,1.8vw,20px) auto 0;max-width:46ch;text-align:center;font-size:clamp(15px,1.75vw,21px);font-weight:200;line-height:1.7;color:#C6D0DB;text-wrap:pretty} #mab .mab-gw .mab-lets{position:static;margin-top:clamp(34px,7vh,72px);padding:0;gap:clamp(12px,1.6vw,18px)} /* the buttons follow the title */ #mab .mab-gw .mab-lets a{min-width:clamp(150px,15vw,190px);justify-content:center} @media (max-width:720px){ #mab .mab-gw .mab-lets{flex-direction:column;align-items:stretch;max-width:320px;margin-inline:auto} } /* footer: the team's link to the dashboard — a small quiet pill after the e-mail and phone */ #mab .mab-fw-contact a.mab-fw-admin{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border:1px solid var(--hair);border-radius:999px; font-size:13px;line-height:1.4;color:#6B7178;transition:color .3s,border-color .3s} #mab .mab-fw-contact a.mab-fw-admin:hover{color:var(--accent);border-color:var(--accent)} #mab .mab-fw-admin svg{width:14px;height:14px;fill:currentColor;flex:none} /* gateway: the team's sign-in — a small quiet button in the top corner (where a sign-in usually is) */ #mab .mab-gw-admin{position:absolute;z-index:4;inset-block-start:max(18px,env(safe-area-inset-top,0px));inset-inline-end:max(18px,env(safe-area-inset-right,0px)); display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border:1px solid rgba(255,255,255,.28);border-radius:999px; font-size:12.5px;line-height:1.4;color:#C6D0DB;background:rgba(27,38,52,.35);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:color .25s,border-color .25s,background-color .25s} #mab .mab-gw-admin:hover{color:#fff;border-color:#fff} #mab .mab-gw-admin:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px} #mab .mab-gw-admin svg{width:13px;height:13px;fill:currentColor;flex:none}