/* ========================================================= STM88 PRO NEON THEME OVERRIDE Konsep: - Electric Blue + Crimson Red + Dark Base - Tetap ringan - Struktur & selector lama tetap aman - Class animasi lama tidak diubah ========================================================= */ :root{ --stm-bg:#070b14; --stm-bg-soft:#0d1320; --stm-bg-card:#101826; --stm-bg-hover:#121f33; --stm-border:rgba(80,160,255,.22); --stm-border-strong:rgba(255,58,94,.28); --stm-text:#eaf4ff; --stm-text-soft:#9db2ce; --stm-text-dim:#6f85a3; --stm-blue:#27b7ff; --stm-blue-2:#00e0ff; --stm-red:#ff315c; --stm-red-2:#ff4d6d; --stm-glow-blue:0 0 10px rgba(39,183,255,.28), 0 0 22px rgba(39,183,255,.14); --stm-glow-red:0 0 10px rgba(255,49,92,.22), 0 0 20px rgba(255,49,92,.10); --stm-shadow:0 10px 30px rgba(0,0,0,.32); --stm-grad-main:linear-gradient(135deg,var(--stm-blue) 0%,var(--stm-blue-2) 45%,var(--stm-red) 100%); --stm-grad-blue:linear-gradient(135deg,#0d1b2d 0%,#122844 45%,#163a61 100%); --stm-grad-red:linear-gradient(135deg,#29101a 0%,#411626 45%,#5f1e34 100%); --stm-grad-dark:linear-gradient(180deg,#0d1320 0%,#090d16 100%); --stm-btn-primary:linear-gradient(135deg,var(--stm-blue) 0%,#1f8fff 55%,var(--stm-red) 100%); --stm-btn-secondary:linear-gradient(135deg,#172235 0%,#0f1727 100%); --stm-radius:16px; --stm-radius-sm:12px; --stm-trans:.25s ease; } html, body{ background: radial-gradient(circle at top left, rgba(39,183,255,.10), transparent 30%), radial-gradient(circle at top right, rgba(255,49,92,.10), transparent 28%), linear-gradient(180deg, #090d16 0%, #060910 100%); color:var(--stm-text-soft); } body, p, .site-info .site-info-description p, .site-info-container p, .bank-list p, .site-description h1, .site-description h2, .site-description h3, .site-description p, .site-description a, .site-description div{ color:var(--stm-text-soft); } h1,h2,h3,h4,h5,h6, .sports-platform-title, .jackpot-winners .jackpot-winner-title, .match-info-container .match-teams, .user-info, .login-panel, .claim-container .standard-form-note, .standard-form-note.claim-note span, .standard-form-note.claim-note strong{ color:var(--stm-text); } a{ color:var(--stm-blue); transition:color var(--stm-trans), text-shadow var(--stm-trans), opacity var(--stm-trans); } a:hover, a:focus{ color:var(--stm-red); text-decoration:none; text-shadow:0 0 10px rgba(255,49,92,.22); outline:0; } /* ========= GLOBAL PANEL / CONTAINER ========= */ .panel, .modal-content, .standard-form-container, .standard-form-content, .tab-content-container, .site-header, .site-footer, .info-center-content, .info-center, .home-info-container, .telegram-banner-container, .topbar-container, .messaging-side-menu, .claim-container, .promotions-container, .promotion-list, .slots-games-container, .casino-games-container, .race-games-container, .arcade-games-container, .crash-game-games-container, [data-container-background="sports"], [data-container-background="casino"], [data-container-background="race"], [data-container-background="slots"], [data-container-background="poker"], [data-container-background="others"], [data-container-background="promotions"]{ background: linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,0)), var(--stm-grad-dark) !important; border-color:var(--stm-border) !important; box-shadow:var(--stm-shadow); } /* ========= TOPBAR / HEADER / MENU ========= */ .site-header{ border-bottom:1px solid rgba(39,183,255,.16); box-shadow:0 8px 24px rgba(0,0,0,.22); } .topbar-left-section .topbar-item, .top-menu>li>a, .footer-links>li>a, .footer-section-title, .site-info .site-info-title h3, .site-info .site-info-title p, .site-info-container h5{ color:var(--stm-text-dim); } .top-menu>li>a:hover, .top-menu>li[data-active="true"]>a, .topbar-left-section .topbar-item a:hover, .footer-links>li>a:hover{ color:var(--stm-blue); text-shadow:0 0 12px rgba(39,183,255,.22); } .top-menu .game-list{ background:rgba(7,11,20,.94); border-top-color:rgba(39,183,255,.14); border-bottom-color:rgba(255,49,92,.10); backdrop-filter:blur(8px); } .topbar-left-section .topbar-item .live-chat{ color:#fff; background:var(--stm-btn-primary); box-shadow:var(--stm-glow-blue); border-radius:999px; } .topbar-left-section .topbar-item .live-chat:hover{ color:#fff; transform:translateY(-1px); box-shadow:var(--stm-glow-blue), var(--stm-glow-red); } /* ========= BUTTONS ========= */ .standard-button-group .btn-primary, .messaging-side-menu .support-ticket>a, .deposit-container .reveal-bank-account-button, .play-now, .modal-footer .btn-primary, .standard-reporting-control-group .btn-primary, .download-apk .btn, .claim-item .claim-button, .claim-item .activation-button, .claim-item .cancellation-button, .claim-item .expiration-button, .promotion-item .click-for-get-promo-button, [data-payment-gateway] .download-qr-button, .login-panel .register-button{ background:var(--stm-btn-primary) !important; color:#fff !important; border:1px solid rgba(255,255,255,.08) !important; border-radius:12px; box-shadow:var(--stm-glow-blue); transition:transform var(--stm-trans), box-shadow var(--stm-trans), filter var(--stm-trans); } .standard-button-group .btn-primary:hover, .messaging-side-menu .support-ticket>a:hover, .deposit-container .reveal-bank-account-button:hover, .play-now:hover, .modal-footer .btn-primary:hover, .standard-reporting-control-group .btn-primary:hover, .download-apk .btn:hover, .claim-item .claim-button:hover, .claim-item .activation-button:hover, .claim-item .cancellation-button:hover, .claim-item .expiration-button:hover, .promotion-item .click-for-get-promo-button:hover, [data-payment-gateway] .download-qr-button:hover, .login-panel .register-button:hover{ color:#fff !important; transform:translateY(-2px); box-shadow:var(--stm-glow-blue), var(--stm-glow-red); filter:brightness(1.05); } .free-play, .modal-btn.blank, .confirmation-message-modal .confirm-btn, .login-panel .login-button{ background:var(--stm-btn-secondary) !important; color:var(--stm-text) !important; border:1px solid var(--stm-border) !important; border-radius:12px; transition:all var(--stm-trans); } .free-play:hover, .modal-btn.blank:hover, .confirmation-message-modal .confirm-btn:hover, .login-panel .login-button:hover{ background:linear-gradient(135deg,#18263b 0%,#122033 100%) !important; color:#fff !important; border-color:rgba(39,183,255,.35) !important; box-shadow:var(--stm-glow-blue); } /* ========= LOGIN PANEL ========= */ .login-panel input[type=text], .login-panel input[type=password], .form-control, .mobile-app-container .mobile-app-select, .slots-games-container .filter-section input[type=text], .casino-games-container .filter-section input[type=text], .race-games-container .filter-section input[type=text]{ background:#0a111d !important; border:1px solid rgba(39,183,255,.16) !important; color:var(--stm-text) !important; border-radius:12px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.01); } .login-panel input[type=text]:focus, .login-panel input[type=password]:focus, .form-control:focus{ border-color:rgba(39,183,255,.45) !important; box-shadow:0 0 0 3px rgba(39,183,255,.10), var(--stm-glow-blue); } .login-panel .forgot-password-link, .login-panel .forgot-password-link:hover{ color:var(--stm-red) !important; } /* ========= USER INFO / DROPDOWN ========= */ .user-info .user-main-info, .user-info .dropdown-menu, .user-info .dropdown-menu.vendor-balances-container, .standard-profile-bar, .standard-side-menu .player-account-section{ background: linear-gradient(180deg, rgba(39,183,255,.05), rgba(255,49,92,.03)), #111927 !important; border:1px solid var(--stm-border); box-shadow:var(--stm-shadow); color:var(--stm-text); } .user-info .wallet-container .balance, .standard-profile-bar .user-field div .username, .standard-side-menu .player-account-section .username{ color:var(--stm-blue-2) !important; text-shadow:0 0 10px rgba(0,224,255,.18); } .user-info [data-new-notification="true"]:before{ background:var(--stm-red) !important; box-shadow:0 0 10px rgba(255,49,92,.40); } /* ========= SIDE MENU ========= */ .standard-side-menu, .standard-side-menu .menu-section, .standard-side-menu-group-label, .standard-side-menu a, .promotions-container .standard-side-menu li a{ background:#0d1320 !important; color:var(--stm-text) !important; } .standard-side-menu a[data-active="true"], .standard-side-menu a:hover, .standard-side-menu .menu-section a:hover, .standard-side-menu .menu-section a:focus, .standard-side-menu .menu-section a[data-active="true"], .promotions-container .standard-side-menu a[data-active="true"], .promotions-container .standard-side-menu a:hover, .messaging-side-menu [data-active="true"] a, .messaging-side-menu a:hover{ background:linear-gradient(90deg, rgba(39,183,255,.12), rgba(255,49,92,.12)) !important; color:#fff !important; border-color:rgba(39,183,255,.30) !important; box-shadow:inset 3px 0 0 var(--stm-blue); } /* ========= TITLES / LABEL ========= */ .info-center-title, .standard-form-title, .popular-games [data-section="left"] .section-title, .home-game-list-container .container-title span, .popular-game-title-container .container-title span, .game-list .game-name, .slots-games-container .game-name, .casino-games-container .game-name, .race-games-container .game-name, .claim-item-type>div{ background:var(--stm-grad-main) !important; color:#fff !important; border:none !important; text-shadow:0 1px 0 rgba(0,0,0,.2); } /* ========= GAME LIST / CARD ========= */ .game-list-title, .game-list, .game-list .game-item, .large-game-list-container, .provider-page .large-game-list-container, .provider-info, .provider-slide, .provider-slide>main>.slide-item>a:not(.game-info){ background:#0d1320 !important; border-color:rgba(39,183,255,.14) !important; } .game-list .wrapper-container:hover, .provider-slide>main>.slide-item>a:not(.game-info):hover{ background:linear-gradient(180deg, rgba(39,183,255,.08), rgba(255,49,92,.06)) !important; box-shadow:inset 0 0 0 1px rgba(39,183,255,.16); } .link-container a.game-info, .game-info{ color:var(--stm-text-soft) !important; border-color:rgba(39,183,255,.20) !important; } .link-container a.game-info:hover, .link-container a.game-info:focus, .game-info:hover, .game-info:focus{ color:var(--stm-blue-2) !important; border-color:var(--stm-blue) !important; box-shadow:var(--stm-glow-blue); } /* ========= SPORTS ========= */ .sports-container, .sports-matches-container, .sport-match-item .match-info-container, .hot-match-container, [data-container-background="sports"]{ background:#0c1320 !important; } .sport-match-item, .sport-match-item:nth-child(even){ background: linear-gradient(135deg, rgba(39,183,255,.12), rgba(255,49,92,.10)), #101826 !important; color:var(--stm-text) !important; border:1px solid rgba(39,183,255,.14); } .sport-match-item .match-info, .hot-match-container [data-match-info="date"], .sport-match-item .match-teams>span{ color:var(--stm-blue-2) !important; } .sport-match-item .match-date>span{ color:#fff !important; } .hot-match-container .live-streaming-link{ border-color:var(--stm-blue) !important; color:var(--stm-blue-2) !important; } .hot-match-container .live-streaming-link:hover{ background:var(--stm-btn-primary) !important; color:#fff !important; } /* ========= MODAL ========= */ .modal-content, .bonus-slider-modal .modal-content, .claim-info-modal .alert-container, .modal-body .pending-transaction-summary-container{ background: linear-gradient(180deg, rgba(39,183,255,.06), rgba(255,49,92,.04)), #0e1522 !important; border:1px solid rgba(39,183,255,.18) !important; color:var(--stm-text-soft) !important; } .modal-content h4, .modal-title, .claim-info-modal h4, .download-popup-modal .modal-header .modal-title, .bonus-slider-modal .modal-title{ color:#fff !important; text-shadow:0 0 12px rgba(39,183,255,.18); } .modal-header{ border-bottom-color:rgba(39,183,255,.12) !important; } .modal-footer{ border-top-color:rgba(255,255,255,.06) !important; } .modal-header .close, .bonus-slider-modal .modal-header .close{ color:#fff !important; background:rgba(255,255,255,.06); border-radius:10px; } /* ========= TABLE / MAIL / MESSAGE ========= */ .white-panel.emailbox table, .message-table, .inbox-table-body a, .message-detail-title a, .panel-heading.emailbox-heading .panel-tabs>li>a{ color:var(--stm-text) !important; } .panel-primary>.panel-heading.emailbox-heading{ background:linear-gradient(90deg,#10213a 0%, #16335f 50%, #261227 100%) !important; border-color:rgba(39,183,255,.18) !important; } .panel-heading.emailbox-heading .panel-tabs>li.active>a, .panel-heading.emailbox-heading .panel-tabs>li.active>a:hover, .panel-heading.emailbox-heading .panel-tabs>li.active>a:focus{ color:#fff !important; background:rgba(39,183,255,.10) !important; border-bottom:4px solid var(--stm-red) !important; } .message-table-header .buttons-container a:hover, .email-paging:hover, .inbox-table-header>div:nth-child(3)>ul>li>a:hover{ background:var(--stm-btn-primary) !important; color:#fff !important; } /* ========= BANK / DEPOSIT / WITHDRAW ========= */ .bank-info, .deposit-container .bank-info, .withdrawal-container .bank-info, .bank-info-block{ background: linear-gradient(180deg, rgba(39,183,255,.05), rgba(255,49,92,.04)), #111927 !important; border:1px solid rgba(39,183,255,.16) !important; color:var(--stm-text-soft) !important; } .bank-info h1, .bank-info h2, .bank-info [data-bank-info="details"] span, .deposit-container .formatted-balance, .deposit-container .standard-form-note a, .withdrawal-container .total-balance, .deposit-amount-container .real-deposit-amount, .deposit-amount-container .deposit-amount .currency-suffix, .deposit-amount-container .deposit-amount input.form-control{ color:var(--stm-blue-2) !important; } .deposit-container .copy-bank-account-button, .copy-input-button-field .copy-input-button, .withdrawal-container .copy-bank-account-button{ color:var(--stm-red) !important; } .deposit-container .copy-bank-account-button:hover, .copy-bank-account-button:hover, .withdrawal-container .copy-bank-account-button:hover{ color:#ff6b86 !important; } /* ========= NOTICE / POPUP / TOOLTIP ========= */ .announcement-container, .tickercontainer, .standard-form-note, .update-verification-note-container .update-verification-note, .payment-maintenance-container, .remarks-container, .unread-announcements-popup, .popover, .ztip-holder{ background: linear-gradient(180deg, rgba(39,183,255,.05), rgba(255,49,92,.05)), #111927 !important; color:var(--stm-text) !important; border-color:rgba(39,183,255,.18) !important; } .notice ul li, .announcement-container .announcement-list li{ color:var(--stm-text) !important; } .standard-form-note span, .standard-form-note strong, .standard-remark-notification .remark-notification-content span{ color:var(--stm-blue-2) !important; } .remarks-container{ background:rgba(255,49,92,.08) !important; border-color:rgba(255,49,92,.25) !important; } .remarks-container i{ color:var(--stm-red) !important; border-color:var(--stm-red) !important; } /* ========= CAROUSEL / BANNER ========= */ .banner, .provider-slide, .popular-games .tab-pane, .popular-games .tab-content{ background:#0b111c !important; } .carousel-indicators .active, .banner .carousel-indicators .active, .banner .carousel-indicators .slick-active, .bank-info-container .carousel-indicators .active, .bank-info-container .carousel-indicators li:hover{ background-color:var(--stm-blue) !important; border-color:var(--stm-blue) !important; box-shadow:0 0 10px rgba(39,183,255,.35); } /* ========= CONTACT / FOOTER ========= */ .contact-list>li a{ background:#0f1725 !important; color:var(--stm-text) !important; border:1px solid rgba(39,183,255,.14); border-radius:12px; } .contact-list>li a i{ background:var(--stm-btn-primary) !important; color:#fff !important; border-radius:10px; } .site-footer{ border-top:1px solid rgba(39,183,255,.12) !important; } .site-info-container:not(:last-child):after, .footer-separator, .site-info .site-info-title{ background-color:transparent !important; border-color:rgba(39,183,255,.10) !important; } /* ========= SMALL PERFORMANCE EFFECTS ========= */ .play-now, .free-play, .standard-button-group .btn-primary, .login-panel .login-button, .login-panel .register-button, .promotion-item .click-for-get-promo-button, .top-menu>li>a, a, .standard-side-menu a, .contact-list>li a{ will-change:auto; } .panel, .modal-content, .bank-info, .standard-form-container, .game-list .game-item, .provider-slide, .user-info .user-main-info{ backdrop-filter:none; } /* ========= OPTIONAL LIGHT AURA ========= */ .banner:before, .site-header:before, .standard-form-container:before, .large-game-list-container:before{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(circle at 15% 20%, rgba(39,183,255,.06), transparent 22%), radial-gradient(circle at 85% 15%, rgba(255,49,92,.05), transparent 20%); opacity:.9; } .banner, .site-header, .standard-form-container, .large-game-list-container{ position:relative; overflow:hidden; } /* ========= SCROLLBAR ========= */ ::-webkit-scrollbar{ width:8px; height:8px; } ::-webkit-scrollbar-track{ background:#0b111c; } ::-webkit-scrollbar-thumb{ background:linear-gradient(180deg, var(--stm-blue), var(--stm-red)); border-radius:999px; } /* ========= KEEP EXISTING ANIMATION CLASS SAFE ========= */ /* Tidak mengubah nama class animasi lama. Kalau sebelumnya sudah ada animation / keyframes, tetap jalan. Hanya kasih transisi halus tambahan di elemen umum. */ .game-item, .provider-slide>main>.slide-item, .sport-match-item, .contact-list>li a, .standard-button-group .btn-primary, .login-panel .login-button, .login-panel .register-button{ transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, border-color .25s ease, color .25s ease; } .game-item:hover, .provider-slide>main>.slide-item:hover, .sport-match-item:hover{ transform:translateY(-2px); }