/* ============================================================ NARAYA UMKM — PREMIUM NAVBAR Brand-adapted (navy + gilt gold). Light + dark via . Sticky, glass, scroll-shrink, mega menu, mobile drawer. Theme source of truth = data-theme on (see inline head script + navbar.js). Dark = default (no attribute), light = data-theme="light". ============================================================ */ .nv{ /* —— dark (default) —— */ --nv-h:72px; --nv-h-scrolled:60px; --nv-bg:rgba(4,16,26,.72); --nv-bg-solid:rgba(4,16,26,.92); --nv-text:#E7DCC2; --nv-strong:#FBF4E2; --nv-muted:#9FAFB3; --nv-line:rgba(246,239,224,.10); --nv-line-2:rgba(246,239,224,.20); --nv-panel:#08161f; --nv-panel-2:rgba(255,255,255,.03); --nv-gold:#D9A23C; --nv-gilt:linear-gradient(120deg,#F2D894 0%,#D9A23C 52%,#B07F2A 100%); --nv-glow:rgba(217,162,60,.20); --nv-on-gold:#1c1305; --nv-shadow:0 30px 70px -30px rgba(0,0,0,.7); --nv-drawer-bg:#04101a; position:sticky; top:0; z-index:200; font-family:"Manrope",system-ui,-apple-system,sans-serif; -webkit-font-smoothing:antialiased; border-bottom:1px solid var(--nv-line); background:var(--nv-bg); backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%); transition:background .3s ease,border-color .3s ease,box-shadow .3s ease; } [data-theme="light"] .nv{ --nv-bg:rgba(255,255,255,.82); --nv-bg-solid:rgba(255,255,255,.95); --nv-text:#334155; --nv-strong:#0F172A; --nv-muted:#55636B; --nv-line:#E9ECF1; --nv-line-2:#D8DEE6; --nv-panel:#FFFFFF; --nv-panel-2:rgba(15,23,42,.02); --nv-glow:rgba(217,162,60,.14); --nv-shadow:0 30px 64px -34px rgba(15,23,42,.26); --nv-drawer-bg:#FFFFFF; } .nv *{box-sizing:border-box} .nv.scrolled{background:var(--nv-bg-solid);box-shadow:0 1px 0 var(--nv-line),0 18px 40px -34px rgba(0,0,0,.6)} .nv-inner{ display:flex; align-items:center; gap:18px; max-width:1240px; margin:0 auto; padding:0 24px; height:var(--nv-h); transition:height .3s ease; } .nv.scrolled .nv-inner{height:var(--nv-h-scrolled)} /* —— brand —— */ .nv-brand{ display:inline-flex; align-items:center; gap:11px; text-decoration:none; flex:none; } .nv-brand__logo{ width:34px;height:34px; flex:none; border-radius:9px; display:block; box-shadow:0 6px 18px -8px var(--nv-glow); transition:width .3s ease,height .3s ease; } .nv.scrolled .nv-brand__logo{width:30px;height:30px} .nv-brand__txt{display:flex;flex-direction:column;line-height:1.05} .nv-brand__name{font-size:17px;font-weight:800;letter-spacing:-.012em;color:var(--nv-strong)} .nv-brand__name em{font-style:normal;color:var(--nv-gold)} .nv-brand__tag{ font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:var(--nv-muted);margin-top:1px; } /* —— collapse wrapper (becomes drawer on mobile) —— */ .nv-collapse{ flex:1; display:flex; align-items:center; justify-content:space-between; gap:18px; margin-left:14px; min-width:0; } /* —— center menu —— */ .nv-menu{ display:flex; align-items:center; gap:4px; margin:0 auto; } .nv-item{position:relative} .nv-trigger, .nv-link{ appearance:none; border:0; background:none; font-family:inherit; font-size:14.5px; font-weight:600; color:var(--nv-text); cursor:pointer; text-decoration:none; padding:9px 13px; border-radius:10px; display:inline-flex; align-items:center; gap:6px; transition:color .2s ease,background .2s ease; position:relative; } .nv-trigger:hover,.nv-link:hover, .nv-item:hover .nv-trigger, .nv-item:focus-within .nv-trigger{color:var(--nv-strong)} /* animated active underline */ .nv-trigger::after,.nv-link::after{ content:""; position:absolute; left:13px;right:13px;bottom:5px; height:2px;border-radius:2px; background:var(--nv-gilt); transform:scaleX(0); transform-origin:center; transition:transform .2s cubic-bezier(.2,.7,.2,1); } .nv-link:hover::after, .nv-item:hover .nv-trigger::after, .nv-item:focus-within .nv-trigger::after{transform:scaleX(1)} .nv-chev{ width:14px;height:14px;flex:none; transition:transform .2s ease; opacity:.7; } .nv-item:hover .nv-chev, .nv-item:focus-within .nv-chev{transform:rotate(180deg)} /* —— mega panel (desktop) —— */ .nv-mega{ position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(8px); background:var(--nv-panel); border:1px solid var(--nv-line); border-radius:16px; box-shadow:var(--nv-shadow); padding:18px; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .22s ease,transform .22s cubic-bezier(.2,.7,.2,1),visibility .22s; z-index:5; } .nv-mega::before{ /* hover bridge so it doesn't close in the gap */ content:"";position:absolute;left:0;right:0;top:-12px;height:12px; } .nv-item:hover .nv-mega, .nv-item:focus-within .nv-mega{ opacity:1;visibility:visible;pointer-events:auto; transform:translateX(-50%) translateY(0); } .nv-mega--wide{display:grid;grid-template-columns:repeat(3,minmax(168px,1fr));gap:20px} .nv-mega--single{min-width:230px} .nv-mega__group + .nv-mega__group{} .nv-mega__head{ font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:var(--nv-gold);margin:2px 6px 10px; } .nv-mega__link{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px; text-decoration:none; color:var(--nv-text); font-size:14px; font-weight:500; transition:background .2s ease,color .2s ease,transform .2s cubic-bezier(.2,.7,.2,1); } .nv-mega__link:hover{ background:var(--nv-panel-2); color:var(--nv-strong); transform:translateX(2px); } .nv-mega__dot{ width:7px;height:7px;flex:none;border-radius:50%; background:var(--nv-gilt); box-shadow:0 0 0 3px var(--nv-panel-2); } /* —— right actions —— */ .nv-actions{display:flex;align-items:center;gap:10px;flex:none} .nv-theme{ display:grid;place-items:center; width:38px;height:38px;flex:none; border-radius:999px; border:1px solid var(--nv-line); background:var(--nv-panel-2); color:var(--nv-muted); cursor:pointer; transition:color .2s ease,border-color .2s ease,transform .2s cubic-bezier(.2,.7,.2,1); } .nv-theme:hover{color:var(--nv-strong);border-color:var(--nv-gold);transform:translateY(-1px)} .nv-theme svg{width:17px;height:17px} .nv-theme__moon{display:none} [data-theme="light"] .nv-theme__sun{display:none} [data-theme="light"] .nv-theme__moon{display:block} /* language switcher (ID / EN) */ .nv-lang{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--nv-line);border-radius:999px;background:var(--nv-panel-2);flex:none} .nv-lang__btn{appearance:none;-webkit-appearance:none;border:0;background:none;font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.04em;padding:6px 11px;border-radius:999px;color:var(--nv-muted);cursor:pointer;transition:background .2s ease,color .2s ease} .nv-lang__btn[aria-pressed="true"]{background:var(--nv-gilt);color:var(--nv-on-gold)} .nv-lang__btn:not([aria-pressed="true"]):hover{color:var(--nv-strong)} .nv-btn{ display:inline-flex;align-items:center;gap:7px; font-family:inherit;font-size:14.5px;font-weight:700;letter-spacing:.005em; padding:10px 18px;border-radius:999px;border:1px solid transparent; text-decoration:none;cursor:pointer;white-space:nowrap; transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s ease,background .2s ease,color .2s ease,border-color .2s ease; } .nv-btn--ghost{background:transparent;color:var(--nv-text);border-color:var(--nv-line-2)} .nv-btn--ghost:hover{color:var(--nv-strong);border-color:var(--nv-gold);transform:translateY(-1px)} .nv-btn--primary{ background:var(--nv-gilt);color:var(--nv-on-gold); box-shadow:0 10px 26px -12px var(--nv-glow),inset 0 1px 0 rgba(255,255,255,.45); } .nv-btn--primary:hover{transform:translateY(-2px);box-shadow:0 16px 36px -12px rgba(217,162,60,.5),inset 0 1px 0 rgba(255,255,255,.55)} .nv-btn .nv-arrow{transition:transform .2s ease} .nv-btn:hover .nv-arrow{transform:translateX(3px)} /* —— hamburger —— */ .nv-burger{ display:none; width:42px;height:42px;flex:none;margin-left:auto; border-radius:11px;border:1px solid var(--nv-line); background:var(--nv-panel-2); cursor:pointer; position:relative; color:var(--nv-strong); } .nv-burger span, .nv-burger span::before, .nv-burger span::after{ content:"";position:absolute;left:50%;top:50%; width:18px;height:2px;border-radius:2px;background:currentColor; transform:translate(-50%,-50%);transition:transform .25s ease,opacity .2s ease; } .nv-burger span::before{transform:translate(-50%,-50%) translateY(-6px)} .nv-burger span::after{transform:translate(-50%,-50%) translateY(6px)} .nv.open .nv-burger span{background:transparent} .nv.open .nv-burger span::before{transform:translate(-50%,-50%) rotate(45deg)} .nv.open .nv-burger span::after{transform:translate(-50%,-50%) rotate(-45deg)} /* —— backdrop —— */ .nv-backdrop{ position:fixed;inset:0;z-index:190; background:rgba(2,8,14,.5); backdrop-filter:blur(2px); opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s; } .nv.open ~ .nv-backdrop, body.nv-lock .nv-backdrop{opacity:1;visibility:visible} /* ============ RESPONSIVE / DRAWER ============ */ @media (max-width:960px){ .nv-burger{display:grid;place-items:center} .nv-collapse{ position:fixed; top:0;right:0;bottom:0; width:min(420px,90vw); margin:0; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:0; padding:calc(var(--nv-h) + 8px) 20px 28px; background:var(--nv-drawer-bg); border-left:1px solid var(--nv-line); box-shadow:var(--nv-shadow); transform:translateX(105%); transition:transform .32s cubic-bezier(.2,.7,.2,1); overflow-y:auto; z-index:195; } .nv.open .nv-collapse{transform:translateX(0)} .nv-menu{flex-direction:column;align-items:stretch;gap:0;margin:0;width:100%} .nv-item{border-bottom:1px solid var(--nv-line)} .nv-trigger,.nv-link{ width:100%;justify-content:space-between; padding:16px 6px;border-radius:0;font-size:16px; } .nv-trigger::after,.nv-link::after{display:none} .nv-chev{width:16px;height:16px} .nv-item.open .nv-chev{transform:rotate(180deg)} .nv-mega{ position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto; background:none;border:0;box-shadow:none;padding:0; max-height:0;overflow:hidden; transition:max-height .3s ease; } .nv-mega--wide{display:block} .nv-item.open .nv-mega{max-height:760px;padding:2px 0 12px} .nv-mega__head{margin:12px 6px 6px} .nv-mega__link{font-size:15px;padding:10px} .nv-actions{ flex-direction:column;align-items:stretch;gap:12px; margin-top:22px;padding-top:22px;border-top:1px solid var(--nv-line); } .nv-theme{width:100%;height:auto;border-radius:12px;padding:13px;gap:10px;justify-content:center} .nv-theme::after{content:"Ganti Tema";font-size:14.5px;font-weight:600;color:var(--nv-text)} .nv-btn{justify-content:center;padding:14px 18px;font-size:15.5px} } @media (prefers-reduced-motion:reduce){ .nv *,.nv-collapse,.nv-mega{transition:none !important} } /* keyboard focus */ .nv a:focus-visible, .nv button:focus-visible{outline:2px solid var(--nv-gold);outline-offset:3px;border-radius:8px}