/* ========================================================= WINSGOAL PROFESSIONAL ELECTRIC BLUE THEME Lightweight override - keep existing HTML/class structure Place this file AFTER the original CSS ========================================================= */ :root{ --bg-main: #050913; --bg-soft: #0a1220; --bg-card: #0d1626; --bg-panel: #111c2e; --text-main: #f4fbff; --text-soft: #b7c8da; --text-dim: #7890a8; --blue-main: #28c7ff; --blue-soft: #73dcff; --blue-deep: #1298ff; --blue-glow: rgba(40,199,255,.18); --blue-line: rgba(40,199,255,.16); --accent-cyan: #86f3ff; --accent-white: #ffffff; --accent-gold: #ffd76a; --line-soft: rgba(255,255,255,.06); --line-strong: rgba(40,199,255,.22); --shadow-soft: 0 8px 24px rgba(0,0,0,.24); --shadow-card: 0 10px 26px rgba(0,0,0,.28); --shadow-neon: 0 0 0 1px rgba(40,199,255,.10), 0 10px 30px rgba(40,199,255,.10); --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --grad-main: linear-gradient(135deg, #10243e 0%, #1da7ff 52%, #8de7ff 100%); --grad-soft: linear-gradient(180deg, rgba(40,199,255,.10) 0%, rgba(40,199,255,.03) 100%); --grad-dark: linear-gradient(180deg, #101a2a 0%, #09111d 100%); --grad-header: linear-gradient(90deg, #08111d 0%, #102039 50%, #132b48 100%); --grad-panel: linear-gradient(180deg, rgba(255,255,255,.02) 0%, rgba(255,255,255,0) 100%); } /* Base */ body, .standard-form-container, .promotions-container, .slots-games-container, .casino-games-container, .race-games-container, .arcade-games-container, .crash-game-games-container, .sports-container, .game-list, .promotion-list, .info-center-content, .white-panel.emailbox .panel, .modal-content{ background: var(--bg-main); color: var(--text-soft); } body, p, .contact-us-list li p, .standard-form-content, .deposit-amount-range, .register-page-reminder{ color: var(--text-soft); } h1,h2,h3,h4,h5,h6, .nav-tabs>li>a, .profile-container .section-heading, .standard-section-title, .standard-form-title, .footer-section-title, .sports-platform-title, .panel-heading.emailbox-heading .panel-tabs>li>a, .message-detail-title a{ color: var(--text-main); } a{ color: var(--blue-main); transition: color .2s ease, text-shadow .2s ease, opacity .2s ease; } a:hover, a:focus{ color: var(--blue-soft); text-decoration: none; text-shadow: 0 0 8px rgba(40,199,255,.14); } /* Smooth transitions */ .top-menu>li, .nav-tabs>li>a, .btn, .standard-button-group .btn, .play-now, .free-play, .login-panel .login-button, .login-panel .register-button, .claim-item .claim-button, .claim-item .activation-button, .claim-item .cancellation-button, .claim-item .expiration-button, .promotion-item .click-for-get-promo-button, .promotion-item-details .click-for-get-promo-button, .standard-side-menu a, .user-info .dropdown-menu>li>a, .mobile-app-container .mobile-app-select a, .contact-list>li a, .topbar-left-section .topbar-item a, .game-list .game-item, .provider-slide>main>.slide-item, .sport-match-item, .notification-list .notification-item{ transition: background-color .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease, transform .22s ease, opacity .22s ease; } /* Header / Topbar */ .topbar-container, .site-header, .mobile-app-container .logo-container, .info-center, .messaging-side-menu{ background: var(--grad-header); border-bottom: 1px solid var(--line-strong); box-shadow: var(--shadow-soft); position: relative; } .topbar-container::after, .site-header::after{ content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(40,199,255,.35), transparent); } .topbar-left-section .topbar-item, .top-menu>li, .menu-slide>i{ color: #d3e2f2; } .top-menu>li:hover, .top-menu>li[data-active="true"], .topbar-left-section .topbar-item a:hover{ color: #fff; text-shadow: 0 0 12px rgba(40,199,255,.18); } /* Panels / Cards */ .user-info .user-main-info, .standard-form-content, .promotion-info, .claim-item-container .claim-item, .provider-info, .large-game-list-container, .pending-transactions-container .pending-transactions-item, .loyalty-container .standard-form-content, .loyalty-level-benefits-container, .loyalty-reward-container .flash-sale-container .item, .loyalty-reward-container .lucky-draw-container .item, .loyalty-reward-container .other-product-container .item, .game-list .game-item, .sport-match-item, .notification-popup-body .notification-list .notification-item, .notification-list .notification-item{ background: var(--grad-dark); border: 1px solid var(--line-soft); border-radius: var(--radius-md); box-shadow: var(--shadow-card); position: relative; overflow: hidden; } .user-info .user-main-info::before, .standard-form-content::before, .claim-item-container .claim-item::before, .game-list .game-item::before, .sport-match-item::before, .notification-list .notification-item::before{ content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 22%), linear-gradient(135deg, rgba(40,199,255,.05), transparent 46%); } /* Titles */ .standard-form-title, .info-center-title, .panel-primary>.panel-heading.emailbox-heading, .popular-games [data-section="left"] .section-title, .home-game-list-container .container-title span, .popular-game-title-container .container-title span, .lottery-result-container .lottery-result-title{ background: linear-gradient(135deg, #143154 0%, #28c7ff 62%, #9beaff 100%); color: #07111d; border: 0; letter-spacing: .3px; box-shadow: 0 6px 18px rgba(40,199,255,.16); } /* Buttons */ .play-now, .login-panel .login-button, .standard-button-group .btn-primary, .claim-item .claim-button, .claim-item .activation-button, .claim-item .cancellation-button, .claim-item .expiration-button, .promotion-item .click-for-get-promo-button, .promotion-item-details .click-for-get-promo-button, .standard-reporting-control-group .btn-primary, .notification-popup-body .notification-footer, .download-apk .btn, .loyalty-reward-container .loyalty-reward-button, .daily-reward-container .standard-secondary-button, .mission-container .mission-item[data-status="claimable"] .mission-action-container .action-button{ background: var(--grad-main); color: #07111b; border: 1px solid rgba(255,255,255,.06); box-shadow: 0 8px 20px rgba(40,199,255,.14); font-weight: 700; } .play-now:hover, .login-panel .login-button:hover, .standard-button-group .btn-primary: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, .promotion-item-details .click-for-get-promo-button:hover, .standard-reporting-control-group .btn-primary:hover, .download-apk .btn:hover, .daily-reward-container .standard-secondary-button:hover, .mission-container .mission-item[data-status="claimable"] .mission-action-container .action-button:hover{ color: #06101a; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(40,199,255,.20); filter: saturate(1.03); } .free-play, .modal-btn, .modal-btn.blank:hover, .modal-footer .btn-secondary, .simple-modal .btn-secondary{ background: #172334; color: #dfe9f3; border: 1px solid rgba(255,255,255,.05); } .free-play:hover, .modal-btn:hover, .modal-footer .btn-secondary:hover, .simple-modal .btn-secondary:hover{ background: #1c2a3d; color: #fff; } /* Inputs */ .form-control, .mobile-app-container .mobile-app-select, .login-panel input[type=text], .login-panel input[type=password], .header_inputbox, .deposit-amount-container input[type="text"], .contact-verification-popup .contact-verification-section input, .otp-input{ background: #0c1522; color: var(--text-main); border: 1px solid rgba(255,255,255,.07); border-radius: 10px; box-shadow: inset 0 1px 0 rgba(255,255,255,.02); } .form-control:focus, .login-panel input[type=text]:focus, .login-panel input[type=password]:focus, .header_inputbox:focus, .deposit-amount-container input[type="text"]:focus{ border-color: rgba(40,199,255,.42); box-shadow: 0 0 0 3px rgba(40,199,255,.10); outline: none; } /* Tabs */ .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.active>a, .panel-heading.emailbox-heading .panel-tabs>li.active>a:hover, .panel-heading.emailbox-heading .panel-tabs>li.active>a:focus{ border-radius: 10px 10px 0 0; } .nav-tabs>li>a:hover, .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.active>a, .panel-heading.emailbox-heading .panel-tabs>li.active>a:hover, .panel-heading.emailbox-heading .panel-tabs>li.active>a:focus{ background: linear-gradient(135deg, #16365c 0%, #28c7ff 100%); color: #07111d; } /* Side menu */ .standard-side-menu-group-label, .standard-side-menu a, .promotions-container .standard-side-menu li a{ background: #0f1827; color: #e9f4ff; border-bottom: 1px solid rgba(255,255,255,.04); } .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, .messaging-side-menu [data-active="true"] a, .messaging-side-menu a:hover{ background: linear-gradient(90deg, rgba(40,199,255,.12), rgba(134,243,255,.05)); color: #fff; border-color: rgba(40,199,255,.24); box-shadow: inset 3px 0 0 var(--blue-main); } /* Tables / messaging */ .inbox-table-body a, .white-panel.emailbox table, .message-table-body *, .replied-message:not([data-message-type="announcement"]) .replied-message-content *, .notification-list .notification-item .notification-content p, .notification-list .notification-item .notification-header .notification-title{ color: var(--text-main); } .inbox-table-header div, .inbox-table-body div, .replied-message, .notification-list .notification-item, .notification-popup-body .notification-list .notification-item{ border-color: rgba(255,255,255,.07); } /* Notification */ .notification-list .notification-item[data-seen="false"], .notification-popup-body .notification-list .notification-item[data-seen="false"]{ background: linear-gradient(180deg, rgba(40,199,255,.10), rgba(40,199,255,.03)); border-color: rgba(40,199,255,.24); } .notification-list .notification-item .notification-header .notification-label, .notification-list .notification-item .notification-play-button{ background: var(--grad-main); color: #07111d; } /* Banner / highlight */ .banner, .home-info-container, .telegram-banner-container, .top-menu .game-list, .lottery-result-container, .home-progressive-jackpot .jackpot-container{ background: linear-gradient(180deg, #07101b 0%, #0b1422 100%); } .home-info-container, .telegram-banner-container{ border: 1px solid rgba(40,199,255,.16); box-shadow: var(--shadow-neon); position: relative; overflow: hidden; } .home-info-container::after, .telegram-banner-container::after{ content: ""; position: absolute; inset: auto -10% 0 -10%; height: 42%; background: radial-gradient(circle at center, rgba(40,199,255,.08), transparent 72%); pointer-events: none; } /* Game cards */ .game-list .game-item, .provider-slide>main>.slide-item, .large-game-list li, .large-game-list .game-provider-img{ overflow: hidden; position: relative; } .game-list .game-name, .game-list .provider-name, .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: rgba(40,199,255,.08); color: #f5fbff; } .game-list .wrapper-container:hover, .provider-slide>main>.slide-item>a:not(.game-info):hover{ background: rgba(40,199,255,.04); } /* Modal */ .modal-content, .bonus-slider-modal .modal-content, .loyalty-daily-reward-modal .modal-content, .loyalty-available-rank-up-modal .modal-content{ background: #0b1320; border: 1px solid rgba(255,255,255,.06); border-radius: var(--radius-lg); box-shadow: 0 18px 50px rgba(0,0,0,.40); } .modal-header, .bonus-slider-modal .modal-header{ background: linear-gradient(90deg, #0d1827 0%, #123557 100%); border-bottom: 1px solid rgba(40,199,255,.14); } .modal-content h4, .download-popup-modal .modal-header .modal-title, .claim-info-modal h4, .bonus-slider-modal .modal-title{ color: #fff; } /* Text accents */ .copyright, .site-description, .site-info .site-info-description p, .site-info .site-info-description h4, .provider-container, .provider-container>h5, .winners-ticker ul li .winner-amount, .deposit-container .formatted-balance, .panel-heading.emailbox-heading .panel-tabs>li.active i, .panel-heading.emailbox-heading .panel-tabs>li.active>a span, .home-progressive-jackpot .jackpot-currency{ color: var(--accent-gold); } .claim-info-modal h4, .standard-content-info h2, .game-provider-desc, .game-provider-desc-arcade, .game-provider-desc-sport, .game-provider-desc-crash-game, .provider-info h5, .provider-info p, .standard-remark-notification .remark-notification-content span, .pending-verification-container p, .standard-form-note span, .standard-form-note strong, .withdrawal-container .total-balance, .withdrawal-container .real-withdrawal-amount, .deposit-container .real-deposit-amount, .deposit-amount-container .deposit-amount .currency-suffix, .deposit-amount-container .deposit-amount input.form-control{ color: var(--blue-soft); } /* ========================================================= LIGHT ANIMATION Same concept, different model, more professional, low cost ========================================================= */ @keyframes bluePulse { 0%,100% { box-shadow: 0 0 0 1px rgba(40,199,255,.08), 0 0 0 rgba(40,199,255,0); } 50% { box-shadow: 0 0 0 1px rgba(40,199,255,.14), 0 0 18px rgba(40,199,255,.08); } } @keyframes textGlowSoft { 0%,100% { text-shadow: 0 0 0 rgba(40,199,255,0); opacity: 1; } 50% { text-shadow: 0 0 8px rgba(40,199,255,.18); opacity: .98; } } @keyframes shineSweep { 0% { transform: translateX(-40%) skewX(-18deg); opacity: .08; } 50% { opacity: .18; } 100% { transform: translateX(140%) skewX(-18deg); opacity: .08; } } @keyframes floatAura { 0%,100% { transform: translateY(0); opacity: .18; } 50% { transform: translateY(-2px); opacity: .28; } } .topbar-container, .site-header, .standard-form-title, .info-center-title, .home-game-list-container .container-title span, .popular-game-title-container .container-title span{ animation: bluePulse 4.6s ease-in-out infinite; } .top-menu>li[data-active="true"], .standard-side-menu a[data-active="true"], .notification-popup-body .notification-list .notification-item[data-seen="false"] .notification-title{ animation: textGlowSoft 3.4s ease-in-out infinite; } .standard-section-title, .standard-form-title, .info-center-title{ position: relative; overflow: hidden; } .standard-section-title::after, .standard-form-title::after, .info-center-title::after{ content: ""; position: absolute; top: 0; left: -38%; width: 24%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent); animation: shineSweep 6s linear infinite; pointer-events: none; } .home-info-container::before, .telegram-banner-container::before, .login-panel::before{ content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 30%, rgba(40,199,255,.06), transparent 60%); pointer-events: none; animation: floatAura 5s ease-in-out infinite; } /* Hover - hidup tapi ringan */ .game-list .game-item:hover, .claim-item-container .claim-item:hover, .promotion-item:hover, .provider-slide>main>.slide-item:hover, .sport-match-item:hover, .notification-list .notification-item:hover{ transform: translateY(-2px); border-color: rgba(40,199,255,.22); box-shadow: 0 14px 28px rgba(0,0,0,.28), 0 0 0 1px rgba(40,199,255,.08); } /* Footer */ .site-footer{ background: linear-gradient(90deg, #07101a 0%, #0e1d31 50%, #132844 100%); border-top: 1px solid rgba(40,199,255,.12); } .footer-links>li>a, .contact-list>li a, .footer-section-title{ color: #f2f9ff; } .footer-links>li>a:hover, .contact-list>li a:hover{ color: #fff; background: rgba(40,199,255,.05); } /* Contact */ .contact-list>li a{ background: #101a2a; border: 1px solid rgba(255,255,255,.05); border-radius: 12px; } .contact-list>li a i, .topbar-left-section .topbar-item .live-chat, .floating-action-button .floating-action-button-item{ background: var(--grad-main); color: #07111d; box-shadow: 0 8px 18px rgba(40,199,255,.16); } /* Readability */ .site-description h1, .site-description h2, .site-description h3, .site-description p, .site-description a, .site-description div, .site-info .site-info-title h3{ color: #dce9f5; } .no-data-container p, .contact-us-list li h6, .bank-info h1, .bank-info h2, .bank-info h3, .bank-info h4{ color: var(--text-soft); } /* Mobile performance safety */ @media (max-width: 768px){ .topbar-container, .site-header, .standard-form-title, .info-center-title, .home-game-list-container .container-title span, .popular-game-title-container .container-title span{ animation-duration: 6.2s; } .game-list .game-item:hover, .claim-item-container .claim-item:hover, .promotion-item:hover, .provider-slide>main>.slide-item:hover, .sport-match-item:hover, .notification-list .notification-item:hover{ transform: none; } .standard-section-title::after, .standard-form-title::after, .info-center-title::after{ opacity: .5; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce){ *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; } }