/* ------------------------------------------------------------------ YF Case Study — صفحة دراسة الحالة المفردة كل قاعدة لون مسبوقة بـ .yf-cs كي تتفوّق على أنماط إليمنتور العامة (.elementor-kit-XX h1{color:…} خصوصيتها 0,1,1). ------------------------------------------------------------------ */ .yf-cs{ --yf-cs-brand:#FDCF36; --yf-cs-deep:#7A5A00; --yf-cs-ink:#232326; --yf-cs-ink-2:#2E2E33; --yf-cs-text:#2C2C30; --yf-cs-soft:#61616A; --yf-cs-line:#E7E7E2; --yf-cs-mute:#F7F7F4; --yf-cs-paper:#FFFFFF; --yf-cs-radius:16px; --yf-cs-wrap:1180px; font-family:'Tajawal',system-ui,-apple-system,'Segoe UI',sans-serif; color:var(--yf-cs-text); line-height:1.9; overflow-x:clip; } .yf-cs *,.yf-cs *::before,.yf-cs *::after{box-sizing:border-box} .yf-cs img{max-width:100%;height:auto} .yf-cs.yf-cs-single, .yf-cs.yf-cs-archive{ /* خلفية في القالب قد تكون داكنة (تدرّج إليمنتور العام) — بلا طلاء صريح هنا يصبح النص الداكن فوق خلفية داكنة. */ background:var(--yf-cs-paper); } .yf-cs .yf-cs-brief, .yf-cs .yf-cs-content{background:var(--yf-cs-paper)} .yf-cs .yf-cs-wrap{ max-width:var(--yf-cs-wrap); margin-inline:auto; padding-inline:20px; } /* شرائط عريضة تخرج من حاوية القالب الضيّقة */ .yf-cs-fullbleed .yf-cs-hero, .yf-cs-fullbleed .yf-cs-results, .yf-cs-fullbleed .yf-cs-cta, .yf-cs-fullbleed .yf-cs-quote-sec, .yf-cs-fullbleed .yf-cs-related, .yf-cs-fullbleed .yf-cs-arc-head{ margin-inline:calc(50% - 50vw); padding-inline:calc(50vw - 50%); } .yf-cs .screen-reader-text{ position:absolute;width:1px;height:1px; margin:-1px;padding:0;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%); white-space:nowrap;border:0; } /* ------------------------------ الأزرار ------------------------------ */ .yf-cs .yf-cs-btn{ display:inline-block; padding:14px 30px; border-radius:999px; font-weight:700; font-size:16px; line-height:1.4; text-decoration:none; transition:transform .15s ease,box-shadow .15s ease; } .yf-cs .yf-cs-btn:hover{transform:translateY(-2px)} .yf-cs .yf-cs-btn--brand{background:var(--yf-cs-brand);color:var(--yf-cs-ink);box-shadow:0 8px 22px rgba(253,207,54,.35)} .yf-cs .yf-cs-btn--brand:hover{color:var(--yf-cs-ink)} .yf-cs .yf-cs-btn--dark{background:var(--yf-cs-ink);color:#fff} .yf-cs .yf-cs-btn--dark:hover{color:#fff} /* ------------------------------ الهيرو ------------------------------ */ .yf-cs .yf-cs-hero{ background:var(--yf-cs-ink); background-image:radial-gradient(120% 90% at 88% 0%,rgba(253,207,54,.16) 0%,rgba(35,35,38,0) 60%); color:#fff; padding-block:44px 56px; } .yf-cs .yf-cs-crumbs{font-size:14px;color:rgba(255,255,255,.62);margin-bottom:26px} .yf-cs .yf-cs-crumbs a{color:rgba(255,255,255,.78);text-decoration:none} .yf-cs .yf-cs-crumbs a:hover{color:var(--yf-cs-brand)} .yf-cs .yf-cs-crumbs span{margin-inline:8px;opacity:.45} .yf-cs .yf-cs-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center} .yf-cs .yf-cs-eyebrow{ display:inline-block; background:var(--yf-cs-brand); color:var(--yf-cs-ink); font-weight:700; font-size:13px; letter-spacing:.2px; padding:6px 14px; border-radius:999px; margin-bottom:18px; } .yf-cs .yf-cs-title{ color:#fff; font-size:clamp(28px,3.6vw,46px); font-weight:800; line-height:1.35; margin:0 0 16px; } .yf-cs .yf-cs-lede{color:rgba(255,255,255,.8);font-size:18px;margin:0 0 26px;max-width:62ch} .yf-cs .yf-cs-hero-meta{ list-style:none;margin:0 0 30px;padding:0; display:flex;flex-wrap:wrap;gap:12px; } .yf-cs .yf-cs-hero-meta li{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:10px 16px; min-width:132px; } .yf-cs .yf-cs-hero-meta span{display:block;font-size:12px;color:rgba(255,255,255,.58);margin-bottom:2px} .yf-cs .yf-cs-hero-meta b{color:#fff;font-size:15px;font-weight:700} .yf-cs .yf-cs-hero-media{margin:0} .yf-cs .yf-cs-hero-media img{ border-radius:var(--yf-cs-radius); border:1px solid rgba(255,255,255,.14); display:block;width:100%; } /* ------------------------------ النتائج ------------------------------ */ .yf-cs .yf-cs-results{background:var(--yf-cs-mute);padding-block:0} .yf-cs .yf-cs-kpis{ list-style:none;margin:0;padding:0; display:grid;gap:1px; background:var(--yf-cs-line); border:1px solid var(--yf-cs-line); border-radius:var(--yf-cs-radius); overflow:hidden; transform:translateY(-34px); box-shadow:0 18px 44px rgba(35,35,38,.10); } .yf-cs .yf-cs-kpis--1{grid-template-columns:1fr} .yf-cs .yf-cs-kpis--2{grid-template-columns:repeat(2,1fr)} .yf-cs .yf-cs-kpis--3{grid-template-columns:repeat(3,1fr)} .yf-cs .yf-cs-kpis--4{grid-template-columns:repeat(4,1fr)} .yf-cs .yf-cs-kpi{background:var(--yf-cs-paper);padding:26px 22px;text-align:center} .yf-cs .yf-cs-kpi-value{ display:block; /* الأرقام تُكتب مثل +400% — بلا عزل ثنائي الاتجاه تنقلب إلى 400%+ */ direction:ltr; text-align:center; color:var(--yf-cs-deep); font-size:clamp(26px,3vw,38px); font-weight:900; line-height:1.25; letter-spacing:-.5px; } .yf-cs .yf-cs-kpi-label{display:block;color:var(--yf-cs-ink);font-weight:700;font-size:15px;margin-top:4px} .yf-cs .yf-cs-kpi-note{display:block;color:var(--yf-cs-soft);font-size:13px;line-height:1.7;margin-top:6px} /* ------------------------------ التحدي والخدمات ------------------------------ */ .yf-cs .yf-cs-sec-title{ color:var(--yf-cs-ink); font-size:22px;font-weight:800; margin:0 0 14px; padding-inline-start:14px; border-inline-start:5px solid var(--yf-cs-brand); line-height:1.6; } .yf-cs .yf-cs-brief{padding-block:6px 34px} .yf-cs .yf-cs-brief-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:36px;align-items:start} .yf-cs .yf-cs-brief-text{color:var(--yf-cs-text);font-size:17px;margin:0} .yf-cs .yf-cs-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px} .yf-cs .yf-cs-chip{ display:inline-block; background:var(--yf-cs-mute); color:var(--yf-cs-ink); border:1px solid var(--yf-cs-line); border-radius:999px; padding:6px 14px; font-size:14px;font-weight:600; line-height:1.7; } .yf-cs .yf-cs-chip--solid{background:#FFF7DA;border-color:#F3E2A4;color:var(--yf-cs-deep)} /* ------------------------------ المحتوى ------------------------------ */ .yf-cs .yf-cs-content{padding-block:12px 46px;font-size:17.5px} .yf-cs .yf-cs-content > *{max-width:820px;margin-inline:auto} .yf-cs .yf-cs-content h2, .yf-cs .yf-cs-content h3, .yf-cs .yf-cs-content h4{color:var(--yf-cs-ink);font-weight:800;line-height:1.55;margin:1.7em auto .6em} .yf-cs .yf-cs-content h2{font-size:27px} .yf-cs .yf-cs-content h3{font-size:22px} .yf-cs .yf-cs-content h4{font-size:19px} .yf-cs .yf-cs-content p{color:var(--yf-cs-text);margin:0 auto 1.15em} .yf-cs .yf-cs-content a{color:var(--yf-cs-deep);text-decoration:underline;text-underline-offset:3px} .yf-cs .yf-cs-content ul, .yf-cs .yf-cs-content ol{color:var(--yf-cs-text);padding-inline-start:1.4em;margin:0 auto 1.2em} .yf-cs .yf-cs-content li{margin-bottom:.5em} .yf-cs .yf-cs-content ul li::marker{color:var(--yf-cs-deep)} .yf-cs .yf-cs-content img{border-radius:12px} .yf-cs .yf-cs-content figure{margin-inline:auto} .yf-cs .yf-cs-content blockquote{ background:var(--yf-cs-mute); border-inline-start:5px solid var(--yf-cs-brand); border-radius:0 12px 12px 0; padding:18px 22px;margin:1.6em auto; color:var(--yf-cs-ink);font-weight:500; } /* الجداول — دراسات الحالة مليئة بجداول الكلمات المفتاحية */ .yf-cs .yf-cs-content table{ width:100%;max-width:100%; border-collapse:collapse; font-size:15px; margin:1.6em auto; display:block;overflow-x:auto; } .yf-cs .yf-cs-content table th, .yf-cs .yf-cs-content table td{ border:1px solid var(--yf-cs-line); padding:10px 14px; text-align:start; color:var(--yf-cs-text); } .yf-cs .yf-cs-content table th{background:var(--yf-cs-ink);color:#fff;font-weight:700;white-space:nowrap} .yf-cs .yf-cs-content table tr:nth-child(even) td{background:var(--yf-cs-mute)} /* ------------------------------ الاقتباس ------------------------------ */ .yf-cs .yf-cs-quote-sec{background:var(--yf-cs-mute);padding-block:44px} .yf-cs .yf-cs-quote{margin:0;max-width:860px;margin-inline:auto;text-align:center} .yf-cs .yf-cs-quote blockquote{ margin:0;padding:0;border:0;background:none; color:var(--yf-cs-ink); font-size:clamp(19px,2.2vw,25px); font-weight:600;line-height:1.85; } .yf-cs .yf-cs-quote blockquote::before{ content:"”";display:block; color:var(--yf-cs-brand); font-size:64px;line-height:.6;margin-bottom:14px; } .yf-cs .yf-cs-quote figcaption{margin-top:18px;color:var(--yf-cs-soft);font-size:15px;font-weight:600} /* ------------------------------ الحث على الإجراء ------------------------------ */ .yf-cs .yf-cs-cta{background:var(--yf-cs-brand);padding-block:40px} .yf-cs .yf-cs-cta-inner{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap} .yf-cs .yf-cs-cta-title{color:var(--yf-cs-ink);font-size:clamp(22px,2.6vw,30px);font-weight:800;margin:0 0 6px} .yf-cs .yf-cs-cta-text{color:#4A3D0F;margin:0;font-size:17px} /* ------------------------------ ذات صلة ------------------------------ */ .yf-cs .yf-cs-related{background:var(--yf-cs-paper);padding-block:46px} .yf-cs .yf-cs-related-all{margin:26px 0 0;text-align:center} .yf-cs .yf-cs-related-all a{color:var(--yf-cs-deep);font-weight:700;text-decoration:none;border-bottom:2px solid var(--yf-cs-brand)} /* ------------------------------ التشخيص ------------------------------ */ .yf-cs .yf-cs-diag{width:100%;margin:26px 0;border-collapse:collapse;font-size:14px;background:#FFFBEA} .yf-cs .yf-cs-diag caption{text-align:start;font-weight:700;padding:8px 0;color:#8a6d00} .yf-cs .yf-cs-diag th,.yf-cs .yf-cs-diag td{border:1px solid #EBD98F;padding:8px 12px;text-align:start;color:#3a3a3a} .yf-cs .yf-cs-diag th{width:170px;background:#FFF3C4} /* ------------------------------ الاستجابة ------------------------------ */ @media (max-width:980px){ .yf-cs .yf-cs-hero-grid{grid-template-columns:1fr;gap:28px} .yf-cs .yf-cs-brief-grid{grid-template-columns:1fr;gap:26px} .yf-cs .yf-cs-kpis--4{grid-template-columns:repeat(2,1fr)} .yf-cs .yf-cs-kpis--3{grid-template-columns:repeat(3,1fr)} } @media (max-width:640px){ .yf-cs .yf-cs-hero{padding-block:28px 40px} .yf-cs .yf-cs-kpis{transform:translateY(-24px)} .yf-cs .yf-cs-kpis--2, .yf-cs .yf-cs-kpis--3, .yf-cs .yf-cs-kpis--4{grid-template-columns:1fr} .yf-cs .yf-cs-hero-meta li{min-width:calc(50% - 6px);flex:1 1 calc(50% - 6px)} .yf-cs .yf-cs-content{font-size:16.5px} .yf-cs .yf-cs-cta-inner{flex-direction:column;align-items:stretch;text-align:center} .yf-cs .yf-cs-btn{text-align:center} } @media (prefers-reduced-motion:reduce){ .yf-cs .yf-cs-btn,.yf-cs .yf-cs-card{transition:none} .yf-cs .yf-cs-btn:hover,.yf-cs .yf-cs-card:hover{transform:none} }