/* H4SX STORE v4 ? Soft White + Blue Elegance */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #f8fafc; --bg2: #ffffff; --bg3: #f1f5f9; --off: #f8fafc; --off2: #e2e8f0; --card: #ffffff; --card-hover: #f8fafc; --border: #e2e8f0; --border2: #cbd5e1; --border3: #94a3b8; --ink: #0f172a; --ink2: #020617; --muted: #64748b; --muted2: #94a3b8; --primary: #0ea5e9; --primary2: #38bdf8; --primary3: #0284c7; --primary-hover: #0284c7; --primary-glow: rgba(14, 165, 233, 0.25); --primary-gradient: linear-gradient(135deg, #0ea5e9, #06b6d4); --secondary: #7c3aed; --secondary2: #a78bfa; --secondary-glow: rgba(124, 58, 237, 0.18); --secondary-gradient: linear-gradient(135deg, #7c3aed, #8b5cf6); --accent: #10b981; --accent2: #34d399; --accent-glow: rgba(16, 185, 129, 0.18); --sky: #0ea5e9; --sky2: #38bdf8; --sky3: #0284c7; --sky-hover: #0284c7; --sky-glow: rgba(14, 165, 233, 0.25); --ps-secondary: #7c3aed; --red: #ef4444; --red-bg: #fef2f2; --red-bdr: #fecaca; --green: #10b981; --green-bg: #ecfdf5; --green-bdr: #a7f3d0; --yellow: #f59e0b; --orange: #f97316; --ff-disp: 'Plus Jakarta Sans', system-ui, sans-serif; --ff-body: 'Plus Jakarta Sans', system-ui, sans-serif; --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --radius: 18px; --radius-sm: 12px; --radius-lg: 26px; --shadow-sm: 0 2px 12px rgba(15, 23, 42, 0.06); --shadow: 0 8px 30px rgba(15, 23, 42, 0.08); --shadow-lg: 0 20px 60px rgba(15, 23, 42, 0.1); --shadow-glow: 0 8px 32px var(--primary-glow); --shadow-glow-lg: 0 16px 48px var(--primary-glow); --gradient-aurora: linear-gradient(135deg, #0ea5e9, #06b6d4, #7c3aed); --gradient-aurora-bg: linear-gradient(135deg, rgba(14,165,233,0.08), rgba(6,182,212,0.06), rgba(124,58,237,0.06)); --gradient-dark: linear-gradient(160deg, #ffffff, #f8fafc); --container-padding: clamp(16px, 4vw, 48px); --section-spacing: clamp(48px, 7vw, 96px); --nav-h: 76px; } html { scroll-behavior: smooth; overflow-x: hidden; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 30%, #f8fafc 60%, #ffffff 100%), radial-gradient(circle at 10% 20%, rgba(14,165,233,0.08) 0%, transparent 50%), radial-gradient(circle at 90% 80%, rgba(124,58,237,0.05) 0%, transparent 50%); color: var(--ink); font-family: var(--ff-body); overflow-x: hidden; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.6; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: relative; /* NOTE: removed backface-visibility / translateZ(0) / will-change:scroll-position. Forcing the WHOLE into one giant compositing layer was the actual cause of the scroll lag: on a long page (many products) the browser had to keep rasterizing that huge layer on every scroll/repaint. Hardware acceleration is applied only to the small elements that actually animate (see .pc / .trust-item / etc. below), and only while they're animating. */ } .section-panel, .pc, .testi-card, .gc { content-visibility: auto; } .section-panel { contain-intrinsic-size: 1px 520px; } .pc { contain-intrinsic-size: 1px 420px; } .gc { contain-intrinsic-size: 1px 190px; } .testi-card { contain-intrinsic-size: 1px 190px; } .review-maintenance-box { grid-column: 1 / -1; border: 1px dashed rgba(14, 165, 233, 0.35); background: rgba(240, 249, 255, 0.82); color: var(--muted); border-radius: 14px; padding: 18px; text-align: center; } /* Review System Notice Popup */ .review-system-popup { position: fixed; inset: 0; z-index: 999998; display: none; align-items: center; justify-content: center; padding: clamp(16px, 4vw, 28px); background: radial-gradient(circle at 20% 10%, rgba(14,165,233,0.24), transparent 34%), radial-gradient(circle at 88% 80%, rgba(124,58,237,0.18), transparent 32%), rgba(15, 23, 42, 0.56); backdrop-filter: blur(14px); } .review-system-popup.show { display: flex; animation: reviewPopupFade .24s ease both; } .review-system-card { position: relative; width: min(560px, 100%); max-height: min(88vh, 720px); overflow-y: auto; border-radius: 26px; padding: clamp(22px, 5vw, 34px); background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(240,249,255,0.96)), linear-gradient(135deg, rgba(14,165,233,0.14), rgba(124,58,237,0.08)); border: 1px solid rgba(14, 165, 233, 0.24); box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28), inset 0 1px 0 rgba(255,255,255,0.9); text-align: center; transform: translateY(10px) scale(.96); animation: reviewPopupCard .34s var(--ease-bounce) .03s both; } .review-system-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, var(--primary), var(--secondary), var(--green)); } .review-system-close { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border: 1px solid rgba(14,165,233,0.16); border-radius: 12px; background: rgba(255,255,255,0.8); color: var(--muted); cursor: pointer; display: grid; place-items: center; } .review-system-close:hover { color: var(--red); border-color: rgba(239,68,68,0.28); } .review-system-icon { width: 72px; height: 72px; margin: 4px auto 16px; border-radius: 22px; display: grid; place-items: center; background: linear-gradient(135deg, #0ea5e9, #7c3aed); color: #fff; font-size: 30px; box-shadow: 0 18px 38px rgba(14,165,233,0.28); } .review-system-kicker { display: inline-flex; align-items: center; justify-content: center; padding: 6px 13px; border-radius: 99px; background: rgba(14,165,233,0.1); border: 1px solid rgba(14,165,233,0.18); color: var(--primary3); font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .7px; margin-bottom: 12px; } .review-system-card h2 { color: var(--ink2); font-size: clamp(24px, 5.5vw, 36px); line-height: 1.12; font-weight: 900; letter-spacing: -0.5px; margin-bottom: 14px; } .review-system-card p { color: var(--muted); font-size: 14px; line-height: 1.75; margin: 0 auto 12px; max-width: 470px; } .review-system-link { display: inline-flex; align-items: center; justify-content: center; gap: 9px; margin: 8px 0 14px; padding: 12px 16px; border-radius: 14px; background: var(--primary-gradient); color: #fff; text-decoration: none; font-size: 13px; font-weight: 900; box-shadow: 0 12px 26px var(--primary-glow); } .review-system-snooze { width: 100%; display: flex; align-items: flex-start; gap: 10px; text-align: left; padding: 12px 13px; margin: 0 auto 12px; border-radius: 14px; background: rgba(255,255,255,0.72); border: 1px solid rgba(14,165,233,0.14); color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer; } .review-system-snooze input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--primary); flex-shrink: 0; } .review-system-ok { width: 100%; border: none; border-radius: 15px; padding: 14px 18px; background: var(--ink2); color: #fff; font-size: 13px; font-weight: 900; cursor: pointer; box-shadow: 0 12px 28px rgba(15,23,42,0.18); } .review-system-ok:hover { transform: translateY(-1px); filter: brightness(1.06); } @keyframes reviewPopupFade { from { opacity: 0; } to { opacity: 1; } } @keyframes reviewPopupCard { to { transform: translateY(0) scale(1); } } @media (max-width: 480px) { .review-system-popup { align-items: flex-end; padding: 12px; } .review-system-card { border-radius: 24px; padding: 22px 18px 18px; max-height: 90vh; } .review-system-icon { width: 58px; height: 58px; border-radius: 18px; font-size: 24px; } .review-system-card p { font-size: 13px; line-height: 1.65; } .review-system-link, .review-system-ok { width: 100%; } } body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 20% 10%, rgba(14,165,233,0.08) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(124,58,237,0.05) 0%, transparent 45%); pointer-events: none; z-index: 0; } input, textarea { -webkit-user-select: auto !important; -moz-user-select: auto !important; -ms-user-select: auto !important; user-select: auto !important; } .page-mesh { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 80% 50% at 10% -10%, rgba(14,165,233,0.3), transparent 50%), radial-gradient(ellipse 60% 40% at 90% 0%, rgba(124,58,237,0.25), transparent 45%), radial-gradient(ellipse 50% 30% at 50% 100%, rgba(16,185,129,0.2), transparent 40%), radial-gradient(ellipse 40% 30% at 10% 80%, rgba(245,158,11,0.15), transparent 40%); } #earth-bg { display: none !important; } .wrap, nav, .marquee-wrap, .bottom-nav, .site-top-link { position: relative; z-index: 1; } ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--bg3); } ::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 99px; } .hidden { display: none !important; } .view-enter { animation: vIn 0.4s var(--ease) both; } @keyframes vIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* Closure */ #closure-overlay { position: fixed; inset: 0; z-index: 999999999; background: rgba(15, 23, 42, 0.42); backdrop-filter: blur(14px); display: none; align-items: center; justify-content: center; padding: var(--container-padding); } #closure-overlay::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(239, 248, 255, 0.82), rgba(255, 255, 255, 0.78)), radial-gradient(ellipse 80% 50% at 10% 0%, rgba(14,165,233,0.24), transparent 52%), radial-gradient(ellipse 60% 40% at 90% 0%, rgba(34,197,94,0.12), transparent 48%); pointer-events: none; } .closure-container { background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(240,249,255,0.96)), linear-gradient(135deg, rgba(14,165,233,0.14), transparent 55%); border: 1px solid rgba(14, 165, 233, 0.28); border-radius: 24px; padding: clamp(28px, 5vw, 46px); max-width: 520px; width: 100%; text-align: center; box-shadow: 0 26px 70px rgba(15, 23, 42, 0.2), inset 0 1px 0 rgba(255,255,255,0.9); position: relative; z-index: 1; overflow: hidden; } .closure-container::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #0ea5e9, #22c55e); height: 5px; pointer-events: none; } .closure-icon { width: 76px; height: 76px; margin: 0 auto 18px; border-radius: 22px; display: grid; place-items: center; background: linear-gradient(135deg, #0ea5e9, #0369a1); color: #fff; font-size: 32px; box-shadow: 0 16px 35px rgba(14, 165, 233, 0.32); } .closure-datetime-pill { margin-top: 4px; padding: 10px 16px; background: #eff8ff; border: 1px solid rgba(14, 165, 233, 0.22); border-radius: 999px; display: inline-flex; align-items: center; gap: 9px; color: #0369a1; font-size: 13px; font-weight: 800; box-shadow: 0 8px 22px rgba(14, 165, 233, 0.1); } .closure-title { font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-size: clamp(25px, 4.5vw, 38px); font-weight: 900; color: #0f172a; margin: 18px 0 14px; letter-spacing: 0; } .closure-message { font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-size: 14.5px; color: #475569; line-height: 1.75; margin-bottom: 26px; } .closure-status { display: inline-flex; align-items: center; gap: 8px; background: #fff1f2; border: 1px solid #fecdd3; border-radius: 99px; padding: 9px 15px; font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-size: 13px; font-weight: 900; color: #be123c; box-shadow: 0 8px 18px rgba(244, 63, 94, 0.12); } .status-dot { width: 9px; height: 9px; background: #dc2626; border-radius: 50%; animation: pulse 2s infinite; } .closure-contact { display: inline-flex; align-items: center; gap: 9px; margin-top: 22px; text-decoration: none; padding: 13px 24px; background: linear-gradient(135deg, #0ea5e9, #0369a1); color: #fff; border-radius: 14px; font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-weight: 900; font-size: 14px; box-shadow: 0 14px 28px rgba(14, 165, 233, 0.28); border: 1px solid rgba(255,255,255,0.45); } .closure-contact:hover { transform: translateY(-1px); box-shadow: 0 18px 34px rgba(14, 165, 233, 0.34); } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } /* Tawk.to Custom Styles */ iframe[title*="Tawk"], #tawkchat-iframe-container, #tawkchat-container, .tawk-to-chat-widget { z-index: 99999 !important; } /* Top bar & marquee */ .site-top-link { background: var(--ink2); height: 32px; display: flex; align-items: center; justify-content: center; } .site-top-link a { color: #e2e8f0; font-size: 11px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .site-top-link a:hover { color: #fff; } .site-header { position: relative; z-index: 200; margin-top: 0; } .marquee-wrap { background: var(--primary-gradient); height: 34px; overflow: hidden; display: flex; align-items: center; position: relative; } .marquee-track { display: flex; white-space: nowrap; animation: marqueeScroll 32s linear infinite; } .marquee-track:hover { animation-play-state: paused; } @keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquee-item { display: inline-flex; align-items: center; gap: 8px; padding: 0 28px; font-size: 10px; font-weight: 600; letter-spacing: 0.8px; color: rgba(255,255,255,0.95); text-transform: uppercase; } .marquee-item i { opacity: 0.85; } /* Nav */ nav { position: relative; height: var(--nav-h); background: rgba(255,255,255,0.88); backdrop-filter: blur(16px) saturate(1.2); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); } .nav-inner { max-width: 1280px; margin: 0 auto; padding: 0 var(--container-padding); height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .nav-brand { display: flex; align-items: center; gap: 12px; background: none; border: none; cursor: pointer; padding: 0; } .nav-logo { width: 56px; height: 56px; border-radius: 14px; overflow: hidden; border: 2px solid var(--border); box-shadow: var(--shadow-sm); background: #fff; padding: 1px; } .nav-logo img { width: 100%; height: 100%; object-fit: contain; } .nav-wordmark { font-size: 17px; font-weight: 800; color: var(--ink2); letter-spacing: -0.3px; } .nav-links { display: flex; gap: 6px; } .nav-links a { font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; cursor: pointer; padding: 8px 14px; border-radius: 99px; transition: all 0.2s; } .nav-links a:hover { color: var(--primary); background: rgba(14,165,233,0.08); } .nav-right { display: flex; align-items: center; gap: 8px; } .search-btn, .cart-btn { width: 40px; height: 40px; border-radius: 12px; background: var(--bg3); border: 1px solid var(--border); cursor: pointer; color: var(--ink); font-size: 14px; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .search-btn:hover, .cart-btn:hover { border-color: var(--primary2); color: var(--primary); background: #fff; } .cart-btn { position: relative; width: auto; padding: 0 14px; gap: 6px; transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .cart-badge { position: absolute; top: -4px; right: -4px; background: var(--primary); color: #fff; font-size: 9px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 99px; display: none; align-items: center; justify-content: center; } .btn-wa { display: flex; align-items: center; gap: 8px; background: #25d366; color: #fff; padding: 10px 16px; border-radius: 12px; font-size: 12px; font-weight: 700; text-decoration: none; transition: all 0.2s; box-shadow: 0 4px 14px rgba(37,211,102,0.35); } .btn-wa:hover { transform: translateY(-1px); filter: brightness(1.05); } .nav-ham { display: none; flex-direction: column; gap: 5px; cursor: pointer; width: 42px; height: 42px; align-items: center; justify-content: center; padding: 0; border-radius: 14px; border: 1px solid rgba(14,165,233,0.16); background: linear-gradient(135deg, #ffffff, #eef8ff); box-shadow: 0 8px 22px rgba(14,165,233,0.12); } .nav-ham span { display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .22s var(--ease), opacity .18s, width .22s; } .nav-ham.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-ham.is-open span:nth-child(2) { opacity: 0; width: 10px; } .nav-ham.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .site-header-nav-wrap { position: relative; } #mob-menu { display: block; position: absolute; left: var(--container-padding); right: var(--container-padding); top: calc(100% + 10px); z-index: 250; background: rgba(255,255,255,0.94); border: 1px solid rgba(14,165,233,0.16); padding: 10px; box-shadow: 0 18px 52px rgba(15,23,42,0.16); border-radius: 20px; backdrop-filter: blur(18px) saturate(1.25); opacity: 0; transform: translateY(-10px) scale(.98); pointer-events: none; transition: opacity .22s var(--ease), transform .22s var(--ease); } #mob-menu.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } #mob-menu a { font-size: 14px; font-weight: 800; color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: 10px; padding: 13px 14px; border-bottom: 0; border-radius: 14px; min-height: 48px; background: transparent; transition: background .18s, color .18s, transform .18s; } #mob-menu a i { width: 30px; height: 30px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: rgba(14,165,233,0.1); color: var(--primary); } #mob-menu a:hover { color: var(--primary); background: rgba(14,165,233,0.08); transform: translateX(2px); } #mob-menu a:last-child { border-bottom: none; } /* Search */ #search-overlay { position: fixed; inset: 0; z-index: 800; background: rgba(255,255,255,0.97); backdrop-filter: blur(12px); display: none; flex-direction: column; align-items: center; padding: 100px 16px 24px; } #search-overlay.show { display: flex; } .search-box-wrap { width: 100%; max-width: 640px; } .search-input-row { display: flex; align-items: center; gap: 12px; background: #fff; border: 2px solid var(--border); border-radius: 16px; padding: 14px 18px; box-shadow: var(--shadow); margin-bottom: 24px; } .search-input-row:focus-within { border-color: var(--primary2); box-shadow: var(--shadow-glow); } .search-input-row i { color: var(--primary); font-size: 18px; } #search-input { flex: 1; border: none; outline: none; font-size: 18px; font-weight: 600; color: var(--ink); background: transparent; } #search-input::placeholder { color: var(--muted2); font-weight: 400; } .search-close { background: var(--bg3); border: none; width: 36px; height: 36px; border-radius: 10px; cursor: pointer; color: var(--muted); } .search-hints { display: flex; flex-wrap: wrap; gap: 8px; margin: -10px 0 20px; } .search-hints button { border: 1px solid rgba(14,165,233,0.16); background: rgba(255,255,255,0.86); color: var(--muted); border-radius: 99px; padding: 8px 12px; font-size: 11px; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: all 0.2s ease; } .search-hints button:hover { color: var(--primary); border-color: rgba(14,165,233,0.35); transform: translateY(-1px); } #search-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; width: 100%; max-width: 640px; } .search-summary { grid-column: 1/-1; font-size: 12px; font-weight: 700; color: var(--muted); background: rgba(14,165,233,0.07); border: 1px solid rgba(14,165,233,0.12); border-radius: 12px; padding: 10px 12px; } .search-summary b { color: var(--primary); } .search-card { cursor: pointer; } .sr-empty { text-align: center; color: var(--muted); padding: 40px; grid-column: 1/-1; } .wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--container-padding) 100px; } /* Hero */ .hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 64px); align-items: center; padding: var(--section-spacing) 0 clamp(32px, 4vw, 48px); position: relative; } /* Decorative floating elements */ .hero::before, .hero::after { content: ''; position: absolute; border-radius: 50%; filter: blur(40px); z-index: 0; pointer-events: none; } .hero::before { width: 200px; height: 200px; top: 5%; left: -10%; background: linear-gradient(135deg, rgba(14,165,233,0.25), rgba(6,182,212,0.15)); animation: floatC 8s ease-in-out infinite; } .hero::after { width: 160px; height: 160px; bottom: 10%; right: -8%; background: linear-gradient(135deg, rgba(124,58,237,0.2), rgba(139,92,246,0.12)); animation: floatD 10s ease-in-out infinite; } .hero-left, .hero-right { position: relative; z-index: 1; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 1px solid rgba(14,165,233,0.15); padding: 8px 18px; border-radius: 99px; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--primary); box-shadow: 0 4px 16px rgba(14,165,233,0.08); margin-bottom: 24px; } .ey-dot { width: 7px; height: 7px; background: var(--green); border-radius: 50%; animation: pulse 2s infinite; box-shadow: 0 0 0 6px rgba(16,185,129,0.1); } .hero-h1 { font-family: var(--ff-disp); font-size: clamp(38px, 6vw, 62px); font-weight: 800; line-height: 1.05; letter-spacing: -1.8px; color: var(--ink2); margin-bottom: 20px; } .hero-h1 em { font-style: normal; background: var(--primary-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; } .hero-desc { font-size: 16px; color: var(--muted); line-height: 1.8; max-width: 460px; margin-bottom: 32px; } .hero-stats { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 32px; } .hstat { flex: 1; min-width: 110px; background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); border: 1px solid rgba(14,165,233,0.12); border-radius: var(--radius); padding: 18px 20px; box-shadow: 0 6px 24px rgba(15,23,42,0.06); transition: all 0.3s ease; } .hstat:hover { transform: translateY(-4px); border-color: rgba(14,165,233,0.25); box-shadow: 0 10px 32px rgba(14,165,233,0.1); } .hstat-n { font-size: 28px; font-weight: 800; color: var(--primary); line-height: 1; } .hstat-l { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-top: 8px; } .hero-cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 24px; } .btn-primary { display: inline-flex; align-items: center; gap: 10px; background: var(--primary-gradient); color: #fff; padding: 16px 28px; border-radius: 16px; font-size: 14px; font-weight: 700; border: none; cursor: pointer; text-decoration: none; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 10px 30px var(--primary-glow); } .btn-primary:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 14px 40px var(--primary-glow); } .btn-ghost { display: inline-flex; align-items: center; gap: 10px; background: #fff; color: var(--ink); border: 1px solid rgba(14,165,233,0.15); padding: 16px 26px; border-radius: 16px; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; transition: all 0.25s ease; } .btn-ghost:hover { border-color: rgba(14,165,233,0.3); color: var(--primary); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(14,165,233,0.08); } .hero-proof-strip { display: flex; flex-wrap: wrap; gap: 10px; } .proof-pill { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; color: var(--muted); background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); border: 1px solid rgba(14,165,233,0.12); padding: 8px 16px; border-radius: 99px; transition: all 0.25s ease; } .proof-pill:hover { border-color: rgba(14,165,233,0.25); transform: translateY(-2px); } .proof-pill i { color: var(--primary); font-size: 11px; } .hero-vid-wrap { position: relative; } .hero-vid { border-radius: 22px; overflow: hidden; background: #fff; border: 1px solid rgba(14,165,233,0.12); box-shadow: 0 20px 60px rgba(14,165,233,0.15); transition: all 0.3s ease; } .hero-vid:hover { transform: scale(1.02); box-shadow: 0 24px 70px rgba(14,165,233,0.2); } .hero-vid video { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; } .vid-tag { position: absolute; bottom: 18px; left: 18px; z-index: 2; background: rgba(255,255,255,0.98); backdrop-filter: blur(12px); border: 1px solid rgba(14,165,233,0.18); border-radius: 99px; padding: 8px 16px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--primary); display: flex; align-items: center; gap: 8px; } .vdot { width: 7px; height: 7px; background: var(--green); border-radius: 50%; animation: pulse 1.5s infinite; box-shadow: 0 0 0 6px rgba(16,185,129,0.12); } .hero-float-1, .hero-float-2 { position: absolute; z-index: 3; background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); border: 1px solid rgba(14,165,233,0.15); border-radius: 16px; padding: 12px 18px; font-size: 11px; font-weight: 700; color: var(--ink); box-shadow: 0 10px 30px rgba(15,23,42,0.12); display: flex; align-items: center; gap: 10px; } .hero-float-1 { top: -16px; right: -12px; animation: floatA 5s ease-in-out infinite; } .hero-float-2 { bottom: -16px; left: -12px; animation: floatB 6s 1.5s ease-in-out infinite; } @keyframes floatA { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(2deg); } } @keyframes floatB { 0%, 100% { transform: translateY(0) rotate(2deg); } 50% { transform: translateY(10px) rotate(-2deg); } } @keyframes floatC { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(20px, -30px) scale(1.1); } } @keyframes floatD { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-20px, 20px) scale(1.08); } } .float-ic { width: 34px; height: 34px; border-radius: 12px; background: linear-gradient(135deg, rgba(14,165,233,0.12), rgba(6,182,212,0.08)); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 14px; } /* Trust */ .trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 8px; background: linear-gradient(135deg, rgba(14,165,233,0.08), rgba(255,255,255,0.9)); border: 1px solid rgba(14,165,233,0.1); border-radius: var(--radius-lg); padding: 12px; } .trust-item { background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); border: 1px solid rgba(14,165,233,0.12); border-radius: var(--radius); padding: 18px; display: flex; gap: 14px; transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 4px 20px rgba(15,23,42,0.05); } .trust-item:hover { border-color: rgba(14,165,233,0.3); box-shadow: 0 14px 40px rgba(14,165,233,0.12), 0 4px 12px rgba(15,23,42,0.06); transform: translateY(-4px); } .trust-ic { width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0; background: linear-gradient(135deg, rgba(14,165,233,0.12), rgba(6,182,212,0.08)); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 18px; box-shadow: 0 4px 16px rgba(14,165,233,0.1); transition: all 0.3s ease; } .trust-item:hover .trust-ic { background: var(--primary-gradient); color: #fff; box-shadow: 0 8px 24px var(--primary-glow); transform: scale(1.08); } .trust-title { font-size: 13px; font-weight: 800; color: var(--ink2); } .trust-sub { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.5; } /* Countdown */ .countdown-strip { background: var(--primary-gradient); color: #fff; border-radius: var(--radius-lg); padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin: 40px 0; box-shadow: var(--shadow-glow); } .cd-label { font-size: 20px; font-weight: 800; } .cd-sub { font-size: 12px; opacity: 0.9; margin-top: 2px; } .cd-left { display: flex; align-items: center; gap: 12px; } .cd-fire { font-size: 24px; } .cd-right { display: flex; gap: 8px; } .cd-unit { background: rgba(255,255,255,0.2); border-radius: 12px; padding: 10px 14px; min-width: 56px; text-align: center; } .cd-num { font-size: 24px; font-weight: 800; line-height: 1; } .cd-ulab { font-size: 8px; text-transform: uppercase; letter-spacing: 1px; opacity: 0.85; margin-top: 4px; } .div { border: none; height: 1px; background: var(--border); margin: 48px 0; } .sh { margin-bottom: 24px; } .sh-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--primary); margin-bottom: 6px; } .sh-title { font-family: var(--ff-disp); font-size: clamp(24px, 3vw, 34px); font-weight: 800; color: var(--ink2); letter-spacing: -0.5px; } .section-panel { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(20px, 3vw, 32px); box-shadow: var(--shadow-sm); margin-bottom: 32px; } .detail-note { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; color: var(--primary); background: rgba(14,165,233,0.08); border: 1px dashed rgba(14,165,233,0.35); border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; } .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.5s, transform 0.5s; } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 0.08s; } .reveal-delay-2 { transition-delay: 0.16s; } .reveal-delay-3 { transition-delay: 0.24s; } /* Game grid */ .platform-filter-bar { display: flex; gap: 10px; margin: 14px 0 18px; padding: 6px; border: 1px solid rgba(14,165,233,0.14); border-radius: 18px; background: rgba(255,255,255,0.72); box-shadow: 0 10px 28px rgba(15,23,42,0.05); } .platform-chip { flex: 1; min-height: 46px; border: none; border-radius: 14px; background: transparent; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; font-weight: 900; cursor: pointer; transition: background .18s, color .18s, transform .18s, box-shadow .18s; } .platform-chip b { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 99px; background: rgba(14,165,233,0.1); color: var(--primary3); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; } .platform-chip.active { background: var(--primary-gradient); color: #fff; box-shadow: 0 10px 24px rgba(14,165,233,0.22); } .platform-chip.active b { background: rgba(255,255,255,0.24); color: #fff; } .platform-chip:hover { transform: translateY(-1px); } #game-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; } .gc { display: flex; flex-direction: column; align-items: center; gap: 10px; cursor: pointer; background: none; border: none; padding: 0; } .gc.oos { cursor: not-allowed; opacity: 0.45; pointer-events: none; } .gc-icon-wrap { width: 100%; aspect-ratio: 1; border-radius: 18px; overflow: hidden; border: 2px solid var(--border); background: var(--bg3); transition: all 0.3s var(--ease); box-shadow: var(--shadow-sm); } .gc-icon-wrap img, .gc-icon-wrap video { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; display: block; } .gc:not(.oos):hover .gc-icon-wrap { border-color: var(--primary2); transform: translateY(-4px); box-shadow: var(--shadow-glow); } .gc:not(.oos):hover .gc-icon-wrap img, .gc:not(.oos):hover .gc-icon-wrap video { transform: scale(1.06); } .gc.active .gc-icon-wrap { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(14,165,233,0.2); } .gc-name { font-size: 10px; font-weight: 700; text-align: center; color: var(--ink); text-transform: uppercase; letter-spacing: 0.3px; } .gc:not(.oos):hover .gc-name { color: var(--primary); } .gc-badge { position: absolute; top: 6px; right: 6px; z-index: 2; max-width: calc(100% - 12px); padding: 4px 8px; border-radius: 99px; font-size: clamp(7px, 1.6vw, 9px); line-height: 1.1; font-weight: 900; text-transform: uppercase; letter-spacing: .25px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: linear-gradient(135deg, var(--primary), var(--primary3)); color: #fff; box-shadow: 0 5px 14px rgba(14,165,233,.25); } .gc-icon-wrap { position: relative; } .gc-badge.hot { background: var(--red); color: #fff; } .gc-badge.new { background: var(--primary); color: #fff; } .gc-badge.sale { background: var(--orange); color: #fff; } .gc-badge.ready { background: var(--green); color: #fff; } .gc-badge.consultation { background: linear-gradient(135deg, #16a34a, #0ea5e9); color: #fff; } .gc-badge.soon { background: var(--muted2); color: #fff; } .gc-badge.akan-dihapus, .gc-badge.delete-soon, .gc-badge.removing, .gc-badge.limited { background: linear-gradient(135deg, #111827, #f59e0b); color: #fff; } .gc-badge.last-stock, .gc-badge.last { background: linear-gradient(135deg, #ef4444, #f97316); color: #fff; } .gc-badge.update, .gc-badge.updated { background: linear-gradient(135deg, #7c3aed, #0ea5e9); color: #fff; } .oos-pill { position: absolute; top: 6px; right: 6px; background: rgba(15,23,42,0.8); color: #fff; font-size: 8px; padding: 3px 8px; border-radius: 99px; } /* Page header */ .ph { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; } .ph > div:not(.ph-actions) { min-width: 0; } .ph-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; } .bk { width: 44px; height: 44px; border-radius: 12px; background: #fff; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--muted); cursor: pointer; transition: all 0.2s; } .bk:hover { background: var(--primary); border-color: var(--primary); color: #fff; } .ph-title { font-size: clamp(24px, 4vw, 32px); font-weight: 800; color: var(--ink2); letter-spacing: -0.5px; } .ph-count { font-size: 13px; color: var(--primary); font-weight: 600; margin-top: 4px; } .product-filter-bar { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 14px; margin-bottom: 6px; scrollbar-width: none; } .product-filter-bar::-webkit-scrollbar { display: none; } .product-filter-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(14,165,233,0.16); background: rgba(255,255,255,0.86); color: var(--muted); font-size: 12px; font-weight: 800; cursor: pointer; box-shadow: 0 5px 16px rgba(15,23,42,0.04); transition: transform .18s, border-color .18s, background .18s, color .18s; } .product-filter-chip b { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(14,165,233,0.1); color: var(--primary3); font-size: 10px; } .product-filter-chip:hover { transform: translateY(-1px); border-color: rgba(14,165,233,0.32); color: var(--primary); } .product-filter-chip.active { background: var(--primary-gradient); border-color: transparent; color: #fff; box-shadow: 0 10px 24px rgba(14,165,233,0.2); } .product-filter-chip.active b { background: rgba(255,255,255,0.22); color: #fff; } /* Products */ #inventory-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; } .permanent-fruit-picker { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(220px, 330px); gap: 14px; align-items: center; padding: 16px 18px; border: 1px solid rgba(14,165,233,.22); border-radius: 18px; background: linear-gradient(135deg, rgba(224,247,255,.88), rgba(255,255,255,.96)); box-shadow: 0 10px 24px rgba(14,165,233,.08); } .permanent-fruit-picker-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: var(--primary-gradient); color: #fff; font-size: 18px; } .permanent-fruit-picker-copy { min-width: 0; display: grid; gap: 3px; } .permanent-fruit-picker-copy b { color: var(--ink2); font-size: 15px; } .permanent-fruit-picker-copy span { color: var(--muted); font-size: 12px; line-height: 1.45; } .permanent-fruit-select-wrap { display: grid; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; } .permanent-fruit-select-wrap select { width: 100%; min-height: 42px; padding: 0 36px 0 12px; border: 1px solid rgba(14,165,233,.28); border-radius: 11px; outline: none; background: #fff; color: var(--ink2); font: inherit; font-size: 13px; font-weight: 800; text-transform: none; letter-spacing: 0; cursor: pointer; } .permanent-fruit-select-wrap select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(14,165,233,.12); } .permanent-selected-card { width: 100%; max-width: 360px; } .product-subsection { grid-column: 1 / -1; border: 1px solid rgba(14,165,233,0.16); border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(240,249,255,0.45)); box-shadow: 0 14px 34px rgba(15,23,42,0.06); padding: 14px; } .product-subhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 2px 14px; } .product-subhead > div { min-width: 0; display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 900; color: var(--ink2); text-transform: uppercase; letter-spacing: .5px; } .product-subhead i { width: 30px; height: 30px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: rgba(14,165,233,0.1); color: var(--primary); flex-shrink: 0; } .product-subhead b { flex-shrink: 0; padding: 7px 10px; border-radius: 99px; background: #fff; border: 1px solid var(--border); color: var(--primary); font-size: 11px; } .product-subgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; } .pc { background: #ffffff; border: 1px solid rgba(14, 165, 233, 0.15); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; content-visibility: auto; contain-intrinsic-size: 0 320px; transition: all 0.3s ease; height: 100%; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06); position: relative; } .pc:hover { border-color: rgba(14, 165, 233, 0.3); box-shadow: 0 12px 28px rgba(14, 165, 233, 0.15); transform: translateY(-4px); } .pc.hidden { display: none; } .product-empty { grid-column: 1 / -1; text-align: center; padding: 56px 0; color: var(--muted); font-size: 14px; } .product-skeleton { pointer-events: none; } .product-skeleton .pimg, .product-skeleton .pbody span, .product-skeleton .skeleton-row span { background: linear-gradient(90deg, #eef6fb 0%, #ffffff 45%, #eef6fb 90%); background-size: 220% 100%; animation: skeletonSweep 1.2s ease-in-out infinite; } .product-skeleton .pbody { gap: 10px; } .product-skeleton .pbody span { display: block; height: 12px; border-radius: 999px; } .product-skeleton .pbody span:nth-child(1) { width: 78%; height: 15px; } .product-skeleton .pbody span:nth-child(2) { width: 52%; } .product-skeleton .pbody span:nth-child(3) { width: 92%; } .product-skeleton .skeleton-row { display: flex; justify-content: space-between; gap: 10px; margin-top: auto; } .product-skeleton .skeleton-row span { width: 45%; height: 34px; } @keyframes skeletonSweep { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } } .ptag { position: absolute; top: 12px; left: 12px; z-index: 2; background: var(--primary-gradient); color: #fff; font-size: 10px; font-weight: 900; padding: 6px 12px; border-radius: 99px; text-transform: uppercase; letter-spacing: 0.6px; box-shadow: 0 4px 14px var(--primary-glow); } .pimg { aspect-ratio: 4/3; background: linear-gradient(135deg, #f8fafc, #e0f2fe); position: relative; overflow: hidden; cursor: zoom-in; } .pimg img, .pimg video, .product-media { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; display: block; } .pc:hover .pimg img, .pc:hover .pimg video { transform: scale(1.05); } .product-media-split { width: 100%; height: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; background: linear-gradient(135deg, #e0f2fe, #f8fafc); } .split-media-panel { position: relative; min-width: 0; height: 100%; overflow: hidden; border-radius: 14px; background: #fff; border: 1px solid rgba(14,165,233,.16); } .pimg .split-media-panel img, .pimg .split-media-panel video { width: 100%; height: 100%; object-fit: contain; display: block; background: #fff; transform: none !important; } .split-media-video video { background: #020617; object-fit: cover; } .split-media-panel span { position: absolute; left: 6px; bottom: 6px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; max-width: calc(100% - 12px); padding: 4px 7px; border-radius: 999px; background: rgba(2, 6, 23, .72); color: #fff; font-size: 9px; font-weight: 900; line-height: 1; white-space: nowrap; } .media-type-pill { position: absolute; left: 10px; top: 10px; z-index: 3; display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px; background: rgba(15,23,42,.72); color: #fff; font-size: 10px; font-weight: 800; backdrop-filter: blur(8px); } .media-empty { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 24px; } .pquick { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; gap: 8px; transform: translateY(12px); opacity: 0; transition: all 0.25s ease; } .pc:hover .pquick { opacity: 1; transform: translateY(0); } .pquick-btn { flex: 1; height: 38px; border: none; border-radius: 10px; font-size: 11px; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: all 0.2s ease; touch-action: manipulation; } .pquick-btn.cart { background: rgba(255,255,255,0.98); color: var(--primary); box-shadow: 0 4px 12px rgba(15,23,42,0.12); } .pquick-btn.buy { background: var(--primary-gradient); color: #fff; box-shadow: 0 4px 12px var(--primary-glow); } .pquick-btn:hover { transform: translateY(-2px); } .pquick-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; } .stock-badge { position: absolute; bottom: 12px; right: 12px; z-index: 3; font-size: 10px; font-weight: 900; padding: 6px 12px; border-radius: 99px; backdrop-filter: blur(8px); } .stock-badge.out { background: rgba(239,68,68,0.15); color: #dc2626; border: 1px solid rgba(239,68,68,0.25); } .stock-badge.low { background: rgba(245,158,11,0.15); color: #d97706; border: 1px solid rgba(245,158,11,0.25); } .stock-badge.ready { background: rgba(16,185,129,0.16); color: #059669; border: 1px solid rgba(16,185,129,0.25); } .stock-badge.last, .stock-badge.critical { background: rgba(244,63,94,0.16); color: #e11d48; border: 1px solid rgba(244,63,94,0.25); } .pstatus-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; } .pstatus-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; border-radius: 99px; padding: 5px 8px; font-size: 9px; font-weight: 900; line-height: 1; border: 1px solid rgba(14,165,233,0.12); background: rgba(14,165,233,0.07); color: var(--primary); } .pstatus-chip.ready { background: rgba(16,185,129,0.1); color: #059669; border-color: rgba(16,185,129,0.2); } .pstatus-chip.low, .pstatus-chip.critical, .pstatus-chip.last { background: rgba(245,158,11,0.12); color: #d97706; border-color: rgba(245,158,11,0.22); } .pstatus-chip.out { background: rgba(239,68,68,0.1); color: #dc2626; border-color: rgba(239,68,68,0.2); } .pstatus-chip.promo { background: rgba(124,58,237,0.1); color: #7c3aed; border-color: rgba(124,58,237,0.2); } .pstatus-chip.video { background: rgba(14,165,233,0.1); color: var(--primary); } .pstatus-chip.updated { background: rgba(15,23,42,0.05); color: var(--muted); } .pbody { padding: 16px; flex: 1; display: flex; flex-direction: column; border-top: 1px solid rgba(14,165,233,0.08); } .pname { font-size: 14px; font-weight: 800; color: var(--ink2); line-height: 1.3; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .psold { font-size: 11px; color: var(--muted); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; } .pdesc { font-size: 12px; color: var(--ink); opacity: 0.85; line-height: 1.4; margin-bottom: 12px; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pfoot { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid rgba(14,165,233,0.08); } .pfoot-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .pprice { font-size: 20px; font-weight: 900; color: var(--primary); line-height: 1; } .pprice-old { font-size: 11px; color: var(--muted2); text-decoration: line-through; margin-left: 6px; } .pcart-hint { font-size: 10px; font-weight: 700; color: var(--green); display: none; align-items: center; gap: 4px; } .pcart-hint.show { display: inline-flex; } .pactions { display: flex; gap: 8px; width: 100%; } .padd { height: 42px; min-width: 42px; padding: 0 12px; border-radius: 12px; background: var(--primary-gradient); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: all 0.2s ease; font-size: 12px; font-weight: 800; touch-action: manipulation; -webkit-tap-highlight-color: transparent; box-shadow: 0 6px 20px var(--primary-glow); flex-shrink: 0; position: relative; } .padd-txt { letter-spacing: 0.2px; } .padd-qty { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 99px; background: #10b981; color: #fff; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; box-shadow: 0 3px 10px rgba(16,185,129,0.3); } .padd.in-cart { background: linear-gradient(135deg, #0ea5e9, #0284c7); } .padd:hover { transform: translateY(-2px); box-shadow: 0 8px 24px var(--primary-glow); } .padd:active { transform: translateY(0); } .padd:disabled { background: var(--bg3); color: var(--muted2); cursor: not-allowed; transform: none; box-shadow: none; } .pbuy { flex: 1; min-width: 0; height: 42px; padding: 0 14px; border-radius: 12px; background: linear-gradient(135deg, #10b981, #059669); color: #fff; border: none; font-size: 12px; font-weight: 900; cursor: pointer; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 8px 24px rgba(16,185,129,0.3); white-space: nowrap; touch-action: manipulation; -webkit-tap-highlight-color: transparent; letter-spacing: 0.5px; } @keyframes popIn { from { transform: scale(0); } to { transform: scale(1); } } @keyframes flyToCart { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.3) translate(var(--fly-x, 120px), var(--fly-y, -300px)); opacity: 0; } } .fly-dot { position: fixed; z-index: 999999; width: 18px; height: 18px; border-radius: 50%; background: var(--primary-gradient); pointer-events: none; animation: flyToCart 0.65s cubic-bezier(0.55, 0, 1, 0.45) forwards; box-shadow: 0 4px 16px var(--primary-glow); } .pbuy:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(16,185,129,0.4); } .pbuy:active { transform: translateY(0); } .pbuy:disabled { opacity: 0.5; cursor: not-allowed; background: #6b7280; box-shadow: none; } /* Catalog purchase calls-to-action: hand off to WhatsApp instead of pretending payment happens on-site. */ .whatsapp-buy { background: linear-gradient(135deg, #25d366, #128c47) !important; color: #fff !important; box-shadow: 0 9px 22px rgba(18,140,71,.28) !important; } .whatsapp-buy:hover { box-shadow: 0 12px 26px rgba(18,140,71,.36) !important; } .pbuy.whatsapp-buy { display: inline-flex; align-items: center; justify-content: center; gap: 7px; } .store-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0 0 26px; } .store-tool { padding: 18px; border: 1px solid #d8ebf7; border-radius: 14px; background: #fff; box-shadow: 0 9px 20px rgba(30,93,131,.06); } .store-tool-head { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; } .store-tool-head strong { display: block; color: #0b2949; font-size: .96rem; } .store-tool-head span { display: block; margin-top: 3px; color: #69809a; font-size: .7rem; line-height: 1.35; } .store-tool-icon { width: 39px; height: 39px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; color: #fff; background: linear-gradient(135deg, #0ea5e9, #18b8cd); } .store-tool-icon.green { background: linear-gradient(135deg, #25d366, #128c47); } .currency-form { display: grid; grid-template-columns: minmax(92px, 1fr) minmax(112px, 1.15fr) 35px minmax(112px, 1.15fr); gap: 8px; align-items: end; } .currency-form label, .price-calculator-form label { display: grid; gap: 5px; color: #52708e; font-size: .66rem; font-weight: 850; } .currency-form input, .currency-form select, .price-calculator-form input { width: 100%; height: 39px; padding: 0 9px; border: 1px solid #c8e4f5; border-radius: 9px; color: #123252; background: #f9fdff; font: inherit; font-size: .74rem; outline: none; } .currency-form input:focus, .currency-form select:focus, .price-calculator-form input:focus { border-color: #15a8df; box-shadow: 0 0 0 3px rgba(14,165,233,.1); } .currency-swap { width: 35px; height: 39px; border: 1px solid #bfe4f6; border-radius: 9px; color: #0789c9; background: #effaff; cursor: pointer; } .currency-result { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 11px 12px; border-radius: 10px; background: linear-gradient(135deg, #eefaff, #f2fff7); } .currency-result span { color: #52708e; font-size: .68rem; font-weight: 800; } .currency-result strong { color: #087ebc; font-size: 1.12rem; line-height: 1; } .price-result strong { color: #16874d; } .currency-status { display: flex; align-items: flex-start; gap: 6px; margin-top: 9px; color: #6c8199; font-size: .63rem; font-weight: 700; line-height: 1.45; } .currency-status i { margin-top: 1px; color: #0b9bd5; } .price-calculator-form { display: grid; grid-template-columns: 1.35fr .8fr; gap: 8px; } .custom-vote { margin: 0 0 26px; } .custom-vote.is-hidden { display: none; } .custom-vote-card { padding: 20px; border: 1px solid #ccebf7; border-radius: 16px; background: linear-gradient(135deg, #ffffff 0%, #effaff 100%); box-shadow: 0 11px 24px rgba(14, 116, 162, .08); } .custom-vote-head { display: grid; grid-template-columns: 45px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding-bottom: 15px; border-bottom: 1px solid #d8eef8; } .custom-vote-icon { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 13px; color: #fff; background: linear-gradient(135deg, #0ea5e9, #16bf85); box-shadow: 0 8px 16px rgba(14, 165, 233, .2); } .custom-vote-icon img { display: block; width: 35px; height: 35px; object-fit: contain; border-radius: 10px; } .custom-vote.is-ended .custom-vote-card { border-color: rgba(234, 88, 12, .38); } .custom-vote.is-ended .custom-vote-head > div:nth-child(2) > span { color: #c2410c; } .custom-vote-head > div:nth-child(2) { min-width: 0; } .custom-vote-head span { display: block; color: #148bc0; font-size: .62rem; font-weight: 900; letter-spacing: .08em; } .custom-vote-head h2 { margin: 3px 0 3px; color: #0b2949; font-size: 1.05rem; line-height: 1.2; } .custom-vote-head p { margin: 0; color: #63809a; font-size: .72rem; line-height: 1.45; } .custom-vote-total { min-width: 54px; padding: 8px 9px; border-radius: 11px; text-align: center; background: #fff; border: 1px solid #d6edf8; } .custom-vote-total strong { display: block; color: #0a9bd4; font-size: 1.05rem; line-height: 1; } .custom-vote-total span { margin-top: 3px; color: #6f88a0; font-size: .56rem; letter-spacing: 0; } .custom-vote-options { display: grid; gap: 9px; margin-top: 15px; } .custom-vote-option { position: relative; overflow: hidden; width: 100%; min-height: 47px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid #cbe9f6; border-radius: 11px; color: #163b5a; background: #fff; text-align: left; cursor: pointer; isolation: isolate; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; } .custom-vote-option:hover { transform: translateY(-1px); border-color: #38b4e8; box-shadow: 0 7px 15px rgba(14,165,233,.1); } .custom-vote-option:disabled { cursor: default; } .custom-vote-option.is-voted { border-color: #18b979; color: #08754b; } .custom-vote-option-fill { position: absolute; inset: 0 auto 0 0; width: var(--vote-percent, 0%); z-index: -1; background: linear-gradient(90deg, rgba(25, 190, 131, .15), rgba(14, 165, 233, .07)); transition: width .3s ease; } .custom-vote-option-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; font-weight: 850; } .custom-vote-option-count { display: grid; gap: 1px; justify-items: end; color: #0a94cb; font-size: .72rem; font-weight: 900; } .custom-vote-option-count small { color: #6d87a0; font-size: .57rem; font-weight: 750; } .custom-vote-note { display: flex; gap: 7px; margin-top: 12px; color: #71889f; font-size: .62rem; line-height: 1.4; } .custom-vote-note i { color: #16b879; margin-top: 1px; } .vote-admin-panel { margin: 16px 0 20px; padding: 14px; border: 1px solid rgba(22, 185, 121, .28); border-radius: 15px; background: linear-gradient(135deg, rgba(240, 255, 248, .9), rgba(239, 250, 255, .86)); } .vote-admin-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .vote-admin-head span { display: block; color: #12936a; font-size: 9px; font-weight: 900; letter-spacing: .08em; } .vote-admin-head h3 { margin: 3px 0; color: #103350; font-size: 14px; } .vote-admin-head p { margin: 0; color: #67839a; font-size: 11px; line-height: 1.4; } .vote-admin-head button, .vote-reset-btn { border: 1px solid #bfe7da; border-radius: 9px; color: #0b8b61; background: #fff; padding: 7px 9px; font-size: 10px; font-weight: 850; cursor: pointer; white-space: nowrap; } .vote-admin-form { display: grid; gap: 10px; margin-top: 14px; } .vote-admin-form label:not(.vote-admin-toggle) { display: grid; gap: 5px; color: #3d607d; font-size: 11px; font-weight: 850; } .vote-admin-form label small { color: #768da1; font-size: 9px; font-weight: 700; } .vote-admin-form input:not([type="checkbox"]), .vote-admin-form textarea { width: 100%; border: 1px solid #c8e4f5; border-radius: 9px; background: #fff; color: #173c59; padding: 9px 10px; font: inherit; font-size: 12px; outline: none; resize: vertical; } .vote-admin-form input:focus, .vote-admin-form textarea:focus { border-color: #15a8df; box-shadow: 0 0 0 3px rgba(14,165,233,.1); } .vote-admin-toggle { display: flex; align-items: center; gap: 8px; color: #123d57; font-size: 12px; cursor: pointer; } .vote-admin-toggle input { position: absolute; opacity: 0; pointer-events: none; } .vote-admin-toggle span { position: relative; width: 36px; height: 20px; border-radius: 99px; background: #aab9c5; transition: background .16s ease; } .vote-admin-toggle span::after { content: ''; position: absolute; width: 14px; height: 14px; top: 3px; left: 3px; border-radius: 50%; background: #fff; transition: transform .16s ease; } .vote-admin-toggle input:checked + span { background: #18bb7b; }.vote-admin-toggle input:checked + span::after { transform: translateX(16px); } .vote-admin-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }.vote-admin-actions .btn-primary { padding: 9px 11px; font-size: 11px; } .vote-copy-link-btn { min-height: 34px; padding: 8px 11px; border: 1px solid #b9dff4; border-radius: 9px; color: #087fbd; background: #f4fbff; font: inherit; font-size: 11px; font-weight: 850; cursor: pointer; } .vote-copy-link-btn:hover { background: #e7f8ff; border-color: #64c8ee; } .custom-vote.is-direct-link .custom-vote-card { animation: voteDirectPulse 1.85s ease-out; } @keyframes voteDirectPulse { 0% { box-shadow: 0 0 0 0 rgba(14,165,233,.42); } 60% { box-shadow: 0 0 0 13px rgba(14,165,233,0); } 100% { box-shadow: 0 0 0 0 rgba(14,165,233,0); } } .vote-admin-status { color: #688398; font-size: 10px; font-weight: 700; }.vote-admin-status.error { color: #d64a55; }.vote-admin-status.success { color: #07895b; } @media (max-width: 820px) { .store-tools { grid-template-columns: 1fr; gap: 10px; margin-bottom: 20px; } } @media (max-width: 440px) { .store-tool { padding: 14px; } .currency-form { grid-template-columns: 1fr 1fr; } .currency-swap { grid-column: 1 / -1; width: 100%; height: 32px; } .price-calculator-form { grid-template-columns: 1fr 1fr; } .custom-vote-card { padding: 15px; } .custom-vote-head { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 9px; } .custom-vote-icon { width: 40px; height: 40px; border-radius: 11px; } .custom-vote-head h2 { font-size: .95rem; } .custom-vote-head p { font-size: .66rem; } .custom-vote-option { min-height: 44px; padding: 9px 10px; } .vote-admin-head { align-items: flex-start; }.vote-admin-head button { font-size: 9px; } } .pss { width: 44px; height: 44px; border-radius: 12px; background: var(--secondary); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .product-promoted { display:flex; align-items:center; gap:6px; margin-bottom:8px; font-size:11px; color:var(--sky); font-weight:800; } .product-promoter-box { margin-top:10px; padding-top:10px; border-top:1px dashed var(--border2); text-align:center; } .product-promoter-box small { font-size:10px; color:var(--muted); margin-bottom:5px; display:block; } .product-promoter-box a { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:8px 14px; background:#25D366; color:#fff; border-radius:10px; font-size:12px; font-weight:800; text-decoration:none; } .product-qr-mini { margin-top:10px; padding-top:10px; border-top:1px dashed var(--border2); display:grid; gap:8px; } .product-qr-mini div { display:flex; flex-direction:column; align-items:center; } .product-qr-mini small { font-size:10px; color:var(--muted); margin-bottom:4px; } .product-qr-mini img { width:100px; height:100px; border-radius:8px; border:1px solid var(--border2); } .pss:hover { transform: scale(1.08); background: var(--secondary2); } .link-copy-btn { background: linear-gradient(135deg, #0ea5e9, #10b981); box-shadow: 0 8px 22px rgba(14,165,233,.18); } .link-copy-btn:hover { background: linear-gradient(135deg, #0284c7, #059669); } /* Steps */ .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .step { background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); border: 1px solid rgba(14,165,233,0.12); border-radius: var(--radius); padding: 28px; position: relative; overflow: hidden; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 4px 20px rgba(15,23,42,0.05); } .step:hover { box-shadow: 0 14px 40px rgba(14,165,233,0.15), 0 4px 12px rgba(15,23,42,0.08); border-color: rgba(14,165,233,0.3); transform: translateY(-6px); } .step-icon { width: 52px; height: 52px; border-radius: 16px; background: linear-gradient(135deg, rgba(14,165,233,0.12), rgba(6,182,212,0.08)); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 18px; box-shadow: 0 4px 16px rgba(14,165,233,0.12); transition: all 0.3s ease; } .step:hover .step-icon { background: var(--primary-gradient); color: #fff; box-shadow: 0 8px 24px var(--primary-glow); transform: scale(1.08); } .step-num-label { font-size: 11px; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 8px; } .step-title { font-size: 18px; font-weight: 800; color: var(--ink2); margin-bottom: 10px; } .step-desc { font-size: 13px; color: var(--muted); line-height: 1.7; } .step-bg-num { position: absolute; bottom: -12px; right: 12px; font-size: 84px; font-weight: 800; color: rgba(14,165,233,0.05); line-height: 1; transition: all 0.3s ease; } .step:hover .step-bg-num { color: rgba(14,165,233,0.1); transform: scale(1.05); } /* Testimonials */ .review-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 18px 0 6px; } .review-summary-card { position: relative; overflow: hidden; min-height: 116px; padding: 20px 22px; border-radius: 24px; border: 1px solid rgba(14,165,233,.16); background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,252,.84)), radial-gradient(circle at 100% 0%, rgba(14,165,233,.12), transparent 42%); box-shadow: 0 12px 30px rgba(15,23,42,.06); } .review-summary-card::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 12px; height: 3px; border-radius: 999px; background: linear-gradient(90deg, var(--refresh-cyan, #0ea5e9), var(--refresh-green, #22c55e)); } .review-summary-label { display: block; margin-bottom: 8px; color: #37708f; font-size: 12px; font-weight: 900; letter-spacing: 1.1px; text-transform: uppercase; } .review-summary-card strong { display: block; color: var(--refresh-cyan, #0ea5e9); font-size: clamp(32px, 5vw, 44px); line-height: .9; font-weight: 950; letter-spacing: -1px; } .review-summary-stars, .review-summary-sub { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; color: #375569; font-size: 13px; font-weight: 800; } .review-summary-stars { color: #fbbf24; } .review-summary-stars i { font-size: 12px; } .review-summary-grid + .testi-grid { display: none; } .testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .testi-card { background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); border: 1px solid rgba(14,165,233,0.12); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; gap: 16px; transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 4px 20px rgba(15,23,42,0.05); } .testi-card:hover { box-shadow: 0 14px 40px rgba(14,165,233,0.12), 0 4px 12px rgba(15,23,42,0.06); border-color: rgba(14,165,233,0.25); transform: translateY(-6px); } .testi-stars { color: #fbbf24; font-size: 13px; display: flex; gap: 3px; } .testi-text { font-size: 14px; color: var(--ink); line-height: 1.7; flex: 1; } .testi-bottom { display: flex; align-items: center; gap: 12px; } .testi-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--primary-gradient); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px var(--primary-glow); overflow: hidden; } .testi-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .testi-name { font-size: 14px; font-weight: 700; color: var(--ink2); } .testi-game { font-size: 11px; color: var(--muted); } .testi-verified { margin-left: auto; font-size: 10px; color: var(--green); font-weight: 700; display: flex; align-items: center; gap: 5px; } .testi-role { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; min-height: 22px; padding: 4px 9px; border-radius: 999px; font-size: 10px; font-weight: 800; line-height: 1; white-space: nowrap; } .testi-role.is-animated { animation: role-glow 2.4s ease-in-out infinite; } @keyframes role-glow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.12); box-shadow: 0 6px 20px -8px var(--badge-glow, var(--primary)); } } .testi-feedback-btn { align-self: flex-start; border: 1px solid rgba(14,165,233,0.22); background: rgba(14,165,233,0.08); color: var(--primary3); border-radius: 999px; padding: 7px 11px; font-size: 12px; font-weight: 800; cursor: pointer; transition: all 0.18s; } .testi-feedback-btn:hover { background: rgba(14,165,233,0.14); transform: translateY(-1px); } .testimonial-image-modal { display: none; position: fixed; inset: 0; z-index: 999999; background: rgba(15,23,42,0.65); backdrop-filter: blur(10px); align-items: center; justify-content: center; padding: 18px; } .testimonial-image-modal.show { display: flex; } .testimonial-image-box { width: min(760px, 100%); max-height: 88vh; overflow: hidden; background: #fff; border-radius: 18px; border: 1px solid var(--border); box-shadow: 0 24px 90px rgba(15,23,42,0.32); } .testimonial-image-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 800; color: var(--ink2); } .testimonial-image-close { width: 32px; height: 32px; border-radius: 50%; border: none; background: rgba(239,68,68,0.1); color: var(--red); font-size: 18px; font-weight: 900; cursor: pointer; } .testimonial-image-img { width: 100%; max-height: calc(88vh - 60px); object-fit: contain; display: block; background: #061426; } .testi-loading { grid-column: 1/-1; text-align: center; padding: 40px; color: var(--muted); } /* Compact product screenshot board */ .product-ss-board { position: fixed; left: -9999px; top: 0; width: var(--ss-board-width, 1280px); padding: 24px; border-radius: 28px; background: radial-gradient(circle at 15% 0%, rgba(14,165,233,.25), transparent 24%), linear-gradient(135deg, #eef7ff 0%, #ffffff 48%, #eaf8ff 100%); color: #0f172a; font-family: 'Plus Jakarta Sans', Arial, sans-serif; } .product-ss-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px 18px; margin-bottom: 14px; border: 1px solid rgba(14,165,233,.18); border-radius: 20px; background: rgba(255,255,255,.88); box-shadow: 0 12px 34px rgba(15,23,42,.08); } .product-ss-head img { width: 82px; height: 82px; border-radius: 18px; object-fit: contain; background: #fff; padding: 1px; } .product-ss-brand { font-size: 13px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: #0284c7; } .product-ss-title { margin-top: 2px; font-size: clamp(22px, 4vw, 28px); font-weight: 900; letter-spacing: 0; color: #0f172a; } .product-ss-count { padding: 9px 13px; border-radius: 999px; background: rgba(14,165,233,.1); color: #0369a1; font-size: 13px; font-weight: 900; white-space: nowrap; } .product-ss-grid { display: grid; grid-template-columns: repeat(var(--ss-cols, 5), var(--ss-card-width, 230px)); justify-content: center; gap: 10px; } .product-ss-card { overflow: hidden; border: 1px solid rgba(14,165,233,.16); border-radius: 18px; background: rgba(255,255,255,.92); box-shadow: 0 10px 26px rgba(15,23,42,.06); display: grid; grid-template-rows: auto 1fr; } .product-ss-card.is-oos { opacity: .68; } .product-ss-img { position: relative; aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(240,249,255,.96), rgba(224,242,254,.8)), #f8fafc; overflow: hidden; } .product-ss-img img { width: calc(100% - 20px); height: calc(100% - 20px); object-fit: contain; display: block; border-radius: 12px; } .product-ss-img img.permanent-fruit-cover { width: 100%; height: 100%; object-fit: cover; object-position: left center; transform: scale(1.55); transform-origin: 22% center; border-radius: 0; } .product-ss-stock { position: absolute; right: 10px; bottom: 10px; padding: 5px 9px; border-radius: 999px; font-size: 10px; font-weight: 900; backdrop-filter: blur(8px); } .product-ss-stock.ok { background: rgba(34,197,94,.16); color: #15803d; border: 1px solid rgba(34,197,94,.24); } .product-ss-stock.low { background: rgba(245,158,11,.17); color: #b45309; border: 1px solid rgba(245,158,11,.28); } .product-ss-stock.out { background: rgba(239,68,68,.16); color: #dc2626; border: 1px solid rgba(239,68,68,.26); } .product-ss-body { padding: 10px 12px 12px; display: grid; gap: 4px; } .product-ss-name { min-height: 34px; font-size: 12.5px; font-weight: 900; line-height: 1.35; color: #0f172a; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .product-ss-meta { font-size: 10.5px; color: #64748b; font-weight: 700; } .product-ss-price { display: flex; align-items: baseline; gap: 6px; color: #0284c7; } .product-ss-price span:first-child { font-size: 17px; font-weight: 900; } .product-ss-old { color: #94a3b8; font-size: 11px !important; text-decoration: line-through; } .product-ss-foot { margin-top: 14px; text-align: center; color: #64748b; font-size: 12px; font-weight: 800; } /* FAQ */ .faq-list { max-width: 800px; display: flex; flex-direction: column; gap: 12px; } details.faq { background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); border: 1px solid rgba(14,165,233,0.12); border-radius: var(--radius); overflow: hidden; transition: all 0.3s ease; box-shadow: 0 4px 20px rgba(15,23,42,0.05); } details.faq summary { list-style: none; cursor: pointer; padding: 20px 24px; font-size: 14px; font-weight: 700; color: var(--ink2); display: flex; justify-content: space-between; align-items: center; gap: 16px; transition: all 0.3s ease; } details.faq summary::-webkit-details-marker { display: none; } details.faq[open] { border-color: rgba(14,165,233,0.3); box-shadow: 0 10px 30px rgba(14,165,233,0.12), 0 4px 12px rgba(15,23,42,0.06); } details.faq[open] summary { color: var(--primary); } .faq-ic { width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(135deg, rgba(14,165,233,0.12), rgba(6,182,212,0.08)); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 12px; transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 4px 12px rgba(14,165,233,0.1); } details.faq[open] .faq-ic { background: var(--primary-gradient); color: #fff; transform: rotate(45deg) scale(1.05); box-shadow: 0 6px 16px var(--primary-glow); } .faq-ans { padding: 0 24px 22px; font-size: 13px; color: var(--muted); line-height: 1.75; } /* Payment ? structure preserved */ .pay-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; } .pay-method-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px; border-radius: 14px; border: 2px solid var(--border); background: var(--bg3); cursor: pointer; transition: all 0.2s; position: relative; } .pay-method-btn:hover { border-color: var(--border2); background: #fff; } .pay-method-btn.active { border-color: var(--primary); background: #fff; box-shadow: 0 0 0 4px rgba(14,165,233,0.12); } .pay-check { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; background: var(--primary); color: #fff; border-radius: 50%; font-size: 9px; display: none; align-items: center; justify-content: center; } .pay-method-btn.active .pay-check { display: flex; } .pay-logo-wrap { width: 88px; height: 48px; background: #fff; border-radius: 10px; border: 1px solid var(--border); overflow: hidden; display: flex; align-items: center; justify-content: center; } .pay-logo-img { width: 100%; height: 100%; object-fit: contain; } .pay-name { font-size: 12px; font-weight: 700; } .pay-tag { font-size: 11px; color: var(--muted); } .pay-panel { display: none; } .pay-panel.active { display: block; } .qr-area { text-align: center; padding: 12px 0; } .qr-lbl { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 14px; } .qr-frame { display: inline-block; background: #fff; padding: 12px; border: 2px solid var(--primary); border-radius: 14px; position: relative; cursor: pointer; transition: all 0.2s; } .qr-frame:hover { transform: scale(1.02); box-shadow: var(--shadow-glow); } .qr-blurred { width: 160px; height: 160px; display: block; border-radius: 8px; filter: blur(5px); } .qr-click-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 11px; font-weight: 700; color: var(--primary); background: rgba(255,255,255,0.96); padding: 8px 14px; border-radius: 8px; border: 1px solid var(--primary); pointer-events: none; white-space: nowrap; } .qr-name { font-size: 18px; font-weight: 800; color: var(--primary); margin-top: 12px; } /* QR modal */ .qr-modal { position: fixed; inset: 0; z-index: 999999; display: none; align-items: center; justify-content: center; padding: 16px; } .qr-modal.show { display: flex; } .qr-modal-bg { position: absolute; inset: 0; background: rgba(15,23,42,0.5); backdrop-filter: blur(6px); } .qr-modal-content { position: relative; z-index: 2; background: #fff; padding: 32px; border-radius: 20px; text-align: center; box-shadow: var(--shadow-lg); max-width: 360px; width: 100%; animation: qrZoomIn 0.3s var(--ease-bounce) both; } @keyframes qrZoomIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } } .qr-modal-content img { width: min(260px, 70vw); height: auto; margin: 0 auto 16px; border-radius: 12px; border: 1px solid var(--border); padding: 8px; } .qr-modal-close { position: absolute; top: -12px; right: -12px; width: 36px; height: 36px; background: var(--primary); color: #fff; border: none; border-radius: 50%; cursor: pointer; } .qr-name-large { font-size: 24px; font-weight: 800; color: var(--primary); } .qr-modal-sub { font-size: 13px; color: var(--muted); margin-top: 4px; } /* AI Helper */ .ai-side-assistant { position: fixed; right: 22px; bottom: 22px; z-index: 999999; pointer-events: none; } .ai-float-bubble { pointer-events: auto; position: relative; width: 62px; height: 62px; border: 1px solid rgba(220,252,231,.86); border-radius: 999px; display: grid; place-items: center; background: linear-gradient(135deg, #25d366, #128c7e); color: #fff; font-size: 28px; box-shadow: 0 20px 42px rgba(37,211,102,.34); transition: transform .22s var(--ease), opacity .22s var(--ease); } .ai-float-bubble:hover { transform: translateY(-4px) scale(1.03); } .ai-float-bubble.is-hidden { opacity: 0; transform: scale(.82); pointer-events: none; } .ai-helper-logo-img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; border-radius: inherit; } .ai-float-bubble .ai-helper-logo-img { transform: scale(1.42); filter: drop-shadow(0 8px 14px rgba(0,0,0,.22)); } .ai-float-dot { position: absolute; top: 8px; right: 8px; width: 12px; height: 12px; border-radius: 999px; background: #22c55e; border: 2px solid #fff; } .ai-chat-panel { pointer-events: auto; position: absolute; right: 0; bottom: 0; width: min(390px, calc(100vw - 28px)); height: min(620px, calc(100vh - 110px)); display: flex; flex-direction: column; overflow: hidden; border-radius: 24px; border: 1px solid rgba(34,197,94,.28); background: radial-gradient(circle at 94% 8%, rgba(37,211,102,.16), transparent 34%), linear-gradient(180deg, rgba(246,255,249,.98), rgba(229,246,223,.98)); box-shadow: 0 28px 80px rgba(2, 6, 23, .34); opacity: 0; visibility: hidden; transform: translateY(18px) scale(.96); transition: .24s var(--ease); } .ai-chat-panel.show { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .ai-chat-head { display: flex; align-items: center; gap: 12px; padding: 16px 16px 12px; border-bottom: 1px solid rgba(34,197,94,.18); background: linear-gradient(135deg, #075e54, #128c7e 58%, #25d366); color: #fff; } .ai-avatar { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 999px; background: rgba(255,255,255,.18); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.24), 0 14px 28px rgba(0,0,0,.18); font-size: 22px; overflow: hidden; } .ai-avatar .ai-helper-logo-img { transform: scale(1.45); } .ai-helper-close { margin-left: auto; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; background: rgba(255,255,255,.16); color: #fff; } .ai-helper-kicker { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: transparent; color: rgba(255,255,255,.78); font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; } .ai-chat-panel h2 { margin: 3px 0 0; color: #fff; font-size: 18px; font-weight: 950; letter-spacing: -.02em; } .ai-chat-status { margin: 12px 14px 8px; padding: 9px 11px; border-radius: 14px; border: 1px solid rgba(34,197,94,.18); background: rgba(255,255,255,.72); color: #075e54; font-size: 12px; font-weight: 700; } .ai-chat-status span { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #22c55e; } .ai-helper-suggestions { display: flex; flex-wrap: nowrap; gap: 8px; padding: 0 14px 10px; margin: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .ai-helper-suggestions::-webkit-scrollbar { display: none; } .ai-helper-suggestions button { flex: 0 0 auto; border: 1px solid rgba(18,140,126,.2); background: rgba(255,255,255,.82); color: #075e54; border-radius: 999px; padding: 8px 11px; font-size: 12px; font-weight: 850; } .ai-chat-messages { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; background: linear-gradient(135deg, rgba(255,255,255,.34) 25%, transparent 25%) 0 0/28px 28px, linear-gradient(225deg, rgba(255,255,255,.25) 25%, transparent 25%) 0 0/28px 28px, #e5f6df; } .ai-msg { max-width: 88%; padding: 11px 12px; border-radius: 16px; font-size: 13px; line-height: 1.58; white-space: pre-wrap; box-shadow: 0 10px 24px rgba(2, 6, 23, .06); overflow-wrap: anywhere; } .ai-msg a { color: #0284c7; font-weight: 900; text-decoration: underline; text-underline-offset: 2px; } .ai-msg-typing { display: inline-flex; align-items: center; gap: 5px; min-width: 54px; } .ai-msg-typing span { width: 7px; height: 7px; border-radius: 999px; background: #128c7e; opacity: .38; animation: aiTypingPulse 1s infinite ease-in-out; } .ai-msg-typing span:nth-child(2) { animation-delay: .14s; } .ai-msg-typing span:nth-child(3) { animation-delay: .28s; } @keyframes aiTypingPulse { 0%, 80%, 100% { transform: translateY(0); opacity: .32; } 40% { transform: translateY(-4px); opacity: .9; } } .ai-msg-bot { align-self: flex-start; background: #fff; color: #14342f; border: 1px solid rgba(7,94,84,.08); border-bottom-left-radius: 6px; } .ai-msg-user { align-self: flex-end; background: #dcf8c6; color: #12372e; border-bottom-right-radius: 6px; } .ai-chat-compose { display: grid; grid-template-columns: 1fr 46px; gap: 9px; padding: 12px; border-top: 1px solid rgba(34,197,94,.18); background: rgba(240,253,244,.82); } .ai-chat-compose textarea { width: 100%; height: 46px; max-height: 120px; resize: none; border: 1px solid rgba(18,140,126,.22); border-radius: 999px; padding: 12px 13px; color: var(--ink); background: #fff; outline: none; font: inherit; line-height: 1.55; } .ai-helper-send { width: 100%; height: 46px; margin-top: 0; border: 0; border-radius: 999px; background: linear-gradient(135deg, #25d366, #128c7e); color: #fff; font-weight: 950; box-shadow: 0 18px 36px rgba(37,211,102,.24); } .ai-helper-send:disabled { opacity: .72; cursor: wait; } .ai-helper-answer { display: none; } .ai-helper-btn { background: linear-gradient(135deg, rgba(220,252,231,.9), rgba(240,253,244,.82)); color: #075e54; } .btn-ai-hero { border-color: rgba(37,211,102,.32); background: linear-gradient(135deg, rgba(240,253,244,.96), rgba(220,252,231,.88)); color: #075e54; box-shadow: 0 12px 28px rgba(37,211,102,.14); } .btn-ai-hero:hover { border-color: rgba(37,211,102,.52); color: #047857; background: linear-gradient(135deg, #f0fdf4, #dcfce7); } @media (max-width: 520px) { .ai-side-assistant { right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); } .ai-float-bubble { width: 56px; height: 56px; border-radius: 20px; } .ai-chat-panel { position: fixed; left: 10px; right: 10px; bottom: calc(72px + env(safe-area-inset-bottom)); width: auto; height: min(620px, calc(100vh - 96px)); border-radius: 22px; } .ai-helper-suggestions { display: flex; } } /* Product modal ? full image gist */ .product-modal { position: fixed; inset: 0; z-index: 999998; display: none; align-items: center; justify-content: center; padding: 16px; } .product-modal.show { display: flex; } .product-modal-bg { position: absolute; inset: 0; background: rgba(15,23,42,0.55); backdrop-filter: blur(8px); } .product-modal-content { position: relative; z-index: 2; width: min(1100px, 96vw); max-height: 92vh; background: linear-gradient(135deg, #ffffff, #f8fbff); border-radius: 22px; border: 1px solid rgba(14,165,233,0.16); box-shadow: 0 26px 80px rgba(15,23,42,0.22); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr); overflow: hidden; } .product-modal-image-wrap { background: radial-gradient(circle at 18% 15%, rgba(14,165,233,0.14), transparent 36%), linear-gradient(135deg, #f8fafc, #e8f7ff); display: flex; align-items: center; justify-content: center; padding: 20px; min-height: 360px; } .product-modal-content img, .product-modal-content video, .product-modal-image-wrap .product-media { width: 100%; max-height: 78vh; object-fit: contain; border-radius: 12px; background: #fff; border: 1px solid var(--border); } .product-modal-image-wrap video { background: #020617; max-height: 78vh; } .product-modal-image-wrap .product-media-carousel { position: relative; width: 100%; height: min(72vh, 560px); min-height: 360px; overflow: hidden; } .product-media-track { width: 100%; height: 100%; display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; touch-action: pan-x; } .product-media-track::-webkit-scrollbar { display: none; } .product-modal-image-wrap .product-media-slide { position: relative; flex: 0 0 100%; min-width: 100%; height: 100%; scroll-snap-align: center; border-radius: 16px; box-shadow: 0 14px 34px rgba(15,23,42,.10); overflow: hidden; } .product-modal-image-wrap .product-media-slide img, .product-modal-image-wrap .product-media-slide video { width: 100%; height: 100%; max-height: none; object-fit: contain; border: 1px solid var(--border); border-radius: 16px; background: #fff; } .product-modal-image-wrap .split-media-video video { object-fit: contain; background: #020617; } .product-media-slide span { position: absolute; left: 12px; bottom: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 999px; background: rgba(2,6,23,.72); color: #fff; font-size: 11px; font-weight: 900; } .product-media-arrow { position: absolute; top: 50%; z-index: 5; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.72); background: rgba(2,6,23,.34); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transform: translateY(-50%); backdrop-filter: blur(8px); box-shadow: 0 12px 26px rgba(15,23,42,.18); } .product-media-arrow:hover { background: rgba(14,165,233,.82); } .product-media-prev { left: 12px; } .product-media-next { right: 12px; } .product-media-hint { position: absolute; left: 50%; bottom: 12px; z-index: 4; transform: translateX(-50%); padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.92); border: 1px solid rgba(14,165,233,.2); color: var(--ink); font-size: 11px; font-weight: 800; box-shadow: 0 10px 24px rgba(15,23,42,.12); pointer-events: none; white-space: nowrap; } .product-modal-info { padding: 24px; overflow-y: auto; max-height: 92vh; border-left: 1px solid var(--border); display: flex; flex-direction: column; } .product-modal-game { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--primary); margin-bottom: 8px; } .product-modal-name { font-size: 22px; font-weight: 800; color: var(--ink2); line-height: 1.2; margin-bottom: 12px; } .product-modal-price { font-size: 28px; font-weight: 800; color: var(--primary); margin-bottom: 12px; } .product-modal-price-old { font-size: 14px; color: var(--muted2); text-decoration: line-through; margin-left: 8px; font-weight: 400; } .product-modal-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 2px 0 16px; } .product-modal-summary div { padding: 10px; border-radius: 13px; background: rgba(14,165,233,0.06); border: 1px solid rgba(14,165,233,0.12); min-width: 0; } .product-modal-summary span { display: block; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .7px; color: var(--muted); margin-bottom: 3px; } .product-modal-summary strong { display: block; font-size: 12px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .product-modal-desc-label { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; } .product-modal-desc { font-size: 14px; color: var(--muted); line-height: 1.7; white-space: pre-wrap; margin-bottom: 4px; } .product-modal-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .pm-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; font-size: 11px; font-weight: 700; background: var(--bg3); color: var(--muted); border: 1px solid var(--border); } .pm-chip.hot { background: rgba(245,158,11,0.1); color: #d97706; border-color: rgba(245,158,11,0.25); } .pm-chip.stock { background: rgba(16,185,129,0.1); color: #059669; border-color: rgba(16,185,129,0.25); } .pm-chip.out { background: rgba(239,68,68,0.1); color: #dc2626; border-color: rgba(239,68,68,0.25); } .product-modal-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0 0; padding: 12px; background: linear-gradient(135deg, rgba(14,165,233,0.06), rgba(6,182,212,0.04)); border-radius: 14px; border: 1px solid rgba(14,165,233,0.12); } .pm-trust-item { text-align: center; font-size: 10px; font-weight: 700; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 5px; } .pm-trust-item i { font-size: 16px; color: var(--primary); } .product-modal-actions { display: flex; gap: 10px; margin-top: auto; padding-top: 20px; position: sticky; bottom: 0; z-index: 2; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 28%); } .pm-btn { flex: 1; min-width: 0; padding: 14px 12px; border-radius: 12px; font-size: 13px; font-weight: 700; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.2s; touch-action: manipulation; -webkit-tap-highlight-color: transparent; white-space: nowrap; } .pm-btn.cart { background: var(--bg3); color: var(--ink); border: 1px solid var(--border); } .pm-btn.cart:hover { border-color: var(--primary); color: var(--primary); background: #fff; } .pm-btn.cart:active { background: var(--border); } .pm-btn.cart.in-cart { border-color: var(--primary); color: var(--primary); background: rgba(14,165,233,0.08); } .pm-btn.link { flex: .8; background: rgba(14,165,233,.09); color: var(--primary); border: 1px solid rgba(14,165,233,.22); } .pm-btn.link:hover { background: rgba(14,165,233,.14); border-color: rgba(14,165,233,.38); } .pm-btn .pm-qty { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--primary); color: #fff; font-size: 10px; font-weight: 800; } .pm-btn.buy { background: var(--primary-gradient); color: #fff; box-shadow: var(--shadow-glow); } .pm-btn.buy:hover { transform: translateY(-1px); } .pm-btn.buy:active { transform: translateY(0); } .product-modal-close { position: absolute; top: 12px; right: 12px; z-index: 5; width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1px solid var(--border); color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); } .product-modal-close:hover { background: var(--red); color: #fff; border-color: var(--red); } .chat-cs-float { position: fixed; right: 20px; bottom: 100px; z-index: 500; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 99px; background: #25d366; color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; box-shadow: 0 8px 24px rgba(37,211,102,0.4); transition: all 0.2s; } .chat-cs-float:hover { transform: translateY(-2px); } /* Checkout */ .co-grid { display: grid; grid-template-columns: 1fr minmax(280px, 360px); gap: 24px; align-items: start; } .co-block { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; margin-bottom: 14px; box-shadow: var(--shadow-sm); } .co-title { font-size: 16px; font-weight: 800; color: var(--ink2); margin-bottom: 14px; display: flex; align-items: center; gap: 10px; } .co-n { width: 26px; height: 26px; background: var(--primary); color: #fff; border-radius: 8px; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; } .flabel { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); margin-bottom: 8px; display: block; } .finput { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg3); font-size: 14px; color: var(--ink); font-family: inherit; outline: none; transition: all 0.2s; } .finput:focus { border-color: var(--primary); background: #fff; box-shadow: 0 0 0 4px rgba(14,165,233,0.12); } .warn-box { background: var(--red-bg); border: 1px solid var(--red-bdr); border-radius: var(--radius); padding: 18px; display: flex; gap: 12px; margin-bottom: 14px; } .wi { color: var(--red); font-size: 18px; flex-shrink: 0; } .wt { font-size: 11px; font-weight: 700; color: var(--red); text-transform: uppercase; margin-bottom: 8px; } .wl { font-size: 13px; color: var(--muted); line-height: 1.9; list-style: none; } .checkout-mini-faq { background: linear-gradient(135deg, rgba(14,165,233,0.08), rgba(255,255,255,0.95)); border: 1px solid rgba(14,165,233,0.14); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; box-shadow: var(--shadow-sm); } .mini-faq-title { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 900; color: var(--ink2); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 10px; } .mini-faq-title i { color: var(--primary); } .checkout-mini-faq details { background: rgba(255,255,255,0.78); border: 1px solid rgba(14,165,233,0.1); border-radius: 12px; padding: 10px 12px; } .checkout-mini-faq details + details { margin-top: 8px; } .checkout-mini-faq summary { cursor: pointer; font-size: 12px; font-weight: 800; color: var(--ink); } .checkout-mini-faq p { font-size: 12px; color: var(--muted); line-height: 1.65; margin-top: 8px; } .order-box { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; position: sticky; top: 20px; box-shadow: var(--shadow); } .order-title { font-size: 18px; font-weight: 800; margin-bottom: 16px; } .order-list { max-height: 220px; overflow-y: auto; margin-bottom: 16px; } .order-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; } .or-name { color: var(--muted); flex: 1; margin-right: 8px; } .or-price { font-weight: 700; color: var(--primary); } .order-total { display: flex; justify-content: space-between; padding: 16px 0; border-top: 2px solid var(--border); margin-bottom: 16px; } .ot-l { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; } .ot-v { font-size: 28px; font-weight: 800; color: var(--primary); } .btn-send { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px; border-radius: 14px; background: #25d366; color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; border: none; cursor: pointer; box-shadow: 0 6px 20px rgba(37,211,102,0.35); transition: all 0.2s; } .btn-send:hover { filter: brightness(1.05); transform: translateY(-1px); } .btn-send.dis { background: var(--bg3); color: var(--muted2); box-shadow: none; pointer-events: none; } .sec-note { text-align: center; font-size: 11px; color: var(--muted); margin-top: 12px; } /* JSON Helper */ .json-helper-modal { position: fixed; inset: 0; z-index: 950; background: rgba(15,23,42,0.48); backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; padding: 18px; } .json-helper-modal.show { display: flex; } .json-helper-card { width: min(860px, 100%); max-height: 92vh; overflow: auto; background: #fff; border: 1px solid rgba(14,165,233,0.18); border-radius: 24px; box-shadow: 0 24px 80px rgba(15,23,42,0.25); padding: 22px; } .json-helper-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .json-helper-head h3 { margin: 0; font-family: var(--ff-disp); font-size: 24px; color: var(--ink2); } .json-helper-kicker { font-size: 10px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: var(--primary); margin-bottom: 4px; } .json-helper-head button { width: 38px; height: 38px; border: 1px solid var(--border); background: var(--bg3); border-radius: 12px; cursor: pointer; color: var(--muted); } /* Manual transaction history */ .order-modal { position:fixed; inset:0; z-index:999999; display:none; align-items:center; justify-content:center; padding:18px; background:rgba(15,23,42,.55); backdrop-filter:blur(10px); } .order-modal.show { display:flex; } .order-modal-card { position:relative; width:min(590px,100%); max-height:92vh; overflow:auto; border:1px solid rgba(14,165,233,.24); border-radius:24px; padding:clamp(22px,5vw,34px); background:linear-gradient(145deg,#fff,#f0f9ff); box-shadow:0 28px 80px rgba(15,23,42,.3); } .order-modal-card h2 { font-size:25px; color:var(--ink2); margin:5px 0; } .order-modal-card > p { font-size:13px; color:var(--muted); margin-bottom:18px; } .order-modal-kicker { color:var(--primary3); font-size:11px; font-weight:900; letter-spacing:1px; text-transform:uppercase; } .order-modal-close { position:absolute; top:15px; right:15px; width:36px; height:36px; border:1px solid var(--border); border-radius:11px; background:#fff; color:var(--muted); cursor:pointer; } .order-search-form { display:flex; overflow:hidden; border:1px solid var(--primary); border-radius:14px; background:#fff; } .order-search-form input { min-width:0; flex:1; border:0; outline:0; padding:14px; font:inherit; color:var(--ink); } .order-search-form button { border:0; padding:0 20px; background:var(--primary3); color:#fff; font:inherit; font-weight:800; cursor:pointer; } .order-search-result { margin-top:16px; min-height:72px; border-radius:14px; padding:15px; background:rgba(255,255,255,.72); color:var(--muted); font-size:13px; } .order-result-card { display:grid; grid-template-columns:82px 1fr; gap:14px; align-items:center; text-align:left; color:var(--ink); } .order-result-card img { width:82px; height:72px; object-fit:cover; border-radius:12px; border:1px solid var(--border); } .order-result-card strong { display:block; font-size:15px; margin-bottom:3px; } .order-result-card small { display:block; color:var(--muted); margin-top:2px; } .order-status { display:inline-flex; margin-top:6px; padding:3px 8px; border-radius:99px; background:var(--green-bg); color:var(--green); font-size:10px; font-weight:900; } .order-admin-link { display:block; width:100%; border:0; background:none; color:var(--muted); font-size:11px; font-weight:800; margin-top:18px; cursor:pointer; } .order-form { display:grid; gap:12px; } .order-form input,.order-form select { width:100%; border:1px solid var(--border2); border-radius:10px; padding:11px 12px; font:inherit; color:var(--ink); background:#fff; outline-color:var(--primary); } .order-code-input { display:flex; gap:6px; }.order-code-input input { min-width:0; }.order-code-input button { flex:0 0 auto; border:0; border-radius:10px; padding:0 10px; background:var(--primary3); color:#fff; cursor:pointer; font:inherit; font-size:10px; font-weight:800; } .order-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .order-form label { color:var(--muted); font-size:10px; font-weight:900; letter-spacing:.5px; text-transform:uppercase; display:grid; gap:5px; } .order-wide { grid-column:1/-1; } .order-admin-user { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px; margin-bottom:14px; border-radius:11px; background:var(--green-bg); color:var(--green); font-size:12px; font-weight:800; } .order-admin-user button { border:0; background:none; color:var(--primary3); font-weight:800; cursor:pointer; } .order-form label small { font-size:9px; font-weight:600; letter-spacing:0; text-transform:none; } .order-form-actions { display:flex; gap:9px; align-items:center; } .order-form-actions .btn-primary,.order-form-actions .btn-ghost { border:0; cursor:pointer; padding:11px 14px; font:inherit; font-size:12px; font-weight:800; } .order-image-paste { display:grid; gap:3px; place-items:center; text-align:center; padding:15px; border:1.5px dashed rgba(14,165,233,.45); border-radius:14px; color:var(--primary3); background:rgba(240,249,255,.75); cursor:pointer; outline:none; } .order-image-paste:focus { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-glow); } .order-image-paste strong { font-size:12px; }.order-image-paste small{font-size:10px;color:var(--muted)} .order-image-paste input { max-width:220px; font-size:10px; color:var(--muted); } .order-image-preview { position:relative; margin-top:2px; padding:8px; border:1px solid var(--border); background:#fff; border-radius:12px; } .order-image-preview img { display:block; width:100%; max-height:170px; object-fit:contain; border-radius:8px; } .order-admin-list-head { display:flex; justify-content:space-between; align-items:center; margin-top:22px; padding-top:16px; border-top:1px solid var(--border); font-size:13px; color:var(--ink); } .order-admin-list-head button { border:0; background:none; color:var(--primary3); font-size:11px; font-weight:800; cursor:pointer; } .order-admin-list { display:grid; gap:8px; margin-top:10px; color:var(--muted); font-size:12px; } .order-admin-row { display:grid; grid-template-columns:42px 1fr auto; gap:10px; align-items:center; padding:9px; border:1px solid var(--border); border-radius:12px; background:#fff; } .order-admin-row img { width:42px; height:42px; object-fit:cover; border-radius:8px; background:var(--bg3); }.order-admin-row strong,.order-admin-row small{display:block}.order-admin-row small{font-size:10px;color:var(--muted);margin-top:2px} .order-admin-row-actions { display:flex; gap:6px; }.order-admin-row-actions button { border:1px solid var(--border); background:#fff; color:var(--primary3); border-radius:8px; padding:6px 8px; cursor:pointer; font-size:11px; }.order-admin-row-actions button:last-child{color:var(--red)} .visitor-dashboard { margin:16px 0 20px; padding:14px; border:1px solid rgba(14,165,233,.2); border-radius:15px; background:rgba(240,249,255,.72); } .visitor-dashboard-head { display:flex; justify-content:space-between; align-items:center; color:var(--ink); font-size:13px; }.visitor-dashboard-head button { border:0; background:none; color:var(--primary3); font-size:11px; font-weight:800; cursor:pointer; } .visitor-stats { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:11px 0; }.visitor-stats > div { padding:10px; border-radius:11px; background:#fff; border:1px solid var(--border); }.visitor-stats small{display:block;color:var(--muted);font-size:10px;font-weight:800;text-transform:uppercase}.visitor-stats strong{display:block;color:var(--primary3);font-size:22px;line-height:1.3} .visitor-history { display:grid; gap:6px; max-height:180px; overflow:auto; font-size:11px; color:var(--muted); }.visitor-row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 9px; border-radius:9px; background:rgba(255,255,255,.8); }.visitor-row strong{color:var(--ink);font-size:11px}.visitor-live { color:var(--green); font-size:10px; font-weight:900; }.visitor-offline{color:var(--muted2);font-size:10px;font-weight:800} @media(max-width:520px){ .order-form-grid{grid-template-columns:1fr}.order-wide{grid-column:auto}.order-result-card{grid-template-columns:68px 1fr}.order-result-card img{width:68px;height:62px} } .json-helper-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .json-helper-grid label { font-size: 11px; font-weight: 900; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; } .json-helper-grid .finput { margin-top: 6px; text-transform: none; } .json-helper-wide { grid-column: 1/-1; } .json-helper-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; } .json-output { width: 100%; resize: vertical; border: 1px solid var(--border); border-radius: 16px; background: #0f172a; color: #dbeafe; padding: 14px; font: 12px/1.6 Consolas, Monaco, monospace; outline: none; } /* Cart */ .overlay { position: fixed; inset: 0; z-index: 600; background: rgba(15,23,42,0.4); backdrop-filter: blur(4px); display: none; justify-content: flex-end; } .overlay.show { display: flex; } .cart-box { width: 100%; max-width: 420px; height: 100%; max-height: 100vh; background: #fff; display: flex; flex-direction: column; box-shadow: -8px 0 40px rgba(0,0,0,0.12); animation: slideCart 0.3s var(--ease) both; } @keyframes slideCart { from { transform: translateX(100%); } to { transform: translateX(0); } } .cart-head { padding: 18px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; } .cart-heading { font-size: 20px; font-weight: 800; } .cart-count-pill { background: var(--primary); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 99px; margin-left: 8px; } .cart-clear { background: none; border: 1px solid var(--red-bdr); color: var(--red); font-size: 11px; padding: 6px 12px; border-radius: 8px; cursor: pointer; font-weight: 600; } .cart-x { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg3); cursor: pointer; color: var(--muted); } .cart-body { flex: 1; overflow-y: auto; padding: 12px 20px; display: flex; flex-direction: column; gap: 10px; } .cart-empty { text-align: center; padding: 48px 20px; color: var(--muted); font-size: 14px; } .cart-row { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--bg3); border-radius: 12px; border: 1px solid var(--border); } .cr-img { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; } .cr-n { font-size: 13px; font-weight: 600; } .cr-p { font-size: 11px; color: var(--muted); margin-top: 2px; } .cr-qty { display: flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .cr-qty-btn { width: 28px; height: 28px; border: none; background: #fff; cursor: pointer; font-weight: 600; } .cr-qty-num { padding: 0 10px; font-size: 12px; font-weight: 700; display: flex; align-items: center; background: var(--bg); } .cr-del { background: none; border: none; color: var(--muted); cursor: pointer; padding: 4px; } .cr-del:hover { color: var(--red); } .cart-foot { padding: 16px 20px 24px; border-top: 1px solid var(--border); } .ct-row { display: flex; justify-content: space-between; margin-bottom: 14px; } .ct-l { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; } .ct-v { font-size: 24px; font-weight: 800; color: var(--primary); } .btn-proc { width: 100%; padding: 14px; border: none; border-radius: 14px; background: var(--primary-gradient); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: var(--shadow-glow); } .btn-proc:hover { transform: translateY(-1px); } #toasts { position: fixed; bottom: 24px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .toast { background: #fff; color: var(--ink); border: 1px solid var(--border); padding: 12px 16px; border-radius: 12px; font-size: 13px; font-weight: 600; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 10px; animation: tin 0.3s ease; border-left: 4px solid var(--primary); } .toast.err { border-left-color: var(--red); } @keyframes tin { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } footer { border-top: 1px solid var(--border); padding: 32px 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 24px; } .foot-left { font-size: 13px; color: var(--muted); } .foot-social { display: flex; gap: 8px; } .foot-social a { width: 40px; height: 40px; border-radius: 12px; background: #fff; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--muted); text-decoration: none; transition: all 0.2s; } .foot-social a:hover { background: var(--primary); color: #fff; border-color: var(--primary); } .bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 400; background: #fff; border-top: 1px solid var(--border); padding: 8px 0 env(safe-area-inset-bottom, 8px); box-shadow: 0 -4px 20px rgba(0,0,0,0.06); } .bottom-nav-inner { display: flex; justify-content: space-around; } .bn-item { display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: none; cursor: pointer; color: var(--muted2); font-size: 9px; font-weight: 700; text-transform: uppercase; padding: 6px 14px; text-decoration: none; } .bn-item i { font-size: 18px; } .bn-item.active, .bn-item:hover { color: var(--primary); } .bn-badge { position: absolute; top: 0; right: 8px; background: var(--primary); color: #fff; font-size: 8px; width: 16px; height: 16px; border-radius: 50%; display: none; align-items: center; justify-content: center; } .bn-item.bn-cart { position: relative; } /* Changelog Modal */ #changelog-modal { display: none; opacity: 0; visibility: hidden; transition: all 0.35s ease; position: fixed; inset: 0; z-index: 999997; background: radial-gradient(circle at 20% 12%, rgba(14,165,233,0.22), transparent 34%), radial-gradient(circle at 86% 18%, rgba(16,185,129,0.14), transparent 30%), rgba(15,23,42,0.58); backdrop-filter: blur(12px); align-items: flex-start; justify-content: center; padding: 40px 20px 20px; } #changelog-modal.show { display: flex; opacity: 1; visibility: visible; } .changelog-box { position: relative; width: min(620px, 96vw); max-height: 95vh; background: linear-gradient(180deg, #ffffff, #f8fcff); border-radius: 26px; border: 1px solid rgba(14,165,233,0.18); box-shadow: 0 28px 80px rgba(15,23,42,0.22); overflow: hidden; transform: scale(0.92) translateY(12px); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.35s ease; opacity: 0; display: flex; flex-direction: column; } .changelog-box::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--primary), var(--green), var(--orange), var(--primary3)); z-index: 2; } #changelog-modal.show .changelog-box { transform: scale(1) translateY(0); opacity: 1; } .changelog-head { padding: 20px 24px 18px; background: linear-gradient(135deg, rgba(14,165,233,0.13), rgba(6,182,212,0.06)), linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.72)); border-bottom: 1px solid rgba(14,165,233,0.12); position: relative; } .changelog-head::after { content: ""; position: absolute; right: 72px; top: 18px; width: 80px; height: 80px; border-radius: 24px; background: linear-gradient(135deg, rgba(14,165,233,0.12), rgba(16,185,129,0.08)); transform: rotate(12deg); } .changelog-badge { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 99px; background: var(--primary-gradient); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; margin-bottom: 10px; box-shadow: 0 8px 22px rgba(14,165,233,0.24); } .changelog-title { position: relative; z-index: 1; font-size: clamp(22px, 4vw, 30px); font-weight: 900; color: var(--ink2); line-height: 1.1; letter-spacing: 0; } .changelog-datetime { position: relative; z-index: 1; margin-top: 10px; font-size: 11px; font-weight: 700; color: var(--muted); display: flex; align-items: center; gap: 6px; } .changelog-x { position: absolute; top: 16px; right: 16px; z-index: 3; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border); background: #fff; color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .changelog-x:hover { background: var(--red); color: #fff; border-color: var(--red); } .changelog-body { padding: 18px 22px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 12px; } .changelog-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 4px; } .changelog-summary > div { border: 1px solid rgba(14,165,233,0.14); background: rgba(255,255,255,0.78); border-radius: 14px; padding: 10px 12px; box-shadow: 0 8px 20px rgba(15,23,42,0.04); } .changelog-summary span { display: block; font-size: 9px; font-weight: 900; letter-spacing: .7px; text-transform: uppercase; color: var(--muted2); margin-bottom: 4px; } .changelog-summary strong { display: block; font-size: 12px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .changelog-section-card { position: relative; padding: 12px; border-radius: 18px; border: 1px solid var(--border); background: rgba(255,255,255,0.82); box-shadow: 0 10px 24px rgba(15,23,42,0.05); } .changelog-section-card::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 99px; background: var(--primary); } .changelog-section-card.added::before { background: var(--green); } .changelog-section-card.fixed::before { background: var(--primary); } .changelog-section-card.removed::before { background: var(--red); } .changelog-section-card.info::before { background: var(--orange); } .changelog-section-card:hover { transform: translateY(-1px); transition: transform .18s ease; } .changelog-section-icon, .changelog-item-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .changelog-section-title { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .8px; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } .changelog-section-title b { margin-left: auto; min-width: 24px; height: 24px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; background: var(--bg3); color: var(--muted); font-size: 10px; } .changelog-section-icon { width: 26px; height: 26px; border-radius: 9px; background: rgba(14,165,233,0.1); } .changelog-section-title.added { color: var(--green); } .changelog-section-title.fixed { color: var(--primary); } .changelog-section-title.removed { color: var(--red); } .changelog-list { list-style: none; display: flex; flex-direction: column; gap: 6px; } .changelog-list li { font-size: 12.5px; color: var(--ink); line-height: 1.55; padding: 10px 11px; border-radius: 12px; background: linear-gradient(180deg, #fff, var(--bg3)); border: 1px solid rgba(148,163,184,0.18); display: flex; gap: 10px; align-items: flex-start; } .changelog-item-icon { width: 24px; height: 24px; border-radius: 9px; background: rgba(14,165,233,0.09); margin-top: 0; } .changelog-list li i { flex-shrink: 0; font-size: 11px; } .changelog-list li.added .changelog-item-icon { color: var(--green); background: var(--green-bg); } .changelog-list li.fixed .changelog-item-icon { color: var(--primary); background: rgba(14,165,233,0.1); } .changelog-list li.removed .changelog-item-icon { color: var(--red); background: var(--red-bg); } .changelog-foot { padding: 14px 22px 18px; border-top: 1px solid var(--border); background: rgba(255,255,255,0.9); } .changelog-ok { width: 100%; padding: 12px; border: none; border-radius: 12px; background: var(--primary-gradient); color: #fff; font-size: 13px; font-weight: 800; cursor: pointer; box-shadow: 0 8px 24px var(--primary-glow); transition: all 0.2s; } .changelog-ok:hover { transform: translateY(-2px); filter: brightness(1.05); } .changelog-btn { width: auto; padding: 0 12px; gap: 6px; font-size: 12px; font-weight: 700; } .changelog-btn .cl-txt { display: inline; } .hard-refresh-btn { width: auto; min-width: 132px; height: 44px; padding: 0 14px; gap: 8px; border-radius: 14px; background: linear-gradient(135deg, #0ea5e9, #22c55e); color: #fff; border-color: rgba(14,165,233,.22); box-shadow: 0 12px 26px rgba(14,165,233,.22); font-size: 12px; font-weight: 900; } .hard-refresh-btn:hover { transform: translateY(-1px); filter: brightness(1.05); } .hard-refresh-btn.is-loading i, .changelog-hard-refresh.is-loading i { animation: hardRefreshSpin .75s linear infinite; } @keyframes hardRefreshSpin { to { transform: rotate(360deg); } } .changelog-foot { display: grid; gap: 10px; } .changelog-hard-refresh { width: 100%; min-height: 58px; border: 1px solid rgba(14,165,233,.18); border-radius: 16px; background: linear-gradient(135deg, rgba(14,165,233,.10), rgba(34,197,94,.10)); color: var(--ink); display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 14px; cursor: pointer; font-weight: 900; box-shadow: 0 10px 24px rgba(15,23,42,.08); } .changelog-hard-refresh > i { width: 36px; height: 36px; border-radius: 12px; background: linear-gradient(135deg, #0ea5e9, #22c55e); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } .changelog-hard-refresh span { display: grid; gap: 2px; text-align: left; } .changelog-hard-refresh strong { font-size: 14px; line-height: 1.1; } .changelog-hard-refresh small { color: var(--muted); font-size: 11px; font-weight: 700; line-height: 1.35; } @media (max-width: 768px) { .changelog-btn .cl-txt { display: none; } .hard-refresh-btn { display: none; } #changelog-modal { padding: 18px 10px; align-items: center; } .changelog-box { width: min(440px, 96vw); border-radius: 22px; max-height: 92vh; } .changelog-head { padding: 18px 18px 16px; } .changelog-body { padding: 14px; } .changelog-summary { grid-template-columns: 1fr; } .changelog-summary > div { padding: 9px 10px; } .changelog-list li { font-size: 12px; } .changelog-hard-refresh { min-height: 64px; border-radius: 15px; } } #ann-details-modal { display: none; opacity: 0; visibility: hidden; transition: all 0.4s; position: fixed; inset: 0; z-index: 999999; background: rgba(15,23,42,0.5); backdrop-filter: blur(12px); align-items: center; justify-content: center; padding: 20px; } #ann-details-modal.show-modal { display: flex; opacity: 1; visibility: visible; } /* Responsive */ @media (max-width: 1024px) { .hero { grid-template-columns: 1fr; } .hero-float-1, .hero-float-2 { display: none; } #game-grid { grid-template-columns: repeat(4, 1fr); } .steps-grid, .testi-grid { grid-template-columns: 1fr; } .co-grid { grid-template-columns: 1fr; } .order-box { position: static; } .trust-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .nav-links, .btn-wa .btn-txt { display: none; } .nav-ham { display: flex; } .bottom-nav { display: block; } .chat-cs-float { bottom: 150px; } .platform-filter-bar { gap: 6px; margin: 12px 0 14px; padding: 5px; border-radius: 16px; } .platform-chip { min-height: 42px; font-size: 12px; gap: 6px; } #game-grid { grid-template-columns: repeat(3, 1fr); } #inventory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .permanent-fruit-picker { grid-template-columns: auto minmax(0, 1fr); } .permanent-fruit-select-wrap { grid-column: 1 / -1; } .product-subsection { padding: 12px; border-radius: 16px; } .product-subgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .section-panel { border-radius: 18px; padding: 18px; } .ph { gap: 12px; align-items: center; } .ph-actions { gap: 6px; } .ph-actions .pss { width: 40px; height: 40px; border-radius: 12px; } .product-filter-bar { margin-inline: -4px; padding-bottom: 12px; } .product-filter-chip { height: 36px; padding: 0 11px; font-size: 11px; } .ph-title { font-size: clamp(22px, 7vw, 32px); line-height: 1.05; } .ph-count { font-size: 12px; } .product-modal-content { grid-template-columns: 1fr; } .product-modal-image-wrap .product-media-carousel { height: min(48vh, 360px); min-height: 240px; } .product-media-track { gap: 8px; } .product-media-arrow { width: 38px; height: 38px; } .product-modal-info { border-left: none; border-top: 1px solid var(--border); max-height: 45vh; } .product-modal-close { top: 8px; right: 8px; } .hero-stats { flex-direction: column; } .hstat { min-width: unset; } } @media (max-width: 480px) { #game-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; } #inventory-grid { grid-template-columns: 1fr; gap: 14px; } .permanent-fruit-picker { grid-template-columns: auto minmax(0, 1fr); padding: 14px; } .permanent-fruit-picker-copy b { font-size: 14px; } .permanent-selected-card { max-width: none; } .product-subhead { padding-bottom: 10px; } .product-subhead > div { font-size: 12px; } .product-subgrid { grid-template-columns: 1fr; gap: 12px; } #product-view { padding-top: 8px !important; } #product-view .section-panel { padding: 14px; margin-inline: -2px; } .ph-actions .pss { width: 38px; height: 38px; } .product-modal-summary { grid-template-columns: 1fr; } .product-modal-summary div { padding: 9px 10px; } .detail-note { font-size: 11px; line-height: 1.45; padding: 10px 12px; } .pc { padding: 0; border-radius: 18px; display: grid; grid-template-columns: 42% 1fr; min-height: 172px; box-shadow: 0 10px 26px rgba(15,23,42,0.08); } .pimg { aspect-ratio: auto; height: 100%; min-height: 172px; border-radius: 18px 0 0 18px; } .pbody { padding: 13px; border-top: 0; border-left: 1px solid rgba(14,165,233,0.08); min-width: 0; } .ptag { top: 8px; left: 8px; font-size: 8px; padding: 5px 8px; } .stock-badge { right: auto; left: 8px; bottom: 8px; font-size: 9px; padding: 5px 8px; } .media-type-pill { left: 8px; top: 38px; font-size: 9px; padding: 4px 7px; } .pname { font-size: 14px; line-height: 1.25; margin-bottom: 5px; -webkit-line-clamp: 2; line-clamp: 2; } .psold { font-size: 10px; margin-bottom: 6px; } .pdesc { font-size: 11px; -webkit-line-clamp: 2; line-clamp: 2; margin-bottom: 8px; line-height: 1.38; } .pstatus-row { gap: 4px; margin-bottom: 7px; } .pstatus-chip { font-size: 8px; padding: 4px 6px; } .pfoot { padding-top: 8px; gap: 8px; margin-top: auto; } .pfoot-top { align-items: center; } .pprice { font-size: 20px; } .pprice-old { font-size: 10px; margin-left: 4px; } .pcart-hint { font-size: 9px; white-space: nowrap; } .pactions { gap: 7px; } .padd { height: 38px; min-width: 38px; padding: 0 9px; font-size: 11px; border-radius: 11px; } .padd-txt { display: none; } .pbuy { height: 38px; padding: 0 12px; font-size: 11px; font-weight: 900; border-radius: 11px; } .pquick { display: none; } .pay-methods { grid-template-columns: 1fr; } .trust-grid { grid-template-columns: 1fr; } .json-helper-card { padding: 16px; border-radius: 18px; } .json-helper-grid { grid-template-columns: 1fr; } .json-helper-actions .btn-primary, .json-helper-actions .btn-ghost { flex: 1; justify-content: center; padding: 12px; } .product-modal-trust { grid-template-columns: 1fr; } .product-modal-actions { flex-direction: column; } } @media (max-width: 360px) { #product-view .section-panel { padding: 12px; } .pc { grid-template-columns: 38% 1fr; min-height: 164px; } .pimg { min-height: 164px; } .pbody { padding: 11px; } .pname { font-size: 13px; } .pprice { font-size: 18px; } .pbuy { padding: 0 9px; } } /* Performance fix: the old rule set "will-change: transform" PERMANENTLY on every .pc product card, .trust-item, .step, .testi-card, .faq, .hstat and .hero-cta-row link. With dozens of products on the page that meant dozens of GPU-composited layers held in memory at all times ? that's what was causing the lag/jank, especially on phones. These elements already have "transition: transform ..." set where they need it, and modern browsers handle that fine on their own without a standing will-change. Removing it here is the actual fix ? no replacement rule is needed. */ @media (min-width: 769px) { .overlay { justify-content: flex-end; } } /* Business Hours Bar */ .business-hours-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 201; background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(248,250,252,0.95) 100%); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(14,165,233,0.15); border-top: none; box-shadow: 0 4px 20px rgba(15,23,42,0.04); } .bh-inner { max-width: var(--max-w); margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 14px; } .bh-icon { width: 48px; height: 48px; border-radius: 14px; background: var(--primary-gradient); display: flex; align-items: center; justify-content: center; color: white; font-size: 22px; box-shadow: 0 6px 20px var(--primary-glow); } .bh-text { flex: 1; } .bh-title { font-size: 12px; font-weight: 800; color: var(--ink2); letter-spacing: 0.5px; } .bh-desc { font-size: 11px; color: var(--muted); margin-top: 2px; } .bh-status { display: flex; align-items: center; gap: 10px; padding: 10px 20px; border-radius: 99px; font-size: 12px; font-weight: 800; } .bh-dot { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 4px rgba(14,165,233,0.1); } .bh-dot.open { background: #10b981; box-shadow: 0 0 0 4px rgba(16,185,129,0.15); animation: pulse-green 2s infinite; } .bh-dot.closed { background: #ef4444; box-shadow: 0 0 0 4px rgba(239,68,68,0.15); animation: pulse-red 2s infinite; } .bh-status:has(.bh-dot.open) { background: rgba(16,185,129,0.1); color: #059669; border: 1px solid rgba(16,185,129,0.2); } .bh-status:has(.bh-dot.closed) { background: rgba(239,68,68,0.1); color: #dc2626; border: 1px solid rgba(239,68,68,0.2); } @keyframes pulse-green { 0%,100%{opacity:1; transform: scale(1);}50%{opacity:0.6; transform: scale(1.1);} } @keyframes pulse-red { 0%,100%{opacity:1; transform: scale(1);}50%{opacity:0.6; transform: scale(1.1);} } @keyframes music-pulse { 0%,100%{transform: scale(1);}50%{transform: scale(1.08);} } /* Add padding to body so content isn't hidden under business hours */ body { padding-top: 80px; } /* Adjust music button position for desktop */ @media (min-width: 768px) { .music-btn { top: 105px; left: 20px; right: auto; } } @media (max-width: 767px) { body { padding-top: 80px; } .music-btn { bottom: 20px; left: 20px; } } /* Music Button */ .music-btn { position: fixed; bottom: 20px; left: 20px; width: 64px; height: 64px; border-radius: 50%; background: var(--primary-gradient); color: white; border: none; font-size: 26px; cursor: pointer; box-shadow: 0 8px 30px var(--primary-glow); z-index: 188; display: flex; align-items: center; justify-content: center; transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .music-btn:hover { transform: scale(1.12); box-shadow: 0 12px 40px var(--primary-glow); } .music-btn.playing { animation: music-pulse 1.2s infinite; } .music-btn.paused { background: linear-gradient(145deg, #6b7280 0%, #4b5563 100%); box-shadow: 0 6px 20px rgba(107,114,128,0.35); } /* ========================================================= H4SX STORE REDESIGN REFRESH 2026 Visual-only layer: keep catalog, cart, checkout, QR, popup and JS intact. ========================================================= */ :root { --refresh-ink: #101827; --refresh-line: rgba(15, 23, 42, 0.10); --refresh-cyan: #0ea5e9; --refresh-green: #14b8a6; --refresh-coral: #fb7185; --refresh-amber: #f59e0b; --refresh-violet: #8b5cf6; --refresh-panel: rgba(255, 255, 255, 0.86); --refresh-grid: rgba(14, 165, 233, 0.10); } body { background: linear-gradient(115deg, rgba(255,255,255,.72) 0 18%, transparent 18% 100%), linear-gradient(180deg, #eef8ff 0%, #f8fbff 34%, #ffffff 70%, #f5fbf8 100%); } body::before { background-image: linear-gradient(var(--refresh-grid) 1px, transparent 1px), linear-gradient(90deg, var(--refresh-grid) 1px, transparent 1px); background-size: 46px 46px; mask-image: linear-gradient(to bottom, rgba(0,0,0,.75), rgba(0,0,0,.08)); } .page-mesh { background: linear-gradient(135deg, rgba(14,165,233,.12), transparent 28%), linear-gradient(225deg, rgba(20,184,166,.10), transparent 32%), repeating-linear-gradient(135deg, rgba(15,23,42,.035) 0 1px, transparent 1px 18px); } .site-top-link { height: 36px; background: linear-gradient(90deg, #0f172a, #12324b 50%, #0f172a); border-bottom: 1px solid rgba(255,255,255,.08); } .site-top-link a { font-size: 11.5px; letter-spacing: .2px; color: rgba(255,255,255,.82); } .marquee-wrap { height: 38px; background: linear-gradient(90deg, var(--refresh-cyan), var(--refresh-green), var(--refresh-amber)); box-shadow: inset 0 -1px 0 rgba(255,255,255,.24); } .marquee-item { font-size: 10.5px; font-weight: 900; letter-spacing: .9px; } nav { height: 82px; background: rgba(255,255,255,.78); border-bottom: 1px solid rgba(14,165,233,.14); box-shadow: 0 12px 34px rgba(15,23,42,.06); } .nav-inner { gap: 18px; } .nav-logo { width: 60px; height: 60px; border-radius: 18px; border-color: rgba(14,165,233,.22); box-shadow: 0 12px 28px rgba(14,165,233,.14); } .nav-wordmark { font-size: 18px; font-weight: 900; letter-spacing: -.45px; } .nav-links { padding: 5px; border: 1px solid rgba(14,165,233,.12); border-radius: 999px; background: rgba(241,245,249,.78); } .nav-links a { min-height: 36px; display: inline-flex; align-items: center; border-radius: 999px; font-weight: 800; } .nav-links a:hover { color: #fff; background: linear-gradient(135deg, var(--refresh-cyan), var(--refresh-green)); } .search-btn, .cart-btn, .nav-ham { border-radius: 15px; background: rgba(255,255,255,.9); border-color: rgba(14,165,233,.16); box-shadow: 0 8px 20px rgba(15,23,42,.05); } .btn-wa { border-radius: 15px; background: linear-gradient(135deg, #16a34a, #22c55e); box-shadow: 0 12px 28px rgba(34,197,94,.25); } .wrap { max-width: 1320px; } .hero { min-height: calc(100vh - 180px); padding: clamp(42px, 6vw, 88px) 0 clamp(34px, 5vw, 70px); border-bottom: 1px solid rgba(14,165,233,.10); } .hero::before, .hero::after { border-radius: 26px; filter: none; opacity: .8; } .hero::before { width: 210px; height: 210px; left: auto; right: 36%; top: 9%; background: linear-gradient(135deg, rgba(14,165,233,.16), rgba(20,184,166,.10)); border: 1px solid rgba(14,165,233,.14); transform: rotate(9deg); } .hero::after { width: 160px; height: 120px; right: 2%; bottom: 11%; background: linear-gradient(135deg, rgba(251,113,133,.14), rgba(245,158,11,.12)); border: 1px solid rgba(251,113,133,.16); transform: rotate(-7deg); } .hero-eyebrow { background: rgba(255,255,255,.88); border-color: rgba(20,184,166,.22); color: #0f766e; box-shadow: 0 10px 26px rgba(20,184,166,.10); } .hero-h1 { max-width: 660px; font-size: clamp(42px, 7vw, 78px); line-height: .98; letter-spacing: -2.4px; } .hero-h1 em { background: linear-gradient(110deg, var(--refresh-cyan), var(--refresh-green) 48%, var(--refresh-amber)); -webkit-background-clip: text; background-clip: text; } .hero-desc { max-width: 560px; font-size: 17px; color: #475569; } .hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 560px; } .hstat { min-width: 0; padding: 16px; border-radius: 20px; background: rgba(255,255,255,.82); border-color: rgba(14,165,233,.16); box-shadow: 0 12px 28px rgba(15,23,42,.06); } .hstat:nth-child(2) .hstat-n { color: var(--refresh-green); } .hstat:nth-child(3) .hstat-n { color: var(--refresh-amber); } .hero-cta-row .btn-primary, .hero-cta-row .btn-ghost { border-radius: 18px; min-height: 54px; } .btn-primary { background: linear-gradient(135deg, var(--refresh-cyan), var(--refresh-green)); } .btn-ghost { background: rgba(255,255,255,.84); border-color: rgba(15,23,42,.10); } .proof-pill { border-radius: 999px; background: rgba(255,255,255,.72); border: 1px solid rgba(14,165,233,.12); box-shadow: 0 8px 18px rgba(15,23,42,.04); } .hero-vid { border-radius: 30px; border: 1px solid rgba(14,165,233,.18); box-shadow: 0 28px 70px rgba(14,165,233,.16), 0 8px 24px rgba(15,23,42,.08); } .hero-float-1, .hero-float-2 { border-radius: 18px; border: 1px solid rgba(14,165,233,.14); box-shadow: 0 16px 34px rgba(15,23,42,.10); } .float-ic { background: linear-gradient(135deg, var(--refresh-cyan), var(--refresh-green)); } .trust-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .trust-item { border-radius: 20px; background: rgba(255,255,255,.78); border-color: rgba(14,165,233,.13); box-shadow: 0 12px 28px rgba(15,23,42,.05); } .trust-item:nth-child(2) .trust-ic { color: var(--refresh-green); } .trust-item:nth-child(3) .trust-ic { color: var(--refresh-amber); } .trust-item:nth-child(4) .trust-ic { color: var(--refresh-coral); } .section-panel { border-radius: 28px; background: rgba(255,255,255,.78); border: 1px solid rgba(14,165,233,.13); box-shadow: 0 18px 46px rgba(15,23,42,.06); backdrop-filter: blur(16px); } .sh-tag { color: var(--refresh-green); letter-spacing: 1.4px; } .sh-title, .ph-title { letter-spacing: -.9px; } .detail-note { border-radius: 16px; background: linear-gradient(135deg, rgba(14,165,233,.08), rgba(20,184,166,.07)); border: 1px solid rgba(14,165,233,.14); } .platform-filter-bar, .product-filter-bar { background: rgba(241,245,249,.76); border: 1px solid rgba(14,165,233,.12); border-radius: 20px; } .platform-chip, .product-filter-chip { border-radius: 999px; font-weight: 900; } .platform-chip.active, .product-filter-chip.active { background: linear-gradient(135deg, var(--refresh-cyan), var(--refresh-green)); color: #fff; box-shadow: 0 10px 22px rgba(14,165,233,.20); } #game-grid { gap: 18px; } .gc { padding: 12px; border-radius: 22px; background: rgba(255,255,255,.72); border: 1px solid rgba(14,165,233,.12); box-shadow: 0 10px 24px rgba(15,23,42,.045); } .gc:not(.oos):hover { transform: translateY(-4px); border-color: rgba(20,184,166,.28); box-shadow: 0 18px 38px rgba(14,165,233,.10); } .gc-icon-wrap { border-radius: 22px; border-color: rgba(14,165,233,.14); background: linear-gradient(135deg, #fff, #eef8ff); } .gc-name { font-size: 11px; letter-spacing: .2px; } .gc-badge { border-radius: 999px; box-shadow: 0 6px 16px rgba(15,23,42,.16); } #inventory-grid, .product-subgrid { gap: 18px; } .pc { border-radius: 24px; border: 1px solid rgba(14,165,233,.13); background: rgba(255,255,255,.86); box-shadow: 0 14px 34px rgba(15,23,42,.07); overflow: hidden; } .pc:hover { transform: translateY(-5px); border-color: rgba(20,184,166,.26); box-shadow: 0 24px 52px rgba(15,23,42,.11); } .pimg { border-radius: 24px 24px 0 0; background: linear-gradient(135deg, #e0f2fe, #f8fafc); } .pbody { background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,252,.98)); } .pname { font-weight: 900; letter-spacing: -.2px; } .pprice { color: var(--refresh-cyan); } .pstatus-chip, .stock-badge, .media-type-pill, .ptag { border-radius: 999px; font-weight: 900; box-shadow: 0 8px 18px rgba(15,23,42,.12); } .padd, .pbuy, .pm-btn, .btn-send, .btn-proc { border-radius: 15px; font-weight: 900; } .pbuy, .pm-btn.buy, .btn-send, .btn-proc { background: linear-gradient(135deg, var(--refresh-cyan), var(--refresh-green)); } .padd { background: #0f172a; } .padd.in-cart { background: linear-gradient(135deg, var(--refresh-green), #22c55e); } .step, .faq, .co-block, .warn-box, .checkout-mini-faq, .order-box, .testi-card { border-radius: 24px; border-color: rgba(14,165,233,.13); background: rgba(255,255,255,.82); box-shadow: 0 14px 34px rgba(15,23,42,.055); } .step-icon, .co-n, .trust-ic { border-radius: 16px; background: linear-gradient(135deg, rgba(14,165,233,.12), rgba(20,184,166,.10)); } .order-box { top: 22px; } .product-modal-content, .cart-box, .json-helper-card, .changelog-box { border-radius: 28px; border: 1px solid rgba(14,165,233,.14); box-shadow: 0 28px 80px rgba(15,23,42,.18); } .product-modal-image-wrap { background: linear-gradient(135deg, #e0f2fe, #f8fafc); } .bottom-nav { background: rgba(255,255,255,.88); backdrop-filter: blur(18px); border-top: 1px solid rgba(14,165,233,.14); } .bn-item.active, .bn-item:hover { color: var(--refresh-green); } .business-hours-bar { background: rgba(255,255,255,.9); border-bottom-color: rgba(14,165,233,.16); } :root[data-theme="dark"] body { background: linear-gradient(115deg, rgba(8,17,29,.72) 0 22%, transparent 22% 100%), linear-gradient(180deg, #07111d 0%, #0b1725 48%, #08111d 100%); } :root[data-theme="dark"] nav, :root[data-theme="dark"] .bottom-nav, :root[data-theme="dark"] .business-hours-bar { background: rgba(11,23,37,.84); border-color: rgba(125,211,252,.14); } :root[data-theme="dark"] .section-panel, :root[data-theme="dark"] .trust-item, :root[data-theme="dark"] .gc, :root[data-theme="dark"] .pc, :root[data-theme="dark"] .step, :root[data-theme="dark"] .faq, :root[data-theme="dark"] .co-block, :root[data-theme="dark"] .checkout-mini-faq, :root[data-theme="dark"] .order-box, :root[data-theme="dark"] .testi-card { background: rgba(16,31,49,.82); border-color: rgba(125,211,252,.13); box-shadow: 0 18px 48px rgba(0,0,0,.24); } :root[data-theme="dark"] .pbody { background: linear-gradient(180deg, rgba(16,31,49,.96), rgba(11,23,37,.98)); } :root[data-theme="dark"] .gc-icon-wrap, :root[data-theme="dark"] .product-modal-image-wrap { background: linear-gradient(135deg, #0b1725, #13243a); } :root[data-theme="dark"] .nav-links, :root[data-theme="dark"] .platform-filter-bar, :root[data-theme="dark"] .product-filter-bar { background: rgba(8,17,29,.72); border-color: rgba(125,211,252,.12); } :root[data-theme="dark"] .review-summary-card { background: linear-gradient(180deg, rgba(16,31,49,.88), rgba(11,23,37,.80)), radial-gradient(circle at 100% 0%, rgba(14,165,233,.13), transparent 42%); border-color: rgba(125,211,252,.14); } :root[data-theme="dark"] .review-summary-label, :root[data-theme="dark"] .review-summary-sub { color: #b9d4e5; } @media (max-width: 1024px) { .hero { min-height: auto; } .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 768px) { nav { height: 74px; } .nav-logo { width: 52px; height: 52px; } .hero { padding-top: 36px; } .hero-h1 { font-size: clamp(38px, 12vw, 58px); letter-spacing: -1.6px; } .hero-stats { grid-template-columns: 1fr; } .section-panel { border-radius: 22px; } .review-summary-grid { grid-template-columns: 1fr; } .trust-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .hero-cta-row .btn-primary, .hero-cta-row .btn-ghost { width: 100%; justify-content: center; } .pc { border-radius: 20px; } .pimg { border-radius: 20px 0 0 20px; } .bottom-nav-inner { padding: 0 6px; } } /* ========================================================= GAME PICKER GLOW UP Visual-only refresh for "Pilih game anda" section. ========================================================= */ #shop-section { position: relative; overflow: hidden; padding: 28px; border-radius: 32px; border-color: rgba(14,165,233,.18); background: radial-gradient(circle at 12% 0%, rgba(14,165,233,.18), transparent 34%), radial-gradient(circle at 88% 12%, rgba(34,197,94,.13), transparent 30%), linear-gradient(145deg, rgba(255,255,255,.94), rgba(248,250,252,.84) 48%, rgba(236,254,255,.72)); box-shadow: 0 28px 70px rgba(15,23,42,.08); } #shop-section::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(135deg, rgba(14,165,233,.055) 25%, transparent 25%), linear-gradient(315deg, rgba(20,184,166,.05) 25%, transparent 25%); background-size: 28px 28px; opacity: .55; mask-image: linear-gradient(180deg, #000, transparent 76%); } #shop-section > * { position: relative; z-index: 1; } #shop-section .sh { align-items: flex-end; margin-bottom: 16px; } #shop-section .sh > div { position: relative; padding-left: 18px; } #shop-section .sh > div::before { content: ""; position: absolute; left: 0; top: 4px; width: 6px; height: calc(100% - 8px); border-radius: 99px; background: linear-gradient(180deg, var(--refresh-cyan), var(--refresh-green)); box-shadow: 0 0 22px rgba(14,165,233,.32); } #shop-section .sh-tag { width: fit-content; padding: 6px 10px; border-radius: 999px; background: rgba(14,165,233,.09); color: var(--refresh-cyan); font-size: 10px; font-weight: 950; } #shop-section .sh-title { margin-top: 8px; color: var(--refresh-ink); font-size: clamp(28px, 4vw, 46px); line-height: .98; letter-spacing: -1.6px; } #shop-section .detail-note { min-height: 46px; display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 12px 16px; border-radius: 18px; color: #0477b8; background: linear-gradient(135deg, rgba(14,165,233,.11), rgba(20,184,166,.08)), rgba(255,255,255,.72); box-shadow: inset 0 1px 0 rgba(255,255,255,.76), 0 12px 28px rgba(14,165,233,.08); } #shop-section .detail-note i { width: 24px; height: 24px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, var(--refresh-cyan), var(--refresh-green)); box-shadow: 0 8px 18px rgba(14,165,233,.22); } #shop-section .platform-filter-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin: 0 0 22px; padding: 8px; border-radius: 24px; background: rgba(255,255,255,.66); border: 1px solid rgba(14,165,233,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 16px 38px rgba(15,23,42,.06); backdrop-filter: blur(14px); } #shop-section .platform-card { position: relative; isolation: isolate; min-height: 134px; overflow: hidden; justify-content: flex-start; gap: 14px; padding: 18px; border: 1px solid rgba(255,255,255,.32); border-radius: 22px; color: #fff; background: #07111d; box-shadow: 0 18px 36px rgba(15,23,42,.16); } #shop-section .platform-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7,17,29,.86), rgba(7,17,29,.42) 58%, rgba(14,165,233,.2)), radial-gradient(circle at 88% 0%, rgba(34,197,94,.34), transparent 34%); } #shop-section .platform-card::after { content: ""; position: absolute; inset: auto 18px 12px 18px; height: 3px; border-radius: 999px; background: linear-gradient(90deg, var(--refresh-cyan), var(--refresh-green)); opacity: .62; } #shop-section .platform-card-bg { position: absolute; inset: 0; z-index: -2; background-position: center; background-size: cover; transform: scale(1.08); opacity: .44; filter: saturate(1.15) contrast(1.08); transition: transform .35s var(--ease), opacity .35s var(--ease); } #shop-section .platform-card-icon { width: 46px; height: 46px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 16px; color: #082033; background: rgba(255,255,255,.92); box-shadow: 0 10px 24px rgba(0,0,0,.18); } #shop-section .platform-card-copy { display: grid; gap: 5px; text-align: left; } #shop-section .platform-card-copy strong { font-size: clamp(21px, 3vw, 31px); line-height: 1; letter-spacing: .5px; text-transform: uppercase; } #shop-section .platform-card-copy small { color: rgba(255,255,255,.82); font-size: 12px; font-weight: 800; } #shop-section .platform-card b { position: absolute; right: 16px; top: 14px; min-width: 28px; height: 28px; padding: 0 9px; border-radius: 999px; color: #fff; background: rgba(14,165,233,.88); border: 1px solid rgba(255,255,255,.34); box-shadow: 0 8px 18px rgba(0,0,0,.18); } #shop-section .platform-card:hover .platform-card-bg { transform: scale(1.15); opacity: .58; } #shop-section .platform-card.active { background: #07111d; color: #fff; transform: translateY(-2px); border-color: rgba(34,197,94,.72); box-shadow: 0 22px 46px rgba(20,184,166,.22); } #shop-section .platform-card.active::after { height: 5px; opacity: 1; } #shop-section #game-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 176px)); justify-content: start; align-items: start; gap: 20px; } #shop-section .gc { position: relative; min-width: 0; padding: 12px; gap: 12px; border-radius: 26px; background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,250,252,.82)), radial-gradient(circle at 50% 0%, rgba(14,165,233,.12), transparent 46%); border: 1px solid rgba(14,165,233,.16); box-shadow: 0 16px 34px rgba(15,23,42,.07); transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease); } #shop-section .gc::after { content: ""; position: absolute; inset: 8px; border-radius: 22px; border: 1px solid rgba(255,255,255,.75); pointer-events: none; } #shop-section .gc:not(.oos):hover { transform: translateY(-8px); border-color: rgba(20,184,166,.38); box-shadow: 0 26px 54px rgba(14,165,233,.16); } #shop-section .gc-icon-wrap { border-radius: 22px; border: 1px solid rgba(14,165,233,.14); box-shadow: 0 12px 24px rgba(15,23,42,.11), inset 0 1px 0 rgba(255,255,255,.8); background: linear-gradient(135deg, rgba(14,165,233,.18), rgba(34,197,94,.11)), #f8fafc; } #shop-section .gc.active .gc-icon-wrap { border-color: rgba(34,197,94,.8); box-shadow: 0 0 0 4px rgba(34,197,94,.16), 0 18px 36px rgba(20,184,166,.2); } #shop-section .gc-name { width: 100%; min-height: 34px; display: flex; align-items: center; justify-content: center; padding: 0 8px; border-radius: 14px; color: #102033; background: rgba(255,255,255,.68); font-size: 11px; font-weight: 950; line-height: 1.28; letter-spacing: .15px; box-shadow: inset 0 1px 0 rgba(255,255,255,.8); } #shop-section .gc:not(.oos):hover .gc-name { color: #008f8b; } #shop-section .gc-badge { top: 8px; right: 8px; padding: 6px 9px; border: 1px solid rgba(255,255,255,.58); background: linear-gradient(135deg, #0ea5e9, #2563eb); font-size: 9px; box-shadow: 0 10px 22px rgba(37,99,235,.26); } #shop-section .gc-badge.new { background: linear-gradient(135deg, #06b6d4, #22c55e); } #shop-section .gc-badge.akan-dihapus, #shop-section .gc-badge.hot { background: linear-gradient(135deg, #f59e0b, #ef4444); } :root[data-theme="dark"] #shop-section { border-color: rgba(125,211,252,.14); background: radial-gradient(circle at 12% 0%, rgba(14,165,233,.18), transparent 34%), radial-gradient(circle at 90% 10%, rgba(34,197,94,.12), transparent 30%), linear-gradient(145deg, rgba(8,17,29,.96), rgba(11,23,37,.88) 52%, rgba(13,38,48,.76)); } :root[data-theme="dark"] #shop-section .sh-title, :root[data-theme="dark"] #shop-section .gc-name { color: #f8fafc; } :root[data-theme="dark"] #shop-section .detail-note, :root[data-theme="dark"] #shop-section .platform-filter-bar, :root[data-theme="dark"] #shop-section .gc { background: rgba(15,23,42,.72); border-color: rgba(125,211,252,.14); } :root[data-theme="dark"] #shop-section .platform-chip { color: #b9d4e5; } :root[data-theme="dark"] #shop-section .gc-icon-wrap { background: linear-gradient(135deg, rgba(14,165,233,.16), rgba(34,197,94,.09)), #0b1725; } :root[data-theme="dark"] #shop-section .gc-name { background: rgba(8,17,29,.55); } @media (max-width: 768px) { #shop-section { padding: 20px; border-radius: 26px; } #shop-section .sh-title { font-size: clamp(30px, 10vw, 42px); } #shop-section .detail-note { align-items: flex-start; font-size: 12px; line-height: 1.45; } #shop-section .platform-filter-bar { overflow-x: auto; scroll-snap-type: x proximity; grid-template-columns: none; display: flex; } #shop-section .platform-card { flex: 0 0 auto; width: min(78vw, 280px); scroll-snap-align: start; } #game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } #shop-section .gc { padding: 10px; border-radius: 22px; } } @media (max-width: 420px) { #shop-section { padding: 16px; margin-inline: -2px; } #game-grid { gap: 12px; } #shop-section .gc-name { min-height: 38px; font-size: 10px; } } /* ========================================================= PERFORMANCE POLISH Keep the new look, reduce GPU-heavy blur/filter/shadow work. ========================================================= */ .platform-card-bg, #shop-section .platform-card-bg { filter: none; } .business-hours-bar, nav, .bottom-nav, #shop-section .platform-filter-bar, .section-panel, .pc, .gc, .trust-item, .step, .faq, .testi-card, .order-box { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } #shop-section, .section-panel, .pc, .gc, .trust-item, .step, .faq, .testi-card, .order-box, .product-modal-content, .cart-box { box-shadow: 0 12px 32px rgba(15,23,42,.07) !important; } .platform-card, #shop-section .platform-card, #shop-section .gc:not(.oos):hover, .pc:hover { box-shadow: 0 16px 34px rgba(15,23,42,.10) !important; } .music-btn.playing, .bh-dot.open, .bh-dot.closed, .ey-dot, .vdot, .status-dot { animation-duration: 2.4s !important; } .hero-float-1, .hero-float-2 { animation: none !important; } @media (max-width: 768px), (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } .marquee-track { animation: none !important; } .pc:hover, .gc:not(.oos):hover, #shop-section .gc:not(.oos):hover, #shop-section .platform-card.active { transform: none !important; } body::before, #shop-section::before, .hero::before, .hero::after { display: none !important; } } /* ========================================================= SKYBLUE THEME ALIGNMENT Keep the refresh style, remove green/yellow drift. ========================================================= */ :root { --refresh-green: #06b6d4; --refresh-amber: #38bdf8; } .marquee-wrap { background: linear-gradient(90deg, #0ea5e9, #06b6d4, #38bdf8) !important; } .marquee-item { color: rgba(255,255,255,.98); } .hero-h1 em { background: linear-gradient(90deg, #0ea5e9, #06b6d4, #38bdf8) !important; -webkit-background-clip: text !important; background-clip: text !important; } #reviews .sh-tag, #reviews .sh-title, .review-summary-label { color: #0369a1 !important; } #reviews .sh-title { color: var(--refresh-ink) !important; } .review-summary-card { border-color: rgba(14,165,233,.20); background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(240,249,255,.88)), radial-gradient(circle at 100% 0%, rgba(56,189,248,.15), transparent 42%); } .review-summary-card::after { background: linear-gradient(90deg, #0ea5e9, #06b6d4, #7dd3fc) !important; } .review-summary-card strong { color: #0ea5e9 !important; } .review-summary-stars i { color: #38bdf8 !important; } .review-summary-sub { color: #25637d; } .review-link-wrap { margin-top: 16px; display: flex; justify-content: flex-end; } .review-all-btn { display: inline-flex; align-items: center; gap: 12px; min-height: 58px; padding: 10px 14px; border-radius: 18px; border: 1px solid rgba(14,165,233,.20); background: linear-gradient(135deg, rgba(14,165,233,.12), rgba(34,197,94,.10)), rgba(255,255,255,.92); color: var(--ink); text-decoration: none; box-shadow: 0 14px 34px rgba(15,23,42,.07); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .review-all-btn:hover { transform: translateY(-2px); border-color: rgba(14,165,233,.34); box-shadow: 0 18px 42px rgba(14,165,233,.14); } .review-all-btn > i:first-child { width: 38px; height: 38px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #0ea5e9, #22c55e); color: #fff; flex: 0 0 auto; } .review-all-btn span { display: grid; gap: 2px; min-width: 0; } .review-all-btn strong { font-size: 13px; font-weight: 900; line-height: 1.1; } .review-all-btn small { color: #0369a1; font-size: 10.5px; font-weight: 800; line-height: 1.25; word-break: break-word; } .review-all-btn > i:last-child { color: var(--primary); font-size: 12px; } @media (max-width: 768px) { #reviews .sh { align-items: stretch; } .review-link-wrap { justify-content: stretch; width: 100%; } .review-all-btn { width: 100%; justify-content: flex-start; } } .trust-item:nth-child(2) .trust-ic, .trust-item:nth-child(3) .trust-ic, .hstat:nth-child(2) .hstat-n, .hstat:nth-child(3) .hstat-n { color: #0ea5e9 !important; } :root[data-theme="dark"] .review-summary-card { background: linear-gradient(180deg, rgba(16,31,49,.9), rgba(8,23,37,.82)), radial-gradient(circle at 100% 0%, rgba(56,189,248,.16), transparent 42%); } :root[data-theme="dark"] #reviews .sh-tag, :root[data-theme="dark"] .review-summary-label, :root[data-theme="dark"] .review-summary-sub { color: #7dd3fc !important; } /* Hard fix: keep top notice strip moving even in lightweight performance mode. */ @keyframes h4sxMarqueeHardMove { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } } .marquee-track { width: max-content !important; min-width: max-content !important; flex-wrap: nowrap !important; animation-name: h4sxMarqueeHardMove !important; animation-duration: 34s !important; animation-timing-function: linear !important; animation-iteration-count: infinite !important; animation-play-state: running !important; } .marquee-track:hover { animation-play-state: running !important; } .marquee-item { flex: 0 0 auto !important; } @media (max-width: 768px), (prefers-reduced-motion: reduce) { .marquee-track { animation-name: h4sxMarqueeHardMove !important; animation-duration: 42s !important; animation-timing-function: linear !important; animation-iteration-count: infinite !important; animation-play-state: running !important; } } /* Stronger closed-hours modal */ #closure-overlay { background: radial-gradient(circle at 50% 32%, rgba(14,165,233,.3), transparent 34%), linear-gradient(135deg, rgba(7,47,75,.84), rgba(2,6,23,.78)) !important; backdrop-filter: blur(10px) saturate(1.12) !important; -webkit-backdrop-filter: blur(10px) saturate(1.12) !important; } #closure-overlay::before { background: radial-gradient(circle at 10% 0%, rgba(56,189,248,.24), transparent 34%), radial-gradient(circle at 88% 12%, rgba(14,165,233,.2), transparent 30%), linear-gradient(135deg, rgba(224,242,254,.2), rgba(255,255,255,.06)) !important; } .closure-container { max-width: 520px !important; min-height: 255px; padding: clamp(24px, 4.5vw, 38px) !important; border-radius: 30px !important; background: linear-gradient(180deg, rgba(240,249,255,.82), rgba(219,234,244,.72)), radial-gradient(circle at 50% 0%, rgba(255,255,255,.58), transparent 44%) !important; border: 1px solid rgba(255,255,255,.62) !important; box-shadow: 0 28px 80px rgba(2,6,23,.28), inset 0 1px 0 rgba(255,255,255,.82) !important; } .closure-container::before { height: 0 !important; } .closure-container::after { content: "H4SX STORE"; position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%); z-index: 0; color: rgba(255,255,255,.48); font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-size: clamp(58px, 14vw, 116px); font-weight: 950; line-height: .78; letter-spacing: -5px; white-space: nowrap; pointer-events: none; } .closure-container > * { position: relative; z-index: 1; } .closure-icon { width: 58px !important; height: 58px !important; margin-bottom: 10px !important; border-radius: 50% !important; background: radial-gradient(circle at 35% 24%, #fff, #dbeafe 35%, #64748b 76%) !important; color: #e11d48 !important; border: 5px solid rgba(15,23,42,.45); font-size: 24px !important; box-shadow: 0 14px 28px rgba(15,23,42,.22) !important; } .closure-kicker { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; color: rgba(255,255,255,.92); background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); font-size: 12px; font-weight: 950; letter-spacing: .09em; text-transform: uppercase; } .closure-datetime-pill { display: none !important; } .closure-title { margin: 10px 0 10px !important; color: #082f49 !important; font-size: clamp(24px, 5vw, 34px) !important; letter-spacing: -.04em !important; text-transform: none !important; } .closure-status { display: none !important; } .closure-message { max-width: 390px; margin: 0 auto 16px !important; color: #31506b !important; font-size: 15px !important; line-height: 1.65 !important; } .closure-hours-pill { align-items: center; gap: 8px; padding: 10px 17px; border-radius: 999px; background: linear-gradient(135deg, #082f49, #0f172a); color: #fff; border: 1px solid rgba(255,255,255,.28); box-shadow: 0 12px 28px rgba(15,23,42,.2); font-size: 13px; font-weight: 900; } .closure-contact { margin-top: 16px !important; background: linear-gradient(135deg, #0ea5e9, #0284c7) !important; border-radius: 999px !important; } #closure-overlay[data-closure-type="hours"] .closure-kicker::after { content: " Rasmi"; } @media (max-width: 520px) { .closure-container { width: min(92vw, 420px) !important; border-radius: 24px !important; } .closure-container::after { font-size: 62px; letter-spacing: -3px; } .closure-kicker, .closure-hours-pill { font-size: 11px; } } /* Maintenance mode: hide everything behind the popup completely. */ #closure-overlay[data-closure-type="maintenance"] { background: radial-gradient(circle at 50% 18%, rgba(14,165,233,.18), transparent 34%), radial-gradient(circle at 20% 88%, rgba(56,189,248,.13), transparent 32%), linear-gradient(145deg, #020617 0%, #061827 48%, #082f49 100%) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } #closure-overlay[data-closure-type="maintenance"]::before { background: linear-gradient(135deg, rgba(14,165,233,.08) 25%, transparent 25%), linear-gradient(315deg, rgba(56,189,248,.06) 25%, transparent 25%) !important; background-size: 34px 34px !important; opacity: .55; } #closure-overlay[data-closure-type="maintenance"] .closure-container { background: linear-gradient(180deg, rgba(240,249,255,.92), rgba(219,234,244,.86)), radial-gradient(circle at 50% 0%, rgba(255,255,255,.68), transparent 44%) !important; } /* Cleaner closed-hours modal */ #closure-overlay { background: radial-gradient(circle at 50% 18%, rgba(56,189,248,.2), transparent 32%), linear-gradient(145deg, #061827 0%, #0b3552 45%, #06111f 100%) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } #closure-overlay::before { background: linear-gradient(135deg, rgba(14,165,233,.08) 25%, transparent 25%), linear-gradient(315deg, rgba(255,255,255,.05) 25%, transparent 25%) !important; background-size: 36px 36px !important; opacity: .46 !important; } .closure-container { width: min(92vw, 460px) !important; max-width: 460px !important; min-height: 0 !important; padding: clamp(22px, 4vw, 30px) !important; border-radius: 24px !important; background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(231,246,255,.92)) !important; border: 1px solid rgba(186,230,253,.92) !important; box-shadow: 0 24px 70px rgba(2,6,23,.34), inset 0 1px 0 rgba(255,255,255,.96) !important; } .closure-container::after { content: "" !important; } .closure-icon { width: 52px !important; height: 52px !important; margin: 0 auto 12px !important; border-radius: 16px !important; background: linear-gradient(135deg, #e0f2fe, #38bdf8) !important; color: #083344 !important; border: 1px solid rgba(14,165,233,.35) !important; font-size: 22px !important; box-shadow: 0 14px 34px rgba(14,165,233,.25) !important; } .closure-kicker { color: #0369a1 !important; background: rgba(14,165,233,.1) !important; border: 1px solid rgba(14,165,233,.22) !important; font-size: 11px !important; letter-spacing: .07em !important; } .closure-title { margin: 12px 0 8px !important; color: #06263d !important; font-size: clamp(25px, 5vw, 32px) !important; letter-spacing: -.035em !important; } .closure-message { color: #38566f !important; margin-bottom: 15px !important; } .closure-hours-pill { padding: 9px 16px !important; background: linear-gradient(135deg, #0ea5e9, #0369a1) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.5) !important; box-shadow: 0 14px 28px rgba(14,165,233,.24) !important; } .closure-contact { box-shadow: 0 14px 28px rgba(14,165,233,.22) !important; } #closure-overlay[data-closure-type="maintenance"] { background: radial-gradient(circle at 50% 14%, rgba(56,189,248,.2), transparent 30%), linear-gradient(145deg, #020617 0%, #082f49 58%, #06111f 100%) !important; } #closure-overlay[data-closure-type="maintenance"] .closure-container { background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(232,247,255,.94)) !important; } /* Gist powered promo banner */ .promo-hero { margin: 0 auto 22px; max-width: 1120px; } .promo-hero.is-hidden { display: none !important; } .promo-hero-shell { position: relative; overflow: hidden; border-radius: 20px; aspect-ratio: 16 / 4.25; height: auto; min-height: 0; max-height: 320px; background: radial-gradient(circle at 20% 20%, rgba(14,165,233,.18), transparent 34%), linear-gradient(135deg, #061827, #020617); border: 1px solid rgba(14,165,233,.18); box-shadow: 0 18px 52px rgba(2,6,23,.14); cursor: grab; touch-action: pan-y; user-select: none; } .promo-hero.is-dragging .promo-hero-shell, .promo-hero.is-dragging { cursor: grabbing; } .promo-hero-track { height: 100%; display: flex; transition: transform .55s cubic-bezier(.22,.8,.24,1); will-change: transform; } .promo-hero-slide { position: relative; flex: 0 0 100%; min-width: 100%; height: 100%; display: block; color: #fff; overflow: hidden; } .promo-hero-slide.promo-contain::before { content: ""; position: absolute; inset: -18px; z-index: 0; background: linear-gradient(90deg, rgba(2,6,23,.42), rgba(14,165,233,.12), rgba(2,6,23,.42)), var(--promo-img) center / cover no-repeat; filter: blur(16px) saturate(1.15); transform: scale(1.04); } .promo-hero-slide.promo-contain picture, .promo-hero-slide.promo-contain img { position: relative; z-index: 1; } .promo-hero-slide picture, .promo-hero-slide img { width: 100%; height: 100%; display: block; } .promo-hero-slide img { object-fit: cover; transition: transform .8s ease; user-select: none; -webkit-user-drag: none; pointer-events: none; } .promo-hero-slide.image-failed::after { content: "Banner promo sedang dikemas kini"; position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 24px; color: rgba(255,255,255,.94); font-family: var(--ff-disp); font-size: clamp(17px, 2vw, 28px); text-align: center; background: linear-gradient(135deg, rgba(4,32,52,.76), rgba(3,120,166,.74)); text-shadow: 0 2px 14px rgba(0,0,0,.34); } .promo-hero-slide.image-failed::before { filter: blur(10px) saturate(1.1); } .promo-hero-slide.image-failed img { opacity: 0; } .promo-hero-slide.promo-contain img { object-fit: contain !important; padding: 0; } .promo-hero-slide:hover img { transform: scale(1.02); } .promo-hero-copy { position: absolute; left: clamp(18px, 5vw, 62px); bottom: clamp(24px, 5vw, 52px); z-index: 2; max-width: min(520px, 70%); display: grid; gap: 8px; text-shadow: 0 3px 18px rgba(0,0,0,.45); } .promo-hero-copy strong { font-family: var(--ff-disp); font-size: clamp(30px, 5vw, 62px); line-height: .92; letter-spacing: -.04em; } .promo-hero-copy span { color: rgba(255,255,255,.86); font-size: clamp(13px, 2vw, 17px); font-weight: 700; line-height: 1.45; } .promo-hero-copy em { width: fit-content; margin-top: 5px; padding: 10px 15px; border-radius: 999px; background: linear-gradient(135deg, #0ea5e9, #38bdf8); color: #fff; font-style: normal; font-size: 12px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 12px 28px rgba(14,165,233,.28); } .promo-hero-nav { position: absolute; top: 50%; z-index: 4; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.7); background: rgba(2,6,23,.22); color: #fff; display: grid; place-items: center; cursor: pointer; transform: translateY(-50%); box-shadow: 0 12px 26px rgba(2,6,23,.22); transition: background .18s ease, transform .18s ease; } .promo-hero-nav:hover { background: rgba(14,165,233,.72); transform: translateY(-50%) scale(1.06); } .promo-prev { left: 16px; } .promo-next { right: 16px; } .promo-hero-dots { position: absolute; left: 50%; bottom: 9px; z-index: 4; display: flex; align-items: center; gap: 7px; transform: translateX(-50%); } .promo-hero-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: rgba(255,255,255,.48); cursor: pointer; transition: width .18s ease, background .18s ease; } .promo-hero-dots button.active { width: 26px; background: #0ea5e9; } @media (max-width: 760px) { .promo-hero { margin: 0 0 18px; } .promo-hero-shell { border-radius: 18px; aspect-ratio: 1 / 1; max-height: none; } .promo-hero-nav { width: 38px; height: 38px; } .promo-prev { left: 10px; } .promo-next { right: 10px; } .promo-hero-copy { left: 18px; right: 18px; bottom: 34px; max-width: none; } .promo-hero-copy strong { font-size: clamp(26px, 10vw, 42px); } } /* Mobile polish: nav buttons and product cards */ @media (max-width: 768px) { .nav-inner { padding: 0 12px !important; gap: 8px !important; } .nav-logo { width: 44px !important; height: 44px !important; border-radius: 12px !important; } .nav-wordmark { font-size: 15px !important; max-width: 118px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav-right { gap: 6px !important; flex-shrink: 0; } .search-btn, .cart-btn, .changelog-btn { width: 38px !important; height: 38px !important; min-width: 38px !important; padding: 0 !important; border-radius: 13px !important; flex: 0 0 38px; } .cart-btn { width: 38px !important; } .btn-wa { width: 38px !important; height: 38px !important; min-width: 38px !important; padding: 0 !important; justify-content: center; border-radius: 13px !important; } .nav-ham { width: 38px !important; height: 38px !important; border-radius: 13px !important; } .changelog-btn .cl-txt, .btn-wa .btn-txt { display: none !important; } .cart-badge { top: -5px; right: -5px; } .changelog-box { width: min(94vw, 420px) !important; max-height: 88dvh !important; border-radius: 20px !important; } .changelog-head { padding: 16px 16px 14px !important; gap: 10px !important; } .changelog-title { font-size: 19px !important; line-height: 1.15 !important; } .changelog-x { width: 38px !important; height: 38px !important; flex: 0 0 38px; } } @media (max-width: 520px) { #inventory-grid, .product-subgrid { grid-template-columns: 1fr !important; gap: 14px !important; } .pc { display: flex !important; flex-direction: column !important; min-height: 0 !important; border-radius: 20px !important; overflow: hidden !important; background: rgba(255,255,255,.96) !important; box-shadow: 0 10px 28px rgba(14,165,233,.1) !important; } .pimg { width: 100% !important; height: auto !important; min-height: 0 !important; aspect-ratio: 16 / 10 !important; border-radius: 0 !important; } .product-media-split { gap: 5px !important; padding: 5px !important; } .split-media-panel { border-radius: 12px !important; } .split-media-panel span { font-size: 8px !important; padding: 4px 6px !important; } .pbody { padding: 14px !important; border-left: 0 !important; border-top: 1px solid rgba(14,165,233,.1) !important; } .pname { font-size: 15px !important; line-height: 1.25 !important; } .pdesc { font-size: 12px !important; line-height: 1.45 !important; -webkit-line-clamp: 2; line-clamp: 2; } .pfoot { gap: 10px !important; } .pactions { display: grid !important; grid-template-columns: minmax(0, 1fr) 46px !important; gap: 9px !important; } .pbuy, .padd { height: 42px !important; border-radius: 13px !important; } .pbuy { font-size: 12px !important; } .padd { min-width: 46px !important; padding: 0 !important; } .pquick { display: none !important; } .ptag { top: 10px !important; left: 10px !important; font-size: 9px !important; padding: 6px 9px !important; } .stock-badge { right: 10px !important; left: auto !important; bottom: 10px !important; font-size: 10px !important; padding: 6px 9px !important; } .media-type-pill { left: 10px !important; top: 42px !important; } .product-subsection { padding: 10px !important; } #product-view .section-panel { padding: 12px !important; margin-inline: -4px !important; } } @media (max-width: 380px) { .nav-logo { width: 40px !important; height: 40px !important; } .nav-wordmark { max-width: 96px; font-size: 14px !important; } .search-btn, .cart-btn, .changelog-btn, .btn-wa, .nav-ham { width: 36px !important; height: 36px !important; min-width: 36px !important; flex-basis: 36px; } } /* Hide Tawk.to quick replies/widget on phone so it does not block the shop UI. */ @media (max-width: 768px) { iframe[title*="Tawk"], iframe[title*="tawk"], iframe[src*="tawk.to"], #tawkchat-iframe-container, #tawkchat-container, .tawk-to-chat-widget, .tawk-min-container, .tawk-button, [class*="tawk"], [id*="tawk"] { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } } /* Horizontal game picker: cards slide sideways instead of stacking down. */ #shop-section #game-grid, #game-grid { display: flex !important; grid-template-columns: none !important; justify-content: flex-start !important; align-items: stretch !important; gap: 14px !important; overflow-x: auto; overflow-y: hidden; padding: 4px 4px 14px; margin-inline: -4px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } #shop-section #game-grid::-webkit-scrollbar, #game-grid::-webkit-scrollbar { height: 7px; } #shop-section #game-grid::-webkit-scrollbar-thumb, #game-grid::-webkit-scrollbar-thumb { background: rgba(14,165,233,.35); border-radius: 999px; } #shop-section .gc, .gc { flex: 0 0 clamp(136px, 18vw, 176px) !important; width: clamp(136px, 18vw, 176px) !important; scroll-snap-align: start; } @media (max-width: 768px) { #shop-section #game-grid, #game-grid { gap: 12px !important; padding: 2px 2px 12px; margin-inline: -2px; scrollbar-width: none; } #shop-section #game-grid::-webkit-scrollbar, #game-grid::-webkit-scrollbar { display: none; } #shop-section .gc, .gc { flex-basis: 142px !important; width: 142px !important; } } @media (max-width: 420px) { #shop-section .gc, .gc { flex-basis: 132px !important; width: 132px !important; } } /* Keep the Hard Refresh action visible after later nav button overrides. */ .nav-right .hard-refresh-btn.search-btn { width: auto !important; min-width: 136px !important; height: 44px !important; flex: 0 0 auto !important; padding: 0 15px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; border-radius: 14px !important; background: linear-gradient(135deg, #0ea5e9, #22c55e) !important; color: #fff !important; border-color: rgba(14,165,233,.22) !important; box-shadow: 0 12px 26px rgba(14,165,233,.22) !important; } .nav-right .hard-refresh-btn.search-btn i, .nav-right .hard-refresh-btn.search-btn span { color: #fff !important; display: inline-flex !important; opacity: 1 !important; visibility: visible !important; } .nav-right .hard-refresh-btn.search-btn.has-update { position: relative !important; padding-right: 54px !important; } .nav-right .hard-refresh-btn.search-btn.has-update::after, .changelog-hard-refresh.has-update::after, .hard-refresh-menu.has-update::after { content: "UPDATE"; position: absolute; top: -8px; right: -8px; z-index: 6; padding: 3px 7px; border-radius: 999px; background: #ef4444; color: #fff; border: 2px solid #fff; font-size: 9px; font-weight: 1000; line-height: 1; letter-spacing: .4px; box-shadow: 0 8px 18px rgba(239,68,68,.32); } .changelog-hard-refresh, .hard-refresh-menu { position: relative; } @media (max-width: 768px) { .nav-right .hard-refresh-btn.search-btn { display: none !important; } } /* H4SX Helper blue logo theme */ .ai-side-assistant { --helper-dark: #06152d; --helper-mid: #0a3e7a; --helper-cyan: #14c8ff; --helper-soft: #e8f8ff; } .ai-side-assistant .ai-float-bubble { border-color: rgba(20,200,255,.78) !important; background: radial-gradient(circle at 35% 25%, #1fe2ff, #0a3e7a 48%, #06152d 100%) !important; box-shadow: 0 22px 54px rgba(20,200,255,.34), 0 0 0 5px rgba(20,200,255,.1) !important; } .ai-side-assistant .ai-float-dot, .ai-side-assistant .ai-chat-status span { background: #14c8ff !important; box-shadow: 0 0 12px rgba(20,200,255,.9) !important; } .ai-side-assistant .ai-chat-panel { border-color: rgba(20,200,255,.34) !important; background: radial-gradient(circle at 92% 8%, rgba(20,200,255,.2), transparent 32%), linear-gradient(180deg, rgba(239,249,255,.98), rgba(218,241,255,.98)) !important; box-shadow: 0 30px 86px rgba(3,15,38,.36) !important; } .ai-side-assistant .ai-chat-head { border-bottom-color: rgba(20,200,255,.28) !important; background: linear-gradient(135deg, #06152d, #0a3e7a 55%, #14c8ff) !important; } .ai-side-assistant .ai-avatar { background: rgba(255,255,255,.16) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), 0 0 26px rgba(20,200,255,.28) !important; } .ai-side-assistant .ai-chat-status { border-color: rgba(20,200,255,.22) !important; background: rgba(255,255,255,.82) !important; color: #07345f !important; } .ai-side-assistant .ai-helper-suggestions button { border-color: rgba(20,200,255,.32) !important; background: rgba(255,255,255,.92) !important; color: #07345f !important; } .ai-side-assistant .ai-helper-suggestions button:hover { background: #e0f6ff !important; border-color: rgba(20,200,255,.62) !important; } .ai-side-assistant .ai-msg-bot { color: #10233f !important; border-color: rgba(20,200,255,.16) !important; } .ai-side-assistant .ai-msg-user { background: linear-gradient(135deg, #dff7ff, #bdefff) !important; color: #062044 !important; } .ai-side-assistant .ai-msg-typing span, .ai-side-assistant .ai-helper-send { background: linear-gradient(135deg, #14c8ff, #0a3e7a) !important; } .ai-side-assistant .ai-chat-compose { border-top-color: rgba(20,200,255,.2) !important; background: rgba(238,248,255,.94) !important; } .ai-side-assistant .ai-msg a { color: #0284c7 !important; } .ai-side-assistant .ai-helper-logo-img { filter: drop-shadow(0 8px 16px rgba(20,200,255,.18)); } /* ============================================================ H4SX Mobile Premium Polish - 20 Jul 2026 Focus: phone layout, compact nav, smoother cards and modal. ============================================================ */ @media (max-width: 820px) { html { scroll-padding-top: 92px; } body { background: radial-gradient(circle at 15% 0%, rgba(14,165,233,.18), transparent 34%), radial-gradient(circle at 85% 12%, rgba(45,212,191,.13), transparent 32%), linear-gradient(180deg, #f7fcff 0%, #eef9ff 42%, #ffffff 100%) !important; } .site-header { position: sticky; top: 0; z-index: 800; background: rgba(248,253,255,.88) !important; border-bottom: 1px solid rgba(14,165,233,.16); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 10px 32px rgba(2, 132, 199, .08); } .site-top-link { display: none !important; } .marquee-wrap { height: 34px !important; border-bottom: 1px solid rgba(255,255,255,.26); background: linear-gradient(90deg, #0ea5e9, #06b6d4, #22c55e) !important; } .marquee-track { animation-duration: 18s !important; } .marquee-item { min-width: max-content; font-size: 10px !important; letter-spacing: .5px !important; padding-inline: 18px !important; } .site-header-nav-wrap { background: transparent !important; } #main-nav { border-bottom: 0 !important; background: transparent !important; } .nav-inner { min-height: 62px !important; padding: 8px 12px !important; gap: 8px !important; } .nav-brand { min-width: 0; gap: 9px !important; padding: 4px 6px 4px 0 !important; } .nav-logo { width: 44px !important; height: 44px !important; border-radius: 13px !important; box-shadow: 0 8px 20px rgba(14,165,233,.18) !important; } .nav-wordmark { max-width: 118px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px !important; letter-spacing: .7px !important; } .nav-links { display: none !important; } .nav-right { margin-left: auto; gap: 7px !important; flex: 0 0 auto; } .nav-right .ai-helper-btn.search-btn, .nav-right .changelog-btn.search-btn, .nav-right .hard-refresh-btn.search-btn, .nav-right .btn-wa { display: none !important; } .nav-right .search-btn, .nav-right .cart-btn, .nav-right .nav-ham { width: 40px !important; height: 40px !important; min-width: 40px !important; border-radius: 14px !important; background: rgba(255,255,255,.82) !important; border: 1px solid rgba(14,165,233,.18) !important; color: #06223f !important; box-shadow: 0 8px 20px rgba(15,23,42,.07) !important; } .nav-ham span { background: #075985 !important; } #mob-menu { position: fixed !important; top: 98px !important; left: 12px !important; right: 12px !important; max-height: calc(100dvh - 118px); overflow-y: auto; padding: 12px !important; border-radius: 20px !important; border: 1px solid rgba(14,165,233,.18) !important; background: rgba(255,255,255,.96) !important; box-shadow: 0 24px 60px rgba(15,23,42,.18) !important; backdrop-filter: blur(18px); } #mob-menu a { min-height: 46px; border-radius: 14px !important; background: linear-gradient(135deg, rgba(14,165,233,.08), rgba(255,255,255,.92)) !important; border: 1px solid rgba(14,165,233,.12) !important; font-size: 13px !important; font-weight: 900 !important; } #mob-menu .hard-refresh-menu { background: linear-gradient(135deg, #0ea5e9, #20c7d8) !important; color: #fff !important; box-shadow: 0 12px 26px rgba(14,165,233,.22) !important; } .wrap { width: min(100% - 20px, 1180px) !important; padding-bottom: 84px; } #home-view { padding-top: 10px !important; } .promo-hero { margin: 10px 0 14px !important; } .promo-hero-shell { border-radius: 20px !important; border: 1px solid rgba(8,47,73,.22) !important; min-height: 0 !important; box-shadow: 0 16px 38px rgba(14,165,233,.13) !important; } .promo-hero-track { aspect-ratio: 16 / 7 !important; min-height: 138px !important; max-height: 230px !important; } .promo-hero-nav { width: 36px !important; height: 36px !important; background: rgba(255,255,255,.72) !important; color: #075985 !important; border-color: rgba(14,165,233,.28) !important; } .promo-prev { left: 8px !important; } .promo-next { right: 8px !important; } .promo-hero-dots { bottom: 8px !important; } .hero { display: grid !important; grid-template-columns: 1fr !important; gap: 18px !important; min-height: auto !important; padding: 28px 0 8px !important; } .hero::before, .hero::after { opacity: .55 !important; } .hero-eyebrow { width: max-content; max-width: 100%; font-size: 10px !important; padding: 8px 12px !important; margin-bottom: 16px !important; } .hero-h1 { font-size: clamp(36px, 12vw, 54px) !important; line-height: .94 !important; letter-spacing: 0 !important; margin-bottom: 16px !important; } .hero-desc { font-size: 13px !important; line-height: 1.65 !important; margin-bottom: 18px !important; max-width: 96% !important; } .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; margin-bottom: 16px !important; } .hero-stat { min-width: 0 !important; padding: 12px !important; border-radius: 16px !important; background: rgba(255,255,255,.82) !important; border-color: rgba(14,165,233,.14) !important; } .hero-stat b { font-size: 20px !important; } .hero-stat span { font-size: 10px !important; } .hero-cta-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; margin-bottom: 14px !important; } .hero-cta-row .btn-primary, .hero-cta-row .btn-ghost { min-height: 46px !important; padding: 0 12px !important; border-radius: 15px !important; font-size: 12px !important; justify-content: center !important; white-space: nowrap; } .hero-proof-strip { display: flex !important; overflow-x: auto; flex-wrap: nowrap !important; gap: 8px !important; padding-bottom: 4px; scrollbar-width: none; } .hero-proof-strip::-webkit-scrollbar { display: none; } .proof-chip { flex: 0 0 auto; font-size: 10px !important; padding: 8px 10px !important; border-radius: 999px !important; } .hero-right { order: -1; } .hero-vid-wrap { margin-inline: -2px; } .hero-vid { border-radius: 18px !important; overflow: hidden !important; box-shadow: 0 16px 42px rgba(8,47,73,.14) !important; } .hero-vid video { aspect-ratio: 16/9 !important; } .hero-float-1, .hero-float-2 { display: none !important; } .section-panel { border-radius: 20px !important; padding: 16px !important; box-shadow: 0 14px 36px rgba(14,165,233,.08) !important; } .sh { align-items: flex-start !important; gap: 10px !important; margin-bottom: 12px !important; } .sh-title { font-size: 24px !important; line-height: 1.05 !important; } .sh-tag { font-size: 10px !important; } .detail-note { font-size: 11px !important; line-height: 1.5 !important; border-radius: 14px !important; padding: 10px 12px !important; } .platform-filter-bar, .product-filter-bar { margin-inline: -4px !important; padding: 4px 4px 10px !important; overflow-x: auto !important; flex-wrap: nowrap !important; scrollbar-width: none; } .platform-filter-bar::-webkit-scrollbar, .product-filter-bar::-webkit-scrollbar { display: none; } .platform-filter-chip, .product-filter-chip { flex: 0 0 auto !important; min-height: 42px !important; border-radius: 999px !important; font-size: 11px !important; padding: 9px 12px !important; box-shadow: 0 8px 20px rgba(14,165,233,.08) !important; } #shop-section #game-grid, #game-grid { gap: 12px !important; padding: 2px 2px 16px !important; margin-inline: -2px !important; } #shop-section .gc, .gc { flex: 0 0 148px !important; width: 148px !important; border-radius: 18px !important; padding: 10px !important; background: rgba(255,255,255,.9) !important; border: 1px solid rgba(14,165,233,.16) !important; box-shadow: 0 12px 30px rgba(14,165,233,.11) !important; } .gc-img, .gc .gimg, .game-card-img { border-radius: 14px !important; aspect-ratio: 1 / 1 !important; object-fit: cover !important; } .gc-title, .gc .gname, .game-card-title { font-size: 11px !important; line-height: 1.25 !important; min-height: 28px; } #products, .product-grid, .product-subgrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } .pcard, .product-card { border-radius: 18px !important; overflow: hidden !important; background: rgba(255,255,255,.93) !important; border: 1px solid rgba(14,165,233,.14) !important; box-shadow: 0 12px 26px rgba(14,165,233,.09) !important; } .pimg, .product-img { aspect-ratio: 1 / 1 !important; min-height: 0 !important; } .pbody { padding: 10px !important; gap: 7px !important; } .pname { font-size: 12px !important; line-height: 1.25 !important; min-height: 30px; } .pdesc { display: none !important; } .price { font-size: 17px !important; } .old { font-size: 10px !important; } .prow { gap: 7px !important; } .padd, .pbuy { height: 40px !important; border-radius: 13px !important; font-size: 11px !important; } .pbuy span { display: inline !important; } .stock-badge, .ptag, .media-type-pill { transform: scale(.9); transform-origin: left top; } } @media (max-width: 560px) { .wrap { width: min(100% - 16px, 1180px) !important; } .promo-hero-track { aspect-ratio: 16 / 8.4 !important; min-height: 116px !important; max-height: 172px !important; } .hero { padding-top: 20px !important; } .hero-h1 { font-size: clamp(34px, 13vw, 46px) !important; } .hero-stats { grid-template-columns: 1fr 1fr !important; } .hero-cta-row { grid-template-columns: 1fr !important; } .section-panel { padding: 13px !important; } .sh-title { font-size: 21px !important; } #products, .product-grid, .product-subgrid { gap: 9px !important; } .product-subsection { padding: 9px !important; border-radius: 18px !important; } .product-subhead { align-items: center !important; padding: 10px !important; border-radius: 16px !important; } .product-subhead b { font-size: 13px !important; } .product-modal { align-items: flex-end !important; padding: 0 !important; } .product-modal-bg { backdrop-filter: blur(10px) !important; } .product-modal-content { width: 100% !important; max-width: none !important; max-height: 94dvh !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; grid-template-columns: none !important; border-radius: 24px 24px 0 0 !important; overflow: hidden !important; border-left: 0 !important; border-right: 0 !important; box-shadow: 0 -18px 50px rgba(15,23,42,.22) !important; } .product-modal-image-wrap { flex: 0 0 auto !important; min-height: 0 !important; padding: 42px 12px 10px !important; background: linear-gradient(180deg, #eaf8ff, #f8fdff) !important; } .product-modal-content img, .product-modal-content video, .product-modal-image-wrap .product-media { max-height: 34dvh !important; border-radius: 16px !important; object-fit: contain !important; } .product-modal-image-wrap .product-media-carousel { min-height: 220px !important; } .product-media-track { min-height: 220px !important; } .product-modal-image-wrap .product-media-slide { min-width: 100% !important; padding: 0 !important; } .product-media-arrow { display: none !important; } .product-media-hint { bottom: 7px !important; font-size: 10px !important; padding: 6px 10px !important; } .product-modal-info { border-left: 0 !important; padding: 14px 14px calc(14px + env(safe-area-inset-bottom)) !important; max-height: none !important; min-height: 0 !important; overflow-y: auto !important; } .product-modal-close { top: 10px !important; right: 12px !important; width: 38px !important; height: 38px !important; } .product-modal-game { font-size: 10px !important; margin-bottom: 5px !important; } .product-modal-name { font-size: 20px !important; margin-bottom: 9px !important; } .product-modal-price { font-size: 25px !important; margin-bottom: 9px !important; } .product-modal-meta { gap: 6px !important; margin-bottom: 10px !important; } .pm-chip { padding: 6px 9px !important; font-size: 10px !important; } .product-modal-summary { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; margin-bottom: 10px !important; } .product-modal-summary div { padding: 8px 6px !important; border-radius: 12px !important; } .product-modal-summary span { font-size: 8px !important; } .product-modal-summary strong { font-size: 10px !important; } .product-modal-desc { font-size: 12px !important; line-height: 1.55 !important; max-height: 86px; overflow-y: auto; } .product-modal-trust { padding: 8px !important; gap: 6px !important; margin-top: 10px !important; } .pm-trust-item { font-size: 9px !important; } .product-modal-actions { gap: 8px !important; padding-top: 12px !important; background: linear-gradient(180deg, rgba(255,255,255,0), #fff 22%) !important; } .pm-btn { min-height: 42px !important; padding: 10px 8px !important; border-radius: 13px !important; font-size: 11px !important; } .pm-btn.link { flex: .72 !important; } .ai-side-assistant { right: 10px !important; bottom: calc(12px + env(safe-area-inset-bottom)) !important; } .ai-side-assistant .ai-chat-panel { width: calc(100vw - 20px) !important; max-width: 390px !important; height: min(70dvh, 540px) !important; border-radius: 22px !important; } .ai-side-assistant.is-open .ai-float-bubble { display: none !important; } } @media (max-width: 390px) { .nav-inner { padding-inline: 9px !important; } .nav-wordmark { max-width: 102px; font-size: 13px !important; } .nav-right { gap: 5px !important; } .nav-right .search-btn, .nav-right .cart-btn, .nav-right .nav-ham { width: 37px !important; height: 37px !important; min-width: 37px !important; } #shop-section .gc, .gc { flex-basis: 136px !important; width: 136px !important; } #products, .product-grid, .product-subgrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .pbody { padding: 9px !important; } .pname { font-size: 11px !important; } .price { font-size: 15px !important; } .padd { flex: 0 0 40px !important; } .pbuy { min-width: 0 !important; } .pbuy span { display: none !important; } } /* Changelog image export button */ .changelog-action-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .changelog-image-btn { width: 100%; min-height: 58px; border: 1px solid rgba(14,165,233,.18); border-radius: 16px; background: linear-gradient(135deg, rgba(14,165,233,.12), rgba(255,255,255,.96)); color: var(--ink2); cursor: pointer; display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 10px 12px; font-family: inherit; box-shadow: 0 10px 24px rgba(14,165,233,.09); } .changelog-image-btn:hover { transform: translateY(-1px); border-color: rgba(14,165,233,.38); background: linear-gradient(135deg, rgba(14,165,233,.18), #fff); } .changelog-image-btn.is-loading i { animation: hardRefreshSpin .75s linear infinite; } .changelog-image-btn > i { width: 36px; height: 36px; border-radius: 12px; background: linear-gradient(135deg, #0ea5e9, #2563eb); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 8px 18px rgba(14,165,233,.22); } .changelog-image-btn span { display: grid; gap: 2px; text-align: left; } .changelog-image-btn strong { font-size: 14px; line-height: 1.1; } .changelog-image-btn small { color: var(--muted); font-size: 11px; font-weight: 700; line-height: 1.35; } @media (max-width: 520px) { .changelog-action-row { grid-template-columns: 1fr; } .changelog-image-btn { min-height: 58px; border-radius: 15px; } } /* Receipt modal premium refresh */ .receipt-modal .qr-modal-bg { background: radial-gradient(circle at 50% 18%, rgba(14,165,233,.26), transparent 34%), rgba(15,23,42,.56) !important; backdrop-filter: blur(10px) saturate(1.08) !important; } .receipt-modal-card { width: min(560px, 96vw) !important; max-width: 560px !important; padding: 24px !important; text-align: left !important; border-radius: 28px !important; border: 1px solid rgba(14,165,233,.2) !important; background: linear-gradient(180deg, #ffffff, #eef9ff) !important; box-shadow: 0 30px 90px rgba(15,23,42,.32), 0 0 0 1px rgba(255,255,255,.7) inset !important; } .receipt-close { top: -14px !important; right: -14px !important; width: 42px !important; height: 42px !important; background: linear-gradient(135deg, #0ea5e9, #06b6d4) !important; box-shadow: 0 12px 26px rgba(14,165,233,.28) !important; } .receipt-card { position: relative; overflow: hidden; padding: 22px; border-radius: 22px; background: radial-gradient(circle at 0% 0%, rgba(14,165,233,.12), transparent 34%), linear-gradient(180deg, #ffffff, #f8fcff); border: 1px solid rgba(14,165,233,.16); box-shadow: 0 14px 34px rgba(14,165,233,.08); } .receipt-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: linear-gradient(90deg, #0ea5e9, #06b6d4, #22c55e); } .receipt-brand { display: flex; align-items: center; justify-content: center; gap: 12px; text-align: left; margin: 4px 0 18px; } .receipt-logo-mini { width: 46px; height: 46px; border-radius: 15px; background: linear-gradient(135deg, #38d5ff, #0a3e7a); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 1000; letter-spacing: .5px; box-shadow: 0 12px 22px rgba(14,165,233,.22); } .receipt-brand h2 { margin: 0; font-size: 24px; line-height: 1; color: var(--primary); font-weight: 1000; letter-spacing: .6px; } .receipt-brand p { margin: 5px 0 0; font-size: 12px; color: var(--muted); font-weight: 700; } .receipt-info-panel { display: grid; gap: 10px; padding: 16px; background: #f1f8ff; border: 1px solid rgba(14,165,233,.12); border-radius: 18px; margin-bottom: 16px; } .receipt-row { display: grid; grid-template-columns: minmax(120px, .85fr) minmax(0, 1fr); align-items: center; gap: 12px; } .receipt-row span { font-size: 12px; font-weight: 800; color: var(--muted); } .receipt-row strong { min-width: 0; text-align: right; font-size: 14px; font-weight: 900; color: var(--ink2); overflow-wrap: anywhere; } .receipt-items-wrap { margin-bottom: 16px; } .receipt-items-wrap h3 { margin: 0 0 10px; font-size: 14px; font-weight: 1000; color: var(--ink2); } .receipt-items { display: grid; gap: 8px; padding: 10px; border-radius: 18px; background: #f8fcff; border: 1px solid rgba(14,165,233,.12); } .receipt-item-line { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 11px 12px; border-radius: 14px; background: #fff; border: 1px solid rgba(14,165,233,.1); } .receipt-item-name { font-size: 13px; font-weight: 900; color: var(--ink2); line-height: 1.25; } .receipt-item-qty { margin-top: 3px; font-size: 11px; color: var(--muted); font-weight: 800; } .receipt-item-price { flex: 0 0 auto; font-size: 13px; font-weight: 1000; color: var(--primary); } .receipt-total-box { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px; border-radius: 18px; background: linear-gradient(135deg, #0ea5e9, #06b6d4); color: #fff; box-shadow: 0 14px 26px rgba(14,165,233,.2); } .receipt-total-box span { font-size: 14px; font-weight: 900; } .receipt-total-box strong { font-size: 24px; font-weight: 1000; } .receipt-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; } .receipt-action { min-width: 0; min-height: 64px; padding: 10px 8px; border: 0; border-radius: 18px; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-family: inherit; font-size: 11px; font-weight: 900; line-height: 1.1; text-align: center; text-decoration: none; cursor: pointer; box-shadow: 0 14px 28px rgba(15,23,42,.12); transition: transform .18s ease, filter .18s ease; } .receipt-action:hover { transform: translateY(-1px); filter: brightness(1.04); } .receipt-action i { font-size: 16px; } .receipt-action.text { background: linear-gradient(135deg, #0ea5e9, #0284c7); } .receipt-action.image { background: linear-gradient(135deg, #10b981, #059669); } .receipt-action.wa { background: linear-gradient(135deg, #25d366, #16a34a); } .receipt-action.download { background: linear-gradient(135deg, #8b5cf6, #6d28d9); } @media (max-width: 520px) { .receipt-modal { align-items: flex-end !important; padding: 0 !important; } .receipt-modal-card { width: 100% !important; max-width: none !important; max-height: 94dvh; overflow-y: auto; border-radius: 24px 24px 0 0 !important; padding: 18px 14px calc(16px + env(safe-area-inset-bottom)) !important; } .receipt-close { top: 10px !important; right: 14px !important; } .receipt-card { padding: 18px 14px; border-radius: 20px; } .receipt-brand { justify-content: flex-start; padding-right: 42px; } .receipt-brand h2 { font-size: 21px; } .receipt-logo-mini { width: 42px; height: 42px; } .receipt-row { grid-template-columns: 1fr; gap: 3px; } .receipt-row strong { text-align: left; font-size: 13px; } .receipt-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } .receipt-action { min-height: 54px; flex-direction: row; border-radius: 15px; } } /* H4SX Helper suggestion chips scroll fix */ .ai-side-assistant .ai-helper-suggestions { position: relative; display: flex !important; flex-wrap: nowrap !important; gap: 8px !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 10px 12px 12px !important; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(14,165,233,.45) transparent; } .ai-side-assistant .ai-helper-suggestions::-webkit-scrollbar { height: 6px; } .ai-side-assistant .ai-helper-suggestions::-webkit-scrollbar-track { background: transparent; } .ai-side-assistant .ai-helper-suggestions::-webkit-scrollbar-thumb { background: rgba(14,165,233,.42); border-radius: 999px; } .ai-side-assistant .ai-helper-suggestions button { flex: 0 0 auto !important; white-space: nowrap !important; scroll-snap-align: start; } .ai-side-assistant .ai-chat-panel { overflow: hidden !important; } @media (min-width: 521px) { .ai-side-assistant .ai-helper-suggestions { padding-right: 18px !important; } } @media (max-width: 520px) { .ai-side-assistant .ai-helper-suggestions { scrollbar-width: none; } .ai-side-assistant .ai-helper-suggestions::-webkit-scrollbar { display: none; } } /* Receipt modal: premium transaction ticket */ .receipt-modal-card { width: min(580px, calc(100vw - 32px)); max-height: min(820px, calc(100dvh - 28px)); padding: 0 !important; overflow: hidden; border: 1px solid rgba(115, 210, 255, .7) !important; border-radius: 28px !important; background: #f8fcff !important; box-shadow: 0 28px 80px rgba(4, 31, 67, .35), 0 0 0 6px rgba(34, 190, 244, .08) !important; } .receipt-modal-card::before { content: ''; display: block; height: 7px; background: linear-gradient(90deg, #118eea 0%, #1ec8df 53%, #20c977 100%); } .receipt-modal-card .close-receipt, .receipt-modal-card .modal-close { top: 17px !important; right: 17px !important; width: 38px !important; height: 38px !important; border-radius: 12px !important; background: #eaf7ff !important; border: 1px solid #bfe8ff !important; color: #087fc7 !important; } .receipt-card { position: relative; padding: 25px 26px 18px !important; background: radial-gradient(circle at 4% 12%, rgba(28, 189, 239, .13), transparent 24%), linear-gradient(180deg, #fff 0%, #f4fbff 100%) !important; } .receipt-brand { display: flex; align-items: center; gap: 13px; padding-right: 50px; margin-bottom: 22px !important; } .receipt-logo-mini { width: 52px !important; height: 52px !important; display: grid; place-items: center; border-radius: 17px !important; color: #fff !important; font-weight: 900; background: linear-gradient(135deg, #20c9ed, #0b77cf 62%, #113c77) !important; box-shadow: 0 10px 22px rgba(0, 144, 218, .27); } .receipt-brand h2, .receipt-brand h3 { margin: 0 !important; color: #0b3b72 !important; font-size: 1.34rem !important; letter-spacing: .035em !important; } .receipt-brand p, .receipt-brand small { display: inline-flex; margin: 4px 0 0 !important; color: #4380a8 !important; font-size: .72rem !important; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; } .receipt-info-panel { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0 !important; padding: 6px !important; border: 1px solid #ccecff !important; border-radius: 20px !important; background: #edf8ff !important; } .receipt-row { display: flex !important; flex-direction: column; gap: 5px; min-height: 62px; padding: 12px 13px !important; border-radius: 15px; } .receipt-row:nth-child(odd) { background: rgba(255,255,255,.8); } .receipt-row span, .receipt-row label { color: #5e86aa !important; font-size: .66rem !important; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; } .receipt-row strong { color: #082e5d !important; font-size: .89rem !important; line-height: 1.25; overflow-wrap: anywhere; } .receipt-items-wrap { margin-top: 21px !important; } .receipt-items-wrap > h4, .receipt-items-wrap > h3 { margin: 0 0 9px !important; color: #133b67 !important; font-size: .8rem !important; letter-spacing: .04em; text-transform: uppercase; } .receipt-items { padding: 7px !important; border: 1px solid #d2efff !important; border-radius: 19px !important; background: #fff !important; } .receipt-item-line { display: grid !important; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: center; padding: 13px 14px !important; border-radius: 14px; background: linear-gradient(100deg, #f7fcff, #ecf9ff) !important; } .receipt-item-name { color: #102f59 !important; font-weight: 850 !important; } .receipt-item-qty { display: block; margin-top: 4px; color: #6483a1 !important; font-size: .78rem; } .receipt-item-price { color: #008fcf !important; font-weight: 900 !important; font-size: 1rem !important; white-space: nowrap; } .receipt-total-box { display: flex !important; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px !important; padding: 16px 18px !important; border-radius: 18px !important; color: #fff !important; background: linear-gradient(105deg, #0b91e5, #11bdd4 55%, #18bc74) !important; box-shadow: 0 12px 22px rgba(9, 166, 218, .21); } .receipt-total-box span { font-weight: 800; letter-spacing: .04em; } .receipt-total-box strong { color: #fff !important; font-size: 1.55rem !important; } .receipt-actions { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; margin-top: 18px !important; } .receipt-action { min-height: 58px !important; display: flex !important; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px !important; border-radius: 16px !important; color: #fff !important; font-size: .78rem !important; font-weight: 850 !important; line-height: 1.05; text-align: center; box-shadow: 0 8px 18px rgba(5, 89, 148, .14); } .receipt-action.text { background: linear-gradient(135deg, #168ee7, #0eafe4) !important; } .receipt-action.image { background: linear-gradient(135deg, #0bbd98, #11a969) !important; } .receipt-action.wa { background: linear-gradient(135deg, #20cf70, #12a64d) !important; } .receipt-action.download { background: linear-gradient(135deg, #7351f3, #9a42ee) !important; } @media (max-width: 540px) { .receipt-modal-card { width: min(100vw - 14px, 580px); border-radius: 23px !important; } .receipt-card { padding: 20px 17px 15px !important; } .receipt-brand { margin-bottom: 16px !important; } .receipt-logo-mini { width: 45px !important; height: 45px !important; border-radius: 14px !important; } .receipt-info-panel { grid-template-columns: 1fr 1fr; } .receipt-row { padding: 10px !important; min-height: 56px; } .receipt-row strong { font-size: .78rem !important; } .receipt-actions { gap: 8px !important; } .receipt-action { min-height: 54px !important; padding: 8px !important; font-size: .69rem !important; } } /* Keep every receipt action visible on compact screens. */ .receipt-modal-card { display: flex !important; flex-direction: column; } .receipt-card { overflow-y: auto; overscroll-behavior: contain; } @media (max-width: 680px) { .receipt-modal-card { max-height: calc(100dvh - 10px) !important; } .receipt-card { padding: 17px 16px 14px !important; } .receipt-brand { margin-bottom: 12px !important; } .receipt-info-panel { padding: 4px !important; } .receipt-row { min-height: 50px; padding: 8px 9px !important; } .receipt-items-wrap { margin-top: 13px !important; } .receipt-total-box { margin-top: 11px !important; padding: 12px 14px !important; } .receipt-actions { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 7px !important; margin-top: 13px !important; } .receipt-action { min-height: 49px !important; padding: 7px 3px !important; border-radius: 13px !important; font-size: .63rem !important; } .receipt-action i { font-size: .9rem; } } /* H4SX review submission shortcut. Full rating feed remains on H4SX Review. */ .review-submit-main-btn { border: 0; font: inherit; cursor: pointer; text-decoration: none; } .review-submit-main-btn { display: inline-flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1px solid #b7e9ff; border-radius: 14px; color: #064f83; background: linear-gradient(135deg, #e8faff, #effff8); text-align: left; } .review-submit-main-btn > i { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; color: #fff; background: linear-gradient(135deg, #16a4ed, #16c779); } .review-submit-main-btn strong, .review-submit-main-btn small { display: block; } .review-submit-main-btn strong { font-size: .8rem; } .review-submit-main-btn small { margin-top: 2px; color: #4b7a98; font-size: .67rem; } .review-share-btn { display: inline-flex; align-items: center; gap: 7px; align-self: center; padding: 10px 12px; border: 1px solid #bce7ff; border-radius: 12px; color: #087abc; background: #f7fcff; font: inherit; font-size: .72rem; font-weight: 850; cursor: pointer; } @media (max-width: 680px) { .review-link-wrap { gap: 9px; } .review-submit-main-btn { width: 100%; } .review-share-btn { width: 100%; justify-content: center; } } /* Native H4SX review submission form. */ .h4rf-modal { position:fixed; inset:0; z-index:10050; display:none; align-items:center; justify-content:center; padding:18px; background:rgba(4,24,53,.68); backdrop-filter:blur(9px); } .h4rf-modal.show { display:flex; } .h4rf-dialog { width:min(700px,100%); max-height:calc(100dvh - 28px); overflow:auto; border:1px solid #a8e3ff; border-radius:24px; background:#f8fcff; box-shadow:0 28px 90px rgba(0,28,58,.45); } .h4rf-head { display:flex; justify-content:space-between; gap:16px; padding:20px 23px 17px; color:#fff; background:linear-gradient(105deg,#088ee2,#13bcd4 58%,#16bf76); } .h4rf-head span { font-size:.64rem; font-weight:900; letter-spacing:.13em; } .h4rf-head h2 { margin:4px 0; font-size:1.35rem; } .h4rf-head p { margin:0; font-size:.78rem; line-height:1.4; } .h4rf-head button { width:38px; height:38px; flex:0 0 auto; border:1px solid rgba(255,255,255,.52); border-radius:12px; color:#fff; background:rgba(255,255,255,.14); font-size:1.6rem; cursor:pointer; } .h4rf-head-actions { display:flex; align-items:center; gap:8px; } .h4rf-head .h4rf-back { width:auto; min-width:0; padding:0 12px; display:inline-flex; align-items:center; gap:7px; font:800 .72rem inherit; } .h4rf-form { padding:20px 23px 23px; } .h4rf-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; } .h4rf-field { display:block; color:#173f66; } .h4rf-wide { grid-column:1/-1; } .h4rf-field > span,.h4rf-feedback > span { display:block; margin-bottom:7px; font-size:.7rem; font-weight:900; letter-spacing:.035em; text-transform:uppercase; } .h4rf-field em,.h4rf-feedback em { font-style:normal; font-weight:600; text-transform:none; } .h4rf-field input,.h4rf-field select,.h4rf-field textarea,.h4rf-url-row input { width:100%; border:1px solid #c5e9ff; border-radius:12px; outline:0; color:#12395e; background:#fff; font:inherit; font-size:.83rem; } .h4rf-field input,.h4rf-field select,.h4rf-url-row input { height:43px; padding:0 12px; } .h4rf-field textarea { min-height:94px; padding:11px 12px; resize:vertical; line-height:1.5; } .h4rf-field input:focus,.h4rf-field select:focus,.h4rf-field textarea:focus,.h4rf-url-row input:focus { border-color:#0eb8de; box-shadow:0 0 0 3px rgba(14,184,222,.12); } .h4rf-name-row,.h4rf-url-row { display:flex; gap:8px; } .h4rf-name-row button,.h4rf-url-row button { flex:0 0 auto; border:0; border-radius:11px; padding:0 13px; color:#0879bc; background:#e9f8ff; font:inherit; font-size:.73rem; font-weight:850; cursor:pointer; } .h4rf-profile { display:flex; align-items:center; gap:14px; margin:16px 0 10px; padding:13px; border:1px solid #d0edff; border-radius:17px; background:#effaff; } .h4rf-avatar { position:relative; width:58px; height:58px; flex:0 0 58px; overflow:hidden; border:0; border-radius:17px; color:#fff; background:#20a7df; font-size:1.22rem; font-weight:900; cursor:pointer; } .h4rf-avatar img { display:none; position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .h4rf-avatar.has-image img { display:block; } .h4rf-avatar.has-image span { visibility:hidden; } .h4rf-avatar i { position:absolute; right:3px; bottom:3px; display:grid; width:18px; height:18px; place-items:center; border-radius:50%; color:#0879bc; background:#fff; font-size:.56rem; } .h4rf-profile-options { min-width:0; flex:1; } .h4rf-profile-options strong { display:block; margin-bottom:7px; color:#19486f; font-size:.69rem; text-transform:uppercase; letter-spacing:.04em; } .h4rf-swatches,.h4rf-emojis { display:flex; gap:6px; flex-wrap:wrap; } .h4rf-emojis { margin-top:7px; } .h4rf-swatch,.h4rf-emoji { display:grid; width:20px; height:20px; place-items:center; border:2px solid transparent; border-radius:50%; cursor:pointer; } .h4rf-swatch.active { border-color:#0d4d78; box-shadow:0 0 0 2px #fff; } .h4rf-emoji { width:25px; height:23px; border-radius:7px; background:#fff; font-size:.78rem; } .h4rf-emoji.active { border-color:#0aa8df; background:#e5f8ff; } .h4rf-upload { padding:11px; border:1px dashed #abdff8; border-radius:15px; background:#fbfeff; } .h4rf-upload-tabs { display:flex; gap:6px; } .h4rf-upload-tabs button { flex:1; min-width:0; border:1px solid #c7eaff; border-radius:9px; padding:7px 5px; color:#5a83a0; background:#f6fbff; font:inherit; font-size:.67rem; font-weight:800; cursor:pointer; } .h4rf-upload-tabs button.active { color:#fff; border-color:#13addf; background:linear-gradient(110deg,#14abe7,#12c68c); } .h4rf-upload-panel { display:none; align-items:center; gap:8px; padding:10px 2px 1px; } .h4rf-upload-panel.active { display:flex; } .h4rf-upload-panel small { color:#6e8aa4; font-size:.68rem; } .h4rf-upload-pick,.h4rf-feedback button { border:1px solid #bce8ff; border-radius:9px; padding:8px 11px; color:#087bbd; background:#ecf9ff; font:inherit; font-size:.72rem; font-weight:850; cursor:pointer; } .h4rf-clear-image { margin-top:8px; border:0; color:#d34954; background:transparent; font:inherit; font-size:.68rem; font-weight:800; cursor:pointer; } .h4rf-review-tools { display:flex; align-items:center; justify-content:space-between; margin-top:7px; } .h4rf-review-tools button { border:0; border-radius:9px; padding:7px 10px; color:#087aba; background:#e6f8ff; font:inherit; font-size:.7rem; font-weight:850; cursor:pointer; } .h4rf-review-tools small,.h4rf-feedback small { color:#6d8ba5; font-size:.68rem; } .h4rf-feedback { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:15px; padding:11px 12px; border:1px solid #d2efff; border-radius:14px; background:#f9fdff; } .h4rf-feedback > span { margin:0 auto 0 0; } .h4rf-feedback button[hidden],.h4rf-clear-image[hidden] { display:none; } .h4rf-submit { width:100%; margin-top:17px; border:0; border-radius:14px; padding:14px; color:#fff; background:linear-gradient(105deg,#0d9ee8,#13bfd5 55%,#18bf74); box-shadow:0 10px 20px rgba(4,165,205,.22); font:inherit; font-size:.85rem; font-weight:900; cursor:pointer; } .h4rf-submit:disabled { opacity:.7; cursor:wait; } @media (max-width:620px) { .h4rf-modal { padding:7px; align-items:flex-end; } .h4rf-dialog { max-height:calc(100dvh - 8px); border-radius:22px 22px 13px 13px; } .h4rf-head { padding:16px; } .h4rf-head .h4rf-back { width:38px; padding:0; justify-content:center; } .h4rf-head .h4rf-back span { display:none; } .h4rf-form { padding:15px; } .h4rf-grid { grid-template-columns:1fr; gap:11px; } .h4rf-wide { grid-column:auto; } .h4rf-head h2 { font-size:1.15rem; } .h4rf-head p { font-size:.7rem; } .h4rf-profile { align-items:flex-start; } } /* Shared review link: show only the native form, without the store chrome. */ html.review-submit-direct, html.review-submit-direct body { min-height:100%; background:#eef9ff; } html.review-submit-direct .site-header, html.review-submit-direct .marquee-wrap, html.review-submit-direct #mob-menu, html.review-submit-direct #search-overlay, html.review-submit-direct #closure-overlay, html.review-submit-direct .page-mesh, html.review-submit-direct #earth-bg, html.review-submit-direct .ai-chat-panel, html.review-submit-direct .ai-helper-bubble, html.review-submit-direct iframe, html.review-submit-direct [id*="balasan"], html.review-submit-direct [class*="balasan"] { display:none !important; } html.review-submit-direct #home-view > :not(.h4rf-modal) { display:none !important; } html.review-submit-direct .wrap { width:100%; max-width:none; padding:0; } html.review-submit-direct .h4rf-modal { position:fixed; z-index:2147483000; padding:14px; background:linear-gradient(135deg,#e5f8ff,#f7fffb); } html.review-submit-direct .h4rf-dialog { width:min(700px,100%); max-height:calc(100dvh - 28px); } /* Game cards wrap into rows instead of becoming a sideways carousel. */ #shop-section #game-grid, #game-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)) !important; align-items: stretch !important; overflow: visible !important; padding: 4px !important; margin-inline: 0 !important; } #shop-section #game-grid > .gc, #game-grid > .gc { width: auto !important; flex: initial !important; } @media (max-width: 820px) { #shop-section #game-grid, #game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; padding: 2px !important; } #shop-section #game-grid > .gc, #game-grid > .gc { width: 100% !important; flex-basis: auto !important; } } /* Mobile fixed controls: keep the shop, support widget and Helper out of each other's way. */ @media (max-width: 820px) { :root { --mobile-dock-height: 76px; } body { padding-bottom: calc(156px + env(safe-area-inset-bottom)) !important; } .wrap { padding-bottom: calc(164px + env(safe-area-inset-bottom)) !important; } .bottom-nav { min-height: var(--mobile-dock-height); z-index: 900 !important; } .bottom-nav-inner { min-height: 62px; } .bn-item { min-width: 58px; padding: 6px 8px; } /* The operation bar stays useful but no longer covers a big part of the page. */ .business-hours-bar { z-index: 850; } .bh-inner { min-height: 64px; padding: 8px 14px; gap: 10px; } .bh-icon { width: 40px; height: 40px; border-radius: 13px; font-size: 17px; } .bh-title { font-size: 11px; } .bh-desc { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bh-status { padding: 8px 12px; gap: 7px; font-size: 11px; } .bh-dot { width: 10px; height: 10px; } /* Keep both customer-help buttons above the navigation, not on top of it. */ .ai-side-assistant { right: 12px !important; bottom: calc(var(--mobile-dock-height) + 12px + env(safe-area-inset-bottom)) !important; z-index: 910 !important; } .ai-float-bubble { width: 54px !important; height: 54px !important; } .ai-side-assistant .ai-chat-panel { bottom: calc(var(--mobile-dock-height) + 12px + env(safe-area-inset-bottom)) !important; max-height: min(68dvh, 530px) !important; } iframe[src*="balasan.id"], iframe[src*="balasan"], iframe[title*="Balasan" i], iframe[title*="balasan" i] { bottom: calc(var(--mobile-dock-height) + 12px + env(safe-area-inset-bottom)) !important; z-index: 905 !important; max-width: calc(100vw - 24px) !important; } body > [id*="balasan"], body > [class*="balasan"] { bottom: calc(var(--mobile-dock-height) + 12px + env(safe-area-inset-bottom)) !important; z-index: 905 !important; } /* Music is optional on phone; it was the third floating button covering the dock. */ .music-btn { display: none !important; } } /* Honest loading and credential guidance states. */ .review-summary-stars.review-summary-pending { display: block; min-height: 18px; color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: 0; } .credential-safety-note { display: flex; gap: 7px; align-items: flex-start; margin: 10px 0 0; color: #0f5f8d; font-size: .76rem; font-weight: 700; line-height: 1.45; } .credential-safety-note i { color: var(--primary); margin-top: 2px; } /* Storefront redesign: compact catalog-first layout inspired by modern game stores. */ body { background: linear-gradient(180deg, #f6fbff 0, #ffffff 380px, #f7fbff 100%) !important; } .site-header-nav-wrap { position: sticky; top: 0; z-index: 700; background: rgba(255,255,255,.94); box-shadow: 0 8px 22px rgba(27,92,132,.07); backdrop-filter: blur(16px) saturate(1.1); } #main-nav { height: 72px; background: transparent; border-bottom: 1px solid #e3eef6; box-shadow: none; } .nav-inner { max-width: 1360px; gap: 16px; } .nav-logo { width: 44px; height: 44px; padding: 0; border: 1px solid #c9eaff; border-radius: 11px; box-shadow: none; } .nav-wordmark { color: #072447; font-size: 15px; letter-spacing: .4px; } .nav-store-search { order: 1; flex: 1 1 280px; min-width: 190px; max-width: 480px; min-height: 42px; display: inline-flex; align-items: center; gap: 10px; padding: 0 13px; border: 1px solid #b9dff6; border-radius: 10px; color: #7586a2; background: #f8fcff; text-align: left; font-size: .82rem; transition: .18s ease; } .nav-store-search:hover { border-color: #0ea5e9; background: #fff; color: #1674ac; } .nav-store-search i { color: #0b8fd3; } .nav-store-search kbd { margin-left: auto; padding: 2px 6px; border: 1px solid #d6e6f1; border-radius: 5px; color: #7b8da7; background: #fff; font-size: .68rem; } .nav-links { display: none; } .nav-right { order: 2; gap: 7px; } .nav-right .search-btn { width: 38px; height: 38px; border-radius: 10px; background: #f7fbff; } .nav-right .ai-helper-btn, .nav-right .changelog-btn, .nav-right .hard-refresh-btn { width: auto; padding: 0 10px; } .nav-right .cart-btn { height: 38px; padding: 0 12px; border-radius: 10px; } .btn-wa { min-height: 38px; padding: 0 13px; border-radius: 10px; box-shadow: none; } .storefront-tabs { display: flex; gap: 2px; max-width: 1360px; margin: 0 auto; padding: 0 var(--container-padding); overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid #e3eef6; } .storefront-tabs::-webkit-scrollbar { display: none; } .storefront-tabs button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 13px; border: 0; border-bottom: 2px solid transparent; color: #4d6584; background: transparent; font-size: .77rem; font-weight: 850; white-space: nowrap; } .storefront-tabs button:hover { color: #0788ca; border-bottom-color: #19b8d1; background: #f2fbff; } .storefront-tabs i { color: #0b9bdd; font-size: .82rem; } .wrap { max-width: 1360px; } #home-view { padding-top: 24px !important; } .promo-hero-shell { border-radius: 14px !important; box-shadow: 0 10px 26px rgba(22,92,135,.12) !important; } .hero { grid-template-columns: minmax(0, 1.06fr) minmax(330px, .94fr); gap: clamp(24px, 4vw, 56px); min-height: 420px; margin: 20px 0 22px; padding: clamp(28px, 4vw, 48px); overflow: hidden; border: 1px solid #d9ecf7; border-radius: 16px; background: linear-gradient(120deg, rgba(255,255,255,.98) 0 51%, rgba(234,249,255,.88) 51% 100%), #fff; box-shadow: 0 14px 32px rgba(33,98,137,.08); } .hero::before { width: 260px; height: 260px; top: -145px; left: 37%; filter: none; opacity: .55; } .hero::after { display: none; } .hero-h1 { max-width: 680px; margin-bottom: 14px; color: #0c2342; font-family: var(--ff-body); font-size: clamp(34px, 4vw, 58px); font-weight: 950; letter-spacing: 0; line-height: 1.04; } .hero-desc { max-width: 600px; margin-bottom: 21px; color: #58708e; font-size: .96rem; line-height: 1.65; } .hero-eyebrow { margin-bottom: 13px; padding: 6px 11px; color: #087dbb; background: #effbff; box-shadow: none; } .hero-stats { gap: 9px; margin-bottom: 20px; } .hstat { min-width: 92px; padding: 11px 13px; border-radius: 10px; box-shadow: none; background: rgba(255,255,255,.84); } .hstat:hover { transform: none; box-shadow: none; } .hstat-n { color: #087ec0; font-size: 1.22rem; } .hstat-l { margin-top: 4px; font-size: 8px; letter-spacing: .6px; } .hero-cta-row { gap: 9px; margin-bottom: 16px; } .btn-primary, .btn-ghost { padding: 12px 15px; border-radius: 10px; font-size: .8rem; } .btn-primary:hover, .btn-ghost:hover { transform: translateY(-1px); } .hero-proof-strip { gap: 7px; } .proof-pill { padding: 6px 9px; border-radius: 7px; font-size: 9px; background: rgba(255,255,255,.7); } .hero-vid-wrap { max-width: 540px; margin-left: auto; } .hero-vid { border: 7px solid #fff; border-radius: 14px; box-shadow: 0 16px 30px rgba(23,91,127,.15); } .hero-vid:hover { transform: none; box-shadow: 0 16px 30px rgba(23,91,127,.15); } .hero-float-1, .hero-float-2 { border-radius: 10px !important; box-shadow: 0 8px 20px rgba(23,91,127,.12) !important; } .trust-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 30px; } .trust-item { min-height: 74px; padding: 13px; border-radius: 11px; box-shadow: none; background: #fff; } .trust-ic { width: 34px; height: 34px; border-radius: 9px; font-size: 14px; } .trust-title { font-size: .78rem; } .trust-sub { font-size: .66rem; line-height: 1.35; } .div { margin: 26px 0; } .section-panel { padding: 24px !important; border-radius: 16px !important; border-color: #d9ebf6 !important; box-shadow: 0 10px 24px rgba(31,91,127,.06) !important; } .sh { margin-bottom: 15px; } .sh-tag { color: #1198d7 !important; font-size: .68rem !important; letter-spacing: 1.3px !important; } .sh-title { color: #0b2648 !important; font-size: clamp(1.25rem, 2vw, 1.75rem) !important; letter-spacing: 0 !important; } .catalog-search-link { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 12px; border: 1px solid #b9e0f7; border-radius: 9px; color: #0a83c3; background: #f3fbff; font-size: .76rem; font-weight: 850; } .detail-note { margin: 0 0 14px; border-radius: 10px; background: #f1fbff; } .platform-filter-bar { padding: 5px !important; gap: 6px !important; border-radius: 12px !important; background: #f4f8fb !important; border-color: #d9e9f3 !important; } .platform-card { min-height: 52px !important; border-radius: 9px !important; } #game-grid { grid-template-columns: repeat(auto-fill, minmax(142px, 1fr)) !important; gap: 14px !important; } #game-grid .gc { align-items: stretch; gap: 8px; padding: 8px; border: 1px solid #d9ebf6; border-radius: 12px; background: #fff; box-shadow: 0 5px 12px rgba(30,93,131,.05); } #game-grid .gc-icon-wrap { border: 0; border-radius: 9px; box-shadow: none; } #game-grid .gc:not(.oos):hover { transform: translateY(-2px); border-color: #83d4fa; box-shadow: 0 11px 20px rgba(21,125,180,.12); } #game-grid .gc:not(.oos):hover .gc-icon-wrap { transform: none; box-shadow: none; } #game-grid .gc-name { min-height: 30px; display: grid; place-items: center; color: #173455; font-size: .67rem; letter-spacing: .18px; } .steps-grid, .testi-grid { gap: 12px; } .step, .testi-card { border-radius: 12px; box-shadow: none; } /* Platform menu: two visual catalog cards, then reveal the selected platform's games below. */ #shop-section .platform-filter-bar { display: grid !important; grid-template-columns: repeat(2, minmax(168px, 238px)) !important; justify-content: start; gap: 16px !important; margin: 0 0 24px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; } #shop-section .platform-card { min-height: 0 !important; aspect-ratio: 4 / 5; display: flex !important; align-items: flex-start; flex-direction: column; justify-content: flex-end !important; gap: 0 !important; padding: 16px !important; overflow: hidden; border: 1px solid #d6e7f2 !important; border-radius: 14px !important; color: #fff !important; background: #082039 !important; box-shadow: 0 9px 18px rgba(24,77,111,.12) !important; text-align: left; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; } #shop-section .platform-card::before { z-index: 0 !important; background: linear-gradient(180deg, rgba(3,19,37,.08) 20%, rgba(3,16,31,.9) 100%) !important; } #shop-section .platform-card::after { content: "" !important; z-index: 1 !important; inset: auto 16px 10px !important; height: 2px !important; opacity: .55 !important; } #shop-section .platform-card-bg { z-index: -1 !important; opacity: 1 !important; transform: scale(1.01) !important; filter: none !important; } #shop-section .platform-card-icon { position: absolute; top: 14px; left: 14px; z-index: 2; width: 36px; height: 36px; border-radius: 10px; font-size: 14px; box-shadow: 0 7px 16px rgba(0,0,0,.18); } #shop-section .platform-card-copy { position: relative; z-index: 2; gap: 4px; max-width: 100%; } #shop-section .platform-card-copy strong { font-size: clamp(1.15rem, 2vw, 1.48rem); letter-spacing: .35px; } #shop-section .platform-card-copy small { color: rgba(255,255,255,.87); font-size: .7rem; line-height: 1.35; } #shop-section .platform-card b { z-index: 2; right: 12px; top: 12px; min-width: 26px; height: 26px; padding: 0 8px; font-size: .7rem; } #shop-section .platform-card-action { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding: 6px 8px; border-radius: 7px; color: #e7f8ff; background: rgba(255,255,255,.13); font-size: .66rem; font-weight: 850; } #shop-section .platform-card:hover, #shop-section .platform-card.active { transform: translateY(-3px) !important; border-color: #1ac8ed !important; box-shadow: 0 14px 26px rgba(14,165,233,.2) !important; } #shop-section .platform-card.active::after { height: 3px !important; opacity: 1 !important; } #shop-section .platform-card:hover .platform-card-bg { transform: scale(1.06) !important; opacity: 1 !important; } @media (max-width: 560px) { #shop-section .platform-filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } #shop-section .platform-card { padding: 12px !important; border-radius: 12px !important; } #shop-section .platform-card-icon { top: 10px; left: 10px; width: 31px; height: 31px; border-radius: 9px; font-size: 12px; } #shop-section .platform-card-copy strong { font-size: 1rem; } #shop-section .platform-card-copy small { font-size: .62rem; } #shop-section .platform-card-action { margin-top: 7px; padding: 5px 7px; font-size: .58rem; } #shop-section .platform-card b { top: 9px; right: 9px; min-width: 23px; height: 23px; font-size: .62rem; } } @media (max-width: 1080px) { .nav-store-search { max-width: none; } .nav-right .ai-helper-btn span, .nav-right .changelog-btn span, .nav-right .hard-refresh-btn span { display: none; } .nav-right .ai-helper-btn, .nav-right .changelog-btn, .nav-right .hard-refresh-btn { width: 38px; padding: 0; } .hero { grid-template-columns: 1fr 0.84fr; padding: 28px; } } @media (max-width: 820px) { .site-header-nav-wrap { position: relative; } #main-nav { height: 64px; } .nav-inner { gap: 8px; } .nav-logo { width: 39px; height: 39px; } .nav-wordmark { font-size: .8rem; } .nav-store-search { display: none; } .storefront-tabs { padding: 0 11px; } .storefront-tabs button { min-height: 39px; padding: 0 10px; font-size: .7rem; } .nav-right .search-btn, .nav-right .cart-btn { width: 36px; height: 36px; } .nav-right .hard-refresh-btn, .nav-right .changelog-btn { display: none; } .btn-wa .btn-txt { display: none; } .btn-wa { width: 36px; min-height: 36px; justify-content: center; padding: 0; } .hero { grid-template-columns: 1fr; min-height: 0; padding: 22px 17px 18px; margin-top: 14px; } .hero-right { display: none; } .hero-h1 { font-size: clamp(2rem, 9vw, 2.75rem); } .hero-desc { font-size: .85rem; } .hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); } .hstat { min-width: 0; padding: 10px 7px; } .hstat-n { font-size: 1rem; } .hstat-l { font-size: 7px; letter-spacing: .3px; } .hero-proof-strip { display: none; } .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .trust-item { min-height: 68px; padding: 10px; } .section-panel { padding: 16px !important; } .catalog-search-link { display: none; } #game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } } /* Mobile layout hardening: final overrides for the catalog and changelog. */ @media (max-width: 820px) { html, body { max-width: 100%; overflow-x: clip; } #shop-section .platform-filter-bar { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; overflow: visible !important; scroll-snap-type: none !important; gap: 10px !important; margin-bottom: 18px !important; } #shop-section .platform-card { width: 100% !important; min-width: 0 !important; min-height: 124px !important; aspect-ratio: 1.3 / 1 !important; flex: initial !important; padding: 12px !important; border-radius: 13px !important; } #shop-section .platform-card-copy strong { font-size: clamp(.9rem, 4vw, 1.08rem) !important; line-height: 1.05; } #shop-section .platform-card-copy small { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: .61rem !important; } #shop-section .platform-card-action { display: none !important; } #shop-section .platform-card-icon { width: 30px !important; height: 30px !important; font-size: 11px !important; } #shop-section .platform-card b { min-width: 22px !important; height: 22px !important; font-size: .58rem !important; } #shop-section #game-grid, #game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; width: 100% !important; overflow: visible !important; } #shop-section .gc, #game-grid .gc { width: 100% !important; min-width: 0 !important; padding: 8px !important; gap: 7px !important; border-radius: 13px !important; } #shop-section .gc-icon-wrap, #game-grid .gc-icon-wrap { aspect-ratio: 1 / 1; border-radius: 10px !important; } #shop-section .gc-name, #game-grid .gc-name { min-height: 31px !important; padding: 0 3px !important; font-size: .64rem !important; line-height: 1.18 !important; overflow-wrap: anywhere; } #changelog-modal { align-items: center !important; justify-content: center !important; padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)) !important; overflow-y: auto; overscroll-behavior: contain; } .changelog-box { width: min(100%, 430px) !important; max-height: calc(100dvh - 24px) !important; margin: auto !important; border-radius: 18px !important; } .changelog-head { padding: 15px 15px 13px !important; } .changelog-head::after { display: none; } .changelog-title { max-width: calc(100% - 48px); font-size: 18px !important; } .changelog-datetime { flex-wrap: wrap; padding-right: 34px; line-height: 1.35; } .changelog-body { min-height: 0; padding: 12px !important; overscroll-behavior: contain; } .changelog-list li { align-items: flex-start; overflow-wrap: anywhere; } .changelog-foot { padding: 11px 12px calc(12px + env(safe-area-inset-bottom)) !important; } .changelog-action-row { display: grid; grid-template-columns: 1fr; gap: 8px; } .changelog-image-btn, .changelog-hard-refresh { min-height: 52px !important; } } @media (max-width: 380px) { #shop-section .platform-card { min-height: 112px !important; padding: 10px !important; } #shop-section .platform-card-icon { top: 9px !important; left: 9px !important; } #shop-section .platform-card-copy strong { font-size: .88rem !important; } #shop-section .gc, #game-grid .gc { padding: 7px !important; } } /* Phone performance mode: avoid painting hidden or purely decorative effects. */ @media (max-width: 820px) { #earth-bg, #earth-3d-container { display: none !important; } .promo-hero-slide.promo-contain::before { display: none !important; } .promo-hero-track { will-change: auto !important; } .promo-hero-slide img { transition: none !important; } .site-header-nav-wrap, .business-hours-bar, .bottom-nav { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .section-panel, #shop-section .platform-card, #shop-section .gc, .pc { box-shadow: 0 6px 16px rgba(15,23,42,.06) !important; } } /* Phone desktop-density mode and modal containment. */ @media (max-width: 820px) { html { touch-action: pan-x pan-y; } .wrap { width: min(100%, 760px); } .section-panel { padding: 14px !important; } #shop-section .sh { margin-bottom: 12px; } #shop-section .detail-note { margin-bottom: 12px; } #changelog-modal { position: fixed !important; inset: 0 !important; z-index: 2147480000 !important; align-items: center !important; padding: 12px !important; transform: none !important; } #changelog-modal.show { display: flex !important; } .changelog-box { width: min(100%, 430px) !important; height: min(720px, calc(100dvh - 24px)) !important; max-height: calc(100dvh - 24px) !important; min-height: 0 !important; margin: auto !important; transform: none !important; } #changelog-modal.show .changelog-box { transform: none !important; } .changelog-head { flex: 0 0 auto; } .changelog-body { min-height: 0 !important; flex: 1 1 auto !important; overflow-y: auto !important; } .changelog-foot { flex: 0 0 auto; } .changelog-action-row { grid-template-columns: 1fr !important; } .changelog-image-btn, .changelog-hard-refresh { min-height: 48px !important; padding: 9px 11px !important; } .changelog-image-btn small, .changelog-hard-refresh small { display: none; } } /* Marketplace catalog skin: compact game-category cards with a clear shopping hierarchy. */ .catalog-marketplace-intro { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 0 16px; padding: 15px 16px; border: 1px solid #d8eaf6; border-radius: 14px; background: linear-gradient(100deg, #f5fcff 0%, #ffffff 68%); } .catalog-marketplace-copy { min-width: 0; display: grid; gap: 3px; } .catalog-marketplace-copy > span { display: inline-flex; align-items: center; gap: 6px; color: #0795d5; font-size: .62rem; font-weight: 900; letter-spacing: 1px; } .catalog-marketplace-copy strong { color: #102b4c; font-size: 1rem; font-weight: 900; } .catalog-marketplace-copy small { color: #67809b; font-size: .75rem; font-weight: 650; line-height: 1.35; } .catalog-marketplace-search { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; min-height: 39px; padding: 0 13px; border: 1px solid #bde4fa; border-radius: 10px; color: #087ec0; background: #fff; font: inherit; font-size: .76rem; font-weight: 900; cursor: pointer; } .catalog-marketplace-search:hover { background: #edfaff; border-color: #50c5f5; } #shop-section .platform-filter-bar { grid-template-columns: repeat(2, minmax(190px, 270px)) !important; gap: 14px !important; margin-bottom: 24px !important; } #shop-section .platform-card { position: relative !important; min-height: 178px !important; aspect-ratio: auto !important; justify-content: flex-end !important; padding: 0 !important; overflow: hidden !important; color: #132c4a !important; border: 1px solid #d8e9f4 !important; border-radius: 13px !important; background: #fff !important; box-shadow: 0 7px 18px rgba(24, 84, 121, .08) !important; } #shop-section .platform-card::before { display: block !important; z-index: 1 !important; inset: 0 0 auto 0 !important; height: 104px !important; background: linear-gradient(90deg, rgba(4, 22, 41, .62), rgba(4, 22, 41, .08)) !important; } #shop-section .platform-card::after { display: none !important; } #shop-section .platform-card-bg { z-index: 0 !important; inset: 0 0 auto 0 !important; height: 104px !important; opacity: 1 !important; transform: none !important; background-position: center !important; filter: none !important; } #shop-section .platform-card-icon { top: 14px !important; left: 14px !important; z-index: 2 !important; width: 37px !important; height: 37px !important; color: #07345a !important; background: rgba(255, 255, 255, .94) !important; box-shadow: 0 5px 14px rgba(1, 25, 45, .18) !important; } #shop-section .platform-card-copy { z-index: 2 !important; display: grid !important; gap: 4px !important; width: 100% !important; padding: 13px 14px 7px !important; } #shop-section .platform-card-copy strong { color: #132c4a !important; font-size: 1rem !important; font-weight: 950 !important; letter-spacing: 0 !important; } #shop-section .platform-card-copy small { color: #6a8098 !important; font-size: .68rem !important; font-weight: 700 !important; } #shop-section .platform-card b { top: 12px !important; right: 12px !important; z-index: 2 !important; min-width: 28px !important; height: 28px !important; color: #fff !important; background: #0aa7df !important; box-shadow: 0 5px 12px rgba(4, 139, 201, .3) !important; } #shop-section .platform-card-action { z-index: 2 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 5px !important; width: calc(100% - 28px) !important; margin: 0 14px 13px !important; padding: 7px 8px !important; border-radius: 8px !important; color: #087ebd !important; background: #effaff !important; font-size: .63rem !important; font-weight: 900 !important; } #shop-section .platform-card:hover, #shop-section .platform-card.active { transform: translateY(-2px) !important; border-color: #56c9f4 !important; box-shadow: 0 13px 25px rgba(24, 125, 181, .16) !important; } #shop-section .platform-card.active .platform-card-action { color: #087550 !important; background: #edfff7 !important; } #shop-section .platform-card:hover .platform-card-bg { transform: scale(1.03) !important; } #shop-section #game-grid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)) !important; gap: 13px !important; } #shop-section #game-grid .gc { padding: 8px !important; border-radius: 12px !important; background: #fff !important; box-shadow: 0 6px 15px rgba(22, 79, 114, .07) !important; } #shop-section #game-grid .gc-name { min-height: 34px !important; padding: 2px 3px !important; color: #102b4c !important; font-size: .7rem !important; font-weight: 900 !important; text-transform: none !important; } @media (max-width: 820px) { .catalog-marketplace-intro { align-items: flex-start; gap: 10px; padding: 12px; } .catalog-marketplace-copy strong { font-size: .86rem; } .catalog-marketplace-copy small { font-size: .66rem; } .catalog-marketplace-search { min-width: 38px; padding: 0 10px; } .catalog-marketplace-search span { display: none; } #shop-section .platform-filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } #shop-section .platform-card { min-height: 151px !important; } #shop-section .platform-card::before, #shop-section .platform-card-bg { height: 80px !important; } #shop-section .platform-card-icon { top: 10px !important; left: 10px !important; width: 31px !important; height: 31px !important; } #shop-section .platform-card-copy { padding: 10px 10px 6px !important; } #shop-section .platform-card-copy strong { font-size: .85rem !important; } #shop-section .platform-card-copy small { font-size: .59rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #shop-section .platform-card b { top: 9px !important; right: 9px !important; min-width: 23px !important; height: 23px !important; } #shop-section .platform-card-action { width: calc(100% - 20px) !important; margin: 0 10px 10px !important; padding: 6px 7px !important; font-size: .55rem !important; } #shop-section #game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } } /* Itemku-style platform choice: image card first, then reveal the selected game's catalog. */ #shop-section .catalog-marketplace-intro { display: none !important; } #shop-section .platform-filter-bar { grid-template-columns: repeat(2, minmax(180px, 214px)) !important; justify-content: start !important; gap: 18px !important; margin: 2px 0 26px !important; } #shop-section .platform-card { display: grid !important; grid-template-rows: minmax(138px, 1fr) auto !important; min-height: 0 !important; height: 268px !important; padding: 0 !important; overflow: hidden !important; border-radius: 12px !important; background: #fff !important; box-shadow: 0 8px 18px rgba(22, 76, 112, .09) !important; } #shop-section .platform-card::before { inset: 0 0 auto 0 !important; z-index: 1 !important; height: 100% !important; background: linear-gradient(180deg, rgba(8, 27, 45, .08) 32%, rgba(8, 27, 45, .58) 100%) !important; } #shop-section .platform-card-bg { inset: 0 0 auto 0 !important; z-index: 0 !important; height: 100% !important; background-position: center !important; background-size: cover !important; } #shop-section .platform-card-icon { display: none !important; } #shop-section .platform-card-copy { align-self: end !important; z-index: 2 !important; display: grid !important; gap: 3px !important; width: 100% !important; min-height: 82px !important; padding: 15px 14px 8px !important; color: #fff !important; background: linear-gradient(180deg, rgba(9, 29, 48, 0), rgba(9, 29, 48, .84) 45%, rgba(9, 29, 48, .96) 100%) !important; } #shop-section .platform-card-copy strong { color: #fff !important; font-size: 1.05rem !important; font-weight: 950 !important; letter-spacing: 0 !important; } #shop-section .platform-card-copy small { color: rgba(255,255,255,.82) !important; font-size: .67rem !important; font-weight: 750 !important; } #shop-section .platform-card b { display: none !important; } #shop-section .platform-card-action { z-index: 3 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; width: calc(100% - 28px) !important; margin: -3px 14px 13px !important; padding: 7px 9px !important; color: #087fbf !important; border: 1px solid #b9e8fb !important; border-radius: 8px !important; background: #fff !important; font-size: .61rem !important; font-weight: 900 !important; } #shop-section .platform-card.active .platform-card-action { color: #087550 !important; background: #edfff7 !important; border-color: #a8eed0 !important; } #shop-section .platform-card:hover, #shop-section .platform-card.active { transform: translateY(-3px) !important; border-color: #38bff1 !important; box-shadow: 0 16px 28px rgba(19, 125, 182, .17) !important; } @media (max-width: 820px) { #shop-section .platform-filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 11px !important; margin-bottom: 18px !important; } #shop-section .platform-card { height: 190px !important; border-radius: 11px !important; } #shop-section .platform-card-copy { min-height: 64px !important; padding: 10px 10px 5px !important; } #shop-section .platform-card-copy strong { font-size: .84rem !important; } #shop-section .platform-card-copy small { font-size: .57rem !important; } #shop-section .platform-card-action { width: calc(100% - 20px) !important; margin: -2px 10px 10px !important; padding: 5px 6px !important; font-size: .52rem !important; } } /* Marketplace homepage layout: catalog first, dense utility header, no oversized landing hero. */ .marquee-wrap { background: #0d2945 !important; } .site-header-nav-wrap { background: #fff; border-bottom: 1px solid #dcecf6; } #main-nav { background: #fff !important; box-shadow: none !important; } .nav-inner { max-width: 1360px !important; } .nav-store-search { max-width: 370px !important; min-width: 220px; border-radius: 9px !important; background: #f6f9fc !important; box-shadow: none !important; } .storefront-tabs { max-width: 1360px !important; } .storefront-tabs button { min-height: 40px !important; } #home-view { display: flex; flex-direction: column; gap: 0; } #home-view > .div { display: none !important; } #home-view > .promo-hero { order: 1; margin-bottom: 12px; } #home-view > .hero { order: 2; } #home-view > #shop-section { order: 3; margin-top: 0; } #home-view > .trust-grid { order: 4; margin-top: 18px; } #home-view > .store-tools { order: 5; margin-top: 18px; } #home-view > .custom-vote { order: 6; margin-top: 18px; } #home-view > #guide { order: 7; margin-top: 24px; } #home-view > #reviews { order: 8; margin-top: 24px; } #home-view > #faq { order: 9; margin-top: 24px; } #home-view .hero { grid-template-columns: minmax(0, 1fr) auto !important; min-height: 0 !important; margin: 0 0 18px !important; padding: 22px 26px !important; border-radius: 14px !important; background: linear-gradient(105deg, #ffffff 0%, #f0fbff 100%) !important; } #home-view .hero-right { display: none !important; } #home-view .hero-h1 { max-width: 720px; margin: 0 0 8px !important; font-size: clamp(1.75rem, 3.3vw, 2.7rem) !important; line-height: 1.08 !important; } #home-view .hero-desc { max-width: 630px; margin: 0 0 13px !important; font-size: .84rem !important; } #home-view .hero-eyebrow { margin-bottom: 8px !important; font-size: .62rem !important; } #home-view .hero-cta-row { margin: 0 !important; } #home-view .hero-proof-strip { display: none !important; } #home-view .hero-stats { position: absolute; right: 26px; bottom: 23px; margin: 0 !important; } #home-view .hstat { min-width: 78px !important; padding: 7px 9px !important; border: 1px solid #dcecf6; } #home-view .hstat-n { font-size: .92rem !important; } #home-view .hstat-l { font-size: .42rem !important; } #home-view #datetime-display, #home-view .hero > div > div[style*="margin-top"] { display: none !important; } #shop-section { border-radius: 14px !important; background: #fff !important; box-shadow: 0 8px 24px rgba(29, 87, 122, .07) !important; } #shop-section::before { display: none !important; } #shop-section .sh { align-items: center !important; padding-bottom: 14px; border-bottom: 1px solid #e5eff5; } #shop-section .sh > div { padding-left: 0 !important; } #shop-section .sh > div::before { display: none !important; } #shop-section .sh-tag { padding: 0 !important; background: transparent !important; } #shop-section .sh-title { margin-top: 5px !important; font-size: 1.45rem !important; letter-spacing: 0 !important; } #shop-section .detail-note { margin: 14px 0 16px !important; box-shadow: none !important; } @media (max-width: 1080px) { .nav-store-search { min-width: 0; max-width: 280px !important; } #home-view .hero-stats { position: static; margin: 14px 0 0 !important; } } @media (max-width: 820px) { .marquee-wrap { background: var(--primary-gradient) !important; } #home-view { display: flex; } #home-view > .div { display: none !important; } #home-view .hero { display: block !important; padding: 18px 16px !important; margin: 0 0 13px !important; } #home-view .hero-h1 { font-size: 1.55rem !important; } #home-view .hero-desc { font-size: .76rem !important; } #home-view .hero-stats { margin-top: 13px !important; } #home-view .hero-cta-row { margin-top: 13px !important; } #home-view .btn-ghost { display: none !important; } #home-view > #shop-section { margin-top: 0; } #home-view > .trust-grid, #home-view > .store-tools, #home-view > .custom-vote, #home-view > #guide, #home-view > #reviews, #home-view > #faq { margin-top: 18px; } .nav-store-search { display: none !important; } } /* Final mobile changelog containment. Keep the update list inside one stable sheet. */ @media (max-width: 820px) { #changelog-modal.show { position: fixed !important; inset: 0 !important; z-index: 2147483647 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100vw !important; height: 100vh !important; min-height: 100svh !important; padding: 12px !important; overflow: hidden !important; background: rgba(15, 32, 51, .68) !important; } #changelog-modal.show .changelog-box { display: flex !important; flex-direction: column !important; width: min(100%, 430px) !important; height: calc(100vh - 24px) !important; max-height: calc(100vh - 24px) !important; min-height: 0 !important; margin: 0 !important; overflow: hidden !important; background: #f9fdff !important; border-radius: 20px !important; transform: none !important; } @supports (height: 100dvh) { #changelog-modal.show { height: 100dvh !important; min-height: 100dvh !important; } #changelog-modal.show .changelog-box { height: calc(100dvh - 24px) !important; max-height: calc(100dvh - 24px) !important; } } #changelog-modal.show .changelog-head, #changelog-modal.show .changelog-foot { flex: 0 0 auto !important; } #changelog-modal.show .changelog-body { display: flex !important; flex: 1 1 0 !important; min-height: 0 !important; overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: #f9fdff !important; } } /* Blox Fruits has one consultation card instead of a long permanent-fruit list. */ .permanent-consult-section .product-subhead b, .game-consult-section .product-subhead b { background: rgba(34, 197, 94, .12); border-color: rgba(34, 197, 94, .24); color: #15803d; } .permanent-consult-card, .game-consult-card { cursor: pointer; border-color: rgba(14, 165, 233, .26); } .permanent-consult-card .pimg, .game-consult-card .pimg { aspect-ratio: 16 / 10; cursor: pointer; background: #dff5ff; } .permanent-consult-card .pimg img, .game-consult-card .pimg img { object-position: center 38%; } .permanent-consult-card .pbody, .game-consult-card .pbody { display: grid; gap: 8px; } .permanent-consult-card .pdesc, .game-consult-card .pdesc { display: block; margin: 0; line-height: 1.45; } .permanent-consult-badge { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border-radius: 999px; background: rgba(15, 23, 42, .78); color: #fff; font-size: 10px; font-weight: 900; box-shadow: 0 6px 16px rgba(15, 23, 42, .22); } @media (max-width: 480px) { .permanent-consult-card .pimg, .game-consult-card .pimg { aspect-ratio: 16 / 9; } }