/* ============================================================ NARAYA UMKM — PREMIUM FOOTER Brand-adapted (navy + gilt gold + viridian). Light + dark ready. Light mode: add data-theme="light" on OR class "nf-light" on the .nf / .nf-cta elements. Default = dark (matches the site). Self-contained — no dependency on the page's own CSS. ============================================================ */ .nf, .nf-cta{ /* —— dark (default) —— */ --nf-bg:#04101A; --nf-bg-2:#071a27; --nf-card:rgba(255,255,255,.03); --nf-card-brd:rgba(246,239,224,.10); --nf-text:#D8E0E2; --nf-strong:#FBF4E2; --nf-muted:#9FAFB3; --nf-faint:#6E8088; --nf-label:#F0D58F; --nf-line:rgba(246,239,224,.10); --nf-line-2:rgba(246,239,224,.20); --nf-gold:#D9A23C; --nf-gilt:linear-gradient(120deg,#F2D894 0%,#D9A23C 52%,#B07F2A 100%); --nf-teal:#44C49E; --nf-glow:rgba(217,162,60,.20); --nf-shadow:0 28px 80px -34px rgba(0,0,0,.72); --nf-on-gold:#1c1305; font-family:"Manrope",system-ui,-apple-system,sans-serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* —— light (opt-in) —— */ [data-theme="light"] .nf, [data-theme="light"] .nf-cta, .nf.nf-light, .nf-cta.nf-light{ --nf-bg:#FFFFFF; --nf-bg-2:#F8FAFC; --nf-card:rgba(15,23,42,.022); --nf-card-brd:#E5E7EB; --nf-text:#334155; --nf-strong:#0F172A; --nf-muted:#55636B; --nf-faint:#94A3B8; --nf-label:#A87A26; --nf-line:#E9ECF1; --nf-line-2:#D8DEE6; --nf-glow:rgba(217,162,60,.14); --nf-shadow:0 26px 64px -34px rgba(15,23,42,.28); --nf-on-gold:#1c1305; } .nf *, .nf-cta *{box-sizing:border-box} .nf-wrap{ max-width:1200px; margin:0 auto; padding:0 24px; position:relative; } /* ============ BAGIAN 1 — CTA ============ */ .nf-cta{ position:relative; overflow:hidden; background:var(--nf-bg-2); padding:100px 0; } .nf-cta::before{ /* soft gold glow */ content:""; position:absolute; inset:0; background:radial-gradient(58% 130% at 50% -8%,var(--nf-glow),transparent 68%); pointer-events:none; } .nf-cta__card{ position:relative; max-width:780px; margin:0 auto; text-align:center; padding:58px 48px; border:1px solid var(--nf-card-brd); border-radius:22px; background:var(--nf-card); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:var(--nf-shadow); } .nf-cta__card::before{ /* faint gilt highlight along the top edge */ content:""; position:absolute; top:0;left:28px;right:28px; height:1px; background:linear-gradient(90deg,transparent,rgba(217,162,60,.5),transparent); } .nf-eyebrow{ display:inline-block; font-size:11px; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--nf-label); margin-bottom:18px; } .nf-cta__title{ margin:0 0 16px; font-size:clamp(28px,4.2vw,44px); font-weight:800; line-height:1.07; letter-spacing:-.022em; color:var(--nf-strong); } .nf-cta__sub{ margin:0 auto 34px; max-width:54ch; font-size:clamp(15px,1.6vw,18px); line-height:1.62; color:var(--nf-muted); } .nf-cta__actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; } /* ============ BUTTONS ============ */ .nf-btn{ display:inline-flex; align-items:center; gap:9px; padding:14px 26px; border-radius:999px; border:1px solid transparent; font-size:15px; font-weight:700; letter-spacing:.005em; text-decoration:none; cursor:pointer; transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, background .3s ease, color .3s ease, border-color .3s ease; } .nf-btn--primary{ background:var(--nf-gilt); color:var(--nf-on-gold); box-shadow:0 12px 32px -12px var(--nf-glow),inset 0 1px 0 rgba(255,255,255,.45); } .nf-btn--primary:hover{ transform:translateY(-2px); box-shadow:0 18px 44px -12px rgba(217,162,60,.5),inset 0 1px 0 rgba(255,255,255,.55); } .nf-btn--ghost{ background:transparent; color:var(--nf-text); border-color:var(--nf-line-2); } .nf-btn--ghost:hover{ transform:translateY(-2px); color:var(--nf-strong); border-color:var(--nf-gold); } .nf-arrow{transition:transform .3s cubic-bezier(.2,.7,.2,1)} .nf-btn:hover .nf-arrow{transform:translateX(4px)} /* ============ BAGIAN 2 — FOOTER ============ */ .nf{ position:relative; background:var(--nf-bg); color:var(--nf-text); padding:100px 0 36px; } .nf::before{ /* gilt hairline at top edge — center-weighted fade */ content:""; position:absolute; top:0;left:0;right:0; height:1px; background:linear-gradient(90deg, transparent 0%, rgba(217,162,60,.55) 26%, #F4DC9B 50%, rgba(217,162,60,.55) 74%, transparent 100%); } .nf-grid{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr 1fr; gap:64px; } /* brand */ .nf-brand{max-width:36ch} .nf-logo{ display:inline-flex; align-items:center; gap:11px; margin-bottom:18px; text-decoration:none; } .nf-logo__mark{ width:28px;height:28px; border-radius:7px; background:url("/favicon.svg") center/contain no-repeat; } .nf-logo__txt{ font-size:19px; font-weight:800; letter-spacing:-.012em; color:var(--nf-strong); } .nf-logo__txt em{font-style:normal;color:var(--nf-gold)} .nf-brand__desc{ margin:0 0 22px; font-size:14px; line-height:1.7; color:var(--nf-muted); } .nf-social{display:flex;gap:10px;flex-wrap:wrap} .nf-social a{ display:grid; place-items:center; width:38px;height:38px; border-radius:11px; color:var(--nf-muted); background:var(--nf-card); border:1px solid var(--nf-line); transition:transform .3s cubic-bezier(.2,.7,.2,1), color .3s ease,border-color .3s ease,box-shadow .3s ease; } .nf-social a:hover{ transform:translateY(-3px); color:var(--nf-strong); border-color:var(--nf-gold); box-shadow:0 12px 26px -14px var(--nf-glow); } .nf-social svg{width:17px;height:17px;fill:currentColor} /* columns */ .nf-col__head{ appearance:none; -webkit-appearance:none; display:flex; align-items:center; justify-content:space-between; width:100%; margin:0 0 18px; padding:0; background:none; border:0; font-family:inherit; font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--nf-label); text-align:left; cursor:default; } .nf-col__chev{display:none} .nf-col__body{ display:flex; flex-direction:column; gap:11px; } .nf-col__body a{ position:relative; width:fit-content; font-size:14px; color:var(--nf-muted); text-decoration:none; transition:color .3s ease; } .nf-col__body a::after{ content:""; position:absolute; left:0;bottom:-2px; width:100%;height:1px; background:var(--nf-gold); transform:scaleX(0); transform-origin:left; transition:transform .3s cubic-bezier(.2,.7,.2,1); } .nf-col__body a:hover{color:var(--nf-strong)} .nf-col__body a:hover::after{transform:scaleX(1)} /* ============ BAGIAN 3 — TRUST BAR ============ */ .nf-trust{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 34px; margin-top:64px; padding:24px 0; border-top:1px solid var(--nf-line); border-bottom:1px solid var(--nf-line); } .nf-trust__item{ display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:600; color:var(--nf-text); } .nf-trust__item svg{ width:16px;height:16px; flex:none; color:var(--nf-teal); stroke:var(--nf-teal); } /* ============ BAGIAN 4 — BOTTOM ============ */ .nf-bottom{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-top:28px; } .nf-copy{font-size:13px;color:var(--nf-faint)} .nf-legal{display:flex;gap:22px;flex-wrap:wrap} .nf-legal a{ font-size:13px; color:var(--nf-muted); text-decoration:none; transition:color .3s ease; } .nf-legal a:hover{color:var(--nf-strong)} .nf-lang{ display:inline-flex; gap:4px; padding:4px; border:1px solid var(--nf-line); border-radius:999px; background:var(--nf-card); } .nf-lang__btn{ appearance:none; -webkit-appearance:none; border:0; background:none; font-family:inherit; font-size:12px; font-weight:600; padding:6px 14px; border-radius:999px; color:var(--nf-muted); cursor:pointer; transition:background .3s ease,color .3s ease; } .nf-lang__btn.is-active{background:var(--nf-gilt);color:var(--nf-on-gold)} .nf-lang__btn[disabled]{opacity:.5;cursor:not-allowed} .nf-lang__btn:not(.is-active):not([disabled]):hover{color:var(--nf-strong)} /* theme toggle (injected by footer.js) */ .nf-controls{display:inline-flex;align-items:center;gap:12px} .nf-theme{ display:grid; place-items:center; width:38px;height:38px; border-radius:999px; border:1px solid var(--nf-line); background:var(--nf-card); color:var(--nf-muted); cursor:pointer; transition:color .3s ease,border-color .3s ease,transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease; } .nf-theme:hover{ color:var(--nf-strong); border-color:var(--nf-gold); transform:translateY(-2px); box-shadow:0 10px 24px -14px var(--nf-glow); } .nf-theme svg{width:17px;height:17px} .nf-theme__moon{display:none} [data-theme="light"] .nf-theme__sun{display:none} [data-theme="light"] .nf-theme__moon{display:block} /* keyboard focus — accessible + on-brand */ .nf a:focus-visible, .nf-cta a:focus-visible, .nf-btn:focus-visible, .nf-social a:focus-visible, .nf-theme:focus-visible, .nf-lang__btn:focus-visible, .nf-col__head:focus-visible{ outline:2px solid var(--nf-gold); outline-offset:3px; border-radius:6px; } /* ============ RESPONSIVE ============ */ @media (max-width:980px){ .nf-grid{grid-template-columns:1fr 1fr;gap:40px 44px} .nf-brand{grid-column:1 / -1;max-width:52ch} } @media (max-width:640px){ .nf-cta{padding:64px 0} .nf-cta__card{padding:40px 24px;border-radius:18px} .nf{padding:72px 0 32px} .nf-grid{grid-template-columns:1fr;gap:0} .nf-brand{margin-bottom:6px} /* grid → accordion */ .nf-col{border-top:1px solid var(--nf-line)} .nf-col__head{ margin:0; padding:18px 0; cursor:pointer; } .nf-col__chev{ display:block; width:9px;height:9px; border-right:2px solid var(--nf-muted); border-bottom:2px solid var(--nf-muted); transform:rotate(45deg); transition:transform .3s ease; } .nf-col__head[aria-expanded="true"] .nf-col__chev{transform:rotate(-135deg)} .nf-col__body{ max-height:0; overflow:hidden; gap:0; transition:max-height .35s ease; } .nf-col__head[aria-expanded="true"] + .nf-col__body{max-height:460px} .nf-col__body a{padding:8px 0} .nf-col__body a:first-child{padding-top:0} .nf-col__body a:last-child{padding-bottom:18px} .nf-trust{margin-top:8px;gap:12px 24px} .nf-bottom{flex-direction:column;align-items:flex-start;gap:16px} } @media (prefers-reduced-motion:reduce){ .nf *,.nf-cta *{transition:none !important} }