/* ========================================================================= Golden Way — one stylesheet, Arabic (RTL) and English (LTR). Direction comes from . Everything uses CSS logical properties, so the two languages mirror themselves and nothing is duplicated. ========================================================================= */ :root { --navy: #0B4678; --navy-deep: #07213A; --navy-panel: #0A2740; --ink: #0A2740; --body: #3C4A57; --muted: #5C6B78; --faint: #93A0AB; --line: #E3E8EC; --line-input: #CBD4DC; --grey: #F4F6F8; --mint: #67BF9F; /* accent on white */ --mint-dark: #6FDCAA; /* accent on navy */ --green: #1F7A58; --error: #A8322B; --error-bg: #F6E6E3; --on-dark: #F4F8FB; --rule-dark: rgba(255,255,255,.18); --r-control: 12px; --r-card: 20px; --r-pill: 999px; --r-phone: 36px; --r-screen: 29px; /* spacing scale */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-14: 56px; --s-16: 64px; --pad: 20px; /* page gutter, mobile */ --pad-lg: 56px; /* page gutter, desktop */ --font-head: "Noto Naskh Arabic", Georgia, serif; --font-body: "IBM Plex Sans Arabic", system-ui, sans-serif; --font-num: "Lato", system-ui, sans-serif; --w-btn: 600; /* IBM Plex Sans Arabic has a true semibold */ } html[lang="en"] { --font-head: "Source Serif 4", Georgia, serif; --font-body: "Lato", system-ui, sans-serif; --w-btn: 700; /* Lato jumps 400 -> 700 */ } /* ------------------------------------------------------------------ base */ *, *::before, *::after { box-sizing: border-box; } /* a class-level display must never beat the hidden attribute */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: #fff; color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; /* Safety net only; the layout itself must not overflow. clip, not hidden, so the sticky header keeps working. */ overflow-x: clip; } html.menu-open, html.menu-open body { overflow: hidden; } /* Letter-spacing pulls Arabic letters apart and breaks their joins. */ :lang(ar) { letter-spacing: 0 !important; } h1, h2, h3, h4 { margin: 0; font-family: var(--font-head); font-weight: 700; color: var(--navy-deep); } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } img { max-width: 100%; } a { color: var(--navy); text-decoration: none; } a:hover { text-decoration: underline; } :focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; border-radius: 4px; } .sec--dark :focus-visible, .foot :focus-visible { outline-color: var(--mint-dark); } .skip { position: absolute; inset-inline-start: var(--pad); inset-block-start: -80px; z-index: 100; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 0 0 var(--r-control) var(--r-control); } .skip:focus { inset-block-start: 0; } /* Latin runs (numbers, e-mail, store names) inside Arabic text */ .num { font-family: var(--font-num); direction: ltr; unicode-bidi: isolate; } .wrap { max-width: 1440px; margin-inline: auto; padding-inline: var(--pad); } .vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .kicker { font-family: var(--font-num); font-size: 9.5px; letter-spacing: .2em; font-weight: 700; color: var(--faint); text-transform: uppercase; } /* Arabic labels: Arabic type, no capitals, no tracking */ html[lang="ar"] .kicker { font-family: var(--font-body); font-size: 12px; font-weight: 600; text-transform: none; } /* --------------------------------------------------------------- buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding-inline: 24px; border: 0; border-radius: var(--r-control); font-family: inherit; font-size: 16px; font-weight: var(--w-btn); line-height: 1.25; text-align: center; text-decoration: none; cursor: pointer; transition: background-color .15s ease, box-shadow .15s ease; } .btn:hover { text-decoration: none; } .btn[disabled] { opacity: .55; cursor: not-allowed; } .btn--primary { background: var(--navy); color: #fff; } .btn--primary:hover { background: #09395F; color: #fff; } .btn--outline { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--navy); } .btn--outline:hover { background: rgba(11,70,120,.05); color: var(--navy); } .btn--mint { background: var(--mint-dark); color: #062033; } .btn--mint:hover { background: #5FD3A0; color: #062033; } .btn--ghost-dark { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); } .btn--ghost-dark:hover { background: rgba(255,255,255,.08); color: #fff; } .btn--block { display: flex; width: 100%; } /* Secondary action: outlined button on desktop, text link with arrow on mobile */ .btn--alt .arrow { display: none; flex: none; } [dir="rtl"] .btn--alt .arrow { transform: scaleX(-1); } /* ---------------------------------------------------------- utility bar */ .ubar { display: none; background: var(--navy-deep); color: var(--on-dark); } .ubar__inner { max-width: 1440px; margin-inline: auto; display: flex; justify-content: flex-end; align-items: center; padding: 9px var(--pad-lg); font-size: 13px; } .ubar__lang { display: flex; align-items: center; gap: 7px; font-weight: var(--w-btn); } .ubar__lang a:hover { text-decoration: none; } .ubar__on { color: var(--mint-dark); } .ubar__sep { opacity: .35; } .ubar__off { opacity: .75; font-size: 11px; color: var(--on-dark); } html[lang="ar"] .ubar__off { font-family: var(--font-num); } /* the lone Arabic glyph on an English page is not worth a webfont download */ html[lang="en"] .ubar__off { font-family: "Segoe UI", Tahoma, "Arial", sans-serif; font-size: 12px; font-weight: 600; } /* --------------------------------------------------------------- header */ .hdr { position: sticky; top: 0; z-index: 40; background: #fff; border-block-end: 1px solid var(--line); } .hdr__inner { max-width: 1440px; margin-inline: auto; display: flex; align-items: center; gap: 12px; height: 64px; padding-inline: var(--pad); } .hdr__brand { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; } .hdr__brand:hover { text-decoration: none; } .hdr__mark { height: 34px; width: auto; flex: none; display: block; } .hdr__name { font-family: var(--font-head); font-size: 17px; font-weight: 700; color: var(--navy); line-height: 1.2; } .hdr__tag { display: none; } .hdr__nav { display: none; } .hdr__wa { display: none; } .hdr__cta { min-height: 44px; padding-inline: 16px; font-size: 13.5px; flex: none; } /* the visitor is already on the form */ .page-account .hdr__cta { display: none !important; } /* One box for both states; only the icon inside changes. */ .hdr__burger { width: 44px; height: 44px; flex: none; display: grid; place-items: center; padding: 0; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-control); cursor: pointer; } .hdr__burger svg { display: block; } .hdr__burger .i-close { display: none; } .hdr__burger[aria-expanded="true"] .i-menu { display: none; } .hdr__burger[aria-expanded="true"] .i-close { display: block; } /* ---------------------------------------------------------- mobile menu */ .menu { position: fixed; inset: 64px 0 0; z-index: 39; display: flex; flex-direction: column; padding: var(--s-2) var(--pad) 0; background: #fff; overflow-y: auto; overscroll-behavior: contain; } /* Plain rows with hairlines, not boxes that read as form fields. */ .menu__list { display: flex; flex-direction: column; } .menu__list li + li { border-block-start: 1px solid var(--line); } .menu__link { min-height: 56px; display: flex; align-items: center; font-size: 20px; font-weight: 500; color: var(--ink); } .menu__link:hover { text-decoration: none; color: var(--navy); } .menu__link[aria-current="page"] { font-weight: 700; color: var(--navy); } .menu__wa { margin-top: var(--s-6); padding: 18px 20px; background: var(--grey); border: 1px solid var(--line); border-radius: var(--r-card); } .menu__wa .kicker { display: block; margin-bottom: 8px; } .menu__wa-row { display: flex; align-items: center; gap: 12px; } .menu__wa-num { flex: 1; font-family: var(--font-num); font-size: 20px; font-weight: 700; color: var(--navy-deep); direction: ltr; text-align: start; } .menu__wa-btn { min-height: 44px; padding-inline: 16px; font-size: 14px; border-radius: var(--r-pill); flex: none; } .menu__langs { margin-top: auto; padding: var(--s-6) 0; display: flex; gap: var(--s-3); } .menu__lang { flex: 1; min-height: 50px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line-input); border-radius: var(--r-control); font-size: 16px; font-weight: var(--w-btn); color: var(--ink); } .menu__lang:hover { text-decoration: none; } .menu__lang--on { background: var(--navy-deep); border-color: var(--navy-deep); color: #fff; } html[lang="ar"] .menu__lang--other { font-family: var(--font-num); font-weight: 700; } html[lang="en"] .menu__lang--other { font-family: "Segoe UI", Tahoma, "Arial", sans-serif; font-weight: 600; } /* LTR number/email blocks hug the page's starting edge, not the LTR one */ html[lang="ar"] .menu__wa-num, html[lang="ar"] .wa-card__num, html[lang="ar"] .info__mail { text-align: right; } html[lang="en"] .menu__wa-num, html[lang="en"] .wa-card__num, html[lang="en"] .info__mail { text-align: left; } /* -------------------------------------------------------------- sections */ .sec { padding-block: var(--s-14); } .sec.sec--tight { padding-block: 0; } /* the privacy notice carries its own padding */ .sec--grey { background: var(--grey); border-block: 1px solid var(--line); } .sec--dark { position: relative; overflow: hidden; background: var(--navy-deep); color: var(--on-dark); } .sec--dark h1, .sec--dark h2, .sec--dark h3 { color: #fff; } .sec-head { padding-bottom: 7px; margin-bottom: var(--s-6); border-block-end: 2px solid var(--navy-deep); } .sec-head h2 { font-size: 21px; } .sec--dark .sec-head { border-block-end: 1px solid rgba(255,255,255,.25); } .eyebrow { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600; color: var(--muted); } .eyebrow::before { content: ""; flex: none; width: 30px; height: 2px; background: var(--mint); } html[lang="en"] .eyebrow { font-weight: 700; letter-spacing: .2em; text-transform: uppercase; } .sec--dark .eyebrow { color: var(--mint-dark); } .sec--dark .eyebrow::before { background: var(--mint-dark); } .lead { font-size: 15.5px; line-height: 1.8; color: var(--body); } /* Brand-mark pattern: a background layer, never above the content. The image keeps its own proportions (width set, height auto), sits in the corner on the page's inline-end side, and is clipped by the section's own box. */ .pattern { position: relative; isolation: isolate; } .pattern::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url("../img/logo-mark.png") no-repeat; background-size: var(--pat-w, 200px) auto; background-position: right var(--pat-x, -70px) top var(--pat-y, -30px); opacity: var(--pat-o, .045); } [dir="rtl"] .pattern::before { background-position: left var(--pat-x, -70px) top var(--pat-y, -30px); } .pattern > * { position: relative; z-index: 1; } .pattern--dark { --pat-o: .07; } .pattern--dark::before { background-image: url("../img/logo-mark-white.png"); } /* on the inline-start side instead */ .pattern--start::before { background-position: left var(--pat-x) top var(--pat-y); } [dir="rtl"] .pattern--start::before { background-position: right var(--pat-x) top var(--pat-y); } /* ------------------------------------------------------------------ hero */ .hero { position: relative; overflow: hidden; padding: var(--s-12) var(--pad) 0; } .hero--home { --pat-w: 200px; --pat-x: -70px; --pat-y: -24px; } .hero h1 { margin-top: 16px; font-size: 41px; line-height: 1.25; } .hero h1 .alt { color: var(--navy); } .hero__sub { margin-top: 20px; font-size: 16.5px; line-height: 1.8; color: var(--body); max-width: 330px; } .hero__btns { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-8); } .hero--compact { padding: var(--s-12) var(--pad) var(--s-8); --pat-w: 180px; --pat-x: -64px; --pat-y: -30px; } .hero--compact h1 { font-size: 29px; line-height: 1.5; } .hero--compact .hero__sub { margin-top: 12px; max-width: none; } .hero--ruled { border-block-end: 1px solid var(--line); } .hero--dark { background: var(--navy-deep); color: var(--on-dark); padding: var(--s-12) var(--pad) var(--s-14); --pat-w: 180px; --pat-x: -60px; --pat-y: -40px; } .hero--dark h1 { color: #fff; font-size: 31px; line-height: 1.5; margin-top: 14px; } .hero--dark .hero__sub { color: rgba(244,248,251,.8); font-size: 15.5px; max-width: 320px; } /* phone stage on the Arabic/English home hero: no panel, the phone stands on the hero's bottom rule over the hero's own watermark */ .hero--home { border-block-end: 1px solid var(--line); } /* The phone stands on the hero's bottom edge. Centred in normal flow. */ .stage { display: flex; justify-content: center; align-items: flex-start; /* the phone keeps its own height; the stage crops frame and screen together */ overflow: hidden; margin-top: var(--s-8); padding-top: var(--s-2); height: 360px; } /* One phone frame everywhere; the screenshot carries its own status bar. */ .phone { flex: none; width: clamp(220px, 62vw, 300px); padding: 8px; background: var(--navy-deep); border-radius: var(--r-phone); box-shadow: 0 14px 34px rgba(10,39,64,.24); } .phone__screen { overflow: hidden; border-radius: var(--r-screen); } .phone__screen img { display: block; width: 100%; height: auto; } .sec--dark .phone, .hero--dark .phone { background: var(--navy-panel); border: 1px solid rgba(255,255,255,.16); box-shadow: 0 18px 40px rgba(0,0,0,.45); } .phone-center { display: flex; justify-content: center; margin: var(--s-6) 0; } /* ------------------------------------------------------------------- why */ .why-head { padding-top: var(--s-12); } .why { padding: 0 var(--pad) var(--s-12); } .why__row { display: flex; gap: 14px; padding: 14px 0; border-block-end: 1px solid var(--line); } .why__row:first-child { padding-top: 0; } .why__row:last-child { padding-bottom: 0; border-block-end: 0; } .why__side { width: 66px; flex: none; text-align: center; border-inline-end: 2px solid var(--line); } .why__row--lead .why__side { border-inline-end-color: var(--mint); } .why__big { font-family: var(--font-head); font-size: 34px; line-height: 1; font-weight: 700; color: var(--navy); } .why__unit { font-size: 10px; color: var(--muted); margin-top: 4px; } .why__body h3 { font-size: 17px; margin-bottom: 4px; } .why__body p { font-size: 14.5px; line-height: 1.7; color: var(--body); } /* ------------------------------------------------- why invest in the EGX */ .egx__intro { margin-bottom: var(--s-6); } .egx__rows li { padding-block: var(--s-6); } .egx__rows li:first-child { padding-top: 0; } .egx__rows li + li { border-block-start: 1px solid var(--line); } .egx__rows h3 { font-size: 18px; line-height: 1.5; padding-inline-start: var(--s-3); border-inline-start: 2px solid var(--mint); /* same device as "Why Golden Way" */ } .egx__rows p { margin-top: var(--s-2); padding-inline-start: calc(var(--s-3) + 2px); font-size: 16px; line-height: 1.75; color: var(--body); } .egx__risk { margin-top: var(--s-2); padding-top: var(--s-4); border-block-start: 1px solid var(--line); font-size: 14px; line-height: 1.7; color: #3E5873; } /* ----------------------------------------------------------------- steps */ .steps { margin: 0; } .step { display: flex; align-items: baseline; gap: 12px; padding: 14px 0; border-block-end: 1px solid var(--line); font-size: 16px; font-weight: 500; } .step:last-child { padding-bottom: 4px; border-block-end: 0; } .step__n { width: 26px; flex: none; font-family: var(--font-head); font-size: 17px; font-weight: 700; color: var(--green); } /* ---------------------------------------------------------- app section */ .sec.app-sec { --pat-w: 170px; --pat-x: -56px; --pat-y: -40px; } .app-sec__head > .eyebrow { display: none; } .big-line { margin-top: 0; font-family: var(--font-head); font-size: 27px; line-height: 1.55; font-weight: 700; color: #fff; } .feats { font-size: 15.5px; line-height: 1.7; color: rgba(244,248,251,.85); } .feats li { display: flex; align-items: center; gap: 10px; padding: 13px 0; border-block-start: 1px solid var(--rule-dark); } .feats li:last-child { border-block-end: 1px solid var(--rule-dark); } .feats li::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--mint-dark); } .badges { display: flex; gap: 9px; margin-top: 20px; } .badge { flex: 1; min-height: 50px; display: flex; flex-direction: column; justify-content: center; padding-inline: 14px; border: 1px solid rgba(255,255,255,.35); border-radius: var(--r-control); color: #fff; } .badge:hover { text-decoration: none; background: rgba(255,255,255,.08); } .badge small { font-size: 9.5px; line-height: 1.4; color: rgba(244,248,251,.7); } .badge b { font-family: var(--font-num); font-size: 14px; font-weight: 700; line-height: 1.3; color: #fff; } /* ---------------------------------------------------- numbered features */ .nlist li { padding: 18px 0; border-block-end: 1px solid var(--line); } .nlist li:first-child { padding-top: 0; } .nlist li:last-child { padding-bottom: 0; border-block-end: 0; } .nlist h3 { font-size: 18px; margin-bottom: 5px; } .nlist p { font-size: 14.5px; line-height: 1.7; color: var(--body); } /* ------------------------------------------------------------------- faq */ .faq-mini dl { margin: 0; } .faq-mini__item { padding: 14px 0; border-block-end: 1px solid var(--line); } .faq-mini__item:first-child { padding-top: 0; } .faq-mini__item:last-of-type { padding-bottom: 16px; border-block-end: 0; } .faq-mini dt { font-size: 15.5px; font-weight: 600; color: var(--navy-deep); } .faq-mini dd { margin: 4px 0 0; font-size: 14px; line-height: 1.7; color: var(--muted); } .text-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 14.5px; font-weight: 600; color: var(--navy); text-decoration: underline; text-decoration-color: var(--mint); text-decoration-thickness: 2px; text-underline-offset: 6px; } .text-link:hover { text-decoration-color: var(--navy); } .faq-group { display: flex; flex-direction: column; gap: 10px; } .faq-item { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); } .faq-item[open] { background: var(--grey); } .sec--grey .faq-item[open] { background: #fff; } .faq-item summary { display: flex; align-items: center; gap: 10px; padding: 16px 18px; font-size: 15.5px; font-weight: 600; color: var(--navy-deep); cursor: pointer; list-style: none; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; margin-inline-start: auto; font-family: var(--font-num); font-size: 16px; color: var(--navy); } .faq-item[open] summary::after { content: "\2212"; } .faq-item__a { padding: 0 18px 16px; font-size: 14.5px; line-height: 1.75; color: var(--body); } .faq-item__a p + p { margin-top: 10px; } /* ------------------------------------------------------------------ form */ .field { margin-bottom: 14px; } .field:first-child { margin-top: 0; } .lbl { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 6px; } .req { color: var(--error); } .opt { color: var(--faint); } .inp { width: 100%; min-height: 48px; padding: 0 14px; background: #fff; border: 1px solid var(--line-input); border-radius: var(--r-control); font-family: var(--font-body); font-size: 16px; color: var(--ink); } .inp:hover { border-color: #B6C2CD; } textarea.inp { min-height: 112px; padding: 12px 14px; line-height: 1.6; resize: vertical; } select.inp { appearance: none; padding-inline-end: 38px; } .inp[aria-invalid="true"] { border: 1.5px solid var(--error); background: var(--error-bg); } /* Latin-only fields: phone and e-mail read left-to-right in both languages */ .field--ltr .inp { font-family: var(--font-num); direction: ltr; text-align: start; } .select-wrap { position: relative; } .select-wrap::after { content: "\25BE"; position: absolute; inset-inline-end: 14px; top: 50%; transform: translateY(-50%); font-family: var(--font-num); color: var(--navy); pointer-events: none; } .err { display: flex; gap: 6px; align-items: flex-start; margin: 7px 0 0; font-size: 13px; line-height: 1.55; color: var(--error); } .err:empty { display: none; } .err::before { content: "!"; flex: none; font-family: var(--font-num); font-weight: 700; } .consent { display: flex; gap: 11px; align-items: flex-start; margin-top: 20px; font-size: 13.5px; line-height: 1.65; color: var(--body); } .consent input { width: 22px; height: 22px; flex: none; margin: 0; accent-color: var(--navy); } .consent a { border-block-end: 1px solid var(--mint); } .hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .form-status { margin: 12px 0 0; font-size: 14px; color: var(--muted); } .form-status--err { color: var(--error); } .form-note { margin: 12px 0 0; font-size: 13px; line-height: 1.6; color: var(--muted); } .form-note a { display: inline-block; font-weight: 700; } .form-lead { margin: 6px 0 18px; } .cta-head { font-size: 23px; } .cta-lead { margin: 6px 0 18px; } .docs-head { font-size: 18px; margin: 8px 0; } .value-head { font-size: 18px; margin-bottom: 6px; } .value-body { font-size: 15px; line-height: 1.75; color: var(--body); } .story { max-width: 760px; } .story p { font-size: 15.5px; line-height: 1.85; color: var(--body); } .story p + p { margin-top: 14px; } .faq-group + .faq-group { margin-top: var(--s-6); } #form-wa-fallback, #contact-wa-fallback { margin-block-start: 12px; } .form-submit { margin-top: 20px; min-height: 54px; font-size: 16.5px; } .aside-card { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 16px; background: var(--grey); border: 1px solid var(--line); border-radius: var(--r-card); } .sec--grey .aside-card { background: #fff; } .aside-card p { flex: 1; font-size: 14px; line-height: 1.6; color: var(--body); } .aside-card .btn { flex: none; min-height: 44px; padding-inline: 16px; font-size: 14px; border-radius: var(--r-pill); white-space: nowrap; } /* thank-you state */ .thanks { padding-block: 8px; } .thanks__tick { width: 46px; height: 46px; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--mint); border-radius: var(--r-pill); color: var(--green); } .thanks h2 { font-size: 28px; line-height: 1.5; } .thanks p { margin-top: 14px; font-size: 16px; line-height: 1.75; color: var(--body); } .thanks__prep { margin-top: 24px; padding: 18px; background: var(--grey); border: 1px solid var(--line); border-radius: var(--r-card); } .sec--grey .thanks__prep { background: #fff; } .thanks__prep .kicker { display: block; margin-bottom: 8px; } .thanks__prep strong { font-size: 16px; font-weight: 600; color: var(--navy-deep); } .thanks__btns { display: flex; flex-direction: column; gap: var(--s-3); margin-top: 26px; } /* ----------------------------------------------------------------- cards */ .cards { display: flex; flex-direction: column; gap: 18px; } .card { padding: 22px 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: 0 1px 2px rgba(10,39,64,.06); } .card .kicker { display: block; margin-bottom: 10px; } .card h3 { font-size: 20px; margin-bottom: 8px; } .card p { font-size: 15.5px; line-height: 1.75; color: var(--body); } .card .btn { margin-top: 18px; min-height: 48px; font-size: 15.5px; } .doc-row { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 14px; border-block-start: 1px solid var(--line); } .doc-row p { font-size: 15px; line-height: 1.6; color: var(--body); } .doc-card { width: 52px; height: 34px; flex: none; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--line-input); border-radius: 8px; } .doc-card span { width: 30px; height: 2px; background: var(--line); box-shadow: 0 6px 0 var(--line), 0 -6px 0 var(--line); } /* --------------------------------------------------------------- contact */ .wa-card { padding: 22px; background: var(--navy-deep); border-radius: var(--r-card); color: var(--on-dark); } .wa-card__label { margin-bottom: 10px; font-size: 11.5px; font-weight: 600; color: var(--mint-dark); } .wa-card__num { font-family: var(--font-num); font-size: 27px; font-weight: 700; color: #fff; direction: ltr; text-align: start; } .wa-card p { margin: 10px 0 18px; font-size: 14.5px; line-height: 1.75; color: rgba(244,248,251,.8); } .wa-card .btn { min-height: 50px; } .info-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; } .info { padding: 18px; border: 1px solid var(--line); border-radius: var(--r-card); } .info .kicker { display: block; margin-bottom: 8px; } .info strong { display: block; font-size: 15.5px; font-weight: 600; color: var(--navy-deep); } .info span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.6; color: var(--muted); } .info__mail { font-family: var(--font-num); font-size: 15.5px; font-weight: 700; color: var(--navy-deep); direction: ltr; text-align: start; word-break: break-all; } .info__mail:hover { color: var(--navy); } .info__map { margin-top: 12px; min-height: 44px; padding-inline: 18px; font-size: 14px; } /* ------------------------------------------------------------ legal page */ .legal { max-width: 760px; padding-block: 28px; } .legal h1 { font-size: 30px; line-height: 1.4; } .legal h2 { font-size: 20px; margin-top: 28px; padding-bottom: 7px; border-block-end: 2px solid var(--navy-deep); } .legal p, .legal li { font-size: 15.5px; line-height: 1.85; color: var(--body); } .legal p { margin-top: 14px; } .legal ul { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; } .legal li { position: relative; padding-inline-start: 18px; } .legal li::before { content: ""; position: absolute; inset-inline-start: 0; top: .72em; width: 5px; height: 5px; border-radius: 50%; background: var(--mint); } .legal .updated { margin-top: 8px; font-size: 13.5px; color: var(--muted); } .tbd { background: #FFF3C4; color: #6B4E00; padding: 1px 7px; border: 1px dashed #D9B400; border-radius: 5px; font-size: .93em; font-weight: 600; } /* ---------------------------------------------------------------- footer */ .foot { background: var(--navy-deep); color: rgba(244,248,251,.82); } .foot__inner { max-width: 1440px; margin-inline: auto; padding: var(--s-8) var(--pad) var(--s-6); } .foot a { color: rgba(244,248,251,.85); } .foot__brand { display: flex; align-items: center; gap: 10px; padding-bottom: 16px; border-block-end: 1px solid var(--rule-dark); } .foot__mark { height: 30px; width: auto; flex: none; filter: brightness(0) invert(1); opacity: .9; } .foot__name { font-family: var(--font-head); font-size: 15px; font-weight: 700; color: #fff; line-height: 1.2; } .foot__tag { margin-top: 2px; font-size: 9.5px; color: rgba(244,248,251,.6); } .foot__nav { display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 16px 0; font-size: 13.5px; } .foot__contact { padding: 12px 0 16px; border-block-start: 1px solid var(--rule-dark); font-size: 13.5px; line-height: 2; } .foot__contact .num { display: inline-block; } .foot__risk { padding-top: 14px; border-block-start: 1px solid var(--rule-dark); font-family: var(--font-head); font-size: 11.5px; line-height: 1.9; color: rgba(244,248,251,.62); } .foot__legal { display: inline-block; margin-top: 12px; font-size: 12px; color: rgba(244,248,251,.6); text-decoration: underline; } /* --------------------------------------------------------- cookie notice */ .cookie { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 36; padding: 14px var(--pad); background: var(--navy-deep); color: var(--on-dark); box-shadow: 0 -6px 24px rgba(0,0,0,.28); } .cookie__inner { max-width: 1440px; margin-inline: auto; display: flex; flex-direction: column; gap: 12px; font-size: 13.5px; line-height: 1.7; } .cookie a { color: var(--mint-dark); } .cookie .btn { min-height: 44px; font-size: 15px; } /* ========================================================================= Desktop ========================================================================= */ @media (min-width: 900px) { .wrap { padding-inline: var(--pad-lg); } .ubar { display: block; } .cookie__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; } .cookie .btn { flex: none; } /* -------------------------------------------------------------- header */ .hdr__inner { height: auto; gap: 28px; padding: 18px var(--pad-lg); } .hdr__brand { flex: none; } .hdr__mark { height: 44px; } .hdr__names { line-height: 1.2; } .hdr__name { font-size: 20px; } html[lang="en"] .hdr__name { font-size: 19px; } .hdr__tag { display: block; margin-top: 2px; font-size: 10.5px; line-height: 1.2; color: var(--muted); } html[lang="en"] .hdr__tag { letter-spacing: .06em; text-transform: uppercase; } .hdr__burger { display: none; } .menu { display: none !important; } .hdr__nav { flex: 1; display: flex; gap: 26px; font-size: 15px; margin-inline-start: 24px; } .hdr__nav a { color: var(--ink); padding-bottom: 3px; } .hdr__nav a:hover { color: var(--navy); text-decoration: none; } .hdr__nav a[aria-current="page"] { font-weight: var(--w-btn); color: var(--navy); border-block-end: 2px solid var(--mint); } .hdr__wa { display: inline-flex; min-height: 46px; padding-inline: 22px; font-size: 15px; flex: none; } .hdr__cta { min-height: 46px; padding-inline: 26px; font-size: 15px; } /* ---------------------------------------------------------------- hero */ .hero { padding: 92px var(--pad-lg) 76px; border-block-end: 1px solid var(--line); } .hero--home, .hero--compact { --pat-w: 660px; --pat-x: -160px; --pat-y: -110px; } .hero__inner { position: relative; z-index: 1; max-width: 720px; } .hero .eyebrow { font-size: 13px; } .hero .eyebrow::before { width: 40px; } html[lang="en"] .hero .eyebrow { font-size: 11.5px; } .hero h1 { margin-top: 22px; font-size: 60px; line-height: 1.4; } html[lang="en"] .hero h1 { font-size: 58px; line-height: 1.25; } .hero__sub { margin-top: 26px; font-size: 21px; line-height: 1.75; max-width: 620px; } html[lang="en"] .hero__sub { font-family: var(--font-head); line-height: 1.7; } .hero__btns { flex-direction: row; gap: 12px; margin-top: 36px; } .hero__btns .btn { min-height: 58px; padding-inline: 36px; font-size: 17px; } .hero__btns .btn--outline { padding-inline: 32px; } /* home hero: copy beside a phone panel that sits on the hero's bottom rule, the desktop echo of the mobile stage */ .hero--home { padding-bottom: 0; } .hero--home .hero__inner { max-width: 1328px; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 64px; } .hero--home .hero__copy { max-width: 720px; align-self: center; padding-bottom: 76px; } .hero--home .stage { align-self: end; margin-top: 0; padding-top: 44px; height: 540px; } .hero--home .stage .phone { width: 290px; padding: 9px; box-shadow: 0 22px 50px rgba(10,39,64,.26); } .hero--compact { padding: 70px var(--pad-lg) 56px; } .hero--compact h1 { font-size: 46px; line-height: 1.35; } .hero--compact .hero__sub { font-size: 19px; max-width: 640px; } html[lang="en"] .hero--compact .hero__sub { font-family: var(--font-body); } /* the app page hero keeps its phone, beside the copy */ .hero--dark { padding: 80px var(--pad-lg); --pat-w: 460px; --pat-x: -120px; --pat-y: -120px; } .hero--dark .hero__inner { display: grid; grid-template-columns: 1fr auto; gap: 0 64px; max-width: 1328px; margin-inline: auto; } .hero--dark .hero__head { grid-area: 1 / 1 / 2 / 2; align-self: end; } .hero--dark .hero__rest { grid-area: 2 / 1 / 3 / 2; align-self: start; } .hero--dark .phone-center { grid-area: 1 / 2 / 3 / 3; align-self: center; } .hero--dark h1 { font-size: 44px; line-height: 1.45; margin-top: 16px; } html[lang="en"] .hero--dark h1 { line-height: 1.3; } .hero--dark .hero__sub { font-size: 17.5px; max-width: 520px; } html[lang="en"] .hero--dark .hero__sub { font-family: var(--font-body); } .hero--dark .phone-center { display: block; margin: 0; } .hero--dark .phone-center .phone { width: 262px; padding: 9px; box-shadow: 0 26px 60px rgba(0,0,0,.5); } .hero--dark .badges { max-width: 520px; } /* ----------------------------------------------------------------- why */ .why-head { display: none; } .why { padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-block-end: 1px solid var(--line); } .why__row { display: block; padding: 40px 36px 36px; border-block-end: 0; border-inline-end: 1px solid var(--line); } .why__row:first-child { padding-top: 40px; } .why__row:last-child { padding-bottom: 36px; border-inline-end: 0; } .why__side { width: 34px; text-align: start; border-inline-end: 0; border-block-end: 2px solid var(--line); padding-bottom: 14px; margin-bottom: 14px; } .why__row--lead .why__side { border-block-end-color: var(--mint); } .why__big { font-size: 48px; } .why__unit { display: none; } .why__body h3 { font-size: 21px; margin-bottom: 8px; } .why__body p { font-size: 15px; line-height: 1.75; } html[lang="en"] .why__body p { line-height: 1.7; } /* ----------------------------------------------- why invest in the EGX */ .egx__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: var(--s-16); } .egx__head .sec-head { margin-bottom: var(--s-6); } .egx__intro { margin-bottom: 0; } .egx__rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-12); } .egx__rows li, .egx__rows li:first-child { padding: 0 0 var(--s-8); } .egx__rows li + li { border-block-start: 0; } .egx__rows li:nth-child(n+3) { padding-top: var(--s-8); border-block-start: 1px solid var(--line); } .egx__rows h3 { font-size: 20px; } .egx__risk { grid-column: 1 / -1; margin-top: var(--s-6); } /* --------------------------------------------------- steps beside cards */ .split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; } .split > * { padding: 70px var(--pad-lg); } .split .sec-head { padding-bottom: 9px; } .split .sec-head h2 { font-size: 34px; } .split .step { padding: 18px 0; font-size: 19px; font-weight: 400; color: var(--navy-deep); } .split .step:last-child { padding-bottom: 0; } .split .step__n { width: 28px; font-size: 20px; } html[lang="en"] .split .step__n { width: 24px; } .split .btn { margin-top: 32px; min-height: 56px; padding-inline: 34px; font-size: 17px; } .split .sec-head { margin-bottom: 0; } .split .card { padding: 26px 28px; } .split .card h3 { font-size: 22px; } .split .card p { font-size: 16px; line-height: 1.75; } html[lang="en"] .split .card p { line-height: 1.7; } .split .card .kicker { font-size: 10.5px; letter-spacing: .22em; } /* ---------------------------------------------------------- app section */ .sec.app-sec { padding: 80px var(--pad-lg); --pat-w: 460px; --pat-x: -120px; --pat-y: -120px; } .app-sec__head > .eyebrow { display: flex; } .app-sec .sec-head { display: none; } .app-sec__grid { display: grid; grid-template-columns: 1fr auto; gap: 0 64px; max-width: 1328px; margin-inline: auto; } /* copy sits as one centred block beside a phone that spans both rows */ .app-sec__head { grid-area: 1 / 1 / 2 / 2; align-self: end; } .app-sec__rest { grid-area: 2 / 1 / 3 / 2; align-self: start; } .app-sec .phone-center { grid-area: 1 / 2 / 3 / 3; align-self: center; } .app-sec .eyebrow { font-size: 13px; } .app-sec .eyebrow::before { width: 34px; } html[lang="en"] .app-sec .eyebrow { font-size: 11.5px; } .app-sec .big-line { font-size: 44px; line-height: 1.45; margin-top: 16px; } html[lang="en"] .app-sec .big-line { line-height: 1.3; } .app-sec .feats { margin-top: 30px; font-size: 17.5px; max-width: 520px; } .app-sec .feats li { padding: 15px 0; border-block-start-color: rgba(255,255,255,.2); } .app-sec .feats li:last-child { border-block-end-color: rgba(255,255,255,.2); } .app-sec .feats li::before { width: 6px; height: 6px; } .app-sec .badges { margin-top: 30px; gap: 12px; } .app-sec .badge { flex: none; min-height: 52px; padding-inline: 20px; } .app-sec .badge small { font-size: 10px; } .app-sec .badge b { font-size: 15px; } .app-sec .phone-center { margin: 0; } .app-sec .phone-center .phone { width: 262px; padding: 9px; box-shadow: 0 26px 60px rgba(0,0,0,.5); } /* ------------------------------------------------------------ sections */ .sec { padding-block: 70px; } .sec-head h2 { font-size: 32px; } .sec-head { margin-bottom: 0; } .sec-head + .steps { margin-top: 6px; } .sec-head + .faq-group { margin-top: 14px; } .sec-head + .values { margin-top: 4px; } .sec-head + .story { margin-top: 18px; } .sec-head + .nlist { margin-top: 0; } .faq-mini__item:first-child { padding-top: 14px; } .nlist li:first-child { padding-top: 22px; } .sec.story-sec { padding-block: 48px 28px; } .sec.list-sec { padding-block: 28px 0; } .sec.contact-sec { padding-block: 48px 22px; } .text-link { min-height: 0; } .lead { font-size: 18px; } .nlist { padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 44px; } .nlist li { padding: 22px 0; border-block-end: 1px solid var(--line); } .nlist li:last-child { padding-bottom: 22px; } .nlist h3 { font-size: 20px; } .nlist p { font-size: 15.5px; } .faq-mini dl { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 32px; } .faq-mini__item { border-block-end: 0; } .faq-mini__item:last-of-type { padding-bottom: 14px; } .cards--3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; } .info-list { margin-top: 0; } .form-wide { max-width: 640px; } .legal { padding-block: 70px; } .legal h1 { font-size: 42px; } .legal h2 { font-size: 24px; margin-top: 40px; } .thanks h2 { font-size: 38px; } .thanks__btns { flex-direction: row; } .thanks__btns .btn { min-height: 56px; padding-inline: 32px; } /* -------------------------------------------------------------- footer */ .foot__inner { padding: 30px var(--pad-lg) 26px; } .foot__brand { gap: 28px; padding-bottom: 18px; } .foot__mark { height: 32px; } .foot__names { flex: 1; line-height: 1.3; } .foot__name { font-size: 16px; } .foot__tag { font-size: 11px; } .foot__brand .foot__nav { flex-wrap: nowrap; gap: 22px; padding: 0; } .foot__contact { display: flex; gap: 36px; padding: 16px 0; line-height: 1.7; } .foot__risk { font-size: 12px; line-height: 1.8; max-width: 900px; } } /* the awkward middle: nav and display type need to shrink before 1150 */ @media (min-width: 900px) and (max-width: 1150px) { .hdr__inner { gap: 16px; } .hdr__nav { gap: 18px; font-size: 14px; margin-inline-start: 12px; } .hero h1, html[lang="en"] .hero h1 { font-size: 46px; } .hero--home h1, html[lang="en"] .hero--home h1 { font-size: 40px; } .hero--home .hero__inner { grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; } .hero--home .stage { height: 460px; } .hero--home .stage { padding-top: 36px; } .hero--home .stage .phone { width: 236px; } .app-sec .big-line, html[lang="en"] .app-sec .big-line, .hero--dark h1, html[lang="en"] .hero--dark h1 { font-size: 34px; } .split .sec-head h2 { font-size: 28px; } .why__row { padding: 32px 24px 28px; } .why__big { font-size: 42px; } .why__body h3 { font-size: 19px; } } /* ========================================================================= Mobile and small tablet: everything below the 900px desktop layout. Nothing in here can reach the desktop layout. ========================================================================= */ @media (max-width: 899px) { /* long Arabic lines must be able to wrap inside flex and grid children */ .split > *, .app-sec__grid > *, .contact-grid > *, .hero__inner > *, .egx__grid > *, .why__row > *, .step > *, .menu__wa-row > *, .aside-card > * { min-width: 0; } /* 2. steps: one column, the page gutter, steps, full-width button, then documents */ .split__main { padding: var(--s-14) var(--pad) 0; } .split__aside { padding: var(--s-6) var(--pad) var(--s-14); } .split .btn { display: flex; width: 100%; margin-top: var(--s-6); } .card--support { display: none; } /* numbered side column only where there is a number in it */ .why__side:empty { display: none; } /* 9. secondary action becomes a text link under the primary */ .btn--alt { align-self: center; min-height: 44px; padding-inline: var(--s-2); background: none; box-shadow: none; } .btn--alt:hover { background: none; text-decoration: underline; } .btn--alt .arrow { display: block; } .thanks__btns .btn--alt { order: 2; } /* tap targets: footer links are at least 44px tall */ .foot__nav { gap: 0 var(--s-6); padding-block: var(--s-3); } .foot__nav a, .foot__legal { display: inline-flex; align-items: center; min-height: 44px; } .foot__contact a { display: inline-flex; align-items: center; min-height: 44px; } .foot__contact { line-height: 1.5; } .contact-grid { display: flex; flex-direction: column; gap: var(--s-3); } .legal { padding-block: var(--s-14); } /* more tap targets */ .hdr__brand { min-height: 44px; } .consent label { min-height: 44px; } .foot__nav a { min-width: 44px; justify-content: center; } .wa-card__num, .info__mail { display: flex; align-items: center; min-height: 44px; } html[lang="ar"] .wa-card__num, html[lang="ar"] .info__mail { justify-content: flex-end; } .info-list { margin-top: 0; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: .001ms !important; transition-duration: .001ms !important; } }