/* ========================================================= VWTOTO PROFESSIONAL NEON CYBER THEME Lightweight override - keep existing HTML/class structure Place this file AFTER the original CSS ========================================================= */ :root{ --bg-main: #05080d; --bg-soft: #0b1017; --bg-card: #111826; --bg-panel: #16202c; --text-main: #f5fbff; --text-soft: #b7c6d8; --text-dim: #7f92a8; --green-main: #39ff88; --green-neon: #65ff9f; --green-glow: rgba(57, 255, 136, 0.20); --blue-main: #20d8ff; --blue-neon: #66e8ff; --blue-glow: rgba(32, 216, 255, 0.20); --accent-mix: #7dffcf; --gold-soft: #e9ff77; --line-soft: rgba(255,255,255,0.07); --line-green: rgba(57,255,136,0.22); --line-blue: rgba(32,216,255,0.22); --shadow-soft: 0 8px 24px rgba(0,0,0,0.28); --shadow-neon: 0 0 0 1px rgba(32,216,255,0.10), 0 10px 30px rgba(32,216,255,0.08); --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --grad-main: linear-gradient(135deg, #39ff88 0%, #20d8ff 100%); --grad-dark: linear-gradient(180deg, #101723 0%, #091018 100%); --grad-panel: linear-gradient(180deg, rgba(57,255,136,0.06) 0%, rgba(32,216,255,0.04) 100%); --grad-topbar: linear-gradient(90deg, #081019 0%, #0a1a20 45%, #0c141f 100%); --grad-title: linear-gradient(90deg, #2cff89 0%, #1ee2ff 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-neon); transition: color .20s ease, opacity .20s ease, text-shadow .20s ease; } a:hover, a:focus{ color: var(--green-neon); text-decoration: none; text-shadow: 0 0 10px rgba(32,216,255,0.18); } /* Smooth global 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{ transition: background-color .20s ease, color .20s ease, border-color .20s ease, box-shadow .20s ease, transform .20s ease, opacity .20s ease; } /* Topbar + Header */ .topbar-container, .site-header, .mobile-app-container .logo-container, .info-center, .messaging-side-menu{ background: var(--grad-topbar); border-bottom: 1px solid var(--line-blue); box-shadow: var(--shadow-soft); } .topbar-left-section .topbar-item, .top-menu>li, .menu-slide>i{ color: #d6e7f4; } .top-menu>li:hover, .top-menu>li[data-active="true"], .topbar-left-section .topbar-item a:hover{ color: #ffffff; text-shadow: 0 0 14px rgba(32,216,255,0.22); } /* 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-soft); } /* Important section 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: var(--grad-title); color: #031018; border: 0; letter-spacing: .35px; box-shadow: 0 6px 20px rgba(32,216,255,0.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: #041019; border: 1px solid rgba(255,255,255,0.06); box-shadow: 0 8px 18px rgba(32,216,255,0.14); } .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: #031018; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(32,216,255,0.18); filter: saturate(1.04); } .free-play, .modal-btn, .modal-btn.blank:hover, .modal-footer .btn-secondary, .simple-modal .btn-secondary{ background: #1a2430; color: #d8e7f5; border: 1px solid rgba(255,255,255,0.06); } .free-play:hover, .modal-btn:hover, .modal-footer .btn-secondary:hover, .simple-modal .btn-secondary:hover{ background: #223041; color: #ffffff; } /* Form controls */ .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: #0b131d; color: var(--text-main); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.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(32,216,255,0.45); box-shadow: 0 0 0 3px rgba(32,216,255,0.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: var(--grad-main); color: #041019; } /* Side menu */ .standard-side-menu-group-label, .standard-side-menu a, .promotions-container .standard-side-menu li a{ background: #101824; color: #e7f3fb; border-bottom: 1px solid rgba(255,255,255,0.05); } .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(57,255,136,0.12), rgba(32,216,255,0.12)); color: #ffffff; border-color: rgba(32,216,255,0.22); box-shadow: inset 3px 0 0 var(--blue-main); } /* Tables / content blocks */ .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,0.08); } /* Notification */ .notification-list .notification-item[data-seen="false"], .notification-popup-body .notification-list .notification-item[data-seen="false"]{ background: linear-gradient(180deg, rgba(32,216,255,0.09), rgba(57,255,136,0.05)); border-color: rgba(32,216,255,0.22); } .notification-list .notification-item .notification-header .notification-label, .notification-list .notification-item .notification-play-button{ background: var(--grad-main); color: #041019; } /* Banner / highlight sections */ .banner, .home-info-container, .telegram-banner-container, .top-menu .game-list, .lottery-result-container, .home-progressive-jackpot .jackpot-container{ background: linear-gradient(180deg, #061019 0%, #09131b 100%); } .home-info-container, .telegram-banner-container{ border: 1px solid rgba(32,216,255,0.16); box-shadow: var(--shadow-neon); } /* 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(32,216,255,0.10); color: #ffffff; } .game-list .wrapper-container:hover, .provider-slide>main>.slide-item>a:not(.game-info):hover{ background: rgba(32,216,255,0.04); } /* Promo / modal */ .modal-content, .bonus-slider-modal .modal-content, .loyalty-daily-reward-modal .modal-content, .loyalty-available-rank-up-modal .modal-content{ background: #0b121a; border: 1px solid rgba(255,255,255,0.07); border-radius: var(--radius-lg); box-shadow: 0 18px 50px rgba(0,0,0,0.42); } .modal-header, .bonus-slider-modal .modal-header{ background: linear-gradient(90deg, #0b151d 0%, #10212a 100%); border-bottom: 1px solid rgba(32,216,255,0.14); } .modal-content h4, .download-popup-modal .modal-header .modal-title, .claim-info-modal h4, .bonus-slider-modal .modal-title{ color: #ffffff; } /* 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(--gold-soft); } /* Accent cleanup */ .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-neon); } /* Lightweight aura overlays */ .login-panel, .user-info .user-main-info, .standard-form-content, .claim-item-container .claim-item, .notification-popup-body .notification-list .notification-item, .home-info-container, .telegram-banner-container{ position: relative; } .login-panel::before, .user-info .user-main-info::before, .standard-form-content::before, .claim-item-container .claim-item::before, .home-info-container::before{ content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(32,216,255,0.03); background: linear-gradient(180deg, rgba(57,255,136,0.02), rgba(32,216,255,0.01)); } /* New lightweight animations */ @keyframes cyberPulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(32,216,255,0.08), 0 0 0 rgba(32,216,255,0); } 50% { box-shadow: 0 0 0 1px rgba(57,255,136,0.12), 0 0 20px rgba(32,216,255,0.08); } } @keyframes neonTextFloat { 0%, 100% { text-shadow: 0 0 0 rgba(32,216,255,0); transform: translateY(0); } 50% { text-shadow: 0 0 10px rgba(57,255,136,0.18); transform: translateY(-1px); } } @keyframes scanLine { 0% { transform: translateX(-24px); opacity: .18; } 50% { opacity: .42; } 100% { transform: translateX(24px); opacity: .18; } } /* Apply animations */ .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: cyberPulse 4s 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: neonTextFloat 3.2s ease-in-out infinite; } /* Decorative title light */ .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: -15%; width: 28%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent); transform: skewX(-16deg); animation: scanLine 5s linear infinite; } /* Hover life without heavy render */ .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(32,216,255,0.22); box-shadow: 0 14px 28px rgba(0,0,0,0.26), 0 0 0 1px rgba(32,216,255,0.08); } /* Footer */ .site-footer{ background: linear-gradient(90deg, #060b11 0%, #0b151d 50%, #0c1a22 100%); border-top: 1px solid rgba(32,216,255,0.12); } .footer-links>li>a, .contact-list>li a, .footer-section-title{ color: #f2f8fd; } .footer-links>li>a:hover, .contact-list>li a:hover{ color: #ffffff; background: rgba(32,216,255,0.06); } /* Contact */ .contact-list>li a{ background: #101925; border: 1px solid rgba(255,255,255,0.06); 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: #041019; box-shadow: 0 8px 18px rgba(32,216,255,0.16); } /* Small readability fixes */ .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: #dbe9f4; } .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: 5.6s; } .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; } } /* Reduced motion support */ @media (prefers-reduced-motion: reduce){ *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; } }