The 13th China (Shenzhen) International Finance Expo
The 13th China (Shenzhen) International Finance Expo, with the theme of “financial sound development – […]
November 2019
<!-- ============================================================
ELEMENTOR PASTE START ▼ (copy from here to PASTE END)
Paste into an HTML widget on the jurunav_26 Elementor Canvas
page, replacing its current content.
This is fetched live by every page's juru-nav-loader script,
which looks for these exact three ids: #juru-nav, #juru-nav-css,
#juru-nav-js — keep them as-is or the loader silently no-ops.
============================================================ -->
<nav id="juru-nav" class="jnav">
<div class="jnav-in">
<a href="/home_26/" class="jlogo" aria-label="Juru — home">
<img class="jlogo-img" src="https://www.juru.ai/wp-content/uploads/2023/03/logo-header-2.jpg" alt="Juru — SME100 Fast Moving Companies Award">
</a>
<button type="button" class="jnav-burger" id="jnavBurger" aria-label="Open menu" aria-expanded="false" aria-controls="jnavMenu">
<span></span><span></span><span></span>
</button>
<div class="jnav-menu" id="jnavMenu">
<ul class="jnav-links">
<li class="jnav-drop">
<button type="button" class="jnav-drop-trigger" id="jnavDropTrigger" aria-expanded="false" aria-controls="jnavDropmenu">
Products
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
</button>
<div class="jnav-dropmenu" id="jnavDropmenu">
<a href="/jurupay_26/"><span class="jnav-dot"></span>JuruPay</a>
<a href="/jurupos_26/"><span class="jnav-dot"></span>JuruPOS</a>
<a href="/jurumenu_26/"><span class="jnav-dot"></span>JuruMenu</a>
<a href="/jurustore_26/"><span class="jnav-dot"></span>JuruStore</a>
<a href="/jurureward_26/"><span class="jnav-dot"></span>JuruReward</a>
<a href="https://www.juruschool.com/" target="_blank" rel="noopener"><span class="jnav-dot"></span>JuruSchool</a>
</div>
</li>
<li><a href="/news/" class="jnav-link">News</a></li>
</ul>
<a href="https://www.juru.ai/contact-us/" class="jnav-cta">Talk to Us
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
</a>
</div>
</div>
</nav>
<style id="juru-nav-css">
/* ============================================================
JURU NAV — scoped to #juru-nav so it can never bleed into the
host page. Brand tokens are hardcoded (not shared CSS vars)
since this nav is fetched and injected as a standalone fragment
into pages it doesn't share a stylesheet with.
============================================================ */
#juru-nav{
--jr: #E11B22;
--jr-glow: #FF6B62;
--jr-soft: #FDF1F0;
--ink: #1B1416;
--ink-2: #6B6065;
--line: #EDE4E3;
--paper: #FFFFFF;
--ease: cubic-bezier(.22,.61,.36,1);
position:fixed; top:0; left:0; right:0; z-index:1000;
font-family:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
padding:0;
background:rgba(255,255,255,.66);
backdrop-filter:blur(14px) saturate(140%);
-webkit-backdrop-filter:blur(14px) saturate(140%);
border-bottom:1px solid rgba(27,20,22,.06);
transition:padding .55s var(--ease), background .45s var(--ease),
border-color .45s var(--ease);
}
#juru-nav *{box-sizing:border-box;}
#juru-nav a{color:inherit;text-decoration:none;}
#juru-nav ul{list-style:none;margin:0;padding:0;}
#juru-nav button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0;}
#juru-nav svg{display:block;flex:none;}
/* Scrolled state — toggled by juru-nav-js.
The full-width bar hands its surface over to .jnav-in, which pulls in
from both edges and rounds off into a floating island. So the outer
element goes transparent and gains a gutter, and the inner one takes
on the background, the border, the shadow and the radius. */
#juru-nav.is-scrolled{
background:transparent;
backdrop-filter:none;
-webkit-backdrop-filter:none;
border-bottom-color:transparent;
padding:12px 20px;
}
#juru-nav .jnav-in{
max-width:1200px; margin:0 auto;
display:flex; align-items:center; justify-content:space-between;
padding:22px 28px;
border:1px solid transparent; border-radius:0;
background:transparent;
transition:max-width .55s var(--ease), padding .55s var(--ease),
border-radius .55s var(--ease), background .45s var(--ease),
border-color .45s var(--ease), box-shadow .55s var(--ease);
}
#juru-nav.is-scrolled .jnav-in{
max-width:1020px;
padding:10px 12px 10px 24px;
border-radius:100px;
background:rgba(255,255,255,.9);
backdrop-filter:blur(18px) saturate(160%);
-webkit-backdrop-filter:blur(18px) saturate(160%);
border-color:var(--line);
box-shadow:0 1px 2px rgba(27,20,22,.05), 0 16px 38px -18px rgba(27,20,22,.45);
}
#juru-nav .jlogo{ display:flex; align-items:center; flex:none; }
#juru-nav .jlogo-img{
height:40px; width:auto; display:block;
transition:height .35s var(--ease);
}
#juru-nav.is-scrolled .jlogo-img{ height:28px; }
#juru-nav .jnav-menu{ display:flex; align-items:center; gap:34px; }
#juru-nav .jnav-links{ display:flex; align-items:center; gap:8px; }
#juru-nav .jnav-drop{ position:relative; }
#juru-nav .jnav-drop-trigger{
display:flex; align-items:center; gap:7px;
font-size:15px; font-weight:500; color:var(--ink);
padding:9px 4px;
}
#juru-nav .jnav-drop-trigger svg{ transition:transform .3s var(--ease); color:var(--ink-2); }
#juru-nav .jnav-drop-trigger[aria-expanded="true"] svg{ transform:rotate(180deg); color:var(--jr); }
#juru-nav .jnav-drop-trigger:hover{ color:var(--jr); }
#juru-nav .jnav-link{
display:flex; align-items:center;
font-size:15px; font-weight:500; color:var(--ink);
padding:9px 10px; transition:color .2s;
}
#juru-nav .jnav-link:hover{ color:var(--jr); }
#juru-nav .jnav-dropmenu{
position:absolute; top:calc(100% + 10px); left:50%; transform:translate(-50%,6px);
min-width:210px; background:var(--paper);
border:1px solid var(--line); border-radius:16px;
box-shadow:0 2px 4px rgba(16,19,23,.05), 0 18px 48px rgba(16,19,23,.12);
padding:8px; display:grid; gap:2px;
opacity:0; visibility:hidden; pointer-events:none;
transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
#juru-nav .jnav-drop-trigger[aria-expanded="true"] + .jnav-dropmenu{
opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0);
}
#juru-nav .jnav-dropmenu a{
display:flex; align-items:center; gap:10px;
font-size:14.5px; font-weight:500; color:var(--ink);
padding:10px 14px; border-radius:10px;
transition:background .2s, color .2s;
}
#juru-nav .jnav-dropmenu a:hover{ background:var(--jr-soft); color:var(--jr); }
#juru-nav .jnav-dot{
width:6px; height:6px; border-radius:50%; background:var(--line); flex:none;
transition:background .2s;
}
#juru-nav .jnav-dropmenu a:hover .jnav-dot{ background:var(--jr); }
#juru-nav .jnav-cta{
display:inline-flex; align-items:center; gap:9px;
background:linear-gradient(135deg,var(--jr) 0%,var(--jr-glow) 100%);
color:#fff; font-weight:700; font-size:14.5px;
padding:12px 22px; border-radius:100px;
box-shadow:0 10px 26px -8px rgba(225,27,34,.5);
transition:transform .25s var(--ease), box-shadow .25s var(--ease), padding .35s var(--ease);
}
#juru-nav .jnav-cta svg{ transition:transform .25s var(--ease); }
#juru-nav .jnav-cta:hover{ transform:translateY(-2px); box-shadow:0 14px 32px -8px rgba(225,27,34,.6); }
#juru-nav .jnav-cta:hover svg{ transform:translateX(3px); }
#juru-nav.is-scrolled .jnav-cta{ padding:9px 18px; }
#juru-nav .jnav-burger{
display:none; flex-direction:column; justify-content:center; gap:5px;
width:34px; height:34px; flex:none;
}
#juru-nav .jnav-burger span{
display:block; width:100%; height:2px; background:var(--ink); border-radius:2px;
transition:transform .3s var(--ease), opacity .3s var(--ease);
}
#juru-nav .jnav-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
#juru-nav .jnav-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
#juru-nav .jnav-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
#juru-nav a:focus-visible,
#juru-nav button:focus-visible{
outline:3px solid var(--jr); outline-offset:3px; border-radius:6px;
}
@media (max-width:860px){
/* No island on a phone: narrowing a bar that is already narrow buys
nothing, and backdrop-filter on .jnav-in would make it the
containing block for the fixed slide-in panel and mis-place it.
So the mobile bar keeps its original full-width behaviour. */
#juru-nav.is-scrolled{
background:rgba(255,255,255,.94);
backdrop-filter:blur(14px) saturate(140%);
-webkit-backdrop-filter:blur(14px) saturate(140%);
border-bottom-color:var(--line);
padding:0;
}
#juru-nav.is-scrolled .jnav-in{
max-width:1200px; padding:11px 22px; border-radius:0;
background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none;
border-color:transparent; box-shadow:none;
}
#juru-nav .jnav-burger{ display:flex; }
#juru-nav .jnav-menu{
position:fixed; top:0; right:0; height:100vh; width:min(320px,86vw);
background:var(--paper); flex-direction:column; align-items:stretch;
gap:0; padding:88px 26px 32px;
box-shadow:-24px 0 60px rgba(16,19,23,.16);
transform:translateX(100%); transition:transform .4s var(--ease);
}
#juru-nav .jnav-menu.is-open{ transform:translateX(0); }
#juru-nav .jnav-links{ flex-direction:column; align-items:stretch; gap:4px; }
#juru-nav .jnav-drop-trigger,
#juru-nav .jnav-link{
justify-content:space-between; width:100%; padding:14px 4px;
font-size:17px; border-bottom:1px solid var(--line);
}
#juru-nav .jnav-dropmenu{
position:static; transform:none; min-width:0; border:0; box-shadow:none;
padding:4px 0 4px 6px; max-height:0; overflow:hidden;
opacity:1; visibility:visible; pointer-events:auto;
transition:max-height .3s var(--ease);
}
#juru-nav .jnav-drop-trigger[aria-expanded="true"] + .jnav-dropmenu{ max-height:320px; transform:none; }
#juru-nav .jnav-cta{ justify-content:center; margin-top:22px; }
}
@media (prefers-reduced-motion:reduce){
#juru-nav, #juru-nav *{ transition:none !important; }
}
</style>
<script id="juru-nav-js">
(function(){
var nav = document.getElementById('juru-nav');
if(!nav) return;
/* shrink on scroll */
function onScroll(){
if(window.scrollY > 24){ nav.classList.add('is-scrolled'); }
else{ nav.classList.remove('is-scrolled'); }
}
onScroll();
window.addEventListener('scroll', onScroll, {passive:true});
/* products dropdown */
var dropTrigger = document.getElementById('jnavDropTrigger');
var dropMenu = document.getElementById('jnavDropmenu');
function closeDrop(){ dropTrigger.setAttribute('aria-expanded','false'); }
function toggleDrop(e){
e.stopPropagation();
var open = dropTrigger.getAttribute('aria-expanded') === 'true';
dropTrigger.setAttribute('aria-expanded', open ? 'false' : 'true');
}
if(dropTrigger){
dropTrigger.addEventListener('click', toggleDrop);
document.addEventListener('click', function(e){
if(!nav.contains(e.target)) closeDrop();
});
document.addEventListener('keydown', function(e){
if(e.key === 'Escape') closeDrop();
});
}
/* mobile menu */
var burger = document.getElementById('jnavBurger');
var menu = document.getElementById('jnavMenu');
if(burger){
burger.addEventListener('click', function(){
var open = burger.getAttribute('aria-expanded') === 'true';
burger.setAttribute('aria-expanded', open ? 'false' : 'true');
menu.classList.toggle('is-open', !open);
document.body.style.overflow = open ? '' : 'hidden';
});
}
})();
</script>
<!-- ============================================================
ELEMENTOR PASTE END ▲
============================================================ -->
Malaysia (HQ)
Unit 901A, Level 9, Tower A, Uptown 5, No. 5 Jalan SS21/39, Damansara Uptown, 47400 Petaling Jaya, Malaysia.
Singapore
1, North Bridge Road #24-01, High Street Centre, Singapore 179094
Hong Kong
1318-20, Hollywood Plaza, 610 Nathan Road, Mongkok, Kowloon, Hong Kong.
China
ChuangXin GuangChang, No. 2007, Pingshan Avenue, Pingshan Road, Pingshan District, Shenzhen, China.
ANZ
6 Clayton Street, Newmarket, Auckland 1023, New Zealand.
Copyright All Rights Reserved © 2025