/* ========================================================================== xBStore chrome: footer + floating widgets Loaded in — jangan taruh style di bawah HTML (cegah FOUC / layout bocor) ========================================================================== */ /* --- Footer -------------------------------------------------------------- */ .bjx-site-footer { flex-shrink: 0; margin-top: auto; background: linear-gradient(180deg, rgba(6, 12, 24, 0.98) 0%, rgba(5, 10, 20, 1) 100%); border-top: 1px solid rgba(255, 255, 255, 0.06); } .bjx-ft-inner { padding-top: 2.25rem; padding-bottom: 1.35rem; } @media (max-width: 767px) { .bjx-ft-inner { padding-top: 1.5rem; padding-bottom: 1.15rem; } } .bjx-ft-grid { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 2rem 3rem; } @media (max-width: 767px) { .bjx-ft-grid { flex-direction: column; gap: 1.5rem; } } .bjx-ft-brand { flex: 0 1 280px; max-width: 320px; } @media (max-width: 767px) { .bjx-ft-brand { flex: 1 1 auto; max-width: 100%; width: 100%; } } .bjx-ft-logo-link { display: inline-block; } .bjx-ft-logo { height: 2.25rem !important; width: auto !important; max-width: 10rem !important; max-height: 2.5rem !important; object-fit: contain; margin-bottom: 0.75rem; display: block; } .bjx-ft-desc { margin: 0; font-size: 0.8125rem; line-height: 1.55; color: rgba(154, 166, 178, 0.95); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .bjx-ft-socials { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem; margin-top: 1rem; } .bjx-soc { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.75); transition: transform .15s, background .15s, color .15s; text-decoration: none; } .bjx-soc:hover { transform: translateY(-2px); } .bjx-soc-ig:hover { background: #e1306c; color: #fff; } .bjx-soc-wa:hover, .bjx-soc-wa { color: #25d366; } .bjx-soc-wa:hover { background: rgba(37, 211, 102, 0.18); color: #25d366; } .bjx-soc-tt:hover { background: #111; color: #fff; } .bjx-soc-yt:hover, .bjx-soc-yt { color: #ff4444; } .bjx-soc-yt:hover { background: rgba(255, 68, 68, 0.15); } .bjx-soc-fb:hover { background: #1877f2; color: #fff; } .bjx-ft-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2.25rem; flex: 1 1 280px; max-width: 36rem; } @media (max-width: 767px) { .bjx-ft-cols { width: 100%; max-width: 100%; flex: 1 1 auto; gap: 1.15rem 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } .bjx-ft-cols .bjx-ft-col:nth-child(3) { grid-column: 1 / -1; } } @media (min-width: 768px) { .bjx-ft-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 40rem; } } .bjx-ft-heading { margin: 0 0 0.75rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em; color: #f0b429; } .bjx-ft-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; } .bjx-ft-link { font-size: 0.8125rem; line-height: 1.4; color: rgba(154, 166, 178, 0.95); text-decoration: none; transition: color .15s; } .bjx-ft-link:hover { color: #f0b429; } .bjx-ft-bottom { margin-top: 1.75rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.06); } @media (max-width: 767px) { .bjx-ft-bottom { margin-top: 1.25rem; padding-top: 0.85rem; } } .bjx-ft-copy { margin: 0; font-size: 0.75rem; line-height: 1.45; color: rgba(154, 166, 178, 0.9); } @media (max-width: 767px) { .bjx-ft-copy { font-size: 0.7rem; line-height: 1.5; max-width: 100%; word-break: break-word; } .bjx-ft-heading { font-size: 0.78rem; } .bjx-ft-link { font-size: 0.78rem; } .bjx-ft-desc { font-size: 0.78rem; -webkit-line-clamp: 3; } } /* Footer padding vs float dock */ .bjx-site-footer .bjx-ft-inner { padding-bottom: calc(1.35rem + env(safe-area-inset-bottom, 0px)) !important; } @media (max-width: 767.98px) { .bjx-site-footer .bjx-ft-inner { padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px)) !important; } .bjx-ft-bottom { padding-right: 2.75rem; } } @media (max-width: 1023.98px) { body.bjx-page-order .bjx-site-footer .bjx-ft-inner { padding-bottom: calc( var(--bjx-dock-h, 0px) + 3.75rem + env(safe-area-inset-bottom, 0px) ) !important; } body.bjx-page-order .bjx-ft-bottom { padding-right: 2.75rem; } } @media (min-width: 1024px) { body.bjx-page-order .bjx-site-footer .bjx-ft-inner { padding-bottom: calc(2.25rem + env(safe-area-inset-bottom, 0px)) !important; } body.bjx-page-order .bjx-ft-bottom { padding-right: 0; } } /* --- Floating widgets ---------------------------------------------------- */ :root { --bjx-dock-h: 0px; --bjx-float-gap: 12px; --bjx-float-side: 16px; } .bjx-float-stack { position: fixed; right: max(var(--bjx-float-side), env(safe-area-inset-right, 0px)); bottom: calc( var(--bjx-dock-h, 0px) + var(--bjx-float-gap) + env(safe-area-inset-bottom, 0px) ); z-index: 50; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; pointer-events: none; max-width: min(12rem, calc(100vw - 2rem)); } .bjx-float-stack > * { pointer-events: auto; } .bjx-float-top { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(12, 22, 40, 0.92); color: rgba(255, 255, 255, 0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s ease, visibility .2s ease, transform .2s ease, color .15s, border-color .15s; } .bjx-float-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .bjx-float-top:hover { color: #f0b429; border-color: rgba(240, 180, 41, 0.45); } .bjx-float-cs { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; padding: 0.5rem 0.95rem 0.5rem 0.7rem; border-radius: 999px; background: linear-gradient(135deg, #c98900 0%, #f0b429 48%, #ffe066 100%); color: #1a1408 !important; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.03em; text-decoration: none !important; box-shadow: 0 10px 28px rgba(240, 180, 41, 0.38); white-space: nowrap; transition: transform .18s ease, filter .18s ease; } .bjx-float-cs:hover { filter: brightness(1.05); transform: translateY(-2px); color: #1a1408 !important; } .bjx-float-cs-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.55rem; height: 1.55rem; border-radius: 999px; background: rgba(0, 0, 0, 0.12); flex-shrink: 0; } .bjx-float-cs-label { line-height: 1; } @media (max-width: 767.98px) { :root { --bjx-float-side: 10px; --bjx-float-gap: 8px; } .bjx-float-stack { gap: 8px; } .bjx-float-cs { width: 2.35rem; height: 2.35rem; min-height: 0; padding: 0; justify-content: center; box-shadow: 0 6px 16px rgba(240, 180, 41, 0.32); } .bjx-float-cs-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); } .bjx-float-cs-icon { width: auto; height: auto; background: transparent; } .bjx-float-cs-icon svg { width: 1.05rem; height: 1.05rem; } .bjx-float-top { width: 2.2rem; height: 2.2rem; } .bjx-float-top svg { width: 15px; height: 15px; } } @media (min-width: 1024px) { :root { --bjx-float-side: 1.5rem; --bjx-float-gap: 1.25rem; } }