/* STM88 Professional Neon Aura Theme Override Tujuan: - Tetap pakai class & struktur lama - Lebih profesional, lebih hidup, tidak terlalu ramai - Ringan, animasi halus, tidak bikin lag - Load file ini setelah CSS utama */ :root{ --stm-bg:#070b16; --stm-bg-2:#0c1224; --stm-panel:#11182d; --stm-panel-2:#161f38; --stm-panel-3:#1b2442; --stm-navy:#0f1b3d; --stm-violet:#6d3df5; --stm-violet-soft:rgba(109,61,245,.16); --stm-pink:#ff4fd8; --stm-pink-soft:rgba(255,79,216,.14); --stm-yellow:#ffd84d; --stm-yellow-2:#ffef9b; --stm-cyan:#57d6ff; --stm-cyan-soft:rgba(87,214,255,.14); --stm-text:#eef3ff; --stm-text-soft:#c6d0ea; --stm-muted:#8e9ab8; --stm-border:rgba(255,255,255,.08); --stm-shadow:0 10px 26px rgba(0,0,0,.28); --stm-shadow-soft:0 8px 18px rgba(0,0,0,.20); --stm-glow-violet:0 0 0 1px rgba(109,61,245,.18), 0 0 18px rgba(109,61,245,.14); --stm-glow-pink:0 0 0 1px rgba(255,79,216,.18), 0 0 18px rgba(255,79,216,.14); --stm-glow-yellow:0 0 0 1px rgba(255,216,77,.22), 0 0 18px rgba(255,216,77,.16); --stm-glow-cyan:0 0 0 1px rgba(87,214,255,.18), 0 0 18px rgba(87,214,255,.14); --stm-radius:16px; --stm-radius-sm:12px; --stm-speed:.24s; } /* ========================= GLOBAL ========================= */ html,body{ background: radial-gradient(circle at 15% 0%, rgba(109,61,245,.16), transparent 30%), radial-gradient(circle at 85% 10%, rgba(255,79,216,.10), transparent 28%), radial-gradient(circle at 50% 100%, rgba(255,216,77,.06), transparent 32%), linear-gradient(180deg, #09101d 0%, #070b16 52%, #050812 100%); color:var(--stm-text); } body,p,.message-table,.copyright,.site-description, .site-info .site-info-description p, .site-info .site-info-description ul li, .site-info-container p,.bank-list p, .contact-us-list li h6,.contact-us-list li a, .footer-links>li>a,.footer-section-title, .site-info .site-info-title p{ color:var(--stm-muted); } h1,h2,h3,h4,h5,h6, .sports-platform-title,.message-detail-title a,.user-info,.login-panel, .match-info-container .match-teams, .winners-ticker ul li .winner-info, .mobile-app-container .text-container, .register-done-container>h2, .inbox-table-header>div:nth-child(3)>ul>li>a, .announcement-container .announcement-list li{ color:var(--stm-text); } a, .top-menu>li[data-active="true"]>a, .top-menu>li>a:hover, .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[data-active="true"], .footer-links>li>a:hover, .panel-heading.emailbox-heading .panel-tabs>li.active>a span, .panel-heading.emailbox-heading .panel-tabs>li.active i, .deposit-container .formatted-balance, .deposit-container .standard-form-note a, .contact-us-list li a, .user-info .wallet-container .balance, .user-info .vendor-balances-container strong, .user-info .vendor-balances-container .vendor-balances-header, .game-provider-desc,.provider-info h5,.provider-info p{ color:var(--stm-yellow); } a{ transition: color var(--stm-speed) ease, opacity var(--stm-speed) ease, text-shadow var(--stm-speed) ease; } a:hover{ color:var(--stm-yellow-2); text-shadow:0 0 8px rgba(255,216,77,.18); } /* ========================= PANELS / CONTAINERS ========================= */ .panel, .standard-form-container, .standard-form-content, .info-center-content, .info-center, .sports-container, .sports-matches-container, .lottery-result-container, .claim-container, .modal-content, .banner, .game-list, .game-list .game-item, .large-game-list-container, .promotions-container, .promotion-list, .tab-content-container, .provider-page .large-game-list-container, .provider-info, .standard-profile-bar, .messaging-side-menu, .topbar-container, .site-header, .site-footer, .standard-side-menu, .standard-side-menu .menu-section, .standard-side-menu .player-account-section, .bank-info, .deposit-container .bank-info, .withdrawal-container .bank-info, .user-info .dropdown-menu, .user-info .dropdown-menu.vendor-balances-container, .pending-transactions-container .pending-transactions-item, .pending-transactions-container .pending-transactions-item [data-payment-gateway], .modal-body .pending-transaction-details-container, .modal-body .pending-transaction-summary-container, .claim-item, .bonus-slider-modal .bonus-form, .popover, .profile-container .section-heading, .tickercontainer, .announcement-container, .home-info-container, .telegram-banner-container, .top-tab-container a, .search-header, .site-info .site-info-title, .mobile-app-container .logo-container, .mobile-app-container .tab-pane, .replied-message[data-creator="true"] .replied-message-content{ background: linear-gradient(180deg, rgba(22,31,56,.96) 0%, rgba(11,18,35,.98) 100%) !important; border:1px solid var(--stm-border) !important; box-shadow:var(--stm-shadow); backdrop-filter:blur(4px); } /* ========================= TITLE BAR / ACCENT LINE ========================= */ .standard-form-title, .info-center-title, .home-game-list-container .container-title span, .popular-game-title-container .container-title span, .lottery-result-container .lottery-result-title, .panel-primary>.panel-heading.emailbox-heading, .notification-popup-body .notification-footer, .top-tab-container, .user-info .vendor-balances-container .vendor-balances-header{ background: linear-gradient(90deg, rgba(15,27,61,.98) 0%, rgba(109,61,245,.32) 44%, rgba(255,79,216,.20) 72%, rgba(255,216,77,.14) 100%) !important; border-color:rgba(109,61,245,.24) !important; } /* ========================= BUTTONS ========================= */ .standard-button-group .btn-primary, .messaging-side-menu .support-ticket>a, .deposit-container .reveal-bank-account-button, .modal-footer .btn-primary, .standard-reporting-control-group .btn-primary, .play-now, .login-panel .register-button, .promotion-item .click-for-get-promo-button, [data-payment-gateway] .download-qr-button, .download-apk .btn, .claim-item .claim-button, .claim-item .activation-button, .claim-item .cancellation-button, .claim-item .expiration-button, .bonus-slider-modal .activation-button, .modal-btn, .deposit-container .copy-bank-account-button, .copy-input-button-field .copy-input-button, .withdrawal-container .copy-bank-account-button{ background: linear-gradient(135deg, #fff1a8 0%, var(--stm-yellow) 35%, #ffcb2f 68%, #f0a400 100%) !important; color:#1a1730 !important; border:1px solid rgba(255,216,77,.30) !important; border-radius:12px !important; box-shadow: 0 8px 20px rgba(255,216,77,.16), inset 0 1px 0 rgba(255,255,255,.28); transition: transform var(--stm-speed) ease, box-shadow var(--stm-speed) ease, filter var(--stm-speed) ease; font-weight:700; } .standard-button-group .btn-primary:hover, .messaging-side-menu .support-ticket>a:hover, .deposit-container .reveal-bank-account-button:hover, .modal-footer .btn-primary:hover, .standard-reporting-control-group .btn-primary:hover, .play-now:hover, .login-panel .register-button:hover, .promotion-item .click-for-get-promo-button:hover, [data-payment-gateway] .download-qr-button: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, .bonus-slider-modal .activation-button:hover, .modal-btn:hover, .deposit-container .copy-bank-account-button:hover, .copy-input-button-field .copy-input-button:hover, .withdrawal-container .copy-bank-account-button:hover{ transform:translateY(-1px); filter:saturate(1.06) brightness(1.02); box-shadow: 0 12px 24px rgba(255,216,77,.20), 0 0 16px rgba(255,216,77,.14); } .free-play, .login-panel .login-button, .modal-btn.blank, .modal-footer .btn-secondary, .simple-modal .btn-secondary{ background: linear-gradient(180deg, rgba(38,46,73,.96) 0%, rgba(23,29,48,.98) 100%) !important; color:var(--stm-text-soft) !important; border:1px solid rgba(255,255,255,.08) !important; border-radius:12px !important; transition:all var(--stm-speed) ease; } .free-play:hover, .login-panel .login-button:hover, .modal-btn.blank:hover, .modal-footer .btn-secondary:hover, .simple-modal .btn-secondary:hover{ color:#fff !important; border-color:rgba(255,79,216,.24) !important; box-shadow:var(--stm-glow-pink); } /* ========================= INPUTS ========================= */ .form-control, .form-control[readonly], .form-control[disabled], .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], .arcade-games-container .filter-section input[type=text], .crash-game-games-container .filter-section input[type=text], .paging-input, .claim-filter-container select.form-control, .otp-input{ background: linear-gradient(180deg, rgba(10,15,28,.96) 0%, rgba(18,25,45,.96) 100%) !important; color:var(--stm-text) !important; border:1px solid rgba(109,61,245,.20) !important; border-radius:10px !important; box-shadow:none !important; transition: border-color var(--stm-speed) ease, box-shadow var(--stm-speed) ease, background var(--stm-speed) ease; } .form-control:focus, .mobile-app-container .mobile-app-select:focus, .claim-filter-container select.form-control:focus, .otp-input:focus{ border-color:rgba(255,79,216,.34) !important; box-shadow:var(--stm-glow-pink) !important; outline:none; } .form-control.input-validation-error, .form-control.lowercase.input-validation-error{ border-color:rgba(255,79,216,.34) !important; box-shadow:var(--stm-glow-pink) !important; color:#ffe6f8 !important; } /* ========================= MENUS / TAB ========================= */ .top-menu .game-list, .standard-side-menu-group-label, .standard-side-menu a, .promotions-container .standard-side-menu li a, .top-tab-container a, .popular-games .nav-tabs>li>a, .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, .panel-heading.emailbox-heading .panel-tabs>li>a{ background: linear-gradient(180deg, rgba(14,19,35,.98) 0%, rgba(9,13,24,.98) 100%) !important; color:var(--stm-text-soft) !important; border-color:rgba(255,255,255,.06) !important; } .top-menu>li>a, .standard-side-menu a, .promotions-container .standard-side-menu li a, .panel-heading.emailbox-heading .panel-tabs>li>a, .top-tab-container a, .popular-games .nav-tabs>li>a{ transition: background var(--stm-speed) ease, color var(--stm-speed) ease, box-shadow var(--stm-speed) ease, transform var(--stm-speed) ease; } .top-menu>li>a:hover, .top-menu>li[data-active="true"]>a, .standard-side-menu a[data-active="true"], .standard-side-menu a:hover, .promotions-container .standard-side-menu a[data-active="true"], .promotions-container .standard-side-menu a:hover, .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, .top-tab-container a[data-active="true"], .top-tab-container a:hover, .popular-games .nav-tabs>li.active>a, .popular-games .nav-tabs>li>a:hover{ color:#fff !important; background: linear-gradient(90deg, rgba(15,27,61,.96) 0%, rgba(109,61,245,.22) 52%, rgba(255,79,216,.16) 100%) !important; box-shadow: inset 0 0 0 1px rgba(255,79,216,.10), 0 0 14px rgba(109,61,245,.10); } .panel-heading.emailbox-heading .panel-tabs>li.active>a{ border-bottom:3px solid var(--stm-yellow) !important; } /* ========================= USER / LOGIN CARD ========================= */ .login-panel, .user-info .user-main-info, .standard-profile-bar, .referral-box-container .referral-box, .bank-info-block, .pending-transactions-container .pending-transactions-item .pending-transaction-remarks-container{ border:1px solid rgba(109,61,245,.14); border-radius:var(--stm-radius); background: linear-gradient(180deg, rgba(17,24,45,.96) 0%, rgba(10,15,28,.98) 100%) !important; } .user-info [data-new-notification="true"]:before{ background: linear-gradient(180deg, #ff82e6 0%, var(--stm-pink) 100%) !important; box-shadow:0 0 0 3px rgba(255,79,216,.14); } /* ========================= CARD / GAME BLOCK ========================= */ .sport-match-item, .game-list .game-item, .provider-slide>main>.slide-item, .slots-games-container .category-filter-link, .casino-games-container .category-filter-link, .race-games-container .category-filter-link, .arcade-games-container .category-filter-link, .crash-game-games-container .category-filter-link, .game-list .game-name, .slots-games-container .game-name, .casino-games-container .game-name, .race-games-container .game-name, .claim-item-type>div, .home-game-list-container .container-content, .popular-game-title-container .container-content{ border-radius:12px; } .sport-match-item, .game-list .game-item, .provider-slide>main>.slide-item, .claim-item, .pending-transactions-container .pending-transactions-item{ transition: transform var(--stm-speed) ease, box-shadow var(--stm-speed) ease, border-color var(--stm-speed) ease; } .sport-match-item:hover, .game-list .game-item:hover, .provider-slide>main>.slide-item:hover, .claim-item:hover, .pending-transactions-container .pending-transactions-item:hover{ transform:translateY(-2px); box-shadow: 0 12px 24px rgba(0,0,0,.24), 0 0 14px rgba(109,61,245,.10); border-color:rgba(255,79,216,.14); } .game-list .game-name, .slots-games-container .game-name, .casino-games-container .game-name, .race-games-container .game-name, .home-game-list-container .container-title span, .popular-game-title-container .container-title span, .claim-item-type>div{ background: linear-gradient(90deg, rgba(109,61,245,.94) 0%, rgba(255,79,216,.92) 50%, rgba(255,216,77,.96) 100%) !important; color:#130f24 !important; font-weight:700; letter-spacing:.3px; } /* ========================= LIGHTWEIGHT ANIMATION ========================= */ @keyframes stmAuraFloat{ 0%,100%{ box-shadow: 0 0 0 1px rgba(255,216,77,.12), 0 0 10px rgba(109,61,245,.08); } 50%{ box-shadow: 0 0 0 1px rgba(255,79,216,.14), 0 0 14px rgba(255,79,216,.10); } } @keyframes stmGradientFlow{ 0%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } 100%{ background-position:0% 50%; } } .standard-button-group .btn-primary, .messaging-side-menu .support-ticket>a, .deposit-container .reveal-bank-account-button, .login-panel .register-button, .play-now, .claim-item .claim-button, .claim-item .activation-button, .claim-item .cancellation-button, .claim-item .expiration-button{ animation:stmAuraFloat 4s ease-in-out infinite; } .panel-primary>.panel-heading.emailbox-heading, .standard-form-title, .info-center-title, .top-tab-container, .home-game-list-container .container-title span, .popular-game-title-container .container-title span{ background-size:200% 200% !important; animation:stmGradientFlow 9s linear infinite; } /* ========================= TICKER / INFO STRIP ========================= */ .tickercontainer, .jackpot-winners .winners-ticker-container, .announcement-container>[data-section="announcements"]{ border:1px solid rgba(109,61,245,.14); position:relative; overflow:hidden; } .tickercontainer::before, .jackpot-winners .winners-ticker-container::before, .announcement-container>[data-section="announcements"]::before{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(255,79,216,.05), transparent); pointer-events:none; } /* ========================= SCROLLBAR ========================= */ *::-webkit-scrollbar{ width:10px; height:10px; } *::-webkit-scrollbar-track{ background:#0a1020; } *::-webkit-scrollbar-thumb{ background: linear-gradient(180deg, rgba(109,61,245,.95) 0%, rgba(255,79,216,.68) 60%, rgba(255,216,77,.62) 100%); border-radius:999px; } *::-webkit-scrollbar-thumb:hover{ background: linear-gradient(180deg, rgba(255,79,216,.88) 0%, rgba(109,61,245,.92) 50%, rgba(255,216,77,.74) 100%); } /* ========================= REDUCED MOTION ========================= */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } }