@font-face{font-family:'Rubik';font-style:normal;font-weight:300;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+FB50-FDFF,U+FE70-FEFF,U+10E60-10E7E,U+10EFD-10EFF,U+1EE00-1EEFF;src:url(/assets/fonts/c7037f04365f.woff2) format('woff2')}@font-face{font-family:'Rubik';font-style:normal;font-weight:300;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;src:url(/assets/fonts/0e5f00fa0d53.woff2) format('woff2')}@font-face{font-family:'Rubik';font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+FB50-FDFF,U+FE70-FEFF,U+10E60-10E7E,U+10EFD-10EFF,U+1EE00-1EEFF;src:url(/assets/fonts/1e1a701be3e3.woff2) format('woff2')}@font-face{font-family:'Rubik';font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;src:url(/assets/fonts/82ac0e78285c.woff2) format('woff2')}@font-face{font-family:'Rubik';font-style:normal;font-weight:500;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+FB50-FDFF,U+FE70-FEFF,U+10E60-10E7E,U+10EFD-10EFF,U+1EE00-1EEFF;src:url(/assets/fonts/d6477ecd1424.woff2) format('woff2')}@font-face{font-family:'Rubik';font-style:normal;font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;src:url(/assets/fonts/54ad302324aa.woff2) format('woff2')}@font-face{font-family:'Rubik';font-style:normal;font-weight:600;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+FB50-FDFF,U+FE70-FEFF,U+10E60-10E7E,U+10EFD-10EFF,U+1EE00-1EEFF;src:url(/assets/fonts/f60c6ef1b75c.woff2) format('woff2')}@font-face{font-family:'Rubik';font-style:normal;font-weight:600;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;src:url(/assets/fonts/6182043a20fa.woff2) format('woff2')}@font-face{font-family:'Rubik';font-style:normal;font-weight:700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+FB50-FDFF,U+FE70-FEFF,U+10E60-10E7E,U+10EFD-10EFF,U+1EE00-1EEFF;src:url(/assets/fonts/5cab633c7644.woff2) format('woff2')}@font-face{font-family:'Rubik';font-style:normal;font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;src:url(/assets/fonts/e423f8ae1668.woff2) format('woff2')}@font-face{font-family:'Readex Pro';font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+FB50-FDFF,U+FE70-FEFF,U+10E60-10E7E,U+10EFD-10EFF,U+1EE00-1EEFF;src:url(/assets/fonts/2c23706a72ee.woff2) format('woff2')}@font-face{font-family:'Readex Pro';font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;src:url(/assets/fonts/e846a3aa9fd6.woff2) format('woff2')}@font-face{font-family:'Readex Pro';font-style:normal;font-weight:500;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+FB50-FDFF,U+FE70-FEFF,U+10E60-10E7E,U+10EFD-10EFF,U+1EE00-1EEFF;src:url(/assets/fonts/5e3d5d429fd4.woff2) format('woff2')}@font-face{font-family:'Readex Pro';font-style:normal;font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;src:url(/assets/fonts/c555ffb8c674.woff2) format('woff2')}@font-face{font-family:'Readex Pro';font-style:normal;font-weight:600;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+FB50-FDFF,U+FE70-FEFF,U+10E60-10E7E,U+10EFD-10EFF,U+1EE00-1EEFF;src:url(/assets/fonts/39fb881337d3.woff2) format('woff2')}@font-face{font-family:'Readex Pro';font-style:normal;font-weight:600;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;src:url(/assets/fonts/d6318c6fc4b2.woff2) format('woff2')}@font-face{font-family:'Readex Pro';font-style:normal;font-weight:700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+FB50-FDFF,U+FE70-FEFF,U+10E60-10E7E,U+10EFD-10EFF,U+1EE00-1EEFF;src:url(/assets/fonts/eb35ca966ffd.woff2) format('woff2')}@font-face{font-family:'Readex Pro';font-style:normal;font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;src:url(/assets/fonts/35fe80e4cad4.woff2) format('woff2')}@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;src:url(/assets/fonts/08949f728dc5.woff2) format('woff2')}@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;src:url(/assets/fonts/01d285447409.woff2) format('woff2')} /* ========================================================= مشــمُش — الصفحة الرئيسية نظام حركة مستوحى من انضباط haoqi.design لكن بهوية مشمش وبدون أي مكتبة خارجية. ========================================================= */ /* ---------- 1. التوكنز ---------- */ :root{ --brand: #FDB913; --brand-deep: #EFA80B; --ink: #171717; --ink-soft: #2E2E2E; --ink-mute: rgba(23,23,23,.52); --ink-faint: rgba(23,23,23,.28); --page: #F4F4F5; --cream: #F5EEDE; --line: rgba(23,23,23,.10); --font: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-d: 'Readex Pro', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; --container: 1200px; --header-h: 72px; --radius-card: 28px; --radius-pill: 65px; /* ===== منحنى مشمش ===== يتردّد بالبداية، بعدين ينطّ بحدة للنهاية. هاد هو "صوت" الموقع الحركي — منحنى واحد بيتكرر بكل مكان. */ --mm: cubic-bezier(.62,.02,.05,1); --mm-out: cubic-bezier(.22,1,.36,1); /* easeOutQuint — للفرملة الناعمة */ --mm-soft: cubic-bezier(0,0,.2,1); /* للحركات الصغيرة الملل */ --t-tap: .16s; /* لمسات صغيرة */ --t-mid: .66s; /* الحركة الأساسية */ --t-big: 1.2s; /* اللحظات الكبيرة */ } /* كل العناوين بخط العناوين */ h1,h2,h3,h4,h5,h6{ font-family:var(--font-d); } /* ---------- 2. إعادة الضبط ---------- */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; } body{ margin:0; font-family:var(--font); font-size:16px; line-height:1.6; color:var(--ink); background:var(--page); overflow-x:hidden; } img,video{ display:block; max-width:100%; height:auto; } a{ color:inherit; text-decoration:none; } ul{ list-style:none; margin:0; padding:0; } h1,h2,h3,p{ margin:0; } /* عنوان بيقراه قارئ الشاشة ومحرّك البحث وما بيبيّن عالشاشة. بتلزم بالحالات يللي عنوانها لوغو SVG مو نص. */ .mm-sr{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; } button,input{ font:inherit; color:inherit; } ::selection{ background:var(--brand); color:var(--ink); } .container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:20px; } /* أرقام لاتينية بخط أحادي — للقراءات التقنية فقط */ .mono{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; font-variant-numeric:tabular-nums; } /* ========================================================= 3. شاشة الافتتاح — الكشف الدائري نفس فكرة شيدر haoqi (uHoleRadius / uFeather) لكن بـ CSS mask. الطبقة بتغطي الشاشة، وبينفتح فيها ثقب دائري ناعم الحواف. ========================================================= */ #preload{ position:fixed; inset:0; z-index:9999; background:var(--brand); display:grid; place-items:center; -webkit-mask-image:radial-gradient(circle at 50% 50%, transparent var(--hole,0px), #000 calc(var(--hole,0px) + var(--feather,0px))); mask-image:radial-gradient(circle at 50% 50%, transparent var(--hole,0px), #000 calc(var(--hole,0px) + var(--feather,0px))); } #preload.is-done{ pointer-events:none; } .pl-inner{ display:flex; flex-direction:column; align-items:center; gap:18px; } .pl-mark{ font-size:clamp(30px,7vw,54px); font-weight:700; color:var(--ink); letter-spacing:-.01em; } .pl-bar{ position:relative; width:min(300px,60vw); height:3px; background:rgba(23,23,23,.18); border-radius:99px; overflow:hidden; } .pl-fill{ position:absolute; inset-block:0; inset-inline-start:0; width:0%; background:var(--ink); border-radius:99px; transition:width .52s var(--mm-out); /* 520ms easeOutQuint — نفس رقم haoqi */ } .pl-pct{ font-family:var(--mono); font-size:11px; color:rgba(23,23,23,.6); letter-spacing:.1em; } /* ========================================================= 4. طبقة الشبكة + الصلبان — mix-blend-difference ملاحظة: عند haoqi الخلفية غامقة فالفرق قوي. عنا الصفحة فاتحة، فخفّفنا الشفافية حتى ما يقلب الأصفر لأزرق. ========================================================= */ #gridfx{ display:none; position:fixed; inset:0; z-index:20; pointer-events:none; opacity:.12; shape-rendering:crispEdges; transition:opacity var(--t-mid) var(--mm); } #gridfx.calm{ opacity:.05; } #gridfx line{ stroke:#171717; stroke-width:1; } #gridfx .tick{ stroke:#171717; stroke-width:1; } /* ========================================================= 5. المؤشّر المخصص (تنعيم بـ lerp متل damping عند haoqi) ========================================================= */ #cursor{ /* ⚠ لازم left الفيزيائي مش inset-inline-start: بصفحة RTL الـ inline-start = right، فالمؤشّر بينزرع بالزاوية اليمنى وبعدين translate بيطيّره برّا الشاشة. والـ transform أصلاً فيزيائي دايماً. */ position:fixed; top:0; left:0; z-index:60; pointer-events:none; width:26px; height:26px; margin:-13px 0 0 -13px; border-radius:50%; border:1.5px solid var(--ink); opacity:0; transition:opacity .3s var(--mm), width .4s var(--mm), height .4s var(--mm), background .3s var(--mm); will-change:transform; } #cursor.on{ opacity:.75; } #cursor.draw{ width:var(--csize,14px); height:var(--csize,14px); margin:calc(var(--csize,14px)/-2) 0 0 calc(var(--csize,14px)/-2); background:var(--ccolor,#FDB913); border-color:var(--ink); } #cursor.link{ width:46px; height:46px; margin:-23px 0 0 -23px; background:var(--brand); border-color:transparent; opacity:.9; } @media (pointer:coarse){ #cursor{ display:none; } } /* منخفي مؤشّر النظام فوق لوحة الرسم فقط — هون الحلقة بتحلّ محلّه فعلياً (بتوريك لون وحجم الأداة). أي مكان تاني بالصفحة المؤشّر العادي موجود، حتى لو وقف الجافاسكربت ما يضيع من الزائر. */ body.has-cursor #draw{ cursor:none; } /* ========================================================= 6. الشريط السفلي — القراءات التقنية عرّبناها: س/ص بدل X/Y، والأداة الحالية بدل زخرفة بلا معنى. ========================================================= */ #status{ position:fixed; inset-inline:0; bottom:0; z-index:30; pointer-events:none; display:flex; justify-content:space-between; align-items:center; padding:10px 18px; color:var(--ink-mute); animation:stepIn 1s var(--mm) both; } #status > *{ display:flex; gap:10px; align-items:center; } #status b{ font-weight:500; color:var(--ink); } #status .st-dot{width:7px;height:7px;border-radius:50%;background:#E2574C;display:inline-block;animation:stLv 1.2s ease-in-out infinite} @keyframes stLv{0%,100%{opacity:1}50%{opacity:.25}} #status .st-sig{letter-spacing:.12em} #status button{pointer-events:auto;display:flex;gap:10px;align-items:center;background:none;border:0;padding:0;cursor:pointer;font:inherit;color:var(--ink-mute)} #status button b{font-weight:500;color:var(--ink)} @media (max-width:720px){ #status .hide-sm{ display:none; } } /* خفوت متدرّج غير خطي — إحساس "رقمي" مش ناعم (متل hsstFadeIn) */ @keyframes stepIn{ 0%{ opacity:0 } 32%{ opacity:.22 } 62%{ opacity:.55 } 100%{ opacity:1 } } /* ========================================================= 7. السكرولبار المخصص — على اليسار لأن الصفحة RTL ========================================================= */ #sbar{ position:fixed; inset-inline-end:0; top:50%; transform:translateY(-50%); z-index:30; width:44px; height:190px; padding-inline:16px; pointer-events:none; } #sbar .track{ stroke:var(--ink); opacity:.16; stroke-width:2; } #sbar .thumb{ stroke:var(--ink); stroke-width:2; stroke-linecap:round; } @media (max-width:900px){ #sbar{ display:none; } } /* ========================================================= 8. الهيدر ========================================================= */ .site-header{ position:fixed; top:14px; inset-inline-start:50%; transform:translateX(calc(50% * var(--mmx,1))); width:min(1328px, calc(100% - 28px)); height:var(--header-h); z-index:50; background:rgba(255,255,255,.62); backdrop-filter:blur(8px) saturate(1.35); -webkit-backdrop-filter:blur(8px) saturate(1.35); border:1px solid rgba(255,255,255,.7); border-radius:var(--radius-pill); transition:transform var(--t-mid) var(--mm), opacity var(--t-mid) var(--mm); animation:stepIn .9s var(--mm) both .1s; } .site-header.is-hidden{ transform:translateX(calc(50% * var(--mmx,1))) translateY(-130%); opacity:0; } .nav{ display:flex; align-items:center; justify-content:space-between; height:100%; padding-inline:26px; gap:20px; } .nav-list{ display:flex; align-items:center; gap:26px; font-size:14.5px; font-weight:500; } .nav-list a{ position:relative; padding-block:6px; transition:color var(--t-tap) var(--mm-soft); } .nav-list a::after{ content:''; position:absolute; inset-inline:0; bottom:0; height:1.5px; background:var(--ink); transform:scaleX(0); transform-origin:var(--mm-org,right); transition:transform var(--t-mid) var(--mm); } .nav-list a:hover::after, .nav-list a.is-current::after{ transform:scaleX(1); transform-origin:var(--mm-org,right); } .logo img{ width:57px; height:41px; object-fit:contain; } /* اللوغو بالنص الهندسي للهيدر، مهما اختلف عرض القوائم حواليه */ .nav{ position:relative; } .nav .logo{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); } .btn-pill{ background:var(--brand); border-radius:99px; padding:10px 22px !important; font-weight:600; transition:transform var(--t-mid) var(--mm), background var(--t-tap) var(--mm-soft); } .btn-pill::after{ display:none; } .btn-pill:hover{ background:var(--brand-deep); transform:translateY(-2px); } .nav-toggle{ display:none; background:none; border:0; cursor:pointer; width:40px; height:32px; padding:6px; } .nav-toggle span{ display:block; height:2px; background:var(--ink); margin:5px 0; border-radius:2px; transition:transform var(--t-mid) var(--mm), opacity var(--t-tap); } .nav-mobile{ display:none; } @media (max-width:1000px){ .nav-list{ display:none; } .nav-toggle{ display:block; } .nav{ justify-content:space-between; } .nav-mobile{ display:block; position:absolute; top:calc(100% + 10px); inset-inline:0; background:#fff; border-radius:24px; padding:14px 22px; box-shadow:0 20px 50px rgba(0,0,0,.10); opacity:0; visibility:hidden; transform:translateY(-12px); transition:opacity var(--t-mid) var(--mm), transform var(--t-mid) var(--mm), visibility var(--t-mid); } .nav-mobile.is-open{ opacity:1; visibility:visible; transform:none; } .nav-mobile a{ display:block; padding:11px 0; font-weight:500; border-bottom:1px solid var(--line); } .nav-mobile li:last-child a{ border-bottom:0; } } /* ===== الهيدر الجديد · مشمش ===== */ .hero{ --bark:#4A3520; --spring:cubic-bezier(.34,1.56,.64,1); --t-big:1.2s; } /* الهيدر مو ملء الشاشة: بيضل جزء من الشريط باين تحته */ body{--mh-peek:32svh} .hero{position:fixed;inset-inline:0;top:0;height:100svh;width:100%;overflow:hidden;z-index:0; background:var(--cream);touch-action:pan-y;will-change:opacity} .mh-stage{position:absolute;inset:0} .mh-branches{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none} /* الماسك: خط أبيض عريض بيمشي عالغصن فيكشفو وهو عم يكبر */ .mh-grow path{fill:none;stroke:#fff;stroke-linecap:butt;stroke-linejoin:round; stroke-dashoffset:var(--O,0)} .mh-on-branch .mh-grow path{transition:stroke-dashoffset 1.15s var(--mm-out)} .mh-on-branch .mh-grow path{stroke-dashoffset:0} #mhWood path{shape-rendering:geometricPrecision} /* ===== الزهرة ===== */ .mh-bl{position:absolute;z-index:2;pointer-events:none;transform-origin:50% 50%; transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(0); transition:transform .62s var(--spring);will-change:transform} .mh-on-bloom .mh-bl{transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(var(--s,1))} .mh-bl svg,.mh-fr svg{display:block;width:100%;height:100%;overflow:visible} .mh-pt{fill:url(#mhPg);stroke:rgba(206,158,140,.45);stroke-width:1.1} .mh-pt.b{fill:url(#mhPg2)} .mh-stm{stroke:#D9743F;stroke-width:2.1;stroke-linecap:round;opacity:.85} .mh-stmd{fill:#C25A2A;opacity:.9} .mh-core{fill:#F7D9A8} .mh-bud{fill:url(#mhBug);stroke:rgba(190,124,100,.4);stroke-width:1.1} .mh-budl{fill:none;stroke:rgba(255,255,255,.5);stroke-width:1.6;stroke-linecap:round} @keyframes mhFall{ 0%{transform:translate(-50%,-50%) rotate(var(--r)) scale(var(--s));opacity:1} 12%{opacity:1} 100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--rEnd)) scale(calc(var(--s) * .82));opacity:0} } .mh-bl.mh-falling{animation:mhFall var(--dur) cubic-bezier(.36,.15,.58,1) var(--del) forwards} /* ===== الثمرة ===== */ .mh-fr{position:absolute;z-index:6;transform-origin:50% 8%; transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(0); transition:transform .8s var(--spring);will-change:transform} .mh-on-fruit .mh-fr{transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(var(--s,1)); animation:mhHang var(--sw,6s) ease-in-out infinite var(--sd,0s)} @keyframes mhHang{ 0%,100%{transform:translate(-50%,-50%) rotate(calc(var(--r) - 4deg)) scale(var(--s))} 50% {transform:translate(-50%,-50%) rotate(calc(var(--r) + 4deg)) scale(var(--s))} } .mh-fr{cursor:pointer} .mh-fr:hover{filter:drop-shadow(0 6px 14px rgba(214,120,50,.4))} .mh-fr .mh-frb{transition:transform .3s var(--spring);transform-origin:50% 60%} .mh-fr:hover .mh-frb{transform:scale(1.09)} @keyframes mhPick{ 0% {opacity:1;transform:translate(-50%,-50%) rotate(var(--r)) scale(var(--s))} 14% {transform:translate(-50%,calc(-50% - 8px)) rotate(calc(var(--r) + 8deg)) scale(calc(var(--s) * 1.1))} 100%{opacity:0;transform:translate(calc(-50% + var(--px,20px)),calc(-50% + var(--py,420px))) rotate(var(--pr,420deg)) scale(calc(var(--s) * .78))} } .mh-fr.mh-picked{animation:mhPick 1.5s cubic-bezier(.42,0,.86,.6) forwards;pointer-events:none} .mh-fr.mh-held{animation:none!important;transition:none!important;z-index:12; cursor:grabbing;filter:drop-shadow(0 12px 22px rgba(0,0,0,.3))} .mh-fr.mh-held .mh-frb{transform:scale(1.12)} @media (min-width:901px){ .mh-fr{touch-action:none} } .mh-season{position:absolute;z-index:9;inset-inline:0;bottom:calc(var(--mh-peek,32svh) + 64px);text-align:center;pointer-events:none; font-family:var(--font-d);font-size:clamp(17px,2.1vw,24px);font-weight:600;color:var(--ink); opacity:0;transform:translateY(10px);transition:opacity .5s var(--mm),transform .5s var(--mm)} .mh-season.show{opacity:1;transform:none} .mh-frb{fill:url(#mhFg)} .mh-frc{fill:none;stroke:#D08B45;stroke-width:1.9;stroke-linecap:round;opacity:.3} .mh-frbl{fill:#E2703C;opacity:.16} .mh-frg{fill:#FFE7A8;opacity:.5} .mh-frs{fill:none;stroke:var(--bark);stroke-width:3;stroke-linecap:round;opacity:.85} .mh-frl{fill:#7E9440} /* ===== الورق ===== */ .mh-lf{position:absolute;z-index:3;pointer-events:none;transform-origin:50% 92%; transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(0); transition:transform .72s var(--spring);will-change:transform} .mh-on-leaf .mh-lf{transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(var(--s,1))} .mh-lf svg{display:block;width:100%;height:100%;overflow:visible} .mh-lfb{fill:url(#mhLg)} .mh-lfv{fill:none;stroke:#43601F;stroke-width:2.2;stroke-linecap:round;opacity:.34} /* ===== الريح ===== */ @keyframes mhGust{ 0% {transform:translate(-50%,-50%) rotate(var(--r)) scale(var(--s))} 34% {transform:translate(calc(-50% + 8px),calc(-50% - 3px)) rotate(calc(var(--r) + 14deg)) scale(calc(var(--s) * 1.04))} 66% {transform:translate(calc(-50% - 3px),calc(-50% + 1px)) rotate(calc(var(--r) - 5deg)) scale(var(--s))} 100%{transform:translate(-50%,-50%) rotate(var(--r)) scale(var(--s))} } .mh-gusting .mh-bl:not(.mh-falling){animation:mhGust 1.55s ease-in-out var(--gd,0s) both} .mh-gusting .mh-lf{animation:mhGust 1.7s ease-in-out var(--gd,0s) both} @keyframes mhBend{0%,100%{transform:rotate(0) skewX(0)}42%{transform:rotate(.5deg) skewX(-.7deg)}} .mh-gusting .mh-branches{transform-origin:50% 100%;animation:mhBend 1.9s ease-in-out} @keyframes mhFrgust{ 0%,100%{transform:translate(-50%,-50%) rotate(var(--r)) scale(var(--s))} 40% {transform:translate(calc(-50% + 5px),-50%) rotate(calc(var(--r) + 11deg)) scale(var(--s))} } .mh-gusting .mh-fr{animation:mhFrgust 1.7s ease-in-out var(--gd,0s) !important} /* ===== زهرة العمل ===== */ .mh-wb{position:absolute;z-index:6;transform:translate(-50%,-50%) scale(0); transition:transform .75s var(--spring);cursor:pointer;will-change:transform} .mh-on-bloom .mh-wb{transform:translate(-50%,-50%) scale(1)} .mh-wb-in{position:relative;width:var(--w);height:var(--w); transition:transform .45s var(--mm-out); animation:mhSway 8s ease-in-out infinite var(--sd,0s);transform-origin:50% 62%} @keyframes mhSway{0%,100%{transform:rotate(-3.5deg)}50%{transform:rotate(3.5deg)}} .mh-wb:hover .mh-wb-in{animation-play-state:paused;transform:scale(1.24)} .mh-wb-in svg{width:100%;height:100%;overflow:visible} .mh-wb::before{content:'';position:absolute;inset:6%;border-radius:50%;z-index:-1; background:radial-gradient(circle, rgba(62,44,30,.15), transparent 68%); transform:translateY(7px)} .mh-wb .mh-core{fill:var(--brand);transition:r .4s var(--spring)} .mh-wb:hover .mh-core{fill:var(--brand-deep)} .mh-wb-label{position:absolute;top:calc(100% + 10px);inset-inline-start:50%; transform:translateX(calc(50% * var(--mmx,1))) translateY(-6px);white-space:nowrap; font-family:var(--font-d);font-size:12.5px;font-weight:600;color:var(--ink); background:rgba(255,255,255,.9);backdrop-filter:blur(8px);padding:5px 13px;border-radius:99px; border:1px solid rgba(255,255,255,.95);box-shadow:0 4px 16px rgba(23,23,23,.09); opacity:0;pointer-events:none;transition:opacity .28s var(--mm),transform .28s var(--mm)} .mh-wb:hover .mh-wb-label{opacity:1;transform:translateX(calc(50% * var(--mmx,1))) translateY(0)} /* ===== النص ===== */ .mh-copy{position:absolute;z-index:5;inset-inline:0;top:34%;transform:translateY(-50%); text-align:center;padding-inline:22px;pointer-events:none} .mh-eyebrow{display:inline-block;font-size:11.5px;word-spacing:.14em;color:var(--ink-mute); opacity:0;transform:translateY(8px);transition:opacity .6s var(--mm) .1s,transform .6s var(--mm) .1s} .mh-on-copy .mh-eyebrow{opacity:1;transform:none} .mh-eyerow{display:inline-flex;align-items:center;gap:12px} .mh-live{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:#B8452F; font-weight:500;opacity:0;transition:opacity .6s var(--mm) .35s} .mh-on-copy .mh-live{opacity:1} .mh-live i{font-style:normal} .mh-live b{width:7px;height:7px;border-radius:50%;background:#E2574C;animation:mhLv 1.15s ease-in-out infinite} @keyframes mhLv{0%,100%{opacity:1}50%{opacity:.2}} h1 .mh-w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.18em .12em .26em;margin:-.18em -.12em -.26em} h1 .mh-w>span{display:inline-block;transform:translateY(145%);transition:transform 1.05s var(--mm)} .mh-on-copy h1 .mh-w>span{transform:none} .mh-line{margin-top:16px;font-size:clamp(14.5px,1.55vw,19px);font-weight:500;line-height:1.7; color:var(--ink-mute);letter-spacing:0} .mh-line b{display:block;opacity:0;transform:translateY(16px);font-weight:600; transition:opacity .7s var(--mm),transform .7s var(--mm)} .mh-on-line .mh-line b:nth-child(1){opacity:1;transform:none} .mh-on-line .mh-line b:nth-child(2){opacity:1;transform:none;transition-delay:.22s} .mh-line em{font-style:normal;color:var(--ink-soft);font-weight:600; text-decoration-line:underline;text-decoration-color:rgba(253,185,19,0); text-decoration-thickness:.11em;text-underline-offset:.14em;text-decoration-skip-ink:none; transition:text-decoration-color .85s var(--mm) .5s} .mh-on-line .mh-line em{text-decoration-color:rgba(253,185,19,.9)} .mh-scroll{position:absolute;z-index:7;bottom:20px;inset-inline-end:30px; font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:var(--ink-faint); opacity:0;transition:opacity .8s var(--mm)} .mh-on-ready .mh-scroll{opacity:1} @media (max-width:900px){ .mh-copy{top:36%} .mh-scroll{display:none} } @media (prefers-reduced-motion:reduce){ .mh-grow path,.mh-bl,.mh-lf,.mh-wb,.mh-wb-in,.mh-fr,h1 .mh-w>span,.mh-line b,.mh-eyebrow{transition-duration:.01ms!important} .mh-bl.mh-falling,.mh-wb-in,.mh-on-fruit .mh-fr{animation:none!important} } /* ===== العنوان الرئيسي ===== */ .hero h1{font-family:var(--font-d);font-size:clamp(42px,7.3vw,88px);font-weight:600; line-height:1.16;letter-spacing:0;margin:14px 0 0} .hero h1 .mh-w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.18em .12em .26em;margin:-.18em -.12em -.26em} .hero h1 .mh-w>span{display:inline-block;transform:translateY(145%);transition:transform 1.05s var(--mm)} .mh-on-copy h1 .mh-w>span{transform:none} /* الهيرو صار خلفية الصفحة: الكاروسيل بيطفو فوقو بخلفية شفافة */ .mmc--home{ background:transparent !important; position:relative; z-index:1; margin-top:calc(100svh - var(--mh-peek,32svh)); } /* ===== إفكت التلفزيون فوق البستان ===== */ .mh-tv{position:absolute;inset:0;z-index:8;pointer-events:none} .mh-scan{position:absolute;inset:0; background:repeating-linear-gradient(0deg,rgba(23,23,23,.085) 0 1px,transparent 1px 3px)} .mh-vig{position:absolute;inset:0; background:radial-gradient(ellipse at center,transparent 58%,rgba(40,28,8,.26) 100%)} .mh-roll{position:absolute;inset-inline:0;height:84px;top:0; background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.11),rgba(255,255,255,0)); animation:mhRoll 6.5s linear infinite;will-change:transform} @keyframes mhRoll{0%{transform:translateY(-16svh)}100%{transform:translateY(112svh)}} .mh-osd{position:absolute;font-family:var(--mono);letter-spacing:.06em; color:#1E8C46;text-shadow:0 0 8px rgba(30,140,70,.35);font-size:clamp(12px,1.25vw,15px)} .mh-ch{top:104px;left:18px} .mh-chn{top:104px;right:18px;direction:rtl;font-family:var(--font-d);font-weight:600;letter-spacing:0} html[dir="ltr"] .mh-chn{direction:ltr} .mh-av{bottom:calc(var(--mh-peek,32svh) + 14px);left:18px;font-size:11px;animation:mhAv 2.2s ease-in-out infinite} @keyframes mhAv{0%,100%{opacity:.9}50%{opacity:.3}} .mh-prov{bottom:calc(var(--mh-peek,32svh) + 13px);inset-inline:0;text-align:center; font-family:var(--font-d);letter-spacing:0} .mh-prov small{display:block;font-size:clamp(10.5px,1.05vw,12.5px);font-weight:400;opacity:.75} .mh-prov b{display:block;font-size:clamp(14px,1.65vw,18.5px);font-weight:600;margin-top:2px} .mh-prov b[hidden]{display:none} @media (prefers-reduced-motion:reduce){ .mh-roll{animation:none;opacity:0} .mh-av{animation:none} .mh-live b{animation:none} } @media (max-width:760px){ .mh-chn{display:none} } /* ===== تشغيل التلفزيون عالفتح ===== */ .mh-crt{position:absolute;inset:0;z-index:9;pointer-events:none} .mh-crt::before,.mh-crt::after{content:'';position:absolute;inset-inline:0;height:50.5%;background:#0B0A08;z-index:1} .mh-crt::before{top:0;transform-origin:50% 0} .mh-crt::after{bottom:0;transform-origin:50% 100%} html.mm-powered .mh-crt::before{animation:mhCrtT .5s cubic-bezier(.7,0,.3,1) .32s both} html.mm-powered .mh-crt::after{animation:mhCrtB .5s cubic-bezier(.7,0,.3,1) .32s both} @keyframes mhCrtT{0%{transform:scaleY(1)}100%{transform:scaleY(0)}} @keyframes mhCrtB{0%{transform:scaleY(1)}100%{transform:scaleY(0)}} .mh-crt-line{position:absolute;z-index:2;left:50%;top:50%;width:100%;height:3px; transform:translate(-50%,-50%) scaleX(0);border-radius:99px; background:#FFF8E8;box-shadow:0 0 18px 4px rgba(255,248,220,.9),0 0 60px 14px rgba(255,244,200,.5); opacity:0} html.mm-powered .mh-crt-line{animation:mhCrtL .3s cubic-bezier(.2,.8,.3,1) .06s both, mhCrtLoff .34s ease .58s both} @keyframes mhCrtL{0%{transform:translate(-50%,-50%) scaleX(0)}100%{transform:translate(-50%,-50%) scaleX(1)}} @keyframes mhCrtLoff{0%{opacity:1}100%{opacity:0}} @media (prefers-reduced-motion:reduce){ .mh-crt{display:none} } /* ===== قاسيون: رسمة باهتة ورا الأغصان ===== */ .mh-qas{position:absolute;inset:0;z-index:0;pointer-events:none; background-image:url(/assets/img/041fec023bba.webp); background-size:cover;background-position:center 78%; opacity:.33;filter:saturate(.82)} .mh-qas::after{content:'';position:absolute;inset:0; background:radial-gradient(ellipse 52% 36% at 50% 30%, rgba(245,238,222,.94), rgba(245,238,222,0) 72%), linear-gradient(rgba(245,238,222,.55), rgba(245,238,222,0) 30%)} /* ===== زر الموسيقا العايم ===== */ .mm-fab{position:fixed;z-index:60;bottom:46px;inset-inline-end:18px;width:46px;height:46px; border-radius:50%;background:rgba(255,255,255,.92);border:1px solid rgba(23,23,23,.08); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); box-shadow:0 8px 24px rgba(23,23,23,.15);cursor:pointer;display:none;place-items:center; color:var(--ink);transition:transform .2s var(--spring)} .mm-fab:hover{transform:scale(1.08)} html.mm-powered .mm-fab{display:grid} .mm-fab svg{width:21px;height:21px} .mm-fab .ic-off{display:none} .mm-fab.muted .ic-on{display:none} .mm-fab.muted .ic-off{display:block} @media (max-width:720px){ .mm-fab{bottom:56px} } /* ========================================================= تجربة الموبايل · الهيدر ========================================================= */ /* لما يغيب الهيدر مع السكرول، بنوقف كل حركاته بدل ما تضل تشتغل تحت الصفحة وتاكل من إطارات الموبايل. */ .hero.mh-off *, .hero.mh-off::before, .hero.mh-off::after{ animation-play-state:paused !important; } @media (max-width:820px){ /* البلور غالي عالموبايل: بدلو خلفية معتمة بنفس الإحساس */ .mh-live{ backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(255,255,255,.94); } /* الأوراق والزهر: حركة أهدى وأقل تكلفة */ .mh-lf{ animation-duration:11s; } } @media (max-width:560px){ /* شاشة صغيرة: الشريط الضوئي النازل ما بيبين كتير وبيكلّف رسم كامل الشاشة */ .mh-roll{ display:none; } } /* صفحة داخلية مفتوحة: الهيدر ورا طبقة معتمة، فما في داعي يرسم */ html.mm-view .hero{ visibility:hidden; } html.mm-view .hero *{ animation-play-state:paused !important; } /* ========================================================= 10. شريط الفيديوهات · الصفحة الرئيسية ========================================================= */ /* الشريط بيرث كل شي من مكوّن .mmc · هون بس خلفية القسم */ .mmc--home{ background:var(--page); } /* ========================================================= 11. الخدمات ========================================================= */ .services{ background:var(--page); padding:96px 0 40px; } .services-heading{ width:min(340px,64vw); margin:0 auto 54px; } .services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } @media (max-width:1000px){ .services-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:660px){ .services-grid{ grid-template-columns:1fr; } } .service-card{ position:relative; background:#fff; border-radius:var(--radius-card); padding:30px 28px 34px; overflow:hidden; opacity:0; transform:translateY(30px); transition:opacity var(--t-big) var(--mm), transform var(--t-big) var(--mm), box-shadow var(--t-mid) var(--mm); } .service-card.in{ opacity:1; transform:none; } .service-card::before{ content:''; position:absolute; inset-inline:0; bottom:0; height:3px; background:var(--brand); transform:scaleX(0); transform-origin:var(--mm-org,right); transition:transform var(--t-mid) var(--mm); } .service-card:hover::before{ transform:scaleX(1); transform-origin:var(--mm-org,right); } .service-card:hover{ box-shadow:0 22px 60px rgba(23,23,23,.08); } .service-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:14px; } .service-title{ font-size:19px; font-weight:700; line-height:1.4; } .service-num{ position:relative; flex-shrink:0; width:56px; height:56px; display:grid; place-items:center; } .service-num img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transition:transform var(--t-big) var(--mm); } .service-card:hover .service-num img{ transform:rotate(120deg); } .service-num span{ position:relative; font-family:var(--mono); font-size:13px; font-weight:500; } .service-body{ color:var(--ink-soft); font-size:15px; line-height:1.75; } /* ========================================================= 11-ب. رحلة الخدمات — الفوتان جوّا الدائرة قسم مثبّت بطول ٤ شاشات. السكرول هو اللي بيحرّك كل شي. ========================================================= */ .dotmask{ -webkit-mask-image:radial-gradient(circle, #000 var(--dot,100%), transparent calc(var(--dot,100%) + 1%)); mask-image:radial-gradient(circle, #000 var(--dot,100%), transparent calc(var(--dot,100%) + 1%)); -webkit-mask-size:var(--cell,10px) var(--cell,10px); mask-size:var(--cell,10px) var(--cell,10px); -webkit-mask-repeat:repeat; mask-repeat:repeat; } .svcj{ position:relative; height:880vh; background:var(--page); } /* ٨٨٠vh (كانت ٦٢٠، وقبلها ٤٠٠). ستّ خدمات على مسافة أطول بـ٤٢٪: كل خدمة صار إلها ~١٠٤vh بدل ~٧٣vh. المسافة لحالها ما بتكفي — لازم كمان إعادة توزيع المراحل جوّا نافذة الخدمة (شوف initJourney): التجمّع بيخلص أبكر، والوقفة بتصير ضعف، والتلاشي بيبلّش متأخّر. */ .sj-stage{ position:sticky; top:0; height:100svh; overflow:hidden; display:grid; place-items:center; } /* الحقل الدافي اللي بيحلّ محل الصورة لما نصير جوّاتها */ .sj-field{ position:absolute; inset:0; opacity:0; background:radial-gradient(circle at 50% 45%, #FFD873 0%, #FDB913 46%, #EFA80B 100%); } .sj-orb{ position:absolute; top:50%; left:50%; width:min(56vmin,440px); aspect-ratio:1; transform:translate(-50%,-50%) scale(1); display:grid; place-items:center; will-change:transform, filter; } .sj-orb-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; } .sj-orb-text{ position:relative; font-size:clamp(26px,6.4vmin,54px); font-weight:700; color:var(--ink); letter-spacing:-.01em; line-height:1; } /* ========================================================= ٢٦. تجربة الموبايل ثلاث مشاكل مقيسة كانت بتخلي الجهاز يعلّق: ١) الشرائط التسعة كلها بتنبني عالفتح، وبتمشي لحالها بحركة دائمة حتى وهي جوّا صفحات مسكّرة. ٢) صفحات الحالة المسكّرة مخفية بالـ visibility بس، يعني المتصفح بيضل يحسب ستايلها ويشغّل حركاتها. ٣) البلور (backdrop-filter) غالي عالمعالج الرسومي بالموبايل. ========================================================= */ /* --- الصفحات المسكّرة: برّا حسابات الرسم كلياً --- */ .view:not(.is-open){ content-visibility:hidden; } .view:not(.is-open), .view:not(.is-open) *{ animation-play-state:paused !important; } /* --- الشرائط عالموبايل: بلا حركة تلقائية، سحب حر بالإصبع --- */ .mmc.mmc--free .mmc-track{ display:flex; align-items:flex-start; gap:var(--mmc-gap,8px); overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; scrollbar-width:none; -ms-overflow-style:none; padding-inline:var(--mmc-pad,16px); scroll-padding-inline:var(--mmc-pad,16px); } .mmc.mmc--free .mmc-track::-webkit-scrollbar{ width:0; height:0; display:none; } .mmc.mmc--free .mmc-screen{ position:relative; top:auto; left:auto; transform:none !important; flex:0 0 calc(var(--mmc-w) * 1px); scroll-snap-align:center; scroll-snap-stop:always; will-change:auto; } @media (max-width:820px){ /* بلور الهيدر: أغلى عنصر رسم بالصفحة عالموبايل */ .site-header{ backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(247,241,227,.95); } /* ظل عريض ورا سبع شرائح بينعاد رسمو مع كل حركة إصبع */ .mmc-screen{ box-shadow:0 2px 10px rgba(var(--mmc-sh),.16); } .mmc-screen:hover{ box-shadow:0 2px 10px rgba(var(--mmc-sh),.16); } } /* --- أهداف اللمس: ٤٤ بكسل هي الحدّ الأدنى المريح للإصبع --- */ @media (hover:none),(pointer:coarse){ .nav-toggle{ min-width:46px; min-height:46px; } .nav-mobile a{ min-height:46px; display:flex; align-items:center; } .foot-nav a{ min-height:42px; display:flex; align-items:center; } .foot-soc a{ min-width:42px; min-height:42px; } a, button, [role="button"]{ -webkit-tap-highlight-color:rgba(253,185,19,.20); } /* ما في ماوس: تلميحات «مرّر فوق» ما إلها معنى */ .hint-hover{ display:none !important; } .hint-tap, .hint-touch{ display:inline !important; } } html[dir="ltr"] #footKash{display:none} html[dir="ltr"] .sj-orb-text{ font-size:clamp(19px,4.1vmin,38px); max-width:68%; text-align:center; line-height:1.12; } /* الثقب الدودي — لوحة رسم بين الحقل والكروت */ #sjTunnel{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:0; } /* الكرت فوق الثقب. وضوح النص مضمون من مكانين: ١) الثقب بيخفت جسيماته بمنطقة النص (شوف initTunnel) ٢) هالة نصية بلون الحقل — بتذوب مع الخلفية بدل ما تعمل بقعة */ .sj-card{ z-index:2; } .sj-card-in{ position:relative; } .sj-title{ text-shadow:0 0 26px rgba(253,203,64,.95), 0 0 9px rgba(253,203,64,.9); } .sj-body, .sj-num{ text-shadow:0 0 18px rgba(253,203,64,.95), 0 0 7px rgba(253,203,64,.9); } /* الخدمة الواحدة — بتاخد المسرح لحالها */ .sj-card{ position:absolute; inset:0; display:grid; place-items:center; padding:0 24px; opacity:0; pointer-events:none; will-change:transform, opacity; } .sj-card-in{ max-width:840px; text-align:center; } .sj-num{ display:inline-block; font-family:var(--mono); font-size:13px; letter-spacing:.22em; color:rgba(23,23,23,.62); margin-bottom:20px; border:1px solid rgba(23,23,23,.28); border-radius:99px; padding:6px 16px; direction:ltr; unicode-bidi:isolate; } .sj-title{ font-size:clamp(30px,6.2vw,68px); font-weight:700; line-height:1.2; letter-spacing:-.025em; color:var(--ink); } /* الكلمة بتضل وحدة وحدة حتى ما ينكسر سطر بنص كلمة، والحرف جوّاتها inline-block حتى نقدر نحرّكه لحاله */ .sj-wd{ display:inline-block; white-space:nowrap; } .sj-l{ display:inline-block; } /* العمق (الاقتراب والابتعاد) على الصندوق الداخلي مش على الكرت، لأن الكرت بيغطّي الشاشة كلها وتشويشه بيكلّف كتير */ .sj-card-in{ will-change:transform; } .sj-body{ margin-top:20px; font-size:clamp(15px,2.1vw,23px); line-height:1.75; color:rgba(23,23,23,.72); max-width:640px; margin-inline:auto; } /* عدّاد الرحلة */ .sj-hud{ position:absolute; inset-inline:0; bottom:52px; display:flex; flex-direction:column; align-items:center; gap:12px; opacity:0; transition:opacity var(--t-mid) var(--mm); } .sj-hud.on{ opacity:1; } .sj-ticks{ display:flex; gap:7px; } .sj-ticks i{ display:block; width:22px; height:2px; background:rgba(23,23,23,.26); border-radius:2px; transition:background var(--t-mid) var(--mm), transform var(--t-mid) var(--mm); } .sj-ticks i.on{ background:var(--ink); transform:scaleY(2); } .sj-count{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:rgba(23,23,23,.6); direction:ltr; unicode-bidi:isolate; } /* تلميح "كمّل نزول" */ .sj-cue{ position:absolute; inset-inline:0; bottom:44px; text-align:center; transition:opacity .4s var(--mm); font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--ink-mute); animation:sjBob 2.2s var(--mm) infinite; } @keyframes sjBob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(6px) } } @media (max-width:720px){ .svcj{ height:500vh; } .sj-orb{ width:74vmin; } .sj-hud{ bottom:38px; } } /* لو الزائر طالب "قلّل الحركة" — منرجع للشبكة العادية */ @media (prefers-reduced-motion:reduce){ .svcj{ height:auto; padding:80px 0; } .sj-stage{ position:static; height:auto; display:block; } .sj-field{ display:none; } .sj-orb{ position:relative; top:auto; left:auto; transform:none; margin:0 auto 40px; } .sj-card{ position:relative; inset:auto; opacity:1 !important; pointer-events:auto; transform:none !important; padding:26px 0; border-bottom:1px solid var(--line); -webkit-mask-image:none !important; mask-image:none !important; } .sj-hud, .sj-cue{ display:none; } } .cls{ background:var(--page); padding:clamp(56px,6.4vw,76px) 0 clamp(60px,6.8vw,80px); border-block:1px solid var(--line); } .cls-head{ text-align:center; margin-bottom:clamp(30px,3.6vw,42px); } .cls-title{ font-family:var(--font-d); font-weight:700; letter-spacing:-.015em; line-height:1.25; margin:0; font-size:clamp(19px,2.6vw,26px); } /* نفس موتيف الهايلايت الأصفر بعناوين الموقع */ .cls-main{ background:linear-gradient(var(--brand),var(--brand)) no-repeat right .82em/0% .34em; transition:background-size 1s var(--mm) .1s; } .cls-head.in .cls-main{ background-size:100% .34em; } /* ⚠ direction:ltr مقصود. موضع صندوق المسار بيحدّدو اتجاه الحاوية مو اتجاهه هو: بالـRTL بيتعلّق بالحافة اليمنى وبيطلع لبرّا لليسار بس، فالسطر الراجع (‎-50%→0) بيبلّش كلّو برّا الشاشة. بالـLTR بيطلع لبرّا لليمين فالسطرين التنين بيلاقوا محتوى يغطّي. الشعارات صور فما بيفرق معها اتجاه النص. */ .cls-rib{ position:relative; overflow:hidden; direction:ltr; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); } .cls-rib + .cls-rib{ margin-top:clamp(26px,3vw,40px); } .cls-track{ display:flex; align-items:center; gap:clamp(46px,5.6vw,84px); width:max-content; animation:clsA 46s linear infinite; will-change:transform; } .cls-rib--b .cls-track{ animation-name:clsB; animation-duration:53s; } .cls-rib:hover .cls-track{ animation-play-state:paused; } @keyframes clsA{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)} } @keyframes clsB{ from{transform:translate3d(-50%,0,0)} to{transform:translate3d(0,0,0)} } /* الحجم: الارتفاع = --h × --u. و--h محسوبة لكل شعار حتى تتساوى **المساحة** مو الارتفاع. نسب الشعارات من 0.90 (أكرك عجم) لـ3.94 (Aston)، فلو وحّدنا الارتفاع كان العريض ياخد أربع أضعاف مساحة المربّع ويطلع أقوى منه بلا سبب. */ .cls-rib{ --u:clamp(6.7px,.84vw,9.3px); } .cls-lg{ height:calc(var(--h) * var(--u)); width:auto; max-width:clamp(218px,29vw,310px); flex:none; transition:filter var(--t-mid) var(--mm-out), opacity var(--t-mid) var(--mm-out); } /* من طلب «قلّل الحركة»: الشريط بيوقف وبيصير شبكة عادية */ @media (prefers-reduced-motion:reduce){ .cls-track{ animation:none; flex-wrap:wrap; width:auto; justify-content:center; gap:26px 44px; } .cls-rib{ -webkit-mask-image:none; mask-image:none; } .cls-rib--b{ display:none; } } /* ========================================================= 12. البرامج الرقمية ========================================================= */ .programs{ background:var(--page); padding:70px 0 110px; /* مقاسات التثبيت — الجافاسكربت بيعبّي --ph-h و --pr-h بالقياس الحقيقي */ --ph-top:98px; /* تحت النافبار الثابت (14px + 72px + هامش) */ --ph-h:74px; /* طول العنوان بعد ما يصغّر */ --pr-h:56px; /* طول شريط العدّاد — بيهمّ بالموبايل بس */ --ph-gap:16px; } /* --- العنوان: بيثبت بالشاشة طول ما الكروت بتتراكم، وبيصغّر لسطر واحد --- */ .programs-stage{ position:relative; } /* نطاق التثبيت — بينتهي قبل زر الـ CTA */ .programs-head{ position:sticky; top:var(--ph-top); z-index:8; margin:0 0 40px; text-align:center; padding-block:12px 14px; background:var(--page); } /* ستارة فوق العنوان المثبّت: بتغطّي الشريط اللي بين أعلى الشاشة وأعلى العنوان، حتى ولا حرف من الكروت يطلّ من فوقه. بتشتغل بس وهو مثبّت ومصغّر. */ .programs-head.is-tight::before{ content:''; position:absolute; inset-inline:0; bottom:100%; height:var(--ph-top); background:var(--page); pointer-events:none; } /* تلاشي ناعم تحت العنوان حتى ما يبيّن خط قطع حاد لما الكرت يمرق من تحته */ .programs-head::after{ content:''; position:absolute; inset-inline:0; top:100%; height:26px; background:linear-gradient(var(--page),rgba(244,244,245,0)); pointer-events:none; } /* المحتوى بيضل بعرضه الأصلي، بس الخلفية بتاخد كل عرض الحاوية */ .programs-head .eyebrow, .programs-head .programs-title, .programs-head .programs-intro{ max-width:760px; margin-inline:auto; } .eyebrow{ display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--ink-mute); margin-bottom:14px; } .programs-title{ font-size:clamp(28px,4.8vw,48px); line-height:1.28; letter-spacing:-.015em; font-weight:700; transition:font-size var(--t-mid) var(--mm); } /* الحالة المصغّرة: السطر التمهيدي والـ eyebrow وفقرة الشرح بينطووا، وبيضل بس الجملة الأساسية مع الهايلايت الأصفر */ .programs-head .eyebrow, .programs-head .pt-lead, .programs-head .programs-intro{ overflow:hidden; max-height:220px; transition:opacity var(--t-mid) var(--mm), max-height var(--t-mid) var(--mm), margin var(--t-mid) var(--mm), transform var(--t-mid) var(--mm); } .programs-head.is-tight .eyebrow, .programs-head.is-tight .pt-lead, .programs-head.is-tight .programs-intro{ opacity:0; max-height:0; margin-top:0; margin-bottom:0; transform:translateY(-8px); } .programs-head.is-tight .programs-title{ font-size:clamp(21px,2.9vw,31px); } .programs-head.ph-nofx, .programs-head.ph-nofx *{ transition:none !important; } /* السطر الأول: أصغر وأهدأ — بيمهّد */ .pt-lead{ display:block; font-size:.52em; font-weight:500; letter-spacing:0; color:var(--ink-mute); margin-bottom:.22em; } /* السطر الثاني: هو الجملة — بولد وعليه هايلايت بينرسم من اليمين */ .pt-main{ /* inline + box-decoration-break:clone ضروريين: لو خلّيناها inline-block وانكسر السطر عالموبايل، الهايلايت بيرسم شريط واحد تحت آخر سطر وبيطلع مكسور. هيك كل سطر بياخد هايلايته. */ display:inline; -webkit-box-decoration-break:clone; box-decoration-break:clone; padding-inline:6px; background-image:linear-gradient(var(--brand),var(--brand)); background-repeat:no-repeat; background-position:right 0 bottom .10em; background-size:0% .36em; transition:background-size var(--t-big) var(--mm) .25s; } .programs-head.in .pt-main{ background-size:100% .36em; } .programs-intro{ margin-top:18px; color:var(--ink-soft); font-size:16px; line-height:1.85; } .num{ font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate; display:inline-block; } /* --------------------------------------------------------- تراكم الكروت — كل برنامج بينزل فوق اللي قبله الفكرة: كل الكروت إخوة بنفس الحاوية وكلها position:sticky. لأنهم إخوة، الكرت الأول بيثبت ويضل، والتاني بيطلع من تحت وبيغطّي عليه. مش محتاجين ولا سطر JS للتراكم نفسه — الجافاسكربت بس بيصغّر اللي تحت حتى يبيّن العمق. --------------------------------------------------------- */ .pstack{ display:grid; grid-template-columns:1fr 300px; gap:44px; } /* --- عمود العدّاد --- ملاحظة: عنصر sticky لازم يكون صندوقه أطول من محتواه حتى يلاقي مجال يتحرك فيه. بالديسكتوب .ps-rail بتتمدّد لطول الصف (stretch) والـ .ps-rail-in هي اللي بتثبت. بالموبايل بينعكس الدور: .ps-rail نفسها بتصير الشريط الثابت. */ .ps-rail-in{ position:sticky; top:max(24vh, calc(var(--ph-top) + var(--ph-h) + 40px)); } .ps-rail-k{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--ink-mute); } .ps-big{ display:block; font-size:clamp(52px,7vw,86px); font-weight:700; line-height:1; letter-spacing:-.035em; margin:10px 0 2px; font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate; /* الصندوق block بعرض العمود كامل، و direction:ltr بتحاذي النص لليسار. text-align:var(--mm-ta,right) بترجّعه على حافة البداية بالـ RTL. */ text-align:var(--mm-ta,right); } .ps-big-u{ font-size:17px; font-weight:600; color:var(--ink-soft); } .ps-bar{ position:relative; height:3px; background:rgba(23,23,23,.12); border-radius:99px; margin:22px 0 14px; } .ps-bar i{ position:absolute; inset-block:0; inset-inline-start:0; width:0%; background:var(--brand); border-radius:99px; } .ps-sub{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; } .ps-sub b{ font-size:20px; font-weight:700; direction:ltr; unicode-bidi:isolate; } .ps-sub span{ font-size:12.5px; color:var(--ink-mute); } .ps-idx{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--ink-mute); direction:ltr; unicode-bidi:isolate; } /* --- الكرت --- المتغيّرات المطلوبة على كل كرت: --i : ترتيبه بالتراكم --shell : لون لوحة الصورة (مأخوذ من حواف الصورة نفسها بالكود) --tint : لون البرنامج — غسلة خفيفة على الكرت كله ملاحظة: ممنوع أي transform هون — الجافاسكربت هو اللي بيملكه (التراكم). */ .ps-card{ position:sticky; /* بينزلوا تحت العنوان الثابت — القيمة بتتحسب من طوله الحقيقي */ top:calc(var(--ph-top) + var(--ph-h) + var(--ph-gap) + var(--i) * 16px); margin-bottom:0; /* نصّه صورة ونصّه شرح */ display:grid; grid-template-columns:1fr 1fr; gap:0; background:#fff; border-radius:26px; overflow:hidden; text-decoration:none; color:inherit; cursor:pointer; border:1px solid rgba(23,23,23,.08); box-shadow:0 1px 2px rgba(23,23,23,.04), 0 16px 40px rgba(23,23,23,.06); transform-origin:50% 0%; will-change:transform, opacity; transition:box-shadow .5s var(--mm-out); } .ps-card:hover{ box-shadow:0 1px 2px rgba(23,23,23,.05), 0 28px 62px rgba(23,23,23,.11); } /* غسلة بلون البرنامج على الكرت كله — بتربط النص باللوحة بدل الخط الفاصل الحاد */ .ps-card::before{ content:''; position:absolute; inset:0; background:var(--tint); opacity:.34; pointer-events:none; z-index:0; } .ps-card > *{ position:relative; z-index:1; } /* المسافة بين الكروت عناصر فاضية مستقلة، مش margin على الكرت نفسه. السبب: عنصر sticky بينحبس داخل حاويته بـ "صندوق الهامش" تبعه — يعني الـ margin-bottom الكبير كان بيدفع الكرت لفوق ويطلّعه من مكانه المثبّت قبل ما يخلص القسم. لما صارت المسافة عنصر منفصل، الكرت بيضل مثبّت بمكانه لحد آخر السكرول. */ .ps-gap{ height:60vh; pointer-events:none; } .ps-gap-end{ height:calc(34vh + var(--ph-h) + var(--ph-gap)); } /* اللوحة بلون الصورة نفسها، فالصورة بتذوب فيها بلا مربع أبيض ظاهر. contain مش cover — الصور أعمال فنية إلها تكوين، والقص بيقطع نصّها. */ .ps-media{ position:relative; aspect-ratio:375/445; min-height:0; background:var(--shell,#F3F1EC); overflow:hidden; } .ps-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .ps-media::after{ content:''; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(23,23,23,.05); } .ps-body{ padding:30px 32px 28px; display:flex; flex-direction:column; } /* ترويسة: رقم تسلسلي + خط شعرة + العميل — نفس موتيف «01 / 06» بالموقع */ .ps-top{ display:flex; align-items:center; gap:14px; margin-bottom:18px; } .ps-ix{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:rgba(23,23,23,.66); direction:ltr; unicode-bidi:isolate; flex:none; } .ps-hair{ flex:1; height:1px; background:rgba(23,23,23,.14); } .ps-kind{ font-family:var(--mono); font-size:11.5px; letter-spacing:.09em; color:rgba(23,23,23,.66); flex:none; } .ps-name{ font-size:clamp(24px,2.7vw,34px); font-weight:700; line-height:1.12; letter-spacing:-.028em; margin:0 0 11px; } .ps-line{ margin:0; color:var(--ink-soft); font-size:15.5px; line-height:1.8; max-width:46ch; } /* ---- الأرقام ---- صفّان، كل صف: الرقم ثم وحدته على نفس خط القاعدة — نفس تركيب العدّاد الجانبي (.ps-big + .ps-big-u)، حتى يفهم الزائر إنه العدّاد عم يجمع الكروت قدامه. مهم: بلا عرض ثابت للرقم. لو حطّينا عمود ثابت، فرق عرض الأرقام (‎+3‎ = 44px مقابل ‎+400‎ = 84px) بيروح كله بالمسافة بين الرقم وتسميته فبتتراوح بين 16px و56px. بلا عرض ثابت المسافة بتضل 10px دايماً، والحافة اليمنى بتضل محاذية لأن الرقم أول عنصر بصف RTL. */ .ps-metrics{ margin:auto 0 0; padding-top:20px; border-top:1px solid rgba(23,23,23,.12); display:flex; flex-direction:column; gap:12px; } .ps-metrics > div{ display:flex; align-items:baseline; gap:10px; } .ps-metrics strong{ display:inline-block; /* حتى الشريط الأصفر ياخد عرض الرقم بالضبط */ font-size:30px; font-weight:700; line-height:1; letter-spacing:-.035em; padding-bottom:6px; background-image:linear-gradient(var(--brand),var(--brand)); background-repeat:no-repeat; background-position:right bottom; background-size:0 3px; transition:background-size .9s var(--mm) .1s; } /* الشريط الأصفر تحت رقم المشاهدات بس — بيفرز أولوية بين رقمين متساويين بالوزن */ .ps-metrics > div:first-child strong{ background-size:100% 3px; } .ps-metrics span{ font-size:14.5px; line-height:1.3; color:rgba(23,23,23,.66); } /* النتيجة — أقوى جملة بالكرت */ .ps-flag{ margin:20px 0 0; position:relative; padding-inline-start:15px; font-size:15px; font-weight:600; line-height:1.65; color:var(--ink); background:none; border-radius:0; } .ps-flag::before{ content:''; position:absolute; inset-inline-start:0; top:.3em; bottom:.3em; width:3px; border-radius:2px; background:var(--brand); } @media (max-width:1000px){ /* بالموبايل ما في تراكم. العنوان بيمرق مع السكرول متل أي عنوان، وشريط الأرقام بيصير سطر تلخيص ساكن فوق اللستة. */ .programs{ --ph-top:90px; --ph-gap:12px; } .programs-head{ position:static; margin-bottom:20px; padding-block:0 2px; } .programs-head::after, .programs-head.is-tight::before{ display:none; } .pstack{ grid-template-columns:1fr; gap:0; } /* سطر التلخيص: مجموع المشاهدات والتفاعل. بلا صندوق ولا ظلّ ولا backdrop-filter — الصندوق الأبيض كان بياخد ١١٨ بكسل من الشاشة وبيوهم إنّو كرت لحالو. صار سطرين بخط فاصل تحتهن. */ .ps-rail{ order:-1; position:static; margin-bottom:20px; } .ps-rail-in{ position:static; display:flex; align-items:baseline; gap:2px 18px; flex-wrap:wrap; background:none; backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none; border-radius:0; padding:0 2px 12px; border-bottom:1px solid rgba(23,23,23,.10); } /* الشريط بيضل مليان ١٠٠٪ دايماً بلا تراكم، والعدّاد ٠٤/٠٤ مكرّر مع «01 / 04» المكتوب بكل كرت. الاتنين بينشالوا. */ .ps-rail-k, .ps-bar, .ps-idx{ display:none; } .ps-big{ display:inline-block; font-size:25px; margin:0; } .ps-big-u{ font-size:12px; color:var(--ink-mute); } .ps-sub{ gap:8px; } .ps-sub b{ font-size:16px; } .ps-sub span{ font-size:12px; color:var(--ink-mute); } /* الكروت ساكنة، وحدة تحت التانية. transform و opacity بـ!important: الجافاسكربت بيكتبهن inline بوضع الديسكتوب، ولو الزائر صغّر نافذته لازم ينمحوا فوراً. تصريح بستايل شيت مع !important بيغلب الـinline. */ .ps-card{ position:static; top:auto; margin-bottom:16px; transform:none !important; opacity:1 !important; } .ps-gap{ display:none; } /* .ps-gap-end انشال كمان، فلازم نرجّع نفس فاصل الاستراحة قبل زرّ «شوف باقي إبداعاتنا» — بلاه بيلزق بآخر كرت. */ .ps-cards{ padding-bottom:22px; } } @media (max-width:620px){ .programs{ --ph-top:86px; padding-bottom:48px; } .ps-card{ grid-template-columns:1fr; } /* الصورة كانت 375/445 — يعني ٤١٧ بكسل بعرض ٣٥١، نص الشاشة لحالها. 4/3 بينزّلها لـ٢٦٣، فالكرت كلّو بيصير أقصر من الشاشة وبيبيّن أوّل الكرت اللي بعده. object-position فوق شوي حتى الوجوه ما تنقصّ. */ .ps-media{ aspect-ratio:4/3; min-height:0; } .ps-media img{ inset:0; width:100%; height:100%; object-position:50% 32%; } .ps-body{ padding:18px 20px 18px; } .ps-top{ margin-bottom:12px; } .ps-name{ font-size:clamp(21px,5.6vw,25px); margin-bottom:7px; } .ps-line{ font-size:14px; line-height:1.65; } .ps-metrics{ padding-top:13px; gap:7px; } .ps-metrics strong{ font-size:22px; padding-bottom:4px; } .ps-metrics span{ font-size:12.5px; } .ps-flag{ margin-top:13px; font-size:13.5px; } .ps-go{ padding-top:16px; font-size:14.5px; } } /* --- الكرت صار رابطاً كاملاً --- */ /* الشريط اللي بينرسم من اليمين — نفس موتيف كرت الخدمة وكرت العمل */ .ps-card::after{ content:''; position:absolute; inset-inline:0; bottom:0; height:3px; background:var(--brand); transform:scaleX(0); transform-origin:var(--mm-org,right); z-index:2; transition:transform var(--t-mid) var(--mm); } .ps-card:hover::after, .ps-card:focus-visible::after{ transform:scaleX(1); } .ps-card:focus-visible{ outline:2px solid var(--ink); outline-offset:4px; } .ps-card:hover .ps-media img{ transform:scale(1.045); } .ps-media img{ transition:transform var(--t-big) var(--mm); } /* سطر «افتح الحالة» — بيقعد آخر النص وبيتحرّك بالهوفر */ .ps-go{ margin-top:auto; padding-top:22px; display:inline-flex; align-items:center; gap:10px; align-self:flex-start; font-weight:600; font-size:15px; color:var(--ink); transition:gap var(--t-mid) var(--mm), color var(--t-tap) var(--mm-soft); } .ps-card:hover .ps-go{ gap:16px; } .ps-go svg{ width:16px; height:16px; } @media (max-width:620px){ .ps-card{ grid-template-columns:1fr; } } /* --- زرّا آخر القسم: «شوف باقي المشاريع» + سهم لفوق --- بالـRTL أول عنصر بالصفّ بيقعد عاليمين، فزرّ السهم أوّل بالماركب. */ .programs-cta{ display:flex; align-items:center; justify-content:center; gap:12px; margin-top:8px; } .to-top{ width:52px; height:52px; flex:none; border-radius:50%; cursor:pointer; display:grid; place-items:center; background:transparent; border:1px solid rgba(23,23,23,.18); color:var(--ink); transition:background var(--t-tap) var(--mm-soft), transform var(--t-mid) var(--mm), border-color var(--t-tap) var(--mm-soft); } .to-top:hover{ background:var(--brand); border-color:transparent; transform:translateY(-3px); } .to-top svg{ width:19px; height:19px; } .btn-brand{ display:inline-block; background:var(--ink); color:#fff; border-radius:99px; padding:15px 34px; font-weight:600; font-size:15.5px; transition:transform var(--t-mid) var(--mm), background var(--t-tap) var(--mm-soft); } .btn-brand:hover{ background:var(--brand); color:var(--ink); transform:translateY(-3px); } /* ========================================================= 13. احترام إعداد "قلّل الحركة" ========================================================= */ @media (prefers-reduced-motion:reduce){ *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } .ps-card{ position:static; margin-bottom:20px; transform:none !important; opacity:1 !important; } .ps-gap{ display:none; } .ps-rail, .ps-rail-in{ position:static; margin-bottom:26px; } .programs-head{ position:static; } .programs-head::after{ display:none; } .hero-stage{ -webkit-mask-image:none !important; mask-image:none !important; } #cursor{ display:none; } } /* ========================================================= 14. صفحة أعمالنا — صفحة مستقلة، مش قسم بالرئيسية بتضل بصوت مشمش (الأصفر). الأخضر الريامي بيبلّش جوّا الحالة بس. ========================================================= */ /* المساحة الفوقانية بتحسب النافبار العائم (14 + 72) وزيادة تنفّس */ .wp-hero{ position:relative; background:var(--cream); text-align:center; padding:calc(14px + var(--header-h) + clamp(40px,6vw,80px)) 0 clamp(52px,7vw,84px); border-bottom:1px solid var(--line); } .wp-title{ font-size:clamp(30px,5.6vw,58px); line-height:1.22; letter-spacing:-.02em; font-weight:700; max-width:820px; margin-inline:auto; } .wp-intro{ margin:20px auto 0; max-width:640px; color:var(--ink-soft); font-size:16px; line-height:1.9; } .wp-body{ padding-block:clamp(44px,6vw,74px) clamp(56px,8vw,96px); } .wp-note{ margin:34px 0 0; text-align:center; font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--ink-mute); } /* --- طبقة الباترن --- ملاحظة مهمة: عنصر SVG بلا width/height هو عنصر مُستبدَل (replaced)، و inset:0 لحاله ما بيمدّده — بيضل بمقاسه الجوهري 300×150 وبينحشر بزاوية. لازم width/height صريحين. */ .rpat{ position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; } /* الهايلايت بينرسم أول ما تفتح الصفحة */ #works-page.is-open .pt-main{ background-size:100% .36em; } /* --- العمل المميّز --- */ .wk-feat{ position:relative; display:grid; grid-template-columns:1.05fr 1fr; gap:0; background:#fff; border:1px solid rgba(23,23,23,.08); border-radius:var(--radius-card); overflow:hidden; cursor:pointer; text-align:var(--mm-ta,right); box-shadow:0 1px 2px rgba(23,23,23,.04), 0 16px 40px rgba(23,23,23,.06); opacity:0; transform:translateY(30px); transition:opacity var(--t-big) var(--mm), transform var(--t-big) var(--mm), box-shadow var(--t-mid) var(--mm); } .wk-feat.in{ opacity:1; transform:none; } .no-js .wk-feat{ opacity:1; transform:none; } .wk-feat:hover{ box-shadow:0 1px 2px rgba(23,23,23,.05), 0 30px 66px rgba(23,23,23,.12); } /* الشريط اللي بينرسم من اليمين — نفس موتيف كرت الخدمة */ .wk-feat::after{ content:''; position:absolute; inset-inline:0; bottom:0; height:3px; background:var(--brand); transform:scaleX(0); transform-origin:var(--mm-org,right); z-index:3; transition:transform var(--t-mid) var(--mm); } .wk-feat:hover::after{ transform:scaleX(1); } .wk-media{ position:relative; min-height:340px; overflow:hidden; background:linear-gradient(160deg,#EAF2E0 0%,#DCEBCE 100%); } .wk-media img{ position:absolute; inset:32px; width:calc(100% - 64px); height:calc(100% - 64px); object-fit:contain; z-index:2; transition:transform var(--t-big) var(--mm); } .wk-feat:hover .wk-media img{ transform:scale(1.045) rotate(-1.2deg); } /* الباترن الريامي جوّا اللوحة — بيعرّف بالعميل قبل ما تقرا اسمه */ .wk-media .rpat{ opacity:.5; z-index:1; } .wk-body{ padding:34px 36px 32px; display:flex; flex-direction:column; } .wk-top{ display:flex; align-items:center; gap:14px; margin-bottom:20px; } .wk-ix{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:rgba(23,23,23,.66); direction:ltr; unicode-bidi:isolate; flex:none; } .wk-hair{ flex:1; height:1px; background:rgba(23,23,23,.14); } .wk-kind{ font-family:var(--mono); font-size:11.5px; letter-spacing:.09em; color:rgba(23,23,23,.66); flex:none; } .wk-name{ font-size:clamp(28px,3.4vw,42px); font-weight:700; line-height:1.1; letter-spacing:-.03em; margin:0 0 6px; } .wk-place{ font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; color:var(--ink-mute); direction:ltr; unicode-bidi:isolate; } .wk-line{ margin:16px 0 0; color:var(--ink-soft); font-size:15.5px; line-height:1.85; max-width:44ch; } .wk-stats{ margin:24px 0 0; padding-top:20px; border-top:1px solid rgba(23,23,23,.12); display:flex; gap:30px; flex-wrap:wrap; } .wk-stats div{ display:flex; align-items:baseline; gap:8px; } .wk-stats strong{ font-size:26px; font-weight:700; line-height:1; letter-spacing:-.035em; direction:ltr; unicode-bidi:isolate; } .wk-stats span{ font-size:13px; color:rgba(23,23,23,.62); } .wk-go{ margin-top:26px; display:inline-flex; align-items:center; gap:10px; align-self:flex-start; background:var(--ink); color:#fff; border-radius:99px; padding:13px 26px; font-weight:600; font-size:15px; transition:background var(--t-tap) var(--mm-soft), transform var(--t-mid) var(--mm), gap var(--t-mid) var(--mm); } .wk-feat:hover .wk-go{ background:var(--brand); color:var(--ink); transform:translateY(-3px); gap:16px; } .wk-go svg{ width:17px; height:17px; } /* --- الأعمال القادمة: كروت هادية، بلا صور مزيّفة --- بدل ما نحطّ صورة ما إلنا إياها، منحطّ لوحة فاضية عليها رقم العمل. بتحسّ إنها مكان محجوز — مش كرت ناقص. */ .wk-grid{ margin-top:22px; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } @media (max-width:900px){ .wk-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:620px){ .wk-grid{ grid-template-columns:1fr; } } .wk-soon-card{ position:relative; background:#fff; border:1px solid rgba(23,23,23,.08); border-radius:var(--radius-card); overflow:hidden; display:flex; flex-direction:column; opacity:0; transform:translateY(26px); transition:opacity var(--t-big) var(--mm), transform var(--t-big) var(--mm), box-shadow var(--t-mid) var(--mm); } .wk-soon-card.in{ opacity:1; transform:none; } .wk-soon-card:hover{ box-shadow:0 20px 52px rgba(23,23,23,.08); } .wsc-panel{ position:relative; height:132px; display:grid; place-items:center; background: radial-gradient(circle, rgba(23,23,23,.11) 1.1px, transparent 1.2px) 0 0/12px 12px, #F1F1F2; border-bottom:1px solid rgba(23,23,23,.07); } .wsc-ix{ font-family:var(--mono); font-size:40px; font-weight:500; letter-spacing:.04em; color:rgba(23,23,23,.17); direction:ltr; unicode-bidi:isolate; } .wsc-body{ padding:24px 24px 26px; display:flex; flex-direction:column; flex:1; } .wsc-body h3{ margin:12px 0 6px; font-size:21px; font-weight:700; letter-spacing:-.025em; line-height:1.24; } .wsc-body p{ margin:14px 0 0; color:var(--ink-soft); font-size:14.6px; line-height:1.8; } .wk-soon{ align-self:flex-start; margin-top:20px; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--ink-mute); border:1px solid var(--line); border-radius:99px; padding:6px 13px; } @media (max-width:900px){ .wk-feat{ grid-template-columns:1fr; } .wk-media{ min-height:250px; } .wk-body{ padding:26px 24px 26px; } } /* ========================================================= 15. قشرة الصفحات الداخلية + الانتقال كل صفحة طبقة مثبّتة فوق الموقع، وإلها سكرول مستقل. ترتيب الطبقات: الرئيسية → أعمالنا (40) → الحالة (41). لما تفتح الحالة، صفحة أعمالنا بتضل شغّالة تحتها بمكان سكرولها — فالرجوع بيرجّعك بالضبط لوين كنت. ========================================================= */ .view{ position:fixed; inset:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; background:var(--page); color:var(--ink); visibility:hidden; opacity:0; transition:opacity .28s var(--mm-soft), visibility .28s; } .view.is-open{ visibility:visible; opacity:1; } #works-page{ z-index:40; } /* ملاحظة أساسية: منعيد ربط توكنز الهوية جوّا الحالة بس — فكل المكوّنات المشتركة (الأزرار، الهايلايت، الشرايط) بتقلب للأخضر الريامي بلا ما نكتب ولا قاعدة زيادة. صفحة أعمالنا بتضل بصوت مشمش. */ #case-riam{ --brand: #88BE40; --brand-deep: #276242; --ink: #2D2D2D; --ink-soft: #3E4B41; --ink-mute: rgba(45,45,45,.54); --ink-faint: rgba(45,45,45,.26); --page: #F4F4F4; --cream: #EAF2E0; --line: rgba(39,98,66,.15); --forest: #276242; --lime: #88BE40; z-index:41; } body.view-open{ overflow:hidden; } /* النافبار الأساسي بيضل ظاهر ومثبّت بالصفحات الداخلية — الزائر لازم يقدر يوصل لكل أقسام الموقع من أي مكان، مش بس يرجع لورا. ومنوقف الاختفاء عند النزول لأنه مربوط بسكرول النافذة، والنافذة مقفولة وقت الصفحات الداخلية فكان بيتجمّد بآخر حالة صار فيها. */ body.view-open .site-header{ transform:translateX(calc(50% * var(--mmx,1))) !important; opacity:1 !important; pointer-events:auto; } /* الشريط السفلي والسكرولبار من أثاث الرئيسية — ما إلهن معنى جوّا الصفحات */ body.view-open #status, body.view-open #sbar{ opacity:0; } #status, #sbar{ transition:opacity var(--t-mid) var(--mm); } /* --------------------------------------------------------- انتقال الصفحات — نفس رحلة «نساعدك في» بالضبط الفرق الوحيد إنه المحرّك هون هو الوقت، مش السكرول. ثلاث طبقات فوق بعض، نفس ترتيب قسم الخدمات: الحقل الدافي → الدائرة المائية → لوحة النفق وبالنهاية نفس ماسك المخرج: ثقب بيكبر بتسارع لحدّ ما يبلع الشاشة. --------------------------------------------------------- */ #warp{ position:fixed; inset:0; z-index:70; pointer-events:none; opacity:0; visibility:hidden; overflow:hidden; } #warp.on{ opacity:1; visibility:visible; } /* الماسك بينحطّ بس لما يبلّش المخرج يفتح. لو خلّيناه شغّال من البداية، بتصير عنا نقطتا توقّف متطابقتين تقريباً (0px و 0.1px) وبعض المحرّكات بتفشل ترسم التدرّج أصلاً فبتختفي الطبقة كلها. */ #warp.punch{ -webkit-mask-image:radial-gradient(circle at 50% 50%, transparent var(--hole,0px), #000 calc(var(--hole,0px) + var(--f,14px))); mask-image:radial-gradient(circle at 50% 50%, transparent var(--hole,0px), #000 calc(var(--hole,0px) + var(--f,14px))); } /* الحقل الدافي اللي بيحلّ محل الصورة لما نصير جوّاتها — نفس تدرّج .sj-field */ #warpField{ position:absolute; inset:0; opacity:0; background:radial-gradient(circle at 50% 45%, #FFD873 0%, #FDB913 46%, #EFA80B 100%); } /* الدائرة بتبلّش من تحت إصبع الزائر، مش من نص الشاشة */ #warpOrb{ position:absolute; top:50%; left:50%; width:min(56vmin,440px); height:min(56vmin,440px); transform:translate3d(-50%,-50%,0) scale(0); object-fit:contain; will-change:transform, opacity; backface-visibility:hidden; } #warpTunnel{ position:absolute; inset:0; width:100%; height:100%; } @media (prefers-reduced-motion:reduce){ #warp{ display:none; } } /* طبقة الباترن الريامي — بديل شبكة الصلبان جوّا الحالة */ #casePat{ position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:.05; } /* --- شريط الحالة --- قرص تاني بيعوم *تحت* النافبار الأساسي، مش مكانه. position:fixed مش sticky: هيك ما بياخد مكان بالتدفّق ولا بيترك فجوة فوق المحتوى، وبيضل ثابت طول الصفحة الطويلة. */ .case-bar{ position:fixed; top:calc(14px + var(--header-h) + 9px); inset-inline-start:50%; transform:translateX(calc(50% * var(--mmx,1))); width:min(1328px, calc(100% - 28px)); height:46px; z-index:45; display:flex; align-items:center; justify-content:space-between; gap:14px; padding-inline:20px; border-radius:99px; overflow:hidden; background:rgba(255,255,255,.72); backdrop-filter:blur(8px) saturate(1.35); -webkit-backdrop-filter:blur(8px) saturate(1.35); border:1px solid rgba(255,255,255,.8); box-shadow:0 10px 30px rgba(23,23,23,.07); animation:stepIn .7s var(--mm) both .1s; } @media (max-width:700px){ .case-bar{ height:42px; padding-inline:12px; } } .case-back{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; border:0; background:transparent; cursor:pointer; padding:7px 13px; border-radius:99px; white-space:nowrap; flex:none; transition:background var(--t-tap) var(--mm-soft), gap var(--t-mid) var(--mm); } .case-back:hover{ background:rgba(23,23,23,.07); gap:14px; } .case-back svg{ width:15px; height:15px; } .case-bar-mid{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--ink-mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .case-bar-mid b{ color:var(--brand-deep); font-weight:600; } /* شريط تقدّم القراءة */ .case-prog{ position:absolute; inset-inline:0; bottom:-1px; height:2px; background:transparent; } .case-prog i{ display:block; height:100%; width:0%; background:var(--brand); transition:width .12s linear; } @media (max-width:640px){ .case-bar-mid{ display:none; } } .case-wrap{ position:relative; z-index:1; } .cx{ width:100%; max-width:1120px; margin-inline:auto; padding-inline:22px; } /* ========================================================= 16. هيرو الحالة ========================================================= */ /* هون في قرصين فوق: النافبار (14+72) + شريط الحالة (9+46) */ .case-hero{ position:relative; min-height:clamp(600px,88svh,940px); display:grid; place-items:center; text-align:center; overflow:hidden; background:linear-gradient(178deg,#EAF2E0 0%,#F4F4F4 78%); padding:calc(14px + var(--header-h) + 9px + 46px + 34px) 0 40px; } .case-hero .rpat{ opacity:.34; } .ch-in{ position:relative; z-index:2; } .ch-eyebrow{ display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--ink-mute); margin-bottom:26px; } /* اللوغو بيتجسّد من نقاط — نفس تفتّت الهيرو بالرئيسية، بالمقلوب */ .ch-logo{ width:min(400px,62vw); margin:0 auto 26px; } .ch-logo svg{ width:100%; height:auto; display:block; } .ch-title{ font-size:clamp(40px,8vw,92px); font-weight:700; line-height:1.06; letter-spacing:-.035em; } .ch-sub{ margin-top:20px; font-size:clamp(15px,2.1vw,21px); color:var(--ink-soft); line-height:1.7; } .ch-meta{ margin:48px auto 0; display:flex; flex-wrap:wrap; justify-content:center; gap:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); max-width:900px; } .ch-meta div{ flex:1 1 160px; padding:18px 14px; } .ch-meta div + div{ border-inline-start:1px solid var(--line); } .ch-meta k{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--ink-mute); margin-bottom:8px; } .ch-meta v{ display:block; font-size:15px; font-weight:600; } .ch-cue{ margin-top:34px; font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--ink-mute); animation:sjBob 2.2s var(--mm) infinite; } @media (max-width:640px){ .ch-meta div{ flex:1 1 50%; } .ch-meta div:nth-child(odd){ border-inline-start:0; } .ch-meta div:nth-child(n+3){ border-top:1px solid var(--line); } } /* ========================================================= 17. لبنات مشتركة داخل الحالة ========================================================= */ .cs{ position:relative; padding:clamp(70px,9vw,120px) 0; } .cs--tint{ background:var(--cream); } .cs--dark{ background:var(--forest); color:#fff; } .cs--dark .cs-k, .cs--dark .cs-lead{ color:rgba(255,255,255,.68); } .cs--dark .cs-hair{ background:rgba(255,255,255,.2); } /* فاصل القسم الكبير — «القسم الأول / الثاني» */ .part{ position:relative; padding:clamp(64px,8vw,104px) 0; background:var(--forest); color:#fff; overflow:hidden; } .part .rpat{ opacity:.13; } .part-in{ position:relative; z-index:2; text-align:center; } .part-k{ display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.24em; color:rgba(255,255,255,.62); border:1px solid rgba(255,255,255,.3); border-radius:99px; padding:7px 18px; margin-bottom:24px; } .part-t{ font-size:clamp(30px,6vw,64px); font-weight:700; line-height:1.14; letter-spacing:-.032em; } .part-s{ margin:20px auto 0; max-width:640px; font-size:clamp(15px,2vw,19px); line-height:1.8; color:rgba(255,255,255,.8); } /* ترويسة القسم الصغير */ .cs-head{ margin-bottom:44px; } .cs-top{ display:flex; align-items:center; gap:14px; margin-bottom:18px; } .cs-k{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--ink-mute); flex:none; direction:ltr; unicode-bidi:isolate; } /* تسمية عربية جوّا صف التسميات — بترجع RTL لحالها */ .cs-k--ar{ direction:rtl; } .cs-hair{ flex:1; height:1px; background:var(--line); } .cs-t{ font-size:clamp(24px,3.6vw,40px); font-weight:700; line-height:1.24; letter-spacing:-.025em; } /* الهايلايت اللي بينرسم من اليمين — نفس .pt-main */ .cs-hl{ display:inline; -webkit-box-decoration-break:clone; box-decoration-break:clone; padding-inline:6px; background-image:linear-gradient(var(--brand),var(--brand)); background-repeat:no-repeat; background-position:right 0 bottom .10em; background-size:0% .34em; transition:background-size var(--t-big) var(--mm) .2s; } .cs.in .cs-hl{ background-size:100% .34em; } .cs-lead{ margin-top:16px; max-width:62ch; color:var(--ink-soft); font-size:16px; line-height:1.9; } /* الكشف بالتدرّج */ .rv{ opacity:0; transform:translateY(26px); transition:opacity var(--t-big) var(--mm), transform var(--t-big) var(--mm); } .cs.in .rv, .rv.in{ opacity:1; transform:none; } /* شبكة كروت عامة */ .cgrid{ display:grid; gap:20px; } .cgrid--3{ grid-template-columns:repeat(3,1fr); } .cgrid--2{ grid-template-columns:repeat(2,1fr); } .cgrid--4{ grid-template-columns:repeat(4,1fr); } @media (max-width:900px){ .cgrid--3,.cgrid--4{ grid-template-columns:repeat(2,1fr); } } @media (max-width:620px){ .cgrid--2,.cgrid--3,.cgrid--4{ grid-template-columns:1fr; } } .ccard{ position:relative; background:#fff; border:1px solid var(--line); border-radius:22px; padding:26px 24px 28px; overflow:hidden; transition:box-shadow var(--t-mid) var(--mm), transform var(--t-mid) var(--mm); } .ccard:hover{ box-shadow:0 20px 50px rgba(39,98,66,.10); transform:translateY(-3px); } .ccard::before{ content:''; position:absolute; inset-inline:0; bottom:0; height:3px; background:var(--brand); transform:scaleX(0); transform-origin:var(--mm-org,right); transition:transform var(--t-mid) var(--mm); } .ccard:hover::before{ transform:scaleX(1); } .ccard .n{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--ink-mute); direction:ltr; unicode-bidi:isolate; } .ccard h4{ margin:14px 0 10px; font-size:18px; font-weight:700; line-height:1.4; letter-spacing:-.01em; } .ccard p{ margin:0; color:var(--ink-soft); font-size:14.8px; line-height:1.8; } /* نسخة «مشكلة» — الشريط أحمر خفيف بدل الأخضر */ .ccard--bad::before{ background:#C4372C; } .ccard--bad .n{ color:#C4372C; } /* ========================================================= 18. قبل / بعد — السحّابة ========================================================= */ .ba{ position:relative; border-radius:24px; overflow:hidden; border:1px solid var(--line); background:#fff; touch-action:pan-y; cursor:ew-resize; user-select:none; aspect-ratio:16/9; } @media (max-width:760px){ .ba{ aspect-ratio:4/3; } } .ba-side{ position:absolute; inset:0; display:grid; place-items:center; padding:8% 10%; } .ba-side svg{ width:min(78%,560px); height:auto; } /* بالعربي الزمن بيمشي من اليمين لليسار: «قبل» عاليمين و«بعد» عاليسار. فالطبقة الفوقانية هي «قبل»، مقصوصة من اليسار — يعني ظاهرة على يمين المقبض. */ .ba-before{ background:#F7F7F7; z-index:2; clip-path:inset(0 0 0 var(--split,50%)); } .ba-after{ background:linear-gradient(150deg,#EAF2E0,#DCEBCE); z-index:1; } .ba-tag{ position:absolute; top:16px; z-index:4; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; direction:ltr; unicode-bidi:isolate; background:rgba(255,255,255,.86); border:1px solid var(--line); border-radius:99px; padding:6px 14px; backdrop-filter:blur(6px); } .ba-tag--b{ right:16px; } .ba-tag--a{ left:16px; background:var(--forest); color:#fff; border-color:transparent; } .ba-handle{ position:absolute; top:0; bottom:0; z-index:5; width:2px; background:#fff; left:var(--split,50%); transform:translateX(-50%); box-shadow:0 0 0 1px rgba(39,98,66,.2); } .ba-knob{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:46px; height:46px; border-radius:50%; background:#fff; display:grid; place-items:center; box-shadow:0 6px 22px rgba(23,23,23,.18); color:var(--forest); transition:transform var(--t-mid) var(--mm); } .ba:hover .ba-knob{ transform:translate(-50%,-50%) scale(1.08); } .ba-knob svg{ width:22px; height:22px; } .ba-hint{ margin-top:14px; text-align:center; font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--ink-mute); } /* --- لقطة مشاكل اللوغو --- */ .issues{ display:grid; grid-template-columns:1.15fr 1fr; gap:38px; align-items:center; } @media (max-width:900px){ .issues{ grid-template-columns:1fr; gap:26px; } } /* بلا إطار ولا خلفية: الصورة مركّبة أصلاً على لون القسم (#EAF2E0) فبتذوب فيه بدل ما تنحبس بمربّع أبيض منفصل */ .issues-img img{ width:100%; height:auto; display:block; } .ilist{ display:flex; flex-direction:column; gap:2px; } .ilist li{ display:grid; grid-template-columns:auto 1fr; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); } .ilist li:last-child{ border-bottom:0; } .ilist .num2{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:#C4372C; padding-top:4px; direction:ltr; unicode-bidi:isolate; } .ilist b{ display:block; font-size:16.5px; font-weight:700; margin-bottom:6px; } .ilist span{ color:var(--ink-soft); font-size:14.8px; line-height:1.8; } /* ========================================================= 19. الألوان + الخطوط + الباترن ========================================================= */ .sw{ position:relative; border-radius:20px; overflow:hidden; border:1px solid var(--line); background:#fff; } .sw-chip{ height:150px; display:grid; place-items:center; position:relative; } .sw-chip span{ font-size:44px; font-weight:700; line-height:1; letter-spacing:-.04em; } .sw-meta{ padding:18px 18px 20px; } .sw-meta b{ display:block; font-size:15.5px; font-weight:700; margin-bottom:10px; } .sw-meta code{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--ink-mute); line-height:1.9; direction:ltr; unicode-bidi:isolate; text-align:var(--mm-ta,right); } .sw-copy{ position:absolute; top:12px; inset-inline-end:12px; font-family:var(--mono); font-size:10px; letter-spacing:.1em; background:rgba(255,255,255,.9); border:0; border-radius:99px; padding:5px 11px; cursor:pointer; opacity:0; transition:opacity var(--t-tap) var(--mm-soft); } .sw:hover .sw-copy{ opacity:1; } /* نسبة الاستخدام — شريط واحد بيحكي القصة */ .ratio{ display:flex; height:64px; border-radius:16px; overflow:hidden; border:1px solid var(--line); } .ratio i{ position:relative; display:grid; place-items:center; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; font-style:normal; transition:flex-grow var(--t-big) var(--mm); } /* الباترن الحيّ */ .pat-demo{ position:relative; border-radius:22px; overflow:hidden; border:1px solid var(--line); min-height:300px; background:#fff; } .pat-demo .rpat{ z-index:1; } .pat-ctl{ position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:10px; padding:16px; } .pat-btn{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; cursor:pointer; background:rgba(255,255,255,.88); border:1px solid var(--line); border-radius:99px; padding:8px 15px; transition:background var(--t-tap) var(--mm-soft), color var(--t-tap) var(--mm-soft); } .pat-btn.on{ background:var(--forest); color:#fff; border-color:transparent; } /* تنويعات اللوغو */ .lv{ border-radius:20px; overflow:hidden; border:1px solid var(--line); } .lv-box{ aspect-ratio:4/3; display:grid; place-items:center; padding:12%; } .lv-box svg{ width:100%; height:auto; } .lv-cap{ padding:14px 16px; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; color:var(--ink-mute); background:#fff; border-top:1px solid var(--line); } /* ========================================================= 20. القسم الثاني — الشيف ريام ========================================================= */ .show-lock{ display:grid; place-items:center; margin-bottom:10px; } .show-lock img{ width:min(420px,72vw); height:auto; } /* الاستوديو: ثلاث خطوات بتتكشف وحدة ورا وحدة */ .steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } @media (max-width:900px){ .steps{ grid-template-columns:1fr; } } .step{ position:relative; } .step-k{ display:flex; align-items:center; gap:12px; margin-bottom:16px; } .step-k i{ font-style:normal; font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--forest); border:1px solid var(--line); border-radius:99px; padding:6px 13px; direction:ltr; unicode-bidi:isolate; } .step-k b{ font-size:16.5px; font-weight:700; } .step-img{ border-radius:20px; overflow:hidden; border:1px solid var(--line); background:#fff; } .step-img img{ width:100%; height:auto; display:block; transition:transform var(--t-big) var(--mm); } .step:hover .step-img img{ transform:scale(1.03); } .step p{ margin:14px 2px 0; color:var(--ink-soft); font-size:14.6px; line-height:1.8; } /* --- عرض السِت المتواصل: الشريط بالنص + الشروح موزّعة على الجنبين --- الصور ست شرائح من لوح واحد — بتنركب فوق بعض بلا فجوة فبتقرأ كعرض واحد متواصل. الشريط بعمود أوسط، والشروح بتتناوب يمين/يسار وبتلزق بمحاذاة الشريحة اللي بتشرحها. */ .rstrip{ --rsw:min(1240px, calc(100vw - 44px)); width:var(--rsw); margin-inline:calc((100% - var(--rsw)) / 2); /* بيكسر حدود .cx حتى يضل الشريط بعرضه */ display:grid; grid-template-columns:minmax(150px,.72fr) minmax(0,2fr) minmax(150px,.72fr); column-gap:30px; row-gap:0; position:relative; } .rstrip img{ grid-column:2; display:block; width:100%; height:auto; background:#DCDEDD; /* حارس ضد أي خطّ شعري بين الشرائح */ } .rstrip img + img{ margin-block-start:-1px; } .rstrip img:nth-of-type(1){ grid-row:1; border-radius:20px 20px 0 0; } .rstrip img:nth-of-type(2){ grid-row:2; } .rstrip img:nth-of-type(3){ grid-row:3; } .rstrip img:nth-of-type(4){ grid-row:4; } .rstrip img:nth-of-type(5){ grid-row:5; } .rstrip img:nth-of-type(6){ grid-row:6; border-radius:0 0 20px 20px; } /* إطار واحد فوق الشريط كله — منجيبه كطبقة مستقلة حتى ما ينرسم خط بين كل شريحة وأختها */ .rstrip-frame{ grid-area:1 / 2 / 7 / 3; position:relative; z-index:2; pointer-events:none; border:1px solid var(--line); border-radius:20px; } /* الشروح — كل وحدة بتلزق لحدّ ما تخلص الشرائح اللي بتخصّها. اللي عاليمين محاذاتها معكوسة حتى تضل ملاصقة للشريط مش هاربة لبرّا. */ .rstrip-note--a{ grid-column:1; grid-row:1 / 3; text-align:end; } .rstrip-note--b{ grid-column:3; grid-row:3 / 4; } .rstrip-note--c{ grid-column:1; grid-row:4 / 7; text-align:end; } .rstrip-note--a .step-k, .rstrip-note--c .step-k{ justify-content:flex-end; } .rsn-in{ position:sticky; top:calc(var(--header-h) + 92px); padding-block:6px; } .rsn-in p{ margin:14px 2px 0; color:var(--ink-soft); font-size:14.6px; line-height:1.8; } @media (max-width:1080px){ .rstrip{ grid-template-columns:minmax(126px,.62fr) minmax(0,2fr) minmax(126px,.62fr); column-gap:22px; } .rsn-in p{ font-size:13.8px; } } @media (max-width:900px){ .rstrip{ grid-template-columns:1fr; column-gap:0; } .rstrip img{ grid-column:1; } .rstrip-frame{ grid-area:1 / 1 / 7 / 2; } .rstrip-note{ grid-column:1; grid-row:auto; text-align:start; } .rstrip-note .step-k{ justify-content:flex-start; } .rsn-in{ position:static; padding-top:26px; } .rstrip-note + .rstrip-note .rsn-in{ padding-top:20px; border-top:1px solid var(--line); } } /* الحلقات */ .eps{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; } @media (max-width:900px){ .eps{ grid-template-columns:repeat(2,1fr); } } @media (max-width:520px){ .eps{ grid-template-columns:1fr 1fr; gap:12px; } } .ep{ position:relative; border-radius:18px; overflow:hidden; background:#111; aspect-ratio:9/16; } .ep img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform var(--t-big) var(--mm), filter var(--t-mid) var(--mm); } .ep:hover img{ transform:scale(1.06); } .ep::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.68) 0%,rgba(0,0,0,0) 46%); } .ep-in{ position:absolute; z-index:2; inset-inline:14px; bottom:14px; color:#fff; } .ep-in k{ display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; color:rgba(255,255,255,.72); margin-bottom:5px; } .ep-in b{ display:block; font-size:14.5px; font-weight:700; line-height:1.35; } .ep-play{ position:absolute; z-index:3; top:50%; left:50%; transform:translate(-50%,-50%) scale(.86); width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.92); display:grid; place-items:center; opacity:0; transition:opacity var(--t-mid) var(--mm), transform var(--t-mid) var(--mm); color:var(--forest); } .ep:hover .ep-play{ opacity:1; transform:translate(-50%,-50%) scale(1); } .ep-play svg{ width:20px; height:20px; margin-inline-start:2px; } /* الأرقام */ .kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid rgba(255,255,255,.18); border-bottom:1px solid rgba(255,255,255,.18); } @media (max-width:760px){ .kpis{ grid-template-columns:1fr; } .kpi + .kpi{ border-inline-start:0 !important; border-top:1px solid rgba(255,255,255,.18); } } .kpi{ padding:38px 26px; text-align:center; } .kpi + .kpi{ border-inline-start:1px solid rgba(255,255,255,.18); } .kpi strong{ display:block; font-size:clamp(42px,7vw,74px); font-weight:700; line-height:1; letter-spacing:-.04em; color:var(--lime); direction:ltr; unicode-bidi:isolate; } .kpi span{ display:block; margin-top:12px; font-size:14.5px; color:rgba(255,255,255,.78); } /* شبكة السوشال */ .social-grid{ display:grid; grid-template-columns:1.35fr 1fr; gap:20px; align-items:stretch; } @media (max-width:820px){ .social-grid{ grid-template-columns:1fr; } } .sg-box{ border-radius:22px; overflow:hidden; border:1px solid var(--line); background:#fff; display:grid; place-items:center; padding:18px; } .sg-box img{ width:100%; height:auto; } .sg-box--dark{ background:#111; border-color:transparent; } /* الإغلاق */ .case-end{ text-align:center; padding:clamp(70px,9vw,120px) 0; } .case-end .q{ font-size:clamp(22px,3.6vw,40px); font-weight:700; line-height:1.4; letter-spacing:-.025em; max-width:20ch; margin:0 auto; } .case-end .b{ margin-top:26px; color:var(--ink-soft); font-size:16px; line-height:1.85; max-width:52ch; margin-inline:auto; } .case-end .cta{ margin-top:36px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; } .case-foot{ border-top:1px solid var(--line); padding:26px 0 40px; text-align:center; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--ink-mute); } @media (prefers-reduced-motion:reduce){ .view{ transition:none; } .wk-feat, .wk-soon-card{ opacity:1 !important; transform:none !important; } #works-page .pt-main{ background-size:100% .36em !important; } #warp{ display:none; } .rv{ opacity:1 !important; transform:none !important; } .cs-hl{ background-size:100% .34em !important; } } /* ========================================================= 22. صفحة الحالة: بودكاست مِش إمبوسيبل نفس منطق أرز ريام — إعادة ربط التوكنز جوّا #case-pod وبس، فكل المكوّنات المشتركة بتقلب لهوية البودكاست بلا قواعد مكرّرة. ========================================================= */ #case-pod{ --brand: #E8232A; /* أحمر مِش */ --brand-deep: #B8161D; --ink: #1B1B1B; --ink-soft: #3A342C; --ink-mute: rgba(27,27,27,.56); --ink-faint: rgba(27,27,27,.26); --page: #FAF6EC; --cream: #F5E4CC; --line: rgba(27,27,27,.13); --forest: #9E3B31; --lime: #F5E4CC; --teal: #0E4B45; z-index:42; } #case-pod .ccard:hover{ box-shadow:0 20px 50px rgba(158,59,49,.12); } #case-pod .cs--dark{ background:#17161A; } #case-pod .cs--dark .cs-t{ color:#fff; } #case-pod .btn-brand:hover{ background:var(--brand); color:#fff; } #case-pod .ilist .num2{ color:var(--brand); } #case-pod .ccard--bad::before{ background:var(--brand); } #case-pod .ccard--bad .n{ color:var(--brand); } /* عزل الكلمات اللاتينية داخل فقرة عربية */ #case-pod .ltr{ direction:ltr; unicode-bidi:isolate; display:inline-block; } /* نسيج الخلفية — خفيف بقصد: النجمة نسيج مش عنصر */ #podPat{ position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:.03; } /* --- الهيرو --- */ #case-pod .case-hero{ background:linear-gradient(178deg,#F7EBD9 0%,#FAF6EC 74%); } #case-pod .case-hero .rpat{ opacity:.055; } #case-pod .ch-logo{ width:min(500px,76vw); } /* --- لوحة الشعار --- */ .podmark{ position:relative; border-radius:24px; overflow:hidden; border:1px solid var(--line); background:#FBF3E4; display:grid; place-items:center; padding:clamp(26px,5vw,52px); min-height:260px; } .podmark .rpat{ opacity:.09; } .podmark svg.mk{ position:relative; z-index:2; width:100%; height:auto; } /* --- بلوك نص/صورة --- */ .duo{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(22px,3.4vw,46px); align-items:center; } .duo--tight{ grid-template-columns:.72fr 1fr; } @media (max-width:860px){ .duo,.duo--tight{ grid-template-columns:1fr; } } .duo-media{ border-radius:24px; overflow:hidden; border:1px solid var(--line); background:#FBF3E4; display:grid; place-items:center; } .duo-media img{ width:100%; height:auto; display:block; } .duo-media--pad{ padding:clamp(18px,3vw,34px); } .duo-body h4{ margin:0 0 14px; font-size:clamp(19px,2.5vw,24px); font-weight:700; letter-spacing:-.02em; } .duo-body p{ margin:0 0 14px; color:var(--ink-soft); font-size:15.6px; line-height:1.95; } .duo-body p:last-child{ margin-bottom:0; } .tick{ list-style:none; margin:20px 0 0; padding:0; } .tick li{ position:relative; padding-inline-start:22px; margin-bottom:13px; font-size:15.2px; line-height:1.85; color:var(--ink-soft); } .tick li b{ color:var(--ink); } .tick li::before{ content:''; position:absolute; inset-inline-start:0; top:.72em; width:10px; height:2px; background:var(--brand); } .tick li:last-child{ margin-bottom:0; } /* --- صور موقع التصوير --- */ .vgrid{ display:grid; grid-template-columns:.78fr 1fr; gap:18px; } @media (max-width:820px){ .vgrid{ grid-template-columns:1fr; } } .vshot{ margin:0; border-radius:22px; overflow:hidden; border:1px solid var(--line); background:#EFE2CC; } .vshot img{ width:100%; height:100%; object-fit:cover; display:block; } .vshot--tall{ grid-row:span 2; } @media (max-width:820px){ .vshot--tall{ grid-row:auto; } } /* --- شبكة الضيوف — الصور موحّدة المقاس أصلاً، فبلا قصّ ولا حاوية --- */ .gguests{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; } @media (max-width:900px){ .gguests{ grid-template-columns:repeat(2,1fr); } } .gg{ transition:transform var(--t-mid) var(--mm); } .gg:hover{ transform:translateY(-4px); } .gg img{ width:100%; height:auto; display:block; } /* --- شبكة الريلز --- */ .reels{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; } @media (max-width:860px){ .reels{ grid-template-columns:repeat(2,1fr); } } .reel{ border-radius:20px; overflow:hidden; border:1px solid var(--line); background:#fff; transition:transform var(--t-mid) var(--mm), box-shadow var(--t-mid) var(--mm); } .reel:hover{ transform:translateY(-5px); box-shadow:0 22px 48px rgba(158,59,49,.16); } .reel img{ width:100%; height:auto; display:block; } /* --- صفّ حقائق --- */ .facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:34px; } @media (max-width:760px){ .facts{ grid-template-columns:1fr; } .facts div + div{ border-inline-start:0 !important; border-top:1px solid var(--line); } } .facts div{ padding:26px 22px; text-align:center; } .facts div + div{ border-inline-start:1px solid var(--line); } .facts b{ display:block; font-size:clamp(28px,4.4vw,46px); font-weight:700; line-height:1; letter-spacing:-.035em; color:var(--brand); direction:ltr; unicode-bidi:isolate; } .facts span{ display:block; margin-top:10px; font-size:14px; color:var(--ink-mute); } /* --- شريط المعدّات — سطر واحد بدل قسم كامل --- */ .gearbar{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:30px; border:1px solid var(--line); border-radius:20px; overflow:hidden; background:#fff; } .gearbar div{ padding:20px 22px; border-inline-start:1px solid var(--line); } .gearbar div:first-child{ border-inline-start:0; } @media (max-width:900px){ .gearbar{ grid-template-columns:repeat(2,1fr); } .gearbar div:nth-child(odd){ border-inline-start:0; } .gearbar div:nth-child(n+3){ border-top:1px solid var(--line); } } @media (max-width:520px){ .gearbar{ grid-template-columns:1fr; } .gearbar div{ border-inline-start:0; } .gearbar div + div{ border-top:1px solid var(--line); } } .gearbar k{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.18em; color:var(--brand); margin-bottom:9px; direction:ltr; unicode-bidi:isolate; } .gearbar v{ display:block; font-size:14px; line-height:1.75; color:var(--ink-soft); } /* --- أزرار المنصّات --- روابط خارجية. مراقب النقر بالموقع بيمسك [data-go] و a[href^="#"] بس. */ .plats{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:30px; } .plats--hero{ margin-top:26px; } .plat{ display:inline-flex; align-items:center; gap:9px; border:1px solid var(--line); border-radius:99px; padding:11px 19px; background:#fff; color:var(--ink); font-size:14px; font-weight:600; line-height:1; transition:transform var(--t-mid) var(--mm), background var(--t-tap) var(--mm-soft), color var(--t-tap) var(--mm-soft), border-color var(--t-tap) var(--mm-soft), box-shadow var(--t-mid) var(--mm); } .plat svg{ width:17px; height:17px; flex:none; } .plat span{ direction:ltr; unicode-bidi:isolate; } .plat:hover{ background:var(--brand); color:#fff; border-color:transparent; transform:translateY(-3px); box-shadow:0 14px 30px rgba(232,35,42,.24); } .plat--sm{ padding:9px 16px; font-size:13px; } .plat--sm svg{ width:15px; height:15px; } .plat--lg{ padding:14px 24px; font-size:15px; } .plat--lg svg{ width:19px; height:19px; } @media (max-width:520px){ .plat,.plat--lg{ padding:11px 16px; font-size:13.5px; } .plats{ gap:8px; } } /* بلوك «استمع» — محطّة قصيرة، مش فصل */ .listen{ padding-block:clamp(52px,6.5vw,84px); } /* صور الخطوات بنسبة موحّدة */ #case-pod .step-img{ aspect-ratio:4/5; } #case-pod .step-img img{ width:100%; height:100%; object-fit:cover; object-position:center top; } /* كرت البودكاست بصفحة أعمالنا */ .wk-media--pod{ background:linear-gradient(160deg,#F5E4CC 0%,#EBD6B6 100%); } .wk-grid--2{ grid-template-columns:repeat(2,1fr) !important; } @media (max-width:620px){ .wk-grid--2{ grid-template-columns:1fr !important; } } /* ========================================================= 23. صفحة الحالة: مختار السوق · لوح المود الفريمات الـ١٥ مش صور متفرّقة: هي لوح واحد طويل انقصّ. فحص الحواف بيقول إنها بتكمّل بعضها بلا فراغ (فرق ٨–١٩ مقابل ٧٧ لأي زوج عشوائي)، فمنركّبها ملزوقة. وهون قرار الحركة كلّو: **ما منحرّك الفريمات**. أي ظهور بالتدريج أو بارالاكس بيرجّع يعلّم الحدود بين الخمستعشر قصّة ويقتل وهم اللوح الواحد. فالحركة كلها إما حوالين اللوح (مسطرة، شريط) أو فوقه (ضوء، نقاط). ========================================================= */ #case-mok{ --brand: #9E2A2B; /* أحمر دائرة البوسترات */ --brand-deep: #7A1F20; --ink: #241C15; /* حبر اللوح */ --ink-soft: #3C2E22; --ink-mute: rgba(36,28,21,.56); --ink-faint: rgba(36,28,21,.26); --page: #241C15; --cream: #DBC7A8; /* ورق قديم — اللون الغالب باللوح */ --line: rgba(36,28,21,.14); z-index:43; background:#241C15; /* الحيط اللي معلّق عليه اللوح */ } /* --- عرض اللوح: مسقوف على ١٢٨٠ = عرض الأصل بالضبط --- تلات أسباب، مش ذوق: ١. الصور مصدرها 1280px. أي عرض أكبر = تمطيط = حواف طريّة على كولاج بهالكثافة. الفول سكرين على شاشة ١٥١٢ كان بيمطّ ١٨٪. ٢. عند 1280 الفريم بيصير 720 ارتفاع، فبيدخل كامل بين الشريط العايم وآخر الشاشة (720+141=861). يعني كل وقفة سكرول بتنزل على فريم كامل — وهاد بالضبط اللي بتحتاجه المسطرة والكيبورد. ٣. الباقي بيصير حيط. والحيط الغامق بيرسم حدّ اللوح فبيصير «غرض معلّق» مش خلفية — وبيوصل مع بانل النهاية اللي بنفس اللون. المات الكريمي انجرّب وانرفض: حقل اللوح نفسه كريمي فالحدّ بيدوب. */ #case-mok .case-wrap{ padding-top:calc(14px + var(--header-h) + 9px + 46px + 26px); } .mokstack{ width:min(1280px,100%); margin-inline:auto; box-shadow:0 26px 70px rgba(0,0,0,.55); } .mokf{ position:relative; display:block; margin:0 0 -1px; /* السالب بيقفل شقّ تقريب البكسل */ line-height:0; font-size:0; } .mokf:last-of-type{ margin-bottom:0; } .mokf img{ display:block; width:100%; height:auto; margin:0; background:#2E2419; } /* --- بؤر الضوء: بتتنفّس فوق مصادر الضوء المرسومة أصلاً باللوح --- */ .mokglow{ position:absolute; left:var(--x); top:var(--y); width:calc(var(--r) * 2); aspect-ratio:1; border-radius:50%; pointer-events:none; mix-blend-mode:screen; will-change:opacity,transform; background:radial-gradient(circle, rgba(var(--c),.60) 0%, rgba(var(--c),.24) 38%, rgba(var(--c),0) 70%); animation:mokBreathe var(--d) ease-in-out infinite alternate var(--dl); } @keyframes mokBreathe{ from{ opacity:.26; transform:translate(-50%,-50%) scale(.93); } to { opacity:.88; transform:translate(-50%,-50%) scale(1.07); } } /* --- النقاط الساخنة --- */ .mokhot{ position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%); width:26px; height:26px; padding:0; border:0; background:transparent; cursor:pointer; z-index:3; line-height:0; } .mokhot i{ display:block; width:11px; height:11px; margin:5px; border-radius:50%; background:#FAF4E8; border:2.5px solid rgba(22,16,11,.92); box-shadow:0 2px 10px rgba(0,0,0,.5); transition:transform var(--t-mid) var(--mm), background var(--t-tap) var(--mm-soft); animation:mokBeat 2.9s var(--mm-out) infinite var(--dl,0s); } /* قرص غامق ورا النقطة — هوّي اللي بيفصلها عن النحاس اللمّاع والورق الفاتح. الغامق تحت والفاتح فوق: هيك بتكسب النقطة على أي خلفية، فاتحة كانت أو غامقة. */ .mokhot::before{ content:''; position:absolute; inset:-13px; border-radius:50%; z-index:-1; background:radial-gradient(circle, rgba(16,11,7,.75) 0%, rgba(16,11,7,.5) 42%, rgba(16,11,7,0) 72%); pointer-events:none; animation:mokScrim 2.9s var(--mm-out) infinite var(--dl,0s); } /* حلقة ثابتة حوالين النقطة — حدّ فاتح دايم، مش بس وقت النبضة */ .mokhot i::before{ content:''; position:absolute; inset:1px; border-radius:50%; border:1.5px solid rgba(250,244,232,.72); pointer-events:none; } /* حلقتين متتابعتين: الأولى ضيّقة، والتانية بتلحقها بعد نص دورة */ .mokhot::after, .mokhot i::after{ content:''; position:absolute; inset:2px; border-radius:50%; border:1.5px solid rgba(250,244,232,.8); pointer-events:none; animation:mokPing 2.9s var(--mm-out) infinite var(--dl,0s); } .mokhot i::after{ inset:-5px; border-color:rgba(250,244,232,.45); animation-delay:calc(var(--dl,0s) + 1.45s); } /* نبضة قلب: ضربتين وسكتة — الحركة المتقطّعة بتلفت أكتر من نبض متساوي */ @keyframes mokBeat{ 0%,70%,100%{ transform:scale(1); } 10%{ transform:scale(1.26); } 24%{ transform:scale(1); } 36%{ transform:scale(1.15); } } @keyframes mokScrim{ 0%,70%,100%{ opacity:.85; transform:scale(.94); } 16%{ opacity:1; transform:scale(1.1); } } @keyframes mokPing{ 0%{ transform:scale(.5); opacity:.95; } 62%{ transform:scale(1.95); opacity:0; } 100%{ transform:scale(1.95); opacity:0; } } /* --- الدخول مع السكرول: العين بتلتقط بداية الحركة وبتتجاهل التكرار. منخبّي النقاط بس إذا الجافاسكربت شغّال (كلاس js-enter) — تا ما تختفي إذا وقع. */ .mokstack.js-enter .mokf .mokhot i, .mokstack.js-enter .mokf .mokhot::before, .mokstack.js-enter .mokf .mokhot::after, .mokstack.js-enter .mokf .mokhot i::after{ opacity:0; animation:none; } .mokstack.js-enter .mokf.is-vis .mokhot i{ opacity:1; animation:mokEnter .62s var(--mm-out) var(--dl,0s) both, mokBeat 2.9s var(--mm-out) infinite calc(var(--dl,0s) + .8s); } .mokstack.js-enter .mokf.is-vis .mokhot::before{ opacity:1; animation:mokScrim 2.9s var(--mm-out) infinite calc(var(--dl,0s) + .8s); } .mokstack.js-enter .mokf.is-vis .mokhot::after{ opacity:1; animation:mokPing 2.9s var(--mm-out) infinite calc(var(--dl,0s) + .8s); } .mokstack.js-enter .mokf.is-vis .mokhot i::after{ opacity:1; animation:mokPing 2.9s var(--mm-out) infinite calc(var(--dl,0s) + 2.25s); } @keyframes mokEnter{ 0%{ transform:scale(.2); opacity:0; } 55%{ transform:scale(1.45); opacity:1; } 100%{ transform:scale(1); opacity:1; } } /* وقت ما تفتح النقطة بتهدا كل الحركة — تا يصير التركيز عالنص */ .mokhot:hover i, .mokhot.on i, .mokhot:focus-visible i, .mokstack.js-enter .mokf.is-vis .mokhot:hover i, .mokstack.js-enter .mokf.is-vis .mokhot.on i{ transform:scale(1.3); background:#fff; animation:none; opacity:1; } .mokhot:hover::before, .mokhot.on::before, .mokhot:focus-visible::before, .mokstack.js-enter .mokf.is-vis .mokhot:hover::before, .mokstack.js-enter .mokf.is-vis .mokhot.on::before{ animation:none; opacity:1; } .mokhot:hover::after, .mokhot.on::after, .mokhot:focus-visible::after, .mokhot:hover i::after, .mokhot.on i::after, .mokhot:focus-visible i::after, .mokstack.js-enter .mokf.is-vis .mokhot:hover::after, .mokstack.js-enter .mokf.is-vis .mokhot.on::after, .mokstack.js-enter .mokf.is-vis .mokhot:hover i::after, .mokstack.js-enter .mokf.is-vis .mokhot.on i::after{ animation:none; opacity:0; } /* --- سطر التلميح فوق اللوح: بيشرح إنو النقاط قابلة للضغط، وبيروح أول ما تضغط --- */ .mokhint{ width:min(1280px,100%); margin:0 auto 12px; padding:9px 14px; display:flex; align-items:center; justify-content:center; gap:10px; font-size:13px; letter-spacing:.01em; color:rgba(246,236,216,.72); background:rgba(246,236,216,.06); border:1px solid rgba(246,236,216,.14); border-radius:999px; transition:opacity var(--t-mid) var(--mm), transform var(--t-mid) var(--mm), margin var(--t-mid) var(--mm), height var(--t-mid) var(--mm); } .mokhint i{ width:11px; height:11px; flex:none; border-radius:50%; background:#FAF4E8; border:2.5px solid rgba(22,16,11,.92); box-shadow:0 0 0 4px rgba(16,11,7,.5); animation:mokBeat 2.9s var(--mm-out) infinite; } .mokhint.gone{ opacity:0; transform:translateY(-8px); pointer-events:none; height:0; padding-top:0; padding-bottom:0; margin-bottom:0; overflow:hidden; border-color:transparent; } .mokhot-tip{ position:absolute; left:50%; transform:translateX(-50%) translateY(6px); top:calc(100% + 10px); width:max-content; max-width:min(300px,62vw); background:#F6ECD8; color:var(--ink); text-decoration:none; border:1px solid rgba(36,28,21,.16); border-radius:14px; padding:11px 15px; font-size:13.5px; line-height:1.65; font-weight:500; box-shadow:0 14px 40px rgba(0,0,0,.28); opacity:0; visibility:hidden; pointer-events:none; transition:opacity var(--t-mid) var(--mm), transform var(--t-mid) var(--mm), visibility var(--t-mid); } .mokhot.up .mokhot-tip{ top:auto; bottom:calc(100% + 10px); transform:translateX(-50%) translateY(-6px); } .mokhot.t-l .mokhot-tip{ left:auto; right:-6px; transform:translateY(6px); } .mokhot.t-r .mokhot-tip{ left:-6px; right:auto; transform:translateY(6px); } .mokhot.t-r.up .mokhot-tip{ transform:translateY(-6px); } .mokhot.t-r:hover .mokhot-tip, .mokhot.t-r.on .mokhot-tip, .mokhot.t-r:focus-visible .mokhot-tip{ transform:translateY(0); } .mokhot.t-l.up .mokhot-tip{ transform:translateY(-6px); } .mokhot:hover .mokhot-tip, .mokhot.on .mokhot-tip, .mokhot:focus-visible .mokhot-tip{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); } .mokhot.t-l:hover .mokhot-tip, .mokhot.t-l.on .mokhot-tip, .mokhot.t-l:focus-visible .mokhot-tip{ transform:translateY(0); } a.mokhot-tip:hover{ background:#fff; } /* --- المسطرة: ١٥ شقّة، وحدة لكل فريم --- */ .mokrail{ position:fixed; inset-inline-start:14px; top:50%; transform:translateY(-50%); z-index:46; display:flex; flex-direction:column; gap:7px; animation:stepIn .7s var(--mm) both .25s; } .mokt{ border:0; background:transparent; padding:4px 0; cursor:pointer; display:block; line-height:0; } /* المسطرة صارت على حيط غامق — فالشقّات فتحت بدل ما تغمق */ .mokt i{ display:block; width:18px; height:2px; border-radius:2px; background:rgba(246,236,216,.26); transition:width var(--t-mid) var(--mm), background var(--t-tap) var(--mm-soft); } .mokt:hover i{ width:28px; background:rgba(246,236,216,.6); } .mokt.on i{ width:34px; background:#F6ECD8; } /* تحت ١٢٨٠ اللوح بياخد كل العرض، فالمسطرة بتقعد فوق الصورة مش عالحيط. ظلّ رفيع بيخلّي الشقّة تبيّن فوق أي خلفية — فاتحة كانت أو غامقة. */ @media (max-width:1280px){ .mokt i{ filter:drop-shadow(0 1px 2px rgba(0,0,0,.75)); } } @media (max-width:700px){ .mokrail{ inset-inline-start:7px; gap:5px; } .mokt i{ width:12px; } .mokt.on i{ width:22px; } #case-mok .case-wrap{ padding-top:calc(14px + var(--header-h) + 9px + 42px + 16px); } .mokstack{ box-shadow:none; } } /* الموقع بيخفّي نصّ الشريط تحت 640px. منرجّع رقم الفريم بس — على لوح طوله ١٦ ألف بكسل، «وين أنا» أهم من اسم الصفحة. */ @media (max-width:640px){ #case-mok #mokNum{ display:block; } } /* --- بانل النهاية: بلا هيك السكرول بيوقف ميت بعد ١٦ ألف بكسل --- */ .mokend{ background:#241C15; color:#F6ECD8; text-align:center; padding:clamp(56px,9vw,110px) 22px; } .mokend-mark{ font-size:11px; letter-spacing:.22em; color:rgba(246,236,216,.5); } .mokend-h{ margin:16px 0 0; font-size:clamp(26px,4.4vw,44px); font-weight:700; letter-spacing:-.03em; } .mokend-line{ margin:14px auto 0; max-width:44ch; color:rgba(246,236,216,.62); font-size:14.5px; line-height:1.9; } .mokend-cta{ margin-top:34px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; } .mokend-cta--back{ margin-top:14px; } .mokend-btn svg{ width:17px; height:17px; flex:none; } .mokend-btn{ display:inline-flex; align-items:center; gap:9px; cursor:pointer; font-family:var(--font); font-size:14px; font-weight:600; text-decoration:none; padding:13px 26px; border-radius:99px; border:1px solid transparent; background:#F6ECD8; color:#241C15; transition:transform var(--t-mid) var(--mm), background var(--t-tap) var(--mm-soft), gap var(--t-mid) var(--mm); } .mokend-btn:hover{ transform:translateY(-2px); gap:14px; } .mokend-btn--ghost{ background:transparent; color:#F6ECD8; border-color:rgba(246,236,216,.3); } .mokend-btn--ghost:hover{ background:rgba(246,236,216,.1); } #case-mok .case-foot{ background:#241C15; color:rgba(246,236,216,.4); border-top-color:rgba(246,236,216,.12); } /* كرت «مختار السوق» بأعمالنا صار رابط شغّال */ a.wk-soon-card{ text-decoration:none; color:inherit; cursor:pointer; } a.wk-soon-card:hover{ box-shadow:0 22px 56px rgba(23,23,23,.12); transform:translateY(-3px); } .wk-soon--go{ color:var(--brand-deep); background:rgba(253,185,19,.14); border-color:rgba(239,168,11,.45); } @media (prefers-reduced-motion:reduce){ .mokglow{ animation:none; opacity:.5; transform:translate(-50%,-50%); } .mokhot::after, .mokhot i::after{ animation:none; opacity:0; } .mokhot i, .mokhot::before, .mokhint i{ animation:none; } .mokstack.js-enter .mokf .mokhot i, .mokstack.js-enter .mokf .mokhot::before{ opacity:1; animation:none; } .mokrail{ animation:none; } } /* ========================================================= 17.b مكوّن الشريط اللانهائي (Infinite Marquee) حزام ناقل: الشاشة تطلع من طرف وترجع من التاني. بيدعم أكتر من شريط بنفس الصفحة، وكل واحد بيرث ألوان صفحته لأنو الظلّ مربوط بتوكن. ========================================================= */ .mmc{ position:relative; width:100%; overflow:hidden; padding:clamp(30px,3.8vw,54px) 0; --mmc-w:420; /* رقم بلا وحدة — الجافاسكربت بيضبطه */ --mmc-r:16px; --mmc-sh:23,23,23; /* لون الظل — بتغيّره كل صفحة */ } #case-riam .mmc{ --mmc-sh:39,98,66; } /* أخضر ريام */ #case-pod .mmc{ --mmc-sh:158,59,49; } /* أحمر مِش */ .mmc-track{ position:relative; width:100%; /* contain:layout ضروري مو تجميلي. بلاه كروم بيحسب «المستطيل المرئي» للمسار من مواضع أولادو، والشرائح عم تتحرك بالـtransform، فبيسجّل انزياح تخطيط وهمي. القياس: CLS=0.084 عالموبايل، مصدرو .mmc-track، مع إنّ المسار ثابت [0,609,393,434] طول الوقت. بالاحتواء بيستعمل صندوق المسار نفسو والانزياح بيصير صفر. ملاحظة: paint مقصود إنّو مو موجود — بيقصّ ظلال الشرائح. */ contain:layout; } /* حجز الارتفاع قبل ما يشتغل الجافاسكربت: نفس معادلة layout() حرفياً (realW * 16 / 9)، فالقيمة بتطابق وما بيصير انزياح. */ .mmc-track{ min-height:747px; } @media (max-width:820px){ /* 62vw مو 72: وضع السحب الحر كان بياخد 0.72 من عرض الشريط، والحزام بياخد 0.62. المعادلة لازم تطابق layout() وإلا بيصير انزياح لحظة ما يشتغل الجافاسكربت. */ .mmc-track{ min-height:calc(min(420px, 62vw) * 16 / 9); } } .mmc-screen{ position:absolute; top:0; left:0; width:calc(var(--mmc-w) * 1px); aspect-ratio:9/16; border-radius:var(--mmc-r); overflow:hidden; background:#1b1b1b; text-decoration:none; color:inherit; box-shadow:0 1px 2px rgba(var(--mmc-sh),.10), 0 10px 28px rgba(var(--mmc-sh),.14); will-change:transform; backface-visibility:hidden; transition:box-shadow var(--t-mid) var(--mm-out); outline:none; } /* البوستر شغّال كـ poster للفيديو نفسه — فما في لحظة سوداء */ .mmc-screen video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; background:#1b1b1b; } .mmc-screen:hover{ box-shadow:0 2px 4px rgba(var(--mmc-sh),.12), 0 20px 48px rgba(var(--mmc-sh),.24); } .mmc-screen:focus-visible{ box-shadow:0 0 0 3px var(--brand); } @media (prefers-reduced-motion:reduce){ .mmc-screen{ transition:none; } } /* ========================================================= مشــمُش — صفحة حالة د. سارة نفس نظام تصميم الموقع الأساسي بالحرف. الشي الوحيد اللي بيتغيّر: التوكنز جوّا #case-sara. ========================================================= */ /* ---------- 1. توكنز الموقع الأساسية ---------- */ /* ---------- 2. إعادة الضبط ---------- */ #case-sara .mono{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; font-variant-numeric:tabular-nums; } #case-sara .num{ font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate; display:inline-block; } /* ========================================================= 3. توكنز د. سارة الطوبي هو القائد مش الأصفر. السبب مكتوب بالصفحة نفسها: أصفر توقيع د. سارة هو نفسه أصفر مشمش تماماً (#FDB913)، فلو خلّيناه قائد بتصير صفحة العميل شكلها صفحة الوكالة. ========================================================= */ #case-sara{ --brand: #9B483F; /* طوبي محروق — الاسم العربي باللوغو */ --brand-deep: #7C382F; --ink: #2B211C; --ink-soft: #4A3A32; --ink-mute: rgba(43,33,28,.56); --ink-faint: rgba(43,33,28,.26); --page: #FAF6F0; --cream: #EFE6DA; /* ورق — اللون الأكثر حضوراً */ --line: rgba(43,33,28,.13); --forest: #6E2F27; /* فواصل الأقسام الكبيرة */ --lime: #FAA447; /* أرقام الأثر على الغامق */ --coral: #F16D47; --amber: #FAA447; --teal: #437C90; --gold: #FDB913; /* أصفر التوقيع */ z-index:44; /* فوق مختار السوق 43 */ background:var(--page); color:var(--ink); } /* الغامق فحمي مش طوبي: الفواصل الكبيرة أصلاً طوبية، ولو البلوكات الغامقة كمان طوبية بتصير تلات كتل حمرا متتالية والطوبي بيوقف يزعق. */ #case-sara .cs--dark{ background:#33261F; } #case-sara .cs--dark .cs-t{ color:#fff; } #case-sara .ccard:hover{ box-shadow:0 20px 50px rgba(155,72,63,.12); } #case-sara .ccard--bad::before{ background:var(--coral); } #case-sara .ccard--bad .n{ color:var(--coral); } #case-sara .mmc{ --mmc-sh:155,72,63; } #case-sara .ltr{ direction:ltr; unicode-bidi:isolate; display:inline-block; } /* ========================================================= ⚠ كتلة الوضع المستقل — تنشال كاملة وقت الدمج بالموقع بالموقع الكامل .view طبقة مثبّتة إلها سكرول مستقل. هون الصفحة لحالها فبتصير تدفّق عادي. ========================================================= */ /* ⚠ نهاية كتلة الوضع المستقل */ /* ========================================================= 4. قشرة الصفحة الداخلية ========================================================= */ #case-sara .case-bar{ position:fixed; top:calc(14px + var(--header-h) + 9px); inset-inline-start:50%; transform:translateX(calc(50% * var(--mmx,1))); width:min(1328px, calc(100% - 28px)); height:46px; z-index:45; display:flex; align-items:center; justify-content:space-between; gap:14px; padding-inline:20px; border-radius:99px; overflow:hidden; background:rgba(255,253,250,.78); backdrop-filter:blur(8px) saturate(1.35); -webkit-backdrop-filter:blur(8px) saturate(1.35); border:1px solid rgba(255,255,255,.8); box-shadow:0 10px 30px rgba(43,33,28,.08); animation:stepIn .7s var(--mm) both .1s; } @media (max-width:700px){ #case-sara .case-bar{ height:42px; padding-inline:12px; } } #case-sara .case-back{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; border:0; background:transparent; cursor:pointer; padding:7px 13px; border-radius:99px; white-space:nowrap; flex:none; transition:background var(--t-tap) var(--mm-soft), gap var(--t-mid) var(--mm); } #case-sara .case-back:hover{ background:rgba(43,33,28,.07); gap:14px; } #case-sara .case-back svg{ width:15px; height:15px; } #case-sara .case-bar-mid{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--ink-mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #case-sara .case-bar-mid b{ color:var(--brand-deep); font-weight:600; } #case-sara .case-prog{ position:absolute; inset-inline:0; bottom:-1px; height:2px; background:transparent; } #case-sara .case-prog i{ display:block; height:100%; width:0%; background:var(--brand); transition:width .12s linear; } @media (max-width:640px){ #case-sara .case-bar-mid{ display:none; } #case-sara #saraNum{ display:block; } } #case-sara .case-wrap{ position:relative; z-index:1; } #case-sara .cx{ width:100%; max-width:1120px; margin-inline:auto; padding-inline:22px; } /* ========================================================= 5. طبقة الباترن — ورق مرسوم بالكود، صفر بايت أصول ========================================================= */ #case-sara .rpat{ position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; } #saraPat{ position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:.05; } /* ========================================================= 6. هيرو الحالة ========================================================= */ #case-sara .case-hero{ position:relative; min-height:clamp(560px,84svh,900px); display:grid; place-items:center; text-align:center; overflow:hidden; background:linear-gradient(178deg,#F3E8DA 0%,#FAF6F0 76%); padding:calc(14px + var(--header-h) + 9px + 46px + 34px) 0 40px; } #case-sara .case-hero .rpat{ opacity:.10; } #case-sara .ch-in{ position:relative; z-index:2; } #case-sara .ch-eyebrow{ display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--ink-mute); margin-bottom:26px; } #case-sara .ch-logo{ width:min(560px,80vw); margin:0 auto 22px; } #case-sara .ch-logo svg{ width:100%; height:auto; display:block; } #case-sara .ch-sub{ margin-top:14px; font-size:clamp(15px,2.1vw,21px); color:var(--ink-soft); line-height:1.75; max-width:34ch; margin-inline:auto; } #case-sara .ch-quote{ margin-top:20px; font-size:clamp(14px,1.7vw,17px); color:var(--brand); font-weight:600; } #case-sara .ch-meta{ margin:44px auto 0; display:flex; flex-wrap:wrap; justify-content:center; gap:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); max-width:900px; } #case-sara .ch-meta div{ flex:1 1 160px; padding:18px 14px; } #case-sara .ch-meta div + div{ border-inline-start:1px solid var(--line); } #case-sara .ch-meta k{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--ink-mute); margin-bottom:8px; } #case-sara .ch-meta v{ display:block; font-size:15px; font-weight:600; } @media (max-width:640px){ #case-sara .ch-meta div{ flex:1 1 50%; } #case-sara .ch-meta div:nth-child(odd){ border-inline-start:0; } #case-sara .ch-meta div:nth-child(n+3){ border-top:1px solid var(--line); } } /* التفتّت النقطي — اللوغو بيتجسّد من نقاط عند الفتح */ #case-sara .dotmask{ -webkit-mask-image:radial-gradient(circle, #000 var(--dot,100%), transparent calc(var(--dot,100%) + 1%)); mask-image:radial-gradient(circle, #000 var(--dot,100%), transparent calc(var(--dot,100%) + 1%)); -webkit-mask-size:var(--cell,10px) var(--cell,10px); mask-size:var(--cell,10px) var(--cell,10px); -webkit-mask-repeat:repeat; mask-repeat:repeat; } /* ========================================================= 7. لبنات مشتركة ========================================================= */ #case-sara .cs{ position:relative; padding:clamp(70px,9vw,120px) 0; } #case-sara .cs--tint{ background:var(--cream); } #case-sara .cs--bleed{ overflow:hidden; } #case-sara .cs--dark{ background:var(--forest); color:#fff; } #case-sara .cs--dark .cs-k, #case-sara .cs--dark .cs-lead{ color:rgba(255,255,255,.68); } #case-sara .cs--dark .cs-hair{ background:rgba(255,255,255,.2); } #case-sara .part{ position:relative; padding:clamp(64px,8vw,104px) 0; background:var(--forest); color:#fff; overflow:hidden; } #case-sara .part .rpat{ opacity:.14; } #case-sara .part-in{ position:relative; z-index:2; text-align:center; } #case-sara .part-k{ display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.24em; color:rgba(255,255,255,.62); border:1px solid rgba(255,255,255,.3); border-radius:99px; padding:7px 18px; margin-bottom:24px; } #case-sara .part-t{ font-size:clamp(30px,6vw,64px); font-weight:700; line-height:1.14; letter-spacing:-.032em; } #case-sara .part-s{ margin:20px auto 0; max-width:640px; font-size:clamp(15px,2vw,19px); line-height:1.8; color:rgba(255,255,255,.8); } #case-sara .cs-head{ margin-bottom:44px; } #case-sara .cs-top{ display:flex; align-items:center; gap:14px; margin-bottom:18px; } #case-sara .cs-k{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--ink-mute); flex:none; direction:ltr; unicode-bidi:isolate; } #case-sara .cs-k--ar{ direction:rtl; } #case-sara .cs-hair{ flex:1; height:1px; background:var(--line); } #case-sara .cs-t{ font-size:clamp(24px,3.6vw,40px); font-weight:700; line-height:1.24; letter-spacing:-.025em; } /* الهايلايت بينرسم من اليمين. ⚠ لونه عنبري مش طوبي: الطوبي غامق، ولو حطّيناه شريط تحت نص غامق بيصير نص أسود على خلفية غامقة = ما بينقرا. العنبري فاتح فبيشتغل تحت الأسود والأبيض. وارتفاعه .26em مش .34em لأن الحرف العربي بينزل تحت خط القاعدة (ي، ر، ن) فالشريط السميك بيقطعهن. */ #case-sara .cs-hl{ display:inline; -webkit-box-decoration-break:clone; box-decoration-break:clone; padding-inline:6px; background-image:linear-gradient(var(--amber),var(--amber)); background-repeat:no-repeat; background-position:right 0 bottom -.04em; background-size:0% .26em; transition:background-size var(--t-big) var(--mm) .2s; } #case-sara .cs.in .cs-hl{ background-size:100% .34em; } #case-sara .cs-lead{ margin-top:16px; max-width:62ch; color:var(--ink-soft); font-size:16px; line-height:1.9; } #case-sara .rv{ opacity:0; transform:translateY(26px); transition:opacity var(--t-big) var(--mm), transform var(--t-big) var(--mm); } #case-sara .cs.in .rv, #case-sara .rv.in{ opacity:1; transform:none; } #case-sara .cgrid{ display:grid; gap:20px; } #case-sara .cgrid--3{ grid-template-columns:repeat(3,1fr); } #case-sara .cgrid--2{ grid-template-columns:repeat(2,1fr); } #case-sara .cgrid--4{ grid-template-columns:repeat(4,1fr); } @media (max-width:900px){ #case-sara .cgrid--3, #case-sara .cgrid--4{ grid-template-columns:repeat(2,1fr); } } @media (max-width:620px){ #case-sara .cgrid--2, #case-sara .cgrid--3, #case-sara .cgrid--4{ grid-template-columns:1fr; } } #case-sara .ccard{ position:relative; background:#fff; border:1px solid var(--line); border-radius:22px; padding:26px 24px 28px; overflow:hidden; transition:box-shadow var(--t-mid) var(--mm), transform var(--t-mid) var(--mm); } #case-sara .ccard:hover{ transform:translateY(-3px); } #case-sara .ccard::before{ content:''; position:absolute; inset-inline:0; bottom:0; height:3px; background:var(--brand); transform:scaleX(0); transform-origin:var(--mm-org,right); transition:transform var(--t-mid) var(--mm); } #case-sara .ccard:hover::before{ transform:scaleX(1); } #case-sara .ccard .n{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--ink-mute); direction:ltr; unicode-bidi:isolate; } #case-sara .ccard h4{ margin:14px 0 10px; font-size:18px; font-weight:700; line-height:1.4; letter-spacing:-.01em; } #case-sara .ccard p{ margin:0; color:var(--ink-soft); font-size:14.8px; line-height:1.8; } #case-sara .btn-brand{ display:inline-block; background:var(--ink); color:#fff; border-radius:99px; padding:15px 34px; font-weight:600; font-size:15.5px; transition:transform var(--t-mid) var(--mm), background var(--t-tap) var(--mm-soft); } #case-sara .btn-brand:hover{ background:var(--brand); color:#fff; transform:translateY(-3px); } /* بلوك نص/صورة */ #case-sara .duo{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(22px,3.4vw,46px); align-items:center; } #case-sara .duo--tight{ grid-template-columns:.82fr 1fr; } @media (max-width:860px){ #case-sara .duo, #case-sara .duo--tight{ grid-template-columns:1fr; } } #case-sara .duo-media{ border-radius:24px; overflow:hidden; border:1px solid var(--line); background:#F6EFE6; } #case-sara .duo-media img{ width:100%; height:auto; display:block; } #case-sara .duo-body h4{ margin:0 0 14px; font-size:clamp(19px,2.5vw,24px); font-weight:700; letter-spacing:-.02em; } #case-sara .duo-body p{ margin:0 0 14px; color:var(--ink-soft); font-size:15.6px; line-height:1.95; } #case-sara .duo-body p:last-child{ margin-bottom:0; } #case-sara .tick{ list-style:none; margin:22px 0 0; padding:0; } #case-sara .tick li{ position:relative; padding-inline-start:22px; margin-bottom:13px; font-size:15.2px; line-height:1.85; color:var(--ink-soft); } #case-sara .tick li b{ color:var(--ink); } #case-sara .tick li::before{ content:''; position:absolute; inset-inline-start:0; top:.72em; width:10px; height:2px; background:var(--brand); } #case-sara .tick li:last-child{ margin-bottom:0; } #case-sara .pull{ margin-top:26px; padding:20px 24px; border-inline-start:3px solid var(--brand); background:rgba(155,72,63,.05); border-radius:0 16px 16px 0; font-size:17px; font-weight:600; line-height:1.7; color:var(--brand-deep); } /* ========================================================= 8. قبل / بعد — السحّابة ========================================================= */ /* ⚠ الموبايلين طوليين (نسبة 0.49) فالصندوق لازم يكون طولي كمان، وإلا بيضل هامش فاضي ضخم عاليمين واليسار. */ #case-sara .ba{ position:relative; border-radius:24px; overflow:hidden; border:1px solid var(--line); background:#EFE6DA; touch-action:pan-y; cursor:ew-resize; user-select:none; aspect-ratio:3/4; max-width:600px; margin-inline:auto; } #case-sara .ba-side{ position:absolute; inset:0; } /* ⚠ فخّ: img بـ height:100% جوّا grid صفوفه auto بيوقع بحلقة دائرية فالمتصفح بيعتبره auto وبتطلع الصورة بحجمها الطبيعي (1443px). الحل: عنصر مطلق بـ margin:auto — وقتها النسب بتتحلّ على حاوية معلومة. */ #case-sara .ba-side img{ position:absolute; inset:0; margin:auto; width:auto; height:auto; max-width:66%; max-height:94%; object-fit:contain; filter:drop-shadow(0 18px 40px rgba(43,33,28,.26)); } /* بالعربي الزمن بيمشي من اليمين لليسار: «قبل» عاليمين و«بعد» عاليسار. فالطبقة الفوقانية هي «قبل»، مقصوصة من اليسار. */ #case-sara .ba-before{ background:#E4E0DA; z-index:2; clip-path:inset(0 0 0 var(--split,50%)); } #case-sara .ba-after{ background:linear-gradient(150deg,#F3E8DA,#EFE6DA); z-index:1; } #case-sara .ba-tag{ position:absolute; top:16px; z-index:4; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; direction:ltr; unicode-bidi:isolate; background:rgba(255,255,255,.9); border:1px solid var(--line); border-radius:99px; padding:6px 14px; backdrop-filter:blur(6px); } #case-sara .ba-tag--b{ right:16px; } #case-sara .ba-tag--a{ left:16px; background:var(--brand); color:#fff; border-color:transparent; } #case-sara .ba-handle{ position:absolute; top:0; bottom:0; z-index:5; width:2px; background:#fff; left:var(--split,50%); transform:translateX(-50%); box-shadow:0 0 0 1px rgba(155,72,63,.25); } #case-sara .ba-knob{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:46px; height:46px; border-radius:50%; background:#fff; display:grid; place-items:center; box-shadow:0 6px 22px rgba(43,33,28,.22); color:var(--brand); transition:transform var(--t-mid) var(--mm); } #case-sara .ba:hover .ba-knob{ transform:translate(-50%,-50%) scale(1.08); } #case-sara .ba-knob svg{ width:22px; height:22px; } /* ⚠ فخّ: input[type=range] داخل صفحة dir="rtl" ينقلب اتّجاهه، فتزيد قيمته من اليمين إلى اليسار. والمسطرة هنا شفّافة وتغطّي الصندوق كلّه، فحدث النقر يصلها أوّلاً وتكتب قيمة معكوسة فوق قيمة السحب. النتيجة: تسحب يساراً فيذهب المقبض يميناً. الحلّ سطر واحد. */ #case-sara .ba-range{ position:absolute; inset:0; z-index:6; width:100%; height:100%; direction:ltr; opacity:0; cursor:ew-resize; margin:0; -webkit-appearance:none; appearance:none; background:transparent; } #case-sara .ba-hint{ margin-top:14px; text-align:center; font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--ink-mute); } /* ========================================================= 9. الألوان + لوحة الشعار ========================================================= */ #case-sara .saramark{ position:relative; border-radius:24px; overflow:hidden; border:1px solid var(--line); background:#F6EFE6; display:grid; place-items:center; padding:clamp(30px,6vw,64px); min-height:280px; } #case-sara .saramark .rpat{ opacity:.16; } #case-sara .saramark svg.mk{ position:relative; z-index:2; width:100%; height:auto; } #case-sara .lvs{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:20px; } @media (max-width:700px){ #case-sara .lvs{ grid-template-columns:1fr; } } #case-sara .lv{ border-radius:20px; overflow:hidden; border:1px solid var(--line); } #case-sara .lv-box{ aspect-ratio:16/9; display:grid; place-items:center; padding:11%; } #case-sara .lv-box svg{ width:100%; height:auto; } #case-sara .lv-cap{ padding:14px 16px; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; color:var(--ink-mute); background:#fff; border-top:1px solid var(--line); } #case-sara .sw{ position:relative; border-radius:20px; overflow:hidden; border:1px solid var(--line); background:#fff; } #case-sara .sw-chip{ height:132px; display:grid; place-items:center; position:relative; } #case-sara .sw-chip span{ font-size:40px; font-weight:700; line-height:1; letter-spacing:-.04em; } #case-sara .sw-meta{ padding:16px 16px 18px; } #case-sara .sw-meta b{ display:block; font-size:15px; font-weight:700; margin-bottom:8px; } #case-sara .sw-meta code{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--ink-mute); line-height:1.8; direction:ltr; unicode-bidi:isolate; text-align:var(--mm-ta,right); } #case-sara .sw-meta i{ display:block; font-style:normal; margin-top:8px; font-size:13.4px; line-height:1.7; color:var(--ink-soft); } #case-sara .sw-copy{ position:absolute; top:12px; inset-inline-end:12px; font-family:var(--mono); font-size:10px; letter-spacing:.1em; background:rgba(255,255,255,.92); border:0; border-radius:99px; padding:5px 11px; cursor:pointer; opacity:0; transition:opacity var(--t-tap) var(--mm-soft); } #case-sara .sw:hover .sw-copy{ opacity:1; } #case-sara .cgrid--5{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; } @media (max-width:1000px){ #case-sara .cgrid--5{ grid-template-columns:repeat(3,1fr); } } @media (max-width:620px){ #case-sara .cgrid--5{ grid-template-columns:repeat(2,1fr); } } #case-sara .ratio{ display:flex; height:62px; border-radius:16px; overflow:hidden; border:1px solid var(--line); margin-top:26px; } #case-sara .ratio i{ position:relative; display:grid; place-items:center; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; font-style:normal; } #case-sara .note{ margin-top:22px; padding:16px 20px; border:1px dashed var(--line); border-radius:16px; font-size:14.4px; line-height:1.85; color:var(--ink-soft); background:rgba(250,164,71,.07); } #case-sara .note b{ color:var(--ink); } /* ========================================================= 10. الفورماتس — ثلاث خطوات ========================================================= */ #case-sara .steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } @media (max-width:900px){ #case-sara .steps{ grid-template-columns:1fr; } } #case-sara .step{ position:relative; background:#fff; border:1px solid var(--line); border-radius:22px; padding:26px 24px 28px; } #case-sara .step-k{ display:flex; align-items:center; gap:12px; margin-bottom:14px; } #case-sara .step-k i{ font-style:normal; font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--brand); border:1px solid var(--line); border-radius:99px; padding:6px 13px; direction:ltr; unicode-bidi:isolate; } #case-sara .step-k b{ font-size:16.5px; font-weight:700; } #case-sara .step p{ margin:0; color:var(--ink-soft); font-size:14.8px; line-height:1.85; } #case-sara .step-tag{ display:inline-block; margin-top:16px; font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--ink-mute); border:1px solid var(--line); border-radius:99px; padding:5px 12px; } /* ========================================================= 11. موك-أبس السوشال ميديا الحساب كلّه مرسوم بالكود: بلا صور واجهة مقرصنة، والصور الحقيقية الوحيدة هي المنشورات نفسها. ========================================================= */ #case-sara .igwrap{ position:relative; display:grid; grid-template-columns:minmax(300px,.92fr) 1fr; gap:clamp(20px,3.2vw,46px); align-items:center; } #case-sara .igwrap > *{ position:relative; z-index:1; } /* وهج دافي تحت الكتلة كلها — بيربط الجهاز بالكروت بدل ما يطلعوا شغلتين. ⚠ inset سالب بيطلّع الوهج برّا .cx فبيفتح سكرول أفقي بالصفحة كلها. لهيك القسم الحاضن عليه overflow:hidden (كلاس .cs--bleed). */ #case-sara .igwrap::before{ content:''; position:absolute; inset:-9% -5%; z-index:0; pointer-events:none; background:radial-gradient(58% 58% at 74% 48%, rgba(250,164,71,.34), transparent 70%), radial-gradient(52% 52% at 24% 62%, rgba(155,72,63,.16), transparent 72%); } @media (max-width:960px){ #case-sara .igwrap{ grid-template-columns:1fr; gap:44px; } } /* --- الجهاز --- */ #case-sara .igphone{ position:relative; width:100%; max-width:378px; margin-inline:auto; background:#1B1512; border-radius:44px; padding:11px; box-shadow:0 2px 4px rgba(43,33,28,.18), 0 40px 90px rgba(43,33,28,.34); } #case-sara .igphone::before{ content:''; position:absolute; top:19px; left:50%; transform:translateX(-50%); width:82px; height:22px; border-radius:99px; background:#1B1512; z-index:3; } #case-sara .igscreen{ position:relative; background:#fff; border-radius:32px; overflow:hidden; } #case-sara .igbar{ display:flex; align-items:center; justify-content:space-between; padding:34px 15px 9px; font-family:var(--mono); font-size:9px; color:#8B7F76; letter-spacing:.08em; } #case-sara .igprof{ display:flex; align-items:center; gap:12px; padding:6px 15px 12px; } #case-sara .igav{ width:52px; height:52px; border-radius:50%; object-fit:cover; flex:none; border:2px solid #fff; box-shadow:0 0 0 2px var(--brand); } #case-sara .igprof-t b{ display:block; font-size:13.5px; font-weight:700; direction:ltr; unicode-bidi:isolate; } #case-sara .igprof-t span{ display:block; font-size:11px; color:var(--ink-mute); margin-top:2px; } #case-sara .igstats{ display:flex; gap:0; padding:0 15px 12px; } #case-sara .igstats div{ flex:1; text-align:center; } #case-sara .igstats b{ display:block; font-size:13px; font-weight:700; direction:ltr; unicode-bidi:isolate; } #case-sara .igstats span{ display:block; font-size:9.5px; color:var(--ink-mute); margin-top:1px; } #case-sara .igtabs{ display:flex; border-top:1px solid rgba(43,33,28,.12); } #case-sara .igtabs i{ flex:1; display:grid; place-items:center; padding:9px 0; color:rgba(43,33,28,.32); } #case-sara .igtabs i:first-child{ color:var(--ink); box-shadow:inset 0 2px 0 var(--ink); } #case-sara .igtabs svg{ width:17px; height:17px; } #case-sara .iggrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:#fff; padding-bottom:14px; } #case-sara .iggrid img{ width:100%; aspect-ratio:1; object-fit:cover; display:block; } /* --- مروحة الكروت: متداخلة ومايلة، مش شبكة منتظمة --- */ #case-sara .igfan{ position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 12px; } @media (max-width:620px){ #case-sara .igfan{ grid-template-columns:1fr 1fr; gap:12px 8px; } /* عالموبايل الميلان بيطلّع زاوية الكرت برّا الشاشة وبيفتح سكرول أفقي. والمساحة أصلاً ضيّقة فالميلان ما بيضيف شي — منشيلو. */ #case-sara .igfan .igcard{ --rot:0deg; --dy:0px; } } #case-sara .igcard{ background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; transform:rotate(var(--rot,0deg)) translateY(var(--dy,0px)); box-shadow:0 1px 2px rgba(43,33,28,.06), 0 18px 44px rgba(43,33,28,.14); transition:transform var(--t-mid) var(--mm-out), box-shadow var(--t-mid) var(--mm); } /* الكشف بالنزول بيدعس على transform تبع الميلان — فمنعيد تعريفه هون */ #case-sara .igcard.rv{ opacity:0; transform:rotate(var(--rot,0deg)) translateY(calc(var(--dy,0px) + 26px)); } #case-sara .igcard.rv.in{ opacity:1; transform:rotate(var(--rot,0deg)) translateY(var(--dy,0px)); } #case-sara .igcard:hover{ transform:rotate(0deg) translateY(-8px); box-shadow:0 2px 6px rgba(43,33,28,.08), 0 30px 66px rgba(155,72,63,.22); z-index:4; } #case-sara .igc-h{ display:flex; align-items:center; gap:8px; padding:10px 12px; } #case-sara .igc-h img{ width:26px; height:26px; border-radius:50%; object-fit:cover; flex:none; } #case-sara .igc-h b{ font-size:11.5px; font-weight:700; direction:ltr; unicode-bidi:isolate; flex:1; } #case-sara .igc-h i{ font-style:normal; color:var(--ink-faint); letter-spacing:1px; font-size:13px; } #case-sara .igcard > img{ width:100%; display:block; } #case-sara .igc-a{ display:flex; align-items:center; gap:13px; padding:10px 12px 12px; color:var(--ink-soft); } #case-sara .igc-a svg{ width:17px; height:17px; } #case-sara .igc-a .sp{ flex:1; } /* ========================================================= 12. خريطة المنطقة الآمنة ========================================================= */ #case-sara .szwrap{ display:grid; grid-template-columns:.62fr 1fr; gap:clamp(24px,4vw,48px); align-items:center; } @media (max-width:860px){ #case-sara .szwrap{ grid-template-columns:1fr; } } #case-sara .szmap{ width:min(260px,72vw); margin-inline:auto; display:block; filter:drop-shadow(0 18px 44px rgba(43,33,28,.20)); } #case-sara .szlist li{ display:grid; grid-template-columns:auto 1fr; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); align-items:start; } #case-sara .szlist li:last-child{ border-bottom:0; } #case-sara .szlist em{ width:15px; height:15px; border-radius:5px; margin-top:5px; display:block; } #case-sara .szlist b{ display:block; font-size:16px; font-weight:700; margin-bottom:5px; } #case-sara .szlist span{ color:var(--ink-soft); font-size:14.6px; line-height:1.8; } /* ========================================================= 13. الحملات + الأرقام ========================================================= */ #case-sara .camp{ background:#fff; border:1px solid var(--line); border-radius:22px; overflow:hidden; } #case-sara .camp-h{ display:flex; align-items:center; gap:12px; padding:22px 24px 0; } #case-sara .camp-h b{ font-size:18px; font-weight:700; } #case-sara .camp-h em{ font-style:normal; font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:#fff; background:var(--brand); border-radius:99px; padding:5px 11px; flex:none; } #case-sara .camp p{ margin:12px 24px 0; color:var(--ink-soft); font-size:14.8px; line-height:1.85; } #case-sara .camp-n{ display:grid; grid-template-columns:repeat(4,1fr); margin-top:20px; border-top:1px solid var(--line); } #case-sara .camp-n div{ padding:16px 10px; text-align:center; border-inline-start:1px solid var(--line); } #case-sara .camp-n div:first-child{ border-inline-start:0; } #case-sara .camp-n b{ display:block; font-size:19px; font-weight:700; letter-spacing:-.02em; color:var(--brand); direction:ltr; unicode-bidi:isolate; } #case-sara .camp-n span{ display:block; margin-top:5px; font-size:11.5px; color:var(--ink-mute); } @media (max-width:520px){ #case-sara .camp-n{ grid-template-columns:repeat(2,1fr); } #case-sara .camp-n div:nth-child(odd){ border-inline-start:0; } #case-sara .camp-n div:nth-child(n+3){ border-top:1px solid var(--line); } } #case-sara .kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid rgba(255,255,255,.18); border-bottom:1px solid rgba(255,255,255,.18); } @media (max-width:760px){ #case-sara .kpis{ grid-template-columns:1fr; } #case-sara .kpi + .kpi{ border-inline-start:0 !important; border-top:1px solid rgba(255,255,255,.18); } } #case-sara .kpi{ padding:38px 26px; text-align:center; } #case-sara .kpi + .kpi{ border-inline-start:1px solid rgba(255,255,255,.18); } #case-sara .kpi strong{ display:block; font-size:clamp(40px,7vw,70px); font-weight:700; line-height:1; letter-spacing:-.04em; color:var(--lime); direction:ltr; unicode-bidi:isolate; } #case-sara .kpi span{ display:block; margin-top:12px; font-size:14.5px; color:rgba(255,255,255,.78); } #case-sara .facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid rgba(255,255,255,.18); margin-top:0; } @media (max-width:760px){ #case-sara .facts{ grid-template-columns:1fr; } #case-sara .facts div + div{ border-inline-start:0 !important; border-top:1px solid rgba(255,255,255,.18); } } #case-sara .facts div{ padding:26px 22px; text-align:center; } #case-sara .facts div + div{ border-inline-start:1px solid rgba(255,255,255,.18); } #case-sara .facts b{ display:block; font-size:clamp(24px,3.6vw,36px); font-weight:700; line-height:1; letter-spacing:-.035em; color:#fff; direction:ltr; unicode-bidi:isolate; } #case-sara .facts span{ display:block; margin-top:10px; font-size:13.5px; color:rgba(255,255,255,.66); } /* --- تعليقات الجمهور --- */ #case-sara .cmts{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; } @media (max-width:760px){ #case-sara .cmts{ grid-template-columns:1fr; } } #case-sara .cmt{ position:relative; background:#fff; border:1px solid var(--line); border-radius:20px; padding:22px 24px; transition:transform var(--t-mid) var(--mm); } #case-sara .cmt:hover{ transform:translateY(-3px); } #case-sara .cmt p{ margin:0; font-size:16px; line-height:1.85; color:var(--ink); } #case-sara .cmt-m{ display:flex; align-items:center; gap:8px; margin-top:14px; font-family:var(--mono); font-size:10px; letter-spacing:.12em; color:var(--ink-mute); } #case-sara .cmt-m svg{ width:13px; height:13px; color:var(--coral); } #case-sara .cmt::before{ content:'”'; position:absolute; top:2px; inset-inline-start:18px; font-size:52px; line-height:1; color:rgba(155,72,63,.16); font-family:var(--mono); } /* ========================================================= 14. أزرار المنصّات ========================================================= */ #case-sara .plats{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:30px; } #case-sara .plats--hero{ margin-top:26px; } #case-sara .plat{ display:inline-flex; align-items:center; gap:9px; border:1px solid var(--line); border-radius:99px; padding:11px 19px; background:#fff; color:var(--ink); font-size:14px; font-weight:600; line-height:1; transition:transform var(--t-mid) var(--mm), background var(--t-tap) var(--mm-soft), color var(--t-tap) var(--mm-soft), border-color var(--t-tap) var(--mm-soft), box-shadow var(--t-mid) var(--mm); } #case-sara .plat svg{ width:17px; height:17px; flex:none; } #case-sara .plat span{ direction:ltr; unicode-bidi:isolate; } #case-sara .plat b{ font-family:var(--mono); font-size:11px; color:var(--ink-mute); font-weight:500; direction:ltr; unicode-bidi:isolate; } #case-sara .plat:hover{ background:var(--brand); color:#fff; border-color:transparent; transform:translateY(-3px); box-shadow:0 14px 30px rgba(155,72,63,.26); } #case-sara .plat:hover b{ color:rgba(255,255,255,.8); } #case-sara .plat--sm{ padding:9px 16px; font-size:13px; } #case-sara .plat--sm svg{ width:15px; height:15px; } #case-sara .plat--lg{ padding:14px 24px; font-size:15px; } #case-sara .plat--lg svg{ width:19px; height:19px; } @media (max-width:520px){ #case-sara .plat, #case-sara .plat--lg{ padding:11px 16px; font-size:13.5px; } #case-sara .plats{ gap:8px; } } #case-sara .listen{ padding-block:clamp(52px,6.5vw,84px); } /* ========================================================= 15. الإغلاق ========================================================= */ #case-sara .case-end{ text-align:center; padding:clamp(70px,9vw,120px) 0; } #case-sara .case-end .q{ font-size:clamp(21px,3.3vw,36px); font-weight:700; line-height:1.45; letter-spacing:-.025em; max-width:30ch; margin:0 auto; } #case-sara .case-end .b{ margin-top:26px; color:var(--ink-soft); font-size:16px; line-height:1.85; max-width:52ch; margin-inline:auto; } #case-sara .case-end .cta{ margin-top:36px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; } #case-sara .case-foot{ border-top:1px solid var(--line); padding:26px 0 40px; text-align:center; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--ink-mute); } /* ========================================================= 16. مكوّن الشريط اللانهائي (Infinite Marquee) حزام ناقل: الشاشة تطلع من طرف وترجع من التاني. ========================================================= */ #case-sara .mmc{ position:relative; width:100%; overflow:hidden; padding:clamp(30px,3.8vw,54px) 0; --mmc-w:420; --mmc-r:16px; --mmc-sh:23,23,23; background:var(--cream); } #case-sara .mmc-track{ position:relative; width:100%; } #case-sara .mmc-screen{ position:absolute; top:0; left:0; width:calc(var(--mmc-w) * 1px); aspect-ratio:9/16; border-radius:var(--mmc-r); overflow:hidden; background:#1b1b1b; text-decoration:none; color:inherit; box-shadow:0 1px 2px rgba(var(--mmc-sh),.10), 0 10px 28px rgba(var(--mmc-sh),.14); will-change:transform; backface-visibility:hidden; transition:box-shadow var(--t-mid) var(--mm-out); outline:none; } #case-sara .mmc-screen video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; background:#1b1b1b; } #case-sara .mmc-screen:hover{ box-shadow:0 2px 4px rgba(var(--mmc-sh),.12), 0 20px 48px rgba(var(--mmc-sh),.24); } #case-sara .mmc-screen:focus-visible{ box-shadow:0 0 0 3px var(--brand); } #case-sara .mmc-cap{ text-align:center; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; color:var(--ink-mute); padding-bottom:6px; } /* ========================================================= 17. احترام «قلّل الحركة» ========================================================= */ @media (prefers-reduced-motion:reduce){ #case-sara .rv{ opacity:1 !important; transform:none !important; } #case-sara .cs-hl{ background-size:100% .34em !important; } #case-sara .mmc-screen{ transition:none; } #case-sara .igcard{ transform:none !important; } } /* --- كرت د. سارة في صفحة أعمالنا --- */ .wk-media--sara{ background:linear-gradient(160deg,#F3E8DA 0%,#E7D9C6 100%); display:grid; place-items:center; } .wk-media--sara .rpat{ opacity:.30; z-index:1; } .wk-mark{ position:relative; z-index:2; width:min(78%,430px); transition:transform var(--t-big) var(--mm); } .wk-feat:hover .wk-mark{ transform:scale(1.04) rotate(-1deg); } /* آخر كرت لوحده بالشبكة، فياخد العرض كامل بدل ما يترك فجوة */ .wk-grid--1{ grid-template-columns:1fr !important; } .wk-soon-card--wide{ display:grid; grid-template-columns:230px 1fr; } .wk-soon-card--wide .wsc-panel{ height:100%; border-bottom:0; border-inline-end:1px solid rgba(23,23,23,.07); } .wk-soon-card--wide .wsc-body{ padding:26px 28px 28px; } @media (max-width:620px){ .wk-soon-card--wide{ grid-template-columns:1fr; } .wk-soon-card--wide .wsc-panel{ height:132px; border-inline-end:0; border-bottom:1px solid rgba(23,23,23,.07); } } /* ========================================================= 26. صفحة الحالة: Purple Cups نفس منطق باقي الحالات — إعادة ربط التوكنز جوّا #case-purple وبس. ما في ولا قاعدة عامة بهالكتلة كلها. ========================================================= */ #case-purple .mono{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; font-variant-numeric:tabular-nums; } #case-purple .num{ font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate; display:inline-block; } #case-purple .ltr{ direction:ltr; unicode-bidi:isolate; display:inline-block; } /* ========================================================= 3. توكنز Purple Cups البنفسجي هو القائد، والأصفر لهجة مش خلفية — نفس نسبة الاستعمال المنصوص عليها بدليل الهوية. ملاحظة: أصفر العلامة #FCB813 قريب جداً من أصفر مشمش #FDB913، بس هون هو **مرافق** مش قائد، فما بيتلخبط الصوتين. ========================================================= */ #case-purple{ /* إزاحة شريط الحالة من فوق. مستقلاً الشريط بأعلى الشاشة، ومدموجاً بينزل تحت نافبار الموقع — منغيّر هالتوكن وبس. */ --pc-bar-top: calc(14px + var(--header-h) + 9px); --brand: #723577; /* البنفسجي — من الفيكتور الرسمي */ --brand-deep: #56255A; --ink: #241E26; --ink-soft: #4A3F4E; --ink-mute: rgba(36,30,38,.56); --ink-faint: rgba(36,30,38,.26); --page: #F4F4F4; /* ورقي الهوية بالضبط */ --cream: #EFE9F0; /* بنفسجي مغسول */ --line: rgba(36,30,38,.13); --forest: #3B1D40; /* فواصل الأقسام الكبيرة */ --lime: #FCB813; /* الأصفر — أرقام وتشديد على الغامق */ --gold: #FCB813; --charcoal: #161616; /* أسود الأكياس */ background:var(--page); color:var(--ink); z-index:45; /* فوق د. سارة 44 */ } /* الغامق فحمي مش بنفسجي: الفواصل الكبيرة أصلاً بنفسجية، ولو البلوكات الغامقة كمان بنفسجية بتصير تلات كتل متتالية والبنفسجي بيوقف يزعق. والفحمي هو حرفياً لون الكيس، فبيرجع الزائر لأصل المنتج. */ #case-purple .cs--dark{ background:var(--charcoal); color:#fff; } #case-purple .cs--dark .cs-t{ color:#fff; } #case-purple .cs--dark .cs-k, #case-purple .cs--dark .cs-lead{ color:rgba(255,255,255,.68); } #case-purple .cs--dark .cs-hair{ background:rgba(255,255,255,.2); } #case-purple .cs--bleed{ overflow:hidden; } /* ========================================================= 4. قشرة الصفحة الداخلية ========================================================= */ #case-purple .case-bar{ position:fixed; top:var(--pc-bar-top); inset-inline-start:50%; transform:translateX(calc(50% * var(--mmx,1))); width:min(1328px, calc(100% - 28px)); height:46px; z-index:45; display:flex; align-items:center; justify-content:space-between; gap:14px; padding-inline:20px; border-radius:99px; overflow:hidden; background:rgba(255,253,255,.80); backdrop-filter:blur(8px) saturate(1.35); -webkit-backdrop-filter:blur(8px) saturate(1.35); border:1px solid rgba(255,255,255,.85); box-shadow:0 10px 30px rgba(36,30,38,.09); animation:stepIn .7s var(--mm) both .1s; } @keyframes stepIn{ 0%{opacity:0} 32%{opacity:.22} 62%{opacity:.55} 100%{opacity:1} } @media (max-width:700px){ #case-purple .case-bar{ height:42px; padding-inline:12px; } } #case-purple .case-back{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; border:0; background:transparent; cursor:pointer; padding:7px 13px; border-radius:99px; white-space:nowrap; flex:none; transition:background var(--t-tap) var(--mm-soft), gap var(--t-mid) var(--mm); } #case-purple .case-back:hover{ background:rgba(36,30,38,.07); gap:14px; } #case-purple .case-back svg{ width:15px; height:15px; } #case-purple .case-bar-mid{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--ink-mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #case-purple .case-bar-mid b{ color:var(--brand); font-weight:600; } #case-purple .case-prog{ position:absolute; inset-inline:0; bottom:-1px; height:2px; background:transparent; } #case-purple .case-prog i{ display:block; height:100%; width:0%; background:var(--brand); transition:width .12s linear; } @media (max-width:640px){ #case-purple .case-bar-mid{ display:none; } #case-purple #pcNum{ display:block; } } #case-purple .case-wrap{ position:relative; z-index:1; } #case-purple .cx{ width:100%; max-width:1120px; margin-inline:auto; padding-inline:22px; } /* ========================================================= 5. طبقة الباترن الخلفية — نسخة نقطية من شبكة الكولاج صفر بايت أصول: مربّعات الشبكة نفسها مرسومة كـ pattern. ========================================================= */ #case-purple .rpat{ position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; } #pcPatBg{ position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:.028; } /* ========================================================= 6. هيرو الحالة ========================================================= */ #case-purple .case-hero{ position:relative; min-height:clamp(560px,86svh,920px); display:grid; place-items:center; text-align:center; overflow:hidden; background:linear-gradient(178deg,#EBE2EC 0%,#F4F4F4 76%); padding:calc(var(--pc-bar-top) + 46px + 34px) 0 40px; } #case-purple .case-hero .rpat{ opacity:.06; } #case-purple .ch-in{ position:relative; z-index:2; } #case-purple .ch-eyebrow{ display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--ink-mute); margin-bottom:30px; } /* اللوغو بيتجسّد من نقاط — نفس تفتّت هيرو الرئيسية بالمقلوب */ #case-purple .ch-logo{ width:min(430px,66vw); margin:0 auto 20px; } #case-purple .ch-logo svg{ width:100%; height:auto; display:block; } #case-purple .ch-tag{ width:min(300px,48vw); margin:0 auto 26px; } #case-purple .ch-tag svg{ width:100%; height:auto; display:block; } #case-purple .dotmask{ -webkit-mask-image:radial-gradient(circle, #000 var(--dot,100%), transparent calc(var(--dot,100%) + 1%)); mask-image:radial-gradient(circle, #000 var(--dot,100%), transparent calc(var(--dot,100%) + 1%)); -webkit-mask-size:var(--cell,10px) var(--cell,10px); mask-size:var(--cell,10px) var(--cell,10px); -webkit-mask-repeat:repeat; mask-repeat:repeat; } #case-purple .ch-sub{ margin-top:6px; font-size:clamp(15px,2.1vw,21px); color:var(--ink-soft); line-height:1.75; max-width:46ch; margin-inline:auto; } /* ساعة القهوة — الوقت الحقيقي بخط رقمي. الاسم بيقول O'CLOCK فمنوريه ساعة. */ #case-purple .ch-clock{ display:inline-flex; align-items:center; gap:10px; margin-top:26px; font-family:var(--mono); font-size:12px; letter-spacing:.2em; color:var(--brand); background:rgba(114,53,119,.07); border:1px solid rgba(114,53,119,.18); border-radius:99px; padding:9px 18px; } #case-purple .ch-clock b{ font-weight:600; direction:ltr; unicode-bidi:isolate; font-variant-numeric:tabular-nums; } #case-purple .ch-clock i{ font-style:normal; color:var(--gold); } #case-purple .ch-meta{ margin:44px auto 0; display:flex; flex-wrap:wrap; justify-content:center; gap:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); max-width:920px; } #case-purple .ch-meta div{ flex:1 1 160px; padding:18px 14px; } #case-purple .ch-meta div + div{ border-inline-start:1px solid var(--line); } #case-purple .ch-meta k{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--ink-mute); margin-bottom:8px; } #case-purple .ch-meta v{ display:block; font-size:15px; font-weight:600; } @media (max-width:640px){ #case-purple .ch-meta div{ flex:1 1 50%; } #case-purple .ch-meta div:nth-child(odd){ border-inline-start:0; } #case-purple .ch-meta div:nth-child(n+3){ border-top:1px solid var(--line); } } #case-purple .ch-cue{ margin-top:32px; font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--ink-mute); animation:pcBob 2.2s var(--mm) infinite; } @keyframes pcBob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(6px) } } /* ========================================================= 7. لبنات مشتركة ========================================================= */ #case-purple .cs{ position:relative; padding:clamp(70px,9vw,120px) 0; } #case-purple .cs--tint{ background:var(--cream); } #case-purple .part{ position:relative; padding:clamp(64px,8vw,104px) 0; background:var(--forest); color:#fff; overflow:hidden; } #case-purple .part .rpat{ opacity:.10; } #case-purple .part-in{ position:relative; z-index:2; text-align:center; } /* التسمية عربية، فبخط العربي بلا letter-spacing — الـmono بيفكّ الحروف */ #case-purple .part-k{ display:inline-block; font-family:var(--font); font-size:13px; font-weight:600; letter-spacing:0; line-height:1; color:rgba(255,255,255,.78); border:1px solid rgba(255,255,255,.32); border-radius:99px; padding:9px 18px; margin-bottom:26px; } #case-purple .part-t{ font-size:clamp(30px,6vw,64px); font-weight:700; line-height:1.14; letter-spacing:-.032em; } #case-purple .part-s{ margin:20px auto 0; max-width:640px; font-size:clamp(15px,2vw,19px); line-height:1.8; color:rgba(255,255,255,.8); } /* --- ترويسة القسم --- ⚠ الهرمية مقلوبة عن قصد: التسمية (العميل، التشخيص، القاعدة…) هي العنوان الرئيسي، مش الجملة تحتها. فصارت التسمية أكبر عنصر بالترويسة وبلون البراند وفوق كل شي، والجملة صارت عنوان فرعي: أصغر، بسطر واحد دايماً، حتى ما تزاحم التسمية على انتباه العين. ⚠ وشلنا الكبسولة عن التسمية: بحجم 56px الكبسولة بتصير كتلة تقيلة بتاكل عرض السطر وبتحوّل العنوان لزرّ. النصّ الكبير بلون البراند أقوى وأنضف من كبسولة مكبّرة. ⚠ والتسمية العربية طلعت من خط الـmono: الـmono ما بيدعم العربي، والحروف كانت بتنفصل عن بعضها مع letter-spacing فتصير غير مقروءة. العربي بخط العربي، والأرقام اللاتينية بس هي اللي بتضل mono. */ #case-purple .cs-head{ margin-bottom:48px; } /* السطر الأول: العنوان الرئيسي، شعرة، رقم القسم */ #case-purple .cs-meta{ display:flex; align-items:center; gap:18px; } #case-purple .cs-tag{ font-family:var(--font); font-size:clamp(29px,5.2vw,56px); font-weight:700; line-height:1.12; letter-spacing:-.035em; color:var(--brand); background:none; border:0; border-radius:0; padding:0; flex:none; } #case-purple .cs-ix{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--ink-mute); direction:ltr; unicode-bidi:isolate; flex:none; } #case-purple .cs-hair{ flex:1; height:1px; background:var(--line); } /* العنوان الفرعي — سطر واحد دايماً. ⚠ nowrap مع overflow:hidden: لو طوّلت جملة بالمستقبل بتنقصّ بنقاط بدل ما تفلت برّا الكادر وتعمل سكرول أفقي للصفحة كلها. ⚠ وتحت 360px منسمح للسطر ينكسر: بهالعرض الجملة الطويلة لازمها خط أصغر من 14px حتى تقعد بسطر، وهاد ما بينقرا. سطرين مقروءين أحسن من سطر واحد مقصوص أو مجهري. */ #case-purple .cs-t{ margin-top:15px; font-size:clamp(14.5px,2.15vw,26px); font-weight:700; line-height:1.4; letter-spacing:-.02em; text-align:var(--mm-ta,right); color:var(--ink); max-width:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } @media (max-width:359px){ #case-purple .cs-t{ white-space:normal; overflow:visible; line-height:1.45; } } /* على الغامق التسمية بتنقلب فاتحة حتى تضل مقروءة */ #case-purple .cs--dark .cs-tag{ color:var(--gold); } #case-purple .cs--dark .cs-ix{ color:rgba(255,255,255,.55); } @media (max-width:620px){ #case-purple .cs-meta{ gap:12px; } } /* الهايلايت بينرسم من اليمين. ⚠ لونه أصفر مش بنفسجي: البنفسجي غامق، ولو حطّيناه شريط تحت نص غامق بيصير نص أسود على خلفية غامقة = ما بينقرا. وارتفاعه .26em لأن الحرف العربي بينزل تحت خط القاعدة (ي، ر، ن) فالشريط السميك بيقطعهن. */ #case-purple .cs-hl{ display:inline; -webkit-box-decoration-break:clone; box-decoration-break:clone; padding-inline:6px; background-image:linear-gradient(var(--gold),var(--gold)); background-repeat:no-repeat; background-position:right 0 bottom -.04em; background-size:0% .26em; transition:background-size var(--t-big) var(--mm) .2s; } #case-purple .cs.in .cs-hl{ background-size:100% .34em; } #case-purple .cs-lead{ margin-top:14px; max-width:62ch; color:var(--ink-soft); font-size:16px; line-height:1.9; } #case-purple .rv{ opacity:0; transform:translateY(26px); transition:opacity var(--t-big) var(--mm), transform var(--t-big) var(--mm); } #case-purple .cs.in .rv, #case-purple .rv.in{ opacity:1; transform:none; } #case-purple .cgrid{ display:grid; gap:20px; } #case-purple .cgrid--2{ grid-template-columns:repeat(2,1fr); } #case-purple .cgrid--3{ grid-template-columns:repeat(3,1fr); } #case-purple .cgrid--4{ grid-template-columns:repeat(4,1fr); } @media (max-width:900px){ #case-purple .cgrid--3, #case-purple .cgrid--4{ grid-template-columns:repeat(2,1fr); } } @media (max-width:620px){ #case-purple .cgrid--2, #case-purple .cgrid--3, #case-purple .cgrid--4{ grid-template-columns:1fr; } } #case-purple .ccard{ position:relative; background:#fff; border:1px solid var(--line); border-radius:22px; padding:26px 24px 28px; overflow:hidden; transition:box-shadow var(--t-mid) var(--mm), transform var(--t-mid) var(--mm); } #case-purple .ccard:hover{ box-shadow:0 20px 50px rgba(114,53,119,.13); transform:translateY(-3px); } #case-purple .ccard::before{ content:''; position:absolute; inset-inline:0; bottom:0; height:3px; background:var(--brand); transform:scaleX(0); transform-origin:var(--mm-org,right); transition:transform var(--t-mid) var(--mm); } #case-purple .ccard:hover::before{ transform:scaleX(1); } #case-purple .ccard .n{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--ink-mute); direction:ltr; unicode-bidi:isolate; } #case-purple .ccard h4{ margin:14px 0 10px; font-size:18px; font-weight:700; line-height:1.4; letter-spacing:-.01em; } #case-purple .ccard p{ margin:0; color:var(--ink-soft); font-size:14.8px; line-height:1.8; } #case-purple .ccard--bad::before{ background:#C4372C; } #case-purple .ccard--bad .n{ color:#C4372C; } #case-purple .btn-brand{ display:inline-block; background:var(--ink); color:#fff; border-radius:99px; padding:15px 34px; font-weight:600; font-size:15.5px; transition:transform var(--t-mid) var(--mm), background var(--t-tap) var(--mm-soft); } #case-purple .btn-brand:hover{ background:var(--brand); color:#fff; transform:translateY(-3px); } /* بلوك نص/صورة */ #case-purple .duo{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(22px,3.4vw,46px); align-items:center; } #case-purple .duo--tight{ grid-template-columns:.82fr 1fr; } @media (max-width:860px){ #case-purple .duo, #case-purple .duo--tight{ grid-template-columns:1fr; } } #case-purple .duo-media{ border-radius:24px; overflow:hidden; border:1px solid var(--line); background:#EFEAF0; } #case-purple .duo-media img{ width:100%; height:auto; display:block; } #case-purple .duo-body h4{ margin:0 0 14px; font-size:clamp(19px,2.5vw,24px); font-weight:700; letter-spacing:-.02em; } #case-purple .duo-body p{ margin:0 0 14px; color:var(--ink-soft); font-size:15.6px; line-height:1.95; } #case-purple .duo-body p:last-child{ margin-bottom:0; } #case-purple .tick{ list-style:none; margin:22px 0 0; padding:0; } #case-purple .tick li{ position:relative; padding-inline-start:22px; margin-bottom:13px; font-size:15.2px; line-height:1.85; color:var(--ink-soft); } #case-purple .tick li b{ color:var(--ink); } #case-purple .tick li::before{ content:''; position:absolute; inset-inline-start:0; top:.72em; width:10px; height:2px; background:var(--brand); } #case-purple .tick li:last-child{ margin-bottom:0; } #case-purple .pull{ margin-top:26px; padding:20px 24px; border-inline-start:3px solid var(--gold); background:rgba(252,184,19,.10); border-radius:0 16px 16px 0; font-size:17px; font-weight:600; line-height:1.7; color:var(--brand-deep); } #case-purple .note{ margin-top:22px; padding:16px 20px; border:1px dashed var(--line); border-radius:16px; font-size:14.4px; line-height:1.85; color:var(--ink-soft); background:rgba(252,184,19,.07); } #case-purple .note b{ color:var(--ink); } /* ========================================================= 8. قائمة المشكلات (تشخيص اللوغو القديم) ========================================================= */ #case-purple .issues{ display:grid; grid-template-columns:1.05fr 1fr; gap:38px; align-items:center; } @media (max-width:900px){ #case-purple .issues{ grid-template-columns:1fr; gap:26px; } } #case-purple .ilist{ display:flex; flex-direction:column; gap:2px; } #case-purple .ilist li{ display:grid; grid-template-columns:auto 1fr; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); } #case-purple .ilist li:last-child{ border-bottom:0; } #case-purple .ilist .num2{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:#C4372C; padding-top:4px; direction:ltr; unicode-bidi:isolate; } #case-purple .ilist b{ display:block; font-size:16.5px; font-weight:700; margin-bottom:6px; } #case-purple .ilist span{ color:var(--ink-soft); font-size:14.8px; line-height:1.8; } /* ========================================================= 9. قبل / بعد — لوحان متقابلان ⚠ ليش مش سحّابة: السحّابة بتشتغل لما يكون الطرفان بنفس الشكل والمقاس (متل حالة ريام). هون القديم بادج مربّع والجديد كلمة عريضة، فالسحب بيخلّي النصّين يتراكبوا بالنص وبتصير المقارنة تشويش بدل ما تكون حجّة. اللوحان المتقابلان بيقولوا نفس الشي بوضوح — وهاد بالضبط اللي عمله ديك الهوية نفسه. ========================================================= */ #case-purple .ba{ display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; border-radius:24px; overflow:hidden; border:1px solid var(--line); background:linear-gradient(180deg,#F7F4F8,#EFEAF0); } @media (max-width:760px){ #case-purple .ba{ grid-template-columns:1fr; } #case-purple .ba-rule{ width:auto !important; height:1px !important; } } #case-purple .ba-side{ position:relative; display:flex; flex-direction:column; align-items:center; gap:20px; padding:clamp(26px,4vw,48px) clamp(18px,3vw,34px); } #case-purple .ba-side--after{ background:rgba(114,53,119,.045); } #case-purple .ba-rule{ width:1px; background:var(--line); display:block; } #case-purple .ba-side .in{ flex:1; display:grid; place-items:center; width:100%; min-height:clamp(180px,22vw,250px); } /* الطرفان بيتساووا بالارتفاع مش بالعرض: المساواة بالعرض بتصغّر الجديد ظلماً، وبالارتفاع بتوري الحقيقة — نفس المساحة الرأسية، وشكلان مختلفان تماماً. */ #case-purple .ba-side .in > *{ height:auto; width:auto; max-height:clamp(150px,18vw,210px); max-width:88%; object-fit:contain; display:block; } #case-purple .ba-tag{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; background:rgba(255,255,255,.9); border:1px solid var(--line); border-radius:99px; padding:6px 15px; } #case-purple .ba-tag--a{ background:var(--brand); color:#fff; border-color:transparent; } #case-purple .ba-note{ font-size:13.6px; line-height:1.7; color:var(--ink-mute); text-align:center; max-width:34ch; } /* ========================================================= 10. لوحة الشعار + التنويعات ========================================================= */ #case-purple .pcmark{ position:relative; border-radius:24px; overflow:hidden; border:1px solid var(--line); background:#F7F3F8; display:grid; place-items:center; padding:clamp(30px,6vw,64px); min-height:280px; } #case-purple .pcmark .rpat{ opacity:.14; } #case-purple .pcmark .mk{ position:relative; z-index:2; width:min(620px,100%); } #case-purple .pcmark .mk svg{ width:100%; height:auto; display:block; } #case-purple .lvs{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:20px; } @media (max-width:700px){ #case-purple .lvs{ grid-template-columns:1fr; } } #case-purple .lv{ border-radius:20px; overflow:hidden; border:1px solid var(--line); } #case-purple .lv-box{ aspect-ratio:16/9; display:grid; place-items:center; padding:12%; } #case-purple .lv-box svg{ width:100%; height:auto; } #case-purple .lv-cap{ padding:14px 16px; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; color:var(--ink-mute); background:#fff; border-top:1px solid var(--line); } /* ========================================================= 11. الألوان ========================================================= */ #case-purple .sw{ position:relative; border-radius:20px; overflow:hidden; border:1px solid var(--line); background:#fff; } #case-purple .sw-chip{ height:140px; display:grid; place-items:center; position:relative; } #case-purple .sw-chip span{ font-size:42px; font-weight:700; line-height:1; letter-spacing:-.04em; } #case-purple .sw-meta{ padding:16px 16px 18px; } #case-purple .sw-meta b{ display:block; font-size:15px; font-weight:700; margin-bottom:8px; } #case-purple .sw-meta code{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--ink-mute); line-height:1.8; direction:ltr; unicode-bidi:isolate; text-align:var(--mm-ta,right); } #case-purple .sw-meta i{ display:block; font-style:normal; margin-top:8px; font-size:13.4px; line-height:1.7; color:var(--ink-soft); } #case-purple .sw-copy{ position:absolute; top:12px; inset-inline-end:12px; font-family:var(--mono); font-size:10px; letter-spacing:.1em; background:rgba(255,255,255,.92); border:0; border-radius:99px; padding:5px 11px; cursor:pointer; opacity:0; transition:opacity var(--t-tap) var(--mm-soft); } #case-purple .sw:hover .sw-copy{ opacity:1; } #case-purple .ratio{ display:flex; height:62px; border-radius:16px; overflow:hidden; border:1px solid var(--line); margin-top:26px; } #case-purple .ratio i{ position:relative; display:grid; place-items:center; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; font-style:normal; } /* ========================================================= 12. مكتبة الأيقونات ========================================================= */ #case-purple .icons{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; } @media (max-width:900px){ #case-purple .icons{ grid-template-columns:repeat(4,1fr); } } @media (max-width:520px){ #case-purple .icons{ grid-template-columns:repeat(3,1fr); } } #case-purple .ico{ aspect-ratio:1; border-radius:18px; border:1px solid var(--line); background:#fff; display:grid; place-items:center; padding:16%; transition:transform var(--t-mid) var(--mm), box-shadow var(--t-mid) var(--mm); } #case-purple .ico:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(114,53,119,.14); } /* الأيقونات بنسب مختلفة (النخلة طويلة والحبوب مربّعة). width:100% لحاله بيطلّع الطويلة برّا المربّع. الحل: نعطيها الصندوق كامل ونخلّي preserveAspectRatio (meet افتراضياً) يحشرها جوّاته. */ #case-purple .ico svg{ width:100%; height:100%; display:block; } /* ========================================================= 13. ★ الباترن — الشبكة والمبدّل القرار: الباترن مرسوم فيكتور بمتغيّرات لون، مش صورة. فالمبدّل بيغيّر خمس قيم CSS وبس — صفر تحميل، صفر وميض. ========================================================= */ #case-purple .patbox{ position:relative; border-radius:24px; overflow:hidden; border:1px solid var(--line); background:var(--charcoal); } #case-purple .patbox svg.pat{ width:100%; height:auto; display:block; } /* الشبكة الشفافة فوق الباترن — بتوري إنه ٦×٣ بلا ما تعلّم عليه */ #case-purple .patgrid{ position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity var(--t-mid) var(--mm); background: repeating-linear-gradient(to right, rgba(255,255,255,.55) 0 1px, transparent 1px calc(100%/6)), repeating-linear-gradient(to bottom, rgba(255,255,255,.55) 0 1px, transparent 1px calc(100%/3)); } #case-purple .patbox.grid-on .patgrid{ opacity:1; } /* سطر القراءة تحت النمط — بيسمّي اللي عم يتغيّر */ #case-purple .patread{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin-top:18px; font-size:13px; color:var(--ink-mute); } #case-purple .patread .sws{ display:flex; gap:6px; } #case-purple .patread .sws i{ width:20px; height:20px; border-radius:6px; display:block; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); transition:background var(--t-mid) var(--mm); } /* ========================================================= 14. المبدّل: قائمة الأصناف يميناً، والعبوة كاملة يساراً ⚠ القرار: العبوة كاملة مش الباترن لحاله. النمط بيبان جوّا العبوة بمكانه الحقيقي، فالزائر بيشوف النتيجة مش العيّنة. والقائمة عاليمين لأنها هي الأداة، والعبوة عاليسار لأنها النتيجة — بالعربي العين بتقرا من اليمين، فبتمسك الأداة أول وبتشوف أثرها بعدين. ========================================================= */ #case-purple .swap{ display:grid; grid-template-columns:minmax(250px,.6fr) 1fr; gap:clamp(20px,3vw,40px); align-items:start; } @media (max-width:900px){ #case-purple .swap{ grid-template-columns:1fr; } } /* --- القائمة --- ⚠ ولا سكرول داخلي: الثمانطعش صنف لازم يبانوا كلهن بكادر واحد، لأن هدف القسم يوريك مدى النظام. قائمة بتخبّي نصّها بتقول العكس. اللي خلّاهن يقعدوا: صفّ من سطر واحد (الاسم والبلد جنب بعض) بدل سطرين، وحشوة أقصر. لا max-height ولا overflow ولا قناع تلاشٍ. */ #case-purple .swap-list{ display:flex; flex-direction:column; gap:3px; } @media (max-width:900px){ #case-purple .swap-list{ flex-direction:row; flex-wrap:wrap; gap:8px; } } #case-purple .sku{ display:flex; align-items:center; gap:9px; width:100%; cursor:pointer; text-align:start; font-family:var(--font); background:#fff; color:var(--ink); border:1px solid var(--line); border-radius:10px; padding:5px 11px; transition:background var(--t-tap) var(--mm-soft), border-color var(--t-tap) var(--mm-soft), transform var(--t-mid) var(--mm), box-shadow var(--t-mid) var(--mm); } @media (max-width:900px){ #case-purple .sku{ width:auto; border-radius:99px; padding:6px 12px; } } #case-purple .sku em{ width:17px; height:17px; border-radius:50%; flex:none; font-style:normal; box-shadow:inset 0 0 0 1px rgba(0,0,0,.16); background:linear-gradient(var(--f1) 0 33.33%, var(--f2) 33.33% 66.66%, var(--f3) 66.66% 100%); } #case-purple .sku-t{ flex:1; min-width:0; display:flex; align-items:baseline; gap:6px; } #case-purple .sku-t b{ font-size:13px; font-weight:700; line-height:1.45; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #case-purple .sku-t span{ font-size:11.5px; line-height:1.45; color:var(--ink-mute); white-space:nowrap; flex:none; } #case-purple .sku-t span::before{ content:'·'; margin-inline-end:6px; opacity:.55; } #case-purple .sku:hover{ border-color:rgba(114,53,119,.34); transform:translateX(-3px); box-shadow:0 8px 20px rgba(114,53,119,.10); } #case-purple .sku.on{ background:var(--brand); border-color:transparent; color:#fff; } #case-purple .sku.on .sku-t span{ color:rgba(255,255,255,.72); } #case-purple .sku.on em{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.55); } @media (max-width:900px){ #case-purple .sku:hover{ transform:translateY(-2px); } } /* --- العبوة --- */ #case-purple .swap-bag{ margin:0; position:sticky; top:calc(var(--pc-bar-top) + 46px + 16px); } @media (max-width:900px){ #case-purple .swap-bag{ position:static; } } #case-purple .swap-frame{ border-radius:22px; overflow:hidden; background:#F1F1F1; display:grid; place-items:center; padding:clamp(14px,2.4vw,30px); min-height:clamp(340px,44vw,600px); } #case-purple .swap-frame img{ width:auto; max-width:100%; max-height:clamp(300px,40vw,560px); height:auto; display:block; transition:opacity .34s var(--mm-out), transform .34s var(--mm-out); } #case-purple .swap-frame img.fade{ opacity:0; transform:scale(.97); } #case-purple .swap-cap{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 16px; padding:16px 4px 0; } #case-purple .swap-cap b{ font-size:19px; font-weight:700; letter-spacing:-.01em; } #case-purple .swap-cap > span{ font-size:14px; color:var(--ink-mute); } #case-purple .swap-sws{ display:flex; gap:5px; margin-inline-start:auto; } #case-purple .swap-sws i{ width:22px; height:22px; border-radius:7px; display:block; box-shadow:inset 0 0 0 1px rgba(0,0,0,.14); transition:background var(--t-mid) var(--mm); } @media (max-width:520px){ #case-purple .swap-sws{ margin-inline-start:0; } } /* ========================================================= 15. صفّ حقائق (بلا ادعاء أداء — وصف شغل وبس) ========================================================= */ #case-purple .facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid rgba(255,255,255,.18); border-bottom:1px solid rgba(255,255,255,.18); } @media (max-width:760px){ #case-purple .facts{ grid-template-columns:1fr; } #case-purple .facts div + div{ border-inline-start:0 !important; border-top:1px solid rgba(255,255,255,.18); } } #case-purple .facts div{ padding:34px 22px; text-align:center; } #case-purple .facts div + div{ border-inline-start:1px solid rgba(255,255,255,.18); } #case-purple .facts b{ display:block; font-size:clamp(38px,6.4vw,66px); font-weight:700; line-height:1; letter-spacing:-.04em; color:var(--lime); direction:ltr; unicode-bidi:isolate; } #case-purple .facts span{ display:block; margin-top:12px; font-size:14.5px; color:rgba(255,255,255,.78); } /* ========================================================= 16. التطبيقات + الحملات ========================================================= */ #case-purple .apps{ display:grid; grid-template-columns:1.15fr 1fr; gap:18px; } @media (max-width:860px){ #case-purple .apps{ grid-template-columns:1fr; } } #case-purple .shot{ margin:0; border-radius:22px; overflow:hidden; border:1px solid var(--line); background:#fff; } #case-purple .shot img{ width:100%; height:auto; display:block; } #case-purple .shot--tall{ grid-row:span 2; } @media (max-width:860px){ #case-purple .shot--tall{ grid-row:auto; } } /* منشور رمضان طولي والبانرات عريضة. بشبكة عمودين متساويين بيصير صفّ واحد بارتفاع الطولي، والعريض بيترك فراغ تحته. الحل: الطولي بياخد عمود ضيّق ويمتدّ صفّين، والعريضان بينرصّوا جنبه — فما بيضل ولا فراغ ميت. */ #case-purple .camps{ display:grid; grid-template-columns:.82fr 1.18fr; gap:18px; align-items:start; } #case-purple .camp--tall{ grid-row:span 2; } @media (max-width:860px){ #case-purple .camps{ grid-template-columns:1fr; } #case-purple .camp--tall{ grid-row:auto; } } #case-purple .camp{ margin:0; border-radius:22px; overflow:hidden; border:1px solid var(--line); background:#fff; transition:transform var(--t-mid) var(--mm), box-shadow var(--t-mid) var(--mm); } #case-purple .camp:hover{ transform:translateY(-4px); box-shadow:0 22px 48px rgba(114,53,119,.16); } #case-purple .camp img{ width:100%; height:auto; display:block; } #case-purple .camp figcaption{ padding:14px 18px 16px; font-size:14.4px; line-height:1.75; color:var(--ink-soft); border-top:1px solid var(--line); } #case-purple .camp figcaption b{ display:block; color:var(--ink); font-size:15.5px; margin-bottom:4px; } #case-purple .camp--wide{ grid-column:1/-1; } /* شارات المنصّات والتجارة */ #case-purple .chips{ display:flex; flex-wrap:wrap; gap:9px; margin-top:26px; } #case-purple .chip{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:99px; padding:9px 16px; background:#fff; font-size:13px; font-weight:600; color:var(--ink-soft); } #case-purple .chip k{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--ink-mute); direction:ltr; unicode-bidi:isolate; } /* ========================================================= 17. الإغلاق ========================================================= */ #case-purple .case-end{ text-align:center; padding:clamp(70px,9vw,120px) 0; } #case-purple .case-end .q{ font-size:clamp(21px,3.3vw,36px); font-weight:700; line-height:1.45; letter-spacing:-.025em; max-width:30ch; margin:0 auto; } #case-purple .case-end .b{ margin-top:26px; color:var(--ink-soft); font-size:16px; line-height:1.85; max-width:52ch; margin-inline:auto; } #case-purple .case-end .cta{ margin-top:36px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; } #case-purple .case-foot{ border-top:1px solid var(--line); padding:26px 0 40px; text-align:center; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--ink-mute); } /* ========================================================= 18. مكوّن الشريط اللانهائي (Infinite Marquee) ========================================================= */ #case-purple .mmc{ position:relative; width:100%; overflow:hidden; padding:clamp(30px,3.8vw,54px) 0; --mmc-w:420; --mmc-r:16px; --mmc-sh:114,53,119; background:var(--cream); } #case-purple .mmc-track{ position:relative; width:100%; } #case-purple .mmc-screen{ position:absolute; top:0; left:0; width:calc(var(--mmc-w) * 1px); aspect-ratio:9/16; border-radius:var(--mmc-r); overflow:hidden; background:#1b1b1b; text-decoration:none; color:inherit; box-shadow:0 1px 2px rgba(var(--mmc-sh),.10), 0 10px 28px rgba(var(--mmc-sh),.16); will-change:transform; backface-visibility:hidden; transition:box-shadow var(--t-mid) var(--mm-out); outline:none; } #case-purple .mmc-screen video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; background:#1b1b1b; } #case-purple .mmc-screen:hover{ box-shadow:0 2px 4px rgba(var(--mmc-sh),.12), 0 20px 48px rgba(var(--mmc-sh),.26); } #case-purple .mmc-screen:focus-visible{ box-shadow:0 0 0 3px var(--brand); } /* ========================================================= 19. احترام «قلّل الحركة» ========================================================= */ @media (prefers-reduced-motion:reduce){ *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } #case-purple .rv{ opacity:1 !important; transform:none !important; } #case-purple .cs-hl{ background-size:100% .34em !important; } #case-purple .mmc-screen{ transition:none; } #case-purple .ch-cue{ animation:none; } #case-purple .ch-logo, #case-purple .ch-tag{ -webkit-mask-image:none !important; mask-image:none !important; } } /* ========================================================= ⚠ كتلة الوضع المستقل — تنشال كاملة وقت الدمج بالموقع بالموقع الكامل .view طبقة مثبّتة إلها سكرول مستقل، والنافبار الأساسي فوقها. هون الصفحة لحالها فبتصير تدفّق عادي. ========================================================= */ #case-purple{ min-height:100vh; } /* نهاية كتلة الوضع المستقل ⚠ */ /* كرت بربل كابس بصفحة الأعمال */ .wk-media--sharq{ background:linear-gradient(160deg,#F0DFC6 0%,#E2C9A7 100%); display:grid; place-items:center; } .wk-media--sharq .rpat{ opacity:.24; z-index:1; } .wk-media--sharq .wk-mark{ width:min(74%,380px); color:#7A2C39; } .wk-media--purple{ background:linear-gradient(160deg,#EFE9F0 0%,#DFD2E1 100%); display:grid; place-items:center; } .wk-media--purple .rpat{ opacity:.26; z-index:1; } /* ========================================================= 27. أرز ريام — ترويسة القسم وموك-أبس السوشال ميديا ========================================================= */ /* --- ترويسة القسم --- ⚠ الهرمية مقلوبة عن قصد: التسمية (التشخيص، المعالجة، الألوان…) هي العنوان الرئيسي، مش الجملة تحتها. قبل هيك كانت التسمية شريط مونو صغير عاليسار، فالعين بتبلّش من فوق وما بتلاقي مدخل للقسم أصلاً. ⚠ ولونها brand-deep مش brand: أخضر ريام الفاتح #88BE40 بحجم 54px على خلفية فاتحة بيبهت وما بينقرا. الغامق #276242 هو نفسه أخضر الفواصل الكبيرة بالصفحة، فالصوت بيضل واحد. */ #case-riam .cs-top{ gap:18px; margin-bottom:15px; } #case-riam .cs-lbl{ font-family:var(--font); font-size:clamp(28px,5.1vw,54px); font-weight:700; line-height:1.12; letter-spacing:-.035em; color:var(--brand-deep); flex:none; } #case-riam .cs--dark .cs-lbl{ color:var(--lime); } /* العنوان الفرعي — سطر واحد دايماً حتى ما يزاحم التسمية. وتحت 360px منسمح ينكسر: أصغر من 15px ما بينقرا. */ #case-riam .cs-t{ font-size:clamp(15px,2.15vw,26px); line-height:1.4; letter-spacing:-.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #case-riam .cs-lead{ margin-top:14px; } @media (max-width:359px){ #case-riam .cs-t{ white-space:normal; overflow:visible; } } /* --- عنوان صغير جوّا القسم --- */ #case-riam .sm-k{ display:flex; align-items:center; gap:14px; margin:0 0 22px; } #case-riam .sm-k b{ font-size:16px; font-weight:700; flex:none; } #case-riam .sm-k span{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--ink-mute); flex:none; } #case-riam .sm-k .hint-tap{ display:none; } @media (hover:none){ #case-riam .sm-k .hint-hover{ display:none; } #case-riam .sm-k .hint-tap{ display:inline; } } /* --- كومة الكاروسيل --- ⚠ الحساب كلّه بمتغيّر واحد: --cwf عرض الشريحة كنسبة من الكادر. موضع الانفتاح متحطّ بـright، والرجوع للكومة بـtransform لحاله — هيك الحركة بتصير على الـcompositor بلا إعادة تخطيط لكل إطار. والإزاحة 78% من عرض الشريحة لأن هاي هي نفسها خطوة الانفتاح (بحكم أن --cwf محسوبة على أساس تراكب 0.78)، فبترجع الشرائح فوق بعض بالضبط مهما كان عددها. */ #case-riam .sm-decks{ display:flex; flex-direction:column; gap:clamp(30px,4vw,54px); } #case-riam .deck{ cursor:pointer; outline:none; } #case-riam .deck-top{ display:flex; align-items:center; gap:12px; margin-bottom:14px; } #case-riam .deck-badge{ width:19px; height:19px; color:var(--brand-deep); flex:none; } #case-riam .deck-top b{ font-size:16.5px; font-weight:700; flex:none; } #case-riam .deck-s{ font-size:13.5px; color:var(--ink-mute); flex:none; } #case-riam .deck-n{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--brand-deep); flex:none; } @media (max-width:700px){ #case-riam .deck-s{ display:none; } } #case-riam .deck{ /* --ov: كم بتتراكب الشرائح وقت الانفتاح (0 = بلا تراكب). منها بينحسب عرض الشريحة، وموضعها، وارتفاع الكادر — رقم واحد بيحكم الكومة كلها، فالموبايل بس بيغيّره وبيمشي الحال. */ --ov:.78; --cwf:calc(1 / (1 + var(--ov) * (var(--n) - 1))); } #case-riam .deck-cards{ position:relative; width:100%; aspect-ratio:calc(var(--ar) / var(--cwf) / 1.24); /* 1.24 = فسحة التكبير وقت الراحة */ } #case-riam .deck-c{ position:absolute; top:50%; width:calc(var(--cwf) * 100%); height:auto; right:calc(var(--i) * (100% - var(--cwf) * 100%) / (var(--n) - 1)); z-index:calc(20 - var(--i)); border-radius:12px; background:#fff; box-shadow:0 2px 6px rgba(39,98,66,.10), 0 14px 34px rgba(39,98,66,.16); transform:translate(calc((var(--i) - (var(--n) - 1) / 2) * (var(--ov) * 100% - 14px)), -50%) rotate(calc((var(--i) - (var(--n) - 1) / 2) * 1.7deg)) scale(1.2); transition:transform .6s var(--mm), box-shadow .5s var(--mm); } /* عالموبايل الكادر ضيّق: بتراكب .78 بتصير الشريحة 84px وما بتبيّن. منزّل التراكب فبتكبر الشريحة وبتضل الكومة مقروءة. */ @media (max-width:640px){ #case-riam .deck{ --ov:.42; } } #case-riam .deck:hover .deck-c, #case-riam .deck:focus-visible .deck-c, #case-riam .deck.open .deck-c{ transform:translate(0,-50%); box-shadow:0 2px 5px rgba(39,98,66,.09), 0 10px 24px rgba(39,98,66,.13); } #case-riam .deck:focus-visible .deck-cards{ outline:2px solid var(--brand-deep); outline-offset:10px; border-radius:14px; } /* --- جدار المنشورات المفردة --- أعمدة مش شبكة: المنشورات فيها مربّع وفيها 4:5، والشبكة كانت بتقصّهن أو بتترك فراغ تحت القصار. الأعمدة بتاخد كل واحد بطوله. */ #case-riam .sm-wall{ columns:4; column-gap:16px; } @media (max-width:980px){ #case-riam .sm-wall{ columns:3; } } @media (max-width:640px){ #case-riam .sm-wall{ columns:2; column-gap:12px; } } #case-riam .sm-post{ break-inside:avoid; margin:0 0 16px; border-radius:14px; overflow:hidden; background:#fff; border:1px solid var(--line); transition:transform var(--t-mid) var(--mm), box-shadow var(--t-mid) var(--mm); } #case-riam .sm-post:hover{ transform:translateY(-4px); box-shadow:0 16px 36px rgba(39,98,66,.15); } #case-riam .sm-post img{ width:100%; height:auto; display:block; } @media (prefers-reduced-motion:reduce){ #case-riam .deck-c{ transition:none; } #case-riam .sm-post{ transition:none; } } /* ========================================================= 29. الفوتر — «أول الغيث قطرة» مُعاد بناؤه بلغة الموقع: صفر أصول، الغيوم والشجر والقطرة كلها SVG مرسومة بالكود. الحركة مربوطة بالسكرول متل باقي الموقع، مش @keyframes بتدور لحالها. ========================================================= */ .foot{ position:relative; overflow:hidden; isolation:isolate; background:linear-gradient(178deg, var(--brand) 0%, var(--brand-deep) 100%); color:var(--ink); padding:clamp(90px,13vw,190px) 0 0; } /* حبيبات الورق — نقاط CSS مكرّرة، نفس أسلوب .wsc-panel بالموقع. ⚠ جرّبنا feTurbulence وانرفض لسببين: عنصر SVG بلا width/height هو عنصر مُستبدَل بمقاسه الجوهري ٣٠٠×١٥٠، فالحبيبات بانت مربّع بحافّة حادّة بنص الفوتر (نفس فخّ .rpat المكتوب فوق)؛ وحتى بعد التصليح، فلتر تشويش على ١٥٠٠×٨٥٠ كلفته عالية بكل إطار سكرول. */ .foot-grain{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:.5; mix-blend-mode:multiply; background: radial-gradient(circle, rgba(120,80,0,.16) .9px, transparent 1px) 0 0/7px 7px, radial-gradient(circle, rgba(120,80,0,.10) .9px, transparent 1px) 3px 4px/11px 11px; } .foot-sky{ position:absolute; inset-inline:0; top:0; height:min(300px,30vw); z-index:1; pointer-events:none; } .foot-cloud{ position:absolute; color:#F7E2B1; opacity:.6; /* تمويه خفيف: الحافة الحادّة بتخلّي الغيمة تبان قصاصة ورق. ٤ عناصر بس وبتتحرّك بالسكرول — الكلفة مقبولة. */ filter:blur(3px); will-change:transform; } .foot-cloud svg{ display:block; width:100%; height:auto; } /* بتتدلّى من الحافة العليا: قسم منها مقصوص برّا الكادر */ .foot-cloud--1{ inset-inline-start:6%; top:-42px; width:min(230px,23vw); } .foot-cloud--2{ inset-inline-start:33%; top:-16px; width:min(170px,17vw); opacity:.44; } .foot-cloud--3{ inset-inline-end:26%; top:-52px; width:min(210px,21vw); } .foot-cloud--4{ inset-inline-end:3%; top:-10px; width:min(145px,15vw); opacity:.4; } /* القطرة — بتنزل من الغيمة الوسطانية لما يوصلها الزائر */ .foot-drop{ position:absolute; z-index:2; inset-inline-start:36%; top:min(112px,12vw); width:13px; height:19px; margin-inline-start:-6px; background:#F7E2B1; opacity:0; border-radius:50% 50% 50% 50% / 62% 62% 38% 38%; clip-path:path('M6.5 0 C 10 7, 13 11, 13 13.5 A 6.5 6.5 0 1 1 0 13.5 C 0 11, 3 7, 6.5 0 Z'); will-change:transform, opacity; } /* شجر عالطرفين — بيطلع من تحت مع السكرول */ .foot-tree{ position:absolute; bottom:0; z-index:1; color:#E9A20C; opacity:.5; will-change:transform; } .foot-tree svg{ display:block; width:100%; height:auto; } .foot-tree--r{ inset-inline-end:-2%; width:min(300px,26vw); } .foot-tree--l{ inset-inline-start:-4%; width:min(360px,30vw); opacity:.38; } @media (max-width:760px){ .foot-tree{ display:none; } } .foot-in{ position:relative; z-index:3; text-align:center; } .foot-l1, .foot-l2{ font-size:clamp(30px,6.2vw,60px); font-weight:700; line-height:1.24; letter-spacing:-.02em; color:var(--ink-soft); margin:0; } /* الكشيدة بـ«الغــيث» بتتمدّد مع السكرول. ⚠ ممنوع inline-block ولا width: الصندوق بيكسر تشكيل العربي فبتنفصل «الغ» عن المطّة وبتصير خطّ سايب. الطريقة الصحيحة: نغيّر **عدد** أحرف التطويل (ـ) بالجافاسكربت — التشكيل بيضل سليم. */ .kash{ font-kerning:none; } .foot-l2{ margin-top:.12em; } /* الهايلايت الأبيض بينرسم من اليمين — نفس موتيف .pt-main بس أبيض */ .foot-hl{ display:inline; -webkit-box-decoration-break:clone; box-decoration-break:clone; padding-inline:8px; background-image:linear-gradient(rgba(255,255,255,.72),rgba(255,255,255,.72)); background-repeat:no-repeat; background-position:right 0 bottom .06em; background-size:0% .42em; transition:background-size var(--t-big) var(--mm) .15s; } .foot.lit .foot-hl{ background-size:100% .42em; } /* بالإنكليزي «Mesh-Mosh» بتنكسر عند الشرطة فبيصير صندوقين تظليل */ [dir="ltr"] .foot-hl{ white-space:nowrap; } .foot-grid{ margin-top:clamp(60px,8vw,110px); display:grid; grid-template-columns:auto 1fr; gap:clamp(30px,5vw,70px); align-items:start; text-align:start; border-top:1px solid rgba(23,23,23,.14); padding-top:clamp(34px,4vw,52px); } @media (max-width:820px){ .foot-grid{ grid-template-columns:1fr; gap:36px; } } .foot-mark{ font-size:26px; font-weight:700; letter-spacing:-.02em; } .foot-mark small{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.22em; color:rgba(23,23,23,.55); margin-top:6px; } .foot-soc{ margin-top:20px; display:flex; flex-wrap:wrap; gap:9px; max-width:150px; } .foot-soc a{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:rgba(23,23,23,.9); color:var(--brand); transition:transform var(--t-mid) var(--mm), background var(--t-tap) var(--mm-soft); } .foot-soc a:hover{ transform:translateY(-3px); background:#fff; color:var(--ink); } .foot-soc svg{ width:15px; height:15px; } .foot-nav{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; } @media (max-width:620px){ .foot-nav{ grid-template-columns:1fr 1fr; gap:22px; } } .foot-nav h4{ margin:0 0 14px; font-size:12px; font-weight:700; letter-spacing:.02em; color:rgba(23,23,23,.6); } .foot-nav a{ display:block; padding:7px 0; font-size:15px; font-weight:500; position:relative; width:fit-content; } .foot-nav a::after{ content:''; position:absolute; inset-inline:0; bottom:3px; height:1.5px; background:var(--ink); transform:scaleX(0); transform-origin:var(--mm-org,right); transition:transform var(--t-mid) var(--mm); } .foot-nav a:hover::after{ transform:scaleX(1); } .foot-bar{ margin-top:clamp(34px,4vw,54px); padding:20px 0 calc(20px + 42px); border-top:1px solid rgba(23,23,23,.14); display:flex; flex-wrap:wrap; gap:10px 22px; justify-content:space-between; font-size:12.5px; color:rgba(23,23,23,.62); } /* أثاث الرئيسية (شبكة الصلبان، الشريط السفلي، السكرولبار) ما إله معنى فوق حقل أصفر مشبع — الشبكة بـmix-blend-difference بتعمل خطوط زرقا واضحة عليه. منهدّيهن لما يوصل الفوتر، متل ما بيصير بالصفحات. */ /* ⚠ !important مقصود: #status و#sbar عليهن animation فيه fill-mode:both، وقيم الأنيميشن بتغلب أي إعلان عادي بالكاسكيد. بالصفحات الداخلية ما احتاجوا هالشي لأنّ طبقة .view (z-40) بتغطّيهن أصلاً — أمّا الفوتر فبتدفّق الصفحة وتحت الاتنين (z-30). */ body.foot-near #gridfx{ opacity:.035 !important; } body.foot-near #status, body.foot-near #sbar{ opacity:0 !important; pointer-events:none; } @media (prefers-reduced-motion:reduce){ .foot-cloud, .foot-tree, .foot-drop{ transform:none !important; } .foot-drop{ opacity:0 !important; } } /* ========================================================= 28. صفحة الحالة: مركز الشرق للعطارة ========================================================= */ /* ========================================================= الجزء الثاني — صفحة مركز الشرق للعطارة نفس منطق باقي الحالات: منعيد ربط التوكنز جوّا #case-sharq وبس، فكل المكوّنات المشتركة (.cs .ccard .cgrid .sw .case-end .mmc) بتقلب لهوية العطارة بلا ولا قاعدة CSS مكرّرة. الألوان مسحوبة من الأصول نفسها مش مخترعة: #7A2C39 خلفية اللوغو الرسمي #460B0A خلفية كل ستوري (المتوسط الفعلي للـ12 ستوري) #E6C499 ورق التذكرة المسنّنة #E8E1A3 أرضية الأيقونات #29292E خلفية الكوفر ========================================================= */ #case-sharq{ --brand: #7A2C39; /* نبيذي الشعار */ --brand-deep: #5A1622; --ink: #26140F; /* حبر بنّي غامق */ --ink-soft: #4A362C; --ink-mute: rgba(38,20,15,.56); --ink-faint: rgba(38,20,15,.26); --page: #FAF5EC; /* ورق فاتح */ --cream: #F3E7D4; /* ورق العطار — أقسام الـtint */ --line: rgba(122,44,57,.16); --oxblood: #460B0A; /* عنّابي الدكّان */ --parch: #E6C499; /* ورق التذكرة */ --khaki: #E8E1A3; /* كريمي الأيقونات */ --charcoal: #1E120F; /* الغامق — بنّي شبه أسود */ z-index:46; /* فوق بربل كابس 45 */ min-height:100vh; } #case-sharq .mmc{ --mmc-sh:70,11,10; } /* ظلّ الشرائط عنّابي */ /* طبقة الباترن الخلفية — نفس قواعد #casePat المشتركة بمعرّف خاص حتى ما يتصادم مع طبقة ريام لمّا تنخيّط الصفحتين بملف واحد. */ #sqPat{ position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:.05; } /* الفاصل الكبير نبيذي، والبلوك الغامق بنّي شبه أسود. ⚠ عن قصد مش عنّابي: المنشورات نفسها خلفيتها عنّابية، فلو البلوك الغامق عنّابي كمان بتذوب حدود الصور فيه وبتضيع الكروت. */ #case-sharq .part{ background:var(--brand); } #case-sharq .cs--dark{ background:var(--charcoal); color:#fff; } #case-sharq .cs--dark .cs-lead{ color:rgba(255,255,255,.72); } #case-sharq .cs--dark .cs-hair{ background:rgba(255,255,255,.2); } /* التسمية عربية فبخط العربي بلا letter-spacing — الـmono بيفكّ الحروف. والأرقام اللاتينية بس هي اللي بتضل mono. نفس قرار بربل كابس. */ #case-sharq .part-k{ display:inline-block; font-family:var(--font); font-size:13px; font-weight:600; letter-spacing:0; line-height:1; color:rgba(255,255,255,.8); border:1px solid rgba(255,255,255,.32); border-radius:99px; padding:9px 18px; margin-bottom:26px; } /* --- ترويسة البلوك: الهرمية مقلوبة عن قصد --- التسمية (المكان، القرار، النظام…) هي العنوان الرئيسي مش الجملة تحتها. نفس اللي انعمل ببربل كابس، ولنفس السبب: التسمية هي اللي بتخلّي الزائر يعرف وين هو من أول نظرة. */ #case-sharq .cs-head{ margin-bottom:48px; } #case-sharq .cs-meta{ display:flex; align-items:center; gap:18px; } #case-sharq .cs-tag{ font-family:var(--font); font-size:clamp(29px,5.2vw,56px); font-weight:700; line-height:1.12; letter-spacing:-.035em; color:var(--brand); flex:none; } #case-sharq .cs-ix{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--ink-mute); direction:ltr; unicode-bidi:isolate; flex:none; } #case-sharq .cs-hair{ flex:1; height:1px; background:var(--line); } #case-sharq .cs--dark .cs-tag{ color:var(--parch); } #case-sharq .cs--dark .cs-ix{ color:rgba(255,255,255,.55); } /* ⚠ فخّ انمسك بالفحص: الـ.cs-t عليها overflow:hidden (لازمة للـellipsis). والـ.cs-hl صندوقها السطري أطول من سطر الأب (خطّ العربي بيعمل صندوق أعلى)، فشريط الهايلايت اللي موضعه bottom بينزل تحت حدّ الأب وبينقصّ = الهايلايت بيختفي كلياً. الحلّ حشوة سفلية على .cs-t: بتوسّع صندوق القصّ فبيقعد الشريط جوّاه. */ #case-sharq .cs-t{ margin-top:15px; padding-bottom:.5em; font-size:clamp(14.5px,2.15vw,26px); font-weight:700; line-height:1.4; letter-spacing:-.02em; text-align:var(--mm-ta,right); color:var(--ink); max-width:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #case-sharq .cs-lead{ margin-top:8px; } #case-sharq .cs--dark .cs-t{ color:#fff; } @media (max-width:359px){ #case-sharq .cs-t{ white-space:normal; overflow:visible; line-height:1.45; } } @media (max-width:620px){ #case-sharq .cs-meta{ gap:12px; } } /* الهايلايت كريمي مش نبيذي. ⚠ السبب: النبيذي غامق. لو حطّيناه شريط تحت نصّ غامق بيصير نصّ أسود على خلفية غامقة = ما بينقرا. والكريمي #E8E1A3 هو أصلاً لون أرضية أيقونات العلامة، فالصوت بيضل واحد. والارتفاع .26em لأن الحرف العربي بينزل تحت خط القاعدة (ي، ر، ن) فالشريط السميك بيقطعهن. */ #case-sharq .cs-hl{ background-image:linear-gradient(var(--khaki),var(--khaki)); background-position:right 0 bottom -.04em; background-size:0% .26em; } #case-sharq .cs.in .cs-hl{ background-size:100% .32em; } /* هيرو الحالة — ورق دافي بيروح لورق فاتح */ #case-sharq .case-hero{ background:linear-gradient(178deg,#F0DFC6 0%,#FAF5EC 80%); } #case-sharq .case-hero .rpat{ opacity:.30; } #case-sharq .ch-logo{ width:min(360px,58vw); color:var(--brand); } #case-sharq .ch-title{ font-size:clamp(32px,6.6vw,74px); } #case-sharq .case-bar-mid b{ color:var(--brand); } /* --- ⚠ العربي خارج خط الـmono --- الـmono (IBM Plex Mono) ما بيدعم العربي، فالمتصفّح بيرجع للخط الاحتياطي، وبيضل الـletter-spacing شغّال — فبتنفصل حروف الكلمة عن بعضها وبتصير غير مقروءة. نفس الفخّ اللي انمسك ببربل كابس. القاعدة: العربي بخط العربي، والأرقام والحروف اللاتينية بس mono. */ #case-sharq .ch-eyebrow, #case-sharq .ch-cue, #case-sharq .case-bar-mid, #case-sharq .case-foot, #case-sharq .ch-meta k{ font-family:var(--font); letter-spacing:0; font-weight:500; } #case-sharq .ch-eyebrow{ font-size:13px; } #case-sharq .ch-cue{ font-size:13px; } #case-sharq .case-bar-mid{ font-size:13px; } #case-sharq .ch-meta k{ font-size:12px; font-weight:600; } #case-sharq .case-foot{ font-size:12.5px; } /* والأرقام اللاتينية بترجع mono */ #case-sharq #sqNum, #case-sharq .num{ font-family:var(--mono); letter-spacing:.16em; } /* ========================================================= لبنات خاصة بهالصفحة ========================================================= */ /* --- صفّ لقطات عمودية 9:16 (لقطات السوق والدكّان) --- */ #case-sharq .shots{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } @media (max-width:760px){ #case-sharq .shots{ grid-template-columns:1fr 1fr; } } @media (max-width:460px){ #case-sharq .shots{ grid-template-columns:1fr; } } #case-sharq .shot{ position:relative; border-radius:20px; overflow:hidden; background:var(--charcoal); aspect-ratio:9/16; border:1px solid var(--line); transition:transform var(--t-mid) var(--mm), box-shadow var(--t-mid) var(--mm); } #case-sharq .shot:hover{ transform:translateY(-4px); box-shadow:0 22px 52px rgba(70,11,10,.18); } #case-sharq .shot img{ width:100%; height:100%; object-fit:cover; display:block; } #case-sharq .shot::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(30,18,15,.82) 0%, rgba(30,18,15,0) 46%); } #case-sharq .shot b{ position:absolute; z-index:2; inset-inline:16px; bottom:15px; color:#fff; font-size:14.5px; font-weight:600; line-height:1.45; } /* --- تشريح المنشور: صورة عليها دبابيس + قائمة مرقّمة --- */ #case-sharq .anat{ display:grid; grid-template-columns:minmax(0,.72fr) 1fr; gap:clamp(28px,4.4vw,58px); align-items:center; } @media (max-width:900px){ #case-sharq .anat{ grid-template-columns:1fr; gap:30px; } } #case-sharq .anat-shot{ position:relative; border-radius:22px; overflow:hidden; border:1px solid var(--line); box-shadow:0 24px 60px rgba(70,11,10,.16); max-width:400px; margin-inline-start:auto; } @media (max-width:900px){ #case-sharq .anat-shot{ margin-inline:auto; } } /* بنوسّع تنفّس بنود القائمة حتى يقارب طولها طول الصورة */ #case-sharq .anat .ilist li{ padding:22px 0; } #case-sharq .anat-shot img{ width:100%; height:auto; display:block; } #case-sharq .pin{ position:absolute; z-index:3; width:30px; height:30px; border-radius:50%; background:var(--khaki); color:#3A1F16; display:grid; place-items:center; font-family:var(--mono); font-size:11.5px; font-weight:500; transform:translate(-50%,-50%); /* physical — تمركز فعلي على النقطة */ box-shadow:0 0 0 6px rgba(232,225,163,.22), 0 4px 14px rgba(0,0,0,.35); } #case-sharq .pin::after{ content:''; position:absolute; inset:-6px; border-radius:50%; border:1px solid rgba(232,225,163,.5); animation:sqPulse 2.6s var(--mm) infinite; } @keyframes sqPulse{ 0%{ transform:scale(1); opacity:.9 } 70%{ transform:scale(1.9); opacity:0 } 100%{ opacity:0 } } @media (prefers-reduced-motion:reduce){ #case-sharq .pin::after{ animation:none; } } /* القائمة: نفس مكوّن .ilist المشترك، بس الأرقام نبيذية مش حمرا */ #case-sharq .ilist .num2{ color:var(--brand); } /* --- جدار المنشورات (masonry بأعمدة) --- */ #case-sharq .wall{ columns:4; column-gap:16px; } @media (max-width:1000px){ #case-sharq .wall{ columns:3; } } @media (max-width:640px){ #case-sharq .wall{ columns:2; column-gap:12px; } } #case-sharq .wall figure{ break-inside:avoid; margin:0 0 16px; border-radius:16px; overflow:hidden; border:1px solid var(--line); background:#fff; line-height:0; transition:transform var(--t-mid) var(--mm), box-shadow var(--t-mid) var(--mm); } @media (max-width:640px){ #case-sharq .wall figure{ margin-bottom:12px; } } #case-sharq .wall figure:hover{ transform:translateY(-4px); box-shadow:0 20px 44px rgba(70,11,10,.16); } #case-sharq .wall img{ width:100%; height:auto; display:block; } /* --- صفّ الأيقونات --- */ #case-sharq .icons{ display:grid; grid-template-columns:repeat(7,1fr); gap:12px; } @media (max-width:780px){ #case-sharq .icons{ grid-template-columns:repeat(4,1fr); } } @media (max-width:420px){ #case-sharq .icons{ grid-template-columns:repeat(3,1fr); } } #case-sharq .icons figure{ margin:0; border-radius:16px; overflow:hidden; border:1px solid var(--line); line-height:0; } #case-sharq .icons img{ width:100%; height:auto; display:block; } /* --- عنوان صغير جوّا البلوك --- */ #case-sharq .kline{ display:flex; align-items:center; gap:14px; margin:0 0 22px; } #case-sharq .kline b{ font-size:16px; font-weight:700; flex:none; } #case-sharq .kline span{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--ink-mute); flex:none; direction:ltr; unicode-bidi:isolate; } #case-sharq .cs--dark .kline span{ color:rgba(255,255,255,.55); } /* --- منشورَي العرض داخل البلوك الغامق --- */ #case-sharq .promos{ display:grid; grid-template-columns:1fr 1fr; gap:20px; } @media (max-width:700px){ #case-sharq .promos{ grid-template-columns:1fr; } } #case-sharq .promos figure{ margin:0; border-radius:20px; overflow:hidden; line-height:0; border:1px solid rgba(255,255,255,.14); } #case-sharq .promos img{ width:100%; height:auto; display:block; } /* --- أزرار المنصّات --- */ #case-sharq .plats{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; } #case-sharq .plat{ display:inline-flex; align-items:center; gap:10px; padding:13px 22px; border-radius:99px; font-size:14.5px; font-weight:600; background:rgba(255,255,255,.07); color:#fff; border:1px solid rgba(255,255,255,.18); transition:background var(--t-tap) var(--mm-soft), transform var(--t-mid) var(--mm), border-color var(--t-tap); } #case-sharq .plat:hover{ background:var(--parch); color:#3A1F16; border-color:transparent; transform:translateY(-3px); } #case-sharq .plat svg{ width:17px; height:17px; } /* --- بطاقة الملاحظة (نطاق العمل) --- */ #case-sharq .note{ margin-top:clamp(34px,4vw,52px); padding:22px 24px; border-radius:18px; background:rgba(122,44,57,.055); border:1px solid var(--line); display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start; } #case-sharq .note k{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; color:var(--brand); padding-top:3px; direction:ltr; unicode-bidi:isolate; } #case-sharq .note p{ margin:0; color:var(--ink-soft); font-size:14.8px; line-height:1.85; } /* --- شريط نسبة الاستخدام: خمس خانات مش أربع --- */ #case-sharq .ratio i{ font-family:var(--mono); } /* --- الإغلاق --- ⚠ 20ch افتراضي المشترك بتكسر الاقتباس العربي لخمس أسطر، والعربي أعرض من اللاتيني بنفس عدد المحارف. 27ch بتعطي سطرين ونص. */ #case-sharq .case-end .q{ max-width:27ch; font-size:clamp(21px,3.3vw,36px); line-height:1.45; } /* لافتة المعاينة ثابتة تحت — بنترك محلّها حتى ما تغطّي آخر سطر */ #case-sharq .case-foot{ padding-bottom:74px; } /* ========================================================= 29. صفحة الحالة: سوريا الحكاية بتجمعنا ========================================================= */ /* ========================================================= صفحة الحالة: سوريا الحكاية بتجمعنا منعيد ربط التوكنز جوّا #case-snc وبس، فكل المكوّنات المشتركة (.cs .ccard .cgrid .sw .case-end .mmc) بتقلب لهوية الحملة بلا ولا قاعدة CSS مكرّرة. الألوان مسحوبة من دليل الهوية v4 حرفياً: #2079c8 أزرق السماء (اللون الأساسي) #cca045 ذهبي القمح #082b26 أخضر الزيتون #630a1c العنّابي ========================================================= */ #case-snc{ --brand: #2079c8; --brand-deep: #175eac; --ink: #0E2233; --ink-soft: #33475A; --ink-mute: rgba(14,34,51,.56); --ink-faint: rgba(14,34,51,.26); --page: #F7FBFE; --cream: #E7F3FB; --line: rgba(32,121,200,.17); --wheat: #cca045; --olive: #082b26; --burg: #630a1c; --sky-100: #d1f1fc; --deep: #062260; /* الأزرق 900 · البلوك الغامق */ z-index:47; /* فوق مركز الشرق 46 */ min-height:100vh; } #case-snc .mmc{ --mmc-sh:6,34,96; } /* طبقة الباترن الخلفية · معرّف خاص حتى ما يتصادم مع طبقات باقي الحالات */ #sncPat{ position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:.05; } #case-snc .part{ background:var(--brand); } #case-snc .cs--dark{ background:var(--deep); color:#fff; } #case-snc .cs--dark .cs-lead{ color:rgba(255,255,255,.74); } #case-snc .cs--dark .cs-hair{ background:rgba(255,255,255,.2); } #case-snc .cs--dark .cs-t{ color:#fff; } /* --- ⚠ العربي خارج خط الـmono --- IBM Plex Mono ما بيدعم العربي، والمتصفّح بيرجع للخط الاحتياطي وبيضل الـletter-spacing شغّال، فبتنفصل حروف الكلمة. القاعدة: العربي بخط العربي، والأرقام والحروف اللاتينية بس mono. */ #case-snc .ch-eyebrow, #case-snc .ch-cue, #case-snc .case-bar-mid, #case-snc .case-foot, #case-snc .part-k, #case-snc .ch-meta k{ font-family:var(--font); letter-spacing:0; font-weight:500; } #case-snc .ch-eyebrow{ font-size:13px; } #case-snc .ch-cue{ font-size:13px; } #case-snc .case-bar-mid{ font-size:13px; } #case-snc .ch-meta k{ font-size:12px; font-weight:600; } #case-snc .case-foot{ font-size:12.5px; padding-bottom:74px; } #case-snc .part-k{ font-size:13px; font-weight:600; line-height:1; border-color:rgba(255,255,255,.34); color:rgba(255,255,255,.85); padding:9px 18px; margin-bottom:26px; } #case-snc .num, #case-snc .cs-ix, #case-snc #sncNum{ font-family:var(--mono); letter-spacing:.16em; } /* --- ترويسة البلوك: التسمية هي العنوان الرئيسي --- */ #case-snc .cs-head{ margin-bottom:48px; } #case-snc .cs-meta{ display:flex; align-items:center; gap:18px; } #case-snc .cs-tag{ font-family:var(--font); font-size:clamp(29px,5.2vw,56px); font-weight:700; line-height:1.12; letter-spacing:-.035em; color:var(--brand); flex:none; } #case-snc .cs-ix{ font-size:11px; color:var(--ink-mute); direction:ltr; unicode-bidi:isolate; flex:none; } #case-snc .cs--dark .cs-tag{ color:var(--sky-100); } #case-snc .cs--dark .cs-ix{ color:rgba(255,255,255,.55); } @media (max-width:620px){ #case-snc .cs-meta{ gap:12px; } } /* ⚠ نفس فخّ مركز الشرق: .cs-t عليها overflow:hidden للـellipsis، وصندوق .cs-hl السطري أطول من سطر الأب فشريط الهايلايت بينقصّ. الحلّ حشوة سفلية بتوسّع صندوق القصّ. */ #case-snc .cs-t{ margin-top:15px; padding-bottom:.5em; font-size:clamp(14.5px,2.15vw,26px); font-weight:700; line-height:1.4; letter-spacing:-.02em; text-align:var(--mm-ta,right); color:var(--ink); max-width:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #case-snc .cs-lead{ margin-top:8px; } /* ⚠ عناوين هالصفحة أطول من عناوين مركز الشرق، فالقصّ بالنقاط كان بياكل آخر الجملة على الموبايل والتابلت. تحت 760px منخلّيها تلتفّ بسطرين بدل ما تنقصّ. */ @media (max-width:760px){ #case-snc .cs-t{ white-space:normal; overflow:visible; line-height:1.45; } } /* الهايلايت ذهبي قمح مش أزرق: الأزرق غامق، ولو صار شريط تحت نصّ غامق بيصير نصّ أسود على خلفية غامقة وما بينقرا. والذهبي أصلاً من لوحة الحملة فالصوت بيضل واحد. والارتفاع .26em لأنّ الحرف العربي بينزل تحت خط القاعدة (ي، ر، ن) والشريط السميك بيقطعه. */ #case-snc .cs-hl{ background-image:linear-gradient(var(--wheat),var(--wheat)); background-position:right 0 bottom -.04em; background-size:0% .26em; } #case-snc .cs.in .cs-hl{ background-size:100% .32em; } #case-snc .cs--dark .cs-hl{ background-image:linear-gradient(rgba(204,160,69,.5),rgba(204,160,69,.5)); } #case-snc .ccard::before{ background:var(--brand); } #case-snc .ccard:hover{ box-shadow:0 20px 50px rgba(6,34,96,.12); } #case-snc .ilist .num2{ color:var(--brand); } #case-snc .btn-brand{ background:var(--brand); } #case-snc .btn-brand:hover{ background:var(--deep); color:#fff; } /* ========================================================= ★ شارة «قيد الإطلاق» حبّة بشريط الحالة + نقطة نابضة، وسطر تحت عنوان الهيرو. ========================================================= */ #case-snc .snc-flag{ display:inline-flex; align-items:center; gap:8px; flex:none; font-size:12.5px; font-weight:600; white-space:nowrap; color:var(--brand-deep); background:rgba(32,121,200,.10); border:1px solid rgba(32,121,200,.26); border-radius:99px; padding:6px 13px 6px 11px; } #case-snc .snc-flag i{ width:7px; height:7px; border-radius:50%; background:var(--brand); flex:none; position:relative; } #case-snc .snc-flag i::after{ content:''; position:absolute; inset:-4px; border-radius:50%; border:1px solid var(--brand); animation:sncPulse 2.4s var(--mm) infinite; } @keyframes sncPulse{ 0%{ transform:scale(1); opacity:.9 } 70%{ transform:scale(2); opacity:0 } 100%{ opacity:0 } } @media (max-width:820px){ #case-snc .snc-flag span{ display:none; } } @media (max-width:520px){ #case-snc .snc-flag{ padding:6px 9px; } } #case-snc .snc-soon{ margin:26px auto 0; max-width:640px; display:inline-flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:center; font-size:13.5px; line-height:1.75; color:#fff; background:rgba(6,34,96,.42); border:1px solid rgba(255,255,255,.26); border-radius:99px; padding:10px 20px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } #case-snc .snc-soon b{ font-weight:700; color:var(--sky-100); } @media (max-width:560px){ #case-snc .snc-soon{ border-radius:20px; padding:12px 16px; font-size:12.8px; } } /* ========================================================= الهيرو · الفيلم خلفية صامتة، والنص فوق حجاب متدرّج ========================================================= */ #case-snc .case-hero{ background:linear-gradient(178deg,#0B2C4A 0%,#12395D 60%,#0E2233 100%); color:#fff; } #case-snc .ch-vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; opacity:0; transition:opacity 1.1s var(--mm-out); } #case-snc .ch-vid.on{ opacity:1; } #case-snc .ch-scrim{ position:absolute; inset:0; z-index:1; background: linear-gradient(180deg, rgba(6,20,34,.72) 0%, rgba(6,20,34,.44) 38%, rgba(6,20,34,.80) 100%), radial-gradient(120% 90% at 50% 42%, rgba(6,20,34,0) 20%, rgba(6,20,34,.62) 100%); } #case-snc .ch-logo{ color:#fff; width:min(430px,66vw); } #case-snc .ch-title{ font-size:clamp(30px,6.2vw,70px); color:#fff; } #case-snc .ch-sub{ color:rgba(255,255,255,.86); } #case-snc .ch-eyebrow{ color:rgba(255,255,255,.72); } #case-snc .ch-cue{ color:rgba(255,255,255,.72); } #case-snc .ch-meta{ border-color:rgba(255,255,255,.22); } #case-snc .ch-meta div + div{ border-inline-start-color:rgba(255,255,255,.22); } #case-snc .ch-meta k{ color:rgba(255,255,255,.6); } #case-snc .ch-meta v{ color:#fff; } @media (max-width:640px){ #case-snc .ch-meta div:nth-child(n+3){ border-top-color:rgba(255,255,255,.22); } } /* زرّ الصوت · الفيلم بيشتغل مكتوم عشان التشغيل التلقائي يمرق بكل المتصفّحات، والزرّ بيرجّع الصوت بضغطة الزائر. */ #case-snc .ch-snd{ position:absolute; z-index:3; inset-inline-start:22px; bottom:22px; display:inline-flex; align-items:center; gap:9px; cursor:pointer; font-size:12.5px; font-weight:600; color:#fff; background:rgba(6,20,34,.44); border:1px solid rgba(255,255,255,.28); border-radius:99px; padding:9px 16px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); transition:background var(--t-tap) var(--mm-soft), transform var(--t-mid) var(--mm); } #case-snc .ch-snd:hover{ background:rgba(6,20,34,.7); transform:translateY(-2px); } #case-snc .ch-snd svg{ width:15px; height:15px; } @media (max-width:560px){ #case-snc .ch-snd{ inset-inline-start:16px; bottom:16px; padding:8px 13px; } } /* ========================================================= لبنات خاصة بهالصفحة ========================================================= */ /* --- بطاقة الخطّ --- */ #case-snc .fonts{ display:grid; grid-template-columns:1fr 1fr; gap:20px; } @media (max-width:760px){ #case-snc .fonts{ grid-template-columns:1fr; } } #case-snc .fontcard{ border:1px solid var(--line); border-radius:22px; background:#fff; overflow:hidden; } #case-snc .fontcard .spec{ padding:clamp(24px,3.4vw,38px) 26px; background:var(--cream); border-bottom:1px solid var(--line); text-align:center; font-size:clamp(30px,5vw,52px); font-weight:700; line-height:1.25; color:var(--brand-deep); letter-spacing:-.02em; } #case-snc .fontcard .spec.lat{ font-family:Georgia,'Times New Roman',serif; direction:ltr; letter-spacing:.01em; } #case-snc .fontcard .body{ padding:22px 24px 26px; } #case-snc .fontcard .body b{ display:block; font-size:17px; font-weight:700; } #case-snc .fontcard .body k{ display:block; margin-top:5px; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--ink-mute); direction:ltr; unicode-bidi:isolate; } #case-snc .fontcard .body p{ margin-top:12px; color:var(--ink-soft); font-size:14.6px; line-height:1.85; } /* --- صفّ مواصفات الفيلم --- */ #case-snc .spec4{ display:flex; flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.2); border-bottom:1px solid rgba(255,255,255,.2); } #case-snc .spec4 div{ flex:1 1 180px; padding:20px 16px; } #case-snc .spec4 div + div{ border-inline-start:1px solid rgba(255,255,255,.2); } #case-snc .spec4 k{ display:block; font-size:12px; font-weight:600; color:rgba(255,255,255,.6); margin-bottom:8px; } #case-snc .spec4 v{ display:block; font-size:15.5px; font-weight:600; color:#fff; } @media (max-width:640px){ #case-snc .spec4 div{ flex:1 1 50%; } #case-snc .spec4 div:nth-child(odd){ border-inline-start:0; } #case-snc .spec4 div:nth-child(n+3){ border-top:1px solid rgba(255,255,255,.2); } } /* --- شرائح الرسالة الأخيرة --- */ #case-snc .msgs{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; } #case-snc .msgs span{ font-size:clamp(15px,2.4vw,22px); font-weight:700; letter-spacing:-.02em; color:#fff; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); border-radius:99px; padding:11px 24px; transition:background var(--t-tap) var(--mm-soft), transform var(--t-mid) var(--mm); } #case-snc .msgs span:hover{ background:var(--wheat); color:#20140A; border-color:transparent; transform:translateY(-3px); } /* ========================================================= ★ موك-أب الهاتف · المنشور جوّا جهاز مرسوم بالكود، صفر أصول الإطار بيحضن الصورة بطولها الطبيعي، فبيشتغل مع ١:١ ومع ٣:٤ بلا قصّ ولا حواف سودا. ========================================================= */ #case-snc .pwall{ columns:4; column-gap:18px; } @media (max-width:1000px){ #case-snc .pwall{ columns:3; } } @media (max-width:760px){ #case-snc .pwall{ columns:2; column-gap:14px; } } @media (max-width:460px){ #case-snc .pwall{ columns:1; } } #case-snc .pfig{ break-inside:avoid; margin:0 0 26px; } @media (max-width:760px){ #case-snc .pfig{ margin-bottom:20px; } } #case-snc .pfig figcaption{ margin-top:11px; text-align:center; font-size:13.4px; font-weight:600; color:var(--ink-soft); line-height:1.5; } #case-snc .pmock{ margin:0; position:relative; border-radius:26px; padding:11px 7px 15px; background:#12212F; box-shadow:0 2px 4px rgba(6,34,96,.14), 0 18px 44px rgba(6,34,96,.20); transition:transform var(--t-mid) var(--mm), box-shadow var(--t-mid) var(--mm); } #case-snc .pmock:hover{ transform:translateY(-5px); box-shadow:0 3px 6px rgba(6,34,96,.16), 0 30px 64px rgba(6,34,96,.28); } /* سمّاعة الجهاز */ #case-snc .pmock::before{ content:''; position:absolute; top:5px; left:50%; transform:translateX(-50%); width:34px; height:3px; border-radius:99px; background:rgba(255,255,255,.22); } /* شريط الرجوع */ #case-snc .pmock::after{ content:''; position:absolute; bottom:6px; left:50%; transform:translateX(-50%); width:52px; height:3px; border-radius:99px; background:rgba(255,255,255,.22); } #case-snc .pmock img{ width:100%; height:auto; display:block; border-radius:16px; } /* ========================================================= ★ كومة الكاروسيل الشرائح مكوّمة فوق بعض، وبالهوفر بتنفرد صفّاً كاملاً. ⚠ الفخّ اللي انمسك بالنسخة ١: كنت بحسب الخطوة الأفقية بس، وما بزغّر الكرت. النتيجة إنّ المروحة بتضل جوّا الكادر بس كل شريحة بتغطّي اللي قبلها فما بيبين إلا ٣٠٪ منها. المعادلة اللي ما بتنكسر: عدد الشرائح × عرض الكرت ≤ عرض الحاوية فلمّا تنفرد الكومة، الكرت لازم **يزغّر** لَيوسع الصفّ: عرض الكرت المطلوب = (W - (n-1) × gap) / n معامل التصغير = عرض الكرت المطلوب / عرض الكرت الطبيعي الخطوة = عرض الكرت المطلوب + gap = (W + gap) / n وبعدين مستوى تاني: الهوفر على شريحة بالذات بيرجّعها لحجمها الكامل فوق الباقي. لمحة على الكل، وقراءة لللي بدّك ياها. ========================================================= */ #case-snc .decks{ display:flex; flex-direction:column; gap:clamp(46px,5vw,68px); } #case-snc .deck{ position:relative; width:100%; height:clamp(270px,33vw,420px); margin-bottom:46px; cursor:pointer; -webkit-tap-highlight-color:transparent; } #case-snc .deck-strip{ position:absolute; inset:0; } #case-snc .deck-card{ position:absolute; top:0; left:50%; height:100%; width:auto; transform-origin:50% 50%; z-index:var(--z,1); border-radius:14px; overflow:hidden; line-height:0; background:#fff; border:1px solid rgba(255,255,255,.75); box-shadow:0 1px 2px rgba(6,34,96,.10), 0 8px 22px rgba(6,34,96,.14); transform:translate3d(calc(-50% + var(--k) * 3px), calc(var(--a) * 2px), 0) rotate(calc(var(--k) * 1.1deg)); transition:transform var(--t-big) var(--mm), box-shadow var(--t-mid) var(--mm), opacity var(--t-mid) var(--mm-soft); will-change:transform; } #case-snc .deck-card img{ height:100%; width:auto; display:block; } /* المستوى الأوّل: الكومة بتنفرد صفّاً كاملاً، كل الشرائح ظاهرة */ #case-snc .deck.is-open .deck-card{ transform:translate3d(calc(-50% + var(--k) * var(--sp,120) * 1px), calc(var(--a) * var(--lift,3) * 1px), 0) rotate(calc(var(--k) * var(--rot,0.8) * 1deg)) scale(var(--sc,1)); box-shadow:0 2px 5px rgba(6,34,96,.12), 0 14px 34px rgba(6,34,96,.20); } /* المستوى التاني: الشريحة اللي تحت المؤشّر بترجع لحجمها الكامل فوق الباقي ⚠ ليش `.is-hot` بالجافاسكربت بدل `:hover` بالـCSS: الشريحة المكبّرة عرضها ٣١٦ وخانتها ١١٨، فبتغطّي جيرانها. مع `:hover` بتصير الشريحة قافلة على حالها: المؤشّر بيضل فوقها مهما تحرّك جوّا صندوقها الكبير، فما بتقدر تنتقل لجارتها إلا لو مشيت ١٦٠ بكسل وقفزت خانتين. الحلّ نحسب الخانة من موضع المؤشّر الأفقي ونعلّم الشريحة بكلاس · فبيصير التنقّل خانة خانة. وفايدة تانية: خلصنا من `:has()` ومن فخّ النوعية تبعها. */ #case-snc .deck.is-open .deck-card.is-hot{ transform:translate3d(calc(-50% + var(--k) * var(--sp,120) * 1px), 0, 0) rotate(0deg) scale(var(--sch,1)); z-index:30; box-shadow:0 4px 10px rgba(6,34,96,.18), 0 28px 66px rgba(6,34,96,.34); } /* الباقي بيخفت شوي حتى تبرز اللي تحت المؤشّر */ #case-snc .deck.is-open.has-hot .deck-card:not(.is-hot){ opacity:.45; } @media (max-width:640px){ #case-snc .deck{ height:clamp(190px,50vw,262px); margin-bottom:42px; } } /* --------------------------------------------------------- وضع الشريط · للأجهزة اللمسية ٣٤٦ بكسل ما بتوسع تسع شرائح ولا مزغّرة، فبدل المروحة منعمل شريط بينسحب: شريحتين أو تلاتة ظاهرات بحجمهن الكامل والباقي بالسحب. --------------------------------------------------------- */ #case-snc .deck--rail{ height:auto; cursor:default; margin-bottom:16px; } #case-snc .deck--rail .deck-strip{ position:static; display:flex; gap:12px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; padding-bottom:8px; scrollbar-width:thin; scrollbar-color:rgba(32,121,200,.35) transparent; } #case-snc .deck--rail .deck-strip::-webkit-scrollbar{ height:6px; } #case-snc .deck--rail .deck-strip::-webkit-scrollbar-thumb{ background:rgba(32,121,200,.35); border-radius:99px; } #case-snc .deck--rail .deck-card{ position:static; flex:0 0 auto; left:auto; top:auto; height:clamp(230px,58vw,330px); width:auto; transform:none !important; scroll-snap-align:center; } #case-snc .deck--rail .deck-cap{ position:static; margin-top:14px; } #case-snc .deck-cap{ position:absolute; inset-inline:0; bottom:-38px; text-align:center; font-size:14px; font-weight:600; color:var(--ink-soft); transition:color var(--t-tap) var(--mm-soft); } #case-snc .deck-cap i{ display:block; font-family:var(--mono); font-size:10.5px; font-style:normal; letter-spacing:.14em; color:var(--ink-mute); margin-top:4px; direction:ltr; unicode-bidi:isolate; } #case-snc .deck:hover .deck-cap, #case-snc .deck.is-open .deck-cap{ color:var(--brand-deep); } @media (prefers-reduced-motion:reduce){ #case-snc .deck-card{ transition:none; } } /* تلميح الاستعمال · بيتبدّل حسب نوع الجهاز */ #case-snc .hint-touch{ display:none; } @media (hover:none),(pointer:coarse){ #case-snc .hint-hover{ display:none; } #case-snc .hint-touch{ display:inline; } } /* ========================================================= ★ موك-أب البيلبورد · عمود ولوح وأضواء، كلها مرسومة بالكود ========================================================= */ #case-snc .bbrail{ display:flex; gap:20px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; padding:4px 0 20px; scrollbar-width:thin; scrollbar-color:rgba(32,121,200,.35) transparent; } #case-snc .bbrail::-webkit-scrollbar{ height:7px; } #case-snc .bbrail::-webkit-scrollbar-thumb{ background:rgba(32,121,200,.35); border-radius:99px; } #case-snc .bbrail::-webkit-scrollbar-track{ background:transparent; } #case-snc .bbm{ flex:0 0 min(660px, 86vw); scroll-snap-align:center; margin:0; position:relative; border-radius:22px; overflow:hidden; background:linear-gradient(180deg,#8FD0F2 0%,#C7E7F8 52%,#E7F3FB 100%); padding:44px 26px 0; border:1px solid var(--line); } /* أضواء اللوحة · ثلاث أذرع رفيعة فوق اللوح */ #case-snc .bbm-lamps{ position:absolute; top:12px; inset-inline:26px; height:32px; z-index:2; display:flex; justify-content:space-around; align-items:flex-end; pointer-events:none; } #case-snc .bbm-lamps i{ display:block; width:2px; height:26px; background:#2A3138; position:relative; border-radius:1px; } /* رأس الكشّاف بيطلّ عالنزول على اللوح · مثلّث مقلوب فوق الذراع */ #case-snc .bbm-lamps i::before{ content:''; position:absolute; top:-8px; left:50%; transform:translateX(-50%); width:0; height:0; border-inline:9px solid transparent; border-top:9px solid #2A3138; } #case-snc .bbm-board{ position:relative; z-index:3; border-radius:5px; overflow:hidden; border:7px solid #23282E; background:#23282E; line-height:0; box-shadow:0 18px 40px rgba(14,34,51,.30); } #case-snc .bbm-board img{ width:100%; height:auto; display:block; } #case-snc .bbm-rail{ position:relative; z-index:2; height:9px; margin-inline:-4px; background:#2A3138; border-radius:0 0 3px 3px; } #case-snc .bbm-pole{ position:relative; z-index:1; width:30px; height:56px; margin:0 auto; background:linear-gradient(90deg,#20262C 0%,#3A434C 42%,#20262C 100%); } #case-snc .bbm figcaption{ position:absolute; inset-inline:0; bottom:0; z-index:4; padding:10px 18px 12px; text-align:center; font-size:13px; font-weight:600; color:var(--ink-soft); background:linear-gradient(180deg, rgba(231,243,251,0), rgba(231,243,251,.94) 42%); } @media (max-width:560px){ #case-snc .bbm{ padding:34px 16px 0; } #case-snc .bbm-lamps{ inset-inline:16px; } } #case-snc .rail-hint{ margin-top:6px; text-align:center; font-size:12.5px; color:var(--ink-mute); } /* --- أزرار المنصّات --- */ #case-snc .plats{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; } #case-snc .plat{ display:inline-flex; align-items:center; gap:10px; padding:13px 22px; border-radius:99px; font-size:14.5px; font-weight:600; background:rgba(255,255,255,.07); color:#fff; border:1px solid rgba(255,255,255,.2); transition:background var(--t-tap) var(--mm-soft), transform var(--t-mid) var(--mm), border-color var(--t-tap); } #case-snc .plat:hover{ background:var(--sky-100); color:#0B2C4A; border-color:transparent; transform:translateY(-3px); } #case-snc .plat svg{ width:17px; height:17px; } #case-snc .plat--main{ background:var(--wheat); color:#20140A; border-color:transparent; } #case-snc .plat--main:hover{ background:#fff; color:#0B2C4A; } #case-snc .plat--off{ opacity:.5; cursor:default; } #case-snc .plat--off:hover{ background:rgba(255,255,255,.07); color:#fff; border-color:rgba(255,255,255,.2); transform:none; } /* --- عنوان صغير جوّا البلوك --- */ #case-snc .kline{ display:flex; align-items:center; gap:14px; margin:0 0 22px; } #case-snc .kline b{ font-size:16px; font-weight:700; flex:none; } #case-snc .kline span{ font-size:13px; font-weight:600; color:var(--ink-mute); flex:none; } #case-snc .kline i{ flex:1; height:1px; background:var(--line); } #case-snc .cs--dark .kline span{ color:rgba(255,255,255,.6); } /* ⚠ الوصف والعنوان التنين flex:none، فعلى شاشة ٣٢٠ بيتجاوزوا عرض الحاوية سوا وبيطلع سكرول أفقي. تحت 620px الوصف بينزل لسطر تحت. */ @media (max-width:620px){ #case-snc .kline{ flex-wrap:wrap; } #case-snc .kline span{ flex:1 0 100%; order:3; margin-top:5px; } } #case-snc .cs--dark .kline i{ background:rgba(255,255,255,.2); } /* --- بطاقة الملاحظة --- */ #case-snc .note{ margin-top:clamp(34px,4vw,52px); padding:22px 24px; border-radius:18px; background:rgba(32,121,200,.06); border:1px solid var(--line); display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start; } #case-snc .note k{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; color:var(--brand); padding-top:3px; direction:ltr; unicode-bidi:isolate; } #case-snc .note p{ margin:0; color:var(--ink-soft); font-size:14.8px; line-height:1.85; } #case-snc .cs--dark .note{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.16); } #case-snc .cs--dark .note p{ color:rgba(255,255,255,.78); } #case-snc .cs--dark .note k{ color:var(--wheat); } /* --- الإغلاق --- */ #case-snc .case-end .q{ max-width:26ch; font-size:clamp(21px,3.3vw,36px); line-height:1.45; } /* كرت حملة سوريا بصفحة الأعمال */ .wk-media--snc{ background:linear-gradient(160deg,#D1F1FC 0%,#A5DFF9 100%); display:grid; place-items:center; } .wk-media--snc .rpat{ opacity:.30; z-index:1; } .wk-media--snc .wk-mark{ width:min(74%,360px); color:#2079c8; } /* ⚠ .wk-soon خطّها mono، والـmono ما بيدعم العربي فبيضل الـletter-spacing شغّال وبتنفصل حروف «قيد الإطلاق». هالنسخة بخطّ العربي. */ .wk-soon--live{ font-family:var(--font); letter-spacing:0; font-weight:600; font-size:12px; color:var(--brand-deep); background:rgba(253,185,19,.14); border-color:transparent; } /* ===== صفحة الأعمال v5 ===== */ /* متغيّرات صفحة الأعمال الجديدة فقط. الباقي منورّثه من الموقع. */ :root{ --screen:#141210; --screen-2:#1E1B18; --on-screen:#F2EEE6; --on-screen-m:rgba(242,238,230,.6); } .w5-container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:20px; } .w5-mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; } .w5-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } /* ========================================================= 1 · الهيرو ========================================================= */ .w5-hero{ position:relative; background:var(--screen); color:var(--on-screen); min-height:100svh; display:grid; place-items:center; overflow:hidden; padding:calc(var(--header-h) + 40px) 0 60px; } /* --- نمط أ · جدار الريلات --- عشر خانات: خمس أعمدة بصفّين. السبب جودة مش شكل: الخانة الكاملة الطول ٢٨٨×٩٠٠، فلازم يتمدّد المقطع ١٫٣ مرّة ليعبّيها وتبيّن البكسلة. بصفّين بتصير الخانة ٢٨٨×٤٤٧ فالمقطع بينضغط بدل ما يتمدّد. كل خانة مقطع مونتاج فيه قطعة كل ١٫٥ ثانية، والقطع مدموج بالفيديو نفسو فما في جافاسكربت بيقصّ. */ .w5-rwall{ position:absolute; inset:0; display:grid; gap:6px; z-index:1; grid-template-columns:repeat(5,1fr); grid-template-rows:repeat(2,1fr); } /* الخلفية بتنحطّ من الجافاسكربت فقط لو فشل تحميل الفيديو. الفيديو نفسو شفّاف جزئياً بالأعمدة الطرفية، فأي صورة تحتو بتبيّن من وراه وبتعمل طبقتين فوق بعض. */ .w5-rwall .w5-col{ position:relative; overflow:hidden; background:#0B0A09 center/cover no-repeat; opacity:0; transform:translateY(46px) scale(1.04); } .w5-hero.w5-lit .w5-rwall .w5-col{ opacity:1; transform:none; transition:opacity 1.1s var(--mm-out), transform 1.3s var(--mm-out); } /* الدخول بموجة قطرية: عمود ورا عمود، والصف التاني متأخّر عن الأول */ .w5-hero.w5-lit .w5-rwall .w5-col:nth-child(1){ transition-delay:.04s } .w5-hero.w5-lit .w5-rwall .w5-col:nth-child(2){ transition-delay:.12s } .w5-hero.w5-lit .w5-rwall .w5-col:nth-child(3){ transition-delay:.20s } .w5-hero.w5-lit .w5-rwall .w5-col:nth-child(4){ transition-delay:.28s } .w5-hero.w5-lit .w5-rwall .w5-col:nth-child(5){ transition-delay:.36s } .w5-hero.w5-lit .w5-rwall .w5-col:nth-child(6){ transition-delay:.10s } .w5-hero.w5-lit .w5-rwall .w5-col:nth-child(7){ transition-delay:.18s } .w5-hero.w5-lit .w5-rwall .w5-col:nth-child(8){ transition-delay:.26s } .w5-hero.w5-lit .w5-rwall .w5-col:nth-child(9){ transition-delay:.34s } .w5-hero.w5-lit .w5-rwall .w5-col:nth-child(10){ transition-delay:.42s } .w5-rwall video{ width:100%; height:100%; object-fit:cover; } /* الخانات الطرفية أخفت شوي: العين بتمشي عالنص بلا ما نطفي الحركة */ .w5-rwall .w5-col:nth-child(5n+1) video,.w5-rwall .w5-col:nth-child(5n) video{ opacity:.7 } .w5-rwall .w5-col:nth-child(5n+2) video,.w5-rwall .w5-col:nth-child(5n+4) video{ opacity:.87 } /* الطبقة: تعتيم محسوب. خفيف كفاية حتى تضل الحركة باينة، وثقيل كفاية تحت كتلة النص حتى يضل العنوان مقروء فوق أي لقطة. */ .w5-hero-veil{ position:absolute; inset:0; z-index:2; pointer-events:none; background: radial-gradient(52% 40% at 50% 47%,rgba(20,18,16,.9) 0%,rgba(20,18,16,.74) 55%,rgba(20,18,16,0) 100%), linear-gradient(to bottom,rgba(20,18,16,.8) 0%,rgba(20,18,16,.28) 22%,rgba(20,18,16,.28) 74%,rgba(20,18,16,.86) 100%); } /* --- نمط ب · المونيتور --- شاشة وحدة بتشتغل، والنص جنبها مش فوقها. عمودين، حتى تضل اللقطة كاملة ويضل العنوان على أرض هادية. */ .w5-rmon{ position:absolute; inset:0; z-index:1; display:grid; align-items:center; justify-items:end; padding-inline-end:clamp(24px,7vw,110px); } .w5-rmon .w5-screen{ position:relative; width:min(350px,32vw); aspect-ratio:9/16; border-radius:20px; overflow:hidden; background:#0B0A09; box-shadow:0 40px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(242,238,230,.1); opacity:0; transform:translateY(40px) scale(.96); } .w5-hero.w5-lit .w5-rmon .w5-screen{ opacity:1; transform:none; transition:opacity 1s var(--mm-out), transform 1.2s var(--mm-out); } .w5-rmon video{ width:100%; height:100%; object-fit:cover; } /* شريط الفريمات: كل الأعمال بلقطة واحدة، ماشي بلا توقّف */ /* direction:ltr مقصودة: بالـ rtl بيتموضع الشريط من الحافة اليمنى وبيفيض لليسار، فحركة translateX السالبة بتطلّعه كلّه برّا الشاشة وبيبيّن فراغ. باللاتيني بيبدأ من اليسار فالنصّ التاني بيسدّ مكانه. */ .w5-rstrip{ position:absolute; inset-inline:0; bottom:0; z-index:3; overflow:hidden; direction:ltr; height:78px; mask-image:linear-gradient(to left,transparent,#000 12%,#000 88%,transparent); opacity:0; transition:opacity 1s var(--mm-out) .5s; } .w5-hero.w5-lit .w5-rstrip{ opacity:.72 } .w5-rstrip .w5-rail{ display:flex; gap:6px; width:max-content; animation:rail 42s linear infinite; } .w5-rstrip img{ width:44px; height:78px; object-fit:cover; border-radius:5px; flex:none; } @keyframes rail{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } } /* الهيرو مطفي بالنمط غير المختار */ .w5-hero[data-mode="wall"] .w5-rmon,.w5-hero[data-mode="wall"] .w5-rstrip{ display:none } .w5-hero[data-mode="mon"] .w5-rwall{ display:none } .w5-hero[data-mode="mon"] .w5-hero-veil{ background:linear-gradient(to left,rgba(20,18,16,.55) 0%,rgba(20,18,16,.2) 42%,rgba(20,18,16,0) 62%); } .w5-hero[data-mode="mon"] .w5-hero-in{ text-align:var(--mm-ta,right); max-width:min(580px,50vw); margin-inline-start:clamp(24px,7vw,110px); margin-inline-end:auto; } .w5-hero[data-mode="mon"] .w5-hero-in h1, .w5-hero[data-mode="mon"] .w5-hero-lead{ text-shadow:none } .w5-hero[data-mode="mon"] .w5-hero-lead{ margin-inline:0 } .w5-hero[data-mode="mon"] .w5-hero-nums{ justify-content:flex-start; margin-inline:0 } .w5-hero[data-mode="mon"] .w5-hero-nums b, .w5-hero[data-mode="mon"] .w5-hero-nums span{ text-shadow:none } .w5-hero[data-mode="mon"] .w5-hero-nums div{ text-align:var(--mm-ta,right) } /* --- محتوى الهيرو --- */ .w5-hero-in{ position:relative; z-index:4; text-align:center; padding-inline:22px; } .w5-hero-eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:.24em; color:var(--brand); display:block; } .w5-hero h1{ font-size:clamp(32px,5.8vw,70px); font-weight:700; line-height:1.24; letter-spacing:-.04em; margin:20px 0 0; text-wrap:balance; text-shadow:0 2px 26px rgba(10,9,8,.6); } .w5-hero h1 .w5-cut{ position:relative; display:inline-block; padding-bottom:.14em; } /* الشرطة الصفراء تحت الكلمة المفتاح: نفس موتيف الهايلايت بالموقع */ .w5-hero h1 .w5-cut::after{ content:''; position:absolute; inset-inline:-4px; bottom:0; height:.15em; background:var(--brand); transform:scaleX(0); transform-origin:var(--mm-org,right); transition:transform 1s var(--mm) .8s; } .w5-hero.w5-lit h1 .w5-cut::after{ transform:scaleX(1) } .w5-hero-lead{ margin:22px auto 0; max-width:56ch; font-size:clamp(15px,1.5vw,17.5px); line-height:1.9; color:var(--on-screen-m); text-shadow:0 1px 16px rgba(10,9,8,.7); } /* عدّاد الإنتاج: أرقام لا تحتاج شرحاً بعدها */ .w5-hero-nums{ margin:38px auto 0; display:flex; gap:clamp(22px,4vw,54px); justify-content:center; flex-wrap:wrap; } .w5-hero-nums div{ text-align:center; } .w5-hero-nums b{ display:block; font-family:var(--mono); font-size:clamp(24px,3.2vw,36px); font-weight:500; letter-spacing:-.02em; color:var(--on-screen); direction:ltr; unicode-bidi:isolate; line-height:1.1; text-shadow:0 2px 18px rgba(10,9,8,.7); } .w5-hero-nums span{ display:block; margin-top:6px; font-size:12.5px; color:var(--on-screen-m); text-shadow:0 1px 12px rgba(10,9,8,.8); } .w5-hero-since{ display:block; margin-top:22px; font-size:10.5px; letter-spacing:.16em; color:rgba(242,238,230,.42); text-shadow:0 1px 12px rgba(10,9,8,.9); } /* مفتاح شكل العرض: خيار للزائر، مش أداة تطوير. بيتخزّن اختياره محلياً فبيلاقي نفس الشكل لما يرجع. */ .w5-mode{ position:absolute; z-index:6; top:calc(var(--header-h) + 40px); inset-inline-start:22px; display:flex; align-items:center; gap:4px; padding:4px; border-radius:99px; background:rgba(20,18,16,.5); backdrop-filter:blur(10px); border:1px solid rgba(242,238,230,.16); opacity:0; transform:translateY(-8px); transition:opacity .7s var(--mm-out) .9s, transform .7s var(--mm-out) .9s; } .w5-hero.w5-lit .w5-mode{ opacity:1; transform:none } .w5-mode .w5-lbl{ font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; color:rgba(242,238,230,.45); padding-inline:9px 4px; flex:none; } .w5-mode button{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:500; padding:7px 14px 7px 12px; border:0; border-radius:99px; background:transparent; color:var(--on-screen-m); cursor:pointer; transition:background var(--t-tap) ease, color var(--t-tap) ease; } .w5-mode button:hover{ background:rgba(242,238,230,.1); color:var(--on-screen); } .w5-mode button svg{ width:14px; height:14px; flex:none; } .w5-mode button[aria-pressed="true"]{ background:var(--brand); color:var(--ink); font-weight:600; } .w5-mode button[aria-pressed="true"]:hover{ background:var(--brand-deep); } /* مؤشر النزول */ .w5-hero-scroll{ position:absolute; z-index:5; bottom:26px; inset-inline-start:50%; transform:translateX(calc(50% * var(--mmx,1))); display:grid; justify-items:center; gap:9px; font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--on-screen-m); opacity:0; transition:opacity .8s ease 1.4s; } .w5-hero.w5-lit .w5-hero-scroll{ opacity:1 } .w5-hero-scroll i{ width:1px; height:34px; background:linear-gradient(to bottom,var(--brand),transparent); animation:drop 2.1s var(--mm) infinite; } @keyframes drop{ 0%{ transform:scaleY(0); transform-origin:top } 45%{ transform:scaleY(1); transform-origin:top } 55%{ transform:scaleY(1); transform-origin:bottom } 100%{ transform:scaleY(0); transform-origin:bottom } } /* ========================================================= 3 · التايم لاين والكروت ========================================================= */ .w5-timeline{ padding:clamp(46px,6vw,76px) 0 clamp(56px,8vw,96px); } .w5-tl{ display:grid; gap:clamp(20px,2.6vw,32px); } .w5-wk{ position:relative; display:grid; grid-template-columns:minmax(0,420px) 1fr; background:#fff; border:1px solid rgba(23,23,23,.08); border-radius:var(--radius-card); overflow:hidden; text-align:var(--mm-ta,right); box-shadow:0 1px 2px rgba(23,23,23,.04), 0 16px 40px rgba(23,23,23,.06); opacity:0; transform:translateY(30px); transition:opacity var(--t-big) var(--mm), transform var(--t-big) var(--mm), box-shadow var(--t-mid) var(--mm); } .w5-wk.w5-in{ opacity:1; transform:none; } .w5-no-js .w5-wk{ opacity:1; transform:none; } .w5-wk:hover{ box-shadow:0 1px 2px rgba(23,23,23,.05), 0 30px 66px rgba(23,23,23,.12); } /* التبادل: الفردي بيقلب اللوحة عالطرف التاني، فالعين تمشي زقزاق مش عمود واحد */ .w5-wk--flip{ grid-template-columns:1fr minmax(0,420px); } .w5-wk--flip .w5-wk-media{ order:2 } .w5-wk--flip .w5-wk-body{ order:1 } /* الشريط الأصفر يللي بينرسم: موتيف الموقع */ .w5-wk::after{ content:''; position:absolute; inset-inline:0; bottom:0; height:3px; background:var(--brand); transform:scaleX(0); transform-origin:var(--mm-org,right); z-index:9; transition:transform var(--t-mid) var(--mm); } .w5-wk:hover::after{ transform:scaleX(1) } /* --- اللوحة --- */ .w5-wk-media{ position:relative; min-height:660px; overflow:hidden; background:#101010; } .w5-wk-media .w5-vstack{ position:absolute; inset:0; z-index:2; /* الفتحة: اللوحة بتنفتح من شق أفقي، متل غالق عدسة */ clip-path:inset(50% 0 50% 0); } .w5-wk.w5-in .w5-wk-media .w5-vstack{ clip-path:inset(0 0 0 0); transition:clip-path 1.05s var(--mm-out) .12s; } .w5-no-js .w5-wk-media .w5-vstack{ clip-path:none } .w5-vstack video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .6s var(--mm-out); background:#0E0E0E; } .w5-vstack video.w5-on{ opacity:1 } /* تعتيم أسفل اللوحة حتى تبقى الأدوات مقروءة فوق أي لقطة */ .w5-wk-media::after{ content:''; position:absolute; inset-inline:0; bottom:0; height:150px; z-index:4; pointer-events:none; background:linear-gradient(to top,rgba(8,8,8,.62),transparent); } /* غلاف فاضي: مختار السوق لسا ما إجت مقاطعو. الكرت أقصر عن قصد، حتى يقرا الزائر إنّو مش مكتمل بعد. */ .w5-wk--soon .w5-wk-media{ min-height:430px } .w5-wk-media--empty{ background:linear-gradient(165deg,#22201D 0%,#141210 100%); } .w5-wk-empty{ position:absolute; inset:0; z-index:3; display:grid; place-items:center; gap:16px; align-content:center; text-align:center; padding:30px; color:rgba(242,238,230,.5); } .w5-wk-empty .w5-fr{ width:58px; height:58px; border-radius:14px; border:1px dashed rgba(242,238,230,.28); display:grid; place-items:center; } .w5-wk-empty .w5-fr svg{ width:22px; height:22px; opacity:.7 } .w5-wk-empty p{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; line-height:2; } /* --- التايم كود --- */ .w5-tc{ position:absolute; z-index:7; top:16px; inset-inline-start:16px; display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; padding:6px 11px; border-radius:8px; color:rgba(255,255,255,.9); background:rgba(12,12,12,.46); backdrop-filter:blur(7px); direction:ltr; unicode-bidi:isolate; } .w5-tc .w5-rec{ width:6px; height:6px; border-radius:99px; background:#FF4B3E; flex:none; animation:rec 1.9s ease-in-out infinite; } @keyframes rec{ 0%,100%{ opacity:1 } 50%{ opacity:.25 } } /* --- الأدوات: زر التبديل ونقاط المقاطع --- */ .w5-vctl{ position:absolute; z-index:7; bottom:18px; inset-inline-start:18px; display:flex; align-items:center; gap:10px; } .w5-vbtn{ width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.32); background:rgba(14,14,14,.44); backdrop-filter:blur(7px); color:#fff; display:grid; place-items:center; cursor:pointer; flex:none; transition:background var(--t-tap) ease, transform var(--t-tap) ease, border-color var(--t-tap) ease; } .w5-vbtn:hover{ background:var(--brand); border-color:var(--brand); color:var(--ink); } .w5-vbtn:active{ transform:scale(.92) } .w5-vbtn svg{ width:16px; height:16px } .w5-vbtn.w5-spin svg{ animation:spin .5s var(--mm-out) } @keyframes spin{ from{ transform:rotate(0) } to{ transform:rotate(-360deg) } } .w5-vdots{ display:flex; align-items:center; gap:5px; padding:7px 11px; border-radius:99px; background:rgba(14,14,14,.4); backdrop-filter:blur(7px); } .w5-vdot{ width:6px; height:6px; border-radius:99px; border:0; padding:0; cursor:pointer; background:rgba(255,255,255,.4); transition:width .45s var(--mm-out), background var(--t-tap) ease; } .w5-vdot:hover{ background:rgba(255,255,255,.82) } .w5-vdot.w5-on{ width:22px; background:rgba(255,255,255,.3); position:relative; overflow:hidden; } .w5-vdot.w5-on::after{ content:''; position:absolute; inset:0; inset-inline-end:auto; width:0; background:var(--brand); border-radius:99px; } .w5-vdot.w5-on.w5-run::after{ width:100%; transition:width 8s linear; } /* عالموبايل النقطة ٦ بكسل: صغيرة عالإصبع. منكبّر النقطة ومنوسّع مساحة اللمس بعنصر شفاف حواليها بلا ما نغيّر شكلها. */ @media (max-width:820px){ .w5-vdots{ gap:12px; padding:9px 13px; } .w5-vdot{ width:9px; height:9px; position:relative; } .w5-vdot::before{ content:''; position:absolute; inset:-12px -6px; border-radius:99px; } .w5-vdot.w5-on{ width:26px; } } /* --- النص --- */ .w5-wk-body{ padding:46px 46px 42px; display:flex; flex-direction:column; justify-content:center; } .w5-wk-top{ display:flex; align-items:center; gap:14px; margin-bottom:20px; } .w5-wk-ix{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:rgba(23,23,23,.66); direction:ltr; unicode-bidi:isolate; flex:none; } .w5-wk-hair{ flex:1; height:1px; background:rgba(23,23,23,.14) } .w5-wk-kind{ font-family:var(--mono); font-size:11.5px; letter-spacing:.09em; color:rgba(23,23,23,.66); flex:none; } .w5-wk-name{ font-size:clamp(30px,3.9vw,50px); font-weight:700; line-height:1.1; letter-spacing:-.03em; margin:0 0 6px; } .w5-wk-place{ font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; color:var(--ink-mute); direction:ltr; unicode-bidi:isolate; } .w5-wk-line{ margin:18px 0 0; color:var(--ink-soft); font-size:16.5px; line-height:1.85; max-width:48ch; } .w5-wk-svc{ margin:26px 0 0; display:flex; gap:8px; flex-wrap:wrap; } .w5-wk-svc span{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; padding:7px 14px; border-radius:99px; border:1px solid rgba(23,23,23,.16); color:rgba(23,23,23,.7); } .w5-wk-stats{ margin:26px 0 0; padding-top:22px; border-top:1px solid rgba(23,23,23,.12); display:flex; gap:30px; flex-wrap:wrap; } .w5-wk-stats div{ display:flex; align-items:baseline; gap:8px } .w5-wk-stats strong{ font-size:31px; font-weight:700; line-height:1; letter-spacing:-.035em; direction:ltr; unicode-bidi:isolate; } .w5-wk-stats span{ font-size:13px; color:rgba(23,23,23,.62) } /* بديل الأرقام للحالات يللي لسا ما توثّقت */ .w5-wk-note{ margin:26px 0 0; padding-top:22px; border-top:1px solid rgba(23,23,23,.12); font-size:14.5px; line-height:1.8; color:var(--ink-mute); max-width:42ch; } .w5-wk-go{ margin-top:28px; display:inline-flex; align-items:center; gap:10px; align-self:flex-start; background:var(--ink); color:#fff; border-radius:99px; padding:13px 26px; font-weight:600; font-size:15px; transition:background var(--t-tap) var(--mm-soft), gap var(--t-mid) var(--mm); } .w5-wk-go::after{ content:''; position:absolute; inset:0; z-index:5 } .w5-wk:hover .w5-wk-go{ background:var(--brand); color:var(--ink); gap:16px } .w5-wk-go svg{ width:17px; height:17px } .w5-wk--soon .w5-wk-go{ background:transparent; color:var(--ink-mute); border:1px solid var(--line); } .w5-wk--soon:hover .w5-wk-go{ background:var(--ink); color:#fff; border-color:var(--ink); } /* ========================================================= 4 · الختام ========================================================= */ .w5-end{ background:var(--cream); border-top:1px solid var(--line); text-align:center; padding:clamp(64px,9vw,110px) 0; } .w5-end .w5-k{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--ink-mute) } .w5-end h2{ margin:18px auto 0; max-width:18ch; font-size:clamp(26px,4vw,46px); font-weight:700; letter-spacing:-.035em; line-height:1.2; text-wrap:balance; } .w5-end p{ margin:18px auto 0; max-width:52ch; color:var(--ink-soft); font-size:16px; line-height:1.9 } .w5-end a{ margin-top:32px; display:inline-flex; align-items:center; gap:10px; background:var(--ink); color:#fff; border-radius:99px; padding:15px 32px; font-weight:600; transition:background var(--t-tap) ease, gap var(--t-mid) var(--mm); } .w5-end a:hover{ background:var(--brand); color:var(--ink); gap:16px } .w5-end a svg{ width:17px; height:17px } /* ========================================================= 5 · الموبايل ========================================================= */ @media(max-width:960px){ .w5-wk,.w5-wk--flip{ grid-template-columns:1fr } .w5-wk--flip .w5-wk-media,.w5-wk--flip .w5-wk-body{ order:0 } .w5-wk-media{ min-height:0; aspect-ratio:4/5 } .w5-wk-body{ padding:28px 24px 26px } .w5-wk-name{ font-size:clamp(27px,7vw,36px) } .w5-wk-line{ font-size:15.5px } .w5-wk-stats strong{ font-size:26px } } @media(max-width:720px){ /* الموبايل: ٦ خانات بدل ١٠. أقلّ فيديو شغّال، ونفس الإحساس */ .w5-rwall{ grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,1fr); gap:4px } .w5-rwall .w5-col:nth-child(n+7){ display:none } .w5-rwall .w5-col video{ opacity:.86 } .w5-rwall .w5-col:nth-child(2) video,.w5-rwall .w5-col:nth-child(5) video{ opacity:1 } /* على الموبايل المونيتور بيرجع تكديس: الشاشة خلفية والنص فوقها */ .w5-rmon{ justify-items:center; padding-inline:0 } .w5-rmon .w5-screen{ width:min(260px,64vw) } .w5-hero[data-mode="mon"] .w5-hero-in{ text-align:center; max-width:none; margin-inline:auto } .w5-hero[data-mode="mon"] .w5-hero-nums{ justify-content:center } .w5-hero[data-mode="mon"] .w5-hero-nums div{ text-align:center } .w5-hero[data-mode="mon"] .w5-hero-veil{ background:radial-gradient(80% 60% at 50% 48%,rgba(20,18,16,.9) 0%,rgba(20,18,16,.7) 60%,rgba(20,18,16,.35) 100%) } .w5-hero[data-mode="mon"] .w5-hero-in h1, .w5-hero[data-mode="mon"] .w5-hero-lead{ text-shadow:0 2px 22px rgba(10,9,8,.75) } .w5-mode{ inset-inline-start:14px; top:auto; bottom:16px } .w5-hero-scroll{ display:none } } @media(prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } *{ animation:none !important; transition-duration:.01ms !important } .w5-wk-media .w5-vstack{ clip-path:none } } /* ===== شريط فيديو مختار السوق ===== طبقة فوق لوح المنشورات: الصورة أرضية والريلات تمرق فوقها. نفس مكوّن الشرائط بباقي الصفحات، بنفس المقاسات، وبلون ظلّ مأخوذ من ورق اللوح نفسه. */ #case-mok .mokvid{ position:relative; } #case-mok .mokvid .mmc{ /* السالب مقصود: الشريط بيطلع شوي فوق الحاوية حتى ينزل تحت عنوان «المنشورات» مباشرة، ويغطّي الصف الأول من اللوح. */ position:absolute; inset-inline:0; top:-6%; transform:none; z-index:3; --mmc-sh:46,36,25; padding:clamp(22px,2.6vw,40px) 0; background:linear-gradient(to bottom, rgba(20,15,10,0) 0%, rgba(20,15,10,.74) 13%, rgba(20,15,10,.74) 87%, rgba(20,15,10,0) 100%); } @media(max-width:820px){ #case-mok .mokvid .mmc{ padding:16px 0; } } /* ========================================================= MESH-MOSH · EN / AR — direction + typography overrides ========================================================= */ html[dir="ltr"]{ --mmx:-1; /* mirrors translateX(50%) centring */ --mm-org:left; /* bars/underlines draw from the start edge */ --mm-ta:left; /* text-align:start */ --font:'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif; } /* labels that force RTL for an Arabic word inside an LTR label row */ html[dir="ltr"] .cs-k--ar, html[dir="ltr"] #case-sara .cs-k--ar{ direction:ltr; } /* one-line sub-heads: English runs longer than Arabic, so let it wrap instead of being clipped with an ellipsis (same call the author made below 360px in the Arabic build). */ html[dir="ltr"] #case-purple .cs-t, html[dir="ltr"] #case-sharq .cs-t, html[dir="ltr"] #case-snc .cs-t{ white-space:normal; overflow:visible; text-overflow:clip; line-height:1.32; } /* before / after sliders: in English time runs left to right, so BEFORE moves to the left and the clip flips with it. */ html[dir="ltr"] #ba .ba-before, html[dir="ltr"] #saraBa .ba-before{ clip-path:inset(0 calc(100% - var(--split,50%)) 0 0); } html[dir="ltr"] #ba .ba-tag--b, html[dir="ltr"] #saraBa .ba-tag--b{ right:auto; left:16px; } html[dir="ltr"] #ba .ba-tag--a, html[dir="ltr"] #saraBa .ba-tag--a{ left:auto; right:16px; } /* works hero, monochrome mode: the veil has to darken the side the copy sits on */ html[dir="ltr"] .w5-hero[data-mode="mon"] .w5-hero-veil{ background:linear-gradient(to right,rgba(20,18,16,.55) 0%,rgba(20,18,16,.2) 42%,rgba(20,18,16,0) 62%); } /* the footer kashida stretches an Arabic letter; there is no Latin equivalent, so it is dropped and the word space carries the line */ html[dir="ltr"] .kash{ display:none; } /* language switch */ .mm-lang{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; font-weight:600; background:transparent; border:1px solid rgba(23,23,23,.22); color:var(--ink); border-radius:99px; padding:7px 13px; cursor:pointer; line-height:1; transition:background var(--t-tap) var(--mm-soft), border-color var(--t-tap) var(--mm-soft), transform var(--t-mid) var(--mm); } .mm-lang:hover{ background:var(--brand); border-color:transparent; transform:translateY(-2px); } .mm-lang[lang="ar"]{ font-family:var(--font); letter-spacing:0; font-size:13px; } .mm-lang--m{ margin-top:10px; } .nav-mobile .mm-lang{ width:100%; padding:12px; font-size:13px; } /* ===== صفحة من نحن ===== */ :root{ --brand: #FDB913; --brand-deep: #EFA80B; --ink: #171717; --ink-soft: #2E2E2E; --ink-mute: rgba(23,23,23,.52); --ink-faint: rgba(23,23,23,.28); --page: #F4F4F5; --cream: #F5EEDE; --line: rgba(23,23,23,.10); --font: 'Noto Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; --container: 1200px; --header-h: 72px; --radius-card: 28px; --radius-pill: 65px; --mm: cubic-bezier(.62,.02,.05,1); --mm-out: cubic-bezier(.22,1,.36,1); --mm-soft: cubic-bezier(0,0,.2,1); --t-tap: .16s; --t-mid: .66s; --t-big: 1.2s; } *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; } body{ margin:0; font-family:var(--font); font-size:16px; line-height:1.6; color:var(--ink); background:var(--page); overflow-x:hidden; } img,video{ display:block; max-width:100%; height:auto; } a{ color:inherit; text-decoration:none; } ul{ list-style:none; margin:0; padding:0; } h1,h2,h3,h4,p,figure,blockquote{ margin:0; } .container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:20px; } .mono{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; font-variant-numeric:tabular-nums; } .eyebrow{ display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--ink-mute); margin-bottom:14px; } .pt-lead{ display:block; font-size:.52em; font-weight:500; letter-spacing:0; color:var(--ink-mute); margin-bottom:.22em; } .pt-main{ display:inline; -webkit-box-decoration-break:clone; box-decoration-break:clone; padding-inline:6px; background-image:linear-gradient(var(--brand),var(--brand)); background-repeat:no-repeat; background-position:right 0 bottom .10em; background-size:0% .36em; transition:background-size var(--t-big) var(--mm) .25s; } .num{ font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate; display:inline-block; } @media (prefers-reduced-motion:reduce){ *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } } /* --- إطار المعاينة فقط · مش جزء من الموقع --- */ .pv-note{ background:var(--ink); color:#fff; text-align:center; padding:12px 20px; font-size:13px; letter-spacing:.01em; } .pv-above{ background:var(--page); padding:70px 20px 90px; text-align:center; color:var(--ink-faint); font-family:var(--mono); font-size:11px; letter-spacing:.16em; } .pv-below{ background:linear-gradient(178deg, var(--brand) 0%, var(--brand-deep) 100%); padding:90px 20px; text-align:center; color:rgba(23,23,23,.55); font-family:var(--mono); font-size:11px; letter-spacing:.16em; } /* ========================================================= 14. من نحن — المؤسس والفريق بلا توكنز جديدة وبلا أصول برّانية: نفس --brand و--cream و--radius-card، ونفس موتيف الهايلايت اللي بينرسم من اليمين، ونفس حبيبات الورق تبع الفوتر. ========================================================= */ .about{ position:relative; background:var(--cream); padding:clamp(74px,9vw,110px) 0 clamp(90px,11vw,140px); } /* الجسر اللوني: البرامج رمادي (--page) والفوتر أصفر، والكريمي بينهن. التدرّج بيمنع خطّ القطع الحاد فوق القسم. */ .about::before{ content:''; position:absolute; inset-inline:0; top:0; height:120px; background:linear-gradient(var(--page),var(--cream)); pointer-events:none; } .about > .container{ position:relative; z-index:2; } /* ---------- الكشف عند النزول ---------- */ .ab-rv{ opacity:0; transform:translateY(24px); transition:opacity var(--t-mid) var(--mm), transform var(--t-mid) var(--mm); } .ab-rv.in{ opacity:1; transform:none; } .ab-rv.in .pt-main{ background-size:100% .36em; } @media (prefers-reduced-motion:reduce){ .ab-rv{ opacity:1; transform:none; } } /* ---------- الترويسة ---------- */ .about-head{ text-align:center; margin:0 auto clamp(52px,6vw,80px); max-width:760px; } .about-title{ font-size:clamp(28px,4.8vw,48px); line-height:1.28; letter-spacing:-.015em; font-weight:700; } .about-intro{ margin-top:18px; color:var(--ink-soft); font-size:16px; line-height:1.85; } /* ========================================================= المؤسس ========================================================= */ .ab-founder{ display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr); gap:clamp(28px,4.5vw,64px); align-items:center; background:#fff; border-radius:var(--radius-card); padding:clamp(22px,3vw,40px); box-shadow:0 24px 60px rgba(23,23,23,.06); } @media (max-width:860px){ .ab-founder{ grid-template-columns:1fr; gap:26px; } .abf-media{ max-width:300px; margin-inline:auto; } } /* لوحة الصورة: بطاقة صفرا بحبيبات ورق، والصورة قاعدة على قاعدتها. الصورة مقصوصة الخلفية وقاطعة عند الكتفين، فحافّتها السفلية بتنطبق تماماً على حافّة البطاقة — القطع بيصير مقصود مش خلل. */ .abf-media{ position:relative; overflow:hidden; border-radius:38px 38px var(--radius-card) var(--radius-card); background:linear-gradient(170deg,var(--brand) 0%,var(--brand-deep) 100%); aspect-ratio:1 / 1.06; display:flex; align-items:flex-end; justify-content:center; } .abf-media::after{ /* نفس حبيبات .foot-grain */ content:''; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.5; mix-blend-mode:multiply; background: radial-gradient(circle, rgba(120,80,0,.16) .9px, transparent 1px) 0 0/7px 7px, radial-gradient(circle, rgba(120,80,0,.10) .9px, transparent 1px) 3px 4px/11px 11px; } .abf-media img{ position:relative; z-index:2; width:104%; max-width:none; height:auto; display:block; filter:drop-shadow(0 14px 26px rgba(23,23,23,.18)); } .abf-kicker{ display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--ink-mute); margin-bottom:10px; } .abf-name{ font-size:clamp(26px,3.6vw,38px); font-weight:700; letter-spacing:-.02em; line-height:1.2; } .abf-role{ margin-top:8px; font-size:14px; font-weight:500; color:var(--ink-mute); padding-bottom:18px; border-bottom:1px solid var(--line); } .abf-p{ margin-top:16px; color:var(--ink-soft); font-size:15.5px; line-height:1.9; } .abf-p b{ font-weight:600; color:var(--ink); } /* الاقتباس: شخطة صفرا عاليمين بدل علامات تنصيص — نفس منطق الهايلايت بالموقع، اللون بيحمل المعنى مش الزخرفة. */ .abf-site{ margin-top:16px; } .abf-site a{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:13px; letter-spacing:.02em; color:var(--ink-mute); text-decoration:none; padding:7px 13px; border:1px solid var(--line); border-radius:999px; transition:color .2s ease, border-color .2s ease, background .2s ease; } .abf-site a svg{ width:15px; height:15px; opacity:.75; } .abf-site a:hover, .abf-site a:focus-visible{ color:var(--ink); border-color:var(--brand); background:rgba(0,0,0,.02); } .abf-quote{ margin:24px 0 0; padding-inline-start:18px; border-inline-start:4px solid var(--brand); font-size:17px; font-weight:600; line-height:1.7; letter-spacing:-.01em; } /* ========================================================= الفريق ========================================================= */ .ab-team{ margin-top:clamp(60px,8vw,104px); } .abt-head{ text-align:center; max-width:720px; margin:0 auto clamp(34px,4.5vw,52px); } .abt-title{ font-size:clamp(24px,3.6vw,36px); font-weight:700; letter-spacing:-.015em; line-height:1.3; } .abt-intro{ margin-top:16px; color:var(--ink-soft); font-size:15.5px; line-height:1.85; } .abt-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,24px); } @media (max-width:860px){ .abt-grid{ grid-template-columns:repeat(2,1fr); } } /* ⚠ العمود الواحد بيبلّش تحت 360 بس. عند 390 (أشيع عرض موبايل) عمود واحد بيخلّي الأفاتار 330px والبلوك ٦ شاشات طول — عمودين بيحلّوها بلا خسارة. */ @media (max-width:360px){ .abt-grid{ grid-template-columns:1fr; } .abt-ava{ max-width:190px; margin-inline:auto; } } .abt-card{ background:#fff; border-radius:var(--radius-card); padding:16px 16px 22px; text-align:center; border:1px solid var(--line); transition:transform var(--t-mid) var(--mm), box-shadow var(--t-mid) var(--mm), opacity var(--t-mid) var(--mm); } .abt-card:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(23,23,23,.08); } /* الأفاتار: نفس شكل لوحة المؤسس مصغّرة — قوس فوق وزوايا هادية تحت. لمّا تجي الصورة: حطّ جوّا .abt-ava وبيغطّي الحروف لحاله. */ .abt-ava{ position:relative; overflow:hidden; aspect-ratio:1 / 1.06; margin-bottom:14px; border-radius:26px 26px 18px 18px; background:var(--cream); display:grid; place-items:center; } .abt-ava::before{ /* حبيبات خفيفة حتى ما تبان اللوحة فاضية ميتة */ content:''; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.6; background:radial-gradient(circle, rgba(23,23,23,.07) .9px, transparent 1px) 0 0/9px 9px; } .abt-ava::after{ /* الحروف الأولى — بتختفي تحت الصورة لما تنحطّ */ content:attr(data-ini); position:relative; z-index:2; font-family:var(--mono); font-size:clamp(20px,3vw,30px); letter-spacing:.06em; color:var(--ink-faint); } .abt-ava img{ position:absolute; inset:0; z-index:3; width:100%; height:100%; max-width:none; object-fit:cover; object-position:top center; } .abt-name{ font-size:17px; font-weight:700; letter-spacing:-.01em; } /* ⚠ الدور بحبر مش بأصفر: --brand-deep على أبيض نسبة تباينه 1.9:1 — مقروء كزخرفة، مش كنصّ. الأصفر بيضل موجود كشخطة تحت الاسم. */ /* inline + box-decoration-break:clone — نفس علّة .pt-main بالضبط: لو خلّيناها inline-block وانكسر السطر، كل سطر بياخد شخطته صح بالصدفة مش بالتصميم. هيك السلوك مقصود ومضمون بكل المتصفحات. */ .abt-role{ margin-top:7px; font-size:13.5px; font-weight:600; color:var(--ink); } /* الشخطة على جوّا الفقرة مش على الفقرة نفسها:

عنصر بلوك، ولو خلّيناه inline بيضيع margin-top. والـclone بيضمن إنّ كل سطر بياخد شخطته لو انكسر الدور لسطرين — نفس علّة .pt-main بالضبط. */ .abt-role span{ display:inline; -webkit-box-decoration-break:clone; box-decoration-break:clone; padding-inline:3px; background:linear-gradient(var(--brand),var(--brand)) no-repeat right bottom .02em / 100% .3em; } .abt-note{ margin-top:8px; font-size:13px; line-height:1.7; color:var(--ink-mute); } .abt-tail{ margin-top:clamp(24px,3vw,34px); text-align:center; font-size:15px; line-height:1.85; color:var(--ink-soft); max-width:640px; margin-inline:auto; } /* ---------- شريط الأرقام ---------- */ .abt-stats{ margin-top:clamp(34px,4.5vw,52px); display:grid; grid-template-columns:repeat(4,1fr); gap:18px; border-top:1px solid var(--line); padding-top:clamp(26px,3.4vw,38px); text-align:center; } @media (max-width:720px){ .abt-stats{ grid-template-columns:repeat(2,1fr); gap:26px 18px; } } .abt-stats b{ display:block; font-size:clamp(28px,4vw,42px); font-weight:700; letter-spacing:-.02em; line-height:1.1; } .abt-stats span{ display:block; margin-top:7px; font-size:13px; line-height:1.6; color:var(--ink-mute); } /* ---------- الطبقة نفسها: فوق كل الطبقات ولها خلفيتها ---------- الطبقات التانية كل وحدة إلها z-index خاص (٤٠ لأعمالنا و٤١ لـ٤٧ للحالات)، وبلا واحد للصفحة كان شريط فيديوهات الرئيسية بيبيّن من تحتها. */ #about-page{ z-index:48; background:var(--cream); } /* الشريطان فوق (النافبار ٧٢ + شريط العودة ٤٦) بياخدوا ١٤١ بكسل عالديسكتوب و١٣٧ عالموبايل — مقيسة. */ #about-page .about{ padding-top:calc(var(--header-h,72px) + 114px); } @media (max-width:820px){ #about-page .about{ padding-top:calc(var(--header-h,72px) + 100px); } } /* ---------- كروت الفريق بصور (بدل الأحرف) ---------- */ .abt-ava--img{ width:100%; aspect-ratio:4/5; height:auto; border-radius:var(--radius-card,22px); overflow:hidden; background:var(--cream); display:block; box-shadow:0 10px 30px rgba(23,23,23,.10); } .abt-ava--img::after{ content:none; } .abt-ava--img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--mm,ease); } .abt-card:hover .abt-ava--img img{ transform:scale(1.03); } .abt-note{ line-height:1.75; } /* ---------- خمس عدّادات بدل أربعة ---------- */ @media (min-width:960px){ .abt-stats{ grid-template-columns:repeat(5,1fr); } } @media (max-width:959px) and (min-width:600px){ .abt-stats{ grid-template-columns:repeat(3,1fr); } } /* ========================================================= صفحة «لنتحدث» ========================================================= */ #contact-page{ z-index:49; background:var(--cream); } #contact-page .ct{ padding-top:calc(var(--header-h,72px) + 114px); padding-bottom:clamp(70px,9vw,120px); } @media (max-width:820px){ #contact-page .ct{ padding-top:calc(var(--header-h,72px) + 100px); } } .ct-form{ max-width:760px; margin:clamp(30px,4vw,48px) auto 0; display:grid; gap:20px; } .ct-row{ display:grid; gap:7px; } .ct-2{ display:grid; gap:20px; } @media (min-width:720px){ .ct-2{ grid-template-columns:1fr 1fr; } } .ct-lb{ font-size:14px; font-weight:600; color:var(--ink-soft); } .ct-lb i{ font-style:normal; color:#C4432F; margin-inline-start:4px; } .ct-hint{ font-size:12.5px; color:var(--ink-mute); } .ct-in{ width:100%; font:inherit; font-size:16px; color:var(--ink); background:#fff; border:1px solid rgba(23,23,23,.16); border-radius:14px; padding:13px 15px; transition:border-color .2s var(--mm), box-shadow .2s var(--mm); } .ct-in::placeholder{ color:rgba(23,23,23,.34); } .ct-in:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(253,185,19,.30); } textarea.ct-in{ min-height:132px; resize:vertical; line-height:1.75; } .ct-in.bad{ border-color:#C4432F; background:#FFF8F6; } /* الرقم والإيميل لاتيني حتى لو الصفحة عربية */ input[dir="ltr"].ct-in{ text-align:start; } .ct-svc{ display:flex; flex-wrap:wrap; gap:9px; } .ct-chip{ display:inline-flex; align-items:center; gap:9px; cursor:pointer; border:1px solid rgba(23,23,23,.16); background:#fff; border-radius:99px; padding:9px 16px; font-size:14.5px; line-height:1.4; -webkit-user-select:none; user-select:none; transition:background .2s var(--mm), border-color .2s var(--mm); } .ct-chip input{ width:16px; height:16px; margin:0; accent-color:var(--ink); flex:none; } .ct-chip:hover{ border-color:rgba(23,23,23,.38); } .ct-chip.on{ background:var(--brand); border-color:var(--brand); font-weight:600; } .ct-svc.bad .ct-chip{ border-color:#C4432F; } .ct-send{ justify-self:start; border:0; cursor:pointer; font:inherit; font-weight:700; font-size:16px; background:var(--ink); color:var(--cream); border-radius:99px; padding:15px 36px; transition:transform .18s var(--mm), background .2s var(--mm), color .2s var(--mm); } .ct-send:hover{ background:var(--brand); color:var(--ink); } .ct-send:active{ transform:scale(.97); } .ct-send[disabled]{ opacity:.5; pointer-events:none; } .ct-msg{ border-radius:12px; padding:12px 16px; font-size:14.5px; line-height:1.7; background:#FDECE8; color:#8C2F1E; border:1px solid #F3C9BF; } .ct-msg a{ color:inherit; text-decoration:underline; } .ct-alt{ font-size:14px; color:var(--ink-mute); line-height:1.8; } .ct-alt a{ color:var(--ink); border-bottom:1px solid var(--brand); } .ct-done{ max-width:620px; margin:clamp(50px,8vw,110px) auto; text-align:center; } .ct-tick{ width:66px; height:66px; margin:0 auto 24px; border-radius:50%; background:var(--brand); display:grid; place-items:center; } .ct-tick svg{ width:30px; height:30px; } .ct-done h2{ font-size:clamp(24px,3.6vw,36px); font-weight:700; letter-spacing:-.02em; } .ct-done p{ margin-top:14px; color:var(--ink-soft); line-height:1.85; } .ct-hp{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); } /* ⚠ خاصية hidden لحالها ما بتكفي هون: قاعدة المؤلّف .ct-form{display:grid} بتغلب قاعدة المتصفح [hidden]{display:none}، فالفورم كان يضل ظاهر بعد الإرسال فوق شاشة «وصلتنا رسالتك». انمسكت باللقطة مو بالكود. */ #contact-page [hidden]{ display:none !important; } #mmGate{position:fixed;inset:0;z-index:2000;background:#0B0A08;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:24px;transition:opacity .45s ease;font-family:'Readex Pro',system-ui,sans-serif} #mmGate::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px);pointer-events:none} #mmGate.off{opacity:0;pointer-events:none} #mmGate .sb{position:absolute;top:18px;left:22px;font-family:ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.16em;color:#E2574C;animation:mmSb 1.4s ease-in-out infinite} @keyframes mmSb{0%,100%{opacity:.9}50%{opacity:.2}} #mmGate .wm{color:rgba(255,255,255,.94);font-size:clamp(26px,3.4vw,34px);font-weight:600} #mmPow{width:88px;height:88px;border-radius:50%;background:transparent;border:2px solid rgba(255,255,255,.35);cursor:pointer;display:grid;place-items:center;color:#fff;transition:transform .2s ease,border-color .2s ease;animation:mmGlow 2.2s ease-in-out infinite} #mmPow:hover{transform:scale(1.07);border-color:#FDB913} #mmPow svg{width:36px;height:36px} @keyframes mmGlow{0%,100%{box-shadow:0 0 18px rgba(226,87,76,.25)}50%{box-shadow:0 0 32px rgba(226,87,76,.5)}} #mmGate .lb{color:rgba(255,255,255,.88);font-size:17px;font-weight:500} #mmGate .sm{color:rgba(255,255,255,.4);font-size:12px;margin-top:-12px} html.mm-lock{overflow:hidden}