/* ========================================================= STM88 - Cosmic Blue Neon Professional Theme Ringan, smooth, class tetap sama, modern & hidup ========================================================= */ /* ===================== Root ===================== */ :root{ --bg:#060b18; --bg-soft:#0b1224; --bg-card:#0f1730; --bg-card-2:#111d3d; --bg-hover:#14244a; --line:rgba(255,255,255,.08); --line-2:rgba(108,167,255,.22); --text:#f4f8ff; --muted:#a9b7d4; --primary:#54b8ff; --primary-2:#7a5cff; --primary-3:#8ee7ff; --accent:#9d6bff; --accent-2:#5ad1ff; --gold:#ffd36b; --success:#4ee3b3; --danger:#ff6c89; --shadow:0 10px 28px rgba(0,0,0,.28); --shadow-soft:0 8px 20px rgba(84,184,255,.12); --glow:0 0 18px rgba(84,184,255,.14); --radius:16px; --radius-sm:12px; --trans:.26s ease; } /* ===================== Global ===================== */ body, .navbar, .site-footer-navbar, .modal-body, .modal-footer, .standard-form-container, .complaint-container, .reporting-detail-popup .reporting-detail-popup-content, .loyalty-daily-reward-modal .modal-body, .free-spin-report-container{ background: radial-gradient(circle at top center, rgba(84,184,255,.16), transparent 30%), radial-gradient(circle at 85% 15%, rgba(122,92,255,.12), transparent 24%), linear-gradient(180deg, #0a1122 0%, #08101f 52%, #060b18 100%) !important; color:var(--text) !important; } /* panel blur ringan */ .site-header-navbar, .site-footer, .game-provider-slider, .page-description, .site-side-menu>ul, .side-menu-user-info, .side-menu-login-panel, .standard-reporting-control-group{ background:rgba(10,16,31,.88) !important; border:1px solid rgba(255,255,255,.05); backdrop-filter:blur(8px); } /* ===================== Title / Section ===================== */ .game-list-title, .large-game-list-heading, .standard-form-sub-title, .info-center-container h3, .home-component-item .h2{ color:var(--text) !important; border-left:4px solid var(--primary) !important; padding-left:12px; text-shadow:0 0 12px rgba(84,184,255,.16); } .standard-form-title{ color:var(--text) !important; border-bottom:1px solid var(--line-2) !important; } /* ===================== Cards / Containers ===================== */ .home-component-item, .game-container, .game-list .game-item, .claim-item, .promotion-list .promotion-container, .pending-transactions-container .pending-transactions-item, .transaction-item, .pending-transaction-detail-card, .bet-report-detail-inner-card, .loyalty-history-list .loyalty-history-item, .benefit-container .benefit-list .benefit-card, .how-it-works-container .how-it-works-section, .referral-features .referral-features-item, .mission-container .mission-item, .standard-content-info .standard-content-block, .bank-info-block, .complaint-container .complaint-status-box, .complaint-container .uploaded-video-file-display{ position:relative; background: linear-gradient(180deg, rgba(17,29,60,.96), rgba(10,18,36,.96)) !important; color:var(--text) !important; border:1px solid var(--line) !important; border-radius:var(--radius) !important; box-shadow:var(--shadow) !important; overflow:hidden; } .home-component-item::before, .game-container::before, .game-list .game-item::before, .claim-item::before, .promotion-list .promotion-container::before, .transaction-item::before{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(255,255,255,.05), transparent 35%), radial-gradient(circle at top right, rgba(84,184,255,.10), transparent 28%); pointer-events:none; } /* hover ringan */ .game-list .game-item, .game-container, .claim-item, .promotion-list .promotion-container, .transaction-item, .home-component-item{ transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans), background var(--trans); } .game-list .game-item:hover, .game-container:hover, .claim-item:hover, .promotion-list .promotion-container:hover, .transaction-item:hover, .home-component-item:hover{ transform:translateY(-3px); border-color:rgba(84,184,255,.26) !important; box-shadow: 0 14px 34px rgba(0,0,0,.34), 0 0 0 1px rgba(84,184,255,.08) inset, 0 0 18px rgba(84,184,255,.08) !important; background: linear-gradient(180deg, rgba(19,34,69,.98), rgba(10,18,36,.98)) !important; } /* ===================== Filter Section ===================== */ .game-list-container .filter-section{ background: linear-gradient(180deg, rgba(14,24,46,.96), rgba(9,16,30,.96)) !important; border:1px solid var(--line) !important; border-radius:18px !important; box-shadow:var(--shadow-soft); padding:12px !important; } .game-list-container .filter-section:after{ border-left:1px solid var(--line) !important; } .game-list-container .filter-section .category-filter .category-filter-link{ color:var(--muted) !important; background:transparent !important; border-radius:12px; transition:background var(--trans), color var(--trans), box-shadow var(--trans); } .game-list-container .filter-section .category-filter .category-filter-link:hover{ background:rgba(84,184,255,.10) !important; color:var(--text) !important; } .game-list-container .filter-section .category-filter .category-filter-link.active{ color:#fff !important; background:linear-gradient(90deg, var(--primary-2), var(--primary)) !important; box-shadow:0 8px 22px rgba(84,184,255,.18); } /* ===================== Inputs ===================== */ .game-list-container .filter-section>input, .game-list-container .filter-section>select, .standard-form input, .standard-form select, .standard-form textarea, .side-menu-login-panel input[type="text"], .side-menu-login-panel input[type="password"], .standard-reporting-control-group input, .standard-reporting-control-group select, .complaint-container .form-control{ background:#0d162c !important; color:var(--text) !important; border:1px solid rgba(255,255,255,.08) !important; border-radius:12px !important; transition:border-color var(--trans), box-shadow var(--trans), background var(--trans); } .game-list-container .filter-section>input::placeholder, .standard-form input::placeholder, .standard-form textarea::placeholder{ color:#8ea4cf; } .game-list-container .filter-section>input:focus, .game-list-container .filter-section>select:focus, .standard-form input:focus, .standard-form select:focus, .standard-form textarea:focus, .side-menu-login-panel input[type="text"]:focus, .side-menu-login-panel input[type="password"]:focus, .standard-reporting-control-group input:focus, .standard-reporting-control-group select:focus{ border-color:rgba(84,184,255,.54) !important; box-shadow:0 0 0 3px rgba(84,184,255,.12) !important; background:#0f1931 !important; outline:none; } /* ===================== Buttons ===================== */ .play-now, .claim-item .claim-button, .claim-item .activation-button, .claim-item .cancellation-button, .claim-item .expiration-button, .site-topbar main>a.register-button, .site-topbar main>a.login-button, .standard-button-group .btn-primary, .standard-reporting-control-group .btn-primary, .modal-footer .btn-primary, .download-apk .btn, .download-apk-btn-android, .vendor-game-info a, .vendor-game-details-info a, .page-description a, .promotion-list .promotion-wrapper .link-container button, .register-done-container .btn-deposit, .loyalty-reward-container .loyalty-reward-button, .daily-reward-container .standard-secondary-button, .mission-container .mission-item[data-status="claimable"] .mission-action-container .action-button, [data-payment-gateway="qris"] .qris-qr-code-container a, [data-payment-gateway] .download-qr-button, .download-apk-notification .download-btn{ position:relative; background:linear-gradient(90deg, var(--primary-2), var(--primary)) !important; color:#fff !important; border:0 !important; border-radius:999px !important; box-shadow:0 10px 22px rgba(84,184,255,.18); transition:transform var(--trans), box-shadow var(--trans), filter var(--trans), opacity var(--trans); } .play-now::before, .claim-item .claim-button::before, .site-topbar main>a.register-button::before, .standard-button-group .btn-primary::before{ content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(90deg, rgba(255,255,255,.14), transparent 40%, rgba(255,255,255,.08)); opacity:.6; pointer-events:none; } .play-now:hover, .claim-item .claim-button:hover, .claim-item .activation-button:hover, .claim-item .cancellation-button:hover, .claim-item .expiration-button:hover, .site-topbar main>a.register-button:hover, .site-topbar main>a.login-button:hover, .standard-button-group .btn-primary:hover, .standard-reporting-control-group .btn-primary:hover, .modal-footer .btn-primary:hover, .download-apk .btn:hover, .download-apk-btn-android:hover, .vendor-game-info a:hover, .vendor-game-details-info a:hover, .page-description a:hover, .promotion-list .promotion-wrapper .link-container button:hover, .register-done-container .btn-deposit:hover, .loyalty-reward-container .loyalty-reward-button:hover, .daily-reward-container .standard-secondary-button:hover, .mission-container .mission-item[data-status="claimable"] .mission-action-container .action-button:hover, [data-payment-gateway="qris"] .qris-qr-code-container a:hover, [data-payment-gateway] .download-qr-button:hover, .download-apk-notification .download-btn:hover{ transform:translateY(-2px); box-shadow:0 14px 28px rgba(84,184,255,.24); filter:brightness(1.04); } .free-play, .standard-outline-button.standard-outline-button, .request-otp-button, .contact-verification-link, .claim-item .expiration-countdown, .copy-input-button-field .copy-input-button{ background:rgba(255,255,255,.03) !important; color:var(--text) !important; border:1px solid rgba(84,184,255,.24) !important; border-radius:999px !important; } .free-play:hover, .standard-outline-button.standard-outline-button:hover, .request-otp-button:hover, .contact-verification-link:hover, .copy-input-button-field .copy-input-button:hover{ background:rgba(84,184,255,.10) !important; color:#fff !important; } /* ===================== Game Item ===================== */ .game-list .game-item, .game-container, .popular-slots-game-list .game-item{ overflow:hidden; } .game-list .game-item .wrapper-container .link-container, .game-container .game-wrapper .link-container, .promotion-list .promotion-wrapper .link-container{ background:linear-gradient(180deg, rgba(5,10,20,0), rgba(5,10,20,.82)) !important; backdrop-filter:blur(2px); } .game-container .game-name, .game-list .game-player h5, .popular-games .games-group .game-container .game-player h5, .slots-winner .winner-info h5{ color:var(--text) !important; } /* ===================== Header / Menu ===================== */ .navbar, .site-topbar, .site-header-navbar, .site-menu .game-list-container, .site-side-menu li>a, .site-side-menu summary{ border-color:var(--line) !important; } .site-menu>li>a, .site-topbar main>a, .language-selector-container, .site-menu .games-container>li>a{ color:var(--text) !important; } .site-menu>li[data-active="true"], .site-menu>li[data-active="true"] a, .site-menu>li>a:hover, .site-footer-navbar ul li:hover a, .site-footer-navbar li[data-active="true"] a, .site-side-menu details[open]>summary>section{ color:var(--primary-3) !important; } .site-menu .game-list-container, .site-side-menu>ul{ background:linear-gradient(180deg, rgba(12,20,38,.98), rgba(7,12,24,.98)) !important; border-bottom:1px solid rgba(84,184,255,.18) !important; } /* ===================== Modal ===================== */ .modal-header, .register-modal .modal-header, .simple-modal .modal-header{ background:linear-gradient(90deg, var(--primary-2), var(--primary)) !important; color:#fff !important; border-bottom:0 !important; } .modal-content:has(.resolved-transaction-popup){ background:#0d162b !important; border:1px solid var(--line) !important; } /* ===================== Announcement / Jackpot ===================== */ .announcement-outer-container{ background:linear-gradient(90deg, rgba(12,20,39,.98), rgba(14,24,48,.98)) !important; color:var(--text) !important; border:1px solid var(--line); border-radius:14px; } .announcement-container>[data-section="announcements"]{ color:var(--primary-3) !important; } .home-progressive-jackpot, .home-progressive-jackpot .outer-container, .home-progressive-jackpot .inner-container{ background:transparent !important; } .home-progressive-jackpot .border-container{ background:linear-gradient(180deg, rgba(14,24,46,.96), rgba(9,16,30,.96)) !important; border:1px solid rgba(84,184,255,.22) !important; border-radius:22px !important; box-shadow:var(--shadow); } .home-progressive-jackpot .jackpot-container, .progressive-jackpot .jackpot-container{ background:linear-gradient(90deg, rgba(122,92,255,.24), rgba(84,184,255,.22)) !important; color:#fff !important; border-radius:999px !important; letter-spacing:2px; box-shadow:0 0 18px rgba(84,184,255,.10) inset; } .home-progressive-jackpot .jackpot-border-container{ border:1px dashed rgba(255,255,255,.12) !important; background:rgba(6,11,24,.62) !important; } .home-progressive-jackpot .jackpot-currency, .jackpot-container .jackpot-currency, .wallet-bar .balance-field main, .deposit-container .formatted-balance, .deposit-container .real-deposit-amount, .withdrawal-container .total-balance, .withdrawal-container .real-withdrawal-amount, .deposit-amount-container .real-deposit-amount, .withdrawal-amount .currency-suffix, .deposit-amount .currency-suffix{ color:var(--gold) !important; } /* ===================== Text Colors ===================== */ .contact-us-list li h6, .info-center-container h2, .info-center-container h4, .info-center-container h5, .claim-info-modal h4, .footer-description-section h4, .footer-sitemap-section h4, .register-done-container>h2, .register-done-container .register-verification-done .info, .pending-transaction-detail-container .primary, .resolved-transaction-popup .primary, .transaction-report-group-container .transaction-report-group-title{ color:var(--text) !important; } .contact-us-list li, .info-center-container, .footer-description-section .site-description, .footer-sitemap-section .footer-links>li>a, .footer-sitemap-section .contact-list>li a, .footer-sitemap-section .social-media-list>li>a, .transaction-item .info-section .details .secondary, .pending-transaction-detail-container .secondary, .resolved-transaction-popup .secondary{ color:var(--muted) !important; } .contact-us-list li a, .info-center-container a, .form-footer-note-section .form-footer-note-link a, .register-modal .register-page-link a, .layout-modal .registration-note a, .pending-transaction-detail-container .link, .pending-transaction-detail-container .link a{ color:var(--accent-2) !important; } /* ===================== Tables ===================== */ .transactions-table.table, .standard-form-container .table thead, .standard-reporting-scroll-container .table thead, .transactions-table.table thead, .transactions-table.table tbody{ background:#0d162b !important; color:var(--text) !important; border-color:rgba(255,255,255,.08) !important; } .transactions-table.table tbody tr:nth-child(odd) td, .standard-form-container .table tbody td, .standard-reporting-scroll-container .table tbody td{ background:#0f1930 !important; color:var(--text) !important; border-color:rgba(255,255,255,.06) !important; } .transactions-table.table tbody tr:nth-child(even) td{ background:#13203b !important; color:var(--text) !important; } /* ===================== Tabs ===================== */ .notification-tabs .notification-tab-item, .top-tab-container a, .standard-nav-tabs a, .promotion-categories a, .mobile-app-container .nav-tabs>li>a, .loyalty-reward-container .tab-filter .tab{ background:rgba(255,255,255,.04) !important; color:var(--muted) !important; border:1px solid rgba(255,255,255,.06) !important; border-radius:12px !important; transition:all var(--trans); } .notification-tabs .notification-tab-item[data-active="true"], .top-tab-container a[data-active="true"], .top-tab-container a:hover, .standard-nav-tabs a[data-active="true"], .promotion-categories a:hover, .promotion-categories a[data-active="true"], .mobile-app-container .nav-tabs>li.active>a, .mobile-app-container .nav-tabs>li.active>a:hover, .mobile-app-container .nav-tabs>li.active>a:focus, .loyalty-reward-container .tab-filter input:checked+.tab{ background:linear-gradient(90deg, var(--primary-2), var(--primary)) !important; color:#fff !important; border-color:transparent !important; } /* ===================== Notification / Remark ===================== */ .remarks-container, .payment-maintenance-container, .modal-body .pending-transaction-summary-container, .claim-info-modal .alert-container, .payment-account-creation-remarks, .loyalty-level-remarks-container, .bonus-selection-list .bonus-selection-card+.remarks-container{ background:rgba(84,184,255,.08) !important; border:1px solid rgba(84,184,255,.22) !important; color:#dff4ff !important; border-radius:14px !important; } .remarks-container i{ color:var(--primary) !important; border-color:var(--primary) !important; } /* ===================== Small Animations - ringan ===================== */ @keyframes softPulse{ 0%,100%{ box-shadow:0 0 0 rgba(84,184,255,0); } 50%{ box-shadow:0 0 18px rgba(84,184,255,.16); } } @keyframes softFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-2px); } } @keyframes borderShine{ 0%{ opacity:.35; } 50%{ opacity:.6; } 100%{ opacity:.35; } } .play-now, .site-topbar main>a.register-button, .standard-button-group .btn-primary{ animation:softPulse 3.4s ease-in-out infinite; } .home-progressive-jackpot .jackpot-container, .progressive-jackpot .jackpot-container{ animation:softFloat 4s ease-in-out infinite; } .game-list .game-item::before, .game-container::before{ animation:borderShine 4.2s ease-in-out infinite; } /* ===================== Mobile Optimization ===================== */ @media (max-width: 768px){ .game-list .game-item:hover, .game-container:hover, .claim-item:hover, .promotion-list .promotion-container:hover, .transaction-item:hover, .home-component-item:hover{ transform:none; } .play-now, .site-topbar main>a.register-button, .standard-button-group .btn-primary, .home-progressive-jackpot .jackpot-container, .progressive-jackpot .jackpot-container, .game-list .game-item::before, .game-container::before{ animation:none; } .site-header-navbar, .site-footer, .game-provider-slider, .page-description, .site-side-menu>ul, .side-menu-user-info, .side-menu-login-panel{ backdrop-filter:none; } } /* ===================== Extra Optional Polish ===================== */ .page-description, .standard-content-info .standard-content-block, .bank-info-block, .announcement-outer-container, .game-list-container .filter-section{ box-shadow: 0 10px 24px rgba(0,0,0,.22), 0 0 0 1px rgba(84,184,255,.04) inset !important; }