/* ========================================================================== Wadifa Pro — design system (custom, lean, RTL-aware). Goal: fast CWV + clean UX. ========================================================================== */ :root{ --brand:#16a34a; /* emerald green */ --brand-2:#0f7d3a; --brand-soft:#e9f8ef; --brand-ink:#0b3d22; --accent:#f59e0b; /* amber, used sparingly */ --ink:#0f172a; /* headings */ --body:#475569; /* text */ --muted:#8494a7; --line:#e6ebf1; --bg:#f7f9fb; --card:#ffffff; --ring:0 0 0 4px rgba(22,163,74,.15); --sh-sm:0 1px 2px rgba(15,23,42,.06),0 1px 3px rgba(15,23,42,.05); --sh:0 6px 20px rgba(15,23,42,.08); --sh-lg:0 18px 40px rgba(15,23,42,.12); --r:14px; --r-sm:10px; --r-lg:22px; --step:clamp(.9rem,.85rem + .3vw,1rem); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--bg);color:var(--body); font-family:"Segoe UI",system-ui,"Cairo","Tajawal",Tahoma,Arial,sans-serif; font-size:var(--step);line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; min-height:100vh;display:flex;flex-direction:column} .wf-main{flex:1 0 auto} .wf-footer{flex-shrink:0} /* reusable breadcrumb (visible nav paired with BreadcrumbList schema) */ .wf-crumb{max-width:1100px;margin:14px auto 0;padding:9px 14px;background:#f5f7f9;border:1px solid var(--line);border-radius:10px;font-size:.86rem;overflow-x:auto;white-space:nowrap;text-align:start!important} .wf-crumb ol{list-style:none;display:flex;flex-wrap:nowrap;gap:0;padding:0;margin:0} .wf-crumb li{display:inline-flex;align-items:center} .wf-crumb li+li::before{content:"›";padding:0 8px;color:#94a3b8} .wf-crumb a{color:var(--brand);text-decoration:none;font-weight:700} .wf-crumb a:hover{text-decoration:underline} .wf-crumb li[aria-current]{color:#64748b;font-weight:700} @media(max-width:600px){.wf-crumb{font-size:.8rem;padding:8px 10px;border-radius:8px}} h1,h2,h3,h4{color:var(--ink);line-height:1.25;margin:0;font-weight:800;letter-spacing:-.01em} p{margin:0 0 1rem} a{color:inherit;text-decoration:none} img{max-width:100%;height:auto;display:block} ul{margin:0;padding:0;list-style:none} :focus-visible{outline:none;box-shadow:var(--ring);border-radius:6px} .wf-container{width:min(1180px,92%);margin-inline:auto} .wf-section{padding:clamp(38px,6vw,72px) 0} .wf-eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:700;color:var(--brand-2); background:var(--brand-soft);padding:5px 12px;border-radius:999px} .wf-h2{font-size:clamp(1.5rem,1rem + 2.2vw,2.2rem)} .wf-lead{font-size:clamp(1rem,.95rem + .5vw,1.18rem);color:var(--body)} .wf-center{text-align:center} /* follow reading direction (right in AR, left in FR) — overrides theme's forced text-align:left */ .wf-cat,.wf-job,.wf-qa .a,.wf-card,.wf-cat h3,.wf-cat p,.wf-job h3,.wf-card h3,.wf-card p{text-align:start} /* RTL safety net: the theme bundle sets body{text-align:left}, which direction:rtl alone can't undo — Arabic pages then render left-aligned wherever a component doesn't override (e.g. the "المزيد" dropdown). Scoped to the AR document; FR ( without dir) keeps the theme default. */ html[dir="rtl"] body{text-align:right} .wf-headline{max-width:640px;margin-inline:auto;margin-bottom:clamp(24px,4vw,40px)} /* buttons */ .wf-btn{--_bg:var(--brand);--_fg:#fff;display:inline-flex;align-items:center;justify-content:center;gap:8px; font:inherit;font-weight:700;cursor:pointer;border:1px solid transparent;border-radius:var(--r-sm); padding:.72em 1.3em;background:var(--_bg);color:var(--_fg);transition:transform .12s,box-shadow .12s,background .12s;white-space:nowrap} .wf-btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(22,163,74,.28)} .wf-btn:active{transform:translateY(0)} .wf-btn--lg{padding:.85em 1.6em;font-size:1.05rem} .wf-btn--ghost{--_bg:#fff;--_fg:var(--brand-2);border-color:var(--brand)} .wf-btn--ghost:hover{--_bg:var(--brand-soft);box-shadow:none} .wf-btn--soft{--_bg:var(--brand-soft);--_fg:var(--brand-2)} .wf-btn--amber{--_bg:var(--accent);--_fg:#3b2600} /* card / chip */ .wf-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm)} .wf-chip{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line); border-radius:999px;padding:5px 12px;font-size:.82rem;font-weight:600;color:var(--body);box-shadow:var(--sh-sm)} .wf-chip b{color:var(--brand-2)} .wf-tag{display:inline-block;border:1px solid var(--line);border-radius:8px;padding:2px 9px;font-size:.82rem;margin:2px;color:var(--body)} .wf-tag--green{border-color:rgba(22,163,74,.3);color:var(--brand-2);font-weight:600;background:var(--brand-soft)} /* ===== Header ===== */ .wf-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line)} .wf-nav{display:flex;align-items:center;gap:14px;height:66px} .wf-brand{display:flex;align-items:center;gap:10px;font-weight:900;color:var(--ink);font-size:1.15rem} .wf-brand .logo{height:42px;width:auto;display:flex;align-items:center;background:none;box-shadow:none;border-radius:0} .wf-brand .logo img,.wf-brand .logo svg{height:42px;width:auto;display:block} .wf-brand small{display:block;font-size:.62rem;font-weight:600;color:var(--muted);letter-spacing:.02em} .wf-menu{display:flex;gap:4px;margin-inline-start:10px} .wf-menu a{padding:9px 14px;border-radius:10px;font-weight:600;font-size:.95rem;color:var(--body);white-space:nowrap} .wf-menu a:hover,.wf-menu a.is-active{background:var(--brand-soft);color:var(--brand-2)} .wf-nav-spacer{flex:1} .wf-icon-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border:1px solid var(--line); border-radius:10px;font-weight:700;font-size:.85rem;background:#fff} .wf-icon-btn:hover{border-color:var(--brand)} .wf-burger{display:none;flex-direction:column;gap:5px;padding:8px;cursor:pointer;background:none;border:none} .wf-burger span{width:22px;height:2px;background:var(--ink);border-radius:2px;transition:.2s} @media(max-width:992px){ .wf-menu{position:fixed;inset-block-start:66px;inset-inline:0;flex-direction:column;background:#fff; border-bottom:1px solid var(--line);padding:10px;gap:2px;transform:translateY(-120%);transition:transform .25s;box-shadow:var(--sh)} .wf-menu.open{transform:translateY(0)} .wf-menu a{padding:12px 14px} .wf-burger{display:flex} .wf-hide-sm{display:none} } /* ===== Hero ===== */ .wf-hero{position:relative;overflow:hidden; background: radial-gradient(60% 90% at 100% -10%,rgba(22,163,74,.12),transparent 60%), radial-gradient(50% 80% at 0% 0%,rgba(245,158,11,.10),transparent 55%), linear-gradient(180deg,#fff, var(--bg)); padding:clamp(34px,6vw,72px) 0 clamp(20px,3vw,40px)} .wf-hero h1{font-size:clamp(1.55rem,1.1rem + 2.2vw,2.5rem);text-align:center;max-width:min(820px,94%);margin-inline:auto;line-height:1.3;text-wrap:balance} .wf-hero .wf-lead{text-align:center;max-width:620px;margin:16px auto 0} .wf-hero-badges{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px} /* search */ .wf-search{margin-top:clamp(22px,4vw,34px);background:var(--card);border:1px solid var(--line); border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:clamp(14px,2.4vw,22px)} .wf-search-grid{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end} .wf-search-grid > .wf-field{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;justify-content:flex-end} .wf-search-grid > .wf-btn{flex:0 0 auto} .wf-field label{display:block;font-weight:700;color:var(--ink);font-size:.9rem;margin-bottom:7px;text-align:start} .wf-field .ctl{width:100%;height:52px;margin:0!important;border:1px solid var(--line);border-radius:var(--r-sm);padding:0 14px; font:inherit;color:var(--ink);background:#fff;text-align:start;transition:border-color .12s,box-shadow .12s} .wf-field .ctl:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)} /* make select2 (auto-applied to the diploma dropdown) match the 52px inputs */ .wf-field .select2-container{width:100%!important} .wf-field .select2-container--default .select2-selection--single{height:52px!important;border:1px solid var(--line)!important;border-radius:var(--r-sm)!important;background:#fff!important;display:flex;align-items:center} .wf-field .select2-container--default .select2-selection--single .select2-selection__rendered{line-height:1.4!important;color:var(--ink)!important;padding-inline:14px 30px!important;font:inherit;text-align:start} .wf-field .select2-container--default .select2-selection--single .select2-selection__arrow{height:50px!important;top:1px} .wf-field .select2-container--default.select2-container--focus .select2-selection--single, .wf-field .select2-container--default.select2-container--open .select2-selection--single{border-color:var(--brand)!important;box-shadow:var(--ring)} .wf-search .wf-btn{height:52px} .wf-orline{display:flex;align-items:center;gap:12px;margin:14px 2px 2px;color:var(--muted);font-size:.82rem} .wf-orline::before,.wf-orline::after{content:"";height:1px;background:var(--line);flex:1} @media(max-width:820px){.wf-search-grid{flex-direction:column}.wf-search-grid > *{width:100%;flex:1 1 auto}} /* stats */ .wf-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px} .wf-stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px;text-align:center;box-shadow:var(--sh-sm)} .wf-stat .n{font-size:clamp(1.5rem,1rem + 2vw,2.1rem);font-weight:900;color:var(--brand-2);line-height:1} .wf-stat .t{font-size:.86rem;margin-top:6px;color:var(--muted)} @media(max-width:560px){.wf-stats{grid-template-columns:1fr}} /* category grid */ .wf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px} .wf-cat{position:relative;display:flex;align-items:center;gap:14px;padding:18px;background:var(--card); border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm);transition:transform .16s,box-shadow .16s,border-color .16s} .wf-cat:hover{transform:translateY(-3px);box-shadow:var(--sh);border-color:var(--brand)} .wf-cat-lvl{display:inline-block;margin-top:7px;background:var(--brand-soft);color:var(--brand-2);border:1px solid rgba(22,163,74,.3);border-radius:999px;padding:2px 11px;font-size:.72rem;font-weight:800;letter-spacing:.02em} .wf-cat .ic{flex:none;width:46px;height:46px;border-radius:12px;background:var(--brand-soft);color:var(--brand-2); display:grid;place-items:center;font-size:1.3rem} .wf-cat h3{font-size:1rem} .wf-cat p{margin:2px 0 0;font-size:.8rem;color:var(--muted)} /* job preview cards */ .wf-jobs{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px} .wf-job{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px; box-shadow:var(--sh-sm);transition:transform .16s,box-shadow .16s,border-color .16s} .wf-job:hover{transform:translateY(-3px);box-shadow:var(--sh);border-color:var(--brand)} .wf-job h3{font-size:1.05rem;color:#e11d48;margin-bottom:10px} .wf-job .row{display:flex;gap:7px;align-items:flex-start;font-size:.9rem;margin-bottom:6px} .wf-job .row b{color:var(--brand-2);font-weight:600} .wf-job .foot{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px} /* faq */ .wf-faq{max-width:780px;margin-inline:auto;display:grid;gap:12px} .wf-qa{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .wf-qa summary{cursor:pointer;list-style:none;padding:16px 18px;font-weight:700;color:var(--ink); display:flex;justify-content:space-between;align-items:center;gap:12px} .wf-qa summary::-webkit-details-marker{display:none} .wf-qa summary::after{content:"+";color:var(--brand);font-weight:900;font-size:1.35rem;transition:transform .2s} .wf-qa[open] summary::after{transform:rotate(45deg)} .wf-qa .a{padding:0 18px 16px;color:var(--body)} /* ad slot */ .wf-ad{margin:clamp(22px,4vw,34px) auto;text-align:center;overflow:hidden;min-height:100px} .wf-ad small{display:block;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:#b8c2ce;margin-bottom:4px} /* ===== Footer ===== */ .wf-footer{background:#0c1424;color:#9fb0c3;margin-top:12px;border-top:3px solid var(--brand)} .wf-footer .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:28px;padding:44px 0 30px} .wf-footer .cols,.wf-footer .cols>div,.wf-footer h4,.wf-footer .brand-col p,.wf-footer .brand-col{text-align:start!important} .wf-footer h4{color:#fff;font-size:1rem;margin-bottom:14px} .wf-footer a{color:#c4d0dd;font-size:.92rem;display:block;padding:4px 0} .wf-footer .wf-brand{display:inline-flex} .wf-footer a:hover{color:#fff} .wf-footer .brand-col p{color:#8497b0;max-width:34ch;font-size:.92rem} .wf-footer .wf-follow{margin-top:12px;display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:8px 14px;color:#fff!important;font-weight:700;font-size:.85rem} .wf-footer .wf-follow:hover{background:var(--brand);border-color:var(--brand)} .wf-footer .wf-follow+.wf-follow{margin-inline-start:8px} .wf-footer .wf-follow-li:hover{background:#0A66C2;border-color:#0A66C2} .wf-footer .wf-copy{text-align:center;border-top:1px solid rgba(255,255,255,.08);padding:18px 0;color:#8497b0;font-size:.88rem} .wf-social{display:flex;gap:10px;margin-top:14px} .wf-social a{width:38px;height:38px;border-radius:10px;background:#16233b;display:grid;place-items:center} .wf-social a:hover{background:var(--brand)} .wf-copy{border-top:1px solid #16233b;padding:16px 0;text-align:center;font-size:.85rem;color:#7787} @media(max-width:1000px){.wf-footer .cols{grid-template-columns:repeat(3,1fr)}} @media(max-width:680px){.wf-footer .cols{grid-template-columns:1fr 1fr;gap:22px}} @media(max-width:460px){.wf-footer .cols{grid-template-columns:1fr;gap:20px}} /* site-wide engagement slide-in card (FB follow / bookmark) */ .wf-promo{position:fixed;bottom:20px;inset-inline-end:20px;z-index:9998;width:320px;max-width:calc(100vw - 32px);background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 50px rgba(15,23,42,.22);padding:18px;transform:translateY(26px);opacity:0;pointer-events:none;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .35s;text-align:start} .wf-promo.show{transform:translateY(0);opacity:1;pointer-events:auto} .wf-promo-x{position:absolute;top:10px;inset-inline-end:10px;width:28px;height:28px;border:none;background:#f1f5f9;border-radius:8px;color:#64748b;font-size:.95rem;cursor:pointer;display:grid;place-items:center;line-height:1} .wf-promo-x:hover{background:#e2e8f0;color:#0f172a} .wf-promo h4{margin:0 0 6px;font-size:1.02rem;color:#0f172a;padding-inline-end:28px} .wf-promo p{margin:0 0 14px;font-size:.88rem;color:var(--muted);line-height:1.55} .wf-promo-actions{display:flex;flex-direction:column;gap:9px} .wf-promo-fb{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:#1877F2;color:#fff!important;border:none;border-radius:10px;padding:11px 14px;font-weight:800;font-size:.92rem;text-decoration:none;transition:.15s} .wf-promo-fb:hover{background:#0f63d6} .wf-promo-bm{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--brand-soft);color:var(--brand-2)!important;border:1px solid rgba(22,163,74,.28);border-radius:10px;padding:10px 14px;font-weight:800;font-size:.88rem;text-decoration:none;cursor:pointer;transition:.15s} .wf-promo-bm:hover{background:#e3f6ea} @media(max-width:600px){.wf-promo{bottom:74px;inset-inline-end:12px;inset-inline-start:12px;width:auto}} .wf-reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease} .wf-reveal.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){.wf-reveal{opacity:1;transform:none;transition:none}} /* saved-concours deadline nudge — fixed OVERLAY (an in-flow banner that un-hides pushes the whole page down = CLS). Sits above the mobile anchor ad. */ .wf-due{display:flex;align-items:center;gap:10px;width:min(1100px,92%); position:fixed;inset-inline:0;bottom:16px;margin-inline:auto;z-index:55; background:linear-gradient(135deg,#fff7ed,#fffbf5);border:1px solid #fed7aa;border-radius:12px; padding:10px 14px;font-family:"Cairo","Tajawal",system-ui,"Segoe UI",Tahoma,sans-serif; box-shadow:0 10px 30px rgba(124,45,18,.18)} @media(max-width:768px){.wf-due{bottom:104px}} .wf-due[hidden]{display:none} .wf-due .wf-due-ic{font-size:1.1rem;flex:none} .wf-due .wf-due-txt{flex:1;min-width:0;color:#7c2d12;font-size:.86rem;font-weight:700;line-height:1.6;text-align:start} .wf-due .wf-due-txt strong{color:#9a3412;font-weight:800} .wf-due .wf-due-more{color:#9a6b4a;font-weight:700} .wf-due .wf-due-go{flex:none;background:#ea580c;color:#fff;border-radius:8px;padding:6px 14px; font-size:.8rem;font-weight:800;text-decoration:none;white-space:nowrap} .wf-due .wf-due-go:hover{background:#c2410c;color:#fff} .wf-due .wf-due-x{flex:none;background:none;border:none;color:#9a6b4a;font-size:.9rem; font-weight:800;cursor:pointer;padding:4px 6px;line-height:1} .wf-due .wf-due-x:hover{color:#7c2d12} @media(max-width:560px){.wf-due{flex-wrap:wrap;gap:8px}.wf-due .wf-due-txt{flex:1 1 100%;order:2} .wf-due .wf-due-ic{order:1}.wf-due .wf-due-x{order:1;margin-inline-start:auto} .wf-due .wf-due-go{order:3;width:100%;text-align:center}} /* competition stage badge (detail header + cards share these classes) */ .wf-badge{display:inline-block;border-radius:999px;padding:2px 11px;font-size:.72rem;font-weight:800;border:1px solid;white-space:nowrap} .wf-badge-avis{background:#e9f8ef;border-color:#a7e3c0;color:#0f7d3a} .wf-badge-conv{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8} .wf-badge-oral{background:#faf5ff;border-color:#e9d5ff;color:#7e22ce} .wf-badge-res{background:#fffbeb;border-color:#fde68a;color:#b45309} /* ---- nav "More" dropdown: keeps the navbar to ~6 core items; on mobile the items flow inline in the burger menu ---- */ .wf-more{position:relative} .wf-more-btn{padding:9px 14px;border-radius:10px;font-weight:600;font-size:.95rem;color:var(--body);background:none;border:none;cursor:pointer;white-space:nowrap;font-family:inherit} .wf-more-btn:hover{background:var(--brand-soft);color:var(--brand-2)} .wf-more-dd{display:none;position:absolute;top:calc(100% + 8px);inset-inline-end:0;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.14);padding:6px;min-width:230px;z-index:70;flex-direction:column} .wf-more.open .wf-more-dd{display:flex} .wf-more-dd a{display:block} @media(max-width:992px){.wf-more{display:contents}.wf-more-btn{display:none}.wf-more-dd{display:contents}}