/* ========================================================= WINSGOAL PRO THEME OVERRIDE Konsep: Professional Red Fire + Gold Glow Ringan, smooth, dan tetap compatible dengan class lama Letakkan di BAGIAN PALING BAWAH file CSS lama ========================================================= */ :root{ --wg-bg: #090909; --wg-bg-soft: #121212; --wg-surface: #171717; --wg-surface-2: #1f1f1f; --wg-border: rgba(255, 196, 84, 0.18); --wg-text: #f5f5f5; --wg-text-soft: #cfcfcf; --wg-text-muted: #9e9e9e; --wg-red: #ff2a2a; --wg-red-deep: #c91212; --wg-red-soft: #ff5b5b; --wg-gold: #ffcc4d; --wg-gold-deep: #ff9f1a; --wg-gold-soft: #ffe7a3; --wg-glow-red: 0 0 18px rgba(255, 42, 42, 0.22); --wg-glow-gold: 0 0 22px rgba(255, 204, 77, 0.22); --wg-radius-sm: 10px; --wg-radius-md: 14px; --wg-radius-lg: 18px; --wg-tr-fast: .22s ease; --wg-tr-smooth: .32s ease; } /* ========== BASE ========== */ body{ background: radial-gradient(circle at top right, rgba(255, 50, 50, 0.06), transparent 30%), radial-gradient(circle at top left, rgba(255, 184, 61, 0.05), transparent 24%), linear-gradient(180deg, #080808 0%, #101010 100%); color: var(--wg-text-soft); } p, body, .contact-us-list li p, .site-info .site-info-description p, .provider-container, .standard-form-content{ color: var(--wg-text-soft); } h1,h2,h3,h4,h5,h6, .nav-tabs>li>a, .profile-container .section-heading, .standard-section-title{ color: var(--wg-text); } a{ color: var(--wg-gold); transition: color var(--wg-tr-fast), opacity var(--wg-tr-fast); } a:hover, a:focus{ color: var(--wg-gold-soft); text-decoration: none; } /* ========== HEADER / NAV ========== */ .topbar-container, .site-header, .top-menu .game-list, .topbar-left-section .language-selector, .user-info .dropdown-menu, .messaging-side-menu, .info-center, .standard-form-title{ background: linear-gradient(180deg, rgba(34,34,34,.98), rgba(14,14,14,.98)); border-color: rgba(255, 204, 77, 0.12); } .site-header{ border-bottom: 1px solid rgba(255, 204, 77, 0.18); box-shadow: 0 6px 24px rgba(0,0,0,.28); } .top-menu>li, .topbar-left-section .topbar-item a, .footer-links>li>a{ color: var(--wg-text); } .top-menu>li:hover, .top-menu>li[data-active="true"], .topbar-left-section .topbar-item a:hover, .footer-links>li>a:hover{ color: var(--wg-gold); } /* ========== PANELS / CONTAINERS ========== */ .modal-content, .standard-form-content, .info-center-content, .claim-container, .promotion-list, .promotion-item-details, .popular-games .tab-pane, .slots-games-container, .casino-games-container, .race-games-container, .arcade-games-container, .crash-game-games-container, .provider-page .large-game-list-container, .provider-info, .white-panel.emailbox .panel, .notification-popup-body .notification-list .notification-item, .notification-list .notification-item, .game-list, .large-game-list-container{ background: linear-gradient(180deg, rgba(24,24,24,.98), rgba(11,11,11,.98)); border: 1px solid rgba(255, 204, 77, 0.10); box-shadow: 0 10px 30px rgba(0,0,0,.18); border-radius: var(--wg-radius-md); } /* ========== BUTTON SYSTEM ========== */ .play-now, .standard-button-group .btn-primary, .modal-footer .btn-primary, .bonus-slider-modal .activation-button, .claim-item .claim-button, .claim-item .activation-button, .claim-item .cancellation-button, .claim-item .expiration-button, .standard-reporting-control-group .btn-primary, .promotion-item .click-for-get-promo-button, .promotion-item-details .click-for-get-promo-button, .standard-secondary-button, .loyalty-reward-container .loyalty-reward-button, .notification-popup-body .notification-footer, .request-otp-button, .deposit-container .reveal-bank-account-button, .messaging-side-menu .support-ticket>a{ background: linear-gradient(135deg, var(--wg-red) 0%, var(--wg-red-deep) 55%, #8f0e0e 100%); color: #fff; border: 1px solid rgba(255, 204, 77, 0.28); box-shadow: var(--wg-glow-red); border-radius: 12px; transition: transform var(--wg-tr-fast), box-shadow var(--wg-tr-fast), filter var(--wg-tr-fast), background var(--wg-tr-fast); } .play-now:hover, .standard-button-group .btn-primary:hover, .modal-footer .btn-primary:hover, .bonus-slider-modal .activation-button:hover, .claim-item .claim-button:hover, .claim-item .activation-button:hover, .claim-item .cancellation-button:hover, .claim-item .expiration-button:hover, .standard-reporting-control-group .btn-primary:hover, .promotion-item .click-for-get-promo-button:hover, .promotion-item-details .click-for-get-promo-button:hover, .standard-secondary-button:hover, .loyalty-reward-container .loyalty-reward-button:hover, .notification-popup-body .notification-footer:hover, .request-otp-button:hover, .deposit-container .reveal-bank-account-button:hover, .messaging-side-menu .support-ticket>a:hover{ background: linear-gradient(135deg, #ff4343 0%, #e11c1c 55%, #a31212 100%); color: #fff; transform: translateY(-2px); box-shadow: 0 0 0 rgba(0,0,0,0), 0 10px 24px rgba(255, 42, 42, 0.22); } /* secondary / ghost buttons */ .free-play, .modal-btn, .modal-btn.blank:hover, .modal-footer .btn-secondary, .simple-modal .btn-secondary{ background: linear-gradient(180deg, #252525, #161616); color: var(--wg-gold-soft); border: 1px solid rgba(255, 204, 77, 0.20); border-radius: 12px; transition: all var(--wg-tr-fast); } .free-play:hover, .modal-btn:hover, .modal-footer .btn-secondary:hover, .simple-modal .btn-secondary:hover{ color: #fff; border-color: rgba(255, 204, 77, 0.40); box-shadow: var(--wg-glow-gold); transform: translateY(-1px); } /* ========== HIGHLIGHT / TITLE / ACCENT ========== */ .announcement-container, .lottery-result-container, .lottery-result-container .lottery-result-title, .claim-item-type>div, .claim-item-type .expiration-countdown [data-section], .home-game-list-container .container-title span, .popular-game-title-container .container-title span, .notification-list .notification-item .notification-header .notification-label, .standard-section-title:before, .home-game-list-container .container-title span:after, .popular-game-title-container .container-title span:after{ background: linear-gradient(135deg, var(--wg-red) 0%, #ff6a00 100%); color: #fff; } .standard-form-note span, .standard-form-note strong, .claim-info-modal h4, .standard-content-info h2, .provider-info h5, .game-provider-desc, .game-provider-desc-arcade, .game-provider-desc-sport, .game-provider-desc-crash-game, .bonus-controls-field .bonus-amount, .withdrawal-container .total-balance, .deposit-container .formatted-balance, .deposit-summary-container .deposit-summary-header .summary-transfer-amount, .withdrawal-summary-container .withdrawal-summary-header .summary-transfer-amount, .winners-ticker ul li .winner-amount, .panel-heading.emailbox-heading .panel-tabs>li.active i, .panel-heading.emailbox-heading .panel-tabs>li.active>a span, .user-info .vendor-balances-container strong, .user-info .vendor-balances-container .vendor-balances-header{ color: var(--wg-gold); } /* ========== TABS ========== */ .nav-tabs>li>a, .popular-games .nav-tabs>li>a, .mobile-app-container .nav-tabs>li>a{ background: linear-gradient(180deg, #1c1c1c, #131313); color: var(--wg-text); border: 1px solid transparent; border-radius: 12px 12px 0 0; transition: all var(--wg-tr-fast); } .nav-tabs>li>a:hover, .popular-games .nav-tabs>li>a:hover, .mobile-app-container .nav-tabs>li>a:hover{ background: linear-gradient(135deg, #2a0d0d, #241b10); color: var(--wg-gold-soft); } .popular-games .nav-tabs>li.active>a, .popular-games .nav-tabs>li.active>a:hover, .popular-games .nav-tabs>li.active>a:focus, .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{ background: linear-gradient(135deg, var(--wg-red) 0%, var(--wg-gold-deep) 100%); color: #fff; box-shadow: inset 0 -2px 0 rgba(255,255,255,.12); } /* ========== FORM ========== */ .form-control, .login-panel input[type=text], .login-panel input[type=password], .header_inputbox, .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: rgba(255,255,255,0.04); border: 1px solid rgba(255, 204, 77, 0.14); color: #fff; border-radius: 12px; transition: border-color var(--wg-tr-fast), box-shadow var(--wg-tr-fast), background var(--wg-tr-fast); } .form-control:focus, .login-panel input[type=text]:focus, .login-panel input[type=password]:focus, .header_inputbox:focus{ border-color: rgba(255, 204, 77, 0.44); box-shadow: 0 0 0 3px rgba(255, 204, 77, 0.10); background: rgba(255,255,255,0.06); outline: none; } /* ========== CARD / GAME ITEM ========== */ .game-list .game-item, .large-game-list li, .provider-slide>main>.slide-item, .promotion-item, .claim-item-container .claim-item, .loyalty-history-list .loyalty-history-item, .referral-features .referral-features-item, .bonus-selection-list .bonus-selection-card{ background: linear-gradient(180deg, rgba(29,29,29,.98), rgba(15,15,15,.98)); border: 1px solid rgba(255, 204, 77, 0.10); border-radius: 16px; transition: transform var(--wg-tr-fast), box-shadow var(--wg-tr-fast), border-color var(--wg-tr-fast); } .game-list .game-item:hover, .large-game-list li:hover, .provider-slide>main>.slide-item:hover, .promotion-item:hover, .claim-item-container .claim-item:hover, .loyalty-history-list .loyalty-history-item:hover, .referral-features .referral-features-item:hover, .bonus-selection-list .bonus-selection-card:hover{ transform: translateY(-3px); border-color: rgba(255, 204, 77, 0.22); box-shadow: 0 12px 28px rgba(0,0,0,.20); } /* ========== LABELS / BADGES ========== */ .game-list .game-name, .game-list .provider-name, .user-info .wallet-container .balance, .home-progressive-jackpot .jackpot-currency, .recommended-for-instant-process span, .user-info .vendor-balances-container .vendor-balances-header{ color: var(--wg-gold-soft); } .login-panel, .user-info, .jackpot-container .progressive-jackpot, .jackpot-winners .jackpot-winner-title, .sports-platform-title, .message-detail-title a{ color: #fff; } /* ========== SPECIAL SECTIONS ========== */ .banner, .sports-matches-container, .jackpot-winners, .home-info-container, .telegram-banner-container, .promotions-container, [data-container-background="background-banner"], [data-container-background="others"], [data-container-background="promotions"]{ background: radial-gradient(circle at top center, rgba(255, 42, 42, 0.05), transparent 30%), linear-gradient(180deg, #0b0b0b 0%, #131313 100%); } /* ========== MODAL ========== */ .modal-header, .bonus-slider-modal .modal-header, .confirmation-message-modal .modal-header{ background: linear-gradient(135deg, #1b0d0d 0%, #24170a 100%); border-bottom: 1px solid rgba(255, 204, 77, 0.14); } .modal-content h4, .download-popup-modal .modal-header .modal-title, .confirmation-message-modal h4.modal-title, .bonus-slider-modal .modal-title{ color: #fff; } /* ========== LIGHTWEIGHT ANIMATIONS ========== */ /* pakai opacity + transform saja supaya ringan */ @keyframes wgGlowPulse{ 0%,100%{ box-shadow: 0 0 0 rgba(255, 42, 42, 0), 0 0 0 rgba(255, 204, 77, 0); } 50%{ box-shadow: 0 0 16px rgba(255, 42, 42, 0.16), 0 0 22px rgba(255, 204, 77, 0.10); } } @keyframes wgFloatSoft{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-2px); } } @keyframes wgShine{ 0%{ opacity: .72; } 50%{ opacity: 1; } 100%{ opacity: .78; } } /* apply animasi hanya ke elemen penting */ .play-now, .standard-button-group .btn-primary, .notification-popup-body .notification-footer, .claim-item .claim-button{ animation: wgGlowPulse 3.2s ease-in-out infinite; } .jackpot-container .progressive-jackpot, .home-progressive-jackpot .inner-container, .promotion-item .click-for-get-promo-button{ animation: wgShine 3.8s ease-in-out infinite; } .game-list .game-item:hover, .large-game-list li:hover, .provider-slide>main>.slide-item:hover{ animation: wgFloatSoft 1.8s ease-in-out infinite; } /* ========== RED/GOLD AURA LOOK ========== */ .home-progressive-jackpot, .lottery-result-container, .claim-item-type>div, .notification-tabs .notification-tab-item[data-active="true"], .register-done-container .buttons-container-register-done .btn, .download-apk .btn{ background: linear-gradient(135deg, #521010 0%, var(--wg-red) 35%, var(--wg-gold-deep) 100%); color: #fff; border-color: rgba(255, 204, 77, 0.20); } .download-apk .btn, .register-done-container .buttons-container-register-done .btn, .notification-tabs .notification-tab-item[data-active="true"]{ box-shadow: var(--wg-glow-red), var(--wg-glow-gold); } /* ========== TABLE / MESSAGE / EMAIL ========== */ .white-panel.emailbox table, .inbox-table-body a, .message-table-body *, .replied-message:not([data-message-type="announcement"]) .replied-message-content *, .notification-list .notification-item .notification-content *{ color: var(--wg-text-soft); } .email-paging{ background: linear-gradient(180deg, #2b2b2b, #1c1c1c); color: #fff; border-radius: 10px; } .email-paging:hover{ background: linear-gradient(135deg, var(--wg-red), var(--wg-gold-deep)); color: #fff; } /* ========== FOOTER ========== */ .site-footer{ background: radial-gradient(circle at center, rgba(255, 42, 42, 0.07), transparent 25%), linear-gradient(90deg, #160c0c 0%, #1a140d 50%, #0c0c0c 100%); } .footer-section-title, .site-info .site-info-title h3{ color: #fff; } .site-description, .site-info .site-info-title p, .site-info .site-info-description h4, .site-info .site-info-description p, .copyright{ color: #b8b8b8; } /* ========== SCROLLBAR SIMPLE ========== */ ::-webkit-scrollbar{ width: 8px; height: 8px; } ::-webkit-scrollbar-track{ background: #101010; } ::-webkit-scrollbar-thumb{ background: linear-gradient(180deg, var(--wg-red), var(--wg-gold-deep)); border-radius: 999px; } /* ========== PERFORMANCE SAFE ========== */ *{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .play-now, .standard-button-group .btn-primary, .game-list .game-item, .large-game-list li, .provider-slide>main>.slide-item{ will-change: transform, opacity; } /* disable heavy animation on users who prefer reduced motion */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation: none !important; transition: none !important; scroll-behavior: auto !important; } }