/* ========================================================= CUANBET88 PROFESSIONAL RED x SILVER x DARK THEME Safe override layer - keep existing structure/class names Place this CSS AFTER the old stylesheet ========================================================= */ :root{ --bg-main: #060606; --bg-panel: #101010; --bg-panel-2: #171717; --bg-soft: #1d1d1d; --bg-card: #121212; --bg-elevated: #1a1a1a; --text-main: #f5f5f5; --text-soft: #b8b8b8; --text-dim: #8b8b8b; --red-main: #ff2b2b; --red-hover: #ff4545; --red-deep: #b30000; --silver-main: #c9c9c9; --silver-soft: #9a9a9a; --silver-line: #3e3e3e; --accent-gold: #ffb347; --accent-light: #ffd9d9; --success: #00d084; --danger: #ff5f5f; --grad-primary: linear-gradient(135deg, #ff2b2b 0%, #c40000 55%, #7a0000 100%); --grad-metal: linear-gradient(135deg, #f2f2f2 0%, #bdbdbd 45%, #7e7e7e 100%); --grad-dark: linear-gradient(180deg, #151515 0%, #090909 100%); --grad-dark-soft: linear-gradient(180deg, #1a1a1a 0%, #101010 100%); --grad-button: linear-gradient(135deg, #ff3030 0%, #d40000 70%, #8a0000 100%); --grad-button-hover: linear-gradient(135deg, #ff4e4e 0%, #e10000 70%, #940000 100%); --grad-outline: linear-gradient(90deg, rgba(255,43,43,.55), rgba(201,201,201,.35)); --shadow-soft: 0 8px 20px rgba(0,0,0,.24); --shadow-card: 0 10px 24px rgba(0,0,0,.30); --shadow-red: 0 0 18px rgba(255,43,43,.18); --shadow-red-hover: 0 0 24px rgba(255,43,43,.28); --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --border-main: 1px solid rgba(255,255,255,.08); --border-accent: 1px solid rgba(255,43,43,.22); --tr-fast: .18s ease; --tr-normal: .28s ease; } /* ========================= PERFORMANCE SAFE ANIMATION ========================= */ @keyframes softPulse { 0%,100% { box-shadow: 0 0 0 rgba(255,43,43,0), 0 0 0 rgba(255,43,43,0); } 50% { box-shadow: 0 0 16px rgba(255,43,43,.18), 0 0 28px rgba(255,43,43,.08); } } @keyframes floatUpLite { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } } @keyframes shineSweep { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } @keyframes fadeRise { from { opacity: .92; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* Reduce heavy rendering */ *{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body{ background: radial-gradient(circle at top, rgba(255,43,43,.07), transparent 28%), linear-gradient(180deg, #0b0b0b 0%, #050505 100%); color: var(--text-main); } /* ========================= HEADER / NAVBAR ========================= */ .navbar, .site-header-navbar, .site-topbar, .site-footer, .site-footer-navbar, .site-side-menu>ul, .side-menu-user-info, .side-menu-login-panel{ background: var(--grad-dark) !important; border-color: rgba(255,255,255,.06) !important; } .site-topbar main>a, .site-menu>li>a, .site-menu .games-container>li>a, .language-selector-container, .site-side-menu li>a, .site-side-menu summary, .site-topbar main>.site-side-menu-trigger .icon-bar{ color: var(--text-main) !important; } .site-menu>li[data-active="true"], .site-menu>li[data-active="true"] a, .site-menu>li>a:hover, .site-footer-navbar ul li:hover a, .site-footer-navbar li[data-active="true"] a{ color: var(--red-main) !important; } .site-menu .game-list-container{ background: rgba(10,10,10,.96) !important; border-bottom: 3px solid rgba(255,43,43,.45) !important; box-shadow: var(--shadow-card); } /* ========================= BUTTON SYSTEM ========================= */ .site-topbar main>a.register-button, .play-now, .standard-button-group .btn-primary, .modal-footer .btn-primary, .download-apk .btn, .download-apk-btn-android, .vendor-game-info a, .vendor-game-details-info a, .claim-item .claim-button, .claim-item .activation-button, .claim-item .cancellation-button, .claim-item .expiration-button, .promotion-list .promotion-wrapper .link-container button, .referral-section .referral-code-copy-btn, .referral-box-container .referral-box .referral-box-icon, .whitelisted-domains-link, .request-otp-button, [data-payment-gateway] .download-qr-button, .daily-reward-container .standard-secondary-button, .loyalty-reward-container .loyalty-reward-button, .notification-tabs .notification-tab-item[data-active="true"], .top-tab-container a[data-active="true"], .top-tab-container a:hover{ background: var(--grad-button) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.10) !important; box-shadow: 0 8px 18px rgba(140,0,0,.20); transition: transform var(--tr-fast), box-shadow var(--tr-fast), background var(--tr-fast); } .site-topbar main>a.register-button:hover, .play-now:hover, .standard-button-group .btn-primary:hover, .modal-footer .btn-primary:hover, .download-apk .btn:hover, .download-apk-btn-android:hover, .vendor-game-info a:hover, .vendor-game-details-info a:hover, .claim-item .claim-button:hover, .claim-item .activation-button:hover, .claim-item .cancellation-button:hover, .claim-item .expiration-button:hover, .promotion-list .promotion-wrapper .link-container button:hover, .referral-section .referral-code-copy-btn:hover, .request-otp-button:hover, [data-payment-gateway] .download-qr-button:hover, .daily-reward-container .standard-secondary-button:hover, .loyalty-reward-container .loyalty-reward-button:hover{ background: var(--grad-button-hover) !important; transform: translateY(-1px); box-shadow: var(--shadow-red-hover); } .free-play, .side-menu-login-panel a.login-button, .side-menu-login-panel a.register-button, .standard-outline-button.standard-outline-button, .promotion-share-container .promotion-share-btn{ background: rgba(255,255,255,.03) !important; color: var(--silver-main) !important; border: 1px solid rgba(201,201,201,.30) !important; transition: all var(--tr-fast); } .free-play:hover, .side-menu-login-panel a.login-button:hover, .side-menu-login-panel a.register-button:hover, .standard-outline-button.standard-outline-button:hover, .promotion-share-container .promotion-share-btn:hover{ color: #fff !important; border-color: rgba(255,43,43,.45) !important; box-shadow: var(--shadow-red); } /* ========================= TITLES / HEADINGS ========================= */ .game-list-title, .large-game-list-heading, .standard-form-sub-title, .info-center-container h3, .home-component-item .h2, .large-game-list .link-container>h5{ color: var(--text-main) !important; border-left: 4px solid var(--red-main) !important; } .standard-form-title, .info-center-container h2, .info-center-container h4, .info-center-container h5, .footer-description-section h4, .footer-sitemap-section h4, .register-done-container>h2, .claim-info-modal h4{ color: #fff !important; } .register-done-container>h2 span, .about-us-container h5[data-title], .download-apk .h2>strong, .standard-form-note span, .standard-form-note strong, .pending-verification-container p, .update-verification-note p, .case-number, .register-done-container .register-verification-done .info, .register-done-container .register-verification-done a{ color: var(--red-main) !important; } /* ========================= PANELS / CARDS / CONTAINERS ========================= */ .standard-form-container, .standard-inner-container, .standard-side-menu, .modal-body, .modal-footer, .bonus-slider-modal .modal-body, .bonus-slider-modal .modal-footer, .profile-container .transaction-section>div, .notification-list .notification-item, .notification-list .notification-item[data-message-type="announcement"], .replied-message[data-message-type="announcement"], .claim-item, .pending-transactions-container .pending-transactions-item, .pending-transaction-detail-card, .bet-report-detail-inner-card, .loyalty-info-container, .loyalty-level-benefits-section, .loyalty-reward-container, .loyalty-level-benefits-container, .loyalty-top-bar-container .loyalty-point-section>div, .loyalty-top-bar-container .loyalty-benefit-section>div, .complaint-container .standard-form-content, .game-container, .home-component-item, .promotion-list .promotion-container, .promotion-info .promotion-item-details, .promotion-info .promotion-content, .referral-box-container .referral-box, .standard-content-info .standard-content-block, .transaction-item, .transactions-table.table, .standard-reporting-control-group, .notification-tabs .notification-tab-item, .top-tab-container a, .mobile-app-container .mobile-info-button, .mobile-app-container .tab-pane, .how-it-works-container .how-it-works-section, .mission-container .mission-item, .loyalty-history-list .loyalty-history-item{ background: var(--grad-dark-soft) !important; color: var(--text-main) !important; border: var(--border-main) !important; border-radius: var(--radius-md); box-shadow: var(--shadow-soft); } .claim-item, .game-container, .home-component-item, .promotion-list .promotion-container, .referral-box-container .referral-box, .mission-container .mission-item, .notification-list .notification-item{ transition: transform var(--tr-fast), box-shadow var(--tr-fast), border-color var(--tr-fast); } .claim-item:hover, .game-container:hover, .home-component-item:hover, .promotion-list .promotion-container:hover, .referral-box-container .referral-box:hover, .mission-container .mission-item:hover, .notification-list .notification-item:hover{ transform: translateY(-2px); border-color: rgba(255,43,43,.20) !important; box-shadow: var(--shadow-card), var(--shadow-red); } /* ========================= INPUT / FORM ========================= */ .standard-form input, .standard-form select, .standard-form textarea, .standard-form input[disabled], .standard-form input[readonly], .side-menu-login-panel input[type="text"], .side-menu-login-panel input[type="password"], .game-list-container .filter-section>input, .game-list-container .filter-section>select, .standard-reporting-control-group input, .standard-reporting-control-group select, .complaint-container .form-control, .standard-reporting-control-group .form-control{ background: #0d0d0d !important; color: var(--text-main) !important; border: 1px solid rgba(201,201,201,.16) !important; border-radius: 10px; transition: border-color var(--tr-fast), box-shadow var(--tr-fast), background var(--tr-fast); } .standard-form input:focus, .standard-form select:focus, .standard-form textarea:focus, .side-menu-login-panel input[type="text"]:focus, .side-menu-login-panel input[type="password"]:focus, .game-list-container .filter-section>input:focus, .game-list-container .filter-section>select:focus, .complaint-container .form-control:focus, .standard-reporting-control-group .form-control:focus{ border-color: rgba(255,43,43,.45) !important; box-shadow: 0 0 0 3px rgba(255,43,43,.10) !important; outline: none; } .standard-form label, .standard-form-title, .standard-form-sub-title, .form-footer-note-section .form-footer-note, .register-modal .register-page-reminder{ color: #fff !important; } .form-control:focus{ border-color: rgba(255,43,43,.45) !important; box-shadow: 0 0 0 3px rgba(255,43,43,.12) !important; } /* ========================= GAME LIST / PROVIDERS ========================= */ .game-list-container .filter-section, .game-provider-slider, .page-description, .vendor-mobile-app, .vendor-game-details, .slots-providers>a, .promotion-categories a, .top-tab-container a, .standard-nav-tabs a{ background: #111 !important; color: var(--text-main) !important; border: 1px solid rgba(255,255,255,.06) !important; } .game-list-container .filter-section:after{ border-left: 1px solid rgba(255,255,255,.08) !important; } .game-list-container .filter-section .category-filter .category-filter-link, .new-slots-games-header button, .popular-slots-header a, .popular-slots-header button, .mobile-app-container .nav-tabs>li>a, .standard-nav-bar a, .standard-side-menu a, .game-provider-slider>button, .game-provider-slider .game-providers a h5, .game-container .game-name, .game-list .game-player h5, .popular-games .games-group .game-container .game-player h5{ color: var(--text-main) !important; } .game-list-container .filter-section .category-filter .category-filter-link:hover, .game-list-container .filter-section .category-filter .category-filter-link.active, .mobile-app-container .nav>li>a:hover, .mobile-app-container .nav>li>a:focus, .promotion-categories a:hover, .promotion-categories a[data-active="true"], .standard-nav-tabs a[data-active="true"], .standard-side-menu a[data-active="true"]{ background: linear-gradient(135deg, rgba(255,43,43,.18), rgba(255,43,43,.08)) !important; color: #fff !important; border-color: rgba(255,43,43,.25) !important; } .game-list .game-item, .popular-slots-game-list .game-item{ background: linear-gradient(180deg, #171717 0%, #101010 100%) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.06); border-radius: 14px; overflow: hidden; } .game-list .game-item .wrapper-container .link-container, .game-container .game-wrapper .link-container, .promotion-list .promotion-wrapper .link-container{ background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.70) 100%) !important; } /* ========================= MODAL ========================= */ .modal-header, .register-modal .modal-header, .simple-modal .modal-header{ background: var(--grad-primary) !important; color: #fff !important; border-bottom: 1px solid rgba(255,255,255,.08); } .modal-content:has(.resolved-transaction-popup){ background: #111 !important; border-color: rgba(255,255,255,.06) !important; } .modal-body, .modal-footer{ background: #0d0d0d !important; } /* ========================= NOTE / INFO / ALERT ========================= */ .standard-form-note, .standard-form .bank-info, .bank-info-block, .wallet-bar, .user-info .vendor-balances-container, .deposit-summary-container .deposit-summary-content, .withdrawal-summary-container .withdrawal-summary-content, .pending-transactions-container .pending-transactions-item .pending-transaction-remarks-container, .modal-body .pending-transaction-summary-container, .claim-info-modal .alert-container, .payment-account-creation-remarks{ background: linear-gradient(180deg, rgba(255,43,43,.08), rgba(255,255,255,.02)) !important; border: 1px solid rgba(255,43,43,.18) !important; color: var(--text-main) !important; } .pending-maintenance-container i, .remarks-container i, .standard-required-message, .field-validation-error, .claim-item .claim-title .expiration-note, .mobile-app-container .tab-pane .note{ color: var(--danger) !important; } /* ========================= TEXT ACCENT / SECONDARY ========================= */ .contact-us-list li, .message-container .message-header a, .message-container .message-header input, .replied-message, .info-center-container, .empty-table-container, .transaction-item .info-section .details .secondary, .pending-transaction-detail-container .secondary, .resolved-transaction-popup .secondary, .footer-description-section .site-description, .footer-sitemap-section .footer-links>li>a, .footer-sitemap-section .contact-list>li a, .footer-sitemap-section .social-media-list>li>a{ color: var(--text-soft) !important; } .contact-us-list li h6, .info-center-container .panel-group .panel-heading a, .info-center-container .panel-group .panel-title a, .pending-transaction-detail-container .primary, .resolved-transaction-popup .primary, .transaction-item .info-section .details .primary, .footer-copyright-section .copyright{ color: #fff !important; } .contact-us-list li a, .form-footer-note-section .form-footer-note-link a, .register-modal .register-page-link a, .layout-modal .registration-note a, .layout-modal .forgot-password-link-container a:hover, .pending-transaction-detail-container .link, .pending-transaction-detail-container .link a, .footer-sitemap-section .footer-links>li>a:hover, .footer-sitemap-section .contact-list>li a:hover, .footer-sitemap-section .social-media-list>li>a:hover{ color: var(--red-main) !important; } /* ========================= PROGRESS / BADGE / HIGHLIGHT ========================= */ .bonus-progress .progress-bar-success, .progressive-jackpot .jackpot-container, .home-progressive-jackpot .jackpot-container, .mission-container .mission-item[data-status="claimable"] .mission-action-container .action-button{ background: var(--grad-primary) !important; } .game-list-title, .large-game-list-heading, .standard-form-sub-title, .standard-nav-bar a:hover:after, .standard-nav-bar a[data-active="true"]:after, .carousel-indicators li.active, .carousel-indicators li.slick-active, .introjs-bullets.introjs-bullets ul li a.active, .introjs-bullets.introjs-bullets ul li a:hover, .loyalty-reward-container .category-title::before{ background-color: var(--red-main) !important; border-color: var(--red-main) !important; } .jackpot-container .jackpot-currency, .wallet-bar .balance-field main, .deposit-container .formatted-balance, .deposit-container .real-deposit-amount, .withdrawal-container .total-balance, .side-menu-user-info .profile-menu-user-info .username, .claim-item-type>div, .transaction-item .download-qr-btn, .loyalty-reward-container .tab-filter input:checked+.tab{ color: #fff !important; } /* ========================= TABLE ========================= */ .standard-form-container .table thead, .standard-reporting-scroll-container .table thead, .transactions-table.table thead{ background: #181818 !important; border-color: rgba(255,255,255,.06) !important; } .standard-form-container .table thead tr th, .standard-reporting-scroll-container .table thead tr th, .transactions-table.table thead tr th{ color: var(--silver-main) !important; border-color: rgba(255,255,255,.06) !important; } .standard-form-container .table tbody td, .standard-reporting-scroll-container .table tbody td, .transactions-table.table tbody tr td{ color: var(--text-main) !important; border-color: rgba(255,255,255,.05) !important; } .transactions-table.table tbody tr:nth-child(odd) td{ background-color: #101010 !important; } .transactions-table.table tbody tr:nth-child(even) td{ background-color: #161616 !important; } /* ========================= ICON / IMAGE TONE ========================= */ .search-header .search-title img, .footer-sitemap-section .contact-list>li a i img, .bank-info .bank-account-number-container img, .bank-info .download-qr-code-button img, [data-payment-gateway] .destination-account-number-container img, [data-payment-gateway] .va-account-number img, .pending-transaction-info-section .icon.chevron-icon, .pending-transaction-info-section .icon.copy-icon, .reporting-detail-overlay .reporting-detail-header .close-reporting-detail-button img{ filter: grayscale(.1) brightness(1.1); } /* ========================= LIGHT ANIMATION CLASS ========================= */ .site-topbar main>a.register-button, .play-now, .claim-item .claim-button, .standard-button-group .btn-primary{ animation: softPulse 3.2s ease-in-out infinite; } .home-component-item, .game-container, .promotion-list .promotion-container{ animation: fadeRise .45s ease both; } .user-info>a:hover, .shortcut-bar a:hover, .site-menu>li>a:hover, .game-provider-slider>button:hover{ animation: floatUpLite .6s ease; } /* ========================= MOBILE / RESPONSIVE ========================= */ @media only screen and (max-width: 1199px){ .site-header-navbar, .site-menu>li>a, .site-side-menu li>a, .site-side-menu summary{ background: #0d0d0d !important; } } @media only screen and (max-width: 768px){ .game-list .game-item, .game-container, .promotion-list .promotion-container, .claim-item, .home-component-item{ border-radius: 12px; } .site-topbar main>a.register-button, .play-now, .free-play{ box-shadow: none; } } /* ========================= OPTIONAL HERO / BANNER AURA Add this only if your page has banner/hero wrapper ========================= */ .hero-banner, .banner-container, .home-inner-container{ position: relative; overflow: hidden; } .hero-banner::before, .banner-container::before, .home-inner-container::before{ content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 20% 20%, rgba(255,43,43,.12), transparent 24%), radial-gradient(circle at 80% 10%, rgba(201,201,201,.08), transparent 20%), radial-gradient(circle at 50% 100%, rgba(255,43,43,.08), transparent 28%); } /* ========================= SAFE OVERRIDE FOR ORANGE LEGACY ACCENTS ========================= */ a, .user-info button, .download-apk-section i, .mobile-app-container .tab-pane .important, .standard-password-field>i, .pending-transaction-section .head a, .top-tab-container a[data-active="true"], .top-tab-container a:hover{ color: var(--red-main) !important; } .bank-info-container .carousel-indicators .active, .otp-hr, .otp-input, .request-otp-button, .request-otp-button:hover, .contact-verification-link, .contact-verification-link:hover{ border-color: var(--red-main) !important; }