ChatGPT





s4.css
File

index(8).html
File
can you change this html page theme to black and gold? but only modify the css not everything else. just the css

Worked for 3m 35s
Analysis paused
Done. I changed only the CSS theme to black and gold; the HTML, structure, and scripts were left untouched. 


s4.css


Library
/
s4.css


/* =============================== BLACK & GOLD THEME Tempel di PALING BAWAH CSS lama ================================ */
:root {
    --stm-bg: #050505;
    --stm-card: #11100c;
    --stm-dark: #17140b;
    --stm-blue: #d4af37;
    --stm-pink: #ffd700;
    --stm-purple: #8a6500;
    --stm-red: #b8860b;
    --stm-gold: #ffd700;
    --stm-white: #ffffff;
    --stm-text: #e8dfc5;
    --stm-muted: #a99d7c;
    --stm-glow-blue: 0 0 14px rgba(212,175,55,.55);
    --stm-glow-pink: 0 0 14px rgba(255,215,0,.50);
}

/* GLOBAL */
body {
    color: var(--stm-text);
    background: radial-gradient(circle at top left,rgba(255,215,0,.12),transparent 30%), radial-gradient(circle at top right,rgba(212,175,55,.15),transparent 35%), linear-gradient(180deg,#050505 0%,#0b0a07 100%);
}

h4,.sports-platform-title,.modal-title {
    color: white;
    text-shadow: var(--stm-glow-pink);
}

p,.site-info-container p,.bank-list p {
    color: var(--stm-muted);
}

a {
    color: var(--stm-blue);
    transition: .22s ease;
}

a:hover,a:focus {
    color: var(--stm-pink);
    text-decoration: none;
    text-shadow: var(--stm-glow-pink);
}

/* HEADER / TOPBAR */
.topbar-container, .site-header {
    background: linear-gradient(90deg,#070706 0%,#18140a 50%,#070706 100%);
    border-bottom: 1px solid rgba(212,175,55,.48);
    box-shadow: 0 0 18px rgba(212,175,55,.20);
}

.top-menu>li>a {
    color: #e6dcc0;
    font-weight: 700;
    letter-spacing: .3px;
    transition: .22s ease;
}

.top-menu>li>a:hover, .top-menu>li[data-active="true"]>a {
    color: white;
    background: linear-gradient(135deg,rgba(255,215,0,.12),rgba(212,175,55,.15));
    text-shadow: 0 0 10px var(--stm-blue);
}

/* SIDE MENU */
.standard-side-menu, .standard-side-menu .menu-section, .messaging-side-menu {
    background: linear-gradient(180deg,#0b0a07,#16130b);
    border: 1px solid rgba(212,175,55,.20);
    box-shadow: inset 0 0 18px rgba(255,215,0,.06);
}

.standard-side-menu a, .standard-side-menu-group-label {
    background: rgba(255,255,255,.03);
    color: #f2ead2;
    border-left: 3px solid transparent;
    transition: .22s ease;
}

.standard-side-menu a[data-active="true"], .standard-side-menu a:hover, .standard-side-menu .menu-section a:hover, .standard-side-menu .menu-section a[data-active="true"], .messaging-side-menu [data-active="true"] a, .messaging-side-menu a:hover {
    background: linear-gradient(90deg,rgba(255,215,0,.17),rgba(212,175,55,.09));
    color: white;
    border-color: var(--stm-pink);
    box-shadow: inset 0 0 14px rgba(212,175,55,.15);
}

/* PANEL / CARD */
.panel, .panel-default>.panel-heading, .standard-form-container, .standard-form-content, .info-center-content, .popular-games .tab-pane, .promotions-container, .promotion-list, .slots-games-container, .casino-games-container, .race-games-container, .arcade-games-container, .crash-game-games-container, .large-game-list-container {
    background: linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015)), #100e09;
    border-color: rgba(212,175,55,.20);
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
}

/* TITLE BAR */
.info-center-title, .standard-form-title, .popular-games [data-section="left"] .section-title, .home-game-list-container .container-title span, .popular-game-title-container .container-title span {
    color: white;
    background: linear-gradient(135deg,var(--stm-pink),var(--stm-purple),var(--stm-blue));
    text-shadow: 0 0 10px rgba(255,255,255,.6);
    box-shadow: 0 0 18px rgba(255,215,0,.30);
}

/* BUTTON UTAMA */
.standard-button-group .btn-primary, .messaging-side-menu .support-ticket>a, .deposit-container .reveal-bank-account-button, .play-now, .login-panel .register-button, .modal-footer .btn-primary, .download-apk .btn, .promotion-item .click-for-get-promo-button, [data-payment-gateway] .download-qr-button {
    color: #fff!important;
    border: 0;
    background: linear-gradient(135deg,var(--stm-pink) 0%,var(--stm-purple) 48%,var(--stm-blue) 100%);
    box-shadow: 0 0 16px rgba(212,175,55,.48), inset 0 0 10px rgba(255,255,255,.18);
    font-weight: 800;
    letter-spacing: .4px;
    transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

.standard-button-group .btn-primary:hover, .messaging-side-menu .support-ticket>a:hover, .deposit-container .reveal-bank-account-button:hover, .play-now:hover, .login-panel .register-button:hover, .modal-footer .btn-primary:hover, .download-apk .btn:hover, .promotion-item .click-for-get-promo-button:hover, [data-payment-gateway] .download-qr-button:hover {
    color: #fff!important;
    transform: translateY(-2px);
    filter: saturate(1.15);
    box-shadow: 0 0 22px rgba(255,215,0,.62),0 0 18px rgba(180,130,0,.48);
}

/* BUTTON SECONDARY */
.free-play, .login-panel .login-button, .modal-btn.blank, .confirmation-message-modal .confirm-btn {
    color: #fff;
    background: linear-gradient(135deg,#17140c,#26200e);
    border: 1px solid rgba(212,175,55,.38);
    box-shadow: 0 0 10px rgba(212,175,55,.15);
    transition: .22s ease;
}

.free-play:hover, .login-panel .login-button:hover, .modal-btn.blank:hover, .confirmation-message-modal .confirm-btn:hover {
    background: linear-gradient(135deg,#26200e,#17140c);
    color: var(--stm-blue);
}

/* FORM INPUT */
.form-control, .mobile-app-container .mobile-app-select, .login-panel input[type=text], .login-panel input[type=password], .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: #090806;
    color: #f7efd8;
    border: 1px solid rgba(212,175,55,.38);
    box-shadow: inset 0 0 10px rgba(212,175,55,.07);
    transition: .22s ease;
}

.form-control:focus, .login-panel input[type=text]:focus, .login-panel input[type=password]:focus {
    border-color: var(--stm-pink);
    box-shadow: 0 0 0 2px rgba(255,215,0,.12),0 0 16px rgba(212,175,55,.25);
}

/* GAME LIST */
.game-list, .game-list-title, .provider-slide, .provider-slide>main>.slide-item>a:not(.game-info) {
    background: #0b0a07;
    border-color: rgba(255,215,0,.12);
}

.game-list .game-item, .large-game-list li, .large-game-list .game-provider-img {
    background: radial-gradient(circle at top,rgba(255,215,0,.10),transparent 45%), linear-gradient(180deg,#18140a,#090806);
    border: 1px solid rgba(212,175,55,.15);
    transition: transform .22s ease, box-shadow .22s ease;
}

.game-list .game-item:hover, .large-game-list li:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 18px rgba(212,175,55,.30),0 0 14px rgba(255,215,0,.18);
}

.game-list .game-name, .slots-games-container .game-name, .casino-games-container .game-name, .race-games-container .game-name {
    color: #fff;
    background: linear-gradient(90deg,var(--stm-pink),var(--stm-purple));
    text-shadow: 0 0 8px rgba(255,255,255,.45);
}

/* CATEGORY ACTIVE */
.slots-games-container .category-filter-link.active, .slots-games-container .category-filter-link:hover, .casino-games-container .category-filter-link.active, .casino-games-container .category-filter-link:hover, .race-games-container .category-filter-link.active, .race-games-container .category-filter-link:hover, .arcade-games-container .category-filter-link.active, .arcade-games-container .category-filter-link:hover, .crash-game-games-container .category-filter-link.active, .crash-game-games-container .category-filter-link:hover {
    color: #fff;
    background: linear-gradient(135deg,var(--stm-blue),var(--stm-purple),var(--stm-pink));
    box-shadow: 0 0 14px rgba(255,215,0,.34);
}

/* BANK / DEPOSIT */
.bank-info, .deposit-container .bank-info, .withdrawal-container .bank-info, .bank-info-block {
    background: linear-gradient(180deg,#17140b,#070604);
    color: #fff;
    border: 1px solid rgba(212,175,55,.42);
    box-shadow: 0 0 18px rgba(212,175,55,.12);
}

.deposit-container .standard-form-note a, .deposit-container .formatted-balance, .deposit-amount-container .real-deposit-amount, .deposit-amount-container .deposit-amount input.form-control, .withdrawal-container .total-balance {
    color: var(--stm-gold);
    text-shadow: 0 0 10px rgba(255,215,0,.40);
}

/* MODAL */
.modal-content, .bonus-slider-modal .modal-content {
    background: linear-gradient(180deg,#17140b,#070604);
    border: 1px solid rgba(255,215,0,.30);
    box-shadow: 0 0 28px rgba(212,175,55,.20);
}

.modal-header {
    border-bottom-color: rgba(212,175,55,.24);
}

.modal-content h4, .claim-info-modal h4, .download-popup-modal .modal-header .modal-title {
    color: var(--stm-pink);
    text-shadow: var(--stm-glow-pink);
}

/* ANNOUNCEMENT / TICKER */
.announcement-container, .tickercontainer, .jackpot-winners .winners-ticker-container {
    background: linear-gradient(90deg,#070604,#18140a,#070604);
    color: #fff;
    border: 1px solid rgba(212,175,55,.18);
    box-shadow: inset 0 0 18px rgba(255,215,0,.06);
}

.notice ul li, .announcement-container .announcement-list li {
    color: #f5e9c6;
}

/* FOOTER */
.site-footer {
    background: radial-gradient(circle at bottom,rgba(255,215,0,.10),transparent 35%), #070604;
    border-top: 1px solid rgba(212,175,55,.24);
}

.footer-links>li>a {
    color: #b8ad8b;
}

.footer-links>li>a:hover {
    color: var(--stm-blue);
    text-shadow: var(--stm-glow-blue);
}

/* USER INFO */
.user-info .user-main-info, .user-info .dropdown-menu {
    background: linear-gradient(180deg,#17140b,#090806);
    border: 1px solid rgba(212,175,55,.24);
    box-shadow: 0 0 18px rgba(212,175,55,.14);
}

.user-info .wallet-container .balance, .user-info .wallet-container .locked-balance, .standard-profile-bar .user-field div .username {
    color: var(--stm-gold);
    text-shadow: 0 0 9px rgba(255,215,0,.40);
}

/* PROMO / CLAIM */
.claim-item, .pending-transactions-container .pending-transactions-item, .remarks-container {
    background: linear-gradient(180deg,#17140b,#090806);
    color: #fff;
    border-color: rgba(255,215,0,.30);
    box-shadow: 0 0 14px rgba(255,215,0,.12);
}

.claim-item .claim-button, .claim-item .activation-button, .claim-item .cancellation-button, .claim-item .expiration-button {
    background: linear-gradient(135deg,var(--stm-pink),var(--stm-blue));
    color: #fff;
}

/* GOLD LIGHT ANIMATION */
@keyframes stmSoftPulse {
    0%,100% {
        box-shadow: 0 0 10px rgba(212,175,55,.15)
    }

    50% {
        box-shadow: 0 0 20px rgba(255,215,0,.30)
    }
}

@keyframes stmNeonMove {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

.home-game-list-container .container-content, .popular-game-title-container .container-content, .slot-jackpot-container, .jackpot-winners {
    animation: stmSoftPulse 3.8s ease-in-out infinite;
}

/* Smooth gold gradient movement for important buttons */
.play-now, .login-panel .register-button, .standard-button-group .btn-primary {
    background-size: 180% 180%;
    animation: stmNeonMove 4s ease infinite;
}

/* MOBILE FRIENDLY */
@media(max-width: 768px) {
    .top-menu>li>a {
        font-size:12px;
    }

    .standard-side-menu a, .game-list .game-name {
        font-size: 12px;
    }

    .home-game-list-container .container-content, .popular-game-title-container .container-content {
        animation: none;
    }
}

/* Reduce motion biar tetap ringan */
@media(prefers-reduced-motion:reduce) {
    * {
        animation: none!important;
        transition: none!important;
    }
}