/* ============================================================ SCOPE MEDIA — Website Design System Brand: Depth Black #000 · Pure White · Growth Green #92E0A1 · Fiery Orange #FE6806 Type: Zain (AR display) · IBM Plex Sans Arabic (AR text) · Alexandria (Latin/num) ============================================================ */ /* ============================================================ الألوان — مطابقة صارمة لدليل الهوية V1.1 لا يوجد أدناه إلا: ألوان الهوية الأربعة، أو مزيج موثّق منها مع الأسود الدامس / الأبيض النقي. راجع BRAND-SYSTEM.md §3 ============================================================ */ :root{ /* ألوان الهوية الأساسية */ --black:#000000; /* Depth Black — 75% */ --white:#FFFFFF; /* Pure White — 15% */ --green:#92E0A1; /* Growth Green — 9% */ --orange:#FE6806; /* Fiery Orange — 1% */ /* درجات مشتقة = أخضر النمو فوق الأسود الدامس بنسبة تعتيم */ --g-78:#72AF7E; --g-62:#5B8B64; --g-46:#43674A; --g-34:#324C37; --g-24:#233627; --g-16:#17241A; --g-10:#0F1610; --g-06:#090D0A; --g-03:#040705; --g-soft:#C3EECB; /* أخضر النمو + أبيض نقي 45% */ /* درجات مشتقة من البرتقالي الناري */ --o-12:#1E0C01; --o-soft:#FEAC76; /* أسطح وخطوط — كلها اشتقاق من الأخضر فوق الأسود */ --ink-1:var(--g-03); --ink-2:var(--g-06); --ink-3:var(--g-10); --line:rgba(146,224,161,.20); --line-2:rgba(146,224,161,.10); /* النصوص الثانوية = أبيض نقي بشفافية */ --mute:rgba(255,255,255,.60); --mute-2:rgba(255,255,255,.46); /* خطوط الهوية المرخّصة — ملفات العميل */ --f-disp:"Zain","KO Sans",system-ui,sans-serif; /* عناوين عربية */ --f-text:"KO Sans","Zain",system-ui,sans-serif; /* فقرات عربية */ --f-lat:"Alexandria","KO Sans",system-ui,sans-serif; /* لاتيني وأرقام */ --wrap:min(1320px,max(70vw,620px)); --pad:clamp(20px,5vw,64px); --r:18px; --ease:cubic-bezier(.22,1,.36,1); --ease-2:cubic-bezier(.65,0,.35,1); } *,*::before,*::after{box-sizing:border-box} /* السمة hidden تغلب أي display في القواعد — وإلا ظهر نموذجٌ مخفيٌّ تحت رسالة خطأ (كما حدث في صفحة التقييم: .form{display:grid} كانت تتغلّب على hidden) */ [hidden]{display:none!important} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ margin:0;background:var(--black);color:var(--white); font-family:var(--f-text);font-weight:300;line-height:1.9; overflow-x:hidden; -webkit-font-smoothing:antialiased; /* خط زين المرخّص وزن واحد — نمنع التغليظ الصناعي حفاظًا على شكل الحروف */ font-synthesis:none; } .zain-long{font-family:"Zain Long",var(--f-disp)} body.is-locked{overflow:hidden} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} h1,h2,h3,h4{font-family:var(--f-disp);font-weight:800;line-height:1.12;margin:0;letter-spacing:0} p{margin:0} ul{margin:0;padding:0;list-style:none} ::selection{background:var(--green);color:#000} .wrap{width:min(var(--wrap),100% - var(--pad)*2);margin-inline:auto} /* ---------- typography scale ---------- */ .h2{font-size:clamp(30px,min(4.6vw,6.4vh),62px);letter-spacing:-.01em} .lead{font-size:clamp(16px,1.6vw,20px);color:var(--mute);line-height:1.9} .lead b{color:var(--white);font-weight:600} .tag{ display:inline-flex;align-items:center;gap:10px;margin:0 0 18px; font-family:var(--f-lat);font-size:12px;letter-spacing:.22em;text-transform:uppercase; color:var(--green);font-weight:500; } .tag i{width:26px;height:1px;background:var(--green);display:block;opacity:.7} .eyebrow{ display:inline-flex;align-items:center;gap:12px;margin:0 0 26px; font-size:14px;color:var(--green);font-weight:400;letter-spacing:.02em; } .eyebrow i{width:34px;height:1px;background:var(--green);opacity:.6} /* ============================================================ PRELOADER ============================================================ */ .loader{ position:fixed;inset:0;z-index:9999;background:var(--black); display:grid;place-items:center;overflow:hidden; transition:background-color .72s .12s var(--ease),visibility 0s 1.05s; } .loader.done{background-color:transparent;visibility:hidden} .loader__inner{position:relative;z-index:3;width:min(340px,70vw);text-align:center} .loader.done .loader__inner{opacity:0;transform:scale(1.55);transition:opacity .38s var(--ease),transform .72s var(--ease)} .loader__mark{ display:block;width:104px;height:auto;aspect-ratio:483.89/290.99;margin-inline:auto; object-fit:contain;opacity:0;transform:translateY(8px) scale(.96); animation:brand-in .7s .08s var(--ease) forwards; } @keyframes brand-in{to{opacity:1;transform:none}} .loader__meta{ display:flex;justify-content:center;align-items:baseline; margin:24px 0 0;font-family:var(--f-lat);font-size:11px;letter-spacing:.24em;color:var(--mute-2); } .loader__count{color:var(--white);font-size:14px;letter-spacing:.1em} .loader__count::after{content:"%";font-size:10px;color:var(--mute-2);margin-inline-start:2px} .loader__bar{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0} .loader__bar i{display:block;height:100%;width:0} .loader__ribbons{position:absolute;inset:0;z-index:1;pointer-events:none} .loader__ribbon{--angle:0deg;--exit-y:140vh;position:absolute;left:50%;top:var(--top);width:185vw;height:clamp(150px,18vw,240px);overflow:hidden;display:flex;align-items:center;box-shadow:0 26px 64px rgba(0,0,0,.58);transform:translate(-50%,-50%) rotate(var(--angle));transform-origin:center;transition:transform 1s var(--ease-2),opacity .72s .25s} .loader__ribbon--a{background:var(--green);color:var(--black)} .loader__ribbon--b{background:#07120c;color:var(--white);border-block:1px solid rgba(146,224,161,.5)} .loader__ribbon:nth-child(1){--top:0%;--angle:-7deg;--exit-y:-135vh} .loader__ribbon:nth-child(2){--top:19%;--angle:5deg;--exit-y:-135vh} .loader__ribbon:nth-child(3){--top:38%;--angle:-4deg;--exit-y:-135vh} .loader__ribbon:nth-child(4){--top:57%;--angle:4deg;--exit-y:135vh} .loader__ribbon:nth-child(5){--top:76%;--angle:-5deg;--exit-y:135vh} .loader__ribbon:nth-child(6){--top:97%;--angle:7deg;--exit-y:135vh} .loader.done .loader__ribbon{opacity:0;transform:translate(-50%,calc(-50% + var(--exit-y))) rotate(var(--angle)) scaleX(1.05)} .loader__track{direction:rtl;display:flex;align-items:center;gap:clamp(72px,8vw,150px);width:max-content;white-space:nowrap;font-family:var(--f-disp);font-size:clamp(42px,6vw,88px);font-weight:800;line-height:1} .loader__track span{display:inline-flex;align-items:center;gap:20px} .loader__track span::after{content:none} .loader__ribbon--a .loader__track{animation:loader-tape-a 8s linear infinite} .loader__ribbon--b .loader__track{animation:loader-tape-b 8s linear infinite} .loader__ribbon:nth-child(1) .loader__track{animation-duration:6.7s;animation-delay:-1.4s} .loader__ribbon:nth-child(2) .loader__track{animation-duration:9.2s;animation-delay:-5.1s} .loader__ribbon:nth-child(3) .loader__track{animation-duration:7.6s;animation-delay:-3.3s} .loader__ribbon:nth-child(4) .loader__track{animation-duration:8.5s;animation-delay:-.8s} .loader__ribbon:nth-child(5) .loader__track{animation-duration:10.1s;animation-delay:-6.2s} .loader__ribbon:nth-child(6) .loader__track{animation-duration:7.1s;animation-delay:-2.6s} .loader.done .loader__ribbon:nth-child(1),.loader.done .loader__ribbon:nth-child(6){transition-delay:0s} .loader.done .loader__ribbon:nth-child(2),.loader.done .loader__ribbon:nth-child(5){transition-delay:.07s} .loader.done .loader__ribbon:nth-child(3),.loader.done .loader__ribbon:nth-child(4){transition-delay:.14s} @keyframes loader-tape-a{from{transform:translateX(0)}to{transform:translateX(25%)}} @keyframes loader-tape-b{from{transform:translateX(25%)}to{transform:translateX(0)}} @media (prefers-reduced-motion:reduce){.loader__track{animation:none!important}.loader.done .loader__ribbon{display:none}.loader.done{transition:none}} /* ============================================================ CURSOR · GRAIN · SCROLL BAR ============================================================ */ .cursor{ position:fixed;top:0;left:0;width:14px;height:14px;border-radius:50%; background:var(--green);pointer-events:none;z-index:9000; transform:translate(-50%,-50%);mix-blend-mode:difference; transition:width .35s var(--ease),height .35s var(--ease),background .3s,opacity .3s; display:none;opacity:0; } .cursor.on{display:block} .cursor.live{opacity:1} /* عند التوسّع نلغي المزج العكسي — كان يقلب اللون فوق الأسطح الملوّنة (الأبيض فوق البرتقالي كان يظهر أزرق). قرص أبيض ونص أسود يُقرأ فوق كل خلفياتنا. */ .cursor.grow{width:86px;height:86px;background:var(--white);mix-blend-mode:normal;box-shadow:0 10px 30px rgba(0,0,0,.45)} .cursor__label{ position:absolute;inset:0;display:grid;place-items:center; font-size:12px;color:#000;opacity:0;font-weight:600;font-family:var(--f-text); transition:opacity .25s;white-space:nowrap; } .cursor.grow .cursor__label{opacity:1} .grain{ position:fixed;inset:-120px;z-index:8000;pointer-events:none;opacity:.32; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E"); animation:grain 6s steps(6) infinite; mix-blend-mode:overlay; } @keyframes grain{ 0%{transform:translate(0,0)}20%{transform:translate(-40px,20px)} 40%{transform:translate(30px,-30px)}60%{transform:translate(-20px,-20px)} 80%{transform:translate(40px,30px)}100%{transform:translate(0,0)} } .scroll-progress{position:fixed;top:0;inset-inline:0;height:2px;z-index:7000;background:transparent} .scroll-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--green),var(--orange))} /* ============================================================ HEADER ============================================================ */ .hdr{ position:fixed;top:0;inset-inline:0;z-index:6000; display:flex;align-items:center;gap:24px; padding:20px var(--pad); transition:transform .5s var(--ease),background .4s,backdrop-filter .4s,padding .4s; } .hdr.solid{background:rgba(0,0,0,.72);backdrop-filter:blur(16px);padding-block:14px;border-bottom:1px solid var(--line-2)} .hdr.hide{transform:translateY(-110%)} .hdr__logo{display:flex;align-items:center;gap:12px;flex:none} .header-logo-en{display:block;width:clamp(160px,11.5vw,190px);height:auto;filter:invert(1);transition:opacity .3s var(--ease)} .brand-icon{display:block;width:42px;height:auto;aspect-ratio:483.89/290.99;object-fit:contain} .hdr__brandlockup{display:flex;flex-direction:column;align-items:flex-start;gap:5px;line-height:1} .brand-arabic{display:block;width:172px;height:auto;aspect-ratio:1730.2/299.11;object-fit:contain} .hdr__brandlockup i{font-style:normal;font-size:9px;color:var(--mute-2);letter-spacing:.01em;white-space:nowrap} .hdr__logo img{transition:opacity .3s var(--ease)} .hdr__logo:hover img{opacity:.72} .hdr__nav{display:flex;gap:6px;margin-inline-start:auto} .hdr__nav a{ position:relative;padding:9px 16px;border-radius:100px;font-size:14.5px;color:var(--mute); transition:color .3s; } .hdr__nav a::before{ content:"";position:absolute;inset:0;border-radius:100px;background:rgba(255,255,255,.07); transform:scale(.85);opacity:0;transition:all .4s var(--ease); } .hdr__nav a:hover{color:var(--white)} .hdr__nav a:hover::before{transform:scale(1);opacity:1} .hdr__nav a span{position:relative} /* buttons */ .btn{ position:relative;display:inline-flex;align-items:center;justify-content:center; padding:15px 30px;border-radius:100px;background:var(--green);color:var(--black); font-family:var(--f-text);font-weight:600;font-size:15px;overflow:hidden; transition:color .4s var(--ease),transform .3s var(--ease); will-change:transform; } .btn span{position:relative;z-index:2} /* طبقة التعبئة تصعد من الأسفل — بالتحجيم لا بالإزاحة، حتى لا تحتاج إلى قصّ الحواف (لأن أزرار التحفيز تحتاج overflow:visible للحلقة النابضة) */ .btn::before{ content:"";position:absolute;inset:0;background:var(--white);border-radius:inherit; transform:scaleY(0);transform-origin:50% 100%;transition:transform .5s var(--ease); } .btn:hover::before{transform:scaleY(1)} .btn--sm{padding:11px 22px;font-size:13.5px} .btn--lg{padding:19px 42px;font-size:16.5px} .btn--ghost{background:transparent;color:var(--white);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)} .btn--ghost:hover{color:var(--black)} .btn--ghost::before{background:var(--green)} .burger{ display:none;width:44px;height:44px;border:0;background:transparent; flex-direction:column;justify-content:center;gap:6px;cursor:pointer;padding:0; } .burger i{display:block;height:1.5px;background:var(--white);transition:transform .4s var(--ease),width .4s} .burger i:first-child{width:24px} .burger i:last-child{width:16px;margin-inline-start:auto} .burger.on i:first-child{transform:translateY(4px) rotate(45deg)} .burger.on i:last-child{width:24px;transform:translateY(-4px) rotate(-45deg)} /* mobile menu */ .menu{ position:fixed;inset:0;z-index:5500;background:var(--ink-1); clip-path:circle(0% at 100% 0);transition:clip-path .8s var(--ease); display:grid;place-items:center; } .menu.on{clip-path:circle(150% at 100% 0)} .menu nav{display:flex;flex-direction:column;gap:6px;text-align:center} .menu a{ font-family:var(--f-disp);font-weight:800;font-size:clamp(30px,8vw,52px); display:flex;align-items:baseline;gap:16px;justify-content:center; opacity:0;transform:translateY(24px);transition:all .6s var(--ease); } .menu.on a{opacity:1;transform:none} .menu.on a:nth-child(2){transition-delay:.06s} .menu.on a:nth-child(3){transition-delay:.12s} .menu.on a:nth-child(4){transition-delay:.18s} .menu.on a:nth-child(5){transition-delay:.24s} .menu.on a:nth-child(6){transition-delay:.3s} .menu a em{font-family:var(--f-lat);font-size:12px;font-style:normal;color:var(--green)} /* ============================================================ HERO ============================================================ */ /* علامات القص المتقطعة — عنصر مميز مأخوذ من تصاميم منشورات الهوية */ .cropframe{ position:absolute;inset:clamp(16px,2.2vw,34px);pointer-events:none;z-index:3; border:1px dashed rgba(146,224,161,.20); } .cropframe b,.cropframe i{ position:absolute;bottom:-9px;font-family:var(--f-lat);font-size:10px;letter-spacing:.2em; font-style:normal;font-weight:500;background:var(--black);padding:0 10px;color:var(--green); } .cropframe b{inset-inline-start:26px} .cropframe i{inset-inline-end:26px;color:rgba(255,255,255,.42)} .hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding:150px 0 clamp(90px,16vh,190px);overflow:hidden; background: radial-gradient(92% 66% at 82% -14%,rgba(146,224,161,.16) 0%,transparent 56%), linear-gradient(180deg,var(--g-06) 0%,var(--black) 46%,var(--black) 100%)} .hero__bg{position:absolute;inset:0;z-index:0} /* توهّج محيطي خافت — الكشّاف هو مصدر الضوء الرئيسي الآن */ .hero__glow{ position:absolute;top:-34%;inset-inline-start:-16%;width:74vw;height:74vw;max-width:960px;max-height:960px; background: radial-gradient(circle at 50% 50%,rgba(146,224,161,.12),rgba(146,224,161,.05) 34%,transparent 62%); filter:blur(30px); } /* بركة ضوء الكشّاف فوق المحتوى — تُضيء النص نفسه وتتبع الشعاع. الإحداثيات تُحدَّث من hero-fx.js عبر --sx / --sy */ .hero{--sx:66%;--sy:38%} .hero__lit{ position:absolute;inset:0;z-index:4;pointer-events:none;mix-blend-mode:overlay; background:radial-gradient(circle at var(--sx) var(--sy), rgba(255,255,255,.34) 0%, rgba(255,255,255,.14) 22%, rgba(146,224,161,.06) 42%, transparent 62%); } .hero__grid{ position:absolute;inset:0; background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px); background-size:clamp(60px,7vw,110px) clamp(60px,7vw,110px); mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 20%,transparent 100%); } /* طبقة المؤثرات السينمائية — غبار الضوء وأقواس التركيز ووميض العدسة */ .hero__fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1} .hero__strip{position:absolute;bottom:0;inset-inline:0;height:124px;opacity:.34; mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)} .strip__track{display:flex;gap:14px;animation:strip 38s linear infinite;width:max-content;padding-inline:14px} .frame{ width:196px;height:110px;border-radius:10px;flex:none; background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.02)); border:1px solid var(--line-2);position:relative;overflow:hidden; } .frame::after{ content:"";position:absolute;inset:0; background:linear-gradient(100deg,transparent 40%,rgba(146,224,161,.16) 50%,transparent 60%); transform:translateX(-100%);animation:sheen 4.5s var(--ease) infinite; } .frame:nth-child(3n)::after{animation-delay:1.1s} .frame:nth-child(3n+1)::after{animation-delay:2.2s} @keyframes strip{to{transform:translateX(50%)}} @keyframes sheen{0%{transform:translateX(-120%)}55%,100%{transform:translateX(120%)}} .hero__inner{position:relative;z-index:2;width:min(var(--wrap),100% - var(--pad)*2);margin-inline:auto} .hero__title{ font-size:clamp(40px,min(7.4vw,11vh),106px);line-height:1.06;letter-spacing:-.02em; font-weight:900;max-width:16ch;margin-bottom:clamp(26px,3.4vw,44px); } .hero__row{width:min(52ch,55%);padding-bottom:clamp(28px,4vw,44px);border-bottom:1px solid var(--line)} .hero__lead-wrap{display:flex;flex-direction:column;align-items:flex-start} .hero__lead{max-width:52ch;color:var(--mute);font-size:clamp(15px,1.5vw,18px);line-height:1.95} .hero__lead b{display:block;color:var(--white);font-weight:600} .hero__cta{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap} .hero__secret{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;-webkit-clip-path:var(--beam-clip,polygon(0 0,0 0,0 0));clip-path:var(--beam-clip,polygon(0 0,0 0,0 0))} .hero__secret span{position:absolute;left:clamp(10%,13vw,16%);top:54%;transform:translateY(-50%);direction:rtl;text-align:right;font-family:var(--f-disp);font-weight:900;font-size:clamp(88px,11vw,176px);line-height:.8;color:var(--green);text-shadow:0 0 18px rgba(146,224,161,.26),0 0 58px rgba(79,190,120,.16)} .hero__secret span b{display:block;font:inherit;font-weight:inherit;white-space:nowrap} .hero__secret span b+ b{margin-top:.12em} .hero__stats{display:flex;gap:clamp(28px,6vw,90px);flex-wrap:wrap;padding-top:26px} .stat b{ display:block;font-family:var(--f-lat);font-size:clamp(30px,4vw,52px);font-weight:600; line-height:1;color:var(--white);letter-spacing:-.02em; } .stat span{font-size:13.5px;color:var(--mute-2)} .stat--word{font-family:var(--f-disp)!important;font-weight:800!important;letter-spacing:0!important} .impact-stats{position:relative;overflow:hidden;border-block:1px solid var(--line);isolation:isolate;background:linear-gradient(112deg,#050b07 0%,#0d2115 42%,#08130c 68%,#050b07 100%);background-size:180% 100%;animation:impactBackdrop 12s ease-in-out infinite alternate} .impact-stats::before{content:"";position:absolute;z-index:-1;width:54vw;height:250%;top:-76%;left:-18%;pointer-events:none;border-radius:50%;background:radial-gradient(circle,rgba(146,224,161,.22) 0%,rgba(79,190,120,.08) 38%,transparent 70%);filter:blur(10px);animation:impactAura 9s ease-in-out infinite alternate} .impact-stats::after{content:"";position:absolute;z-index:-1;inset:-40% -20%;pointer-events:none;background:linear-gradient(112deg,transparent 34%,rgba(146,224,161,.085) 47%,rgba(255,255,255,.04) 50%,rgba(146,224,161,.06) 53%,transparent 66%);transform:translateX(-34%);animation:impactSweep 8s var(--ease) infinite} .impact-stats__inner{position:relative;display:grid;grid-template-columns:repeat(3,1fr);align-items:center;min-height:clamp(150px,15vw,210px)} .impact-stats .stat{position:relative;display:grid;place-items:center;text-align:center;gap:10px;padding:34px 20px;opacity:0;transform:translateY(28px) scale(.96);transition:transform .55s var(--ease),background .55s var(--ease)} .impact-stats__inner.in .stat{animation:impactStatIn .9s var(--ease) forwards} .impact-stats__inner.in .stat:nth-child(2){animation-delay:.14s}.impact-stats__inner.in .stat:nth-child(3){animation-delay:.28s} .impact-stats .stat::before{content:"";position:absolute;width:132px;height:82px;top:50%;left:50%;transform:translate(-50%,-54%) scale(.72);border-radius:50%;background:radial-gradient(circle,rgba(146,224,161,.13),transparent 70%);opacity:0;filter:blur(4px);transition:opacity .5s,transform .6s var(--ease)} .impact-stats .stat:hover{transform:translateY(-6px);background:linear-gradient(180deg,rgba(146,224,161,.045),transparent)} .impact-stats .stat:hover::before{opacity:1;transform:translate(-50%,-54%) scale(1.3)} .impact-stats .stat+ .stat{border-inline-start:1px solid var(--line)} .impact-stats .stat b{position:relative;z-index:1;font-size:clamp(42px,5.2vw,76px);background:linear-gradient(110deg,#fff 20%,#92e0a1 48%,#fff 76%);background-size:220% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;transition:letter-spacing .5s var(--ease),filter .5s} .impact-stats .stat:hover b{letter-spacing:.015em;filter:drop-shadow(0 0 16px rgba(146,224,161,.28));animation:impactNumberSheen 1.15s ease both} .impact-stats .stat span{font-size:clamp(13px,1.2vw,16px)} @keyframes impactBackdrop{to{background-position:100% 0}} @keyframes impactAura{to{left:64%;transform:scale(1.12)}} @keyframes impactSweep{0%,16%{transform:translateX(-40%)}70%,100%{transform:translateX(40%)}} @keyframes impactStatIn{0%{opacity:0;transform:translateY(28px) scale(.96)}65%{opacity:1;transform:translateY(-4px) scale(1.015)}100%{opacity:1;transform:none}} @keyframes impactNumberSheen{to{background-position:-110% 0}} @media(max-width:620px){.impact-stats__inner{grid-template-columns:1fr}.impact-stats .stat{padding:24px 14px}.impact-stats .stat+ .stat{border-inline-start:0;border-top:1px solid var(--line)}} .hero__scroll{ position:absolute;bottom:26px;inset-inline-end:var(--pad);z-index:3; display:flex;flex-direction:column;align-items:center;gap:10px; font-family:var(--f-lat);font-size:10px;letter-spacing:.2em;color:var(--mute-2); } .hero__scroll i{width:1px;height:56px;background:linear-gradient(var(--green),transparent);position:relative;overflow:hidden} .hero__scroll i::after{content:"";position:absolute;inset-inline:0;height:16px;background:var(--green);animation:drop 2s var(--ease-2) infinite} @keyframes drop{0%{top:-16px}60%,100%{top:56px}} /* ============================================================ TICKER ============================================================ */ /* شريط الخدمات — «تكحيلة» خضراء ممتدة عبر الصفحة بلون الهوية ونص أسود */ .ticker{ padding:18px 0;overflow:hidden;background:var(--green); box-shadow:0 0 90px rgba(146,224,161,.28); } .ticker__track{display:flex;align-items:center;gap:26px;width:max-content;animation:tick 42s linear infinite} .ticker span{font-family:var(--f-disp);font-weight:700;font-size:clamp(20px,2.6vw,34px);white-space:nowrap;color:var(--black)} .ticker b{color:var(--black);font-size:11px;opacity:.55} @keyframes tick{to{transform:translateX(50%)}} /* ============================================================ الإعلان / التقديم لوح إعلاني واحد تحت الهيرو يُشغَّل من اللوحة عند الحاجة (دورة، ورشة، وظيفة…). البرتقالي الناري هنا في موضعه تمامًا: نسبته في الهوية 1% ومهمّته لفت الانتباه لعنصر واحد — راجع BRAND-SYSTEM.md §3. ============================================================ */ .promo{padding:clamp(52px,6.5vw,104px) 0;position:relative} .promo[hidden]{display:none} /* أكثر من إعلان: بطاقات متتابعة لا شبكة — كل إعلان يستحق عرض السطر كاملًا */ .promo__list{display:grid;gap:clamp(20px,2.4vw,34px)} .promo__card{ position:relative;display:grid;gap:clamp(22px,3vw,46px);align-items:center; grid-template-columns:minmax(0,.82fr) minmax(0,1fr); padding:clamp(22px,2.6vw,38px);border-radius:calc(var(--r) + 8px); background:linear-gradient(118deg,var(--ink-3) 0%,var(--ink-2) 52%,var(--o-12) 100%); box-shadow:inset 0 0 0 1px var(--line),0 30px 80px -50px rgba(0,0,0,.9); overflow:hidden; } /* خيط برتقالي علوي — إشارة «جديد» بلا صخب */ .promo__card::before{ content:"";position:absolute;inset-inline:0;top:0;height:2px;pointer-events:none; background:linear-gradient(90deg,transparent,var(--orange) 22%,var(--green) 78%,transparent); opacity:.85; } /* توهّج خافت خلف جهة النص */ .promo__card::after{ content:"";position:absolute;z-index:0;pointer-events:none; width:46%;aspect-ratio:1;inset-block-start:-28%;inset-inline-start:-12%;border-radius:50%; background:radial-gradient(circle,rgba(254,104,6,.16),transparent 66%);filter:blur(6px); } .promo__card--solo{grid-template-columns:1fr} .promo__card--solo .promo__text{max-width:64ch} .promo__media{position:relative;border-radius:var(--r);overflow:hidden;background:var(--g-06)} .promo__media::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--line-2);border-radius:inherit;pointer-events:none} .promo__media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;transition:transform .9s var(--ease)} .promo__card:hover .promo__media img{transform:scale(1.04)} .promo__body{position:relative;z-index:1;min-width:0} .promo__tag{ display:inline-flex;align-items:center;gap:9px;margin:0 0 14px;padding:7px 15px 7px 12px; border-radius:100px;background:rgba(254,104,6,.10);box-shadow:inset 0 0 0 1px rgba(254,104,6,.34); color:var(--orange);font-family:var(--f-lat);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase; } .promo__tag i{width:7px;height:7px;border-radius:50%;background:var(--orange);flex:none;animation:promoBeat 2.2s ease-in-out infinite} @keyframes promoBeat{0%,100%{box-shadow:0 0 0 0 rgba(254,104,6,.55)}70%{box-shadow:0 0 0 7px rgba(254,104,6,0)}} .promo__title{font-size:clamp(26px,min(3.5vw,5vh),46px);letter-spacing:-.01em;margin:0} .promo__text{margin:14px 0 0;color:var(--mute);font-size:clamp(15px,1.35vw,18px);line-height:1.9;max-width:52ch} .promo__text:empty{display:none} /* تاريخ الإعلان — سطر واحد بخيط الهوية الأخضر كما في .tag و .eyebrow */ .promo__when{ display:flex;align-items:center;gap:11px;margin:16px 0 0; font-family:var(--f-lat);font-size:clamp(14px,1.3vw,16.5px);font-weight:500; color:var(--green);letter-spacing:.01em; } .promo__when i{width:22px;height:1px;background:var(--green);opacity:.7;flex:none} .promo__when[hidden]{display:none} .promo__facts{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:20px 0 0;padding:0} .promo__facts li{ padding:8px 15px;border-radius:100px;font-size:13.5px;color:var(--white); background:rgba(146,224,161,.06);box-shadow:inset 0 0 0 1px var(--line); } /* ---------- السعر والخصم ---------- السعر أبيض ناصع لأنه المعلومة التي تُقرأ أولًا، والقديم مشطوب باهت، والشارة برتقالية — وهي الاستعمال المقصود للبرتقالي في الهوية. */ .promo__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;margin-top:clamp(18px,2vw,26px)} .promo__now{ font-family:var(--f-disp);font-weight:800;line-height:1; font-size:clamp(28px,min(3.2vw,4.4vh),42px);letter-spacing:-.01em; } .promo__was{ font-family:var(--f-lat);font-size:clamp(14px,1.3vw,17px);color:var(--mute-2); text-decoration-thickness:1.5px;text-decoration-color:var(--orange); } .promo__off{ padding:5px 12px;border-radius:100px;font-size:12.5px;font-weight:700; color:var(--black);background:var(--orange);white-space:nowrap; } .promo__pnote{flex-basis:100%;color:var(--mute-2);font-size:12.5px} /* المجاني: الأخضر لا البرتقالي — إنه بشارة لا تنبيه */ .promo__price.is-free .promo__now{color:var(--green)} .promo__actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;margin-top:clamp(22px,2.4vw,32px)} .promo__note{margin:0;color:var(--mute-2);font-size:13.5px} @media (max-width:900px){ .promo__card{grid-template-columns:1fr} .promo__media img{aspect-ratio:16/9} .promo__text{max-width:none} } /* ============================================================ SECTIONS ============================================================ */ .sec{padding:clamp(80px,min(11vw,17vh),170px) 0;position:relative} /* إضاءة خضراء خلف كل قسم — «تكحيل» الأسود بدل السواد المسطّح */ .sec::before{ content:"";position:absolute;inset-inline:0;top:0;height:70%;pointer-events:none;z-index:0; background:radial-gradient(75% 60% at 82% 0%,rgba(146,224,161,.16),transparent 62%); } .sec>.wrap{position:relative;z-index:1} /* أقسام بأرضية خضراء معتمة تتناوب مع الأسود */ .vm{background:linear-gradient(180deg,var(--black),var(--g-10) 45%,var(--black))} .vm::before{background:radial-gradient(60% 50% at 18% 10%,rgba(146,224,161,.20),transparent 60%)} .clients{background:linear-gradient(180deg,var(--black),var(--g-06) 50%,var(--black))} .work::before{background:radial-gradient(70% 55% at 12% 4%,rgba(146,224,161,.18),transparent 62%)} /* ============================================================ شريط رأس القسم — خط شعري ممتد من حافة إلى حافة يربط العنوان بما تحته، تمامًا كصفحات دليل الهوية والملف التعريفي. ============================================================ */ .sec__head{ position:relative;display:flex;justify-content:space-between;align-items:flex-end; gap:clamp(24px,4vw,60px);flex-wrap:wrap; padding-bottom:clamp(26px,3.2vw,44px); margin-bottom:clamp(34px,4.2vw,58px); } .sec__head::after{ content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%); width:100vw;height:1px;background:var(--line); } /* خط شعري رأسي قصير ينزل من الشريط إلى المحتوى — رباط بصري */ .sec__head::before{ content:"";position:absolute;bottom:-1px;inset-inline-start:0;width:1px; height:clamp(34px,4.2vw,58px);background:linear-gradient(var(--green),transparent); opacity:.55; } .sec__head .h2{max-width:19ch} .sec__head--split{max-width:none} .sec__side{display:flex;flex-direction:column;gap:16px;align-items:flex-start} .sec__note{color:var(--mute);max-width:32ch;font-size:16px} /* السطر الإنجليزي الأخضر تحت العنوان العربي — النمط الثابت في الملف التعريفي */ .h2__en{ display:block;margin-top:16px;font-family:var(--f-lat);font-weight:400; font-size:clamp(12px,1.05vw,15px);letter-spacing:.18em;color:var(--green); } .sec__head--split .h2__en{margin-top:14px} /* عنوان «من نحن» — كتلة مركزية بحركة افتتاحية سينمائية */ .about__head{ justify-content:center;align-items:center;text-align:center; min-height:clamp(320px,34vw,500px); } .about__head .sec__head-main{ position:relative;width:min(100%,980px);display:flex;flex-direction:column; align-items:center;isolation:isolate; } .about__head .sec__head-main::before{ content:"";position:absolute;z-index:-1;inset:50% auto auto 50%; width:min(76vw,760px);height:min(38vw,380px);transform:translate(-50%,-50%); background:radial-gradient(ellipse,rgba(79,190,120,.13),rgba(79,190,120,.035) 48%,transparent 72%); filter:blur(8px);animation:aboutGlow 5.5s ease-in-out infinite alternate; pointer-events:none; } .about__head .tag{ position:relative;justify-content:center;margin-bottom:clamp(32px,4vw,58px); padding-bottom:18px;font-family:var(--f-disp);font-size:clamp(28px,3vw,46px); line-height:1;font-weight:800;letter-spacing:-.02em;color:var(--white); } .about__head .tag i{display:none} .about__head .tag::after{ content:"";position:absolute;bottom:0;left:50%;width:58%;height:3px; transform:translateX(-50%);background:var(--green);border-radius:10px; box-shadow:0 0 18px rgba(146,224,161,.48); } .about__head .h2{ max-width:none;margin-inline:auto;text-wrap:balance; font-size:clamp(42px,min(5.7vw,9vh),82px);line-height:1.08;letter-spacing:-.035em; } .about__title-line{display:block;white-space:nowrap} .about__title-line + .about__title-line{margin-top:.16em} .about__title-line--accent{color:var(--green)} .about__head .h2__en{margin-top:22px} .about__head::before{ inset-inline-start:50%;height:clamp(34px,4.2vw,58px); transform:translateX(-50%);animation:aboutStem 2.4s var(--ease) infinite alternate; } .about__head .h2 .word{ opacity:0;filter:blur(9px);transform:translateY(120%) rotate(4deg) scale(.94); transition-property:transform,opacity,filter; transition-duration:1s;transition-timing-function:var(--ease); } .about__head .about__title-line.split.in .word{opacity:1;filter:blur(0);transform:none} @keyframes aboutGlow{ from{opacity:.48;transform:translate(-50%,-50%) scale(.9)} to{opacity:1;transform:translate(-50%,-50%) scale(1.08)} } @keyframes aboutStem{from{opacity:.28}to{opacity:.9}} /* لحظة توقيع العلامة — السلوقن كتجربة بصرية مستقلة */ .brand-moment{ position:relative;min-height:clamp(620px,88vh,920px);overflow:hidden; display:grid;place-items:center;border-block:1px solid var(--line); background: radial-gradient(ellipse 58% 48% at 50% 52%,rgba(79,190,120,.14),transparent 68%), linear-gradient(180deg,var(--black),#06100a 52%,var(--black)); } .brand-moment::before{ content:"";position:absolute;inset:0;opacity:.18;pointer-events:none; background-image:linear-gradient(rgba(146,224,161,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(146,224,161,.09) 1px,transparent 1px); background-size:84px 84px; -webkit-mask-image:radial-gradient(circle at center,#000,transparent 72%);mask-image:radial-gradient(circle at center,#000,transparent 72%); } .brand-moment__inner{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center} .brand-moment__steps{ display:flex;align-items:center;justify-content:center;gap:clamp(12px,2vw,28px); margin-bottom:clamp(34px,5vw,70px);color:rgba(255,255,255,.58); font-size:clamp(13px,1.25vw,17px);font-weight:600; } .brand-moment__steps i{display:block;width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 14px var(--green)} .brand-moment__title{ position:relative;font-family:var(--f-disp);font-weight:900; font-size:clamp(82px,min(14vw,22vh),230px);line-height:.84;letter-spacing:-.065em; white-space:nowrap;filter:drop-shadow(0 20px 50px rgba(0,0,0,.55)); } .brand-moment__title .line{overflow:visible;padding:.12em .02em .2em} .brand-moment__title .line:nth-of-type(2) .word{ color:var(--green);text-shadow:0 0 42px rgba(146,224,161,.2); } .brand-moment__title.split.in .line:nth-of-type(2) .word{animation:brandFloat 4.8s 1.1s ease-in-out infinite alternate} .brand-moment__sign{ margin-top:clamp(34px,5vw,64px);font-family:var(--f-lat);font-size:10px; letter-spacing:.32em;color:rgba(146,224,161,.66);direction:ltr; } .brand-moment__beam{ position:absolute;z-index:1;top:50%;left:-18%;width:136%;height:2px; background:linear-gradient(90deg,transparent,rgba(146,224,161,.15) 20%,var(--green) 50%,rgba(146,224,161,.15) 80%,transparent); box-shadow:0 0 28px rgba(146,224,161,.46);transform:scaleX(.06);opacity:0; animation:brandBeam 5.2s var(--ease) infinite; } .brand-moment__orbit{ position:absolute;width:min(72vw,1040px);aspect-ratio:1;border:1px solid rgba(146,224,161,.11); border-radius:50%;transform:rotate(-12deg) scaleY(.28);animation:brandOrbit 16s linear infinite; } @keyframes brandBeam{0%,18%{transform:scaleX(.05);opacity:0}42%,78%{transform:scaleX(1);opacity:.8}100%{transform:scaleX(1.08);opacity:0}} @keyframes brandFloat{to{transform:translateY(-.055em)}} @keyframes brandOrbit{to{transform:rotate(348deg) scaleY(.28)}} @media (max-width:640px){ .brand-moment{min-height:72vh} .brand-moment__title{font-size:22vw} .brand-moment__steps{gap:10px;font-size:12px} } .link-arrow{display:inline-flex;align-items:center;gap:12px;color:var(--green);font-size:15px;font-weight:500} .link-arrow i{ width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(146,224,161,.35); position:relative;transition:background .35s var(--ease),transform .35s var(--ease); } /* رمز مصمت لا خطي — التزامًا بأسلوب «الأيقونات المبسّطة» في الدليل */ .link-arrow i::after{ content:"";position:absolute;inset:0;margin:auto;width:0;height:0; border-block:6px solid transparent;border-right:9px solid var(--green); margin-right:11px;transition:border-right-color .3s; } .link-arrow:hover i{background:var(--green);transform:translateX(-4px)} .link-arrow:hover i::after{border-right-color:var(--black)} /* ---------- ABOUT — تخطيط تحريري بلا صور ---------- */ .about__grid{ display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,5vw,64px); align-items:center;padding-bottom:clamp(40px,5vw,70px);border-bottom:1px solid var(--line); } .about__body{display:flex;flex-direction:column;gap:clamp(26px,3vw,44px)} /* مشهد بلاتوه سينمائي يذوب بصرياً داخل خلفية القسم */ .stage{ position:relative;margin:0 0 -8%;overflow:visible;border-radius:0;aspect-ratio:1/1.12; background:transparent; -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 8%,#000 76%,rgba(0,0,0,.72) 88%,transparent 100%); mask-image:linear-gradient(to bottom,transparent 0,#000 8%,#000 76%,rgba(0,0,0,.72) 88%,transparent 100%); filter:drop-shadow(0 30px 52px rgba(0,0,0,.35)); transition:transform .7s var(--ease); } .stage::before{ content:"";position:absolute;z-index:2;inset:3% -5% 4%;pointer-events:none; background: radial-gradient(ellipse 48% 46% at 43% 46%,rgba(92,255,148,.34),rgba(79,190,120,.16) 38%,transparent 72%), linear-gradient(105deg,rgba(27,191,91,.12),transparent 58%); mix-blend-mode:screen;filter:blur(10px);opacity:.9; animation:stageGreenGlow 5.5s ease-in-out infinite alternate; } .stage::after{ content:"";position:absolute;z-index:2;inset:8% 2% 10%;pointer-events:none; background:radial-gradient(ellipse at 44% 48%,transparent 30%,rgba(4,17,10,.08) 58%,rgba(4,17,10,.5) 100%); mix-blend-mode:multiply; } @keyframes stageGreenGlow{from{opacity:.62;transform:scale(.96)}to{opacity:1;transform:scale(1.045)}} .stage:hover{transform:translateY(-6px)} .stage img{ position:relative;z-index:1; width:100%;height:100%;object-fit:contain;object-position:center bottom; display:block;mix-blend-mode:normal; transform:scale(1.16);transform-origin:62% 100%; transition:transform 1.4s var(--ease); } .stage:hover img{transform:translateY(-3px) scale(1.19)} /* شريط الحالة داخل اللوح */ .stage__slate{ position:absolute;top:22px;inset-inline-start:26px;z-index:3; font-family:var(--f-lat);font-size:10px;letter-spacing:.2em;color:rgba(0,0,0,.55); } /* إطار القص المتقطّع — عنصر الهوية */ .stage__slate,.stage__crop,.stage__c{display:none} .stage__crop{position:absolute;inset:14px;border:1px dashed rgba(0,0,0,.22);border-radius:16px;pointer-events:none;z-index:2} .stage__c{position:absolute;width:20px;height:20px;border:1.5px solid rgba(0,0,0,.5);z-index:3} .stage .c1{top:22px;inset-inline-end:22px;border-inline-start:0;border-bottom:0} .stage .c2{top:22px;inset-inline-start:22px;border-inline-end:0;border-bottom:0} .stage .c3{bottom:22px;inset-inline-end:22px;border-inline-start:0;border-top:0} .stage .c4{bottom:22px;inset-inline-start:22px;border-inline-end:0;border-top:0} .about__lead{ font-family:var(--f-disp);font-weight:800;line-height:1.5;letter-spacing:-.005em; font-size:clamp(21px,2.5vw,34px);max-width:30ch; } .about__lead em{font-style:normal;color:var(--green)} /* شهادات الاعتماد — الجهات الوطنية */ .creds{padding-top:6px} .creds__k{ display:block;font-family:var(--f-lat);font-size:10px;letter-spacing:.2em; color:var(--green);margin-bottom:18px; } .creds li{ position:relative;padding-block:12px;padding-inline-start:20px; font-size:15px;color:var(--white);border-bottom:1px solid var(--line-2); } .creds li::before{ content:"";position:absolute;inset-inline-start:0;top:21px; width:6px;height:6px;border-radius:50%;background:var(--green); } .creds li:last-child{border-bottom:0} /* الركائز الثلاث — بطاقات مرقّمة */ .pillars{ position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.5vw,22px); margin-top:clamp(50px,6vw,84px);padding-block:24px; } .pillars::before{ content:"";position:absolute;z-index:0;top:50%;inset-inline:-8vw;height:1px; background:linear-gradient(90deg,transparent,rgba(146,224,161,.14) 16%,rgba(146,224,161,.14) 84%,transparent); } .pillars li{ --light-x:18%; position:relative;min-height:clamp(260px,23vw,330px);padding:clamp(30px,3.2vw,46px);border-radius:20px;overflow:hidden; isolation:isolate;background: linear-gradient(145deg,rgba(22,63,41,.58),rgba(4,17,10,.94) 56%), var(--black); box-shadow:inset 0 0 0 1px rgba(146,224,161,.2),0 24px 60px rgba(0,0,0,.3); transition:transform .65s var(--ease),background .5s,box-shadow .55s; } .pillars li:nth-child(2){--light-x:50%} .pillars li:nth-child(3){--light-x:82%} .pillars li::before{ content:"";position:absolute;z-index:3;top:0;inset-inline:0;height:2px;width:100%; background:linear-gradient(90deg,transparent,var(--green),transparent); transform:scaleX(.12);opacity:.38;transition:transform .8s var(--ease),opacity .5s; } .pillars li::after{ content:"";position:absolute;z-index:-1;inset:-28% -16% -12%;pointer-events:none; background: radial-gradient(circle 240px at var(--mx,var(--light-x)) var(--my,8%),rgba(146,224,161,.36),rgba(79,190,120,.12) 38%,transparent 72%), linear-gradient(112deg,transparent 36%,rgba(146,224,161,.055) 47%,transparent 59%); filter:blur(3px);opacity:.6;transform:scale(.94); animation:pillarLight 6.5s ease-in-out infinite alternate; } .pillars li:nth-child(2)::after{animation-delay:-2.1s}.pillars li:nth-child(3)::after{animation-delay:-4.2s} .pillars li:hover{transform:translateY(-8px);box-shadow:inset 0 0 0 1px rgba(146,224,161,.46),0 30px 70px rgba(0,0,0,.52),0 0 40px rgba(79,190,120,.09)} .pillars li:hover::before{transform:scaleX(1);opacity:1} .pillars li:hover::after{opacity:1;transform:scale(1.08)} .pillars li.is-tracking::after{animation:none;opacity:1;transform:scale(1.04)} @keyframes pillarLight{from{opacity:.42;transform:translateX(-2%) scale(.94)}to{opacity:.84;transform:translateX(2%) scale(1.04)}} .pillars__n{ display:block;font-family:var(--f-lat);font-size:clamp(58px,7vw,104px); font-weight:300;line-height:.8;letter-spacing:-.055em; color:rgba(146,224,161,.14);-webkit-text-stroke:1px rgba(146,224,161,.62); margin-bottom:clamp(42px,5vw,72px);transition:color .45s,text-shadow .45s,transform .55s var(--ease); } .pillars li:hover .pillars__n{color:rgba(146,224,161,.26);text-shadow:0 0 30px rgba(146,224,161,.16);transform:translateY(-3px)} .pillars b,.pillars__d{position:relative;z-index:2} .pillars b{display:block;font-family:var(--f-disp);font-size:clamp(25px,2.6vw,36px);font-weight:800;margin-bottom:10px} .pillars__d{color:var(--mute);font-size:15px} /* ---------- VISION / VALUES ---------- */ /* ============================================================ الرؤية والرسالة — لوحان كـ«كلاكيت» متقابلان: الضوء والظل ============================================================ */ .vm__grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:clamp(64px,9vw,120px)} .slate{ position:relative;overflow:hidden;border-radius:26px;isolation:isolate; padding:clamp(30px,3.2vw,44px) clamp(26px,3.2vw,46px) clamp(46px,5vw,64px); display:flex;flex-direction:column;min-height:clamp(260px,24vw,330px); transition:transform .6s var(--ease); } .slate:hover{transform:translateY(-6px)} /* اللوح المضاء: أخضر النمو مصمت ونص أسود — «الوجهة» */ .slate--lit{background:radial-gradient(120% 90% at 22% 0%,var(--g-soft),var(--green) 62%);color:var(--black)} /* اللوح المعتم: أسود بضوء أخضر منسكب — «الطريق» */ .slate--dark{ background: radial-gradient(90% 70% at 88% 4%,rgba(146,224,161,.26),transparent 60%), linear-gradient(160deg,var(--g-16),var(--g-03) 76%); color:var(--white);box-shadow:inset 0 0 0 1px var(--line); } /* شريط الكلاكيت العلوي */ .slate__bar{ display:flex;align-items:center;gap:12px;font-family:var(--f-lat); font-size:10px;letter-spacing:.2em;margin-bottom:0; } .slate__bar i{flex:1;height:1px;background:currentColor;opacity:.3} .slate--lit .slate__bar{color:rgba(0,0,0,.6)} .slate--dark .slate__bar{color:var(--green)} .slate__k{ font-family:var(--f-disp);font-weight:800;font-size:clamp(30px,3.4vw,46px); line-height:1;margin:clamp(30px,4vw,54px) 0 14px;position:relative;z-index:2; } .slate--dark .slate__k{color:var(--green)} .slate__text{ font-family:var(--f-text);font-weight:400; font-size:clamp(16px,1.7vw,21px);line-height:1.85;max-width:34ch;position:relative;z-index:2; } .slate--lit .slate__text{color:rgba(0,0,0,.78);font-weight:500} .slate--dark .slate__text{color:var(--mute)} /* رقم اللقطة الشبح */ .slate__ghost{ position:absolute;bottom:-.26em;inset-inline-end:clamp(20px,2.4vw,40px); font-family:var(--f-lat);font-weight:700;font-size:clamp(90px,12vw,170px);line-height:1; color:transparent;z-index:1;pointer-events:none; } .slate--lit .slate__ghost{-webkit-text-stroke:1.5px rgba(0,0,0,.14)} .slate--dark .slate__ghost{-webkit-text-stroke:1.5px rgba(146,224,161,.16)} /* إطار القص المتقطّع داخل اللوح */ .slate__crop{position:absolute;inset:14px;border:1px dashed currentColor;opacity:.22;border-radius:16px;pointer-events:none} /* شرائط الكلاكيت المائلة أعلى اللوحين — يقرآن كزوج من ألواح التصوير */ .slate::before{ content:"";position:absolute;top:0;inset-inline:0;height:16px;z-index:2; } .slate--lit::before{ background:repeating-linear-gradient(115deg,var(--black) 0 16px,transparent 16px 32px); opacity:.85; } .slate--dark::before{ background:repeating-linear-gradient(115deg,var(--green) 0 16px,transparent 16px 32px); opacity:.5; } /* ============================================================ القيم — شريط فيلم من خمس لقطات ============================================================ */ .values__head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap} .values__hint{font-size:13px;color:var(--mute-2);font-family:var(--f-text)} .reel{ position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:2px; background:var(--g-16);border-radius:20px;overflow:hidden; padding-block:20px;margin-top:26px; } /* ثقوب الفيلم أعلى وأسفل الشريط */ .reel::before,.reel::after{ content:"";position:absolute;inset-inline:0;height:20px;z-index:3;pointer-events:none; background:radial-gradient(circle 4.5px at 16px 50%,var(--black) 97%,transparent 100%) repeat-x; background-size:34px 20px; } .reel::before{top:0} .reel::after{bottom:0} .reel__frame{ position:relative;background:var(--g-03);padding:clamp(26px,2.6vw,36px) clamp(18px,1.8vw,26px); display:flex;flex-direction:column;gap:10px;overflow:hidden; transition:background .5s var(--ease),color .4s var(--ease); } /* «مرور الضوء» عبر اللقطة عند المرور بالمؤشر */ .reel__frame::before{ content:"";position:absolute;inset:0;background:var(--green); transform:translateY(101%);transition:transform .55s var(--ease); } .reel__frame:hover::before{transform:translateY(0)} .reel__frame>*{position:relative;z-index:2} .reel__n{ font-family:var(--f-lat);font-size:11px;letter-spacing:.18em;color:var(--green); transition:color .4s; } .reel__frame b{font-family:var(--f-disp);font-weight:800;font-size:clamp(20px,2.1vw,27px);line-height:1.15} .reel__frame p{font-size:14px;color:var(--mute);line-height:1.85;transition:color .4s} .reel__frame:hover{color:var(--black)} .reel__frame:hover .reel__n{color:rgba(0,0,0,.55)} .reel__frame:hover p{color:rgba(0,0,0,.75)} /* ---------- SERVICES ---------- */ .svc{display:grid;grid-template-columns:1fr 1fr;gap:20px} .svc__card{ position:relative;padding:clamp(28px,3.6vw,52px);border-radius:24px; border:1px solid var(--line);overflow:hidden; background:linear-gradient(200deg,var(--g-16) 0%,var(--ink-1) 46%); transition:transform .6s var(--ease),border-color .5s; } .svc__card--orange{border-color:rgba(254,104,6,.3);background:linear-gradient(200deg,var(--o-12) 0%,var(--ink-1) 44%);box-shadow:inset 0 0 0 1px rgba(254,104,6,.035)} .svc__card:hover{transform:translateY(-6px);border-color:rgba(146,224,161,.32)} .svc__card--orange:hover{border-color:rgba(254,104,6,.34)} .svc__glow{ position:absolute;width:520px;height:520px;border-radius:50%;pointer-events:none; background:radial-gradient(circle,rgba(146,224,161,.13),transparent 62%); inset-inline-start:var(--mx,50%);top:var(--my,50%);transform:translate(50%,-50%); opacity:0;transition:opacity .5s; } .svc__card--orange .svc__glow{background:radial-gradient(circle,rgba(254,104,6,.14),transparent 62%)} .svc__card:hover .svc__glow{opacity:1} .svc__card header{display:flex;align-items:baseline;gap:18px;margin-bottom:20px;position:relative;z-index:2} .svc__num{font-family:var(--f-lat);font-size:13px;color:var(--green);letter-spacing:.1em} .svc__card--orange .svc__num{color:var(--orange)} .svc__card h3{font-size:clamp(26px,3.2vw,40px)} .svc__card>p{color:var(--mute);max-width:44ch;font-size:15.5px;line-height:1.95;position:relative;z-index:2} /* ---- بوكسات الخدمات: كتلة واحدة مائلة تنزل من فوق ---- الميلان يُطبَّق على الحاوية كاملة (وحدة بصرية واحدة)، وداخلها إيقاع صفوف منتظم بتداخل رأسي ثابت — بلا أي عشوائية. */ .svc__list{ --lean:-3deg; /* ميلان المجموعة ككل */ --overlap:8px; /* مقدار تداخل الصفوف (داخل الحشو فقط، لا يمس النص) */ --colgap:7px; margin-block-start:calc(34px - var(--overlap)); margin-block-end:18px; /* تحديد العرض يضبط إيقاع الالتفاف: ٤ صفوف متوازنة بدل صفوف عريضة مفكّكة */ max-width:min(100%,34rem);margin-inline:auto; display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start; column-gap:var(--colgap);row-gap:0; position:relative;z-index:2; transform:rotate(var(--lean)); transform-origin:50% 50%; } .svc__list li{ margin-block-start:calc(var(--overlap) * -1); position:relative;z-index:1; opacity:0; transform:translateY(-46px) rotate(-7deg); transition:opacity .45s var(--ease),transform .78s cubic-bezier(.22,1.26,.36,1); will-change:transform,opacity; } .svc__card.in .svc__list li{opacity:1;transform:translateY(0) rotate(0deg)} /* ترتيب الطبقات: الصف الأعلى فوق الذي يليه — إحساس رصّة أوراق */ .svc__list li:nth-child(1){z-index:19;transition-delay:.06s} .svc__list li:nth-child(2){z-index:18;transition-delay:.12s} .svc__list li:nth-child(3){z-index:17;transition-delay:.18s} .svc__list li:nth-child(4){z-index:16;transition-delay:.24s} .svc__list li:nth-child(5){z-index:15;transition-delay:.30s} .svc__list li:nth-child(6){z-index:14;transition-delay:.36s} .svc__list li:nth-child(7){z-index:13;transition-delay:.42s} .svc__list li:nth-child(8){z-index:12;transition-delay:.48s} .svc__list li:nth-child(9){z-index:11;transition-delay:.54s} /* عند المرور: يعتدل البوكس عموديًا (يلغي ميلان المجموعة) ويرتفع */ .svc__card.in .svc__list li:hover{ z-index:40; transform:translateY(-7px) rotate(calc(var(--lean) * -1)) scale(1.035); transition-delay:0s; } /* السطح الفاعل: أخضر النمو مصمت + نص أسود دامس — نفس منطق «الأيقونات المبسّطة» في الدليل (شكل مصمت بلون الهوية). حالة التمييز الأقصى = الأبيض النقي. */ /* ---- وضع الفيزياء: الكبسولات تسقط وتتكوّم داخل حوض البطاقة ---- */ .svc__list.phys-on{ display:block;position:relative;transform:none;margin-inline:0;max-width:100%; height:clamp(300px,32vw,400px);overflow:hidden; margin-block:26px 4px;touch-action:pan-y; } .svc__list.phys-on::after{ /* أرضية الحوض */ content:"";position:absolute;bottom:0;inset-inline:0;height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent); } .svc__list.phys-on li{ position:absolute;left:0;top:0;margin:0;opacity:1; transition:none;will-change:transform;cursor:grab; } .svc__list.phys-on.is-dragging li{cursor:grabbing} .svc__list.phys-on li span{width:100%;height:100%;user-select:none;white-space:nowrap} /* كبسولة زجاجية عميقة — «خامة» زجاج ملوّن معتم: لون الهوية بشفافية منخفضة فوق الأسود ينتج أخضرًا غائرًا، ونص أبيض نقي. الشكل كبسولة كاملة الاستدارة — نفس بناء علامة سكوب ميديا. */ .svc__list li span{ position:relative;overflow:hidden; display:flex;align-items:center;justify-content:center;text-align:center; min-height:52px;padding:0 26px;border-radius:999px;white-space:nowrap; font-size:14.5px;font-weight:600;line-height:1.35; color:var(--white);letter-spacing:.004em; background: linear-gradient(150deg, rgba(146,224,161,.62) 0%, rgba(146,224,161,.44) 48%, rgba(146,224,161,.52) 100%); -webkit-backdrop-filter:blur(16px) saturate(1.35); backdrop-filter:blur(16px) saturate(1.35); border:1px solid rgba(146,224,161,.34); box-shadow: 0 16px 30px -14px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.20), inset 0 -14px 22px -14px rgba(0,0,0,.55); transition:background .35s var(--ease),box-shadow .35s var(--ease),color .35s,border-color .35s; } /* لمعة ناعمة من الطرف العلوي — بلا بريق حادّ */ .svc__list li span::after{ content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit; background:linear-gradient(152deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.06) 26%, rgba(255,255,255,0) 52%); } /* عند المرور: يشتدّ الزجاج ويضيء رِمُّه */ .svc__list li:hover span{ background:linear-gradient(150deg,rgba(146,224,161,.72) 0%,rgba(146,224,161,.5) 55%,rgba(146,224,161,.6) 100%); border-color:rgba(146,224,161,.7); box-shadow:0 22px 40px -14px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.34); } /* بطاقة الحلول التسويقية: نفس الخامة بالبرتقالي الناري */ .svc__card--orange .svc__list li span{ background: linear-gradient(150deg, rgba(254,104,6,.74) 0%, rgba(254,104,6,.56) 48%, rgba(254,104,6,.64) 100%); border-color:rgba(254,104,6,.46); } .svc__card--orange .svc__list li:hover span{ background:linear-gradient(150deg,rgba(254,104,6,.76) 0%,rgba(254,104,6,.54) 55%,rgba(254,104,6,.62) 100%); border-color:rgba(254,104,6,.74); } /* شاشات صغيرة: ميلان أهدأ ومقاسات أصغر حتى يبقى الإيقاع نظيفًا */ @media (max-width:560px){ .svc__list{--lean:-2.2deg;--overlap:7px;--colgap:6px;max-width:100%} .svc__list li span{min-height:42px;padding:0 15px;font-size:13px;border-radius:12px} } /* ---------- PROCESS ---------- */ .process{position:relative;padding:clamp(90px,10vw,150px) 0;background:linear-gradient(180deg,var(--black),var(--g-10) 48%,var(--g-16) 100%);border-block:1px solid var(--line);overflow:hidden} .process__sticky{position:relative;overflow:visible} .process__head{padding-bottom:clamp(42px,5vw,72px)} .process__title{max-width:16ch} .process__track{direction:rtl;position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px;width:min(1180px,calc(100% - var(--pad)*2));margin-inline:auto} .step{ width:auto;min-height:260px;padding:clamp(28px,3vw,42px);border-radius:22px; background:linear-gradient(165deg,var(--ink-3),rgba(9,13,10,.35));border:1px solid var(--line); position:relative;overflow:hidden;transition:transform .45s var(--ease),border-color .4s,background .4s; } .step:nth-child(1){grid-column:1/span 2}.step:nth-child(2){grid-column:3/span 2}.step:nth-child(3){grid-column:5/span 2} .step:nth-child(4){grid-column:2/span 2}.step:nth-child(5){grid-column:4/span 2} .step:hover{transform:translateY(-7px);border-color:rgba(146,224,161,.38);background:linear-gradient(165deg,var(--g-16),rgba(9,13,10,.5))} .step::before{ content:"";position:absolute;top:0;inset-inline-start:0;width:0;height:2px;background:var(--green); transition:width .8s var(--ease); } .step:hover::before{width:100%} .step__n{ font-family:var(--f-lat);font-size:clamp(46px,6vw,84px);font-weight:200;line-height:1; color:transparent;-webkit-text-stroke:1px rgba(146,224,161,.45);display:block;margin-bottom:22px; } .step h3{font-size:clamp(21px,2.4vw,30px);margin-bottom:14px} .step p{color:var(--mute);font-size:15px;line-height:1.9} .step--end{margin:0} @media (max-width:800px){.process__track{grid-template-columns:1fr 1fr}.step:nth-child(n){grid-column:auto;min-height:240px}.step:last-child{grid-column:1/-1;width:calc(50% - 10px);justify-self:center}} @media (max-width:560px){.process__track{grid-template-columns:1fr}.step:nth-child(n),.step:last-child{grid-column:1;width:100%;min-height:0}} /* ---------- WORK ---------- */ .feature{ display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,3vw,48px);align-items:center; padding:clamp(20px,2.4vw,32px);border:1px solid var(--line);border-radius:26px; background:linear-gradient(140deg,var(--ink-2),var(--ink-1));margin-bottom:20px; transition:border-color .5s; } .feature:hover{border-color:rgba(146,224,161,.3)} /* الطبقة التصويرية — دليل الهوية «نمط الصور»: أبيض وأسود سينمائي، والأخضر يدخل كمصدر ضوء داخل المشهد لا كصبغة تغطّيه (BRAND-SYSTEM.md §7). الرماديات هنا مشروعة لأنها تمثّل الصورة الفوتوغرافية بالأبيض والأسود. */ .gel{ position:relative;overflow:hidden; background: radial-gradient(52% 42% at 30% 26%,rgba(146,224,161,.42),rgba(146,224,161,.10) 52%,transparent 76%), radial-gradient(120% 100% at 24% 4%,rgba(255,255,255,.16),transparent 58%), linear-gradient(168deg,#242424 0%,#0C0C0C 58%,var(--black) 100%); } .gel::after{ content:"";position:absolute;inset:0;pointer-events:none; background: repeating-linear-gradient(108deg,rgba(255,255,255,.032) 0 2px,transparent 2px 11px), radial-gradient(120% 100% at 50% 120%,rgba(0,0,0,.62),transparent 58%); box-shadow:inset 0 0 90px rgba(0,0,0,.55); } .feature__media{ position:relative;border-radius:16px;overflow:hidden;aspect-ratio:16/9; display:grid;place-items:center; } .feature__preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:grayscale(1) sepia(.72) hue-rotate(74deg) saturate(1.45) brightness(.76) contrast(1.08);transition:transform 1.2s var(--ease),filter .85s var(--ease)} .feature:hover .feature__preview,.feature:focus-within .feature__preview{transform:scale(1.025);filter:grayscale(0) sepia(0) hue-rotate(0) saturate(1) brightness(1) contrast(1.03)} .feature__media::before{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background: linear-gradient(196deg,rgba(146,224,161,.14),transparent 44%), radial-gradient(70% 55% at 74% 84%,rgba(146,224,161,.09),transparent 62%); transition:transform 1.4s var(--ease); } .feature__media.gel::after{z-index:1;opacity:.34} .feature__media .play,.feature__media .tc{z-index:2} .feature:hover .feature__media::before,.feature:focus-within .feature__media::before{transform:scale(1.18) rotate(-4deg);opacity:.18} .feature__title-ghost{ position:absolute;inset-inline-start:26px;bottom:20px; font-family:var(--f-disp);font-weight:900;font-size:clamp(34px,6vw,74px); color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.16);line-height:1; } .tc{ position:absolute;top:16px;inset-inline-end:18px;font-family:var(--f-lat); font-size:11px;letter-spacing:.12em;color:rgba(255,255,255,.42); padding:5px 10px;border-radius:6px;background:rgba(0,0,0,.35);border:1px solid var(--line); } .play{ position:absolute;inset:0;margin:auto;width:88px;height:88px;border-radius:50%; background:rgba(0,0,0,.35);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.35); display:grid;place-items:center;transition:all .45s var(--ease); } .play::after{ content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid rgba(146,224,161,.5); animation:ring 2.6s var(--ease-2) infinite; } @keyframes ring{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.55);opacity:0}} .play i{ width:0;height:0;border-block:9px solid transparent; border-right:0;border-left:15px solid var(--white);margin-right:0;margin-left:-3px; } .feature:hover .play{background:var(--green);border-color:var(--green)} .feature:hover .play i{border-left-color:var(--black)} .play--sm{width:56px;height:56px;opacity:0;transform:scale(.7)} .wcard:hover .play--sm{opacity:1;transform:scale(1)} .feature__kind{font-family:var(--f-lat);font-size:11px;letter-spacing:.2em;color:var(--green);text-transform:uppercase;margin-bottom:14px} .feature__body h3{font-size:clamp(30px,4.2vw,56px);margin-bottom:16px} .feature__desc{color:var(--mute);line-height:1.95;font-size:15.5px;max-width:38ch} .feature__links{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:22px} .feature__watch{display:inline-flex;align-items:center;gap:9px;min-height:42px;padding:0 16px;border:1px solid var(--line);border-radius:999px;color:var(--white);font-size:13px;transition:background .35s,border-color .35s,color .35s,transform .35s} .feature__watch i{width:0;height:0;border-block:5px solid transparent;border-left:8px solid currentColor} .feature__watch:hover{transform:translateY(-2px);border-color:rgba(146,224,161,.5);background:rgba(146,224,161,.08)} .feature__watch--primary{background:var(--green);border-color:var(--green);color:var(--black);font-weight:700} .feature__watch--primary:hover{background:#b4f1c0;border-color:#b4f1c0} .feature__meta{display:flex;gap:34px;margin-top:30px;padding-top:24px;border-top:1px solid var(--line);flex-wrap:wrap} .feature__meta b{display:block;font-family:var(--f-lat);font-size:24px;font-weight:600} .feature__meta span{font-size:13px;color:var(--mute-2)} .grid-work{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .wcard{display:block;color:inherit;border-radius:20px;overflow:hidden;border:1px solid var(--line);background:var(--ink-1);transition:transform .6s var(--ease),border-color .5s,box-shadow .5s} .wcard:hover{transform:translateY(-8px);border-color:rgba(146,224,161,.38);box-shadow:0 24px 54px rgba(0,0,0,.45)} .wcard__media{position:relative;aspect-ratio:16/10;display:grid;place-items:center;overflow:hidden} .wcard__media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) sepia(.72) hue-rotate(74deg) saturate(1.45) brightness(.75) contrast(1.08);transition:transform 1s var(--ease),filter .8s var(--ease)} .wcard:hover .wcard__media>img,.wcard:focus-visible .wcard__media>img{transform:scale(1.06);filter:grayscale(0) sepia(0) hue-rotate(0) saturate(1) brightness(1) contrast(1.03)} .wcard__media::before{ content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(190deg,rgba(146,224,161,.24),transparent 46%); transition:transform 1.1s var(--ease),opacity .5s; } .wcard:hover .wcard__media::before,.wcard:focus-visible .wcard__media::before{transform:scale(1.22) rotate(5deg);opacity:.16} /* تدرّجات إضاءة مختلفة لكل عمل — كلها ضمن مدى الزمرد مع لمسة برتقالية نادرة */ .wcard__media[data-hue="1"]::before{background:linear-gradient(160deg,rgba(146,224,161,.22),transparent 52%),radial-gradient(60% 50% at 80% 88%,rgba(254,104,6,.16),transparent 60%)} .wcard__media[data-hue="2"]::before{background:radial-gradient(80% 60% at 42% 100%,rgba(146,224,161,.30),transparent 62%)} .wcard__media[data-hue="3"]::before{background:linear-gradient(215deg,rgba(255,255,255,.20),transparent 48%)} .wcard__media[data-hue="4"]::before{background:linear-gradient(150deg,rgba(254,104,6,.16),transparent 44%),radial-gradient(70% 60% at 20% 90%,rgba(146,224,161,.24),transparent 60%)} .wcard__media[data-hue="5"]::before{background:radial-gradient(70% 70% at 66% 8%,rgba(146,224,161,.30),transparent 58%)} .wcard__foot{padding:20px 22px 24px} .wcard__foot b{display:block;font-family:var(--f-disp);font-size:20px;font-weight:800;margin-bottom:5px} .video-modal{position:fixed;z-index:10000;inset:0;display:grid;place-items:center;padding:clamp(14px,3vw,42px);visibility:hidden;opacity:0;transition:opacity .35s var(--ease),visibility .35s} .video-modal.is-open{visibility:visible;opacity:1} .video-modal__backdrop{position:absolute;inset:0;width:100%;height:100%;border:0;background:rgba(0,5,2,.88);backdrop-filter:blur(14px);cursor:pointer} .video-modal__panel{position:relative;width:min(1120px,94vw);border:1px solid rgba(146,224,161,.28);border-radius:24px;overflow:hidden;background:#020805;box-shadow:0 34px 100px rgba(0,0,0,.78),0 0 60px rgba(79,190,120,.1);transform:translateY(22px) scale(.98);transition:transform .45s var(--ease)} .video-modal.is-open .video-modal__panel{transform:none} .video-modal__top{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 20px 0 14px;border-bottom:1px solid rgba(146,224,161,.16);color:var(--white)} .video-modal__top strong{font-family:var(--f-disp);font-size:18px} .video-modal__close{display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(146,224,161,.28);border-radius:50%;background:rgba(146,224,161,.08);color:var(--green);font-size:28px;line-height:1;cursor:pointer;transition:background .3s,color .3s,transform .3s} .video-modal__close:hover{background:var(--green);color:var(--black);transform:rotate(6deg)} .video-modal__frame{position:relative;aspect-ratio:16/9;background:#000} .video-modal__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000} body.video-is-open{overflow:hidden} /* ---------- CAMPAIGNS & IDENTITIES ---------- */ .brand-work{overflow:hidden;background:linear-gradient(180deg,var(--black),#07130c 48%,var(--black))} .brand-work__head{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(30px,6vw,90px);align-items:end;margin-bottom:clamp(48px,7vw,92px)} .brand-work__head .h2{max-width:15ch} .brand-work__intro{max-width:38ch;color:var(--mute);font-size:clamp(15px,1.35vw,18px);line-height:1.95} .brand-cases{display:grid;gap:clamp(28px,4vw,56px)} .success-stories{margin-bottom:clamp(90px,12vw,170px)} .success-stories__bar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:clamp(26px,4vw,54px)} .success-stories__track{display:flex;gap:clamp(18px,2.4vw,34px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:8px} .success-stories__track::-webkit-scrollbar{display:none} .success-stories__label{display:flex;align-items:center;gap:16px;margin-bottom:16px;color:var(--green)} .success-stories__label span{display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(146,224,161,.28);border-radius:50%;font-family:var(--f-lat);font-size:11px} .success-stories__label p{font-size:14px;font-weight:600} .campaign-slider__nav{display:flex;align-items:center;gap:9px;direction:rtl} .campaign-slider__btn{width:46px;height:46px;display:grid;place-items:center;border:1px solid rgba(146,224,161,.34);border-radius:50%;color:var(--green);background:rgba(146,224,161,.035);font-family:var(--f-lat);font-size:20px;transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)} .campaign-slider__btn:hover{background:var(--green);color:var(--black);transform:translateY(-2px)} .success-story{position:relative;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(320px,.55fr);flex:0 0 100%;scroll-snap-align:start;min-height:clamp(560px,52vw,720px);border:1px solid var(--line);overflow:hidden;background:#07100a} .success-story:nth-of-type(even){grid-template-columns:minmax(320px,.55fr) minmax(0,1.45fr)} .success-story:nth-of-type(even) .success-story__media{order:2} .success-story__media{position:relative;overflow:hidden;min-height:560px;background:#102419} .success-story__image{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter 1.2s var(--ease)} .success-story:hover .success-story__image{transform:scale(1.035);filter:saturate(1.06)} .success-story__shot{position:absolute;z-index:2;bottom:clamp(22px,3vw,42px);inset-inline-end:clamp(22px,3vw,42px);width:clamp(128px,16vw,220px);aspect-ratio:3/4;object-fit:cover;border:5px solid #07100a;box-shadow:0 24px 50px rgba(0,0,0,.56);transform:rotate(2deg);transition:transform .8s var(--ease)} .success-story:hover .success-story__shot{transform:translateY(-8px) rotate(-1deg)} .success-story__media--qudurati .success-story__shot{aspect-ratio:4/3;width:clamp(180px,22vw,300px)} .success-story__media::after{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(4,17,10,.54));pointer-events:none} .success-story__badge{position:absolute;z-index:3;top:clamp(22px,3vw,42px);inset-inline-start:clamp(22px,3vw,42px);display:flex;flex-direction:column;gap:3px;padding:17px 20px;background:rgba(4,17,10,.82);border:1px solid rgba(146,224,161,.4);backdrop-filter:blur(10px)} .success-story__badge b{font-family:var(--f-lat);font-size:clamp(30px,4vw,56px);font-weight:400;line-height:.9;color:var(--green)} .success-story__badge i{font-style:normal;font-size:11px;color:rgba(255,255,255,.68)} .success-story__copy{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;padding:clamp(34px,4vw,62px);border-inline-start:1px solid var(--line)} .success-story:nth-of-type(even) .success-story__copy{border-inline-start:0;border-inline-end:1px solid var(--line)} .success-story__meta{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:clamp(30px,4vw,58px);font-size:11px;color:rgba(255,255,255,.48)} .success-story__meta span{font-family:var(--f-lat);color:var(--green);letter-spacing:.16em} .success-story__copy h3{font-family:var(--f-disp);font-size:clamp(34px,3.7vw,56px);line-height:1.08;letter-spacing:-.03em;font-weight:900} .success-story__copy>p{max-width:46ch;margin-top:25px;color:var(--mute);font-size:clamp(14px,1.3vw,17px);line-height:1.95} .success-story__copy aside{display:grid;gap:7px;margin-top:30px;padding-top:20px;border-top:1px solid var(--line);font-size:12px} .success-story__copy aside b{color:var(--green)}.success-story__copy aside span{color:var(--mute)} .success-story__stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:30px;border-top:1px solid var(--line)} .success-story__stats li{display:flex;flex-direction:column;gap:5px;padding:18px 6px;border-inline-start:1px solid var(--line)} .success-story__stats li:first-child{border-inline-start:0} .success-story__stats b{font-family:var(--f-lat);font-size:clamp(17px,1.7vw,24px);font-weight:500}.success-story__stats span{font-size:10px;color:var(--mute)} .identity-section__head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:30px;padding-bottom:24px;border-bottom:1px solid var(--line)} .identity-section__head p{font-size:13px;color:var(--green)}.identity-section__head h3{font-family:var(--f-disp);font-size:clamp(30px,4vw,58px);font-weight:900} .brand-cases--identity .brand-case{min-height:clamp(520px,50vw,680px)} /* ---------- معرض الهويات المنفَّذة ---------- شبكة تتمدّد بعدد الأعمال، فلا يحتاج القسم تعديلًا كلما أُضيفت هوية. */ .identity-tags{display:flex;flex-wrap:wrap;gap:9px;list-style:none;margin:0 0 30px;padding:0} .identity-tags[hidden]{display:none} .identity-tags li{padding:8px 13px;border:1px solid var(--line);border-radius:100px;color:var(--mute);font-size:12px} /* الحدّ الأدنى مضبوط ليتّسع السطر لثلاث بطاقات على الشاشة العادية — حاوية القسم أضيق من العرض الكلي، فحدٌّ أوسع كان يهبط بها إلى اثنتين. */ .idworks{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(220px,20vw,272px),1fr));gap:clamp(14px,1.6vw,22px)} .idworks[hidden]{display:none} .idwork{ display:block;border:1px solid var(--line);border-radius:var(--r);overflow:hidden; background:#07100a;transition:border-color .4s var(--ease),transform .4s var(--ease); } .idwork[href]{cursor:pointer} .idwork:hover{border-color:rgba(146,224,161,.42);transform:translateY(-4px)} .idwork__media{display:block;position:relative;background:var(--g-06)} .idwork__media img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .9s var(--ease)} .idwork--contain .idwork__media img{object-fit:contain;padding:clamp(14px,2vw,26px)} .idwork:hover .idwork__media img{transform:scale(1.04)} .idwork__foot{display:flex;flex-direction:column;gap:3px;padding:15px 18px 17px;border-top:1px solid var(--line-2)} .idwork__foot b{font-family:var(--f-disp);font-size:17px;font-weight:800;line-height:1.25} .idwork__foot i{font-style:normal;font-size:12.5px;color:var(--mute-2)} .idwork__foot i:empty{display:none} /* عدّاد اللوحات الإضافية داخل العمل */ .idwork__more{ position:absolute;inset-block-end:10px;inset-inline-end:10px; padding:5px 11px;border-radius:100px;font-family:var(--f-lat);font-size:11.5px;font-weight:600; color:var(--black);background:var(--green);pointer-events:none; } .idwork__more[hidden]{display:none} /* ---------- عارض الصور ---------- */ .lbx{position:fixed;inset:0;z-index:210;display:grid;place-items:center;padding:clamp(48px,7vw,84px) clamp(14px,5vw,72px)} .lbx[hidden]{display:none} .lbx__scrim{position:absolute;inset:0;background:rgba(0,0,0,.93);opacity:0;transition:opacity .3s var(--ease)} .lbx.is-on .lbx__scrim{opacity:1} .lbx__stage{ position:relative;z-index:2;margin:0;display:flex;flex-direction:column;align-items:center;gap:16px; max-width:100%;max-height:100%;opacity:0;transform:scale(.97); transition:opacity .3s var(--ease),transform .3s var(--ease); } .lbx.is-on .lbx__stage{opacity:1;transform:none} .lbx__stage img{ max-width:100%;max-height:calc(100vh - clamp(190px,20vw,250px)); width:auto;height:auto;object-fit:contain;border-radius:14px; box-shadow:0 40px 100px rgba(0,0,0,.7); } .lbx__cap{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center;text-align:center} .lbx__cap b{font-family:var(--f-disp);font-size:19px} .lbx__count{font-family:var(--f-lat);font-size:12.5px;color:var(--mute-2)} .lbx__link{font-size:12.5px;color:var(--green);text-decoration:underline;text-underline-offset:4px} .lbx__link[hidden]{display:none} .lbx__x{ position:absolute;z-index:3;inset-block-start:clamp(14px,2vw,26px);inset-inline-end:clamp(14px,2vw,26px); border:0;cursor:pointer;background:rgba(255,255,255,.1);color:var(--white); font-family:var(--f-text);font-size:12.5px;font-weight:600;padding:9px 18px;border-radius:100px; transition:background .25s,color .25s; } .lbx__x:hover{background:var(--green);color:var(--black)} .lbx__nav{ position:absolute;z-index:3;inset-block-start:50%;transform:translateY(-50%); width:clamp(40px,4vw,52px);aspect-ratio:1;border:1px solid rgba(255,255,255,.22);border-radius:50%; background:rgba(0,0,0,.5);color:var(--white);cursor:pointer;font-size:24px;line-height:1; display:grid;place-items:center;transition:background .25s,border-color .25s,color .25s; } .lbx__nav:hover{background:var(--green);border-color:var(--green);color:var(--black)} .lbx__nav[hidden]{display:none} .lbx__prev{inset-inline-end:clamp(8px,2vw,26px)} .lbx__next{inset-inline-start:clamp(8px,2vw,26px)} @media (max-width:560px){ .lbx__nav{inset-block-start:auto;inset-block-end:clamp(14px,4vw,22px);transform:none} } .brand-case{position:relative;display:grid;grid-template-columns:1.42fr .58fr;min-height:clamp(520px,54vw,720px);border:1px solid var(--line);overflow:hidden;background:#07100a} .brand-case:nth-child(even){grid-template-columns:.58fr 1.42fr} .brand-case:nth-child(even) .brand-case__visual{order:2} .brand-case__visual{position:relative;overflow:hidden;min-height:440px;background:#0a1710} .brand-case__copy{position:relative;z-index:3;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(28px,4vw,58px);border-inline-start:1px solid var(--line)} .brand-case:nth-child(even) .brand-case__copy{border-inline-start:0;border-inline-end:1px solid var(--line)} .brand-case__num{position:absolute;top:30px;inset-inline-end:34px;font-family:var(--f-lat);font-size:11px;letter-spacing:.18em;color:var(--green)} .brand-case__copy>p{font-size:13px;color:var(--green);margin-bottom:18px} .brand-case__copy h3{font-family:var(--f-disp);font-size:clamp(34px,4vw,62px);font-weight:900;line-height:1.08;letter-spacing:-.025em} .brand-case__copy ul{display:flex;flex-wrap:wrap;gap:9px;margin-top:34px} .brand-case__copy li{padding:8px 13px;border:1px solid var(--line);border-radius:100px;color:var(--mute);font-size:12px} .brand-case--campaign .brand-case__visual{background:radial-gradient(circle at 50% 45%,rgba(146,224,161,.18),transparent 58%),#06110a;perspective:1200px} .campaign-poster{position:absolute;top:50%;left:50%;width:clamp(190px,26vw,350px);aspect-ratio:3/4;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(18px,2.4vw,34px);border:1px solid rgba(255,255,255,.18);box-shadow:0 30px 70px rgba(0,0,0,.5);transition:transform .9s var(--ease),filter .9s var(--ease)} .campaign-poster b{font-family:var(--f-disp);font-size:clamp(48px,7vw,100px);line-height:.82;font-weight:900} .campaign-poster i{font-family:var(--f-lat);font-size:11px;letter-spacing:.2em;font-style:normal} .campaign-poster--back{background:#dce5de;color:#07100a;transform:translate(-105%,-52%) rotate(-12deg) translateZ(-120px)} .campaign-poster--mid{background:#163f29;color:#92e0a1;transform:translate(-45%,-53%) rotate(5deg) translateZ(-40px)} .campaign-poster--front{background:#92e0a1;color:#07100a;transform:translate(8%,-48%) rotate(-3deg) translateZ(50px)} .brand-case:hover .campaign-poster--back{transform:translate(-118%,-55%) rotate(-16deg) translateZ(-80px)} .brand-case:hover .campaign-poster--mid{transform:translate(-45%,-56%) rotate(1deg) translateZ(0)} .brand-case:hover .campaign-poster--front{transform:translate(18%,-50%) rotate(2deg) translateZ(90px)} .brand-case__cursor{position:absolute;bottom:28px;left:30px;font-family:var(--f-lat);font-size:9px;letter-spacing:.25em;color:rgba(255,255,255,.42)} .identity-board{background:linear-gradient(145deg,#0b2015,#07100a 65%);display:grid;place-items:center;isolation:isolate} .identity-board::before{content:"";position:absolute;width:68%;aspect-ratio:1;border:1px solid rgba(146,224,161,.22);border-radius:50%;box-shadow:0 0 0 70px rgba(146,224,161,.025),0 0 0 140px rgba(146,224,161,.018);transition:transform 1.2s var(--ease)} .brand-case:hover .identity-board::before{transform:scale(1.12) rotate(20deg)} .identity-board>img{position:relative;z-index:2;width:clamp(150px,22vw,300px);filter:drop-shadow(0 22px 30px rgba(0,0,0,.42));transition:transform .8s var(--ease)} .brand-case:hover .identity-board>img{transform:scale(1.08) rotate(-2deg)} .identity-board__type{position:absolute;top:34px;inset-inline-start:36px;display:flex;flex-direction:column;font-family:var(--f-lat);line-height:.86;color:rgba(255,255,255,.78)} .identity-board__type b{font-size:clamp(22px,3vw,42px);letter-spacing:.02em}.identity-board__type span{font-size:11px;letter-spacing:.5em;color:var(--green)} .identity-board__swatches{position:absolute;bottom:34px;inset-inline-end:36px;display:flex;gap:8px} .identity-board__swatches i{display:block;width:30px;height:30px;border-radius:50%;background:#04110a;border:1px solid rgba(255,255,255,.15)} .identity-board__swatches i:nth-child(2){background:#163f29}.identity-board__swatches i:nth-child(3){background:#4fbe78}.identity-board__swatches i:nth-child(4){background:#92e0a1} .identity-board__grid{position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(146,224,161,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(146,224,161,.055) 1px,transparent 1px);background-size:48px 48px} @media(max-width:900px){.brand-work__head{grid-template-columns:1fr}.brand-case,.brand-case:nth-child(even){grid-template-columns:1fr}.brand-case:nth-child(even) .brand-case__visual{order:0}.brand-case__copy,.brand-case:nth-child(even) .brand-case__copy{border-inline:0;border-top:1px solid var(--line);min-height:340px}.brand-case__visual{min-height:520px}} @media(max-width:900px){.success-story,.success-story:nth-of-type(even){grid-template-columns:1fr}.success-story:nth-of-type(even) .success-story__media{order:0}.success-story__media{min-height:520px}.success-story__copy,.success-story:nth-of-type(even) .success-story__copy{border-inline:0;border-top:1px solid var(--line)}.identity-section__head{align-items:flex-start;flex-direction:column}} @media(max-width:840px){.success-stories__bar{margin-bottom:18px}.success-stories__label{margin-bottom:0}.success-stories__track{gap:14px}.success-story,.success-story:nth-of-type(even){flex-basis:calc(100% - 30px);min-height:0}.success-story__media{min-height:330px}} @media(max-width:560px){.brand-case__visual{min-height:400px}.campaign-poster{width:190px}.brand-case__copy{min-height:300px}.identity-board__swatches i{width:24px;height:24px}} @media(max-width:560px){.success-story__media{min-height:390px}.success-story__copy{padding:28px 22px}.success-story__shot{width:112px;border-width:3px}.success-story__media--qudurati .success-story__shot{width:160px}.success-story__stats{grid-template-columns:1fr}.success-story__stats li{border-inline:0;border-top:1px solid var(--line)}} .wcard__foot span{font-size:13.5px;color:var(--mute-2)} /* ---------- CLIENTS ---------- */ .clients{overflow:hidden} .clients__title{max-width:12ch;line-height:1.12;text-wrap:balance} .clients__title span{display:block;white-space:nowrap} .partner-gallery{display:grid;gap:clamp(22px,3vw,38px)} .partner-gallery__intro{display:flex;align-items:end;justify-content:space-between;gap:30px;padding-inline:2px} .partner-gallery__intro h3{font-family:var(--f-disp);font-size:clamp(30px,3.3vw,52px);font-weight:800;line-height:1.05;color:var(--white);margin:0} .partner-gallery__intro h3::after{content:"";display:block;width:54px;height:3px;margin-top:16px;background:var(--green)} .partner-gallery__intro p{max-width:440px;margin:0;color:var(--mute);font-size:15px;line-height:1.9;text-align:start} .partner-gallery__grid{ direction:rtl;display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); position:relative;isolation:isolate;align-items:center;background:transparent; column-gap:0;row-gap:0;padding:10px 0 150px;overflow:visible;perspective:1200px; } .partner-gallery__grid::before{content:"";position:absolute;z-index:-2;left:-7%;right:-7%;bottom:28px;height:205px;pointer-events:none;clip-path:polygon(8% 0,92% 0,100% 72%,94% 100%,6% 100%,0 72%);background:radial-gradient(ellipse at 50% 3%,rgba(146,224,161,.25),rgba(46,146,87,.11) 32%,transparent 67%),linear-gradient(180deg,#102b1c 0%,#081b11 55%,#030b07 100%);border-top:1px solid rgba(146,224,161,.34);box-shadow:inset 0 20px 42px rgba(146,224,161,.08),0 -20px 70px rgba(79,190,120,.12),0 34px 54px rgba(0,0,0,.72);transform:perspective(850px) rotateX(10deg);transform-origin:50% 0} .partner-gallery__grid::after{content:"";position:absolute;z-index:-3;left:-3%;right:-3%;bottom:0;height:68px;pointer-events:none;border-radius:0 0 18% 18%/0 0 62% 62%;background:linear-gradient(180deg,#07170e 0%,#020805 58%,#000 100%);border-top:1px solid rgba(146,224,161,.12);box-shadow:0 28px 55px rgba(0,0,0,.82),inset 0 10px 20px rgba(146,224,161,.025)} .partner-logo{ grid-column:auto;position:relative;min-width:0;aspect-ratio:1.5;margin:0;overflow:visible; scale:1.12;transform-origin:center; filter:drop-shadow(0 18px 18px rgba(0,0,0,.5)); transition:filter .4s var(--ease),transform .45s var(--ease),scale .45s var(--ease); } .partner-logo--priority{grid-row:1} .partner-logo--priority:nth-child(1){grid-column:1} .partner-logo--priority:nth-child(2){grid-column:2} .partner-logo--priority:nth-child(3){grid-column:3} .partner-logo--priority:nth-child(4){grid-column:4} .partner-logo::before{content:"";position:absolute;z-index:0;inset:0;background:url("../img/tv/retro-tv-frame.webp") center/108% auto no-repeat;filter:grayscale(1) sepia(.65) hue-rotate(72deg) saturate(1.15) brightness(.58) contrast(1.08);transition:filter .4s var(--ease)} .partner-logo:nth-child(3n+2)::before{background-image:url("../img/tv/retro-tv-b.webp")} .partner-logo:nth-child(3n)::before{background-image:url("../img/tv/retro-tv-c.webp")} .partner-logo:nth-child(-n+3){aspect-ratio:1.5} .partner-logo:last-child{grid-column:auto} .partner-logo:nth-child(-n+3){z-index:1} .partner-logo:nth-child(n+4):nth-child(-n+8){z-index:3;margin-top:0} .partner-logo:nth-child(n+9){z-index:5;margin-top:0} .partner-logo:nth-child(4n+1){transform:rotate(-.42deg) translateY(5px)} .partner-logo:nth-child(4n+2){transform:rotate(.3deg) translateY(-2px)} .partner-logo:nth-child(4n+3){transform:rotate(-.2deg) translateY(6px)} .partner-logo:nth-child(4n){transform:rotate(.38deg)} .partner-logo::after{content:none} .partner-logo:nth-child(n+9)::after{content:"";position:absolute;z-index:-1;left:10%;right:10%;bottom:3%;height:8%;border-radius:50%;background:rgba(0,0,0,.74);filter:blur(8px);transform:scaleX(.9)} .tv-screen{position:absolute;z-index:2;left:15.8%;top:18%;width:53.4%;height:62.2%;display:grid;place-items:center;overflow:hidden;border:1px solid rgba(1,7,4,.72);border-radius:18% 17% 17% 19%/20% 18% 19% 21%;background:radial-gradient(ellipse at 46% 40%,#67cd80 0%,#4bb66c 34%,#2d8750 57%,#155235 76%,#071d11 90%,#020b06 100%);box-shadow:0 0 0 1px rgba(0,0,0,.34),inset 1px 1px 3px rgba(220,255,228,.14),inset -1px -1px 5px rgba(0,0,0,.58),inset 0 0 32px 11px rgba(1,10,5,.5);filter:contrast(1.04) saturate(.92)} .partner-logo:nth-child(3n+2) .tv-screen{left:16.6%;top:17.6%;width:52.4%;height:62.5%;border-radius:17% 19% 18% 17%/19% 21% 20% 18%} .partner-logo:nth-child(3n) .tv-screen{left:16.2%;top:18.2%;width:53.4%;height:61%;border-radius:19% 17% 18% 20%/21% 19% 18% 20%} .tv-screen::before,.tv-screen::after{content:"";position:absolute;inset:0;pointer-events:none} .tv-screen::before{z-index:1;opacity:.34} .tv-screen::after{z-index:2;background:linear-gradient(118deg,rgba(238,255,242,.1) 0%,rgba(238,255,242,.025) 17%,transparent 31%),repeating-linear-gradient(0deg,rgba(1,8,4,.08) 0 1px,transparent 1px 4px),radial-gradient(ellipse at center,transparent 54%,rgba(1,7,4,.2) 80%,rgba(0,3,1,.5) 100%);box-shadow:inset 0 0 3px 1px rgba(0,0,0,.58),inset 0 0 30px 9px rgba(2,13,7,.36)} .tv-screen img{position:relative;z-index:4;display:block;width:62%;height:52%;object-fit:contain;filter:none;opacity:1;animation:none;transition:transform .35s var(--ease)} .tv-screen img[src*="partner-02.png"]{width:78%;height:72%;filter:brightness(0) invert(1)} .tv-screen img[src*="partner-03.png"]{width:66%;height:58%;object-position:center} .tv-screen img[src*="partner-hr-clear.png"]{width:84%;height:70%;object-position:center;filter:brightness(0) invert(1)} .tv-screen img[src*="partner-12.svg"]{width:62%;height:56%;object-position:center;filter:brightness(0) invert(1)} .tv-screen img[src*="partner-13.png"]{width:64%;height:54%;object-position:center;filter:brightness(0) invert(1)} /* شعار أُعلم أنه داكن من لوحة الإدارة — يُعرض أبيض */ .tv-screen img.logo-white{filter:brightness(0) invert(1)} .tv-screen img[src*="partner-08.png"]{filter:brightness(0) invert(1)} .tv-screen img[src*="partner-14.png"]{width:88%;height:78%} .tv-screen img[src*="partner-05.png"]{filter:brightness(0) invert(1)} .tv-screen img[src*="partner-06.png"]{width:76%;height:62%} .tv-screen img[src*="partner-07.png"]{width:72%;height:62%} .partner-gallery__more{position:absolute;z-index:8;left:50%;bottom:55px;display:grid;place-items:center;min-width:clamp(150px,18vw,250px);height:72px;transform:translateX(-50%) perspective(520px) rotateX(10deg);pointer-events:none} .partner-gallery__more::before{content:"";position:absolute;inset:18% -12%;border-radius:50%;background:radial-gradient(ellipse,rgba(146,224,161,.25),rgba(79,190,120,.08) 42%,transparent 72%);filter:blur(9px);animation:more-floor-glow 4.4s ease-in-out infinite alternate} .partner-gallery__more::after{content:"";position:absolute;left:2%;right:2%;bottom:5px;height:2px;background:linear-gradient(90deg,transparent,rgba(146,224,161,.62),transparent);box-shadow:0 0 14px rgba(146,224,161,.35)} .partner-gallery__more span{position:relative;z-index:2;font-family:var(--f-disp);font-size:clamp(32px,4vw,60px);font-weight:800;line-height:1;color:var(--green);text-shadow:0 2px 0 rgba(0,0,0,.8),0 0 12px rgba(146,224,161,.34),0 12px 22px rgba(0,0,0,.75);animation:more-floor-text 4.4s ease-in-out infinite alternate} @keyframes more-floor-glow{from{opacity:.45;transform:scaleX(.86)}to{opacity:1;transform:scaleX(1.08)}} @keyframes more-floor-text{from{filter:brightness(.82);transform:translateY(2px)}to{filter:brightness(1.12);transform:translateY(-2px)}} .partner-logo:nth-child(5n+1) .tv-screen::before{background:linear-gradient(180deg,transparent 0 42%,rgba(196,241,206,.52) 48%,rgba(79,190,120,.2) 53%,transparent 60%);animation:fx-roll 6.8s linear infinite} .partner-logo:nth-child(5n+2) .tv-screen::before{background:radial-gradient(circle at 30% 35%,rgba(196,241,206,.68),transparent 32%);animation:fx-pulse 4.6s ease-in-out infinite alternate} .partner-logo:nth-child(5n+3) .tv-screen::before{background:linear-gradient(108deg,transparent 0 38%,rgba(255,255,255,.46) 46%,transparent 54%);animation:fx-sweep 8.4s ease-in-out infinite} .partner-logo:nth-child(5n+4) .tv-screen::before{background:radial-gradient(circle,rgba(4,17,10,.24) 0 1px,transparent 1.6px);background-size:7px 7px;animation:fx-drift 7s linear infinite} .partner-logo:nth-child(5n) .tv-screen::before{background:repeating-linear-gradient(90deg,transparent 0 18px,rgba(255,255,255,.18) 19px,transparent 21px);animation:fx-bars 5.8s ease-in-out infinite alternate} .partner-logo:hover{filter:drop-shadow(0 24px 24px rgba(0,0,0,.62)) drop-shadow(0 0 12px rgba(146,224,161,.12));transform:rotate(0) translateY(-6px) scale(1.018);z-index:10} .partner-logo:hover::before{filter:grayscale(1) sepia(.72) hue-rotate(72deg) saturate(1.25) brightness(.66) contrast(1.08)} .partner-logo:hover .tv-screen img{opacity:1;transform:scale(1.04)} @keyframes fx-roll{from{transform:translateY(-90%)}to{transform:translateY(90%)}} @keyframes fx-pulse{from{opacity:.14;transform:scale(.86)}to{opacity:.46;transform:scale(1.15)}} @keyframes fx-sweep{0%,15%{transform:translateX(-120%)}70%,100%{transform:translateX(120%)}} @keyframes fx-drift{to{background-position:21px 14px}} @keyframes fx-bars{from{transform:translateX(-12px);opacity:.16}to{transform:translateX(12px);opacity:.38}} @media (max-width:900px){ .partner-gallery__grid{grid-template-columns:repeat(2,minmax(0,1fr))} .partner-gallery__grid{padding-bottom:105px} .partner-gallery__grid::before{inset-inline:-4vw;height:170px} .partner-gallery__grid::after{bottom:0;height:48px} .partner-logo{scale:1.07} .partner-logo--priority,.partner-logo--priority:nth-child(1),.partner-logo--priority:nth-child(2),.partner-logo--priority:nth-child(3),.partner-logo--priority:nth-child(4){grid-row:auto;grid-column:auto} .partner-logo,.partner-logo:nth-child(-n+3),.partner-logo:last-child{grid-column:auto;aspect-ratio:1.5} .partner-logo:nth-child(n+4):nth-child(-n+8),.partner-logo:nth-child(n+9){margin-top:0} .partner-gallery__more{left:50%;bottom:32px;height:62px} } @media (max-width:560px){ .partner-gallery__intro{display:block} .partner-gallery__intro h3{margin-bottom:16px} .partner-gallery__grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:0;row-gap:0} .partner-logo,.partner-logo:nth-child(-n+3),.partner-logo:last-child{grid-column:span 1;aspect-ratio:1.5;margin:0} .partner-logo:last-child{width:100%;justify-self:stretch;grid-column:auto} .partner-logo:nth-child(n+4):nth-child(-n+8),.partner-logo:nth-child(n+9){margin-top:0} .partner-gallery__more{left:50%;bottom:28px;min-width:128px;height:50px} .partner-gallery__more span{font-size:clamp(27px,9vw,40px)} } @media (prefers-reduced-motion:reduce){.tv-screen::before,.tv-screen img{animation:none}.partner-logo{transform:none!important}} /* ---------- CTA ---------- */ .cta{position:relative;padding:clamp(70px,10vw,150px) 0;overflow:hidden;border-top:1px solid var(--line); background:linear-gradient(180deg,var(--black),var(--g-06) 60%,var(--black))} .cta__glow{ position:absolute;bottom:-40%;left:50%;transform:translateX(-50%); width:120vw;height:70vw;max-height:820px; background:radial-gradient(ellipse at 50% 50%,rgba(146,224,161,.24),rgba(146,224,161,.06) 45%,transparent 66%); } .cta .wrap{position:relative;z-index:2} /* «الجدار الأخضر» — اللحظة اللونية المميزة في الهوية */ .wall{position:relative;perspective:1800px} .wall__inner{ position:relative;transform-style:preserve-3d; transition:transform .95s cubic-bezier(.65,0,.25,1),min-height .65s var(--ease); min-height:clamp(480px,48vw,640px); } .wall.is-flipped .wall__inner{transform:rotateY(180deg)} /* أرضية اللوح: أخضر النمو مسطّحًا كما هو في الهوية، مع نفَس ضوء خفيف جدًا من الأعلى. التدرّج السابق كان يُعتم الطرف السفلي ويطمس نقاء اللون. للعودة إلى المسطّح التام: احذف سطر الـradial-gradient فقط. */ .wall__face{ position:absolute;inset:0;overflow:hidden;border-radius:28px; -webkit-backface-visibility:hidden;backface-visibility:hidden; color:var(--black); background: radial-gradient(78% 58% at 50% -6%,rgba(255,255,255,.26),transparent 64%), var(--green); box-shadow:0 0 140px rgba(146,224,161,.26),0 0 0 1px rgba(146,224,161,.5) inset; } .wall__face::after{ content:"";position:absolute;inset:14px;border:1px dashed rgba(0,0,0,.25); border-radius:16px;pointer-events:none; } .wall__front{ display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center; padding:clamp(30px,3.6vw,54px) clamp(24px,5vw,80px) clamp(38px,4.6vw,64px); } .wall__back{ transform:rotateY(180deg);display:flex;flex-direction:column; padding:clamp(26px,3.2vw,44px) clamp(22px,3.6vw,52px) clamp(22px,2.6vw,36px); } .wall.is-flipped .wall__front{pointer-events:none} /* حجب الوجه الخلفي لا يُترك لـbackface-visibility وحده: WebKit على iOS يُسطّح أي عنصر داخل preserve-3d إذا حمل overflow:hidden — وحينها يظهر الوجه الأمامي معكوسًا فوق النموذج. نخفيه صراحةً بـvisibility عند منتصف الدوران (نصف مدة الانتقال) فيبقى القلب سلسًا والنتيجة مضمونة. */ .wall__face{transition:visibility 0s linear .47s} .wall__back{visibility:hidden} .wall.is-flipped .wall__front{visibility:hidden} .wall.is-flipped .wall__back{visibility:visible} .wall__mark{ position:absolute;top:26px;inset-inline-end:34px;font-family:var(--f-lat); font-size:10px;letter-spacing:.2em;color:rgba(0,0,0,.5);z-index:2; } /* ظلّ الأرضية أُلغي مع اعتماد الأخضر المسطّح — كان يُثقل الطرف السفلي */ .wall__floor{display:none} .tag--dark{color:var(--black)} .tag--dark i{background:var(--black)} .cta__title{ font-family:var(--f-disp);font-weight:900;font-size:clamp(27px,4.2vw,56px); line-height:1.22;max-width:21ch;margin-inline:auto;letter-spacing:-.015em;position:relative;z-index:2; } .cta__lead{margin:22px auto 0;max-width:46ch;color:rgba(0,0,0,.72);font-size:clamp(15px,1.5vw,18px);line-height:1.95;position:relative;z-index:2} .cta__actions{display:flex;gap:14px;margin-top:44px;flex-wrap:wrap;justify-content:center;position:relative;z-index:2} /* ============================================================ زر التواصل — طبقة تحفيز: حلقة نابضة + مرور ضوء + سهم ينزلق كلها بألوان الهوية، وتتوقّف فور تفاعل الزائر مع الزر. ============================================================ */ .btn--pulse{overflow:visible} /* حلقة تتمدّد من حافة الزر */ .btn--pulse::after{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0; box-shadow:0 0 0 0 rgba(0,0,0,.5); animation-name:btnRing;animation-duration:3.4s; animation-timing-function:cubic-bezier(.65,0,.35,1);animation-iteration-count:infinite; } @keyframes btnRing{ 0%{box-shadow:0 0 0 0 rgba(0,0,0,.45)} 60%{box-shadow:0 0 0 20px rgba(0,0,0,0)} 100%{box-shadow:0 0 0 0 rgba(0,0,0,0)} } /* مرور ضوء داخل الزر — نفس لغة وميض العدسة في الهيرو */ .btn__shine{ position:absolute;inset:0;border-radius:inherit;overflow:hidden;z-index:1;pointer-events:none; } .btn__shine::before{ content:"";position:absolute;top:-40%;bottom:-40%;width:38%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent); transform:translateX(-160%) rotate(8deg); animation:btnShine 3.4s var(--ease-2) infinite; } @keyframes btnShine{ 0%{transform:translateX(-160%) rotate(8deg)} 38%,100%{transform:translateX(420%) rotate(8deg)} } /* سهم مصمت ينزلق عند المرور */ .btn__arrow{ position:relative;z-index:2;width:0;height:0;margin-inline-start:0; border-block:5px solid transparent;border-right:8px solid currentColor; opacity:0;transform:translateX(6px); transition:opacity .35s var(--ease),transform .35s var(--ease),margin .35s var(--ease); } .btn--pulse:hover .btn__arrow{opacity:1;transform:none;margin-inline-start:12px} /* يهدأ التحفيز فور تفاعل الزائر */ .btn--pulse:hover::after,.btn--pulse:focus-visible::after, .btn--pulse:hover .btn__shine::before{animation:none} .btn--pulse:hover .btn__shine::before{opacity:0} .wall.is-flipped .btn--pulse::after, .wall.is-flipped .btn--pulse .btn__shine::before{animation:none} /* سطر التواصل المباشر أسفل الزر */ .cta__direct{ margin-top:22px;font-size:14.5px;color:rgba(0,0,0,.66);position:relative;z-index:2; display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap; } .cta__direct a{ font-weight:700;color:var(--black);position:relative;font-family:var(--f-lat); letter-spacing:.04em; } .cta__direct a::after{ content:"";position:absolute;inset-inline:0;bottom:-3px;height:1.5px; background:var(--black);transform:scaleX(.28);transform-origin:100% 50%; transition:transform .4s var(--ease); } .cta__direct a:hover::after{transform:scaleX(1)} .cta__sep{opacity:.45} /* زر التواصل السريع العائم */ .quick{ position:fixed;bottom:22px;inset-inline-start:22px;z-index:6500; display:flex;align-items:center;gap:10px;padding:13px 20px;border-radius:100px; background:var(--green);color:var(--black);font-size:14px;font-weight:700; box-shadow:0 16px 34px -12px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.3); opacity:0;visibility:hidden;transform:translateY(14px) scale(.96); transition:opacity .45s var(--ease),transform .45s var(--ease),visibility .45s,background .3s; } .quick.on{opacity:1;visibility:visible;transform:none} .quick:hover{background:var(--g-soft)} .quick__dot{ width:9px;height:9px;border-radius:50%;background:var(--black);position:relative;flex:none; } .quick__dot::after{ content:"";position:absolute;inset:-5px;border-radius:50%; border:1.5px solid rgba(0,0,0,.55);animation:ring 2.4s var(--ease-2) infinite; } .ftr__phone{display:block;font-family:var(--f-lat);letter-spacing:.04em;color:var(--green)!important} /* ---------- نموذج التواصل على الجدار الأخضر ---------- */ .form__head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;position:relative;z-index:2} .form__title{font-family:var(--f-disp);font-weight:800;font-size:clamp(24px,2.8vw,36px);line-height:1.15} .form__close{ border:0;background:transparent;cursor:pointer;font-family:var(--f-text); font-size:13px;font-weight:600;color:rgba(0,0,0,.62); display:flex;align-items:center;gap:8px;padding:8px 4px;transition:color .3s; } /* سهم مصمت داخل دائرة — التزامًا بأسلوب الأيقونات في الدليل */ .form__close::after{ content:"";width:26px;height:26px;border-radius:50%;flex:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.35); background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M8 1 L8 9 L2 5 Z' fill='%23000'/%3E%3C/svg%3E") center/9px 9px no-repeat; transition:transform .3s var(--ease); } .form__close:hover::after{transform:translateX(-3px)} .form__close:hover{color:var(--black)} .form__close:hover::after{transform:translateX(-3px)} .form{ display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.4vw,18px); margin-top:clamp(18px,2.2vw,28px);position:relative;z-index:2; } .field{display:flex;flex-direction:column;gap:7px;min-width:0} .field--full{grid-column:1 / -1} .field label{font-size:13px;font-weight:600;color:rgba(0,0,0,.72)} .field label b{color:var(--black)} .field input,.field select,.field textarea{ width:100%;font-family:var(--f-text);font-size:15px;color:var(--black); background:rgba(255,255,255,.62);border:1px solid rgba(0,0,0,.22);border-radius:14px; padding:11px 16px;transition:border-color .25s,background .25s,box-shadow .25s; -webkit-appearance:none;appearance:none; } .field textarea{resize:vertical;min-height:68px;line-height:1.65} .field select{ background-image:linear-gradient(45deg,transparent 50%,rgba(0,0,0,.7) 50%), linear-gradient(135deg,rgba(0,0,0,.7) 50%,transparent 50%); background-position:calc(0% + 18px) 22px,calc(0% + 23px) 22px; background-size:5px 5px,5px 5px;background-repeat:no-repeat; } .field input::placeholder,.field textarea::placeholder{color:rgba(0,0,0,.42)} .field input:focus,.field select:focus,.field textarea:focus{ outline:0;background:rgba(255,255,255,.85);border-color:var(--black); box-shadow:0 0 0 3px rgba(0,0,0,.14); } .field__err{font-size:12px;color:var(--black);font-weight:600;min-height:0;opacity:0;transition:opacity .2s} .field.is-bad input,.field.is-bad select{border-color:var(--black);background:rgba(255,255,255,.9)} .field.is-bad .field__err{opacity:1} .multi-select{position:relative} .multi-select__toggle{width:100%;min-height:46px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 16px;border:1px solid rgba(0,0,0,.22);border-radius:14px;background:rgba(255,255,255,.62);font-family:var(--f-text);font-size:15px;color:var(--black);cursor:pointer;text-align:right;transition:border-color .25s,background .25s,box-shadow .25s} .multi-select__toggle i{width:8px;height:8px;flex:none;border-inline-end:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .3s var(--ease)} .multi-select.is-open .multi-select__toggle{background:rgba(255,255,255,.9);border-color:var(--black);box-shadow:0 0 0 3px rgba(0,0,0,.12)} .multi-select.is-open .multi-select__toggle i{transform:rotate(225deg) translate(-2px,-2px)} .multi-select__menu{position:absolute;z-index:12;top:calc(100% + 7px);inset-inline:0;display:grid;padding:7px;border:1px solid rgba(0,0,0,.2);border-radius:14px;background:#eff9f1;box-shadow:0 18px 36px rgba(0,0,0,.2);opacity:0;visibility:hidden;transform:translateY(-7px);transition:opacity .25s,visibility .25s,transform .25s var(--ease)} .multi-select.is-open .multi-select__menu{opacity:1;visibility:visible;transform:none} .multi-select__menu label{display:flex;align-items:center;gap:10px;min-height:40px;padding:7px 10px;border-radius:9px;color:rgba(0,0,0,.82);font-size:14px;cursor:pointer;transition:background .2s} .multi-select__menu label:hover{background:rgba(79,190,120,.16)} .multi-select__menu input{appearance:none;-webkit-appearance:none;width:18px;height:18px;flex:none;margin:0;padding:0;border:1px solid rgba(0,0,0,.38);border-radius:5px;background:rgba(255,255,255,.7);display:grid;place-items:center;box-shadow:none} .multi-select__menu input::after{content:"✓";font-family:Arial,sans-serif;font-size:14px;font-weight:700;line-height:1;color:#fff;transform:scale(0);transition:transform .18s var(--ease)} .multi-select__menu input:checked{background:#17683d;border-color:#17683d}.multi-select__menu input:checked::after{transform:scale(1)} /* ---------- حقول نموذج التقديم المبنيّة من اللوحة ---------- تستعمل نفس أصناف .field فترث المظهر، ولا تضيف إلا ما يخصّ مجموعات الاختيار التي لا وجود لها في النموذج الثابت. */ .field__hint{font-size:12px;color:rgba(0,0,0,.55);margin:-2px 0 0} .opts{display:flex;flex-wrap:wrap;gap:8px} .opts label{ display:inline-flex;align-items:center;gap:8px;cursor:pointer; padding:9px 14px;border-radius:100px;font-size:14px;color:rgba(0,0,0,.82); background:rgba(255,255,255,.5);border:1px solid rgba(0,0,0,.22); transition:background .2s,border-color .2s; } .opts label:hover{background:rgba(255,255,255,.8)} .opts input{ appearance:none;-webkit-appearance:none;width:16px;height:16px;flex:none;margin:0; border:1px solid rgba(0,0,0,.38);background:rgba(255,255,255,.7); display:grid;place-items:center; } .opts input[type="radio"]{border-radius:50%} .opts input[type="checkbox"]{border-radius:5px} .opts input::after{content:"";width:8px;height:8px;border-radius:inherit;background:#fff;transform:scale(0);transition:transform .18s var(--ease)} .opts input:checked{background:#17683d;border-color:#17683d} .opts input:checked::after{transform:scale(1)} .opts label:has(input:checked){background:rgba(23,104,61,.10);border-color:#17683d} .field.is-bad .opts label{border-color:var(--black)} .form__actions{grid-column:1 / -1;display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:4px} .form__note{font-size:12.5px;color:rgba(0,0,0,.6)} /* حالة النجاح */ .form__done{ position:absolute;inset:clamp(22px,3vw,44px);z-index:3;border-radius:18px; display:none;flex-direction:column;align-items:center;justify-content:center; text-align:center;gap:12px;background:rgba(255,255,255,.5); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); } .wall.is-sent .form__done{display:flex} .wall.is-sent .form,.wall.is-sent .form__head{opacity:.12;pointer-events:none} /* فخ العناكب — بعيد عن العين وعن قارئ الشاشة، ويظل قابلًا للملء آليًا */ .field--trap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);opacity:0;pointer-events:none} /* زر «تابع على واتساب» في شاشة النجاح */ #doneWa{text-decoration:none;display:inline-flex;align-items:center} .form__done-mark{ width:52px;height:52px;border-radius:50%;background:var(--black);position:relative; } .form__done-mark::after{ content:"";position:absolute;inset:0;margin:auto;width:16px;height:9px; border-left:2.5px solid var(--green);border-bottom:2.5px solid var(--green); transform:rotate(-45deg) translate(1px,-2px); } .form__done b{font-family:var(--f-disp);font-size:26px;font-weight:800} .form__done p{max-width:34ch;font-size:14.5px;color:rgba(0,0,0,.72)} /* ============================================================ نافذة التقديم نفس أرضية لوح التواصل الخضراء ونفس أصناف الحقول، فالنموذجان يبدوان واحدًا وإن اختلف موضعهما. ============================================================ */ .modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:clamp(14px,3vw,40px)} .modal[hidden]{display:none} .modal__scrim{ position:absolute;inset:0;background:rgba(0,0,0,.74); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); opacity:0;transition:opacity .32s var(--ease); } .modal.is-on .modal__scrim{opacity:1} .modal__panel{ position:relative;width:min(720px,100%); max-height:calc(100vh - clamp(28px,6vw,80px)); max-height:calc(100dvh - clamp(28px,6vw,80px)); overflow:auto;overscroll-behavior:contain;border-radius:28px;color:var(--black); padding:clamp(30px,3.4vw,46px) clamp(22px,3.6vw,52px) clamp(24px,2.8vw,38px); background: radial-gradient(78% 58% at 50% -6%,rgba(255,255,255,.26),transparent 64%), var(--green); box-shadow:0 50px 130px rgba(0,0,0,.65),0 0 0 1px rgba(146,224,161,.5) inset; opacity:0;transform:translateY(20px) scale(.98); transition:opacity .34s var(--ease),transform .34s var(--ease); } .modal.is-on .modal__panel{opacity:1;transform:none} .modal__x{ position:absolute;inset-block-start:clamp(14px,1.6vw,20px);inset-inline-end:clamp(14px,1.6vw,20px); z-index:4;border:0;cursor:pointer;background:rgba(0,0,0,.08); font-family:var(--f-text);font-size:12.5px;font-weight:600;color:rgba(0,0,0,.66); padding:8px 16px;border-radius:100px;transition:background .25s,color .25s; } .modal__x:hover{background:var(--black);color:var(--green)} .modal__head{padding-inline-end:clamp(64px,8vw,96px)} .modal__title{font-family:var(--f-disp);font-weight:800;font-size:clamp(24px,2.8vw,36px);line-height:1.15;margin:0} .modal__sub{margin:10px 0 0;font-size:13.5px;color:rgba(0,0,0,.62)} .modal__sub[hidden]{display:none} /* شاشة النجاح تغطّي النموذج داخل النافذة كما تغطّيه داخل اللوح */ .modal .form__done{inset:clamp(18px,2.4vw,32px)} .modal.is-sent .form__done{display:flex} .modal.is-sent .form,.modal.is-sent .modal__head{opacity:.12;pointer-events:none} .btn--dark{background:var(--black);color:var(--g-soft)} .btn--dark::before{background:var(--black)} .btn--dark:hover{color:#fff} .btn--outline-dark{background:transparent;color:var(--black);box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)} .btn--outline-dark::before{background:var(--black)} .btn--outline-dark:hover{color:var(--g-soft)} /* ---------- FOOTER ---------- */ .ftr{background:var(--ink-1);border-top:1px solid var(--line);padding-top:clamp(50px,7vw,90px)} .ftr__top{display:grid;grid-template-columns:1.25fr 1fr .9fr .9fr auto;gap:36px;padding-bottom:60px} .ftr__logo{display:block;width:168px;height:auto;aspect-ratio:939.86/500.1;object-fit:contain;object-position:right center} .ftr__brand p{color:var(--mute-2);font-size:14px;margin-top:16px} .ftr__social-col{justify-self:end;text-align:left} .ftr__social{display:flex;align-items:center;gap:10px;margin-top:0;direction:ltr} .ftr__social-item{position:relative;display:grid;place-items:center;width:46px;height:46px;border:1px solid rgba(146,224,161,.28);border-radius:15px;background:radial-gradient(circle at 68% 24%,rgba(255,255,255,.72) 0 8%,transparent 22%),linear-gradient(145deg,var(--green),#4fbe78);color:#07100a;box-shadow:0 10px 26px rgba(0,0,0,.24);transition:transform .35s var(--ease),box-shadow .35s var(--ease),filter .35s var(--ease)} .ftr__social-item:hover{transform:translateY(-5px) rotate(-2deg);box-shadow:0 17px 34px rgba(0,0,0,.38),0 0 22px rgba(146,224,161,.16);filter:brightness(1.08)} .ftr__social-item img{display:block;width:22px;height:22px;object-fit:contain} .ftr__social-item--x img{width:19px;height:19px} .ftr__social-item--linkedin img{width:21px;height:21px} .ftr__social-item--tiktok img{width:21px;height:21px} .ftr__social-item--instagram img{width:23px;height:23px} .ftr__col h4{font-family:var(--f-lat);font-size:11px;letter-spacing:.2em;color:var(--green);font-weight:500;margin-bottom:16px;text-transform:uppercase} .ftr__col p{color:var(--mute);font-size:14.5px;line-height:2} .ftr__col a{transition:color .3s} .ftr__col a:hover{color:var(--green)} .ftr__bot{ display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap; padding:24px 0;border-top:1px solid var(--line);font-size:12.5px;color:var(--mute-2); } /* عنصر SCOPE MEDIA® أُزيل من التذييل — القاعدة تبقى لتسهيل إرجاعه */ .ftr__mark{font-family:var(--f-lat);letter-spacing:.18em;font-size:11px} /* جهة التطوير — حضور هادئ لا ينافس هوية سكوب ميديا: الشعار مكتوم افتراضيًا ويستعيد لونه الكامل عند المرور عليه */ .ftr__by{ display:inline-flex;align-items:center;gap:12px;text-decoration:none; color:var(--mute);font-size:12.5px;opacity:.85; transition:opacity .3s var(--ease),transform .3s var(--ease); } .ftr__by img{ height:28px;width:auto;display:block; transition:transform .3s var(--ease); } .ftr__by[href]:hover{opacity:1} .ftr__by[href]:hover img{transform:scale(1.06)} .ftr__by:focus-visible{opacity:1;outline:2px solid var(--green);outline-offset:6px;border-radius:6px} @media (max-width:640px){ .ftr__bot{justify-content:center;text-align:center;gap:14px} } /* ============================================================ الشاشات القصيرة — حشوة الهيرو العلوية كانت ثابتة 150px بينما السفلية تتجاوب مع الارتفاع، فعلى شاشة 689px يصير مجموع الحشوتين 260px مع محتوى 494px = 755px، فيخرج «مرّر» وشعار SCOPEMEDIA.SA أسفل الشاشة. القاعدة تعمل تحت 800px ارتفاعًا فقط، فلا تمسّ الشاشات الأطول إطلاقًا. ============================================================ */ @media (max-height:800px){ .hero{padding-top:clamp(80px,14vh,120px);padding-bottom:clamp(56px,10vh,90px)} } @media (max-height:620px){ .hero{padding-top:60px;padding-bottom:44px} } /* ============================================================ ANIMATION UTILITIES ============================================================ */ .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)} .reveal.in{opacity:1;transform:none} .reveal[data-delay="1"]{transition-delay:.09s} .reveal[data-delay="2"]{transition-delay:.18s} .reveal[data-delay="3"]{transition-delay:.27s} .reveal[data-delay="4"]{transition-delay:.36s} .line{ display:inline-block;overflow:hidden;vertical-align:top; padding-bottom:.18em;margin-bottom:-.18em; } .word{display:inline-block;transform:translateY(110%) rotate(3deg);transition:transform .85s var(--ease)} .split.in .word{transform:none} /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1080px){ .about__grid,.svc,.vm__grid{grid-template-columns:1fr} .pillars{grid-template-columns:1fr} .pillars li:nth-child(2),.pillars li:nth-child(2):hover{transform:none} /* الشريط يصبح قابلًا للسحب أفقيًا — كتمرير الفيلم */ .reel{ grid-template-columns:repeat(5,minmax(230px,1fr)); grid-template-rows:1fr;grid-auto-flow:column; overflow-x:auto;scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;scrollbar-width:none; } .reel::-webkit-scrollbar{display:none} .reel__frame{scroll-snap-align:center} .reel::before,.reel::after{position:absolute;inset-inline:0} .grid-work{grid-template-columns:repeat(2,1fr)} .feature{grid-template-columns:1fr} .ftr__top{grid-template-columns:1fr 1fr} } @media (max-width:840px){ .hdr__nav{display:none} .header-logo-en{width:148px} .hdr .btn--sm{display:none} .burger{display:flex;margin-inline-start:auto} .hero{padding-top:120px} .hero__row{width:100%}.hero__secret{display:none} .process{height:auto} .grid-work{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .wcard{border-radius:14px} .wcard__media{aspect-ratio:1.08/1} .wcard__foot{padding:13px 12px 15px;min-height:104px} .wcard__foot b{font-size:15px;line-height:1.2;margin-bottom:6px} .wcard__foot span{font-size:11px;line-height:1.55} .play--sm{width:42px;height:42px;opacity:.88;transform:scale(.78)} .values__list{grid-template-columns:1fr} .ftr__top{grid-template-columns:1fr;gap:32px} .hero__scroll{display:none} } @media (max-width:640px){ .hdr__brandlockup{display:none} .brand-icon{width:46px} .form{grid-template-columns:1fr;gap:11px} .wall__inner{min-height:580px} .wall.is-flipped .wall__inner{min-height:770px} .form__actions{flex-direction:column;align-items:stretch;text-align:center} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} .btn--pulse::after,.btn__shine::before{animation:none!important;display:none} /* بلا دوران ثلاثي الأبعاد — تبديل مباشر بين الوجهين */ .wall__inner{transform:none!important} /* بلا حركة: التبديل فوري، فلا معنى لتأخير منتصف الدوران */ .wall__face{backface-visibility:visible;transition-delay:0s!important} .wall__back{transform:none;visibility:hidden} .wall.is-flipped .wall__front{visibility:hidden} .wall.is-flipped .wall__back{visibility:visible} .reveal{opacity:1;transform:none} .word{transform:none} .svc__list li{opacity:1;transform:none} .grain{display:none} } /* ============ LANGUAGE SWITCH ============ */ .lang-switch { appearance: none; background: transparent; border: 1px solid rgba(255,255,255,.28); color: #fff; border-radius: 999px; padding: .5rem 1rem; font: inherit; font-weight: 700; font-size: .8rem; letter-spacing: .08em; line-height: 1; cursor: pointer; transition: border-color .25s ease, color .25s ease, transform .25s ease; } .lang-switch:hover { border-color: #92E0A1; color: #92E0A1; transform: translateY(-1px); } .menu .lang-switch--menu { margin-top: 1.6rem; font-size: 1rem; align-self: start; } /* ============ LTR ADJUSTMENTS ============ */ html[dir="ltr"] .campaign-slider__btn span { display: inline-block; transform: scaleX(-1); } html[dir="ltr"] .link-arrow i { transform: scaleX(-1); } /* ============ ENGLISH LAYOUT TUNING ============ English words are wider than their Arabic counterparts. These rules keep the same art direction while giving the translated copy its own rhythm. */ body.lang-en{font-family:var(--f-lat);line-height:1.65} body.lang-en h1,body.lang-en h2,body.lang-en h3,body.lang-en h4, body.lang-en .reel__frame b,body.lang-en .pillars b{font-family:var(--f-lat);letter-spacing:-.035em} body.lang-en .hero__title{max-width:13ch;font-size:clamp(40px,min(6.3vw,9.2vh),88px);line-height:1.02} body.lang-en .hero__lead{line-height:1.72} body.lang-en .hero__secret span{left:auto;right:clamp(4%,7vw,10%);direction:ltr;text-align:left;font-family:var(--f-lat);font-size:clamp(68px,8vw,124px);line-height:.9} body.lang-en .brand-moment__title{font-family:var(--f-lat);font-size:clamp(70px,11vw,174px);letter-spacing:-.075em;line-height:.88} body.lang-en .pillars li{padding-inline:clamp(26px,2.7vw,40px)} body.lang-en .pillars b{font-size:clamp(22px,2.15vw,31px);line-height:1.08;overflow-wrap:anywhere} body.lang-en .pillars__d{line-height:1.65} body.lang-en .reel__frame b{font-size:clamp(17px,1.65vw,23px);line-height:1.18;overflow-wrap:anywhere} body.lang-en .reel__frame p{font-size:13px;line-height:1.6} body.lang-en .slate__text{line-height:1.55} body.lang-en .clients__title{max-width:14ch} body.lang-en .clients__title span{white-space:normal} body.lang-en .ftr__top{grid-template-columns:1.2fr 1fr 1fr 1fr auto;gap:28px} @media (max-width:1080px){ body.lang-en .pillars b{font-size:30px;overflow-wrap:normal} body.lang-en .reel__frame b{font-size:22px} body.lang-en .ftr__top{grid-template-columns:1fr 1fr} } @media (max-width:840px){ body.lang-en .header-logo-en{width:132px} body.lang-en .hdr{gap:10px} body.lang-en .hdr .lang-switch{padding:.42rem .72rem;font-size:.72rem;flex:none} body.lang-en .hero__title{max-width:11.5ch;font-size:clamp(42px,12.2vw,58px);line-height:1.02} body.lang-en .hero__lead{font-size:15px;line-height:1.68} body.lang-en .brand-moment__title{font-size:17vw;line-height:.92;white-space:normal;text-wrap:balance} body.lang-en .brand-moment__steps{max-width:94%;flex-wrap:wrap;line-height:1.4} body.lang-en .pillars b{font-size:27px} body.lang-en .reel{grid-template-columns:repeat(5,minmax(250px,1fr))} body.lang-en .reel__frame b{font-size:21px} } @media (max-width:480px){ body.lang-en .hdr{padding-inline:16px} body.lang-en .header-logo-en{width:118px} body.lang-en .hero{padding-top:116px} body.lang-en .hero__title{font-size:clamp(40px,11.6vw,50px)} body.lang-en .h2{font-size:clamp(31px,9.5vw,42px);line-height:1.06} body.lang-en .brand-moment__title{font-size:16.5vw} body.lang-en .pillars li{padding:30px 26px;min-height:280px} body.lang-en .pillars__n{margin-bottom:44px} body.lang-en .values__hint{max-width:18ch;line-height:1.35;text-align:end} body.lang-en .campaign-slider__bar{gap:10px} body.lang-en .clients__title{max-width:11ch} body.lang-en .ftr__top{grid-template-columns:1fr} } /* ============================================================ تقييم الخدمة — صفحة العميل (rate/) وقسم الآراء في الرئيسية الصفحة تعيد استعمال سطح نافذة التقديم الأخضر وأصناف الحقول نفسها، فيبدو للعميل أنه ما زال في الموقع لا في أداة خارجية. ============================================================ */ .rate{background:var(--black)} .rate__wrap{min-height:100vh;min-height:100dvh;display:grid;grid-template-rows:auto 1fr;align-content:start;justify-items:center;gap:clamp(18px,3vw,34px);padding:clamp(16px,4vw,48px)} .rate__top{width:min(760px,100%);display:flex;align-items:center;justify-content:space-between} .rate__logo img{width:44px;height:44px;display:block} .rate .lang-switch{position:static} .rate__panel{ position:relative;width:min(760px,100%);border-radius:28px;color:var(--black); padding:clamp(30px,3.4vw,46px) clamp(22px,3.6vw,52px) clamp(24px,2.8vw,38px); background: radial-gradient(78% 58% at 50% -6%,rgba(255,255,255,.26),transparent 64%), var(--green); box-shadow:0 50px 130px rgba(0,0,0,.65),0 0 0 1px rgba(146,224,161,.5) inset; } .rate__state{text-align:center;font-size:15.5px;font-weight:600;color:rgba(0,0,0,.7);padding:clamp(24px,4vw,48px) 0} .rate__state[hidden]{display:none} .rate__state--bad{color:var(--black)} .rate__state--done{color:var(--black)} /* شريط المعاينة: مضغوط فوق النموذج لا بديلًا عنه */ .rate__state--preview{padding:0 0 14px;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;font-family:var(--f-lat);color:rgba(0,0,0,.55)} .rate__who{margin:12px 0 0;font-size:15px;font-weight:600;color:var(--black)} .rate__who[hidden]{display:none} /* عنصر نائب في المعاينة وحدها — يُقرأ أنه مثال لا اسم حقيقي */ .rate__who--demo{opacity:.55;font-weight:500} .rate__consent .opts label{font-size:13.5px} .rate__consent input:disabled+span{opacity:.45} .rate__note{color:var(--black);font-weight:600} .rate .form__done{inset:clamp(18px,2.4vw,32px)} .rate.is-sent .form__done{display:flex} .rate.is-sent .form,.rate.is-sent .modal__head{opacity:.12;pointer-events:none} /* ---------- النجوم ---------- أسود على أخضر كبقية النموذج — لا لون مُخترع. ترتيب DOM يتبع اتجاه الصفحة فتبدأ النجمة الأولى من جهة القراءة تلقائيًا. */ .stars__row{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .stars{display:flex;gap:6px;position:relative} .stars label{ width:44px;height:44px;display:grid;place-items:center;cursor:pointer;border-radius:12px; background:rgba(255,255,255,.5);border:1px solid rgba(0,0,0,.22); transition:background .2s,border-color .2s,transform .2s var(--ease); } .stars label:hover{background:rgba(255,255,255,.8);transform:translateY(-1px)} .stars input{position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none} .stars label:focus-within{border-color:var(--black);box-shadow:0 0 0 3px rgba(0,0,0,.14)} .stars svg{width:24px;height:24px;fill:transparent;stroke:var(--black);stroke-width:1.6;stroke-linejoin:round;transition:fill .15s} .stars[data-v="1"] label:nth-child(-n+1) svg,.stars[data-v="2"] label:nth-child(-n+2) svg, .stars[data-v="3"] label:nth-child(-n+3) svg,.stars[data-v="4"] label:nth-child(-n+4) svg, .stars[data-v="5"] label:nth-child(-n+5) svg{fill:var(--black)} .stars[data-h="1"] label:nth-child(-n+1) svg,.stars[data-h="2"] label:nth-child(-n+2) svg, .stars[data-h="3"] label:nth-child(-n+3) svg,.stars[data-h="4"] label:nth-child(-n+4) svg, .stars[data-h="5"] label:nth-child(-n+5) svg{fill:rgba(0,0,0,.45)} .stars__val{font-family:var(--f-lat);font-size:12.5px;color:rgba(0,0,0,.6);min-width:3.5em} .field.is-bad .stars label{border-color:var(--black)} @media (max-width:420px){.stars label{width:38px;height:38px}.stars svg{width:20px;height:20px}} /* ---------- آراء العملاء في الرئيسية ---------- */ .reviews__intro{max-width:52ch} .reviews__grid{ display:grid;gap:clamp(14px,1.6vw,20px);justify-content:center; grid-template-columns:repeat(auto-fill,minmax(clamp(240px,22vw,300px),1fr)); } /* رأي أو رأيان يتركان فراغًا فادحًا في شبكة ثلاثية، فيُوسّعان ويُتوسّطان */ .reviews__grid[data-n="1"]{grid-template-columns:minmax(0,min(620px,100%))} .reviews__grid[data-n="2"], .reviews__grid[data-n="4"]{grid-template-columns:repeat(2,minmax(0,min(440px,100%)))} @media (max-width:720px){.reviews__grid[data-n="2"],.reviews__grid[data-n="4"]{grid-template-columns:minmax(0,1fr)}} .rcard{ position:relative;isolation:isolate;overflow:hidden; display:flex;flex-direction:column;gap:16px;padding:clamp(22px,2.4vw,30px); border-radius:20px;color:var(--black); /* السطح الفاتح نفسه المستعمَل في نافذة التقديم وصفحة التقييم — لا سطح جديد */ background: radial-gradient(78% 58% at 50% -6%,rgba(255,255,255,.26),transparent 64%), var(--green); box-shadow:0 18px 44px rgba(0,0,0,.42),0 0 0 1px rgba(146,224,161,.5) inset; transition:transform .6s var(--ease),box-shadow .5s; } .rcard:hover{transform:translateY(-8px);box-shadow:0 30px 66px rgba(0,0,0,.55),0 0 0 1px rgba(146,224,161,.7) inset} .rcard__stars{display:flex;gap:4px} .rcard__stars svg{width:18px;height:18px;fill:var(--black);stroke:var(--black);stroke-width:1.2;stroke-linejoin:round} .rcard__stars svg.off{fill:transparent;stroke:rgba(0,0,0,.28)} .rcard__text{margin:0;font-size:clamp(15.5px,1.15vw,17px);line-height:1.95;color:var(--black);font-weight:500} .rcard__who{margin-top:auto;display:flex;flex-direction:column;gap:3px;padding-top:14px;border-top:1px solid rgba(0,0,0,.16)} .rcard__who b{font-family:var(--f-disp);font-size:16px;font-weight:800;color:var(--black)} .rcard__who span{font-size:12.5px;color:rgba(0,0,0,.58)} .rcard__who span:empty{display:none}