/* ========================================================= WINSGOAL - NEON PINK / MAGENTA PROFESSIONAL LIGHTWEIGHT THEME Keep existing classes, change visual style only Optimized for performance: minimal animation, no heavy filters ========================================================= */ :root { --bg-main: #0b0713; --bg-panel: #151022; --bg-soft: #1b1430; --bg-card: rgba(255, 255, 255, 0.04); --line: rgba(255, 255, 255, 0.1); --text-main: #f7efff; --text-soft: #cbb8e9; --text-dim: #9c8bb9; --pink: #ff4fd8; --pink-strong: #ff2fcf; --magenta: #d946ef; --violet: #8b5cf6; --rose-dark: #7a1b72; --accent-grad: linear-gradient(135deg, #ff4fd8 0%, #d946ef 52%, #8b5cf6 100%); --accent-grad-soft: linear-gradient(135deg, rgba(255,79,216,.22), rgba(139,92,246,.14)); --button-grad: linear-gradient(135deg, #ff4fd8 0%, #e93bce 45%, #a855f7 100%); --button-grad-hover: linear-gradient(135deg, #ff66df 0%, #f04ad4 45%, #b26aff 100%); --shadow-soft: 0 10px 24px rgba(0, 0, 0, 0.25); --shadow-glow: 0 0 0 1px rgba(255, 79, 216, 0.18), 0 8px 24px rgba(217, 70, 239, 0.18); --shadow-glow-hover: 0 0 0 1px rgba(255, 79, 216, 0.28), 0 12px 28px rgba(217, 70, 239, 0.24); --radius-sm: 10px; --radius-md: 14px; --radius-lg: 18px; --ease: 220ms ease; } /* ------------------------------ Global ------------------------------ */ html, body { background: radial-gradient(circle at top left, rgba(255,79,216,.12), transparent 28%), radial-gradient(circle at top right, rgba(139,92,246,.10), transparent 30%), linear-gradient(180deg, #09060f 0%, #0d0817 100%); color: var(--text-main); } body, .standard-form-container, .standard-form-content, .info-center-content, .promotions-container, .promotion-list, .large-game-list-container, .provider-info, .provider-page .large-game-list-container, .site-content-container, .tab-content-container { color: var(--text-main); } a { color: var(--pink); text-decoration: none; transition: color var(--ease), opacity var(--ease); } a:hover { color: #ffd2f5; } /* lightweight motion */ @keyframes neonFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } } @keyframes neonPulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(255,79,216,.18), 0 8px 24px rgba(217,70,239,.14); } 50% { box-shadow: 0 0 0 1px rgba(255,79,216,.26), 0 10px 26px rgba(217,70,239,.20); } } /* respect reduced motion */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* ------------------------------ Header / Topbar / Navigation ------------------------------ */ .topbar-container, .site-header { background: linear-gradient(180deg, rgba(25,17,42,.96), rgba(12,9,22,.96)); border-bottom: 1px solid rgba(255, 79, 216, 0.18); box-shadow: 0 8px 20px rgba(0,0,0,.22); } .topbar-left-section .topbar-item, .topbar-left-section .topbar-item a, .top-menu > li, .footer-links > li > a, .footer-links ul > li > a, .site-info .site-info-title p, .site-info .site-info-description p, .site-description p, .copyright, .separate p { color: var(--text-soft); } .site-header .top-menu > li[data-active="true"], .site-header .top-menu > li:hover, .topbar-left-section .topbar-item a:hover { color: #fff; background: rgba(255, 79, 216, 0.12); } .top-menu .game-list, .game-list-title, .game-list { background: rgba(15, 10, 27, 0.94); border-color: rgba(255, 79, 216, 0.16); } .game-list .game-item, .portfolio-wrapper, .provider-slide > main > .slide-item, .promotion-item-details, .replied-message[data-message-type="announcement"], .notification-list .notification-item[data-message-type="announcement"], .how-it-works-container .how-it-works-section, .referral-features .referral-features-item, .loyalty-history-list .loyalty-history-item, .daily-reward-container, .notification-popup-body, .unread-announcements-popup, .modal-content { background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03)); border: 1px solid rgba(255, 79, 216, 0.12); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); color: var(--text-main); } /* ------------------------------ Side Menu ------------------------------ */ .standard-side-menu, .standard-side-menu .menu-section, .site-content-container .messaging-side-menu, .loyalty-container .loyalty-menu a { background: linear-gradient(180deg, #130d21 0%, #0e0919 100%); } .standard-side-menu-group-label, .standard-side-menu a, .standard-side-menu .menu-section a, .promotions-container .standard-side-menu li a, .promotions-container .standard-side-menu ul li a { background: transparent; color: var(--text-soft); border-bottom: 1px solid rgba(255,255,255,.05); transition: background-color var(--ease), color var(--ease), transform var(--ease); } .standard-side-menu a:hover, .standard-side-menu a[data-active="true"], .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 { background: rgba(255, 79, 216, 0.14); color: #fff; transform: translateX(3px); } /* ------------------------------ Titles / Cards / Sections ------------------------------ */ .standard-form-title, .standard-form-title.message-detail-title, .info-center-title, .info-center-content-title, .home-game-list-container .container-title span, .popular-game-title-container .container-title span, .popular-games [data-section="left"] .section-title, .lottery-result-container .lottery-result-title { background: var(--accent-grad); color: #fff; border: 0; border-radius: 12px; box-shadow: var(--shadow-glow); } .standard-section-title, .sports-platform-title, .jackpot-winners .jackpot-winner-title, .referral-container .referral-title, .daily-reward-container .reward-title h1, .loyalty-available-rank-up-modal h2, .benefit-container h2, .profile-container .section-heading, .standard-content-info h2 { color: #fff; } .standard-section-title:before { background: var(--pink); } .standard-form-note, .loyalty-container .standard-form-note, .referral-verification-container .standard-form-note, .referral-verification-container .standard-form-note.with-icon, .daily-reward-container .daily-reward-detail-description, .claim-container, .grid-totals { background: rgba(255,255,255,.05); color: var(--text-soft); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-md); } .standard-form-note a, .standard-form-note p a, .standard-form-note span, .standard-form-note strong, .deposit-container .standard-form-note a, .deposit-container .formatted-balance { color: #ff9ef0; } /* ------------------------------ Buttons ------------------------------ */ .play-now, .casino-link-container a.play-now, .standard-form-content .btn-primary, .standard-button-group .btn-primary, .deposit-container .reveal-bank-account-button, .forgot-password-container.btn-primary, .modal-footer .btn-primary, .promotion-item .click-for-get-promo-button, .promotion-item-details .click-for-get-promo-button, .referral-section .referral-code-copy-btn, .request-otp-button, .contact-verification-link, .loyalty-available-rank-up-modal .standard-secondary-button, .daily-reward-container .standard-secondary-button, .mission-container .mission-item[data-status="claimable"] .mission-action-container .action-button, .notification-popup-body .notification-footer, .register-done-container .btn-deposit, .bonus-slider-modal .activation-button, .claim-item .claim-button, .claim-item .activation-button, .claim-item .cancellation-button, .claim-item .expiration-button { background: var(--button-grad); color: #fff; border: 0; border-radius: 12px; box-shadow: var(--shadow-glow); transition: transform var(--ease), box-shadow var(--ease), filter var(--ease), background var(--ease); } .play-now:hover, .casino-link-container a.play-now:hover, .standard-form-content .btn-primary:hover, .standard-button-group .btn-primary:hover, .deposit-container .reveal-bank-account-button:hover, .forgot-password-container.btn-primary:hover, .modal-footer .btn-primary:hover, .promotion-item .click-for-get-promo-button:hover, .promotion-item-details .click-for-get-promo-button:hover, .referral-section .referral-code-copy-btn:hover, .request-otp-button:hover, .contact-verification-link:hover, .loyalty-available-rank-up-modal .standard-secondary-button:hover, .daily-reward-container .standard-secondary-button:hover, .mission-container .mission-item[data-status="claimable"] .mission-action-container .action-button:hover, .register-done-container .btn-deposit: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 { background: var(--button-grad-hover); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-glow-hover); filter: saturate(1.05); } .free-play, .slots-games-container .free-play, .casino-games-container .free-play, .race-games-container .free-play, .login-panel .login-button, .sports-link-container a.play-now, .bonus-slider-modal .close-button, .claim-item .info-button, .modal-footer .btn-secondary { background: linear-gradient(180deg, #2a213d 0%, #1b1429 100%); color: var(--text-main); border: 1px solid rgba(255, 79, 216, 0.14); border-radius: 12px; transition: transform var(--ease), background var(--ease), border-color var(--ease); } .free-play:hover, .slots-games-container .free-play:hover, .casino-games-container .free-play:hover, .race-games-container .free-play:hover, .login-panel .login-button:hover, .sports-link-container a.play-now:hover, .bonus-slider-modal .close-button:hover, .claim-item .info-button:hover, .modal-footer .btn-secondary:hover { background: linear-gradient(180deg, #34254a 0%, #241833 100%); color: #fff; transform: translateY(-1px); border-color: rgba(255, 79, 216, 0.24); } /* ------------------------------ Inputs / Forms ------------------------------ */ .form-control, .login-panel input[type="text"], .login-panel input[type="password"], .deposit-container .deposit-form-group .form-control, .withdrawal-container .withdrawal-form-group .form-control, .deposit-amount-container input[type="text"], .claim-filter-container select.form-control, .lotterypage_box1 .demo select, .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"], .searchbox1, .paging-input { background: rgba(255,255,255,.06); color: #fff; border: 1px solid rgba(255,255,255,.10); border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.03); } .form-control:focus, .login-panel input[type="text"]:focus, .login-panel input[type="password"]:focus, .deposit-container .deposit-form-group .form-control:focus, .withdrawal-container .withdrawal-form-group .form-control:focus, .deposit-amount-container input[type="text"]:focus { outline: none; border-color: rgba(255, 79, 216, 0.55); box-shadow: 0 0 0 3px rgba(255, 79, 216, 0.12); } /* ------------------------------ Login / User / Wallet ------------------------------ */ .login-panel, .user-info, .user-info-loyalty-xp .username-container span, .user-info .vendor-balances-container .vendor-balance-item, .bank-list p, .white-panel.emailbox table, .inbox-table-body a, .notification-list .notification-item .notification-content .notification-header, .notification-list .notification-item .notification-content .notification-title, .notification-list .notification-item .notification-content p { color: var(--text-main); } .user-info .user-main-info, .user-info .dropdown-menu, .user-info .dropdown-menu.vendor-balances-container, .referral-code-container, .bank-info-block, .deposit-summary-container, .withdrawal-summary-container, .standard-content-info, .home-game-list-container .container-content, .popular-game-title-container .container-content { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); } .user-info [data-new-notification="true"]:before { background: var(--pink); color: #fff; } .user-info .wallet-container .balance, .balance span { color: #7dffbd; } .withdrawal-container .formatted-balance, .withdrawal-container .real-withdrawal-amount, .deposit-amount-container .real-deposit-amount, .deposit-amount-container .deposit-amount .currency-suffix, .deposit-amount-container .deposit-amount input.form-control { color: #ff96ea; } /* ------------------------------ Game / Slot / Provider ------------------------------ */ .banner, .gallery_section, .sports-container, [data-container-background="sports"] { background: radial-gradient(circle at center, rgba(255,79,216,.08), transparent 35%), linear-gradient(180deg, #0b0713 0%, #08050e 100%); } .home-info-container, .telegram-banner-container, .popular-games, .home-jackpot-container, .sports-matches-container, .mobile-app-container .logo-container { background: transparent; border-bottom: 1px solid rgba(255, 79, 216, 0.12); } .slots-games-container, .casino-games-container, .race-games-container, .arcade-games-container, .crash-game-games-container, .popular-games .tab-pane { background: linear-gradient(180deg, rgba(16,11,26,.96), rgba(10,7,17,.98)); } .slots-games-container .vendor-name, .casino-games-container .vendor-name, .race-games-container .vendor-name, .arcade-games-container, .crash-game-games-container, .game-list .game-name, .popular-game-list ul li h5, .portfolio-wrapper h5, .home-game-list-container .container-content .game-list .game-item .game-name, .popular-game-title-container .container-content .game-list .game-item .game-name { background: var(--accent-grad); color: #fff; border-radius: 10px; } .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 { color: var(--text-soft); border-radius: 10px; transition: background-color var(--ease), color var(--ease); } .slots-games-container .category-filter-link.active, .casino-games-container .category-filter-link.active, .race-games-container .category-filter-link.active, .arcade-games-container .category-filter-link.active, .crash-game-games-container .category-filter-link.active, .slots-games-container .category-filter-link:hover, .casino-games-container .category-filter-link:hover, .race-games-container .category-filter-link:hover, .arcade-games-container .category-filter-link:hover, .crash-game-games-container .category-filter-link:hover { background: rgba(255, 79, 216, 0.16); color: #fff; } .provider-slide { background: transparent; } .provider-slide > i, .provider-slide > main > .slide-item > a:not(.game-info) { background: rgba(255,255,255,.06); color: #fff; border-radius: 12px; } .provider-slide > i:hover, .provider-slide > main > .slide-item > a:not(.game-info):hover { background: rgba(255,79,216,.18); } /* ------------------------------ Promo / Announcement / Message ------------------------------ */ .announcement-container, .home-info-container .tickercontainer, .announcement-container [data-section="announcements"], .jackpot-winners, .winners-ticker ul, .info-center, .top-tab-container a { background: rgba(255,255,255,.05); color: var(--text-main); border-color: rgba(255,255,255,.08); } .announcement-container, .notification-tabs .notification-tab-item, .top-tab-container a, .standard-form-link-header a, .messaging-side-menu .support-ticket > a { transition: background-color var(--ease), color var(--ease), transform var(--ease); } .notification-tabs .notification-tab-item[data-active="true"], .top-tab-container a[data-active="true"], .top-tab-container a:hover, .standard-form-link-header a[data-active="true"], .standard-form-link-header a:hover, .messaging-side-menu .support-ticket > a, .notification-popup-body .notification-footer { background: var(--accent-grad); color: #fff; } .winners-ticker ul li .winner-info, .hot-match-container, .hot-match-container .live-streaming-link, .sports-matches-container ul li, .bank-info h1, .bank-info h2, .bank-info h4, .bank-info h5 { color: #fff; } .winners-ticker ul li .winner-amount, .deposit-container .bank-info .copy-bank-account-button, .withdrawal-container .bank-info .copy-bank-account-button, .contact-us-list li a, .panel-heading.emailbox_heading .panel-tabs > li.active i, .download-apk-section i { color: #ffb3ef; } /* ------------------------------ Modal ------------------------------ */ .modal-header, .bonus-slider-modal .modal-header, .confirmation-message-modal .modal-header { background: linear-gradient(180deg, rgba(255,79,216,.16), rgba(139,92,246,.10)); border-bottom: 1px solid rgba(255,255,255,.08); } .modal-body p, .download-popup-modal .modal-body span, .verify-whatsapp-popup p, .site-info .site-info-description h4, .provider-container > h5, .provider-container span h5, .contact-us-list li h6 { color: var(--text-soft); } .modal-header .close, .bonus-slider-modal .close, .bonus-slider-modal .modal-dialog .modal-header .close, .promotion-info .modal-header .close, .promotionmodal .modal-header .close { color: #fff; } /* ------------------------------ Tables / Boxes / Info ------------------------------ */ .table-bordered tr th, .deposit-summary-container .deposit-summary-header, .withdrawal-summary-container .withdrawal-summary-header, .standard-content-info table > thead > tr > th { background: rgba(255,79,216,.14); color: #fff; } .standard-content-info, .standard-content-info table { border-color: rgba(255,79,216,.16); } .bank-info, .deposit-container .bank-info, .withdrawal-container .bank-info, .bank-info-block { background: linear-gradient(180deg, #22152d 0%, #180f22 100%); color: #fff; } .bank-info hr, .bank-info-block hr, .deposit-summary-container .deposit-summary-content .deposit-summary-footer, .withdrawal-summary-container .withdrawal-summary-content .withdrawal-summary-footer { border-color: rgba(255,255,255,.10); } /* ------------------------------ Feature Accent / Small Details ------------------------------ */ .claim-item-type > div, .claim-item-type .expiration-countdown [data-section], .standard-profile-bar, .standard-form-content.standard-button-group, .home-progressive-jackpot .jackpot-container, .home-progressive-jackpot .inner-container, .home-progressive-jackpot, .payment-method-selection input[type="radio"]:checked + label, .notification-tabs .notification-tab-item[data-active="true"] { background: var(--accent-grad); color: #fff; } .claim-item-container .claim-item, .claim-item .claim-button, .claim-item .activation-button, .claim-item .cancellation-button, .claim-item .expiration-button, .claim-item .info-button { border-radius: 12px; } .expiration-countdown [data-section], .expiration-countdown [data-section="title"], .claim-item-type .expiration-countdown [data-section]::before { background: rgba(255,255,255,.08); color: #ff9ef0; border-color: rgba(255,255,255,.06); } .progressbar, .bonus-progress .progress, .proggress { background-color: rgba(255,255,255,.08) !important; border-radius: 999px; } .jackpot-container .progressive-jackpot span, .progressive-jackpot .jackpot-currency, .jackpot-container .progressive-jackpot { color: #ff9ef0; } /* ------------------------------ Lightweight animation accents ------------------------------ */ .play-now, .standard-form-title, .slots-games-container .vendor-name, .game-list .game-name, .info-center-title, .home-game-list-container .container-title span, .popular-game-title-container .container-title span { animation: neonPulse 3.6s ease-in-out infinite; } .game-item:hover, .provider-slide > main > .slide-item:hover, .promotion-item:hover, .promotion-item-details:hover, .claim-item-container .claim-item:hover, .referral-features .referral-features-item:hover { transform: translateY(-2px); transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease); box-shadow: var(--shadow-glow-hover); border-color: rgba(255, 79, 216, 0.2); } .user-info .user-main-info, .standard-profile-bar, .login-panel .register-button, .login-panel .login-button { animation: neonFloat 4s ease-in-out infinite; } /* ------------------------------ Footer ------------------------------ */ .site-footer, .provider-container span, .site-footer, [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: #0d0817; } .site-footer { border-top: 1px solid rgba(255,79,216,.14); } .footer-section-title, .site-info .site-info-title h3 { color: #fff; }