/* ─── TOKENS ─────────────────────────────────────────── */ :root { --blue: #005AA2; --navy: #00304F; --blue-dk: #004174; --blm: #487293; --bll: #D1EBFF; --yellow: #FFD500; --ydk: #E6C000; --white: #ffffff; --paper: #f8f7f4; --ink: #1a1a1a; --muted: #5c5c5c; --rule: #d9d4c7; --radius: 3px; --font: 'Cairo', 'Segoe UI', sans-serif; --serif: 'Tajawal', Georgia, serif; --shadow: 0 2px 16px rgba(0,90,162,.1); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* overflow-x on guards against mobile horizontal-scroll on EVERY page: pages redefine (for their bg) and some drop body{overflow-x}, but none override html's overflow — so this single rule clips the whole site. */ html { scroll-behavior: smooth; overflow-x: hidden; } body { font-family: var(--font); font-size: 16px; color: var(--ink); background: #fff; line-height: 1.7; overflow-x: hidden; /* ← added to prevent horizontal scroll on mobile */ } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } /* ─── SITE-REFRESH ANNOUNCEMENT BAR ─────────────────── Launch announcement for the redesign. Brand yellow with dark-blue text, the same pairing the reference identity uses for its secondary CTA, so it stands apart from the blue lang-bar directly beneath it. Hidden until site.js decides this visitor has not dismissed it, which also avoids a flash before that check runs. */ .site-announce { background: var(--yellow); color: var(--blue-dk); } .site-announce[hidden] { display: none; } .site-announce-inner { max-width: 1200px; margin: 0 auto; padding: 7px 15px; display: flex; align-items: center; justify-content: center; gap: 12px; position: relative; } .site-announce-text { font-size: 13.5px; font-weight: 700; text-align: center; line-height: 1.5; } .site-announce-close { position: absolute; inset-inline-end: 10px; background: none; border: none; color: var(--blue-dk); font-size: 20px; line-height: 1; cursor: pointer; opacity: .55; padding: 0 6px; transition: opacity .2s; } .site-announce-close:hover { opacity: 1; } @media (max-width: 600px) { .site-announce-text { font-size: 12px; } .site-announce-inner { padding-inline-end: 32px; } } /* ─── LANG SWITCHER BAR ──────────────────────────────── */ .lang-bar { background: var(--blue-dk); padding: 6px 0; font-size: 13px; } .lang-bar-inner { max-width: 1200px; margin: 0 auto; padding: 0 15px; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .lang-bar-text { color: rgba(255,255,255,.6); } .lang-switcher { display: flex; gap: 4px; } .lang-btn { background: none; border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.7); padding: 3px 12px; border-radius: 3px; font-size: 12px; font-family: var(--font); cursor: pointer; transition: all .2s; } .lang-btn:hover, .lang-btn.active { background: var(--yellow); color: var(--navy); border-color: var(--yellow); font-weight: 700; } /* ─── ALERT BANNER ───────────────────────────────────── */ .alert-banner { background: var(--yellow); color: var(--navy); padding: 10px 24px; display: flex; align-items: center; justify-content: center; gap: 16px; font-size: 14px; font-weight: 600; position: relative; } .alert-banner a { color: var(--blue); border-bottom: 1.5px solid var(--blue); font-weight: 700; transition: opacity .2s; } .alert-banner a:hover { opacity: .7; } .alert-close { position: absolute; inset-inline-start: 20px; background: none; border: none; color: var(--navy); font-size: 18px; cursor: pointer; opacity: .6; transition: opacity .2s; } .alert-close:hover { opacity: 1; } /* ── HEADER (white, blue text, yellow accent) ── The bar used to be dark navy; the brand refresh puts the menu on white to match the reference identity, so everything that sat on it (nav links, ghost CTA, logo ring, burger) is repainted below. The only dark strip left on top is .lang-bar. */ header { background: var(--white); border-bottom: 3px solid var(--yellow); position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 14px rgba(0,65,116,0.10); } .header-inner { max-width: 1200px; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; height: 80px; } .logo { display: flex; align-items: center; flex-shrink: 0; } .logo-img { width: 63px; height: 63px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(0,65,116,0.15); transition: transform 0.3s, border-color 0.3s; flex-shrink: 0; } .logo:hover .logo-img { transform: rotate(-5deg) scale(1.08); border-color: var(--yellow); } nav { display: flex; align-items: center; gap: 10px; } .nav-link { padding: 10px 18px; font-size: 14px; font-weight: 600; color: var(--blue-dk); border-radius: 30px; transition: all 0.25s; position: relative; } .nav-link::after { content: ''; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background: var(--yellow); border-radius: 2px; transition: width 0.3s; } .nav-link:hover { color: var(--blue); background: var(--bll); } .nav-link:hover::after, .nav-link.active::after { width: 70%; } .nav-link.active { color: var(--blue); font-weight: 700; } .header-btns { display: flex; gap: 10px; flex-shrink: 0; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 26px; border-radius: 40px; font-size: 14px; font-weight: 700; font-family: var(--font); cursor: pointer; border: 2px solid transparent; transition: all 0.25s; white-space: nowrap; } .btn-outline { border-color: rgba(255,255,255,0.5); color: #fff; background: transparent; } .btn-outline:hover { border-color: var(--yellow); color: var(--yellow); background: rgba(255,213,0,0.1); } .btn-yellow { background: var(--yellow); color: var(--navy); border-color: var(--yellow); } .btn-yellow:hover { background: #fff; border-color: #fff; color: var(--navy); } /* ── Dropdown menus ── */ .nav-item { position: relative; } .nav-link { padding: 10px 18px; font-size: 14px; font-weight: 600; color: var(--blue-dk); border-radius: 30px; transition: all 0.25s; cursor: pointer; white-space: nowrap; } .nav-link:hover { color: var(--blue); background: var(--bll); } .nav-link.active { background: var(--bll); color: var(--blue); font-weight: 700; } .dropdown { position: absolute; top: 100%; inset-inline-start: 0; min-width: 220px; background: #fff; border-radius: 3px; box-shadow: 0 12px 36px rgba(0,0,0,0.18); padding: 12px 0; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.25s, transform 0.25s, visibility 0.25s; z-index: 200; list-style: none; text-align: start; } .nav-item:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown li a { display: block; padding: 10px 20px; font-size: 13px; font-weight: 600; color: var(--ink); transition: background 0.2s, color 0.2s; white-space: nowrap; } .dropdown li a:hover { background: var(--bll); color: var(--blue); } @media(max-width: 860px) { .nav-item .dropdown { position: static; background: transparent; box-shadow: none; padding: 0; opacity: 1; visibility: visible; transform: none; display: none; } .nav-item.open .dropdown { display: block; } .dropdown li a { color: #fff; padding: 10px 28px; } .dropdown li a:hover { background: rgba(255,255,255,0.1); color: var(--yellow); } } .breadcrumb-bar { background: var(--navy); border-bottom: 1px solid var(--rule); padding: 10px 0; } .breadcrumb { max-width: 1100px; margin: 0 auto; padding: 0 28px; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); } .breadcrumb a { color: rgba(255,255,255,.5); transition: color .2s; } .breadcrumb a:hover { color: var(--blue); } .breadcrumb-sep { opacity: .4; } .breadcrumb-current { color: var(--ink); font-weight: 700; } /* ─── CONTAINER / SECTION ────────────────────────────── */ .container { max-width: 1200px; margin: 0 auto; padding: 0 32px; } .section { padding: 72px 0; } .section-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 40px; } .section-title { font-size: 26px; font-weight: 900; color: var(--ink); position: relative; padding-bottom: 12px; } .section-title::after { content: ''; position: absolute; bottom: 0; inset-inline-start: 0; /* underline bar follows reading side (right in AR, left in FR) */ width: 50px; height: 3px; background: var(--yellow); border-radius: 2px; } .link-arrow { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--blue); border-bottom: 2px solid transparent; transition: border-color .2s; padding-bottom: 2px; } .link-arrow:hover { border-color: var(--blue); } /* ─── FOOTER ─────────────────────────────────────────── */ footer { background: var(--blue-dk); color: rgba(255,255,255,.85); } .footer-top { padding: 56px 0 48px; border-bottom: 1px solid rgba(255,255,255,.1); } .footer-grid { display: grid; grid-template-columns: 2fr 1.5fr 1.5fr; gap: 48px; } .footer-col-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; color: var(--yellow); margin-bottom: 18px; } .footer-logo-area { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .footer-logo-img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; } .footer-org-name { font-size: 16px; font-weight: 900; color: #fff; } .footer-org-sub { font-size: 12px; color: rgba(255,255,255,.5); } .footer-desc { font-size: 14px; color: rgba(255,255,255,.65); line-height: 1.7; margin-bottom: 20px; } /* Footer contact block (CMS-managed contact_info) */ .footer-contact { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 9px; } .footer-contact li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: rgba(255,255,255,.7); line-height: 1.5; } .footer-contact a { color: rgba(255,255,255,.7); transition: color .2s; } .footer-contact a:hover { color: var(--yellow); } .footer-contact-ic { flex-shrink: 0; opacity: .7; font-size: 13px; margin-top: 1px; } .footer-contact-sep { opacity: .4; margin: 0 6px; } .newsletter-form { display: flex; gap: 8px; } .newsletter-input { flex: 1; padding: 10px 16px; border-radius: var(--radius); border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.07); color: #fff; font-size: 14px; font-family: var(--font); outline: none; direction: inherit; /* follow the page language (RTL in AR, LTR in FR) instead of forcing RTL */ } .newsletter-input::placeholder { color: rgba(255,255,255,.35); } .newsletter-input:focus { border-color: var(--yellow); } .footer-nav-list { list-style: none; display: flex; flex-direction: column; gap: 10px; } .footer-nav-list a { font-size: 14px; color: rgba(255,255,255,.65); transition: color .2s; } .footer-nav-list a:hover { color: var(--yellow); } .social-links { display: flex; gap: 10px; margin-top: 8px; } .social-link { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: rgba(255,255,255,.7); transition: all .2s; } .social-link:hover { background: var(--yellow); color: var(--navy); border-color: var(--yellow); } .footer-bottom { padding: 22px 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .footer-legal { font-size: 12px; color: rgba(255,255,255,.4); } .footer-legal-links { display: flex; gap: 20px; } .footer-legal-links a { font-size: 12px; color: rgba(255,255,255,.4); transition: color .2s; } .footer-legal-links a:hover { color: var(--yellow); } /* ─── RESPONSIVE NOTE ────────────────────────────────── */ @media (max-width: 900px) { /* Chrome-only responsive rules live in site.css; home-content collapses (.hero-inner, .cards-grid, .stats-grid, …) moved to home.css so they load after the base grid definitions and actually win on mobile. */ .footer-grid { grid-template-columns: 1fr; } } /* ── MOBILE MENU ── */ .mob-btn{display:none;background:none;border:none;cursor:pointer;padding:8px;flex-direction:column;gap:5px} .mob-btn span{display:block;width:22px;height:2px;background:var(--blue-dk);border-radius:1px;transition:all .25s} .mob-nav{position:fixed;inset:0;top:0px;background:var(--blue-dk);z-index:500;display:flex;flex-direction:column;padding:16px 0;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);overflow-y:auto} /* .mob-nav{position:fixed;inset:0;top:78px;background:var(--blue-dk);z-index:500;display:flex;flex-direction:column;padding:16px 0;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);overflow-y:auto} */ .mob-nav.open{transform:translateX(0)} .mob-nav a{display:block;padding:16px 24px;font-size:15px;font-weight:700;color:rgba(255,255,255,.82);border-bottom:1px solid rgba(255,255,255,.07);transition:background .2s,color .2s} .mob-nav a:hover,.mob-nav a.active{background:rgba(0,90,162,.4);color:var(--yellow)} @media(max-width:860px){nav{display:none}.mob-btn{display:flex}.header-btns .btn-outline{display:none}} @media(max-width:580px){ .footer-grid{grid-template-columns:1fr; gap:28px} .footer-bottom{flex-direction:column;align-items:flex-start;gap:10px} .section{padding:48px 0} } /* ── EXTRA MOBILE TWEAKS for very small screens ── */ @media(max-width:480px){ .footer-grid{grid-template-columns:1fr; gap:24px} .footer-top{padding:32px 0} .footer-legal-links{flex-wrap:wrap; gap:8px} .container{padding:0 12px} .header-inner{padding:0 12px} .section-title{font-size:22px} .section{padding:32px 0} .btn{padding:10px 18px; font-size:13px} } /* ── BTN ALIASES (site system) ── */ .btn-ghost{border-color:var(--blue);color:var(--blue);background:transparent} .btn-ghost:hover{border-color:var(--blue);color:var(--white);background:var(--blue)} .btn-y{background:var(--yellow);color:var(--navy);border-color:var(--yellow)} /* The header is white now, so the old hover (white fill + white border) made this button vanish into the bar. Fill with brand blue instead — same inversion idea, and it matches .btn-ghost:hover so both header CTAs behave alike. */ .btn-y:hover{background:var(--blue);border-color:var(--blue);color:#fff} /* ─── Mobile nav: backdrop, close button, scroll-lock (added) ─────────── Ensures the burger drawer is always dismissable and sits above the page. */ #mobBackdrop{position:fixed;inset:0;background:rgba(0,48,79,.45);z-index:490;opacity:0;visibility:hidden;transition:opacity .3s ease;} #mobBackdrop.open{opacity:1;visibility:visible;} .mob-nav{z-index:500;} /* ✕ sits in the drawer's flow as the first item so it stays at the top and never overlaps the first nav link; aligned to the inline-end corner. */ #mobCloseBtn{align-self:flex-end;flex:0 0 auto;background:none;border:none;color:#fff;font-size:34px;line-height:1;cursor:pointer;padding:8px 22px 14px;margin:0;} body.nav-open{overflow:hidden;} /* ─── Bilingual direction fixes (added) ───────────────────────────────── Keep content logical so the French (LTR) version mirrors correctly from the same rules instead of staying stuck in RTL. */ input, textarea { text-align: start; } /* placeholders follow reading direction (fixes .newsletter-input in FR) */ .stat-item, .stat-item:last-child { border-inline-start: none; } /* ─── Mobile nav sub-links (accordion) so the drawer matches desktop dropdowns ── */ .mob-nav .mob-group{border-bottom:1px solid rgba(255,255,255,.07);} .mob-nav .mob-group summary{list-style:none;cursor:pointer;padding:16px 24px;font-size:15px;font-weight:700;color:rgba(255,255,255,.82);display:flex;align-items:center;justify-content:space-between;} .mob-nav .mob-group summary::-webkit-details-marker{display:none;} .mob-nav .mob-group summary::after{content:'⌄';font-size:18px;line-height:1;transition:transform .2s;} .mob-nav .mob-group[open] summary::after{transform:rotate(180deg);} .mob-nav .mob-group a{padding-block:12px;padding-inline:44px 24px;font-size:14px;font-weight:600;color:rgba(255,255,255,.6);border-bottom:none;} .mob-nav .mob-group a:hover{color:var(--yellow);background:rgba(255,255,255,.06);} /* ─── Direction-aware "more" arrow: points right in FR (LTR), left in AR (RTL). The literal glyph is stripped from content so this pseudo is the single source. */ .link-arrow::after{content:'→';margin-inline-start:6px;display:inline-block;} [dir="rtl"] .link-arrow::after{content:'←';} /* ─── Shared "back to top" button (rendered once in the layout, appears on every marketing page). Logical inset-inline-end so it sits in the reading-end corner in both RTL (AR) and LTR (FR). site.js toggles .visible past 300px of scroll. */ .back-to-top{position:fixed;bottom:26px;inset-inline-end:26px;width:48px;height:48px;border-radius:50%; background:var(--blue);color:#fff;border:none;display:flex;align-items:center;justify-content:center; font-size:22px;line-height:1;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(12px); transition:opacity .3s,visibility .3s,transform .3s,background .2s;z-index:300; box-shadow:0 6px 18px rgba(0,0,0,.22);} .back-to-top.visible{opacity:.92;visibility:visible;transform:translateY(0);} .back-to-top:hover{opacity:1;background:var(--navy);transform:translateY(-3px);} @media(max-width:480px){.back-to-top{width:42px;height:42px;font-size:19px;bottom:18px;inset-inline-end:18px;}}