/* ========================================================== STM88 Red x Black x White Energy Theme Override - Struktur/class tetap - Ringan: animasi pakai transform + opacity saja - Pasang di PALING BAWAH CSS lama ========================================================== */ :root{ --default:transparent; /* Core Palette */ --stm-bg:#070707; --stm-bg-2:#111111; --stm-panel:#ffffff; --stm-panel-soft:#f5f5f5; --stm-text:#111111; --stm-muted:#6f6f6f; --stm-white:#ffffff; --stm-red:#d90429; --stm-red-2:#ff1e3c; --stm-red-dark:#8f0018; --stm-gold:#ffcf5a; --stm-line:rgba(217,4,41,.28); --stm-shadow:0 10px 28px rgba(0,0,0,.18); --stm-glow:0 0 18px rgba(217,4,41,.28); /* Global */ --body-theme-bg:radial-gradient(circle at 75% 12%,rgba(217,4,41,.18),transparent 28%),linear-gradient(135deg,#f7f7f7 0%,#fff 42%,#f0f0f0 100%); --body-color:#151515; --a-color:#d90429; --a-focus-hover-color:#8f0018; --site-header-bg:rgba(255,255,255,.94); --site-header-border:3px solid #d90429; --topbar-cntr-bg:#0b0b0b; --topbar-left-section-item-color:#ffffff; --topbar-left-section-item-a-hover-color:#ff1e3c; /* Announcement */ --announcement-cntr-bg:linear-gradient(90deg,#111 0%,#d90429 50%,#111 100%); --announcement-cntr-color:#fff; --announcement-cntr-section-announcement-bg:#070707; --announcement-cntr-section-announcement-color:#fff; --announcement-cntr-list-li-color:#eeeeee; /* Banner */ --banner-bg:linear-gradient(135deg,#ffffff 0%,#f7f7f7 55%,#ededed 100%); --banner-carousel-indicators-li-border:1px solid #d90429; --banner-carousel-indicators-active-bg:#d90429; --banner-carousel-indicators-active-border:#d90429; --banner-nav-button-bg:rgba(217,4,41,.16); --banner-nav-button-bg-hover:rgba(217,4,41,.32); /* Buttons */ --login-panel-login-btn-bg:linear-gradient(135deg,#151515 0%,#2a2a2a 100%); --login-panel-login-btn-color:#fff; --login-panel-login-btn-border:1px solid rgba(255,255,255,.16); --login-panel-login-btn-hover-bg:linear-gradient(135deg,#000 0%,#d90429 100%); --login-panel-login-btn-hover-color:#fff; --login-panel-register-btn-bg:linear-gradient(135deg,#d90429 0%,#ff1e3c 55%,#8f0018 100%); --login-panel-register-btn-color:#fff; --login-panel-register-btn-border:1px solid rgba(255,255,255,.22); --login-panel-register-btn-hover-bg:linear-gradient(135deg,#ff1e3c 0%,#d90429 100%); --login-panel-register-btn-hover-color:#fff; --login-panel-register-btn-hover-ts:none; --play-now-bg:linear-gradient(135deg,#d90429 0%,#ff1e3c 55%,#8f0018 100%); --play-now-color:#fff; --play-now-bs:0 8px 18px rgba(217,4,41,.28); --play-now-hover-bg:linear-gradient(135deg,#111 0%,#d90429 100%); --play-now-hover-color:#fff; --free-play-bg:linear-gradient(135deg,#ffffff 0%,#f0f0f0 100%); --free-play-color:#111; --free-play-bs:0 6px 16px rgba(0,0,0,.12); --free-play-hover-bg:linear-gradient(135deg,#111 0%,#2b2b2b 100%); --free-play-hover-color:#fff; --std-btn-group-btn-primary-bg:linear-gradient(135deg,#d90429 0%,#ff1e3c 100%); --std-btn-group-btn-primary-color:#fff; --std-btn-group-btn-primary-hover-bg:linear-gradient(135deg,#111 0%,#d90429 100%); --std-btn-group-btn-primary-hover-color:#fff; --modal-btn-bg:linear-gradient(135deg,#d90429 0%,#ff1e3c 100%); --modal-btn-color:#fff; --modal-btn-border:1px solid rgba(217,4,41,.45); --modal-btn-hover-bg:linear-gradient(135deg,#111 0%,#d90429 100%); --modal-btn-hover-color:#fff; /* Menus */ --top-menu-li-a-color:#151515; --top-menu-li-true-hover-bg:linear-gradient(180deg,rgba(217,4,41,.12),rgba(217,4,41,0)); --top-menu-li-true-hover-a-color:#d90429; --top-menu-game-list-btop:4px solid #d90429; --top-menu-game-list-bg:rgba(7,7,7,.92); --top-menu-game-list-bbot:8px solid #d90429; --top-menu-game-list-li-a-background-bg:linear-gradient(90deg,rgba(255,255,255,.04),rgba(217,4,41,.32)); --top-menu-game-list-li-a-background-border:1px solid rgba(255,255,255,.18); /* Cards / Sections */ --std-form-cntr-bg:#f6f6f6; --std-form-title-bg:linear-gradient(135deg,#111 0%,#d90429 100%); --std-form-title-color:#fff; --std-form-content-bg:#fff; --std-form-content-color:#555; --std-section-title-color:#111; --std-section-title-before-bg:#d90429; --home-info-cntr-bg:#ffffff; --home-info-cntr-border:1px solid rgba(217,4,41,.22); --home-info-cntr-tickercntr-bg:#111; /* Game List */ --game-list-title-bg:#111; --game-list-title-div-bg:linear-gradient(135deg,#d90429,#111); --game-list-title-div-color:#fff; --game-list-bg:#f5f5f5; --game-list-game-item-bg:#fff; --game-list-game-name-color:#fff; --game-list-game-name-bg:linear-gradient(135deg,#111 0%,#d90429 100%); --game-list-wrapper-cntr-hover-bg:rgba(0,0,0,.82); --link-cntr-a-game-info-border:2px solid rgba(255,255,255,.9); --link-cntr-a-game-info-color:#fff; --link-cntr-a-game-info-hover-focus-border:#ff1e3c; --link-cntr-a-game-info-hover-focus-color:#ff1e3c; /* Provider / Popular */ --provider-slide-bg:linear-gradient(135deg,#111 0%,#d90429 100%); --provider-slide-i-bg:rgba(255,255,255,.12); --provider-slide-i-hover-bg:rgba(255,255,255,.24); --popular-games-bg:#fff; --popular-games-left-section-title-bg:linear-gradient(135deg,#111,#d90429); --popular-games-left-section-title-color:#fff; --popular-games-scrtabs-tab-cntr-bg:#d90429; --popular-games-nav-tabs-li-a-bg:#111; --popular-games-nav-tabs-li-a-active-bg:#d90429; --popular-games-scroll-arrow-bg:#d90429; --popular-games-tab-pane-bg:#f4f4f4; --popular-games-tab-content-border:1px solid rgba(217,4,41,.25); /* Promotion */ --promotion-cntr-bg:#fff; --promotion-list-bg:#fff; --promotion-item-img-border:1px solid rgba(217,4,41,.28); --promotion-item-btn-cntr-promotion-label-h2-h3-color:#111; --promotion-item-click-for-more-info-btn-color:#d90429; --promotion-item-click-for-get-promo-btn-bg:linear-gradient(135deg,#d90429,#ff1e3c); --promotion-item-click-for-get-promo-btn-color:#fff; --promotion-item-click-for-get-promo-btn-hover-bg:linear-gradient(135deg,#111,#d90429); /* Jackpot */ --home-progressive-jackpot-bg:linear-gradient(135deg,#111 0%,#d90429 55%,#111 100%); --home-progressive-jackpot-color:#fff; --home-progressive-jackpot-outer-cntr-bg:#070707; --home-progressive-jackpot-inner-cntr-bg:#111; --home-progressive-jackpot-border-cntr-border:2px solid rgba(255,255,255,.32); --home-progressive-jackpot-jackpot-cntr-bg:linear-gradient(135deg,#d90429,#111); --home-progressive-jackpot-jackpot-inner-cntr-bg:#070707; --home-progressive-jackpot-jackpot-currency-color:#ffcf5a; --home-progressive-jackpot-jackpot-play-text-color:#ff1e3c; --home-progressive-jackpot-jackpot-play-text-label-color:#fff; /* Footer */ --site-footer-border:2px solid #d90429; --site-footer-bg:linear-gradient(135deg,#101010 0%,#1a1a1a 100%); --footer-links-li-a-color:#e7e7e7; --footer-links-li-a-hover-color:#ff1e3c; --copyright-color:#bdbdbd; --footer-section-title-color:#fff; } /* ===== Lightweight Professional Motion Layer ===== */ body{ background:var(--body-theme-bg) !important; color:var(--body-color) !important; } .site-header, .topbar-cntr, .std-form-cntr, .promotion-item, .game-list-game-item, .provider-slide-main-slide-item, .large-game-list-li, .home-info-cntr{ box-shadow:var(--stm-shadow); border-radius:14px; } .site-header{ backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } .banner, .banner-cntr, .carousel, .home-progressive-jackpot, .std-form-title, .game-list-title, .popular-games-left-section-title{ position:relative; overflow:hidden; } .banner::before, .banner-cntr::before, .home-progressive-jackpot::before, .std-form-title::before, .game-list-title::before{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,.38) 45%,transparent 70%); transform:translateX(-120%); animation:stmShine 5.8s ease-in-out infinite; } .login-panel-login-btn, .login-panel-register-btn, .play-now, .free-play, .std-btn-group .btn-primary, .modal-btn, .promotion-item-click-for-get-promo-btn, .game-info, a[class*="btn"]{ transition:transform .22s ease, box-shadow .22s ease, filter .22s ease, background .22s ease; will-change:transform; } .login-panel-login-btn:hover, .login-panel-register-btn:hover, .play-now:hover, .free-play:hover, .std-btn-group .btn-primary:hover, .modal-btn:hover, .promotion-item-click-for-get-promo-btn:hover, a[class*="btn"]:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(217,4,41,.26); filter:saturate(1.08); } .game-list-game-item, .promotion-item, .provider-slide-main-slide-item, .large-game-list-li{ transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; border:1px solid rgba(217,4,41,.12); } .game-list-game-item:hover, .promotion-item:hover, .provider-slide-main-slide-item:hover, .large-game-list-li:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(0,0,0,.18),0 0 0 1px rgba(217,4,41,.22); } .top-menu li a, .std-side-menu a, .footer-links li a{ transition:color .2s ease, background .2s ease, transform .2s ease; } .top-menu li a:hover, .std-side-menu a:hover, .footer-links li a:hover{ transform:translateX(2px); } .announcement-cntr, .winners-ticker-cntr, .home-info-cntr-tickercntr{ box-shadow:0 6px 18px rgba(0,0,0,.22); } /* aura energy tipis, tidak berat */ .play-now, .login-panel-register-btn, .std-btn-group .btn-primary{ position:relative; overflow:hidden; } .play-now::after, .login-panel-register-btn::after, .std-btn-group .btn-primary::after{ content:""; position:absolute; top:-40%; left:-35%; width:35%; height:180%; background:rgba(255,255,255,.32); transform:rotate(22deg) translateX(-180%); animation:stmBtnFlash 4.2s ease-in-out infinite; pointer-events:none; } @keyframes stmShine{ 0%,72%{transform:translateX(-120%);opacity:0} 78%{opacity:1} 100%{transform:translateX(120%);opacity:0} } @keyframes stmBtnFlash{ 0%,70%{transform:rotate(22deg) translateX(-180%);opacity:0} 78%{opacity:.9} 100%{transform:rotate(22deg) translateX(380%);opacity:0} } /* Mobile optimization */ @media (max-width:768px){ .site-header, .std-form-cntr, .promotion-item, .game-list-game-item, .provider-slide-main-slide-item, .large-game-list-li, .home-info-cntr{ border-radius:10px; } .banner::before, .banner-cntr::before, .home-progressive-jackpot::before, .std-form-title::before, .game-list-title::before{ animation-duration:7.2s; } } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation:none !important; transition:none !important; } }