/* ========================================================= BonusRiver – Global LIGHT theme (Casino page support) Requires: Load this file LAST. ========================================================= */ html[data-theme="light"] { /* Core palette */ --page-bg: #F5F7FB; --surface: #FFFFFF; --surface-2: #F1F4FA; --text: #111827; --text-2: #4B5563; --muted: #6B7280; --border: rgba(17, 24, 39, 0.10); --border-strong: rgba(17, 24, 39, 0.16); /* Brand */ --brand: #0AA6D6; --brand-deep: #056F95; /* Shadows (soft, premium) */ --shadow-soft: 0 12px 30px rgba(17, 24, 39, 0.10); --shadow-soft-2: 0 8px 22px rgba(17, 24, 39, 0.08); /* Override your dark-mode tokens */ --dark-gradient: linear-gradient(180deg, var(--page-bg), var(--page-bg)); --card-gradient: linear-gradient(180deg, var(--surface), var(--surface)); --primary-gradient: linear-gradient(135deg, var(--brand) 0%, #078DB8 50%, var(--brand-deep) 100%); --gold-gradient: linear-gradient(135deg, #0AA6D6 0%, #0CC0F0 100%); --text-primary: var(--text); --text-secondary: var(--text-2); --text-muted: var(--muted); --border-color: var(--border); --border-light: var(--border-strong); --shadow-cyan: 0 14px 34px rgba(10, 166, 214, 0.22); --shadow-card: var(--shadow-soft-2); --shadow-dark: var(--shadow-soft); } /* Base */ html[data-theme="light"] body { background: var(--page-bg) !important; color: var(--text) !important; } /* ========================================================= Header: keep premium dark blue (same vibe as homepage) ========================================================= */ html[data-theme="light"] .header { background: linear-gradient( 180deg, rgba(10, 32, 45, 0.94) 0%, rgba(8, 24, 34, 0.97) 100% ) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important; backdrop-filter: blur(18px); } html[data-theme="light"] .header.scrolled { background: linear-gradient( 180deg, rgba(8, 24, 34, 0.97) 0%, rgba(6, 18, 26, 0.99) 100% ) !important; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35) !important; } html[data-theme="light"] .nav-link { color: rgba(255, 255, 255, 0.75) !important; } html[data-theme="light"] .nav-link:hover, html[data-theme="light"] .nav-link.active { color: #ffffff !important; } html[data-theme="light"] .nav-link::before { background: linear-gradient(90deg, var(--brand), var(--brand-deep)) !important; } html[data-theme="light"] .login-btn { background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; color: #ffffff !important; } html[data-theme="light"] .signup-btn { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%) !important; box-shadow: 0 14px 36px rgba(10, 166, 214, 0.35) !important; } /* ========================================================= Casino / Bonuses listing — compact heading ========================================================= */ .cl-heading { padding: 28px 0 0; } .cl-title { font-size: 1.8rem; font-weight: 900; color: #111827; margin: 0; letter-spacing: -0.3px; } .cl-sub { margin: 6px 0 0; font-size: 0.95rem; color: #6B7280; font-weight: 500; } /* Category quick-nav cards */ .cl-cats { padding: 20px 0 0; } .cl-cats-rail { position: relative; display: flex; align-items: center; } .cl-cats-row { display: flex; gap: 10px; overflow-x: auto; overflow-y: visible; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; padding: 4px 0; } .cl-cats-row::-webkit-scrollbar { display: none; } .cl-cats-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(17,24,39,0.10); background: #fff; box-shadow: 0 2px 8px rgba(17,24,39,0.10); color: #111827; font-size: 0.75rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity 0.2s, box-shadow 0.2s; } .cl-cats-arrow-left { left: -16px; } .cl-cats-arrow-right { right: -16px; } .cl-cats-arrow.is-hidden { opacity: 0; pointer-events: none; } .cl-cats-arrow:hover { box-shadow: 0 4px 12px rgba(17,24,39,0.15); } .cl-cat-card { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 12px; background: #fff; border: 1px solid rgba(17,24,39,0.08); box-shadow: 0 2px 8px rgba(17,24,39,0.04); text-decoration: none; white-space: nowrap; flex-shrink: 0; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; } .cl-cat-card:hover { border-color: rgba(5,90,120,0.25); box-shadow: 0 4px 14px rgba(5,90,120,0.10); transform: translateY(-1px); } .cl-cat-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: rgba(10,166,214,0.10); color: #055A78; font-size: 0.85rem; flex-shrink: 0; } .cl-cat-label { font-size: 0.85rem; font-weight: 700; color: #111827; } @media (max-width: 768px) { .cl-cats { padding: 14px 0 0; } .cl-cats-row { gap: 8px; } .cl-cat-card { padding: 8px 12px; border-radius: 10px; } .cl-cat-icon { width: 28px; height: 28px; font-size: 0.8rem; border-radius: 6px; } .cl-cat-label { font-size: 0.8rem; } .cl-cats-arrow { display: none; } } @media (max-width: 480px) { .cl-cat-card { padding: 7px 10px; gap: 6px; } .cl-cat-icon { width: 24px; height: 24px; font-size: 0.7rem; } .cl-cat-label { font-size: 0.75rem; } } /* ========================================================= Filters section — compact ========================================================= */ html[data-theme="light"] .filters-section { background: transparent !important; padding: 20px 0 12px !important; } html[data-theme="light"] .filters-subtitle { color: var(--text-2) !important; } /* Filter buttons become clean pills — overridden below in bonuses section */ /* Results info box */ html[data-theme="light"] .results-info { background: var(--surface) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-soft-2) !important; } html[data-theme="light"] .results-text { color: var(--text-2) !important; } html[data-theme="light"] .results-text strong { color: #055A78 !important; } /* ========================================================= Casino cards (list) ========================================================= */ /* ========================================================= Casino Card — Compact Layout ========================================================= */ html[data-theme="light"] .casino-card { background: #fff !important; border: 1px solid rgba(17,24,39,0.10) !important; box-shadow: 0 1px 4px rgba(0,0,0,0.05) !important; border-radius: 16px !important; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important; } html[data-theme="light"] .casinos-grid .casino-card { padding: 0 !important; } html[data-theme="light"] .casino-card:hover { transform: translateY(-3px) !important; border-color: rgba(10,166,214,0.35) !important; box-shadow: 0 8px 24px rgba(10,166,214,0.12) !important; } html[data-theme="light"] .casino-card::before { display: none !important; } html[data-theme="light"] .casinos-grid { gap: 14px !important; } /* Hide old card elements */ html[data-theme="light"] .casino-header, html[data-theme="light"] .casino-badges-topright, html[data-theme="light"] .casino-main, html[data-theme="light"] .casino-description, html[data-theme="light"] .providers-section, html[data-theme="light"] .casino-hover-details { display: none !important; } /* Homepage casino cards use .casino-header as their real header — keep it visible on all breakpoints */ html[data-theme="light"] #featured-grid .casino-header, html[data-theme="light"] #new-grid .casino-header { display: flex !important; align-items: center; gap: 16px; } @media (max-width: 900px) { html[data-theme="light"] #featured-grid .casino-logo, html[data-theme="light"] #new-grid .casino-logo { width: 72px !important; height: 72px !important; min-width: 72px !important; border-radius: 14px !important; box-shadow: none !important; } } /* Mobile CTA buttons (reuse old class names for mobile) */ html[data-theme="light"] .claim-bonus-btn { background: linear-gradient(135deg, #00c2ff 0%, #006699 100%) !important; color: #fff !important; border-radius: 10px !important; padding: 12px 20px !important; font-size: 0.88rem !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; box-shadow: 0 4px 14px rgba(0,102,153,0.25) !important; text-align: center !important; text-decoration: none !important; display: block !important; } html[data-theme="light"] .claim-bonus-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,102,153,0.35) !important; } html[data-theme="light"] .more-details-btn { background: #fff !important; border: 1px solid rgba(17,24,39,0.12) !important; color: #6B7280 !important; border-radius: 10px !important; padding: 10px 20px !important; text-align: center !important; text-decoration: none !important; font-weight: 600 !important; display: block !important; } html[data-theme="light"] .more-details-btn:hover { background: rgba(10,166,214,0.08) !important; border-color: rgba(10,166,214,0.3) !important; color: #055A78 !important; } /* ---- New compact card layout (cc-*) ---- */ .cc-row { display: flex; align-items: center; padding: 12px 20px; gap: 20px; } .cc-left { display: flex; align-items: center; gap: 14px; flex: 0 0 340px; width: 340px; } .cc-rank { width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, #055A78, #0AA6D6); color: #fff; font-weight: 800; font-size: 0.85rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .cc-logo-wrap { flex-shrink: 0; display: block; } .cc-logo { width: 72px; height: 72px; object-fit: contain; border-radius: 12px; background: #fff; border: 1px solid rgba(17,24,39,0.08); box-shadow: 0 2px 8px rgba(17,24,39,0.06); } .cc-logo-placeholder { width: 72px; height: 72px; border-radius: 12px; background: #F3F6FC; color: #055A78; font-weight: 800; font-size: 1.5rem; display: flex; align-items: center; justify-content: center; } .cc-identity { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .cc-name { font-size: 1.05rem; font-weight: 800; color: #055A78; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cc-name:hover { color: #0AA6D6; } .cc-sub { font-size: 0.8rem; color: #6B7280; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cc-badges { display: flex; gap: 6px; flex-shrink: 0; } .cc-badge { padding: 2px 8px; border-radius: 6px; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap; } .cc-badge--editor { background: linear-gradient(135deg, #055A78, #0AA6D6); color: #fff; } .cc-badge--nonsticky { background: rgba(10,166,214,0.12); color: #055A78; border: 1px solid rgba(10,166,214,0.25); } .cc-badge--hot { background: linear-gradient(135deg, #ff6b35, #ff8c42); color: #fff; } /* Stats columns */ .cc-stats { display: flex; gap: 2px; flex: 1 1 auto; justify-content: center; } .cc-stat { display: flex; flex-direction: column; align-items: center; padding: 8px 0; width: 84px; flex: 0 0 84px; background: #F3F6FC; border-radius: 10px; } .cc-stat__value { font-size: 1.15rem; font-weight: 800; color: #111827; line-height: 1.2; } .cc-stat__value--accent { color: #055A78; font-size: 1.3rem; } .cc-stat__label { font-size: 0.7rem; font-weight: 600; color: #6B7280; text-transform: uppercase; letter-spacing: 0.3px; margin-top: 2px; } /* Right: rating + CTA */ .cc-right { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 0 0 auto; min-width: 150px; } .cc-rating { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 8px; background: linear-gradient(180deg, rgba(255,215,0,0.18), rgba(255,193,7,0.12)); border: 1px solid rgba(255,193,7,0.35); } .cc-rating__star { color: #F4B400; font-size: 0.9rem; } .cc-rating__num { font-weight: 800; font-size: 0.95rem; color: #111827; } .cc-cta { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 10px 20px; border-radius: 10px; background: linear-gradient(135deg, #00c2ff 0%, #006699 100%); color: #fff !important; font-weight: 800; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 4px 14px rgba(0,102,153,0.25); white-space: nowrap; } .cc-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,102,153,0.35); } .cc-review { font-size: 0.78rem; font-weight: 600; color: #6B7280; text-decoration: none; transition: color 0.2s ease; } .cc-review:hover { color: #055A78; } /* Mobile card — hidden by default, shown under 900px */ .cc-mobile-header { display: none; } .cc-mobile-stats { display: none; } .cc-mobile-actions { display: none; } @media (max-width: 900px) { .cc-row { display: none !important; } .cc-mobile-header { display: flex; align-items: flex-start; gap: 14px; padding: 22px 20px 18px; } .cc-mobile-logo { flex-shrink: 0; display: block; } .cc-mobile-logo-img { width: 64px; height: 64px; object-fit: contain; border-radius: 14px; background: #fff; border: 1px solid rgba(17,24,39,0.08); box-shadow: 0 2px 8px rgba(17,24,39,0.06); display: block; } .cc-mobile-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; } .cc-mobile-name-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; } .cc-mobile-name { font-size: 1.1rem; font-weight: 800; color: #055A78; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; } .cc-mobile-name:hover { color: #0AA6D6; } .cc-mobile-rating { flex-shrink: 0; display: inline-flex; align-items: center; gap: 3px; padding: 6px 11px; border-radius: 8px; background: linear-gradient(180deg, rgba(255,215,0,0.18), rgba(255,193,7,0.12)); border: 1px solid rgba(255,193,7,0.35); font-weight: 800; font-size: 0.95rem; color: #111827; white-space: nowrap; } .cc-mobile-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 16px 20px 16px; border-top: 1px solid rgba(17,24,39,0.07); border-bottom: 1px solid rgba(17,24,39,0.07); } .cc-mobile-stats .cc-stat { padding: 12px 4px; border-radius: 10px; } .cc-mobile-actions { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 22px; } .claim-bonus-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px; border-radius: 10px; background: linear-gradient(135deg, #00c2ff 0%, #006699 100%); color: #fff !important; font-weight: 800; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.5px; text-decoration: none; box-shadow: 0 4px 14px rgba(0,102,153,0.25); transition: transform 0.2s ease, box-shadow 0.2s ease; } .claim-bonus-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,102,153,0.35); } .more-details-btn { display: block; width: 100%; padding: 12px; border-radius: 10px; background: #fff; color: #374151 !important; font-weight: 600; font-size: 0.85rem; text-align: center; text-decoration: none; border: 1px solid #E5E7EB; transition: background 0.2s ease, color 0.2s ease; } .more-details-btn:hover { background: #F3F6FC; color: #055A78 !important; } } @media (min-width: 901px) { .cc-mobile-header { display: none !important; } .cc-mobile-stats { display: none !important; } .cc-mobile-actions { display: none !important; } } /* Modal claim button — kill gold */ html[data-theme="light"] .modal-claim-btn { background: linear-gradient(135deg, #0AA6D6 0%, #0CC0F0 100%) !important; color: #fff !important; box-shadow: 0 4px 18px rgba(10, 166, 214, 0.3) !important; } html[data-theme="light"] .modal-claim-btn:hover { box-shadow: 0 8px 28px rgba(10, 166, 214, 0.45) !important; transform: translateY(-2px); } /* ========================================================= Provider spotlight + FAQ ========================================================= */ html[data-theme="light"] .provider-spotlight, html[data-theme="light"] .faq-section { background: transparent !important; } html[data-theme="light"] .spotlight-content, html[data-theme="light"] .faq-item { background: var(--surface) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-soft-2) !important; } html[data-theme="light"] .spotlight-title, html[data-theme="light"] .faq-title { color: #055A78 !important; } html[data-theme="light"] .spotlight-body p, html[data-theme="light"] .faq-subtitle, html[data-theme="light"] .faq-note, html[data-theme="light"] .faq-answer p { color: #374151 !important; } html[data-theme="light"] .feature-item { background: #F3F6FC !important; border: 1px solid rgba(17,24,39,0.08) !important; } html[data-theme="light"] .feature-item span { color: var(--text) !important; } /* ========================================================= Modal (More Details) ========================================================= */ html[data-theme="light"] .modal-overlay { background: rgba(17, 24, 39, 0.55) !important; } html[data-theme="light"] .modal-content { background: var(--surface) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-soft) !important; } html[data-theme="light"] .modal-close { background: linear-gradient(135deg, #B91C1C 0%, #7F1D1D 100%) !important; box-shadow: 0 10px 22px rgba(185, 28, 28, 0.20) !important; } html[data-theme="light"] .modal-casino-info h2, html[data-theme="light"] .modal-section h3 { color: #055A78 !important; } html[data-theme="light"] .modal-description, html[data-theme="light"] .modal-pros, html[data-theme="light"] .modal-cons, html[data-theme="light"] .package-item, html[data-theme="light"] .info-item { background: #F3F6FC !important; border: 1px solid rgba(17,24,39,0.08) !important; } html[data-theme="light"] .payment-method-detailed, html[data-theme="light"] .provider-detailed { background: rgba(10,166,214,0.14) !important; color: #055A78 !important; border: 1px solid rgba(10,166,214,0.22) !important; } html[data-theme="light"] .feature-detailed { background: rgba(17,24,39,0.06) !important; color: var(--text) !important; border: 1px solid rgba(17,24,39,0.08) !important; } /* ========================================================= Footer: keep dark premium frame ========================================================= */ html[data-theme="light"] footer, html[data-theme="light"] .footer { background: linear-gradient( 180deg, rgba(18, 28, 36, 0.96) 0%, rgba(14, 22, 28, 0.98) 100% ) !important; color: rgba(255, 255, 255, 0.78) !important; border-top: 1px solid rgba(255, 255, 255, 0.10) !important; } html[data-theme="light"] .casino-desc { color: #2F3A46 !important; } html[data-theme="light"] .casino-card { padding: 28px !important; /* from 32px */ } html[data-theme="light"] .casino-main { gap: 24px !important; /* from 32px */ } html[data-theme="light"] .casino-info { gap: 24px !important; /* from 32px */ } html[data-theme="light"] .bonus-info, html[data-theme="light"] .payment-info { padding: 20px !important; /* from 24px */ } html[data-theme="light"] .more-details-btn { background: #ffffff !important; box-shadow: 0 10px 20px rgba(17,24,39,0.06) !important; } html[data-theme="light"] .results-info { border-color: rgba(17,24,39,0.08) !important; } /* ========================================= Casino cards: remove dead space / hover area ========================================= */ /* Don’t reserve space for hover sections */ html[data-theme="light"] .providers-section, html[data-theme="light"] .casino-hover-details { display: none !important; } /* Make the main layout size to content */ html[data-theme="light"] .casino-main { align-items: start !important; } /* If any child is stretching height, stop it */ html[data-theme="light"] .casino-info, html[data-theme="light"] .bonus-info, html[data-theme="light"] .payment-info { align-self: start !important; } /* Optional: tighten card padding a bit */ html[data-theme="light"] .casino-card { padding-bottom: 28px !important; } /* ========================================= Bonus info dividers (restore separators) ========================================= */ html[data-theme="light"] .bonus-item, html[data-theme="light"] .payment-item { border-bottom: 1px solid rgba(17, 24, 39, 0.10) !important; } html[data-theme="light"] .bonus-item:last-child, html[data-theme="light"] .payment-item:last-child { border-bottom: none !important; } /* ========================================= Casino rating badge – premium light style ========================================= */ html[data-theme="light"] .casino-rating-badge, html[data-theme="light"] .rating-badge { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 6px 10px !important; border-radius: 999px !important; background: linear-gradient( 180deg, rgba(255, 215, 0, 0.18), rgba(255, 193, 7, 0.12) ) !important; border: 1px solid rgba(255, 193, 7, 0.35) !important; box-shadow: 0 6px 14px rgba(255, 193, 7, 0.18) !important; } /* Star icon */ html[data-theme="light"] .casino-rating-badge i, html[data-theme="light"] .rating-badge i { color: #F4B400 !important; font-size: 14px !important; } /* Rating number */ html[data-theme="light"] .casino-rating-badge span, html[data-theme="light"] .rating-badge span { font-weight: 700 !important; color: #111827 !important; font-size: 14px !important; } /* Rating box — keep warm gold tint (it's a rating, not a CTA) */ html[data-theme="light"] .casino-rating-box { background: linear-gradient(180deg, rgba(255, 215, 0, 0.18), rgba(255, 193, 7, 0.12)) !important; color: #111827 !important; border: 1px solid rgba(255, 193, 7, 0.35) !important; } /* ========================================= Footer – match homepage exactly ========================================= */ html[data-theme="light"] footer, html[data-theme="light"] .footer { background: linear-gradient( 180deg, rgba(18, 28, 36, 0.96) 0%, rgba(14, 22, 28, 0.98) 100% ) !important; color: rgba(255, 255, 255, 0.78) !important; border-top: 1px solid rgba(255, 255, 255, 0.10) !important; } /* Footer links */ html[data-theme="light"] footer a, html[data-theme="light"] .footer a { color: rgba(255, 255, 255, 0.70) !important; } html[data-theme="light"] footer a:hover, html[data-theme="light"] .footer a:hover { color: #0AA6D6 !important; } /* Footer headings */ html[data-theme="light"] footer h3, html[data-theme="light"] footer h4 { color: #ffffff !important; } /* ========================================= Mobile safety – light theme ========================================= */ @media (max-width: 600px) { html[data-theme="light"] .casino-name-mobile { color: #055A78 !important; /* was white in dark mode */ } html[data-theme="light"] .casino-rating-badge { background: rgba(10,166,214,0.14) !important; color: #055A78 !important; border: 1px solid rgba(10,166,214,0.22) !important; } } @media (max-width: 768px) { html[data-theme="light"] .filters-container { gap: 14px !important; } html[data-theme="light"] .filter-btn { padding: 14px 18px !important; } } /* ========================================================= Bonus page – light theme overrides Applies when ========================================================= */ /* Hero section */ html[data-theme="light"] .hero-section { background: radial-gradient(900px 500px at 50% 0%, rgba(10,166,214,0.14), transparent 60%) !important; } html[data-theme="light"] .hero-gradient { opacity: 0.10 !important; } html[data-theme="light"] .hero-subtitle { color: var(--text-2) !important; } html[data-theme="light"] .hero-info { color: rgba(17,24,39,0.55) !important; } /* Hero stats cards */ html[data-theme="light"] .hero-stats .stat-item { background: var(--surface) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-soft-2) !important; backdrop-filter: none !important; } html[data-theme="light"] .hero-stats .stat-item:hover { box-shadow: var(--shadow-cyan) !important; border-color: rgba(10,166,214,0.35) !important; } html[data-theme="light"] .stat-number { color: #055A78 !important; } html[data-theme="light"] .stat-label { color: rgba(17,24,39,0.60) !important; } /* Filters section */ html[data-theme="light"] .filters-section { background: transparent !important; } html[data-theme="light"] .filters-title { -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; } html[data-theme="light"] .filters-subtitle { color: var(--text-2) !important; } /* Filter buttons */ html[data-theme="light"] .filter-btn { background: #fff !important; border: 1.5px solid #E2E8F0 !important; color: #4B5563 !important; box-shadow: 0 1px 3px rgba(17,24,39,0.06) !important; backdrop-filter: none !important; padding: 10px 18px !important; border-radius: 12px !important; font-size: 0.88rem !important; transform: none !important; } html[data-theme="light"] .filter-btn::before { display: none !important; } html[data-theme="light"] .filter-btn i { color: #055A78 !important; } html[data-theme="light"] .filter-btn:hover { background: rgba(10,166,214,0.06) !important; border-color: #0AA6D6 !important; color: #055A78 !important; transform: none !important; box-shadow: 0 2px 8px rgba(10,166,214,0.15) !important; } html[data-theme="light"] .filter-btn.active { background: #055A78 !important; border-color: #055A78 !important; color: #fff !important; transform: none !important; box-shadow: 0 4px 14px rgba(5,90,120,0.25) !important; } html[data-theme="light"] .filter-btn.active i { color: #fff !important; } html[data-theme="light"] .filter-count { background: rgba(17,24,39,0.08) !important; color: #374151 !important; padding: 2px 7px !important; border-radius: 6px !important; font-size: 0.78rem !important; } html[data-theme="light"] .filter-btn.active .filter-count { background: rgba(255,255,255,0.25) !important; color: #fff !important; } /* Clear + sort buttons */ html[data-theme="light"] .clear-btn { background: linear-gradient(135deg, #B91C1C 0%, #7F1D1D 100%) !important; box-shadow: 0 10px 22px rgba(185, 28, 28, 0.20) !important; } html[data-theme="light"] .sort-btn { background: #fff !important; color: #4B5563 !important; border: 1.5px solid #E2E8F0 !important; box-shadow: 0 1px 3px rgba(17,24,39,0.06) !important; border-radius: 12px !important; padding: 10px 18px !important; font-size: 0.88rem !important; } html[data-theme="light"] .sort-btn i { color: #055A78 !important; } html[data-theme="light"] .sort-btn:hover { background: rgba(10,166,214,0.06) !important; border-color: #0AA6D6 !important; color: #055A78 !important; box-shadow: 0 2px 8px rgba(10,166,214,0.15) !important; } /* Results info */ html[data-theme="light"] .results-info { background: var(--surface) !important; border: 1px solid rgba(17,24,39,0.08) !important; box-shadow: var(--shadow-soft-2) !important; backdrop-filter: none !important; } html[data-theme="light"] .results-text { color: var(--text-2) !important; } html[data-theme="light"] .results-text strong { color: #055A78 !important; } /* Bonus list cards (uses .casino-card system in your CSS) */ html[data-theme="light"] .casino-card { background: var(--surface) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-soft-2) !important; backdrop-filter: none !important; } html[data-theme="light"] .casino-card:hover { border-color: rgba(10,166,214,0.35) !important; box-shadow: var(--shadow-cyan) !important; } /* Keep the top gradient bar visible */ html[data-theme="light"] .casino-card::before { transform: scaleX(1) !important; opacity: 0.9 !important; } /* Title + description */ html[data-theme="light"] .casino-name { color: #055A78 !important; } html[data-theme="light"] .casino-desc { color: #2F3A46 !important; } /* Inner info boxes */ html[data-theme="light"] .bonus-info, html[data-theme="light"] .payment-info { background: #F3F6FC !important; border: 1px solid rgba(17,24,39,0.08) !important; } html[data-theme="light"] .bonus-item, html[data-theme="light"] .payment-item { border-bottom: 1px solid rgba(17,24,39,0.10) !important; /* restore separators */ } html[data-theme="light"] .bonus-item:last-child, html[data-theme="light"] .payment-item:last-child { border-bottom: none !important; } html[data-theme="light"] .bonus-label, html[data-theme="light"] .payment-label { color: rgba(17,24,39,0.65) !important; } html[data-theme="light"] .bonus-value, html[data-theme="light"] .payment-value { color: var(--text) !important; } html[data-theme="light"] .bonus-value.highlight { color: #055A78 !important; } /* Payment chips */ html[data-theme="light"] .payment-method { background: rgba(10,166,214,0.14) !important; color: #055A78 !important; border: 1px solid rgba(10,166,214,0.22) !important; box-shadow: none !important; } /* CTA buttons */ html[data-theme="light"] .claim-bonus-btn { background: #055A78 !important; color: #fff !important; border-radius: 12px !important; padding: 14px 24px !important; font-size: 0.95rem !important; font-weight: 800 !important; letter-spacing: 0.5px !important; box-shadow: 0 2px 10px rgba(5, 90, 120, 0.2) !important; transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important; } html[data-theme="light"] .claim-bonus-btn:hover { background: #0AA6D6 !important; box-shadow: 0 6px 20px rgba(10, 166, 214, 0.35) !important; transform: translateY(-2px); } html[data-theme="light"] .more-details-btn { background: var(--surface) !important; border: 1px solid var(--border) !important; color: var(--text-2) !important; } html[data-theme="light"] .more-details-btn:hover { background: rgba(10,166,214,0.12) !important; border-color: rgba(10,166,214,0.35) !important; color: #055A78 !important; box-shadow: 0 10px 22px rgba(10,166,214,0.12) !important; } /* Remove provider hover expansions on bonus page too */ html[data-theme="light"] .providers-section, html[data-theme="light"] .casino-hover-details { display: none !important; } /* Guide sections: remove alternating dark backgrounds */ html[data-theme="light"] .bonus-guide-section, html[data-theme="light"] .bonus-types-section, html[data-theme="light"] .evaluation-guide-section, html[data-theme="light"] .claiming-guide-section, html[data-theme="light"] .expert-tips-section, html[data-theme="light"] .pitfalls-section, html[data-theme="light"] .responsible-gambling-section { background: transparent !important; } /* Guide cards become clean white cards */ html[data-theme="light"] .guide-card, html[data-theme="light"] .type-card, html[data-theme="light"] .evaluation-item, html[data-theme="light"] .tip-card, html[data-theme="light"] .pitfall-card, html[data-theme="light"] .responsible-card, html[data-theme="light"] .step-item { background: var(--surface) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-soft-2) !important; backdrop-filter: none !important; } /* Text in guide cards */ html[data-theme="light"] .guide-card h3, html[data-theme="light"] .type-content h3, html[data-theme="light"] .evaluation-item h3, html[data-theme="light"] .tip-content h3, html[data-theme="light"] .pitfall-content h3, html[data-theme="light"] .responsible-card h3, html[data-theme="light"] .step-content h3 { color: var(--text) !important; } html[data-theme="light"] .guide-card p, html[data-theme="light"] .type-content p, html[data-theme="light"] .evaluation-item p, html[data-theme="light"] .tip-content p, html[data-theme="light"] .pitfall-content p, html[data-theme="light"] .responsible-card p, html[data-theme="light"] .step-content p, html[data-theme="light"] .guide-subtitle, html[data-theme="light"] .types-subtitle, html[data-theme="light"] .evaluation-subtitle, html[data-theme="light"] .claiming-subtitle, html[data-theme="light"] .tips-subtitle, html[data-theme="light"] .pitfalls-subtitle, html[data-theme="light"] .responsible-subtitle { color: #374151 !important; } /* Feature tags */ html[data-theme="light"] .feature-tag { background: rgba(10,166,214,0.12) !important; border: 1px solid rgba(10,166,214,0.22) !important; color: #055A78 !important; } /* Modal */ html[data-theme="light"] .modal-overlay { background: rgba(17, 24, 39, 0.55) !important; } html[data-theme="light"] .modal-content { background: var(--surface) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-soft) !important; } /* ========================================================= Bonuses page card header fix: keep name + rating LEFT like casino page ========================================================= */ @media (min-width: 901px) { html[data-theme="light"] .casino-card { position: relative !important; } /* Make sure badges never influence layout */ html[data-theme="light"] .casino-badges-topright { position: absolute !important; top: 18px !important; right: 30px !important; display: flex !important; gap: 8px !important; z-index: 3 !important; } /* Ensure header is a clean left-aligned row */ html[data-theme="light"] .casino-header { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 16px !important; } /* The name + rating stays left */ html[data-theme="light"] .casino-name-rating { display: flex !important; align-items: center !important; gap: 10px !important; margin-right: auto !important; /* this keeps it left */ } /* Give space so badges don't collide visually */ html[data-theme="light"] .casino-description { padding-top: 6px !important; } /* ========================================================= Slots page – light theme alignment ========================================================= */ html[data-theme="light"] .hero-section { background: radial-gradient(900px 500px at 50% 0%, rgba(10,166,214,0.14), transparent 60%) !important; } html[data-theme="light"] .hero-section::before { background: radial-gradient(circle at 50% 50%, rgba(10,166,214,0.14) 0%, transparent 70%) !important; } html[data-theme="light"] .title-sub, html[data-theme="light"] .hero-description, html[data-theme="light"] .section-description { color: #374151 !important; } /* Slot cards */ html[data-theme="light"] .slot-card { background: var(--surface) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-soft-2) !important; } html[data-theme="light"] .slot-card:hover { border-color: rgba(10,166,214,0.35) !important; box-shadow: var(--shadow-cyan) !important; } /* Slot image overlay: stop the heavy dark overlay */ html[data-theme="light"] .slot-overlay { background: linear-gradient(135deg, rgba(10,166,214,0.14) 0%, rgba(17,24,39,0.00) 60%) !important; } /* Slot info text */ html[data-theme="light"] .slot-name { color: #055A78 !important; } html[data-theme="light"] .slot-provider { color: rgba(17,24,39,0.60) !important; } /* Stats boxes inside card */ html[data-theme="light"] .stat { background: #F3F6FC !important; border: 1px solid rgba(17,24,39,0.08) !important; } html[data-theme="light"] .stat-label { color: rgba(17,24,39,0.60) !important; } html[data-theme="light"] .stat-value { color: #055A78 !important; font-weight: 700 !important; } /* Slot details box */ html[data-theme="light"] .slot-details { background: #F3F6FC !important; border: 1px solid rgba(17,24,39,0.08) !important; } html[data-theme="light"] .detail-row { border-bottom: 1px solid rgba(17,24,39,0.10) !important; } html[data-theme="light"] .detail-label { color: rgba(17,24,39,0.60) !important; } html[data-theme="light"] .detail-value { color: var(--text) !important; } /* Buttons */ html[data-theme="light"] .show-toggle-btn { background: var(--surface) !important; border: 1px solid rgba(17,24,39,0.12) !important; color: var(--text-2) !important; } html[data-theme="light"] .show-toggle-btn:hover { background: rgba(10,166,214,0.12) !important; border-color: rgba(10,166,214,0.35) !important; color: #055A78 !important; } html[data-theme="light"] .casino-btn { background: linear-gradient(135deg, #0AA6D6 0%, #056F95 100%) !important; color: #ffffff !important; box-shadow: 0 14px 30px rgba(10,166,214,0.22) !important; } html[data-theme="light"] .casino-btn:hover { box-shadow: 0 18px 40px rgba(10,166,214,0.30) !important; } /* Content cards section (How slots work / benefits / strategies) */ html[data-theme="light"] .content-section, html[data-theme="light"] .faq-section { background: transparent !important; } html[data-theme="light"] .content-card, html[data-theme="light"] .game-show-card, html[data-theme="light"] .faq-item { background: var(--surface) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-soft-2) !important; } html[data-theme="light"] .content-card h3, html[data-theme="light"] .game-show-card h3, html[data-theme="light"] .faq-question h3 { color: var(--text) !important; } html[data-theme="light"] .content-card p, html[data-theme="light"] .game-show-card p, html[data-theme="light"] .faq-answer p { color: #374151 !important; } /* Provider badge on game shows */ html[data-theme="light"] .provider-badge { background: rgba(10,166,214,0.14) !important; border: 1px solid rgba(10,166,214,0.22) !important; color: #055A78 !important; } html[data-theme="light"] .providers-section{ background: rgba(10,166,214,0.06) !important; } /* FAQ hover */ html[data-theme="light"] .faq-question:hover { background: rgba(10,166,214,0.08) !important; } @media (max-width: 480px) { html[data-theme="light"] .title-main { font-size: 2.4rem !important; background: none !important; -webkit-background-clip: unset !important; background-clip: unset !important; -webkit-text-fill-color: unset !important; color: #111827 !important; } html[data-theme="light"] .title-sub { font-size: 1.1rem !important; } } /* ========================================================= Casino Games / Table Games page – light theme ========================================================= */ /* Hero — flat, clean, no animations */ html[data-theme="light"] .hero-section { background: transparent !important; padding: 28px 0 18px !important; text-align: left !important; overflow: visible !important; } html[data-theme="light"] .hero-section::before { display: none !important; } html[data-theme="light"] .hero-title .title-main { background: none !important; -webkit-background-clip: unset !important; background-clip: unset !important; -webkit-text-fill-color: unset !important; color: #111827 !important; font-size: clamp(1.8rem, 3.5vw, 2.4rem) !important; animation: none !important; filter: none !important; } html[data-theme="light"] .title-sub { color: rgba(17,24,39,0.72) !important; font-size: 0.95rem !important; font-weight: 400 !important; animation: none !important; } html[data-theme="light"] .hero-description { color: rgba(17,24,39,0.65) !important; font-size: 0.95rem !important; animation: none !important; margin: 0 !important; max-width: 700px !important; } /* Tabs (category buttons) */ html[data-theme="light"] .category-tabs .tab-btn { background: #fff !important; border: 1px solid rgba(17,24,39,0.10) !important; color: rgba(17,24,39,0.65) !important; box-shadow: none !important; padding: 8px 16px !important; font-size: 0.88rem !important; transition: background .15s ease, border-color .15s ease, color .15s ease !important; } html[data-theme="light"] .category-tabs .tab-btn::before { display: none !important; } html[data-theme="light"] .category-tabs .tab-btn:hover, html[data-theme="light"] .category-tabs .tab-btn.active { background: rgba(5,90,120,0.08) !important; border-color: rgba(5,90,120,0.25) !important; color: #055A78 !important; box-shadow: none !important; transform: none !important; } /* Game cards */ html[data-theme="light"] .game-card { background: #fff !important; border: 1px solid rgba(17,24,39,0.10) !important; box-shadow: 0 2px 8px rgba(17,24,39,0.04) !important; border-radius: 14px !important; } html[data-theme="light"] .game-card::before { display: none !important; } html[data-theme="light"] .game-card:hover { transform: translateY(-3px) !important; box-shadow: 0 8px 24px rgba(17,24,39,0.10) !important; border-color: rgba(5,90,120,0.20) !important; } html[data-theme="light"] .game-image img { filter: none !important; } html[data-theme="light"] .game-image::after { background: linear-gradient(to top, rgba(17,24,39,0.06), transparent) !important; } html[data-theme="light"] .game-title { color: #111827 !important; } html[data-theme="light"] .game-card:hover .game-title { color: #055A78 !important; } html[data-theme="light"] .game-provider, html[data-theme="light"] .game-description { color: rgba(17,24,39,0.65) !important; } html[data-theme="light"] .game-toggle { color: #055A78 !important; } html[data-theme="light"] .game-toggle:hover { color: #111827 !important; } /* Game stats chips */ html[data-theme="light"] .game-stat { background: #F3F6FC !important; border: 1px solid rgba(17,24,39,0.08) !important; } html[data-theme="light"] .game-stat .stat-label { color: rgba(17,24,39,0.55) !important; } html[data-theme="light"] .game-stat .stat-value { color: #055A78 !important; } /* CTA button inside game card */ html[data-theme="light"] .game-button { background: #055A78 !important; color: #fff !important; box-shadow: 0 4px 14px rgba(5, 90, 120, 0.18) !important; border-radius: 10px !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 700 !important; } html[data-theme="light"] .game-button::before { display: none !important; } html[data-theme="light"] .game-button:hover { box-shadow: 0 8px 22px rgba(5, 90, 120, 0.25) !important; transform: translateY(-2px) !important; } /* Featured badge */ html[data-theme="light"] .game-badge { background: rgba(5,90,120,0.10) !important; color: #055A78 !important; border: 1px solid rgba(5,90,120,0.20) !important; box-shadow: none !important; animation: none !important; } /* Benefits / shows / FAQ sections */ html[data-theme="light"] .benefits-section, html[data-theme="light"] .faq-section, html[data-theme="light"] .game-shows-section { background: transparent !important; } html[data-theme="light"] .benefits-section::before { display: none !important; } html[data-theme="light"] .section-title { background: none !important; -webkit-background-clip: unset !important; background-clip: unset !important; -webkit-text-fill-color: unset !important; color: #111827 !important; font-size: 1.3rem !important; font-weight: 900 !important; text-align: center !important; margin-bottom: 16px !important; } html[data-theme="light"] .benefits-section .section-title, html[data-theme="light"] .game-shows-section .section-title { text-align: left !important; max-width: 900px !important; margin: 0 auto 16px !important; } html[data-theme="light"] .benefits-content p, html[data-theme="light"] .section-intro { color: rgba(17,24,39,0.65) !important; text-align: left !important; } html[data-theme="light"] .subsection-title { color: #111827 !important; font-size: 1.05rem !important; } /* Game show cards + FAQ cards */ html[data-theme="light"] .game-show-card, html[data-theme="light"] .faq-item { background: #fff !important; border: 1px solid rgba(17,24,39,0.10) !important; box-shadow: 0 2px 8px rgba(17,24,39,0.04) !important; border-radius: 14px !important; padding: 20px !important; } html[data-theme="light"] .game-show-card::before, html[data-theme="light"] .faq-item::before { display: none !important; } html[data-theme="light"] .game-show-card:hover, html[data-theme="light"] .faq-item:hover { transform: translateY(-3px) !important; box-shadow: 0 8px 24px rgba(17,24,39,0.10) !important; border-color: rgba(5,90,120,0.20) !important; } html[data-theme="light"] .game-show-card h3, html[data-theme="light"] .faq-item h3 { color: #111827 !important; font-size: 1rem !important; } html[data-theme="light"] .game-show-card p, html[data-theme="light"] .faq-item p { color: rgba(17,24,39,0.65) !important; } /* Loader */ html[data-theme="light"] .games-grid .loading-spinner { background: transparent !important; } html[data-theme="light"] .spinner { border-color: rgba(17,24,39,0.08) !important; border-top-color: #055A78 !important; } html[data-theme="light"] .loading-spinner p { color: rgba(17,24,39,0.50) !important; } /* Games section tighter padding */ html[data-theme="light"] .games-section { padding: 24px 0 !important; } html[data-theme="light"] .category-tabs { margin-bottom: 20px !important; justify-content: center !important; } /* Content links */ html[data-theme="light"] .content-link { color: #055A78 !important; } /* ========================================================= Blog page – light theme ========================================================= */ /* Kill the dark neon background overlay on blog pages */ html[data-theme="light"] body::before { opacity: 0 !important; } /* Page background */ html[data-theme="light"] body { background: var(--page-bg) !important; color: var(--text) !important; } /* Layout spacing */ html[data-theme="light"] .blog-main-container { padding-top: 28px !important; } /* Sidebar becomes clean white card */ html[data-theme="light"] .sidebar { background: var(--surface) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-soft-2) !important; backdrop-filter: none !important; } html[data-theme="light"] .sidebar::before { display: none !important; } html[data-theme="light"] .sidebar-section h3 { color: #055A78 !important; } html[data-theme="light"] .sidebar-section h3::after { background: linear-gradient(135deg, #0AA6D6 0%, #055A78 100%) !important; box-shadow: none !important; } /* Filters / categories items */ html[data-theme="light"] .filter-item, html[data-theme="light"] .category-item { color: var(--text-2) !important; } html[data-theme="light"] .filter-item:hover, html[data-theme="light"] .category-item:hover { color: #055A78 !important; background: rgba(10,166,214,0.10) !important; border-color: rgba(10,166,214,0.22) !important; } html[data-theme="light"] .filter-item.active, html[data-theme="light"] .category-item.active { background: rgba(10,166,214,0.14) !important; color: #055A78 !important; border-color: rgba(10,166,214,0.28) !important; box-shadow: 0 12px 26px rgba(10,166,214,0.12) !important; } /* Tags */ html[data-theme="light"] .tag-item, html[data-theme="light"] .blog-tag { background: rgba(17,24,39,0.06) !important; color: rgba(17,24,39,0.70) !important; border: 1px solid rgba(17,24,39,0.08) !important; } html[data-theme="light"] .tag-item:hover, html[data-theme="light"] .blog-tag:hover { background: rgba(10,166,214,0.12) !important; color: #055A78 !important; border-color: rgba(10,166,214,0.22) !important; box-shadow: 0 10px 22px rgba(10,166,214,0.10) !important; } /* Search bar */ html[data-theme="light"] .search-input { background: var(--surface) !important; border: 1px solid var(--border) !important; color: var(--text) !important; box-shadow: var(--shadow-soft-2) !important; backdrop-filter: none !important; } html[data-theme="light"] .search-input::placeholder { color: rgba(17,24,39,0.45) !important; } html[data-theme="light"] .search-input:focus { border-color: rgba(10,166,214,0.35) !important; box-shadow: 0 0 0 4px rgba(10,166,214,0.12), var(--shadow-soft-2) !important; background: var(--surface) !important; } html[data-theme="light"] .search-icon { color: rgba(17,24,39,0.45) !important; } html[data-theme="light"] .search-input:focus + .search-icon { color: #055A78 !important; } /* Blog cards */ html[data-theme="light"] .blog-post { background: var(--surface) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-soft-2) !important; backdrop-filter: none !important; } html[data-theme="light"] .blog-post::before { display: none !important; } html[data-theme="light"] .blog-post:hover { border-color: rgba(10,166,214,0.35) !important; box-shadow: var(--shadow-cyan) !important; } /* Title + excerpt */ html[data-theme="light"] .blog-title { color: var(--text) !important; } html[data-theme="light"] .blog-title:hover { color: #055A78 !important; } html[data-theme="light"] .blog-excerpt { color: #374151 !important; } /* Category pill */ html[data-theme="light"] .blog-category { background: rgba(10,166,214,0.14) !important; color: #055A78 !important; border: 1px solid rgba(10,166,214,0.22) !important; } html[data-theme="light"] .blog-category:hover { background: rgba(10,166,214,0.18) !important; box-shadow: 0 10px 22px rgba(10,166,214,0.10) !important; } /* Meta row */ html[data-theme="light"] .blog-meta { color: rgba(17,24,39,0.55) !important; } html[data-theme="light"] .meta-item:hover { color: #055A78 !important; } /* Read more link */ html[data-theme="light"] .read-more { color: #055A78 !important; } html[data-theme="light"] .read-more::after { background: linear-gradient(90deg, #0AA6D6, #056F95) !important; } html[data-theme="light"] .read-more:hover { color: #034B66 !important; } /* Loading / error */ html[data-theme="light"] .loading, html[data-theme="light"] .error-message, html[data-theme="light"] .no-results { background: var(--surface) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-soft-2) !important; color: #374151 !important; } html[data-theme="light"] .loading i { color: #0AA6D6 !important; } /* Modal (blog post preview) */ html[data-theme="light"] #blogModal.modal { background: rgba(17, 24, 39, 0.55) !important; } html[data-theme="light"] #blogModal .modal-content { background: var(--surface) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-soft) !important; backdrop-filter: none !important; } html[data-theme="light"] #blogModal .close-modal { background: rgba(17,24,39,0.06) !important; color: rgba(17,24,39,0.60) !important; } html[data-theme="light"] #blogModal .close-modal:hover { background: rgba(185, 28, 28, 0.10) !important; color: #B91C1C !important; } /* Modal text */ html[data-theme="light"] .modal-title { color: var(--text) !important; } html[data-theme="light"] .modal-meta { color: rgba(17,24,39,0.55) !important; border-bottom-color: rgba(17,24,39,0.10) !important; } html[data-theme="light"] .modal-content-text { color: #374151 !important; } /* Scrollbar */ html[data-theme="light"] ::-webkit-scrollbar-track { background: #EEF2F7 !important; } html[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(10,166,214,0.35) !important; } html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(10,166,214,0.55) !important; } /* ========================================================= Blog Post page – light theme (blog_post.html) ========================================================= */ /* Remove blog dark background glow */ html[data-theme="light"] body::before { opacity: 0 !important; } /* Post hero: make it light + premium */ html[data-theme="light"] .post-hero { background: radial-gradient(900px 500px at 50% 0%, rgba(10,166,214,0.14), transparent 60%) !important; border-bottom: 1px solid rgba(17,24,39,0.08) !important; } html[data-theme="light"] .post-title { color: var(--text) !important; } html[data-theme="light"] .post-title::after { background: linear-gradient(135deg, #0AA6D6 0%, #055A78 100%) !important; } /* Meta row */ html[data-theme="light"] .post-meta { color: rgba(17,24,39,0.60) !important; } html[data-theme="light"] .post-meta i { color: rgba(10,166,214,0.75) !important; } /* Main article card */ html[data-theme="light"] .post-article { background: var(--surface) !important; border: 1px solid rgba(17,24,39,0.10) !important; box-shadow: var(--shadow-soft-2) !important; } /* Article typography */ html[data-theme="light"] .blog-article { color: #2F3A46 !important; } html[data-theme="light"] .blog-article p { color: #2F3A46 !important; line-height: 1.85 !important; font-size: 1.08rem !important; } /* Article headings – editorial blue (not neon) */ html[data-theme="light"] .blog-article h1, html[data-theme="light"] .blog-article h2, html[data-theme="light"] .blog-article h3 { color: #055A78 !important; } /* Links inside article – clean, no ugly underline */ html[data-theme="light"] .blog-article a { color: #0AA6D6 !important; font-weight: 650 !important; text-decoration: none !important; border-bottom: 2px solid rgba(10,166,214,0.22) !important; padding-bottom: 1px; } html[data-theme="light"] .blog-article a:hover { color: #056F95 !important; border-bottom-color: rgba(10,166,214,0.45) !important; } /* Blockquotes – cleaner */ html[data-theme="light"] .blog-article blockquote { border-left-color: rgba(10,166,214,0.55) !important; background: rgba(10,166,214,0.08) !important; color: #374151 !important; } /* Code blocks */ html[data-theme="light"] .blog-article pre { background: #0F172A !important; color: #E5E7EB !important; } /* Share buttons */ html[data-theme="light"] .share-btn { background: rgba(17,24,39,0.06) !important; border: 1px solid rgba(17,24,39,0.10) !important; color: rgba(17,24,39,0.65) !important; } html[data-theme="light"] .share-btn:hover { background: rgba(10,166,214,0.12) !important; border-color: rgba(10,166,214,0.22) !important; color: #055A78 !important; transform: translateY(-2px) !important; } /* Tags */ html[data-theme="light"] .post-tag { background: rgba(17,24,39,0.06) !important; border: 1px solid rgba(17,24,39,0.10) !important; color: rgba(17,24,39,0.70) !important; } /* Author box */ html[data-theme="light"] .author-box { background: #F3F6FC !important; border: 1px solid rgba(17,24,39,0.08) !important; } html[data-theme="light"] .author-name, html[data-theme="light"] .author-name-link { color: #111827 !important; } html[data-theme="light"] .author-bio { color: rgba(17,24,39,0.55) !important; opacity: 1 !important; } /* Post nav */ html[data-theme="light"] .post-nav { border-top: 1px solid rgba(17,24,39,0.10) !important; } html[data-theme="light"] .post-nav-link { background: var(--surface) !important; border: 1px solid rgba(17,24,39,0.10) !important; color: #374151 !important; box-shadow: 0 10px 20px rgba(17,24,39,0.06) !important; } html[data-theme="light"] .post-nav-link:hover { color: #055A78 !important; border-color: rgba(10,166,214,0.22) !important; } /* Sidebar cards on post page */ html[data-theme="light"] .sidebar-card { background: var(--surface) !important; border: 1px solid rgba(17,24,39,0.10) !important; box-shadow: var(--shadow-soft-2) !important; } html[data-theme="light"] .sidebar-card h3 { color: #055A78 !important; } html[data-theme="light"] .sidebar-links a, html[data-theme="light"] .related-list a { color: #374151 !important; } html[data-theme="light"] .sidebar-links a:hover, html[data-theme="light"] .related-list a:hover { color: #056F95 !important; } /* ========================================================= Blog article links – remove default underline spam ========================================================= */ /* Blog post page */ html[data-theme="light"] .blog-article a { text-decoration: none !important; border-bottom: 2px solid transparent !important; padding-bottom: 1px; color: #0AA6D6 !important; font-weight: 650 !important; } html[data-theme="light"] .blog-article a:hover { color: #056F95 !important; border-bottom-color: rgba(10,166,214,0.35) !important; } /* Blog modal (list page popup) */ html[data-theme="light"] #blogModal .modal-content-text a { text-decoration: none !important; border-bottom: 2px solid transparent !important; padding-bottom: 1px; color: #0AA6D6 !important; font-weight: 650 !important; } html[data-theme="light"] #blogModal .modal-content-text a:hover { color: #056F95 !important; border-bottom-color: rgba(10,166,214,0.35) !important; } html[data-theme="light"] .post-article .blog-article { max-width: 760px; margin: 0 auto; } html[data-theme="light"] .blog-article h2 { margin-top: 2.4rem !important; margin-bottom: 0.8rem !important; } html[data-theme="light"] .blog-article h3 { margin-top: 1.8rem !important; margin-bottom: 0.7rem !important; } html[data-theme="light"] .share-btn { border-radius: 12px !important; background: rgba(17,24,39,0.06) !important; border: 1px solid rgba(17,24,39,0.10) !important; } html[data-theme="light"] .share-btn:hover { background: rgba(10,166,214,0.12) !important; border-color: rgba(10,166,214,0.22) !important; color: #055A78 !important; } html[data-theme="light"] .related-list a, html[data-theme="light"] .sidebar-links a { padding: 8px 10px; border-radius: 10px; display: block; } html[data-theme="light"] .related-list a:hover, html[data-theme="light"] .sidebar-links a:hover { background: rgba(10,166,214,0.08); } /* ========================================================= Blog post sidebar – mini casino cards ========================================================= */ html[data-theme="light"] .casino-sidebar-list { display: grid; gap: 12px; } html[data-theme="light"] .casino-mini { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; background: rgba(17,24,39,0.04); border: 1px solid rgba(17,24,39,0.08); transition: all 0.2s ease; } html[data-theme="light"] .casino-mini:hover { background: rgba(10,166,214,0.08); border-color: rgba(10,166,214,0.18); } html[data-theme="light"] .casino-mini-logo { width: 52px; height: 52px; border-radius: 12px; object-fit: contain; background: #fff; border: 1px solid rgba(17,24,39,0.08); padding: 6px; } html[data-theme="light"] .casino-mini-name { font-weight: 800; color: #111827; font-size: 0.98rem; line-height: 1.1; text-decoration: none; } html[data-theme="light"] a.casino-mini-name:hover { color: #055A78; } html[data-theme="light"] .casino-mini-meta { color: rgba(17,24,39,0.60); font-size: 0.85rem; margin-top: 4px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } html[data-theme="light"] .casino-mini-logo { grid-row: 1 / -1; align-self: center; } html[data-theme="light"] .casino-mini-rating { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: rgba(255,193,7,0.14); border: 1px solid rgba(255,193,7,0.30); color: #111827; font-weight: 800; font-size: 0.88rem; white-space: nowrap; grid-column: 3; justify-self: end; } html[data-theme="light"] .casino-mini-rating .star { color: #F4B400; } html[data-theme="light"] .casino-mini-cta { appearance: none; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 10px 14px; border-radius: 12px; background: #055A78; color: #fff; font-weight: 900; font-size: 0.82rem; letter-spacing: 0.6px; text-transform: uppercase; box-shadow: 0 2px 10px rgba(5, 90, 120, 0.2); transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; grid-column: 3; justify-self: end; } html[data-theme="light"] .casino-mini-meta { margin-top: 6px; } html[data-theme="light"] .casino-mini-offer { display: inline-block; color: rgba(17,24,39,0.70); font-size: 0.88rem; line-height: 1.25; } html[data-theme="light"] .casino-mini-cta { text-transform: uppercase; letter-spacing: 0.6px; font-weight: 900; } /* ========================================================= Sidebar casino CLAIM button – restore old premium look ========================================================= */ html[data-theme="light"] .casino-mini-cta { appearance: none !important; -webkit-appearance: none !important; border: none !important; outline: none !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 10px 14px !important; border-radius: 12px !important; background: linear-gradient(135deg, #0AA6D6 0%, #056F95 100%) !important; color: #ffffff !important; font-weight: 900 !important; font-size: 0.82rem !important; letter-spacing: 0.6px !important; text-transform: uppercase !important; box-shadow: 0 14px 30px rgba(10,166,214,0.22) !important; transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease !important; } html[data-theme="light"] .casino-mini-cta:hover { background: #0AA6D6; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(10, 166, 214, 0.3); } html[data-theme="light"] .casino-mini-cta:active { transform: translateY(-1px) scale(0.98); } html[data-theme="light"] .casino-mini-cta:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(10, 166, 214, 0.35); } /* Prevent the anchor hover style from affecting the button */ html[data-theme="light"] .casino-mini:hover .casino-mini-cta { transform: translateY(-2px) !important; } /* ========================================================= Sidebar CLAIM button — teal (blog + slot review) ========================================================= */ html[data-theme="light"] .casino-sidebar-list .casino-mini .casino-mini-cta { appearance: none !important; -webkit-appearance: none !important; border: none !important; outline: none !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 10px 14px !important; border-radius: 12px !important; background: #055A78 !important; color: #fff !important; font-weight: 900 !important; font-size: 0.82rem !important; letter-spacing: 0.6px !important; text-transform: uppercase !important; box-shadow: 0 2px 10px rgba(5, 90, 120, 0.2) !important; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important; } html[data-theme="light"] .casino-sidebar-list .casino-mini .casino-mini-cta:hover { background: #0AA6D6 !important; transform: translateY(-2px) !important; box-shadow: 0 6px 18px rgba(10, 166, 214, 0.3) !important; } html[data-theme="light"] .casino-sidebar-list .casino-mini .casino-mini-cta:active { transform: translateY(-1px) scale(0.98) !important; } /* OPTIONAL: stop the whole mini card getting a blue tint on hover */ html[data-theme="light"] .casino-sidebar-list .casino-mini:hover { background: rgba(17,24,39,0.04) !important; border-color: rgba(17,24,39,0.10) !important; } .header{ position: sticky; top: 0; z-index: 9999; } /* ========================================================= Mobile cards: prevent desktop header pieces from showing Applies to BOTH casino + bonuses pages ========================================================= */ @media (max-width: 900px) { html[data-theme="light"] .casino-badges-topright, html[data-theme="light"] .casino-header, html[data-theme="light"] .casino-description, html[data-theme="light"] .casino-name-rating, html[data-theme="light"] .casino-rank { display: none !important; } html[data-theme="light"] .casino-mobile-header { display: flex !important; } } /* Mobile: widen casino card modal content */ @media (max-width: 768px) { .modal-content { width: calc(100vw - 24px) !important; max-width: none !important; margin: 12px auto !important; padding-left: 20px !important; padding-right: 20px !important; } /* Inner sections should use full width */ .modal-section, .modal-description, .modal-pros, .modal-cons, .package-item, .info-item { max-width: 100% !important; } } /* Blog mobile: force readable light cards */ @media (max-width: 900px) { html[data-theme="light"] body { background: #F5F7FB !important; } html[data-theme="light"] .blog-post, html[data-theme="light"] .post-article, html[data-theme="light"] #blogModal .modal-content { background: #ffffff !important; color: #111827 !important; } html[data-theme="light"] .blog-excerpt, html[data-theme="light"] .blog-article, html[data-theme="light"] .blog-article p, html[data-theme="light"] #blogModal .modal-content-text { color: #374151 !important; } } /* Blog search bar (mobile + desktop) */ html[data-theme="light"] .search-container { max-width: 100% !important; } html[data-theme="light"] .search-input { background: #ffffff !important; border: 1px solid rgba(17,24,39,0.12) !important; color: #111827 !important; box-shadow: 0 10px 22px rgba(17,24,39,0.06) !important; } html[data-theme="light"] .search-input::placeholder { color: rgba(17,24,39,0.45) !important; } html[data-theme="light"] .search-icon { color: rgba(17,24,39,0.45) !important; } html[data-theme="light"] .search-input:focus { border-color: rgba(10,166,214,0.35) !important; box-shadow: 0 0 0 4px rgba(10,166,214,0.12), 0 10px 22px rgba(17,24,39,0.06) !important; } /* Blog post: force header fixed (sticky fallback) */ body.blog-body .header{ position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 99999 !important; } /* Push the page down so content doesn't hide under the fixed header */ body.blog-body{ padding-top: 76px !important; /* adjust if your header is taller */ }