header#header div.middle-header div.middle-header-container div.header-buttons div.login-buttons a.button.register { background-color: #893fcb !important; color: #fff !important; box-shadow: 0 12px 24px rgb(210 8 255 / 28%), 0 6px 16px rgba(0, 0, 0, 0.22) !important; } .swiper-slide[data-swiper-slide-index="14"] { width: 621px !important; } @media (min-width: 992px) { #responsive-menu.responsive-menu.active-menu .menu-head .title .text { color: #eaf4ff !important; } #responsive-menu.responsive-menu.active-menu .menu-body .to-search-modal .text { color: #dcecffb8 !important; } } .p2label { color: white; } .sb-top-btn.active .icon img, .sb-top-btn.active svg { color: white !important; } @media (min-width: 992px) { #responsive-menu.responsive-menu.active-menu .sl-acc__head { color: white !important; } } @media (min-width: 992px) { .responsive-menu.active-menu .menu-head .text, .responsive-menu.active-menu .to-search-modal .text, .responsive-menu.active-menu .sb-top-title, .responsive-menu.active-menu .sb-top-arrow, .responsive-menu.active-menu .sl-acc__headTitle, .responsive-menu.active-menu .sl-acc__itemText, .responsive-menu.active-menu .sl-acc__itemRight, .responsive-menu.active-menu .languages-box .current-lang { color: white !important; } } :root { /* ========================================================= THEME CONTRACT (GLOBAL) Change values in /assets/css/themes/.css ========================================================= */ /* Logo */ --header-footer-logo: url("https://vendor-provider.fra1.cdn.digitaloceanspaces.com/6q/assets/images/dark-logo-new.svg"); --homepage-entrance-bg-image: url("/assets/images/enterence-bg.png"); /* Brand */ --brand-primary: #8c30e1; --brand-primary-rgb: 140, 48, 225; --brand-primary-contrast: #ffffff; --brand-secondary: #c084fc; --brand-secondary-rgb: 192, 132, 252; --accent: var(--brand-primary); --accent-rgb: var(--brand-primary-rgb); --active: var(--accent); --accent-soft: rgba(var(--accent-rgb), 0.14); --accent-soft-2: rgba(var(--accent-rgb), 0.08); --accent-soft-3: rgba(var(--accent-rgb), 0.2); --accent-soft2: var(--accent-soft-2); --accent-soft3: var(--accent-soft-3); --accent-border: rgba(var(--accent-rgb), 0.34); --accent-border-strong: rgba(var(--accent-rgb), 0.56); --accent-glow: rgba(var(--accent-rgb), 0.38); /* Surfaces */ --surface-bg: #0b1220; --surface-bg-rgb: 11, 18, 32; --surface-1: #0f182c; --surface-2: #131c31; --surface-3: #1a2540; --surface-4: #232d46; --surface-card: var(--surface-2); --surface-modal: #101a2f; --surface-elevated: #18243d; --surface-border: rgba(255, 255, 255, 0.12); --surface-border-soft: rgba(255, 255, 255, 0.08); --surface-border-strong: rgba(255, 255, 255, 0.18); /* Legacy dark palette aliases */ --legacy-bg-1: #181b24; --legacy-bg-2: #23242f; --legacy-bg-3: #2c2d3a; --legacy-text-muted: #8b8ca7; /* Text */ --text-primary: #ffffff; --text-secondary: rgba(255, 255, 255, 0.88); --text-muted: rgba(255, 255, 255, 0.72); --text-soft: rgba(255, 255, 255, 0.56); --text-disabled: rgba(255, 255, 255, 0.38); --text-on-accent: var(--brand-primary-contrast); /* States */ --success: #13e398; --success-rgb: 19, 227, 152; --warning: #efb025; --warning-rgb: 239, 176, 37; --danger: #ff5365; --danger-rgb: 255, 83, 101; --info: #44a7ff; --info-rgb: 68, 167, 255; --state-success-soft: rgba(var(--success-rgb), 0.16); --state-warning-soft: rgba(var(--warning-rgb), 0.18); --state-danger-soft: rgba(var(--danger-rgb), 0.15); --state-info-soft: rgba(var(--info-rgb), 0.16); /* Radius scale */ --radius-2xs: 4px; --radius-xs: 6px; --radius-sm: 8px; --radius-md: 10px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-3xl: 24px; --radius-pill: 999px; /* Border scale */ --border-thin: 1px; --border-medium: 2px; /* Shadow scale */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-sm: 0 6px 14px rgba(0, 0, 0, 0.22); --shadow-md: 0 10px 24px rgba(0, 0, 0, 0.28); --shadow-lg: 0 14px 32px rgba(0, 0, 0, 0.34); --shadow-xl: 0 18px 44px rgba(0, 0, 0, 0.42); --shadow-accent-sm: 0 8px 18px rgba(var(--accent-rgb), 0.24); --shadow-accent-md: 0 12px 28px rgba(var(--accent-rgb), 0.36); --shadow-accent-lg: 0 16px 36px rgba(var(--accent-rgb), 0.42); /* Gradients */ --gradient-primary: linear-gradient(180deg, rgba(var(--accent-rgb), 0.95), rgba(var(--accent-rgb), 0.72)); --gradient-primary-horizontal: linear-gradient(90deg, rgba(var(--accent-rgb), 0.96), rgba(var(--accent-rgb), 0.74)); --gradient-overlay: linear-gradient(180deg, rgba(12, 21, 38, 0.9), rgba(7, 13, 25, 0.92)); --gradient-surface: linear-gradient(180deg, var(--surface-2), var(--surface-1)); --gradient-chip: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03)); --gradient-withdraw: linear-gradient(to right, #a070ff, #d951d9, #fa2ea9, #ff1a76, #ff3344); /* Legacy variables currently consumed by existing CSS */ --panel-top: #192132; --panel-bottom: #121727; --panel-bg: var(--surface-2); --panel-bg2: var(--surface-1); --modalbg: linear-gradient(180deg, var(--panel-bg), var(--panel-bg2)); --linearbg: radial-gradient(900px 220px at 15% 0%, rgba(255, 255, 255, 0.06), transparent 55%), linear-gradient(180deg, rgba(15, 26, 44, 0.92), rgba(11, 18, 32, 0.92)); --linearbgreversed: radial-gradient(900px 220px at 85% 0%, rgba(255, 255, 255, 0.06), transparent 55%), linear-gradient(180deg, rgba(15, 26, 44, 0.92), rgba(11, 18, 32, 0.92)); /* Progress / indicators */ --progressbg: linear-gradient( to right, rgba(var(--accent-rgb), 0.72) 0%, rgba(var(--accent-rgb), 0.82) 35%, rgba(var(--accent-rgb), 0.98) 70%, rgba(var(--accent-rgb), 1) 100% ); /* Inputs */ --input-bg: var(--linearbg); --input-bg-solid: var(--legacy-bg-3); --input-border: rgba(255, 255, 255, 0.14); --input-border-focus: rgba(var(--accent-rgb), 0.65); --input-placeholder: rgba(255, 255, 255, 0.45); /* Buttons */ --btn-primary-bg: var(--accent); --btn-primary-bg-hover: color-mix(in srgb, var(--accent) 84%, #ffffff 16%); --btn-primary-bg-active: color-mix(in srgb, var(--accent) 88%, #000000 12%); --btn-primary-color: var(--brand-primary-contrast); --btn-primary-radius: var(--radius-xs); --btn-primary-shadow: var(--shadow-accent-sm); --btn-primary-shadow-active: var(--shadow-accent-md); --btn-primary-disabled-opacity: 0.55; --btn-secondary-bg: var(--legacy-bg-3); --btn-secondary-bg-hover: color-mix(in srgb, var(--legacy-bg-3) 86%, #ffffff 14%); --btn-secondary-color: var(--text-primary); --btn-secondary-border: var(--surface-border-soft); --btn-ghost-bg: rgba(255, 255, 255, 0.06); --btn-ghost-bg-hover: rgba(255, 255, 255, 0.12); --btn-ghost-color: var(--text-primary); /* Header */ --header-register-bg: var(--btn-primary-bg); --header-register-color: var(--btn-primary-color); --wallet-btn-bg-start: #192132; --wallet-btn-bg-end: var(--accent); --wallet-btn-gradient: linear-gradient(90deg, var(--wallet-btn-bg-start) 0%, var(--wallet-btn-bg-end) 100%); --wallet-btn-color: var(--brand-primary-contrast); /* Tabs / chips / pills */ --tab-active-bg: var(--accent); --tab-active-color: var(--brand-primary-contrast); --tab-active-border: var(--accent); --tab-inactive-bg: transparent; --tab-inactive-color: var(--text-muted); --tab-inactive-border: var(--surface-border-soft); --chip-bg: rgba(255, 255, 255, 0.06); --chip-border: rgba(255, 255, 255, 0.12); --chip-color: var(--text-muted); --chip-active-bg: rgba(var(--accent-rgb), 0.14); --chip-active-border: rgba(var(--accent-rgb), 0.55); --chip-active-color: var(--text-primary); /* Cards / modals */ --card-bg: var(--gradient-surface); --card-border: var(--surface-border-soft); --card-radius: var(--radius-lg); --card-shadow: var(--shadow-md); --modal-bg: var(--modalbg); --modal-border: var(--surface-border-soft); --modal-radius: var(--radius-lg); --modal-shadow: var(--shadow-xl); /* Wallet */ --wallet-deposit-bg: var(--accent); --wallet-withdraw-gradient: var(--gradient-withdraw); --wallet-footer-btn-bg: var(--legacy-bg-3); --wallet-footer-btn-color: var(--text-primary); /* Game opener */ --game-opener-border: var(--accent); --game-opener-overlay: linear-gradient(0deg, rgba(24, 24, 31, 0.84) 0%, rgba(24, 24, 31, 0.84) 100%); --game-play-btn-bg: var(--accent); --game-play-btn-color: var(--brand-primary-contrast); --game-demo-btn-bg: var(--legacy-text-muted); --game-demo-btn-color: #ffffff; /* Slider controls */ --slider-nav-bg: rgba(16, 28, 50, 0.8); --slider-nav-bg-hover: rgba(var(--accent-rgb), 0.28); --slider-nav-border: rgba(var(--accent-rgb), 0.35); --slider-nav-color: #ffffff; --slider-pagination-dot: rgba(255, 255, 255, 0.35); --slider-pagination-dot-active: var(--accent); /* Typography tokens */ --font-family-regular: "Rubik", sans-serif; --font-family-medium: "Rubik Medium", sans-serif; --font-family-semibold: "Rubik SemiBold", sans-serif; --font-family-bold: "Rubik Bold", sans-serif; /* Top search (global) */ --top-search-form-border: 1px solid #3b3c4e; --top-search-form-radius: 4px; --top-search-form-margin-top: 24px; --top-search-form-margin-bottom: 24px; --top-search-form-padding-x: 12px; --top-search-form-height: 48px; --top-search-form-line-height: 62px; --top-search-form-font-size: 0px; --top-search-form-bg: var(--linearbg); --top-search-form-font-family: var(--font-family-medium); --top-search-icon-color: #8c8da8; --top-search-input-color: var(--text-primary); --top-search-input-placeholder: rgba(255, 255, 255, 0.55); --top-search-focus-radius: 16px; --top-search-focus-shadow: 0 22px 70px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(var(--accent-rgb), 0.22), 0 0 30px rgba(var(--accent-rgb), 0.1); --top-search-layer-radius: 18px; --top-search-layer-border: 1px solid rgba(255, 255, 255, 0.1); --top-search-layer-border-bottom: 10px solid rgba(255, 255, 255, 0.1); --top-search-layer-bg: rgba(12, 15, 28, 0.72); --top-search-layer-shadow: 0 18px 55px rgba(0, 0, 0, 0.55); --top-search-layer-blur: 14px; --top-search-recent-wrap-radius: 10px; --top-search-recent-wrap-border: 1px solid rgba(var(--brand-secondary-rgb), 0.26); --top-search-recent-wrap-bg: linear-gradient(180deg, rgba(9, 16, 30, 0.82), rgba(6, 12, 24, 0.84)); --top-search-recent-wrap-shadow: 0 14px 26px rgba(0, 0, 0, 0.32); --top-search-recent-chip-radius: 999px; --top-search-recent-chip-border: 1px solid rgba(var(--brand-secondary-rgb), 0.5); --top-search-recent-chip-bg: linear-gradient( 135deg, rgba(var(--brand-secondary-rgb), 0.26), rgba(var(--brand-secondary-rgb), 0.14) ); --top-search-recent-chip-color: #f5eeff; --top-search-recent-chip-font-family: var(--font-family-semibold); --top-search-recent-chip-shadow: 0 6px 14px rgba(var(--brand-secondary-rgb), 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.16); /* Lowbar (mobile dock) */ --lb-bg: rgba(20, 22, 30, 0.72); --lb-stroke: rgba(255, 255, 255, 0.1); --lb-stroke-2: rgba(255, 255, 255, 0.06); --lb-text: rgba(255, 255, 255, 0.86); --lb-muted: rgba(255, 255, 255, 0.65); --lb-active: var(--accent); --lb-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); --lb-shadow-soft: 0 10px 26px rgba(0, 0, 0, 0.35); --lb-search-bg: #18181f; --lb-radius: 22px; --lb-radius-sm: 20px; --lb-surface-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)); --lb-wallet-ring-color: rgba(var(--accent-rgb), 0.6); --lb-wallet-ring-size: 0.2rem; --lb-wallet-glow: radial-gradient(circle, rgba(var(--accent-rgb), 0.18), rgba(var(--accent-rgb), 0) 65%); --lb-wallet-glow-radius: radial-gradient(circle, rgba(var(--accent-rgb), 0.22), rgba(var(--accent-rgb), 0) 62%); --lb-chat-bg: linear-gradient(135deg, rgba(var(--accent-rgb), 0.9), rgba(var(--accent-rgb), 0.65)); --lb-chat-border: rgba(var(--accent-rgb), 0.5); --lb-chat-color: #ffffff; --lb-chat-shadow: 0 12px 24px rgba(var(--accent-rgb), 0.26), 0 8px 20px rgba(0, 0, 0, 0.28); --lb-chat-shadow-hover: 0 14px 28px rgba(var(--accent-rgb), 0.34), 0 10px 24px rgba(0, 0, 0, 0.32); /* Sidebar top tabs (casino/sportsbook) */ --sidebar-tab-casino-bg-image: linear-gradient(180deg, rgba(140, 48, 225, 0.88), rgba(30, 12, 56, 0.95)); --sidebar-tab-sportsbook-bg-image: linear-gradient(180deg, rgba(212, 160, 23, 0.90), rgba(45, 32, 8, 0.95)); /* Bonus request modal */ --bonus-request-tab-bg: var(--tab-inactive-bg); --bonus-request-tab-border: var(--tab-inactive-border); --bonus-request-tab-text: var(--tab-inactive-color); --bonus-request-tab-active-bg: var(--tab-active-bg); --bonus-request-tab-active-border: var(--tab-active-border); --bonus-request-tab-active-text: var(--tab-active-color); --bonus-request-card-bg: var(--card-bg); --bonus-request-card-border: var(--card-border); --bonus-request-card-shadow: var(--card-shadow); --bonus-request-info-bg: rgba(var(--accent-rgb), 0.16); --bonus-request-info-border: rgba(var(--accent-rgb), 0.45); --bonus-request-info-color: var(--text-primary); --bonus-request-button-bg: var(--btn-primary-bg); --bonus-request-button-text: var(--btn-primary-color); --bonus-request-empty-bg: rgba(255, 255, 255, 0.02); --bonus-request-empty-border: var(--surface-border-soft); --bonus-request-empty-text: var(--text-muted); /* VIP club page */ --vip-accent: var(--accent); --vip-accent-rgb: var(--accent-rgb); --vip-bg0: var(--surface-bg); --vip-bg1: var(--surface-2); --vip-card-bg: rgba(255, 255, 255, 0.05); --vip-card-border: rgba(255, 255, 255, 0.10); --vip-card-border-soft: rgba(255, 255, 255, 0.06); --vip-card-hover-bg: rgba(255, 255, 255, 0.06); --vip-text: var(--text-secondary); --vip-muted: var(--text-soft); --vip-chip-bg: rgba(255, 255, 255, 0.06); --vip-chip-border: rgba(255, 255, 255, 0.10); --vip-chip-active-bg: rgba(var(--vip-accent-rgb), 0.16); --vip-chip-active-border: rgba(var(--vip-accent-rgb), 0.30); --vip-tag-bg: rgba(0, 0, 0, 0.18); --vip-gift-tag-bg: rgba(var(--vip-accent-rgb), 0.10); --vip-gift-tag-border: rgba(var(--vip-accent-rgb), 0.18); --vip-button-border: rgba(var(--vip-accent-rgb), 0.28); --vip-button-bg: linear-gradient(180deg, rgba(var(--vip-accent-rgb), 0.22), rgba(var(--vip-accent-rgb), 0.10)); --vip-button-border-hover: rgba(var(--vip-accent-rgb), 0.42); --vip-link: rgba(var(--vip-accent-rgb), 0.95); --vip-link-border: rgba(var(--vip-accent-rgb), 0.35); --vip-link-border-hover: rgba(var(--vip-accent-rgb), 0.65); /* Misc */ --focus-ring: 0 0 0 3px rgba(var(--accent-rgb), 0.22); --divider: var(--surface-border-soft); /* Notification dropdown */ --notif-badge-bg: var(--accent); --notif-badge-border: rgba(255, 255, 255, 0.55); --notif-panel-bg: var(--lineartooltipbg); --notif-panel-border: rgba(255, 255, 255, 0.08); --notif-panel-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06); --notif-empty-bg: rgba(100, 116, 139, 0.16); --notif-empty-border: rgba(255, 255, 255, 0.08); --notif-item-bg: rgba(100, 116, 139, 0.14); --notif-item-bg-hover: rgba(100, 116, 139, 0.18); --notif-item-border: rgba(255, 255, 255, 0.08); --notif-item-border-hover: rgba(255, 255, 255, 0.14); --notif-track-thumb: rgba(255, 255, 255, 0.1); /* Wallet settings modal */ --wgs-text: rgba(255, 255, 255, 0.92); --wgs-muted: rgba(255, 255, 255, 0.55); --wgs-panel-bg: rgba(20, 24, 36, 0.75); --wgs-panel-border: rgba(255, 255, 255, 0.05); --wgs-block-bg: rgba(255, 255, 255, 0.03); --wgs-block-bg-hover: rgba(255, 255, 255, 0.04); --wgs-block-border: rgba(255, 255, 255, 0.06); --wgs-switch-on-bg: rgba(var(--accent-rgb), 0.14); --wgs-switch-on-border: rgba(var(--accent-rgb), 0.28); --wgs-switch-knob: rgba(255, 255, 255, 0.35); --wgs-switch-knob-on: rgba(var(--accent-rgb), 0.9); --wgs-dot-bg: rgba(var(--accent-rgb), 0.1); --wgs-dot-border: rgba(var(--accent-rgb), 0.15); --wgs-dot-ring: rgba(var(--accent-rgb), 0.25); --wgs-save-border: rgba(var(--success-rgb), 0.22); --wgs-save-bg: linear-gradient(90deg, rgba(14, 58, 45, 0.92), rgba(var(--success-rgb), 0.45)); /* Game page + empty states */ --game-theater-overlay: rgba(0, 0, 0, 0.65); --game-overlay-soft: rgba(0, 0, 0, 0.55); --game-fs-close-bg: var(--legacy-bg-3); --game-switch-bg: var(--legacy-bg-3); --game-switch-knob: var(--legacy-bg-2); --game-switch-active-gradient: linear-gradient(to right, #00de99, #17de87, #2edd73, #41dc5d, #54db43); --game-bets-empty-bg: linear-gradient(145deg, rgba(17, 31, 62, 0.92), rgba(8, 22, 48, 0.86)); --game-bets-empty-border: rgba(90, 131, 210, 0.34); --game-bets-empty-icon-bg: rgba(46, 94, 184, 0.24); --game-bets-empty-icon-border: rgba(93, 147, 245, 0.34); --game-bets-empty-icon-shadow: 0 8px 24px rgba(6, 20, 47, 0.45); --game-bets-empty-title: #f1f6ff; --game-bets-empty-text: rgba(199, 215, 242, 0.9); --game-bets-empty-button-bg: rgba(28, 73, 155, 0.45); --game-bets-empty-button-border: rgba(84, 132, 219, 0.5); --game-bets-empty-button-hover-bg: rgba(48, 99, 192, 0.58); --game-bets-empty-button-hover-border: rgba(104, 156, 247, 0.72); /* Favorites empty card */ --favorites-empty-bg: linear-gradient(140deg, rgba(15, 33, 66, 0.94), rgba(7, 20, 44, 0.96)); --favorites-empty-border: rgba(124, 174, 255, 0.3); --favorites-empty-shadow: inset 0 1px 0 rgba(189, 218, 255, 0.14), 0 18px 42px rgba(5, 14, 31, 0.42); --favorites-empty-icon-bg: rgba(40, 100, 205, 0.28); --favorites-empty-icon-border: rgba(126, 178, 255, 0.42); --favorites-empty-icon-shadow: 0 8px 26px rgba(19, 79, 184, 0.45); --favorites-empty-title: #f2f7ff; --favorites-empty-text: rgba(199, 217, 245, 0.9); --favorites-empty-btn-bg: linear-gradient(180deg, #2b7fff 0%, #1f63d2 100%); --favorites-empty-btn-border: rgba(116, 173, 255, 0.58); --favorites-empty-btn-shadow: 0 8px 20px rgba(20, 85, 193, 0.36); /* Race / raffle info blocks */ --event-trophy-bg: rgba(0, 0, 0, 0.18); --event-trophy-border: rgba(244, 183, 58, 0.3); --event-card-border: rgba(255, 255, 255, 0.08); --event-divider: rgba(255, 255, 255, 0.12); --event-title: #ffffff; --event-label: rgba(225, 236, 247, 0.95); --event-muted: rgba(185, 214, 232, 0.95); --event-stat-label: rgba(180, 209, 228, 0.92); --event-cta-bg: var(--gradient-primary); --event-cta-color: var(--brand-primary-contrast); --event-progress-track: rgba(11, 28, 43, 0.75); /* Withdraw progress */ --withdraw-progress-bg: rgba(18, 32, 58, 0.72); --withdraw-progress-border: rgba(105, 133, 178, 0.3); --withdraw-progress-track: rgba(33, 52, 85, 0.85); --withdraw-progress-fill: linear-gradient(90deg, #24c8ff 0%, #39de8e 100%); --withdraw-progress-stat-bg: rgba(255, 255, 255, 0.04); --withdraw-progress-label: #99abca; --withdraw-progress-value: #f4f8ff; --withdraw-progress-note: #adc1df; /* Challenges page */ --challenge-filter-bg: rgba(35, 46, 71, 0.55); --challenge-filter-border: rgba(124, 152, 197, 0.24); --challenge-filter-text: #9eb0cf; --challenge-filter-text-hover: #dce8ff; --challenge-filter-active-bg: var(--linearbg); --challenge-filter-active-text: var(--text-primary); --challenge-filter-active-ring: rgba(var(--accent-rgb), 0.36); --challenge-card-radius: var(--radius-sm); --challenge-card-bg: radial-gradient(120% 80% at 8% -10%, rgba(var(--accent-rgb), 0.25) 0%, rgba(var(--accent-rgb), 0) 58%), radial-gradient(90% 70% at 100% 100%, rgba(var(--accent-rgb), 0.2) 0%, rgba(var(--accent-rgb), 0) 64%), linear-gradient(160deg, color-mix(in srgb, var(--surface-3) 82%, #2b4f6a 18%) 0%, var(--surface-3) 42%, var(--surface-2) 100%); --challenge-card-shadow: 0 10px 24px rgba(0, 0, 0, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.05); --challenge-card-sheen: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 38%), repeating-linear-gradient(-35deg, rgba(255, 255, 255, 0.02) 0 2px, rgba(255, 255, 255, 0) 2px 14px); --challenge-card-overlay-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 -42px 60px rgba(3, 9, 18, 0.32); --challenge-image-fallback: color-mix(in srgb, var(--surface-3) 75%, #1f2f3c 25%); --challenge-title: #eaf4ff; --challenge-target: rgba(210, 228, 241, 0.86); --challenge-label: rgba(174, 203, 223, 0.84); --challenge-value: #f3f8ff; --challenge-author: #eaf4ff; --challenge-claimed-divider: rgba(167, 206, 233, 0.16); --challenge-completed-ring: rgba(var(--success-rgb), 0.24); --challenge-completed-bg: linear-gradient(180deg, rgba(var(--success-rgb), 0.16) 0%, rgba(var(--success-rgb), 0.1) 100%); --challenge-control-label: rgba(255, 255, 255, 0.75); --challenge-control-btn-bg: rgba(10, 14, 22, 0.9); --challenge-control-btn-border: rgba(255, 255, 255, 0.1); --challenge-control-btn-text: #ffffff; --challenge-control-btn-icon: rgba(255, 255, 255, 0.85); --challenge-control-badge-bg: rgba(var(--accent-rgb), 0.18); --challenge-control-badge-border: rgba(var(--accent-rgb), 0.35); --challenge-control-badge-text: color-mix(in srgb, var(--accent) 70%, #d9f3ff 30%); --challenge-dropdown-bg: #ffffff; --challenge-dropdown-text: #111827; --challenge-dropdown-border: rgba(0, 0, 0, 0.1); --challenge-dropdown-divider: rgba(0, 0, 0, 0.08); --challenge-dropdown-item-hover: rgba(0, 0, 0, 0.06); --challenge-dropdown-shadow: 0 14px 40px rgba(0, 0, 0, 0.35); --challenge-dropdown-active: var(--accent); --challenge-provider-pill-bg: linear-gradient( to right, color-mix(in srgb, var(--accent) 76%, #0a58ff 24%) 0%, color-mix(in srgb, var(--accent) 84%, #1e7bff 16%) 100% ); --challenge-provider-pill-text: #ffffff; /* Tournament buttons */ --tournament-button-bg: linear-gradient( 180deg, color-mix(in srgb, var(--accent) 86%, #ffffff 14%) 0%, color-mix(in srgb, var(--accent) 84%, #000000 16%) 100% ); --tournament-button-border: rgba(var(--accent-rgb), 0.54); --tournament-button-color: var(--brand-primary-contrast); --tournament-button-radius: var(--radius-2xs); --tournament-button-shadow: 0 8px 22px rgba(var(--accent-rgb), 0.34); --tournament-button-hover-filter: brightness(1.05); /* General header tabs */ --general-tabs-text: #8c8da8; --general-tabs-active-text: var(--accent); --general-tabs-active-font: "Rubik Bold"; /* Sidebar */ --sidebar-width: 260px; --sidebar-rail-width: 78px; --sidebar-z: 2000; --sidebar-ease: cubic-bezier(.2, .9, .2, 1); --sidebar-bg-open: linear-gradient(180deg, rgba(26, 30, 48, .96) 0%, rgba(14, 18, 33, .96) 100%); --sidebar-bg-open-accent: rgba(var(--accent-rgb), .18); --sidebar-bg-open-secondary: rgba(var(--warning-rgb), .10); --sidebar-bg-collapsed: linear-gradient(180deg, rgba(16, 24, 39, 0.98) 0%, rgba(11, 18, 30, 0.98) 100%); --sidebar-bg-collapsed-accent: rgba(var(--accent-rgb), 0.20); --sidebar-bg-active: linear-gradient(180deg, rgba(17, 26, 43, 0.97) 0%, rgba(10, 17, 30, 0.98) 100%); --sidebar-bg-active-accent: rgba(var(--accent-rgb), 0.22); --sidebar-bg-active-secondary: rgba(var(--success-rgb), 0.12); --sidebar-stroke: rgba(255, 255, 255, .06); --sidebar-stroke-strong: rgba(255, 255, 255, .10); --sidebar-stroke-accent: rgba(var(--accent-rgb), .24); --sidebar-text: rgba(236, 243, 255, 0.94); --sidebar-text-muted: rgba(170, 186, 210, 0.84); --sidebar-text-soft: #bdbdbd; --sidebar-chip: rgba(255, 255, 255, .05); --sidebar-chip-2: rgba(255, 255, 255, .03); --sidebar-chip-stroke: rgba(255, 255, 255, .08); --sidebar-shadow: 0 30px 70px rgba(0, 0, 0, .55); --sidebar-shadow-soft: 0 14px 30px rgba(0, 0, 0, .28); --sidebar-active-glow: 0 0 0 1px rgba(var(--accent-rgb), .16); --sidebar-overlay: rgba(0, 0, 0, .60); --sidebar-search-bg: radial-gradient(420px 120px at 15% 0%, rgba(var(--accent-rgb), .10), transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); --sidebar-search-text: var(--sidebar-text-muted); --sidebar-promo-bg: rgba(255, 255, 255, .03); --sidebar-promo-border: rgba(255, 255, 255, .07); --sidebar-promo-item-bg: rgba(0, 0, 0, .14); --sidebar-promo-item-bg-hover: rgba(0, 0, 0, .20); --sidebar-promo-dot: var(--accent); --sidebar-promo-dot-glow: rgba(var(--accent-rgb), .15); --sidebar-hero-glow: linear-gradient(90deg, #192132 0%, color-mix(in srgb, var(--accent) 84%, #1f7bff 16%) 100%); --sidebar-top-btn-border: rgba(255, 255, 255, 0.07); --sidebar-top-btn-bg: linear-gradient(95deg, rgba(35, 63, 88, 0.65) 0%, rgba(24, 46, 69, 0.75) 50%, rgba(17, 34, 53, 0.8) 100%); --sidebar-top-btn-shadow: 0 14px 26px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05); --sidebar-top-btn-title: rgba(235, 244, 255, 0.94); --sidebar-top-btn-arrow: rgba(164, 205, 255, 0.88); --sidebar-top-btn-hover-border: rgba(var(--accent-rgb), 0.34); --sidebar-top-btn-hover-shadow: 0 18px 30px rgba(0, 0, 0, 0.36), 0 0 0 1px rgba(var(--accent-rgb), 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.08); --sidebar-top-btn-active-border: rgba(var(--accent-rgb), 0.48); --sidebar-top-btn-active-bg: linear-gradient(95deg, rgba(var(--accent-rgb), 0.34) 0%, rgba(var(--accent-rgb), 0.22) 100%); --sidebar-top-btn-active-shadow: 0 18px 34px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(var(--accent-rgb), 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.11); } /* Scoped variables for hero area slider */ .hero-area-slider { --hero-accent: var(--accent); --hero-accent-rgb: var(--accent-rgb); --hero-nav-bg: var(--slider-nav-bg); --hero-nav-bg-hover: var(--slider-nav-bg-hover); --hero-nav-border: var(--slider-nav-border); --hero-pagination-dot: var(--slider-pagination-dot); --hero-pagination-dot-active: var(--slider-pagination-dot-active); } /* ========================================================= GLOBAL THEME OVERRIDES FOR LEGACY SELECTORS ========================================================= */ /* Header buttons */ header#header div.middle-header div.middle-header-container div.header-buttons div.login-buttons a.button.register { background-color: var(--header-register-bg) !important; color: var(--header-register-color) !important; border-radius: var(--btn-primary-radius); box-shadow: var(--btn-primary-shadow); } header#header div.middle-header div.middle-header-container div.header-buttons div.wallet-menu div.current-wallet a.wallet-button { color: var(--wallet-btn-color) !important; background: var(--wallet-btn-gradient) !important; border-radius: var(--radius-xs); } /* Primary action buttons */ .common-form-button .button, form.general-form div.form-buttons button, .auth div.auth-box form.auth-form div.form-buttons button, .auth-modal .modal-dialog .modal-content .modal-box form.auth-form div.form-buttons button { background-color: var(--btn-primary-bg) !important; color: var(--btn-primary-color) !important; border-radius: var(--btn-primary-radius) !important; box-shadow: var(--btn-primary-shadow); } .common-form-button .button:hover, form.general-form div.form-buttons button:hover, .auth div.auth-box form.auth-form div.form-buttons button:hover, .auth-modal .modal-dialog .modal-content .modal-box form.auth-form div.form-buttons button:hover { background-color: var(--btn-primary-bg-hover) !important; } .common-form-button .button:active, form.general-form div.form-buttons button:active, .auth div.auth-box form.auth-form div.form-buttons button:active, .auth-modal .modal-dialog .modal-content .modal-box form.auth-form div.form-buttons button:active { background-color: var(--btn-primary-bg-active) !important; box-shadow: var(--btn-primary-shadow-active) !important; } /* Inputs */ .auth-modal .modal-dialog .modal-content .modal-box form.auth-form div.form-group div.form-item.form-item-text input, .auth-modal .modal-dialog .modal-content .modal-box form.auth-form div.form-group div.form-item.form-item-password input, form.general-form div.form-group div.form-item.form-item-text input, form.general-form div.form-group div.form-item.form-item-password input, form.general-form div.form-group div.form-item.form-item-select select, .phone-input, .phone-input input { background: var(--input-bg) !important; border-color: var(--input-border) !important; border-radius: var(--radius-xs) !important; color: var(--text-primary) !important; } .auth-modal .modal-dialog .modal-content .modal-box form.auth-form div.form-group div.form-item.form-item-text input::placeholder, .auth-modal .modal-dialog .modal-content .modal-box form.auth-form div.form-group div.form-item.form-item-password input::placeholder, form.general-form div.form-group div.form-item.form-item-text input::placeholder, form.general-form div.form-group div.form-item.form-item-password input::placeholder { color: var(--input-placeholder) !important; } .auth-modal .modal-dialog .modal-content .modal-box form.auth-form div.form-group div.form-item.form-item-text input:focus, .auth-modal .modal-dialog .modal-content .modal-box form.auth-form div.form-group div.form-item.form-item-password input:focus, form.general-form div.form-group div.form-item.form-item-text input:focus, form.general-form div.form-group div.form-item.form-item-password input:focus, .phone-input input:focus { border-color: var(--input-border-focus) !important; box-shadow: var(--focus-ring) !important; } /* Modals and cards */ .modal .modal-dialog .modal-content, .modal-body, #betModal .modal-dialog .modal-content .modal-body div.wallet-box, #walletModal .modal-dialog .modal-content .modal-body div.wallet-box, .auth-modal .modal-dialog .modal-content .modal-body { background: var(--modal-bg) !important; border: var(--border-thin) solid var(--modal-border); border-radius: var(--modal-radius) !important; box-shadow: var(--modal-shadow); } /* Wallet buttons */ #walletModal .modal-dialog .modal-content .modal-body div.wallet-box div.wallet-normal div.wallet-body div.wallet-buttons span.button.deposit { background-color: var(--wallet-deposit-bg) !important; color: var(--brand-primary-contrast) !important; } #walletModal .modal-dialog .modal-content .modal-body div.wallet-box div.wallet-normal div.wallet-body div.wallet-buttons span.button.withdraw { background-image: var(--wallet-withdraw-gradient) !important; color: var(--brand-primary-contrast) !important; } #walletModal .modal-dialog .modal-content .modal-body div.wallet-footer a.button { background-color: var(--wallet-footer-btn-bg) !important; color: var(--wallet-footer-btn-color) !important; border-radius: var(--radius-xs) !important; } /* Tabs and chips */ .simple-bets .nav.nav-pills .nav-link.active, .simple-bets .nav.nav-pills .nav-link[aria-selected="true"], .simple-bets ul li button.active, .simple-bets ul li button[aria-selected="true"] { color: var(--tab-active-color) !important; background-color: var(--tab-active-bg) !important; border-color: var(--tab-active-border) !important; } .faq__chip, .ato-btn { border-color: var(--chip-border); background: var(--chip-bg); color: var(--chip-color); border-radius: var(--radius-pill); } .faq__chip.is-active, .ato-btn.is-active { border-color: var(--chip-active-border) !important; background: var(--chip-active-bg) !important; color: var(--chip-active-color) !important; } /* Animated tab indicator */ .ato-indicator { background: linear-gradient( to bottom, rgba(var(--accent-rgb), 0.72), rgba(var(--accent-rgb), 0.42) ) !important; border: 1px solid rgba(var(--accent-rgb), 0.35) !important; border-radius: var(--radius-xs) !important; box-shadow: 0 10px 22px rgba(var(--accent-rgb), 0.22), inset 0 1px rgba(255, 255, 255, 0.18) !important; } /* Progress bars */ div.progress-bar span, .progress-fill, .race-progress .line, .simple-progress .fill { background: var(--progressbg) !important; } .progress-circle .progress-svg circle.circle-bg { stroke: rgba(139, 140, 167, 0.2); } .progress-circle .progress-svg circle.circle { stroke: var(--accent); } /* Game opener buttons */ .game-item div.game-top div.game-opener { border-color: var(--game-opener-border) !important; background: var(--game-opener-overlay) !important; border-radius: var(--radius-md); } .game-item div.game-top div.game-opener div.play-buttons span.button, .game-item div.game-top div.game-opener div.play-buttons a.button { background-color: var(--game-play-btn-bg) !important; color: var(--game-play-btn-color) !important; border-radius: var(--radius-sm) !important; } .game-item div.game-top div.game-opener div.play-buttons span.button.demo, .game-item div.game-top div.game-opener div.play-buttons a.button.demo { background-color: var(--game-demo-btn-bg) !important; color: var(--game-demo-btn-color) !important; } /* Race carousel CTA */ div.race-carousels div.slider-item .race-item div.head div.details div.buttons a.button { background-color: var(--accent) !important; color: var(--brand-primary-contrast) !important; border-color: var(--accent) !important; border-radius: var(--radius-xs) !important; } /* Sidebar / menu active marker and active links */ .sidebar .menu a.active, .sidebar .submenu a.active, .sidebar-menu a.active, .accordion-menu a.active, .lowbar .item.active { color: var(--accent) !important; } .sidebar .menu .active-indicator, .accordion-menu .active-indicator, .lowbar .indicator { background: var(--gradient-primary-horizontal) !important; box-shadow: var(--shadow-accent-sm); border-radius: var(--radius-pill); } /* FAQ background glow */ .faq__bg { filter: none !important; pointer-events: none; background: radial-gradient(700px 320px at 10% 0, rgba(var(--accent-rgb), 0.16), transparent 60%), radial-gradient(520px 260px at 100% 30%, rgba(255, 255, 255, 0.08), transparent 62%), radial-gradient(560px 300px at 20% 120%, rgba(var(--accent-rgb), 0.1), transparent 55%) !important; } /* Notification surfaces */ .notifications .notification-item, .notification-item { background: var(--gradient-surface) !important; border: var(--border-thin) solid var(--surface-border-soft); border-radius: var(--radius-sm) !important; } .notifications .notification-item.unread, .notification-item.unread { border-color: var(--accent-border) !important; box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.08); } /* Generic utility mappings for old hardcoded palette usage */ .theme-bg-primary, .bg-primary, [data-theme="primary"] { background-color: var(--accent) !important; color: var(--brand-primary-contrast) !important; } .theme-surface, .bg-surface, [data-theme="surface"] { background-color: var(--legacy-bg-3) !important; color: var(--text-primary) !important; } .theme-muted, .text-muted, [data-theme="muted"] { color: var(--legacy-text-muted) !important; } /* Settings page theme tokens */ :root { --settings-sidebar-bg: rgba(10, 18, 32, 0.9); --settings-sidebar-border: rgba(132, 172, 236, 0.2); --settings-sidebar-shadow: 0 18px 36px rgba(0, 0, 0, 0.34); --settings-sidebar-radius: 12px; --settings-sidebar-select-bg: rgba(255, 255, 255, 0.03); --settings-sidebar-item-radius: 8px; --settings-sidebar-item-color: rgba(223, 236, 255, 0.84); --settings-sidebar-item-active-bg: linear-gradient(120deg, rgba(var(--accent-rgb), 0.24), rgba(var(--accent-rgb), 0.08)); --settings-sidebar-active-color: #f4f9ff; --settings-content-bg: rgba(8, 14, 28, 0.86); --settings-content-border: rgba(130, 172, 241, 0.18); --settings-content-shadow: 0 24px 48px rgba(0, 0, 0, 0.36); --settings-content-radius: 12px; --settings-block-bg: rgba(12, 20, 36, 0.82); --settings-block-border: rgba(137, 178, 243, 0.18); --settings-block-divider: rgba(137, 178, 243, 0.16); --settings-block-header-bg: transparent; --settings-block-radius: 10px; --settings-block-title-color: rgba(244, 250, 255, 0.96); --settings-block-desc-color: rgba(194, 214, 244, 0.78); --settings-field-title-color: rgba(227, 240, 255, 0.9); --settings-control-bg: rgba(7, 16, 32, 0.72); --settings-control-border: rgba(139, 183, 251, 0.24); --settings-control-color: rgba(241, 248, 255, 0.95); --settings-control-radius: 8px; --settings-check-title-color: rgba(240, 248, 255, 0.94); --settings-check-desc-color: rgba(187, 209, 241, 0.74); /* Common page header */ --page-header-radius: 4px; --page-header-bg: var(--linearbg); --page-header-shadow: 0 18px 60px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08); --page-header-top-line: linear-gradient(90deg, rgba(var(--accent-rgb), 0), rgba(var(--accent-rgb), 0.55), rgba(var(--accent-rgb), 0)); --page-header-title-color: rgba(255, 255, 255, 0.96); --page-header-subtitle-color: rgba(255, 255, 255, 0.65); --page-header-icon-color: #0e1017; /* Blog detail */ --blog-detail-shell-border: rgba(255, 255, 255, 0.08); --blog-detail-shell-radius: 12px; --blog-detail-shell-bg: linear-gradient(180deg, rgba(8, 14, 28, 0.94), rgba(8, 14, 28, 0.84)); --blog-detail-shell-shadow: 0 24px 50px rgba(0, 0, 0, 0.36); --blog-detail-empty-border: rgba(255, 255, 255, 0.15); --blog-detail-empty-color: rgba(255, 255, 255, 0.8); --blog-detail-card-bg: rgba(255, 255, 255, 0.02); --blog-detail-close-border: rgba(255, 255, 255, 0.14); --blog-detail-close-bg: rgba(255, 255, 255, 0.04); --blog-detail-close-color: rgba(255, 255, 255, 0.9); --blog-detail-close-border-hover: rgba(255, 255, 255, 0.28); --blog-detail-close-bg-hover: rgba(255, 255, 255, 0.08); --blog-detail-image-border: rgba(255, 255, 255, 0.08); --blog-detail-title-color: #fff; --blog-detail-lead-color: rgba(255, 255, 255, 0.82); --blog-detail-time-color: rgba(255, 255, 255, 0.65); --blog-detail-content-color: rgba(255, 255, 255, 0.88); /* Policies page */ --policies-content-bg: rgba(8, 14, 28, 0.86); --policies-content-color: var(--text-secondary); --policies-link-color: var(--accent); --policies-heading-color: #fff; /* Wheel page */ --wheel-page-glow-a: rgba(var(--accent-rgb), 0.16); --wheel-page-glow-b: rgba(255, 255, 255, 0.07); --wheel-tabs-border: rgba(255, 255, 255, 0.08); --wheel-tabs-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)); --wheel-tabs-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 14px 24px rgba(0, 0, 0, 0.28); --wheel-tab-border: rgba(255, 255, 255, 0.16); --wheel-tab-bg: rgba(255, 255, 255, 0.03); --wheel-tab-color: rgba(255, 255, 255, 0.9); --wheel-tab-border-hover: rgba(255, 255, 255, 0.28); --wheel-tab-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); --wheel-tab-shadow-hover: 0 10px 18px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08); --wheel-chip-color: #fff; --wheel-chip-bg: rgba(var(--accent-rgb), 0.2); --wheel-chip-border: rgba(var(--accent-rgb), 0.36); --wheel-tab-active-border: rgba(var(--accent-rgb), 0.48); --wheel-tab-active-bg: linear-gradient(180deg, rgba(var(--accent-rgb), 0.86), rgba(var(--accent-rgb), 0.56)); --wheel-tab-active-shadow: 0 10px 20px rgba(var(--accent-rgb), 0.24); --wheel-card-border: rgba(255, 255, 255, 0.08); --wheel-card-bg: var(--modalbg); --wheel-card-shadow: 0 16px 32px rgba(0, 0, 0, 0.3); --wheel-stage-ring: rgba(255, 255, 255, 0.1); --wheel-stage-ring-outer: rgba(255, 255, 255, 0.03); --wheel-stage-plate-border: rgba(255, 255, 255, 0.14); --wheel-stage-plate-bg: radial-gradient(circle, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); --wheel-stage-center-bg: radial-gradient(circle at 50% 35%, rgba(38, 53, 80, 0.92), rgba(14, 22, 38, 0.98)); --wheel-stage-center-border: rgba(255, 255, 255, 0.26); --wheel-stage-center-ring: rgba(6, 12, 24, 0.62); --wheel-stage-center-shadow: 0 10px 24px rgba(0, 0, 0, 0.42); --wheel-stage-center-highlight: rgba(255, 255, 255, 0.14); --wheel-halo-outer-border: rgba(var(--accent-rgb), 0.36); --wheel-halo-inner-border: rgba(var(--accent-rgb), 0.22); --wheel-halo-inner-shadow: inset 0 0 45px rgba(var(--accent-rgb), 0.16); --wheel-arrow-shadow: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45)); --wheel-spin-btn-border: rgba(255, 255, 255, 0.2); --wheel-spin-btn-bg: linear-gradient(180deg, rgba(30, 47, 73, 0.94), rgba(12, 20, 34, 0.97)); --wheel-spin-btn-color: rgba(236, 245, 255, 0.96); --wheel-spin-btn-shadow: 0 12px 24px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(var(--accent-rgb), 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12); --wheel-side-summary-border: rgba(255, 255, 255, 0.08); --wheel-side-summary-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)); --wheel-muted-text: rgba(255, 255, 255, 0.7); --wheel-strong-text: #fff; --wheel-status-border: rgba(255, 255, 255, 0.15); --wheel-status-bg: rgba(255, 255, 255, 0.04); --wheel-status-ready-color: #7dffb6; --wheel-status-ready-border: rgba(125, 255, 182, 0.35); --wheel-status-ready-bg: rgba(125, 255, 182, 0.12); --wheel-status-passive-color: rgba(255, 255, 255, 0.76); --wheel-article-border: rgba(255, 255, 255, 0.08); --wheel-article-bg: rgba(255, 255, 255, 0.01); --wheel-article-color: rgba(255, 255, 255, 0.88); --wheel-result-border: rgba(var(--accent-rgb), 0.22); --wheel-result-bg: rgba(var(--accent-rgb), 0.1); --wheel-register-btn-border: rgba(var(--accent-rgb), 0.5); --wheel-register-btn-bg: linear-gradient(180deg, var(--accent), rgba(var(--accent-rgb), 0.8)); --wheel-register-btn-color: #fff; --wheel-register-btn-shadow: 0 12px 24px rgba(var(--accent-rgb), 0.2); /* Promotions cards */ --promotion-hover-panel-bg: linear-gradient(180deg, rgba(17, 24, 39, 0.94), rgba(16, 23, 36, 0.96)); --promotion-hover-panel-pattern: radial-gradient(620px 240px at 80% 20%, rgba(255, 255, 255, 0.04), transparent 66%); --promotion-hover-title-color: rgba(255, 255, 255, 0.96); --promotion-hover-desc-color: rgba(184, 204, 232, 0.78); --promotion-bottom-icon-color: var(--text-primary); --promotion-bottom-info-color: var(--text-muted); } header#header:before { background: linear-gradient(to left, #0000, #0f011c 100%); } @media (min-width: 992px) { #responsive-menu.responsive-menu.active-menu .sidebar-wrapper { background: #0f061b !important; } } @media (min-width: 992px) { #responsive-menu.responsive-menu.active-menu .menu-head { background: #0e0a19 !important; } } @media (min-width: 992px) { #responsive-menu.responsive-menu.active-menu .sidebar-wrapper, #responsive-menu.responsive-menu.active-menu .menu-body { background: #0e0b19 !important; } } #responsive-menu .menu-head .title .text { color: white !important; } #responsive-menu .menu-body .to-search-modal .text { color: white !important; } .p2label { color: white !important; } #responsive-menu .sb-top-btn .sb-top-title { color: white !important; } .sb-top-btn.active .icon img, .sb-top-btn.active svg { color: white !important; } .sl-acc__headTitle { color: white !important; } @media (max-width: 420px) { .sl-acc__itemInner { color: white !important; } } #responsive-menu .sidebar-lang-trigger .label { color: white !important; } .hero-area-slider.type-2 .hero-slide-media { aspect-ratio: 1392 / 621 !important; } /* ========================================================= FOOTER LOGO FIX — GÜÇLÜ OVERRIDE ========================================================= */ /* Footer wrapper: logo container — ÇİZGİNİN ÜSTÜNDE, ORTALI */ footer .footer-logo, footer .logo, footer [class*="logo"], footer div[class*="logo"] { display: block !important; width: 100% !important; max-width: none !important; text-align: center !important; padding: 0 !important; justify-content: center !important; align-items: center !important; animation: none !important; transform: none !important; position: absolute !important; top: 0 !important; left: 50% !important; transform: translate(-50%, -50%) !important; z-index: 10 !important; margin: 0 !important; padding: 0 8px !important; background: var(--footer-bg, #090516) !important; border-radius: 4px !important; } /* Footer logo resmi */ footer .footer-logo img, footer .footer-logo svg, footer .logo img, footer .logo svg, footer [class*="logo"] img, footer [class*="logo"] svg, footer div[class*="logo"] img, footer div[class*="logo"] svg { display: inline-block !important; width: 120px !important; max-width: 120px !important; height: auto !important; object-fit: contain !important; margin: 0 auto !important; padding: 0 !important; animation: none !important; transform: none !important; filter: drop-shadow(0 0 8px rgba(160, 60, 220, 0.28)) !important; } @media (max-width: 767px) { footer .footer-logo, footer .logo, footer [class*="logo"] { left: 50% !important; transform: translate(-50%, -50%) !important; } footer .footer-logo img, footer .footer-logo svg, footer .logo img, footer .logo svg, footer [class*="logo"] img, footer [class*="logo"] svg { width: 100px !important; max-width: 100px !important; } } /* ╔══════════════════════════════════════════════════════════╗ ║ G O B E T I — U L T R A P R E M I U M ║ ╚══════════════════════════════════════════════════════════╝ */ /* ═══════════════════════════════════════════════════════════ 1. KEYFRAMES ═══════════════════════════════════════════════════════════ */ /* Buton / kart üzerinden geçen ışık şeridi */ @keyframes shimmer { 0% { transform: translateX(-150%) skewX(-20deg); } 100% { transform: translateX(250%) skewX(-20deg); } } /* Kayıt Ol butonu etrafında yayılan halka */ @keyframes ring-pulse { 0% { box-shadow: 0 0 0 0 rgba(196, 77, 255, 0.55), 0 10px 32px rgba(130, 40, 200, 0.42), inset 0 1px 0 rgba(255,255,255,0.24); } 50% { box-shadow: 0 0 0 10px rgba(196, 77, 255, 0), 0 16px 44px rgba(130, 40, 200, 0.72), inset 0 1px 0 rgba(255,255,255,0.32); } 100% { box-shadow: 0 0 0 0 rgba(196, 77, 255, 0.55), 0 10px 32px rgba(130, 40, 200, 0.42), inset 0 1px 0 rgba(255,255,255,0.24); } } /* Header alt çizgisi akıyor */ @keyframes border-glow-flow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Nefes alan ambient ışık */ @keyframes ambient-breathe { 0%, 100% { opacity: 0.45; transform: translateX(-50%) scale(1); } 50% { opacity: 0.85; transform: translateX(-50%) scale(1.08); } } /* Ambient ışık — sağ alt */ @keyframes ambient-breathe-br { 0%, 100% { opacity: 0.35; transform: scale(1); } 50% { opacity: 0.70; transform: scale(1.10); } } /* Bildirim rozeti ping */ @keyframes badge-ping { 0% { box-shadow: 0 0 0 0 rgba(196, 77, 255, 0.70); } 60% { box-shadow: 0 0 0 9px rgba(196, 77, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(196, 77, 255, 0); } } /* Oyun kartı hover shimmer */ @keyframes card-shine { 0% { transform: translateX(-130%) rotate(-18deg); } 100% { transform: translateX(230%) rotate(-18deg); } } /* Sidebar aktif çizgisi büyüyor */ @keyframes active-line-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } } /* Progress bar dolumu */ @keyframes progress-fill-glow { 0%, 100% { box-shadow: 0 0 10px rgba(180,80,255,0.4); } 50% { box-shadow: 0 0 22px rgba(200,100,255,0.7); } } /* Chip / tab aktif — subtle glow */ @keyframes chip-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(160,50,240,0.0), inset 0 1px rgba(255,255,255,0.12); } 50% { box-shadow: 0 0 12px 2px rgba(160,50,240,0.22), inset 0 1px rgba(255,255,255,0.18); } } /* Logo drop-shadow nabzı */ @keyframes logo-pulse { 0%, 100% { filter: drop-shadow(0 0 8px rgba(180, 80, 255, 0.28)); } 50% { filter: drop-shadow(0 0 18px rgba(200,100,255, 0.52)); } } /* Lowbar wallet butonu halka */ @keyframes wallet-ring { 0% { box-shadow: 0 0 0 0 rgba(140,48,225,0.55); } 70% { box-shadow: 0 0 0 8px rgba(140,48,225,0); } 100% { box-shadow: 0 0 0 0 rgba(140,48,225,0); } } /* Footer çizgi akışı */ @keyframes footer-line { 0% { background-position: -100% 0; } 100% { background-position: 200% 0; } } /* ═══════════════════════════════════════════════════════════ 2. GLOBAL AMBIENT LIGHTING ═══════════════════════════════════════════════════════════ */ /* Üst-orta mor halo */ body::before { content: "" !important; position: fixed !important; top: -25vh !important; left: 50% !important; width: 1200px !important; height: 700px !important; background: radial-gradient(ellipse at 50% 50%, rgba(140,48,225,0.14) 0%, rgba(100,25,185,0.07) 45%, transparent 72%) !important; pointer-events: none !important; z-index: 0 !important; animation: ambient-breathe 7s ease-in-out infinite !important; } /* Sağ-alt ikincil halo */ body::after { content: "" !important; position: fixed !important; bottom: -10vh !important; right: -15vw !important; width: 800px !important; height: 600px !important; background: radial-gradient(ellipse at 50% 50%, rgba(120,40,210,0.10) 0%, rgba(80,20,160,0.05) 50%, transparent 72%) !important; pointer-events: none !important; z-index: 0 !important; animation: ambient-breathe-br 9s ease-in-out infinite 1.5s !important; } /* ═══════════════════════════════════════════════════════════ 3. HEADER ═══════════════════════════════════════════════════════════ */ header#header { background: linear-gradient(180deg, rgba(11, 7, 26, 0.98) 0%, rgba(8, 5, 19, 0.98) 100%) !important; border-bottom: 1px solid transparent !important; /* Animated gradient border-bottom */ background-image: linear-gradient(180deg, rgba(11,7,26,0.98), rgba(8,5,19,0.98)), linear-gradient(90deg, transparent 0%, rgba(180,80,255,0.55) 25%, rgba(220,120,255,0.85) 50%, rgba(180,80,255,0.55) 75%, transparent 100%) !important; background-origin: border-box !important; background-clip: padding-box, border-box !important; box-shadow: 0 2px 0 rgba(200,100,255,0.12), 0 8px 48px rgba(0,0,0,0.60), 0 0 100px rgba(140,48,225,0.07) !important; backdrop-filter: blur(22px) saturate(1.5) !important; -webkit-backdrop-filter: blur(22px) saturate(1.5) !important; position: relative !important; z-index: 1000 !important; } /* Header yüksekliği */ header#header div.middle-header { min-height: 58px !important; height: 58px !important; position: relative !important; } header#header div.middle-header div.middle-header-container { padding-top: 0 !important; padding-bottom: 0 !important; min-height: 58px !important; height: 58px !important; align-items: center !important; position: static !important; } /* ── LOGO: tam orta ── */ header#header div.middle-header div.middle-header-container div.logo { position: absolute !important; left: 0 !important; right: 0 !important; top: 50% !important; transform: translateY(-50%) !important; width: 100% !important; text-align: center !important; pointer-events: none !important; z-index: 20 !important; margin: 0 !important; padding: 0 !important; line-height: 0 !important; background: none !important; } header#header div.middle-header div.middle-header-container div.logo a, header#header div.middle-header div.middle-header-container div.logo > a { pointer-events: auto !important; display: inline-block !important; } header#header div.middle-header div.middle-header-container div.logo img, header#header div.middle-header div.middle-header-container div.logo svg { width: 180px !important; height: auto !important; display: inline-block !important; animation: logo-pulse 4s ease-in-out infinite !important; transition: filter 0.3s ease !important; transform: none !important; } header#header div.middle-header div.middle-header-container div.logo:hover img, header#header div.middle-header div.middle-header-container div.logo:hover svg { filter: drop-shadow(0 0 24px rgba(210,110,255,0.70)) !important; transform: none !important; } /* ── KAYIT OL Butonu ── */ header#header div.middle-header div.middle-header-container div.header-buttons div.login-buttons a.button.register { position: relative !important; overflow: hidden !important; background: linear-gradient(135deg, #b030ff 0%, #7820f0 45%, #c84dff 100%) !important; border: 1px solid rgba(218,120,255,0.55) !important; border-radius: 11px !important; letter-spacing: 0.05em !important; font-weight: 700 !important; text-shadow: 0 1px 4px rgba(0,0,0,0.35) !important; animation: ring-pulse 2.6s ease-in-out infinite !important; transition: transform 0.22s cubic-bezier(.2,.9,.2,1), filter 0.2s ease !important; } /* Shimmer şeridi */ header#header div.middle-header div.middle-header-container div.header-buttons div.login-buttons a.button.register::before { content: "" !important; position: absolute !important; top: -10% !important; left: 0 !important; width: 45% !important; height: 120% !important; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.32), transparent) !important; animation: shimmer 2.2s ease-in-out infinite !important; pointer-events: none !important; } /* Üstte beyaz çizgi — premium cam efekti */ header#header div.middle-header div.middle-header-container div.header-buttons div.login-buttons a.button.register::after { content: "" !important; position: absolute !important; top: 0 !important; left: 8% !important; width: 84% !important; height: 1px !important; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent) !important; pointer-events: none !important; } header#header div.middle-header div.middle-header-container div.header-buttons div.login-buttons a.button.register:hover { transform: translateY(-3px) scale(1.05) !important; filter: brightness(1.18) !important; animation: none !important; box-shadow: 0 0 0 5px rgba(196,77,255,0.20), 0 18px 44px rgba(130,40,200,0.62), inset 0 1px 0 rgba(255,255,255,0.35) !important; } header#header div.middle-header div.middle-header-container div.header-buttons div.login-buttons a.button.register:active { transform: translateY(0) scale(0.97) !important; } /* ── GİRİŞ YAP butonu ── */ header#header div.middle-header div.middle-header-container div.header-buttons div.login-buttons a.button.login { color: rgba(230,200,255,0.92) !important; letter-spacing: 0.03em !important; transition: color 0.2s ease, text-shadow 0.2s ease !important; } header#header div.middle-header div.middle-header-container div.header-buttons div.login-buttons a.button.login:hover { color: #e8b4ff !important; text-shadow: 0 0 14px rgba(196,77,255,0.45) !important; } /* ── WALLET Butonu ── */ header#header div.middle-header div.middle-header-container div.header-buttons div.wallet-menu div.current-wallet a.wallet-button { position: relative !important; overflow: hidden !important; border: 1px solid rgba(140,48,225,0.38) !important; border-radius: 11px !important; transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.2s ease !important; } header#header div.middle-header div.middle-header-container div.header-buttons div.wallet-menu div.current-wallet a.wallet-button::before { content: "" !important; position: absolute !important; top: -10% !important; left: 0 !important; width: 45% !important; height: 120% !important; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.16), transparent) !important; animation: shimmer 3s ease-in-out infinite 0.8s !important; pointer-events: none !important; } header#header div.middle-header div.middle-header-container div.header-buttons div.wallet-menu div.current-wallet a.wallet-button:hover { filter: brightness(1.16) !important; transform: translateY(-2px) !important; box-shadow: 0 12px 32px rgba(140,48,225,0.36), 0 4px 16px rgba(0,0,0,0.32) !important; } /* ═══════════════════════════════════════════════════════════ 4. PRIMARY BUTTONS (form / auth / genel) ═══════════════════════════════════════════════════════════ */ .common-form-button .button, form.general-form div.form-buttons button, .auth div.auth-box form.auth-form div.form-buttons button, .auth-modal .modal-dialog .modal-content .modal-box form.auth-form div.form-buttons button { position: relative !important; overflow: hidden !important; background: linear-gradient(135deg, #b030ff 0%, #7820f0 50%, #c84dff 100%) !important; border: 1px solid rgba(218,120,255,0.45) !important; letter-spacing: 0.05em !important; font-weight: 700 !important; text-shadow: 0 1px 4px rgba(0,0,0,0.30) !important; box-shadow: 0 8px 26px rgba(140,48,225,0.40), inset 0 1px 0 rgba(255,255,255,0.20) !important; transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.2s ease !important; } .common-form-button .button::before, form.general-form div.form-buttons button::before, .auth div.auth-box form.auth-form div.form-buttons button::before, .auth-modal .modal-dialog .modal-content .modal-box form.auth-form div.form-buttons button::before { content: "" !important; position: absolute !important; top: -10% !important; left: 0 !important; width: 45% !important; height: 120% !important; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.26), transparent) !important; animation: shimmer 2.6s ease-in-out infinite !important; pointer-events: none !important; } .common-form-button .button:hover, form.general-form div.form-buttons button:hover, .auth div.auth-box form.auth-form div.form-buttons button:hover, .auth-modal .modal-dialog .modal-content .modal-box form.auth-form div.form-buttons button:hover { filter: brightness(1.16) !important; transform: translateY(-2px) !important; box-shadow: 0 14px 38px rgba(140,48,225,0.56), inset 0 1px 0 rgba(255,255,255,0.28) !important; } /* ═══════════════════════════════════════════════════════════ 5. INPUTS & FORMS ═══════════════════════════════════════════════════════════ */ .auth-modal .modal-dialog .modal-content .modal-box form.auth-form div.form-group div.form-item input:focus, form.general-form div.form-group div.form-item input:focus, form.general-form div.form-group div.form-item select:focus, .phone-input input:focus { border-color: rgba(196,77,255,0.72) !important; box-shadow: 0 0 0 3px rgba(140,48,225,0.22), 0 0 22px rgba(140,48,225,0.14) !important; outline: none !important; } /* ═══════════════════════════════════════════════════════════ 6. MODALS & CARDS ═══════════════════════════════════════════════════════════ */ .modal .modal-dialog .modal-content, .auth-modal .modal-dialog .modal-content .modal-body { background: linear-gradient(155deg, rgba(16,9,36,0.97) 0%, rgba(9, 6,24,0.97) 100%) !important; border: 1px solid rgba(160,60,240,0.26) !important; border-radius: 20px !important; box-shadow: 0 40px 90px rgba(0,0,0,0.72), 0 0 0 1px rgba(210,100,255,0.10), inset 0 1px 0 rgba(255,255,255,0.06), inset 0 0 80px rgba(120,40,200,0.04) !important; backdrop-filter: blur(24px) saturate(1.4) !important; } /* ═══════════════════════════════════════════════════════════ 7. GAME CARDS ═══════════════════════════════════════════════════════════ */ .game-item { border-radius: 13px !important; overflow: hidden !important; position: relative !important; transition: transform 0.28s cubic-bezier(.18,.89,.32,1.25), box-shadow 0.28s ease !important; will-change: transform, box-shadow !important; } /* Gizli shine şeridi */ .game-item::before { content: "" !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 55% !important; height: 100% !important; background: linear-gradient(108deg, transparent 28%, rgba(255,255,255,0.13) 50%, transparent 72%) !important; transform: translateX(-140%) rotate(-18deg) !important; pointer-events: none !important; z-index: 3 !important; border-radius: 13px !important; } .game-item:hover::before { animation: card-shine 0.62s ease forwards !important; } .game-item:hover { transform: translateY(-9px) scale(1.042) !important; box-shadow: 0 30px 60px rgba(0,0,0,0.65), 0 0 0 2px rgba(175,65,250,0.52), 0 0 50px rgba(140,48,225,0.26) !important; z-index: 5 !important; } .game-item div.game-top div.game-opener { transition: border-color 0.28s ease, box-shadow 0.28s ease !important; backdrop-filter: blur(6px) !important; } .game-item:hover div.game-top div.game-opener { border-color: rgba(210,90,255,0.85) !important; box-shadow: inset 0 0 40px rgba(140,48,225,0.22), 0 0 20px rgba(140,48,225,0.14) !important; } /* Play / Demo butonları */ .game-item div.game-top div.game-opener div.play-buttons span.button, .game-item div.game-top div.game-opener div.play-buttons a.button { transition: transform 0.2s ease, box-shadow 0.2s ease !important; } .game-item div.game-top div.game-opener div.play-buttons span.button:hover, .game-item div.game-top div.game-opener div.play-buttons a.button:hover { transform: scale(1.08) !important; box-shadow: 0 8px 24px rgba(140,48,225,0.48) !important; } /* ═══════════════════════════════════════════════════════════ 8. TABS, CHIPS & PILL INDICATOR ═══════════════════════════════════════════════════════════ */ .faq__chip, .ato-btn { transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease !important; } .faq__chip:hover, .ato-btn:hover { transform: translateY(-1px) !important; border-color: rgba(200,100,255,0.45) !important; color: rgba(240,210,255,0.92) !important; } .faq__chip.is-active, .ato-btn.is-active { background: linear-gradient(135deg, rgba(165,35,245,0.32), rgba(125,55,210,0.20)) !important; border-color: rgba(210,100,255,0.70) !important; color: #ebbfff !important; animation: chip-glow 3s ease-in-out infinite !important; } .ato-indicator { background: linear-gradient(135deg, rgba(168,38,248,0.82), rgba(125,45,205,0.60)) !important; border: 1px solid rgba(218,110,255,0.54) !important; border-radius: 11px !important; box-shadow: 0 8px 24px rgba(140,48,225,0.34), inset 0 1px 0 rgba(255,255,255,0.22) !important; } /* ═══════════════════════════════════════════════════════════ 9. PROGRESS BARS ═══════════════════════════════════════════════════════════ */ div.progress-bar span, .progress-fill, .race-progress .line, .simple-progress .fill { background: linear-gradient(90deg, #7520ef 0%, #a855f7 38%, #c84dff 68%, #e879f9 100%) !important; border-radius: 999px !important; animation: progress-fill-glow 2.5s ease-in-out infinite !important; } .progress-circle .progress-svg circle.circle { stroke: url(#accentGrad) var(--accent) !important; filter: drop-shadow(0 0 4px rgba(200,100,255,0.5)) !important; } /* ═══════════════════════════════════════════════════════════ 10. SIDEBAR / MENU ═══════════════════════════════════════════════════════════ */ #responsive-menu.responsive-menu, .sidebar-wrapper { border-right: 1px solid rgba(150,50,240,0.16) !important; } /* Menü linkleri */ .sidebar .menu a, .accordion-menu a, .sidebar-menu a { border-radius: 9px !important; transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, padding-left 0.2s ease !important; } .sidebar .menu a:hover, .accordion-menu a:hover, .sidebar-menu a:hover { background: rgba(140,48,225,0.11) !important; padding-left: 5px !important; color: rgba(230,190,255,0.96) !important; } /* Aktif link */ .sidebar .menu a.active, .sidebar .submenu a.active, .sidebar-menu a.active, .accordion-menu a.active { background: linear-gradient(90deg, rgba(140,48,225,0.24), rgba(140,48,225,0.06)) !important; color: #dba0ff !important; position: relative !important; } /* Sol çizgi — grow animasyonu */ .sidebar .menu a.active::before, .accordion-menu a.active::before { content: "" !important; position: absolute !important; left: 0 !important; top: 15% !important; height: 70% !important; width: 3px !important; background: linear-gradient(180deg, #c84dff, #7820f0) !important; border-radius: 999px !important; box-shadow: 0 0 10px rgba(200,77,255,0.55) !important; animation: active-line-grow 0.32s cubic-bezier(.2,.9,.2,1) both !important; } /* Casino / Spor top butonları */ .sb-top-btn { border-radius: 11px !important; transition: transform 0.22s ease, box-shadow 0.22s ease !important; } .sb-top-btn:hover { transform: translateY(-2px) !important; box-shadow: 0 10px 24px rgba(0,0,0,0.38), 0 0 0 1px rgba(160,60,240,0.24) !important; } .sb-top-btn.active { box-shadow: 0 10px 28px rgba(0,0,0,0.42), 0 0 0 2px rgba(175,65,250,0.42) !important; } /* ═══════════════════════════════════════════════════════════ 11. NOTIFICATION BADGE ═══════════════════════════════════════════════════════════ */ .notif-badge, [class*="notif-badge"], [class*="notification-badge"] { background: linear-gradient(135deg, #c84dff, #7820f0) !important; border: 2px solid rgba(255,255,255,0.32) !important; box-shadow: 0 0 10px rgba(200,77,255,0.45) !important; animation: badge-ping 2.2s ease-out infinite !important; } /* ═══════════════════════════════════════════════════════════ 12. FOOTER ═══════════════════════════════════════════════════════════ */ footer { background: linear-gradient(180deg, rgba(9, 5, 22, 1) 0%, rgba(5, 3, 13, 1) 100%) !important; border-top: 1px solid rgba(150,50,240,0.20) !important; box-shadow: 0 -10px 50px rgba(0,0,0,0.60) !important; position: relative !important; } /* Animasyonlu üst çizgi */ footer::before { content: "" !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 1px !important; background: linear-gradient(90deg, transparent 0%, rgba(180,80,255,0.0) 5%, rgba(210,100,255,0.8) 30%, rgba(230,120,255,1.0) 50%, rgba(210,100,255,0.8) 70%, rgba(180,80,255,0.0) 95%, transparent 100%) !important; background-size: 200% 100% !important; animation: footer-line 4s linear infinite !important; pointer-events: none !important; } footer a { transition: color 0.2s ease, text-shadow 0.2s ease !important; } footer a:hover { color: #c084fc !important; text-shadow: 0 0 12px rgba(192,84,252,0.35) !important; } /* ═══════════════════════════════════════════════════════════ 13. LOWBAR — MOBİL DOCK ═══════════════════════════════════════════════════════════ */ .lowbar, [class*="lowbar"] { background: rgba(9, 6, 21, 0.90) !important; border-top: 1px solid rgba(150,50,240,0.24) !important; backdrop-filter: blur(24px) saturate(1.6) !important; -webkit-backdrop-filter: blur(24px) saturate(1.6) !important; box-shadow: 0 -6px 36px rgba(0,0,0,0.60), 0 -1px 0 rgba(200,100,255,0.12) !important; } .lowbar .item.active, [class*="lowbar"] .item.active { color: #c084fc !important; text-shadow: 0 0 14px rgba(192,84,252,0.65) !important; } /* Wallet butonu ring */ .lowbar [class*="wallet"], [class*="lowbar"] [class*="wallet"] { animation: wallet-ring 2.8s ease-out infinite !important; } /* ═══════════════════════════════════════════════════════════ 14. PROVIDER LOGOALARI ═══════════════════════════════════════════════════════════ */ .providers-list .provider-item, div[class*="provider"] img, div[class*="provider"] svg { filter: grayscale(0.25) brightness(0.88) !important; transition: filter 0.24s ease, transform 0.24s ease !important; } .providers-list .provider-item:hover, div[class*="provider"]:hover img, div[class*="provider"]:hover svg { filter: grayscale(0) brightness(1.18) drop-shadow(0 0 10px rgba(200,100,255,0.42)) !important; transform: scale(1.07) !important; } /* ═══════════════════════════════════════════════════════════ 15. CRYPTO / PAYMENT ICONS ═══════════════════════════════════════════════════════════ */ div[class*="payment"] img, div[class*="crypto"] img, .payment-methods img, .crypto-icons img { filter: brightness(0.82) saturate(0.75) !important; transition: filter 0.22s ease, transform 0.22s ease !important; } div[class*="payment"]:hover img, div[class*="crypto"]:hover img, .payment-methods img:hover, .crypto-icons img:hover { filter: brightness(1.12) saturate(1.25) drop-shadow(0 0 8px rgba(196,77,255,0.30)) !important; transform: scale(1.10) !important; } /* ═══════════════════════════════════════════════════════════ 16. HERO SLIDER ═══════════════════════════════════════════════════════════ */ .hero-area-slider .swiper-slide { border-radius: 16px !important; overflow: hidden !important; } /* ═══════════════════════════════════════════════════════════ 17. FOCUS RING — ERİŞİLEBİLİRLİK ═══════════════════════════════════════════════════════════ */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid rgba(196,77,255,0.70) !important; outline-offset: 3px !important; border-radius: 6px !important; } /* ═══════════════════════════════════════════════════════════ 18. SCROLLBAR ═══════════════════════════════════════════════════════════ */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #b030ff, #6a18cc); border-radius: 999px; box-shadow: 0 0 10px rgba(176,48,255,0.50); } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #d060ff, #9030ee); } footer#footer div.footer-logo { margin-top: -32px !important; background: none !important; } header#header div.middle-header div.middle-header-container div.logo a, header#header div.middle-header div.middle-header-container div.logo > a { pointer-events: none !important; display: inline-block !important; } footer#footer div.footer-logo { margin-top: -32px !important; background: none !important; }