/* ============================================================================= Gray palette family ------------------- Alternative color themes for the Garnet template: a shared gray/navy base plus one accent color per theme (Pink, Pink Peach, Purple, Blue, Green, Navy, Red, Orange). Activated by setting a `data-palette` attribute on the element (see header.blade.php and the palette switcher in layouts/app.blade.php). The shared rules below (navy/gray base) apply to any non-classic palette via `html[data-palette]`. Each palette then only overrides the accent custom properties at the bottom of this file. Mapping rules: - every GREEN theme color -> the theme accent (same gradient stops) - every BLUE theme color -> a DARK NAVY (#171b2e) (same gradient stops) Gradients keep their exact structure, only the colors are swapped. ============================================================================= */ html[data-palette] { --primary-color: #e91e63; --primary-dark: #900c3f; --primary-deep: #7c0a2f; --primary-gradient: linear-gradient(rgb(233, 30, 99), rgb(144, 12, 63)); --primary-glow: rgba(233, 30, 99, 0.35); --primary-soft: linear-gradient(rgba(233, 30, 99, 0.2), rgba(144, 12, 63, 0.2)); --header-bg-color: #171b2e; --body-bg-color: #171b2e; --sidebar-bg-color: #1a2036; --footer-bg-color: #171b2e; --dark-color: #171b2e; } /* Chat sidebar blue tones -> dark navy tones (kept slightly distinct for readability) */ html[data-palette] { --chat-bg: #171b2e; --chat-surface: #1e2540; --chat-border: #2a3050; --chat-text-muted: #9a9a9a; --chat-primary: #e91e63; --chat-input-bg: #171b2e; } /* Body + shared backgrounds */ html[data-palette] body, html[data-palette] .btn.secondary-btn { background-color: #171b2e; background: linear-gradient(180deg, rgba(42, 48, 80, 1) 0%, rgba(23, 27, 46, 1) 100%); } html[data-palette] .offerwall-preloader, html[data-palette] .preloader { background-color: #171b2e; } html[data-palette] .btn.primary-btn:hover, html[data-palette] .btn.secondary-btn:hover, html[data-palette] .google-btn { background-color: #171b2e; } /* Top nav, device detection, form controls */ html[data-palette] .form-control, html[data-palette] .form-control:disabled, html[data-palette] .form-control:focus, html[data-palette] nav.top-nav, html[data-palette] .bottom-menu, html[data-palette] section.device-detection { background-color: #171b2e; background: linear-gradient(180deg, rgba(42, 48, 80, 1) 0%, rgba(23, 27, 46, 1) 100%); border-bottom: 5px groove var(--primary-color); border-image: var(--primary-gradient) 1; } html[data-palette] nav.top-nav { border-bottom: 5px dotted #171b2e; border-image: none; } html[data-palette] .bottom-menu { border-bottom: 5px dotted #171b2e; border-image: none; box-shadow: 0 0 15px 12px #171b2e40; } /* Modal + sidebar backgrounds */ html[data-palette] .modal-content, html[data-palette] .side-nav { background-color: #171b2e; background: linear-gradient(0deg, rgba(23, 27, 46, 1) 0%, rgba(42, 48, 80, 1) 100%); } /* Side nav active item (was bright->dark green) */ html[data-palette] .side-nav li.nav-item.active { background-image: var(--primary-gradient); } /* Bottom menu active item (was bright->dark green) */ html[data-palette] .bottom-menu .nav-item.active { background-image: var(--primary-gradient); } /* Alert success (was green) */ html[data-palette] .alert-box.alert-success { background: var(--primary-gradient); } /* CPI rate (was bright green) */ html[data-palette] section.api-offers .api-offers-card .cpi strong { background: var(--primary-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* API offer cards (was blue) */ html[data-palette] section.api-offers .api-offers-card { background-color: #171b2e; } /* Offerwalls */ html[data-palette] section.offerwalls > .site-name { -webkit-text-stroke: 5px #171b2e; } html[data-palette] section.offerwalls .partners-card svg:hover { background-color: #171b2e; } html[data-palette] section.offerwalls .partners-card .bonus { box-shadow: 0 0 5.7px 0 #171b2e inset; border: .8px solid #171b2e; background: #171b2e; } html[data-palette] section.offerwalls .partners-card .partners-body { background: linear-gradient(180deg, rgba(42, 48, 80, 1) 0%, rgba(23, 27, 46, 1) 100%); } /* Footer */ html[data-palette] footer { background-color: #171b2e; background: linear-gradient(180deg, rgba(42, 48, 80, 1) 0%, rgba(23, 27, 46, 1) 100%); border-top: 0px groove #171b2e; } /* Modal header */ html[data-palette] .modal-header { background: linear-gradient(180deg, rgba(42, 48, 80, 1) 0%, rgba(23, 27, 46, 1) 100%); } /* Leaderboard row hover (was blue gradient) */ html[data-palette] .leaderboard-table tbody > tr:hover { background: #171b2e; background: linear-gradient(180deg, rgba(42, 48, 80, 1) 0%, rgba(23, 27, 46, 1) 100%); } /* Profile transaction card + icon */ html[data-palette] .profile-transaction-card { background-color: #171b2e; } html[data-palette] .transaction-icon { background: linear-gradient(180deg, rgba(42, 48, 80, 1) 0%, rgba(23, 27, 46, 1) 100%); } /* Cookie bar reject (was green) */ html[data-palette] .cookie-bar .reject { background: var(--primary-gradient); } html[data-palette] .cookie-bar .cookie-container { background: var(--primary-gradient); } /* Live stats bar (was blue gradient) */ html[data-palette] section.live-stats { background: #171b2e; background: linear-gradient(180deg, rgba(42, 48, 80, 1) 0%, rgba(23, 27, 46, 1) 100%); } /* Landing hero + statistics (was blue gradient / dark blue) */ html[data-palette] .landing-page .hero { background: linear-gradient(0deg, rgba(23, 27, 46, 1) 0%, rgba(42, 48, 80, 1) 100%); } html[data-palette] .landing-page .statistics { background-color: #171b2e; } html[data-palette] .landing-page .how-start { background-color: #171b2e; } html[data-palette] .landing-page .faqs .faq-list .accordion { --bs-accordion-bg: #171b2e; } /* Landing about-us gradient title (primary -> navy) */ html[data-palette] .landing-page .about-us .title > p { background-image: var(--primary-gradient); } /* Profile modal card */ html[data-palette] .profile-modal-card { background: linear-gradient(0deg, #171b2e 0%, #2a3050 100%); } /* Coinmarketcap marquee */ html[data-palette] #coinmarketcap-widget-marquee { background: #171b2e; } /* Chat sidebar gradients (was blue -> black) */ html[data-palette] .chat-sidebar { background: linear-gradient(180deg, #2a3050 0%, #171b2e 100%); } html[data-palette] .chat-tab { background: linear-gradient(180deg, #2a3050 0%, #171b2e 100%); } /* Helpful-guide modal (was blue gradient) */ html[data-palette] .modal.guide-modal .modal-content { background: #171b2e; background: linear-gradient(0deg, rgba(23, 27, 46, 1) 0%, rgba(42, 48, 80, 1) 100%); } html[data-palette] .modal.guide-modal .guide-icon { box-shadow: 0 6px 18px var(--primary-glow); } /* Global notification bar (was blue gradient) */ html[data-palette] .global-notification { background: linear-gradient(0deg, rgba(23, 27, 46, 1) 0%, rgba(42, 48, 80, 1) 100%); border-top: 2px solid #171b2e; } /* Notification dropdown + badge (was classic blue gradient / body-bg border) */ html[data-palette] .notification-dropdown { background-color: #171b2e; background: linear-gradient(0deg, rgba(23, 27, 46, 1) 0%, rgba(42, 48, 80, 1) 100%); } html[data-palette] .notification-badge { border: 2px solid #171b2e; } html[data-palette] .notification-message, html[data-palette] .notification-time, html[data-palette] .notification-empty { color: #9a9a9a; } /* Daily login progress completed indicator (was green) */ html[data-palette] .progress-indicator.completed { background: var(--primary-soft); color: var(--primary-color); } /* Coinmarketcap marquee widget -> transparent glass panel (all themes). Widget's own rules use !important, so match with higher specificity + !important. */ #coinmarketcap-widget-marquee .coin-marquee-wrapper { background: rgba(23, 27, 46, 0.55) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid rgba(255, 255, 255, 0.08) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 12px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.05); } /* Solid accent fills -> primary gradient */ html[data-palette] ::-webkit-scrollbar-thumb, html[data-palette] .btn.primary-btn, html[data-palette] .cookie-bar .accept, html[data-palette] .slid-button .next:hover, html[data-palette] .slid-button .prev:hover, html[data-palette] nav.top-nav .balance > .icon-balance, html[data-palette] .affiliate-table tbody tr:hover, html[data-palette] .bottom-menu .nav-item.active::before, html[data-palette] .transaction-table tbody tr:hover, html[data-palette] .side-nav li.nav-item.active::before, html[data-palette] section.api-offers .api-offers-card:hover, html[data-palette] section.offerwalls, html[data-palette] section.cashout .progress-bar .progress-fill, html[data-palette] .modal.api .modal-body .event span.badge, html[data-palette] .landing-page .primary-box .icon-box, html[data-palette] .landing-page .payments-methods-container img { background: var(--primary-gradient); background-color: transparent; } html[data-palette] .btn.primary-btn:hover { background-color: #171b2e; background: #171b2e; } /* ============================================================================= Accent color sets per theme (each only overrides the accent custom props). ============================================================================= */ /* Gray / Pink Peach */ html[data-palette="gray-pink-peach"] { --primary-color: #ff6c58; --primary-dark: #ff4d6d; --primary-deep: #d43a5c; --primary-gradient: linear-gradient(135deg, rgb(255, 140, 66), rgb(255, 77, 109)); --primary-glow: rgba(255, 77, 109, 0.35); --primary-soft: linear-gradient(135deg, rgba(255, 140, 66, 0.2), rgba(255, 77, 109, 0.2)); --chat-primary: #ff6c58; } /* Gray / Purple */ html[data-palette="gray-purple"] { --primary-color: #9c27b0; --primary-dark: #7b1fa2; --primary-deep: #4a148c; --primary-gradient: linear-gradient(rgb(156, 39, 176), rgb(74, 20, 140)); --primary-glow: rgba(156, 39, 176, 0.35); --primary-soft: linear-gradient(rgba(156, 39, 176, 0.2), rgba(74, 20, 140, 0.2)); --chat-primary: #9c27b0; } /* Gray / Blue */ html[data-palette="gray-blue"] { --primary-color: #2196f3; --primary-dark: #1565c0; --primary-deep: #0d47a1; --primary-gradient: linear-gradient(rgb(33, 150, 243), rgb(13, 71, 161)); --primary-glow: rgba(33, 150, 243, 0.35); --primary-soft: linear-gradient(rgba(33, 150, 243, 0.2), rgba(13, 71, 161, 0.2)); --chat-primary: #2196f3; } /* Gray / Green */ html[data-palette="gray-green"] { --primary-color: #4caf50; --primary-dark: #388e3c; --primary-deep: #1b5e20; --primary-gradient: linear-gradient(rgb(76, 175, 80), rgb(27, 94, 32)); --primary-glow: rgba(76, 175, 80, 0.35); --primary-soft: linear-gradient(rgba(76, 175, 80, 0.2), rgba(27, 94, 32, 0.2)); --chat-primary: #4caf50; } /* Gray / Navy */ html[data-palette="gray-navy"] { --primary-color: #3f51b5; --primary-dark: #283593; --primary-deep: #1a237e; --primary-gradient: linear-gradient(rgb(63, 81, 181), rgb(26, 35, 126)); --primary-glow: rgba(63, 81, 181, 0.35); --primary-soft: linear-gradient(rgba(63, 81, 181, 0.2), rgba(26, 35, 126, 0.2)); --chat-primary: #3f51b5; } /* Gray / Red */ html[data-palette="gray-red"] { --primary-color: #f44336; --primary-dark: #d32f2f; --primary-deep: #b71c1c; --primary-gradient: linear-gradient(rgb(244, 67, 54), rgb(183, 28, 28)); --primary-glow: rgba(244, 67, 54, 0.35); --primary-soft: linear-gradient(rgba(244, 67, 54, 0.2), rgba(183, 28, 28, 0.2)); --chat-primary: #f44336; } /* Gray / Orange */ html[data-palette="gray-orange"] { --primary-color: #ff9800; --primary-dark: #f57c00; --primary-deep: #e65100; --primary-gradient: linear-gradient(rgb(255, 152, 0), rgb(230, 81, 0)); --primary-glow: rgba(255, 152, 0, 0.35); --primary-soft: linear-gradient(rgba(255, 152, 0, 0.2), rgba(230, 81, 0, 0.2)); --chat-primary: #ff9800; } /* ============================================================================= Standard Dark Orange -------------------- Black + orange. The orange accent is the equivalent gradient of the GREEN in the classic blue-and-green theme (bright -> deep orange). The black base is the equivalent gradient of the BLUE in the classic theme (which fades to pure black), i.e. every blue surface becomes black. ============================================================================= */ html[data-palette="standard-dark-orange"] { --primary-color: #f28c00; --primary-dark: #e57600; --primary-deep: #d04b00; --primary-gradient: linear-gradient(137.47deg, rgb(242, 140, 0) 3.98%, rgb(208, 75, 0) 92.69%); --primary-glow: rgba(242, 140, 0, 0.35); --primary-soft: linear-gradient(rgba(242, 140, 0, 0.2), rgba(208, 75, 0, 0.2)); --header-bg-color: #141414; --body-bg-color: #141414; --sidebar-bg-color: #1c1c1c; --footer-bg-color: #141414; --dark-color: #141414; --chat-primary: #f28c00; } html[data-palette="standard-dark-orange"] { --chat-bg: #141414; --chat-surface: #1e1e1e; --chat-border: #2e2e2e; --chat-text-muted: #9a9a9a; --chat-primary: #f28c00; --chat-input-bg: #141414; } html[data-palette="standard-dark-orange"] body, html[data-palette="standard-dark-orange"] .btn.secondary-btn { background-color: #141414; background: linear-gradient(180deg, rgba(30, 30, 30, 1) 0%, rgba(10, 10, 10, 1) 100%); } html[data-palette="standard-dark-orange"] .offerwall-preloader, html[data-palette="standard-dark-orange"] .preloader { background-color: #141414; } html[data-palette="standard-dark-orange"] .btn.primary-btn:hover, html[data-palette="standard-dark-orange"] .btn.secondary-btn:hover, html[data-palette="standard-dark-orange"] .google-btn { background-color: #141414; } html[data-palette="standard-dark-orange"] .form-control, html[data-palette="standard-dark-orange"] .form-control:disabled, html[data-palette="standard-dark-orange"] .form-control:focus, html[data-palette="standard-dark-orange"] nav.top-nav, html[data-palette="standard-dark-orange"] .bottom-menu, html[data-palette="standard-dark-orange"] section.device-detection { background-color: #141414; background: linear-gradient(180deg, rgba(30, 30, 30, 1) 0%, rgba(10, 10, 10, 1) 100%); border-bottom: 5px groove var(--primary-color); border-image: var(--primary-gradient) 1; } html[data-palette="standard-dark-orange"] nav.top-nav { border-bottom: 5px dotted #141414; border-image: none; } html[data-palette="standard-dark-orange"] .bottom-menu { border-bottom: 5px dotted #141414; border-image: none; box-shadow: 0 0 15px 12px #14141440; } html[data-palette="standard-dark-orange"] .modal-content, html[data-palette="standard-dark-orange"] .side-nav { background-color: #141414; background: linear-gradient(0deg, rgba(10, 10, 10, 1) 0%, rgba(30, 30, 30, 1) 100%); } html[data-palette="standard-dark-orange"] section.api-offers .api-offers-card { background-color: #141414; } html[data-palette="standard-dark-orange"] section.offerwalls > .site-name { -webkit-text-stroke: 5px #141414; } html[data-palette="standard-dark-orange"] section.offerwalls .partners-card svg:hover { background-color: #141414; } html[data-palette="standard-dark-orange"] section.offerwalls .partners-card .bonus { box-shadow: 0 0 5.7px 0 #141414 inset; border: .8px solid #141414; background: #141414; } html[data-palette="standard-dark-orange"] section.offerwalls .partners-card .partners-body { background: linear-gradient(180deg, rgba(30, 30, 30, 1) 0%, rgba(10, 10, 10, 1) 100%); } html[data-palette="standard-dark-orange"] footer { background-color: #141414; background: linear-gradient(180deg, rgba(30, 30, 30, 1) 0%, rgba(10, 10, 10, 1) 100%); border-top: 0px groove #141414; } html[data-palette="standard-dark-orange"] .modal-header { background: linear-gradient(180deg, rgba(30, 30, 30, 1) 0%, rgba(10, 10, 10, 1) 100%); } html[data-palette="standard-dark-orange"] .leaderboard-table tbody > tr:hover { background: #141414; background: linear-gradient(180deg, rgba(30, 30, 30, 1) 0%, rgba(10, 10, 10, 1) 100%); } html[data-palette="standard-dark-orange"] .profile-transaction-card { background-color: #141414; } html[data-palette="standard-dark-orange"] .transaction-icon { background: linear-gradient(180deg, rgba(30, 30, 30, 1) 0%, rgba(10, 10, 10, 1) 100%); } html[data-palette="standard-dark-orange"] section.live-stats { background: #141414; background: linear-gradient(180deg, rgba(30, 30, 30, 1) 0%, rgba(10, 10, 10, 1) 100%); } html[data-palette="standard-dark-orange"] .landing-page .hero { background: linear-gradient(0deg, rgba(10, 10, 10, 1) 0%, rgba(30, 30, 30, 1) 100%); } html[data-palette="standard-dark-orange"] .landing-page .statistics { background-color: #141414; } html[data-palette="standard-dark-orange"] .landing-page .how-start { background-color: #141414; } html[data-palette="standard-dark-orange"] .landing-page .faqs .faq-list .accordion { --bs-accordion-bg: #141414; } html[data-palette="standard-dark-orange"] .profile-modal-card { background: linear-gradient(0deg, #141414 0%, #1e1e1e 100%); } html[data-palette="standard-dark-orange"] #coinmarketcap-widget-marquee { background: #141414; } html[data-palette="standard-dark-orange"] .chat-sidebar { background: linear-gradient(180deg, #1e1e1e 0%, #141414 100%); } html[data-palette="standard-dark-orange"] .chat-tab { background: linear-gradient(180deg, #1e1e1e 0%, #141414 100%); } html[data-palette="standard-dark-orange"] .modal.guide-modal .modal-content { background: #141414; background: linear-gradient(0deg, rgba(10, 10, 10, 1) 0%, rgba(30, 30, 30, 1) 100%); } html[data-palette="standard-dark-orange"] .global-notification { background: linear-gradient(0deg, rgba(10, 10, 10, 1) 0%, rgba(30, 30, 30, 1) 100%); border-top: 2px solid #141414; } html[data-palette="standard-dark-orange"] .notification-dropdown { background-color: #141414; background: linear-gradient(0deg, rgba(10, 10, 10, 1) 0%, rgba(30, 30, 30, 1) 100%); } html[data-palette="standard-dark-orange"] .notification-badge { border: 2px solid #141414; } html[data-palette="standard-dark-orange"] #coinmarketcap-widget-marquee .coin-marquee-wrapper { background: rgba(20, 20, 20, 0.55) !important; } html[data-palette="standard-dark-orange"] .btn.primary-btn:hover { background-color: #141414; background: #141414; } /* Palette swatches */ .theme-palette-panel { max-height: 60vh; overflow-y: auto; } .theme-palette-swatch.peach { background: linear-gradient(135deg, #ff8c42 0%, #ff4d6d 50%, #171b2e 50%); } .theme-palette-swatch.gray-purple { background: linear-gradient(135deg, #9c27b0 0%, #4a148c 50%, #171b2e 50%); } .theme-palette-swatch.gray-blue { background: linear-gradient(135deg, #2196f3 0%, #0d47a1 50%, #171b2e 50%); } .theme-palette-swatch.gray-green { background: linear-gradient(135deg, #4caf50 0%, #1b5e20 50%, #171b2e 50%); } .theme-palette-swatch.gray-navy { background: linear-gradient(135deg, #3f51b5 0%, #1a237e 50%, #171b2e 50%); } .theme-palette-swatch.gray-red { background: linear-gradient(135deg, #f44336 0%, #b71c1c 50%, #171b2e 50%); } .theme-palette-swatch.gray-orange { background: linear-gradient(135deg, #ff9800 0%, #e65100 50%, #171b2e 50%); } .theme-palette-swatch.standard-dark-orange { background: linear-gradient(135deg, #f28c00 0%, #d04b00 50%, #141414 50%); }