:root { --saito-bg: #020a1d; --saito-bg-soft: #06162b; --saito-panel: rgba(4, 18, 44, 0.88); --saito-panel-light: rgba(17, 42, 70, 0.78); --saito-border: rgba(135, 164, 194, 0.35); --saito-cyan: #56c8ff; --saito-yellow: #ffba08; --saito-white: #f7f9ff; --saito-muted: #9da9bc; --saito-radius: 14px; } html { scroll-behavior: smooth; /* overflow-x on alone doesn't reliably stop the document from growing - the marquee tracks (width: max-content) were still pushing the page ~60px wider than the viewport on phones. Clamping too keeps the page from scrolling sideways. */ overflow-x: hidden; max-width: 100%; } body { min-height: 100vh; overflow-x: hidden; color: var(--saito-white); font-family: "Poppins", sans-serif; background: radial-gradient(circle at 15% 20%, rgba(0, 150, 215, 0.18), transparent 28rem), radial-gradient(circle at 82% 8%, rgba(18, 141, 202, 0.15), transparent 30rem), linear-gradient(135deg, #010718 0%, #061a31 48%, #02091d 100%); } /* Bootstrap's wide gutters (g-5 = 3rem) use negative row margins that exceed the container's padding on narrow screens, pushing the page ~13px wider than the viewport. Tighten them on phones. */ @media (max-width: 575.98px) { .row.g-5, .row.gy-5 { --bs-gutter-y: 1.5rem; } .row.g-5, .row.gx-5 { --bs-gutter-x: 1.25rem; } } body::before, body::after { position: fixed; z-index: -1; width: 7px; height: 7px; content: ""; border-radius: 50%; background: #fff2a5; box-shadow: 15vw 10vh 10px 2px rgba(255, 238, 132, 0.75), 78vw 7vh 10px 2px rgba(255, 238, 132, 0.75), 90vw 38vh 10px 2px rgba(255, 238, 132, 0.6), 8vw 68vh 10px 2px rgba(255, 238, 132, 0.65), 63vw 82vh 10px 2px rgba(255, 238, 132, 0.6); } body::after { top: 45%; left: 45%; opacity: 0.7; transform: scale(0.7); } a { color: inherit; } .site-navbar { border-bottom: 1px solid rgba(255, 255, 255, 0.05); background: rgba(2, 10, 29, 0.84); backdrop-filter: blur(16px); } .brand { display: inline-flex; gap: 0.6rem; align-items: center; color: var(--saito-yellow) !important; font-size: 1.1rem; font-weight: 600; text-decoration: none; letter-spacing: 0.01em; } .brand-mark { display: inline-grid; width: 1.7rem; height: 2rem; place-items: center; color: var(--saito-yellow); font-size: 1.75rem; font-weight: 700; font-style: italic; line-height: 1; transform: skew(-10deg); } .site-logo { height: 38px; width: auto; object-fit: contain; display: block; } .navbar .nav-link { position: relative; padding: 0.75rem 0.85rem !important; color: rgba(247, 249, 255, 0.85); font-size: 0.9rem; font-weight: 500; } .navbar .nav-link::after { position: absolute; right: 0.85rem; bottom: 0.3rem; left: 0.85rem; height: 2px; content: ""; background: var(--saito-yellow); transform: scaleX(0); transition: transform 180ms ease; } .navbar .nav-link:hover, .navbar .nav-link.active { color: #fff; } .navbar .nav-link:hover::after, .navbar .nav-link.active::after { transform: scaleX(1); } /* ── Signed-in indicator (navbar auth widget) ────────────────────────────── Previously a signed-in user only got a bare 32px avatar, and the name was hidden entirely below 576px - leaving no clear signal that they were logged in. This gives the widget a chip treatment with a green presence dot. */ .signed-in-chip { display: inline-flex; gap: 0.15rem; align-items: center; padding: 0.25rem 0.7rem 0.25rem 0.3rem; border: 1px solid rgba(74, 222, 128, 0.35); border-radius: 999px; background: rgba(74, 222, 128, 0.08); transition: border-color 180ms ease, background 180ms ease; } .signed-in-chip:hover, .signed-in-chip.show { border-color: rgba(74, 222, 128, 0.6); background: rgba(74, 222, 128, 0.14); } .signed-in-chip::after { margin-left: 0.15rem; color: var(--saito-muted); } .avatar-wrap { position: relative; display: inline-flex; flex-shrink: 0; } .online-dot { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border: 2px solid #04121f; border-radius: 50%; background: #4ade80; box-shadow: 0 0 6px rgba(74, 222, 128, 0.8); } .signed-in-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; text-align: left; } .signed-in-label { color: #4ade80; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .signed-in-name { max-width: 11ch; overflow: hidden; color: var(--saito-white); font-size: 0.8rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; } @media (min-width: 576px) { .signed-in-name { max-width: 16ch; } } .order-link { display: inline-flex; gap: 0.55rem; align-items: center; padding: 0.7rem 0.95rem; color: var(--saito-white); font-size: 0.86rem; text-decoration: none; border: 1px solid transparent; border-radius: 999px; transition: 180ms ease; } .order-link:hover { color: var(--saito-yellow); border-color: rgba(255, 186, 8, 0.4); background: rgba(255, 186, 8, 0.06); } .hero-section { padding: 2rem 0 1rem; } .hero-panel, .process-panel, .footer-panel, .footer-bottom { overflow: hidden; border: 1px solid var(--saito-border); border-radius: var(--saito-radius); background: var(--saito-panel); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28); } .hero-main { background: linear-gradient(115deg, #030a20 0%, #071a34 55%, #16344f 100%); } .hero-copy { position: relative; z-index: 2; padding: clamp(2.5rem, 6vw, 5.5rem); } .hero-kicker { color: var(--saito-yellow); font-size: 0.9rem; font-weight: 500; } .hero-copy h1 { max-width: 720px; margin-bottom: 1.25rem; font-size: clamp(2.2rem, 4vw, 4.1rem); font-weight: 600; line-height: 1.22; letter-spacing: -0.035em; text-shadow: 0 3px 18px rgba(79, 196, 255, 0.26); } .hero-description { color: var(--saito-muted); font-size: 0.9rem; } .carousel-dots { display: flex; gap: 0.65rem; justify-content: center; margin-top: 2.75rem; } .carousel-dots span { width: 11px; height: 11px; border-radius: 50%; background: rgba(255, 255, 255, 0.28); } .carousel-dots .active { background: #fff; box-shadow: 0 0 14px rgba(255, 255, 255, 0.7); } /* Match the banner artwork's own proportions (1280x463) instead of forcing a fixed height. The fixed 285px height on phones gave the container a ~1.2 ratio against the image's 2.77, so object-fit:cover cropped away ~56% of the artwork. Sizing by aspect-ratio shows the whole banner at every width. */ .hero-media { position: relative; overflow: hidden; aspect-ratio: 1280 / 463; } .banner-track { display: flex; /* Two slides side by side, each exactly the panel width, so the -50% keyframe loops seamlessly. width:max-content let the slides size themselves and made the track wider than the viewport. */ width: 200%; height: 100%; animation: scrollBanner 30s linear infinite; } .banner-track img { /* Each slide fills exactly the panel width, and the container now carries the artwork's own aspect ratio - so "contain" shows the whole banner without letterboxing. min-width:100vw used to force the image wider than its container, which is what pushed the sides out of view. */ width: 50%; /* half of the 200%-wide track = exactly one panel width */ height: 100%; flex-shrink: 0; object-fit: contain; object-position: center; display: block; } @keyframes scrollBanner { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .hero-overlay { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, #071a34 0%, transparent 38%, rgba(0, 0, 0, 0.12) 100%); } .social-actions { position: absolute; top: 50%; right: 1.25rem; display: flex; flex-direction: column; gap: 0.85rem; transform: translateY(-50%); } .social-actions a { display: grid; width: 42px; height: 42px; place-items: center; color: #fff; font-size: 1.15rem; text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.48); border-radius: 50%; background: rgba(2, 10, 29, 0.48); backdrop-filter: blur(10px); transition: 180ms ease; } .social-actions a:hover { color: var(--saito-yellow); border-color: var(--saito-yellow); transform: translateY(-2px); } .logo-strip { overflow: hidden; padding: 1.25rem; background: rgba(3, 15, 35, 0.95); display: flex; align-items: center; position: relative; } .logo-strip::before, .logo-strip::after { content: ""; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none; } .logo-strip::before { left: 0; background: linear-gradient(to right, rgba(3, 15, 35, 0.95), transparent); } .logo-strip::after { right: 0; background: linear-gradient(to left, rgba(3, 15, 35, 0.95), transparent); } .logo-track { display: flex; gap: 1.5rem; width: max-content; animation: scrollLogos 25s linear infinite; } .logo-item { display: grid; width: 160px; min-height: 78px; place-items: center; border-radius: 8px; background: linear-gradient(145deg, rgba(20, 45, 73, 0.72), rgba(5, 18, 42, 0.72)); flex-shrink: 0; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: transform 180ms ease, border-color 180ms ease, background 180ms ease; } .logo-item:hover { transform: translateY(-3px); border-color: rgba(86, 200, 255, 0.4); background: linear-gradient(145deg, rgba(30, 60, 95, 0.85), rgba(8, 24, 52, 0.85)); } .logo-item img { max-width: 82%; max-height: 48px; object-fit: contain; mix-blend-mode: screen; } /* Phones: the 160px tiles held a 48px icon, so ~70% of each tile was empty space and only two fitted on screen - they read as oversized next to the banner. Tighten the tile, gap and padding so several fit comfortably. */ @media (max-width: 575.98px) { .logo-strip { padding: 0.7rem 0.5rem; } .logo-strip::before, .logo-strip::after { width: 32px; } .logo-track { gap: 0.6rem; } .logo-item { width: 84px; min-height: 52px; border-radius: 10px; } .logo-item img { max-width: 78%; max-height: 34px; } } @keyframes scrollLogos { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .section-space { padding: 4.25rem 0 0; } .section-heading { margin-bottom: 1.75rem; } .section-heading h2, .footer-panel h2 { margin-bottom: 0.45rem; font-size: clamp(1.3rem, 2vw, 1.75rem); font-weight: 600; } .section-heading p, .footer-panel p { margin-bottom: 0; color: var(--saito-muted); font-size: 0.88rem; } .game-card { display: block; overflow: hidden; height: 100%; color: var(--saito-white); text-decoration: none; border: 1px solid rgba(137, 162, 190, 0.35); border-radius: 13px; background: rgba(2, 12, 34, 0.86); box-shadow: 0 16px 35px rgba(0, 0, 0, 0.18); transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; } .game-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform 260ms ease; } .game-card span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; min-height: 60px; padding: 0.85rem 0.7rem; overflow: hidden; font-size: 0.82rem; font-weight: 500; line-height: 1.3; text-align: center; text-overflow: ellipsis; white-space: normal; word-break: break-word; } .game-card:hover, .game-card.active { color: #fff; border-color: var(--saito-cyan); box-shadow: 0 0 0 1px rgba(86, 200, 255, 0.2), 0 20px 45px rgba(0, 0, 0, 0.28); transform: translateY(-5px); } .game-card:hover img, .game-card.active img { transform: scale(1.025); } .game-card.maintenance { position: relative; filter: grayscale(0.7) brightness(0.8); border-color: rgba(239, 68, 68, 0.4) !important; } .game-card.maintenance::before { content: "MAINTENANCE"; position: absolute; top: 10px; right: 10px; background: #ef4444; color: #fff; font-size: 0.65rem; font-weight: 700; padding: 3px 8px; border-radius: 4px; letter-spacing: 0.05em; z-index: 10; box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4); } .process-panel { padding: 1.25rem; } .process-step { padding: 2rem 1.4rem; text-align: center; } /* The four steps read as a single numbered journey rather than separate cards: a badge per stage, joined by a connecting line that runs across the row. The old vertical dividers cut that line, so they're gone. */ .process-marker { position: relative; display: flex; align-items: center; justify-content: center; margin-bottom: 1.1rem; } .process-line { flex: 1; height: 2px; background: linear-gradient(90deg, rgba(137, 162, 190, 0.05), rgba(137, 162, 190, 0.35)); } .process-line-end { background: linear-gradient(90deg, rgba(137, 162, 190, 0.35), rgba(137, 162, 190, 0.05)); } /* The journey starts at step 1 and ends at the last step - no dangling line before the first badge or after the last. */ .process-step:first-child .process-line-start, .process-step:last-child .process-line-end { visibility: hidden; } .process-badge { display: grid; flex-shrink: 0; width: 34px; height: 34px; place-items: center; color: var(--saito-yellow); font-size: 0.88rem; font-weight: 700; border: 1px solid rgba(255, 186, 8, 0.4); border-radius: 50%; background: rgba(255, 186, 8, 0.1); transition: transform 200ms ease, box-shadow 200ms ease; } /* The final stage is the payoff - mark it as complete, in green. */ .process-step.is-final .process-badge { color: #4ade80; border-color: rgba(74, 222, 128, 0.45); background: rgba(74, 222, 128, 0.12); box-shadow: 0 0 14px rgba(74, 222, 128, 0.25); } .process-step:hover .process-badge { transform: scale(1.12); box-shadow: 0 0 16px rgba(255, 186, 8, 0.35); } .process-step.is-final:hover .process-badge { box-shadow: 0 0 18px rgba(74, 222, 128, 0.45); } .process-icon { display: block; margin-bottom: 1rem; color: #cbd6e7; font-size: 2.35rem; } .process-step h3 { margin-bottom: 0.8rem; font-size: 0.95rem; font-weight: 500; } .process-step p { margin: 0; color: #8795aa; font-size: 0.78rem; line-height: 1.8; } /* â”€â”€ Footer â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */ .site-footer { position: relative; margin-top: 3rem; padding-bottom: 0; background: linear-gradient(180deg, rgba(2,10,29,0) 0%, #010a1d 60%); } .footer-glow-top { height: 2px; background: linear-gradient(90deg, transparent, var(--saito-cyan), var(--saito-yellow), var(--saito-cyan), transparent); margin-bottom: 3rem; opacity: 0.7; } .footer-main { padding-bottom: 3rem; } .footer-logo-link { display: inline-block; margin-bottom: 1rem; } .footer-logo-img { height: 44px; width: auto; object-fit: contain; } .footer-desc { color: var(--saito-muted); font-size: 0.85rem; line-height: 1.8; margin-bottom: 1.5rem; } .footer-socials { display: flex; gap: 0.65rem; } .footer-payments { display: flex; align-items: center; gap: 0.6rem; margin-top: 1.25rem; } .footer-payments-label { color: var(--saito-muted); font-size: 0.78rem; font-weight: 600; margin-right: 0.15rem; } .footer-payments img { height: 22px; width: auto; max-width: 56px; object-fit: contain; border-radius: 4px; background: #fff; padding: 2px 6px; } .social-btn { display: grid; width: 40px; height: 40px; place-items: center; color: var(--saito-white); font-size: 1.1rem; text-decoration: none; border: 1px solid rgba(86, 200, 255, 0.25); border-radius: 50%; background: rgba(86, 200, 255, 0.07); transition: all 200ms ease; } .social-btn:hover { color: var(--saito-yellow); border-color: var(--saito-yellow); background: rgba(255, 186, 8, 0.1); transform: translateY(-3px); box-shadow: 0 6px 20px rgba(255, 186, 8, 0.2); } .footer-heading { font-size: 0.95rem; font-weight: 600; color: var(--saito-white); margin-bottom: 1.25rem; padding-bottom: 0.65rem; border-bottom: 1px solid rgba(86, 200, 255, 0.2); } .footer-links { list-style: none; padding: 0; margin: 0; } .footer-links li + li { margin-top: 0.6rem; } .footer-links a { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--saito-muted); font-size: 0.85rem; text-decoration: none; transition: color 160ms ease, gap 160ms ease; } .footer-links a:hover { color: var(--saito-cyan); gap: 0.75rem; } /* Touch targets: footer and nav links were rendering ~19-20px tall, well under the ~44px comfortable-touch guideline. Give them real vertical hit area on touch devices without changing the desktop look. */ @media (hover: none) and (pointer: coarse) { .footer-links a, .footer-suggestions a { min-height: 40px; padding: 0.35rem 0; } .footer-links li + li { margin-top: 0.15rem; } .footer-bottom-nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0.35rem 0.5rem; } .btn, .btn-sm { min-height: 38px; } } .btn-back-home { /* Fixed at top, not bottom - the sticky checkout bar (shown once a package is picked) occupies the full-width bottom of the screen. */ position: fixed; left: 1.25rem; top: 6.5rem; z-index: 1030; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.25rem; border-radius: 999px; border: 1px solid rgba(86, 200, 255, 0.35); background: rgba(4, 14, 34, 0.92); backdrop-filter: blur(8px); color: var(--saito-white); font-size: 0.85rem; font-weight: 600; text-decoration: none; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); transition: all 180ms ease; } .btn-back-home:hover { color: var(--saito-bg); border-color: var(--saito-yellow); background: var(--saito-yellow); transform: translateY(-3px); box-shadow: 0 12px 28px rgba(255, 186, 8, 0.3); } @media (max-width: 575.98px) { .btn-back-home { left: 0.75rem; top: 5.5rem; padding: 0.6rem 1rem; font-size: 0.8rem; } } /* â”€â”€ Skeleton loading placeholders â”€â”€â”€â”€â”€â”€â”€â”€ */ .skeleton { position: relative; overflow: hidden; background: rgba(137, 162, 190, 0.12); } .skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent); animation: skeletonShimmer 1.6s ease-in-out infinite; } @keyframes skeletonShimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* Game card skeleton (matches .game-card layout: square image + label) */ .skeleton-game-card { border-radius: 13px; overflow: hidden; height: 100%; border: 1px solid rgba(137, 162, 190, 0.2); } .skeleton-game-card .skeleton-thumb { aspect-ratio: 1 / 1; width: 100%; } .skeleton-game-card .skeleton-label { height: 14px; margin: 1rem auto; width: 60%; border-radius: 4px; } /* Nominal/package card skeleton (matches the boxed .nominal-card layout) */ .skeleton-nominal-card { border-radius: 13px; overflow: hidden; border: 1px solid rgba(137, 162, 190, 0.2); } .skeleton-nominal-card .skeleton-thumb { aspect-ratio: 1 / 1; width: 100%; } .skeleton-nominal-card .skeleton-body { padding: 14px; } .skeleton-nominal-card .skeleton-line { height: 12px; border-radius: 4px; margin-bottom: 10px; } .skeleton-nominal-card .skeleton-line.w-60 { width: 60%; } .skeleton-nominal-card .skeleton-line.w-40 { width: 40%; } .skeleton-nominal-card .skeleton-btn { height: 34px; border-radius: 10px; } /* Generic block/line/circle skeleton primitives for forms and lists */ .skeleton-block { border-radius: 10px; } .skeleton-circle { border-radius: 50%; } #footerSuggestions { transition: opacity 300ms ease; } .footer-contact-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.9rem; } .footer-contact-list li { display: flex; align-items: flex-start; gap: 0.75rem; color: var(--saito-muted); font-size: 0.83rem; line-height: 1.6; } .footer-contact-icon { display: grid; width: 30px; height: 30px; flex-shrink: 0; place-items: center; color: var(--saito-cyan); font-size: 1rem; border: 1px solid rgba(86, 200, 255, 0.25); border-radius: 8px; background: rgba(86, 200, 255, 0.06); } .footer-bottom-bar { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; padding: 1.25rem 0; border-top: 1px solid rgba(135, 164, 194, 0.15); } .footer-copy { color: var(--saito-muted); font-size: 0.78rem; } .footer-copy strong { color: var(--saito-yellow); } .footer-bottom-nav { display: flex; flex-wrap: wrap; gap: 1.25rem; } .footer-bottom-nav a { color: rgba(247, 249, 255, 0.65); font-size: 0.78rem; text-decoration: none; transition: color 160ms ease; } .footer-bottom-nav a:hover { color: var(--saito-yellow); } @media (max-width: 991.98px) { .site-navbar .navbar-collapse { margin-top: 0.9rem; padding: 1rem; border: 1px solid var(--saito-border); border-radius: 12px; background: rgba(3, 14, 36, 0.98); } .hero-copy { min-height: 430px; } .hero-overlay { background: linear-gradient(180deg, #071a34 0%, transparent 34%, rgba(0, 0, 0, 0.16) 100%); } } @media (max-width: 767.98px) { /* Logo strip scrolling layout is preserved on mobile */ .section-space { padding-top: 3.25rem; } .footer-suggestions { padding-top: 1.5rem; padding-left: 0; border-top: 1px solid rgba(137, 162, 190, 0.24); border-left: 0; } .footer-bottom { flex-direction: column; align-items: flex-start; } } @media (max-width: 575.98px) { .hero-copy { min-height: 390px; padding: 2.2rem 1.4rem; } .game-grid { --bs-gutter-x: 0.9rem; --bs-gutter-y: 0.9rem; } .game-card span { min-height: 52px; padding: 0.95rem 0.35rem; font-size: 0.72rem; } .process-step + .process-step, .footer-bottom nav { gap: 0.8rem 1.2rem; } .nominal-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } } /* Dynamic Top-Up Page Styling */ .topup-banner { height: 180px; background-image: url('img/logo/banner.png'); background-position: center; background-size: cover; background-repeat: no-repeat; border-bottom: 1px solid var(--saito-border); position: relative; } @media (min-width: 768px) { .topup-banner { height: 280px; /* beautiful original colors visual banner */ } } .topup-game-info-block { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; } @media (min-width: 576px) { .topup-game-info-block { flex-direction: row; align-items: center; gap: 1.5rem; } } .topup-game-logo { width: 90px; height: 90px; border-radius: 16px; object-fit: cover; border: 2px solid var(--saito-cyan); box-shadow: 0 0 15px rgba(86, 200, 255, 0.4); flex-shrink: 0; } .topup-game-title h1 { font-size: 1.4rem; font-weight: 700; margin-bottom: 0.25rem; color: var(--saito-white); line-height: 1.2; } @media (min-width: 768px) { .topup-game-title h1 { font-size: 2.2rem; } } .topup-container { margin-top: -50px; position: relative; z-index: 10; padding-top: 0; padding-bottom: 5rem; } @media (min-width: 768px) { .topup-container { margin-top: -80px; } } .step-card { border: 1px solid var(--saito-border); border-radius: var(--saito-radius); background: var(--saito-panel); padding: 1.75rem; margin-bottom: 2rem; box-shadow: 0 15px 45px rgba(0, 0, 0, 0.2); } .step-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding-bottom: 1rem; } .step-number { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--saito-yellow); color: var(--saito-bg); font-weight: 700; font-size: 0.95rem; } .step-title { font-size: 1.15rem; font-weight: 600; margin: 0; color: var(--saito-white); } .form-control-custom { background: rgba(1, 10, 29, 0.6); border: 1px solid var(--saito-border); color: var(--saito-white) !important; border-radius: 10px; padding: 0.75rem 1rem; font-size: 0.9rem; transition: all 0.2s ease; } .form-control-custom:focus { background: rgba(1, 10, 29, 0.9); border-color: var(--saito-cyan); box-shadow: 0 0 10px rgba(86, 200, 255, 0.25); outline: none; } .form-control-custom::placeholder { color: var(--saito-muted); } .nominal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } /* Compact package card (MLBB, PUBG, Free Fire and every non-Bloxfruit game). Same sky-blue palette as the boxed Bloxfruit cards so the whole store reads as one brand - the click-to-select buying flow is unchanged. */ .nominal-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.25rem; background: linear-gradient(135deg, rgba(86, 200, 255, 0.10) 0%, rgba(2, 12, 34, 0) 55%), rgba(4, 20, 44, 0.92); border: 1.5px solid rgba(86, 200, 255, 0.45); border-radius: 16px; cursor: pointer; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.05); transition: all 0.2s ease; user-select: none; } .nominal-card:hover { border-color: var(--saito-cyan); background: linear-gradient(135deg, rgba(86, 200, 255, 0.18) 0%, rgba(2, 12, 34, 0) 60%), rgba(6, 26, 54, 0.95); transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(86, 200, 255, 0.35), 0 14px 32px rgba(0, 0, 0, 0.3), 0 0 22px rgba(86, 200, 255, 0.18); } .nominal-card.selected { border-color: var(--saito-cyan); background: linear-gradient(135deg, rgba(86, 200, 255, 0.22) 0%, rgba(2, 12, 34, 0) 60%), rgba(6, 26, 54, 0.97); box-shadow: 0 0 0 2px var(--saito-cyan), 0 10px 28px rgba(86, 200, 255, 0.25); } /* The currency artwork is 300x300 but was rendering at 32px - about 10% of the card on desktop, which left the card looking empty. Scale it to the card instead of a fixed pixel size, with sensible bounds. */ .nominal-icon { width: 56px; height: 56px; max-width: 60%; object-fit: contain; margin-bottom: 0.6rem; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35)); } @media (min-width: 768px) { .nominal-icon { width: 64px; height: 64px; } } .nominal-name { font-size: 0.85rem; font-weight: 600; color: var(--saito-white); text-align: center; margin-bottom: 0.25rem; } .nominal-price { font-size: 0.9rem; color: var(--saito-cyan); font-weight: 800; text-shadow: 0 0 14px rgba(86, 200, 255, 0.35); } .nominal-checkmark { position: absolute; top: 8px; right: 8px; color: var(--saito-cyan); font-size: 0.85rem; display: none; } .nominal-card.selected .nominal-checkmark { display: block; } /* â”€â”€ Sectioned package grid â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ When a game has 2+ linked categories, #nominalGrid switches from a grid to a vertical stack of [heading, sub-grid] pairs. The sub-grids carry the same .nominal-grid class so every card rule below applies unchanged. */ .nominal-grid.sectioned { display: block; } /* Package search box */ .nominal-search { position: relative; margin-bottom: 0.9rem; } .nominal-search-icon { position: absolute; top: 50%; left: 0.95rem; color: var(--saito-muted); font-size: 0.9rem; transform: translateY(-50%); pointer-events: none; } .nominal-search-input { width: 100%; padding: 0.7rem 2.6rem; color: var(--saito-white); font-family: inherit; font-size: 0.9rem; border: 1px solid rgba(137, 162, 190, 0.35); border-radius: 999px; background: rgba(2, 12, 34, 0.75); transition: border-color 180ms ease, box-shadow 180ms ease; } .nominal-search-input::placeholder { color: var(--saito-muted); } .nominal-search-input:focus { outline: 0; border-color: var(--saito-cyan); box-shadow: 0 0 0 3px rgba(86, 200, 255, 0.15); } /* The native clear affordance duplicates our own button */ .nominal-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } .nominal-search-clear { position: absolute; top: 50%; right: 0.55rem; display: grid; width: 30px; height: 30px; place-items: center; color: var(--saito-muted); font-size: 0.8rem; border: 0; border-radius: 50%; background: transparent; transform: translateY(-50%); cursor: pointer; transition: color 160ms ease, background 160ms ease; } .nominal-search-clear:hover { color: var(--saito-white); background: rgba(255, 255, 255, 0.08); } .nominal-no-results { padding: 2rem 1rem; color: var(--saito-muted); font-size: 0.9rem; text-align: center; } .nominal-no-results i { font-size: 1.6rem; opacity: 0.5; } /* Quick-jump tabs above the grouped package grid */ .nominal-section-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.1rem; } .nominal-section-tab { display: inline-flex; gap: 0.45rem; align-items: center; padding: 0.5rem 1rem; color: var(--saito-muted); font-family: inherit; font-size: 0.85rem; font-weight: 600; border: 1px solid rgba(137, 162, 190, 0.35); border-radius: 999px; background: rgba(2, 12, 34, 0.7); cursor: pointer; transition: color 180ms ease, border-color 180ms ease, background 180ms ease, transform 180ms ease; } .nominal-section-tab:hover { color: var(--saito-white); border-color: var(--saito-cyan); transform: translateY(-2px); } .nominal-section-tab.active { color: #04121f; border-color: var(--saito-yellow); background: linear-gradient(135deg, var(--saito-yellow), #ffd45e); box-shadow: 0 6px 18px rgba(255, 186, 8, 0.28); } .nominal-section-tab-count { padding: 0.05rem 0.45rem; font-size: 0.72rem; font-weight: 700; border-radius: 999px; background: rgba(255, 255, 255, 0.14); } .nominal-section-tab.active .nominal-section-tab-count { background: rgba(4, 18, 31, 0.22); } /* Section heading: a banded background rather than a bare underline, so each group reads as its own block. scroll-margin keeps the sticky navbar from covering it when a tab jumps here. */ .nominal-section-heading { display: flex; gap: 0.6rem; align-items: center; margin: 0 0 0.9rem; padding: 0.55rem 0.7rem 0.55rem 1rem; scroll-margin-top: 90px; overflow: hidden; color: var(--saito-white); font-size: 1rem; font-weight: 700; letter-spacing: 0.01em; border: 1px solid rgba(137, 162, 190, 0.3); border-left: 3px solid var(--saito-yellow); border-radius: 10px; background: linear-gradient(90deg, rgba(255, 186, 8, 0.12) 0%, rgba(86, 200, 255, 0.06) 45%, rgba(2, 12, 34, 0) 100%), rgba(2, 12, 34, 0.75); } /* ── View Cart button (sticky checkout bar) ─────────────────────────────── */ .btn-view-cart { display: inline-flex; gap: 0.15rem; align-items: center; padding: 0.7rem 1.35rem; color: var(--saito-white); font-size: 0.95rem; font-weight: 700; white-space: nowrap; border: 1px solid rgba(137, 162, 190, 0.45); border-radius: 999px; background: rgba(2, 12, 34, 0.8); transition: color 180ms ease, border-color 180ms ease, background 180ms ease, transform 180ms ease; } .btn-view-cart:hover { color: #fff; border-color: var(--saito-cyan); background: rgba(9, 32, 62, 0.9); transform: translateY(-2px); } .view-cart-badge { min-width: 1.35rem; margin-left: 0.5rem; padding: 0.05rem 0.4rem; color: #04121f; font-size: 0.72rem; font-weight: 800; text-align: center; border-radius: 999px; background: var(--saito-yellow); } /* ── Cart viewer modal rows ─────────────────────────────────────────────── */ .cart-modal-row { display: flex; gap: 0.85rem; align-items: center; padding: 0.75rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); } .cart-modal-row:last-child { border-bottom: 0; } .cart-modal-thumb { width: 56px; height: 56px; flex-shrink: 0; object-fit: cover; border: 1px solid rgba(137, 162, 190, 0.3); border-radius: 10px; background: rgba(255, 255, 255, 0.04); } .cart-modal-info { flex: 1; min-width: 0; } .cart-modal-name { color: #f0faff; font-size: 0.92rem; font-weight: 600; overflow-wrap: anywhere; } .cart-modal-unit { color: var(--saito-muted); font-size: 0.78rem; } .cart-modal-controls { display: flex; flex-direction: column; gap: 0.35rem; align-items: flex-end; flex-shrink: 0; } .cart-qty-btn { width: 28px; height: 28px; padding: 0; } .cart-modal-line-total { color: var(--saito-yellow); font-size: 0.85rem; font-weight: 700; } @media (max-width: 420px) { .btn-view-cart { padding: 0.7rem 0.9rem; font-size: 0.85rem; } } /* Space between stacked sections in the "All" view (the first keeps its position directly under the tab row). */ .nominal-section-block + .nominal-section-block { margin-top: 1.75rem; } /* Cart line-item thumbnail (Bloxfruit "Your Cart" panel) */ .cart-item-thumb { width: 42px; height: 42px; flex-shrink: 0; object-fit: cover; border: 1px solid rgba(137, 162, 190, 0.3); border-radius: 9px; background: rgba(255, 255, 255, 0.04); } .nominal-section-count { padding: 0.1rem 0.5rem; color: var(--saito-yellow); font-size: 0.72rem; font-weight: 700; border: 1px solid rgba(255, 186, 8, 0.35); border-radius: 999px; background: rgba(255, 186, 8, 0.1); } /* "View" button on a section heading - narrows the page to that section. Only shown while the All tab is active (several sections on screen). */ .nominal-section-jump { display: inline-flex; gap: 0.1rem; align-items: center; margin-left: auto; padding: 0.25rem 0.5rem 0.25rem 0.7rem; color: var(--saito-cyan); font-family: inherit; font-size: 0.78rem; font-weight: 600; white-space: nowrap; border: 1px solid rgba(86, 200, 255, 0.35); border-radius: 999px; background: rgba(86, 200, 255, 0.08); cursor: pointer; transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease; } .nominal-section-jump:hover { color: #fff; border-color: var(--saito-cyan); background: rgba(86, 200, 255, 0.2); transform: translateX(2px); } /* Touch devices: the button rendered 27px tall, under the ~32px comfortable tap minimum. Give it real hit area without changing the desktop look. */ @media (hover: none) and (pointer: coarse) { .nominal-section-jump { min-height: 34px; padding-top: 0.35rem; padding-bottom: 0.35rem; } } @media (max-width: 420px) { .nominal-section-jump { padding: 0.35rem 0.4rem 0.35rem 0.55rem; font-size: 0.72rem; } } .nominal-section-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .nominal-section-grid.boxed { grid-template-columns: repeat(3, 1fr); } /* The boxed (Bloxfruit) cards need ~150px each to stay legible, so drop to 2 columns on tablets and 1 on phones - at 3 columns a 375px screen was overflowing by ~326px. */ @media (max-width: 767.98px) { .nominal-grid.boxed, .nominal-section-grid.boxed { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } } @media (max-width: 575.98px) { .nominal-section-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } } /* â”€â”€ Boxed package-card style (Bloxfruit "Select Fruit" step ONLY - #nominalGrid gets the .boxed class from topup.html only when the active game slug is bloxfruit; every other game keeps the plain style above) â”€â”€ */ /* Horizontal rows need more width than the old square tiles: two across on desktop, one per row on phones. */ .nominal-grid.boxed , .nominal-section-grid.boxed { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; } /* Horizontal package rows in the logo's palette: sky-blue frame, deep-blue fill, name and price on the left, artwork on the right. */ .nominal-grid.boxed .nominal-card , .nominal-section-grid.boxed .nominal-card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.75rem; padding: 0.85rem 0.9rem; background: linear-gradient(135deg, rgba(86, 200, 255, 0.10) 0%, rgba(2, 12, 34, 0) 55%), rgba(4, 20, 44, 0.92); border: 1.5px solid rgba(86, 200, 255, 0.45); border-radius: 16px; transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.05); } .nominal-grid.boxed .nominal-card:hover , .nominal-section-grid.boxed .nominal-card:hover { border-color: var(--saito-cyan); background: linear-gradient(135deg, rgba(86, 200, 255, 0.18) 0%, rgba(2, 12, 34, 0) 60%), rgba(6, 26, 54, 0.95); transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(86, 200, 255, 0.35), 0 14px 32px rgba(0, 0, 0, 0.3), 0 0 22px rgba(86, 200, 255, 0.18); } .nominal-grid.boxed .nominal-card.selected , .nominal-section-grid.boxed .nominal-card.selected { border-color: var(--saito-cyan); background: linear-gradient(135deg, rgba(86, 200, 255, 0.22) 0%, rgba(2, 12, 34, 0) 60%), rgba(6, 26, 54, 0.97); box-shadow: 0 0 0 2px var(--saito-cyan), 0 10px 28px rgba(86, 200, 255, 0.25); } .nominal-image-wrap { position: relative; background: rgba(17, 42, 70, 0.6); padding: 10px; display: flex; align-items: center; justify-content: center; border-radius: 13px 13px 0 0; } .nominal-instant-badge { position: absolute; top: 12px; left: 12px; background: rgba(52, 211, 153, 0.15); color: #34d399; border: 1px solid rgba(52, 211, 153, 0.3); font-weight: 600; font-size: 0.68rem; padding: 4px 10px; border-radius: 999px; display: flex; align-items: center; gap: 4px; } /* Artwork sits on the right of the row (source order puts it first). */ .nominal-grid.boxed .nominal-image-wrap , .nominal-section-grid.boxed .nominal-image-wrap { order: 2; position: relative; width: 62px; height: 62px; flex-shrink: 0; padding: 0; border-radius: 12px; background: transparent; } .nominal-grid.boxed .nominal-icon , .nominal-section-grid.boxed .nominal-icon { width: 62px; max-width: 62px; height: 62px; aspect-ratio: 1 / 1; object-fit: contain; border-radius: 12px; margin-bottom: 0; } .nominal-grid.boxed .nominal-body , .nominal-section-grid.boxed .nominal-body { order: 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 0; } .nominal-body { padding: 14px 14px 16px; display: flex; flex-direction: column; } .nominal-grid.boxed .nominal-name , .nominal-section-grid.boxed .nominal-name { font-size: 0.92rem; font-weight: 700; color: var(--saito-white); text-align: left; margin-bottom: 3px; letter-spacing: 0.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Price in the logo's sky blue rather than yellow, so the card reads as one brand family. */ .nominal-grid.boxed .nominal-price , .nominal-section-grid.boxed .nominal-price { font-size: 1.15rem; color: var(--saito-cyan); font-weight: 800; text-align: left; margin-bottom: 8px; text-shadow: 0 0 14px rgba(86, 200, 255, 0.35); } /* In the horizontal layout the badge sat on top of the 62px thumbnail, so it now sits inline above the name (moved into .nominal-body in the markup). */ .nominal-grid.boxed .nominal-instant-badge , .nominal-section-grid.boxed .nominal-instant-badge { position: static; top: auto; left: auto; align-self: flex-start; margin-bottom: 5px; } .nominal-select-btn { width: 100%; background: var(--saito-yellow); border: none; color: var(--saito-bg); font-weight: 700; font-size: 0.82rem; padding: 9px 6px; border-radius: 10px; pointer-events: none; margin-top: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nominal-grid.boxed .nominal-card.selected .nominal-select-btn , .nominal-section-grid.boxed .nominal-card.selected .nominal-select-btn { background: var(--saito-cyan); } /* Solid sky-blue button, matching the logo's fill. */ .nominal-cart-btn { width: 100%; background: linear-gradient(135deg, var(--saito-cyan), #2fa8e0); border: 0; color: #04121f; font-weight: 700; font-size: 0.78rem; padding: 8px 6px; border-radius: 10px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 4px 12px rgba(86, 200, 255, 0.25); transition: all 150ms ease; } .nominal-cart-btn:hover { background: linear-gradient(135deg, #7ad6ff, var(--saito-cyan)); box-shadow: 0 6px 18px rgba(86, 200, 255, 0.4); transform: translateY(-1px); } @media (max-width: 767.98px) { .nominal-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } .nominal-grid.boxed { gap: 0.7rem; } .nominal-grid.boxed .nominal-body, .nominal-section-grid.boxed .nominal-body { padding: 10px 10px 12px; } .nominal-grid.boxed .nominal-name, .nominal-section-grid.boxed .nominal-name { font-size: 0.8rem; } .nominal-grid.boxed .nominal-price, .nominal-section-grid.boxed .nominal-price { font-size: 0.95rem; margin-bottom: 8px; } .nominal-grid.boxed .nominal-select-btn, .nominal-section-grid.boxed .nominal-select-btn { font-size: 0.72rem; padding: 8px 4px; } .nominal-grid.boxed .nominal-instant-badge, .nominal-section-grid.boxed .nominal-instant-badge { font-size: 0.6rem; padding: 3px 8px; top: 8px; left: 8px; } } /* Phones: one full-width card per row, laid out horizontally (image left, details right). Raised from 400px to 480px so common 375-430px phones get the readable layout instead of two cramped columns. */ @media (max-width: 480px) { .nominal-grid.boxed, .nominal-section-grid.boxed { grid-template-columns: repeat(1, 1fr); gap: 0.6rem; } .nominal-grid.boxed .nominal-name, .nominal-section-grid.boxed .nominal-name { font-size: 0.85rem; -webkit-line-clamp: 1; } .nominal-grid.boxed .nominal-select-btn, .nominal-section-grid.boxed .nominal-select-btn { font-size: 0.78rem; white-space: normal; } } .nominal-card.disabled, .payment-card.disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .payment-list { display: flex; flex-direction: column; gap: 1rem; } .payment-card { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; background: rgba(17, 42, 70, 0.3); border: 1px solid var(--saito-border); border-radius: 12px; cursor: pointer; transition: all 0.2s ease; user-select: none; } .payment-card:hover { border-color: var(--saito-cyan); background: rgba(17, 42, 70, 0.6); } .payment-card.selected { border-color: var(--saito-yellow); background: rgba(255, 186, 8, 0.08); box-shadow: 0 0 0 1px var(--saito-yellow); } .payment-info { display: flex; align-items: center; gap: 1rem; } .payment-logo { /* ABA brand guideline (v2.11, "Voice"): logo minimum height is 40px. */ height: 40px; max-width: 100px; object-fit: contain; } .payment-name { font-size: 0.9rem; font-weight: 600; color: var(--saito-white); } .payment-price { font-size: 0.9rem; color: var(--saito-yellow); font-weight: 600; } .payment-radio { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--saito-border); transition: all 0.2s ease; } .payment-card.selected .payment-radio { border-color: var(--saito-yellow); background: var(--saito-yellow); } .payment-card.selected .payment-radio::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--saito-bg); } .checkout-panel { position: sticky; top: 90px; border: 1px solid var(--saito-border); border-radius: var(--saito-radius); background: var(--saito-panel); padding: 1.75rem; box-shadow: 0 15px 45px rgba(0, 0, 0, 0.2); } .checkout-title { font-size: 1.2rem; font-weight: 600; margin-bottom: 1.25rem; color: var(--saito-white); border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding-bottom: 0.75rem; } .checkout-row { display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 0.75rem; color: var(--saito-muted); } .checkout-row.total { font-size: 1.1rem; font-weight: 700; color: var(--saito-white); border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 0.75rem; margin-top: 0.75rem; margin-bottom: 1.5rem; } .checkout-value { color: var(--saito-white); font-weight: 500; } .checkout-row.total .checkout-value { color: var(--saito-yellow); } .btn-checkout { width: 100%; padding: 0.85rem; border-radius: 10px; background: var(--saito-yellow); color: var(--saito-bg); border: none; font-weight: 600; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.02em; transition: all 0.2s ease; box-shadow: 0 5px 15px rgba(255, 186, 8, 0.2); } .btn-checkout:hover { background: #ffcc00; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(255, 186, 8, 0.35); } .btn-checkout:disabled { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.3); cursor: not-allowed; transform: none; box-shadow: none; } /* Modal styling matching dark premium theme */ .modal-custom .modal-content { background: #04122c; border: 1px solid var(--saito-border); border-radius: var(--saito-radius); color: var(--saito-white); } .modal-custom .modal-header { border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .modal-custom .modal-footer { border-top: 1px solid rgba(255, 255, 255, 0.08); } .modal-custom .close-btn { color: var(--saito-white); opacity: 0.7; } .modal-custom .close-btn:hover { opacity: 1; } /* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• ANIMATION SYSTEM â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */ /* â”€â”€ Keyframes â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeInRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } } @keyframes glowPulse { 0%, 100% { box-shadow: 0 0 8px rgba(86,200,255,0.3); } 50% { box-shadow: 0 0 28px rgba(86,200,255,0.75), 0 0 50px rgba(86,200,255,0.25); } } @keyframes glowPulseYellow { 0%, 100% { box-shadow: 0 0 8px rgba(255,186,8,0.3); } 50% { box-shadow: 0 0 28px rgba(255,186,8,0.75), 0 0 50px rgba(255,186,8,0.2); } } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-9px); } } @keyframes shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } @keyframes pageReveal { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes navbarDrop { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: translateY(0); } } @keyframes borderGlow { 0%, 100% { border-color: rgba(86,200,255,0.3); } 50% { border-color: rgba(86,200,255,1); } } @keyframes spin { to { transform: rotate(360deg); } } /* â”€â”€ Page load â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */ main { animation: pageReveal 0.7s ease both; } .site-navbar { animation: navbarDrop 0.5s ease both; } /* â”€â”€ Scroll-reveal â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */ .reveal { opacity: 0; transition: opacity 0.65s ease, transform 0.65s ease; } .reveal.from-up { transform: translateY(40px); } .reveal.from-left { transform: translateX(-50px); } .reveal.from-right { transform: translateX(50px); } .reveal.from-scale { transform: scale(0.88); } .reveal.visible { opacity: 1; transform: none; } .reveal.delay-1 { transition-delay: 0.1s; } .reveal.delay-2 { transition-delay: 0.2s; } .reveal.delay-3 { transition-delay: 0.3s; } .reveal.delay-4 { transition-delay: 0.4s; } .reveal.delay-5 { transition-delay: 0.5s; } .reveal.delay-6 { transition-delay: 0.6s; } /* â”€â”€ Persistent glow / float â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */ .hero-panel { animation: glowPulse 4.5s ease-in-out infinite; } /* Phones: the steps stacked one per row at ~212px each, so this short four-item section ran 894px - over a full screen of scrolling. Two per row with tighter padding and smaller icons brings it back to a glanceable block. */ @media (max-width: 575.98px) { .process-panel { padding: 0.75rem; } .process-step { flex: 0 0 50%; max-width: 50%; padding: 1.1rem 0.7rem; } /* Rebuild the dividers for a 2-column grid: a left border on the right-hand column, a top border on the second row. */ .process-icon { margin-bottom: 0.55rem; font-size: 1.6rem; } .process-marker { margin-bottom: 0.7rem; } .process-badge { width: 26px; height: 26px; font-size: 0.75rem; } .process-step h3 { margin-bottom: 0.4rem; font-size: 0.82rem; } .process-step p { font-size: 0.7rem; line-height: 1.5; } } .process-icon { animation: float 3s ease-in-out infinite; } .process-step:nth-child(2) .process-icon { animation-delay: 0.4s; } .process-step:nth-child(3) .process-icon { animation-delay: 0.8s; } .process-step:nth-child(4) .process-icon { animation-delay: 1.2s; } .footer-glow-top { background-size: 200% auto; animation: shimmer 3.5s linear infinite; } .footer-contact-icon { animation: glowPulse 3s ease-in-out infinite; } .footer-contact-list li:nth-child(2) .footer-contact-icon { animation-delay: 1s; } .footer-contact-list li:nth-child(3) .footer-contact-icon { animation-delay: 2s; } /* â”€â”€ Game card hover bounce â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */ .game-card { transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), border-color 0.3s ease, box-shadow 0.3s ease !important; } .game-card:hover { transform: translateY(-8px) scale(1.04) !important; } /* â”€â”€ Nominal cards â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */ .nominal-card { transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), border-color 0.25s ease, box-shadow 0.25s ease !important; } .nominal-card:hover { transform: translateY(-5px) scale(1.04) !important; } .nominal-card.selected { animation: borderGlow 1.5s ease-in-out infinite; } /* â”€â”€ Social btn hover glow â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */ .social-btn:hover { animation: glowPulseYellow 1.5s ease-in-out infinite; transform: translateY(-3px) !important; } /* â”€â”€ Section heading animated underline â”€â”€â”€ */ .section-heading { text-align: center; } .section-heading h2 { position: relative; display: inline-block; } .section-heading h2::after { content: ''; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); width: 0; height: 3px; background: linear-gradient(90deg, var(--saito-cyan), var(--saito-yellow)); border-radius: 2px; transition: width 0.8s cubic-bezier(0.34,1.56,0.64,1) 0.3s; } .section-heading.visible h2::after { width: 80%; } /* â”€â”€ Scroll progress bar â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */ #scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(90deg, var(--saito-cyan), var(--saito-yellow), var(--saito-cyan)); background-size: 200% auto; animation: shimmer 2s linear infinite; z-index: 9999; box-shadow: 0 0 12px rgba(86,200,255,0.8); transition: width 0.12s linear; } /* â”€â”€ High Contrast Color Overrides â”€â”€â”€â”€â”€â”€â”€â”€ */ .text-muted, .text-secondary, .dropdown-menu-dark .dropdown-header, .dropdown-menu-dark .dropdown-header div, .dropdown-header { color: #aebfd6 !important; /* Bright high-contrast light blue/grey */ opacity: 1 !important; } .form-control::placeholder { color: rgba(247, 249, 255, 0.6) !important; } .dropdown-menu-dark .dropdown-item { color: var(--saito-white) !important; font-weight: 500; transition: all 0.15s ease; } .dropdown-menu-dark .dropdown-item:hover { background-color: var(--saito-panel-light) !important; color: var(--saito-cyan) !important; } .text-muted-light { color: #d1dfef !important; } /* Category Badge Pills */ .badge-pill { display: inline-flex; align-items: center; padding: 0.35rem 0.85rem; font-size: 0.72rem; font-weight: 700; color: var(--saito-white) !important; background: rgba(17, 42, 70, 0.4); border: 1px solid rgba(135, 164, 194, 0.3); border-radius: 50px; letter-spacing: 0.05em; text-transform: uppercase; user-select: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); transition: border-color 0.2s ease, background 0.2s ease; } .badge-pill:hover { background: rgba(17, 42, 70, 0.6); border-color: rgba(135, 164, 194, 0.6); } .badge-pill i { font-size: 0.85rem; line-height: 1; } /* Premium Search Box Styling */ .search-box { position: relative; display: flex; align-items: center; background: rgba(17, 42, 70, 0.4); border: 1px solid var(--saito-border); border-radius: 30px; padding: 0 1.25rem; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); } .search-box:focus-within { border-color: var(--saito-cyan); box-shadow: 0 0 15px rgba(86, 200, 255, 0.25); background: rgba(17, 42, 70, 0.6); } .search-icon { color: var(--saito-muted); font-size: 1.1rem; margin-right: 0.75rem; } .search-input { background: transparent !important; border: none !important; color: var(--saito-white) !important; padding: 0.8rem 0 !important; font-size: 0.95rem; font-weight: 500; box-shadow: none !important; width: 100%; } .search-input::placeholder { color: rgba(247, 249, 255, 0.5) !important; } .btn-clear { background: none; border: none; color: var(--saito-muted); padding: 0; cursor: pointer; margin-left: 0.5rem; transition: color 0.2s ease; } .btn-clear:hover { color: var(--saito-cyan); } /* Sticky Bottom Checkout Bar Styling */ .sticky-checkout-bar { position: fixed; bottom: 0; left: 0; right: 0; background: #061126; border-top: 1px solid rgba(135, 164, 194, 0.25); box-shadow: 0 -8px 25px rgba(0, 0, 0, 0.5); z-index: 999; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease; animation: slideUpBar 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes slideUpBar { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .checkout-bar-details { display: flex; flex-direction: column; } .checkout-bar-total { font-size: 1.05rem; font-weight: 700; color: var(--saito-white); } .checkout-bar-product { font-size: 0.82rem; color: #8c9eb9; } .btn-pay-now { background: linear-gradient(135deg, var(--saito-cyan) 0%, #0096d7 100%) !important; color: var(--saito-bg) !important; font-weight: 700 !important; font-size: 0.95rem !important; padding: 0.7rem 1.8rem !important; border-radius: 30px !important; border: none !important; transition: all 0.25s ease !important; box-shadow: 0 4px 15px rgba(86, 200, 255, 0.3); } .btn-pay-now:hover { background: linear-gradient(135deg, #70d5ff 0%, #00a8f3 100%) !important; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(86, 200, 255, 0.5); } .btn-pay-now:active { transform: translateY(0); } body:has(.sticky-checkout-bar:not(.d-none)) { padding-bottom: 90px; } /* Override underline direction for left-aligned section headings */ .section-heading.text-start h2::after { left: 0; transform: none; } /* Ensure text legibility over original color header banners */ .topup-game-info-block h1 { text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9) !important; } .topup-game-info-block p { text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8) !important; }