/* ============== Namespaced layout/theme ============== */ .ngo-landing{ --ngo-max:1080px; --ngo-radius:16px; --ngo-gap:20px; /* Brand & palette */ --brand:#174A41; /* Network Sapphire */ --brand-hover:#2E7D6B; /* Darker on hover */ /* Text system (greyish, per brand) */ --ngo-fg:#334155; /* slate-700 body text */ --ngo-sub:#64748b; /* slate-500 secondary */ --heading:#334155; /* headings */ --link:var(--brand); --link-hover:var(--brand-hover); /* Surfaces */ --ngo-bg:#ffffff; --ngo-soft:#f3f4f6; --ngo-border:#e5e7eb; --ngo-dark:#0b1220; --ngo-mid:#3f4858; --ngo-ink:#ffffff; --ngo-shadow:0 10px 30px rgba(0,0,0,.07); /* Accents for icons in lists (kept) */ --merchant-accent:#0ea5e9; --dev-accent:#6366f1; color:var(--ngo-fg); } @media (prefers-color-scheme:dark){ .ngo-landing{ --ngo-bg:#0b0f14; --ngo-fg:#e5e7eb; --ngo-sub:#9aa3ad; --ngo-soft:#0f1620; --ngo-border:#1f2937; --ngo-dark:#1f2937; --ngo-mid:#2e3a4d; --ngo-ink:#fff; --ngo-shadow:0 14px 40px rgba(0,0,0,.45); --heading:#e5e7eb; --link:#77b7e6; --link-hover:#99c9ee; } } /* Global anchors now use brand blue */ .ngo-landing a{ color:var(--link); text-decoration:none } .ngo-landing a:hover{ color:var(--link-hover); text-decoration:underline } /* Topbar */ .ngo-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;max-width:var(--ngo-max);margin:0 auto} .ngo-topbar__left{display:flex;align-items:center;gap:28px} .ngo-logo{font-weight:800;letter-spacing:.2px;color:var(--heading)} .ngo-nav{display:flex;gap:16px;flex-wrap:wrap} .ngo-nav__link{opacity:.95} /* keep crisp with brand color now applied */ /* Country switcher */ .ngo-switcher{position:relative} .ngo-switcher__btn{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--ngo-border);background:var(--ngo-bg);border-radius:12px;cursor:pointer;line-height:1;box-shadow:var(--ngo-shadow)} .ngo-switcher__btn:focus{outline:2px solid #93c5fd;outline-offset:2px} .ngo-caret{width:18px;height:18px;opacity:.6} .ngo-flag-svg{display:inline-flex;width:18px;height:18px;border-radius:3px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.06)} .ngo-switcher__menu{position:absolute;right:0;top:calc(100% + 8px);min-width:180px;background:var(--ngo-bg);border:1px solid var(--ngo-border);border-radius:12px;padding:6px;list-style:none;margin:0;display:none;box-shadow:var(--ngo-shadow);z-index:30} .ngo-switcher[data-open="true"] .ngo-switcher__menu{display:block} .ngo-switcher__item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px} .ngo-switcher__item:hover{background:var(--ngo-soft);text-decoration:none} /* Wrapper keeps hero & grid centered to same width */ .ngo-wrap{max-width:var(--ngo-max);margin:0 auto;padding:0 20px} /* Hero */ .ngo-hero{padding:28px 0 6px;text-align:center} .ngo-hero__title { font-size: clamp(28px,4vw,44px); line-height: 1.15; margin: 0 0 10px; color: rgb(0,110,174); /* Network brand blue */ } .ngo-hero__subtitle{color:var(--ngo-sub);margin:0 auto;max-width:760px} /* Two-column cards */ .ngo-panels{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--ngo-gap);margin:16px 0 44px} .ngo-card{background:var(--ngo-bg);border:1px solid var(--ngo-border);border-radius:var(--ngo-radius);padding:22px;box-shadow:var(--ngo-shadow)} .ngo-card__media{height:200px;border-radius:10px;margin-bottom:16px;background:linear-gradient(135deg,rgba(31,41,55,.06),rgba(31,41,55,.02));overflow:hidden} .ngo-card__media img{width:100%;height:100%;object-fit:cover;display:block} .ngo-card__title { font-size: 24px; margin: 0 0 14px; color: #E12F57; } /* In-card chips (CTAs) */ .ngo-card__cta{display:flex;justify-content:center;margin-bottom:12px} .ngo-chip{ display:inline-flex;align-items:center;justify-content:center; padding:10px 18px;border-radius:999px;border:0; background:var(--brand);color:#fff;font-weight:600;box-shadow:var(--ngo-shadow) } .ngo-chip:hover{filter:brightness(0.95);transform:translateY(-1px)} .ngo-chip:active{transform:none} .ngo-chip:focus{outline:2px solid #93c5fd;outline-offset:3px} /* Icon bullets */ .ngo-list{margin:0 0 16px;padding:0;list-style:none;display:grid;gap:10px} .ngo-list li{position:relative;padding-left:36px;transition:.2s} .ngo-list li::before{content:"";position:absolute;left:0;top:.15em;width:22px;height:22px;border-radius:8px;background:var(--ngo-soft);box-shadow:inset 0 0 0 1px var(--ngo-border),0 2px 6px rgba(0,0,0,.04);transition:.2s} .ngo-list li::after{content:"";position:absolute;left:5px;top:calc(.15em + 5px);width:12px;height:12px;background:currentColor;-webkit-mask:var(--ico) no-repeat center/contain;mask:var(--ico) no-repeat center/contain;transition:.2s} .ngo-list li:hover::before{background:currentColor;box-shadow:0 0 8px currentColor,inset 0 0 0 1px rgba(255,255,255,.3)} .ngo-list li:hover::after{background:#fff} .list-merchant li{color:var(--merchant-accent)} .list-dev li{color:var(--dev-accent)} /* Icon sprites */ .ico-rocket { --ico:url("data:image/svg+xml;utf8,"); } .ico-plug { --ico:url("data:image/svg+xml;utf8,"); } .ico-link { --ico:url("data:image/svg+xml;utf8,"); } .ico-flask { --ico:url("data:image/svg+xml;utf8,"); } .ico-refresh{ --ico:url("data:image/svg+xml;utf8,"); } .ico-code { --ico:url("data:image/svg+xml;utf8,"); } .ico-lock { --ico:url("data:image/svg+xml;utf8,"); } .ico-mobile { --ico:url("data:image/svg+xml;utf8,"); } .ico-shield { --ico:url("data:image/svg+xml;utf8,"); } .ico-box { --ico:url("data:image/svg+xml;utf8,"); } .ngo-card__link{font-weight:600} /* Footer */ .ngo-footer{max-width:var(--ngo-max);margin:40px auto 20px;padding:20px;text-align:center} .ngo-social{display:flex;justify-content:center;gap:16px} .social-btn{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--ngo-soft);color:var(--ngo-fg);transition:.2s;box-shadow:var(--ngo-shadow)} .social-btn:hover{background:var(--brand);color:#fff;transform:translateY(-2px)} .social-btn svg{width:22px;height:22px} /* Responsive */ @media (max-width:860px){ .ngo-panels{grid-template-columns:1fr} .ngo-topbar{flex-wrap:wrap} .ngo-nav{display:none} } /* Anchor scroll spacing (if ever used) */ #merchants,#developers{scroll-margin-top:24px} @font-face { font-family: 'Montserrat-Light'; src: url('https://www.network.ae/public/frontend/fonts/montserrat-light-webfont.woff2') format('woff2'), url('https://www.network.ae/public/frontend/fonts/montserrat-light-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Gotham-Light'; src: url('https://www.network.ae/public/frontend/fonts/Gotham-Light.eot?#iefix') format('embedded-opentype'), url('https://www.network.ae/public/frontend/fonts/Gotham-Light.otf') format('opentype'), url('https://www.network.ae/public/frontend/fonts/Gotham-Light.woff') format('woff'), url('https://www.network.ae/public/frontend/fonts/Gotham-Light.ttf') format('truetype'), url('https://www.network.ae/public/frontend/fonts/Gotham-Light.svg#Gotham-Light') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Gotham-Bold'; src: url('https://www.network.ae/public/frontend/fonts/Gotham-Bold.eot?#iefix') format('embedded-opentype'), url('https://www.network.ae/public/frontend//fonts/Gotham-Bold.woff') format('woff'), url('https://www.network.ae/public/frontend/fonts/Gotham-Bold.ttf') format('truetype'), url('https://www.network.ae/public/frontend//Gotham-Bold.svg#Gotham-Bold') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Gotham-Medium'; src: url('https://www.network.ae/public/frontend/fonts/Gotham-Medium.woff') format('woff'), url('https://www.network.ae/public/frontend/fonts/Gotham-Medium.ttf') format('truetype'), url('https://www.network.ae/public/frontend/fonts/Gotham-Medium.svg#Gotham-Medium') format('svg'); font-weight: normal; font-style: normal; } body { font-family: "Gotham-Medium", "proxima nova","open sans","sans-serif" !important; color: #002e5d !important; } .hosted-flow { max-width: 520px; margin: 0 auto; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-align: center; } .hosted-flow h3 { margin-bottom: 24px; font-size: 24px; } .flow-step { border: 1px solid #d0d7de; border-radius: 12px; padding: 16px 20px; margin: 0 auto; text-align: center; box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06); } .flow-title { font-weight: 600; margin-bottom: 6px; } .flow-body { font-size: 14px; color: #4b5563; line-height: 1.4; } .flow-arrow { font-size: 22px; margin: 8px 0 12px; color: #9ca3af; } .flow-step.optional .flow-title { font-style: italic; } .flow-caption { margin-top: 16px; font-size: 13px; color: #6b7280; } .doc-link {text-decoration: underline} p,li, {color: #002e5d !important} h2 {color: #ff585d!important} nav#hub-sidebar ul a {color: #053060} #hub-landing-page .hub-landing-category-columns .row .col-sm-4 ul li a {color: #002e5d} .red {color:#e25253} #hub-landing-top p, #hub-landing-top h2 {color:#fff!important} #header-nav-right li a{color:#002e5d;font-weight:bold;} #header-nav-right li a:hover{color:#ff585d;font-weight:bold;} .lumosity-light header#hub-header #header-top #header-nav-left li a, .lumosity-light header#hub-header #header-top #header-nav-right li a { color: #002e5d;font-weight:bold;font-size:16px; } .lumosity-light header#hub-header #header-top #header-nav-left li a:hover, .lumosity-light header#hub-header #header-top #header-nav-right li a:hover { color: #ff585d;font-weight:bold;font-size:16px; } .lumosity-light nav#hub-sidebar ul a.active { color: #053060; } nav#hub-sidebar ul a.active { background-color: #edf0f5; } nav#hub-sidebar h3 { color:#ff585d; } section#hub-content header h1, section#hub-content header h2 {color:#003266; font-weight:bold;} .magic-block-html h3{color:#003266;} .magic-block-html ul li {line-height:30px;} h3.main_color{color:#ff585d !important;} #hub-landing-html .img-fluid { max-width: 100%; height: auto; } #hub-landing-html img { vertical-align: middle; border-style: none; } #hub-landing-top, .hub-landing-html {padding:0;max-width: 100%;} #hub-landing-page .hub-landing-category-columns .row .col-sm-4 ul li a { color: #002e5d; } .ngenius-wrapper { background: #ff585d; } .ngenius-wrapper .container { width: 100%; padding-right: 0px; padding-left: 0px; margin-right: auto; margin-left: auto; } .ngenius-wrapper .content { padding: 20px 20px; background: rgba(0, 45, 92, 0%) !important; } .ngenius-wrapper .content h3 { font-size: 30px; line-height: 2px; color: #fff; padding: 20px 0; text-transform: uppercase; } .ngenius-wrapper .content p, .ngenius-slider p { font-size: 16px; line-height: 22px; color: #fff; } .img-ico { padding-top: 20px; max-width: 25%; height: 25%; } #hub-landing-page .hub-landing-category-columns .row .col-sm-4 { text-align: left; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 15px; margin:0px; } #newboxaz h3 { color:#ff585d; font-size: 24px; text-align: left; padding:20px 0; } #hub-landing-page .hub-landing-category-columns .row .col-sm-4 ul li a:hover { color: #ff585d; text-decoration: underline; } a.text-muted:hover { color: #ff585d; text-decoration: underline; } .footer-bottom { padding-top: 20px; padding-bottom: 20px; background: #002D5C; } .container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } .row { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; } .row .col-md-4{ flex-basis: 25%; max-width: 25%; } .col-md-9x { -webkit-box-flex: 0; -ms-flex: 0 0 90%; flex: 0 0 90%; max-width: 90%; } .footer-bottom a, .footer-bottom p { color: #fff; margin: 0; font-size:14px; } .footer-bottom li, .footer-bottom p, .footer-bottom ul, .footer-nav ul, .gridder-close { display: inline-block; } .footer-bottom p { color: #fff; } .footer-nav { line-height: 20px; margin-left: 20px; } .footer-nav li { position: relative; padding: 0 15px 0 0; clear: both; } #bp { color:#fff !important;} header#hub-header #header-top { padding: 2px 0px; } #header-top > .hub-container{ width: 100%; max-width: 100%; } #header-top > .hub-container .clearfix{ max-width: 1150px !important; margin: auto; position: relative; } header#hub-header #header-top #header-logo { width: 200px; height: 72px; } header#hub-header #header-top .clearfix { height: 70px; } @media (max-width: 1025px){ #hub-header #hub-subheader-parent { top: 80px!important; } body.hub-is-home #hub-header #hub-subheader-parent { top: 0px!important; } header#hub-header #header-top { padding: 5px 15px 2px; } body.hub-is-home header#hub-header #header-top { padding: 5px 0px 2px; } body.hub-is-home header#hub-header #header-top #header-logo { margin: 12px 15px 0 15px; } header#hub-header #header-top #header-logo { margin: 12px 15px 0 0px; } #content-head .row.clearfix .col-xs-3 { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; padding: 0; } .magic-block-html .row{ margin-right: 0; margin-left: 0; } .magic-block-html .row .column .container { width: 90%; float: left; } .magic-block-html .row .column { width: 40%; margin: 0 0 25px 0; } .magic-block-html .magic-block-html{ margin-left: 0!important; } .magic-block-html .magic-block-html .magic-block-textarea p{ padding: 0px; } header#hub-header #header-top .clearfix { height: 80px; } .content-body .magic-block-textarea p, .content-body .magic-block-api-header p, .content-body .magic-block-textarea ul, .content-body .magic-block-api-header ul, .content-body .magic-block-textarea ol, .content-body .magic-block-api-header ol, .content-body .magic-block-textarea h1, .content-body .magic-block-api-header h1, .content-body .magic-block-textarea h2, .content-body .magic-block-api-header h2, .content-body .magic-block-textarea h3, .content-body .magic-block-api-header h3, .content-body .magic-block-textarea h4, .content-body .magic-block-api-header h4, .content-body .magic-block-textarea h5, .content-body .magic-block-api-header h5, .content-body .magic-block-textarea h6, .content-body .magic-block-api-header h6{ padding-left: 15px; padding-right: 15px; } .content-body .magic-block-html { margin-left: 15px; } .magic-block-textarea p { padding: 0px 15px; } .magic-block-html .magic-block-textarea p{ padding-left: 0; padding-right: 0; } .magic-block-html .column img{ width: auto!important; max-width: 100%; } .magic-block-html .nextSteps { padding: 30px 15px 30px 0; } section#hub-content header { margin-left: 15px; } } header#hub-header #header-top .clearfix nav{ text-align: right; } header#hub-header #header-top .clearfix nav li{ position: relative; padding: 0 25px 10px 0; } header#hub-header #header-top .clearfix nav li:after{ background-image: url("https://files.readme.io/80dc7bc-Coral-nav-sprite-new.png"); background-repeat: no-repeat; background-position: -8px 0; position: absolute; content: ""; width: 8px; height: 13px; right: 9px; top: 14px; } header#hub-header #header-top .clearfix nav li:hover:after{ background-position: 0px 0px; } header#hub-header #header-top #header-nav-right li:last-child{ padding-right: 0px; } header#hub-header #header-top #header-nav-right li:last-child:after{ display: none; } .lumosity-light header#hub-header #header-top #header-nav-left li a, .lumosity-light header#hub-header #header-top #header-nav-right li a { color: #002e5d; font-weight: normal; font-size: 14px; text-transform: uppercase; position: relative; } .lumosity-light header#hub-header #header-top #header-nav-left li a:hover, .lumosity-light header#hub-header #header-top #header-nav-right li a:hover { font-weight: normal; font-size: 14px; text-transform: uppercase; background-color: transparent; } header #header-top #header-nav-right li a:before { content: ''; position: absolute; left: 0px; bottom: -12px; height: 5px; width: 100%; background-color: #ffffff; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; } header #header-top #header-nav-right li:hover a:before { background-color: #ff585d; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; } @media (max-width: 991px){ #hub-landing-page .hub-landing-category-columns .row .col-sm-4 { text-align: left; margin-bottom: -100px!important; } } @media (max-width: 767px){ #hub-landing-page .hub-landing-category-columns .row .col-sm-4 { text-align: left; margin-bottom: 20px !important; border-bottom: 1px solid #eaeaea; height: 420px!important; } } .hub-landing-category-columns.center hr{ display: none; } .footer-nav { margin-left: 0; } .content-body .magic-block-textarea h1, .content-body .magic-block-api-header h1{color:#003266} .ReadMeUI[is="AlgoliaSearch"] { --project-color-primary: #023365; } section#hub-content header .excerpt p { color: #002e5d !important; } .theme-line header#hub-header #header-top { padding: 0px 0px !important; border-bottom: 0 !important; background-color: #fff; } @media (min-width: 1200px){ body { --header-logo-height: 50px; font-family: Gotham-Medium,"proxima nova","open sans",sans-serif!important; } .undefined.container { max-width: 100% !important; padding-right: 0; padding-left: 0; } .undefined.container .ngenius-wrapper .content h3 { font-size: 36px; } .undefined.container .ngenius-slider p, .undefined.container .ngenius-wrapper .content p { font-size: 19px; } .App ._107d029b3bebd406216db135365c5346-scss { width: 1200px; } ._107d029b3bebd406216db135365c5346-scss .hub-landing-category-columns .row .col-sm-4 { text-align: left; box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%); border-radius: 15px; margin: 0; padding-right: 20px; padding-left: 20px; font-size: larger; } ._107d029b3bebd406216db135365c5346-scss .hub-landing-category-columns .row { padding-bottom: 40px; } ._107d029b3bebd406216db135365c5346-scss .hub-landing-category-columns .row .col-sm-4 ul li a { color: #002e5d; } ._107d029b3bebd406216db135365c5346-scss .hub-landing-category-columns .row .col-sm-4 ul li a:hover { color: #ff585d; text-decoration: underline; } .field-description, .markdown-body { font-family: Gotham-Medium,"proxima nova","open sans",sans-serif!important; } } /****************************************************** * NETWORK HEADER PROMO — FULL CSS (MERGED UAE BUILD) ******************************************************/ .rm-Header .nwk-app-promo { --nwk-gap: 14px; --nwk-border: var(--Header-border-color, rgba(0,0,0,.1)); margin-left: var(--nwk-gap); } .rm-Header .nwk-app-promo__inner { display: inline-flex; align-items: center; gap: var(--nwk-gap); padding-left: var(--nwk-gap); border-left: 1px solid var(--nwk-border); } .rm-Header .nwk-app-promo__title { font-size: 13px; font-weight: 600; color: #0169B2 !important; margin-bottom: 6px; white-space: nowrap; } .rm-Header .nwk-badge img { display: block; height: 44px !important; width: auto !important; } .rm-Header .nwk-badge--google img { height: 44px !important; width: auto !important; } .rm-Header .nwk-app-promo__stores { display: inline-flex; align-items: center; gap: 10px; } .rm-Header .nwk-app-promo__qr img { width: 84px; height: 84px; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.12); } @media (max-width: 1100px) { .rm-Header .nwk-app-promo__qr { display: none; } } @media (max-width: 820px) { .rm-Header .nwk-app-promo__inner { gap: 8px; padding-left: 8px; } .rm-Header .nwk-app-promo__title { display: none; } .rm-Header .nwk-badge img { height: 36px !important; } } /* Update the existing .ngo-chip rule to include these */ .ngo-chip{ gap:.5em; box-sizing:border-box; cursor:pointer; transition:.2s; } /* Anchor-based chips: keep white text, no underline */ .ngo-landing a.ngo-chip{ color:#fff; text-decoration:none } .ngo-landing a.ngo-chip:hover, .ngo-landing a.ngo-chip:focus, .ngo-landing a.ngo-chip:visited{ color:#fff; text-decoration:none } /* Fix blue icons on blue circle */make it .social-btn:hover{ background:var(--brand); color:#fff; transform:translateY(-2px) } /* ===== Landing HTML lives in a Body > HTML section ===== ReadMe styles body sections like article text (font, h1/h2 sizes, list spacing, top padding). Reset those so it renders like UAE prod. */ .rm-LandingPage{ padding-top:0 } .rm-LandingPage .ngo-landing{ font-family:"Twemoji Country Flags",system-ui,-apple-system,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif; font-size:14px; line-height:1.5; } .rm-LandingPage .ngo-landing .ngo-hero__title{ font-size:clamp(28px,4vw,44px); line-height:1.15; font-weight:500; color:#174A41; margin:0 0 10px } .rm-LandingPage .ngo-landing .ngo-hero__subtitle{ margin:0 } .rm-LandingPage .ngo-landing .ngo-card__title{ font-size:24px; line-height:1.2; font-weight:500; margin:0 0 14px } .rm-LandingPage .ngo-landing .ngo-list{ margin:0 0 16px; padding-left:0 } .rm-LandingPage .ngo-landing .ngo-list li{ margin:0 } .rm-LandingPage .ngo-landing .ngo-switcher__menu{ margin:0; padding:6px } .rm-LandingPage .ngo-landing .ngo-list li, .rm-LandingPage .ngo-landing .ngo-hero__subtitle, .rm-LandingPage .ngo-landing a{ font-size:inherit; line-height:inherit }